/* ===================== HEADER FLOTANTE ===================== */
header {
    opacity: 0;
    transform: scale(0.98);
    animation: floatHeader 0.8s ease-out forwards;
    animation-play-state: paused;
    /* Para activar con JS */
}

@keyframes floatHeader {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================== SECCIONES FLOTANTES ===================== */
section,
footer,
.contenedor-banner,
.contenedor-servicios,
.contenedor-categorias,
.contenedor-marcas,
.contenedor-pie-de-pagina {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    animation: floatSection 0.8s ease-out forwards;
    animation-play-state: paused;
    /* Para activar con JS */
}

@keyframes floatSection {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Delays escalonados para secciones */
.header-delay {
    animation-delay: 0.2s;
}

.banner-delay {
    animation-delay: 0.4s;
}

.servicios-delay {
    animation-delay: 0.6s;
}

.categorias-delay {
    animation-delay: 0.8s;
}

.marcas-delay {
    animation-delay: 1s;
}

.pie-delay {
    animation-delay: 1.2s;
}

/* ===================== ELEMENTOS INTERNOS FLOTANDO ===================== */
.contenedor-servicios .caja-servicio,
.contenedor-categorias .caja-categoria,
.contenedor-marcas .caja-marcas div {
    opacity: 0;
    transform: translateX(var(--startX, -30px)) scale(0.95);
    animation: floatElement 0.6s ease-out forwards;
    animation-play-state: paused;
    /* Para activar con JS */
}

/* Delays escalonados internos y alternancia izquierda/derecha */
.contenedor-servicios .caja-servicio:nth-child(1) {
    animation-delay: 0.3s;
    --startX: -30px;
}

.contenedor-servicios .caja-servicio:nth-child(2) {
    animation-delay: 0.5s;
    --startX: 30px;
}

.contenedor-servicios .caja-servicio:nth-child(3) {
    animation-delay: 0.7s;
    --startX: -30px;
}

.contenedor-servicios .caja-servicio:nth-child(4) {
    animation-delay: 0.9s;
    --startX: 30px;
}

.contenedor-categorias .caja-categoria:nth-child(1) {
    animation-delay: 0.3s;
    --startX: -30px;
}

.contenedor-categorias .caja-categoria:nth-child(2) {
    animation-delay: 0.5s;
    --startX: 30px;
}

.contenedor-marcas .caja-marcas div:nth-child(1) {
    animation-delay: 0.3s;
    --startX: -30px;
}

.contenedor-marcas .caja-marcas div:nth-child(2) {
    animation-delay: 0.5s;
    --startX: 30px;
}

/* Keyframes elementos */
@keyframes floatElement {
    0% {
        opacity: 0;
        transform: translateX(var(--startX, -30px)) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ===================== HOVER SUAVE ===================== */
.contenedor-servicios .caja-servicio:hover,
.contenedor-categorias .caja-categoria:hover,
.contenedor-marcas .caja-marcas div:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ===================== MEDIA QUERY ===================== */
@media (max-width: 1024px) {

    section,
    header,
    footer,
    .contenedor-banner,
    .contenedor-servicios,
    .contenedor-categorias,
    .contenedor-marcas,
    .contenedor-pie-de-pagina {
        transform: translateY(10px);
        animation-duration: 0.7s;
    }

    .contenedor-servicios .caja-servicio,
    .contenedor-categorias .caja-categoria,
    .contenedor-marcas .caja-marcas div {
        transform: translateX(0);
        animation-duration: 0.5s;
    }
}