/* ==========================================================================
   ARREGLAMIHOGAR — Base
   Tokens, reset y tipografía.

   Estrategia de color: comprometida. El burdeos ancla (cabecera, pie, bloques
   de cierre) y el fondo respira en tono yeso cálido. El latón es el sistema de
   filetes, nunca relleno.

   Tipografía: Prata solo para enunciados grandes; Hanken Grotesk carga con
   todo lo demás, incluidos los subtítulos.
   ========================================================================== */

/* --- Tipografias servidas desde aqui --------------------------------------
   Las dos son SIL Open Font License 1.1, que permite alojarlas uno mismo.
   Subconjunto latino: es el que cubre el espanol completo.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/prata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* --- Burdeos ---------------------------------------------------------- */
  --wine-900: oklch(0.185 0.055 18);
  --wine-800: oklch(0.255 0.085 18);
  --wine-700: oklch(0.325 0.105 19);
  --wine-600: oklch(0.395 0.125 20);
  --wine-500: oklch(0.475 0.145 21);
  --wine-200: oklch(0.880 0.030 20);
  --wine-100: oklch(0.950 0.016 20);

  /* --- Latón ------------------------------------------------------------ */
  --brass-700: oklch(0.520 0.078 68);
  --brass-600: oklch(0.625 0.086 73);
  --brass-500: oklch(0.720 0.078 78);
  --brass-400: oklch(0.810 0.062 80);
  --brass-300: oklch(0.885 0.044 82);

  /* --- Piedra caliza: neutros templados hacia el latón ------------------- */
  --stone-50:  oklch(0.985 0.006 72);
  --stone-100: oklch(0.966 0.010 70);
  --stone-200: oklch(0.938 0.013 68);
  --stone-300: oklch(0.898 0.017 66);
  --stone-400: oklch(0.840 0.020 64);

  /* --- Tinta: neutros templados hacia el burdeos ------------------------- */
  --ink-900: oklch(0.215 0.014 28);
  --ink-800: oklch(0.310 0.014 28);
  --ink-700: oklch(0.410 0.015 30);
  --ink-500: oklch(0.565 0.014 32);
  --ink-400: oklch(0.680 0.012 34);

  /* --- Semánticos ------------------------------------------------------- */
  --bg:         var(--stone-50);
  --surface:    oklch(0.995 0.004 74);
  --text:       var(--ink-900);
  --text-soft:  var(--ink-700);
  /* Medido: con ink-500 (L 0.565) el texto apagado se quedaba en 4,41:1
     sobre el fondo, y el minimo WCAG para texto normal es 4,5. Bajar la
     claridad a 0.550 lo deja en 4,67:1 sin que deje de leerse como gris. */
  --text-mute:  oklch(0.550 0.014 32);
  --hairline:   oklch(0.885 0.014 66);
  --hairline-soft: oklch(0.935 0.010 68);
  --brass:      var(--brass-600);

  /* --- Tipografía ------------------------------------------------------- */
  --font-display: "Prata", "Hoefler Text", Georgia, serif;
  --font-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala modular fluida de 375px a 1440px.
     Los máximos están deliberadamente contenidos: el texto grande cansa y
     resta autoridad. El salto entre pasos mantiene la jerarquía. */
  --t-xs:  clamp(0.750rem, 0.740rem + 0.04vw, 0.766rem);
  --t-sm:  clamp(0.844rem, 0.826rem + 0.08vw, 0.875rem);
  --t-base: clamp(1.000rem, 0.985rem + 0.07vw, 1.031rem);
  --t-md:  clamp(1.094rem, 1.040rem + 0.23vw, 1.219rem);
  --t-lg:  clamp(1.313rem, 1.210rem + 0.44vw, 1.563rem);
  --t-xl:  clamp(1.625rem, 1.430rem + 0.83vw, 2.063rem);
  --t-2xl: clamp(2.000rem, 1.680rem + 1.37vw, 2.750rem);
  --t-3xl: clamp(2.375rem, 1.900rem + 2.03vw, 3.500rem);
  --t-4xl: clamp(2.750rem, 2.100rem + 2.77vw, 4.250rem);

  --track-tight: -0.018em;
  --track-label: 0.14em;
  --track-caps:  0.22em;

  /* --- Espacio ---------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Ritmo de sección variado: no todas las secciones respiran igual */
  --bay:       clamp(4rem, 2.6rem + 5.9vw, 8rem);
  --bay-tight: clamp(2.75rem, 2.0rem + 3.2vw, 4.75rem);
  --bay-wide:  clamp(5.5rem, 3.4rem + 8.9vw, 11rem);

  /* --- Forma ------------------------------------------------------------ */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;

  --lift-1: 0 1px 2px oklch(0.185 0.055 18 / 0.05);
  --lift-2: 0 6px 24px oklch(0.185 0.055 18 / 0.07);
  --lift-3: 0 24px 64px oklch(0.185 0.055 18 / 0.13);

  /* Salida exponencial: entra rápido, asienta despacio. Sin rebote. */
  /* Curvas. Las de serie de CSS son flojas: arrancan despacio justo en el
     instante que el usuario está mirando. Estas salen disparadas y frenan. */
  --out-expo:  cubic-bezier(0.16, 1, 0.3, 1);     /* entradas y recorridos largos */
  --out-quart: cubic-bezier(0.25, 1, 0.5, 1);     /* color y estados */
  --in-out:    cubic-bezier(0.77, 0, 0.175, 1);   /* movimiento dentro de pantalla */

  /* Duraciones. Nada de interfaz pasa de 300 ms: por encima se nota lento
     aunque no se sepa por qué. Lo que se ve una vez al bajar puede durar más. */
  --t-press: 110ms;   /* respuesta al pulsar */
  --t-fast:  140ms;   /* color, foco, filetes */
  --t-mid:   200ms;   /* desplegables, paneles, hover con movimiento */
  --t-slow:  380ms;   /* barridos y velos sobre foto */
  --t-rise:  620ms;   /* aparición al desplazar: decorativa, se ve una vez */

  --shell: 1280px;
  --shell-text: 68ch;
  --edge: clamp(1.25rem, 0.55rem + 2.95vw, 4rem);

  --head-h: 78px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brass-600);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Tipografía

   Prata queda reservada a los enunciados grandes. Los títulos pequeños van en
   Hanken Grotesk con peso, que aguanta mucho mejor los tamaños cortos.
   -------------------------------------------------------------------------- */

/* Prata gasta 0.977em de tinta entre la bajada de un renglon y la subida
   del siguiente (medido: bajada 0.227em, subida 0.750em). Con interlineado
   por debajo de 1.10 las letras se tocan cuando el titular parte en dos, y
   en el movil parten casi todos. Con 1.10 quedaban 4px de aire a 44px de
   cuerpo, que a la vista siguen leyendose como un choque; de ahi 1.14. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  color: var(--ink-900);
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); }

h1, h2, h3, h4 {
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.011em;
  text-wrap: balance;
  color: var(--ink-900);
}

h1.display { font-size: var(--t-3xl); line-height: 1.14; }
h2.display { font-size: var(--t-2xl); line-height: 1.16; }
h3.display { font-size: var(--t-lg); line-height: 1.18; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--t-md);
  line-height: 1.58;
  font-weight: 350;
  color: var(--text-soft);
  max-width: 46ch;
}

.prose { max-width: var(--shell-text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }

.prose a {
  color: var(--wine-600);
  text-decoration: underline;
  text-decoration-color: var(--brass-400);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--out-quart);
}

.prose a:hover { text-decoration-color: var(--wine-600); }

.prose ul { display: grid; gap: 0.5em; }

.prose ul li {
  position: relative;
  padding-left: 1.4em;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.55em;
  height: 1px;
  background: var(--brass-500);
}

.mute { color: var(--text-mute); }

/* Filete de latón. Elemento de puntuación del sistema. */
.hair {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--hairline);
}

/* --------------------------------------------------------------------------
   Composición
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.bay { padding-block: var(--bay); }
.bay-tight { padding-block: var(--bay-tight); }
.bay-wide { padding-block: var(--bay-wide); }

.on-stone { background: var(--stone-100); }
.on-surface { background: var(--surface); }

.on-wine {
  background: var(--wine-800);
  color: var(--stone-200);
}

.on-wine h1, .on-wine h2, .on-wine h3, .on-wine h4 { color: var(--stone-50); }
.on-wine .lede,
.on-wine .bay-head__aside,
.on-wine .mute,
.on-wine .prose { color: var(--stone-300); }
.on-wine .hair { background: oklch(0.885 0.044 82 / 0.24); }
.on-wine .prose ul li::before { background: var(--brass-400); }
/* Texto claro sobre oscuro: necesita más aire entre líneas */
.on-wine, .on-wine p { line-height: 1.7; }

/* Encabezado de sección editorial: título a la izquierda, apoyo a la derecha.
   Deliberadamente no centrado. */
.bay-head {
  display: grid;
  gap: var(--s-4) var(--s-8);
  align-items: end;
  margin-bottom: var(--s-7);
}

@media (min-width: 900px) {
  .bay-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s-9);
  }
  .bay-head__aside { padding-bottom: 0.45rem; }
}

.bay-head__aside {
  font-size: var(--t-base);
  color: var(--text-soft);
  max-width: 44ch;
}

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -130%);
  z-index: 300;
  padding: var(--s-2) var(--s-4);
  background: var(--brass-300);
  color: var(--wine-800);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--t-mid) var(--out-expo);
}

.skip:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Grano

   Una capa de ruido muy tenue sobre toda la página. Quita el plano digital
   perfecto y acerca el fondo a un yeso real.
   -------------------------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}