/* ==========================================================================
   laleonawaterfalltpl — Brand Tokens (Libro de Marca 2026 · v1.0)
   Este archivo NO reconstruye Tailwind (no tenemos acceso al pipeline Vite
   del padre). En vez de eso, sobreescribe con el mismo patrón ya usado en
   custom.css (override dirigido, misma especificidad que las utilities de
   Tailwind vía !important) para no requerir un rebuild del tema padre.

   Hallazgo: tailwind.config.js del padre define:
     brand.DEFAULT  = #324a58   → el libro de marca dice Azul Cañón #344F59
     brand.contrast = #B8CB41   → coincide exacto con Verde Guanacaste, sin cambios
     brand.dark     = #241E20   → no existe en la paleta nueva, se reemplaza
     brand.light    = #F5F1ED   → se reemplaza por Nube/Bruma
     fontFamily.sans = Raleway  → el libro de marca pide Jost (texto/UI)
   ========================================================================== */

:root {
	--color-azul-canon: #344F59;
	--color-pizarra-rio: #556A73;
	--color-niebla: #949FA6;
	--color-bruma: #D2D7D9;
	--color-nube: #F2F2F2;
	--color-verde-guanacaste: #B8CB41;
	--color-verde-guanacaste-dark: #6E7C1E;

	--font-display: 'Cormorant Garamond', serif;
	--font-ui: 'Jost', sans-serif;

	/* Ancho máximo global de contenido — una sola variable que todas las
	   secciones nuevas usan (var(--content-max)) en vez de números sueltos
	   por componente. Se ajusta con el tamaño de pantalla, igual que el
	   .container de Tailwind que ya usa el footer, para que el contenido
	   no se estire de borde a borde en monitores grandes. */
	--content-max: 100%;
}
@media (min-width: 640px)  { :root { --content-max: 37.5rem; } }
@media (min-width: 768px)  { :root { --content-max: 45rem; } }
@media (min-width: 1024px) { :root { --content-max: 60rem; } }
@media (min-width: 1280px) { :root { --content-max: 73.75rem; } }
@media (min-width: 1536px) { :root { --content-max: 82.5rem; } }

/* --------------------------------------------------------------------------
   1) TIPOGRAFÍA — reemplaza Raleway por el sistema Jost + Cormorant Garamond.
   -------------------------------------------------------------------------- */
body {
	font-family: var(--font-ui);
}

h1, h2, h3,
.prose h1, .prose h2,
.title, .logo, .footer-logo {
	font-family: var(--font-display);
}

/* Antetítulos (mayúsculas, tracking abierto) — patrón "CURUBANDÉ · GUANACASTE" del libro de marca */
.antetitulo {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2) COLOR — corrige el azul de marca en todas las utilities de Tailwind ya
   compiladas que lo usan. brand-contrast (verde) no requiere cambio.
   -------------------------------------------------------------------------- */
.bg-brand { background-color: var(--color-azul-canon) !important; }
.text-brand { color: var(--color-azul-canon) !important; }
.border-brand { border-color: var(--color-azul-canon) !important; }
.hover\:text-brand:hover { color: var(--color-azul-canon) !important; }
.prose-h1\:text-brand h1,
.prose-h2\:text-brand h2 { color: var(--color-azul-canon) !important; }

/* brand.dark (#241E20) ya no existe en la paleta — las secciones oscuras
   (ej. "Everything is included") ahora usan Azul Cañón, no un casi-negro. */
.bg-brand-dark { background-color: var(--color-azul-canon) !important; }
.text-brand-dark { color: var(--color-azul-canon) !important; }

/* brand.light (#F5F1ED) reemplazado por los neutros oficiales */
.bg-brand-light { background-color: var(--color-nube) !important; }

/* Regla del verde (sección 05 del libro de marca): un solo acento activo por
   vista, nunca en superficies grandes ni detrás del logo. Se deja tal cual
   está definido en brand-contrast; solo se documenta aquí para que cualquier
   componente nuevo lo respete. */

/* --------------------------------------------------------------------------
   3) ELEMENTOS GRÁFICOS — arco monolínea (sección 07), usado como separador
   y como base del mapa del valle (template-parts/content-valley.php).
   -------------------------------------------------------------------------- */
.brand-arc-divider {
	display: block;
	width: 32px;
	height: 3px;
	background: var(--color-verde-guanacaste);
	border-radius: 2px;
	margin-bottom: 12px;
}