/* ══════════════════════════════════════════════════════════════════════════
   hoja.css · las dos hojas que suben desde abajo en el pasillo de cobro.
   Rediseno aprobado por Carlos el 2026-09-28, diseno/pasillo-2026-09-28/:

     1-datos.html    nombre y correo antes de Stripe. La abre caPedirDatos de
                     cobro.js en /paquete/, /fuego/ y /rescate/.
     5-rechazo.html  el banco dijo que no a la tarjeta guardada de un upsell.
                     La abre pintarRechazo de cobro.js.

   ══ POR QUE ES UN ARCHIVO APARTE ══════════════════════════════════════════
   /paquete/ y /fuego/ no enlazan pasillo.css: cada una trae su propio <style>
   con otros nombres de variable. Copiar estas reglas en tres sitios garantiza
   que un arreglo llegue a dos. Por eso este archivo NO depende de ninguna
   variable de la pagina: cada valor va escrito con su nombre de pasillo.css
   delante y el literal de respaldo, que es el mismo de tokens.css. Y todas
   las clases empiezan por `hoja` o viven dentro de `.hoja`, asi que no
   chocan con `rotulo`, `precio`, `boton` ni `entrada` de ninguna pagina.

   NINGUNA REGLA LE DA `display` A UN NODO QUE NAZCA `hidden`: la hoja y el
   velo usan `:not([hidden])`.
   ══════════════════════════════════════════════════════════════════════════ */
html.con-hoja,html.con-hoja body{overflow:hidden}

.velo:not([hidden]){position:fixed;inset:0;z-index:90;background:rgba(26,35,50,.55);
  animation:hoja-velo .24s cubic-bezier(.25,.1,.25,1)}
.hoja:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:91;
  margin-inline:auto;width:100%;max-width:480px;box-sizing:border-box;
  background:#ffffff;box-shadow:0 26px 60px rgba(27,58,99,.26);color:#1a2332;
  font-family:'Zen Kaku Gothic New',system-ui,-apple-system,sans-serif;
  text-align:left;animation:hoja-sube .32s cubic-bezier(.25,.1,.25,1)}
@keyframes hoja-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes hoja-velo{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hoja:not([hidden]),.velo:not([hidden]){animation:none}}
.hoja *,.hoja *::before,.hoja *::after{box-sizing:border-box}
.hoja p{margin:0}

/* EL BOTON DE ORO DE LAS HOJAS. Completo aqui, no heredado: cada pagina
   define su `.boton` y aqui tiene que verse igual en las tres. Minusculas,
   17 px y .14em como en las maquetas; la etiqueta es el copy de Carlos. */
.hoja .boton{display:block;width:100%;max-width:none;margin:0;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;
  font-size:17px;letter-spacing:.14em;line-height:1;padding:20px 24px;
  text-transform:lowercase;text-align:center;text-decoration:none;
  background:#e0c48a;color:#1a2332;border:0;border-radius:0;cursor:pointer;box-shadow:none}
.hoja .boton:hover{background:#d1b075;color:#1a2332}
.hoja .boton[aria-busy="true"]{background:#d1b075;color:rgba(26,35,50,.64);cursor:progress}
.hoja .boton:disabled{cursor:progress}
.hoja .boton:focus-visible{outline:0;box-shadow:0 0 0 2px #ffffff,0 0 0 4px #1b3a63}
.hoja .filete-corto{display:block;width:40px;height:1px;background:#e0c48a}
.hoja .aviso-error{margin:0;padding:.85em 1.1em;background:rgba(156,58,44,.08);
  border-left:2px solid #9c3a2c;font-size:14px;line-height:1.55;color:#9c3a2c;text-align:left}

/* ── 1 · LA HOJA DE DATOS ─────────────────────────────────────────────── */
.hoja-datos:not([hidden]){top:56px;display:flex;flex-direction:column;gap:22px;
  padding:22px 24px calc(28px + env(safe-area-inset-bottom,0px));overflow-y:auto}
@media (min-height:900px){.hoja-datos:not([hidden]){top:auto;height:788px}}
.hoja-cabeza{display:flex;align-items:center;justify-content:space-between}
.hoja .paso-pago{margin:0;font-size:14px;font-weight:500;letter-spacing:.1em;
  text-transform:lowercase;font-variant-caps:small-caps;color:#1b3a63;text-align:left}
.hoja-cerrar{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;color:rgba(26,35,50,.64);padding:12px 0 12px 12px;line-height:1.2}
.hoja-cerrar:hover{color:#1a2332}
.hoja-avance{display:flex;gap:6px;margin-top:-12px}
.hoja-avance span{flex-grow:1;height:2px;background:rgba(26,35,50,.11)}
.hoja-avance span:first-child,.hoja-avance.en-dos span{background:#1b3a63}
.hoja-campos{display:flex;flex-direction:column;gap:22px;margin-top:6px}
.hoja .campo{display:flex;flex-direction:column;gap:4px;margin:0}
.hoja .campo label{font-size:13px;font-weight:500;letter-spacing:.06em;color:rgba(26,35,50,.64)}
.hoja .campo:focus-within label{color:#1b3a63}
.hoja .entrada{width:100%;margin:0;border:0;border-bottom:1px solid rgba(26,35,50,.3);border-radius:0;
  padding:10px 0;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:400;
  font-size:24px;line-height:1.2;color:#1a2332;background:transparent;outline:none;box-shadow:none;
  -webkit-appearance:none;appearance:none}
.hoja .entrada:focus{border-bottom:2px solid #1b3a63;padding-bottom:9px}
.hoja .entrada[aria-invalid="true"]{border-bottom:2px solid #9c3a2c;padding-bottom:9px}
.hoja textarea.entrada{resize:none;font-size:20px;line-height:1.35;min-height:2.9em}
.hoja .campo .nota{margin-top:6px;font-size:14px;line-height:1.55;letter-spacing:0;color:rgba(26,35,50,.64)}
.hoja .error-campo{margin-top:6px;font-size:14px;line-height:1.55;color:#9c3a2c}
.hoja-hueco{flex-grow:1}
.hoja-pie{display:flex;flex-direction:column;gap:14px}
.hoja .terminos-pago{margin:0;font-size:13px;line-height:1.5;letter-spacing:0;color:rgba(26,35,50,.64);text-align:center}
.hoja-sellos{display:flex;flex-direction:column;align-items:center;gap:10px}
.hoja-sellos ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:13px;line-height:1.5;letter-spacing:.06em;color:rgba(26,35,50,.64)}
.hoja-sellos li::before{content:none}

/* ── 5 · EL RECHAZO ───────────────────────────────────────────────────── */
.hoja-rechazo:not([hidden]){display:flex;flex-direction:column;gap:18px;
  padding:30px 24px calc(34px + env(safe-area-inset-bottom,0px));max-height:calc(100% - 56px);overflow-y:auto}
.hoja .rechazo-calma{font-size:15px;font-weight:500;line-height:1.5;color:#1b3a63;text-align:left}
.hoja .rechazo-titulo{margin:0;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:400;
  font-size:36px;line-height:1.08;letter-spacing:-.012em;color:#1a2332;text-align:left}
.hoja .rechazo-sub{margin:0;font-size:16px;line-height:1.7;color:rgba(26,35,50,.82);text-align:left}
.rechazo-botones{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.hoja .rechazo-whatsapp{display:block;text-align:center;font-size:15px;font-weight:500;line-height:1.5;
  color:#1b3a63;padding:14px 0;text-decoration:underline;text-underline-offset:4px}
.hoja .rechazo-whatsapp:hover{color:#1a2332}

/* ── LA CAJA DEL RELOJ Y EL CUPO EN LA HOJA ───────────────────────────────
   Solo si la oferta trae el lugar del Reto. Mismos valores que pasillo.css. */
.hoja .reloj-caja:not([hidden]){display:flex;flex-direction:column;gap:6px;background:#f6f5f1;padding:16px 18px;line-height:normal}
.hoja .reloj-lugar,.hoja .cupo-lugar{margin:0;text-align:left}
.hoja .reloj-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hoja .reloj-fila > span:first-child{font-size:14px;color:rgba(26,35,50,.82)}
.hoja .reloj-cifra{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:26px;
  letter-spacing:.02em;color:#1b3a63;font-variant-numeric:tabular-nums}
.hoja .cupo-lugar{padding-top:6px;border-top:1px solid rgba(26,35,50,.11);font-size:14px;font-weight:500;color:#1b3a63}