*{
    box-sizing:border-box;
}
/* HERO SLIDER SERVICIOS */
.hero-servicios{
    position: relative;
    height: calc(100vh - 118px);
    margin-top: 118px;
    overflow: hidden;
    background: #0a1a2e;
}
.srv-fondo{
    position: absolute;
    inset: 0;
    background-image: url('../img/fondoservicio.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
/* ---- SLIDER (desktop y mobile) ---- */
.srv-slider{
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
/* PC: ambos slides entran/salen horizontalmente (de derecha) */
.srv-slide{
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateX(100%);
    transition: transform 0.85s cubic-bezier(0.77, 0, 0.18, 1);
}
.srv-slide.active{
    transform: translateX(0%);
}
.srv-slide.saliendo{
    transform: translateX(-100%);
}
.srv-slide-1{
    background-image: url('../img/servicio1.png');
}
.srv-slide-2{
    background-image: url('../img/servicio2.png');
}
/* MOBILE: slide1 sube (Y), slide2 entra desde la derecha (X) */
@media(max-width:900px){
    .srv-slide{
        background-size: 100% 100%;
        background-position: top center;
        /* slide por defecto (slide1): entra/sale verticalmente */
        transform: translateY(100%);
    }
    .srv-slide.active{
        transform: translateY(0%);
    }
    .srv-slide.saliendo{
        transform: translateY(-100%);
    }
    .srv-slide-1{
        background-image: url('../img/servicio1mobile.png');
        background-size: 44%;
        background-position: 65% 65%;
    }
    /* slide2 en mobile: entra desde la derecha */
    .srv-slide-2{
        background-image: url('../img/servicio2mobile.png');
        transform: translateX(100%);
    }
    .srv-slide-2.active{
        transform: translateX(0%);
    }
    .srv-slide-2.saliendo{
        transform: translateX(-100%);
    }
}
.srv-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 20, 50, 0.35);
    z-index: 2;
    pointer-events: none;
}
.srv-boton{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.srv-boton.srv-boton-visible{
    opacity: 1;
    pointer-events: auto;
}
.srv-boton img{
    height: 130px;
    width: auto;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
    transition: transform .3s ease;
}
.srv-boton:hover img{
    transform: scale(1.07);
}
@media(max-width:900px){
    .srv-boton img{
        height: 55px;
    }
    .srv-boton{
        bottom: 20px;
    }
}
.srv-titulo{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
}
.srv-titulo img{
    height: 140px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
@media(max-width:900px){
    .srv-titulo img{
        height: 80px;
    }
}
.srv-img-izquierda{
    position: absolute;
    bottom: 0;
    left: 1%;
    z-index: 3;
}
.srv-img-izquierda img{
    height: 80vh;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 28px rgba(0,0,0,0.55));
}
@media(max-width:900px){
    .hero-servicios{
        height: calc(100vh - 92px);
        margin-top: 92px;
        background: white;
    }
    /* ocultar overlay en mobile */
    .srv-overlay{
        display: none;
    }
    /* fondo: capa 1 */
    .srv-fondo{
        display: block;
        z-index: 0;
    }
    /* slider: capa 2 (encima del fondo) */
    .srv-slider{
        z-index: 1;
    }
    /* personaje: capa 3 (sobre el slider) */
    .srv-img-izquierda{
        display: block;
        z-index: 4;
        bottom: 0;
        left: 0;
    }
    .srv-img-izquierda img{
        height: 55vh;
    }
    /* título: capa 4 (encima de todo) */
    .srv-titulo{
        display: block;
        z-index: 5;
        top: 40px;
    }
    .srv-titulo img{
        height: 100px;
    }
    /* botón mobile: abajo centrado, solo slide 1 */
    .srv-boton{
        display: block;
        z-index: 5;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        pointer-events: none;
    }
    .srv-boton.srv-boton-visible{
        opacity: 1;
        pointer-events: auto;
    }
    .srv-boton img{
        height: 70px;
    }
}
.servicios{
    padding:100px 8%;
    background:#f8fafc;
}
/* TITULO */
.titulo{
    text-align:center;
    margin-bottom:60px;
    padding:0 10px;
}
.titulo h2{
    font-size: clamp(26px, 6vw, 45px);
    font-weight:800;
    line-height:1.25;
    word-break:break-word;
    color:#005ca8;
}
.titulo p{
    color:#64748b;
    font-size: clamp(14px, 2.5vw, 18px);
}
/* CONTENEDOR */
.contenedor-servicios{
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:35px;
}
/* TARJETA */
.servicio-card{
    background:white;
    padding:45px 35px;
    border-radius:30px;
    text-align:center;
    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
}
.servicio-card:hover{
    transform:translateY(-8px);
}
/* ICONO GRANDE */
.servicio-icono{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
    color:white;
}
.servicio-icono.azul{
    background:
    linear-gradient(
        135deg,
        #005ca8,
        #00a2ff
    );
}
.servicio-icono.verde{
    background:
    linear-gradient(
        135deg,
        #176c22,
        #35b94a
    );
}
/* TITULOS */
.servicio-card h3{
    font-size:28px;
    color:#0f172a;
    margin-bottom:15px;
}
.servicio-card p{
    color:#64748b;
    line-height:1.7;
    margin-bottom:30px;
}
/* MINI TARJETAS PAGOS */
.servicio-items{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:20px;
}
.servicio-item{
    background:#f8fafc;
    border-radius:20px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    transition:.3s;
}
.servicio-item:hover{
    background:white;
    box-shadow:
    0 10px 25px rgba(0,0,0,.1);
}
.servicio-item img{
    width:70px;
    height:70px;
    object-fit:contain;
}
.servicio-item span{
    font-weight:600;
    color:#334155;
}
/* ALIANZA */
.alianza-banner{
    background:#f1f5f9;
    border-radius:25px;
    padding:25px;
    margin-bottom:30px;
}
.logos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}
.logos img{
    height:55px;
    object-fit:contain;
}
.sep{
    width:2px;
    height:50px;
    background:#cbd5e1;
}
.alianza-texto{
    margin-top:20px;
    color:#475569;
    font-size:14px;
}
/* REMESAS */
.remesas-grid{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    gap:18px;
}
.remesa{
    background:#f8fafc;
    padding:20px;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100px;
    transition:.3s;
}
.remesa:hover{
    transform:scale(1.05);
    background:white;
    box-shadow:
    0 8px 20px rgba(0,0,0,.1);
}
.remesa img{
    max-width:100%;
    max-height:55px;
    object-fit:contain;
}
/* RESPONSIVE */
@media(max-width:900px){
.contenedor-servicios{
    grid-template-columns:1fr;
}
}
@media(max-width:600px){
.servicios{
    padding:120px 20px 60px;
}
.servicio-items{
    grid-template-columns:1fr;
}
.remesas-grid{
    grid-template-columns:
    repeat(2,1fr);
}
.servicio-icono{
        width:100px;
        height:100px;
        min-width:100px;
        min-height:100px;
        font-size:45px;
        margin:0 auto 25px;
    }
    .servicio-icono i{
        line-height:1;
    }
}