:root{
    --primary:#322d9f;
    --primary-light:#4c46d6;
    --bg:#070710;
    --card:#111122;
    --border:#1c1c3a;
}

/* ================================
   RESET GENERAL
================================ */

html{
    background:#05050a;
    scroll-behavior:smooth;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:
        radial-gradient(
            circle at top,
            #0d0d25 0%,
            #070712 45%,
            #05050a 100%
        );
    color:#fff;
    min-height:100vh;
}


/* ================================
   HEADER
================================ */

.header{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px 0;
    background:linear-gradient(
        180deg,
        #0b0b20,
        transparent
    );
}

.logo img{
    height:95px;
    max-width:90%;
    object-fit:contain;
    filter:drop-shadow(
        0 0 10px rgba(50,45,159,0.6)
    );
}


/* ================================
   AGENDA / IFRAME
================================ */

.agenda-frame-wrapper{
    max-width:1100px;
    margin:20px auto;
    padding:0 20px;
}

.agenda-frame-wrapper iframe{
    display:block;
    width:100%;
    height:500px;
    border:none;
    border-radius:10px;
    overflow:hidden;
}


/* ================================
   TITULOS
================================ */

.section-title{
    text-align:center;
    margin:50px 0;
}

.section-title h2{
    font-size:32px;
    font-weight:600;
}

.section-title span{
    color:var(--primary-light);
}

.section-title .line{
    width:70px;
    height:3px;
    background:var(--primary);
    margin:12px auto;
    border-radius:10px;
    box-shadow:0 0 10px rgba(50,45,159,.45);
}


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

.fancy-title{
    font-size:34px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
    text-align:center;
}

.fancy-title b{
    color:#fff;
    background:linear-gradient(
        90deg,
        #322d9f,
        #4c46d6
    );
    padding:4px 10px;
    border-radius:6px;
    margin:0 5px;
    box-shadow:
        0 0 12px rgba(50,45,159,0.6);
}

.fancy-title em{
    font-style:normal;
    color:#aaa;
    font-size:14px;
    margin-left:6px;
}

h5.fancy-title{
    font-size:14px !important;
}


/* ================================
   WRAPPER
================================ */

.wrapper{
    max-width:1100px;
    margin:auto;
    padding:0 20px;
}


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

.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}


/* ================================
   CARDS
================================ */

.card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:
        linear-gradient(
            160deg,
            #060612,
            #0d0d22
        );

    border-radius:10px;
    border:1px solid #1a1a3a;

    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.card:hover{
    transform:translateY(-5px);

    border-color:#2d2a70;

    box-shadow:
        0 0 25px rgba(50,45,159,0.25);
}


/* ================================
   CARD CONTENT
================================ */

.card-content h3{
    text-align:center;
    font-size:18px;
    padding:12px;
    border-bottom:1px solid #1a1a3a;
}

.card img{
    width:100%;
    height:120px;
    object-fit:contain;
    padding:20px 10px;
    background:#05050f;
}

.card-content span{
    display:block;
    text-align:center;
    font-size:13px;
    padding:10px 15px;
    color:#aaa;
}


/* ================================
   BOTONES
================================ */

.btn{
    display:block;
    width:100%;
    text-align:center;

    padding:12px;

    border-radius:0;

    font-size:14px;
    font-weight:600;

    background:
        linear-gradient(
            135deg,
            #2a2a8a,
            #322d9f
        );

    color:#fff;
    text-decoration:none;

    transition:
        background .2s ease,
        box-shadow .2s ease;
}

.btn:hover{
    background:
        linear-gradient(
            135deg,
            #3535a5,
            #4c46d6
        );

    box-shadow:
        0 0 15px rgba(76,70,214,.35);
}


/* ================================
   ETIQUETA LIVE
================================ */

.live{
    position:absolute;
    top:8px;
    right:8px;

    font-size:10px;
    font-weight:600;

    padding:3px 7px;

    background:var(--primary);

    border-radius:6px;

    box-shadow:
        0 0 10px var(--primary);
}


/* ================================
   CONTENIDO INFORMATIVO
================================ */

.info-content{
    max-width:900px;
    margin:70px auto;
    padding:0 25px;

    text-align:center;

    color:#d8d8e5;

    line-height:1.8;
}


/* ================================
   TITULO PRINCIPAL INFO
================================ */

.info-content h1{
    font-size:32px;
    font-weight:600;

    color:#fff;

    margin-bottom:18px;

    text-transform:uppercase;
    letter-spacing:1px;
}

.info-content h1 span{
    color:var(--primary-light);

    text-shadow:
        0 0 15px rgba(76,70,214,.25);
}


/* ================================
   SUBTITULOS INFO
================================ */

.info-content h2{
    position:relative;

    font-size:24px;
    font-weight:600;

    color:#fff;

    margin:50px 0 20px;
}

.info-content h2::after{
    content:"";

    display:block;

    width:55px;
    height:3px;

    margin:10px auto 0;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-light)
        );

    border-radius:10px;

    box-shadow:
        0 0 10px rgba(76,70,214,.45);
}


/* ================================
   PARRAFOS INFO
================================ */

.info-content p{
    max-width:820px;

    margin:0 auto 18px;

    font-size:15px;

    color:#bdbdca;

    line-height:1.8;
}

.info-content strong{
    color:#fff;
    font-weight:600;
}


/* ================================
   CAJA DE INFORMACION
================================ */

.info-content .info-box{
    max-width:850px;

    margin:35px auto 0;

    padding:25px;

    background:
        linear-gradient(
            145deg,
            rgba(17,17,34,.88),
            rgba(7,7,16,.95)
        );

    border:1px solid var(--border);

    border-radius:10px;

    box-shadow:
        0 0 25px rgba(50,45,159,.08);

    text-align:center;
}

.info-content .info-box p{
    margin-bottom:18px;
}

.info-content .info-box p:last-child{
    margin-bottom:0;
}


/* ================================
   FOOTER
================================ */

.footer{
    background:transparent;

    border-top:none;

    box-shadow:none;

    color:#ffffff;

    padding:15px;

    font-size:15px;

    text-align:center;
}


/* ================================
   TABLET
================================ */

@media (max-width:1000px){

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

    .agenda-frame-wrapper{
        padding:0 18px;
    }

    .info-content{
        max-width:850px;
    }
}


/* ================================
   MOVIL
================================ */

@media (max-width:600px){

    .header{
        padding:22px 15px;
    }

    .logo img{
        height:70px;
    }

    .agenda-frame-wrapper{
        margin:15px auto;
        padding:0 12px;
    }

    .agenda-frame-wrapper iframe{
        height:450px;
        border-radius:8px;
    }

    .grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .wrapper{
        padding:0 14px;
    }

    .section-title{
        margin:40px 0;
    }

    .section-title h2{
        font-size:26px;
    }

    .fancy-title{
        font-size:25px;
        letter-spacing:1px;
    }

    .fancy-title em{
        display:block;
        margin:8px 0 0;
    }

    .info-content{
        margin:50px auto;
        padding:0 18px;
    }

    .info-content h1{
        font-size:24px;
        line-height:1.35;
        letter-spacing:.5px;
    }

    .info-content h2{
        font-size:20px;
        margin-top:38px;
    }

    .info-content p{
        font-size:14px;
        line-height:1.75;
    }

    .info-content .info-box{
        padding:20px 16px;
        margin-top:28px;
    }

    .footer{
        padding:15px 10px;
        font-size:13px;
    }
}


/* ================================
   PANTALLAS MUY PEQUEÑAS
================================ */

@media (max-width:380px){

    .logo img{
        height:60px;
    }

    .section-title h2{
        font-size:23px;
    }

    .fancy-title{
        font-size:21px;
    }

    .info-content h1{
        font-size:21px;
    }

    .info-content h2{
        font-size:19px;
    }

    .info-content{
        padding:0 14px;
    }
}