@font-face {

    font-family: "Rama Slab E W01 Regular";

    src: url("https://db.onlinewebfonts.com/t/a02f81a6858ecf1428a867f738a04d2f.eot");

    src: url("https://db.onlinewebfonts.com/t/a02f81a6858ecf1428a867f738a04d2f.eot?#iefix") format("embedded-opentype"),

        url("https://db.onlinewebfonts.com/t/a02f81a6858ecf1428a867f738a04d2f.woff2") format("woff2"),

        url("https://db.onlinewebfonts.com/t/a02f81a6858ecf1428a867f738a04d2f.woff") format("woff"),

        url("https://db.onlinewebfonts.com/t/a02f81a6858ecf1428a867f738a04d2f.ttf") format("truetype"),

        url("https://db.onlinewebfonts.com/t/a02f81a6858ecf1428a867f738a04d2f.svg#Rama Slab E W01 Regular") format("svg");

}



body {

    font-family: "Rama Slab E W01 Regular", serif;

}



p {

    font-size: clamp(1.5rem, 1vw, 1.2rem);

    line-height: 1.3rem;

    margin: 0;

    margin-bottom: 0px;

    letter-spacing: 2.7px;

    padding: 0 2.6rem;

    margin-bottom: 2rem;

}



footer p {

    letter-spacing: inherit;

    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

}



#msform .action-button {

    background-color: #1e2c2f !important;

    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

}



.title_r1 {

    color: #FFF;

    font-size: clamp(3.6rem, 9vw, 5rem);

    line-height: 0.9;

    margin: 0 auto;

    font-weight: 900;



}



.title_r2 {

    color: transparent;

    font-size: clamp(4.5rem, 12vw, 6rem);

    line-height: 0.9;

    margin: 0 auto;

    -webkit-text-stroke: 0.3rem #FFF;

}



.title_r3 {

    color: #FFF;

    font-size: clamp(1.2rem, 3.6vw, 2.9rem);

    line-height: 3rem;

    margin: 0 auto;

    letter-spacing: 0.3rem;

    font-weight: 400;

    padding: 1.3rem 0;

}



.title_head {

    color: white;

    padding: 1rem 0;

    text-align: center;

    font-size: 1rem;

    line-height: 1.6rem;

}



/* Contenedor que ocupa el alto completo de la ventana */

.full-height {

    height: calc(100vh - 52.8px);

}



/* Panel negro superpuesto en el lado izquierdo */

.black-overlay {

    background-color: #000;

    color: #fff;

    padding: 20px;

}



/* Estilo para el ícono (cuadrado con triángulo) */

.square_youtube {

    background-color: #c4302b;

    width: 110px;

    height: 80px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    position: absolute;

    top: 50%;

    right: 0;

    transform: translate(50%, -50%);

}



.triangle_youtube {

    width: 0;

    height: 0;

    border-left: 40px solid #fff;

    border-top: 25px solid transparent;

    border-bottom: 25px solid transparent;

}



#modal_form {

    max-width: 450px;

}



#modal_form .title_r1 {

    font-size: 2rem;

    color: #000;

}



#modal_form .title_r2 {

    font-size: 2rem;

    color: black;



    -webkit-text-stroke: #000;

}



.object-position-end {

    object-position: right;

}



.object-position-start {

    object-position: left;

}



#msform>#paso_1_fieldset .fs-title {

    font-size: 22px !important;

    text-align: center;

    font-weight: 600;

    margin-bottom: 20px;

    color: #1a2527 !important;

}



@media (max-width: 960px) {

    .position-absolute {

        position: relative !important;

    }



    .full-height {

        height: auto;

    }



    .shadow {

        box-shadow: none !important;

    }



    .bg-image {

        background-position: -570px;

    }



    #modal_form .square_youtube {

        position: inherit;

        transform: none;

    }



    .title_r2 {

        color: transparent;

        font-size: clamp(4.5rem, 12vw, 6rem);

        line-height: 0.9;

        margin: 0 auto;

        -webkit-text-stroke: 0.1rem #FFF;

    }

}

/* ========================================
   CYBER BANNER 2025 - REUTILIZABLE
   ======================================== */

/* Desktop Styles */
.cyber-banner-2025 {
    background: linear-gradient(135deg, #080E1D 0%, #6E00A2 100%);
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 20px;
    position: relative;
}

.cyber-banner-2025::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(251, 95, 70, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(110, 0, 162, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.cyber-banner-2025__container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.cyber-banner-2025__seal {
    width: 120px;
    height: auto;
}

.cyber-banner-2025__logo {
    width: 500px;
    height: auto;
}

/* Mobile Styles */
@media only screen and (max-width: 640px) {
    .cyber-banner-2025 {
        padding: 20px 15px;
    }

    .cyber-banner-2025__container {
        padding: 0 20px;
    }

    .cyber-banner-2025__seal {
        width: 80px;
    }

    .cyber-banner-2025__logo {
        width: 200px;
    }
}

/* ========================================
   FIN MEDIA QUERIES
   ======================================== */