/**
 * Landing v2 — Click&Go (34796) y ofertas (20746, 32658)
 * D3 (EP-18). Se carga sobre theme-v2-tokens.css y theme-v2-base.css.
 *
 * Pantallas 10 y 12 del diseño («Landing Click&Go Aeropuerto» / «Landing
 * oferta verano»). CERO hex aquí (I1): todo color, radio, sombra y fuente
 * sale de theme-v2-tokens.css. Los componentes compartidos (.av-wrap,
 * .av-seccion, .av-h2, .av-btn, .av-eyebrow, .av-card, .av-precio,
 * .av-lista-check, .av-acordeon, .av-migas) NO se redeclaran (I2): esta hoja
 * solo añade las piezas que son EXCLUSIVAS de las landings.
 *
 * 🔴 TODA regla que toque `.av-wrap` va prefijada con `.av-v2`. Sin el
 * prefijo pierde contra `.av-v2 .av-wrap { max-width: 1240px }` (dos clases
 * de especificidad) y la sección sale con dos anchos distintos sin ningún
 * aviso — el mismo error que ya documentan theme-v2-nosotros.css y
 * theme-v2-contacto.css.
 */

.av-v2-landing .av-main {
	background: var(--av-blanco);
}

/* ==================================================================
 * 1. Hero con foto — bloque "hero-foto" del repertorio
 * ================================================================== */

.av-land-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--av-marino-900);
}

.av-land-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo diagonal recalculado sobre el marino real (ver INCIDENCIAS.md, "las
   sombras del diseño usan el marino viejo" — mismo caso con los velos). No es
   un plano de color porque el diseño lo pinta
   como degradado de tres paradas, no como plano único: forzar un plano
   aclararía la esquina donde cae el badge. Mismo criterio que ya documentan
   theme-v2-ficha.css / theme-v2-oficinas.css / theme-v2-contacto.css. */
.av-land-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 34, 63, .78) 0%,
		rgba(0, 48, 105, .34) 42%,
		rgba(0, 48, 105, .94) 100%
	);
}

.av-land-hero--sin-foto {
	background: var(--av-marino);
}

.av-land-hero__in {
	position: relative;
	padding-block: clamp(56px, 9vw, 88px) clamp(32px, 5vw, 48px);
	color: var(--av-blanco);
}

/* Pastilla solida, no el cian de marca: a 10.5px en negrita el par
   cian-sobre-blanco de la excepcion del CTA (CONTRATO.md §2.2) no llega a
   4.5:1 y esto es texto, no un boton. Marino-900 con el eyebrow claro da el
   mismo aire de "insignia" que el diseño y pasa AA (mismo par que ya usa el
   eyebrow sobre marino solido, 5.8:1). */
.av-land-hero__badge {
	display: inline-block;
	margin-bottom: var(--av-e-7);
	padding: var(--av-e-3) var(--av-e-7);
	background: var(--av-marino-900);
	border-radius: var(--av-r-boton);
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-eyebrow);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--av-eyebrow);
}

.av-land-hero__h1 {
	margin: 0 0 var(--av-e-7);
	max-width: 20ch;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	/* --av-t-h1 y no --av-t-hero-xl: medido en el diseño renderizado, el H1 de
	   Click&Go da 52px a 1440 — el mismo que la home, no los 58 del extra
	   grande. Aqui daba 58 y sobresalia 6px sobre el prototipo. */
	font-size: var(--av-t-h1);
	line-height: 1.05;
	letter-spacing: var(--av-ls-titular);
	color: var(--av-blanco);
	text-wrap: balance;
}

.av-land-hero__bajada {
	margin: 0;
	max-width: 52ch;
	font-size: var(--av-t-lg);
	line-height: 1.6;
	color: var(--av-sobre-marino-2);
}

/* ==================================================================
 * 2. Franja de ventajas — bloque "barra-ventajas" del repertorio
 * ------------------------------------------------------------------
 * Equivalente visual de home-v2's .av-ventajas (barra estrecha de 14px, no
 * una `.av-seccion` completa). Nombre propio para no redeclarar esa clase,
 * que vive en theme-v2-home.css y no se carga aquí (ver la cabecera de
 * template-parts/landing-v2/ventajas.php).
 * ================================================================== */

.av-land-ventajas {
	background: var(--av-arena);
	margin-top: var(--av-e-10);
}

.av-land-ventajas__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--av-e-3) var(--av-e-11);
	list-style: none;
	margin: 0;
	padding-top: var(--av-e-6);
	padding-bottom: var(--av-e-6);
	font-size: var(--av-t-sm);
	color: var(--av-texto-2);
	text-align: center;
}

/* ==================================================================
 * 3. El contenido publicado — normaliza tipografía sin tocar el HTML
 * ------------------------------------------------------------------
 * Lo que `.av-arttexto` es al artículo. No se reutiliza esa clase porque
 * vive en theme-v2-articulo.css, que no se carga aquí.
 * ================================================================== */

.av-land-texto {
	max-width: var(--av-ancho-estrecho);
	margin: 0 auto;
	font-size: var(--av-t-md);
	line-height: 1.75;
	color: var(--av-texto-2);
	overflow-wrap: break-word;
}

.av-land-texto p {
	margin: 0 0 var(--av-e-7);
}

.av-land-texto h2,
.av-land-texto h3,
.av-land-texto h4 {
	font-family: var(--av-fuente-titulo);
	color: var(--av-marino);
	text-align: left;
	text-wrap: balance;
}

.av-land-texto h2 {
	font-weight: 800;
	font-size: var(--av-t-h4);
	line-height: 1.2;
	margin: var(--av-e-11) 0 var(--av-e-5);
}

.av-land-texto h3 {
	font-weight: 700;
	font-size: var(--av-t-lg);
	line-height: 1.3;
	margin: var(--av-e-9) 0 var(--av-e-4);
}

.av-land-texto h4 {
	font-weight: 700;
	font-size: var(--av-t-md);
	line-height: 1.35;
	margin: var(--av-e-8) 0 var(--av-e-3);
}

.av-land-texto ul,
.av-land-texto ol {
	margin: 0 0 var(--av-e-7);
	padding-left: 22px;
}

.av-land-texto li {
	margin-bottom: var(--av-e-3);
}

.av-land-texto strong,
.av-land-texto b {
	color: var(--av-marino);
	font-weight: 700;
}

.av-v2 .av-land-texto a:not(.av-btn) {
	color: var(--av-enlace);
	text-decoration: underline;
}

.av-v2 .av-land-texto a:not(.av-btn):hover {
	color: var(--av-marino);
}

/* El buscador real ([car_rental_system display="search" ...]) y el acordeón
   de preguntas ([vc_tta_accordion]) que trae Click&Go dentro de su
   post_content llevan su propio CSS/JS del plugin y de WPBakery: solo se
   alinea aquí la tipografía de sus rótulos con el resto de la página, sin
   tocar su comportamiento. */
.av-land-texto .vc_tta-panel-title,
.av-land-texto .wpb_text_column h3 {
	font-family: var(--av-fuente-titulo);
}

/* 🔴 Y el COLOR del titulo del acordeon tambien, aunque el marcado sea de
   WPBakery. Medido con Chrome en Click&Go: WPBakery los pinta en un azul claro
   propio y da 2,61:1 sobre el gris de su panel — las cuatro preguntas de la
   pagina, ilegibles. No es "CSS del plugin, no me toca": el plugin pinta DENTRO
   de nuestra plantilla, y quien abre la pagina no distingue de quien es la
   regla. --av-marino da 12,9:1. */
.av-v2 .av-land-texto .vc_tta-panel-title,
.av-v2 .av-land-texto .vc_tta-panel-title > a,
.av-v2 .av-land-texto .vc_tta-title-text {
	color: var(--av-marino);
	/* Y el PESO. Medido con Chrome: WPBakery los dejaba en Sora 400, y el diseño
	   pinta Sora solo en 700 y 800 —contado sobre sus 15 pantallas—. Un titular
	   de acordeon en peso de cuerpo no se lee como un titular. */
	font-weight: 700;
}

/* 🔴 Los ROTULOS del buscador que Click&Go trae en su post_content.
   Medido con Chrome: 2,78:1 — "Lugar de Recogida", "Fecha", "Hora", "Lugar de
   Devolucion", "Edad del conductor" y "Codigo promocional", los seis campos del
   formulario, ilegibles.

   theme-v2-base.css ya arregla esto, pero solo dentro de `.av-buscador__caja`,
   y aqui el shortcode se pinta suelto dentro del contenido, sin esa caja. La
   regla de la base no encuentra su nodo y NO DA NINGUN ERROR: el rotulo se
   queda con el cian del plugin y parece que todo esta bien.

   Se repite el mismo tratamiento acotado al cuerpo de la landing. Si algun dia
   el buscador se envuelve en `.av-buscador__caja` tambien aqui, esta regla
   sobra y se puede borrar. */
.av-v2-landing label.filled,
.av-v2-landing .search-details-jd label {
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--av-texto-3) !important;
}

/* ==================================================================
 * 4. Dos columnas — bloque "dos-columnas" del repertorio
 * ================================================================== */

.av-land-doscol__in {
	display: grid;
	gap: var(--av-e-11);
}

.av-land-doscol__texto {
	display: flex;
	flex-direction: column;
	gap: var(--av-e-6);
}

.av-land-doscol__p {
	margin: 0;
	max-width: 60ch;
	font-size: var(--av-t-base);
	line-height: 1.7;
	color: var(--av-texto-2);
}

.av-land-doscol__mapa {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--av-r-bloque);
	background: var(--av-fondo-suave);
}

.av-land-doscol__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.av-land-doscol__card {
	padding: var(--av-e-9);
	gap: var(--av-e-6);
}

.av-land-doscol__card-titulo {
	margin: 0;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-md);
	color: var(--av-marino);
}

/* ==================================================================
 * 5. Tarifas — bloque "tarifas" del repertorio
 * ================================================================== */

.av-land-tarifas__grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.av-land-tarifas__tarjeta {
	padding: var(--av-e-9);
	gap: var(--av-e-5);
}

.av-land-tarifas__specs {
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-mini);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--av-texto-3);
}

.av-land-tarifas__nombre {
	margin: 0;
	font-size: var(--av-t-base);
	color: var(--av-texto-2);
}

.av-land-tarifas__precio {
	margin: 0;
}

.av-land-tarifas__lista {
	padding-top: var(--av-e-5);
	border-top: 1px solid var(--av-borde);
}

.av-land-tarifas__boton {
	margin-top: auto;
}

/* ==================================================================
 * 6. Pasos — tarjetas numeradas (repertorio, sin consumidor en esta ronda)
 * ================================================================== */

.av-land-pasos__grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.av-land-pasos__tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--av-e-4);
	padding: var(--av-e-9);
	background: var(--av-blanco);
	border: 1px solid var(--av-borde);
	border-radius: var(--av-r-bloque);
}

.av-land-pasos__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--av-r-campo);
	background: var(--av-fondo-cielo);
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-md);
	color: var(--av-enlace);
}

.av-land-pasos__titulo {
	margin: 0;
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-md);
	color: var(--av-marino);
}

.av-land-pasos__texto {
	margin: 0;
	font-size: var(--av-t-sm);
	line-height: 1.7;
	color: var(--av-texto-2);
}

/* ==================================================================
 * 7. FAQs — extiende `.av-acordeon` para <details> nativo (repertorio)
 * ------------------------------------------------------------------
 * `.av-acordeon` (theme-v2-base.css) se pensó para un <button
 * aria-expanded>. Aquí el marcado es <details>/<summary> nativo (mismo
 * criterio de accesibilidad que ayuda-v2/grupos.php): estas reglas EXTIENDEN
 * el componente con un selector propio, no lo redeclaran — mismo patrón que
 * ya usa el propio theme-v2-base.css en `.av-seccion--marino .av-h2`.
 * ================================================================== */

.av-land-faqs__lista .av-acordeon__pregunta {
	list-style: none;
}

.av-land-faqs__lista .av-acordeon__pregunta::-webkit-details-marker,
.av-land-faqs__lista .av-acordeon__pregunta::marker {
	display: none;
}

.av-land-faqs__lista .av-acordeon__item[open] > .av-acordeon__pregunta .av-acordeon__marca {
	transform: rotate(45deg);
}

/* ==================================================================
 * 8. CTA de cierre — bloque "cta-marino" del repertorio
 * ================================================================== */

.av-land-cta__caja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--av-e-9);
	padding: var(--av-e-11);
	background: var(--av-marino);
	border-radius: var(--av-r-bloque);
	color: var(--av-blanco);
}

.av-land-cta__texto {
	margin: var(--av-e-3) 0 0;
	max-width: 48ch;
	font-size: var(--av-t-entradilla);
	line-height: 1.65;
	color: var(--av-sobre-marino);
}

.av-land-cta__boton {
	white-space: nowrap;
}

/* ==================================================================
 * 9. Disposicion — 768px / 1024px, mobile first
 * ================================================================== */

@media (min-width: 768px) {
	.av-land-doscol__in {
		grid-template-columns: 1.1fr .9fr;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.av-land-hero__in {
		padding-block: clamp(72px, 8vw, 104px) clamp(40px, 5vw, 56px);
	}
}

/* ====================================================================
 * 99. Rescate del post_content: la fila que se subia 100px
 *
 * En /alquiler-coches-clickgo-menorca/ la primera fila de WPBakery trae
 * `margin-top: -100px !important` en su clase generada (.vc_custom_1714332394740),
 * junto con su imagen de fondo. Es un ajuste de la maquetacion VIEJA, donde esa
 * fila se metia bajo la cabecera anterior.
 *
 * Con la plantilla v2 delante hay una franja de ventajas, y la fila se le sube
 * encima: medido a 390x844, la franja ocupa 505->641 y la fila arranca en 589.
 * «Vehiculo revisado y listo al aterrizar» quedaba partido por la mitad y la
 * cuarta ventaja no se veia en absoluto.
 *
 * 🔴 Y NO SE VEIA MIDIENDO EL DOM. La franja y sus cuatro <li> declaran las
 * posiciones correctas y no desbordan nada: el solape lo hace una fila POSTERIOR
 * que se pinta encima. Aparecio mirando la captura, no el numero.
 *
 * El !important es obligado: se lo pone WPBakery. Solo se neutraliza el margen
 * NEGATIVO y solo en la primera fila del contenido, que es la que puede chocar
 * con lo que pinta la plantilla. La imagen de fondo y el resto de la fila no se
 * tocan, y el post_content tampoco.
 * ==================================================================== */

.page-template-landing-v2 .wpb-content-wrapper > .vc_row:first-child {
    margin-top: 0 !important;
}