/*==========================================================
        ESTILOS BASE ITEMCOL S.A.S.
        Este archivo contiene únicamente estilos globales.
        Los estilos de cada sección viven en su CSS correspondiente.
==========================================================*/

body{
    background:var(--fondo);
    color:var(--blanco);
    overflow-x: hidden;
    position: relative;
}

body::before{
   
    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(47,69,155,.08),
    transparent 40%),

    radial-gradient(circle at bottom left,
    rgba(244,190,34,.10),
    transparent 35%),

    linear-gradient(
    180deg,
    #ffffff,
    #f7f9fc,
    #eef3f8);

    z-index:-3;

}

body::after{
  
    content: "";
    position: fixed;
    inset: 0;

      background-image:

    linear-gradient(
    rgba(255,255,255,.025) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.025) 1px,
    transparent 1px);

    background-size:55px 55px;

    opacity:.15;

    z-index:-2;
}


::-webkit-scrollbar{
    width: 12px;
}

::-webkit-scrollbar-track{
    background: #0e1116;
}

::-webkit-scrollbar-thumb{

    background: #173E83;
}

::-webkit-scrollbar-thumb:hover{
    background: #2E6BDA;
}

::selection{
    background: #173E83;
    color: white;
}

.container{
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.titulo{
    text-align: center;
    margin-bottom: 70px;
}

.titulo span{
    color:var(--amarillo);
    letter-spacing: 4px;
    font-weight: 600;
    font-size: .9rem;
}


.titulo h2{
    font-size: 3rem;
    margin-top: 10px;
    margin-bottom: 20px;
    color:var(--titulo);
}

.titulo p{
    color:var(--texto);
    width: 700px;
    max-width: 95%;
    margin: auto;
    line-height: 1.8;
    text-align: justify;
}


.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border-radius:50px;

    background:var(--amarillo);

    color:var(--azul);

    text-decoration:none;

    font-weight:700;

    transition:.4s;

    position:relative;

    overflow:hidden;
}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    rgba(244, 87, 3, 0.71);

    transform:skewX(-30deg);

    transition:.7s;

}

.btn-primary:hover::before{

    left:150%;

}
.btn-secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border: 2px solid var(--naranja);
    border-radius: 50px;
    color:var(--naranja);
    transition: .4s;
}

.btn-secondary:hover{
    background:var(--naranja);
    color:white;
}

.card{
    background:rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    transition: .45s;
}

.card:hover{
    transform: translateY(-10px);
    box-shadow: 
     0 20px 50px rgba(0,0,0,.4);
}


.glass{
    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

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

.shadow{
    box-shadow: 
    0 20px 40px rgba(0,0,0,.35);
}

img{
    border-radius: 15px;
    transition: .6s;
}

img:hover{
    transform: scale(1.03);
}

.glow{

    position:relative;

    overflow:hidden;

}

.glow::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.25),

    transparent);

    transform:skewX(-25deg);

    transition:.8s;

}

.glow:hover::before{

    left:180%;

}

/*===============================
      CELULARES
===============================*/

@media (max-width:576px){

}


/*========================================
          NUESTROS CLIENTES
========================================*/

.clientes{

    position:relative;

    padding:110px 8%;

    background:#ffffff;

    overflow:hidden;

}


/*========================================
          DECORACIÓN
========================================*/

.clientes::before{

    content:"07";

    position:absolute;

    left:5%;

    top:20px;

    font-size:260px;

    font-weight:900;

    color:rgba(47,69,155,.05);

    line-height:1;

    pointer-events:none;

}


/*========================================
          CONTENEDOR
========================================*/

.clientes-contenedor{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:25px;

    max-width:1100px;

    margin:50px auto 0;

}


/*========================================
          TARJETA
========================================*/

.cliente{

    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    background:#ffffff;

    border:1px solid rgba(47,69,155,.10);

    border-radius:18px;

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

    transition:.4s ease;

}


/*========================================
          LOGO
========================================*/

.cliente img{

    max-width:80%;

    max-height:80px;

    width:auto;

    height:auto;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.65;

    transition:.4s ease;

}


/*========================================
          HOVER
========================================*/

.cliente:hover{

    transform:translateY(-7px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    border-color:rgba(244,190,34,.5);

}


.cliente:hover img{

    filter:grayscale(0%);

    opacity:1;

    transform:scale(1.05);

}


/*========================================
          CELULARES
========================================*/

@media (max-width:576px){

    .clientes{

        padding:80px 5%;

    }


    .clientes::before{

        font-size:120px;

        top:25px;

    }


    .clientes-contenedor{

        grid-template-columns:1fr 1fr;

        gap:15px;

        margin-top:35px;

    }


    .cliente{

        height:120px;

        padding:15px;

        border-radius:15px;

    }


    .cliente img{

        max-width:85%;

        max-height:60px;

    }

}


/* =========================================================
                MISIÓN Y VISIÓN
========================================================= */

.mision-vision {

    position: relative;

    padding: 110px 8%;

    background:
        linear-gradient(
            135deg,
            #0d1b3d,
            #122152 55%,
            #173e83
        );

    overflow: hidden;

}


/* DECORACIÓN DE FONDO */

.mision-vision::before {

    content: "03";

    position: absolute;

    width: 550px;

    height: 550px;

    right: -250px;

    top: -280px;

    border: 70px solid rgba(255,255,255,.035);

    border-radius: 50%;

}


.mision-vision::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    left: -220px;

    bottom: -220px;

    border: 55px solid rgba(244,190,34,.06);

    border-radius: 50%;

}


/* =========================================================
                    ENCABEZADO
========================================================= */

.mv-encabezado {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto 60px;

    text-align: center;

}


.mv-etiqueta {

    display: inline-block;

    margin-bottom: 15px;

    color: #f4be22;

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.mv-encabezado h2 {

    margin: 0 0 18px;

    color: #fff;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.15;

}


.mv-encabezado h2 span {

    color: #f4be22;

}


.mv-encabezado p {

    max-width: 700px;

    margin: auto;

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

    line-height: 1.8;

    font-size: .98rem;

}


/* =========================================================
                    CONTENEDOR
========================================================= */

.mv-contenedor {

    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;

}


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

.mv-card {

    position: relative;

    min-height: 360px;

    padding: 45px;

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

    border-radius: 18px;

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

    backdrop-filter: blur(8px);

    overflow: hidden;

    transition: .4s ease;

}


.mv-card:hover {

    transform: translateY(-8px);

    border-color: rgba(244,190,34,.45);

    box-shadow:
        0 20px 50px rgba(0,0,0,.22);

}


/* =========================================================
                    NÚMERO
========================================================= */

.mv-numero {

    position: absolute;

    right: 25px;

    top: 15px;

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

    font-size: 6rem;

    font-weight: 800;

    line-height: 1;

}


/* =========================================================
                    ICONO
========================================================= */

.mv-icono {

    width: 65px;

    height: 65px;

    margin-bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f4be22;

    color: #122152;

    border-radius: 14px;

    font-size: 1.5rem;

    box-shadow:
        0 10px 25px rgba(244,190,34,.18);

}


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

.mv-contenido {

    position: relative;

    z-index: 2;

}


.mv-contenido > span {

    color: #f4be22;

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: 2px;

}


.mv-contenido h3 {

    max-width: 450px;

    margin: 10px 0 18px;

    color: #fff;

    font-size: 1.65rem;

    line-height: 1.25;

}


.mv-contenido p {

    max-width: 500px;

    margin: 0;

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

    font-size: .92rem;

    line-height: 1.85;

}


/* =========================================================
                    DETALLE INFERIOR
========================================================= */

.mv-card::after {

    content: "";

    position: absolute;

    left: 45px;

    bottom: 0;

    width: 65px;

    height: 4px;

    background: #f4be22;

    border-radius: 5px 5px 0 0;

    transition: .4s ease;

}


.mv-card:hover::after {

    width: 120px;

}


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

@media (max-width: 850px) {

    .mision-vision {

        padding: 80px 7%;

    }


    .mv-contenedor {

        grid-template-columns: 1fr;

    }


    .mv-card {

        min-height: auto;

        padding: 35px;

    }

}


@media (max-width: 500px) {

    .mision-vision {

        padding: 70px 5%;

    }


    .mv-card {

        padding: 30px;

    }


    .mv-icono {

        width: 55px;

        height: 55px;

        font-size: 1.2rem;

    }


    .mv-contenido h3 {

        font-size: 1.4rem;

    }


    .mv-contenido p {

        font-size: .88rem;

    }


    .mv-numero {

        font-size: 4.5rem;

    }

}


/* ================================
   SECCIÓN BROCHURE
================================ */

.brochure-section {
    width: 90%;
    max-width: 1200px;
    margin: 80px auto;
    padding: 55px 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    background: linear-gradient(135deg, #111 0%, #1b1b1b 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    position: relative;
    overflow: hidden;
}

/* Detalle dorado lateral */

.brochure-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;

    background: #c9a227;
}

/* Brillo decorativo */

.brochure-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -150px;
    top: -150px;

    background: radial-gradient(
        circle,
        rgba(201, 162, 39, 0.12),
        transparent 70%
    );

    pointer-events: none;
}


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

.brochure-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.brochure-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #eab70f;
}

.brochure-content h2 {
    margin: 0 0 18px;

    font-size: 38px;
    line-height: 1.15;

    color: #ffffff;
}

.brochure-content p {
    margin: 0 0 30px;

    max-width: 600px;

    font-size: 16px;
    line-height: 1.7;

    color: #bdbdbd;
}


/* Botones del hero */
.hero-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.hero-buttons .btn {
    white-space: nowrap;
    flex-shrink: 0;
}


.btn-brochure{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:16px 40px;

    background:transparent;

    color:#ffffff;

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

    border-radius:50px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.4s;

    position:relative;

    overflow:hidden;
}


.btn-brochure:hover{

    background:var(--amarillo);

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(244,87,3,.20);
}



/* ================================
   FIRMA DEL DISEÑADOR
   ================================ */

.developer-credit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    line-height: 1;
    opacity: 0.75;
}

.developer-credit span {
    color: #aaa;
}

.developer-credit strong {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.developer-credit a {
    text-decoration: none;
}

.developer-whatsapp {
    padding: 6px 10px;
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 20px;
    color: #25d366 !important;
    transition: 0.2s ease;
}

.developer-whatsapp:hover {
    background: rgba(37, 211, 102, 0.08);
    opacity: 1;
}


/* MÓVIL */
@media (max-width: 768px) {

    .developer-credit {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 16px;
        padding-top: 10px;
        font-size: 10px;
    }

    .developer-credit strong {
        font-size: 11px;
    }

    .developer-whatsapp {
        padding: 5px 8px;
    }
}


.mapa-contacto {
    width: 100%;
    margin-top: 30px;
    border-radius: 15px;
    overflow: hidden;
}

.mapa-contacto iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}