/* =========================================================
   LTS - SERVICES
   Página de Servicios
========================================================= */

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

:root{

    /* Videovigilancia */

    --cctv-color:#1B5E20;
    --cctv-color-light:#2E7D32;

    /* Electricidad */

    --electric-color:#F4511E;
    --electric-color-light:#FF6F00;

    /* Redes */

    --network-color:#1E3A8A;
    --network-color-light:#2563EB;

    /* Neutros */

    --service-bg:#F7F9FC;
    --service-border:#E3E8EF;
    --service-shadow:rgba(0,0,0,.10);

    --text-main:#243041;
    --text-secondary:#5F6E82;

}

/* =========================================================
   SECCIÓN SERVICIOS
========================================================= */

.services-section{

    padding:5rem 0;

    background:var(--service-bg);

}

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

.services-section .container{

    width:min(1320px,92%);

    margin:0 auto;

}

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

.services-grid{

    display:grid;

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

    gap:2.5rem;

    align-items:stretch;

}

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

.service-card{

    display:flex;

    flex-direction:column;

    background:#ffffff;

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

    border-radius:18px;

    overflow:hidden;

    height:100%;

    box-shadow:0 12px 28px var(--service-shadow);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        border-color .30s ease;

}

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

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 46px rgba(0,0,0,.16);

}

/* =========================================================
   CABECERA
========================================================= */

.service-header{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.75rem 1.75rem 1.25rem;

}

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

.service-icon{

    width:68px;

    height:68px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    font-size:1.85rem;

}

/* =========================================================
   TÍTULO
========================================================= */

.service-header h3{

    margin:0;

    font-size:1.55rem;

    line-height:1.30;

    font-weight:625;

}

/* =========================================================
   IDENTIDAD CORPORATIVA POR SERVICIO
========================================================= */

/* ==========================================
   VIDEOVIGILANCIA Y SEGURIDAD
========================================== */

.service-card.cctv{

    border-top:6px solid var(--cctv-color);

}

.service-card.cctv .service-icon{

    background:linear-gradient(
        135deg,
        var(--cctv-color),
        var(--cctv-color-light)
    );

}

.service-card.cctv h3{

    color:var(--cctv-color);

}

/* ==========================================
   ELECTRICIDAD
========================================== */

.service-card.electric{

    border-top:6px solid var(--electric-color);

}

.service-card.electric .service-icon{

    background:linear-gradient(
        135deg,
        var(--electric-color),
        var(--electric-color-light)
    );

}

.service-card.electric h3{

    color:var(--electric-color);

}

/* ==========================================
   REDES Y CONECTIVIDAD
========================================== */

.service-card.network{

    border-top:6px solid var(--network-color);

}

.service-card.network .service-icon{

    background:linear-gradient(
        135deg,
        var(--network-color),
        var(--network-color-light)
    );

}

.service-card.network h3{

    color:var(--network-color);

}

/* =========================================================
   CONTENEDOR DE IMAGEN
========================================================= */

.service-image{

    width:100%;

    height:240px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f7fa;

}

/* =========================================================
   IMAGEN
========================================================= */

.service-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:
        transform .40s ease,
        filter .30s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.05);

}

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

.service-card:hover .service-image img{

    transform:scale(1.05);

    filter:brightness(1.03);

}

/* =========================================================
   CUERPO DE LA TARJETA
========================================================= */

.service-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:1.75rem;

}

/* =========================================================
   DESCRIPCIÓN
========================================================= */

.service-description{

    margin:0 0 1.50rem;
    color:var(--text-secondary);
    font-size:1rem;
    line-height:1.75;
    text-align:center;

}

/* =========================================================
   LISTA DE SERVICIOS
========================================================= */

.service-list{

    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.85rem;
    flex:1;

}

.service-list li{

    display:flex;
    align-items:flex-start;
    gap:.75rem;
    color:var(--text-main);
    line-height:1.55;
    font-size:.97rem;

}

/* =========================================================
   ICONO DE CADA ELEMENTO
========================================================= */

.service-list li i{

    margin-top:.15rem;
    font-size:1rem;
    flex-shrink:0;

}

/* =========================================================
   FOOTER DE LA TARJETA
========================================================= */

.card-footer{

    margin-top:auto;
    padding:1.20rem 1.75rem;
    color:#ffffff;
    font-size:.95rem;
    font-weight:600;
    text-align:center;

}

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

.service-card.cctv .card-footer{

    background:linear-gradient(
        135deg,
        var(--cctv-color),
        var(--cctv-color-light)
    );

}

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

.service-card.electric .card-footer{

    background:linear-gradient(
        135deg,
        var(--electric-color),
        var(--electric-color-light)
    );

}

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

.service-card.network .card-footer{

    background:linear-gradient(
        135deg,
        var(--network-color),
        var(--network-color-light)
    );

}

/* =========================================================
   COLOR DE LOS ICONOS DE LA LISTA
========================================================= */

.service-card.cctv .service-list i{

    color:var(--cctv-color);

}

.service-card.electric .service-list i{

    color:var(--electric-color);

}

.service-card.network .service-list i{

    color:var(--network-color);

}

/* =========================================================
   EFECTOS Y ANIMACIONES
========================================================= */

.service-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.service-card:hover{

    transform:translateY(-10px);

}

/* =========================================================
   SOMBRAS POR SERVICIO
========================================================= */

.service-card.cctv:hover{

    box-shadow:
        0 18px 40px rgba(27,94,32,.20);

}

.service-card.electric:hover{

    box-shadow:
        0 18px 40px rgba(244,81,30,.20);

}

.service-card.network:hover{

    box-shadow:
        0 18px 40px rgba(30,58,138,.20);

}

/* =========================================================
   EFECTO SOBRE EL ICONO
========================================================= */

.service-card:hover .service-icon{

    transform:scale(1.08) rotate(-6deg);

}

.service-icon{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* =========================================================
   EFECTO SOBRE EL TÍTULO
========================================================= */

.service-header h3{

    transition:
        color .30s ease,
        transform .30s ease;

}

.service-card:hover .service-header h3{

    transform:translateX(4px);

}

/* =========================================================
   EFECTO SOBRE LA IMAGEN
========================================================= */

.service-card:hover .service-image img{

    transform:scale(1.06);

}

/* =========================================================
   EFECTO SOBRE EL FOOTER
========================================================= */

.card-footer{

    transition:filter .30s ease;

}

.service-card:hover .card-footer{

    filter:brightness(1.08);

}

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

/* =========================================================
   TABLETS
========================================================= */

@media (max-width:1200px){

    .services-grid{

        gap:2rem;

    }

}

@media (max-width:992px){

    .services-grid{

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

    }

    .service-card.network{

        grid-column:1 / -1;
        max-width:650px;
        margin:0 auto;

    }

}

/* =========================================================
   MÓVILES
========================================================= */

@media (max-width:768px){

    .services-section{

        padding:3.5rem 0;

    }

    .services-grid{

        grid-template-columns:1fr;
        gap:2rem;

    }

    .service-card{

        max-width:580px;
        margin:0 auto;

    }

    .service-header{

        padding:1.50rem;

    }

    .service-header h3{

        font-size:1.35rem;

    }

    .service-icon{

        width:60px;
        height:60px;
        font-size:1.60rem;

    }

    .service-image img{

        height:220px;

    }

    .service-body{

        padding:1.50rem;

    }

}

/* =========================================================
   SMARTPHONES
========================================================= */

@media (max-width:576px){

    .services-section{

        padding:3rem 0;

    }

    .service-header{

        flex-direction:column;
        text-align:center;
        gap:1rem;

    }

    .service-header h3{

        font-size:1.25rem;

    }

    .service-image img{

        height:200px;

    }

    .service-description{

        font-size:.96rem;
        text-align:left;

    }

    .service-list li{

        font-size:.95rem;

    }

    .card-footer{

        padding:1rem 1.25rem;
        font-size:.90rem;

    }

}

/* =========================================================
   PEQUEÑOS AJUSTES
========================================================= */

.service-card *{

    box-sizing:border-box;

}

.service-card img{

    user-select:none;

    -webkit-user-drag:none;

}