/* ============ EHP · shared design system ============ */
:root{
  --leather-900:#1F1611; --leather-800:#2B1E15; --leather-700:#4A2D18;
  --leather-600:#6B3410; --leather-500:#8B5A2B; --leather-400:#A87449;
  --tobacco:#B88858; --cream:#F4EBDC; --cream-2:#EAE0CC; --raw:#E8DCC4;
  --paper:#FAF5EA; --field:#4A5D3A; --field-dark:#2F3B25; --ink:#1F1611;
  --line:rgba(31,22,17,.18); --line-strong:rgba(31,22,17,.35);
  --ff-display:'Fraunces', Georgia, serif;
  --ff-ui:'Archivo', system-ui, sans-serif;
  --ff-mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ font-family:var(--ff-ui); background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:0}
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:400; margin:0; letter-spacing:-.015em }

.container{ width:min(1400px,92vw); margin:0 auto }
.eyebrow{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--leather-600); display:inline-flex;align-items:center;gap:10px }
.eyebrow::before{ content:""; width:24px;height:1px;background:currentColor;display:inline-block }

.btn{ display:inline-flex;align-items:center;gap:14px; padding:18px 28px;
  font-family:var(--ff-ui);font-weight:500;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase; border-radius:2px; transition:background .2s,color .2s }
.btn-primary{ background:var(--leather-900); color:var(--cream) }
.btn-primary:hover{ background:var(--leather-700) }
.btn-ghost{ color:var(--leather-900); border:1px solid var(--line-strong) }
.btn-ghost:hover{ background:var(--leather-900); color:var(--cream); border-color:var(--leather-900) }
.btn .arrow{ width:20px;height:10px;position:relative }
.btn .arrow::before,.btn .arrow::after{ content:"";position:absolute;background:currentColor }
.btn .arrow::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.btn .arrow::after{right:0;top:50%;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;background:0;transform:translateY(-50%) rotate(45deg)}

/* ===== TOP NAV ===== */
.topbar{ position:sticky;top:0;z-index:50; background:var(--paper); border-bottom:1px solid var(--line) }
.topbar-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:18px 0; gap:24px }
.brand{ display:flex;align-items:center;gap:14px; font-family:var(--ff-display); font-weight:500; font-size:18px }
.brand-mark{ width:42px;height:42px; border:1px solid var(--leather-900); display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:600; font-size:15px; background:var(--leather-900);color:var(--cream); position:relative }
.brand-mark::before,.brand-mark::after{ content:"";position:absolute;inset:3px;border:1px solid var(--cream);opacity:.25 }
.brand-text small{ display:block; font-family:var(--ff-mono); font-size:9.5px;letter-spacing:.25em;color:var(--leather-500);
  text-transform:uppercase;margin-top:2px }
.nav{ display:flex;gap:34px;justify-content:center; font-size:13.5px;letter-spacing:.04em }
.nav a{ padding:8px 2px; position:relative }
.nav a.active::after,.nav a:hover::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--leather-900) }
.topbar-right{ display:flex;align-items:center;justify-content:flex-end;gap:20px }
.lang-switch{ display:inline-flex; border:1px solid var(--line-strong); font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.15em;
  border-radius:2px;overflow:hidden }
.lang-switch button{ padding:8px 12px; color:var(--leather-800) }
.lang-switch button.active{ background:var(--leather-900); color:var(--cream) }
.wa-btn{ display:inline-flex;align-items:center;gap:10px; padding:10px 16px; font-size:12.5px;letter-spacing:.06em;
  border:1px solid var(--leather-900); border-radius:2px; background:var(--cream) }
.wa-btn:hover{ background:var(--leather-900);color:var(--cream) }

/* ===== PAGE HEADER ===== */
.page-head{ padding:80px 0 60px; border-bottom:1px solid var(--line) }
.page-head .grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:end }
.page-head .num{ font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;color:var(--leather-500);
  text-transform:uppercase;margin-bottom:20px }
.page-head h1{ font-size:clamp(52px,8vw,128px); line-height:.92; letter-spacing:-.025em; font-variation-settings:"opsz" 144 }
.page-head h1 em{ font-style:italic; color:var(--leather-600); font-weight:300 }
.page-head p{ font-size:18px; line-height:1.55; color:var(--leather-800); max-width:54ch; text-wrap:pretty; margin:0 }

/* ===== FOOTER ===== */
footer{ background:#17100C;color:rgba(244,235,220,.55); padding:38px 0; border-top:1px solid rgba(244,235,220,.08) }
footer .container{ display:flex;justify-content:space-between;align-items:center;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; flex-wrap:wrap;gap:16px }

[data-lang-es] .en{ display:none }
[data-lang-en] .es{ display:none }

@media (max-width:980px){
  .topbar-inner{ grid-template-columns:auto auto;gap:12px }
  .nav{ display:none }
  .page-head .grid{ grid-template-columns:1fr; gap:24px }
}