/* ==================================================
   RESET GENERAL
================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==================================================
   HTML Y BODY
================================================== */

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;

    background-color: #000;

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;

    /*
       No se puede seleccionar texto ni imágenes.
    */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /*
       Quita el menú de "Guardar imagen"
       al mantener pulsado en iOS/Android.
    */
    -webkit-touch-callout: none;

    /*
       Quita el destello azul al tocar en móvil.
    */
    -webkit-tap-highlight-color: transparent;
}


/* ==================================================
   CONTENEDOR PRINCIPAL
================================================== */

.hero {

    position: relative;

    width: 100%;

    /*
       Usamos min-height en lugar de height
       para evitar problemas en móviles.
    */
    min-height: 100vh;
    min-height: 100svh;

    /*
       FONDO
    */
    background-image: url("./img/FONDO.png");

    background-repeat: no-repeat;

    /*
       En ordenador queremos que el fondo
       cubra toda la pantalla.
    */
    background-size: cover;

    background-position: center center;

    background-color: #000;

    /*
       Evita que los elementos de nieve
       puedan salirse del contenedor.
    */
    overflow: hidden;
}


/* ==================================================
   CAPA OSCURA SOBRE EL FONDO
================================================== */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    /*
       Puedes cambiar este valor:
       
       0.10 = muy transparente
       0.20 = ligero
       0.30 = medio
       0.50 = bastante oscuro
    */
    background: rgba(0, 0, 0, 0.20);

    z-index: 1;

    pointer-events: none;
}


/* ==================================================
   CONTENIDO
================================================== */

.content {

    position: relative;

    z-index: 3;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;
}


/* ==================================================
   NIEVE
================================================== */

.snow {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    /*
       La nieve va SIEMPRE por encima
       de las imágenes (.image-container = z-index 3)
       para disimular la unión entre las dos.
    */
    z-index: 10;
}


/* ==================================================
   COPOS
================================================== */

.snow span {

    position: absolute;

    top: -40px;

    color: #ffffff;

    font-size: 18px;

    line-height: 1;

    opacity: 0.8;

    /*
       Brillo del copo
    */
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 255, 255, 0.5);

    /*
       Animación
    */
    animation-name: snowfall;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    will-change: transform;
}


/* ==================================================
   POSICIONES Y VELOCIDADES
================================================== */

.snow span:nth-child(1) {

    left: 3%;

    font-size: 12px;

    animation-duration: 9s;
}


.snow span:nth-child(2) {

    left: 9%;

    font-size: 20px;

    animation-duration: 14s;

    animation-delay: -4s;
}


.snow span:nth-child(3) {

    left: 16%;

    font-size: 14px;

    animation-duration: 11s;

    animation-delay: -2s;
}


.snow span:nth-child(4) {

    left: 23%;

    font-size: 24px;

    animation-duration: 16s;

    animation-delay: -7s;
}


.snow span:nth-child(5) {

    left: 30%;

    font-size: 13px;

    animation-duration: 10s;

    animation-delay: -3s;
}


.snow span:nth-child(6) {

    left: 37%;

    font-size: 19px;

    animation-duration: 13s;

    animation-delay: -9s;
}


.snow span:nth-child(7) {

    left: 44%;

    font-size: 11px;

    animation-duration: 8s;

    animation-delay: -5s;
}


.snow span:nth-child(8) {

    left: 51%;

    font-size: 23px;

    animation-duration: 15s;

    animation-delay: -8s;
}


.snow span:nth-child(9) {

    left: 58%;

    font-size: 14px;

    animation-duration: 10s;

    animation-delay: -1s;
}


.snow span:nth-child(10) {

    left: 65%;

    font-size: 21px;

    animation-duration: 14s;

    animation-delay: -6s;
}


.snow span:nth-child(11) {

    left: 72%;

    font-size: 12px;

    animation-duration: 9s;

    animation-delay: -3s;
}


.snow span:nth-child(12) {

    left: 79%;

    font-size: 25px;

    animation-duration: 17s;

    animation-delay: -11s;
}


.snow span:nth-child(13) {

    left: 85%;

    font-size: 15px;

    animation-duration: 11s;

    animation-delay: -4s;
}


.snow span:nth-child(14) {

    left: 90%;

    font-size: 20px;

    animation-duration: 13s;

    animation-delay: -8s;
}


.snow span:nth-child(15) {

    left: 95%;

    font-size: 13px;

    animation-duration: 10s;

    animation-delay: -5s;
}


.snow span:nth-child(16) {

    left: 48%;

    font-size: 16px;

    animation-duration: 12s;

    animation-delay: -7s;
}


/* ==================================================
   ANIMACIÓN DE NIEVE
================================================== */

@keyframes snowfall {

    0% {

        transform:
            translate3d(0, -50px, 0)
            rotate(0deg);

        opacity: 0;
    }


    10% {

        opacity: 0.8;
    }


    50% {

        transform:
            translate3d(45px, 50vh, 0)
            rotate(180deg);

        opacity: 0.8;
    }


    90% {

        opacity: 0.8;
    }


    100% {

        transform:
            translate3d(-45px, 110vh, 0)
            rotate(360deg);

        opacity: 0;
    }
}


/* ==================================================
   TABLETS
================================================== */

@media screen and (max-width: 768px) {

    .hero {

        /*
           En tablets seguimos utilizando COVER.
        */
        background-size: cover;

        background-position: center center;
    }


    .snow span {

        /*
           Reducimos ligeramente los copos.
        */
        font-size: 14px;
    }
}


/* ==================================================
   MÓVILES
================================================== */

@media screen and (max-width: 480px) {

    .hero {

        /*
           Altura adaptada al navegador móvil.
        */
        min-height: 100svh;

        /*
           Mantenemos COVER para llenar
           completamente la pantalla.
        */
        background-size: cover;

        /*
           Ajusta aquí qué parte de la imagen
           quieres priorizar.
           
           center = centro
           top = parte superior
           bottom = parte inferior
        */
        background-position: center center;
    }


    .content {

        min-height: 100svh;
    }


    /*
       Hacemos la nieve un poco más pequeña
       en teléfonos.
    */

    .snow span {

        font-size: 12px;

        text-shadow:
            0 0 4px rgba(255, 255, 255, 0.9),
            0 0 8px rgba(255, 255, 255, 0.5);
    }
}


/* ==================================================
   TELÉFONOS MUY PEQUEÑOS
================================================== */

@media screen and (max-width: 360px) {

    .hero {

        background-position: center center;
    }


    .snow span {

        font-size: 10px;
    }
}


/* ==================================================
   CONTENEDOR DE LAS IMÁGENES
================================================== */

.image-container {
    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;

    flex-direction: row;

    justify-content: center;

    /*
       Las alineamos por el centro y les damos
       aire de sobra para que NO parezcan
       dos imágenes pegadas.
    */
    align-items: center;

    gap: 70px;

    padding: 40px;

    position: relative;

    /*
       Por debajo de la nieve (.snow = z-index 10).
    */
    z-index: 3;
}


/* ==================================================
   CONTENEDOR INDIVIDUAL
================================================== */

.image-link {
    display: flex;

    /*
       El enlace no se puede arrastrar.
    */
    -webkit-user-drag: none;
    user-drag: none;

    /*
       SIN aspect-ratio forzado.

       Cada imagen conserva su proporción real
       y se muestra más pequeña (zoom reducido).

       Cambia el 520px para hacerlas
       más grandes o más pequeñas.
    */
    height: min(62vh, 520px);

    width: auto;

    max-width: 40%;

    text-decoration: none;

    transition: transform 0.3s ease;
}


/* ==================================================
   IMÁGENES
================================================== */

.image-link img {
    /*
       La imagen NO recibe eventos:
       no se puede arrastrar, ni clic derecho
       directo sobre ella, ni seleccionar.
    */
    pointer-events: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

    /*
       La altura manda, el ancho se ajusta solo.
    */
    height: 100%;

    width: auto;

    max-width: 100%;

    object-fit: contain;

    display: block;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* ==================================================
   EFECTO HOVER (sin zoom)
================================================== */

.image-link:hover,
.image-link:hover img {
    transform: none;
}


/* ==================================================
   TABLET
================================================== */

@media screen and (max-width: 768px) {

    .image-container {
        gap: 40px;
        padding: 25px;
    }

    .image-link {
        height: min(55vh, 430px);

        max-width: 45%;
    }
}


/* ==================================================
   MÓVIL
================================================== */

@media screen and (max-width: 480px) {

    .image-container {
        flex-direction: column;

        justify-content: center;

        gap: 40px;

        padding: 40px 20px;
    }

    .image-link {
        /*
           En vertical mandamos por ancho.
        */
        height: auto;

        width: 82%;

        max-width: 330px;
    }

    .image-link img {
        width: 100%;

        height: auto;
    }
}