/* ============================================================
   AI SECURITY ACADEMY — Landing
   Contenedores específicos de la landing /ai-security.
   Reutiliza variables y clases base de public.css (--color-*,
   .container, .btn, .section-title, .diff-card, .plan-card...).
   Solo se añade aquí lo que el contenido de la Academy exige.
   ============================================================ */

/* ---------- HERO (cinta Attack · Audit · Detect · Defend AI) ---------- */
.ais-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 3.5rem 0 4rem;
    background:
        radial-gradient(ellipse at 50% 0%, var(--color-accent-glow), transparent 60%),
        var(--color-bg);
}
.ais-hero-badge {
    display: inline-block;
    padding: .4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 1.25rem;
}
.ais-hero h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}
.ais-hero h1 .ais-hero-ai { color: var(--color-accent); }
.ais-hero .ais-hero-sub {
    color: var(--color-text-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 620px;
    margin: 0 auto 2rem;
}
/* Cinta de capacidades Attack / Audit / Detect / Defend AI */
.ais-hero-ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 2.25rem;
}
.ais-ribbon-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-heading);
    font-weight: 600;
    font-size: .9rem;
}
.ais-ribbon-item svg { color: var(--color-accent); flex-shrink: 0; }

/* ---------- TARJETA GENÉRICA DE LA ACADEMY ---------- */
.ais-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ais-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card);
}
.ais-icon {
    color: var(--color-accent);
    margin-bottom: 1rem;
    display: inline-flex;
}
.ais-card h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.ais-card p { color: var(--color-text-muted); font-size: .9375rem; line-height: 1.65; }

/* ---------- LISTA "QUÉ APRENDERÁN" ---------- */
.ais-learn-list {
    display: grid;
    gap: .875rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}
.ais-learn-item {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    transition: border-color var(--transition);
}
.ais-learn-item:hover { border-color: var(--color-accent); }
.ais-learn-check {
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: .15rem;
}
.ais-learn-item span { color: var(--color-text); font-size: .95rem; }

/* ---------- SUPERFICIE DE ATAQUE (decoración sutil) ---------- */
.ais-attack {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    background: var(--color-bg-alt);
}
/* Glow radial muy suave en la parte superior */
.ais-attack::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, var(--color-accent-glow), transparent 60%);
    pointer-events: none;
}
/* Patrón de puntos tipo red (conexiones de la superficie de ataque) */
.ais-attack::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(56, 189, 248, .3) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
    pointer-events: none;
}
/* Contenido por encima de la decoración */
.ais-attack .container {
    position: relative;
    z-index: 1;
}
.ais-attack-diagram {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
/* Nodo central: el sistema (Usuario → LLM → RAG/Tools/APIs) */
.ais-attack-core {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
}
.ais-attack-core .ais-core-label {
    color: var(--color-text-muted);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.ais-attack-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
}
.ais-flow-node {
    padding: .6rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-heading);
    font-weight: 600;
    font-size: .875rem;
}
.ais-flow-arrow { color: var(--color-accent); font-weight: 800; }
/* Amenazas alrededor */
.ais-threats {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.ais-threat {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}
.ais-threat.ais-threat--danger { border-left-color: #f87171; }
.ais-threat.ais-threat--danger svg { color: #f87171; }
.ais-threat svg { color: var(--color-accent); flex-shrink: 0; margin-top: .1rem; }
.ais-threat h4 { color: var(--color-heading); font-size: .95rem; margin-bottom: .15rem; }
.ais-threat p { color: var(--color-text-muted); font-size: .875rem; }

/* ---------- CÓMO ENSEÑAMOS (pasos numerados + terminal) ---------- */
.ais-method { padding: 5rem 0; }
.ais-steps {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
.ais-step {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
}
.ais-step-num {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: .75rem;
}
.ais-step h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.ais-step p { color: var(--color-text-muted); font-size: .9375rem; line-height: 1.65; }

/* ---------- RECORRIDO POR NIVELES ---------- */
.ais-levels { padding: 5rem 0; background: var(--color-bg-alt); }
.ais-levels-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
}
.ais-level {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    transition: border-color var(--transition), transform var(--transition);
}
.ais-level:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}
.ais-level .ais-level-num {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: .5rem;
}
.ais-level h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.ais-level p { color: var(--color-text-muted); font-size: .9375rem; line-height: 1.65; margin-bottom: 1rem; }
.ais-level .ais-level-foot { margin-top: auto; }
/* CTA bajo el recorrido de niveles (empezar gratis / apuntarse a la academia) */
.ais-levels-cta {
    margin-top: 3rem;
    text-align: center;
}
.ais-levels-cta p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    max-width: 520px;
    margin: 0 auto 1.5rem;
}
/* Botón verde neón: 'Empezar gratis por el Nivel 1' */
.btn-neon-green {
    color: #052e14;
    background: linear-gradient(135deg, #39ff88, #22cc66);
    border-color: #39ff88;
    box-shadow: 0 0 18px rgba(57, 255, 136, .35), inset 0 0 0 1px rgba(255, 255, 255, .25);
    text-shadow: 0 1px 2px rgba(255, 255, 255, .3);
}
.btn-neon-green:hover {
    background: linear-gradient(135deg, #4dff9b, #2ce06f);
    border-color: #4dff9b;
    color: #052e14;
    box-shadow: 0 0 26px rgba(57, 255, 136, .55), inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.ais-level .ais-level-foot .btn { display: inline-flex; }
/* Badge GRATIS del nivel 1 */
.ais-level-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ais-level-badge.ais-badge-free {
    background: rgba(34, 197, 94, .15);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, .4);
}
.ais-level-badge.ais-badge-soon {
    background: var(--color-accent-glow);
    color: var(--color-accent);
    border: 1px solid rgba(56, 189, 248, .4);
}

/* ---------- COMUNIDAD (DISCORD) ---------- */
.ais-community { padding: 5rem 0; }
.ais-community-box {
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
}
.ais-discord-logo {
    display: inline-block;
    width: 72px;
    height: 72px;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 0 rgba(88, 101, 242, 0);
    animation: ais-discord-pulse 4.5s ease-in-out infinite;
}
/* Resplandor de energía muy sutil (sin disco de fondo) */
@keyframes ais-discord-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(88, 101, 242, .35)); }
    50%      { filter: drop-shadow(0 0 14px rgba(88, 101, 242, .55)); }
}
@media (prefers-reduced-motion: reduce) {
    .ais-discord-logo { animation: none; }
}
.ais-community-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .75rem; }
.ais-community-box > p {
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto 2.5rem;
}
.ais-community-feats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin-bottom: 2.5rem;
    text-align: left;
}
.ais-community-feats .ais-card { text-align: left; }

/* ---------- GRID CENTRADO (secciones con 3 o 6 tarjetas) ----------
   Evita el hueco que deja diff-grid (4 columnas) cuando la sección
   no tiene 4 tarjetas: 3 y 6 tarjetas se centran en filas completas. */
.ais-grid-3 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: stretch;
}

/* ---------- PARA QUIÉN ---------- */
.ais-audience { padding: 5rem 0; background: var(--color-bg-alt); }

/* ---------- PROYECCIÓN / TCASP ---------- */
.ais-projection { padding: 5rem 0; }
.ais-projection-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

/* ============================================================
   ACABADO VISUAL (gracia tipo PDF): títulos degradados,
   iconos circulares neón y escalera del recorrido.
   ============================================================ */

/* Título con la palabra clave en degradado cyan + glow */
.section-title .ais-grad {
    background: linear-gradient(120deg, #38bdf8, #22d3ee 45%, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(56, 189, 248, .45));
}

/* ---------- QUÉ APRENDERÁN (iconos circulares neón, 2 columnas) ---------- */
.ais-learn-list {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: 1fr;
}
.ais-learn-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition), transform var(--transition);
}
.ais-learn-item:hover {
    border-color: var(--color-accent);
    transform: translateX(4px);
}
.ais-learn-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--color-accent);
    background: radial-gradient(circle, rgba(56, 189, 248, .16), transparent 70%);
    border: 1px solid rgba(56, 189, 248, .4);
    box-shadow: 0 0 14px rgba(56, 189, 248, .35), inset 0 0 8px rgba(56, 189, 248, .2);
}
/* Paleta discreta: colores que contrastan con el fondo oscuro sin saturar.
   Se rota por posición (1..4) en los 10 items. */
.ais-learn-item:nth-child(4n+1) .ais-learn-icon { --ic: 56, 189, 248; }  /* cyan */
.ais-learn-item:nth-child(4n+2) .ais-learn-icon { --ic: 167, 139, 250; } /* violeta */
.ais-learn-item:nth-child(4n+3) .ais-learn-icon { --ic: 244, 114, 182; } /* rosa */
.ais-learn-item:nth-child(4n+0) .ais-learn-icon { --ic: 45, 212, 191; }  /* teal */
.ais-learn-item .ais-learn-icon {
    color: rgb(var(--ic));
    background: radial-gradient(circle, rgba(var(--ic), .16), transparent 70%);
    border-color: rgba(var(--ic), .4);
    box-shadow: 0 0 14px rgba(var(--ic), .35), inset 0 0 8px rgba(var(--ic), .2);
}
.ais-learn-item span.ais-learn-text { color: var(--color-text); font-size: .95rem; line-height: 1.4; }

/* ---------- RECORRIDO PROGRESIVO (escalera ascendente) ---------- */
.ais-staircase {
    position: relative;
    margin-top: 3rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
/* Línea que une los círculos de los 4 hitos (desktop) */
.ais-staircase::before {
    content: "";
    display: none;
    position: absolute;
    top: 68px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,.45) 10%, rgba(56,189,248,.7) 50%, rgba(56,189,248,.45) 90%, transparent);
    box-shadow: 0 0 12px rgba(56,189,248,.45);
}
.ais-stair {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.25rem 1.5rem;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ais-stair:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}
/* Número grande (01-04) en la esquina superior, como el PDF */
.ais-stair-big {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
    opacity: .22;
    letter-spacing: -.02em;
}
.ais-stair-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 1.25rem;
    color: var(--color-accent);
    background: radial-gradient(circle, rgba(56,189,248,.2), transparent 70%);
    border: 1px solid rgba(56,189,248,.5);
    box-shadow: 0 0 18px rgba(56,189,248,.4), inset 0 0 10px rgba(56,189,248,.25);
}
.ais-stair-num {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: .4rem;
}
.ais-stair h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.ais-stair p { color: var(--color-text-muted); font-size: .9375rem; line-height: 1.6; }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px) {
    .ais-learn-list { grid-template-columns: repeat(2, 1fr); }
    .ais-threats { grid-template-columns: repeat(2, 1fr); }
    .ais-steps { grid-template-columns: repeat(2, 1fr); }
    .ais-levels-grid { grid-template-columns: repeat(2, 1fr); }
    .ais-community-feats { grid-template-columns: repeat(3, 1fr); }
    .ais-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ais-attack-diagram { grid-template-columns: 1.1fr 1fr; align-items: center; }
    .ais-steps { grid-template-columns: repeat(4, 1fr); }
    .ais-levels-grid { grid-template-columns: repeat(4, 1fr); }
    .ais-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .ais-staircase { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .ais-staircase::before { display: block; }
}