/* ==========================================================================
   Crear: páginas (secciones de Inicio, créditos, agencias...)
   ========================================================================== */

/* ==========================================================================
   Inicio
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.hero {
	/* Borde del contenedor (.wrap) medido desde el borde del hero (cqw = ancho del hero). */
	--edge: max(var(--gutter), calc((100cqw - var(--wrap)) / 2 + var(--gutter)));
	container-type: inline-size;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	min-height: 540px;
}

.hero__text {
	position: relative;
	z-index: 2;
	padding: 56px 40px 48px var(--edge);
}

.hero__title {
	margin: 0 0 22px;
	font-size: clamp(2.875rem, 6.2vw, 5.125rem); /* 46–82 */
	line-height: .92;
	text-wrap: balance;
}

.hero__lead {
	max-width: 30em;
	margin: 0 0 28px;
	color: var(--gris);
	font-size: var(--fs-1);
	line-height: 1.55;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	color: var(--gris);
	font-size: .84375rem; /* 13.5 */
}

.hero__meta b {
	color: var(--tinta);
	font-weight: 700;
}

.hero__media {
	position: relative;
	background: var(--acero);
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .92;
}

/* Franja amarilla con el ángulo de marca. */
.hero__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 4%;
	width: 9%;
	height: 100%;
	background: var(--amarillo);
	transform: skewX(var(--sk));
	transform-origin: top;
}

.hero__calc {
	position: absolute;
	right: var(--edge);
	bottom: -56px;
	z-index: 3;
	width: 380px;
}

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

	.hero__text {
		padding: 28px var(--gutter) 24px;
	}

	.hero__lead {
		font-size: var(--fs-0);
	}

	.hero__meta {
		margin-top: 22px;
	}

	.hero__media {
		height: clamp(200px, 42vw, 360px);
		clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	}

	.waves {
		display: none;
	}

	.hero__calc {
		position: relative;
		right: auto;
		bottom: auto;
		justify-self: end;
		width: min(380px, 100% - 2 * var(--gutter));
		margin: -48px var(--gutter) 8px;
	}
}

@media (max-width: 559.98px) {
	.hero__title {
		margin-bottom: 18px;
	}

	.hero__ctas {
		flex-direction: column;
	}

	.hero__calc {
		justify-self: stretch;
		width: auto;
		margin-top: -40px;
	}
}

/* --- Selector por necesidad --------------------------------------------- */

.need {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"head ph"
		"list ph";
	column-gap: 56px;
	padding-block: 110px 70px;
}

.need__head {
	grid-area: head;
}

.need__heading {
	margin: 0 0 18px;
	font-size: var(--fs-3);
}

.need__intro {
	max-width: 28em;
	margin: 0 0 26px;
	color: var(--gris);
	font-size: 1.03125rem; /* 16.5 */
	line-height: 1.6;
}

.need__list {
	grid-area: list;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 18px;
	align-items: center;
}

/* El botón va primero en el DOM (lectores de pantalla) pero se ve junto al enlace. */
.need__list > .need__pause {
	grid-area: 2 / 2;
	justify-self: start;
}

.need__list > .need__opts {
	grid-area: 1 / 1 / 2 / 3;
}

.need__list > .need__foot {
	grid-area: 2 / 1;
}

.need__opts {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1.5px solid var(--tinta);
}

.need__opts li {
	border-bottom: 1px solid #DBE2EE;
}

.need__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 18px;
	padding-block: 18px;
	color: var(--tinta);
	text-decoration: none;
}

.need__title {
	justify-self: start;
	font-size: var(--fs-2);
	font-weight: 700;
	line-height: 1.2;
	transition: box-shadow .2s ease;
}

.need__row:hover .need__title {
	box-shadow: inset 0 -10px 0 var(--linea);
}

.need__row[aria-current="true"] .need__title {
	box-shadow: inset 0 -10px 0 var(--amarillo);
}

.need__desc {
	grid-column: 1;
	color: var(--gris);
	font-size: var(--fs--1);
	line-height: 1.5;
}

.need__prods {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	max-width: 12em;
	color: var(--azul);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: right;
}

.need__foot {
	display: flex;
	align-items: center;
	gap: 14px;
}

.need__go {
	display: inline-block;
	padding-block: 4px;
	font-size: var(--fs--1);
	font-weight: 700;
}

/* Barra de progreso de la rotación automática (solo transform). */
.need__bar {
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--amarillo);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

.need[data-autoplay] .need__row[aria-current="true"] .need__bar {
	animation: need-fill var(--need-interval, 3000ms) linear forwards;
	animation-play-state: paused;
}

.need[data-autoplay="on"] .need__row[aria-current="true"] .need__bar {
	animation-play-state: running;
}

.need[data-autoplay="stopped"] .need__bar {
	opacity: 0;
}

@keyframes need-fill {
	to {
		transform: scaleX(1);
	}
}

.need__pause {
	display: inline-grid;
	place-items: center;
	position: relative;
	z-index: 1; /* su área táctil se extiende sobre la última fila */
	min-width: 28px;
	min-height: 28px;
	padding: 0;
	border: 1px solid var(--linea-fuerte);
	border-radius: 50%;
	background: transparent;
	color: var(--gris);
	cursor: pointer;
}

/* Área táctil de 44x44 sin cambiar el círculo visible de 28 px. */
.need__pause::before {
	content: "";
	position: absolute;
	inset: -10px; /* caja de relleno 26 px + 20 = 46 px */
}

.need__pause:hover {
	border-color: var(--azul);
	color: var(--azul);
}

.need__pause[hidden],
.need:not([data-autoplay="stopped"]) .need__ic-play,
.need[data-autoplay="stopped"] .need__ic-pause {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.need__bar,
	.need__pause {
		display: none;
	}
}

.need__ph {
	grid-area: ph;
	position: relative;
	min-height: 440px;
	margin: 0 0 28px;
}

.need__ph img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s ease;
}

/* El corte va en un marco interno: la foto se mueve dentro (parallax). */
.need__cut {
	position: absolute;
	inset: 0;
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.need__ph img.is-out {
	opacity: 0;
}

.need__cap {
	position: absolute;
	bottom: -28px;
	left: 0;
	color: var(--gris);
	font-size: var(--fs--2);
}

.need__cap[hidden] {
	display: none;
}

@media (max-width: 1023.98px) {
	.need {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"head"
			"ph"
			"list";
		padding-block: 56px 56px;
	}

	.need__ph {
		min-height: 0;
		aspect-ratio: 4 / 3;
		margin-bottom: 44px;
	}
}

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

	.need__title {
		font-size: 1.375rem;
	}

	.need__prods {
		grid-row: auto;
		grid-column: 1;
		max-width: none;
		margin-top: 2px;
		text-align: left;
	}
}

/* --- Agencias como ruta ------------------------------------------------- */

.agencies {
	--focus: var(--amarillo);
	padding-block: 56px 60px;
	background: var(--acero);
	color: var(--blanco);
}

.agencies__title {
	margin: 0 0 8px;
	font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3rem); /* 36–48 */
}

/* Blanco puro: el texto claro tenue no llega a AA sobre acero. */
.agencies__intro {
	max-width: 62ch;
	margin: 0 0 32px;
	font-size: var(--fs-0);
}

.route {
	display: grid;
	grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--amarillo);
}

.route__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 0 0;
}

/* Marcador en paralelogramo sobre la línea. */
.route__item::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	width: 14px;
	height: 14px;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

.route__type,
.route__dept {
	font-size: .8125rem;
	line-height: 1.5;
}

.route__name {
	margin: 6px 0 8px;
	font-size: var(--fs-2);
	line-height: 1;
	overflow-wrap: break-word;
}

.route__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 8px;
	margin-bottom: 16px;
}

/* El amarillo como texto no llega a AA sobre acero: texto blanco y subrayado amarillo. */
.route__acts a {
	padding-block: 3px;
	color: var(--blanco);
	font-size: .78125rem;
	font-weight: 700;
	text-decoration: underline 2px var(--amarillo);
	text-underline-offset: 4px;
}

.route__acts a:hover {
	text-decoration-thickness: 3px;
}

.route__ph {
	margin: auto 0 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 88%);
	background: var(--acero);
}

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

/* --- Mapa de agencia (se carga al tocar) ------------------------------------ */

/* La caja no se coloca sola: la ubica cada página (pie de la parada en Inicio, su área en Agencias). */
.amap {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	color: var(--tinta);
	/* Vista previa solo con CSS: cuadrícula suave y una franja de marca. */
	background:
		linear-gradient(rgba(31, 60, 136, .1) 1px, transparent 1px) 0 0 / 100% 22px,
		linear-gradient(90deg, rgba(31, 60, 136, .1) 1px, transparent 1px) 0 0 / 22px 100%,
		var(--nube);
}

.route__item > .amap {
	margin-top: auto;
}

.route__ph + .amap {
	margin-top: 12px;
}

/* Con teclado el foco pasa al iframe, que no toma :focus-visible: lo marca la caja (agency-map.mjs). */
.amap.is-focus {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.amap__in {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.amap__in::before {
	content: "";
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 52%;
	width: 22%;
	background: var(--amarillo);
	opacity: .85;
	transform: skewX(var(--sk));
}

.amap__ver {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	background: var(--azul);
	color: var(--blanco);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	transform: skewX(var(--sk));
}

.amap__ver > * {
	transform: skewX(calc(var(--sk) * -1));
}

.amap__ver .icon {
	width: 18px;
	height: 18px;
}

.amap__ver:hover {
	box-shadow: 0 0 0 3px var(--amarillo);
}

.amap__ver:focus-visible {
	outline: 3px solid var(--tinta);
	outline-offset: 3px;
}

/* Fondo propio: en cajas angostas cae sobre la franja amarilla y ahí el gris no llega a AA. */
.amap__src {
	position: absolute;
	right: 8px;
	bottom: 6px;
	padding: 0 4px;
	background: var(--nube);
	font-size: .6875rem;
	color: var(--gris);
}

/* Sin fondo: mientras Google carga (o si no responde) se sigue viendo la vista previa. */
.amap__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.agencies__hours {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 30px;
	margin-top: 32px;
	font-size: var(--fs--1);
}

.agencies__hours b {
	font-weight: 700;
}

@media (max-width: 859.98px) {
	.route {
		grid-template-columns: minmax(0, 1fr);
		margin-left: 7px;
		border-top: 0;
		border-left: 2px solid var(--amarillo);
	}

	.route__item {
		padding: 0 0 26px 24px;
	}

	.route__item:last-child {
		padding-bottom: 4px;
	}

	.route__item::before {
		top: 3px;
		left: -8px;
	}

	.route__name {
		font-size: 1.625rem;
	}

	.route__ph,
	.route__item > .amap {
		max-width: 420px;
	}
}

/* --- Cierre --------------------------------------------------------------- */

.cta-final {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--blanco);
}

.cta-final__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 28px 48px;
}

.cta-final__title {
	max-width: 18ch;
	font-size: var(--fs-3);
}

.cta-final__title::before {
	content: "";
	display: inline-block;
	width: .3em;
	height: .3em;
	margin-right: .3em;
	background: var(--amarillo);
	transform: skewX(var(--sk));
	vertical-align: .12em;
}

.cta-final__lead {
	max-width: 44ch;
	margin-top: 14px;
	color: var(--gris);
	font-size: var(--fs-1);
}

.cta-final .b2 .icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 767.98px) {
	.cta-final__in {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 559.98px) {
	.cta-final__actions {
		flex-direction: column;
	}
}

/* ==========================================================================
   Créditos: índice, línea y producto
   ========================================================================== */

/* --- Migas de pan y aviso de borrador ------------------------------------- */

.crumbs {
	padding-top: 20px;
	font-size: var(--fs--2);
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Separador: el paralelogramo de marca, en pequeño. */
.crumbs__list li + li::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 11px;
	margin-inline: 10px;
	background: var(--acero);
	transform: skewX(var(--sk));
	vertical-align: -1px;
}

.crumbs a {
	color: var(--gris);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--azul);
	text-decoration: underline;
}

.crumbs [aria-current="page"] {
	color: var(--tinta);
	font-weight: 600;
}

.draft-flag {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 10px;
	background: var(--amarillo);
	color: var(--tinta);
	font-size: var(--fs--2);
	font-weight: 700;
	border-radius: var(--r-ctl);
}

/* --- Índice: encabezado --------------------------------------------------- */

.cred-head {
	padding-block: 36px 12px;
}

.cred-head__title {
	font-size: var(--fs-5);
}

.cred-head__lead {
	max-width: 36em;
	margin-top: 18px;
	color: var(--gris);
	font-size: var(--fs-1);
	line-height: 1.55;
}

.cred-head__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.cred-head__jump a {
	display: inline-block;
	padding-block: 4px;
	color: var(--tinta);
	font-size: var(--fs-1);
	font-weight: 700;
	text-decoration: underline 3px var(--amarillo);
	text-underline-offset: 6px;
}

.cred-head__jump a:hover {
	text-decoration-thickness: 6px;
}

/* --- Índice: una línea por bloque, foto y lista alternadas --------------- */

.linea {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	grid-template-areas: "ph body";
	align-items: start;
	column-gap: clamp(40px, 5vw, 80px);
	padding-block: clamp(48px, 6vw, 88px);
	scroll-margin-top: 16px;
	overflow-x: clip; /* La franja inclinada no debe crear scroll horizontal. */
}

.linea + .linea {
	border-top: 1px solid var(--linea);
}

.linea--flip {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	grid-template-areas: "body ph";
}

.linea--nofoto {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "body";
}

.linea__ph {
	grid-area: ph;
	position: relative;
	margin: 0;
	aspect-ratio: 9 / 8;
}

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

/* El corte va en un marco interno: la foto se mueve dentro (parallax). */
.linea__cut {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

/* Franja amarilla paralela al corte. */
.linea__ph::after {
	content: "";
	position: absolute;
	top: 18%;
	right: 2%;
	width: 16px;
	height: 64%;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

.linea--flip .linea__cut {
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.linea--flip .linea__ph::after {
	top: auto;
	right: auto;
	bottom: 0;
	left: 4%;
	height: 38%;
}

.linea__body {
	grid-area: body;
	padding-top: 8px;
}

.linea__title {
	font-size: var(--fs-4);
}

.linea__desc {
	max-width: 34em;
	margin: 14px 0 30px;
	color: var(--gris);
	font-size: var(--fs-1);
	line-height: 1.55;
}

.linea__more {
	display: inline-block;
	margin-top: 20px;
	padding-block: 4px;
	font-size: var(--fs--1);
	font-weight: 700;
}

/* --- Lista de productos (filas, no tarjetas) ------------------------------ */

.plist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1.5px solid var(--tinta);
}

.plist__item {
	position: relative;
	padding-block: 18px 20px;
	border-bottom: 1px solid #DBE2EE;
}

.plist__head {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); /* 26–34 */
	line-height: 1;
}

.plist__name {
	color: var(--tinta);
	text-decoration: none;
	overflow-wrap: break-word;
	transition: box-shadow .2s ease;
}

/* Toda la fila es el enlace. */
.plist__name::after {
	content: "";
	position: absolute;
	inset: 0;
}

.plist__item:hover .plist__name,
.plist__name:focus-visible {
	box-shadow: inset 0 -9px 0 var(--amarillo);
}

.plist__name:focus-visible {
	outline: none;
}

.plist__item:has(.plist__name:focus-visible) {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.plist__desc {
	max-width: 46ch;
	margin-top: 8px;
	color: var(--gris);
	font-size: var(--fs--1);
	line-height: 1.5;
}

.plist--detail .plist__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 48px;
	padding-block: 26px 28px;
}

.plist--detail .plist__head {
	grid-column: 1;
}

.plist--detail .plist__desc {
	grid-column: 1;
	font-size: var(--fs-0);
}

.plist--detail .plist__dest {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	padding-left: 18px;
	border-left: 3px solid var(--acero);
	color: var(--tinta);
	font-size: var(--fs--1);
	line-height: 1.55;
}

/* --- Depósitos: franja informativa, distinta de las líneas ---------------- */

.depo {
	padding-block: clamp(44px, 5vw, 72px);
	background: var(--nube);
}

.depo__in {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: end;
	gap: 28px 64px;
}

.depo__text {
	position: relative;
	padding-left: 56px;
}

.depo__text::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8px;
	height: 3em; /* Alto fijo: la inclinación nunca alcanza el texto. */
	width: 12px;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

.depo__title {
	font-size: var(--fs-3);
}

.depo__lead {
	max-width: 50ch;
	margin-top: 14px;
	font-size: var(--fs-1);
	line-height: 1.55;
}

.depo__act {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.depo__note {
	max-width: 30ch;
	color: var(--gris);
	font-size: var(--fs--1);
}

/* --- Encabezados de línea y de producto (estructura del hero) ------------ */

.lhead,
.phead {
	--edge: max(var(--gutter), calc((100cqw - var(--wrap)) / 2 + var(--gutter)));
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	min-height: 420px;
	margin-top: 12px;
}

.lhead--nofoto,
.phead--nofoto {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.lhead__text,
.phead__text {
	align-self: center;
	padding: 40px 48px 48px var(--edge);
}

.lhead__title,
.phead__title {
	font-size: var(--fs-5);
	line-height: .92;
	overflow-wrap: break-word;
}

.lhead__lead,
.phead__lead {
	max-width: 30em;
	margin: 20px 0 0;
	color: var(--gris);
	font-size: var(--fs-1);
	line-height: 1.55;
}

.lhead__media,
.phead__media {
	position: relative;
	margin: 0;
	background: var(--acero);
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.lhead__media img,
.phead__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lhead__media::after,
.phead__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 4%;
	width: 9%;
	height: 100%;
	background: var(--amarillo);
	transform: skewX(var(--sk));
	transform-origin: top;
}

.phead__ctas {
	margin-top: 28px;
}

.phead .b2 .icon {
	width: 18px;
	height: 18px;
}

.phead__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	margin: 32px 0 0;
}

.phead__facts div {
	padding-left: 12px;
	border-left: 2px solid var(--linea-fuerte);
}

.phead__facts dt {
	color: var(--gris);
	font-size: var(--fs--2);
}

.phead__facts dd {
	margin: 2px 0 0;
	font-size: var(--fs-0);
	font-weight: 700;
}

/* --- Página de línea: productos ------------------------------------------- */

.lbody {
	padding-block: clamp(48px, 6vw, 80px);
}

.lbody__title {
	margin-bottom: 24px;
	font-size: var(--fs-3);
}

.lbody__back {
	margin-top: 28px;
	font-size: var(--fs--1);
	font-weight: 700;
}

/* --- Producto: cuerpo y calculadora --------------------------------------- */

.pbody {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	align-items: start;
	gap: 48px clamp(40px, 6vw, 96px);
	padding-block: clamp(48px, 6vw, 88px);
}

.pbody__aside {
	position: sticky;
	top: 24px;
}

.pbody__aside .calc {
	max-width: none;
}

.pblock + .pblock {
	margin-top: clamp(40px, 4vw, 56px);
}

.pblock__title {
	margin-bottom: 16px;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); /* 28–38 */
}

.pblock__big {
	max-width: 28ch;
	font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); /* 22–28 */
	font-weight: 500;
	line-height: 1.3;
}

.pblock__text {
	max-width: 56ch;
	font-size: var(--fs-1);
	line-height: 1.6;
}

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

.prod__ben li {
	position: relative;
	max-width: 52ch;
	padding-left: 30px;
	font-size: var(--fs-1);
	line-height: 1.5;
}

.prod__ben li + li {
	margin-top: 12px;
}

.prod__ben li::before {
	content: "";
	position: absolute;
	top: .4em;
	left: 2px;
	width: 13px;
	height: 13px;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

.pblock--req {
	padding: 28px clamp(20px, 3vw, 36px) 20px;
	background: var(--nube);
	border-radius: var(--r-panel);
}

.pblock__hint {
	max-width: 52ch;
	margin: -6px 0 16px;
	color: var(--gris);
	font-size: var(--fs--1);
}

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

.prod__req li {
	position: relative;
	padding: 12px 0 12px 32px;
	font-size: var(--fs-0);
	font-weight: 600;
}

.prod__req li + li {
	border-top: 1px dashed #C6D2E4;
}

/* Marca de verificación dibujada en CSS (los requisitos no son una secuencia). */
.prod__req li::before {
	content: "";
	position: absolute;
	top: calc(12px + .2em);
	left: 4px;
	width: 7px;
	height: 13px;
	border-right: 2.5px solid var(--azul);
	border-bottom: 2.5px solid var(--azul);
	transform: rotate(40deg);
}

.pblock__mora {
	max-width: 60ch;
	margin-top: 32px;
	color: var(--gris);
	font-size: var(--fs--1);
}

.pblock__mora strong {
	color: var(--tinta);
}

/* --- Producto: otros créditos de la línea --------------------------------- */

.pmore {
	padding-bottom: clamp(56px, 6vw, 96px);
}

.pmore__title {
	margin-bottom: 20px;
	font-size: var(--fs-3);
}

.pmore .plist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	column-gap: 48px;
}

/* --- Créditos: responsive -------------------------------------------------- */

@media (max-width: 1023.98px) {
	.linea,
	.linea--flip {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"ph"
			"body";
		row-gap: 28px;
	}

	.linea--nofoto {
		grid-template-areas: "body";
	}

	.linea__ph {
		aspect-ratio: 16 / 10;
	}

	.lhead,
	.phead {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.lhead__text,
	.phead__text {
		padding: 24px var(--gutter) 32px;
	}

	.lhead__media,
	.phead__media {
		height: clamp(200px, 42vw, 360px);
		clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	}

	.pbody {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En móvil la calculadora sube justo después de "Para quién es". */
	.pbody {
		row-gap: 0;
	}

	.pbody__main {
		display: contents;
	}

	.pbody__main > * {
		order: 3;
	}

	.pbody__main > .pblock--para {
		order: 1;
	}

	.pbody__aside {
		position: static;
		order: 2;
		margin-block: 36px 44px;
	}

	.pbody__main > .pblock--para + .pblock {
		margin-top: 0;
	}

	.depo__in {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 767.98px) {
	.plist--detail .plist__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.plist--detail .plist__dest {
		grid-row: auto;
		grid-column: 1;
		margin-top: 14px;
	}
}

@media (max-width: 559.98px) {
	.phead__ctas {
		flex-direction: column;
	}

	.depo__text {
		padding-left: 40px;
	}

	.depo__text::before {
		left: 4px;
		width: 9px;
	}
}

/* --- Calculadora (página) -------------------------------------------------- */

.calcpage__head {
	max-width: 62ch;
	margin-bottom: 28px;
}

.calcpage__intro {
	margin-top: 12px;
}

.calcpage__top {
	display: grid;
	gap: 20px;
	align-items: start;
}

.calcpage__top .calc {
	max-width: none;
}

.calcpage__actions {
	display: grid;
	gap: 12px;
	align-content: start;
}

.calcpage__actions a {
	width: 100%;
	text-align: center;
}

.calcpage__table {
	margin-top: 48px;
	min-width: 0;
}

.calcpage__h2 {
	margin-bottom: 16px;
}

/* El scroll horizontal y vertical vive solo aquí; la página no se desborda. */
.amort {
	max-width: 100%;
	max-height: 560px;
	overflow: auto;
	border: 1px solid var(--acero);
	border-radius: var(--r-panel);
	background: var(--blanco);
}

.amort table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.amort caption {
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
}

.amort th,
.amort td {
	padding: 10px 16px;
	text-align: left;
	white-space: nowrap;
}

.amort .num {
	text-align: right;
}

.amort thead th {
	position: sticky;
	top: 0;
	background: var(--acero);
	font-weight: 700;
	/* Blanco sobre acero: 4.6:1 (tinta sobre acero solo da 3.5:1). */
	color: var(--blanco);
}

.amort tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, .025);
}

.amort tbody tr:last-child td {
	font-weight: 700;
}

@media (min-width: 900px) {
	.calcpage__top {
		grid-template-columns: minmax(0, 480px) minmax(0, 280px);
		gap: 32px;
	}
}

/* --- Agencias (índice) ----------------------------------------------------- */

.ags-head {
	padding-block: 36px 8px;
}

.ags-head__title {
	font-size: var(--fs-5);
}

.ags-head__lead {
	max-width: 36em;
	margin-top: 18px;
	color: var(--gris);
	font-size: var(--fs-1);
	line-height: 1.55;
}

.ags__list {
	margin: 40px auto 0;
	padding-bottom: clamp(56px, 7vw, 104px);
	list-style: none;
}

/* Una agencia por fila: no son tarjetas, solo filas separadas por líneas.
   El DOM va nombre, datos, acciones, foto, mapa (orden de tabulación); las
   áreas ponen la foto a la izquierda en escritorio. */
.ag {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "id" "data" "acts" "ph" "map";
	row-gap: 16px;
	padding-block: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--linea-fuerte);
	scroll-margin-top: 16px;
}

.ag--sinfoto {
	grid-template-areas: "id" "data" "acts" "map";
}

.ag__id { grid-area: id; }
.ag__data { grid-area: data; }
.ag__acts { grid-area: acts; }
.ag__ph { grid-area: ph; }
.ag .amap--archive { grid-area: map; }

.ag:last-child {
	border-bottom: 1px solid var(--linea-fuerte);
}

.ag__id {
	position: relative;
	padding-left: 30px;
}

/* Marcador en paralelogramo, como en la ruta de Inicio. */
.ag__id::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 13px;
	height: 13px;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

/* La oficina central: marcador más ancho y rótulo en tinta. */
.ag--central .ag__id::before {
	width: 22px;
	left: -4px;
}

.ag--central .ag__type {
	color: var(--tinta);
	font-weight: 700;
}

.ag__type,
.ag__dept {
	display: block;
	color: var(--gris);
	font-size: var(--fs--1);
}

.ag__type {
	font-weight: 600;
}

.ag__name {
	margin: 6px 0 8px;
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); /* 36–60 */
	line-height: .95;
	overflow-wrap: break-word;
}

/* Fachada: foto chica con el corte diagonal de marca. */
.ag__ph {
	width: 100%;
	max-width: 420px;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nube);
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.ag__ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mapa: mismo tamaño que la foto, con el corte espejo. */
.ag .amap--archive {
	width: 100%;
	max-width: 420px;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

/* Cargado, sin corte: taparía los controles y los avisos legales de Google (esquina inferior derecha). */
.ag .amap--archive[data-amap-loaded] {
	clip-path: none;
}

.ag .amap--archive .amap__src {
	right: 12%;
}

.ag__data {
	display: grid;
	gap: 14px;
	padding-top: 4px;
	font-size: var(--fs-0);
	line-height: 1.5;
}

.ag__addr--missing {
	color: var(--gris);
	font-style: italic;
}

.ag__hours span {
	display: block;
}

.ag__hours b {
	font-weight: 700;
}

.ag__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.ag__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tinta);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ag__tel .icon {
	width: 18px;
	height: 18px;
	color: var(--azul);
}

.ag__acts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.ag__acts .b2 .icon {
	width: 18px;
	height: 18px;
}

.ag__map {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 4px;
	color: var(--tinta);
	font-weight: 700;
	text-decoration: underline 3px var(--amarillo);
	text-underline-offset: 6px;
}

.ag__map:hover {
	text-decoration-thickness: 5px;
}

.ag__map .icon {
	width: 18px;
	height: 18px;
	color: var(--azul);
}

/* Celular y tableta: datos y acciones con la sangría del nombre; acciones en fila. */
@media (max-width: 1023.98px) {
	.ag__data,
	.ag__acts {
		padding-left: 30px;
	}

	.ag__acts {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px 24px;
	}
}

/* Desde tableta la foto y el mapa llenan su columna. */
@media (min-width: 640px) {
	.ag__ph,
	.ag .amap--archive {
		max-width: none;
	}
}

/* Tableta: nombre, datos y acciones arriba; foto y mapa lado a lado. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.ag {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "id id" "data data" "acts acts" "ph map";
		column-gap: 28px;
	}

	.ag--sinfoto {
		grid-template-areas: "id id" "data data" "acts acts" ". map";
	}
}

/* Escritorio: foto | datos y acciones | mapa. */
@media (min-width: 1024px) {
	.ag {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas:
			"id id id"
			"ph data map"
			"ph acts map"
			"ph .    map";
		grid-template-rows: auto auto auto 1fr;
		column-gap: clamp(28px, 3vw, 48px);
		row-gap: 20px;
	}

	.ag--sinfoto {
		grid-template-areas:
			"id id id"
			"data data map"
			"acts acts map"
			".    .    map";
	}

	.ag__data {
		padding-top: 0;
	}
}

/* --- Nosotros ------------------------------------------------------------- */

.nos-head__story {
	max-width: 34em;
	margin-top: 24px;
	font-size: var(--fs-1);
	line-height: 1.6;
}

.nos-head__story p + p {
	margin-top: 1em;
}

.nos-head__story p:first-child {
	font-weight: 500;
}

/* Misión y visión: dos columnas sobre azul, separadas por la diagonal. */
.mv {
	--focus: var(--amarillo);
	margin-top: clamp(40px, 5vw, 72px);
	padding-block: clamp(48px, 6vw, 88px);
	background: var(--azul);
	color: var(--blanco);
	overflow-x: clip;
}

.mv__in {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(56px, 8vw, 120px);
}

.mv__col {
	position: relative;
}

.mv__col + .mv__col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(clamp(56px, 8vw, 120px) / -2 - 4px);
	width: 8px;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

.mv__title {
	font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); /* 32–48 */
}

.mv__text {
	max-width: 30ch;
	margin-top: 18px;
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); /* 20–26 */
	font-weight: 500;
	line-height: 1.35;
}

/* Valores: lista con marcador en paralelogramo (no es una secuencia). */
.vals {
	padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px);
}

.vals__title {
	font-size: var(--fs-4);
}

.vals__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.vals__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
	align-items: baseline;
	column-gap: clamp(24px, 4vw, 64px);
	padding-block: 24px;
	border-top: 1px solid var(--linea-fuerte);
}

.vals__item:last-child {
	border-bottom: 1px solid var(--linea-fuerte);
}

.vals__name {
	position: relative;
	padding-left: 32px;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28–40 */
	line-height: 1;
}

.vals__name::before {
	content: "";
	position: absolute;
	top: .18em;
	left: 4px;
	width: 14px;
	height: 14px;
	background: var(--amarillo);
	transform: skewX(var(--sk));
}

.vals__text {
	max-width: 56ch;
	font-size: var(--fs-1);
	line-height: 1.55;
}

/* Junta directiva: foto grande con una franja amarilla detrás. */
.dirv {
	padding-bottom: clamp(56px, 7vw, 104px);
	overflow-x: clip;
}

.dirv__fig {
	max-width: 880px;
	margin: 24px 0 0;
}

.dirv__ph {
	position: relative;
	isolation: isolate;
}

.dirv__ph::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -24px;
	bottom: -20px;
	width: 26%;
	height: 56%;
	background: var(--amarillo);
	transform: skewX(var(--sk));
	transform-origin: bottom;
}

.dirv__ph img {
	width: 100%;
	border-radius: var(--r-panel);
}

.dirv__cap {
	margin-top: 32px;
	font-size: var(--fs-1);
	font-weight: 700;
}

@media (max-width: 767.98px) {
	.mv__in {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.mv__col + .mv__col {
		padding-top: 40px;
	}

	.mv__col + .mv__col::before {
		top: 0;
		bottom: auto;
		left: 4px;
		width: 72px;
		height: 6px;
		transform: none;
	}

	.vals__item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.vals__text {
		padding-left: 32px;
	}

	.dirv__ph::before {
		right: -8px;
		bottom: -12px;
	}
}

/* --- Trabaja con nosotros -------------------------------------------------- */

.job {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
	column-gap: clamp(40px, 6vw, 96px);
	padding-block: 36px clamp(56px, 7vw, 104px);
}

.job__title {
	font-size: var(--fs-5);
}

.job__intro {
	max-width: 34ch;
	margin-top: 24px;
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); /* 20–26 */
	font-weight: 500;
	line-height: 1.35;
}

.job__perks {
	margin-top: clamp(40px, 5vw, 64px);
}

.job__h2 {
	margin-bottom: 20px;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); /* 28–38 */
}

.job__apply {
	margin-top: 12px;
	padding: 28px clamp(20px, 3vw, 36px);
	background: var(--nube);
	border-radius: var(--r-panel);
}

.job__fallback {
	max-width: 40ch;
	font-size: var(--fs-0);
	line-height: 1.55;
}

.job__fallback a {
	overflow-wrap: anywhere;
}

@media (max-width: 899.98px) {
	.job {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.job__apply {
		margin-top: 0;
	}
}

/* --- Tasas y comisiones, preguntas frecuentes ------------------------------ */

.tasas-sec {
	padding-block: 8px 48px;
}

.tasas {
	max-height: none;
}

.tasas table {
	min-width: 0;
}

.tasas th,
.tasas td {
	padding: 10px 12px;
}

.tasas tbody tr:last-child td {
	font-weight: 400;
}

.tasas th[scope="row"] {
	font-weight: 700;
}

.tasas td.tasas__wrap {
	white-space: normal;
	min-width: 10em;
}

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

.tasas__list li + li {
	margin-top: 4px;
}

.tasas-notes {
	max-width: var(--medida);
	margin-top: 20px;
	color: var(--gris);
}

.tasas-notes p + p {
	margin-top: 12px;
}

.tasas-notes__date {
	color: var(--tinta);
	font-weight: 600;
}

.faq__list {
	max-width: 760px;
	margin-inline: 0;
	padding-block: 8px 56px;
}

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

.faq__item:first-of-type {
	border-top: 1px solid var(--acero);
}

.faq__q {
	padding: 18px 28px 18px 0;
	font-size: var(--fs-1);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
	overflow-wrap: anywhere;
}

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

.faq__q::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 14px;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--azul);
}

.faq__item[open] > .faq__q::after {
	content: "\2212";
}

.faq__q:focus-visible {
	outline: 3px solid var(--azul);
	outline-offset: 2px;
}

.faq__a {
	padding: 0 0 20px;
	color: var(--tinta);
}

.faq__more {
	margin-top: 28px;
	color: var(--gris);
}