/*
Theme Name:   Divi Cootransmagdalena
Theme URI:    https://cootransmagdalena.com.co/
Description:  Tema hijo de Divi para COOTRANSMAGDALENA LTDA. Rediseño visual: portada, encabezado, pie, noticias y plantillas propias; las páginas hechas con Divi Builder heredan colores, tipografía y botones.
Author:       Equipo de diseño web
Template:     Divi
Version:      1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  divi-cootransmagdalena
*/

/* ==========================================================================
   1. Fuente autoalojada (Manrope variable, SIL OFL 1.1)
   ========================================================================== */
@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/Manrope-VariableFont_wght.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens
   Contrastes (WCAG 2.x) calculados sobre blanco #fff:
   --c-brand   #ff5b0c  3,11:1 → solo superficies, iconos y texto grande (≥24 px o ≥19 px bold).
   --c-brand-strong #c2410c 5,18:1 (4,83:1 sobre --c-surface) → botones, enlaces y texto pequeño.
   --c-brand-deep   #9a3412 7,31:1 → hover/active.
   --c-ink #1f2328 15,8:1 · --c-text #2b2f36 13,4:1 · --c-muted #5b6370 6,06:1.
   Texto --c-ink sobre --c-brand: 5,08:1.
   ========================================================================== */
:root {
	--c-brand: #ff5b0c;
	--c-brand-strong: #c2410c;
	--c-brand-deep: #9a3412;
	--c-brand-soft: #fff2eb;
	--c-brand-tint: #ffe3d4;
	--c-star-red: #d80e01;
	--c-star-yellow: #f7a600;
	--c-ink: #1f2328;
	--c-text: #2b2f36;
	--c-muted: #5b6370;
	--c-line: #e2e5ea;
	--c-line-strong: #c9ced6;
	--c-surface: #f6f7f9;
	--c-white: #ffffff;
	--c-footer: #1b1e23;
	--c-footer-text: #d5d9df; /* 11,8:1 sobre --c-footer */
	--c-success: #1f7a4d;
	--c-danger: #b42318;
	--c-whatsapp: #0e7a40; /* blanco sobre este verde: 5,42:1 */

	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Escala tipográfica (móvil → escritorio) */
	--fs-xs: 0.875rem;                                /* 14 */
	--fs-sm: 1rem;                                    /* 16 */
	--fs-base: 1.0625rem;                             /* 17 */
	--fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--fs-h4: var(--fs-lg);
	--fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
	--fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
	--fs-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
	--fs-display: clamp(1.875rem, 8.6vw, 3.75rem);

	--lh-tight: 1.12;
	--lh-snug: 1.3;
	--lh-body: 1.65;

	--fw-regular: 450;
	--fw-medium: 560;
	--fw-bold: 720;
	--fw-black: 800;

	/* Espaciado */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

	--container: 1200px;
	--gutter: max(clamp(1rem, 0.6rem + 2vw, 2rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
	--header-h: 72px;

	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgb(31 35 40 / 0.06), 0 1px 3px rgb(31 35 40 / 0.08);
	--shadow: 0 6px 20px -6px rgb(31 35 40 / 0.16), 0 2px 6px rgb(31 35 40 / 0.06);
	--shadow-lg: 0 24px 48px -16px rgb(31 35 40 / 0.28);

	/* Superficies: un escalón de tono, sin líneas. --card cambia según el fondo de la sección. */
	--card: var(--c-surface);
	--card-inset: var(--c-white);

	--focus: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-ink);
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
	--t-fast: 150ms;
	--t: 240ms;
	--t-entrada: 480ms;
}

/* ==========================================================================
   3. Base accesible (prefijo .cm para ganar a los estilos globales de Divi)
   ========================================================================== */
html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body.cm {
	margin: 0;
	background: var(--c-white);
	color: var(--c-text);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.cm *,
.cm *::before,
.cm *::after {
	box-sizing: border-box;
}

.cm :where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--sp-4);
	padding: 0;
	color: var(--c-ink);
	font-family: var(--font);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.cm h1 { font-size: var(--fs-h1); }
.cm h2 { font-size: var(--fs-h2); }
.cm h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.cm h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.cm h5,
.cm h6 { font-size: var(--fs-base); line-height: var(--lh-snug); }

.cm :where(p) {
	margin: 0 0 var(--sp-4);
	padding: 0;
}

.cm a {
	color: var(--c-brand-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

@media (hover: hover) and (pointer: fine) {
	.cm a:hover {
		color: var(--c-brand-deep);
	}
}

.cm img {
	max-width: 100%;
	height: auto;
}

.cm :where(input, button, select, textarea) {
	font-family: var(--font);
	font-size: 1rem;
}

/* Foco visible y consistente (WCAG 2.4.7 / 2.4.11) */
.cm :focus {
	outline: none;
}

.cm :focus-visible {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

.cm .cm-footer :focus-visible,
.cm .cm-band :focus-visible {
	outline-color: var(--c-white);
}

.cm ::selection {
	background: var(--c-brand);
	color: var(--c-ink);
}

.cm :where(input, textarea) {
	caret-color: var(--c-brand-strong);
}

/* Controles: respuesta inmediata al toque y sin seleccionar la etiqueta al mantener pulsado */
.cm :where(a, button, summary, [role="button"], label) {
	touch-action: manipulation;
}

.cm :where(.cm-btn, .cm-nav-toggle, .cm-submenu-toggle, .cm-accordion__summary, .cm-subnav a, .cm-quick__item, .cm-whatsapp) {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.cm-main:focus {
	outline: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.cm-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	z-index: 10000;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-sm);
	background: var(--c-ink);
	color: var(--c-white) !important;
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.cm-skip-link:focus {
	top: var(--sp-3);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.cm-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.cm-container--narrow {
	max-width: calc(760px + var(--gutter) * 2);
}

.cm-section {
	padding-block: var(--sp-section);
}

.cm-section--surface {
	--card: var(--c-white);
	--card-inset: var(--c-surface);
	background: var(--c-surface);
}

.cm-section__head {
	max-width: 720px;
	margin-bottom: var(--sp-7);
}

.cm-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.cm-section__head > :last-child {
	margin-bottom: 0;
}

.cm-section__head--media {
	display: grid;
	gap: var(--sp-5);
	align-items: end;
	max-width: none;
}

.cm-section__head--media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

@media (min-width: 860px) {
	.cm-section__head--media {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--sp-7);
	}
}

.cm-lead {
	color: var(--c-text);
	font-size: var(--fs-lg);
	line-height: 1.55;
}

.cm-icon {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

/* ==========================================================================
   5. Componentes
   ========================================================================== */

/* 5.1 Botones */
.cm-btn {
	--btn-bg: var(--c-brand-strong);
	--btn-fg: var(--c-white);
	--btn-bd: var(--btn-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 48px;
	padding: 0.75em 1.35em;
	border: 2px solid var(--btn-bd);
	border-radius: var(--radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg) !important;
	font-family: var(--font);
	font-size: 1rem;
	font-weight: var(--fw-bold);
	line-height: 1.1;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease);
	-webkit-tap-highlight-color: transparent;
}

.cm-btn .cm-icon {
	width: 1.15em;
	height: 1.15em;
}

.cm-btn .cm-icon--external {
	width: 0.95em;
	height: 0.95em;
	opacity: 0.9;
}

@media (hover: hover) and (pointer: fine) {
	.cm-btn:hover {
		--btn-bg: var(--c-brand-deep);
	}
}

.cm-btn:active {
	transform: scale(0.97);
}

.cm-btn:disabled,
.cm-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.cm-btn--primary { /* alias explícito */ }

.cm-btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--c-ink);
	--btn-bd: var(--c-ink);
}

@media (hover: hover) and (pointer: fine) {
	.cm-btn--secondary:hover {
		--btn-bg: var(--c-ink);
		--btn-fg: var(--c-white);
		--btn-bd: var(--c-ink);
	}
}

.cm-btn--dark {
	--btn-bg: var(--c-ink);
	--btn-bd: var(--c-ink);
}

@media (hover: hover) and (pointer: fine) {
	.cm-btn--dark:hover {
		--btn-bg: #000;
		--btn-bd: #000;
	}
}

.cm-btn--light {
	--btn-bg: var(--c-white);
	--btn-fg: var(--c-ink);
	--btn-bd: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.cm-btn--light:hover {
		--btn-bg: var(--c-brand-soft);
		--btn-fg: var(--c-ink);
		--btn-bd: var(--c-brand-soft);
	}
}

.cm-btn--lg {
	min-height: 56px;
	padding: 0.95em 1.7em;
	font-size: 1.0625rem;
}

.cm-btn--block {
	width: 100%;
}

.cm-link .cm-icon--arrow,
.cm-btn .cm-icon--arrow {
	transition: transform 200ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-link:hover .cm-icon--arrow,
	.cm-btn:hover .cm-icon--arrow {
		transform: translateX(3px);
	}
}

.cm-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: var(--fw-bold);
	text-decoration: none;
}

/* 5.2 Tarjetas */
.cm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--card);
}

.cm-card:has(.cm-card__link:focus-visible) {
	outline: 3px solid var(--c-ink);
	outline-offset: 3px;
}

.cm-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-surface);
}

.cm-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms var(--ease);
}

.cm-card__flecha {
	display: inline-block;
	transition: transform 200ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-card:hover .cm-card__media img {
		transform: scale(1.03);
	}

	.cm-card:hover .cm-card__flecha {
		transform: translateX(4px);
	}
}

.cm-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
}

.cm-card__meta {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.cm .cm-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.cm-card__title a {
	color: var(--c-ink);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.cm-card:hover .cm-card__title a {
		color: var(--c-brand-deep);
	}
}

/* Toda la tarjeta clicable, enlace real en el título */
.cm-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cm-card__link:focus-visible {
	outline: none;
}

.cm-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--c-text);
	font-size: var(--fs-sm);
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.cm-card__more {
	margin-top: auto;
	padding-top: var(--sp-3);
	color: var(--c-brand-strong);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

/* 5.3 Campos de formulario */
.cm-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 0;
}

.cm-field__label {
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.cm .cm-field__input,
.cm .wpforms-container input[type="text"],
.cm .wpforms-container input[type="email"],
.cm .wpforms-container input[type="tel"],
.cm .wpforms-container input[type="number"],
.cm .wpforms-container input[type="url"],
.cm .wpforms-container select,
.cm .wpforms-container textarea {
	width: 100%;
	min-height: 52px;
	padding: 0.8rem 1rem;
	border: 1.5px solid #8a929e; /* 3,3:1 contra blanco (componente UI) */
	border-radius: var(--radius-sm);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 1rem;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.cm-field__input::placeholder,
.cm .wpforms-container ::placeholder {
	color: #6b7280;
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.cm-field__input:hover {
		border-color: var(--c-ink);
	}
}

.cm-field__input:focus,
.cm .wpforms-container input:focus,
.cm .wpforms-container select:focus,
.cm .wpforms-container textarea:focus {
	border-color: var(--c-brand-strong);
	outline: none;
	box-shadow: 0 0 0 4px rgb(194 65 12 / 0.22);
}

.cm-field__input:user-invalid {
	border-color: var(--c-danger);
}

/* 5.4 Acordeón accesible (details/summary nativo) */
.cm-accordion {
	display: grid;
	gap: var(--sp-2);
}

.cm-accordion__item {
	padding-inline: var(--sp-5);
	border-radius: var(--radius);
	background: var(--card);
}

.cm-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 56px;
	padding: var(--sp-4) 0;
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	list-style: none;
	cursor: pointer;
}

.cm-accordion__summary::-webkit-details-marker {
	display: none;
}

.cm-accordion__summary::after {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--t) var(--ease);
}

.cm-accordion__item[open] > .cm-accordion__summary::after {
	transform: translateY(2px) rotate(-135deg);
}

@media (hover: hover) and (pointer: fine) {
	.cm-accordion__summary:hover {
		color: var(--c-brand-deep);
	}
}

.cm-accordion__summary:focus-visible {
	outline-offset: 0;
}

.cm-accordion__panel {
	padding-bottom: var(--sp-5);
	color: var(--c-text);
}

.cm-accordion__item[open] > .cm-accordion__panel {
	animation: cm-aparecer 180ms var(--ease);
}

@keyframes cm-aparecer {
	from {
		opacity: 0;
	}
}

/* 5.5 Etiqueta / chip */
.cm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.8em;
	border-radius: var(--radius-pill);
	background: var(--c-brand-soft);
	color: var(--c-brand-deep);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

/* ==========================================================================
   6. Encabezado
   ========================================================================== */
.cm-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--c-white);
}

.admin-bar .cm-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .cm-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .cm-header {
		top: 0;
	}
}

.cm-header.is-scrolled {
	box-shadow: var(--shadow);
}

.cm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--header-h);
}

.cm-header__brand {
	flex: 0 1 auto;
	min-width: 0;
	margin-right: auto;
}

.cm-logo,
.cm .custom-logo-link {
	display: block;
	line-height: 0;
}

.cm-logo img,
.cm .custom-logo {
	display: block;
	width: auto;
	height: 40px;
	max-width: 100%;
}

/* CTA en móvil: compacto, siempre visible */
.cm-header__cta {
	order: 2;
	white-space: nowrap;
	min-height: 44px;
	padding: 0.6em 0.95em;
	font-size: 0.9375rem;
}

.cm-nav-toggle {
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-nav-toggle:hover {
		background: var(--c-brand-tint);
	}
}

.cm-nav-toggle__icon {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 18px;
	height: 12px;
}

.cm-nav-toggle__icon span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--t) var(--ease), opacity var(--t-fast);
}

.cm-nav-toggle[aria-expanded="true"] .cm-nav-toggle__icon span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.cm-nav-toggle[aria-expanded="true"] .cm-nav-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.cm-nav-toggle[aria-expanded="true"] .cm-nav-toggle__icon span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* Navegación móvil: panel bajo el encabezado */
.cm-nav {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sp-3) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
	background: var(--c-white);
	box-shadow: var(--shadow-lg);
}

.cm-nav.is-open {
	display: block;
}

/* Panel móvil: abre y cierra por el mismo camino; el cierre es más rápido */
@media screen and (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
	.cm-js .cm-nav {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 160ms var(--ease), transform 160ms var(--ease), display 160ms allow-discrete;
	}

	.cm-js .cm-nav.is-open {
		opacity: 1;
		transform: none;
		transition: opacity 240ms var(--ease), transform 240ms var(--ease), display 240ms allow-discrete;

		@starting-style {
			opacity: 0;
			transform: translateY(-8px);
		}
	}
}

.cm-menu,
.cm-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-menu > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.cm-menu a {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: 52px;
	padding: var(--sp-2) 0;
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.cm-menu .current-menu-item > a,
.cm-menu .current-menu-ancestor > a {
	color: var(--c-brand-strong);
}

@media (hover: hover) and (pointer: fine) {
	.cm-menu a:hover {
		color: var(--c-brand-strong);
	}
}

.cm-menu .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.cm-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--c-ink);
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-submenu-toggle:hover {
		background: var(--c-brand-soft);
	}
}

.cm-nav-toggle:active,
.cm-submenu-toggle:active {
	transform: scale(0.95);
}

.cm-submenu-toggle svg {
	transition: transform var(--t) var(--ease);
}

.cm-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.cm-menu .sub-menu {
	display: none;
	flex-basis: 100%;
	padding: 0 0 var(--sp-3) var(--sp-4);
}

.cm-menu .is-open > .sub-menu {
	display: block;
}

/* Sin JS el submenú queda visible en móvil */
html:not(.cm-js) .cm-menu .sub-menu {
	display: block;
}

html:not(.cm-js) .cm-nav {
	position: static;
	display: block;
	box-shadow: none;
}

.cm-menu .sub-menu a {
	min-height: 44px;
	font-size: 1rem;
	font-weight: var(--fw-medium);
}

@media (min-width: 420px) {
	.cm-logo img,
	.cm .custom-logo {
		height: 44px;
	}
}

@media (max-width: 419px) {
	.cm-nav-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.cm-header__inner {
		gap: var(--sp-2);
	}

	.cm-logo img,
	.cm .custom-logo {
		height: 28px;
	}

	.cm-header__cta {
		padding: 0.55em 0.8em;
		font-size: 0.875rem;
	}

	.cm-header__cta .cm-icon {
		display: none;
	}
}

/* Menú de escritorio desde 1280 px: con 8 entradas (Nosotros y Servicios incluidos) no cabe antes. */
@media (min-width: 1280px) {
	:root {
		--header-h: 84px;
	}

	.cm-header__inner {
		gap: var(--sp-4);
	}

	.cm-header__brand {
		margin-right: 0;
	}

	.cm-logo img,
	.cm .custom-logo {
		height: 52px;
	}

	.cm-nav-toggle {
		display: none;
	}

	.cm-nav,
	html:not(.cm-js) .cm-nav {
		position: static;
		display: block;
		flex: 1;
		max-height: none;
		overflow: visible;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.cm-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--sp-1);
	}

	.cm-menu > li {
		border: 0;
		flex-wrap: nowrap;
	}

	.cm-menu > li > a {
		min-height: 44px;
		padding: var(--sp-2) 0.6rem;
		border-radius: var(--radius-pill);
		font-size: 0.9063rem;
		white-space: nowrap;
	}

	.cm-header__cta .cm-icon--external {
		display: none;
	}

	.cm-menu > li > a {
		position: relative;
		isolation: isolate;
	}

	.cm-menu > li > a::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: var(--radius-pill);
		background: var(--c-brand-soft);
		opacity: 0;
		transition: opacity var(--t-fast) var(--ease);
	}

	@media (hover: hover) and (pointer: fine) {
		.cm-menu > li > a:hover {
			color: var(--c-brand-deep);
		}

		.cm-menu > li > a:hover::before {
			opacity: 1;
		}
	}

	.cm-menu .current-menu-item > a {
		text-decoration-thickness: 2px;
	}

	.cm-menu > .menu-item-has-children > a {
		padding-right: var(--sp-1);
	}

	.cm-submenu-toggle {
		width: 28px;
		height: 36px;
	}

	.cm-menu .sub-menu,
	html:not(.cm-js) .cm-menu .sub-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		display: block;
		min-width: 260px;
		padding: var(--sp-2);
		border-radius: var(--radius);
		background: var(--c-white);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: scale(0.97);
		transform-origin: top left;
		transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms;
	}

	/* Puente para no perder el hover entre enlace y submenú */
	.cm-menu .sub-menu::before {
		content: "";
		position: absolute;
		top: -8px;
		right: 0;
		left: 0;
		height: 8px;
	}

	.cm-menu li:hover > .sub-menu,
	.cm-menu .is-open > .sub-menu,
	html:not(.cm-js) .cm-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s;
	}

	.cm-menu .sub-menu a {
		padding: var(--sp-2) var(--sp-3);
		border-radius: var(--radius-sm);
	}

	@media (hover: hover) and (pointer: fine) {
		.cm-menu .sub-menu a:hover {
			background: var(--c-surface);
		}
	}

	.cm-header__cta {
		order: 0;
		min-height: 48px;
		padding: 0.75em 1.25em;
		font-size: 1rem;
	}
}

/* ==========================================================================
   7. Portada
   ========================================================================== */

/* 7.1 Hero: el bus 6066 (recortado, sin fondo) avanza desde una escena con carretera en perspectiva,
   ciudad al fondo y luz ambiental. Capas: fondo (aros) → escena (cielo, ciudad, carretera) →
   resplandor → sombra → bus. El frente del bus sale de la escena; la cola sale de la pantalla. */
.cm-hero {
	position: relative;
	display: grid;
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 85% 30%, rgba(255, 91, 12, 0.14), transparent 70%),
		linear-gradient(180deg, var(--c-white) 0%, var(--c-brand-soft) 100%);
	color: var(--c-ink);
	isolation: isolate;
}

/* Aros de fondo: profundidad lejana, se mueven menos que el bus */
.cm-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.cm-hero__aro {
	position: absolute;
	border-radius: 50%;
}

.cm-hero__aro--1 {
	top: -28%;
	right: -14%;
	width: min(68vw, 920px);
	aspect-ratio: 1;
	border: clamp(40px, 6vw, 90px) solid rgba(255, 91, 12, 0.07);
}

.cm-hero__aro--2 {
	top: 6%;
	right: 4%;
	width: min(40vw, 540px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 91, 12, 0.22);
}

.cm-hero__panel {
	position: relative;
	z-index: 2;
	padding: var(--sp-7) var(--gutter) var(--sp-5);
}

/* Tamaño ligado al ancho: "Cootransmagdalena" ocupa unos 9,4 em. */
.cm-hero__title {
	margin: 0 0 var(--sp-4);
	color: var(--c-ink) !important;
	font-size: var(--fs-display) !important;
	font-weight: var(--fw-black) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.03em;
}

.cm-hero__title span {
	display: block;
}

/* Naranja de marca oscurecido: 5,18:1 sobre blanco */
.cm-hero__acento {
	color: var(--c-brand-strong);
	font-style: normal;
}

.cm-hero__lead {
	max-width: 36ch;
	margin-bottom: var(--sp-6);
	color: var(--c-text);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

.cm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.cm .cm-hero__contacto {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
	color: var(--c-ink);
	text-decoration: none;
}

.cm-hero__contacto-icono {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-brand-strong);
	color: var(--c-white);
}

.cm-hero__contacto-texto {
	display: grid;
	line-height: 1.25;
}

.cm-hero__contacto-label {
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.cm-hero__contacto-numero {
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-hero__contacto:hover .cm-hero__contacto-numero {
		text-decoration: underline;
	}
}

.cm-hero__slogan {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-5) 0 0;
	color: var(--c-ink);
	font-weight: var(--fw-bold);
}

.cm-hero__note {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-1) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

/* Escena: cielo cálido, ciudad, carretera. El bus vive encima y la desborda. */
.cm-hero__escena {
	--cm-bus: 118vw; /* ancho del bus; la foto mide 847 × 446 */
	position: relative;
	z-index: 1;
	min-height: calc(var(--cm-bus) * 0.527 + var(--sp-8) + var(--sp-6));
}

.cm-hero__pista {
	position: absolute;
	right: 0;
	bottom: 0;
	left: var(--gutter);
	height: 74%;
	overflow: hidden;
	border-radius: var(--radius-lg) 0 0 0;
	background: linear-gradient(180deg, #ffe7d8 0%, #ffbf94 30%, #f58748 50%, #7a5644 50.4%, #4a3830 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cm-hero__ciudad {
	position: absolute;
	right: -4%;
	bottom: 49.6%;
	left: -4%;
	width: 108%;
	height: 40%;
}

.cm-hero__ciudad-lejos {
	fill: rgba(150, 56, 14, 0.22);
}

.cm-hero__ciudad-cerca {
	fill: rgba(96, 34, 8, 0.38);
}

/* Carretera en perspectiva: nace en el horizonte a la derecha y llega al frente por la izquierda,
   en la misma dirección en que avanza el bus */
.cm-hero__carretera {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
}

.cm-hero__asfalto {
	fill: #24201e;
}

.cm-hero__borde {
	fill: none;
	stroke: rgba(255, 255, 255, 0.75);
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
}

.cm-hero__linea {
	fill: none;
	stroke: #ffb347;
	stroke-dasharray: 26 22;
	stroke-width: 4;
	vector-effect: non-scaling-stroke;
}

/* Reflejo cálido sobre el asfalto */
.cm-hero__brillo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 44%;
	background: radial-gradient(60% 80% at 60% 0%, rgba(255, 154, 92, 0.35), transparent 70%);
}

/* Luz ambiental detrás del bus: lo une con el cielo de la escena */
.cm-hero__resplandor {
	position: absolute;
	right: 4%;
	bottom: 22%;
	width: 70%;
	height: 60%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 179, 128, 0.55), transparent);
	pointer-events: none;
}

.cm-hero__vehiculo {
	position: absolute;
	bottom: calc(var(--sp-6) + var(--sp-6));
	width: var(--cm-bus);
}

.cm-hero__bus {
	position: relative;
}

.cm-hero__img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 22px rgba(31, 35, 40, 0.28)) drop-shadow(0 4px 6px rgba(31, 35, 40, 0.18));
}

/* Sombra de contacto bajo las ruedas */
.cm-hero__sombra {
	position: absolute;
	right: 2%;
	bottom: -3%;
	left: 6%;
	height: 14%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.18) 60%, transparent);
}

@media (max-width: 599px) {
	.cm-hero__actions .cm-btn {
		width: 100%;
	}
}

/* Celular y tableta: el bus queda bajo el texto, con el frente a la vista y la cola fuera de pantalla */
@media (max-width: 959px) {
	.cm-hero__aro--2 {
		display: none;
	}

	.cm-hero__vehiculo {
		left: 2vw;
	}
}

@media (min-width: 600px) and (max-width: 959px) {
	.cm-hero__escena {
		--cm-bus: 84vw;
	}

	.cm-hero__vehiculo {
		left: auto;
		right: -8vw;
	}

	.cm-hero__pista {
		left: 34%;
	}
}

@media (min-width: 960px) {
	.cm-hero {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
		min-height: min(720px, calc(100vh - var(--header-h)));
		min-height: min(720px, calc(100svh - var(--header-h)));
	}

	.cm-hero__panel {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--sp-8) 0 calc(var(--sp-8) + var(--sp-5)) max(var(--gutter), calc((100vw - var(--container)) / 2));
	}

	.cm-hero__title {
		font-size: clamp(2.5rem, 4.1vw, 3.75rem) !important;
	}

	.cm-hero__escena {
		--cm-bus: min(48vw, 820px);
		min-height: 0;
	}

	/* El borde izquierdo de la escena queda siempre detrás del primer 10 % del bus: el frente la cruza */
	.cm-hero__pista {
		top: 13%;
		bottom: 9%;
		left: calc(107% - var(--cm-bus) * 0.9);
		height: auto;
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}

	/* Las ruedas pisan la carretera; el techo deja ver la ciudad y el frente sale por la izquierda */
	.cm-hero__vehiculo {
		right: -7%;
		bottom: 16%;
	}

	.cm-hero__resplandor {
		bottom: 30%;
	}
}

/* 7.2 Consultar guía: tarjeta que monta sobre el hero */
.cm-guia-wrap {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--sp-6) * -1);
}

.cm-guia {
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

.cm-guia__head {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.cm-guia__icon {
	flex-shrink: 0;
	color: var(--c-brand-strong);
	line-height: 0;
}

.cm-guia__icon .cm-icon {
	width: 26px;
	height: 26px;
}

.cm-guia__title {
	margin: 0 0 var(--sp-1) !important;
	font-size: var(--fs-h3) !important;
}

.cm-guia__help {
	margin: 0;
	color: var(--c-text);
	font-size: var(--fs-sm);
}

.cm-guia__form {
	display: grid;
	gap: var(--sp-4);
}

.cm-guia__submit {
	min-height: 52px;
}

.cm-guia__note {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.cm-guia__note .cm-icon {
	width: 14px;
	height: 14px;
}

@media (min-width: 720px) {
	.cm-guia {
		padding: var(--sp-6);
	}

	.cm-guia__form {
		grid-template-columns: 1fr 1.4fr auto;
		align-items: end;
	}
}

@media (min-width: 1080px) {
	.cm-guia {
		display: grid;
		grid-template-columns: minmax(260px, 0.8fr) 2fr;
		align-items: center;
		gap: var(--sp-6);
		padding: var(--sp-6) var(--sp-7);
	}

	.cm-guia__head {
		margin: 0;
	}

	.cm-guia__note {
		grid-column: 2;
		margin-top: calc(var(--sp-2) * -1);
	}
}

/* 7.3 Accesos rápidos */
.cm-quick {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-quick__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	height: 100%;
	min-height: 132px;
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--c-ink) !important;
	text-decoration: none !important;
	transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-quick__item:hover {
		background: var(--c-brand-tint);
	}
}

.cm-quick__item:active {
	transform: scale(0.98);
}

.cm-quick li:first-child .cm-quick__item {
	background: var(--c-brand);
}

@media (hover: hover) and (pointer: fine) {
	.cm-quick li:first-child .cm-quick__item:hover {
		background: #ff7a3a;
	}
}

.cm-quick li:first-child .cm-quick__icon,
.cm-quick li:first-child .cm-quick__label .cm-icon,
.cm-quick li:first-child .cm-quick__desc {
	color: var(--c-ink);
}

.cm-quick__icon {
	color: var(--c-brand-strong);
	line-height: 0;
}

.cm-quick__icon .cm-icon {
	width: 28px;
	height: 28px;
}

.cm-quick__label {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

.cm-quick__label .cm-icon--external,
.cm-quick__label .cm-icon--arrow {
	width: 16px;
	height: 16px;
	color: var(--c-muted);
}

.cm-quick__desc {
	margin: 0;
	color: var(--c-text);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

@media (min-width: 960px) {
	.cm-quick {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-4);
	}

	.cm-quick__item {
		padding: var(--sp-5);
	}
}

/* 7.4 Servicios (lista, sin tarjetas) */
.cm-services {
	display: grid;
	gap: var(--sp-6) var(--sp-7);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-service {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-4);
	align-items: start;
}

.cm-service__icon {
	display: block;
	color: var(--c-brand-strong);
	line-height: 0;
}

.cm-service__icon .cm-icon {
	width: 26px;
	height: 26px;
}

.cm-service__title {
	margin: 0 0 var(--sp-1) !important;
	font-size: var(--fs-h4) !important;
}

.cm-service__text {
	margin: 0 0 var(--sp-2);
	color: var(--c-text);
}

.cm-services__docs {
	margin: var(--sp-7) 0 0;
}

@media (min-width: 720px) {
	.cm-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 7.5 Franja de compra */
.cm-band {
	position: relative;
	overflow: hidden;
	padding-block: var(--sp-7);
	background: var(--c-ink);
	color: var(--c-white);
}

.cm-band__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.cm-band__title {
	margin: 0 0 var(--sp-2) !important;
	color: var(--c-white) !important;
	font-size: var(--fs-h3) !important;
}

.cm-band__text {
	margin: 0;
	color: #d5d9df;
}

/* Variante naranja (texto tinta #1f2328 sobre #ff5b0c: 5,08:1) */
.cm-band--brand {
	background: var(--c-brand);
	color: var(--c-ink);
}

.cm-band--brand .cm-band__title {
	color: var(--c-ink) !important;
}

.cm-band--brand .cm-band__text {
	color: var(--c-ink);
}

.cm .cm-band--brand :focus-visible {
	outline-color: var(--c-ink);
}

@media (min-width: 860px) {
	.cm-band__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-7);
	}
}

/* 7.6 Medios de pago */
.cm-pay {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-pay li {
	display: grid;
	place-items: center;
	aspect-ratio: 5 / 3;
	padding: var(--sp-2);
	border-radius: var(--radius-sm);
	background: var(--c-white);
}

.cm-pay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 860px) {
	.cm-pay {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* 7.7 Alerta antifraude */
.cm-alert {
	--card: var(--c-white);
	display: grid;
	gap: var(--sp-6);
	padding: var(--sp-6) var(--sp-5);
	border-radius: var(--radius-lg);
	background: var(--c-brand-soft);
}

.cm-alert__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	color: var(--c-danger);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
}

.cm-alert__title {
	margin-bottom: var(--sp-3) !important;
	font-size: var(--fs-h2) !important;
}

.cm-alert__list {
	display: grid;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}

.cm-alert__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
}

.cm-alert__list .cm-icon {
	width: 22px;
	height: 22px;
	margin-top: 2px;
}

.cm-alert__list .cm-icon--check { color: var(--c-success); }
.cm-alert__list .cm-icon--x { color: var(--c-danger); }

.cm-alert__channels {
	align-self: start;
	padding: var(--sp-5);
	border-radius: var(--radius);
	background: var(--c-white);
}

.cm-alert__channels h3 {
	font-size: var(--fs-h4) !important;
}

.cm-alert__channels ul {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-alert__channels li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
	font-size: var(--fs-sm);
}

.cm-alert__channels li .cm-icon {
	width: 22px;
	height: 22px;
	color: var(--c-brand-strong);
}

.cm-alert__channels strong {
	display: block;
	color: var(--c-ink);
}

.cm-alert__channels a {
	overflow-wrap: anywhere;
}

.cm-alert__more {
	margin-bottom: var(--sp-5);
}

.cm-alert__closing {
	margin: 0;
	color: var(--c-ink);
	font-weight: var(--fw-bold);
}

@media (min-width: 960px) {
	.cm-alert {
		grid-template-columns: 1.6fr 1fr;
		gap: var(--sp-7);
		padding: var(--sp-7);
	}
}

/* 7.8 Institucional */
.cm-about {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

.cm-about__media {
	position: relative;
	margin: 0;
}

.cm-about__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.cm-about__title {
	font-size: var(--fs-h2) !important;
}

.cm-about__text {
	color: var(--c-text);
	font-size: var(--fs-lg);
	line-height: 1.6;
}

@media (min-width: 960px) {
	.cm-about {
		grid-template-columns: 1fr 1.1fr;
		gap: var(--sp-8);
	}
}

/* 7.9 Grillas de noticias */
.cm-grid {
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 1024px) {
	.cm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-6);
	}
}

.cm-section__foot {
	margin-top: var(--sp-6);
	text-align: center;
}

/* ==========================================================================
   8. Cabecera de páginas internas, noticias y prosa
   ========================================================================== */
/* Misma familia visual que la cabecera de páginas internas (.cm-phero, sección 15.1) */
.cm-page-head {
	position: relative;
	padding-block: var(--sp-7);
	background: var(--c-ink);
	color: #d5d9df;
}

.cm-page-head__title {
	max-width: 32ch;
	overflow-wrap: anywhere;
	margin: 0 !important;
	color: var(--c-white) !important;
	font-size: var(--fs-h1) !important;
}

.cm-page-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin-top: var(--sp-4);
	color: #d5d9df;
	font-size: var(--fs-sm);
}

.cm .cm-page-head a {
	color: #d5d9df;
}

.cm-page-head .cm-breadcrumb [aria-current] {
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-page-head a:hover {
		color: var(--c-white);
	}
}

.cm-page-head .cm-breadcrumb li + li::before {
	color: #aab1bb;
}

.cm .cm-page-head :focus-visible {
	outline-color: var(--c-white);
}

.cm-breadcrumb {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
}

.cm-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-breadcrumb li + li::before {
	content: "/";
	margin-right: var(--sp-2);
	color: var(--c-line-strong);
}

.cm-breadcrumb li:last-child {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: min(12ch, 100%);
}

.cm-breadcrumb [aria-current] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cm-breadcrumb a {
	color: var(--c-muted);
}

.cm-breadcrumb [aria-current] {
	color: var(--c-ink);
	font-weight: var(--fw-medium);
}

.cm-article__media {
	margin: 0 0 var(--sp-6);
}

.cm-article__media img {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
}

.cm-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

.cm-prose :where(iframe, video, embed, object) {
	max-width: 100%;
}

.cm-prose pre {
	overflow-x: auto;
	padding: var(--sp-4);
	border-radius: var(--radius-sm);
	background: var(--c-surface);
	font-size: var(--fs-xs);
}

.cm-prose > * + * {
	margin-top: var(--sp-5);
}

.cm-prose :where(h2, h3, h4) {
	margin-top: var(--sp-7);
}

.cm-prose :where(p, li) {
	padding: 0;
}

.cm-prose :where(ul, ol) {
	padding-left: 1.4em;
}

.cm-prose ul { list-style: disc; }
.cm-prose ol { list-style: decimal; }

.cm-prose li + li {
	margin-top: var(--sp-2);
}

.cm-prose li::marker {
	color: var(--c-brand-strong);
}

.cm-prose blockquote {
	margin-inline: 0;
	padding: var(--sp-5);
	border-radius: var(--radius);
	background: var(--c-brand-soft);
	color: var(--c-ink);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
}

.cm-prose img {
	border-radius: var(--radius);
}

.cm-prose figcaption {
	margin-top: var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

/* Tabla ancha: se desliza dentro de su caja, no desborda la página */
.cm-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	overflow-wrap: normal;
}

.cm-prose th,
.cm-prose td {
	padding: var(--sp-3);
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}

.cm-prose .wp-block-button__link {
	border-radius: var(--radius-pill);
	background: var(--c-brand-strong);
	color: var(--c-white);
	font-weight: var(--fw-bold);
}

.cm-article__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-top: var(--sp-7);
}

.cm-postnav {
	display: grid;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}

.cm-postnav a {
	display: block;
	padding: var(--sp-4) var(--sp-5);
	background: var(--card);
	border-radius: var(--radius);
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-postnav a:hover {
		background: var(--c-brand-tint);
		color: var(--c-ink);
	}
}

.cm-postnav span {
	display: block;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

@media (min-width: 720px) {
	.cm-postnav {
		grid-template-columns: 1fr 1fr;
	}

	.cm-postnav .nav-next {
		text-align: right;
	}
}

.cm-pagination {
	margin-top: var(--sp-7);
}

.cm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.cm-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	background: var(--card);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.cm-pagination .page-numbers.current {
	background: var(--c-ink);
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.cm-pagination a.page-numbers:hover {
		background: var(--c-brand-tint);
		color: var(--c-ink);
	}
}

.cm-empty {
	padding: var(--sp-7) var(--sp-5);
	background: var(--card);
	border-radius: var(--radius-lg);
	text-align: center;
}

.cm-search {
	display: flex;
	gap: var(--sp-2);
	max-width: 520px;
	margin-inline: auto;
}

.cm-search .cm-field__input {
	flex: 1;
}

/* Comentarios (comments.php de Divi) */
.cm #comment-wrap {
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.cm #commentform input[type="text"],
.cm #commentform input[type="email"],
.cm #commentform input[type="url"],
.cm #commentform textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid #8a929e;
	border-radius: var(--radius-sm);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 1rem;
}

.cm #commentform .submit {
	min-height: 48px;
	padding: 0.75em 1.35em;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-brand-strong);
	color: var(--c-white);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

/* ==========================================================================
   9. Pie
   ========================================================================== */
.cm-footer {
	position: relative;
	padding-top: var(--sp-8);
	background: var(--c-footer);
	color: var(--c-footer-text);
	font-size: var(--fs-sm);
}

.cm-footer a {
	color: var(--c-white);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.cm-footer a:hover {
		color: var(--c-white);
		text-decoration: underline;
	}
}

.cm-footer__top {
	display: grid;
	gap: var(--sp-7);
	padding-bottom: var(--sp-7);
}

.cm-footer__logo {
	display: inline-block;
	margin-bottom: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	background: var(--c-white);
	line-height: 0;
}

.cm-footer__logo img {
	width: auto;
	height: 40px;
}

.cm-footer__claim {
	margin-bottom: var(--sp-5);
	color: var(--c-white);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
}

.cm-footer__cols {
	display: grid;
	gap: var(--sp-6) var(--sp-5);
}

.cm-footer__title {
	margin: 0 0 var(--sp-4) !important;
	color: var(--c-white) !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-bold) !important;
}

.cm-footer__list {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	line-height: 1.45;
}

.cm-footer__list .cm-icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--c-brand);
}

.cm-footer__list a {
	display: inline-block;
	padding-block: 2px;
	overflow-wrap: break-word;
}

.cm-footer__label {
	display: block;
	color: #aab1bb; /* 7,7:1 sobre --c-footer */
	font-size: var(--fs-xs);
}

.cm-footer__extra {
	padding-left: calc(18px + var(--sp-3));
	color: #aab1bb;
}

.cm-footer__nav {
	padding-block: var(--sp-5);
}

.cm-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding-block: var(--sp-5) calc(var(--sp-7) + var(--sp-5));
}

.cm-footer__seals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

.cm-footer__seals img {
	width: auto;
	height: 48px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	background: var(--c-white);
}

.cm-footer__legal {
	max-width: 75ch;
	margin: 0;
	color: #aab1bb;
	font-size: var(--fs-xs);
}

.cm-footer__sep {
	margin-inline: var(--sp-2);
}

@media (min-width: 720px) {
	.cm-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-right: 88px; /* deja libre el botón flotante de WhatsApp */
	}
}

@media (min-width: 1080px) {
	.cm-footer__top {
		grid-template-columns: minmax(240px, 1fr) 3fr;
		gap: var(--sp-8);
	}

	.cm-footer__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.55fr);
	}
}

/* ==========================================================================
   10. WhatsApp flotante
   ========================================================================== */
.cm-whatsapp {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-whatsapp);
	color: var(--c-white) !important;
	font-weight: var(--fw-bold);
	text-decoration: none !important;
	box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.45);
	transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm-whatsapp:hover {
		background: #0b6634;
	}
}

.cm-whatsapp:active {
	transform: scale(0.95);
}

.cm-whatsapp:focus-visible {
	outline: 3px solid var(--c-ink) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--c-white);
}

body.cm-menu-open .cm-whatsapp {
	display: none;
}

/* El menú abierto no deja que la página se mueva detrás (solo con el panel móvil) */
@media (max-width: 1279px) {
	body.cm-menu-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   11. WPForms (PQRS / contacto): solo presentación, la lógica no se toca
   ========================================================================== */
.cm .wpforms-container {
	margin-block: var(--sp-5);
}

.cm .wpforms-container .wpforms-field-label {
	margin-bottom: var(--sp-2);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.cm .wpforms-container .wpforms-required-label {
	color: var(--c-danger);
}

.cm .wpforms-container .wpforms-field-description,
.cm .wpforms-container .wpforms-field-sublabel {
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

.cm .wpforms-container .wpforms-submit,
.cm .wpforms-container button[type="submit"] {
	min-height: 48px;
	padding: 0.75em 1.5em !important;
	border: 2px solid var(--c-brand-strong) !important;
	border-radius: var(--radius-pill) !important;
	background: var(--c-brand-strong) !important;
	color: var(--c-white) !important;
	font-family: var(--font) !important;
	font-size: 1rem !important;
	font-weight: var(--fw-bold) !important;
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.cm .wpforms-container .wpforms-submit:hover,
	.cm .wpforms-container button[type="submit"]:hover {
		border-color: var(--c-brand-deep) !important;
		background: var(--c-brand-deep) !important;
	}
}

.cm .wpforms-container label.wpforms-error,
.cm .wpforms-container .wpforms-error {
	color: var(--c-danger);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.cm .wpforms-container input.wpforms-error,
.cm .wpforms-container textarea.wpforms-error,
.cm .wpforms-container select.wpforms-error {
	border-color: var(--c-danger);
}

.cm .wpforms-confirmation-container-full {
	padding: var(--sp-5);
	border: 1px solid #b7e1c8;
	border-radius: var(--radius);
	background: #effaf3;
	color: var(--c-ink);
}

/* ==========================================================================
   12. Páginas hechas con Divi Builder: heredan el sistema visual sin tocar su contenido
   ========================================================================== */

/* 12.1 Tipografía: una sola familia (los iconos de Divi viven en pseudo-elementos o .et-pb-icon) */
.cm .et-l *:not(.et-pb-icon):not(.et_pb_font_icon):not([class*="et-pb-icon"]) {
	font-family: var(--font) !important;
}

.cm .et-l :where(.et_pb_text, .et_pb_blurb_description, .et_pb_promo_description, .et_pb_toggle_content, .et_pb_tab) {
	font-size: var(--fs-base);
	line-height: var(--lh-body);
}

.cm .et-l .et_pb_bg_layout_light :where(p, li) {
	color: var(--c-text);
}

.cm .et-l h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-tight) !important; font-weight: var(--fw-black) !important; font-style: normal !important; letter-spacing: -0.02em !important; }
.cm .et-l h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-tight) !important; font-weight: var(--fw-bold) !important; font-style: normal !important; letter-spacing: -0.015em !important; }
.cm .et-l h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-snug) !important; font-weight: var(--fw-bold) !important; font-style: normal !important; }
.cm .et-l h4 { font-size: var(--fs-h4) !important; line-height: var(--lh-snug) !important; font-weight: var(--fw-bold) !important; font-style: normal !important; letter-spacing: 0 !important; }
.cm .et-l h5,
.cm .et-l h6 { font-size: var(--fs-base) !important; line-height: var(--lh-snug) !important; font-weight: var(--fw-bold) !important; font-style: normal !important; }

.cm .et-l .et_pb_bg_layout_light :where(h1, h2, h3, h4, h5, h6) {
	color: var(--c-ink);
}

.cm .et-l .et_pb_text a:not(.et_pb_button),
.cm .et-l .et_pb_blurb_description a,
.cm .et-l .et_pb_toggle_content a {
	color: var(--c-brand-strong);
	text-decoration: underline;
}

.cm .et-l .et_pb_bg_layout_dark a:not(.et_pb_button) {
	color: var(--c-white);
}

/* Correos y URLs largos (p. ej. tarjetas de Contacto) no se cortan en móvil */
.cm .et-l :where(.et_pb_module_header, .et_pb_blurb_content, .et_pb_text_inner) {
	overflow-wrap: anywhere;
}

.cm .et-l .et_pb_text :where(ul, ol) {
	padding-left: 1.3em;
}

/* 12.2 Cabecera (primera sección): fondo plano, sin fotos teñidas */
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child {
	position: relative;
	padding-top: clamp(3rem, 2rem + 4vw, 5.5rem) !important;
	padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem) !important;
	background-color: var(--c-ink) !important;
	background-image: none !important;
}

/* Sin animación de entrada en la cabecera: es el primer contenido visible (LCP) y el "zoom" de Divi
   la dejaba en blanco al cargar y desbordaba el ancho de la pantalla mientras escalaba. */
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child,
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child .et_animated,
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child .et_pb_module {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

.cm-page--divi {
	overflow-x: clip; /* las animaciones de entrada de Divi no generan scroll horizontal */
}

.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child .et_parallax_bg_wrap,
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child .et_pb_background_mask,
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child .et_pb_background_pattern {
	display: none !important;
}

.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child :where(h1, h2, h3, h4, h5, h6, p, li, span, strong) {
	color: var(--c-white) !important;
	text-shadow: none !important;
}

.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child p {
	color: #e4e7eb !important;
	font-size: var(--fs-lg) !important;
}

/* 12.3 Botones de Divi → botón principal */
.cm .et-l .et_pb_button,
.cm .et-l .et_pb_promo_button,
.cm .et-l .et_pb_more_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.75em 1.4em !important;
	border: 2px solid var(--c-brand-strong) !important;
	border-radius: var(--radius-pill) !important;
	background: var(--c-brand-strong) !important;
	color: var(--c-white) !important;
	font-size: 1rem !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: transform var(--t-fast) var(--ease) !important;
}

@media (hover: hover) and (pointer: fine) {
	.cm .et-l .et_pb_button:hover,
	.cm .et-l .et_pb_promo_button:hover,
	.cm .et-l .et_pb_more_button:hover {
		border-color: var(--c-brand-deep) !important;
		background: var(--c-brand-deep) !important;
	}
}

.cm .et-l .et_pb_button:active,
.cm .et-l .et_pb_promo_button:active,
.cm .et-l .et_pb_more_button:active {
	transform: scale(0.97);
}

/* Icono de flecha de Divi: siempre visible y en línea, sin saltos de padding */
.cm .et-l .et_pb_button::after,
.cm .et-l .et_pb_promo_button::after {
	position: static !important;
	margin: 0 !important;
	opacity: 1 !important;
	color: inherit !important;
	font-size: 1em !important;
	line-height: 1 !important;
	transition: transform var(--t-fast) var(--ease) !important;
}

.cm .et-l .et_pb_button::before {
	display: none !important;
}

.cm .et-l .et_pb_button:focus-visible {
	outline: 3px solid var(--c-ink) !important;
	outline-offset: 3px;
}

.cm .et-l .et_pb_bg_layout_dark .et_pb_button:focus-visible,
.cm.cm-divi-has-header .et-l--post .et_builder_inner_content > div.et_pb_section:first-child .et_pb_button:focus-visible {
	outline-color: var(--c-white) !important;
}

/* Enlaces externos y PDF: señal visual de que salen del sitio */
.cm .et-l a.et_pb_button[href$=".pdf"]::after {
	content: "\e092" !important; /* ETmodules: descarga */
}

/* 12.4 Promos (CTA) con texto claro: fondo con contraste suficiente */
.cm .et-l .et_pb_promo.et_pb_bg_layout_dark {
	border-radius: var(--radius-lg);
	background-color: var(--c-brand-strong) !important;
}

.cm .et-l .et_pb_promo.et_pb_bg_layout_dark .et_pb_promo_button {
	border-color: var(--c-white) !important;
	background: var(--c-white) !important;
	color: var(--c-ink) !important;
}

.cm .et-l .et_pb_promo.et_pb_bg_layout_light {
	border-radius: var(--radius-lg);
}

/* 12.5 Blurbs e imágenes */
.cm .et-l .et_pb_blurb .et-pb-icon {
	color: var(--c-brand-strong) !important;
}

.cm .et-l .et_pb_blurb.et_pb_bg_layout_dark .et-pb-icon {
	color: var(--c-brand) !important;
}

.cm .et-l .et_pb_image .et_pb_image_wrap,
.cm .et-l .et_pb_image img {
	border-radius: var(--radius);
}

.cm .et-l .et_pb_fullwidth_image img {
	border-radius: 0;
}

/* 12.6 Acordeones y toggles de Divi (PQRS): aspecto y foco */
.cm .et-l .et_pb_toggle {
	margin-bottom: var(--sp-3) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--radius) !important;
	background: var(--c-surface) !important;
}

.cm .et-l .et_pb_toggle_title {
	position: relative;
	padding: var(--sp-4) calc(var(--sp-5) + 28px) var(--sp-4) var(--sp-5) !important;
	color: var(--c-ink) !important;
	font-size: 1.0625rem !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1.4 !important;
	cursor: pointer;
}

.cm .et-l .et_pb_toggle_title::before {
	right: var(--sp-5) !important;
	color: var(--c-brand-strong) !important;
}

@media (hover: hover) and (pointer: fine) {
	.cm .et-l .et_pb_toggle_title:hover {
		color: var(--c-brand-strong) !important;
	}
}

.cm .et-l .et_pb_toggle_title:focus-visible {
	outline: 3px solid var(--c-ink) !important;
	outline-offset: -3px;
	border-radius: var(--radius);
}

.cm .et-l .et_pb_toggle_content {
	padding: 0 var(--sp-5) var(--sp-5) !important;
	color: var(--c-text) !important;
}

/* 12.7 Formularios de contacto de Divi, si los hubiera */
.cm .et-l .et_pb_contact_form input,
.cm .et-l .et_pb_contact_form textarea,
.cm .et-l .et_pb_contact_form select {
	padding: 0.8rem 1rem !important;
	border: 1.5px solid #8a929e !important;
	border-radius: var(--radius-sm) !important;
	background: var(--c-white) !important;
	color: var(--c-ink) !important;
	font-size: 1rem !important;
}

/* 12.8 Animaciones de entrada de Divi: respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.cm .et-l .et_animated,
	.cm .et-l .et-waypoint {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   15. Páginas internas rehechas (brochure 2026): Nosotros, Servicios, Vehículos,
       Agencias, Contacto, PQRS, Documentos, Mascotas, Equipaje.
       Sobre tinta #1f2328: blanco 15,8:1 · #d5d9df 11,1:1 · #ff5b0c 5,08:1.
   ========================================================================== */

/* 15.1 Cabecera de página */
.cm-phero {
	position: relative;
	overflow: hidden;
	padding-block: var(--sp-7);
	background: var(--c-ink);
	color: #d5d9df;
}

.cm-phero__inner {
	position: relative;
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

.cm-phero__nota {
	margin: var(--sp-3) 0 0 !important;
	color: var(--c-white);
	font-weight: var(--fw-bold);
}

.cm .cm-phero__title {
	max-width: 20ch;
	margin: 0 0 var(--sp-4);
	color: var(--c-white);
	font-size: var(--fs-h1);
}

.cm-phero__lead {
	max-width: 60ch;
	margin: 0 !important;
	font-size: var(--fs-lg);
	line-height: 1.55;
}

.cm-phero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.cm-phero__media {
	margin: 0;
}

.cm-phero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.cm-breadcrumb--dark a,
.cm-breadcrumb--dark li + li::before {
	color: #aab1bb;
}

.cm-breadcrumb--dark [aria-current] {
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-breadcrumb--dark a:hover {
		color: var(--c-white);
	}
}

.cm .cm-phero :focus-visible,
.cm .cm-section--ink :focus-visible {
	outline-color: var(--c-white);
}

@media (min-width: 960px) {
	.cm-phero {
		padding-block: var(--sp-8);
	}

	.cm-phero--media {
		padding-block: 0;
	}

	.cm-phero--media .cm-phero__inner {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
		gap: var(--sp-7);
		align-items: stretch;
		min-height: 560px;
		max-width: none;
		padding-right: 0;
		padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
	}

	.cm-phero--media .cm-phero__text {
		align-self: center;
		padding-block: var(--sp-7);
	}

	.cm-phero--media .cm-phero__media {
		position: relative;
		min-height: 100%;
	}

	.cm-phero--media .cm-phero__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
	}
}

/* 15.2 Sección oscura */
.cm-section--ink {
	background: var(--c-ink);
	color: #d5d9df;
}

.cm .cm-section--ink :where(h2, h3) {
	color: var(--c-white);
}

.cm .cm-section--ink a:not(.cm-btn) {
	color: var(--c-brand);
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-section--ink a:not(.cm-btn):hover {
		color: var(--c-white);
	}
}

/* 15.3 Texto + lateral */
.cm-split {
	display: grid;
	gap: var(--sp-6);
}

.cm-split__main > :last-child {
	margin-bottom: 0;
}

.cm-split__main p {
	max-width: 68ch;
}

.cm .cm-aside__title {
	font-size: var(--fs-h4);
}

@media (min-width: 960px) {
	.cm-split {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--sp-8);
		align-items: start;
	}
}

/* 15.4 Cifras (dl/dt/dd: el valor va después; ul/li: el valor va primero) */
.cm-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding: var(--sp-5);
	border-radius: var(--radius);
	background: var(--card);
}

dl.cm-stats .cm-stat {
	flex-direction: column-reverse;
	justify-content: flex-end;
}

.cm-stat dt,
.cm-stat__label {
	color: var(--c-muted);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

.cm-stat dd,
.cm-stat__value {
	margin: 0;
	color: var(--c-ink);
	font-size: var(--fs-h2);
	font-weight: var(--fw-black);
	line-height: 1;
	letter-spacing: -0.02em;
}

.cm-stat dd.cm-stat__small {
	font-size: var(--fs-h4);
}

.cm-stats--inline {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-3);
	margin-block: var(--sp-5);
}

.cm-stats--inline .cm-stat {
	padding: var(--sp-4) var(--sp-3);
}

.cm-stats--inline .cm-stat__value {
	font-size: var(--fs-h3);
}

.cm-stats--inline .cm-stat__label {
	font-size: var(--fs-xs);
}

.cm-stats--row {
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.cm-stats--row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15.5 Misión y visión */
.cm-mv {
	display: grid;
	gap: var(--sp-5);
}

.cm-mv__item {
	padding: var(--sp-6);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.cm-mv__item p:last-child {
	margin-bottom: 0;
}

.cm-mv__item--dark {
	background: var(--c-ink);
	color: #d5d9df;
}

.cm .cm-mv__item--dark h3 {
	color: var(--c-white);
}

.cm-mv__icon,
.cm-feature__icon,
.cm-channel__icon {
	display: block;
	margin-bottom: var(--sp-3);
	color: var(--c-brand-strong);
	line-height: 0;
}

.cm-mv__item--dark .cm-mv__icon {
	color: var(--c-brand);
}

.cm-mv__icon .cm-icon,
.cm-feature__icon .cm-icon,
.cm-channel__icon .cm-icon {
	width: 26px;
	height: 26px;
}

.cm .cm-quote {
	max-width: 62ch;
	margin: var(--sp-7) auto 0;
	color: var(--c-ink);
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: 1.55;
}

@media (min-width: 860px) {
	.cm-mv {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 15.6 Tarjetas de característica */
.cm-features {
	display: grid;
	gap: var(--sp-5);
}

.cm-feature {
	height: 100%;
	padding: var(--sp-6);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.cm-feature p:last-child,
.cm-feature ul:last-child {
	margin-bottom: 0;
}

.cm .cm-feature__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-h4);
}

.cm .cm-feature__kicker {
	margin: 0 0 var(--sp-1);
	color: var(--c-brand-strong);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

/* Variante naranja: texto tinta (5,08:1) */
.cm-feature--brand {
	background: var(--c-brand);
	color: var(--c-ink);
}

.cm-feature--brand .cm-feature__icon {
	color: var(--c-ink);
}

.cm .cm-feature--brand .cm-feature__kicker,
.cm .cm-feature--brand a,
.cm-feature--brand .cm-checklist .cm-icon {
	color: var(--c-ink);
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-feature--brand a:hover {
		color: var(--c-ink);
	}
}

.cm .cm-feature--brand :focus-visible {
	outline-color: var(--c-ink);
}

.cm-feature--plain {
	padding: 0;
	background: none;
}

@media (min-width: 720px) {
	.cm-features--2,
	.cm-features--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cm-features--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15.7 Listas de chequeo y acciones */
.cm-checklist {
	display: grid;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}

.cm-checklist li {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
}

.cm-checklist .cm-icon {
	margin-top: 0.15em;
	color: var(--c-brand-strong);
}

.cm-checklist--light .cm-icon {
	color: var(--c-brand);
}

.cm-checklist--lg {
	gap: var(--sp-4);
	font-size: var(--fs-lg);
}

.cm-actions,
.cm-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.cm-btn__meta {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	opacity: 0.85;
}

/* 15.8 Navegación dentro de la página */
.cm-subnav {
	position: sticky;
	top: var(--header-h);
	z-index: 20;
	box-shadow: var(--shadow-sm);
	background: var(--c-white);
}

.cm-subnav ul {
	display: flex;
	gap: var(--sp-2);
	margin: 0;
	margin-inline: calc(var(--gutter) * -1);
	padding: var(--sp-3) var(--gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--gutter);
	scroll-snap-type: x proximity;
	list-style: none;
	scrollbar-width: none;
}

.cm-subnav ul::-webkit-scrollbar {
	display: none;
}

.cm-subnav li {
	flex-shrink: 0;
	scroll-snap-align: start;
}

.cm .cm-subnav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--sp-4);
	background: var(--c-surface);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-subnav a:hover {
		background: var(--c-brand-tint);
		color: var(--c-ink);
	}
}

:where(#pasajeros, #horarios, #encomiendas, #estaciones, #empresas, #agencias-lista, #preguntas-frecuentes) {
	scroll-margin-top: calc(var(--header-h) + 72px);
}

/* 15.9 Buscador (agencias y destinos) */
.cm-filter {
	max-width: 560px;
	margin-bottom: var(--sp-6);
}

.cm-filter[hidden] {
	display: none;
}

.cm-filter__label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-ink);
	font-weight: var(--fw-bold);
}

.cm-filter__field {
	position: relative;
}

.cm-filter__field .cm-icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--c-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.cm .cm-filter__field .cm-field__input {
	width: 100%;
	padding-left: 2.9rem;
}

.cm .cm-filter__status {
	margin: var(--sp-2) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.cm-routes__empty {
	padding: var(--sp-5);
	border-radius: var(--radius);
	background: var(--c-white);
	color: var(--c-muted);
}

.cm-routes__empty[hidden],
[data-search][hidden] {
	display: none !important;
}

/* 15.10 Rutas y horarios */
.cm-routes {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-route {
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.cm-route__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-3);
}

.cm-route__code {
	padding: 0.2em 0.7em;
	border-radius: var(--radius-pill);
	background: var(--c-ink);
	color: var(--c-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
}

.cm .cm-route__title {
	margin: 0;
	font-size: var(--fs-h4);
}

.cm-route__leg + .cm-route__leg {
	margin-top: var(--sp-5);
}

.cm .cm-route__stops,
.cm .cm-route__note {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-start;
	margin: 0 0 var(--sp-3);
	color: var(--c-ink);
	font-weight: var(--fw-medium);
}

.cm-route__stops .cm-icon,
.cm-route__note .cm-icon {
	margin-top: 0.15em;
	color: var(--c-brand-strong);
}

.cm .cm-route__note {
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-sm);
	background: var(--c-brand-soft);
	color: var(--c-brand-deep);
	font-weight: var(--fw-bold);
}

.cm-times {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-times li {
	padding: 0.3em 0.75em;
	border-radius: var(--radius-sm);
	background: var(--card-inset);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.cm .cm-note {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-start;
	margin: var(--sp-5) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.cm-note .cm-icon {
	color: var(--c-brand-strong);
}

@media (min-width: 900px) {
	.cm-routes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

/* Portada: destinos y servicios en tres columnas */
.cm-split__figure {
	margin: var(--sp-6) 0 0;
}

.cm-split__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.cm-destinos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-destinos li {
	padding: 0.4em 0.9em;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.1);
	color: var(--c-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

@media (min-width: 1024px) {
	.cm-services--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cm-services__docs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
}

/* 15.11 Oficinas */
.cm-offices {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-office {
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.cm .cm-office__city {
	margin: 0 0 var(--sp-1);
	color: var(--c-brand-strong);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.cm .cm-office__name {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-h4);
}

.cm-office__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-office__list li,
.cm .cm-agency__row {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	margin: 0 0 var(--sp-2);
}

.cm-office__list .cm-icon,
.cm-agency__row .cm-icon {
	width: 18px;
	height: 18px;
	margin-top: 0.2em;
	color: var(--c-brand-strong);
}

@media (min-width: 720px) {
	.cm-offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.cm-offices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15.12 Agencias */
.cm-agencies {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-agency,
.cm-office,
.cm-route {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cm-agency {
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	background: var(--card);
}

.cm .cm-agency__name {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-base);
}

.cm .cm-agency__row {
	font-size: var(--fs-sm);
}

.cm .cm-agency__row--muted {
	margin-bottom: 0;
	color: var(--c-muted);
}

@media (min-width: 600px) {
	.cm-agencies {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cm-agencies {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15.13 Canales de contacto */
.cm-channels {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-channel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-1);
	padding: var(--sp-6);
	border-radius: var(--radius-lg);
	background: var(--card);
	overflow-wrap: anywhere;
}

.cm .cm-channel h3 {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-h4);
}

.cm-channel a {
	font-weight: var(--fw-bold);
}

.cm-channel__muted {
	margin-top: var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

@media (min-width: 900px) {
	.cm-channels {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15.14 Documentos */
.cm-docs-groups {
	display: grid;
	gap: var(--sp-7);
}

.cm .cm-docs-group__title {
	font-size: var(--fs-h3);
}

.cm-docs {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm .cm-doc {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	min-height: 72px;
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--c-ink);
	text-decoration: none;
	transition: transform var(--t-fast) var(--ease);
}

.cm .cm-doc:active,
.cm .cm-aviso:active,
.cm-postnav a:active {
	transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-doc:hover {
		background: var(--c-brand-tint);
		color: var(--c-ink);
	}
}

.cm-doc__icon {
	flex-shrink: 0;
	color: var(--c-brand-strong);
	line-height: 0;
}

.cm-doc__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.cm-doc__title {
	font-weight: var(--fw-bold);
	line-height: 1.35;
}

.cm-doc__meta {
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.cm-doc__action {
	color: var(--c-brand-strong);
}

@media (min-width: 900px) {
	.cm-docs-group .cm-docs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 15.15 Varios: FAQ, destacado, galería */
.cm .cm-faq__group {
	margin: var(--sp-6) 0 var(--sp-2);
	font-size: var(--fs-h4);
}

.cm .cm-h3 {
	margin-top: var(--sp-6);
	font-size: var(--fs-h3);
}

.cm-highlight {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
	align-items: center;
	padding: var(--sp-5) var(--sp-6);
	border-radius: var(--radius-lg);
	background: var(--c-brand);
	color: var(--c-ink);
}

.cm-highlight__value {
	font-size: var(--fs-display);
	font-weight: var(--fw-black);
	line-height: 1;
}

.cm-highlight__text {
	flex: 1 1 16rem;
	font-weight: var(--fw-medium);
}

.cm-gallery {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

@media (min-width: 600px) {
	.cm-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.cm-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 15.16 Pie: razón social y líneas de servicio */
.cm .cm-footer__razon {
	margin: 0 0 var(--sp-3);
	color: #aab1bb;
	font-size: var(--fs-sm);
}

.cm-footer__lineas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}

.cm-footer__lineas li {
	padding: 0.2em 0.7em;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.1);
	color: var(--c-footer-text);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

/* ==========================================================================
   16. Aviso destacado en la portada (noticia fijada)
   ========================================================================== */
.cm-aviso-wrap {
	margin-top: var(--sp-6);
}

.cm .cm-aviso {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
	align-items: center;
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-lg);
	background: var(--c-brand-tint);
	color: var(--c-ink);
	text-decoration: none;
	transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.cm .cm-aviso:hover {
		background: #ffd2bb;
		color: var(--c-ink);
	}
}

.cm-aviso__badge,
.cm-aviso__more {
	flex-shrink: 0;
}

.cm-aviso__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.3em 0.8em;
	border-radius: var(--radius-pill);
	background: var(--c-ink);
	color: var(--c-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.cm-aviso__badge .cm-icon {
	color: var(--c-brand);
}

.cm-aviso__body {
	display: flex;
	flex: 1 1 18rem;
	flex-direction: column;
	min-width: 0;
}

.cm-aviso__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--fs-lg);
	line-height: 1.3;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.cm-aviso__meta {
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.cm-aviso__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-brand-deep);
	font-weight: var(--fw-bold);
}

/* ==========================================================================
   13. Movimiento reducido (global)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cm *,
	.cm *::before,
	.cm *::after {
		animation: none !important;
		transition: none !important;
	}

	.cm :active {
		transform: none !important;
	}

	.cm .cm-menu .sub-menu {
		transform: none;
	}
}

/* ==========================================================================
   14. Impresión
   ========================================================================== */
@media print {
	.cm-header,
	.cm-whatsapp,
	.cm-nav-toggle,
	.cm-footer__seals {
		display: none !important;
	}

	.cm-footer {
		background: none;
		color: #000;
	}
}

/* ==========================================================================
   17. Objetivos táctiles: enlaces de lista con 44 px de alto en pantallas táctiles
   ========================================================================== */
@media (pointer: coarse) {
	.cm-footer__list {
		gap: var(--sp-1);
	}

	.cm-footer__list li {
		align-items: center;
	}

	.cm-footer__list a,
	.cm-footer__menu a,
	.cm-office__list a,
	.cm-alert__channels a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.cm-breadcrumb a {
		display: inline-block;
		padding-block: var(--sp-2);
	}

	.cm .cm-link {
		min-height: 44px;
	}
}

/* ==========================================================================
   18. Movimiento: solo transform y opacity, una sola vez, y nada con movimiento reducido
   ========================================================================== */
@keyframes cm-subir {
	from {
		opacity: 0;
		transform: translateY(var(--cm-sube, 16px));
	}
}

@keyframes cm-fundir {
	from {
		opacity: 0;
	}
}

@media screen and (prefers-reduced-motion: no-preference) {
	/* 18.1 Portada: título, texto, botones en una sola ola; la foto y el formulario no se mueven */
	.cm-hero__title {
		--cm-sube: 20px;
		animation: cm-subir 560ms var(--ease) backwards;
	}

	.cm-hero__lead {
		--cm-sube: 14px;
		animation: cm-subir var(--t-entrada) var(--ease) 70ms backwards;
	}

	.cm-hero__actions {
		--cm-sube: 10px;
		animation: cm-subir 440ms var(--ease) 130ms backwards;
	}

	.cm-hero__slogan,
	.cm-hero__note {
		animation: cm-fundir 300ms var(--ease) 240ms backwards;
	}

	.cm-hero__contacto {
		animation: cm-fundir 300ms var(--ease) 200ms backwards;
	}

	/* El bus llega desde el fondo de la carretera hacia el usuario: un solo gesto de 600 ms.
	   La escena aparece primero con un fundido; el bus se apoya en ella. */
	.cm-hero__pista,
	.cm-hero__resplandor {
		animation: cm-fundir 400ms var(--ease) backwards;
	}

	.cm-hero__vehiculo {
		animation: cm-bus-llega 600ms var(--ease) 80ms backwards;
	}

	@keyframes cm-bus-llega {
		from {
			opacity: 0;
			transform: translate3d(24px, -8px, 0) scale(0.94);
		}
	}

	/* Parallax: cada capa se mueve según su profundidad (data-capa). Lo maneja theme.js. */
	[data-capa] {
		transition: transform 400ms var(--ease);
	}

	/* 18.3 Listado de noticias: la primera fila entra al cargar, el resto al desplazarse */
	.cm-entrada {
		--cm-sube: 12px;
		animation: cm-subir 420ms var(--ease) backwards;
	}

	.cm-entrada:nth-child(2) {
		animation-delay: 60ms;
	}

	.cm-entrada:nth-child(3) {
		animation-delay: 100ms;
	}

	/* 18.4 Al entrar a una noticia: título, datos y foto; el texto se queda quieto para leer */
	.single-post .cm-page-head__title {
		--cm-sube: 16px;
		animation: cm-subir var(--t-entrada) var(--ease) backwards;
	}

	.single-post .cm-page-head__meta {
		animation: cm-fundir 300ms var(--ease) 120ms backwards;
	}

	.single-post .cm-article__media {
		--cm-sube: 12px;
		animation: cm-subir var(--t-entrada) var(--ease) 80ms backwards;
	}

	/* 18.2 Aparición al desplazarse. theme.js solo marca lo que está bajo el pliegue: sin JS no se oculta nada. */
	.cm-reveal {
		opacity: 0;
		transform: translateY(16px);
	}

	.cm-reveal--item {
		transform: translateY(12px);
	}

	.cm-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: opacity var(--t-entrada) var(--ease), transform var(--t-entrada) var(--ease);
	}

	[data-reveal="2"].is-in {
		transition-delay: 70ms;
	}

	/* Retraso por columna, cada vez menor: se lee como una ola */
	@media (min-width: 680px) {
		[data-reveal-group="3"] > :nth-child(3n+2).is-in {
			transition-delay: 60ms;
		}

		[data-reveal-group="3"] > :nth-child(3n).is-in {
			transition-delay: 100ms;
		}
	}
}

/* ==========================================================================
   19. Precio del galón (Servicios › Estaciones de servicio; se edita en wp-admin)
   ========================================================================== */
.cm-galon {
	margin: var(--sp-5) 0 var(--sp-6);
}

.cm .cm-galon__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-lg);
}

.cm-galon__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--sp-4);
}

.cm-galon__estacion {
	min-width: 0;
	padding: var(--sp-5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.04);
}

.cm .cm-galon__lugar {
	margin: 0 0 var(--sp-3);
	color: var(--c-white);
	font-size: var(--fs-base);
	overflow-wrap: anywhere;
}

.cm-galon__lista {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
}

.cm-galon__lista > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-1) var(--sp-3);
}

.cm-galon__lista dt {
	font-size: var(--fs-sm);
}

.cm-galon__lista dd {
	margin: 0;
	color: var(--c-white);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cm .cm-galon__fecha {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-xs);
}

/* ==========================================================================
   20. Ventana de promociones vigentes (wp-admin › Promociones)
   ========================================================================== */
.cm-promo {
	width: min(34rem, calc(100% - 2 * var(--gutter)));
	max-height: calc(100dvh - 2 * var(--sp-5));
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-lg);
	color: var(--c-text);
	overscroll-behavior: contain;
}

.cm-promo::backdrop {
	background: rgba(15, 18, 22, 0.6);
}

.cm-promo__cerrar-form {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 0;
	text-align: right;
}

.cm .cm-promo__cerrar {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: var(--sp-2);
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-white);
	box-shadow: var(--shadow-sm);
	color: var(--c-ink);
	cursor: pointer;
}

.cm .cm-promo__encabezado {
	margin: 0;
	padding: var(--sp-5) calc(44px + var(--sp-4)) 0 var(--sp-5);
	font-size: var(--fs-h4);
}

.cm-promo__lista {
	display: grid;
}

.cm-promo__item + .cm-promo__item {
	border-top: 1px solid var(--c-line);
}

.cm-promo__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 22rem;
	object-fit: cover;
}

.cm-promo__body {
	padding: var(--sp-5);
}

.cm-promo__item:first-child:not(:has(.cm-promo__media)) .cm-promo__body {
	padding-right: calc(44px + var(--sp-4));
}

.cm .cm-promo__titulo {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h3);
	overflow-wrap: anywhere;
}

.cm .cm-promo__lista h3.cm-promo__titulo {
	font-size: var(--fs-lg);
}

.cm-promo__texto {
	overflow-wrap: anywhere;
}

.cm-promo__texto > :last-child {
	margin-bottom: 0;
}

.cm .cm-promo__vigencia {
	margin: var(--sp-3) 0 0;
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.cm-promo__boton {
	margin-top: var(--sp-4);
}

/* Entra con un fundido y 12 px; se cierra al instante (el usuario ya decidió) */
@media screen and (prefers-reduced-motion: no-preference) {
	.cm-promo[open] {
		animation: cm-promo-entra 320ms var(--ease) backwards;
	}

	.cm-promo[open]::backdrop {
		animation: cm-fundir 240ms var(--ease) backwards;
	}

	@keyframes cm-promo-entra {
		from {
			opacity: 0;
			transform: translateY(12px);
		}
	}
}