/* Aquí y Lejos — generated from tokens.json */
:root, [data-theme="claro"] {
  --verde-profundo: #234b3c; /* Oficial. Firma, texto y superficies oscuras. 9.28:1 sobre Marfil. */
  --marfil: #fff8ec; /* Oficial. Superficies de lectura y texto inverso sobre Verde profundo. */
  --papel: #f4e8c9; /* Oficial. Superficies cálidas de apoyo. Verde profundo encima: 8.04:1. */
  --hoja-clara: #d3e2b0; /* Oficial. Fondo de etiquetas, siempre con texto Verde profundo (7.13:1). */
  --verde-hoja: #9dbb62; /* Oficial. Solo decoración: patrones, filetes, subrayados. Nunca fondo de texto Marfil (2.05:1). */
  --bermellon: #ed5943; /* Oficial. La mancha de Hebra y acentos gráficos mínimos. Nunca texto ni botones (3.25:1 sobre Marfil). */
  --sombra: #2f5640; /* Derivado decorativo: Verde profundo + 10 % Verde hoja. Patrón verde sobre verde. No es color de marca. */
  --musgo: #3e6444; /* Derivado decorativo: Verde profundo + 22 % Verde hoja. Acento sobre oscuro. No es color de marca. */
  --niebla: #e9edce; /* Derivado decorativo: Hoja clara + 50 % Marfil. Fondos suaves; Verde profundo encima 8.15:1. */
  --rubor: #fcdbce; /* Derivado decorativo: Marfil + 18 % Bermellón. Detalle mínimo, nunca fondo de lectura extenso. */
  --superficie: var(--marfil); /* Fondo de página y de lectura. */
  --superficie-calida: var(--papel); /* Bandas y tarjetas de apoyo. */
  --tinta: var(--verde-profundo); /* Texto principal sobre superficie y superficie-calida. */
  --linea: #234b3c33; /* Filetes y divisores. Decorativo, no transmite información. */
  --boton-fondo: var(--verde-profundo); /* Botón principal (Consulta disponibilidad). */
  --boton-texto: var(--marfil); /* Texto de botón principal, 9.28:1. */
  --etiqueta-fondo: var(--hoja-clara); /* Chips y etiquetas. */
  --etiqueta-texto: var(--verde-profundo); /* Texto de chips y etiquetas, 7.13:1. */
  --acento: var(--bermellon); /* Acento gráfico mínimo (un filete, la hebra, un punto). Nunca texto. */
  --bloque-firma: var(--verde-profundo); /* Bloque de identidad en portadas; cambia en oscuro para no desaparecer. */
}
[data-theme="oscuro"] {
  --superficie: var(--verde-profundo);
  --superficie-calida: var(--sombra);
  --tinta: var(--marfil);
  --linea: #fff8ec40;
  --boton-fondo: var(--marfil);
  --boton-texto: var(--verde-profundo);
  --etiqueta-fondo: var(--hoja-clara);
  --etiqueta-texto: var(--verde-profundo);
  --acento: var(--bermellon);
  --bloque-firma: var(--marfil);
}
:root {
  --espacio-1: 4px; /* Ajustes finos. */
  --espacio-2: 8px; /* Entre etiqueta y título. */
  --espacio-3: 16px; /* Entre párrafos; padding de chips x2. */
  --espacio-4: 24px; /* Padding de tarjetas pequeñas. */
  --espacio-5: 40px; /* Padding de tarjetas grandes. */
  --espacio-6: 64px; /* Márgenes de página. */
  --espacio-7: 96px; /* Separación entre secciones: el entre. */
  --radio-s: 6px; /* Miniaturas y chips de color. */
  --radio-m: 12px; /* Tarjetas y paneles. */
  --radio-l: 18px; /* Bloques grandes y fotografías. */
  --radio-pastilla: 999px; /* Botones y etiquetas. */
  --font-serif: Fraunces, Georgia, serif;
  --font-sans: Nunito, system-ui, sans-serif;
  --text-display: 380 76px/80px var(--font-serif); /* Una frase por pieza. Fraunces con SOFT 50 y WONK 0. */
  --text-titulo-1: 400 48px/54px var(--font-serif); /* Títulos de página y de sección. */
  --text-titulo-2: 480 30px/36px var(--font-serif); /* Subtítulos y tarjetas. */
  --text-entrada: 400 19px/30px var(--font-sans); /* Párrafo de entrada. */
  --text-cuerpo: 400 15px/24px var(--font-sans); /* Texto corrido en impresos y web. En artículos del blog: 19/32. */
  --text-pequeno: 400 12.5px/19px var(--font-sans); /* Notas y pies. */
  --text-etiqueta: 800 10.5px/14px var(--font-sans); /* Etiquetas en mayúsculas; nunca para frases. */
  --text-boton: 750 15px/20px var(--font-sans); /* Botones y enlaces de acción. */
}
.display {
  font-family: var(--font-serif);
  font-size: 76px;
  line-height: 80px;
  font-weight: 380;
  letter-spacing: -0.012em;
}
.titulo-1 {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 54px;
  font-weight: 400;
  letter-spacing: 0;
}
.titulo-2 {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 36px;
  font-weight: 480;
  letter-spacing: 0;
}
.entrada {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.cuerpo {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.pequeno {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 19px;
  font-weight: 400;
  letter-spacing: 0;
}
.etiqueta {
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.boton {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 750;
  letter-spacing: 0;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}