/* ==========================================================
   INTELSYSNET GLOBAL SUPPORT
   LABORATORIO DE CIBERSEGURIDAD   aqui esta abajo para ajustar la ventana
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --cyber-blue:#1F6BFF;
    --cyber-dark:#07101F;
    --cyber-text:#16223B;
    --cyber-border:#E6ECF5;
    --cyber-bg:#F8FAFD;

}


/* ==========================================================
   BASE
========================================================== */

.cyber-page{

    width:100%;
    background:#050B16;
    overflow:hidden;

}
/* ==========================================================
   HERO
========================================================== */

.cyber-hero{

    width:100%;

    min-height:260px;

    background-image:url('/intelsysnet.com/assets/ciberseguridad/hero/hero-bg.webp');

    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;

    display:flex;

    align-items:center;

}

/* ========================= */

.cyber-hero-content{

    width:min(1700px,96%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:25px;

}

/* ========================= */

.cyber-hero-left{

    max-width:360px;

    margin-left:35px;

    transform:translateY(18px);

}

/* ========================= */

.cyber-hero-left h1{

   font-size:2.1rem;

    line-height:1.05;

    color:#111827;

    font-weight:800;

    margin-bottom:28px;

}

/* ========================= */

.cyber-hero-left span{

    color:var(--cyber-blue);

}

/* ========================= */

.cyber-hero-left p{

    color:#2e3b4e;

    line-height: 1.7;

     font-size: .95rem;

    margin-bottom:35px;

}

/* ========================= */

.cyber-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

     padding: 14px 26px;

    background:#1F6BFF;

    color:#fff;

    text-decoration:none;

    border-radius: 10px;;

     font-size: .95rem;

    transition:.30s;

    box-shadow:

    0 10px 30px rgba(31,107,255,.25);

}

/* ========================= */

.cyber-btn-primary:hover{

    transform:translateY(-3px);

    background:#0F5AE9;

}

/* ========================= */

.cyber-hero-right{

    max-width:390px;

    justify-self:end;

    margin-right:35px;

    transform:translateY(18px);

}

/* ========================= */

.cyber-hero-right h2{

    color:#fff;

    font-size:2rem;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    text-transform:uppercase;

}

/* ========================= */

.cyber-hero-right p{

    color:#d3d8e4;

    line-height:1.8;

    font-size:1.05rem;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

.cyber-hero{

     min-height:260px;

    padding:18px 0;

}

.cyber-hero-content{

    grid-template-columns:1fr;

    gap:70px;

}

.cyber-hero-right{

    justify-self:start;

}

}

/* ========================= */

@media(max-width:768px){

.cyber-hero{

    background-position:center;

}

.cyber-hero-left h1{

    font-size:2.5rem;

}

.cyber-hero-right h2{

    font-size:2.3rem;

}

}

/* ========================= */

@media(max-width:520px){

.cyber-hero{

    padding:70px 0;

}

.cyber-hero-left h1{

    font-size:2rem;

}

.cyber-hero-right h2{

    font-size:1.9rem;

}

.cyber-btn-primary{

    width:100%;

}
body{
    background:black!important;
    
}
}
/*==================================================
HEADER CENTRO PREVENCIÓN
==================================================*/

.cpd-header{

    max-width:900px;

    margin:0 auto 40px;

    text-align:center;

    padding-top:45px;

}

.cpd-etiqueta{

    display:inline-block;

    padding:8px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(12px);

    color:#2563eb;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.cpd-header h1{

    margin:22px 0 18px;

    font-size:4rem;

    font-weight:800;

    color:#0F172A;

    line-height:1.05;

}

.cpd-header p{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

    color:#475569;

}

/*==================================================
CENTRO DE PREVENCIÓN DIGITAL
FASE 1
==================================================*/

.cpd-app{

    width:100%;

     background:#050B16;

    overflow:hidden;

}

/*----------------------------------*/

.cpd-stage{

    position:relative;

    width:100%;

    max-width:1700px;

    margin:0 auto;

}

/*----------------------------------*/

.cpd-background{

    width:100%;

    display:block;

    user-select:none;

    pointer-events:none;

}
/*==================================================
FASE 2
PANTALLA DEL MONITOR   aqui esta abajo para ajustar la ventana
==================================================*/

.cpd-screen{

    position:absolute;

    left:13.65%;

    top:26.2%;        

    width:52.35%;

     height:39.3%;   /* antes 31.3% */

    overflow:hidden;

    border-radius:8px;

    background:transparent;

}

/*----------------------------------*/

#cpd-contenido{

    width:100%;

    height:100%;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    padding:6px;

    box-sizing:border-box;

    background:transparent;

}
/*==================================================
CENTRO DE ESCENARIOS
==================================================*/

.cpd-menu{

    position:absolute;
    top:8.9%;
    right:2.3%;

    width:24.5%;
    height:49%;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    z-index:20;

}

/*----------------------------------*/

.cpd-item{

    position:relative;

    width:100%;
    height:52px;

    background:transparent;
    border:none;

    cursor:pointer;
    outline:none;

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

    font-size:15px;
    font-weight:600;
    color:#16325c;

    transition:.30s;

}

/*----------------------------------*/

.cpd-item:hover{

    transform:translateX(8px);

}

/*----------------------------------*/
/* POSICIÓN INDIVIDUAL DE CADA TEXTO */
/*----------------------------------*/

.correo{

    padding-left:82px;
    padding-top:18px;

}

.whatsapp{

    padding-left:81px;
    padding-top:70px;

}

.banco{

    padding-left:82px;
    padding-top:90px;

}

.factura{

    padding-left:81px;
    padding-top:95px;

}

.usb{

    padding-left:82px;
    padding-top:100px;

}

.paqueteria{

    padding-left:81px;
    padding-top:85px;

}

.wifi{

    padding-left:82px;
    padding-top:90px;

}

/*----------------------------------*/

html,
body{

    background:#050B16 !important;

}