/*
 * Autos Valls · Theme v2 — /oficinas/
 * -----------------------------------
 * Epica EP-11 (Oficinas v2) · Tarea AV-T-119.
 *
 * Se carga DESPUES de theme-v2-tokens.css y de theme-v2-home.css, que hace de
 * base en todas las paginas v2 (ahi viven .av-wrap, .av-btn, .av-seccion,
 * .av-h2, .av-faq y el chrome). Aqui solo va lo propio de esta pagina.
 *
 * MOBILE FIRST. Todas las media queries son min-width. Las dos ultimas
 * secciones son los saltos a tablet y escritorio: cualquier regla que toque
 * algo definido ahi tiene que ir ANTES, o gana por orden.
 *
 * CONTRASTES, verificados contra la tabla de theme-v2-tokens.css:
 *   - El cian (--av-cielo) NUNCA lleva texto blanco: 2,78:1. Donde el diseno lo
 *     pinta asi (el boton del telefono), aqui lleva texto marino: 4,64:1.
 *   - El cian NUNCA se usa como color de texto sobre blanco por el mismo
 *     motivo. Para eso esta --av-enlace (5,0:1): etiqueta de tarjeta,
 *     CTA y desplegable del horario.
 *   - El gris del diseno para el telefono y las notas da 2,5:1 sobre blanco.
 *     Sustituido por --av-texto-3 (5,5:1).
 *
 * Indice:
 *   0. Piezas que la base no trae
 *   1. Cabecera con foto
 *   2. Banda de claims
 *   3. Rejilla de oficinas
 *   4. En cualquiera de nuestras oficinas
 *   5. Desplazarse por Menorca
 *   6. Mapa
 *   7. CTA de la oficina central
 *   8. Tablet (768px)
 *   9. Escritorio (1024px)
 *  10. Movimiento reducido
 */

/* ==================================================================
 * 0. Piezas que la base no trae
 * ================================================================== */

/* Boton cian: SOLO sobre fondo marino y SIEMPRE con texto marino.
   El diseno lo pone con texto blanco (2,78:1). Ver la cabecera del archivo. */
.av-v2 .av-btn--cian {
    background: var(--av-cielo);
    color: var(--av-marino);
}

.av-v2 .av-btn--cian:hover,
.av-v2 .av-btn--cian:focus-visible {
    background: var(--av-cielo-hover);
    color: var(--av-marino);
}

/* .av-btn--fantasma YA NO SE DECLARA AQUI: AUTOVA-108 partio theme-v2-home.css
   en theme-v2-base.css, que se carga en todas las paginas v2 y ya trae este
   modificador con los mismos valores. Repetirlo aqui era la deuda que este
   mismo comentario anunciaba, y ahora es codigo muerto que I2 prohibe. */

/* ==================================================================
 * 1. Cabecera con foto
 * ================================================================== */

.av-oficinas-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 340px;
    overflow: hidden;
    background: var(--av-marino);
    color: var(--av-blanco);
}

/* object-position por encima del centro. Con `cover`, una foto de 3:2 metida en
   una banda de 3,4:1 conserva solo la franja central —en esta foto, mar abierto
   y nada mas—. Subiendo el recorte entran el horizonte y la costa, que es la
   composicion del diseno: cielo y roca arriba, agua debajo del titular. */
.av-oficinas-hero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
}

/* 🔴 EL AVISO DE ARRIBA SE CUMPLIO: la 594 volvio a servir una imagen "casi
   blanca" y este velo, calibrado para una foto oscura, dejo de bastar.

   El comentario anterior avisaba: "Si alguien vuelve a cambiar la imagen
   destacada de la 594, HAY QUE VOLVER A MEDIR". La imagen destacada de HOY
   (`oficinas-alquiler-de-coches-de-Menorca.jpg`) no es la foto de cala que
   se midio la ultima vez: es un mapa con calles, iconos y zonas casi blancas
   — exactamente el caso "captura casi blanca" que el propio comentario daba
   como ejemplo de fallo. Medido pixel a pixel con el texto oculto: el
   eyebrow caia a 1,98:1 (1440px) / 1,97:1 (390px), el H1 a 3,25:1 / 2,56:1 y
   la bajada a 4,48:1 / 3,44:1 — los tres por debajo de lo que exige su
   tamano de letra.

   La leccion, aplicada: un velo calibrado sobre pixeles de UNA imagen es
   fragil por definicion cuando esa imagen es un dato editable desde el
   panel. `theme-v2-ficha.css` ya resolvio el mismo problema para sus ONCE
   fotos con un velo mucho mas cerrado (.64/.74/.92/.97) en vez de uno que
   "se abre" a mitad de camino; aqui se copia ese criterio en vez de volver
   a afinar contra un unico pixel que puede cambiar manana.

   Nuevos valores, remedidos con el texto oculto sobre la imagen ACTUAL: el
   peor pixel del eyebrow da 5,32:1 (390px) / 6,06:1 (1440px), el H1 8,17 /
   9,13 y la bajada 8,41 / 8,83 — los tres con margen sobre el 4,5:1 (3:1
   para el H1, que es texto grande) que exige WCAG AA.

   🔴 NO se tokeniza a --av-velo-*: son 4 paradas afinadas pixel a pixel y el
   vocabulario cerrado solo tiene 3 valores planos (.68 / .30 / .88), pensados
   para fondos SIN foto. Ver INCIDENCIAS.md. */
.av-oficinas-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 🔴 REBAJADO el 19-ago-2026, y por el mismo motivo por el que se habia
       reforzado: LA FOTO CAMBIO.
       Estaba en .62/.82/.92/.96 porque la imagen destacada era un MAPA casi
       blanco y el titular se quedaba en 3,25:1. Ahora es una foto de Cala
       Galdana, oscura y con su propio contraste, y ese velo la borraba entera:
       se veia un azul plano con un rastro de agua. Medido con muestreo de
       pixel bajo cada linea: eyebrow 5,9:1, H1 8,4:1, bajada 7,1:1 — sigue
       sobrado de AA y ahora se ve la cala.
       Si alguien vuelve a cambiar la foto, HAY QUE VOLVER A MEDIR. Ya van dos. */
    background: linear-gradient(180deg,
        rgba(0, 48, 105, .38) 0%,
        rgba(0, 48, 105, .55) 25%,
        rgba(0, 48, 105, .72) 70%,
        rgba(0, 48, 105, .80) 100%);
}

.av-oficinas-hero--sin-foto::after {
    background: none;
}

.av-oficinas-hero__in {
    position: relative;
    z-index: 1;
    padding-top: 54px;
    padding-bottom: 28px;
}

.av-oficinas-hero__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-eyebrow esta calculado para fondo marino SOLIDO, donde da 5,8:1.
       Sobre la foto, incluso con el velo reforzado, se quedaba en 3,30:1,
       y esto es texto de 10,5px: le hace falta 4,5. Se usa el token claro,
       que con el velo de arriba (4 paradas) da 5,32:1 en el peor pixel
       medido sobre la imagen actual — ver el comentario del velo. */
    color: var(--av-sobre-marino);
}

/* 46px a 1440, que es lo que MIDE el H1 de esta pantalla en el diseño
   renderizado. El comentario que habia aqui ya decia «el diseño llega a 46px»
   y justo debajo la regla ponia 48: se quedo escrito el proposito y no el
   valor. Comprobado con Chrome, no leido. */
.av-oficinas-hero__h1 {
    margin: 0 0 10px;
    max-width: 22ch;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h1);
    line-height: 1.1;
    color: var(--av-blanco);
    text-wrap: balance;
}

.av-oficinas-hero__bajada {
    margin: 0;
    max-width: 56ch;
    font-size: var(--av-t-md);
    line-height: 1.6;
    /* --av-sobre-marino-2 es el token "parrafo sobre hero con velo"
       (CONTRATO.md 2.1) y el que ya usa el mismo parrafo en
       theme-v2-ficha.css. Antes de esta pasada estaba en --av-sobre-marino
       (texto secundario sobre marino SOLIDO): mas oscuro de lo que pide el
       diseno (valor exacto en 05-oficinas.html) y de lo que usa su propio
       hermano. Con el velo nuevo da 8,41:1 en el peor pixel. */
    color: var(--av-sobre-marino-2);
}

/* ==================================================================
 * 2. Banda de claims
 * ================================================================== */

.av-oficinas-claims {
    background: var(--av-arena);
}

.av-oficinas-claims__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px 28px;
    margin: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    list-style: none;
    font-size: var(--av-t-meta);
    line-height: 1.5;
    text-align: center;
    color: var(--av-marino);
}

/* ==================================================================
 * 3. Rejilla de oficinas
 * ================================================================== */

/* auto-FIT, no auto-fill: con auto-fill la rejilla reserva columnas vacias
   cuando sobran huecos. Ya paso en la home (commit 2ba1393, cinco columnas
   para cuatro tarjetas). */
.av-grid--oficinas2 {
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: var(--av-e-7b);
}

.av-oficina2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-blanco);
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}

.av-oficina2:hover,
.av-oficina2:focus-within {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-2px);
}

/* 🔴 LA FOTO VA POSICIONADA, Y NO ES UN ADORNO.
   Con la imagen en flujo normal, `height: 100%` NO resuelve —la altura del
   contenedor viene de `aspect-ratio`, que el navegador no considera definida
   para un porcentaje del hijo—, asi que la imagen cae a su tamano intrinseco.
   Para las fotos mas anchas que 4:3 no se nota: la caja ya es mas alta que
   ellas. Pero `min-height: auto` impide que la caja sea mas baja que su
   contenido, asi que las DOS fotos mas altas que 4:3 la estiraban:

       Playas de Fornells  999x836  -> 236px   en vez de 212
       Son Bou            1399x1180 -> 238px   en vez de 212

   Dos tarjetas de doce con la foto mas alta, sin ningun error y sin que se vea
   en el HTML. Sacando la imagen del flujo con `position: absolute`, no puede
   empujar nada y las doce miden exactamente lo mismo.

   `flex: none` por lo mismo: la tarjeta es un flex en columna y no debe encoger
   la foto para hacer sitio a un cuerpo largo. */
.av-oficina2__foto {
    position: relative;
    flex: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--av-fondo-suave);
}

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

/* SIN position. Aqui no hay enlace estirado —dentro de la tarjeta hay un tel: y
   un <details>, y una capa invisible se los comeria— pero se deja anotado para
   que nadie lo anada luego "para que la tarjeta entera sea clicable". */
.av-oficina2__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
}

.av-oficina2__etiqueta {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--av-enlace);
}

.av-oficina2__nombre {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-articulo);
    line-height: 1.2;
}

/* inline-block + padding para llegar a los 24px de alto del criterio 2.5.8 de
   WCAG 2.2: medido, el enlace del titulo se quedaba en 21px. */
.av-v2 .av-oficina2__nombre a {
    display: inline-block;
    padding: 2px 0;
    color: var(--av-marino);
    text-decoration: none;
}

.av-v2 .av-oficina2__nombre a:hover {
    text-decoration: underline;
}

.av-oficina2__dir,
.av-oficina2__tel,
.av-oficina2__horario,
.av-oficina2__nota {
    margin: 0;
    line-height: 1.55;
}

.av-oficina2__dir {
    font-size: var(--av-t-meta);
    color: var(--av-texto-2);
}

.av-oficina2__tel {
    font-size: var(--av-t-meta);
}

/* inline-block + padding para llegar a los 24px de alto que pide el criterio
   2.5.8 de WCAG 2.2. Medido: sin esto son 18px, y es un enlace suelto en su
   propio parrafo, asi que no le vale la excepcion de los enlaces en linea. */
.av-v2 .av-oficina2__tel a {
    display: inline-block;
    padding: 3px 0;
    color: var(--av-texto-3);
}

.av-oficina2__horario {
    font-size: var(--av-t-meta);
    color: var(--av-texto-2);
}

.av-oficina2__nota {
    font-size: var(--av-t-xs);
    color: var(--av-texto-3);
}

/* --- Horario completo, plegado ------------------------------------- */

.av-oficina2__semana {
    margin-top: 2px;
    font-size: var(--av-t-cap);
}

.av-oficina2__semana > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px de area de toque contando el padding: es un objetivo de dedo. */
    padding: 6px 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-cap);
    color: var(--av-enlace);
    cursor: pointer;
    list-style: none;
}

/* El triangulo por defecto de Safari y Chrome, fuera; se sustituye por uno
   propio que gira al abrir. */
.av-oficina2__semana > summary::-webkit-details-marker {
    display: none;
}

.av-oficina2__semana > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--av-transicion);
}

.av-oficina2__semana[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.av-oficina2__semana dl {
    margin: 4px 0 0;
}

.av-oficina2__semana dl > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-top: 1px solid var(--av-borde);
}

.av-oficina2__semana dt {
    color: var(--av-texto-3);
}

.av-oficina2__semana dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--av-texto-2);
}

/* --- CTA de la tarjeta ---------------------------------------------- */

/* margin-top:auto lo empuja al fondo, asi que las doce tarjetas alinean su CTA
   aunque tengan direcciones de una o de tres lineas. */
.av-v2 .av-oficina2__cta {
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-meta);
    color: var(--av-enlace);
    text-decoration: none;
}

.av-v2 .av-oficina2__cta:hover {
    text-decoration: underline;
}

/* ==================================================================
 * 4. En cualquiera de nuestras oficinas
 * ================================================================== */

.av-oficinas-servicios .av-h2 {
    margin-bottom: 20px;
}

.av-servicio {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    background: var(--av-blanco);
}

.av-servicio__titulo {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-md);
    line-height: 1.25;
    /* Es un <h3>: sin color propio, hereda el negro casi puro del TEMA
       PADRE (theme-options.min.css, regla global "h3{color:...}").
       rgb(15,27,28), medido con marca.mjs, no es ningun token — el diseno
       pinta este titulo en marino, igual que el resto de titulares de
       tarjeta de la pagina. */
    color: var(--av-marino);
}

.av-servicio__texto {
    margin: 0;
    font-size: var(--av-t-nav);
    line-height: 1.65;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 5. Desplazarse por Menorca
 * ================================================================== */

/* 🔴 ES LA UNICA SECCION DEL CUERPO CON FONDO, Y ESO CAMBIA LAS REGLAS.
   El resto del theme v2 solo pone `padding-top` en `.av-seccion` y deja que el
   aire de abajo lo ponga la siguiente. Funciona mientras todo sea blanco: el
   hueco se ve igual venga de donde venga. Con una banda de color no, porque sus
   dos bordes se ven, y salian los dos mal:

     - ARRIBA la banda empezaba PEGADA a las tarjetas de "En cualquiera de
       nuestras oficinas". La seccion anterior no tiene padding inferior, asi
       que el gris arrancaba a 5px del borde de las tarjetas.
     - ABAJO se quedaba a 23px del panel de zonas, frente a 60px arriba.

   Se usa el mismo patron que la banda de cierre de la home (`.av-cta-tel`): el
   aire de FUERA con `margin`, y el de DENTRO con padding en el wrapper. Asi los
   dos bordes del gris respiran lo mismo y el ritmo de la pagina no se dispara.
   Medido antes y despues; los numeros, en el mensaje del commit. */
.av-oficinas-conducir {
    padding-top: 0;
    margin-top: 48px;
    background: var(--av-fondo-suave);
}

/* Una columna en movil; a partir de 768px, las zonas van en cuatro columnas.
   El padding vertical es el aire DENTRO de la banda. */
.av-oficinas-conducir__in {
    display: grid;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.av-oficinas-conducir__eyebrow {
    margin: 0 0 8px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-micro);
    letter-spacing: var(--av-ls-eyebrow);
    text-transform: uppercase;
    /* Sobre el gris claro de la seccion, no sobre marino: --av-enlace, no cian. */
    color: var(--av-enlace);
}

.av-oficinas-conducir__texto .av-h2 {
    margin-bottom: 14px;
}

.av-oficinas-conducir__texto p {
    margin: 0 0 14px;
    max-width: 62ch;
    font-size: var(--av-t-prosa);
    line-height: 1.75;
    color: var(--av-texto-2);
}

/* --- Fuera de horario ---------------------------------------------- */

/* Bloque aparte y no un parrafo mas: son dos condiciones distintas y la
   diferencia entre ellas es justo lo que hay que leer sin ambiguedad. */
.av-oficinas-fuera {
    margin-top: 22px;
    /* Acotada como los parrafos de al lado. Sin esto se estira a los 1240px del
       contenedor y las lineas pasan de 100 caracteres: la medida comoda son
       60-75. */
    max-width: 78ch;
    padding: 16px var(--av-e-7b);
    border-left: 3px solid var(--av-cielo);
    border-radius: 0 var(--av-r-boton) var(--av-r-boton) 0;
    background: var(--av-blanco);
}

.av-oficinas-fuera__titulo {
    margin: 0 0 8px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-base);
    line-height: 1.25;
    /* Mismo caso que .av-servicio__titulo: es un <h3> sin color propio y
       heredaba el negro casi puro del tema padre. */
    color: var(--av-marino);
}

.av-oficinas-fuera ul {
    margin: 0;
    padding-left: var(--av-e-7b);
}

.av-oficinas-fuera li {
    margin-bottom: 5px;
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-texto-2);
}

.av-oficinas-fuera li:last-child {
    margin-bottom: 0;
}

/* --- La red por zonas ----------------------------------------------- */

/* Debajo del texto y a todo el ancho, no en una columna al lado. Con el panel
   a la derecha quedaba mas alto que el texto y dejaba un hueco muerto abajo a
   la izquierda; ademas obligaba a apretar doce nombres largos en 340px. */
.av-oficinas-zonas {
    margin-top: 6px;
    padding: 22px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    background: var(--av-blanco);
}

.av-oficinas-zonas__titulo {
    margin: 0 0 4px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-lead);
    line-height: 1.25;
    /* Tercer <h3> del mismo lote sin color propio (ver los otros dos titulos
       de mas arriba): heredaba el negro casi puro del tema padre. */
    color: var(--av-marino);
}

.av-oficinas-zonas__bajada {
    margin: 0 0 16px;
    font-size: var(--av-t-nav);
    line-height: 1.55;
    color: var(--av-texto-3);
}

/* Una zona debajo de otra en movil, con separador. En escritorio pasan a
   cuatro columnas y el separador estorba: se anula en la seccion 8. */
.av-oficinas-zona + .av-oficinas-zona {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--av-borde);
}

.av-oficinas-zona__titulo {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}

/* 🔴 UNO POR LINEA, y se intento lo contrario dos veces.
   Primero fueron en linea envolviendo, y "Hotel Sur Menorca  Punta Prima" en el
   mismo renglon se leia como un solo sitio: son nombres largos y de varias
   palabras. Se les puso un separador "·" y salio peor: al envolver, el
   separador viaja con su elemento y aparece HUERFANO al principio del renglon
   siguiente ("· Puerto Mahón"). Es el problema clasico de flex-wrap con
   separadores en ::before, y no tiene arreglo limpio.
   Apilados no hay ambiguedad ni separador que colocar. Y como las zonas van en
   cuatro columnas, tampoco alargan el bloque. */
.av-oficinas-zona__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* inline-block + padding para los 24px de alto del criterio 2.5.8 de WCAG 2.2:
   son enlaces sueltos en una lista, no enlaces dentro de un parrafo. */
.av-v2 .av-oficinas-zona__lista a {
    display: inline-block;
    padding: 3px 0;
    font-size: var(--av-t-sm);
    line-height: 1.4;
    color: var(--av-enlace);
    text-decoration: none;
}

.av-v2 .av-oficinas-zona__lista a:hover {
    text-decoration: underline;
}

/* ==================================================================
 * 6. Mapa
 * ================================================================== */

/* El original iba dentro de un <div style="width:50%"> escrito a mano: 195px
   de mapa en un movil de 390. */
/* El hueco entre secciones es el mismo en toda la pagina —60px de padding
   superior—, pero aqui se LEE mas corto: las demas secciones acaban en un
   parrafo, que arrastra su interlineado, y esta acaba en el canto vivo del
   mapa. 16px para igualarlo opticamente. */
.av-oficinas-mapa {
    padding-bottom: 16px;
}

.av-oficinas-mapa__caja {
    margin-top: 16px;
    overflow: hidden;
    border-radius: var(--av-r-bloque);
    aspect-ratio: 4 / 3;
}

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

/* ==================================================================
 * 7. CTA de la oficina central
 * ================================================================== */

/* 🔴 Es la ultima seccion antes del pie, y la caja del CTA es una TARJETA, no
   una banda a sangre como el cierre de la home: sin este padding se pega al pie
   sin un pixel de aire. Medido: el hueco era 0px a 1440 y a 390. El diseno da
   `padding: 0 24px 60px` a esta seccion. */
.av-oficinas-cta {
    padding-bottom: 60px;
}

.av-oficinas-cta__caja {
    display: grid;
    gap: 22px;
    align-items: center;
    padding: 28px;
    border-radius: var(--av-r-bloque);
    background: var(--av-marino);
    color: var(--av-blanco);
}

.av-oficinas-cta__texto {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-oficinas-cta__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;
    color: var(--av-eyebrow);
}

.av-oficinas-cta__titulo {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-bloque-lg);
    line-height: 1.25;
    color: var(--av-blanco);
}

.av-oficinas-cta__bajada {
    margin: 0;
    max-width: 46ch;
    font-size: var(--av-t-nav);
    line-height: 1.6;
    color: var(--av-sobre-marino);
}

.av-oficinas-cta__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==================================================================
 * 8. Tablet (768px)
 * ================================================================== */

@media (min-width: 768px) {

    .av-oficinas-hero {
        min-height: 380px;
    }

    .av-oficinas-hero__in {
        padding-top: 70px;
        padding-bottom: 36px;
    }

    .av-oficinas-claims__lista {
        gap: 9px 36px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .av-grid--oficinas2 {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        /* Todas las filas a la altura de la mas alta. Sin esto cada fila se
           mide por su cuenta —salian 521, 560 y 567px— y las doce tarjetas no
           eran iguales aunque compartieran todos los estilos.

           Solo de tablet en adelante, que es donde las tarjetas se ven una al
           lado de otra y la diferencia se nota. En movil van en una columna,
           nadie compara alturas, y unificarlas solo anadia 324px de scroll. */
        grid-auto-rows: 1fr;
    }

    /* Mismo salto que `.av-seccion`: el aire de fuera de la banda acompana al
       del resto de secciones. El de dentro no cambia. */
    .av-oficinas-conducir {
        margin-top: 60px;
    }

    /* Las cuatro zonas en paralelo. auto-fit y no cuatro columnas fijas: si
       manana hay tres zonas o cinco, la rejilla se reparte sola. */
    .av-oficinas-zonas__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 22px 28px;
    }

    /* En columnas, la linea de separacion entre zonas no separa nada: las
       zonas ya estan separadas por el hueco de la rejilla. */
    .av-oficinas-zona + .av-oficinas-zona {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .av-oficinas-mapa__caja {
        aspect-ratio: 21 / 9;
    }

    .av-oficinas-cta__caja {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 26px;
        padding: 34px;
    }

    .av-oficinas-cta__acciones {
        justify-content: flex-end;
    }
}

/* ==================================================================
 * 9. Escritorio (1024px)
 * ================================================================== */

@media (min-width: 1024px) {

    .av-oficinas-hero {
        min-height: 420px;
    }

    .av-servicio {
        padding: 24px;
    }
}

/* ==================================================================
 * 10. Movimiento reducido
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

    .av-oficina2,
    .av-oficina2__semana > summary::after {
        transition: none;
    }

    .av-oficina2:hover,
    .av-oficina2:focus-within {
        transform: none;
    }
}