/* Prueba 4 (11 nov 2026): mayor contraste. Paleta y estilo de la referencia 13 de Jo («Modern Color Palette»).
   Se queda el motor de la presentación. Del estilo se copia: fondo crema con manchas de color en las
   esquinas y tramas de puntos, título en mayúsculas muy grueso y estrecho con una palabra en carmesí,
   línea espaciada entre rayitas, pastillas con número en círculo blanco, divisoria e icono a la derecha.
   Para más contraste, en las pastillas claras el texto va en azul marino. */
:root{
  --carmesi:#A60E35; --naranja:#FEA24F; --agua:#10BBC3; --verdeazul:#068187; --marino:#051A2D;
  --tinta:#FBF5EE; --losa:#FFFFFF; --losa-alta:#FFFFFF; --hilo:#E6DCD0;
  --luz:var(--marino); --humo:#3B4B5C; --c:var(--carmesi);
}
html,body{background:#FBF5EE}
body::after{opacity:.025}
#halo{background:
  radial-gradient(circle at 3% 6%, rgba(166,14,53,.55) 1.6px, transparent 2.2px) 0 0/16px 16px no-repeat,
  radial-gradient(34% 30% at 0% 104%, #068187 0 96%, transparent 97%),
  radial-gradient(30% 34% at 104% 104%, #A60E35 0 96%, transparent 97%),
  radial-gradient(22% 30% at 104% -6%, #FEA24F 0 96%, transparent 97%);}
.puntos{position:fixed;pointer-events:none;z-index:0;width:120px;height:80px;
  background:radial-gradient(circle, currentColor 1.6px, transparent 2.2px) 0 0/16px 16px}
.hero,.h{text-transform:uppercase;font-weight:900;letter-spacing:-.01em;line-height:.92}
#wave span{font-variation-settings:'wght' 900,'wdth' 72!important}
.h{font-variation-settings:'wdth' 72}
.lit{color:var(--carmesi)}
.tag{color:var(--marino);font-weight:700;letter-spacing:.3em;gap:.9em}
.tag::before{width:2.4em;height:1.5px;border-radius:0;background:var(--marino);box-shadow:none}
.tag::after{content:"";width:2.4em;height:1.5px;background:var(--marino)}
.body{color:var(--humo)}
.big{color:var(--marino)}
#bar{background:rgba(255,255,255,.78);border-top:1px solid rgba(5,26,45,.1)}
#bar button{color:var(--marino)}
#prog i{background:rgba(5,26,45,.12)} #prog i.done,#prog i.now{background:var(--marino);box-shadow:none}
#count,#hint{color:var(--marino)} #hint kbd{color:var(--marino);border-color:rgba(5,26,45,.25)}

/* las pastillas de la referencia */
.pills{display:grid;width:min(580px,100%);margin-inline:auto}
.pill2{--f:var(--carmesi);--t:#fff;position:relative;display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  min-height:clamp(62px,min(10vh,15vw),92px);margin-top:calc(clamp(62px,min(10vh,15vw),92px) * -.12);
  padding:0 clamp(10px,1.2vw,14px);border-radius:999px;color:var(--t);
  background:linear-gradient(180deg,color-mix(in srgb,var(--f) 78%,white) 0%,var(--f) 38%,color-mix(in srgb,var(--f) 86%,black) 100%);
  box-shadow:0 14px 22px -10px rgba(5,26,45,.45),inset 0 2px 0 rgba(255,255,255,.35)}
.pill2:first-child{margin-top:0}
.pill2 .tx b{text-shadow:0 1px 0 rgba(255,255,255,.08)}
.pill2 .n{flex:none;display:grid;place-items:center;width:clamp(42px,min(7vh,11vw),62px);aspect-ratio:1;border-radius:50%;background:#fff;
  color:var(--f);font-weight:800;font-size:clamp(1rem,min(2.4vh,4vw),1.35rem);box-shadow:0 3px 8px rgba(0,0,0,.2)}
.pill2 .div{width:1.5px;align-self:stretch;margin:14px 0;background:currentColor;opacity:.45}
.pill2 .tx{flex:1;min-width:0}
.pill2 .tx b{display:block;font-size:clamp(1.05rem,min(2.7vh,4.4vw),1.5rem);font-weight:800;line-height:1.1}
.pill2 .tx span{display:block;font-size:clamp(.8rem,min(1.9vh,3.4vw),1rem);font-weight:500;opacity:.92}
.pill2 .ic{flex:none;display:grid;place-items:center;width:clamp(40px,min(6.6vh,10vw),58px);aspect-ratio:1;border-radius:50%;border:1.5px solid currentColor}
.pill2 .ic svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill2.f{transform:translateY(.7em)} .pill2.f.on{transform:none}
.portada-ruta{width:min(520px,100%);height:auto;border-radius:22px;box-shadow:0 26px 46px -18px rgba(5,26,45,.45)}

/* Prueba 5: la 4 con toque de vidrio (glassmorphism). Manchas de color grandes y difuminadas detrás,
   y encima paneles esmerilados, pastillas de vidrio teñido y la portada en un marco de vidrio. */
.manchas{position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(38px) saturate(120%)}
.manchas i{position:absolute;border-radius:50%;opacity:.55}
.vidrio{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.7));
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(255,255,255,.75);border-radius:28px;padding:clamp(18px,3vw,40px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -24px rgba(5,26,45,.35)}
.marco-vidrio{padding:12px;border-radius:30px;background:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 50px -20px rgba(5,26,45,.35)}
.marco-vidrio .portada-ruta{display:block;box-shadow:none;border-radius:20px}
.pill2{--a:.95;background:linear-gradient(135deg,color-mix(in srgb,var(--f) calc(var(--a)*100%),transparent),color-mix(in srgb,var(--f) calc(var(--a)*90%),transparent));
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -10px 20px rgba(255,255,255,.08),0 16px 28px -14px rgba(5,26,45,.45)}
.pill2 .n{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill2 .ic{border-color:color-mix(in srgb,currentColor 70%,transparent);background:rgba(255,255,255,.12)}
#bar{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.s{z-index:1}
/* «$0» en carmesí, como en la portada de la Ruta (el título se arma letra a letra: la última palabra es «$0») */
#wave b:last-child{color:var(--carmesi)}

/* La ruta, al día con el libro: cada etapa con su color; el recorrido lo lleva ruta_cinco_etapas.js */
:root{--e1:var(--carmesi);--e2:var(--naranja);--e3:var(--agua);--e4:var(--verdeazul);--e5:var(--marino);--ct:var(--carmesi);--cf:var(--carmesi)}
.s[data-screen=feed]{--ct:#A60E35;--cf:#A60E35} .s[data-screen=perfil]{--ct:#A8530A;--cf:#FEA24F} .s[data-screen=enlace]{--ct:#07767D;--cf:#10BBC3}
.s[data-screen=wa]{--ct:#056469;--cf:#068187} .s[data-screen=post]{--ct:#051A2D;--cf:#051A2D}
.lit{color:var(--ct)}
.hero{font-size:clamp(2.6rem, min(1.6rem + 4.6vw, 11vh), 7.2rem)}
.tag{flex-wrap:wrap;max-width:100%;white-space:normal;row-gap:.3em}
.split>*,.stack>*{min-width:0}
.stack{grid-template-columns:minmax(0,1fr)}
.s:not([data-screen=intro]) .tag{color:var(--ct)}
.s:not([data-screen=intro]) .tag::before,.s:not([data-screen=intro]) .tag::after{background:var(--ct)}
.vidrio .big{color:var(--marino)} .vidrio .body{color:#24384B}
.medalla{position:relative;display:grid;place-items:center;width:min(340px,62vw,44vh);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--f) 96%,white),color-mix(in srgb,var(--f) 86%,black));
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 30px 60px -24px rgba(5,26,45,.55)}
.medalla b{font-size:clamp(6rem,min(15vw,24vh),12rem);font-weight:900;line-height:1;color:#fff;font-variation-settings:'wdth' 72}
.medalla.apagada{background:rgba(255,255,255,.7);border:2px solid var(--cf)} .medalla.apagada b{color:var(--carmesi)}
.s[data-screen=perfil] .medalla:not(.apagada) b,.s[data-screen=enlace] .medalla:not(.apagada) b{color:var(--marino)}
.ic-grande{position:absolute;right:4%;bottom:6%;display:grid;place-items:center;width:28%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ct)}
.ico2{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-grande .ico2{width:52%;height:52%}
.pill2 .tx b{font-size:clamp(1rem,min(2.5vh,4.2vw),1.4rem)}
.visual{display:grid;gap:clamp(10px,1.8vh,18px);width:min(600px,100%);justify-items:center}
.escalera{width:100%;height:auto;overflow:visible}
.escalera .esc-n{font:800 24px Archivo,sans-serif;fill:var(--marino)}
.escalera .esc-t{font:700 16px Archivo,sans-serif;fill:var(--marino)}
.escalera rect.f{transform:none;filter:none;transition:opacity .5s var(--ease)}
.pie{font-size:var(--t-body);font-weight:700;color:var(--marino);text-align:center;line-height:1.3;max-width:34ch}
.pie::first-line{color:var(--ct)}
.termina{display:flex;gap:.6em;align-items:flex-start;font-weight:600}
.ok{flex:none;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--cf);color:#fff;font-size:.9em}
.s[data-screen=perfil] .ok,.s[data-screen=enlace] .ok{color:var(--marino)}
.cruz{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--carmesi);color:#fff;font-size:.75em;vertical-align:.15em;margin-right:.2em}
.respuestas{display:flex;gap:10px;flex-wrap:wrap;margin-top:.4em}
.resp{all:unset;box-sizing:border-box;flex:1 1 9rem;text-align:center;padding:.85em 1em;border-radius:999px;font-weight:800;font-size:var(--t-small);cursor:pointer;
  border:1.5px solid var(--marino);color:var(--marino);background:rgba(255,255,255,.7);transition:transform .15s,background .15s}
.resp:hover{background:#fff} .resp:active{transform:scale(.97)} .resp:focus-visible{outline:3px solid var(--carmesi);outline-offset:2px}
.resp.no{background:var(--qc,var(--marino));border-color:var(--qc,var(--marino));color:#fff}
.quiz{display:grid;gap:14px;width:min(560px,100%)}
.quiz .q{display:grid;gap:12px;animation:qEntra .35s var(--ease) both}
.quiz .q[hidden],.quiz .quiz-fin[hidden]{display:none}
.s[data-etapa] .vidrio .big{font-size:clamp(1.2rem,min(.9rem + 1.4vw,4vh),2.3rem)}
@keyframes qEntra{from{opacity:0;transform:translateX(14px)}}
.q-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--qc);color:#fff;font-weight:900;font-size:1.5rem}
.q[style*="--e2"] .q-num,.q[style*="--e3"] .q-num,.q[style*="--e2"] .resp.no,.q[style*="--e3"] .resp.no{color:var(--marino)}
.puntos{display:flex;gap:8px}
.punto{flex:1;height:6px;border-radius:3px;background:rgba(5,26,45,.12)}
.punto.ahora{background:color-mix(in srgb,var(--qc) 55%,white)} .punto.si{background:var(--qc)} .punto.no{background:var(--carmesi)}
.quiz.avisa,.elige.avisa{animation:avisa .45s}
.elige-aviso{margin:2px 0 0;min-height:1.4em;font-weight:800;color:var(--carmesi);font-size:var(--t-small);opacity:0;transition:opacity .25s}
.elige.avisa .elige-aviso,.elige.dijo .elige-aviso{opacity:1}
@keyframes avisa{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.badge{flex:none;display:grid;place-items:center;width:clamp(40px,min(6.6vh,10vw),58px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--verdeazul);font-weight:900;font-size:1.3em}
.boton-ruta{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:52px;padding:0 1.4em;border-radius:999px;background:var(--marino);color:#fff;font-weight:800;text-decoration:none;
  box-shadow:0 14px 26px -12px rgba(5,26,45,.6)}
.boton-ruta:hover{background:var(--carmesi)}
.tira{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.tira-b{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;width:clamp(36px,4.8vh,46px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  font-weight:900;font-size:.95rem;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--qc) 80%,white),var(--qc));
  border:2px solid rgba(255,255,255,.85);box-shadow:0 10px 18px -8px rgba(5,26,45,.55),0 2px 0 rgba(255,255,255,.5) inset;
  animation:flota 3.2s ease-in-out infinite alternate;transition:transform .15s,box-shadow .15s}
.tira-b[data-ir="2"],.tira-b[data-ir="3"]{color:var(--marino)}
.tira-b:nth-child(2){animation-delay:-.6s} .tira-b:nth-child(3){animation-delay:-1.2s} .tira-b:nth-child(4){animation-delay:-1.8s} .tira-b:nth-child(5){animation-delay:-2.4s}
.tira-b:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.08);box-shadow:0 18px 26px -10px rgba(5,26,45,.6)}
@keyframes flota{from{transform:translateY(0)}to{transform:translateY(-10px)}} .tira-b:focus-visible{outline:3px solid var(--marino);outline-offset:2px}
.tira-b.ahora{outline:3px solid var(--qc);outline-offset:3px}
.tira-b[data-ir="2"].ahora,.tira-b[data-ir="3"].ahora{color:var(--marino)}
.tira-b.tuya::after{content:"tuya";position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:15px;white-space:nowrap;font-size:.86rem;font-weight:900;letter-spacing:.03em;color:var(--marino);animation:none}
.tira-b.tuya{margin-bottom:36px}
.flotan .pill2{animation:flota 3.4s ease-in-out infinite alternate;
  box-shadow:0 18px 26px -12px rgba(5,26,45,.55),inset 0 1px 0 rgba(255,255,255,.65)}
.flotan .pill2:nth-child(2){animation-delay:-.7s} .flotan .pill2:nth-child(3){animation-delay:-1.4s}
.flotan .pill2:nth-child(4){animation-delay:-2.1s} .flotan .pill2:nth-child(5){animation-delay:-2.8s}
.botones-fin{display:flex;flex-wrap:wrap;gap:10px;margin-top:.6em}
.elige{display:grid;gap:16px;width:min(500px,100%)}
.elige-b{all:unset;box-sizing:border-box;display:grid;gap:6px;padding:22px 26px;border-radius:24px;cursor:pointer;
  animation:flota 3.4s ease-in-out infinite alternate;transition:transform .15s,box-shadow .15s}
.elige-b b{font-size:clamp(1.2rem,3vh,1.75rem);font-weight:900;line-height:1.15}
.elige-b span{font-weight:600;line-height:1.35;font-size:clamp(.95rem,2vh,1.15rem)}
.elige-b.uno{color:#fff;background:linear-gradient(160deg,#0B2C4A,var(--marino));box-shadow:0 22px 34px -16px rgba(5,26,45,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.elige-b.uno span{color:#CFE3EE}
.elige-b.dos{color:var(--marino);background:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.95);backdrop-filter:blur(12px);
  box-shadow:0 18px 30px -16px rgba(5,26,45,.5);animation-delay:-1.7s}
.elige-b.dos span{color:#3B4B5C}
.elige-b:hover{animation-play-state:paused;transform:translateY(-5px)}
.elige-b:focus-visible{outline:3px solid var(--carmesi);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.elige-b{animation:none}}
#mas{position:fixed;left:50%;bottom:calc(var(--bar) + 12px);translate:-50% 0;z-index:30;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--marino);font-weight:900;font-size:1.35rem;cursor:pointer;box-shadow:0 10px 22px -10px rgba(5,26,45,.65);
  border:1.5px solid rgba(5,26,45,.12);opacity:0;pointer-events:none;transition:opacity .3s}
#mas.ve{opacity:1;pointer-events:auto;animation:masBaja 1.4s ease-in-out infinite}
@keyframes masBaja{50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){#mas.ve{animation:none}}
.pdf-caja{display:grid;gap:10px;width:min(480px,100%)}
.pdf-caja form{display:grid;gap:10px}
.pdf-et{font-weight:800;color:var(--marino);font-size:var(--t-small)}
.pdf-caja input[type=email]{box-sizing:border-box;width:100%;min-height:54px;padding:0 1em;border-radius:14px;border:1.5px solid rgba(5,26,45,.25);
  background:#fff;font:600 1.05rem var(--familia,Archivo),sans-serif;color:var(--marino)}
.pdf-caja input[type=email]:focus{outline:3px solid var(--carmesi);outline-offset:1px;border-color:transparent}
.pdf-caja .boton-ruta,.pdf-caja .boton-corrida{justify-content:center;width:100%}
.pdf-o{text-align:center;color:#4A5A6A;font-weight:700}
.pdf-cons{font-size:.82rem;line-height:1.4;color:#3B4B5C} .pdf-cons a{color:var(--marino)}
.pdf-ok{font-weight:800;color:var(--verdeazul);font-size:var(--t-body)}
.pdf-error{color:var(--carmesi);font-weight:700;font-size:.9rem}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.boton-corrida{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:52px;padding:0 1.4em;border-radius:999px;cursor:pointer;
  font-weight:800;color:var(--marino);background:rgba(255,255,255,.8);border:1.5px solid var(--marino);box-shadow:0 10px 20px -12px rgba(5,26,45,.5)}
.boton-corrida:hover{background:#fff;color:var(--carmesi);border-color:var(--carmesi)}
.boton-corrida:focus-visible{outline:3px solid var(--carmesi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tira-b,.flotan .pill2{animation:none!important}}

.solo-otra{display:none} .otra-etapa .solo-otra{display:revert} .otra-etapa .solo-aqui{display:none}
.otra-etapa h2.solo-otra{display:block}
.enlace-suave{all:unset;cursor:pointer;font-weight:700;color:var(--marino);text-decoration:underline;text-underline-offset:.25em;font-size:var(--t-small)}
.enlace-suave:hover{color:var(--carmesi)}
@media (max-width:899px), (max-aspect-ratio:5/4){
  .medalla{width:min(200px,50vw,26dvh)} .vidrio{padding:16px 18px;border-radius:22px} .tag{letter-spacing:.16em}
  .visual{width:100%} .escalera .esc-t{font-size:20px} .q-num{width:44px;height:44px;font-size:1.2rem}
  .tira{gap:6px;margin-bottom:0} .tira-b{width:30px;font-size:.82rem} .tira-b.tuya{margin-bottom:32px} .tira-b.tuya::after{font-size:.76rem;margin-top:13px}
  .s[data-etapa] .vidrio .big{font-size:clamp(1.02rem,4.4vw,1.3rem)} .escalera{max-height:24dvh}
}