/* =========================================================
   INTEGRACIONES — 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 {
    min-height: 100dvh;
    height: fit-content;
    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-surface { background-color: var(--color-surface); }
.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,
.aixa-page h3 { 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); }







/* Animaciones de entrada al hacer scroll */
.aixa-page .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.aixa-page .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.aixa-page .grid > .reveal:nth-child(1) { transition-delay: 0.05s; }
.aixa-page .grid > .reveal:nth-child(2) { transition-delay: 0.1s; }
.aixa-page .grid > .reveal:nth-child(3) { transition-delay: 0.15s; }
.aixa-page .grid > .reveal:nth-child(4) { transition-delay: 0.2s; }
.aixa-page .grid > .reveal:nth-child(5) { transition-delay: 0.25s; }
.aixa-page .grid > .reveal:nth-child(6) { transition-delay: 0.3s; }
.aixa-page .grid > .reveal:nth-child(7) { transition-delay: 0.35s; }
.aixa-page .grid > .reveal:nth-child(8) { transition-delay: 0.4s; }
.aixa-page .grid > .reveal:nth-child(9) { transition-delay: 0.45s; }

/* Diagrama de ecosistema del hero */
.aixa-page .int-line {
    stroke: rgba(96, 165, 250, 0.35);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 6;
    animation: int-flow 3s linear infinite;
}
@keyframes int-flow {
    to { stroke-dashoffset: -24; }
}
.aixa-page .int-node {
    animation: int-float 4s ease-in-out infinite;
}
.aixa-page .int-node:nth-child(odd) {
    animation-delay: 0.6s;
}
@keyframes int-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
}

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