/* ============================================================
   GARDI ARQUITECTOS — Sistema de Diseño
   Tokens · Tipografía · Componentes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Archivo+Expanded:wght@500;600;700;800;900&family=Jost:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* — Paleta — */
  --tinta:    #141312;   /* tinta / negro arquitectónico */
  --tinta-85: #2A2826;
  --grafito:  #6F6A63;   /* texto secundario */
  --cantera:  #C9C2B6;   /* líneas, bordes, placeholders */
  --cantera-30:#E6E1D8;
  --hueso:    #F3EFE9;   /* fondo principal, papel cálido */
  --blanco:   #FCFAF7;   /* superficies elevadas */
  --barro:    #9C4A2E;   /* acento terracota — uso < 5% */
  --barro-soft:#B86A4C;

  /* — Tipografía — */
  --font-display: 'Archivo Expanded', 'Archivo', sans-serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala (px) — desktop */
  --t-display: clamp(56px, 9vw, 124px);
  --t-d1: clamp(44px, 6vw, 84px);
  --t-h1: clamp(36px, 4.4vw, 60px);
  --t-h2: clamp(28px, 3vw, 42px);
  --t-h3: 28px;
  --t-h4: 22px;
  --t-body-l: 20px;
  --t-body: 17px;
  --t-body-s: 15px;
  --t-cap: 13px;
  --t-over: 12px;

  /* Spacing (8px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* Radios — arquitectura = filo recto */
  --r-0: 0px; --r-sm: 2px; --r-md: 4px;

  /* Bordes */
  --line: 1px solid var(--cantera);
  --line-ink: 1.5px solid var(--tinta);

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 80px);

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

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--hueso); color:var(--tinta);
  font-family:var(--font-sans); font-size:var(--t-body); line-height:1.55;
  font-weight:400; letter-spacing:.005em;
}
::selection{ background:var(--tinta); color:var(--hueso); }

/* — Type primitives — */
.display{ font-family:var(--font-display); font-weight:800; font-size:var(--t-display);
  line-height:.92; letter-spacing:-.01em; text-transform:uppercase; }
.d1{ font-family:var(--font-display); font-weight:700; font-size:var(--t-d1);
  line-height:.98; letter-spacing:-.01em; }
h1,.h1{ font-family:var(--font-sans); font-weight:700; font-size:var(--t-h1);
  line-height:1.02; letter-spacing:-.018em; margin:0; }
h2,.h2{ font-family:var(--font-sans); font-weight:600; font-size:var(--t-h2);
  line-height:1.08; letter-spacing:-.014em; margin:0; }
h3,.h3{ font-family:var(--font-sans); font-weight:600; font-size:var(--t-h3);
  line-height:1.15; letter-spacing:-.01em; margin:0; }
h4,.h4{ font-weight:600; font-size:var(--t-h4); line-height:1.25; margin:0; }
p{ margin:0 0 1em; max-width:62ch; text-wrap:pretty; }
.lead{ font-size:var(--t-body-l); line-height:1.5; color:var(--tinta-85); font-weight:400; }
.muted{ color:var(--grafito); }
a{ color:inherit; text-decoration:none; }

/* — Mono labels / overline — */
.mono{ font-family:var(--font-mono); font-size:var(--t-cap); letter-spacing:.02em; }
.over{ font-family:var(--font-mono); font-size:var(--t-over); text-transform:uppercase;
  letter-spacing:.22em; color:var(--grafito); font-weight:500; }
.idx{ font-family:var(--font-mono); font-size:var(--t-cap); color:var(--barro); font-weight:500; }

/* — Layout helpers — */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(64px, 9vw, 150px); }
.rule{ height:1px; background:var(--cantera); border:0; margin:0; }
.eyebrow{ display:flex; align-items:center; gap:var(--s-3); }
.eyebrow::before{ content:""; width:34px; height:1.5px; background:var(--barro); display:inline-block; }

/* — Buttons — */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  padding:15px 26px; border-radius:var(--r-0); border:1.5px solid var(--tinta);
  cursor:pointer; transition:.35s var(--ease); background:var(--tinta); color:var(--hueso); }
.btn:hover{ background:transparent; color:var(--tinta); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--ghost{ background:transparent; color:var(--tinta); }
.btn--ghost:hover{ background:var(--tinta); color:var(--hueso); }
.btn--light{ border-color:var(--hueso); background:var(--hueso); color:var(--tinta); }
.btn--light:hover{ background:transparent; color:var(--hueso); }

/* — Inline link w/ arrow — */
.link{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  border-bottom:1.5px solid var(--tinta); padding-bottom:4px; transition:.3s var(--ease); }
.link .arr{ transition:transform .3s var(--ease); }
.link:hover{ color:var(--barro); border-color:var(--barro); }
.link:hover .arr{ transform:translate(3px,-3px); }

/* — Tag / chip — */
.tag{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grafito);
  border:1px solid var(--cantera); padding:6px 11px; border-radius:var(--r-0); }
.tag--ink{ border-color:var(--tinta); color:var(--tinta); }

/* — Image frame / placeholder — */
.frame{ position:relative; overflow:hidden; background:
  repeating-linear-gradient(135deg, #E9E4DB 0 11px, #E3DDD2 11px 22px);
  border:1px solid var(--cantera); display:flex; align-items:center; justify-content:center; }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame .ph{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#A39C8E; padding:10px 14px; border:1px solid #C9C2B6; background:rgba(243,239,233,.6); text-align:center; }

/* — Dark section — */
.ink{ background:var(--tinta); color:var(--hueso); }
.ink .muted{ color:#9D988F; }
.ink .over{ color:#9D988F; }
.ink .rule{ background:#332F2B; }
.ink .frame{ background:repeating-linear-gradient(135deg,#222 0 11px,#1c1b19 11px 22px); border-color:#332F2B; }
.ink .frame .ph{ color:#7C766C; border-color:#3a352f; background:rgba(20,19,18,.5); }

/* — Header / nav — */
.nav{ position:sticky; top:0; z-index:50; background:rgba(243,239,233,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--cantera); }
.nav__in{ display:flex; align-items:center; justify-content:space-between;
  height:74px; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.nav__logo{ height:30px; }
.nav__links{ display:flex; gap:var(--s-6); align-items:center; }
.nav__links a{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta); position:relative; padding:4px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--barro); transition:width .3s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-active::after{ width:100%; }

/* — Footer — */
.foot{ background:var(--tinta); color:var(--hueso); padding-block:var(--s-9) var(--s-6); }
.foot a{ color:#C9C2B6; transition:.25s; }
.foot a:hover{ color:var(--hueso); }

/* — Reveal animation — */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  [data-reveal].in{ opacity:1; transform:none; }
}

/* — Utility — */
.grid{ display:grid; gap:var(--s-6); }
.flex{ display:flex; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); }
img{ max-width:100%; }