/*
 * Autos Valls · Theme v2 — Articulo del blog
 * ------------------------------------------
 * Epica AUTOVA-158 (EP-15) · Tareas AV-T-164 a AV-T-171.
 *
 * Se carga DESPUES de theme-v2-tokens.css y de theme-v2-home.css, que hace de
 * base en todas las paginas v2.
 *
 * MOBILE FIRST. Todas las media queries son min-width y estan al final.
 *
 * 🔴 ESTA HOJA TIENE UN PROBLEMA QUE LAS OTRAS CINCO NO TIENEN
 * -----------------------------------------------------------
 * El cuerpo va VERBATIM: es HTML de WPBakery escrito a lo largo de cinco anos,
 * con `.vc_row`, `.wpb_text_column`, `.vc_col-sm-*`, tablas, iframes y clases
 * del proveedor anterior (`.justify`, `.med`, `.huge`, `.button.big`). No se
 * puede estilar lo que uno querria que hubiera: hay que estilar lo que hay.
 *
 * De ahi la seccion 3, que es la mas larga y la que hay que revisar cuando
 * algo «se vea raro» en un articulo concreto.
 *
 * ⚠️ `.av-v2 a` (0,1,1) GANA a una clase sola. Ya mordio tres veces en este
 * tema. Toda regla que toque un enlace del cuerpo va prefijada con `.av-v2`.
 *
 * DOS DESVIACIONES DEL PROTOTIPO
 * ------------------------------
 * 1. Columnas ~700 + ~360 en vez de 579 + 579. Su `auto-fit` sobre dos pistas
 *    iguales deja media pagina para tres tarjetas pequenas, con articulos que
 *    llegan a 6.382 palabras.
 * 2. La meta y las migas NO van en el gris de rotulo del diseño, que sobre blanco da 2,3:1 y no
 *    pasa AA ni de lejos. Van en --av-texto-3 (5,5:1).
 *
 * INDICE
 *   0. Migas                        (46)
 *   1. Cuerpo y columnas            (89)
 *   2. Cabecera del articulo        (118)
 *   3. El texto publicado           (163)
 *   4. El puente                    (288)
 *   5. Barra lateral                (352)
 *   6. Escritorio (1024px)          (432)
 *   7. Movimiento reducido          (456)
 */

/* ==================================================================
 * 1. Cuerpo y columnas
 * ================================================================== */

.av-v2 .av-art__cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    padding-top: 24px;

    /* El prototipo deja el padding inferior a 0 y el articulo termina pegado
       al pie. Es un descuido: ninguna otra pantalla suya hace eso. */
    padding-bottom: 64px;
}

.av-art__col {
    min-width: 0;
}

/* ==================================================================
 * 2. Cabecera del articulo
 * ================================================================== */

.av-artcab__h1 {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h1-pagina);
    line-height: 1.13;
    letter-spacing: -.01em;
    margin: 0;
    max-width: 24ch;
    color: var(--av-marino);
    text-wrap: balance;
}

.av-artcab__meta {
    margin: 12px 0 0;
    font-size: var(--av-t-meta);
    line-height: 1.5;

    /* NO --av-cielo ni el gris de rotulo del diseño: es texto pequeno y necesita 4,5:1. */
    color: var(--av-texto-3);
}

.av-artcab__foto {
    margin: 20px 0 0;
    border-radius: var(--av-r-tarjeta);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--av-fondo-suave);
}

.av-v2 .av-artcab__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================================================================
 * 3. El texto publicado
 *
 * Todo lo de esta seccion cuelga de .av-arttexto para no tocar nada del
 * chrome ni de las otras paginas v2.
 * ================================================================== */

.av-arttexto {
    margin-top: 24px;
    font-size: var(--av-t-articulo);
    line-height: 1.75;
    color: var(--av-texto-2);

    /* Un enlace con una palabra larga —una URL escrita a pelo— desbordaba el
       documento medio pixel en /8-museos-.../ a 390 px. Medio pixel basta para
       que salga la barra horizontal. Con cinco anos de contenido escrito a
       mano, esto va de serie y no articulo a articulo. */
    overflow-wrap: break-word;
}

.av-arttexto p {
    margin: 0 0 var(--av-e-7b);
}

.av-arttexto h2,
.av-arttexto h3,
.av-arttexto h4 {
    font-family: var(--av-fuente-titulo);
    color: var(--av-marino);
    text-wrap: balance;

    /*
     * 🔴 LAS CAJAS GRISES. El proveedor anterior le puso un fondo gris fijo a los
     * `<h3>` del contenido —sin ninguna clase, por etiqueta— y ademas repitio
     * el titulo del articulo entre seccion y seccion para meter la keyword: «5
     * playas nudistas en Menorca» sale CUATRO veces, cada una en su recuadro
     * gris. Partia la lectura en trozos.
     *
     * El texto NO se borra: es contenido publicado y esta epica no reescribe
     * nada. Se le quita la caja y queda como lo que es, un encabezado.
     */
    background: transparent;
    padding: 0;

    /* Y a bandera izquierda: el proveedor centraba algunos con `.vc_align_center`
       y quedaban descolgados en medio de un texto que va todo a la izquierda. */
    text-align: left;

    /* scroll-margin y no padding: los enlaces del indice del lateral llevan a
       estos id y sin esto el encabezado queda debajo de la cabecera fija. */
    scroll-margin-top: 96px;
}

.av-arttexto h2 {
    font-weight: 800;
    font-size: var(--av-t-h4);
    line-height: 1.2;
    margin: 34px 0 12px;
}

.av-arttexto h3 {
    font-weight: 700;
    font-size: 18.5px;
    line-height: 1.3;
    margin: 28px 0 10px;
}

.av-arttexto h4 {
    font-weight: 700;
    font-size: var(--av-t-articulo);
    line-height: 1.35;
    margin: 22px 0 8px;
}

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

.av-arttexto li {
    margin-bottom: 8px;
}

.av-arttexto blockquote {
    margin: 24px 0;
    padding: 4px 0 4px var(--av-e-7b);
    border-left: 3px solid var(--av-cielo);
    font-size: var(--av-t-lead);
    color: var(--av-marino);
}

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

/*
 * 🔴 EL `:not(.av-btn)` NO ES DECORATIVO. Sin el, esta regla (0,3,1) le gana a
 * `.av-v2 .av-btn--oscuro` (0,2,0) y pinta el boton del puente —que es un <a>
 * dentro del cuerpo— en color de enlace sobre fondo marino: 2,57:1. El boton
 * seguia ahi, con su fondo y su forma, solo que ilegible.
 *
 * Es la CUARTA vez que este patron muerde en este tema: paso con `.av-v2 a` y
 * el telefono de la cabecera, y con los dos CTA de la ficha de oficina. Cuando
 * una regla de enlaces cubre una zona, hay que sacarle los botones a mano.
 *
 * ⚠️ Y LA QUINTA FUE AL ARREGLARLO. Al quitarle `.av-btn` al boton del puente
 * —para escapar del `!important` del articulo 35998— el boton dejo de estar
 * excluido por este mismo `:not()` y esta regla se lo comio: 2,57:1 otra vez,
 * ahora en los DIECINUEVE en vez de en uno. De ahi el segundo `:not()`.
 */
.av-v2 .av-arttexto a:not(.av-btn):not(.av-puente__boton) {
    color: var(--av-enlace);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* --- Imagenes del cuerpo -------------------------------------------- */

.av-arttexto img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;

    /* El proveedor anterior le puso sombra a todas las imagenes del contenido.
       En una columna de lectura blanca queda sucio y hace que las pequenas
       parezcan recuadros rotos. */
    box-shadow: none;
}

/*
 * 🔴 LOS ANCHOS DEL CUERPO VAN DE 83 A 1.024 PX en una columna de 700, porque
 * cada [vc_single_image] se inserto con el tamano que le parecio a quien lo
 * puso. Era lo que mas se notaba: fotos pequenas pegadas a la izquierda con
 * huecos enormes al lado.
 *
 * La clase la pone av_v2_articulo_procesar() leyendo el ancho declarado: CSS no
 * puede preguntar el tamano natural de una imagen.
 */
.av-arttexto img.av-img--ancha {
    width: 100%;
}

/* Las pequenas NO se estiran —subir una miniatura de 83 px a 700 la deja
   borrosa— pero se centran, que es lo que quita la sensacion de descuadre. */
.av-arttexto img.av-img--chica {
    width: auto;
}

.av-arttexto figure,
.av-arttexto .wpb_single_image {
    margin: 0 0 20px;
}

/*
 * 🔴 EL RECUADRO BLANCO CON SOMBRA que aparecia suelto en varios articulos.
 *
 * No era un hueco de maquetacion: es el envoltorio `.vc_box_shadow` de una
 * imagen cuyo fichero ya no existe. La imagen colapsa a 0×0 y lo unico que
 * queda dibujado es la sombra del envoltorio, que parece un trozo de papel
 * roto. Hay tres asi solo en /que-ver-en-ciutadella/.
 *
 * ⚠️ Los 404 de esas imagenes YA ESTABAN: la plantilla vieja daba exactamente
 * los mismos recuentos. La lista va a AV-T-176 para reponerlas o quitarlas.
 */
.av-arttexto .vc_single_image-wrapper,
.av-arttexto [class*="vc_box_shadow"],
.av-arttexto [class*="vc_box_border"] {
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;

    /*
     * 🔴 Y `display:block`, QUE ES LO QUE HACE QUE LAS FOTOS SE ESTIREN.
     *
     * El envoltorio de WPBakery es `inline-block`, o sea que su ancho lo decide
     * su contenido. Un `width:100%` en la imagen de dentro se resuelve entonces
     * contra un contenedor que mide lo que mide la imagen: 500 px pedidos,
     * 500 px obtenidos. Parecia que la regla no se aplicaba y se aplicaba
     * perfectamente — solo que contra el ancho equivocado.
     */
    display: block;
    width: 100%;
}

/*
 * 🔴 LA SOMBRA NO ESTABA EN EL ELEMENTO. `vc_box_shadow_3d` la dibuja con
 * ::before y ::after apilados, asi que `box-shadow: none` sobre la caja no
 * quitaba nada. Es lo que dejaba un borde sucio bajo cada foto y lo que hacia
 * que una imagen rota pareciera un trozo de papel.
 */
.av-arttexto [class*="vc_box_shadow"]::before,
.av-arttexto [class*="vc_box_shadow"]::after,
.av-arttexto [class*="vc_box_border"]::before,
.av-arttexto [class*="vc_box_border"]::after {
    display: none;
}

.av-arttexto figcaption,
.av-arttexto .vc_figure-caption {
    margin-top: 8px;
    font-size: var(--av-t-meta);
    color: var(--av-texto-3);
}

/* --- Tablas ---------------------------------------------------------- */

/* Envoltorio propio: una tabla ancha dentro de la columna de lectura es lo
   unico del cuerpo que puede desbordar el documento entero. */
.av-arttexto table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: var(--av-t-base);
}

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

.av-arttexto th {
    background: var(--av-fondo-suave);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    color: var(--av-marino);
}

/* --- Lo que pinta WPBakery ------------------------------------------- */

/*
 * Las filas y columnas traen anchos, paddings y margenes negativos pensados
 * para la maquetacion del tema viejo. Aqui viven dentro de una columna de
 * lectura de ~700px y hay que neutralizarlos, o el texto se sale por la
 * izquierda o se queda en una franja de la mitad de ancho.
 */
/*
 * 🔴 AQUI ESTABA «TODO DESAJUSTADO», Y NO ERA UN FALLO DE CSS.
 *
 * Los articulos estan maquetados a VARIAS COLUMNAS: las fotos viven dentro de
 * `vc_col-sm-6` y `vc_col-sm-4`, pensadas para el ancho completo del tema
 * viejo. En la columna de lectura de 700 px esas columnas siguen midiendo 530,
 * asi que las fotos salian a 500 px pegadas a la izquierda, con medio hueco al
 * lado y sin alinearse con el texto.
 *
 * Se ve claro en la cadena de ancestros: IMG 500 -> wrapper 500 -> figure 500
 * (inline-block) -> columna 530 -> fila 700. La imagen no estaba mal: estaba
 * dentro de media pagina.
 *
 * Una columna de lectura es de UNA columna. Las filas pasan a bloque y las
 * columnas al 100 %: las fotos se apilan y ocupan el ancho del texto.
 */
.av-arttexto .vc_row,
.av-arttexto .vc_row-fluid,
.av-arttexto .vc_column-inner {
    display: block;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    float: none;
}

.av-arttexto .wpb_column,
.av-arttexto .vc_column_container,
.av-arttexto [class*="vc_col-sm-"],
.av-arttexto [class*="vc_col-md-"],
.av-arttexto [class*="vc_col-lg-"],
.av-arttexto [class*="vc_col-xs-"] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    float: none;
}

.av-arttexto .wpb_wrapper {
    width: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    float: none;
}

/* La <figure> de WPBakery es inline-block y encoge a la imagen: mientras siga
   asi, cualquier `width:100%` de dentro se resuelve contra ella misma. */
.av-arttexto .vc_figure,
.av-arttexto .wpb_single_image {
    display: block;
    width: 100%;
}

.av-arttexto .wpb_content_element,
.av-arttexto .wpb_text_column {
    margin-bottom: 0;
}

/* El proveedor anterior justificaba el texto. Justificado a 700px con
   palabras largas abre rios blancos; y WCAG desaconseja justificar. */
.av-arttexto .justify,
.av-arttexto [class*="justify"] {
    text-align: left;
}

/*
 * 🔴 LAS CAJAS GRISES REPETIDAS. El proveedor anterior intercalaba entre
 * secciones un encabezado con el titulo del articulo repetido —«5 playas
 * nudistas en Menorca» sale CUATRO veces en su propia caja gris— para meter
 * la keyword. Es relleno de SEO de hace cinco anos y visualmente parte la
 * lectura en trozos.
 *
 * No se borra: es contenido publicado y esta epica no reescribe nada (ademas
 * de que borrarlo movería el recuento). Se le quita la caja y se deja como lo
 * que es, un encabezado mas.
 */
.av-arttexto .h3-yoast-center,
.av-arttexto .h3-yoast-cent,
.av-arttexto [class*="yoast"] {
    background: transparent;
    padding: 0;
    text-align: left;
}

/*
 * 🔴 EL NARANJA. el naranja del tema padre es su acento por defecto y y sale en el
 * borde superior de los paneles de `[vc_tta_*]` (acordeones y pestanas de
 * WPBakery). Solo queda en `imserso-alquiler-coche-menorca`, con tres paneles.
 *
 * ⚠️ Ya estaba antes, y mucho peor: la plantilla vieja pintaba entre 85 y 94
 * elementos con ese naranja en cada articulo. El v2 se llevo casi todos por
 * delante al no cargar el chrome del padre; estos tres se cuelan porque viven
 * dentro del contenido.
 */
.av-arttexto .vc_tta-panels-container,
.av-arttexto .vc_tta-panel,
.av-arttexto .vc_tta-panel-heading,
.av-arttexto .vc_tta-panel-body {
    border-color: var(--av-borde);
    background: transparent;
}

.av-arttexto .vc_tta-panel-title > a {
    color: var(--av-marino);
}

/* Los mapas y videos incrustados: proporcion fija y sin desbordar. */
.av-arttexto iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 12px;
}

.av-arttexto .wpb_gmaps_widget .wpb_wrapper {
    padding: 0;
    background: transparent;
}

/* ==================================================================
 * 4. El puente
 * ================================================================== */

.av-puente {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 28px 0;
    padding: 20px;
    border: 1.5px solid var(--av-cielo);
    border-radius: var(--av-r-tarjeta);

    /* Azul muy claro del prototipo. Como FONDO el cian si vale; lo que no vale
       es texto blanco encima. */
    background: var(--av-fondo-frio);
}

.av-puente__titulo {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-lead);
    line-height: 1.3;
    color: var(--av-marino);
    text-wrap: balance;
}

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

.av-puente__fila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: end;
}

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

.av-puente__lab {
    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);
}

.av-puente__val {
    box-sizing: border-box;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    background: var(--av-blanco);
    font-size: var(--av-t-sm);
    font-weight: 600;
    color: var(--av-marino);
}

/* El campo de fechas no lleva un rango inventado: lleva la instruccion. */
.av-puente__val--vacio {
    font-weight: 500;
    color: var(--av-texto-3);
}

/*
 * 🔴 EL BOTON DEL PUENTE SE ESTILA ENTERO AQUI Y NO REUTILIZA `.av-btn`.
 *
 * El articulo 35998 trae 14 KB de CSS propio dentro del contenido y define
 * `.av-arttexto .av-btn` con `!important` en fondo, color y tamano. El puente
 * vive dentro de ese contenedor, asi que con la clase compartida NO HAY
 * ESPECIFICIDAD QUE GANE: probado con `.av-v2 .av-arttexto .av-puente__boton`
 * (0,3,0) y seguia perdiendo contra un `!important`. El boton salia con el cian
 * del articulo, 3,3:1.
 *
 * Entrar en una guerra de `!important` con contenido publicado es perderla en
 * el proximo articulo. Se deja de compartir la clase y ya esta.
 */
.av-v2 .av-puente__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--av-r-boton);
    background: var(--av-marino);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--av-transicion);
}

.av-v2 .av-puente__boton:hover {
    background: var(--av-marino-900);
    color: var(--av-blanco);
    text-decoration: none;
}

/* ==================================================================
 * 5. Barra lateral
 * ================================================================== */

.av-artlat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.av-artlat__caja {
    padding: var(--av-e-7b);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-blanco);
}

.av-artlat__caja--cta {
    border: 1.5px solid var(--av-cielo);
}

.av-artlat__titulo {
    margin: 0 0 12px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-base);
    line-height: 1.3;
    color: var(--av-marino);
}

.av-artlat__desde {
    margin: 11px 0 0;
    font-size: var(--av-t-cap);
    color: var(--av-texto-3);
}

/* --- Indice ---------------------------------------------------------- */

.av-artind {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: decimal;
    font-size: var(--av-t-nav);
}

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

/* 44px reales de alto: es la regla del proyecto (design-standards.md), y estos
   enlaces son la unica forma de saltar dentro de un articulo de 6.382 palabras
   desde el movil. Con `padding` solo llegaban a 38 y a 18. */
.av-v2 .av-artind__enlace {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    color: var(--av-texto-2);
    text-decoration: none;
}

.av-v2 .av-artind__enlace:hover,
.av-v2 .av-artind__enlace:focus-visible {
    color: var(--av-marino);
    text-decoration: underline;
}

/* --- Tambien te sirve ------------------------------------------------ */

.av-artenl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-v2 .av-artenl__enlace {
    display: flex;
    align-items: center;

    /* 44px de alto REAL. Con `padding: 11px` sobre una linea de 13,5px se
       quedaba en 41 y el medidor lo cazo. */
    min-height: 44px;
    padding: 6px 0;
    font-size: var(--av-t-nav);
    line-height: 1.4;

    /* NO el cian de marca: sobre blanco da 2,78:1. */
    color: var(--av-enlace);
    text-decoration: none;
}

.av-v2 .av-artenl__enlace:hover,
.av-v2 .av-artenl__enlace:focus-visible {
    color: var(--av-marino);
    text-decoration: underline;
}

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

@media (min-width: 1024px) {


    /* 🔴 LA DESVIACION DEL PROTOTIPO: el suyo da 579 + 579. Con dos tercios /
       un tercio la columna de lectura queda en ~700px, que a 16,5px son unos
       70 caracteres — dentro de los 60-75 que pide theme-v2-tokens.css. */
    .av-v2 .av-art__cuerpo {
        grid-template-columns: minmax(0, 700px) minmax(0, 360px);
        justify-content: space-between;
        gap: 48px;
        padding-top: 32px;
    }

    /* Tres columnas en el puente: recogida, fechas y boton, como el prototipo. */
    .av-puente__fila {
        grid-template-columns: 1fr 1fr auto;
    }

    .av-v2 .av-puente__boton {
        width: auto;
        min-height: 44px;
    }
}

/*
 * Cinturon contra lo que traigan los articulos dentro. Es contenido escrito a
 * mano durante cinco anos: hay HTML con anchos fijos y tablas sin envolver, y
 * basta uno para que el documento entero desborde en movil.
 */
.av-arttexto > * {
    max-width: 100%;
}

.av-arttexto pre,
.av-arttexto code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==================================================================
 * 7. Movimiento reducido
 * ================================================================== */

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

    .av-arttexto h2,
    .av-arttexto h3,
    .av-arttexto h4 {
        scroll-margin-top: 0;
    }

    html {
        scroll-behavior: auto;
    }
}