/* Tokens y base de Krelo. UNA sola copia para todo el sitio.
   Antes esto estaba repetido dentro de las nueve paginas: 23 KB de CSS
   identico servido nueve veces, y nueve sitios donde cambiar un color.

   --vhu es la unidad de pantalla de los efectos. En movil 100vh es el viewport
   grande y no encoge al esconderse la barra de direcciones, pero el area
   visible si: una escena pegajosa de 100vh acaba mas alta que lo que se ve.
   Sin esta variable los calc() de las secciones son invalidos y las alturas se
   ignoran EN SILENCIO. */
:root{
 --bg:#ECE5DB; --bg-alt:#DDD4C4; --paper:#F3EEE4; --dark:#1A0804;
 --accent:#C72A08; --accent-dk:#A82206; --muted:#7A5248; --cream:#ECE5DB;
 --line:rgba(26,8,4,.12);
 --display:'Barlow Condensed','Bebas Neue',Impact,sans-serif;
 --body:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
 --serif:'Playfair Display',Georgia,serif;
 --dots:radial-gradient(circle,rgba(26,8,4,.11) 1px,transparent 1px);
 --dots-d:radial-gradient(circle,rgba(236,229,219,.13) 1px,transparent 1px);
 --lift:0 -22px 60px rgba(0,0,0,.34);--navh:72px;--vhu:100vh;
}
@supports (height:100svh){:root{--vhu:100svh}}
*{margin:0;padding:0;box-sizing:border-box}
html{max-width:100%;scroll-behavior:smooth}
body{max-width:100%;font-family:var(--body);background:var(--bg);color:var(--dark);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dsp{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.88}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.sec{padding:clamp(74px,9vw,124px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.2em;
 text-transform:uppercase;color:var(--accent-dk);margin-bottom:16px}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--accent)}
.h2{font-size:clamp(26px,min(4.4vw,6.5vh),60px);max-width:18ch}
.lead{margin-top:16px;max-width:58ch;font-size:clamp(15px,1.6vw,18px);color:var(--muted)}
.dark{background:var(--dark);color:var(--cream)}
.dark .lead,[data-dark] .lead{color:rgba(236,229,219,.66)}
/* La clase Y el atributo. Una seccion oscura se marca de las dos maneras en
   esta web, y estas reglas solo miraban la clase: en las que usaban el
   atributo el acento salia en el tono de fondo claro, que sobre oscuro no
   llega al contraste minimo. */
.dark .eyebrow,[data-dark] .eyebrow{color:#F0794F}
.dark .eyebrow::before,[data-dark] .eyebrow::before{background:#F0794F}
a[href^='tel:']{min-height:44px;display:inline-flex;align-items:center}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible,.dark :focus-visible,[data-dark] :focus-visible{outline-color:var(--cream)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:100px;font-weight:600;
 font-size:15px;transition:transform .3s,background .3s;white-space:nowrap}
.btn:hover{transform:translateY(-3px)}
.btn-a{background:var(--accent);color:#fff}.btn-a:hover{background:var(--accent-dk)}
.btn-l{box-shadow:inset 0 0 0 1.5px rgba(26,8,4,.24)}
.dark .btn-l,[data-dark] .btn-l{box-shadow:inset 0 0 0 1.5px rgba(236,229,219,.3);color:var(--cream)}
.arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--accent-dk);transition:gap .25s}
.arrow:hover{gap:12px}