body {
  color: black;
  font-family: Verdana;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  background-color: black;
  flex-direction: column;
  width: 100%;
}

h1 {
  color: white;  
}

.container {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;       
  -ms-overflow-style: none;
}

#blog {
  background-color: black;  
}

.container::-webkit-scrollbar { 
    display: none;               
}

section {
  height: 100vh;       
  scroll-snap-align: start;  
}

.screen-glitch {
    animation: shake 0.3s infinite;
    pointer-events: none; /* Evita clics accidentals durant el glitch */
}

@keyframes shake {
    0% { transform: translate(0,0) skew(0deg); }
    20% { transform: translate(-5px, 5px) skew(2deg); }
    40% { transform: translate(-5px, -5px) md-skew(-1deg); }
    60% { transform: translate(5px, 5px) skew(0deg); }
    80% { transform: translate(5px, -5px) skew(-2deg); }
    100% { transform: translate(0,0) skew(0deg); }
}


section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
#lluvia-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;           /* muy alto */
    overflow: visible;        /* importante */
    background: rgba(0,0,0,0.05); /* temporal para ver si el contenedor aparece */
}

.reloj {
    position: absolute;
    top: -70px;
    user-select: none;
    animation: caer linear forwards;
    opacity: 0.9;
}

@keyframes caer {
    to {
        transform: translateY(110vh) rotate(720deg);
    }
}

.lobulos-horizontal-scroll {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;   /* scroll horizontal por snap */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 20px 0;
}

.slide {
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;           /* Muy importante */
    overflow: hidden;
}

#collage-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;         /* para que no interfiera con clics */
    z-index: 1;
    overflow: hidden;
}

.imagen-lobulo {
    height: 350px;
    width: 370px;
    position: relative;
    z-index: -10;                   /* por encima de las imágenes del collage */
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

/* Estilo de las imágenes pequeñas */
.collage-img {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    user-select: none;
    pointer-events: none;
    opacity: 0.85;
    transition: transform 0.4s ease;
}

.collage-img:hover {
    transform: scale(1.15) rotate(5deg);
    z-index: 5;
}
/* Opcional: esconder scrollbar */
.lobulos-horizontal-scroll::-webkit-scrollbar {
    display: none;
}