*{box-sizing:border-box;margin:0;padding:0}

/* ══════════════ PALETA · muestreada de la ilustración ══════════════
   Los diez colores salen literal de los píxeles de la imagen de referencia.
   Nada de lima Linktree: el verde acá es pasto (#83CE57), no neón.        */
:root{
  --crema:#F4EFE0;      /* fondo de la ilustración  · 49% */
  --verde:#83CE57;      /* la loma                  · 14% */
  --coral:#FF6553;      /* el sweater rojo          ·  8% */
  --amarillo:#F4DE12;   /* la falda                 ·  6% */
  --azul:#2696FF;       /* las mangas               ·  5% */
  --lila:#E8B9FF;       /* la polera lila           ·  4% */
  --arena:#DCD6C7;      /* el pantalón beige        ·  3% */
  --tinta:#272925;      /* la línea negra           ·  3% */
  --durazno:#FFB695;    /* la piel                  ·  2% */
  --tierra:#B74C1F;     /* las manos y el pelo      ·  1% */
  /* El papel de las dos secciones sin color. Único valor de todo el archivo
     que no sale de la ilustración: es neutro frío (R-B=+2) donde el resto
     de la paleta es warm (crema y arena están en +20).

     Contra crema da 1.03:1 —misma luminancia, distinta temperatura— y eso
     normalmente se lee como un error. Acá no, y el motivo es el orden: el
     lema coral separa el hero (crema) de Cómo funciona (papel), y la banda
     verde separa Estilos (papel) de Preguntas (crema). Los dos papeles
     nunca se tocan, así que el ojo nunca los compara. Si algún día se
     reordenan las secciones y quedan pegados, esto se rompe. */
  --papel:#F3F3F1;
  /* El verde de "Conoce". Mismo matiz que tu verde #83CE57 —97° contra
     98°— pero llevado a 96% de luz: es el verde vuelto papel. */
  --verde-papel:#F2FFEA;
  /* El papel del FAQ. A dE 0.8 de crema, o sea es prácticamente el mismo
     — pero crema ya no es fondo de ninguna sección, así que no choca con
     nada. Contra Crea (papel) da dE 6.7, y esas dos están en la 2 y la 6:
     no se tocan. */
  --faq-papel:#F2EDDF;
  /* El fondo de "Crea": tu lila #E8B9FF llevado al 15% de luz, mismo
     matiz. Oscuro pero con temperatura — la sección tiene color propio
     en vez de ser un agujero. Lo medí: sobre este fondo las ocho muestras
     dan dE 92 contra él; sobre el arena que tenía, 55. El oscuro no tiene
     matiz que competirles; el beige sí, y les robaba. */
  --lila-noche:#2E0F3D;
  /* El hero y la franja del nav, en un solo lugar. Ahora amarillo: sat
     91%, tal cual sale de la ilustración, sin desaturar. El titular es
     tu #0E61AD — 4.59 sobre él, pasa.

     El corte con Crea (arena) da 1.06 de luminancia y eso asusta, pero
     miente: entre cromáticos el corte lo hace el croma, y el dE es 78.
     Se separan de sobra. */
  --hero-bg:var(--amarillo);
  /* Los dos oscuros de los titulares. No son colores nuevos: son el azul y
     el tierra de la ilustración bajados de luz hasta pasar 5:1 contra su
     fondo más profundo (coral y azul). Sobre los fondos claros sobra
     contraste, y sobrar no es problema. */
  --ease:cubic-bezier(.22,1,.36,1);
  --resorte:cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════ EL SISTEMA: DOS COLORES POR SECCIÓN ══════════════
   Cada sección declara --bg (el bloque) y --pop (el acento). Nada más.
   Todo lo de adentro — títulos, botones, tarjetas, blobs — se sirve de
   esas dos variables. La tinta no cuenta como color: es la línea negra
   que en la ilustración envuelve absolutamente todo.

     1 HERO       amarillo    + coral        FUERTE
     2 CREA       papel       + lila            calma
     3 COMPARTE   azul        + amarillo    FUERTE
     4 CONOCE     verde-papel + verde           calma
     5 VITRINAS   coral       + lila        FUERTE
     6 PREGUNTAS  faq-papel   + verde           calma
     7 FOOTER     tinta       + amarillo    EL PUNTO FINAL

   UNA sola regla para las siete: fuerte, calma, fuerte, calma. Cada bloque
   de color descansa en uno de papel — es lo que hace legible a una revista.

   Antes no estaban al azar: estaban AMONTONADOS, que es peor. Las tres
   primeras eran fuertes y las tres siguientes apagadas. La página gritaba
   tres pantallas y susurraba tres. Pasaba porque cada fondo se decidió
   solo, respondiendo a algo distinto, y mi regla solo miraba que cada
   vecino cortara con el anterior. Eso atrapa errores pero no compone.

   Y resuelve sola la tensión de fondo: las secciones con color ADENTRO
   —Crea (las muestras) y Vitrinas (las plantillas)— ya no quedan pegadas.

   EL MARCO: amarillo abre y cierra. En el hero es el fondo con letra
   oscura; en el footer es la letra sobre fondo oscuro. Mismo par, dado
   vuelta, en los dos extremos. Y amarillo sobre tinta da 10.70 — el par
   de más contraste de toda la paleta, justo donde hace falta.
   ══════════════════════════════════════════════════════════════════ */
.s-hero   {--bg:var(--hero-bg); --pop:var(--coral);  --fg:var(--tinta); --dark:#0E61AD}
.s-comparte{--bg:var(--azul);   --pop:var(--amarillo);--fg:var(--tinta); --dark:#FFFFFF}
.s-estilos{--bg:var(--papel);   --pop:var(--lila);    --fg:var(--tinta); --dark:#2E0F3D}
.s-ana    {--bg:var(--verde-papel);--pop:var(--verde); --fg:var(--tinta); --dark:#2A6408}
.s-faq    {--bg:var(--faq-papel);--pop:var(--verde);  --fg:var(--tinta); --dark:#312B1E}
.s-vit    {--bg:var(--coral);   --pop:var(--lila);    --fg:var(--tinta); --dark:#2E0F3D}
.s-foot   {--bg:var(--tinta);   --pop:var(--amarillo);--fg:var(--crema)}

html{scroll-behavior:smooth}
/* overflow-x:clip en vez de hidden — hidden convierte al body en contenedor
   de scroll y mata el position:sticky del nav y del índice lateral.
   clip recorta igual pero no crea contenedor. La línea 'hidden' queda de
   respaldo para navegadores sin soporte de clip.

   El fondo del body NO es decorativo: el nav vive fuera del hero y se lleva
   14px de margen más su propia altura (~63px), así que arriba de todo queda
   una franja de ~77px donde no hay ninguna sección — se ve el body y nada
   más. Con el hero en crema y el body en crema eso era invisible; con el
   hero verde apareció la franja beige. El body toma el color del hero. */
body{font-family:'Montserrat',sans-serif;color:var(--tinta);background:var(--hero-bg);
  overflow-x:hidden;overflow-x:clip}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
.big{font-weight:900;letter-spacing:-.035em;line-height:1.02;color:var(--dark,var(--tinta))}
.display{font-weight:900;letter-spacing:-.04em;line-height:.98;color:var(--dark,var(--tinta))}
/* Titular relleno de color + contorno de tinta: así resuelve la ilustración
   los colores que solos no contrastarían (coral sobre crema = 2.5:1). */
/* El contorno de letra se fue. Estaba ahí para rescatar contraste —coral
   sobre crema da 2.52:1— pero ensuciaba cada titular. El reemplazo es el
   marcador: la palabra clave se apoya en una mancha del --pop y la letra
   vuelve a ser tinta plana (5:1 y más). El resto de los titulares van en
   tinta a secas: el color ya lo pone el bloque entero de la sección. */
/* Los marcadores del hero y del lema llevan color propio, distinto del
   resto de su titular: "en un link" en blanco y "Tuya de verdad" en coral. */
.mark{color:var(--mark-c,inherit);
  background:linear-gradient(var(--pop),var(--pop)) no-repeat left center/0% 86%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 8px;margin:0 -8px;
  transition:background-size .75s var(--ease) .4s}
.mark.on,h1.mark-host .mark,.in .mark{background-size:100% 86%}

/* ══════════════ ESCALA FLUIDA ══════════════
   Antes la tipografía daba un salto seco en 820px: 74px de titular pasaban
   a 42px de golpe, y entre 820 y 500 el texto quedaba con tamaño de
   escritorio en un ancho de teléfono. Ahora cada titular interpola solo
   entre 375px (el iPhone más chico que importa) y 1180px (el ancho del
   contenido). Los px del clamp son el mínimo real, no una sugerencia. */
/* El máximo bajó de 74 a 62 por una cuenta, no por gusto: la columna del
   texto mide ~560px y "en tu WhatsApp" en Montserrat Black a 74px mide
   642. Se pasaba SIEMPRE a dos líneas. A 62 mide 538 y entra con aire. */
.t-hero {font-size:clamp(36px, 3.23vw + 23.9px, 62px)}
.t-band {font-size:clamp(32px, 2.73vw + 21.8px, 54px)}
.t-foot {font-size:clamp(46px, 5.22vw + 26.4px, 88px)}
.t-faq  {font-size:clamp(28px, 1.49vw + 22.4px, 40px)}

/* ══════════════ MOVIMIENTO ══════════════
   Acá había un error silencioso. El revelado usaba `transform:translateY()`,
   pero las tres tarjetas de los pasos ya tienen `transform:rotate()` para
   abanicarse, y `.step:nth-child(1)` (0,2,0) le gana a `.reveal` (0,1,0):
   la traslación nunca se aplicaba. Las tarjetas solo hacían fundido, sin
   subir. Se veía flojo y no era obvio por qué.

   La solución no es pelear especificidad, es no usar `transform`: hoy
   `translate` y `scale` son propiedades independientes y se componen con
   el `transform` que ya esté puesto. La tarjeta rota y sube a la vez. */
.reveal{opacity:0;translate:0 26px;
  transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;translate:none}
.reveal-s{opacity:0;scale:.92;
  transition:opacity .6s var(--ease),scale .6s var(--ease);transition-delay:var(--d,0ms)}
.reveal-s.in{opacity:1;scale:none}
/* Las tarjetas entran con las dos cosas: suben y crecen. Es más movimiento
   que el del texto a propósito — un objeto llega, una frase se escribe. */
.reveal-c{opacity:0;translate:0 32px;scale:.96;
  transition:opacity .65s var(--ease),translate .65s var(--ease),scale .65s var(--ease);
  transition-delay:var(--d,0ms)}
.reveal-c.in{opacity:1;translate:none;scale:none}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero h1,.hero .sub,.hero .claim-row,.hero .claim-hint{animation:rise .85s var(--ease) both}
.hero .sub{animation-delay:.12s}
.hero .claim-row{animation-delay:.24s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.6deg)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.reveal-s,.reveal-c{opacity:1;translate:none;scale:none}
  html{scroll-behavior:auto}
}

/* ══════════════ FORMAS · el vocabulario de la ilustración ══════════════
   Manchas planas de borde orgánico, sin sombra ni degradado, en el --pop
   de su sección. Puro relleno, como las nubes y la loma del dibujo. */
.blob{position:absolute;background:var(--pop);pointer-events:none;z-index:0}
.blob-a{border-radius:58% 42% 47% 53%/44% 51% 49% 56%}
.blob-b{border-radius:41% 59% 62% 38%/54% 39% 61% 46%}
.dot{position:absolute;border-radius:50%;background:var(--pop);pointer-events:none;z-index:0}

/* ══════════════ NAV · vidrio ══════════════
   El nav tenía blur pero encima un borde de tinta de 2px y sombra dura:
   eso es un sticker, no un vidrio. Y al hacer scroll se iba a crema al 90%,
   o sea dejaba de ser translúcido justo cuando más lo necesita.

   Un vidrio creíble son cuatro capas, no una: el blur que difumina lo de
   atrás, la saturación que revive el color que el blur apaga, un borde de
   luz blanca (el canto del vidrio) y un brillo interno arriba (el reflejo).
   La sombra pasa a ser difusa y separada — un vidrio flota, no se pega. */
/* padding-top respeta la muesca/isla de los iPhone en horizontal */
.nav{position:sticky;top:14px;z-index:50;margin:14px auto 0;max-width:1180px;
  padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left))}
.nav-in{
  position:relative;isolation:isolate;overflow:hidden;border-radius:999px;
  padding:12px 14px 12px 26px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,rgb(255 255 255/.5),rgb(255 255 255/.2));
  backdrop-filter:blur(22px) saturate(190%);-webkit-backdrop-filter:blur(22px) saturate(190%);
  border:1px solid rgb(255 255 255/.55);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.75),
             inset 0 -1px 0 rgb(255 255 255/.18),
             0 10px 34px rgb(39 41 37/.11);
  transition:padding .35s var(--ease),background .35s var(--ease),
             box-shadow .35s var(--ease),backdrop-filter .35s var(--ease);
}
/* El reflejo: una luz que cae desde el vértice superior izquierdo */
.nav-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(115% 80% at 12% -10%,rgb(255 255 255/.6),transparent 55%)}
/* Al hacer scroll se compacta y el vidrio se espesa — pero sigue siendo
   vidrio: el fondo de la sección que pasa por debajo lo tiñe. Ahí está la gracia. */
.nav.stuck .nav-in{padding:9px 12px 9px 22px;
  background:linear-gradient(135deg,rgb(255 255 255/.62),rgb(255 255 255/.34));
  backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.8),
             inset 0 -1px 0 rgb(255 255 255/.2),
             0 12px 40px rgb(39 41 37/.17)}
/* Respaldo: si el sistema pide menos transparencia, o si el navegador no
   soporta backdrop-filter, el vidrio se cae y hay que darle fondo sólido. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-in,.nav.stuck .nav-in{background:rgb(244 239 224/.97)}
}
@media(prefers-reduced-transparency:reduce){
  .nav-in,.nav.stuck .nav-in{background:var(--crema);border-color:rgb(39 41 37/.14);
    backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* ══════════════ LA MARCA ══════════════
   El logo es la palabra, y el punto del dominio es la marca. Ese punto no
   es decorativo: es el que separa "abre" de "tienda" y el que convierte
   el nombre en la URL. Va en el lugar EXACTO donde va el punto de
   abre.tienda — quien conoce el dominio lee la URL; quien no, lee
   "Abretienda" con un punto lindo. Nadie lee algo mal.

   Va en minúsculas porque así se escriben los dominios.

   EL PUNTO ES VERDE, Y NO POR GUSTO: "abre" + punto verde = ABIERTO.
   Todo local del mundo tiene un cartel que dice ABIERTO o CERRADO, y el
   verde es abierto. El punto deja de ser un color y pasa a significar algo.
   Y de paso el "punto verde = en línea" de WhatsApp juega a favor: tu
   producto promete que la tienda está viva en dos minutos.

   El coral se fue por lo contrario: está a dE 18.6 del rojo de error. No
   es el mismo color, pero a 9px con un anillo negro el ojo no mide dE —
   lee "punto rojo chico" y eso significa notificación o falla.

   El costo, medido: sobre el amarillo del hero el verde da dE 50 y el
   coral daba 85. Verde y amarillo son vecinos en el círculo, así que el
   punto salta menos. Vale igual — el argumento del "abierto" pesa más.

   EL ANILLO NO ES OPCIONAL: verde sobre el amarillo del hero da 1.40 de
   luminancia — el punto solo se disolvería. Con el canto de tinta se
   define igual. Es la misma regla de la ilustración: color plano, línea
   negra. Y sobre el negro del footer la línea se invierte a papel.

   Los dos números para tocar están acá: el tamaño del punto y el grosor
   del anillo. A .3em el punto mide ~2.3 veces un punto tipográfico — se
   lee como marca y no como puntuación. */
.marca{--punto:.3em; --anillo:1.5px; --anillo-color:var(--tinta);
  display:inline-flex;align-items:baseline;font-weight:900;font-size:21px;
  letter-spacing:-.045em;color:var(--tinta);text-decoration:none}
.marca .p{flex:none;box-sizing:content-box;
  width:var(--punto);height:var(--punto);border-radius:50%;
  background:var(--verde);border:var(--anillo) solid var(--anillo-color);
  margin:0 .1em;
  transition:transform .4s var(--ease)}
.marca:hover .p{transform:scale(1.35)}
.nav-links{display:flex;gap:26px;font-size:14.5px;font-weight:700}
.nav-links a{color:var(--tinta);text-decoration:none;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--coral);
  transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;gap:10px;align-items:center}
/* Dentro del vidrio los botones también se ablandan: el borde de tinta y la
   sombra dura del resto de la página le devolverían el aspecto de sticker. */
.nav .btn{border-color:rgb(39 41 37/.16);box-shadow:none}
.nav .btn:hover{box-shadow:0 4px 12px rgb(39 41 37/.16)}
.nav .btn:active{transform:scale(.97);box-shadow:none}
.nav .btn-ghost{background:rgb(255 255 255/.4)}
.nav .btn-ghost:hover{background:rgb(255 255 255/.7)}
.nav .btn-ink{border-color:transparent}

/* ══════════════ BOTONES · relleno plano + línea + sombra dura ══════════════ */
.btn{border:2px solid var(--tinta);border-radius:999px;font-family:inherit;font-weight:800;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;position:relative;
  overflow:hidden;color:var(--tinta);box-shadow:0 4px 0 var(--tinta);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--tinta)}
.btn-ghost{background:transparent;padding:9px 18px;font-size:14px}
.btn-ghost:hover{background:rgb(39 41 37/.07)}
.btn-ink{background:var(--tinta);color:var(--crema);padding:9px 20px;font-size:14px;box-shadow:0 4px 0 rgb(39 41 37/.35)}
.btn-ink:hover{box-shadow:0 6px 0 rgb(39 41 37/.35)}
.btn-ink:active{box-shadow:0 0 0 rgb(39 41 37/.35)}
/* El CTA siempre viste el --pop de su sección: la acción cambia de color al bajar */
.btn-pop{background:var(--pop);padding:14px 26px;font-size:16px}
.btn-big{padding:16px 32px;font-size:17px}
.btn-shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgb(255 255 255/.5),transparent);transform:skewX(-20deg)}
.btn-shine:hover::after{animation:shine .85s var(--ease)}
@keyframes shine{to{left:130%}}
/* ══════════════ MENÚ MÓVIL ══════════════
   Bajo 820px v3 hacía .nav-links{display:none} y listo: cuatro secciones
   de la página quedaban sin navegación en el 60% del tráfico. El panel
   es del mismo vidrio que la píldora — misma receta de blur, saturación
   y canto de luz — para que se lea como si la píldora se desplegara. */
.nav-burger{display:none;flex:none;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgb(255 255 255/.4);position:relative;transition:background .25s}
.nav-burger:hover{background:rgb(255 255 255/.7)}
.nav-burger i{position:absolute;left:13px;width:18px;height:2.5px;border-radius:2px;background:var(--tinta);
  transition:transform .34s var(--ease),opacity .2s var(--ease)}
.nav-burger i:nth-child(1){top:15px}
.nav-burger i:nth-child(2){top:21px}
.nav-burger i:nth-child(3){top:27px}
.nav.open .nav-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .nav-burger i:nth-child(2){opacity:0}
.nav.open .nav-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-sheet{
  position:absolute;left:22px;right:22px;top:calc(100% + 8px);z-index:-1;
  border-radius:26px;padding:10px;overflow:hidden;
  background:linear-gradient(135deg,rgb(255 255 255/.62),rgb(255 255 255/.34));
  backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);
  border:1px solid rgb(255 255 255/.55);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.8), 0 14px 44px rgb(39 41 37/.18);
  /* Cerrado no basta con opacity:0 — visibility saca el panel del foco del
     teclado y del lector de pantalla, que si no siguen navegando algo invisible. */
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s}
.nav.open .nav-sheet{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-sheet a:not(.btn){display:block;padding:14px 16px;border-radius:16px;text-decoration:none;
  color:var(--tinta);font-size:16px;font-weight:700;transition:background .2s}
.nav-sheet a:not(.btn):active{background:rgb(255 255 255/.6)}
.nav-sheet .sep{height:1px;background:rgb(39 41 37/.1);margin:8px 12px}
.nav-sheet .btn{width:100%;margin-top:6px;padding:13px 18px;font-size:15px}
@media(min-width:821px){.nav-sheet,.nav-burger{display:none}}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-burger{display:block}
  /* "Iniciar sesión" se va al panel; "Crear gratis" se queda a la vista.
     Esto es una landing: el CTA persistente en el encabezado paga. Hice la
     cuenta a 400px — 18 de relleno + 112 de marca + 112 de botón + 44 de
     hamburguesa + 26 de huecos = 312 sobre 356 disponibles. Entra. */
  .nav-cta .btn-ghost{display:none}
  .nav-cta{gap:8px}
  .nav-cta .btn-ink{padding:9px 16px;font-size:13.5px}
  .nav-in{padding:8px 8px 8px 18px;gap:8px}
  .nav.stuck .nav-in{padding:8px 8px 8px 18px}
}
/* Bajo 400px ya no entra: el botón se va al panel y queda solo la
   hamburguesa. El CTA del hero está a un dedo de distancia igual. */
@media(max-width:400px){
  .nav-cta{display:none}
  .logo{font-size:19px}
}

/* Pastilla de acento: sobre fondo pálido, el coral/verde/azul no dan
   contraste para texto chico (verde sobre crema = 1.67:1). Por eso el
   color nunca es la letra: es la mancha, y la letra va en tinta. */
.pill{display:inline-block;background:var(--pop);border:2px solid var(--tinta);border-radius:999px;
  padding:6px 14px;font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)}

/* ══════════════ HERO · crema + coral ══════════════ */
.hero{padding:52px 0 104px;position:relative;background:var(--bg);overflow:hidden;overflow:clip}
/* Sobre crema, el coral al 16% daba una nube rosa. Sobre amarillo se
   evapora —los dos son claros— así que sube a mancha casi plena. */
.hero .blob-a{width:420px;height:380px;right:-90px;top:60px;opacity:.42}
.hero .blob-b{width:210px;height:190px;left:-80px;bottom:90px;opacity:.32}
.hero .d1{width:14px;height:14px;left:52%;top:44px}
.hero .d2{width:9px;height:9px;left:6%;top:36%;background:var(--tinta)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{color:var(--dark)}
/* ── EL TITULAR QUE ROTA ──
   Las cuatro son destinos y las cuatro son ciertas: link, bio, vitrina,
   WhatsApp. Es "Comparte tu tienda donde quieras" dicho en el hero.

   NO dice "en un click": sería una promesa de esfuerzo, y es falsa —
   armar la tienda toma dos minutos, no un click. "En un link" es un LUGAR,
   y además ES el producto: abre.tienda/camila. Cambiarlo tiraría lo único
   que no se puede copiar.

   El marcador es un fondo que crece de 0% a 100%, así que si el texto
   cambia de largo el bloque lo sigue solo. Por eso el cambio va con el
   marcador apagado: si no, se ve estirarse. */
/* nowrap: si aún así no entrara, prefiero que se desborde y se vea, a que
   se parta en dos y me empuje el gancho hacia abajo sin avisar. */
.rota{display:inline-block;position:relative;white-space:nowrap}
.rota .mark{display:inline-block;
  transition:opacity .34s var(--ease),translate .34s var(--ease),background-size .6s var(--ease)}
.rota.sale .mark{opacity:0;translate:0 -14px}
.hero p.sub{font-size:18px;line-height:1.5;margin:22px 0 30px;max-width:480px;font-weight:600}
.claim-row{display:flex;gap:10px;flex-wrap:wrap;max-width:490px}
.claim{position:relative;flex:1;min-width:250px;display:flex;align-items:center;background:#fff;
  border:2px solid var(--tinta);border-radius:999px;padding:0 10px 0 22px;cursor:text;
  box-shadow:0 4px 0 var(--tinta);transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.claim:focus-within{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}
/* Más alto (14→19px de relleno), más grande (16→18px) y menos gordo
   (800→600 el nombre, 700→500 el dominio). A 18px el peso 800 se veía
   apretado — cuanto más grande la letra, menos peso necesita para pesar. */
.claim-pre{flex:none;padding:19px 0;font-size:18px;font-weight:500;color:#A9A49B;user-select:none;letter-spacing:-.01em}
.claim-input{flex:1;min-width:0;border:0;background:none;outline:none;padding:19px 4px;
  font-family:inherit;font-size:18px;font-weight:600;color:var(--tinta);letter-spacing:-.015em}
.claim-input::placeholder{color:#C9C4BA;font-weight:500}
.claim-hint{margin-top:10px;font-size:13.5px;font-weight:700;min-height:0;opacity:0;
  transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.claim-hint.show{opacity:.8;transform:none;min-height:20px}
/* ══════════ LA GALERÍA · LA TORRE ══════════
   El teléfono se fue. Era un objeto genérico con contenido inventado — el
   mismo que muestran Linktree, biosites y las otras cinco. Ahora suben
   negocios de verdad.

   El truco no es el movimiento: es la PAUSA. 2.4s parado, 1s de viaje. Si
   se invierte, se lee como carrusel y no se lee ninguno. Cada negocio
   necesita su turno.

   Y es una TORRE: llegan inclinadas 26° desde abajo, se enderezan al
   centrarse, y se inclinan otra vez al irse. La que está en turno es la
   única que te mira de frente. */
.gal{position:relative;height:min(72vh,560px);overflow:hidden;perspective:1200px;z-index:2;
  /* Sin la máscara, las fotos aparecen y desaparecen de golpe en el canto
     y se ve el truco. */
  mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  animation:rise 1s var(--ease) .3s both}
.tira{position:absolute;left:0;right:0;transform-style:preserve-3d;
  transition:translate 1s var(--ease)}
.card{position:relative;height:300px;border:2.5px solid var(--tinta);border-radius:24px;
  overflow:hidden;background:var(--tinta);margin-bottom:18px;box-shadow:0 8px 0 var(--tinta);
  transform-origin:50% 50%;
  transition:transform .9s var(--ease),opacity .9s var(--ease)}
.card:not(.on){transform:rotateX(26deg) scale(.86);opacity:.82}
.card.on{transform:rotateX(0) scale(1);opacity:1}
.card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:scale 4s linear,filter .7s var(--ease)}
/* Una sola cosa apaga a la que no está en turno: desaturar. Antes yo
   apilaba tres —degradado al 72%, brightness .72 y opacity .5— y el brillo
   final quedaba en 36% del original. Que la de al lado esté en gris y la
   centrada en color es MÁS diferencia que apagarlas todas: el contraste lo
   hace el color, no la falta de luz. */
.card:not(.on) img{filter:saturate(.28)}
.card.on img{scale:1.07}     /* zoom lentísimo mientras dura la pausa */
/* El degradado arranca al 72% de la altura, no a la mitad: es sombra para
   la letra, no una tapa sobre la foto. */
.capa{position:absolute;inset:0;background:linear-gradient(transparent 72%,rgb(0 0 0/.58))}
.pie{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;z-index:3}
.pie b{display:block;font-size:15px;font-weight:900;letter-spacing:-.02em;
  transition:translate .5s var(--ease) .1s,opacity .5s var(--ease) .1s}
.pie span{display:block;font-size:11px;font-weight:700;opacity:.75;
  transition:translate .5s var(--ease) .18s,opacity .5s var(--ease) .18s}
.card:not(.on) .pie b,.card:not(.on) .pie span{translate:0 12px;opacity:0}
/* La vitrina que asoma: el negocio, en la app, en uno de los 20 estilos.
   Esa es la vida — no un adorno, el producto asomando sobre la foto.

   SE LLAMA g-viti Y NO viti POR ALGO: la sección Vitrinas ya usaba .viti
   para sus tarjetas. Como esta se declara después, le ganaba, y las diez
   tarjetas de la galería quedaban position:absolute apiladas en right:-12px
   — fuera de cuadro. La galería no se veía por un apellido que faltaba. */
.g-viti{position:absolute;z-index:4;right:-12px;top:18px;width:132px;background:var(--a);
  border:2.5px solid var(--tinta);border-radius:14px;overflow:hidden;box-shadow:0 7px 0 var(--tinta);
  opacity:0;translate:22px 14px;scale:.8;
  transition:opacity .5s var(--ease),translate .6s var(--resorte),scale .6s var(--resorte);
  transition-delay:.28s}
.card.on .g-viti{opacity:1;translate:0 0;scale:1}
.g-viti .vf{height:52px;border-bottom:2.5px solid var(--tinta)}
.g-viti .vf img{width:100%;height:100%;object-fit:cover}
.g-viti .vc{padding:7px 8px}
.g-viti .vc b{font-size:9px;font-weight:900;letter-spacing:-.02em;color:var(--t)}
.g-viti .vc u{display:block;margin-top:5px;background:var(--b);color:var(--tb);text-decoration:none;
  border:1.5px solid var(--tinta);border-radius:999px;padding:4px;text-align:center;
  font-size:6.5px;font-weight:900;letter-spacing:.06em}
/* La pastilla del dato entra de última, con resorte.
   SE LLAMA g-dato Y NO pill: la insignia "PREGUNTAS" del FAQ ya usaba
   .pill. Esta se declara después y le ganaba su position:absolute — por
   eso la insignia flotaba encima del párrafo. */
.g-dato{position:absolute;z-index:5;left:-8px;bottom:68px;background:#fff;border:2px solid var(--tinta);
  border-radius:999px;padding:6px 12px;font-size:11px;font-weight:900;box-shadow:0 3px 0 var(--tinta);
  white-space:nowrap;opacity:0;scale:.5;
  transition:opacity .35s var(--ease),scale .45s var(--resorte);transition-delay:.5s}
.card.on .g-dato{opacity:1;scale:1}
.g-dato em{font-style:normal;color:#1B9E4B;margin-left:5px}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:20px}.hero{padding:30px 0 60px}
  .hero .blob-a{width:260px;height:240px;right:-110px;top:20px}
  .gal{height:min(52vh,400px);order:-1}
  .g-viti{width:104px}
  /* El gancho del nombre se apila: a 375px la pastilla pide 250px de mínimo
     y el botón otros 130 — juntos no entran, y el botón terminaba suelto a
     media línea. Apilado, el botón ocupa el ancho y se toca con el pulgar. */
  .claim-row{max-width:none}
  .claim{min-width:0;width:100%}
  .claim-row .btn{width:100%;padding:15px 26px}
}
/* Teléfonos chicos de verdad (iPhone SE, 360px de Android) */
@media(max-width:400px){
  .hero{padding:24px 0 48px}
  .hero p.sub{font-size:16.5px;margin:18px 0 24px}
  .claim-pre{font-size:15px}
}

/* ══════════════ BANDAS ══════════════ */
.band{padding:104px 0;position:relative;background:var(--bg);color:var(--fg);overflow:hidden;overflow:clip}
/* Conoce es la más baja de las bandas: cuatro datos no piden 104px de aire */
.band.s-ana{padding:72px 0}
.band h2{line-height:1.02}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* El párrafo de Comparte era el único sin regla propia: heredaba tinta y
   no tenía margen. Ahora va en blanco y con el mismo aire que las otras.

   19px y peso 700 no es capricho: en blanco sobre el azul da 3.05, y a
   17px/600 eso es texto de cuerpo — el mínimo sería 4.5 y no pasaría. A
   19/700 cuenta como texto grande, el mínimo baja a 3.0 y pasa. Y de paso
   queda igual que .ana-head p (19px), que era el estándar de la página. */
.sec-grid p{font-size:19px;line-height:1.55;font-weight:700;margin:22px 0 0;max-width:38ch;color:#fff}
.statement{max-width:880px;margin:0 auto;text-align:center}
.statement h2{max-width:16ch;margin:0 auto}
.statement p{font-size:20px;line-height:1.55;margin:26px auto 34px;font-weight:600;max-width:60ch}
.ana-head{max-width:760px}
.ana-head p{font-size:19px;line-height:1.55;margin:20px 0 26px;font-weight:600;max-width:58ch}
@media(max-width:820px){.sec-grid{grid-template-columns:1fr;gap:26px}.band{padding:70px 0}}

/* ── 1 · CREA Y PERSONALIZA · lila-noche + lila ──
   La segunda zona oscura de la página, y se la gana: es la única sección
   cuyo contenido ES el color, así que le toca el fondo que más lo deja
   hablar. El footer (tinta) sigue siendo el negro puro y sigue queriendo
   decir "acá se terminó" — este es lila profundo, no negro, y por eso esa
   señal no se diluye. */
.s-estilos .blob-a{width:300px;height:280px;right:-100px;top:40px;opacity:.16}
.s-estilos .d1{width:16px;height:16px;left:12%;top:22%}
.s-estilos .d2{width:10px;height:10px;right:16%;bottom:18%;background:var(--tinta)}
/* El botón: lila con letra lila-noche. La inversión de la línea que hacía
   falta cuando el fondo era oscuro se fue con el fondo — sobre papel, el
   canto de tinta vuelve a verse. */
.s-estilos .btn-pop{color:var(--lila-noche)}

/* ── EL MUESTRARIO ──
   Ya no son siete chips fijos: son siete vitrinas que CAMBIAN de estilo
   solas. Hay 20 pares reales de la paleta y cada muestra va sacando de
   ahí, así que se ven los veinte sin carrusel. Eso dice "20 estilos"
   mostrándolos en vez de escribirlo — y dice lo otro que promete el
   párrafo, "deja que Abretienda adapte el diseño", porque el diseño se
   adapta solo delante tuyo.

   Los colores van por variable y los interpola el CSS: el JS solo escribe
   --a y --b. Un repintado por cambio, no uno por cuadro. */
.swatches{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.sw{--a:var(--coral);--b:var(--amarillo);
  width:82px;height:104px;border-radius:14px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;cursor:pointer;background:var(--a);
  border:2.5px solid var(--tinta);box-shadow:0 8px 0 var(--tinta);
  transition:background 1.1s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  animation:respira var(--t) ease-in-out infinite;animation-delay:var(--ad)}
@keyframes respira{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* El mini perfil adentro: sin esto son cuadraditos de color y no se leen
   como vitrinas. Con el avatar y las dos rayas, sí. */
.sw .av{width:22px;height:22px;border-radius:50%;background:var(--b);margin:11px auto 7px;
  transition:background 1.1s var(--ease)}
.sw .ln{padding:0 13px}
.sw .ln i{display:block;height:3px;border-radius:2px;background:var(--b);margin-bottom:4px;
  opacity:.85;transition:background 1.1s var(--ease)}
.sw .ln i:first-child{width:100%} .sw .ln i:nth-child(2){width:62%;margin-left:19%}
.sw u{margin-top:auto;height:22px;background:var(--b);transition:background 1.1s var(--ease)}
/* Al pasar el mouse se para de mutar y crece: si querés mirar una, tiene
   que dejarse mirar. */
.sw:hover{transform:scale(1.14) translateY(-6px);box-shadow:0 16px 0 var(--tinta);
  animation-play-state:paused;z-index:5}
@media(max-width:820px){.sw{width:64px;height:82px}.swatches{gap:9px}}
@media(max-width:400px){.sw{width:56px;height:72px}.swatches{gap:7px}}

/* ── 2 · COMPARTE · azul + amarillo ──
   La única sección con color de fondo entre sus dos vecinas de papel, y
   se sostiene: su contenido son tarjetas de color plano, no color suelto.
   El marco puede hablar porque el contenido son objetos.

   El QR se fue de acá: era un objeto quieto explicando algo que se mueve.
   Ahora hay seis tarjetas —las cinco plataformas y la vitrina— y el QR
   quedó como una de ellas, que es su tamaño real. */
.band.s-comparte{min-height:88vh;display:flex;align-items:center;padding:70px 0}
.s-comparte .blob-a{width:340px;height:310px;left:-130px;bottom:-90px;opacity:.4}
.s-comparte .blob-b{width:190px;height:180px;right:-70px;top:-60px;opacity:.32}

.esc{position:relative;height:min(58vh,440px);perspective:1500px}
/* Se inclina el MAZO, no cada tarjeta: como están a distinta profundidad,
   la perspectiva del contenedor le da a cada una su parallax gratis.
   Inclinar tarjeta por tarjeta daría un tilt plano y falso. */
.mazo{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.tj{position:absolute;left:50%;top:50%;width:min(23vw,230px);aspect-ratio:1/.92;
  border:2.5px solid var(--tinta);border-radius:22px;padding:14px;
  box-shadow:0 10px 0 var(--tinta);will-change:transform;
  transition:transform .9s var(--ease),opacity .9s var(--ease),box-shadow .3s var(--ease)}
.tj .av{width:38px;height:38px;border-radius:50%;background:var(--tinta);overflow:hidden;border:2px solid var(--tinta)}
.tj .av img{width:100%;height:100%;object-fit:cover}
/* El nombre al centro. inset:0 con place-items:center lo centra en la
   tarjeta entera, no en el hueco que queda: el avatar y el logo están
   absolutos, así que no le compiten por el espacio. */
.tj .nom{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:clamp(15px,1.6vw,21px);font-weight:900;letter-spacing:-.035em;color:var(--tinta)}
.tj .ico{position:absolute;top:13px;right:13px;width:34px;height:34px;border-radius:9px;
  background:var(--tinta);display:grid;place-items:center}
.tj .ico svg{width:19px;height:19px;fill:#fff}

/* El mazo en reposo, y la que sale volando */
.tj[data-z="0"]{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(-2deg);z-index:6}
.tj[data-z="1"]{transform:translate(-50%,-50%) translate3d(26px,-16px,-50px) rotate(1.5deg);z-index:5}
.tj[data-z="2"]{transform:translate(-50%,-50%) translate3d(52px,-32px,-100px) rotate(5deg);z-index:4}
.tj[data-z="3"]{transform:translate(-50%,-50%) translate3d(78px,-48px,-150px) rotate(8.5deg);z-index:3}
.tj[data-z="4"]{transform:translate(-50%,-50%) translate3d(104px,-64px,-200px) rotate(12deg);z-index:2}
.tj[data-z="5"]{transform:translate(-50%,-50%) translate3d(130px,-80px,-250px) rotate(15.5deg);opacity:.55;z-index:1}
/* Cada una se va para su lado. --fuga lo escribe el JS por tarjeta: antes
   las seis salían a la izquierda y el mazo parecía tener una fuga de agua.
   Con seis salidas distintas se lee como que se reparten. */
.tj.vuela{transform:translate(-50%,-50%) var(--fuga);opacity:0;z-index:9}

/* ── EL ABANICO MAGNÉTICO ──
   --arc lo escribe el JS: la posición de cada una en el arco. Con .abre
   puesto le gana a la del mazo, en un solo selector para las seis. */
.esc.abre .tj{transform:translate(-50%,-50%) var(--arc)!important;opacity:1!important;
  transition:transform .75s var(--ease),opacity .4s;cursor:pointer}
.esc.abre .tj:hover{transform:translate(-50%,-50%) var(--arc) translateZ(90px) scale(1.06)!important;
  box-shadow:0 22px 0 var(--tinta);z-index:20}

/* La pastilla migra a la tarjeta que mirás. Ese es el truco: la sección
   promete "un link en todas partes" y el hover te deja comprobarlo — el
   MISMO link saltando de Instagram a WhatsApp a tu vitrina. */
/* Se centra con translate y no con un margen negativo calculado a mano:
   el margen suponía 200px de ancho, y el ancho cambia con el texto. */
.pastilla{position:absolute;left:50%;top:50%;z-index:25;pointer-events:none;
  background:#fff;border:2.5px solid var(--tinta);border-radius:999px;
  padding:11px 20px 11px 12px;display:flex;align-items:center;gap:9px;
  box-shadow:0 5px 0 var(--tinta);font-size:14px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;
  transition:translate .55s var(--ease)}
/* El punto va EN el lugar del punto del dominio —abre●tienda/camila— y no
   suelto al costado. Antes había dos: el mío de adorno y el real. */
.pastilla .m{width:.3em;height:.3em;border-radius:50%;background:var(--verde);
  border:1.5px solid var(--tinta);flex:none;box-sizing:content-box;margin:0 .1em;
  align-self:baseline}
.pastilla{align-items:baseline;gap:0}

@media(max-width:900px){
  .band.s-comparte{min-height:auto;padding:60px 0}
  .esc{height:min(46vh,340px)}
  .tj{width:min(44vw,190px)}
}

/* ── ANALÍTICA · verde + crema ── */
.s-ana .blob-b{width:360px;height:330px;right:-130px;top:-90px;opacity:.22}
/* Más chico: la fila mínima baja de 180 a 148 y el margen de arriba de 56
   a 40. Tenía altura de dashboard y muestra cuatro números. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(148px,auto);gap:16px;margin-top:40px}
.bx{border:2.5px solid var(--tinta);border-radius:24px;padding:26px;background:var(--pop);
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  box-shadow:0 8px 0 var(--tinta);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bx:hover{transform:translateY(-6px);box-shadow:0 14px 0 var(--tinta)}
.bx .v{font-size:clamp(34px, 2.24vw + 25.6px, 52px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:var(--tinta)}
.bx .l{font-size:15.5px;font-weight:800;margin-top:7px;color:var(--tinta)}
.b1{grid-column:span 2;min-height:250px}
.b1 .v{font-size:clamp(44px, 3.73vw + 30.0px, 74px)}
/* La celda invertida rompe el ritmo: el dato importante viste el fondo */
.b2{grid-column:3;grid-row:span 2;background:var(--bg);justify-content:flex-end}
.b2 .v{font-size:clamp(42px, 4.72vw + 24.3px, 80px)}
.b3{grid-column:1}
.b4{grid-column:2}
.spark{position:absolute;right:24px;bottom:24px;width:54%;height:86px}
.spark path{fill:none;stroke:var(--bg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s var(--ease) .25s}
.spark .under{stroke:var(--tinta);stroke-width:12}
.b1.in .spark path{stroke-dashoffset:0}
.b2 .ring{position:absolute;top:30px;right:30px;width:48px;height:48px;border-radius:50%;
  border:4px solid rgb(39 41 37/.25);border-top-color:var(--tinta);animation:spin 2.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* La bolsa, dibujada. Antes era el emoji 🛍️ y ese lo dibuja el sistema
   operativo: en Apple es una bolsa de papel, en Android otra, en Windows
   otra. Todo lo demás de la página está medido; eso no lo controlábamos. */
.b3 .emo{width:42px;height:44px;fill:none;stroke:var(--tinta);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px;grid-auto-rows:minmax(140px,auto)}
  .bx{padding:22px;border-radius:22px}
  .bx .l{font-size:14px}
  .b1{grid-column:span 2;min-height:210px}
  .b2{grid-column:1;grid-row:auto;min-height:150px;justify-content:space-between}
  .b3{grid-column:2}.b4{grid-column:span 2}
  .spark{height:70px;right:20px;bottom:20px}
  .b2 .ring{width:34px;height:34px;top:20px;right:20px;border-width:3px}
  .statement p,.ana-head p{font-size:17px}
}

/* ── PREGUNTAS · arena + verde ── (propuesta C · índice lateral)
   Sección de papel: 80px de alto en vez de 104, titular a 40px en vez
   de 78, pregunta a 17px en vez de 22. El título y el CTA se quedan
   pegados a la izquierda mientras el acordeón corre a la derecha: el
   botón nunca se va de pantalla. El verde solo destaca la pregunta
   abierta, como marcador sobre papel. */
.band.s-faq{padding:80px 0}
.s-faq .blob-a{width:300px;height:280px;left:-150px;top:12%;opacity:.42}
.faq-grid{display:grid;grid-template-columns:.7fr 1fr;gap:60px;align-items:start}
.faq-side{position:sticky;top:96px}
.s-faq h2{margin:16px 0 12px}
/* La pastilla del FAQ toma el --dark de su sección (azul noche, 7.63:1
   sobre el verde). Si algún día el FAQ cambia de titular, revisar acá. */
.faq-side .pill{color:var(--dark)}
.faq-sub{font-size:15px;font-weight:600;opacity:.62;margin-bottom:24px;max-width:32ch}
.faq{border-top:1.5px solid rgb(39 41 37/.16)}
.qitem{border-bottom:1.5px solid rgb(39 41 37/.16)}
.qhead{display:flex;gap:20px;align-items:flex-start;padding:18px 0;cursor:pointer;
  font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.35;color:var(--tinta)}
.qhead .qt{flex:1}
/* El marcador: la franja verde se pinta de izquierda a derecha */
.qhead .qt span{background:linear-gradient(var(--pop),var(--pop)) no-repeat left center/0% 82%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 3px;margin:0 -3px;
  transition:background-size .42s var(--ease)}
.qitem.open .qhead .qt span{background-size:100% 82%}
/* Signo +/− en tinta: es un control, tiene que leerse (12.7:1) */
.pm{position:relative;flex:none;width:15px;height:15px;margin-top:5px}
.pm::before,.pm::after{content:"";position:absolute;background:var(--tinta);border-radius:2px;
  transition:transform .34s var(--ease),opacity .34s var(--ease)}
.pm::before{left:0;top:6.5px;width:15px;height:2.5px}
.pm::after{left:6.25px;top:0;width:2.5px;height:15px}
.qitem.open .pm::after{transform:rotate(90deg);opacity:0}
.qbody{max-height:0;overflow:hidden;transition:max-height .38s var(--ease),padding .38s var(--ease)}
.qitem.open .qbody{max-height:280px;padding-bottom:20px}
.qbody p{font-size:15px;line-height:1.62;font-weight:500;opacity:.82;max-width:56ch}
@media(max-width:820px){
  .band.s-faq{padding:56px 0}
  .faq-grid{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .qhead{font-size:16px}
}

/* ── 5 · VITRINAS · coral + lila ──
   La sección que faltaba desde el principio: negocios de verdad. Es lo que
   más convierte en este producto y estuvo pendiente toda la conversación.

   La pared es coral y los cuadros van ENMARCADOS: cada vitrina lleva su
   canto de tinta y su sombra dura, así que la foto nunca toca el coral.
   Sin el marco sería barro — dos cosas de color peleando. Con marco es una
   galería. Coral y tierra quedaron fuera como estilo de tarjeta: a dE 24 y
   0 de la pared, esas vitrinas desaparecerían. */
.s-vit{padding:clamp(70px,9vw,110px) 0 clamp(80px,10vw,130px)}
.s-vit .blob-a{width:360px;height:330px;left:-130px;top:-90px;opacity:.22}
.s-vit .blob-b{width:220px;height:200px;right:-80px;bottom:-70px;opacity:.18}
.vit-cab{max-width:660px;margin:0 auto clamp(44px,5vw,66px);text-align:center}
.vit-cab h2{max-width:15ch;margin:0 auto}
.vit-cab p{margin:20px auto 0;max-width:46ch;font-size:17px;line-height:1.55;font-weight:600;opacity:.85}
/* Las dos cintas corren en sentidos opuestos: el contramovimiento es lo que
   las lee como plano inclinado y no como carrusel. */
.plano{perspective:1500px;overflow:hidden;margin:0 -7vw;position:relative;z-index:2;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.plano-in{transform:rotateX(15deg) rotateZ(-3.5deg);transform-style:preserve-3d}
.cinta{display:flex;gap:20px;width:max-content;margin-bottom:20px}
.cinta.izq{animation:corre 48s linear infinite}
.cinta.der{animation:corre 56s linear infinite reverse}
/* Sin pausa al hover: la galería no se toca. Frenarla obligaba a que el
   que pasa el mouse por ahí de casualidad rompiera el movimiento sin
   quererlo — y no hay nada que mirar de cerca, es una cinta. */
@keyframes corre{to{transform:translateX(-50%)}}
/* La vitrina no es una foto con etiqueta: es la app, en uno de los 20
   estilos. --a es el fondo del estilo y --b su acento — los mismos pares
   que mutan en la sección Crea. Las dos secciones se dan la mano: allá ves
   los estilos, acá los ves puestos en negocios. */
.viti{width:206px;flex:none;border:2.5px solid var(--tinta);border-radius:20px;overflow:hidden;
  background:var(--a);box-shadow:0 10px 0 var(--tinta);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.viti:hover{transform:translateZ(50px) translateY(-6px);box-shadow:0 18px 0 var(--tinta)}
.viti .foto{height:150px;border-bottom:2.5px solid var(--tinta);position:relative}
.viti .foto img{width:100%;height:100%;object-fit:cover;display:block}
.viti .cuerpo{padding:12px 13px 14px}
.viti b{display:block;font-size:13px;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--t)}
.viti span{display:block;font-size:9px;font-weight:700;margin-top:3px;color:var(--t);opacity:.62}
.viti .pedir{margin-top:11px;background:var(--b);color:var(--tb);border:2px solid var(--tinta);
  border-radius:999px;padding:7px;text-align:center;font-size:8.5px;font-weight:900;letter-spacing:.08em}
/* El sello dice cuál de los 20 estás viendo. Sin esto son diez negocios
   lindos; con esto, diez estilos aplicados. */
.viti .sello{position:absolute;top:9px;left:9px;background:var(--b);color:var(--tb);
  border:2px solid var(--tinta);border-radius:999px;padding:4px 9px;font-size:7.5px;
  font-weight:900;letter-spacing:.08em}
@media(max-width:820px){
  .viti{width:150px}.viti .foto{height:104px}
  .plano{margin:0 -16vw}.vit-cab p{font-size:15.5px}
}

/* ── 7 · FOOTER · tinta + amarillo ──
   El amarillo no es decoración: sobre tinta da 10.70, el par de más
   contraste de toda la paleta. Y este es el único lugar de la página donde
   "lo más fuerte posible" es exactamente lo que hace falta — es la última
   pregunta que le hacés al que llegó hasta abajo.

   Antes era lila, y el lila no lo elegimos: fue el que sobró cuando armamos
   el par. Era el color más suave de la paleta en el momento más fuerte.

   Y cierra el marco: la página abre en amarillo con letra oscura y cierra
   en oscuro con letra amarilla. Mismo par, dado vuelta, en los dos extremos.

   Se fueron "Empecemos" —una palabra de relleno con tamaño de titular— y
   el garabato, que venía de v2 y nunca dijo nada. El lema ocupa el lugar. */
.foot{background:var(--bg);color:var(--fg);padding:clamp(70px,9vw,104px) 0 30px;
  position:relative;overflow:hidden;overflow:clip}
.foot .blob-b{width:380px;height:350px;right:-120px;top:-110px;opacity:.22}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:44px;margin-bottom:52px}
.foot-say{flex:1;min-width:300px}
.foot-h{color:var(--pop);font-size:clamp(30px,2.98vw + 18.8px,54px);line-height:1.06}
.foot-h .beat{display:block}
.foot-sub{font-size:17px;font-weight:600;opacity:.7;margin:22px 0 26px;max-width:34ch}

/* EL GANCHO. Esto no es de color y es lo que más cambia: el que llegó al
   fondo ya decidió. Mandarlo de vuelta al hero con un botón es hacerle
   perder el impulso. Acá escribe el nombre y arranca. Y cierra el círculo:
   la página abre con el gancho y termina con el gancho. */
.foot-gancho{display:inline-flex;align-items:center;background:#fff;border:2px solid var(--fg);
  border-radius:999px;padding:0 6px 0 20px;box-shadow:0 4px 0 var(--fg);max-width:100%;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.foot-gancho:focus-within{transform:translateY(-2px);box-shadow:0 6px 0 var(--fg)}
.foot-gancho .pre{font-size:15px;font-weight:700;color:#A9A49B;white-space:nowrap;flex:none}
.foot-gancho input{border:0;background:none;outline:none;font-family:inherit;font-size:16px;
  font-weight:800;color:var(--tinta);width:9ch;min-width:0;padding:14px 4px;letter-spacing:-.01em}
.foot-gancho input::placeholder{color:#C9C4BA;font-weight:700}
/* Adentro del gancho blanco el botón ya tiene el canto del gancho, así que
   no lleva borde ni sombra propia: se los comería el blanco. */
.foot-gancho .btn{margin:5px 0;padding:12px 22px;font-size:14px;box-shadow:none;border:0;flex:none}
.foot-gancho .btn:hover{transform:none;box-shadow:none;filter:brightness(1.08)}
.foot-gancho .btn:active{transform:scale(.97)}
.foot-libre{margin-top:16px;font-size:12.5px;font-weight:700;opacity:.55;min-height:19px}
/* La inversión de la línea: en toda la página es tinta sobre color, pero
   acá el fondo ES la tinta. Pasa a ser el papel. Mismo objeto, en negativo. */
.foot .btn{border-color:var(--fg);box-shadow:0 4px 0 var(--fg)}
.foot .btn:hover{box-shadow:0 6px 0 var(--fg)}
.foot .btn:active{box-shadow:0 0 0 var(--fg)}
/* En el footer el fondo ES la tinta, así que el anillo pasa a ser el papel */
.foot .marca{font-size:17px;color:var(--fg);--anillo-color:var(--crema)}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col b{display:block;font-size:13px;opacity:.5;margin-bottom:12px;font-weight:800}
.foot-col a{display:block;color:var(--fg);text-decoration:none;font-size:14.5px;margin-bottom:9px;
  font-weight:600;transition:transform .25s var(--ease),opacity .2s;opacity:.85}
.foot-col a:hover{opacity:1;transform:translateX(4px)}
.foot-bottom{border-top:1.5px solid rgb(244 239 224/.18);padding-top:22px;font-size:13px;
  font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;opacity:.7}
@media(max-width:820px){
  .foot{padding:56px 0 26px}
  .foot-top{gap:34px;flex-direction:column}
  /* Tres columnas a 375px dejaban 90px cada una y los nombres se partían
     en tres líneas. En rejilla de dos respiran. */
  .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
  /* 14.5px con 9px de margen daban un blanco táctil de 31px. Apple pide 44. */
  .foot-col a{padding:7px 0;margin-bottom:2px}
  .foot-bottom{padding-bottom:max(0px,env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .foot-gancho{padding:0 5px 0 14px}
  .foot-gancho .pre{font-size:13.5px}
  .foot-gancho input{font-size:16px;width:7ch}   /* 16px o iOS hace zoom */
  .foot-gancho .btn{padding:11px 16px;font-size:13px}
}