/* SIGMACORE · Landing de diagnóstico · hoja de estilos única. Tokens en :root. */

/* ===== SIGMACORE ===== */

/* ===== TIPOGRAFÍA ===== */
@font-face {
  font-family: 'Encode Sans';
  src: url('../fonts/encodesans-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Encode Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 96.5%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* --- COLOR · paleta del manual de marca V2 2026 ------------------------ */
  --purpura:        #941C80;  /* Púrpura SIGMA. Botón, titulares clave, logo, viñetas */
  --purpura-hondo:  #7A1669;  /* Derivado. Hover y presionado del botón */
  --tinta:          #505050;  /* Gris Espacial. Cuerpo SOBRE FONDO PLANO */
  --tinta-malla:    #352F3E;  /* Derivado. Cuerpo SOBRE MALLA PASTEL (8,04:1) */
  --tinta-fuerte:   #1F1A2B;  /* Derivado. Titulares sobre claro (16,92:1) */
  --azul:           #0E1949;  /* Azul SIGMA */
  --magenta:        #C9338B;  /* Magenta Nuclear. SOLO gráfico, nunca texto */
  /* --- Los 7 núcleos · colores muestreados de modelo-01-acercamiento.png ---
     El «-claro» es el mismo tono, aclarado y con la saturación limitada al
     55 %, para poder usarlo como TEXTO: todos miden 7:1 o más sobre el peor
     punto de la malla (#7A2268). El fuerte es solo gráfico. */
  --n-estrategia:   #0096DC;  --n-estrategia-claro:   #CBE4F0;
  --n-operacion:    #DC5028;  --n-operacion-claro:    #F3DCD5;
  --n-mercadeo:     #009664;  --n-mercadeo-claro:     #B9EBDA;
  --n-ser:          #5A50A0;  --n-ser-claro:          #E0DEEE;
  --n-tecnologia:   #FAE600;  --n-tecnologia-claro:   #E6E2AA;
  --n-legal:        #8CBE1E;  --n-legal-claro:        #D4E7AB;
  --n-comunicacion: #DC0078;  --n-comunicacion-claro: #F4D9E8;
  /* Los 3 Sigmas: el anillo, con los colores del manual */
  --s-sig:   #C9338B;  --s-sig-claro:   #F7E2EF;
  --s-myc:   #7C5BD0;  --s-myc-claro:   #E3DCF5;
  --s-cefac: #3A57C4;  --s-cefac-claro: #DADFF4;

  --magenta-claro:  #F7E2EF;  /* Magenta aclarado al 86 %. Sí es legible: 7,57:1 */
  --fondo-tope:     #0A0722;  /* Primer alto del fondo único. Color del <body> */
  --fondo-cabecera: #0B0A1F;  /* La cabecera fija, opaca sobre el fondo */
  --blanco:         #FFFFFF;
  --papel:          #F6F3F6;

  /* --- FILETES ---------------------------------------------------------- */
  /* Decorativos: solo tienen que verse, no delimitan nada que se toque */
  --filete:               rgba(14, 25, 73, .16);
  --filete-oscuro:        rgba(255, 255, 255, .22);
  /* De control: son el borde de algo que se toca. Mínimo 3:1 (WCAG 1.4.11) */
  --filete-control:       rgba(14, 25, 73, .48);   /* 3,13:1 sobre blanco */
  --filete-control-oscuro: rgba(255, 255, 255, .34); /* 3,02:1 sobre azul */

  --seleccion:      #F1DCEB;  /* Opción elegida del formulario y ::selection */
  --vidrio:         rgba(11, 10, 31, .90); /* Tarjeta flotante del aviso de cookies, con desenfoque */
  --velo:           rgba(7, 12, 36, .82); /* Velo del formulario y del popup.
                                 Oscurece también sobre las secciones oscuras */

  /* --- FONDO ÚNICO · Aurora SIGMA continua ---------------------------------
     Toda la página va sobre un solo lienzo. Ninguna sección pinta su propio
     fondo: así no queda un solo borde donde dos cajas no empaten.
     --pastel y --pastel-suave se retiran (quedan en decisiones.md). */
  --base-oscura: linear-gradient(180deg,
      #0A0722 0%, #130A2E 16%, #0B1038 34%, #150B33 52%,
      #0A0F35 70%, #16092C 86%, #080718 100%);

  --manchas:
    radial-gradient(1200px 780px at  8%  2%, rgba(201, 51, 139, .34) 0%, transparent 62%),
    radial-gradient(1100px 820px at 92% 18%, rgba(52,  82, 190, .38) 0%, transparent 64%),
    radial-gradient(1300px 900px at  4% 38%, rgba(148, 28, 128, .40) 0%, transparent 62%),
    radial-gradient(1150px 860px at 96% 58%, rgba(46,  70, 176, .36) 0%, transparent 63%),
    radial-gradient(1250px 880px at 10% 78%, rgba(170, 36, 132, .32) 0%, transparent 62%),
    radial-gradient(1000px 760px at 88% 96%, rgba(60,  60, 170, .30) 0%, transparent 64%);

  --superficie:       rgba(255, 255, 255, .05);
  --superficie-borde: rgba(255, 255, 255, .10);

  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");

  /* --- FORMA · dos radios y solo dos ------------------------------------ */
  --radio-boton: 999px;  /* Píldora: botón principal, barra fija, botones del formulario */
  --radio:       16px;   /* Todo lo demás: opciones, campos, paneles, popup, video */

  /* Una sola sombra en toda la página, y solo en el panel del formulario */
  --sombra-panel: 0 24px 60px -30px rgba(14, 25, 73, .55);

  /* --- MOVIMIENTO · una sola curva -------------------------------------- */
  --curva:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 160ms;
  --t-entra: 400ms;
  --t-fase:  380ms;
  --t-giro:  560ms;   /* giro de la rueda: rueda, núcleos, etiquetas y toques a la vez */
  --t-tramo: 380ms;   /* cada tramo de la línea de fases (escritorio) */
  --t-sigue: 140ms;   /* la línea de fases siguiendo el dedo (celular) */
  --t-paso:  3500ms;  /* lo que dura cada paso del método y cada área de la rueda en el recorrido */
  --t-texto: 720ms;   /* entrada de textos y bloques al llegar */
  --escalon: 80ms;    /* separación entre piezas que entran juntas */
  --sube:        26px;   /* recorrido de la entrada */
  --sube-grande: 38px;   /* recorrido de títulos y frases grandes */

  /* --- TIPOGRAFÍA · escala ---------------------------------------------- */
  --fuente: 'Encode Sans', 'Encode Fallback', sans-serif;

  /* H1: 28 → 46 px */
  /* Escala tipográfica: cuerpo 16 px en celular y 17 px en escritorio */
  --t-h1:       clamp(1.75rem, 1.2rem + 2.1vw, 2.875rem);   /* 28 → 46 px */
  --t-h2:       clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);    /* 24 → 34 px */
  --t-h3:       clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);   /* 18 → 21 px */
  --t-pregunta: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);    /* 28 → 44 px */
  --t-cuerpo:   1rem;       /* 16 px en móvil */
  --t-rotulo:   0.8125rem;  /* 13 px */
  --t-mini:     0.875rem;   /* 14 px */
  --t-boton:    1rem;       /* 16 px */
  --t-campo:    1rem;       /* 16 px: por debajo, el iPhone hace zoom al tocar */

  /* --- RETÍCULA Y AIRE --------------------------------------------------
     Espaciado variable por sección: si todas respiran igual, es wallpaper. */
  --ancho:    1120px;   /* una sola línea de alineación en toda la página */
  --medianil: 24px;
  --margen:   20px;
  --medida:   620px;    /* ancho máximo de cualquier bloque de texto (≈70 caracteres a 17 px) */

  /* Aire coherente con la letra nueva: 64-80 en móvil, 96-128 en escritorio */
  --aire-xs:  48px;
  --aire-s:   64px;
  --aire-m:   72px;
  --aire-l:   80px;
  --aire-xl:  80px;

  --toque: 48px; /* Área táctil mínima */
  --alto-barra: 81px; /* Barra fija del celular sin la zona segura (12 + 56 + 12 + 1): el aviso de cookies sube eso */
}

@media (min-width: 900px) {
  :root {
      --t-cuerpo: 1.0625rem; 
      --margen:   40px;
    }
}

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

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

body {
  position: relative;
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, .90);
  background: var(--fondo-tope);
  overflow-x: hidden;
  text-wrap: pretty;
}

::selection { background: var(--seleccion); color: var(--tinta-fuerte); }

img, svg, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--purpura);
  outline-offset: 3px;
}

.sobre-oscuro :focus-visible { outline-color: var(--blanco); }

.salta-al-contenido {
  position: absolute; left: -9999px;
  background: var(--purpura); color: var(--blanco);
  padding: 12px 20px; border-radius: var(--radio-boton); z-index: 100;
}

.salta-al-contenido:focus { left: var(--margen); top: 12px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== TIPOGRAFÍA ===== */
h1, h2, h3 {
  margin: 0;
  color: var(--blanco);
  text-wrap: balance;
  font-weight: 600;
}

h1 {
  font-size: var(--t-h1);
  font-stretch: 115%;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

@media (max-width: 389px) {
  h1 { font-stretch: 108%; }
}

h2 {
  font-size: var(--t-h2);
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

h3 {
  font-size: var(--t-h3);
  font-stretch: 110%;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.rotulo {
  font-size: var(--t-rotulo);
  font-stretch: 125%;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--magenta-claro);  
  margin: 0 0 18px;
}

.cifra { font-variant-numeric: tabular-nums; }

p { margin: 0 0 1.1em; }

p:last-child { margin-bottom: 0; }

.medida { max-width: var(--medida); }

/* ===== FONDOS ===== */

.lienzo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--manchas), var(--base-oscura);
  pointer-events: none;
}

.grano {
  position: fixed;
  inset: 0;
  z-index: 9;
  background-image: var(--grano);
  mix-blend-mode: overlay;
  opacity: .20;
  pointer-events: none;
}

.seccion + .seccion { border-top: 1px solid rgba(255, 255, 255, .08); }

.sobre-oscuro { color: rgba(255, 255, 255, .90); }

.sobre-oscuro h1,
.sobre-oscuro h2,
.sobre-oscuro h3 { color: var(--blanco); }

/* ===== RETÍCULA ===== */
.seccion { padding-block: var(--aire-s); }

.seccion--aire-s  { padding-block: var(--aire-xs); }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

@media (min-width: 900px) {
  :root {
      --aire-xs: 64px;
      --aire-s:  96px;
      --aire-m:  112px;
      --aire-l:  128px;
      --aire-xl: 128px;
    }
  .reticula {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--medianil);
      align-items: start;
    }
  .col-1-6  { max-width: var(--medida); }
  .col-1-7  { max-width: var(--medida); }
  .col-1-8  { max-width: 760px; }
  .reticula > .col-1-6  { max-width: none; grid-column: 1 / 7; }
  .reticula > .col-1-7  { max-width: none; grid-column: 1 / 8; }
  .reticula > .col-7-12 { max-width: none; grid-column: 7 / 13; }
}

/* ===== BOTONES ===== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--purpura);
  font-family: inherit;
  font-size: var(--t-boton);
  font-stretch: 112%;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-micro) var(--curva),
              transform var(--t-micro) var(--curva);
}

.boton:hover  { background: var(--seleccion); }

.boton:active { transform: translateY(1px); }

.boton[disabled] { opacity: .55; cursor: not-allowed; }

.panel .boton { background: var(--purpura); color: var(--blanco); }

.panel .boton:hover { background: var(--purpura-hondo); }

.boton--ancho { width: 100%; padding-inline: 16px; }

@media (min-width: 900px) {
  .boton--ancho { width: auto; padding-inline: 36px; }
}

@media (max-width: 420px) {
  .boton--ancho { letter-spacing: -0.005em; }
}

.boton-secundario {
  background: none;
  border: 0;
  padding: 14px 8px;
  min-height: var(--toque);
  color: inherit;
  font-family: inherit;
  font-size: var(--t-mini);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.reductor {
  font-size: var(--t-mini);
  margin-top: 14px;
  opacity: .85;
}

/* ===== BARRA FIJA DE MÓVIL ===== */
.barra-fija {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--filete);
  transform: translateY(110%);
  transition: transform var(--t-entra) var(--curva);
}

.barra-fija[data-visible="si"] { transform: translateY(0); }

@media (min-width: 900px) {
  .barra-fija { display: none; }
}

/* ===== CABECERA ===== */
.cabecera {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 56px;
}

.cabecera__logo { display: flex; align-items: center; }

.cabecera .logo-icono { height: 30px; width: auto; }

.cabecera .logo-horizontal { display: none; }

.cabecera__enlaces, .cabecera .boton { display: none; }

@media (min-width: 900px) {
  .cabecera {
      justify-content: space-between;
      height: 76px;
    }
  .cabecera .logo-icono { display: none; }
  .cabecera .logo-horizontal { display: block; height: 30px; width: auto; }
  .cabecera__enlaces {
      display: flex;
      gap: 28px;
      list-style: none;
      margin: 0; padding: 0;
    }
  .cabecera__enlaces a {
      color: rgba(255, 255, 255, .86);
      text-decoration: none;
      font-size: var(--t-mini);
      padding: 10px 2px;
      border-bottom: 1px solid transparent;
      transition: color var(--t-micro) var(--curva),
                  border-color var(--t-micro) var(--curva);
    }
  .cabecera__enlaces a:hover { color: var(--blanco); border-bottom-color: var(--magenta); }
  .cabecera .boton { display: inline-flex; min-height: 44px; padding: 10px 22px; }
}

.cabecera-fija {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--fondo-cabecera);
  border-bottom: 1px solid var(--filete-oscuro);
  transform: translateY(-100%);
  transition: transform var(--t-entra) var(--curva);
  display: none;
}

@media (min-width: 900px) {
  .cabecera-fija { display: block; }
  .cabecera-fija[data-visible="si"] { transform: none; }
  .cabecera-fija .cabecera { height: 64px; }
}

/* ===== VIÑETAS ===== */
.lista-chevron { list-style: none; margin: 0; padding: 0; }

.lista-chevron > li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 18px;
}

.lista-chevron > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 11px; height: 15px;
  background: var(--blanco);
  
  clip-path: polygon(0 0, 62% 50%, 0 100%, 34% 100%, 100% 50%, 34% 0);
}

.sobre-oscuro .lista-chevron > li::before { background: var(--blanco); }

/* ===== BLOQUES RESERVADOS ===== */
.reservado {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  border: 2px dashed var(--magenta);
  border-radius: var(--radio);
  padding: 24px;
  background: var(--superficie);
  color: rgba(255, 255, 255, .88);
  font-size: var(--t-mini);
}

.reservado--16-9 { aspect-ratio: 16 / 9; }


.reservado--9-16 { aspect-ratio: 9 / 16; }

.reservado--franja { min-height: 120px; }

.reservado__que {
  font-size: var(--t-cuerpo);
  font-stretch: 112%;
  font-weight: 600;
  color: var(--blanco);
}

.reservado__specs { opacity: .85; }

.reservado__quien {
  font-size: var(--t-rotulo);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--magenta);
  font-weight: 600;
}

.sobre-oscuro .reservado {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .88);
}

.sobre-oscuro .reservado__que { color: var(--blanco); }


/* ===== MOVIMIENTO · ENTRADAS =====
   Se declaran el estado escondido y el final del barrido (de inset() a none no
   se interpola). Al revelarse, cada pieza vuelve a su propia opacidad y
   posición con la transición; el JS quita el atributo al terminar para
   devolverle sus transiciones de siempre. Escondida no se toca ni recibe el
   mouse: nada invisible se puede pulsar. */
html body [data-entra] {
  transition: opacity var(--t-texto) var(--curva) var(--retraso, 0ms),
              transform var(--t-texto) var(--curva) var(--retraso, 0ms),
              clip-path var(--t-texto) var(--curva) var(--retraso, 0ms);
}

html body [data-entra=""] { opacity: 0; transform: translateY(var(--sube)); pointer-events: none; }

html body [data-entra=""][data-entra-tipo="grande"] { transform: translateY(var(--sube-grande)); }

html body [data-entra=""][data-entra-tipo="crece"] { transform: translateY(var(--sube)) scale(.96); }

html body [data-entra=""][data-entra-tipo="barre"] { transform: none; clip-path: inset(0 100% 0 0); }

html body [data-entra="visible"][data-entra-tipo="barre"] { clip-path: inset(0 0 0 0); }

html body [data-entra="final"] { transition: none !important; }

/* La portada entra sola al cargar, sin JavaScript: el titular sin retraso */
@media (prefers-reduced-motion: no-preference) {
  .gancho h1, .gancho__sub, .gancho .boton, .gancho__micro, .prueba, .gancho__paula {
      animation: entra-gancho var(--t-texto) var(--curva) backwards;
    }
  .gancho__sub   { animation-delay: calc(var(--escalon) * 1); }
  /* la foto es el LCP: solo se mueve, sin fundido, para que cuente desde el primer cuadro */
  .gancho__paula { animation-name: entra-foto; animation-delay: calc(var(--escalon) * 1.5); }
  .gancho .boton { animation-delay: calc(var(--escalon) * 2); }
  .gancho__micro { animation-delay: calc(var(--escalon) * 2.75); }
  .prueba        { animation-delay: calc(var(--escalon) * 3.5); }
}

@keyframes entra-gancho { from { opacity: 0; transform: translateY(var(--sube)); } }

@keyframes entra-foto { from { transform: translateY(var(--sube)) scale(.97); } }

@media (max-width: 719px) {
  :root { --sube: 20px; --sube-grande: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
    }
  html body [data-entra] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ===== 01 · GANCHO ===== */
.gancho { padding-bottom: var(--aire-s); }

@media (min-width: 900px) {
  .gancho { padding-bottom: var(--aire-l); }
}

.gancho h1 { margin-top: 4px; }

.gancho__sub { font-size: var(--t-cuerpo); margin: 12px 0 0; max-width: 34ch; }

.gancho .boton { margin-top: 16px; }

.gancho__micro { font-size: 0.9375rem; margin-top: 6px; opacity: .8; }

.prueba {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--magenta);
}

.prueba__nombre {
  font-size: var(--t-cuerpo);
  font-stretch: 112%;
  font-weight: 600;
  color: var(--blanco);
  margin: 0 0 2px;
  line-height: 1.25;
}

.prueba__texto { font-size: var(--t-mini); line-height: 1.35; margin: 0; opacity: .88; }

.gancho__paula {
  position: relative;
  margin: 12px calc(var(--margen) * -1) 0 auto;
  width: 56%;
  max-width: 230px;
}

.gancho__paula img { width: 100%; height: auto; display: block; }

/* Celular: la foto de Paula va al lado de la señal de prueba (su nombre y sus
   credenciales), no sola debajo de todo. La portada queda más corta. */
@media (max-width: 899px) {
  .gancho {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42%;
      column-gap: 10px;
      align-items: end;
    }
  .gancho .col-1-7 { display: contents; }
  .gancho h1, .gancho__sub, .gancho .boton, .gancho__micro { grid-column: 1 / -1; }
  .gancho .prueba { grid-column: 1; grid-row: 5; align-self: center; margin-top: 12px; }
  .gancho__paula {
      grid-column: 2; grid-row: 5;
      width: auto; max-width: 190px;
      margin: 8px calc(var(--margen) * -1) 0 0;
      justify-self: end;
    }
  .gancho { padding-bottom: 0; }
}

@media (min-width: 900px) {
  .gancho .boton { margin-top: 28px; }
  .prueba { margin-top: 28px; }
  .gancho .col-1-7 { grid-column: 1 / 8; }
  .gancho__sub { max-width: var(--medida); }
  .gancho h1 { margin-top: 20px; }
  .gancho { position: relative; padding-bottom: 0; }
  .gancho__paula {
      grid-column: 8 / 13;
      align-self: end;
      margin: 0;
      width: 100%;
      max-width: none;
    }
}

/* ===== 02 · ¿TE SUENA? ===== */
.sintomas { list-style: none; margin: 48px 0 0; padding: 0; }

.sintoma {
  position: relative;
  padding-top: 20px;
  margin-bottom: 40px;
}

.sintoma::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 2px;
  background: var(--magenta);
}

.sintoma h3 { margin-bottom: 10px; }

.sintoma p { max-width: 42ch; }

@media (min-width: 720px) {
  .sintomas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
  .sintoma { margin-bottom: 0; }
}

.mensaje-central {
  margin-top: 64px;
  margin-left: calc(var(--margen) * -1);
  padding: 28px var(--margen);
  border-top: 2px solid var(--purpura);
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-h3);
  font-stretch: 112%;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tinta-fuerte);
  max-width: 24ch;
}

@media (min-width: 900px) {
  .mensaje-central {
      margin-top: 96px;
      margin-left: calc(var(--margen) * -1);
      padding-left: var(--margen);
      max-width: 30ch;
    }
}

/* ===== 03 + 04 · LA PREGUNTA Y EL VIDEO ===== */

.pregunta { margin: 0; }

.transicion { margin-top: 40px; font-size: var(--t-h3); font-stretch: 110%; }

.pildora {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: var(--radio-boton);
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .92);
  font-size: var(--t-mini);
}

.lista-cambia { margin-top: 24px; }

.lista-cambia > li { margin-bottom: 12px; }

@media (min-width: 720px) {
  .lista-cambia { columns: 2; column-gap: 40px; }
  .lista-cambia > li { break-inside: avoid; }
}

.video-linea { max-width: var(--medida); }

.video-linea { font-size: var(--t-h3); font-stretch: 110%; margin-bottom: 8px; color: var(--blanco); }

.video-micro { font-size: var(--t-mini); opacity: .85; margin-bottom: 24px; }

.video-marco {
  max-width: 820px;   
}

.video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--filete-control-oscuro);
}

.video-marco iframe { width: 100%; height: 100%; border: 0; }

.video-aviso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(14, 25, 73, .85);
  color: var(--blanco);
  font-size: 1.25rem;
  font-stretch: 112%;
  font-weight: 600;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.video-aviso[hidden] { display: none; }

.video-aviso__icono {
  width: 46px; height: 46px;
  border: 2px solid currentColor;
  border-radius: var(--radio-boton);
  display: grid; place-items: center;
}

.video-aviso__icono::after {
  content: "";
  width: 0; height: 0;
  border-left: 14px solid currentColor;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}

.en-la-llamada { margin-top: var(--aire-xs); }

.en-la-llamada__entrada { font-style: italic; margin-bottom: 20px; }

/* ===== 05 · FRANJA DE EMPRESAS ===== */
.franja {
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  padding-block: 28px;
  font-size: var(--t-h3);
  font-stretch: 110%;
  color: var(--tinta-fuerte);
  max-width: 34ch;
}

.testimonios { display: grid; gap: 16px; margin-top: 28px; }

@media (min-width: 720px) {
  .testimonios { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 07 · PAULA ===== */
.credenciales { list-style: none; margin: 32px 0 0; padding: 0; }

.credenciales > li {
  border-top: 1px solid var(--filete);
  padding: 16px 0;
  font-size: var(--t-mini);
}

.cita {
  margin: 40px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--magenta);
  font-size: var(--t-h3);
  font-stretch: 110%;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinta-fuerte);
}

.sobre-oscuro .cita { color: var(--blanco); }

.cita cite { display: block; margin-top: 14px; font-size: var(--t-mini); font-style: normal; font-weight: 400; opacity: .8; }

.descriptor { font-size: var(--t-mini); letter-spacing: .01em; margin-top: 6px; }

/* ===== 10 · PREGUNTAS FRECUENTES ===== */
.faq { border-top: 1px solid var(--filete); }

.faq details { border-bottom: 1px solid var(--filete); }

.faq summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  min-height: var(--toque);
  cursor: pointer;
  font-size: var(--t-cuerpo);
  font-stretch: 108%;
  font-weight: 600;
  color: var(--tinta-fuerte);
}

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

.faq summary::after {
  content: "";
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: 4px;
  background:
    linear-gradient(var(--purpura), var(--purpura)) center/100% 2px no-repeat,
    linear-gradient(var(--purpura), var(--purpura)) center/2px 100% no-repeat;
  transition: transform var(--t-micro) var(--curva);
}

.faq details[open] summary::after {
  background: linear-gradient(var(--purpura), var(--purpura)) center/100% 2px no-repeat;
}

.faq__respuesta { padding-bottom: 24px; max-width: 62ch; }

/* ===== PIE DE PÁGINA ===== */
.pie { padding-block: var(--aire-s) var(--aire-xs); }

.pie__marca { max-width: 360px; }

.pie__marca img { height: 28px; width: auto; margin-bottom: 14px; opacity: .92; }

.pie__linea { font-size: var(--t-mini); opacity: .86; margin: 0; }

.pie__cols {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

@media (min-width: 720px) {
  .pie__cols { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; align-items: start; }
  .pie__marca { margin: 0; }
}

.pie h2 {
  font-size: var(--t-rotulo);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blanco);
  opacity: .7;
  margin: 0 0 12px;
}

.pie ul { list-style: none; margin: 0; padding: 0; }

.pie li { margin-bottom: 8px; }

.pie a, .pie button {
  color: rgba(255, 255, 255, .88);
  font-size: var(--t-mini);
  font-family: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 0;
  min-height: 36px;
  cursor: pointer;
  text-align: left;
}

.pie a:hover, .pie button:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }

.pie__datos { font-size: var(--t-mini); opacity: .82; }

.pie__datos p { margin: 0 0 6px; }

.pie__copy {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--filete-oscuro);
  font-size: var(--t-rotulo);
  opacity: .7;
}

.remate { margin-top: 20px; font-size: var(--t-cuerpo); color: rgba(255,255,255,.90); max-width: 40ch; }

.remate strong { font-weight: 600; }

/* ===== FORMULARIO ===== */

.embudo { padding-block: var(--aire-l); }

html.js-listo .embudo:not(.modal) { display: none; }

.embudo.modal { padding-block: 0; }

.embudo.modal > .contenedor { padding: 0; max-width: 620px; width: 100%; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;      
  justify-items: center;
  padding: 0;
  background: var(--velo);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-entra) var(--curva), visibility var(--t-entra);
}

.modal[data-abierto="si"] { opacity: 1; visibility: visible; }

.panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--blanco);
  border-radius: var(--radio) var(--radio) 0 0;
  
  padding: 64px var(--margen) 32px;
  box-shadow: var(--sombra-panel);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .panel {
      border-radius: var(--radio);
      max-height: min(92dvh, 860px);
      padding: 64px 40px 36px;
    }
}

.panel__cerrar {
  position: absolute;
  top: 10px; right: 10px;
  width: var(--toque); height: var(--toque);
  border: 1px solid var(--filete-control);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--tinta-fuerte);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.progreso {
  height: 4px;
  background: var(--filete);
  border-radius: var(--radio-boton);
  overflow: hidden;
  margin-bottom: 10px;
}

.progreso__barra {
  height: 100%;
  background: var(--purpura);
  border-radius: var(--radio-boton);
  transform-origin: left center;
  transition: transform var(--t-fase) var(--curva);
}

.progreso__texto {
  font-size: var(--t-rotulo);
  font-stretch: 125%;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 24px;
}

.pantalla { display: none; }

.pantalla[data-activa="si"] { display: block; }

.pantalla h2 { font-size: var(--t-h3); margin-bottom: 8px; }

.pantalla__bajada { font-size: var(--t-mini); margin-bottom: 20px; }

[data-encabezado] { margin-bottom: 28px; }

[data-encabezado] h2 { font-size: var(--t-h3); }

[data-encabezado] p { margin-bottom: 0; }

.opciones { display: grid; gap: 10px; margin: 0 0 24px; }

.opcion {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 20px;
  border: 1px solid var(--filete-control);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta-fuerte);
  font-family: inherit;
  font-size: var(--t-campo);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--curva),
              background var(--t-micro) var(--curva);
}

.opcion:hover { border-color: var(--purpura); }

.opcion[aria-pressed="true"] {
  border: 2px solid var(--purpura);
  background: var(--seleccion);
  font-weight: 600;
}

.mandos { display: flex; gap: 12px; align-items: center; }

.mandos .boton { flex: 1; }

.campo { margin-bottom: 20px; }

.campo label {
  display: block;
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--tinta-fuerte);
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid var(--filete-control);
  border-radius: var(--radio);
  background: var(--blanco);
  font-family: inherit;
  font-size: var(--t-campo);
  color: var(--tinta-fuerte);
}

.campo input:focus { border-color: var(--purpura); }

.campo__ayuda { font-size: var(--t-mini); margin-top: 6px; opacity: .8; }

.campo__error {
  font-size: var(--t-mini);
  color: var(--purpura);
  margin-top: 6px;
  font-weight: 600;
}

.campo[data-error] input { border-color: var(--purpura); border-width: 2px; }

.casilla { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }

.casilla input {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  margin-top: 4px;
  accent-color: var(--purpura);
}

.casilla label { font-size: var(--t-mini); line-height: 1.5; }

.casilla button {
  background: none; border: 0; padding: 0;
  color: var(--purpura); font: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

.tranquilidad { font-size: var(--t-mini); margin-top: 16px; opacity: .85; }

.aviso-red {
  border: 1px solid var(--filete-control);
  border-radius: var(--radio);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: var(--t-mini);
}

.calendario { border-radius: var(--radio); overflow: hidden; }

.calendario[data-montado] { min-height: 560px; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ===== POPUP DE SALIDA =====
   Todo centrado y simétrico: rótulo, titular en líneas parejas, texto, las
   tres cosas que te llevas (en tres columnas con el ícono arriba desde 640 px)
   y el botón. Al abrirse, el panel sube y se asienta. */
.popup .panel {
  max-width: 600px;
  background: var(--azul);
  color: rgba(255, 255, 255, .90);
  border-top: 3px solid var(--magenta);
  border-radius: var(--radio);
  text-align: center;
  transform: translateY(18px) scale(.98);
  transition: transform var(--t-texto) var(--curva);
}

.popup[data-abierto="si"] .panel { transform: none; }

.popup .panel h2 { color: var(--blanco); max-width: 20ch; margin-inline: auto; text-wrap: balance; }

.popup__rotulo { color: inherit; opacity: .8; }

.popup__texto { margin: 16px auto 0; max-width: 40ch; text-wrap: pretty; }

.popup__lista { width: fit-content; margin: 24px auto 0; text-align: left; }

.popup__boton { margin-top: 12px; }

.popup__rechazo { margin: 8px 0 0; }

@media (min-width: 640px) {
  .popup__lista {
      width: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin: 30px 0 32px;
      text-align: center;
    }
  .popup .popup__lista > li:has(.ico) { flex-direction: column; align-items: center; gap: 10px; margin: 0; }
  .popup__boton { width: auto; padding-inline: 44px; margin-top: 0; }
}

.popup .panel__cerrar {
  background: transparent;
  border-color: var(--filete-control-oscuro);
  color: var(--blanco);
}

.popup .boton { background: var(--blanco); color: var(--purpura); }

.popup .boton-secundario { color: rgba(255, 255, 255, .8); }

/* ===== MODAL DE LA POLÍTICA ===== */
.modal-politica { z-index: 70; }

.modal-politica .panel { max-width: 720px; }

.modal-politica__texto {
  max-height: 60vh;
  overflow-y: auto;
  font-size: var(--t-mini);
  line-height: 1.6;
  padding-right: 12px;
}

.modal-politica__texto h3 { font-size: var(--t-cuerpo); margin: 22px 0 8px; }

/* ===== AVISO DE COOKIES =====
   Tarjeta flotante de vidrio oscuro con el borde en degradado de la marca
   (el mismo de «Esto es para ti»). Entra subiendo; en el celular se apoya
   encima de la barra fija y sube con ella por transform. Nunca tapa la
   portada: aparece después de pasarla. */
.cookies {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: start;
  padding: 16px 16px 10px;
  border-radius: var(--radio);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, .92);
  font-size: var(--t-mini);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity var(--t-entra) var(--curva), transform var(--t-entra) var(--curva), visibility var(--t-entra);
}

.cookies::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radio);
  padding: 1px;
  background: linear-gradient(140deg, var(--magenta) 0%, var(--purpura) 46%, var(--s-cefac) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.cookies[data-visible="si"] { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 899px) {
  .barra-fija[data-visible="si"] ~ .cookies[data-visible="si"] { transform: translateY(calc(-1 * var(--alto-barra))); }
}

.cookies__ico { color: var(--magenta-claro); margin-top: 1px; }

.cookies__texto { margin: 0; }

.cookies__acciones {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.cookies__botones { display: flex; gap: 8px; flex-wrap: wrap; }

.cookies__politica {
  min-height: var(--toque);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--magenta-claro);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.cookies__boton {
  min-height: var(--toque);
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--blanco);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-micro) var(--curva), border-color var(--t-micro) var(--curva);
}

.cookies__boton:hover { background: rgba(255, 255, 255, .10); border-color: var(--blanco); }

.cookies__boton:focus-visible,
.cookies__politica:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }

/* Desde 720 px: una franja a lo ancho del contenedor, en la zona libre bajo la
   portada: ícono y texto a la izquierda, política y botón a la derecha. */
@media (min-width: 720px) {
  .cookies {
      left: 0; right: 0;
      bottom: 24px;
      width: min(calc(100% - 48px), var(--ancho));
      margin-inline: auto;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 0 14px;
      padding: 10px 12px 10px 20px;
      font-size: var(--t-cuerpo);
    }
  .cookies__ico { margin-top: 0; }
  .cookies__acciones { grid-column: auto; flex-wrap: nowrap; gap: 20px; }
}

/* ===== POLÍTICA DE COOKIES ===== */
.politica-fecha { margin: 4px 0 18px; font-size: var(--t-mini); }

.panel .politica-fecha { color: var(--tinta); }

.lista-cookies { margin: 12px 0 16px; }

.lista-cookies > div { padding: 12px 0; border-top: 1px solid var(--filete); }

.lista-cookies > div:last-child { border-bottom: 1px solid var(--filete); }

.lista-cookies dt { font-weight: 600; overflow-wrap: anywhere; }

.lista-cookies dd { margin: 4px 0 0; }

.panel .lista-cookies__dura { color: var(--tinta); font-size: .9em; }

.politica-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ===== AJUSTES DE SECCIÓN ===== */

.pantalla-impacto .pregunta { max-width: 16ch; }

.pantalla-impacto { padding-block: var(--aire-m); }

.remate { margin-top: 16px; }

.reservado--linea {
  aspect-ratio: auto;
  padding: 12px 14px;
  text-align: left;
  place-content: start;
}

:target, [id] { scroll-margin-top: 84px; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===== AJUSTES DE SECCIÓN ===== */

@media (max-width: 719px) {
  .reservado--9-16 { aspect-ratio: auto; min-height: 132px; }
  .reservado--16-9 { aspect-ratio: 16 / 10; }
  .reservado { padding: 16px; gap: 4px; }
  .reservado__specs { font-size: 13px; }
}

@media (max-width: 899px) {
  #paula .credenciales > li { padding: 10px 0; }
  #paula .cita { margin-top: 24px; }
}

@media (max-width: 719px) {
  .pie { padding-block: var(--aire-xs); }
  .pie__cols { margin-top: 24px; gap: 24px; }
  .pie__copy { margin-top: 24px; padding-top: 16px; }
}

@media (max-width: 899px) {
  .seccion { padding-block: 52px; }
  #paula h2 { font-size: var(--t-h3); }
  #paula .descriptor { margin-top: 4px; }
  #paula .medida { margin-top: 14px !important; font-size: var(--t-mini); }
  #paula .credenciales { margin-top: 18px; }
  #paula .credenciales > li { padding: 8px 0; font-size: 13px; }
  #paula .cita { margin-top: 18px; font-size: var(--t-cuerpo); padding-left: 16px; }
  .lista-chevron > li { margin-bottom: 12px; }
}

@media (max-width: 899px) {
  .sintoma { margin-bottom: 20px; }
  .sintoma h3 { font-size: var(--t-cuerpo); }
  .sintoma p { font-size: var(--t-mini); }
  .lista-chevron > li { margin-bottom: 10px; }
}

/* ===== CIERRE: QUE TODA SECCIÓN QUEPA EN 390 × 844 Y 1280 × 800 ===== */
@media (max-width: 899px) {
  .seccion { padding-block: 44px; }

  
  #paula .credenciales > li { padding: 6px 0; font-size: 13px; line-height: 1.3; }
  #paula .descriptor { font-size: 15px; }
  #paula .cita { font-size: var(--t-mini); margin-top: 14px; padding-left: 14px; }

  

  
  .faq summary { padding: 17px 0; }
}

/* ===== QUE CADA SECCIÓN QUEPA TAMBIÉN EN 1280 × 800 ===== */
@media (min-width: 900px) {
  .seccion { padding-block: 72px; }

  
  #video .contenedor { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
  #video .video-marco, #video .reservado--16-9 { max-width: none; margin: 0; }
  #video .en-la-llamada { margin-top: 0; }

  
  .testimonios { margin-top: 20px; }
  #paula .cita { margin-top: 20px; }
}

@media (min-width: 900px) {
  .testimonios .reservado--9-16 { aspect-ratio: 3 / 4; }
  #paula .credenciales > li { padding: 12px 0; }
}

/* ===== COMPONER: SOLO DOS FORMAS DE ARMAR UNA SECCIÓN ===== */
.comp-a > .contenedor { text-align: left; }

@media (min-width: 900px) {
  .comp-a > .contenedor { text-align: center; }
  .comp-a .medida, .comp-a .col-1-8 { margin-inline: auto; }
  .comp-a .lista-chevron { text-align: left; }
  .comp-b > .contenedor {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 56px;
      align-items: start;
    }
  .comp-b__cabeza h2, .comp-b__cabeza .medida { max-width: none; }
}

#video .video-marco, #video .reservado--16-9 {
  max-width: 880px;
  margin-inline: auto;
}

#video .en-la-llamada { margin-top: 28px; }

@media (min-width: 900px) {
  #video .contenedor { display: block; }
  #video .en-la-llamada__entrada { text-align: center; }
  #video .lista-chevron {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: 880px;
      margin-inline: auto;
    }
  #video .lista-chevron > li { margin-bottom: 0; }
  #video .boton { margin-top: 28px; }
}

#preguntas h2 { margin-bottom: 28px; }

.faq summary:focus { outline: none; }

.faq summary:focus-visible { outline: 3px solid var(--blanco); outline-offset: 4px; }

.faq details { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.faq { border-top: 1px solid rgba(255, 255, 255, .12); }

.faq summary { color: var(--blanco); }

.faq summary::after {
  background:
    linear-gradient(var(--blanco), var(--blanco)) center/100% 2px no-repeat,
    linear-gradient(var(--blanco), var(--blanco)) center/2px 100% no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(var(--blanco), var(--blanco)) center/100% 2px no-repeat;
}

.credenciales > li { border-top: 1px solid rgba(255, 255, 255, .12); }

.franja {
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--blanco);
}

.mensaje-central {
  border-top: 2px solid var(--magenta-claro);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--blanco);
}

.descriptor,
.en-la-llamada__entrada { color: rgba(255, 255, 255, .88); }

.sintoma::before { background: var(--magenta-claro); }

.prueba__nombre { color: var(--blanco); }

.barra-fija {
  background: rgba(10, 7, 34, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.pie { border-top: 1px solid rgba(255, 255, 255, .10); }

@media (min-width: 900px) {
  #paula .credenciales > li { padding: 10px 0; }
  #paula .cita { margin-top: 18px; }
}

/* ===== AUDITORÍA DE CELULAR ===== */

.pie a, .pie button,
.cabecera__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.cabecera__logo { min-height: 48px; display: inline-flex; align-items: center; }

.boton-secundario { min-height: 48px; }

.pie li { margin-bottom: 0; }

html.modal-abierto, html.modal-abierto body { overflow: hidden; }

body.modal-abierto {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
}

.modal { height: 100dvh; }

.modal[style*="--vh"] .panel { max-height: calc(var(--vh) - 16px); }

html.modal-abierto .barra-fija,
html.teclado .barra-fija { transform: translateY(110%); }

.calendario { -webkit-overflow-scrolling: touch; }

.calendario__respaldo { margin-top: 14px; font-size: var(--t-mini); }

@media (max-height: 520px) and (orientation: landscape) {
  .panel { padding-top: 52px; padding-bottom: 20px; }
  .opciones { gap: 8px; }
  .opcion { min-height: 48px; padding: 10px 16px; }
  .campo { margin-bottom: 14px; }
}

/* ===== EL PANEL BLANCO DEFINE SU PROPIO COLOR DE TEXTO ===== */
.panel,
.panel h1, .panel h2, .panel h3, .panel p, .panel li,
.panel label, .panel legend, .panel span, .panel strong, .panel em,
.panel dt, .panel dd, .panel cite, .panel blockquote {
  color: var(--tinta-fuerte);
}

.panel .pantalla__bajada,
.panel .campo__ayuda,
.panel .tranquilidad,
.panel .progreso__texto,
.panel .aviso-red { color: var(--tinta); }

.panel .campo__error { color: var(--purpura); }

.panel .opcion { color: var(--tinta-fuerte); background: var(--blanco); }

.panel .opcion[aria-pressed="true"] { background: var(--seleccion); }

.panel .boton-secundario { color: var(--tinta); }

.panel .casilla button,
.panel a { color: var(--purpura); }

.panel .panel__cerrar { color: var(--tinta-fuerte); background: var(--blanco); }

.panel .reservado {
  color: var(--tinta-malla);
  background: rgba(148, 28, 128, .05);
}

.panel .reservado__que { color: var(--tinta-fuerte); }

.panel .lista-chevron > li::before { background: var(--purpura); }

.panel :focus-visible { outline-color: var(--purpura); }

.popup .panel,
.popup .panel h2, .popup .panel p, .popup .panel li, .popup .panel span {
  color: rgba(255, 255, 255, .92);
  background-color: transparent;
}

.popup .panel { background: var(--azul); }

.popup .panel h2 { color: var(--blanco); }

.popup .panel .boton { background: var(--blanco); color: var(--purpura); }

.popup .panel .boton-secundario { color: rgba(255, 255, 255, .85); }

.popup .panel .panel__cerrar {
  background: transparent;
  border-color: var(--filete-control-oscuro);
  color: var(--blanco);
}

.popup .lista-chevron > li::before { background: var(--blanco); }

.cita { color: var(--blanco); }

.cita cite { color: rgba(255, 255, 255, .8); }

.descriptor,
.descriptor strong,
.credenciales > li,
.franja,
.en-la-llamada__entrada,
.remate,
.fase__texto,
.fase__titulo,
.sintoma p,
.sintoma h3,
.faq__respuesta,
.faq__respuesta p,
.reductor,
.gancho__micro,
.prueba__texto,
.paso-texto,
.paso-contador,
.paso-pie,
.pie__linea,
.pie__datos,
.pie__datos p {
  color: rgba(255, 255, 255, .90);
}

.credenciales > li { font-size: 0.9375rem; }

h1, h2, h3, .paso-nombre, .mensaje-central,
.prueba__nombre, .reservado__que { color: var(--blanco); }

.reservado__quien { color: var(--magenta-claro); }

/* ===== COMPOSICIÓN ===== */

.pantalla-impacto > .contenedor { text-align: center; }

.pantalla-impacto .pregunta-caja {
  font-size: var(--t-pregunta);
  font-stretch: 118%;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--blanco);
  max-width: 18ch;
  margin: 0 auto;
}

.pantalla-impacto .rotulo { text-align: center; }

.franja { margin-inline: auto; text-align: center; max-width: 42ch; }

.comp-b__cabeza h2 { margin-bottom: 10px; }

.bloque-boton { margin-top: 28px; }

.bloque-boton .reductor { margin-top: 10px; }

@media (min-width: 900px) {
  .comp-a .bloque-boton { text-align: center; }
}

/* ===== ÍCONOS DE REFERENCIA ===== */
.ico {
  color: var(--magenta-claro);
  flex: 0 0 auto;
  display: block;
}

.lista-chevron > li:has(.ico)::before { display: none; }

.lista-chevron > li:has(.ico) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0;
}

.lista-chevron > li > .ico { margin-top: 1px; }

.credenciales > li:has(.ico) {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== ÍCONOS Y FILETES CENTRADOS EN SECCIÓN CENTRADA ===== */
@media (min-width: 900px) {
  .comp-a .sintoma { text-align: center; }
  .comp-a .sintoma::before { left: 50%; transform: translateX(-50%); }
  .comp-a .sintoma .ico { margin-inline: auto; }
  .comp-a .sintoma p { margin-inline: auto; }
}

/* ===== PREGUNTAS FRECUENTES EN COMPOSICIÓN A ===== */
#preguntas .faq { text-align: left; }

.faq__col { display: contents; }

@media (min-width: 900px) {
  #preguntas .faq {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 56px;
      align-items: start;
      border-top: 0;
    }
  .faq__col { display: block; }
  #preguntas .faq details { border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 0; }
  #preguntas .faq .faq__col > details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  #preguntas .faq summary { padding-block: 16px; }
  .faq__respuesta { max-width: none; }
}

/* ===== FOTOS DE PAULA =====
   Fotos reales, sin retoque: solo recorte y compresión (02-sin-filtro/
   exportar-fotos-paula.py). Radio de 16 px como todo lo que no es botón. En
   celular cada una usa su propio recorte, más bajo, para que la sección siga
   cabiendo en la pantalla. */
.paula-foto, .cierre__foto, .con-paula__foto { margin: 0; }

.paula-foto img, .cierre__foto img, .con-paula__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
}

/* Quién es Paula: en celular arriba del texto; en escritorio a la izquierda,
   del alto del texto, con una columna de aire antes del texto */
.paula-foto { margin-bottom: 20px; }

@media (min-width: 900px) {
  /* #paula compone en dos columnas (5fr 7fr, comp-b): cada bloque a la suya */
  #paula .reticula { align-items: center; }
  #paula .reticula > .col-1-6 { grid-column: 1; }
  #paula .reticula > .col-7-12 { grid-column: 2; }
  .paula-foto { margin-bottom: 0; }
}

/* El siguiente paso: la cara de Paula junto a «Hablas directamente con Paula»
   en celular; en escritorio, la foto a la izquierda del botón */
.con-paula-bloque {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 14px;
  align-items: center;
  text-align: left;
}

.con-paula__foto img { width: 64px; height: 64px; object-fit: cover; }

.con-paula__texto { display: contents; }

.con-paula-bloque .con-paula { grid-column: 2; grid-row: 1; margin: 0; }

.con-paula-bloque .boton--grande { grid-column: 1 / -1; width: 100%; margin-top: 12px; }

.con-paula-bloque .datos-llamada { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .con-paula-bloque {
      grid-template-columns: 280px auto;
      justify-content: center;
      column-gap: 40px;
      margin-top: 28px;
    }
  #siguiente-paso { padding-block: 60px; }
  .con-paula__foto img { width: 100%; height: auto; }
  .con-paula__texto { display: block; }
  .con-paula-bloque .con-paula { margin: 0 0 18px; }
  .con-paula-bloque .boton--grande { width: auto; margin-top: 0; }
  .con-paula-bloque .datos-llamada { justify-content: flex-start; }
  .comp-a .con-paula-bloque { text-align: left; }
}

/* Cierre: en celular la foto arriba; en escritorio el texto a la izquierda y
   Paula a la derecha, mirando de frente */
.cierre__foto { margin-bottom: 24px; }

@media (min-width: 900px) {
  .cierre__reticula {
      display: grid;
      grid-template-columns: 7fr 5fr;
      column-gap: 64px;
      align-items: center;
    }
  .cierre__foto { grid-column: 2; grid-row: 1; margin: 0; }
  .cierre__texto { grid-column: 1; grid-row: 1; }
  .comp-a.cierre > .contenedor { text-align: left; }
  .comp-a.cierre .col-1-8, .comp-a.cierre .medida { margin-inline: 0; }
  .comp-a.cierre .bloque-boton { text-align: left; }
}

/* ===== FOTOS FANTASMA ===== */
.seccion { position: relative; }

.seccion > .contenedor { position: relative; z-index: 1; }

.fantasma {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fantasma picture { display: block; width: 100%; height: 100%; }

.fantasma img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .50;
}

.fantasma--pregunta {
  -webkit-mask-image: radial-gradient(118% 124% at 62% 52%, #000 26%, rgba(0,0,0,.55) 62%, transparent 100%);
          mask-image: radial-gradient(118% 124% at 62% 52%, #000 26%, rgba(0,0,0,.55) 62%, transparent 100%);
}

.fantasma--pregunta img { opacity: .58; object-position: 62% 50%; }

.fantasma--te-suena {
  -webkit-mask-image: radial-gradient(96% 76% at 50% 1%, #000 14%, rgba(0,0,0,.42) 42%, transparent 80%);
          mask-image: radial-gradient(96% 76% at 50% 1%, #000 14%, rgba(0,0,0,.42) 42%, transparent 80%);
}

.fantasma--te-suena img { object-position: 42% 42%; }

.fantasma--lo-que-cambia {
  -webkit-mask-image: radial-gradient(86% 140% at 15% 50%, #000 16%, rgba(0,0,0,.5) 50%, transparent 96%);
          mask-image: radial-gradient(86% 140% at 15% 50%, #000 16%, rgba(0,0,0,.5) 50%, transparent 96%);
}

.fantasma--lo-que-cambia img { object-position: 28% 55%; }

/* Trabajar con Paula: Paula conversando entra desde la derecha, detrás del
   título, y se apaga antes de la línea de las fases */
.fantasma--fases {
  -webkit-mask-image: radial-gradient(70% 96% at 80% 26%, #000 14%, rgba(0,0,0,.5) 46%, transparent 86%);
          mask-image: radial-gradient(70% 96% at 80% 26%, #000 14%, rgba(0,0,0,.5) 46%, transparent 86%);
}

.fantasma--fases img { object-position: 60% 12%; }

@media (max-width: 899px) {
  .fantasma--pregunta img      { object-position: 74% 48%; }
  .fantasma--te-suena img      { object-position: 40% 40%; }
  .fantasma--lo-que-cambia img { object-position: 32% 55%; }
  .fantasma--fases { bottom: auto; height: min(100%, 125vw); }
  .fantasma--fases img { object-position: 50% 20%; }
  .fantasma--fases {
      -webkit-mask-image: radial-gradient(120% 80% at 60% 18%, #000 16%, rgba(0,0,0,.45) 50%, transparent 92%);
              mask-image: radial-gradient(120% 80% at 60% 18%, #000 16%, rgba(0,0,0,.45) 50%, transparent 92%);
    }
  .fantasma--lo-que-cambia {
      -webkit-mask-image: radial-gradient(130% 92% at 46% 22%, #000 18%, rgba(0,0,0,.5) 54%, transparent 96%);
              mask-image: radial-gradient(130% 92% at 46% 22%, #000 18%, rgba(0,0,0,.5) 54%, transparent 96%);
    }
}

.pantalla-impacto { padding-block: calc(var(--aire-m) + 44px); }

/* ===== «NUESTRO MÉTODO» COMO UN SOLO BLOQUE ===== */
.metodo { margin-top: var(--aire-xs); }

.metodo__cabeza h2 { margin-bottom: 8px; }

.bajada {
  margin: 0;
  font-size: var(--t-cuerpo);
  color: rgba(255, 255, 255, .90);
}

/* ===== --- LA BARRA DE 8 SEGMENTOS: CADA UNO LLEVA A SU PASO --- ===== */
.paso-segmentos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
}

.paso-segmentos li { margin: 0; }

.paso-segmentos button {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.paso-segmentos button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px; bottom: -12px;
}

/* La pista es el ::before; el relleno es el span. El relleno del paso activo
   se llena de izquierda a derecha mientras corre el recorrido (como las
   historias de Instagram): cuando termina de llenarse, cambia el paso. Con la
   pausa se congela donde va. Es un reloj, por eso avanza lineal. */
.paso-segmentos button::before,
.paso-segmentos button > span {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 4px;
  border-radius: var(--radio-boton);
}

.paso-segmentos button::before { background: var(--filete-oscuro); transition: background var(--t-micro) var(--curva); }

.paso-segmentos button > span {
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left center;
}

.paso-segmentos button > span[data-hecho] { transform: scaleX(1); }

.paso-segmentos[data-reloj] button[aria-current="step"] > span { animation: llenar-segmento var(--t-paso) linear both; }

.paso-segmentos[data-reloj="pausa"] button[aria-current="step"] > span { animation-play-state: paused; }

@keyframes llenar-segmento { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.paso-segmentos button:hover::before { background: var(--magenta-claro); }

.paso-segmentos button:focus { outline: none; }

.paso-segmentos button:focus-visible::before {
  background: var(--blanco);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

@media (prefers-reduced-motion: reduce) {
  .paso-segmentos[data-reloj] button[aria-current="step"] > span { animation: none; }
}

/* ===== --- EL PASO: RÓTULO, NOMBRE GRANDE Y TEXTO DE ALTO FIJO --- ===== */
.metodo__paso { margin-top: 26px; }

.paso-contador { margin: 0 0 8px; }

.paso-nombre {
  margin: 0 0 10px;
  font-size: var(--t-h3);
  font-stretch: 112%;
  font-weight: 600;
  line-height: 1.15;
}

.paso-texto {
  margin: 0;
  font-size: var(--t-cuerpo);
  max-width: 44ch;
}

.metodo__paso[data-cambiando] .paso-contador,
.metodo__paso[data-cambiando] .paso-nombre,
.metodo__paso[data-cambiando] .paso-texto { opacity: 0; transition: none; }

.paso-contador { transition: opacity 160ms var(--curva); }

.paso-nombre, .paso-texto { transition: opacity 160ms var(--curva); }

/* ===== --- EL REPRODUCTOR: ‹  barra de progreso  ›  ⏸ EN UNA SOLA FILA --- ===== */
.reproductor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}

.reproductor .paso-segmentos { flex: 1 1 auto; min-width: 0; margin: 0; }

.paso-flecha {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--filete-control-oscuro);
  border-radius: var(--radio-boton);
  background: none;
  color: var(--blanco);
  cursor: pointer;
  transition: background var(--t-micro) var(--curva), opacity var(--t-micro) var(--curva);
}

.paso-flecha:hover { background: rgba(255, 255, 255, .14); }

.paso-flecha[disabled] { opacity: .35; cursor: default; background: none; }

.paso-flecha::before {
  content: "";
  width: 9px; height: 13px;
  background: currentColor;
  clip-path: polygon(0 0, 62% 50%, 0 100%, 34% 100%, 100% 50%, 34% 0);
}

.paso-flecha--atras::before { transform: rotate(180deg); }

.paso-flecha:focus, .paso-pausa:focus { outline: none; }

.paso-flecha:focus-visible, .paso-pausa:focus-visible {
  outline: 3px solid var(--magenta-claro);
  outline-offset: 3px;
}

.paso-pausa {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  display: grid; place-items: center;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--filete-control-oscuro);
  border-radius: var(--radio-boton);
  background: none;
  color: var(--blanco);
  cursor: pointer;
}

.paso-pausa:hover { background: rgba(255, 255, 255, .14); }

.paso-pausa .ico-pausa, .paso-pausa .ico-play { display: none; }

.paso-pausa[data-estado="corriendo"] .ico-pausa { display: block; }

.paso-pausa[data-estado="pausado"] .ico-play { display: block; margin-left: 2px; }

/* ===== --- EL MODELO, AL ANCHO DE SU COLUMNA --- ===== */
.metodo__figura { margin: 0; min-width: 0; }

.paso-lienzo {
  position: relative;
  width: 100%;
  aspect-ratio: 990 / 734;
  touch-action: pan-y;
}

.paso-lienzo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 320ms var(--curva);
}

.paso-lienzo img[data-activa] { opacity: 1; }

.paso-pie {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--t-rotulo);
  opacity: .8;
}

@media (min-width: 900px) {
  .metodo {
      display: grid;
      grid-template-columns: 5fr 7fr;
      grid-template-rows: auto auto;
      column-gap: var(--medianil);
      align-items: center;
      margin-top: var(--aire-xs);
    }
  .metodo__cabeza { grid-column: 1; grid-row: 1; align-self: end; }
  .metodo__paso   { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
  .metodo__figura { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .metodo__paso { padding-top: 26px; }
  .paso-nombre { font-size: var(--t-h2); }
  .paso-texto { min-height: 3.4em; }
}

/* ===== --- CELULAR: EL MÉTODO ENTERO EN UNA PANTALLA --- =====
   Pedido de Juan Ma (28-sep): en el celular, menos texto y todo a la vista.
   Se esconden la bajada, el pie del modelo y el contador («Paso 03 de 08»):
   la barra ya dice en qué paso va. En escritorio no cambia nada. */
@media (max-width: 899px) {
  #metodo { padding-block: 28px; }
  .metodo { margin-top: 0; }
  .metodo__cabeza .bajada, .paso-pie, .paso-contador { display: none; }
  .metodo__cabeza h2 { margin-bottom: 0; }
  .reproductor { margin-top: 14px; gap: 6px; }
  .metodo__figura { margin-top: 12px; }
  .metodo__paso { margin-top: 10px; }
  .paso-nombre { margin-bottom: 4px; }
  .paso-texto { font-size: var(--t-mini); min-height: 3.3em; }
  .paso-segmentos { gap: 5px; }
}

.sin-js-pasos { display: none; }

/* ===== EL SUBRAYADO DE LA PREGUNTA SE DIBUJA, NO SE ENCIENDE ===== */
a.pregunta {
  display: inline;
  color: var(--blanco);
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 6px;
  background-image: linear-gradient(var(--magenta-claro), var(--magenta-claro));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size 250ms var(--curva);
}

@media (hover: hover) {
  a.pregunta:hover { background-size: 100% 2px; }
}

a.pregunta:focus { outline: none; }

a.pregunta:focus-visible { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  a.pregunta { transition: none; }
}

/* ===== «LO QUE NO APARECE» COMO UN ESTADO DE RESULTADOS ===== */
#costos .comp-b__cabeza h2 { margin-bottom: 10px; }

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

.partidas > li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: var(--t-cuerpo);
  color: rgba(255, 255, 255, .90);
}

.partidas > li:first-child { padding-top: 0; }

.partidas > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 14px; height: 2px;
  border-radius: var(--radio-boton);
  background: var(--magenta-claro);
}

.partidas > li:first-child::before { top: 0.5em; }

.partidas {
  border-bottom: 3px double var(--magenta-claro);
  padding-bottom: 6px;
}

.partidas > li:last-child { border-bottom: 0; }

.partidas__total { margin: 16px 0 6px; }

.mensaje-central {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 26ch;
  text-align: left;
  font-size: var(--t-h3);
  font-stretch: 112%;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

@media (min-width: 900px) {
  .mensaje-central { font-size: var(--t-h2); max-width: 22ch; }
  #costos > .contenedor { align-items: start; }
}

@media (max-width: 899px) {
  .partidas > li { padding-block: 11px; font-size: var(--t-mini); }
  .partidas__total { margin-top: 14px; }
}

/* ===== LAS 4 FASES ===== */
.linea-fases { position: relative; margin-top: 44px; }

.linea-fases__pista {
  position: absolute;
  left: 0; right: 0; top: 19px;
  height: 3px;
  border-radius: var(--radio-boton);
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.linea-fases__relleno {
  display: block;
  width: 100%; height: 100%;
  border-radius: var(--radio-boton);
  background: linear-gradient(90deg, var(--magenta) 0%, var(--purpura) 52%, var(--s-cefac) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

.linea-fases[data-corre] .linea-fases__relleno {
  transition: transform var(--t-tramo) var(--curva);
  transform: scaleX(var(--p, 0));
}

/* Los estados apagados solo existen si el JS armó la línea (data-arma): si el
   script no corre o falla, las 4 fases se leen completas. */
.linea-fases:not([data-arma]) .linea-fases__relleno { transform: none; }

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

.fase { position: relative; text-align: left; }

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

.fase__halo {
  position: absolute;
  inset: -8px;
  border-radius: var(--radio-boton);
  background: radial-gradient(circle, rgba(201, 51, 139, .55) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 320ms var(--curva);
}

.fase__n {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radio-boton);
  border: 1px solid var(--filete-control-oscuro);
  background: var(--fondo-tope);
  color: rgba(255, 255, 255, .75);
  font-size: var(--t-mini);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 320ms var(--curva), color 320ms var(--curva),
              border-color 320ms var(--curva), transform 320ms var(--curva);
}

.fase__ico {
  margin: 18px 0 10px;
  color: var(--magenta-claro);
  opacity: 0;
  transition: opacity 240ms var(--curva);
}

.fase__ico path, .fase__ico circle, .fase__ico rect {
  stroke-dasharray: var(--largo, 120);
  stroke-dashoffset: var(--largo, 120);
}

.fase__titulo, .fase__texto, .fase__llevas {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms var(--curva), transform 460ms var(--curva);
}

.fase__titulo { margin-bottom: 8px; }

.fase__texto { margin: 0; }

.fase__llevas {
  display: block;
  margin-top: 10px;
  color: var(--magenta-claro);
  font-weight: 600;
  font-size: var(--t-mini);
}

.fase__llevas::before { content: "Te llevas: "; color: rgba(255, 255, 255, .78); font-weight: 400; }

.fase[data-encendida] .fase__halo { opacity: 1; }

.fase[data-encendida] .fase__n {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--blanco);
  animation: pulso-fase 400ms var(--curva);
}

.fase[data-encendida] .fase__ico { opacity: 1; }

.fase[data-encendida] .fase__ico path,
.fase[data-encendida] .fase__ico circle,
.fase[data-encendida] .fase__ico rect {
  animation: traza-ico 480ms var(--curva) forwards;
}

.fase[data-encendida] .fase__titulo,
.fase[data-encendida] .fase__texto,
.fase[data-encendida] .fase__llevas { opacity: 1; transform: none; }

.fase[data-encendida] .fase__texto { transition-delay: 60ms; }

.fase[data-encendida] .fase__llevas { transition-delay: 120ms; }

@keyframes pulso-fase {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes traza-ico { to { stroke-dashoffset: 0; } }

@media (min-width: 900px) {
  .fases { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .fase { padding-right: 8px; }
  .fase__texto { font-size: var(--t-mini); }
}

@media (max-width: 899px) {
  .linea-fases { margin-top: 30px; padding-left: 0; }
  .linea-fases__pista {
      left: 19px; right: auto; top: 20px; bottom: 20px;
      width: 3px; height: auto;
    }
  .linea-fases__relleno { transform: scaleY(0); transform-origin: center top; }
  .linea-fases[data-corre] .linea-fases__relleno { transform: scaleY(var(--p, 0)); transition-duration: var(--t-sigue); }
  .fases { display: grid; gap: 22px; }
  .fase { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; }
  .fase__marca { grid-row: span 4; }
  .fase__ico { margin: 2px 0 8px; }
  .fase__texto { font-size: var(--t-mini); }
}

.linea-fases:not([data-arma]) .fase__ico,
.linea-fases:not([data-arma]) .fase__titulo,
.linea-fases:not([data-arma]) .fase__texto,
.linea-fases:not([data-arma]) .fase__llevas { opacity: 1; transform: none; }

.linea-fases:not([data-arma]) .fase__ico path,
.linea-fases:not([data-arma]) .fase__ico circle,
.linea-fases:not([data-arma]) .fase__ico rect { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .linea-fases__relleno { transform: none !important; transition: none; }
  .fase__ico, .fase__titulo, .fase__texto, .fase__llevas { opacity: 1; transform: none; transition: none; }
  .fase__ico path, .fase__ico circle, .fase__ico rect { stroke-dashoffset: 0; animation: none; }
  .fase__n { background: var(--magenta); border-color: var(--magenta); color: var(--blanco); animation: none; }
  .fase__halo { opacity: 1; }
}

/* ===== LA RUEDA DE LOS NÚCLEOS ===== */
.rueda-bloque { display: block; }

.rueda-bloque__cabeza h2 { margin-bottom: 10px; }

#nucleos .remate { margin-top: 14px; max-width: 44ch; }

/* Las capas de toque giradas de la rueda y el halo de la tarjeta «Esto es para
   ti» se salen por los lados: sin esto la página se puede arrastrar de lado en
   el celular. clip no crea scroll; hidden es el respaldo de Safari 15. */
#nucleos, #siguiente-paso { overflow-x: hidden; overflow-x: clip; }

.rueda-bloque__panel { margin-top: 24px; }

.paso-segmentos--rueda {
  grid-template-columns: repeat(7, 1fr) 10px repeat(3, 1fr);
  margin-top: 0;
}

.paso-segmentos__hueco { margin: 0; }

.paso-segmentos--rueda button::before { background: rgba(255, 255, 255, .18); }

.paso-segmentos--rueda button > span { background: var(--acento-fuerte, var(--magenta)); }

.panel-nucleo { margin-top: 22px; }

.panel-nucleo__rotulo { margin-bottom: 8px; color: var(--acento, var(--magenta-claro)); }

.panel-nucleo__nombre { margin: 0 0 8px; font-size: var(--t-h2); }

.panel-nucleo__texto { margin: 0; max-width: 40ch; min-height: 3.4em; }

.panel-nucleo__rotulo, .panel-nucleo__nombre, .panel-nucleo__texto { transition: opacity 160ms var(--curva); }

.panel-nucleo[data-cambiando] .panel-nucleo__rotulo,
.panel-nucleo[data-cambiando] .panel-nucleo__nombre,
.panel-nucleo[data-cambiando] .panel-nucleo__texto { opacity: 0; transition: none; }

.rueda-bloque .reproductor { margin-top: 0; }

/* ===== --- LA RUEDA --- ===== */
.diagrama {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1;
  --giro: 0deg;          
  --desfase: 0deg;       
  --anillo: 30deg;       
}

.diagrama__svg { width: 100%; height: 100%; display: block; overflow: visible; }

.diagrama__centinela { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; pointer-events: none; }

.rueda {
  transform: rotate(calc(var(--giro) + var(--desfase)));
  transform-box: view-box;
  transform-origin: 280px 280px;
  transition: transform var(--t-giro) var(--curva), opacity 320ms var(--curva);
}

.diagrama[data-modo="sigma"] .rueda { opacity: .55; }

.diagrama__rayos line { stroke: rgba(255, 255, 255, .16); stroke-width: 1; pointer-events: none; }

.nucleo-entra { transform-box: view-box; transform-origin: 0 0; }

.nucleo {
  transform: rotate(calc(-1 * (var(--giro) + var(--desfase))));
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform var(--t-giro) var(--curva);
}

.nucleo__halo {
  fill: var(--c);
  opacity: 0;
  transform: scale(.6);
  transform-box: fill-box; transform-origin: center;
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
  pointer-events: none;                 
}

.nucleo__relleno {
  fill: var(--c);
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
}

.nucleo__aro {
  fill: rgba(9, 8, 28, .92);
  stroke: var(--c);
  stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  transition: transform 180ms var(--curva);
  cursor: pointer;
}

.nucleo__ico { stroke: var(--c); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.nucleo__eti {
  fill: rgba(255, 255, 255, .78);   
  font-size: 13px;
  font-stretch: 105%;
  transform: translate(var(--lx, 0px), var(--ly, 42px));
  transition: transform var(--t-giro) var(--curva);
  pointer-events: none;
}

.nucleo[data-activo] .nucleo__halo { opacity: .18; transform: scale(1); }

.nucleo[data-activo] .nucleo__relleno { opacity: 1; transform: scale(1.545); }

.nucleo[data-activo] .nucleo__aro { transform: scale(1.545); }

.nucleo[data-activo] .nucleo__ico { stroke: var(--blanco); }

.nucleo[data-activo] .nucleo__eti { fill: var(--blanco); font-weight: 700; font-size: 14px; }

/* ===== --- EL ANILLO DE LOS 3 SIGMAS: QUIETO, CON LOS NOMBRES POR FUERA --- ===== */
.diagrama__anillo {
  transform: rotate(var(--anillo));
  transform-box: view-box;
  transform-origin: 280px 280px;
}

.sigma__arco {
  fill: none;
  stroke: var(--c);
  stroke-width: 38;                    
  stroke-linecap: round;
  transform-box: view-box; transform-origin: 280px 280px;
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
}

.sigma__brillo {
  fill: none;
  stroke: var(--blanco);
  stroke-width: 38;
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box; transform-origin: 280px 280px;
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
  pointer-events: none;
}

.sigma__zona { fill: none; stroke: transparent; stroke-width: 46; pointer-events: stroke; cursor: pointer; }

.sigma__nombre {
  fill: var(--blanco);   
  font-size: 16px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: .3em;
  text-transform: uppercase;
  pointer-events: none;
  transform-box: view-box; transform-origin: 280px 280px;
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
}

.sigma__nombre--cel { display: none; }

.diagrama[data-modo="sigma"] .sigma:not([data-activo]) .sigma__arco { opacity: .35; }

.diagrama[data-modo="sigma"] .sigma:not([data-activo]) .sigma__nombre { opacity: .55; }

.sigma[data-activo] .sigma__arco,
.sigma[data-activo] .sigma__brillo,
.sigma[data-activo] .sigma__nombre { transform: scale(1.035); }

.sigma[data-activo] .sigma__brillo { opacity: .16; }

.sigma[data-activo] .sigma__nombre { fill: var(--blanco); }

.nucleo[data-resalta]:not([data-activo]) .nucleo__aro,
.nucleo[data-resalta]:not([data-activo]) .nucleo__relleno { transform: scale(1.12); }

.nucleo[data-resalta]:not([data-activo]) .nucleo__halo { opacity: .14; transform: scale(.9); }

.nucleo[data-resalta] .nucleo__eti { fill: var(--blanco); }

.sigma[data-resalta] .sigma__arco,
.sigma[data-resalta] .sigma__brillo,
.sigma[data-resalta] .sigma__nombre { transform: scale(1.04); }

.sigma[data-resalta] .sigma__brillo { opacity: .22; }

.sigma[data-resalta] .sigma__nombre { fill: var(--blanco); }

.diagrama[data-modo="sigma"] .sigma[data-resalta]:not([data-activo]) .sigma__arco { opacity: .75; }

.diagrama__centro circle { fill: var(--purpura); }

.diagrama__centro text { fill: var(--blanco); font-size: 36px; font-weight: 600; }

.muesca { fill: var(--blanco); }

.muesca--6 { display: none; }

/* ===== --- LOS BOTONES: HTML ENCIMA, GIRAN CON LA RUEDA --- ===== */
.rueda-toques, .anillo-toques { position: absolute; inset: 0; pointer-events: none; }

.rueda-toques {
  transform: rotate(calc(var(--giro) + var(--desfase)));
  transition: transform var(--t-giro) var(--curva);
}

.anillo-toques { transform: rotate(var(--anillo)); }

.diagrama__toque {
  position: absolute;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: var(--radio-boton);
  background: none;
  cursor: pointer;
  pointer-events: auto;
}

.diagrama__toque--sigma { width: 64px; height: 64px; }

.diagrama__toque:focus { outline: none; }

.diagrama__svg:focus, .diagrama__svg *:focus { outline: none; }

.diagrama__toque:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }

.diagrama__pie { margin: 14px 0 0; text-align: center; font-size: var(--t-rotulo); color: rgba(255, 255, 255, .78); }

.sin-js-nucleos { margin: 24px 0 0; }

.sin-js-nucleos div { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .12); }

.sin-js-nucleos dt { color: var(--blanco); font-weight: 600; font-stretch: 115%; }

.sin-js-nucleos dd { margin: 2px 0 0; font-size: var(--t-mini); color: rgba(255, 255, 255, .90); }

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

.diagrama[data-arranca] .nucleo-entra,
.diagrama[data-arranca] .sigma,
.diagrama[data-arranca] .diagrama__centro,
.diagrama[data-arranca] .diagrama__rayos,
.diagrama[data-arranca] .muesca { opacity: 0; }

.diagrama[data-anima] .nucleo-entra { animation: nucleo-acomoda .7s var(--curva) both; animation-delay: calc(var(--i) * 45ms); }

.diagrama[data-anima] .sigma { animation: sigma-cierra .7s var(--curva) both; animation-delay: calc(80ms + var(--i) * 60ms); }

.diagrama[data-anima] .diagrama__rayos { animation: aparece .4s var(--curva) 250ms both; }

.diagrama[data-anima] .diagrama__centro { animation: centro-entra .45s var(--curva) 300ms both; }

.diagrama[data-anima] .muesca { animation: aparece .3s var(--curva) 650ms both; }

.diagrama[data-final] .nucleo-entra,
.diagrama[data-final] .sigma,
.diagrama[data-final] .diagrama__centro,
.diagrama[data-final] .diagrama__rayos,
.diagrama[data-final] .muesca { opacity: 1; animation: none !important; transform: none; }

@keyframes nucleo-acomoda {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.72); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes sigma-cierra { from { opacity: 0; transform: scale(1.22); } to { opacity: 1; transform: scale(1); } }

@keyframes centro-entra { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.diagrama__anillo .sigma { transform-box: view-box; transform-origin: 280px 280px; }

.diagrama__centro { transform-box: view-box; transform-origin: 280px 280px; }

@media (prefers-reduced-motion: reduce) {
  .rueda, .nucleo, .nucleo__eti, .rueda-toques, .nucleo__halo, .nucleo__relleno, .nucleo__aro,
    .sigma__arco, .sigma__brillo, .sigma__nombre { transition: none !important; }
  .nucleo[data-resalta] .nucleo__aro, .nucleo[data-resalta] .nucleo__relleno,
    .sigma[data-resalta] .sigma__arco, .sigma[data-resalta] .sigma__brillo, .sigma[data-resalta] .sigma__nombre { transform: none; }
  .diagrama[data-anima] * { animation: none !important; }
}

@media (min-width: 900px) {
  .rueda-bloque {
      display: grid;
      grid-template-columns: 5fr 7fr;
      grid-template-rows: auto auto;
      column-gap: var(--medianil);
      align-items: center;
    }
  .rueda-bloque__cabeza { grid-column: 1; grid-row: 1; align-self: end; }
  .rueda-bloque__panel  { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; padding-top: 26px; }
  .rueda-bloque__figura { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sin-js-nucleos { grid-column: 1 / -1; }
}

/* ===== --- CELULAR: RUEDA A TODO EL ANCHO, PUNTO DE LECTURA A LAS 6 --- ===== */
@media (max-width: 899px) {
  .diagrama { max-width: 318px; --desfase: -90deg; --anillo: -60deg; }
  .muesca--9 { display: none; }
  .muesca--6 { display: block; }
  .nucleo__eti { font-size: 20px; }                       
  .nucleo[data-activo] .nucleo__eti { font-size: 22px; }  
  
  .sigma__nombre { font-size: 22px; letter-spacing: .12em; }
  .sigma__nombre--esc { display: none; }
  .sigma__nombre--cel { display: block; }
  .diagrama__centro text { font-size: 44px; }
  .rueda-bloque__figura { margin-top: 12px; }
  .rueda-bloque__panel { margin-top: 10px; }
  .panel-nucleo { margin-top: 8px; }
  .panel-nucleo__nombre { font-size: var(--t-h3); margin-bottom: 2px; }
  .panel-nucleo__texto { font-size: var(--t-mini); min-height: 3.3em; }
  #nucleos { padding-block: 26px; }
  /* Menos texto en el celular: fuera el remate, el pie de la rueda y el
     «Núcleo 01 de 07» (la barra ya lo dice). En escritorio no cambia nada. */
  #nucleos .remate, .diagrama__pie, .panel-nucleo__rotulo { display: none; }
  /* La barra y la descripción arriba, la rueda debajo (pedido de Juan Ma) */
  .rueda-bloque { display: flex; flex-direction: column; }
  .rueda-bloque__cabeza { order: 1; }
  .rueda-bloque__panel  { order: 2; margin-top: 14px; }
  .rueda-bloque__figura { order: 3; margin-top: 10px; }
  .sin-js-nucleos       { order: 4; }
  .rueda-bloque__cabeza h2 { font-size: 1.375rem; margin-bottom: 0; }
}

/* ===== «SI LLEGASTE HASTA AQUÍ», SIMÉTRICA ===== */
#siguiente-paso .rotulo { margin-bottom: 10px; }

.filtro { display: grid; gap: 20px; margin-top: 32px; text-align: left; }

.filtro__si, .filtro__no {
  position: relative;
  display: grid;
  row-gap: 14px;
  align-content: start;
  padding: 26px 26px 28px;
  border-radius: var(--radio);
}

.filtro__si ul, .filtro__no ul { display: contents; }

.filtro__si h3, .filtro__no h3 { margin: 0 0 4px; font-size: var(--t-h3); color: var(--blanco); }

.filtro__si li, .filtro__no li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: var(--t-cuerpo);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .filtro {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto auto;   
      gap: 28px;
      align-items: stretch;
    }
  .filtro__si, .filtro__no { grid-template-rows: subgrid; grid-row: span 4; }
}

.filtro__visto, .filtro__equis {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  margin-top: 2px;
  border-radius: var(--radio-boton);
}

.filtro__visto { background: var(--magenta); color: var(--blanco); }

.filtro__equis { border: 1px solid rgba(255, 255, 255, .34); color: rgba(255, 255, 255, .62); }

.filtro__si { background: rgba(88, 26, 96, .28); color: rgba(255, 255, 255, .92); }

.filtro__si::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radio);
  padding: 1px;
  background: linear-gradient(140deg, var(--magenta) 0%, var(--purpura) 46%, var(--s-cefac) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.filtro__si::after {
  content: "";
  position: absolute; inset: 12% -6% -18% -6%;
  z-index: -1;
  border-radius: var(--radio);
  background: radial-gradient(60% 60% at 50% 50%, rgba(201, 51, 139, .30) 0%, transparent 72%);
  pointer-events: none;
}

.filtro__no {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .72);    
}

.filtro__no h3 { color: rgba(255, 255, 255, .80); }

.filtro__si { border: 1px solid transparent; }

.marca-visto path { stroke-dasharray: 24; stroke-dashoffset: 24; }

.filtro:not([data-arma]) .marca-visto path { stroke-dashoffset: 0; }

.filtro[data-vistos] .marca-visto path { animation: traza-visto 360ms var(--curva) forwards; animation-delay: calc(180ms + var(--i) * 110ms); }

.filtro[data-final] .marca-visto path { stroke-dashoffset: 0; animation: none !important; }

@keyframes traza-visto { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .marca-visto path { stroke-dashoffset: 0; animation: none !important; }
}

.bloque-boton--grande { margin-top: 36px; position: relative; --halo: 0 0 46px 6px rgba(201, 51, 139, .34); }

.con-paula { margin: 0 0 18px; font-size: var(--t-h3); font-stretch: 108%; color: var(--blanco); }

.boton--grande {
  position: relative;
  min-height: 60px;
  padding-inline: 34px;
  font-size: 1.0625rem;
  box-shadow: var(--halo);
  transition: transform var(--t-micro) var(--curva), box-shadow var(--t-micro) var(--curva);
}

@media (hover: hover) {
  .boton--grande:hover { transform: translateY(-2px); box-shadow: 0 0 58px 10px rgba(201, 51, 139, .48); }
}

.datos-llamada {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px;
  margin: 20px 0 0; padding: 0;
  font-size: var(--t-mini);
  color: rgba(255, 255, 255, .82);
}

.datos-llamada li { display: flex; align-items: center; gap: 8px; margin: 0; }

.datos-llamada svg { color: var(--magenta-claro); flex: 0 0 auto; }

@media (max-width: 899px) {
  #siguiente-paso { padding-block: 30px; }
  .filtro { margin-top: 14px; gap: 12px; }
  .filtro__si, .filtro__no { padding: 13px 16px 14px; row-gap: 8px; }
  .filtro__si li, .filtro__no li { line-height: 1.45; }
  .bloque-boton--grande { margin-top: 20px; }
  .con-paula { font-size: var(--t-cuerpo); margin-bottom: 12px; }
  .boton--grande { min-height: 54px; }
  .datos-llamada { margin-top: 12px; gap: 6px 16px; }
}

/* ===== ESTADO FINAL SIN ANIMACIÓN ===== */
.linea-fases[data-final] .linea-fases__relleno { transition: none !important; }

.linea-fases[data-final] .fase__ico path,
.linea-fases[data-final] .fase__ico circle,
.linea-fases[data-final] .fase__ico rect { animation: none !important; stroke-dashoffset: 0; }

.linea-fases[data-final] .fase__n { animation: none !important; }

.linea-fases[data-final] .fase__halo,
.linea-fases[data-final] .fase__ico,
.linea-fases[data-final] .fase__titulo,
.linea-fases[data-final] .fase__texto,
.linea-fases[data-final] .fase__llevas { transition: none !important; }

@media (max-width: 899px) {
  #fases h2 { margin-bottom: 0; }
  .linea-fases { margin-top: 22px; }
  .fases { gap: 13px; }
  .fase__ico { width: 24px; height: 24px; margin: 0 0 6px; }
  .fase__titulo { margin-bottom: 5px; }
  .fase__llevas { margin-top: 5px; }
  .linea-fases__pista { top: 18px; bottom: 26px; }
}

/* ===== CELULAR: PLEGABLES =====
   Bajo 900 px lo largo se pliega y se abre al tocar (JS, sección 17). Queda a
   la vista lo principal; el resto, detrás de una fila con el mismo «+» de las
   preguntas frecuentes. Sin JS o en computador no existe: se lee todo. */
.plegable__boton,
.plegable__abre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: var(--toque);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.plegable__abre[hidden] { display: none; }

.plegable__boton:focus-visible,
.plegable__abre:focus-visible { outline: 3px solid var(--blanco); outline-offset: 4px; }

/* El «+» se vuelve «−»: la barra vertical gira hasta quedar acostada */
.plegable__signo { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }

.plegable__signo::before,
.plegable__signo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}

.plegable__signo::after { transform: rotate(90deg); transition: transform var(--t-micro) var(--curva); }

[aria-expanded="true"] > .plegable__signo::after { transform: rotate(0deg); }

[data-plegable-estado="cerrado"] [data-plegable-cuerpo] { display: none; }

[data-plegable-estado="abierto"] [data-plegable-cuerpo] { animation: abre-plegable var(--t-entra) var(--curva); }

@keyframes abre-plegable {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-plegable-estado] [data-plegable-cuerpo] { animation: none; }
  .plegable__signo::after { transition: none; }
}

@media (max-width: 899px) {
  /* ¿Te suena?: ícono y título en una fila que se toca; el párrafo, abajo */
  .sintomas { margin-top: 24px; }
  .sintoma[data-plegable-estado] {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 14px;
    align-items: center;
    margin: 0;
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .sintomas > .sintoma[data-plegable-estado]:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .sintoma[data-plegable-estado]::before { display: none; }
  .sintoma[data-plegable-estado] .ico { width: 26px; height: 26px; margin: 0; }
  .sintoma[data-plegable-estado] h3 { margin: 0; }
  .sintoma[data-plegable-estado] .plegable__boton { min-height: 56px; }
  .sintoma[data-plegable-estado] p { grid-column: 2; margin: 0 0 14px; }

  /* Las 4 fases: número, título y «Te llevas» a la vista; el cómo, al tocar */
  .fase[data-plegable-estado] .fase__titulo { margin-bottom: 0; }
  .fase[data-plegable-estado] .fase__texto { margin: 2px 0 4px; }
  .fase[data-plegable-estado] .fase__llevas { margin-top: 0; }

  /* «Esto no es para ti»: queda la fila del título */
  .filtro__no[data-plegable-estado="cerrado"] { row-gap: 0; padding-block: 4px; }
  .filtro__no[data-plegable-estado] h3 { margin: 0; font-size: var(--t-cuerpo); }

  /* Quién es Paula: foto, titular, nombre y credenciales; la historia, al tocar */
  #paula .plegable__abre {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-weight: 600;
    color: var(--blanco);
  }
  #paula [data-plegable-estado] .credenciales { margin-top: 0; }
  #paula [data-plegable-estado="abierto"] .medida { margin: 4px 0 10px !important; }

  /* La franja «Más de 30 años en…» repite la portada, el titular de Paula y
     las preguntas: en el celular sale. Si luego llegan los logos, se quedan. */
  #empresas .franja { display: none; }
  #empresas:not(:has([data-interruptor]:not([hidden]))) { display: none; }
}