/*==================================================
    SERVICIOS — Estilos exclusivos de la página de servicios
    Scope bajo .services-page para no afectar otras páginas
==================================================*/

/*----- HERO DE SERVICIOS -----
   Reutiliza el sistema de la página de Inicio (.hero / .hero-grid / .hero h1 / .hero p)
   Sólo se conservan los elementos propios de esta página. */

/*----- Beneficios del hero (horizontales y discretos) -----*/

.services-hero-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    max-width:600px;
}

.svc-benefit{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow-sm);
    transition:border-color var(--transition), transform var(--transition);
}

.svc-benefit:hover{
    border-color:rgba(0,123,196,.35);
    transform:translateY(-2px);
}

.svc-benefit-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:40px;
    height:40px;
    border-radius:12px;
    background:rgba(0,123,196,.08);
    border:1px solid rgba(0,123,196,.14);
    color:var(--primary);
}

.svc-benefit-icon svg{
    width:20px;
    height:20px;
}

.svc-benefit span{
    font-size:.88rem;
    font-weight:600;
    color:var(--text);
    line-height:1.35;
}

/*----- Espacio reservado del hero (1920 × 560) -----*/

.services-hero .hero-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:16 / 10;
    border-radius:var(--radius-lg);
    background:
        linear-gradient(140deg, #E9F3FB 0%, #F5F9FD 55%, #EAF3FA 100%);
    border:1px dashed rgba(0,123,196,.35);
    color:var(--primary);
    text-align:center;
    box-shadow:var(--shadow-sm);
}

.services-hero .hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:var(--radius-lg);
    display:block;
}

.hero-visual-label{
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.06em;
    opacity:.8;
}

/* separación visual entre las dos zonas del hero */
.services-hero .hero-content{
    position:relative;
    min-width:0;
}

.services-hero .hero-content::after{
    content:"";
    position:absolute;
    top:8%;
    right:-32px;
    width:1px;
    height:84%;
    background:linear-gradient(180deg, rgba(0,123,196,0) 0%, rgba(0,123,196,.22) 50%, rgba(0,123,196,0) 100%);
}

/*==================================================
    SECCIONES DE TARJETAS
==================================================*/

.services-cards-section{
    padding:var(--section-space) 0;
}

.services-cards-section + .services-cards-section{
    padding-top:0;
}

.services-section-head{
    text-align:center;
    margin-bottom:56px;
}

.services-section-head h2{
    font-size:clamp(1.9rem,3.6vw,2.8rem);
    font-weight:800;
    line-height:1.15;
    color:var(--text);
    letter-spacing:-.5px;
}

.services-head-line{
    display:block;
    width:72px;
    height:4px;
    margin:20px auto 0;
    border-radius:999px;
    background:var(--primary);
}

/*---------- Tarjetas de servicio con imagen + icono ----------*/

.services-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.service-media-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-media-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:rgba(0,123,196,.25);
}

/* espacio reservado para imagen (proporción panorámica 16:9) */
.smc-media{
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:
        linear-gradient(140deg, #EEF5FB 0%, #F8FBFE 55%, #EFF6FC 100%);
    border-bottom:1px solid var(--border);
}

.smc-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.smc-media span{
    font-size:.88rem;
    font-weight:600;
    letter-spacing:.05em;
    color:var(--text-light);
    opacity:.75;
}

.smc-body{
    display:flex;
    flex-direction:column;
    flex:1;
    align-items:center;
    text-align:center;
    padding:24px 20px 28px;
    gap:12px;
}

.smc-body h3{
    font-size:1.02rem;
    font-weight:700;
    color:var(--text);
    line-height:1.35;
}

.smc-body p{
    margin:0;
    font-size:.88rem;
    line-height:1.6;
    color:var(--text-light);
}

/*---------- CTA de sección (centrado bajo las tarjetas) ----------*/

.services-section-cta{
    display:flex;
    justify-content:center;
    margin-top:44px;
}

.services-portfolio-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.services-portfolio-btn svg{
    width:18px;
    height:18px;
}

/*==================================================
    BANNER FINAL DE CONTACTO
==================================================*/

.services-contact-banner{
    padding:0 0 var(--section-space);
}

.contact-banner{
    display:grid;
    grid-template-columns:1.05fr 1.35fr 0.85fr;
    align-items:center;
    gap:40px;
    padding:48px 52px;
    border-radius:var(--radius-lg);
    background:
        linear-gradient(135deg, #0C3557 0%, #082036 100%);
    position:relative;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(8,32,54,.28);
}

.contact-banner::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-160px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(66,174,232,.14);
    filter:blur(70px);
    pointer-events:none;
}

.contact-banner-media{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.contact-banner-media.left{
    aspect-ratio:800 / 400;
}

.contact-banner-media.right{
    aspect-ratio:400 / 400;
}

.contact-banner-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:16px;
}

.contact-banner-media > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:.88rem;
    font-weight:600;
    letter-spacing:.05em;
    color:#CFE4F3;
    background:rgba(255,255,255,.06);
    border:1px dashed rgba(255,255,255,.35);
    border-radius:16px;
}

.contact-banner-content{
    position:relative;
    z-index:1;
    color:#fff;
    text-align:center;
}

.contact-banner-content h2{
    font-size:clamp(1.7rem,2.8vw,2.4rem);
    font-weight:800;
    line-height:1.15;
    margin-bottom:6px;
}

.contact-banner-content .contact-banner-sub{
    display:block;
    font-size:1.15rem;
    font-weight:600;
    color:#8FD0F5;
    margin-bottom:18px;
}

.contact-banner-content p{
    margin:0 auto 28px;
    font-size:.98rem;
    line-height:1.8;
    color:rgba(255,255,255,.88);
    max-width:520px;
}

/* botón WhatsApp con el estilo institucional de Blues */
.services-whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 30px;
    border-radius:999px;
    background:#25D366;
    color:#fff;
    font-weight:700;
    font-size:.98rem;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(37,211,102,.32);
    transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.services-whatsapp-btn svg{
    width:20px;
    height:20px;
}

.services-whatsapp-btn:hover{
    background:#1EBE5D;
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(37,211,102,.42);
}

/*==================================================
    BLOQUE FINAL DE CONFIANZA
==================================================*/

.trust-strip{
    padding:72px 0;
    background:#071C30;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.trust-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:8px 28px;
    border-left:1px solid rgba(255,255,255,.12);
}

.trust-item:first-child{
    padding-left:0;
    border-left:none;
}

.trust-item:last-child{
    padding-right:0;
}

.trust-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:15px;
    background:rgba(66,174,232,.12);
    border:1px solid rgba(66,174,232,.25);
    color:#7CC7F0;
}

.trust-icon svg{
    width:26px;
    height:26px;
}

.trust-item strong{
    display:block;
    font-size:1.02rem;
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
    line-height:1.3;
}

.trust-item span{
    font-size:.88rem;
    line-height:1.6;
    color:#B7C9D8;
    display:block;
}

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

@media (max-width:1200px){

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .trust-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px 0;
    }

    .trust-item:nth-child(n+3){
        border-left:none;
        padding-left:0;
    }

    .trust-item:nth-child(2n){
        border-left:1px solid rgba(255,255,255,.12);
        padding-left:28px;
    }

}

@media (max-width:992px){

    .services-hero h1,
    .services-hero p,
    .services-hero-benefits{
        margin-left:auto;
        margin-right:auto;
    }

    .services-hero .hero-content::after{
        content:none;
    }

    /* la imagen queda debajo del texto y se alinea a la escala del hero de Inicio */
    .services-hero .hero-visual{
        width:100%;
        max-width:300px;
        margin:44px auto 0;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    /* banner apilado verticalmente */
    .contact-banner{
        grid-template-columns:1fr;
        gap:32px;
        padding:40px 30px;
        text-align:center;
    }

    .contact-banner-media.left,
    .contact-banner-media.right{
        width:100%;
        max-width:520px;
        margin:0 auto;
    }

    .contact-banner-content p{
        margin-left:auto;
        margin-right:auto;
    }

}

@media (max-width:576px){

    .services-cards-section{
        padding:64px 0;
    }

    .services-cards-section + .services-cards-section{
        padding-top:0;
    }

    .services-section-head{
        margin-bottom:40px;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .smc-body{
        padding:22px 18px 24px;
    }

    /* beneficios del hero apilados en columna en móvil */
    .services-hero-benefits{
        grid-template-columns:1fr;
        max-width:320px;
        width:100%;
    }

    .services-hero .hero-visual{
        border-radius:var(--radius-sm);
    }

    .contact-banner{
        padding:32px 22px;
    }

    .trust-grid{
        grid-template-columns:1fr;
        gap:32px;
        text-align:center;
    }

    .trust-item,
    .trust-item:first-child,
    .trust-item:nth-child(2n),
    .trust-item:last-child{
        flex-direction:column;
        align-items:center;
        border-left:none;
        padding:0;
    }

}