/* ==========================================================================
   Widgets de Capítulos Culturales
   Solo estructura y valores por defecto. Cualquier propiedad visual que el
   editor pueda controlar se sobreescribe desde el panel de Elementor.
   ========================================================================== */

.cc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.cc-editor-notice {
	padding: var(--cc-space-4, 1rem);
	border: 1px dashed var(--cc-border, #ccc);
	border-radius: var(--cc-radius-md, 8px);
	color: var(--cc-text-muted, #666);
	font-size: var(--cc-fs-sm, 0.875rem);
}

/* --------------------------------------------------------------------------
   Filtros del catálogo

   Una barra de píldoras, no un formulario. Antes cada campo apilaba etiqueta
   sobre desplegable —24 px de rótulo por encima de un control de 44— y la barra
   medía 159 px de alto en escritorio y 314 en tableta. La etiqueta pasa dentro
   del control como su primera opción: en reposo el control dice «Categoría» y
   en cuanto se elige dice «Renacimiento», que es el dato que importa. El
   `<label>` real sigue en el marcado, solo que oculto a la vista.
   -------------------------------------------------------------------------- */

.cc-filters__disclosure { border: 0; }
.cc-filters__summary { display: none; }

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

.cc-filters__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-3);
}

.cc-filters__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-2);
	flex: 1 1 auto;
	min-width: 0;
}

/* La píldora. El filete es de un píxel y el radio el del sitio —2 px—, no los
   ocho redondeados que traía de fábrica y que no se parecían a nada de aquí. */
.cc-filters__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-height: 44px;
	margin: 0;
	padding-inline: var(--cc-space-4);
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	/* El `select` se mide por su opción más larga, así que sin tope una sola
	   categoría de nombre largo estiraba la píldora a 250 px. Con tope, el
	   ancho no baila al elegir —que es lo que se agradece en una barra que
	   acompaña el desplazamiento— y el texto largo se recorta. */
	max-width: 13rem;
	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-filters__field:hover { border-color: rgba(17, 17, 17, 0.28); }
}

/* El foco vive en la píldora, no en el `select`: así el anillo rodea lo que se
   ve como un solo objeto. */
.cc-filters__field:focus-within {
	border-color: var(--cc-gold-text);
	box-shadow: 0 0 0 3px var(--cc-gold-soft);
}

/* Un filtro puesto se lee de un vistazo sin tener que abrirlo. */
.cc-filters__field.is-active {
	border-color: var(--cc-gold-text);
	background-color: rgba(184, 148, 90, 0.08);
}

.cc-filters__field.is-active .cc-filters__select { color: var(--cc-gold-text); font-weight: 500; }

/* La etiqueta se oculta a la vista pero sigue anunciándose: misma receta que
   `.cc-visually-hidden` del tema, que aquí no se puede aplicar porque el
   marcado lo escribe el widget. */
.cc-filters__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cc-filters__select,
.cc-booking__control {
	min-height: 44px;
	width: 100%;
	font: inherit;
	font-size: var(--cc-type-control);
	color: var(--cc-text);
	appearance: none;
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 9px) center, calc(100% - 4px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 0;
	padding: 0 var(--cc-space-5) 0 0;
	cursor: pointer;
	text-overflow: ellipsis;
}

.cc-filters__select:focus { outline: none; }
.cc-filters__select option { color: var(--cc-text); font-weight: 400; }

/* El campo de reserva sí es una caja por su cuenta: recupera lo suyo. */
.cc-booking__control {
	padding: var(--cc-space-3) var(--cc-space-4);
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	cursor: auto;
}

/* Ordenar no es filtrar: no acota el catálogo, lo recoloca. Se separa a la
   derecha y conserva su rótulo a la vista, porque un control que solo dice
   «Más recientes» no explica de qué habla. */
.cc-filters__field--orden {
	margin-inline-start: auto;
	background-color: transparent;
	border-color: transparent;
	padding-inline: var(--cc-space-2);
	/* Sin tope: no es una píldora y sus opciones son frases —«Precio: de menor
	   a mayor»—, así que recortarlas dejaba «Más r...» en pantalla. */
	max-width: none;
}

.cc-filters__field--orden:hover { border-color: transparent; }

.cc-filters__field--orden .cc-filters__label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	flex: none;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
	white-space: nowrap;
}

.cc-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-4);
	flex: none;
}

/* Negro sobre oro, como el resto de botones principales del sitio: 6,67:1. */
.cc-filters__submit {
	min-height: 44px;
	padding: 0 var(--cc-space-5);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-black);
	background-color: var(--cc-gold);
	border: 1px solid var(--cc-gold);
	border-radius: var(--cc-radius-sm);
	cursor: pointer;
	transition: background-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-filters__submit:hover { background-color: var(--cc-gold-dark); color: var(--cc-black); }
.cc-filters__submit:active { transform: scale(0.98); }

.cc-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.8125rem;
	color: var(--cc-text-muted);
	text-underline-offset: 3px;
}

.cc-filters__clear:hover { color: var(--cc-gold-text); }

/* En un teléfono los cinco controles no caben en una línea: la barra se pliega
   tras un resumen que dice cuántos filtros hay puestos. */
@media (max-width: 767px) {
	.cc-filters__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cc-space-4);
		min-height: 48px;
		padding: 0 var(--cc-space-4);
		color: var(--cc-text);
		font-family: var(--cc-font-body);
		font-size: 0.8125rem;
		font-weight: 600;
		background: var(--cc-white);
		border: 1px solid var(--cc-border);
		border-radius: var(--cc-radius-sm);
		cursor: pointer;
		list-style: none;
	}

	.cc-filters__summary::-webkit-details-marker { display: none; }
	.cc-filters__summary::after { content: "+"; font-size: 1.125rem; font-weight: 400; }
	.cc-filters__disclosure[open] .cc-filters__summary::after { content: "\2212"; }
	.cc-filters__summary small { color: var(--cc-text-muted); font-size: 0.75rem; font-weight: 400; }

	.cc-filters__body { padding-block-start: var(--cc-space-3); }
	.cc-filters__grid { flex-direction: column; align-items: stretch; width: 100%; }
	.cc-filters__field { width: 100%; }
	.cc-filters__field--orden { margin-inline-start: 0; }
	.cc-filters__actions { width: 100%; }
	.cc-filters__submit { flex: 1 1 auto; }
}

.cc-booking__control[type="number"],
.cc-booking__control[type="date"] {
	background-image: none;
}

.cc-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-4, 1rem);
	margin-top: var(--cc-space-4, 1rem);
}

.cc-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-2, 0.5rem);
}

.cc-filters__active-label {
	margin-inline-end: var(--cc-space-1, 0.25rem);
	font-size: var(--cc-fs-xs, 0.75rem);
	font-weight: var(--cc-fw-600, 600);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-text-muted, #666);
}

.cc-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2, 0.5rem);
	min-height: 36px;
	padding-inline: var(--cc-space-3, 0.75rem);
	border: 1px solid var(--cc-border, #ccc);
	border-radius: var(--cc-radius-sm, 2px);
	background-color: var(--cc-white, #fff);
	font-size: var(--cc-fs-xs, 0.75rem);
	text-decoration: none;
	color: var(--cc-text, #111);
}

.cc-filters__chip:hover { border-color: var(--cc-gold-text, #6d5019); color: var(--cc-gold-text, #6d5019); }
.cc-filters__chip span { font-size: 1rem; line-height: 1; }

.cc-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	font-size: var(--cc-fs-xs, 0.75rem);
	color: var(--cc-text-muted, #666);
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.cc-filters__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--cc-space-4, 1rem);
	}

	.cc-filters__grid { grid-column: 1; grid-row: 1; }
	.cc-filters__actions { grid-column: 2; grid-row: 1; margin-top: 0; }
	.cc-filters__active { grid-column: 1 / -1; grid-row: 2; }
}

.cc-filters__submit {
	min-height: 44px;
	padding: var(--cc-space-3, 0.75rem) var(--cc-space-5, 1.5rem);
	font: inherit;
	font-weight: var(--cc-fw-600, 600);
	color: var(--cc-ivory, #fff);
	background-color: var(--cc-green, #14110f);
	border: 0;
	border-radius: var(--cc-radius-sm, 999px);
	cursor: pointer;
	transition: background-color var(--cc-duration, 240ms) var(--cc-ease, ease);
}

.cc-filters__reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--cc-fs-sm, 0.875rem);
	color: var(--cc-text-muted, #666);
}

@media (min-width: 768px) {
	.cc-filters__disclosure:not([open]) > .cc-filters__body { display: block; }
}

@media (max-width: 767px) {
	.cc-filters__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cc-space-4, 1rem);
		min-height: 52px;
		padding: var(--cc-space-3, 0.75rem) var(--cc-space-4, 1rem);
		color: var(--cc-text, #111);
		font-weight: var(--cc-fw-600, 600);
		background: var(--cc-white, #fff);
		border: 1px solid var(--cc-border, #ccc);
		border-radius: var(--cc-radius-md, 8px);
		cursor: pointer;
		list-style: none;
	}

	.cc-filters__summary::-webkit-details-marker { display: none; }
	.cc-filters__summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; }
	.cc-filters__disclosure[open] .cc-filters__summary::after { content: "−"; }
	.cc-filters__summary small { color: var(--cc-text-muted, #666); font-size: var(--cc-fs-xs, 0.75rem); font-weight: 400; }
	.cc-filters__body { padding-block-start: var(--cc-space-4, 1rem); }
	.cc-filters__submit { flex: 1 1 180px; }
	.cc-filters__active { margin-block-start: var(--cc-space-4, 1rem); }
	.cc-filters__active-label { flex-basis: 100%; }
}

@media (max-width: 767px) {
	.cc-trips__hint {
		display: block;
		margin: 0 0 var(--cc-space-3, 0.75rem);
		font-size: var(--cc-fs-xs, 0.75rem);
		letter-spacing: 0.06em;
		color: var(--cc-text-muted, #666);
	}
}

/* --------------------------------------------------------------------------
   Tarjeta de tour
   -------------------------------------------------------------------------- */

.cc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--cc-white, #fff);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	transition-property: transform, border-color;
	transition-duration: var(--cc-duration, 240ms);
	transition-timing-function: var(--cc-ease, ease);
}

/* Toda la tarjeta es clicable, pero el enlace real es uno solo:
   así el lector de pantalla anuncia un único destino. */
.cc-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cc-card__link:focus-visible {
	outline: 3px solid var(--cc-gold-text, #6d5019);
	outline-offset: -3px;
}

.cc-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--cc-stone, #eee);
}

.cc-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cc-duration-image, 360ms) var(--cc-ease, ease);
}

.cc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--cc-space-2, 0.5rem);
	padding: var(--cc-space-5, 1.5rem);
}

.cc-card__category {
	font-size: var(--cc-fs-xs, 0.75rem);
	font-weight: var(--cc-fw-600, 600);
	letter-spacing: var(--cc-tracking, 0.08em);
	text-transform: uppercase;
	color: var(--cc-gold-text, #6d5019);
}

.cc-card__title {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.5vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.cc-card__excerpt {
	margin: 0;
	color: var(--cc-text-muted, #555);
	font-size: var(--cc-fs-sm, 0.9375rem);
}

.cc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-4, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--cc-fs-sm, 0.875rem);
	color: var(--cc-text-muted, #555);
}

.cc-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-1, 0.25rem);
}

.cc-card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-4, 1rem);
	margin-top: auto;
	padding-top: var(--cc-space-4, 1rem);
	border-top: 1px solid var(--cc-border, #e6ddd3);
}

/* El precio va en la tipografía de interfaz, no en la de acento. Playfair lleva
   cifras de estilo antiguo —el 3 y el 9 bajan de la línea base y el 1 es más
   estrecho que el 8—, así que una columna de precios no llega a alinearse
   nunca. Pedir `tabular-nums` no lo arregla: la fuente no tiene esa variante y
   el navegador la ignora. Se cambia la familia, que es lo que fallaba. */
.cc-card__price {
	font-family: var(--cc-font-numeric);
	font-weight: 500;
	font-size: var(--cc-fs-lg, 1.125rem);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.cc-card__price-from {
	display: block;
	font-size: var(--cc-fs-xs, 0.75rem);
	font-weight: var(--cc-fw-400, 400);
	color: var(--cc-text-muted, #666);
}

.cc-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-1, 0.25rem);
	font-size: var(--cc-fs-sm, 0.875rem);
	font-weight: var(--cc-fw-600, 600);
	color: var(--cc-gold-text, #6d5019);
}

.cc-card:hover .cc-card__cta .cc-icon {
	transform: translateX(3px);
}

.cc-card__cta .cc-icon {
	transition: transform var(--cc-duration, 240ms) var(--cc-ease, ease);
}

/* --------------------------------------------------------------------------
   Caja de reserva
   -------------------------------------------------------------------------- */

.cc-booking {
	--cc-booking-offset: 100px;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4, 1rem);
	padding: var(--cc-space-5, 1.5rem);
	background-color: var(--cc-white, #fff);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
}

@media (min-width: 1025px) {
	.cc-booking {
		position: sticky;
		top: var(--cc-booking-offset);
	}
}

.cc-booking__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--cc-space-1, 0.25rem);
}

.cc-booking__price-prefix,
.cc-booking__price-suffix {
	font-size: var(--cc-fs-sm, 0.875rem);
	color: var(--cc-text-muted, #555);
}

/* El importe más visible de la ficha de viaje: con más razón en cifras de
   interfaz, alineadas y de ancho fijo. */
.cc-booking__price-amount {
	font-family: var(--cc-font-numeric);
	font-size: var(--cc-fs-2xl, 1.75rem);
	font-weight: var(--cc-fw-500, 500);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: -0.01em;
}

.cc-booking__price-note {
	flex-basis: 100%;
	font-size: var(--cc-fs-xs, 0.75rem);
	color: var(--cc-text-muted, #555);
}

.cc-booking__form {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-4, 1rem);
	margin: 0;
}

.cc-booking__field {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1, 0.25rem);
	margin: 0;
}

.cc-booking__label {
	font-size: var(--cc-fs-sm, 0.875rem);
	font-weight: var(--cc-fw-500, 500);
}

.cc-booking__required {
	color: var(--cc-gold-text, #6d5019);
}

.cc-booking__seats:empty {
	display: none;
}

.cc-booking__seats {
	margin: 0;
	font-size: var(--cc-fs-sm, 0.875rem);
	font-weight: var(--cc-fw-500, 500);
	color: var(--cc-gold-text, #6d5019);
}

.cc-booking__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-4, 1rem);
	margin: 0;
	padding-top: var(--cc-space-4, 1rem);
	border-top: 1px solid var(--cc-border, #e6ddd3);
}

.cc-booking__total-value {
	font-weight: var(--cc-fw-600, 700);
	font-size: var(--cc-fs-lg, 1.25rem);
	font-variant-numeric: tabular-nums;
}

.cc-booking__cta,
.cc-booking__whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2, 0.5rem);
	min-height: 48px;
	padding: var(--cc-space-3, 0.75rem) var(--cc-space-5, 1.5rem);
	font: inherit;
	font-weight: var(--cc-fw-600, 600);
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: var(--cc-radius-sm, 999px);
	cursor: pointer;
	transition-property: background-color, color, transform;
	transition-duration: var(--cc-duration, 240ms);
	transition-timing-function: var(--cc-ease, ease);
}

.cc-booking__cta {
	color: var(--cc-black, #fff);
	background-color: var(--cc-gold, #a8451f);
}

.cc-booking__cta:hover {
	background-color: var(--cc-gold-dark, #8c3a1c);
	color: var(--cc-black, #fff);
}

.cc-booking__cta:active {
	transform: scale(0.98);
}

.cc-booking__whatsapp {
	color: var(--cc-text, #14110f);
	background-color: transparent;
	border: 1px solid var(--cc-border, #ccc);
}

.cc-booking__note,
.cc-booking__soldout {
	margin: 0;
	font-size: var(--cc-fs-sm, 0.875rem);
	color: var(--cc-text-muted, #555);
	text-align: center;
}

.cc-booking__soldout {
	padding: var(--cc-space-4, 1rem);
	background-color: var(--cc-stone, #f2ece5);
	border-radius: var(--cc-radius-md, 8px);
}

.cc-booking__facts {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2, 0.5rem);
	margin: 0;
	padding-top: var(--cc-space-4, 1rem);
	border-top: 1px solid var(--cc-border, #e6ddd3);
	list-style: none;
}

.cc-booking__fact {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-space-2, 0.5rem);
	font-size: var(--cc-fs-sm, 0.875rem);
	color: var(--cc-text-muted, #555);
}

.cc-booking__fact .cc-icon {
	margin-top: 0.15em;
	color: var(--cc-gold-text, #6d5019);
}

/* --------------------------------------------------------------------------
   Itinerario
   -------------------------------------------------------------------------- */

.cc-itinerary {
	--cc-timeline-line: var(--cc-border, #e6ddd3);
	--cc-timeline-marker: var(--cc-gold, #a8451f);
	--cc-timeline-marker-text: var(--cc-black, #fff);
	--cc-timeline-marker-size: 32px;
}

.cc-itinerary__list {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-6, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cc-stop;
}

.cc-itinerary__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--cc-timeline-marker-size) 1fr;
	gap: var(--cc-space-4, 1rem);
}

/* La línea que une las paradas: decorativa, nunca en el árbol de accesibilidad. */
.cc-itinerary__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: calc(var(--cc-timeline-marker-size) / 2 - 1px);
	top: var(--cc-timeline-marker-size);
	bottom: calc(var(--cc-space-6, 2rem) * -1);
	width: 2px;
	background-color: var(--cc-timeline-line);
}

.cc-itinerary__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cc-timeline-marker-size);
	height: var(--cc-timeline-marker-size);
	border-radius: 50%;
	background-color: var(--cc-timeline-marker);
	color: var(--cc-timeline-marker-text);
	font-size: var(--cc-fs-sm, 0.875rem);
	font-weight: var(--cc-fw-600, 600);
	font-variant-numeric: tabular-nums;
}

.cc-itinerary--plain .cc-itinerary__marker {
	width: 14px;
	height: 14px;
	margin-left: calc(var(--cc-timeline-marker-size) / 2 - 7px);
}

.cc-itinerary__time {
	display: block;
	font-size: var(--cc-fs-sm, 0.875rem);
	font-weight: var(--cc-fw-600, 600);
	color: var(--cc-gold-text, #6d5019);
	font-variant-numeric: tabular-nums;
}

.cc-itinerary__title {
	margin: 0 0 var(--cc-space-1, 0.25rem);
	font-size: var(--cc-fs-lg, 1.25rem);
}

.cc-itinerary__text {
	margin: 0;
	color: var(--cc-text-muted, #555);
	max-width: var(--cc-measure, 68ch);
}

/* --------------------------------------------------------------------------
   Incluye / no incluye
   -------------------------------------------------------------------------- */

.cc-inclusions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--cc-space-6, 2rem);
}

.cc-inclusions__title {
	margin: 0 0 var(--cc-space-4, 1rem);
	font-size: var(--cc-fs-xl, 1.375rem);
}

.cc-inclusions__list {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-inclusions__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-space-2, 0.5rem);
}

.cc-inclusions__item .cc-icon {
	margin-top: 0.2em;
}

/* El icono acompaña al color: el significado nunca depende solo del tono. */
.cc-inclusions__column--yes .cc-icon { color: var(--cc-green, #1f6b57); }
.cc-inclusions__column--no .cc-icon { color: var(--cc-text-muted, #8d827a); }
.cc-inclusions__column--no .cc-inclusions__item { color: var(--cc-text-muted, #554c45); }

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

.cc-whatsapp {
	--cc-wa-offset: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2, 0.5rem);
	min-width: 48px;
	min-height: 48px;
	padding: var(--cc-space-3, 0.75rem) var(--cc-space-5, 1.5rem);
	font-weight: var(--cc-fw-600, 600);
	text-decoration: none;
	color: var(--cc-black, #fff);
	background-color: #128c7e;
	border-radius: var(--cc-radius-sm, 999px);
	box-shadow: var(--cc-shadow);
	transition: transform var(--cc-duration, 240ms) var(--cc-ease, ease);
}

.cc-whatsapp:hover {
	color: var(--cc-black, #fff);
	transform: translateY(-2px);
}

.cc-whatsapp--floating {
	position: fixed;
	z-index: var(--cc-z-overlay, 100);
	/* Respeta el área segura del móvil (barra de gestos, notch). */
	bottom: calc(var(--cc-wa-offset) + env(safe-area-inset-bottom, 0px));
}

.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));
}

/* --------------------------------------------------------------------------
   Rejilla de experiencias — lámina 9
   La tarjeta es fotografía: el texto vive sobre la imagen, sobre un degradado
   inferior, y la acción es un botón circular dorado en la esquina.
   -------------------------------------------------------------------------- */

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

.cc-trips__empty {
	display: grid;
	justify-items: start;
	gap: var(--cc-space-5);
	max-width: 680px;
	padding: clamp(28px, 5vw, 48px);
	border-inline-start: 2px solid var(--cc-gold-text, #6d5019);
	background-color: var(--cc-white);
}

.cc-trips__empty p { max-width: 46ch; margin: 0; color: var(--cc-text-muted); font-size: 0.9375rem; }
.cc-trips__empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-4); }

.cc-trips__hint { display: none; }

.cc-trip {
	position: relative;
	display: flex;
	flex-direction: column;
	/* La ficha se declara contenedor de consulta para que sus datos internos
	   respondan a lo que mide ella y no a lo que mide la ventana: la misma
	   tarjeta convive en rejilla de tres y en carrusel de móvil. */
	container-type: inline-size;
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	transition: border-color var(--cc-duration) var(--cc-ease),
		transform var(--cc-duration) var(--cc-ease);
}

.cc-trip:hover { border-color: var(--cc-gold); transform: translateY(-2px); }

/* El enlace cubre la tarjeta entera: toda ella es el objetivo táctil. */
.cc-trip__link { position: absolute; inset: 0; z-index: 3; }
.cc-trip__link:focus-visible { outline: 2px solid var(--cc-gold-text); outline-offset: 3px; }

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

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

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

.cc-trip__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--cc-space-5);
}

/* Destino: el mismo microtitular en versalitas que ordena todo el sitio. */
.cc-trip__places {
	margin: 0 0 var(--cc-space-3);
	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-text);
}

.cc-trip__title {
	margin: 0 0 var(--cc-space-4);
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.3vw, 1.3125rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--cc-black);
	text-wrap: balance;
	min-height: calc(2 * 1.22em);
}

/* Los datos duros de la reserva, en pares etiqueta/valor. El bloque se estira
   para que el precio quede a la misma altura en toda la fila. */
.cc-trip__meta {
	display: grid;
	/* Tres columnas iguales: así los datos caen en la misma vertical en
	   todas las tarjetas de la fila. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cc-space-2) var(--cc-space-5);
	margin: 0 0 var(--cc-space-5);

	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-border);
}

.cc-trip__meta-item { min-width: 0; }

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

.cc-trip__meta dd {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--cc-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cc-trip__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-top: auto;
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-border);
}

.cc-trip__price { margin: 0; }

/* El interlineado va explícito: sin él estas dos líneas heredaban el del
   cuerpo ya resuelto en píxeles —28 px para un texto de 11—, y entre las dos
   inflaban el precio 26 px sin poner nada dentro. */
.cc-trip__from,
.cc-trip__unit {
	display: block;
	font-size: var(--cc-type-label);
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-trip__amount {
	display: block;
	font-family: var(--cc-font-numeric);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--cc-black);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.cc-trip__unit { margin-top: 2px; }

.cc-trip__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cc-gold);
	border-radius: 50%;
	color: var(--cc-gold-dark);
	font-size: 0.875rem;
	transition: background-color var(--cc-duration) var(--cc-ease),
		color var(--cc-duration) var(--cc-ease);
}

.cc-trip:hover .cc-trip__arrow { background-color: var(--cc-gold); color: var(--cc-black); }

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

@media (prefers-reduced-motion: reduce) {
	.cc-trip,
	.cc-trip__image,
	.cc-trip__arrow { transition: none; }
	.cc-trip:hover { transform: none; }
	.cc-trip:hover .cc-trip__image { transform: none; }
}

/* Paginación editorial: números finos, sin cajas. */
.cc-pagination { margin-top: var(--cc-space-7); }

.cc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--cc-space-3);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--cc-text);
	border-bottom: 1px solid transparent;
}

.cc-pagination .page-numbers:hover,
.cc-pagination .page-numbers.current { border-bottom-color: var(--cc-gold-text); color: var(--cc-gold-text); }

/* --------------------------------------------------------------------------
   Rejilla de categorías
   -------------------------------------------------------------------------- */

.cc-terms { display: grid; gap: 24px; }
.cc-terms--image { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-terms--plain { grid-template-columns: none; display: flex; flex-wrap: wrap; }

.cc-term { position: relative; display: block; overflow: hidden; text-decoration: none; border-radius: var(--cc-radius-sm); }

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

.cc-term__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	transition: transform var(--cc-duration-image) var(--cc-ease), filter var(--cc-duration) var(--cc-ease);
}

.cc-term:hover .cc-term__image { transform: scale(1.03); filter: saturate(1); }

.cc-term__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--cc-space-5);
	background: linear-gradient(0deg, rgba(17, 17, 17, 0.82) 0%, rgba(17, 17, 17, 0) 100%);
	color: var(--cc-ivory);
}

.cc-term__name {
	display: block;
	font-family: var(--cc-font-display);
	font-size: clamp(1.25rem, 1.5vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.cc-term__count {
	display: block;
	margin-top: var(--cc-space-1);
	font-size: var(--cc-fs-xs);
	letter-spacing: 0.06em;
	color: rgba(246, 243, 238, 0.72);
}

.cc-term-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-height: 44px;
	padding: 0 var(--cc-space-5);
	font-size: var(--cc-fs-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--cc-text);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-sm);
	transition: border-color var(--cc-duration) var(--cc-ease), color var(--cc-duration) var(--cc-ease);
}

.cc-term-pill:hover { border-color: var(--cc-gold-text); color: var(--cc-gold-text); }
.cc-term-pill__count { font-size: var(--cc-fs-xs); color: var(--cc-text-muted); }

/* --------------------------------------------------------------------------
   Listado de artículos
   -------------------------------------------------------------------------- */

.cc-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

/* El reparto responde también sin Elementor delante.
 *
 * Las tres columnas eran fijas porque el widget siempre trae su control de
 * columnas, que escribe `{{WRAPPER}} .cc-posts` con la clase del elemento —dos
 * clases— y gana a estas reglas allí donde hay widget. Pero la fila de «Seguir
 * leyendo» de la nota individual la pinta el tema, sin control que la ajuste, y
 * a 390 px las tres columnas dejaban tarjetas de **85 px de ancho con 116 px de
 * contenido dentro**: cada palabra del titular se salía de su caja. */
@media (max-width: 1024px) {
	.cc-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
}

@media (max-width: 767px) {
	.cc-posts { grid-template-columns: minmax(0, 1fr); }
}

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

/* La pieza destacada ocupa dos columnas y dos renglones, y cambia la
   proporción de la imagen.

   Los dos renglones no son un adorno: con uno solo, la ficha destacada medía
   el doble que su vecina de la derecha y la rejilla igualaba las alturas de la
   fila, así que la vecina se estiraba y dejaba **330 px de blanco** entre su
   pie y su canto inferior. A dos renglones, la columna de la derecha lleva dos
   fichas normales al lado de la destacada, que es la apertura de revista de
   toda la vida y no deja hueco que rellenar. */
.cc-resource--lead { grid-column: span 2; grid-row: span 2; }
/* El ancla es `inline` por defecto y envuelve una imagen de bloque: su caja
   degeneraba a la del renglón —350x20 px— en vez de a la de la fotografía, de
   modo que el enlace no cubría lo que se ve. Solo la variante de índice lo
   corregía, y por su cuenta. */
.cc-resource__media { display: block; }

/* Y la imagen también: en línea deja debajo el hueco de la línea base —8 px por
   ficha— que separaba la fotografía de su propio contenedor. */
.cc-resource__media img { display: block; }

.cc-resource--lead .cc-resource__media { aspect-ratio: 16 / 9; }

/* La destacada ocupa dos renglones, y los dos los miden las fichas normales de
   la columna de al lado: su contenido no siempre llega a esa altura. El
   sobrante va a la fotografía —primer track, `1fr`— y no al aire entre el pie
   y el canto inferior, que es donde caía antes. La apertura de una revista
   crece por la imagen; nunca por el hueco de debajo del texto. */
@media (min-width: 1025px) {
	.cc-posts .cc-resource--lead { grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
	.cc-posts .cc-resource--lead .cc-resource__media { aspect-ratio: auto; min-height: 320px; }
}
.cc-resource--lead .cc-resource__title { font-size: clamp(1.75rem, 2.4vw, 2.375rem); }

@media (max-width: 1024px) {
	/* Dos columnas: la destacada las ocupa las dos y vuelve a un solo renglón,
	   porque a su lado ya no queda columna donde apilar nada. */
	.cc-resource--lead { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 767px) {
	.cc-resource--lead { grid-column: span 1; grid-row: span 1; }
	.cc-resource--lead .cc-resource__media { aspect-ratio: 3 / 2; }
}

.cc-posts-empty {
	display: grid;
	justify-items: start;
	gap: var(--cc-space-4);
	max-width: 720px;
	padding: clamp(28px, 5vw, 56px);
	border: 1px solid var(--cc-border);
	background-color: var(--cc-white);
}

.cc-posts-empty :is(h2, p) { margin: 0; }
.cc-posts-empty h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.cc-posts-empty > p:not(.cc-eyebrow) { color: var(--cc-text-muted); }
.cc-posts-empty .search-form { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); width: 100%; }
.cc-posts-empty .search-form label { flex: 1 1 260px; }
.cc-posts-empty .search-field { width: 100%; min-height: 48px; }
.cc-posts-empty .search-submit { min-height: 48px; }

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

.cc-faq { border-top: 1px solid var(--cc-border); }

.cc-faq__item { border-bottom: 1px solid var(--cc-border); }

.cc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	min-height: 64px;
	padding: var(--cc-space-4) 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.cc-faq__q::-webkit-details-marker { display: none; }

/* El signo es un afijo tipográfico, no un icono de librería. */
.cc-faq__q::after {
	content: "+";
	flex: none;
	font-family: var(--cc-font-body);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--cc-gold-text);
	transition: transform var(--cc-duration) var(--cc-ease);
}

.cc-faq__item[open] .cc-faq__q::after { transform: rotate(45deg); }

.cc-faq__a { padding-bottom: var(--cc-space-5); max-width: var(--cc-reading); }
.cc-faq__a p { margin: 0; color: var(--cc-text-muted); }

.cc-section--dark .cc-faq,
.cc-section--dark .cc-faq__item { border-color: var(--cc-border-inverse); }
.cc-section--dark .cc-faq__a p { color: var(--cc-text-inverse-muted); }

/* --------------------------------------------------------------------------
   Pie del mapa
   -------------------------------------------------------------------------- */

.cc-map__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-3);
	margin: var(--cc-space-4) 0 0;
	font-size: var(--cc-fs-sm);
	color: var(--cc-text-muted);
}

.cc-map__caption .cc-icon { color: var(--cc-gold-text); }

/* ==========================================================================
   PORTADA — variantes y bloques propios del Home
   ========================================================================== */

/* Ficha estrecha: los tres datos pasan a dos columnas y el importe baja de
   cuerpo. Con la ficha a 242 px, «20 Ago 2026» y «3 h» se pisaban. */
@container (max-width: 300px) {
	/* Dos columnas fijas dejaban 63 px por columna, y «DURACIÓN» en versalitas
	   con tracking pide 76: la etiqueta se salía sobre la columna vecina. Con
	   `auto-fit` decide el navegador cuántas caben sin que ninguna baje del
	   ancho de la etiqueta más larga, así que no hay ningún corte que acertar:
	   son dos mientras quepan dos y una en cuanto no. El `min()` evita que el
	   propio mínimo desborde en un contenedor más estrecho que él. */
	.cc-trip__meta { grid-template-columns: repeat(auto-fit, minmax(min(78px, 100%), 1fr)); }
	.cc-trip__meta dd { font-size: 0.8125rem; }
	.cc-trip__amount { font-size: 1.375rem; }

	/* Precio y acción se apilan: en línea, el botón se salía de la ficha. */
	.cc-trips--capitulos .cc-trip__foot {
		flex-direction: column;
		align-items: stretch;
		gap: var(--cc-space-4);
	}

	.cc-trips--capitulos .cc-trip__arrow { justify-content: center; }

	/* En la ficha estrecha el epígrafe se corta a dos líneas. Entero se comía
	   la mitad del cuerpo y empujaba la fotografía contra su suelo: la ficha
	   dejaba de ser una imagen con datos y pasaba a ser un párrafo con una
	   franja encima. */
	.cc-trips--capitulos .cc-chapter__epigrafe {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
   Viajes como ficha de capítulo
   En el archivo de viajes la tarjeta se queda como está: allí hay muchas y se
   comparan. En la portada son tres, se leen como una colección y adoptan la
   portadilla completa: lámina con su marca, título, epígrafe y remate con el
   precio y una acción escrita.
   -------------------------------------------------------------------------- */

.cc-trips--capitulos .cc-trip.cc-chapter { padding: 0; }

/* La fotografía se queda con el sobrante de la fila.
   Las fichas de una fila miden todas lo que la más alta. Antes ese sobrante lo
   heredaba el cuerpo y se abría un hueco entre el epígrafe y los datos: en la
   ficha ancha no se notaba, y en las estrechas era medio dedo de blanco. Con la
   media creciendo, el sobrante se lo lleva la imagen —que es lo que mejor
   aguanta cambiar de alto— y el cuerpo conserva su ritmo interno.
   La proporción del control pasa a ser el mínimo, no la medida exacta. */
.cc-trips--capitulos .cc-trip__media {
	margin: 0;
	flex: 1 1 auto;
	/* Suelo: por debajo de esto la fotografía deja de ser fotografía y pasa a
	   ser una franja de color. Si el cuerpo necesita más sitio, que crezca la
	   ficha, no que se coma la imagen. */
	min-height: clamp(180px, 22svh, 260px);
}

.cc-trips--capitulos .cc-trip__body {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-4);
}

.cc-trips--capitulos .cc-trip__title {
	min-height: 0;
	margin: 0;
	font-size: clamp(1.0625rem, 1.05vw, 1.1875rem);
	line-height: 1.2;
}

.cc-trips--capitulos .cc-trip__places { margin: 0; }

/* Los datos de la reserva van juntos y separados del relato por un filete. */
.cc-trips--capitulos .cc-trip__meta {
	margin: 0;
	margin-top: auto;
	padding-top: var(--cc-space-4);
}

.cc-trips--capitulos .cc-trip__foot {
	margin: 0;
	padding-top: var(--cc-space-3);
	border-top: 1px solid var(--cc-border);
}

/* La acción se escribe. Una flecha suelta obliga a deducir qué hace; con la
   ficha entera enlazada, el botón es el ancla visual que dice dónde lleva. */
.cc-trips--capitulos .cc-trip__arrow {
	width: auto;
	height: auto;
	min-height: 40px;
	padding: 0 var(--cc-space-4);
	border-radius: var(--cc-radius-sm);
	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;
	background-color: var(--cc-gold);
	border-color: var(--cc-gold);
	color: var(--cc-black);
}

/* La flecha del botón adelanta la punta con el puntero encima. */
.cc-trips--capitulos .cc-trip__arrow { transition: background-color var(--cc-duration) var(--cc-ease), gap var(--cc-duration) var(--cc-ease); }
@media (hover: hover) and (pointer: fine) {
	.cc-trips--capitulos .cc-trip:hover .cc-trip__arrow {
		background-color: var(--cc-gold-dark);
		border-color: var(--cc-gold-dark);
		color: var(--cc-black);
		gap: var(--cc-space-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-trips--capitulos .cc-trip__arrow { transition: none; }
	.cc-trips--capitulos .cc-trip:hover .cc-trip__arrow { gap: var(--cc-space-2); }
}

/* ==========================================================================
   FICHA DE CAPÍTULO

   «Capítulos Culturales» es un juego de palabras: el capítulo de un libro
   —conocimiento— y el capítulo de una vida —lo que te cambia—. Cada viaje es
   un capítulo, y quien lo concibe y lo acompaña lo está escribiendo.

   La ficha lo dice con tres cosas y ninguna es un adorno:

   1. La marca «Capítulo Madrid» va sobre la fotografía, como la portadilla de
      un capítulo lleva su lámina. El capítulo se nombra por su lugar y no por
      su número: un número ordena una lista, un nombre da a entender que hay
      una historia detrás.
   2. El epígrafe, en itálica bajo el título, dice qué se entiende al hacerlo,
      no qué se visita. Ahí está la mitad de «capítulo de vida».
   3. Los autores llevan la misma marca sin lugar —«Autor», «Autor invitado»—:
      no son capítulos, los escriben.
   ========================================================================== */

.cc-chapter {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-md);
	overflow: hidden;
	/* Elevación contenida en reposo: la ficha se despega del fondo sin
	   convertirse en una caja con sombra dura. */
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 6px 18px rgba(17, 17, 17, 0.05);
	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-chapter:focus-within {
	border-color: rgba(184, 148, 90, 0.55);
	box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 18px 42px rgba(17, 17, 17, 0.13);
}

@media (hover: hover) and (pointer: fine) {
	.cc-chapter:hover {
		border-color: rgba(184, 148, 90, 0.55);
		box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 18px 42px rgba(17, 17, 17, 0.13);
		transform: translateY(-3px);
	}
}

/* El enlace cubre la ficha entera: toda ella es el objetivo. */
.cc-chapter__link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.cc-chapter__link:focus-visible { outline: 2px solid var(--cc-gold-text); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   La marca del capítulo, sobre la fotografía
   -------------------------------------------------------------------------- */

.cc-chapter__marca {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--cc-space-3);
	inset-inline-start: var(--cc-space-3);
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	padding: var(--cc-space-2) var(--cc-space-3);
	background-color: var(--cc-ivory);
	/* Separada de la esquina y con las cuatro esquinas redondeadas: pegada al
	   vértice tapaba el radio de la ficha y devolvía la esquina viva. */
	border-radius: var(--cc-radius-full);
	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);
}

/* El país del destino, delante de todo: en un billete la ruta es lo primero que
   se mira. Va como código de dos letras y no como bandera —ver
   `CC_Experts::pais()`: Windows no dibuja los glifos de bandera—, que además es
   el idioma propio de un billete. Se compone como una marca troquelada: filete
   fino, versalitas y cifras del cuerpo, nunca de Playfair. */
.cc-chapter__pais {
	display: inline-flex;
	align-items: center;
	padding: 2px 5px;
	border: 1px solid currentColor;
	border-radius: var(--cc-radius-sm);
	font-family: var(--cc-font-body);
	/* Doce píxeles es el suelo del sitio. Estaba en 0,625rem —10 px— desde que
	   sustituyó a la bandera emoji: el troquel encoge, no el texto. */
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	opacity: 0.75;
	margin-inline-end: 2px;
}

/* El nombre del capítulo, en Playfair: es lo único de la marca que es titular. */
.cc-chapter__nombre {
	font-family: var(--cc-font-display);
	font-size: 1rem;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
	color: var(--cc-gold-text);
}

.cc-chapter--destacado .cc-chapter__marca {
	background-color: var(--cc-gold);
	color: var(--cc-black);
}

.cc-chapter--destacado .cc-chapter__nombre { color: var(--cc-black); }

/* La marca es de ancho fijo dentro de una ficha que sí encoge, y `.cc-trip__media`
   recorta con `overflow: hidden`. Medido a 320 px: la ficha da 187 px y la marca
   pide 200, así que el nombre del capítulo se servía rebanado por la mitad de la
   letra —«Florenci|», «Madri|»—, que es el mismo defecto del importe del billete
   y en el mismo sitio.

   Lo que sobra es «Capítulo»: 74 px de los 200, y es la única de las tres partes
   que no dice nada que no diga ya la sección que envuelve la ficha. El código de
   país y el nombre del destino son el dato; la palabra es el marco. Sin ella la
   marca mide 121 px y entra con holgura.

   El corte va en 380 px porque es donde la ficha baja de 224 px —los 212 que
   pide la marca entera más el hueco de su lado—: por encima cabe, por debajo se
   recorta. */
@media (max-width: 380px) {
	.cc-chapter__palabra { display: none; }
}

/* Aviso de disponibilidad, en la esquina contraria a la marca. Va en oro sobre
   negro y no en rojo: es un dato de aforo, no una alarma. */
.cc-chapter__aviso {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--cc-space-4);
	inset-inline-end: var(--cc-space-4);
	padding: 5px var(--cc-space-3);
	border-radius: 999px;
	background-color: rgba(17, 17, 17, 0.82);
	backdrop-filter: blur(4px);
	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-on-dark, #c9a870);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cuerpo de la ficha
   -------------------------------------------------------------------------- */

/* Rótulo pequeño: el destino, la disciplina. */
.cc-chapter__rotulo {
	margin: 0;
	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-text);
}

/* El epígrafe: qué se entiende, no qué se visita. En itálica porque es una
   voz, no un dato. */
.cc-chapter__epigrafe {
	margin: 0;
	font-family: var(--cc-font-display);
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
	text-wrap: pretty;
}

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

/* --------------------------------------------------------------------------
   AUTORES
   En vertical, como los billetes, para que las dos colecciones compartan
   compás. Pero no son billetes y no lo fingen: un billete lleva lámina y
   troquelado; una persona lleva retrato y credenciales.

   El retrato va en círculo, sobresaliendo del canto superior de la ficha.
   Es un recurso viejo y sigue funcionando: la figura se sale del recuadro y la
   pieza deja de leerse como una caja con una foto dentro.
   -------------------------------------------------------------------------- */

/* La rejilla llena el ancho de su sección y no se centra dentro de él.
   Centrada con columnas de ancho fijo, las tarjetas quedaban por dentro del
   margen de su propio titular: medido en la portada, 181 px contra los 120 del
   rótulo a 1440, 162 contra 40 a 1024 y 241 contra 120 en la fila de
   colaboradores. Tres líneas de margen distintas en una misma sección.

   Con `1fr` las columnas reparten lo que hay, así que el borde izquierdo de la
   primera tarjeta es exactamente el de la sección. */
.cc-authors {
	--cc-authors-columnas: 3;
	display: grid;
	/* `1fr` reparte lo que hay, pero con menos fichas que columnas cada una se
	   estira: dos colaboradores en una rejilla de cuatro daban tarjetas de 470
	   px frente a los 281 de sus vecinas de arriba. Con un tope, la pieza mide
	   lo mismo esté sola o acompañada, y la fila se alinea a la izquierda en
	   lugar de repartir el sobrante. */
	grid-template-columns: repeat( var(--cc-authors-columnas), minmax(0, var(--cc-author-max, 320px)) );
	justify-content: start;
	align-items: stretch;
	column-gap: clamp(16px, 1.8vw, 28px);
	row-gap: clamp(28px, 3vw, 40px);
	width: 100%;
}

/* La tarjeta de persona se rehízo entera sobre el patrón del hero —retrato a
   gran formato con el texto flotando encima, en lugar de un círculo de 108 px
   asomando sobre una caja blanca— y sus estilos viven ahora en el tema, junto
   al resto de la primera pantalla: `components.css`, sección «Especialistas».

   Aquí solo queda la rejilla que las coloca. Lo que había debajo se retiró
   porque competía con la versión nueva: el marco blanco seguía dibujándose por
   fuera del retrato, el nombre salía centrado sobre la inicial y el rótulo
   caía por debajo del nombre en lugar de encima.

   Ver `docs/PATRON-HERO.md`. */

/* --------------------------------------------------------------------------
   Retrato de la fundación, junto al manifiesto
   -------------------------------------------------------------------------- */

.cc-founder {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	/* Con techo y acotado: a 3:4 sobre media caja pasaba de 700 px de alto y
	   pesaba más que la declaración a la que acompaña. */
	max-width: 380px;
	max-height: 60svh;
	margin-inline-start: auto;
	overflow: hidden;
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-stone);
	isolation: isolate;
}

.cc-founder__image.cc-founder__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-founder::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 52%;
	z-index: 1;
	background: linear-gradient(to top, rgba(17, 17, 17, 0.86) 0%, rgba(17, 17, 17, 0) 100%);
	pointer-events: none;
}

.cc-founder--reserva::after { content: none; }

.cc-founder__pie {
	position: absolute;
	z-index: 2;
	inset-inline: var(--cc-space-5);
	inset-block-end: var(--cc-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1);
}

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

.cc-founder .cc-founder__nombre {
	font-family: var(--cc-font-display);
	font-size: clamp(1.25rem, 1.6vw, 1.625rem);
	line-height: 1.1;
	color: var(--cc-white);
	text-decoration: none;
}

.cc-founder .cc-founder__nombre:hover { color: var(--cc-gold); }

.cc-founder__rol {
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	color: rgba(246, 243, 238, 0.78);
}

/* --------------------------------------------------------------------------
   Testimonio
   Fotografía real a un lado y la cita al otro, sin caja ni comillas de adorno:
   la comilla de apertura es tipográfica y va colgada del margen.
   -------------------------------------------------------------------------- */

.cc-testimonial {
	--cc-testimonial-media: 46%;
	display: grid;
	grid-template-columns: var(--cc-testimonial-media) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
	margin: 0;
	width: 100%;
}

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

.cc-testimonial__image.cc-testimonial__image { width: 100%; height: 100%; object-fit: cover; display: block; }

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

.cc-testimonial__quote { margin: 0; position: relative; }

.cc-testimonial__quote p {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.375rem, 2.4vw, 2rem);
	line-height: 1.35;
	color: var(--cc-text);
	max-width: 26ch;
	text-wrap: pretty;
}

/* La comilla cuelga del margen izquierdo para que la primera línea del texto
   siga alineada con todo lo demás. */
.cc-testimonial__quote::before {
	content: "\201C";
	position: absolute;
	inset-inline-start: -0.52em;
	top: -0.18em;
	font-family: var(--cc-font-display);
	font-size: clamp(3rem, 5vw, 4.5rem);
	line-height: 1;
	color: var(--cc-gold);
	pointer-events: none;
}

.cc-testimonial__source {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1);
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-border);
	max-width: 32ch;
}

.cc-testimonial__author {
	font-family: var(--cc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-text);
}

.cc-testimonial__trip {
	font-family: var(--cc-font-body);
	font-size: 0.875rem;
	color: var(--cc-text-muted);
}

@media (max-width: 900px) {
	.cc-testimonial { grid-template-columns: 1fr; gap: var(--cc-space-6); }
	/* Colgada del margen, en móvil la comilla se salía del gutter. */
	.cc-testimonial__quote { padding-inline-start: 0.5em; }
	.cc-testimonial__quote::before { inset-inline-start: -0.06em; }
	.cc-testimonial__quote p { max-width: none; }
}

/* Fichas sin fotografía. Mientras el cliente no suba los retratos, el bloque
   se recompone como una portadilla de autores a texto: una columna estrecha
   con la firma grande y los demás al lado. No deja huecos con la proporción
   del retrato, que se leen como una imagen que no ha cargado. */
.cc-authors--sin-retrato { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }

.cc-author--sin-retrato .cc-author__body { gap: var(--cc-space-3); }

.cc-author--aside.cc-author--sin-retrato { display: block; }

.cc-authors--sin-retrato .cc-authors__aside { padding-top: var(--cc-space-2); }

/* --------------------------------------------------------------------------
   ÍNDICE DE LECTURAS
   El resto de la portada son objetos: un billete, una ficha de autor. Las
   lecturas no son un objeto que se compra ni una persona a la que se conoce,
   son una lista, y el sitio donde una lista tiene forma propia es el índice de
   un libro. Una sola ficha con los renglones dentro, separados por filete.

   Es además el descanso que la página necesitaba: después de tres secciones de
   fichas en columna, una lista horizontal cambia el compás.
   -------------------------------------------------------------------------- */

.cc-posts--indice {
	display: block;
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
}

.cc-posts--indice .cc-resource {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cc-space-5);
	padding: var(--cc-space-4) var(--cc-space-5);
	border-block-start: 1px solid var(--cc-border);
	transition: background-color var(--cc-duration) var(--cc-ease-soft);
}

.cc-posts--indice .cc-resource:first-child { border-block-start: 0; }

/* La miniatura es cuadrada y pequeña: en un índice la imagen acompaña, no
   encabeza. */
.cc-posts--indice .cc-resource__media {
	display: block;
	inline-size: 84px;
	block-size: 84px;
	overflow: hidden;
	border-radius: var(--cc-radius-md);
	background-color: var(--cc-stone);
}

.cc-posts--indice .cc-resource__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--cc-duration-image) var(--cc-ease-out);
}

.cc-posts--indice .cc-resource__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--cc-space-3);
	margin: 0 0 var(--cc-space-1);
	grid-column: 2;
}

.cc-posts--indice .cc-resource__type {
	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--indice .cc-resource__fecha {
	font-family: var(--cc-font-numeric);
	font-size: var(--cc-type-label);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--cc-text-muted);
}

.cc-posts--indice .cc-resource__title {
	grid-column: 2;
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cc-posts--indice .cc-resource__title a {
	color: var(--cc-black);
	text-decoration: none;
}

/* El enlace del título cubre el renglón entero: en una lista, el objetivo es
   la línea, no las cuatro palabras del titular. */
.cc-posts--indice .cc-resource__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cc-posts--indice .cc-resource__excerpt {
	grid-column: 2;
	margin: var(--cc-space-1) 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--cc-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El «leer» de cada renglón se queda a la vista. Intenté esconderlo dejando
   solo la flecha —el renglón entero ya es el enlace— pero la guarda de
   tipografía que protege a los enlaces con flecha del Theme Style empata en
   especificidad y carga después, así que el texto reaparecía a medio tamaño.
   Y pensándolo, visible está mejor: la flecha sola obliga a deducir. */
.cc-posts--indice .cc-resource > .cc-arrow-link {
	grid-column: 3;
	grid-row: 1 / -1;
	align-self: center;
	/* El objetivo es el renglón, no estas cuatro letras: el puntero las
	   atraviesa y el enlace que hay debajo se lleva la pulsación. */
	pointer-events: none;
	white-space: nowrap;
}

.cc-posts--indice .cc-resource > .cc-arrow-link::after {
	transition: transform var(--cc-duration-fast) var(--cc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.cc-posts--indice .cc-resource:hover { background-color: rgba(184, 148, 90, 0.06); }
	.cc-posts--indice .cc-resource:hover .cc-resource__media img { transform: scale(1.06); }
	.cc-posts--indice .cc-resource:hover > .cc-arrow-link::after { transform: translateX(3px); }
	.cc-posts--indice .cc-resource:hover .cc-resource__title a { color: var(--cc-gold-text); }
}

.cc-posts--indice .cc-resource:focus-within { background-color: rgba(184, 148, 90, 0.06); }

@media (max-width: 600px) {
	.cc-posts--indice .cc-resource {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: var(--cc-space-4);
		padding: var(--cc-space-4);
	}

	.cc-posts--indice .cc-resource__media { inline-size: 64px; block-size: 64px; }
	.cc-posts--indice .cc-resource > .cc-arrow-link { display: none; }
	.cc-posts--indice .cc-resource__excerpt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-posts--indice .cc-resource,
	.cc-posts--indice .cc-resource__media img,
	.cc-posts--indice .cc-resource > .cc-arrow-link::after { transition: none; }
	.cc-posts--indice .cc-resource:hover .cc-resource__media img,
	.cc-posts--indice .cc-resource:hover > .cc-arrow-link::after { transform: none; }
}

/* --------------------------------------------------------------------------
   FICHAS DE RECURSO
   El bloque anterior se leía como un blog porque tenía lo que tiene un blog:
   una foto bonita por entrada y poco más. Un recurso formativo se ordena por
   otras cosas —qué tipo de material es, de qué va y cuánto cuesta leerlo— y
   ninguna de las tres es una imagen.

   Sin fotografía, entonces. El tipo abre la ficha como una etiqueta, el título
   manda, el resumen cabe en dos líneas y el pie dice el coste en minutos. Es
   el patrón de un centro de recursos, no el de una revista, y de paso le da a
   la página un respiro de fotografía justo antes del cierre.
   -------------------------------------------------------------------------- */

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

.cc-posts--recursos .cc-resource {
	position: relative;
	/* Rejilla y no columna: el coste y el enlace comparten el último renglón,
	   y en columna había que sacarlo del flujo con posición absoluta para
	   ponerlo a su lado. */
	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);
	background-color: var(--cc-white);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	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);
}

/* El tipo de material, como etiqueta: es el primer filtro que aplica quien
   busca algo que estudiar. */
.cc-posts--recursos .cc-resource__meta,
.cc-posts--recursos .cc-resource__title,
.cc-posts--recursos .cc-resource__excerpt { grid-column: 1 / -1; margin: 0; }

.cc-posts--recursos .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--recursos .cc-resource__title {
	margin: 0;
	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;
}

.cc-posts--recursos .cc-resource__title a { color: var(--cc-black); text-decoration: none; }

/* El objetivo es la ficha entera, no las cuatro palabras del titular. */
.cc-posts--recursos .cc-resource__title a::after { content: ""; position: absolute; inset: 0; }

.cc-posts--recursos .cc-resource__excerpt {
	margin: 0;
	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 coste en minutos, contra el filete del pie. Es el dato que decide si se
   lee ahora o se deja para luego, así que va al final y no escondido arriba. */
.cc-posts--recursos .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);
}

.cc-posts--recursos .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);
	/* Las dos agujas del reloj, con un degradado cónico: un icono de doce
	   píxeles no merece ni un archivo ni una fuente. */
	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;
}

/* El enlace comparte renglón con el coste. El puntero lo atraviesa: el
   objetivo es la ficha entera, y este texto solo dice adónde lleva. */
.cc-posts--recursos .cc-resource > .cc-arrow-link {
	grid-column: 2;
	align-self: end;
	margin: auto 0 0;
	padding-block: 0;
	padding-block-start: var(--cc-space-4);
	min-height: 0;
	border-block-start: 1px solid var(--cc-border);
	pointer-events: none;
	white-space: nowrap;
}

.cc-posts--recursos .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--recursos .cc-resource:hover {
		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);
		transform: translateY(-2px);
	}

	.cc-posts--recursos .cc-resource:hover > .cc-arrow-link::after { transform: translateX(3px); }
	.cc-posts--recursos .cc-resource:hover .cc-resource__title a { color: var(--cc-gold-text); }
}

.cc-posts--recursos .cc-resource:focus-within { border-color: rgba(184, 148, 90, 0.55); }

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

@media (max-width: 600px) {
	.cc-posts--recursos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-posts--recursos .cc-resource,
	.cc-posts--recursos .cc-resource > .cc-arrow-link::after { transition: none; }
	.cc-posts--recursos .cc-resource:hover { transform: none; }
	.cc-posts--recursos .cc-resource:hover > .cc-arrow-link::after { transform: none; }
}

/* --------------------------------------------------------------------------
   Calendario de salidas

   La rejilla marca todos los días que dura cada viaje, no solo la partida, y
   cada viaje lleva su tono. Como varios comparten fecha, una celda puede tener
   cuatro barras: van siempre en el mismo orden, así que la posición identifica
   tanto como el color. La leyenda va al lado, que es donde se consulta.
   -------------------------------------------------------------------------- */

.cc-cal-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 4vw, 56px);
	width: 100%;
}

.cc-cal-wrap,
.cc-cal-wrap * { box-sizing: border-box; }

.cc-cal__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--cc-space-5) var(--cc-space-8);
	padding-block-end: clamp(24px, 3vw, 40px);
	border-block-end: 1px solid var(--cc-border);
}

.cc-cal__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	margin: 0 0 var(--cc-space-3);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-cal__eyebrow::before {
	content: "";
	inline-size: 32px;
	block-size: 1px;
	background-color: var(--cc-gold);
}

.cc-cal__titulo {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 400;
	line-height: 1.08;
	text-transform: capitalize;
	color: var(--cc-black);
}

.cc-cal__resumen {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px var(--cc-space-2);
	margin: 0;
	padding-block-end: 4px;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: end;
	text-transform: uppercase;
	color: var(--cc-green);
}

.cc-cal__resumen-separador { color: var(--cc-gold); }

.cc-cal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 2vw, 32px);
	min-width: 0;
}

.cc-cal__mes-bloque {
	min-width: 0;
	padding: clamp(20px, 2.2vw, 28px);
	background-color: var(--cc-surface-raised);
	border: 1px solid var(--cc-border);
	border-block-start: 3px solid var(--cc-green);
	border-radius: var(--cc-radius-lg);
}

.cc-cal__tabla {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* Elementor viste las tablas con filete y bandas cebra, y esto no es una tabla
   que se lea renglón a renglón: es una rejilla de días. */
.cc-cal .cc-cal__tabla th,
.cc-cal .cc-cal__tabla tbody td,
.cc-cal .cc-cal__tabla tbody tr td {
	border: 0;
	background-color: transparent;
}

.cc-cal__mes {
	caption-side: top;
	text-align: start;
	margin-block-end: var(--cc-space-5);
	padding-block-end: var(--cc-space-4);
	border-block-end: 1px solid var(--cc-border);
}

/* Rejilla y no flex: con `flex-wrap`, «Septiembre 2026» empujaba su cuenta a
   una segunda línea mientras «Agosto 2026» cabía en una, y los dos meses de la
   fila arrancaban a alturas distintas. En rejilla la cuenta no puede saltar. */
.cc-cal__mes-fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--cc-space-3);
}

.cc-cal__mes-cuenta { white-space: nowrap; }

.cc-cal__mes-nombre {
	font-family: var(--cc-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	line-height: 1.2;
	color: var(--cc-black);
	text-transform: capitalize;
}

.cc-cal__mes-cuenta {
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-cal__tabla th {
	padding-block-end: var(--cc-space-3);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-text-muted);
}

.cc-cal__tabla th abbr { text-decoration: none; border: 0; cursor: help; }

.cc-cal__dia,
.cc-cal__vacio {
	padding: 2px;
	text-align: center;
	vertical-align: top;
}

/* La celda: cifra arriba y las barras justo debajo, con sitio reservado
   aunque no haya ninguna, para que las semanas no cambien de alto. */
.cc-cal__dia {
	block-size: 50px;
	border-radius: var(--cc-radius-md);
}

.cc-cal .cc-cal__tabla tbody td.cc-cal__dia.is-ocupado { background-color: var(--cc-green-soft); }
.cc-cal .cc-cal__tabla tbody td.cc-cal__dia.is-hoy { box-shadow: inset 0 0 0 1px var(--cc-green); }

/* Cifras tabulares: en una rejilla de números, el 1 tiene que ocupar lo que
   ocupa el 8 o las columnas bailan de semana en semana. */
.cc-cal__numero {
	display: block;
	padding-block-start: 5px;
	font-family: var(--cc-font-numeric);
	font-size: 0.875rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--cc-text);
}

.cc-cal__dia.is-ocupado .cc-cal__numero { font-weight: 600; color: var(--cc-black); }
.cc-cal__dia.is-pasado .cc-cal__numero { color: rgba(17, 17, 17, 0.3); font-weight: 400; }

.cc-cal__barras {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	block-size: 15px;
	margin-block-start: 4px;
}

/* Media barra en los días intermedios y barra entera el día de salida: la
   diferencia es de forma, no de color, y se lee sin distinguir tonos. */
.cc-cal__barra {
	inline-size: 6px;
	block-size: 7px;
	border-radius: 1px;
	background-color: currentColor;
}

.cc-cal__barra.is-salida { block-size: 15px; }

.cc-cal__dia.is-pasado .cc-cal__barras { opacity: 0.4; }

.cc-cal__barra--t1, .cc-cal__muestra--t1 { color: var(--cc-viaje-1); background-color: var(--cc-viaje-1); }
.cc-cal__barra--t2, .cc-cal__muestra--t2 { color: var(--cc-viaje-2); background-color: var(--cc-viaje-2); }
.cc-cal__barra--t3, .cc-cal__muestra--t3 { color: var(--cc-viaje-3); background-color: var(--cc-viaje-3); }
.cc-cal__barra--t4, .cc-cal__muestra--t4 { color: var(--cc-viaje-4); background-color: var(--cc-viaje-4); }
.cc-cal__barra--t5, .cc-cal__muestra--t5 { color: var(--cc-viaje-5); background-color: var(--cc-viaje-5); }
.cc-cal__barra--t6, .cc-cal__muestra--t6 { color: var(--cc-viaje-6); background-color: var(--cc-viaje-6); }

/* --- El índice de viajes: una pieza editorial y, a la vez, navegable. --- */

.cc-cal__leyenda {
	min-width: 0;
	padding: clamp(24px, 3vw, 36px);
	background-color: var(--cc-surface-brand);
	border: 1px solid var(--cc-border);
	border-block-start: 3px solid var(--cc-gold);
	border-radius: var(--cc-radius-lg);
}

.cc-cal__leyenda-cabecera { margin-block-end: var(--cc-space-4); }

.cc-cal__leyenda-kicker {
	margin: 0 0 var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-cal__leyenda-titulo {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--cc-green);
}

.cc-cal__viajes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-cal__viaje {
	margin: 0;
	border-block-start: 1px solid rgba(17, 17, 17, 0.12);
}

.cc-cal__viaje-enlace {
	display: grid;
	grid-template-columns: 6px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--cc-space-3);
	margin-inline: -8px;
	padding: var(--cc-space-4) 8px;
	border-radius: var(--cc-radius-md);
	color: var(--cc-black);
	text-decoration: none;
	transition: background-color var(--cc-duration-fast) ease, color var(--cc-duration-fast) ease;
}

.cc-cal__muestra {
	inline-size: 5px;
	block-size: 40px;
	margin-block-start: 2px;
	border-radius: 1px;
}

.cc-cal__viaje-contenido { min-width: 0; }

.cc-cal__viaje-titulo {
	display: block;
	font-family: var(--cc-font-display);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.cc-cal__viaje-flecha {
	display: block;
	padding-block-start: 1px;
	font-family: var(--cc-font-body);
	font-size: 1rem;
	color: var(--cc-gold-text);
	transition: transform var(--cc-duration-fast) ease;
}

.cc-cal__viaje-enlace:hover { background-color: rgba(255, 253, 249, 0.58); color: var(--cc-green); }
.cc-cal__viaje-enlace:hover .cc-cal__viaje-flecha { transform: translateX(3px); }
.cc-cal__viaje-enlace:focus-visible {
	outline: 2px solid var(--cc-green);
	outline-offset: 2px;
}

.cc-cal__viaje-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--cc-space-3);
	margin-block-start: 5px;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
}

.cc-cal__viaje-dur {
	font-weight: 600;
	color: var(--cc-text);
	white-space: nowrap;
}

.cc-cal__nota {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: var(--cc-space-3);
	margin: var(--cc-space-5) 0 0;
	padding-block-start: var(--cc-space-4);
	border-block-start: 1px solid var(--cc-border);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--cc-text-muted);
}

.cc-cal__clave-formas {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	block-size: 16px;
	color: var(--cc-text-muted);
}

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

@media (min-width: 601px) {
	.cc-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.cc-cal__cabecera { grid-template-columns: minmax(0, 1fr); }
	.cc-cal__resumen { justify-content: flex-start; text-align: start; }
	.cc-cal__resumen-separador { display: none; }
	.cc-cal__resumen span:not(.cc-cal__resumen-separador) { inline-size: 100%; }
	.cc-cal__mes-bloque { padding-inline: 16px; }
	.cc-cal__mes-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.cc-cal__dia { block-size: 46px; }
	.cc-cal__leyenda { padding-inline: 20px; }
}

@media (min-width: 1025px) {
	.cc-cal-wrap { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr); }
	.cc-cal__cabecera { grid-column: 1 / -1; }
	.cc-cal__leyenda {
		position: sticky;
		top: calc(var(--cc-header-alto) + var(--cc-space-5));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-cal__viaje-enlace,
	.cc-cal__viaje-flecha { transition: none; }
	.cc-cal__viaje-enlace:hover .cc-cal__viaje-flecha { transform: none; }
}

/* --------------------------------------------------------------------------
   Mapa de destinos

   Relieve Natural Earth servido localmente, con los destinos superpuestos en
   un SVG ligero. No depende de un servicio de mapas, cookies ni iframes.
   -------------------------------------------------------------------------- */

.cc-mapa {
	--cc-mapa-tierra: var(--cc-stone);
	--cc-mapa-costa: rgba(184, 148, 90, 0.55);
	--cc-mapa-punto: var(--cc-gold);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(28px, 4vw, 56px);
	width: 100%;
}

.cc-mapa,
.cc-mapa * { box-sizing: border-box; }

.cc-mapa__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cc-space-5);
	padding-block-end: clamp(24px, 3vw, 40px);
	border-block-end: 1px solid var(--cc-border);
}

.cc-mapa__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	margin: 0 0 var(--cc-space-3);
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-mapa__eyebrow::before {
	content: "";
	inline-size: 32px;
	block-size: 1px;
	background-color: var(--cc-gold);
}

.cc-mapa__titulo {
	max-width: 18ch;
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 400;
	line-height: 1.08;
	color: var(--cc-black);
	text-wrap: balance;
}

.cc-mapa__resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 5px var(--cc-space-2);
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-green);
}

.cc-mapa__resumen-separador { color: var(--cc-gold); }

.cc-mapa__figura {
	--cc-mapa-marco: clamp(8px, 1vw, 14px);
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	margin: 0;
	overflow: hidden;
	background-color: #123a34;
	border: 1px solid rgba(23, 58, 52, 0.2);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 20px 44px rgba(23, 58, 52, 0.12);
}

.cc-mapa__lienzo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 0;
	padding: var(--cc-mapa-marco);
}

.cc-mapa__lienzo::after {
	content: "";
	position: absolute;
	inset: var(--cc-mapa-marco);
	pointer-events: none;
	box-shadow: inset 0 0 38px rgba(10, 36, 32, 0.28);
}

.cc-mapa__svg {
	display: block;
	width: 100%;
	height: auto;
	background-color: #70858a;
	border-radius: 2px;
}

.cc-mapa__reticula {
	fill: none;
	stroke: rgba(246, 243, 238, 0.13);
}

.cc-mapa__relieve {
	opacity: 0.97;
	filter: saturate(0.7) sepia(0.08) brightness(0.88) contrast(1.1);
}

.cc-mapa__tierra {
	fill: var(--cc-mapa-tierra);
	stroke: var(--cc-mapa-costa);
	stroke-linejoin: round;
}

/* Marcador de atlas: el anillo preserva el contexto geográfico que antes
   tapaba el halo blanco y el trazo no escalable sigue nítido en móvil. */
.cc-mapa__halo {
	fill: rgba(246, 243, 238, 0.12);
	stroke: rgba(246, 243, 238, 0.98);
	stroke-width: 2.5px;
	vector-effect: non-scaling-stroke;
}

.cc-mapa__nucleo {
	fill: var(--cc-mapa-punto);
	stroke: var(--cc-ivory);
	stroke-width: 1.25px;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 1px 2px rgba(17, 17, 17, 0.42));
}

.cc-mapa__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding: 14px clamp(18px, 2vw, 24px) 15px;
	border-block-start: 1px solid var(--cc-border-inverse);
	font-family: var(--cc-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.7);
	font-style: normal;
}

.cc-mapa__folio { color: var(--cc-gold); }

/* --- El índice, que es la parte navegable. --- */

.cc-mapa__panel {
	min-width: 0;
	padding: clamp(24px, 3vw, 36px);
	background-color: var(--cc-surface-brand);
	border: 1px solid var(--cc-border);
	border-block-start: 3px solid var(--cc-gold);
	border-radius: var(--cc-radius-lg);
}

.cc-mapa__panel-cabecera { margin-block-end: var(--cc-space-4); }

.cc-mapa__panel-kicker {
	margin: 0 0 var(--cc-space-2);
	font-family: var(--cc-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-gold-text);
}

.cc-mapa__panel-titulo {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--cc-green);
}

.cc-mapa__indice {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-mapa__item {
	margin: 0;
	border-block-start: 1px solid rgba(17, 17, 17, 0.12);
}

.cc-mapa__enlace {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cc-space-3);
	min-height: 76px;
	margin-inline: -8px;
	padding: var(--cc-space-3) 8px;
	border-radius: var(--cc-radius-md);
	color: var(--cc-black);
	text-decoration: none;
	transition: background-color var(--cc-duration-fast) ease, color var(--cc-duration-fast) ease, transform var(--cc-duration-press) ease;
}

.cc-mapa__cuenta-cifra {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	color: var(--cc-gold-text);
	font-family: var(--cc-font-numeric);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
}

.cc-mapa__cuenta-cifra::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: var(--cc-radius-full);
	background-color: var(--cc-mapa-punto);
}

/* Un destino sin coordenadas no tiene punto en el mapa: su cifra deja de
   prometer que lo tiene. */
.cc-mapa__item.is-sin-situar .cc-mapa__cuenta-cifra::before {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--cc-text-muted);
}

.cc-mapa__item-contenido { min-width: 0; }

.cc-mapa__destino {
	display: block;
	font-family: var(--cc-font-display);
	font-size: 1.1875rem;
	line-height: 1.3;
}

.cc-mapa__cuenta {
	display: block;
	margin-block-start: 3px;
	font-family: var(--cc-font-body);
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--cc-text-muted);
}

.cc-mapa__flecha {
	display: block;
	font-family: var(--cc-font-body);
	font-size: 1rem;
	color: var(--cc-gold-text);
	transition: transform var(--cc-duration-fast) ease;
}

.cc-mapa__enlace:hover { background-color: rgba(255, 253, 249, 0.58); color: var(--cc-green); }
.cc-mapa__enlace:hover .cc-mapa__flecha { transform: translateX(3px); }
.cc-mapa__enlace:active { transform: scale(var(--cc-press)); }
.cc-mapa__enlace:focus-visible {
	outline: 2px solid var(--cc-green);
	outline-offset: 2px;
}

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

@media (min-width: 768px) {
	.cc-mapa__cabecera {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: var(--cc-space-8);
	}

	.cc-mapa__resumen { justify-content: flex-end; padding-block-end: 4px; text-align: end; }
}

@media (min-width: 1025px) {
	.cc-mapa { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.7fr); }
	.cc-mapa__cabecera { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-mapa__enlace,
	.cc-mapa__flecha { transition: none; }
	.cc-mapa__enlace:hover .cc-mapa__flecha,
	.cc-mapa__enlace:active { transform: none; }
}