/**
 * Contacto v2 — /contacto/ (página 253)
 * D2 (EP-18). Se carga sobre theme-v2-tokens.css y theme-v2-base.css.
 *
 * Pantalla 08 del diseño («Contacto y oficinas»). CERO hex aquí (I1): todo
 * color, radio, sombra y fuente sale de theme-v2-tokens.css. Los componentes
 * compartidos (.av-wrap, .av-seccion, .av-card, .av-btn, .av-eyebrow,
 * .av-migas, .av-chips/.av-chip) NO se redeclaran (I2): esta hoja solo añade
 * las piezas que son EXCLUSIVAS de /contacto/.
 *
 * 🔴 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 documenta la cabecera de theme-v2-nosotros.css.
 */

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

/* ==================================================================
 * 1. Hero + franja de cifras
 * ================================================================== */

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

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

/*
 * Velo sobre foto: degradado diagonal, del diseño (115deg), recalculado
 * sobre el marino REAL (el diseño escribe rgba(18,41,63,…) y rgba(26,58,92,…),
 * que es --av-marino-900 el primero y el marino VIEJO el segundo — ver
 * INCIDENCIAS.md "las sombras del diseño usan el marino viejo", mismo caso).
 * No se sustituye por planos de color porque ninguno
 * es un degradado diagonal de tres paradas: forzar uno solo (plano) aquí
 * aclararía la esquina donde cae el eyebrow. Igual que ficha.css/oficinas.css,
 * queda literal y anotado (ver INCIDENCIAS.md).
 */
.av-cont-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		rgba(0, 34, 63, .95) 0%,
		rgba(0, 48, 105, .74) 55%,
		rgba(0, 48, 105, .40) 100%
	);
}

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

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

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

.av-cont-hero__h1 {
	margin: 0 0 var(--av-e-7);
	max-width: 18ch;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-hero-xl);
	line-height: .98;
	letter-spacing: var(--av-ls-titular);
	color: var(--av-blanco);
	text-wrap: balance;
}

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

.av-cont-hero__datos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--av-e-11);
	margin-top: var(--av-e-9);
	padding-top: var(--av-e-9);
	/* .18 del diseño no tiene escalón exacto en --av-sobre-blanco-*
	   (10/12/28/40): --av-sobre-blanco-12 es el más próximo (delta .06,
	   contra .10 de subir a --av-sobre-blanco-28). Ver INCIDENCIAS.md. */
	border-top: 1px solid var(--av-sobre-blanco-12);
}

.av-cont-hero__dato {
	display: flex;
	flex-direction: column;
}

.av-cont-hero__dato-valor {
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-h3);
	color: var(--av-blanco);
}

.av-cont-hero__dato-etiqueta {
	font-size: var(--av-t-mini);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-eyebrow);
}

/* ==================================================================
 * 2. Rejilla de canales
 * ================================================================== */

.av-cont-canales__in {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--av-e-7);
	padding-block: var(--av-e-10) 0;
}

.av-cont-canal {
	display: flex;
	flex-direction: column;
	gap: var(--av-e-3);
	padding: var(--av-e-9);
	border-radius: var(--av-r-bloque);
	text-decoration: none;
	transition: transform var(--av-transicion-lenta), box-shadow var(--av-transicion-lenta);
}

.av-cont-canal:hover,
.av-cont-canal:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--av-sombra-2);
}

.av-cont-canal__eyebrow {
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-eyebrow);
	letter-spacing: var(--av-ls-eyebrow);
	text-transform: uppercase;
}

.av-cont-canal__valor {
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-h3);
	line-height: 1.15;
}

.av-cont-canal__nota {
	font-size: var(--av-t-nav);
	line-height: 1.5;
}

/*
 * 🔴 TODA REGLA DE COLOR SOBRE ESTOS TRES VA CON EL PREFIJO `.av-v2`. Las
 * tres tarjetas SON el propio `<a>` (`.av-cont-canal` es la clase del enlace,
 * no un envoltorio), y `.av-v2 a { color: var(--av-enlace) }` (theme-v2-base.css)
 * tiene dos clases de especificidad. Un solo `.av-cont-canal--tel { color:… }`
 * (una clase) pierde contra esa regla en el propio navegador -medido con
 * Chrome: el valor salía en --av-enlace, no en el blanco/marino declarados
 * aquí, sin ningún error ni aviso-. `.av-v2 .av-cont-canal--tel` iguala la
 * especificidad, y al cargar esta hoja DESPUÉS de theme-v2-base.css gana por
 * orden de cascada.
 */

/* "Lo más rápido": teléfono, marino sólido. */
.av-v2 .av-cont-canal--tel {
	background: var(--av-marino);
	color: var(--av-blanco);
}

.av-cont-canal--tel .av-cont-canal__eyebrow {
	color: var(--av-eyebrow);
}

.av-cont-canal--tel .av-cont-canal__valor {
	color: var(--av-blanco);
}

.av-cont-canal--tel .av-cont-canal__nota {
	color: var(--av-sobre-marino);
}

/*
 * WhatsApp: el diseño pinta un verde casi negro sobre el verde de marca para
 * que se lea sobre un fondo bastante claro. Ese tono no tiene token -no es un
 * color de marca, es un ajuste de contraste de un solo sitio- y --av-verde-900
 * está pensado para "texto verde sobre fondo verde pálido", no para ir sobre
 * el propio --av-whatsapp, bastante más claro. Se usa --av-marino, que ya es
 * el texto "oscuro y legible" del resto de la hoja: medido con Chrome sobre
 * la página real, ver el informe de la tarea para la cifra de contraste.
 */
.av-v2 .av-cont-canal--wa {
	background: var(--av-whatsapp);
	color: var(--av-marino);
}

.av-cont-canal--wa .av-cont-canal__eyebrow,
.av-cont-canal--wa .av-cont-canal__valor,
.av-cont-canal--wa .av-cont-canal__nota {
	color: var(--av-marino);
}

/* "En la isla": arena, como la barra de ventajas de la home. */
.av-v2 .av-cont-canal--of {
	background: var(--av-arena);
	color: var(--av-marino);
}

/*
 * el gris de rotulo del diseño (2,3:1) no vale ni para etiquetas
 * CORTAS de CAMPO de formulario (CONTRATO.md §2.1). Se probó primero
 * un gris azulado a 5,0:1 sobre blanco (el tono de migas/metadatos) pero medido
 * con Chrome sobre el arena real da 3,93:1 -el fondo es más claro que blanco,
 * así que el mismo gris pierde contraste-: no pasa. Va directo a --av-marino,
 * igual que el resto del texto de esta tarjeta.
 */
.av-cont-canal--of .av-cont-canal__eyebrow,
.av-cont-canal--of .av-cont-canal__valor,
.av-cont-canal--of .av-cont-canal__nota {
	color: var(--av-marino);
}

/* ==================================================================
 * 3. Cuerpo: formulario + mapa, en dos columnas
 * ================================================================== */

.av-cont-cuerpo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--av-e-11);
	align-items: start;
}

.av-cont-cuerpo__col {
	display: flex;
	flex-direction: column;
	gap: var(--av-e-6);
	min-width: 0;
}

/* ==================================================================
 * 4. Formulario
 * ================================================================== */

.av-cont-form {
	padding: var(--av-e-9);
	display: flex;
	flex-direction: column;
	gap: var(--av-e-7);
}

.av-cont-form__cab h2 {
	margin: 0 0 6px;
}

.av-cont-form__cab p {
	margin: 0;
	font-size: var(--av-t-sm);
	line-height: 1.65;
	color: var(--av-texto-2);
}

.av-cont-form__aviso {
	margin: 0;
	padding: var(--av-e-5) var(--av-e-7);
	border-radius: var(--av-r-boton);
	font-size: var(--av-t-sm);
	line-height: 1.5;
	font-weight: 600;
}

.av-cont-form__aviso--ok {
	background: var(--av-fondo-verde);
	color: var(--av-verde-900);
}

.av-cont-form__aviso--error {
	background: var(--av-fondo-suave-2);
	color: var(--av-coral-900);
}

.av-cont-form__motivos {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--av-e-3);
}

.av-cont-form__motivos legend {
	padding: 0;
	margin-bottom: var(--av-e-3);
	font-size: var(--av-t-eyebrow);
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* Mismo criterio que theme-v2-reserva.css .av-campo__rotulo: el diseño
	   pone estas etiquetas en su gris de rotulo (2,3:1) y aquí se sube a
	   --av-texto-3 (5,5:1) porque SÍ hay que leerlo, no es un adorno. */
	color: var(--av-texto-3);
}

/* El input real queda fuera de la vista pero dentro del foco de teclado:
   clip, no display:none -eso lo saltaría del tabulador también-. */
.av-cont-chip-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.av-cont-chip-input:focus-visible + .av-cont-chip--radio {
	outline: 2px solid var(--av-cielo);
	outline-offset: 2px;
}

/*
 * Estado "elegido": DELIBERADAMENTE distinto de .av-chip[aria-pressed="true"]
 * (base.css), que es para botones con JS. Aquí el estado lo lleva un radio
 * nativo vía :checked, así que no hay forma de "añadir la clase
 * .av-chip--activo" sin repetir sus mismas tres declaraciones -y repetirlas
 * es justo lo que el invariante I2 quiere evitar-. Se usa un tratamiento
 * visual propio (borde marino + fondo suave) en vez de copiar el otro.
 */
.av-cont-chip-input:checked + .av-cont-chip--radio {
	background: var(--av-fondo-suave);
	border-color: var(--av-marino);
	color: var(--av-marino);
	font-weight: 800;
}

.av-cont-form__ayuda-motivo {
	margin: 2px 0 0;
	font-size: var(--av-t-cap);
	color: var(--av-texto-3);
}

.av-cont-form__par {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--av-e-5);
}

.av-cont-campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.av-cont-campo__etq {
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-eyebrow);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--av-texto-3); /* mismo criterio que .av-cont-form__motivos legend */
}

.av-cont-campo__control {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: var(--av-e-5);
	background: var(--av-blanco);
	border: 1px solid var(--av-borde);
	border-radius: var(--av-r-boton);
	font-family: var(--av-fuente-texto);
	font-size: var(--av-t-sm);
	line-height: 1.4;
	color: var(--av-marino);
	transition: border-color var(--av-transicion), box-shadow var(--av-transicion);
}

textarea.av-cont-campo__control {
	resize: vertical;
	min-height: 96px;
}

/* Un placeholder es texto y cuenta para el contraste: --av-texto-5 da 2,28:1 sobre
   blanco. --av-texto-3, 5,54:1. */
.av-cont-campo__control::placeholder {
	color: var(--av-texto-3);
}

.av-cont-campo__control:focus,
.av-cont-campo__control:focus-visible {
	outline: none;
	border-color: var(--av-cielo);
	box-shadow: var(--av-focus);
}

/* Honeypot: oculto para todo el mundo salvo un bot que autorellena. */
.av-cont-form__trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.av-cont-form__nota {
	margin: 0;
	font-size: var(--av-t-cap);
	line-height: 1.6;
	color: var(--av-texto-3); /* el gris de rotulo del diseño no pasa AA */
}

/* ==================================================================
 * 5. «Antes de escribir, quizá está aquí»
 * ================================================================== */

.av-cont-ayuda {
	padding: var(--av-e-8);
	display: flex;
	flex-direction: column;
	gap: var(--av-e-6);
}

.av-cont-ayuda__tit {
	margin: 0;
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-lg);
	color: var(--av-marino);
}

.av-cont-ayuda__sep {
	height: 1px;
	background: var(--av-fondo-suave-2);
}

.av-cont-ayuda__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.av-cont-ayuda__p {
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-entradilla);
	color: var(--av-marino);
}

.av-cont-ayuda__r {
	font-size: var(--av-t-sm);
	line-height: 1.7;
	color: var(--av-texto-2);
}

.av-cont-ayuda__cta {
	/* display:flex + min-height, no line-height: a 14px el texto solo, aunque
	   se subiera el interlineado, se quedaba en 21px medido con Chrome -por
	   debajo del objetivo tactil de 24x24 de WCAG 2.5.8-. Con flex el area
	   de toque crece sin mover el texto ni un pixel. */
	display: flex;
	align-items: center;
	min-height: 24px;
	align-self: flex-start;
	margin-top: var(--av-e-1);
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-sm);
	color: var(--av-enlace);
	text-decoration: none;
}

.av-cont-ayuda__cta:hover,
.av-cont-ayuda__cta:focus-visible {
	text-decoration: underline;
}

/* ==================================================================
 * 6. Columna derecha: mapa + oficinas destacadas
 * ================================================================== */

.av-cont-mapa {
	padding: var(--av-e-7);
}

.av-cont-mapa__tit {
	margin: 0 0 var(--av-e-5);
	font-family: var(--av-fuente-titulo);
	font-weight: 800;
	font-size: var(--av-t-base);
	color: var(--av-marino);
}

.av-cont-mapa__caja {
	position: relative;
	border-radius: var(--av-r-chip);
	overflow: hidden;
	background: var(--av-fondo-suave);
}

.av-cont-mapa__caja iframe {
	display: block;
	width: 100%;
	height: 220px;
	border: 0;
}

.av-cont-mini-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--av-e-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.av-cont-mini {
	padding: var(--av-e-7);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--av-e-3);
}

.av-cont-mini__nombre {
	margin: 0;
	font-family: var(--av-fuente-titulo);
	font-weight: 700;
	font-size: var(--av-t-entradilla);
	color: var(--av-marino);
}

.av-cont-mini__detalle {
	margin: 0 0 var(--av-e-2);
	font-size: var(--av-t-cap);
	line-height: 1.6;
	color: var(--av-texto-3); /* el diseño usa su gris de rotulo (2,3:1): no pasa AA */
}

.av-cont-mini .av-btn {
	margin-top: auto;
}