/* fabianchacon.com — site stylesheet, amber direction
   Warm black, honey amber, editorial italics, soft components. Approved by
   Fabián on 2026-10-26 from diseno/direccion-ambar/. Every text pair below was
   contrast-checked; the ratio is noted next to each token.

   Token names stay in Spanish on purpose: they are brand vocabulary. Everything
   else is English. */

/* ---------- fonts: variable, latin subset, self-hosted (SIL OFL) ---------- */

/* Fraunces is instanced to opsz 24–72, wght 400–600 and SOFT 50: the only
   ranges the design uses. That took both files from 270 KB to 115 KB. */
@font-face {
  font-family: "Fraunces";
  src: url("fuentes/fraunces.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fuentes/fraunces-italica.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fuentes/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fuentes/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --noche: #14110D;        /* page */
  --noche-alt: #1D1813;    /* raised surfaces: the sheet, cards */
  --linea: #3B3229;        /* hairlines, decorative only (1.40:1) */
  --borde-campo: #7D6E5E;  /* control boundaries: 3.58:1 on --noche-alt, 3.82:1 on --noche */
  --crema: #F2EADC;        /* 15.75:1 on --noche, 14.74:1 on --noche-alt */
  --crema-mute: #B2A48F;   /*  7.71:1 on --noche,  7.21:1 on --noche-alt */
  --ambar: #E8A23A;        /*  8.66:1 on --noche; --noche on it 8.66:1 */
  --ambar-hondo: #C9852A;  /* hover fill; --noche on it 6.16:1 */

  --serif: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --margen: clamp(1.25rem, 5vw, 6rem);
  --ancho: 1320px;
  --hueco-seccion: clamp(4.5rem, 9vw, 8rem);
  --radio: 14px;
  --radio-control: 10px;
  --radio-pildora: 999px;
  --sombra: 0 24px 48px -24px rgba(0, 0, 0, 0.7);

  --p-cuerpo: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --p-guia: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --p-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --p-h2: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --p-h1: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);

  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, fieldset, legend, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; scrollbar-color: var(--linea) var(--noche); }
/* Column flex so the footer sits at the bottom of short pages (/gracias/). */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--noche);
  color: var(--crema);
  font-family: var(--sans);
  font-size: var(--p-cuerpo);
  line-height: 1.6;
  caret-color: var(--ambar);
}
::selection { background: var(--ambar); color: var(--noche); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

/* Graph paper: the ground of someone who measures before deciding. Faint,
   and faded toward the edges so it never competes with the text. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(242, 234, 220, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 234, 220, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 30%, transparent 85%);
}

main { flex: 1; }

/* ---------- type roles ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--p-h1); font-variation-settings: "opsz" 72; line-height: 1.08; letter-spacing: -0.012em; }
h2 { font-size: var(--p-h2); font-variation-settings: "opsz" 72; line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--p-h3); font-variation-settings: "opsz" 48; line-height: 1.2; letter-spacing: -0.005em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--ambar); }

.guia { font-size: var(--p-guia); line-height: 1.5; color: var(--crema-mute); max-width: 44ch; }
.prosa { max-width: 68ch; }
.cifra { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; }

/* Inline icons are drawn, one stroke weight everywhere. */
.icono { width: 1.125em; height: 1.125em; flex: none; transition: transform 200ms var(--salida); }

/* ---------- layout skeleton ---------- */

.seccion {
  padding: var(--hueco-seccion) var(--margen);
  border-top: 1px solid var(--linea);
}
.seccion > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.seccion__cab { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- buttons and links ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 52px;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--ambar);
  border-radius: var(--radio-control);
  background: var(--ambar);
  color: var(--noche);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--salida), border-color 160ms var(--salida), color 160ms var(--salida), transform 160ms var(--salida);
}
.boton:hover { background: var(--ambar-hondo); border-color: var(--ambar-hondo); }
.boton:hover .icono { transform: translateX(3px); }
.boton:active { transform: translateY(1px); }
.boton--linea { background: none; color: var(--ambar); }
.boton--linea:hover { background: var(--ambar); border-color: var(--ambar); color: var(--noche); }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ambar);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(232, 162, 58, 0.45);
  transition: text-decoration-color 160ms var(--salida);
}
.enlace:hover { text-decoration-color: currentColor; }
.enlace:hover .icono { transform: translateX(3px); }

/* ---------- header and footer ---------- */

.tope {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem var(--margen);
  border-bottom: 1px solid var(--linea);
}
/* The brand lockup (FbC monogram + logotype) from Fabián's own marks, with
   the original lilac dot recolored to amber and the letters to cream. */
.marca-logo { display: inline-flex; flex: none; }
.marca-logo img { display: block; height: 34px; width: auto; }
/* Under 480px the header shows only the FbC monogram, so the menu fits on one
   line; the footer keeps the full lockup. */
.marca-logo picture { display: contents; }
.marca-logo--pie img { height: 28px; }
@media (max-width: 420px) { .tope .marca-logo img { height: 28px; } }
.tope nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); font-size: 0.9375rem; }
.tope nav a { text-decoration: none; color: var(--crema-mute); transition: color 160ms var(--salida); }
.tope nav a:hover, .tope nav a[aria-current] { color: var(--crema); }
.tope .boton { min-height: 0; padding: 0.5rem 1.125rem; border-radius: var(--radio-pildora); font-weight: 600; font-size: 0.9375rem; }
.tope nav .boton { color: var(--ambar); }
.tope nav .boton:hover { color: var(--noche); }
@media (max-width: 640px) { .tope nav .secundario { display: none; } }

.pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4rem) var(--margen) 2rem;
  border-top: 1px solid var(--linea);
  color: var(--crema-mute);
  font-size: 0.9375rem;
}
@media (max-width: 700px) { .pie { grid-template-columns: minmax(0, 1fr); } }
.pie__marca { display: grid; gap: 1rem; max-width: 36ch; }
.pie__marca p { line-height: 1.55; }
.pie ul { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.pie a { text-decoration: none; transition: color 160ms var(--salida); }
.pie nav a:hover, .pie__legal a:hover { color: var(--crema); }
.pie__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: 0.875rem; }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 7rem) var(--margen) clamp(4rem, 9vw, 8rem);
}
@media (max-width: 1000px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { max-width: 14ch; }
/* The thesis turns on one word. It gets the italic and the amber, and the
   site's one authored motion: a hand-drawn stroke that lands under it. */
.hero h1 em { position: relative; white-space: nowrap; }
.hero h1 em svg {
  position: absolute;
  left: -0.04em;
  bottom: -0.02em;
  width: calc(100% + 0.08em);
  height: 0.2em;
  overflow: visible;
}
.hero h1 em path { fill: none; stroke: var(--ambar); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 em path { stroke-dashoffset: 1; animation: trazo 900ms var(--salida) 450ms forwards; }
  @keyframes trazo { to { stroke-dashoffset: 0; } }
}

.hero__bajada { margin-top: 2rem; max-width: 40ch; }
.hero__autor { margin-top: 2.5rem; display: flex; align-items: center; gap: 0.875rem; font-size: 0.9375rem; color: var(--crema-mute); }
.hero__autor b { color: var(--crema); font-weight: 600; }
.hero__autor img { width: 48px; height: 48px; border-radius: 50%; flex: none; border: 2px solid var(--ambar); }

/* ---------- the intake sheet: the signature element ---------- */

.ficha {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--noche-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* Depth with offset and blur: it sits on the desk, it is not stamped on it. */
  box-shadow: var(--sombra), 0 2px 0 rgba(242, 234, 220, 0.03) inset;
}
.ficha__cab h2 { font-size: 1.625rem; font-variation-settings: "opsz" 48; line-height: 1.2; }
.ficha__cab p { margin-top: 0.5rem; color: var(--crema-mute); }

.campo { border: 0; display: grid; gap: 0.75rem; }
.campo legend { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem; }
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The radio stays in the accessibility tree and stays focusable: it is moved
   out of sight, never removed with display:none. */
.opcion input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.opcion span {
  display: block;
  cursor: pointer;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-pildora);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: background 160ms var(--salida), border-color 160ms var(--salida), color 160ms var(--salida);
}
.opcion:hover span { border-color: var(--crema-mute); }
.opcion input:checked + span { background: var(--ambar); border-color: var(--ambar); color: var(--noche); font-weight: 600; }
.opcion input:focus-visible + span { outline: 2px solid var(--ambar); outline-offset: 3px; }

.contacto { display: grid; gap: 0.5rem; }
.contacto label { font-size: 0.9375rem; font-weight: 600; }
.contacto input {
  min-height: 52px;
  padding: 0.875rem 1rem;
  background: var(--noche);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-control);
  font-size: 1rem;
}
.contacto input::placeholder { color: var(--crema-mute); opacity: 1; }
.contacto input:focus { border-color: var(--ambar); outline: none; box-shadow: 0 0 0 3px rgba(232, 162, 58, 0.25); }
/* Error state adds no new hue: an amber edge and the message in cream. */
.contacto input[aria-invalid="true"] { border-color: var(--ambar); }
.aviso { font-size: 0.9375rem; }

.ficha .boton { width: 100%; }
.ficha__aviso { font-size: 0.8125rem; line-height: 1.5; color: var(--crema-mute); }
.ficha__aviso a { color: var(--crema); text-underline-offset: 3px; text-decoration-color: var(--borde-campo); }
.trampa { position: absolute; left: -9999px; }

/* ---------- what I do ---------- */

/* Three areas as editorial rows, not three equal cards. Strategy comes first
   and is the only one on a raised surface: the surface does the hierarchy. */
.areas { display: grid; }
.area {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--linea);
}
.area:last-child { border-bottom: 1px solid var(--linea); }
.area--primera {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--noche-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.area--primera + .area { border-top: 0; }
.area__para { margin-top: 0.75rem; color: var(--crema-mute); max-width: 34ch; }
.area ul { display: grid; gap: 0.75rem; align-content: start; }
.area li { position: relative; padding-left: 1.5rem; }
.area li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75rem; height: 1px; background: var(--ambar); }
.area .enlace { margin-top: 1.25rem; }
@media (max-width: 860px) { .area { grid-template-columns: minmax(0, 1fr); } }

/* ---------- how I work ---------- */

/* The numbers stay: the order of the four steps is the information. */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
@media (min-width: 1000px) {
  .pasos::before { content: ""; position: absolute; left: 0; right: 0; top: 0.65rem; height: 1px; background: var(--linea); }
}
@media (max-width: 999px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pasos { grid-template-columns: minmax(0, 1fr); } }
.paso { display: grid; gap: 0.75rem; align-content: start; position: relative; }
.paso .cifra {
  justify-self: start;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-pildora);
  background: var(--noche);
  color: var(--ambar);
}
.paso:last-child .cifra { background: var(--ambar); border-color: var(--ambar); color: var(--noche); }
.paso p { color: var(--crema-mute); font-size: 1.0625rem; line-height: 1.55; }

/* ---------- close ---------- */

.cierre { display: grid; gap: 1.75rem; justify-items: start; }
.cierre h2 { max-width: 20ch; }
.cierre .guia { max-width: 52ch; }

/* ---------- figures band ---------- */

/* Three facts anyone can check: big round figure, a few words each, and one
   thing that is only his (the method). */
.franja { padding: 0 var(--margen); }
.franja ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--linea);
  color: var(--crema-mute);
  font-size: 0.9375rem;
  line-height: 1.45;
}
@media (max-width: 760px) { .franja ul { grid-template-columns: minmax(0, 1fr); } }
.franja__cifra { display: block; margin-bottom: 0.5rem; color: var(--ambar); font-family: var(--serif); font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); font-variation-settings: "opsz" 72; line-height: 1; letter-spacing: -0.01em; }

/* ---------- signals ---------- */

/* Rows to read, not cards to compare: a hairline above each one. */
.senales { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.senal { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.senal h3 { font-size: 1.375rem; font-variation-settings: "opsz" 36; line-height: 1.25; }
.senal p { color: var(--crema-mute); font-size: 1rem; line-height: 1.55; }
.senal .enlace { margin-top: auto; padding-top: 0.25rem; font-size: 0.9375rem; }

/* ---------- cost calculator ---------- */

.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc__texto { display: grid; gap: 1rem; }
.calc__hoja {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--noche-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.calc__controles { display: grid; gap: 1.25rem; }
.calc__controles[hidden], .calc__ejemplo[hidden] { display: none; }
.calc__campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: baseline; font-size: 1rem; line-height: 1.4; }
.calc__campo output { color: var(--ambar); font-weight: 700; white-space: nowrap; }
/* Drawn sliders: a big thumb that asks to be moved and an amber trail for the
   part already covered. The script sets --pct; without it the track is plain. */
.calc__campo input { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.calc__campo input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radio-pildora); background: linear-gradient(to right, var(--ambar) var(--pct, 0%), var(--linea) var(--pct, 0%)); }
.calc__campo input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--noche); border: 3px solid var(--ambar); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.8); transition: transform 160ms var(--salida); }
.calc__campo input::-moz-range-track { height: 6px; border-radius: var(--radio-pildora); background: var(--linea); }
.calc__campo input::-moz-range-progress { height: 6px; border-radius: var(--radio-pildora); background: var(--ambar); }
.calc__campo input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--noche); border: 3px solid var(--ambar); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.8); transition: transform 160ms var(--salida); }
.calc__campo input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.calc__campo input:active::-webkit-slider-thumb { transform: scale(1.2); }
.calc__campo input:hover::-moz-range-thumb { transform: scale(1.12); }
.calc__campo input:active::-moz-range-thumb { transform: scale(1.2); }
.calc__campo input:focus-visible { outline: none; }
.calc__campo input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ambar); outline-offset: 3px; }
.calc__campo input:focus-visible::-moz-range-thumb { outline: 2px solid var(--ambar); outline-offset: 3px; }
.calc__ejemplo { color: var(--crema-mute); }
.calc__resultado { display: grid; gap: 0.625rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.calc__total { color: var(--crema-mute); font-size: 1rem; }
.calc__cifra { display: block; color: var(--ambar); font-family: var(--serif); font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); font-variation-settings: "opsz" 72; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.calc__equivale { color: var(--crema-mute); font-size: 0.9375rem; line-height: 1.5; }
.calc__equivale b { color: var(--crema); font-weight: 600; }
.calc__nota { font-size: 0.8125rem; line-height: 1.5; color: var(--crema-mute); }
.calc .boton { justify-self: start; }

/* ---------- featured work ---------- */

.trabajo__todo { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- usual ranges ---------- */

.rangos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 860px) { .rangos { grid-template-columns: minmax(0, 1fr); } }
.rangos li { padding-top: 1.5rem; border-top: 1px solid var(--linea); color: var(--crema-mute); line-height: 1.55; }
.rangos__cifra { display: block; margin-bottom: 0.5rem; color: var(--crema); font-family: var(--serif); font-size: 1.75rem; font-variation-settings: "opsz" 48; line-height: 1.15; }
.rangos__nota { margin-top: clamp(1.5rem, 3vw, 2rem); color: var(--crema-mute); font-size: 0.875rem; }

/* ---------- fit filter ---------- */

/* The «yes» side gets the raised surface; the «no» side stays on the page. */
.encaje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 760px) { .encaje { grid-template-columns: minmax(0, 1fr); } }
.encaje__lado { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--linea); border-radius: var(--radio); }
.encaje__lado--si { background: var(--noche-alt); box-shadow: var(--sombra); }
.encaje h3 { font-size: 1.5rem; font-variation-settings: "opsz" 36; }
.encaje ul { display: grid; gap: 0.75rem; }
.encaje li { position: relative; padding-left: 1.5rem; color: var(--crema-mute); line-height: 1.55; }
.encaje li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75rem; height: 1px; background: var(--borde-campo); }
.encaje__lado--si li { color: var(--crema); }
.encaje__lado--si li::before { background: var(--ambar); }

/* ---------- about ---------- */

.quien { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .quien { grid-template-columns: minmax(0, 1fr); } }
.quien__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); }
@media (max-width: 860px) { .quien__foto { max-width: 420px; } }
.quien__texto { display: grid; gap: 1.25rem; max-width: 56ch; }
.quien__texto p { color: var(--crema-mute); }

/* ---------- way in ---------- */

.entrada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: entrada; width: 100%; }
@media (max-width: 860px) { .entrada { grid-template-columns: minmax(0, 1fr); } }
.entrada li { counter-increment: entrada; display: grid; gap: 0.5rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.entrada li::before { content: counter(entrada); color: var(--ambar); font-family: var(--mono); font-size: 0.875rem; }
.entrada h3 { font-size: 1.375rem; font-variation-settings: "opsz" 36; }
.entrada p { color: var(--crema-mute); font-size: 1rem; line-height: 1.55; }

/* ---------- work cards: /portafolio ---------- */

/* Nine projects in three equal columns: 3×3, no spanning, no hole. Each card
   is one link to its project page; the live link lives there, not here. */
.obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 1099px) { .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .obras { grid-template-columns: minmax(0, 1fr); } }
.obra {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--noche-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-decoration: none;
  transition: border-color 160ms var(--salida), transform 160ms var(--salida);
}
.obra:hover { border-color: var(--borde-campo); }
.obra:active { transform: translateY(1px); }
.obra:focus-visible { border-radius: var(--radio); }
.obra__marco { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--linea); background: var(--noche); }
.obra__marco img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.obra__datos { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.obra__tipo { color: var(--crema-mute); font-size: 0.875rem; }
.obra__nombre { font-size: var(--p-h3); }
.obra__ver { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; color: var(--ambar); font-weight: 600; font-size: 0.9375rem; }
.obra:hover .obra__ver .icono { transform: translateX(3px); }

/* ---------- project page: /portafolio/<proyecto>/ ---------- */

/* The capture is the page. A narrow column carries the facts and the way out
   to the site and stays in view while the visitor scrolls the whole capture. */
.proyecto { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (max-width: 959px) { .proyecto { grid-template-columns: minmax(0, 1fr); } }
.proyecto__ficha { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 959px) { .proyecto__ficha { position: static; } }
.proyecto__volver { align-self: start; margin-bottom: 0.75rem; font-size: 0.9375rem; }
.proyecto__volver:hover .icono { transform: translateX(-3px); }
.proyecto__tipo { color: var(--crema-mute); font-size: 0.9375rem; }
.proyecto h1 { font-size: var(--p-h2); }
.proyecto__ficha > p:not([class]) { color: var(--crema-mute); line-height: 1.55; }
.proyecto__credito { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--crema-mute); font-size: 0.875rem; }
.proyecto__credito::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--borde-campo); }
.proyecto__ficha .boton { align-self: start; margin-top: 0.75rem; }

/* A browser frame with the address in it: the capture reads as a site, not
   as an image. No traffic-light dots; the address is the part that informs. */
.navegador { overflow: hidden; background: var(--noche-alt); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.navegador__barra { display: flex; padding: 0.75rem; border-bottom: 1px solid var(--linea); }
.navegador__url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.375rem 1rem;
  border-radius: var(--radio-pildora);
  background: var(--noche);
  color: var(--crema-mute);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.navegador__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navegador__url .icono { width: 0.875rem; height: 0.875rem; }
.navegador img { width: 100%; }

/* Several pages of one project: thumbnails choose which one the frame shows.
   Radios, not script, so it works with no JS. Without :has() every page is
   simply shown, one after the other. */
.galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.galeria__opciones { display: flex; flex-wrap: wrap; gap: 0.875rem; min-width: 0; min-inline-size: 0; border: 0; }
/* On phones the thumbnails become one strip that slides sideways, so a long
   gallery never pushes the capture below the fold. The cut-off thumbnail at
   the edge says there is more. */
@media (max-width: 699px) {
  .galeria__opciones { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 0.75rem; scrollbar-width: thin; }
  .galeria__opcion { flex: none; width: 8.5rem; scroll-snap-align: start; }
}
.galeria__opciones legend,
.galeria__opcion input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.galeria__opcion { position: relative; display: grid; gap: 0.5rem; width: 9.5rem; cursor: pointer; color: var(--crema-mute); font-size: 0.8125rem; line-height: 1.35; transition: color 160ms var(--salida); }
.galeria__opcion img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 2px solid var(--linea); border-radius: var(--radio-control); transition: border-color 160ms var(--salida); }
.galeria__opcion:hover img { border-color: var(--borde-campo); }
.galeria__opcion:has(input:checked) { color: var(--crema); }
.galeria__opcion:has(input:checked) img { border-color: var(--ambar); }
.galeria__opcion:has(input:focus-visible) img { outline: 2px solid var(--ambar); outline-offset: 3px; }
.galeria__paginas { display: grid; gap: 2rem; }
@supports selector(:has(*)) {
  .galeria__paginas > * { display: none; }
  .galeria:has(.galeria__opcion:nth-of-type(1) input:checked) .galeria__paginas > :nth-child(1),
  .galeria:has(.galeria__opcion:nth-of-type(2) input:checked) .galeria__paginas > :nth-child(2),
  .galeria:has(.galeria__opcion:nth-of-type(3) input:checked) .galeria__paginas > :nth-child(3),
  .galeria:has(.galeria__opcion:nth-of-type(4) input:checked) .galeria__paginas > :nth-child(4),
  .galeria:has(.galeria__opcion:nth-of-type(5) input:checked) .galeria__paginas > :nth-child(5),
  .galeria:has(.galeria__opcion:nth-of-type(6) input:checked) .galeria__paginas > :nth-child(6),
  .galeria:has(.galeria__opcion:nth-of-type(7) input:checked) .galeria__paginas > :nth-child(7),
  .galeria:has(.galeria__opcion:nth-of-type(8) input:checked) .galeria__paginas > :nth-child(8),
  .galeria:has(.galeria__opcion:nth-of-type(9) input:checked) .galeria__paginas > :nth-child(9),
  .galeria:has(.galeria__opcion:nth-of-type(10) input:checked) .galeria__paginas > :nth-child(10),
  .galeria:has(.galeria__opcion:nth-of-type(11) input:checked) .galeria__paginas > :nth-child(11),
  .galeria:has(.galeria__opcion:nth-of-type(12) input:checked) .galeria__paginas > :nth-child(12) { display: block; }
}

.vecinos { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--linea); }
.vecinos a { display: grid; gap: 0.25rem; text-decoration: none; }
.vecinos a:last-child { margin-left: auto; text-align: right; }
.vecinos small { color: var(--crema-mute); font-size: 0.875rem; }
.vecinos b { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--serif); font-weight: 500; font-size: var(--p-h3); font-variation-settings: "opsz" 48; line-height: 1.2; }
.vecinos a:last-child b { justify-content: end; }
.vecinos a:hover b { color: var(--ambar); }
.vecinos a:first-child:hover .icono { transform: translateX(-3px); }
.vecinos a:last-child:hover .icono { transform: translateX(3px); }

/* ---------- received page: /gracias ---------- */

.recibida { max-width: 560px; display: grid; gap: 1.5rem; }
.recibida__cab { display: flex; gap: 1rem; align-items: center; }
/* The check is drawn, not typed. */
.recibida__marca { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ambar); color: var(--noche); display: grid; place-items: center; }
.recibida__marca svg { width: 22px; height: 22px; }
.recibida h1 { font-size: 1.75rem; font-variation-settings: "opsz" 48; line-height: 1.2; }
.recibida__cab p { color: var(--crema-mute); font-size: 0.9375rem; }
.recibida .boton { justify-self: start; }

/* ---------- long-form document: /privacidad ---------- */

.documento { max-width: 68ch; display: grid; gap: 1rem; }
.documento h1 { font-size: var(--p-h2); }
.documento h2 { font-size: var(--p-h3); font-variation-settings: "opsz" 48; line-height: 1.2; margin-top: 1.75rem; }
.documento p, .documento li { color: var(--crema-mute); }
.documento ul { display: grid; gap: 0.5rem; }
.documento li { position: relative; padding-left: 1.5rem; }
.documento li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75rem; height: 1px; background: var(--ambar); }
.documento a { color: var(--ambar); text-underline-offset: 4px; }
.documento__fecha { font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}