/* Reset rápido */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* PRELOADER */
#preloader {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, #fffaf5, #f3ebe4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Contenedor central (título + barra) */
.preloader-inner {
    text-align: center;
    max-width: 600px;
    width: 90%;
    position: relative;
    z-index: 2;
    /* por encima del collage */
}

.preloader-title {
    font-size: 2rem;
    letter-spacing: 0.25rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.preloader-subtitle {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

/* Barra */
.preloader-bar-container {
    margin-bottom: 1.5rem;
}

.preloader-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.preloader-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f6b6c7, #f0a16b);
    transition: width 0.25s ease-out;
}

.preloader-percent {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Collage a pantalla completa */
.preloader-collage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* detrás del contenido central */
}

/* Cada foto del collage */
.preloader-photo {
    position: absolute;
    width: 9vw;
    max-width: 140px;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20);
    opacity: 0;
    --offset-x: 0%;
    transform: translateX(var(--offset-x)) translateY(10px) scale(0.9);
    animation: photoIn 0.6s forwards;
}

.preloader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animación de entrada */
@keyframes photoIn {
    to {
        opacity: 1;
        transform: translateX(var(--offset-x)) translateY(0) scale(1);
    }
}

/* ===== DESKTOP / TABLET (como ya lo tenías) ===== */
.preloader-photo.pos-1 {
    top: 14vh;
    left: 50%;
    --offset-x: -270%;
}

.preloader-photo.pos-2 {
    top: 14vh;
    left: 50%;
    --offset-x: -170%;
}

.preloader-photo.pos-3 {
    top: 14vh;
    left: 50%;
    --offset-x: -70%;
}

.preloader-photo.pos-4 {
    top: 14vh;
    left: 50%;
    --offset-x: 30%;
}

.preloader-photo.pos-5 {
    top: 14vh;
    left: 50%;
    --offset-x: 130%;
}

.preloader-photo.pos-6 {
    top: 14vh;
    left: 50%;
    --offset-x: 230%;
}

.preloader-photo.pos-7 {
    bottom: 14vh;
    left: 50%;
    --offset-x: -190%;
}

.preloader-photo.pos-8 {
    bottom: 14vh;
    left: 50%;
    --offset-x: -90%;
}

.preloader-photo.pos-9 {
    bottom: 14vh;
    left: 50%;
    --offset-x: 10%;
}

.preloader-photo.pos-10 {
    bottom: 14vh;
    left: 50%;
    --offset-x: 110%;
}

.preloader-photo.pos-11 {
    bottom: 14vh;
    left: 50%;
    --offset-x: 210%;
}

/* ===== MOBILE: filas que PARTEN DESDE LA IZQUIERDA ===== */
@media (max-width: 600px) {

    .preloader-photo {
        width: 14vw;
        /* más angostas para que quepan bien */
        --offset-x: 0%;
        /* sin traslación horizontal */
        transform: translateY(10px) scale(0.9);
    }

    @keyframes photoIn {
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* FILA SUPERIOR (6 fotos empezando desde la izquierda) */
    .preloader-photo.pos-1 {
        top: 18vh;
        left: 4vw;
    }

    .preloader-photo.pos-2 {
        top: 18vh;
        left: 20vw;
    }

    .preloader-photo.pos-3 {
        top: 18vh;
        left: 36vw;
    }

    .preloader-photo.pos-4 {
        top: 18vh;
        left: 52vw;
    }

    .preloader-photo.pos-5 {
        top: 18vh;
        left: 68vw;
    }

    .preloader-photo.pos-6 {
        top: 18vh;
        left: 84vw;
    }

    /* FILA INFERIOR (5 fotos, también desde la izquierda) */
    .preloader-photo.pos-7 {
        bottom: 18vh;
        left: 10vw;
    }

    .preloader-photo.pos-8 {
        bottom: 18vh;
        left: 26vw;
    }

    .preloader-photo.pos-9 {
        bottom: 18vh;
        left: 42vw;
    }

    .preloader-photo.pos-10 {
        bottom: 18vh;
        left: 58vw;
    }

    .preloader-photo.pos-11 {
        bottom: 18vh;
        left: 74vw;
    }
}

/* Contenido principal */
/* ⬇️ IMPORTANTE: quitamos padding global para que el footer toque los bordes */
#main-content {
    padding: 0;
}

/* Footer real, full width */
.site-footer {
    width: 100%;
    background: #0f0f0f;
    color: #f5f5f5;
    text-align: center;
    padding: 35px 10px;
    font-size: 0.9rem;
    margin-top: 60px;
    /* separa del contenido superior */
}

.site-footer p {
    margin: 6px 0;
    opacity: 0.85;
}

.site-footer i {
    margin: 0 4px;
}