/* =========================================================
   Le Corch · base
   Reset mínimo + tipografía + container + utilities tipográficas.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Body en tinta para que las transiciones entre secciones queden limpias.
     Las secciones que necesitan fondo arena (portfolio, about, quote) lo
     declaran ellas mismas. Esto evita las "franjas arena" entre secciones tinta. */
  background: var(--color-tinta);
  color: var(--color-tinta);
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: var(--fs-body);
  line-height: var(--altura-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }

::selection { background: var(--color-tinta); color: var(--color-bg); }

:focus-visible {
  outline: 2px solid var(--color-marina);
  outline-offset: 3px;
}

/* =========================================================
   Tipografía · clases utility
   ========================================================= */
.display-xl { font-family: var(--font-display); font-weight: var(--peso-thin); font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.025em; }
.display-l  { font-family: var(--font-display); font-weight: var(--peso-thin); font-size: var(--fs-h1);      line-height: 1.0;  letter-spacing: -0.022em; }
.display-m  { font-family: var(--font-display); font-weight: var(--peso-thin); font-size: var(--fs-h2);      line-height: 1.05; letter-spacing: -0.018em; }
.display-s  { font-family: var(--font-display); font-weight: var(--peso-light); font-size: var(--fs-h3);     line-height: 1.15; letter-spacing: -0.012em; }

.lead  { font-family: var(--font-body); font-weight: var(--peso-light); font-size: var(--fs-lead); line-height: 1.55; color: var(--color-tinta); max-width: 60ch; }
.body  { font-family: var(--font-body); font-weight: var(--peso-light); font-size: var(--fs-body); line-height: 1.7;  color: var(--color-tinta); max-width: 65ch; }
.small { font-family: var(--font-body); font-weight: var(--peso-reg);   font-size: var(--fs-small); line-height: 1.55; color: var(--color-tinta); }

.eyebrow {
  /* Estándar Premium 512 principio 9 · escala media · 12px desktop+mobile */
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-tinta);
  display: inline-block;
}
.eyebrow--accent  { color: var(--color-firma); }
.eyebrow--on-dark { color: var(--color-foam); }

.accent        { color: var(--color-firma); }
.accent-italic { color: var(--color-firma); font-weight: var(--peso-thin); font-style: italic; }

/* =========================================================
   Layout · container + wide-bleed
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--sp-lateral);
}

.wide-bleed {
  width: 100%;
  padding-inline: clamp(20px, 4vw, 80px);
}

.section { padding-block: var(--sp-section-y); }
.section--soft { background: var(--color-bg-soft); }
.section--dark { background: var(--color-tinta); color: var(--color-bg); }
.section--dark .eyebrow { color: var(--color-bg); }
.section--dark .lead, .section--dark .body { color: var(--color-bg); }