/* ============================================================
   KEO REFURB — SISTEMA DE DISEÑO
   Reutilizable para toda la web. Tokens + componentes base.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* Paleta */
  --blanco:        #FAF9F7;   /* blanco roto */
  --piedra-claro:  #EFECE6;
  --piedra:        #D8D2C7;
  --piedra-media:  #B3AB9D;
  --piedra-texto:  #8C8576;
  --carbon:        #1A1A1A;   /* negro carbón */
  --carbon-90:     rgba(26,26,26,.90);
  --carbon-soft:   #232220;
  --dorado:        #A59B61;   /* acento corporativo */
  --dorado-claro:  #BCB27E;

  /* Tipografía */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala fluida */
  --fs-eyebrow: clamp(11px, .72vw, 13px);
  --fs-body:    clamp(15px, 1.05vw, 17px);
  --fs-lead:    clamp(19px, 1.7vw, 24px);
  --fs-h3:      clamp(22px, 2.1vw, 30px);
  --fs-h2:      clamp(32px, 4.2vw, 58px);
  --fs-display: clamp(32px, 4vw, 54px);

  /* Espaciado / ritmo */
  --pad-x: clamp(22px, 6vw, 120px);
  --sec-y: clamp(80px, 11vw, 180px);
  --maxw: 1480px;

  /* Acento dinámico (Tweaks puede sobreescribir) */
  --acento: var(--dorado);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--carbon);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html{ overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--acento); color:var(--blanco); }

/* ---------- TIPOGRAFÍA BASE ---------- */
.serif{ font-family:var(--serif); font-weight:500; }
.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--piedra-texto);
}
.eyebrow--gold{ color:var(--acento); }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; }

/* filete dorado reutilizable */
.rule-gold{ width:54px; height:1px; background:var(--acento); border:0; }

/* contenedor */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 2.1em;
  transition:all .45s var(--ease);
  cursor:pointer;
}
.btn--gold{
  border:1px solid var(--acento);
  color:var(--carbon);
  background:transparent;
}
.btn--gold:hover{ background:var(--acento); color:var(--blanco); }
.btn--gold .arr{ transition:transform .45s var(--ease); }
.btn--gold:hover .arr{ transform:translateX(5px); }
.btn--solid{ background:var(--carbon); color:var(--blanco); border:1px solid var(--carbon); }
.btn--solid:hover{ background:var(--acento); border-color:var(--acento); }
.btn--ghost-light{ border:1px solid rgba(250,249,247,.55); color:var(--blanco); }
.btn--ghost-light:hover{ border-color:var(--acento); background:var(--acento); }

/* ---------- REVEAL (fade-in scroll) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}