/* Atineo · tokens.css · generado desde el Manual UI/UX v2. No editar a mano. */
:root {
  /* Color */
  --at-color-marca: #9C1E7A; /* Fucsia · Botón principal, selección, marca */
  --at-color-marca-hover: #85196A; /* Fucsia oscuro · Hover y presionado del principal */
  --at-color-marca-claro: #C93FA3; /* Fucsia claro · Acentos sobre fondo tinta */
  --at-color-marca-papel: #F6D9EA; /* Rosa papel · Chips activos, fondos de selección */
  --at-color-dato: #3C6EF5; /* Azul · Gráficas, bordes y textos grandes de dinero */
  --at-color-dato-fuerte: #2E56C8; /* Azul fuerte · Botones de pago y texto azul pequeño */
  --at-color-tinta: #2D0E24; /* Tinta · Texto principal, tarjeta de bolsillo */
  --at-color-texto-2: #5C4354; /* Texto secundario · Descripciones, metadatos */
  --at-color-texto-3: #8A6B80; /* Texto terciario · Solo 18 px o más, o decorativo */
  --at-color-borde: #EEDFE8; /* Borde · Divisores y tarjetas */
  --at-color-borde-campo: #E8DCE5; /* Borde de campo · Campos y botón secundario */
  --at-color-fondo: #FDF7FB; /* Crema · Fondo de todas las pantallas */
  --at-color-superficie: #FFFFFF; /* Blanco · Tarjetas sobre crema */
  --at-color-ok: #2F6B45; /* Verde · Texto de éxito, entregado */
  --at-color-ok-fondo: #DDF2E4; /* Verde fondo · Fondo de estado listo */
  --at-color-aviso: #8A5A16; /* Ámbar · Texto de pendiente */
  --at-color-aviso-fondo: #FBEBD6; /* Ámbar fondo · Fondo de pendiente */
  --at-color-error: #A3281E; /* Rojo · Errores y novedades */
  --at-color-error-fondo: #FBE3E1; /* Rojo fondo · Fondo de error */
  --at-color-dato-fondo: #E3EAFD;
  --at-color-neutro-fondo: #F1E9EE;
  --at-color-hover-lista: #F6EAF1;
  --at-color-deshabilitado-fondo: #F1E6ED;
  --at-color-deshabilitado-texto: #B39AAB;
  --at-color-velo: rgba(45, 14, 36, 0.38);

  /* Tipografía */
  --at-font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --at-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --at-font-mano: 'Caveat', cursive;
  --at-texto-display: 800 33px/1.04 var(--at-font-sans);
  --at-texto-titulo-1: 800 28px/1.08 var(--at-font-sans);
  --at-texto-cifra: 800 36px/1 var(--at-font-sans);
  --at-texto-titulo-2: 700 17px/1.3 var(--at-font-sans);
  --at-texto-cuerpo-fuerte: 600 15px/1.4 var(--at-font-sans);
  --at-texto-cuerpo: 400 14.5px/1.5 var(--at-font-sans);
  --at-texto-meta: 500 12.5px/1.45 var(--at-font-sans);
  --at-texto-etiqueta: 700 11px/1.3 var(--at-font-sans);
  --at-texto-web-display: 800 56px/1.02 var(--at-font-sans);
  --at-texto-web-titulo-1: 800 40px/1.06 var(--at-font-sans);
  --at-texto-web-titulo-2: 800 26px/1.15 var(--at-font-sans);
  --at-texto-web-cuerpo: 400 17px/1.6 var(--at-font-sans);
  --at-texto-panel-tabla: 500 13.5px/1.45 var(--at-font-sans);
  --at-texto-mono: 500 12px/1.4 var(--at-font-mono);
  --at-tracking-titulo: -0.015em;
  --at-tracking-etiqueta: 0.1em;

  /* Espacio (base 4) */
  --at-esp-1: 4px; /* Ícono ↔ texto pequeño */
  --at-esp-2: 8px; /* Dentro de chips y filas */
  --at-esp-3: 12px; /* Entre tarjetas de una lista */
  --at-esp-4: 16px; /* Padding de campo y fila */
  --at-esp-5: 20px; /* Padding de tarjeta */
  --at-esp-6: 24px; /* Margen de pantalla web móvil */
  --at-esp-7: 26px; /* Margen lateral app (390 px) */
  --at-esp-8: 32px; /* Entre bloques */
  --at-esp-9: 44px; /* Entre secciones de pantalla */
  --at-esp-10: 72px; /* Entre secciones web */

  /* Radios */
  --at-radio-s: 12px;
  --at-radio-m: 16px;
  --at-radio-l: 22px;
  --at-radio-xl: 28px;
  --at-radio-hoja: 30px;
  --at-radio-capsula: 999px;

  /* Elevación */
  --at-elev-0: none;
  --at-elev-1: 0 10px 24px -14px rgba(45,14,36,0.35);
  --at-elev-2: 0 -12px 40px -16px rgba(45,14,36,0.35);
  --at-elev-3: 0 18px 40px -18px rgba(45,14,36,0.5);
  --at-foco: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--at-color-dato-fuerte);

  /* Movimiento */
  --at-dur-rapida: 120ms; /* Presionar, hover, cambio de color */
  --at-dur-base: 200ms; /* Velo, cerrar hoja, fundidos */
  --at-dur-media: 320ms; /* Subir, entrar, abrir hoja */
  --at-dur-lenta: 480ms; /* Pop, confirmaciones */
  --at-dur-sello: 600ms; /* Sello "Atinaste" */
  --at-dur-celebracion: 900ms; /* Moneda, secuencias largas */
  --at-ease-salida: cubic-bezier(0.2, 0.8, 0.2, 1);
  --at-ease-entrada: cubic-bezier(0.4, 0, 1, 1);
  --at-ease-estandar: cubic-bezier(0.4, 0, 0.2, 1);
  --at-ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Capas */
  --at-z-base: 0;
  --at-z-pegajoso: 10;
  --at-z-pestanas: 20;
  --at-z-velo: 39;
  --at-z-hoja: 40;
  --at-z-modal: 50;
  --at-z-toast: 60;

  /* Layout */
  --at-margen-app: 26px;
  --at-alto-pestanas: 64px;
  --at-alto-cta: 52px;
  --at-ancho-menu-panel: 248px;
  --at-ancho-contenido-web: 1200px;
  --at-tactil-min: 44px;
  --at-ancho-modal: 520px;
}




/* Atineo · motion.css · keyframes + utilidades. Requiere tokens.css */
@keyframes atSubir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes atPop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes atEntrar { from { transform: translateX(100%); } to { transform: none; } }
@keyframes atSalir { from { transform: none; opacity: 1; } to { transform: translateX(-30%); opacity: 0.4; } }
@keyframes atTino { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes atPensar { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-6px); opacity: 1; } }
@keyframes atLatir { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes atConfeti { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(190px) rotate(420deg); opacity: 0; } }
@keyframes atLlenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes atCampana { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes atMoneda { 0% { transform: translateY(-64px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(6px); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes atRespirar { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes atHoja { from { transform: translateY(100%); } to { transform: none; } }
@keyframes atVelo { from { opacity: 0; } to { opacity: 1; } }
@keyframes atAgitar { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes atSello { 0% { transform: scale(0.2); opacity: 0; } 55% { transform: scale(1.14); opacity: 1; } 78% { transform: scale(0.96); } 100% { transform: scale(1); opacity: 1; } }
@keyframes atFundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes atVolverEntra { from { transform: translateX(-30%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes atVolverSale { from { transform: none; } to { transform: translateX(100%); } }
@keyframes atPestana { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes atCheck { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } /* path con stroke-dasharray: 24 */
@keyframes atGuardar { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes atAviso { 0% { transform: translateY(-130%); } 15%, 85% { transform: none; } 100% { transform: translateY(-130%); } }
@keyframes atTirar { 0%, 100% { transform: translateY(0); } 25%, 70% { transform: translateY(52px); } }
@keyframes atGirar { to { transform: rotate(360deg); } }
@keyframes atDescartar { to { transform: translateX(130%) rotate(14deg); opacity: 0; } }
@keyframes atAcercar { from { transform: scale(0.94) translateY(10px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes atVoltear { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } } /* padre: perspective 800px; caras: backface-visibility hidden */
@keyframes atTapa { 0% { transform: none; } 40% { transform: translateY(-22px) rotate(-14deg); } 100% { transform: translateY(-16px) rotate(-10deg); } }
@keyframes atCamino { from { transform: translateX(0); } to { transform: translateX(var(--at-camino-largo, 180px)); } }
@keyframes atGrabar { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes atCuenta { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--at-cuenta-perimetro, 151); } } /* duración = largo del video */

.at-anim-subir { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.at-anim-entrar { animation: atEntrar var(--at-dur-media) var(--at-ease-estandar) both; }
.at-anim-hoja { animation: atHoja var(--at-dur-media) var(--at-ease-salida) both; }
.at-anim-pop { animation: atPop var(--at-dur-lenta) var(--at-ease-rebote) both; }
.at-anim-sello { animation: atSello var(--at-dur-sello) var(--at-ease-rebote) both; }
.at-anim-confeti { animation: atConfeti 1400ms var(--at-ease-entrada) both; }
.at-anim-pensar { animation: atPensar 1200ms var(--at-ease-estandar) infinite both; }
.at-anim-respirar { animation: atRespirar 1600ms var(--at-ease-estandar) infinite both; }
.at-anim-llenar { animation: atLlenar 800ms var(--at-ease-salida) both; }
.at-anim-moneda { animation: atMoneda var(--at-dur-celebracion) var(--at-ease-estandar) both; }
.at-anim-campana { animation: atCampana 700ms var(--at-ease-estandar) both; }
.at-anim-latir { animation: atLatir 1800ms var(--at-ease-salida) infinite both; }
.at-anim-tino { animation: atTino 3200ms var(--at-ease-estandar) infinite both; }
.at-anim-agitar { animation: atAgitar 400ms var(--at-ease-estandar) both; }
.at-anim-volver { animation: atVolverEntra var(--at-dur-media) var(--at-ease-estandar) both; }
.at-anim-pestana { animation: atPestana var(--at-dur-base) var(--at-ease-salida) both; }
.at-anim-check { animation: atCheck var(--at-dur-media) var(--at-ease-salida) both; }
.at-anim-guardar { animation: atGuardar var(--at-dur-lenta) var(--at-ease-rebote) both; }
.at-anim-aviso { animation: atAviso 2600ms var(--at-ease-salida) both; }
.at-anim-pasos { animation: atLlenar var(--at-dur-media) var(--at-ease-salida) both; }
.at-anim-refrescar { animation: atTirar 1400ms var(--at-ease-estandar) both; }
.at-anim-descartar { animation: atDescartar var(--at-dur-media) var(--at-ease-entrada) both; }
.at-anim-voltear { animation: atVoltear var(--at-dur-sello) var(--at-ease-estandar) both; }
.at-anim-abrir { animation: atTapa var(--at-dur-celebracion) var(--at-ease-rebote) both; }
.at-anim-camino { animation: atCamino 2400ms var(--at-ease-estandar) infinite both; }
.at-anim-grabar { animation: atCuenta 30000ms var(--at-ease-estandar) both; }

/* Escalonado: style="--at-i: 2" en cada hijo */
.at-stagger > * { animation-delay: calc(var(--at-i, 0) * 60ms); }

/* Transiciones de interacción */
.at-presionable { transition: transform var(--at-dur-rapida) var(--at-ease-estandar), background-color var(--at-dur-rapida) var(--at-ease-estandar); }
.at-presionable:active { transform: scale(0.97); }

/* Movimiento reducido: sin desplazamiento ni bucles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .at-anim-subir, .at-anim-hoja, .at-anim-sello { animation: atFundido var(--at-dur-rapida) linear both !important; }
  .at-confeti { display: none !important; }
}
/*
 * El sitio publico de Atineo.
 *
 * Los valores no son de gusto: salen del prototipo
 * (`handoff_atineo_web/fuente/Atineo Web - Publica.dc.html`) y de
 * `lib/features/web/tokens_web.dart`, que los fija al pixel. La paleta, los
 * radios, las tipografias y las animaciones son los mismos numeros.
 *
 * Las fuentes y el logo se sirven desde `/sitio/` (`resources/sitio/`), recortadas
 * a latin en woff2. Sin ellas la pagina se lee igual, pero no se parece a Atineo:
 * el 17-09-2026 salio asi a produccion y nadie lo reconocia como la misma marca.
 */

@font-face {
  font-family: "Nunito";
  src: url("/sitio/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/sitio/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/sitio/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /*
   * UI/UX v4: cada variable apunta a un token `--at-*` del handoff
   * (`resources/css/at/tokens.css`, que `EstaticosController::hoja()` pone antes
   * que esta hoja). Los nombres viejos se conservan porque cada pagina los usa
   * y porque `hombres.css` re-temiza la marca sobrescribiendolos.
   */
  /* Marca */
  --fucsia: var(--at-color-marca);
  --fucsia-hover: var(--at-color-marca-hover);
  --fucsia-claro: var(--at-color-marca-claro);
  --rosa-papel: var(--at-color-marca-papel);
  --rosa-suave: var(--at-color-neutro-fondo);

  /* Tinta y fondos */
  --tinta: var(--at-color-tinta);
  --tinta-caja: var(--at-color-tinta);
  --crema: var(--at-color-fondo);
  --blanco: var(--at-color-superficie);

  /* Azul: dinero y datos */
  --azul: var(--at-color-dato);
  --azul-texto: var(--at-color-dato-fuerte);
  --azul-fondo: var(--at-color-dato-fondo);
  --azul-panel: var(--at-color-dato-fondo);

  /* Bordes */
  --borde: var(--at-color-borde);
  --borde-fuerte: var(--at-color-borde-campo);

  /* Texto: el terciario del manual solo vale desde 18 px o como decoracion,
     asi que el "suave" del sitio es el secundario. */
  --texto: var(--at-color-texto-2);
  --texto-suave: var(--at-color-texto-2);
  --texto-tenue: var(--at-color-texto-3);

  /* Semanticos */
  --verde-fondo: var(--at-color-ok-fondo);
  --verde-texto: var(--at-color-ok);
  --ambar-fondo: var(--at-color-aviso-fondo);
  --ambar-texto: var(--at-color-aviso);

  /* Tipografia */
  --letra: var(--at-font-sans), system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--at-font-mono);
  --mano: var(--at-font-mano), "Comic Sans MS", cursive;

  /* Medidas */
  --ancho: var(--at-ancho-contenido-web);
  --margen: 32px;
  --r-capsula: var(--at-radio-capsula);
  --r-tarjeta: var(--at-radio-l);
  --r-tarjeta-grande: var(--at-radio-xl);
  --r-bloque: var(--at-radio-hoja);
  --r-campo: var(--at-radio-m);

  --sombra-tarjeta: var(--at-elev-1);
  --sombra-flotante: var(--at-elev-3);
  --curva: var(--at-ease-salida);
}

:root {
  /*
   * Apoyos locales del sitio, todos derivados de tokens `--at-*` (cero hex).
   * Existen porque el manual v4 no fija (a) los tamanos intermedios de texto
   * (solo 12.5, 14.5, 15, 17, 26, 28, 33, 36, 40, 56) ni (b) las transparencias
   * sobre fondo tinta; ver el informe de la migracion.
   */
  --sitio-t-xs: 12px;
  --sitio-t-s: 14px;
  --sitio-t-m: 16px;
  --sitio-t-l: 18px;
  --sitio-t-xl: 20px;
  --sitio-t-2xl: 24px;
  --sitio-t-3xl: 32px;

  --sitio-vidrio: color-mix(in srgb, var(--at-color-fondo) 92%, transparent);
  --sitio-sobre-tinta-1: color-mix(in srgb, var(--at-color-superficie) 8%, transparent);
  --sitio-sobre-tinta-2: color-mix(in srgb, var(--at-color-superficie) 14%, transparent);
  --sitio-sobre-tinta-3: color-mix(in srgb, var(--at-color-superficie) 28%, transparent);
  --sitio-texto-sobre-tinta: color-mix(in srgb, var(--at-color-superficie) 82%, transparent);
  --sitio-texto-sobre-tinta-2: color-mix(in srgb, var(--at-color-superficie) 72%, transparent);
  --sitio-caption: color-mix(in srgb, var(--at-color-tinta) 80%, transparent);
  --sitio-boton-vidrio: color-mix(in srgb, var(--at-color-tinta) 60%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: var(--at-texto-web-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* `hidden` tiene que ganarle a cualquier `display` de una clase. */
[hidden] { display: none !important; }

a { color: var(--azul-texto); text-decoration: none; }
a:hover { color: var(--fucsia); }

/* El anillo del manual (`--at-foco`) va en `:focus-visible`; el contorno
   transparente es para el modo de alto contraste de Windows, que pinta los
   contornos y no las sombras. */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--at-foco); }
/* El destino del salto al contenido recibe el foco por programa, no por teclado: sin anillo. */
main:focus-visible { outline: 0; box-shadow: none; }

h1, h2, h3, h4 { color: var(--tinta); margin: 0 0 var(--at-esp-4); letter-spacing: var(--at-tracking-titulo); }
h1 { font: var(--at-texto-web-display); }
h2 { font: var(--at-texto-web-titulo-2); }
h3 { font: var(--at-texto-titulo-2); font-size: var(--sitio-t-xl); }
h4 { font: var(--at-texto-titulo-2); }
p  { margin: 0 0 var(--at-esp-4); color: var(--texto); }

h2.grande, h2.medio { font: var(--at-texto-web-titulo-1); text-wrap: pretty; }

.contenido { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); width: 100%; }
.centro { text-align: center; }

/* La etiqueta en mono, en mayusculas y espaciada, que va sobre cada titulo. */
.ceja {
  font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase;
  color: var(--fucsia); margin: 0 0 var(--at-esp-3); display: block;
}
.ceja.azul { color: var(--azul-texto); }
.ceja.rosa { color: var(--rosa-papel); }
.ceja.clara { color: var(--blanco); margin: 0; }
.ceja.tenue { color: var(--texto-suave); margin: 0; }

.entrada-media { font: var(--at-texto-web-cuerpo); max-width: 30em; }

.enlace-azul {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--azul-texto);
}

/* El salto al contenido. Solo se ve con el teclado, que es para quien es. */
.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--fucsia); color: var(--blanco);
  padding: var(--at-esp-3) var(--at-esp-5); border-radius: var(--r-campo); z-index: var(--at-z-modal);
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------------ cabecera */

.cabecera {
  position: sticky; top: 0; z-index: var(--at-z-hoja);
  background: var(--sitio-vidrio);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .contenido { display: flex; align-items: center; gap: var(--at-esp-6); min-height: 72px; }
.marca { display: inline-flex; align-items: center; flex: none; min-height: var(--at-tactil-min); }
.marca img { width: 124px; height: auto; }
.menu { display: flex; gap: var(--at-esp-1); margin-left: var(--at-esp-3); }
.menu a {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min);
  color: var(--texto); font: var(--at-texto-cuerpo-fuerte); padding: 0 var(--at-esp-4);
  border-radius: var(--r-capsula); white-space: nowrap; transition: background-color var(--at-dur-base) var(--at-ease-estandar);
}
.menu a:hover { background: var(--rosa-papel); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--rosa-papel); color: var(--fucsia); font-weight: 700; }
.acciones { margin-left: auto; display: flex; gap: var(--at-esp-2); align-items: center; }

/* La lupa abre, debajo de la barra, el mismo buscador del catalogo. Va como
   franja y no como caja en el menu: con siete enlaces no cabe un campo. */
.lupa {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: 50%; color: var(--tinta);
  transition: background-color var(--at-dur-base) var(--at-ease-estandar);
}
.lupa:hover, .lupa[aria-expanded="true"] { background: var(--rosa-papel); color: var(--fucsia); }
.cabecera .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cabecera-buscar { border-top: 1px solid var(--borde); padding: var(--at-esp-3) 0; }
.cabecera-buscar[hidden] { display: none; }
.cabecera-buscar .contenido { display: flex; gap: var(--at-esp-2); align-items: center; min-height: 0; }
.cabecera-buscar label {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--at-esp-1); padding-left: var(--at-esp-3); border-radius: var(--r-capsula);
  background: var(--blanco); border: 1px solid var(--at-color-borde-campo); transition: border-color var(--at-dur-base) var(--at-ease-estandar);
}
.cabecera-buscar label:focus-within { border-color: var(--fucsia); box-shadow: var(--at-foco); }
/* El anillo lo lleva la caja (`label`), no el campo: el campo va sin contorno. */
.cabecera-buscar input {
  flex: 1; min-width: 0; min-height: var(--at-tactil-min); border: 0; outline: 0; box-shadow: none; background: none; font-family: var(--letra);
  font-size: var(--sitio-t-m); color: var(--tinta); padding: 0 var(--at-esp-4) 0 var(--at-esp-2);
}
.cabecera-buscar input::placeholder { color: var(--texto-suave); }
.cabecera-buscar img { width: 26px; height: auto; flex: none; }

/* -------------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--at-esp-2);
  min-height: var(--at-tactil-min); padding: 0 var(--at-esp-5); border-radius: var(--r-capsula);
  background: var(--fucsia); color: var(--blanco); font: var(--at-texto-cuerpo-fuerte); font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--at-dur-rapida) var(--at-ease-estandar), border-color var(--at-dur-rapida) var(--at-ease-estandar), transform var(--at-dur-rapida) var(--at-ease-estandar);
}
.boton:hover { background: var(--fucsia-hover); color: var(--blanco); }
.boton:active { transform: scale(0.97); }
.boton:disabled, .boton[aria-disabled="true"] {
  background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); border-color: transparent; cursor: not-allowed; transform: none;
}
.boton.grande { min-height: var(--at-alto-cta); padding: 0 var(--at-esp-8); font-size: var(--sitio-t-m); }
.boton.blanco { background: var(--blanco); color: var(--fucsia); border-color: var(--borde-fuerte); }
.boton.blanco:hover { border-color: var(--fucsia); color: var(--fucsia); background: var(--blanco); }
.boton.secundario { background: var(--blanco); color: var(--tinta); border-color: var(--borde-fuerte); font-weight: 600; }
.boton.secundario:hover { border-color: var(--fucsia); color: var(--fucsia); }
.boton.fantasma { background: none; color: var(--texto); font-weight: 600; padding: 0 var(--at-esp-4); }
.boton.fantasma:hover { background: var(--rosa-papel); color: var(--tinta); }
.boton.borde-claro { background: none; color: var(--blanco); border-color: var(--sitio-sobre-tinta-3); font-weight: 600; padding: 0 var(--at-esp-6); }
.boton.borde-claro:hover { border-color: var(--blanco); background: var(--sitio-sobre-tinta-1); }

/* --------------------------------------------------------------------- migas */

.migas { font: var(--at-texto-cuerpo); color: var(--texto-suave); padding: var(--at-esp-5) 0 0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--at-esp-2); margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: var(--at-esp-2); color: var(--texto-tenue); }
.migas a { color: var(--texto-suave); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* -------------------------------------------------------------------- bloques */

.seccion { padding: calc(var(--at-esp-4) * 3.5) 0; }
.seccion.apretada { padding: var(--at-esp-8) 0; }
.seccion-corta { padding-top: calc(var(--at-esp-4) * 3.5); padding-bottom: var(--at-esp-6); }

.hero { padding: calc(var(--at-esp-4) * 4) 0 var(--at-esp-9); }
.hero p.entrada, p.entrada { font: var(--at-texto-web-cuerpo); font-size: var(--sitio-t-l); color: var(--texto); max-width: 30em; }

.caja {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta-grande); padding: var(--at-esp-8);
}
.caja.tinta { background: var(--tinta); color: var(--rosa-papel); border-color: transparent; }
.caja.tinta h2, .caja.tinta h3 { color: var(--blanco); }
.caja.tinta p { color: var(--rosa-papel); }
.caja.rosa { background: var(--rosa-papel); border-color: transparent; }
.caja.azul { background: var(--azul-panel); border-color: var(--azul-fondo); }

.rejilla { display: grid; gap: var(--at-esp-5); }
.rejilla.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--at-esp-4); margin-bottom: var(--at-esp-5); }
.titulo-fila h2 { margin: 0; }

.banda-blanca { background: var(--blanco); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: var(--at-esp-10) 0; margin-top: calc(var(--at-esp-4) * 3.5); }

.bloque-tinta { background: var(--tinta); color: var(--blanco); border-radius: var(--r-bloque); padding: calc(var(--at-esp-4) * 3); }
.bloque-tinta h3 { color: var(--blanco); }
.bloque-tinta p { color: var(--sitio-texto-sobre-tinta); }

/* -------------------------------------------------------------------- tarjeta */

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta); overflow: hidden; display: flex; flex-direction: column;
  position: relative;
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida), box-shadow var(--at-dur-base) var(--at-ease-estandar);
}
.tarjeta:hover { border-color: var(--fucsia); transform: translateY(-2px); box-shadow: var(--sombra-tarjeta); }
.tarjeta .foto { aspect-ratio: 4 / 3; background: var(--rosa-suave); object-fit: cover; width: 100%; }
.tarjeta .cuerpo { padding: var(--at-esp-3) var(--at-esp-4) var(--at-esp-4); display: flex; flex-direction: column; gap: var(--at-esp-2); flex: 1; }
.tarjeta h3 { font: var(--at-texto-titulo-2); margin: 0; }
.tarjeta h3 a { color: var(--tinta); }
/* Toda la tarjeta es el enlace, sin anidar un <a> sobre el resto. */
.tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.tarjeta .razon { font: var(--at-texto-meta); color: var(--texto-suave); margin: 0; flex: 1; }
.tarjeta .pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: var(--at-esp-2); margin-top: var(--at-esp-2); }

.precio { font: var(--at-texto-cuerpo-fuerte); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); }
.precio.grande { font: var(--at-texto-cifra); font-variant-numeric: tabular-nums; color: var(--azul); }

.chip {
  display: inline-block; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--r-capsula);
  background: var(--rosa-papel); color: var(--fucsia); font: var(--at-texto-meta); font-weight: 700;
}
.chip.azul { background: var(--azul-fondo); color: var(--azul-texto); }
.chip.verde { background: var(--verde-fondo); color: var(--verde-texto); }
.chip.ambar { background: var(--ambar-fondo); color: var(--ambar-texto); }
.chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }

/* ---------------------------------------------------------------------- ficha */

.ficha { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--at-esp-9); align-items: start; padding: var(--at-esp-8) 0 var(--at-esp-2); }
.ficha .foto-grande { border-radius: var(--r-bloque); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--rosa-suave); }
.ficha h1 { font: var(--at-texto-web-titulo-1); }
.datos { list-style: none; margin: var(--at-esp-5) 0; padding: 0; display: grid; gap: var(--at-esp-3); }
.datos li { display: flex; gap: var(--at-esp-3); font: var(--at-texto-cuerpo); color: var(--texto); }
.datos b { color: var(--tinta); min-width: 128px; }

/* ------------------------------------------------------------------- filtros */

.filtros { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); align-items: center; margin: 0 0 var(--at-esp-8); }
.filtros input[type="search"], .filtros select {
  min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--r-capsula); border: 1px solid var(--borde-fuerte);
  background: var(--blanco); color: var(--tinta); font-size: var(--sitio-t-m); font-family: inherit;
}
.filtros input[type="search"] { min-width: 280px; }
input::placeholder { color: var(--texto-tenue); }

.resumen { color: var(--texto-suave); font: var(--at-texto-cuerpo); margin: 0 0 var(--at-esp-5); }

/* ---------------------------------------------------------------- paginacion */

.paginacion { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); justify-content: center; padding: var(--at-esp-9) 0 var(--at-esp-2); }
.paginacion a, .paginacion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--at-tactil-min); min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--r-capsula);
  border: 1px solid var(--borde); background: var(--blanco); color: var(--texto); font: var(--at-texto-cuerpo-fuerte);
}
.paginacion a:hover { background: var(--rosa-papel); }
.paginacion [aria-current="page"] { background: var(--fucsia); border-color: var(--fucsia); color: var(--blanco); }
.paginacion .hueco { border: 0; background: transparent; }

/* --------------------------------------------------------------------- legal */

.legal { max-width: 760px; }
.legal h2 { margin-top: var(--at-esp-9); }
.legal .claro {
  background: var(--rosa-papel); border-radius: var(--r-campo); padding: var(--at-esp-4) var(--at-esp-5);
  font-size: var(--sitio-t-m); color: var(--tinta); margin: 0 0 var(--at-esp-4);
}
.legal .claro b { display: block; font: var(--at-texto-mono); text-transform: uppercase; letter-spacing: var(--at-tracking-etiqueta); color: var(--fucsia); margin-bottom: var(--at-esp-1); }

/* ----------------------------------------------------------------------- pie */

.pie-sitio { background: var(--tinta); color: var(--rosa-papel); margin-top: var(--at-esp-10); padding: calc(var(--at-esp-4) * 3.5) 0 var(--at-esp-9); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--at-esp-8); }
.pie-sitio img { width: 170px; margin-bottom: var(--at-esp-3); }
.pie-sitio p { color: var(--sitio-texto-sobre-tinta); font: var(--at-texto-cuerpo); }
.pie-sitio a { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); color: var(--rosa-papel); font: var(--at-texto-cuerpo); }
.pie-sitio a:hover { color: var(--blanco); }
.pie-sitio h2 { margin: 0 0 var(--at-esp-2); color: var(--rosa-papel); font: var(--at-texto-mono); text-transform: uppercase; letter-spacing: var(--at-tracking-etiqueta); }
.pie-sitio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pie-sitio .nota { font: var(--at-texto-meta); margin-top: var(--at-esp-9); border-top: 1px solid var(--sitio-sobre-tinta-2); padding-top: var(--at-esp-6); }
/* En la nota el enlace va en linea con el texto, no como fila de 44 px. */
.pie-sitio .nota a { display: inline; min-height: 0; font: inherit; text-decoration: underline; }

/* ------------------------------------------------------------------ whatsapp */

/* El verde es el de WhatsApp y no el de la paleta: es la marca de ellos y es lo
   que la gente reconoce de un vistazo (excepcion de color de tercero). Va por
   debajo de la cabecera (40) y del salto al contenido (50): el sitio no tiene
   menus que se abran, pero si un dia los tiene, que queden encima del boton y
   no al reves. */
.whatsapp {
  --wa-lado: 56px;
  --wa-borde: var(--at-esp-6);
  position: fixed; right: var(--wa-borde); z-index: 35;
  bottom: calc(var(--wa-borde) + env(safe-area-inset-bottom, 0px));
  width: var(--wa-lado); height: var(--wa-lado); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; /* verde de marca de WhatsApp */
  color: var(--blanco);
  box-shadow: var(--at-elev-3);
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida);
}
.whatsapp:hover { background: #1EBE5A; /* WhatsApp, hover */ color: var(--blanco); transform: translateY(-2px); }
.whatsapp svg { display: block; }

/* El boton flota sobre el final de la pagina: sin este hueco, la nota legal del
   pie queda debajo de el al llegar al fondo, y en movil es justo la ultima linea. */
.pie-sitio { padding-bottom: calc(var(--at-esp-9) + 56px + var(--at-esp-6) + env(safe-area-inset-bottom, 0px)); }

/* ----------------------------------------------------------------- medicion */

/* El aviso de Google Analytics. Abajo a la IZQUIERDA: la derecha es de
   WhatsApp. Tarjeta blanca y no barra de lado a lado: no tapa la pagina y se
   lee como una pregunta, que es lo que es. Por debajo de la cabecera (40),
   igual que WhatsApp. */
.medicion {
  position: fixed; left: var(--at-esp-6); z-index: 36;
  bottom: calc(var(--at-esp-6) + env(safe-area-inset-bottom, 0px));
  max-width: 400px; padding: var(--at-esp-5);
  background: var(--blanco); color: var(--texto); border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta); box-shadow: var(--sombra-flotante);
  font: var(--at-texto-cuerpo);
}
.medicion[hidden] { display: none; }
.medicion p { margin: 0 0 var(--at-esp-3); font: inherit; }
.medicion a { color: var(--fucsia); font-weight: 600; }
.medicion-botones { display: flex; gap: var(--at-esp-2); flex-wrap: wrap; }
.medicion-detalle { margin: 0 0 var(--at-esp-3); }
.medicion-detalle summary { display: flex; align-items: center; min-height: var(--at-tactil-min); cursor: pointer; color: var(--fucsia); font-weight: 600; }
.medicion-casilla { display: flex; gap: var(--at-esp-3); align-items: center; min-height: var(--at-tactil-min); margin: var(--at-esp-1) 0; cursor: pointer; }
.medicion-casilla input { width: 20px; height: 20px; flex: none; accent-color: var(--fucsia); }
.medicion-detalle .boton { margin-top: var(--at-esp-1); }

/* El enlace del pie que vuelve a abrir el aviso: un boton (hace algo en la
   pagina, no navega) vestido como los enlaces de su columna. */
.pie-enlace {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: var(--at-texto-cuerpo); color: var(--rosa-papel);
}
.pie-enlace:hover { color: var(--blanco); }

/* ------------------------------------------------ globos, llamados, entradas */
.globo-aviso {
  position: absolute; left: var(--at-esp-5); bottom: var(--at-esp-5); right: var(--at-esp-5); max-width: max-content;
  padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-fondo); color: var(--tinta);
  box-shadow: var(--sombra-flotante); display: flex; align-items: center; gap: var(--at-esp-3);
  animation: atSubir var(--at-dur-media) var(--at-ease-salida) both var(--at-dur-celebracion);
}

.globo-aviso img { width: 36px; flex: none; }

.globo-aviso b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--tinta); }

.globo-aviso span { display: block; font: var(--at-texto-meta); color: var(--texto-suave); }

.globo-chip {
  position: absolute; right: var(--at-esp-5); top: var(--at-esp-5); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula); background: var(--fucsia);
  color: var(--blanco); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; box-shadow: var(--at-elev-1);
  animation: atSubir var(--at-dur-media) var(--at-ease-salida) both 1200ms;
}

.flota { animation: atTino 3200ms var(--at-ease-estandar) infinite; }

.subir { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

.subir.tarde { animation-duration: var(--at-dur-lenta); animation-delay: 100ms; }

.cta-final {
  border-radius: var(--r-bloque); background: var(--fucsia); color: var(--blanco); padding: calc(var(--at-esp-4) * 3.5); margin: var(--at-esp-5) 0 var(--at-esp-2);
  display: grid; grid-template-columns: 1fr auto; gap: var(--at-esp-9); align-items: center; position: relative; overflow: hidden;
}

.cta-final h2 { color: var(--blanco); font: var(--at-texto-web-titulo-1); margin: 0; text-wrap: pretty; }

.cta-final p { color: var(--blanco); margin: var(--at-esp-3) 0 0; }

.cta-botones { display: flex; flex-direction: column; gap: var(--at-esp-2); min-width: 260px; position: relative; z-index: 1; }

.cta-botones .boton.blanco { border-color: var(--blanco); }

.cta-tino { position: absolute; right: 300px; bottom: -30px; width: 150px; opacity: 0.18; transform: rotate(-10deg); pointer-events: none; }

/* ======================================================= aparecer al bajar */

/* Solo se esconde si el script corre: sin el, `[data-reveal]` no oculta nada.
   Aparece con `atSubir` (el reveal del manual). */
.con-script [data-reveal] { opacity: 0; }
.con-script [data-reveal].visto { opacity: 1; animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

/* ============================================================== animaciones */

/* Los keyframes del manual (atSubir, atPop, atTino, atPensar, atEntrar,
   atLatir, atGirar...) viven en `at/motion.css`: aqui NO se redefinen, o esta
   hoja, que va despues, les cambiaria el movimiento a todo el sitio. Lo que
   sigue es lo propio del sitio, y solo anima `transform` y `opacity`. */
@keyframes atChip { 0% { transform: scale(0.85); } 100% { transform: scale(1); } }
@keyframes atPalabra { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes atMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes atFlotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes atMenu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------- movil */

@media (max-width: 1023px) {
  h1 { font: var(--at-texto-web-titulo-1); }
  h2.grande { font: var(--at-texto-titulo-1); }
  .menu { margin-left: 0; }
  .menu a { padding: 0 var(--at-esp-3); }
  .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .cta-final { grid-template-columns: 1fr; padding: calc(var(--at-esp-4) * 2.5); }
  .cta-final h2 { font: var(--at-texto-titulo-1); }
  .cta-tino { right: var(--at-esp-6); }
  .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* La barra de escritorio (logo, siete enlaces, lupa, dos botones) mide
   ~1220px con su holgura; entre 1141 y 1279 se aprieta, y por debajo pasa al
   boton «Menu». Antes se desbordaba la pagina entera en ese rango. */
@media (min-width: 1141px) and (max-width: 1279px) {
  .cabecera .contenido { gap: var(--at-esp-4); }
  .menu { margin-left: 0; gap: 0; }
  .menu a { padding: 0 var(--at-esp-3); }
}
@media (max-width: 1140px) {
  .cabecera .contenido { flex-wrap: wrap; gap: var(--at-esp-2) var(--at-esp-4); padding-top: var(--at-esp-2); padding-bottom: var(--at-esp-2); }
  .menu { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margen) * -1); padding: 0 var(--margen) var(--at-esp-1); }
  .menu::-webkit-scrollbar { display: none; }

  /* Con script, el menu es un panel bajo la barra y la barra queda en una
     linea: logo, lupa, «Crear cuenta» y el boton. Va `absolute` dentro de la
     cabecera y no `fixed`: el `backdrop-filter` de `.cabecera` la vuelve el
     bloque contenedor y un `fixed` quedaria atrapado en ella igual. */
  .con-script .cabecera .contenido { flex-wrap: nowrap; gap: var(--at-esp-2); min-height: 64px; padding-top: 0; padding-bottom: 0; }
  .con-script .abre-menu { display: inline-flex; }
  .con-script .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0;
    height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; gap: 0; padding: var(--at-esp-2) var(--margen) calc(var(--at-esp-6) + env(safe-area-inset-bottom, 0px));
    background: var(--crema); border-top: 1px solid var(--borde);
  }
  .con-script .cabecera.menu-abierto .menu { display: flex; animation: atMenu var(--at-dur-base) var(--at-ease-salida); }
  .con-script .menu a:not(.boton) {
    display: flex; align-items: center; justify-content: space-between; padding: var(--at-esp-4) var(--at-esp-1);
    font-size: var(--sitio-t-xl); font-weight: 700; color: var(--tinta); border-radius: 0; border-bottom: 1px solid var(--borde);
  }
  .con-script .menu a:not(.boton)::after { content: "→"; color: var(--texto-tenue); font-weight: 600; }
  .con-script .menu a:not(.boton):hover { background: none; color: var(--fucsia); }
  .con-script .menu a[aria-current="page"] { background: none; color: var(--fucsia); }
  .con-script .menu a[aria-current="page"]::after { content: "•"; color: var(--fucsia); font-size: var(--sitio-t-2xl); line-height: 1; }
  .con-script .menu-cuenta { display: flex; flex-direction: column; gap: var(--at-esp-2); margin-top: var(--at-esp-6); }
  /* `.menu a` pesa mas que `.boton`: sin repetir color y fondo aqui, el texto
     del boton sale del color del enlace sobre el fucsia y no se lee. */
  .menu-cuenta .boton { min-height: var(--at-alto-cta); padding: 0 var(--at-esp-5); font-size: var(--sitio-t-m); color: var(--blanco); }
  .menu-cuenta .boton:hover { background: var(--fucsia-hover); color: var(--blanco); }
  .menu-cuenta .boton.borde { background: var(--blanco); color: var(--tinta); border-color: var(--borde-fuerte); }
  .menu-cuenta .boton.borde:hover { border-color: var(--fucsia); color: var(--fucsia); }
  /* Con el panel abierto la pagina de atras no se desliza y los flotantes
     (WhatsApp, Atineo, el aviso de medicion) no se asoman por encima. */
  html.menu-abierto { overflow: hidden; }
  html.menu-abierto .whatsapp, html.menu-abierto .medicion, html.menu-abierto .atineo-lanzador { visibility: hidden; }
}
.menu-cuenta { display: none; }
.abre-menu {
  display: none; align-items: center; justify-content: center; flex: none; width: var(--at-tactil-min); height: var(--at-tactil-min); margin-right: calc(var(--at-esp-1) * -1);
  border: 0; border-radius: 50%; background: none; color: var(--tinta); cursor: pointer; transition: background-color var(--at-dur-base) var(--at-ease-estandar);
}
.abre-menu:hover, .abre-menu[aria-expanded="true"] { background: var(--rosa-papel); color: var(--fucsia); }
.abre-menu-rayas { position: relative; width: 20px; height: 14px; }
.abre-menu-rayas i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: var(--at-radio-capsula); background: currentColor;
  transition: transform var(--at-dur-base) var(--at-ease-salida), opacity var(--at-dur-rapida) var(--at-ease-estandar);
}
.abre-menu-rayas i:nth-child(1) { top: 0; }
.abre-menu-rayas i:nth-child(2) { top: 6px; }
.abre-menu-rayas i:nth-child(3) { top: 12px; }
.abre-menu[aria-expanded="true"] .abre-menu-rayas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.abre-menu[aria-expanded="true"] .abre-menu-rayas i:nth-child(2) { opacity: 0; }
.abre-menu[aria-expanded="true"] .abre-menu-rayas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


@media (max-width: 719px) {
  /* En movil ocupa el ancho y se levanta por encima de WhatsApp (52px + 16px). */
  .medicion { left: var(--at-esp-4); right: var(--at-esp-4); max-width: none; bottom: calc(var(--at-esp-4) + 52px + var(--at-esp-3) + env(safe-area-inset-bottom, 0px)); }
  :root { --margen: 16px; }
  body { font-size: var(--sitio-t-m); }
  h1 { font: var(--at-texto-display); }
  h2.grande, h2.medio { font: var(--at-texto-titulo-1); }
  .ficha h1 { font: var(--at-texto-titulo-1); }
  .rejilla.c2, .rejilla.c3 { grid-template-columns: 1fr; }
  .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3); }
  .acciones .boton.fantasma { display: none; }
  /* Menos de 16px en un campo y Safari en iPhone acerca la pagina al tocarlo,
     y no la devuelve. Las hojas de cada pagina ponen 14-15px por diseño; en
     movil gana esta regla. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: var(--sitio-t-m) !important; }
  .marca img { width: 108px; }
  .acciones { gap: var(--at-esp-1); }
  .acciones .boton:not(.fantasma) { padding: 0 var(--at-esp-4); }
  .cabecera-buscar label { padding-left: var(--at-esp-2); }
  .cabecera-buscar input { padding: 0 var(--at-esp-2); text-overflow: ellipsis; }
  .cabecera-buscar .boton { padding: 0 var(--at-esp-4); }
  .filtros input[type="search"] { min-width: 100%; }
  .globo-aviso { left: var(--at-esp-3); right: var(--at-esp-3); bottom: var(--at-esp-3); }
  .globo-chip { right: var(--at-esp-3); top: var(--at-esp-3); }
  .titulo-fila { flex-direction: column; gap: var(--at-esp-1); }
  .bloque-tinta { padding: var(--at-esp-6); }
  .banda-blanca { padding: calc(var(--at-esp-4) * 3) 0; }
  .cta-final { padding: var(--at-esp-6); }
  .cta-final h2 { font: var(--at-texto-titulo-1); }
  .cta-botones { min-width: 0; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-rejilla > div:first-child { grid-column: 1 / -1; }
  .whatsapp { --wa-lado: 52px; --wa-borde: var(--at-esp-4); }
  .whatsapp svg { width: 28px; height: 28px; }
  .pie-sitio { padding-bottom: calc(var(--at-esp-9) + 52px + var(--at-esp-4) + env(safe-area-inset-bottom, 0px)); }
}


/* El movimiento reducido ya lo resuelve `at/motion.css` (0.01 ms, una vuelta,
   sin desplazamiento). Aqui solo lo que es propio de esta hoja. */
@media (prefers-reduced-motion: reduce) {
  .con-script [data-reveal] { opacity: 1; }
  .whatsapp:hover, .tarjeta:hover { transform: none; }
}

/*
 * Aliados: el directorio y la ficha. No estan en el handoff; siguen el indice de
 * ocasiones (04) y la ficha de regalo (03). Monograma en lugar de foto: ver el
 * comentario de `aliados.blade.php`.
 *
 * UI/UX v4: color solo con tokens `--at-*` (la marca usa los nombres viejos
 * aliados, porque `hombres.css` la re-temiza), sin degradados, radios y espacio
 * del manual y movimiento solo de `transform` y `opacity`.
 */

/* El monograma: iniciales sobre uno de cuatro tonos de la paleta. */
.ali-monograma {
  --fondo-mono: var(--rosa-papel); --texto-mono: var(--fucsia);
  display: grid; place-items: center; font-weight: 800; letter-spacing: var(--at-tracking-titulo);
  background: var(--fondo-mono); color: var(--texto-mono);
}
.ali-monograma[data-tono="1"] { --fondo-mono: var(--at-color-dato-fondo); --texto-mono: var(--at-color-dato-fuerte); }
.ali-monograma[data-tono="2"] { --fondo-mono: var(--at-color-aviso-fondo); --texto-mono: var(--at-color-aviso); }
.ali-monograma[data-tono="3"] { --fondo-mono: var(--at-color-ok-fondo); --texto-mono: var(--at-color-ok); }

/* -------------------------------------------------------------- directorio */

.ali-cabeza { padding-top: 56px; }
.ali-cabeza > * { max-width: 720px; }
.ali-cabeza h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.ali-cabeza .entrada { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-5) 0 0; }

.ali-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-5); margin-top: 40px; }

.ali-tarjeta {
  position: relative; display: flex; flex-direction: column; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  border-radius: var(--at-radio-xl); overflow: hidden;
  transition: transform var(--at-dur-media) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-estandar), box-shadow var(--at-dur-media) var(--at-ease-salida);
}
.ali-tarjeta:hover { transform: translateY(-4px); border-color: var(--fucsia); box-shadow: var(--at-elev-1); }
.ali-tarjeta > .ali-monograma { height: 128px; font-size: 44px; }
.ali-tarjeta-cuerpo { padding: var(--at-esp-5) var(--at-esp-5) var(--at-esp-5); display: flex; flex-direction: column; gap: var(--at-esp-2); flex: 1; }
.ali-zona { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--fucsia); }
.ali-tarjeta h2 { font: var(--at-texto-titulo-2); letter-spacing: normal; margin: 0; }
.ali-tarjeta h2 a { color: var(--at-color-tinta); }
/* Toda la tarjeta es el enlace, sin anidar un <a> sobre el resto. */
.ali-tarjeta h2 a::after { content: ""; position: absolute; inset: 0; }
.ali-tarjeta p { font: var(--at-texto-cuerpo); margin: 0; flex: 1; }
.ali-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--at-esp-3); margin-top: var(--at-esp-3); font-size: 14px; color: var(--at-color-texto-2); }
.ali-tarjeta-pie b { color: var(--at-color-tinta); font-weight: 800; }

/* Sin aliados que mostrar: lo digo y dejo el camino abierto. */
.ali-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--at-esp-10) var(--at-esp-4); }
.ali-vacio img { width: 84px; animation: atTino 3200ms var(--at-ease-estandar) infinite; }
.ali-vacio b { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-4); color: var(--at-color-tinta); }
.ali-vacio p { font: var(--at-texto-web-cuerpo); max-width: 28em; margin: var(--at-esp-3) 0 0; }

.ali-como { --ali-linea: color-mix(in srgb, var(--at-color-superficie) 20%, var(--at-color-tinta)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-top: 40px; }
.ali-como h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.ali-como > p { font: var(--at-texto-web-cuerpo); color: var(--at-color-borde-campo); opacity: 1; margin: 0; }
.ali-como > p.ali-unete { grid-column: 1 / -1; padding-top: var(--at-esp-5); border-top: 1px solid var(--ali-linea); color: var(--at-color-superficie); font-weight: 700; }
.ali-unete a { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); color: var(--at-color-marca-papel); font-weight: 800; }

/* -------------------------------------------------------------------- ficha */

.ali-ficha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 40px; }
.ali-ficha h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.ali-ficha .entrada { font: var(--at-texto-web-cuerpo); margin-top: var(--at-esp-5); }
.ali-chips { margin-top: var(--at-esp-5); }
.ali-ficha .botones { margin-top: var(--at-esp-7); }

.ali-sello {
  position: relative; height: 400px; border-radius: var(--at-radio-hoja); background: var(--at-color-tinta); color: var(--at-color-superficie);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-esp-2); text-align: center; padding: var(--at-esp-8);
  overflow: hidden;
}
.ali-sello::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: var(--at-radio-capsula); top: -88px; right: -88px;
  background: var(--at-color-marca); opacity: 0.35;
}
.ali-sello > * { position: relative; }
.ali-sello-iniciales {
  width: 128px; height: 128px; border-radius: var(--at-radio-xl); background: var(--at-color-marca-papel); color: var(--at-color-marca);
  display: grid; place-items: center; font-weight: 800; font-size: 52px; letter-spacing: var(--at-tracking-titulo); margin-bottom: var(--at-esp-4);
  animation: atSubir var(--at-dur-media) var(--at-ease-salida) 200ms both;
}
.ali-sello > b { font-size: 22px; line-height: 1.2; }
.ali-sello > span:not(.ali-sello-iniciales) { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-marca-papel); }
.ali-sello .globo-aviso { position: absolute; left: var(--at-esp-5); bottom: var(--at-esp-5); right: var(--at-esp-5); text-align: left; }
.ali-sello .globo-aviso img { width: 32px; }

.ali-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); padding-top: 48px; }
.ali-datos > div { padding: var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); display: flex; flex-direction: column; }
.ali-dato-titulo { font-size: 12px; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); font-weight: 700; }
.ali-datos b { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-2); color: var(--at-color-tinta); font-variant-numeric: tabular-nums; }
.ali-datos b.azul { color: var(--at-color-dato); }
.ali-datos b.fucsia { color: var(--fucsia); }
.ali-datos b + span { font-size: 14px; color: var(--at-color-texto-2); margin-top: 2px; }

.ali-prepara {
  margin: var(--at-esp-6) 0 0; padding: var(--at-esp-5) var(--at-esp-7); border-radius: var(--at-radio-l); background: var(--rosa-papel);
  color: var(--at-color-tinta); font: var(--at-texto-web-cuerpo);
}
.ali-nota { font: var(--at-texto-cuerpo); font-size: 16px; margin: -8px 0 var(--at-esp-5); }
.banda-blanca .ali-nota { margin: 0 0 var(--at-esp-6); }
.ali-enlace { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); font-size: 16px; font-weight: 700; color: var(--at-color-dato-fuerte); }

.ali-vecinos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.ali-vecino {
  position: relative; display: flex; flex-direction: column; gap: var(--at-esp-3); padding: var(--at-esp-5); border-radius: var(--at-radio-l);
  background: var(--at-color-fondo); border: 1px solid var(--at-color-borde);
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-media) var(--at-ease-salida);
}
.ali-vecino:hover { border-color: var(--fucsia); transform: translateY(-2px); }
.ali-monograma.pequeno { width: 48px; height: 48px; border-radius: var(--at-radio-s); font-size: 18px; }
.ali-vecino h3 { font: var(--at-texto-titulo-2); letter-spacing: normal; margin: 0 0 var(--at-esp-1); }
.ali-vecino h3 a { color: var(--at-color-tinta); }
.ali-vecino h3 a::after { content: ""; position: absolute; inset: 0; }
.ali-vecino p { font: var(--at-texto-cuerpo); margin: 0; }

/* -------------------------------------------------------------------- tablet */

@media (max-width: 1180px) {
  .ali-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ali-cabeza h1, .ali-ficha h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .ali-ficha, .ali-como { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .ali-sello { height: 320px; }
  .ali-vecinos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------- celular */

@media (max-width: 760px) {
  .ali-rejilla { grid-template-columns: 1fr; gap: var(--at-esp-3); }
  .ali-cabeza { padding-top: var(--at-esp-8); }
  .ali-cabeza h1, .ali-ficha h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .ali-ficha { padding-top: var(--at-esp-6); }
  .ali-ficha .botones .boton { flex: 1; }
  .ali-sello { height: 280px; border-radius: var(--at-radio-xl); }
  .ali-sello-iniciales { width: 96px; height: 96px; font-size: 40px; border-radius: var(--at-radio-l); }
  .ali-datos { grid-template-columns: 1fr; gap: var(--at-esp-3); padding-top: var(--at-esp-8); }
  .ali-vecinos { grid-template-columns: 1fr; }
}

/* Atineo, el asesor flotante (`web.piezas.atineo`, `resources/sitio/asistente.js`)
   y «Atineo recomienda» de la ficha. Todo con prefijo `atineo-`.

   Va abajo a la DERECHA, encima del boton de WhatsApp: los dos son «hablar con
   alguien», y el aviso de medicion ya ocupa la izquierda. Por debajo de la
   cabecera (40), como WhatsApp.

   UI/UX v4: tokens `--at-*`; los nombres viejos de marca (`--fucsia*`, `--rosa-*`)
   se conservan donde el color debe re-temizarse (landing azul de `hombres.css`).
   Sin degradados; solo se anima transform y opacity con los keyframes de
   `at/motion.css`; el movimiento reducido lo apaga esa misma hoja. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.atineo-avatar {
  width: 36px; height: 36px; border-radius: var(--at-radio-capsula); flex: none;
  display: inline-grid; place-items: center; background: var(--fucsia);
}
.atineo-avatar img { display: block; width: 62%; height: auto; }
.atineo-avatar.chico { width: 28px; height: 28px; }

/* ----------------------------------------------------------------- lanzador */

.atineo-lanzador {
  position: fixed; right: var(--at-esp-6); z-index: 36;
  bottom: calc(var(--at-esp-6) + 56px + var(--at-esp-3) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--at-esp-3);
  min-height: var(--at-tactil-min);
  padding: var(--at-esp-2) var(--at-esp-5) var(--at-esp-2) var(--at-esp-3); border: 0; border-radius: var(--r-capsula);
  background: var(--fucsia); color: var(--at-color-superficie); cursor: pointer;
  font-family: var(--letra); font-weight: 800; font-size: 15px;
  box-shadow: var(--at-elev-3);
  transition: background var(--at-dur-base), transform var(--at-dur-base) var(--curva);
}
.atineo-lanzador[hidden] { display: none; }
.atineo-lanzador img {
  width: 36px; height: 36px; padding: var(--at-esp-2); border-radius: var(--at-radio-capsula);
  background: color-mix(in srgb, var(--at-color-superficie) 16%, transparent); object-fit: contain;
}
.atineo-lanzador:hover { background: var(--fucsia-hover); transform: translateY(-2px); }
.atineo-abierto .atineo-lanzador { transform: scale(0.96); opacity: 0.92; }

/* --------------------------------------------------------------------- chat */

.atineo-chat {
  position: fixed; right: var(--at-esp-6); z-index: 45;
  bottom: calc(var(--at-esp-6) + env(safe-area-inset-bottom, 0px));
  width: 400px; height: min(640px, calc(100vh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--crema); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-tarjeta-grande);
  box-shadow: var(--at-elev-3);
  font-family: var(--letra);
  animation: atSubir var(--at-dur-media) var(--at-ease-salida) both;
}
.atineo-chat[hidden] { display: none; }

.atineo-cabeza {
  display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-2) var(--at-esp-3) var(--at-esp-4);
  background: var(--tinta); color: var(--at-color-superficie);
}
.atineo-cabeza div { flex: 1; min-width: 0; }
.atineo-cabeza h2 { margin: 0; font: var(--at-texto-titulo-2); color: var(--at-color-superficie); }
.atineo-cabeza p { margin: 2px 0 0; font: var(--at-texto-meta); color: color-mix(in srgb, var(--at-color-superficie) 80%, transparent); }
.atineo-cabeza p::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--at-esp-2); border-radius: var(--at-radio-capsula);
  background: var(--at-color-ok-fondo); vertical-align: 1px;
}
.atineo-icono {
  position: relative; width: var(--at-tactil-min); height: var(--at-tactil-min); border: 0; border-radius: var(--at-radio-capsula); cursor: pointer;
  display: grid; place-items: center; background: transparent; color: color-mix(in srgb, var(--at-color-superficie) 85%, transparent);
  transition: background var(--at-dur-rapida);
}
.atineo-icono:hover { background: color-mix(in srgb, var(--at-color-superficie) 14%, transparent); color: var(--at-color-superficie); }

.atineo-hilo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--at-esp-5) var(--at-esp-3) var(--at-esp-2); display: flex; flex-direction: column; gap: var(--at-esp-4);
  scroll-behavior: smooth;
}

.atineo-msj { display: flex; gap: var(--at-esp-2); align-items: flex-end; max-width: 100%; }
.atineo-msj.de-usuario { justify-content: flex-end; }
.atineo-cuerpo { min-width: 0; max-width: 86%; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.de-usuario .atineo-cuerpo { max-width: 80%; }
.atineo-texto {
  margin: 0; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); font-size: 15px; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere;
}
.de-atineo .atineo-texto { background: var(--at-color-superficie); color: var(--tinta); border: 1px solid var(--borde); border-bottom-left-radius: var(--at-radio-s); }
.de-usuario .atineo-texto { background: var(--fucsia); color: var(--at-color-superficie); border-bottom-right-radius: var(--at-radio-s); }

.atineo-wa {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--at-esp-2);
  min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula);
  /* Verde de WhatsApp: marca de tercero, igual que el boton flotante del sitio. */
  background: #25D366; color: var(--tinta);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.atineo-wa:hover { background: #25D366; color: var(--tinta); filter: brightness(0.92); }

/* ---------------------------------------------------------------- tarjetas */

.atineo-tarjetas {
  list-style: none; margin: 0; padding: 2px 2px var(--at-esp-2); display: flex; gap: var(--at-esp-3);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.atineo-tarjeta { flex: 0 0 210px; scroll-snap-align: start; }
.atineo-tarjeta-enlace {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none;
  background: var(--at-color-superficie); border: 1px solid var(--borde); border-radius: var(--at-radio-l); color: var(--tinta);
  transition: border-color var(--at-dur-base), transform var(--at-dur-base) var(--curva);
}
.atineo-tarjeta-enlace:hover { border-color: var(--fucsia); transform: translateY(-2px); box-shadow: var(--sombra-flotante); color: var(--tinta); }
.atineo-tarjeta img { width: 100%; height: 120px; object-fit: cover; background: var(--rosa-suave); }
.atineo-tarjeta-info { display: flex; flex-direction: column; gap: var(--at-esp-1); padding: var(--at-esp-3); flex: 1; }
.atineo-tarjeta-titulo { font-size: 15px; line-height: 1.3; }
.atineo-tarjeta-precio { font-weight: 800; color: var(--azul-texto); font-size: 15px; }
.atineo-tarjeta-porque { font-size: 13px; line-height: 1.45; color: var(--texto); }
.atineo-tarjeta-pie { margin-top: auto; padding-top: var(--at-esp-1); font-size: 12px; color: var(--texto-suave); }

/* ------------------------------------------------------------ sugerencias */

.atineo-sugerencias { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); padding: 0 var(--at-esp-4) var(--at-esp-3); }
.atineo-sugerencias:empty { display: none; }
.atineo-sugerencia {
  min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula); cursor: pointer;
  background: var(--at-color-superficie); color: var(--fucsia); border: 1.5px solid var(--rosa-papel);
  font-family: var(--letra); font-weight: 700; font-size: 14px;
  transition: border-color var(--at-dur-rapida), background var(--at-dur-rapida);
}
.atineo-sugerencia:hover { border-color: var(--fucsia); background: var(--rosa-suave); }

/* ------------------------------------------------------------- escribir */

.atineo-escribir {
  display: flex; align-items: flex-end; gap: var(--at-esp-2); margin: 0 var(--at-esp-3); padding: var(--at-esp-1) var(--at-esp-1) var(--at-esp-1) var(--at-esp-4);
  background: var(--at-color-superficie); border: 1.5px solid var(--borde-fuerte); border-radius: var(--at-radio-l);
  transition: border-color var(--at-dur-rapida);
}
.atineo-escribir:focus-within { border-color: var(--fucsia); box-shadow: var(--at-foco); }
.atineo-escribir textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; /* el foco lo pinta el contenedor (:focus-within) */
  padding: var(--at-esp-3) 0; max-height: 120px; font: 16px/1.45 var(--letra); color: var(--tinta);
}
.atineo-escribir textarea::placeholder { color: var(--texto-suave); }
.atineo-enviar {
  width: var(--at-tactil-min); height: var(--at-tactil-min); flex: none; border: 0; border-radius: var(--at-radio-capsula); cursor: pointer;
  display: grid; place-items: center; background: var(--fucsia); color: var(--at-color-superficie); transition: background var(--at-dur-rapida), opacity var(--at-dur-rapida);
}
.atineo-enviar:hover { background: var(--fucsia-hover); }
.atineo-enviar:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: default; }

.atineo-legal { margin: 0; padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-3); font: var(--at-texto-meta); color: var(--texto-suave); text-align: center; }
.atineo-legal a { display: inline-block; min-height: var(--at-tactil-min); line-height: var(--at-tactil-min); }

/* --------------------------------------------------------- en la ficha */

/* «¿Atina para tu persona?»: ver al final de la hoja. */

.atineo-recomienda h2 { display: flex; align-items: center; gap: var(--at-esp-3); }
.atineo-enlace { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--letra); }
.atineo-enlace:hover { text-decoration: underline; }
.atineo-tarjetas.en-ficha {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-5); overflow: visible; padding: 0;
}
.atineo-tarjetas.en-ficha .atineo-tarjeta img { height: 190px; }
.atineo-tarjetas.en-ficha .atineo-tarjeta-titulo { font-size: 16px; }
.atineo-tarjetas.en-ficha .atineo-tarjeta-info { padding: var(--at-esp-4); gap: var(--at-esp-2); }

/* ----------------------------------------------------------------- movil */

@media (max-width: 760px) {
  /* En el telefono el lanzador es solo Tino: la pildora con texto tapaba
     media fila de tarjetas. */
  .atineo-lanzador { right: var(--at-esp-4); padding: var(--at-esp-2); bottom: calc(var(--at-esp-4) + 52px + var(--at-esp-3) + env(safe-area-inset-bottom, 0px)); }
  .atineo-lanzador span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .atineo-lanzador img { width: 40px; height: 40px; }

  /* El chat ocupa la pantalla: una ventanita flotante en 360 px no deja leer.
     Pantalla completa, sin esquinas: es la hoja entera. */
  .atineo-chat {
    inset: 0; width: auto; height: auto; border-radius: 0; border: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .atineo-abierto body { overflow: hidden; }
  .atineo-abierto .whatsapp, .atineo-abierto .atineo-lanzador { display: none; }

  .atineo-tarjetas.en-ficha { display: flex; overflow-x: auto; gap: var(--at-esp-3); padding-bottom: var(--at-esp-2); }
  .atineo-tarjetas.en-ficha .atineo-tarjeta { flex-basis: 74%; }

  /* Las sugerencias en fila que se desliza: apiladas se comian medio hilo. */
  .atineo-sugerencias { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .atineo-sugerencias::-webkit-scrollbar { display: none; }
  .atineo-sugerencia { flex: none; }
}

/* ------------------------------------------------------------ lo que se sabe */

/* La franja del perfil: lo que Atineo entendio, cada cosa con su ✕. Una sola
   fila que se desliza: no le quita alto al hilo. */
.atineo-perfil {
  display: flex; align-items: center; gap: var(--at-esp-2); padding: var(--at-esp-2) var(--at-esp-3);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  background: var(--at-color-superficie); border-bottom: 1px solid var(--borde);
}
.atineo-perfil::-webkit-scrollbar { display: none; }
.atineo-perfil[hidden] { display: none; }
.atineo-perfil-titulo {
  flex: none; font: var(--at-texto-etiqueta); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--texto-suave); margin-right: 2px;
}
.atineo-perfil-chip {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 0 0 0 var(--at-esp-3); border-radius: var(--r-capsula);
  background: var(--rosa-suave); color: var(--tinta); font-size: 13px; font-weight: 700;
}
.atineo-perfil-quitar {
  /* Area tactil de 44 sin engordar la franja: el margen negativo se come el alto extra. */
  width: var(--at-tactil-min); height: var(--at-tactil-min); margin-block: -10px; border: 0; border-radius: var(--at-radio-capsula); cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--texto-suave);
  font: 700 18px/1 var(--letra);
}
.atineo-perfil-quitar:hover { background: var(--rosa-papel); color: var(--fucsia); }

/* ------------------------------------------------------ reaccionar y cerrar */

.atineo-tarjeta { display: flex; flex-direction: column; }
/* En el chat la tarjeta sigue abajo con «Me gusta» y «Ver y regalar»: el
   enlace cierra solo arriba y no se levanta al pasar, o se despegaria. */
.atineo-tarjetas:not(.en-ficha) .atineo-tarjeta-enlace { flex: 1; border-radius: var(--at-radio-l) var(--at-radio-l) 0 0; }
.atineo-tarjetas:not(.en-ficha) .atineo-tarjeta-enlace:hover { transform: none; box-shadow: none; }
.atineo-tarjeta-llega { font-size: 13px; font-weight: 700; color: var(--verde-texto); }
.atineo-tarjeta-llega::before { content: "✓ "; }

.atineo-reaccionar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--borde); border-top: 0; background: var(--at-color-superficie);
}
.atineo-reaccionar button {
  min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-2); border: 0; background: none; cursor: pointer;
  font: 700 13px/1.2 var(--letra); color: var(--texto);
  transition: background var(--at-dur-rapida), color var(--at-dur-rapida);
}
.atineo-reaccionar button + button { border-left: 1px solid var(--borde); }
.atineo-si:hover:not(:disabled) { background: var(--rosa-suave); color: var(--fucsia); }
.atineo-no:hover:not(:disabled) { background: var(--crema); color: var(--tinta); }
.atineo-reaccionar button:disabled { cursor: default; opacity: 0.55; }
.le-gusta .atineo-si { color: var(--fucsia); opacity: 1; }
.le-gusta .atineo-tarjeta-enlace { border-color: var(--fucsia); }
.no-va .atineo-tarjeta-enlace { opacity: 0.5; }

.atineo-regalar {
  display: flex; align-items: center; justify-content: center; min-height: var(--at-tactil-min);
  padding: var(--at-esp-2) var(--at-esp-3); text-align: center; text-decoration: none;
  background: var(--fucsia); color: var(--at-color-superficie); font-weight: 800; font-size: 14px;
  border-radius: 0 0 var(--at-radio-l) var(--at-radio-l); transition: background var(--at-dur-rapida);
}
.atineo-regalar:hover { background: var(--fucsia-hover); color: var(--at-color-superficie); }

/* Las acciones de un mensaje: el por que de un descarte, «otras opciones»,
   «Regalar». Botones y no texto: tocarlos no obliga a escribir. */
.atineo-acciones { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.atineo-accion {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min);
  padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula); cursor: pointer; text-decoration: none;
  background: var(--tinta); color: var(--at-color-superficie); border: 0;
  font: 700 14px/1.3 var(--letra); transition: background var(--at-dur-rapida);
}
.atineo-accion:hover { background: var(--tinta-caja); color: var(--at-color-superficie); filter: brightness(1.25); }
.atineo-accion.principal { background: var(--fucsia); filter: none; }
.atineo-accion.principal:hover { background: var(--fucsia-hover); }
.atineo-chat.ocupado .atineo-reaccionar button,
.atineo-chat.ocupado .atineo-accion,
.atineo-chat.ocupado .atineo-perfil-quitar { pointer-events: none; opacity: 0.5; }

/* ======================================================= la experiencia guiada */

/* Con la guia en pantalla, el hilo y la caja de escribir se esconden: la guia
   es la conversacion, en tarjetas. `ax-` = atineo experiencia. */
.atineo-chat.en-guia .atineo-hilo,
.atineo-chat.en-guia .atineo-perfil,
.atineo-chat.en-guia .atineo-sugerencias,
.atineo-chat.en-guia .atineo-escribir,
.atineo-chat.en-guia .atineo-legal { display: none; }

@media (min-width: 761px) {
  .atineo-chat { width: 440px; height: min(700px, calc(100vh - 48px)); }
}

.atineo-escena {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  background: var(--crema);
}
.atineo-escena[hidden] { display: none; }

.ax-entra { animation: atPestana var(--at-dur-media) var(--at-ease-salida) both; }

.ax-titulo { margin: 0; font: var(--at-texto-titulo-2); font-size: 21px; line-height: 1.25; color: var(--tinta); letter-spacing: var(--at-tracking-titulo); }
.ax-titulo.grande { font-size: 25px; }
.ax-titulo:focus { outline: 0; } /* solo recibe foco por codigo (tabindex -1), para anunciar el paso */
.ax-sub { margin: var(--at-esp-2) 0 0; font-size: 16px; line-height: 1.5; color: var(--texto); }
.ax-ceja { margin: 0 0 var(--at-esp-1); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fucsia); }

/* ---------------------------------------------------------------- bienvenida */

.ax-bienvenida { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--at-esp-8) var(--at-esp-7); gap: var(--at-esp-1); }
.ax-tino {
  width: 84px; height: 84px; border-radius: var(--at-radio-xl); margin-bottom: var(--at-esp-5);
  display: grid; place-items: center; background: var(--fucsia);
  box-shadow: var(--at-elev-1);
}
.ax-tino img { width: 58%; height: auto; }
.ax-tino.pensando { animation: atTino 1600ms var(--at-ease-estandar) infinite both; }

.ax-promesas { list-style: none; margin: var(--at-esp-5) 0 var(--at-esp-6); padding: 0; display: grid; gap: var(--at-esp-2); }
.ax-promesas li { display: flex; align-items: center; gap: var(--at-esp-3); font-size: 15px; font-weight: 700; color: var(--tinta); }
.ax-promesas svg { color: var(--fucsia); flex: none; }

.ax-seguir {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--at-tactil-min);
  padding: var(--at-esp-4) var(--at-esp-5); border: 0; border-radius: var(--r-capsula); cursor: pointer; text-decoration: none;
  background: var(--fucsia); color: var(--at-color-superficie); font: 800 16px/1.2 var(--letra);
  transition: background var(--at-dur-rapida), transform var(--at-dur-rapida) var(--curva);
}
.ax-seguir:hover { background: var(--fucsia-hover); color: var(--at-color-superficie); }
.ax-seguir:active { transform: scale(0.98); }
.ax-seguir:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: default; }
.ax-escribir {
  min-height: var(--at-tactil-min); margin-top: var(--at-esp-3); padding: var(--at-esp-3); border: 0; background: none; cursor: pointer;
  color: var(--texto); font: 700 15px/1.3 var(--letra); text-decoration: underline; text-underline-offset: 3px;
}
.ax-escribir:hover { color: var(--fucsia); }

/* -------------------------------------------------------------------- pasos */

.ax-cabeza { display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-5) 0; }
.ax-atras {
  width: var(--at-tactil-min); height: var(--at-tactil-min); flex: none; border: 0; border-radius: var(--at-radio-capsula); cursor: pointer;
  display: grid; place-items: center; background: var(--at-color-superficie); color: var(--tinta); box-shadow: 0 1px 0 var(--borde);
}
.ax-atras:hover { color: var(--fucsia); }
.ax-progreso { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--at-esp-1); }
.ax-progreso span { height: 6px; border-radius: var(--at-radio-capsula); background: var(--rosa-papel); transition: background var(--at-dur-media); }
.ax-progreso span.hecho { background: var(--fucsia); }
.ax-paso { font-size: 12px; font-weight: 800; color: var(--texto-suave); }

.ax-cuerpo { flex: 1; padding: var(--at-esp-5) var(--at-esp-5) var(--at-esp-2); }
.ax-pie { position: sticky; bottom: 0; padding: var(--at-esp-3) var(--at-esp-5) var(--at-esp-4); background: var(--crema); }

.ax-rejilla { display: grid; gap: var(--at-esp-3); margin-top: var(--at-esp-4); }
.ax-rejilla.dos { grid-template-columns: 1fr 1fr; }
.ax-rejilla.ocasiones { grid-template-columns: 1fr 1fr; }
.ax-rejilla.gustos { grid-template-columns: 1fr; gap: var(--at-esp-2); }
.ax-rejilla.presupuestos { grid-template-columns: 1fr 1fr; }
.ax-rejilla.presupuestos .ax-opcion:last-child { grid-column: 1 / -1; }

.ax-tarjeta, .ax-gusto, .ax-opcion, .ax-foto {
  border: 1.5px solid var(--borde); background: var(--at-color-superficie); color: var(--tinta); cursor: pointer; text-align: left;
  font-family: var(--letra); border-radius: var(--at-radio-l);
  transition: border-color var(--at-dur-rapida), transform var(--at-dur-rapida) var(--curva), background var(--at-dur-rapida);
}
.ax-tarjeta:hover, .ax-gusto:hover, .ax-opcion:hover, .ax-foto:hover { border-color: var(--fucsia-claro); transform: translateY(-1px); }
.elegida { border-color: var(--fucsia) !important; background: var(--rosa-suave) !important; box-shadow: 0 0 0 2px var(--fucsia) inset; }

.ax-tarjeta { display: flex; align-items: center; gap: var(--at-esp-3); min-height: var(--at-tactil-min); padding: var(--at-esp-4) var(--at-esp-3); font-size: 15px; }
.ax-icono {
  width: 40px; height: 40px; flex: none; border-radius: var(--at-radio-s); display: grid; place-items: center;
  background: var(--rosa-papel); color: var(--fucsia);
}
.elegida .ax-icono { background: var(--fucsia); color: var(--at-color-superficie); }

.ax-foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ax-foto img { width: 100%; height: 88px; object-fit: cover; display: block; }
.ax-foto b { padding: var(--at-esp-3); font-size: 15px; }

.ax-gusto { display: flex; align-items: center; gap: var(--at-esp-3); min-height: var(--at-tactil-min); padding: var(--at-esp-3); }
.ax-gusto-texto { display: flex; flex-direction: column; gap: 2px; }
.ax-gusto-texto b { font-size: 15px; }
.ax-gusto-texto small { font-size: 13px; color: var(--texto-suave); }
.ax-contador { display: block; margin-top: var(--at-esp-3); font-size: 14px; font-weight: 800; color: var(--fucsia); min-height: 20px; }

.ax-opcion { min-height: var(--at-tactil-min); padding: var(--at-esp-4) var(--at-esp-3); font-size: 15px; font-weight: 800; text-align: center; }

.ax-fecha, .ax-ciudad { margin-top: var(--at-esp-5); display: grid; gap: var(--at-esp-2); }
.ax-fecha label, .ax-ciudad label { font-size: 15px; font-weight: 800; color: var(--tinta); }
.ax-fecha input, .ax-ciudad select {
  min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border: 1.5px solid var(--borde-fuerte); border-radius: var(--at-radio-m); background: var(--at-color-superficie);
  font: 600 16px/1.2 var(--letra); color: var(--tinta);
}
.ax-fecha input:focus, .ax-ciudad select:focus { border-color: var(--fucsia); }
.ax-faltan { font-size: 14px; font-weight: 800; color: var(--verde-texto); min-height: 20px; }

/* ------------------------------------------------------ yo, buscando */

.ax-motor { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--at-esp-8) var(--at-esp-7); }
.ax-lineas { list-style: none; margin: var(--at-esp-5) 0 0; padding: 0; display: grid; gap: var(--at-esp-3); }
.ax-linea { display: flex; align-items: flex-start; gap: var(--at-esp-3); font-size: 16px; font-weight: 700; color: var(--tinta); animation: atPestana var(--at-dur-media) var(--at-ease-salida) both; }
.ax-check {
  width: 24px; height: 24px; flex: none; border-radius: var(--at-radio-capsula); display: grid; place-items: center;
  background: var(--verde-fondo); color: var(--verde-texto); font-size: 12px; font-weight: 900;
}
.ax-espera { display: flex; align-items: center; gap: var(--at-esp-3); margin-top: var(--at-esp-4); font-size: 15px; font-weight: 700; color: var(--texto); }

/* ----------------------------------------------------------------- revelacion */

.ax-revelacion { padding: var(--at-esp-5); display: flex; flex-direction: column; gap: var(--at-esp-3); }
.ax-heroe {
  overflow: hidden; border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--borde);
  box-shadow: var(--at-elev-3);
  animation: atAcercar var(--at-dur-lenta) var(--at-ease-salida) both;
}
.ax-heroe img { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--rosa-suave); }
.ax-heroe-info { padding: var(--at-esp-4); display: grid; gap: var(--at-esp-2); }
.ax-heroe-titulo { font-size: 18px; line-height: 1.25; color: var(--tinta); }
.ax-heroe-precio { font-size: 18px; font-weight: 900; color: var(--azul-texto); }
.ax-heroe-porque { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto); }
.ax-confianza { display: grid; gap: var(--at-esp-1); margin-top: var(--at-esp-1); font-size: 13px; font-weight: 800; color: var(--texto-suave); }
.ax-barra { height: 6px; border-radius: var(--at-radio-capsula); background: var(--rosa-papel); overflow: hidden; }
.ax-barra span { display: block; height: 100%; border-radius: var(--at-radio-capsula); background: var(--fucsia); transform-origin: left; }

.ax-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-esp-2); }
.ax-acciones .ax-seguir { grid-column: 1 / -1; }
.ax-reaccion {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--at-esp-2);
  min-height: var(--at-tactil-min); padding: var(--at-esp-3); border-radius: var(--r-capsula); cursor: pointer;
  border: 1.5px solid var(--borde-fuerte); background: var(--at-color-superficie); color: var(--tinta); font: 800 15px/1.2 var(--letra);
}
.ax-reaccion:hover { border-color: var(--fucsia); color: var(--fucsia); }

.ax-otras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-esp-3); }
.ax-otra {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--at-radio-m); text-decoration: none;
  background: var(--at-color-superficie); border: 1px solid var(--borde); color: var(--tinta);
}
.ax-otra:hover { border-color: var(--fucsia); color: var(--tinta); }
.ax-otra img { width: 100%; height: 90px; object-fit: cover; display: block; }
.ax-otra b { padding: var(--at-esp-2) var(--at-esp-3) 2px; font-size: 14px; line-height: 1.3; }
.ax-otra span { padding: 0 var(--at-esp-3) var(--at-esp-3); font-size: 14px; font-weight: 800; color: var(--azul-texto); }

/* ============================================================ chat, segunda piel */

/* Barra de desplazamiento fina y del color de la casa: la gris del sistema
   partia el panel en dos. */
.atineo-hilo, .atineo-escena, .atineo-cajon { scrollbar-width: thin; scrollbar-color: var(--rosa-papel) transparent; }
.atineo-hilo::-webkit-scrollbar, .atineo-escena::-webkit-scrollbar { width: 6px; }
.atineo-hilo::-webkit-scrollbar-thumb, .atineo-escena::-webkit-scrollbar-thumb { background: var(--rosa-papel); border-radius: var(--at-radio-capsula); }

.atineo-msj.nuevo { animation: atPestana var(--at-dur-media) var(--at-ease-salida) both; }
.de-atineo .atineo-cuerpo { max-width: calc(100% - 36px); flex: 1; }

/* Pensando: tres puntos que suben y bajan (at-anim-pensar) y la palabra al lado;
   el JS lo mantiene al menos 1400 ms. */
.atineo-pensando .atineo-puntos {
  display: inline-flex; align-items: center; gap: var(--at-esp-2);
  padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m);
  border-bottom-left-radius: var(--at-radio-s);
  background: var(--at-color-superficie); border: 1px solid var(--borde);
  font-size: 14px; font-weight: 700; color: var(--texto);
}
.atineo-puntos i { width: 8px; height: 8px; border-radius: var(--at-radio-capsula); background: var(--fucsia-claro); }
.atineo-puntos i:nth-child(2) { animation-delay: 150ms; }
.atineo-puntos i:nth-child(3) { animation-delay: 300ms; }
.atineo-puntos .atineo-puntos-texto { margin-left: var(--at-esp-1); }
.ax-espera i { width: 8px; height: 8px; border-radius: var(--at-radio-capsula); background: var(--fucsia-claro); }
.ax-espera i:nth-child(2) { animation-delay: 150ms; }
.ax-espera i:nth-child(3) { animation-delay: 300ms; }

/* ------------------------------------------------------------ resultados */

.atineo-resultados { display: grid; gap: var(--at-esp-2); }

.atineo-heroe, .atineo-fila {
  background: var(--at-color-superficie); border: 1px solid var(--borde); border-radius: var(--at-radio-l); overflow: hidden;
  transition: border-color var(--at-dur-base), opacity var(--at-dur-base);
}
.atineo-heroe { box-shadow: var(--at-elev-1); }
.atineo-heroe:hover, .atineo-fila:hover { border-color: var(--fucsia-claro); }
.atineo-heroe.le-gusta, .atineo-fila.le-gusta { border-color: var(--fucsia); box-shadow: 0 0 0 1px var(--fucsia) inset; }
.atineo-heroe.no-va, .atineo-fila.no-va { opacity: 0.45; }

.atineo-foto { display: block; position: relative; background: var(--rosa-suave); }
.atineo-foto img { display: block; width: 100%; object-fit: cover; }
.atineo-heroe .atineo-foto img { height: 168px; }
.atineo-marca {
  position: absolute; left: var(--at-esp-3); top: var(--at-esp-3); padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--r-capsula);
  background: var(--fucsia); color: var(--at-color-superficie); font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
}

.atineo-fila { display: grid; grid-template-columns: 84px 1fr; }
.atineo-fila .atineo-foto img { height: 100%; min-height: 108px; }

.atineo-info { display: grid; gap: var(--at-esp-1); padding: var(--at-esp-3); min-width: 0; }
.atineo-heroe .atineo-info { padding: var(--at-esp-4); gap: var(--at-esp-2); }
.atineo-titulo {
  color: var(--tinta); font-weight: 800; font-size: 15px; line-height: 1.3; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atineo-heroe .atineo-titulo { font-size: 17px; }
.atineo-titulo:hover { color: var(--fucsia); }
.atineo-linea { display: flex; align-items: center; gap: var(--at-esp-2); flex-wrap: wrap; }
.atineo-precio { font-weight: 900; color: var(--azul-texto); font-size: 15px; }
.atineo-heroe .atineo-precio { font-size: 17px; }
.atineo-nivel {
  padding: 2px var(--at-esp-2); border-radius: var(--r-capsula); font-size: 12px; font-weight: 800;
  background: var(--verde-fondo); color: var(--verde-texto);
}
.atineo-nivel.media { background: var(--ambar-fondo); color: var(--ambar-texto); }
.atineo-nivel.baja { background: var(--rosa-suave); color: var(--texto-suave); }
.atineo-porque {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.atineo-heroe .atineo-porque { font-size: 14px; }
.atineo-llega { display: inline-flex; align-items: center; gap: var(--at-esp-1); font-size: 13px; font-weight: 700; color: var(--verde-texto); }
.atineo-llega svg { flex: none; }

.atineo-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--at-esp-2); margin-top: var(--at-esp-1); }
.atineo-reacciones { display: flex; gap: var(--at-esp-1); }
.atineo-reaccion {
  width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-capsula); cursor: pointer; display: grid; place-items: center;
  background: var(--at-color-superficie); border: 1.5px solid var(--borde-fuerte); color: var(--texto-suave);
  transition: color var(--at-dur-rapida), border-color var(--at-dur-rapida), background var(--at-dur-rapida), transform var(--at-dur-rapida) var(--curva);
}
.atineo-reaccion.si:hover:not(:disabled) { color: var(--fucsia); border-color: var(--fucsia); background: var(--rosa-suave); transform: scale(1.06); }
.atineo-reaccion.no:hover:not(:disabled) { color: var(--tinta); border-color: var(--tinta); transform: scale(1.06); }
.atineo-reaccion.si.marcada { color: var(--at-color-superficie); background: var(--fucsia); border-color: var(--fucsia); }
.atineo-reaccion.no.marcada { color: var(--at-color-superficie); background: var(--texto-suave); border-color: var(--texto-suave); }
.atineo-reaccion:disabled { cursor: default; }
.atineo-reaccion:disabled:not(.marcada) { opacity: 0.4; }

.atineo-boton-regalar {
  display: inline-flex; align-items: center; gap: var(--at-esp-2); min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula);
  background: var(--fucsia); color: var(--at-color-superficie); font-weight: 800; font-size: 14px; text-decoration: none;
  transition: background var(--at-dur-rapida);
}
.atineo-boton-regalar:hover { background: var(--fucsia-hover); color: var(--at-color-superficie); }
.atineo-boton-regalar.chico { padding: var(--at-esp-2) var(--at-esp-3); font-size: 13px; }
.atineo-ver { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); font-weight: 800; font-size: 14px; color: var(--fucsia); text-decoration: none; }
.atineo-ver:hover { text-decoration: underline; }

.atineo-comparar {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--at-esp-2); margin-top: 2px;
  min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-3); border-radius: var(--r-capsula); cursor: pointer;
  background: transparent; border: 1.5px dashed var(--borde-fuerte); color: var(--tinta);
  font: 800 13px/1.2 var(--letra);
}
.atineo-comparar:hover { border-color: var(--fucsia); color: var(--fucsia); }

.atineo-tabla { overflow-x: auto; border-radius: var(--at-radio-m); border: 1px solid var(--borde); background: var(--at-color-superficie); animation: atPestana var(--at-dur-base) var(--at-ease-salida) both; }
.atineo-tabla table { border-collapse: collapse; width: 100%; min-width: 360px; font-size: 13px; }
.atineo-tabla th, .atineo-tabla td { padding: var(--at-esp-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.atineo-tabla tr:last-child th, .atineo-tabla tr:last-child td { border-bottom: 0; }
.atineo-tabla thead th, .atineo-tabla tr:first-child th { font-weight: 800; color: var(--tinta); background: var(--crema); }
.atineo-tabla th[scope="row"] { color: var(--texto-suave); font-weight: 800; white-space: nowrap; }
.atineo-tabla td { color: var(--tinta); }

/* ------------------------------------------------ fila de sugerencias */

.atineo-sugerencias {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: var(--at-esp-2);
}
.atineo-sugerencias::-webkit-scrollbar { display: none; }
.atineo-sugerencia { flex: none; white-space: nowrap; }
.atineo-sugerencia.accion { background: var(--tinta); color: var(--at-color-superficie); border-color: var(--tinta); }
.atineo-sugerencia.accion:hover { background: var(--tinta-caja); color: var(--at-color-superficie); filter: brightness(1.25); }
.atineo-sugerencia.accion.principal { display: inline-flex; align-items: center; background: var(--fucsia); border-color: var(--fucsia); text-decoration: none; filter: none; }

/* ------------------------------------------------------------ tu lista */

.atineo-lista { position: relative; }
.atineo-lista[hidden] { display: none; }
.atineo-lista-cuenta {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 var(--at-esp-1); border-radius: var(--at-radio-capsula);
  background: var(--fucsia-claro); color: var(--tinta); font-size: 12px; font-weight: 900; line-height: 16px; text-align: center;
}
.atineo-cajon {
  position: absolute; left: 0; right: 0; top: 68px; bottom: 0; z-index: 3; overflow-y: auto;
  background: var(--crema); padding: var(--at-esp-3) var(--at-esp-4); animation: atPestana var(--at-dur-base) var(--at-ease-salida) both;
}
.atineo-cajon[hidden] { display: none; }
.atineo-cajon-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--at-esp-3); }
.atineo-cajon-cabeza h3 { margin: 0; font: var(--at-texto-titulo-2); color: var(--tinta); }
.atineo-icono.oscuro { color: var(--tinta); font-size: 22px; }
.atineo-icono.oscuro:hover { background: var(--rosa-suave); color: var(--fucsia); }
.atineo-cajon-vacio { color: var(--texto-suave); font-size: 15px; }
.atineo-cajon-fila {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--at-esp-3); align-items: center;
  padding: var(--at-esp-2); margin-bottom: var(--at-esp-2); border-radius: var(--at-radio-m); background: var(--at-color-superficie); border: 1px solid var(--borde);
}
.atineo-cajon-fila img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--at-radio-s); }
.atineo-cajon-fila b { display: block; font-size: 14px; line-height: 1.3; color: var(--tinta); }
.atineo-cajon-fila span { font-size: 13px; color: var(--texto-suave); }

/* ================================================ «¿Atina para tu persona?» */

.fr-atineo {
  margin-top: var(--at-esp-4); padding: var(--at-esp-5); border-radius: var(--at-radio-l);
  background: var(--at-color-superficie); border: 1.5px solid var(--rosa-papel);
  box-shadow: var(--at-elev-1);
}
.fr-atineo[hidden] { display: none; }
.fr-atineo-cabeza { display: flex; align-items: center; gap: var(--at-esp-3); margin-bottom: var(--at-esp-3); }
.fr-atineo-cabeza h2 { margin: 0; font: var(--at-texto-titulo-2); color: var(--tinta); }
.fr-atineo-cabeza p { margin: 2px 0 0; font: var(--at-texto-meta); font-size: 14px; color: var(--texto-suave); }

.fr-atineo-fila { display: grid; grid-template-columns: 76px 1fr; gap: var(--at-esp-2); align-items: start; padding: var(--at-esp-1) 0; animation: atPestana var(--at-dur-base) var(--at-ease-salida) both; }
.fr-atineo-etiqueta { padding-top: var(--at-esp-3); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.fr-chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.fr-chip {
  min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula); cursor: pointer;
  background: var(--crema); border: 1.5px solid var(--borde); color: var(--tinta);
  font: 700 14px/1.3 var(--letra); transition: border-color var(--at-dur-rapida), background var(--at-dur-rapida), color var(--at-dur-rapida);
}
.fr-chip:hover { border-color: var(--fucsia-claro); color: var(--fucsia); }
.fr-chip.elegido { background: var(--fucsia); border-color: var(--fucsia); color: var(--at-color-superficie); }
.fr-chip.mas { border-style: dashed; color: var(--texto-suave); background: var(--at-color-superficie); }
.fr-atineo-pregunta { margin: var(--at-esp-3) 0 2px; font-size: 15px; line-height: 1.45; color: var(--tinta); font-weight: 700; }

.fr-atineo-evaluar {
  width: 100%; min-height: var(--at-tactil-min); margin-top: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-4); border: 0; border-radius: var(--r-capsula); cursor: pointer;
  background: var(--tinta); color: var(--at-color-superficie); font: 800 15px/1.2 var(--letra); transition: background var(--at-dur-rapida);
}
.fr-atineo-evaluar:hover:not(:disabled) { background: var(--tinta-caja); filter: brightness(1.25); }
.fr-atineo-evaluar:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: default; }

/* El veredicto: el color dice el resultado antes que el texto. */
.atineo-veredicto {
  --v: var(--verde-texto); --vf: var(--verde-fondo);
  margin-top: var(--at-esp-4); padding: var(--at-esp-4); border-radius: var(--at-radio-l); background: var(--vf);
  border: 1.5px solid color-mix(in srgb, var(--v) 30%, transparent);
  display: grid; gap: var(--at-esp-2); animation: atAcercar var(--at-dur-media) var(--at-ease-salida) both;
}
.atineo-veredicto.mejor, .atineo-veredicto.medias { --v: var(--ambar-texto); --vf: var(--ambar-fondo); }
.atineo-veredicto.no { --v: var(--fucsia); --vf: var(--rosa-suave); }
.atineo-veredicto-cabeza { display: flex; align-items: center; gap: var(--at-esp-3); }
.atineo-veredicto-cabeza b { font-size: 17px; color: var(--tinta); line-height: 1.3; }
.atineo-veredicto-marca {
  width: 32px; height: 32px; flex: none; border-radius: var(--at-radio-capsula); display: grid; place-items: center;
  background: var(--v); color: var(--at-color-superficie); font-weight: 900; font-size: 16px;
}
.atineo-veredicto-razones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--at-esp-1); font-size: 15px; color: var(--tinta); }
.atineo-veredicto-razones li::before { content: "✓ "; font-weight: 900; color: var(--verde-texto); }
.atineo-veredicto-razones li.no::before { content: "○ "; color: var(--texto-suave); }
.atineo-veredicto-acciones { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); align-items: center; margin-top: 2px; }
.atineo-veredicto .ax-confianza { margin-top: 0; }

.atineo-recomienda.cargando [data-atineo-recomienda-lista] { opacity: 0.45; transition: opacity var(--at-dur-base); }

/* Aviso de error del chat y de la ficha (role="alert"). */
.atineo-aviso-error { margin: 0; font-size: 15px; font-weight: 700; color: var(--at-color-error); }

@media (max-width: 760px) {
  .fr-atineo-fila { grid-template-columns: 1fr; gap: var(--at-esp-2); }
  .fr-atineo-etiqueta { padding-top: 0; }
}

/* El catalogo: `capturas/02-catalogo.jpg`. Todo con prefijo `cat-`. UI/UX v4: tokens `--at-*`, sin degradados. */

.cat .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ cabecera */

.cat-cabeza { background: var(--at-color-superficie); border-bottom: 1px solid var(--at-color-borde); }
.cat-cabeza .contenido { padding-top: var(--at-esp-8); padding-bottom: var(--at-esp-7); }
.cat-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--at-esp-3) var(--at-esp-5); flex-wrap: wrap; }
.cat-titulo h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; max-width: 20em; }
.cat-titulo h1 .ceja { margin-bottom: var(--at-esp-2); font-weight: 400; letter-spacing: 0.16em; line-height: 1.6; }
.cat-conteo { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: 0; }
.cat-entrada { font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-texto-2); max-width: 58em; margin: var(--at-esp-4) 0 0; }

.cat-buscar {
  display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-2) var(--at-esp-2) var(--at-esp-2) var(--at-esp-5); border-radius: var(--at-radio-capsula);
  background: var(--at-color-fondo); border: 1.5px solid var(--at-color-borde-campo); margin-top: var(--at-esp-6);
  transition: border-color var(--at-dur-base) var(--at-ease-estandar);
}
.cat-buscar:focus-within { border-color: var(--at-color-marca); box-shadow: var(--at-foco); }
.cat-buscar img { width: 28px; flex: none; }
/* El foco del campo lo lleva el contenedor (`:focus-within` de arriba). */
.cat-buscar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--letra);
  font-size: 16px; color: var(--at-color-tinta); padding: var(--at-esp-3) 0; min-height: var(--at-tactil-min);
}
.cat-buscar input::placeholder { color: var(--at-color-texto-2); }
.cat-buscar input::-webkit-search-cancel-button { display: none; }
.cat-borrar { font-size: 14px; color: var(--at-color-texto-2); padding: var(--at-esp-3); min-height: var(--at-tactil-min); display: inline-flex; align-items: center; }
.cat-buscar .boton { flex: none; padding: var(--at-esp-3) var(--at-esp-5); min-height: var(--at-tactil-min); }

.cat-para { display: flex; align-items: center; gap: var(--at-esp-2); margin-top: var(--at-esp-4); flex-wrap: wrap; }
.cat-para > span { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin-right: var(--at-esp-1); }
.cat-pildora {
  padding: var(--at-esp-2) var(--at-esp-4); min-height: var(--at-tactil-min); display: inline-flex; align-items: center; border-radius: var(--at-radio-capsula);
  border: 1.5px solid var(--at-color-borde-campo); background: var(--at-color-superficie);
  color: var(--at-color-tinta); font-size: 14px; font-weight: 700;
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), background-color var(--at-dur-base) var(--at-ease-estandar);
}
.cat-pildora:hover { border-color: var(--at-color-marca); color: var(--at-color-tinta); }
.cat-pildora.activa { background: var(--at-color-marca); border-color: var(--at-color-marca); color: var(--at-color-superficie); }

/* -------------------------------------------------------------- cuerpo */

.cat-cuerpo {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--at-esp-8); align-items: start;
  padding-top: var(--at-esp-8); padding-bottom: var(--at-esp-6);
}

/* -------------------------------------------------------------- afinar */

/* Sin `sticky`: con los gustos abiertos es mas alto que la pantalla, y pegado
   arriba su final solo se alcanza al terminar la rejilla. */
.cat-afinar { position: relative; display: flex; flex-direction: column; gap: var(--at-esp-5); }
.cat-plegable { position: relative; }
.cat-afinar-cabeza { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: default; margin-bottom: var(--at-esp-5); min-height: var(--at-tactil-min); }
.cat-afinar-cabeza::-webkit-details-marker { display: none; }
.cat-afinar-cabeza h2 { font: var(--at-texto-titulo-2); margin: 0; letter-spacing: 0; }
.cat-flecha { display: none; }
.cat-limpiar { position: absolute; right: 0; top: 0; font-size: 14px; font-weight: 700; z-index: 1; min-height: var(--at-tactil-min); display: inline-flex; align-items: center; }
.cat-afinar-grupos { display: flex; flex-direction: column; gap: var(--at-esp-5); }

.cat-grupo { border: 0; margin: 0; padding: var(--at-esp-4) 0 0; min-width: 0; border-top: 1px solid var(--at-color-borde); display: flex; flex-direction: column; gap: var(--at-esp-2); }
.cat-afinar-grupos > .cat-grupo:first-child { border-top: 0; padding-top: 0; }
.cat-grupo-titulo { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); padding: 0; margin-bottom: var(--at-esp-2); float: left; width: 100%; }
.cat-grupo-titulo + * { clear: both; }

.cat-atajo { display: block; cursor: pointer; }
.cat-atajo input { position: absolute; opacity: 0; pointer-events: none; }
.cat-atajo span {
  display: flex; align-items: center; padding: var(--at-esp-3) var(--at-esp-4); min-height: var(--at-tactil-min); border-radius: var(--at-radio-s); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  font-size: 14px; font-weight: 700; color: var(--at-color-tinta);
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), background-color var(--at-dur-base) var(--at-ease-estandar);
}
.cat-atajo:hover span { border-color: var(--at-color-marca); }
.cat-atajo input:checked + span, .cat-atajo.activa span { background: var(--at-color-marca-papel); border-color: var(--at-color-marca); color: var(--at-color-marca-hover); }
.cat-atajo input:focus-visible + span { box-shadow: var(--at-foco); }

.cat-chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.cat-chip { position: relative; cursor: pointer; }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cat-chip span {
  display: inline-flex; align-items: center; padding: var(--at-esp-2) var(--at-esp-3); min-height: var(--at-tactil-min); border-radius: var(--at-radio-capsula);
  background: var(--at-color-superficie); border: 1px solid var(--at-color-borde-campo);
  font: var(--at-texto-meta); font-weight: 600; color: var(--at-color-texto-2);
  transition: border-color var(--at-dur-rapida) var(--at-ease-estandar), background-color var(--at-dur-rapida) var(--at-ease-estandar), color var(--at-dur-rapida) var(--at-ease-estandar);
}
.cat-chip:hover span { border-color: var(--at-color-marca); }
.cat-chip input:checked + span { background: var(--at-color-tinta); border-color: var(--at-color-tinta); color: var(--at-color-superficie); }
.cat-chip input:focus-visible + span { box-shadow: var(--at-foco); }

.cat-mas summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--at-color-dato-fuerte); list-style: none; margin: var(--at-esp-1) 0 var(--at-esp-2); min-height: var(--at-tactil-min); display: flex; align-items: center; }
.cat-mas summary::-webkit-details-marker { display: none; }

.cat-select {
  width: 100%; padding: var(--at-esp-3) var(--at-esp-4); min-height: var(--at-tactil-min); border-radius: var(--at-radio-s); border: 1px solid var(--at-color-borde-campo); background: var(--at-color-superficie);
  color: var(--at-color-tinta); font-family: var(--letra); font-size: 16px;
}

.con-script .cat-aplicar { display: none; }
.cat-aplicar { min-height: var(--at-tactil-min); }

.cat-pedir { padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-tinta); color: var(--at-color-superficie); margin-top: var(--at-esp-2); }
.cat-pedir div { display: flex; align-items: center; gap: var(--at-esp-2); }
.cat-pedir img { width: 24px; }
.cat-pedir b { font: var(--at-texto-cuerpo-fuerte); }
.cat-pedir p { font: var(--at-texto-meta); color: var(--at-color-superficie); opacity: 0.9; margin: var(--at-esp-2) 0 var(--at-esp-3); }
.cat-pedir .boton { width: 100%; background: var(--at-color-marca-claro); color: var(--at-color-tinta); padding: var(--at-esp-3) var(--at-esp-4); min-height: var(--at-tactil-min); font-size: 14px; }
.cat-pedir .boton:hover { background: var(--at-color-marca-papel); color: var(--at-color-tinta); }

/* ---------------------------------------------------------- resultados */

.cat-resultados { display: flex; flex-direction: column; gap: var(--at-esp-4); min-width: 0; }
.cat-barra { display: flex; align-items: center; gap: var(--at-esp-2) var(--at-esp-3); flex-wrap: wrap; }
.cat-quitar {
  font: var(--at-texto-meta); font-weight: 700; padding: var(--at-esp-2) var(--at-esp-2) var(--at-esp-2) var(--at-esp-3); min-height: var(--at-tactil-min); border-radius: var(--at-radio-capsula); background: var(--at-color-marca-papel);
  color: var(--at-color-marca-hover); display: inline-flex; align-items: center; gap: var(--at-esp-2);
}
.cat-quitar:hover { color: var(--at-color-marca-hover); background: var(--at-color-hover-lista); }
.cat-quitar span { width: 20px; height: 20px; border-radius: var(--at-radio-capsula); background: var(--at-color-marca-hover); color: var(--at-color-superficie); display: grid; place-items: center; font-size: 12px; }

.cat-orden { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: var(--at-esp-2); flex-wrap: wrap; }
.cat-orden legend { float: left; font: var(--at-texto-meta); color: var(--at-color-texto-2); padding: 0; margin-right: var(--at-esp-1); }
.cat-orden-op { cursor: pointer; position: relative; }
.cat-orden-op input { position: absolute; opacity: 0; pointer-events: none; }
.cat-orden-op span {
  display: inline-flex; align-items: center; padding: var(--at-esp-2) var(--at-esp-4); min-height: var(--at-tactil-min); border-radius: var(--at-radio-capsula); border: 1.5px solid var(--at-color-borde-campo); background: var(--at-color-superficie);
  font-size: 14px; font-weight: 700; color: var(--at-color-tinta);
  transition: border-color var(--at-dur-rapida) var(--at-ease-estandar), background-color var(--at-dur-rapida) var(--at-ease-estandar), color var(--at-dur-rapida) var(--at-ease-estandar);
}
.cat-orden-op input:checked + span { background: var(--at-color-tinta); border-color: var(--at-color-tinta); color: var(--at-color-superficie); }
.cat-orden-op input:focus-visible + span { box-shadow: var(--at-foco); }

.cat-aviso { margin: 0; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-aviso-fondo); color: var(--at-color-aviso); font: var(--at-texto-cuerpo-fuerte); }
.cat-resultados .resumen { margin: 0; font: var(--at-texto-meta); }

.cat-mejor {
  border-radius: var(--at-radio-xl); background: var(--at-color-marca); color: var(--at-color-superficie); padding: var(--at-esp-5) var(--at-esp-6); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: var(--at-esp-5); align-items: center; animation: atSubir var(--at-dur-media) var(--at-ease-salida) both;
}
.cat-mejor:hover { color: var(--at-color-superficie); background: var(--at-color-marca-hover); }
.cat-mejor .ceja { font: var(--at-texto-mono); letter-spacing: 0.14em; }
.cat-mejor b { display: block; font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-2); }
.cat-mejor div > span:last-child { display: block; font: var(--at-texto-cuerpo); font-size: 16px; opacity: 0.95; margin-top: var(--at-esp-2); }
.cat-mejor .boton { pointer-events: none; min-height: var(--at-tactil-min); }

.cat-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--at-esp-5); }

.cat-vacio { padding: 56px var(--at-esp-8); text-align: center; background: var(--at-color-superficie); border-radius: var(--at-radio-xl); border: 1px solid var(--at-color-borde); }
.cat-vacio img { width: 64px; margin: 0 auto; }
.cat-vacio h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-4) 0 var(--at-esp-2); }
.cat-vacio p { font: var(--at-texto-web-cuerpo); color: var(--at-color-texto-2); margin: 0 auto; max-width: 30em; }
.cat-vacio p a { text-decoration: underline; text-underline-offset: 2px; }
.cat-vacio-botones { display: flex; gap: var(--at-esp-3); justify-content: center; margin-top: var(--at-esp-5); flex-wrap: wrap; }
.cat-vacio-botones .boton { min-height: var(--at-tactil-min); }

.cat-resultados .paginacion { padding-top: var(--at-esp-5); }

.cat-promesas { list-style: none; padding: 0; margin: var(--at-esp-4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-3); }
.cat-promesas li { display: flex; gap: var(--at-esp-3); align-items: center; padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.cat-promesas li > span:first-child { width: 36px; height: 36px; border-radius: var(--at-radio-s); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.cat-promesas .verde { background: var(--at-color-ok-fondo); color: var(--at-color-ok); }
.cat-promesas .azul { background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); }
.cat-promesas .rosa { background: var(--at-color-marca-papel); color: var(--at-color-marca-hover); }
.cat-promesas li > span:last-child { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.cat-promesas b { display: block; color: var(--at-color-tinta); }

/* ---------------------------------------------------------------- tablet y celular */

@media (max-width: 1180px) {
  .cat-cuerpo { grid-template-columns: 1fr; gap: var(--at-esp-5); }
  .cat-plegable { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l); padding: var(--at-esp-2) var(--at-esp-5); }
  .cat-afinar-cabeza { cursor: pointer; margin: 0; }
  .cat-plegable[open] .cat-afinar-cabeza { margin-bottom: var(--at-esp-4); }
  .cat-flecha { display: block; width: 10px; height: 10px; border-right: 2px solid var(--at-color-marca); border-bottom: 2px solid var(--at-color-marca); transform: rotate(45deg); transition: transform var(--at-dur-base) var(--at-ease-estandar); margin-right: var(--at-esp-1); }
  .cat-plegable[open] .cat-flecha { transform: rotate(-135deg); }
  .cat-limpiar { right: 56px; top: var(--at-esp-2); }
  .cat-afinar-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-4) var(--at-esp-6); }
  .cat-afinar-grupos > .cat-aplicar { grid-column: 1 / -1; }
  /* En el celular empujaria la rejilla abajo; el estado vacio ya ofrece «Pedir a Atineo». */
  .cat-pedir { display: none; }
  .cat-afinar-grupos > .cat-grupo:nth-child(2) { border-top: 0; padding-top: 0; }
  .cat-promesas { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cat-cabeza .contenido { padding-top: var(--at-esp-6); padding-bottom: var(--at-esp-5); }
  .cat-titulo h1 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .cat-buscar { padding: var(--at-esp-1) var(--at-esp-1) var(--at-esp-1) var(--at-esp-4); gap: var(--at-esp-2); }
  .cat-buscar img { display: none; }
  .cat-buscar .boton { padding: var(--at-esp-3) var(--at-esp-4); }
  .cat-para { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: var(--at-esp-4) calc(var(--margen) * -1) 0; padding: 0 var(--margen) var(--at-esp-1); }
  .cat-para::-webkit-scrollbar { display: none; }
  .cat-pildora { white-space: nowrap; }
  .cat-afinar-grupos { grid-template-columns: 1fr; }
  .cat-afinar-grupos > .cat-grupo:nth-child(2) { border-top: 1px solid var(--at-color-borde); padding-top: var(--at-esp-4); }
  .cat-orden { margin-left: 0; }
  .cat-mejor { grid-template-columns: 1fr; padding: var(--at-esp-5); }
  .cat-mejor b { font: var(--at-texto-titulo-2); }
  .cat-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3); }
}

/* Como funciona: `capturas/06-como-funciona.jpg`. UI/UX v4: solo tokens `--at-*`, sin degradados. */

.como-cabeza { padding-top: var(--at-esp-10); }
.como-cabeza > * { max-width: 760px; }
.como-cabeza h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.como-cabeza .entrada { margin: var(--at-esp-5) 0 0; font: var(--at-texto-web-cuerpo); max-width: none; }

.como-recorrido {
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--at-esp-8); align-items: start;
  padding-top: var(--at-esp-9);
}

/* ------------------------------------------------------------------ indice */

.como-indice { display: flex; flex-direction: column; gap: var(--at-esp-2); position: sticky; top: 100px; }
.como-item {
  display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-4); min-height: var(--at-tactil-min);
  border-radius: var(--at-radio-l); border: 1px solid transparent; color: var(--at-color-tinta);
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar), box-shadow var(--at-dur-base) var(--at-ease-estandar);
}
.como-item:hover { background: var(--at-color-superficie); color: var(--at-color-tinta); }
.como-item b { display: block; font-weight: 800; font-size: 17px; line-height: 1.25; }
.como-item small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); margin-top: var(--at-esp-1); }
.como-num {
  width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-s); display: grid; place-items: center; flex: none;
  background: var(--at-color-neutro-fondo); color: var(--at-color-texto-2); font-weight: 800; font-size: 16px;
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.como-item.activo { background: var(--at-color-superficie); border-color: var(--at-color-borde); box-shadow: var(--at-elev-1); }
.como-item.activo .como-num { background: var(--at-color-marca); color: var(--at-color-superficie); }

.como-control { padding: var(--at-esp-3) var(--at-esp-1) 0; }
.como-barra { height: var(--at-esp-1); border-radius: var(--at-radio-capsula); background: var(--at-color-borde); overflow: hidden; }
/* La barra se llena con `transform` desde la izquierda; `como.js` fija la escala. */
.como-barra i { display: block; height: 100%; width: 100%; background: var(--at-color-marca); border-radius: var(--at-radio-capsula); transform: scaleX(0); transform-origin: left; }
.como-control-fila { display: flex; justify-content: space-between; align-items: center; margin-top: var(--at-esp-2); font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.como-control-fila button {
  border: 0; background: none; padding: 0 var(--at-esp-3); min-height: var(--at-tactil-min); min-width: var(--at-tactil-min);
  cursor: pointer; font-family: var(--letra); font-size: 14px; font-weight: 700; color: var(--at-color-dato-fuerte);
}

/* ------------------------------------------------------------------- pasos */

.como-pasos { display: flex; flex-direction: column; gap: var(--at-esp-6); }
.como-paso {
  border-radius: var(--at-radio-hoja); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); overflow: hidden;
  min-height: 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  scroll-margin-top: 100px;
}

/* Con el script, un paso a la vez. Sin el, los cuatro seguidos. */
.como-recorrido.con-pasos .como-paso { display: none; }
.como-recorrido.con-pasos .como-paso.activo { display: grid; }
.como-recorrido.con-pasos .como-texto { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

.como-escena { position: relative; display: grid; place-items: center; padding: 48px var(--at-esp-7); overflow: hidden; }
.como-escena-1 { background: var(--at-color-marca-papel); }
.como-escena-2 { background: var(--at-color-dato-fondo); }
.como-escena-3 { background: var(--at-color-aviso-fondo); }
.como-escena-4 { background: var(--at-color-ok-fondo); }
.como-ejemplo {
  position: absolute; left: var(--at-esp-5); top: var(--at-esp-5); font: var(--at-texto-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--at-color-texto-2);
  background: color-mix(in srgb, var(--at-color-superficie) 80%, transparent); padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula);
}
.escena { width: min(300px, 100%); position: relative; animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both; }

.como-texto { padding: var(--at-esp-9) var(--at-esp-8); display: flex; flex-direction: column; justify-content: center; gap: var(--at-esp-4); }
.como-texto .ceja { margin: 0; }
.como-texto h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.como-texto p { font: var(--at-texto-web-cuerpo); margin: 0; }
.como-texto .boton { align-self: flex-start; margin-top: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-6); min-height: var(--at-tactil-min); font-size: 15px; }
.como-icono { width: 56px; height: 56px; border-radius: var(--at-radio-m); background: var(--at-color-marca-papel); color: var(--at-color-marca); display: grid; place-items: center; }
.como-paso:nth-child(2) .como-icono { background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); }
.como-paso:nth-child(3) .como-icono { background: var(--at-color-aviso-fondo); color: var(--at-color-aviso); }
.como-paso:nth-child(4) .como-icono { background: var(--at-color-ok-fondo); color: var(--at-color-ok); }
.como-puntos { list-style: none; padding: 0; margin: var(--at-esp-1) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.como-puntos li { display: flex; gap: var(--at-esp-3); align-items: flex-start; font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-tinta); }
.como-puntos li::before {
  content: "✓"; width: 20px; height: 20px; border-radius: var(--at-radio-capsula); background: var(--at-color-ok-fondo); color: var(--at-color-ok);
  display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; margin-top: var(--at-esp-1);
}

/* Un retraso por elemento, declarado en el HTML como `--d`. */
.como-escena [style*="--d"] { animation-delay: var(--d); }

.como-tino {
  display: flex; align-items: center; gap: var(--at-esp-3); margin-top: var(--at-esp-4); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m);
  background: var(--at-color-superficie); font: var(--at-texto-meta); font-size: 14px; color: var(--at-color-tinta);
  animation: atSubir var(--at-dur-media) var(--at-ease-salida) both;
}
.como-tino img { width: 28px; flex: none; }

/* Escena 1: la ficha de una persona */
.como-ficha { border-radius: var(--at-radio-xl); background: var(--at-color-superficie); padding: var(--at-esp-5); box-shadow: var(--at-elev-3); }
.como-ficha-cabeza { display: flex; align-items: center; gap: var(--at-esp-3); }
.como-ficha-cabeza b { display: block; font-size: 16px; }
.como-ficha-cabeza small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.como-ficha .inicial { background: var(--at-color-marca-papel); color: var(--at-color-marca-hover); font-size: 16px; }
.como-listo {
  margin-left: auto; width: 28px; height: 28px; border-radius: var(--at-radio-capsula); background: var(--at-color-ok-fondo); color: var(--at-color-ok);
  display: grid; place-items: center; font-size: 14px; font-weight: 800; animation: comoAparece var(--at-dur-lenta) var(--at-ease-salida) both 1.4s;
}
.como-rotulo { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); margin: var(--at-esp-5) 0 var(--at-esp-2); }
.como-gusto {
  font: var(--at-texto-meta); font-weight: 700; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula);
  background: var(--at-color-marca); color: var(--at-color-superficie); animation: comoAparece var(--at-dur-lenta) var(--at-ease-salida) both;
}
.como-gusto.agregar { background: var(--at-color-superficie); color: var(--at-color-texto-2); border: 1.5px dashed var(--at-color-borde-campo); animation: none; }
.como-gusto.no { background: var(--at-color-neutro-fondo); color: var(--at-color-texto-2); }

/* Escena 2: el bolsillo */
.como-con-monedas { padding-top: var(--at-esp-2); }
.como-moneda {
  position: absolute; left: 50%; top: -30px; width: 32px; height: 32px; margin-left: -16px; border-radius: var(--at-radio-capsula);
  background: var(--at-color-dato); border: 3px solid var(--at-color-dato-fondo); z-index: 2; opacity: 0;
  animation: comoMoneda calc(var(--at-dur-celebracion) * 1.8) var(--at-ease-entrada) infinite; animation-delay: var(--d, 0s);
}
.como-bolsillo { border-radius: var(--at-radio-xl); background: var(--at-color-tinta); color: var(--at-color-superficie); padding: var(--at-esp-5); box-shadow: var(--at-elev-3); position: relative; overflow: hidden; }
.como-bolsillo .ceja { margin: 0; letter-spacing: var(--at-tracking-etiqueta); }
.como-bolsillo-cuerpo { display: flex; align-items: flex-end; gap: var(--at-esp-5); margin-top: var(--at-esp-3); }
.como-frasco { width: 76px; height: 152px; border-radius: var(--at-radio-m); background: color-mix(in srgb, var(--at-color-superficie) 12%, transparent); position: relative; overflow: hidden; flex: none; }
/* El nivel sube con `scaleY` desde abajo: la altura no se anima. */
.como-frasco i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: var(--at-color-dato);
  transform-origin: bottom; animation: comoLlenar calc(var(--at-dur-celebracion) * 2.4) var(--at-ease-salida) both;
}
.como-bolsillo-datos { flex: 1; min-width: 0; }
.como-bolsillo-datos b { display: block; font-weight: 800; font-size: 32px; letter-spacing: var(--at-tracking-titulo); line-height: 1; font-variant-numeric: tabular-nums; }
.como-bolsillo-datos small { display: block; font: var(--at-texto-meta); opacity: 0.85; margin-top: var(--at-esp-2); }
.como-bolsillo-datos ul { list-style: none; margin: var(--at-esp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.como-bolsillo-datos li { font: var(--at-texto-meta); display: flex; justify-content: space-between; animation: atSubir var(--at-dur-media) var(--at-ease-estandar) both; }
.como-bolsillo-datos li span { opacity: 0.85; }
.como-bolsillo-datos em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--at-color-ok-fondo); }
.como-bolsillo-botones { display: flex; gap: var(--at-esp-2); margin-top: var(--at-esp-5); }
.como-bolsillo-botones span {
  flex: 1; padding: var(--at-esp-3); min-height: var(--at-tactil-min); display: grid; place-items: center; border-radius: var(--at-radio-capsula);
  border: 1px solid color-mix(in srgb, var(--at-color-superficie) 30%, transparent); text-align: center; font: var(--at-texto-meta); font-weight: 700;
}
.como-bolsillo-botones .lleno { background: var(--at-color-dato); border-color: var(--at-color-dato); color: var(--at-color-tinta); }

/* Escena 3: el aviso */
.como-campana { display: flex; justify-content: center; margin-bottom: var(--at-esp-4); }
.como-campana > span {
  width: 64px; height: 64px; border-radius: var(--at-radio-capsula); background: var(--at-color-superficie); display: grid; place-items: center;
  box-shadow: var(--at-elev-1); position: relative; color: var(--at-color-marca);
}
.como-campana > span::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-capsula); background: var(--at-color-marca-papel);
  animation: atLatir calc(var(--at-dur-celebracion) * 1.8) var(--at-ease-salida) infinite;
}
.como-campana svg { position: relative; transform-origin: 50% 0; animation: comoCampana calc(var(--at-dur-celebracion) * 2.4) var(--at-ease-estandar) infinite; }
.como-aviso {
  border-radius: var(--at-radio-l); background: var(--at-color-tinta); color: var(--at-color-superficie); padding: var(--at-esp-4) var(--at-esp-5);
  box-shadow: var(--at-elev-3); animation: atSubir var(--at-dur-lenta) var(--at-ease-estandar) both 0.5s;
}
.como-aviso-app { display: flex; align-items: center; gap: var(--at-esp-2); font: var(--at-texto-meta); }
.como-aviso-app img { width: 20px; }
.como-aviso-app small { margin-left: auto; font-size: 12px; opacity: 0.8; }
.como-aviso > b { display: block; font-weight: 800; font-size: 16px; margin-top: var(--at-esp-2); line-height: 1.3; }
.como-aviso p { color: var(--at-color-superficie); font: var(--at-texto-cuerpo); opacity: 0.9; margin: var(--at-esp-1) 0 0; }
.como-ideas { display: flex; flex-direction: column; gap: var(--at-esp-2); margin-top: var(--at-esp-3); }
.como-ideas > div {
  display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3); border-radius: var(--at-radio-m); background: var(--at-color-superficie);
  box-shadow: var(--at-elev-1); animation: atSubir var(--at-dur-media) var(--at-ease-estandar) both;
}
.como-ideas i { width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-s); flex: none; }
.como-ideas i.t1 { background: var(--at-color-marca-papel); }
.como-ideas i.t2 { background: var(--at-color-ok-fondo); }
.como-ideas i.t3 { background: var(--at-color-aviso-fondo); }
.como-ideas span { flex: 1; min-width: 0; }
.como-ideas b { display: block; font-size: 14px; line-height: 1.25; }
.como-ideas small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.como-ideas em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--at-color-dato-fuerte); font-variant-numeric: tabular-nums; }

/* Escena 4: la entrega */
.como-camino { display: block; width: 100%; height: auto; }
.como-camino path { stroke: var(--at-color-texto-3); stroke-dasharray: 300; animation: comoCamino calc(var(--at-dur-celebracion) * 1.8) var(--at-ease-salida) both; }
.como-camino .origen { fill: var(--at-color-dato); }
.como-camino .destino { fill: var(--at-color-marca); }
.como-entrega { position: relative; height: 210px; display: flex; align-items: flex-end; justify-content: center; }
.como-chispa {
  position: absolute; left: 50%; bottom: 150px; width: 8px; height: 8px; margin-left: var(--x); border-radius: var(--at-radio-capsula);
  background: var(--at-color-marca); opacity: 0; animation: comoChispa calc(var(--at-dur-celebracion) * 1.5) var(--at-ease-salida) infinite; animation-delay: var(--d);
}
.como-chispa.azul { background: var(--at-color-dato); width: 8px; height: 8px; }
.como-chispa.claro { background: var(--at-color-marca-claro); }
.como-caja { position: relative; width: 190px; height: 130px; animation: comoCaja calc(var(--at-dur-celebracion) * 1.2) var(--at-ease-salida) both; }
.caja-cuerpo { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; border-radius: var(--at-radio-m); background: var(--at-color-tinta); box-shadow: var(--at-elev-3); }
.caja-cinta { position: absolute; left: 50%; bottom: 0; width: 24px; height: 100px; margin-left: -12px; background: var(--at-color-marca); }
.caja-tapa, .caja-lazo { transform-origin: 8% 100%; animation: comoTapa calc(var(--at-dur-celebracion) * 1.8) var(--at-ease-estandar) calc(var(--at-dur-celebracion) * 1.3) both; }
.caja-tapa { position: absolute; left: -8px; right: -8px; top: 24px; height: 32px; border-radius: var(--at-radio-s); background: var(--at-color-tinta); }
.caja-lazo { position: absolute; left: 50%; top: 4px; width: 24px; height: 32px; margin-left: -12px; background: var(--at-color-marca); border-radius: var(--at-radio-s) var(--at-radio-s) 0 0; }
.como-caja img { position: absolute; left: 50%; top: -34px; width: 68px; margin-left: -34px; opacity: 0; animation: atPop var(--at-dur-sello) var(--at-ease-salida) calc(var(--at-dur-celebracion) * 2.4) forwards; }
.como-nota {
  margin: var(--at-esp-4) auto 0; width: 220px; padding: var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-superficie);
  box-shadow: var(--at-elev-1); transform: rotate(-3deg); animation: comoNota var(--at-dur-lenta) var(--at-ease-salida) both calc(var(--at-dur-celebracion) * 2.8);
}
.como-nota p { font-family: var(--mano); font-size: 20px; line-height: 1.15; color: var(--at-color-tinta); margin: 0; }
.como-nota span { display: block; font-family: var(--mano); font-size: 18px; color: var(--at-color-marca); margin-top: var(--at-esp-2); }

/* ------------------------------------------------------------------ cierre */

.como-cierre {
  margin: 96px 0 var(--at-esp-2); padding: var(--at-esp-8) var(--at-esp-9); border-radius: var(--at-radio-hoja); background: var(--at-color-tinta); color: var(--at-color-superficie);
  display: flex; align-items: center; gap: var(--at-esp-6);
}
.como-cierre img { width: 72px; flex: none; }
.como-cierre > div { flex: 1; }
.como-cierre h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.como-cierre p { color: var(--at-color-superficie); opacity: 0.85; font: var(--at-texto-web-cuerpo); margin: var(--at-esp-2) 0 0; }
.como-boton-claro { background: var(--at-color-marca-claro); color: var(--at-color-tinta); flex: none; padding: var(--at-esp-4) var(--at-esp-6); min-height: var(--at-tactil-min); font-size: 16px; }
.como-boton-claro:hover { background: var(--at-color-marca-papel); color: var(--at-color-tinta); }

/* ------------------------------------------------------------- cabecera+ */

.como-cabeza .entrada { max-width: 720px; }
.como-acciones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); margin-top: var(--at-esp-8); }
.como-acciones .boton { min-height: var(--at-tactil-min); }
.como-resumen {
  list-style: none; padding: 0; margin: var(--at-esp-9) 0 0; max-width: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3);
}
.como-resumen li { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l); padding: var(--at-esp-4) var(--at-esp-5); }
.como-resumen b { display: block; font-weight: 800; font-size: 24px; color: var(--at-color-dato); letter-spacing: var(--at-tracking-titulo); font-variant-numeric: tabular-nums; }
.como-resumen span { display: block; font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin-top: var(--at-esp-1); }

/* Quien cae por `#recorrido` no queda debajo de la cabecera fija. */
.como-recorrido { scroll-margin-top: 90px; }

/* ------------------------------------------------ reparto tu / Atineo */

.como-reparto { margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.como-reparto > div {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--at-esp-3); align-items: baseline;
  padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-fondo); border: 1px solid var(--at-color-borde);
}
.como-reparto > .yo { background: var(--at-color-marca-papel); border-color: transparent; }
.como-reparto dt { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.como-reparto .yo dt { color: var(--at-color-marca-hover); }
.como-reparto dd { margin: 0; font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-tinta); }

/* ------------------------------------------------ cabeza de cada seccion */

.como-seccion-cabeza { max-width: 680px; margin-bottom: var(--at-esp-8); }
.como-seccion-cabeza .ceja { margin: 0 0 var(--at-esp-3); }
.como-seccion-cabeza h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: balance; }
.como-seccion-cabeza > p:last-child { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }

/* ------------------------------------------------------------ como decide */

.como-decide { padding-top: 96px; }
.como-decide-cuerpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--at-esp-8); align-items: start; }

.como-anatomia {
  position: relative; border-radius: var(--at-radio-hoja); background: var(--at-color-marca-papel); padding: 56px var(--at-esp-8) var(--at-esp-8);
  display: flex; flex-direction: column; gap: var(--at-esp-5);
}
.como-anat-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--at-esp-4); position: relative; }
.como-anat-fila:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: -16px; width: 2px; background: var(--at-color-marca-claro); opacity: 0.4;
}
.como-anat-num {
  width: 36px; height: 36px; border-radius: var(--at-radio-s); background: var(--at-color-superficie); color: var(--at-color-marca); font-weight: 800;
  display: grid; place-items: center; font-size: 16px;
}
.como-anat-num.lleno { background: var(--at-color-marca); color: var(--at-color-superficie); }
.como-anat-fila > div > b { display: block; font-weight: 800; font-size: 16px; margin: var(--at-esp-1) 0 var(--at-esp-3); color: var(--at-color-tinta); }
.como-senal { font: var(--at-texto-meta); font-weight: 700; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula); background: var(--at-color-marca); color: var(--at-color-superficie); }
.como-senal.no { background: var(--at-color-superficie); color: var(--at-color-texto-2); }
.como-descartes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.como-descartes li {
  display: flex; justify-content: space-between; gap: var(--at-esp-3); align-items: baseline;
  background: color-mix(in srgb, var(--at-color-superficie) 70%, transparent); border-radius: var(--at-radio-s); padding: var(--at-esp-2) var(--at-esp-3); font: var(--at-texto-cuerpo);
}
.como-descartes s { color: var(--at-color-texto-2); text-decoration-color: var(--at-color-marca); text-decoration-thickness: 2px; }
.como-descartes small { font: var(--at-texto-meta); color: var(--at-color-texto-2); text-align: right; }
.como-elegida { background: var(--at-color-superficie); border-radius: var(--at-radio-m); padding: var(--at-esp-4); box-shadow: var(--at-elev-3); }
.como-elegida-cabeza { display: flex; justify-content: space-between; gap: var(--at-esp-3); font-weight: 800; font-size: 16px; color: var(--at-color-tinta); }
.como-elegida-cabeza em { font-style: normal; color: var(--at-color-dato-fuerte); font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.como-elegida p { font: var(--at-texto-cuerpo); margin: var(--at-esp-2) 0 var(--at-esp-3); }
.como-elegida strong { color: var(--at-color-marca); }
.como-marca { font: var(--at-texto-meta); font-weight: 700; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula); background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); }
.como-marca.verde { background: var(--at-color-ok-fondo); color: var(--at-color-ok); }

.como-reglas { list-style: none; counter-reset: regla; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.como-reglas li {
  counter-increment: regla; position: relative; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  border-radius: var(--at-radio-l); padding: var(--at-esp-5) var(--at-esp-6) var(--at-esp-5) 68px;
}
.como-reglas li::before {
  content: counter(regla); position: absolute; left: var(--at-esp-5); top: var(--at-esp-5); width: 32px; height: 32px; border-radius: var(--at-radio-s);
  background: var(--at-color-tinta); color: var(--at-color-superficie); display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.como-reglas b { display: block; font: var(--at-texto-titulo-2); color: var(--at-color-tinta); }
.como-reglas p { margin: var(--at-esp-2) 0 0; font: var(--at-texto-cuerpo); font-size: 16px; }

/* --------------------------------------------------------------- despues */

.como-despues { padding-top: 96px; }
.como-linea {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-3);
}
.como-linea li { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l); padding: var(--at-esp-6); }
.como-linea-num {
  width: 36px; height: 36px; border-radius: var(--at-radio-capsula); display: grid; place-items: center; margin-bottom: var(--at-esp-4);
  background: var(--at-color-ok-fondo); color: var(--at-color-ok); font-weight: 800; font-size: 16px;
}
.como-linea li:last-child .como-linea-num { background: var(--at-color-marca); color: var(--at-color-superficie); }
.como-linea b { display: block; font: var(--at-texto-titulo-2); color: var(--at-color-tinta); }
.como-linea p { margin: var(--at-esp-2) 0 0; font: var(--at-texto-cuerpo); font-size: 16px; }
.como-letra-menuda { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: var(--at-esp-4) var(--at-esp-1) 0; }
.como-letra-menuda a { color: var(--at-color-dato-fuerte); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- hoy mismo */

.como-hoy { padding-top: 96px; }
.como-caminos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); }
.como-camino-tarjeta {
  display: flex; flex-direction: column; gap: var(--at-esp-3); padding: var(--at-esp-7); border-radius: var(--at-radio-hoja);
  color: var(--at-color-tinta); transition: transform var(--at-dur-base) var(--at-ease-salida), box-shadow var(--at-dur-base) var(--at-ease-salida);
}
a.como-camino-tarjeta:hover { color: var(--at-color-tinta); transform: translateY(-3px); box-shadow: var(--at-elev-1); }
.como-camino-tarjeta.rosa { background: var(--at-color-marca-papel); }
.como-camino-tarjeta.ambar { background: var(--at-color-aviso-fondo); }
.como-camino-tarjeta.azul { background: var(--at-color-dato-fondo); }
.como-camino-icono {
  width: 56px; height: 56px; border-radius: var(--at-radio-m); background: var(--at-color-superficie); display: grid; place-items: center; color: var(--at-color-marca);
}
.como-camino-tarjeta.ambar .como-camino-icono { color: var(--at-color-aviso); }
.como-camino-tarjeta.azul .como-camino-icono { color: var(--at-color-dato-fuerte); }
.como-camino-tarjeta b { font: var(--at-texto-titulo-2); font-size: 20px; margin-top: var(--at-esp-1); }
.como-camino-tarjeta p { margin: 0; font: var(--at-texto-cuerpo); font-size: 16px; flex: 1; }
.como-camino-tarjeta .enlace-azul { align-self: flex-start; margin-top: var(--at-esp-1); min-height: var(--at-tactil-min); display: inline-flex; align-items: center; font-size: 15px; }
.como-camino-tarjeta button.enlace-azul { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }

/* --------------------------------------------------------- lo que no hace */

.como-no {
  margin-top: 96px; padding: var(--at-esp-9); border-radius: var(--at-radio-hoja); background: var(--at-color-tinta); color: var(--at-color-superficie);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--at-esp-8); align-items: start;
}
.como-no .ceja { margin: 0 0 var(--at-esp-3); }
.como-no h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.como-no ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.como-no li { display: flex; gap: var(--at-esp-3); font: var(--at-texto-web-cuerpo); color: var(--at-color-superficie); }
.como-no li b { color: var(--at-color-superficie); font-weight: 800; }
.como-no li::before {
  content: "✕"; width: 24px; height: 24px; border-radius: var(--at-radio-capsula); flex: none; margin-top: var(--at-esp-1);
  background: color-mix(in srgb, var(--at-color-superficie) 14%, transparent); color: var(--at-color-marca-claro); display: grid; place-items: center; font-size: 12px; font-weight: 800;
}

/* -------------------------------------------------------------- preguntas */

.como-preguntas { max-width: 880px; margin: 0 auto; padding: 96px var(--margen) 0; }
.como-preguntas h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0 0 var(--at-esp-7); }

.como-cierre-botones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); flex: none; }
.como-cierre-botones .boton { min-height: var(--at-tactil-min); }

/* ------------------------------------------------------------- animaciones */
/* Solo `transform` y `opacity`. */

@keyframes comoAparece { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } }
@keyframes comoLlenar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes comoMoneda { 0% { opacity: 0; transform: translateY(-40px); } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes comoCampana { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } 70% { transform: rotate(0); } }
@keyframes comoCamino { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes comoCaja { 0% { transform: translateX(-60px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes comoTapa { 0%, 60% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-26px) rotate(-14deg); } }
@keyframes comoChispa { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
@keyframes comoNota { from { opacity: 0; transform: translateY(12px) rotate(-3deg); } to { opacity: 1; transform: rotate(-3deg); } }

/* ------------------------------------------------------------ tablet y celular */

@media (max-width: 1180px) {
  .como-cabeza h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .como-recorrido { grid-template-columns: 1fr; }
  .como-indice { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .como-control { grid-column: 1 / -1; }
  .como-paso { grid-template-columns: 1fr; min-height: 0; }
  .como-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .como-decide-cuerpo { grid-template-columns: 1fr; }
  .como-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .como-caminos { grid-template-columns: 1fr; }
  .como-no { grid-template-columns: 1fr; gap: var(--at-esp-5); }
}

@media (max-width: 760px) {
  .como-cabeza { padding-top: var(--at-esp-9); }
  .como-cabeza h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .como-indice { grid-template-columns: 1fr; gap: var(--at-esp-1); }
  .como-item { padding: var(--at-esp-2) var(--at-esp-3); }
  .como-escena { padding: 56px var(--at-esp-4) var(--at-esp-7); }
  .como-texto { padding: var(--at-esp-7) var(--at-esp-5); }
  .como-texto h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .como-cierre { flex-direction: column; align-items: flex-start; padding: var(--at-esp-7); }
  .como-acciones .boton { flex: 1 1 100%; text-align: center; }
  .como-resumen b { font-size: 20px; }
  .como-resumen li { padding: var(--at-esp-4); }
  .como-decide, .como-despues, .como-hoy { padding-top: 64px; }
  .como-no { margin-top: 64px; padding: var(--at-esp-7); }
  .como-no h2, .como-preguntas h2, .como-seccion-cabeza h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .como-preguntas { padding-top: 64px; }
  .como-anatomia { padding: 56px var(--at-esp-4) var(--at-esp-5); }
  .como-descartes li { flex-direction: column; gap: 0; }
  .como-descartes small { text-align: left; }
  .como-linea { grid-template-columns: 1fr; }
  .como-reparto > div { grid-template-columns: 1fr; gap: var(--at-esp-1); }
  .como-cierre-botones { width: 100%; }
  .como-cierre-botones .boton { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .como-moneda, .como-chispa { display: none; }
  .como-caja img { opacity: 1; }
  .como-barra i { transition: none; }
}

/* Comprar sin cuenta (`/regalo/{slug}/comprar`) y seguir el pedido (`/pedido/{acceso}`).
   Pantallas de dinero: sin Tino, el boton de pago es `dinero` (azul fuerte) con el monto en el texto. */

.compra { padding-top: var(--at-esp-6); padding-bottom: var(--at-esp-10); }
.compra-volver {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); margin-bottom: var(--at-esp-3);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--texto-suave); text-decoration: none;
}
.compra-volver:hover { color: var(--fucsia); }
.compra-aviso { padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--ambar-fondo); color: var(--ambar-texto); margin-bottom: var(--at-esp-5); }

.compra-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--at-esp-9); align-items: start; }
.compra-pasos { display: flex; flex-direction: column; gap: var(--at-esp-5); min-width: 0; }

.compra-titulo { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.compra-titulo h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-1) 0 var(--at-esp-3); text-wrap: balance; }
.compra-titulo p { margin: 0; color: var(--texto); font: var(--at-texto-web-cuerpo); max-width: 62ch; }
.compra-titulo a { color: var(--azul-texto); font-weight: 700; text-decoration: underline; }

.compra-paso {
  border: 1px solid var(--borde); border-radius: var(--r-tarjeta-grande); background: var(--blanco);
  padding: var(--at-esp-6); margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--at-esp-4);
}
.compra-paso legend, .compra-paso h2 {
  float: left; width: 100%; padding: 0; margin: 0 0 var(--at-esp-1);
  font: var(--at-texto-web-titulo-2); font-size: 20px; color: var(--tinta);
  display: flex; align-items: center; gap: var(--at-esp-3);
}
.compra-paso legend + * { clear: both; }
.compra-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--rosa-papel); color: var(--fucsia);
  display: inline-grid; place-items: center; font-size: 15px; font-weight: 800; flex: none;
}

.compra-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-4); }
.compra-fila .compra-campo--corto { grid-column: span 1; }
.compra-campo { display: flex; flex-direction: column; gap: var(--at-esp-2); min-width: 0; }
.compra-campo > span { font: var(--at-texto-meta); font-weight: 700; color: var(--texto); }
.compra-campo small { font-weight: 600; color: var(--texto-suave); }
.compra-campo input, .compra-campo select, .compra-campo textarea {
  width: 100%; padding: var(--at-esp-3) var(--at-esp-4); min-height: var(--at-tactil-min); border-radius: var(--r-campo);
  border: 1.5px solid var(--borde-fuerte); background: var(--crema); color: var(--tinta);
  font-family: var(--letra); font-size: 16px; transition: border-color var(--at-dur-base), background var(--at-dur-base);
}
.compra-campo textarea { resize: vertical; min-height: 84px; font-family: var(--mano); font-size: 22px; line-height: 1.3; }
.compra-campo input:focus-visible, .compra-campo select:focus-visible, .compra-campo textarea:focus-visible {
  border-color: var(--fucsia); background: var(--blanco); box-shadow: var(--at-foco); border-radius: var(--r-campo);
}
.compra-invalido input, .compra-invalido select, .compra-invalido textarea { border-color: var(--at-color-error); background: var(--at-color-error-fondo); animation: atAgitar 400ms var(--at-ease-estandar) both; }
.compra-invalido > span { color: var(--at-color-error); }

.compra-chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.compra-chip { position: relative; cursor: pointer; }
.compra-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.compra-chip span {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4);
  border-radius: var(--r-capsula); border: 1.5px solid var(--borde-fuerte);
  background: var(--blanco); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--texto);
  transition: background var(--at-dur-rapida), border-color var(--at-dur-rapida), color var(--at-dur-rapida);
}
.compra-chip input:checked + span { background: var(--fucsia); border-color: var(--fucsia); color: var(--at-color-superficie); }
.compra-chip input:focus-visible + span { box-shadow: var(--at-foco); }

.compra-mapa-marco { border-radius: var(--r-tarjeta); overflow: hidden; border: 1.5px solid var(--borde-fuerte); background: var(--rosa-suave); }
.compra-mapa { height: 320px; width: 100%; }
.compra-mapa-ayuda { margin: 0; padding: var(--at-esp-3) var(--at-esp-4); font: var(--at-texto-meta); color: var(--texto-suave); background: var(--blanco); border-top: 1px solid var(--borde); }

.compra-nota { margin: 0; font: var(--at-texto-cuerpo); color: var(--texto-suave); }

.compra-envios { display: flex; flex-direction: column; gap: var(--at-esp-3); }
.compra-envio {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "radio nombre costo" "radio promesa costo";
  column-gap: var(--at-esp-3); align-items: center; min-height: var(--at-tactil-min); padding: var(--at-esp-4); border-radius: var(--at-radio-m); border: 1.5px solid var(--borde-fuerte);
  cursor: pointer; transition: border-color var(--at-dur-rapida), background var(--at-dur-rapida);
}
.compra-envio input { grid-area: radio; accent-color: var(--fucsia); width: 24px; height: 24px; margin: 0; }
.compra-envio-nombre { grid-area: nombre; font-weight: 800; color: var(--tinta); }
.compra-envio-promesa { grid-area: promesa; font: var(--at-texto-meta); color: var(--texto-suave); }
.compra-envio-costo { grid-area: costo; font-size: 16px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.compra-envio:has(input:checked) { border-color: var(--fucsia); background: var(--crema); }
.compra-envio:has(input:focus-visible) { box-shadow: var(--at-foco); }

.compra-acepto { display: flex; gap: var(--at-esp-3); align-items: flex-start; min-height: var(--at-tactil-min); font: var(--at-texto-cuerpo); color: var(--texto); cursor: pointer; }
.compra-acepto input { margin-top: var(--at-esp-1); accent-color: var(--fucsia); width: 24px; height: 24px; flex: none; }
.compra-acepto a { color: var(--azul-texto); font-weight: 700; text-decoration: underline; }
.compra-acepto.compra-invalido span { color: var(--at-color-error); }
.compra-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.compra-resumen { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.compra-caja {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-tarjeta-grande); padding: var(--at-esp-5);
  display: flex; flex-direction: column; gap: var(--at-esp-4); box-shadow: var(--sombra-tarjeta);
}
.compra-producto { display: flex; gap: var(--at-esp-3); align-items: center; }
.compra-producto img { width: 72px; height: 72px; border-radius: var(--at-radio-m); object-fit: cover; background: var(--rosa-suave); flex: none; }
.compra-producto b { display: block; color: var(--tinta); line-height: 1.3; }
.compra-producto small { color: var(--texto-suave); }
.compra-cuentas { margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.compra-cuentas div { display: flex; justify-content: space-between; gap: var(--at-esp-3); font: var(--at-texto-cuerpo-fuerte); font-weight: 400; color: var(--texto); }
.compra-cuentas dt, .compra-cuentas dd { margin: 0; }
.compra-cuentas dd { font-variant-numeric: tabular-nums; }
.compra-total { border-top: 1px solid var(--borde); padding-top: var(--at-esp-3); font-size: 18px !important; font-weight: 800 !important; color: var(--tinta) !important; }
.compra-error { padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-error-fondo); color: var(--at-color-error); font: var(--at-texto-cuerpo-fuerte); }
.compra-pagar { width: 100%; min-height: var(--at-alto-cta); }
.compra-pagar:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: not-allowed; }
.compra-medios, .compra-seguro { margin: 0; font: var(--at-texto-meta); color: var(--texto-suave); }
.compra-wa { display: flex; align-items: center; justify-content: center; min-height: var(--at-tactil-min); text-align: center; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--texto-suave); }
.compra-wa:hover { color: var(--fucsia); }

/* Boton de pago: azul fuerte (dinero). Texto blanco solo con `-dato-fuerte`, nunca con el azul claro. */
.boton.dinero { background: var(--at-color-dato-fuerte); color: var(--at-color-superficie); font-size: 16px; font-variant-numeric: tabular-nums; }
.boton.dinero:hover { background: color-mix(in srgb, var(--at-color-dato-fuerte) 82%, var(--at-color-tinta)); color: var(--at-color-superficie); }
.boton.dinero:disabled, .boton.dinero:disabled:hover { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); }

/* Seguimiento */
.compra-seguimiento .compra-titulo { margin-bottom: var(--at-esp-8); }
.compra-linea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--at-esp-2); }
.compra-linea li {
  position: relative; padding: 40px var(--at-esp-2) 0; text-align: center; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--texto-suave);
}
.compra-linea li::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px;
  border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--blanco);
}
.compra-linea li.hecho { color: var(--tinta); }
.compra-linea li.hecho::before { background: var(--fucsia); border-color: var(--fucsia); animation: atPop var(--at-dur-lenta) var(--at-ease-rebote) both; }
.compra-datos { margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.compra-datos div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--at-esp-3); }
.compra-datos dt { margin: 0; font: var(--at-texto-meta); font-weight: 700; color: var(--texto-suave); }
.compra-datos dd { margin: 0; color: var(--tinta); }
.compra-mano { font-family: var(--mano); font-size: 24px; line-height: 1.25; }
/* Estado con punto + palabra. */
.compra-estado {
  margin: 0; padding: var(--at-esp-3); border-radius: var(--at-radio-s); font: var(--at-texto-cuerpo-fuerte); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: var(--at-esp-2); text-align: center;
}
.compra-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.compra-estado--si { background: var(--verde-fondo); color: var(--verde-texto); animation: atPop var(--at-dur-lenta) var(--at-ease-rebote) both; }
.compra-estado--no { background: var(--ambar-fondo); color: var(--ambar-texto); }

/* Pagar desde el pedido (panel → WhatsApp → cliente), y la pagina del boton de Bold. */
.compra-pagar-ahora { display: flex; text-align: center; text-decoration: none; }
.compra-marca-logo { width: 140px; height: auto; align-self: flex-start; }
.compra-bold { min-height: 56px; display: flex; }
.compra-bold button { font-family: var(--letra) !important; }
.compra-medios code { font: var(--at-texto-mono); background: var(--crema); padding: 2px var(--at-esp-2); border-radius: var(--at-radio-s); }

@media (max-width: 1180px) {
  .compra-rejilla { grid-template-columns: minmax(0, 1fr); }
  .compra-resumen { position: static; }
}

@media (max-width: 760px) {
  .compra-titulo h1 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .compra-paso { padding: var(--at-esp-5) var(--at-esp-4); }
  .compra-fila { grid-template-columns: minmax(0, 1fr); }
  .compra-mapa { height: 260px; }
  .compra-linea { grid-template-columns: repeat(2, 1fr); row-gap: var(--at-esp-4); }
  .compra-datos div { grid-template-columns: minmax(0, 1fr); gap: var(--at-esp-1); }
}

/* ------------------------------------------------ la familia graba (pedido) */
.compra-video { display: flex; gap: var(--at-esp-3); align-items: flex-start; margin-top: var(--at-esp-4); padding: var(--at-esp-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--at-radio-m); cursor: pointer; }
.compra-video input { margin-top: var(--at-esp-1); width: 24px; height: 24px; flex: none; accent-color: var(--fucsia); }
.compra-video small { display: block; margin-top: var(--at-esp-1); font-weight: 400; color: var(--texto-suave); }
.familia-intro { margin: 0 0 var(--at-esp-4); color: var(--texto); }
.familia-cerrado { padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-neutro-fondo); }
.familia-enlace { display: flex; gap: var(--at-esp-5); align-items: center; flex-wrap: wrap; }
.familia-qr { width: 160px; flex: none; }
.familia-qr svg { width: 100%; height: auto; display: block; }
.familia-acciones { flex: 1 1 240px; display: grid; gap: var(--at-esp-3); min-width: 0; }
.familia-acciones input { width: 100%; min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); border: 1px solid var(--borde-fuerte); font: inherit; font-size: 16px; }
.familia-botones { display: flex; gap: var(--at-esp-2); flex-wrap: wrap; }
.familia-botones a, .familia-botones button, .familia-yo button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4);
  border-radius: var(--r-capsula); border: 1px solid currentColor; background: none; font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; color: inherit; text-decoration: none;
}
/* Verde de WhatsApp: color de marca de un tercero; el texto va en tinta para pasar AA. */
.familia-botones .familia-wa { background: #25D366; border-color: #25D366; color: var(--at-color-tinta); }
.familia-yo { margin-top: var(--at-esp-4); }
.familia-yo button { background: none; color: inherit; border-color: currentColor; }
.familia h3 { margin: var(--at-esp-5) 0 var(--at-esp-2); font: var(--at-texto-titulo-2); }
.familia-lista { list-style: none; margin: 0; padding: 0; }
.familia-lista li { display: flex; justify-content: space-between; gap: var(--at-esp-3); padding: var(--at-esp-2) 0; border-bottom: 1px solid var(--borde); }
.familia-lista li span { color: var(--texto-suave); font-size: 15px; }
.familia-lista li span.ok { color: var(--at-color-ok); }
.familia-lista .vacio { color: var(--texto-suave); }
.familia-nota { display: block; margin-top: var(--at-esp-3); color: var(--texto-suave); }
.familia-unir { margin-top: var(--at-esp-6); padding-top: var(--at-esp-1); border-top: 1px solid var(--borde); }
.familia-unir h3 { margin-top: var(--at-esp-4); }
.familia-descargar { min-height: var(--at-tactil-min); padding: 0 var(--at-esp-5); border-radius: var(--r-capsula); border: 0; background: var(--fucsia); color: var(--at-color-superficie); font: inherit; font-weight: 700; cursor: pointer; }
.familia-descargar:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: progress; }
.familia-unir video { width: 100%; max-width: 360px; max-height: 60vh; border-radius: var(--at-radio-m); background: var(--at-color-tinta); margin: var(--at-esp-3) 0 var(--at-esp-2); display: block; }
.familia-unir [data-unir-resultado][hidden] { display: none; }

/* Crear cuenta o entrar: `capturas/10-registro.jpg`. */

.cuenta {
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--at-esp-10); align-items: center;
  padding-top: var(--at-esp-10); padding-bottom: var(--at-esp-6);
}

.cuenta-lado {
  background: var(--fucsia); border-radius: var(--r-bloque); padding: var(--at-esp-9); color: var(--at-color-superficie); min-height: 520px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--at-esp-8);
}
.cuenta-lado > img { width: 84px; }
.cuenta-lado h1 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.cuenta-lado p { color: var(--at-color-superficie); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }
.cuenta-lado .ceja { font-size: 12px; letter-spacing: var(--at-tracking-etiqueta); color: var(--at-color-superficie); }

.cuenta-caja {
  background: var(--blanco); border-radius: var(--r-bloque); border: 1px solid var(--borde); padding: var(--at-esp-8);
  display: flex; flex-direction: column; gap: var(--at-esp-5);
}

.cuenta-pestanas { display: flex; gap: var(--at-esp-1); padding: var(--at-esp-1); border-radius: var(--r-capsula); background: var(--crema); }
.cuenta-pestanas button {
  flex: 1; border: 0; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--r-capsula); background: none; cursor: pointer;
  font-family: var(--letra); font-size: 15px; font-weight: 700; color: var(--texto-suave);
  transition: background var(--at-dur-base), color var(--at-dur-base);
}
.cuenta-pestanas button[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: var(--at-elev-1); }
/* Sin script no hay pestanas: los dos paneles quedan a la vista, uno debajo del otro. */
.cuenta-caja:not(.con-pestanas) .cuenta-pestanas { display: none; }

.cuenta-panel { display: flex; flex-direction: column; gap: var(--at-esp-4); }
.cuenta-caja.con-pestanas .cuenta-panel:not([hidden]) { animation: atPestana var(--at-dur-base) var(--at-ease-salida) both; }
.cuenta-caja:not(.con-pestanas) .cuenta-panel + .cuenta-panel { border-top: 1px solid var(--borde); padding-top: var(--at-esp-5); }
.cuenta-panel h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.cuenta-nota { font: var(--at-texto-cuerpo); color: var(--texto-suave); margin: calc(var(--at-esp-2) * -1) 0 0; }

.cuenta-aviso { display: flex; gap: var(--at-esp-3); align-items: flex-start; padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--rosa-papel); }
.cuenta-aviso img { width: 32px; flex: none; }
.cuenta-aviso p { margin: 0; font: var(--at-texto-cuerpo); color: var(--tinta); }
.cuenta-aviso b { display: block; margin-bottom: var(--at-esp-1); }

.cuenta-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.cuenta-campos[disabled] .cuenta-campo input { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: not-allowed; }
.cuenta-campos[disabled] .cuenta-acepto { color: var(--at-color-deshabilitado-texto); }
.cuenta-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cuenta-campo { display: flex; flex-direction: column; gap: var(--at-esp-2); }
.cuenta-campo span { font: var(--at-texto-meta); font-weight: 700; color: var(--texto); }
.cuenta-campo input {
  min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--r-campo); border: 1.5px solid var(--borde-fuerte);
  font-family: var(--letra); font-size: 16px; color: var(--tinta); background: var(--crema);
  transition: border-color var(--at-dur-base), background var(--at-dur-base);
}
.cuenta-campo input:focus-visible { border-color: var(--fucsia); background: var(--blanco); box-shadow: var(--at-foco); border-radius: var(--r-campo); }

.cuenta-acepto { display: flex; gap: var(--at-esp-3); align-items: flex-start; min-height: var(--at-tactil-min); cursor: pointer; position: relative; margin-top: var(--at-esp-1); }
.cuenta-acepto input { position: absolute; opacity: 0; width: var(--at-tactil-min); height: var(--at-tactil-min); margin: 0; left: 0; top: 0; cursor: pointer; }
.cuenta-check {
  width: 24px; height: 24px; border-radius: var(--at-radio-s); border: 1.5px solid var(--borde-fuerte); background: var(--blanco); flex: none;
  display: grid; place-items: center; color: var(--at-color-superficie); font-size: 14px; font-weight: 800;
  transition: background var(--at-dur-base), border-color var(--at-dur-base);
}
.cuenta-acepto input:checked + .cuenta-check { background: var(--fucsia); border-color: var(--fucsia); }
.cuenta-acepto input:checked + .cuenta-check::after { content: "✓"; }
.cuenta-acepto input:focus-visible + .cuenta-check { box-shadow: var(--at-foco); }
.cuenta-acepto > span:last-child { font: var(--at-texto-cuerpo); color: var(--texto); }
.cuenta-acepto a { color: var(--azul-texto); font-weight: 700; text-decoration: underline; }

.cuenta-error { margin: 0; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-error-fondo); color: var(--at-color-error); font: var(--at-texto-cuerpo-fuerte); }

.cuenta-enviar { width: 100%; min-height: var(--at-alto-cta); }
.boton.cuenta-enviar[disabled] { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: not-allowed; }
.cuenta-pie { font: var(--at-texto-meta); color: var(--texto-suave); text-align: center; margin: calc(var(--at-esp-1) * -1) 0 0; }

/* ----------------------------------------------------------- bienvenida */

.cuenta-bienvenida { text-align: center; padding: var(--at-esp-6) 0 var(--at-esp-2); animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.cuenta-bienvenida:focus-visible { box-shadow: var(--at-foco); border-radius: var(--r-campo); }
.cuenta-tino { position: relative; display: inline-block; }
.cuenta-tino img { width: 110px; position: relative; animation: atPop var(--at-dur-lenta) var(--at-ease-rebote) both; }
.cuenta-confeti { position: absolute; inset: 0; pointer-events: none; }
.cuenta-confeti i {
  position: absolute; top: 40%; width: 8px; height: 12px; border-radius: 2px;
  animation: cuentaConfeti 1400ms var(--at-ease-salida) both;
}
/* «Atinaste» es el unico sello del sitio. */
.cuenta-bienvenida h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-5) 0 0; animation: atSello var(--at-dur-sello) var(--at-ease-rebote) both 300ms; }
.cuenta-bienvenida p { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-3) 0 var(--at-esp-5); }

@keyframes cuentaConfeti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), 220px) rotate(540deg); }
}

/* ---------------------------------------------------------------- movil */

@media (max-width: 1180px) {
  .cuenta { grid-template-columns: 1fr; gap: var(--at-esp-6); }
  .cuenta-lado { min-height: 0; padding: var(--at-esp-8); }
  .cuenta-lado h1 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .cuenta-caja { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 760px) {
  .cuenta { padding-top: var(--at-esp-6); }
  .cuenta-lado { padding: var(--at-esp-7); gap: var(--at-esp-5); border-radius: var(--at-radio-xl); }
  .cuenta-lado > img { width: 60px; }
  .cuenta-caja { padding: var(--at-esp-5); border-radius: var(--at-radio-xl); }
  .cuenta-panel h2 { font: var(--at-texto-titulo-1); }
  .cuenta-bienvenida h2 { font: var(--at-texto-titulo-1); }
}

/* /distribuidores: la pagina de venta de la red de distribuidores (UI/UX v4: tokens --at-*, sin degradados). */

.dist-cabeza { padding-top: 56px; padding-bottom: var(--at-esp-6); }
.dist-cabeza h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); max-width: 16em; text-wrap: pretty; }
.dist-cabeza .entrada { font: var(--at-texto-web-cuerpo); }
.dist-acciones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); margin-top: var(--at-esp-7); }
.dist-acciones .boton { min-height: var(--at-tactil-min); }
.dist-cifras { display: flex; flex-wrap: wrap; gap: var(--at-esp-4) 40px; list-style: none; padding: 0; margin: var(--at-esp-8) 0 0; }
.dist-cifras b { display: block; font: var(--at-texto-cifra); color: var(--at-color-dato); font-variant-numeric: tabular-nums; }
.dist-cifras span { font-size: 16px; color: var(--at-color-texto-2); }

.dist-pasos { padding-top: 40px; padding-bottom: 40px; }
.dist-pasos h2, .dist-niveles h2, .dist-cierre h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); text-wrap: pretty; }
.dist-pasos ol { list-style: none; counter-reset: paso; padding: 0; margin: var(--at-esp-6) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--at-esp-4); }
.dist-pasos li { counter-increment: paso; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  border-radius: var(--at-radio-l); padding: var(--at-esp-5); }
.dist-pasos li::before { content: counter(paso); display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--at-color-marca-papel); color: var(--at-color-marca); font-weight: 800; margin-bottom: var(--at-esp-3); }
.dist-pasos b { display: block; color: var(--at-color-tinta); font-size: 17px; margin-bottom: var(--at-esp-2); }
.dist-pasos span { font-size: 16px; line-height: 1.5; }

.dist-niveles { padding-top: var(--at-esp-6); padding-bottom: 40px; }
.dist-niveles-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--at-esp-4); margin-top: var(--at-esp-5); }
.dist-nivel { --dist-linea: color-mix(in srgb, var(--at-color-superficie) 20%, var(--at-color-tinta)); background: var(--at-color-tinta); color: var(--at-color-superficie); border-radius: var(--at-radio-l); padding: var(--at-esp-6); }
.dist-nivel .ceja { color: var(--at-color-marca-papel); opacity: 1; margin: 0; }
.dist-nivel b { display: block; font: var(--at-texto-web-titulo-1); color: var(--at-color-superficie); margin: var(--at-esp-2) 0; font-variant-numeric: tabular-nums; }
.dist-nivel span { display: block; font-size: 15px; color: var(--at-color-borde-campo); }
.dist-nivel small { display: block; margin-top: var(--at-esp-4); padding-top: var(--at-esp-3); border-top: 1px solid var(--dist-linea); font-size: 14px; color: var(--at-color-borde-campo); }
.dist-nota { margin-top: var(--at-esp-5); color: var(--at-color-texto-2); font-size: 16px; max-width: 42em; }

.dist-faq .emp-preguntas summary { min-height: var(--at-tactil-min); font-size: 17px; }
.dist-faq .emp-preguntas details p { font-size: 16px; }
.dist-faq > div:first-child a { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); }

.dist-cierre { text-align: center; padding-top: var(--at-esp-8); padding-bottom: var(--at-esp-10); }
.dist-cierre .boton { min-height: var(--at-tactil-min); }

@media (max-width: 1180px) {
  .dist-cabeza h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
}

@media (max-width: 760px) {
  .dist-cabeza { padding-top: var(--at-esp-8); }
  .dist-cabeza h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .dist-pasos h2, .dist-niveles h2, .dist-cierre h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .dist-acciones .boton { flex: 1 1 100%; }
  .dist-nivel b { font: var(--at-texto-cifra); }
}

/*
 * Atineo Empresas: `capturas/07-empresas.jpg` y `08-empresas-formulario-masivo.jpg`.
 *
 * Aqui el color de accion es el azul y no el fucsia: es la pagina del dinero y
 * de los datos, que es para lo que la marca reserva el azul. El boton de accion
 * usa el azul FUERTE (`-dato-fuerte`): el azul de dato no lleva texto blanco pequeno.
 *
 * Todo plano: sin degradados. La profundidad sale de `--at-elev-*`.
 */

/* Sobre fondos de tinta el texto es la superficie con distinta opacidad. Son
   derivados locales de los tokens, no colores nuevos. */
.emp-hero-banda, .emp-cifras-banda, .emp-ocasion.destacada, .emp-casa,
.emp-anual, .emp-colaborador, .emp-cotizar, .cta-final.emp-cta {
  --emp-claro-2: color-mix(in srgb, var(--at-color-superficie) 84%, transparent);
  --emp-claro-3: color-mix(in srgb, var(--at-color-superficie) 72%, transparent);
  --emp-claro-linea: color-mix(in srgb, var(--at-color-superficie) 16%, transparent);
  --emp-claro-fondo: color-mix(in srgb, var(--at-color-superficie) 8%, transparent);
}

.emp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boton.emp-azul { background: var(--at-color-dato-fuerte); color: var(--at-color-superficie); transition: box-shadow var(--at-dur-rapida) var(--at-ease-estandar), transform var(--at-dur-rapida) var(--at-ease-estandar); }
.boton.emp-azul:hover { background: var(--at-color-dato-fuerte); box-shadow: var(--at-elev-1); transform: translateY(-1px); }

/* ------------------------------------------------------------------ hero */

.emp-ini {
  width: calc(var(--at-esp-8) + var(--at-esp-1)); height: calc(var(--at-esp-8) + var(--at-esp-1)); border-radius: var(--at-radio-capsula);
  background: var(--at-color-marca-papel); color: var(--at-color-marca-hover);
  display: grid; place-items: center; font: var(--at-texto-meta); font-weight: 700; flex: none;
}
.emp-quien { flex: 1; min-width: 0; }
.emp-quien b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-quien small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }

/* ----------------------------------------------------------- banda duenas */

.emp-banda { border-top: 1px solid var(--at-color-borde); border-bottom: 1px solid var(--at-color-borde); background: var(--at-color-superficie); }
.emp-banda .contenido { display: flex; align-items: center; gap: var(--at-esp-9); padding-top: var(--at-esp-5); padding-bottom: var(--at-esp-5); flex-wrap: wrap; }
.emp-logos { display: flex; gap: var(--at-esp-9); align-items: center; margin-left: auto; }
.emp-logos img:first-child { height: 30px; width: auto; }
.emp-logos img:last-child { height: 46px; width: auto; }

.emp-comparativa { list-style: none; padding: 0; margin: var(--at-esp-7) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.emp-comparativa li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--at-esp-3);
  padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
}
.emp-no, .emp-si { display: flex; gap: var(--at-esp-3); align-items: flex-start; font: var(--at-texto-cuerpo); }
.emp-no { color: var(--at-color-texto-2); }
.emp-si { color: var(--at-color-tinta); font-weight: 600; }
.emp-no i, .emp-si i {
  width: var(--at-esp-5); height: var(--at-esp-5); border-radius: var(--at-radio-capsula); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; font-style: normal; flex: none; margin-top: 1px;
}
.emp-no i { background: var(--at-color-neutro-fondo); color: var(--at-color-texto-2); }
.emp-si i { background: var(--at-color-ok-fondo); color: var(--at-color-ok); }

/* ------------------------------------------------------------------ hero */

/* Oscuro y a todo el ancho: es la unica pagina del sitio que le habla a quien
   firma una compra, y tiene que verse distinta de la de regalar a la mama.
   Tinta plana: los resplandores de color se quitaron, no hay degradados. */
.emp-hero-banda { background: var(--at-color-tinta); color: var(--at-color-superficie); overflow: hidden; }
.emp-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--at-esp-9); align-items: center;
  padding-top: var(--at-esp-10); padding-bottom: var(--at-esp-10);
}
.emp-hero h1 { color: var(--at-color-superficie); font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: balance; }
.emp-hero h1 em { font-style: normal; color: var(--at-color-marca-claro); }
.emp-hero .entrada { color: var(--emp-claro-2); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-5) 0 0; max-width: 34em; }
.emp-hero .botones { margin-top: var(--at-esp-8); }
.emp-hero-sellos {
  list-style: none; padding: var(--at-esp-7) 0 0; margin: var(--at-esp-8) 0 0; display: flex; gap: var(--at-esp-8); flex-wrap: wrap;
  border-top: 1px solid var(--emp-claro-linea);
}
.emp-hero-sellos b { display: block; font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
.emp-hero-sellos span { display: block; font: var(--at-texto-cuerpo); color: var(--emp-claro-2); margin-top: var(--at-esp-1); }

.emp-escena { position: relative; min-height: 520px; display: flex; align-items: center; }
.emp-escena-foto {
  width: 86%; margin-left: auto; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: var(--at-radio-hoja);
  box-shadow: var(--at-elev-3);
}
.emp-flota {
  position: absolute; background: var(--at-color-superficie); color: var(--at-color-tinta); border-radius: var(--at-radio-l); padding: var(--at-esp-4);
  box-shadow: var(--at-elev-3);
}
.emp-flota-aviso { left: 0; bottom: var(--at-esp-8); width: 330px; animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both 0.5s, atFlotar 6s ease-in-out infinite 1.4s; }
.emp-flota-rotulo { display: flex; align-items: center; gap: var(--at-esp-2); font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-dato-fuerte); }
.emp-flota-rotulo i { width: var(--at-esp-2); height: var(--at-esp-2); border-radius: var(--at-radio-capsula); background: var(--at-color-dato); position: relative; }
.emp-flota-rotulo i::after { content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-capsula); background: var(--at-color-dato); animation: atLatir 1.6s var(--at-ease-salida) infinite; }
.emp-flota-fila { display: flex; align-items: center; gap: var(--at-esp-3); margin-top: var(--at-esp-3); }
.emp-flota-fila b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-flota-fila small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.emp-flota-regalo {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--at-esp-3); align-items: center;
  margin-top: var(--at-esp-3); padding: var(--at-esp-2); border-radius: var(--at-radio-m); background: var(--at-color-fondo);
}
.emp-flota-regalo img { width: 52px; height: 52px; border-radius: var(--at-radio-s); object-fit: cover; }
.emp-flota-regalo small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.emp-flota-regalo b { display: block; font: var(--at-texto-cuerpo); font-weight: 700; }
.emp-flota-regalo em { font-style: normal; font: var(--at-texto-meta); font-weight: 700; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula); background: var(--at-color-ok-fondo); color: var(--at-color-ok); }
.emp-flota-nota {
  right: calc(var(--at-esp-2) * -1); top: var(--at-esp-5); width: 250px; background: var(--at-color-superficie); border-radius: var(--at-radio-s); padding: var(--at-esp-5);
  transform: rotate(3deg); animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both 0.8s;
}
.emp-flota-nota p { font-family: var(--mano); font-size: 23px; line-height: 1.15; color: var(--at-color-tinta); margin: 0; }
.emp-flota-nota small { display: block; font-family: var(--mano); font-size: 18px; color: var(--at-color-marca); margin-top: var(--at-esp-2); }

/* La cinta de ideas. Se pausa con el cursor o el foco encima para poder leerla,
   y se detiene con `prefers-reduced-motion` (ver abajo). Los bordes ya no se
   desvanecen con una mascara de degradado: el corte es limpio. */
.emp-cinta {
  border-top: 1px solid var(--emp-claro-fondo); padding: var(--at-esp-5) 0 var(--at-esp-7); overflow: hidden;
}
.emp-cinta-pista { display: flex; width: max-content; animation: atMarquee 70s linear infinite; }
.emp-cinta:hover .emp-cinta-pista, .emp-cinta:focus-within .emp-cinta-pista { animation-play-state: paused; }
.emp-cinta ul { list-style: none; display: flex; gap: var(--at-esp-3); padding: 0 var(--at-esp-3) 0 0; margin: 0; }
.emp-cinta li {
  display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-1) var(--at-esp-5) var(--at-esp-1) var(--at-esp-1); border-radius: var(--at-radio-capsula);
  background: var(--emp-claro-fondo); border: 1px solid var(--emp-claro-linea); white-space: nowrap;
}
.emp-cinta img { width: 52px; height: 52px; border-radius: var(--at-radio-capsula); object-fit: cover; }
.emp-cinta b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--at-color-superficie); }
.emp-cinta small { display: block; font: var(--at-texto-meta); color: var(--emp-claro-2); }

/* ----------------------------------------------- la canasta contra uno a uno */

.emp-seccion-cabeza.centrada { margin: 0 auto; text-align: center; max-width: 46em; }
.emp-seccion-cabeza.centrada .entrada-media { margin: var(--at-esp-4) auto 0; }
.emp-contraste { padding-top: var(--at-esp-10); }
.emp-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-5); margin-top: var(--at-esp-9); align-items: stretch; }
.emp-lado { border-radius: var(--at-radio-xl); padding: var(--at-esp-8); position: relative; }
.emp-lado-rotulo { display: inline-block; font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; padding: var(--at-esp-2) var(--at-esp-3); border-radius: var(--at-radio-capsula); }
.emp-lado ul { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.emp-lado li { display: grid; grid-template-columns: calc(var(--at-esp-8) + var(--at-esp-1)) minmax(0, 1fr) auto; gap: var(--at-esp-3); align-items: center; padding: var(--at-esp-3); border-radius: var(--at-radio-m); }
.emp-lado li b { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-lado > p { font: var(--at-texto-cuerpo); margin: var(--at-esp-5) 0 0; }
/* Lo de siempre: apagado a proposito, pero con contraste AA (texto-2 sobre neutro). */
.emp-lado-gris { background: var(--at-color-neutro-fondo); }
.emp-lado-gris .emp-lado-rotulo { background: var(--at-color-borde-campo); color: var(--at-color-texto-2); }
.emp-lado-gris li { background: var(--at-color-superficie); color: var(--at-color-texto-2); }
.emp-lado-gris li b { color: var(--at-color-texto-2); font-weight: 600; }
.emp-lado-gris > p { color: var(--at-color-texto-2); }
.emp-ini.gris { background: var(--at-color-borde-campo); color: var(--at-color-texto-2); }
.emp-caja-igual { font: var(--at-texto-meta); padding: var(--at-esp-2) var(--at-esp-3); border-radius: var(--at-radio-capsula); background: var(--at-color-borde-campo); color: var(--at-color-texto-2); }
.emp-lado-atineo { background: var(--at-color-superficie); border: 2px solid var(--at-color-dato); box-shadow: var(--at-elev-3); }
.emp-lado-atineo .emp-lado-rotulo { background: var(--at-color-dato-fuerte); color: var(--at-color-superficie); }
.emp-lado-atineo li { background: var(--at-color-fondo); }
.emp-regalo-chip {
  display: inline-flex; align-items: center; gap: var(--at-esp-2); padding: var(--at-esp-1) var(--at-esp-3) var(--at-esp-1) var(--at-esp-1); border-radius: var(--at-radio-capsula);
  background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); font: var(--at-texto-meta); font-weight: 700; white-space: nowrap;
}
.emp-regalo-chip img { width: 30px; height: 30px; border-radius: var(--at-radio-capsula); object-fit: cover; }
.emp-regalo-chip.solo { padding: var(--at-esp-2) var(--at-esp-3); }
.emp-contraste .emp-comparativa { max-width: 920px; margin: var(--at-esp-8) auto 0; }

/* ------------------------------------------------------------- ocasiones */

.emp-ocasiones-seccion { padding-top: var(--at-esp-10); }
.emp-ocasiones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-5); margin-top: var(--at-esp-8); }
.emp-ocasion { border-radius: var(--at-radio-xl); overflow: hidden; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); display: flex; flex-direction: column; }
.emp-ocasion img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--at-dur-lenta) var(--at-ease-salida); background: var(--at-color-neutro-fondo); }
.emp-ocasion:hover img { transform: scale(1.04); }
.emp-ocasion > div { padding: var(--at-esp-6); position: relative; background: inherit; }
.emp-ocasion h3 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.emp-ocasion p { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-2) 0 0; }
.emp-ocasion.destacada {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  background: var(--at-color-tinta); border-color: var(--at-color-tinta);
}
.emp-ocasion.destacada img { aspect-ratio: auto; height: 100%; min-height: 320px; }
.emp-ocasion.destacada > div { padding: var(--at-esp-9); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.emp-ocasion.destacada h3 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-4); }
.emp-ocasion.destacada p { color: var(--emp-claro-2); }
.emp-ocasion.destacada .chip { background: color-mix(in srgb, var(--at-color-marca-claro) 22%, transparent); color: var(--at-color-marca-papel); }
.emp-ocasion.destacada .boton { margin-top: var(--at-esp-6); }

/* ---------------------------------------------------------------- cifras */

/* Azul fuerte plano (antes un degradado de azul a azul oscuro). */
.emp-cifras-banda { margin-top: var(--at-esp-10); background: var(--at-color-dato-fuerte); color: var(--at-color-superficie); }
.emp-cifras-banda ul { list-style: none; margin: 0; padding: var(--at-esp-9) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-8); }
.emp-cifras-banda b { display: block; font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); font-variant-numeric: tabular-nums; }
.emp-cifras-banda span { display: block; font: var(--at-texto-cuerpo); margin-top: var(--at-esp-3); color: var(--at-color-superficie); max-width: 16em; }

/* ------------------------------------------------------------- respaldo */

.emp-respaldo { padding-top: var(--at-esp-10); }
.emp-respaldo-cabeza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--at-esp-9); align-items: end; }
.emp-respaldo-cabeza h2 { margin: 0; }
.emp-respaldo-cabeza .entrada-media { margin: 0; }
.emp-pilares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--at-esp-9); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-xl); background: var(--at-color-superficie); overflow: hidden; }
.emp-pilares article { padding: var(--at-esp-8) var(--at-esp-6); }
.emp-pilares article + article { border-left: 1px solid var(--at-color-borde); }
.emp-pilares svg {
  width: 44px; height: 44px; padding: var(--at-esp-3); border-radius: var(--at-radio-s); background: var(--at-color-dato-fondo);
  fill: none; stroke: var(--at-color-dato-fuerte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.emp-pilares h3 { font: var(--at-texto-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-5) 0 0; }
.emp-pilares p { font: var(--at-texto-cuerpo); margin: var(--at-esp-2) 0 0; }
.emp-casas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: var(--at-esp-4); align-items: stretch; margin-top: var(--at-esp-4);
}
.emp-casa { display: flex; align-items: center; gap: var(--at-esp-6); padding: var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-tinta); color: var(--at-color-superficie); }
/* Logos de terceros sobre su propio recuadro blanco. */
.emp-casa img { height: 44px; width: auto; flex: none; background: var(--at-color-superficie); border-radius: var(--at-radio-s); padding: var(--at-esp-2) var(--at-esp-3); }
.emp-casa dl { margin: 0; display: grid; gap: var(--at-esp-2); }
.emp-casa dl div { display: flex; gap: var(--at-esp-3); font: var(--at-texto-meta); }
.emp-casa dt { color: var(--emp-claro-3); min-width: 6em; }
.emp-casa dd { margin: 0; font-weight: 600; }
.emp-casas-enlace { align-self: center; display: inline-flex; align-items: center; min-height: var(--at-tactil-min); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--at-color-dato-fuerte); white-space: nowrap; padding: 0 var(--at-esp-2); }

/* ------------------------------------------------------------ llamado */

.emp-llamado {
  margin-top: var(--at-esp-9); padding: var(--at-esp-8) var(--at-esp-9); border-radius: var(--at-radio-xl); background: var(--at-color-dato-fondo);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--at-esp-8); align-items: center;
}
.emp-llamado > img { width: 56px; }
.emp-mano { font-family: var(--mano); font-size: 27px; line-height: 1.2; color: var(--at-color-tinta); margin: 0; }
.emp-firma { font: var(--at-texto-cuerpo); margin: var(--at-esp-3) 0 0; }

/* ------------------------------------------------------------- portal */

.emp-portal { padding-top: var(--at-esp-10); }
.emp-portal-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--at-esp-5); flex-wrap: wrap; }
.emp-portal-cabeza h2 { margin: 0; }
.emp-aviso { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: var(--at-esp-2) 0 0; max-width: 40em; }

.emp-pestanas { display: none; gap: var(--at-esp-1); padding: var(--at-esp-1); border-radius: var(--at-radio-capsula); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.con-script .emp-pestanas { display: flex; }
.emp-pestanas button {
  border: 0; min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-5); border-radius: var(--at-radio-capsula); background: none; color: var(--at-color-texto-2);
  font: var(--at-texto-cuerpo-fuerte); font-family: var(--letra); font-weight: 600; cursor: pointer;
  transition: background var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.emp-pestanas button[aria-selected="true"] { background: var(--at-color-tinta); color: var(--at-color-superficie); font-weight: 700; }

/* Con script, un panel a la vez; sin el, los dos, uno debajo del otro. */
.emp-tablero, .emp-formulario { margin-top: var(--at-esp-6); }
.con-script [data-emp-portal][data-en="tablero"] .emp-formulario,
.con-script [data-emp-portal][data-en="formulario"] .emp-tablero { display: none; }
.con-script [data-emp-portal] [role="tabpanel"] { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

.emp-tablero { border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); overflow: hidden; }
.emp-barra-empresa { display: flex; align-items: center; gap: var(--at-esp-4); padding: var(--at-esp-4) var(--at-esp-6); border-bottom: 1px solid var(--at-color-borde); background: var(--at-color-fondo); flex-wrap: wrap; }
.emp-sello { width: calc(var(--at-esp-8) + var(--at-esp-1)); height: calc(var(--at-esp-8) + var(--at-esp-1)); border-radius: var(--at-radio-s); background: var(--at-color-tinta); color: var(--at-color-superficie); display: grid; place-items: center; font: var(--at-texto-meta); font-weight: 800; }
.emp-barra-empresa b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-barra-empresa small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.emp-selector { margin-left: auto; display: flex; gap: var(--at-esp-2); align-items: center; flex-wrap: wrap; }
.emp-selector span { font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.emp-selector button {
  border: 1.5px solid var(--at-color-borde-campo); background: var(--at-color-superficie); color: var(--at-color-tinta); min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-capsula);
  font: var(--at-texto-cuerpo); font-family: var(--letra); font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.emp-selector button:hover { border-color: var(--at-color-dato); }
.emp-selector button[aria-pressed="true"] { background: var(--at-color-dato-fuerte); border-color: var(--at-color-dato-fuerte); color: var(--at-color-superficie); }

.emp-tablero-cuerpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.emp-lateral { padding: var(--at-esp-6); border-right: 1px solid var(--at-color-borde); display: flex; flex-direction: column; gap: var(--at-esp-4); }
.emp-lateral > div > span { display: block; font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; }

.emp-anual { padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-tinta); color: var(--at-color-superficie); }
.emp-anual > span { color: var(--at-color-marca-claro); font-weight: 700; }
.emp-anual b { display: block; font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-2); font-variant-numeric: tabular-nums; }
.emp-anual small { display: block; font: var(--at-texto-meta); color: var(--emp-claro-2); margin-top: var(--at-esp-1); }
.emp-anual p { display: flex; justify-content: space-between; font: var(--at-texto-meta); margin: var(--at-esp-2) 0 0; color: var(--at-color-superficie); }
.emp-anual p + p { margin-top: var(--at-esp-1); }
.emp-anual p span { color: var(--emp-claro-2); }
.emp-anual code { font-family: var(--mono); font-size: 12px; background: none; color: inherit; padding: 0; }
.emp-anual code.verde { color: var(--at-color-ok-fondo); }

/* Barras: el ancho llega como proporcion en `--lleno` (0 a 1) y se pinta con
   `transform: scaleX`, que es lo unico que se anima. */
.emp-progreso { height: var(--at-esp-2); border-radius: var(--at-radio-capsula); background: var(--emp-claro-linea); margin-top: var(--at-esp-4); overflow: hidden; }
.emp-progreso i { display: block; width: 100%; height: 100%; background: var(--at-color-dato); border-radius: var(--at-radio-capsula); transform: scaleX(var(--lleno, 0)); transform-origin: left; transition: transform var(--at-dur-lenta) var(--at-ease-salida); }
.emp-progreso.claro { background: var(--at-color-borde); margin-top: var(--at-esp-3); }
.emp-progreso.claro i { background: var(--at-color-marca); }

.emp-mes { padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-dato-fondo); }
.emp-mes > span { color: var(--at-color-dato-fuerte); }
.emp-mes b { display: block; font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-1); font-variant-numeric: tabular-nums; }
.emp-mes small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); margin-top: var(--at-esp-1); }

.emp-perfiles { padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-fondo); border: 1px solid var(--at-color-borde); }
.emp-perfiles > span { color: var(--at-color-texto-2); }
.emp-perfiles p { margin: var(--at-esp-1) 0 0; font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.emp-perfiles p b { font: var(--at-texto-titulo-1); color: var(--at-color-tinta); margin-right: var(--at-esp-1); }

.emp-enlace { margin-top: var(--at-esp-2); display: inline-flex; align-items: center; min-height: var(--at-tactil-min); border: 0; background: none; padding: 0; cursor: pointer; font: var(--at-texto-cuerpo-fuerte); font-family: var(--letra); font-weight: 700; color: var(--at-color-dato-fuerte); text-align: left; transition: color var(--at-dur-rapida) var(--at-ease-estandar); }
.emp-enlace:hover { color: var(--at-color-marca); }

.emp-principal { padding: var(--at-esp-6); display: flex; flex-direction: column; gap: var(--at-esp-3); min-width: 0; }
.emp-titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--at-esp-3); flex-wrap: wrap; }
.emp-titulo-fila:not(:first-child) { margin-top: var(--at-esp-3); }
.emp-titulo-fila h3 { font: var(--at-texto-titulo-2); margin: 0; }
.emp-titulo-fila small { font: var(--at-texto-meta); color: var(--at-color-texto-2); }

.emp-fechas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.emp-fechas li {
  display: grid; grid-template-columns: 44px 1.2fr 1fr 1.1fr auto; gap: var(--at-esp-3); align-items: center;
  padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-fondo); border: 1px solid var(--at-color-borde);
}
.emp-fechas .emp-ini { font: var(--at-texto-meta); font-weight: 700; }
.emp-cuando { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.emp-propuesta { font: var(--at-texto-cuerpo); color: var(--at-color-tinta); }
.emp-aprobar {
  border: 0; min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--at-color-dato-fuerte); color: var(--at-color-superficie);
  font: var(--at-texto-meta); font-family: var(--letra); font-weight: 700; cursor: pointer; transition: background var(--at-dur-rapida) var(--at-ease-estandar);
}
.emp-aprobar:hover { background: var(--at-color-dato-fuerte); box-shadow: var(--at-elev-1); }
.emp-aprobar[aria-pressed="true"] { background: var(--at-color-ok-fondo); color: var(--at-color-ok); cursor: default; box-shadow: none; animation: atChip var(--at-dur-base) var(--at-ease-salida); }

.emp-catalogo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.emp-producto {
  border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-m); background: var(--at-color-superficie); overflow: hidden;
  display: flex; flex-direction: column; color: var(--at-color-tinta);
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida);
}
.emp-producto:hover { border-color: var(--at-color-dato); color: var(--at-color-tinta); transform: translateY(-2px); }
.emp-producto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--at-color-neutro-fondo); }
.emp-producto b { padding: var(--at-esp-3) var(--at-esp-3) 0; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-producto > span { display: flex; justify-content: space-between; align-items: center; gap: var(--at-esp-2); padding: var(--at-esp-2) var(--at-esp-3) var(--at-esp-3); margin-top: auto; }
.emp-producto small { font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.emp-producto em { font-style: normal; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--at-color-dato-fuerte); font-variant-numeric: tabular-nums; }
.emp-catalogo.cambia .emp-producto { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.emp-catalogo.cambia .emp-producto:nth-child(2) { animation-delay: 0.05s; }
.emp-catalogo.cambia .emp-producto:nth-child(3) { animation-delay: 0.1s; }
.emp-catalogo.cambia .emp-producto:nth-child(4) { animation-delay: 0.15s; }
.emp-vacio { grid-column: 1 / -1; font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: 0; }

/* --------------------------------------------------------- formulario */

.emp-formulario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--at-esp-6); }

.emp-rrhh { border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); padding: var(--at-esp-8); display: flex; flex-direction: column; gap: var(--at-esp-5); }
.emp-rrhh h3 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-2) 0 0; }
.emp-rrhh p { font: var(--at-texto-cuerpo); margin: var(--at-esp-2) 0 0; }
.emp-archivo { padding: var(--at-esp-5); border-radius: var(--at-radio-l); border: 1.5px dashed var(--at-color-texto-3); background: var(--at-color-fondo); display: flex; align-items: center; gap: var(--at-esp-4); }
.emp-archivo > div { flex: 1; min-width: 0; }
.emp-archivo b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-archivo small { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.emp-xls { width: 44px; height: 44px; border-radius: var(--at-radio-m); background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); display: grid; place-items: center; font: var(--at-texto-meta); font-weight: 800; flex: none; }
.emp-respuestas { display: flex; justify-content: space-between; font: var(--at-texto-cuerpo); margin: 0 !important; }
.emp-respuestas span { color: var(--at-color-texto-2); }

.emp-pendientes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }
.emp-pendientes li { display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3); border-radius: var(--at-radio-s); background: var(--at-color-fondo); }
.emp-pendientes .emp-ini { width: var(--at-esp-8); height: var(--at-esp-8); font: var(--at-texto-meta); font-weight: 700; }
.emp-pendientes li > span:nth-child(2) { flex: 1; font: var(--at-texto-cuerpo); font-weight: 600; }
.emp-pendientes .chip { font: var(--at-texto-meta); font-weight: 700; }
.emp-recordar { align-self: stretch; }
.emp-recordar[aria-pressed="true"] { background: var(--at-color-ok-fondo); color: var(--at-color-ok); border-color: var(--at-color-ok-fondo); cursor: default; }

.emp-colaborador { border-radius: var(--at-radio-xl); background: var(--at-color-tinta); padding: var(--at-esp-8); display: flex; flex-direction: column; }
.emp-colaborador .ceja { margin: 0; }
.emp-tarjeta-form { margin-top: var(--at-esp-4); border-radius: var(--at-radio-l); background: var(--at-color-fondo); padding: var(--at-esp-7); flex: 1; display: flex; flex-direction: column; color: var(--at-color-tinta); }
.emp-form-cabeza { display: flex; align-items: center; justify-content: space-between; }
.emp-form-cabeza img { width: 98px; }
.emp-puntitos { display: flex; gap: var(--at-esp-1); }
.emp-puntitos i { width: var(--at-esp-5); height: var(--at-esp-2); border-radius: var(--at-radio-capsula); background: var(--at-color-borde); transition: background var(--at-dur-media) var(--at-ease-estandar); }
[data-form-colaborador][data-en="0"] .emp-puntitos i:nth-child(1),
[data-form-colaborador][data-en="1"] .emp-puntitos i:nth-child(-n+2),
[data-form-colaborador][data-en="2"] .emp-puntitos i { background: var(--at-color-marca); }

.emp-paso { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; flex: 1; }
.emp-paso + .emp-paso { margin-top: var(--at-esp-8); padding-top: var(--at-esp-6); border-top: 1px dashed var(--at-color-borde-campo); }
.emp-paso legend { float: left; width: 100%; padding: 0; font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-6); }
.emp-paso legend + * { clear: both; }
.emp-paso p { font: var(--at-texto-cuerpo); margin: var(--at-esp-3) 0 0; }
.emp-pregunta { font: var(--at-texto-cuerpo-fuerte) !important; font-weight: 700 !important; color: var(--at-color-tinta); margin-top: var(--at-esp-5) !important; }
.emp-chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); margin-top: var(--at-esp-3); }
.emp-chip { position: relative; cursor: pointer; }
.emp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.emp-chip span {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--at-color-superficie); border: 1.5px solid var(--at-color-borde-campo);
  font: var(--at-texto-cuerpo); font-weight: 600;
  transition: background var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.emp-chip:hover span { border-color: var(--at-color-marca); }
.emp-chip input:checked + span { background: var(--at-color-marca); border-color: var(--at-color-marca); color: var(--at-color-superficie); animation: atChip var(--at-dur-base) var(--at-ease-salida); }
.emp-chip input:focus-visible + span { box-shadow: var(--at-foco); }
.emp-otro {
  margin-top: var(--at-esp-4); min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); border: 1.5px solid var(--at-color-borde-campo);
  font: var(--at-texto-cuerpo); font-family: var(--letra); color: var(--at-color-tinta); background: var(--at-color-superficie); width: 100%;
}
.emp-otro:focus { border-color: var(--at-color-marca); }
.emp-siguiente { align-self: flex-start; margin-top: var(--at-esp-5); }
.emp-siguiente:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: not-allowed; }
.emp-acciones { display: flex; gap: var(--at-esp-3); margin-top: auto; padding-top: var(--at-esp-5); align-items: center; }
.emp-acciones .boton { margin-left: auto; }
.emp-atras { border: 0; background: none; color: var(--at-color-texto-2); font: var(--at-texto-cuerpo-fuerte); font-family: var(--letra); font-weight: 600; cursor: pointer; min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-2); }

/* Con script, un paso a la vez; sin el, el primero y el segundo a la vista. */
.con-script [data-form-colaborador] .emp-paso { display: none; }
.con-script [data-form-colaborador][data-en="0"] .emp-paso[data-paso="0"],
.con-script [data-form-colaborador][data-en="1"] .emp-paso[data-paso="1"] { display: flex; margin-top: 0; padding-top: 0; border-top: 0; animation: atPop var(--at-dur-media) var(--at-ease-salida) both; }
.emp-atras { visibility: hidden; }
.con-script .emp-atras { visibility: visible; }

/* Sin script el sobre de gracias no existe (va `hidden`); con script, confirmacion con pop. */
.emp-gracias { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both; padding: var(--at-esp-5) 0; }
.emp-gracias[hidden] { display: none; }
.emp-gracias img { width: 84px; }
.emp-gracias b { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-4); }
.emp-gracias p { font: var(--at-texto-cuerpo); max-width: 26em; margin: var(--at-esp-2) 0 0; }

.emp-nota { font: var(--at-texto-meta); color: var(--emp-claro-2); margin: var(--at-esp-4) 0 0; }

.emp-cta { margin-top: var(--at-esp-10); }

/* -------------------------------------------------------- como funciona */

.emp-seccion-cabeza { max-width: 42em; }
.emp-seccion-cabeza h2 { margin: 0; }
.emp-como { padding-top: var(--at-esp-10); }
.emp-pasos { list-style: none; padding: 0; margin: var(--at-esp-8) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); counter-reset: paso; }
.emp-pasos li { position: relative; padding: var(--at-esp-6); border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.emp-pasos li:not(:last-child)::after {
  content: ""; position: absolute; top: var(--at-esp-9); right: calc(var(--at-esp-4) * -1 - 1px); width: var(--at-esp-5); height: 2px; background: var(--at-color-dato-fondo);
}
.emp-paso-n {
  width: 40px; height: 40px; border-radius: var(--at-radio-m); background: var(--at-color-dato-fuerte); color: var(--at-color-superficie);
  display: grid; place-items: center; font: var(--at-texto-titulo-2); font-weight: 800;
}
.emp-pasos h3 { font: var(--at-texto-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-5) 0 0; }
.emp-pasos p { font: var(--at-texto-cuerpo); margin: var(--at-esp-2) 0 0; }

/* ------------------------------------------------------------ por area */

.emp-areas-seccion { padding-top: var(--at-esp-10); }

/* Formatos de regalo de /empresas/navidad: cuatro tarjetas en vez de una tabla
   (en el telefono una tabla de tres columnas se rompe). La de Atineo va destacada. */
.emp-formatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); margin-top: var(--at-esp-8); }
.emp-formato { display: flex; flex-direction: column; gap: var(--at-esp-4); padding: var(--at-esp-6); border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.emp-formato h3 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; color: var(--at-color-tinta); min-height: 2.6em; }
.emp-formato dl { margin: 0; display: grid; gap: var(--at-esp-4); }
.emp-formato dt { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); margin-bottom: var(--at-esp-1); }
.emp-formato dt.bien { color: var(--at-color-ok); }
.emp-formato dd { margin: 0; }
.emp-formato.destacada { background: var(--at-color-dato-fondo); border-color: var(--at-color-dato-fuerte); box-shadow: 0 0 0 1px var(--at-color-dato-fuerte); }
.emp-formato .chip { align-self: flex-start; margin-top: auto; }
.emp-formatos-guia { margin: var(--at-esp-6) 0 0; font: var(--at-texto-web-cuerpo); color: var(--at-color-texto-2); }
.emp-formatos-guia a { color: var(--at-color-marca); text-decoration: underline; text-underline-offset: 3px; }
.emp-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); margin-top: var(--at-esp-8); }
.emp-areas article { padding: var(--at-esp-7); border-radius: var(--at-radio-xl); background: var(--at-color-dato-fondo); border: 1px solid var(--at-color-dato-fondo); }
.emp-areas h3 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-4) 0 0; }
.emp-areas p { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-2) 0 0; }

/* ------------------------------------------------------------ preguntas */

.emp-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--at-esp-9); align-items: start; padding-top: var(--at-esp-10); }
.emp-faq h2 { margin: 0 0 var(--at-esp-3); }
.emp-faq > div:first-child a { color: var(--at-color-dato-fuerte); font-weight: 700; }
.emp-preguntas { display: grid; gap: var(--at-esp-3); }
.emp-preguntas details { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l); transition: border-color var(--at-dur-base) var(--at-ease-estandar); }
.emp-preguntas details[open] { border-color: var(--at-color-dato); }
.emp-preguntas summary {
  list-style: none; cursor: pointer; min-height: var(--at-tactil-min); padding: var(--at-esp-4) 56px var(--at-esp-4) var(--at-esp-5); position: relative;
  font: var(--at-texto-titulo-2); color: var(--at-color-tinta);
}
.emp-preguntas summary::-webkit-details-marker { display: none; }
.emp-preguntas summary::after {
  content: "+"; position: absolute; right: var(--at-esp-5); top: 50%; transform: translateY(-50%);
  width: var(--at-esp-7); height: var(--at-esp-7); border-radius: 50%; background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  transition: transform var(--at-dur-base) var(--at-ease-salida);
}
.emp-preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.emp-preguntas details p { padding: 0 var(--at-esp-5) var(--at-esp-5); margin: 0; font: var(--at-texto-web-cuerpo); }

/* ------------------------------------------------------- la solicitud */

.emp-cotizar-seccion { margin-top: var(--at-esp-10); scroll-margin-top: 90px; }
.emp-cotizar {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--at-esp-9); align-items: start;
  padding: var(--at-esp-10) var(--at-esp-9); background: var(--at-color-tinta); border-radius: var(--at-radio-hoja);
}
.emp-cotizar-texto h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.emp-cotizar-texto > p { color: var(--emp-claro-2); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }
.emp-cotizar-texto .ceja { margin-bottom: var(--at-esp-3); }
.emp-despues { list-style: none; padding: 0; margin: var(--at-esp-8) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-4); counter-reset: despues; }
.emp-despues li { position: relative; padding-left: var(--at-esp-9); counter-increment: despues; }
.emp-despues li::before {
  content: counter(despues); position: absolute; left: 0; top: 0; width: var(--at-esp-8); height: var(--at-esp-8); border-radius: var(--at-radio-capsula);
  background: var(--emp-claro-linea); color: var(--at-color-superficie); display: grid; place-items: center; font: var(--at-texto-meta); font-weight: 800;
}
.emp-despues b { display: block; color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.emp-despues span { display: block; color: var(--emp-claro-2); font: var(--at-texto-cuerpo); margin-top: var(--at-esp-1); }
.emp-otra-via { color: var(--emp-claro-2); font: var(--at-texto-cuerpo); margin: var(--at-esp-8) 0 0; }
.emp-otra-via a { color: var(--at-color-superficie); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.emp-solicitud { background: var(--at-color-fondo); border-radius: var(--at-radio-xl); padding: var(--at-esp-8); }
.emp-form { display: flex; flex-direction: column; gap: var(--at-esp-4); }
.emp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-4); }
.emp-campo { display: flex; flex-direction: column; gap: var(--at-esp-2); min-width: 0; }
.emp-campo > span, .emp-campo-grupo legend { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--at-color-tinta); }
.emp-campo input, .emp-campo select, .emp-campo textarea {
  width: 100%; min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); border: 1.5px solid var(--at-color-borde-campo); background: var(--at-color-superficie);
  font: var(--at-texto-web-cuerpo); font-family: var(--letra); color: var(--at-color-tinta); transition: border-color var(--at-dur-base) var(--at-ease-estandar);
}
.emp-campo textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.emp-campo input:focus, .emp-campo select:focus, .emp-campo textarea:focus { border-color: var(--at-color-dato-fuerte); }
.emp-campo-grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.emp-campo-grupo legend { padding: 0; }
.emp-campo-grupo .emp-chips { margin-top: var(--at-esp-2); }
.emp-chip.azul input:checked + span { background: var(--at-color-dato-fuerte); border-color: var(--at-color-dato-fuerte); }
.emp-chip.azul:hover span { border-color: var(--at-color-dato); }

.con-error input, .con-error select, .con-error textarea { border-color: var(--at-color-error); }
.emp-campo-error { display: block; font: var(--at-texto-meta); color: var(--at-color-error); font-weight: 600; margin-top: var(--at-esp-1); }
.emp-form-error { margin: 0; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-error-fondo); color: var(--at-color-error); font: var(--at-texto-cuerpo); font-weight: 600; }
.emp-form-error[hidden] { display: none; }

.emp-autorizo { display: flex; gap: var(--at-esp-3); align-items: flex-start; min-height: var(--at-tactil-min); font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); cursor: pointer; flex-wrap: wrap; }
.emp-autorizo input { width: var(--at-esp-6); height: var(--at-esp-6); margin: 0; accent-color: var(--at-color-dato-fuerte); flex: none; }
.emp-autorizo > span { flex: 1; min-width: 0; }
.emp-autorizo a { color: var(--at-color-dato-fuerte); font-weight: 700; }
.emp-autorizo .emp-campo-error { flex-basis: 100%; }

.emp-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.emp-enviar { align-self: stretch; }
.emp-enviar:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); cursor: progress; transform: none; box-shadow: none; }
.emp-letra { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: calc(var(--at-esp-2) * -1) 0 0; text-align: center; }

.emp-listo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--at-esp-9) var(--at-esp-3); animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both; }
.emp-listo[hidden] { display: none; }
.emp-listo img { width: 84px; }
.emp-listo b { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin-top: var(--at-esp-4); color: var(--at-color-tinta); }
.emp-listo p { font: var(--at-texto-web-cuerpo); max-width: 26em; margin: var(--at-esp-3) 0 var(--at-esp-5); }

/* ----------------------------------------------------- menos movimiento */

@media (prefers-reduced-motion: reduce) {
  .emp-cinta-pista, .emp-flota-aviso, .emp-flota-nota, .emp-flota-rotulo i::after,
  .emp-gracias, .emp-listo, .emp-catalogo.cambia .emp-producto,
  .con-script [data-emp-portal] [role="tabpanel"], .con-script [data-form-colaborador] .emp-paso { animation: none; }
  .emp-cinta { overflow-x: auto; }
  .emp-progreso i, .emp-ocasion img, .emp-producto { transition: none; }
}

/* ------------------------------------------------- tablet y celular */

/* Tablet: 761 a 1180 (los puntos de quiebre del manual). */
@media (max-width: 1180px) {
  .emp-llamado { grid-template-columns: auto 1fr; }
  .emp-llamado .boton { grid-column: 1 / -1; justify-self: start; }
  .emp-tablero-cuerpo { grid-template-columns: 1fr; }
  .emp-lateral { border-right: 0; border-bottom: 1px solid var(--at-color-borde); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emp-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-formulario { grid-template-columns: 1fr; }
  .emp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-pasos li::after { display: none; }
  .emp-areas { grid-template-columns: 1fr; }
  .emp-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-faq, .emp-cotizar { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .emp-hero { grid-template-columns: 1fr; gap: var(--at-esp-9); padding-top: var(--at-esp-9); }
  .emp-hero h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .emp-escena { max-width: 620px; }
  .emp-ocasiones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-ocasion.destacada { grid-template-columns: 1fr; }
  .emp-ocasion.destacada img { min-height: 0; aspect-ratio: 16 / 9; }
  .emp-cifras-banda ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-respaldo-cabeza { grid-template-columns: 1fr; gap: var(--at-esp-4); }
  .emp-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-pilares article:nth-child(3) { border-left: 0; }
  .emp-pilares article:nth-child(n+3) { border-top: 1px solid var(--at-color-borde); }
  .emp-casas { grid-template-columns: 1fr 1fr; }
  .emp-casas-enlace { grid-column: 1 / -1; }
}

/* Celular: hasta 760. */
@media (max-width: 760px) {
  .emp-formatos { grid-template-columns: 1fr; }
  .emp-formato h3 { min-height: 0; }
  .emp-banda .contenido { flex-direction: column; align-items: flex-start; gap: var(--at-esp-4); }
  .emp-logos { margin-left: 0; gap: var(--at-esp-7); }
  .emp-comparativa li { grid-template-columns: 1fr; gap: var(--at-esp-2); }
  .emp-llamado { grid-template-columns: 1fr; padding: var(--at-esp-6); gap: var(--at-esp-4); }
  .emp-mano { font-size: 23px; }
  .emp-portal { padding-top: var(--at-esp-9); }
  .con-script .emp-pestanas { width: 100%; }
  .emp-pestanas button { flex: 1; padding: var(--at-esp-2); font: var(--at-texto-meta); font-weight: 600; }
  .emp-barra-empresa { padding: var(--at-esp-4); }
  .emp-selector { margin-left: 0; width: 100%; }
  .emp-selector span { width: 100%; }
  .emp-lateral { grid-template-columns: 1fr; padding: var(--at-esp-4); }
  .emp-principal { padding: var(--at-esp-4); }
  .emp-fechas li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--at-esp-3); }
  .emp-cuando, .emp-propuesta { grid-column: 2; }
  .emp-fechas .emp-aprobar { grid-column: 3; grid-row: 1 / span 3; }
  .emp-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3); }
  .emp-rrhh, .emp-colaborador { padding: var(--at-esp-5); }
  .emp-tarjeta-form { padding: var(--at-esp-5); }
  .emp-paso legend, .emp-gracias b { font: var(--at-texto-titulo-1); }
  .emp-archivo { flex-wrap: wrap; }
  .emp-como, .emp-faq { padding-top: var(--at-esp-9); }
  .emp-areas-seccion { padding-top: var(--at-esp-9); }
  .emp-pasos { grid-template-columns: 1fr; gap: var(--at-esp-3); }
  .emp-pasos li { padding: var(--at-esp-5); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--at-esp-1) var(--at-esp-4); }
  .emp-pasos h3 { margin: 0; align-self: center; }
  .emp-pasos p { grid-column: 2; margin: 0; }
  .emp-areas article { padding: var(--at-esp-5); }
  .emp-cotizar-seccion { margin-top: var(--at-esp-9); }
  .emp-cotizar { padding: var(--at-esp-8) var(--at-esp-3) var(--at-esp-3); border-radius: var(--at-radio-xl); }
  .emp-cotizar-texto { padding: 0 var(--at-esp-2); }
  .emp-cotizar-texto h2 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .emp-solicitud { padding: var(--at-esp-5) var(--at-esp-4); border-radius: var(--at-radio-l); }
  .emp-campos { grid-template-columns: 1fr; }
  .emp-hero { padding-top: var(--at-esp-8); padding-bottom: var(--at-esp-8); gap: var(--at-esp-8); }
  .emp-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .emp-hero .botones .boton { flex: 1 1 100%; justify-content: center; }
  .emp-hero-sellos { gap: var(--at-esp-5); }
  .emp-hero-sellos li { flex: 1 1 40%; }
  .emp-escena { min-height: 0; display: block; padding: var(--at-esp-7) 0 110px; }
  .emp-escena-foto { width: 100%; aspect-ratio: 4 / 3.4; }
  .emp-flota-aviso { left: var(--at-esp-2); right: var(--at-esp-2); bottom: 0; width: auto; }
  .emp-flota-nota { right: var(--at-esp-1); top: 0; width: 200px; padding: var(--at-esp-4); }
  .emp-flota-nota p { font-size: 19px; }
  .emp-flota-nota small { font-size: 16px; }
  .emp-contraste, .emp-ocasiones-seccion, .emp-respaldo { padding-top: var(--at-esp-9); }
  .emp-versus { grid-template-columns: 1fr; margin-top: var(--at-esp-8); }
  .emp-lado { padding: var(--at-esp-5); }
  .emp-lado li { grid-template-columns: 32px minmax(0, 1fr); }
  .emp-lado li > span:last-child { grid-column: 2; justify-self: start; }
  .emp-ocasiones { grid-template-columns: 1fr; }
  .emp-ocasion.destacada > div { padding: var(--at-esp-6); }
  .emp-ocasion.destacada h3 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .emp-cifras-banda { margin-top: var(--at-esp-9); }
  .emp-cifras-banda ul { padding: var(--at-esp-8) 0; gap: var(--at-esp-6) var(--at-esp-4); }
  .emp-cifras-banda b { font: var(--at-texto-cifra); }
  .emp-pilares { grid-template-columns: 1fr; }
  .emp-pilares article { padding: var(--at-esp-5); }
  .emp-pilares article + article { border-left: 0; border-top: 1px solid var(--at-color-borde); }
  .emp-casas { grid-template-columns: 1fr; }
  .emp-casa { padding: var(--at-esp-5); gap: var(--at-esp-4); }
  .emp-casa img { height: 38px; }
}

/* /empresas/navidad: los tres niveles por persona y sus condiciones. */
.emp-niveles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emp-niveles .emp-formato h3 { min-height: 0; }
.emp-nivel-precio { margin: 0; font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.emp-nivel-precio b { display: block; font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); color: var(--at-color-tinta); }
.emp-niveles .emp-formato .boton { align-self: flex-start; margin-top: auto; }
.emp-niveles .emp-formato .chip + .boton { margin-top: 0; }
.emp-condiciones { margin: var(--at-esp-6) 0 0; padding-left: 1.2em; display: grid; gap: var(--at-esp-2); font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
@media (max-width: 900px) { .emp-niveles { grid-template-columns: minmax(0, 1fr); } }

/* La 404: un estado vacio, con Tino (no es una pantalla de dinero). UI/UX v4: tokens `--at-*`. */

.error-vacio { max-width: 720px; text-align: center; padding-top: 80px; padding-bottom: var(--at-esp-6); }
.error-tino { width: 120px; margin: 0 auto var(--at-esp-5); }
.error-vacio .ceja { margin-bottom: var(--at-esp-3); }
.error-vacio h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.error-vacio .entrada { margin: var(--at-esp-4) auto 0; font: var(--at-texto-web-cuerpo); }
.error-vacio .botones { display: flex; gap: var(--at-esp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--at-esp-8); }
.error-vacio .botones .boton { min-height: var(--at-tactil-min); }
.error-otros { font: var(--at-texto-cuerpo); font-size: 16px; margin-top: var(--at-esp-6); }
.error-otros a { display: inline-block; padding: var(--at-esp-3) var(--at-esp-1); }

@media (max-width: 760px) {
  .error-vacio { padding-top: var(--at-esp-9); }
  .error-vacio h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .error-vacio .botones .boton { flex: 1; }
}

/* La guia de Atineo Empresas (`/empresas/guia-regalos-fin-de-ano`). Texto largo de lectura:
   columna de 760 px, indice fijo a la izquierda en escritorio y arriba en telefono. Tokens `--at-*`. */

.guia-cabeza { background: var(--at-color-marca-papel); border-bottom: 1px solid var(--at-color-borde); }
.guia-cabeza-caja { padding-top: var(--at-esp-9); padding-bottom: var(--at-esp-8); max-width: 980px; }
.guia-cabeza h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); color: var(--at-color-tinta); margin: 0; text-wrap: balance; }
.guia-entrada { font: var(--at-texto-web-cuerpo); line-height: 1.7; color: var(--at-color-tinta); margin: var(--at-esp-5) 0 0; max-width: 760px; }
.guia-firma { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: var(--at-esp-4) 0 0; }
.guia-firma a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.guia-cuerpo { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 48px; justify-content: center; align-items: start; padding-top: 40px; padding-bottom: var(--at-esp-10); }

.guia-lado { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--at-esp-4); }
.guia-indice { padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.guia-indice b { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.guia-indice ol { list-style: none; margin: var(--at-esp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.guia-indice a {
  display: flex; align-items: center; min-height: 40px; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-s);
  font: var(--at-texto-cuerpo); color: var(--at-color-texto-2);
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.guia-indice a:hover { background: var(--at-color-marca-papel); color: var(--at-color-tinta); }
.guia-lado-cta { padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-tinta); color: var(--at-color-superficie); display: flex; flex-direction: column; gap: var(--at-esp-3); }
.guia-lado-cta img { width: 32px; height: auto; }
.guia-lado-cta p { margin: 0; font: var(--at-texto-meta); color: var(--at-color-superficie); }
.guia-lado-cta b { display: block; font: var(--at-texto-cuerpo-fuerte); margin-bottom: var(--at-esp-1); }
.guia-lado-cta .boton { align-self: flex-start; }

/* El texto */
.guia-texto { min-width: 0; font: var(--at-texto-web-cuerpo); line-height: 1.75; color: var(--at-color-tinta); }
.guia-texto > p, .guia-texto > ul, .guia-texto > ol { margin: 0 0 var(--at-esp-4); }
.guia-texto ul { padding-left: 1.2em; }
.guia-texto li { margin-bottom: var(--at-esp-2); }
.guia-texto h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-10) 0 var(--at-esp-4); scroll-margin-top: 110px; text-wrap: balance; }
.guia-texto h3 { font: var(--at-texto-titulo-2); margin: 0; }
.guia-texto a { color: var(--at-color-marca); text-decoration: underline; text-underline-offset: 3px; }
.guia-texto a.boton { text-decoration: none; }
.guia-fuente { font: var(--at-texto-meta); color: var(--at-color-texto-2); }

.guia-resumen { display: flex; gap: var(--at-esp-4); align-items: flex-start; padding: var(--at-esp-6) var(--at-esp-7); border-radius: var(--at-radio-xl); background: var(--at-color-marca-papel); }
.guia-resumen img { width: 40px; flex: none; }
.guia-resumen b { font: var(--at-texto-cuerpo-fuerte); color: var(--at-color-marca-hover); }
.guia-resumen p { margin: var(--at-esp-1) 0 var(--at-esp-3); }
.guia-resumen ul { margin: 0 0 var(--at-esp-3); padding-left: 1.1em; }
.guia-resumen small { font: var(--at-texto-meta); color: var(--at-color-texto-2); }

.guia-figura { margin: var(--at-esp-8) 0; }
.guia-figura img { width: 100%; height: auto; display: block; border-radius: var(--at-radio-xl); }
.guia-figura figcaption { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin-top: var(--at-esp-2); }

/* Los cuatro formatos: tarjetas, como en /empresas/navidad, no una tabla de 4 columnas que en telefono no cabe. */
.guia-formatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-4); margin: var(--at-esp-6) 0 var(--at-esp-3); }
.guia-formatos section { display: flex; flex-direction: column; gap: var(--at-esp-3); padding: var(--at-esp-6); border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.guia-formatos dl { margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.guia-formatos dt { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.guia-formatos dt.bien { color: var(--at-color-ok); }
.guia-formatos dt.dato { color: var(--at-color-dato-fuerte); }
.guia-formatos dd { margin: var(--at-esp-1) 0 0; font: var(--at-texto-cuerpo); line-height: 1.6; }
.guia-formatos section.destacada { background: var(--at-color-dato-fondo); border-color: var(--at-color-dato-fuerte); box-shadow: 0 0 0 1px var(--at-color-dato-fuerte); }
.guia-formatos .chip { align-self: flex-start; margin-top: auto; }

.guia-tabla-caja { overflow-x: auto; margin: var(--at-esp-5) 0 var(--at-esp-3); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l); background: var(--at-color-superficie); }
.guia-tabla { width: 100%; border-collapse: collapse; font: var(--at-texto-cuerpo); line-height: 1.55; }
.guia-tabla th, .guia-tabla td { text-align: left; vertical-align: top; padding: var(--at-esp-3) var(--at-esp-4); border-bottom: 1px solid var(--at-color-borde); }
.guia-tabla thead th { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); background: var(--at-color-fondo); }
.guia-tabla tbody th { font-weight: 700; color: var(--at-color-tinta); }
.guia-tabla tbody tr:last-child > * { border-bottom: 0; }

.guia-nota, .guia-alerta { padding: var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-l); margin: var(--at-esp-5) 0; font: var(--at-texto-cuerpo); line-height: 1.65; }
.guia-nota { background: var(--at-color-ok-fondo); border-left: 4px solid var(--at-color-ok); }
.guia-alerta { background: var(--at-color-aviso-fondo); border-left: 4px solid var(--at-color-aviso); }

.guia-pasos { list-style: none; counter-reset: paso; padding: 0; }
.guia-pasos li { counter-increment: paso; position: relative; padding-left: 52px; margin-bottom: var(--at-esp-5); }
.guia-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: var(--at-radio-capsula);
  background: var(--at-color-marca); color: var(--at-color-superficie); font-weight: 800; display: grid; place-items: center;
}

.guia-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-esp-4) var(--at-esp-6); padding: var(--at-esp-6) var(--at-esp-7); border-radius: var(--at-radio-xl); background: var(--at-color-tinta); color: var(--at-color-superficie); margin: var(--at-esp-8) 0; }
.guia-cta p { flex: 1 1 280px; margin: 0; color: var(--at-color-superficie); }
.guia-cta-botones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); }

.guia-faq details { border-bottom: 1px solid var(--at-color-borde); padding: var(--at-esp-4) 0; }
.guia-faq summary { cursor: pointer; font: var(--at-texto-cuerpo-fuerte); font-size: 18px; color: var(--at-color-tinta); min-height: var(--at-tactil-min); display: flex; align-items: center; }
.guia-faq details p { margin: var(--at-esp-2) 0 0; }

.guia-autor { margin-top: var(--at-esp-8); padding: var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-fondo); font: var(--at-texto-meta); line-height: 1.7; color: var(--at-color-texto-2); }
.guia-autor p { margin: 0 0 var(--at-esp-3); }
.guia-autor p:last-child { margin: 0; }
.guia-autor b { color: var(--at-color-tinta); }

/* En escritorio, el titulo arranca en la misma linea que la columna del texto (indice 260 + hueco 48). */
@media (min-width: 1001px) {
  .guia-cabeza-caja { max-width: calc(1068px + 2 * var(--margen)); padding-left: calc(var(--margen) + 308px); }
}
@media (max-width: 1000px) {
  .guia-cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--at-esp-6); }
  .guia-lado { position: static; }
  .guia-lado-cta { display: none; }
}
@media (max-width: 760px) {
  .guia-cabeza-caja { padding-top: var(--at-esp-7); padding-bottom: var(--at-esp-6); }
  .guia-formatos { grid-template-columns: minmax(0, 1fr); }
  .guia-resumen { flex-direction: column; padding: var(--at-esp-5); }
  .guia-cta { padding: var(--at-esp-5); }
  .guia-texto h2 { margin-top: var(--at-esp-8); }
}

/*
 * Regalos para hombres (`/regalos-para-hombres`).
 *
 * La pagina va entera en el azul de Atineo. No con una paleta aparte: redefine
 * los MISMOS nombres de la base (`--fucsia`, `--tinta`, `--crema`, `--borde`...)
 * con el azul del sistema, asi la cabecera, las tarjetas, los botones, el pie y
 * el asistente cambian solos y ningun componente compartido necesita saber que
 * existe esta pagina. Los nombres viejos siguen apuntando a `--at-*`: aqui solo
 * cambia a cual.
 *
 * Se declara en `body:has(.hom)` y no en `:root`: la hoja es una sola para todo
 * el sitio, y esto no puede escaparse a otra pagina.
 *
 * UI/UX v4: el unico azul que no tiene token equivalente es el azul noche del
 * tema (`tintaNoche` de la app, `lib/app/tokens.dart`); vive en dos variables
 * locales, `--hom-noche` y `--hom-noche-2`, y todo lo demas sale de tokens.
 * Sin degradados: la profundidad es color plano y `--at-elev-*`.
 */

body:has(.hom) {
  /* Excepcion de tema: azul noche (fondo oscuro y tinta de esta pagina). Sin token. */
  --hom-noche: #061431;
  --hom-noche-2: #0B1D44;

  /* Lo propio de la pagina, derivado de tokens */
  --hom-hielo: color-mix(in srgb, var(--at-color-dato) 55%, var(--at-color-superficie));
  --hom-sobre-noche: color-mix(in srgb, var(--at-color-superficie) 88%, transparent);
  --hom-sobre-noche-tenue: color-mix(in srgb, var(--at-color-superficie) 72%, transparent);
  --hom-vela: color-mix(in srgb, var(--at-color-superficie) 6%, transparent);
  --hom-linea: color-mix(in srgb, var(--hom-hielo) 24%, transparent);

  /* La marca se re-temiza: la accion pasa de fucsia a azul fuerte (el que
     aguanta texto blanco pequeno). */
  --fucsia: var(--at-color-dato-fuerte);
  --fucsia-hover: color-mix(in srgb, var(--at-color-dato-fuerte) 80%, var(--hom-noche));
  --fucsia-claro: var(--hom-hielo);
  --rosa-papel: var(--at-color-dato-fondo);
  --rosa-suave: var(--at-color-dato-fondo);
  --tinta: var(--hom-noche);
  --tinta-caja: var(--hom-noche-2);
  --crema: color-mix(in srgb, var(--at-color-dato-fondo) 45%, var(--at-color-superficie));
  --borde: color-mix(in srgb, var(--at-color-dato) 22%, var(--at-color-superficie));
  --borde-fuerte: color-mix(in srgb, var(--at-color-dato) 32%, var(--at-color-superficie));
  --texto: color-mix(in srgb, var(--hom-noche) 82%, var(--at-color-superficie));
  --texto-suave: color-mix(in srgb, var(--hom-noche) 72%, var(--at-color-superficie));
  --texto-tenue: color-mix(in srgb, var(--hom-noche) 55%, var(--at-color-superficie));
  --azul: var(--at-color-dato-fuerte);
  --azul-texto: var(--at-color-dato-fuerte);
  --azul-fondo: var(--at-color-dato-fondo);
  --azul-panel: var(--at-color-dato-fondo);
}
body:has(.hom) .cabecera { background: color-mix(in srgb, var(--crema) 92%, transparent); }
body:has(.hom) ::selection { background: var(--rosa-papel); color: var(--tinta); }

/* ------------------------------------------------------------------ hero */

.hom-hero {
  position: relative; overflow: hidden; background: var(--hom-noche); color: var(--at-color-superficie);
  padding-bottom: 64px; isolation: isolate;
}

.hom-hero-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center;
  padding-top: 64px; padding-bottom: var(--at-esp-9);
}
.hom-ceja { color: var(--hom-hielo); margin: 0; }
.hom-hero h1 {
  color: var(--at-color-superficie); font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo);
  margin: var(--at-esp-5) 0 0; text-wrap: balance;
}
.hom-subrayado { position: relative; display: inline-block; color: var(--hom-hielo); z-index: 0; }
.hom-subrayado::after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: 0.05em; height: 0.15em;
  background: var(--at-color-dato); border-radius: var(--at-radio-capsula); transform: rotate(-2deg); z-index: -1;
  transform-origin: left center;
  animation: homTrazo var(--at-dur-sello) var(--at-ease-salida) both 0.6s;
}
@keyframes homTrazo { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }

.hom-para { font: var(--at-texto-web-titulo-1); font-family: var(--mano); font-weight: 700; color: var(--at-color-superficie); margin: var(--at-esp-3) 0 0; }
.hom-rota { display: inline-block; color: var(--hom-hielo); }
.hom-rota > span { display: inline-block; transition: transform var(--at-dur-base) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-salida); }
.hom-rota > span.sale { transform: translateY(-0.4em) rotate(-4deg); opacity: 0; }
.hom-rota > span.entra { animation: atPestana var(--at-dur-lenta) var(--at-ease-salida) both; }

.hom-intro { color: var(--hom-sobre-noche); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-5) 0 0; max-width: 31em; }
.hom-hero .botones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); margin-top: 24px; }
.hom-hero .boton.blanco { color: var(--hom-noche); border-color: var(--at-color-superficie); }
.hom-hero .boton.blanco:hover { background: var(--rosa-papel); color: var(--hom-noche); }
.hom-boton-vivo { position: relative; }
.hom-boton-vivo span { display: inline-block; transition: transform var(--at-dur-media) var(--at-ease-salida); }
.hom-boton-vivo:hover span { transform: translateX(4px); }
.hom-boton-vivo::after {
  content: ""; position: absolute; inset: -4px; border-radius: var(--at-radio-capsula); border: 2px solid var(--at-color-superficie); opacity: 0;
  animation: homHalo 2600ms var(--at-ease-salida) infinite 1.5s; pointer-events: none;
}
@keyframes homHalo { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

/* -- collage */
.hom-collage { position: relative; height: 560px; }
.hom-capa { position: absolute; inset: 0; transition: transform var(--at-dur-media) var(--at-ease-salida); will-change: transform; }
.hom-collage-grande {
  position: absolute; right: 0; top: 0; width: 78%; height: 94%; object-fit: cover; border-radius: var(--r-bloque);
  box-shadow: var(--at-elev-3); background: var(--hom-noche-2);
}
.hom-polaroid {
  position: absolute; margin: 0; padding: var(--at-esp-2) var(--at-esp-2) 40px; background: var(--at-color-superficie);
  border-radius: var(--at-radio-s); box-shadow: var(--at-elev-3);
}
.hom-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--at-radio-s); background: var(--rosa-suave); }
.hom-polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: var(--mano);
  font-size: 24px; font-weight: 700; color: var(--hom-noche);
}
.hom-polaroid-a { left: 0; top: 36px; width: 36%; transform: rotate(-8deg); animation: homFlota 6s var(--at-ease-estandar) infinite; }
.hom-polaroid-b { left: 7%; bottom: 0; width: 38%; transform: rotate(5deg); animation: homFlota 7s var(--at-ease-estandar) infinite 1.2s; }
@keyframes homFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.hom-collage .globo-aviso { left: auto; right: 20px; bottom: 48px; z-index: 2; background: color-mix(in srgb, var(--crema) 97%, transparent); }

/* -- sellos */
.hom-sellos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.hom-sellos li {
  padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--r-tarjeta); border: 1px solid var(--hom-linea);
  background: var(--hom-vela); display: flex; flex-direction: column;
}
.hom-sellos b { color: var(--at-color-superficie); font: var(--at-texto-titulo-1); font-weight: 900; font-variant-numeric: tabular-nums; }
.hom-sellos li:last-child b { font: var(--at-texto-titulo-2); font-size: 20px; }
.hom-sellos span { color: var(--hom-hielo); font: var(--at-texto-meta); }

/* ------------------------------------------------------------------ cinta */

.hom-cinta { background: var(--azul); color: var(--at-color-superficie); overflow: hidden; padding: var(--at-esp-4) 0; }
.hom-cinta-pista { display: flex; width: max-content; gap: 28px; align-items: center; animation: atMarquee 46s linear infinite; }
.hom-cinta span { font: var(--at-texto-web-titulo-2); font-weight: 900; white-space: nowrap; }
.hom-cinta i { width: 8px; height: 8px; border-radius: var(--at-radio-capsula); background: var(--hom-hielo); flex: none; }

/* ------------------------------------------------------------- secciones */

.hom-seccion { padding-top: 88px; }
.hom-cabeza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--at-esp-8); align-items: end; margin-bottom: var(--at-esp-8); }
.hom-cabeza h2 { margin: 0; font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); text-wrap: balance; }
.hom-cabeza > p { font: var(--at-texto-web-cuerpo); margin: 0; max-width: 30em; }

/* ----------------------------------------------- lo que dice / lo que quiere */

.hom-dichos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); }
.hom-dicho {
  position: relative; display: block; width: 100%; min-height: 220px; padding: 0; border: 0; background: none;
  cursor: pointer; font-family: var(--letra); text-align: left; perspective: 900px;
}
.hom-dicho-cara {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); padding: var(--at-esp-6);
  border-radius: var(--r-tarjeta-grande); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform var(--at-dur-sello) var(--at-ease-salida);
}
.hom-dicho-cara small { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; }
.hom-dicho-cara b { font: var(--at-texto-titulo-2); font-size: 20px; }
.hom-dicho-dice { background: var(--at-color-superficie); border: 1px solid var(--borde); color: var(--tinta); }
.hom-dicho-dice small { color: var(--texto-suave); }
.hom-dicho-dice b { font: var(--at-texto-web-titulo-2); }
.hom-dicho-pista { margin-top: auto; font: var(--at-texto-meta); font-weight: 700; color: var(--azul-texto); }
.hom-dicho-quiere { background: var(--azul); color: var(--at-color-superficie); transform: rotateY(180deg); box-shadow: var(--at-elev-3); }
.hom-dicho-quiere small { color: var(--rosa-papel); }
.hom-dicho-quiere b { font: var(--at-texto-cuerpo-fuerte); font-size: 18px; font-weight: 700; }
.hom-dicho[aria-pressed="true"] .hom-dicho-dice { transform: rotateY(-180deg); }
.hom-dicho[aria-pressed="true"] .hom-dicho-quiere { transform: rotateY(0); }
@media (hover: hover) and (pointer: fine) {
  .hom-dicho:hover .hom-dicho-dice { transform: rotateY(-180deg); }
  .hom-dicho:hover .hom-dicho-quiere { transform: rotateY(0); }
}
.hom-dicho:focus-visible { box-shadow: var(--at-foco); border-radius: var(--r-tarjeta-grande); }

/* --------------------------------------------------------------- buscador */

.hom-buscador { padding-top: 96px; }
.hom-progreso {
  position: sticky; top: 72px; z-index: var(--at-z-pestanas); height: 8px; border-radius: var(--at-radio-capsula); background: var(--rosa-suave);
  margin: -8px 0 28px; overflow: hidden;
}
/* La barra se llena con transform: el JS escribe `scaleX(n)`. */
.hom-progreso span {
  display: block; height: 100%; width: 100%; background: var(--azul); border-radius: var(--at-radio-capsula);
  transform: scaleX(0); transform-origin: left; transition: transform var(--at-dur-lenta) var(--at-ease-salida);
}

.hom-pasos { display: grid; gap: 40px; }
.hom-paso { border: 0; padding: 0; margin: 0; min-width: 0; }
.hom-paso legend { display: flex; align-items: center; gap: var(--at-esp-3); font: var(--at-texto-web-titulo-2); font-size: 20px; color: var(--tinta); margin-bottom: var(--at-esp-4); padding: 0; }
.hom-paso-n {
  width: 36px; height: 36px; border-radius: var(--at-radio-capsula); background: var(--azul); color: var(--at-color-superficie);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: background var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-base) var(--at-ease-salida);
}
.hom-paso:has(input:checked) legend .hom-paso-n { background: var(--verde-texto); transform: scale(1.08); }

.hom-pasos input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hom-pasos label:has(input:focus-visible) { box-shadow: var(--at-foco); }

/* Paso 1: para quien */
.hom-relaciones, .hom-tramos { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); }
.hom-relacion span, .hom-tramo span {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 12px 24px;
  border-radius: var(--at-radio-capsula); border: 2px solid var(--borde-fuerte); background: var(--at-color-superficie);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 800; color: var(--tinta); cursor: pointer;
  transition: border-color var(--at-dur-base) var(--at-ease-salida), background var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-base) var(--at-ease-salida);
}
.hom-relacion:hover span, .hom-tramo:hover span { border-color: var(--azul); color: var(--azul-texto); transform: translateY(-2px); }
.hom-relacion:has(input:checked) span, .hom-tramo:has(input:checked) span { background: var(--tinta); border-color: var(--tinta); color: var(--at-color-superficie); }
.hom-relacion:has(input:checked) span::before { content: "✓ "; color: var(--hom-hielo); }

/* Paso 2: ocho perfiles con foto */
.hom-perfiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); }
.hom-perfil {
  position: relative; cursor: pointer; display: flex; flex-direction: column; border-radius: var(--r-tarjeta);
  overflow: hidden; background: var(--at-color-superficie); border: 2px solid var(--borde); transform-style: preserve-3d;
  transition: border-color var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-media) var(--at-ease-salida), box-shadow var(--at-dur-media) var(--at-ease-salida);
}
.hom-perfil-foto { display: block; overflow: hidden; }
.hom-perfil-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--rosa-suave); transition: transform var(--at-dur-sello) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-salida); }
.hom-perfil:hover {
  border-color: var(--azul); box-shadow: var(--sombra-tarjeta);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
}
.hom-perfil:hover img { transform: scale(1.06); }
.hom-perfil-texto { padding: var(--at-esp-3) var(--at-esp-4) var(--at-esp-4); display: flex; flex-direction: column; gap: 4px; background: var(--at-color-superficie); transition: background var(--at-dur-base) var(--at-ease-salida); }
.hom-perfil-texto b { font: var(--at-texto-cuerpo-fuerte); font-weight: 800; color: var(--tinta); }
.hom-perfil-texto span { font: var(--at-texto-meta); color: var(--texto); }
.hom-perfil:has(input:checked) { border-color: var(--azul); box-shadow: var(--sombra-flotante); transform: translateY(-4px); }
.hom-perfil:has(input:checked) .hom-perfil-texto { background: var(--azul); }
.hom-perfil:has(input:checked) .hom-perfil-texto b,
.hom-perfil:has(input:checked) .hom-perfil-texto span { color: var(--at-color-superficie); }
.hom-perfil:has(input:checked)::after {
  content: "✓"; position: absolute; top: var(--at-esp-3); right: var(--at-esp-3); width: 32px; height: 32px; border-radius: var(--at-radio-capsula);
  background: var(--azul); color: var(--at-color-superficie); font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--at-color-superficie); animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both;
}
.hom-perfiles:has(input:checked) .hom-perfil:not(:has(input:checked)) img { opacity: 0.6; }

/* La respuesta */
.hom-respuesta {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--at-esp-6); align-items: center; position: relative; overflow: hidden;
  padding: var(--at-esp-8); border-radius: var(--r-bloque); background: var(--hom-noche); color: var(--at-color-superficie);
}
.hom-respuesta.recien { animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both; }
.hom-respuesta > img { width: 64px; }
.hom-respuesta .ceja { margin-bottom: var(--at-esp-2); }
.hom-respuesta-idea { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); margin: 0; text-wrap: pretty; }
.hom-respuesta-consejo { color: var(--hom-hielo); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-3) 0 0; }
.hom-respuesta-consejo:empty { display: none; }
.hom-respuesta-botones { display: flex; flex-direction: column; gap: var(--at-esp-3); }
.hom-respuesta .boton.blanco { color: var(--hom-noche); border-color: var(--at-color-superficie); }

/* ------------------------------------------------------------- resultados */

.hom-resultados { padding-top: 64px; scroll-margin-top: 80px; }
.hom-resumen {
  position: sticky; top: 84px; z-index: var(--at-z-pestanas); display: flex; align-items: center; gap: var(--at-esp-3); flex-wrap: wrap;
  margin: 0 0 var(--at-esp-6); padding: var(--at-esp-2) var(--at-esp-3) var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-capsula);
  background: color-mix(in srgb, var(--hom-noche) 94%, transparent);
  color: var(--at-color-superficie); box-shadow: var(--at-elev-3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both;
}
.hom-resumen-chips { display: flex; gap: var(--at-esp-2); flex-wrap: wrap; }
.hom-resumen-chip {
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; min-height: var(--at-tactil-min);
  padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula); cursor: pointer;
  border: 0; background: var(--azul); color: var(--at-color-superficie);
}
.hom-resumen-chip::after { content: " ×"; opacity: 0.8; }
.hom-resumen-chip:hover { background: var(--fucsia-hover); }
.hom-resumen-cuenta { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--hom-hielo); margin-left: auto; }
.hom-resumen-limpiar {
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4);
  border-radius: var(--at-radio-capsula); cursor: pointer;
  border: 1px solid var(--hom-sobre-noche-tenue); background: none; color: var(--at-color-superficie);
}
.hom-resumen-limpiar:hover { border-color: var(--at-color-superficie); }

.hom-al-catalogo { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; color: var(--azul-texto); white-space: nowrap; }
.hom-al-catalogo:hover { color: var(--tinta); }

.hom-item { display: flex; position: relative; animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.hom-item > .tarjeta { flex: 1; }
.hom-item .tarjeta:hover { transform: translateY(-4px); }
/* Al llegar desde «Ver los regalos»: un aro que sale de cada tarjeta. Solo
   transform y opacity. */
.hom-resultados.llegada .hom-item:not([hidden])::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-tarjeta); border: 2px solid var(--fucsia);
  pointer-events: none; animation: homLlega var(--at-dur-celebracion) var(--at-ease-salida) 0.3s both;
}
@keyframes homLlega { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.06); } }

.hom-mas-fila { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--at-esp-3); margin-top: 28px; }

.hom-sin-resultados, .hom-vacio {
  display: flex; align-items: center; gap: 28px; padding: 36px 40px; border-radius: var(--r-bloque); background: var(--rosa-papel);
}
.hom-sin-resultados > img, .hom-vacio > img { width: 72px; flex: none; }
.hom-sin-resultados > div:not(.hom-sin-botones), .hom-vacio > div { flex: 1; }
.hom-sin-resultados h3 { font: var(--at-texto-web-titulo-2); margin: 0; }
.hom-vacio h2 { font: var(--at-texto-web-titulo-1); margin: 0; }
.hom-vacio .ceja { margin-bottom: var(--at-esp-2); }
.hom-sin-resultados p, .hom-vacio p:not(.ceja) { margin: var(--at-esp-2) 0 0; color: var(--tinta); font: var(--at-texto-web-cuerpo); max-width: 34em; }
.hom-sin-botones { display: flex; flex-direction: column; gap: var(--at-esp-3); flex: none; }

/* ------------------------------------------------------------------ momento */

.hom-momento { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hom-momento-foto img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: var(--r-bloque); background: var(--rosa-suave); }
.hom-momento h2 { margin: 0; font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); text-wrap: balance; }
.hom-momento > div > p:not(.ceja) { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }
.hom-consejos { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.hom-consejos li { display: flex; gap: var(--at-esp-3); align-items: flex-start; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-superficie); border: 1px solid var(--borde); }
.hom-consejos img { width: 24px; flex: none; margin-top: 2px; }
.hom-consejos span { font: var(--at-texto-cuerpo); font-size: 16px; color: var(--tinta); }

/* ---------------------------------------------------- un regalo que habla */

.hom-voz {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center;
  padding: 52px; border-radius: var(--r-bloque); background: var(--azul); color: var(--at-color-superficie); overflow: hidden; position: relative; isolation: isolate;
}
.hom-voz::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: var(--at-radio-capsula);
  border: 60px solid var(--hom-vela); z-index: -1;
}
.hom-voz h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-3) 0 0; }
.hom-voz p:not(.ceja) { color: var(--hom-sobre-noche); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; max-width: 32em; }
.hom-voz-tarjeta { position: relative; height: 300px; }
.hom-voz-papel {
  position: absolute; left: 0; top: 24px; width: 64%; padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--crema);
  box-shadow: var(--at-elev-3); transform: rotate(-5deg);
}
.hom-voz-mano { font-family: var(--mano); font-size: 28px; line-height: 1.1; color: var(--tinta) !important; margin: 0 0 var(--at-esp-4) !important; }
.hom-qr { width: 44%; display: block; background: var(--at-color-superficie); padding: 8px; border-radius: var(--at-radio-s); }
.hom-voz-video {
  position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 9 / 13; border-radius: var(--at-radio-xl);
  background: var(--hom-noche); border: 6px solid var(--at-color-superficie); box-shadow: var(--at-elev-3); transform: rotate(4deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-esp-5);
}
.hom-voz-play { width: 56px; height: 56px; border-radius: var(--at-radio-capsula); background: var(--azul); position: relative; }
.hom-voz-play::before { content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-capsula); background: var(--azul); animation: atLatir 1800ms var(--at-ease-salida) infinite; }
.hom-voz-play::after {
  content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--at-color-superficie);
}
.hom-voz-onda { display: flex; gap: 4px; align-items: center; height: 28px; }
.hom-voz-onda i { width: 4px; height: 100%; border-radius: var(--at-radio-capsula); background: var(--hom-hielo); transform: scaleY(var(--alto, 1)); transform-origin: center; animation: homOnda 1100ms var(--at-ease-estandar) infinite; }
.hom-voz-onda i:nth-child(1) { --alto: 0.3; animation-delay: 0s; }
.hom-voz-onda i:nth-child(2) { --alto: 0.7; animation-delay: 0.15s; }
.hom-voz-onda i:nth-child(3) { --alto: 0.45; animation-delay: 0.3s; }
.hom-voz-onda i:nth-child(4) { --alto: 1; animation-delay: 0.45s; }
.hom-voz-onda i:nth-child(5) { --alto: 0.55; animation-delay: 0.6s; }
.hom-voz-onda i:nth-child(6) { --alto: 0.8; animation-delay: 0.75s; }
.hom-voz-onda i:nth-child(7) { --alto: 0.35; animation-delay: 0.9s; }
/* Cada barra mide siempre lo mismo y respira con scaleY: nada de alto animado. */
@keyframes homOnda { 0%, 100% { transform: scaleY(calc(var(--alto) * 0.5)); } 50% { transform: scaleY(var(--alto)); } }

/* -------------------------------------------------------------------- pasos */

.hom-como { list-style: none; padding: 0; margin: var(--at-esp-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); }
.hom-como li {
  display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--r-tarjeta-grande);
  background: var(--at-color-superficie); border: 1px solid var(--borde);
}
.hom-como .hom-paso-n { margin-bottom: var(--at-esp-2); }
.hom-como b { font: var(--at-texto-titulo-2); color: var(--tinta); }
.hom-como li > span:last-child { font: var(--at-texto-cuerpo); font-size: 16px; color: var(--texto); }

/* ---------------------------------------------------------------- preguntas */

.hom-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.hom-faq h2 { margin: 0 0 var(--at-esp-3); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
.hom-faq > div:first-child a { color: var(--azul-texto); font-weight: 700; }
.hom-preguntas { display: grid; gap: var(--at-esp-3); }
.hom-preguntas details { background: var(--at-color-superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); transition: border-color var(--at-dur-base) var(--at-ease-salida); }
.hom-preguntas details[open] { border-color: var(--azul); }
.hom-preguntas summary {
  list-style: none; cursor: pointer; min-height: var(--at-tactil-min); padding: 20px 56px 20px var(--at-esp-5); position: relative;
  font: var(--at-texto-titulo-2); color: var(--tinta);
}
.hom-preguntas summary::-webkit-details-marker { display: none; }
.hom-preguntas summary::after {
  content: "+"; position: absolute; right: var(--at-esp-5); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: var(--at-radio-capsula); background: var(--rosa-papel); color: var(--azul-texto);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  transition: transform var(--at-dur-media) var(--at-ease-salida);
}
.hom-preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hom-preguntas details p { padding: 0 var(--at-esp-5) var(--at-esp-5); margin: 0; font: var(--at-texto-web-cuerpo); }

/* ------------------------------------------------------------------ llamado */

.hom-cta { margin-top: 88px; background: var(--hom-noche); isolation: isolate; }
.hom-cta .boton.blanco { color: var(--hom-noche); }

.hom-otras { display: flex; gap: var(--at-esp-3); margin-top: 28px; flex-wrap: wrap; align-items: center; }
.hom-otras span { font: var(--at-texto-meta); color: var(--texto-suave); }
.hom-otras a {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min);
  border: 1px solid var(--borde-fuerte); background: var(--at-color-superficie); color: var(--texto); padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula);
  font: var(--at-texto-cuerpo-fuerte); transition: border-color var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-salida);
}
.hom-otras a:hover { border-color: var(--azul); color: var(--azul-texto); }

/* ============================================================ la version 2 */

/* -- temporada: los dias para Navidad */
.hom-temporada {
  display: inline-flex; align-items: center; gap: var(--at-esp-3); margin: 0 0 var(--at-esp-5); padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-2) var(--at-esp-3);
  border-radius: var(--at-radio-capsula); background: var(--hom-vela); border: 1px solid var(--hom-linea);
  color: var(--hom-sobre-noche); font: var(--at-texto-cuerpo-fuerte);
}
.hom-temporada b { color: var(--at-color-superficie); font-weight: 900; }
.hom-temporada-punto { width: 8px; height: 8px; border-radius: var(--at-radio-capsula); background: var(--at-color-ok-fondo); position: relative; flex: none; }
.hom-temporada-punto::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-capsula); background: var(--at-color-ok-fondo); animation: atLatir 1800ms var(--at-ease-salida) infinite;
}

/* -- atajo del hero: para quien */
.hom-atajo { margin-top: 24px; }
.hom-atajo-titulo { margin: 0 0 var(--at-esp-3); color: var(--hom-hielo); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
.hom-atajo-chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.hom-atajo-chips a {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--at-color-superficie);
  background: var(--hom-vela); border: 1px solid var(--hom-linea);
  transition: background var(--at-dur-base) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-base) var(--at-ease-salida);
}
.hom-atajo-chips a:hover { background: var(--azul); border-color: var(--azul); color: var(--at-color-superficie); transform: translateY(-2px); }

/* -- el globo que rota */
.hom-globo > div { transition: transform var(--at-dur-base) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-salida); }
.hom-globo.sale > div { transform: translateY(-8px); opacity: 0; }
.hom-globo.entra > div { animation: atPestana var(--at-dur-lenta) var(--at-ease-salida) both; }
.hom-globo { min-width: 250px; }

/* -- por presupuesto */
.hom-bandas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--at-esp-3); }
.hom-banda {
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: var(--at-esp-5);
  border-radius: var(--r-tarjeta-grande); background: var(--at-color-superficie); border: 1px solid var(--borde); color: var(--tinta);
  overflow: hidden; isolation: isolate;
  transition: transform var(--at-dur-media) var(--at-ease-salida), box-shadow var(--at-dur-media) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-salida);
}
.hom-banda::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta);
  transform: translateY(101%); transition: transform var(--at-dur-media) var(--at-ease-salida);
}
.hom-banda-nombre { font: var(--at-texto-titulo-2); font-weight: 900; }
.hom-banda-cuenta { font: var(--at-texto-cuerpo-fuerte); font-weight: 400; color: var(--texto-suave); transition: color var(--at-dur-base) var(--at-ease-salida); }
.hom-banda-cuenta b { color: var(--azul-texto); font-weight: 900; transition: color var(--at-dur-base) var(--at-ease-salida); }
.hom-banda-flecha {
  margin-top: var(--at-esp-4); width: 40px; height: 40px; border-radius: var(--at-radio-capsula); background: var(--rosa-suave); color: var(--azul-texto);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
  transition: background var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-media) var(--at-ease-salida);
}
.hom-banda:hover {
  color: var(--at-color-superficie); border-color: var(--tinta); box-shadow: var(--sombra-flotante);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
}
.hom-banda:hover::before { transform: none; }
.hom-banda:hover .hom-banda-cuenta { color: var(--hom-hielo); }
.hom-banda:hover .hom-banda-cuenta b { color: var(--hom-hielo); }
.hom-banda:hover .hom-banda-flecha { background: var(--azul); color: var(--at-color-superficie); transform: translateX(4px); }

/* -- sorprendeme */
.hom-titulo-regalos { align-items: flex-end; }
.hom-titulo-acciones { display: flex; align-items: center; gap: var(--at-esp-5); flex-wrap: wrap; }
.hom-dados {
  display: inline-flex; align-items: center; gap: var(--at-esp-3); min-height: var(--at-tactil-min); padding: 0 var(--at-esp-5) 0 var(--at-esp-3); border-radius: var(--at-radio-capsula); cursor: pointer;
  border: 0; background: var(--tinta); color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800;
  box-shadow: var(--at-elev-1); transition: transform var(--at-dur-base) var(--at-ease-salida), background var(--at-dur-base) var(--at-ease-salida);
}
.hom-dados:hover { background: var(--azul); transform: translateY(-2px); }
.hom-dados:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); box-shadow: none; cursor: not-allowed; transform: none; }
.hom-dados-cara {
  position: relative; width: 28px; height: 28px; border-radius: var(--at-radio-s); background: var(--at-color-superficie); flex: none;
  transition: transform var(--at-dur-lenta) var(--at-ease-salida);
}
.hom-dados-cara i { position: absolute; width: 4px; height: 4px; border-radius: var(--at-radio-capsula); background: var(--tinta); }
.hom-dados-cara i:nth-child(1) { left: 5px; top: 5px; }
.hom-dados-cara i:nth-child(2) { right: 5px; top: 5px; }
.hom-dados-cara i:nth-child(3) { left: 12px; top: 12px; }
.hom-dados-cara i:nth-child(4) { left: 5px; bottom: 5px; }
.hom-dados-cara i:nth-child(5) { right: 5px; bottom: 5px; }
.hom-dados:hover .hom-dados-cara { transform: rotate(90deg); }
.hom-dados.rueda .hom-dados-cara { animation: atGirar var(--at-dur-lenta) linear infinite; }

.hom-sorpresa {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--at-esp-8); align-items: center; margin: 0 0 28px;
  padding: 28px var(--at-esp-8); border-radius: var(--r-bloque); background: var(--tinta); color: var(--at-color-superficie); position: relative; overflow: hidden;
  isolation: isolate; animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both;
}
.hom-sorpresa-texto > img { width: 56px; margin-bottom: var(--at-esp-4); }
.hom-sorpresa .ceja { margin-bottom: 8px; }
.hom-sorpresa-frase { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); margin: 0; text-wrap: balance; }
.hom-sorpresa.barajando .hom-sorpresa-frase { color: var(--hom-hielo); }
.hom-sorpresa-botones { display: flex; gap: var(--at-esp-3); margin-top: var(--at-esp-5); flex-wrap: wrap; }
.hom-sorpresa-botones .boton.blanco { color: var(--tinta); border-color: var(--at-color-superficie); }
.hom-sorpresa-tarjeta { min-height: 380px; display: flex; }
.hom-sorpresa-tarjeta .tarjeta { flex: 1; }
.hom-sorpresa.barajando .hom-sorpresa-tarjeta .tarjeta { transform: rotate(-2deg) scale(0.97); opacity: 0.7; }
.hom-sorpresa-tarjeta .tarjeta.escogida { animation: homEscogida var(--at-dur-sello) var(--at-ease-salida) both; box-shadow: 0 0 0 4px var(--hom-hielo), var(--sombra-flotante); }
@keyframes homEscogida { 0% { transform: scale(0.9) rotate(-3deg); } 60% { transform: scale(1.04) rotate(1deg); } 100% { transform: none; } }

/* -- guia por etapa */
.hom-etapas { display: grid; gap: var(--at-esp-3); }
.hom-etapas-pestanas { display: flex; gap: var(--at-esp-2); flex-wrap: wrap; margin-bottom: 8px; }
.hom-etapas-pestanas button {
  font: var(--at-texto-cuerpo-fuerte); font-weight: 800; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-5);
  border-radius: var(--at-radio-capsula); cursor: pointer;
  border: 2px solid var(--borde-fuerte); background: var(--at-color-superficie); color: var(--tinta);
  transition: border-color var(--at-dur-base) var(--at-ease-salida), background var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-salida);
}
.hom-etapas-pestanas button:hover { border-color: var(--azul); color: var(--azul-texto); }
.hom-etapas-pestanas button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--at-color-superficie); }
.hom-etapa {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); border-radius: var(--r-bloque); overflow: hidden;
  background: var(--at-color-superficie); border: 1px solid var(--borde);
}
.hom-etapa.entra { animation: atPestana var(--at-dur-lenta) var(--at-ease-salida) both; }
.hom-etapa-edad {
  display: flex; align-items: flex-end; padding: 28px; background: var(--azul); color: var(--at-color-superficie);
  font: var(--at-texto-web-titulo-1); font-size: 44px; font-weight: 900; line-height: 0.95;
}
.hom-etapa-cuerpo { padding: var(--at-esp-8); }
.hom-etapa h3 { font: var(--at-texto-web-titulo-2); margin: 0 0 var(--at-esp-3); text-wrap: balance; }
.hom-etapa-cuerpo > p { font: var(--at-texto-web-cuerpo); margin: 0 0 var(--at-esp-4); max-width: 42em; }
.hom-etapa-ideas { list-style: none; padding: 0; margin: 0 0 var(--at-esp-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-3); }
.hom-etapa-ideas li {
  padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--azul-panel); color: var(--tinta);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700;
}
.hom-etapa-gustos { display: flex; gap: var(--at-esp-2); flex-wrap: wrap; }
.hom-etapa-gustos a {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula);
  border: 1px solid var(--borde-fuerte); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--azul-texto);
  transition: background var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-salida);
}
.hom-etapa-gustos a:hover { background: var(--azul); border-color: var(--azul); color: var(--at-color-superficie); }

/* Lo de abajo del pliegue no se pinta hasta que se acerca: menos trabajo en la
   primera carga. `contain-intrinsic-size` guarda el alto y evita saltos. */
.hom-seccion, .hom-cta { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* -------------------------------------------------------------------- tablet */

@media (max-width: 1180px) {
  .hom-hero-rejilla { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; }
  .hom-collage { height: 480px; max-width: 600px; }
  .hom-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hom-dichos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hom-perfiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hom-cabeza, .hom-faq, .hom-momento { grid-template-columns: 1fr; gap: 20px; }
  .hom-faq, .hom-momento { gap: var(--at-esp-8); }
  .hom-momento-foto img { max-height: 420px; aspect-ratio: 4 / 3; }
  .hom-respuesta { grid-template-columns: auto 1fr; }
  .hom-respuesta-botones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .hom-voz { grid-template-columns: 1fr; padding: 40px; }
  .hom-voz-tarjeta { max-width: 460px; width: 100%; }
  .hom-sin-resultados { flex-wrap: wrap; }
  .hom-bandas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hom-sorpresa { grid-template-columns: 1fr 260px; }
  .hom-etapa { grid-template-columns: 1fr; }
  .hom-etapa-edad { padding: 20px 28px; font-size: 32px; }
}

/* ------------------------------------------------------------------- celular */

@media (max-width: 760px) {
  .hom-hero { padding-bottom: var(--at-esp-8); }
  .hom-hero-rejilla { padding-top: var(--at-esp-8); padding-bottom: 28px; }
  .hom-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .hom-para { font: var(--at-texto-titulo-1); font-family: var(--mano); font-weight: 700; }
  .hom-hero .botones .boton { flex: 1 1 100%; }
  .hom-collage { height: 380px; }
  .hom-collage-grande { width: 84%; }
  .hom-polaroid { padding: 6px 6px 28px; }
  .hom-polaroid figcaption { font-size: 18px; bottom: 4px; }
  .hom-polaroid-a { width: 40%; top: 20px; }
  .hom-polaroid-b { width: 42%; }
  .hom-collage .globo-aviso { right: 12px; left: auto; bottom: 40px; max-width: 72%; }
  .hom-sellos { gap: var(--at-esp-2); }
  .hom-sellos li { padding: var(--at-esp-3) var(--at-esp-4); }
  .hom-sellos b { font: var(--at-texto-titulo-2); font-size: 22px; font-weight: 900; }
  .hom-sellos li:last-child b { font: var(--at-texto-cuerpo-fuerte); font-weight: 900; }
  .hom-cinta span { font: var(--at-texto-titulo-2); font-weight: 900; }
  .hom-seccion { padding-top: 60px; }
  .hom-cabeza h2, .hom-momento h2, .hom-faq h2, .hom-vacio h2, .hom-voz h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .hom-dichos { gap: var(--at-esp-3); }
  .hom-dicho { min-height: 200px; }
  .hom-dicho-cara { padding: var(--at-esp-4); }
  .hom-dicho-dice b { font: var(--at-texto-titulo-2); font-size: 20px; }
  .hom-dicho-quiere b { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }
  .hom-buscador { padding-top: 60px; }
  .hom-pasos { gap: var(--at-esp-8); }
  .hom-paso legend { font: var(--at-texto-titulo-2); font-size: 18px; }
  .hom-relacion span, .hom-tramo span { padding: 0 var(--at-esp-4); }
  .hom-perfiles { gap: var(--at-esp-3); }
  .hom-perfil-texto { padding: var(--at-esp-3); }
  .hom-respuesta { grid-template-columns: 1fr; padding: var(--at-esp-6); gap: var(--at-esp-4); }
  .hom-respuesta > img { width: 48px; }
  .hom-respuesta-idea { font: var(--at-texto-titulo-2); font-size: 20px; }
  .hom-respuesta-botones .boton { flex: 1 1 100%; }
  .hom-progreso { top: 118px; }
  .hom-resumen { top: 118px; border-radius: var(--at-radio-l); }
  .hom-resumen-cuenta { margin-left: 0; }
  .titulo-fila:has(.hom-al-catalogo) { flex-direction: column; align-items: flex-start; }
  .hom-como { grid-template-columns: 1fr; gap: var(--at-esp-3); }
  .hom-sin-resultados, .hom-vacio { flex-direction: column; align-items: flex-start; padding: 28px; gap: var(--at-esp-5); }
  .hom-sin-botones, .hom-sin-botones .boton, .hom-vacio .boton { width: 100%; }
  .hom-voz { padding: 28px; gap: 28px; }
  .hom-voz-tarjeta { height: 252px; }
  .hom-cta { margin-top: 60px; }
  .hom-temporada { font: var(--at-texto-meta); font-weight: 700; }
  .hom-bandas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3); }
  .hom-banda { padding: var(--at-esp-4); }
  .hom-titulo-acciones { width: 100%; justify-content: space-between; }
  .hom-sorpresa { grid-template-columns: 1fr; padding: var(--at-esp-6); gap: var(--at-esp-5); }
  .hom-sorpresa-frase { font: var(--at-texto-titulo-1); }
  .hom-sorpresa-tarjeta { min-height: 0; }
  .hom-etapas-pestanas { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--margen) * -1); padding: 2px var(--margen) 8px; scrollbar-width: none; }
  .hom-etapas-pestanas button { flex: none; }
  .hom-etapa-cuerpo { padding: var(--at-esp-5); }
  .hom-etapa h3 { font: var(--at-texto-titulo-2); font-size: 20px; }
  .hom-etapa-ideas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hom-temporada-punto::after { animation: none; }
  .hom-subrayado::after, .hom-boton-vivo::after, .hom-polaroid, .hom-voz-onda i, .hom-voz-play::before, .hom-cinta-pista { animation: none; }
  .hom-dicho-cara { transition: none; }
}

/*
 * El inicio: `capturas/01-inicio.jpg`, en el UI/UX v4.
 *
 * Sin degradados: los fondos oscuros son `--tinta` planos (el hero, el pie, el
 * bolsillo) y los fucsias son fucsia plano. La profundidad la dan `--at-elev-*`
 * y las tarjetas, no un fondo que se desvanece. Las transparencias sobre tinta
 * salen de `--sitio-sobre-tinta-*` (atineo-web.css), que son `color-mix` de
 * tokens. Solo se animan `transform` y `opacity`.
 */

/* ================================================================== inicio */

/* El hero es un panel oscuro a sangre (con 12px de aire contra la cabecera
   clara) y el abanico de regalos reales. */
.hero-noche {
  position: relative; isolation: isolate; overflow: clip; margin: var(--at-esp-3) var(--at-esp-3) 0; border-radius: var(--at-radio-hoja);
  background: var(--tinta); color: var(--blanco); padding-bottom: var(--at-esp-9);
}

.inicio-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--at-esp-9); align-items: center;
  padding-top: var(--at-esp-10); padding-bottom: var(--at-esp-8);
}

.hero-sello {
  display: inline-flex; align-items: center; gap: var(--at-esp-2); margin: 0 0 var(--at-esp-5); padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-2) var(--at-esp-2); border-radius: var(--at-radio-capsula);
  background: var(--sitio-sobre-tinta-1); border: 1px solid var(--sitio-sobre-tinta-2);
  font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--rosa-papel);
}
.hero-sello img { width: 24px; }

/* El tamano lo pone el `h1` global (display web 56, titulo 40 en tablet, display 33 en celular). */
.hero-noche .titular { color: var(--blanco); margin: 0; text-wrap: balance; }

.titular span { display: inline-block; animation: atPalabra var(--at-dur-lenta) var(--at-ease-salida) both; animation-delay: calc(150ms + var(--i) * 80ms); }

.titular .resalta { color: var(--fucsia); }

/* Sobre tinta el fucsia de marca no alcanza contraste: va el claro. */
.hero-noche .titular .resalta { color: var(--fucsia-claro); }

.hero-noche .entrada { margin-top: var(--at-esp-6); color: var(--sitio-texto-sobre-tinta); max-width: 32em; }

/* El atinador: parece un buscador, es un enlace a un filtro real. */
.atinador {
  display: flex; align-items: center; gap: var(--at-esp-3); margin-top: var(--at-esp-8); padding: var(--at-esp-2); max-width: 540px;
  border-radius: var(--at-radio-capsula); background: var(--blanco); color: var(--tinta); box-shadow: var(--at-elev-3);
  transition: transform var(--at-dur-base) var(--at-ease-salida), box-shadow var(--at-dur-base) var(--at-ease-estandar);
}
.atinador:hover { color: var(--tinta); transform: translateY(-2px); }
.atinador-lupa { width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-capsula); background: var(--rosa-papel); display: grid; place-items: center; flex: none; }
.atinador-lupa img { width: 26px; }
.atinador-frase { flex: 1; min-width: 0; font-size: var(--sitio-t-m); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atinador-frase b { color: var(--tinta); display: inline-block; transition: opacity var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida); }
.atinador-frase b.gusto { color: var(--fucsia); }
.atinador-frase b.cambia { opacity: 0; transform: translateY(var(--at-esp-2)); }
.atinador-mas { margin: 0 var(--at-esp-2); color: var(--texto-suave); font-weight: 700; }
/* El principal fucsia del hero es «Empezar gratis»: este va en rosa papel. */
.atinador-ir { flex: none; display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--rosa-papel); color: var(--fucsia); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; }
.atinador-ir i { font-style: normal; display: inline-block; margin-left: var(--at-esp-1); transition: transform var(--at-dur-base) var(--at-ease-salida); }
.atinador:hover .atinador-ir i { transform: translateX(4px); }

.botones { display: flex; gap: var(--at-esp-3); margin-top: var(--at-esp-5); flex-wrap: wrap; align-items: center; }

/* Era un boton con degradado y un destello que lo cruzaba: ahora es el fucsia
   plano del manual, con un borde claro para que se separe del fondo tinta. */
.boton.brillo { border-color: var(--fucsia-claro); box-shadow: var(--at-elev-1); }

.garantias { list-style: none; padding: 0; margin: var(--at-esp-6) 0 0; display: flex; gap: var(--at-esp-2) var(--at-esp-5); flex-wrap: wrap; }

.garantias li { display: inline-flex; align-items: center; gap: var(--at-esp-2); font: var(--at-texto-cuerpo); color: var(--texto); }
.hero-noche .garantias li { color: var(--sitio-texto-sobre-tinta); }

.garantias li::before {
  content: "✓"; width: 20px; height: 20px; border-radius: var(--at-radio-capsula); background: var(--verde-fondo); color: var(--verde-texto);
  display: grid; place-items: center; font-size: var(--sitio-t-xs); font-weight: 800; flex: none;
}


/* El abanico: tres regalos del catalogo que siguen al mouse (`--mx`, `--my`
   los pone el script; sin el, quedan quietos y abiertos). */
.abanico { --mx: 0; --my: 0; position: relative; height: 560px; perspective: 1200px; }

.abanico-carta {
  position: absolute; width: 58%; border-radius: var(--at-radio-xl); overflow: hidden; background: var(--blanco); color: var(--tinta);
  box-shadow: var(--at-elev-3); transform-style: preserve-3d;
  transition: transform var(--at-dur-sello) var(--at-ease-salida), box-shadow var(--at-dur-base) var(--at-ease-estandar); animation: atCarta var(--at-dur-celebracion) var(--at-ease-salida) both;
}
.abanico-carta:hover { color: var(--tinta); z-index: 5; box-shadow: var(--at-elev-3), 0 0 0 3px var(--fucsia-claro); }
.abanico-carta img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; background: var(--rosa-suave); }
.abanico-cuerpo { display: grid; gap: var(--at-esp-1); padding: var(--at-esp-3) var(--at-esp-4) var(--at-esp-4); }
.abanico-cuerpo b { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.abanico-cuerpo span { font: var(--at-texto-meta); color: var(--texto-suave); }
.abanico-cuerpo em { font: var(--at-texto-cuerpo-fuerte); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--azul-texto); margin-top: var(--at-esp-1); }

.abanico-carta.c0 { left: 21%; top: 40px; z-index: 3; --r: 0deg; --dx: 0px; animation-delay: 350ms;
  transform: translate(calc(var(--mx) * 18px), calc(var(--my) * 14px)) rotateY(calc(var(--mx) * 8deg)) rotateX(calc(var(--my) * -6deg)); }
.abanico-carta.c1 { left: 0; top: 110px; z-index: 2; width: 50%; animation-delay: 500ms;
  transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 6px)) rotate(-9deg); }
.abanico-carta.c2 { right: 0; top: 150px; z-index: 1; width: 50%; animation-delay: 650ms;
  transform: translate(calc(var(--mx) * 30px), calc(var(--my) * 22px)) rotate(8deg); }
.abanico-carta.c1:hover { transform: rotate(-5deg) translateY(-10px); }
.abanico-carta.c2:hover { transform: rotate(4deg) translateY(-10px); }

/* El video del hero: una tarjeta grande que sigue al mouse con el mismo
   `--mx`/`--my` del abanico. */
.hero-video {
  position: absolute; top: 36px; left: 4%; right: 0; height: 440px; margin: 0;
  border-radius: var(--at-radio-hoja); overflow: hidden; background: var(--tinta-caja); z-index: 1;
  box-shadow: var(--at-elev-3);
  transform: translate(calc(var(--mx) * 10px), calc(var(--my) * 8px)) rotateY(calc(var(--mx) * 4deg)) rotateX(calc(var(--my) * -3deg));
  transition: transform var(--at-dur-sello) var(--at-ease-salida); animation: atCarta var(--at-dur-celebracion) var(--at-ease-salida) 350ms both;
}
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video-pausa {
  position: absolute; left: var(--at-esp-3); bottom: var(--at-esp-3); z-index: 2; width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--blanco);
  background: var(--sitio-boton-vidrio); border: 1px solid var(--sitio-sobre-tinta-3); backdrop-filter: blur(6px);
  opacity: 0.85; transition: opacity var(--at-dur-rapida) var(--at-ease-estandar);
}
.hero-video-pausa:hover, .hero-video-pausa:focus-visible { opacity: 1; }
/* Dos barras = pausar; un triangulo = reproducir. Dibujado, no un caracter:
   Nunito no trae ❚ ni ▶ y el navegador los pintaba como un cuadro. */
.hero-video-pausa i { width: 4px; height: 14px; border-radius: var(--at-radio-capsula); background: currentColor; }
.hero-video-pausa[data-parado] i:first-child {
  width: 0; height: 0; border-radius: 0; background: none; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor;
}
.hero-video-pausa[data-parado] i:last-child { display: none; }

/* Con catalogo, el primer regalo flota sobre el video. */
.abanico-carta.mini {
  width: 40%; right: -3%; bottom: 112px; z-index: 4; animation-delay: 700ms;
  transform: translate(calc(var(--mx) * 26px), calc(var(--my) * 20px)) rotate(4deg);
}
.abanico-carta.mini:hover { transform: rotate(2deg) translateY(-8px); }
.abanico-carta.mini img { aspect-ratio: 4 / 3; }
.abanico-carta.mini .abanico-cuerpo { padding: var(--at-esp-3) var(--at-esp-3) var(--at-esp-3); }
.abanico-carta.mini .abanico-cuerpo i { font: var(--at-texto-etiqueta); font-style: normal; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--fucsia); }
.abanico-carta.mini .abanico-cuerpo b { font-size: var(--sitio-t-s); }

.abanico .globo-chip { top: 20px; right: 6%; z-index: 6; }
.abanico .globo-aviso { left: -4%; bottom: 8px; right: auto; z-index: 6; }


.hero-cifras {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--at-esp-8) 0 0; padding: 0;
  border-top: 1px solid var(--sitio-sobre-tinta-2);
}
.hero-cifras div { padding: var(--at-esp-5) var(--at-esp-5) var(--at-esp-1) 0; display: flex; flex-direction: column-reverse; gap: var(--at-esp-1); }
.hero-cifras div + div { padding-left: var(--at-esp-6); border-left: 1px solid var(--sitio-sobre-tinta-1); }
.hero-cifras dd { margin: 0; font: var(--at-texto-cifra); font-variant-numeric: tabular-nums; color: var(--blanco); }
.hero-cifras div:nth-child(2) dd { color: var(--fucsia-claro); }
.hero-cifras div:nth-child(3) dd { color: var(--azul); }
.hero-cifras dt { font: var(--at-texto-meta); color: var(--sitio-texto-sobre-tinta-2); }


/* ------------------------------------------------------------------ quiz */

.pruebame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--at-esp-9); align-items: center; padding-top: var(--at-esp-10); }

/* El unico fucsia grande de la seccion: el quiz es la accion. Plano, sin
   inclinar (el texto inclinado se lee peor al 130%). */
.quiz {
  background: var(--fucsia); border-radius: var(--r-bloque); padding: var(--at-esp-8); color: var(--blanco);
  box-shadow: var(--at-elev-3); min-height: 440px; display: flex; flex-direction: column;
}

.quiz-cabeza { display: flex; align-items: center; justify-content: space-between; }

.quiz-puntos { display: flex; gap: var(--at-esp-1); }

.quiz-puntos i { width: 24px; height: 6px; border-radius: var(--at-radio-capsula); background: var(--sitio-sobre-tinta-3); transition: background-color var(--at-dur-base) var(--at-ease-estandar); }

.quiz[data-en="0"] .quiz-puntos i:nth-child(1),
.quiz[data-en="1"] .quiz-puntos i:nth-child(-n+2),
.quiz[data-en="2"] .quiz-puntos i { background: var(--blanco); }


.quiz-paso { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; flex: 1; animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

.quiz-paso + .quiz-paso { margin-top: var(--at-esp-6); }

/* Un <legend> ignora el margen dentro del fieldset; flotado se comporta como un bloque. */
.quiz-titulo { float: left; width: 100%; font: var(--at-texto-titulo-1); margin-top: var(--at-esp-5); padding: 0; letter-spacing: var(--at-tracking-titulo); }

.quiz-titulo + * { clear: both; }

.quiz-nota { color: var(--sitio-texto-sobre-tinta); font: var(--at-texto-cuerpo); margin: var(--at-esp-2) 0 0; }


.quiz-personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-2); margin-top: var(--at-esp-5); }

.quiz-gustos { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); margin-top: var(--at-esp-5); }

.quiz-opcion, .quiz-chip { position: relative; cursor: pointer; }

.quiz-opcion input, .quiz-chip input { position: absolute; opacity: 0; pointer-events: none; }

.quiz-opcion span {
  display: flex; align-items: center; min-height: var(--at-alto-cta); padding: 0 var(--at-esp-5); border-radius: var(--at-radio-m); background: var(--sitio-sobre-tinta-2);
  border: 1px solid var(--sitio-sobre-tinta-3); font: var(--at-texto-cuerpo-fuerte); font-weight: 700;
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida);
}

.quiz-opcion:hover span { background: var(--sitio-sobre-tinta-3); transform: translateY(-1px); }

.quiz-chip span {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--sitio-sobre-tinta-2);
  border: 1px solid var(--sitio-sobre-tinta-3); font: var(--at-texto-cuerpo); font-weight: 600;
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}

.quiz-opcion input:checked + span, .quiz-chip input:checked + span { background: var(--blanco); color: var(--fucsia); border-color: var(--blanco); }

.quiz-chip input:checked + span { animation: atChip var(--at-dur-base) var(--at-ease-salida); }

.quiz-opcion input:focus-visible + span, .quiz-chip input:focus-visible + span { outline: 2px solid transparent; box-shadow: var(--at-foco); }


.quiz-acciones { display: flex; gap: var(--at-esp-2); margin-top: auto; padding-top: var(--at-esp-5); align-items: center; }

.quiz-acciones .boton { margin-left: auto; border-color: var(--blanco); }

.quiz-atras { min-height: var(--at-tactil-min); min-width: var(--at-tactil-min); border: 0; background: none; color: var(--sitio-texto-sobre-tinta); font: var(--at-texto-cuerpo-fuerte); cursor: pointer; padding: 0 var(--at-esp-2); }

.quiz-atras:hover { color: var(--blanco); }


.quiz-pensando { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-esp-5); animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

.quiz-pensando b { font: var(--at-texto-titulo-2); font-size: var(--sitio-t-2xl); }

.latido { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }

.latido::before { content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-capsula); background: var(--sitio-sobre-tinta-3); animation: atLatir 1800ms var(--at-ease-salida) infinite; }

.latido img { width: 78px; position: relative; animation: atTino 3200ms var(--at-ease-estandar) infinite; }

.puntos-pensar { display: flex; gap: var(--at-esp-2); }

.puntos-pensar i { width: 8px; height: 8px; border-radius: var(--at-radio-capsula); background: var(--blanco); animation: atPensar 1200ms var(--at-ease-estandar) infinite both; }

.puntos-pensar i:nth-child(2) { animation-delay: 200ms; }

.puntos-pensar i:nth-child(3) { animation-delay: 400ms; }


.quiz-resultado { display: flex; flex-direction: column; flex: 1; animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

.quiz-atine { display: flex; align-items: center; gap: var(--at-esp-3); margin-top: var(--at-esp-4); }

.quiz-atine img { width: 44px; }

.quiz-atine b { display: block; font: var(--at-texto-titulo-1); }

.quiz-atine span { display: block; font: var(--at-texto-meta); color: var(--sitio-texto-sobre-tinta); margin-top: var(--at-esp-1); }

.quiz-ideas { display: flex; flex-direction: column; gap: var(--at-esp-3); margin-top: var(--at-esp-5); }

.quiz-idea {
  display: flex; align-items: center; gap: var(--at-esp-4); padding: var(--at-esp-3); border-radius: var(--at-radio-m); background: var(--blanco); color: var(--tinta);
  animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; transition: transform var(--at-dur-base) var(--at-ease-salida);
}

.quiz-idea:hover { color: var(--tinta); transform: translateX(4px); }

.quiz-idea:nth-child(2) { animation-delay: 80ms; }

.quiz-idea:nth-child(3) { animation-delay: 160ms; }

.quiz-idea img { width: 52px; height: 52px; border-radius: var(--at-radio-s); object-fit: cover; flex: none; background: var(--rosa-suave); }

.quiz-idea .texto { flex: 1; min-width: 0; }

.quiz-idea b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }

.quiz-idea small { display: block; font: var(--at-texto-meta); color: var(--texto-suave); margin-top: var(--at-esp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.quiz-idea .valor { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul-texto); white-space: nowrap; }

.quiz-vacio { background: var(--sitio-sobre-tinta-2); border-radius: var(--at-radio-m); padding: var(--at-esp-5); font: var(--at-texto-cuerpo); }


/* Con el script, un paso a la vez. Sin el, todo el formulario queda a la vista. */
.quiz.con-pasos .quiz-paso { display: none; }

.quiz.con-pasos[data-en="0"] .quiz-paso[data-paso="0"],
.quiz.con-pasos[data-en="1"] .quiz-paso[data-paso="1"] { display: flex; margin-top: 0; }


/* -------------------------------------------------------------- aliados */

.banda-aliados { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--blanco); margin-top: var(--at-esp-10); }

.banda-aliados .contenido { display: flex; align-items: center; gap: var(--at-esp-8); padding-top: var(--at-esp-5); padding-bottom: var(--at-esp-5); }

.banda-aliados .ceja { flex: none; }

.marquee { flex: 1; min-width: 0; overflow: hidden; }

.marquee-pista { display: flex; gap: var(--at-esp-9); width: max-content; animation: atMarquee 40s linear infinite; }

.marquee:hover .marquee-pista, .marquee:focus-within .marquee-pista { animation-play-state: paused; }

.marquee-pista span { font-size: var(--sitio-t-2xl); font-weight: 800; color: var(--texto-tenue); letter-spacing: var(--at-tracking-titulo); white-space: nowrap; transition: color var(--at-dur-base) var(--at-ease-estandar); }

.marquee-pista span:hover { color: var(--fucsia); }

.marquee-pista span::after { content: "✦"; margin-left: var(--at-esp-9); color: var(--rosa-papel); font-size: var(--sitio-t-m); vertical-align: middle; }


/* -------------------------------------------------------------- promesa */

.promesa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--at-esp-9); align-items: center; padding-top: var(--at-esp-10); padding-bottom: var(--at-esp-5); }

.promesa-foto { position: relative; height: 460px; }

.promesa-foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-bloque); background: var(--rosa-suave); }

/* «Atinaste» es el unico lugar donde va el sello. */
.promesa.visto .globo-aviso b { display: inline-block; animation: atSello var(--at-dur-sello) var(--at-ease-estandar) both 900ms; }

/* Cifras: el azul cuenta datos; el fucsia queda para decidir. */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3); margin-top: var(--at-esp-6); }

.cifras div { padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--at-radio-m); background: var(--blanco); border: 1px solid var(--borde); }

.cifras b { display: block; font: var(--at-texto-web-titulo-2); font-variant-numeric: tabular-nums; color: var(--azul); }

.cifras span { display: block; font: var(--at-texto-meta); color: var(--texto-suave); margin-top: var(--at-esp-1); }


/* --------------------------------------------------- titulos de seccion */

/* Solo en el inicio: las secciones cortas compiten con el hero, asi que sus
   titulos suben a titulo-1 web. */
.pagina-inicio .seccion-corta > h2, .pagina-inicio .seccion-corta .titulo-fila h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }

.pruebame { position: relative; }


/* -------------------------------------------------------------- vitrina */

.vitrina-marco {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--at-esp-4); margin-top: var(--at-esp-2);
  padding: var(--at-esp-3); border-radius: var(--at-radio-hoja); background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--at-elev-1);
}

.vitrina-personas { position: relative; display: flex; flex-direction: column; gap: var(--at-esp-1); padding: var(--at-esp-2); }

/* Cuatro tonos que se repiten: fucsia, azul, ambar, verde. */
.vitrina-tab { --claro: var(--rosa-papel); --fuerte: var(--fucsia); }
.vitrina-tab[style*="--tono: 1"] { --claro: var(--azul-fondo); --fuerte: var(--azul-texto); }
.vitrina-tab[style*="--tono: 2"] { --claro: var(--ambar-fondo); --fuerte: var(--ambar-texto); }
.vitrina-tab[style*="--tono: 3"] { --claro: var(--verde-fondo); --fuerte: var(--verde-texto); }

.vitrina-tab {
  display: flex; align-items: center; gap: var(--at-esp-3); min-height: var(--at-alto-cta); padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-2) var(--at-esp-2); border-radius: var(--at-radio-m);
  color: var(--texto); font-size: var(--sitio-t-m); font-weight: 700; transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida);
}
.vitrina-tab:hover { background: var(--crema); color: var(--tinta); }
.vitrina-tab[aria-selected="true"] { background: var(--tinta); color: var(--blanco); transform: translateX(4px); }
.vitrina-inicial {
  width: 40px; height: 40px; border-radius: var(--at-radio-s); background: var(--claro); color: var(--fuerte);
  display: grid; place-items: center; font-weight: 800; font-size: var(--sitio-t-l); flex: none; transition: transform var(--at-dur-base) var(--at-ease-salida);
}
.vitrina-tab[aria-selected="true"] .vitrina-inicial { transform: rotate(-8deg) scale(1.05); }
.vitrina-nombre { flex: 1; }
.vitrina-tab i { font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida); color: var(--fucsia-claro); }
.vitrina-tab[aria-selected="true"] i { opacity: 1; transform: none; }

.vitrina-panel {
  border-radius: var(--at-radio-l); padding: var(--at-esp-6); min-width: 0;
  background: var(--crema);
  display: flex; flex-direction: column; gap: var(--at-esp-4);
}
.vitrina-panel:not([hidden]) { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.vitrina-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--at-esp-2) var(--at-esp-4); }
.vitrina-frase { margin: 0; font-size: var(--sitio-t-2xl); font-weight: 800; line-height: 1.2; color: var(--tinta); letter-spacing: var(--at-tracking-titulo); }
.vitrina-frase b { color: var(--fucsia); }

.vitrina-regalos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.vitrina-regalo {
  position: relative; display: flex; flex-direction: column; border-radius: var(--at-radio-l); overflow: hidden; background: var(--blanco); color: var(--tinta);
  box-shadow: var(--at-elev-1); transition: transform var(--at-dur-base) var(--at-ease-salida), box-shadow var(--at-dur-base) var(--at-ease-estandar);
}
.vitrina-panel:not([hidden]) .vitrina-regalo { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; animation-delay: calc(var(--n) * 70ms); }
.vitrina-regalo:hover { color: var(--tinta); transform: translateY(-4px); box-shadow: var(--at-elev-3); }
.vitrina-regalo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; background: var(--rosa-suave); transition: transform var(--at-dur-celebracion) var(--at-ease-salida); }
.vitrina-regalo:hover img { transform: scale(1.06); }
.vitrina-regalo picture { overflow: hidden; }
.vitrina-texto { display: grid; gap: var(--at-esp-1); padding: var(--at-esp-3) var(--at-esp-4) var(--at-esp-1); }
.vitrina-texto b { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vitrina-texto span { font: var(--at-texto-meta); color: var(--texto-suave); }
.vitrina-regalo em { font: var(--at-texto-cuerpo-fuerte); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--azul-texto); padding: 0 var(--at-esp-4) var(--at-esp-4); margin-top: auto; }

.vitrina-todo { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--at-tactil-min); margin-top: auto; font: var(--at-texto-cuerpo-fuerte); font-weight: 800; color: var(--fucsia); }
.vitrina-todo i { font-style: normal; display: inline-block; margin-left: var(--at-esp-1); transition: transform var(--at-dur-base) var(--at-ease-salida); }
.vitrina-todo:hover i { transform: translateX(4px); }

.persona-gustos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.persona-gustos a {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--blanco); border: 1px solid var(--borde);
  color: var(--fucsia); font: var(--at-texto-meta); font-weight: 700; transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar);
}
.persona-gustos a:hover { background: var(--fucsia); border-color: var(--fucsia); color: var(--blanco); }


/* --------------------------------------------------------- pasos cortos */

.pasos-cortos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--at-esp-8); margin-top: var(--at-esp-9); position: relative; overflow: hidden; }

.pasos-cortos > div { position: relative; padding-top: var(--at-esp-2); }

.pasos-cortos > div + div::before { content: ""; position: absolute; left: calc(var(--at-esp-4) * -1); top: var(--at-esp-3); bottom: 0; width: 1px; background: var(--sitio-sobre-tinta-2); }

/* El numero es un contorno grande y decorativo: se rellena al pasar. */
.pasos-cortos .ceja {
  margin: 0 0 var(--at-esp-3); font-family: var(--letra); font-weight: 800; font-size: 64px; letter-spacing: var(--at-tracking-titulo); line-height: 1; text-transform: none;
  color: transparent; -webkit-text-stroke: 2px var(--fucsia-claro);
  transition: color var(--at-dur-base) var(--at-ease-estandar);
}

.pasos-cortos > div:hover .ceja { color: var(--fucsia-claro); }

.pasos-cortos h3 { font-size: var(--sitio-t-2xl); margin: 0 0 var(--at-esp-2); }

.pasos-cortos p { font: var(--at-texto-cuerpo); margin: 0; }

.pasos-cortos + .centro { margin: var(--at-esp-5) 0 0; }


/* -------------------------------------------------------------- mosaico */

.mosaico { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, 252px); gap: var(--at-esp-3); }

.mosaico-pieza { position: relative; display: block; overflow: hidden; border-radius: var(--at-radio-xl); color: var(--blanco); background: var(--tinta); isolation: isolate; }
.mosaico-pieza.grande { grid-row: span 2; }
.mosaico-pieza picture, .mosaico-pieza img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mosaico-pieza img { object-fit: cover; transition: transform var(--at-dur-celebracion) var(--at-ease-salida); }
.mosaico-pieza:hover img { transform: scale(1.06); }
.mosaico-pieza:hover { color: var(--blanco); }

.mosaico-entrega {
  position: absolute; top: var(--at-esp-3); left: var(--at-esp-3); z-index: 1; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula);
  background: var(--blanco); color: var(--tinta); font: var(--at-texto-meta); font-weight: 700;
}
/* El texto va sobre una franja de tinta plana, no sobre un degradado que
   oscurece la foto. */
.mosaico-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--at-esp-4) var(--at-esp-5); display: grid; gap: var(--at-esp-1); background: var(--sitio-caption); }
.mosaico-tipo { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--sitio-texto-sobre-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosaico-texto b { font: var(--at-texto-titulo-2); }
.grande .mosaico-texto { padding: var(--at-esp-6) var(--at-esp-8); gap: var(--at-esp-2); }
.grande .mosaico-texto b { font: var(--at-texto-titulo-1); }
.mosaico-razon { display: flex; gap: var(--at-esp-2); align-items: flex-start; font: var(--at-texto-cuerpo); color: var(--sitio-texto-sobre-tinta); max-width: 34em; }
.mosaico-razon img { position: static; width: 18px; height: auto; flex: none; margin-top: var(--at-esp-1); }
.mosaico-texto em { font: var(--at-texto-cuerpo-fuerte); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--blanco); }
.grande .mosaico-texto em { font-size: var(--sitio-t-2xl); }


/* -------------------------------------------------------------- navidad */

.banda-navidad {
  position: relative; overflow: hidden; isolation: isolate; margin-top: calc(var(--at-esp-4) * 3.5); border-radius: var(--at-radio-hoja); color: var(--blanco); background: var(--tinta);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto reloj" "texto boton"; gap: var(--at-esp-5) var(--at-esp-9); align-items: center;
  padding: var(--at-esp-9) calc(var(--at-esp-4) * 3.25);
  transition: transform var(--at-dur-media) var(--at-ease-salida), box-shadow var(--at-dur-media) var(--at-ease-estandar);
}
.banda-navidad:hover { color: var(--blanco); transform: translateY(-3px); box-shadow: var(--at-elev-3); }
.navidad-texto { grid-area: texto; display: grid; gap: var(--at-esp-3); position: relative; z-index: 1; }
.banda-navidad .ceja { color: var(--at-color-aviso-fondo); margin: 0; }
.navidad-titulo { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
.navidad-dias { color: var(--at-color-aviso-fondo); font-variant-numeric: tabular-nums; }
.navidad-sub { font: var(--at-texto-web-cuerpo); color: var(--sitio-texto-sobre-tinta); max-width: 32em; }

.navidad-reloj { grid-area: reloj; display: flex; gap: var(--at-esp-2); position: relative; z-index: 1; }
.navidad-reloj span { display: grid; justify-items: center; min-width: 72px; padding: var(--at-esp-3) var(--at-esp-2) var(--at-esp-2); border-radius: var(--at-radio-m); background: var(--sitio-sobre-tinta-1); border: 1px solid var(--sitio-sobre-tinta-2); }
.navidad-reloj b { font: var(--at-texto-cifra); font-variant-numeric: tabular-nums; }
.navidad-reloj small { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--sitio-texto-sobre-tinta-2); margin-top: var(--at-esp-1); }
.navidad-boton { grid-area: boton; justify-self: stretch; text-align: center; position: relative; z-index: 1; border-color: var(--blanco); }
.navidad-boton i { font-style: normal; display: inline-block; transition: transform var(--at-dur-base) var(--at-ease-salida); }
.banda-navidad:hover .navidad-boton i { transform: translateX(4px); }

.nieve { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nieve i { position: absolute; top: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--blanco); opacity: 0.7; animation: atNieve var(--d) linear var(--t) infinite; }
.navidad-esferas { position: absolute; top: 0; right: 43%; z-index: 0; display: flex; gap: var(--at-esp-9); pointer-events: none; }
.navidad-esferas i { position: relative; display: block; width: 2px; height: 72px; background: var(--at-color-aviso-fondo); opacity: 0.8; transform-origin: top; animation: atColgar 4s var(--at-ease-estandar) infinite alternate; }
.navidad-esferas i:nth-child(2) { height: 112px; animation-delay: -1300ms; }
.navidad-esferas i:nth-child(3) { height: 52px; animation-delay: -2600ms; }
/* Las esferas eran degradados radiales; ahora son colores planos del manual. */
.navidad-esferas i::after { content: ""; position: absolute; bottom: -28px; left: -13px; width: 28px; height: 28px; border-radius: 50%; background: var(--fucsia-claro); }
.navidad-esferas i:nth-child(2)::after { background: var(--at-color-aviso-fondo); }
.navidad-esferas i:nth-child(3)::after { background: var(--at-color-ok-fondo); }


/* ------------------------------------------------------------ ocasiones */

.ocasiones-bloque { padding-top: var(--at-esp-10); overflow: hidden; }

.cinta-ocasiones { overflow: hidden; margin-bottom: var(--at-esp-9); }
.cinta-pista { display: flex; align-items: center; gap: var(--at-esp-6); width: max-content; animation: atMarquee 50s linear infinite; }
.cinta-pista span { font-size: clamp(48px, 7vw, 96px); font-weight: 800; letter-spacing: var(--at-tracking-titulo); line-height: 1.1; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px var(--fucsia-claro); }
.cinta-pista span:nth-of-type(3n+2) { color: var(--fucsia); -webkit-text-stroke: 0; }
.cinta-pista i { font-style: normal; font-size: var(--sitio-t-3xl); color: var(--azul); }

.ocasiones-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-3); }

.ocasion-mini { position: relative; display: block; aspect-ratio: 4 / 3.2; border-radius: var(--at-radio-xl); overflow: hidden; color: var(--blanco); background: var(--tinta); isolation: isolate; }
.ocasion-mini:hover { color: var(--blanco); }
.ocasion-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform var(--at-dur-celebracion) var(--at-ease-salida); }
.ocasion-mini:hover img { transform: scale(1.05); }
/* La descripcion queda siempre a la vista (antes aparecia al pasar el mouse,
   que en el celular no existe) sobre una franja de tinta plana. */
.ocasion-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--at-esp-5) var(--at-esp-6); display: grid; gap: var(--at-esp-1); background: var(--sitio-caption); }
.ocasion-texto small { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--sitio-texto-sobre-tinta-2); }
.ocasion-texto b { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
.ocasion-texto span { font: var(--at-texto-cuerpo); color: var(--sitio-texto-sobre-tinta); }
.ocasion-ir { position: absolute; top: var(--at-esp-4); right: var(--at-esp-4); width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: 50%; background: var(--blanco); color: var(--fucsia); display: grid; place-items: center; font-style: normal; font-weight: 800; transform: scale(0.6) rotate(-45deg); opacity: 0; transition: transform var(--at-dur-media) var(--at-ease-salida), opacity var(--at-dur-media) var(--at-ease-estandar); }
.ocasion-mini:hover .ocasion-ir, .ocasion-mini:focus-visible .ocasion-ir { transform: none; opacity: 1; }


/* ------------------------------------------------------------ historias */

.historias { margin-top: var(--at-esp-8); }

.historia { margin: 0; padding: var(--at-esp-8); border-radius: var(--r-tarjeta-grande); background: var(--crema); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: var(--at-esp-5); transition: transform var(--at-dur-base) var(--at-ease-salida); }

.historia blockquote { margin: 0; font-family: var(--mano); font-size: var(--sitio-t-3xl); line-height: 1.2; color: var(--tinta); }

.historia figcaption { display: flex; align-items: center; gap: var(--at-esp-3); margin-top: auto; }

.historia figcaption b { display: block; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }

.historia figcaption span span { display: block; font: var(--at-texto-meta); color: var(--texto-suave); }

.historia:nth-child(2) { background: var(--tinta); border-color: var(--tinta); }

.historia:nth-child(2) blockquote, .historia:nth-child(2) figcaption b { color: var(--blanco); }

.historia:nth-child(2) figcaption span span { color: var(--sitio-texto-sobre-tinta-2); }

.historia:nth-child(3) { background: var(--fucsia); border-color: var(--fucsia); }

.historia:nth-child(3) blockquote, .historia:nth-child(3) figcaption b { color: var(--blanco); }

.historia:nth-child(3) figcaption span span { color: var(--sitio-texto-sobre-tinta); }

.historia:hover { transform: translateY(-4px); }

.inicial { width: 48px; height: 48px; border-radius: var(--at-radio-capsula); background: var(--rosa-papel); color: var(--fucsia); display: grid; place-items: center; font-weight: 800; font-size: var(--sitio-t-l); flex: none; }


/* ------------------------------------------------------------- tu plata */

.plata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--at-esp-9); align-items: center; padding-top: var(--at-esp-10); padding-bottom: var(--at-esp-5); }

.confianza { list-style: none; padding: 0; margin: var(--at-esp-6) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }

.confianza li { display: flex; gap: var(--at-esp-4); align-items: flex-start; }

.confianza .numero { width: 36px; height: 36px; border-radius: var(--at-radio-s); background: var(--azul-fondo); color: var(--azul-texto); display: grid; place-items: center; font: var(--at-texto-cuerpo-fuerte); font-weight: 800; flex: none; }

.confianza b { display: block; font: var(--at-texto-cuerpo-fuerte); font-size: var(--sitio-t-m); font-weight: 700; }

.confianza p { font: var(--at-texto-cuerpo); margin: var(--at-esp-1) 0 0; }


.bolsillo { background: var(--tinta); border-radius: var(--r-bloque); padding: var(--at-esp-8); color: var(--blanco); }

.bolsillo .ceja { margin: 0; }

.bolsillo-saldo { display: flex; align-items: baseline; gap: var(--at-esp-3); margin-top: var(--at-esp-3); flex-wrap: wrap; }

.bolsillo-saldo b { font: var(--at-texto-cifra); font-variant-numeric: tabular-nums; }

.bolsillo-saldo span { font: var(--at-texto-meta); color: var(--sitio-texto-sobre-tinta-2); }

.barra { height: 8px; border-radius: var(--at-radio-capsula); background: var(--sitio-sobre-tinta-2); margin-top: var(--at-esp-3); overflow: hidden; }

.barra i { display: block; height: 100%; width: 77%; background: var(--azul); border-radius: var(--at-radio-capsula); transform-origin: left; }

/* La barra se llena con `atLlenar` (escala desde la izquierda), no con `width`. */
.visto .barra i { animation: atLlenar 800ms var(--at-ease-salida) both; }

.movimientos { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-2); }

.movimientos li { display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--sitio-sobre-tinta-1); font: var(--at-texto-cuerpo); }

.movimientos li span { flex: 1; }

.movimientos li > i { width: 8px; height: 8px; border-radius: var(--at-radio-capsula); flex: none; background: var(--fucsia-claro); }

.movimientos li > i.entra { background: var(--at-color-ok-fondo); }

.movimientos li > i.aparte { background: var(--azul); }

.movimientos b { font: var(--at-texto-mono); font-variant-numeric: tabular-nums; color: var(--rosa-papel); }

.movimientos b.entra { color: var(--at-color-ok-fondo); }

.bolsillo-botones { display: flex; gap: var(--at-esp-2); margin-top: var(--at-esp-5); }

.bolsillo-botones span { flex: 1; padding: var(--at-esp-3); border-radius: var(--at-radio-capsula); border: 1px solid var(--sitio-sobre-tinta-3); text-align: center; font: var(--at-texto-cuerpo-fuerte); font-weight: 700; }

.bolsillo-botones .lleno { background: var(--fucsia); border-color: var(--fucsia); }


/* ------------------------------------------------------------------ faq */

.faq { max-width: 880px; margin: 0 auto; padding: var(--at-esp-10) var(--margen) var(--at-esp-9); }

.faq h2 { margin-bottom: var(--at-esp-8); }

.pregunta { border-radius: var(--at-radio-l); background: var(--blanco); border: 1px solid var(--borde); margin-bottom: var(--at-esp-2); overflow: hidden; }

.pregunta summary {
  list-style: none; cursor: pointer; min-height: var(--at-tactil-min); padding: var(--at-esp-5); display: flex; align-items: center; gap: var(--at-esp-4);
  font-size: var(--sitio-t-m); font-weight: 700; color: var(--tinta);
}

.pregunta summary::-webkit-details-marker { display: none; }

.pregunta .mas {
  margin-left: auto; width: 32px; height: 32px; border-radius: var(--at-radio-capsula); background: var(--rosa-papel); color: var(--fucsia);
  display: grid; place-items: center; font-size: var(--sitio-t-l); font-weight: 700; flex: none; transition: transform var(--at-dur-base) var(--at-ease-salida), background-color var(--at-dur-base) var(--at-ease-estandar);
}

.pregunta[open] .mas { transform: rotate(45deg); background: var(--fucsia); color: var(--blanco); }

.pregunta p { padding: 0 var(--at-esp-5) var(--at-esp-5); margin: 0; font-size: var(--sitio-t-m); line-height: 1.6; animation: atSubir var(--at-dur-base) var(--at-ease-salida) both; }


/* ------------------------------------------------------------ cta final */

/* Fucsia plano (el de `.cta-final` en la base): sin los dos degradados radiales
   ni el destello que giraba detras. */
.pagina-inicio .cta-final {
  isolation: isolate; padding: var(--at-esp-10) calc(var(--at-esp-4) * 4); border-radius: var(--at-radio-hoja);
}
.pagina-inicio .cta-final h2 { max-width: 13em; }
.pagina-inicio .cta-final p { font: var(--at-texto-web-cuerpo); }
.pagina-inicio .cta-tino { animation: atTino 3200ms var(--at-ease-estandar) infinite; }


/* La barra de avance arriba: animacion ligada al scroll, solo donde existe. */
.inicio-avance { display: none; }
@supports (animation-timeline: scroll()) {
  .inicio-avance {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: var(--at-z-toast); transform-origin: 0 50%;
    background: var(--fucsia); animation: atAvance linear both; animation-timeline: scroll(root);
  }
}


/* ------------------------------------------------------------ animacion */

@keyframes atNieve { from { transform: translateY(0); } to { transform: translateY(420px); opacity: 0; } }
@keyframes atColgar { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes atAvance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* `translate` y `scale` sueltos: se suman al `transform` del parallax en vez de pisarlo. */
@keyframes atCarta { from { opacity: 0; translate: 0 70px; scale: 0.9; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* El movimiento reducido general lo pone `at/motion.css`; aqui, lo decorativo
   que no tiene sentido ni quieto. */
@media (prefers-reduced-motion: reduce) {
  .nieve { display: none; }
  .inicio-avance { display: none; }
}

/* ---------------------------------------------------------------- movil */

@media (max-width: 1023px) {
  .inicio-hero, .pruebame, .promesa, .plata { grid-template-columns: 1fr; gap: var(--at-esp-9); }
  .inicio-hero { padding-top: var(--at-esp-9); }
  .abanico { height: 480px; max-width: 620px; width: 100%; margin: 0 auto; }
  .hero-video { height: 380px; left: 0; }
  .hero-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-cifras div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-cifras div:nth-child(n+3) { border-top: 1px solid var(--sitio-sobre-tinta-1); }
  .promesa-foto { height: 360px; }
  .pagina-inicio .seccion-corta > h2, .pagina-inicio .seccion-corta .titulo-fila h2 { font: var(--at-texto-titulo-1); }
  .vitrina-marco { grid-template-columns: 1fr; padding: var(--at-esp-2); }
  .vitrina-personas { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--at-esp-1); }
  .vitrina-personas::-webkit-scrollbar { display: none; }
  .vitrina-tab { flex: none; scroll-snap-align: start; padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-2) var(--at-esp-2); }
  .vitrina-tab[aria-selected="true"] { transform: none; }
  .vitrina-tab i { display: none; }
  .vitrina-regalos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrina-regalo img { aspect-ratio: 4 / 3.4; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: 380px repeat(2, 220px); }
  .mosaico-pieza.grande { grid-column: span 2; grid-row: auto; }
  .banda-navidad { grid-template-columns: 1fr; grid-template-areas: "texto" "reloj" "boton"; padding: var(--at-esp-9) var(--at-esp-8); }
  .navidad-titulo { font: var(--at-texto-titulo-1); }
  .ocasiones-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .hero-noche { margin: var(--at-esp-2) var(--at-esp-2) 0; border-radius: var(--at-radio-xl); }
  .botones .boton { flex: 1; }
  .hero-noche .botones .boton { flex: 1 1 100%; }
  .atinador { border-radius: var(--at-radio-l); align-items: center; }
  .atinador-frase { font-size: var(--sitio-t-s); white-space: normal; line-height: 1.35; }
  .atinador-mas { margin: 0 var(--at-esp-1); }
  .atinador-ir { padding: 0 var(--at-esp-3); }
  .abanico { height: 400px; }
  .hero-video { top: 24px; height: 300px; border-radius: var(--at-radio-l); }
  .abanico-carta.mini { width: 48%; right: 0; bottom: 96px; }
  .abanico-carta.c0 { left: 17%; width: 66%; top: 28px; }
  .abanico-carta.c1, .abanico-carta.c2 { width: 54%; }
  .abanico-cuerpo { padding: var(--at-esp-2) var(--at-esp-3) var(--at-esp-3); }
  .abanico-cuerpo b { font-size: var(--sitio-t-s); }
  .abanico .globo-aviso { left: 0; right: 0; bottom: 0; }
  .abanico .globo-chip { right: 0; top: 0; }
  .hero-cifras dd { font-size: var(--sitio-t-2xl); }
  .hero-cifras div { padding-right: var(--at-esp-2); }
  .hero-cifras div + div { padding-left: var(--at-esp-3); }
  .marquee-pista span { font-size: var(--sitio-t-l); }
  .pasos-cortos .ceja { font-size: 48px; }
  .pasos-cortos > div + div::before { display: none; }
  .historia blockquote { font-size: var(--sitio-t-2xl); }
  .quiz { padding: var(--at-esp-6); min-height: 0; border-radius: var(--at-radio-xl); }
  .quiz-titulo { font-size: var(--sitio-t-2xl); }
  .quiz-personas { grid-template-columns: 1fr 1fr; }
  .banda-aliados .contenido { flex-direction: column; align-items: flex-start; gap: var(--at-esp-3); }
  .marquee { width: 100%; }
  .cifras b { font-size: var(--sitio-t-xl); }
  .vitrina-panel { padding: var(--at-esp-4); }
  .vitrina-frase { font-size: var(--sitio-t-l); }
  .vitrina-regalos { gap: var(--at-esp-2); }
  .vitrina-texto { padding: var(--at-esp-2) var(--at-esp-2) var(--at-esp-1); }
  .vitrina-texto b { font-size: var(--sitio-t-s); }
  .vitrina-regalo em { padding: 0 var(--at-esp-2) var(--at-esp-2); font-size: var(--sitio-t-s); }
  .mosaico { grid-template-rows: 340px repeat(2, 192px); gap: var(--at-esp-2); }
  .mosaico-texto { padding: var(--at-esp-3); }
  .mosaico-texto b { font-size: var(--sitio-t-s); }
  .mosaico-tipo { display: none; }
  .grande .mosaico-texto { padding: var(--at-esp-5); }
  .banda-navidad { padding: var(--at-esp-8) var(--at-esp-5); border-radius: var(--at-radio-xl); }
  .navidad-reloj span { min-width: 0; flex: 1; }
  .navidad-reloj b { font-size: var(--sitio-t-2xl); }
  .navidad-esferas { right: 8%; }
  .ocasiones-fila { grid-template-columns: 1fr; }
  .ocasion-mini { aspect-ratio: 16 / 10; }
  .pagina-inicio .cta-final { padding: var(--at-esp-8) var(--at-esp-6); border-radius: var(--at-radio-xl); }
  .bolsillo { padding: var(--at-esp-6); }
}

/*
 * La jugueteria de diciembre (`/jugueteria`).
 *
 * Reusa la gramatica de las ocasiones (`ocasiones.css`: consejos con Tino,
 * boton tinta, otras ocasiones) y agrega lo suyo. Los colores de las edades son
 * los pares fondo/texto semanticos del sistema —marca, dato, aviso, ok—: planos,
 * sin degradados, y con el contraste ya medido para texto.
 *
 * UI/UX v4: todo color sale de `--at-color-*`; la profundidad es color plano y
 * `--at-elev-*`. Se anima solo transform y opacity.
 */

[data-edad="bebe"]     { --jug-fondo: var(--at-color-marca-papel);  --jug-texto: var(--at-color-marca); }
[data-edad="pequenos"] { --jug-fondo: var(--at-color-dato-fondo);   --jug-texto: var(--at-color-dato-fuerte); }
[data-edad="medianos"] { --jug-fondo: var(--at-color-aviso-fondo);  --jug-texto: var(--at-color-aviso); }
[data-edad="grandes"]  { --jug-fondo: var(--at-color-ok-fondo);     --jug-texto: var(--at-color-ok); }

/* ------------------------------------------------------------------ hero */

/* Una franja plana del color arriba de todo, que las migas pisan y el hero
   continua. Va detras del contenido (z-index -1 dentro de un contexto propio),
   sin degradado. */
#atineo-previo:has(> .jug-hero) { position: relative; isolation: isolate; }
#atineo-previo:has(> .jug-hero)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: var(--at-color-tinta); z-index: -1;
}
#atineo-previo:has(> .jug-hero) .migas,
#atineo-previo:has(> .jug-hero) .migas a,
#atineo-previo:has(> .jug-hero) .migas li + li::before { color: var(--at-color-superficie); }
#atineo-previo:has(> .jug-hero) .migas [aria-current="page"] { color: var(--at-color-superficie); }
#atineo-previo:has(> .jug-hero) .migas a:hover { color: var(--at-color-marca-papel); }

.jug-hero { background: var(--at-color-tinta); color: var(--at-color-superficie); padding-bottom: 72px; }
.jug-hero-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center;
  padding-top: var(--at-esp-9); padding-bottom: var(--at-esp-9);
}
.jug-ceja { color: var(--at-color-marca-papel); margin: 0; }
.jug-hero h1 {
  color: var(--at-color-superficie); font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo);
  margin: var(--at-esp-4) 0 0; text-wrap: balance;
}
/* El «sí» subrayado a mano: un trazo plano bajo la palabra. */
.jug-subrayado { position: relative; display: inline-block; color: var(--at-color-marca-papel); z-index: 0; }
.jug-subrayado::after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: 0.04em; height: 0.16em;
  background: var(--at-color-marca-claro); border-radius: var(--at-radio-capsula); transform: rotate(-2deg); z-index: -1;
  animation: jugTrazo var(--at-dur-sello) var(--at-ease-salida) both 0.6s; transform-origin: left center;
}
@keyframes jugTrazo { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }
.jug-intro {
  color: var(--at-color-superficie); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-5) 0 0; max-width: 31em;
}
.jug-hero .botones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); margin-top: var(--at-esp-8); }

.jug-sellos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.jug-sellos li {
  padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--r-tarjeta);
  border: 1px solid color-mix(in srgb, var(--at-color-superficie) 14%, transparent);
  background: color-mix(in srgb, var(--at-color-superficie) 5%, transparent); display: flex; flex-direction: column;
}
.jug-sellos b { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; }
.jug-sellos span { color: var(--at-color-marca-papel); font: var(--at-texto-meta); }

/* ------------------------------------------------------------------ cinta */

.jug-cinta { background: var(--at-color-marca); color: var(--at-color-superficie); overflow: hidden; padding: var(--at-esp-4) 0; }
.jug-cinta-pista { display: flex; width: max-content; gap: 28px; align-items: center; animation: atMarquee 42s linear infinite; }
.jug-cinta span { font: var(--at-texto-web-titulo-2); font-weight: 900; white-space: nowrap; }
.jug-cinta i { font-style: normal; color: var(--at-color-marca-papel); font-size: 16px; }

/* --------------------------------------------------------------- buscador */

.jug-buscador { padding-top: 80px; }
.jug-cabeza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--at-esp-8); align-items: end; margin-bottom: var(--at-esp-8); }
.jug-cabeza h2 { margin: 0; font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); text-wrap: balance; }
.jug-cabeza > p { font: var(--at-texto-web-cuerpo); margin: 0; max-width: 30em; }

.jug-pasos-buscador { display: grid; gap: 40px; }
.jug-paso { border: 0; padding: 0; margin: 0; min-width: 0; }
.jug-paso legend { display: flex; align-items: center; gap: var(--at-esp-3); font: var(--at-texto-web-titulo-2); font-size: 20px; color: var(--at-color-tinta); margin-bottom: var(--at-esp-4); padding: 0; }
.jug-paso-n {
  width: 36px; height: 36px; border-radius: var(--at-radio-capsula); background: var(--at-color-dato-fuerte); color: var(--at-color-superficie);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.jug-paso legend .jug-paso-n { background: var(--at-color-marca); transition: background var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-base) var(--at-ease-salida); }
.jug-paso:has(input:checked) legend .jug-paso-n { background: var(--at-color-ok); transform: scale(1.08); }

/* El radio queda para el teclado y el lector; lo que se ve es la tarjeta. */
.jug-pasos-buscador input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jug-pasos-buscador label:has(input:focus-visible) { box-shadow: var(--at-foco); }

/* Paso 1: cuatro fotos con la edad encima */
.jug-opciones-edad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); }
.jug-foto-opcion {
  position: relative; cursor: pointer; border-radius: var(--r-tarjeta-grande); overflow: hidden;
  aspect-ratio: 4 / 3.3; background: var(--jug-fondo); border: 3px solid transparent;
  transition: transform var(--at-dur-media) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-salida), box-shadow var(--at-dur-media) var(--at-ease-salida);
}
.jug-foto-opcion > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--at-dur-sello) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-salida); }
.jug-foto-opcion:hover { box-shadow: var(--at-elev-1); }
.jug-foto-opcion:hover > img { transform: scale(1.05); }
.jug-foto-texto {
  position: absolute; left: var(--at-esp-3); right: var(--at-esp-3); bottom: var(--at-esp-3); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m);
  background: var(--jug-fondo); color: var(--jug-texto); display: flex; flex-direction: column;
}
.jug-foto-texto b { font: var(--at-texto-titulo-2); font-size: 20px; font-weight: 900; }
.jug-foto-texto span { font: var(--at-texto-meta); font-weight: 700; }
.jug-foto-opcion:has(input:checked) { border-color: var(--jug-texto); box-shadow: var(--at-elev-3); transform: translateY(-4px); }
.jug-opciones-edad:has(input:checked) .jug-foto-opcion:not(:has(input:checked)) > img { opacity: 0.6; }
.jug-foto-opcion:has(input:checked)::after {
  content: "✓"; position: absolute; top: var(--at-esp-3); right: var(--at-esp-3); width: 32px; height: 32px; border-radius: var(--at-radio-capsula);
  background: var(--jug-texto); color: var(--at-color-superficie); font-weight: 900; display: flex; align-items: center; justify-content: center;
  animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both;
}

/* Paso 2: ocho estimulos con foto */
.jug-estimulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); }
.jug-estimulo {
  position: relative; cursor: pointer; display: flex; flex-direction: column; border-radius: var(--r-tarjeta);
  overflow: hidden; background: var(--at-color-superficie); border: 2px solid var(--at-color-borde);
  transition: border-color var(--at-dur-base) var(--at-ease-salida), transform var(--at-dur-media) var(--at-ease-salida), box-shadow var(--at-dur-media) var(--at-ease-salida);
}
.jug-estimulo > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--at-color-neutro-fondo); transition: transform var(--at-dur-sello) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-salida); }
.jug-estimulo:hover { border-color: var(--at-color-marca-claro); box-shadow: var(--at-elev-1); }
.jug-estimulo:hover > img { transform: scale(1.05); }
.jug-estimulo-texto { padding: var(--at-esp-3) var(--at-esp-4) var(--at-esp-4); display: flex; flex-direction: column; gap: 4px; position: relative; background: var(--at-color-superficie); }
.jug-estimulo-texto b { font: var(--at-texto-cuerpo-fuerte); font-weight: 800; color: var(--at-color-tinta); }
.jug-estimulo-texto span { font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.jug-estimulo:has(input:checked) { border-color: var(--at-color-marca); box-shadow: var(--at-elev-3); transform: translateY(-4px); }
.jug-estimulo:has(input:checked) .jug-estimulo-texto { background: var(--at-color-marca); }
.jug-estimulo:has(input:checked) .jug-estimulo-texto b,
.jug-estimulo:has(input:checked) .jug-estimulo-texto span { color: var(--at-color-superficie); }
.jug-estimulos:has(input:checked) .jug-estimulo:not(:has(input:checked)) > img { opacity: 0.6; }

/* Paso 3: presupuesto */
.jug-tramos { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); }
.jug-tramo span {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 24px; border-radius: var(--at-radio-capsula);
  border: 2px solid var(--at-color-borde-campo); background: var(--at-color-superficie);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 800; color: var(--at-color-tinta); cursor: pointer;
  transition: border-color var(--at-dur-base) var(--at-ease-salida), background var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-salida);
}
.jug-tramo:hover span { border-color: var(--at-color-dato-fuerte); color: var(--at-color-dato-fuerte); }
.jug-tramo:has(input:checked) span { background: var(--at-color-dato-fuerte); border-color: var(--at-color-dato-fuerte); color: var(--at-color-superficie); }

/* La respuesta */
.jug-respuesta {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--at-esp-6); align-items: center;
  padding: var(--at-esp-8); border-radius: var(--r-bloque); background: var(--at-color-tinta); color: var(--at-color-superficie);
}
.jug-respuesta.recien { animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both; }
.jug-respuesta > img { width: 64px; }
.jug-respuesta .ceja { margin-bottom: var(--at-esp-2); }
.jug-respuesta-idea { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); margin: 0; text-wrap: pretty; }
.jug-respuesta-evita { color: var(--at-color-marca-papel); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-3) 0 0; }
.jug-respuesta-botones { display: flex; flex-direction: column; gap: var(--at-esp-3); }

/* ------------------------------------------------------------- resultados */

.jug-resultados { padding-top: 64px; scroll-margin-top: 80px; }
.jug-resumen {
  position: sticky; top: 84px; z-index: var(--at-z-pestanas); display: flex; align-items: center; gap: var(--at-esp-3); flex-wrap: wrap;
  margin: 0 0 var(--at-esp-6); padding: var(--at-esp-2) var(--at-esp-3) var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-capsula);
  background: color-mix(in srgb, var(--at-color-tinta) 94%, transparent);
  color: var(--at-color-superficie); box-shadow: var(--at-elev-3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both;
}
.jug-resumen-chips { display: flex; gap: var(--at-esp-2); flex-wrap: wrap; }
.jug-resumen-chip {
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4);
  border-radius: var(--at-radio-capsula); cursor: pointer;
  border: 0; background: var(--at-color-marca); color: var(--at-color-superficie);
}
.jug-resumen-chip::after { content: " ×"; opacity: 0.8; }
.jug-resumen-chip:hover { background: var(--at-color-marca-hover); }
.jug-resumen-cuenta { font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--at-color-marca-papel); margin-left: auto; }
.jug-resumen-limpiar {
  font: var(--at-texto-cuerpo-fuerte); font-weight: 700; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4);
  border-radius: var(--at-radio-capsula); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--at-color-superficie) 40%, transparent); background: none; color: var(--at-color-superficie);
}
.jug-resumen-limpiar:hover { border-color: var(--at-color-superficie); }

.jug-cuenta { font: var(--at-texto-cuerpo-fuerte); color: var(--at-color-texto-2); }
.jug-item { display: flex; position: relative; animation: jugEntra var(--at-dur-lenta) var(--at-ease-salida) both; }
.jug-item > .tarjeta { flex: 1; }
.jug-item .tarjeta:hover { transform: translateY(-4px); }
@keyframes jugEntra { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.jug-item-edad {
  position: absolute; left: var(--at-esp-3); top: var(--at-esp-3); z-index: 2; pointer-events: none;
  padding: 4px 12px; border-radius: var(--at-radio-capsula); background: var(--at-color-tinta); color: var(--at-color-superficie);
  font: var(--at-texto-meta); font-weight: 800;
}
.jug-mas-fila { display: flex; justify-content: center; margin-top: 28px; }
.jug-mas { margin: var(--at-esp-6) 0 0; font: var(--at-texto-cuerpo-fuerte); font-weight: 400; text-align: center; }
.jug-mas .enlace-azul { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); }

.jug-sin-resultados, .jug-vacio {
  display: flex; align-items: center; gap: 28px; padding: 36px 40px; border-radius: var(--r-bloque);
  background: var(--at-color-marca-papel);
}
.jug-sin-resultados > img, .jug-vacio > img { width: 72px; flex: none; }
.jug-sin-resultados > div, .jug-vacio > div { flex: 1; }
.jug-sin-resultados h3 { font: var(--at-texto-web-titulo-2); margin: 0; }
.jug-vacio .ceja { margin-bottom: var(--at-esp-2); }
.jug-vacio h2 { font: var(--at-texto-web-titulo-1); margin: 0; }
.jug-sin-resultados p, .jug-vacio p:not(.ceja) { margin: var(--at-esp-2) 0 0; color: var(--at-color-tinta); font: var(--at-texto-web-cuerpo); max-width: 34em; }
.jug-sin-resultados .boton, .jug-vacio .boton { flex: none; }

/* ------------------------------------------------------------- secciones */

.jug-seccion { padding-top: 88px; }
.jug-banda { margin-top: 88px; }

/* ----------------------------------------------------------- guia por edad */

.jug-edades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); }
.jug-edad {
  background: var(--at-color-fondo); border: 1px solid var(--at-color-borde); border-radius: var(--r-tarjeta-grande);
  display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d;
  transition: transform var(--at-dur-media) var(--at-ease-salida), box-shadow var(--at-dur-media) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-salida);
}
.jug-edad:hover { box-shadow: var(--at-elev-1); border-color: var(--jug-texto); }
.jug-edad-foto { position: relative; }
.jug-edad-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--jug-fondo); }
.jug-edad-anos {
  position: absolute; left: var(--at-esp-4); bottom: -16px; padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-m);
  background: var(--jug-fondo); color: var(--jug-texto); font: var(--at-texto-titulo-2); font-size: 20px; font-weight: 900;
  box-shadow: var(--at-elev-1);
}
.jug-edad-cuerpo { padding: 32px var(--at-esp-5) var(--at-esp-5); display: flex; flex-direction: column; flex: 1; }
.jug-edad h3 { font: var(--at-texto-titulo-2); font-size: 20px; margin: 0 0 var(--at-esp-2); }
.jug-edad-cuerpo > p { font: var(--at-texto-cuerpo); font-size: 16px; margin: 0 0 var(--at-esp-4); }
.jug-edad .chips { list-style: none; padding: 0; margin: 0 0 var(--at-esp-4); }
.jug-edad .chip { background: var(--jug-fondo); color: var(--jug-texto); }
.jug-evita { margin: auto 0 0 !important; padding-top: var(--at-esp-3); border-top: 1px dashed var(--at-color-borde-campo); font: var(--at-texto-meta) !important; color: var(--at-color-texto-2); }
.jug-evita b { color: var(--at-color-tinta); }
.jug-edad-ir { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); margin-top: var(--at-esp-2); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; color: var(--jug-texto); }

/* ------------------------------------------------------------------ momento */

.jug-momento { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.jug-momento-foto img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: var(--r-bloque); background: var(--at-color-neutro-fondo); }
.jug-momento h2 { margin: 0; font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); text-wrap: balance; }
.jug-momento > div > p:not(.ceja) { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }

/* -------------------------------------------------- un regalo que habla */

.jug-voz {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center;
  padding: 52px; border-radius: var(--r-bloque); background: var(--at-color-marca); color: var(--at-color-superficie); overflow: hidden;
}
.jug-voz h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-3) 0 0; }
.jug-voz p:not(.ceja) { color: var(--at-color-superficie); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; max-width: 32em; }
.jug-voz-firma { display: flex; align-items: center; gap: var(--at-esp-3); margin-top: var(--at-esp-6) !important; font: var(--at-texto-cuerpo-fuerte) !important; font-weight: 700 !important; }
/* El logo de Tocco de Amore (marca de tercero) va en su chapita blanca. */
.jug-voz-firma img { width: 44px; background: var(--at-color-superficie); border-radius: var(--at-radio-s); padding: 4px; }

.jug-voz-tarjeta { position: relative; height: 300px; }
.jug-voz-papel {
  position: absolute; left: 0; top: 24px; width: 64%; padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-fondo);
  box-shadow: var(--at-elev-3); transform: rotate(-5deg);
}
.jug-voz-mano { font-family: var(--mano); font-size: 28px; line-height: 1.1; color: var(--at-color-tinta) !important; margin: 0 0 var(--at-esp-4) !important; }
.jug-qr { width: 44%; display: block; background: var(--at-color-superficie); padding: var(--at-esp-2); border-radius: var(--at-radio-s); }
.jug-voz-video {
  position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 9 / 13; border-radius: var(--at-radio-xl);
  background: var(--at-color-tinta); border: 6px solid var(--at-color-superficie); box-shadow: var(--at-elev-3); transform: rotate(4deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-esp-5);
}
.jug-voz-play { width: 56px; height: 56px; border-radius: var(--at-radio-capsula); background: var(--at-color-marca-claro); position: relative; }
.jug-voz-play::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-capsula); background: var(--at-color-marca-claro);
  animation: atLatir 1800ms var(--at-ease-salida) infinite;
}
.jug-voz-play::after {
  content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--at-color-superficie);
}
.jug-voz-onda { display: flex; gap: 4px; align-items: center; height: 28px; }
.jug-voz-onda i { width: 4px; height: 100%; border-radius: var(--at-radio-capsula); background: var(--at-color-marca-papel); transform: scaleY(var(--alto, 1)); animation: jugOnda 1100ms var(--at-ease-estandar) infinite; }
.jug-voz-onda i:nth-child(1) { --alto: 0.3; animation-delay: 0s; }
.jug-voz-onda i:nth-child(2) { --alto: 0.7; animation-delay: 0.15s; }
.jug-voz-onda i:nth-child(3) { --alto: 0.45; animation-delay: 0.3s; }
.jug-voz-onda i:nth-child(4) { --alto: 1; animation-delay: 0.45s; }
.jug-voz-onda i:nth-child(5) { --alto: 0.55; animation-delay: 0.6s; }
.jug-voz-onda i:nth-child(6) { --alto: 0.8; animation-delay: 0.75s; }
.jug-voz-onda i:nth-child(7) { --alto: 0.35; animation-delay: 0.9s; }
/* Cada barra mide siempre lo mismo y respira con scaleY: nada de alto animado. */
@keyframes jugOnda { 0%, 100% { transform: scaleY(calc(var(--alto) * 0.5)); } 50% { transform: scaleY(var(--alto)); } }

/* ---------------------------------------------------------------- seguridad */

.jug-seguridad {
  background: var(--at-color-tinta); color: var(--at-color-marca-papel); border-radius: var(--r-bloque); padding: var(--at-esp-9);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 40px; align-items: start;
}
.jug-seguridad h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); margin: 0; text-wrap: balance; }
.jug-seguridad ol { list-style: none; counter-reset: jug; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-5) 28px; }
.jug-seguridad li { counter-increment: jug; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--at-esp-3); }
.jug-seguridad li::before {
  content: counter(jug); grid-row: 1 / 3; width: 32px; height: 32px; border-radius: var(--at-radio-capsula);
  background: var(--at-color-marca); color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.jug-seguridad b { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; }
.jug-seguridad span { font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-marca-papel); }

/* -------------------------------------------------------------------- pasos */

.jug-pasos { list-style: none; padding: 0; margin: var(--at-esp-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); }
.jug-pasos li {
  display: flex; flex-direction: column; gap: var(--at-esp-2); padding: 28px; border-radius: var(--r-tarjeta-grande);
  background: var(--at-color-dato-fondo); border: 1px solid var(--at-color-dato-fondo);
}
.jug-pasos .jug-paso-n { margin-bottom: var(--at-esp-2); }
.jug-pasos b { font: var(--at-texto-titulo-2); color: var(--at-color-tinta); }
.jug-pasos li > span:last-child { font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-texto-2); }

/* ---------------------------------------------------------------- preguntas */

.jug-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.jug-faq h2 { margin: 0 0 var(--at-esp-3); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
.jug-faq > div:first-child a { color: var(--at-color-marca); font-weight: 700; }
.jug-preguntas { display: grid; gap: var(--at-esp-3); }
.jug-preguntas details { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--r-tarjeta); transition: border-color var(--at-dur-base) var(--at-ease-salida); }
.jug-preguntas details[open] { border-color: var(--at-color-marca); }
.jug-preguntas summary {
  list-style: none; cursor: pointer; min-height: var(--at-tactil-min); padding: 20px 56px 20px var(--at-esp-5); position: relative;
  font: var(--at-texto-titulo-2); color: var(--at-color-tinta);
}
.jug-preguntas summary::-webkit-details-marker { display: none; }
.jug-preguntas summary::after {
  content: "+"; position: absolute; right: var(--at-esp-5); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: var(--at-radio-capsula); background: var(--at-color-marca-papel); color: var(--at-color-marca);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  transition: transform var(--at-dur-media) var(--at-ease-salida);
}
.jug-preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.jug-preguntas details p { padding: 0 var(--at-esp-5) var(--at-esp-5); margin: 0; font: var(--at-texto-web-cuerpo); }

.jug-cta { margin-top: 88px; }

/* ================================================================ con vida */

/* -- hero: nieve plana */
.jug-hero { position: relative; overflow: hidden; }
.jug-hero > .contenido { position: relative; z-index: 1; }
.jug-nieve { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.jug-nieve i {
  position: absolute; top: -12px; left: var(--x); width: var(--t); height: var(--t); border-radius: var(--at-radio-capsula);
  background: color-mix(in srgb, var(--at-color-superficie) 50%, transparent); animation: jugCae var(--d) linear infinite; animation-delay: calc(var(--r) * -1);
}
.jug-nieve i:nth-child(4n) { background: var(--at-color-marca-claro); }
.jug-nieve i:nth-child(7n) { background: var(--at-color-dato); }
@keyframes jugCae {
  from { transform: translate3d(0, -20px, 0) rotate(0); }
  to { transform: translate3d(40px, 900px, 0) rotate(540deg); }
}

/* -- la palabra que rota */
.jug-rota { display: inline-block; color: var(--at-color-marca-claro); position: relative; }
.jug-rota-palabra { display: inline-block; transition: transform var(--at-dur-base) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-salida); }
.jug-rota-palabra.sale { transform: translateY(-0.4em) rotate(-4deg); opacity: 0; }
.jug-rota-palabra.entra { animation: atPestana var(--at-dur-lenta) var(--at-ease-salida) both; }
.jug-punto { color: var(--at-color-superficie); }

.jug-boton-vivo span { display: inline-block; transition: transform var(--at-dur-media) var(--at-ease-salida); }
.jug-boton-vivo:hover span { transform: translateX(4px); }
.jug-boton-vivo { position: relative; }
.jug-boton-vivo::after {
  content: ""; position: absolute; inset: -4px; border-radius: var(--at-radio-capsula); border: 2px solid var(--at-color-superficie); opacity: 0;
  animation: jugHalo 2400ms var(--at-ease-salida) infinite 1.5s; pointer-events: none;
}
@keyframes jugHalo { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

/* -- reloj en vivo */
.jug-reloj { margin-top: var(--at-esp-8); display: inline-flex; flex-direction: column; gap: var(--at-esp-3); }
.jug-reloj-titulo { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-marca-papel); }
.jug-reloj-cifras { display: flex; gap: var(--at-esp-2); }
.jug-reloj-cifras > span {
  min-width: 72px; padding: var(--at-esp-3) var(--at-esp-3) var(--at-esp-2); border-radius: var(--at-radio-m); text-align: center;
  background: color-mix(in srgb, var(--at-color-superficie) 8%, transparent); border: 1px solid color-mix(in srgb, var(--at-color-superficie) 16%, transparent);
  display: flex; flex-direction: column;
}
.jug-reloj-cifras > span:first-child { background: var(--at-color-marca); border-color: var(--at-color-marca); }
.jug-reloj-cifras b { font: var(--at-texto-titulo-1); font-weight: 900; color: var(--at-color-superficie); font-variant-numeric: tabular-nums; display: inline-block; }
.jug-reloj-cifras b.late { animation: jugLate var(--at-dur-lenta) var(--at-ease-salida); }
.jug-reloj-cifras small { font: var(--at-texto-meta); font-weight: 700; color: var(--at-color-marca-papel); margin-top: 4px; }
@keyframes jugLate { 0% { transform: translateY(-6px); opacity: 0.3; } 100% { transform: none; opacity: 1; } }

/* -- collage */
.jug-collage { position: relative; height: 560px; }
.jug-collage-capa { position: absolute; inset: 0; transition: transform var(--at-dur-media) var(--at-ease-salida); will-change: transform; }
.jug-collage-grande {
  position: absolute; right: 0; top: 0; width: 78%; height: 94%; object-fit: cover; border-radius: var(--r-bloque);
  box-shadow: var(--at-elev-3); background: var(--at-color-tinta);
}
.jug-polaroid {
  position: absolute; margin: 0; padding: var(--at-esp-2) var(--at-esp-2) 36px; background: var(--at-color-superficie); border-radius: var(--at-radio-s);
  box-shadow: var(--at-elev-3);
}
.jug-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--at-radio-s); }
.jug-polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: var(--mano);
  font-size: 24px; font-weight: 700; color: var(--at-color-tinta);
}
.jug-polaroid-a { left: 0; top: 40px; width: 36%; transform: rotate(-9deg); animation: jugFlota 6s var(--at-ease-estandar) infinite; }
.jug-polaroid-b { left: 6%; bottom: 0; width: 38%; transform: rotate(6deg); animation: jugFlota 7s var(--at-ease-estandar) infinite 1.2s; }
@keyframes jugFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* Stickers planos: los colores los pone el SVG con tokens (`style="fill: ..."`). */
.jug-sticker { position: absolute; }
.jug-sticker-bloque { width: 72px; right: -16px; top: 36%; animation: jugGira 9s var(--at-ease-estandar) infinite; }
.jug-sticker-estrella { width: 56px; right: 34%; top: -20px; animation: jugBrillo 3400ms var(--at-ease-estandar) infinite; }
.jug-sticker-pelota { width: 60px; left: 46%; bottom: 0; animation: jugRebote 2600ms var(--at-ease-estandar) infinite 0.6s; }
@keyframes jugGira { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(10deg) translateY(-10px); } }
@keyframes jugBrillo { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.82) rotate(18deg); } }
@keyframes jugRebote { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-24px); } }

.jug-collage .globo-aviso { left: auto; right: var(--at-esp-5); bottom: 48px; z-index: 2; }

/* -- el lazo: dos cintas cruzadas */
.jug-lazo { position: relative; height: 152px; margin-top: -40px; z-index: 2; pointer-events: none; overflow: hidden; }
.jug-lazo .jug-cinta { position: absolute; left: -5%; right: -5%; padding: var(--at-esp-3) 0; }
.jug-cinta-a { top: 28px; transform: rotate(-2.5deg); background: var(--at-color-marca); box-shadow: var(--at-elev-1); }
.jug-cinta-b { top: 48px; transform: rotate(2deg); background: var(--at-color-dato-fuerte); }
.jug-cinta-b .jug-cinta-pista { animation-direction: reverse; animation-duration: 50s; }
.jug-cinta-b i { color: var(--at-color-dato-fondo); font-size: 12px; }
.jug-cinta-a { z-index: 1; }

/* -- progreso del buscador: la barra se llena con transform (el JS escribe `scaleX(n)`) */
.jug-progreso {
  position: sticky; top: 72px; z-index: var(--at-z-pestanas); height: 8px; border-radius: var(--at-radio-capsula); background: var(--at-color-neutro-fondo);
  margin: -8px 0 28px; overflow: hidden;
}
.jug-progreso span {
  display: block; height: 100%; width: 100%; background: var(--at-color-marca); border-radius: var(--at-radio-capsula);
  transform: scaleX(0); transform-origin: left; transition: transform var(--at-dur-lenta) var(--at-ease-salida);
}

/* -- inclinacion 3D al pasar el mouse */
.jug-foto-opcion, .jug-estimulo { transform-style: preserve-3d; }
.jug-foto-opcion:hover, .jug-estimulo:hover, .jug-edad:hover {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
}

/* -- al llegar desde «Ver los juguetes»: un aro sale de cada tarjeta. Solo
      transform y opacity. */
.jug-resultados.llegada .jug-item:not([hidden])::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-tarjeta); border: 2px solid var(--at-color-marca);
  pointer-events: none; animation: jugLlega var(--at-dur-celebracion) var(--at-ease-salida) 0.3s both;
}
.jug-resultados.llegada .jug-resumen { animation: atPop var(--at-dur-lenta) var(--at-ease-salida) both; }
@keyframes jugLlega { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.06); } }

/* -------------------------------------------------------------------- tablet */

@media (max-width: 1180px) {
  .jug-hero-rejilla { grid-template-columns: 1fr; gap: 40px; }
  .jug-collage { height: 480px; max-width: 600px; }
  .jug-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jug-opciones-edad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jug-estimulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jug-edades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jug-cabeza, .jug-faq, .jug-momento, .jug-seguridad { grid-template-columns: 1fr; gap: 20px; }
  .jug-faq, .jug-momento { gap: var(--at-esp-8); }
  .jug-momento-foto img { max-height: 420px; aspect-ratio: 4 / 3; }
  .jug-respuesta { grid-template-columns: auto 1fr; }
  .jug-respuesta-botones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .jug-voz { grid-template-columns: 1fr; padding: 40px; }
  .jug-voz-tarjeta { max-width: 460px; width: 100%; }
}

/* ------------------------------------------------------------------- celular */

@media (max-width: 760px) {
  .jug-hero { padding-bottom: var(--at-esp-8); }
  .jug-hero-rejilla { padding-top: var(--at-esp-6); padding-bottom: 28px; }
  .jug-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .jug-hero .botones .boton { flex: 1 1 100%; }
  .jug-collage { height: 380px; }
  .jug-collage-grande { width: 84%; }
  .jug-polaroid { padding: 6px 6px 28px; }
  .jug-polaroid figcaption { font-size: 18px; bottom: 4px; }
  .jug-polaroid-a { width: 40%; top: 20px; }
  .jug-polaroid-b { width: 42%; }
  .jug-sticker-bloque { width: 52px; right: -4px; }
  .jug-sticker-estrella { width: 44px; }
  .jug-sticker-pelota { width: 44px; }
  .jug-collage .globo-aviso { right: 12px; left: auto; bottom: 40px; max-width: 70%; }
  .jug-reloj { display: flex; }
  .jug-reloj-cifras > span { min-width: 0; flex: 1; padding: var(--at-esp-2) 4px 4px; }
  .jug-reloj-cifras b { font: var(--at-texto-titulo-2); font-size: 24px; font-weight: 900; }
  .jug-sellos { gap: var(--at-esp-2); }
  .jug-sellos li { padding: var(--at-esp-3) var(--at-esp-4); }
  .jug-cinta span { font: var(--at-texto-titulo-2); font-weight: 900; }
  .jug-lazo { height: 112px; margin-top: -28px; }
  .jug-lazo .jug-cinta { padding: var(--at-esp-2) 0; }
  .jug-cinta-a { top: 20px; }
  .jug-cinta-b { top: 36px; }
  .jug-buscador { padding-top: 56px; }
  .jug-cabeza h2, .jug-momento h2, .jug-faq h2, .jug-vacio h2, .jug-voz h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .jug-pasos-buscador { gap: var(--at-esp-8); }
  .jug-paso legend { font: var(--at-texto-titulo-2); font-size: 18px; align-items: flex-start; }
  .jug-opciones-edad { gap: var(--at-esp-3); }
  .jug-foto-opcion { aspect-ratio: 1 / 1.05; }
  .jug-foto-texto { left: 8px; right: 8px; bottom: 8px; padding: var(--at-esp-2) var(--at-esp-3); }
  .jug-foto-texto b { font: var(--at-texto-titulo-2); font-weight: 900; }
  .jug-estimulos { gap: var(--at-esp-3); }
  .jug-estimulo-texto { padding: var(--at-esp-3); }
  .jug-respuesta { grid-template-columns: 1fr; padding: var(--at-esp-6); gap: var(--at-esp-4); }
  .jug-respuesta > img { width: 48px; }
  .jug-respuesta-idea { font: var(--at-texto-titulo-2); font-size: 20px; }
  .jug-respuesta-botones .boton { flex: 1 1 100%; }
  .jug-progreso { top: 118px; }
  .jug-resumen { top: 118px; border-radius: var(--at-radio-l); }
  .jug-resumen-cuenta { margin-left: 0; }
  .jug-seccion { padding-top: 60px; }
  .jug-banda { margin-top: 60px; }
  .jug-edades, .jug-pasos { grid-template-columns: 1fr; gap: var(--at-esp-3); }
  .jug-sin-resultados, .jug-vacio { flex-direction: column; align-items: flex-start; padding: 28px; gap: var(--at-esp-5); }
  .jug-sin-resultados .boton, .jug-vacio .boton { width: 100%; }
  .jug-voz { padding: 28px; gap: 28px; }
  .jug-voz-tarjeta { height: 252px; }
  .jug-seguridad { padding: 28px; }
  .jug-seguridad h2 { font: var(--at-texto-titulo-1); }
  .jug-seguridad ol { grid-template-columns: 1fr; }
  .jug-cta { margin-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .jug-nieve { display: none; }
}

/* El centro de confianza: `capturas/11-privacidad.jpg`. UI/UX v4: tokens `--at-*`. El texto de los documentos no se toca, solo su estilo. */

.legal-cabeza { background: var(--at-color-superficie); border-bottom: 1px solid var(--at-color-borde); }
.legal-cabeza .contenido { padding-top: var(--at-esp-9); }
.legal-cabeza .ceja { margin: 0; }
.legal-lema { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-2) 0 0; color: var(--at-color-tinta); text-wrap: pretty; }

.legal-pestanas { display: flex; gap: var(--at-esp-1); margin-top: var(--at-esp-7); overflow-x: auto; scrollbar-width: none; }
.legal-pestanas::-webkit-scrollbar { display: none; }
.legal-pestanas a {
  padding: var(--at-esp-3) var(--at-esp-5); min-height: var(--at-tactil-min); display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--at-color-texto-2); white-space: nowrap;
  border-bottom: 3px solid transparent; border-radius: var(--at-radio-s) var(--at-radio-s) 0 0;
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.legal-pestanas a:hover { background: var(--at-color-fondo); color: var(--at-color-tinta); }
.legal-pestanas a[aria-current="page"] { color: var(--at-color-marca); border-bottom-color: var(--at-color-marca); background: var(--at-color-marca-papel); }

.legal-cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 40px; }

.legal-lado { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--at-esp-4); }
.legal-ficha { padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.legal-etiqueta { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.legal-ficha h1 { font: var(--at-texto-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-1) 0 0; }
.legal-ficha p { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: var(--at-esp-2) 0 0; }

.legal-indice { display: flex; flex-direction: column; gap: var(--at-esp-1); }
.legal-indice a {
  padding: var(--at-esp-2) var(--at-esp-3); min-height: var(--at-tactil-min); display: flex; align-items: center; border-radius: var(--at-radio-s); font: var(--at-texto-cuerpo); color: var(--at-color-texto-2);
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.legal-indice a:hover { background: var(--at-color-marca-papel); color: var(--at-color-tinta); }
.legal-indice a[aria-current] { color: var(--at-color-marca); font-weight: 700; background: var(--at-color-marca-papel); }

.legal-dudas { padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-tinta); color: var(--at-color-superficie); }
.legal-dudas div { display: flex; align-items: center; gap: var(--at-esp-2); }
.legal-dudas img { width: 24px; }
.legal-dudas b { font: var(--at-texto-cuerpo-fuerte); }
.legal-dudas p { color: var(--at-color-superficie); opacity: 0.9; font: var(--at-texto-meta); margin: var(--at-esp-2) 0 0; }
.legal-dudas span { display: block; font: var(--at-texto-mono); color: var(--at-color-marca-claro); margin-top: var(--at-esp-2); }

.legal-empresa { margin: 0; padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); display: grid; grid-template-columns: auto 1fr; gap: var(--at-esp-1) var(--at-esp-3); font: var(--at-texto-meta); }
.legal-empresa dt { color: var(--at-color-texto-2); font-weight: 700; }
.legal-empresa dd { margin: 0; color: var(--at-color-tinta); overflow-wrap: anywhere; }
.legal-empresa a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.legal-texto { display: flex; flex-direction: column; gap: var(--at-esp-4); min-width: 0; }

.legal-resumen { padding: var(--at-esp-5) var(--at-esp-7); border-radius: var(--at-radio-xl); background: var(--at-color-marca-papel); display: flex; gap: var(--at-esp-4); align-items: flex-start; }
.legal-resumen img { width: 40px; flex: none; }
.legal-resumen b { font: var(--at-texto-cuerpo-fuerte); color: var(--at-color-marca-hover); }
.legal-resumen p { font: var(--at-texto-web-cuerpo); color: var(--at-color-tinta); margin: var(--at-esp-1) 0 0; }

.legal-seccion { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-xl); scroll-margin-top: 96px; transition: border-color var(--at-dur-base) var(--at-ease-estandar); }
.legal-seccion[open] { border-color: var(--at-color-marca-papel); box-shadow: 0 1px 0 var(--at-color-marca-papel); }
.legal-seccion summary { list-style: none; cursor: pointer; padding: var(--at-esp-5) var(--at-esp-7); min-height: var(--at-tactil-min); display: flex; align-items: center; gap: var(--at-esp-4); }
.legal-seccion summary::-webkit-details-marker { display: none; }
.legal-n { font: var(--at-texto-mono); color: var(--at-color-marca); flex: none; width: 28px; }
.legal-seccion h2 { flex: 1; font: var(--at-texto-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.legal-seccion .mas {
  width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-capsula); background: var(--at-color-marca-papel); color: var(--at-color-marca); flex: none;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  transition: transform var(--at-dur-base) var(--at-ease-salida), background-color var(--at-dur-base) var(--at-ease-estandar);
}
.legal-seccion[open] .mas { transform: rotate(45deg); background: var(--at-color-marca); color: var(--at-color-superficie); }
.legal-contenido { padding: 0 var(--at-esp-7) var(--at-esp-6) 72px; }
.legal-contenido p { font: var(--at-texto-web-cuerpo); line-height: 1.7; color: var(--at-color-tinta); margin: 0 0 var(--at-esp-3); }
.legal-contenido p.legal-claro {
  padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-fondo); border-left: 3px solid var(--at-color-marca);
  font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-texto-2); margin-bottom: var(--at-esp-4);
}
.legal-claro b { color: var(--at-color-tinta); }

.legal-permisos { margin-top: var(--at-esp-4); padding: var(--at-esp-7) var(--at-esp-8); border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.legal-permisos h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.legal-permisos > p { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: var(--at-esp-1) 0 0; }
.legal-permisos .boton { min-height: var(--at-tactil-min); margin-top: var(--at-esp-2); }
.legal-permisos ul { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.legal-permisos li { display: flex; align-items: center; gap: var(--at-esp-4); padding: var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-fondo); border: 1px solid var(--at-color-borde); }
.legal-permisos li > div { flex: 1; }
.legal-permisos li b { display: block; font: var(--at-texto-cuerpo-fuerte); }
.legal-permisos li span { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.legal-permisos li > div span { display: block; margin-top: var(--at-esp-1); }
.legal-interruptor { width: 48px; height: 28px; border-radius: var(--at-radio-capsula); background: var(--at-color-marca); position: relative; flex: none; opacity: 0.55; }
.legal-interruptor i { position: absolute; top: var(--at-esp-1); right: var(--at-esp-1); width: 20px; height: 20px; border-radius: var(--at-radio-capsula); background: var(--at-color-superficie); }
.legal-decides { font: var(--at-texto-meta); font-weight: 700; color: var(--at-color-dato-fuerte); background: var(--at-color-dato-fondo); padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula); white-space: nowrap; flex: none; }
.legal-pequeno { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: var(--at-esp-4) 0 0; }

.legal-cambios { margin: var(--at-esp-3) 0 0; padding: var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }

.legal-otros { margin-top: var(--at-esp-7); }
.legal-otros h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
.legal-otro {
  display: flex; flex-direction: column; gap: var(--at-esp-2); padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--at-color-superficie);
  border: 1px solid var(--at-color-borde); color: var(--at-color-tinta);
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-salida);
}
.legal-otro:hover { border-color: var(--at-color-marca); transform: translateY(-2px); color: var(--at-color-tinta); }
.legal-otro b { font: var(--at-texto-cuerpo-fuerte); }
.legal-otro span { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }

/* ---------------------------------------------------------------- tablet y celular */

@media (max-width: 1180px) {
  .legal-cuerpo { grid-template-columns: 1fr; gap: var(--at-esp-5); }
  .legal-lado { position: static; }
  .legal-indice { display: none; }
}

@media (max-width: 760px) {
  .legal-cabeza .contenido { padding-top: var(--at-esp-7); }
  .legal-lema { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .legal-pestanas { margin: var(--at-esp-5) calc(var(--margen) * -1) 0; padding: 0 var(--margen); }
  .legal-cuerpo { padding-top: var(--at-esp-6); }
  .legal-resumen { padding: var(--at-esp-5); border-radius: var(--at-radio-l); }
  .legal-seccion summary { padding: var(--at-esp-4) var(--at-esp-5); gap: var(--at-esp-3); }
  .legal-n { width: auto; }
  .legal-seccion h2 { font-size: 16px; }
  .legal-contenido { padding: 0 var(--at-esp-5) var(--at-esp-5); }
  .legal-permisos { padding: var(--at-esp-5); }
  .legal-permisos li { flex-direction: column; align-items: flex-start; }
}

/*
 * La caja de Navidad (`/navidad`).
 *
 * Tres estados de la misma pagina:
 *
 * - Sin script: un formulario con la caja al lado (lo de «base»).
 * - `.js` en la portada: titulo y la caja en 3D siguiendo el puntero.
 * - `.js.inmersiva`: pantalla completa por escenas (`data-fase`): para,
 *   gustos, afinar, abrir, revelado.
 *
 * UI/UX v4: todo color sale de `--at-*` (o de los nombres viejos aliados a ellos,
 * que `hombres.css` re-temiza). Sin degradados: la caja es de caras planas en
 * tonos de fucsia —el volumen lo da el 3D, no el sombreado— y los rayos son
 * cuñas planas recortadas con `clip-path`. Los tonos intermedios (caras en
 * sombra, vidrio sobre la tinta) se mezclan con `color-mix` desde los tokens,
 * no son colores nuevos.
 *
 * Solo se animan `transform` y `opacity`. Las propiedades registradas
 * (`@property`) dejan animar el angulo de la tapa y el punto de vista de la caja
 * (son transform disfrazado). El tamaño de la caja ya no se anima: salta de
 * escena a escena. Con `prefers-reduced-motion` no hay bucles ni vuelos.
 */

@property --w { syntax: "<length>"; inherits: true; initial-value: 220px; }
@property --tapa { syntax: "<angle>"; inherits: true; initial-value: 205deg; }
@property --ry { syntax: "<angle>"; inherits: true; initial-value: -32deg; }
@property --rx { syntax: "<angle>"; inherits: true; initial-value: -22deg; }

/* Tonos derivados de los tokens (la esfera volando vive en <body>, fuera de la escena). */
.nav-escena, .nav-vuela {
  --nav-cristal-1: color-mix(in srgb, var(--at-color-superficie) 6%, transparent);
  --nav-cristal-2: color-mix(in srgb, var(--at-color-superficie) 12%, transparent);
  --nav-cristal-3: color-mix(in srgb, var(--at-color-superficie) 22%, transparent);
  --nav-suave: color-mix(in srgb, var(--at-color-fondo) 78%, transparent);
  --nav-tenue: color-mix(in srgb, var(--at-color-fondo) 62%, transparent);
  --nav-sombra: color-mix(in srgb, var(--at-color-tinta) 20%, transparent);
  --nav-hilo: var(--at-color-aviso-fondo);
}

/* Los tonos de las esferas: planos, de la base. */
[data-tono="0"] { --bola: var(--fucsia); }
[data-tono="1"] { --bola: var(--azul); }
[data-tono="2"] { --bola: var(--at-color-ok); }
[data-tono="3"] { --bola: var(--at-color-aviso); }
[data-tono="4"] { --bola: var(--fucsia-claro); }

.nav-solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ================================================================== base */

#atineo-previo:has(> .nav-escena) { background: var(--tinta); }

.nav-escena {
  position: relative; background: var(--tinta); color: var(--at-color-superficie); padding: var(--at-esp-9) 0 var(--at-esp-10);
  overflow: clip; isolation: isolate;
}

.nav-nieve { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.nav-nieve i {
  position: absolute; top: -12px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%;
  background: var(--at-color-superficie); opacity: 0.55; animation: navCae var(--d) linear infinite; animation-delay: calc(var(--r) * -1);
}
@keyframes navCae {
  from { transform: translate3d(0, -20px, 0); }
  50% { transform: translate3d(14px, 50vh, 0); }
  to { transform: translate3d(-8px, 105vh, 0); }
}
.nav-cielo, .nav-lienzo, .nav-destello, .nav-barra, .nav-revelado, .nav-solo-js, .nav-paso-pie { display: none; }

.nav-cabeza { text-align: center; }
.nav-ceja { color: var(--fucsia-claro); margin: 0; }
.nav-ceja span { color: var(--rosa-papel); }
.nav-escena h1 {
  font: var(--at-texto-web-display); color: var(--at-color-superficie); letter-spacing: var(--at-tracking-titulo);
  margin: var(--at-esp-3) 0 0; text-wrap: balance;
}
.nav-h1-acento { color: var(--rosa-papel); display: inline-block; animation: navLatido 2600ms var(--at-ease-salida) infinite; }
@keyframes navLatido { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.06) rotate(-2deg); } }
.nav-intro { font: var(--at-texto-web-cuerpo); color: var(--nav-suave); margin: var(--at-esp-5) auto 0; max-width: 36em; }

.nav-taller {
  width: 100%; max-width: var(--at-ancho-contenido-web); margin: var(--at-esp-9) auto 0; padding: 0 var(--margen);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--at-esp-8); align-items: start;
}
.nav-pasos { display: flex; flex-direction: column; gap: var(--at-esp-5); min-width: 0; }

.nav-paso {
  border: 1px solid var(--nav-cristal-2); background: var(--nav-cristal-1);
  border-radius: var(--at-radio-xl); padding: var(--at-esp-5) var(--at-esp-6) var(--at-esp-6); margin: 0; min-width: 0;
}
.nav-paso legend {
  float: left; width: 100%; padding: 0; margin: 0 0 var(--at-esp-3); font: var(--at-texto-web-titulo-2); color: var(--at-color-superficie);
  display: flex; align-items: center; gap: var(--at-esp-3); letter-spacing: var(--at-tracking-titulo);
}
.nav-paso legend + * { clear: both; }
.nav-paso legend small, .nav-sub small {
  font: var(--at-texto-meta); font-weight: 700; color: var(--nav-suave); border: 1px solid var(--nav-cristal-3);
  padding: 2px var(--at-esp-2); border-radius: var(--at-radio-capsula);
}
.nav-paso-n {
  width: 32px; height: 32px; border-radius: 50%; background: var(--fucsia); color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.nav-ayuda { font: var(--at-texto-cuerpo-fuerte); font-weight: 500; color: var(--nav-suave); margin: 0 0 var(--at-esp-4); }
.nav-sub { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; margin: var(--at-esp-5) 0 var(--at-esp-3); display: flex; gap: var(--at-esp-2); align-items: center; }

.nav-chips { display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.nav-chip { position: relative; cursor: pointer; }
.nav-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nav-chip span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--at-esp-5); border-radius: var(--at-radio-capsula);
  border: 1.5px solid var(--nav-cristal-3); color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 700;
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), border-color var(--at-dur-base) var(--at-ease-estandar),
    transform var(--at-dur-base) var(--at-ease-salida), color var(--at-dur-base) var(--at-ease-estandar);
}
.nav-chip:hover span { border-color: var(--rosa-papel); }
.nav-chip input:checked + span { background: var(--at-color-superficie); color: var(--fucsia); border-color: var(--at-color-superficie); transform: scale(1.05); }
.nav-chip input:focus-visible + span { outline: 3px solid var(--fucsia-claro); outline-offset: 2px; }

.nav-ciudad { display: block; max-width: 320px; }
.nav-ciudad select, .nav-nombre input {
  width: 100%; min-height: 52px; border-radius: var(--at-radio-m); border: 1.5px solid var(--nav-cristal-3);
  background: var(--tinta); color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; padding: 0 var(--at-esp-4);
}
.nav-nombre input::placeholder { color: var(--nav-tenue); font-weight: 600; }
.nav-nombre input:focus-visible, .nav-ciudad select:focus-visible { outline: 3px solid var(--fucsia-claro); outline-offset: 1px; border-color: transparent; }
.nav-nombre { display: block; max-width: 420px; }
.nav-nota { display: block; color: var(--nav-suave); font: var(--at-texto-meta); margin-top: var(--at-esp-2); }

/* ------------------------------------------------ afinar: entradas del motor */

.nav-momentos-elegir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.nav-momento {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--at-esp-2); text-align: center; cursor: pointer;
  padding: var(--at-esp-4) var(--at-esp-3); border-radius: var(--at-radio-l); border: 1.5px solid var(--nav-cristal-3); background: var(--nav-cristal-1);
  min-height: var(--at-tactil-min);
  transition: border-color var(--at-dur-base) var(--at-ease-estandar), background-color var(--at-dur-base) var(--at-ease-estandar),
    transform var(--at-dur-base) var(--at-ease-salida);
}
.nav-momento input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nav-momento-dibujo { font-size: var(--at-esp-8); line-height: 1; transition: transform var(--at-dur-media) var(--at-ease-salida); }
.nav-momento-texto { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; }
.nav-momento:hover { border-color: var(--rosa-papel); }
.nav-momento:has(input:checked) { background: var(--at-color-superficie); border-color: var(--at-color-superficie); transform: translateY(-3px); }
.nav-momento:has(input:checked) .nav-momento-texto { color: var(--fucsia); }
.nav-momento:has(input:checked) .nav-momento-dibujo { transform: scale(1.25) rotate(-8deg); }
.nav-momento:has(input:focus-visible) { outline: 3px solid var(--fucsia-claro); outline-offset: 2px; }

.nav-nunca .nav-chip span { min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); gap: 6px; }
.nav-nunca .nav-chip span i { font-style: normal; font: var(--at-texto-mono); opacity: 0.55; }
.nav-nunca .nav-chip input:checked + span { background: var(--ambar-fondo); color: var(--ambar-texto); border-color: var(--ambar-fondo); text-decoration: line-through; }
.nav-nunca .nav-chip input:checked + span i { opacity: 1; }
.nav-chip.bloqueado { opacity: 0.28; pointer-events: none; }

.nav-entrega { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--at-esp-5); align-items: end; }
.nav-antes { position: relative; display: flex; align-items: center; gap: var(--at-esp-3); cursor: pointer; color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; min-height: 52px; }
.nav-antes small { display: block; font: var(--at-texto-meta); font-weight: 600; color: var(--nav-suave); }
.nav-antes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-interruptor { flex: none; width: 48px; height: 28px; border-radius: var(--at-radio-capsula); background: var(--nav-cristal-3); position: relative; transition: background-color var(--at-dur-base) var(--at-ease-estandar); }
.nav-interruptor::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--at-color-superficie);
  transition: transform var(--at-dur-media) var(--at-ease-salida);
}
.nav-antes input:checked + .nav-interruptor { background: var(--fucsia-claro); }
.nav-antes input:checked + .nav-interruptor::after { transform: translateX(20px); }
.nav-antes input:focus-visible + .nav-interruptor { outline: 3px solid var(--fucsia-claro); outline-offset: 2px; }

/* ---------------------------------------------------------------- medidor */

.nav-medidor {
  display: flex; align-items: center; gap: var(--at-esp-4); width: min(100%, 340px); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-l);
  background: var(--nav-cristal-1); border: 1px solid var(--nav-cristal-2);
}
.nav-medidor[hidden] { display: none; }
.nav-medidor-cifra { display: flex; align-items: baseline; color: var(--at-color-superficie); flex: none; }
.nav-medidor-cifra b { font: var(--at-texto-cifra); letter-spacing: var(--at-tracking-titulo); font-variant-numeric: tabular-nums; }
.nav-medidor-cifra span { font: var(--at-texto-titulo-2); font-weight: 800; color: var(--rosa-papel); margin-left: 2px; }
.nav-medidor-texto { display: flex; flex-direction: column; gap: var(--at-esp-1); min-width: 0; flex: 1; }
.nav-medidor-texto strong { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; }
.nav-medidor-texto > span:not(.nav-medidor-barra) { color: var(--nav-suave); font: var(--at-texto-meta); }
.nav-medidor-barra { display: block; height: 6px; border-radius: var(--at-radio-capsula); background: var(--nav-cristal-2); overflow: hidden; margin-top: var(--at-esp-1); }
/* La barra se llena con `scaleX`: `--k` va de 0 a 1 (lo pone navidad.js). */
.nav-medidor-barra i {
  display: block; height: 100%; width: 100%; background: var(--rosa-papel); border-radius: inherit;
  transform-origin: left; transform: scaleX(var(--k, 0));
  transition: transform var(--at-dur-celebracion) var(--at-ease-salida), background-color var(--at-dur-lenta) var(--at-ease-estandar);
}
.nav-medidor[data-nivel="Alta"] .nav-medidor-barra i { background: var(--at-color-ok-fondo); }
.nav-medidor.pensando .nav-medidor-cifra b { animation: atRespirar 1600ms var(--at-ease-estandar) infinite both; }
.nav-medidor.sube .nav-medidor-cifra b { animation: navSube var(--at-dur-sello) var(--at-ease-salida); }
@keyframes navSube { 40% { transform: scale(1.3); color: var(--rosa-papel); } }
/* La caja brilla con lo que atina: el halo crece con el medidor. */
.nav-escenario { --atina: 0; }
.nav-escena.inmersiva:is([data-fase="gustos"], [data-fase="afinar"]) .nav-halo {
  transform: scale(calc(0.85 + var(--atina) * 0.35)); opacity: calc(0.1 + var(--atina) * 0.2);
  transition: transform var(--at-dur-celebracion) var(--at-ease-salida), opacity var(--at-dur-celebracion) var(--at-ease-salida);
}

/* ------------------------------------------------ la lectura del motor, en las cartas */

.nav-tarjeta-motor { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--at-esp-2); font: var(--at-texto-meta); font-weight: 800; color: var(--texto-suave); }
.nav-tarjeta-motor em { font-style: normal; color: var(--azul-texto); }
.nav-atina { display: inline-block; width: 64px; height: 8px; border-radius: var(--at-radio-capsula); background: var(--rosa-suave); overflow: hidden; }
/* Ancho fijo en `--p`; lo que se anima es la escala desde la izquierda. */
.nav-atina i { display: block; height: 100%; width: var(--p, 0%); background: var(--fucsia); border-radius: inherit; transform-origin: left; }
.nav-carta.volteada .nav-atina i { animation: atLlenar 1000ms var(--at-ease-salida) 500ms both; }
.nav-resultado-estatico .nav-atina i { animation: atLlenar 800ms var(--at-ease-salida) both; }
.nav-coincide { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nav-coincide li {
  display: inline-flex; align-items: center; gap: 6px; font: var(--at-texto-meta); font-weight: 800; color: var(--fucsia);
  background: var(--rosa-papel); padding: 4px var(--at-esp-3) 4px 4px; border-radius: var(--at-radio-capsula);
}
.nav-coincide li b { width: 20px; height: 20px; border-radius: 50%; background: var(--bola, var(--fucsia)); display: inline-flex; align-items: center; justify-content: center; font: var(--at-texto-mono); }
.nav-apuesta {
  position: absolute; top: var(--at-esp-3); right: var(--at-esp-3); z-index: 1; background: var(--at-color-dato-fuerte); color: var(--at-color-superficie);
  font: var(--at-texto-mono); font-weight: 700; padding: 6px var(--at-esp-3); border-radius: var(--at-radio-capsula);
}
/* Llega en...: punto + palabra, sin emoji. */
.nav-llegada { margin: 0; font: var(--at-texto-meta); font-weight: 800; color: var(--verde-texto); display: flex; gap: 6px; align-items: center; }
.nav-llegada::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-texto); }
.nav-no-es {
  align-self: center; border: 0; background: none; font: var(--at-texto-meta); font-weight: 800; color: var(--texto-suave);
  cursor: pointer; padding: var(--at-esp-2) var(--at-esp-3); min-height: var(--at-tactil-min); border-radius: var(--at-radio-capsula); margin-top: 2px;
}
.nav-no-es:hover { color: var(--fucsia); background: var(--rosa-suave); }
.nav-hueco {
  min-height: 200px; border-radius: var(--at-radio-xl); border: 2px dashed var(--nav-cristal-3); color: var(--nav-suave);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--at-esp-5); font: var(--at-texto-cuerpo-fuerte); font-weight: 700;
}

.nav-resumen-motor { color: var(--nav-suave); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; margin: var(--at-esp-3) 0 0; }
.nav-resumen-motor b { color: var(--at-color-superficie); }
.nav-relajacion {
  display: inline-block; margin: var(--at-esp-3) auto 0; padding: 6px var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--ambar-fondo); color: var(--ambar-texto);
  font: var(--at-texto-meta); font-weight: 800;
}

/* La pregunta que quiero hacer. */
.nav-pregunta {
  max-width: 720px; margin: var(--at-esp-8) auto 0; padding: var(--at-esp-5); border-radius: var(--at-radio-xl); border: 1px solid var(--nav-cristal-2);
  background: var(--nav-cristal-1); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--at-esp-1) var(--at-esp-4); align-items: start;
}
.nav-pregunta img { width: 48px; height: auto; grid-row: span 3; }
.nav-pregunta p { margin: 0; color: var(--at-color-superficie); }
.nav-pregunta .nav-pregunta-ceja { color: var(--fucsia-claro); font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; }
.nav-pregunta .nav-pregunta-texto { font: var(--at-texto-titulo-2); font-size: 19px; font-weight: 800; }
.nav-pregunta .nav-momentos { justify-content: flex-start; margin-top: var(--at-esp-3); }
.nav-pregunta .boton { font: var(--at-texto-cuerpo-fuerte); padding: var(--at-esp-2) var(--at-esp-4); min-height: var(--at-tactil-min); }

.nav-flotante {
  position: fixed; left: 50%; bottom: calc(var(--at-esp-6) + env(safe-area-inset-bottom)); z-index: var(--at-z-toast); transform: translateX(-50%);
  background: var(--at-color-superficie); color: var(--tinta); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; padding: var(--at-esp-3) var(--at-esp-5);
  border-radius: var(--at-radio-capsula); box-shadow: var(--at-elev-3); animation: atSubir var(--at-dur-media) var(--at-ease-salida) both;
}

/* -------------------------------------------------------------- guirnaldas */

.nav-guirnaldas { display: flex; flex-direction: column; gap: 6px; }
.nav-guirnalda { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-1); padding-bottom: 6px; }
.nav-cuerda { position: absolute; left: 0; top: 0; width: 100%; height: 40px; overflow: visible; pointer-events: none; }
.nav-cuerda path { fill: none; stroke: var(--at-color-ok); stroke-width: 3; }

.nav-esfera {
  position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; padding-bottom: 6px;
}
/* Donde cuelga cada una: la altura de la cuerda en su columna. */
.nav-esfera:nth-of-type(4n + 1) { --cuelga: 22px; }
.nav-esfera:nth-of-type(4n + 2) { --cuelga: 28px; }
.nav-esfera:nth-of-type(4n + 3) { --cuelga: 12px; }
.nav-esfera:nth-of-type(4n + 4) { --cuelga: 8px; }
.nav-esfera input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.nav-colgante {
  position: relative; display: flex; flex-direction: column; align-items: center; margin-top: var(--cuelga, 16px);
  transform-origin: 50% 0; animation: navVaiven var(--v, 3s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.37s);
}
@keyframes navVaiven { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.nav-hilo { width: 2px; height: var(--hilo, 24px); background: var(--nav-hilo); opacity: 0.85; }
.nav-bola {
  position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--bola);
  display: flex; align-items: center; justify-content: center; font-size: var(--at-esp-8); line-height: 1;
  box-shadow: inset -7px -9px 0 var(--nav-sombra), var(--at-elev-1);
  transition: transform var(--at-dur-media) var(--at-ease-salida), opacity var(--at-dur-base) var(--at-ease-estandar);
}
/* El brillo: una mancha plana, no un degradado. */
.nav-bola::after {
  content: ""; position: absolute; width: 22%; height: 14%; border-radius: 50%; background: var(--at-color-superficie); opacity: 0.45;
  top: 17%; left: 21%; transform: rotate(-32deg);
}
.nav-bola-gancho {
  position: absolute; top: -7px; left: 50%; width: 16px; height: 9px; margin-left: -8px; border-radius: var(--at-radio-s) var(--at-radio-s) 2px 2px; background: var(--nav-hilo);
}
.nav-bola-dibujo { position: relative; z-index: 1; }
.nav-esfera:hover .nav-bola { transform: scale(1.1); }
.nav-esfera:active .nav-bola { transform: scale(0.92); }
.nav-esfera-nombre { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; margin-top: var(--at-esp-2); max-width: 10em; }

/* Descolgada: queda el hilo y un hueco punteado donde estaba. */
.nav-esfera input:checked ~ .nav-colgante .nav-bola { opacity: 0; transform: scale(0.4); }
.nav-esfera input:checked ~ .nav-colgante::after {
  content: "✓"; position: absolute; bottom: 0; left: 50%; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--rosa-papel) 55%, transparent); color: var(--rosa-papel); font: var(--at-texto-titulo-2); font-weight: 800;
  display: flex; align-items: center; justify-content: center; animation: navHueco var(--at-dur-base) var(--at-ease-salida) both;
}
@keyframes navHueco { from { transform: scale(0.5); opacity: 0; } }
.nav-esfera input:checked ~ .nav-esfera-nombre { color: var(--rosa-papel); }
.nav-esfera input:focus-visible ~ .nav-colgante .nav-bola { outline: 3px solid var(--at-color-superficie); outline-offset: 4px; }
.nav-esfera.llena { opacity: 0.35; }
.nav-esfera.volviendo .nav-bola { animation: navVuelve var(--at-dur-lenta) var(--at-ease-salida); }
@keyframes navVuelve { from { transform: translateY(-40px) scale(0.3); opacity: 0; } 60% { transform: translateY(4px) scale(1.1); } }

/* ------------------------------------------------------------------- mesa */

.nav-mesa {
  --w: 220px;
  position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; gap: var(--at-esp-3);
  padding: var(--at-esp-8) var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-hoja); background: var(--tinta); border: 1px solid var(--nav-cristal-2);
}
.nav-mesa-titulo:empty, .nav-pista:empty { display: none; }
.nav-mesa-texto { width: 100%; text-align: center; }
.nav-abrir { width: 100%; justify-content: center; }
.nav-aviso { margin: var(--at-esp-1) 0 0; color: var(--rosa-papel); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; text-align: center; }

/* ================================================================ la caja
 * Las caras son planos 3D: sus esquinas rectas son geometria, no UI (ilustracion). */

.nav-escenario {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: calc(var(--w) * 1.9); height: calc(var(--w) * 1.6); max-width: 100%;
}
.nav-caja {
  --h: calc(var(--w) * 0.74); --d: calc(var(--w) * 0.8);
  /* Caras de la caja: fucsia y sus sombras, mezcladas con la tinta. */
  --c-frente: var(--fucsia);
  --c-lado: color-mix(in srgb, var(--fucsia) 82%, var(--tinta));
  --c-sombra: color-mix(in srgb, var(--fucsia) 62%, var(--tinta));
  --c-dentro: color-mix(in srgb, var(--fucsia) 75%, var(--tinta));
  --c-oscuro: color-mix(in srgb, var(--fucsia) 55%, var(--tinta));
  --c-hondo: color-mix(in srgb, var(--fucsia) 45%, var(--tinta));
  --c-tapa: color-mix(in srgb, var(--fucsia) 55%, var(--fucsia-claro));
  --c-labio: var(--fucsia-hover);
  --c-cinta: var(--rosa-papel);
  --c-cinta-lado: color-mix(in srgb, var(--rosa-papel) 82%, var(--fucsia));
  position: relative; width: var(--w); height: var(--h); margin-top: calc(var(--w) * 0.34); perspective: calc(var(--w) * 5);
  z-index: 2;
}
.nav-giro {
  position: absolute; inset: 0; transform-style: preserve-3d; z-index: 1;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  animation: navMece 7s ease-in-out infinite alternate;
}
@keyframes navMece { from { --ry: -40deg; } to { --ry: -22deg; } }
.nav-caja.sigue .nav-giro { animation: none; transition: --ry var(--at-dur-base) var(--at-ease-salida), --rx var(--at-dur-base) var(--at-ease-salida); }
/* La capa de la tapa: detras mientras esta abierta, encima cuando cierra. El
   cambio espera a que la tapa pase la vertical. */
.nav-giro-tapa { z-index: 0; transition: z-index 0s 0.3s; }
.nav-caja:is([data-estado="cerrada"], [data-estado^="tiembla"], [data-estado="estallada"]) .nav-giro-tapa { z-index: 2; transition-delay: 0.12s; }
/* Cerrada no se ve lo de adentro: asomaria por encima de la tapa. */
.nav-dentro { transition: opacity var(--at-dur-base) var(--at-ease-estandar); }
.nav-caja:is([data-estado="cerrada"], [data-estado^="tiembla"], [data-estado="estallada"]) .nav-dentro { opacity: 0; transition-delay: 0.3s; }

.nav-cara { position: absolute; left: 0; top: 0; }
.nav-cara-frente, .nav-cara-atras, .nav-cara-frente-dentro { width: var(--w); height: var(--h); }
.nav-cara-frente { background: var(--c-frente); transform: translateZ(calc(var(--d) / 2)); backface-visibility: hidden; }
.nav-cara-atras { background: var(--c-sombra); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.nav-cara-frente-dentro { background: var(--c-dentro); transform: rotateY(180deg) translateZ(calc(var(--d) / -2 + 1px)); backface-visibility: hidden; }
.nav-cara-izq, .nav-cara-der, .nav-cara-der-dentro { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); }
.nav-cara-izq { background: var(--c-sombra); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.nav-cara-der { background: var(--c-lado); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); backface-visibility: hidden; }
.nav-cara-der-dentro { background: var(--c-oscuro); transform: rotateY(-90deg) translateZ(calc(var(--w) / -2 + 1px)); backface-visibility: hidden; }
.nav-cara-fondo { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); }
.nav-cara-fondo { background: var(--c-hondo); transform: rotateX(90deg) translateZ(calc(var(--h) / -2)); }
/*
 * La luz de adentro: al sacudirla, las caras de adentro se encienden y la luz
 * se escapa por la rendija de la tapa. Se pintan las caras y no un plano
 * aparte: un plano de luz bajo la tapa le ganaba a la tapa en profundidad.
 */
.nav-cara-atras, .nav-cara-izq, .nav-cara-fondo, .nav-cara-frente-dentro, .nav-cara-der-dentro { transition: background-color var(--at-dur-media) var(--at-ease-estandar); }
.nav-caja:is([data-estado^="tiembla"], [data-estado="estallada"]) :is(.nav-cara-atras, .nav-cara-izq) { background-color: var(--at-color-aviso-fondo); }
.nav-caja:is([data-estado^="tiembla"], [data-estado="estallada"]) :is(.nav-cara-fondo, .nav-cara-frente-dentro, .nav-cara-der-dentro) { background-color: color-mix(in srgb, var(--at-color-aviso-fondo) 55%, var(--at-color-superficie)); }

/* La cinta: una franja rosa por cara, alineada en las aristas. */
.nav-cinta-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 15%; transform: translateX(-50%); background: var(--c-cinta); }
.nav-cara-der .nav-cinta-v { background: var(--c-cinta-lado); }

.nav-etiqueta {
  position: absolute; left: 50%; top: 44%; transform: translateX(-12%) rotate(-7deg); transform-origin: 0 50%;
  background: var(--at-color-superficie); border-radius: var(--at-radio-s); padding: calc(var(--w) * 0.018) calc(var(--w) * 0.05) calc(var(--w) * 0.02) calc(var(--w) * 0.07);
  box-shadow: 0 3px 0 var(--nav-sombra); max-width: 70%;
}
/* El ojal de la etiqueta. */
.nav-etiqueta::before {
  content: ""; position: absolute; left: calc(var(--w) * 0.022); top: 50%; width: calc(var(--w) * 0.025); height: calc(var(--w) * 0.025);
  margin-top: calc(var(--w) * -0.0125); border-radius: 50%; background: var(--fucsia);
}
.nav-etiqueta-texto {
  display: block; font-family: var(--mano); color: var(--tinta); font-size: calc(var(--w) * 0.1); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 2.2em;
}
.nav-etiqueta-texto.escribiendo::after { content: "|"; animation: navCursor 0.6s steps(1) infinite; color: var(--fucsia); }
@keyframes navCursor { 50% { opacity: 0; } }

/* La tapa: su borde de arriba es la bisagra, sobre la arista trasera. */
.nav-tapa {
  position: absolute; left: calc(var(--w) * -0.03); top: 0; width: calc(var(--w) * 1.06); height: calc(var(--d) * 1.06);
  transform-origin: 50% 0; transform-style: preserve-3d;
  transform: translateY(-1px) translateZ(calc(var(--d) * -0.53)) rotateX(var(--tapa));
  background: var(--c-tapa); transition: --tapa var(--at-dur-celebracion) var(--at-ease-salida);
}
.nav-tapa { backface-visibility: hidden; }
.nav-tapa::before, .nav-tapa::after { content: ""; position: absolute; background: var(--c-cinta); backface-visibility: hidden; }
/* Abierta, la cinta de encima mira hacia atras y no se ve: se apaga, o se
   trasluce por el borde del forro. */
.nav-caja:is([data-estado="abierta"], [data-estado="entreabierta"]) .nav-tapa::before,
.nav-caja:is([data-estado="abierta"], [data-estado="entreabierta"]) .nav-tapa::after,
.nav-caja:is([data-estado="abierta"], [data-estado="entreabierta"]) .nav-labio-der .nav-cinta-v,
.nav-caja:is([data-estado="abierta"], [data-estado="entreabierta"]) .nav-lazo { visibility: hidden; }
/* El forro: la cara de abajo de la tapa, la que se ve cuando esta abierta. */
.nav-tapa-forro { position: absolute; inset: -2px; background: var(--c-dentro); transform: rotateX(180deg) translateZ(4px); backface-visibility: hidden; }
.nav-tapa::before { top: 0; bottom: 0; left: 50%; width: 14.2%; transform: translateX(-50%) translateZ(1px); }
.nav-tapa::after { left: 0; right: 0; top: 50%; height: 14%; transform: translateY(-50%) translateZ(1px); }
.nav-labio { position: absolute; background: var(--c-labio); }
.nav-labio-frente { left: 0; right: 0; top: 100%; height: calc(var(--w) * 0.14); transform-origin: 50% 0; transform: rotateX(-90deg); }
.nav-labio-izq { left: 0; top: 0; bottom: 0; width: calc(var(--w) * 0.14); transform-origin: 0 50%; transform: rotateY(90deg); background: var(--c-sombra); }
.nav-labio-der { right: 0; top: 0; bottom: 0; width: calc(var(--w) * 0.14); transform-origin: 100% 50%; transform: rotateY(-90deg); background: var(--c-lado); }
.nav-labio-der .nav-cinta-v { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 14%; transform: translateY(-50%); background: var(--c-cinta-lado); }

/* El lazo, parado sobre el centro de la tapa y mirando al frente. */
.nav-lazo {
  position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 0.5); height: calc(var(--w) * 0.26);
  margin: calc(var(--w) * -0.26) 0 0 calc(var(--w) * -0.25); transform-origin: 50% 100%; transform: rotateX(-90deg);
}
.nav-lazo i {
  position: absolute; bottom: 0; width: 50%; height: 100%; border: calc(var(--w) * 0.055) solid var(--c-cinta); border-radius: 50% 50% 45% 45%;
}
.nav-lazo i:first-child { left: 2%; transform: rotate(-22deg); transform-origin: 100% 100%; }
.nav-lazo i:nth-child(2) { right: 2%; transform: rotate(22deg); transform-origin: 0 100%; }
.nav-lazo b {
  position: absolute; left: 50%; bottom: -8%; width: 22%; height: 38%; transform: translateX(-50%); border-radius: 30%; background: var(--c-cinta-lado);
}
.nav-caja[data-estado="cerrada"] .nav-lazo { animation: navAmarrar var(--at-dur-lenta) var(--at-ease-salida) both; }
@keyframes navAmarrar { from { transform: rotateX(-90deg) scale(0.2); } 60% { transform: rotateX(-90deg) scale(1.2); } }

/* Estados de la tapa. */
.nav-caja[data-estado="abierta"] { --tapa: 205deg; }
.nav-caja[data-estado="entreabierta"] { --tapa: 150deg; }
.nav-caja[data-estado="cerrada"] { --tapa: 90deg; }
.nav-caja[data-estado="tiembla-1"] { --tapa: 97deg; }
.nav-caja[data-estado="tiembla-2"] { --tapa: 104deg; }
.nav-caja[data-estado="tiembla-3"] { --tapa: 112deg; }
.nav-caja[data-estado="estallada"] { --tapa: 112deg; }
.nav-caja[data-estado="estallada"] .nav-tapa { animation: navVuela 1100ms var(--at-ease-salida) forwards; }
@keyframes navVuela {
  to {
    transform: translateY(calc(var(--w) * -2.6)) translateX(calc(var(--w) * -0.9)) translateZ(calc(var(--d) * -0.53)) rotateX(320deg) rotateZ(-50deg);
    opacity: 0;
  }
}

/* Lo de adentro: esferas que miran siempre a la camara. */
.nav-dentro { position: absolute; inset: 0; transform-style: preserve-3d; }
.nav-dentro .nav-bola {
  position: absolute; width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.3); font-size: calc(var(--w) * 0.14);
  left: var(--x); top: var(--y); margin-left: calc(var(--w) * -0.15);
  transform: translateZ(var(--z)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)) rotate(var(--g));
  box-shadow: inset calc(var(--w) * -0.025) calc(var(--w) * -0.03) 0 var(--nav-sombra);
}
.nav-dentro .nav-bola .nav-bola-gancho { width: 26%; height: 14%; top: -9%; margin-left: -13%; }
.nav-dentro .nav-bola.cae { animation: navCaeDentro 650ms var(--at-ease-salida) both; }
@keyframes navCaeDentro { from { translate: 0 calc(var(--w) * -1.4); } 55% { translate: 0 calc(var(--w) * 0.05); } }
.nav-dentro .nav-bola.sale { animation: navSaleDentro var(--at-dur-base) var(--at-ease-entrada) forwards; }
@keyframes navSaleDentro { to { translate: 0 calc(var(--w) * -1.2); opacity: 0; } }

/* Gestos planos de la caja entera. */
.nav-caja.traga { animation: navTraga var(--at-dur-lenta) var(--at-ease-salida); }
@keyframes navTraga { 25% { transform: scale(1.1, 0.86) translateY(6%); } 55% { transform: scale(0.95, 1.07) translateY(-4%); } }
.nav-caja.salta { animation: navSaltito 600ms var(--at-ease-salida); }
@keyframes navSaltito { 35% { transform: translateY(-18%) rotate(-3deg); } 70% { transform: translateY(2%) scale(1.04, 0.96); } }
.nav-caja[data-estado="tiembla-1"] { animation: navTiembla 450ms ease-in-out; }
.nav-caja[data-estado="tiembla-2"] { animation: navTiembla2 500ms ease-in-out; }
.nav-caja[data-estado="tiembla-3"] { animation: navTiembla3 350ms linear infinite; }
@keyframes navTiembla { 20% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes navTiembla2 {
  15% { transform: rotate(-8deg) translateX(-4%); } 35% { transform: rotate(7deg) translateX(4%) translateY(-6%); }
  60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); }
}
@keyframes navTiembla3 {
  0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-9deg) translate(-4%, -6%); }
  50% { transform: rotate(8deg) translate(4%, -2%); } 75% { transform: rotate(-6deg) translate(-2%, -8%); }
}
.nav-caja[data-estado="estallada"] { animation: navEstalla var(--at-dur-sello) var(--at-ease-salida); }
@keyframes navEstalla { 20% { transform: scale(1.18, 0.8); } 55% { transform: scale(0.94, 1.1) translateY(-6%); } }

.nav-sombra {
  position: absolute; left: 50%; bottom: calc(var(--w) * 0.12); width: calc(var(--w) * 1.3); height: calc(var(--w) * 0.2);
  margin-left: calc(var(--w) * -0.65); border-radius: 50%; background: var(--at-color-velo); z-index: 1;
}
.nav-halo {
  position: absolute; left: 50%; top: 52%; width: calc(var(--w) * 1.5); height: calc(var(--w) * 1.5);
  margin: calc(var(--w) * -0.75) 0 0 calc(var(--w) * -0.75); border-radius: 50%; background: var(--fucsia-claro); opacity: 0.14; z-index: 0;
}
/* Los rayos: 18 cuñas planas de un solo color que giran detras de la caja (sin degradado). */
.nav-rayos {
  position: absolute; left: 50%; top: 52%; width: calc(var(--w) * 5); height: calc(var(--w) * 5); margin: calc(var(--w) * -2.5) 0 0 calc(var(--w) * -2.5);
  background: var(--at-color-aviso-fondo);
  clip-path: polygon(50% 50%, 100.0% 50.0%, 99.5% 57.0%, 50% 50%, 97.0% 67.1%, 94.1% 73.5%, 50% 50%, 88.3% 82.1%, 83.5% 87.2%, 50% 50%, 75.0% 93.3%, 68.7% 96.4%, 50% 50%, 58.7% 99.2%, 51.7% 100.0%, 50% 50%, 41.3% 99.2%, 34.5% 97.6%, 50% 50%, 25.0% 93.3%, 19.2% 89.4%, 50% 50%, 11.7% 82.1%, 7.6% 76.5%, 50% 50%, 3.0% 67.1%, 1.1% 60.4%, 50% 50%, 0.0% 50.0%, 0.5% 43.0%, 50% 50%, 3.0% 32.9%, 5.9% 26.5%, 50% 50%, 11.7% 17.9%, 16.5% 12.8%, 50% 50%, 25.0% 6.7%, 31.3% 3.6%, 50% 50%, 41.3% 0.8%, 48.3% 0.0%, 50% 50%, 58.7% 0.8%, 65.5% 2.4%, 50% 50%, 75.0% 6.7%, 80.8% 10.6%, 50% 50%, 88.3% 17.9%, 92.4% 23.5%, 50% 50%, 97.0% 32.9%, 98.9% 39.6%, 50% 50%);
  opacity: 0; transform: scale(0.3); transition: opacity var(--at-dur-lenta) var(--at-ease-estandar), transform var(--at-dur-celebracion) var(--at-ease-salida); z-index: 0; pointer-events: none;
  animation: navGirar 30s linear infinite;
}
@keyframes navGirar { to { rotate: 360deg; } }
.nav-escenario[data-luz="1"] .nav-rayos { opacity: 0.04; transform: scale(0.5); }
.nav-escenario[data-luz="2"] .nav-rayos { opacity: 0.08; transform: scale(0.75); }
.nav-escenario[data-luz="3"] .nav-rayos { opacity: 0.12; transform: scale(1); animation-duration: 8s; }
.nav-escenario[data-luz="4"] .nav-rayos { opacity: 0.12; transform: scale(1.35); animation-duration: 20s; }

/* La onda de cada toque. */
.nav-onda {
  position: absolute; left: 50%; top: 55%; width: calc(var(--w) * 0.8); height: calc(var(--w) * 0.8); margin: calc(var(--w) * -0.4) 0 0 calc(var(--w) * -0.4);
  border-radius: 50%; border: 4px solid var(--rosa-papel); pointer-events: none; z-index: 1; animation: navOnda 900ms ease-out forwards;
}
@keyframes navOnda { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }

/* =================================================== con script: portada */

.nav-escena.js .nav-nieve { display: none; }
.nav-escena.js .nav-cielo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.nav-escena.js .nav-solo-js { display: block; }
.nav-escena.js .nav-mesa-texto { display: none; }

.nav-escena.js:not(.inmersiva) {
  min-height: calc(100svh - 73px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; padding: var(--at-esp-9) max(var(--margen), calc((100% - var(--at-ancho-contenido-web)) / 2 + var(--margen)));
  column-gap: var(--at-esp-8);
}
.nav-escena.js:not(.inmersiva) .nav-cabeza { text-align: left; padding: 0; max-width: none; margin: 0; }
.nav-escena.js:not(.inmersiva) .nav-intro { margin-left: 0; }
.nav-escena.js:not(.inmersiva) .nav-taller { margin: 0; padding: 0; display: block; }
.nav-escena.js:not(.inmersiva) .nav-pasos { display: none; }
.nav-escena.js:not(.inmersiva) .nav-mesa { position: static; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-escena.js:not(.inmersiva) .nav-mesa { --w: 290px; }

.nav-empezar { margin-top: var(--at-esp-8); }
.nav-empezar p { color: var(--nav-suave); font: var(--at-texto-cuerpo-fuerte); font-weight: 700; margin: var(--at-esp-3) 0 0; }
.nav-boton-empezar { position: relative; font-size: 18px; padding: var(--at-esp-5) var(--at-esp-8); min-height: var(--at-tactil-min); }
/* El pulso: un aro que crece y se desvanece (transform y opacity, no sombra). */
.nav-boton-empezar::after, .nav-icono.llama::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--rosa-papel); pointer-events: none;
  animation: navAnillo 2400ms var(--at-ease-salida) infinite;
}
.nav-icono.llama::after { animation-duration: 1400ms; animation-iteration-count: 4; }
@keyframes navAnillo { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.18); opacity: 0; } }

/* Esferas de adorno que flotan alrededor de la caja en la portada. */
.nav-flotan { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.nav-flotan .nav-bola {
  position: absolute; width: calc(var(--w) * 0.2); height: calc(var(--w) * 0.2); font-size: calc(var(--w) * 0.1);
  left: var(--x); top: var(--y); animation: navFlota var(--v) ease-in-out infinite alternate; animation-delay: var(--r);
}
@keyframes navFlota { from { transform: translateY(-10px) rotate(-8deg); } to { transform: translateY(12px) rotate(8deg); } }
.nav-escena.inmersiva .nav-flotan { display: none; }

/* ================================================ con script: inmersiva */

body.nav-quieto { overflow: hidden; }
.nav-escena.inmersiva {
  position: fixed; inset: 0; z-index: var(--at-z-modal); padding: 0; display: flex; flex-direction: column; height: 100dvh;
  animation: atFundido var(--at-dur-lenta) var(--at-ease-salida);
}
.nav-escena.inmersiva .nav-cabeza { display: none; }

.nav-escena.inmersiva .nav-barra {
  display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-3) max(var(--at-esp-4), calc((100% - var(--at-ancho-contenido-web)) / 2 + var(--margen)));
  padding-top: calc(var(--at-esp-3) + env(safe-area-inset-top)); flex: none; position: relative; z-index: 5;
}
.nav-progreso { display: flex; gap: 6px; list-style: none; margin: 0 auto 0 0; padding: 0; min-width: 0; }
.nav-progreso button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--at-esp-2); border: 0; background: var(--nav-cristal-1); color: var(--nav-suave);
  font: var(--at-texto-cuerpo-fuerte); font-weight: 800; min-height: var(--at-tactil-min); min-width: var(--at-tactil-min); padding: 0 var(--at-esp-4) 0 10px;
  border-radius: var(--at-radio-capsula); cursor: pointer; white-space: nowrap;
  transition: background-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.nav-progreso button:disabled { cursor: default; }
.nav-progreso button span {
  width: 24px; height: 24px; border-radius: 50%; background: var(--nav-cristal-2); display: inline-flex; align-items: center; justify-content: center; font: var(--at-texto-mono);
}
.nav-progreso .hecho span { background: var(--verde-fondo); color: var(--verde-texto); }
.nav-progreso .actual { background: var(--at-color-superficie); color: var(--fucsia); }
.nav-progreso .actual span { background: var(--fucsia); color: var(--at-color-superficie); }
.nav-icono {
  position: relative; width: var(--at-tactil-min); height: var(--at-tactil-min); flex: none; border-radius: 50%; border: 0; background: var(--nav-cristal-2); color: var(--at-color-superficie);
  font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.nav-icono svg { display: block; }
.nav-icono .nav-tacha { display: none; }
.nav-icono.apagado .nav-tacha { display: inline; }
.nav-icono[data-salir] { font-size: 28px; }
.nav-icono:hover { background: var(--nav-cristal-3); }

.nav-escena.inmersiva .nav-taller {
  flex: 1; min-height: 0; margin: 0 auto; padding: 0 var(--margen); position: relative;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--at-esp-8); align-items: stretch;
}
.nav-escena.inmersiva .nav-pasos { display: block; overflow-y: auto; min-height: 0; padding: var(--at-esp-3) var(--at-esp-1) 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nav-cristal-3) transparent; }
.nav-escena.inmersiva .nav-paso { display: none; border: 0; background: none; padding: 0; min-height: 100%; flex-direction: column; }
.nav-escena[data-fase="para"] [data-paso="para"],
.nav-escena[data-fase="gustos"] [data-paso="gustos"],
.nav-escena[data-fase="afinar"] [data-paso="afinar"] { display: flex; animation: navEscena var(--at-dur-lenta) var(--at-ease-salida) both; }
@keyframes navEscena { from { opacity: 0; transform: translateX(40px); } }
.nav-escena.inmersiva .nav-paso legend { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin-bottom: var(--at-esp-3); }
.nav-escena.inmersiva .nav-paso-n { display: none; }
.nav-escena.inmersiva .nav-chip span { min-height: 52px; padding: 0 var(--at-esp-5); }
.nav-escena.inmersiva .nav-chip { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; animation-delay: calc(var(--n, 0) * 40ms); }
.nav-escena.inmersiva .nav-nombre { margin-top: var(--at-esp-2); }

.nav-escena.inmersiva .nav-paso-pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--at-esp-3); margin-top: auto;
  position: sticky; bottom: 0; padding: var(--at-esp-4) 0 calc(var(--at-esp-4) + env(safe-area-inset-bottom)); background: var(--tinta); z-index: 2;
}
.nav-paso-pie .boton { min-height: var(--at-tactil-min); }
.nav-paso-pie .boton[aria-disabled="true"] { background: var(--nav-cristal-2); color: var(--nav-tenue); cursor: not-allowed; }
.nav-paso-pie .boton.fantasma { color: var(--nav-suave); }
.nav-paso-pie .boton.fantasma:hover { color: var(--at-color-superficie); }
.nav-cuenta { color: var(--at-color-superficie); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; text-align: center; }

.nav-escena.inmersiva .nav-mesa {
  position: relative; top: auto; background: none; border: 0; padding: 0; justify-content: center; min-height: 0; gap: 6px;
}
.nav-escena.inmersiva .nav-mesa { --w: min(300px, 34vh); }
.nav-mesa-titulo { margin: 0; color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); text-align: center; text-wrap: balance; }
.nav-pista { margin: 0; color: var(--rosa-papel); font: var(--at-texto-titulo-2); font-weight: 800; text-align: center; min-height: 1.4em; }
.nav-escena[data-fase="abrir"] .nav-pista { animation: navPista 1300ms ease-in-out infinite; }
@keyframes navPista { 50% { opacity: 0.5; transform: scale(0.97); } }

/* Abrir: se va el panel y la caja manda. */
.nav-escena[data-fase="abrir"] .nav-pasos,
.nav-escena[data-fase="revelado"] .nav-pasos { display: none; }
.nav-escena[data-fase="abrir"] .nav-taller,
.nav-escena[data-fase="revelado"] .nav-taller { grid-template-columns: minmax(0, 1fr); }
.nav-escena[data-fase="abrir"] .nav-mesa { --w: min(340px, 38vh); cursor: pointer; }
.nav-escena[data-fase="abrir"] .nav-escenario { cursor: pointer; }
.nav-escena[data-fase="abrir"] .nav-halo { animation: navHalo 1600ms ease-in-out infinite; }
@keyframes navHalo { 50% { transform: scale(1.15); opacity: 0.24; } }

/* Revelado: la caja se queda chica atras y las cartas mandan. */
.nav-escena[data-fase="revelado"] .nav-mesa { opacity: 0.25; transform: scale(0.6) translateY(35%); transition: opacity var(--at-dur-celebracion) var(--at-ease-estandar), transform var(--at-dur-celebracion) var(--at-ease-salida); pointer-events: none; }
.nav-escena[data-fase="revelado"] .nav-mesa-titulo, .nav-escena[data-fase="revelado"] .nav-pista { visibility: hidden; }
.nav-escena[data-fase="revelado"] .nav-revelado {
  display: block; position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--at-esp-2) var(--margen) var(--at-esp-9); z-index: 4;
  scrollbar-width: thin; scrollbar-color: var(--nav-cristal-3) transparent;
}

.nav-revelado-cabeza { text-align: center; margin: var(--at-esp-1) auto var(--at-esp-5); max-width: 760px; }
.nav-revelado-cabeza .ceja { color: var(--fucsia-claro); margin: 0; }
.nav-revelado-cabeza h2 { font: var(--at-texto-web-titulo-1); color: var(--at-color-superficie); margin: 6px 0 0; letter-spacing: var(--at-tracking-titulo); text-wrap: balance; }
.nav-revelado-cabeza, .nav-acciones { animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }

/* -------------------------------------------------------------- las cartas */

.nav-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-5); align-items: start; max-width: 1080px; margin: 0 auto; }
.nav-carta { perspective: 1400px; position: relative; }
/* Se mide primero y despues sale: `.sale` la lanza desde la boca de la caja. */
.nav-revelado .nav-carta { opacity: 0; }
.nav-revelado .nav-carta.sale { opacity: 1; animation: navSaleCarta 950ms var(--at-ease-salida) both; animation-delay: calc(var(--n) * 170ms); }
@keyframes navSaleCarta {
  from { transform: translate(var(--dx, 0), var(--dy, 200px)) scale(0.12) rotate(var(--giro, 0deg)); opacity: 0; }
  12% { opacity: 1; }
}
.nav-carta-giro { position: relative; transform-style: preserve-3d; transition: transform var(--at-dur-celebracion) var(--at-ease-salida); }
.nav-carta.volteada .nav-carta-giro { transform: rotateY(180deg); }
.nav-carta .nav-tarjeta { transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nav-dorso {
  position: absolute; inset: 0; border-radius: var(--at-radio-xl); background-color: var(--fucsia); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-esp-4); box-shadow: var(--at-elev-3);
  /* Motivo de estrellas: SVG de ilustracion, pintado con la tinta de marca-papel. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 13l2.4 6.6L31 22l-6.6 2.4L22 31l-2.4-6.6L13 22l6.6-2.4z' fill='%23F6D9EA' fill-opacity='.22'/%3E%3C/svg%3E");
  border: 6px solid var(--at-color-superficie); overflow: hidden;
}
.nav-dorso img { width: 46%; height: auto; }
.nav-dorso span { font-family: var(--mano); color: var(--at-color-superficie); font-size: var(--at-esp-8); }
.nav-carta.late .nav-dorso { animation: navLate 500ms ease-in-out infinite; }
@keyframes navLate { 50% { transform: scale(1.03) rotate(-1deg); } }

/* En escritorio la primera va al centro, un poco mas alta. */
@media (min-width: 761px) {
  .nav-revelado .nav-carta:nth-child(1) { order: 2; margin-top: -20px; z-index: 1; }
  .nav-revelado .nav-carta:nth-child(2) { order: 1; margin-top: 20px; }
  .nav-revelado .nav-carta:nth-child(3) { order: 3; margin-top: 20px; }
}

.nav-tarjeta {
  position: relative; background: var(--blanco); color: var(--texto); border-radius: var(--at-radio-xl); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--at-elev-3);
}
.nav-tarjeta-primera { outline: 4px solid var(--rosa-papel); }
/* La corona de la que mas atina: un aro que se abre y se desvanece. */
.nav-carta:has(.nav-tarjeta-primera)::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--at-radio-xl); border: 4px solid var(--rosa-papel); pointer-events: none; opacity: 0;
}
.nav-carta.volteada:has(.nav-tarjeta-primera)::after { animation: navCorona 1200ms ease-out 500ms; }
@keyframes navCorona { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.08); opacity: 0; } }
.nav-sello {
  position: absolute; top: var(--at-esp-3); left: var(--at-esp-3); z-index: 1; background: var(--fucsia); color: var(--at-color-superficie); font: var(--at-texto-mono); font-weight: 700;
  padding: 6px var(--at-esp-3); border-radius: var(--at-radio-capsula); box-shadow: var(--at-elev-1);
}
.nav-carta.volteada .nav-sello { animation: atPop var(--at-dur-lenta) var(--at-ease-salida) 450ms both; }
.nav-tarjeta-foto { display: block; aspect-ratio: 4 / 3; background: var(--rosa-suave); }
.nav-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto propia: las esferas con las que coincide, colgando sobre su color. */
.nav-tarjeta-foto.sin-foto { position: relative; overflow: hidden; display: flex; justify-content: center; }
.nav-tarjeta-foto.sin-foto[data-tono="0"] { background: var(--rosa-papel); }
.nav-tarjeta-foto.sin-foto[data-tono="1"] { background: var(--azul-fondo); }
.nav-tarjeta-foto.sin-foto[data-tono="2"] { background: var(--verde-fondo); }
.nav-tarjeta-foto.sin-foto[data-tono="3"] { background: var(--ambar-fondo); }
.nav-colgadas { position: absolute; inset: 0; display: flex; justify-content: space-evenly; padding: 0 10%; }
.nav-colgadas .nav-cuerda { position: absolute; left: 0; top: 4px; width: 100%; height: 40px; }
.nav-colgadas .nav-cuerda path { stroke: var(--fucsia); stroke-width: 3; fill: none; opacity: 0.55; }
.nav-colgadas .nav-colgante { margin-top: 20px; animation-duration: var(--v); }
.nav-colgadas .nav-bola { width: 76px; height: 76px; font-size: 36px; }
.nav-colgadas .nav-colgante:nth-child(3) { margin-top: 28px; }
.nav-colgadas .nav-colgante:nth-child(4) { margin-top: 16px; }
.nav-foto-categoria {
  position: absolute; left: var(--at-esp-4); bottom: var(--at-esp-3); font-family: var(--mano); font-size: var(--at-esp-8); line-height: 1; color: var(--tinta); opacity: 0.8;
  transform: rotate(-4deg);
}
.nav-carta.volteada .nav-colgadas .nav-bola { animation: navCuelga 800ms var(--at-ease-salida) both; animation-delay: calc(0.4s + var(--i, 0) * 0.12s); }
@keyframes navCuelga { from { transform: translateY(-80px) scale(0.4); opacity: 0; } }

.nav-tarjeta-texto { padding: var(--at-esp-4) var(--at-esp-5) var(--at-esp-5); display: flex; flex-direction: column; gap: var(--at-esp-2); flex: 1; }
.nav-tarjeta-aliado { margin: 0; font: var(--at-texto-meta); font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.nav-tarjeta h3 { margin: 0; font: var(--at-texto-titulo-2); font-size: 19px; letter-spacing: var(--at-tracking-titulo); }
.nav-tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.nav-tarjeta h3 a:hover { color: var(--fucsia); }
.nav-tarjeta-porque {
  margin: 0; font: var(--at-texto-cuerpo-fuerte); font-weight: 500; color: var(--texto); background: var(--crema); border-radius: var(--at-radio-s); padding: var(--at-esp-3);
  border-left: 3px solid var(--fucsia-claro);
}
.nav-tarjeta-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--at-esp-3); padding-top: 6px; }
.nav-tarjeta-pie b { color: var(--tinta); font: var(--at-texto-titulo-2); font-size: 18px; font-weight: 800; }
.nav-tarjeta-pie .boton { min-height: var(--at-tactil-min); }

.nav-acciones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); justify-content: center; margin-top: var(--at-esp-8); }
.nav-acciones .boton { min-height: var(--at-tactil-min); }
.nav-sin { font: var(--at-texto-web-cuerpo); color: var(--nav-suave); text-align: center; max-width: 34em; margin: 0 auto; }
.nav-sin-tino { display: flex; flex-direction: column; align-items: center; gap: var(--at-esp-3); padding-top: var(--at-esp-5); }
.nav-sin-tino img { width: 84px; height: auto; animation: atTino 3200ms var(--at-ease-estandar) infinite both; }
.nav-momentos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--at-esp-2); margin-top: var(--at-esp-2); }

.nav-destello { position: fixed; inset: 0; background: var(--at-color-fondo); pointer-events: none; z-index: 6; opacity: 0; }
.nav-escena.js .nav-destello { display: block; }
.nav-destello.activo { animation: navDestello 750ms ease-out; }
@keyframes navDestello { 0% { opacity: 0; } 12% { opacity: 0.92; } 100% { opacity: 0; } }
.nav-escena.js .nav-lienzo { display: block; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }

/* La esfera que vuela del arbol a la caja. */
.nav-vuela { position: fixed; z-index: calc(var(--at-z-modal) + 1); pointer-events: none; margin: 0; left: 0; top: 0; }

/* Sin script: la caja abierta va debajo, en claro. */
.nav-resultado-estatico { background: var(--crema); padding: var(--at-esp-10) 0; }
.nav-resultado-estatico h2 { text-align: center; margin: 6px 0 var(--at-esp-6); }
.nav-resultado-estatico .ceja { text-align: center; }
.nav-resultado-estatico .nav-sin { color: var(--texto); }

/* -------------------------------------------------------------- como elige */

.nav-como { padding: var(--at-esp-10) 0; background: var(--crema); }
.nav-como-rejilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--at-esp-9); align-items: start; }
.nav-como h2 { margin: var(--at-esp-2) 0 0; }
.nav-como-lista { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: var(--at-esp-4); }
.nav-como-lista li {
  counter-increment: paso; position: relative; padding: var(--at-esp-5) var(--at-esp-5) var(--at-esp-5) 64px; background: var(--blanco); border-radius: var(--at-radio-l);
  border: 1px solid var(--borde); font: var(--at-texto-web-cuerpo);
}
.nav-como-lista li::before {
  content: counter(paso); position: absolute; left: var(--at-esp-5); top: var(--at-esp-5); width: 32px; height: 32px; border-radius: 50%;
  background: var(--rosa-papel); color: var(--fucsia); font: var(--at-texto-cuerpo-fuerte); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.nav-como-lista b { color: var(--tinta); display: block; }

/* ============================================================= responsive
 * Puntos de quiebre del manual: celular hasta 760, tablet hasta 1180. */

@media (max-width: 1180px) {
  .nav-momentos-elegir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-taller { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--at-esp-6); }
  .nav-progreso button { font-size: 0; padding: 0; gap: 0; }
  .nav-progreso .actual { font: var(--at-texto-cuerpo-fuerte); font-weight: 800; padding: 0 var(--at-esp-4) 0 10px; gap: var(--at-esp-2); }
  .nav-tarjetas { gap: var(--at-esp-3); }
  .nav-como-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--at-esp-5); }
  .nav-escena.js:not(.inmersiva) .nav-mesa { --w: 240px; }
}

/*
 * El celular: el panel arriba con su scroll, la caja abajo siempre a la vista,
 * para ver caer cada esfera sin mover el dedo.
 */
@media (max-width: 760px) {
  .nav-escena { padding: var(--at-esp-8) 0 var(--at-esp-9); }
  .nav-escena h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .nav-intro { font: var(--at-texto-web-cuerpo); }
  .nav-taller { grid-template-columns: minmax(0, 1fr); margin-top: var(--at-esp-8); gap: var(--at-esp-4); }
  .nav-mesa { position: static; }
  .nav-paso { padding: var(--at-esp-5) var(--at-esp-4); }
  .nav-bola { width: 56px; height: 56px; font-size: var(--at-esp-7); }
  .nav-esfera input:checked ~ .nav-colgante::after { width: 56px; height: 56px; margin-left: -28px; }
  .nav-esfera-nombre { font: var(--at-texto-meta); font-weight: 700; }

  .nav-escena.js:not(.inmersiva) { grid-template-columns: minmax(0, 1fr); padding: var(--at-esp-6) var(--margen) var(--at-esp-8); min-height: 0; text-align: center; }
  .nav-escena.js:not(.inmersiva) .nav-cabeza { text-align: center; }
  .nav-escena.js:not(.inmersiva) .nav-intro { margin: var(--at-esp-4) auto 0; }
  .nav-escena.js:not(.inmersiva) .nav-taller { order: -1; }
  .nav-escena.js:not(.inmersiva) .nav-mesa { --w: 150px; }
  .nav-escena.js:not(.inmersiva) .nav-escenario { height: calc(var(--w) * 1.75); }
  .nav-empezar { margin-top: var(--at-esp-5); }
  .nav-boton-empezar { width: 100%; justify-content: center; }

  .nav-escena.inmersiva .nav-barra { padding-left: var(--at-esp-3); padding-right: var(--at-esp-3); gap: 6px; }
  .nav-escena.inmersiva .nav-taller { display: flex; flex-direction: column; padding: 0 var(--at-esp-4); gap: 0; }
  .nav-escena.inmersiva .nav-pasos { flex: 1; padding-top: var(--at-esp-1); position: relative; z-index: 3; }
  .nav-escena.inmersiva .nav-paso legend { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .nav-escena.inmersiva .nav-chip span { min-height: 48px; padding: 0 var(--at-esp-4); }
  .nav-escena.inmersiva .nav-ayuda { margin-bottom: var(--at-esp-2); }
  .nav-escena.inmersiva .nav-mesa { flex: none; border-top: 1px solid var(--nav-cristal-2); margin: 0 calc(var(--at-esp-4) * -1); padding: 0 var(--at-esp-4); }
  .nav-escena.inmersiva .nav-mesa { --w: 118px; }
  .nav-escena.inmersiva .nav-escenario { height: calc(var(--w) * 1.8); }
  .nav-escena.inmersiva .nav-caja { margin-top: calc(var(--w) * 0.5); }
  /* En el celular la barra solo lleva los numeros: el titulo de la escena ya dice cual es. */
  .nav-progreso .actual { font-size: 0; padding: 0; gap: 0; }
  .nav-escena.inmersiva .nav-paso-pie { padding-bottom: var(--at-esp-3); }
  .nav-escena.inmersiva .nav-paso-pie .boton.grande { padding: var(--at-esp-3) var(--at-esp-5); }
  .nav-cuenta { font: var(--at-texto-meta); font-weight: 800; }
  .nav-momentos-elegir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-entrega { grid-template-columns: minmax(0, 1fr); gap: var(--at-esp-2); }
  /* El medidor, en el celular, es una pastilla sobre la caja. */
  .nav-escena.inmersiva .nav-medidor {
    position: absolute; left: var(--at-esp-3); top: var(--at-esp-3); width: auto; z-index: 3; background: var(--tinta);
    flex-direction: column; align-items: flex-start; gap: var(--at-esp-1); padding: var(--at-esp-2) var(--at-esp-3);
  }
  .nav-escena.inmersiva .nav-medidor-cifra b { font-size: var(--at-esp-6); }
  .nav-escena.inmersiva .nav-medidor-cifra span { font: var(--at-texto-mono); }
  .nav-escena.inmersiva .nav-medidor-texto strong { font: var(--at-texto-mono); font-weight: 700; color: var(--nav-suave); }
  .nav-escena.inmersiva .nav-medidor-texto > span:not(.nav-medidor-barra) { display: none; }
  .nav-escena.inmersiva .nav-medidor-barra { width: 64px; margin-top: 0; }
  .nav-escena.inmersiva .nav-medidor-texto { flex: none; }
  .nav-pregunta { grid-template-columns: minmax(0, 1fr); }
  .nav-pregunta img { display: none; }

  .nav-escena[data-fase="abrir"] .nav-mesa { flex: 1; border: 0; }
  .nav-escena[data-fase="abrir"] .nav-mesa { --w: 220px; }
  .nav-escena[data-fase="abrir"] .nav-escenario { height: calc(var(--w) * 1.85); }
  .nav-escena[data-fase="revelado"] .nav-mesa { display: none; }

  .nav-revelado-cabeza h2 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  /* Las cartas se pasan de lado con el dedo. */
  .nav-revelado .nav-tarjetas {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--at-esp-3); margin: 0 calc(var(--margen) * -1); padding: var(--at-esp-3) var(--margen) var(--at-esp-5);
    scrollbar-width: none;
  }
  .nav-revelado .nav-tarjetas::-webkit-scrollbar { display: none; }
  .nav-revelado .nav-carta { flex: 0 0 84%; scroll-snap-align: center; }
  .nav-resultado-estatico .nav-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .nav-como { padding: var(--at-esp-9) 0; }
}

/*
 * Movimiento reducido: la hoja global ya recorta duraciones; aqui se apagan los
 * bucles y los gestos de la caja por nombre, y se deja cada cosa en su estado
 * final. Sin nieve CSS, sin destello, sin tapa voladora.
 */
@media (prefers-reduced-motion: reduce) {
  .nav-nieve i, .nav-h1-acento, .nav-colgante, .nav-giro, .nav-boton-empezar::after, .nav-icono.llama::after, .nav-flotan .nav-bola, .nav-rayos,
  .nav-escena[data-fase="abrir"] .nav-pista, .nav-escena[data-fase="abrir"] .nav-halo, .nav-carta.late .nav-dorso, .nav-etiqueta-texto.escribiendo::after,
  .nav-medidor.pensando .nav-medidor-cifra b, .nav-sin-tino img, .nav-caja, .nav-caja.traga, .nav-caja.salta,
  .nav-caja[data-estado^="tiembla"], .nav-caja[data-estado="estallada"], .nav-caja[data-estado="cerrada"] .nav-lazo, .nav-onda,
  .nav-carta:has(.nav-tarjeta-primera)::after, .nav-dentro .nav-bola { animation: none !important; }
  .nav-nieve, .nav-destello, .nav-onda { display: none; }
  .nav-caja, .nav-tapa, .nav-carta-giro, .nav-giro { transition: none !important; }
  .nav-revelado .nav-carta.sale { animation: none !important; opacity: 1; }
  .nav-caja[data-estado="estallada"] .nav-tapa { opacity: 0; }
  .nav-escena[data-fase="revelado"] .nav-mesa { transition: none; }
}

/* Nosotros: parte de `capturas/09-nosotros.jpg`. Atineo al frente; las dos empresas, al final. UI/UX v4: tokens `--at-*`, sin degradados. */

.nos-hero {
  margin-top: var(--at-esp-7); padding: 56px; border-radius: var(--at-radio-hoja); background: var(--at-color-tinta); color: var(--at-color-superficie);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center;
}
.nos-hero h1 { color: var(--at-color-superficie); font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: balance; }
.nos-hero h1 em { font-style: normal; color: var(--at-color-marca-claro); }
.nos-hero .entrada { margin: var(--at-esp-6) 0 0; font: var(--at-texto-web-cuerpo); color: var(--at-color-superficie); opacity: 0.9; max-width: 34em; }
.nos-hero .entrada strong { color: var(--at-color-superficie); }
.nos-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--at-esp-8); border-top: 1px solid color-mix(in srgb, var(--at-color-superficie) 20%, transparent); }
.nos-cifras div { padding: var(--at-esp-5) var(--at-esp-4) 0 0; }
.nos-cifras div + div { padding-left: var(--at-esp-4); border-left: 1px solid color-mix(in srgb, var(--at-color-superficie) 20%, transparent); }
.nos-cifras b { display: block; font-weight: 800; font-size: 28px; color: var(--at-color-superficie); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nos-cifras span { display: block; font: var(--at-texto-cuerpo); color: var(--at-color-superficie); opacity: 0.85; margin-top: var(--at-esp-1); }

.nos-idea-marco { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--at-esp-4); padding: var(--at-esp-2) 0; }
.nos-aviso {
  margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--at-esp-2); padding: var(--at-esp-3) var(--at-esp-4);
  border-radius: var(--at-radio-m); background: color-mix(in srgb, var(--at-color-superficie) 14%, transparent); color: var(--at-color-superficie);
  font: var(--at-texto-cuerpo-fuerte); max-width: 330px; transform: rotate(-1.5deg);
}
.nos-aviso img { width: 20px; flex: none; }
.nos-idea {
  margin: 0; width: 100%; max-width: 380px; border-radius: var(--at-radio-xl); background: var(--at-color-superficie); color: var(--at-color-texto-2);
  padding: var(--at-esp-4); box-shadow: var(--at-elev-3); transform: rotate(1.5deg);
}
.nos-idea-cabeza { display: flex; align-items: center; gap: var(--at-esp-3); padding: var(--at-esp-1) var(--at-esp-1) var(--at-esp-3); }
.nos-idea-inicial { width: 36px; height: 36px; border-radius: var(--at-radio-capsula); display: grid; place-items: center; background: var(--at-color-marca-papel); color: var(--at-color-marca); font-weight: 800; }
.nos-idea-cabeza b { display: block; font-size: 14px; color: var(--at-color-tinta); line-height: 1.2; }
.nos-idea-cabeza span:not(.nos-idea-chip):not(.nos-idea-inicial) { display: block; font: var(--at-texto-meta); color: var(--at-color-texto-2); }
.nos-idea-chip { margin-left: auto; padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula); background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); font: var(--at-texto-meta); font-weight: 700; white-space: nowrap; }
.nos-idea-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--at-radio-m); background: var(--at-color-neutro-fondo); }
.nos-idea figcaption { padding: var(--at-esp-3) var(--at-esp-1) var(--at-esp-1); }
.nos-idea h3 { font: var(--at-texto-titulo-2); margin: 0; }
.nos-idea-meta { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: var(--at-esp-1) 0 0; }
.nos-idea-razon {
  display: flex; gap: var(--at-esp-2); align-items: flex-start; margin: var(--at-esp-3) 0 0; padding: var(--at-esp-3); border-radius: var(--at-radio-s);
  background: var(--at-color-marca-papel); color: var(--at-color-tinta); font: var(--at-texto-cuerpo);
}
.nos-idea-razon img { width: 18px; flex: none; margin-top: var(--at-esp-1); }
.nos-idea-acciones { display: flex; gap: var(--at-esp-2); margin-top: var(--at-esp-4); }
.nos-idea-acciones .boton { flex: 1; justify-content: center; padding: var(--at-esp-3); min-height: var(--at-tactil-min); font-size: 14px; pointer-events: none; }
.nos-nota { margin: var(--at-esp-1) 0 0; align-self: flex-end; font-family: var(--mano); font-size: 24px; line-height: 1.05; color: var(--at-color-superficie); transform: rotate(-4deg); }

/* -------------------------------------------------------------- manifiesto */

.nos-manifiesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 80px; }
.nos-manifiesto h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.nos-manifiesto-texto p { font: var(--at-texto-web-cuerpo); margin: 0 0 var(--at-esp-4); }
.nos-manifiesto-texto p:first-child { font-size: 20px; line-height: 1.5; color: var(--at-color-tinta); font-weight: 600; }
.nos-manifiesto-texto strong { color: var(--at-color-marca); }

/* ----------------------------------------------------------- lo que hacemos */

.nos-hacemos { list-style: none; margin: var(--at-esp-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); }
.nos-hacemos li { padding: var(--at-esp-7) var(--at-esp-6); border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.nos-hacemos span {
  width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-s); display: grid; place-items: center; font-weight: 800; font-size: 16px;
  background: var(--at-color-marca-papel); color: var(--at-color-marca);
}
.nos-hacemos li:nth-child(even) span { background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); }
.nos-hacemos h3 { font: var(--at-texto-titulo-2); margin: var(--at-esp-5) 0 0; }
.nos-hacemos p { font: var(--at-texto-cuerpo); font-size: 16px; margin: var(--at-esp-2) 0 0; }

/* ----------------------------------------------------------- prueba social */

.nos-prueba { margin-top: 80px; padding: var(--at-esp-10) 0; background: var(--at-color-marca-papel); }
.nos-prueba .nos-titulo > span { max-width: 26em; }
.nos-chats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); margin-top: var(--at-esp-8); align-items: start; }
/* Los mensajes son de clientes reales; se pintan con la tinta de Atineo, no con la paleta de otra app. */
.nos-chat { margin: 0; padding: var(--at-esp-4); border-radius: var(--at-radio-l); background: var(--at-color-tinta); display: flex; flex-direction: column; gap: var(--at-esp-2); box-shadow: var(--at-elev-1); }
.nos-chat:nth-child(even) { margin-top: var(--at-esp-8); }
.nos-chat figcaption { display: flex; align-items: center; gap: var(--at-esp-2); color: var(--at-color-superficie); font: var(--at-texto-meta); font-weight: 700; padding: var(--at-esp-1) var(--at-esp-1) var(--at-esp-2); border-bottom: 1px solid color-mix(in srgb, var(--at-color-superficie) 14%, transparent); }
.nos-chat figcaption small { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--at-color-marca-papel); }
.nos-avatar { width: 28px; height: 28px; border-radius: var(--at-radio-capsula); background: var(--at-color-texto-2); flex: none; }
.nos-chat blockquote {
  margin: 0; padding: var(--at-esp-3); border-radius: var(--at-radio-s); background: color-mix(in srgb, var(--at-color-superficie) 12%, transparent); color: var(--at-color-superficie);
  font: var(--at-texto-cuerpo);
}

/* ------------------------------------------------------------------ equipo */

.nos-bloque { padding-top: var(--at-esp-10); }
.nos-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--at-esp-5); flex-wrap: wrap; }
.nos-titulo .ceja { margin-bottom: var(--at-esp-2); }
.nos-titulo h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.nos-titulo > span { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.nos-fundadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-5); margin-top: var(--at-esp-8); }
.nos-persona {
  border-radius: var(--at-radio-xl); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--at-esp-6); align-items: center; padding: var(--at-esp-5);
}
.nos-retrato {
  width: 132px; height: 132px; border-radius: var(--at-radio-capsula); display: grid; place-items: center; background: var(--at-color-marca-papel); color: var(--at-color-marca);
  font-weight: 800; font-size: 52px; letter-spacing: var(--at-tracking-titulo);
}
img.nos-retrato { display: block; object-fit: cover; object-position: center 28%; }
.nos-persona h3 { font: var(--at-texto-titulo-2); font-size: 20px; margin: 0; }
.nos-rol { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: var(--at-esp-1) 0 0; }
.nos-persona blockquote { font-family: var(--mano); font-size: 22px; line-height: 1.2; color: var(--at-color-tinta); margin: var(--at-esp-3) 0 0; }

/* ------------------------------------------------------------- compromisos */

.nos-compromisos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; padding-top: var(--at-esp-10); }
.nos-compromisos-intro { position: sticky; top: 100px; }
.nos-compromisos-intro h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.nos-compromisos-intro p:last-child { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }
.nos-compromisos-intro strong { color: var(--at-color-tinta); }
.nos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.nos-lista li { display: grid; grid-template-columns: var(--at-tactil-min) minmax(0, 1fr); gap: var(--at-esp-4); padding: var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.nos-n { width: var(--at-tactil-min); height: var(--at-tactil-min); border-radius: var(--at-radio-s); display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--at-color-marca-papel); color: var(--at-color-marca); }
.nos-lista li:nth-child(even) .nos-n { background: var(--at-color-dato-fondo); color: var(--at-color-dato-fuerte); }
.nos-lista h3 { font: var(--at-texto-titulo-2); margin: 0; }
.nos-lista p { font: var(--at-texto-cuerpo); font-size: 16px; margin: var(--at-esp-1) 0 0; }

/* ----------------------------------------------------------------- aliados */

.nos-aliados {
  margin-top: var(--at-esp-10); border-radius: var(--at-radio-hoja); background: var(--at-color-tinta); color: var(--at-color-superficie); padding: var(--at-esp-9);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center;
}
.nos-aliados .ceja { margin-bottom: var(--at-esp-3); }
.nos-aliados h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.nos-aliados p { color: var(--at-color-superficie); opacity: 0.9; font: var(--at-texto-web-cuerpo); margin: var(--at-esp-3) 0 0; }
.enlace-rosa { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); margin-top: var(--at-esp-2); font-weight: 700; font-size: 16px; color: var(--at-color-marca-claro); }
.enlace-rosa:hover { color: var(--at-color-superficie); }
.nos-proceso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3); counter-reset: paso; }
.nos-proceso li { padding: var(--at-esp-5); border-radius: var(--at-radio-m); background: color-mix(in srgb, var(--at-color-superficie) 10%, transparent); counter-increment: paso; }
.nos-proceso li::before { content: "0" counter(paso); display: block; font: var(--at-texto-mono); letter-spacing: 0.14em; color: var(--at-color-marca-claro); margin-bottom: var(--at-esp-2); }
.nos-proceso b { display: block; font-weight: 800; font-size: 20px; color: var(--at-color-ok-fondo); line-height: 1.2; }
.nos-proceso li:nth-child(n+3) b { color: var(--at-color-marca-claro); }
.nos-proceso span { display: block; font: var(--at-texto-cuerpo); opacity: 0.9; margin-top: var(--at-esp-1); }

/* ---------------------------------------------------------------- respaldo */

.nos-respaldo {
  padding: 40px; border-radius: var(--at-radio-hoja); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 40px; align-items: center;
}
.nos-respaldo-intro .ceja { margin-bottom: var(--at-esp-3); }
.nos-respaldo h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: balance; }
.nos-respaldo-intro p:last-child { font: var(--at-texto-cuerpo); font-size: 16px; margin: var(--at-esp-3) 0 0; }
.nos-respaldo-intro strong { color: var(--at-color-tinta); }
.nos-casas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-4); }
.nos-casas article { border-radius: var(--at-radio-l); background: var(--at-color-fondo); border: 1px solid var(--at-color-borde); padding: var(--at-esp-6); display: flex; flex-direction: column; gap: var(--at-esp-3); }
.nos-casa-logo { width: auto; align-self: flex-start; }
.nos-casa-logo.tocco { height: 44px; }
.nos-casa-logo.mtech { height: 28px; margin: var(--at-esp-2) 0; }
.nos-casas p { font: var(--at-texto-cuerpo); margin: 0; }
.nos-casas strong { color: var(--at-color-tinta); }
.nos-casas dl { margin: 0; }
.nos-casas dt { font: var(--at-texto-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--at-color-texto-2); }
.nos-casas dd { margin: var(--at-esp-1) 0 0; font: var(--at-texto-cuerpo-fuerte); color: var(--at-color-tinta); }
.nos-casa-enlaces { margin-top: auto; display: flex; gap: var(--at-esp-4); flex-wrap: wrap; }
.nos-casa-enlaces a { font-weight: 700; font-size: 15px; color: var(--at-color-marca); min-height: var(--at-tactil-min); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ cierre */

.nos-cierre {
  margin: 48px 0 var(--at-esp-2); padding: 40px; border-radius: var(--at-radio-hoja); background: var(--at-color-marca); color: var(--at-color-superficie);
  display: flex; align-items: center; gap: var(--at-esp-8);
}
.nos-cierre > img { width: 80px; flex: none; }
.nos-cierre > div:nth-child(2) { flex: 1; }
.nos-cierre h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.nos-cierre p { color: var(--at-color-superficie); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-2) 0 0; }
.nos-cierre-accion { display: flex; flex-direction: column; gap: var(--at-esp-2); flex: none; }
.nos-cierre-accion .boton { border-color: var(--at-color-superficie); min-height: var(--at-tactil-min); }
.nos-cierre-accion span { font: var(--at-texto-meta); text-align: center; }

/* ------------------------------------------------------------ tablet y celular */

@media (max-width: 1180px) {
  .nos-hero, .nos-compromisos, .nos-aliados { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .nos-hero { padding: 40px; }
  .nos-hero h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .nos-chats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nos-fundadores, .nos-manifiesto, .nos-respaldo { grid-template-columns: 1fr; gap: var(--at-esp-6); }
  .nos-hacemos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nos-compromisos-intro { position: static; }
  .nos-cierre { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .nos-hero { margin-top: var(--at-esp-4); padding: var(--at-esp-7) var(--at-esp-5); }
  .nos-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .nos-idea { transform: none; }
  .nos-aviso { transform: none; }
  .nos-nota { font-size: 20px; }
  .nos-cifras { grid-template-columns: 1fr; }
  .nos-cifras div, .nos-cifras div + div { padding: var(--at-esp-4) 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--at-color-superficie) 20%, transparent); }
  .nos-cifras b { font-size: 24px; }
  .nos-prueba { margin-top: var(--at-esp-10); padding: var(--at-esp-9) 0; }
  .nos-manifiesto { padding-top: var(--at-esp-10); }
  .nos-manifiesto h2, .nos-titulo h2, .nos-compromisos-intro h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .nos-manifiesto-texto p:first-child { font-size: 18px; }
  .nos-hacemos, .nos-casas { grid-template-columns: 1fr; }
  .nos-respaldo { padding: var(--at-esp-6); }
  .nos-chats { grid-template-columns: 1fr; margin-top: var(--at-esp-7); }
  .nos-chat:nth-child(even) { margin-top: 0; }
  .nos-persona { grid-template-columns: 88px minmax(0, 1fr); gap: var(--at-esp-4); padding: var(--at-esp-5); }
  .nos-retrato { width: 88px; height: 88px; font-size: 36px; }
  .nos-aliados { padding: var(--at-esp-7); }
  .nos-proceso { grid-template-columns: 1fr 1fr; }
  .nos-cierre { flex-direction: column; align-items: flex-start; padding: var(--at-esp-7); }
  .nos-cierre-accion { width: 100%; }
}

/*
 * Ocasiones: `capturas/04-ocasiones.jpg` (indice) y `05-ocasion-cumpleanos.jpg`
 * (landing).
 *
 * Los colores de cada ocasion son presentacion y por eso viven aqui y no en
 * `Editorial`, que es texto. `--oca-color` pinta la etiqueta de la tarjeta;
 * `--oca-fondo` el hero y el llamado. Ambos salen de los tokens `--at-color-*`
 * (v4 solo tiene tinta, fucsia y azul planos para fondos de bloque).
 */

[data-ocasion="cumple"]      { --oca-color: var(--at-color-marca); --oca-fondo: var(--at-color-marca); }
[data-ocasion="aniversario"] { --oca-color: var(--at-color-dato-fuerte); --oca-fondo: var(--at-color-tinta); }
[data-ocasion="grado"]       { --oca-color: var(--at-color-aviso); --oca-fondo: var(--at-color-tinta); }
[data-ocasion="gracias"]     { --oca-color: var(--at-color-ok); --oca-fondo: var(--at-color-dato-fuerte); }
[data-ocasion="sinmotivo"]   { --oca-color: var(--at-color-marca); --oca-fondo: var(--at-color-marca-hover); }
[data-ocasion="navidad"]     { --oca-color: var(--at-color-error); --oca-fondo: var(--at-color-tinta); }

/* ---------------------------------------------------------------- indice */

.oca-indice-cabeza { padding-top: 56px; }
.oca-indice-cabeza > * { max-width: 720px; }
.oca-indice-cabeza h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.oca-indice-cabeza .entrada { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-5) 0 0; }

.oca-indice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-5); margin-top: var(--at-esp-9); padding-bottom: var(--at-esp-6); }

.oca-tarjeta {
  position: relative; display: flex; flex-direction: column; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
  border-radius: var(--at-radio-xl); overflow: hidden;
  transition: transform var(--at-dur-base) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-estandar), box-shadow var(--at-dur-base) var(--at-ease-salida);
}
.oca-tarjeta:hover { transform: translateY(-3px); border-color: var(--oca-color); box-shadow: var(--at-elev-1); }
.oca-tarjeta > img { height: 192px; width: 100%; object-fit: cover; background: var(--at-color-neutro-fondo); }
.oca-tarjeta-cuerpo { padding: var(--at-esp-5) var(--at-esp-6) var(--at-esp-6); display: flex; flex-direction: column; gap: var(--at-esp-2); flex: 1; }
.oca-cuando { font: var(--at-texto-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oca-color); }
.oca-tarjeta h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.oca-tarjeta h2 a { color: var(--at-color-tinta); display: inline-block; min-height: var(--at-tactil-min); }
/* Toda la tarjeta es el enlace, sin anidar un <a> sobre el resto. */
.oca-tarjeta h2 a::after { content: ""; position: absolute; inset: 0; }
.oca-tarjeta p { font: var(--at-texto-cuerpo); margin: 0; }
.oca-datos-mini { list-style: none; padding: 0; margin: var(--at-esp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.oca-datos-mini li { font: var(--at-texto-meta); padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--at-radio-capsula); background: var(--at-color-fondo); border: 1px solid var(--at-color-borde); color: var(--at-color-texto-2); }
.oca-datos-mini b { color: var(--at-color-tinta); font-weight: 700; }
.oca-cuenta { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin-top: auto; padding-top: var(--at-esp-2); font-variant-numeric: tabular-nums; }

.oca-indice + .contenido .cta-final { margin-top: 48px; }

/* ------------------------------------------------------------ landing: hero */

/* Las migas se pintan sobre el color del hero: la pagina arranca de color de
   borde a borde, como en la captura, sin una franja crema encima. */
#atineo-previo:has(> .oca-hero[data-ocasion="cumple"])      { --oca-fondo: var(--at-color-marca); }
#atineo-previo:has(> .oca-hero[data-ocasion="aniversario"]) { --oca-fondo: var(--at-color-tinta); }
#atineo-previo:has(> .oca-hero[data-ocasion="grado"])       { --oca-fondo: var(--at-color-tinta); }
#atineo-previo:has(> .oca-hero[data-ocasion="gracias"])     { --oca-fondo: var(--at-color-dato-fuerte); }
#atineo-previo:has(> .oca-hero[data-ocasion="sinmotivo"])   { --oca-fondo: var(--at-color-marca-hover); }
#atineo-previo:has(> .oca-hero[data-ocasion="navidad"])     { --oca-fondo: var(--at-color-tinta); }
/* Una franja plana del color arriba de todo, que las migas pisan y el hero
   continua. Con fondo en el propio contenedor de las migas quedaba una costura
   de un pixel entre los dos bloques. Va detras del contenido (z-index -1 dentro
   de un contexto propio), sin degradado. */
#atineo-previo:has(> .oca-hero) { position: relative; isolation: isolate; }
#atineo-previo:has(> .oca-hero)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: var(--oca-fondo); z-index: -1;
}
#atineo-previo:has(> .oca-hero) .migas,
#atineo-previo:has(> .oca-hero) .migas a,
#atineo-previo:has(> .oca-hero) .migas li + li::before { color: var(--at-color-superficie); }
#atineo-previo:has(> .oca-hero) .migas [aria-current="page"] { color: var(--at-color-superficie); }
#atineo-previo:has(> .oca-hero) .migas a:hover { color: var(--at-color-marca-papel); }

.oca-hero { background: var(--oca-fondo); color: var(--at-color-superficie); }
.oca-hero-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding-top: var(--at-esp-9); padding-bottom: 64px;
}
.oca-ceja { color: var(--at-color-superficie); opacity: 0.9; margin: 0; }
.oca-hero h1 { color: var(--at-color-superficie); font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-3) 0 0; text-wrap: pretty; }
.oca-intro { color: var(--at-color-superficie); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-5) 0 0; max-width: 30em; }
.oca-hero .botones { margin-top: var(--at-esp-8); }
.boton.blanco.oca-boton-tinta { color: var(--at-color-tinta); border-color: var(--at-color-superficie); }
.boton.blanco.oca-boton-tinta:hover { background: var(--at-color-fondo); color: var(--at-color-tinta); }
.oca-hero .boton { min-height: var(--at-tactil-min); }
.oca-hero .boton.borde-claro { padding: var(--at-esp-4) var(--at-esp-7); font-size: 16px; }

.oca-hero-foto { position: relative; height: 400px; }
.oca-hero-foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--at-radio-hoja); background: color-mix(in srgb, var(--at-color-superficie) 12%, transparent); }
.oca-hero-foto .globo-aviso { left: var(--at-esp-5); bottom: var(--at-esp-5); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); }
.oca-hero-foto .globo-aviso img { width: 32px; }
.oca-hero-foto .globo-aviso b { font-size: 14px; }
.oca-hero-foto .globo-aviso span { font-size: 12.5px; }

/* ----------------------------------------------------------- landing: datos */

.oca-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); padding-top: 48px; }
.oca-datos > div { padding: var(--at-esp-5) var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); display: flex; flex-direction: column; }
.oca-dato-titulo { font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.oca-datos b { font-weight: 800; font-size: 28px; line-height: 1.15; margin-top: var(--at-esp-2); color: var(--at-color-tinta); letter-spacing: var(--at-tracking-titulo); font-variant-numeric: tabular-nums; }
.oca-datos b.azul { color: var(--at-color-dato); }
.oca-datos b.fucsia { color: var(--at-color-marca); }
.oca-datos b + span { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin-top: var(--at-esp-1); }

/* ----------------------------------------------------------- landing: error */

.oca-error { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; }
.oca-error h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: pretty; }
.oca-error > div > p:not(.ceja) { font: var(--at-texto-web-cuerpo); margin: var(--at-esp-4) 0 0; }
.oca-consejos { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.oca-consejos li { display: flex; gap: var(--at-esp-3); align-items: flex-start; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); }
.oca-consejos img { width: 24px; flex: none; margin-top: var(--at-esp-1); }
.oca-consejos span { font: var(--at-texto-cuerpo); font-size: 16px; color: var(--at-color-tinta); }
.oca-momento { height: 380px; }
.oca-momento img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--at-radio-xl); background: var(--at-color-neutro-fondo); }

/* ------------------------------------------------------ landing: ideas y cta */

.oca-ideas-nota { font: var(--at-texto-cuerpo); margin: calc(var(--at-esp-2) * -1) 0 var(--at-esp-5); }

.oca-cta {
  margin-top: 56px; padding: 40px; border-radius: var(--at-radio-hoja); background: var(--oca-fondo); color: var(--at-color-superficie);
  display: flex; align-items: center; gap: var(--at-esp-8);
}
.oca-cta > img { width: 76px; flex: none; }
.oca-cta > div { flex: 1; }
.oca-cta h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.oca-cta p { color: var(--at-color-superficie); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-2) 0 0; }
.oca-cta .boton { flex: none; min-height: var(--at-tactil-min); }

.oca-otras { display: flex; gap: var(--at-esp-3); margin-top: var(--at-esp-8); flex-wrap: wrap; align-items: center; }
.oca-otras span { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }
.oca-otras a {
  border: 1px solid var(--at-color-borde-campo); background: var(--at-color-superficie); color: var(--at-color-texto-2); padding: var(--at-esp-3) var(--at-esp-4);
  min-height: var(--at-tactil-min); display: inline-flex; align-items: center; border-radius: var(--at-radio-capsula);
  font-size: 14px; font-weight: 600; transition: border-color var(--at-dur-base) var(--at-ease-estandar), color var(--at-dur-base) var(--at-ease-estandar);
}
.oca-otras a:hover { border-color: var(--at-color-marca); color: var(--at-color-marca); }

/* ------------------------------------------------------------ tablet y celular */

@media (max-width: 1180px) {
  .oca-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oca-indice-cabeza h1, .oca-hero h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .oca-hero-rejilla, .oca-error { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .oca-hero-foto { height: 340px; }
  .oca-momento { height: 320px; }
}

@media (max-width: 760px) {
  .oca-indice { grid-template-columns: 1fr; gap: var(--at-esp-4); }
  .oca-indice-cabeza { padding-top: var(--at-esp-8); }
  .oca-indice-cabeza h1, .oca-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .oca-hero-rejilla { padding-top: var(--at-esp-6); padding-bottom: var(--at-esp-9); }
  .oca-hero .botones .boton { flex: 1; }
  .oca-hero-foto { height: 260px; }
  .oca-hero-foto .globo-aviso { left: var(--at-esp-3); right: var(--at-esp-3); bottom: var(--at-esp-3); }
  .oca-datos { grid-template-columns: 1fr; gap: var(--at-esp-3); padding-top: var(--at-esp-8); }
  .oca-datos b { font-size: 24px; }
  .oca-error { padding-top: var(--at-esp-9); }
  .oca-error h2, .oca-cta h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .oca-momento { height: 240px; }
  .oca-cta { flex-direction: column; align-items: flex-start; padding: var(--at-esp-7); gap: var(--at-esp-5); }
  .oca-cta .boton { width: 100%; }
}

/* Las guias por destinatario (`web/paginas/para-quien.blade.php`), Bogota y la landing en ingles. UI/UX v4: tokens `--at-*`. */

.pq-hero { background: var(--at-color-fondo); border-bottom: 1px solid var(--at-color-borde); padding: var(--at-esp-9) 0 48px; }
.pq-hero-rejilla { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.pq-hero h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); color: var(--at-color-tinta); margin: var(--at-esp-2) 0 var(--at-esp-5); text-wrap: balance; }
.pq-respuesta {
  background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l);
  padding: var(--at-esp-5) var(--at-esp-6); margin-bottom: var(--at-esp-6); box-shadow: var(--at-elev-1);
}
.pq-respuesta h2 { font: var(--at-texto-titulo-2); color: var(--at-color-tinta); margin: 0 0 var(--at-esp-2); }
.pq-respuesta p { margin: 0; font: var(--at-texto-web-cuerpo); color: var(--at-color-texto-2); }
.pq-hero .botones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); }
.pq-hero .botones .boton { min-height: var(--at-tactil-min); }
.pq-revisado { font: var(--at-texto-meta); color: var(--at-color-texto-2); margin: var(--at-esp-4) 0 0; }
.pq-hero-foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--at-radio-hoja); display: block;
}

.pq-perfiles { grid-template-columns: repeat(3, 1fr); margin-top: var(--at-esp-5); }
.pq-perfil {
  background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l);
  padding: var(--at-esp-5); display: flex; flex-direction: column; gap: var(--at-esp-2);
}
.pq-perfil h3 { font: var(--at-texto-titulo-2); color: var(--at-color-tinta); margin: 0; }
.pq-perfil p { margin: 0 0 var(--at-esp-1); font: var(--at-texto-cuerpo); font-size: 16px; flex: 1; }
.pq-perfil .enlace-azul { min-height: var(--at-tactil-min); display: inline-flex; align-items: center; font-size: 15px; }

.pq-presupuestos {
  list-style: none; padding: 0; margin: var(--at-esp-5) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--at-esp-3);
}
.pq-presupuestos a {
  display: flex; flex-direction: column; gap: var(--at-esp-1); padding: var(--at-esp-4) var(--at-esp-5); min-height: var(--at-tactil-min);
  background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l);
  color: var(--at-color-tinta); text-decoration: none; transition: border-color var(--at-dur-base) var(--at-ease-salida);
}
.pq-presupuestos a:hover { border-color: var(--at-color-marca); }
.pq-presupuestos span { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); font-variant-numeric: tabular-nums; }

.pq-error { max-width: 780px; }
.pq-error h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
.pq-error p { font: var(--at-texto-web-cuerpo); }
.pq-consejos { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: grid; gap: var(--at-esp-3); }
.pq-consejos li { display: flex; gap: var(--at-esp-3); align-items: flex-start; font: var(--at-texto-web-cuerpo); }
.pq-consejos img { width: 24px; flex: none; margin-top: var(--at-esp-1); }

.pq-preguntas { max-width: 820px; }

.pq-otras { display: flex; flex-wrap: wrap; gap: var(--at-esp-2) var(--at-esp-4); align-items: center; font-size: 16px; }
.pq-otras span { color: var(--at-color-texto-2); }
.pq-otras a { color: var(--at-color-marca); font-weight: 700; min-height: var(--at-tactil-min); display: inline-flex; align-items: center; }

/* Pasos numerados y lugares: las paginas de Bogota y la de ingles. */
.pq-pasos { list-style: none; padding: 0; margin: var(--at-esp-5) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--at-esp-5); }
.pq-pasos li { background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--at-radio-l); padding: var(--at-esp-5); }
.pq-pasos span {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--at-radio-capsula);
  background: var(--at-color-marca); color: var(--at-color-superficie); font-weight: 800; margin-bottom: var(--at-esp-3);
}
.pq-pasos h3 { font: var(--at-texto-titulo-2); color: var(--at-color-tinta); margin: 0 0 var(--at-esp-2); }
.pq-pasos p { margin: 0; font: var(--at-texto-cuerpo); font-size: 16px; }
.pq-nota { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: var(--at-esp-2) 0 0; }
.pq-lugares { list-style: none; padding: 0; margin: var(--at-esp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--at-esp-2); }
.pq-lugares li {
  padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--at-radio-capsula); background: var(--at-color-superficie);
  border: 1px solid var(--at-color-borde); color: var(--at-color-tinta); font-size: 15px; font-weight: 600;
}
.pq-perfil .ceja { margin: 0; }

/* ------------------------------------------------------------ tablet y celular */

@media (max-width: 1180px) {
  .pq-hero-rejilla { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .pq-perfiles { grid-template-columns: repeat(2, 1fr); }
  .pq-pasos { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .pq-perfiles { grid-template-columns: 1fr; }
  .pq-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .pq-hero-foto { display: none; }
}

/* «Su día» en las guías por profesión: la fecha va aparte de la respuesta. */
.pq-respuesta p.pq-dia { margin-top: var(--at-esp-3); font: var(--at-texto-cuerpo-fuerte); color: var(--at-color-marca); }

/* `/regalos-por-profesion`: el índice de las guías por profesión. */
.prof-cabeza { padding-top: var(--at-esp-9); padding-bottom: var(--at-esp-6); }
.prof-cabeza > * { max-width: 820px; }
.prof-cabeza h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; text-wrap: balance; }
.prof-cabeza p { font: var(--at-texto-web-cuerpo); color: var(--at-color-texto-2); margin: var(--at-esp-4) 0 0; }
.prof-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-4); padding-bottom: var(--at-esp-10); }
.prof-tarjeta { display: flex; flex-direction: column; border-radius: var(--at-radio-xl); overflow: hidden; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); color: inherit; transition: border-color var(--at-dur-base) var(--at-ease-estandar), transform var(--at-dur-base) var(--at-ease-estandar); }
.prof-tarjeta:hover { border-color: var(--at-color-marca); transform: translateY(-2px); }
.prof-tarjeta img { width: 100%; height: 150px; object-fit: cover; display: block; }
.prof-tarjeta div { padding: var(--at-esp-5); display: flex; flex-direction: column; gap: var(--at-esp-2); flex: 1; }
.prof-tarjeta h2 { font: var(--at-texto-titulo-2); margin: 0; }
.prof-tarjeta p { font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); margin: 0; }
.prof-tarjeta small { margin-top: auto; font: var(--at-texto-meta); color: var(--at-color-marca); font-weight: 700; }
@media (max-width: 1100px) { .prof-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .prof-rejilla { grid-template-columns: minmax(0, 1fr); } .prof-cabeza { padding-top: var(--at-esp-7); } }
.pq-dia a { font: var(--at-texto-meta); color: var(--at-color-texto-2); text-decoration: underline; text-underline-offset: 2px; margin-left: var(--at-esp-1); }
.pq-respuesta p.pq-proxima { margin-top: var(--at-esp-1); font: var(--at-texto-cuerpo); color: var(--at-color-texto-2); }

/* /fechas-especiales: el calendario, la proxima primero. */
.fecha-cuando { display: flex; flex-direction: column; gap: 2px; margin: 0; font: var(--at-texto-etiqueta); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-marca); }
.fecha-cuando b { font: var(--at-texto-titulo-2); letter-spacing: 0; text-transform: none; color: var(--at-color-tinta); }
.fecha-cuando.cerca { color: var(--at-color-dato-fuerte); }

/* La ficha de un regalo: `capturas/03-detalle-regalo.jpg`. Todo con prefijo `fr-`. */

.ficha-regalo .sr, .fr-recibe .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ficha-regalo {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--at-esp-9); align-items: start;
  padding-top: var(--at-esp-5); padding-bottom: var(--at-esp-2);
}

/* ------------------------------------------------------------ galeria */

.fr-galeria { display: flex; flex-direction: column; gap: var(--at-esp-3); position: sticky; top: 96px; }
.fr-foto { width: 100%; height: 400px; object-fit: cover; border-radius: var(--at-radio-l); background: var(--rosa-suave); animation: atSubir var(--at-dur-media) var(--at-ease-salida) both; }
.fr-miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-esp-3); }
.fr-mini {
  padding: 0; border: 2px solid transparent; border-radius: var(--at-radio-m); overflow: hidden; cursor: pointer;
  background: var(--rosa-suave); height: 90px; min-width: var(--at-tactil-min); transition: border-color var(--at-dur-base);
}
.fr-mini img { width: 100%; height: 100%; object-fit: cover; }
.fr-mini:hover { border-color: var(--borde-fuerte); }
.fr-mini.activa { border-color: var(--fucsia); }

.fr-aliado {
  display: flex; align-items: center; gap: var(--at-esp-3); min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-m); background: var(--blanco);
  border: 1px solid var(--borde); color: var(--tinta); transition: border-color var(--at-dur-base);
}
.fr-aliado:hover { border-color: var(--fucsia); color: var(--tinta); }
.fr-inicial {
  width: 40px; height: 40px; border-radius: var(--r-capsula); background: var(--rosa-papel); color: var(--fucsia);
  display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none;
}
.fr-aliado > span:nth-child(2) { flex: 1; min-width: 0; }
.fr-aliado b { display: block; font-size: 15px; }
.fr-aliado b + span { display: block; font: var(--at-texto-meta); color: var(--texto-suave); }
.fr-aliado .chip { font-size: 12px; flex: none; }

/* -------------------------------------------------------------- datos */

.fr-info { display: flex; flex-direction: column; gap: var(--at-esp-5); animation: atSubir var(--at-dur-media) var(--at-ease-salida) both 100ms; }
.fr-tipo { align-self: flex-start; text-transform: uppercase; letter-spacing: var(--at-tracking-etiqueta); font-size: 12px; }
.fr-info h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; }
.fr-descripcion { font: var(--at-texto-web-cuerpo); margin: 0; }
.fr-atina { margin: 0; padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--rosa-papel); color: var(--tinta); font: var(--at-texto-cuerpo-fuerte); font-weight: 400; }

.fr-valoracion { display: inline-flex; align-items: center; gap: var(--at-esp-2); align-self: flex-start; min-height: var(--at-tactil-min); font: var(--at-texto-cuerpo); color: var(--texto); }
.fr-valoracion b { color: var(--tinta); }
.fr-valoracion:hover span:last-child { color: var(--fucsia); }
.fr-estrellas { display: inline-flex; gap: 1px; font-size: 18px; line-height: 1; letter-spacing: 0; }
.fr-estrellas i { font-style: normal; color: var(--borde-fuerte); }
/* Estrellas: dato decorativo, el numero y el aria-label dicen lo mismo. */
.fr-estrellas i.llena { color: var(--at-color-aviso); }

/* Lo que se promete: tres lineas, no tres cajas. */
.fr-promesas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--at-esp-3); }
.fr-promesas li { display: flex; align-items: center; gap: var(--at-esp-3); font: var(--at-texto-cuerpo-fuerte); font-weight: 400; color: var(--texto); }
.fr-promesas svg {
  width: 36px; height: 36px; padding: var(--at-esp-2); flex: none; border-radius: var(--at-radio-s); background: var(--blanco); border: 1px solid var(--borde);
  fill: none; stroke: var(--fucsia); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.fr-promesas b { color: var(--tinta); }

.fr-compra { display: flex; flex-direction: column; gap: var(--at-esp-4); padding: var(--at-esp-5); border-radius: var(--at-radio-l); background: var(--blanco); border: 1px solid var(--borde); }
.fr-precio { display: flex; align-items: baseline; gap: var(--at-esp-3); flex-wrap: wrap; }
.fr-precio .precio.grande { font: var(--at-texto-cifra); color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.fr-precio small { font: var(--at-texto-meta); color: var(--texto-suave); }
.fr-como { margin: 0; font: var(--at-texto-meta); color: var(--texto-suave); text-align: center; }

.fr-botones { display: flex; flex-direction: column; gap: var(--at-esp-3); }
.fr-botones .boton { width: 100%; min-height: var(--at-alto-cta); padding: var(--at-esp-4); }
.fr-botones .boton.secundario { padding: var(--at-esp-4); font-size: 15px; }
.fr-ref { font: var(--at-texto-mono); color: var(--texto-suave); margin: 0; }

/* -------------------------------------------------------- como se vive */

.fr-vive {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--at-esp-9); align-items: start;
  padding: var(--at-esp-8) var(--at-esp-9); border-radius: var(--r-bloque); background: var(--rosa-papel);
}
.fr-vive h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-2) 0 0; }
.fr-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--at-esp-4); counter-reset: paso; }
.fr-pasos li { counter-increment: paso; position: relative; padding-top: 52px; }
.fr-pasos li::before {
  content: counter(paso); position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: var(--r-capsula);
  display: grid; place-items: center; background: var(--fucsia); color: var(--at-color-superficie); font-weight: 800; font-size: 15px;
}
.fr-pasos li:not(:last-child)::after {
  content: ""; position: absolute; top: 18px; left: 44px; right: calc(var(--at-esp-1) * -1); border-top: 2px dashed var(--at-color-marca-claro);
}
.fr-pasos b { display: block; font: var(--at-texto-titulo-2); font-size: 16px; color: var(--tinta); }
.fr-pasos b .chip { font-size: 12px; padding: 2px var(--at-esp-2); vertical-align: 2px; }
.fr-pasos p { margin: var(--at-esp-1) 0 0; font: var(--at-texto-cuerpo); color: var(--texto); }

/* ------------------------------------------------------- asi lo recibe */

.fr-recibe {
  margin-top: var(--at-esp-10); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--at-esp-9); align-items: center;
  padding: var(--at-esp-9); border-radius: var(--r-bloque); background: var(--at-color-tinta); color: var(--at-color-superficie);
}
.fr-recibe .ceja { margin-bottom: var(--at-esp-3); letter-spacing: var(--at-tracking-etiqueta); }
.fr-recibe h2 { color: var(--at-color-superficie); font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); margin: 0; overflow-wrap: anywhere; }
.fr-recibe p { color: var(--at-color-neutro-fondo); font: var(--at-texto-web-cuerpo); margin: var(--at-esp-3) 0 0; }
.fr-campos { display: flex; flex-direction: column; gap: var(--at-esp-3); margin-top: var(--at-esp-5); }
.fr-campos input {
  width: 100%; min-height: var(--at-tactil-min); padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s);
  border: 1.5px solid color-mix(in srgb, var(--at-color-superficie) 28%, transparent);
  background: color-mix(in srgb, var(--at-color-superficie) 8%, transparent); color: var(--at-color-superficie); font-family: var(--letra); font-size: 16px;
  transition: border-color var(--at-dur-base);
}
.fr-campos input:focus-visible { border-color: var(--fucsia-claro); box-shadow: 0 0 0 2px var(--at-color-tinta), 0 0 0 4px var(--at-color-superficie); }
.fr-campos input::placeholder { color: var(--at-color-borde-campo); opacity: 1; }

.fr-caja-marco { display: flex; justify-content: center; }
.fr-caja { position: relative; width: 320px; height: 300px; }
.fr-caja-cuerpo { position: absolute; left: 20px; right: 20px; top: 70px; bottom: 0; border-radius: var(--at-radio-l); background: var(--tinta-caja); box-shadow: var(--at-elev-3); }
.fr-cinta-v { position: absolute; left: 50%; top: 70px; bottom: 0; width: 26px; margin-left: -13px; background: var(--fucsia); }
.fr-cinta-h { position: absolute; left: 20px; right: 20px; top: 120px; height: 26px; background: var(--fucsia); }
.fr-caja-tino { position: absolute; left: 50%; top: 18px; width: 92px; margin-left: -46px; animation: atTino 3200ms var(--at-ease-estandar) infinite both; }
.fr-tarjetica {
  position: absolute; right: -10px; bottom: 26px; width: 190px; padding: var(--at-esp-4) var(--at-esp-4); border-radius: var(--at-radio-s);
  background: var(--crema); color: var(--tinta); transform: rotate(-6deg); box-shadow: var(--at-elev-3);
}
.fr-recibe .fr-tarjetica p { font-family: var(--mano); font-size: 24px; line-height: 1.15; color: var(--tinta); margin: 0; overflow-wrap: anywhere; }
.fr-tarjetica span { display: block; font-family: var(--mano); font-size: 18px; color: var(--fucsia); margin-top: var(--at-esp-2); }
.fr-recibe-boton { margin-top: var(--at-esp-5); min-height: var(--at-tactil-min); }

/* ------------------------------------------------ reacciones y opiniones */

.fr-reacciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); }
.fr-reacciones video { width: 100%; aspect-ratio: 9 / 16; max-height: 520px; object-fit: cover; border-radius: var(--at-radio-l); background: var(--tinta); }

.fr-promedio { font: var(--at-texto-cuerpo); color: var(--texto-suave); }
.fr-promedio b { color: var(--tinta); font-size: 18px; }
.fr-opiniones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); }
.fr-opinion {
  margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); padding: var(--at-esp-5); border-radius: var(--r-tarjeta-grande);
  background: var(--blanco); border: 1px solid var(--borde);
}
.fr-opinion-regalo { font: var(--at-texto-meta); color: var(--texto-suave); }
.fr-opinion blockquote { margin: 0; font: var(--at-texto-web-cuerpo); color: var(--tinta); overflow-wrap: anywhere; }
.fr-opinion blockquote::before { content: "“"; }
.fr-opinion blockquote::after { content: "”"; }
.fr-opinion figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-esp-1) var(--at-esp-3); margin-top: auto; font: var(--at-texto-meta); }
.fr-opinion figcaption span:not(.chip) { color: var(--texto-suave); }
.fr-opinion figcaption .chip { font-size: 12px; }
.fr-opinion-respuesta { margin: 0; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--rosa-papel); font: var(--at-texto-cuerpo); }

/* ------------------------------------------------------- quien lo hace */

.fr-quien { display: flex; gap: var(--at-esp-6); align-items: flex-start; padding: var(--at-esp-8); border-radius: var(--r-tarjeta-grande); background: var(--blanco); border: 1px solid var(--borde); }
.fr-quien-inicial {
  width: 72px; height: 72px; border-radius: var(--at-radio-l); background: var(--rosa-papel); color: var(--fucsia);
  display: grid; place-items: center; font-weight: 800; font-size: 30px; flex: none;
}
.fr-quien h2 { font: var(--at-texto-web-titulo-2); margin: 0 0 var(--at-esp-3); }
.fr-quien h2 a { color: var(--tinta); }
.fr-quien h2 a:hover { color: var(--fucsia); }
.fr-quien p { font: var(--at-texto-web-cuerpo); }
.fr-quien .ceja { margin-bottom: var(--at-esp-2); }
.fr-sub { margin: calc(var(--at-esp-2) * -1) 0 var(--at-esp-5); font: var(--at-texto-web-cuerpo); }

/* --------------------------------------------------------------- movil */

@media (max-width: 1180px) {
  .ficha-regalo { grid-template-columns: 1fr; gap: var(--at-esp-8); }
  .fr-galeria { position: static; }
  .fr-recibe { grid-template-columns: 1fr; padding: var(--at-esp-8); }
  .fr-vive { grid-template-columns: 1fr; gap: var(--at-esp-6); padding: var(--at-esp-8); }
  .fr-opiniones { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .fr-foto { height: 280px; border-radius: var(--at-radio-l); }
  .fr-mini { height: 64px; border-radius: var(--at-radio-s); }
  .fr-info h1 { font: var(--at-texto-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .fr-vive { padding: var(--at-esp-6); }
  .fr-vive h2 { font: var(--at-texto-titulo-1); }
  .fr-pasos { grid-template-columns: 1fr; gap: var(--at-esp-5); }
  .fr-pasos li { padding: 0 0 0 52px; min-height: 36px; }
  .fr-pasos li:not(:last-child)::after { top: 40px; bottom: calc(var(--at-esp-4) * -1); left: 17px; right: auto; border-top: 0; border-left: 2px dashed var(--at-color-marca-claro); }
  .fr-reacciones, .fr-opiniones { grid-template-columns: 1fr; }
  .fr-reacciones { grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fr-reacciones video { scroll-snap-align: start; }
  .fr-precio .precio.grande { font: var(--at-texto-titulo-1); }
  .fr-recibe { padding: var(--at-esp-6); margin-top: var(--at-esp-9); }
  .fr-recibe h2 { font: var(--at-texto-titulo-1); }
  .fr-caja { width: 260px; height: 260px; }
  .fr-tarjetica { right: calc(var(--at-esp-1) * -1); width: 170px; }
  .fr-quien { flex-direction: column; padding: var(--at-esp-5); }
}

/*
 * La tarjeta de un regalo (`piezas/tarjeta-regalo.blade.php`). La usan el inicio,
 * el catalogo, la ficha y los aliados. Va despues de la base y ajusta su
 * `.tarjeta` al prototipo: foto de 190 px con la entrega encima, razon en su
 * caja con Tino y «Regalar» abajo.
 */

.tarjeta { border-radius: var(--at-radio-l); }
.tarjeta:hover { transform: translateY(-3px); }

.tarjeta-foto { position: relative; }
.tarjeta .foto { aspect-ratio: auto; height: 190px; }
.tarjeta-entrega {
  position: absolute; right: var(--at-esp-3); top: var(--at-esp-3); padding: var(--at-esp-1) var(--at-esp-3); border-radius: var(--r-capsula);
  background: var(--at-color-fondo); color: var(--tinta); font-size: 12px; font-weight: 700; line-height: 1.4;
}

.tarjeta .cuerpo { gap: var(--at-esp-2); }
.tarjeta-tipo { display: flex; align-items: center; justify-content: space-between; gap: var(--at-esp-2); min-width: 0; }
.tarjeta-tipo .chip { flex: none; }
.tarjeta-aliado { font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.tarjeta h3 { font: var(--at-texto-titulo-2); }

.tarjeta .razon {
  display: flex; gap: var(--at-esp-2); align-items: flex-start; padding: var(--at-esp-2) var(--at-esp-3); border-radius: var(--at-radio-s);
  background: var(--crema); color: var(--texto); font: var(--at-texto-meta); flex: none;
}
.tarjeta .razon img { width: 16px; flex: none; margin-top: 2px; }

.tarjeta .pie-tarjeta { margin-top: auto; padding-top: var(--at-esp-2); }
.tarjeta .precio { display: block; font-size: 18px; color: var(--tinta); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tarjeta-cuota { display: block; font-size: 12px; color: var(--texto-suave); }
.tarjeta-regalar {
  flex: none; display: inline-flex; align-items: center; min-height: var(--at-tactil-min); padding: 0 var(--at-esp-4); border-radius: var(--r-capsula); background: var(--fucsia); color: var(--at-color-superficie);
  font-size: 14px; font-weight: 700; transition: background var(--at-dur-base);
}
.tarjeta:hover .tarjeta-regalar { background: var(--fucsia-hover); }

@media (max-width: 760px) {
  .tarjeta .foto { height: 150px; }
  .tarjeta .cuerpo { padding: var(--at-esp-3); }
  .tarjeta h3 { font-size: 15px; }
  .tarjeta .razon { display: none; }
  .tarjeta .pie-tarjeta { flex-wrap: wrap; }
  .tarjeta-regalar { display: none; }
}

/*
 * Vende con Atineo (`/vende-con-atineo`): la pagina con la que se buscan aliados.
 *
 * Todo va dentro de `.pagina-vende`, porque esta hoja se sirve en la unica del
 * sitio. El formulario y las preguntas reusan las clases de `/empresas`
 * (`.emp-campo`, `.emp-preguntas`...) para que las dos solicitudes se vean y se
 * comporten igual; aqui solo se les cambia el acento al fucsia y se les asegura
 * el area tactil y los colores de error del manual (UI/UX v4).
 *
 * Sin degradados de color: el velo del video es un solo tono con opacidad.
 * Solo se animan `transform` y `opacity`; la hoja global ya apaga todo con
 * `prefers-reduced-motion`.
 *
 * La pagina es una invitacion: el hero es un sobre que se abre (`.va-sobre`,
 * `.abierto` lo pone aliados-postular.js; sin script la carta ya se ve), y el
 * oficio que se elige en `#que-haces` se refleja en el motor, la orden de compra
 * y la ficha del formulario.
 */

.pagina-vende .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pagina-vende {
  /* Fondos oscuros: tinta del manual; los tonos de apoyo salen de mezclarla con el blanco. */
  --va-noche: var(--at-color-tinta);
  --va-tinta-suave: color-mix(in srgb, var(--at-color-superficie) 8%, var(--at-color-tinta));
  --va-linea-tinta: color-mix(in srgb, var(--at-color-superficie) 20%, var(--at-color-tinta));
  --va-texto-tinta: var(--at-color-borde-campo);
  --va-seccion: var(--at-esp-10);
}

/* Titulos de la pagina: tokens web del manual. */
.pagina-vende h2 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); text-wrap: pretty; }
.pagina-vende h3 { font: var(--at-texto-titulo-2); letter-spacing: normal; }

.pagina-vende .va-cabeza { max-width: 44em; margin-bottom: var(--at-esp-8); }
.pagina-vende .va-cabeza h2 { margin: 0; }
.pagina-vende .va-cabeza .entrada-media { margin: var(--at-esp-4) 0 0; font: var(--at-texto-web-cuerpo); }
.pagina-vende .va-cabeza.centrada { margin: 0 auto var(--at-esp-9); text-align: center; }
.pagina-vende .va-cabeza.centrada .entrada-media { margin: var(--at-esp-4) auto 0; }
.pagina-vende .va-cabeza-fila { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: var(--at-esp-6); }
.pagina-vende .ceja { font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; }
.pagina-vende .va-enlace {
  display: inline-flex; align-items: center; min-height: var(--at-tactil-min);
  color: var(--at-color-marca); font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap;
}
.pagina-vende .va-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================================================================== hero */

.pagina-vende .va-hero {
  position: relative; overflow: hidden; background: var(--va-noche);
  min-height: min(760px, 92vh); display: flex; align-items: flex-end;
  margin: 0 var(--at-esp-4); border-radius: var(--r-bloque);
}
.pagina-vende .va-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagina-vende .va-hero-velo { position: absolute; inset: 0; background: var(--at-color-tinta); opacity: 0.7; }
.pagina-vende .va-hero-contenido {
  position: relative; padding-top: 112px; padding-bottom: 56px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: end;
}
.pagina-vende .va-hero h1 { font: var(--at-texto-web-display); letter-spacing: var(--at-tracking-titulo); color: var(--at-color-superficie); max-width: 13.5em; text-wrap: balance; }
.pagina-vende .va-hero h1 em { font-style: normal; color: var(--at-color-marca-papel); }
.pagina-vende .va-entrada { color: var(--at-color-fondo); font-size: 18px; line-height: 1.6; max-width: 36em; margin: 0 0 var(--at-esp-8); }
.pagina-vende .va-hero .botones { display: flex; flex-wrap: wrap; gap: var(--at-esp-3); }

.pagina-vende .va-convocatoria {
  display: inline-flex; align-items: center; gap: var(--at-esp-3); margin: 0 0 var(--at-esp-6); padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-2) var(--at-esp-3);
  border-radius: var(--r-capsula); background: var(--va-noche); border: 1px solid var(--va-linea-tinta); color: var(--at-color-superficie);
  font-weight: 800; font-size: 14px;
}
.pagina-vende .va-convocatoria i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--at-color-ok-fondo); }
.pagina-vende .va-convocatoria i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--at-color-ok-fondo);
  animation: atLatir 1800ms var(--at-ease-salida) infinite;
}

.pagina-vende .va-hero-cifras {
  list-style: none; padding: var(--at-esp-7) 0 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: var(--at-esp-5) 48px;
  border-top: 1px solid var(--va-linea-tinta);
}
.pagina-vende .va-hero-cifras b { display: block; color: var(--at-color-superficie); font: var(--at-texto-cifra); letter-spacing: var(--at-tracking-titulo); font-variant-numeric: tabular-nums; }
.pagina-vende .va-hero-cifras span { color: var(--va-texto-tinta); font-size: 14.5px; }

/* ================================================================= cinta */

.pagina-vende .va-cinta { display: flex; align-items: center; gap: var(--at-esp-5); padding: var(--at-esp-8) var(--margen) 0; max-width: var(--ancho); margin: 0 auto; }
.pagina-vende .va-cinta-rotulo { flex: none; font-size: 12px; font-weight: 800; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.pagina-vende .va-cinta-marco { overflow: hidden; flex: 1; min-width: 0; }
.pagina-vende .va-cinta-pista { display: flex; width: max-content; animation: atMarquee 60s linear infinite; }
.pagina-vende .va-cinta ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0 32px 0 0; }
.pagina-vende .va-cinta li { font-weight: 800; font-size: 16px; color: var(--at-color-texto-2); white-space: nowrap; }

/* ================================================================= motor */

.pagina-vende .va-motor-seccion { padding-top: var(--va-seccion); scroll-margin-top: 92px; }
.pagina-vende .va-motor {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px auto 72px minmax(0, 1fr); align-items: center; gap: 0;
  padding: var(--at-esp-9); border-radius: var(--r-bloque); background: var(--va-noche); color: var(--at-color-superficie);
}
.pagina-vende .va-motor-senales { display: flex; flex-direction: column; gap: var(--at-esp-3); }
.pagina-vende .va-senal {
  position: relative; padding: var(--at-esp-4) var(--at-esp-5); border-radius: var(--at-radio-m); background: var(--va-tinta-suave); border: 1px solid var(--va-linea-tinta);
}
/* El borde que se enciende es una capa aparte: solo se anima su opacidad. */
.pagina-vende .va-senal::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--at-color-marca-claro); opacity: 0; pointer-events: none;
  animation: vaSenal 6s var(--at-ease-estandar) infinite; animation-delay: calc(var(--i) * 350ms);
}
.pagina-vende .va-senal small { display: block; font-size: 12px; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--va-texto-tinta); }
.pagina-vende .va-senal b { display: block; font-size: 16px; margin-top: var(--at-esp-1); }

.pagina-vende .va-motor-flujo { position: relative; height: 2px; background: var(--va-linea-tinta); --va-flujo-x: 64px; --va-flujo-y: 0px; }
.pagina-vende .va-motor-flujo i {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--at-color-marca-claro);
  animation: vaFlujo 1800ms linear infinite;
}
.pagina-vende .va-motor-flujo i:nth-child(2) { animation-delay: 600ms; }
.pagina-vende .va-motor-flujo i:nth-child(3) { animation-delay: 1200ms; }
.pagina-vende .va-motor-flujo.derecha i { background: var(--at-color-ok-fondo); }

.pagina-vende .va-motor-nucleo {
  position: relative; width: 192px; height: 192px; border-radius: 50%; background: var(--at-color-marca); color: var(--at-color-superficie);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 0 0 8px var(--va-linea-tinta);
}
.pagina-vende .va-motor-nucleo img { width: 56px; height: auto; animation: atTino 3200ms var(--at-ease-estandar) infinite; }
.pagina-vende .va-motor-nucleo b { font-size: 16px; margin-top: var(--at-esp-2); }
.pagina-vende .va-motor-nucleo small { font: var(--at-texto-mono); color: var(--at-color-marca-papel); }
.pagina-vende .va-motor-anillo {
  position: absolute; inset: -24px; border-radius: 50%; border: 2px dashed var(--at-color-texto-3);
  animation: vaGirar 14s linear infinite;
}
.pagina-vende .va-motor-anillo.dos { inset: -40px; border-style: dotted; border-color: var(--at-color-marca-claro); animation-duration: 22s; animation-direction: reverse; }

.pagina-vende .va-motor-resultado {
  position: relative; background: var(--at-color-superficie); color: var(--at-color-tinta); border-radius: var(--at-radio-l); padding: var(--at-esp-3); box-shadow: var(--at-elev-3);
  animation: vaResultado 6s var(--at-ease-estandar) infinite;
}
.pagina-vende .va-motor-resultado img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--at-radio-s); display: block; }
.pagina-vende .va-motor-imagen, .pagina-vende .va-ficha-foto { position: relative; }
.pagina-vende .va-sin-foto {
  position: absolute; inset: 0; border-radius: var(--at-radio-s); background: var(--at-color-neutro-fondo); display: flex; align-items: center; justify-content: center;
}
.pagina-vende .va-sin-foto[hidden] { display: none; }
.pagina-vende .va-sin-foto svg { width: 42%; height: 42%; fill: none; stroke: var(--at-color-marca); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pagina-vende .va-motor-resultado > div { padding: var(--at-esp-3) var(--at-esp-1) var(--at-esp-1); }
.pagina-vende .va-motor-resultado small { display: block; font-size: 12.5px; color: var(--at-color-texto-2); }
.pagina-vende .va-motor-resultado b { display: block; font-size: 18px; }
.pagina-vende .va-motor-resultado span { display: block; font-size: 13px; color: var(--at-color-ok); font-weight: 700; margin-top: var(--at-esp-1); }
.pagina-vende .va-motor-chip {
  position: absolute; top: -16px; left: 50%; translate: -50% 0; white-space: nowrap; padding: var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula);
  background: var(--at-color-ok-fondo); color: var(--at-color-ok); font-weight: 800; font-size: 13px;
}
.pagina-vende .va-motor-nota { font-size: 13px; color: var(--at-color-texto-2); text-align: center; margin: var(--at-esp-4) 0 0; }

@keyframes vaFlujo { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translate(var(--va-flujo-x), var(--va-flujo-y)); opacity: 0; } }
@keyframes vaGirar { to { transform: rotate(360deg); } }
@keyframes vaSenal { 0%, 100% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0; } }
@keyframes vaResultado { 0%, 40% { scale: 0.96; opacity: 0.6; } 55%, 92% { scale: 1; opacity: 1; } 100% { scale: 0.96; opacity: 0.6; } }

/* ============================================================ experiencia */

.pagina-vende .va-experiencia { margin-top: var(--va-seccion); padding: 80px 0; background: var(--at-color-neutro-fondo); }
.pagina-vende .va-experiencia-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pagina-vende .va-experiencia-texto h2 { margin: 0 0 var(--at-esp-5); }
.pagina-vende .va-experiencia-texto p { font: var(--at-texto-web-cuerpo); margin: 0; }
.pagina-vende .va-logos { display: flex; align-items: center; gap: var(--at-esp-7); margin: var(--at-esp-7) 0 var(--at-esp-5); }
.pagina-vende .va-logos img { height: 44px; width: auto; }
.pagina-vende .va-logos img + img { height: 28px; }
.pagina-vende .va-anos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-4); }
.pagina-vende .va-anos li { background: var(--at-color-superficie); border-radius: var(--r-tarjeta-grande); padding: var(--at-esp-7) var(--at-esp-6); }
.pagina-vende .va-anos b { display: block; font: var(--at-texto-web-display); color: var(--at-color-dato); letter-spacing: var(--at-tracking-titulo); font-variant-numeric: tabular-nums; }
.pagina-vende .va-anos span { display: block; margin-top: var(--at-esp-3); font-weight: 800; color: var(--at-color-tinta); font-size: 16px; }
.pagina-vende .va-anos small { display: block; font-weight: 600; color: var(--at-color-texto-2); font-size: 13px; margin-top: var(--at-esp-1); }

/* ========================================================= como funcionamos */

.pagina-vende .va-como-banda { margin: var(--va-seccion) var(--at-esp-4) 0; padding: 88px 0; background: var(--va-noche); border-radius: var(--r-bloque); scroll-margin-top: 92px; }
.pagina-vende .va-como-banda h2, .pagina-vende .va-como-banda h3 { color: var(--at-color-superficie); }
.pagina-vende .va-como-banda .entrada-media { color: var(--va-texto-tinta); }
.pagina-vende .va-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--at-esp-3); position: relative; }
.pagina-vende .va-pasos li { position: relative; padding: var(--at-esp-6) var(--at-esp-5); border-radius: var(--r-tarjeta); background: var(--va-tinta-suave); border: 1px solid var(--va-linea-tinta); }
.pagina-vende .va-como-banda.visto .va-pasos li {
  animation-name: atPop; animation-duration: var(--at-dur-lenta); animation-timing-function: var(--at-ease-salida); animation-fill-mode: both;
  animation-delay: calc(var(--i) * 120ms);
}
.pagina-vende .va-paso-n {
  display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--at-color-marca); color: var(--at-color-superficie);
  align-items: center; justify-content: center; font-weight: 900; font-size: 17px;
}
.pagina-vende .va-pasos li:last-child .va-paso-n { background: var(--at-color-ok-fondo); color: var(--at-color-ok); }
.pagina-vende .va-paso-etapa { display: block; margin-top: var(--at-esp-4); font: var(--at-texto-mono); letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-marca-papel); }
.pagina-vende .va-pasos h3 { font: var(--at-texto-titulo-2); margin: var(--at-esp-2) 0; }
.pagina-vende .va-pasos p { color: var(--va-texto-tinta); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ================================================================= oficio */

.pagina-vende .va-oficio { padding-top: var(--va-seccion); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pagina-vende .va-oficio-media { position: relative; padding: 0 40px 72px 0; }
.pagina-vende .va-oficio-video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-bloque); display: block; background: var(--at-color-neutro-fondo); }
.pagina-vende .va-oficio-foto { position: absolute; object-fit: cover; border-radius: var(--at-radio-l); border: 4px solid var(--at-color-fondo); box-shadow: var(--at-elev-3); }
.pagina-vende .va-oficio-foto.uno { right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 3; }
.pagina-vende .va-oficio-foto.dos { left: -16px; bottom: 16px; width: 26%; aspect-ratio: 4 / 5; rotate: -4deg; }
.pagina-vende .va-oficio-texto h2 { margin: 0 0 var(--at-esp-6); }
.pagina-vende .va-buscamos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--at-esp-3); }
.pagina-vende .va-buscamos li { position: relative; padding-left: 36px; font-size: 17px; line-height: 1.5; color: var(--at-color-tinta); }
.pagina-vende .va-buscamos li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--at-color-ok-fondo); color: var(--at-color-ok); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

/* ================================================================ vitrina */

.pagina-vende .va-vitrina-seccion { padding-top: var(--va-seccion); }
.pagina-vende .va-vitrina { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--at-esp-3); }
.pagina-vende .va-producto {
  display: block; text-decoration: none; color: inherit; background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); border-radius: var(--r-tarjeta); overflow: hidden;
  transition: translate var(--at-dur-media) var(--at-ease-salida), border-color var(--at-dur-base) var(--at-ease-estandar);
}
.pagina-vende .va-producto:hover { translate: 0 -4px; border-color: var(--at-color-marca-claro); }
.pagina-vende .va-producto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pagina-vende .va-producto > span { display: block; padding: var(--at-esp-3) var(--at-esp-4) var(--at-esp-4); }
.pagina-vende .va-producto b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; color: var(--at-color-tinta); line-height: 1.3; }
.pagina-vende .va-producto small { display: block; margin-top: var(--at-esp-2); font-size: 13px; color: var(--at-color-marca); font-weight: 700; }

/* ============================================================== el sobre */

.pagina-vende .va-sobre { position: relative; padding: 0 var(--at-esp-7) 48px; }
.pagina-vende .va-sobre-fondo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: var(--at-radio-l); background: var(--at-color-marca-claro);
}
.pagina-vende .va-carta {
  position: relative; z-index: 2; margin: 0; padding: var(--at-esp-8) var(--at-esp-8) 36px; border-radius: var(--at-radio-m); background: var(--at-color-superficie); color: var(--at-color-tinta);
  rotate: -1.6deg; box-shadow: var(--at-elev-3);
}
.pagina-vende .va-carta p { margin: 0 0 var(--at-esp-3); font-size: 17px; line-height: 1.6; color: var(--at-color-texto-2); }
.pagina-vende .va-carta-para { font-family: var(--mano); font-size: 22px !important; color: var(--at-color-texto-2) !important; margin-bottom: var(--at-esp-4) !important; }
.pagina-vende .va-carta-para span { font-size: 32px; font-weight: 700; color: var(--at-color-marca); }
.pagina-vende .va-carta-firma { margin: var(--at-esp-5) 0 0 !important; }
.pagina-vende .va-carta-firma span { font-family: var(--mano); font-size: 28px; font-weight: 700; color: var(--at-color-tinta); }
.pagina-vende .va-carta-sello { position: absolute; right: var(--at-esp-6); bottom: var(--at-esp-6); width: 52px; height: auto; rotate: 8deg; }
.pagina-vende .va-sobre-frente {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 40%; border-radius: 0 0 var(--at-radio-l) var(--at-radio-l); background: var(--at-color-marca-papel);
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
}
.pagina-vende .va-sobre-solapa {
  position: absolute; left: 50%; bottom: 12px; width: 28px; height: 28px; translate: -50% 0; border-radius: 50%; background: var(--at-color-marca);
  box-shadow: 0 0 0 4px var(--at-color-marca-papel);
}
/* Con script, la carta sale del sobre al cargar. Sin script, ya esta afuera. */
.con-script .pagina-vende .va-carta { animation: vaCarta var(--at-dur-celebracion) 500ms var(--at-ease-salida) both; }
@keyframes vaCarta { from { translate: 0 38%; rotate: 0deg; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; rotate: -1.6deg; } }

/* ============================================================ que haces */

.pagina-vende .va-oficios-seccion { padding-top: var(--va-seccion); scroll-margin-top: 92px; }
.pagina-vende .va-oficios { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--at-esp-3); max-width: 980px; margin: 0 auto var(--at-esp-8); }
.pagina-vende .va-oficio {
  position: relative; display: inline-flex; align-items: center; gap: var(--at-esp-2); min-height: var(--at-tactil-min); padding: var(--at-esp-2) var(--at-esp-5) var(--at-esp-2) var(--at-esp-4); border-radius: var(--r-capsula);
  border: 1px solid var(--at-color-borde-campo); background: var(--at-color-superficie); color: var(--at-color-tinta); font: inherit; font-weight: 800; font-size: 15px;
  cursor: pointer; transition: border-color var(--at-dur-base) var(--at-ease-estandar), background-color var(--at-dur-base) var(--at-ease-estandar), translate var(--at-dur-base) var(--at-ease-salida);
}
.pagina-vende .va-oficio:hover { border-color: var(--at-color-marca-claro); translate: 0 -2px; }
.pagina-vende .va-oficio:focus-visible { border-radius: var(--r-capsula); }
.pagina-vende .va-oficio svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--at-color-marca); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pagina-vende .va-oficio[aria-checked="true"] { background: var(--at-color-marca); border-color: var(--at-color-marca); color: var(--at-color-superficie); }
.pagina-vende .va-oficio[aria-checked="true"] svg { stroke: var(--at-color-superficie); }
.pagina-vende .va-oficio-marca {
  position: absolute; top: -8px; right: 12px; padding: 2px var(--at-esp-2); border-radius: var(--r-capsula); background: var(--at-color-ok-fondo); color: var(--at-color-ok);
  font-style: normal; font-size: 12px; font-weight: 800;
}

.pagina-vende .va-respuesta {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: var(--r-bloque); overflow: hidden;
  background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); box-shadow: var(--at-elev-1); max-width: 1040px; margin: 0 auto;
}
.pagina-vende .va-respuesta:not([hidden]) { animation: vaAparecer var(--at-dur-lenta) var(--at-ease-salida) both; }
.pagina-vende .va-respuesta-foto { min-height: 340px; background: var(--at-color-neutro-fondo); }
.pagina-vende .va-respuesta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagina-vende .va-respuesta-foto.sin-foto { display: flex; align-items: center; justify-content: center; }
.pagina-vende .va-respuesta-foto.sin-foto svg { width: 120px; height: 120px; fill: none; stroke: var(--at-color-marca); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.pagina-vende .va-respuesta-texto { padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; }
.pagina-vende .va-respuesta-texto h3 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-4) 0 var(--at-esp-3); }
.pagina-vende .va-respuesta-texto > p { margin: 0; font: var(--at-texto-web-cuerpo); }
.pagina-vende .va-buscando {
  display: inline-flex; align-items: center; gap: var(--at-esp-2); padding: var(--at-esp-2) var(--at-esp-4) var(--at-esp-2) var(--at-esp-3); border-radius: var(--r-capsula);
  background: var(--at-color-ok-fondo); color: var(--at-color-ok); font-weight: 800; font-size: 14px;
}
.pagina-vende .va-buscando i { width: 8px; height: 8px; border-radius: 50%; background: var(--at-color-ok); animation: atLatir 1800ms var(--at-ease-salida) infinite; }
.pagina-vende .va-buscando.tranquilo { background: var(--at-color-marca-papel); color: var(--at-color-marca); padding-left: var(--at-esp-4); }
.pagina-vende .va-encaja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-esp-2); margin: var(--at-esp-5) 0 0; }
.pagina-vende .va-encaja small { font-size: 13px; font-weight: 800; color: var(--at-color-texto-2); margin-right: var(--at-esp-1); }
.pagina-vende .va-respuesta-nota {
  margin: var(--at-esp-5) 0 0 !important; padding: var(--at-esp-3) var(--at-esp-4); border-radius: var(--at-radio-s); background: var(--at-color-aviso-fondo); color: var(--at-color-aviso);
  font-size: 15px !important; line-height: 1.5 !important; font-weight: 700;
}
.pagina-vende .va-respuesta .boton { margin-top: var(--at-esp-7); min-height: var(--at-tactil-min); }
@keyframes vaAparecer { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Lo que cambia con el oficio: un parpadeo suave para que se note. */
.pagina-vende .va-cambia { animation: vaCambia var(--at-dur-lenta) var(--at-ease-salida); }
@keyframes vaCambia { 0% { opacity: 0.2; } 100% { opacity: 1; } }

/* ======================================================== antes y ahora */

.pagina-vende .va-cambio-seccion { padding-top: var(--va-seccion); scroll-margin-top: 92px; }
.pagina-vende .va-cambio { border-radius: var(--r-bloque); overflow: hidden; border: 1px solid var(--at-color-borde); background: var(--at-color-superficie); }
.pagina-vende .va-cambio-titulos, .pagina-vende .va-cambio-fila { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.pagina-vende .va-cambio-titulos span {
  padding: var(--at-esp-5) var(--at-esp-8); font-size: 12px; font-weight: 800; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2);
}
.pagina-vende .va-cambio-titulos span + span { background: var(--va-noche); color: var(--at-color-marca-papel); }
.pagina-vende .va-cambio-fila { border-top: 1px solid var(--at-color-borde); }
.pagina-vende .va-cambio-antes {
  display: flex; gap: var(--at-esp-3); margin: 0; padding: var(--at-esp-6) var(--at-esp-8); font-size: 16px; line-height: 1.55; color: var(--at-color-texto-2);
}
.pagina-vende .va-cambio-x {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--at-color-neutro-fondo); color: var(--at-color-texto-2);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; line-height: 1;
}
.pagina-vende .va-cambio-ahora { display: flex; gap: var(--at-esp-4); padding: var(--at-esp-6) var(--at-esp-8); background: var(--va-noche); border-top: 1px solid var(--va-linea-tinta); margin-top: -1px; }
.pagina-vende .va-cambio-ahora b { display: block; color: var(--at-color-superficie); font-size: 17px; line-height: 1.3; }
.pagina-vende .va-cambio-ahora div > span { display: block; color: var(--va-texto-tinta); font-size: 15px; line-height: 1.55; margin-top: var(--at-esp-1); }
.pagina-vende .va-cambio-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--at-color-ok-fondo); display: flex; align-items: center; justify-content: center;
}
.pagina-vende .va-cambio-check svg { width: 16px; height: 16px; fill: none; stroke: var(--at-color-ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pagina-vende .va-cambio-seccion.visto .va-cambio-fila { animation: vaAparecer var(--at-dur-lenta) var(--at-ease-salida) both; animation-delay: calc(var(--i) * 90ms); }

/* ======================================================= orden de compra */

.pagina-vende .va-orden-seccion { padding-top: var(--va-seccion); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pagina-vende .va-orden-texto h2 { margin: 0 0 var(--at-esp-7); }
.pagina-vende .va-pedido-linea { list-style: none; padding: 0; margin: 0; counter-reset: pedido; }
.pagina-vende .va-pedido-linea li { position: relative; padding: 0 0 var(--at-esp-5) 48px; counter-increment: pedido; }
.pagina-vende .va-pedido-linea li::before {
  content: counter(pedido); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--at-color-marca); color: var(--at-color-superficie); font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 1;
}
.pagina-vende .va-pedido-linea li::after { content: ""; position: absolute; top: 32px; bottom: 0; left: 15px; width: 2px; background: var(--at-color-marca-papel); }
.pagina-vende .va-pedido-linea li:last-child { padding-bottom: 0; }
.pagina-vende .va-pedido-linea li:last-child::after { display: none; }
.pagina-vende .va-pedido-linea li:last-child::before { background: var(--at-color-ok-fondo); color: var(--at-color-ok); }
.pagina-vende .va-pedido-linea b { display: block; color: var(--at-color-tinta); font-size: 17px; padding-top: var(--at-esp-1); }
.pagina-vende .va-pedido-linea span { display: block; font-size: 15px; margin-top: 2px; }

.pagina-vende .va-orden {
  position: relative; padding: var(--at-esp-8) var(--at-esp-8) var(--at-esp-6); border-radius: var(--at-radio-l); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde-campo);
  box-shadow: var(--at-elev-3); rotate: 1.2deg;
}
.pagina-vende .va-orden-cabeza { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--at-esp-5); border-bottom: 2px dashed var(--at-color-borde-campo); }
.pagina-vende .va-orden-cabeza img { width: 96px; height: auto; }
.pagina-vende .va-orden-cabeza div { text-align: right; }
.pagina-vende .va-orden-cabeza small { display: block; font-size: 12px; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); font-weight: 800; }
.pagina-vende .va-orden-cabeza b { font: var(--at-texto-mono); font-size: 18px; color: var(--at-color-tinta); }
.pagina-vende .va-orden dl { margin: var(--at-esp-1) 0 0; }
.pagina-vende .va-orden dl > div { display: flex; justify-content: space-between; gap: var(--at-esp-4); padding: var(--at-esp-3) 0; border-bottom: 1px solid var(--at-color-borde); }
.pagina-vende .va-orden dt { font-size: 14px; color: var(--at-color-texto-2); font-weight: 700; }
.pagina-vende .va-orden dd { margin: 0; font-size: 15px; color: var(--at-color-tinta); font-weight: 800; text-align: right; }
.pagina-vende .va-orden-sello {
  position: absolute; right: var(--at-esp-7); bottom: var(--at-esp-4); padding: var(--at-esp-1) var(--at-esp-3); border: 3px solid var(--at-color-ok); border-radius: var(--at-radio-s); color: var(--at-color-ok);
  font-weight: 900; font-size: 15px; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; rotate: -10deg; opacity: 0;
}
.pagina-vende .va-orden-seccion.visto .va-orden-sello { animation: atFundido var(--at-dur-media) 700ms var(--at-ease-salida) both; }
.pagina-vende .va-orden-pie { margin: var(--at-esp-4) 0 0; padding-right: 152px; font-size: 13px; color: var(--at-color-texto-2); }

/* ============================================================= temporadas */

.pagina-vende .va-temporadas-seccion { padding-top: var(--va-seccion); }
.pagina-vende .va-temporadas-nota { max-width: 26em; margin: 0; font-size: 16px; line-height: 1.55; }
.pagina-vende .va-temporadas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--at-esp-4); }
.pagina-vende .va-temporadas li {
  display: flex; flex-direction: column; align-items: flex-start; padding: var(--at-esp-6); border-radius: var(--r-tarjeta-grande);
  background: var(--at-color-superficie); border: 1px solid var(--at-color-borde);
}
.pagina-vende .va-temporadas li.alta { background: var(--va-noche); border-color: var(--va-noche); }
.pagina-vende .va-temporadas li.alta h3 { color: var(--at-color-superficie); }
.pagina-vende .va-temporadas li.alta p { color: var(--va-texto-tinta); }
.pagina-vende .va-temporadas li.alta .chip { background: var(--at-color-marca); color: var(--at-color-superficie); }
.pagina-vende .va-temporada-fecha { font: var(--at-texto-mono); color: var(--at-color-marca); text-transform: uppercase; letter-spacing: var(--at-tracking-etiqueta); }
.pagina-vende .va-temporadas li.alta .va-temporada-fecha { color: var(--at-color-marca-claro); }
.pagina-vende .va-temporadas h3 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); margin: var(--at-esp-2) 0 var(--at-esp-3); }
.pagina-vende .va-temporadas p { margin: var(--at-esp-3) 0 var(--at-esp-4); font-size: 15px; line-height: 1.55; flex: 1; }
.pagina-vende .va-temporadas .chip.suave { background: var(--at-color-neutro-fondo); color: var(--at-color-texto-2); }
.pagina-vende .va-temporada-cuenta { font-size: 14px; color: var(--at-color-marca); }
.pagina-vende .va-temporadas li.alta .va-temporada-cuenta { color: var(--at-color-ok-fondo); }

/* ==================================================== ficha en el formulario */

.pagina-vende .va-ficha {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--at-esp-4); align-items: center; margin: var(--at-esp-7) 0 var(--at-esp-2); padding: var(--at-esp-3);
  border-radius: var(--r-tarjeta); background: var(--at-color-superficie); border: 1px solid var(--at-color-borde); box-shadow: var(--at-elev-1); max-width: 440px;
}
.pagina-vende .va-ficha-foto img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--at-radio-s); display: block; }
.pagina-vende .va-ficha small { display: block; font-size: 12px; font-weight: 800; letter-spacing: var(--at-tracking-etiqueta); text-transform: uppercase; color: var(--at-color-texto-2); }
.pagina-vende .va-ficha b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; color: var(--at-color-tinta); line-height: 1.3; margin: var(--at-esp-1) 0;
}
.pagina-vende .va-ficha figcaption > span { font-size: 14px; color: var(--at-color-marca); font-weight: 700; }
.pagina-vende .va-ficha em { font-style: normal; }
.pagina-vende [data-vacio].vacio { opacity: 0.55; }

/* ========================================== formulario y preguntas (fucsia) */

.pagina-vende .va-faq .emp-preguntas details[open] { border-color: var(--at-color-marca-claro); }
.pagina-vende .va-faq > div:first-child a { color: var(--at-color-marca); }
.pagina-vende .emp-preguntas summary { min-height: var(--at-tactil-min); font-size: 17px; }
.pagina-vende .emp-preguntas summary::after { background: var(--at-color-marca-papel); color: var(--at-color-marca); }
.pagina-vende .emp-preguntas details p { font-size: 16px; }
.pagina-vende .emp-cotizar-seccion { scroll-margin-top: 92px; }
.pagina-vende .emp-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagina-vende .emp-campo input, .pagina-vende .emp-campo select, .pagina-vende .emp-campo textarea { min-height: var(--at-tactil-min); font-size: 16px; }
.pagina-vende .emp-campo input:focus, .pagina-vende .emp-campo select:focus, .pagina-vende .emp-campo textarea:focus { border-color: var(--at-color-marca); }
.pagina-vende .emp-chip span { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); font-size: 15px; }
.pagina-vende .emp-chip:hover span { border-color: var(--at-color-marca-claro); }
.pagina-vende .emp-chip input:focus-visible + span { outline-width: 0; box-shadow: var(--at-foco); }
.pagina-vende .emp-autorizo { min-height: var(--at-tactil-min); font-size: 14px; align-items: center; }
.pagina-vende .emp-autorizo input { accent-color: var(--at-color-marca); width: 24px; height: 24px; margin: 0; }
.pagina-vende .emp-autorizo a { color: var(--at-color-marca); }
.pagina-vende .emp-enviar { min-height: var(--at-tactil-min); white-space: normal; }
.pagina-vende .emp-letra { font-size: 13px; }
.pagina-vende .emp-otra-via a { display: inline-flex; align-items: center; min-height: var(--at-tactil-min); }
/* Errores del manual: rojo del sistema y su fondo, con aviso para lectores de pantalla (role="alert" en la vista). */
.pagina-vende .con-error input, .pagina-vende .con-error select, .pagina-vende .con-error textarea { border-color: var(--at-color-error); }
.pagina-vende .emp-campo-error { color: var(--at-color-error); font-size: 13px; }
.pagina-vende .emp-form-error { background: var(--at-color-error-fondo); color: var(--at-color-error); border-radius: var(--at-radio-s); }
/* Mientras se envia el formulario, el boton lo dice y no parece roto. */
.pagina-vende .emp-enviar:disabled { background: var(--at-color-deshabilitado-fondo); color: var(--at-color-deshabilitado-texto); opacity: 1; }

/* ============================================================ movimiento */

@media (prefers-reduced-motion: reduce) {
  .pagina-vende .va-cinta-pista, .pagina-vende .va-motor-flujo i, .pagina-vende .va-motor-anillo,
  .pagina-vende .va-senal::after, .pagina-vende .va-motor-resultado, .pagina-vende .va-convocatoria i::after,
  .pagina-vende .va-motor-nucleo img, .pagina-vende .va-carta, .pagina-vende .va-buscando i,
  .pagina-vende .va-respuesta, .pagina-vende .va-cambio-fila, .pagina-vende .va-cambia { animation: none !important; }
  .pagina-vende .va-orden-sello { animation: none !important; opacity: 1; }
}

/* ================================================================= tablet */

@media (max-width: 1180px) {
  .pagina-vende .va-hero h1 { font: var(--at-texto-web-titulo-1); letter-spacing: var(--at-tracking-titulo); }
  .pagina-vende .va-hero-contenido { grid-template-columns: 1fr; gap: 40px; }
  .pagina-vende .va-sobre { max-width: 520px; }
  .pagina-vende .va-respuesta { grid-template-columns: 1fr; }
  .pagina-vende .va-respuesta-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .pagina-vende .va-temporadas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-vende .va-motor { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: var(--at-esp-8) var(--at-esp-7); }
  .pagina-vende .va-motor-senales, .pagina-vende .va-motor-resultado { width: 100%; max-width: 420px; }
  .pagina-vende .va-motor-flujo { width: 2px; height: 60px; --va-flujo-x: 0px; --va-flujo-y: 52px; }
  .pagina-vende .va-motor-flujo i { left: -3px; top: 0; }
  .pagina-vende .va-motor-nucleo { margin: var(--at-esp-8) 0; }
  .pagina-vende .va-experiencia-rejilla, .pagina-vende .va-oficio, .pagina-vende .va-orden-seccion { grid-template-columns: 1fr; gap: 36px; }
  .pagina-vende .va-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-vende .va-vitrina { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagina-vende .va-vitrina .va-producto:nth-child(n+4) { display: none; }
}

/* ================================================================= celular */

@media (max-width: 760px) {
  .pagina-vende { --va-seccion: 64px; }
  .pagina-vende h2 { font: var(--at-texto-web-titulo-2); letter-spacing: var(--at-tracking-titulo); }
  .pagina-vende .va-hero { margin: 0 var(--at-esp-2); min-height: 0; }
  .pagina-vende .va-hero-contenido { padding-top: 88px; padding-bottom: 36px; }
  .pagina-vende .va-hero h1 { font: var(--at-texto-display); letter-spacing: var(--at-tracking-titulo); }
  .pagina-vende .va-entrada { font-size: 17px; }
  .pagina-vende .va-hero .botones .boton { flex: 1 1 100%; text-align: center; }
  .pagina-vende .va-hero-cifras { gap: var(--at-esp-4) var(--at-esp-7); }
  .pagina-vende .va-hero-cifras b { font-size: 28px; }
  .pagina-vende .va-cinta { flex-direction: column; align-items: flex-start; gap: var(--at-esp-3); }
  .pagina-vende .va-cinta-marco { width: 100%; }
  .pagina-vende .va-experiencia { padding: 56px 0; }
  .pagina-vende .va-anos b { font: var(--at-texto-cifra); }
  .pagina-vende .va-anos li { padding: var(--at-esp-5) var(--at-esp-4); }
  .pagina-vende .va-como-banda { margin: var(--va-seccion) var(--at-esp-2) 0; padding: 56px 0; }
  .pagina-vende .va-pasos { grid-template-columns: 1fr; }
  .pagina-vende .va-oficio-media { padding: 0 0 56px; }
  .pagina-vende .va-oficio-foto.dos { display: none; }
  .pagina-vende .va-oficio-foto.uno { width: 52%; }
  .pagina-vende .va-cabeza-fila { flex-direction: column; align-items: flex-start; }
  .pagina-vende .va-vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-vende .va-vitrina .va-producto:nth-child(n+4) { display: block; }
  .pagina-vende .va-vitrina .va-producto:nth-child(n+5) { display: none; }
  .pagina-vende .emp-campos.tres { grid-template-columns: 1fr; }
  .pagina-vende .va-sobre { padding: 0 var(--at-esp-3) 36px; }
  .pagina-vende .va-carta { padding: var(--at-esp-6) var(--at-esp-5) var(--at-esp-7); }
  .pagina-vende .va-carta-para span { font-size: 28px; }
  .pagina-vende .va-oficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--at-esp-3) var(--at-esp-2); }
  .pagina-vende .va-oficio { padding: var(--at-esp-2) var(--at-esp-3); font-size: 14px; line-height: 1.2; border-radius: var(--at-radio-m); text-align: left; justify-content: flex-start; }
  .pagina-vende .va-oficio:focus-visible { border-radius: var(--at-radio-m); }
  .pagina-vende .va-respuesta-texto { padding: var(--at-esp-7) var(--at-esp-5); }
  .pagina-vende .va-respuesta-texto h3 { font: var(--at-texto-web-titulo-2); }
  .pagina-vende .va-cambio-titulos { display: none; }
  .pagina-vende .va-cambio-fila { grid-template-columns: 1fr; }
  .pagina-vende .va-cambio-antes { padding: var(--at-esp-5) var(--at-esp-5) var(--at-esp-4); }
  .pagina-vende .va-cambio-ahora { padding: var(--at-esp-5); }
  .pagina-vende .va-orden { padding: var(--at-esp-7) var(--at-esp-5) var(--at-esp-5); rotate: 0deg; }
  .pagina-vende .va-orden dl > div { flex-direction: column; gap: 2px; }
  .pagina-vende .va-orden dd { text-align: left; }
  .pagina-vende .va-orden-pie { padding-right: 0; margin-top: 56px; }
  .pagina-vende .va-temporadas { grid-template-columns: 1fr; }
  .pagina-vende .va-ficha { grid-template-columns: 92px minmax(0, 1fr); }
  .pagina-vende .va-ficha-foto img { width: 92px; }
}