/* =========================================================
   INGELCO - PÁGINA SERVICIOS
   Estilos exclusivos de /servicios/
   ========================================================= */

.servicios-hero {
    width: 100%;
    min-height: 390px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(0,31,55,.62) 0%, rgba(0,31,55,.48) 32%, rgba(0,31,55,.24) 52%, rgba(0,31,55,.08) 72%, rgba(0,31,55,.02) 100%),
        url("../img/ingelco-servicios-instalacion-electrica.webp") center center / cover no-repeat;
}
.servicios-hero::after { content:""; position:absolute; left:0; bottom:0; width:34%; height:5px; background:var(--red); }
.servicios-hero-content { position:relative; z-index:1; padding-top:65px; padding-bottom:65px; }
.servicios-kicker { display:block; margin-bottom:14px; color:#fff; font-size:12px; font-weight:900; letter-spacing:1.7px; text-transform:uppercase; }
.servicios-hero h1 { max-width:900px; margin:0; color:#fff; font-size:clamp(42px,5vw,68px); font-weight:900; line-height:.99; letter-spacing:-1.8px; }
.servicios-hero p { max-width:730px; margin:24px 0 0; color:rgba(255,255,255,.88); font-size:17px; line-height:1.7; }

.servicios-intro { padding:70px 0 55px; background:#fff; }
.servicios-intro-inner { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:end; }
.servicios-intro h2, .servicios-sectores h2, .servicios-metodo-heading h2 { margin:10px 0 0; color:var(--navy); font-size:clamp(31px,3.3vw,47px); font-weight:900; line-height:1.06; letter-spacing:-1px; }
.servicios-intro-inner > p { max-width:620px; margin:0; color:var(--gray); font-size:16px; line-height:1.78; }

.servicios-listado { padding:15px 0 82px; background:#fff; }
.servicios-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--border); border-left:1px solid var(--border); }
.servicio-card { position:relative; min-height:255px; padding:34px 36px 30px; background:#fff; border-right:1px solid var(--border); border-bottom:1px solid var(--border); transition:transform .22s ease,box-shadow .22s ease; }
.servicio-card:hover { z-index:2; transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,31,55,.10); }
.servicio-numero { position:absolute; top:28px; right:32px; color:rgba(0,50,83,.13); font-size:40px; font-weight:900; line-height:1; }
.servicio-icono { width:52px; height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--red); font-size:29px; font-weight:900; }
.servicio-card h2 { max-width:500px; margin:0 0 11px; color:var(--navy); font-size:26px; font-weight:900; line-height:1.12; }
.servicio-card p { max-width:570px; margin:0; color:var(--gray); font-size:15px; line-height:1.7; }

.servicios-sectores { padding:66px 0; background:var(--navy); }
.servicios-sectores-inner { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; align-items:center; }
.servicios-sectores .section-label { color:#ff5a60; }
.servicios-sectores h2 { max-width:520px; color:#fff; }
.servicios-sector-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid rgba(255,255,255,.18); }
.servicios-sector-grid span { min-height:105px; display:flex; align-items:center; justify-content:center; padding:20px; color:#fff; font-size:17px; font-weight:800; text-align:center; }
.servicios-sector-grid span + span { border-left:1px solid rgba(255,255,255,.18); }

.servicios-metodo { padding:76px 0 82px; background:#f4f6f8; }
.servicios-metodo-heading { max-width:720px; margin-bottom:38px; }
.servicios-pasos { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid #d8e0e6; border-left:1px solid #d8e0e6; }
.servicio-paso { min-width:0; background:#fff; border-right:1px solid #d8e0e6; border-bottom:1px solid #d8e0e6; }
.servicio-paso-imagen { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#e9eef2; }
.servicio-paso-imagen img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.servicio-paso:hover .servicio-paso-imagen img { transform:scale(1.035); }
.servicio-paso-imagen::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,31,55,.02) 45%,rgba(0,31,55,.34) 100%); pointer-events:none; }
.servicio-paso strong { position:absolute; left:14px; bottom:11px; z-index:2; color:#fff; font-size:25px; font-weight:900; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.28); }
.servicio-paso > span { min-height:58px; display:flex; align-items:center; padding:14px; color:var(--navy); font-size:14px; font-weight:900; line-height:1.2; }

/* Footer igual al de Proyectos */
.proyectos-footer { padding:35px 0; color:rgba(255,255,255,.72); background:var(--navy-deep); }
.proyectos-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.proyectos-footer strong { color:#fff; font-size:20px; letter-spacing:.05em; }
.proyectos-footer p { margin:5px 0 0; font-size:13px; }

@media (max-width:1000px) {
    .servicios-intro-inner, .servicios-sectores-inner { gap:45px; }
    .servicios-pasos { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
    .servicios-hero { min-height:340px; background-position:58% center; }
    .servicios-hero h1 { font-size:clamp(38px,10vw,54px); }
    .servicios-intro { padding:55px 0 42px; }
    .servicios-intro-inner, .servicios-sectores-inner { grid-template-columns:1fr; }
    .servicios-grid { grid-template-columns:1fr; }
    .servicio-card { min-height:auto; }
    .servicios-listado { padding-bottom:60px; }
    .servicios-sector-grid { grid-template-columns:1fr; }
    .servicios-sector-grid span { min-height:72px; }
    .servicios-sector-grid span + span { border-left:0; border-top:1px solid rgba(255,255,255,.18); }
    .servicios-metodo { padding:60px 0 66px; }
    .servicios-metodo-heading { margin-bottom:30px; }
    .servicios-pasos { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .servicio-paso > span { min-height:54px; padding:12px 10px; font-size:13px; }
    .servicio-paso strong { left:10px; bottom:9px; font-size:22px; }
    .proyectos-footer-inner { align-items:flex-start; flex-direction:column; gap:15px; }
}
@media (max-width:560px) {
    .servicios-hero { min-height:320px; background-position:62% center; }
    .servicios-hero-content { padding-top:48px; padding-bottom:48px; }
    .servicios-hero h1 { letter-spacing:-1px; }
    .servicios-hero p { font-size:15px; line-height:1.6; }
    .servicio-card { padding:34px 25px 31px; }
    .servicio-numero { top:24px; right:24px; font-size:34px; }
    .servicios-pasos { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .servicio-paso > span { min-height:50px; padding:10px 7px; font-size:11px; justify-content:center; text-align:center; }
    .servicio-paso strong { left:8px; bottom:7px; font-size:19px; }
}
@media (max-width:380px) {
    .servicio-paso > span { font-size:10px; padding-left:4px; padding-right:4px; }
    .servicio-paso strong { font-size:17px; }
}