/* ═══════════════════════════════════════════════════════════════════════════
   YESUD · PÁGINA DE LANZAMIENTO (reserva)
   Fuente: este archivo (se edita aquí). El HTML lo genera
   scratchpad/web_yesud/lanzamiento.py — ese sí NO se toca a mano.

   ⚠️ LA PALETA ES LA DE LA APP, NO UNA NUEVA. Azul noche #0c1224 y oro #e8b34b
   son los de la pantalla de inicio y el libro de la marca; el filo #a86f14 es
   el de su portada. Quien llegue aquí y luego abra la app tiene que reconocer
   lo mismo. Y es UN SOLO TEMA A PROPÓSITO: la app vive en esta noche (el tema
   claro es un ajuste de la app, no su cara), así que la página se compromete
   con ella y pinta su fondo siempre.

   Reglas de diseño del proyecto que se cumplen aquí (CLAUDE.md, 8-sep):
   la audacia en UN sitio (la portada: el libro con su halo), el resto en
   silencio; nada de oro macizo (los botones son vidrio dorado, no lingote);
   cejas en minúscula cursiva, no en MAYÚSCULAS; ningún emoji como icono: todo
   dibujo es de la app, horneado.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --noche:#0c1224; --noche-2:#111a33; --panel:#16203c; --panel-2:#1b2748;
  --filo:#24304f; --filo-oro:rgba(168,111,20,.55);
  --oro:#e8b34b; --oro-claro:#ffd884; --oro-hondo:#a86f14;
  --tinta:#eaeef8; --suave:#a7b1cc; --tenue:#727e9f;
  --ok:#8df0b4; --azul:#7aa7f5;
  /* Los colores de los cinco estudios, los del abanico de la app. */
  --c-originales:#dcbb78; --c-promesas:#41c393; --c-mandamientos:#e0703c;
  --c-guerra:#6ba2f3; --c-nombres:#a98ae0;
  --ancho:1120px;
  --serif-titulo:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --hebreo:"Noto Serif Hebrew","SBL Hebrew","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* Sin el recuadro azul del navegador al tocar (6-oct, lo pidió el usuario): la
   respuesta al toque la da el propio botón, que se hunde (`:active`, abajo).
   `manipulation` quita además la espera del doble toque en el móvil. */
a,button,summary,label,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{margin:0;background:var(--noche);color:var(--tinta);
  font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px;border-radius:6px}
.env{max-width:var(--ancho);margin:0 auto;padding-inline:24px}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── tipografía ── */
h1,h2,h3{text-wrap:balance}
h1{font-family:var(--serif-titulo);font-weight:600;font-size:clamp(42px,6.4vw,74px);
  line-height:1.03;letter-spacing:.003em;margin:18px 0 0}
h1 em,h2 em{font-style:italic;color:var(--oro)}
h2{font-family:var(--serif-titulo);font-weight:600;font-size:clamp(32px,4.2vw,48px);
  line-height:1.1;margin:0 0 16px}
h3{font-size:17px;margin:0 0 6px;font-weight:700}
.ceja{font-family:var(--serif-titulo);font-style:italic;font-size:21px;color:var(--oro);
  margin:0 0 6px;display:flex;align-items:center;gap:10px}
.ceja::before{content:"";width:26px;height:1px;background:var(--oro-hondo)}
.sub{color:var(--suave);max-width:60ch;margin:0 0 26px;text-wrap:pretty}
.puntos{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.puntos li{position:relative;padding-left:28px;color:var(--suave);font-size:16px;max-width:56ch}
.puntos li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;
  transform:rotate(45deg);border:1.5px solid var(--oro);border-radius:1px}
.puntos b{color:var(--tinta);font-weight:600}

/* ── botones: vidrio dorado, no oro macizo ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:13px 26px;border-radius:14px;font:700 16.5px/1.2 var(--sans);text-decoration:none;
  cursor:pointer;border:1px solid transparent;transition:transform .12s ease-out,box-shadow .2s ease,background .2s ease}
/* El levantarse al pasar el ratón, SOLO con ratón: en el móvil `:hover` se queda
   pegado después del toque y el botón se quedaba subido. */
@media (hover:hover){.btn:hover{transform:translateY(-1px)}}
/* Al pulsar, se hunde: es la respuesta al toque en vez del recuadro azul. */
.btn:active{transform:scale(.96);transition-duration:.06s}
.sello .btn:active{transform:scale(.98)}   /* el ancho: con .96 encogería demasiado */
.idiomas a,dialog .cerrar{transition:transform .12s ease-out}
.idiomas a:active,dialog .cerrar:active{transform:scale(.92)}
details summary{transition:transform .12s ease-out}
details summary:active{transform:scale(.985)}
.btn-reserva{color:var(--oro-claro);border-color:var(--filo-oro);
  background:linear-gradient(165deg,rgba(255,216,132,.26),rgba(232,179,75,.12) 45%,rgba(168,111,20,.2));
  box-shadow:inset 0 1px 0 rgba(255,236,190,.22),0 10px 34px rgba(232,179,75,.14)}
.btn-reserva:hover{box-shadow:inset 0 1px 0 rgba(255,236,190,.3),0 12px 44px rgba(232,179,75,.26);
  background:linear-gradient(165deg,rgba(255,216,132,.28),rgba(232,179,75,.12) 45%,rgba(168,111,20,.18))}
.btn-filo{color:var(--tinta);border-color:var(--filo);background:rgba(255,255,255,.03)}
.btn-filo:hover{border-color:#34426a}
.btn .precio-btn{font-variant-numeric:tabular-nums}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* ── barra de arriba ── */
.barra{position:sticky;top:0;z-index:40;background:rgba(12,18,36,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--filo)}
.barra .env{display:flex;align-items:center;gap:18px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.marca img{width:30px;height:30px}
.marca .nom{font-family:var(--serif-titulo);font-size:25px;font-weight:600;letter-spacing:.06em}
.marca .heb{font-family:var(--hebreo);font-size:16px;color:var(--oro);opacity:.85;direction:rtl}
.barra nav{display:flex;gap:22px}
.barra nav a{color:var(--suave);text-decoration:none;font-size:14.5px}
.barra nav a:hover{color:var(--oro-claro)}
.idiomas{display:flex;border:1px solid var(--filo);border-radius:999px;overflow:hidden;font-size:13px}
.idiomas a{padding:5px 11px;text-decoration:none;color:var(--tenue)}
.idiomas a[aria-current="true"]{color:var(--noche);background:var(--suave)}
.barra .btn{min-height:40px;padding:8px 16px;font-size:14.5px;border-radius:11px}
@media (max-width:900px){.barra nav{display:none}}
/* En el móvil se va el botón de la barra, pero NO el hebreo de la marca (6-oct: «en
   el ordenador sale y en el móvil no»): cabe de sobra junto al nombre. */
@media (max-width:520px){.barra .btn{display:none}.barra .env{gap:12px}.marca{gap:8px}.marca .heb{font-size:15px}}

/* ── portada ── */
.portada{position:relative;overflow:hidden;padding:64px 0 72px;
  background:radial-gradient(110% 80% at 70% 0%,#1c2b55 0%,rgba(12,18,36,0) 62%),var(--noche)}
/* SIN CIELO ESTRELLADO (6-oct). Eran diez puntos de 1-1,6 px repartidos por la
   portada: en el móvil caían sobre el titular y el botón, y aun apartados al
   móvil de muestra el usuario los vio como «punticos que se te escaparon». A ese
   tamaño una estrella no se lee como estrella: la noche ya la pone el fondo. */
.portada .env{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.chapa{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--filo-oro);
  background:rgba(232,179,75,.07);color:var(--oro-claro);border-radius:999px;padding:6px 14px;font-size:14px}
.chapa .punto{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
/* LA ENTRADA DE LA RESERVA, EN UNA TARJETA (6-oct, el usuario: «que se note que
   entramos en la página de reserva»). La misma familia que los banners de noticias
   de la web: noche con resplandor azul, luz dorada en la esquina, filo de oro y un
   brillo fino arriba. En el ordenador abraza el texto y el móvil queda al lado. */
.tarjeta-portada{position:relative;isolation:isolate;overflow:hidden;padding:34px 34px 32px;border-radius:26px;
  border:1px solid rgba(168,111,20,.45);
  background:
    radial-gradient(80% 70% at 100% 0%,rgba(232,179,75,.16),rgba(12,18,36,0) 60%),
    radial-gradient(110% 90% at 0% 0%,rgba(54,88,168,.42),rgba(12,18,36,0) 58%),
    linear-gradient(160deg,#121c3a 0%,#0b1122 62%,#090e1c 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 0 6px rgba(168,111,20,.06),inset 0 1px 0 rgba(255,216,132,.07)}
.tarjeta-portada::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,216,132,0),rgba(255,216,132,.6),rgba(255,216,132,0))}
@media (max-width:600px){.tarjeta-portada{padding:26px 20px 24px;border-radius:22px}}
.entradilla{font-size:clamp(17px,2vw,20px);color:var(--suave);max-width:36em;margin:20px 0 0;text-wrap:pretty}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.bajo-btn{color:var(--tenue);font-size:14.5px;margin:14px 0 0}
.aviso-idioma{margin:22px 0 0;display:flex;gap:10px;align-items:flex-start;max-width:34em;
  color:var(--suave);font-size:15px;border-left:2px solid var(--oro-hondo);padding:2px 0 2px 14px}
.aviso-idioma b{color:var(--tinta)}
.escena{position:relative;display:grid;place-items:center;min-height:620px}
/* El halo del libro: el MISMO horneado de la app, respirando con un solo reloj. */
.escena .halo{position:absolute;width:min(620px,120%);aspect-ratio:1;left:50%;top:44%;
  translate:-50% -50%;opacity:.75;animation:respira 6s ease-in-out infinite;pointer-events:none;
  filter:saturate(1.2)}
@keyframes respira{0%,100%{opacity:.55;scale:.96}50%{opacity:.9;scale:1.04}}
@media (max-width:900px){
  .portada{padding:44px 0 56px}
  /* minmax(0,1fr): con «1fr» a secas la columna crece hasta el ancho intrínseco de la imagen del libro y la
     portada se sale del móvil (visto el 11-oct en una captura a 390 px: la entradilla cortada por la derecha). */
  .portada .env{grid-template-columns:minmax(0,1fr);gap:34px}
  .escena{min-height:0}
}

/* ── cifras ── */
.cifras{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-block:1px solid var(--filo);
  background:linear-gradient(180deg,rgba(22,32,60,.6),rgba(12,18,36,0))}
.cifra{padding:24px 18px;text-align:center;border-left:1px solid var(--filo)}
.cifra:first-child{border-left:0}
.cifra b{display:block;font-family:var(--serif-titulo);font-size:clamp(30px,3.4vw,40px);font-weight:600;
  color:var(--oro);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.cifra span{display:block;color:var(--tenue);font-size:14px;margin-top:8px;line-height:1.35}
@media (max-width:760px){
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra{border-left:0;border-top:1px solid var(--filo)}
  .cifra:nth-child(-n+2){border-top:0}
  .cifra:nth-child(even){border-left:1px solid var(--filo)}
  .cifra:last-child{grid-column:1/-1;border-left:0}
}

/* ── secciones ── */
section{padding:88px 0;position:relative}
section + section{border-top:1px solid rgba(36,48,79,.6)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.fila.al-reves .texto{order:2}
.fila .muestra{display:grid;justify-items:center;gap:14px}
.pie-muestra{color:var(--tenue);font-size:13.5px;text-align:center;max-width:34ch;display:flex;gap:8px;align-items:flex-start}
.pie-muestra .ok{color:var(--ok);flex:none}
@media (max-width:900px){
  section{padding:64px 0}
  .fila{grid-template-columns:1fr;gap:36px}
  .fila.al-reves .texto{order:0}
}

/* ═════════════════ EL MÓVIL DE MUESTRA ═════════════════
   Todo lo de dentro va en unidades del propio móvil (cqw), así se encoge
   entero en una pantalla estrecha sin transform: ni desbordes ni caja fantasma. */
/* ⚠️ `.movil` es SOLO el contenedor: sin relleno y sin unidades cqw propias (un
   contenedor no puede medirse a sí mismo; las resolvería contra la ventana). El
   marco va en `.caja`, dentro. */
.movil{width:min(300px,78vw);aspect-ratio:300/630;position:relative;container-type:inline-size}
.movil .caja{position:absolute;inset:0;border-radius:14.5cqw;
  background:linear-gradient(160deg,#2a3150,#0a0e1a 40%,#141a2e);
  box-shadow:0 0 0 1px rgba(232,179,75,.28),0 0 0 5px rgba(12,18,36,.9),0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(107,162,243,.08)}
.movil .pantalla{position:absolute;inset:3.2cqw;border-radius:11.6cqw;overflow:hidden;
  background:radial-gradient(120% 60% at 50% 0%,#1a2650 0%,#0f1633 55%,#0c1224);
  font:4cqw/1.45 var(--sans);color:var(--tinta);display:flex;flex-direction:column}
.movil .isla{position:absolute;top:2.6cqw;left:50%;translate:-50% 0;width:28cqw;height:8cqw;border-radius:9cqw;background:#03050b;z-index:3}
.estado{display:flex;justify-content:space-between;align-items:center;padding:3.6cqw 7cqw 0;font-weight:600;font-size:4.2cqw;height:11cqw;flex:none}
.estado i{display:inline-flex;gap:1.2cqw;align-items:center}
.estado i::after{content:"";width:7cqw;height:3.4cqw;border:1px solid rgba(234,238,248,.7);border-radius:1.2cqw;
  background:linear-gradient(90deg,var(--tinta) 72%,transparent 72%);background-clip:content-box;padding:.5cqw}
/* Barra de arriba de la app (TopBar.tsx). Medidas en cqw: el móvil mide 93,6 cqw
   de pantalla ≈ 390 pt, así que 1 pt ≈ 0,24 cqw. */
.cabeza{display:flex;align-items:center;gap:2.9cqw;padding:2.2cqw 5cqw 2.4cqw;flex:none}
.cabeza .pts{display:flex;align-items:center;gap:1.4cqw;color:var(--oro);font-weight:800;font-size:3.85cqw}
.emo{width:4.1cqw;height:4.1cqw;display:inline-block}
.emo.g{width:5.3cqw;height:5.3cqw}
.tut{display:inline-flex;align-items:center;gap:1.2cqw;border:1px solid rgba(206,176,103,.5);border-radius:99cqw;
  padding:.9cqw 2.4cqw;color:var(--oro);font-weight:800;font-size:2.8cqw;letter-spacing:.07cqw}
.tut svg{width:3.6cqw;height:3.6cqw}
.cabeza .der{margin-left:auto;display:flex;gap:4.4cqw;align-items:center}
.chip{border:1px solid var(--filo);border-radius:9cqw;padding:.5cqw 2.6cqw;font-size:3.3cqw;color:var(--suave)}
.chip.oro{border-color:var(--oro);color:var(--noche);background:var(--oro);font-weight:700}
.titulo-p{display:flex;align-items:center;gap:2.6cqw;padding:1cqw 5cqw 2.4cqw;flex:none}
.titulo-p b{font-size:5.6cqw}
.titulo-p .chip{margin-left:auto}
.titulo-p svg{width:5cqw;height:5cqw;color:var(--suave)}
.cuerpo{flex:1;overflow:hidden;padding:0 4.4cqw;position:relative;
  -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
/* barra inferior de la app: cinco botones redondos con su aro dorado */
/* La barra de abajo: monedas y avatar HORNEADOS desde el código de la app
   (scratchpad/web_yesud/lanzamiento_horno.py). Tamaños de AppBar: moneda 54,
   libro 84, avatar 71 (pt). */
.barra-app{flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 3.4cqw 4.6cqw;position:relative;z-index:2;
  background:linear-gradient(rgba(10,14,27,0),rgba(10,14,27,.92) 45%)}
.barra-app .moneda{width:13cqw;height:13cqw;margin-bottom:1.4cqw;filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.55))}
.barra-app .libro{position:relative;width:20cqw;height:20cqw;margin-bottom:.4cqw}
.barra-app .libro img{position:relative;width:20cqw;height:20cqw}
/* El halo va DETRÁS y sin ocupar sitio: como capa, no como hermano en la rejilla
   (si no, su tamaño manda sobre la caja y empuja el libro). */
.halo-l{position:absolute!important;left:50%;top:50%;translate:-50% -50%;pointer-events:none;max-width:none}
.barra-app .libro .halo-l{width:30cqw;height:30cqw;opacity:.75}
.barra-app .av{position:relative;width:17cqw;height:17cqw;display:block}

/* — pantalla: inicio (01-inicio) — */
.tarj{border:1px solid rgba(122,146,212,.22);border-radius:5.8cqw;background:linear-gradient(165deg,#1c2542,#11172b 70%);padding:4.4cqw}
.tarj + .tarj{margin-top:3.4cqw}
.grad{background:linear-gradient(92deg,#7ea6ff 10%,#a9befc 45%,#ffcf6e 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.portada-app{text-align:center;background:radial-gradient(90% 60% at 30% 100%,rgba(232,179,75,.10),transparent 70%),linear-gradient(165deg,#1f2946,#12182c 75%)}
.portada-app .ceja-app{font-size:2.7cqw;letter-spacing:.2em;color:var(--oro);font-weight:700}
.portada-app .grande{font-size:6.3cqw;font-weight:800;line-height:1.15;margin-top:1.4cqw;letter-spacing:-.01em}
.libro-c{position:relative;display:grid;place-items:center;height:36cqw;margin-top:1cqw}
.libro-c img{position:relative;width:32cqw;height:32cqw}
.libro-c .halo-l{width:58cqw;height:58cqw;opacity:.8}
.portada-app .toca{font-size:2.9cqw;letter-spacing:.22em;color:#cfa654;font-weight:700;margin-top:1cqw}
.coleccion .col-cab{display:flex;gap:3.4cqw;align-items:center}
.coleccion .medalla{width:8.2cqw;height:8.2cqw;flex:none}
.coleccion .col-ceja{font-size:2.7cqw;letter-spacing:.16em;color:var(--oro);font-weight:700}
.coleccion .col-tit{font-size:5.3cqw;font-weight:800;line-height:1.2;padding-bottom:1.4cqw;border-bottom:1px solid rgba(122,146,212,.28);display:inline-block}
.coleccion .col-txt{font-size:3.6cqw;color:#93a0bc;margin:2.6cqw 0 0;line-height:1.5}
.coleccion .col-txt b,.coleccion .col-vacio b{color:var(--tinta)}
.col-busca{display:flex;gap:2.4cqw;margin-top:3cqw}
.col-busca .campo{flex:1;display:flex;align-items:center;gap:2cqw;border:1px solid rgba(122,146,212,.35);border-radius:3.4cqw;padding:2.2cqw 3cqw;color:#7f8aa8;font-size:3.6cqw}
.col-busca .campo svg{width:4cqw;height:4cqw;color:#93a0bc}
.col-busca .btn-azul{border-radius:3.4cqw;padding:2.2cqw 3.6cqw;font-weight:800;font-size:3.7cqw;color:#0b1228;
  background:linear-gradient(180deg,#a9befc,#7ea6ff);box-shadow:0 1cqw 3cqw rgba(126,166,255,.3)}
.col-vacio{text-align:center;color:#93a0bc;font-size:3.5cqw;margin:3cqw 0 0;line-height:1.5}
.vdia-t{border-color:rgba(232,179,75,.35)}
.tarj .ceja-dia{font-size:3.2cqw;color:var(--oro);font-weight:700;letter-spacing:.14em;display:flex;gap:1.6cqw;align-items:center}
.tarj .vdia{font-family:var(--serif);font-size:5.2cqw;color:#dfe5f5;margin-top:1.6cqw;line-height:1.45}

/* — pantalla: estudio — */
.vers{font-family:var(--serif);font-style:italic;font-size:4.4cqw;line-height:1.5;color:#dfe5f5}
.vers.tenue{opacity:.42}
.vers .n{display:inline-grid;place-items:center;width:5.4cqw;height:5.4cqw;border-radius:50%;
  background:#1e7a54;color:#fff;font:700 3cqw/1 var(--sans);font-style:normal;margin-right:1.4cqw;vertical-align:.3cqw}
.vers .dos{color:var(--ok);font-style:normal;font-size:3.6cqw;margin-left:1cqw}
.estudio{border-left:.7cqw solid #2c7a66;padding:1cqw 0 1cqw 3cqw;margin:2.4cqw 0 3cqw}
.estudio p{margin:0 0 2.4cqw;font-family:var(--serif);font-size:3.9cqw;line-height:1.55;color:#d2d9ea}
.estudio p b{font-family:var(--sans);font-weight:800;color:var(--azul);font-size:3.6cqw}
.estudio p.apl{font-style:italic}
.cita-azul{color:var(--azul);font-style:normal}

/* — pantalla: hebreo — */
.pista{font-size:3.3cqw;color:var(--suave);margin:0 0 3cqw;display:flex;gap:1.6cqw}
.pista .emo{flex:none}
.linea-heb{display:flex;gap:2.4cqw;align-items:flex-start}
.linea-heb .num{flex:none;width:6cqw;height:6cqw;border-radius:1.6cqw;border:1px solid var(--filo);display:grid;place-items:center;font-size:3.2cqw;color:var(--suave);margin-top:2cqw}
.heb{font-family:var(--hebreo);direction:rtl;text-align:right;font-size:7.4cqw;line-height:1.55;flex:1}
.heb .toc{color:var(--oro);background:rgba(232,179,75,.14);border-radius:1.4cqw;padding:0 1cqw;box-shadow:0 0 0 1px rgba(232,179,75,.35)}
.translit{font-style:italic;color:var(--azul);font-size:3.9cqw;margin:1.6cqw 0 0 8.4cqw}
.literal{font-size:4cqw;color:#d2d9ea;margin:1cqw 0 0 8.4cqw}
.hoja{position:absolute;left:0;right:0;bottom:0;z-index:2;border-radius:6cqw 6cqw 0 0;padding:3cqw 5cqw 5cqw;
  background:linear-gradient(180deg,#1d2a50,#141d3a);box-shadow:0 -4cqw 10cqw rgba(0,0,0,.45);border-top:1px solid rgba(232,179,75,.35)}
.hoja::before{content:"";display:block;width:10cqw;height:1cqw;border-radius:1cqw;background:#3a4770;margin:0 auto 3cqw}
.hoja .cab{display:flex;align-items:baseline;gap:2.4cqw;flex-wrap:wrap}
.hoja .cab .h{font-family:var(--hebreo);font-size:7cqw;color:var(--oro);direction:rtl}
.hoja .cab .s{font-size:3.4cqw;color:var(--noche);background:var(--oro);border-radius:1.2cqw;padding:0 1.6cqw;font-weight:800}
.hoja .cab .t{color:var(--suave);font-size:3.6cqw}
.hoja .def{font-size:3.8cqw;color:#dbe1f1;margin:2cqw 0 1.4cqw;line-height:1.5}
.hoja .usos{font-size:3.3cqw;color:var(--tenue)}
.hoja .usos b{color:var(--suave)}

/* — pantalla: Yesud IA — */
.burbuja{margin:1cqw 0 3cqw auto;max-width:82%;background:#262f47;border-radius:4cqw 4cqw 1.2cqw 4cqw;padding:2.6cqw 3.4cqw;font-size:4cqw}
.resp{font-size:3.95cqw;line-height:1.55;color:#e3e8f5}
.resp .chispa{width:5cqw;margin-bottom:1.6cqw}
.resp p{margin:0 0 2.4cqw}
.resp ul{margin:0 0 2.4cqw;padding-left:4.4cqw}
.resp li{margin-bottom:2cqw}
.resp li::marker{color:var(--oro)}
.resp .ref{color:var(--azul)}
.resp .orig{color:var(--oro);font-style:italic}
.resp em{font-style:italic;color:#cfd6ea}
.selector{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;padding:0 4.4cqw 2cqw;flex:none}
.selector span{border-radius:3cqw;padding:1.4cqw;text-align:center;font-size:3.4cqw;color:var(--suave);border:1px solid var(--filo)}
.selector span small{display:block;font-size:2.8cqw;color:var(--tenue)}
.selector svg{width:3.6cqw;height:3.6cqw;vertical-align:-.5cqw}
.selector .on{background:#23315a;color:var(--tinta);border-color:#3b528a}
.entrada{margin:0 4.4cqw 4.4cqw;border:1px solid var(--filo);border-radius:6cqw;padding:2.4cqw 3.4cqw;display:flex;align-items:center;gap:2cqw;color:var(--tenue);font-size:3.6cqw;flex:none}
.entrada .env-f{margin-left:auto;width:6.4cqw;height:6.4cqw;border-radius:50%;background:#26335a;display:grid;place-items:center}
.entrada svg{width:3.6cqw;height:3.6cqw}

/* ── estandartes de los estudios ──
   El banderín entero (vara, pomos, orla, luz, medallón con el aro) viene HORNEADO
   de libros.tsx; encima solo el nombre y la cuenta, con las medidas de allí
   (lienzo 170 × 246: todo en cqw del propio banderín). */
.estandartes{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.estandarte{position:relative;container-type:inline-size}
.estandarte img{width:100%;height:auto}
.est-txt{position:absolute;left:5.9cqw;right:5.9cqw;top:67.6cqw;display:flex;flex-direction:column;align-items:center;gap:5.3cqw;text-align:center}
.estandarte h3{font-family:var(--serif);font-weight:700;font-size:9.7cqw;line-height:1.27;color:#f3f6ff;margin:0}
.estandarte .cuenta{border:.7cqw solid var(--c);color:var(--c);border-radius:99cqw;padding:2.35cqw 6.5cqw;
  font-size:6.2cqw;font-weight:800;letter-spacing:.41cqw;font-variant-numeric:tabular-nums;line-height:1.2}
@media (max-width:1000px){.estandartes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.estandartes{grid-template-columns:repeat(2,1fr);gap:14px}.estandarte:last-child{grid-column:1/-1;max-width:50%;justify-self:center;width:100%}}

/* ── niveles ── */
.camino-niveles{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.camino-niveles::before{content:"";position:absolute;left:7%;right:7%;top:34px;height:2px;
  background:linear-gradient(90deg,var(--oro-hondo),var(--oro),var(--oro-hondo))}
.camino-niveles li{position:relative;text-align:center;padding:0 4px}
.camino-niveles .n{width:68px;height:68px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#27345d,#121a33);box-shadow:0 0 0 2px #c9912a,0 0 0 6px var(--noche)}
.camino-niveles .n img{width:44px}
.camino-niveles .num{display:block;color:var(--oro);font-size:12.5px;margin-top:12px;font-variant-numeric:tabular-nums}
.camino-niveles b{display:block;font-family:var(--serif-titulo);font-size:19px;font-weight:600;line-height:1.15;margin-top:2px}
.camino-niveles small{display:block;color:var(--tenue);font-size:12.5px;line-height:1.35;margin-top:4px}
@media (max-width:900px){
  .camino-niveles{grid-template-columns:1fr;gap:18px;max-width:420px}
  .camino-niveles::before{left:33px;right:auto;top:10px;bottom:10px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--oro-hondo),var(--oro),var(--oro-hondo))}
  .camino-niveles li{display:grid;grid-template-columns:68px 1fr;gap:4px 16px;text-align:left;align-items:center}
  .camino-niveles .n{grid-row:span 3;margin:0}
  .camino-niveles .num{margin:0}
}
.marcos{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,4vw,44px);margin-top:48px;flex-wrap:wrap}
.marcos figure{margin:0;text-align:center}
.marcos img{height:clamp(110px,16vw,168px);width:auto;margin:0 auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.marcos figcaption{color:var(--tenue);font-size:13.5px;margin-top:10px}

/* ── la reserva ── */
#reserva{background:radial-gradient(70% 60% at 50% 0%,rgba(28,43,85,.55),transparent 70%)}
.oferta{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:36px}
.sello{position:relative;border-radius:26px;padding:34px 32px 30px;
  background:linear-gradient(170deg,#1b2748,#111a33 60%);border:1px solid var(--filo-oro);
  box-shadow:0 0 0 6px rgba(168,111,20,.07),0 34px 80px rgba(0,0,0,.45)}
.sello .cab{display:flex;align-items:center;gap:14px}
.sello .cab img{width:46px}
.sello .cab h3{font-family:var(--serif-titulo);font-size:27px;font-weight:600;margin:0;line-height:1.1}
.sello .cab small{display:block;color:var(--suave);font-size:14px;font-family:var(--sans);margin-top:2px}
.precio{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:24px 0 2px}
.precio b{font-family:var(--serif-titulo);font-size:68px;font-weight:600;line-height:.9;color:var(--oro);font-variant-numeric:lining-nums}
.precio b:empty::before{content:"\00a0"}   /* sin precio aún (lo pone reserva.js al saber el modo): guarda el alto */
.precio span{color:var(--suave);font-size:15px}
.nota-oferta{margin:10px 0 0;color:var(--suave);font-size:14.5px}
.nota-oferta b{color:var(--oro-claro);font-weight:600}
.incluye{list-style:none;padding:0;margin:22px 0 24px;display:grid;gap:12px}
.incluye li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--suave);font-size:15.5px;line-height:1.5}
.incluye li svg{width:18px;height:18px;margin-top:3px;color:var(--oro)}
.incluye li b{color:var(--tinta);font-weight:600}
.sello .btn{width:100%;font-size:17.5px;min-height:56px}
.compara{margin:16px 0 0;color:var(--tenue);font-size:14px;text-align:center}
.compara b{color:var(--ok);font-weight:700}
.letra{color:var(--suave);font-size:15px;display:grid;gap:14px}
.letra .bloque{border:1px solid var(--filo);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.015)}
.letra h3{font-size:16px;display:flex;gap:10px;align-items:center}
.letra h3 svg{width:18px;height:18px;color:var(--oro);flex:none}
.letra p{margin:0}
.letra a{color:var(--oro-claro)}
@media (max-width:900px){.oferta{grid-template-columns:1fr}.sello{padding:28px 22px 24px}}

/* ── calendario ── */
.camino{list-style:none;padding:0;margin:30px 0 0;position:relative;max-width:640px}
.camino::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--oro-hondo),var(--filo))}
.camino li{position:relative;padding-left:40px;margin-bottom:26px}
.camino li::before{content:"";position:absolute;left:3px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--noche);border:2px solid var(--filo)}
.camino li.hecho::before{background:var(--ok);border-color:var(--ok)}
.camino li.ahora::before{background:var(--oro);border-color:var(--oro);box-shadow:0 0 0 5px rgba(232,179,75,.16)}
.camino .cuando{display:block;color:var(--oro);font-size:14px;font-family:var(--serif-titulo);font-style:italic;font-size:18px}
.camino p{margin:2px 0 0;color:var(--suave);font-size:15.5px}

/* ── preguntas ── */
.preguntas{max-width:760px}
details{border:1px solid var(--filo);border-radius:14px;padding:0 20px;margin-bottom:12px;background:rgba(255,255,255,.015)}
details summary{cursor:pointer;font-weight:700;list-style:none;padding:17px 30px 17px 0;position:relative;min-height:44px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:2px solid var(--oro);border-bottom:2px solid var(--oro);translate:0 -70%;rotate:45deg;transition:rotate .2s ease}
details[open] summary::after{rotate:225deg;translate:0 -30%}
details p{color:var(--suave);margin:0 0 16px;font-size:15.5px}
details a{color:var(--oro-claro)}

/* ── cierre ── */
.cierre{text-align:center}
.cierre blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,23px);line-height:1.55;color:var(--suave);max-width:34em;margin:0 auto}
.cierre cite{display:block;font-style:normal;color:var(--oro);font-size:15px;margin-top:10px}
.cierre .libro-f{width:96px;margin:0 auto 20px;filter:drop-shadow(0 0 24px rgba(232,179,75,.35))}
.cierre .btn{margin-top:30px}
.cierre .nombre{color:var(--tenue);font-size:15px;max-width:52ch;margin:26px auto 0}

/* ── pie ── */
footer{border-top:1px solid var(--filo);padding:40px 0 110px;color:var(--tenue);font-size:14px}
footer .env{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--suave);text-decoration:none}
footer a:hover{color:var(--oro-claro)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer .mor{flex-basis:100%;font-size:13px;color:var(--tenue);max-width:80ch}

/* ── VOLVER ARRIBA: el botón redondo azul de la web de antes (Web/biblia/static/
   biblia/styles.css, .btn-arriba, tema oscuro), tal cual: degradado #7ea6ff → #a9befc,
   doble flecha blanca que entra desde abajo, rebota, se para y sale por arriba.
   Arriba en el centro, justo debajo de la barra, y solo cuando ya has bajado. ── */
.btn-arriba{position:fixed;top:76px;left:50%;z-index:30;
  width:48px;height:48px;border-radius:50%;cursor:pointer;overflow:hidden;
  display:grid;place-items:center;padding:0;border:0;
  /* EL ORIGINAL, con su LÍNEA BLANCA ARRIBA y su aro fino (6-oct, el usuario: «mantén
     la esencia del original»), con LOS AZULES DE SIEMPRE (#7ea6ff → #a9befc) al 85 %:
     sobre la noche quedan un punto más hondos, que es el azul que gustó. Ni el 70 %
     (se apagaba), ni el tono aclarado para compensar (se veía blanquecino), ni cristal. */
  background:linear-gradient(140deg,rgba(126,166,255,.85),rgba(169,190,252,.85));
  box-shadow:0 7px 24px rgba(126,166,255,.45),inset 0 2px 0 rgba(255,255,255,.6),inset 0 0 0 2px rgba(255,255,255,.14);
  opacity:0;pointer-events:none;translate:-50% -12px;
  transition:opacity .28s,translate .28s,scale .16s,box-shadow .2s}
.btn-arriba.visible{opacity:1;pointer-events:auto;translate:-50% 0}
@media (hover:hover){.btn-arriba:hover{scale:1.08;box-shadow:0 9px 30px rgba(126,166,255,.6),inset 0 2px 0 rgba(255,255,255,.6),inset 0 0 0 2px rgba(255,255,255,.14)}}
.btn-arriba:active{scale:.92}
.btn-arriba .chevs{display:flex;flex-direction:column;align-items:center;animation:chev-sube 2.4s ease-in-out infinite}
.btn-arriba .chev{width:12px;height:12px;border-left:3px solid #fff;border-top:3px solid #fff;border-radius:2.5px;transform:rotate(45deg)}
.btn-arriba .chev + .chev{margin-top:-4px}
@keyframes chev-sube{
  0%  {transform:translateY(24px);opacity:0}
  16% {transform:translateY(0);opacity:1}
  24% {transform:translateY(4px)}
  31% {transform:translateY(-2px)}
  37% {transform:translateY(0)}
  62% {transform:translateY(0);opacity:1}
  80% {transform:translateY(-24px);opacity:0}
  100%{transform:translateY(24px);opacity:0}
}
@media (max-width:600px){.btn-arriba{top:74px;width:46px;height:46px}}

/* ── botón fijo en el móvil ── */
.fija{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none;
  padding:10px 10px 10px 18px;border-radius:18px;align-items:center;gap:12px;
  background:rgba(17,26,51,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--filo-oro);box-shadow:0 18px 40px rgba(0,0,0,.5);
  transition:translate .3s ease,opacity .3s ease;translate:0 140%;opacity:0}
.fija.ver{translate:0 0;opacity:1}
.fija span{font-size:14px;color:var(--suave);line-height:1.3}
.fija span b{display:block;color:var(--tinta);font-size:15px}
.fija .btn{margin-left:auto;min-height:44px;padding:10px 18px;font-size:15px}
@media (max-width:900px){.fija{display:flex}}

/* ── ventanas (pago hecho, simulación local, reserva cerrada) ── */
dialog{border:1px solid var(--filo-oro);border-radius:22px;background:linear-gradient(170deg,#1b2748,#111a33);
  color:var(--tinta);padding:28px 26px 24px;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(5,8,18,.72);backdrop-filter:blur(4px)}
dialog h3{font-family:var(--serif-titulo);font-size:28px;font-weight:600;margin:0 0 10px;line-height:1.15}
dialog p{color:var(--suave);margin:0 0 14px;font-size:15.5px}
dialog .cerrar{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--suave);font-size:22px;cursor:pointer}
dialog .cerrar:hover{color:var(--tinta)}
dialog label{display:block;font-size:14px;color:var(--suave);margin-bottom:6px}
dialog input{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--filo);background:#0e1530;color:var(--tinta);padding:10px 14px;font:16px var(--sans)}
dialog input:focus{outline:2px solid var(--oro-hondo);border-color:transparent}
dialog .fila-btn{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
dialog .fila-btn .btn{flex:1;min-width:150px}
dialog .nota{font-size:13.5px;color:var(--tenue);margin:14px 0 0}
.prueba{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#1b1204;background:#f0c35a;border-radius:6px;padding:2px 8px;margin-bottom:12px}
.codigo{font:700 clamp(20px,5vw,26px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--oro-claro);
  text-align:center;border:1px dashed var(--filo-oro);border-radius:12px;padding:14px;margin:6px 0 14px;word-break:break-all}
dialog pre{white-space:pre-wrap;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--suave);
  background:#0b1128;border:1px solid var(--filo);border-radius:12px;padding:14px;max-height:260px;overflow:auto;margin:0 0 12px}
.error{color:#ffb4a8;font-size:14.5px;margin-top:10px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── las tiendas (11-oct-2026): la insignia oficial de Google Play + App Store en negro hasta que aprueben ── */
.tiendas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:18px 0 0}
.tiendas .tienda{display:inline-flex;align-items:center;text-decoration:none}
.tiendas .play img{display:block;height:70px;width:auto;margin:-10px -11px}  /* el PNG oficial trae margen transparente */
.tiendas .apple{height:50px;min-width:152px;padding:0 16px;border-radius:8px;background:#000;border:1px solid #8a8a8a;color:#fff;flex-direction:column;justify-content:center;line-height:1.05;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.tiendas .apple .t1{font-size:10.5px;letter-spacing:.15px;opacity:.92}
.tiendas .apple .t2{font-size:19px;font-weight:600;letter-spacing:-.3px}
.tiendas .apple.pronto{opacity:.78;cursor:default}
.tiendas .apple img{display:block;height:50px;width:auto}
.tiendas-nota{color:var(--suave);margin:22px 0 0;max-width:62ch}
footer .tiendas-pie{flex-basis:100%}
footer .tiendas{margin:0 0 14px}