/*
 * Autos Valls · Theme v2 — Ayuda (preguntas frecuentes)
 * -----------------------------------------------------
 * Epica AUTOVA-140 (EP-13) · Tareas AV-T-137 a AV-T-140.
 *
 * 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-eyebrow y el chrome). Aqui solo va lo propio de esta pagina.
 *
 * MOBILE FIRST. Todas las media queries son min-width. Los dos saltos estan al
 * final: cualquier regla que toque algo definido ahi tiene que ir ANTES, o gana
 * por orden.
 *
 * DOS DECISIONES DE COLOR QUE SE APARTAN DEL PROTOTIPO
 * ---------------------------------------------------
 * 1. Los titulos de grupo van en --av-enlace (5,0:1) y no en --av-cielo, que
 *    sobre blanco da 2,78:1. El prototipo los pinta con el cian puro. Es
 *    texto, no un adorno.
 * 2. El boton del cierre es marino con texto blanco (12,9:1). Blanco sobre cian
 *    esta prohibido en theme-v2-tokens.css y este boton es el unico de la
 *    pagina: si no se ve, no hay segunda oportunidad.
 *
 * INDICE
 *   0. Piezas que la base no trae   (44)
 *   1. Cabecera                     (68)
 *   2. Indice de grupos             (104)
 *   3. Acordeon de preguntas        (170)
 *   4. La tabla de franquicias      (262)
 *   5. Enlaces internos             (296)
 *   6. Banda de cierre              (334)
 *   7. Tablet (768px)               (378)
 *   8. Escritorio (1024px)          (408)
 *   9. Movimiento reducido          (424)
 */

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

/*
 * .av-btn--oscuro viene con width:100% de la home, donde vive dentro de una
 * tarjeta estrecha. Aqui esta en una banda ancha y a pantalla completa el boton
 * saldria de tres pantallas de largo.
 */
.av-v2 .av-ayuda-cta__boton {
    width: auto;
    white-space: nowrap;
}

/*
 * El ancla de los grupos queda debajo de la cabecera fija al saltar desde el
 * indice. 90px es la altura del chrome mas un respiro.
 */
.av-v2-ayuda [id^="av-ayuda-g"],
.av-v2-ayuda [id^="av-ayuda-p"] {
    scroll-margin-top: 90px;
}

/* ==================================================================
 * 1. Cabecera
 * ================================================================== */

.av-ayuda-cab {
    padding: 28px 0 4px;
}

/*
 * 🔴 `.av-v2` DELANTE, SIEMPRE, EN CUALQUIER REGLA QUE TOQUE UN .av-wrap.
 *
 * `.av-v2 .av-wrap` lleva max-width:1240px y tiene DOS clases de
 * especificidad; `.av-ayuda-cab__in` solo una, asi que pierde y no se aplica.
 * No da error ni warning: la seccion simplemente sale a 1240 mientras el
 * acordeon esta centrado a 900, y la pagina queda con dos ejes distintos.
 *
 * Aqui paso justo eso, y se vio en la captura, no leyendo el CSS.
 */
.av-v2 .av-ayuda-cab__in {
    display: flex;
    flex-direction: column;
    max-width: 900px;
}

.av-v2 .av-ayuda-cab__h1 {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h1-pagina);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--av-marino);
    text-wrap: balance;
}

.av-ayuda-cab__bajada {
    margin: 12px 0 0;
    max-width: 68ch;
    font-size: var(--av-t-prosa);
    line-height: 1.65;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 2. Indice de grupos
 * ================================================================== */

.av-ayuda-indice {
    padding-top: 28px;
}

.av-v2 .av-ayuda-indice__in {
    max-width: 900px;
}

/* Misma columna que el resto. Ver la nota de especificidad de mas arriba. */
.av-v2 .av-ayuda-enlaces__in {
    max-width: 900px;
}

.av-v2 .av-ayuda-indice__titulo {
    margin: 0 0 12px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-xs);
    letter-spacing: var(--av-ls-eyebrow);
    text-transform: uppercase;
    color: var(--av-texto-3);
}

.av-ayuda-indice__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-v2 .av-ayuda-indice__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 44px de area de toque contando el padding: es un objetivo de dedo. */
    padding: 11px 14px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    background: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    /* Sora solo existe en 700/800 en el diseno: el 600 no es un peso de la marca. */
    font-weight: 700;
    font-size: var(--av-t-sm);
    line-height: 1.35;
    color: var(--av-marino);
    transition: border-color var(--av-transicion), background-color var(--av-transicion);
}

.av-v2 .av-ayuda-indice__enlace:hover,
.av-v2 .av-ayuda-indice__enlace:focus-visible {
    border-color: var(--av-cielo);
    background: var(--av-fondo-suave);
    color: var(--av-marino);
}

/* El contador. No es decorativo: dice cuanto hay detras de cada salto. */
.av-ayuda-indice__n {
    flex: none;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: var(--av-r-pill);
    background: var(--av-fondo-suave);
    font-size: var(--av-t-xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--av-texto-3);
}

/* ==================================================================
 * 3. Acordeon de preguntas
 * ================================================================== */

/*
 * 900px como el diseno, y con `.av-v2` delante para ganarle a `.av-v2 .av-wrap`,
 * que lleva max-width 1240 y tiene la misma especificidad de clase.
 */
.av-v2 .av-ayuda-faqs__in {
    max-width: 900px;
}

.av-ayuda-grupo + .av-ayuda-grupo {
    margin-top: 34px;
}

/*
 * 🔴 --av-enlace, NO --av-cielo. El prototipo pinta estos titulos con el cian
 * de marca, que sobre blanco da 2,78:1. Son texto de encabezado, no un adorno.
 */
.av-v2 .av-ayuda-grupo__titulo {
    margin: 0 0 4px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-bloque);
    line-height: 1.25;
    letter-spacing: .01em;
    color: var(--av-enlace);
}

/* --- Cada pregunta -------------------------------------------------- */

.av-ayuda-faq {
    border-bottom: 1px solid var(--av-borde);
}

.av-ayuda-faq__p {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    cursor: pointer;
    /* Fuera el triangulo por defecto de Safari y de Chrome. */
    list-style: none;
}

.av-ayuda-faq__p::-webkit-details-marker {
    display: none;
}

/*
 * El <h3> va DENTRO del <summary>, asi que hereda el tamano del control y no
 * los 26px de un H3 normal. Sin esto la lista parece un indice, no un acordeon.
 */
.av-v2 .av-ayuda-faq__h {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    line-height: 1.4;
    color: var(--av-marino);
}

/* El «+» que gira. Es un pseudoelemento: no se lee ni se copia con el texto. */
.av-ayuda-faq__p::after {
    content: "+";
    flex: none;
    /* Empuja el signo a la altura de la primera linea de la pregunta. */
    margin-top: -2px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-bloque-lg);
    line-height: 1;
    color: var(--av-enlace);
    transition: transform var(--av-transicion);
}

.av-ayuda-faq[open] .av-ayuda-faq__p::after {
    transform: rotate(45deg);
}

.av-ayuda-faq__p:hover .av-ayuda-faq__h {
    color: var(--av-enlace);
}

/* --- La respuesta --------------------------------------------------- */

/*
 * 🔴 SIN max-height. El prototipo abre con max-height:200px y aqui hay
 * respuestas de noventa palabras: cortaria el texto y la respuesta PARECERIA
 * completa. El unico limite es la medida de linea.
 */
.av-ayuda-faq__r {
    padding: 0 0 var(--av-e-7b);
}

.av-ayuda-faq__r p,
.av-ayuda-faq__r li {
    max-width: var(--av-medida);
    font-size: var(--av-t-entradilla);
    line-height: 1.65;
    color: var(--av-texto-2);
}

.av-ayuda-faq__r p {
    margin: 0 0 10px;
}

.av-ayuda-faq__r p:last-child {
    margin-bottom: 0;
}

.av-ayuda-faq__r ul,
.av-ayuda-faq__r ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.av-ayuda-faq__r li {
    margin-bottom: 4px;
}

.av-ayuda-faq__r strong {
    font-weight: 700;
    color: var(--av-marino);
}

.av-v2 .av-ayuda-faq__r a {
    color: var(--av-enlace);
    text-decoration: underline;
}

/* ==================================================================
 * 4. La tabla de franquicias
 * ================================================================== */

/*
 * ⚠️ ESTA REGLA ES UNA RED, NO UN ARREGLO. Y conviene saberlo antes de tocarla.
 *
 * La tabla de franquicias lleva `min-width:1050px` en un estilo inline y a
 * 390px mide 1.070, asi que da por hecho que rompe el ancho del documento. NO
 * LO ROMPE: el HTML del [vc_raw_html] ya viene envuelto en su propio
 * `<div style="width:100%; overflow-x:auto">`. Medido con el navegador,
 * scrollWidth == innerWidth a 390 y a 1440.
 *
 * Se deja por lo que pueda venir despues: el cliente edita esta pagina, y la
 * siguiente tabla que pegue puede no traer su envoltorio. Cuesta una linea.
 *
 * Los estilos inline de LAYOUT (min-width, width, border-collapse) NO se
 * tocan. Pelear con ellos desde aqui obligaria a !important en cascada y el
 * resultado seria peor que el problema.
 *
 * 🔴 LA TIPOGRAFIA SI SE PELEA, y es la excepcion a lo de arriba: el mismo
 * `style=""` trae `font-family: 'Segoe UI', SegoeUI, Roboto, Helvetica,
 * Arial, sans-serif` (la firma de una tabla pegada desde Excel/Word). Un
 * estilo inline solo lo gana un `!important` en hoja: sin el, las 32
 * preguntas de esta pagina son Manrope y la UNICA tabla de la pagina se ve
 * con la fuente del sistema, en pantallas Windows literalmente "Segoe UI" a
 * la vista. Medido con CSS.getMatchedStylesForNode, no a ojo.
 */
.av-ayuda-faq__r--tabla {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.av-ayuda-faq__r--tabla table {
    /* La tabla trae su propio min-width; aqui solo se impide que lo pierda. */
    max-width: none;
}

.av-ayuda-faq__r--tabla table,
.av-ayuda-faq__r--tabla table * {
    font-family: var(--av-fuente-texto) !important;
}

/* Barra de desplazamiento discreta, para la tabla y para lo que venga. */
.av-ayuda-faq__r--tabla ::-webkit-scrollbar,
.av-ayuda-faq__r--tabla::-webkit-scrollbar {
    height: 8px;
}

.av-ayuda-faq__r--tabla ::-webkit-scrollbar-thumb,
.av-ayuda-faq__r--tabla::-webkit-scrollbar-thumb {
    border-radius: var(--av-r-pill);
    background: var(--av-borde);
}

/* ==================================================================
 * 5. Enlaces internos
 * ================================================================== */

.av-ayuda-enlaces__lista {
    margin-top: 16px;
}

.av-ayuda-enlace {
    height: 100%;
    box-sizing: border-box;
    padding: var(--av-e-7b);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-blanco);
    transition: border-color var(--av-transicion), box-shadow var(--av-transicion);
}

.av-ayuda-enlace:hover {
    border-color: var(--av-cielo);
    box-shadow: var(--av-sombra-suave);
}

.av-v2 .av-ayuda-enlace__titulo {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    line-height: 1.35;
}

.av-v2 .av-ayuda-enlace__titulo a {
    color: var(--av-marino);
}

.av-v2 .av-ayuda-enlace__titulo a:hover,
.av-v2 .av-ayuda-enlace__titulo a:focus-visible {
    color: var(--av-enlace);
}

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

/* ==================================================================
 * 6. Banda de cierre
 * ================================================================== */

.av-ayuda-cta {
    padding-bottom: 48px;
}

.av-ayuda-cta__caja {
    display: flex;
    flex-direction: column;
    gap: var(--av-e-7b);
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    border-radius: var(--av-r-bloque);
    background: var(--av-arena);
}

.av-v2 .av-ayuda-cta__titulo {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-bloque);
    line-height: 1.25;
    color: var(--av-marino);
}

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

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

@media (min-width: 768px) {

    .av-ayuda-cab {
        padding-top: 40px;
    }

    .av-ayuda-indice__lista {
        grid-template-columns: 1fr 1fr;
    }

    .av-v2 .av-ayuda-faq__h {
        font-size: var(--av-t-md);
    }

    .av-ayuda-faq__r p,
    .av-ayuda-faq__r li {
        font-size: var(--av-t-base);
    }

    .av-ayuda-cta__caja {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 28px;
    }
}

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

@media (min-width: 1024px) {

    .av-ayuda-indice__lista {
        grid-template-columns: repeat(3, 1fr);
    }

    .av-v2 .av-ayuda-grupo__titulo {
        font-size: var(--av-t-bloque-lg);
    }

    .av-ayuda-grupo + .av-ayuda-grupo {
        margin-top: 40px;
    }
}

/* ==================================================================
 * 9. Movimiento reducido
 * ================================================================== */

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

    .av-ayuda-faq__p::after {
        transition: none;
    }
}

/* ==================================================================
 * 99. Rescates del contenido de la propia pagina
 * ==================================================================
 *
 * 🔴 La tabla de fianzas del post_content trae un `color` gris EN LINEA (95a5a6) en las
 * celdas que dicen «No disponible». Medido con Chrome: 2,56:1 sobre blanco, muy
 * por debajo del 4,5:1 de AA — y «No disponible» no es decoracion, es el dato
 * que distingue una categoria de vehiculo de otra en una tabla de condiciones.
 *
 * Se corrige con un selector dirigido POR EL COLOR y no por posicion: si manana
 * el editor mueve la columna o añade una fila, el arreglo la sigue; si cambia el
 * gris a mano, deja de aplicar y no rompe nada. El !important es inevitable,
 * porque un estilo en linea gana a cualquier hoja.
 *
 * NO se toca el post_content. Ese es el criterio de todo el rediseño: el
 * contenido es del cliente, la presentacion es nuestra.
 */
.av-v2-ayuda td[style*="95a5a6" i] {
    color: var(--av-texto-3) !important;
}