/* =========================================================
   FARMAVITAE — Sitio público · capa premium (sistema --fv-*)
   Se carga en TODAS las páginas públicas, DESPUÉS de sus hojas
   propias. No cambia funciones — solo diseño:
   · fondo de página blanco (sin el degradado azul)
   · tipografía Plus Jakarta Sans
   · tarjetas delimitadas por borde en vez de sombra difusa
   · un solo azul de acción, botones sin "rebote"
   · títulos de sección a la izquierda (sin el patrón
     "eyebrow centrado + título + subtítulo")
   El bloque de escritorio (min-width:641px) es donde vive el
   grueso del rediseño; en celular ya manda inicio.css/mercado.css.
   ========================================================= */

/* ---------- Base: aplica en cualquier ancho ---------- */
body.cuerpo-mercado {
    background: #fff !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.cuerpo-mercado h1,
body.cuerpo-mercado h2,
body.cuerpo-mercado h3,
body.cuerpo-mercado h4,
body.cuerpo-mercado .hero-mercado h1,
body.cuerpo-mercado .ini-seccion-cabecera h2,
body.cuerpo-mercado .seccion-header h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -.01em;
}
body.cuerpo-mercado ::selection { background: color-mix(in srgb, var(--fv-teal) 40%, transparent); color: var(--fv-ink); }

/* La barra de confianza en el mismo tono oscuro del sistema */
body.cuerpo-mercado .barra-confianza { background: var(--fv-ink); }


/* ================= ESCRITORIO ================= */
@media (min-width: 641px) {

    /* ---- Página / fondos ---- */
    body.cuerpo-mercado::before,
    body.cuerpo-mercado::after { display: none !important; }

    /* ---- Header ---- */
    .nav-sitio {
        background: #fff;
        border-bottom: 1px solid var(--fv-border);
        box-shadow: 0 1px 0 var(--fv-border);
    }
    .nav-sitio-links a { color: var(--fv-muted); font-weight: 600; }
    .nav-sitio-links a:hover { color: var(--fv-ink); }
    .nav-sitio-links a.activa {
        color: var(--fv-blue);
        border-bottom: 2px solid var(--fv-blue);
    }
    .nav-quiero-vender {
        background: var(--fv-blue) !important;
        border-radius: var(--fv-r-md) !important;
        box-shadow: none !important;
    }
    .pill-nuevo { background: var(--fv-teal); color: var(--fv-ink); }

    /* ---- Tarjetas: borde, no sombra difusa ---- */
    .card,
    .producto-card-mkt,
    .tienda-card,
    .categoria-hero-item,
    .testimonio-card,
    .tarjeta-mayorista,
    .cupon-vitrina-card,
    .fcn-producto-card,
    .porque-card,
    .sobre-farmavitae-pilar {
        border: 1px solid var(--fv-border) !important;
        box-shadow: none !important;
        border-radius: var(--fv-r-lg) !important;
    }
    .producto-card-mkt:hover,
    .tienda-card:hover,
    .testimonio-card:hover,
    .categoria-hero-item:hover {
        transform: none !important;
        box-shadow: 0 12px 28px -18px rgba(10,30,60,.18) !important;
        border-color: var(--fv-border) !important;
    }

    /* ---- Botones ---- */
    .btn-mkt-primary {
        background: var(--fv-blue) !important;
        border-radius: var(--fv-r-md) !important;
        box-shadow: none !important;
        font-weight: 700;
    }
    .btn-mkt-primary:hover { background: var(--fv-ink) !important; transform: none !important; box-shadow: none !important; filter: none !important; }
    .btn-mkt-secundario {
        background: #fff !important;
        color: var(--fv-blue) !important;
        border: 1px solid var(--fv-border) !important;
        border-radius: var(--fv-r-md) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .btn-mkt-secundario:hover { background: #fff !important; border-color: var(--fv-blue) !important; transform: none !important; }
    .btn-mkt-link { color: var(--fv-blue) !important; }

    /* ---- Hero: sin resplandores, borde limpio ---- */
    .hero-mercado-wrap {
        border: 1px solid var(--fv-border) !important;
        box-shadow: none !important;
        background: linear-gradient(180deg, var(--fv-surface) 0%, #fff 60%) !important;
        border-radius: var(--fv-r-xl) !important;
    }
    .hero-mercado-wrap::before,
    .hero-mercado-wrap::after,
    .hero-mercado::before { display: none !important; }
    .hero-mercado h1,
    .hero-inicio h1 { color: var(--fv-ink) !important; }
    .hero-mercado h1 span,
    .hero-mercado-texto h1 span { color: var(--fv-blue) !important; }
    .hero-sub { color: var(--fv-body) !important; }
    .hero-kicker,
    .ini-hero-kicker-nuevo {
        background: var(--fv-surface) !important;
        border: 1px solid var(--fv-border) !important;
        color: var(--fv-blue) !important;
        box-shadow: none !important;
    }

    /* ---- Títulos de sección (centrados en escritorio) ---- */
    .ini-seccion-cabecera h2,
    .seccion-header h2 {
        font-size: 26px !important;
        font-weight: 800 !important;
        color: var(--fv-ink) !important;
        margin: 0 0 6px !important;
    }
    .ini-seccion-cabecera p { color: var(--fv-muted) !important; }
    /* El turquesa es acento SOLO sobre fondo oscuro — sobre blanco el
       eyebrow va en azul para que se lea bien. */
    .ini-seccion-eyebrow,
    .destacados-eyebrow {
        color: var(--fv-blue) !important;
        letter-spacing: .09em;
    }
    .ini-seccion-eyebrow::before,
    .ini-seccion-eyebrow::after {
        background: color-mix(in srgb, var(--fv-blue) 45%, transparent) !important;
    }
    /* En los bloques oscuros el eyebrow sí va en turquesa. */
    .ini-ofertas-seccion .ini-seccion-eyebrow,
    .impsoc-hero-movil-eyebrow,
    .fcn-hero-maquila-eyebrow,
    .hero-banner-oferta-kicker { color: var(--fv-teal) !important; }

    /* ---- Secciones de ofertas / bloques oscuros ---- */
    .ini-ofertas-seccion {
        background: linear-gradient(135deg, var(--fv-ink), #0F2D52) !important;
        border-radius: var(--fv-r-xl) !important;
    }
    .ini-ofertas-seccion::before,
    .ini-ofertas-seccion::after { display: none !important; }
    .ini-ofertas-seccion .ini-seccion-eyebrow { color: var(--fv-teal) !important; }

    /* ---- Categorías ---- */
    .categoria-hero-item {
        padding: 16px 18px !important;
        column-gap: 14px !important;
        grid-template-columns: 42px 1fr !important;
    }
    .categoria-hero-item:hover { border-color: color-mix(in srgb, var(--fv-blue) 35%, var(--fv-border)) !important; }
    .categoria-hero-ico {
        width: 42px !important;
        height: 42px !important;
        font-size: 19px !important;
        box-shadow: none !important;
        background: color-mix(in srgb, var(--fv-blue) 10%, #fff) !important;
        color: var(--fv-blue) !important;
    }
    /* El SVG del ícono nunca tuvo un tamaño fijo acá — sin esto, se
       estira para llenar el círculo entero (sin margen, "pegado" al
       borde), en vez de quedar centrado con aire alrededor. */
    .categoria-hero-ico svg {
        width: 20px !important;
        height: 20px !important;
    }
    .categoria-hero-item:hover .categoria-hero-ico {
        background: var(--fv-blue) !important;
        color: #fff !important;
        transform: none !important;
    }
    .categoria-hero-item > span:not(.categoria-hero-ico):not(.categoria-hero-cantidad) {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: var(--fv-ink) !important;
    }
    .categoria-hero-cantidad {
        display: inline-block;
        margin-top: 3px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: var(--fv-blue) !important;
        background: color-mix(in srgb, var(--fv-blue) 8%, transparent);
        width: fit-content;
    }
    .categoria-hero-item-vertodas .categoria-hero-ico { background: var(--fv-surface) !important; color: var(--fv-muted) !important; }
    .categoria-hero-item-vertodas:hover .categoria-hero-ico { background: var(--fv-blue) !important; color: #fff !important; }

    /* ---- Chips / tabs ---- */
    .ini-tab-catalogo.ini-tab-catalogo-activa,
    .chip-categoria.activo {
        background: var(--fv-blue) !important;
        border-color: var(--fv-blue) !important;
        box-shadow: none !important;
    }

    /* ---- Marcas ---- */
    .ini-marca-item { border: 1px solid var(--fv-border); border-radius: var(--fv-r-pill); }

    /* ---- Footer ---- */
    .footer-inicio {
        background: var(--fv-ink) !important;
        margin-top: var(--space-7);
    }
    .footer-inicio::before { background: linear-gradient(90deg, transparent, var(--fv-teal), transparent) !important; }
    .footer-mercado {
        background: var(--fv-ink) !important;
        color: rgba(255,255,255,.72) !important;
        border-top: none !important;
    }
    .footer-mercado a { color: rgba(255,255,255,.72) !important; }
    .footer-mercado a:hover { color: #fff !important; }

    /* ---- Modal de producto ---- */
    .ini-producto-modal-contenido { border-radius: var(--fv-r-xl) !important; }
    .ini-producto-modal-info h3 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--fv-ink) !important; }

    /* ---- Testimonios ---- */
    .testimonio-card::before { display: none !important; }
    .testimonio-texto { color: var(--fv-body) !important; }

    /* ---- Newsletter ---- */
    .ini-newsletter {
        background: var(--fv-surface) !important;
        border: 1px solid var(--fv-border) !important;
        box-shadow: none !important;
        border-radius: var(--fv-r-xl) !important;
    }

    /* ---- Inicio · Impacto social: banner premium también en escritorio ----
       Sin !important en display: un selector de ID como este le gana a
       .oculto{display:none!important} en especificidad, así que con
       !important esta regla SIEMPRE mostraba la sección en pantallas
       ≥641px, incluso con el programa de Impacto Social desactivado
       (cuando inicio.js nunca le quita la clase .oculto). Sin
       !important, .oculto (que si está presente SÍ trae !important)
       sigue ganando cuando corresponde ocultar; cuando no está
       presente, esta regla igual aplica sin problema — nada más
       compite por "display" en este elemento. */
    #seccion-impacto-social-inicio {
        display: flex;
        flex-direction: column;
    }
    #seccion-impacto-social-inicio .ini-seccion-cabecera { order: 1; }
    #seccion-impacto-social-inicio .ini-impacto-banner { order: 2; }
    #seccion-impacto-social-inicio .fila-impacto-social-fundaciones { order: 3; }

    .ini-impacto-banner {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        padding: 32px 40px;
        margin: 4px 0 24px;
        border-radius: var(--fv-r-xl, 18px);
        background:
            radial-gradient(420px 240px at 100% 0%, rgba(76,224,208,.24), transparent 70%),
            linear-gradient(135deg, var(--fv-ink, #0B2545) 0%, #0F2D52 100%);
    }
    .ini-impacto-banner::after {
        content: '';
        position: absolute;
        right: -30px;
        bottom: -50px;
        width: 200px;
        height: 200px;
        background: rgba(76,224,208,.12);
        -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.9-10-9.3C.4 8.3 2 4.5 5.6 4A5 5 0 0 1 12 7a5 5 0 0 1 6.4-3c3.6.5 5.2 4.3 3.6 7.7C19.5 16.1 12 21 12 21Z'/%3E%3C/svg%3E");
        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.9-10-9.3C.4 8.3 2 4.5 5.6 4A5 5 0 0 1 12 7a5 5 0 0 1 6.4-3c3.6.5 5.2 4.3 3.6 7.7C19.5 16.1 12 21 12 21Z'/%3E%3C/svg%3E");
        pointer-events: none;
    }
    .ini-impacto-banner > * { position: relative; z-index: 1; }
    .ini-impacto-banner-eyebrow {
        display: block;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--fv-teal, #4CE0D0);
        margin-bottom: 8px;
    }
    .ini-impacto-banner-texto-col { flex: 1; }
    .ini-impacto-banner-titular {
        display: block;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.3;
        color: #fff;
        max-width: 40ch;
    }
    .ini-impacto-banner-titular span { color: var(--fv-teal, #4CE0D0); }
    .ini-impacto-banner-cta {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 22px;
        border-radius: var(--fv-r-pill, 999px);
        background: #fff;
        color: var(--fv-ink, #0B2545);
        font-size: 13.5px;
        font-weight: 700;
    }
    .ini-impacto-banner-cta svg { width: 16px; height: 16px; }

    /* ---- Distribución / Fábrica: banners oscuros consistentes ---- */
    .hero-banner-oferta-movil { display: none !important; } /* solo celular */
    .fcn-hero-visual,
    .dist-hero-visual {
        border: 1px solid var(--fv-border) !important;
        box-shadow: none !important;
        border-radius: var(--fv-r-lg) !important;
    }

    /* ---- Inicio · "Así de simple es vender": quitar marco doble ---- */
    .cta-vendedor-imagen {
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    /* ---- Inicio · Impacto social: tarjetas de fundación al sistema ---- */
    #seccion-impacto-social-inicio .ini-seccion-cabecera { margin-bottom: 22px; }
    .ini-impacto-social-mensaje {
        font-size: 17px !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
        color: var(--fv-body, #41566E) !important;
        max-width: 52ch;
        margin: 12px auto 0 !important;
    }
    /* El enlace "Ver todas las fundaciones" se quitó del HTML: repetía el
       destino del CTA del banner. Este guard cubre copias en caché. */
    #seccion-impacto-social-inicio .ini-impacto-social-vertodas-fila { display: none !important; }
    .fila-impacto-social-fundaciones {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px !important;
        max-width: 760px;
        margin: 24px auto 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .fila-impacto-social-fundaciones.modo-carrusel { flex-wrap: wrap; }
    /* Con una sola fundación activa (el caso más común hoy), el grid de
       1 columna la estiraba a los 760px completos — una tarjeta ancha
       con logo/texto apretados a la izquierda y medio card de espacio
       vacío a la derecha. Si es la única, se limita su ancho y se
       centra, para que se vea como una tarjeta normal, no como una
       franja a medio llenar. Con 2+ fundaciones no aplica — ahí sí
       aprovechan el ancho completo en columnas. */
    .fila-impacto-social-fundaciones:has(.impacto-social-inicio-card:only-child) {
        grid-template-columns: minmax(0, 400px);
        justify-content: center;
    }
    .impacto-social-inicio-card {
        width: auto !important;
        flex: none !important;
        border: 1px solid var(--fv-border) !important;
        box-shadow: none !important;
        border-radius: var(--fv-r-lg) !important;
        background: #fff !important;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }
    .impacto-social-inicio-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 18px 40px -22px rgba(10,30,60,.32) !important;
        border-color: color-mix(in srgb, var(--fv-teal) 45%, var(--fv-border)) !important;
    }
    .impacto-social-inicio-franja {
        position: relative;
        height: 52px !important;
        background: linear-gradient(120deg, var(--fv-ink), #0F2D52 55%, var(--fv-teal)) !important;
    }
    /* El corazón de la franja se leía como un botón de "favorito" — se
       quita en escritorio; la franja con degradado ya es suficiente. */
    .impacto-social-inicio-franja-corazon { display: none !important; }
    .impacto-social-inicio-logo {
        width: 58px !important;
        height: 58px !important;
        border-radius: 15px;
        margin: -28px var(--fv-s-4, 16px) 0 !important;
        border: 3px solid #fff;
        transition: transform .22s ease;
    }
    .impacto-social-inicio-card:hover .impacto-social-inicio-logo { transform: scale(1.04) rotate(-2deg); }
    .impacto-social-inicio-info {
        padding: 10px 16px 0 !important;
        gap: 5px !important;
    }
    .impacto-social-inicio-info strong { font-size: 16px !important; }
    .impacto-social-inicio-cta { margin: 12px 16px 16px !important; }
    @media (prefers-reduced-motion: reduce) {
        .impacto-social-inicio-card,
        .impacto-social-inicio-card * { transition: none !important; }
        .impacto-social-inicio-card:hover { transform: none !important; }
    }
    .impacto-social-inicio-programa {
        align-self: flex-start;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--fv-green) !important;
        background: #EAF7F0;
        padding: 3px 10px;
        border-radius: var(--fv-r-pill);
    }
    .impacto-social-inicio-programa-generico {
        color: var(--fv-muted) !important;
        background: var(--fv-surface) !important;
    }
    .impacto-social-inicio-info strong { color: var(--fv-ink) !important; }
    .impacto-social-inicio-info p {
        color: var(--fv-muted) !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .impacto-social-inicio-cta { color: var(--fv-blue) !important; }
    .btn-impacto-social-vertodas {
        background: #fff !important;
        color: var(--fv-blue) !important;
        border: 1px solid var(--fv-border) !important;
        box-shadow: none !important;
    }
    .btn-impacto-social-vertodas:hover {
        transform: none !important;
        border-color: var(--fv-blue) !important;
        box-shadow: none !important;
    }

    /* ---- Inicio · Ofertas de la semana: bloque oscuro con aire ---- */
    .ini-ofertas-seccion {
        padding: 44px 40px !important;
        background-image: linear-gradient(135deg, var(--fv-ink), #0F2D52) !important;
    }
    .ini-ofertas-seccion::before,
    .ini-ofertas-seccion::after { display: none !important; }
    .ini-ofertas-seccion .ini-seccion-cabecera { margin-bottom: 26px; }
    .ini-ofertas-seccion .ini-seccion-cabecera h2 { color: #fff !important; }
    .ini-ofertas-seccion .ini-seccion-cabecera p { color: rgba(255,255,255,.7) !important; }
    .ini-ofertas-grid {
        gap: 20px !important;
    }
    /* El centrado SOLO cuando de verdad hay pocas tarjetas (clase que
       pone inicio.js según cuántas ofertas hay) — antes esta regla
       centraba SIEMPRE, sin importar cuántas ofertas hubiera, y con
       justify-content:center + overflow-x:auto la primera tarjeta
       quedaba parcialmente fuera del área visible y sin forma de hacer
       scroll hasta ella (el excedente se reparte a ambos lados, pero el
       scroll solo puede ir hacia la derecha desde 0). */
    .ini-ofertas-grid-centrado {
        justify-content: center;
    }

    /* ---- Marketplace · chips de filtros activos (faltaban en escritorio) ---- */
    .chips-filtros-activos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--fv-s-2, 8px);
        margin: 0 0 var(--fv-s-3, 12px);
    }
    .chips-filtros-activos.oculto { display: none; }
    .chip-filtro-activo {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 6px 0 12px;
        border-radius: var(--fv-r-pill, 999px);
        border: 1px solid var(--fv-blue, #0B57A4);
        background: color-mix(in srgb, var(--fv-blue) 8%, #fff);
        color: var(--fv-blue, #0B57A4);
        font-family: var(--fv-font);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }
    .chip-filtro-activo span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--fv-blue) 16%, #fff);
        font-size: 11px;
        line-height: 1;
    }
    .chip-filtro-activo:hover span { background: color-mix(in srgb, var(--fv-blue) 26%, #fff); }
    .chip-filtro-limpiar {
        height: 32px;
        padding: 0 12px;
        border: none;
        background: none;
        color: var(--fv-muted, #5A6B80);
        font-family: var(--fv-font);
        font-size: 12.5px;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
    }
    .chip-filtro-limpiar:hover { color: var(--fv-ink, #0B2545); }
}


/* =========================================================
   PÁGINAS LEGALES + FAQ (términos, privacidad, preguntas
   frecuentes) — al sistema --fv-*. Aplica en cualquier ancho.
   ========================================================= */
.legal-documento {
    max-width: 760px;
    border: 1px solid var(--fv-border, #E9EEF3) !important;
    box-shadow: none !important;
    border-radius: var(--fv-r-xl, 18px) !important;
    padding: 40px !important;
}
.legal-volver {
    background: #fff !important;
    border: 1px solid var(--fv-border, #E9EEF3) !important;
    color: var(--fv-body, #41566E) !important;
    border-radius: var(--fv-r-pill, 999px) !important;
    font-weight: 700;
}
.legal-volver:hover { background: #fff !important; border-color: var(--fv-blue, #0B57A4) !important; color: var(--fv-ink, #0B2545) !important; }
.legal-actualizacion {
    color: var(--fv-soft, #8494A8) !important;
    letter-spacing: .06em;
}
.legal-documento h1 {
    font-family: var(--fv-font);
    font-weight: 800;
    color: var(--fv-ink, #0B2545) !important;
    letter-spacing: -.01em;
}
.legal-intro {
    color: var(--fv-body, #41566E) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}
.legal-documento h2 {
    font-family: var(--fv-font);
    font-weight: 800 !important;
    font-size: 18px !important;
    color: var(--fv-blue, #0B57A4) !important;
    margin: 32px 0 12px !important;
    letter-spacing: -.005em;
}
.legal-documento p,
.legal-documento ul,
.legal-documento li { color: var(--fv-body, #41566E) !important; }
.legal-documento a { color: var(--fv-blue, #0B57A4) !important; font-weight: 600; }
.legal-documento a:hover { text-decoration: underline; }

/* ---- Acordeón de preguntas frecuentes ---- */
.faq-container { gap: 10px; }
.faq-item {
    border: 1px solid var(--fv-border, #E9EEF3) !important;
    border-radius: var(--fv-r-md, 12px) !important;
    background: #fff;
    transition: border-color .18s ease;
}
.faq-item.faq-abierta { border-color: color-mix(in srgb, var(--fv-blue) 35%, var(--fv-border)) !important; }
.faq-question {
    font-family: var(--fv-font);
    font-weight: 700 !important;
    font-size: 14.5px !important;
    color: var(--fv-ink, #0B2545) !important;
    background: #fff !important;
    padding: 16px 18px !important;
}
.faq-question span {
    color: var(--fv-blue, #0B57A4) !important;
    font-size: 20px !important;
    font-weight: 400;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.faq-answer {
    color: var(--fv-body, #41566E) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 0 18px !important;
}
/* El tope de altura fijo recortaba las respuestas más largas (métodos
   de pago, accesibilidad). Se sube bastante — el contenido real de la
   FAQ nunca se acerca a este límite. */
.faq-item.faq-abierta .faq-answer { max-height: 900px !important; padding: 0 18px 16px !important; }
.faq-answer a { color: var(--fv-blue, #0B57A4) !important; font-weight: 600; }

@media (max-width: 640px) {
    .legal-documento {
        padding: 22px 18px !important;
        border-radius: var(--fv-r-lg, 14px) !important;
        margin: var(--fv-s-4, 16px) auto !important;
    }
    .legal-intro { font-size: 15px !important; }
    .legal-documento h2 { font-size: 17px !important; margin-top: 26px !important; }
}