/* ==========================================================================
   SUBACABUR — preguntas frecuentes (/preguntas-frecuentes).

   La carga, por su seccion 'cabeza':
     private/views/web/faq/index.php

   Se sirve DESPUES de subacabur.css, asi que hereda sus variables de paleta
   (--suba-verde-oscuro, --suba-dorado, --suba-borde, ...) y su utilidad
   .suba-contenedor. Aqui no se redefine ni un color del brief.

   POR QUE NO SE REUTILIZA paginas.css. Esa hoja pesa 22 KB porque lleva ademas
   el formulario de contacto y el buscador global; esta pagina no usaria ni la
   quinta parte. Este archivo son 8 KB con comentarios (unos 2 KB comprimido,
   que es como lo sirve Apache), y la portada —que es lo que se mide— no lo
   carga. Los nombres de clase siguen la convencion del sitio, con prefijo
   propio: .faq-*

   SIN JAVASCRIPT Y SIN IMAGENES: nada aqui puede mover la maquetacion despues
   de pintarla. El CLS de la pagina es 0 por construccion.

   MOVIL PRIMERO: el ancho base es de una columna. El unico @media anade una
   segunda columna al indice, nunca la quita.

   Sin @import y sin ninguna URL externa: la CSP real solo admite 'self'.
   ========================================================================== */

:root {
    --faq-dorado-tenue: rgba(200, 164, 77, .16);
    --faq-verde-tenue: rgba(15, 58, 107, .07);
}

/* --- Migas de pan --------------------------------------------------------- */

.faq-migas {
    background: var(--suba-blanco);
    border-bottom: 1px solid var(--suba-borde);
    padding-block: .7rem;
    font-size: .88rem;
}

.faq-migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--suba-tinta-tenue);
}

.faq-migas__elemento + .faq-migas__elemento::before {
    content: "/";
    margin-right: .5rem;
    color: var(--suba-borde);
}

.faq-migas__elemento a { text-decoration: none; font-weight: 600; }
.faq-migas__elemento a:hover,
.faq-migas__elemento a:focus-visible { text-decoration: underline; }

/* --- Cabecera ------------------------------------------------------------- */

.faq-cabecera {
    background: linear-gradient(150deg, var(--suba-verde-oscuro), var(--suba-verde-medio));
    color: var(--suba-blanco);
    padding-block: 2.75rem;
}

.faq-cabecera__antetitulo {
    margin: 0 0 .45rem;
    color: var(--suba-dorado);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.faq-cabecera__titulo {
    margin: 0 0 .7rem;
    font-size: clamp(1.9rem, 5.5vw, 2.9rem);
    font-weight: 800;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

/* El primer pasaje de la pagina: se lee holgado y no compite con el titulo. */
.faq-cabecera__bajada {
    margin: 0;
    max-width: 48rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
}

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

.faq-indice {
    background: var(--suba-blanco);
    border-bottom: 1px solid var(--suba-borde);
    padding-block: 1.9rem;
}

.faq-indice__titulo {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
    /* El enlace «volver al índice» aterriza aquí: se deja aire por encima para
       que el encabezado no quede pegado al borde superior de la ventana. */
    scroll-margin-top: 1.5rem;
}

.faq-indice__lista {
    display: grid;
    gap: .55rem 2rem;
    margin: 0;
    padding: 0 0 0 1.25rem;
}

.faq-indice__elemento {
    margin: 0;
    color: var(--suba-tinta-tenue);
    font-size: .96rem;
}

.faq-indice__enlace {
    text-decoration: none;
    font-weight: 600;
}

.faq-indice__enlace:hover,
.faq-indice__enlace:focus-visible { text-decoration: underline; }

@media (min-width: 48rem) {
    .faq-indice__lista { grid-template-columns: 1fr 1fr; }
}

/* --- Preguntas y respuestas ----------------------------------------------- */

.faq-seccion { padding-block: 2.5rem; }

/*
   Cada bloque es una unidad de cita: pregunta, respuesta completa y su enlace
   propio. Se separan con una linea, no con tarjetas, para que la pagina se lea
   como un documento seguido y no como un tablero de fichas.
*/
.faq-item {
    max-width: 48rem;
    padding-block: 1.6rem;
    border-top: 1px solid var(--suba-borde);
    /* El ancla de cada pregunta es una URL publica: al llegar por #ancla el
       encabezado no puede quedar tapado ni pegado al filo de la pantalla. */
    scroll-margin-top: 1.5rem;
}

.faq-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.faq-item__pregunta {
    margin: 0 0 .7rem;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--suba-verde-oscuro);
    overflow-wrap: anywhere;
}

.faq-item__respuesta {
    font-size: 1.03rem;
    line-height: 1.75;
}

.faq-item__respuesta > :first-child { margin-top: 0; }
.faq-item__respuesta > :last-child { margin-bottom: 0; }

.faq-item__respuesta p { margin: 0 0 1rem; }

.faq-item__lista {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    list-style: none;
}

.faq-item__lista li {
    position: relative;
    margin-bottom: .5rem;
    padding-left: .85rem;
}

.faq-item__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--suba-dorado);
}

.faq-item__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    margin: 1rem 0 0;
}

.faq-enlace {
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
}

.faq-enlace::after { content: " →"; }

.faq-enlace:hover,
.faq-enlace:focus-visible { text-decoration: underline; }

.faq-item__volver {
    margin: .9rem 0 0;
    font-size: .84rem;
}

.faq-item__volver a {
    color: var(--suba-tinta-tenue);
    text-decoration: none;
}

.faq-item__volver a:hover,
.faq-item__volver a:focus-visible {
    color: var(--suba-verde-oscuro);
    text-decoration: underline;
}

/* --- Cierre --------------------------------------------------------------- */

.faq-cierre {
    padding-block: 0 3rem;
}

.faq-cierre__caja {
    background: var(--faq-verde-tenue);
    border: 1px solid var(--suba-borde);
    border-left: 4px solid var(--suba-dorado);
    border-radius: var(--suba-radio);
    padding: 1.6rem 1.5rem;
}

.faq-cierre__titulo {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
}

.faq-cierre__texto {
    margin: 0;
    max-width: 44rem;
    color: var(--suba-tinta-tenue);
}

.faq-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 1.3rem 0 0;
}

.faq-boton {
    display: inline-block;
    padding: .7rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--suba-radio);
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    line-height: 1.2;
}

.faq-boton--principal {
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
    color: var(--suba-blanco);
}

.faq-boton--principal:hover,
.faq-boton--principal:focus-visible {
    background: var(--suba-verde-medio);
    border-color: var(--suba-verde-medio);
    color: var(--suba-blanco);
}

.faq-boton--tenue {
    background: var(--suba-blanco);
    border-color: var(--suba-borde);
    color: var(--suba-verde-oscuro);
}

.faq-boton--tenue:hover,
.faq-boton--tenue:focus-visible {
    background: var(--faq-dorado-tenue);
    border-color: var(--suba-dorado);
    color: var(--suba-verde-oscuro);
}

/* --- Impresion ------------------------------------------------------------ */
/* Un ganadero imprime esto y se lo lleva al corral. Se quita lo que no sirve
   en papel y se dejan las respuestas, que es lo unico que importa ahi. */

@media print {
    .faq-migas,
    .faq-indice,
    .faq-item__volver,
    .faq-cierre { display: none; }

    .faq-cabecera {
        background: none;
        color: #000;
        padding-block: 0 1rem;
    }

    .faq-cabecera__antetitulo,
    .faq-cabecera__bajada { color: #000; }

    .faq-item {
        max-width: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .faq-item__pregunta { color: #000; }
}