/* ===========================
   ZENTIX — DESIGN TOKENS
   Variables globales de color, glow, radios y transiciones.
   Toda nueva regla del sitio debe consumir estas variables
   en lugar de valores fijos, para mantener consistencia.
=========================== */
:root{
    /* Fondos */
    --bg-primary:#050816;
    --bg-secondary:#081325;
    --bg-navbar:#1d2333;

    /* Superficies (tarjetas, paneles, inputs) */
    --surface-1:#0c1326;
    --surface-2:#111b33;
    --surface-3:#151f38;
    --surface-4:#182342;

    /* Acentos */
    --accent-primary:#1976ff;
    --accent-secondary:#2da9ff;
    --accent-tertiary:#45b3ff;

    /* Texto */
    --text-primary:#ffffff;
    --text-muted:#9db0d4;

    /* Bordes */
    --border-subtle:rgba(255,255,255,.08);
    --border-accent:rgba(45,169,255,.18);

    /* Glow / sombras */
    --glow-primary:rgba(0,140,255,.18);
    --glow-soft:rgba(0,140,255,.12);

    /* Radios */
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;

    /* Transiciones */
    --transition-fast:.3s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    background:var(--bg-primary);
}

body{
    background:var(--bg-primary);
    color:var(--text-primary);
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;
    overflow-x:hidden;
}

/* ===========================
   BADGE / TAG reutilizable
   (usado en hero y encabezados de sección)
=========================== */
.tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#10244d;
    color:var(--accent-tertiary);
    font-size:14px;
    margin-bottom:25px;
}

/* ===========================
   Encabezados de sección
=========================== */
.section{
    padding:110px 0;
    position:relative;
    overflow:hidden;
}

/* Alternancia sutil de tono + brillos de fondo, para que las secciones
   no se vean como un bloque negro plano (mismo lenguaje visual del hero). */
#beneficios, #testimonios{
    background:var(--bg-primary);
}

#cursos, #faq{
    background:var(--bg-secondary);
}

.section::before{
    content:"";
    position:absolute;
    width:750px;
    height:750px;
    border-radius:50%;
    filter:blur(110px);
    z-index:0;
    pointer-events:none;
}

#beneficios::before{
    top:-280px;
    left:50%;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(0,140,255,.14), transparent 70%);
}

#cursos::before{
    top:-200px;
    right:-250px;
    background:radial-gradient(circle, rgba(45,169,255,.14), transparent 70%);
}

#testimonios::before{
    bottom:-300px;
    left:-200px;
    background:radial-gradient(circle, rgba(0,140,255,.12), transparent 70%);
}

#faq::before{
    top:-250px;
    left:50%;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(45,169,255,.12), transparent 70%);
}

.section-header{
    max-width:700px;
    margin:0 auto 60px;
    text-align:center;
}

.section-header h2{
    font-size:clamp(1.625rem, 1.043rem + 2.483vw, 2.75rem);
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:18px;
}

.section-header h2 span{
    color:var(--accent-secondary);
}

.section-header p{
    color:var(--text-muted);
    font-size:clamp(.9375rem, .804rem + .571vw, 1.125rem);
    line-height:1.7;
}

.section-container{
    width:90%;
    max-width:1300px;
    margin:0 auto;
    position:relative;
    z-index:2;
}

/* ===========================
   Scroll reveal (animations.js)
=========================== */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .7s ease, transform .7s ease;
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* Stagger simple para grids de tarjetas (beneficios / cursos) */
.benefits-grid .reveal:nth-child(2){ transition-delay:.1s; }
.benefits-grid .reveal:nth-child(3){ transition-delay:.2s; }
.benefits-grid .reveal:nth-child(4){ transition-delay:.3s; }

.courses-grid .reveal:nth-child(2){ transition-delay:.1s; }
.courses-grid .reveal:nth-child(3){ transition-delay:.2s; }
.courses-grid .reveal:nth-child(4){ transition-delay:.3s; }
.courses-grid .reveal:nth-child(5){ transition-delay:.4s; }
.courses-grid .reveal:nth-child(6){ transition-delay:.5s; }