/**
 * Nosotros v2 — /sobre-nosotros-auto-valls-menorca/
 * Epica EP-16. Se carga sobre theme-v2-tokens.css y theme-v2-home.css.
 *
 * 🔴 TODA regla que toque un .av-wrap va prefijada con .av-v2. Sin el prefijo
 * pierde contra `.av-v2 .av-wrap { max-width: 1240px }`, que lleva dos clases
 * de especificidad, y la seccion sale a 1240 mientras el resto esta a su
 * ancho: la pagina queda con dos ejes y no hay ningun warning.
 */

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

/* Ritmo vertical comun a las secciones sobre blanco. */
.av-v2 .av-nos-seccion {
	padding-block: clamp(48px, 7vw, 76px);
}

.av-v2 .av-nos-seccion--pegada {
	padding-top: 0;
}

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

.av-v2 .av-nos-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(420px, 62vw, 660px);
	overflow: hidden;
	background: var(--av-marino-900);
}

/* El encuadre NO puede quedarse en el `center center` por defecto.
   La foto es la flota (furgoneta, descapotable y dos motos) y los vehiculos
   estan en el tercio INFERIOR; con 1,50:1 dentro de una caja de 2,16:1 solo se
   ve el 69% del alto, y centrado el recorte se comia justo el producto y
   dejaba cielo vacio. Medido: la cabecera salia practicamente en blanco. */
.av-nos-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 82%;
}

/*
 * Degradado del diseno. Sube a .78 arriba y .96 abajo: con los valores del
 * prototipo (.72 / .95) sobre esta foto el eyebrow se quedaba en 3,9:1.
 * MEDIR sobre la foto real, no fiarse del numero del prototipo.
 *
 * 🔴 AV-T-194, ronda 1: el punto claro original (0,34,75,.30 al 45%) es
 * donde cae el eyebrow, y ahi el contraste medido sobre el pixel real de
 * fondo era 1,13:1 a 390px y 3,59:1 a 1440px -ninguno pasa AA-.
 *
 * 🔴 AV-T-194, ronda 2: el primer arreglo subio LOS DOS stops de la mitad
 * superior al mismo .88, convirtiendo el degradado en una meseta plana: la
 * foto quedaba practicamente invisible en todo el hero, no solo donde vive
 * el texto. .av-nos-hero es flex con align-items:flex-end, asi que el
 * bloque de texto vive SIEMPRE en la franja de abajo -es la unica zona que
 * necesita oscurecerse-.
 *
 * Ronda 3, degradado progresivo, con los stops REALMENTE aplicados abajo:
 *   .55 al 0% (velo suave, solo para separar la cabecera)
 *   .20 al 26% (punto claro real: aqui se reconoce el paisaje)
 *   .88 al 40% (arranca el oscurecimiento: el eyebrow cae al 42,6% de la
 *               altura del hero a 390px, mas arriba de lo que parece porque
 *               el bloque de texto, aunque esta pegado abajo por
 *               align-items:flex-end, es proporcionalmente mas alto en una
 *               seccion de 420px que en una de 660px)
 *   .95 al 100% (fondo del hero, donde cae la bajada a los dos anchos)
 * Medido despues sobre el pixel real: eyebrow 5,14:1 (390) / 6,51:1 (1440),
 * H1 12,3:1 / 14,57:1, bajada 11,51:1 / 13,73:1. Los tres pasan a los dos
 * anchos y la foto se reconoce en la mitad superior (capturas
 * hero-390-r2.png / hero-1440-r2.png).
 */
.av-nos-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		175deg,
		rgba(0, 34, 75, .55) 0%,
		rgba(0, 34, 75, .18) 26%,
		/* La rampa subia a .88 en el 40%: la foto solo se veia en la franja de
		   arriba, y con el encuadre corregido ahi es donde entran los coches.
		   Se retrasa el cierre para que se vean, denso igual bajo el texto. */
		rgba(0, 34, 75, .46) 54%,
		rgba(0, 26, 58, .95) 100%
	);
}

.av-v2 .av-nos-hero__in {
	position: relative;
	padding-block: clamp(80px, 12vw, 120px) clamp(36px, 5vw, 52px);
	color: var(--av-blanco);
}

.av-nos-hero__eyebrow {
	display: inline-block;
	margin-bottom: 22px;
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-eyebrow);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--av-eyebrow);
}

.av-nos-hero__h1 {
	margin: 0 0 24px;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-hero-marca);
	line-height: .98;
	letter-spacing: -.03em;
	max-width: 16ch;
	text-wrap: balance;
	color: var(--av-blanco);
}

.av-nos-hero__bajada {
	margin: 0;
	max-width: 48ch;
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: var(--av-sobre-marino-2);
}

.av-nos-hero--sin-foto .av-nos-hero__in {
	padding-block: clamp(56px, 8vw, 96px);
}

/* --- Cifras ----------------------------------------------------------- */

.av-v2 .av-nos-cifras {
	background: var(--av-marino-950);
	color: var(--av-blanco);
}

/*
 * ⚠️ minmax(190px, 1fr), no los 150px del prototipo.
 *
 * En la home, «Sin sorpresas» con minmax(120px) dio cuatro columnas de 124px
 * y TODAS las etiquetas partidas en dos lineas: las del prototipo eran mas
 * cortas que las reales. «sobre 360 resenas en Google» es la mas larga de las
 * cuatro y necesita 190 para no partirse a 1440.
 *
 * auto-fit y NO auto-fill: con auto-fill la rejilla hace 5 columnas para 4
 * tarjetas y deja una vacia. Paso en la home con las oficinas.
 */
.av-v2 .av-nos-cifras__in {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 28px;
	padding-block: clamp(32px, 5vw, 44px);
}

.av-nos-cifra {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.av-nos-cifra__valor {
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: clamp(36px, 4.6vw, 58px);
	line-height: 1;
	letter-spacing: -.02em;
}

/* --av-sobre-marino, no --av-eyebrow: sobre --av-marino-950 da 9,1:1 frente a 5,4:1. */
.av-nos-cifra__etiqueta {
	font-size: var(--av-t-xs);
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-sobre-marino);
}

/* --- Piezas comunes de seccion ---------------------------------------- */

.av-v2 .av-nos-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-eyebrow);
	letter-spacing: .22em;
	text-transform: uppercase;
	/* 🔴 --av-enlace, no --av-cielo: el cian sobre blanco da 2,78:1. */
	color: var(--av-enlace);
}

.av-v2 .av-nos-h2 {
	margin: 0 0 20px;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.12;
	letter-spacing: -.01em;
	max-width: 26ch;
	text-wrap: balance;
	color: var(--av-marino);
}

/* --- Historia --------------------------------------------------------- */

.av-v2 .av-nos-historia__in {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 4vw, 44px);
	align-items: start;
}

.av-nos-historia__texto p {
	margin: 0 0 16px;
	font-size: var(--av-t-md);
	line-height: 1.8;
	color: var(--av-texto-2);
}

.av-nos-historia__destacado {
	font-size: var(--av-t-lg) !important;
	font-weight: 600;
	line-height: 1.7 !important;
}

.av-nos-historia__texto a {
	color: var(--av-enlace);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Linea de tiempo -------------------------------------------------- */

.av-nos-hitos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-nos-hito {
	position: relative;
	padding: 0 0 26px 26px;
	border-left: 2px solid var(--av-borde);
}

.av-nos-hito--ultimo {
	padding-bottom: 0;
	border-left-color: transparent;
}

.av-nos-hito::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: var(--av-r-pill);
	background: var(--av-cielo);
}

.av-nos-hito--ultimo::before {
	background: var(--av-marino);
}

.av-nos-hito__anio {
	display: block;
	margin-bottom: 7px;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-h4);
	line-height: 1;
	color: var(--av-enlace);
}

.av-nos-hito--ultimo .av-nos-hito__anio {
	color: var(--av-marino);
}

.av-nos-hito__titulo {
	margin: 0 0 5px;
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-md);
	color: var(--av-marino);
}

.av-nos-hito__texto {
	margin: 0;
	font-size: var(--av-t-entradilla);
	line-height: 1.7;
	color: var(--av-texto-2);
}

/* --- Galeria ---------------------------------------------------------- */

.av-nos-galeria__h2 {
	margin-bottom: 24px;
}

/* auto-fit, NO auto-fill: auto-fill hace 5 columnas para 4 tarjetas. */
.av-nos-galeria__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

/*
 * 🔴 aspect-ratio + height:100% NO sostiene la foto: ya mordio en /oficinas/.
 * La imagen va position:absolute dentro de un contenedor posicionado.
 *
 * 🔴 Revision final de rama, EP-16: el 3/4 venia del prototipo, que dibujaba
 * tarjetas verticales. Las cuatro fotos reales son apaisadas (1024x684,
 * 681x384, 872x802, 1024x683 -ratios 1.50, 1.77, 1.09 y 1.50-), asi que con
 * 3/4 se recortaba entre el 31% y el 58% del ancho de cada una. 3/2 es el
 * ratio de tres de las cuatro fuentes.
 */
.av-nos-foto {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: var(--av-r-bloque);
	overflow: hidden;
	background: var(--av-fondo-suave);
}

.av-nos-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Promesa ---------------------------------------------------------- */

.av-nos-promesa__caja {
	margin: 0;
	padding: clamp(28px, 5vw, 56px);
	border-radius: 20px;
	background: var(--av-arena);
}

/*
 * 🔴 Es un <blockquote> (semantica correcta para una cita) y el tema padre
 * trae un `blockquote { border-left:5px solid; padding:15px 25px 31px;
 * background: azul muy claro; border-radius:4px; }` GLOBAL (basic-style.css). Como
 * esta regla no tocaba esas cuatro propiedades, el "cuadro dentro del
 * cuadro" del padre se colaba sin que nada de aqui lo pisara: el diseno
 * (15-quienes-somos.html) pinta la frase como texto plano sobre el arena,
 * sin caja propia ni borde. Se resetean las cuatro a mano.
 */
.av-nos-promesa__frase {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: clamp(20px, 3.2vw, 36px);
	line-height: 1.3;
	letter-spacing: -.01em;
	max-width: 30ch;
	text-wrap: balance;
	/* Sobre el arena da 11,5:1. */
	color: var(--av-marino);
}

/*
 * 🔴 --av-texto-3, NO el gris de rotulo del diseño: sobre --av-arena
 * el gris del prototipo se queda en ~2,2:1 y no pasa AA. Este da 4,9:1.
 */
.av-nos-promesa__pie {
	margin-top: 20px;
	font-size: var(--av-t-xs);
	letter-spacing: var(--av-ls-eyebrow);
	text-transform: uppercase;
	color: var(--av-texto-3);
}

/* --- Compromisos ------------------------------------------------------ */

.av-nos-compromisos__cab {
	margin-bottom: 26px;
}

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

.av-nos-compromisos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--av-borde);
}

.av-nos-compromiso {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	padding-block: 26px;
	border-top: 1px solid var(--av-borde);
	align-items: start;
}

.av-nos-compromiso__rotulo {
	display: flex;
	gap: 16px;
	align-items: baseline;
}

.av-nos-compromiso__num {
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-base);
	color: var(--av-enlace);
}

.av-nos-compromiso__titulo {
	margin: 0;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: clamp(19px, 2.4vw, 22px);
	line-height: 1.2;
	color: var(--av-marino);
}

.av-nos-compromiso__texto {
	margin: 0;
	font-size: var(--av-t-md);
	line-height: 1.75;
	color: var(--av-texto-2);
}

/* --- CTA de cierre ---------------------------------------------------- */

.av-v2 .av-nos-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 42vw, 400px);
	margin-top: clamp(48px, 7vw, 76px);
	overflow: hidden;
	background: var(--av-marino-900);
}

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

.av-nos-cta__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 26, 58, .95) 0%, rgba(0, 34, 75, .68) 100%);
}

.av-v2 .av-nos-cta__in {
	position: relative;
	padding-block: clamp(40px, 6vw, 56px);
	color: var(--av-blanco);
}

.av-nos-cta__titulo {
	margin: 0 0 14px;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: clamp(24px, 3.6vw, 42px);
	line-height: 1.1;
	letter-spacing: -.02em;
	max-width: 22ch;
	text-wrap: balance;
	color: var(--av-blanco);
}

.av-nos-cta__bajada {
	margin: 0 0 26px;
	max-width: 48ch;
	font-size: var(--av-t-lead);
	line-height: 1.65;
	color: var(--av-sobre-marino-2);
}

.av-nos-cta__botones {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/*
 * 🔴 El boton cian lleva texto MARINO, no blanco: blanco sobre --av-cielo da
 * 2,78:1. Marino sobre cian da 4,64:1. Es la regla del theme v2 desde EP-9.
 */
.av-v2 .av-nos-cta .av-btn--cielo {
	background: var(--av-cielo);
	color: var(--av-marino);
	border: none;
}

.av-v2 .av-nos-cta .av-btn--cielo:hover {
	background: var(--av-cielo-hover);
	color: var(--av-marino);
}

/* El CSS traia .45; el diseno (15-quienes-somos.html) pide rgba(255,255,255,.4)
   en este mismo boton, que es exactamente --av-sobre-blanco-40. Al tokenizar
   se corrige el .45 heredado y queda igual que el diseno. */
.av-v2 .av-nos-cta__boton-2 {
	background: transparent;
	color: var(--av-blanco);
	border: 1px solid var(--av-sobre-blanco-40);
}

/* Sin token exacto para .14 de opacidad: --av-sobre-blanco-12 es el mas
   cercano de la escala (10/12/28/40). Delta de .02, no se aprecia. Ver
   INCIDENCIAS.md. */
.av-v2 .av-nos-cta__boton-2:hover,
.av-v2 .av-nos-cta__boton-2:focus-visible {
	background: var(--av-sobre-blanco-12);
}