/* ==========================================================================
   Capítulos Culturales — Componentes editoriales
   Reconstruidos a partir de las láminas 8, 9 y 10 de la Propuesta Digital 2026.

   Tres reglas que gobiernan todo lo que hay aquí:
   1. La fotografía manda. El texto se apoya en degradados, nunca en cajas.
   2. La etiqueta de sección es pequeña y en versalitas; el Playfair grande se
      reserva para el hero, las citas y los nombres propios.
   3. Nada de sombras ni esquinas redondeadas: se separa con línea y con aire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   Ocupa algo más de media pantalla, no toda: debajo tiene que asomar la
   franja de atributos, que es la que da confianza.
   -------------------------------------------------------------------------- */

.cc-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* `svh` y no `vh`: en iOS, `vh` mide la ventana con la barra del navegador
	   ya retraída, así que el hero nacía más alto que la pantalla y el primer
	   scroll era un salto. `vh` queda de reserva para quien no entienda `svh`. */
	min-height: 88vh;
	min-height: 88svh;
	overflow: hidden;
	background-color: var(--cc-black);
}

.cc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--cc-veil-full) 0%,
		var(--cc-veil-strong) 32%,
		var(--cc-veil-soft) 62%,
		var(--cc-veil-none) 100%
	);
}

@media (max-width: 767px) {
	.cc-hero { min-height: 92vh; min-height: 92svh; align-items: flex-end; }
	.cc-hero::after {
		background: linear-gradient(
			0deg,
			var(--cc-veil-full) 0%,
			var(--cc-veil-strong) 46%,
			var(--cc-veil-soft) 100%
		);
	}
}

/* La fotografía del hero, que es un widget y no el fondo del contenedor. Va
   detrás de todo y el degradado de `.cc-hero::after` se apoya encima. */
.cc-hero .elementor-widget-cc-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
}

.cc-hero .cc-hero-media,
.cc-hero .cc-hero-media__img {
	width: 100%;
	height: 100%;
}

.cc-hero .cc-hero-media__img {
	display: block;
	object-fit: cover;
	object-position: center;
}

.cc-hero::after { z-index: 0; }

.cc-hero__body {
	position: relative;
	z-index: 1;
	/* 640 y no 560: a 560 los dos botones del hero no cabían en una línea y el
	   secundario caía debajo del primario, que los lee como una lista. */
	max-width: 640px;
	color: var(--cc-ivory);
}

/* El titular del hero es grande, pero no gigante: el protagonismo es de la
   fotografía. La segunda línea va en itálica dorada (firma de la marca). */
.cc-hero__body :is(h1, .cc-h1) {
	font-size: var(--cc-type-page-title);
	line-height: 1.06;
	color: var(--cc-ivory);
}

.cc-hero__body .cc-lead {
	max-width: 42ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(246, 243, 238, 0.82);
}

.cc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-5);
	margin-top: var(--cc-space-6);
}

/* Cabecera de página interior: misma lógica, más compacta. */
.cc-pagehead {
	--cc-gold-text: var(--cc-gold-on-dark);
	position: relative;
	background-color: var(--cc-surface-dark);
	background-image:
		radial-gradient(circle at 12% 18%, rgba(23, 58, 52, 0.5), transparent 34%),
		linear-gradient(110deg, rgba(184, 148, 90, 0.07), transparent 52%);
	color: var(--cc-text-inverse);
	padding-block: clamp(56px, 4.5vw, 88px);
	overflow: hidden;
}

.cc-pagehead :is(h1, .cc-h1) {
	color: var(--cc-ivory);
	font-size: var(--cc-type-page-title);
	line-height: 1.08;
}

.cc-pagehead .cc-lead {
	max-width: 56ch;
	font-size: 0.9375rem;
	color: rgba(246, 243, 238, 0.78);
}

/* --------------------------------------------------------------------------
   2. Etiqueta de sección
   El patrón dominante de las láminas: microtitular a la izquierda y enlace
   dorado a la derecha, separados por una línea fina que cruza el ancho.
   -------------------------------------------------------------------------- */

.cc-label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-4);
	width: 100%;
	padding-bottom: var(--cc-space-4);
	border-bottom: 1px solid var(--cc-border);
	margin-bottom: var(--cc-space-7);
}

.cc-label {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-text);
	margin: 0;
}

.cc-section--dark .cc-label-row { border-bottom-color: var(--cc-border-inverse); }
.cc-section--green .cc-label-row { border-bottom-color: var(--cc-border); }

.cc-section--dark .cc-label { color: var(--cc-ivory); }
.cc-section--green .cc-label { color: var(--cc-text); }

/* Título de sección en Playfair, cuando el bloque lo pide (láminas 8 y 9). */
.cc-section-title {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Botones y enlaces circulares
   El botón redondo con flecha es la firma de interacción de la propuesta.
   -------------------------------------------------------------------------- */

.cc-circle-link {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-3);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-ivory);
}

.cc-circle-link:hover { color: var(--cc-ivory); }

/* Variante sobre fondo claro. */
.cc-circle-link--light { color: var(--cc-green); }

/* --------------------------------------------------------------------------
   4. Franja de atributos
   Lámina 9: cinco columnas centradas sobre marfil, icono dorado de trazo fino,
   etiqueta en versalitas a dos líneas y una frase corta.
   -------------------------------------------------------------------------- */

.cc-feature-strip {
	display: grid;
	/* Las columnas las manda el número de piezas, no la lámina. Estaba escrito
	   `repeat(5, …)` porque la lámina 9 traía cinco atributos; la franja de
	   `/especialistas/` lleva cuatro, así que la quinta columna se quedaba
	   vacía y **240 px de los 1200 no se usaban**: las cuatro cajas acababan en
	   x=1080 y el filete de la última no llegaba al margen derecho, que es lo
	   que se veía como una fila descolgada.

	   Con `:has()` la rejilla cuenta sus propios hijos. Se escribe de menos a
	   más columnas —el último selector que casa es el que gana— y el valor por
	   defecto sigue siendo cinco, para las franjas que sí traen cinco. */
	grid-template-columns: repeat(var(--cc-feature-columnas, 5), minmax(0, 1fr));
	gap: 0;
	width: 100%;
}

/* Todos los selectores de reparto se escriben con la misma forma —una clase y
   un `:has()`, (0,2,0)— en todos los anchos. Con especificidades distintas, la
   regla de un ancho mayor podía ganarle a la de un ancho menor y el reparto
   dejaba de seguir la ventana. Aquí decide el orden, que es lo que se lee. */
.cc-feature-strip:has(> :last-child:nth-child(2)) { --cc-feature-columnas: 2; }
.cc-feature-strip:has(> :last-child:nth-child(3)) { --cc-feature-columnas: 3; }
.cc-feature-strip:has(> :last-child:nth-child(4)) { --cc-feature-columnas: 4; }
.cc-feature-strip:has(> :last-child:nth-child(5)) { --cc-feature-columnas: 5; }

.cc-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cc-space-3);
	padding: var(--cc-space-2) var(--cc-space-5);
	text-align: center;
	border-inline-start: 1px solid var(--cc-border);
}

.cc-feature:first-child { border-inline-start: 0; }

.cc-feature__label {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--cc-text);
	margin: 0;

	/* 16ch es donde queremos que pliegue la línea, no un recorte. A 320 px la
	   caja quedaba en 82 px y «INVESTIGAN» mide 88: una palabra sola no se
	   parte, así que se salía por la derecha. `max()` dice lo que se quería
	   decir desde el principio: pliega a los dieciséis caracteres, salvo que
	   haya una palabra más larga que eso. */
	max-width: max(16ch, min-content);
}

.cc-feature__text {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
	margin: 0;
	max-width: 26ch;
}

.cc-section--dark .cc-feature { border-inline-start-color: var(--cc-border-inverse); }
.cc-section--green .cc-feature { border-inline-start-color: var(--cc-border); }

.cc-section--dark .cc-feature__label { color: var(--cc-ivory); }
.cc-section--green .cc-feature__label { color: var(--cc-text); }

.cc-section--dark .cc-feature__text { color: var(--cc-text-inverse-muted); }
.cc-section--green .cc-feature__text { color: var(--cc-text-muted); }

@media (max-width: 1024px) {
	.cc-feature:nth-child(3n + 1) { border-inline-start: 0; }
	.cc-feature { padding-block: var(--cc-space-5); }

	.cc-feature-strip:has(> :last-child:nth-child(2)) { --cc-feature-columnas: 2; }
	.cc-feature-strip:has(> :last-child:nth-child(3)) { --cc-feature-columnas: 3; }
	.cc-feature-strip:has(> :last-child:nth-child(5)) { --cc-feature-columnas: 3; }

	/* Cuatro piezas en tres columnas dejan una huérfana en la segunda fila. Dos
	   y dos es par y no deja a nadie sola, así que el filete divisorio también
	   cambia de sitio: se quita al primero de cada par y vuelve al que la regla
	   de tres columnas había dejado sin él. */
	.cc-feature-strip:has(> :last-child:nth-child(4)) { --cc-feature-columnas: 2; }

	.cc-feature-strip:has(> :last-child:nth-child(4)) .cc-feature:nth-child(3n + 1) {
		border-inline-start: 1px solid var(--cc-border);
	}

	.cc-feature-strip:has(> :last-child:nth-child(4)) .cc-feature:nth-child(2n + 1) {
		border-inline-start: 0;
	}
}

@media (max-width: 600px) {
	.cc-feature-strip:has(> :last-child:nth-child(n + 2)) { --cc-feature-columnas: 2; }
	.cc-feature:nth-child(3n + 1) { border-inline-start: 1px solid var(--cc-border); }
	.cc-feature:nth-child(2n + 1) { border-inline-start: 0; }
}

/* Una sola columna, cuando dos ya no dan la medida que el componente pide.
   `.cc-feature__text` declara `max-width: 26ch`: esa es la medida de línea que
   esta pieza quiere, y a 1440 px la cumple —29 caracteres—. Medido en
   `/especialistas/`, dos columnas la incumplen por la mitad: a 320 px cada
   columna queda en 130 px y el texto cae a **doce caracteres por línea**; a
   390 px, a diecisiete. A doce, «Cada especialista tiene obra propia sobre su
   materia: libros, artículos académicos o comisariado de exposiciones» se
   sirve en trece líneas, dos de ellas de una sola palabra —«o», «de»—.

   El corte va en 480 px porque es donde dos columnas dejan de alcanzar los
   26ch: por encima dan 23 caracteres, que es la medida de la pieza; por debajo
   se desploman. Con una columna son 30 a 320 px y 41 a 390.

   La auditoría lo había anotado como decisión de maqueta y no como defecto. No
   lo es: el componente dice por escrito qué medida necesita, y dos columnas
   por debajo de 480 px no se la pueden dar.

   El filete que separaba las columnas pasa de vertical a horizontal: en una
   sola columna, un borde a la izquierda no separa nada. */
@media (max-width: 479px) {
	.cc-feature-strip:has(> :last-child:nth-child(n + 1)) { --cc-feature-columnas: 1; }

	.cc-feature,
	.cc-feature:nth-child(3n + 1),
	.cc-feature:nth-child(2n + 1) {
		border-inline-start: 0;
		border-block-start: 1px solid var(--cc-border);
	}

	.cc-feature:first-child { border-block-start: 0; }

	.cc-section--dark .cc-feature { border-block-start-color: var(--cc-border-inverse); }
}

/* --------------------------------------------------------------------------
   5. Panel de especialista
   Lámina 9: banda oscura con retrato a la derecha fundido en el fondo.
   -------------------------------------------------------------------------- */

.cc-expert-panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 340px;
	background-color: var(--cc-black);
	color: var(--cc-ivory);
	overflow: hidden;
	width: 100%;
}

/* El retrato se funde con el fondo por la izquierda, sin borde duro. */
.cc-expert-panel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--cc-black) 0%, rgba(17, 17, 17, 0.35) 38%, rgba(17, 17, 17, 0) 72%);
}

@media (max-width: 767px) {
}

/* --------------------------------------------------------------------------
   6. Objeto multimedia horizontal
   Lámina 9, «¿Qué nos hace diferentes?» e «Ideas y reflexiones»: imagen
   cuadrada pequeña a la izquierda y texto a la derecha. No es una card.
   -------------------------------------------------------------------------- */

.cc-media-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cc-space-5);
	width: 100%;
}

.cc-media {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4);
}

.cc-media__thumb {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--cc-stone);
}

.cc-media__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cc-duration-image) var(--cc-ease);
}

.cc-media:hover .cc-media__thumb img { transform: scale(1.04); }

/* En móvil, Elementor pone `flex-wrap: wrap` a todos los contenedores. En una
   columna con alto definido —y el de la rejilla lo es— eso no envuelve al final
   de la línea: abre una segunda columna. El texto de cada recurso salía a la
   derecha de su fotografía, fuera de la caja y cortado por el borde. */
.cc-media { flex-wrap: nowrap; }

.cc-media__body { display: flex; flex-direction: column; flex: 1 1 auto; }

.cc-media__type {
	display: block;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
	margin-bottom: var(--cc-space-2);
}

.cc-media__title {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 var(--cc-space-2);
}

.cc-media__title a { text-decoration: none; color: inherit; }
.cc-media__title a:hover { color: var(--cc-gold-text); }

.cc-media__text {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
	margin: 0;
}

/* La variante «recurso» va sobre una superficie con filete, como en la lámina. */
.cc-media--boxed {
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	gap: 0;
	transition: border-color var(--cc-duration) var(--cc-ease);
}

.cc-media--boxed:hover { border-color: var(--cc-gold); }
.cc-media--boxed .cc-media__body { padding: var(--cc-space-5); }
.cc-media:not(.cc-media--boxed) .cc-media__body { padding-top: var(--cc-space-4); }

/* Un filete dorado bajo el titular, como en la ficha de especialista. */
.cc-media__title { padding-bottom: var(--cc-space-3); }

@media (prefers-reduced-motion: reduce) {
	.cc-media__thumb img { transition: none; }
	.cc-media:hover .cc-media__thumb img { transform: none; }
}

/* Métodos de pago previstos para el lanzamiento. Se mantienen monocromos y
   subordinados a los legales: aportan confianza sin competir con la marca. */
.cc-payment-methods {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--cc-font-body);
	color: var(--cc-text-inverse-muted);
}

.cc-payment-methods__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
}

.cc-payment-methods__item svg {
	display: block;
	width: auto;
	max-width: 31px;
	height: 22px;
	fill: currentColor;
}

.cc-payment-methods__wordmark {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* El diario ya termina con su propia invitación editorial. Repetir la misma
   captación unas líneas después en el pie solo añade longitud y ruido. */
body:is(.page-id-14, .category, .tag, .date, .author, .search) footer .cc-footer-newsletter {
	display: none;
}

/* ==========================================================================
   La nota del diario

   Rediseñada. Antes era la maqueta por defecto de cualquier blog: banda oscura
   con el titular, fotografía debajo a todo lo ancho, texto con una caja blanca
   de llamada al lado, y una fila de relacionadas. Bien medida tras la ronda de
   márgenes de esa mañana, pero sin parecerse a ninguna otra página del sitio.

   Ahora usa las piezas aprobadas: la apertura es una banda de tinta a sangre
   con la obra a un lado y el titular al otro —la misma pieza que la banda de
   cita de `/especialistas/`—, los datos de la lectura viven en el margen y el
   cierre es una banda propia.
   ========================================================================== */

.cc-article { background-color: var(--cc-ivory); }

/* Una sola caja para toda la página.
 *
 * `width: min(100%, 1280px)` con relleno lateral por dentro daba 1.136 px de
 * contenido empezando en x=152, mientras la caja propia de la cabecera —980 px
 * centrados— empezaba en x=230 y la fotografía en x=72. Cuatro márgenes en una
 * misma página, y ninguno de los 120 px que produce cualquier sección
 * compuesta.
 *
 * La fórmula que sí lo reproduce es tope de caja **más** los dos gutters, con
 * el relleno por dentro: a 1440 da 1344 centrados y el contenido en x=120; a
 * 1024 y a 390 se pega al gutter, que es lo que hace Elementor. */
.cc-article__box,
.cc-article__layout,
.cc-system-page__inner,
.cc-system-links__inner {
	width: 100%;
	max-width: calc(var(--cc-container) + (2 * var(--cc-gutter)));
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

/* --------------------------------------------------------------------------
   1. La apertura
   -------------------------------------------------------------------------- */

/* Banda de tinta a sangre, en dos columnas: el titular a la izquierda —donde
   empieza a leerse— y la obra a la derecha. Es la proporción de la banda de
   cita, 7/5, con los papeles cambiados. */
.cc-article__apertura {
	--cc-gold-text: var(--cc-gold-on-dark);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(32px, 4vw, 72px);
	min-height: min(72svh, 620px);
	padding-block: clamp(48px, 6vw, 88px);
	padding-inline: max(var(--cc-gutter), calc((100% - var(--cc-container)) / 2));
	background-color: var(--cc-black);
	color: var(--cc-text-inverse);
	overflow: hidden;
}

/* La obra, detrás: es el color de la nota antes de leer una palabra, y es lo
   que evita que las cuatro notas abran con la misma banda de tinta plana. Va
   nítida en esta capa; quien la desenfoca es el velo de encima. */
.cc-article__apertura::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--cc-obra);
	background-size: cover;
	background-position: 50% 42%;
}

/* El velo va en las dos direcciones que hacen falta, como en el hero de la
   portada: uno lateral para que el titular se lea sobre lo que haya detrás, y
   otro plano que garantiza el contraste mínimo con cualquier obra, clara u
   oscura. Sin él, una nota ilustrada con una obra luminosa —Hokusai lo es—
   dejaría el titular en marfil sobre marfil. */
/* El desenfoque lo pone esta capa con `backdrop-filter`, no la de abajo con
   `filter`.
 *
 * Desenfocar la propia capa de imagen obliga a agrandarla —el desenfoque aclara
 * los cantos y deja un halo contra el borde de la banda—, y agrandarla la
 * convierte en contenido desbordado: medido, la banda de 1.440 px acusaba
 * 1.498 con `transform: scale(1.08)` y 1.555 con `inset: -8%`. `backdrop-filter`
 * desenfoca lo que hay detrás dentro de la propia caja, sin halo y sin crecer.
 *
 * El velo va en las dos direcciones que hacen falta, como en el hero de la
 * portada: uno lateral para que el titular se lea sobre lo que haya detrás, y
 * otro plano que asegura el contraste con cualquier obra, clara u oscura. Sin
 * él, una nota ilustrada con una obra luminosa —Hokusai lo es— dejaría el
 * titular en marfil sobre marfil. */
.cc-article__apertura::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(30px) saturate(1.2) brightness(0.62);
	background:
		linear-gradient(90deg, rgba(17, 17, 17, 0.88) 0%, rgba(17, 17, 17, 0.66) 48%, rgba(17, 17, 17, 0.34) 100%),
		rgba(17, 17, 17, 0.12);
}

/* Sin desenfoque disponible, la obra se apaga en su propia capa: el halo no
   existe si no hay blur, y lo que no puede faltar es el contraste. */
@supports not (backdrop-filter: blur(1px)) {
	.cc-article__apertura::before { filter: brightness(0.45) saturate(1.1); }
}

/* Sin obra no hay fondo que velar: la banda es tinta lisa y las dos capas
   sobran. */
.cc-article__apertura--sin-obra::before,
.cc-article__apertura--sin-obra::after { content: none; }

/* Sin obra, el titular ocupa la banda entera y se acota a su medida de
   lectura. No se reserva media banda de negro vacía: aquí no hay fila que
   mantener en su renglón, que es lo que sí obliga a reservar el hueco en las
   fichas del diario. */
.cc-article__apertura--sin-obra {
	grid-template-columns: minmax(0, 1fr);
	min-height: min(56svh, 480px);
}

.cc-article__titulo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-space-4);
	min-width: 0;
}

/* Con el bloque padre delante, (0,2,1): el kit de Elementor colorea los
   encabezados con `.elementor-kit-10 h1` —(0,1,1)— y a una sola clase le gana.
   Es la trampa nº 1 de `docs/PATRON-HERO.md`. */
.cc-article__apertura .cc-article__titulo h1 {
	max-width: 20ch;
	margin: 0;
	color: var(--cc-ivory);
	font-size: var(--cc-type-page-title);
	line-height: 1.04;
	text-wrap: balance;
}

.cc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cc-breadcrumb a { color: var(--cc-gold-on-dark); text-underline-offset: 3px; }
.cc-breadcrumb span { color: var(--cc-text-inverse-muted); }

.cc-article__apertura .cc-eyebrow { margin: 0; }

.cc-article__deck {
	max-width: 52ch;
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--cc-text-inverse-muted);
	text-wrap: pretty;
}

/* La obra entera sobre la tinta, no recortada en una franja. `contain` y no
   `cover`: el negro de alrededor hace de paspartú, como en una sala. */
.cc-article__obra {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.cc-article__obra img {
	display: block;
	/* `auto` y no `100%`: con ancho forzado, una obra vertical deja franjas
	   transparentes dentro de su propia caja y la sombra se dibuja alrededor de
	   la caja, no de la obra. Así la caja se ajusta a lo que se ve. */
	width: auto;
	max-width: 100%;
	max-height: min(60svh, 520px);
	height: auto;
	/* Una sombra proyectada, que es lo que separa una lámina de su fondo cuando
	   los dos son oscuros. Sin ella, una obra en penumbra se funde con la
	   banda: fue el mismo defecto de la cita de «La ronda de noche». */
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
	.cc-article__apertura {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* La obra primero: a esta anchura, media banda de obra no es una obra, y
	   entrar por la imagen es lo que hace el resto del sitio. */
	.cc-article__obra { order: -1; }
	.cc-article__obra img { max-height: min(42svh, 360px); }
}

/* --------------------------------------------------------------------------
   2. El cuerpo, con los datos en el margen
   -------------------------------------------------------------------------- */

.cc-article__layout {
	display: grid;
	grid-template-columns: minmax(200px, 240px) minmax(0, var(--cc-reading));
	justify-content: space-between;
	gap: clamp(40px, 6vw, 96px);
	padding-block: clamp(48px, 6vw, 88px);
}

/* El margen acompaña mientras se lee. Antes los datos iban en un pie bajo el
   titular —que desaparece al primer desplazamiento— y el compartir con ellos. */
.cc-article__margen {
	position: sticky;
	top: calc(var(--cc-header-alto, 76px) + var(--cc-space-6));
	align-self: start;
	display: grid;
	gap: var(--cc-space-5);
}

.cc-article__datos { display: grid; gap: var(--cc-space-4); margin: 0; }
.cc-article__datos > div { display: grid; gap: 2px; }

.cc-article__datos dt {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-article__datos dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--cc-text-muted);
}

.cc-article__content { min-width: 0; font-size: 1.0625rem; line-height: 1.8; }
.cc-article__content > :first-child { margin-top: 0; }
.cc-article__content > :last-child { margin-bottom: 0; }
.cc-article__content :is(h2, h3, h4) { margin: 1.8em 0 0.6em; }
.cc-article__content h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
.cc-article__content h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.cc-article__content :is(p, ul, ol, blockquote) { margin: 0 0 1.4em; }
.cc-article__content :is(ul, ol) { padding-inline-start: 1.35em; }

/* La capitular. Es el gesto que dice «esto es una lectura» antes de leer una
   palabra, y encaja con una marca que se llama Capítulos. Va solo en el primer
   párrafo, solo cuando la columna tiene sitio, y nunca sobre un párrafo que
   empiece por una comilla o un número. */
@media (min-width: 768px) {
	.cc-article__content > p:first-of-type::first-letter {
		float: inline-start;
		margin: 0.06em var(--cc-space-3) 0 0;
		font-family: var(--cc-font-display);
		font-size: 3.6em;
		line-height: 0.82;
		color: var(--cc-green);
	}
}

.cc-article__content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--cc-space-6);
	border-inline-start: 2px solid var(--cc-gold);
	font-family: var(--cc-font-display);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.45;
}

@media (max-width: 900px) {
	.cc-article__layout {
		grid-template-columns: minmax(0, 1fr);
		justify-content: start;
	}

	/* Apilado, el margen deja de ser margen: se convierte en una ficha
	   horizontal por encima del texto y deja de pegarse, porque pegado taparía
	   justamente lo que se está leyendo. */
	.cc-article__margen {
		position: static;
		gap: var(--cc-space-4);
		padding-block-end: var(--cc-space-5);
		border-block-end: 1px solid var(--cc-border);
	}

	.cc-article__datos {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: var(--cc-space-6);
	}
}

@media (max-width: 560px) {
	.cc-article__datos {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--cc-space-3);
	}
}

/* --------------------------------------------------------------------------
   3. El cierre y las lecturas siguientes
   -------------------------------------------------------------------------- */

/* En su propia banda, al final. Era un recuadro blanco flotando junto al
   segundo párrafo: competía con la lectura en lugar de esperar a que
   terminara. */
.cc-article__cierre {
	padding-block: var(--cc-section-main);
	background-color: var(--cc-surface-brand);
	text-align: center;
}

.cc-article__cierre .cc-article__box {
	display: grid;
	justify-items: center;
	gap: var(--cc-space-4);
}

.cc-article__cierre .cc-eyebrow { margin: 0; }

.cc-article__cierre h2 {
	max-width: 20ch;
	margin: 0;
	font-size: var(--cc-type-section-title);
	text-wrap: balance;
}

/* Seguir leyendo, con la ficha del diario. La tarjeta propia que había aquí
   —fotografía, fecha y titular, sin píldora, sin resumen y sin pie— era la
   única del sitio con esa forma. */
.cc-article-related { padding-block: var(--cc-section-main); background-color: var(--cc-stone); }
.cc-article-related .cc-eyebrow { margin: 0; }
.cc-article-related h2 { max-width: 16ch; margin-block: var(--cc-space-3) var(--cc-space-7); }


/* ==========================================================================
   Página 404 y recuperación
   ========================================================================== */

.cc-system-page { background-color: var(--cc-ivory); }
.cc-system-page__hero {
	--cc-gold-text: var(--cc-gold-on-dark);
	padding: clamp(72px, 10vw, 144px) var(--cc-gutter);
	background-color: var(--cc-surface-dark);
	background-image: radial-gradient(circle at 12% 18%, rgba(23, 58, 52, 0.48), transparent 38%);
}
.cc-system-page__inner { max-width: 900px; }
.cc-system-page__hero h1 { max-width: 15ch; color: var(--cc-ivory); font-size: var(--cc-type-page-title); }
.cc-system-page__lead { max-width: 62ch; margin: var(--cc-space-6) 0 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--cc-text-inverse-muted); }

.cc-system-search { display: grid; gap: var(--cc-space-3); max-width: 720px; margin-top: var(--cc-space-8); }
.cc-system-search label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-ivory); }
.cc-system-search__row { display: flex; gap: var(--cc-space-2); }
.cc-system-search input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 var(--cc-space-4); border: 1px solid var(--cc-border-inverse); border-radius: var(--cc-radius-sm); background-color: rgba(246, 243, 238, 0.08); color: var(--cc-ivory); font-size: 1rem; }
.cc-system-search input::placeholder { color: var(--cc-text-inverse-muted); }

.cc-system-links { padding: var(--cc-section-main) var(--cc-gutter); }
.cc-system-links__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--cc-border); }
.cc-system-links a { display: grid; gap: var(--cc-space-4); min-height: 160px; padding: var(--cc-space-6); border-inline-end: 1px solid var(--cc-border); color: var(--cc-text); text-decoration: none; }
.cc-system-links a:last-child { border-inline-end: 0; }
.cc-system-links a:hover { background-color: var(--cc-white); color: var(--cc-green); }
.cc-system-links span { font-family: var(--cc-font-numeric); font-size: 0.75rem; color: var(--cc-gold-text); }
.cc-system-links strong { align-self: end; font-family: var(--cc-font-display); font-size: 1.35rem; font-weight: 400; }

@media (max-width: 900px) {
	.cc-system-links__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cc-system-links a:nth-child(2) { border-inline-end: 0; }
	.cc-system-links a:nth-child(-n + 2) { border-block-end: 1px solid var(--cc-border); }
}

@media (max-width: 560px) {
	.cc-system-search__row { align-items: stretch; flex-direction: column; }
	.cc-system-links__inner { grid-template-columns: minmax(0, 1fr); }
	.cc-system-links a,
	.cc-system-links a:nth-child(2) { min-height: 112px; border-inline-end: 0; border-block-end: 1px solid var(--cc-border); }
	.cc-system-links a:last-child { border-block-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 1024px) { .cc-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .cc-media-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   7. Cita a sangre
   Lámina 9: banda oscura con fotografía a la derecha y comilla dorada.
   -------------------------------------------------------------------------- */

.cc-quote-band {
	--cc-gold-text: var(--cc-gold-on-dark);
	position: relative;
	display: flex;
	align-items: center;
	min-height: 320px;
	overflow: hidden;
	background-color: var(--cc-black);
	color: var(--cc-ivory);
	width: 100%;
}

.cc-quote-band__media { position: absolute; inset: 0; }
.cc-quote-band__media img { width: 100%; height: 100%; object-fit: cover; }

.cc-quote-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 17, 17, 0.95) 0%, rgba(17, 17, 17, 0.8) 42%, rgba(17, 17, 17, 0.25) 78%, rgba(17, 17, 17, 0.05) 100%);
}

.cc-quote-band__body {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--cc-space-5);
	align-items: start;
	padding: clamp(32px, 4vw, 56px);
	max-width: 780px;
}

.cc-quote-band__mark {
	font-family: var(--cc-font-display);
	font-size: 4rem;
	line-height: 0.8;
	color: var(--cc-gold-text);
}

.cc-quote-band__text {
	font-family: var(--cc-font-display);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.38;
	margin: 0 0 var(--cc-space-4);
	color: var(--cc-ivory);
}

/* La segunda frase en itálica: el remate editorial de la marca. */
.cc-quote-band__text em { font-style: italic; }

.cc-quote-band__author {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.72);
}

@media (max-width: 767px) {
	.cc-quote-band::after {
		background: linear-gradient(0deg, rgba(17, 17, 17, 0.95) 0%, rgba(17, 17, 17, 0.7) 55%, rgba(17, 17, 17, 0.35) 100%);
	}
	.cc-quote-band__body { grid-template-columns: 1fr; gap: var(--cc-space-2); }
}

/* --------------------------------------------------------------------------
   8. Banda de cierre con imagen fundida
   -------------------------------------------------------------------------- */

.cc-closing {
	position: relative;
	display: flex;
	align-items: center;
	/* Medida de banda, no de caja: el cierre ocupa poco más de media ventana,
	   igual que el hero de la ficha de viaje —`min(58vh, 560px)`—, para que se
	   lea como un remate y no como otra sección más de texto. */
	min-height: min(56svh, 520px);
	overflow: hidden;
	background-color: var(--cc-ivory);
	width: 100%;
}

/* `width: auto`, o el `inset` no manda. Como contenedor de Elementor, la caja
   llega con `width: 100%`: colocada en absoluto y anclada al 38 %, seguía
   midiendo el ancho entero de la ventana y empujaba la fotografía fuera de
   pantalla, con el degradado tapando lo poco que quedaba dentro. */
.cc-closing__media.cc-closing__media {
	position: absolute;
	inset: 0 0 0 38%;
	width: auto;
	height: auto;
	padding: 0;
}

/* Clase doblada: `.elementor img { height: auto }` empata con un solo selector
   y el desempate quedaría en el orden de carga. */
.cc-closing__media img.cc-closing__media img,
.cc-closing__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cc-closing__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--cc-ivory) 0%, rgba(246, 243, 238, 0.55) 34%, rgba(246, 243, 238, 0) 72%);
}

.cc-closing__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4);
	align-items: flex-start;
	padding: clamp(32px, 4vw, 56px);
	/* Cuarenta caracteres dejaban el titular en cuatro líneas y partían la
	   cursiva por la mitad. Con cuarenta y seis entra en tres y el texto
	   sigue sin invadir la fotografía, que empieza al 38 %. */
	max-width: 46ch;
}

.cc-closing__title {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
}

.cc-closing__text { font-size: 0.9375rem; line-height: 1.7; color: var(--cc-text-muted); margin: 0; }

@media (max-width: 767px) {
	/* Misma especificidad que la regla de escritorio, que va doblada. */
	.cc-closing__media.cc-closing__media { inset: 0; }

	/* El velo sube: con la fotografía ocupando el fondo entero, el texto caía
	   sobre la zona clara del cuadro y el gris del párrafo se perdía. Marfil
	   opaco hasta donde empieza a leerse, y la pintura queda arriba. */
	.cc-closing__media::after {
		background: linear-gradient(0deg, var(--cc-ivory) 46%, rgba(246, 243, 238, 0.9) 66%, rgba(246, 243, 238, 0.3) 100%);
	}
	.cc-closing { min-height: 420px; align-items: flex-end; }
}

/* --------------------------------------------------------------------------
   9. Principios numerados
   Un renglón de índice por principio: filete arriba a todo lo ancho, el numeral
   y el rótulo en la misma línea, y la explicación debajo. Antes el numeral, un
   filete corto y el rótulo iban en tres alturas distintas con el mismo hueco
   entre ellos, y no se entendía qué agrupaba con qué.
   -------------------------------------------------------------------------- */

.cc-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	width: 100%;
}

.cc-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--cc-space-4);
	row-gap: var(--cc-space-3);
	align-content: start;
	padding: var(--cc-space-6) clamp(16px, 2vw, 32px) var(--cc-space-7) 0;
	border-block-start: 1px solid var(--cc-border);
}

/* El numeral es una cifra desnuda y no un titular: en Inter, porque las cifras
   de Playfair suben y bajan de la línea base y una serie 01·02·03 a este cuerpo
   se ve descuadrada. */
.cc-step__numeral.cc-step__numeral {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--cc-gold-text);
}

.cc-step__label.cc-step__label {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--cc-text);
}

.cc-step__text.cc-step__text,
.cc-step__text.cc-step__text p {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--cc-text-muted);
}

/* Sobre fondo oscuro: filete y textos en marfil. */
.cc-section--dark .cc-step { border-block-start-color: var(--cc-border-inverse); }
.cc-section--green .cc-step { border-block-start-color: var(--cc-border); }

.cc-section--dark .cc-step__label.cc-step__label { color: var(--cc-ivory); }
.cc-section--green .cc-step__label.cc-step__label { color: var(--cc-text); }

.cc-section--dark .cc-step__text.cc-step__text p { color: var(--cc-text-inverse-muted); }
.cc-section--green .cc-step__text.cc-step__text p { color: var(--cc-text-muted); }

@media (min-width: 768px) and (max-width: 1024px) {
	.cc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.cc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cc-step { padding-inline-end: var(--cc-space-4); }
}

@media (max-width: 480px) {
	.cc-steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Itinerario horizontal (lámina 8)
   -------------------------------------------------------------------------- */

.cc-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--cc-space-5);
	width: 100%;
}

.cc-timeline__item { position: relative; padding-top: var(--cc-space-6); }

/* Línea continua entre hitos, con el punto dorado encima. */
.cc-timeline__item::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: calc(var(--cc-space-5) * -1);
	height: 1px;
	background-color: var(--cc-border);
}

.cc-timeline__item:last-child::before { right: 0; }

.cc-timeline__item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: var(--cc-gold);
}

.cc-timeline__day {
	display: block;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
	margin-bottom: var(--cc-space-1);
}

.cc-timeline__place { font-size: 0.9375rem; font-weight: 600; margin: 0 0 var(--cc-space-2); }
.cc-timeline__text { font-size: 0.8125rem; line-height: 1.6; color: var(--cc-text-muted); margin: 0; }

.cc-newsletter { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); }

.cc-newsletter input[type="email"] {
	flex: 1 1 260px;
	min-height: 44px;
	padding: 0 var(--cc-space-4);
	font-family: var(--cc-font-body);
	font-size: 0.875rem;
	color: var(--cc-ivory);
	background-color: rgba(246, 243, 238, 0.06);
	border: 1px solid var(--cc-border-inverse);
	border-radius: var(--cc-radius-sm);
}

.cc-newsletter input[type="email"]::placeholder { color: rgba(246, 243, 238, 0.45); }
.cc-newsletter .cc-btn { min-height: 44px; }

.cc-footer__title {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold);
	margin: 0 0 var(--cc-space-4);
}

.cc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-2); }

.cc-footer__list a,
.cc-footer__list li {
	font-size: 0.8125rem;
	line-height: 1.7;
	color: rgba(246, 243, 238, 0.7);
	text-decoration: none;
}

.cc-footer__list a:hover { color: var(--cc-gold); }

/* En móvil, las listas secundarias se comportan como un índice compacto. El
   contacto permanece abierto porque contiene información operativa. */
.cc-footer-disclosure__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	width: 100%;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: start;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* El Theme Style también viste los `<button>` sueltos. Esta especificidad
   mantiene el desplegable como una línea de navegación, no como otro CTA. */
.cc-footer-navcol .cc-footer-disclosure__button,
.cc-footer-navcol .cc-footer-disclosure__button:hover,
.cc-footer-navcol .cc-footer-disclosure__button:focus {
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--cc-gold-on-dark);
}

.cc-footer-navcol .cc-footer-disclosure__button:focus-visible {
	outline: 2px solid var(--cc-gold-on-dark);
	outline-offset: 3px;
}

.cc-footer-disclosure__mark {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.cc-footer-disclosure__mark::before,
.cc-footer-disclosure__mark::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 1px;
	width: 12px;
	height: 1px;
	background-color: currentColor;
	transition: transform var(--cc-duration-fast) var(--cc-ease-out);
}

.cc-footer-disclosure__mark::after { transform: rotate(90deg); }
.cc-footer-disclosure__button[aria-expanded="true"] .cc-footer-disclosure__mark::after { transform: rotate(0); }

@media (max-width: 767px) {
	.cc-footer-main { gap: 0; }
	.cc-footer__brandcol { padding-block-end: var(--cc-space-7); }

	.cc-footer-navcol {
		width: 100%;
		border-block-start: 1px solid var(--cc-border-inverse);
	}

	.cc-footer-navcol--collapsible { gap: 0; }

	.cc-footer-navcol--collapsible .elementor-widget-heading {
		width: 100%;
		margin: 0;
	}

	.cc-footer-navcol--collapsible .elementor-heading-title {
		margin: 0;
	}

	.cc-footer-navcol--collapsible .cc-footer-disclosure__button {
		min-height: 56px;
	}

	.cc-footer-navcol--collapsible .elementor-widget-icon-list {
		padding: 0 0 var(--cc-space-4);
		animation: cc-footer-disclosure-in var(--cc-duration-fast) var(--cc-ease-out) both;
	}

	.cc-footer-navcol--contact {
		padding-block-start: var(--cc-space-6);
		margin-block-start: var(--cc-space-2);
	}
}

@keyframes cc-footer-disclosure-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-footer-disclosure__mark::before,
	.cc-footer-disclosure__mark::after { transition: none; }
	.cc-footer-navcol--collapsible .elementor-widget-icon-list { animation: none; }
}

/* --------------------------------------------------------------------------
   14. Retrato de especialista en rejilla (Sobre Nosotros)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   15. Comparativa, datos de contacto, mapa y galería
   -------------------------------------------------------------------------- */

.cc-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	overflow: hidden;
	border-block: 1px solid var(--cc-border);
	background-color: var(--cc-surface-soft);
}

.cc-compare__col {
	position: relative;
	min-width: 0;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px) clamp(40px, 6vw, 72px);
	background-color: var(--cc-surface-soft);
}

.cc-compare__col--muted { color: var(--cc-text-muted); }

.cc-compare__col--brand {
	--cc-gold-text: var(--cc-gold-on-dark);
	background-color: var(--cc-green);
	color: var(--cc-text-inverse);
}

.cc-compare__col--brand::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 3px;
	background-color: var(--cc-gold);
}

.cc-compare__kicker .elementor-heading-title {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--cc-tracking);
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-compare__col .cc-compare__kicker { margin-block-end: var(--cc-space-4); }

/* El titular de la comparativa, a la medida de su columna.
   Lo pinta el widget de encabezado de Elementor, así que el cuerpo no sale de
   la regla de arriba —que es `h3` a secas y pierde contra el `h3` del kit—
   sino de los Estilos Globales: 56 px fijos, sin escalón responsive. Y
   «convencional» es una sola palabra de 318 px a ese cuerpo, que no cabe en
   ninguna de las anchuras de columna que hay por debajo de 1440.

   La recta va de 32 px a 320 hasta los 56 px del kit a 1440, que es donde el
   titular vuelve a ser exactamente el que el kit pide. `break-word` es la red
   de seguridad para un topónimo más largo que cualquiera de estos: nunca se ha
   activado en las medidas, y ahí está para que no haga falta volver. */
.cc-compare__col h3.elementor-heading-title {
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.cc-compare__col--muted h3.elementor-heading-title {
	max-width: 10ch;
	color: var(--cc-green);
}

.cc-compare__col--brand h3.elementor-heading-title {
	max-width: 14ch;
	font-size: clamp(2.25rem, 6.5vw, 4rem);
	color: var(--cc-ivory);
}

.cc-compare__col > .cc-compare__list { margin-block-start: clamp(40px, 6vw, 72px); }

@media (min-width: 900px) {
	.cc-compare { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.cc-compare__col h3.elementor-heading-title { font-size: clamp(2.5rem, 3.3vw, 3.5rem); }
	.cc-compare__col--brand h3.elementor-heading-title { font-size: clamp(3rem, 4vw, 4rem); }
	.cc-compare__col > .cc-compare__list { margin-block-start: auto; padding-block-start: clamp(48px, 6vw, 80px); }
}

.cc-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-5); }
.cc-contact-item__label { display: block; font-size: var(--cc-type-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-gold-text); margin-bottom: var(--cc-space-1); }
/* Teléfono, horario y dirección son datos, no titulares, y los tres llevan
   cifras. Van en la tipografía de interfaz. */
.cc-contact-item__value { font-family: var(--cc-font-numeric); font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; line-height: 1.4; text-decoration: none; }

.cc-map { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background-color: var(--cc-stone); }
.cc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .cc-map { aspect-ratio: 4 / 3; } }

.cc-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; width: 100%; }
.cc-gallery__item { overflow: hidden; background-color: var(--cc-stone); }
.cc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cc-duration-image) var(--cc-ease); }
.cc-gallery__item:hover img { transform: scale(1.02); }
.cc-gallery__item:nth-child(1) { grid-column: span 4; aspect-ratio: 3 / 4; }
.cc-gallery__item:nth-child(2) { grid-column: span 4; aspect-ratio: 3 / 4; }
.cc-gallery__item:nth-child(3) { grid-column: span 4; aspect-ratio: 3 / 4; }
.cc-gallery__item:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 4 / 3; }
@media (max-width: 767px) {
	.cc-gallery { grid-template-columns: repeat(2, 1fr); }
	.cc-gallery__item:nth-child(n) { grid-column: span 1; aspect-ratio: 1; }
}

/* Pull quote editorial, para texto largo. */
.cc-pullquote {
	max-width: var(--cc-reading);
	margin: var(--cc-space-7) 0;
	font-family: var(--cc-font-display);
	font-style: italic;
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.28;
	color: var(--cc-gold-text);
}

/* ==========================================================================
   Guarda de especificidad

   Elementor escribe su Theme Style como `.elementor-kit-10 h2 { … }`, que es
   una clase más un elemento: gana a cualquier selector nuestro de una sola
   clase. Por eso los microtitulares y las etiquetas salían en Playfair de
   56 px en lugar de en Inter de 12.

   La clase duplicada (`.cc-label.cc-label`) sube nuestra especificidad por
   encima sin recurrir a !important y sin depender del orden de carga.
   Aquí solo se repiten las propiedades que Elementor pisa.
   ========================================================================== */

/* Microtitulares y etiquetas: Inter, pequeñas, en versalitas. */
.cc-eyebrow.cc-eyebrow,
.cc-label.cc-label,
.cc-feature__label.cc-feature__label,
.cc-media__type.cc-media__type,
.cc-step__label.cc-step__label,
.cc-footer__title.cc-footer__title,
.cc-contact-item__label.cc-contact-item__label,
.cc-timeline__day.cc-timeline__day,
.cc-quote-band__author.cc-quote-band__author,
.cc-arrow-link.cc-arrow-link,
.cc-circle-link.cc-circle-link {
	font-family: var(--cc-font-body);
	font-weight: 600;
	line-height: 1.4;
}

.cc-eyebrow.cc-eyebrow,
.cc-media__type.cc-media__type,
.cc-footer__title.cc-footer__title,
.cc-contact-item__label.cc-contact-item__label,
.cc-timeline__day.cc-timeline__day { font-size: var(--cc-type-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-gold-text); }

.cc-eyebrow.cc-eyebrow { font-size: 0.75rem; }

/* Filete corto delante del microtitular: es la firma del componente y repite
   la línea que en la ficha separa el capítulo de su contenido. */
.cc-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-3);
}

.cc-eyebrow .elementor-heading-title::before {
	content: "";
	inline-size: 24px;
	block-size: 1px;
	flex: 0 0 auto;
	background-color: currentColor;
	opacity: 0.55;
}

.cc-label.cc-label,
.cc-feature__label.cc-feature__label,
.cc-step__label.cc-step__label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-text); }

/* En la columna más estrecha, el rótulo suelta el tracking.

   El tracking es lo que hace legibles las versalitas cuando hay sitio; cuando
   no lo hay es justo lo que impide que quepan. A 320 px la columna de estos
   rótulos mide 82 px y «INVESTIGAN» pide 88 con 0,12em: la palabra se salía
   por la derecha —una palabra sola no se parte—. Sin tracking mide 74 y entra
   con holgura, y a ese ancho el rótulo se lee igual porque está solo en su
   línea, que era lo que el tracking venía a resolver.

   El ancho de la caja no lo pone esta hoja sino Elementor, así que no sirve de
   nada ensancharla desde aquí: lo que sí está en nuestra mano es el ancho del
   texto. */
@media (max-width: 360px) {
	.cc-label.cc-label,
	.cc-feature__label.cc-feature__label { letter-spacing: 0.04em; }
}

.cc-step__label.cc-step__label { font-size: 0.8125rem; letter-spacing: 0.1em; }

.cc-section--dark .cc-label.cc-label,
.cc-section--dark .cc-feature__label.cc-feature__label { color: var(--cc-ivory); }

.cc-section--green .cc-label.cc-label,
.cc-section--green .cc-feature__label.cc-feature__label { color: var(--cc-text); }

.cc-quote-band__author.cc-quote-band__author {
	font-weight: 400;
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: 0;
}

.cc-quote-band__author.cc-quote-band__author { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; }

.cc-arrow-link.cc-arrow-link,
.cc-circle-link.cc-circle-link { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }/* Títulos en Playfair: el tamaño lo decide el componente,
no el kit. */
.cc-section-headline.cc-section-headline,
.cc-section-title.cc-section-title,
.cc-trip__title.cc-trip__title,
.cc-media__title.cc-media__title,
.cc-closing__title.cc-closing__title,
.cc-quote-band__text.cc-quote-band__text,
.cc-pullquote.cc-pullquote {
	font-family: var(--cc-font-display);
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Cifras: misma guarda, familia contraria.
 *
 * El numeral del paso y los datos de contacto —teléfono, horario, dirección—
 * estaban en la lista de arriba y volvían a Playfair pese a corregirlos en su
 * regla propia, porque esta tiene dos clases y aquella una. La regla de marca
 * es que ninguna cifra usa la tipografía de acento, así que necesitan la misma
 * protección frente al kit que los titulares, solo que hacia el otro lado. */
.cc-step__numeral.cc-step__numeral,
.cc-contact-item__value.cc-contact-item__value {
	font-family: var(--cc-font-numeric);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Titular de sección. Va aquí y no suelto porque hay una guarda unas líneas
   más arriba —`.elementor-widget-heading[class*="cc-"] .elementor-heading-title
   { font-size: inherit }`, tres clases— que obliga a que el tamaño lo declare
   el envoltorio y el texto lo herede. Puesto sobre el texto no llegaba nunca.
   Hacía falta además porque Elementor declara la tipografía global con dos
   clases y le gana a su propio Theme Style: sin esto, los titulares se
   quedaban a 56 px también en un móvil de 390, donde ocupaban cinco renglones. */
.cc-section-headline.cc-section-headline { font-size: var(--cc-type-section-title); line-height: 1.06; text-wrap: balance; }
.cc-section-title.cc-section-title { font-size: var(--cc-type-subsection-title); line-height: 1.15; }
.cc-trip__title.cc-trip__title { font-size: var(--cc-type-card-title); line-height: 1.22; letter-spacing: -0.01em; color: var(--cc-black); }
.cc-media__title.cc-media__title { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.cc-closing__title.cc-closing__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.12; }
.cc-quote-band__text.cc-quote-band__text { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.38; letter-spacing: -0.01em; color: var(--cc-ivory); }
.cc-step__numeral.cc-step__numeral { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--cc-gold-text); letter-spacing: 0.04em; }
.cc-contact-item__value.cc-contact-item__value { font-size: 1.125rem; font-weight: 500; line-height: 1.4; }/* Textos de apoyo. */
.cc-feature__text.cc-feature__text,
.cc-media__text.cc-media__text,
.cc-step__text.cc-step__text,
.cc-timeline__text.cc-timeline__text,
.cc-closing__text.cc-closing__text {
	font-family: var(--cc-font-body);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Iconos de la franja de atributos
   Se sirven como máscara CSS: así heredan el oro de marca por color y
   no dependen de que el <svg> sobreviva al saneado del widget HTML.
   -------------------------------------------------------------------------- */

.cc-feature__icon {
	display: block;
	width: 34px;
	height: 34px;
	background-color: var(--cc-gold);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cc-feature__icon--globe {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--users {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2019v-1a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v1%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2019v-1a4%204%200%200%200-3-3.87%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2019v-1a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v1%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2019v-1a4%204%200%200%200-3-3.87%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--star {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.9%205.9%206.5.9-4.7%204.6%201.1%206.5L12%2017.8%206.2%2020.9l1.1-6.5L2.6%209.8l6.5-.9Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.9%205.9%206.5.9-4.7%204.6%201.1%206.5L12%2017.8%206.2%2020.9l1.1-6.5L2.6%209.8l6.5-.9Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--book {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7a3%203%200%200%201%203%203v13a2.5%202.5%200%200%200-2.5-2.5H4Z%22%2F%3E%3Cpath%20d%3D%22M20%204h-7a3%203%200%200%200-3%203v13a2.5%202.5%200%200%201%202.5-2.5H20Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7a3%203%200%200%201%203%203v13a2.5%202.5%200%200%200-2.5-2.5H4Z%22%2F%3E%3Cpath%20d%3D%22M20%204h-7a3%203%200%200%200-3%203v13a2.5%202.5%200%200%201%202.5-2.5H20Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--compass {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m15.5%208.5-2%205-5%202%202-5Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m15.5%208.5-2%205-5%202%202-5Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-feature__icon--clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   Segunda guarda: Elementor carga su CSS después del nuestro, así que en los
   empates de especificidad gana él. `.elementor-element` añade una clase más
   y resuelve el desempate sin recurrir a !important.
   ========================================================================== */

.elementor-element .cc-eyebrow.cc-eyebrow {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.elementor-element .cc-arrow-link.cc-arrow-link,
.elementor-element .cc-circle-link.cc-circle-link {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-gold-text);
}/* Sobre fondo oscuro el enlace circular va en marfil,
no en oro. */
.cc-section--dark .elementor-element .cc-circle-link.cc-circle-link,
.cc-hero .elementor-element .cc-circle-link.cc-circle-link { color: var(--cc-ivory); }/* Elementor impone `height: auto` a las imágenes; nuestras piezas de
   fotografía necesitan llenar su caja. */
.cc-trip .cc-trip__image,
.cc-quote-band__media img,
.cc-closing__media img,
.cc-media__thumb img,
.cc-term .cc-term__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Clases utilitarias sobre widgets de Elementor

   `_css_classes` coloca la clase en el ENVOLTORIO del widget, no en el
   elemento de texto. Por eso un `.cc-eyebrow` sobre un widget de encabezado
   no llegaba nunca al `<div class="elementor-heading-title">` de dentro.
   Aquí se cubre ese salto.
   ========================================================================== */

.elementor-element.cc-eyebrow .elementor-heading-title {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.elementor-element.cc-label .elementor-heading-title {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-text);
}

/* Elementor conserva paddings locales en algunos botones que los dejan en
   32–39 px de alto. La apariencia no cambia; solo se completa el área activa
   mínima compartida por CTA, enlaces editoriales y acciones del footer. */
body.elementor-default .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

/* La cabecera mantiene cuenta, menú y carrito desde 360 px. En los teléfonos
   realmente estrechos se omite el acceso redundante a cuenta —sigue presente
   en el menú/footer— para que el carrito nunca quede recortado. */
@media (max-width: 359px) {
	.elementor-location-header .cc-header-account { display: none; }
}

/* El acceso a la cuenta comparte caja con el carrito: un círculo de 44x44 con
   el icono centrado. Sin esto medía 24x24 y su centro caía 3 px por encima del
   carrito —39 frente a 42—, que es exactamente el desnivel que se ve entre los
   dos iconos de la cabecera. */
body.elementor-default .elementor-location-header .cc-header-account .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
}

/* Y el mismo cuerpo de icono que el carrito, que se fija en 20 px más abajo.
   Con dos tamaños distintos la pareja se lee desigual aunque esté alineada. */
body.elementor-default .elementor-location-header .cc-header-account .elementor-icon svg {
	width: 20px;
	height: 20px;
}

body.elementor-default .elementor-location-header .cc-header-account .elementor-icon:focus-visible {
	outline-color: var(--cc-gold-on-dark);
	border-radius: 50%;
}

/* «Contacto» estaba dos veces en la misma línea: como enlace del menú y como
   botón en oro, separados por 250 px. El botón solo existe a partir de 1200 px,
   así que el enlace sobra justo ahí y hace falta en todo lo demás —entre 1025 y
   1199 px, y dentro de la hamburguesa—. */
@media (min-width: 1200px) {
	/* Con `.elementor-nav-menu` delante para llegar a (0,3,0): Elementor pinta
	   `.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li` con
	   `display: flex` y (0,2,1), que gana a dos clases sueltas. */
	.elementor-location-header .elementor-nav-menu > .cc-menu-item--contacto { display: none; }
}

/* El párrafo de apoyo dentro de un widget de texto.
 *
 * Sin `.elementor-widget-container` en el selector: con la salida optimizada
 * del DOM —activada en este sitio— Elementor imprime el `<p>` como hijo directo
 * del widget y ese div intermedio no existe. Exigirlo dejaba la regla sin
 * aplicar en TODAS las páginas, así que ninguna entradilla del sitio tenía su
 * tipografía. El selector de descendiente vale para las dos formas. */
.elementor-element.cc-lead p {
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.7;
	margin: 0;
}

.cc-hero .elementor-element.cc-lead p,
.cc-pagehead .elementor-element.cc-lead p { color: rgba(246, 243, 238, 0.82); }

/* Los titulares del hero y de las cabeceras interiores. */
.cc-hero .elementor-heading-title,
.cc-pagehead .elementor-heading-title { color: var(--cc-ivory); }

/* La posición de la cabecera (fija en la portada, pegajosa en el resto) la
   resuelven ahora las dos plantillas del Theme Builder con sus propios
   ajustes de Elementor. Aquí ya no se toca. */

.cc-util {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-height: 44px;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-ivory);
	transition: color var(--cc-duration-fast) var(--cc-ease);
}

.cc-util:hover { color: var(--cc-gold); }
.cc-util__icon { width: 20px; height: 20px; flex: none; }

.cc-cart__icon-wrap { position: relative; display: inline-flex; }

/* El estado del carrito se comunica con tinta y un punto, no convirtiendo el
   icono en otro botón rectangular dentro de la navegación. Elementor aplica
   estilos de botón al disparador; aquí se neutralizan en reposo, foco y abierto. */
body.elementor-default .elementor-widget-woocommerce-menu-cart.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--cc-gold);
	transform: none;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button:is(:hover, :focus-visible, :active) {
	background: transparent;
	box-shadow: none;
	color: var(--cc-ivory);
	transform: none;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__toggle_button,
body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button[aria-expanded="true"] {
	background: transparent;
	box-shadow: none;
	color: var(--cc-gold-on-dark);
	transform: none;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button:focus-visible {
	outline-color: var(--cc-gold-on-dark);
	border-radius: 50%;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button .elementor-button-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

body.elementor-default .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__toggle_button::after,
body.elementor-default .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button[aria-expanded="true"]::after {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--cc-gold-on-dark);
	transform: translateX(-50%);
	content: "";
}

/* El contador se sitúa sobre el icono, como una marca de correo. */
.cc-cart__count {
	position: absolute;
	top: -6px;
	right: -9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	color: var(--cc-black);
	background-color: var(--cc-gold);
	border-radius: 999px;
}

.cc-cart__count--empty { display: none; }
.cc-cart__subtotal { font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
	.cc-util__label { display: none; }
}

/* Volver arriba, como en la lámina 9. */
.cc-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--cc-border-inverse);
	border-radius: 50%;
	color: rgba(246, 243, 238, 0.72);
	text-decoration: none;
	transition: border-color var(--cc-duration) var(--cc-ease), color var(--cc-duration) var(--cc-ease);
}

.cc-to-top:hover { border-color: var(--cc-gold); color: var(--cc-gold); }

/* --------------------------------------------------------------------------
   Páginas legales
   -------------------------------------------------------------------------- */

.cc-legal .cc-prose h2 {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	margin: var(--cc-space-7) 0 var(--cc-space-3);
}

.cc-legal .cc-prose h2:first-child { margin-top: 0; }
.cc-legal .cc-prose p,
.cc-legal .cc-prose li { font-size: 0.9375rem; line-height: 1.75; }
.cc-legal .cc-prose ul { padding-inline-start: var(--cc-space-5); margin: var(--cc-space-3) 0; }
.cc-legal .cc-prose li { margin-bottom: var(--cc-space-2); }

.cc-legal__notice {
	padding: var(--cc-space-4);
	background-color: var(--cc-gold-soft);
	border-inline-start: 2px solid var(--cc-gold);
	margin-bottom: var(--cc-space-6);
}

.cc-legal__aside {
	padding: var(--cc-space-6);
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
}

.cc-legal__aside p { font-size: 0.875rem; line-height: 1.65; margin: 0 0 var(--cc-space-3); }
.cc-legal__aside p:last-child { margin-bottom: 0; }

/* En la portada la cabecera flota sobre el hero, así que el hero debe
   reservar su altura para que el titular no quede debajo. */
body.home .cc-hero { padding-block-start: 96px; }

@media (max-width: 767px) {
	body.home .cc-hero { padding-block-start: 84px; }
}

/* La cabecera ya no flota sobre el hero: la plantilla de Elementor la pinta
   sobre negro y ocupa su propio alto, así que el hero no necesita compensar. */

/* --------------------------------------------------------------------------
   Iconos como máscara
   WordPress elimina las etiquetas <svg> del contenido de los widgets HTML, así
   que los iconos que viven en bloques HTML se pintan como máscara CSS. Heredan
   el color por `background-color`, igual que un icono de fuente pero nítidos.
   -------------------------------------------------------------------------- */

.cc-ico {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cc-ico--compass {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%203.2%2014%2010l6.8%202-6.8%202-2%206.8-2-6.8L3.2%2012l6.8-2Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%203.2%2014%2010l6.8%202-6.8%202-2%206.8-2-6.8L3.2%2012l6.8-2Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--instagram {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%2217%22%20height%3D%2217%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.2%22%20cy%3D%226.8%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%2217%22%20height%3D%2217%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.2%22%20cy%3D%226.8%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h-2.5A3.5%203.5%200%200%200%209%206.5V9H7v3h2v9h3v-9h2.5l.5-3H12V6.8c0-.5.4-.8.9-.8H15Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h-2.5A3.5%203.5%200%200%200%209%206.5V9H7v3h2v9h3v-9h2.5l.5-3H12V6.8c0-.5.4-.8.9-.8H15Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--youtube {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%223.5%22%2F%3E%3Cpath%20d%3D%22m10.5%209.5%205%202.5-5%202.5Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%223.5%22%2F%3E%3Cpath%20d%3D%22m10.5%209.5%205%202.5-5%202.5Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--claims {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h6a3%203%200%200%201%203%203v13a2.4%202.4%200%200%200-2.4-2.4H4Z%22%2F%3E%3Cpath%20d%3D%22M20%204h-6a3%203%200%200%200-3%203v13a2.4%202.4%200%200%201%202.4-2.4H20Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h6a3%203%200%200%201%203%203v13a2.4%202.4%200%200%200-2.4-2.4H4Z%22%2F%3E%3Cpath%20d%3D%22M20%204h-6a3%203%200%200%200-3%203v13a2.4%202.4%200%200%201%202.4-2.4H20Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--arrow-up {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5M5%2012l7-7%207%207%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5M5%2012l7-7%207%207%22%2F%3E%3C%2Fsvg%3E");
}
.cc-to-top .cc-ico--arrow-up { width: 18px; height: 18px; }

/* El campo del boletín necesita borde visible sobre negro: sin él parece que
   solo hay un botón suelto. */
.cc-footer .cc-newsletter input[type="email"],
.cc-section--dark .cc-newsletter input[type="email"] {
	background-color: rgba(246, 243, 238, 0.08);
	border-color: rgba(246, 243, 238, 0.32);
}

/* Dentro de la columna de marca, el bloque de contacto se separa del resto. */
.cc-footer__brandcol .cc-footer__title { margin-top: var(--cc-space-6); }
.cc-footer .cc-newsletter { flex: 0 1 520px; flex-wrap: nowrap; }
.cc-footer .cc-newsletter input[type="email"] { flex: 1 1 auto; min-width: 200px; }

/* El formulario de boletín de Elementor, ajustado a la barra: campo y botón
   en línea, sobre fondo oscuro. */
.cc-newsletter .elementor-form { display: flex; flex-wrap: nowrap; gap: var(--cc-space-2); }
.cc-newsletter .elementor-field-group { flex: 1 1 auto; padding: 0; }
.cc-newsletter .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; }

.cc-newsletter .elementor-field-textual {
	min-height: 44px;
	min-width: 200px;
	background-color: rgba(246, 243, 238, 0.08);
	border: 1px solid rgba(246, 243, 238, 0.32);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-ivory);
	/* Nunca por debajo de 16 px: iOS amplía automáticamente cualquier campo con
	   texto más pequeño al enfocarlo, y no deshace el zoom al salir. El usuario
	   toca el único campo de la portada y se queda con la página descuadrada. */
	font-size: 1rem;
}

.cc-newsletter .elementor-field-textual::placeholder { color: rgba(246, 243, 238, 0.5); }

.cc-newsletter .elementor-button {
	min-height: 44px;
	background-color: var(--cc-gold);
	color: var(--cc-black);
	border-radius: var(--cc-radius-sm);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cc-newsletter .elementor-button:hover { background-color: var(--cc-gold-dark); color: var(--cc-black); }
.cc-footer .cc-newsletter, .cc-section--dark .cc-newsletter { flex: 0 1 520px; }

/* El formulario de Elementor apila los campos en columnas de ancho completo.
   Para la barra de boletín hay que actuar sobre su envoltorio real y ganarle
   a los estilos del kit, que pintan los campos en blanco. */
.cc-newsletter .elementor-form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--cc-space-2);
	align-items: stretch;
}

.cc-newsletter .elementor-form .elementor-field-group { flex: 1 1 auto; width: auto; max-width: none; padding: 0; }
.cc-newsletter .elementor-form .elementor-field-type-submit { flex: 0 0 auto; }

/* En pantalla estrecha el campo y el botón no caben en una línea: el campo pide
   200 px de mínimo y el botón ronda los 130, que con el hueco suman más de lo
   que deja el margen del pie en un teléfono pequeño. Con `nowrap` eso no se
   reparte, se desborda, y arrastra scroll lateral a toda la página. Debajo de
   480 px se apilan y el botón ocupa el ancho completo. */
@media (max-width: 480px) {
	.cc-newsletter .elementor-form,
	.cc-newsletter .elementor-form .elementor-form-fields-wrapper { flex-wrap: wrap; }

	.cc-newsletter .elementor-field-textual,
	.cc-newsletter .elementor-form .elementor-field-textual { min-width: 0; }

	.cc-newsletter .elementor-form .elementor-field-group { flex: 1 1 100%; }
	.cc-newsletter .elementor-form .elementor-button { width: 100%; }
}

.cc-newsletter .elementor-form .elementor-field-textual {
	min-height: 46px;
	background-color: rgba(246, 243, 238, 0.08);
	border: 1px solid rgba(246, 243, 238, 0.32);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-ivory);
	font-family: var(--cc-font-body);
	/* Ver arriba: por debajo de 16 px, iOS amplía al enfocar y no vuelve. */
	font-size: 1rem;
	font-style: normal;
}

.cc-newsletter .elementor-form .elementor-field-textual::placeholder { color: rgba(246, 243, 238, 0.5); }

.cc-newsletter .elementor-form .elementor-button {
	min-height: 46px;
	padding-inline: 22px;
	background-color: var(--cc-gold);
	color: var(--cc-black);
	border: 1px solid var(--cc-gold);
	border-radius: var(--cc-radius-sm);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cc-newsletter .elementor-form .elementor-button:hover { background-color: var(--cc-gold-dark); color: var(--cc-black); }

@media (max-width: 600px) {
	.cc-newsletter .elementor-form .elementor-form-fields-wrapper { flex-wrap: wrap; }
}

/* `label_position: none` marca el envoltorio con `elementor-labels-none`, pero
   Elementor Pro no sirve ninguna regla para esa clase: la etiqueta se seguía
   imprimiendo entera. En el pie eso son 172x28 px de texto negro sobre el negro
   del pie, encima del campo, en las 19 páginas. Se oculta de verdad —misma
   receta que `.cc-visually-hidden` de `base.css`, que no se puede aplicar aquí
   porque el marcado lo escribe Elementor— y los lectores la siguen anunciando.
   Va sobre la clase de Elementor y no sobre la del boletín: así vale para
   cualquier formulario del sitio que se monte sin etiqueta visible. */
.elementor-labels-none .elementor-field-group > .elementor-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* El kit pinta los campos en blanco con `.elementor-kit-N .elementor-field-group
   .elementor-field-textual`. Añadimos una clase más para ganarle. */
.cc-newsletter .elementor-form .elementor-field-group .elementor-field-textual {
	background-color: rgba(246, 243, 238, 0.08);
	border-color: rgba(246, 243, 238, 0.32);
	color: var(--cc-ivory);
}

/* ==========================================================================
   Sección con etiqueta lateral (láminas 8 y 9)

   Es el patrón que estructura las páginas de viaje y de especialista: un
   rótulo en Playfair a la izquierda, con un filete dorado debajo, y todo el
   contenido a la derecha. Las secciones se separan con una línea fina, sin
   cajas ni sombras.
   ========================================================================== */

.cc-aside-section {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--cc-space-8);
	align-items: start;
	width: 100%;
	padding-block: clamp(32px, 3vw, 56px);
	border-top: 1px solid var(--cc-border);
}

.cc-aside-section:first-child { border-top: 0; }

.cc-aside-section__label {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--cc-text);
	margin: 0;
}

/* El filete dorado bajo el rótulo: firma gráfica de la marca. */
.cc-aside-section__label::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	margin-top: var(--cc-space-3);
	background-color: var(--cc-gold-text);
}

.cc-aside-section__body { min-width: 0; }

@media (max-width: 900px) {
	.cc-aside-section { grid-template-columns: 1fr; gap: var(--cc-space-5); }
}

/* Rejilla de descubrimientos: imagen 4:3, título Playfair y dos líneas. */
.cc-discover {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cc-space-5);
}

.cc-discover__item { display: flex; flex-direction: column; gap: var(--cc-space-3); }

.cc-discover__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--cc-stone);
}

.cc-discover__media img { width: 100%; height: 100%; object-fit: cover; }
.cc-discover__title { font-family: var(--cc-font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.cc-discover__text { font-size: 0.8125rem; line-height: 1.6; color: var(--cc-text-muted); margin: 0; }

@media (max-width: 900px) { .cc-discover { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cc-discover { grid-template-columns: 1fr; } }

/* Ficha de especialista: retrato a sangre y datos al lado (lámina 9). */
.cc-expert-hero { display: grid; grid-template-columns: var(--cc-expert-media-width, 45%) minmax(0, 1fr); align-items: stretch; width: 100%; }

.cc-expert-hero__media { position: relative; overflow: hidden; background-color: var(--cc-stone); }

/* El retrato llena su caja recortando. Sin esta regla heredaba `fill`, que es
   el valor por defecto cuando nadie dice lo contrario, y deformaba la cara.
   Se cuelga del bloque padre para subir a (0,2,1): a una sola clase le empata
   `.elementor img { height: auto }` y el desempate quedaría en manos del orden
   de carga, que es exactamente lo que no queremos volver a tener. */
.cc-expert-hero .cc-expert-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Las fotografías de stock de la fase de prototipo no deben confundirse con
   la identidad de la persona publicada. La etiqueta desaparece al sustituir
   el adjunto por el retrato definitivo, porque se controla desde metadatos. */
.cc-media-reference {
	position: absolute;
	inset-block-start: var(--cc-space-3);
	inset-inline-end: var(--cc-space-3);
	z-index: 4;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.78);
	color: #fff;
	font-family: var(--cc-font-body);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	pointer-events: none;
}

/* Las dos columnas dejan de tener sentido mucho antes del teléfono: a 834 px
   el retrato ya es una tira de 347x218 dentro de una caja de 589. Se apila en
   el mismo umbral que las credenciales que lleva debajo, para que la ficha
   entera cambie de forma de una vez. */
@media (max-width: 900px) {
	.cc-expert-hero { grid-template-columns: 1fr; }

	/* Retrato vertical, que es la proporción de una persona, con un tope para
	   que no se coma la pantalla: a 834 px el 4/5 puro daba 963 px de foto
	   antes de llegar al nombre. */
	.cc-expert-hero__media { width: 100%; aspect-ratio: 4 / 5; max-height: min(70vh, 620px); }
}

/* Franja de credenciales con divisores verticales. */
.cc-credentials {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cc-space-5);
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-border);
}

.cc-credential { padding-inline-start: var(--cc-space-5); border-inline-start: 1px solid var(--cc-border); }
.cc-credential:first-child { padding-inline-start: 0; border-inline-start: 0; }

.cc-credential__label {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text);
	margin: 0 0 var(--cc-space-2);
}

.cc-credential__label .cc-ico { width: 17px; height: 17px; color: var(--cc-gold-text); }
.cc-credential__text { font-size: 0.8125rem; line-height: 1.6; color: var(--cc-text-muted); margin: 0; }

@media (max-width: 900px) {
	.cc-credentials { grid-template-columns: 1fr; }
	.cc-credential { padding-inline-start: 0; border-inline-start: 0; padding-top: var(--cc-space-4); border-top: 1px solid var(--cc-border); }
	.cc-credential:first-child { padding-top: 0; border-top: 0; }
}

/* ==========================================================================
   Hero de la ficha de viaje (lámina 8)
   ========================================================================== */

.cc-trip-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(58vh, 560px);
	overflow: hidden;
	background-color: var(--cc-black);
}

.cc-trip-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17,17,17,0.94) 0%, rgba(17,17,17,0.74) 34%, rgba(17,17,17,0.25) 66%, rgba(17,17,17,0.04) 100%);
}

.cc-trip-hero__body { position: relative; z-index: 1; max-width: 560px; color: var(--cc-ivory); padding-block: clamp(48px, 5vw, 88px); }
.cc-trip-hero__body .elementor-heading-title { color: var(--cc-ivory); font-size: var(--cc-type-page-title); line-height: 1.04; }

.cc-trip-hero__places.cc-trip-hero__places {
	font-family: var(--cc-font-display);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.3;
	color: var(--cc-gold-text);
	margin: 0;
}

.cc-trip-hero__date.cc-trip-hero__date {
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	color: rgba(246, 243, 238, 0.86);
	margin: 0;
}

.cc-trip-hero__promise p { font-size: 0.9375rem; line-height: 1.7; color: rgba(246, 243, 238, 0.8); max-width: 40ch; margin: 0; }

@media (max-width: 767px) {
	.cc-trip-hero { min-height: 66vh; align-items: flex-end; }
	.cc-trip-hero::after { background: linear-gradient(0deg, rgba(17,17,17,0.94) 0%, rgba(17,17,17,0.6) 55%, rgba(17,17,17,0.2) 100%); }
}

/* La franja inferior del pie se pliega cuando no cabe —entre 1025 y 1439 px
   sus dos grupos suman más de lo que hay—, y al plegarse el de la derecha
   caería alineado a la izquierda, porque `space-between` con un solo elemento
   en la línea lo empuja al principio. El margen automático lo mantiene a la
   derecha en las dos situaciones. */
.cc-footer-bottom > :last-child { margin-inline-start: auto; }

/* Y los enlaces legales no se pliegan. Al permitir que la franja se pliegue,
   quien cedía era el grupo de la izquierda —su lista se repartía en tres
   renglones— en vez de bajar el grupo de la derecha, que es lo que se quería.
   Con la lista en una sola línea, el grupo izquierdo conserva su ancho y el
   que baja es el otro. Debajo de 1025 la franja ya se apila en columna.

   Va con `grid-auto-flow` y no con `flex-wrap`: Elementor pinta la lista en
   línea como una rejilla, así que las propiedades de flex ahí no hacen nada. */
@media (min-width: 1025px) {
	.cc-footer-bottom .elementor-icon-list-items {
		grid-auto-flow: column;
		grid-template-columns: none;
		justify-content: start;
	}
}

/* --------------------------------------------------------------------------
   Barra de filtros del catálogo

   Se queda pegada arriba mientras se recorre la lista. En `/tours/` la cabecera
   no es fija —es `static`, medido—, así que la barra se ancla al borde de la
   ventana y pasa a ser ella la referencia. Mismo material que el índice de la
   ficha de viaje: marfil casi opaco, desenfoque por detrás y un filete abajo,
   para que el catálogo se lea moviéndose por debajo de ella y no detrás de un
   bloque opaco.
   -------------------------------------------------------------------------- */
.cc-filters-bar.cc-filters-bar {
	position: sticky;
	/* Por debajo de la cabecera, no detrás. Al hacer scroll Elementor fija un
	   contenedor interno a `top: 0` con 85 px de alto y z-index 100; anclada
	   también a cero, la barra desaparecía debajo de ella. */
	top: var(--cc-header-alto);
	z-index: var(--cc-z-sticky);
	padding-block: var(--cc-space-4);
	background-color: rgba(246, 243, 238, 0.94);
	border-block-end: 1px solid var(--cc-border);
	backdrop-filter: blur(12px);
}

/* Sin desenfoque disponible, el fondo se vuelve opaco: media tinta encima del
   catálogo sería ilegible. */
@supports not (backdrop-filter: blur(1px)) {
	.cc-filters-bar.cc-filters-bar { background-color: var(--cc-ivory); }
}

/* Los anclajes de la lista no deben quedar debajo de la cabecera y la barra
   sumadas. */
.cc-filters-bar ~ * :target { scroll-margin-block-start: calc(var(--cc-header-alto) + 96px); }

/* --------------------------------------------------------------------------
   La misma barra, filtrando el diario

   El filtro del blog era una sección normal —rótulo encima, píldoras debajo—
   que se iba con el desplazamiento, mientras que el del catálogo se quedaba
   pegado. Dos formas de hacer lo mismo en dos páginas del mismo sitio. Ahora
   comparten material y comportamiento; lo único distinto es el control, que
   allí son cinco desplegables y aquí son las categorías del diario.

   En la barra, el rótulo pasa a la izquierda de las píldoras: encima sumaba
   otro renglón, y una barra pegada paga cada píxel de alto en pantalla.
   -------------------------------------------------------------------------- */
/* La dirección se declara **dos veces**: Elementor resuelve la suya con
   `var(--flex-direction)` y su valor por defecto es `column`. Con solo
   `display: flex` la fila seguía siendo columna, y el `flex-basis` de la
   rejilla de categorías se aplicaba al alto: medido, el widget salía de
   1200×320 px y la barra pegajosa ocupaba 383 px de pantalla. Es la trampa
   que ya está anotada en `docs/PATRON-HERO.md`. */
.cc-blog-filters > .e-con-inner {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	--flex-wrap: wrap;
	flex-wrap: wrap;
	--align-items: center;
	align-items: center;
	gap: var(--cc-space-3) var(--cc-space-5);
}

/* Los hijos de un contenedor de Elementor nacen al 100 % del ancho: en fila,
   eso son dos renglones en lugar de uno. */
.cc-blog-filters > .e-con-inner > .elementor-element { width: auto; }

.cc-blog-filters .cc-eyebrow {
	flex: 0 0 auto;
	margin: 0;
	white-space: nowrap;
}

.cc-blog-filters .elementor-widget-cc-terms-grid {
	flex: 1 1 auto;
	min-width: 0;
}

.cc-blog-filters .cc-terms--plain {
	gap: var(--cc-space-2);
	align-items: center;
}

/* Las píldoras del diario, a la altura de un control de la barra: la del
   catálogo mide 44 px de alto y estas medían lo mismo por dentro pero con
   `--cc-space-5` de relleno lateral, así que diez categorías no cabían en un
   renglón. Con el relleno de un control y el filete de un control, la fila
   entra y las dos barras se parecen. */
.cc-blog-filters .cc-term-pill {
	min-height: 40px;
	padding-inline: var(--cc-space-4);
	background-color: var(--cc-white);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/* En un teléfono la fila de categorías se desplaza en horizontal en lugar de
   partirse en cuatro renglones: plegada, la barra debe ocupar un renglón. */
@media (max-width: 767px) {
	/* Mismo desplazamiento lateral que el índice de la ficha de viaje, que es
	   la otra barra pegajosa del sitio: `overflow-x: auto`, sin barra a la
	   vista y sin arrastrar la página al llegar al final. */
	.cc-blog-filters .cc-terms--plain {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* El desbordamiento recorta la sombra de foco de la primera píldora si
		   no se le deja aire dentro del propio contenedor. */
		padding-block: 2px;
	}

	.cc-blog-filters .cc-terms--plain::-webkit-scrollbar { display: none; }
	.cc-blog-filters .cc-term-pill { flex: 0 0 auto; }
}

/* En un teléfono la barra desplegada mide 439 px: pegada arriba taparía la
   pantalla entera y no dejaría ver justamente lo que se está filtrando. Cerrada
   son 48 px de resumen y ahí sí conviene que acompañe. Así que se queda pegada
   mientras está plegada y se suelta en cuanto se abre. */
@media (max-width: 767px) {
	.cc-filters-bar.cc-filters-bar:has(.cc-filters__disclosure[open]) {
		position: static;
	}

	/* Y plegada va lo más fina posible: sumada a la cabecera, en una pantalla
	   de 667 px se llevaba la cuarta parte del alto disponible. */
	.cc-filters-bar.cc-filters-bar { padding-block: var(--cc-space-2); }
}

/* Índice de una ficha extensa. Queda debajo de la cabecera y permite saltar
   por capítulos sin convertir el producto en una sucesión de acordeones. */
.cc-trip-index {
	position: sticky;
	/* La cabecera cambia de 76 a 62 px según el breakpoint y Elementor también
	   altera su alto al fijarla. La variable contiene la medición real. */
	top: var(--cc-header-alto);
	z-index: var(--cc-z-sticky);
	padding-block: 0;
	background-color: rgba(246, 243, 238, 0.96);
	border-block-end: 1px solid var(--cc-border);
	backdrop-filter: blur(10px);
}

.cc-trip-index .elementor-widget-html { width: 100%; }

.cc-trip-index__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-6);
	min-height: 54px;
	width: 100%;
}

.cc-trip-index__label {
	flex: none;
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

/* Se desplaza a cualquier ancho, no solo en teléfono. Con siete capítulos y el
   cuerpo del filtro —14 px— la fila deja de caber antes de llegar al móvil: a
   834 px «Reservar» se salía 38 px y lo recortaba el `overflow-x: clip` del
   documento, así que el enlace que lleva a la compra era el único que no se
   podía pulsar. `min-width: 0` es lo que permite a un hijo flex encogerse por
   debajo de su contenido; sin él la fila empuja en vez de desplazarse. */
.cc-trip-index__links {
	display: flex;
	align-items: stretch;
	gap: var(--cc-space-5);
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.cc-trip-index__links::-webkit-scrollbar { display: none; }

/* El enlace de reservar no se encoge nunca: es el destino de la barra. */
.cc-trip-index__links a { flex: none; }

.cc-trip-index__links a {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	/* Mismo cuerpo que el `select` del filtro del catálogo: son la misma clase
	   de texto en la misma clase de barra, y a 12 px este iba corto. */
	font-size: var(--cc-type-control);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	color: var(--cc-text-muted);
	border-block-end: 1px solid transparent;
	transition: color var(--cc-duration-fast) var(--cc-ease-soft), border-color var(--cc-duration-fast) var(--cc-ease-soft);
}

.cc-trip-index__links a:hover,
.cc-trip-index__links a[aria-current="location"] {
	color: var(--cc-text);
	border-block-end-color: var(--cc-gold-text);
}

.cc-trip-index__links .cc-trip-index__reserve { color: var(--cc-gold-text); }

/* La barra vive en su propio host sin alto. Solo aparece en teléfono y queda
   por debajo de cualquier diálogo del carrito. */
.cc-mobile-booking-bar-host { display: none; }

.single-product :is(.cc-aside-section, #reservar) {
	scroll-margin-block-start: calc(var(--cc-header-alto) + 70px);
}

@media (max-width: 767px) {
	.cc-trip-index__nav {
		display: block;
		min-height: 50px;
		overflow: hidden;
	}

	.cc-trip-index__label { display: none; }

	.cc-trip-index__links {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		gap: var(--cc-space-5);
		margin-inline: calc(var(--cc-gutter) * -1);
		padding-inline: var(--cc-gutter);
		scrollbar-width: none;
	}

	.cc-trip-index__links::-webkit-scrollbar { display: none; }
	.cc-trip-index__links a { min-height: 50px; }

	.cc-mobile-booking-bar-host {
		display: block;
		min-height: 0;
		padding: 0;
	}

	.cc-mobile-booking-bar-host .elementor-widget-shortcode { margin: 0; }

	.cc-mobile-booking-bar {
		position: fixed;
		inset-inline: var(--cc-space-3);
		inset-block-end: calc(var(--cc-space-3) + env(safe-area-inset-bottom, 0px));
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cc-space-4);
		min-height: 68px;
		padding: var(--cc-space-3);
		padding-inline-start: var(--cc-space-4);
		border: 1px solid rgba(246, 243, 238, 0.16);
		border-radius: var(--cc-radius-lg);
		background-color: rgba(17, 17, 17, 0.96);
		box-shadow: 0 12px 34px rgba(17, 17, 17, 0.22);
		color: var(--cc-ivory);
		transition: opacity var(--cc-duration-fast) var(--cc-ease-out), transform var(--cc-duration-fast) var(--cc-ease-out);
	}

	.cc-mobile-booking-bar.is-hidden {
		opacity: 0;
		transform: translateY(calc(100% + var(--cc-space-5)));
		pointer-events: none;
	}

	.cc-mobile-booking-bar__meta { display: grid; gap: 1px; min-width: 0; }
	.cc-mobile-booking-bar__label { font-size: var(--cc-type-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-text-inverse-muted); }
	.cc-mobile-booking-bar__price { font-family: var(--cc-font-numeric); font-size: 1rem; font-weight: 600; color: var(--cc-ivory); }
	.cc-mobile-booking-bar__price :is(del, ins) { text-decoration-thickness: 1px; }

	.cc-mobile-booking-bar__cta {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding-inline: var(--cc-space-5);
		border-radius: var(--cc-radius-sm);
		background-color: var(--cc-gold);
		font-size: var(--cc-type-label);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--cc-black);
	}

	.cc-mobile-booking-bar__cta:active { transform: scale(var(--cc-press)); }
	.single-product :is(.cc-aside-section, #reservar) {
		scroll-margin-block-start: calc(var(--cc-header-alto) + 66px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-trip-index__links a,
	.cc-mobile-booking-bar { transition: none; }
}

/* El cuerpo con etiquetas laterales no necesita el padding vertical estándar:
   cada sección ya aporta el suyo y su línea divisoria. */
.cc-trip-body { padding-block: clamp(24px, 2vw, 40px); }

/* La fotografía del hero se posiciona bajo el contenido, sin sacarla del
   documento: así conserva su texto alternativo y su carga diferida. */
.cc-hero-media { position: absolute; inset: 0; z-index: 0; }

/* Elementor sirve `.elementor img { height: auto }`, que por especificidad
   (0,1,1) gana a una sola clase: la fotografía se quedaba en su alto natural y
   dejaba 154 px de caja vacía a 390 px. El hero de la portada se salvaba de
   rebote, porque allí la regla va anidada bajo `.cc-hero`. Se duplica la clase,
   que es la guarda que ya usa el resto de la hoja. */
.cc-hero-media__img.cc-hero-media__img { width: 100%; height: 100%; object-fit: cover; }
.cc-trip-hero .elementor-widget-cc-hero-media { position: absolute; inset: 0; z-index: 0; }

/* El cuerpo del hero se eleva sobre la fotografía sin crear un contexto de
   posicionamiento en el contenedor interno, que recortaría la imagen. */
.cc-trip-hero .cc-trip-hero__body { position: relative; z-index: 1; }

/* La etiqueta lateral necesita algo más de carril: «¿Qué descubrirás?» no
   debe partirse contra el contenido. */
.cc-aside-section { grid-template-columns: 250px 1fr; }

.cc-aside-section__label.cc-aside-section__label {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}/* Guarda de especificidad para los títulos de las piezas nuevas. */
.cc-discover__title.cc-discover__title,
.cc-timeline__place.cc-timeline__place {
	font-family: var(--cc-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.cc-discover__title.cc-discover__title { font-size: 1.25rem; line-height: 1.2; }

.cc-timeline__place.cc-timeline__place {
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

/* El cuerpo del hero se alinea al margen izquierdo, no al centro: Elementor
   centra por defecto los contenedores con ancho máximo. */
.cc-trip-hero .cc-trip-hero__body { max-width: 620px; margin-inline: 0; }

.cc-trip-hero__title.cc-trip-hero__title {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: var(--cc-type-page-title);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--cc-ivory);
	margin: 0;
}

/* En una columna flex, el contenedor con ancho máximo se centra; lo anclamos
   al inicio para que el texto arranque en el margen del contenido. */
.cc-trip-hero .cc-trip-hero__body { align-self: flex-start; width: 100%; }

/* ==========================================================================
   Ajustes de la ficha de viaje contra la lámina 8
   ========================================================================== */

/* La ficha de viaje usa la cabecera sólida del resto del sitio: ya no flota
   sobre su hero, así que tampoco necesita compensar el alto. */

/* Filete vertical entre la etiqueta y el contenido, como en la maqueta. */
.cc-aside-section__body { border-inline-start: 1px solid var(--cc-border); padding-inline-start: var(--cc-space-8); }

@media (max-width: 900px) {
	/* Va después del ajuste desktop de 250 px: antes solo se retiraba el
	   filete y la rejilla seguía comprimiendo el contenido en móvil. */
	.cc-aside-section { grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-5); }
	.cc-aside-section__body { border-inline-start: 0; padding-inline-start: 0; }
}

/* Alternancia sutil de fondo entre secciones: casi blanco y marfil. */
.cc-aside-section:nth-child(odd) { background-color: var(--cc-surface-soft); }
.cc-aside-section:nth-child(even) { background-color: var(--cc-ivory); }

/* El fondo llega a sangre aunque el contenido esté acotado. */
.cc-trip-body { padding-block: 0; }

.cc-aside-section {
	padding-inline: clamp(20px, 4vw, 56px);
	margin-inline: calc(clamp(20px, 4vw, 56px) * -1);
	padding-block: clamp(36px, 3.4vw, 60px);
}

/* La imagen de «Qué descubrirás» es apaisada en la lámina, no 4:3. */
.cc-discover__media { aspect-ratio: 16 / 11; }

/* Mosaico de galería: tres piezas grandes y un bloque de cuatro pequeñas. */
.cc-gallery__item:nth-child(1),
.cc-gallery__item:nth-child(2),
.cc-gallery__item:nth-child(3) { grid-column: span 3; aspect-ratio: 3 / 4; }
.cc-gallery__item:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 4 / 3; }

/* El itinerario reparte las paradas en una sola fila: con cinco hitos, un
   mínimo de 160 px las empujaba a una segunda línea. */
.cc-timeline { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--cc-space-4); }
.cc-timeline__item::before { right: calc(var(--cc-space-4) * -1); }

/* Mosaico que cierra fila con cualquier número de imágenes: tres piezas
   verticales arriba y las siguientes, apaisadas, en cuatro columnas. */
.cc-gallery__item:nth-child(1),
.cc-gallery__item:nth-child(2),
.cc-gallery__item:nth-child(3) { grid-column: span 4; aspect-ratio: 3 / 4; }
.cc-gallery__item:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 4 / 3; }

/* Los títulos de «Incluye / No incluye» son de sección interior, no titulares
   de página: el kit los pintaba a 38 px. */
.cc-inclusions__title.cc-inclusions__title {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text);
	margin-bottom: var(--cc-space-4);
}

/* ==========================================================================
   Puente entre las clases de utilidad y los widgets de Elementor

   Elementor coloca las clases CSS en el ENVOLTORIO del widget, mientras que el
   texto vive en un elemento interior con sus propios estilos del kit. En lugar
   de repetir cada clase para cada elemento interno, se hace que ese interior
   herede del envoltorio siempre que este lleve una clase del proyecto.

   El selector de atributo `[class*="cc-"]` acota el puente a nuestros
   elementos: los widgets sin clase propia conservan la tipografía global.
   ========================================================================== */

/* Elementor 4 ya no envuelve el contenido en `.elementor-widget-container`:
   el elemento de texto cuelga directamente del widget. El selector se limita
   a `.elementor-widget` para no alcanzar a los contenedores, que también
   llevan clases del proyecto. */
/* Se limita a los widgets estándar de encabezado y texto: aplicarlo a todos
   invadía el marcado interno de nuestros propios widgets. */
.elementor-widget-heading[class*="cc-"] .elementor-heading-title,
.elementor-widget-text-editor[class*="cc-"] p {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
}

.elementor-element[class*="cc-btn"] .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;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--cc-radius-sm);
	border: 1px solid transparent;
	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);
}

.elementor-element.cc-btn--primary .elementor-button {
	background-color: var(--cc-gold);
	border-color: var(--cc-gold);
	color: var(--cc-black);
}

.elementor-element.cc-btn--primary .elementor-button:hover {
	background-color: var(--cc-gold-dark);
	border-color: var(--cc-gold-dark);
	color: var(--cc-black);
	transform: translateY(-1px);
}

.elementor-element.cc-btn--secondary-dark .elementor-button {
	background-color: transparent;
	border-color: rgba(246, 243, 238, 0.45);
	color: var(--cc-ivory);
}

.elementor-element.cc-btn--secondary-dark .elementor-button:hover {
	background-color: var(--cc-ivory);
	color: var(--cc-black);
}

.elementor-element.cc-btn--secondary-light .elementor-button {
	background-color: transparent;
	border-color: var(--cc-green);
	color: var(--cc-green);
}

.elementor-element.cc-btn--secondary-light .elementor-button:hover {
	background-color: var(--cc-green);
	color: var(--cc-ivory);
}

/* Enlace editorial con flecha. */
.elementor-element.cc-arrow-link .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	/* WCAG 2.2 AA, 2.5.8: un enlace suelto necesita 24 px de alto de objetivo.
	   El texto ocupa 16 y el resto lo pone el relleno vertical, que no cambia
	   nada de la composición porque el enlace sigue siendo de línea. */
	padding: var(--cc-space-2) 0;
	min-height: 24px;
	background: none;
	border: 0;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
	transition: gap var(--cc-duration) var(--cc-ease);
}

.elementor-element.cc-arrow-link .elementor-button::after { content: "→"; }
.elementor-element.cc-arrow-link .elementor-button:hover { gap: var(--cc-space-3); color: var(--cc-gold-text); }

/* Enlace con flecha en círculo. */
.elementor-element.cc-circle-link .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-3);
	padding: 0;
	min-height: 0;
	background: none;
	border: 0;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-ivory);
}

.elementor-element.cc-circle-link .elementor-button::after {
	content: "→";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(246, 243, 238, 0.5);
	border-radius: 50%;
	transition: background-color var(--cc-duration) var(--cc-ease), color var(--cc-duration) var(--cc-ease);
}

.elementor-element.cc-circle-link .elementor-button:hover::after {
	background-color: var(--cc-gold);
	border-color: var(--cc-gold);
	color: var(--cc-black);
}

.elementor-element.cc-circle-link--light .elementor-button { color: var(--cc-green); }
.elementor-element.cc-circle-link--light .elementor-button::after { border-color: var(--cc-border); }

/* --------------------------------------------------------------------------
   Listas de enlaces nativas
   -------------------------------------------------------------------------- */

.elementor-element[class*="cc-"] .elementor-icon-list-items { display: grid; gap: var(--cc-space-2); }
.elementor-element[class*="cc-"] .elementor-icon-list-item { align-items: flex-start; }
.elementor-element[class*="cc-"] .elementor-icon-list-icon { display: none; }

.elementor-element.cc-footer__list .elementor-icon-list-text {
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: rgba(246, 243, 238, 0.7);
}

.elementor-element.cc-footer__list a:hover .elementor-icon-list-text { color: var(--cc-gold); }

/* La lista de datos lleva dirección y horario, y los dos van con cifras
   («Av. José Pardo 620», «9:00-18:00»). Tipografía de interfaz. */
.elementor-element.cc-contact-list .elementor-icon-list-text {
	font-family: var(--cc-font-numeric);
	font-size: 1.0625rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1.5;
	color: var(--cc-text);
}

.elementor-element.cc-compare__list .elementor-icon-list-text {
	font-size: clamp(1rem, 0.3vw + 0.94rem, 1.125rem);
	line-height: 1.5;
	color: inherit;
}

.elementor-element.cc-compare__list .elementor-icon-list-items {
	display: grid;
	gap: 0;
	counter-reset: cc-compare;
	border-block-start: 1px solid var(--cc-border);
}

.elementor-element.cc-compare__list .elementor-icon-list-item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: start;
	gap: var(--cc-space-3);
	padding-block: var(--cc-space-4);
	border-block-end: 1px solid var(--cc-border);
	counter-increment: cc-compare;
}

.elementor-element.cc-compare__list .elementor-icon-list-item::before {
	content: counter(cc-compare, decimal-leading-zero);
	position: static;
	font-family: var(--cc-font-numeric);
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 2;
	letter-spacing: 0.08em;
	color: var(--cc-gold-text);
	font-variant-numeric: tabular-nums lining-nums;
}

.cc-compare__col--brand .elementor-icon-list-items,
.cc-compare__col--brand .elementor-icon-list-item {
	border-color: var(--cc-border-inverse);
}

/* El icono de marca nace dorado aunque no se toque su control de color. */
.cc-icon-widget .cc-ico { background-color: var(--cc-gold); }
.cc-icon-widget a { display: inline-flex; }

/* Motivos que faltaban bajo la clase del widget de icono. */

.cc-ico--globe {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--users {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2019v-1a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v1%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2019v-1a4%204%200%200%200-3-3.87%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2019v-1a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v1%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2019v-1a4%204%200%200%200-3-3.87%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--star {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.9%205.9%206.5.9-4.7%204.6%201.1%206.5L12%2017.8%206.2%2020.9l1.1-6.5L2.6%209.8l6.5-.9Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.9%205.9%206.5.9-4.7%204.6%201.1%206.5L12%2017.8%206.2%2020.9l1.1-6.5L2.6%209.8l6.5-.9Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--book {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7a3%203%200%200%201%203%203v13a2.5%202.5%200%200%200-2.5-2.5H4Z%22%2F%3E%3Cpath%20d%3D%22M20%204h-7a3%203%200%200%200-3%203v13a2.5%202.5%200%200%201%202.5-2.5H20Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7a3%203%200%200%201%203%203v13a2.5%202.5%200%200%200-2.5-2.5H4Z%22%2F%3E%3Cpath%20d%3D%22M20%204h-7a3%203%200%200%200-3%203v13a2.5%202.5%200%200%201%202.5-2.5H20Z%22%2F%3E%3C%2Fsvg%3E");
}

.cc-ico--clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
}

/* --------------------------------------------------------------------------
   Archivo de especialistas
   -------------------------------------------------------------------------- */


/* La biografía de la ficha respeta la medida de lectura. */
.cc-expert-hero__bio { max-width: 56ch; }

/* Guarda para el marcado interno de la ficha de especialista. */
.cc-credential__label.cc-credential__label {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text);
}

/* Las páginas de la tienda usan «Ancho completo»: el contenido ya no recibe el
   respiro que le daba la plantilla del tema, así que se lo damos aquí. Se
   apunta al contenedor de WooCommerce y no al del tema, que cambia de nombre
   entre plantillas. */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding: var(--cc-space-8) var(--cc-gutter);
}

/* Anidados, el relleno se sumaría dos veces. */
.woocommerce-cart .entry-content .woocommerce,
.woocommerce-checkout .entry-content .woocommerce,
.woocommerce-account .entry-content .woocommerce {
	padding: 0;
}

/* --------------------------------------------------------------------------
   Tarjeta de viaje: guardas frente al kit de Elementor
   -------------------------------------------------------------------------- */

/* El kit fija color y tipografía de h3 y p con una especificidad que gana a
   una sola clase; por eso se duplican aquí. */
.cc-trip__places.cc-trip__places {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold-dark);
}

.cc-trip__meta.cc-trip__meta dt {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-trip__meta.cc-trip__meta dd {
	font-family: var(--cc-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cc-text);
}

.cc-trip__amount.cc-trip__amount {
	font-family: var(--cc-font-numeric);
	font-weight: 500;
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: -0.01em;
	color: var(--cc-black);
}

.cc-trip__from.cc-trip__from,
.cc-trip__unit.cc-trip__unit {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}/* Elementor envuelve la imagen en un <figure> que se ajusta al ancho del
   archivo: en las miniaturas pequeñas dejaba franjas blancas a los lados. */
.cc-media__thumb figure,
.cc-media__thumb .elementor-image,
.cc-quote-band__media figure,
.cc-closing__media figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Piezas que Elementor dispone en flex
   -------------------------------------------------------------------------- */

/* Estas bandas son contenedores de Elementor: su `display` lo fija el propio
   Elementor con más peso que nuestras clases, así que la rejilla se declara
   con flex en lugar de pelear por el `display`. */
.cc-feature-strip.cc-feature-strip > .elementor-element {
	flex: 1 1 0;
	min-width: 0;
}

/* El retrato tiene que llenar su mitad de la banda; si no, flota pequeño en
   medio del negro. */
/* Elementor resuelve el `display` de sus contenedores con `var(--display)` y
   reparte el ancho de los hijos por su cuenta; ninguna combinación de flex
   nuestra lograba que las dos mitades llenaran la banda. Aquí tomamos el
   control del reparto con una rejilla de dos columnas. Es la única regla del
   sistema que necesita `!important`, y es por eso. */
.cc-expert-panel.cc-expert-panel {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	min-height: 420px;
	align-items: stretch;
}

/* El widget de imagen se ajusta al ancho del archivo; aquí tiene que ocupar
   la caja entera para que la fotografía sangre. */
.cc-expert-panel__media .elementor-widget-image,
.cc-quote-band__media .elementor-widget-image,
.cc-closing__media .elementor-widget-image,
.cc-media__thumb.elementor-widget-image {
	width: 100%;
	height: 100%;
}.cc-quote-band__media .elementor-widget-image img,
.cc-closing__media .elementor-widget-image img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
}

/* ==========================================================================
   Contacto

   La página estaba montada pero sin vestir: `.cc-whatsapp` y `.cc-form` no
   tenían una sola regla en el tema, así que el botón de WhatsApp y el
   formulario salían con lo que les diera el Theme Style de Elementor. Aquí se
   resuelven los tres bloques —canales, formulario y preguntas— con el lenguaje
   del sistema y siguiendo el §24.1 para los campos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botón de WhatsApp

   Sobre el color: el verde corporativo de WhatsApp (#25D366) no está en la
   paleta y, puesto al lado del oro y el marfil, se lee como un pegote de otra
   marca. Se usa el Verde Profundo del sistema, que es el color de superficie
   oscura de la casa, y el reconocimiento lo aporta el logotipo, que sí va tal
   cual. Se identifica igual y pertenece a la página.
   -------------------------------------------------------------------------- */

/* Clase repetida: el kit pinta `.elementor-kit-N a { color:#173A34 }`, que le
   gana a un selector de una clase. Sin esto el texto del botón saldría en
   Verde Profundo sobre Verde Profundo, es decir, invisible. */
.cc-whatsapp.cc-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-3);
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--cc-green);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-green);
	color: var(--cc-ivory);
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--cc-duration) var(--cc-ease),
		border-color var(--cc-duration) var(--cc-ease),
		color var(--cc-duration) var(--cc-ease);
}

.cc-whatsapp.cc-whatsapp:hover,
.cc-whatsapp.cc-whatsapp:focus-visible {
	background-color: var(--cc-green-dark);
	border-color: var(--cc-green-dark);
	color: var(--cc-white);
}

/* Con el oro de lectura, igual que el resto: el anillo cae fuera del botón, o
   sea sobre el fondo de la página, y ahí el oro de marca se queda en 2,56:1. */
.cc-whatsapp:focus-visible { outline: 2px solid var(--cc-gold-text); outline-offset: 2px; }

.cc-whatsapp .cc-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.cc-whatsapp__label { display: inline-block; }

/* Variante fija. El área segura del móvil no es un capricho: sin ella el botón
   queda debajo de la barra de gestos del iPhone y no se puede pulsar. */
.cc-whatsapp--floating {
	--cc-wa-offset: 20px;
	position: fixed;
	z-index: var(--cc-z-overlay);
	bottom: calc(var(--cc-wa-offset) + env(safe-area-inset-bottom, 0px));
	box-shadow: var(--cc-shadow);
}

.cc-whatsapp--right { right: calc(var(--cc-wa-offset) + env(safe-area-inset-right, 0px)); }
.cc-whatsapp--left { left: calc(var(--cc-wa-offset) + env(safe-area-inset-left, 0px)); }

/* En móvil el botón fijo se reduce a la marca: un botón con texto tapa media
   pantalla justo donde está el contenido. El texto sigue ahí para quien navega
   con lector de pantalla. */
@media (max-width: 600px) {
	.cc-whatsapp--floating {
		width: 56px;
		height: 56px;
		min-height: 56px;
		padding: 0;
		border-radius: 50%;
	}

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

	.cc-whatsapp--floating .cc-icon { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Elegir canal

   Tres columnas separadas por filetes verticales, sin cajas: el mismo recurso
   que la franja de garantías del proceso de reserva, para que las dos zonas de
   «aquí resolvemos tus dudas» del sitio se lean como la misma familia.
   -------------------------------------------------------------------------- */

.cc-channels-band { border-block: 1px solid var(--cc-border); }

.cc-channel {
	padding-inline: var(--cc-space-6);
	padding-block: var(--cc-space-2);
}

.cc-channel:first-child { padding-inline-start: 0; }
.cc-channel:last-child { padding-inline-end: 0; }
.cc-channel + .cc-channel { border-inline-start: 1px solid var(--cc-border); }

/* Las clases de estas piezas caen en el ENVOLTORIO del widget, no en el `<h2>`
   ni en el `<p>` de dentro: hay que bajar al elemento real. Y con tres clases,
   que es lo que hace falta para ganarle a `.elementor-kit-N h2`. Es el mismo
   patrón que ya usan `.cc-eyebrow` y `.cc-lead` unas líneas más arriba. */
.elementor-element.cc-channel__title .elementor-heading-title {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cc-black);
}

/* El plazo de respuesta es la información que decide el canal: va destacado,
   no escondido dentro del párrafo. */
/* Sin `.elementor-widget-container` en medio: con la salida optimizada del DOM
   activada, el widget de texto imprime el `<p>` como hijo directo. El selector
   de descendiente vale para las dos formas. */
.elementor-element.cc-channel__eta p {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--cc-gold-text);
}

.elementor-element.cc-channel__text p {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--cc-text-muted);
}

/* La acción se pega al fondo para que las tres queden a la misma altura aunque
   los textos midan distinto. */
.cc-channel .elementor-widget:last-child { margin-block-start: auto; padding-block-start: var(--cc-space-4); }

.elementor-element.cc-channel__list .elementor-icon-list-item a,
.elementor-element.cc-channel__list .elementor-icon-list-text {
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	color: var(--cc-text);
	text-decoration: none;
}

.cc-channel__list .elementor-icon-list-item a:hover { color: var(--cc-gold); }

@media (max-width: 1024px) {
	.cc-channel {
		padding-inline: 0;
		padding-block: var(--cc-space-6);
	}

	.cc-channel:first-child { padding-block-start: 0; }

	.cc-channel + .cc-channel {
		border-inline-start: 0;
		border-block-start: 1px solid var(--cc-border);
	}
}

/* --------------------------------------------------------------------------
   Formulario (§24.1)

   Fondo marfil o blanco, etiquetas visibles, alto mínimo de 48 px, filete fino,
   radio de 0 a 2 px y foco en Oro Contemporáneo.

   El kit de Elementor escribe `.elementor-kit-N .elementor-field-group
   .elementor-field-textual`, que son tres clases: para ganarle hacen falta
   cuatro, igual que en el boletín del pie.
   -------------------------------------------------------------------------- */

.cc-form-column { max-width: 46rem; }

.cc-form .elementor-form-fields-wrapper { margin-inline: calc(var(--cc-space-3) * -1); }
.cc-form .elementor-field-group { padding-inline: var(--cc-space-3); margin-block-end: var(--cc-space-5); }

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

.cc-form .elementor-form .elementor-field-group .elementor-field-textual {
	width: 100%;
	min-height: 48px;
	padding: var(--cc-space-3) var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font-family: var(--cc-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cc-text);
	box-shadow: none;
	transition:
		border-color var(--cc-duration-fast) var(--cc-ease),
		box-shadow var(--cc-duration-fast) var(--cc-ease);
}

.cc-form .elementor-form .elementor-field-group textarea.elementor-field-textual { min-height: 8rem; }

.cc-form .elementor-form .elementor-field-group .elementor-field-textual::placeholder {
	color: var(--cc-text-muted);
	opacity: 0.7;
}

/* Ver `base.css`: el borde del campo enfocado es el indicador de foco y va con
   el oro de lectura, que llega a 3:1. */
.cc-form .elementor-form .elementor-field-group .elementor-field-textual:focus {
	outline: none;
	border-color: var(--cc-gold-text);
	box-shadow: 0 0 0 3px var(--cc-gold-soft);
}

.cc-form .elementor-field-required .elementor-field-label::after,
.cc-form .elementor-mark-required .elementor-field-label:after { color: var(--cc-gold-text); }

/* Consentimiento: casilla y texto alineados por arriba, en cuerpo de lectura y
   no en versalitas —es una frase, no una etiqueta de campo—. */
.cc-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-space-3);
}

.cc-form .elementor-field-type-acceptance label {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

/* 24 px es el mínimo de WCAG 2.2 §2.5.8, y esta es la casilla que hay que
   marcar para poder enviar: era el objetivo más pequeño del sitio, en el peor
   sitio posible. */
.cc-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-block-start: 0;
	accent-color: var(--cc-gold);
}

/* El relleno vertical de un elemento en línea agranda el área de pulsación sin
   alterar la caja de línea: el enlace legal pasa de 16 a 24 px de alto sin
   descuadrar la frase que lo contiene. */
.cc-form .elementor-field-type-acceptance a {
	display: inline-block;
	padding-block: 4px;
	color: var(--cc-text);
	text-underline-offset: 3px;
}

.cc-form .elementor-field-type-submit { margin-block-start: var(--cc-space-2); }

/* §24.3: el acuse va en Verde Profundo y con lenguaje humano; el error no
   depende solo del rojo, lleva filete y texto claro. */
.cc-form .elementor-message {
	margin-block-start: var(--cc-space-4);
	padding: var(--cc-space-4) var(--cc-space-5);
	border-inline-start: 2px solid var(--cc-green);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-green-soft);
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cc-text);
}

.cc-form .elementor-message.elementor-message-danger {
	border-inline-start-color: var(--cc-error);
	background-color: rgba(179, 38, 30, 0.06);
}

.cc-form .elementor-message::before { margin-inline-end: var(--cc-space-2); }

/* --------------------------------------------------------------------------
   Datos de apoyo y mapa
   -------------------------------------------------------------------------- */

.cc-contact-aside { min-width: 0; }
.cc-map--aside { aspect-ratio: auto; height: 280px; border: 1px solid var(--cc-border); }

/* --------------------------------------------------------------------------
   Preguntas frecuentes

   Sin cajas ni sombras: filetes finos y el signo a la derecha, como el resto de
   listas del sistema. Cada pregunta contestada aquí es un mensaje que nadie
   tiene que escribir.
   -------------------------------------------------------------------------- */

/* El acordeón de preguntas es el widget propio, con `<details>`, y se viste en
   `cc-widgets.css`. Aquí vivía una segunda versión para el `toggle` nativo de
   Elementor, que usaba la página de contacto: dos componentes para lo mismo,
   con dos marcados y dos signos de apertura distintos. Ya no queda ninguna
   página que lo use.

   De paso desaparece un choque: `.cc-faq` lleva filete superior en la hoja del
   plugin, y la regla de aquí añadía otro al primer elemento del acordeón, así
   que la lista de contacto abría con una línea doble. */

@media (prefers-reduced-motion: reduce) {
	.cc-whatsapp,
	.cc-form .elementor-form .elementor-field-group .elementor-field-textual { transition: none; }
}

/* ==========================================================================
   Cabecera de sección y archivo de especialistas

   `cc_section_head()` se usa en varias páginas y no tenía ni una regla: la
   disposición se la daban los ajustes de Elementor y el texto salía a los
   1200 px de la caja, muy por encima de la medida de lectura del sistema.
   ========================================================================== */

.cc-section-head { margin-block-end: var(--cc-space-7); }
.cc-section-head__text { max-width: var(--cc-reading); }

/* Entre el rótulo de la sección y la rejilla hace falta más aire que entre dos
   párrafos: son dos bloques distintos, no un texto seguido. */
.cc-experts-band .cc-authors { margin-block-start: var(--cc-space-2); }

/* La tarjeta de especialista ya está resuelta más arriba (§19.2, versión
   editorial clara): retrato 4/5, zoom de 1.03 al pasar por encima y la guarda
   de especificidad para el nombre. No se repite aquí. */

/* ==========================================================================
   PORTADA — bloques del rediseño del Home
   Manifiesto, experiencia, cierre y la utilidad de aparición.

   Nota de especificidad: el Theme Style de Elementor escribe reglas del tipo
   `.elementor-kit-N h2` —una clase y un elemento— y su hoja carga después de
   esta. Cualquier titular de aquí duplica su clase para empatar y ganar por
   orden, como el resto del archivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Aparición al entrar en pantalla
   El estado inicial solo existe si el script ha podido armarse (`.cc-js`): sin
   JavaScript, o con «reducir movimiento», el contenido está visible desde el
   primer pintado y no depende de nada.
   -------------------------------------------------------------------------- */

.cc-js .cc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--cc-duration-image) var(--cc-ease),
		transform var(--cc-duration-image) var(--cc-ease);
	/* El desplazamiento es vertical y mínimo: no puede crear scroll lateral
	   ni empujar nada de sitio. */
	will-change: opacity, transform;
}

.cc-js .cc-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.cc-js .cc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Manifiesto
   Declaración y fotografía a la misma altura. Dentro de la columna de texto, el
   titular y el párrafo se desnivelan entre sí: es lo que evita que las dos
   mitades se lean como una tabla.
   -------------------------------------------------------------------------- */

.cc-manifesto {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	column-gap: clamp(32px, 5vw, 80px);
	row-gap: var(--cc-space-7);
	align-items: stretch;
	width: 100%;
}

.cc-manifesto__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(20px, 2.4vw, 36px);
}

.cc-manifesto__head { max-width: none; }

.cc-manifesto__body { max-width: 46ch; }

.cc-manifesto__title.cc-manifesto__title {
	font-family: var(--cc-font-display);
	font-size: clamp(1.875rem, 3.4vw, 3rem);
	line-height: 1.08;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0;
}

.cc-manifesto__text.cc-manifesto__text,
.cc-manifesto__text.cc-manifesto__text p {
	max-width: 46ch;
	font-size: clamp(0.9375rem, 0.35vw + 0.875rem, 1.0625rem);
	line-height: 1.75;
	color: var(--cc-text-muted);
	margin: 0;
}

/* La fotografía llena su columna entera, sea cual sea el alto del texto. */
.cc-manifesto__figura { position: relative; min-height: 100%; }

.cc-manifesto__media,
.cc-manifesto__media .elementor-widget-container,
.cc-manifesto__media figure,
.cc-manifesto__media a { height: 100%; }

.cc-manifesto__media.cc-manifesto__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(280px, 40svh, 420px);
	object-fit: cover;
	border-radius: var(--cc-radius-md);
}

@media (max-width: 1024px) {
	.cc-manifesto { grid-template-columns: 1fr; }
	.cc-manifesto__media.cc-manifesto__media img { min-height: clamp(260px, 40svh, 380px); }
}

/* --------------------------------------------------------------------------
   Experiencia — Mirar · Comprender · Compartir

   Tres fotografías de los especialistas haciendo el gesto que da nombre a cada
   pilar. No hay tarjeta, ni marco, ni forma recortada: la fotografía es el
   bloque. Un arco o una caja aquí compiten con lo único que importa, que es
   ver a alguien trabajando.

   Las tres alineadas y del mismo alto, a propósito. Escalonadas se leían como
   un descuadre, y aquí el orden dice algo: son tres momentos del mismo método,
   no tres ideas sueltas.
   -------------------------------------------------------------------------- */

.cc-pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	width: 100%;
}

.cc-pilar { display: flex; flex-direction: column; gap: var(--cc-space-3); }

.cc-pilar__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--cc-radius-lg);
	background-color: var(--cc-stone);
	isolation: isolate;
}

/* Clase doblada: Elementor declara `.elementor img { height: auto }` —una clase
   y un elemento— y con un solo selector la fotografía se quedaba a su alto
   natural en vez de llenar el recuadro. */
.cc-pilar__image.cc-pilar__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 700ms var(--cc-ease-out);
}

/* El velo solo cubre el tercio de abajo, que es donde va el texto: más arriba
   la fotografía se ve limpia, y de eso trata el bloque. */
.cc-pilar__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 58%;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(17, 17, 17, 0.90) 0%,
		rgba(17, 17, 17, 0.58) 40%,
		rgba(17, 17, 17, 0) 100%
	);
	pointer-events: none;
}

.cc-pilar__pie {
	position: absolute;
	z-index: 2;
	inset-inline: clamp(16px, 1.8vw, 28px);
	inset-block-end: clamp(16px, 1.8vw, 28px);
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
}

.cc-pilar__verbo.cc-pilar__verbo {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--cc-ivory);
}

.cc-pilar__texto {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(246, 243, 238, 0.86);
	max-inline-size: 32ch;
}

/* El crédito va fuera de la fotografía, sobre el papel: dice quién sale, y eso
   es información del sitio, no parte de la imagen. */
.cc-pilar__credito {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	letter-spacing: 0.04em;
	color: var(--cc-text-muted);
}

.cc-pilar__con { text-transform: uppercase; letter-spacing: var(--cc-tracking); font-size: var(--cc-type-label); font-weight: 600; margin-inline-end: 4px; }

.cc-pilar__credito a { color: var(--cc-text); text-decoration: none; border-block-end: 1px solid var(--cc-border); }
.cc-pilar__credito a:hover { color: var(--cc-gold-text); border-block-end-color: currentColor; }

@media (hover: hover) and (pointer: fine) {
	.cc-pilar:hover .cc-pilar__image { transform: scale(1.04); }
}

@media (max-width: 900px) {
	.cc-pilares { grid-template-columns: 1fr; gap: var(--cc-space-6); }
	.cc-pilar__media { aspect-ratio: 4 / 3; }
	.cc-pilar__texto { max-inline-size: none; }
}

@media (max-width: 767px) {
	/* En Home los tres gestos forman una misma escena. El carrusel conserva el
	   orden, deja asomar el siguiente y evita tres fotografías apiladas. */
	.cc-home-experience .cc-pilares {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		gap: var(--cc-space-4);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--cc-gutter) * -1);
		padding-inline: var(--cc-gutter);
		scroll-padding-inline-start: var(--cc-gutter);
		padding-block-end: var(--cc-space-2);
		scrollbar-width: none;
	}

	.cc-home-experience .cc-pilares::-webkit-scrollbar { display: none; }
	.cc-home-experience .cc-pilar { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-pilar__image { transition: none; }
	.cc-pilar:hover .cc-pilar__image { transform: none; }
	.cc-home-experience .cc-pilares { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
   Cierre de página
   Fotografía a sangre con un velo oscuro y el texto centrado encima. Es la
   última pantalla antes del pie y comparte su negro, para que el paso de una
   a otro sea un cambio de contenido y no un corte.
   -------------------------------------------------------------------------- */

.cc-cta-final {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(440px, 76svh, 720px);
	overflow: hidden;
	background-color: var(--cc-black);
	width: 100%;
}

.cc-cta-final__media { position: absolute; inset: 0; }

.cc-cta-final__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo se oscurece hacia abajo: así el pie negro no arranca sobre una
   fotografía a plena luz. */
.cc-cta-final::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(17, 17, 17, 0.52) 0%,
		rgba(17, 17, 17, 0.68) 55%,
		rgba(17, 17, 17, 0.92) 100%
	);
}

.cc-cta-final__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--cc-space-6);
	padding: clamp(48px, 7vw, 96px) var(--cc-gutter);
	/* En px y no en `ch`: la unidad se resuelve contra la tipografía del
	   contenedor —Inter a 17— y dejaba el titular, que es Playfair a 52,
	   partido en cuatro líneas de dos palabras. */
	max-width: min(760px, 92%);
}

.cc-cta-final__title.cc-cta-final__title,
.cc-cta-final__title.cc-cta-final__title .elementor-heading-title {
	font-family: var(--cc-font-display);
	font-size: clamp(1.875rem, 3.6vw, 3.25rem);
	line-height: 1.1;
	font-weight: 400;
	color: var(--cc-ivory);
	margin: 0;
	text-wrap: balance;
}

.cc-cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-4);
}

@media (max-width: 767px) {
	/* Los dos botones a ancho completo y apilados: a 375 px, en fila quedaban
	   por debajo del área táctil recomendada. */
	.cc-cta-final__actions { width: 100%; flex-direction: column; align-items: stretch; }
	.cc-cta-final__actions .cc-btn { width: 100%; justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   Entradilla de sección
   Eyebrow, titular y un párrafo de contexto antes de un bloque de contenido.
   Se acota a media caja: a 1280 px, un párrafo a todo lo ancho pierde el
   renglón entre línea y línea.
   -------------------------------------------------------------------------- */

.cc-section-intro { max-width: 62ch; }

.cc-section--dark .cc-section-head .cc-lead p { color: var(--cc-text-inverse-muted); }
.cc-section--green .cc-section-head .cc-lead p { color: var(--cc-text-muted); }

.cc-section-intro__text.cc-section-intro__text,
.cc-section-intro__text.cc-section-intro__text p {
	max-width: 62ch;
	font-size: clamp(0.9375rem, 0.3vw + 0.875rem, 1.0625rem);
	line-height: 1.75;
	color: var(--cc-text-muted);
	margin: 0;
}

/* El enlace de la derecha del encabezado de sección no se parte, y su columna
   se mide por el contenido. Elementor la declara a cero de ancho para que el
   titular se lleve el espacio sobrante; con `nowrap` y ancho cero, el texto
   salía impreso fuera de la caja. */
.cc-section-head .cc-arrow-link { white-space: nowrap; }

 /* `:nth-child(2)` y no `:last-child`: cuando la cabecera no lleva enlace, el
   último hijo es la propia columna de texto, y la regla la empujaba a la
   segunda columna dejando media sección vacía y el párrafo encima del
   titular. */
.cc-section-head > .e-con:nth-child(2) {
	width: auto;
	flex: 0 0 auto;
}

/* Variante de dos columnas: el titular a la izquierda y el texto de apoyo a su
   derecha, a la altura de su última línea. Solo desde tablet ancha: por debajo
   no hay sitio para dos columnas de texto. */
@media (min-width: 1025px) {
	/* La fila entera pasa a rejilla para que la acción caiga bajo el texto de
	   apoyo y no flotando a media altura en el margen derecho, que es donde la
	   dejaba el reparto en flex. */
	.cc-section-head--dos-columnas {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		column-gap: clamp(32px, 4vw, 72px);
		row-gap: var(--cc-space-5);
		align-items: start;
	}

	.cc-section-head--dos-columnas > .cc-section-head__text { grid-column: 1 / -1; }

	.cc-section-head--dos-columnas > .e-con:nth-child(2) {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.cc-section-head--dos-columnas .cc-section-head__text {
		/* La cabecera de una sola columna se acota a la medida de lectura, y con
		   razón: 760 px es lo que se lee cómodo de corrido. Repartido en dos
		   columnas ese tope sobra, y sin levantarlo cada una salía a 350 px con
		   el titular partido en cuatro líneas. */
		max-width: none;
		/* Base cero y no `auto`: con base automática la columna pedía el ancho
		   de su contenido, la fila se envolvía y el enlace caía a un segundo
		   renglón, que era justo el alto que se quería ahorrar. */
		flex: 1 1 0;
		min-width: 0;
		display: grid;
		/* El titular se lleva más de la mitad: a partes iguales, una frase de
		   seis palabras en Playfair a 56 px caía en cuatro renglones. */
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		column-gap: clamp(32px, 4vw, 72px);
		align-items: end;
	}

	.cc-section-head--dos-columnas .cc-section-head__text > .cc-eyebrow { grid-column: 1 / -1; }

	.cc-section-head--dos-columnas .cc-section-head__text > .elementor-widget-heading:not(.cc-eyebrow) {
		grid-column: 1;
		grid-row: 2;
	}

	.cc-section-head--dos-columnas .cc-section-head__text > .elementor-widget-text-editor {
		grid-column: 2;
		grid-row: 2;
		padding-bottom: 0.35em;
	}
}

@media (max-width: 600px) {
	/* A 375 px sí puede partir: nowrap lo sacaba del gutter. */
	.cc-section-head { flex-direction: column; align-items: flex-start; }
	.cc-section-head .cc-arrow-link { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Botón: el envoltorio no es el botón
   Elementor pone las clases del widget en `.elementor-element`, no en el
   `<a>`. Con `cc-btn--secondary-dark`, el filete se pintaba dos veces: uno
   alrededor del enlace y otro alrededor del envoltorio, que ocupa todo el
   ancho disponible. Aquí se le retira al envoltorio todo lo que es del botón.
   -------------------------------------------------------------------------- */

.elementor-element.cc-btn,
.elementor-element.cc-btn--primary,
.elementor-element.cc-btn--secondary-dark,
.elementor-element.cc-btn--secondary-light {
	border: 0;
	background-color: transparent;
	padding: 0;
	min-height: 0;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Objetivos táctiles de cabecera y pie (WCAG 2.2 AA, 2.5.8)
   Los enlaces del pie medían 22 px de alto y los iconos 18; el mínimo son 24.
   Se resuelve con alto mínimo: ni el tamaño de la letra ni la posición de nada
   cambian, solo crece la zona que acepta el dedo.
   -------------------------------------------------------------------------- */

:is( header, footer ) .elementor-icon-list-item > a,
:is( header, footer ) .cc-footer__list a {
	display: flex;
	align-items: center;
	min-height: 24px;
}

/* En los iconos el objetivo es el enlace, no el glifo. */
:is( header, footer ) a.elementor-icon,
:is( header, footer ) .elementor-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

/* Menú y carrito no usan `.elementor-icon`; reciben el mismo objetivo sin
   agrandar sus glifos. */
header .elementor-menu-toggle,
header .elementor-menu-cart__toggle .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* En táctil, donde el dedo es más impreciso que el puntero, se sube al tamaño
   cómodo de 44 px sin tocar tampoco la composición. */
@media (hover: none) {
	:is( header, footer ) .elementor-icon-list-item > a,
	:is( header, footer ) .cc-footer__list a {
		min-height: 44px;
	}

	:is( header, footer ) a.elementor-icon,
	:is( header, footer ) .elementor-social-icon {
		min-width: 44px;
		min-height: 44px;
	}
}

/* La rejilla de personas nunca declara más columnas que fichas tiene. Va con
   `.elementor-element` delante para empatar con las reglas que Elementor
   escribe desde el control de columnas; esta hoja carga después y gana. */
@media (min-width: 768px) {
	.elementor-element .cc-authors--n1 { --cc-authors-columnas: 1; }
	.elementor-element .cc-authors--n2 { --cc-authors-columnas: 2; }
	.elementor-element .cc-authors--n3 { --cc-authors-columnas: 3; }
}

/* Cuatro fichas en tres columnas dejaban una huérfana en la segunda fila y,
   por ir sola, tampoco se estiraba a la altura de sus hermanas. En una única
   fila de cuatro el tope de 320 px cede lo justo para caber en la caja. */
@media (min-width: 1025px) {
	.elementor-element .cc-authors--n4 { --cc-authors-columnas: 4; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* En tablet el tope sigue siendo dos, aunque haya tres o cuatro fichas.
	   Con cuatro salen dos filas de dos, que es par y no deja a nadie sola. */
	.elementor-element .cc-authors--n3,
	.elementor-element .cc-authors--n4 { --cc-authors-columnas: 2; }
}

/* Estados de catálogo según cantidad real. Los controles de Elementor siguen
   mandando en el caso general; estos tres estados evitan filas huérfanas y
   tarjetas aisladas estiradas a todo el ancho. */
@media (min-width: 1025px) {
	.elementor-element .cc-trips.cc-trips.cc-trips--n1:not(.cc-trips--capitulos) {
		grid-template-columns: minmax(0, 400px);
		max-width: 400px;
	}

	.elementor-element .cc-trips.cc-trips.cc-trips--n2:not(.cc-trips--capitulos) {
		grid-template-columns: repeat(2, minmax(0, 400px));
		max-width: 840px;
	}

	.elementor-element .cc-trips.cc-trips.cc-trips--n4:not(.cc-trips--capitulos) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Carrusel táctil de fichas en móvil
   Apiladas, las tres fichas de viaje ocupaban casi tres pantallas y la sección
   dejaba de leerse como una unidad. En horizontal ocupa una, la siguiente ficha
   asoma —que es toda la invitación que hace falta— y el gesto es el que ya se
   usa en el teléfono para recorrer una colección.

   La clase se repite tres veces a propósito. Elementor escribe el número de
   columnas como `.elementor-N .elementor-element.elementor-element-XXXX
   .cc-trips` —cuatro clases— y su hoja carga antes que esta. Con menos de
   cuatro clases la regla no llegaba a aplicarse y las fichas colapsaban a
   cincuenta píxeles de ancho. Es el mismo recurso que ya usa el archivo para
   ganarle al Theme Style, sin `!important` y sin depender del orden.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.elementor-element .cc-trips.cc-trips.cc-trips,
	.elementor-element .cc-authors.cc-authors.cc-authors,
	.cc-media-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		/* La ficha no llena el ancho: el resto es la que viene detrás. */
		grid-auto-columns: 78%;
		/* En escritorio la rejilla de personas se centra; aquí no puede, porque
		   centrar el contenido de un carrusel esconde la primera ficha detrás
		   del borde izquierdo y ya no se puede volver a ella. */
		justify-content: start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		/* Sangra hasta el borde de la pantalla y devuelve el margen por dentro:
		   así la primera ficha alinea con el texto y la última respira igual. */
		margin-inline: calc( var(--cc-gutter) * -1 );
		padding-inline: var(--cc-gutter);
		scroll-padding-inline-start: var(--cc-gutter);
		padding-block-end: var(--cc-space-2);
		scrollbar-width: none;
	}

	.elementor-element .cc-trips::-webkit-scrollbar,
	.elementor-element .cc-authors::-webkit-scrollbar,
	.cc-media-grid::-webkit-scrollbar { display: none; }

	.elementor-element .cc-trips > *,
	.elementor-element .cc-authors > *,
	.cc-media-grid > * { scroll-snap-align: start; }

	/* El objeto multimedia no es una ficha con filete: se le pone tope de ancho
	   para que el titular no se estire hasta el borde de la pantalla. */
	.cc-media-grid > * { max-width: none; }

	/* Una única ficha no debe fingir que hay otra pieza fuera de pantalla. */
	.elementor-element .cc-trips--n1.cc-trips--n1.cc-trips--n1 {
		grid-auto-columns: min(100%, 420px);
	}
}

/* Con «reducir movimiento» el ajuste por saltos se desactiva: el encaje brusco
   al soltar el dedo es justo el tipo de movimiento que molesta a quien lo pide. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.elementor-element .cc-trips.cc-trips.cc-trips,
	.elementor-element .cc-authors.cc-authors.cc-authors,
	.cc-media-grid { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
   Franja de confianza
   Pegada al hero y sobre su mismo negro. Cuatro garantías en una línea cada
   una, separadas por filete vertical: es una barra de datos, no una sección de
   beneficios, y por eso no lleva ni titular ni párrafo.
   -------------------------------------------------------------------------- */

.cc-section--trust { padding-block: var(--cc-space-5); }

.cc-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	width: 100%;
}

.cc-trust__item {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	padding-inline: clamp(12px, 1.8vw, 28px);
	border-inline-start: 1px solid var(--cc-border-inverse);
	min-width: 0;
}

.cc-trust__item:first-child { border-inline-start: 0; padding-inline-start: 0; }

.cc-trust__item .cc-icon { color: var(--cc-gold); flex: 0 0 auto; }

.cc-trust__texto.cc-trust__texto,
.cc-trust__texto.cc-trust__texto p {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: rgba(246, 243, 238, 0.86);
	text-wrap: balance;
}

@media (max-width: 1024px) {
	.cc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--cc-space-4); }
	.cc-trust__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 560px) {
	.cc-trust { grid-template-columns: 1fr; }
	.cc-trust__item { border-inline-start: 0; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   Microanimaciones
   La aparición deja de ser en bloque y pasa a ser en cascada: las piezas de una
   rejilla entran una detrás de otra, con muy poco desfase. Es la diferencia
   entre una sección que aparece y una que se compone delante de ti, y es lo que
   quita a la página el aire de cuadrícula.

   Nada de esto existe si el script no pudo armarse o si el visitante pidió
   reducir movimiento.
   -------------------------------------------------------------------------- */

/* La duración sale del token y no de un número suelto. Estaba en 520 ms, que
   además de quedar fuera de la escala hacía que cada ficha tardase 200 ms más
   que la sección que la contiene: la caja terminaba de entrar y su contenido
   seguía apareciendo. */
.cc-js .cc-reveal :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ) {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--cc-duration-reveal) var(--cc-ease),
		transform var(--cc-duration-reveal) var(--cc-ease);
}

.cc-js .cc-reveal.is-visible :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ) {
	opacity: 1;
	transform: none;
}

/* El desfase se reparte por posición. Seis pasos bastan: por encima, la última
   pieza entraría tan tarde que se leería como un fallo de carga. */
.cc-js .cc-reveal.is-visible :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ):nth-child(2) { transition-delay: 70ms; }
.cc-js .cc-reveal.is-visible :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ):nth-child(3) { transition-delay: 140ms; }
.cc-js .cc-reveal.is-visible :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ):nth-child(4) { transition-delay: 210ms; }
.cc-js .cc-reveal.is-visible :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ):nth-child(5) { transition-delay: 280ms; }
.cc-js .cc-reveal.is-visible :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ):nth-child(n + 6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
	.cc-js .cc-reveal :is( .cc-trip, .cc-author, .cc-media, .cc-concept, .cc-step ) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* El enlace con flecha adelanta la punta al pasar por encima. Es el gesto más
   pequeño que existe para decir «esto lleva a algún sitio». */
.elementor-element.cc-arrow-link .elementor-button::after,
.cc-arrow-link::after {
	transition: transform var(--cc-duration) var(--cc-ease);
}

/* Protegido tras `hover: hover`, como manda la política de `base.css`. Este se
   había quedado fuera: en una pantalla táctil el hover se dispara al tocar y no
   se suelta hasta que se toca otra cosa, así que la flecha se adelantaba 4 px y
   se quedaba ahí.

   En la ficha de recurso la flecha ya no es un enlace —lo es el título—, así que
   quien recibe el hover es la ficha entera y es ella la que empuja la punta. */
@media (hover: hover) and (pointer: fine) {
	.elementor-element.cc-arrow-link:hover .elementor-button::after,
	a.cc-arrow-link:hover::after,
	.cc-resource:hover .cc-arrow-link::after { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element.cc-arrow-link .elementor-button::after,
	.cc-arrow-link::after { transition: none; }
	.elementor-element.cc-arrow-link:hover .elementor-button::after,
	a.cc-arrow-link:hover::after,
	.cc-resource:hover .cc-arrow-link::after { transform: none; }
}

/* --------------------------------------------------------------------------
   Próximas experiencias: cada capítulo, un billete

   La forma es la de un billete de embarque en vertical, que es lo que se
   compra: la lámina y el relato arriba, el troquelado en medio y el talón
   abajo con el precio y la acción. El talón es la parte que se arranca, y por
   eso es la que lleva la transacción.

   Las muescas son un recorte real, no dos discos del color del fondo puestos
   encima. La diferencia se ve: un disco tapa la sombra y la ficha parece
   llevar dos pegatinas; un recorte deja que la sombra entre en la muesca y se
   curve con ella.

   Se consigue separando las dos cosas. El envoltorio `.cc-ticket` lleva la
   sombra como `drop-shadow`, que sigue el canal alfa; el billete lleva el
   recorte como `mask`. Como el filtro del padre lee el hijo ya recortado, la
   sombra hereda el contorno con muescas. Con `box-shadow` no se puede: `mask`
   recorta también la sombra del propio elemento.
   -------------------------------------------------------------------------- */

.cc-trips--capitulos {
	--cc-billete-muesca: 13px;
	/* Dónde cae el troquelado, medido desde abajo: justo encima del talón. */
	--cc-billete-talon: 112px;
}

.cc-ticket {
	/* Dos sombras como las de la ficha, pero siguiendo el contorno recortado.
	   No se anima: transicionar un filtro cuesta caro y el levantamiento ya lo
	   cuenta el desplazamiento. */
	filter:
		drop-shadow( 0 1px 1px rgba(17, 17, 17, 0.06) )
		drop-shadow( 0 10px 22px rgba(17, 17, 17, 0.10) );
}

.cc-tour-card-widget { grid-template-columns: minmax(0, 1fr); }

.cc-trips--capitulos > .cc-ticket > .cc-trip {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-lg);
	box-shadow: none;
	background-color: var(--cc-white);

	/* El recorte. Dos capas: la de arriba tapa desde el borde superior hasta la
	   línea del troquelado y le abre la muesca izquierda; la de abajo hace lo
	   propio con la derecha. Cada `radial-gradient` es un disco transparente
	   sobre fondo opaco, y lo transparente es lo que se recorta. */
	--cc-billete-y: calc( 100% - var(--cc-billete-talon) );
	mask:
		radial-gradient( circle var(--cc-billete-muesca) at 0 var(--cc-billete-y), #0000 98%, #000 100% ),
		radial-gradient( circle var(--cc-billete-muesca) at 100% var(--cc-billete-y), #0000 98%, #000 100% );
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}

/* El troquelado, entre las dos muescas. */
.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__foot::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: var(--cc-billete-muesca);
	block-size: 1px;
	background-image: repeating-linear-gradient(
		to right,
		rgba(17, 17, 17, 0.28) 0 6px,
		transparent 6px 12px
	);
	pointer-events: none;
}

/* En el billete la lámina no es elástica: `flex` y `min-height` neutralizan el
   «la imagen se queda con el sobrante» del widget, que aquí descuadraría el
   troquelado. Lo que no debe estar aquí es la proporción: clavada a 4/3 con
   cuatro clases (0,4,0) le ganaba al control «Proporción de la imagen», que
   Elementor escribe con tres (0,3,0). La portada llevaba pidiendo 3/2 en
   escritorio sin conseguirlo, y la ficha salía 33 px más alta de la cuenta. */
.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__media {
	flex: 0 0 auto;
	min-height: 0;
	margin: 0;
}

.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-5) var(--cc-space-5) var(--cc-space-5);
}

.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__title {
	font-size: clamp(1.125rem, 1.25vw, 1.3125rem);
	line-height: 1.16;
}

/* Los datos, como en un billete: rótulo diminuto encima y cifra debajo, en la
   misma vertical y con cifras de ancho fijo para que las tres columnas
   alineen entre fichas. */
.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__meta {
	margin-block-start: auto;
	padding-block-start: var(--cc-space-4);
	border-block-start: 0;
	gap: var(--cc-space-3);
}

.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__meta dt {
	font-size: var(--cc-type-label);
	letter-spacing: var(--cc-tracking);
}

.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__meta dd {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums lining-nums;
}

/* El talón. Va sobre marfil para que se lea como otra parte del billete, que
   es exactamente lo que es: la mitad que se arranca. */
.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__foot {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	/* Precio, código y acción en una línea. Apilados —el precio arriba y el
	   botón a todo el ancho debajo— el talón medía 142 px; en línea son 90, y
	   es además la forma de un billete de verdad. Por debajo de 380 px de ficha
	   no caben los tres y vuelven a apilarse: lo hace la consulta de contenedor
	   de más abajo. */
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas: "precio codigo accion";
	align-items: center;
	gap: var(--cc-space-3);
	min-block-size: var(--cc-billete-talon);
	margin: 0;
	padding: var(--cc-space-4);
	border-block-start: 0;
	background-color: var(--cc-ivory);
}

.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__price { grid-area: precio; }
.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-share--icon { grid-area: codigo; }
.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__arrow { grid-area: accion; width: auto; }

/* Ficha estrecha: los tres vuelven a dos filas y la acción recupera el ancho
   completo, que es lo único que se lee bien a esa medida. */
@container (max-width: 380px) {
	/* El carril del importe pasa de `minmax(0, …)` a `minmax(min-content, …)`.
	   El cero decía que el precio podía encogerse hasta desaparecer, y el talón
	   está en un `.cc-trip` con `overflow: hidden`: a 320 px el carril quedaba en
	   69 px para un importe que pide 112 y «US$ 72.00» se servía cortado por la
	   mitad del último dígito —no con puntos suspensivos: rebanado—. Con
	   `min-content` la rejilla tiene prohibido bajar del ancho del número, que es
	   el único dato de la ficha que no admite aproximación. */
	.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__foot {
		grid-template-columns: minmax(min-content, 1fr) auto;
		grid-template-areas:
			"precio  codigo"
			"accion  accion";
		padding: var(--cc-space-4) var(--cc-space-5);
	}

	.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__arrow { width: 100%; }
}

/* Talón muy estrecho: el importe se queda solo en su fila.
   A 320 px de ventana la ficha mide 187 px y el talón deja 139 px por dentro.
   «US$ 1,290.00» —el viaje más caro del catálogo— pide 145 a cuerpo 22, así que
   ni compartiendo fila con el código ni ocupándola entera cabe. Baja un escalón
   de cuerpo, que a 20 px son 132 px y entran con holgura, y el código se va a su
   propia línea. Es la única medida en la que el billete deja de ser billete;
   por debajo de esto no hay composición que aguante los tres datos en fila. */
@container (max-width: 300px) {
	.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__foot {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"precio"
			"codigo"
			"accion";
		justify-items: start;
		gap: var(--cc-space-2);
	}

	.cc-trips--capitulos > .cc-ticket > .cc-trip .cc-trip__amount { font-size: 1.25rem; }
}

/* El código de barras se retiró del billete. Era decoración —no codificaba
   nada y no se podía pulsar— y ocupaba el mejor hueco del talón, entre el
   importe y la acción. Ese hueco lo ocupa ahora el botón de compartir, que
   antes flotaba en posición absoluta sobre el enlace-manta y se leía como
   añadido encima en lugar de formar parte de la pieza. */

@media (hover: hover) and (pointer: fine) {
	.cc-trips--capitulos > .cc-ticket > .cc-trip:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-trips--capitulos > .cc-ticket > .cc-trip:hover { transform: none; }
}

/* Tres billetes en fila desde tablet ancha; dos y uno por debajo. */
@media (min-width: 1025px) {
	.elementor-element .cc-trips--capitulos.cc-trips--capitulos.cc-trips--capitulos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(20px, 2.2vw, 32px);
		align-items: stretch;
	}
}

/* Con cuatro productos el catálogo llegó a pintar cuatro columnas para cerrar
   la fila. Salía cara: la ficha bajaba a 296 px de ancho por 636 de alto —una
   proporción de 1:2,15, una tira— y el billete no aguanta esa estrechez. Vale
   más una cuarta ficha sola en la segunda fila, que es lo que hace cualquier
   catálogo, que cuatro apretadas. Se mantienen las tres columnas del control. */

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element .cc-trips--capitulos.cc-trips--capitulos.cc-trips--capitulos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cc-space-5);
	}
}

/* --------------------------------------------------------------------------
   Aparición de los elementos de una cabecera
   El microtitular, el titular y el texto de apoyo entran en ese orden, con el
   mismo desfase que las piezas de una rejilla. Es lo que hace que una sección
   se componga delante de ti en vez de aparecer entera de golpe.
   -------------------------------------------------------------------------- */

.cc-js .cc-reveal .cc-section-head__text > *,
.cc-js .cc-reveal > .cc-manifesto__texto > * {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 460ms var(--cc-ease),
		transform 460ms var(--cc-ease);
}

.cc-js .cc-reveal.is-visible .cc-section-head__text > *,
.cc-js .cc-reveal.is-visible > .cc-manifesto__texto > * {
	opacity: 1;
	transform: none;
}

.cc-js .cc-reveal.is-visible .cc-section-head__text > :nth-child(2),
.cc-js .cc-reveal.is-visible > .cc-manifesto__texto > :nth-child(2) { transition-delay: 60ms; }
.cc-js .cc-reveal.is-visible .cc-section-head__text > :nth-child(3) { transition-delay: 120ms; }

/* La fotografía del manifiesto entra con un acercamiento mínimo, no con un
   desplazamiento: una imagen que se mueve de sitio compite con el texto. */
.cc-js .cc-reveal .cc-manifesto__figura img,
.cc-js .cc-reveal .cc-founder img {
	opacity: 0;
	transform: scale(1.04);
	transition:
		opacity 720ms var(--cc-ease),
		transform 900ms var(--cc-ease);
}

.cc-js .cc-reveal.is-visible .cc-manifesto__figura img,
.cc-js .cc-reveal.is-visible .cc-founder img {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.cc-js .cc-reveal .cc-section-head__text > *,
	.cc-js .cc-reveal > .cc-manifesto__texto > *,
	.cc-js .cc-reveal .cc-manifesto__figura img,
	.cc-js .cc-reveal .cc-founder img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Subrótulo dentro de una sección: separa dos listas hermanas sin abrir otra
   sección. Filete a la izquierda y a la derecha, texto en medio. */
.cc-subrotulo.cc-subrotulo .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: var(--cc-space-4);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
	margin: 0;
}

.cc-subrotulo.cc-subrotulo .elementor-heading-title::after {
	content: "";
	flex: 1 1 auto;
	block-size: 1px;
	background-color: var(--cc-border);
}

/* ==========================================================================
   COHERENCIA ENTRE TEMPLATES

   Dos familias de superficie, no una tarjeta distinta por página:
   - billete para cualquier producto reservable;
   - hoja elevada para contenido, formularios y estados vacíos.
   La composición interna puede cambiar, pero papel, radio y profundidad no.
   ========================================================================== */

.cc-media--boxed,
.cc-legal__aside,
.cc-booking,
.cc-trips__empty,
.cc-posts-empty,
.cc-posts--indice,
.cc-posts--recursos .cc-resource,
.cc-author__body {
	background-color: var(--cc-surface-raised);
	border-color: var(--cc-border);
	border-radius: var(--cc-radius-lg);
}

.cc-media--boxed,
.cc-booking,
.cc-posts--recursos .cc-resource,
.cc-author__body { box-shadow: var(--cc-shadow-soft); }

.cc-section-head { margin-block-end: var(--cc-content-gap); }.cc-pagehead :is(h1,
.cc-h1),
.cc-trip-hero__title,
.cc-shop__title,
.cc-system-page__hero h1 {
	font-family: var(--cc-font-display);
	font-size: var(--cc-type-page-title);
	font-weight: 400;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.cc-section-headline,
.cc-cta :is(h2, .cc-h2) { font-size: var(--cc-type-section-title); }

.cc-lead p,
.cc-section-intro__text p,
.cc-trip__title,
.cc-resource__excerpt { text-wrap: pretty; }

/* ==========================================================================
   HOVER EN PANTALLA TÁCTIL

   En un teléfono el hover se dispara al tocar y se queda puesto hasta que
   tocas otra cosa. Cada tarjeta que se levanta al pasar el puntero se quedaba
   levantada después del toque, y la que tocaste antes seguía elevada mientras
   leías la siguiente. Es la clase de detalle que nadie sabe nombrar pero que
   hace que una interfaz se sienta pegajosa.

   Se resuelve en un sitio y no regla a regla: mismos selectores, misma
   especificidad, y esta hoja carga después que las otras dos. Solo se anula el
   desplazamiento; el color y el filete se quedan, porque ahí sí ayudan a
   confirmar qué se ha tocado.
   ========================================================================== */

@media (hover: none) {.cc-card:hover .cc-card__cta .cc-icon,
.cc-whatsapp:hover,
.cc-trip:hover,
.cc-trip:hover .cc-trip__image,
.cc-term:hover .cc-term__image,
.cc-chapter:hover,
.cc-author:hover,
.cc-author:hover .cc-author__image,
.cc-author:hover .cc-author__flecha,
.cc-btn--primary:hover,
.cc-media:hover .cc-media__thumb img,
.cc-gallery__item:hover img,
.cc-concept:hover .cc-concept__media img,
.elementor-element.cc-btn--primary .elementor-button:hover,
.elementor-element.cc-arrow-link:hover .elementor-button::after,
.cc-arrow-link:hover::after {
		transform: none;
	}
}

/* El botón heredaba los 300 ms de serie de Elementor, que para una
   realimentación de pulsación es el doble de lo que debería. */
.elementor-element .elementor-button,
.cc-btn {
	transition-property: background-color, border-color, color, transform, box-shadow;
	transition-duration: var(--cc-duration-fast);
	transition-timing-function: var(--cc-ease-out);
}

.elementor-element .elementor-button:active,
.cc-btn:active {
	transform: scale( var(--cc-press) );
	transition-duration: var(--cc-duration-press);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element .elementor-button,
	.cc-btn { transition: none; }
	.elementor-element .elementor-button:active,
	.cc-btn:active { transform: none; }
}

/* ==========================================================================
   Ficha de viaje — carril de reserva, bloques y aviso legal

   La versión anterior de esta página ponía la caja de reserva la última: a
   4.026 px de scroll en escritorio y a 6.748 en un teléfono, sobre páginas de
   5.774 y 10.117. El primer importe no aparecía hasta pasado el 67 % del
   recorrido, en la única página del sitio cuyo trabajo es cobrar.

   Al mismo tiempo el patrón de etiqueta lateral reservaba 250 px de carril
   para un rótulo de dos palabras, a lo largo de toda la ficha. Una cosa paga
   la otra: el rótulo sube sobre su sección y el carril lo hereda la tarjeta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La rejilla de dos columnas
   -------------------------------------------------------------------------- */

/* La clase cae en el contenedor exterior, pero los hijos viven en
   `.e-con-inner` —así compone Elementor un contenedor «boxed»—, de modo que la
   rejilla tiene que declararse ahí dentro o no gobierna nada. */
.cc-trip-layout > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--cc-rail-width, 380px);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	width: 100%;
}

.cc-trip-main { min-width: 0; }

/* `align-self: start` es lo que hace posible el pegado: una columna estirada
   mide lo que la rejilla entera y no tiene recorrido dentro del que pegarse. */
.cc-trip-rail {
	position: sticky;
	/* Alto medido de cabecera + 54 del índice + 28 de aire. */
	top: calc(var(--cc-header-alto) + 82px);
	align-self: start;
	min-width: 0;
}

/* Por debajo del ancho de tableta la tarjeta no cabe al lado, así que pasa a
   ir la primera: en un teléfono el precio y el botón se leen antes de la
   primera sección, no a seis mil píxeles de allí. */
@media (max-width: 1024px) {
	.cc-trip-layout > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 4vw, 44px);
	}

	.cc-trip-rail {
		position: static;
		order: -1;
	}
}

/* --------------------------------------------------------------------------
   Bloques del cuerpo — el rótulo, encima
   -------------------------------------------------------------------------- */

.cc-trip-block {
	padding-block: clamp(28px, 3vw, 48px);
	border-top: 1px solid var(--cc-border);
}

.cc-trip-block:first-child { border-top: 0; padding-block-start: 0; }

/* El rótulo conserva la tipografía y el filete dorado del patrón lateral: lo
   que cambia es dónde se pone, no qué es. */
.cc-trip-block__label.cc-trip-block__label {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--cc-text);
	margin: 0 0 var(--cc-space-5);
}

.cc-trip-block__label::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	margin-top: var(--cc-space-3);
	background-color: var(--cc-gold-text);
}

.cc-trip-block__body { min-width: 0; }

/* --------------------------------------------------------------------------
   La tarjeta de reserva, ahora que es la protagonista
   -------------------------------------------------------------------------- */

.cc-trip-rail .cc-booking {
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow);
}

/* El botón de compra es el único elemento de la página que tiene que ganar a
   todo lo demás. Ocupa el ancho de la tarjeta, sube a 56 px de alto —bastante
   por encima del mínimo táctil, que aquí no es el criterio— y va en oro sobre
   negro, que es el par de contraste correcto del sistema (7,42:1). */
.cc-booking__cta.cc-booking__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	background-color: var(--cc-gold);
	color: var(--cc-black);
	border-color: var(--cc-gold);
}

.cc-booking__cta.cc-booking__cta:hover,
.cc-booking__cta.cc-booking__cta:focus-visible {
	background-color: var(--cc-gold-dark);
	border-color: var(--cc-gold-dark);
	color: var(--cc-black);
}

/* El de WhatsApp es la vía secundaria y tiene que parecerlo: mismo alto, sin
   relleno. Dos botones sólidos uno encima de otro no dan dos opciones, dan
   una duda. */
.cc-booking__whatsapp.cc-booking__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	width: 100%;
	min-height: 48px;
	background-color: transparent;
	border: 1px solid var(--cc-border);
	color: var(--cc-text);
}

.cc-booking__whatsapp.cc-booking__whatsapp:hover,
.cc-booking__whatsapp.cc-booking__whatsapp:focus-visible {
	border-color: var(--cc-gold-text);
	color: var(--cc-text);
}

/* --------------------------------------------------------------------------
   El precio y el botón dentro del hero
   -------------------------------------------------------------------------- */

.cc-trip-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-3) var(--cc-space-6);
	margin-block-start: var(--cc-space-4);
}

.cc-trip-hero__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
	color: var(--cc-ivory);
}

.cc-trip-hero__price-label,
.cc-trip-hero__price-unit {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.72);
}

/* El importe en Playfair y a cuerpo de titular: en el hero es un argumento,
   no un dato de ficha. */
.cc-trip-hero__price-amount {
	font-family: var(--cc-font-display);
	font-size: clamp(1.75rem, 2.6vw, 2.375rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cc-ivory);
}

.cc-trip-hero__price-amount .woocommerce-Price-amount { white-space: nowrap; }

.cc-trip-hero__book.cc-trip-hero__book {
	min-height: 52px;
	padding-inline: var(--cc-space-6);
	background-color: var(--cc-gold);
	border-color: var(--cc-gold);
	color: var(--cc-black);
}

.cc-trip-hero__book.cc-trip-hero__book:hover,
.cc-trip-hero__book.cc-trip-hero__book:focus-visible {
	background-color: var(--cc-gold-dark);
	border-color: var(--cc-gold-dark);
	color: var(--cc-black);
}

/* En un teléfono el hero ya no tiene sitio para precio y botón en la misma
   línea sin apretarlos contra el borde. */
@media (max-width: 600px) {
	.cc-trip-hero__cta { flex-direction: column; align-items: stretch; gap: var(--cc-space-4); }
	.cc-trip-hero__book.cc-trip-hero__book { width: 100%; }
}

/* --------------------------------------------------------------------------
   Aviso legal de la experiencia
   -------------------------------------------------------------------------- */

/* Presente y legible, pero más callado que lo que vende: fondo apenas distinto,
   filete en lugar de caja con sombra. Un aviso legal escondido en un acordeón
   cerrado no es un aviso; uno que grita compite con el botón. */
.cc-legal {
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-surface-soft);
}

/* Doblada: `.elementor-kit-10 h3` es (0,1,1) y le gana a una sola clase, así
   que el título salía en Playfair a cuerpo de subtitular en lugar de en
   versalitas. Es la misma guarda que usa el resto de la hoja. */
.cc-legal__title.cc-legal__title {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
	margin: 0 0 var(--cc-space-4);
}

.cc-legal__title.cc-legal__title::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	margin-top: var(--cc-space-3);
	background-color: var(--cc-gold-text);
}

.cc-legal__list {
	display: grid;
	gap: var(--cc-space-4);
	margin: 0;
}

.cc-legal__item + .cc-legal__item {
	padding-block-start: var(--cc-space-4);
	border-top: 1px solid var(--cc-border);
}

.cc-legal__term {
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cc-text);
	margin: 0 0 var(--cc-space-2);
}

/* El título de cláusula puede llevar rango de encabezado: si lo lleva, hereda
   el cuerpo del `<dt>` en lugar de la escala global de titulares. */
.cc-legal__term-heading {
	font: inherit;
	color: inherit;
	margin: 0;
}

.cc-legal__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--cc-text-muted);
	margin: 0;
	max-width: 68ch;
}

.cc-legal__note {
	margin: var(--cc-space-5) 0 0;
	padding-block-start: var(--cc-space-4);
	border-top: 1px solid var(--cc-border);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
}

/* --------------------------------------------------------------------------
   Cierre y galería
   -------------------------------------------------------------------------- */

.cc-trip-close__body {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.cc-trip-close__body .cc-lead { color: rgba(246, 243, 238, 0.78); }

/* El ancla del carril tiene que dejar sitio a la cabecera y al índice, o el
   salto deja la tarjeta por debajo de los dos. */
.single-product #reservar { scroll-margin-block-start: 156px; }

@media (max-width: 767px) {
	.single-product #reservar { scroll-margin-block-start: 146px; }
}

/* ==========================================================================
   Hero de la portada — toma vertical, precio de entrada y enlace secundario
   ========================================================================== */

/* El `<picture>` no debe crear una caja propia entre el contenedor y la
   imagen: la fotografía se posiciona a sangre y una caja intermedia con alto
   automático la dejaba en su alto natural. */
.cc-hero-media__picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* La caja del hero deja de pedir casi la pantalla entera en un teléfono. Con
   la toma vertical el recorte ya es razonable, pero 92svh obligaba además a
   desplazar para ver la franja de confianza, que es la que contesta «¿de qué
   va esto?» antes de que nadie decida seguir. */
@media (max-width: 767px) {
	.cc-hero { min-height: 78vh; min-height: 78svh; }
}

/* --------------------------------------------------------------------------
   El precio de entrada
   -------------------------------------------------------------------------- */

.cc-hero__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.45em;
	margin: var(--cc-space-5) 0 0;
	color: var(--cc-ivory);
}

.cc-hero__price-label,
.cc-hero__price-unit {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.72);
}

/* En Playfair y a cuerpo de titular menor: en el hero de la portada el precio
   es un argumento, pero no compite con «Viajes que te transforman». */
.cc-hero__price-amount.cc-hero__price-amount {
	font-family: var(--cc-font-display);
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cc-ivory);
}

.cc-hero__price-amount .woocommerce-Price-amount { white-space: nowrap; }

/* --------------------------------------------------------------------------
   El enlace secundario
   -------------------------------------------------------------------------- */

/* A 390 px la flecha circular se descolgaba al extremo derecho, separada de su
   texto: dejaba de leerse como un enlace y pasaba a parecer un botón suelto.

   La causa no era el texto sino la caja. `.cc-circle-link` cae en el envoltorio
   del widget de Elementor, y en la columna del móvil ese envoltorio se estira a
   todo el ancho —310 px a 390—. Dentro, texto (264,5) más hueco más flecha (44)
   piden 324, así que el texto se partía y la flecha se iba al extremo del
   envoltorio, no al final de la frase.

   Encogido a su contenido, texto y flecha vuelven a ser una sola pieza: si el
   texto necesita dos líneas las ocupa, pero la flecha viaja con él. */
@media (max-width: 767px) {
	/* Elementor da `width: 100%` a los widgets dentro de un contenedor, así que
	   `auto` no basta: hace falta `fit-content` y desactivar el crecimiento
	   flex, y con la clase doblada para ganarle. */
	.cc-hero__actions > .cc-circle-link.cc-circle-link {
		width: fit-content;
		max-width: 100%;
		flex: 0 0 auto;
		align-self: flex-start;
	}

	/* La fila declara `flex-start` para móvil en la composición, pero Elementor
	   no lo emite y computa `center`: el enlace salía centrado bajo un botón
	   alineado a la izquierda. */
	.cc-hero__actions.cc-hero__actions { align-items: flex-start; }

	/* Soltar el tracking devuelve 30 px de los 324 que la línea pedía. */
	.cc-hero__actions .cc-circle-link.cc-circle-link { letter-spacing: 0.06em; }

	/* Y el texto se acota a su medida, que es lo que ata la flecha a la frase.
	   Sin tope, el ancho máximo del enlace son 324 px —texto 264,5 más hueco
	   más flecha 44— contra los 310 que hay: el texto se partía y la flecha se
	   iba al extremo de la caja. Con el texto a 15 rem el conjunto pide 300 y
	   cabe, así que el envoltorio encoge a su contenido y la flecha queda
	   donde acaba la frase, no donde acaba la columna. */
	.cc-hero__actions .cc-circle-link .elementor-button-text {
		max-width: 15rem;
		text-wrap: balance;
	}
}

/* La flecha nunca encoge: es el objetivo táctil del enlace. */
.cc-hero__actions .cc-circle-link .cc-circle-link__icon,
.cc-hero__actions .cc-circle-link .cc-ico { flex: none; }

/* ==========================================================================
   Compartir una experiencia
   ========================================================================== */

.cc-share-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin-block-start: var(--cc-space-4);
}

/* Los dos botones son secundarios por definición: comparten una página cuyo
   trabajo es que se pulse «Reservar y pagar». Filete, no relleno. */
.cc-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	flex: 1 1 auto;
	min-height: 44px;
	padding-inline: var(--cc-space-4);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: transparent;
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-text);
	cursor: pointer;
	transition:
		border-color var(--cc-duration-fast) var(--cc-ease),
		color var(--cc-duration-fast) var(--cc-ease);
}

.cc-share:hover,
.cc-share:focus-visible { border-color: var(--cc-gold-text); color: var(--cc-text); }

.cc-share .cc-icon { width: 18px; height: 18px; flex: none; }

/* El acuse de copiado se dice con color y con palabra, no solo con color. */
.cc-share--copy.is-done { border-color: var(--cc-green); color: var(--cc-green); }

/* --------------------------------------------------------------------------
   La variante del talón del billete
   -------------------------------------------------------------------------- */

/* Por encima del enlace-manta de la ficha, que va a z-index 3: si quedara
   debajo, pulsarlo abriría el viaje en lugar de compartirlo. Ya no va en
   posición absoluta: ocupa su propia celda en la rejilla del talón, la que
   dejó el código de barras. */
.cc-share--icon {
	position: relative;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px de objetivo táctil aunque el dibujo mida 18: el mínimo de WCAG no
	   se negocia por estética, y el icono no necesita caja visible. */
	width: 44px;
	min-height: 44px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-full);
	color: var(--cc-text-muted);
}

.cc-share--icon:hover,
.cc-share--icon:focus-visible {
	background-color: rgba(17, 17, 17, 0.06);
	color: var(--cc-gold-text);
}

.cc-trip__foot { position: relative; }

/* En el talón estrecho la rejilla pasa a dos filas y el icono se va con el
   importe, así que ya no hay que retirarlo: tiene celda propia. */

/* ==========================================================================
   Reseñas y valoraciones
   ========================================================================== */

/* Las estrellas son de trazo y se rellenan al encenderse: el set del sitio es
   lineal y una estrella maciza apagada se lee como un borrón. */
.cc-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--cc-gold-text); }
.cc-stars__item { display: inline-flex; }
.cc-stars .cc-icon { width: 18px; height: 18px; }
.cc-stars__item { opacity: 0.28; }
.cc-stars__item.is-on { opacity: 1; }
.cc-stars__item.is-on .cc-icon { fill: currentColor; }
.cc-stars--micro .cc-icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   El bloque de la ficha
   -------------------------------------------------------------------------- */

.cc-reviews__summary {
	display: flex;
	align-items: center;
	gap: var(--cc-space-4);
	padding-block-end: var(--cc-space-5);
	border-block-end: 1px solid var(--cc-border);
}

.cc-reviews__average.cc-reviews__average {
	font-family: var(--cc-font-display);
	font-size: clamp(2.5rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cc-text);
	margin: 0;
}

.cc-reviews__meta { display: grid; gap: var(--cc-space-2); }

.cc-reviews__count {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--cc-text-muted);
}

.cc-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; }

.cc-review { padding-block: var(--cc-space-5); }
.cc-review + .cc-review { border-top: 1px solid var(--cc-border); }

.cc-review__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2) var(--cc-space-4);
	margin-block-end: var(--cc-space-3);
}

.cc-review__author {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cc-text);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-3);
}

/* «Viajó con nosotros» es el dato que hace creíble a la reseña, así que se
   dice con palabras y no solo con un icono. */
.cc-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-green);
}

.cc-review__verified .cc-icon { width: 14px; height: 14px; }

.cc-review__text { font-size: 1rem; line-height: 1.65; color: var(--cc-text); max-width: 68ch; }
.cc-review__text p { margin: 0 0 var(--cc-space-3); }
.cc-review__text p:last-child { margin-block-end: 0; }

.cc-review__date {
	margin: var(--cc-space-3) 0 0;
	font-size: 0.8125rem;
	color: var(--cc-text-muted);
}

/* --------------------------------------------------------------------------
   El formulario
   -------------------------------------------------------------------------- */

.cc-reviews__form {
	margin-block-start: var(--cc-space-6);
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-surface-soft);
}

.cc-reviews__form-title.cc-reviews__form-title {
	font-family: var(--cc-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--cc-text);
	margin: 0 0 var(--cc-space-4);
}

.cc-reviews__form :is(label, .comment-form-rating label) {
	display: block;
	margin-block-end: var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-reviews__form :is(input[type="text"], input[type="email"], textarea, select) {
	width: 100%;
	min-height: 44px;
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-white);
	font: inherit;
	font-size: var(--cc-type-control);
	color: var(--cc-text);
}

.cc-reviews__form textarea { min-height: 9rem; resize: vertical; }

.cc-reviews__form :is(input, textarea, select):focus-visible {
	outline: none;
	border-color: var(--cc-gold-text);
	box-shadow: 0 0 0 3px var(--cc-gold-soft);
}

.cc-reviews__form :is(.comment-form-author, .comment-form-email, .comment-form-comment, .comment-form-rating) {
	margin-block-end: var(--cc-space-4);
}

.cc-reviews__form .required { color: var(--cc-gold-text); }

/* --------------------------------------------------------------------------
   La media en el billete y en el carril
   -------------------------------------------------------------------------- */

.cc-trip__rating,
.cc-booking__rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin: var(--cc-space-3) 0 0;
	font-size: 0.8125rem;
	color: var(--cc-text-muted);
}

.cc-trip__rating-value,
.cc-booking__rating-value { font-weight: 600; color: var(--cc-text); }

/* El enlace del carril salta al bloque de reseñas; por encima del enlace-manta
   de la tarjeta no hace falta, porque en el carril no hay manta. */
.cc-booking__rating-link { color: var(--cc-text-muted); text-underline-offset: 3px; }
.cc-booking__rating-link:hover { color: var(--cc-gold-text); }

.single-product #resenas { scroll-margin-block-start: 168px; }

/* --------------------------------------------------------------------------
   Bloques que se retiran solos cuando no tienen qué decir
   -------------------------------------------------------------------------- */

/* El rótulo de sección lo pinta la composición y el contenido lo pinta un
   widget que puede decidir no pintar nada: sin reseñas publicadas, o sin
   cláusulas legales escritas, quedaba el título con su filete dorado sobre un
   cuerpo vacío. Y una sección de reseñas en blanco no es neutral: anuncia que
   nadie ha ido.

   `:has()` deja resolverlo donde se ve el problema —en la hoja— en lugar de
   duplicar en la composición la condición que el widget ya evalúa. */
#resenas:not(:has(.cc-reviews)),
#legal:not(:has(.cc-legal)),
#voz:not(:has(.cc-testimonial)) {
	display: none;
}

/* Invitación a identificarse para escribir una reseña. */
.cc-reviews__login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-block-start: var(--cc-space-5);
	padding: clamp(18px, 2vw, 26px);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-surface-soft);
}

.cc-reviews__login-text {
	margin: 0;
	max-width: 42ch;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--cc-text-muted);
}

/* La reseña se revisa antes de publicarse, y conviene decirlo antes de
   escribirla: quien no ve aparecer la suya cree que se perdió. */
.cc-reviews__moderation {
	margin: var(--cc-space-3) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
}

/* ==========================================================================
   Primera pantalla — hero más contenido y franja de confianza con cuerpo
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. El hero cede alto
   -------------------------------------------------------------------------- */

/* De 88svh a 80: a 1440x900 son 792 px de hero contra 123 de franja negra, y
   la franja es la que contesta «¿qué pasa si reservo?». Los 72 px que suelta
   el hero se los queda ella. El titular no se toca: lo que sobraba era aire,
   no contenido. */
.cc-hero.cc-hero {
	min-height: 80vh;
	min-height: 80svh;
}

@media (max-width: 767px) {
	.cc-hero.cc-hero { min-height: 72vh; min-height: 72svh; }
}

/* --------------------------------------------------------------------------
   2. El texto sobre la fotografía
   -------------------------------------------------------------------------- */

/* El velo del hero va de opaco a transparente: a 1440 px empieza a aclararse
   en x=461 y a los 893 ya no cubre. El párrafo acababa en x=710, o sea con las
   últimas palabras sobre las figuras iluminadas. Acotado a su medida de
   lectura, termina antes de que el fondo se levante. */
.cc-hero__body .cc-lead,
.cc-hero__body .cc-lead p {
	max-width: 44ch;
}

/* El titular puede permitirse más ancho —es Playfair a cuerpo grande y aguanta
   sobre cualquier fondo—, pero no tanto como para pisar a la persona que mira. */
.cc-hero__body :is(h1, .cc-h1) { max-width: 15ch; }

/* Ritmo por grupos, no por igual. Antes todo iba separado 40-50 px, así que
   las cinco piezas se leían como cinco cosas sueltas. Ahora el rótulo y el
   titular son una unidad, el filete y la promesa otra, y el precio con los
   botones la tercera: lo que se mira, lo que se entiende y lo que se pulsa. */
.cc-hero__body > * + * { margin-block-start: 0; }

.cc-hero__body .cc-rule,
.cc-hero__body hr { margin-block: var(--cc-space-5) var(--cc-space-4); }

.cc-hero__price { margin-block-start: var(--cc-space-6); }

.cc-hero__actions { margin-top: var(--cc-space-4); }

/* --------------------------------------------------------------------------
   3. Los cuatro beneficios, en cajas iguales
   -------------------------------------------------------------------------- */

.cc-section--trust.cc-section--trust {
	padding-block: clamp(28px, 3.2vw, 44px);
}

.cc-trust {
	gap: var(--cc-space-3);
	align-items: stretch;
}

/* La caja es lo que iguala: mismo relleno, mismo filete y misma altura para
   los cuatro, con el icono arriba. Un texto de una línea y otro de dos dejan
   de producir dos piezas distintas. */
/* La dirección y la alineación se declaran con las variables de Elementor, no
   con `flex-direction` a pelo: sus contenedores leen `--flex-direction` y
   `--align-items`, así que una declaración directa pierde contra la suya y la
   caja seguía en columna centrada donde debía ir en fila. */
.cc-trust__item.cc-trust__item {
	/* Las dos formas, y no por duda: Elementor lee `--align-items` en su propia
	   regla, pero la versión anterior de esta hoja declaraba `align-items:
	   center` directamente sobre `.cc-trust__item`, y una declaración directa
	   gana a un `var()` leído desde otra regla de menor especificidad. Con las
	   variables solas, las cajas seguían centradas. */
	--flex-direction: column;
	--align-items: flex-start;
	--justify-content: flex-start;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--cc-space-3);
	height: 100%;
	/* Doblado para ganarle a la regla de `:first-child`, que nació para quitar
	   el filete divisorio de la primera columna y de paso le quitaba el relleno
	   izquierdo. Con cajas propias eso deja la primera descuadrada respecto de
	   las otras tres. */
	padding: var(--cc-space-4);
	padding-inline-start: var(--cc-space-4);
	border: 1px solid var(--cc-border-inverse);
	border-inline-start: 1px solid var(--cc-border-inverse);
	border-radius: var(--cc-radius-md);
	background-color: rgba(246, 243, 238, 0.03);
	transition:
		border-color var(--cc-duration-fast) var(--cc-ease),
		background-color var(--cc-duration-fast) var(--cc-ease);
}

@media (hover: hover) and (pointer: fine) {
	.cc-trust__item:hover {
		border-color: rgba(184, 148, 90, 0.45);
		background-color: rgba(246, 243, 238, 0.055);
	}
}

.cc-trust__item .cc-icon { color: var(--cc-gold); flex: none; }

.cc-trust__texto.cc-trust__texto,
.cc-trust__texto.cc-trust__texto p {
	text-wrap: pretty;
	max-width: 26ch;
}

@media (max-width: 900px) {
	.cc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	/* A una columna la caja vertical desperdicia alto: el icono vuelve al lado
	   del texto, que es lo que cabe en un teléfono sin estirar la franja. */
	.cc-trust { grid-template-columns: 1fr; }

	.cc-trust__item.cc-trust__item {
		--flex-direction: row;
		--align-items: center;

		flex-direction: row;
		align-items: center;
		gap: var(--cc-space-3);
		padding-block: var(--cc-space-3);
	}

	.cc-trust__texto.cc-trust__texto,
	.cc-trust__texto.cc-trust__texto p { max-width: none; }
}

/* --------------------------------------------------------------------------
   4. La entrada de la primera sección
   -------------------------------------------------------------------------- */

/* Esta sección es la única del sitio que ya está en pantalla cuando la página
   carga, así que `.cc-reveal` no le sirve: su observador dispara en el mismo
   instante en que el script pone el estado inicial, de modo que la clase que
   esconde y la que muestra llegan juntas y no hay transición que ver.
   Comprobado: las cuatro cajas nunca pasaban por opacidad 0.

   Va con `animation` y no con `transition`, porque una animación de carga no
   necesita que nada cambie de estado: empieza sola. Y sin JavaScript de por
   medio, así que no depende de que un script llegue a tiempo.

   El guardado es `no-preference`, no una anulación posterior: quien pide menos
   movimiento no llega a tener la regla, y por tanto tampoco el `opacity: 0`
   del primer fotograma. Nadie se queda mirando una franja en blanco. */
@media (prefers-reduced-motion: no-preference) {
	.cc-hero__body > *,
	.cc-trust__item {
		animation: cc-entra 620ms var(--cc-ease-soft) both;
	}

	/* El hero abre y la franja remata: el escalón recorre la primera pantalla
	   de arriba abajo una sola vez. 80 ms entre piezas se lee como una
	   secuencia; menos, como un parpadeo. */
	.cc-hero__body > *:nth-child(1) { animation-delay: 60ms; }
	.cc-hero__body > *:nth-child(2) { animation-delay: 140ms; }
	.cc-hero__body > *:nth-child(3) { animation-delay: 220ms; }
	.cc-hero__body > *:nth-child(4) { animation-delay: 300ms; }
	.cc-hero__body > *:nth-child(5) { animation-delay: 380ms; }
	.cc-hero__body > *:nth-child(6) { animation-delay: 460ms; }

	.cc-trust__item:nth-child(1) { animation-delay: 520ms; }
	.cc-trust__item:nth-child(2) { animation-delay: 600ms; }
	.cc-trust__item:nth-child(3) { animation-delay: 680ms; }
	.cc-trust__item:nth-child(4) { animation-delay: 760ms; }
}

@keyframes cc-entra {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   El hero ocupa la primera pantalla entera, con los beneficios dentro
   ========================================================================== */

/* Los cuatro beneficios quedaban por debajo del pliegue: había que desplazarse
   para leer justo lo que contesta «¿qué pasa si reservo?». Ahora el hero mide
   la ventana entera y la franja va dentro, flotando sobre el pie de la
   fotografía. Al ser hija, entra en el viewport por construcción: no hay margen
   negativo que cuadrar ni dos alturas que mantener sincronizadas. */
.cc-hero.cc-hero {
	min-height: 100vh;
	min-height: 100svh;
	/* Columna, para que el cuerpo pueda centrarse y la franja caer al pie. */
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	/* El respiro inferior lo pone ahora la franja. */
	padding-block-end: clamp(24px, 3vw, 40px);
}

/* `margin-block-start: auto` es lo que empuja la franja al fondo sin sacarla
   del flujo: posicionarla en absoluto la dejaría fuera del cálculo de alto y el
   hero podría acabar solapando su propio contenido en pantallas bajas. */
.cc-hero .cc-trust {
	margin-block-start: auto;
	position: relative;
	z-index: 1;
	padding-block-start: clamp(28px, 4vh, 56px);
}

/* El cuerpo deja de crecer para que el centrado sea real: sin esto, la franja
   con `auto` se lleva todo el sobrante y el titular sube al borde superior. */
.cc-hero__body { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   El velo, ahora en dos direcciones
   -------------------------------------------------------------------------- */

/* El degradado era solo lateral —oscuro a la izquierda, limpio a la derecha—
   porque ahí solo había texto. Con las cajas al pie hace falta además un velo
   inferior: sobre la piedra iluminada del claustro, un filete a 18 % de blanco
   y un texto a 86 % no llegan a leerse. */
.cc-hero::after {
	background:
		linear-gradient(
			0deg,
			var(--cc-veil-full) 0%,
			var(--cc-veil-strong) 22%,
			transparent 52%
		),
		linear-gradient(
			90deg,
			var(--cc-veil-full) 0%,
			var(--cc-veil-strong) 32%,
			var(--cc-veil-soft) 62%,
			var(--cc-veil-none) 100%
		);
}

@media (max-width: 767px) {
	.cc-hero::after {
		background:
			linear-gradient(
				0deg,
				var(--cc-veil-full) 0%,
				var(--cc-veil-strong) 46%,
				var(--cc-veil-soft) 100%
			);
	}
}

/* --------------------------------------------------------------------------
   Las cajas, ahora sobre fotografía y no sobre negro plano
   -------------------------------------------------------------------------- */

/* Sobre una fotografía el fondo casi transparente de antes no bastaba: la caja
   se perdía en cuanto detrás pasaba una columna clara. Un velo propio con
   desenfoque la despega del fondo sin taparlo. */
.cc-trust__item.cc-trust__item {
	background-color: rgba(17, 17, 17, 0.42);
	border-color: rgba(246, 243, 238, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
	.cc-trust__item.cc-trust__item:hover {
		background-color: rgba(17, 17, 17, 0.55);
		border-color: rgba(184, 148, 90, 0.55);
	}
}

/* En un teléfono la ventana entera menos la cabecera deja poco sitio: el
   titular, la promesa, el precio, dos acciones y cuatro cajas no caben sin
   apretarlo todo. La franja vuelve a apoyarse bajo la fotografía, que es donde
   cabe, y el hero recupera su alto de trabajo. */
@media (max-width: 767px) {
	.cc-hero.cc-hero { min-height: 88vh; min-height: 88svh; }
	.cc-hero .cc-trust { padding-block-start: var(--cc-space-5); }
}

/* --------------------------------------------------------------------------
   Pantallas bajas: que la franja siga cabiendo
   -------------------------------------------------------------------------- */

/* `100svh` fija un mínimo, no un máximo: si el contenido pide más, el hero
   crece y la franja vuelve a caer por debajo del pliegue. Medido: a 1440x800 se
   salía 39 px y a 1280x720 —un portátil corriente con su barra de navegación—
   99 px.

   La restricción es de alto, así que se resuelve con consultas de alto y no de
   ancho: un monitor de 1440x2560 en vertical no tiene este problema y no debe
   heredar estas compresiones.

   Lo que cede es la caja, no el contenido: las cuatro piezas pasan a fila
   —icono al lado del texto— y bajan de 103 px a 48, que es lo que hace que
   quepa sin quitar una palabra. */
@media (min-width: 768px) and (max-height: 900px) {
	.cc-hero.cc-hero { padding-block-start: 96px; }

	.cc-hero__body { gap: var(--cc-space-3); }

	.cc-hero__price { margin-block-start: var(--cc-space-4); }

	.cc-hero .cc-trust { padding-block-start: clamp(18px, 2.6vh, 32px); }

	.cc-trust__item.cc-trust__item {
		--flex-direction: row;
		--align-items: center;

		flex-direction: row;
		align-items: center;
		padding-block: var(--cc-space-3);
	}

	.cc-trust__texto.cc-trust__texto,
	.cc-trust__texto.cc-trust__texto p { max-width: none; }
}

/* Por debajo de 780 px de ventana ya no basta con encoger las cajas: también
   sobra aire alrededor del titular. */
@media (min-width: 768px) and (max-height: 780px) {
	.cc-hero.cc-hero { padding-block-start: 88px; padding-block-end: var(--cc-space-4); }

	.cc-hero__body :is(h1, .cc-h1) { font-size: clamp(2.25rem, 3.4vw, 3rem); }

	.cc-hero__body .cc-rule,
	.cc-hero__body hr { margin-block: var(--cc-space-4) var(--cc-space-3); }

	.cc-hero .cc-trust { gap: var(--cc-space-2); }
}

/* En una columna cada caja es su propia fila de la rejilla, así que `stretch`
   no las puede igualar: la primera cabe en una línea y las otras tres piden
   dos. Un mínimo común las devuelve a la misma altura. */
@media (max-width: 560px) {
	.cc-trust__item.cc-trust__item { min-height: 4.75rem; }
}

/* ==========================================================================
   Tarjeta de persona — especialistas, autores, fundadores y colaboradores

   Una sola tarjeta para las cuatro figuras y para las cinco plantillas donde
   aparecen: portada, catálogo de especialistas, ficha de persona, sobre
   nosotros y ficha de viaje. Todas pasan por
   `CC_Widget_People_Base::render_card()`.

   Sobre la referencia que trajo el cliente: retrato inserto con esquinas
   redondeadas, nombre con su marca, una línea de descripción y un pie con
   datos y acción. Traducida a los materiales del sitio —papel, Playfair, oro y
   filete de un píxel— en lugar del gris y el verde de la referencia.
   ========================================================================== */

.cc-author {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	background-color: var(--cc-white);
	box-shadow: var(--cc-shadow-soft);
	transition:
		border-color var(--cc-duration-fast) var(--cc-ease),
		box-shadow var(--cc-duration) var(--cc-ease),
		transform var(--cc-duration) var(--cc-ease);
}

@media (hover: hover) and (pointer: fine) {
	.cc-author:hover {
		transform: translateY(-3px);
		border-color: rgba(184, 148, 90, 0.45);
		box-shadow: var(--cc-shadow);
	}
}

.cc-author:focus-within { border-color: var(--cc-gold-text); }

/* --------------------------------------------------------------------------
   El retrato, inserto
   -------------------------------------------------------------------------- */

/* Con aire alrededor y esquinas propias, que es lo que lo separa de una ficha
   de catálogo con la foto a sangre. Apaisado 5:4 y no cuadrado: con cinco
   personas en pantalla, un retrato cuadrado a 383 px de columna daba tarjetas
   de 523 px y la sección volvía a leerse como una galería. Fijo, así que las
   tarjetas miden lo mismo diga lo que diga el texto. */
.cc-author__retrato {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-stone);
	display: grid;
	place-items: center;
	isolation: isolate;
}

.cc-author__image.cc-author__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cc-duration-slow, 560ms) var(--cc-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
	.cc-author:hover .cc-author__image { transform: scale(1.04); }
}

/* Sin fotografía real, la inicial ocupa el mismo hueco. Ni el tamaño ni la
   posición cambian, así que una fila mezclada no se lee como a medio cargar. */
.cc-author--sin-retrato .cc-author__retrato {
	background-color: var(--cc-surface-soft);
	border: 1px solid var(--cc-border);
}

.cc-author__inicial {
	font-family: var(--cc-font-display);
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	color: var(--cc-gold-text);
	opacity: 0.3;
	user-select: none;
}

/* El papel va sobre el retrato, como la etiqueta del billete sobre la
   fotografía del viaje: es la misma familia de pieza y conviene que se
   reconozcan entre ellas. */
.cc-author__papel {
	position: absolute;
	inset-block-end: var(--cc-space-3);
	inset-inline-start: var(--cc-space-3);
	z-index: 1;
	margin: 0;
	padding: 5px var(--cc-space-3);
	border-radius: var(--cc-radius-full);
	background-color: rgba(17, 17, 17, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-gold);
}

.cc-author--sin-retrato .cc-author__papel {
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	color: var(--cc-gold-text);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   El cuerpo
   -------------------------------------------------------------------------- */

.cc-author__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
	min-width: 0;
	padding: var(--cc-space-3) var(--cc-space-3) var(--cc-space-2);
}

.cc-author__nombre.cc-author__nombre {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--cc-text);
}

/* El enlace cubre la tarjeta entera, pero el nombre es lo que anuncia un
   lector de pantalla. */
.cc-author__link { color: inherit; text-decoration: none; min-width: 0; }

.cc-author__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.cc-author__link:focus-visible { outline: 2px solid var(--cc-gold-text); outline-offset: 3px; }

/* El sello de quien fundó la casa: el tic de la referencia, pero en el oro de
   la marca y sobre disco, no en verde de red social. */
.cc-author__sello {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	border-radius: var(--cc-radius-full);
	background-color: var(--cc-gold);
	color: var(--cc-black);
}

.cc-author__sello .cc-icon { width: 13px; height: 13px; stroke-width: 2.5; }

.cc-author__disciplina {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
	/* Dos líneas como la referencia: más allá deja de ser una descripción y
	   pasa a ser una biografía, que es lo que la ficha de la persona ya hace. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cc-author__disciplina--cita { font-family: var(--cc-font-display); font-style: italic; }

/* --------------------------------------------------------------------------
   El pie: datos y acción
   -------------------------------------------------------------------------- */

.cc-author__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	margin-block-start: auto;
	padding-block-start: var(--cc-space-3);
	min-width: 0;
}

.cc-author__datos {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cc-author__dato {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--cc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cc-author__dato .cc-icon { width: 14px; height: 14px; flex: none; color: var(--cc-gold-text); }

/* El recorte va en el `span` y no en el contenedor: `text-overflow` no alcanza
   a un nodo de texto suelto dentro de una caja flex, así que «Universidad
   Complutense de Madrid» se cortaba a media palabra y sin puntos suspensivos. */
.cc-author__dato > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La píldora de la referencia. Aquí no es un botón de acción —la tarjeta
   entera ya es el enlace—, así que va en filete y no en relleno: anuncia a
   dónde lleva sin competir con «Reservar», que es el único botón sólido que
   este sitio se permite. */
.cc-author__accion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	min-height: 34px;
	padding-inline: var(--cc-space-3);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-full);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-text);
	transition:
		border-color var(--cc-duration-fast) var(--cc-ease),
		background-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-author__accion .cc-icon { width: 14px; height: 14px; }

@media (hover: hover) and (pointer: fine) {
	.cc-author:hover .cc-author__accion {
		border-color: var(--cc-gold);
		background-color: var(--cc-gold);
		color: var(--cc-black);
	}
}

/* --------------------------------------------------------------------------
   Cuatro columnas y no tres: con tres, cada tarjeta se llevaba 383 px de la
   fila y el retrato crecía con ella. A cuatro, la pieza baja a 282 px y la
   sección deja de pesar como un catálogo de producto.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.cc-authors { --cc-authors-columnas: 4; }
}

/* --------------------------------------------------------------------------
   Colaboradores: la misma tarjeta, menos peso
   -------------------------------------------------------------------------- */

/* Comparten sección con el equipo porque son la misma criatura con otro
   rótulo, pero quien acompaña el viaje es el especialista. El retrato se
   acorta y el pie se queda en una línea. */
.cc-authors--secundaria .cc-author__retrato { aspect-ratio: 3 / 2; }

.cc-authors--secundaria .cc-author__nombre.cc-author__nombre {
	font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
}

.cc-authors--secundaria .cc-author__disciplina { -webkit-line-clamp: 1; }

.cc-authors--secundaria .cc-author__inicial { font-size: clamp(2.5rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   En columna estrecha
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	/* El pie apilado: en 229 px de tarjeta, los datos y la píldora en la misma
	   fila dejaban al país 60 px y a la píldora sin sitio para su texto. */
	.cc-author__pie {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cc-space-3);
	}

	.cc-author__accion { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   La entrada, escalonada como la primera pantalla
   -------------------------------------------------------------------------- */

.cc-js .cc-reveal .cc-author {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--cc-duration-slow, 560ms) var(--cc-ease-soft),
		transform var(--cc-duration-slow, 560ms) var(--cc-ease-soft);
}

.cc-js .cc-reveal.is-visible .cc-author { opacity: 1; transform: none; }
.cc-js .cc-reveal.is-visible .cc-author:nth-child(2) { transition-delay: 90ms; }
.cc-js .cc-reveal.is-visible .cc-author:nth-child(3) { transition-delay: 180ms; }
.cc-js .cc-reveal.is-visible .cc-author:nth-child(4) { transition-delay: 270ms; }
.cc-js .cc-reveal.is-visible .cc-author:nth-child(5) { transition-delay: 360ms; }

/* --------------------------------------------------------------------------
   La cabecera de la sección, más cerca de lo que presenta
   -------------------------------------------------------------------------- */

/* Medido: 200 px entre el enlace de la cabecera y la primera ficha. El titular
   ocupa la columna ancha y el texto de apoyo la estrecha, así que el enlace
   —que va debajo del texto de apoyo— dejaba a su izquierda una columna vacía
   tan alta como él, y esa altura la heredaba toda la fila.

   Con el enlace en la misma línea de base que el final del titular, la cabecera
   deja de reservar una franja para nada. */
@media (min-width: 901px) {
	.cc-section-head--dos-columnas > .e-con:nth-child(2) {
		grid-row: 2;
		margin-block-start: calc(var(--cc-space-4) * -1);
	}

	.cc-section-head--dos-columnas { row-gap: var(--cc-space-4); }
}

/* --------------------------------------------------------------------------
   La tarjeta en columna estrecha
   -------------------------------------------------------------------------- */

/* Medido a 390 px: la tarjeta mide 242, y descontando relleno, retrato y hueco
   quedan 90 px para el nombre. «Sotomayor» pide 100 a cuerpo de Playfair, así
   que el apellido se salía de su caja —14 px— y con él «Elena Vidal» y «Andrés
   Lem». No es un problema de longitud del nombre: es que a esa anchura el
   retrato y el texto no caben uno al lado del otro.

   Apilados, el nombre dispone del ancho entero de la tarjeta. */
@media (max-width: 900px) {
	.cc-author__cabecera {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cc-space-3);
	}

	.cc-author { --cc-author-retrato: 72px; }

	.cc-authors--secundaria { --cc-author-retrato: 60px; }
}

/* --------------------------------------------------------------------------
   El nombre de la fundadora, junto al manifiesto
   -------------------------------------------------------------------------- */

/* Es un enlace de 22 px de alto, por debajo del mínimo de WCAG 2.2 §2.5.8. El
   relleno vertical de un elemento en línea agranda el área de pulsación sin
   alterar la caja de línea, así que la firma no se descuadra. */
.cc-founder__nombre {
	display: inline-block;
	padding-block: 2px;
}

/* ==========================================================================
   Ficha de especialista — el hero sin retrato, y el ritmo de la página
   ========================================================================== */

/* El hero va sobre tinta, con retrato o sin él.

   En papel no se leía como un hero: el fondo era `#faf8f5` y la sección
   siguiente `#f6f3ee`, dos claros a cuatro puntos de distancia, así que la
   ficha empezaba sin abrirse y el corte entre una cosa y la otra no se veía.
   Es además lo que hace la lámina 9 —«banda oscura con retrato fundido en el
   fondo»— y lo que ya hacen la cabecera del archivo de especialistas y el hero
   de la ficha de viaje. Una sola forma de abrir una página. */
.cc-expert-hero {
	--cc-gold-text: var(--cc-gold-on-dark);
	background-color: var(--cc-black);
	color: var(--cc-text-inverse);
}

/* Con el bloque padre delante, (0,2,1): el kit de Elementor colorea los
   encabezados con `.elementor-kit-10 h1` —(0,1,1)— y a una sola clase le gana.
   Medido: el nombre salía en `rgb(17,17,17)` sobre tinta, es decir, invisible.
   Es la trampa nº 1 de `docs/PATRON-HERO.md` otra vez. */
.cc-expert-hero .cc-expert-hero__name,
.cc-expert-hero .cc-expert-hero__bio :is(h2, h3, strong) { color: var(--cc-ivory); }

.cc-expert-hero .cc-expert-hero__role,
.cc-expert-hero .cc-expert-hero__bio,
.cc-expert-hero .cc-expert-hero__bio p { color: var(--cc-text-inverse-muted); }

/* Con retrato, el texto no arranca contra la fotografía. No había ninguna
   regla que lo separase: el bloque no tiene relleno propio en ningún sitio. */
.cc-expert-hero__body {
	padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
}

/* La placa: quién es, en una columna. */
.cc-expert-hero__placa {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
}

/* Sin fotografía el hero deja de ser dos columnas de imagen y texto, y pasa a
   ser dos columnas de texto. Medido antes: el bloque de imagen se llevaba el
   45 % y, vacío, dejaba 528 px con el nombre empezando en x=648 cuando el
   margen son 120. Después de corregir aquello quedaba el defecto contrario: la
   biografía ocupaba 601 px de los 1200 y los otros 599 se quedaban en blanco
   desde y=299 hasta y=426.

   Con la placa a la izquierda y la biografía a la derecha, el ancho se usa
   entero sin estirar una sola línea de texto por encima de su medida. */
.cc-expert-hero--sin-retrato {
	display: block;
	padding-block: clamp(48px, 6vw, 96px);
	padding-inline: var(--cc-gutter);
}

.cc-expert-hero--sin-retrato .cc-expert-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(32px, 5vw, 88px);
	row-gap: clamp(32px, 4vw, 56px);
	align-items: start;
	max-width: var(--cc-box, 1200px);
	margin-inline: auto;
	padding: 0;
}

.cc-expert-hero--sin-retrato .cc-credentials { grid-column: 1 / -1; }

/* El nombre se lleva la escala de titular de página: es el `h1` de esta
   página, y sin fotografía es además lo único que la abre. */
.cc-expert-hero--sin-retrato .cc-expert-hero__name {
	font-size: var(--cc-type-page-title);
	line-height: 1.04;
}

/* En columna estrecha la placa y la biografía se apilan, en el mismo umbral en
   que ya se apilan el retrato y las credenciales: la ficha entera cambia de
   forma de una vez. */
@media (max-width: 900px) {
	.cc-expert-hero--sin-retrato .cc-expert-hero__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Las credenciales, sobre tinta: filetes y textos cambian de lado del
   contraste. Sin esto, el filete divisorio quedaba a un 8 % de negro sobre
   negro —invisible— y el texto secundario, en gris de fondo claro. */
.cc-expert-hero .cc-credentials { border-block-start-color: var(--cc-border-inverse); }
.cc-expert-hero .cc-credential { border-inline-start-color: var(--cc-border-inverse); }
.cc-expert-hero .cc-credential__label.cc-credential__label { color: var(--cc-ivory); }
.cc-expert-hero .cc-credential__text { color: var(--cc-text-inverse-muted); }

@media (max-width: 900px) {
	.cc-expert-hero .cc-credential { border-block-start-color: var(--cc-border-inverse); }
}

/* --------------------------------------------------------------------------
   Rejillas que no se quedan a medias
   -------------------------------------------------------------------------- */

/* «Viajes guiados» pinta lo que esa persona acompaña, que puede ser uno. Con
   tres columnas fijas, un solo viaje dejaba dos tercios de fila en blanco, que
   se lee como contenido que no ha cargado. `auto-fit` con un mínimo hace que
   la fila se ajuste a lo que hay. */
.cc-expert-tours .cc-trips,
.cc-expert-tours .cc-trips--capitulos {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 380px));
	justify-content: start;
}

/* --------------------------------------------------------------------------
   Ideas y reflexiones
   -------------------------------------------------------------------------- */

/* Las tarjetas del diario tenían la imagen con alto libre, así que cada una
   empezaba su titular a una altura distinta y la fila se leía como cuatro
   piezas sueltas en vez de una serie. Proporción fija y estructura igual: el
   mismo trato que reciben la tarjeta de viaje y la de persona. */
.cc-posts .cc-resource,
.cc-posts-grid .cc-post,
.cc-posts .cc-post {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
	height: 100%;
	min-width: 0;
}

.cc-posts .cc-resource__media,
.cc-post__media,
.cc-posts-grid .cc-post figure {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-stone);
	margin: 0;
}

.cc-posts .cc-resource__media img,
.cc-post__media img,
.cc-posts-grid .cc-post figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El enlace de «Leer» cae al pie de su tarjeta, no detrás del titular: así las
   cuatro terminan en la misma línea aunque los titulares midan distinto. */
.cc-posts .cc-resource > .cc-arrow-link,
.cc-posts .cc-resource__more,
.cc-post__more,
.cc-posts-grid .cc-post .cc-arrow-link { margin-block-start: auto; }

/* La rejilla iguala las alturas de fila: sin esto, cada tarjeta mide lo suyo y
   las imágenes arrancan a alturas distintas aunque tengan la misma proporción. */
.cc-posts { align-items: stretch; }

/* ==========================================================================
   Ficha de especialista y archivo — tres correcciones de diagramación
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La franja entre la cabecera y el hero
   -------------------------------------------------------------------------- */

/* La sección que envuelve el hero aporta 60 px de relleno vertical en marfil, y
   el bloque del hero va en papel —dos tonos casi iguales pero distintos—, así
   que quedaba una banda clara de 60 px pegada bajo la cabecera que se leía como
   un error de carga. El hero llega hasta la cabecera. */
.cc-expert-section.cc-expert-section {
	padding-block: 0;
	background-color: var(--cc-black);
}

/* --------------------------------------------------------------------------
   2. La banda de cita
   -------------------------------------------------------------------------- */

/* Medido: la fotografía y el texto ocupaban los dos la misma casilla —1440 y
   780 px de ancho en el mismo origen—, así que la cita caía encima del cuadro
   y el recorte del cuadro dependía de dónde acabase la frase. Pasa a dos
   columnas de verdad, en el orden en que la composición las escribe: la obra a
   la izquierda con su propia caja y la cita a la derecha sobre el negro de la
   marca. */
.cc-quote-band {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: stretch;
	width: 100%;
	min-height: clamp(320px, 34vw, 420px);
}

.cc-quote-band__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--cc-space-4);
	width: auto;
	padding: clamp(32px, 4vw, 64px) clamp(24px, 3.4vw, 56px);
	background-color: var(--cc-black);
}

.cc-quote-band__media {
	position: relative;
	width: auto;
	overflow: hidden;
	background-color: var(--cc-black);
}

.cc-quote-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* La obra es oscura —«La ronda de noche» pasa media tela en penumbra— y
	   sobre el negro de la banda no se distinguía dónde acababa el cuadro y
	   empezaba el fondo: se leía como una fotografía que no cargó. Un punto de
	   luz y de contraste la devuelve sin repintarla. */
	filter: brightness(1.18) contrast(1.04);
}

/* El canto interior se funde con el negro en lugar de cortarse a cuchillo.
   Medido antes: el filo caía en x=590 con la tela a un lado y el fondo al
   otro, los dos casi del mismo tono, y la banda parecía partida en dos piezas
   mal casadas. Es el mismo recurso del hero de la portada —el velo va en la
   dirección que hace falta— aplicado al canto que separa obra y texto. */
.cc-quote-band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(17, 17, 17, 0) 46%, rgba(17, 17, 17, 1) 100%);
}

/* La comilla de apertura, como marca de la banda y no como carácter suelto. */
.cc-quote-band__mark {
	font-family: var(--cc-font-display);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	line-height: 0.6;
	color: var(--cc-gold);
	opacity: 0.7;
}

.cc-quote-band__text,
.cc-quote-band__text p {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--cc-ivory);
	max-width: 34ch;
}

.cc-quote-band__author {
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.62);
}

/* En columna estrecha la obra va arriba y la cita debajo: a 390 px, una
   fotografía de media caja no es una fotografía. */
@media (max-width: 900px) {
	.cc-quote-band { grid-template-columns: minmax(0, 1fr); }
	.cc-quote-band__media { aspect-ratio: 16 / 10; order: -1; }

	/* Apilada, el canto que separa obra y texto es el de abajo. */
	.cc-quote-band__media::after {
		background: linear-gradient(180deg, rgba(17, 17, 17, 0) 58%, rgba(17, 17, 17, 1) 100%);
	}
}

/* --------------------------------------------------------------------------
   3. Las notas del diario: la misma ficha que los recursos
   -------------------------------------------------------------------------- */

/* La ronda anterior les puso caja y el problema no se fue: seguían leyéndose
   como cuatro elementos apilados dentro de un marco. Medido a 1440 en la ficha
   de especialista, la tarjeta de 270×385 ponía la fotografía flotando con 9 px
   de aire por los cuatro costados y luego categoría, titular y «Leer»
   separados por 24, 27 y 12 px: cuatro pausas distintas y ninguna jerarquía.

   El sitio ya tenía resuelta esta pieza. La ficha de recurso de la portada
   —«Para seguir descubriendo»— es la que el cliente señaló como referencia, y
   es además la que estaba bien: etiqueta de categoría en píldora, titular en
   Playfair, resumen de dos líneas y un pie contra un filete con el coste en
   minutos a la izquierda y el «Leer» a la derecha.

   Así que la tarjeta del diario deja de ser una pieza aparte y adopta esa
   anatomía. La única diferencia es la fotografía, que va a sangre en el canto
   superior cuando la entrada tiene una; sin ella la ficha es exactamente la
   de la portada. Dos superficies para el mismo contenido eran una de más. */

.cc-posts .cc-resource {
	position: relative;
	/* Rejilla y no columna, como la ficha de recurso: el coste y el enlace
	   comparten el último renglón. En columna había que sacar uno de los dos
	   del flujo para ponerlo al lado del otro. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	gap: var(--cc-space-3) var(--cc-space-4);
	padding: var(--cc-space-5);
	overflow: hidden;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	background-color: var(--cc-white);
	box-shadow: var(--cc-shadow-soft);
	transition:
		border-color var(--cc-duration) var(--cc-ease-soft),
		box-shadow var(--cc-duration) var(--cc-ease-out),
		transform var(--cc-duration) var(--cc-ease-out);
}

.cc-posts .cc-resource__meta,
.cc-posts .cc-resource__title,
.cc-posts .cc-resource__excerpt { grid-column: 1 / -1; margin: 0; }

/* La fotografía sangra por los tres cantos que toca: se sale del relleno de la
   ficha con márgenes negativos en lugar de quedarse flotando dentro de él con
   9 px de aire alrededor, que es lo que la hacía parecer una estampa pegada. */
.cc-posts .cc-resource__media {
	grid-column: 1 / -1;
	position: relative;
	display: block;
	margin: calc(var(--cc-space-5) * -1) calc(var(--cc-space-5) * -1) var(--cc-space-2);
	border-radius: 0;
	overflow: hidden;
}

/* Sin fotografía, la caja se reserva igual: es lo que mantiene el renglón
   común de la fila. Para que no se lea como una imagen que no cargó, el hueco
   lleva el filete dorado del sitio —la misma firma que abre cada sección—
   centrado sobre el campo de piedra. */
.cc-posts .cc-resource__media:not(:has(img)) {
	display: grid;
	place-items: center;
	background-color: var(--cc-stone);
}

.cc-posts .cc-resource__media:not(:has(img))::after {
	content: "";
	inline-size: 40px;
	block-size: 1px;
	background-color: var(--cc-gold);
	opacity: 0.55;
}

/* La categoría, en píldora: es el primer filtro que aplica quien mira la fila.
   Mismos valores que la ficha de recurso, no unos parecidos. */
.cc-posts .cc-resource__type {
	display: inline-block;
	padding: 4px var(--cc-space-3);
	border-radius: var(--cc-radius-full);
	background-color: rgba(184, 148, 90, 0.14);
	font-family: var(--cc-font-body);
	font-size: var(--cc-type-label);
	font-weight: 600;
	letter-spacing: var(--cc-tracking);
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-posts .cc-resource__title.cc-resource__title {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
	/* Tres líneas: más allá el titular deja de ser un titular y la fila pierde
	   la altura común. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El objetivo es la ficha entera y no las cuatro palabras del titular. */
.cc-posts .cc-resource__title a {
	color: var(--cc-black);
	text-decoration: none;
}

.cc-posts .cc-resource__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cc-posts .cc-resource__excerpt {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--cc-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El pie: coste a la izquierda, «Leer» a la derecha, los dos contra el mismo
   filete. `margin: auto 0 0` los empuja al fondo, así que las tarjetas de una
   fila terminan en la misma línea aunque sus titulares midan distinto. */
.cc-posts .cc-resource__coste {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	margin: auto 0 0;
	padding-block-start: var(--cc-space-4);
	border-block-start: 1px solid var(--cc-border);
	font-family: var(--cc-font-numeric);
	font-size: var(--cc-type-label);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--cc-text-muted);
}

/* Las dos agujas del reloj con dos degradados: un icono de doce píxeles no
   merece ni un archivo ni una fuente. */
.cc-posts .cc-resource__coste::before {
	content: "";
	inline-size: 12px;
	block-size: 12px;
	flex: 0 0 auto;
	border: 1.5px solid currentColor;
	border-radius: var(--cc-radius-full);
	background:
		linear-gradient(currentColor, currentColor) 50% 22% / 1.5px 30% no-repeat,
		linear-gradient(currentColor, currentColor) 62% 50% / 26% 1.5px no-repeat;
	opacity: 0.75;
}

.cc-posts .cc-resource > .cc-arrow-link,
.cc-posts .cc-resource__more {
	grid-column: 2;
	align-self: end;
	margin: auto 0 0;
	padding-block: var(--cc-space-4) 0;
	min-height: 0;
	border-block-start: 1px solid var(--cc-border);
	/* El puntero lo atraviesa: el objetivo es la ficha entera y este texto solo
	   dice adónde lleva. */
	pointer-events: none;
	white-space: nowrap;
}

/* Sin coste que lo acompañe, el «Leer» ocuparía la segunda columna y dejaría
   la primera con un filete suelto debajo. Cruzando las dos, el filete cierra
   la ficha entera y el enlace se queda a la derecha. */
.cc-posts .cc-resource:not(:has(.cc-resource__coste)) > .cc-arrow-link {
	grid-column: 1 / -1;
	justify-content: flex-end;
}

.cc-posts .cc-resource > .cc-arrow-link::after {
	font-size: 0.875rem;
	color: var(--cc-gold-text);
	transition: transform var(--cc-duration-fast) var(--cc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.cc-posts .cc-resource:hover {
		transform: translateY(-2px);
		border-color: rgba(184, 148, 90, 0.55);
		box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 24px rgba(17, 17, 17, 0.08);
	}

	.cc-posts .cc-resource:hover > .cc-arrow-link::after { transform: translateX(3px); }
	.cc-posts .cc-resource:hover .cc-resource__title a { color: var(--cc-gold-text); }
}

.cc-posts .cc-resource:focus-within { border-color: rgba(184, 148, 90, 0.55); }