/* ============================================================
   PALETA — tomada de la propia tarjeta impresa del producto.
   Los cuatro colores salen de promediar los píxeles del inserto
   (tarjeta-inserto.jpg), así la web y la pieza física combinan.

   Papel         #F7F6F4   fondo base, el blanco cálido del inserto
   Neblina       #EAE7E3   superficies y bordes suaves
   Azul Tarjeta  #185CB3   acento primario, links, foco
   Ámbar Tarjeta #EBA829   CTA y detalles cálidos
   Rojo Tarjeta  #CB1721   acento puntual
   Verde Tarjeta #308748   acento puntual
   Grafito       #10161D   texto y contraste
   ============================================================ */
:root{
  --papel:#F7F6F4;
  --neblina:#EAE7E3;
  --azul:#185CB3;
  --ambar:#EBA829;
  --rojo:#CB1721;
  --verde:#308748;
  --grafito:#10161D;

  /* alias en uso por el resto de la hoja */
  --vidrio:var(--papel);
  --aqua:var(--ambar);
  --cian:var(--azul);
  --prisma:#0F4A94;

  --tinta:#10161D;
  --tinta-60:#5E6068;
  --tinta-40:#8E9098;
  --linea:rgba(16,22,29,.10);
  --blanco:#FFFFFF;

  /* la del logo */
  --display:'Archivo', 'Arial', ui-sans-serif, system-ui, sans-serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-s:10px; --r-m:16px; --r-l:26px;
  --pad:clamp(20px,5vw,64px);
  --maxw:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--vidrio);
  font-size:clamp(15px,.5vw + 14px,17px);
  line-height:1.6;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* En desktop se muestra todo al 90% (como ver la web con zoom 90% del
   navegador). En celular queda al 100%. */
@media (min-width:901px){
  html{ zoom:.9; }
}

/* --- foco accesible, visible sobre cualquier fondo --- */
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--prisma);
  outline-offset:3px;
  border-radius:6px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--blanco);padding:12px 18px;border-radius:0 0 var(--r-s) 0;
  font-weight:600;
}
.skip:focus{left:0}

/* --- layout --- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}

/* ===== Fondo interactivo: campo de puntos que se apartan del cursor =====
   Canvas fijo detrás de todo el contenido (z-index:-1). Las secciones
   transparentes dejan ver los puntos; la tarjeta oscura de contacto los tapa.
   La máscara desvanece los puntos cerca del borde superior (bajo el nav). */
#campo-puntos{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 8%, #000 22%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 8%, #000 22%);
}
#campo-puntos canvas{display:block;width:100%;height:100%;touch-action:none;will-change:transform}

h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:0}
h1{font-size:clamp(2.4rem,7.2vw,4.5rem)}
h2{font-size:clamp(1.9rem,4.4vw,3rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.015em;line-height:1.25}
p{margin:0}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cian);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.lead{color:var(--tinta-60);font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.62;max-width:56ch}

/* ============================ NAV ============================ */
.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px)  saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  background:color-mix(in srgb,var(--vidrio) 78%,transparent);
  border-bottom:1px solid var(--linea);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
/* Logo: PNG con canal alfa generado desde "Tapit-ar logo.jpg".
   logo-tapit.png (tinta grafito) para fondos claros,
   logo-tapit-blanco.png para los bloques oscuros. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:30px;width:auto}
.logo-oscuro{height:52px;width:auto;margin-bottom:22px}
.logo-pie{height:24px;width:auto;opacity:.55}
/* Logo como titular del hero (reemplaza al texto "Tapit.ar") */
.titular-logo{height:clamp(2.4rem,8vw,6rem);width:auto;display:inline-block;vertical-align:middle}
.foot-marca{display:flex;align-items:center;gap:12px}
.nav-links{display:flex;gap:28px;font-size:.9rem;color:var(--tinta-60)}
.nav-links a{text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--tinta)}

/* Botón hamburguesa MENU (solo celular) */
.nav-burger{display:none;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.nav-burger .nav-flecha{color:var(--ambar);transition:transform .25s ease}
.nav.abierto .nav-burger .nav-flecha{transform:rotate(-90deg)}

@media (max-width:760px){
  .nav-burger{display:inline-flex}
  .brand{display:none}                 /* en celular el logo va grande en el hero */

  /* Menú grande estilo Flim: cubre la pantalla, entra con slide + stagger */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    min-height:calc(100vh - 66px);
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--vidrio);
    padding:28px var(--pad) 40px;
    opacity:0; visibility:hidden; transform:translateY(-16px);
    transition:opacity .3s ease, transform .42s cubic-bezier(.16,1,.3,1), visibility .42s;
  }
  .nav.abierto .nav-links{ opacity:1; visibility:visible; transform:none; }
  .nav .nav-links a{
    font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.06;
    text-transform:none; font-size:clamp(2rem,9vw,2.9rem); color:var(--tinta); padding:6px 0; border:0;
    opacity:0; transform:translateY(14px);
    transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
  }
  .nav-links a .nav-flecha{ display:none; }   /* sin flechita adentro del menú grande */
  .nav.abierto .nav-links a{ opacity:1; transform:none; }
  .nav.abierto .nav-links a:nth-child(1){ transition-delay:.07s; }
  .nav.abierto .nav-links a:nth-child(2){ transition-delay:.13s; }
  .nav.abierto .nav-links a:nth-child(3){ transition-delay:.19s; }
  .nav.abierto .nav-links a:nth-child(4){ transition-delay:.25s; }
  .nav.abierto .nav-links a:nth-child(5){ transition-delay:.31s; }
}
.nav-cta{
  font-size:.85rem;font-weight:700;text-decoration:none;color:var(--tinta);
  padding:9px 20px;border-radius:100px;border:1px solid #FFE140;
  background:#FFE140;
  box-shadow:0 4px 18px rgba(255,225,64,.55), 0 0 0 4px rgba(255,225,64,.16);
  transition:transform .2s ease, box-shadow .25s ease, background .2s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:#FFD41F;transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(255,225,64,.9), 0 0 0 5px rgba(255,225,64,.3)}
.nav-cta:active{transform:translateY(0);box-shadow:0 3px 14px rgba(255,225,64,.6)}

/* ======================= HERO "PAPEL" =======================
   Apertura inmersiva construida con el vocabulario gráfico de la
   propia tarjeta impresa: fondo papel, el arco azul de la esquina,
   la onda ámbar, el cúmulo de círculos y el confeti de puntos.
   Todo el decorado es CSS/SVG; la única imagen es el producto
   la secuencia 360° del producto (img/360/).
   ============================================================ */
.papel{
  position:relative;
  min-height:100svh;
  display:grid;align-content:center;
  padding:clamp(84px,11vh,124px) 0 clamp(56px,8vh,86px);
  overflow:hidden;
  background:linear-gradient(178deg,#FFFFFF 0%,#FDFCFB 52%,var(--papel) 100%);
  isolation:isolate;
}

.papel-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.papel-centinela{position:absolute;left:0;top:56%;width:1px;height:1px}

/* --- arco azul de la esquina superior izquierda (cita de la tarjeta) --- */
.arco{
  position:absolute;left:calc(-1 * min(14vw,150px));top:calc(-1 * min(14vw,150px));
  width:min(38vw,420px);aspect-ratio:1;border-radius:50%;
  background:var(--azul);opacity:.9;
}
/* --- cúmulo inferior derecho: ámbar + verde + rojo --- */
.cumulo{position:absolute;right:calc(-1 * min(9vw,110px));bottom:calc(-1 * min(11vw,130px))}
.cumulo i{position:absolute;display:block;border-radius:50%}
.cumulo .g{width:min(34vw,380px);aspect-ratio:1;background:var(--ambar);right:0;bottom:0;opacity:.92}
.cumulo .v{width:min(11vw,120px);aspect-ratio:1;background:var(--verde);right:min(22vw,250px);bottom:min(16vw,180px)}
.cumulo .r{width:min(7vw,76px);aspect-ratio:1;background:var(--rojo);right:min(27vw,300px);bottom:min(24vw,270px)}

/* --- onda ámbar que cruza el hero, como la de la tarjeta --- */
.onda{position:absolute;left:-2%;width:104%;height:auto;opacity:.85}
.onda.o1{top:34%}

/* --- confeti de puntos en los cuatro colores --- */
.punto{position:absolute;border-radius:50%;display:block}
.punto.p1{width:clamp(14px,1.7vw,24px);aspect-ratio:1;background:var(--rojo);  left:14%;top:22%}
.punto.p2{width:clamp(10px,1.2vw,17px);aspect-ratio:1;background:var(--ambar); left:20%;top:31%}
.punto.p3{width:clamp(16px,2vw,28px); aspect-ratio:1;background:var(--azul);   right:16%;top:19%}
.punto.p4{width:clamp(11px,1.3vw,18px);aspect-ratio:1;background:var(--verde); right:23%;top:29%}
.punto.p5{width:clamp(12px,1.5vw,21px);aspect-ratio:1;background:var(--ambar); left:9%;bottom:26%}
.punto.p6{width:clamp(9px,1.1vw,15px); aspect-ratio:1;background:var(--rojo);  right:9%;bottom:33%}
@media (max-width:760px){.punto.p2,.punto.p4,.punto.p6{display:none}}

/* --- contenido --- */
.papel-in{
  position:relative;z-index:2;
  display:grid;justify-items:center;text-align:center;
  perspective:1100px;                 /* para la inclinación del producto */
}

/* El producto se dimensiona por ALTO de ventana, no sólo por ancho:
   así nunca queda cortado por el borde inferior en pantallas bajas.
   La foto del hero es la vista lateral izquierda (780 × 1229), o sea
   0.635 de ancho por cada unidad de alto. */
.producto-caja{
  position:relative;z-index:1;
  width:min(46vw, 355px, 32svh);
}
/* .pieza lleva dos animaciones que no se pisan: la flotación usa la
   propiedad `translate` y la inclinación del mouse usa `transform`. */
.pieza{position:relative;display:block}

/* --- visor 360° --- */
.giro{
  width:100%;height:auto;display:block;
  /* los cuadros tienen fondo transparente real (canal alfa). Un
     drop-shadow suave sigue la silueta y separa el acrílico del fondo
     claro; la sombra de apoyo en el piso la da .producto-caja::after.
     Ambas son limpias e iguales en todos los cuadros. */
  filter:drop-shadow(0 12px 16px rgba(16,22,29,.15));
  cursor:grab;touch-action:pan-y;         /* deja scrollear vertical */
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
.giro.girando{cursor:grabbing}
.giro-pista{
  position:absolute;left:50%;bottom:-6px;translate:-50% 0;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--tinta-40);pointer-events:none;
  transition:opacity .4s ease;
}
.giro-pista svg{width:15px;height:15px;color:var(--azul)}
.giro-pista.oculta{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .giro-pista svg{animation:vaiven 2.4s ease-in-out infinite}
}
@keyframes vaiven{
  0%,100%{translate:-3px 0}
  50%{translate:3px 0}
}
/* las llamadas sólo tienen sentido en la vista frontal: se desvanecen
   apenas el producto empieza a girar y vuelven al llegar al frente */
.pines{transition:opacity .3s ease}
.pieza.rotada .pines{opacity:0;pointer-events:none}
/* ---------- llamadas sobre el producto ----------
   Cada zona real de la pieza (NFC, QR, base) tiene una llamada de
   plano técnico: un origen mínimo sobre la zona, una línea que sale
   en diagonal y después se endereza, y al final —ya fuera del
   producto— el punto que se clickea para leer la explicación.

   Cada .pin cubre TODA la caja del producto y ubica sus partes con
   --x / --y. Gracias a eso el globo puede colocarse tanto respecto
   del punto (en escritorio) como respecto del producto entero (en
   celular), que es donde no hay lugar para sacar las líneas afuera.

   Están medidas sobre el cuadro frontal del 360 (img/360/f01.webp);
   si se regenera la secuencia hay que reajustar --x / --y. */
.pines{position:absolute;inset:0;z-index:4;pointer-events:none}
.pin{
  position:absolute;inset:0;
  --tono:var(--azul);
  --diag:clamp(24px,3.6vw,42px);
  --recta:clamp(48px,7vw,92px);
  --largo-diag:calc(var(--diag) * 1.41421);
  --fin-x:calc(-1 * (var(--diag) + var(--recta)));
  --fin-y:calc(-1 * var(--diag));
}
/* coordenadas medidas sobre el cuadro frontal del 360 (img/360/f01) */
.pin.nfc { --x:42%;  --y:59%; --tono:var(--azul)}
.pin.qr  { --x:74%;  --y:60%; --tono:var(--verde);
           --recta:clamp(44px,6.2vw,80px);
           --fin-x:calc(var(--diag) + var(--recta))}
.pin.base{ --x:33%;  --y:83%; --tono:var(--ambar);
           --recta:clamp(40px,5.8vw,76px)}

/* --- origen: la marca mínima sobre la zona señalada --- */
.origen{
  position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--tono);opacity:.75;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--blanco) 85%,transparent);
}

/* --- la línea: diagonal + tramo recto --- */
.guia{position:absolute;left:var(--x);top:var(--y)}
.guia i{position:absolute;display:block;height:1px;background:var(--tono);opacity:.75}
.guia .diag{left:0;top:0;width:var(--largo-diag);transform-origin:0 50%}
.pin.nfc .guia .diag,
.pin.base .guia .diag{rotate:-135deg}   /* arriba a la izquierda */
.pin.qr  .guia .diag{rotate:-45deg}     /* arriba a la derecha  */
.guia .recta{top:var(--fin-y);width:var(--recta)}
.pin.nfc .guia .recta,
.pin.base .guia .recta{left:var(--fin-x)}
.pin.qr  .guia .recta{left:var(--diag)}

/* --- cabo: el extremo, con el punto que se clickea --- */
.cabo{
  position:absolute;width:0;height:0;
  left:calc(var(--x) + var(--fin-x));
  top:calc(var(--y) + var(--fin-y));
}
.ancla{
  position:absolute;left:0;top:0;translate:-50% -50%;
  appearance:none;border:0;padding:0;cursor:pointer;pointer-events:auto;
  width:15px;height:15px;border-radius:50%;
  background:var(--tono);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blanco) 92%,transparent),
             0 2px 8px rgba(16,22,29,.30);
  transition:scale .25s cubic-bezier(.2,.7,.3,1);
}
/* área de toque cómoda sin agrandar el punto a la vista */
.ancla::before{content:"";position:absolute;inset:-15px;border-radius:50%}

/* etiqueta corta al final de la línea — sólo se usa en celular
   (en escritorio el nombre ya aparece en el título del globo) */
.corto{
  display:none;position:absolute;left:0;bottom:100%;translate:-50% -7px;
  font-family:var(--display);font-weight:700;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta);white-space:nowrap;pointer-events:none;
}
.pin:focus-within .ancla,.pin.abierto .ancla{scale:1.3}
/* halo que late, para que se note que se puede tocar */
.ancla::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--tono);opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .ancla::after{animation:halo 2.8s ease-out infinite}
  .pin.qr .ancla::after{animation-delay:.9s}
  .pin.base .ancla::after{animation-delay:1.8s}
}
@keyframes halo{
  0%{opacity:.65;scale:.7}
  70%,100%{opacity:0;scale:1.8}
}

/* --- la explicación --- */
.tip{
  position:absolute;width:max-content;max-width:min(30vw,225px);
  background:var(--blanco);color:var(--tinta-60);
  border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:0 18px 40px -22px rgba(16,22,29,.65);
  padding:12px 14px;text-align:left;
  font-size:.78rem;line-height:1.45;
  opacity:0;scale:.96;pointer-events:none;
  transform-origin:top center;
  transition:opacity .22s ease, scale .22s cubic-bezier(.2,.7,.3,1);
}
.tip b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta);margin-bottom:4px;
}
/* colgado del punto: el globo sale del mismo lado que la línea */
.tip{top:calc(var(--y) + var(--fin-y) + 16px)}
.pin.nfc .tip,
.pin.base .tip{right:calc(100% - var(--x) - var(--fin-x) - 14px)}
.pin.qr .tip  {left:calc(var(--x) + var(--fin-x) - 14px)}
.pin.base .tip{
  top:auto;bottom:calc(100% - var(--y) - var(--fin-y) + 16px);
  transform-origin:bottom center;
}

/* sólo con mouse de verdad: en pantallas táctiles el :hover se queda
   pegado después de tocar y dejaba dos globos abiertos a la vez */
@media (hover:hover) and (pointer:fine){
  .pin:hover .ancla{scale:1.3}
  .pin:hover .tip{opacity:1;scale:1}
}
.pin:focus-within .tip,.pin.abierto .tip{opacity:1;scale:1}

/* --- celular: las líneas SÍ se muestran, con el punto y la etiqueta
       corta afuera del producto (el producto se achica un poco para
       dejar lugar a los costados). Al tocar el punto, la explicación
       completa se abre centrada arriba del producto, siempre en el
       mismo lugar, para que nunca se encimen entre sí. --- */
@media (max-width:900px){
  /* líneas más largas: empujan el punto hacia el margen lateral */
  .pin{--diag:20px}
  .pin.nfc {--recta:clamp(60px,20vw,96px)}
  .pin.base{--recta:clamp(48px,15vw,80px)}
  .pin.qr  {--recta:clamp(52px,17vw,86px)}
  .corto{display:block}
  .ancla{width:14px;height:14px}
  /* La explicación siempre centrada arriba, uno a la vez. Hay que
     nombrar los tres pines (.pin.nfc/.qr/.base) para igualar la
     especificidad de las reglas de escritorio; si no, el globo del QR
     conserva su posición lateral y se va de la pantalla. */
  .pin.nfc .tip,
  .pin.qr  .tip,
  .pin.base .tip{
    left:50%;right:auto;top:2%;bottom:auto;
    translate:-50% 0;
    width:min(92vw,300px);max-width:none;
    transform-origin:center;
  }
}

.sr-solo{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* sombra de apoyo: se achica cuando la pieza sube, como si flotara */
.producto-caja::after{
  content:"";position:absolute;z-index:-1;
  left:50%;bottom:-3%;translate:-50% 0;
  width:66%;aspect-ratio:6/1;
  background:radial-gradient(closest-side, rgba(16,22,29,.20), transparent 78%);
}
@media (max-width:760px){
  /* más chico que antes: deja gutters a los lados para las líneas */
  .producto-caja{width:min(54vw, 218px, 33svh)}
}

/* Titular en la tipografía del logo: Archivo Bold, con el mismo
   interletrado que declara Tapit-ar-logo.svg (-3 sobre 90px = -.033em). */
.titular{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.6rem,9vw,7rem);
  letter-spacing:-.033em;line-height:1;
  color:var(--tinta);
  /* separado del producto: antes se solapaban a propósito, ahora
     el título respira debajo de la pieza */
  margin:clamp(18px,3.4vw,48px) 0 0;position:relative;z-index:3;
}
.titular .punto-ar{color:var(--azul)}

.bajada{
  margin-top:clamp(16px,2.2vw,26px);
  color:var(--tinta-60);
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.55;
  max-width:44ch;text-wrap:balance;
}

.papel-datos{
  margin-top:clamp(24px,3.4vw,44px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  font-size:.82rem;color:var(--tinta-60);
}
.papel-datos span{display:flex;align-items:center;gap:8px}
.papel-datos span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ambar)}

/* --- pista de scroll: avisa que abajo sigue la página --- */
.baja-cue{
  position:absolute;left:50%;bottom:clamp(16px,2.6vh,28px);translate:-50% 0;
  z-index:2;display:grid;justify-items:center;gap:6px;
  text-decoration:none;color:var(--tinta-40);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  transition:color .25s ease;
}
.baja-cue:hover{color:var(--tinta)}
.baja-cue svg{width:16px;height:16px}

/* --- movimiento (se anula con prefers-reduced-motion) --- */
@media (prefers-reduced-motion:no-preference){
  /* la flotación va en <picture>, y la entrada en el contenedor:
     así no compiten por la misma propiedad translate */
  .pieza{animation:flotar 7s ease-in-out infinite}
  .producto-caja::after{animation:respirar 7s ease-in-out infinite}
  .punto.p1{animation:flotar 5.4s ease-in-out infinite}
  .punto.p2{animation:flotar 6.6s ease-in-out .6s infinite}
  .punto.p3{animation:flotar 6s ease-in-out 1.1s infinite}
  .punto.p4{animation:flotar 5.8s ease-in-out .3s infinite}
  .punto.p5{animation:flotar 6.9s ease-in-out .9s infinite}
  .punto.p6{animation:flotar 6.2s ease-in-out 1.4s infinite}
  .onda.o1{animation:derivar 24s ease-in-out infinite}

  /* entrada escalonada al cargar */
  .papel-fondo{animation:aparecer 1.2s ease .05s both}
  .titular{animation:entrar .8s cubic-bezier(.2,.75,.3,1) .30s both}
  .bajada{animation:entrar .8s cubic-bezier(.2,.75,.3,1) .45s both}
  .pastilla{animation:entrar .8s cubic-bezier(.2,.75,.3,1) .55s both}
  .papel-datos{animation:entrar .8s cubic-bezier(.2,.75,.3,1) .65s both}
  /* El cartel de Google entra ÚLTIMO, con un pop suave */
  .producto-caja{animation:surgir 1.05s cubic-bezier(.2,.85,.3,1) .95s both}
  .baja-cue{animation:entrar .8s ease 1.5s both, latir 2.6s ease-in-out 2.2s infinite}

  /* Mientras corre la pantalla de carga, la entrada del hero queda en pausa:
     arranca recién cuando el preloader termina (se saca .cargando del <html>). */
  html.cargando .papel-fondo,
  html.cargando .producto-caja,
  html.cargando .titular,
  html.cargando .bajada,
  html.cargando .pastilla,
  html.cargando .papel-datos,
  html.cargando .baja-cue{animation-play-state:paused}
}
@keyframes flotar{
  0%,100%{translate:0 0}
  50%{translate:0 -13px}
}
@keyframes respirar{
  0%,100%{opacity:1;scale:1}
  50%{opacity:.6;scale:.88 1}
}
@keyframes derivar{
  0%,100%{translate:0 0}
  50%{translate:26px 0}
}
@keyframes entrar{
  from{opacity:0;translate:0 22px}
  to{opacity:1;translate:0 0}
}
@keyframes surgir{
  from{opacity:0;translate:0 36px;scale:.93}
  to{opacity:1;translate:0 0;scale:1}
}
@keyframes aparecer{
  from{opacity:0}
  to{opacity:1}
}
@keyframes latir{
  0%,100%{translate:-50% 0}
  50%{translate:-50% 5px}
}
/* --- nav: sin fondo mientras el hero ocupa la pantalla --- */
.nav{transition:background .3s ease, border-color .3s ease}
body.en-papel .nav{background:transparent;border-bottom-color:transparent}

/* ============================ SECCIONES ============================ */
.band{padding:clamp(64px,9vw,124px) 0;border-top:1px solid var(--linea)}
/* la primera sección va pegada al hero: sin línea divisoria arriba */
main > .band:first-of-type{border-top:0}
.band-head{display:grid;gap:16px;max-width:60rem;margin-bottom:clamp(34px,4.5vw,58px)}

/* ---------- RUTA: los 3 pasos como recorrido, no como cards ----------
   Una línea horizontal cruza los nodos; sobre ella se dibuja un tramo
   de color que "avanza" cuando la sección entra en pantalla (la clase
   .andando la agrega el observer del script). Los números grandes en
   ámbar dan el ritmo de la secuencia. */
.ruta{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);
  position:relative;
  --nodo:68px;              /* diámetro del círculo */
}
/* riel base + progreso, a la altura del CENTRO de los nodos (mitad
   del diámetro). El nodo es el primer hijo, así que su centro cae a
   --nodo/2 desde el borde superior de la lista. */
.ruta::before,.ruta::after{
  content:"";position:absolute;top:calc(var(--nodo) / 2);height:2px;
  left:8%;right:8%;translate:0 -50%;border-radius:2px;
}
.ruta::before{background:var(--linea)}
.ruta::after{
  background:linear-gradient(90deg,var(--azul),var(--verde));
  right:auto;width:0;
  transition:width 1.3s cubic-bezier(.65,0,.35,1);
}
.ruta.andando::after{width:84%}

.paso{
  position:relative;display:grid;justify-items:center;text-align:center;
  gap:14px;
}
.paso-nodo{
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--blanco);color:var(--azul);
  border:2px solid var(--linea);
  box-shadow:0 8px 22px -12px rgba(16,22,29,.35);
  position:relative;z-index:1;
  transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.paso-nodo svg{width:28px;height:28px}
/* al avanzar el progreso, cada nodo se "enciende" en cadena */
.ruta.andando .paso-nodo{border-color:var(--azul)}
.ruta.andando .paso:nth-child(2) .paso-nodo{transition-delay:.35s}
.ruta.andando .paso:nth-child(3) .paso-nodo{transition-delay:.7s;border-color:var(--verde);color:var(--verde)}
.paso:hover .paso-nodo{transform:translateY(-3px)}

.paso h3{font-size:1.12rem}
.paso p{color:var(--tinta-60);font-size:.95rem;max-width:34ch}

/* en móvil el recorrido pasa a vertical: el riel corre por el costado
   izquierdo de los nodos y el texto va a la derecha */
@media (max-width:760px){
  .ruta{grid-template-columns:1fr;gap:0}
  .ruta::before{
    left:34px;right:auto;top:34px;bottom:34px;height:auto;width:2px;translate:-50% 0;
  }
  .ruta::after{
    left:34px;right:auto;top:34px;bottom:auto;width:2px;height:0;translate:-50% 0;
    background:linear-gradient(180deg,var(--azul),var(--verde));
  }
  /* en vertical el progreso crece en ALTO; hay que anular el width:84%
     de la versión de escritorio, si no la línea se vuelve un bloque */
  .ruta.andando::after{width:2px;height:calc(100% - 68px)}
  .paso{
    grid-template-columns:68px 1fr;justify-items:start;text-align:left;
    column-gap:20px;row-gap:5px;align-items:start;
    padding-bottom:clamp(26px,6vw,40px);
  }
  .paso-nodo{grid-column:1;grid-row:1 / span 2;align-self:start}
  .paso h3{grid-column:2;align-self:center}
  .paso p{grid-column:2;max-width:none}
  .paso:last-child{padding-bottom:0}
}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.stack{display:grid;gap:22px}

.parts{display:grid;gap:0;border-top:1px solid var(--linea)}
.part{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--linea);align-items:start}
.part .k{
  font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cian);padding-top:3px;min-width:88px;
}
.part p{color:var(--tinta-60);font-size:.94rem;margin-top:4px}

/* --- galería fotos reales --- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
@media (max-width:800px){.gallery{grid-template-columns:1fr}}
figure.shot{
  margin:0;border-radius:var(--r-m);overflow:hidden;background:#fff;
  border:1px solid var(--linea);
}
figure.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center}
figure.shot figcaption{
  display:flex;justify-content:space-between;gap:12px;
  padding:14px 18px;font-size:.82rem;color:var(--tinta-60);border-top:1px solid var(--linea);
}
figure.shot figcaption b{font-weight:600;color:var(--tinta)}

/* --- specs --- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,72px)}
@media (max-width:800px){.specs{grid-template-columns:1fr}}
.spec{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea);font-size:.93rem}
.spec dt{color:var(--tinta-40)}
.spec dd{margin:0;color:var(--tinta);font-weight:450}
.note{font-size:.82rem;color:var(--tinta-40);margin-top:24px;max-width:60ch}

/* ================= Secciones estilo "Ramp" (monocromático + ámbar) ================= */
.r-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-40);margin:0;
}
.r-head{max-width:60rem;margin-bottom:clamp(32px,4.4vw,56px)}
.r-head h2{font-size:clamp(2rem,4.7vw,3.25rem);letter-spacing:-.035em;line-height:1.02;margin:16px 0 0}
.r-lead{color:var(--tinta-60);font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;max-width:52ch;margin:16px 0 0}

/* Métricas / contadores */
.r-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;
  background:var(--blanco);margin-bottom:clamp(40px,5vw,68px);
}
.r-metric{padding:clamp(18px,2.2vw,28px);border-right:1px solid var(--linea)}
.r-metric:last-child{border-right:0}
.r-metric-num{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.9rem,3.4vw,2.7rem);font-variant-numeric:tabular-nums;color:var(--tinta);
}
.r-metric-num .u{color:var(--ambar);margin-left:1px}
.r-metric-lbl{margin-top:12px;font-size:.64rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-40)}
@media(max-width:640px){
  .r-metrics{grid-template-columns:1fr}
  .r-metric{border-right:0;border-bottom:1px solid var(--linea)}
  .r-metric:last-child{border-bottom:0}
}

/* Tarjetas de features estilo bento (Producto) */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:clamp(12px,1.3vw,16px);list-style:none;margin:0;padding:0}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}
.feat{
  position:relative;display:block;overflow:hidden;
  background:#e7e2dd;border-radius:var(--r-l);
  min-height:clamp(470px,37vw,560px);
  transition:transform .28s ease, box-shadow .28s ease;
}
.feat:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(16,22,29,.4)}
/* Capa de abajo: la foto ocupa TODA la card */
.feat-photo{position:absolute;inset:0;z-index:0}
.feat-photo img{width:100%;height:100%;object-fit:cover;display:block}
.feat:nth-child(1) .feat-photo img{object-position:center center}
.feat:nth-child(2) .feat-photo img{object-position:center top}
.feat:nth-child(3) .feat-photo img{object-position:center top}
/* Veladura clara arriba para que el texto se lea sobre la foto (blanco cálido, no gris) */
.feat::before{content:"";position:absolute;left:0;right:0;top:0;height:58%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,246,244,.95) 0%,rgba(247,246,244,.78) 38%,rgba(247,246,244,0) 100%);}
/* Capa de arriba: el texto — ancho amplio para que ocupe pocas líneas y no tape la foto */
.feat h3{
  position:relative;z-index:2;
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,1.7vw,1.62rem);
  letter-spacing:-.02em;line-height:1.14;max-width:none;margin:0;
  padding:clamp(26px,2.6vw,32px) 64px 0 clamp(26px,2.6vw,32px);
}
.feat h3 .dim{color:var(--tinta)}
.feat-arrow{
  position:absolute;top:clamp(22px,2.4vw,28px);right:clamp(22px,2.4vw,28px);
  width:46px;height:46px;display:grid;place-items:center;border-radius:13px;
  background:var(--blanco);color:var(--tinta);z-index:3;
  box-shadow:0 8px 22px -12px rgba(16,22,29,.4);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.feat:hover .feat-arrow{background:var(--tinta);color:var(--blanco);transform:translateY(-2px)}
.feat-arrow svg{width:19px;height:19px}

/* Galería (Fotos) */
.r-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
@media(max-width:820px){.r-gallery{grid-template-columns:1fr}}
.r-shot{position:relative;margin:0;border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;background:var(--blanco)}
.r-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .5s ease}
.r-shot:hover img{transform:scale(1.04)}
.r-shot figcaption{
  position:absolute;left:12px;bottom:12px;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);
  background:color-mix(in srgb,var(--blanco) 82%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:6px 11px;border-radius:999px;border:1px solid var(--linea);
}

/* Especificaciones */
.r-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,72px)}
@media(max-width:820px){.r-specs{grid-template-columns:1fr}}
.r-spec{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea)}
.r-spec dt{font-size:.63rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-40);align-self:center}
.r-spec dd{margin:0;color:var(--tinta);font-size:.95rem;line-height:1.4;font-variant-numeric:tabular-nums}
.r-note{font-size:.8rem;color:var(--tinta-40);margin-top:26px;max-width:60ch}

/* Un cartel para cada red (variantes) */
.redes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
@media(max-width:900px){.redes-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.redes-grid{grid-template-columns:1fr}}
.red-card{margin:0;display:flex;flex-direction:column}
.red-shot{border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;background:var(--blanco)}
.red-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .5s ease}
.red-card:hover .red-shot img{transform:scale(1.045)}
.red-card figcaption{margin-top:14px;display:flex;flex-direction:column;gap:3px}
.red-name{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--tinta)}
.red-desc{font-size:.85rem;color:var(--tinta-60)}

/* ===== Aparición al hacer scroll (reveal + stagger) ===== */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.75,.3,1),transform .7s cubic-bezier(.2,.75,.3,1);
  transition-delay:calc(var(--i,0) * 90ms);will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.stagger>:nth-child(2){--i:1}
.stagger>:nth-child(3){--i:2}
.stagger>:nth-child(4){--i:3}
.stagger>:nth-child(5){--i:4}
.stagger>:nth-child(6){--i:5}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- contacto --- */
.contact{
  border-radius:var(--r-l);padding:clamp(30px,5.2vw,68px);
  background:
    radial-gradient(80% 120% at 8% 0%, rgba(127,227,239,.20), transparent 60%),
    linear-gradient(160deg,#141C25,#10161D 60%);
  color:#EAF2F7;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,60px);align-items:start;
}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact h2{color:#fff}
.contact .lead{color:rgba(234,242,247,.68)}
.contact .eyebrow{color:var(--aqua)}
.contact-list{display:grid;gap:2px;margin-top:6px}
.contact-list a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 2px;text-decoration:none;border-bottom:1px solid rgba(234,242,247,.14);
  transition:padding-left .25s ease,color .25s ease;
}
.contact-list a:hover{padding-left:8px;color:var(--aqua)}
.contact-list .lbl{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(234,242,247,.45);display:block;margin-bottom:3px}
.contact-list .val{font-family:var(--display);font-size:1.05rem}
.contact-list .arw{color:var(--aqua);flex:none}

form.ask{display:grid;gap:12px;background:rgba(255,255,255,.045);border:1px solid rgba(234,242,247,.13);border-radius:var(--r-m);padding:clamp(20px,2.6vw,28px)}
form.ask label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,242,247,.55)}
form.ask input,form.ask textarea{
  width:100%;font:inherit;font-size:.95rem;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(234,242,247,.18);
  border-radius:var(--r-s);padding:12px 14px;margin-top:6px;
}
form.ask input::placeholder,form.ask textarea::placeholder{color:rgba(234,242,247,.32)}
form.ask input:focus-visible,form.ask textarea:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
form.ask textarea{resize:vertical;min-height:96px}
form.ask button{
  font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
  background:linear-gradient(100deg,var(--aqua),#B7F1F7);color:var(--grafito);
  border:0;border-radius:100px;padding:13px 22px;margin-top:4px;
  transition:transform .2s ease,filter .2s ease;
}
form.ask button:hover{transform:translateY(-1px);filter:brightness(1.05)}
form.ask small{color:rgba(234,242,247,.42);font-size:.76rem}

footer{padding:34px 0 46px;border-top:1px solid var(--linea);margin-top:clamp(64px,9vw,110px)}
.foot{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--tinta-40)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ================= Splash FLIP (intro) ================= */
#carga{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--papel); pointer-events:none;
}
#carga.fin{ display:none; }
.flip-logo{ line-height:0; margin:0; }
.flip-logo img{ width:min(82vw,1150px); max-width:none; height:auto; display:block; }
/* Fase 1: el logo arranca abajo (fuera de vista) y sube deslizándose */
#logoHero{ transform-origin:top left; transform:translateY(42vh); }
/* En celular: el logo del splash grande y pegado abajo-izquierda (tipo Flim) */
@media (max-width:640px){
  #carga{ align-items:flex-end; justify-content:flex-start; padding-left:14px; padding-bottom:clamp(20px,4vh,40px); }
  /* ►►► TAMAÑO del logo en CELULAR: subí/bajá este número (vw). Más = más grande.
         Máx útil ~93vw (más que eso se corta contra el borde) ◄◄◄ */
  .flip-logo img{ width:92vw; }
}
@media (prefers-reduced-motion:reduce){ .flip-logo img{ width:min(58vw,680px); } #logoHero{ transform:none; } }

/* El logo del header es el destino del FLIP (aparece cuando aterriza) */
.flip-target{ visibility:hidden; }
/* Los links del nav entran después del FLIP */
.nav-links,.nav-cta{ transition:opacity .5s var(--ease,cubic-bezier(.16,1,.3,1)), transform .5s var(--ease,cubic-bezier(.16,1,.3,1)); }
html.cargando .nav-links,html.cargando .nav-cta{ opacity:0; transform:translateY(-6px); }
.nav-links a{ text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:600; display:inline-flex; align-items:center; }
.nav-flecha{ color:var(--ambar); margin-right:6px; }

/* ================= Hero editorial (2 columnas) ================= */
.hero-ed{ position:relative; padding:clamp(26px,3.4vw,48px) 0 clamp(44px,6vw,84px); }
/* Logo grande arriba del hero (solo celular, estilo Flim) */
.hero-logo-mob{ display:none; }
@media (max-width:760px){
  .hero-logo-mob{ display:block; position:relative; z-index:1;
    width:80vw; max-width:none; height:auto;
    margin:4px 0 clamp(16px,4vw,24px) var(--pad); }
  /* En celular: a la derecha del tagline va la notita + el botón, centrados.
     Prefijo .hero-left para ganarle a las reglas base (que están más abajo). */
  .hero-left{ display:flex; flex-direction:row; align-items:stretch; justify-content:space-between; gap:16px; }
  .hero-left .hero-tagline{ flex:1 1 auto; min-width:0; }
  .hero-left .hero-accion{ flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:16px; text-align:right; }
  .hero-left .hero-nota{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; max-width:15ch;
    font-size:.82rem; line-height:1.3; color:var(--tinta-60); }
  .hero-left .hero-stars{ color:var(--ambar); letter-spacing:2px; font-size:1rem; line-height:1; }
  .hero-left .hero-cta{ margin-top:0; flex:0 0 auto; }
}
.hero-row{ position:relative; z-index:1; display:flex; align-items:center; gap:clamp(26px,4vw,58px); }
.hero-left{ flex:0 0 40%; max-width:460px; }
.hero-right{ flex:1 1 auto; min-width:0; }
.hero-tagline{ max-width:22ch; }
/* ►►► TAMAÑO del mensaje "Tu cartel de reseñas..." (desktop = el 2.6rem final) ◄◄◄ */
.hero-tagline p{ font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.12;
  font-size:clamp(1.6rem,3.4vw,2.6rem); }
.swap{ display:inline-block; background:#FFE140; color:var(--tinta); padding:0 .28em; border-radius:8px; transition:opacity .25s ease; }
.swap.fade{ opacity:0; }
.hero-nota{ display:none; }   /* notita: solo en celular (rellena el vacío del hero) */
/* ►►► TAMAÑO del botón "Quiero el mío": font-size (texto) y padding (relleno) ◄◄◄ */
.hero-cta{ margin-top:26px; display:inline-flex; align-items:center; gap:9px;
  background:var(--tinta); color:#fff; border-radius:12px; padding:13px 22px;
  text-decoration:none; font-weight:600; font-size:.92rem; letter-spacing:.02em;
  box-shadow:0 6px 16px -8px rgba(16,22,29,.5);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease; }
.hero-cta:hover{ transform:translateY(-3px); background:#000; box-shadow:0 18px 32px -12px rgba(16,22,29,.6); }
.hero-cta:active{ transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(16,22,29,.6); }
.hero-cta-arrow{ color:var(--ambar); font-size:1.05em; line-height:1; transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.hero-cta:hover .hero-cta-arrow{ transform:translateX(5px); }

/* Grid de fotos (columna derecha del hero) */
.hero-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.1vw,16px); }
.hcard{ margin:0; aspect-ratio:3/4; }
/* El "cuadrado" (borde + fondo + sombra + foto): es lo que se anima entero */
.hcard-in{ width:100%; height:100%; border-radius:12px; overflow:hidden;
  border:1px solid var(--linea); background:var(--blanco); box-shadow:0 18px 42px -30px rgba(16,22,29,.45);
  transition:opacity .3s ease, transform .42s cubic-bezier(.2,.8,.3,1); }
.hcard-in img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hcard:hover .hcard-in img{ transform:scale(1.05); }
/* Al cambiar de foto: se despega (despawn) y vuelve (respawn) TODO el cuadrado */
.hcard.reponiendo .hcard-in{ opacity:0; transform:scale(.88); }
.hcard:nth-child(2){ margin-top:32px; }
.hcard:nth-child(3){ margin-top:-18px; }
.hcard:nth-child(5){ margin-top:32px; }
.hcard:nth-child(6){ margin-top:-18px; }
@media (max-width:900px){
  .hero-row{ flex-direction:column; align-items:stretch; gap:32px; }
  .hero-left{ flex:none; max-width:none; }
}
@media (max-width:560px){
  .hero-grid{ grid-template-columns:repeat(2,1fr); }
  .hcard:nth-child(n){ margin-top:0; }
  .hcard:nth-child(n+5){ display:none; } /* en celular: solo 4 fotos (2×2) */
}

/* Sección del visor 360° reubicado */
.mirar-caja{ display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vw,38px); }

/* ===== Tienda (productos en la landing, abajo del hero) ===== */
.tienda-eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin:0}
.tienda-h2{font-size:clamp(1.9rem,4.4vw,3rem);margin:.28em 0 .12em}
.tienda-sub{color:var(--tinta-60);max-width:52ch;margin:0 0 clamp(22px,3vw,34px);font-size:clamp(1rem,1.3vw,1.12rem)}
.tienda-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:900px){.tienda-grid{grid-template-columns:repeat(2,1fr)}}
.tienda-card{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta);background:var(--blanco);border:1px solid var(--linea);border-radius:16px;overflow:hidden;box-shadow:0 18px 42px -32px rgba(16,22,29,.5);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease}
.tienda-card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(16,22,29,.55)}
.tienda-fig{position:relative;aspect-ratio:4/5;background:#fff;overflow:hidden}
.tienda-fig img{width:100%;height:100%;object-fit:contain;padding:12%;box-sizing:border-box;transition:transform .5s ease;display:block}
.tienda-card:hover .tienda-fig img{transform:scale(1.05)}
.tienda-badge{position:absolute;left:12px;top:12px;background:var(--rojo);color:#fff;font-family:var(--sans);font-weight:700;font-size:.72rem;padding:5px 10px;border-radius:100px}
.tienda-body{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px;border-top:1px solid var(--linea)}
.tienda-nombre{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.02em}
.tienda-precios{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.tienda-antes{color:var(--tinta-40);text-decoration:line-through;font-size:.85rem}
.tienda-precio{font-family:var(--display);font-weight:700;font-size:1.15rem}
.tienda-desde{color:var(--verde);font-size:.75rem;margin-top:1px}
.tienda-btn{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;background:#FFE140;color:var(--tinta);font-weight:700;font-size:.85rem;padding:10px 16px;border-radius:100px;box-shadow:0 6px 16px rgba(255,225,64,.5);transition:transform .2s ease}
.tienda-card:hover .tienda-btn{transform:translateY(-1px)}
.tienda-skeleton{aspect-ratio:3/4;border-radius:16px;background:linear-gradient(100deg,#ececec,#f7f7f7,#ececec);background-size:200% 100%;animation:tsk 1.2s linear infinite}
@keyframes tsk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- Video "en acción" (#video): tarjeta oscura + video vertical ---- */
.video-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(16px,3vw,44px);
  margin-top:clamp(18px,4vw,32px);
}
.video-copy{
  background:var(--tinta,#10161D);
  color:#fff;
  border-radius:28px;
  padding:clamp(30px,4vw,56px);
}
.video-copy h2{
  color:#fff;
  font-size:clamp(1.7rem,3.2vw,2.8rem);
  line-height:1.06;
  letter-spacing:-.03em;
  margin:0 0 .7rem;
}
.video-copy p{
  color:rgba(255,255,255,.76);
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.55;
  margin:0 0 1.7rem;
  max-width:40ch;
}
.video-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#FFE140; color:var(--tinta,#10161D);
  font-weight:700; font-size:.95rem; text-decoration:none;
  padding:.9rem 1.6rem; border-radius:100px;
  box-shadow:0 8px 22px -6px rgba(255,225,64,.7);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.video-cta:hover{ transform:translateY(-2px); background:#FFD41F; box-shadow:0 12px 28px -6px rgba(255,225,64,.85); }
.video-cta span{ transition:transform .2s ease; }
.video-cta:hover span{ transform:translateX(4px); }

.video-caja{ width:100%; max-width:300px; margin:0; justify-self:center; }
.video-caja video{
  width:100%;
  aspect-ratio:9 / 16;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:22px;
  background:#000;
  border:1px solid var(--neblina,#EAE7E3);
  box-shadow:0 24px 60px -34px rgba(16,22,29,.5);
}

@media (max-width:760px){
  .video-hero{ grid-template-columns:1fr; gap:20px; }
  .video-copy{ display:none; }   /* en celular no mostramos la card, molesta */
}