/* ==========================================================================
   Giovanni Carrada Retouching — retouch.giovannicarrada.net
   CSS vanilla. Sin build step, sin fuentes remotas, sin terceros.

   Todo valor de diseño — color, tipografía, espaciado, radio, borde, medida,
   duración, opacidad, z-index — vive en :root. En el resto del archivo solo
   quedan literales estructurales (0, auto, 100%, 50%, 1fr, none, transparent,
   transformaciones) y los breakpoints de @media, que no admiten variables:
   la especificación evalúa las condiciones de media antes de resolver las
   custom properties. Los breakpoints están listados abajo como referencia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {

  /* --- Color: paleta base -------------------------------------------------
     Dos familias de neutros a propósito.

     --c-ink / --c-surface llevan un matiz cálido leve; son la página.
     --c-frame / --c-frame-line son gris sin matiz; son los únicos colores
     que tocan una fotografía. Nada con tinte se apoya contra la piel, porque
     un entorno cálido desplaza por contraste simultáneo cómo se lee un tono
     de piel — y «your grade comes back untouched» es todo el argumento. */
  --c-ink:            #0E0D0C;
  --c-surface:        #161412;
  --c-hairline:       #2A2624;
  --c-primary:        #EDE8E3;
  --c-text:           #D8D2CC;
  --c-muted:          #9A928A;
  --c-accent:         #C08A52;
  --c-accent-hover:   #D09B62;

  /* --- Color: CTA sólido --------------------------------------------------
     Fuera de la familia del acento a propósito: el rojo es solo del botón
     primario, no del sistema de acento (precios, línea de preservación,
     numerales). El texto va en --c-primary y no en --c-ink porque sobre
     #A30505 el casi-negro da 2.4:1 de contraste — ilegible. El claro da
     6.7:1, y 5.3:1 sobre el estado hover. */
  --c-btn-solid-bg:       #A30505;
  --c-btn-solid-bg-hover: #BE0A0A;
  --c-btn-solid-fg:       var(--c-primary);

  /* El CTA de contorno de la cabecera comparte el rojo, pero solo en el borde
     y en el relleno del hover. El texto va en claro y no en rojo: #A30505
     sobre el fondo de la cabecera da 2.4:1, y un texto de 15px a ese
     contraste no se lee. */
  --c-btn-ghost-border:   var(--c-btn-solid-bg);
  --c-btn-ghost-fg:       var(--c-primary);

  --c-frame:          #141414;
  --c-frame-line:     #262626;

  /* --- Color: canales RGB para las mezclas con alfa -----------------------
     Duplican los hex de arriba porque rgba() no acepta un hex en variable.
     Si cambias un hex, cambia también su terna. */
  --c-ink-rgb:        14, 13, 12;
  --c-primary-rgb:    237, 232, 227;
  --c-accent-rgb:     192, 138, 82;

  /* --- Color: derivados con alfa ----------------------------------------- */
  --c-header-bg:      rgba(var(--c-ink-rgb), .94);
  --c-accent-border:  rgba(var(--c-accent-rgb), .4);
  --c-accent-rule:    rgba(var(--c-accent-rgb), .35);
  --c-split-line:     rgba(var(--c-primary-rgb), .7);
  --c-grip-border:    rgba(var(--c-primary-rgb), .85);
  --c-grip-arrow:     rgba(var(--c-primary-rgb), .9);
  --c-grip-bg:        rgba(var(--c-ink-rgb), .5);

  /* --- Tipografía: familias ----------------------------------------------
     Raleway auto-alojada (ver §1). --font-display y --font-ui apuntan hoy a
     la misma familia; siguen separadas para que cambiar los titulares a otra
     cara sea una línea, no una búsqueda por todo el archivo. */
  --font-fallback:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans:        "Raleway", var(--font-fallback);
  --font-display:     var(--font-sans);
  --font-ui:          var(--font-sans);

  /* --- Tipografía: pesos -------------------------------------------------- */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;

  /* --- Tipografía: tamaños ------------------------------------------------ */
  --fs-h1:            clamp(40px, 6vw, 74px);
  --fs-h2:            clamp(30px, 3.4vw, 44px);
  --fs-h3:            18px;
  --fs-display-md:    clamp(22px, 2.4vw, 28px);
  --fs-display-sm:    clamp(19px, 2.2vw, 24px);
  --fs-card-title:    26px;
  --fs-numeral:       30px;
  --fs-lede:          clamp(17px, 1.5vw, 19px);
  --fs-body:          17px;
  --fs-body-sm:       16px;
  --fs-limit:         16.5px;
  --fs-detail:        15px;
  --fs-meta:          14px;
  --fs-label:         12px;
  --fs-micro:         11px;
  --fs-wordmark:      19px;
  --fs-wordmark-sm:   17px;

  /* --- Tipografía: interlineado ------------------------------------------ */
  --lh-flat:          1;
  --lh-h1:            1.03;
  --lh-h2:            1.1;
  --lh-display:       1.3;
  --lh-lede:          1.6;
  --lh-body:          1.65;
  --lh-copy:          1.68;
  --lh-card:          1.7;
  --lh-list:          1.75;

  /* --- Tipografía: tracking ---------------------------------------------- */
  --ls-h1:            -.02em;
  --ls-h2:            -.01em;
  --ls-wordmark:      .005em;
  --ls-numeral:       .01em;
  --ls-label:         .16em;
  --ls-caps:          .18em;
  --ls-wordmark-gap:  .5em;

  /* --- Espaciado ----------------------------------------------------------
     La escala es el conjunto de valores que el diseño usa de verdad, no una
     progresión ideal. Nombres por magnitud para que ningún ajuste tenga que
     inventarse un peldaño nuevo a mitad de archivo. */
  --space-2:          2px;
  --space-3:          3px;
  --space-4:          4px;
  --space-6:          6px;
  --space-8:          8px;
  --space-10:         10px;
  --space-12:         12px;
  --space-13:         13px;
  --space-14:         14px;
  --space-16:         16px;
  --space-18:         18px;
  --space-20:         20px;
  --space-22:         22px;
  --space-24:         24px;
  --space-26:         26px;
  --space-28:         28px;
  --space-30:         30px;
  --space-32:         32px;
  --space-34:         34px;
  --space-40:         40px;
  --space-44:         44px;
  --space-48:         48px;
  --space-52:         52px;
  --space-56:         56px;
  --space-72:         72px;
  --space-88:         88px;
  --space-96:         96px;
  --space-112:        112px;

  /* --- Layout -------------------------------------------------------------
     --layout-gutter y --layout-rhythm se redefinen en móvil (§0.1). */
  --layout-wrap:          1240px;
  --layout-narrow:        780px;
  --layout-hero-text:     860px;
  --layout-media:         600px;
  --layout-caption-col:   260px;
  --layout-gutter:        var(--space-24);
  --layout-rhythm:        var(--space-112);
  --layout-hero-top:      var(--space-88);
  --layout-sticky-top:    110px;
  --layout-pair-height:   933px;

  /* --- Medidas de línea (ancho de columna en caracteres) ------------------ */
  --measure-lede:     62ch;
  --measure-lede-sm:  58ch;
  --measure-caption:  74ch;
  --measure-limits:   66ch;
  --measure-note:     44ch;
  --measure-list:     54ch;

  /* --- Bordes y radios ---------------------------------------------------- */
  --border-hairline:  1px;
  --border-focus:     2px;
  --offset-focus:     3px;
  --radius-sm:        2px;
  --radius-round:     50%;

  /* --- Comparador --------------------------------------------------------- */
  --cmp-handle-width: var(--space-44);
  --cmp-grip-size:    34px;
  --cmp-arrow-half:   4px;
  --cmp-arrow-length: 5px;
  --cmp-arrow-inset:  var(--space-8);
  --cmp-start:        50%;

  /* --- Movimiento --------------------------------------------------------- */
  --transition-fast:  .15s ease;
  --duration-none:    .01ms;

  /* --- Profundidad -------------------------------------------------------- */
  --z-header:         50;
  --z-skip:           100;

  /* --- Varios ------------------------------------------------------------- */
  --opacity-numeral:  .9;
  --offset-offscreen: -9999px;

  /* --- Breakpoints (referencia; @media no resuelve variables) -------------
     420px   wordmark compacto
     600px   pasos a una columna
     767px   móvil: gutter y ritmo vertical reducidos
     900px   niveles a una columna
     1000px  par a dos columnas (imagen + caption) / pasos a 2×2 por debajo */
}

/* --- 0.1 Ritmo en móvil --------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --layout-gutter:   var(--space-20);
    --layout-rhythm:   var(--space-72);
    --layout-hero-top: var(--space-56);
  }
}

/* --------------------------------------------------------------------------
   1. Tipografía auto-alojada

   Raleway 300/400/500, subconjunto latin + latin-ext, woff2. Descargada del
   repositorio de Google Fonts y procesada en local: el sitio no pide nada a
   fonts.googleapis.com ni a fonts.gstatic.com. Sin peticiones a terceros no
   hay banner de consentimiento que poner, y media clientela objetivo está en
   la UE. Licencia SIL OFL 1.1 en assets/fonts/OFL.txt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: var(--duration-none) !important;
    transition-duration: var(--duration-none) !important;
  }
}

body {
  margin: 0;
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3 { margin: 0; font-weight: var(--fw-regular); color: var(--c-primary); }
p { margin: 0; }

a { color: inherit; }

a:focus-visible,
.cmp__handle:focus-visible {
  outline: var(--border-focus) solid var(--c-accent);
  outline-offset: var(--offset-focus);
}

.skip {
  position: absolute;
  left: var(--offset-offscreen);
  top: 0;
  background: var(--c-accent);
  color: var(--c-ink);
  padding: var(--space-10) var(--space-16);
  z-index: var(--z-skip);
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--layout-wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}
.wrap--narrow { max-width: var(--layout-narrow); }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
/* Fondo sólido, sin desenfoque. Un backdrop-filter en una barra sticky obliga
   al navegador a releer la página compuesta en cada fotograma de scroll, y
   esta página son 26 MB de JPEG a tamaño completo. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-header-bg);
  border-bottom: var(--border-hairline) solid var(--c-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-14);
  padding-bottom: var(--space-14);
}

/* Wordmark tipográfico. Sin símbolo, sin archivo de logotipo. El peso Light
   es el mismo del monograma del favicon. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ls-wordmark-gap);
  text-decoration: none;
  color: var(--c-primary);
  line-height: var(--lh-flat);
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wordmark);
}
.wordmark__role {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
}

@media (max-width: 420px) {
  .wordmark { flex-direction: column; gap: var(--space-3); }
  .wordmark__name { font-size: var(--fs-wordmark-sm); }
}

/* --------------------------------------------------------------------------
   4. Botones y enlaces
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-size: var(--fs-detail);
  line-height: var(--lh-flat);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: var(--space-13) var(--space-22);
  border: var(--border-hairline) solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn--solid {
  background: var(--c-btn-solid-bg);
  color: var(--c-btn-solid-fg);
  font-weight: var(--fw-medium);
}
.btn--solid:hover { background: var(--c-btn-solid-bg-hover); }

.btn--ghost {
  border-color: var(--c-btn-ghost-border);
  color: var(--c-btn-ghost-fg);
  padding: var(--space-10) var(--space-18);
}
.btn--ghost:hover { background: var(--c-btn-solid-bg); color: var(--c-btn-solid-fg); }

.link-quiet {
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: var(--border-hairline) solid transparent;
  padding-bottom: var(--space-2);
  font-size: var(--fs-detail);
}
.link-quiet:hover { color: var(--c-primary); border-bottom-color: var(--c-hairline); }

/* --------------------------------------------------------------------------
   5. Secciones
   -------------------------------------------------------------------------- */
.section {
  padding: var(--layout-rhythm) 0;
  border-top: var(--border-hairline) solid var(--c-hairline);
}
.section--hero { border-top: 0; }
.section--alt { background: var(--c-surface); }

.section h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.section h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
}

.section__head { margin-bottom: var(--space-56); }

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--c-text);
  max-width: var(--measure-lede);
  margin-top: var(--space-22);
}
.lede--sm {
  font-size: var(--fs-body);
  color: var(--c-muted);
  max-width: var(--measure-lede-sm);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.section--hero { padding-top: var(--layout-hero-top); }

.hero__text { max-width: var(--layout-hero-text); }

.hero__text h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-34);
}

/* El crop del hero es un detalle al 100%, no un par del portafolio: imagen
   estática, sin comparador, y con un caption de dos líneas que no usa el
   formato declarativo de la galería. Ancho al de la columna de texto para que
   el borde izquierdo caiga con el del H1. */
.hero-figure {
  margin: var(--space-72) 0 0;
  max-width: var(--layout-hero-text);
}

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-frame);
  border: var(--border-hairline) solid var(--c-frame-line);
}

.hero-figure__caption {
  margin-top: var(--space-18);
  max-width: var(--measure-caption);
  font-size: var(--fs-body-sm);
  color: var(--c-text);
}

.hero-figure__note {
  margin-top: var(--space-8);
  font-size: var(--fs-meta);
  color: var(--c-muted);
}

@media (max-width: 767px) {
  .hero-figure { margin-top: var(--space-48); }
}

/* --------------------------------------------------------------------------
   7. Par: comparador + caption
   -------------------------------------------------------------------------- */
.pair { margin: 0; }

/* Doce pares a tamaño completo son un documento muy alto. content-visibility
   deja que el navegador se salte layout y pintado de los pares fuera de
   pantalla; contain-intrinsic-size mantiene honesta la barra de scroll para
   que nada salte al entrar en vista. El valor es la altura medida de un par
   con la columna de imagen a --layout-media. */
.gallery .pair {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--layout-pair-height);
}

.gallery .pair + .pair { margin-top: var(--space-96); }

@media (min-width: 1000px) {
  .pair {
    display: grid;
    grid-template-columns: minmax(0, var(--layout-media)) minmax(var(--layout-caption-col), 1fr);
    gap: var(--space-48);
    align-items: start;
  }
  .pair .caption { position: sticky; top: var(--layout-sticky-top); }
}

.pair__media { max-width: var(--layout-media); }

/* Etiquetas Before / After encima del marco, nunca sobre la imagen.
   La de la izquierda es la mitad izquierda del comparador; la derecha, la
   derecha. */
.tags {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  margin-bottom: var(--space-10);
}

/* --- el comparador -------------------------------------------------------- */
.cmp {
  --pos: var(--cmp-start);
  position: relative;
  overflow: hidden;
  background: var(--c-frame);
  border: var(--border-hairline) solid var(--c-frame-line);
  line-height: 0;
  -webkit-user-select: none;
  user-select: none;
}

.cmp__base { display: block; width: 100%; height: auto; }

.cmp__overlay {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.cmp__overlay img { display: block; width: 100%; height: auto; }

.cmp__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: var(--cmp-handle-width);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none; /* solo el tirador se traga el gesto — la página sigue haciendo scroll sobre la imagen */
}

.cmp__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--border-hairline);
  margin-left: calc(var(--border-hairline) / -2);
  background: var(--c-split-line);
}

.cmp__grip {
  position: relative;
  width: var(--cmp-grip-size);
  height: var(--cmp-grip-size);
  border-radius: var(--radius-round);
  border: var(--border-hairline) solid var(--c-grip-border);
  background: var(--c-grip-bg);
}

.cmp__grip::before,
.cmp__grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: var(--cmp-arrow-half) solid transparent;
  border-bottom: var(--cmp-arrow-half) solid transparent;
  margin-top: calc(var(--cmp-arrow-half) * -1);
}
.cmp__grip::before {
  left: var(--cmp-arrow-inset);
  border-right: var(--cmp-arrow-length) solid var(--c-grip-arrow);
}
.cmp__grip::after {
  right: var(--cmp-arrow-inset);
  border-left: var(--cmp-arrow-length) solid var(--c-grip-arrow);
}

/* Sin JavaScript la división se queda donde la deja el CSS y se ven las dos
   mitades. */
.no-js .cmp__handle { cursor: default; }

/* --- caption -------------------------------------------------------------- */
.caption { max-width: var(--measure-caption); margin-top: var(--space-18); }

@media (min-width: 1000px) {
  .caption { margin-top: var(--space-26); }
}

.caption p + p { margin-top: var(--space-8); }

.caption__n {
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  margin-bottom: var(--space-16);
}

.caption__ctx  { font-size: var(--fs-detail); color: var(--c-muted); }
.caption__acts { font-size: var(--fs-detail); color: var(--c-text); line-height: var(--lh-body); }
.caption__keep { font-size: var(--fs-detail); color: var(--c-accent); }

/* --------------------------------------------------------------------------
   8. What I don't do
   -------------------------------------------------------------------------- */
.limits { margin-top: var(--space-48); max-width: var(--measure-limits); }

.limit {
  padding-top: var(--space-26);
  border-top: var(--border-hairline) solid var(--c-hairline);
  font-size: var(--fs-limit);
  line-height: var(--lh-copy);
}
.limit + .limit { margin-top: var(--space-26); }
.limit strong {
  display: block;
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   9. Service levels
   -------------------------------------------------------------------------- */
.levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-52);
}

@media (max-width: 900px) {
  .levels { grid-template-columns: 1fr; }
}

.level {
  background: var(--c-surface);
  border: var(--border-hairline) solid var(--c-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-30) var(--space-28);
}
.section--alt .level { background: var(--c-ink); }

/* Standard es el nivel al que aterriza la mayoría de sets. Un borde lo dice;
   una etiqueta «Most popular» lo gritaría. */
.level--mark { border-color: var(--c-accent-border); }

.level h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-light);
}

.level__price {
  font-size: var(--fs-detail);
  color: var(--c-accent);
  margin-top: var(--space-6);
  margin-bottom: var(--space-18);
}

.level__body { font-size: var(--fs-detail); line-height: var(--lh-card); }

.levels__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-48);
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: var(--border-hairline) solid var(--c-hairline);
}

@media (max-width: 900px) {
  .levels__foot { grid-template-columns: 1fr; gap: var(--space-32); }
}

.levels__note {
  font-size: var(--fs-body-sm);
  color: var(--c-muted);
  max-width: var(--measure-note);
}

.turnaround h3 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-10);
}
.turnaround p { font-size: var(--fs-body-sm); line-height: var(--lh-list); }

/* --------------------------------------------------------------------------
   10. How it works
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: var(--space-52) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-40) var(--space-32);
}

@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .steps { grid-template-columns: 1fr; } }

.step__n {
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-numeral);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-numeral);
  color: var(--c-accent);
  opacity: var(--opacity-numeral);
  line-height: var(--lh-flat);
}
.step h3 { margin: var(--space-12) 0 var(--space-8); }
.step p { font-size: var(--fs-detail); line-height: var(--lh-copy); }

/* --------------------------------------------------------------------------
   11. Who
   -------------------------------------------------------------------------- */
#who .wrap--narrow { margin-left: 0; }
#who p { margin-top: var(--space-20); font-size: var(--fs-body); }

/* A la altura de #who a propósito — un `.who__lead` pelado pierde contra
   `#who p`. */
#who .who__lead {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-light);
  color: var(--c-primary);
  line-height: var(--lh-display);
  margin-top: var(--space-26);
}

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */
.section--contact .wrap--narrow { margin-left: 0; }
.section--contact p { margin-top: var(--space-20); }

.section--contact .contact__mail {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-light);
  color: var(--c-primary);
  margin-top: var(--space-26);
}
.contact__mail a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: var(--border-hairline) solid var(--c-accent-rule);
  overflow-wrap: anywhere;
}
.contact__mail a:hover { border-bottom-color: var(--c-accent); }

.contact__list {
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure-list);
}
.contact__list li {
  position: relative;
  padding: var(--space-12) 0 var(--space-12) var(--space-22);
  border-top: var(--border-hairline) solid var(--c-hairline);
  font-size: var(--fs-body-sm);
}
.contact__list li:last-child {
  border-bottom: var(--border-hairline) solid var(--c-hairline);
}
.contact__list li::before {
  content: "·";
  position: absolute;
  left: var(--space-4);
  color: var(--c-accent);
}

.contact__close { color: var(--c-muted); font-size: var(--fs-body-sm); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: var(--border-hairline) solid var(--c-hairline);
  padding: var(--space-40) 0;
  font-size: var(--fs-meta);
  color: var(--c-muted);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.wordmark--footer { margin: 0; }
.site-footer a { color: var(--c-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-primary); }