/* Base: fuentes, tokens, reinicio, tipografía, layout y foco (D10 §3, §4, §6; D11 GL-19…GL-23). */

/* Bricolage Grotesque y Source Sans 3 (D10 §4.1): variables, autoalojadas en WOFF2, subconjunto latino
   (cubre á é í ó ú ü ñ ¿ ¡), sin cursiva, licencia SIL Open Font License. Nada de fuentes externas. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  color-scheme: light;

  /* ---- Neutros — Piedra ---- */
  --blanco: #ffffff;
  --arena-50: #faf8f3;
  --piedra-100: #f3efe8;
  --piedra-200: #e8e3da;
  --piedra-300: #d3cdc3;
  --piedra-500: #857e75;
  --piedra-600: #6b655d;
  --piedra-700: #54504a;
  --piedra-800: #37322d;
  --piedra-950: #1f1b18;

  /* ---- Ladrillo — acción y marca ---- */
  --ladrillo-100: #fce6da;
  --ladrillo-600: #af3600;
  --ladrillo-700: #8f2c00;

  /* ---- Verde Monte — estructura ---- */
  --monte-100: #e3ede5;
  --monte-200: #c9d6cc;
  --monte-600: #3f6b54;
  --monte-800: #28473a;
  --monte-900: #1f3a2e;

  /* ---- Paja — acento sobre oscuro ---- */
  --paja-100: #fbefd3;
  --paja-500: #d9a441;
  --paja-700: #7a4e00;

  /* ---- Cielo — enlaces e información ---- */
  --cielo-100: #e2eef6;
  --cielo-700: #1b5e86;

  /* ---- Bordó — email del header en escritorio (D10, a pedido del cliente 2026-10-15) ---- */
  --bordo-700: #7a1736;

  /* ---- Estados ---- */
  --exito-100: #e1f1e7;
  --exito-700: #1f6b3f;
  --error-100: #fbe6e4;
  --error-700: #a61b1b;

  /* Aviso global (D10 §8.1): ámbar propio, distinto de error/advertencia */
  --alerta-fondo: #ffe7a8;
  --alerta-borde: #9a5b00;

  /* ---- Tipografía ---- */
  --fuente-titulo: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-cuerpo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Layout ---- */
  --margen: 20px;
  --contenedor: 1200px;
  --contenedor-amplio: 1360px;
  --contenedor-lectura: 680px;
  --radio-control: 10px;
  --radio-tarjeta: 16px;

  /* ---- Espaciado (escala base 4px, D10 §6.3) ---- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px;
  --e12: 48px; --e16: 64px; --e20: 80px; --e30: 120px;
}

@media (min-width: 640px)  { :root { --margen: 32px; } }
@media (min-width: 1024px) { :root { --margen: 48px; } }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--arena-50);
  color: var(--piedra-950);
  font-family: var(--fuente-cuerpo);
  font-size: 17px;
  line-height: 1.6;
}
@media (min-width: 640px) { body { font-size: 18px; } }

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

/* ---- Escala tipográfica (D10 §4.2): fluida entre móvil y escritorio con clamp() ---- */
h1, h2, h3, h4 { font-family: var(--fuente-titulo); margin: 0 0 var(--e4); text-wrap: balance; }

.texto-display, .hero__titulo {
  font-family: var(--fuente-titulo); font-weight: 700; margin: 0;
  font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);
  line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
}
h1, .h1 { font-weight: 700; font-size: clamp(2.125rem, 1.7rem + 1.9vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; }
h2, .h2 { font-weight: 700; font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; }
h3, .h3 { font-weight: 600; font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); line-height: 1.2; letter-spacing: -0.005em; }
h4, .h4 { font-weight: 600; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); line-height: 1.25; }
.h5 { font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: 0.01em; margin: 0 0 var(--e2); }
.lead { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.5; color: var(--piedra-700); margin: 0 0 var(--e6); }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--cielo-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

strong, b { font-weight: 600; }

/* Foco visible, nunca eliminado (A-03) */
:focus-visible { outline: 3px solid var(--cielo-700); outline-offset: 3px; }
main:focus { outline: none; } /* destino programático del enlace «Saltar al contenido» */

/* ---- Contenedores (D10 §6.1) ---- */
.contenedor { width: 100%; max-width: calc(var(--contenedor) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.contenedor--amplio { max-width: calc(var(--contenedor-amplio) + 2 * var(--margen)); }
.contenedor--lectura { max-width: calc(var(--contenedor-lectura) + 2 * var(--margen)); }

.etiqueta {
  margin: 0 0 var(--e1);
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* «Saltar al contenido»: primer elemento enfocable (A-02) */
.saltar {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--blanco);
  color: var(--piedra-950);
  font-weight: 700;
  border-radius: var(--radio-control);
}
.saltar:focus { top: 8px; }

.seccion { padding-block: var(--e14, 56px); }
.seccion--angosta { padding-block: var(--e6); }
.seccion--sin-top { padding-top: 0; }
/* .seccion--angosta se repite dentro de cada media query (mismo lugar que .seccion, no antes) para que
   siga ganando en pantallas ≥640px: antes perdía contra el padding responsivo de .seccion (mismo peso de
   selector, .seccion--angosta quedaba declarada más arriba) y dejaba mucho más aire del previsto. */
@media (min-width: 640px)  { .seccion { padding-block: var(--e20); } .seccion--angosta { padding-block: var(--e8); } }
@media (min-width: 1024px) { .seccion { padding-block: var(--e30); } .seccion--angosta { padding-block: var(--e12); } }

/* Ritmo de fondos (D10 §6.4) */
.fondo-blanco { background: var(--blanco); }
.fondo-suave { background: var(--piedra-100); }
.fondo-oscuro { background: var(--monte-900); color: var(--arena-50); }
.fondo-oscuro h2, .fondo-oscuro h3, .fondo-oscuro .etiqueta { color: inherit; }
.fondo-oscuro .etiqueta { color: var(--paja-500); }
.fondo-oscuro a:not(.boton) { color: var(--monte-200); }
.fondo-oscuro :focus-visible { outline-color: var(--paja-500); }
.fondo-oscuro p { color: var(--monte-200); }

/* ---- Utilidades de grilla ---- */
.grilla { display: grid; gap: var(--e8); }
.grilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 640px) { .grilla { gap: var(--e6); } }

.texto-centrado { text-align: center; }
.pila { display: flex; flex-direction: column; gap: var(--e4); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); }
.fila--espaciada { justify-content: space-between; }
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}