/*
Theme Name: Qatúl Austral
Theme URI: https://previews.simonfarias.cl/rentacar
Author: Simón Farías
Description: Tema propio de Qatúl Austral Turismo, hecho a medida para el sistema de reservas de vehículos. Paleta tomada del logo: azul austral, terracota y blanco nieve. Sin dependencias externas ni constructores de página.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: qatul-austral
Tags: custom-theme, rentacar, woocommerce
*/

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
	/* Muestreados del logo de Qatúl Austral, no elegidos a ojo. */
	--azul: #00212f;          /* base oscura, del anillo del logo */
	--azul-oscuro: #001620;
	--azul-medio: #0d4d63;
	--azul-claro: #dff0f4;

	/* El óxido del logo, subido de saturación: mismo tono, con vida. */
	--terracota: #e0602c;
	--terracota-oscuro: #c04a1c;
	--terracota-claro: #f08a4b;

	--crema: #fff5e9;         /* crema cálida, no gris */

	/* El turquesa glaciar deja de ser un detalle y pasa a segundo color. */
	--glaciar: #10a6bd;
	--glaciar-hondo: #0b7f92;
	--glaciar-claro: #d6f2f7;
	--lenga: #f5a623;
	--lenga-claro: #fff0d8;
	--pampa: #6f9e5b;
	--pampa-claro: #eaf5e4;
	--hielo: #3f88c5;
	--hielo-claro: #e2eefb;
	--texto: #1b2a33;
	--suave: #667883;
	--borde: #dbe2e6;
	--blanco: #fff;

	--ancho: 1200px;
	--ancho-texto: 760px;
	--gutter: 24px;
	--radio: 12px;
	--sombra: 0 2px 16px rgba(0, 24, 36, .10);
	--sombra-alta: 0 12px 40px rgba(0, 24, 36, .20);

	--fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   2. Base
   ============================================================ */

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

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

body {
	margin: 0;
	font-family: var(--fuente);
	font-size: 17px;
	line-height: 1.65;
	color: var(--texto);
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	line-height: 1.15;
	color: var(--azul);
	font-weight: 700;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; }

a {
	color: var(--terracota);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover { color: var(--terracota-oscuro); }

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

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.contenedor--texto {
	max-width: var(--ancho-texto);
}

.saltar {
	position: absolute;
	left: -9999px;
}

.saltar:focus {
	left: 12px;
	top: 12px;
	z-index: 999;
	padding: 10px 16px;
	background: var(--blanco);
	border-radius: 6px;
}

/* ============================================================
   3. Cabecera
   ============================================================ */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--borde);
}

.cabecera__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
}

.marca {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--azul);
	flex-shrink: 0;
}

.marca img { max-height: 62px; width: auto; }

.marca__emblema {
	max-height: 58px;
	border-radius: 50%;
	flex-shrink: 0;
}

.marca__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.marca__nombre {
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.marca__bajada {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--terracota);
	font-weight: 600;
}

.nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

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

.nav a {
	display: block;
	padding: 9px 14px;
	border-radius: 7px;
	color: var(--azul);
	font-size: .93rem;
	font-weight: 600;
	text-decoration: none;
}

.nav a:hover,
.nav .current-menu-item > a {
	background: var(--azul-claro);
	color: var(--azul);
}

.cabecera__cta {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 7px;
	background: var(--terracota);
	color: var(--blanco) !important;
	font-weight: 700;
	font-size: .93rem;
	text-decoration: none;
	white-space: nowrap;
}

.cabecera__cta:hover { background: var(--terracota-oscuro); }

.menu-toggle {
	display: none;
	padding: 8px 12px;
	border: 1px solid var(--borde);
	border-radius: 7px;
	background: none;
	color: var(--azul);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 900px) {
	.menu-toggle { display: block; }

	.nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px var(--gutter) 18px;
		background: var(--blanco);
		border-bottom: 1px solid var(--borde);
		box-shadow: var(--sombra);
	}

	.nav.abierto { display: flex; }

	.nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav a { padding: 12px 4px; }

	.cabecera__cta { margin-top: 8px; text-align: center; }
}

/* ============================================================
   4. Portada
   ============================================================ */

.hero {
	position: relative;
	padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
	background: linear-gradient(165deg, #001824 0%, #062b3c 55%, #204858 100%);
	background-size: cover;
	background-position: center;
	color: var(--blanco);
}

/* Con foto de fondo mandan las capas que arma front-page.php. */
.hero--con-foto {
	background-size: cover;
	background-position: center;
}

.hero__titulo {
	color: var(--blanco);
	max-width: 15ch;
	margin-bottom: .35em;
}

.hero__bajada {
	max-width: 52ch;
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
	opacity: .92;
	margin-bottom: 2rem;
}

.hero__buscador { max-width: 980px; }

.hero .qr-buscador {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(6px);
	box-shadow: var(--sombra-alta);
	margin: 0;
}

.seccion {
	padding: clamp(44px, 6vw, 80px) 0;
}

.seccion--crema { background: var(--crema); }

.seccion__cabecera {
	max-width: 62ch;
	margin-bottom: 36px;
}

.seccion__cabecera p {
	color: var(--suave);
	font-size: 1.05rem;
	margin: 0;
}

.ventajas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
}

.ventaja {
	padding: 26px;
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
}

.ventaja h3 {
	font-size: 1.08rem;
	margin-bottom: .4em;
}

.ventaja p {
	margin: 0;
	color: var(--suave);
	font-size: .95rem;
}

/* ============================================================
   5. Contenido
   ============================================================ */

.contenido {
	padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 7vw, 88px);
}

.entrada__titulo { margin-bottom: .3em; }

.entrada__meta {
	color: var(--suave);
	font-size: .9rem;
	margin-bottom: 2rem;
}

.entrada__cuerpo > * { max-width: var(--ancho-texto); }

.entrada__cuerpo > .qr-pagina-resultados,
.entrada__cuerpo > .qr-ficha-vehiculo,
.entrada__cuerpo > .alignwide,
.entrada__cuerpo > .alignfull {
	max-width: none;
}

.entrada__cuerpo h2 { margin-top: 1.6em; }
.entrada__cuerpo h3 { margin-top: 1.4em; }

.entrada__cuerpo ul,
.entrada__cuerpo ol { padding-left: 1.3em; }

.entrada__cuerpo li { margin-bottom: .4em; }

blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--terracota);
	color: var(--suave);
	font-size: 1.05rem;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
}

th, td {
	padding: 10px 12px;
	border: 1px solid var(--borde);
	text-align: left;
}

th { background: var(--crema); font-weight: 700; }

/* ============================================================
   6. Pie
   ============================================================ */

.pie {
	background: var(--azul-oscuro);
	color: rgba(255, 255, 255, .78);
	padding: clamp(40px, 5vw, 64px) 0 28px;
	font-size: .95rem;
}

.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }

.pie__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.pie__titulo {
	color: var(--blanco);
	font-size: 1rem;
	margin-bottom: .8em;
	text-transform: uppercase;
	letter-spacing: .08em;
}

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

.pie li { margin-bottom: .5em; }

.pie__marca .marca__nombre { color: var(--blanco); font-size: 1.25rem; }
.pie__marca p { margin: .6em 0 0; max-width: 34ch; }

.pie__autor a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.pie__autor a:hover {
	color: #fff;
	border-bottom-color: var(--terracota);
	text-decoration: none;
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding-top: 22px;
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
}

/* ============================================================
   7. WooCommerce
   ============================================================ */

.woocommerce-page .contenido { padding-top: 32px; }

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--terracota);
	color: var(--blanco);
	border-radius: 7px;
	font-weight: 700;
	padding: 12px 22px;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--terracota-oscuro);
	color: var(--blanco);
}

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--azul);
	background: var(--azul-claro);
}

.woocommerce-info::before,
.woocommerce-message::before { color: var(--azul); }

.woocommerce-error {
	border-top-color: var(--terracota);
	background: #fdecea;
}

.woocommerce table.shop_table {
	border-radius: var(--radio);
	border-color: var(--borde);
}

.woocommerce-checkout #payment {
	background: var(--crema);
	border-radius: var(--radio);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	padding: 11px 13px;
	border: 1px solid var(--borde);
	border-radius: 7px;
	font-family: inherit;
	font-size: 1rem;
	min-height: 46px;
}

.woocommerce form .form-row label { font-weight: 600; font-size: .92rem; }

/* ============================================================
   8. Utilidades
   ============================================================ */

.aviso-preview {
	background: var(--terracota);
	color: var(--blanco);
	text-align: center;
	padding: 7px var(--gutter);
	font-size: .8rem;
	letter-spacing: .04em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media print {
	.cabecera, .pie, .hero__buscador, .aviso-preview { display: none !important; }
}


/* ============================================================
   9. Apoyo visual: textura, cordillera y movimiento
   ============================================================ */

/* Trama topográfica sutil, en SVG embebido: no pide ninguna descarga. */
.seccion--crema,
.hero {
	position: relative;
}

.seccion--crema::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23001824' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M-20 60 Q 20 30 60 60 T 140 60'/%3E%3Cpath d='M-20 80 Q 20 50 60 80 T 140 80'/%3E%3Cpath d='M-20 100 Q 20 70 60 100 T 140 100'/%3E%3Cpath d='M-20 40 Q 20 10 60 40 T 140 40'/%3E%3Cpath d='M-20 20 Q 20 -10 60 20 T 140 20'/%3E%3C/g%3E%3C/svg%3E");
}

.seccion--crema > .contenedor {
	position: relative;
	z-index: 1;
}

/* Grano fino sobre el hero para que el degradado no se vea plano. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .16;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)' opacity='.22'/%3E%3C/svg%3E");
}

.hero > .contenedor {
	position: relative;
	z-index: 2;
}

.cordillera {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	line-height: 0;
	pointer-events: none;
}

.cordillera svg {
	display: block;
	width: 100%;
	height: clamp(70px, 9vw, 140px);
}

.cordillera__lejana { fill: rgba(255, 255, 255, .07); }
.cordillera__cercana { fill: #fff; }

.seccion--crema + .seccion .cordillera__cercana,
.hero + .seccion--crema .cordillera__cercana { fill: var(--crema); }

/* Entrada al hacer scroll. */
[data-revelar] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s ease;
	will-change: opacity, transform;
}

[data-revelar].visible {
	opacity: 1;
	transform: none;
}

.ventaja[data-revelar]:nth-child(2) { transition-delay: .08s; }
.ventaja[data-revelar]:nth-child(3) { transition-delay: .16s; }
.ventaja[data-revelar]:nth-child(4) { transition-delay: .24s; }

.ventaja {
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, opacity .55s ease;
}

.ventaja::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--terracota);
	border-radius: 0 0 3px 0;
}

.ventaja:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra);
}

/* El hero entra con un fundido corto al cargar. */
.hero__titulo,
.hero__bajada,
.hero__buscador {
	animation: qa-entrada .7s cubic-bezier(.2, .7, .3, 1) both;
}

.hero__bajada { animation-delay: .1s; }
.hero__buscador { animation-delay: .2s; }

@keyframes qa-entrada {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* Nadie debería marearse con nuestra portada. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	[data-revelar] { opacity: 1; transform: none; }
}


/* ============================================================
   10. Portada ampliada
   ============================================================ */

.icono {
	width: 1.45em;
	height: 1.45em;
	flex-shrink: 0;
}

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

.hero__kicker {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(4px);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.hero__titulo {
	max-width: 17ch;
	text-shadow: 0 2px 24px rgba(0, 16, 26, .45);
}

.hero__bajada {
	text-shadow: 0 1px 14px rgba(0, 16, 26, .5);
}

.hero__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
	color: rgba(255, 255, 255, .92);
}

.hero__sellos li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hero__sellos .icono { color: var(--lenga); }

/* ---------- Encabezados de sección ---------- */

.seccion__kicker {
	display: block;
	margin-bottom: 8px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terracota);
}

.seccion__cabecera--centrada {
	max-width: 58ch;
	margin-inline: auto;
	text-align: center;
}

.seccion--oscura {
	background: linear-gradient(170deg, #001824 0%, #062b3c 100%);
	color: rgba(255, 255, 255, .84);
}

.seccion--oscura h2,
.seccion--oscura h3 { color: #fff; }
.seccion--oscura .seccion__kicker { color: var(--lenga); }
.seccion--oscura .seccion__cabecera p { color: rgba(255, 255, 255, .78); }

.seccion--flota { padding-top: clamp(40px, 5vw, 64px); }

/* ---------- Destinos ---------- */

.destinos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
}

.destino {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radio);
	overflow: hidden;
	transition: transform .22s ease, border-color .22s ease, opacity .55s ease;
}

.destino:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, .28);
}

.destino__foto {
	position: relative;
	aspect-ratio: 3 / 2;
	min-height: 0;
	overflow: hidden;
}

.destino__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.destino:hover .destino__foto img { transform: scale(1.06); }

.destino__icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: -46px 0 14px;
	border-radius: 13px;
	border: 3px solid var(--azul);
	color: #fff;
	position: relative;
	box-shadow: 0 6px 18px rgba(0, 16, 26, .4);
}

.destino--glaciar .destino__icono { background: var(--glaciar); }
.destino--lenga .destino__icono { background: var(--lenga); }
.destino--pampa .destino__icono { background: var(--pampa); }
.destino--hielo .destino__icono { background: var(--hielo); }

.destino__cuerpo { padding: 18px; }

.destino__cuerpo h3 { font-size: 1.1rem; margin-bottom: .25em; }

.destino__dato {
	margin: 0 0 .6em;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lenga);
}

.destino__cuerpo p {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
}

/* ---------- Pasos ---------- */

.pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.paso {
	position: relative;
	padding-top: 14px;
	border-top: 3px solid var(--borde);
}

.paso:nth-child(1) { border-top-color: var(--terracota); }
.paso:nth-child(2) { border-top-color: var(--glaciar); }
.paso:nth-child(3) { border-top-color: var(--pampa); }

.paso__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--azul);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
}

.paso h3 { font-size: 1.1rem; margin-bottom: .3em; }
.paso p { margin: 0; color: var(--suave); font-size: .95rem; }

/* ---------- Ventajas con icono ---------- */

.ventaja__icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 12px;
	color: var(--azul);
	background: var(--azul-claro);
}

.ventaja--glaciar .ventaja__icono { background: var(--glaciar-claro); color: var(--glaciar); }
.ventaja--lenga .ventaja__icono { background: var(--lenga-claro); color: var(--lenga); }
.ventaja--pampa .ventaja__icono { background: var(--pampa-claro); color: var(--pampa); }
.ventaja--hielo .ventaja__icono { background: var(--hielo-claro); color: var(--hielo); }

.ventaja--glaciar::after { background: var(--glaciar); }
.ventaja--lenga::after { background: var(--lenga); }
.ventaja--pampa::after { background: var(--pampa); }
.ventaja--hielo::after { background: var(--hielo); }

/* ---------- Galería ---------- */

.seccion--galeria { background: var(--crema); }

.galeria {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 168px;
	gap: 14px;
}

.galeria__item {
	position: relative;
	margin: 0;
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--azul-claro);
}

.galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.galeria__item:hover img { transform: scale(1.05); }

.galeria__item figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 24px 14px 12px;
	background: linear-gradient(180deg, transparent, rgba(0, 16, 26, .82));
	color: #fff;
	font-size: .82rem;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
}

.galeria__item:hover figcaption,
.galeria__item:focus-within figcaption {
	opacity: 1;
	transform: none;
}

.galeria__item--1 { grid-column: span 2; grid-row: span 2; }
.galeria__item--2 { grid-column: span 2; }
.galeria__item--3 { grid-row: span 2; }

@media (max-width: 820px) {
	.galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.galeria__item--1 { grid-column: span 2; }
	.galeria__item--2 { grid-column: span 2; grid-row: auto; }
	.galeria__item--3 { grid-row: auto; }
}

/* ---------- Llamado final ---------- */

.cta {
	background-size: cover;
	background-position: center;
	padding: clamp(60px, 9vw, 120px) 0;
	color: #fff;
}

.cta__caja { max-width: 46ch; }

.cta h2 { color: #fff; }

.cta p {
	font-size: 1.06rem;
	color: rgba(255, 255, 255, .9);
	margin-bottom: 1.6em;
}

.qa-boton {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 8px;
	background: var(--terracota);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 16, 26, .3);
	transition: background .18s ease, transform .18s ease;
}

.qa-boton:hover {
	background: var(--terracota-oscuro);
	transform: translateY(-2px);
}

/* ============================================================
   11. Rediseño: tipografía, escala y profundidad
   ============================================================ */

:root {
	--display: "Fraunces", Georgia, "Times New Roman", serif;
	--fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
	font-family: var(--fuente);
	font-size: 17px;
	letter-spacing: -.005em;
}

h1, h2, h3,
.marca__nombre,
.qr-precio-total,
.hero__titulo {
	font-family: var(--display);
	font-optical-sizing: auto;
	letter-spacing: -.025em;
}

h1, .hero__titulo {
	font-weight: 900;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.02;
}

h2 {
	font-weight: 700;
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	line-height: 1.08;
}

h3 {
	font-weight: 700;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	line-height: 1.2;
}

.seccion__kicker,
.hero__kicker {
	font-family: var(--fuente);
	font-weight: 700;
}

.seccion__cabecera p,
.hero__bajada {
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	line-height: 1.6;
}

.seccion { padding: clamp(60px, 8vw, 116px) 0; }

.seccion__cabecera { margin-bottom: 48px; }

/* ---------- Banda de datos ---------- */

.datos {
	background: linear-gradient(100deg, var(--terracota) 0%, #8a3c1e 100%);
	color: #fff;
	padding: 0;
}

.datos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.dato {
	padding: clamp(28px, 4vw, 46px) 22px;
	border-right: 1px solid rgba(255, 255, 255, .18);
	text-align: center;
}

.dato:last-child { border-right: 0; }

.dato__num {
	display: block;
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -.03em;
}

.dato__txt {
	display: block;
	margin-top: 8px;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .88;
}

@media (max-width: 700px) {
	.dato { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
}

/* ---------- Sección con foto a sangre ---------- */

.franja {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--crema);
}

.franja--invertida .franja__foto { order: 2; }

.franja__foto {
	position: relative;
	min-height: 440px;
	background-size: cover;
	background-position: center;
}

.franja__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(0, 24, 36, .18), transparent 60%);
}

.franja__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 6vw, 86px) clamp(24px, 5vw, 78px);
	max-width: 640px;
}

.franja__texto { color: var(--texto); }
.franja__texto p { color: var(--suave); }

.franja--oscura { background: linear-gradient(160deg, #001824, #062b3c); }

/* El color se pone en el contenedor, no solo en los <p>: los <li> quedaban
   con el color de texto del body, casi negro sobre azul oscuro. */
.franja--oscura .franja__texto,
.franja--oscura .franja__texto p,
.franja--oscura .franja__lista li,
.franja--oscura .franja__lista span {
	color: rgba(255, 255, 255, .85);
}

.franja--oscura h2 { color: #fff; }

.franja__lista {
	margin: 10px 0 26px;
	padding: 0;
	list-style: none;
}

.franja__lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(0, 24, 36, .08);
	font-size: .98rem;
}

.franja--oscura .franja__lista li { border-bottom-color: rgba(255, 255, 255, .12); }

.franja__lista .icono {
	color: var(--terracota);
	margin-top: 2px;
}

.franja--oscura .franja__lista .icono { color: var(--lenga); }

@media (max-width: 860px) {
	.franja { grid-template-columns: 1fr; }
	.franja--invertida .franja__foto { order: 0; }
	.franja__foto { min-height: 260px; }
	.franja__texto { max-width: none; }
}

/* ============================================================
   12. Tarjetas de vehículo, rediseñadas desde el tema
   ============================================================ */

.qr-grid-vehiculos { gap: 30px; }

.qr-card-vehiculo {
	border: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 24, 36, .08), 0 12px 32px -18px rgba(0, 24, 36, .45);
	transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
	overflow: hidden;
}

.qr-card-vehiculo:hover {
	transform: translateY(-6px);
	box-shadow: 0 2px 6px rgba(0, 24, 36, .1), 0 28px 54px -24px rgba(0, 24, 36, .55);
}

.qr-card-vehiculo__foto {
	aspect-ratio: 16 / 10;
	border-radius: 0;
}

.qr-card-vehiculo__foto img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.qr-card-vehiculo:hover .qr-card-vehiculo__foto img { transform: scale(1.07); }

.qr-card-vehiculo__categoria {
	top: 14px;
	left: 14px;
	padding: 6px 13px;
	background: var(--terracota);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	box-shadow: 0 4px 14px rgba(0, 24, 36, .28);
}

.qr-card-vehiculo__cuerpo {
	gap: 14px;
	padding: 22px 22px 24px;
}

.qr-card-vehiculo__titulo {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.42rem;
	letter-spacing: -.02em;
}

/* La ficha pasa de lista suelta a fichas con contorno. */
.qr-card-vehiculo .qr-ficha {
	gap: 7px;
	font-size: .78rem;
}

.qr-card-vehiculo .qr-ficha__item {
	padding: 5px 11px;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: #fbfcfc;
	color: var(--texto);
	font-weight: 500;
	white-space: nowrap;
}

.qr-card-vehiculo__precio {
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--borde);
}

.qr-card-vehiculo .qr-precio-total {
	font-family: var(--display);
	font-weight: 900;
	font-size: 2.1rem;
	color: var(--terracota);
	letter-spacing: -.035em;
}

.qr-card-vehiculo .qr-precio-detalle {
	font-size: .86rem;
	font-weight: 500;
}

.qr-card-vehiculo__garantia {
	font-size: .78rem;
	line-height: 1.45;
}

.qr-card-vehiculo__cta {
	margin-top: 4px;
	padding: 14px 20px;
	border-radius: 9px;
	font-size: .97rem;
	letter-spacing: .01em;
}

/* ---------- Ajustes de los otros bloques ---------- */

.ventaja,
.destino,
.galeria__item { border-radius: 16px; }

.ventaja {
	padding: 30px 26px;
	box-shadow: 0 1px 3px rgba(0, 24, 36, .05);
}

.ventaja::after { width: 52px; height: 4px; }

.destino { border-radius: 16px; }

.hero__titulo { max-width: 15ch; }

.paso__num {
	width: 42px;
	height: 42px;
	font-family: var(--display);
	font-weight: 900;
	font-size: 1.1rem;
}

.qr-boton { border-radius: 9px; font-weight: 600; }

.qa-boton { border-radius: 9px; font-size: 1.02rem; }

/* ============================================================
   13. Color con vida
   ============================================================ */

.hero {
	background: linear-gradient(165deg, #00212f 0%, #0b4a5e 55%, #10a6bd 140%);
}

.hero__kicker {
	border-color: rgba(16, 166, 189, .55);
	background: rgba(16, 166, 189, .18);
	color: #9fe8f4;
}

.hero__sellos .icono { color: var(--lenga); }

.seccion__kicker { color: var(--glaciar-hondo); }
.seccion--oscura .seccion__kicker,
.franja--oscura .seccion__kicker { color: var(--lenga); }

/* Banda de datos: degradado de atardecer, no un plano. */
.datos {
	background: linear-gradient(100deg, #e0602c 0%, #f5a623 100%);
}

.dato__num { text-shadow: 0 2px 10px rgba(0, 33, 47, .18); }

/* Sección oscura con un resplandor turquesa: deja de verse plana. */
.seccion--oscura,
.franja--oscura {
	position: relative;
	background: radial-gradient(120% 90% at 85% 15%, rgba(16, 166, 189, .26) 0%, transparent 55%),
		linear-gradient(165deg, #00212f 0%, #063142 100%);
}

.destino__cuerpo h3 { color: #fff; }
.destino__dato { color: var(--lenga); }

/* Cada categoría de vehículo con su color. */
.qr-grid-vehiculos > .qr-card-vehiculo:nth-child(3n+1) .qr-card-vehiculo__categoria { background: var(--glaciar); }
.qr-grid-vehiculos > .qr-card-vehiculo:nth-child(3n+2) .qr-card-vehiculo__categoria { background: var(--terracota); }
.qr-grid-vehiculos > .qr-card-vehiculo:nth-child(3n+3) .qr-card-vehiculo__categoria { background: var(--pampa); }

.qr-card-vehiculo__cta {
	background: linear-gradient(100deg, var(--terracota), #ef7a3c);
}

.qr-card-vehiculo__cta:hover {
	background: linear-gradient(100deg, var(--terracota-oscuro), var(--terracota));
}

.qa-boton,
.cabecera__cta {
	background: linear-gradient(100deg, var(--terracota), #ef7a3c);
}

.qr-buscador {
	background: linear-gradient(150deg, rgba(0, 33, 47, .82), rgba(13, 77, 99, .78));
	border: 1px solid rgba(16, 166, 189, .3);
}

.qr-boton--primario {
	background: linear-gradient(100deg, var(--terracota), #f5842f);
}

.paso:nth-child(1) { border-top-color: var(--terracota); }
.paso:nth-child(2) { border-top-color: var(--glaciar); }
.paso:nth-child(3) { border-top-color: var(--lenga); }

.seccion--galeria { background: linear-gradient(180deg, var(--crema), #fff9f1); }

/* ============================================================
   14. Móvil
   ============================================================ */

.barra-movil { display: none; }

@media (max-width: 860px) {

	body { font-size: 16px; }

	h1, .hero__titulo { font-size: clamp(2.1rem, 9vw, 2.9rem); }
	h2 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
	h3 { font-size: 1.12rem; }

	.seccion { padding: 52px 0; }
	.seccion__cabecera { margin-bottom: 30px; }

	.hero { padding: 40px 0 34px; }
	.hero__titulo { max-width: none; }
	.hero__bajada { margin-bottom: 1.4rem; font-size: 1.02rem; }

	/* Los sellos del hero en fila desplazable, no apilados. */
	.hero__sellos {
		gap: 8px 16px;
		font-size: .86rem;
	}

	/* Datos en 2x2: cuatro filas apiladas era una escalera. */
	.datos__grid { grid-template-columns: 1fr 1fr; }

	.dato {
		padding: 22px 12px;
		border-right: 1px solid rgba(255, 255, 255, .2);
		border-bottom: 1px solid rgba(255, 255, 255, .2);
	}

	.dato:nth-child(2n) { border-right: 0; }
	.dato:nth-child(n+3) { border-bottom: 0; }
	.dato__num { font-size: 1.9rem; }
	.dato__txt { font-size: .7rem; letter-spacing: .05em; }

	.franja__texto { padding: 36px 22px 42px; }
	.franja__foto { min-height: 230px; }
	.franja__lista li { padding: 11px 0; font-size: .95rem; }

	.ventaja { padding: 24px 20px; }
	.destino__cuerpo { padding: 16px; }

	.galeria { gap: 10px; }
	.galeria__item figcaption { opacity: 1; transform: none; font-size: .74rem; }

	.cta { padding: 56px 0 74px; }
	.cta__caja { max-width: none; }

	.pie { padding: 44px 0 100px; }
	.pie__grid { gap: 26px; }

	/* Toda zona pulsable con 44px de alto mínimo. */
	.qr-boton,
	.qa-boton,
	.cabecera__cta,
	.qr-card-vehiculo__cta,
	.nav a { min-height: 46px; display: flex; align-items: center; justify-content: center; }

	.qr-campo input,
	.qr-campo select { min-height: 50px; font-size: 16px; } /* 16px evita el zoom de iOS */

	.qr-grupo { flex: 1 1 100%; }
	.qr-grid-vehiculos { grid-template-columns: 1fr; gap: 20px; }
	.qr-card-vehiculo__foto { aspect-ratio: 16 / 9; }

	/* Barra fija de reserva: el patrón que convierte en móvil. */
	.barra-movil {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(0, 33, 47, .97);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(16, 166, 189, .35);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .3);
	}

	.barra-movil__precio {
		display: flex;
		flex-direction: column;
		line-height: 1.1;
		color: #fff;
	}

	.barra-movil__desde {
		font-size: .66rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .62);
	}

	.barra-movil__monto {
		font-family: var(--display);
		font-weight: 900;
		font-size: 1.32rem;
		color: var(--lenga);
	}

	.barra-movil .qa-boton {
		flex: 1 1 auto;
		max-width: 62%;
		padding: 13px 18px;
		font-size: .97rem;
	}
}

@media (max-width: 430px) {
	.marca__bajada { display: none; }
	.marca__emblema { max-height: 44px; }
	.marca__nombre { font-size: 1rem; }
	.cabecera__inner { min-height: 64px; gap: 10px; }
	.contenedor { padding-inline: 18px; }
	.hero__kicker { font-size: .68rem; padding: 5px 11px; }
	.galeria { grid-template-columns: 1fr; grid-auto-rows: 190px; }
	.galeria__item--1, .galeria__item--2 { grid-column: span 1; }
	.dato__num { font-size: 1.65rem; }
}

/* Ajustes finos del buscador en móvil: el campo de fecha se cortaba contra el
   icono nativo del calendario, y las etiquetas de una y dos líneas dejaban los
   campos desalineados. */
@media (max-width: 860px) {
	/* 134px es lo que necesita "10:00 a. m." con el icono nativo del reloj. */
	.qr-grupo .qr-campo--hora {
		flex: 0 0 134px;
		width: 134px;
	}

	.qr-campo input[type="time"] { font-size: 15px; }

	.qr-campo input,
	.qr-campo select { padding-inline: 9px; }

	.qr-grupo .qr-campo label {
		display: flex;
		align-items: flex-end;
		min-height: 2.5em;
		line-height: 1.15;
	}

	.qr-buscador__campos { gap: 12px; }
}

@media (max-width: 400px) {
	.qr-grupo .qr-campo--hora {
		flex: 0 0 126px;
		width: 126px;
	}

	.qr-campo input[type="date"] { font-size: 15px; }
	.qr-campo input[type="time"] { font-size: 14px; padding-inline: 7px; }
}

/* ============================================================
   15. Rediseño v3: lo que separa esto de los competidores
   ============================================================ */

:root {
	--crema: #f6f9fa;          /* el beige leía a 2015; neutro frío */
	--gris-suave: #eef3f5;
	--borde: #dde5e9;
}

/* ---------- El buscador deja de ser un panel oscuro ---------- */

.hero .qr-buscador,
.qr-buscador {
	background: #fff;
	border: 0;
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 28px 64px -22px rgba(0, 24, 36, .55), 0 2px 8px rgba(0, 24, 36, .08);
	backdrop-filter: none;
}

.qr-buscador .qr-campo label {
	color: #5b7080;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	opacity: 1;
}

.qr-buscador .qr-campo input,
.qr-buscador .qr-campo select {
	border: 1.5px solid var(--borde);
	background: #fff;
	color: var(--texto);
	border-radius: 10px;
}

.qr-buscador .qr-campo input:focus,
.qr-buscador .qr-campo select:focus {
	outline: none;
	border-color: var(--glaciar);
	box-shadow: 0 0 0 3px rgba(16, 166, 189, .18);
}

.qr-buscador__nota {
	color: #6b8090;
	opacity: 1;
	font-size: .8rem;
}

.qr-campo--fijo .qr-lugar-fijo {
	background: var(--gris-suave);
	color: var(--texto);
	border-radius: 10px;
	min-height: 50px;
	display: flex;
	align-items: center;
	font-weight: 600;
}

.qr-buscador__titulo { color: var(--azul); }

/* ---------- Fuera el zigzag: era una moda de 2016 ---------- */

.cordillera { display: none; }

/* ---------- Acento manuscrito en el H1, como hace la competencia local ---------- */

.hero__titulo em {
	font-style: italic;
	font-weight: 500;
	color: var(--lenga);
	letter-spacing: -.01em;
}

/* ---------- Secciones sin beige ---------- */

.seccion--crema { background: var(--crema); }
.seccion--crema::before { opacity: .22; }
.seccion--galeria { background: linear-gradient(180deg, var(--crema), #fff); }
/* Con :not, porque esta regla va más abajo en la hoja que .franja--oscura y
   tiene la misma especificidad: sin el :not le pisaba el fondo oscuro a la
   franja de «Parar donde tú quieras» y el texto blanco quedaba sobre crema. */
.franja:not(.franja--oscura) { background: var(--crema); }

/* ---------- Cabecera con barra de utilidades y menú real ---------- */

.utilidad {
	background: var(--azul);
	color: rgba(255, 255, 255, .82);
	font-size: .82rem;
}

.utilidad__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 22px;
	min-height: 40px;
	padding-block: 7px;
}

.utilidad__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.utilidad__item .icono {
	width: 1.05em;
	height: 1.05em;
	color: var(--glaciar);
}

.utilidad a { color: #fff; text-decoration: none; }
.utilidad a:hover { color: var(--lenga); }

.nav a { font-size: .92rem; }

.nav .current-menu-item > a,
.nav a:hover {
	background: transparent;
	color: var(--terracota);
}

.nav a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 3px;
	border-radius: 2px;
	background: var(--terracota);
	transform: scaleX(0);
	transition: transform .18s ease;
}

.nav a:hover::after { transform: scaleX(1); }

@media (max-width: 900px) {
	.utilidad__inner { justify-content: center; font-size: .76rem; }
	.utilidad__item--horario { display: none; }
	.nav a::after { display: none; }
}

/* ---------- Tarjetas: menos sombra difusa, más definición ---------- */

.qr-card-vehiculo {
	border: 1px solid var(--borde);
	box-shadow: 0 1px 2px rgba(0, 24, 36, .04);
}

.qr-card-vehiculo:hover {
	border-color: transparent;
	box-shadow: 0 2px 6px rgba(0, 24, 36, .08), 0 24px 48px -22px rgba(0, 24, 36, .5);
}

.ventaja {
	border: 1px solid var(--borde);
	box-shadow: none;
}

/* ============================================================
   16. Alineado a la referencia: sans pesada, cabecera oscura,
       píldoras, CTA amarillo y foto de fondo en más secciones
   ============================================================ */

:root {
	--display: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
	--manuscrita: "Fraunces", Georgia, serif;
	--amarillo: #ffc42e;
	--amarillo-hondo: #eaa800;
}

h1, h2, h3,
.marca__nombre,
.qr-precio-total,
.dato__num,
.paso__num,
.qr-card-vehiculo__titulo,
.barra-movil__monto {
	font-family: var(--display);
	letter-spacing: -.03em;
}

h1, .hero__titulo { font-weight: 800; line-height: 1.04; }
h2 { font-weight: 800; }
h3 { font-weight: 700; letter-spacing: -.02em; }

/* El acento manuscrito se queda: es lo que da el tono turístico. */
.hero__titulo em {
	font-family: var(--manuscrita);
	font-style: italic;
	font-weight: 600;
	color: var(--amarillo);
	letter-spacing: -.005em;
}

/* ---------- Cabecera oscura ---------- */

.utilidad { display: none; }

.cabecera {
	background: rgba(0, 20, 30, .92);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cabecera__inner { min-height: 84px; }

.marca { color: #fff; }
.marca__nombre { color: #fff; font-weight: 800; }
.marca__bajada { color: var(--glaciar); }

.nav a { color: rgba(255, 255, 255, .88); font-weight: 600; }
.nav a:hover,
.nav .current-menu-item > a { color: var(--amarillo); background: transparent; }
.nav a::after { background: var(--amarillo); }

.cabecera__cta {
	background: var(--glaciar);
	color: #001420 !important;
	border-radius: 999px;
	font-weight: 700;
	padding: 11px 24px;
}

.cabecera__cta:hover { background: #3cc4d8; color: #001420 !important; }

.menu-toggle {
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

@media (max-width: 900px) {
	.nav {
		background: rgba(0, 20, 30, .98);
		border-bottom-color: rgba(255, 255, 255, .1);
	}
}

/* ---------- Hero: píldoras en vez de lista de sellos ---------- */

.hero { padding-top: clamp(56px, 8vw, 104px); }

.hero__kicker {
	border: 0;
	background: transparent;
	padding: 0;
	margin-bottom: 18px;
	color: var(--glaciar);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .14em;
	backdrop-filter: none;
}

.hero__sellos {
	gap: 10px;
	margin: 0 0 26px;
}

.hero__sellos li {
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(6px);
	font-weight: 600;
	font-size: .9rem;
	color: #fff;
}

.hero__sellos .icono { color: var(--amarillo); width: 1.1em; height: 1.1em; }

/* ---------- El botón de buscar, amarillo ---------- */

.qr-buscador .qr-boton--primario,
.qr-buscador__accion .qr-boton {
	background: var(--amarillo);
	color: #1a1200;
	font-weight: 800;
	font-size: 1.04rem;
	letter-spacing: -.01em;
	box-shadow: 0 8px 22px -8px rgba(234, 168, 0, .8);
}

.qr-buscador .qr-boton--primario:hover,
.qr-buscador__accion .qr-boton:hover {
	background: var(--amarillo-hondo);
	color: #1a1200;
}

/* ---------- Más fotos de fondo ---------- */

.seccion--conimagen {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	color: #fff;
}

.seccion--conimagen::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 20, 30, .9), rgba(0, 33, 47, .94));
}

.seccion--conimagen > .contenedor { position: relative; z-index: 1; }
.seccion--conimagen h2 { color: #fff; }
.seccion--conimagen .seccion__cabecera p { color: rgba(255, 255, 255, .82); }
.seccion--conimagen .seccion__kicker { color: var(--amarillo); }

.seccion--conimagen .paso {
	padding: 22px;
	border-top: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
}

.seccion--conimagen .paso h3 { color: #fff; }
.seccion--conimagen .paso p { color: rgba(255, 255, 255, .78); }
.seccion--conimagen .paso__num { background: var(--amarillo); color: #1a1200; }

.datos {
	position: relative;
	background: linear-gradient(100deg, rgba(224, 96, 44, .96), rgba(245, 166, 35, .94)), var(--terracota);
	background-size: cover;
	background-position: center;
}

.dato__num { color: #fff; }


/* ============================================================
   17. El paisaje tiene que verse
   ============================================================ */

/* El velo del hero estaba en el atributo style de la plantilla, uniforme y muy
   cargado: la foto de las Torres quedaba en barro. Ahora vive acá, es
   direccional (oscuro donde va el texto, casi limpio donde está el paisaje) y
   puede cambiar en móvil, donde el texto sí cruza toda la foto. */
.hero--con-foto {
	background-repeat: no-repeat;
	background-position: center bottom;
}

.hero--con-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(101deg, rgba(0, 20, 31, .94) 0%, rgba(0, 22, 34, .78) 32%, rgba(0, 24, 37, .26) 62%, rgba(0, 24, 37, .04) 100%),
		linear-gradient(180deg, rgba(0, 16, 26, .45) 0%, transparent 24%, transparent 78%, rgba(0, 20, 31, .42) 100%);
}

@media (max-width: 900px) {
	/* En vertical el titular cruza la foto entera, así que el velo vuelve a ser
	   de arriba a abajo. Se mantiene cargado donde va el texto y se abre en la
	   mitad baja, que es justo donde quedan el lago y los Cuernos. */
	.hero--con-foto::before {
		background: linear-gradient(180deg, rgba(0, 20, 31, .86) 0%, rgba(0, 22, 34, .74) 34%, rgba(0, 24, 37, .30) 62%, rgba(0, 26, 40, .52) 100%);
	}

	.hero--con-foto { background-position: 54% bottom; }
}

/* Los botones de las tarjetas seguían con el degradado naranja del primer
   diseño, que es justo lo que se veía anticuado. Color plano y pastilla. */
.qr-card-vehiculo .qr-boton,
.qr-card-vehiculo__acciones .qr-boton {
	background: var(--terracota);
	background-image: none;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 6px 18px rgba(224, 96, 44, .26);
}

.qr-card-vehiculo .qr-boton:hover,
.qr-card-vehiculo__acciones .qr-boton:hover {
	background: var(--terracota-oscuro, #b34a1f);
	background-image: none;
	transform: translateY(-1px);
}

/* Los sellos van debajo de la tarjeta de búsqueda y habían quedado pegados a
   ella: sin margen superior parecían parte del formulario. */
.hero__sellos {
	margin: 28px 0 4px;
}

@media (max-width: 900px) {
	.hero__sellos { margin: 20px 0 4px; }
}

/* Y el hero necesitaba un poco más de aire abajo para que la fila de sellos no
   quede rozando el borde de la sección. */
.hero { padding-bottom: clamp(52px, 7vw, 88px); }

/* ============================================================
   18. Legibilidad sobre las fotos de fondo
   ============================================================ */

/* La banda de datos declaraba su velo con `background`, pero la plantilla pone
   la foto en el atributo style del propio <section>: el inline ganaba y la
   sección quedaba sin velo. Sobre la nieve del glaciar el texto blanco
   desaparecía, sobre todo en móvil. El velo pasa a una capa propia. */
.datos { position: relative; }

.datos::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(0, 24, 36, .82) 0%, rgba(0, 33, 47, .68) 50%, rgba(0, 24, 36, .82) 100%);
}

.datos > * { position: relative; z-index: 1; }

.dato__num,
.dato__txt { text-shadow: 0 2px 12px rgba(0, 20, 31, .55); }

.dato__txt { opacity: 1; color: rgba(255, 255, 255, .9); }

@media (max-width: 900px) {
	/* En vertical la foto se ve casi entera detrás de cuatro cifras, así que
	   el velo sube: primero que se lean los datos. */
	.datos::before {
		background: linear-gradient(180deg, rgba(0, 24, 36, .86), rgba(0, 33, 47, .8));
	}
}

/* ============================================================
   19. La tarjeta de reserva de la ficha
   ============================================================ */

/* El formulario venía del plugin con estilos de andamiaje: caja crema plana,
   campos sueltos y casillas nativas. Funciona, pero es la pantalla donde el
   visitante decide pagar, así que se le da jerarquía de verdad. Los iconos van
   como SVG en data URI para no tener que tocar las plantillas del plugin. */

.qr-reserva {
	background: #fff;
	border: 1px solid rgba(0, 33, 47, .1);
	border-radius: 18px;
	padding: 0 0 22px;
	overflow: hidden;
	box-shadow: 0 18px 46px rgba(0, 33, 47, .1), 0 2px 6px rgba(0, 33, 47, .05);
}

/* Cabecera propia, con una franja de marca que separa la tarjeta del resto. */
.qr-reserva__titulo {
	margin: 0;
	padding: 20px 22px 16px;
	font-family: var(--display);
	font-size: 1.22rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	background: linear-gradient(105deg, var(--azul) 0%, #0b4a5e 100%);
	display: flex;
	align-items: center;
	gap: 10px;
}

.qr-reserva__titulo::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc42e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qr-reserva > *:not(.qr-reserva__titulo) { padding-inline: 22px; }
.qr-reserva__fechas { padding-top: 18px; }

.qr-reserva > .qr-reserva__lugar {
	margin: 18px 22px 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(16, 166, 189, .08);
	border: 1px solid rgba(16, 166, 189, .2);
	font-size: .88rem;
	line-height: 1.5;
}

/* ---------- Campos de fecha y hora ---------- */

.qr-reserva__fechas .qr-campo label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--azul);
	opacity: .72;
}

.qr-reserva__fechas .qr-campo label::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310a6bd' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qr-reserva__fechas .qr-campo--hora label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310a6bd' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.qr-reserva__fechas .qr-campo input {
	border: 1px solid rgba(0, 33, 47, .16);
	border-radius: 10px;
	font-weight: 600;
	color: var(--azul);
	transition: border-color .15s, box-shadow .15s;
}

.qr-reserva__fechas .qr-campo input:focus {
	border-color: var(--glaciar);
	box-shadow: 0 0 0 3px rgba(16, 166, 189, .18);
	outline: none;
}

/* ---------- Extras ---------- */

.qr-reserva__extras {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 33, 47, .1);
}

.qr-reserva__extras legend {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--azul);
}

.qr-reserva__extras legend::before {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0602c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Cada extra pasa de fila con borde inferior a tarjeta seleccionable. */
.qr-extra {
	position: relative;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid rgba(0, 33, 47, .12);
	border-bottom: 1px solid rgba(0, 33, 47, .12);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.qr-extra:hover {
	border-color: rgba(16, 166, 189, .5);
	background: rgba(16, 166, 189, .04);
}

/* :has() permite pintar la tarjeta entera cuando la casilla queda marcada. Si
   el navegador no lo soporta simplemente no se resalta: nada se rompe. */
.qr-extra:has(input:checked) {
	border-color: var(--glaciar);
	background: rgba(16, 166, 189, .07);
	box-shadow: 0 0 0 1px var(--glaciar) inset;
}

.qr-extra:has(input:disabled) {
	cursor: default;
	background: rgba(0, 33, 47, .03);
}

.qr-extra:has(input:focus-visible) {
	outline: 2px solid var(--glaciar);
	outline-offset: 2px;
}

/* Casilla dibujada a mano: la nativa se veía de formulario de 2009. */
.qr-extra input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid rgba(0, 33, 47, .28);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.qr-extra input[type="checkbox"]:checked {
	border-color: var(--glaciar);
	background: var(--glaciar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.qr-extra input[type="checkbox"]:disabled {
	border-color: rgba(0, 33, 47, .15);
	background-color: rgba(0, 33, 47, .1);
	cursor: default;
}

.qr-extra input[type="number"] {
	width: 58px;
	padding: 6px 8px;
	border: 1px solid rgba(0, 33, 47, .2);
	border-radius: 8px;
	font-weight: 700;
	color: var(--azul);
	text-align: center;
}

.qr-extra__nombre {
	font-weight: 650;
	color: var(--azul);
}

.qr-extra__precio {
	font-weight: 700;
	font-size: .88rem;
	color: var(--terracota);
}

.qr-extra__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(16, 166, 189, .14);
	color: #0b6b7a;
	font-weight: 700;
	letter-spacing: .04em;
}

.qr-extra__desc { line-height: 1.45; }

/* ---------- Resumen y cobro ---------- */

.qr-reserva__resumen {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 33, 47, .1);
}

.qr-cotizacion__total {
	font-family: var(--display);
	font-size: 1.05rem;
}

.qr-cotizacion__total strong {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--azul);
}

/* El bloque de «pagas ahora» es la información que decide la compra. */
.qr-cotizacion__cobro {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 196, 46, .5);
	border-radius: 12px;
	background: linear-gradient(140deg, rgba(255, 196, 46, .16), rgba(255, 196, 46, .06));
}

.qr-cotizacion__ahora strong {
	font-size: 1.22rem;
	font-weight: 800;
	color: var(--terracota-oscuro);
}

/* ---------- Botón y garantía ---------- */

.qr-reserva .qr-boton--ancho {
	margin-top: 16px;
	border-radius: 999px;
	background: var(--terracota);
	background-image: none;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
	padding-block: 15px;
	box-shadow: 0 10px 24px rgba(224, 96, 44, .3);
	transition: transform .15s, box-shadow .15s, background .15s;
}

.qr-reserva .qr-boton--ancho:hover {
	background: var(--terracota-oscuro);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(224, 96, 44, .36);
}

.qr-reserva > .qr-reserva__garantia {
	position: relative;
	margin: 14px 22px 0;
	padding: 12px 14px 14px 40px;
	border-radius: 12px;
	background: rgba(0, 33, 47, .04);
	font-size: .8rem;
	line-height: 1.5;
}

.qr-reserva__garantia::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 14px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310a6bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qr-reserva__error {
	margin-bottom: 0;
	border-radius: 12px;
}

@media (max-width: 900px) {
	/* Sticky en una columna sólo estorba: la tarjeta va al final del flujo. */
	.qr-reserva { position: static; }
	.qr-reserva__titulo { padding: 18px 18px 14px; }
	.qr-reserva > *:not(.qr-reserva__titulo) { padding-inline: 18px; }
	.qr-reserva > .qr-reserva__lugar { margin-inline: 18px; }
	.qr-reserva > .qr-reserva__garantia { margin-inline: 18px; }
}

/* «Fecha de devolución» ocupa dos líneas donde «Hora» ocupa una, y como cada
   campo es una celda independiente de la rejilla, los inputs quedaban a
   distinta altura. Igualar la altura de la etiqueta a ojo deja siempre unos
   píxeles de diferencia; alinear las celdas por abajo es exacto, porque el
   input es lo último de cada campo. */
.qr-reserva__fechas { align-items: end; }

.qr-reserva__fechas .qr-campo label { align-items: flex-start; }
.qr-reserva__fechas .qr-campo label::before { margin-top: .15em; }

/* Aviso de costo extra cuando el retiro o la devolución no son en la sede.
   Va en ámbar, no en rojo: es una condición, no un error.

   El aviso vive DENTRO de .qr-reserva__fechas, que es una rejilla de dos
   columnas (1fr para fechas, auto para horas). Sin `grid-column` caía en la
   columna `auto`, exigía todo el ancho por su texto largo y dejaba la columna
   de los campos en casi nada: selectores de 20px y etiquetas encimadas.
   Ocupa la fila completa. */
.qr-reserva .qr-aviso-lugar {
	grid-column: 1 / -1;
	position: relative;
	margin: 4px 0 0;
	padding: 12px 14px 12px 40px;
	border: 1px solid rgba(245, 166, 35, .45);
	border-radius: 12px;
	background: rgba(245, 166, 35, .1);
	font-size: .86rem;
	line-height: 1.5;
	color: #6b4a00;
}

.qr-reserva .qr-aviso-lugar::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 14px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qr-reserva .qr-aviso-lugar[hidden] { display: none; }

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

/* Un extra incluido no debería competir visualmente con los que sí cuestan. */
.qr-extra__precio--gratis {
	color: #0b6b7a;
	background: rgba(16, 166, 189, .12);
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .8rem;
}

/* ============================================================
   20. Tarifas, formas de pago y preguntas frecuentes
   ============================================================ */

.qr-tarifas__desde {
	max-width: 620px;
	margin: 0 auto 26px;
	text-align: center;
	font-size: 1.05rem;
}

.qr-tarifas__tabla {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	border-collapse: collapse;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 33, 47, .07);
}

.qr-tarifas__tabla caption {
	caption-side: bottom;
	padding-top: 14px;
	color: var(--suave);
	font-size: .88rem;
}

.qr-tarifas__tabla th,
.qr-tarifas__tabla td {
	padding: 13px 18px;
	text-align: left;
	border-bottom: 1px solid rgba(0, 33, 47, .08);
}

.qr-tarifas__tabla thead th {
	background: var(--azul);
	color: #fff;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.qr-tarifas__tabla tbody tr:last-child th,
.qr-tarifas__tabla tbody tr:last-child td { border-bottom: 0; }

.qr-tarifas__tabla tbody td {
	font-weight: 800;
	color: var(--terracota);
	font-size: 1.05rem;
}

.qr-pagos {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	max-width: 960px;
	margin: 36px auto 0;
	padding: 0;
	list-style: none;
}

.qr-pagos li {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid rgba(0, 33, 47, .1);
	border-radius: 14px;
	font-size: .92rem;
	line-height: 1.55;
}

.qr-pagos strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--display);
	color: var(--azul);
}

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

.qr-faq {
	max-width: 780px;
	margin: 0 auto;
}

.qr-faq__item {
	background: #fff;
	border: 1px solid rgba(0, 33, 47, .1);
	border-radius: 14px;
	margin-bottom: 10px;
	overflow: hidden;
}

.qr-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	font-family: var(--display);
	font-weight: 700;
	color: var(--azul);
	list-style: none;
}

/* La flecha por defecto de <summary> se ve distinta en cada navegador. */
.qr-faq__pregunta::-webkit-details-marker { display: none; }

.qr-faq__pregunta::after {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310a6bd' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s;
}

.qr-faq__item[open] .qr-faq__pregunta::after { transform: rotate(180deg); }

.qr-faq__item[open] .qr-faq__pregunta { background: rgba(16, 166, 189, .06); }

.qr-faq__respuesta {
	padding: 0 20px 18px;
	color: var(--suave);
	line-height: 1.6;
}

/* ---------- Términos y condiciones ---------- */

.qr-terminos h2 { margin-top: 0; }
.qr-terminos h3 { margin: 32px 0 8px; font-size: 1.05rem; }
.qr-terminos p { margin: 0 0 10px; }
.qr-terminos ul { margin: 0 0 14px 20px; }

/* El mismo aviso, ahora también en el buscador de la portada, que no vive
   dentro de .qr-reserva y por eso no heredaba nada. */
.qr-buscador .qr-aviso-lugar {
	grid-column: 1 / -1;
	position: relative;
	margin: 0;
	padding: 11px 14px 11px 38px;
	border: 1px solid rgba(245, 166, 35, .45);
	border-radius: 12px;
	background: rgba(245, 166, 35, .12);
	font-size: .85rem;
	line-height: 1.5;
	color: #6b4a00;
}

.qr-buscador .qr-aviso-lugar::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 13px;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c98a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qr-buscador .qr-aviso-lugar[hidden] { display: none; }

/* El aviso de pago en efectivo se distingue del resto de las formas de pago:
   es la alternativa fuera de la web, no un medio más del checkout. */
/* Con `li` delante: `.qr-pagos li` ya fija el fondo blanco y gana por
   especificidad a una clase sola. */
.qr-pagos li.qr-pagos__efectivo {
	background: rgba(245, 166, 35, .1);
	border-color: rgba(245, 166, 35, .45);
}

.qr-pagos li.qr-pagos__efectivo a {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	color: var(--terracota-oscuro);
}


/* ============================================================
   21. Contacto flotante (WhatsApp y llamada)
   ============================================================ */

/* Va sobre la barra móvil de reserva (z-index 60) pero por debajo del
   enlace de salto (999). En móvil se sube para no taparla. */
.contacto-flotante {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom));
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contacto-flotante__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 6px 22px rgba(0, 22, 32, .3);
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.contacto-flotante__btn svg {
	width: 28px;
	height: 28px;
	display: block;
}

.contacto-flotante__btn:hover,
.contacto-flotante__btn:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 22, 32, .38);
}

.contacto-flotante__btn:focus-visible {
	outline: 3px solid var(--lenga);
	outline-offset: 3px;
}

/* El verde es el de la marca WhatsApp a propósito: se reconoce de lejos
   y es lo que la gente busca. El de llamada usa la paleta del tema. */
.contacto-flotante__btn--wsp { background: #25d366; }
.contacto-flotante__btn--wsp:hover { background: #1fbb59; }

.contacto-flotante__btn--tel { background: var(--azul); }
.contacto-flotante__btn--tel:hover { background: var(--azul-medio); }

.contacto-flotante__btn--tel svg { width: 26px; height: 26px; }

@media (max-width: 860px) {

	/* La barra de reserva ocupa el borde inferior: hay que despejarla. */
	.contacto-flotante {
		right: 12px;
		bottom: calc(78px + env(safe-area-inset-bottom));
		gap: 8px;
	}

	.contacto-flotante__btn { width: 50px; height: 50px; }
	.contacto-flotante__btn svg { width: 25px; height: 25px; }
	.contacto-flotante__btn--tel svg { width: 23px; height: 23px; }
}

@media print {
	.contacto-flotante { display: none; }
}

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


/* ============================================================
   22. Banner del descuento por reservar en línea
   ============================================================ */

.promo {
	position: relative;
	padding: 56px 0;
	background-size: cover;
	background-position: center 60%;
	color: #fff;
	overflow: hidden;
}

/* Scrim en dos capas: el terracota del lado del sello da el tono
   publicitario sin tapar la foto entera. */
.promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(192, 74, 28, .95) 0%, rgba(192, 74, 28, .82) 34%, rgba(0, 24, 36, .78) 72%, rgba(0, 24, 36, .72) 100%);
}

.promo__caja {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 34px;
}

/* --- El sello del porcentaje --- */

.promo__sello {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 168px;
	height: 168px;
	margin: 0;
	border-radius: 50%;
	background: var(--lenga);
	color: var(--azul);
	box-shadow: 0 14px 40px rgba(0, 16, 26, .38);
	line-height: 1;
}

.promo__cifra {
	display: flex;
	align-items: flex-start;
	font-family: var(--display);
	font-weight: 900;
	font-size: 4.1rem;
	letter-spacing: -.03em;
}

.promo__simbolo {
	margin-top: .32em;
	font-size: .46em;
	font-weight: 800;
}

.promo__sello-pie {
	margin-top: 2px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* --- El texto --- */

.promo__kicker {
	display: block;
	margin-bottom: 8px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lenga);
}

.promo__titulo {
	margin: 0 0 12px;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.12;
	color: #fff;
}

.promo__bajada {
	max-width: 62ch;
	margin: 0 0 22px;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
}

.promo .qa-boton {
	background: #fff;
	color: var(--terracota-oscuro) !important;
}

.promo .qa-boton:hover {
	background: var(--crema);
	color: var(--terracota-oscuro) !important;
}

@media (max-width: 860px) {

	.promo { padding: 44px 0; }

	/* En móvil el sello va arriba y centrado: al costado quedaba
	   una columna de 40 px para el texto. */
	.promo__caja {
		flex-direction: column;
		align-items: center;
		gap: 22px;
		text-align: center;
	}

	.promo__sello {
		width: 132px;
		height: 132px;
	}

	.promo__cifra { font-size: 3.2rem; }
	.promo__bajada { margin-inline: auto; font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
	.promo .qa-boton:hover { transform: none; }
}


/* ============================================================
   23. Reparto de las grillas en escritorio
   ============================================================ */

/* Antes las tres grillas eran auto-fit y a 1200 px daban cuatro columnas:
   con 5 destinos quedaba 4+1 y con 6 ventajas 4+2, o sea una fila huérfana
   pegada a la izquierda. A tres columnas el reparto es 3+2 y 3+3, las
   tarjetas pasan de 283 a 385 px —se lee mucho mejor el texto— y la última
   fila va centrada, así una fila incompleta parece decidida y no un sobrante. */

.destinos,
.ventajas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}

.destinos > *,
.ventajas > * {
	flex: 0 1 calc((100% - 44px) / 3);
}

@media (max-width: 1000px) {
	.destinos > *,
	.ventajas > * { flex-basis: calc((100% - 22px) / 2); }
}

@media (max-width: 620px) {
	.destinos > *,
	.ventajas > * { flex-basis: 100%; }
}

/* --- Mosaico de la galería --- */

/* Son seis fotos en una grilla de 4×3: doce celdas. Con los tramos que
   había se ocupaban once y quedaba un hueco abajo a la derecha. Ahora cada
   posición va puesta a mano y el mosaico cierra completo. */

.galeria { grid-auto-rows: 190px; }

.galeria__item--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.galeria__item--2 { grid-column: 3 / 5; grid-row: 1; }
.galeria__item--3 { grid-column: 3;     grid-row: 2 / 4; }
.galeria__item--4 { grid-column: 4;     grid-row: 2 / 4; }
.galeria__item--5 { grid-column: 1;     grid-row: 3; }
.galeria__item--6 { grid-column: 2;     grid-row: 3; }

@media (max-width: 820px) {

	/* En dos columnas el mosaico no cabe: se vuelve una cuadrícula simple
	   con la primera foto a lo ancho. */
	.galeria { grid-auto-rows: 150px; }

	.galeria__item--1,
	.galeria__item--2,
	.galeria__item--3,
	.galeria__item--4,
	.galeria__item--5,
	.galeria__item--6 {
		grid-column: auto;
		grid-row: auto;
	}

	.galeria__item--1 { grid-column: span 2; }
}


/* ============================================================
   24. Selector de idioma en la cabecera
   ============================================================ */

.cabecera__idiomas {
	display: flex;
	align-items: center;
	margin-left: 4px;
}

/* El selector vive dentro de .nav, que pinta todos sus enlaces de blanco
   para que se lean sobre la cabecera oscura. Acá el fondo es la píldora
   blanca, así que el color hay que devolverlo: por eso estas reglas están
   en el tema, que es quien manda el blanco, y no en el CSS del plugin de
   idiomas, que pierde por orden de carga. */
.cabecera__idiomas .qi-selector ul {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 3px;
	list-style: none;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--blanco);
}

.cabecera__idiomas .qi-selector a {
	display: block;
	padding: 4px 9px;
	border-radius: 999px;
	color: var(--azul-medio);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.cabecera__idiomas .qi-selector a:hover,
.cabecera__idiomas .qi-selector a:focus {
	background: var(--glaciar-claro);
	color: var(--azul);
}

.cabecera__idiomas .qi-selector a.qi-selector__actual {
	background: var(--azul);
	color: var(--blanco);
}

.cabecera__idiomas .qi-selector a:focus-visible {
	outline: 3px solid var(--lenga);
	outline-offset: 2px;
}

@media (max-width: 860px) {
	.cabecera__idiomas { order: 3; margin-left: 0; }
	.cabecera__idiomas .qi-selector a { padding: 4px 7px; font-size: .72rem; }
}