:root{
  --noche:#14202b; --noche-2:#1d2d3b; --ocre:#d99a2b; --ocre-2:#b97f1a; --arena:#f3efe7; --papel:#fff;
  --texto:#18222c; --gris:#5b6672; --linea:#dcd6cb; --ok:#1f8a5b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Barlow,system-ui,sans-serif;background:var(--arena);color:var(--texto);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.cond{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;line-height:1.05;letter-spacing:.01em}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.demo{background:#ffe600;color:#141414;text-align:center;font-size:.85rem;font-weight:600;padding:8px 16px}
.demo a{font-weight:700}

header{background:var(--noche);color:#fff;position:sticky;top:0;z-index:20;border-bottom:3px solid var(--ocre)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca svg{width:34px;height:34px}
.marca b{font-family:"Barlow Condensed",sans-serif;font-size:1.45rem;letter-spacing:.04em;text-transform:uppercase}
.marca b span{color:var(--ocre)}
.menu{display:flex;gap:24px;align-items:center;font-weight:600}
.menu a{text-decoration:none;color:#c9d2da}
.menu a:hover,.menu a.activo{color:#fff}
.menu a.activo{box-shadow:inset 0 -3px 0 var(--ocre);padding-bottom:4px}
@media (max-width:700px){.menu{gap:14px;font-size:.92rem}.marca b{font-size:1.15rem}}
@media (max-width:480px){.menu a.btn{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:6px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.98rem}
.btn-o{background:var(--ocre);color:var(--noche)}
.btn-o:hover{background:#e8ab3c}
.btn-l{border:1.5px solid #8796a3;color:#fff;background:transparent}
.btn-l:hover{border-color:#fff}
.btn-d{background:var(--noche);color:#fff}
.btn-d:hover{background:var(--noche-2)}
.menu .btn{padding:9px 16px;color:var(--noche)}

.etq{display:block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--ocre-2);margin-bottom:10px}
.titulo{max-width:680px;margin-bottom:36px}
.titulo h2{font-size:clamp(2rem,4.4vw,3rem);text-transform:uppercase}
.titulo p{color:var(--gris);margin-top:12px;font-size:1.06rem}

footer{background:var(--noche);color:#9aa8b4;padding:40px 0 26px;font-size:.92rem}
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media (max-width:760px){.pie{grid-template-columns:1fr}}
.pie b{display:block;color:#fff;margin-bottom:6px;font-family:"Barlow Condensed",sans-serif;font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em}
.pie a{text-decoration:none}
.pie a:hover{color:#fff}
.creditos{border-top:1px solid #2c3d4c;margin-top:28px;padding-top:18px;font-size:.82rem;text-align:center}