/* REGLAS GENERALES */
html {
    scroll-behavior: auto;
    /* IMPORTANTE para que JS pueda animar con su propia velocidad */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    overflow-x: hidden;
}

.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.border-zzen {
    border-color: rgba(255, 255, 255, 0.05);
}

/* EL ACORDEÓN HORIZONTAL */
.contenedor-servicios {
    display: flex;
    width: 100%;
    height: 480px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #0a0a0a;
    overflow: hidden;
}

.tarjeta-servicio {
    width: 33.3333%;
    height: 100%;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    will-change: width, flex-grow;
    transform: translateZ(0); /* Aceleración GPU */
}

.tarjeta-servicio.expandida {
    width: 100%;
    cursor: default;
    background-color: #111;
}

.tarjeta-servicio.oculta {
    width: 0%;
    border-width: 0;
    margin: 0;
}

.vista-contenido {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2.5rem;
    transition: opacity 0.3s ease, filter 0.3s ease;
    will-change: opacity, filter;
    transform: translateZ(0); /* Evita caida de frames al animar blur */
}

.contenido-oculto {
    opacity: 0;
    filter: blur(15px);
    pointer-events: none;
    z-index: 0;
}

.contenido-visible {
    opacity: 1;
    filter: blur(0px);
    pointer-events: auto;
    z-index: 10;
}

.ancho-fijo-basico {
    width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ancho-fijo-detalle {
    width: 100%;
    min-width: 800px;
    display: flex;
    gap: 2.5rem;
}

.btn-cerrar {
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 20;
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
}

.btn-cerrar.visible {
    opacity: 1;
    pointer-events: auto;
}

/* MODO CELULAR */
@media (max-width: 768px) {
    .contenedor-servicios {
        flex-direction: column;
        height: 600px;
    }

    .tarjeta-servicio {
        width: 100%;
        height: 33.333%;
        transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .tarjeta-servicio.expandida {
        height: 100%;
        width: 100%;
    }

    .tarjeta-servicio.oculta {
        height: 0%;
        border: none;
    }

    .ancho-fijo-detalle {
        min-width: 100%;
        flex-direction: column;
        gap: 1rem;
    }

    .vista-contenido {
        padding: 1.5rem;
    }
}