/* Universo Wuju! · UW-WEB-001 · wuju_web_v01 · 2026-10-02
   Hoja única del sitio. Tokens y Wuju Motion copiados literal de UW-BB-001 v0.4.
   Lo que no está en el brandbook va marcado [PROPUESTA] para llevarlo al sistema.
   Índice: 0 fuentes · 1 tokens · 2 base · 3 tipografía · 4 layout · 5 componentes de marca
   6 superficies · 7 Wuju Motion · 8 secciones · 9 movimiento de página · 10 revisión · 11 escritorio · 12 movimiento reducido */

/* ============ 0. FUENTES (autoalojadas: Chewy Apache 2.0, Figtree OFL, ARCO OFL) ============ */
@font-face{font-family:"Chewy";src:url(/assets/fonts/chewy-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"ARCO";src:url(/assets/fonts/arco.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

/* ============ 1. TOKENS (UW-BB-001 v0.4, literal) ============ */
:root{
  /* — Logo maestro: colores de construcción. No se editan; el logo se usa tal cual. */
  --logo-blue:#3857AF;        /* contorno, sombra desplazada, líneas de salto y contorno del tagline */
  --logo-mr:#3646A3;          /* sello MR */
  --logo-green:#7FCB28;       /* relleno base de las letras */
  --logo-lime:#AAD91B;        /* rayas planas de la W */
  --logo-tag:#D1E627;         /* relleno del tagline */
  --logo-ramp-edge:#8AD03E;   /* rampa de las rayas: orilla izquierda */
  --logo-ramp-mid:#B2DC32;    /* rampa: paso lima */
  --logo-ramp-core:#E2EA21;   /* rampa: centro amarillo */
  --logo-ramp-core2:#D0E527;  /* rampa: salida del centro */
  --logo-ramp-edge2:#91D33B;  /* rampa: orilla derecha */
  --logo-key:#FFFFFF;         /* contorno blanco de la versión sticker */

  /* — Paleta digital: base */
  --blanco:#FFFFFF;           /* fondo principal (el logo nació sobre blanco) */
  --nube:#EEF3FC;             /* fondo alterno claro */
  --linea:#D6DEF3;            /* bordes y divisores sobre claro */
  --noche:#121A4A;            /* universo: fondo oscuro de marca */
  --noche-2:#1D2766;          /* superficie elevada sobre noche */
  --noche-3:#0B1036;          /* fondo profundo (final de degradados) */
  /* — Texto */
  --tinta:#121A4A;            /* texto principal (16.5:1 sobre blanco) */
  --tinta-2:#4A5378;          /* texto secundario (7.5:1) */
  --tinta-3:#5E6790;          /* notas y pies (5.5:1) */
  --nube-dim:#C3CDEF;         /* texto secundario sobre noche (10.4:1) */
  /* — Acento: azul Wuju */
  --azul:#3857AF;             /* acento principal, enlaces, botones secundarios (6.7:1) */
  --azul-deep:#283E8A;        /* presionado, titulares sobre nube (9.8:1) */
  --azul-tint:#DDE5F7;        /* fondos de etiqueta y celdas destacadas */
  --azul-line:#B7C6EC;        /* bordes sobre nube */
  /* — Energía: verdes del logo */
  --verde:#7FCB28;            /* botón primario y acentos de fondo; nunca texto sobre blanco */
  --verde-deep:#3F7A10;       /* verde para texto sobre claro (5.2:1) */
  --lima:#AAD91B;             /* rayas, resaltados */
  --cometa:#D1E627;           /* chispa: resaltado y CTA sobre noche (11.8:1 con tinta) */
  --cielo:#7FB3EA;            /* horizonte del degradado atmósfera */
  --planeta-luz:#9DB7F2;      /* luz de esferas decorativas */
  /* — Personajes: solo contenido (ilustración, etiquetas de personaje), nunca interfaz */
  --pj-rojo:#D5211A;          /* Nyro, Xulo · texto blanco 5.2:1 */
  --pj-naranja:#F2793A;       /* Yupi, Zebro */
  --pj-amarillo:#F2B705;      /* LOL, Buzz */
  --pj-aqua:#19B6D8;          /* Waa */
  --pj-morado:#7A3BA8;        /* Ajúa */
  --pj-rosa:#CB2A74;          /* Yuky · texto blanco 5.1:1 */
  /* — Texto sobre cada color de personaje (≥ 4.5:1) */
  --pj-rojo-txt:var(--blanco); --pj-naranja-txt:var(--tinta); --pj-amarillo-txt:var(--tinta);
  --pj-aqua-txt:var(--tinta); --pj-morado-txt:var(--blanco); --pj-rosa-txt:var(--blanco);
  /* — Funcionales: solo formularios y estados */
  --ok:#2C7A3A;               /* confirmación (5.3:1) */
  --error:#C9302C;            /* error (5.3:1) */
  --error-noche:#FF8A80;      /* error sobre noche (6:1 sobre noche-2) */
  --aviso:#F2B705;            /* aviso, con texto tinta */
  --info:#3857AF;             /* información = azul */
  /* — Terceros */
  --tp-whatsapp:#25D366;      /* solo el botón flotante de WhatsApp en web */
  --tp-instagram:#FF0069;     /* referencia: no se usa en piezas de marca */
  --tp-facebook:#0866FF;      /* referencia: no se usa en piezas de marca */
  /* — Transparencias */
  --rule-noche:rgba(255,255,255,.16);   /* divisores sobre noche */
  --veil:rgba(18,26,74,.82);            /* scrim de texto sobre foto */
  --veil-soft:rgba(18,26,74,.28);       /* overlay de foto */
  --neb-rosa:rgba(217,71,138,.55);      /* nube rosa de la nebulosa */
  --neb-morado:rgba(122,59,168,.62);    /* nube morada de la nebulosa */
  --sombra:0 14px 34px rgba(18,26,74,.14); /* sombra suave de tarjetas flotantes */


  /* — Tipografía */
  --font-display:"Chewy","Chalkboard SE","Comic Sans MS",system-ui,sans-serif;  /* titulares */
  --font-body:"Figtree","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; /* lectura e interfaz */
  --font-util:"ARCO","Arial Rounded MT Bold","Arial Black",system-ui,sans-serif; /* etiquetas, botones, cifras */
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;                     /* capa técnica del documento */
  --fs-h1:clamp(2.9rem,1.6rem + 6vw,6rem);
  --fs-h2:clamp(2.4rem,1.7rem + 3.4vw,4.25rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-lead:clamp(1.12rem,1.05rem + .35vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-cap:.8125rem;
  --fs-label:.8125rem;
  --fs-mono:.75rem;

  /* — Espaciado (escala de 4 px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* — Radios: botones y chips pill, tarjetas 20, campos 14 */
  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  /* — Firma de componente: contorno + sombra desplazada, como las letras del logo */
  --stroke:2.5px; --lift:5px;
  /* — Movimiento */
  --t-fast:140ms; --t-move:320ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-salto:cubic-bezier(.34,1.56,.64,1); --loop:28s;

  /* — Degradados */
  --grd-rayas:linear-gradient(90deg,var(--logo-ramp-edge) 0%,var(--logo-ramp-mid) 20%,var(--logo-ramp-core) 42%,var(--logo-ramp-core2) 62%,var(--logo-ramp-mid) 80%,var(--logo-ramp-edge2) 100%);
  --grd-noche:radial-gradient(130% 100% at 18% 0%,var(--noche-2) 0%,var(--noche) 52%,var(--noche-3) 100%);
  --grd-nebulosa:radial-gradient(55% 45% at 84% 16%,var(--neb-rosa) 0%,transparent 70%),radial-gradient(62% 55% at 10% 90%,var(--neb-morado) 0%,transparent 72%),var(--noche);
  --grd-atmosfera:linear-gradient(180deg,var(--noche) 0%,var(--azul-deep) 46%,var(--azul) 76%,var(--cielo) 100%);
  --grd-cometa:linear-gradient(115deg,var(--verde) 0%,var(--cometa) 100%);
  --grd-luna:radial-gradient(120% 90% at 88% 0%,var(--blanco) 0%,var(--nube) 72%);
  --grd-planeta:radial-gradient(circle at 32% 28%,var(--planeta-luz) 0%,var(--azul) 42%,var(--noche) 100%);

  /* — Texturas (máscaras SVG: el color lo pone la superficie) */
  --tex-rayas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0 8 C20 1.4000000000000004 40 1.4000000000000004 60 8 S100 14.6 120 8 L120 21 C100 27.6 80 27.6 60 21 S20 14.4 0 21 Z' fill='%23000'/%3E%3C/svg%3E");
  --tex-estrellas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23000'%3E%3Ccircle cx='79.1' cy='39.0' r='1.4'/%3E%3Ccircle cx='15.2' cy='194.5' r='0.7'/%3E%3Ccircle cx='88.8' cy='17.5' r='1.2'/%3E%3Ccircle cx='53.8' cy='23.9' r='1.0'/%3E%3Ccircle cx='20.2' cy='25.0' r='1.0'/%3E%3Ccircle cx='17.7' cy='135.2' r='0.8'/%3E%3Ccircle cx='150.3' cy='139.3' r='0.7'/%3E%3Ccircle cx='137.9' cy='96.0' r='0.8'/%3E%3Ccircle cx='14.8' cy='203.2' r='0.9'/%3E%3Ccircle cx='101.2' cy='129.4' r='1.2'/%3E%3Ccircle cx='75.6' cy='193.3' r='0.8'/%3E%3Ccircle cx='27.9' cy='136.5' r='0.8'/%3E%3Ccircle cx='90.4' cy='131.1' r='0.7'/%3E%3Ccircle cx='134.9' cy='147.6' r='1.0'/%3E%3Ccircle cx='161.9' cy='103.2' r='0.9'/%3E%3Ccircle cx='112.0' cy='218.2' r='0.9'/%3E%3Ccircle cx='73.5' cy='188.3' r='1.4'/%3E%3Ccircle cx='184.9' cy='23.0' r='0.9'/%3E%3Ccircle cx='125.8' cy='207.0' r='1.4'/%3E%3Ccircle cx='108.1' cy='145.3' r='0.7'/%3E%3Ccircle cx='31.4' cy='101.0' r='1.7'/%3E%3Ccircle cx='83.4' cy='220.5' r='1.0'/%3E%3Ccircle cx='13.1' cy='159.0' r='1.7'/%3E%3Ccircle cx='133.5' cy='187.1' r='1.7'/%3E%3Ccircle cx='76.8' cy='165.3' r='1.2'/%3E%3Ccircle cx='119.2' cy='188.9' r='0.7'/%3E%3Ccircle cx='198.9' cy='223.2' r='1.0'/%3E%3Ccircle cx='165.7' cy='19.1' r='1.4'/%3E%3Ccircle cx='166.7' cy='154.1' r='1.4'/%3E%3Ccircle cx='194.7' cy='70.0' r='1.0'/%3E%3Ccircle cx='209.8' cy='84.5' r='1.0'/%3E%3Ccircle cx='86.5' cy='145.7' r='1.0'/%3E%3Ccircle cx='17.7' cy='182.2' r='0.8'/%3E%3Ccircle cx='175.3' cy='96.3' r='1.7'/%3E%3Ccircle cx='119.2' cy='42.6' r='1.0'/%3E%3Ccircle cx='131.5' cy='208.9' r='1.7'/%3E%3Ccircle cx='103.9' cy='131.7' r='1.4'/%3E%3Ccircle cx='100.3' cy='87.2' r='1.0'/%3E%3Ccircle cx='226.2' cy='39.0' r='0.8'/%3E%3Ccircle cx='39.1' cy='156.8' r='0.7'/%3E%3Ccircle cx='116.5' cy='140.7' r='0.9'/%3E%3Ccircle cx='69.4' cy='37.8' r='1.2'/%3E%3Ccircle cx='89.7' cy='135.4' r='0.8'/%3E%3Ccircle cx='164.2' cy='123.6' r='1.2'/%3E%3Ccircle cx='156.0' cy='175.6' r='1.0'/%3E%3Ccircle cx='212.7' cy='185.0' r='1.7'/%3E%3Cpath d='M38 45C38.4 50.9 39.1 51.6 45 52C39.1 52.4 38.4 53.1 38 59C37.6 53.1 36.9 52.4 31 52C36.9 51.6 37.6 50.9 38 45Z'/%3E%3Cpath d='M176 25C176.3 29.2 176.8 29.7 181 30C176.8 30.3 176.3 30.8 176 35C175.7 30.8 175.2 30.3 171 30C175.2 29.7 175.7 29.2 176 25Z'/%3E%3Cpath d='M120 142C120.4 148.7 121.3 149.6 128 150C121.3 150.4 120.4 151.3 120 158C119.6 151.3 118.7 150.4 112 150C118.7 149.6 119.6 148.7 120 142Z'/%3E%3Cpath d='M210 194C210.3 199 211 199.7 216 200C211 200.3 210.3 201 210 206C209.7 201 209 200.3 204 200C209 199.7 209.7 199 210 194Z'/%3E%3Cpath d='M60 191.5C60.3 195.3 60.7 195.7 64.5 196C60.7 196.3 60.3 196.7 60 200.5C59.7 196.7 59.3 196.3 55.5 196C59.3 195.7 59.7 195.3 60 191.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --tex-grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-grano-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-puntos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cg fill='%23000'%3E%3Ccircle cx='3.5' cy='3.5' r='2.1'/%3E%3Ccircle cx='10.5' cy='10.5' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
  --tex-movimiento:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M10 12 L34 6'/%3E%3Cpath d='M14 22 L30 18'/%3E%3Cpath d='M55 42 L79 36'/%3E%3Cpath d='M59 52 L75 48'/%3E%3C/g%3E%3C/svg%3E");
  --tex-orbitas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cellipse cx='300' cy='200' rx='70' ry='24' transform='rotate(-14 300 200)'/%3E%3Cellipse cx='300' cy='200' rx='120' ry='42' transform='rotate(-14 300 200)'/%3E%3Cellipse cx='300' cy='200' rx='175' ry='62' transform='rotate(-14 300 200)'/%3E%3Cellipse cx='300' cy='200' rx='235' ry='84' transform='rotate(-14 300 200)'/%3E%3Cellipse cx='300' cy='200' rx='300' ry='108' transform='rotate(-14 300 200)'/%3E%3C/g%3E%3Ccircle cx='368' cy='186' r='5' fill='%23000' stroke='none'/%3E%3Ccircle cx='196' cy='236' r='4' fill='%23000' stroke='none'/%3E%3Ccircle cx='470' cy='150' r='6' fill='%23000' stroke='none'/%3E%3Ccircle cx='118' cy='262' r='4.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='560' cy='120' r='5' fill='%23000' stroke='none'/%3E%3C/svg%3E");

  /* — Imagen */
  --img-scrim:linear-gradient(180deg,transparent 38%,var(--veil) 100%);  /* zona de texto sobre foto */
  --img-overlay:var(--veil-soft);                                        /* unifica fotos de distinto origen */

  /* — Fondos animados (módulo Wuju Motion v0.3, propuesta). Ver Superficie y Tokens */
  /* WM-TOKENS */
  --wm-horizonte:rgba(56,87,175,.5);    /* azul Wuju al 50%: luz bajo el eje de Estelas */
  --wm-velo:rgba(11,16,54,.62);         /* noche profunda al 62%: velo detrás del texto */
  --wm-boton:rgba(11,16,54,.55);        /* fondo del botón de pausa */
  --grd-wm-estelas:radial-gradient(80% 58% at 50% 124%,var(--wm-horizonte) 0%,transparent 74%),var(--grd-noche);  /* fondo de Estelas */
  --grd-wm-lluvia:var(--grd-noche);     /* fondo de Lluvia de estrellas */
  --grd-wm-aurora:linear-gradient(180deg,var(--noche-3) 0%,var(--noche) 62%,var(--noche) 100%);  /* fondo de Aurora */
  --grd-wm-bigbang:radial-gradient(75% 75% at 50% 44%,var(--noche-2) 0%,var(--noche) 58%,var(--noche-3) 100%);  /* fondo de Big Bang */
  /* /WM-TOKENS */
}
/* Modo Día: roles base (UW-BB-001). Los componentes solo usan roles */
:root,[data-mode="dia"]{
  --bg:var(--blanco);  --bg-2:var(--nube);  --fg:var(--tinta);  --fg-2:var(--tinta-2);  --fg-3:var(--tinta-3);
  --rule:var(--linea); --card:var(--blanco); --accent:var(--azul); --accent-ink:var(--azul); --accent-fg:var(--blanco);
  --edge:var(--azul);  --btn-bg:var(--verde); --btn-fg:var(--tinta); --focus:var(--tinta); --mark:var(--cometa);
  --logo-on:var(--logo-blue); --err-ink:var(--error); --hover-bg:var(--azul-tint);
  color:var(--fg);
}
/* Modo Noche: mismos componentes, roles remapeados */
[data-mode="noche"]{
  --bg:var(--noche); --bg-2:var(--noche-2); --fg:var(--blanco); --fg-2:var(--nube-dim); --fg-3:var(--nube-dim);
  --rule:var(--rule-noche); --card:var(--noche-2); --accent:var(--cometa); --accent-ink:var(--cometa); --accent-fg:var(--noche);
  --edge:var(--noche-3); --btn-bg:var(--cometa); --btn-fg:var(--noche); --focus:var(--cometa); --mark:var(--verde);
  --logo-on:var(--logo-key); --err-ink:var(--error-noche); --hover-bg:var(--rule-noche);
  color:var(--fg);
}

/* Tokens de web [PROPUESTA para UW-BB-001]: medidas que el documento no necesita */
:root{
  --hdr-h:64px;                         /* alto del encabezado en celular */
  --gutter:max(16px,env(safe-area-inset-left));
  --wrap:1200px;
  --sticker-pad:6px;                    /* borde blanco de las fotos sticker, como el contorno del logo sticker */
}

/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;background:var(--noche);scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--blanco);color:var(--tinta);font:400 var(--fs-body)/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:.08em}
a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:var(--mark);color:var(--tinta)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--blanco);color:var(--tinta);padding:12px 16px;border-radius:var(--r-sm);font-weight:700}
.skip:focus{top:12px}

/* Clases del logo dentro del sprite (UW-BB-001): los colores salen de tokens */
.lb{fill:var(--logo-blue)}.lg-f{fill:var(--logo-green)}.ll{fill:var(--logo-lime)}.lr{fill:url(#lg-grd)}
.lt{fill:var(--logo-tag);stroke:var(--logo-blue);stroke-width:15.2px;stroke-miterlimit:4;paint-order:stroke}
.lm{fill:var(--logo-mr)}.lk{fill:var(--logo-key)}.lc{fill:currentColor}
.ls-e{stop-color:var(--logo-ramp-edge)}.ls-m{stop-color:var(--logo-ramp-mid)}.ls-c{stop-color:var(--logo-ramp-core)}.ls-c2{stop-color:var(--logo-ramp-core2)}.ls-e2{stop-color:var(--logo-ramp-edge2)}
.ico{fill:var(--ico-fill,none);stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic{width:24px;height:24px;flex:none;color:var(--accent-ink)}
.gl{width:32px;height:32px;flex:none;color:var(--accent-ink)}
.tp{width:20px;height:20px;flex:none}

/* ============ 3. TIPOGRAFÍA ============ */
h1,h2{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:var(--fs-h1);line-height:.95}
h2{font-size:var(--fs-h2);line-height:1}
h3{font:800 var(--fs-h3)/1.2 var(--font-body);letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0 0 var(--s4);max-width:65ch}
p:last-child{margin-bottom:0}
strong,b{font-weight:800}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--fg-2);max-width:40ch;margin-top:var(--s4)}
.label{font:400 var(--fs-label)/1.2 var(--font-util);text-transform:uppercase;letter-spacing:.08em}
.eyebrow{font:400 var(--fs-label)/1.2 var(--font-util);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink);margin:0 0 var(--s4)}
.cap{font-size:var(--fs-cap);color:var(--fg-3);line-height:1.45}
.hl{color:var(--accent-ink)}
.num{font-variant-numeric:tabular-nums}

/* ============ 4. LAYOUT ============ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{position:relative;padding:clamp(64px,10vw,128px) 0;background:var(--bg);color:var(--fg)}
.sec-head{margin-bottom:var(--s7);max-width:44rem}

/* ============ 5. COMPONENTES DE MARCA (UW-BB-001 §08) ============ */
/* Botones: relleno, contorno y sombra desplazada, como el logo */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 24px 13px;border-radius:var(--r-pill);font:400 15px/1 var(--font-util);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:var(--stroke) solid var(--edge);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),opacity var(--t-move) var(--ease);white-space:nowrap}
.btn .ic,.btn .tp{width:20px;height:20px;color:currentColor}
.btn-primario{background:var(--btn-bg);color:var(--btn-fg);box-shadow:4px 4px 0 var(--edge)}
.btn-secundario{background:var(--card);color:var(--accent-ink);box-shadow:4px 4px 0 var(--edge)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent-ink);padding-inline:8px;text-decoration:underline;text-underline-offset:.3em}
.btn-wa{background:var(--tp-whatsapp);color:var(--tinta);border-color:var(--azul);box-shadow:4px 4px 0 var(--azul)}
.btn-primario:active,.btn-secundario:active,.btn-wa:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--edge)}
.btn:focus-visible{outline:3px solid transparent;outline-offset:3px;box-shadow:0 0 0 3px var(--bg),0 0 0 7px var(--focus)}
.btn-primario:focus-visible,.btn-secundario:focus-visible,.btn-wa:focus-visible{box-shadow:4px 4px 0 var(--edge),0 0 0 3px var(--bg),4px 4px 0 3px var(--bg),0 0 0 7px var(--focus),4px 4px 0 7px var(--focus)}
.btn[aria-disabled="true"]{background:var(--bg-2);color:var(--fg-2);border-color:var(--rule);cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{min-height:44px;padding:11px 16px 10px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px 7px;border-radius:var(--r-pill);background:var(--azul-tint);color:var(--azul-deep);font:600 14px/1.2 var(--font-body);border:1.5px solid var(--azul-line)}
.chip .ic{width:16px;height:16px;color:currentColor}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.chip-radio{position:relative;cursor:pointer;display:inline-flex}
.chip-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip-radio .chip{min-height:44px;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.chip-radio input:checked+.chip{background:var(--azul);color:var(--blanco);border-color:var(--azul)}
.chip-radio input:focus-visible+.chip{outline:3px solid var(--focus);outline-offset:2px}
.chip-radio input:disabled{cursor:not-allowed}
.chip-radio input:disabled+.chip{background:var(--nube);color:var(--tinta-3);border-style:dashed}
.chip-radio:active input:not(:disabled)+.chip{transform:translate(1px,1px)}
/* Tarjetas */
.card{border:1.5px solid var(--rule);border-radius:var(--r-md);background:var(--card);padding:var(--s5)}
.card-sticker{border:var(--stroke) solid var(--edge);box-shadow:var(--lift) var(--lift) 0 var(--edge)}
.attr-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--azul-tint);flex:none}
.attr-ico .ic{color:var(--azul)}
/* Formulario */
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.field{display:grid;gap:8px}
.field>label,.field>legend,.opt>legend{font-weight:800;font-size:var(--fs-small)}
.field>legend,.opt>legend{margin-bottom:10px}
.hint{font-size:var(--fs-cap);color:var(--fg-3);margin:0}
.input{font:400 16px/1.3 var(--font-body);color:var(--fg);background:var(--card);border:2px solid var(--azul-line);border-radius:var(--r-sm);padding:13px 14px;width:100%;min-height:50px;transition:border-color var(--t-fast) var(--ease);-webkit-appearance:none;appearance:none}
.input:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--azul)}
.input[aria-invalid="true"]{border-color:var(--err-ink)}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--azul) 50%),linear-gradient(135deg,var(--azul) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.err{color:var(--err-ink);font-size:var(--fs-cap);font-weight:700;margin:0}
.check{display:flex;gap:10px;align-items:center;min-height:44px;font-weight:600;font-size:var(--fs-small);cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--azul)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.opt-card{position:relative;display:block;cursor:pointer}
.opt-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt-card>span{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:12px 14px;border:2px solid var(--azul-line);border-radius:var(--r-sm);background:var(--card);transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.opt-card b{font-weight:800;line-height:1.2}
.opt-card small{color:var(--fg-2);font-size:var(--fs-cap)}
.opt-card .ic,.opt-card .tp{width:20px;height:20px;color:var(--azul)}
.opt-card input:checked+span{border-color:var(--azul);background:var(--azul-tint);box-shadow:inset 0 0 0 1px var(--azul)}
.opt-card input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}

/* ============ 6. SUPERFICIES (UW-BB-001 §05, literal) ============ */
.surf{position:relative;isolation:isolate;overflow:hidden;background:var(--surf-bg);color:var(--surf-fg,var(--fg))}
.surf::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--surf-ink);opacity:var(--surf-op);-webkit-mask:var(--surf-tex) 0 0/var(--surf-size) repeat;mask:var(--surf-tex) 0 0/var(--surf-size) repeat}
.sec.surf{overflow:clip}  /* las secciones no recortan con hidden: así el sticky de adentro funciona */
.s-firma{--surf-bg:var(--logo-green);--surf-ink:var(--grd-rayas);--surf-tex:var(--tex-rayas);--surf-size:120px 30px;--surf-op:1;--surf-fg:var(--tinta)}
.s-noche{--surf-bg:var(--grd-noche);--surf-ink:var(--blanco);--surf-tex:var(--tex-estrellas);--surf-size:240px 240px;--surf-op:.85;--surf-fg:var(--blanco)}
.s-nube{--surf-bg:var(--nube);--surf-ink:var(--azul);--surf-tex:var(--tex-estrellas);--surf-size:240px 240px;--surf-op:.4;--surf-fg:var(--tinta)}
.s-luna{--surf-bg:var(--grd-luna);--surf-ink:var(--azul);--surf-tex:var(--tex-grano-g);--surf-size:200px 200px;--surf-op:.13;--surf-fg:var(--tinta)}
.s-lima{--surf-bg:var(--cometa);--surf-ink:var(--verde);--surf-tex:var(--tex-puntos);--surf-size:14px 14px;--surf-op:.6;--surf-fg:var(--tinta)}
.s-noche-lisa{--surf-bg:var(--noche);--surf-ink:var(--blanco);--surf-tex:var(--tex-grano-g);--surf-size:200px 200px;--surf-op:.07;--surf-fg:var(--blanco)}

/* ============ 7. WUJU MOTION v0.3 (UW-BB-001 §14, literal) ============ */
/* WM-CSS */
/* ===== Wuju Motion v0.3 · fondos animados de Universo Wuju! · Conver-za =====
   Requiere los tokens de UW-BB-001 (noche, azul, cielo, verde, lima, cometa) y los --wm-*. */
.wm-stage{position:relative;isolation:isolate;overflow:hidden;background:var(--wm-bg,var(--grd-noche));color:var(--blanco)}
.wm-stage>:not(.wm-layer){position:relative;z-index:1}
.wm-layer{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
.wm-stage.wm-painted .wm-layer{opacity:1}
.wm-layer canvas{position:absolute;inset:0;width:100%;height:100%}
.wm-stage[data-wm="estelas"]{--wm-bg:var(--grd-wm-estelas);--wm-c1:var(--cometa);--wm-c2:var(--lima);--wm-c3:var(--verde);--wm-c4:var(--cielo);--wm-c5:var(--nube-dim);--wm-c6:var(--blanco)}
.wm-stage[data-wm="lluvia"]{--wm-bg:var(--grd-wm-lluvia);--wm-c1:var(--cielo);--wm-c2:var(--planeta-luz);--wm-c3:var(--lima);--wm-c4:var(--cometa)}
.wm-stage[data-wm="aurora"]{--wm-bg:var(--grd-wm-aurora);--wm-c1:var(--verde);--wm-c2:var(--lima);--wm-c3:var(--cielo);--wm-c4:var(--azul)}
.wm-stage[data-wm="bigbang"]{--wm-bg:var(--grd-wm-bigbang);--wm-c1:var(--blanco);--wm-c2:var(--cometa);--wm-c3:var(--lima);--wm-c4:var(--verde);--wm-c5:var(--cielo);--wm-c6:var(--nube-dim)}

/* Aurora: cortinas en WebGL; estas manchas en CSS son el respaldo si el equipo no tiene WebGL */
.wm-aurora{position:absolute;inset:0;overflow:hidden}
.wm-aurora>i{position:absolute;display:block;border-radius:50%;opacity:var(--o);background:radial-gradient(closest-side,var(--c),transparent);animation:wm-deriva var(--d) ease-in-out var(--dl,0s) infinite alternate;will-change:transform}
.wm-a1{--c:var(--verde);--o:.55;width:150%;height:62%;left:-40%;top:-24%;--r0:-14deg;--r1:-2deg;--tx:30%;--ty:14%;--s:1.2;--d:14s}
.wm-a2{--c:var(--azul);--o:.8;width:120%;height:84%;right:-52%;bottom:-40%;--r0:10deg;--r1:-8deg;--tx:-28%;--ty:-12%;--s:1.25;--d:18s}
.wm-a3{--c:var(--lima);--o:.3;width:62%;height:30%;left:24%;top:20%;--r0:-22deg;--r1:-4deg;--tx:26%;--ty:-10%;--s:1.35;--d:11s;--dl:-4s}
.wm-a4{--c:var(--cielo);--o:.24;width:96%;height:52%;left:-24%;bottom:-20%;--r0:8deg;--r1:20deg;--tx:20%;--ty:-16%;--s:1.2;--d:20s;--dl:-7s}
@keyframes wm-deriva{from{transform:translate3d(0,0,0) rotate(var(--r0)) scale(1)}to{transform:translate3d(var(--tx),var(--ty),0) rotate(var(--r1)) scale(var(--s))}}
.wm-sky>i{position:absolute;width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);border-radius:50%;background:var(--blanco);opacity:calc(var(--o) * .2);animation:wm-titila var(--d) ease-in-out var(--dl) infinite}
@keyframes wm-titila{50%{opacity:var(--o)}}
.wm-stage:not([data-wm-state="run"]) .wm-aurora *{animation-play-state:paused}
@media (min-width:720px) and (pointer:fine){.wm-aurora>i{mix-blend-mode:screen}}

/* Big Bang: el contenido entra después del destello (opacidad y 12 px, 320 ms) */
.wm-stage[data-wm-phase="pre"] .wm-reveal>*{opacity:0;transform:translateY(12px)}
.wm-stage[data-wm-phase="reveal"] .wm-reveal>*{transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease)}
.wm-stage[data-wm-phase="reveal"] .wm-reveal>:nth-child(2){transition-delay:90ms}
.wm-stage[data-wm-phase="reveal"] .wm-reveal>:nth-child(3){transition-delay:180ms}

/* Botón de pausa: va en todos los fondos (WCAG 2.2.2) */
.wm-stage>.wm-toggle{position:absolute;z-index:2;right:max(12px,env(safe-area-inset-right));bottom:12px;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--rule-noche);background:var(--wm-boton);color:var(--blanco);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wm-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wm-toggle:focus-visible{outline:3px solid var(--cometa);outline-offset:2px}
.wm-stage[data-wm-state="reduce"]>.wm-toggle,.wm-stage[data-wm-state="mobile-still"]>.wm-toggle,.wm-stage[data-wm-state="error"]>.wm-toggle{display:none}
.wm-stage[data-wm-phase="pre"]>.wm-toggle{visibility:hidden}

/* Reducir movimiento: solo aplica si el html no lleva data-motion="always" */
.wm-stage[data-wm-state="reduce"] .wm-aurora *{animation:none}
.wm-stage[data-wm-state="reduce"] .wm-sky>i{opacity:calc(var(--o) * .75)}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion]) .wm-layer{transition:none}
  html:not([data-motion]) .wm-stage .wm-aurora>i,html:not([data-motion]) .wm-stage .wm-sky>i{animation:none}
  html:not([data-motion]) .wm-stage .wm-sky>i{opacity:calc(var(--o) * .75)}
  html:not([data-motion]) .wm-stage[data-wm-phase] .wm-reveal>*{opacity:1;transform:none}
}
/* /WM-CSS */

/* ============ 8. SECCIONES ============ */

/* — Barra de maqueta (solo v0.x; se retira al publicar) */
.mock-bar{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:6px var(--gutter);background:var(--cometa);color:var(--tinta);font-size:var(--fs-cap);line-height:1.3}
.mock-bar p{margin:0;max-width:none}
.mock-bar b{font:400 12px/1 var(--font-util);letter-spacing:.06em;text-transform:uppercase}
.mock-toggle{flex:none;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--tinta);background:transparent;font-weight:700;font-size:var(--fs-cap);cursor:pointer}
.mock-toggle[aria-pressed="true"]{background:var(--tinta);color:var(--cometa)}

/* — Encabezado: transparente sobre la portada, blanco después */
.site-header{position:sticky;top:0;z-index:50;height:calc(var(--hdr-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);color:var(--fg)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);border-bottom:1px solid var(--rule);opacity:0;transition:opacity var(--t-move) var(--ease)}
.site-header[data-mode="dia"]::before,.site-header.is-scrolled::before{opacity:1}  /* noche sólida al bajar dentro de la portada; blanco después */
.hdr{display:flex;align-items:center;gap:var(--s4);height:var(--hdr-h)}
.hdr-logo{position:relative;display:block;width:84px;height:40px;flex:none;margin-right:auto}
.hdr-logo svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--t-move) var(--ease)}
.site-header[data-mode="noche"] .logo-dia,.site-header[data-mode="dia"] .logo-noche{opacity:0}
.hdr-nav{display:none}
.hdr-cta{opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease),visibility 0s linear var(--t-move)}
.site-header.cta-on .hdr-cta{opacity:1;transform:none;visibility:visible;transition-delay:0s}

/* — Portada */
.hero{margin-top:calc(-1 * (var(--hdr-h) + env(safe-area-inset-top)));padding:calc(var(--hdr-h) + env(safe-area-inset-top) + 20px) 0 72px}
.hero>[data-hero-top]{position:absolute;top:calc(var(--hdr-h) + 24px);left:0;width:1px;height:1px}
.hero-grid{display:grid;gap:44px;align-items:center}
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-12% -14%;background:radial-gradient(closest-side,var(--wm-velo),transparent);pointer-events:none}
.hero h1{max-width:13ch}
.h1-b{display:block;font-size:.6em;line-height:1.02;margin-top:.22em;max-width:17ch}  /* segunda frase del titular: la prueba para mamá, un escalón abajo */
.hero-sub{font-size:var(--fs-lead);line-height:1.5;color:var(--fg-2);max-width:34ch;margin:var(--s5) 0 var(--s5)}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s2)}
.hero-proof{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s5);color:var(--fg-2);font-size:var(--fs-small);text-decoration:none;min-height:44px}
.hero-proof .tp{color:var(--blanco)}
.hero-proof b{font:400 17px/1 var(--font-util);color:var(--blanco)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;color:var(--cometa)}
.stars svg{--ico-fill:currentColor}
.hero-visual{position:relative;width:min(100%,520px);justify-self:center;padding:0 9% 36px 0}
.hero-foto{aspect-ratio:1/1}
.hero-foto img{object-position:50% 38%}
.hero-visual>.hero-wu{position:absolute;right:0;bottom:0;width:30%;max-width:170px;z-index:2}
.hero-wu img{width:100%}

/* — Foto sticker [PROPUESTA]: borde blanco como el logo sticker; gira de −8° a 8° como él */
.sticker{position:relative;background:var(--blanco);padding:var(--sticker-pad);border-radius:calc(var(--r-md) + var(--sticker-pad));box-shadow:var(--sombra);transform:rotate(var(--tilt,0deg))}
.sticker>img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}

/* — Sombra de contacto bajo los personajes (UW-BB-001 §06) */
.pj-pie{position:relative}
.pj-pie::after{content:"";position:absolute;left:18%;right:18%;bottom:-6px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--veil-soft),transparent);z-index:-1}
[data-mode="noche"] .pj-pie::after{background:radial-gradient(closest-side,var(--wm-velo),transparent)}

/* — Tranquilidad: foto ancha y tarjetas que se apilan al hacer scroll */
.tranqui-foto{aspect-ratio:16/11;margin-bottom:var(--s7)}
.tranqui-foto img{object-position:50% 30%}
.stack{list-style:none;display:grid;gap:var(--s4);padding-bottom:var(--s5)}
.stack-card{position:sticky;top:calc(var(--hdr-h) + 16px + var(--i) * 18px);display:grid;gap:var(--s3);align-content:start;min-height:212px;padding:var(--s5);background:var(--card);border:1.5px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--sombra)}
.stack-card p{color:var(--fg-2);margin:0}
.cifra-big{display:flex;align-items:baseline;gap:10px;margin:0}
.cifra-big b{font:400 clamp(3.2rem,2.6rem + 3vw,4.6rem)/.9 var(--font-util);color:var(--azul);font-variant-numeric:tabular-nums}
.cifra-big span{font:800 var(--fs-h3)/1.2 var(--font-body)}

/* — El salón: carrusel de casitas y mosaico de aventura */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}
.rail-head p{margin:4px 0 0;color:var(--fg-2)}
.rail-nav{display:flex;align-items:center;gap:var(--s2);flex:none}
.rail-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:var(--stroke) solid var(--azul);color:var(--azul);cursor:pointer;padding:0}
.rail-btn .ic{width:20px;height:20px;color:currentColor}
.rail-btn[data-dir="-1"] .ic{transform:rotate(180deg)}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-count{font:400 13px/1 var(--font-util);letter-spacing:.06em;min-width:3.4em;text-align:center}
.rail{--rail-pad:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));display:flex;gap:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-pad);padding:12px var(--rail-pad) 28px;scrollbar-width:none;list-style:none;margin:0}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline-offset:-3px}
.rail-card{flex:0 0 min(74vw,300px);scroll-snap-align:start;transition:transform .5s var(--ease-salto)}
.rail-card:nth-child(odd){--tilt:-2deg}.rail-card:nth-child(even){--tilt:2deg}
.js .rail-card:not(.is-active){transform:scale(.94) rotate(var(--tilt))}
.rail-img{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--azul-tint);box-shadow:var(--sombra)}
.rail-img img{width:100%;height:100%;object-fit:cover}
.rail-name{font:400 14px/1.2 var(--font-util);letter-spacing:.08em;text-transform:uppercase;margin:var(--s4) 0 4px}
.rail-card p{font-size:var(--fs-small);color:var(--fg-2);margin:0}
.rail-sub{margin-top:var(--s8)}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s3)}
.bento figure{display:grid;gap:10px;align-content:start}
.bento-media{aspect-ratio:var(--ar,1);border-radius:var(--r-md);overflow:hidden;background:var(--azul-tint)}
.bento-media img{width:100%;height:100%;object-fit:cover}
.bento figcaption{font-weight:800;font-size:var(--fs-small);line-height:1.3;display:flex;gap:8px;align-items:flex-start}
.bento figcaption small{display:block;font-weight:400;color:var(--fg-2)}
.bento figcaption .gl{width:22px;height:22px;margin-top:-1px}
.bento-a{grid-column:1/-1;--ar:16/10}
.also{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);list-style:none}

/* — Marcadores de foto pendiente [ASSET] */
.ph{position:relative;display:grid;place-items:center;align-content:center;gap:10px;padding:var(--s4);text-align:center;color:var(--nube-dim);font-size:var(--fs-cap);line-height:1.35}
.ph .ic{width:32px;height:32px;color:var(--cometa)}
.ph b{display:block;font:400 12px/1.2 var(--font-util);letter-spacing:.08em;text-transform:uppercase;color:var(--blanco)}

/* — Banda de la pandilla (Aurora + desfile) */
.band-pandilla{padding:clamp(56px,9vw,96px) 0 clamp(28px,5vw,48px)}
.band-pandilla .sub{color:var(--fg-2);font-size:var(--fs-lead);max-width:34ch;margin:var(--s4) 0 0}
.band-pandilla>.pandilla-planeta{position:absolute;z-index:0;left:50%;bottom:0;width:max(170%,1100px);aspect-ratio:1;border-radius:50%;background:var(--grd-planeta);opacity:.55;transform:translate(-50%,86%);pointer-events:none}
.desfile{margin-top:var(--s5);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,var(--tinta) 6%,var(--tinta) 94%,transparent);mask:linear-gradient(90deg,transparent,var(--tinta) 6%,var(--tinta) 94%,transparent)}
.desfile-track{display:flex;width:max-content;padding:18px 0 6px;list-style:none;animation:desliza var(--loop) linear infinite}
.desfile-track>li{padding-right:clamp(18px,4vw,40px)}  /* separación por elemento, no gap: el loop a −50% queda exacto */
.desfile.is-held .desfile-track,.desfile:focus-within .desfile-track,.wm-stage[data-wm-state="user"] .desfile-track,.wm-stage[data-wm-state="offscreen"] .desfile-track,.wm-stage[data-wm-state="hidden"] .desfile-track{animation-play-state:paused}
.pj-btn{display:grid;justify-items:center;gap:8px;padding:0;margin:0;background:none;border:0;cursor:pointer;color:var(--nube-dim)}
.pj-btn .pj-pie img{height:clamp(112px,26vw,168px);width:auto;transform-origin:50% 100%}
.pj-btn.is-saluda .pj-pie img{animation:salto 1s var(--ease-salto) 1}
.pj-name{font:400 12px/1 var(--font-util);letter-spacing:.08em;text-transform:uppercase}
.pj-btn:focus-visible{outline-offset:6px}
.band-pandilla>.wm-toggle{top:12px;bottom:auto}  /* arriba: abajo a la derecha vive el WhatsApp flotante */
.pj-say{min-height:3.2em;margin:var(--s3) 0 0;color:var(--blanco);font-weight:600;max-width:40ch}
.pj-say b{font:400 13px/1 var(--font-util);letter-spacing:.08em;text-transform:uppercase;color:var(--cometa);margin-right:6px}
@keyframes desliza{to{transform:translateX(-50%)}}
@keyframes salto{0%,100%{transform:translateY(0)}45%{transform:translateY(-10%)}60%{transform:translateY(0)}72%{transform:translateY(-3%)}}
@keyframes gira{to{transform:rotate(360deg)}}

/* — Todo incluido */
.incluye-grid{display:grid;gap:var(--s7)}
.dur{margin-top:var(--s5)}
.list-h{display:flex;align-items:center;gap:10px;margin:var(--s7) 0 var(--s4)}
.check-list{list-style:none;display:grid;gap:var(--s3)}
.check-list li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.check-list .ic{width:22px;height:22px;color:var(--verde-deep);margin-top:2px}
.extra-list{list-style:none;display:grid}
.extra-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--rule)}
.extra-list li:last-child{border-bottom:0}
.extra-list b{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.extra-list small{display:block;color:var(--fg-2);font-size:var(--fs-cap)}
.incluye-foto{aspect-ratio:4/5;width:min(100%,460px);justify-self:center}

/* — Paquetes: cotizador */
.cotizador{display:grid;gap:var(--s6);max-width:760px;padding:clamp(20px,5vw,40px)}
.cot-opts,.cot-side{display:grid;gap:var(--s6);align-content:start;min-width:0}
.cot-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opt-note{margin:10px 0 0;font-size:var(--fs-cap);color:var(--fg-2);min-height:1.4em}
/* Resultado: la cifra va sobre Lima pop; el detalle, sobre superficie lisa (UW-BB-001: sin texturas detrás de texto de cuerpo) */
.cot-result{border-radius:var(--r-md);overflow:hidden;border:2px solid var(--azul-line);background:var(--card)}
.cot-band{padding:var(--s4) var(--s5) var(--s3)}
.cot-band .label{margin:0}
.cot-info{display:grid;gap:2px;padding:var(--s4) var(--s5) var(--s5)}
.cot-price{font:400 clamp(2.8rem,2.2rem + 3vw,3.8rem)/1 var(--font-util);font-variant-numeric:tabular-nums;margin:8px 0 6px;letter-spacing:.01em}
.cot-detail{font-weight:800;margin:0}
.cot-pp,.cot-alt{font-size:var(--fs-small);margin:0}
.cot-alt{margin-top:8px;font-weight:600;color:var(--azul-deep)}
.cot-alt:empty{display:none}
.cot-nota{font-size:var(--fs-small);color:var(--fg-2);margin:0}
.menus{max-width:760px;margin-top:var(--s5)}
.menus>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:12px 20px;border-radius:var(--r-md);background:var(--card);border:1.5px solid var(--rule);font-weight:800;cursor:pointer;list-style:none}
.menus>summary::-webkit-details-marker{display:none}
.menus>summary .ic{transition:transform var(--t-move) var(--ease)}
.menus[open]>summary .ic{transform:rotate(180deg)}
.menus-body{display:grid;gap:var(--s5);padding:var(--s5) 4px 0}
.menus-body h4{font:400 var(--fs-label)/1.2 var(--font-util);letter-spacing:.08em;text-transform:uppercase;color:var(--azul-deep);margin:0 0 6px}
.menus-body p{margin:0;color:var(--fg-2);font-size:var(--fs-small)}

/* — Reseñas */
.resenas-grid{display:grid;gap:var(--s7)}
.rating-num{display:flex;align-items:center;gap:var(--s4);margin:var(--s5) 0 var(--s2)}
.rating-num b{font:400 clamp(4.2rem,3.2rem + 5vw,6rem)/.85 var(--font-util);color:var(--azul);font-variant-numeric:tabular-nums}
.rating-num .stars svg{width:24px;height:24px;color:var(--azul)}
.rating-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 var(--s6)}
.rating-src .tp{color:var(--tinta)}
.notes{display:grid;gap:var(--s4)}
.note{margin:0;padding:var(--s5);background:var(--card);border:2px dashed var(--azul-line);border-radius:var(--r-md);transform:rotate(var(--tilt,0deg))}
.note p{font-size:var(--fs-lead);font-weight:600;color:var(--fg-2);margin:0 0 var(--s3)}
.note footer{font-size:var(--fs-small);color:var(--fg-3)}

/* — Preguntas */
.faq{display:grid;max-width:820px;margin-top:var(--s6)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;padding:16px 0;font:800 var(--fs-h3)/1.25 var(--font-body);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform var(--t-move) var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq-a{padding:0 0 var(--s5);color:var(--fg-2)}
.faq-a p{margin:0 0 var(--s3)}

/* — Así es tu visita */
.visita-grid{display:grid;gap:var(--s7);align-items:center}
.visita-list{list-style:none;display:grid;gap:var(--s5);margin-top:var(--s6)}
.visita-list li{display:grid;grid-template-columns:52px 1fr;gap:var(--s4);align-items:center}
.visita-list p{margin:0}
.donde{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)}
.donde p{margin:0 0 var(--s3)}
.sello{position:relative;width:min(240px,60vw);aspect-ratio:1;justify-self:center}
.sello-ring{position:absolute;inset:0;width:100%;height:100%;color:var(--azul);animation:gira 24s linear infinite}
.sello-iso{position:absolute;inset:27%;width:46%;height:auto}

/* — Agenda: firma Rayas Wuju + compositor */
.sec-agenda{padding:clamp(56px,9vw,112px) 0}
.agenda-grid{display:grid;gap:var(--s5);justify-items:start}
.agenda-head{display:flex;align-items:flex-end;gap:var(--s3)}
.firma-title{display:inline-block;background:var(--blanco);color:var(--tinta);border-radius:var(--r-md);padding:10px 20px 12px;transform:rotate(-2deg)}
.agenda-wu{width:96px;flex:none}
.compositor{width:100%;max-width:580px;padding:clamp(20px,5vw,32px);background:var(--blanco);color:var(--tinta)}
.cmp-top{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
.cmp-steps{display:flex;align-items:center;gap:8px;margin:0;font:400 12px/1 var(--font-util);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.cmp-steps i{display:block;width:28px;height:6px;border-radius:var(--r-pill);background:var(--linea)}
.cmp-steps i.on{background:var(--azul)}
.cmp-step{display:grid;gap:var(--s5)}
.cmp-step h3{outline:none}
.cmp-prefill{margin:0;padding:12px 14px;border-radius:var(--r-sm);background:var(--azul-tint);color:var(--azul-deep);font-size:var(--fs-small);font-weight:600}
.cmp-aviso{margin:4px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--nube);border:1.5px solid var(--azul-line);font-size:var(--fs-small)}
.cmp-dia{color:var(--azul);font-weight:700}
.agenda-slot{display:grid;place-items:center;gap:var(--s3);min-height:240px;padding:var(--s5);border:2px dashed var(--azul-line);border-radius:var(--r-md);background:var(--nube);text-align:center;color:var(--fg-2);font-size:var(--fs-small)}
.agenda-slot .ic{width:36px;height:36px;color:var(--azul)}
.cmp-legal{font-size:var(--fs-cap);color:var(--fg-3);margin:0}

/* — Botón flotante de WhatsApp: único lugar con el verde oficial (UW-BB-001 §10) */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--tp-whatsapp);color:var(--tinta);border:var(--stroke) solid var(--azul);box-shadow:4px 4px 0 var(--azul);text-decoration:none;transition:transform var(--t-move) var(--ease-salto),opacity var(--t-fast) var(--ease)}
.wa-float .tp{width:28px;height:28px}
.wa-float.is-off{transform:translateY(130%) scale(.6);opacity:0;pointer-events:none}
.wa-float:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--azul)}

/* — Pie */
.site-footer{padding:clamp(56px,9vw,96px) 0 calc(var(--s7) + env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:var(--s7)}
.foot-logo{width:min(220px,62%);height:auto}
.foot-grid p{color:var(--fg-2)}
.foot-list{list-style:none;display:grid;gap:var(--s2)}
.foot-list a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--blanco);text-decoration:none;font-weight:600}
.foot-list .tp{color:var(--cometa)}
.foot-grid .label{margin:0 0 var(--s3);color:var(--fg-2)}
.foot-legal{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule);font-size:var(--fs-cap);color:var(--fg-2)}
.foot-legal a{color:var(--blanco)}

/* — Páginas internas (gracias, 404, privacidad) */
.bg-noche{background:var(--noche)}
.under-hdr{margin-top:calc(-1 * (var(--hdr-h) + env(safe-area-inset-top)))}
.page-min{min-height:100vh;min-height:100dvh;display:grid;align-content:center;padding:calc(var(--hdr-h) + 40px) 0 80px}
.legal{max-width:70ch}
.gracias .wm-reveal{max-width:44rem}
.gracias h1{max-width:12ch}
.gracias-info{display:grid;gap:var(--s3);margin-top:var(--s6);color:var(--fg-2)}
.gracias-info b{color:var(--blanco)}
.gracias-info .btn-row{margin-top:var(--s3)}
.gracias-wu{width:96px;margin-top:var(--s7)}
.legal h2{font-size:clamp(1.8rem,1.4rem + 2vw,2.6rem);margin:var(--s7) 0 var(--s3)}

/* ============ 9. MOVIMIENTO DE PÁGINA ============
   Entrada de bloques: opacidad y 12 px, 320 ms (UW-BB-001 §08).
   Fotos sticker: caen con el salto del logo (--ease-salto); el rebote nunca va en texto.
   Solo transform y opacity; disparado por IntersectionObserver, una sola vez. */
.js [data-reveal]{transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(12px)}
.js [data-sticker]{transition:transform .75s var(--ease-salto),opacity .3s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-sticker]:not(.is-in){opacity:0;transform:translateY(32px) rotate(calc(var(--tilt,0deg) - 9deg)) scale(.9)}
.js [data-salta]:not(.is-in){opacity:0;transform:translateY(24%) scale(.7)}
.js [data-salta]{transform-origin:50% 100%;transition:transform .8s var(--ease-salto),opacity .25s var(--ease)}
.hdr-logo svg{transform-origin:50% 100%}
.js .site-header .hdr-logo .logo-noche{animation:salto 1.1s var(--ease-salto) .2s 1 both}

/* ============ 10. MODO REVISIÓN (maqueta): datos por validar con Wuju ============ */
.pend{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--azul-tint);color:var(--azul-deep);font-weight:700;font-size:.88em;line-height:1.5}
[data-mode="noche"] .pend{background:var(--noche-2);color:var(--cometa)}
.is-revision [data-validar]{outline:2px dashed var(--aviso);outline-offset:3px;border-radius:4px}
.is-revision [data-validar]::after{content:"Validar: " attr(data-validar);display:inline-block;margin:2px 0 0 6px;padding:2px 7px;border-radius:6px;background:var(--aviso);color:var(--tinta);font:700 11px/1.35 var(--font-body);letter-spacing:0;text-transform:none;vertical-align:middle;white-space:normal;max-width:30ch}

/* ============ 11. ESCRITORIO (≥720 px y ≥1024 px) ============ */
@media (min-width:720px){
  :root{--hdr-h:72px}
  .hdr-logo{width:100px;height:46px}
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento-a{grid-column:span 2;grid-row:span 2;--ar:auto}
  .bento-a .bento-media{height:100%;min-height:420px}
  .incluye-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  .resenas-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes .note:first-child{grid-column:1/-1;max-width:30rem}
  .visita-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .foot-grid{grid-template-columns:1.3fr 1fr 1fr}
  .rail-card{flex-basis:300px}
}
@media (min-width:960px){
  .hdr-nav{display:flex;gap:28px;margin-right:12px}
  .hdr-nav a{color:var(--fg);font-weight:600;font-size:15px;text-decoration:none;padding:10px 0}
  .hdr-nav a[aria-current]{color:var(--accent-ink);font-weight:800;text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
  .hero{padding-bottom:96px}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
  .hero{padding-top:calc(var(--hdr-h) + 32px)}
  .hero h1{max-width:15ch}
  .hero-visual{width:min(100%,470px)}
  .hero-foto{aspect-ratio:1/1}
  .hero-visual>.hero-wu{max-width:180px}
  .cotizador{max-width:1000px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s7);align-items:start}
  .cot-side{position:sticky;top:calc(var(--hdr-h) + 24px)}
  .tranqui-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:start}
  .tranqui-grid .tranqui-foto{position:sticky;top:calc(var(--hdr-h) + 32px);margin:0}
  .stack-card{position:relative;top:auto;min-height:0}
  .faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  .faq-wrap>h2{position:sticky;top:calc(var(--hdr-h) + 32px)}
  .faq-wrap .faq{margin-top:0}
  .agenda-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:var(--s7)}
  .agenda-head{flex-direction:column;align-items:flex-start;gap:var(--s5)}
  .agenda-wu{width:150px}
  .compositor{justify-self:end}
}
@media (hover:hover) and (pointer:fine){
  .btn-primario:hover,.btn-secundario:hover,.btn-wa:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--edge)}
  .btn-ghost:hover{background:var(--hover-bg);text-decoration-thickness:3px}
  .hdr-nav a:hover{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
  .chip-radio:hover input:not(:disabled):not(:checked)+.chip{border-color:var(--azul)}
  .opt-card:hover input:not(:checked)+span{border-color:var(--azul)}
  .rail-btn:not(:disabled):hover{background:var(--azul-tint)}
  .wa-float:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--azul)}
  .input:hover{border-color:var(--azul)}
}

/* ============ 12. MOVIMIENTO REDUCIDO ============
   Los fondos animados se mueven igual (html data-motion="always", decisión del 2 de octubre) y llevan pausa.
   Todo lo demás queda quieto: entradas, stickers, carrusel, desfile, sello y saltos. */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-sticker],.js [data-salta]{opacity:1!important;transition:none!important}
  .js [data-reveal]{transform:none!important}
  .js [data-sticker]{transform:rotate(var(--tilt,0deg))!important}
  .js [data-salta]{transform:none!important}
  .desfile-track{animation:none}
  .desfile{overflow-x:auto;scrollbar-width:none}
  .sello-ring,.js .site-header .hdr-logo .logo-noche,.pj-btn.is-saluda .pj-pie img{animation:none}
  .rail-card{transition:none}
  .js .rail-card:not(.is-active){transform:none}
  .wa-float,.btn,.hdr-cta{transition:none}
}