/* Base compartida: fuentes, cuenta regresiva y hoja de confirmación.
   Cada versión define sus colores y letras con estas variables. */
@font-face { font-family: "Cormorant"; src: url(fuentes/Cormorant.ttf) format("truetype"); font-weight: 300 700; }
@font-face { font-family: "Cormorant"; src: url(fuentes/Cormorant-Italic.ttf) format("truetype"); font-weight: 300 700; font-style: italic; }
@font-face { font-family: "Jost"; src: url(fuentes/Jost.ttf) format("truetype"); font-weight: 100 900; }

:root {
  --fondo: #F4EBDD;
  --texto: #49352B;
  --suave: #7A6352;
  --acento: #AC8958;
  --boton: #49352B;
  --boton-texto: #F4EBDD;
  --hoja: #FBF6EE;
  --titulo: "Cormorant", serif;
  --cuerpo: "Jost", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); min-height: 100vh; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pagina { max-width: 480px; margin: 0 auto; position: relative; }

/* cuenta regresiva */
.cuenta { display: flex; justify-content: center; gap: 10px; }
.cuenta-item { min-width: 64px; text-align: center; }
.cuenta-item b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 40px; line-height: 1; }
.cuenta-item span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.cuenta-hoy { font-family: var(--titulo); font-size: 34px; font-style: italic; }

/* botones */
.botones { display: grid; gap: 12px; }
.boton { display: block; width: 100%; padding: 17px 20px; text-align: center; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }
.boton-lleno { background: var(--boton); color: var(--boton-texto); }
.boton-linea { border: 1px solid currentColor; }

/* hoja de confirmación */
.hoja { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 14, 10, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.hoja.abierta { opacity: 1; pointer-events: auto; }
.hoja-caja { width: 100%; max-width: 480px; background: var(--hoja); color: var(--texto); padding: 34px 28px 40px; transform: translateY(40px); transition: transform .35s cubic-bezier(.2, .8, .2, 1); position: relative; }
.hoja.abierta .hoja-caja { transform: none; }
.hoja-cerrar { position: absolute; right: 18px; top: 14px; font-size: 26px; opacity: .55; }
.hoja h3 { font-family: var(--titulo); font-weight: 400; font-size: 34px; text-align: center; margin-bottom: 8px; }
.hoja p { text-align: center; font-size: 15px; line-height: 1.5; opacity: .8; margin-bottom: 24px; }
.hoja .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hoja label { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin: 16px 0 6px; }
.hoja input { width: 100%; padding: 14px 4px; font: inherit; font-size: 17px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; outline: none; }
.hoja form .boton { margin-top: 28px; }