/* =========================================================================
   EmkenIA — hoja de estilos única para toda la web
   -------------------------------------------------------------------------
   Todo se sirve desde nuestro propio alojamiento: ni una sola petición a
   servidores de terceros. Las tipografías están en /fuentes/.

   Índice
   00 · Tipografías
   01 · Tokens de color (tema oscuro y tema claro)
   02 · Base y utilidades
   03 · Marca: logotipo y nexus
   04 · Cabecera y navegación
   05 · Portada (hero)
   05b · Escena de la caseta (portada)
   06 · Franja de tecnologías
   07 · Cinta en movimiento
   08 · Cómo trabajamos
   10 · Paquetes
   10b · Capacidades dentro de cada paquete
   11 · Contacto y formulario
   12 · Pie
   13 · Emken: mascota y asistente
   14 · Páginas legales
   14b · Páginas de servicio
   15 · Animaciones y accesibilidad
   ========================================================================= */

/* ---------- 00 · Tipografías ------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fuentes/inter-var.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/fuentes/sora.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/fuentes/sora-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/fuentes/jetbrains-mono.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fuentes/poppins-700.woff2') format('woff2');}

/* ---------- 01 · Tokens ------------------------------------------------- */
:root{
  /* Superficies */
  --ink:#060b1a;
  --ink-2:#0a1330;
  --superficie:#0e1838;
  --tarjeta:rgba(14,24,56,.45);
  --tarjeta-alta:rgba(14,24,56,.72);
  --linea:rgba(150,170,220,.14);
  --linea-fuerte:rgba(150,170,220,.24);
  --suave:rgba(255,255,255,.03);
  --suave-2:rgba(255,255,255,.055);
  --hundido:rgba(0,0,0,.20);

  /* Texto */
  --titulo:#ffffff;
  --nube:#e7ecfa;
  --bruma:#aab6d6;
  --fantasma:rgba(255,255,255,.10);

  /* Marca */
  --rosa:#ff2d6b;
  --carmesi:#e01050;
  --brillo:#ff4d7d;
  --rosa-10:rgba(255,45,107,.10);
  --rosa-15:rgba(255,45,107,.15);
  --rosa-25:rgba(255,45,107,.25);
  --rosa-45:rgba(255,45,107,.45);

  /* Portada */
  --punto:rgba(150,170,220,.22);
  --punto-vivo:rgba(255,77,125,.90);
  --halo-rosa:rgba(255,45,107,.38);
  --halo-violeta:rgba(90,60,255,.22);
  --aviso:#f2b544;

  /* Cristal: el tinte, el filo iluminado y el reflejo que cae del borde */
  --cristal:rgba(255,255,255,.05);
  --cristal-alto:rgba(255,255,255,.085);
  --cristal-filo:rgba(255,255,255,.14);
  --cristal-filo-vivo:rgba(255,255,255,.26);
  --cristal-reflejo:rgba(255,255,255,.10);
  --cristal-sombra:0 22px 50px -28px rgba(0,0,0,.85);
  --cristal-desenfoque:20px;

  /* La palabra clave no es rosa plano: entra casi con el color del titular
     y va cayendo hacia el carmesí. */
  --degradado-clave:linear-gradient(102deg,#ffe1ea 0%,#ff8fb0 24%,var(--rosa) 60%,var(--carmesi) 100%);
  --aviso-10:rgba(242,181,68,.12);
  --aviso-25:rgba(242,181,68,.30);

  /* Sombras */
  --sombra-boton:0 18px 45px -15px rgba(255,45,107,.80);
  --sombra-boton-alta:0 22px 55px -14px rgba(255,45,107,.92);
  --sombra-panel:0 30px 90px -24px rgba(0,0,0,.75), 0 0 60px -18px rgba(255,45,107,.42);
  --sombra-destacado:0 40px 90px -40px rgba(255,45,107,.60);

  /* Emken */
  --emken-cuerpo-a:#ffffff;
  --emken-cuerpo-b:#e9eaef;
  --emken-cuerpo-c:#c9cbd6;
  --emken-cara-a:#1c1c2b;
  --emken-cara-b:#07070e;
  --emken-borde:rgba(255,255,255,0);

  /* Layout */
  --ancho:1240px;
  --radio:24px;
  --cabecera:88px;

  color-scheme:dark;
}

[data-tema="claro"]{
  --ink:#f7f8fc;
  --ink-2:#eef1f8;
  --superficie:#ffffff;
  --tarjeta:#ffffff;
  --tarjeta-alta:#ffffff;
  --linea:rgba(6,22,54,.13);
  --linea-fuerte:rgba(6,22,54,.22);
  --suave:rgba(10,28,63,.035);
  --suave-2:rgba(10,28,63,.05);
  --hundido:rgba(10,28,63,.04);

  --titulo:#0a1c3f;
  --nube:#0a1c3f;
  --bruma:#52617e;
  --fantasma:rgba(10,28,63,.10);

  --rosa:#e92760;
  --carmesi:#c60d46;
  --brillo:#f34f7d;
  --rosa-10:rgba(233,39,96,.09);
  --rosa-15:rgba(233,39,96,.13);
  --rosa-25:rgba(233,39,96,.22);
  --rosa-45:rgba(233,39,96,.42);

  --punto:rgba(30,54,92,.20);
  --punto-vivo:rgba(233,39,96,.85);
  --halo-rosa:rgba(233,39,96,.16);
  --halo-violeta:rgba(90,60,255,.10);
  --aviso:#a86a06;

  --cristal:rgba(255,255,255,.55);
  --cristal-alto:rgba(255,255,255,.75);
  --cristal-filo:rgba(10,28,63,.10);
  --cristal-filo-vivo:rgba(10,28,63,.18);
  --cristal-reflejo:rgba(255,255,255,.85);
  --cristal-sombra:0 22px 45px -30px rgba(10,28,63,.35);

  /* Sobre blanco el arranque tiene que ser más oscuro para que se lea. */
  --degradado-clave:linear-gradient(102deg,#f2547f 0%,var(--rosa) 48%,var(--carmesi) 100%);
  --aviso-10:rgba(168,106,6,.10);
  --aviso-25:rgba(168,106,6,.28);

  --sombra-boton:0 18px 40px -18px rgba(233,39,96,.65);
  --sombra-boton-alta:0 22px 48px -16px rgba(233,39,96,.75);
  --sombra-panel:0 30px 90px -24px rgba(6,22,54,.22), 0 0 60px -18px rgba(233,39,96,.28);
  --sombra-destacado:0 40px 80px -44px rgba(233,39,96,.45);

  --emken-borde:rgba(10,28,63,.10);

  color-scheme:light;
}

/* ---------- 02 · Base --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--cabecera) + 20px);}
body{
  background:var(--ink);
  color:var(--nube);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--rosa);color:#fff;}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px;border-radius:6px;}

h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;color:var(--titulo);letter-spacing:-.02em;line-height:1.1;}

/* La palabra que carga el titular: un solo acento por título, que entra casi
   con el color del titular y transiciona hacia el rosa.
   El color plano queda de respaldo por si no hay «background-clip:text». */
.clave{color:var(--rosa);font-weight:inherit;}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .clave{
    background:var(--degradado-clave);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

/* En alto contraste el texto transparente desaparece: se vuelve al color. */
@media (forced-colors:active){
  .clave{background:none;color:currentColor;-webkit-text-fill-color:currentColor;}
}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px;}
.solo-lectores{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Etiqueta monoespaciada rosa */
.mono{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.28em;
  color:var(--rosa);
}

.degradado-texto{
  background:linear-gradient(115deg,#ff6a96 0%,var(--rosa) 55%,var(--carmesi) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-tema="claro"] .degradado-texto{
  background:linear-gradient(115deg,#f2547f 0%,var(--rosa) 50%,var(--carmesi) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.degradado-marca{background:linear-gradient(115deg,var(--brillo) 0%,var(--carmesi) 100%);}

/* Botones */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;cursor:pointer;text-align:center;
  border-radius:999px;padding:15px 28px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s, background-color .3s;
}
.boton .flecha{transition:transform .3s cubic-bezier(.16,1,.3,1);}
.boton:hover .flecha{transform:translateX(4px);}
.boton-primario{
  background:linear-gradient(115deg,var(--brillo) 0%,var(--carmesi) 100%);
  color:#fff;box-shadow:var(--sombra-boton);
}
.boton-primario:hover{transform:translateY(-2px);box-shadow:var(--sombra-boton-alta);}
.boton-primario:disabled{opacity:.6;cursor:wait;transform:none;}
.boton-fantasma{
  background:var(--suave);color:var(--nube);
  border:1px solid var(--linea);
}
.boton-fantasma:hover{border-color:var(--rosa-45);background:var(--suave-2);transform:translateY(-2px);}
.boton-pequeno{padding:11px 20px;font-size:13px;}

.enlace-rosa{color:var(--rosa);font-weight:600;}
.enlace-rosa:hover{text-decoration:underline;}

/* Encabezado de sección */
.seccion{padding:112px 0;}
.cabecera-seccion{max-width:640px;}
.cabecera-seccion h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;margin-top:16px;}
.cabecera-seccion p{margin-top:18px;color:var(--bruma);}
.centrado{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- 03 · Marca -------------------------------------------------- */
.logotipo{display:inline-flex;align-items:flex-start;gap:0;line-height:1;}
.logotipo svg{height:1em;width:auto;}
.marca{
  display:inline-flex;align-items:center;
  font-family:'Poppins','Sora',sans-serif;font-weight:700;
  letter-spacing:-.015em;line-height:1;white-space:nowrap;
  font-size:26px;
}
.marca .marca-em{color:var(--titulo);}
.marca .marca-ia{
  position:relative;color:var(--rosa);
  text-shadow:0 0 18px var(--rosa-45), 0 0 42px var(--rosa-25);
}
/* El nexus se apoya sobre la "I" */
.marca .nexus{
  position:absolute;left:-.30em;top:-.60em;
  width:.92em;height:.828em;overflow:visible;
  filter:drop-shadow(0 0 6px var(--rosa-45));
}
.marca .nexus circle{fill:var(--rosa);}
.marca .nexus path{stroke:var(--rosa);}

/* Marca de nexus suelta (favicon, viñetas, avatares) */
.nexus-suelto{width:1em;height:1em;overflow:visible;}
.nexus-suelto circle{fill:currentColor;}
.nexus-suelto path{stroke:currentColor;}

/* ---------- 04 · Cabecera ----------------------------------------------- */
.cabecera{
  position:fixed;inset:14px 0 auto 0;z-index:50;
  /* La franja solo transporta la barra: no debe interceptar clics. */
  pointer-events:none;
}
.cabecera-fila{
  position:relative;pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--ancho);margin:0 auto;padding:11px 14px 11px 22px;
  border-radius:20px;
}
.cabecera .marca{font-size:23px;}
.menu{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--bruma);}
.acciones{display:flex;align-items:center;gap:10px;}

.selector-idioma{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--linea);border-radius:999px;
  padding:3px;background:var(--suave);
}
/* Cada idioma es su bandera: se entiende sin leer y no depende del idioma del visitante */
.selector-idioma a{
  display:grid;place-items:center;
  padding:4px;border-radius:999px;
  transition:background-color .25s, transform .25s;
}
.selector-idioma .bandera{
  display:block;width:22px;height:15px;border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.28) inset;
  opacity:.55;transition:opacity .25s;
}
.selector-idioma a:hover .bandera,
.selector-idioma a:focus-visible .bandera{opacity:1;}
.selector-idioma a:hover{transform:translateY(-1px);}
.selector-idioma a[aria-current="true"]{background:var(--rosa-15);}
.selector-idioma a[aria-current="true"] .bandera{opacity:1;}

.boton-icono{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--linea);border-radius:999px;
  background:var(--suave);color:var(--nube);cursor:pointer;
  transition:transform .25s, border-color .25s, background-color .25s;
}
.boton-icono:hover{transform:translateY(-2px);border-color:var(--rosa-45);}
.boton-icono svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.icono-luna{display:none;}
[data-tema="claro"] .icono-sol{display:none;}
[data-tema="claro"] .icono-luna{display:block;}

.abrir-menu{display:none;}

/* ---------- 05 · Portada ------------------------------------------------ */
.portada{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:calc(100vh - 172px);min-height:calc(100svh - 172px);
  padding-top:calc(var(--cabecera) + 18px);padding-bottom:100px;
  overflow:hidden;
}
.trama,.trama-viva,.halo{position:absolute;inset:0;pointer-events:none;}
.trama{
  background-image:radial-gradient(circle at center, var(--punto) 1px, transparent 1.4px);
  background-size:26px 26px;
}
.trama-viva{
  background-image:radial-gradient(circle at center, var(--punto-vivo) 1.6px, transparent 2px);
  background-size:26px 26px;
  opacity:.5;transition:opacity .45s ease;
  --mx:50%;--my:40%;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my), #000 0, #000 90px, transparent 220px);
  mask-image:radial-gradient(circle at var(--mx) var(--my), #000 0, #000 90px, transparent 220px);
}
.portada.activa .trama-viva{opacity:1;}
.halo{inset:auto;border-radius:50%;filter:blur(130px);}
.halo-rosa{
  right:-160px;top:-160px;width:560px;height:560px;
  background:radial-gradient(circle, var(--halo-rosa), transparent 70%);
  animation:deriva 14s ease-in-out infinite;
}
.halo-violeta{
  left:-210px;bottom:-80px;width:520px;height:520px;
  background:radial-gradient(circle, var(--halo-violeta), transparent 70%);
  animation:deriva 18s ease-in-out infinite reverse;
}

.portada-rejilla{
  position:relative;z-index:1;width:100%;
  max-width:900px;margin:0 auto;text-align:center;
}
.insignia{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--linea);border-radius:999px;
  background:var(--suave);padding:7px 16px;margin-bottom:20px;
}
.insignia .pulso{
  width:6px;height:6px;border-radius:50%;background:var(--rosa);
  animation:latido 2s ease-in-out infinite;
}
.portada h1{
  font-size:clamp(2.35rem,4.7vw,3.85rem);
  font-weight:800;line-height:1.06;
}
.portada .entradilla{
  margin:20px auto 0;max-width:36em;
  font-size:1.075rem;line-height:1.65;color:var(--bruma);
}
.portada-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px;}
.cifras{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:620px;margin:32px auto 0;padding-top:24px;
  border-top:1px solid var(--linea);
}

/* La flecha que baja: el texto no enseña nada, así que invita a seguir.
   Va anclada al pie de la portada, con la franja de tecnologías asomando. */
.portada-bajar{
  position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.8125rem;color:var(--bruma);white-space:nowrap;
  transition:color .25s;
}
.portada-bajar:hover{color:var(--rosa);}
.portada-bajar-flecha{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--linea-fuerte);background:var(--suave);
  animation:portada-bota 2.4s ease-in-out infinite;
  transition:border-color .25s, background-color .25s;
}
.portada-bajar:hover .portada-bajar-flecha{border-color:var(--rosa-45);background:var(--rosa-10);}
.portada-bajar-flecha svg{width:19px;height:19px;}
@keyframes portada-bota{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(7px);}
}
.cifras dt{font-family:'Sora',sans-serif;font-size:1.55rem;font-weight:700;color:var(--titulo);letter-spacing:-.02em;}
.cifras dd{margin-top:5px;font-size:.8125rem;line-height:1.35;color:var(--bruma);}

/* Panel «Emken en directo» */
.panel-emken{
  position:relative;border:1px solid var(--linea);border-radius:28px;
  background:var(--tarjeta);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:22px;animation:flotar 7s ease-in-out infinite;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.9);
}
[data-tema="claro"] .panel-emken{box-shadow:0 30px 70px -46px rgba(6,22,54,.45);}
.panel-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.panel-puntos{display:flex;gap:6px;}
.panel-puntos i{width:9px;height:9px;border-radius:50%;background:var(--fantasma);}
.panel-puntos i:last-child{background:var(--rosa);}
.panel-presentacion{display:flex;align-items:center;gap:14px;margin-top:20px;}
.panel-presentacion .caja-emken{width:64px;}
.panel-presentacion strong{display:block;font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--titulo);}
.panel-presentacion span{display:flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--bruma);margin-top:3px;}
.punto-vivo{
  width:6px;height:6px;border-radius:50%;background:var(--rosa);
  box-shadow:0 0 10px var(--rosa);animation:latido 2s ease-in-out infinite;
}
.panel-conversacion{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.globo{
  max-width:88%;padding:11px 15px;border-radius:16px;font-size:.875rem;line-height:1.55;
}
.globo-emken{
  align-self:flex-start;border-bottom-left-radius:5px;
  background:var(--suave-2);border:1px solid var(--linea);color:var(--nube);
}
.globo-yo{
  align-self:flex-end;border-bottom-right-radius:5px;
  background:linear-gradient(115deg,var(--brillo),var(--carmesi));color:#fff;
}
.panel-pie{
  margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-radius:18px;padding:14px 16px;
  background:linear-gradient(90deg,var(--rosa-15),transparent);
}
.panel-pie div{min-width:0;}
.panel-pie strong{display:block;font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--titulo);}
.panel-pie small{font-size:.75rem;color:var(--bruma);}
.panel-pie button{
  flex:0 0 auto;border:none;cursor:pointer;border-radius:999px;
  background:linear-gradient(115deg,var(--brillo),var(--carmesi));color:#fff;
  font-size:12.5px;font-weight:600;padding:10px 16px;
  transition:transform .25s, box-shadow .25s;
}
.panel-pie button:hover{transform:translateY(-2px);box-shadow:var(--sombra-boton);}

/* ---------- 05b · Escena de la caseta (portada) --------------------------
   La historia del brief contada en una sola pieza: el negocio apagado, la
   llegada de Emken, los flujos que entran y el negocio ya encendido.

   El marcaje se escribe en la fase 5 (el «después»): es lo que se ve sin
   JavaScript y también con «prefers-reduced-motion». El bucle lo mueve
   script.js cambiando data-fase en el contenedor.
   ----------------------------------------------------------------------- */
.escena-caseta{position:relative;margin-top:20px;}
.escena-caseta.sin-animar *{transition:none!important;animation:none!important;}
.caseta{width:100%;height:auto;overflow:visible;}

/* El edificio: apagado por defecto, encendido a partir de la fase 4 */
.caseta .suelo{fill:none;stroke:var(--linea-fuerte);stroke-width:2;stroke-linecap:round;}
.caseta .edificio{transition:filter .7s ease;}
.caseta .obra{fill:var(--superficie);stroke:var(--linea-fuerte);stroke-width:2;transition:stroke .7s ease;}
.caseta .tejado{fill:none;stroke:var(--linea-fuerte);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .7s ease;}
.caseta .toldo{fill:var(--linea-fuerte);transition:fill .7s ease;}
.caseta .rotulo{fill:var(--linea-fuerte);transition:fill .7s ease, filter .7s ease;}
.caseta .ventana{fill:var(--linea);transition:fill .7s ease, filter .7s ease;}
.caseta .puerta{fill:var(--linea);transition:fill .7s ease;}

.escena-caseta:is([data-fase="4"],[data-fase="5"]) .edificio{filter:drop-shadow(0 0 24px var(--rosa-25));}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .obra{stroke:var(--rosa-45);}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .tejado{stroke:var(--rosa);}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .toldo{fill:var(--rosa);}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .rotulo{fill:var(--rosa);filter:drop-shadow(0 0 8px var(--rosa-45));}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .ventana{fill:var(--brillo);filter:drop-shadow(0 0 10px var(--rosa-45));}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .puerta{fill:var(--rosa-25);}

/* Los canales que entran al negocio */
.caseta .flujo{
  fill:none;stroke:var(--rosa);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:5 11;opacity:0;transition:opacity .7s ease;
}
.escena-caseta:is([data-fase="3"],[data-fase="4"],[data-fase="5"]) .flujo{
  opacity:.8;animation:caseta-flujo 1.5s linear infinite;
}
.caseta .flujo:nth-child(2){animation-delay:.22s;}
.caseta .flujo:nth-child(3){animation-delay:.44s;}
.caseta .flujo:nth-child(4){animation-delay:.66s;}
.caseta .flujo:nth-child(5){animation-delay:.12s;}
.caseta .flujo:nth-child(6){animation-delay:.34s;}
.caseta .flujo:nth-child(7){animation-delay:.56s;}

/* La gente que entra: poca antes, mucha después */
.caseta .persona{fill:var(--bruma);opacity:0;transition:fill .7s ease;}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .persona{fill:var(--rosa);}
.caseta .persona.pobre{animation:caseta-anda-izq 8.5s linear infinite both;}
.caseta .persona.pobre.der{animation-name:caseta-anda-der;}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .persona.rica{animation:caseta-anda-izq 4.6s linear infinite both;}
.escena-caseta:is([data-fase="4"],[data-fase="5"]) .persona.rica.der{animation-name:caseta-anda-der;}

/* Etiquetas de canal: HTML sobre el SVG, para que se traduzcan y no
   encojan cuando el dibujo escala. */
.caseta-etiqueta{
  position:absolute;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid var(--linea);border-radius:999px;padding:5px 11px;background:var(--suave);
  font-size:.72rem;line-height:1.2;color:var(--bruma);opacity:.45;
  transition:opacity .5s ease, color .5s ease, border-color .5s ease;
}
.caseta-etiqueta::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--linea-fuerte);transition:background-color .5s ease, box-shadow .5s ease;
}
.escena-caseta:is([data-fase="3"],[data-fase="4"],[data-fase="5"]) .caseta-etiqueta{
  opacity:1;color:var(--nube);border-color:var(--rosa-25);
}
.escena-caseta:is([data-fase="3"],[data-fase="4"],[data-fase="5"]) .caseta-etiqueta::before{
  background:var(--rosa);box-shadow:0 0 8px var(--rosa);
}
/* Cada etiqueta se sienta en el arranque de su flujo. Las siete quedan por
   encima de la banda inferior derecha, que es donde está Emken de pie. */
.caseta-etiqueta.i1{left:0;top:3%;}
.caseta-etiqueta.i2{left:0;top:25%;}
.caseta-etiqueta.i3{left:0;top:47%;}
.caseta-etiqueta.i4{left:0;top:69%;}
.caseta-etiqueta.d1{right:0;top:3%;}
.caseta-etiqueta.d2{right:0;top:25%;}
.caseta-etiqueta.d3{right:0;top:47%;}

/* Emken llega como constructor, no como saludo */
.escena-caseta .caseta-emken{
  position:absolute;left:64%;top:64%;width:17%;
  opacity:0;transform:translateX(16px) scale(.9);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.escena-caseta:not([data-fase="0"]) .caseta-emken{opacity:1;transform:none;}
.escena-caseta[data-fase="2"] .caseta-emken{animation:caseta-martillo .5s ease-in-out 3;}

/* ---------- 06 · Franja de tecnologías ---------------------------------- */
.tecnologias{
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:var(--hundido);padding:26px 0;text-align:center;
}
.tecnologias h2{
  font-family:'Sora',system-ui,sans-serif;
  font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.02em;
  color:var(--titulo);margin-bottom:24px;
}
/* Desfila igual que la cinta, con el mismo fundido en los bordes. Se para al
   pasar por encima para poder leer un logotipo concreto. */
.logos{overflow:hidden;
  /* Se come el padding del contenedor para que la cinta llegue al borde y el
     fundido tenga sitio: si no, en móvil parece que se corta a media pantalla. */
  margin-inline:-24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.logos-pista{display:flex;width:max-content;animation:desfilar 46s linear infinite;}
.logos:hover .logos-pista{animation-play-state:paused;}
.logos-grupo{display:flex;align-items:center;gap:44px;padding-right:44px;flex:0 0 auto;}

/* Ojo con el selector: la pista y el grupo también son div, y con «.logos div»
   la opacidad se multiplicaría en cada nivel. */
.logos-grupo > div{
  display:flex;align-items:center;gap:10px;color:var(--bruma);
  opacity:.6;transition:opacity .3s, color .3s;
}
.logos-grupo > div:hover{opacity:1;color:var(--nube);}
.logos svg{height:23px;width:auto;fill:currentColor;flex:0 0 auto;}
.logos span{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;}

/* ---------- 07 · Cinta -------------------------------------------------- */
.cinta{
  border-bottom:1px solid var(--linea);
  background:var(--ink-2);padding:18px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.cinta-pista{display:flex;width:max-content;animation:desfilar 34s linear infinite;}
/* En las páginas interiores la cinta vive dentro del contenedor: se le
   redondean los bordes para que no parezca una franja suelta. */
.pagina-cuerpo .cinta{
  margin:10px 0 2px;border:1px solid var(--linea);border-radius:20px;
}
.cinta-grupo{display:flex;gap:46px;padding-right:46px;flex:0 0 auto;}
.cinta-grupo span{
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  font-size:.875rem;color:var(--bruma);
}
.cinta-grupo span::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--rosa);flex:0 0 auto;
}
.cinta:hover .cinta-pista{animation-play-state:paused;}

/* ---------- 08 · Cómo trabajamos ----------------------------------------
   Antes esto eran dos rejillas de cuatro tarjetas seguidas. Ahora es un
   acordeón: un paso abierto cada vez, con lo que entregamos y su dibujo.
   ----------------------------------------------------------------------- */
.recorrido{
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:var(--ink-2);
}
.recorrido .cabecera-seccion{max-width:720px;}
.recorrido-pasos{
  margin-top:52px;overflow:hidden;
  border:1px solid var(--linea);border-radius:28px;background:var(--superficie);
}
.paso-guiado + .paso-guiado{border-top:1px solid var(--linea);}
.paso-guiado summary{
  display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;
  padding:24px 30px;transition:background-color .25s;
}
.paso-guiado summary::-webkit-details-marker{display:none;}
.paso-guiado summary:hover{background:var(--suave);}
.paso-numero{
  flex:0 0 auto;font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:700;
  color:var(--fantasma);letter-spacing:-.02em;line-height:1;transition:color .3s;
}
.paso-guiado[open] .paso-numero{color:var(--rosa);}
.paso-titular{flex:1;min-width:0;}
.paso-titular strong{
  font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:600;color:var(--titulo);
  letter-spacing:-.02em;
}
.paso-titular > span{color:var(--bruma);font-size:.95rem;}
.paso-flecha{
  flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--rosa);border-bottom:2px solid var(--rosa);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.paso-guiado[open] .paso-flecha{transform:rotate(-135deg) translateY(1px);}

.paso-detalle{
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  padding:0 30px 34px;
}
.paso-texto h3{font-size:1.3rem;font-weight:600;}
.paso-texto p{margin-top:12px;color:var(--bruma);line-height:1.7;}
.paso-entregables{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;}
.paso-entregables li{
  font-size:.78rem;color:var(--bruma);background:var(--suave);
  border:1px solid var(--linea);border-radius:999px;padding:5px 12px;
}
.paso-texto .enlace-rosa{display:inline-block;margin-top:22px;font-size:.875rem;}

/* Los dibujos hablan el mismo idioma visual que la caseta de la portada */
.paso-dibujo{width:100%;max-width:400px;height:auto;margin:0 auto;}
.paso-dibujo .apagado{fill:none;stroke:var(--linea-fuerte);stroke-width:2;}
.paso-dibujo .apagado-solid{fill:var(--fantasma);}
.paso-dibujo .acento,.paso-dibujo .acento-solid{fill:var(--rosa);}
.paso-dibujo .trazo{fill:none;stroke:var(--linea-fuerte);stroke-width:2;}
.paso-dibujo .trazo-fino{fill:none;stroke:var(--linea);stroke-width:1.6;}
.paso-dibujo .trazo-acento{fill:none;stroke:var(--rosa);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.paso-dibujo .trazo-acento-fino{fill:none;stroke:var(--rosa-45);stroke-width:2;}
.paso-dibujo .paso-vector{fill:none;stroke:var(--bruma);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.paso-dibujo .paso-marca{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.paso-dibujo .paso-cable{
  fill:none;stroke:var(--rosa);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:4 9;opacity:.75;
}
.paso-guiado[open] .paso-cable{animation:caseta-flujo 1.6s linear infinite;}
.paso-dibujo .paso-pulso{
  fill:none;stroke:var(--rosa);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

/* --- Dibujos animados de los pasos ------------------------------------
   Cada animación arranca solo cuando el paso está abierto: así el
   acordeón no tiene cinco dibujos moviéndose a la vez.
   --------------------------------------------------------------------- */

/* 01 · El cerebro se dibuja solo: primero la corteza, después los pliegues,
   y al final la señal recorre los surcos. pathLength="100" normaliza cada
   trazo, así el dibujado es exacto mida lo que mida el camino. */
.paso-dibujo .cx-cortex,
.paso-dibujo .cx-cerebelo,
.paso-dibujo .cx-tronco{
  fill:none;stroke:var(--linea-fuerte);stroke-linecap:round;stroke-linejoin:round;
}
.paso-dibujo .cx-cortex{stroke-width:2.4;}
.paso-dibujo .cx-cerebelo{stroke-width:2.1;}
.paso-dibujo .cx-tronco{stroke-width:2.4;}
.paso-dibujo .cx-raya{
  fill:none;stroke:var(--linea-fuerte);stroke-width:1.5;stroke-linecap:round;opacity:.75;
}
.paso-dibujo .cx-pliegue{
  fill:none;stroke:var(--rosa-45);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.paso-dibujo .cx-senal{
  fill:none;stroke:var(--rosa);stroke-width:2.1;stroke-linecap:round;
  stroke-dasharray:5 13;opacity:0;
}
.paso-dibujo .cx-nodo{
  fill:var(--rosa);transform-box:fill-box;transform-origin:center;opacity:0;
}
.paso-guiado[open] .cx-cortex,
.paso-guiado[open] .cx-cerebelo,
.paso-guiado[open] .cx-tronco,
.paso-guiado[open] .cx-raya,
.paso-guiado[open] .cx-pliegue{
  stroke-dasharray:100;
  animation:cx-trazar .9s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes cx-trazar{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
.paso-guiado[open] .cx-senal{
  animation:cx-encender .6s 1.5s forwards, cx-fluir 1.7s 1.5s linear infinite;
}
@keyframes cx-encender{to{opacity:.95;}}
/* -36 son dos patrones enteros de 5+13: el bucle no da un salto */
@keyframes cx-fluir{to{stroke-dashoffset:-36;}}
.paso-guiado[open] .cx-nodo{animation:cx-nodo 2.6s 1.6s ease-in-out infinite backwards;}
@keyframes cx-nodo{
  0%,100%{opacity:.45;transform:scale(1);}
  50%{opacity:1;transform:scale(1.45);}
}

/* 02 · El boceto se pinta y se repinta: la página nunca se queda quieta */
.paso-dibujo .paso-bloque{fill:var(--fantasma);opacity:0;}
.paso-dibujo .paso-bloque.acento{fill:var(--rosa);}
.paso-guiado[open] .paso-bloque{animation:paso-pintar 4.4s ease-in-out infinite both;}
@keyframes paso-pintar{
  0%{opacity:0;transform:translateX(-7px);}
  9%{opacity:1;transform:none;}
  86%{opacity:1;transform:none;}
  100%{opacity:0;transform:translateX(-7px);}
}
.paso-dibujo .paso-pelo{fill:var(--rosa);}
.paso-dibujo .paso-gota{fill:var(--rosa);opacity:0;}
.paso-guiado[open] .paso-gota{animation:paso-gotear 4.4s ease-in-out infinite;}
@keyframes paso-gotear{
  0%,64%{opacity:0;transform:translateY(0) scale(.6);}
  74%{opacity:.9;transform:translateY(0) scale(1);}
  92%,100%{opacity:0;transform:translateY(9px) scale(.7);}
}
.paso-guiado[open] .paso-pincel{animation:paso-pincelada 4.4s ease-in-out infinite;}
@keyframes paso-pincelada{
  0%,100%{transform:translate(0,0);}
  22%{transform:translate(-34px,16px);}
  48%{transform:translate(-16px,34px);}
  72%{transform:translate(-104px,10px);}
}

/* 03 · La obra se levanta y acaba rematada: nada queda a medias */
.paso-dibujo .paso-ladrillo{
  fill:var(--fantasma);stroke:var(--linea-fuerte);stroke-width:1.4;opacity:0;
}
.paso-dibujo .paso-ladrillo.acento{fill:var(--rosa-15);stroke:var(--rosa-45);}
.paso-guiado[open] .paso-ladrillo{animation:paso-asentar 6.4s ease-in-out infinite both;}
@keyframes paso-asentar{
  0%{opacity:0;transform:translateY(-20px);}
  4%{opacity:1;transform:translateY(2px);}
  7%{transform:none;}
  92%{opacity:1;transform:none;}
  100%{opacity:0;transform:translateY(-8px);}
}
.paso-dibujo .paso-remate{
  fill:none;stroke:var(--linea-fuerte);stroke-width:3;stroke-linecap:round;opacity:0;
}
.paso-dibujo .paso-tejado{
  fill:none;stroke:var(--rosa);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;
}
.paso-guiado[open] .paso-remate,
.paso-guiado[open] .paso-tejado{animation:paso-rematar 6.4s ease-in-out infinite both;}
@keyframes paso-rematar{
  0%{opacity:0;transform:translateY(-10px);}
  6%{opacity:1;transform:none;}
  92%{opacity:1;transform:none;}
  100%{opacity:0;}
}
.paso-dibujo .paso-listo{
  fill:var(--rosa);opacity:0;transform-box:fill-box;transform-origin:center;
}
.paso-dibujo .paso-listo-marca{
  fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;
}
.paso-guiado[open] .paso-listo,
.paso-guiado[open] .paso-listo-marca{animation:paso-sellar 6.4s ease-in-out infinite both;}
@keyframes paso-sellar{
  0%{opacity:0;transform:scale(.5);}
  6%{opacity:1;transform:scale(1.12);}
  10%{transform:scale(1);}
  88%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.8);}
}

/* 04 · Cada nodo del flujo se enciende por turnos */
.paso-dibujo .paso-chispa{
  fill:var(--rosa);opacity:.25;transform-box:fill-box;transform-origin:center;
}
.paso-guiado[open] .paso-chispa{animation:paso-chispear 2.8s ease-in-out infinite;}
@keyframes paso-chispear{
  0%,70%,100%{opacity:.2;transform:scale(1);}
  20%{opacity:1;transform:scale(1.6);}
  45%{opacity:.5;transform:scale(1.1);}
}
.paso-guiado[open] .paso-engranaje{animation:paso-girar 2.8s ease-in-out infinite;}
@keyframes paso-girar{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}
.paso-dibujo .paso-engranaje{transform-box:fill-box;transform-origin:center;}

/* 05 · El escudo se traza y su propio contorno se repite hacia fuera */
.paso-dibujo .paso-escudo{
  fill:none;stroke:var(--linea-fuerte);stroke-width:2;stroke-linejoin:round;
}
.paso-guiado[open] .paso-escudo{
  stroke-dasharray:340;animation:paso-trazar-escudo 1.6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes paso-trazar-escudo{from{stroke-dashoffset:340;}to{stroke-dashoffset:0;}}
.paso-guiado[open] .paso-pulso{
  stroke-dasharray:104 34;animation:paso-latir-linea 3.4s linear infinite;
}
@keyframes paso-latir-linea{
  from{stroke-dashoffset:138;}
  to{stroke-dashoffset:0;}
}
.paso-dibujo .paso-vigilia{
  fill:none;stroke:var(--rosa);stroke-width:2;stroke-linejoin:round;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.paso-guiado[open] .paso-vigilia{animation:paso-vigilar 3.4s ease-out infinite;}
@keyframes paso-vigilar{
  0%{transform:scale(1);opacity:.45;}
  75%{opacity:0;}
  100%{transform:scale(1.16);opacity:0;}
}

/* ---------- 10 · Paquetes ----------------------------------------------- */
.paquetes{position:relative;overflow:hidden;}
.paquetes::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:900px;height:500px;max-width:120vw;border-radius:50%;
  background:var(--rosa-10);filter:blur(160px);pointer-events:none;
}
.rejilla-paquetes{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin-top:62px;align-items:start;
}
.paquete{
  position:relative;display:flex;flex-direction:column;height:100%;
  border:1px solid var(--linea);border-radius:26px;
  background:var(--tarjeta);padding:30px 26px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s;
}
.paquete:hover{transform:translateY(-6px);border-color:var(--rosa-45);}
.paquete.destacado{
  border-color:var(--rosa-45);background:var(--tarjeta-alta);
  box-shadow:var(--sombra-destacado);
}
.etiqueta-destacado{
  position:absolute;top:-13px;left:26px;
  border-radius:999px;padding:5px 13px;
  background:linear-gradient(115deg,var(--brillo),var(--carmesi));color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.paquete h3{font-size:1.4rem;font-weight:700;}
.paquete .lema{margin-top:5px;font-size:.8125rem;color:var(--bruma);min-height:2.4em;}
.paquete .precio{
  display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;margin-top:20px;min-height:70px;
  font-family:'Sora',sans-serif;font-weight:800;font-size:2.1rem;color:var(--titulo);letter-spacing:-.03em;
}
.paquete .precio .desde{
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;color:var(--bruma);
  letter-spacing:0;width:100%;margin-bottom:-4px;
}
.paquete .precio .periodo{font-family:'Inter',sans-serif;font-size:.8125rem;font-weight:500;color:var(--bruma);letter-spacing:0;margin-bottom:7px;}
.paquete .nota-precio{margin-top:7px;font-size:.72rem;color:var(--bruma);}
.paquete .boton{width:100%;margin-top:22px;}
.paquete ul{
  list-style:none;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:11px;flex:1;
}
.paquete li{display:flex;align-items:flex-start;gap:11px;font-size:.875rem;line-height:1.5;color:var(--nube);}
.paquete li svg{
  flex:0 0 auto;width:17px;height:17px;margin-top:2px;border-radius:50%;
  background:var(--rosa-15);padding:4px;stroke:var(--rosa);stroke-width:3.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.aviso-paquetes{margin-top:34px;text-align:center;font-size:.875rem;color:var(--bruma);}

/* ---------- 10b · Capacidades dentro de cada paquete --------------------
   La comparativa no es una tabla aparte: cada paquete lleva sus propias
   filas dentro de su tarjeta, en el mismo orden en los tres, para poder
   compararlos en horizontal. El Análisis Digital va en paralelo, pero sin
   tabla: es gratuito y no compite con ellos.
   ----------------------------------------------------------------------- */
.rejilla-paquetes--cuatro{grid-template-columns:.72fr repeat(3,minmax(0,1fr));}

/* Llamada al asesor, integrada en la cabecera de la sección */
.cabecera-asesor{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:28px;padding:7px 7px 7px 15px;
  border:1px solid var(--linea);border-radius:999px;background:var(--suave);
  font-size:.875rem;color:var(--bruma);
}
.cabecera-asesor .caja-emken{width:30px;}

/* La tarjeta recomendada se señala un momento al volver del asesor */
.paquete.senalado{border-color:var(--rosa);box-shadow:var(--sombra-destacado);}

.paquete--tabla.destacado{
  border-color:var(--rosa-45);background:var(--tarjeta-alta);
  box-shadow:var(--sombra-destacado);
}

/* El Análisis Digital: misma columna, sin tabla */
.paquete-analisis{
  align-self:start;height:auto;border-style:dashed;border-color:var(--rosa-45);
  background:linear-gradient(165deg,var(--rosa-15),transparent 62%),var(--tarjeta-alta);
}
.paquete-analisis:hover{transform:none;}
.paquete-analisis .etiqueta-gratis{
  align-self:flex-start;border-radius:999px;padding:5px 13px;
  background:linear-gradient(115deg,var(--brillo),var(--carmesi));color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.paquete-analisis h3{margin-top:12px;}

/* Las marcas: tick para lo que va tal cual, corona para lo que se hace a
   medida (que está por encima), raya para lo que no entra. */
.marca-si svg,.leyenda-si svg,.capacidad--implementado .capacidad-marca svg{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  background:var(--rosa-15);padding:4px;stroke:var(--rosa);stroke-width:3.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.leyenda-plus svg,.capacidad--personalizado .capacidad-marca svg{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  background:var(--rosa);padding:2.8px;fill:#fff;stroke:none;
}

.paquete ul.analisis-lista{
  list-style:none;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:11px;flex:1;
}
.analisis-lista li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:.8125rem;line-height:1.5;color:var(--nube);
}

/* Las filas de la tarjeta */
.capacidades{
  list-style:none;margin-top:24px;padding-top:8px;
  border-top:1px solid var(--linea);flex:1;
}
.capacidad{border-bottom:1px solid var(--linea);}
.capacidad:last-child{border-bottom:0;}
.capacidad > details > summary,
.capacidad-mitad > details > summary,
.capacidad--no{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 2px;min-height:44px;
  font-size:.8125rem;line-height:1.45;
}
.capacidad > details > summary,
.capacidad-mitad > details > summary{cursor:pointer;list-style:none;transition:color .2s;}
.capacidad > details > summary::-webkit-details-marker,
.capacidad-mitad > details > summary::-webkit-details-marker{display:none;}
.capacidad > details > summary:hover .capacidad-nom,
.capacidad-mitad > details > summary:hover .capacidad-nom{color:var(--rosa);}
.capacidad-marca{flex:0 0 auto;display:flex;margin-top:1px;}
.capacidad-nom{min-width:0;color:var(--nube);transition:color .2s;}
.capacidad--no{color:var(--bruma);opacity:.55;}
.capacidad--no .capacidad-marca{
  width:17px;height:17px;margin-top:1px;
  align-items:center;justify-content:center;border-radius:50%;
  border:1.5px solid var(--linea-fuerte);
}
.capacidad--no .capacidad-marca::before{
  content:'';width:7px;height:1.5px;border-radius:1px;background:var(--linea-fuerte);
}
.capacidad--personalizado .capacidad-nom{color:var(--titulo);font-weight:600;}

/* El detalle de esa característica, en ese paquete */
.capacidad > details > p,
.capacidad-mitad > details > p{
  margin:0 0 13px;padding:11px 13px;
  border-left:2px solid var(--rosa-45);border-radius:0 10px 10px 0;
  background:var(--suave);
  font-size:.78rem;line-height:1.6;color:var(--bruma);
}

/* El alcance de cada columna, en fucsia: es lo que cambia entre paquetes */
.capacidad-valor{
  display:block;margin-top:2px;
  color:var(--rosa);font-weight:700;font-size:.78rem;letter-spacing:-.01em;
}

/* Los dos asistentes comparten fila, a mitades */
.paquete li.capacidad{display:block;}
.paquete li.capacidad--no{display:flex;align-items:flex-start;gap:10px;}
.paquete li.capacidad--doble{
  display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:start;
  padding:11px 2px 12px;
}
.capacidad-titulo{
  display:block;margin-bottom:9px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bruma);white-space:nowrap;
}
.capacidad--doble .capacidad-titulo{grid-column:1 / -1;}
.capacidad-mitad > details > summary,
.capacidad-mitad.capacidad--no{padding:0;min-height:0;}
.capacidad-mitad + .capacidad-mitad{border-left:1px solid var(--linea);padding-left:10px;}
.capacidad-mitad > details > p{margin-top:9px;}

/* La cuota, dentro de la propia tarjeta */
.cuota{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--linea);
  font-size:.78rem;color:var(--bruma);
}
.cuota--simple strong{display:block;color:var(--titulo);font-size:.8125rem;}
.cuota--simple p{margin-top:6px;line-height:1.55;}
.cuota > summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  color:var(--titulo);font-size:.8125rem;font-weight:600;transition:color .2s;
}
.cuota > summary::-webkit-details-marker{display:none;}
.cuota > summary:hover{color:var(--rosa);}
.cuota > summary::after{
  content:'';margin-left:auto;flex:0 0 auto;width:7px;height:7px;
  border-right:2px solid var(--rosa);border-bottom:2px solid var(--rosa);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.cuota[open] > summary::after{transform:rotate(-135deg) translateY(1px);}
.cuota-cuerpo ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.cuota-cuerpo li{display:flex;align-items:flex-start;gap:10px;line-height:1.5;color:var(--nube);}
.cuota-cuerpo li svg{
  flex:0 0 auto;width:15px;height:15px;margin-top:1px;border-radius:50%;
  background:var(--rosa-15);padding:3.5px;stroke:var(--rosa);stroke-width:3.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.cuota-cuerpo > p{margin-top:13px;font-size:.74rem;opacity:.85;}

.leyenda-comparativa{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 26px;
  margin-top:30px;font-size:.78rem;color:var(--bruma);
}
.leyenda-comparativa > span{display:inline-flex;align-items:center;gap:8px;}
.leyenda-plus{color:var(--titulo);font-weight:600;}
.leyenda-no::before{
  content:'';flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  border:1.5px solid var(--linea-fuerte);
}
.leyenda-ayuda{
  flex-basis:100%;justify-content:center;
  margin-top:2px;font-size:.76rem;opacity:.8;
}

/* ---------- 11 · Contacto ----------------------------------------------- */
.contacto{padding-bottom:112px;}
.caja-contacto{
  position:relative;overflow:hidden;
  border:1px solid var(--linea);border-radius:40px;
  background:var(--ink-2);padding:66px 56px;
}
.caja-contacto::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:radial-gradient(circle at 50% 0%, var(--rosa-25), transparent 60%);
}
.contacto-rejilla{
  position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;
}
.contacto-intro h2{font-size:clamp(1.7rem,2.7vw,2.15rem);font-weight:700;margin-top:16px;}
.contacto-intro > p{margin-top:20px;color:var(--bruma);max-width:34em;}
.contacto-ventajas{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:13px;}
.contacto-ventajas li{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;color:var(--nube);}
.contacto-ventajas svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px;color:var(--rosa);}
.contacto-directo{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--linea);
  font-size:.875rem;color:var(--bruma);
}
.contacto-directo a{color:var(--rosa);font-weight:600;}
.contacto-directo a:hover{text-decoration:underline;}

.formulario{
  border:1px solid var(--linea);border-radius:26px;
  background:var(--tarjeta);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:30px;
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.campo{display:flex;flex-direction:column;min-width:0;}
.campo.ancho{grid-column:1 / -1;}
.campo label{font-size:.78rem;font-weight:600;color:var(--bruma);margin-bottom:7px;letter-spacing:.01em;}
.campo label .req{color:var(--rosa);}
.campo input,.campo select,.campo textarea{
  width:100%;border-radius:13px;padding:12px 14px;
  border:1px solid var(--linea);background:var(--suave);color:var(--nube);
  font-size:.9rem;transition:border-color .25s, background-color .25s;
}
.campo select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-right:38px;}
.campo select option{background:var(--superficie);color:var(--nube);}
.campo textarea{resize:vertical;min-height:104px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--rosa);background:var(--suave-2);}
.campo input::placeholder,.campo textarea::placeholder{color:var(--bruma);opacity:.55;}
.campo input.error,.campo textarea.error{border-color:var(--rosa);background:var(--rosa-10);}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.consentimiento{
  display:flex;align-items:flex-start;gap:12px;margin-top:20px;
  border:1px solid transparent;border-radius:13px;padding:13px 14px;
  transition:border-color .25s, background-color .25s;
}
.consentimiento.error{border-color:var(--rosa);background:var(--rosa-10);}
.consentimiento input{
  position:relative;flex:0 0 auto;appearance:none;-webkit-appearance:none;
  width:19px;height:19px;margin-top:2px;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--linea-fuerte);background:var(--suave);
  transition:background-color .2s, border-color .2s;
}
.consentimiento input:hover{border-color:var(--rosa-45);}
.consentimiento input:checked{background:var(--rosa);border-color:var(--rosa);}
.consentimiento input:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg);
}
.consentimiento label{font-size:.78rem;line-height:1.55;color:var(--bruma);cursor:pointer;}
.consentimiento label a{color:var(--nube);text-decoration:underline;}
.consentimiento label a:hover{color:var(--rosa);}

.enviar-fila{margin-top:20px;}
.enviar-fila .boton{width:100%;}
.nota-formulario{margin-top:13px;font-size:.75rem;color:var(--bruma);text-align:center;}
.aviso-formulario{
  display:none;margin-top:18px;border-radius:13px;padding:13px 16px;
  font-size:.875rem;line-height:1.5;text-align:center;border:1px solid var(--rosa);
}
.aviso-formulario.ok{display:block;background:var(--rosa-10);color:var(--titulo);}
.aviso-formulario.ko{display:block;background:var(--rosa-15);color:var(--rosa);}

/* ---------- 12 · Pie ---------------------------------------------------- */
.pie{border-top:1px solid var(--linea);background:var(--ink-2);}
.pie-fila{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  max-width:var(--ancho);margin:0 auto;padding:34px 24px;
}
.pie .marca{font-size:21px;}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:22px;font-size:.8125rem;color:var(--bruma);}
.pie-enlaces a{transition:color .25s;}
.pie-enlaces a:hover{color:var(--rosa);}
.pie-legal{
  border-top:1px solid var(--linea);
  padding:18px 24px;text-align:center;font-size:.78rem;color:var(--bruma);
}

/* ---------- 13 · Emken -------------------------------------------------- */
/* El hueco manda el tamaño; el SVG siempre lo llena */
.caja-emken{display:block;flex:0 0 auto;line-height:0;width:48px;}
.emken{display:block;width:100%;height:auto;overflow:visible;}
.emken .cuerpo{stroke:var(--emken-borde);stroke-width:1.2;}
.emken .ojo-arco{fill:none;stroke:#fff;stroke-width:5.4;stroke-linecap:round;}
.emken .ojo-punto{fill:#fff;}
.emken .ojo-parpado{fill:#fff;}
.emken .boca{fill:var(--rosa);}
.emken .boca-linea{fill:none;stroke:#3a3a4d;stroke-width:2.4;stroke-linecap:round;}
.emken .onda{
  fill:none;stroke:var(--rosa);stroke-width:3;stroke-linecap:round;opacity:0;
  transform-box:fill-box;transform-origin:center;
}

/* Los distintos ánimos: se enseña solo el grupo activo */
.emken .animo{opacity:0;transition:opacity .25s ease;}
.emken[data-animo="feliz"]    .animo-feliz,
.emken[data-animo="pensando"] .animo-pensando,
.emken[data-animo="responde"] .animo-responde,
.emken[data-animo="atento"]   .animo-atento,
.emken[data-animo="duerme"]   .animo-duerme{opacity:1;}

/* Parpadeo: el arco feliz se aplasta un instante */
.emken[data-animo="feliz"] .animo-feliz{
  animation:parpadeo-emken 6.5s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;
}

/* Pensando: el nexus se balancea y salen ondas */
.emken .nexus-grupo{transform-box:view-box;transform-origin:60px 27px;}
.emken[data-animo="pensando"] .nexus-grupo{animation:nexus-vibra 1.6s ease-in-out infinite;}
.emken[data-animo="pensando"] .onda{animation:onda-emken 1.8s ease-out infinite;}
.emken[data-animo="pensando"] .onda:nth-of-type(2){animation-delay:.35s;}

/* Aura de escucha */
.emken .aura{fill:var(--rosa);opacity:0;filter:blur(9px);}
.emken[data-animo="atento"] .aura{animation:aura-emken 2.4s ease-in-out infinite;}

/* Burbuja flotante */
.burbuja-emken{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:grid;place-items:center;width:66px;height:66px;padding:0;
  border:1px solid var(--rosa-45);border-radius:22px;cursor:pointer;
  background:var(--ink-2);box-shadow:0 16px 42px -12px rgba(255,45,107,.7);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.burbuja-emken::before{
  content:'';position:absolute;inset:0;border-radius:21px;pointer-events:none;
  background:radial-gradient(circle at 50% 0%, var(--rosa-25), transparent 66%);
}
.burbuja-emken:hover{transform:translateY(-4px);border-color:var(--rosa);box-shadow:0 20px 52px -10px rgba(255,45,107,.85);}
.burbuja-emken .caja-emken{position:relative;width:50px;}
.burbuja-emken .aspa{position:relative;display:none;font-size:26px;line-height:1;color:var(--titulo);}
.burbuja-emken[aria-expanded="true"] .caja-emken{display:none;}
.burbuja-emken[aria-expanded="true"] .aspa{display:block;}
.burbuja-emken .chincheta{
  position:absolute;right:-3px;top:-3px;width:13px;height:13px;border-radius:50%;
  background:var(--rosa);border:2.5px solid var(--ink-2);
  box-shadow:0 0 11px var(--rosa);animation:latido 2s ease-in-out infinite;
}
.burbuja-emken[aria-expanded="true"] .chincheta{display:none;}

/* Saludo lateral */
.saludo-emken{
  position:fixed;right:102px;bottom:36px;z-index:59;max-width:252px;
  border:1px solid var(--linea);border-radius:18px;
  background:var(--ink-2);box-shadow:var(--sombra-panel);
  animation:saludo-entra .7s cubic-bezier(.16,1,.3,1) both;
  transition:transform .25s;
}
.saludo-emken:hover{transform:translateY(-2px);}
.saludo-emken[hidden]{display:none;}
.saludo-abrir{
  display:block;width:100%;text-align:left;cursor:pointer;
  border:none;background:none;padding:13px 16px;border-radius:18px;
}
.saludo-abrir strong{display:block;font-family:'Sora',sans-serif;font-size:.875rem;color:var(--titulo);}
.saludo-abrir span{display:block;margin-top:3px;font-size:.75rem;color:var(--bruma);line-height:1.45;}
.saludo-emken .cerrar-saludo{
  position:absolute;top:-9px;right:-9px;width:23px;height:23px;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea);background:var(--superficie);color:var(--bruma);
  font-size:14px;line-height:1;cursor:pointer;
  transition:color .25s, border-color .25s;
}
.saludo-emken .cerrar-saludo:hover{color:var(--titulo);border-color:var(--rosa-45);}

/* Panel de conversación */
.panel-chat{
  position:fixed;right:22px;bottom:100px;z-index:61;
  display:none;flex-direction:column;overflow:hidden;
  width:390px;max-width:calc(100vw - 44px);
  height:min(560px, calc(100vh - 150px));
  border:1px solid var(--linea);border-radius:28px;
  background:var(--ink-2);box-shadow:var(--sombra-panel);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.panel-chat.abierto{display:flex;animation:panel-entra .38s cubic-bezier(.16,1,.3,1) both;}
.chat-cabecera{
  position:relative;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--linea);padding:14px 18px;flex:0 0 auto;
}
.chat-cabecera::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 14% 0%, var(--rosa-25), transparent 42%);
}
.chat-cabecera .caja-emken{position:relative;width:40px;}
.chat-identidad{position:relative;flex:1;min-width:0;}
.chat-identidad .fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.chat-identidad strong{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;color:var(--titulo);}
.chat-identidad .sello{
  border:1px solid var(--rosa-25);border-radius:999px;background:var(--rosa-10);
  padding:2px 8px;color:var(--rosa);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;
  text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;
}
.chat-identidad .estado{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:.6875rem;color:var(--bruma);}
.cerrar-chat{
  position:relative;display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border:none;border-radius:50%;background:transparent;color:var(--bruma);
  font-size:19px;line-height:1;cursor:pointer;transition:background-color .25s,color .25s;
}
.cerrar-chat:hover{background:var(--suave-2);color:var(--titulo);}

.chat-mensajes{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px;display:flex;flex-direction:column;gap:12px;
}
.chat-mensajes::-webkit-scrollbar{width:0;}
.mensaje{display:flex;align-items:flex-end;gap:9px;max-width:100%;}
.mensaje .caja-emken{width:30px;margin-bottom:2px;}
.mensaje .texto{
  max-width:270px;padding:11px 14px;border-radius:17px;
  font-size:.875rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
}
.mensaje.de-emken .texto{
  border-bottom-left-radius:5px;background:var(--suave-2);
  border:1px solid var(--linea);color:var(--nube);
}
.mensaje.de-emken .texto strong{color:var(--titulo);font-weight:600;}
.mensaje.mio{justify-content:flex-end;}
.mensaje.mio .texto{
  border-bottom-right-radius:5px;color:#fff;
  background:linear-gradient(115deg,var(--brillo),var(--carmesi));
}
.mensaje.alerta .texto{
  max-width:100%;background:var(--rosa-10);border:1px solid var(--rosa-25);color:var(--rosa);font-size:.8125rem;
}
.mensaje .texto a{color:inherit;text-decoration:underline;}

.escribiendo{
  display:flex;gap:5px;align-items:center;
  padding:13px 15px;border-radius:17px;border-bottom-left-radius:5px;
  background:var(--suave-2);border:1px solid var(--linea);
}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--bruma);animation:puntitos 1.2s infinite;}
.escribiendo i:nth-child(2){animation-delay:.18s;}
.escribiendo i:nth-child(3){animation-delay:.36s;}

.sugerencias{padding:0 18px 4px;}
.sugerencias p{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--bruma);margin-bottom:9px;
}
.sugerencias div{display:flex;flex-wrap:wrap;gap:7px;}
.sugerencias button{
  border:1px solid var(--linea);border-radius:999px;background:var(--suave);
  color:var(--nube);font-size:.75rem;padding:6px 12px;cursor:pointer;
  transition:border-color .25s, background-color .25s;
}
.sugerencias button:hover{border-color:var(--rosa-45);background:var(--rosa-10);}
/* Las respuestas del asesor son mas largas que las sugerencias sueltas */
.sugerencias button{max-width:100%;white-space:normal;text-align:left;line-height:1.4;}

.chat-pie{border-top:1px solid var(--linea);background:var(--hundido);padding:12px;flex:0 0 auto;}
.chat-fila{
  display:flex;align-items:flex-end;gap:8px;
  border:1px solid var(--linea);border-radius:16px;background:var(--suave-2);padding:6px 6px 6px 14px;
  transition:border-color .25s;
}
.chat-fila:focus-within{border-color:var(--rosa-45);}
.chat-fila textarea{
  flex:1;border:none;background:none;resize:none;
  font-size:.875rem;line-height:1.45;padding:8px 0;max-height:92px;
}
.chat-fila textarea:focus{outline:none;}
.chat-fila textarea::placeholder{color:var(--bruma);opacity:.7;}
.chat-enviar{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border:none;border-radius:11px;cursor:pointer;
  background:var(--rosa-15);color:var(--rosa);transition:opacity .25s, background-color .25s;
}
.chat-enviar:hover:not(:disabled){background:var(--rosa-25);}
.chat-enviar:disabled{opacity:.4;cursor:not-allowed;}
.chat-enviar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.chat-legal{margin-top:9px;text-align:center;font-size:.6875rem;line-height:1.4;color:var(--bruma);}
.chat-legal a{text-decoration:underline;}

/* ---------- 14 · Páginas legales ---------------------------------------- */
.legal{padding:calc(var(--cabecera) + 64px) 0 96px;}
.legal-caja{max-width:780px;margin:0 auto;}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;}
.legal .actualizado{margin-top:12px;font-size:.8125rem;color:var(--bruma);}
.legal h2{
  font-size:1.25rem;font-weight:600;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--linea);
}
.legal h3{font-size:1rem;font-weight:600;margin-top:26px;}
.legal p,.legal li{color:var(--bruma);line-height:1.75;}
.legal p{margin-top:14px;}
.legal ul,.legal ol{margin-top:14px;padding-left:20px;display:flex;flex-direction:column;gap:9px;}
.legal li::marker{color:var(--rosa);}
.legal strong{color:var(--nube);font-weight:600;}
.legal a{color:var(--rosa);text-decoration:underline;}
.legal .destacado{
  margin-top:24px;border:1px solid var(--rosa-25);border-radius:20px;
  background:var(--rosa-10);padding:22px 24px;
}
.legal .destacado p{margin-top:0;color:var(--nube);}
.legal .datos{
  margin-top:18px;border:1px solid var(--linea);border-radius:18px;
  background:var(--suave);padding:20px 24px;
}
.legal .datos p{margin-top:9px;}
.legal .datos p:first-child{margin-top:0;}
.legal .tabla-envoltorio{
  margin-top:18px;overflow-x:auto;
  border:1px solid var(--linea);border-radius:18px;
}
.legal table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:520px;}
.legal th{
  text-align:left;font-weight:600;color:var(--titulo);background:var(--suave);
  padding:13px 16px;border-bottom:1px solid var(--linea);
}
.legal td{padding:12px 16px;border-bottom:1px solid var(--linea);color:var(--bruma);vertical-align:top;}
.legal tbody tr:last-child td{border-bottom:none;}
.cabecera-legal .cabecera-fila{gap:14px;}
.cabecera-legal .volver{margin:0;}
.volver{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:30px;
  font-size:.875rem;color:var(--bruma);transition:color .25s;
}
.volver:hover{color:var(--rosa);}

/* ---------- 14b · Páginas de servicio (FAQ y automatizaciones) ---------- */
.pagina-contenido{padding:calc(var(--cabecera) + 70px) 0 104px;}
.pagina-cabecera{max-width:850px;padding:42px 0 56px;border-bottom:1px solid var(--linea);}
.pagina-cabecera .ruta{color:var(--rosa);font-size:.9rem;font-weight:700;}
.pagina-cabecera h1{
  max-width:15ch;margin-top:18px;font-size:clamp(2.55rem,6vw,4.8rem);letter-spacing:-.035em;
  text-wrap:balance;
}
.pagina-cabecera > p:last-child{max-width:62ch;margin-top:22px;color:var(--bruma);font-size:1.08rem;}
.pagina-cuerpo{max-width:980px;margin:0 auto;padding-top:58px;}
.pagina-cuerpo h2{font-size:clamp(1.65rem,3vw,2.35rem);text-wrap:balance;}
.pagina-cuerpo h3{font-size:1.08rem;}
.faq-grupo + .faq-grupo{margin-top:58px;}
.faq-grupo > p{max-width:62ch;margin-top:12px;color:var(--bruma);}
.faq-lista{margin-top:22px;border-top:1px solid var(--linea);}
.faq-item{border-bottom:1px solid var(--linea);}
.faq-item summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:20px 0;
  color:var(--titulo);font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:'+';color:var(--rosa);font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:300;line-height:1;}
.faq-item[open] summary::before{content:'−';}
.faq-respuesta{max-width:70ch;padding:0 0 24px 34px;color:var(--bruma);}
.faq-respuesta p + p{margin-top:12px;}
.casos-intro{max-width:60ch;color:var(--bruma);}
.casos-lista{list-style:none;margin-top:32px;border-top:1px solid var(--linea);}
.caso{
  display:grid;grid-template-columns:60px minmax(0,.8fr) minmax(0,1.1fr);gap:24px;
  padding:30px 0;border-bottom:1px solid var(--linea);
}
.caso-numero{color:var(--rosa);font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:750;}
.caso h3{margin-top:2px;}
.caso-descripcion{color:var(--bruma);}
.caso-cambio{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;gap:8px;color:var(--bruma);font-size:.85rem;}
.caso-cambio i{display:block;height:1px;background:var(--rosa);position:relative;}
.caso-cambio i::after{
  content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--rosa);border-right:1px solid var(--rosa);transform:rotate(45deg);
}
.caso-cambio strong{color:var(--nube);font-weight:650;}
.incluye-servicios{margin-top:88px;border-top:1px solid var(--linea);}
.servicio-nivel{display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);gap:42px;padding:42px 0;border-bottom:1px solid var(--linea);}
.servicio-nivel .precio-servicio{color:var(--rosa);font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:750;}
.servicio-nivel > div > p{max-width:58ch;margin-top:10px;color:var(--bruma);}
.lista-incluye{list-style:none;display:grid;gap:11px;margin-top:20px;}
.lista-incluye li{display:flex;gap:10px;color:var(--nube);}
.lista-incluye li::before{content:'✓';color:var(--rosa);font-weight:800;}
.mantenimiento-enlace{
  margin-top:42px;padding-top:22px;border-top:1px solid var(--linea);color:var(--bruma);
}
.mantenimiento-enlace a{color:var(--rosa);font-weight:700;}
.cta-pagina{
  margin-top:86px;padding:42px 0;border-top:1px solid var(--rosa-45);border-bottom:1px solid var(--linea);
  display:flex;align-items:end;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.cta-pagina h2{max-width:20ch;}
.cta-pagina p{max-width:48ch;margin-top:12px;color:var(--bruma);}

/* El menú nuevo necesita plegarse antes en tabletas: evita apretar enlaces o CTA. */
@media (max-width:1050px){
  .menu{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--linea);
    box-shadow:0 22px 50px -30px rgba(0,0,0,.8);
  }
  .menu.abierto{display:flex;}
  .menu a{padding:15px 24px;border-top:1px solid var(--linea);}
  .abrir-menu{display:grid;}
  .cabecera .boton-primario{display:none;}
}

@media (max-width:860px){
  .recorrido-detalle{grid-template-columns:1fr;padding-left:0;gap:24px;}
  .recorrido-visual{min-height:0;}
  .pagina-contenido{padding-top:calc(var(--cabecera) + 38px);}
  .pagina-cabecera{padding-bottom:42px;}
  .caso{grid-template-columns:42px minmax(0,1fr);}
  .caso-cambio{grid-column:2;}
  .servicio-nivel{grid-template-columns:1fr;gap:18px;}
}
@media (max-width:640px){
  .recorrido-intro{gap:16px;}
  .recorrido-selector{margin-top:34px;}
  .recorrido-step summary{grid-template-columns:38px minmax(0,1fr) 14px;gap:12px;padding:17px 0;}
  .recorrido-numero{width:29px;height:29px;font-size:.76rem;}
  .recorrido-detalle{padding-bottom:26px;}
  .recorrido-visual{padding:18px;}
  .pagina-contenido{padding-bottom:76px;}
  .pagina-cabecera h1{font-size:clamp(2.3rem,12vw,3.65rem);}
  .caso{grid-template-columns:1fr;gap:12px;padding:24px 0;}
  .caso-cambio{grid-column:auto;grid-template-columns:1fr 20px 1fr;}
  .faq-respuesta{padding-left:0;}
  .cta-pagina{margin-top:58px;padding:32px 0;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .recorrido-step summary,.recorrido-flecha{transition:none;}
}

/* ---------- 15 · Animaciones -------------------------------------------- */
@keyframes deriva{0%,100%{transform:translate(0,0);}50%{transform:translate(3%,-4%);}}
@keyframes flotar{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes latido{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes ascenso{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@keyframes desfilar{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes panel-entra{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes saludo-entra{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);}}
@keyframes puntitos{0%,60%,100%{opacity:.25;}30%{opacity:1;}}
@keyframes parpadeo-emken{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.15);}}
@keyframes nexus-vibra{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
@keyframes onda-emken{0%{opacity:0;transform:scale(.6);}25%{opacity:.85;}100%{opacity:0;transform:scale(1.35);}}
@keyframes aura-emken{0%,100%{opacity:.18;}50%{opacity:.5;}}
@keyframes caseta-flujo{to{stroke-dashoffset:-32;}}
@keyframes caseta-martillo{0%,100%{transform:rotate(0) translateY(0);}50%{transform:rotate(-8deg) translateY(-5px);}}
@keyframes caseta-anda-izq{
  0%{transform:translate(26px,272px);opacity:0;}
  12%{opacity:.95;}
  86%{opacity:.95;}
  100%{transform:translate(194px,272px);opacity:0;}
}
@keyframes caseta-anda-der{
  0%{transform:translate(374px,272px);opacity:0;}
  12%{opacity:.95;}
  86%{opacity:.95;}
  100%{transform:translate(206px,272px);opacity:0;}
}

.aparece{animation:ascenso .9s cubic-bezier(.16,1,.3,1) both;}
.al-entrar{opacity:0;transform:translateY(26px);}
.al-entrar.visible{animation:ascenso .85s cubic-bezier(.16,1,.3,1) both;}

/* ---------- Adaptación a pantallas pequeñas ------------------------------ */
@media (max-width:1080px){
  .portada{min-height:auto;padding-top:calc(var(--cabecera) + 64px);padding-bottom:72px;}
  .portada-bajar{position:static;transform:none;margin-top:38px;}
  .panel-emken{max-width:460px;}
  .rejilla-paquetes{grid-template-columns:repeat(2,1fr);}
  .escena-caseta{margin-left:auto;margin-right:auto;}
  .contacto-rejilla{grid-template-columns:1fr;gap:40px;}
  .caja-contacto{padding:48px 36px;}
}

@media (max-width:860px){
  .seccion{padding:88px 0;}
  .paso-detalle{grid-template-columns:1fr;gap:28px;}
  .paso-detalle .paso-dibujo{max-width:340px;}
  .menu{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--linea);
    box-shadow:0 22px 50px -30px rgba(0,0,0,.8);
  }
  .menu.abierto{display:flex;}
  .menu a{padding:15px 24px;border-top:1px solid var(--linea);}
  .abrir-menu{display:grid;}
  .cabecera .boton-primario{display:none;}
  .saludo-emken{display:none;}
}

@media (max-width:640px){
  body{font-size:15.5px;}
  .seccion{padding:72px 0;}
  .contenedor{padding:0 20px;}
  .caja-contacto{padding:36px 22px;border-radius:28px;}
  .campos{grid-template-columns:1fr;}
  .rejilla-paquetes{grid-template-columns:1fr;}
  .caseta-etiqueta{font-size:.66rem;padding:4px 9px;gap:5px;}
  .paso-guiado summary{padding:20px;gap:14px;}
  .paso-detalle{padding:0 20px 26px;}
  .cifras{gap:14px;}
  .cifras dt{font-size:1.3rem;}
  .cifras dd{font-size:.75rem;}
  .formulario{padding:22px;}
  .panel-chat{right:12px;left:12px;width:auto;bottom:94px;height:min(72vh,540px);}
  .burbuja-emken{right:16px;bottom:16px;width:60px;height:60px;}
  .burbuja-emken .caja-emken{width:45px;}
  .legal .tabla-datos div{grid-template-columns:1fr;gap:4px;}
  .logos{margin-inline:-20px;}
  .logos-grupo{gap:26px;padding-right:26px;}
  .logos span{font-size:12.5px;}
}

@media (max-width:1180px){
  .rejilla-paquetes--cuatro{grid-template-columns:repeat(2,minmax(0,1fr));}
  .paquete-analisis{align-self:stretch;height:100%;}
}

@media (max-width:640px){
  .rejilla-paquetes--cuatro{grid-template-columns:1fr;}
  .paquete .lema{min-height:0;}
  .paquete .precio{min-height:0;}
  .leyenda-comparativa{gap:10px 18px;}
  .paquete li.capacidad--doble{grid-template-columns:1fr;row-gap:11px;}
  .capacidad-mitad + .capacidad-mitad{border-left:0;padding-left:0;border-top:1px solid var(--linea);padding-top:11px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .al-entrar{opacity:1;transform:none;}
  .cinta-pista{animation:none;}
  /* La escena se queda en la fase 5: script.js no arranca el bucle */
  .caseta .flujo{opacity:.8;}
  .caseta .persona{opacity:0;}
}

/* ---------- Jornada: el mismo día, con y sin automatizar ---------------- */
.jornada-panel{
  margin-top:48px;
  padding:22px;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:var(--tarjeta);
  box-shadow:var(--sombra-panel);
}

.jornada-reloj{
  display:grid;
  grid-template-columns:auto auto auto 1fr auto;
  align-items:center;
  gap:0 14px;
  padding-bottom:18px;
  border-bottom:1px solid var(--linea);
}
.jornada-hora-actual{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(1.35rem,2.4vw,1.7rem);
  font-weight:700;
  color:var(--titulo);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.jornada-rail{
  height:4px;border-radius:99px;
  background:var(--suave-2);
  border:1px solid var(--linea);
  overflow:hidden;
}
.jornada-rail i{
  display:block;height:100%;width:calc(var(--avance,0) * 100%);
  background:linear-gradient(90deg,var(--bruma),var(--rosa));
}
.jornada-limite{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:var(--bruma);
}

.jornada-pistas{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:20px;
}

.jornada-via{
  padding:16px;
  border:1px solid var(--linea);
  border-radius:14px;
  background:var(--suave);
}
.jornada-via--ia{
  border-color:var(--rosa-25);
  background:linear-gradient(180deg,var(--rosa-10),transparent 70%),var(--suave);
}

.jornada-via-cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:1px solid var(--linea);
}
.jornada-etiqueta{
  font-family:'Poppins','Sora',sans-serif;font-weight:600;
  font-size:14px;color:var(--titulo);
}
.jornada-via--ia .jornada-etiqueta{color:var(--rosa);}
.jornada-restantes{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.06em;color:var(--bruma);
  padding:4px 10px;border-radius:99px;
  border:1px solid var(--linea);background:var(--hundido);
  font-variant-numeric:tabular-nums;
}

.jornada-lista{list-style:none;margin:0;padding:0;}

.jornada-tarea{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) auto;
  align-items:center;gap:0 10px;
  padding:10px 0;
  border-bottom:1px solid var(--linea);
  transition:opacity .4s ease;
}
/* Solo cuando script.js toma el mando se atenúa lo que aún no ha pasado:
   sin JavaScript la jornada se ve directamente terminada. */
.jornada-panel--animada .jornada-tarea{opacity:.4;}
.jornada-tarea:last-child{border-bottom:0;}
.jornada-tarea.en-curso,
.jornada-tarea.hecha{opacity:1;}

.jornada-marca{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--linea-fuerte);
  position:relative;
  transition:background-color .3s ease,border-color .3s ease;
}
.jornada-marca::after{
  content:"";position:absolute;left:4.5px;top:1px;
  width:4px;height:8px;
  border:solid var(--ink);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.jornada-tarea.hecha .jornada-marca{background:var(--bruma);border-color:var(--bruma);}
.jornada-via--ia .jornada-tarea.hecha .jornada-marca{background:var(--rosa);border-color:var(--rosa);}
.jornada-tarea.hecha .jornada-marca::after{transform:rotate(45deg) scale(1);}

.jornada-texto{font-size:13.5px;color:var(--nube);line-height:1.45;}
.jornada-tarea.hecha .jornada-texto{color:var(--bruma);text-decoration:line-through;text-decoration-color:var(--linea-fuerte);}

.jornada-duracion{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;color:var(--bruma);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.jornada-barra{
  grid-column:1 / -1;
  margin-top:8px;height:3px;border-radius:99px;
  background:var(--suave-2);overflow:hidden;
}
.jornada-barra i{
  display:block;height:100%;width:calc(var(--p,0) * 100%);
  background:var(--bruma);
}
.jornada-via--ia .jornada-barra i{background:var(--rosa);}

.jornada-cierre{
  margin-top:14px;padding-top:13px;
  border-top:1px solid var(--linea);
  font-size:13px;color:var(--bruma);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.jornada-panel--animada .jornada-cierre{opacity:0;transform:translateY(8px);}
.jornada-cierre strong{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  color:var(--titulo);
}
.jornada-via.cerrada .jornada-cierre{opacity:1;transform:none;}

.jornada-nota{
  margin-top:18px;font-size:12px;color:var(--bruma);opacity:.8;
}
.jornada-panel .enlace-rosa{margin-top:12px;display:inline-block;}

@media (max-width:860px){
  .jornada-panel{padding:20px;}
  .jornada-pistas{grid-template-columns:1fr;}
  .jornada-reloj{grid-template-columns:1fr auto auto;gap:10px 10px;}
  .jornada-reloj .mono{grid-column:1;}
  .jornada-esfera{grid-column:2;grid-row:1;}
  .jornada-hora-actual{grid-column:3;grid-row:1;justify-self:end;}
  .jornada-rail{grid-column:1 / -1;}
  .jornada-limite{grid-column:1 / -1;justify-self:end;}
}

/* ---------- Jornada: la esfera del reloj -------------------------------- */
.jornada-esfera{width:38px;height:38px;}
.jornada-esfera svg{width:100%;height:100%;display:block;}
.jornada-esfera-fondo{
  fill:var(--hundido);
  stroke:var(--linea-fuerte);stroke-width:1.2;
}
.jornada-esfera-marcas line{stroke:var(--linea-fuerte);stroke-width:1.4;stroke-linecap:round;}
.jornada-aguja{
  stroke:var(--nube);stroke-width:2;stroke-linecap:round;
  transform-origin:20px 20px;
}
.jornada-aguja--hora{transform:rotate(var(--giro-hora,0deg));}
.jornada-aguja--minuto{stroke:var(--rosa);stroke-width:1.6;transform:rotate(var(--giro-minuto,0deg));}
.jornada-eje{fill:var(--rosa);}

/* ---------- Jornada: lo que se queda sin hacer -------------------------- */
.jornada-aviso{
  grid-column:2 / -1;
  justify-self:start;
  margin-top:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--aviso);
  padding:3px 8px;border-radius:99px;
  border:1px solid var(--aviso-25);background:var(--aviso-10);
  display:none;
}
.jornada-tarea.pendiente .jornada-aviso{display:inline-block;}
.jornada-tarea.pendiente{opacity:1;}
.jornada-tarea.pendiente .jornada-marca{
  border-color:var(--aviso);border-style:dashed;background:transparent;
}
.jornada-tarea.pendiente .jornada-texto{color:var(--nube);text-decoration:none;}
.jornada-tarea.pendiente .jornada-barra i{background:var(--aviso);}

.jornada-via.avisando .jornada-restantes{
  color:var(--aviso);
  border-color:var(--aviso-25);
  background:var(--aviso-10);
}

@media (max-width:860px){
  .jornada-esfera{width:30px;height:30px;}
}

/* =========================================================================
   Cristal líquido
   -------------------------------------------------------------------------
   Un cristal creíble en web son cuatro capas, no un blur:

     1. el tinte translúcido,
     2. el reflejo que cae desde el borde superior (un degradado, no un
        pseudoelemento: así se puede aplicar a piezas que ya usan ::before),
     3. el filo iluminado por dentro (inset box-shadow de 1px), y
     4. la sombra que lo despega del fondo.

   Solo desenfocamos el fondo donde hay algo detrás que desenfocar: la barra,
   el menú desplegado y el panel del chat. Las tarjetas que van en el flujo
   llevan «cristal-plano», que es lo mismo sin backdrop-filter: sobre un
   fondo liso el desenfoque no se ve y sí se paga.
   ========================================================================= */

.cristal,
.cabecera-fila,
.menu.abierto,
.panel-chat{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--cristal);
  border:1px solid var(--cristal-filo);
  backdrop-filter:blur(var(--cristal-desenfoque)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--cristal-desenfoque)) saturate(180%);
  box-shadow:
    var(--cristal-sombra),
    inset 0 1px 0 var(--cristal-filo-vivo);
}

.cristal-plano,
.recorrido-pasos,
.paquete,
.jornada-panel,
.jornada-via,
.boton-fantasma,
.boton-icono,
.selector-idioma{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--cristal);
  border:1px solid var(--cristal-filo);
  box-shadow:inset 0 1px 0 var(--cristal-filo-vivo);
}

/* Sin backdrop-filter el tinte translúcido se lee mal: lo cerramos. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cristal,
  .cabecera-fila,
  .menu.abierto,
  .panel-chat{background:var(--superficie);}
}

/* ---------- La barra ----------------------------------------------------- */
.cabecera-fila{
  transition:background-color .35s, border-color .35s, box-shadow .35s;
}
/* Al bajar, el cristal se cierra un poco para no perder los enlaces. */
.cabecera.desplazada .cabecera-fila{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--cristal-alto);
  border-color:var(--cristal-filo-vivo);
}

/* ---------- Piezas del cristal que necesitan su propio ajuste ------------ */
.recorrido-pasos{background-color:var(--superficie);}
.paquete{background-color:var(--tarjeta);}
.paquete.destacado{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--tarjeta-alta);
  border-color:var(--rosa-45);
  box-shadow:var(--sombra-destacado), inset 0 1px 0 var(--cristal-filo-vivo);
}
.jornada-panel{
  background-color:var(--tarjeta);
  box-shadow:var(--sombra-panel), inset 0 1px 0 var(--cristal-filo-vivo);
}
.jornada-via--ia{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--rosa-10), transparent 70%),
    var(--cristal);
  border-color:var(--rosa-25);
}

/* ---------- Botones ------------------------------------------------------ */
/* El primario no es translúcido —es la llamada principal—, pero sí lleva el
   mismo filo y el mismo reflejo, para que pertenezca a la misma familia. */
.boton-primario{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
    linear-gradient(115deg, var(--brillo) 0%, var(--carmesi) 100%);
  box-shadow:var(--sombra-boton), inset 0 1px 0 rgba(255,255,255,.38);
}
.boton-primario:hover{
  transform:translateY(-2px);
  box-shadow:var(--sombra-boton-alta), inset 0 1px 0 rgba(255,255,255,.5);
}

.boton-fantasma:hover,
.boton-icono:hover{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--cristal-alto);
  border-color:var(--rosa-45);
  box-shadow:inset 0 1px 0 var(--cristal-filo-vivo), 0 0 0 3px var(--rosa-10);
  transform:translateY(-2px);
}

/* Los pasos: el reflejo aparece al pasar por encima y al abrirlos. Nunca un
   borde nuevo en :hover, que movería el contenido un píxel. */
.paso-guiado summary:hover{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--cristal);
}
.paso-guiado[open] > summary{
  background:
    linear-gradient(180deg, var(--cristal-reflejo), rgba(255,255,255,0) 46%),
    var(--cristal);
  box-shadow:inset 0 1px 0 var(--cristal-filo-vivo);
}

/* ---------- El menú desplegado en móvil ---------------------------------- */
@media (max-width:1080px){
  .menu{top:calc(100% + 10px);left:0;right:0;border-radius:16px;overflow:hidden;}
  .menu a{border-top:1px solid var(--cristal-filo);}
  .menu a:first-child{border-top:0;}
}

@media (max-width:640px){
  .cabecera{inset:10px 0 auto 0;}
  .cabecera-fila{margin:0 12px;padding:9px 10px 9px 16px;border-radius:18px;}
}

/* =========================================================================
   Destello rosa al pulsar
   -------------------------------------------------------------------------
   El brillo se hace con «filter: drop-shadow», no con box-shadow, por dos
   razones: sigue la silueta real del elemento (las letras de un enlace, la
   píldora de un botón) y no pisa las sombras que esas piezas ya tienen.

   Con blur 0 y color transparente, drop-shadow no pinta nada: por eso el
   fotograma inicial y el final dejan el elemento exactamente como estaba.
   ========================================================================= */

@keyframes destello-rosa{
  0%{filter:drop-shadow(0 0 0 rgba(255,45,107,0));}
  30%{filter:drop-shadow(0 0 9px var(--brillo)) drop-shadow(0 0 26px var(--rosa-45));}
  100%{filter:drop-shadow(0 0 0 rgba(255,45,107,0));}
}

.destellando{animation:destello-rosa .6s cubic-bezier(.16,1,.3,1);}

/* El hundido del pulsar: pequeño, y solo mientras el dedo está encima. */
.boton:active,
.boton-icono:active,
.burbuja-emken:active{transform:scale(.96);}

/* ---------- El menú: brillo en vez de subrayado -------------------------- */
/* Sin fondo ni píldora: el brillo sale de las propias letras, así que sigue
   la forma de cada palabra en lugar de dibujarle una caja detrás. */
.menu a{transition:color .25s, text-shadow .3s;}
.menu a:hover{
  color:var(--titulo);
  text-shadow:0 0 10px var(--rosa), 0 0 22px var(--rosa-45);
}

.selector-idioma a:hover{color:var(--titulo);text-shadow:0 0 12px var(--rosa-45);}
.pie-enlaces a{transition:color .25s, text-shadow .3s;}
.pie-enlaces a:hover{text-shadow:0 0 14px var(--rosa-45);}
.enlace-rosa{transition:text-shadow .3s;}
.enlace-rosa:hover{text-decoration:none;text-shadow:0 0 16px var(--rosa-45);}

@media (max-width:1080px){
  /* Desplegado ocupa toda la fila y recupera su área táctil. */
  .menu{gap:0;}
}

/* WooCommerce es apaisado: con el mismo alto que un icono cuadrado pesaría
   demasiado, así que se le baja el alto para igualar la mancha visual. */
.logos [title="WooCommerce"] svg{height:13px;}

/* Sin movimiento la cinta de logotipos no tiene sentido: vuelve a ser la
   rejilla centrada de siempre y la copia decorativa desaparece. */
@media (prefers-reduced-motion:reduce){
  .logos-pista{flex-wrap:wrap;justify-content:center;width:auto;animation:none;}
  .logos-grupo{flex-wrap:wrap;justify-content:center;gap:28px 44px;padding-right:0;}
  .logos-grupo[aria-hidden="true"]{display:none;}
  .logos{margin-inline:0;-webkit-mask-image:none;mask-image:none;}
}

/* Las páginas legales usan «legal contenedor» a la vez, y el padding móvil de
   «.contenedor» —que va después en la hoja— le borraba el hueco reservado para
   la cabecera: el titular acababa debajo de la barra. */
@media (max-width:640px){
  .legal{padding:calc(var(--cabecera) + 36px) 20px 72px;}
}