/* ==================================================================
   Machala GPS — Preguntas frecuentes
   Cada pregunta es una fila video + texto en zigzag (mismo patrón que
   products.css → .spot-product--invertido). Videos de fondo blanco
   real, fundidos con la sección (misma técnica de máscara que
   about.css → .about-intro__video): nunca se sienten como un recuadro
   de video, sino como parte del fondo. Sin tarjetas, sin gradientes.
   ================================================================== */

/* impeccable-disable-next-line overused-font: Montserrat es la display de marca aprobada (equivalente libre de fieldwork/findmespot) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap");

/* Títulos con la misma display del resto del sitio (Montserrat 800 mayúsculas) */
.page-faq h1,
.page-faq h2 {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 800;
}

.faq-intro__title,
.faq-item__title {
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* ---------- Intro de la página ---------- */

.faq-intro {
    padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem);
}

.faq-intro__title {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}

.faq-intro__text {
    color: var(--c-text-soft);
}

/* ---------- Lista de preguntas (zigzag) ---------- */

.faq-list {
    /* Igualado al fondo real de los 3 videos (~#fbfbfc, verificado por
       muestreo de píxeles): así el cuadro se pierde y la máscara cubre
       el resto, igual que en Nosotros. */
    background-color: #fdfdfd;
    padding-block: clamp(1.5rem, 3vw, 2rem) clamp(3rem, 6vw, 4.5rem);
}

.faq-item {
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.faq-item + .faq-item {
    border-top: 1px solid #e3e9f4;
}

.faq-item__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
}

@media (min-width: 1024px) {
    .faq-item__grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }

    /* Zigzag: la pregunta impar (2ª) lleva el video a la izquierda */
    .faq-item--invertido .faq-item__copy {
        order: 2;
    }

    .faq-item--invertido .faq-item__media {
        order: 1;
    }
}

.faq-item__title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    text-wrap: balance;
}

.faq-item__text {
    margin-top: 0.9rem;
    max-width: 46ch;
    color: var(--c-text);
}

.faq-item__media {
    position: relative;
}

.faq-item__video {
    display: block;
    width: 100%;
    height: auto;
    /* El fondo del video no es idéntico al de la sección: esta máscara
       desvanece el propio video a transparente en los 4 bordes, de modo
       que el cuadro se pierde en el fondo (fundido, no un recuadro). */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
}

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

.faq-cta {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.faq-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
}

.faq-cta__text {
    color: var(--c-navy);
    font-size: clamp(1.15rem, 2vw, 1.375rem);
    font-weight: 700;
}