/* Heliotropia — generated from tokens.json */
:root, [data-theme="claro"] {
  --negro-a: #343434; /* Heliotropia/Negro A. Superficies oscuras elevadas, texto secundario sobre crema. */
  --negro-b: #212121; /* Heliotropia/Negro B. Fondo de las secciones oscuras y del footer. Texto principal sobre crema y sobre Azul A. */
  --blanco-a: #eae5df; /* Heliotropia/Blanco A. Fondo crema de secciones y cards. Texto principal sobre negro y sobre morados. */
  --morado-d: #542882; /* Heliotropia/Morado D. Morado profundo de marca: banners como ¿Por qué nosotros?. Texto blanco o crema encima (8.4:1). */
  --morado-c: #4b539b; /* Heliotropia/Morado C. Color de acción: botón principal, paginador activo, tags activos. Texto blanco encima (7:1). */
  --morado-b: #8583bd; /* Heliotropia/Morado B. Morado claro: geometrías, fondos de sección (equipo), acento sobre negro (4.6:1). */
  --morado-a: #9796ab; /* Heliotropia/Morado A. Gris lavanda: bloques de fondo y textos de apoyo sobre negro. */
  --azul-a: #2aa9ba; /* Heliotropia/Azul A. Turquesa de marca: botón secundario, rombo, íconos. Texto encima en Negro B (5.7:1). En Figma el botón usa texto blanco (2.8:1): no pasa AA. */
  --verde-a: #33ab5c; /* Heliotropia/Verde A (variable Verde H). Triángulo y acentos de naturaleza. Solo decorativo o con texto Negro B (5.5:1). */
  --morado-gradiente: #603a9d; /* Morado intermedio que aparece solo en el gradiente radial de marca (Verde A → Azul A → este morado → Morado B). */
  --crema-claro: #f6f1ea; /* Fondo de Card metodología. Crema más claro que Blanco A, para cards sobre secciones crema. */
  --blanco: #ffffff; /* Texto sobre Morado C y Morado D. Fondo de mesas de trabajo. */
  --surface: var(--blanco-a); /* Fondo de página y de sección. */
  --surface-raised: var(--blanco); /* Cards, formularios y paneles sobre surface. */
  --ink: var(--negro-b); /* Texto principal sobre surface y surface-raised. */
  --ink-muted: var(--negro-a); /* Texto secundario: fechas, tiempo de lectura, cargos, metadatos. */
  --line: #c9c2ba; /* Líneas finas bajo títulos de card e inputs del formulario. Propuesta: el archivo no tiene un estilo de línea. */
  --accent: var(--morado-c); /* Links, bordes de tags y botones outline, foco. Morado C sobre crema 5.6:1, Morado B sobre negro 4.6:1. */
  --action: var(--morado-c); /* Relleno del botón principal en ambos temas. */
  --on-action: var(--blanco); /* Texto sobre action. */
  --focus: var(--morado-d); /* Anillo de foco de teclado (2px). */
}
[data-theme="oscuro"] {
  --surface: var(--negro-b);
  --surface-raised: var(--negro-a);
  --ink: var(--blanco-a);
  --ink-muted: var(--morado-a);
  --line: #4a4a4a;
  --accent: var(--morado-b);
  --action: var(--morado-c);
  --on-action: var(--blanco);
  --focus: var(--azul-a);
}
:root {
  --space-1: 4px; /* Separación entre ícono y texto. */
  --space-2: 8px; /* Padding horizontal del frame de componentes, gap entre tags. */
  --space-3: 16px; /* Padding interno de cards y botones grandes. */
  --space-4: 24px; /* Gap entre elementos de una card de apertura (25px en Figma). */
  --space-5: 40px; /* Padding de banners y de footer. */
  --space-6: 80px; /* Separación entre secciones en desktop. */
  --radius-sm: 5px; /* Contenedores pequeños y bloques de imagen en mobile. */
  --radius-md: 10px; /* Cards, imágenes de card y swatches. */
  --radius-lg: 12px; /* Card metodología y Card Proyecto Apertura (esquinas superiores). */
  --radius-pill: 999px; /* Botones, tags, menú glass y selector de idioma. */
  --radius-full: 50%; /* Fotos circulares (equipo, texturas) y el círculo de las geometrías. */
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-special: Abel, "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-display: "Roca One", "Young Serif", Georgia, serif;
  --text-title-xl: 600 60px/1.2 var(--font-sans); /* Heliotropia/Title/XL. Titular de apertura (hero). */
  --text-title-l: 600 48px/1.2 var(--font-sans); /* Heliotropia/Title/L. Título de sección. */
  --text-title-m: 600 32px/1.2 var(--font-sans); /* Heliotropia/Title/M. Título de card y subsección. En cards va en mayúsculas. */
  --text-body-xl: 400 32px/1.4 var(--font-sans); /* Heliotropia/Body/XL. Entradilla grande. */
  --text-body-l: 400 28px/1.4 var(--font-sans); /* Heliotropia/Body/L. Entradilla de sección. */
  --text-body-m: 400 24px/1.4 var(--font-sans); /* Heliotropia/Body/M. Texto destacado en cards grandes. */
  --text-body-s: 400 16px/1.4 var(--font-sans); /* Heliotropia/Body/S. Texto corrido por defecto. */
  --text-body-s-bold: 700 16px/1.4 var(--font-sans); /* Heliotropia/Body/S Bold. Cifras y énfasis dentro de body-s. */
  --text-special-xl: 400 60px/1.2 var(--font-special); /* Heliotropia/Special/XL. Títulos editoriales en mayúsculas. */
  --text-special-l: 400 40px/1.2 var(--font-special); /* Heliotropia/Special/L. Títulos de banner y de nota. */
  --text-special-m: 400 32px/1.2 var(--font-special); /* Heliotropia/Special/M. Títulos de card de impacto. */
  --text-special-s: 400 22px/1.2 var(--font-special); /* Heliotropia/Special/S. Etiquetas de cliente y subtítulos. */
  --text-display: 400 50px/1.2 var(--font-display); /* Roca One (estilo COP16). Títulos de apertura de página como Sobre Heliotropia y Nuestro Blog. Usar con moderación. */
}
.title-xl {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.title-l {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.title-m {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.body-xl {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.body-l {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.body-m {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.body-s {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.body-s-bold {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}
.special-xl {
  font-family: var(--font-special);
  font-size: 60px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.special-l {
  font-family: var(--font-special);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.special-m {
  font-family: var(--font-special);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.special-s {
  font-family: var(--font-special);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.display {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}

/* Roca One (fuente real de la marca). Solo existe en peso 400. */
@font-face {
  font-family: "Roca One";
  src: url("../fonts/RocaOne-Regular.woff") format("woff"), url("../fonts/RocaOne-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}