/* =========================================================
   Hierros Guillermo — base.css
   Tokens de marca, tipografía, reset, temas y componentes base.
   Estética: editorial brutalista/suiza · 0px de radio · sin sombras ni degradados.
   Paleta EXACTA del brandBook. Blue Electric solo admite texto grande (ver CLAUDE.md §4).
   ========================================================= */

@font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../assets/fonts/Exo2.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  /* Paleta */
  --carbon: #1E1E1E;
  --blue: #007BFF;
  --titanium: #D1D1D1;
  --raw: #F4F4F4;
  --rust: #B2511B;
  --yellow: #F5A623;
  --steel: #4F4F4F;
  --zinc: #8C8C8C;

  /* Tipografía */
  --f-display: "Clash Display", "Arial Narrow", Arial, sans-serif;
  --f-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Movimiento (tokens compartidos) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 700ms;
  --t-hero: 1000ms;

  /* Espaciado / layout */
  --gutter: 16px;
  --rail-w: 0px;
  --bar-h: 60px;
  --vw-c: calc((100vw - var(--rail-w)) / 100);
  --maxw: 1680px;

  /* z-index */
  --z-raised: 10;
  --z-frame: 40;
  --z-dock: 50;
  --z-sticker: 60;
  --z-menu: 80;
  --z-topbar: 90;
  --z-preview: 95;
  --z-consent: 100;
}
@media (min-width: 768px)  { :root { --gutter: 32px; --bar-h: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --rail-w: 176px; --bar-h: 68px; } }
@media (min-width: 1440px) { :root { --gutter: 56px; } }

/* Temas por sección: tokens semánticos (nada de hex sueltos en componentes) */
.theme-dark     { --bg: var(--carbon);   --fg: var(--raw);    --muted: var(--zinc);  --line: var(--steel); --hi: var(--yellow); --focus: var(--yellow); }
.theme-light    { --bg: var(--raw);      --fg: var(--carbon); --muted: var(--steel); --line: var(--steel); --hi: var(--rust);   --focus: var(--carbon); }
.theme-titanium { --bg: var(--titanium); --fg: var(--carbon); --muted: var(--steel); --line: var(--steel); --hi: var(--carbon); --focus: var(--carbon); }
.theme-blue     { --bg: var(--blue);     --fg: var(--raw);    --muted: var(--raw);   --line: var(--raw);   --hi: var(--carbon); --focus: var(--raw); }

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 8px); overflow-x: clip; }
body { margin: 0; min-height: 100dvh; background: var(--carbon); color: var(--raw); font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--bar-h) + 8px); }

/* Accesibilidad */
:focus-visible { outline: 3px solid var(--focus, var(--yellow)); outline-offset: 3px; }
.skip { position: fixed; left: 8px; top: -80px; z-index: 200; background: var(--yellow); color: var(--carbon); font: 700 1rem var(--f-ui); padding: 14px 20px; text-transform: uppercase; transition: top var(--t-fast); }
.skip:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tipografía */
.h-mega, .h-xl, .h-lg, .h-md { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; }
.h-mega { font-size: clamp(2.6rem, min(calc(var(--vw-c) * 11.2), 13.4vh), 8.6rem); line-height: .88; letter-spacing: -.035em; }
.h-xl   { font-size: clamp(2.35rem, calc(var(--vw-c) * 9.2), 7.2rem); line-height: .9; letter-spacing: -.033em; }
.h-lg   { font-size: clamp(1.9rem, calc(var(--vw-c) * 5.4), 4.2rem); line-height: .95; letter-spacing: -.028em; }
.h-md   { font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1; letter-spacing: -.02em; }
.h-mega, .h-xl, .h-lg, .h-md, .prow__name, .nav__t, .hero__meta strong, .servicio__tags li, .phone { word-spacing: .16em; }
.testi__name { word-spacing: .08em; }
.statement { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.45rem, calc(var(--vw-c) * 2.5), 2.5rem); line-height: 1.12; letter-spacing: -.018em; text-wrap: balance; }
.eyebrow { font: 500 .8125rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .14em; }
.meta    { font: 400 .8125rem/1.45 var(--f-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.lead    { font: 300 clamp(1.25rem, 2.1vw, 1.75rem)/1.35 var(--f-body); text-wrap: pretty; }
.body    { font: 400 1rem/1.62 var(--f-body); max-width: 68ch; text-wrap: pretty; }
.body-sm { font: 400 .9375rem/1.55 var(--f-body); }
.num     { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.hi      { color: var(--hi); }

/* Iconos SVG: un solo set, trazo 1.5, puntas cuadradas */
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.i--lg { width: 2.25rem; height: 2.25rem; stroke-width: 1.4; }

/* Botones (0px). Etiqueta >= 18.66px en 700 = texto grande WCAG → válido sobre Blue Electric */
.btn { --btn-fill: var(--fg); --btn-ink: var(--bg);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 56px; padding: .7rem 1.4rem; border: 1px solid transparent; max-width: 100%;
  font: 700 1.2rem/1.08 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; text-align: center; text-wrap: balance; cursor: pointer;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base) var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn .i { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .i, .btn:focus-visible .i { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: var(--carbon); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--bg); }
.btn--ghost { color: var(--fg); border-color: currentColor; background: transparent; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--bg); border-color: var(--fg); }
.btn--inverse { background: var(--carbon); color: var(--raw); --btn-fill: var(--raw); }
.btn--inverse:hover, .btn--inverse:focus-visible { color: var(--carbon); }
.btn--sm { min-height: 44px; padding: 0 1.1rem; font-size: 1.2rem; white-space: nowrap; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Enlace de texto con flecha */
.link { display: inline-flex; align-items: center; gap: .6em; font: 500 1rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; min-height: 44px; }
.link .i { transition: transform var(--t-base) var(--ease-out); }
.link:hover .i, .link:focus-visible .i { transform: translate(3px, -3px); }

/* Chips (etiquetas pequeñas: siempre sobre fondo con contraste) */
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; font: 500 .75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .12em; background: var(--carbon); color: var(--raw); }
.chip--yellow { background: var(--yellow); color: var(--carbon); }
.chip--raw { background: var(--raw); color: var(--carbon); }

/* Sección base */
.sec { position: relative; background: var(--bg); color: var(--fg); padding: clamp(4.5rem, 11vw, 9rem) 0; padding-left: var(--rail-w); }
.sec__wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: clamp(2rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.sec-head .eyebrow b { font-weight: 500; color: var(--hi); margin-right: .6em; }
.sec-head .meta { text-align: right; }

/* Retícula de 12 columnas */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* Imagen recortada en marco de aspecto fijo (evita CLS) */
.frame { position: relative; overflow: hidden; background: var(--steel); }
.frame picture, .frame img { width: 100%; height: 100%; }
.frame img { object-fit: cover; }
.frame[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); will-change: transform; }

/* Palabras enmascaradas (títulos: JS envuelve cada palabra) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
.js .split .w > span { transform: translate3d(0, 108%, 0); transition: transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.js .split.is-in .w > span { transform: none; }

/* Reveals genéricos */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js .split .w > span { opacity: 1 !important; transform: none !important; }
  .frame[data-parallax] img { transform: scale(1.02) !important; }
}