/* =========================
   INDEXES SECTION
========================= */

.indexes-section{

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:flex-start;

    padding:90px 8% 100px 8%;

    text-align:center;

}


/* =========================
   TITULO
========================= */

.indexes-title{

    font-family:'Orbitron',sans-serif;

    font-size: clamp(38px, 5vw, 64px);

    margin-bottom:30px;

    letter-spacing:2px;

    text-align:center;

    background:linear-gradient(90deg,#00eaff,#7b2bff);

    -webkit-background-clip:text;

    color:transparent;

    text-shadow:
        0 0 12px rgba(0,234,255,.4),
        0 0 25px rgba(123,43,255,.4);

}

.indexes-title::after{

    content:"";

    display:block;

    margin:20px auto 0;

    width:680px;
    height:3px;

    border-radius:3px;

    background:linear-gradient(90deg,#00eaff,#7b2bff);

    box-shadow:
        0 0 10px #00eaff,
        0 0 25px #7b2bff;

    animation:indexLine 3s ease-in-out infinite;

}


/* =========================
   INTRO
========================= */

.indexes-intro{

    text-align:center;

    font-size:18px;

    color:rgba(255,255,255,.65);

    max-width:1000px;

    margin:0 auto 40px;

    line-height:1.8;

}


/* =========================
   GRID PRINCIPAL
========================= */

.indexes-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

    max-width:1100px;

    width:100%;

    margin:0 auto;

}


/* =========================
   TARJETAS — estilo terminal
========================= */

.index-card{

    background: #05050f;

    border: 1px solid rgba(0, 234, 255, 0.4);

    border-radius: 14px;

    overflow: hidden;

    text-align: left;

    animation: indexGlow 4s ease-in-out infinite;

    transition: transform .35s ease, box-shadow .35s ease;

}


.index-card:hover{

    transform: translateY(-6px) scale(1.02);

}


/* =========================
   CABECERA TIPO CHROME
========================= */

.index-card h3{

    font-family: 'Orbitron', sans-serif;

    font-size: 13px;

    color: #00eaff;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin: 0;

    padding: 13px 20px;

    background: #0d0d20;

    border-bottom: 1px solid rgba(0, 234, 255, 0.2);

    display: flex;

    align-items: center;

    gap: 10px;

}

/* Tres puntitos antes del título */
.index-card h3::before{

    content: "● ● ●";

    font-size: 8px;

    letter-spacing: 3px;

    color: rgba(255,255,255,.25);

    flex-shrink: 0;

}


/* =========================
   CÓDIGO SQL
========================= */

.index-card pre{

    font-family: 'JetBrains Mono', 'Courier New', monospace;

    font-size: 13.5px;

    color: #00ff88;

    white-space: pre-wrap;

    line-height: 1.7;

    margin: 0;

    padding: 20px 22px 16px;

    background: transparent;

    text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);

}


/* =========================
   DESCRIPCIÓN
========================= */

.index-card .index-reason{

    margin: 0 22px 20px;

    font-size: 13px;

    color: rgba(160, 185, 230, 0.7);

    font-style: italic;

    border-left: 3px solid rgba(0, 234, 255, 0.45);

    padding-left: 12px;

    line-height: 1.6;

}


/* =========================
   NOTA
========================= */

.index-note{

    text-align:center;

    margin:48px auto 0;

    font-size:15px;

    max-width:700px;

    color: rgba(200, 220, 255, 0.85);

    background: rgba(0, 234, 255, 0.06);

    border: 1px solid rgba(0, 234, 255, 0.25);

    border-radius: 12px;

    padding: 14px 28px;

    line-height: 1.6;

}


/* =========================
   ANIMACIONES
========================= */

@keyframes indexLine{

    0%{
        transform:scaleX(.7);
        opacity:.7;
    }

    50%{
        transform:scaleX(1);
        opacity:1;
    }

    100%{
        transform:scaleX(.7);
        opacity:.7;
    }

}

@keyframes indexGlow{

    0%{

        box-shadow:
        0 0 15px rgba(0,234,255,.25),
        0 0 30px rgba(123,43,255,.2);

    }

    50%{

        box-shadow:
        0 0 35px rgba(0,234,255,.55),
        0 0 70px rgba(123,43,255,.45);

    }

    100%{

        box-shadow:
        0 0 15px rgba(0,234,255,.25),
        0 0 30px rgba(123,43,255,.2);

    }

}