/* --- GENERAL --- */
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, #e3f2fd, #ffffff);
    font-family: "Segoe UI", sans-serif;
}

/* --- CÁMARA (La ventana de tu pantalla) --- */
#viewport {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden; /* Lo que se salga no se ve */
    cursor: grab; /* Manito para agarrar */
    background-color: #e3f2fd;
    touch-action: none; /* IMPORTANTE: Evita que el navegador haga scroll nativo en celular */
}
#viewport:active {
    cursor: grabbing; /* Manito agarrando */
}

/* --- MUNDO (El lienzo gigante de 5000x5000) --- */
#world {
    position: absolute;
    width: 5000px;
    height: 5000px;
    top: 0;
    left: 0;

    /* El punto de origen del zoom será la esquina superior izquierda (0,0) 
       para facilitar los cálculos de movimiento */
    transform-origin: 0 0;

    /* Sin transiciones lentas para que el arrastre sea instantáneo */
    will-change: transform;
}

/* Resto de estilos igual... */
svg#capa-ramas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
#capa-hojas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
line {
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.5s ease;
}

/* --- HOJAS DECORATIVAS --- */
.hoja-deco {
    position: absolute;
    width: 25px;
    height: 25px;
    background: rgba(76, 175, 80, 0.9);
    /* Forma de hoja (gota) */
    border-radius: 0 50% 50% 50%;
    pointer-events: none;
    z-index: 1;

    opacity: 0;
    transform: scale(0);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- HOJAS DE RECUERDO (NUEVO ESTILO) --- */
.hoja-recuerdo {
    position: absolute;
    width: 45px;
    height: 45px; /* Un poco más grandes para destacar */

    /* Verde Claro */
    background: #aed581;
    /* Borde Marrón fino */
    border: 2px solid #5d4037;

    /* FORMA DE HOJA: Punta en esquina superior izquierda, resto redondeado */
    border-radius: 0 50% 50% 50%;

    cursor: pointer;
    pointer-events: auto;
    z-index: 100;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;

    /* Animación inicial */
    opacity: 0;
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Animación de movimiento suave */
    animation: mecer 4s infinite ease-in-out;
}

/* Ajustamos el icono dentro de la hoja para que quede centrado en la parte ancha */
.hoja-recuerdo div {
    transform: rotate(
        45deg
    ); /* Contrarrestar la rotación de la forma si es necesario */
}

.hoja-recuerdo.visible,
.hoja-deco.visible {
    opacity: 1;
    /* Mantiene la rotación aleatoria definida en JS + la escala normal */
    transform: scale(1) rotate(var(--rotacion));
}

.hoja-recuerdo:hover {
    /* Al pasar el mouse crece un poco y se ilumina */
    transform: scale(1.3) rotate(var(--rotacion)) !important;
    background: #c5e1a5;
    z-index: 101;
    box-shadow: 0 0 15px #aed581;
}

/* --- TÍTULO PRINCIPAL --- */
#titulo-principal {
    position: absolute;
    top: 30px; /* Distancia desde arriba */
    width: 100%;
    text-align: center;
    text-transform: uppercase;

    font-family: "Georgia", serif; /* Fuente elegante */
    color: #4e342e; /* Un marrón oscuro cálido */
    font-size: 2.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.8); /* Sombra blanca para resaltar del cielo */

    z-index: 50; /* Por encima del árbol pero debajo del modal */
    pointer-events: none; /* IMPORTANTE: Para que no bloquee el arrastre del mouse */
    padding: 0 20px; /* Márgenes laterales para celulares */

    /* Animación de entrada */
    opacity: 0;
    transform: translateY(-20px);
    animation: aparecerTitulo 2s ease-out forwards;
    animation-delay: 0.5s; /* Espera un poquito antes de aparecer */
}

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

/* Ajuste para pantallas pequeñas (celulares) */
@media (max-width: 600px) {
    #titulo-principal {
        font-size: 1.5rem; /* Letra más chica en celular */
        top: 20px;
    }
}

/* =========================================
   MODAL TIPO "LLUVIA DE FOTOS" (Dispersión Total)
========================================= */

.oculto {
    display: none !important;
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    /* Quitamos el scroll del overlay, lo manejará el contenido si hace falta */
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.modal-content {
    /* El contenedor ahora es la pantalla completa */
    position: relative;
    width: 100%;
    height: 100%;
    /* Quitamos flexbox para que no ordene nada */
    display: block;
}

/* --- HOJA DE TEXTO (Siempre visible arriba) --- */
.hoja-texto {
    /* Posición fija en la parte superior central */
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg); /* Centrado y rotadito */

    width: 90%;
    max-width: 600px;
    background: linear-gradient(135deg, #66bb6a, #43a047);
    padding: 40px;
    color: white;
    text-align: center;
    border-radius: 2px 100px 5px 100px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border: 3px solid #2e7d32;
    /* Z-index muy alto para que ninguna foto la tape */
    z-index: 200;

    /* Si el texto es muy largo, que tenga su propio scroll */
    max-height: 40vh;
    overflow-y: auto;
}
.hoja-texto h2 {
    font-family: "Georgia", serif;
    font-size: 1.8rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 10px;
    margin-top: 0;
}
.hoja-texto p {
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-line;
}

/* SCROLLBAR para el texto */
.hoja-texto::-webkit-scrollbar {
    width: 6px;
}
/* --- HOJA DE TEXTO (Principal) --- */
.hoja-texto {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);

    /* CAMBIO: Ancho del 50% para dejar 25% libre a cada lado */
    width: 50%;
    max-width: 450px; /* Un poco más compacta */

    background: linear-gradient(135deg, #66bb6a, #43a047);
    padding: 40px;
    color: white;
    text-align: center;
    border-radius: 2px 100px 5px 100px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border: 3px solid #2e7d32;
    z-index: 200;

    max-height: 55vh;
    overflow-y: auto;
}

/* --- HOJAS DE FOTO (Posicionadas Absolutamente) --- */
.hoja-foto {
    /* CLAVE: Posición absoluta para moverlas donde queramos */
    position: absolute;

    width: 220px;
    height: 280px; /* Un poco más chicas para que entren más */
    background: #1b5e20;
    padding: 10px;
    border-radius: 2px 80px 5px 80px;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid #4caf50;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Transición suave para el hover */
    transition:
        transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        z-index 0s;
    cursor: zoom-in;

    opacity: 0;
    animation: caerMesa 0.6s forwards ease-out;
}

/* Hover: Se endereza, crece y se pone al frente */
.hoja-foto:hover {
    /* Importante: rotate(0deg) para enderezarla */
    transform: scale(1.2) rotate(0deg) !important;
    z-index: 300 !important; /* Más alto que el texto incluso */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
    border-color: #81c784;
}

.hoja-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px 60px 5px 60px;
    pointer-events: none;
}

@keyframes caerMesa {
    from {
        opacity: 0;
        transform: scale(1.5) translateY(-200px);
    }
    to {
        opacity: 1;
    }
}

/* Botón cerrar y Lightbox (sin cambios) */
.close-btn-fixed {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: #d32f2f; /* Rojo intenso */
    color: white;
    border-radius: 50%;
    font-size: 32px;
    line-height: 50px; /* Centrado vertical del texto */
    text-align: center;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);

    /* Z-Index superior al overlay y al lightbox */
    z-index: 2147483647;
    transition: transform 0.3s ease;
}

.close-btn-fixed:hover {
    background: #b71c1c;
    transform: rotate(90deg) scale(1.1);
}

#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}
#lightbox-img {
    max-width: 95%;
    max-height: 95%;
    border: 5px solid white;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    animation: zoomEntrada 0.3s ease-out;
}
@keyframes zoomEntrada {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- SISTEMA DE CLIMA (HOJAS CAYENDO) --- */
#clima-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Para que puedas clickear a través de ellas */
    z-index: 50; /* Por encima del árbol, pero debajo del modal */
    overflow: hidden;
}

.hoja-caida {
    position: absolute;
    top: -50px; /* Empiezan arriba fuera de pantalla */
    width: 15px;
    height: 15px; /* Pequeñas y delicadas */
    background: #81c784; /* Verde claro */
    border-radius: 0 50% 50% 50%;
    opacity: 0.8;
}

/* Animación compuesta: Caída + Vaivén */
@keyframes caer {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg) translateX(50px);
        opacity: 0;
    }
}

@keyframes vaiven {
    0%,
    100% {
        margin-left: 0;
    }
    50% {
        margin-left: 30px;
    }
}

/* =========================================
   EFECTO VIENTO (CORREGIDO)
   Se aplica a los elementos internos, no al contenedor
========================================= */

/* 2. Mover las hojas (decorativas y recuerdos) */
/* Nota: Sobrescribimos la animación 'mecer' si existía */
.hoja-deco,
.hoja-recuerdo {
    animation: vientoHojas 4s ease-in-out infinite alternate;
}

/* --- KEYFRAMES --- */
@keyframes vientoHojas {
    /* Estado inicial (quieto) */
    0% { 
        transform: scale(1) rotate(var(--rotacion)) translateX(0); 
    }
    
    /* Estado final (donde llega el viento) */
    100% { 
        /* ANTES: + 8deg (muy sutil)
           AHORA: + 20deg (se nota mucho más) 
           
           ANTES: translateX(4px) (muy poquito)
           AHORA: translateX(15px) (movimiento amplio)
        */
        transform: scale(1) rotate(calc(var(--rotacion) + 20deg)) translateX(20px); 
    }
}

/* Ajuste para el hover de recuerdos (para que no pierda el efecto al pasar el mouse) */
.hoja-recuerdo:hover {
    animation: none; /* Pausar el viento al tocarla */
    transform: scale(1.3) rotate(var(--rotacion)) !important;
}

/* =========================================
   EFECTO VIENTO REALISTA (SKEW / FLEXIBILIDAD)
========================================= */

/* Aplicamos el viento a las DOS capas juntas para que no se descuadren */
#capa-ramas, #capa-hojas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* PIVOTE: La base del árbol (Centro abajo) */
    /* Como tu árbol está dibujado en el medio (2500) y abajo (5000) */
    transform-origin: 50% 100%;
    
    /* Animación de vaivén */
    animation: vientoFlexible 6s ease-in-out infinite alternate;
}

/* El z-index se mantiene como estaba */
#capa-ramas { z-index: 0; }
#capa-hojas { z-index: 1; pointer-events: none; } /* Pointer events none para poder clickear las fotos */

/* --- LA ANIMACIÓN CLAVE --- */
@keyframes vientoFlexible {
    /* Usamos skewX (Inclinación) en lugar de rotate.
       Esto mantiene el tronco recto abajo, y curva lo de arriba. */
    
    0% { 
        transform: skewX(-2deg); /* Se inclina a la izquierda */
    }
    100% { 
        transform: skewX(2deg); /* Se inclina a la derecha */
    }
}