/* ==========================================================================
   Capítulos Culturales — Tokens del sistema de diseño
   Fuente: «Sistema de Diseño Web — Capítulos Culturales» v1.0, §41.
   Estos son los únicos valores de marca. Ningún componente debe declarar
   un color, una fuente o una medida fuera de esta lista.
   ========================================================================== */

:root {
	/* ---------- Marca ---------- */
	--cc-ivory: #f6f3ee;
	--cc-black: #111111;
	--cc-green: #173a34;
	--cc-gold: #b8945a;
	--cc-stone: #d9d3cb;
	--cc-white: #ffffff;

	/* Variantes de apoyo derivadas de la paleta base */
	--cc-gold-dark: #a07c45;   /* hover del CTA primario */

	/* Oro para texto pequeño. El oro de marca es un color de trazo, no de
	   lectura: a 12 px da 1,9:1 sobre piedra y 2,56 sobre marfil, o sea que el
	   microtitular y los enlaces con flecha directamente no se veían. Estos dos
	   son los tonos de la misma familia que llegan a 4,5:1 por el lado claro y
	   por el oscuro. El oro de marca se queda para filetes, iconos y superficies.
	   Medido con WCAG 2.2, criterio 1.4.3. */
	--cc-gold-on-light: #6d5019;  /* 5,03:1 sobre piedra · 6,75:1 sobre marfil */
	--cc-gold-on-dark: #c9a870;   /* 5,51:1 sobre verde · 8,38:1 sobre negro */

	/* El que usan los componentes. Se hereda, así que una misma regla sirve en
	   las dos superficies: basta con volver a declararlo dentro de las secciones
	   oscuras, en `base.css`. */
	--cc-gold-text: var(--cc-gold-on-light);
	--cc-green-dark: #102a26;  /* profundidad sobre verde */
	--cc-overlay-dark: rgba(17, 17, 17, 0.6);
	--cc-overlay-deep: rgba(17, 17, 17, 0.78);

	/* Velo sobre fotografía. Los degradados del hero y del cierre llevaban estos
	   cuatro valores escritos a mano, en contra de lo que dice la cabecera de
	   este archivo. Son cuatro paradas de la misma familia y esta es su escala:
	   `full` es donde se apoya el texto y `none` donde la fotografía queda
	   limpia. */
	--cc-veil-full: rgba(17, 17, 17, 0.92);
	--cc-veil-strong: rgba(17, 17, 17, 0.72);
	--cc-veil-soft: rgba(17, 17, 17, 0.28);
	--cc-veil-none: rgba(17, 17, 17, 0.05);
	--cc-gold-soft: rgba(184, 148, 90, 0.18);
	--cc-green-soft: rgba(23, 58, 52, 0.08);
	--cc-surface-soft: #faf8f5;

	/* Gama categórica para distinguir un viaje de otro en el calendario. Seis
	   tonos apagados de la misma familia editorial —el oro y el verde de marca,
	   más cuatro vecinos— y no seis colores de gráfico de barras: el calendario
	   sigue siendo papel. Medidos sobre las dos superficies donde se usan, todos
	   por encima del 3:1 que pide WCAG 2.2 §1.4.11 para objetos gráficos.
	
	   El color nunca va solo: cada viaje ocupa siempre la misma posición dentro
	   de la celda y se nombra en la leyenda, que es lo que exige §1.4.1. */
	--cc-viaje-1: #8a6a2f;  /* oro profundo · 4,54:1 marfil · 3,38:1 piedra */
	--cc-viaje-2: #173a34;  /* verde de marca · 11,22 · 8,36 */
	--cc-viaje-3: #8c4a32;  /* terracota · 6,04 · 4,50 */
	--cc-viaje-4: #3f5468;  /* pizarra · 7,08 · 5,27 */
	--cc-viaje-5: #5f6033;  /* oliva · 5,92 · 4,41 */
	--cc-viaje-6: #5e3a4a;  /* ciruela · 8,70 · 6,48 */

	/* Superficies semánticas. El verde sigue siendo tinta de marca y color de
	   acción, pero deja de ocupar paños completos. Las áreas editoriales se
	   construyen con papel cálido y el verde aparece como matiz, filete o
	   estado. Así el sitio conserva identidad sin convertir cada CTA en un
	   bloque verde independiente. */
	--cc-surface-canvas: var(--cc-ivory);
	--cc-surface-raised: #fffdf9;
	--cc-surface-muted: #ebe5dc;
	--cc-surface-brand: #e5e1d8;
	--cc-surface-dark: #181916;
	--cc-surface-dark-soft: #20231f;
	--cc-error: #b3261e;

	/* ---------- Texto ---------- */
	--cc-text: #111111;
	--cc-text-muted: rgba(17, 17, 17, 0.66);
	--cc-text-inverse: #f6f3ee;
	--cc-text-inverse-muted: rgba(246, 243, 238, 0.74);

	/* ---------- Bordes ---------- */
	--cc-border: rgba(17, 17, 17, 0.14);
	--cc-border-inverse: rgba(246, 243, 238, 0.18);

	/* ---------- Tipografía ---------- */
	--cc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--cc-font-body: "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	/* Cifras. Playfair es una tipografía de titular con cifras de estilo
	   antiguo: los dígitos no comparten altura ni ancho, así que un importe
	   sube y baja dentro de su propia línea y una columna de precios no llega
	   a alinearse nunca. Ninguna cifra del sitio —importes, cantidades, número
	   de reserva, fechas— se pone en la tipografía de acento. */
	--cc-font-numeric: var(--cc-font-body);

	/* ---------- Tamaños y pesos usados por los widgets del plugin ---------- */
	--cc-fs-xs: 0.75rem;      /* caption 12 */
	--cc-fs-sm: 0.875rem;     /* body small 14 */
	--cc-fs-base: 1.0625rem;  /* body 17 */
	--cc-fs-lg: 1.25rem;      /* body large 20 */
	--cc-fs-xl: clamp(1.5rem, 1.6vw, 1.75rem);      /* H4 */
	--cc-fs-2xl: clamp(1.875rem, 2.6vw, 2.375rem);  /* H3 */

	/* Escala por función. Los componentes consumen estos nombres en vez de
	   inventar tamaños por template. */
	--cc-type-display: clamp(3rem, 5.2vw, 4.75rem);
	--cc-type-page-title: clamp(2.75rem, 4.2vw, 3.875rem);
	--cc-type-section-title: clamp(2rem, 3.6vw, 3.25rem);
	--cc-type-subsection-title: clamp(1.5rem, 2.2vw, 2rem);
	--cc-type-card-title: clamp(1.125rem, 1.3vw, 1.3125rem);
	--cc-type-body-lg: clamp(1.0625rem, 0.45vw + 0.975rem, 1.25rem);
	--cc-type-body: clamp(1rem, 0.2vw + 0.96rem, 1.0625rem);
	--cc-type-body-sm: 0.875rem;

	/* Suelo tipográfico del sistema: 12 px. Nada baja de aquí.
	   Por debajo, un rótulo en versalitas con tracking deja de leerse de un
	   vistazo y se empieza a descifrar letra a letra —que es justo lo contrario
	   de para lo que sirve un rótulo—. La auditoría de agosto encontró
	   cuarenta y ocho declaraciones por debajo, tres de ellas a 9 px, todas
	   escritas a mano contra la cabecera de este archivo. Ahora todas pasan por
	   este nombre, así que el suelo se sube en un sitio y no en cuarenta y ocho.

	   Es un rótulo, no texto corrido: se usa con versalitas y tracking. Para
	   texto que se lee seguido, el mínimo es `--cc-type-body-sm`. */
	--cc-type-label: 0.75rem;

	/* Cuerpo de los controles que se leen de un vistazo: el `select` del filtro
	   del catálogo, los campos de la tarjeta de reserva y los enlaces del índice
	   de la ficha. Son la misma clase de texto —etiquetas cortas dentro de una
	   barra— y se declaran una sola vez para que no vuelvan a separarse: el
	   índice iba a 12 px y el filtro a 14. */
	--cc-type-control: 0.875rem;
	--cc-leading-heading: 1.08;
	--cc-leading-body: 1.65;
	--cc-leading-copy: 1.75;
	--cc-fw-400: 400;
	--cc-fw-500: 500;
	--cc-fw-600: 600;
	--cc-tracking: 0.12em;

	/* ---------- Layout ---------- */
	/* 1200 y no 1280: es el ancho de caja que la composición escribe en cada
	   sección de Elementor —`CC_BOX` en `scripts/design/lib.php`— y el que
	   produce el margen de 120 px a 1440. Con 1280, las páginas que se maquetan
	   en el tema y no en la composición —la nota del diario, las páginas de
	   sistema y las de WooCommerce— arrancaban en un sitio distinto que el
	   resto del sitio. Es la misma clase de defecto que tenía el gutter escrito
	   a mano en cinco archivos. */
	--cc-container: 1200px;
	--cc-container-narrow: 1180px;
	--cc-reading: 760px;
	--cc-card-padding: clamp(20px, 2vw, 28px);
	--cc-content-gap: clamp(24px, 3vw, 40px);

	/* Gutter lateral. Tres escalones y no cuatro, y en los mismos umbrales que
	   Elementor —767 y 1024—, para que el relleno que escribe la composición y
	   este token no puedan decir cosas distintas. El cuarto escalón que había
	   antes vivía solo en la hoja y era justo el que se desincronizaba. */
	--cc-gutter: 24px;

	/* ---------- Espaciado (§7.3) ---------- */
	--cc-space-1: 4px;
	--cc-space-2: 8px;
	--cc-space-3: 12px;
	--cc-space-4: 16px;
	--cc-space-5: 24px;
	--cc-space-6: 32px;
	--cc-space-7: 40px;
	--cc-space-8: 48px;
	--cc-space-9: 64px;
	--cc-space-10: 80px;
	--cc-space-11: 96px;
	--cc-space-12: 120px;
	--cc-space-13: 144px;

	/* Padding vertical de sección, fluido entre mobile y desktop (§7.3) */
	/* Las láminas tienen un ritmo mucho más denso de lo que sugiere la tabla:
	   las secciones respiran en horizontal, no estirándose en vertical. */
	--cc-section-hero: clamp(56px, 4vw + 32px, 96px);
	--cc-section-main: clamp(48px, 3.4vw + 24px, 88px);
	--cc-section-y: clamp(40px, 2.8vw + 20px, 72px);
	--cc-section-compact: clamp(28px, 2vw + 14px, 48px);

	/* ---------- Movimiento (§26) ----------
	   Las curvas de serie de CSS son flojas: les falta el arranque que hace que
	   una animación parezca intencionada y no un retardo. Estas tres son las
	   variantes fuertes de las tres únicas situaciones que hay.

	   Nunca `ease-in` en interfaz: empieza lento justo en el instante que el
	   usuario está mirando, y un desplegable con `ease-in` a 200 ms se siente
	   más lento que uno con `ease-out` a los mismos 200 ms. */

	/* Entra o sale: arranca rápido, se siente inmediato. */
	--cc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	/* Se mueve o se transforma en pantalla, sin entrar ni salir. */
	--cc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	/* Cambio de color o de hover: no necesita carácter. */
	--cc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

	/* Se conserva el nombre anterior para no romper lo ya escrito. */
	--cc-ease: var(--cc-ease-out);

	/* Duraciones. Por encima de 300 ms una interacción de interfaz deja de
	   sentirse como respuesta y empieza a sentirse como espera. */
	--cc-duration-press: 120ms;   /* realimentación de pulsación */
	--cc-duration-fast: 160ms;    /* hover, color, foco */
	--cc-duration: 220ms;         /* estados de tarjeta */
	--cc-duration-image: 320ms;   /* acercamiento de fotografía */
	--cc-duration-reveal: 380ms;  /* aparición al entrar en pantalla */

	/* Cuánto se hunde lo que se puede pulsar. Sutil a propósito: por debajo se
	   pierde y por encima parece un juguete. */
	--cc-press: 0.97;

	/* ---------- Radios (§8.1) ----------
	   La escala original era de 2 y 4 px, que sobre piezas de 400 px se lee
	   como esquina viva: todo salía cuadrado. Se añaden dos medidas mayores
	   para las superficies grandes —ficha y fotografía—, que es donde el
	   redondeo se nota y donde quita rigidez. Los controles pequeños se quedan
	   con las medidas finas: una casilla con 16 px de radio parece una pastilla. */
	--cc-radius-sm: 2px;
	--cc-radius-md: 4px;
	--cc-radius-lg: 12px;   /* fichas, retratos, fotografías de bloque */
	--cc-radius-xl: 20px;   /* superficies grandes y medias a sangre */
	--cc-radius-full: 999px;

	/* ---------- Sombra (§8.3), de uso contenido ---------- */
	--cc-shadow: 0 14px 40px rgba(23, 58, 52, 0.09);
	--cc-shadow-soft: 0 10px 28px rgba(23, 58, 52, 0.07);

	/* ---------- Capas ---------- */
	--cc-z-sticky: 20;

	/* Alto de la cabecera fija. Elementor no la fija sobre
	   `.elementor-location-header` sino sobre un contenedor interno, así que no
	   hay forma de leerlo desde CSS: se declara aquí una vez y lo usan todas las
	   barras que tienen que quedarse por debajo de ella. Medido: 85 px, igual en
	   escritorio y en teléfono. */
	--cc-header-alto: 85px;
	--cc-z-header: 40;
	--cc-z-overlay: 100;
}

@media (min-width: 768px) {
	:root { --cc-gutter: 40px; }
}

@media (min-width: 1025px) {
	:root { --cc-gutter: 72px; }
}