/* ==========================================================================
   informacion.css — estilos propios de la página public/informacion.php
   Extraído del <style> inline original; depende de los tokens definidos
   en variables.css (cargado antes que este archivo).
   ========================================================================== */
/* ==========================================================================
           MENÚ HAMBURGUESA — igual que en index.php, para que el header se
           comporte de forma idéntica en toda la navegación del sitio.
           ========================================================================== */
        .nav-toggle {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            gap: 5px;
            width: 40px;
            height: 40px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            z-index: 110;
        }
        .nav-toggle__linea {
            display: block;
            height: 2px;
            border-radius: 2px;
            background: var(--morado-900);
            transition: transform var(--transicion-rapida), opacity var(--transicion-rapida), width var(--transicion-rapida);
        }
        .nav-toggle__linea:nth-child(1) { width: 24px; }
        .nav-toggle__linea:nth-child(2) { width: 18px; }
        .nav-toggle__linea:nth-child(3) { width: 24px; }
        .nav-toggle[aria-expanded="true"] .nav-toggle__linea { width: 24px; }
        .nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(2) { opacity: 0; }
        .nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        @media (max-width: 900px) {
            .nav-toggle { display: flex; }
            #main-header nav {
                position: fixed;
                top: var(--altura-header, 76px);
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                background: var(--color-superficie);
                padding: 0.5rem 1.5rem 1.5rem;
                box-shadow: var(--sombra-lg);
                max-height: calc(100vh - var(--altura-header, 76px));
                overflow-y: auto;
                opacity: 0;
                transform: translateY(-10px);
                pointer-events: none;
                transition: opacity var(--transicion-base), transform var(--transicion-base);
            }
            #main-header nav.nav--abierto {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }
            #main-header nav a {
                padding: 0.9rem 0;
                border-bottom: 1px solid var(--color-borde);
            }
            #main-header nav a::after { display: none; }
            #main-header .header-cta {
                margin-top: 0.75rem;
                justify-content: center;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .nav-toggle__linea, #main-header nav { transition: none; }
        }

        body { background-color: var(--color-fondo); overflow-x: hidden; }

        .pagina-intro {
            text-align: center;
            max-width: 640px;
            margin: 0 auto;
            padding: 9rem 1.5rem;;
        }
        .pagina-intro h1 { margin-bottom: var(--espacio-1); }
        .pagina-intro p {
            color: var(--color-texto-suave);
            font-size: var(--texto-lg);
            line-height: var(--interlineado-normal);
        }

        .seccion {
            max-width: 800px;
            margin: 0 auto;
            padding: var(--espacio-4) 1.5rem var(--espacio-7);
        }

        /* ---- FAQ interactivo ---- */
        .faq-controles {
            display: flex;
            flex-direction: column;
            gap: var(--espacio-3);
            margin-bottom: var(--espacio-4);
        }
        .faq-buscador { position: relative; display: flex; align-items: center; }
        .faq-buscador svg {
            position: absolute; left: 1rem; width: 18px; height: 18px;
            color: var(--color-texto-suave); pointer-events: none;
        }
        .faq-buscador input {
            width: 100%;
            padding: 0.8rem 1rem 0.8rem 2.75rem;
            font-family: inherit;
            font-size: var(--texto-base);
            color: var(--color-texto);
            background: var(--color-superficie);
            border: 1.5px solid var(--color-borde);
            border-radius: var(--radio-sm);
            box-sizing: border-box;
            transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
        }
        .faq-buscador input:focus {
            outline: none;
            border-color: var(--color-foco);
            box-shadow: 0 0 0 3px rgba(176, 138, 52, 0.18);
        }

        .faq-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .faq-filtro {
            padding: 0.5rem 1rem;
            font-family: inherit;
            font-size: var(--texto-sm);
            font-weight: 600;
            color: var(--color-texto-suave);
            background: var(--color-superficie);
            border: 1.5px solid var(--color-borde);
            border-radius: 999px;
            cursor: pointer;
            transition: background-color var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
        }
        .faq-filtro:hover { border-color: var(--morado-400); }
        .faq-filtro.activo { background: var(--morado-600); border-color: var(--morado-600); color: var(--blanco); }

        .faq-lista { display: flex; flex-direction: column; gap: 0.75rem; }
        .faq-item {
            background: var(--color-superficie);
            border: 1px solid var(--color-borde);
            border-radius: var(--radio-md);
            overflow: hidden;
            transition: border-color var(--transicion-rapida);
        }
        .faq-item.abierto { border-color: var(--morado-300); }
        .faq-item[hidden] { display: none; }
        .faq-pregunta-h { margin: 0; }

        .faq-pregunta {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            width: 100%;
            padding: 1rem 1.15rem;
            font-family: inherit;
            font-size: var(--texto-base);
            font-weight: 600;
            color: var(--color-texto);
            text-align: left;
            cursor: pointer;
        }
        .faq-nudo { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--oro-500); }
        .faq-pregunta__texto { flex: 1; }
        .faq-flecha {
            flex-shrink: 0; width: 18px; height: 18px;
            color: var(--color-texto-suave);
            transition: transform var(--transicion-base);
        }
        .faq-item.abierto .faq-flecha { transform: rotate(180deg); color: var(--morado-600); }

        /* Acordeón con CSS puro (grid-template-rows 0fr -> 1fr) */
        .faq-respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms ease; }
        .faq-item.abierto .faq-respuesta { grid-template-rows: 1fr; }
        .faq-respuesta__inner { overflow: hidden; }
        .faq-respuesta p {
            margin: 0;
            padding: 0 1.15rem 1.1rem 2.75rem;
            color: var(--color-texto-suave);
            font-size: var(--texto-sm);
            line-height: var(--interlineado-relajado);
        }
        .faq-respuesta a { color: var(--morado-600); text-decoration: underline; }

        .faq-vacio { text-align: center; padding: var(--espacio-4); color: var(--color-texto-suave); }
        .faq-vacio a { color: var(--morado-600); font-weight: 600; }

        @media (prefers-reduced-motion: reduce) {
            .faq-respuesta, .faq-flecha, .faq-filtro { transition: none; }
        }

        /* ---- CTA de cierre ---- */
        .cta-final { text-align: center; padding: var(--espacio-6) 1.5rem; }
        .cta-final h2 { margin-bottom: var(--espacio-2); }
        .cta-final__botones { display: flex; justify-content: center; gap: var(--espacio-2); flex-wrap: wrap; margin-top: var(--espacio-3); }
        .cta-btn {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.8rem 1.5rem; border-radius: var(--radio-sm); font-weight: 700;
            font-size: var(--texto-base); text-decoration: none;
            transition: transform var(--transicion-rapida), background-color var(--transicion-rapida);
        }
        .cta-btn--primario { background: var(--color-primario); color: var(--blanco); }
        .cta-btn--primario:hover { background: var(--color-primario-hover); transform: translateY(-2px); }
        .cta-btn--secundario { background: var(--color-superficie); color: var(--color-texto); border: 1.5px solid var(--color-borde); }
        .cta-btn--secundario:hover { border-color: var(--morado-400); transform: translateY(-2px); }
        @media (prefers-reduced-motion: reduce) { .cta-btn { transition: none; } }