/* 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; }
.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 { 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: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 3rem var(--margen);
  border-top: 1px solid var(--linea);
  color: var(--crema-mute);
  font-size: 0.9375rem;
}
.pie .marca-logo { margin-bottom: 0.75rem; }
.pie ul { display: flex; gap: 1.75rem; }
.pie a { text-decoration: none; }
.pie nav a:hover { color: var(--crema); }

/* ---------- 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: 13ch; }
.hero h1 .junto { white-space: nowrap; }
.hero h1 .segunda { color: var(--crema-mute); font-weight: 400; }
/* 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 .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); flex: none; }

/* ---------- 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; }

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

/* Fixed column counts, not auto-fit: with two wide cards in the approved
   order, auto-fit leaves a hole in the first row. Three columns on desktop,
   two on tablets (only the first card spans), one on phones. */
.obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
@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 {
  overflow: hidden;
  background: var(--noche-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.obra__marco { 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 { display: grid; gap: 0.5rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.obra__tipo, .obra__estado { color: var(--crema-mute); font-size: 0.875rem; }
.obra__estado { display: inline-flex; align-items: center; gap: 0.5rem; }
.obra__estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--borde-campo); }
.obra__nombre { font-size: var(--p-h3); }
.obra__datos > p:not([class]) { color: var(--crema-mute); font-size: 1rem; line-height: 1.55; }
.obra .enlace { justify-self: start; margin-top: 0.5rem; }
/* The first one and the featured one are wider, so the grid never reads as
   equal cards. */
.obra:nth-child(1), .obra--destacada { grid-column: span 2; }
@media (max-width: 1099px) { .obra--destacada { grid-column: auto; } }
@media (max-width: 699px) { .obra:nth-child(1) { grid-column: auto; } }

/* ---------- 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; }
}