/* ==========================================================================
   Capítulos Culturales — Fundamentos
   Tipografía, layout, botones, enlaces, formularios y accesibilidad.
   Los componentes compuestos viven en components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base del documento (§38 Theme Style)
   -------------------------------------------------------------------------- */

body {
	background-color: var(--cc-surface-canvas);
	color: var(--cc-text);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-body);
	font-weight: 400;
	line-height: var(--cc-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { max-width: 100%; height: auto; }
html, body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   2. Escala tipográfica (§5 y §42)
   Los valores clamp reproducen la tabla desktop/tablet/mobile del sistema.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4,
.cc-display, .cc-h1, .cc-h2, .cc-h3, .cc-h4 {
	font-family: var(--cc-font-display);
	font-weight: 400;
	color: var(--cc-text);
	text-wrap: balance;
	margin: 0;
}

.cc-display {                                  /* 48 → 76 */
	font-size: var(--cc-type-display);
	line-height: 0.98;
	letter-spacing: -0.03em;
}

h1, .cc-h1 {                                   /* 44 → 62 */
	font-size: var(--cc-type-page-title);
	line-height: var(--cc-leading-heading);
	letter-spacing: -0.025em;
}

h2, .cc-h2 {                                   /* 32 → 52 */
	font-size: var(--cc-type-section-title);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

h3, .cc-h3 {                                   /* 24 → 32 */
	font-size: var(--cc-type-subsection-title);
	line-height: 1.16;
	letter-spacing: -0.02em;
}

h4, .cc-h4 {                                   /* 24 → 28 */
	font-size: clamp(1.5rem, 1.6vw, 1.75rem);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

/* En la columna más estrecha del sitio —260 px entre márgenes a 320 px— una
   palabra larga en cuerpo de titular no cabe en una línea y, como no se parte,
   se sale por la derecha: «Reclamaciones» pide 280 px a los 44 px que es el
   suelo de `--cc-type-page-title`. No llega a recortarse —`html` recorta a los
   320—, pero el titular se come el margen y termina a 10 px del borde mientras
   la línea de encima empieza a 30.

   Se resuelve partiendo la palabra, no encogiendo la escala: bajar el suelo
   dejaría más pequeños todos los titulares de todos los teléfonos por una
   palabra de trece letras. El documento declara `lang="es"`, así que el
   guionado es el español y cae donde debe. Solo por debajo de 380 px: por
   encima no hay palabra del sitio que no quepa, y un titular guionado sin
   necesidad es peor titular. */
@media (max-width: 380px) {
	:is(h1, h2, h3, .cc-display, .cc-h1, .cc-h2, .cc-h3) {
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* H5 rompe la serie: es Inter 600, no Playfair (§5). */
h5, .cc-h5 {
	font-family: var(--cc-font-body);
	font-size: clamp(1.1875rem, 0.9vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}

.cc-lead {                                     /* 18 → 20 */
	font-family: var(--cc-font-body);
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);
	line-height: 1.55;
	color: var(--cc-text-muted);
}

.cc-small { font-size: 0.875rem; line-height: 1.55; }
.cc-caption { font-size: 0.75rem; line-height: 1.5; color: var(--cc-text-muted); }

/* Énfasis editorial: fragmento en itálica dentro de un titular (§6). */
.cc-em {
	font-style: italic;
	color: var(--cc-gold-text);
}

/* Eyebrow / microtitular (§17) */
.cc-eyebrow {
	display: block;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
	margin: 0 0 var(--cc-space-4);
}

@media (max-width: 767px) {
	.cc-eyebrow { font-size: 0.75rem; }
}

/* Firma gráfica: trazo dorado (§17, §25.3) */
.cc-gold-rule {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--cc-gold);
	border: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Layout (§7, §39)
   -------------------------------------------------------------------------- */

.cc-section { padding-block: var(--cc-section-y); }
.cc-section--hero { padding-block: var(--cc-section-hero); }
.cc-section--main { padding-block: var(--cc-section-main); }
.cc-section--compact { padding-block: var(--cc-section-compact); }

/* A sangre: la sección no aporta aire porque la banda que lleva dentro ya es
   la pieza. Sin esto, una banda oscura de borde a borde queda con dos filos
   claros —arriba y abajo— del color de la sección que la envuelve, y se lee
   como una imagen mal recortada y no como una banda. */
.cc-section--sangre { padding-block: 0; }

/* Superficies (§9) */
.cc-section--ivory { background-color: var(--cc-ivory); color: var(--cc-text); }
.cc-section--stone { background-color: var(--cc-stone); color: var(--cc-text); }

.cc-section--dark,
.cc-hero,
.cc-pagehead,
.cc-trip-hero,
.cc-article__head,
.cc-system-page__hero,
.cc-cta-final,
.cc-author__tile,
.cc-founder,
.cc-chapter__aviso,
header,
footer {
	/* Sobre fondo oscuro el oro de texto es el claro. Se declara aquí, una vez,
	   y lo heredan todos los componentes de dentro. */
	--cc-gold-text: var(--cc-gold-on-dark);
}

.cc-section--dark,

.cc-pagehead,
.cc-trip-hero,
.cc-article__head,
.cc-system-page__hero {
	color: var(--cc-text-inverse);
}

/* Sección que ocupa pantalla: para los dos bloques que son una declaración y
   no una lista —el manifiesto y los principios—. El contenido se centra en
   vertical y la sección deja de medir lo que mide su texto, que es lo que hacía
   que un párrafo de cuatro líneas ocupara la mitad que la sección de al lado. */
.cc-section--pantalla {
	min-height: 78vh;
	min-height: 78svh;
	justify-content: center;
}

@media (max-width: 767px) {
	/* En móvil no: reservar 78svh para tres líneas de texto es aire vacío que
	   solo alarga el recorrido del pulgar. */
	.cc-section--pantalla { min-height: 0; }
}

.cc-section--dark { background-color: var(--cc-black); }

/* La antigua superficie verde se convierte en papel de marca: un fondo cálido
   con una presencia verde muy leve. El verde queda reservado para acciones,
   enlaces y pequeños gestos de identidad. */
.cc-section--green {
	--cc-gold-text: var(--cc-gold-on-light);
	background-color: var(--cc-surface-brand);
	background-image:
		radial-gradient(circle at 8% 12%, rgba(23, 58, 52, 0.085), transparent 32%),
		linear-gradient(115deg, rgba(255, 253, 249, 0.42), transparent 58%);
	color: var(--cc-text);
	border-block: 1px solid rgba(23, 58, 52, 0.12);
}

.cc-section--dark :is(h1,h2,h3,h4,h5,.cc-display,.cc-h1,.cc-h2,.cc-h3,.cc-h4) {
	color: var(--cc-text-inverse);
}

.cc-section--green :is(h1,h2,h3,h4,h5,.cc-display,.cc-h1,.cc-h2,.cc-h3,.cc-h4) { color: var(--cc-text); }
.cc-section--dark .cc-lead { color: var(--cc-text-inverse-muted); }
.cc-section--green .cc-lead { color: var(--cc-text-muted); }

.cc-reading-width { max-width: var(--cc-reading); }

/* Párrafo de entrada (§25.2) */
.cc-intro {
	max-width: var(--cc-reading);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Botones (§13)
   -------------------------------------------------------------------------- */

.cc-btn,
.cc-section .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	min-height: 48px;
	padding: 0 26px;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--cc-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--cc-duration) var(--cc-ease),
		color var(--cc-duration) var(--cc-ease),
		border-color var(--cc-duration) var(--cc-ease),
		transform var(--cc-duration-fast) var(--cc-ease);
}

/* Primario: oro sobre cualquier fondo. */
.cc-btn--primary {
	background-color: var(--cc-gold);
	border-color: var(--cc-gold);
	color: var(--cc-black);
}

/* Hover del botón primario: se oscurece la superficie, no cambia la tinta.
   Estaba pasando a blanco sobre `--cc-gold-dark` y daba 3,84:1, por debajo del
   4,5:1 que pide WCAG 2.2 §1.4.3 para 13 px. Y era además el único botón que
   cambiaba de tinta a mitad de interacción: durante la transición el texto
   atraviesa el punto en que ninguno de los dos colores tiene contraste. El
   negro se queda quieto y solo se mueve el fondo, que es lo que ya hacía
   `.cc-booking__cta` —el botón de reserva— desde el principio. */
.cc-btn--primary:hover,
.cc-btn--primary:focus-visible {
	background-color: var(--cc-gold-dark);
	border-color: var(--cc-gold-dark);
	color: var(--cc-black);
	transform: translateY(-1px);
}

/* Secundario sobre fondo oscuro. */
.cc-btn--secondary-dark {
	background-color: transparent;
	border-color: rgba(246, 243, 238, 0.45);
	color: var(--cc-ivory);
}

.cc-btn--secondary-dark:hover,
.cc-btn--secondary-dark:focus-visible {
	background-color: var(--cc-ivory);
	border-color: var(--cc-ivory);
	color: var(--cc-black);
}

/* Secundario sobre fondo claro. */
.cc-btn--secondary-light {
	background-color: transparent;
	border-color: var(--cc-green);
	color: var(--cc-green);
}

.cc-btn--secondary-light:hover,
.cc-btn--secondary-light:focus-visible {
	background-color: var(--cc-green);
	color: var(--cc-ivory);
}

/* Enlace editorial con flecha (§13.4) */
.cc-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	/* Mismo mínimo de objetivo táctil que su gemelo de Elementor (§2.5.8). */
	min-height: 24px;
	padding-block: var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-gold-text);
	transition: gap var(--cc-duration) var(--cc-ease), color var(--cc-duration) var(--cc-ease);
}

/* Cuando la flecha es el enlace real —y no una etiqueta informativa dentro de
   una tarjeta— su caja táctil alcanza 44 px sin agrandar el texto. */
a.cc-arrow-link { min-height: 44px; }

/* Tras `hover: hover` por lo mismo que el desplazamiento de la punta: en táctil
   el hover se queda pegado. En la ficha de recurso la flecha ya no es el enlace
   —lo es el título—, así que el hover llega desde la ficha. */
@media (hover: hover) and (pointer: fine) {
	a.cc-arrow-link:hover,
	.cc-resource:hover .cc-arrow-link { gap: var(--cc-space-3); color: var(--cc-gold-text); }

	.cc-section--dark a.cc-arrow-link:hover,
	.cc-section--dark .cc-resource:hover .cc-arrow-link,
	.cc-hero a.cc-arrow-link:hover,
	.cc-pagehead a.cc-arrow-link:hover { color: var(--cc-ivory); }

	.cc-section--green a.cc-arrow-link:hover,
	.cc-section--green .cc-resource:hover .cc-arrow-link { color: var(--cc-gold-on-light); }
}

/* --------------------------------------------------------------------------
   5. Enlaces (§14)
   -------------------------------------------------------------------------- */

a { color: var(--cc-green); transition: color var(--cc-duration-fast) var(--cc-ease); }
a:hover { color: var(--cc-gold-text); }

/* En texto corrido el enlace no depende solo del color. */
.cc-prose a,
.entry-content a:not(.cc-btn):not(.elementor-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.cc-section--dark a { color: var(--cc-gold-on-dark); }
.cc-section--green a { color: var(--cc-green); }

.cc-section--dark a:hover { color: var(--cc-ivory); }
.cc-section--green a:hover { color: var(--cc-gold-on-light); }

/* --------------------------------------------------------------------------
   6. Formularios (§24)
   -------------------------------------------------------------------------- */

.cc-form label,
.elementor-field-group > label {
	display: block;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-text);
	margin-bottom: var(--cc-space-2);
}

/* Campos sobre superficie clara. La barra de boletín vive sobre negro y
   define los suyos en components.css, así que se excluye aquí. */
.cc-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea),
.elementor-widget-form:not(.cc-newsletter) .elementor-field-textual {
	width: 100%;
	min-height: 48px;
	padding: var(--cc-space-3) var(--cc-space-4);
	font-family: var(--cc-font-body);
	font-size: 1rem;
	color: var(--cc-text);
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	transition: border-color var(--cc-duration-fast) var(--cc-ease),
		box-shadow var(--cc-duration-fast) var(--cc-ease);
}

/* El campo enfocado sustituye el contorno por su propio borde, así que ese
   borde pasa a ser el indicador de foco y tiene que llegar a 3:1 como
   cualquier otro. El oro de marca daba 2,83:1 sobre blanco, y la sombra que lo
   acompaña está al 18 % de opacidad: no aporta contraste medible, es un halo.
   Con el oro de lectura el borde sube a 6,75:1 y el halo se queda como lo que
   siempre fue, decoración. */
.cc-form :is(input, select, textarea):focus,
.elementor-widget-form:not(.cc-newsletter) .elementor-field-textual:focus {
	outline: none;
	border-color: var(--cc-gold-text);
	box-shadow: 0 0 0 3px var(--cc-gold-soft);
}

::placeholder { color: rgba(17, 17, 17, 0.42); }

/* --------------------------------------------------------------------------
   7. Accesibilidad (§29)
   -------------------------------------------------------------------------- */

/* El anillo de foco va con el oro de lectura, no con el de marca.

   El razonamiento es el mismo que `tokens.css` ya hace para el texto pequeño:
   el oro de marca es un color de trazo. Sobre marfil da 2,56:1 y sobre piedra
   1,90:1, cuando WCAG 2.2 (1.4.11, elementos no textuales) pide 3:1 contra el
   color adyacente. Un indicador de foco se rige por ese criterio, no por el de
   un filete decorativo, así que estaba prácticamente invisible en las cinco
   secciones claras de la portada.

   `--cc-gold-text` se hereda y las secciones oscuras ya lo redeclaran más
   abajo, así que esta única regla sirve para las dos superficies:
   6,75:1 sobre marfil · 5,03:1 sobre piedra · 5,51:1 sobre verde · 8,38:1 sobre
   negro. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cc-gold-text);
	outline-offset: 3px;
	border-radius: var(--cc-radius-sm);
}

.cc-skip-link {
	position: absolute;
	inset-inline-start: var(--cc-space-4);
	inset-block-start: -100vh;
	z-index: 999;
	padding: var(--cc-space-3) var(--cc-space-5);
	background-color: var(--cc-green);
	color: var(--cc-ivory);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--cc-radius-sm);
}

.cc-skip-link:focus-visible { inset-block-start: var(--cc-space-4); }

/* Salto a un ancla: la cabecera va fija, así que sin este margen la sección
   aterriza justo debajo de ella y el titular queda tapado. Se lo lleva todo lo
   que puede ser destino de un enlace interno, no solo las secciones. */
:target {
	scroll-margin-block-start: 96px;
}

@media (max-width: 767px) {
	:target { scroll-margin-block-start: 84px; }
}

.cc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Objetivo táctil mínimo en móvil (§28). */
@media (max-width: 767px) {
	.cc-btn,
	.elementor-button,
	.cc-tap-target { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   8. Movimiento (§26)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   9. Utilidades (§43) — usar con moderación
   -------------------------------------------------------------------------- */

.cc-text-gold { color: var(--cc-gold-text); }
.cc-text-green { color: var(--cc-green); }
.cc-text-ivory { color: var(--cc-ivory); }
.cc-bg-ivory { background-color: var(--cc-ivory); }
.cc-bg-black { background-color: var(--cc-black); }
.cc-bg-green { background-color: var(--cc-green); }
.cc-bg-stone { background-color: var(--cc-stone); }

/* ==========================================================================
   PULSACIÓN Y PUNTERO

   Dos ausencias explicaban que la interfaz se sintiera estática:

   1. Nada respondía a la pulsación. Un elemento que se hunde un 3 % al
      apretarlo confirma que la interfaz oyó al usuario, y es la diferencia
      entre tocar una pantalla y tocar un botón. Va a 120 ms, que es lo que
      tarda en leerse como respuesta y no como animación.

   2. Ningún hover estaba protegido. En una pantalla táctil el hover se dispara
      al tocar y se queda pegado hasta que tocas otra cosa, así que la tarjeta
      se levantaba y no volvía a bajar. Todo lo que se mueve al pasar por
      encima vive ahora dentro de `(hover: hover) and (pointer: fine)`.
   ========================================================================== */

:where( .cc-btn, .elementor-button, .cc-arrow-link, .cc-circle-link, .cc-chapter, .cc-author, .cc-trip ) {
	transition-timing-function: var(--cc-ease-out);
}

/* Realimentación de pulsación. `:where()` mantiene la especificidad a cero, así
   que cualquier componente puede anularlo sin pelear. */
:where( .cc-btn, .elementor-button, .cc-arrow-link ):active {
	transform: scale( var(--cc-press) );
	transition-duration: var(--cc-duration-press);
}

/* Las fichas se hunden menos: son grandes, y un 3 % en una pieza de 400 px se
   nota como un salto. */
:where( .cc-chapter, .cc-author, .cc-trip ):active {
	transform: scale( 0.995 );
	transition-duration: var(--cc-duration-press);
}

@media (prefers-reduced-motion: reduce) {
	:where( .cc-btn, .elementor-button, .cc-arrow-link, .cc-chapter, .cc-author, .cc-trip ):active {
		transform: none;
	}
}