/* ==========================================================================
   PIEL · eliminarresena.es · v2.1 · 05/11/2026 (aprobada por el titular el 05/11/2026)
   Se carga DESPUÉS de base.css (v1.7.1) y solo toca tokens de :root y las
   fuentes.

   v2: el titular quiere el modelo de página de repscan (landing larga,
   clara, con tarjetas de tonos suaves y dibujos). Se toma el tipo de
   diseño, no su identidad: fondo blanco y mucho aire, verde azulado como
   color principal (repscan es azul), cuatro tintes suaves (menta,
   melocotón, lavanda y arena) para tarjetas, píldoras y dibujos, esquinas
   redondeadas y dibujos propios. Títulos en Bricolage Grotesque y texto en
   Hanken Grotesk. (v1, ciruela y esquinas rectas, descartada el 05/11.)
   v2.1 (Fable): mismos colores; sombras teñidas con el color de marca en vez
   de negro, títulos un punto más pesados y apretados, radios más amplios
   en botones y campos. Los componentes ganan estados de hover (base v1.7.1).

   Comprobaciones (05/11/2026):
   - Texto sobre blanco 17,6:1 · sobre cualquier tinte ≥ 14,7:1.
   - Texto suave sobre blanco 7,2:1 · sobre cualquier tinte ≥ 6,0:1.
   - Marca sobre blanco 6,4:1 · sobre cualquier tinte ≥ 5,3:1.
   - Sobre-marca (blanco) sobre marca 6,4:1 · sobre marca intensa 9,1:1.
   - Borde de campo sobre blanco 3,7:1 · sobre sección alterna 3,5:1.
   - Foco sobre blanco 5,0:1 · sobre tinte 1 4,3:1.
   - Sobre-banda 14,8:1 · sobre-banda suave 9,3:1.
   - Pendiente: comparar con las pieles de las demás webs de la cartera.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fuentes/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fuentes/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color · superficies */
  --color-fondo: #ffffff;
  --color-superficie: #ffffff;
  --color-superficie-alt: #f2f5f4;
  --color-seccion-alt: #f6f8f7;
  --color-texto: #0f1b1d;
  --color-texto-suave: #4b5a5d;
  --color-linea: #e2e8e7;
  --color-linea-campo: #788789;

  /* Color · marca */
  --color-marca: #0b6b62;
  --color-marca-intensa: #08524b;
  --color-sobre-marca: #ffffff;
  --color-marca-tenue: #e1f1ed;
  --color-foco: #0a7d72;

  /* Color · tintes suaves y estrella (base v1.7) */
  --color-tinte-1: #e1f2ed;
  --color-tinte-2: #fdebe0;
  --color-tinte-3: #ece9fb;
  --color-tinte-4: #faf1d9;
  --color-estrella: #e3a008;

  /* Color · banda oscura (pie) */
  --color-banda: #0d2225;
  --color-sobre-banda: #eef4f3;
  --color-sobre-banda-suave: #b6c6c6;

  /* Color · estados */
  --color-ok: #1b6b3c;
  --color-ok-tenue: #e6f3ea;
  --color-aviso: #8a4b00;
  --color-aviso-tenue: #fdf1df;
  --color-error: #b42318;
  --color-error-tenue: #fdecea;

  /* Tipografía */
  --fuente-titulos: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --fuente-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-fuerte: 600;
  --peso-titulos: 680;
  --tracking-titulos: -0.03em;
  --interlineado-titulos: 1.08;
  --interlineado: 1.6;

  /* Forma: redondeada y suave */
  --radio-s: 6px;
  --radio-m: 12px;
  --radio-l: 18px;
  --radio-xl: 28px;
  --radio-boton: 14px;
  --radio-campo: 12px;
  --sombra-1: 0 1px 2px rgb(11 107 98 / 0.06), 0 2px 8px rgb(11 107 98 / 0.05);
  --sombra-2: 0 24px 48px -24px rgb(11 107 98 / 0.28), 0 6px 14px -6px rgb(11 107 98 / 0.10);

  --ancho-pagina: 76rem;
}