/* =========================================================
   PREGUNTAS-FRECUENTES — estilos propios de esta página.
   Mismos tokens que el resto de páginas AIXA (ver
   pages/como-funciona/style.css para la explicación).
   ========================================================= */

.aixa-page {
    --color-bg-dark: #050816;
    --color-bg-light: #0a1120;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #60a5fa;
    --color-heading: #f8fafc;
    --color-body: #cbd5e1;
    --color-muted: #94a3b8;
    --color-surface: #0f172a;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--color-body);
}

section {
    height: 100dvh;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.aixa-page .section-dark { background-color: var(--color-bg-dark); }
.aixa-page .section-light { background-color: var(--color-bg-light); }

.aixa-page .glass {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.aixa-page .bg-primary { background-color: var(--color-primary); }
.aixa-page .bg-primary:hover,
.aixa-page .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
.aixa-page .text-primary,
.aixa-page .text-primary-light { color: var(--color-primary-light); }
.aixa-page .text-heading { color: var(--color-heading); }
.aixa-page .text-body { color: var(--color-body); }
.aixa-page .text-muted { color: var(--color-muted); }

.aixa-page h1,
.aixa-page h2 { color: var(--color-heading); }





/* =========================================================
   SECCIONES CLARAS — fondo claro + texto oscuro legible.
   Redefine los tokens de color dentro de .section-light para
   que todo el texto contraste sobre fondo claro. Las tarjetas
   que siguen siendo oscuras a propósito (.bg-surface) vuelven
   a usar texto claro.
   ========================================================= */
.aixa-page .section-light {
    background-color: #f8fafc;
    --color-heading: #0f172a;
    --color-body: #334155;
    --color-muted: #64748b;
    --color-primary-light: #1d4ed8;
    color: var(--color-body);
}

/* Texto con degradado recortado (from-white ...): sobre fondo
   claro queda invisible. Se fuerza a un azul sólido. */
.aixa-page .section-light .bg-clip-text {
    color: #1d4ed8;
    -webkit-text-fill-color: #1d4ed8;
    background-image: none;
}

/* Glass, bordes y superficies translúcidas blancas -> versión
   oscura sutil para que se vean sobre fondo claro. */
.aixa-page .section-light .glass { background: rgba(15, 23, 42, 0.04); }
.aixa-page .section-light [class~="border-white/10"] { border-color: rgba(15, 23, 42, 0.12); }
.aixa-page .section-light [class~="bg-white/5"] { background-color: rgba(15, 23, 42, 0.04); }
.aixa-page .section-light [class~="bg-white/10"] { background-color: rgba(15, 23, 42, 0.06); }
.aixa-page .section-light [class~="hover:bg-white/10"]:hover { background-color: rgba(15, 23, 42, 0.07); }

/* Tarjetas oscuras dentro de una sección clara: mantienen su
   estilo original (texto claro, bordes y campos translúcidos). */
.aixa-page .section-light .bg-surface {
    --color-heading: #f8fafc;
    --color-body: #cbd5e1;
    --color-muted: #94a3b8;
    --color-primary-light: #60a5fa;
    color: var(--color-body);
    border-color: rgba(255, 255, 255, 0.1);
}
.aixa-page .section-light .bg-surface [class~="border-white/10"] { border-color: rgba(255, 255, 255, 0.1); }
.aixa-page .section-light .bg-surface [class~="bg-white/5"] { background-color: rgba(255, 255, 255, 0.05); }





/* Acordeón de preguntas */
.aixa-page .faq-answer {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.35s ease;
}

.aixa-page .faq-item.is-open .faq-answer {
    max-height: 260px;
    opacity: 1;
}

.aixa-page .faq-item.is-open {
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.08);
}

.aixa-page .faq-icon {
    transition: transform 0.3s ease;
}

.aixa-page .faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}

@media (max-width: 640px) {
    .aixa-page h1 { font-size: 2.25rem; }
    .aixa-page h2 { font-size: 1.875rem; }
}