/* =====================================
   PAGINAS INTERNAS INTELSYSNET
===================================== */

:root{

    --azul:#2563eb;
    --azul-hover:#1d4ed8;
    --texto:#0f172a;
    --gris:#64748b;
    --fondo:#ffffff;
    --seccion:#f8fafc;
    --borde:#e5e7eb;

}

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

.pagina-servicio{

    width:100%;
    background:#fff;
    color:var(--texto);

}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

section{

    padding:30px 0;

}

h1,
h2,
h3{

    margin:0;
    font-weight:700;

}

h2{

    text-align:center;
    margin-bottom:50px;
    font-size:2rem;

}

p{

    line-height:1.7;

}

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

.hero-servicio{

    background:#000;

    background-image:
    radial-gradient(
        circle at 80% 20%,
        rgba(37,99,235,.20),
        transparent 35%
    );

    padding:10px 0 10px;
}

.hero-contenido{

    width:90%;
    max-width:1300px;
    
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    align-items:center;
  }

.hero-etiqueta{

    color:#ffffff;

    font-size:.9rem;
    font-weight:700;

    letter-spacing:2px;

}

.hero-texto h1{

    font-size:2.35rem;
  color:#ffffff;
    line-height:1.15;

    margin-top:10px;

    margin-bottom:15px;

}

.hero-texto p{
    color:#d1d5db;
    font-size:1rem;
    line-height:1.6;
    margin-bottom:18px;
}

.hero-imagen img{
    width:90%;
    max-width:420px;
    display:block;
    margin-left:auto;

    border-radius:20px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);
}

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

.hero-botones{

    display:flex;
    gap:15px;

   margin-top:20px;

    flex-wrap:wrap;

}

.btn-principal{

    background:var(--azul);
    color:#fff;

    text-decoration:none;

    padding:14px 30px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-principal:hover{

    background:var(--azul-hover);

}

.btn-secundario{

    border:2px solid var(--azul);

    color:var(--azul);

    text-decoration:none;

    padding:14px 30px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-secundario:hover{

    background:var(--azul);
    color:#fff;

}

/* =====================================
   BOTON TICKET
===================================== */

.btn-ticket{

    display:inline-block;

    background:#ff7a00;

    color:#ffffff;

    text-decoration:none;

    padding:14px 30px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-ticket:hover{

    background:#e66a00;

    color:#ffffff;

}

/* =====================================
   SECCIONES CLARAS
===================================== */

.problemas,
.areas{

    background:var(--seccion);

}

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

.cards-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.card{

    background:#fff;

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

    border-radius:15px;

    padding:30px;

    text-align:center;

    font-weight:600;

    box-shadow:
    0 4px 12px rgba(0,0,0,.04);

}

/* =====================================
   PROCESO
===================================== */

.proceso-grid{

    display:grid;

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

    gap:20px;

}

.paso{

    text-align:center;

    font-weight:600;

}

.paso span{

    width:60px;
    height:60px;

    display:flex;

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

    margin:auto auto 15px;

    background:var(--azul);
    color:#fff;

    border-radius:50%;

    font-size:1.3rem;

}

/* =====================================
   CASOS DE EXITO
===================================== */

.casos{

    background:#fff;

}

.casos-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.caso{

    background:#fff;

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

    border-radius:15px;

    padding:30px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.05);

}

.caso h3{

    color:var(--azul);

    margin-bottom:15px;

}

.caso p{

    color:var(--gris);

}

/* =====================================
   CTA FINAL
===================================== */

.cta-final{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1e40af
    );

    color:#fff;

    text-align:center;

    padding:50px 0;

}

.cta-final h2{

    color:#fff;
    margin-bottom:20px;

}

.cta-final p{

    color:#e2e8f0;

    max-width:700px;
    margin:auto;

}

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

@media(max-width:992px){

    .hero-contenido{

        grid-template-columns:1fr;

    }

    .hero-texto{

        text-align:center;

    }

    .hero-texto p{

        margin:auto;

    }

    .hero-botones{

        justify-content:center;

    }

    .proceso-grid{

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

    }

}

@media(max-width:768px){

    section{

        padding:60px 0;

    }

    .hero-texto h1{

        font-size:2.3rem;

    }

    h2{

        font-size:1.8rem;

    }

  .proceso-grid{

    grid-template-columns:1fr;

}

}   /* ← ESTA LLAVE FALTABA */

/*==========================
CTA CONTACTO
==========================*/

.cta-contacto{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin-top:20px;

    flex-wrap:wrap;

}

.cta-contacto span{

    color:#e2e8f0;
    font-size:1rem;

}
.hero-infraestructura{
    min-height: 90vh;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url('../media/infraestructura/infraestructura.webp');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-infraestructura .hero-texto{
    max-width:700px;
}

.hero-infraestructura h1{
    color:#ffffff;
    font-size:clamp(2.5rem,5vw,4.5rem);
    font-weight:700;
    margin-bottom:20px;
}

.hero-infraestructura p{
    color:#ffffff;
    font-size:1.2rem;
    line-height:1.8;
    margin-bottom:30px;
}

.hero-infraestructura .btn-principal{
    background:#0d6efd;
    color:#fff;
}

.hero-infraestructura .btn-principal:hover{
    transform:translateY(-3px);
}

.hero-infraestructura .btn-secundario{
    background:transparent;
    color:#fff;
    border:2px solid #fff;
}

.hero-infraestructura .btn-secundario:hover{
    background:#fff;
    color:#000;
}

/*====================================================
    CASO DE ÉXITO
====================================================*/

.caso-estudio{

    background:#ffffff;

    padding:25px 0 70px;

}

.caso-titulo{

    text-align:center;

    max-width:900px;

    margin:0 auto 15px;

}

.caso-titulo span{
    display:inline-block;
    color:#2563eb;
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.caso-titulo h2{

    font-size:3rem;

    line-height:1.2;

    color:#0f172a;

    margin-bottom:18px;

}

.caso-titulo p{

    color:#64748b;

    font-size:1.15rem;

    line-height:1.9;

}



/*=========================
RETO / SOLUCIÓN
=========================*/

.caso-intro{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    margin-bottom:15px;

}

.caso-texto{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:40px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.caso-texto h3{

    color:#2563eb;

    margin-bottom:20px;

    font-size:1.6rem;

}

.caso-texto p{

    color:#475569;

    margin-bottom:20px;

}

.caso-texto ul{

    padding-left:18px;

}

.caso-texto li{

    margin-bottom:10px;

    color:#334155;

}



/*=========================
GALERÍA
=========================*/

.galeria-proyecto{

   margin:15px 0

}

.galeria-proyecto h3{

    text-align:center;

    margin-bottom:15px;

    font-size:2rem;

}

.galeria-grid{

    display:grid;

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

    gap:20px;

}

.galeria-grid img{

    width:100%;

    height:230px;

    object-fit:cover;

    border-radius:15px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

.galeria-grid img:hover{

    transform:translateY(-8px);

}



/*=========================
PLANO + FICHA
=========================*/

.caso-inferior{

    display:grid;

    grid-template-columns:1.3fr .9fr;

    gap:40px;

    margin-bottom:10px;

}

.plano{

    background:#0b1220;

    border-radius:20px;

    padding:35px;

}

.plano h3{

    color:#ffffff;

    margin-bottom:25px;

}

.plano img{

    width:100%;

    border-radius:12px;

}

.plano-texto{

    color:#cbd5e1;

    margin-top:20px;

}



.ficha-tecnica{

    background:#0b1220;

    color:#ffffff;

    border-radius:20px;

   padding:10px 35px 0px;

}

.ficha-tecnica h3{

    margin-bottom:25px;

    color:#ffffff;

}

.ficha-tecnica table{

    width:100%;

    border-collapse:collapse;

}

.ficha-tecnica td{

    padding:14px;

    border-bottom:1px solid rgba(255,255,255,.10);

    vertical-align:top;

}

.ficha-tecnica td:first-child{

    width:130px;

    color:#60a5fa;

    font-weight:700;

}



/*=========================
FRASE
=========================*/

.frase-final{

    background:#07101f;

    border-radius:20px;

    padding:30px;

    text-align:center;

}

.frase-final blockquote{

    color:#ffffff;

    font-size:2rem;

    font-weight:700;

    line-height:1.5;

    margin:0;

}


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

@media(max-width:900px){

    .caso-intro{

        grid-template-columns:1fr;

    }

    .caso-inferior{

        grid-template-columns:1fr;

    }

    .galeria-grid{

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

    }

}

@media(max-width:600px){

    .galeria-grid{

        grid-template-columns:1fr;

    }

    .caso-titulo h2{

        font-size:2.2rem;

    }

    .frase-final{

        padding:35px;

    }

    .frase-final blockquote{

        font-size:1.5rem;

    }

}

/*=========================================
ICONOS DESAFÍOS
=========================================*/

.problemas .card{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:35px 25px;

    background:#fcfdff;

    border:1px solid #dbe6f5;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.icono-desafio{

    width:72px;
    height:72px;

    object-fit:contain;

    margin-bottom:20px;

}

.problemas .card h3{

    margin:0;

    font-size:1.05rem;

    line-height:1.4;

    color:#0f172a;

    font-weight:700;

}


/*=========================================
LOGROS DEL PROYECTO
=========================================*/

.separador-logros{

    border:none;

    border-top:1px solid rgba(255,255,255,.12);

    margin:24px 0 16px;

}

.ficha-tecnica h4{

    color:#ffffff;

    font-size:1.35rem;

    margin-bottom:20px;

}

.logros-proyecto{

    list-style:none;

    margin:0;

    padding:0;

}

.logros-proyecto li{

    position:relative;

    padding:10px 0 10px 28px;

    color:#e2e8f0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.logros-proyecto li:last-child{

    border-bottom:none;

}

.logros-proyecto li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#2563eb;

    font-weight:bold;

    font-size:1.2rem;

}


/*=========================================
MODAL LABORATORIO
=========================================*/

.modal-lab{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:99999;

}

.modal-lab-box{

    background:#fff;

    border-radius:18px;

    max-width:420px;

    width:100%;

    padding:25px;

    text-align:center;

    position:relative;

    animation:modalLab .35s ease;

}

.modal-lab-box img{

    width:100%;

    border-radius:12px;

    margin-bottom:20px;

}

.modal-lab-box h2{

    margin-bottom:15px;

    color:#0F172A;

}

.modal-lab-box p{

    line-height:1.8;

    margin-bottom:25px;

    color:#475569;

}

.cerrar-lab{

    position:absolute;

    right:18px;

    top:12px;

    font-size:34px;

    cursor:pointer;

    color:#64748B;

}

@keyframes modalLab{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*=========================================
IMÁGENES DE AMENAZAS
=========================================*/

.caso-img{

    width:100%;

    border-radius:14px;

    margin-bottom:18px;

    display:block;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    transition:.30s;

}

.caso-img:hover{

    transform:scale(1.02);

}