:root {
    --card-bg: rgba(255, 255, 255, 0.05);
    --transition-smooth: all 0.4s ease;
}

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

/* ====================== FONDO ====================== */

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #2B7594 25%, #655900 100%);
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,0,0,0.15), rgba(0,0,0,0.4));
}

.background span {
    width: 5vmin;
    height: 5vmin;
    border-radius: 5vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 18;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #65863c;
    top: 96%;
    left: 67%;
    animation-duration: 197s;
    animation-delay: -18s;
    transform-origin: 21vw 0vh;
    box-shadow: -10vmin 0 1.5854856061043958vmin currentColor;
}
.background span:nth-child(1) {
    color: #58e4ba;
    top: 95%;
    left: 51%;
    animation-duration: 194s;
    animation-delay: -277s;
    transform-origin: -22vw 23vh;
    box-shadow: 10vmin 0 2.1156483211927415vmin currentColor;
}
.background span:nth-child(2) {
    color: #58e4ba;
    top: 29%;
    left: 76%;
    animation-duration: 133s;
    animation-delay: -22s;
    transform-origin: -10vw 3vh;
    box-shadow: -10vmin 0 1.6425735793537712vmin currentColor;
}
.background span:nth-child(3) {
    color: #65863c;
    top: 64%;
    left: 66%;
    animation-duration: 293s;
    animation-delay: -90s;
    transform-origin: -11vw 8vh;
    box-shadow: -10vmin 0 2.1947255663351957vmin currentColor;
}
.background span:nth-child(4) {
    color: #adc2ff;
    top: 17%;
    left: 47%;
    animation-duration: 325s;
    animation-delay: -73s;
    transform-origin: -12vw -1vh;
    box-shadow: -10vmin 0 1.7344346376920767vmin currentColor;
}
.background span:nth-child(5) {
    color: #58e4ba;
    top: 87%;
    left: 47%;
    animation-duration: 45s;
    animation-delay: -160s;
    transform-origin: 2vw -22vh;
    box-shadow: -10vmin 0 1.9283636621721625vmin currentColor;
}
.background span:nth-child(6) {
    color: #adc2ff;
    top: 38%;
    left: 3%;
    animation-duration: 209s;
    animation-delay: -298s;
    transform-origin: -13vw -13vh;
    box-shadow: -10vmin 0 2.0222871519373538vmin currentColor;
}
.background span:nth-child(7) {
    color: #58e4ba;
    top: 61%;
    left: 27%;
    animation-duration: 59s;
    animation-delay: -263s;
    transform-origin: 24vw -5vh;
    box-shadow: 10vmin 0 1.5289460299812685vmin currentColor;
}
.background span:nth-child(8) {
    color: #65863c;
    top: 94%;
    left: 84%;
    animation-duration: 44s;
    animation-delay: -101s;
    transform-origin: 5vw -17vh;
    box-shadow: 10vmin 0 1.8473148390505003vmin currentColor;
}
.background span:nth-child(9) {
    color: #58e4ba;
    top: 82%;
    left: 68%;
    animation-duration: 306s;
    animation-delay: -190s;
    transform-origin: 5vw -24vh;
    box-shadow: -10vmin 0 1.9621903633551456vmin currentColor;
}
.background span:nth-child(10) {
    color: #58e4ba;
    top: 24%;
    left: 74%;
    animation-duration: 143s;
    animation-delay: -28s;
    transform-origin: 7vw -16vh;
    box-shadow: 10vmin 0 1.8576281135502066vmin currentColor;
}
.background span:nth-child(11) {
    color: #65863c;
    top: 96%;
    left: 71%;
    animation-duration: 45s;
    animation-delay: -183s;
    transform-origin: -2vw -3vh;
    box-shadow: -10vmin 0 1.6536163489796105vmin currentColor;
}
.background span:nth-child(12) {
    color: #58e4ba;
    top: 48%;
    left: 21%;
    animation-duration: 33s;
    animation-delay: -171s;
    transform-origin: -24vw 17vh;
    box-shadow: -10vmin 0 1.8523186192071073vmin currentColor;
}
.background span:nth-child(13) {
    color: #58e4ba;
    top: 60%;
    left: 96%;
    animation-duration: 307s;
    animation-delay: -293s;
    transform-origin: 17vw 22vh;
    box-shadow: -10vmin 0 1.7085338273484658vmin currentColor;
}
.background span:nth-child(14) {
    color: #58e4ba;
    top: 4%;
    left: 53%;
    animation-duration: 36s;
    animation-delay: -139s;
    transform-origin: 20vw 1vh;
    box-shadow: -10vmin 0 1.4056467387885168vmin currentColor;
}
.background span:nth-child(15) {
    color: #58e4ba;
    top: 74%;
    left: 12%;
    animation-duration: 185s;
    animation-delay: -226s;
    transform-origin: -11vw 15vh;
    box-shadow: 10vmin 0 2.1093757546967242vmin currentColor;
}
.background span:nth-child(16) {
    color: #65863c;
    top: 97%;
    left: 92%;
    animation-duration: 225s;
    animation-delay: -131s;
    transform-origin: 5vw -21vh;
    box-shadow: -10vmin 0 1.6215523903497457vmin currentColor;
}
.background span:nth-child(17) {
    color: #adc2ff;
    top: 43%;
    left: 2%;
    animation-duration: 223s;
    animation-delay: -45s;
    transform-origin: 23vw -9vh;
    box-shadow: 10vmin 0 1.5465937183179919vmin currentColor;
}
.background span:nth-child(18) {
    color: #58e4ba;
    top: 81%;
    left: 98%;
    animation-duration: 157s;
    animation-delay: -186s;
    transform-origin: -5vw 13vh;
    box-shadow: 10vmin 0 2.01396150597109vmin currentColor;
}
.background span:nth-child(19) {
    color: #58e4ba;
    top: 7%;
    left: 93%;
    animation-duration: 136s;
    animation-delay: -288s;
    transform-origin: -14vw 4vh;
    box-shadow: 10vmin 0 2.0851584104679626vmin currentColor;
}
.background span:nth-child(20) {
    color: #65863c;
    top: 79%;
    left: 51%;
    animation-duration: 133s;
    animation-delay: -284s;
    transform-origin: 10vw -4vh;
    box-shadow: -10vmin 0 1.2969725742208067vmin currentColor;
}
.background span:nth-child(21) {
    color: #adc2ff;
    top: 7%;
    left: 50%;
    animation-duration: 137s;
    animation-delay: -252s;
    transform-origin: 3vw 14vh;
    box-shadow: 10vmin 0 1.6178443862344862vmin currentColor;
}
.background span:nth-child(22) {
    color: #adc2ff;
    top: 50%;
    left: 14%;
    animation-duration: 282s;
    animation-delay: -252s;
    transform-origin: -22vw -6vh;
    box-shadow: -10vmin 0 1.3803570206376348vmin currentColor;
}
.background span:nth-child(23) {
    color: #65863c;
    top: 67%;
    left: 45%;
    animation-duration: 72s;
    animation-delay: -112s;
    transform-origin: 2vw -16vh;
    box-shadow: -10vmin 0 2.085686587613131vmin currentColor;
}
.background span:nth-child(24) {
    color: #65863c;
    top: 99%;
    left: 44%;
    animation-duration: 256s;
    animation-delay: -211s;
    transform-origin: -6vw -7vh;
    box-shadow: 10vmin 0 1.3669479642708255vmin currentColor;
}
.background span:nth-child(25) {
    color: #adc2ff;
    top: 41%;
    left: 50%;
    animation-duration: 272s;
    animation-delay: -268s;
    transform-origin: -22vw -20vh;
    box-shadow: 10vmin 0 1.90849048983339vmin currentColor;
}
.background span:nth-child(26) {
    color: #adc2ff;
    top: 14%;
    left: 26%;
    animation-duration: 322s;
    animation-delay: -208s;
    transform-origin: -15vw 7vh;
    box-shadow: -10vmin 0 1.766511042827391vmin currentColor;
}
.background span:nth-child(27) {
    color: #65863c;
    top: 86%;
    left: 78%;
    animation-duration: 23s;
    animation-delay: -138s;
    transform-origin: 10vw -1vh;
    box-shadow: 10vmin 0 1.9693118414879576vmin currentColor;
}
.background span:nth-child(28) {
    color: #65863c;
    top: 75%;
    left: 34%;
    animation-duration: 27s;
    animation-delay: -33s;
    transform-origin: 12vw 3vh;
    box-shadow: -10vmin 0 1.5726799359421904vmin currentColor;
}
.background span:nth-child(29) {
    color: #65863c;
    top: 29%;
    left: 94%;
    animation-duration: 220s;
    animation-delay: -54s;
    transform-origin: -18vw -12vh;
    box-shadow: -10vmin 0 1.3759022954159668vmin currentColor;
}
.background span:nth-child(30) {
    color: #adc2ff;
    top: 3%;
    left: 59%;
    animation-duration: 50s;
    animation-delay: -300s;
    transform-origin: 2vw -10vh;
    box-shadow: -10vmin 0 1.2988461600879835vmin currentColor;
}
.background span:nth-child(31) {
    color: #58e4ba;
    top: 73%;
    left: 69%;
    animation-duration: 244s;
    animation-delay: -242s;
    transform-origin: 22vw -5vh;
    box-shadow: 10vmin 0 1.6845800822808148vmin currentColor;
}
.background span:nth-child(32) {
    color: #58e4ba;
    top: 20%;
    left: 16%;
    animation-duration: 113s;
    animation-delay: -252s;
    transform-origin: 16vw -18vh;
    box-shadow: 10vmin 0 1.805924184220019vmin currentColor;
}
.background span:nth-child(33) {
    color: #65863c;
    top: 66%;
    left: 42%;
    animation-duration: 214s;
    animation-delay: -89s;
    transform-origin: 14vw 4vh;
    box-shadow: 10vmin 0 1.793494611747016vmin currentColor;
}
.background span:nth-child(34) {
    color: #58e4ba;
    top: 57%;
    left: 1%;
    animation-duration: 126s;
    animation-delay: -303s;
    transform-origin: -15vw -12vh;
    box-shadow: 10vmin 0 1.9557856742285673vmin currentColor;
}


/* ====================== GALERÍA ====================== */
main {
    position: relative;
    z-index: 10;
    padding: 4rem 2rem;
    color: white;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.8rem;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

.gallery__item {
    position: relative;
    border-radius: 20px;
    background: var(--card-bg);
    backdrop-filter: blur(5px);
    cursor: pointer;
    overflow: hidden; /* Simplificado, ya no necesitas clip-path */
    transition: var(--transition-smooth);
    
    /* Estado inicial para la animación de entrada */
    opacity: 0;
    transform: translateY(40px) scale(0.9);
}

.gallery__item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gallery__item:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.gallery__img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gallery__item:hover .gallery__img {
    transform: scale(1.1);
}

/* Gradiente + título en hover */
.gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery__item:hover::after {
    opacity: 1;
}

.gallery_title {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    padding: 0 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    z-index: 5;
    opacity: 0;
    transform: translateY(15px);
    transition: var(--transition-smooth);
}

.gallery__item:hover .gallery_title {
    opacity: 1;
    transform: translateY(0);
}

/* ====================== MODAL ====================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    max-width: 95%;
    max-height: 95vh;
    position: relative;
    text-align: center;
}

.modal-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.modal-content h2 {
    margin-top: 20px;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: white;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.close {
    position: absolute;
    top: -25px;
    right: -15px;
    font-size: 42px;
    color: rgb(228, 228, 228);
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
}

.close:hover {
    transform: rotate(90deg);
    color: rgb(0, 140, 255);
}

/* ====================== ANIMACIÓN DE ENTRADA DESDE LA DERECHA ====================== */
.gallery__item {
  opacity: 0;
  transform: translateX(180px) rotate(-14deg);
  transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote suave */
}

.gallery__item.visible {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

/* Efecto extra al hover (para que no se sienta rígido) */
.gallery__item:hover {
  transform: scale(1.04) translateY(-8px) !important;
}