/* ═══════════════════════════════════════════════════════════════
   Resultado 10X · estilo

   Paleta azul sobre blanco. La estructura viene de lo que funciona
   en los quizzes buenos: una pregunta por pantalla, opciones como
   bloques grandes (en dos columnas cuando son cortas, que es lo que
   las hace verse como opciones y no como una lista), flecha redonda
   a la derecha y títulos en caja alta.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fondo:      #F8FAFD;
  --papel:      #FFFFFF;
  --superficie: #F1F6FD;

  --tinta:      #0F172A;
  --texto:      #334155;
  --suave:      #64748B;
  --tenue:      #94A3B8;

  --azul:       #1D4ED8;
  --azul-2:     #3B82F6;
  --azul-3:     #93C5FD;
  --azul-luz:   #EFF6FF;

  --ambar:      #F59E0B;
  --ambar-luz:  #FEF6E7;
  --verde:      #047857;
  --verde-luz:  #ECFDF5;
  --rojo:       #BE123C;

  --linea:      #E2E8F3;
  --linea-2:    #CBD9EC;

  --r:          16px;
  --r-grande:   24px;
  --sombra:     0 1px 2px rgba(21,17,31,.04), 0 3px 10px rgba(21,17,31,.04);
  --sombra-alta:0 14px 36px -12px rgba(29,78,216,.26);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  background:var(--fondo);
  color:var(--texto);
  font-family:Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 32% at 50% -4%,  rgba(59,130,246,.15), transparent 70%),
    radial-gradient(38% 26% at 90% 94%,  rgba(245,158,11,.08), transparent 70%);
}

/* ═══════════════ CABECERA ═══════════════ */

.barra{
  position:sticky; top:0; z-index:30;
  background:rgba(250,249,254,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linea);
}
.barra__info{
  max-width:600px; margin:0 auto;
  padding:16px 22px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
/* La marca es tipográfica: un círculo con "10X" adentro parecía un sello
   pegado encima, y en una barra de 60px no cabe un logo de verdad. */
.barra__marca{
  display:inline-flex; align-items:baseline; gap:5px;
  font-size:14px; font-weight:600; color:var(--suave);
  letter-spacing:-.01em;
}
.barra__marca b{ color:var(--tinta); font-weight:700; }
.barra__marca em{ font-style:normal; color:var(--azul); font-weight:700; }
.barra__paso{
  font-size:12px; font-weight:600; color:var(--tenue);
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
.barra__linea{ max-width:600px; margin:0 auto 14px; padding:0 22px; }
.barra__linea > div{ height:4px; border-radius:999px; background:var(--linea); overflow:hidden; }
.barra__linea span{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--azul), var(--azul-2));
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}

/* ═══════════════ ESCENARIO ═══════════════ */

.escena{
  position:relative; z-index:1;
  max-width:600px; margin:0 auto;
  padding:46px 22px 72px;
}

.pantalla{ display:none; }
.pantalla.activa{ display:block; animation:entrar .4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes entrar{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ═══════════════ PORTADA ═══════════════ */

.portada{ text-align:center; }
.sello{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:24px; padding:0;
  background:none; border:0;
  color:var(--azul); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.sello::before{
  content:""; width:22px; height:1.5px; background:var(--azul-3); border-radius:2px;
}
.portada h1{
  margin-bottom:16px;
  font-size:clamp(32px, 7vw, 48px); font-weight:700; line-height:1.04;
  letter-spacing:-.035em; color:var(--tinta);
  text-wrap:balance;
}
.portada h1 em{ font-style:normal; color:var(--azul); }
.portada__texto{ max-width:44ch; margin:0 auto 32px; font-size:16px; color:var(--suave); }

.puntos{ display:grid; gap:9px; margin-bottom:30px; text-align:left; }
.punto{
  display:flex; gap:14px; align-items:center;
  padding:15px 17px; border-radius:var(--r);
  background:var(--papel); border:1px solid var(--linea); box-shadow:var(--sombra);
}
.punto__icono{
  flex:none; width:40px; height:40px; border-radius:12px;
  background:var(--azul-luz); border:1px solid #D5E4F8;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.punto b{ display:block; font-size:15px; font-weight:600; color:var(--tinta); }
.punto span{ font-size:13.5px; color:var(--suave); line-height:1.4; }

.minuto{ margin-top:16px; color:var(--tenue); font-size:12.5px; }

/* ═══════════════ PREGUNTA ═══════════════ */

.cabeza-pregunta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:14px;
}
.bloque-nombre{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--azul);
  letter-spacing:.15em; text-transform:uppercase;
}
.n-pregunta{ display:none; }

/* el contexto va antes de la pregunta: explica por qué la estamos haciendo */
.contexto{
  max-width:46ch; margin:0 auto 16px;
  padding:14px 18px; border-radius:var(--r);
  background:var(--azul-luz); border:1px solid #D9E7F9;
  color:#15418F; font-size:14.5px; line-height:1.55; text-align:center;
}

.pregunta{
  margin-bottom:28px; text-align:center;
  font-size:clamp(25px, 4.6vw, 34px); font-weight:600; line-height:1.14;
  letter-spacing:-.03em; color:var(--tinta);
  text-transform:uppercase; text-wrap:balance;
}

.opciones{ display:grid; gap:11px; }
.opciones--dobles{ grid-template-columns:1fr 1fr; }
/* número impar: la última no se queda coja en media fila */
.opciones--dobles .opcion:last-child:nth-child(odd){ grid-column:span 2; min-height:66px; }
@media (max-width:430px){
  .opciones--dobles{ grid-template-columns:1fr; }
  .opciones--dobles .opcion:last-child:nth-child(odd){ grid-column:auto; }
}

.opcion{
  position:relative;
  display:flex; align-items:center; gap:13px;
  width:100%; min-height:66px; padding:16px 16px 16px 19px;
  border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel);
  color:var(--tinta);
  font-family:inherit; font-size:17px; font-weight:500; text-align:left;
  letter-spacing:-.015em; line-height:1.32;
  cursor:pointer; box-shadow:var(--sombra);
  transition:background .18s ease, border-color .18s ease,
             transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, color .18s ease;
}
.opciones--dobles .opcion{ min-height:88px; align-items:flex-end; }
.opciones--dobles .opcion > span:first-child{ align-self:center; }
.opcion > span:first-child{ flex:1; }

.opcion__ir{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--linea-2);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.opcion__ir svg{
  width:12px; height:12px; fill:none; stroke:var(--tenue);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .18s ease;
}

.opcion:hover{
  background:var(--azul-luz); border-color:var(--azul-3);
  transform:translateY(-2px); box-shadow:var(--sombra-alta);
}
.opcion:hover .opcion__ir{ background:var(--azul); border-color:var(--azul); transform:translateX(2px); }
.opcion:hover .opcion__ir svg{ stroke:#fff; }

.opcion.elegida{
  background:var(--azul); border-color:var(--azul); color:#fff;
  transform:translateY(-2px); box-shadow:var(--sombra-alta);
}
.opcion.elegida .opcion__ir{ background:#fff; border-color:#fff; }
.opcion.elegida .opcion__ir svg{ stroke:var(--azul); }

/* ── buscador de países ── */

.buscador{ position:relative; }
.buscador__campo{
  width:100%; padding:19px;
  border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:17px; font-weight:500;  /* 16px+ evita el zoom de iOS */
  letter-spacing:-.015em; box-shadow:var(--sombra);
  transition:border-color .18s ease;
}
.buscador__campo:focus{ outline:0; border-color:var(--azul); box-shadow:0 0 0 4px rgba(29,78,216,.12); }
.buscador__campo::placeholder{ color:var(--tenue); font-weight:400; }
.buscador.elegido .buscador__campo{ border-color:var(--azul); background:var(--azul-luz); }

.buscador__lista{
  display:none;
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:10;
  max-height:340px; overflow-y:auto; overscroll-behavior:contain; padding:6px;
  border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel); box-shadow:var(--sombra-alta);
}
.buscador__lista.esta-abierta{ display:block; }
.buscador__opcion{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 13px; border:0; border-radius:10px;
  background:transparent; color:var(--tinta);
  font-family:inherit; font-size:15.5px; font-weight:500; text-align:left;
  cursor:pointer; transition:background .12s ease;
}
.buscador__opcion:hover,
.buscador__opcion.esta-marcada{ background:var(--azul-luz); }
.buscador__opcion > span:nth-child(2){ flex:1; }
.buscador__bandera{ font-size:19px; line-height:1; }
.buscador__ddi{ color:var(--tenue); font-size:13.5px; font-variant-numeric:tabular-nums; }
.buscador__nada{ padding:16px 13px; color:var(--tenue); font-size:14.5px; text-align:center; }

/* ── campo numérico ── */

.numero-campo{ position:relative; display:flex; align-items:center; }
.numero-campo input{
  width:100%; padding:22px 130px 22px 19px;
  border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:30px; font-weight:700;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  box-shadow:var(--sombra); transition:border-color .18s ease;
}
.numero-campo input:focus{ outline:0; border-color:var(--azul); box-shadow:0 0 0 4px rgba(29,78,216,.12); }
.numero-campo input::placeholder{ color:#CBD5E1; font-weight:600; }
.numero-campo--moneda input{ padding-left:76px; }
.numero-campo__cifra{
  position:absolute; left:19px;
  color:var(--azul); font-size:23px; font-weight:700;
  letter-spacing:-.03em; pointer-events:none;
}
.numero-campo__unidad{
  position:absolute; right:19px;
  color:var(--suave); font-size:15px; font-weight:600; pointer-events:none;
}
.numero-campo + .aviso-error{ margin-top:12px; }
.numero-campo ~ .boton{ margin-top:16px; }

.pista{ margin-top:22px; text-align:center; color:var(--tenue); font-size:12px; }
.pista kbd{
  padding:2px 7px; border-radius:5px;
  background:var(--papel); border:1px solid var(--linea);
  font-family:inherit; font-size:11px; font-weight:600; color:var(--suave);
}

/* ── la pregunta escrita que se abre según la respuesta ── */

.abierta{
  margin-top:14px; padding:18px 20px;
  border-radius:var(--r); background:var(--azul-luz); border:1px solid #D5E4F8;
  animation:entrar .3s ease both;
}
.abierta[hidden]{ display:none; }
.abierta label{ margin-bottom:9px; color:#15418F; }
.abierta input{
  width:100%; margin-bottom:12px; padding:15px 17px;
  border:1.5px solid #CEE0F7; border-radius:var(--r);
  background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:16px; font-weight:500;
}
.abierta input:focus{ outline:0; border-color:var(--azul); }
.abierta .boton{ width:100%; padding:15px 24px; font-size:15.5px; }

/* ── el desplegable de países ── */

.selector{ position:relative; }
.selector select{
  width:100%; padding:19px 52px 19px 19px;
  border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:17px; font-weight:500;  /* 16px+ evita el zoom de iOS */
  letter-spacing:-.015em; cursor:pointer;
  box-shadow:var(--sombra);
  -webkit-appearance:none; appearance:none;
  transition:background .18s ease, border-color .18s ease;
}
.selector select:hover{ background:var(--azul-luz); border-color:var(--azul-3); }
.selector select:focus{ outline:0; border-color:var(--azul); }
.selector select:invalid{ color:var(--tenue); }

.selector__flecha{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:14px; height:9px; pointer-events:none;
  fill:none; stroke:var(--suave); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.selector:hover .selector__flecha{ stroke:var(--azul); }
.selector.elegido select{ background:var(--azul); color:#fff; border-color:var(--azul); }
.selector.elegido .selector__flecha{ stroke:#fff; }

.telefono{ display:grid; grid-template-columns:118px 1fr; gap:9px; }
.telefono .selector select{ padding:16px 32px 16px 15px; font-size:16px; }
.telefono .selector__flecha{ right:13px; }
@media (max-width:380px){ .telefono{ grid-template-columns:104px 1fr; } }

/* ═══════════════ CAMPOS ═══════════════ */

.campo{ margin-bottom:16px; }
.campo__etiqueta{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:600; color:var(--suave);
  letter-spacing:.07em; text-transform:uppercase;
}
.campo__ayuda{ display:block; margin:-4px 0 9px; font-size:13px; color:var(--tenue); text-transform:none; letter-spacing:0; }
.campo input{
  width:100%; padding:17px 18px;
  border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:16px; font-weight:500;
  box-shadow:var(--sombra);
  transition:border-color .18s ease;
}
.campo input:focus{ outline:0; border-color:var(--azul); }
.campo input::placeholder{ color:var(--tenue); }

/* ═══════════════ BOTONES ═══════════════ */

.acciones{ display:flex; gap:10px; align-items:center; margin-top:24px; }

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 32px; border:0; border-radius:999px;
  background:var(--azul); color:#fff;
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(29,78,216,.46);
  transition:background .18s ease, transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
}
.boton:hover{ background:#1E40AF; transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(29,78,216,.54); }
.boton:active{ transform:translateY(0); }
.boton[disabled]{ opacity:.5; cursor:progress; transform:none; }
.boton--ancho{ width:100%; }

.boton--fantasma{
  background:transparent; color:var(--suave);
  border:1.5px solid var(--linea); box-shadow:none;
  padding:17px 24px; font-weight:500;
}
.boton--fantasma:hover{ background:var(--papel); color:var(--azul); border-color:var(--azul-3); box-shadow:var(--sombra); }

.aviso-error{
  margin-top:13px; padding:13px 16px;
  border-radius:var(--r); background:#FFF1F3; border:1px solid #FBCFD8;
  color:var(--rojo); font-size:14px; font-weight:500;
}

/* ═══════════════ CARGANDO ═══════════════ */

.cargando{ padding:72px 0; text-align:center; }
.rueda{
  width:54px; height:54px; margin:0 auto 24px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, var(--azul-2), var(--azul));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
          mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  animation:girar .9s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }
.cargando p{ color:var(--tinta); font-size:19px; font-weight:600; letter-spacing:-.02em; text-transform:uppercase; }
.cargando span{ display:block; margin-top:8px; color:var(--suave); font-size:14.5px; }

/* ── el guion del audio: qué contar, pregunta por pregunta ── */

.guion{
  list-style:none;
  max-width:520px; margin:0 auto 24px;
  display:grid; gap:11px; text-align:left;
}
.guion li{
  display:flex; gap:13px;
  padding:15px 17px; border-radius:var(--r);
  background:var(--papel); border:1px solid var(--linea);
  color:var(--texto); font-size:15px; line-height:1.5;
  box-shadow:var(--sombra);
  counter-increment:guion;
}
.guion li::before{
  content:counter(guion);
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--azul-luz); color:var(--azul);
  font-size:12.5px; font-weight:700;
}
.guion{ counter-reset:guion; }

@media (max-width:600px){
  .guion li{ padding:13px 15px; font-size:14.5px; }
}

/* ═══════════════ GRABADORA ═══════════════ */

.grabadora{
  padding:26px 24px; border-radius:var(--r-grande);
  background:var(--papel); border:1.5px solid var(--linea); box-shadow:var(--sombra);
  text-align:center;
}
.grabadora__paso[hidden]{ display:none; }

.grabadora__boton{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  width:100%; padding:20px 28px; border:0; border-radius:999px;
  background:var(--azul); color:#fff;
  font-family:inherit; font-size:16.5px; font-weight:600;
  cursor:pointer; box-shadow:0 8px 20px -6px rgba(29,78,216,.46);
  transition:background .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
.grabadora__boton:hover{ background:#1E40AF; transform:translateY(-2px); }
.grabadora__punto{
  width:11px; height:11px; border-radius:50%; background:#F87171;
  box-shadow:0 0 0 0 rgba(248,113,113,.6);
}
.grabadora__ayuda{ margin-top:13px; color:var(--tenue); font-size:13px; }

/* grabando */
.grabadora__vivo{
  display:flex; align-items:baseline; justify-content:center; gap:9px;
  margin-bottom:16px;
}
.grabadora__latido{
  width:12px; height:12px; border-radius:50%; background:#DC2626;
  align-self:center; animation:latir 1.4s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.55) }
  70%{ box-shadow:0 0 0 11px rgba(220,38,38,0) }
}
.grabadora__vivo b{
  font-size:34px; font-weight:700; color:var(--tinta);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.grabadora__tope{ color:var(--tenue); font-size:15px; font-weight:500; }

.grabadora__barra{
  height:6px; margin-bottom:20px; border-radius:999px;
  background:var(--linea); overflow:hidden;
}
.grabadora__barra span{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--azul), var(--azul-2));
  transition:width .25s linear;
}

/* grabado */
#reproducir{ width:100%; margin-bottom:18px; }
.grabadora__paso[data-paso="listo"] .acciones{ margin-top:0; }

.grabadora__subiendo{
  display:flex; align-items:center; justify-content:center; gap:13px;
  padding:14px 0; color:var(--suave); font-size:15.5px; font-weight:500;
}
.grabadora__subiendo .rueda{ width:26px; height:26px; margin:0; }

@media (max-width:600px){
  .grabadora{ padding:22px 18px; }
  .grabadora__paso[data-paso="listo"] .acciones{ flex-direction:column-reverse; }
}

/* ═══════════════ CONFIRMACIÓN ═══════════════ */

.confirma{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:aparecer-fondo .22s ease both;
}
.confirma[hidden]{ display:none; }
@keyframes aparecer-fondo{ from{ opacity:0 } to{ opacity:1 } }

.confirma__caja{
  width:100%; max-width:470px;
  padding:34px 32px; text-align:center;
  border-radius:var(--r-grande);
  background:var(--papel);
  box-shadow:0 28px 60px -18px rgba(15,23,42,.42);
  animation:subir-caja .28s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes subir-caja{
  from{ opacity:0; transform:translateY(16px) scale(.97) }
  to{ opacity:1; transform:none }
}

.confirma__icono{
  width:62px; height:62px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--azul-luz); border:1px solid #D5E4F8;
  font-size:27px;
}
.confirma__caja h3{
  margin-bottom:12px;
  font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--tinta);
  text-wrap:balance;
}
.confirma__caja p{
  margin-bottom:26px;
  color:var(--suave); font-size:15px; line-height:1.6; text-wrap:pretty;
}
.confirma__ciencia{
  margin-bottom:24px !important; padding:14px 16px;
  border-radius:12px; background:var(--superficie); border:1px solid var(--linea);
  color:var(--suave) !important; font-size:14px !important; line-height:1.55 !important;
}
.confirma__acciones{ display:grid; gap:10px; }
.confirma__acciones .boton{ width:100%; }

@media (max-width:600px){ .confirma__caja{ padding:28px 22px; } }

/* ═══════════════ LISTO ═══════════════ */

.listo{ text-align:center; padding-top:10px; }
.listo__tic{
  width:76px; height:76px; margin:0 auto 24px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--verde-luz); border:2px solid #A7E8C8;
  animation:aparecer .5s cubic-bezier(.34,1.56,.64,1) both;
}
.listo__tic svg{ width:30px; height:30px; fill:none; stroke:var(--verde); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@keyframes aparecer{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }

.listo h2{
  margin-bottom:12px; font-size:clamp(27px, 5.2vw, 36px); font-weight:600;
  letter-spacing:-.03em; color:var(--tinta); text-transform:uppercase;
}
.listo h2 span{ color:var(--azul); }
.listo__texto{ max-width:46ch; margin:0 auto 18px; color:var(--suave); font-size:16px; line-height:1.68; }
.listo__texto:last-of-type{ margin-bottom:28px; }
.listo__texto--porque{
  max-width:none; margin:0 auto 26px; padding:20px 22px; border-radius:var(--r);
  background:var(--azul-luz); border:1px solid #D5E4F8;
  text-align:left; font-size:15px;
}
.listo__texto--porque b{ display:block; margin-bottom:6px; color:var(--tinta); font-weight:650; }

.listo__sub{
  margin:-4px auto 22px; font-size:16px; font-weight:500; color:var(--azul);
}

.listo__plazo{
  padding:24px; margin-bottom:22px; border-radius:var(--r-grande);
  background:linear-gradient(135deg, #14306E, var(--azul) 52%, #2563EB);
  color:#fff; box-shadow:0 18px 38px -16px rgba(12,42,110,.5);
}
.listo__plazo b{ display:block; font-size:clamp(23px, 4.4vw, 29px); font-weight:600; letter-spacing:-.03em; color:#FCD34D; }
.listo__plazo span{ display:block; margin-top:4px; font-size:15px; color:#CBD9F0; }

.listo__donde{
  padding:20px 22px; margin-bottom:20px; text-align:left;
  border-radius:var(--r); background:var(--papel); border:1px solid var(--linea); box-shadow:var(--sombra);
}
.listo__donde > p{ margin-bottom:12px; font-size:12.5px; font-weight:600; color:var(--tenue); letter-spacing:.07em; text-transform:uppercase; }
.listo__donde ul{ list-style:none; display:grid; gap:9px; }
.listo__donde li{ display:flex; gap:12px; align-items:center; font-size:15.5px; }
.listo__donde li span{ flex:none; font-size:18px; }
.listo__donde li b{ font-weight:600; color:var(--tinta); word-break:break-all; }

.listo__nota{ max-width:44ch; margin:0 auto; color:var(--tenue); font-size:13.5px; line-height:1.5; }

/* ═══════════════ EL PLAN ═══════════════ */

.hoja-portada{ display:none; }

.plan__cabecera{
  position:relative; overflow:hidden;
  margin-bottom:22px; padding:34px 30px;
  border-radius:var(--r-grande);
  background:linear-gradient(135deg, #14306E, var(--azul) 48%, #2563EB);
  color:#fff;
  box-shadow:0 22px 46px -18px rgba(12,42,110,.5);
}
.plan__cabecera::after{
  content:""; position:absolute; top:-55%; right:-16%;
  width:66%; height:180%; border-radius:50%;
  background:radial-gradient(circle, rgba(252,211,77,.26), transparent 62%);
}
.plan__cabecera > *{ position:relative; z-index:1; }
.plan__cabecera .sello{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26); color:#FDE9C3; }
.plan__cabecera h2{
  margin-bottom:10px; font-size:clamp(27px, 5.2vw, 36px); font-weight:600;
  letter-spacing:-.03em; line-height:1.1; text-transform:uppercase;
}
.plan__cabecera h2 em{ font-style:normal; color:#FCD34D; }
.plan__cabecera > p{ max-width:46ch; color:#CBD9F0; font-size:15.5px; }

.numeros{ display:grid; grid-template-columns:repeat(auto-fit, minmax(112px,1fr)); gap:9px; margin-top:26px; }
.numero{ padding:15px 16px; border-radius:var(--r); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.17); }
.numero b{ display:block; margin-bottom:3px; font-size:25px; font-weight:600; color:#FCD34D; line-height:1.08; letter-spacing:-.03em; }
.numero span{ display:block; font-size:11px; line-height:1.3; color:#BFCFEA; letter-spacing:.05em; text-transform:uppercase; }

.bloque-plan{ margin-top:44px; }

.titulo-seccion{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.titulo-seccion__num{ flex:none; margin-top:3px; font-size:12px; font-weight:600; color:var(--azul-3); letter-spacing:.1em; }
.titulo-seccion h3{ font-size:22px; font-weight:600; color:var(--tinta); letter-spacing:-.03em; line-height:1.16; text-transform:uppercase; }
.titulo-seccion p{ margin-top:4px; color:var(--suave); font-size:14.5px; }

.nota{
  padding:20px 22px; margin-bottom:10px;
  border:1px solid var(--linea); border-left:3px solid var(--azul-3);
  border-radius:var(--r); background:var(--papel); box-shadow:var(--sombra);
}
.nota b{ display:block; margin-bottom:6px; font-size:15.5px; font-weight:600; color:var(--tinta); }
.nota p{ font-size:14.5px; line-height:1.6; color:var(--suave); }
.nota--freno{ border-left-color:var(--ambar); background:linear-gradient(100deg, var(--ambar-luz), var(--papel) 56%); }
.nota--cuenta{ margin-bottom:0; border-left-color:var(--azul); background:var(--superficie); box-shadow:none; }

/* ── la transcripción del audio ── */

.confirma__solo-este{
  display:block; width:100%; margin-top:16px; padding:8px; border:0; background:none;
  font:inherit; font-size:14px; color:var(--suave); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.confirma__solo-este:hover{ color:var(--azul); }

.transcripcion + .transcripcion{ margin-top:14px; }
.transcripcion__titulo{
  margin:0 0 10px; font-size:12px; font-weight:650; letter-spacing:.07em;
  text-transform:uppercase; color:var(--azul); font-style:normal;
}
.transcripcion__titulo span{ font-weight:500; color:var(--suave); letter-spacing:.02em; }

.transcripcion{
  padding:24px 26px; border-radius:var(--r);
  background:var(--azul-luz); border:1px solid #D5E4F8;
  border-left:3px solid var(--azul);
}
.transcripcion p{
  color:var(--tinta); font-size:16px; line-height:1.7;
  font-style:italic; text-wrap:pretty;
}
.transcripcion p::before{ content:"“"; margin-right:2px; color:var(--azul-3); font-size:24px; line-height:0; }
.transcripcion p::after{ content:"”"; margin-left:2px; color:var(--azul-3); font-size:24px; line-height:0; }

@media print{
  .transcripcion{ background:#F2F7FE !important; border-color:#CFE0F7 !important; padding:5mm 6mm;
                  break-inside:avoid; }
  .transcripcion p{ font-size:10pt; }
  .transcripcion__titulo{ font-size:8.5pt; }
}

/* ── la ruta de 12 semanas ── */

.ruta{ position:relative; }
.ruta::before{
  content:""; position:absolute; left:19px; top:20px; bottom:30px; width:2px;
  background:linear-gradient(180deg, var(--azul), var(--azul-3) 74%, transparent);
  border-radius:2px;
}

.fase{ position:relative; z-index:1; margin:28px 0 14px; padding-left:56px; }
.fase:first-child{ margin-top:0; }
.fase span{
  display:inline-block; padding:5px 13px; border-radius:999px;
  background:var(--azul); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}

.hito{ position:relative; padding-left:56px; margin-bottom:12px; }
.hito__marca{
  position:absolute; left:0; top:2px; z-index:1;
  width:39px; height:39px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--papel); border:2px solid var(--azul); color:var(--azul); line-height:1;
  box-shadow:0 0 0 5px var(--fondo);
}
.hito__marca i{ font-style:normal; font-size:7px; font-weight:600; letter-spacing:.1em; opacity:.65; }
.hito__marca b{ font-size:15px; font-weight:700; letter-spacing:-.02em; }

.hito__cuerpo{
  padding:20px 22px;
  border:1px solid var(--linea); border-radius:var(--r);
  background:var(--papel); box-shadow:var(--sombra);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hito:hover .hito__cuerpo{ border-color:var(--azul-3); box-shadow:var(--sombra-alta); }
.hito h4{ margin-bottom:11px; font-size:18px; font-weight:600; color:var(--tinta); letter-spacing:-.025em; }

.hito__meta{
  display:flex; gap:10px; align-items:baseline;
  margin-bottom:15px; padding:10px 14px;
  border-radius:10px; background:var(--verde-luz); border:1px solid #B5EAD0;
  color:var(--verde); font-size:13.5px; font-weight:500; line-height:1.45;
}
.hito__meta span{ flex:none; font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; opacity:.75; }

.hito ul{ list-style:none; display:grid; gap:10px; }
.hito li{ display:flex; gap:12px; font-size:14.5px; line-height:1.55; color:var(--texto); }
.hito li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:3px;
  border:1.5px solid var(--linea-2); border-radius:5px; background:var(--fondo);
}

/* ── productos ── */

.productos{
  padding:24px; border-radius:var(--r);
  background:linear-gradient(140deg, var(--ambar-luz), #FFFDF8);
  border:1px solid #F6DCA8;
}
.productos h4{ margin-bottom:5px; font-size:18px; font-weight:600; color:var(--tinta); letter-spacing:-.025em; }
.productos__porque{ margin-bottom:18px; font-size:14.5px; line-height:1.55; color:#8A5A09; }
.productos ul{ list-style:none; display:grid; gap:8px; margin-bottom:18px; }
.productos li{
  display:flex; gap:12px; align-items:center;
  padding:14px 17px; border:1px solid #F6DCA8; border-radius:var(--r);
  background:var(--papel); font-size:14.5px; font-weight:500; color:var(--tinta);
}
.productos li::before{ content:"→"; color:var(--ambar); font-weight:700; }
.productos__nota{ padding-top:17px; border-top:1px solid #F6DCA8; font-size:14.5px; line-height:1.6; color:#8A5A09; }

/* ── descarga ── */

.descarga{
  margin-top:44px; padding:32px 26px; text-align:center;
  border-radius:var(--r-grande);
  background:var(--papel); border:1.5px dashed var(--azul-3); box-shadow:var(--sombra);
}
.descarga h3{ margin-bottom:7px; font-size:20px; font-weight:600; color:var(--tinta); letter-spacing:-.025em; text-transform:uppercase; }
.descarga p{ margin-bottom:20px; color:var(--suave); font-size:14.5px; }
.descarga .acciones{ justify-content:center; margin-top:0; flex-wrap:wrap; }

.pie{ margin-top:30px; text-align:center; color:var(--tenue); font-size:12.5px; }
.pie-impreso{ display:none; }

/* ═══════════════ CELULAR ═══════════════ */

@media (max-width:600px){
  .escena{ padding:30px 18px 56px; }
  .barra__info, .barra__linea{ padding-left:18px; padding-right:18px; }
  .plan__cabecera{ padding:26px 21px; }
  .hito, .fase{ padding-left:48px; }
  .ruta::before{ left:16px; }
  .hito__marca{ width:33px; height:33px; }
  .hito__marca b{ font-size:13px; }
  .acciones{ flex-direction:column-reverse; }
  .acciones .boton{ width:100%; }
  .opcion:hover{ transform:none; box-shadow:var(--sombra); }
  .pista{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   IMPRESIÓN · el PDF es un documento, no la pantalla impresa
   ═══════════════════════════════════════════════════════════════ */

@page{ size:A4; margin:17mm 15mm 16mm; }

@media print{

  .barra, .descarga, .no-imprimir, .pantalla:not(.activa){ display:none !important; }
  body::before{ display:none; }

  html, body{ background:#fff !important; color:#1E293B !important; font-size:10.5pt; line-height:1.5; }
  .escena{ display:block; max-width:none; min-height:0; margin:0; padding:0; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* ── portada del documento ── */
  .hoja-portada{
    display:flex !important; flex-direction:column; justify-content:center;
    height:247mm; padding:0 6mm;
    break-after:page; page-break-after:always;
    border-left:4pt solid #6D28D9;
  }
  .hoja-portada__marca{ margin-bottom:14mm; font-size:10pt; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#6D28D9; }
  .hoja-portada h1{ margin-bottom:12mm; font-size:46pt; font-weight:600; line-height:1.02; letter-spacing:-.03em; color:#0F172A; text-transform:uppercase; }
  .hoja-portada__quien{ padding-top:7mm; border-top:1pt solid #DCE5F2; font-size:17pt; font-weight:600; color:#0F172A; }
  .hoja-portada__perfil{ margin-top:2mm; font-size:12pt; font-weight:500; color:#6D28D9; }
  .hoja-portada__fecha{ margin-top:22mm; font-size:9.5pt; color:#7C8AA3; }

  /* ── cabecera ── */
  .plan__cabecera{
    margin-bottom:9mm; padding:8mm;
    background:#15337A !important; border-radius:4mm; box-shadow:none;
    break-inside:avoid; page-break-inside:avoid;
  }
  .plan__cabecera::after{ display:none; }
  .plan__cabecera h2{ font-size:21pt; color:#fff !important; }
  .plan__cabecera > p{ font-size:10pt; color:#DACFF2 !important; }
  .numeros{ gap:3mm; margin-top:7mm; }
  .numero{ padding:4mm; background:rgba(255,255,255,.12) !important; }
  .numero b{ font-size:16pt; }
  .numero span{ font-size:7pt; }

  /* ── secciones ── */
  .bloque-plan{ margin-top:11mm; }
  .titulo-seccion{ margin-bottom:5mm; break-after:avoid; page-break-after:avoid; }
  .titulo-seccion h3{ font-size:15pt; }
  .titulo-seccion p{ font-size:9.5pt; }

  .nota, .productos, .hito, .hito__cuerpo{ box-shadow:none !important; break-inside:avoid; page-break-inside:avoid; }
  .nota{ padding:5mm 6mm; margin-bottom:3mm; }
  .nota b{ font-size:11pt; }
  .nota p{ font-size:9.5pt; }
  .nota--freno{ background:#FEF6E7 !important; }
  .nota--cuenta{ background:#F3F7FD !important; }

  .productos{ padding:6mm; background:#FEF9EF !important; }
  .productos li{ padding:3.5mm 5mm; background:#fff !important; font-size:9.5pt; }

  /* ── la ruta ── */
  .ruta::before{ left:5.6mm; background:#B9CFEE !important; }
  .fase{ margin:8mm 0 4mm; padding-left:15mm; break-after:avoid; page-break-after:avoid; }
  .fase span{ background:#6D28D9 !important; font-size:7.5pt; padding:1.5mm 3.5mm; }

  .hito{ padding-left:15mm; margin-bottom:4mm; }
  .hito__marca{
    width:11mm; height:11mm; top:0;
    border:1.5pt solid #6D28D9; background:#fff !important;
    box-shadow:0 0 0 1.5mm #fff !important;
  }
  .hito__marca i{ font-size:5pt; }
  .hito__marca b{ font-size:11pt; }
  .hito__cuerpo{ padding:5mm 6mm; }
  .hito h4{ font-size:12.5pt; margin-bottom:2.5mm; }
  .hito__meta{ padding:2.5mm 4mm; margin-bottom:3.5mm; font-size:9pt; background:#ECFDF5 !important; }
  .hito__meta span{ font-size:6.5pt; }
  .hito li{ font-size:9.5pt; gap:3mm; }
  .hito li::before{ width:3.2mm; height:3.2mm; margin-top:1mm; border-color:#C3CEDE; background:#fff !important; }

  .pie-impreso{
    display:block !important;
    margin-top:10mm; padding-top:4mm; border-top:1pt solid #DCE5F2;
    text-align:center; font-size:8pt; color:#7C8AA3;
  }

  a[href]::after{ content:""; }
  h1,h2,h3,h4{ break-after:avoid; page-break-after:avoid; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}