/* =========================================================
   Autovía del Mercosur — estilos del front
   1. Tipografías
   2. Tokens
   3. Base y utilidades
   4. Header
   5. Hero
   6. Tarjetas
   7. Contador
   8. Novedades
   9. Footer
   10. Páginas internas
   11. Contenido genérico
   12. Mapa del corredor
   13. Animaciones de entrada
   ========================================================= */

/* 1. Tipografías ---------------------------------------- */

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/jost.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/jost-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Asap';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/asap.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Asap';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/asap-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens --------------------------------------------- */

:root {
	--am-orange: #f58125;
	--am-orange-soft: #e58a3d;
	--am-orange-dark: #d97318;
	--am-dark: #35363a;
	--am-dark-2: #2c2d31;
	--am-green: #185c2e;
	--am-whatsapp: #4caf50;
	--am-blue: #1d4e9c;
	--am-red: #c62828;
	--am-gray-bg: #e9ebed;
	--am-cream: #fff0e5;
	--am-gray-line: #d8dade;
	--am-text: #35363a;
	--am-text-soft: #6b6d73;
	--am-white: #fff;

	--am-font-title: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--am-font-body: 'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--am-wrap: 1200px;

	/* Caja ancha que comparten header y footer, que respiran más que el
	   contenido. Es una sola medida a propósito: antes cada uno tenía la suya
	   —el header 1660px con 30px parejos, el footer 1500px con 88px a la
	   izquierda y 40px a la derecha, copiados de una medición del diseño a
	   1470px— y así no alineaban en ningún ancho salvo el del mockup. */
	--am-wrap-ancho: 1500px;
	--am-wrap-ancho-pad: 30px;
	--am-header-h: 112px;
	--am-header-pad: 16px;
	/* Los pills de 140 y Telepase se igualan por el alto, no por el ancho: los
	   dos dibujos tienen proporciones distintas y con el mismo ancho uno queda
	   más alto que el otro. Una sola medida para los dos. */
	--am-header-logo-h: 49px;
	--am-radius: 3px;
	--am-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Tiempos. Antes cada transición elegía el suyo (0,2 · 0,22 · 0,25 · 0,3 ·
	   0,35), y sin un criterio común el sitio se siente hecho de pedazos. */
	--am-dur-rapida: 0.2s;
	--am-dur-media: 0.3s;
	--am-dur-lenta: 0.5s;

	/* Arranca rápido y frena largo: es lo que hace que una entrada se lea como
	   "apareció" y no como "se deslizó". */
	--am-ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Base ----------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--am-white);
	color: var(--am-text);
	font-family: var(--am-font-body);
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--am-orange);
	text-decoration: none;
	transition: color var(--am-dur-rapida) var(--am-ease);
}

a:hover {
	color: var(--am-orange-dark);
}

h1,
h2,
h3,
h4 {
	font-family: var(--am-font-title);
	color: var(--am-dark);
	margin: 0 0 0.6em;
	line-height: 1.15;
	font-weight: 700;
}

p {
	margin: 0 0 1.1em;
}

button {
	font-family: inherit;
}

:focus-visible {
	outline: 3px solid var(--am-orange);
	outline-offset: 2px;
}

.am-wrap {
	width: 100%;
	max-width: var(--am-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* El header es fijo: el contenido arranca siempre por debajo, haya o no
   banner de cabecera cargado.

   La franja que queda detrás del header se pinta del color del header. Sin
   esto, cualquier redondeo de subpíxel (zoom del navegador, pantallas con
   escalado fraccionario) deja asomar el blanco del body como una línea entre
   el header y el hero. Pintada, cualquier costura se confunde con el header. */
#am-main {
	padding-top: var(--am-header-h);
	background: linear-gradient(
		var(--am-dark) 0 var(--am-header-h),
		transparent var(--am-header-h)
	);
}

/* Cualquier enlace a un ancla (#contacto, #codigo-web, #exenciones…) tiene que
   frenar por debajo del header, no detrás. */
[id] {
	scroll-margin-top: calc(var(--am-header-h) + 16px);
}

.am-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.am-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--am-orange);
	color: #fff;
	padding: 12px 20px;
}

.am-skip:focus {
	left: 8px;
	top: 8px;
	color: #fff;
}

/* Botón base */
.am-btn {
	display: inline-block;
	font-family: var(--am-font-title);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
	background: var(--am-orange-soft);
	padding: 17px 40px;
	border: 0;
	border-radius: var(--am-radius);
	cursor: pointer;
	transition: background var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease);
}

.am-btn:hover {
	background: var(--am-orange-dark);
	color: #fff;
	transform: translateY(-2px);
}

/* Título de sección */
.am-section-title {
	font-size: clamp(22px, 2.4vw, 29px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 56px;
}

/* 4. Header --------------------------------------------- */

/* Dos estados, uno solo de JavaScript: initHeader() ya pone y saca .is-scrolled
   a partir de los 10px de scroll, así que acá solo cuelga el color.

   Arriba de todo el fondo es el oscuro de siempre. La foto del hero pasa por
   detrás igual —el hero se sube lo que mide el header—, pero no se ve a través:
   el cambio se nota al bajar, cuando el header se pone blanco y flota sobre el
   contenido. */
.am-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	background: var(--am-dark);
	transition:
		transform var(--am-dur-media) var(--am-ease),
		background var(--am-dur-media) var(--am-ease),
		box-shadow var(--am-dur-media) var(--am-ease);
	will-change: transform;
}

/* Esconderse al bajar es una concesión al alto de pantalla del celular. En
   desktop hay lugar de sobra y el header tiene que quedar siempre a la vista:
   si no, el menú desplegado se va con él apenas se mueve la rueda. El corte es
   1200px, el mismo en el que el nav deja lugar al burger. initHeader() sigue
   poniendo y sacando .is-hidden en las dos medidas; acá se decide si pinta. */
@media (max-width: 1200px) {
	.am-header.is-hidden {
		transform: translateY(-100%);
	}
}

/* Al bajar: fondo blanco, letras oscuras y el otro logo. */
.am-header.is-scrolled {
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

.am-header.is-scrolled .am-nav a,
.am-header.is-scrolled .am-phone,
.am-header.is-scrolled .am-phone:hover {
	color: var(--am-dark);
}

.am-header.is-scrolled .am-nav a:hover,
.am-header.is-scrolled .am-nav .current-menu-item > a,
.am-header.is-scrolled .am-nav .current-menu-parent > a,
.am-header.is-scrolled .am-nav .current-menu-ancestor > a,
.am-header.is-scrolled .am-phone:hover .am-phone__num {
	color: var(--am-orange-dark);
}

.am-header.is-scrolled .am-burger span {
	background: var(--am-dark);
}

/* El gris claro de la bajada del teléfono está pensado para el fondo oscuro:
   sobre blanco casi no se lee. */
.am-header.is-scrolled .am-phone__label {
	color: var(--am-text-soft);
}

/* El panel de celular vive dentro del <header>, así que heredaba los colores
   del estado blanco: los teléfonos quedaban en gris oscuro sobre el fondo
   oscuro del panel, ilegibles. El panel tiene su propia superficie y sus
   propios colores, sin importar en qué estado esté el header. */
.am-header.is-scrolled .am-mobile .am-phone,
.am-header.is-scrolled .am-mobile .am-phone:hover,
.am-header.is-scrolled .am-mobile a {
	color: #fff;
}

.am-header.is-scrolled .am-mobile .am-phone__label {
	color: #cfd0d3;
}

/* El logo: las dos versiones están en el DOM y acá se elige cuál se ve. */
.am-header__logo-img--claro,
.am-header.is-scrolled .am-header__logo-img--oscuro {
	display: none;
}

.am-header.is-scrolled .am-header__logo-img--claro {
	display: block;
}

.am-header__inner {
	max-width: var(--am-wrap-ancho);
	margin: 0 auto;
	padding: var(--am-header-pad) var(--am-wrap-ancho-pad);
	height: var(--am-header-h);
	display: flex;
	align-items: center;
	gap: 24px;
}

.am-header__logo {
	flex: none;
}

.am-header__logo img {
	width: 140px;
	height: auto;
}

/* El menú se centra en el aire que queda entre el logo y el bloque de la
   derecha: los márgenes automáticos reparten el sobrante por igual a ambos
   lados, así que se reequilibra solo si cambian los ítems del menú. */
.am-nav {
	margin-left: auto;
	margin-right: auto;
	min-width: 0;
	align-self: stretch;
}

.am-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: 26px;
}

.am-nav li {
	position: relative;
	display: flex;
}

.am-nav a {
	display: block;
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	/* Llenan el alto en vez de fijar un padding: así el header mide exactamente
	   --am-header-h y el menú se recentra solo si esa altura cambia. */
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
	white-space: nowrap;
}

.am-nav a:hover,
.am-nav .current-menu-item > a,
.am-nav .current-menu-parent > a,
.am-nav .current-menu-ancestor > a {
	color: var(--am-orange);
}

/* Subrayado del ítem actual, como en el diseño. */
.am-nav > ul > .current-menu-item > a::before,
.am-nav > ul > .current-menu-parent > a::before,
.am-nav > ul > .current-menu-ancestor > a::before,
.am-nav > ul > .current_page_item > a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 11px);
	height: 2px;
	background: var(--am-orange);
}

/* Flechita de los submenús */
.am-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--am-dur-media) var(--am-ease);
}

.am-nav .menu-item-has-children:hover > a::after,
.am-nav .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}

.am-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 250px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--am-dark-2);
	padding: 8px 0;
	/* Sin esto hereda el height: 100% de .am-nav ul (el alto del header) y el
	   fondo gris corta a la mitad de la lista. */
	height: auto;
	border-top: 3px solid var(--am-orange);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--am-dur-rapida) var(--am-ease), transform var(--am-dur-rapida) var(--am-ease), visibility var(--am-dur-rapida);
}

.am-nav li:hover > .sub-menu,
.am-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.am-nav .sub-menu a {
	height: auto;
	padding: 12px 24px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: none;
	white-space: normal;
}

.am-nav .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.06);
}

/* Con el header en blanco el panel también va en blanco. Las letras del
   submenú ya vienen en oscuro de `.am-header.is-scrolled .am-nav a`, así que
   sobre el gris oscuro quedaban ilegibles. El borde de 1px lo despega del
   contenido de la página, que abajo también es blanco: solo con la sombra el
   panel se confunde con el fondo. */
.am-header.is-scrolled .am-nav .sub-menu {
	background: #fff;
	border-right: 1px solid var(--am-gray-line);
	border-bottom: 1px solid var(--am-gray-line);
	border-left: 1px solid var(--am-gray-line);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.am-header.is-scrolled .am-nav .sub-menu a:hover {
	background: var(--am-gray-bg);
}

.am-header__aside {
	/* El centrado del menú ya lo empuja a la derecha: un margin-left: auto acá
	   competiría con el del nav y lo descentraría. */
	display: flex;
	align-items: center;
	gap: 22px;
	/* Sin esto los logos se comprimen cuando el menú es largo. */
	flex: none;
}

.am-header__140 {
	flex: none;
	line-height: 0;
}

.am-header__140 img,
.am-header__telepase img {
	height: var(--am-header-logo-h);
	width: auto;
	max-width: none;
}

.am-phone {
	flex: none;
	display: flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	font-family: var(--am-font-body);
	line-height: 1.2;
}

.am-phone:hover {
	color: #fff;
}

.am-phone:hover .am-phone__num {
	color: var(--am-orange);
}

.am-phone svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: var(--am-orange);
}

.am-phone__num {
	display: block;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	transition: color var(--am-dur-rapida) var(--am-ease);
}

.am-phone__label {
	display: block;
	font-size: 12px;
	color: #cfd0d3;
}

.am-header__telepase {
	flex: none;
	line-height: 0;
}

/* El panel mobile solo existe por debajo de 1024px. */
.am-mobile {
	display: none;
}

.am-burger {
	display: none;
	margin-left: auto;
	width: 46px;
	height: 46px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 11px 9px;
}

.am-burger span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--am-dur-media) var(--am-ease), opacity var(--am-dur-rapida) var(--am-ease);
}

.am-burger span + span {
	margin-top: 6px;
}

.am-burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.am-burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.am-burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* 5. Hero ----------------------------------------------- */

/* El header flota sobre la foto: el hero se sube justo lo que mide el header,
   así la imagen llega hasta el borde de arriba de la pantalla.

   Va acá y no en #am-main a propósito: Novedades, 404 y singular.php no imprimen
   ningún hero y necesitan conservar el padding de #am-main. Si el salto viviera
   en el contenedor general, a esas tres el título se les metería bajo el header. */
.am-hero {
	position: relative;
	margin-top: calc(-1 * var(--am-header-h));
	background: var(--am-dark);
	overflow: hidden;
}

.am-hero__track {
	position: relative;
	height: clamp(420px, 44vw, 640px);
	padding-top: var(--am-header-h);
	box-sizing: content-box;
}

.am-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s var(--am-ease), visibility 0.8s;
}

.am-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.am-hero__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-hero__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.08) 100%);
}

.am-hero__content {
	position: relative;
	/* El bloque queda 30px por debajo del centro óptico del slide. */
	top: 30px;
	z-index: 2;
	height: 100%;
	/* Más angosto que --am-wrap: en el diseño el bloque de texto arranca en
	   x=281 sobre 1470px y mide 909px de ancho, no los 1200 del resto. */
	max-width: 948px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 34px;
}

.am-hero__title {
	max-width: 900px;
	margin: 0;
	color: #fff;
	font-family: var(--am-font-title);
	font-weight: 500;
	font-size: clamp(24px, 2.9vw, 42px);
	line-height: 1.32;
	letter-spacing: 0;
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* El botón del hero es mucho más grande que el de las secciones. */
.am-hero .am-btn {
	font-weight: 500;
	font-size: 21px;
	line-height: 66px;
	padding: 0 41px;
}

.am-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.06);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--am-dur-media) var(--am-ease);
}

.am-hero__arrow:hover {
	background: rgba(255, 255, 255, 0.2);
}

.am-hero__arrow::before {
	content: '';
	width: 14px;
	height: 14px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.am-hero__arrow--prev {
	left: 22px;
}

.am-hero__arrow--prev::before {
	transform: translateX(3px) rotate(-135deg);
}

.am-hero__arrow--next {
	right: 22px;
}

.am-hero__arrow--next::before {
	transform: translateX(-3px) rotate(45deg);
}

.am-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 3;
	transform: translateX(-50%);
	display: flex;
	gap: 11px;
}

.am-hero__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease);
}

.am-hero__dot.is-active {
	background: #fff;
	transform: scale(1.12);
}

/* 5b. Estados de la ruta -------------------------------- */

/* Las dos cintas comparten grilla para que los rótulos midan lo mismo y las
   frases arranquen a la misma altura. Sin esto, "EMERGENCIAS" y "ESTADO DE LA
   RUTA" cortan en distinto punto y el borde queda dentado. */
.am-estados-grupo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

/* Cinta que corre bajo el hero. El rótulo queda fijo a la izquierda y la
   cinta ocupa el resto: por eso grid con la primera columna al contenido.

   Los colores salen de estas variables y no de valores sueltos: la versión de
   emergencias es cambiarlas, no copiar el bloque entero. */
.am-estados {
	--am-cinta-bg: var(--am-orange);
	--am-cinta-texto: var(--am-dark-2);
	--am-cinta-luz: var(--am-orange);
	--am-cinta-halo: rgba(245, 129, 37, 0.55);

	display: grid;
	align-items: stretch;
	background: var(--am-cinta-bg);

	/* La medida propia es el respaldo: donde no haya subgrid cada cinta mide su
	   rótulo por su cuenta y se ve como antes, sin romperse. */
	grid-column: 1 / -1;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-columns: subgrid;
}

/* Rojo y texto blanco: el rojo de alerta con el texto oscuro de la naranja da
   2,2:1 de contraste y no se lee. El rótulo sigue oscuro en las dos, que es lo
   que las hermana como una sola pieza. */
.am-estados--emergencia {
	--am-cinta-bg: var(--am-red);
	--am-cinta-texto: #fff;
	--am-cinta-luz: #fff;
	--am-cinta-halo: rgba(255, 255, 255, 0.5);
}

.am-estados--sin-rotulo {
	grid-template-columns: minmax(0, 1fr);
}

.am-estados__rotulo {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 26px;
	background: var(--am-dark-2);
	color: #fff;
	font-family: var(--am-font-title);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	gap: 11px;
}

/* Luz que parpadea antes del rótulo: da la idea de información viva. Toma el
   color de la cinta, así la de emergencias late en blanco sobre el rojo. */
.am-estados__rotulo::before {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--am-cinta-luz);
	border-radius: 50%;
	animation: am-estados-latido 1.6s ease-in-out infinite;
}

/* Parpadeo suave, no un encendido/apagado seco: el ciclo lento y la opacidad
   que no llega a cero lo mantienen del lado del aviso y no de la alarma. */
@keyframes am-estados-latido {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 var(--am-cinta-halo);
	}

	50% {
		opacity: 0.35;
		box-shadow: 0 0 0 5px transparent;
	}
}

/* La ventana que recorta la pista. overflow hidden es lo que crea el efecto:
   la pista es más ancha que la pantalla y solo se ve el pedazo que pasa. */
.am-estados__cinta {
	overflow: hidden;
	min-width: 0;
	padding: 13px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 42px, #000 calc(100% - 42px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 42px, #000 calc(100% - 42px), transparent);
}

.am-estados__track {
	display: flex;
	width: max-content;
	animation: am-estados-marquee var(--am-estados-dur, 40s) linear infinite;
}

/* Al pasar el mouse se frena, así se puede leer una frase larga completa. */
.am-estados:hover .am-estados__track,
.am-estados__track:focus-within {
	animation-play-state: paused;
}

.am-estados__lista {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-estados__item {
	display: flex;
	align-items: center;
	color: var(--am-cinta-texto);
	font-family: var(--am-font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}

/* El rombo separador es decorativo: va en ::before para que no lo lean los
   lectores de pantalla, que dirían "diamante" antes de cada frase. */
.am-estados__item::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0 22px;
	background: var(--am-cinta-texto);
	transform: rotate(45deg);
	opacity: 0.55;
}

/* Una sola frase: no hay nada que rotar. Queda quieta y centrada, sin rombo
   —no separa de nada— y con permiso para bajar de renglón: un aviso largo en
   celular se cortaría contra el borde en vez de doblar. */
.am-estados--fija .am-estados__track {
	width: 100%;
	animation: none;
}

.am-estados--fija .am-estados__lista {
	flex: 1 1 auto;
	justify-content: center;
}

.am-estados--fija .am-estados__cinta {
	padding: 13px 22px;
	-webkit-mask-image: none;
	mask-image: none;
}

.am-estados--fija .am-estados__item {
	white-space: normal;
	text-align: center;
}

.am-estados--fija .am-estados__item::before {
	display: none;
}

/* -50% es exactamente el ancho de una de las dos copias de la lista: al llegar
   ahí la segunda quedó donde arrancó la primera y el salto no se ve. */
@keyframes am-estados-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Quien pidió menos movimiento no ve la cinta correr: se queda quieta y se
   puede recorrer a mano. */
@media (prefers-reduced-motion: reduce) {
	.am-estados__track {
		animation: none;
	}

	/* La luz se queda prendida en vez de parpadear. */
	.am-estados__rotulo::before {
		animation: none;
	}

	.am-estados__cinta {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* La segunda copia sobra si no hay animación, y el lector la ignoraría igual. */
	.am-estados__lista[aria-hidden='true'] {
		display: none;
	}
}

@media (max-width: 700px) {
	/* En pantalla angosta el rótulo se comería la cinta: pasa arriba, centrado.
	   La envoltura baja a una columna y cada cinta apila sus dos filas. */
	.am-estados-grupo,
	.am-estados {
		grid-template-columns: minmax(0, 1fr);
	}

	.am-estados__rotulo {
		justify-content: center;
		padding: 9px 20px;
		font-size: 13px;
	}

	.am-estados__item {
		font-size: 14px;
	}
}

/* 6. Tarjetas ------------------------------------------- */

.am-cards {
	padding: 78px 0 92px;
	background: #e2e2e2;
}

.am-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.am-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	padding: 34px 26px 24px;
	/* La caja mide un 10% menos que su columna; el contenido no cambia. */
	width: 90%;
	justify-self: center;
	min-height: 279px;
	color: inherit;
	transition: transform var(--am-dur-media) var(--am-ease), box-shadow var(--am-dur-media) var(--am-ease);
}

.am-card:hover {
	color: inherit;
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(53, 54, 58, 0.14);
}

.am-card__icon {
	height: 66px;
	display: grid;
	place-items: center;
	margin-bottom: 26px;
}

.am-card__icon img {
	max-height: 66px;
	width: auto;
}

.am-card__title {
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.am-card__text {
	margin: 0;
	font-size: 16px;
	color: var(--am-text);
	line-height: 1.5;
	/* Reparte el texto entre las líneas en vez de llenar la primera: así no
	   queda una última línea con una sola palabra suelta ("… 24 / hs"). */
	text-wrap: balance;
}

.am-card__dots {
	margin-top: auto;
	padding-top: 24px;
	color: var(--am-orange);
	letter-spacing: 0.22em;
	font-size: 20px;
	line-height: 1;
	opacity: 0.55;
	transition: opacity var(--am-dur-media) var(--am-ease);
}

.am-card:hover .am-card__dots {
	opacity: 1;
}

/* 7. Contador ------------------------------------------- */

.am-contador {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 35px 0;
	padding: 82px 0;
	min-height: 275px;
	background: var(--am-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.am-contador::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 8, 0.18);
}

.am-contador__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	text-align: center;
}

.am-contador__num {
	display: block;
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: clamp(34px, 4vw, 50px);
	line-height: 1.05;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.am-contador__label {
	display: block;
	margin-top: 10px;
	font-size: 19px;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* 8. Novedades ------------------------------------------ */

.am-novedades {
	padding: 84px 0 96px;
	background: #fff;
}

/* La volanta y el título comparten la tipografía de las páginas internas;
   el margen de la sección vive acá y no en el <h2>. */
.am-novedades__head {
	margin-bottom: 56px;
}

.am-novedades__head .am-titulo {
	margin-bottom: 0;
}

.am-novedades__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px;
}

/* Las tres tarjetas miden lo mismo y el "Leer más" cae siempre al pie. */
.am-novedad {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	padding: 18px 18px 26px;
	transition: transform var(--am-dur-media) var(--am-ease), box-shadow var(--am-dur-media) var(--am-ease);
}

/* El enlace del título se estira sobre toda la tarjeta: un clic en cualquier
   lugar —foto, texto o "Leer más"— abre la nota. */
.am-novedad__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Los enlaces propios quedan por encima para conservar su hover y su foco. */
.am-novedad__img,
.am-novedad__more {
	position: relative;
	z-index: 2;
}

/* Sólo con mouse: en táctil no hay hover que mostrar. */
@media (hover: hover) and (pointer: fine) {
	.am-novedad:hover {
		transform: translateY(-6px);
		box-shadow: 0 16px 34px rgba(53, 54, 58, 0.14);
	}
}

/* La caja toma la proporción del archivo (760x500) y la imagen entra entera:
   con recorte cuadrado se perdían 130px de cada lado y quedaban tapados los
   textos de las piezas. */
.am-novedad__img {
	display: block;
	margin-bottom: 22px;
	overflow: hidden;
	background: var(--am-gray-bg);
	aspect-ratio: 76 / 50;
}

.am-novedad__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--am-dur-lenta) var(--am-ease);
}

.am-novedad:hover .am-novedad__img img {
	transform: scale(1.05);
}

.am-novedad__title {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 16px;
}

.am-novedad__title a {
	color: var(--am-dark);
}

.am-novedad__title a:hover {
	color: var(--am-orange);
}

.am-novedad__excerpt {
	color: var(--am-text);
	margin-bottom: 18px;
}

.am-novedad__more {
	margin-top: auto;
	align-self: flex-start;
	font-weight: 500;
	font-size: 21px;
	color: var(--am-orange);
}

.am-novedades__cta {
	margin-top: 62px;
	text-align: center;
}

.am-novedades__cta .am-btn {
	min-width: 320px;
}

/* 9. Footer --------------------------------------------- */

/* Pegada al footer: sin el margen que arrastra de la regla global de <p>
   quedaba una franja blanca entre las dos. */
.am-update {
	margin: 0;
	background: #9d9a94;
	color: #fff;
	text-align: center;
	font-size: 15px;
	padding: 8px 16px;
}

.am-footer {
	background: var(--am-dark);
	color: #fff;
	padding: 46px 0 34px;
	font-size: 15px;
}

/* El footer respira más ancho que el contenido, igual que en el diseño, y usa
   exactamente la misma caja que el header: es lo que hace que el logo de arriba
   y el de abajo arranquen en la misma x en cualquier pantalla. */
.am-footer .am-wrap {
	max-width: var(--am-wrap-ancho);
	padding: 0 var(--am-wrap-ancho-pad);
}

.am-footer a {
	color: #fff;
}

.am-footer a:hover {
	color: var(--am-orange);
}

/* Las marcas son la última columna, al costado de la navegación: los dos
   botones arriba y los institucionales en la fila de abajo, como en el diseño.
   Los anchos de las columnas de texto son desiguales a propósito: "Oficina
   Virtual" tiene los renglones más largos y con columnas iguales se parte. */
/* Los máximos son las medidas del diseño; los mínimos dejan que las columnas se
   encojan parejas en pantallas de 1280 o 1366 en vez de mandar todo abajo.
   La última va a 1fr y no a un máximo fijo: con un tope duro las cinco columnas
   sumaban menos que la grilla y el sobrante —68px en una pantalla de 1470— se
   juntaba todo al final, así que el footer terminaba antes del canto derecho y
   los márgenes quedaban desparejos. Estirándola, la fila cierra contra el
   padding y los dos costados miden lo mismo. */
.am-footer__top {
	display: grid;
	grid-template-columns:
		minmax(110px, 128px)
		minmax(150px, 200px)
		minmax(190px, 245px)
		minmax(165px, 215px)
		minmax(408px, 1fr);
	gap: 20px;
	align-items: start;
}

.am-footer__brands {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	/* La columna es la última de la grilla y se lleva todo el sobrante: sin el
	   tope, los dos botones y los cuatro institucionales quedan desparramados.
	   Con el tope el bloque se compacta y sigue alineado al canto derecho. */
	max-width: 510px;
	margin-left: auto;
}

/* Con las columnas en su medida mínima el bloque pide ~1230px. Por debajo de
   eso la columna de marcas ya no entra al lado de los textos y pasa a una fila
   propia a lo ancho, separada por una línea. */
@media (max-width: 1230px) {
	.am-footer__top {
		grid-template-columns: 170px repeat(3, minmax(0, 1fr));
	}

	.am-footer__brands {
		grid-column: 1 / -1;
		max-width: none;
		margin-left: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 26px;
		padding-top: 26px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.am-footer .am-footer__buttons {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.am-footer .am-footer__buttons > a {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.am-footer .am-footer__buttons img {
		max-width: none;
	}
}

.am-footer__logo img {
	width: 134px;
}

.am-footer__col {
	padding-left: 26px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.am-footer__col:first-of-type {
	border-left: 0;
	padding-left: 0;
}

.am-footer__title {
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}

.am-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.am-footer__col li {
	margin-bottom: 8px;
	font-size: 13.5px;
	line-height: 1.45;
}

.am-footer__col--plain li a {
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.am-footer__col--plain li {
	margin-bottom: 21px;
}

.am-footer__col--dotted li::before {
	content: '· ';
}

.am-footer__extra {
	display: block;
	margin-top: 22px;
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Los dos botones se abren hasta los bordes de la columna, de modo que la fila
   de institucionales de abajo mida exactamente lo mismo. Se reparten el ancho en
   partes iguales y se achican con la columna: sin esto, en pantallas de 1280 no
   entran los dos y el 140 se cae a un segundo renglón. */
.am-footer__buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 22px;
}

.am-footer__buttons > a {
	flex: 1 1 0;
	min-width: 0;
	/* Tope = el ancho natural de la imagen a 88px de alto: no se agranda más. */
	max-width: 237px;
}

/* Los dos pills se igualan por el alto y comparten proporción (190 × 75), así
   que salen del mismo tamaño. Cada uno queda centrado en su mitad de la fila,
   y abajo caen dos institucionales por mitad. */
.am-footer__buttons img {
	display: block;
	margin: 0 auto;
	height: var(--am-footer-logo-h, 88px);
	width: auto;
	max-width: 100%;
}

/* Los institucionales se reparten el mismo ancho que ocupan los dos botones de
   arriba, como en el diseño: por eso space-between y no un gap fijo. */
/* Cuatro celdas iguales: cada institucional queda centrado en la suya y las
   líneas divisorias caen a distancias parejas. Con flex y space-between los
   logos se apoyaban contra su separador, porque cada uno mide distinto. */
.am-footer__orgs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
}

.am-footer__orgs > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0 12px;
}

/* Cada institucional conserva su proporción natural, como en el diseño. El
   max-width frena a Transporte, que es muy apaisado y si no domina la fila. */
.am-footer__orgs img {
	flex: none;
	height: 46px;
	width: auto;
	max-width: 112px;
	object-fit: contain;
	/* Los SVG institucionales vienen en tinta oscura: los pasamos a blanco. */
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.am-footer__orgs a + a {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.am-footer__fiscal img {
	width: auto;
	height: 52px;
	object-fit: contain;
	filter: none;
}

.am-footer__bottom {
	margin-top: 34px;
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 30px;
	align-items: center;
}

.am-social {
	display: flex;
	gap: 12px;
}

.am-social a {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--am-dark);
	transition: background var(--am-dur-media) var(--am-ease), color var(--am-dur-media) var(--am-ease);
}

.am-social a:hover {
	background: var(--am-orange);
	color: #fff;
}

.am-social svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.am-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--am-whatsapp);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 13px 22px;
	border-radius: var(--am-radius);
	transition: background var(--am-dur-media) var(--am-ease);
}

/* El selector lleva .am-footer porque si no gana la regla general
   `.am-footer a:hover`, que pinta de naranja todos los enlaces del footer.
   En hover el texto toma el gris del fondo del footer y el pill queda como
   recortado sobre el verde. */
.am-footer .am-whatsapp:hover {
	background: #43a047;
	color: var(--am-dark);
}

.am-whatsapp svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

.am-copy {
	text-align: center;
	color: #c9cacd;
	font-size: 14px;
	margin: 0;
}

/* 9b. WhatsApp flotante --------------------------------- */

/* Queda fijo abajo a la izquierda, sobre el contenido. El z-index es 90: por
   debajo del header (100) y del menú de celular (99), así no se les monta
   encima cuando el menú está abierto. */
.am-wa {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	background: var(--am-whatsapp);
	color: #fff;
	font-family: var(--am-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
	transition: background var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease);
}

.am-wa:hover {
	background: #43a047;
	color: #fff;
	transform: translateY(-2px);
}

/* Al llegar al footer se va: ahí abajo ya está el botón de WhatsApp del pie y
   los íconos sociales, y el flotante se los montaba encima. Lo pone el JS. */
.am-wa.is-oculto {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease), visibility var(--am-dur-media);
}

.am-wa svg {
	flex: none;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

@media (max-width: 767px) {
	/* En celular el texto taparía media pantalla: queda el círculo con el ícono.
	   El texto sigue en el DOM (.am-sr) porque es el nombre accesible del enlace:
	   sin él, el lector de pantalla anuncia un enlace sin destino claro. */
	.am-wa {
		left: 16px;
		bottom: 16px;
		padding: 15px;
		gap: 0;
	}

	.am-wa__text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-wa:hover {
		transform: none;
	}
}

/* 9c. Asistente virtual --------------------------------- */

/* El botón es el mismo dibujo que el flotante de WhatsApp —misma píldora,
   mismo alto, misma sombra, y en celular el mismo círculo con solo el ícono—
   pero del otro lado de la pantalla y en naranja, para que se lean como dos
   accesos del mismo sistema y no como dos widgets pegados de distinto lugar. */
.am-bot__toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border: 0;
	background: var(--am-orange);
	color: #fff;
	font-family: var(--am-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: background var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease);
}

.am-bot__toggle:hover {
	background: var(--am-orange-dark);
	transform: translateY(-2px);
}

.am-bot__toggle svg {
	flex: none;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* El panel abierto y el botón que lo abre no tienen por qué convivir: mientras
   se conversa, el botón sobra y encima le queda debajo. */
.am-bot__toggle.is-oculto {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease), visibility var(--am-dur-media);
}

.am-bot {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: 560px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--am-dur-media) var(--am-ease), transform var(--am-dur-media) var(--am-ease);
}

.am-bot[hidden] {
	display: none;
}

.am-bot.is-open {
	opacity: 1;
	transform: none;
}

.am-bot__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 15px;
	background: var(--am-orange);
	color: #fff;
}

.am-bot__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.am-bot__avatar svg {
	width: 24px;
	height: 24px;
	fill: #fff;
}

.am-bot__id {
	flex: 1 1 auto;
	min-width: 0;
}

.am-bot__title {
	margin: 0;
	font-family: var(--am-font-title);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.am-bot__status {
	margin: 3px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}

.am-bot__close {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--am-dur-rapida) var(--am-ease);
}

.am-bot__close:hover {
	background: rgba(255, 255, 255, 0.32);
}

.am-bot__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #f6f8fa;
}

.am-bot__body:focus {
	outline: none;
}

.am-bot__intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--am-text-soft);
}

.am-bot__msg {
	max-width: 92%;
	margin: 0;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--am-gray-line);
	border-radius: 14px;
	border-top-left-radius: 4px;
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-line;
}

.am-bot__msg a {
	color: var(--am-orange-dark);
	font-weight: 600;
	text-decoration: underline;
}

.am-bot__options {
	display: grid;
	gap: 8px;
	margin-top: 2px;
}

.am-bot__option {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--am-gray-line);
	border-radius: 12px;
	background: #fff;
	color: var(--am-text);
	font-family: var(--am-font-body);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background var(--am-dur-rapida) var(--am-ease), border-color var(--am-dur-rapida) var(--am-ease);
}

.am-bot__option:hover {
	background: #fff4ea;
	border-color: var(--am-orange);
}

.am-bot__option--volver {
	color: var(--am-orange-dark);
}

.am-bot__note {
	margin: 0;
	padding: 10px 16px 12px;
	border-top: 1px solid var(--am-gray-line);
	background: #fff;
	text-align: center;
	font-size: 11px;
	line-height: 1.4;
	color: var(--am-text-soft);
}

@media (max-width: 767px) {
	/* Mismo trato que el flotante de WhatsApp: queda el círculo con el ícono y
	   el texto sigue en el DOM como nombre accesible del botón. */
	.am-bot__toggle {
		right: 16px;
		bottom: 16px;
		padding: 15px;
		gap: 0;
	}

	.am-bot__toggle-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.am-bot {
		right: 12px;
		left: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		height: auto;
		top: calc(var(--am-header-h) + 12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-bot__toggle:hover {
		transform: none;
	}

	.am-bot {
		transition: none;
	}
}

/* 10. Páginas internas ---------------------------------- */

/* Banner de cabecera */
.am-hero-banner {
	position: relative;
	margin-top: calc(-1 * var(--am-header-h));
	padding-top: var(--am-header-h);
	background: var(--am-dark);
	overflow: hidden;
}

/* El alto es el 75% del original (200/23vw/330): la franja pesaba demasiado
   arriba de todas las internas. El clamp sigue siendo el mismo mecanismo,
   solo bajaron los tres valores en la misma proporción. */
.am-hero-banner img {
	width: 100%;
	height: clamp(150px, 17.25vw, 248px);
	object-fit: cover;
	display: block;
	/* Al 60% la foto se funde con el fondo oscuro de la sección en vez de
	   dominar la página. */
	opacity: 0.6;
}

/* Duotono naranja: primero se lleva la foto a escala de grises y recién
   después se multiplica el naranja. Si se multiplicara sobre el color
   original, una foto con dominante fría (como la de Nosotros) daría un
   marrón sucio en vez del naranja del diseño. */
.am-hero-banner--tinte img {
	filter: grayscale(1) brightness(1.18) contrast(0.92);
}

.am-hero-banner--tinte::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--am-orange);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Tipografía compartida de las páginas internas */
.am-volanta {
	margin: 0 0 14px;
	font-family: var(--am-font-title);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--am-dark);
}

.am-volanta--centro {
	text-align: center;
}

.am-titulo {
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.14;
	letter-spacing: -0.01em;
	margin: 0 0 28px;
}

.am-titulo--centro {
	text-align: center;
}

.am-texto {
	font-size: 17px;
	line-height: 1.7;
}

.am-texto p:last-child {
	margin-bottom: 0;
}

/* Nosotros · Nuestra Misión */
.am-mision {
	padding: 90px 0;
}

.am-mision__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 70px;
	align-items: center;
}

.am-mision__img img {
	width: 100%;
}

/* Nosotros · Importancia estratégica */
.am-corredor {
	padding: 84px 0 96px;
	background: #f2f6f8;
}

.am-corredor__intro {
	max-width: 900px;
	margin: 0 auto 66px;
	text-align: center;
}

.am-corredor__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.am-corredor__item {
	margin: 0;
}

.am-corredor__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.am-corredor__item figcaption {
	margin-top: 24px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--am-text);
}

/* Nosotros · Nuestro Compromiso */
.am-compromiso {
	padding: 84px 0 96px;
}

.am-compromiso__intro {
	max-width: 820px;
	margin: -8px auto 56px;
	text-align: center;
	font-size: 17px;
}

.am-compromiso__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.am-principio {
	background: #f5f5f5;
	padding: 56px 34px 48px;
	text-align: center;
}

.am-principio__icon {
	display: grid;
	place-items: center;
	height: 92px;
	margin-bottom: 30px;
}

.am-principio__icon img {
	max-height: 92px;
	width: auto;
}

.am-principio__title {
	font-size: 28px;
	margin: 0 0 18px;
}

.am-principio__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

/* TelePASE */
.am-telepase {
	padding: 84px 0 70px;
}

.am-telepase__lista {
	max-width: 1000px;
	margin: 46px auto 0;
}

.am-telepase__item {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.7;
}

.am-telepase__item strong {
	font-family: var(--am-font-title);
	font-weight: 700;
	color: var(--am-dark);
}

.am-telepase__item a {
	font-weight: 600;
}

/* Ancla alias: no ocupa espacio, solo marca la posición. */
.am-anchor-alias {
	display: block;
	height: 0;
	overflow: hidden;
}

/* Bloques de formulario */
.am-formulario {
	padding: 84px 0 96px;
}

.am-formulario--gris {
	background: #f5f5f5;
}

.am-formulario__volanta {
	margin: 0 0 10px;
	text-align: center;
	font-family: var(--am-font-title);
	font-weight: 700;
	font-size: 17px;
}

.am-formulario__box {
	max-width: 940px;
	margin: 0 auto;
}

/* Maqueta de formulario ---------------------------------

   Vista previa mientras no esté instalado el plugin de formularios. Las
   medidas replican assets/css/gravity.css a propósito: el día que entre el
   plugin real, el cambio no se nota. */

.am-form-mock__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 26px;
	margin: 0;
	padding: 0;
	border: 0;
}

.am-form-mock__field--full,
.am-form-mock__footer {
	grid-column: 1 / -1;
}

.am-form-mock__input {
	width: 100%;
	padding: 17px 20px;
	background: #fff;
	color: var(--am-text);
	font-family: var(--am-font-body);
	font-size: 17px;
	line-height: 1.4;
	border: 1px solid var(--am-dark);
	border-radius: 0;
	box-shadow: none;
}

.am-form-mock__input--area {
	min-height: 150px;
	resize: none;
}

.am-form-mock__input::placeholder {
	color: #9b9b9f;
	opacity: 1;
}

/* Deshabilitado, pero legible: la maqueta se lee, no se completa. */
.am-form-mock__fields[disabled] .am-form-mock__input,
.am-form-mock__input:disabled {
	opacity: 1;
	-webkit-text-fill-color: var(--am-text);
	cursor: not-allowed;
}

select.am-form-mock__input {
	appearance: none;
	padding-right: 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2335363a' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Adjunto: se dibuja el control, no hay input de archivo real. */
.am-form-mock__file {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--am-dark);
	font-size: 16px;
}

.am-form-mock__file-btn {
	flex: none;
	padding: 7px 16px;
	background: var(--am-gray-bg);
	border: 1px solid var(--am-gray-line);
	color: var(--am-text);
	font-size: 15px;
}

.am-form-mock__file-text {
	color: var(--am-text-soft);
}

.am-form-mock__footer {
	padding-top: 4px;
}

/* El botón usa .am-btn pero se ve claramente inactivo. */
.am-form-mock .am-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 17px 34px;
	font-size: 19px;
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: not-allowed;
	opacity: 0.75;
}

.am-form-mock .am-btn::after {
	content: '\2192';
	font-size: 21px;
	line-height: 1;
}

.am-form-mock .am-btn:hover {
	background: var(--am-orange-soft);
	transform: none;
}

.am-form-mock__nota {
	margin: 18px 0 0;
	color: var(--am-text-soft);
	font-size: 14px;
	font-style: italic;
}

/* Tarifas */
.am-tarifas {
	padding: 78px 0 96px;
	background: linear-gradient(180deg, #f7f9fb 0%, #eef2f5 100%);
}

.am-tarifa--sep {
	margin-top: 76px;
	padding-top: 76px;
	border-top: 1px solid #c9ced3;
}

.am-tarifa__title {
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.15;
	color: var(--am-orange);
	margin: 0 0 20px;
}

.am-tarifa__text {
	font-size: 17px;
	margin: 0 0 40px;
}

.am-tarifa__card {
	background: #fff;
	padding: 20px;
	box-shadow: 0 10px 30px rgba(53, 54, 58, 0.08);
}

.am-tarifa__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.am-tarifa__scroll img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* El cuadro entero es el botón que abre el visor: sin fondo ni borde, para que
   se siga viendo como una imagen y no como un control. */
.am-tarifa__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.am-tarifa__hint {
	margin: 12px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--am-text-soft);
}

/* Visor de imágenes ampliadas.
   z-index 150: por encima del header fijo (100) y por debajo del salto al
   contenido (200), que tiene que seguir siendo el primer foco de la página. */
.am-zoom {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	background: rgba(20, 21, 24, 0.94);
	opacity: 0;
	transition: opacity var(--am-dur-rapida) var(--am-ease);
}

.am-zoom[hidden] {
	display: none;
}

.am-zoom.is-open {
	opacity: 1;
}

/* El viewport ocupa todo el overlay y es lo que se desplaza cuando la imagen
   está ampliada. touch-action deja pasar el pinch del sistema. */
.am-zoom__viewport {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y pinch-zoom;
	padding: 16px;
}

.am-zoom__viewport img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	cursor: zoom-in;
}

/* Ampliada: la imagen toma su ancho real y el viewport se recorre. margin auto
   la mantiene centrada mientras entre, y no la corta cuando no entra. */
.am-zoom__viewport.is-zoomed {
	align-items: flex-start;
	justify-content: flex-start;
}

.am-zoom__viewport.is-zoomed img {
	max-width: none;
	max-height: none;
	margin: auto;
	cursor: zoom-out;
}

.am-zoom__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--am-dur-rapida) var(--am-ease);
}

.am-zoom__close:hover,
.am-zoom__close:focus-visible {
	background: var(--am-orange);
}

body.am-zoom-open {
	overflow: hidden;
}

/* Popup de la portada.
   Mismo escalón que el visor de imágenes (150): tapa el header fijo y el
   flotante de WhatsApp, y deja arriba solo el salto al contenido. Los dos no
   pueden convivir —el visor vive en las tarifas y este solo en la home—, así
   que no compiten. */
.am-popup {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 21, 24, 0.8);
	opacity: 0;
	transition: opacity var(--am-dur-rapida) var(--am-ease);
}

.am-popup[hidden] {
	display: none;
}

.am-popup.is-open {
	opacity: 1;
}

/* La caja se ajusta a la imagen: el aviso ya viene diseñado y cualquier fondo
   propio se vería como un marco de más. El alto tope deja aire arriba y abajo
   en pantallas bajas, y la imagen entra completa sin recortarse. */
.am-popup__caja {
	position: relative;
	max-width: min(800px, 100%);
	max-height: 100%;
	transform: translateY(12px);
	transition: transform var(--am-dur-media) var(--am-ease-salida);
}

.am-popup.is-open .am-popup__caja {
	transform: none;
}

.am-popup__caja img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	height: auto;
	border-radius: var(--am-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.am-popup__link {
	display: block;
}

/* Medio afuera de la imagen y sobre el fondo oscuro: adentro tapaba el logo
   del aviso, que es lo primero que se mira. */
.am-popup__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--am-white);
	color: var(--am-dark);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	transition: background var(--am-dur-rapida) var(--am-ease), color var(--am-dur-rapida) var(--am-ease);
}

/* Anillo invisible alrededor del botón: el dedo que erra por poco igual cierra.
   Sin esto el toque caía en la imagen, que es un enlace, y en vez de fallar te
   sacaba de la página —que es lo que volvía irritante cerrarlo en el celular—.
   Va en un pseudo-elemento para agrandar el blanco sin agrandar el círculo. */
.am-popup__close::before {
	content: '';
	position: absolute;
	inset: -12px;
	border-radius: 50%;
}

.am-popup__close:hover,
.am-popup__close:focus-visible {
	background: var(--am-orange);
	color: var(--am-white);
}

/* En celular la imagen llega al borde de la pantalla y el botón se metería
   fuera de la vista: se apoya adentro, contra la esquina. */
@media (max-width: 600px) {
	.am-popup {
		padding: 16px;
	}

	/* 48px es el mínimo cómodo para un dedo; con el anillo, el blanco real
	   queda en 72px. */
	.am-popup__close {
		top: 8px;
		right: 8px;
		width: 48px;
		height: 48px;
		font-size: 28px;
	}
}

body.am-popup-open {
	overflow: hidden;
}

/* Atención al Usuario · CAU */
.am-cau {
	padding-top: 78px;
	background: linear-gradient(105deg, #fbf1e4 0%, #f8f6f4 55%, #f4f6f7 100%);
}

.am-cau .am-titulo {
	margin-bottom: 22px;
}

.am-cau__intro {
	max-width: 860px;
	margin: 0 auto 48px;
	text-align: center;
	font-size: 17px;
}

.am-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	padding-bottom: 62px;
}

.am-tabs__btn {
	min-width: 210px;
	padding: 18px 26px;
	background: transparent;
	color: var(--am-dark);
	font-family: var(--am-font-body);
	font-size: 17px;
	line-height: 1.3;
	border: 1px solid var(--am-dark);
	border-radius: 10px;
	cursor: pointer;
	transition: background var(--am-dur-media) var(--am-ease), color var(--am-dur-media) var(--am-ease), border-color var(--am-dur-media) var(--am-ease);
}

.am-tabs__btn:hover {
	border-color: var(--am-orange);
	color: var(--am-orange);
}

.am-tabs__btn.is-active {
	background: var(--am-orange);
	border-color: var(--am-orange);
	color: #fff;
}

.am-tabs__panel {
	padding: 62px 0 86px;
	background: #f6efe7;
	scroll-margin-top: var(--am-header-h);
}

.am-tabs__panel + .am-tabs__panel {
	background: #f4f4f5;
}

/* Con JS activo solo se muestra el panel elegido. */
.am-tabs__panel--vacio {
	padding: 0;
	background: transparent;
}

body.am-has-tabs .am-tabs__panel {
	display: none;
}

body.am-has-tabs .am-tabs__panel.is-active {
	display: block;
}

/* Atención al Usuario · contacto */
/* El crema va justo a mitad de camino entre el #f6efe7 del panel de arriba y
   el blanco: la página baja en tres escalones (crema · crema claro · blanco)
   y el mapa que sigue aparece sin corte. */
.am-contacto {
	padding: 84px 0;
	background: #faf7f3;
}

.am-contacto__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 70px;
	align-items: center;
}

.am-contacto__mapa img {
	width: 100%;
}

.am-contacto__bloque--sep {
	margin-top: 46px;
	padding-top: 46px;
	border-top: 1px solid #cdc5bc;
}

.am-contacto__title {
	font-family: var(--am-font-title);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.am-contacto__horario {
	font-size: 17px;
	line-height: 1.55;
	margin: 0 0 26px;
}

/* El horario que va debajo del teléfono, en el bloque comercial. */
.am-contacto__nota {
	font-size: 17px;
	line-height: 1.55;
	margin: 24px 0 0;
}

.am-contacto__linea {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.am-contacto__logo img {
	height: 62px;
	width: auto;
	max-width: none;
}

.am-contacto__tel {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: clamp(20px, 2vw, 28px);
	color: var(--am-dark);
}

.am-contacto__tel:hover {
	color: var(--am-orange);
}

.am-contacto__tel svg {
	width: 26px;
	height: 26px;
	fill: var(--am-dark);
}

/* Atención al Usuario · peajes */
.am-peajes {
	padding: 84px 0 96px;
}

.am-peajes__intro {
	max-width: 1000px;
	margin: 0 auto 70px;
}

.am-peajes__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 64px 70px;
}

.am-estacion__mapa,
.am-estacion__foto {
	margin-bottom: 26px;
	overflow: hidden;
	background: #e8eaec;
}

.am-estacion__foto img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.am-estacion__mapa iframe {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border: 0;
}

.am-estacion__link {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	color: var(--am-orange);
}

.am-estacion__title {
	font-family: var(--am-font-title);
	font-weight: 700;
	font-size: 23px;
	letter-spacing: 0.02em;
	color: var(--am-orange);
	margin: 0 0 16px;
}

.am-estacion__dir {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
}

/* Atención al Usuario · exenciones */
.am-exenciones {
	padding: 84px 0 96px;
	background: #f5f5f5;
}

.am-exenciones__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 500px));
	justify-content: center;
	gap: 56px;
}

.am-exencion {
	background: #fff;
	padding: 56px 40px 52px;
	text-align: center;
}

.am-exencion__icon {
	display: grid;
	place-items: center;
	height: 96px;
	margin-bottom: 28px;
}

.am-exencion__icon img {
	max-height: 96px;
	width: auto;
}

.am-exencion__title {
	font-size: 27px;
	line-height: 1.25;
	color: var(--am-orange);
	margin: 0 0 24px;
}

.am-exencion__text {
	font-size: 17px;
	margin: 0 0 36px;
}

/* 11. Contenido genérico -------------------------------- */

.am-page {
	padding: 70px 0 90px;
}

.am-page__title {
	font-size: clamp(30px, 3.4vw, 44px);
	text-transform: uppercase;
	margin-bottom: 30px;
}

.am-entry img {
	margin: 24px 0;
}

.am-entry h2,
.am-entry h3 {
	margin-top: 1.6em;
}

/* 11b. Nota suelta -------------------------------------- */

/* Título centrado sobre el banner. La caja es la que centra: así el texto no
   depende de la altura de la imagen, que es fluida. Arranca donde termina el
   header y no en el borde del bloque: el bloque se sube --am-header-h para
   pasar por detrás del header, y midiendo desde 0 el título quedaba medio
   header más arriba del centro de la foto. */
.am-hero-banner__caja {
	position: absolute;
	inset: var(--am-header-h) 0 0 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 0 24px;
	pointer-events: none;
}

.am-hero-banner__titulo {
	margin: 0;
	max-width: 900px;
	color: #fff;
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 36px);
	line-height: 1;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.am-single {
	padding: 60px 0 90px;
}

/* 855 + 285 = los 1140px del diseño. El contenido manda y el lateral es fijo.
   Las dos columnas miden lo mismo de alto: el panel gris acompaña al artículo
   hasta el final, como en el diseño. */
.am-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 285px;
	gap: 40px;
	align-items: stretch;
}

.am-single__foto {
	margin: 0 0 50px;
	text-align: center;
}

/* La imagen destacada se muestra centrada y sin recortar, con el ancho tope de
   768px del diseño. Se sirve el archivo "large" (1024) y se muestra a 768 para
   que se vea nítida en pantallas retina. */
.am-single__foto img {
	display: inline-block;
	width: auto;
	max-width: min(100%, 768px);
	height: auto;
}

.am-single__title {
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 45px);
	line-height: 1;
	letter-spacing: 0;
	color: var(--am-dark);
	margin: 0 0 26px;
	text-wrap: balance;
}

.am-single .am-entry {
	font-size: 16px;
	line-height: 1.5;
}

.am-single .am-entry h2 {
	font-family: var(--am-font-title);
	font-weight: 700;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.2;
	margin: 1.4em 0 0.5em;
}

.am-single .am-entry h3 {
	font-family: var(--am-font-body);
	font-weight: 700;
	font-size: clamp(22px, 2.3vw, 32px);
	line-height: 1.2;
	margin: 1.2em 0 0.4em;
}

.am-single .am-entry hr {
	margin: 34px 0;
	border: 0;
	border-top: 1px solid var(--am-gray-line);
}

/* Listas dentro del texto de una nota. El editor clásico las inserta sin
   clase, así que hay que estilar la etiqueta pelada. */
.am-entry ul,
.am-entry ol {
	margin: 0 0 1.1em;
	padding-left: 22px;
}

.am-entry li {
	margin-bottom: 0.4em;
}

/* Video del cuerpo de una nota. El reproductor es el nativo del navegador, no
   el de WordPress: el shortcode [video] arrastra MediaElement.js —CSS y JS
   propios, con sus controles— para hacer lo mismo que hace <video controls>
   solo. El ancho tope es el de un video vertical: a 768px de ancho la columna
   lo estiraría hasta ocupar la nota entera. */
.am-video {
	margin: 30px 0;
	text-align: center;
}

.am-video video {
	display: inline-block;
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: var(--am-radius);
	background: #000;
}

/* Alineación de imágenes del editor clásico. WordPress las trae en
   classic-theme-styles, que inc/classic-editor.php da de baja junto con el
   resto del CSS de bloques: sin esto, `aligncenter` no centra nada porque el
   reset deja las imágenes en display:block. */
.am-entry .aligncenter,
.am-entry .alignnone,
.am-entry .alignleft,
.am-entry .alignright {
	height: auto;
}

.am-entry .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.am-entry .alignleft {
	float: left;
	margin: 8px 24px 24px 0;
}

.am-entry .alignright {
	float: right;
	margin: 8px 0 24px 24px;
}

/* El enlace a la imagen grande es inline y envuelve un <img> en bloque: sin
   esto el ancla no ocupa el ancho y el centrado del hijo no se nota. */
.am-entry a:has(> .aligncenter) {
	display: block;
}

/* Los flotantes no deben desbordar la nota ni pisar la navegación del pie. */
.am-entry::after {
	content: '';
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	.am-entry .alignleft,
	.am-entry .alignright {
		float: none;
		display: block;
		margin: 24px auto;
	}
}

/* Navegación entre notas */
.am-single__nav {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 20px;
	align-items: center;
	margin-top: 56px;
	padding-top: 26px;
	border-top: 1px solid var(--am-gray-line);
}

.am-single__nav::before {
	content: '';
	grid-column: 2;
	grid-row: 1;
	width: 1px;
	height: 100%;
	background: var(--am-gray-line);
}

.am-single__nav-link {
	display: block;
	color: var(--am-dark);
}

.am-single__nav-link--prev {
	grid-column: 1;
}

.am-single__nav-link--next {
	grid-column: 3;
	text-align: right;
}

.am-single__nav-link:hover {
	color: var(--am-orange);
}

.am-single__nav-label {
	display: block;
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--am-text-soft);
	margin-bottom: 4px;
}

.am-single__nav-title {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}

/* Columna lateral — la comparten la nota y el listado de novedades */
.am-aside {
	background: rgba(53, 54, 58, 0.11);
	padding: 22px 20px 8px;
}

.am-aside__bloque {
	margin-bottom: 30px;
}

.am-aside__title {
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--am-dark);
	margin: 0 0 20px;
}

/* Buscador */

/* El botón se apoya sobre el campo en vez de ir al lado: en 285px una fila de
   input + botón deja el campo demasiado angosto para escribir. */
.am-search {
	position: relative;
}

.am-search__input {
	width: 100%;
	padding: 12px 46px 12px 14px;
	border: 1px solid var(--am-gray-line);
	background: var(--am-white);
	font-family: var(--am-font-body);
	font-size: 15px;
	color: var(--am-text);
	border-radius: var(--am-radius);
}

.am-search__input:focus-visible {
	outline: 2px solid var(--am-orange);
	outline-offset: -2px;
}

.am-search__btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--am-text-soft);
	cursor: pointer;
	transition: color var(--am-dur-rapida) var(--am-ease);
}

.am-search__btn:hover {
	color: var(--am-orange);
}

.am-search__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Categorías */
.am-aside__cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.am-aside__cat + .am-aside__cat {
	border-top: 1px solid rgba(53, 54, 58, 0.14);
}

.am-aside__cat a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	color: var(--am-dark);
	font-size: 15px;
	line-height: 1.3;
	transition: color var(--am-dur-rapida) var(--am-ease);
}

.am-aside__cat a:hover,
.am-aside__cat.is-current a {
	color: var(--am-orange);
}

/* El número no compite con el nombre: más chico y en el gris de apoyo. */
.am-aside__cat-num {
	flex: none;
	font-size: 13px;
	color: var(--am-text-soft);
}

.am-aside__cat a:hover .am-aside__cat-num,
.am-aside__cat.is-current .am-aside__cat-num {
	color: inherit;
}

.am-side-post {
	margin-bottom: 26px;
}

.am-side-post__img {
	display: block;
	margin-bottom: 14px;
	overflow: hidden;
	background: var(--am-gray-bg);
	aspect-ratio: 245 / 162;
}

.am-side-post__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-side-post__title {
	font-family: var(--am-font-title);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0 0 8px;
}

.am-side-post__title a {
	color: var(--am-dark);
}

.am-side-post__title a:hover {
	color: var(--am-orange);
}

.am-side-post__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--am-text-soft);
	margin: 0 0 8px;
}

.am-side-post__more {
	font-family: var(--am-font-title);
	font-weight: 500;
	font-size: 19px;
	color: var(--am-orange);
}

/* Mismas medidas que .am-single__grid, para que la franja caiga en la misma
   línea en el listado y en la nota. */
.am-list-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 285px;
	gap: 40px;
	align-items: start;
}

.am-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 42px;
}

.am-pagination {
	margin-top: 56px;
	text-align: center;
}

.am-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 3px;
	color: var(--am-dark);
	border: 1px solid var(--am-gray-line);
}

.am-pagination .page-numbers.current,
.am-pagination .page-numbers:hover {
	background: var(--am-orange);
	border-color: var(--am-orange);
	color: #fff;
}

/* Responsive --------------------------------------------- */

@media (max-width: 1400px) {
	.am-nav ul {
		gap: 18px;
	}

	.am-header__aside {
		gap: 16px;
	}
}

/* Último tramo antes de pasar a hamburguesa: se compacta todo lo posible. */
@media (max-width: 1320px) {
	.am-nav ul {
		gap: 13px;
	}

	.am-nav a {
		font-size: 11.5px;
	}

	.am-header__aside {
		--am-header-logo-h: 41px;
		gap: 12px;
	}

	.am-phone__num {
		font-size: 13px;
	}

	.am-phone__label {
		font-size: 11px;
	}
}

@media (max-width: 1200px) {
	.am-cards__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1200px) {
	:root {
		--am-header-h: 88px;
		--am-header-pad: 12px;
		/* Mismo canto que el .am-wrap del contenido, así en celular el header,
		   el cuerpo y el footer arrancan todos en la misma x. */
		--am-wrap-ancho-pad: 24px;
	}

	.am-burger {
		display: block;
	}

	.am-header__inner {
		gap: 16px;
	}

	.am-header__logo img {
		width: 148px;
	}

	.am-header__aside,
	.am-nav {
		display: none;
	}

	/* Panel mobile.
	   El header usa will-change/transform, así que es el bloque contenedor de
	   sus hijos fixed: la altura va explícita en vez de apoyarse en bottom: 0. */
	.am-mobile {
		display: block;
		position: fixed;
		top: var(--am-header-h);
		left: 0;
		right: 0;
		height: calc(100vh - var(--am-header-h));
		height: calc(100dvh - var(--am-header-h));
		z-index: 99;
		background: var(--am-dark);
		padding: 24px 22px 46px;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.35s var(--am-ease), visibility 0.35s;
	}

	.am-mobile.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.am-mobile ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.am-mobile > .am-nav-mobile > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.am-mobile a {
		display: block;
		color: #fff;
		font-family: var(--am-font-title);
		font-weight: 500;
		font-size: 16px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 15px 0;
	}

	.am-mobile .sub-menu {
		display: none;
		padding: 0 0 10px 14px;
	}

	.am-mobile .sub-menu.is-open {
		display: block;
	}

	.am-mobile .sub-menu a {
		font-size: 14px;
		letter-spacing: 0.03em;
		text-transform: none;
		padding: 9px 0;
		color: #d5d6d9;
	}

	.am-mobile__toggle {
		position: absolute;
		right: 0;
		top: 8px;
		width: 44px;
		height: 44px;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.am-mobile__toggle::before {
		content: '';
		position: absolute;
		top: 16px;
		left: 16px;
		width: 9px;
		height: 9px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		transition: transform var(--am-dur-media) var(--am-ease);
	}

	.am-mobile__toggle[aria-expanded='true']::before {
		transform: rotate(-135deg);
	}

	.am-mobile li {
		position: relative;
	}

	.am-mobile__aside {
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
	}

	/* Acá los dos pills se igualan por caja, no por alto: en el panel están uno
	   al lado del otro y comparten la mitad de la fila. El object-fit deja cada
	   dibujo centrado y sin deformar si alguna vez se sube uno de otra medida. */
	.am-mobile__aside > a {
		flex: 1 1 0;
		min-width: 0;
		height: 52px;
	}

	.am-mobile__aside img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	.am-mobile__phones {
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: 100%;
	}

	/* Los teléfonos conservan su formato de ícono + texto. Ocupan todo el ancho
	   del panel —en vez de medir lo que mide su contenido— para que los dos
	   arranquen y terminen en la misma línea. */
	.am-mobile .am-phone {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 0;
		font-family: var(--am-font-body);
		font-weight: 400;
		font-size: 15px;
		letter-spacing: 0;
		text-transform: none;
	}

	body.am-nav-open {
		overflow: hidden;
	}
}

@media (max-width: 900px) {
	.am-mision__grid,
	.am-contacto__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* La columna lateral pasa debajo del contenido, en la nota y en el listado. */
	.am-single__grid,
	.am-list-layout {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.am-mision__grid {
		gap: 34px;
	}

	.am-corredor__grid,
	.am-compromiso__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.am-peajes__grid {
		gap: 44px;
	}

	.am-exenciones__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.am-tabs__nav {
		gap: 16px;
		padding-bottom: 44px;
	}

	.am-tabs__btn {
		min-width: 0;
		flex: 1 1 200px;
	}

	.am-novedades__grid,
	.am-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px;
	}

	.am-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.am-footer__logo {
		grid-column: 1 / -1;
	}

	.am-footer__col {
		border-left: 0;
		padding-left: 0;
	}

	.am-footer__bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 22px;
	}

	/* Los cuatro en fila no entran en pantalla: pasan a dos por dos, con la
	   divisoria solo entre las dos columnas. */
	.am-footer__orgs {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 22px;
	}

	.am-footer__orgs img {
		height: 40px;
		max-width: 100%;
	}

	.am-footer__orgs a + a {
		border-left: 0;
	}

	.am-footer__orgs a:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}

	.am-footer__buttons {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 16px;
	}

	/* Los campos en una sola columna: en dos quedan demasiado angostos. */
	.am-form-mock__fields {
		grid-template-columns: 1fr;
	}

	.am-form-mock .am-btn {
		width: 100%;
		justify-content: center;
	}

	/* Prev y next se apilan: en dos columnas los títulos quedan muy picados. */
	.am-single__nav {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.am-single__nav::before {
		display: none;
	}

	.am-single__nav-link--prev,
	.am-single__nav-link--next {
		grid-column: 1;
		text-align: left;
	}

	.am-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

	.am-card {
		min-height: 0;
		padding: 34px 18px 26px;
	}

	.am-contador__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.am-hero__track {
		height: 460px;
	}

	.am-hero__slide::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
	}

	.am-hero__arrow {
		width: 42px;
		height: 42px;
	}

	.am-hero__arrow--prev {
		left: 8px;
	}

	.am-hero__arrow--next {
		right: 8px;
	}

	.am-cards,
	.am-novedades,
	.am-mision,
	.am-corredor,
	.am-compromiso,
	.am-formulario,
	.am-tarifas,
	.am-contacto,
	.am-peajes,
	.am-exenciones {
		padding: 54px 0 62px;
	}

	.am-cau {
		padding-top: 54px;
	}

	.am-tabs__panel {
		padding: 44px 0 56px;
	}

	.am-peajes__grid {
		grid-template-columns: 1fr;
	}

	.am-corredor__intro,
	.am-peajes__intro {
		margin-bottom: 40px;
	}

	.am-principio,
	.am-exencion {
		padding: 38px 24px 34px;
	}

	.am-tarifa--sep {
		margin-top: 48px;
		padding-top: 48px;
	}

	.am-contacto__linea {
		gap: 22px;
	}

	/* En vertical el cuadro entra completo en la tarjeta: los precios se leen
	   ampliando la imagen con el visor, no arrastrándola de costado. */
	.am-tarifa__card {
		padding: 12px;
	}

	.am-section-title,
	.am-novedades__head {
		margin-bottom: 36px;
	}

	.am-novedades__grid,
	.am-list {
		grid-template-columns: 1fr;
	}

	.am-novedades__cta .am-btn {
		min-width: 0;
		width: 100%;
	}

	.am-footer__buttons {
		--am-footer-logo-h: 62px;
	}
}

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

	.am-footer__top {
		grid-template-columns: 1fr;
	}

	.am-btn {
		padding: 15px 28px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* 12. Mapa del corredor --------------------------------- */

/* El fondo es el mismo crema que trae el SVG adentro: así, si el cartel es más
   alto que el dibujo, lo que sobra no se ve como un corte. */
.am-ruta {
	position: relative;
	background: var(--am-cream);
	overflow: hidden;
}

.am-ruta__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Los puntos ---------------------------------------------- */

.am-ruta__punto {
	cursor: pointer;
	outline: none;
}

.am-ruta__punto-tap {
	fill: transparent;
}

.am-ruta__punto-aro {
	fill: #36373b;
}

.am-ruta__punto-dot {
	fill: #ed7e25;
	transition: fill var(--am-dur-rapida) var(--am-ease);
}

/* La figura va en su propio grupo porque el translate del punto es un atributo
   del SVG y un transform del CSS lo pisaría entero: el punto se iría al 0,0. */
.am-ruta__punto-fig {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--am-dur-rapida) var(--am-ease);
}

.am-ruta__punto:hover .am-ruta__punto-fig {
	transform: scale(1.18);
}

/* El elegido crece de verdad: es la marca de "estás mirando este" y tiene que
   leerse de un vistazo, sin depender del aro.

   1,35: un cuarto menos que el 1,8 con el que empezó. El techo sigue siendo
   ~2,4 —de ahí para arriba el punto le tapa su propio rótulo en el mapa, que es
   justo el nombre que la persona acaba de tocar— pero a 1,35 se lee igual de
   claro y pisa menos el dibujo.

   Las tres medidas son un solo gesto y se mueven juntas: el "desde" del aura
   arranca en el borde del punto ya crecido, así que si cambia una hay que
   cambiar las tres en la misma proporción. */
.am-ruta {
	--am-ruta-elegido: 1.35;
	--am-ruta-aura-desde: 1.35;
	--am-ruta-aura-hasta: 3.45;
}

.am-ruta__punto.is-active .am-ruta__punto-fig {
	transform: scale(var(--am-ruta-elegido, 1.35));
}

.am-ruta__punto:hover .am-ruta__punto-dot {
	fill: #f89142;
}

/* El anillo es el foco del teclado y nada más: al elegido lo marcan el tamaño y
   el pulso. Un outline sobre un <g> no lo dibujan todos los navegadores, por eso
   el foco es un círculo y no un contorno. */
.am-ruta__punto-foco {
	fill: none;
	stroke: var(--am-orange);
	stroke-width: 3.5;
	opacity: 0;
	transition: opacity var(--am-dur-rapida) var(--am-ease);
}

.am-ruta__punto:focus-visible .am-ruta__punto-foco {
	opacity: 1;
}

/* El aura del elegido, en reposo: invisible hasta que la animación la enciende.
   Se agranda con transform y no animando la r del círculo, que como propiedad
   de CSS no la entienden todos los navegadores. */
.am-ruta__punto-aura {
	fill: none;
	stroke: #ed7e25;
	stroke-width: 4;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

/* El cartel ------------------------------------------------ */

.am-ruta__cartel {
	background: var(--am-white);
	border-radius: 28px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
	padding: 34px 36px;
}

.am-ruta__cabezal {
	display: flex;
	align-items: center;
	gap: 16px;
}

.am-ruta__marca {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ed7e25;
	border: 2px solid #36373b;
}

.am-ruta__rotulo {
	margin: 0;
	font-family: var(--am-font-title);
	font-size: 16px;
	font-weight: 700;
	color: var(--am-text);
}

.am-ruta__nombre {
	margin: 2px 0 0;
	font-family: var(--am-font-title);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--am-text);
	text-transform: uppercase;
}

.am-ruta__dir {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--am-text);
}

.am-ruta__fila {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--am-gray-line);
}

.am-ruta__fila > div {
	min-width: 0;
}

.am-ruta__glifo {
	flex: 0 0 auto;
	width: 30px;
	color: var(--am-text);
}

.am-ruta__glifo svg {
	display: block;
	width: 100%;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.am-ruta__fila-rotulo {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--am-text);
}

.am-ruta__fila-dato {
	margin: 2px 0 0;
	font-family: var(--am-font-title);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.am-ruta__fila-dato a {
	color: var(--am-text);
	text-decoration: none;
}

.am-ruta__fila-dato a:hover,
.am-ruta__fila-dato a:focus-visible {
	color: var(--am-orange-dark);
	text-decoration: underline;
}

.am-ruta__fila-texto {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--am-text-soft);
}

.am-ruta__fila-horario {
	margin: 6px 0 0;
	font-family: var(--am-font-title);
	font-size: 17px;
	font-weight: 700;
	color: var(--am-text);
}

.am-ruta__texto {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--am-text);
}

.am-ruta__iconos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 20px;
}

.am-ruta__iconos img {
	display: block;
	width: auto;
	height: 30px;
}

/* Las islas son un dibujo apaisado y con mucho aire arriba y abajo: de sus 233
   píxeles de lienzo, solo 127 tienen tinta. Medido igual que los demás quedaba
   con 16px de dibujo contra los 25 del resto y se leía como si fuera otro
   tamaño. Los 40px son para que la tinta mida parecido, no el archivo. */
.am-ruta__iconos .am-ruta__icono--malvinas {
	height: 40px;
}

/* Los dos que llevan a algún lado. El levantón es chico a propósito: son un
   remate del cartel, no dos botones más. */
.am-ruta__icono-link {
	display: block;
	border-radius: 6px;
	transition: transform var(--am-dur-rapida) var(--am-ease), opacity var(--am-dur-rapida) var(--am-ease);
}

.am-ruta__icono-link:focus-visible {
	opacity: 1;
}

@media (hover: hover) {
	.am-ruta__icono-link:hover {
		transform: translateY(-2px);
		opacity: 0.85;
	}
}

/* Sin JavaScript se ven los cuatro carteles, uno abajo del otro: la clase la
   pone el script, así que nunca se esconde nada que no se pueda volver a ver. */
.am-ruta.is-interactivo .am-ruta__cartel {
	display: none;
}

.am-ruta.is-interactivo .am-ruta__cartel.is-active {
	display: block;
}

/* De 900 para arriba el cartel flota sobre el mapa, a la izquierda. Las dos
   capas comparten celda de grilla: la sección mide lo que mida la más alta. */
@media (min-width: 900px) {
	.am-ruta {
		display: grid;
	}

	.am-ruta__mapa,
	.am-ruta__carteles {
		grid-area: 1 / 1;
	}

	.am-ruta__mapa {
		align-self: start;
	}

	.am-ruta__carteles {
		display: flex;
		align-items: center;
		--am-cartel-desde: translateX(-18px);
		max-width: var(--am-wrap-ancho);
		width: 100%;
		margin: 0 auto;
		padding: 40px var(--am-wrap-ancho-pad);
		pointer-events: none;
	}

	.am-ruta__cartel {
		width: min(470px, 44%);
		pointer-events: auto;
	}

	/* Sin JavaScript no hay peaje elegido y se ven los cuatro carteles. Si
	   siguieran flotando sobre el mapa quedarían uno encima del otro: acá el
	   mapa vuelve al flujo normal y los carteles caen abajo, en dos filas. */
	.am-ruta:not(.is-interactivo) {
		display: block;
	}

	.am-ruta:not(.is-interactivo) .am-ruta__carteles {
		flex-wrap: wrap;
		align-items: stretch;
		gap: 24px;
		padding-bottom: 48px;
		pointer-events: auto;
	}

	.am-ruta:not(.is-interactivo) .am-ruta__cartel {
		width: min(470px, calc(50% - 12px));
	}
}

/* Animaciones ---------------------------------------------

   Todas cuelgan de .am-anim —la clase que pone el script del <head> y que se
   cae sola si main.js no llega a cargar— y de .ha-entrado, que la pone
   initCorredor() cuando la sección aparece en pantalla. Sin JavaScript no hay
   ni estado inicial ni animación: se ve todo quieto, como estaba.

   El orden de la entrada: primero el mapa, después la ruta dibujándose,
   después el cartel y por último los cuatro puntos, de sur a norte, en el mismo
   orden en que la traza los va pasando. */

.am-anim .am-ruta__svg,
.am-anim .am-ruta__nav,
.am-anim .am-ruta__carteles,
.am-anim .am-ruta__punto-fig {
	opacity: 0;
}

.am-anim .am-ruta.ha-entrado .am-ruta__svg {
	animation: am-fade var(--am-dur-lenta) var(--am-ease-salida) both;
}

/* La tarjeta y los pasos aparecen al final del recorrido, con .ya-entro: cuando
   la traza terminó de bajar y initCorredor() eligió el peaje del norte. */
.am-anim .am-ruta.ya-entro .am-ruta__nav,
.am-anim .am-ruta.ya-entro .am-ruta__carteles {
	animation: am-ruta-cartel-entra var(--am-dur-lenta) var(--am-ease-salida) both;
}

@keyframes am-ruta-cartel-entra {
	from {
		opacity: 0;
		/* En escritorio el cartel está a la izquierda del mapa y entra desde
		   ese lado; apilado en celular, entra desde abajo. */
		transform: var(--am-cartel-desde, translateY(14px));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* La traza. El largo de cada tramo lo mide initCorredor() con getTotalLength()
   y lo deja en --am-traza-largo; acá solo está el movimiento.

   El largo va por variable y no como estilo inline a propósito: un inline le
   gana a cualquier regla de la hoja y el tramo se quedaría corrido para
   siempre. Y si la variable no existe —sin JavaScript, o con movimiento
   reducido, que ni la escriben— el dasharray no computa y la ruta se ve
   entera, que es justo el respaldo que queremos. */
/* El desplazamiento va en negativo a propósito: con el largo en positivo el
   trazo se dibuja desde el principio del recorrido —el extremo sur— y acá se
   quiere al revés, de arriba hacia abajo, así que se revela desde la otra
   punta. */
.am-ruta__traza {
	stroke-dasharray: var(--am-traza-largo);
	stroke-dashoffset: calc(var(--am-traza-largo) * -1);
}

.am-ruta.ha-entrado .am-ruta__traza {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--am-traza-dur, 800ms) linear var(--am-traza-espera, 0ms);
}

/* Los puntos entran los cuatro, el elegido incluido, cada uno en su turno.

   El relleno es "backwards" y no "both" por una razón puntual: con "both" la
   animación se queda pegada al transform del último fotograma y el punto
   elegido no podría crecer al 1,18 que le pone su propia regla. Así, apenas
   termina, el transform vuelve a mandarlo el CSS. */
.am-anim .am-ruta.ha-entrado .am-ruta__punto-fig {
	opacity: 1;
	animation: am-ruta-punto-in 0.5s var(--am-ease-salida) calc(900ms + var(--am-punto-i, 0) * 120ms) backwards;
}

@keyframes am-ruta-punto-in {
	from {
		opacity: 0;
		transform: scale(0.4);
	}

	60% {
		opacity: 1;
		transform: scale(1.1);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* El aura del elegido.

   Cuelga de .ya-entro y no de .ha-entrado: durante la entrada no existe, porque
   si no el anillo se vería pulsando en un lugar donde todavía no hay punto
   dibujado. Se enciende recién cuando los cuatro terminaron de entrar.

   Es una regla sola y no una espera que después se corrige: cambiarle el retraso
   a una animación en curso la hace saltar, y el aura quedaba media vuelta
   apagada. Así arranca una vez, desde el primer fotograma. De ahí en más, al
   cambiar de peaje el anillo sale en el mismo momento del clic. */
.am-anim .am-ruta.ya-entro .am-ruta__punto.is-active .am-ruta__punto-aura {
	animation: am-ruta-aura 2.4s var(--am-ease-salida) infinite;
}

/* Sale del borde del punto —de ahí el "desde", que acompaña lo que crece el
   elegido— y llega bien lejos antes de apagarse. Se va perdiendo sobre el final
   y no a mitad de camino, así el anillo se ve todo el recorrido. */
@keyframes am-ruta-aura {
	from {
		opacity: 0.85;
		transform: scale(var(--am-ruta-aura-desde, 1.35));
	}

	60% {
		opacity: 0.35;
	}

	to {
		opacity: 0;
		transform: scale(var(--am-ruta-aura-hasta, 3.45));
	}
}

/* El cambio de cartel. Entra el cartel entero, corto, y detrás los tres datos
   que de verdad cambian: el ojo va a parar ahí y no parece que no pasó nada. */
.am-anim .am-ruta__cartel.is-active {
	animation: am-ruta-cartel-in var(--am-dur-rapida) var(--am-ease-salida) both;
}

.am-anim .am-ruta__cartel.is-active .am-ruta__nombre {
	animation: am-ruta-dato-in var(--am-dur-media) var(--am-ease-salida) 70ms both;
}

.am-anim .am-ruta__cartel.is-active .am-ruta__dir {
	animation: am-ruta-dato-in var(--am-dur-media) var(--am-ease-salida) 110ms both;
}

.am-anim .am-ruta__cartel.is-active .am-ruta__fila-horario {
	animation: am-ruta-dato-in var(--am-dur-media) var(--am-ease-salida) 150ms both;
}

@keyframes am-ruta-cartel-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes am-ruta-dato-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Con movimiento reducido: nada late ni se dibuja. Lo mismo que hace la cinta
   de estados —la luz se queda prendida en vez de parpadear—, porque la regla
   global solo acorta las duraciones y una animación infinita seguiría dando
   vueltas a toda velocidad. */
@media (prefers-reduced-motion: reduce) {
	.am-anim .am-ruta__svg,
	.am-anim .am-ruta__nav,
	.am-anim .am-ruta__carteles,
	.am-anim .am-ruta__punto-fig {
		opacity: 1;
	}

	.am-ruta__punto-fig,
	.am-ruta__punto-aura,
	.am-ruta__cartel,
	.am-ruta__cartel .am-ruta__nombre,
	.am-ruta__cartel .am-ruta__dir,
	.am-ruta__cartel .am-ruta__fila-horario {
		animation: none !important;
	}

	.am-ruta__traza {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}
}

/* Los pasos al peaje anterior y al siguiente ---------------

   Solo en celular: en escritorio el mapa es grande y los puntos se tocan sin
   problema. Acá el mapa va recortado y chico, así que además del camino corto
   —tocar el punto— conviene tener el largo. */
.am-ruta__nav {
	display: none;
}

/* Sin JavaScript los botones no hacen nada, así que no se muestran. El atributo
   "hidden" solo no alcanza: la regla de celular de más abajo le pone un display
   y le gana por especificidad. Por eso se repite acá, con el atributo. */
.am-ruta__nav[hidden] {
	display: none;
}

.am-ruta__nav-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--am-gray-line);
	border-radius: 14px;
	background: var(--am-white);
	color: var(--am-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--am-dur-rapida) var(--am-ease), background var(--am-dur-rapida) var(--am-ease);
}

.am-ruta__nav-btn:focus-visible {
	border-color: var(--am-orange);
	background: #fff8f2;
}

/* El hover, solo donde hay un puntero de verdad: en una pantalla táctil se
   queda pegado después del toque y el botón parece elegido cuando no lo está. */
@media (hover: hover) {
	.am-ruta__nav-btn:hover {
		border-color: var(--am-orange);
		background: #fff8f2;
	}
}

/* El siguiente se lee de derecha a izquierda: la flecha va del lado hacia el
   que lleva, que es lo que la vuelve una flecha y no un ícono. */
.am-ruta__nav-btn--next {
	flex-direction: row-reverse;
	text-align: right;
}

/* El texto empuja a la flecha contra su borde: así las dos quedan una en cada
   costado, alineadas entre sí de una fila a la otra. */
.am-ruta__nav-txt {
	flex: 1 1 auto;
}

.am-ruta__nav-flecha {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--am-orange);
	color: var(--am-white);
}

.am-ruta__nav-flecha svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.am-ruta__nav-rotulo {
	display: block;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--am-text-soft);
}

/* Sin nombre cargado el botón queda solo con su rótulo y no se rompe: es lo que
   se ve el instante que va entre que carga la página y arranca el script. */
.am-ruta__nav-nombre {
	display: block;
	font-family: var(--am-font-title);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

@media (max-width: 899px) {
	/* Uno por fila y no dos en línea: repartidos en dos columnas, "ZÁRATE
	   BRAZO LARGO" parte en tres renglones y los botones quedan altísimos. A
	   todo el ancho, el nombre más largo entra entero en un renglón. */
	.am-ruta__nav {
		display: grid;
		gap: 8px;
		max-width: 560px;
		margin: 0 auto;
		padding: 20px 24px 0;
		/* Al cambiar de peaje la página se acerca hasta acá. El margen es el
		   mismo que usa cualquier ancla del sitio: frena por debajo del header
		   fijo y no detrás. */
		scroll-margin-top: calc(var(--am-header-h) + 12px);
	}

	.am-ruta__carteles {
		max-width: 560px;
		margin: 0 auto;
		padding: 28px 24px 40px;
	}

	.am-ruta__cartel + .am-ruta__cartel {
		margin-top: 24px;
	}
}

@media (max-width: 480px) {
	.am-ruta__cartel {
		padding: 26px 22px;
		border-radius: 22px;
	}
}

/* 13. Animaciones de entrada ---------------------------- */

/* Todo lo de acá cuelga de .am-anim, que pone un script del <head>
   (inc/enqueue.php). Sin JavaScript la clase no existe, no hay estado inicial y
   el contenido se ve igual que siempre. Es a propósito: nada de lo que se lee
   puede depender de que un script llegue a correr. */
.am-anim [data-am-reveal] {
	opacity: 0;
	transform: translateY(16px);
}

/* Solo opacity y transform: son las dos que el navegador resuelve sin volver a
   calcular la página, así que el scroll no se traba mientras entran. */
.am-anim [data-am-reveal].is-visible {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--am-dur-lenta) var(--am-ease-salida),
		transform var(--am-dur-lenta) var(--am-ease-salida);
	transition-delay: var(--am-reveal-delay, 0ms);
}

/* Entrada del hero, más corta que el resto: es lo primero que se ve y no tiene
   que dar sensación de demora.

   Va con @keyframes y no con una transición por dos razones. Una: el primer
   slide ya llega con .is-active desde el servidor, así que nace en su estado
   final y una transición nunca dispararía —solo animan los cambios de valor—.
   Dos: la animación corre sola con que haya CSS, sin esperar a main.js; si el
   script fallara, el título igual aparece. */
.am-anim .am-hero__slide.is-active .am-hero__content [data-am-hero] {
	animation: am-hero-in 0.45s var(--am-ease-salida) both;
}

/* El botón entra detrás del título. */
.am-anim .am-hero__slide.is-active .am-hero__content [data-am-hero='2'] {
	animation-delay: 90ms;
}

/* Al cambiar de slide la regla se aplica de nuevo y la entrada se repite. */
@keyframes am-hero-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Cambio de pestaña del CAU: un desvanecido corto. No lleva desplazamiento
   porque es respuesta a un clic, no una entrada: cualquier demora se siente
   como que el botón no respondió. */
.am-anim .am-tabs__panel.is-active {
	animation: am-fade var(--am-dur-media) var(--am-ease-salida);
}

@keyframes am-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* La regla global de prefers-reduced-motion (sección anterior) ya lleva todas
   las duraciones a 0,01ms, así que la animación termina al instante y nada
   queda invisible. Esto es el cinturón por si el script del <head> igual puso
   la clase: el estado inicial deja de aplicarse. */
@media (prefers-reduced-motion: reduce) {
	.am-anim [data-am-reveal] {
		opacity: 1;
		transform: none;
	}
}