/* ── Variables ── */
:root{
  --ink:#292925;
  --ink-soft:#3a3a34;
  --ink-mute:#6f6f66;
  --paper:#f1ece4;
  --paper-2:#e8e1d4;
  --paper-3:#ddd4c2;
  --line:rgba(41,41,37,.18);
  --line-soft:rgba(41,41,37,.10);
  --display:"Raleway",-apple-system,system-ui,sans-serif;
  --sans:"Raleway",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Reveal on scroll ── */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ── Layout ── */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}

/* ── Botones ── */
.btn{
  font-size:13px;letter-spacing:.04em;padding:13px 22px;border-radius:0;font-weight:500;
  display:inline-flex;align-items:center;gap:10px;transition:all .25s;cursor:pointer;border:1px solid var(--ink);
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn svg{width:14px;height:14px}

/* ── Top band ── */
.topband{
  background:var(--ink);color:var(--paper);
  padding:0 32px;height:38px;
  display:flex;align-items:center;
}
.topband-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1240px;margin:0 auto}
.topband-social{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.topband-social a{color:rgba(243,237,226,.65);transition:color .2s;display:flex;align-items:center;gap:6px}
.topband-social a:hover{color:var(--paper)}
.topband-social a svg{width:13px;height:13px;flex-shrink:0}
.topband-sep{color:rgba(243,237,226,.25);font-size:14px;font-weight:200}
.topband-seguinos{color:rgba(243,237,226,.4);font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.topband-cta{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,237,226,.65);display:flex;align-items:center;gap:6px;
  transition:color .2s;white-space:nowrap;
}
.topband-cta:hover{color:var(--paper)}
.topband-cta svg{width:11px;height:11px}
@media(max-width:640px){
  .topband{padding:0 18px;height:34px}
  .topband-seguinos{display:none}
  .topband-cta span{display:none}
}

/* ── Nav ── */
nav.top{
  position:sticky;top:0;z-index:50;background:rgba(243,237,226,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
nav.top.is-hidden{transform:translateY(-100%)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;padding:18px 32px}
.logo{display:flex;align-items:center;gap:11px}
.logo .iso{height:30px;width:auto;display:block}
.logo .word{height:18px;width:auto;display:block}
nav.top ul{display:flex;gap:34px;list-style:none}
nav.top a{font-size:13px;letter-spacing:.06em;color:var(--ink-soft);transition:opacity .2s,color .2s}
nav.top a:hover{opacity:.6}
nav.top a.is-active{color:var(--ink);position:relative}
nav.top a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink)}
.navwa{
  border:1px solid var(--ink);padding:9px 16px;border-radius:999px;font-size:12px;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s;
}
.navwa:hover{background:var(--ink);color:var(--paper)}
.navwa.is-active::after{display:none}
.nav-toggle{
  display:none;width:38px;height:38px;border:1px solid var(--ink);background:transparent;cursor:pointer;
  padding:0;align-items:center;justify-content:center;border-radius:999px;
}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:transform .25s,opacity .15s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .25s}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
body.menu-open{overflow:hidden}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:translateY(5px) rotate(45deg)}
body.menu-open .nav-toggle span::after{transform:translateY(-5px) rotate(-45deg)}
.nav-mobile{
  position:fixed;inset:0;background:var(--paper);z-index:45;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 32px;gap:28px;
  opacity:0;pointer-events:none;transform:translateY(-12px);
  transition:opacity .3s ease,transform .3s ease;
}
body.menu-open .nav-mobile{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-mobile a{
  font-family:var(--display);font-weight:300;font-size:clamp(28px,5vw,40px);
  color:var(--ink);letter-spacing:-.02em;line-height:1.1;
}
.nav-mobile .mob-foot{
  margin-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);
  display:flex;flex-direction:column;gap:8px;
}
@media(max-width:880px){
  nav.top ul{display:none}
  nav.top .row{padding:14px 22px}
  .navwa{display:none}
  .nav-toggle{display:inline-flex}
}

/* ── Footer ── */
footer{background:var(--ink);color:var(--paper);padding:80px 0 30px;border-top:none}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(243,237,226,.55);margin-bottom:22px;font-weight:400}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:rgba(243,237,226,.7)}
footer .brand-foot .logoimg{height:26px;margin-bottom:18px;filter:invert(1) brightness(1.05)}
footer .brand-foot p{font-family:var(--display);font-weight:300;font-size:16px;line-height:1.55;color:rgba(243,237,226,.9);max-width:32ch;letter-spacing:-.005em}
footer ul li,footer ul a{color:rgba(243,237,226,.6)}
footer a:hover{color:rgba(243,237,226,.9)!important}
footer .seo{
  border-top:1px solid rgba(243,237,226,.18);padding-top:28px;padding-bottom:8px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,237,226,.45);
  padding-right:160px;
}
@media(max-width:520px){footer .seo{padding-right:70px}}
footer .seo p{max-width:62ch;line-height:1.7;text-transform:none;letter-spacing:.06em;font-size:11px;color:rgba(243,237,226,.4)}
.site-by-link{color:rgba(243,237,226,.45);text-decoration:none;transition:color .3s ease}
.site-by-link:hover{color:rgba(243,237,226,.9)}
.by-prefix{
  display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;
  vertical-align:bottom;opacity:0;
  transition:max-width .35s ease,opacity .25s ease;
}
.site-by-link:hover .by-prefix{max-width:110px;opacity:1}
@media(max-width:880px){footer .grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){
  footer{padding:60px 0 24px}
  footer .grid{grid-template-columns:1fr;gap:30px;margin-bottom:42px}
  footer h4{font-size:10px;letter-spacing:.24em;margin-bottom:14px}
  footer ul{gap:7px}
  footer ul li,footer ul a{font-size:13px;line-height:1.45}
  footer .brand-foot p{font-size:14px;line-height:1.5}
  footer .brand-foot .logoimg{height:22px}
  footer .seo{padding-top:20px;font-size:9px;letter-spacing:.2em;gap:10px}
}

/* ── Floating WhatsApp ── */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:60;
  background:var(--ink);color:var(--paper);
  border-radius:999px;padding:13px 20px;
  display:flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.06em;
  box-shadow:0 10px 30px rgba(41,41,37,.18);
  transition:transform .2s,background .35s ease,color .35s ease,box-shadow .35s ease;
}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:16px;height:16px}
@media(max-width:520px){.fab span{display:none}.fab{padding:14px}}
.fab-light{background:var(--paper);color:var(--ink);box-shadow:0 10px 30px rgba(41,41,37,.14)}
.fab-light:hover{background:var(--paper-2)}
