/* ============================================================
   Página de espera del dominio (ESP-01).

   Hoja suelta a propósito: la página no carga cedral.css. Esa hoja trae el header, el pie y la
   verificación de edad, y acá no va nada de eso. Lo que sí se copia es el sistema visual —las
   fuentes, los colores de marca y las curvas del IGN como máscara— para que la espera se vea de
   la misma casa que el sitio.
   ============================================================ */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,
    U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* respaldo con las medidas de Montserrat: el texto no salta cuando llega la fuente */
@font-face{font-family:'Montserrat Respaldo';src:local('Arial');size-adjust:112.8%;
  ascent-override:85.8%;descent-override:22.3%;line-gap-override:0%}

:root{
  --verde:#006339; --khaki:#A39264; --beech:#C2C18D;
  --pino:#223631; --crema:#F7F3EA;
  --f:'Montserrat','Montserrat Respaldo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--pino);color:var(--crema);font-family:var(--f);
  -webkit-font-smoothing:antialiased;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,7vw,64px) clamp(20px,6vw,64px);
  position:relative;overflow:clip;isolation:isolate}

/* las curvas del IGN, como en el sitio: máscara y no imagen de fondo, para que el color lo
   ponga el CSS (un SVG de fondo no hereda currentColor y saldría negro) */
.curvas{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.2;
  background-color:var(--beech);
  -webkit-mask-image:url(../../img/curvas-cedral.svg);mask-image:url(../../img/curvas-cedral.svg);
  -webkit-mask-size:3000px auto;mask-size:3000px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
@media(max-width:768px){.curvas{-webkit-mask-size:1800px auto;mask-size:1800px auto}}

.caja{width:100%;max-width:33rem;text-align:center}
.marca{display:block;margin:0 auto clamp(26px,4vw,38px);width:clamp(112px,20vw,164px);height:auto}
.eb{margin:0 0 14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--beech)}
h1{margin:0;font-weight:300;font-size:clamp(28px,6vw,44px);line-height:1.1;
  letter-spacing:-.01em;text-wrap:balance}
h1 b{font-weight:800}
.lead{margin:18px auto 0;max-width:42ch;font-size:clamp(15px,2.2vw,17px);line-height:1.62;
  color:rgba(247,243,234,.82)}

.redes{margin-top:clamp(34px,5vw,48px);padding-top:clamp(22px,3vw,28px);
  border-top:1px solid rgba(194,193,141,.28)}
.redes p{margin:0 0 16px;font-size:14px;letter-spacing:.02em;color:rgba(247,243,234,.72)}
.botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:13px 26px;border:1px solid var(--beech);border-radius:2px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--pino);background:var(--beech);transition:background .25s,color .25s}
.btn.ghost{background:transparent;color:var(--beech)}
.btn:hover{background:var(--crema);border-color:var(--crema);color:var(--pino)}
.btn:focus-visible{outline:2px solid var(--crema);outline-offset:3px}
@media(max-width:400px){.botones{flex-direction:column}.btn{width:100%}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}