/* ==========================================================================
   VERSION DESKTOP & ESTILOS GENERALES
   ========================================================================== */

body {
    background-color: #F9F8F6;
    color: #2D2D2D;
    overflow-x: hidden;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Toggle Switch */
.toggle-checkbox:checked {
    transform: translateX(1.5rem);
    border-color: #C5A059;
}

.toggle-checkbox {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-label {
    transition: background-color 0.3s ease;
}

/* Header Glassmorphism (Gradient Blur Version) */
#navbar.glass {
    background: transparent;
    /* transition: all 0.5s ease; */
    /* Comentado para evitar conflictos con el blur fluido */
}

.nav-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    /* Altura ideal: prolija y sin tapar el cabello */
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.blur-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Capa 1: Desenfoque base (Logic: Salient Layer 1) */
.layer-1 {
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    mask-image: linear-gradient(to bottom, transparent 40%, black 60%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 60%, black 80%, transparent 100%);
}

/* Capa 2 (Logic: Salient Layer 2) */
.layer-2 {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    mask-image: linear-gradient(to bottom, transparent 20%, black 40%, black 60%, transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 40%, black 60%, transparent 80%);
}

/* Capa 3 (Logic: Salient Layer 3) */
.layer-3 {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 40%, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 40%, transparent 60%);
}

/* Capa 4 (Logic: Salient Layer 4) */
.layer-4 {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 40%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 40%);
}

/* Capa 5 (Logic: Salient Layer 5) */
.layer-5 {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    mask-image: linear-gradient(to bottom, black 0%, transparent 20%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 20%);
}

/* Mejora de visibilidad de textos en el Header */
#navbar a,
#navbar button {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* TEMA CLARO (Texto Blanco - Para fondos oscuros) */
#navbar.nav-theme-light a,
#navbar.nav-theme-light button {
    color: white !important;
}

#navbar.nav-theme-light a:hover,
#navbar.nav-theme-light button:hover {
    color: #C5A059 !important;
    text-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

/* TEMA OSCURO (Texto Oscuro - Para fondos claros) */
#navbar.nav-theme-dark a,
#navbar.nav-theme-dark button {
    color: #2D2D2D !important;
    text-shadow: none;
}

#navbar.nav-theme-dark #mobile-menu-btn {
    color: #2D2D2D !important;
}

#navbar.nav-theme-dark a:hover {
    color: #C5A059 !important;
}


/* Hero Parallax */
.parallax-bg {
    will-change: transform;
    object-position: center 28%;
    /* Centrado Desktop */
}

/* Hero Image Transition */
#hero-image {
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.image-fade-out {
    opacity: 0.2;
    filter: blur(8px);
}

/* Hotspots (Puntos de interés) */
.hotspot {
    position: absolute;
    width: 2rem;
    /* Tamaño Desktop Aumentado */
    height: 2rem;
    /* Sin fondo ni borde (Solo icono) */
    background-color: transparent;
    border: none;
    border-radius: 9999px;
    /* Mantenemos radio por si acaso, pero no se ve */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 90;
    pointer-events: auto;
}

.hotspot:hover {
    background-color: transparent;
    transform: scale(1.2);
    /* Un poco más de presencia al hover */
}

/* ANIMACIÓN DE LEVITACIÓN Y ROTACIÓN */
@keyframes float-heart {

    0%,
    100% {
        transform: translateY(0) rotate(var(--rotation));
    }

    50% {
        transform: translateY(-6px) rotate(var(--rotation));
    }
}

.hotspot .heart-icon {
    width: 1.3rem;
    height: 1.3rem;
    color: rgba(255, 255, 255, 0.85);
    /* Transparencia solicitada */
    animation: float-heart 3s ease-in-out infinite;
    --rotation: 0deg;
    /* Default */
    transition: color 0.3s ease;
    /* Quitamos transform del transition para que no pelee con animacion */
}

.hotspot:hover .heart-icon {
    animation-play-state: paused;
    /* Pausar al hacer hover para que no moleste el scale del padre */
    transform: rotate(var(--rotation));
    /* Mantener rotación estática */
}

/* Rotaciones específicas y Desincronización de Animación */
#hs-ojos .heart-icon {
    --rotation: -20deg;
    animation-delay: 0s;
}

#hs-hombro .heart-icon {
    --rotation: -20deg;
    animation-delay: 1.2s;
    /* Desfase accidental */
}

#hs-sonrisa .heart-icon {
    --rotation: 20deg;
    animation-delay: 0.5s;
}

#hs-futuro .heart-icon {
    --rotation: 20deg;
    animation-delay: 2.1s;
}

#hs-manos .heart-icon {
    --rotation: 0deg;
    animation-delay: 0.8s;
}

.hotspot:hover .heart-icon {
    color: #C5A059;
    /* Gold accent on hover */
    filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.6));
    /* Glow effect */
}

/* textos */
.text-small {
    font-size: 2rem;
}

/* --- TOOLTIP SYSTEM --- */
.tooltip {
    position: absolute;
    width: 224px;
    /* w-56 equivalent */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #2D2D2D;
    padding: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 0.25rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-top: 2px solid #C5A059;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Modificadores de posición */
.tip-top {
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
}

.tip-bottom {
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
}

.tip-left {
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}

.tip-right {
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

/* Flechas (Opcional - solo visual) */
.tooltip::after {
    content: '';
    position: absolute;
    border-width: 8px;
    border-style: solid;
}

.tip-top::after {
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-color: white transparent transparent transparent;
}

.tip-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border-color: transparent transparent white transparent;
}

.tip-left::after {
    left: 100%;
    top: 50%;
    margin-top: -8px;
    border-color: transparent transparent transparent white;
}

.tip-right::after {
    right: 100%;
    top: 50%;
    margin-top: -8px;
    border-color: transparent white transparent transparent;
}


/* Posiciones de los Hotspots */
#hs-ojos {
    top: 27%;
    left: 41%;
}

#hs-hombro {
    top: 44%;
    left: 41%;
}

#hs-manos {
    top: 77%;
    left: 52%;
}

#hs-sonrisa {
    top: 26%;
    left: 57%;
}

#hs-futuro {
    top: 48%;
    right: 30%;
}

/* --- TIMELINE ENHANCEMENTS --- */
.timeline-connector {
    position: absolute;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(to right, #C5A059, #C5A059 5px, transparent 5px, transparent 10px);
    z-index: 10;
    width: 0;
    transition: width 1s ease-out;
}

.visible .timeline-connector {
    width: calc(8.333% + 20px);
    /* Ajuste dinámico para llegar a la foto */
}

/* Conectores específicos */
.right-timeline .timeline-connector {
    left: 50%;
    transform: translateY(-50%);
}

.left-timeline .timeline-connector {
    right: 50%;
    transform: translateY(-50%);
}

/* Eventos intermedios (Solo texto) */
.intermediate-event {
    position: relative;
    padding: 1.5rem;
    background: rgba(197, 160, 89, 0.05);
    border-left: 3px solid #C5A059;
    border-radius: 0 1rem 1rem 0;
    margin: 2rem 0;
}

.left-timeline .intermediate-event {
    border-left: none;
    border-right: 3px solid #C5A059;
    border-radius: 1rem 0 0 1rem;
    text-align: right;
}

.intermediate-event h4 {
    color: #C5A059;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}

.intermediate-event p {
    font-style: italic;
    color: #4A4A4A;
    font-size: 0.9rem;
}

/* --- HEART MARKER --- */
.heart-marker {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #ca0202;
    /* Red-700 equivalent */
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heartbeat 1.2s infinite ease-in-out;
    box-shadow: 0 6px 10px -2px rgba(202, 2, 2, 0.4);
    z-index: 25;
}

.heart-marker::before,
.heart-marker::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ca0202;
    border-radius: 50%;
}

.heart-marker::before {
    top: -20px;
    left: 0;
}

.heart-marker::after {
    left: 20px;
    top: 0;
}

/* El texto dentro debe rotar a la inversa para verse derecho */
.heart-marker h1 {
    transform: rotate(45deg) translate(-2px, -2px);
    z-index: 30;
    margin: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    /* Un poco más grande */
}

@keyframes heartbeat {
    0% {
        transform: rotate(-45deg) scale(1);
    }

    15% {
        transform: rotate(-45deg) scale(1.15);
    }

    30% {
        transform: rotate(-45deg) scale(1);
    }

    45% {
        transform: rotate(-45deg) scale(1.1);
    }

    100% {
        transform: rotate(-45deg) scale(1);
    }
}




/* ==========================================================================
   VERSION MOBILE (AJUSTES RESPONSIVOS)
   ========================================================================== */

/* ==========================================================================
   SALIENT-STYLE FULL WIDTH MASONRY GALLERY
   ========================================================================== */

.nectar-masonry-container {
    width: 100%;
    column-count: 4;
    /* Desktop default */
    column-gap: 0;
    /* Gap controlado via padding para consistencia perfecta */
    margin: 0 auto;
}

/* Reusable Salient Animation Logic */
.salient-scroll-reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.salient-scroll-reveal.animated {
    opacity: 1;
    transform: translateY(0);
}

.nectar-masonry-item {
    break-inside: avoid;
    margin-bottom: 0;
    padding: 5px;
    box-sizing: border-box;
    /* Inherit Animation Logic */
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nectar-masonry-item.animated {
    opacity: 1;
    transform: translateY(0);
}

.nectar-masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    /* Asegura que la imagen cubra */

    /* Configuración Inicial B&W */
    filter: grayscale(100%) brightness(0.95);
    transform: scale(1);
    transition: filter 0.5s ease, transform 1s ease;
}

.nectar-masonry-item:hover img {
    filter: grayscale(0%) brightness(1.05);
    transform: scale(0.96);
}

/* Responsividad para Masonry */
@media (max-width: 1024px) {
    .nectar-masonry-container {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .nectar-masonry-container {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .nectar-masonry-container {
        column-count: 1;
    }
}

/* Utilidades de Posicionamiento */
.overlap-top {
    margin-top: -8rem;
}

@media (max-width: 767px) {

    /* Ajuste de posición de imagen en móvil */
    .parallax-bg {
        object-position: center 50%;
    }

    /* Menú Móvil Logic */
    #mobile-menu {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
        pointer-events: none;
    }

    #mobile-menu.open {
        max-height: 400px;
        opacity: 1;
        pointer-events: auto;
    }

    /* Reducción de Hotspots en móvil (pero más grandes que antes) */
    .hotspot {
        width: 1.5rem;
        height: 1.5rem;
    }

    .hotspot .heart-icon {
        width: 1rem;
        height: 1rem;
    }
}

/* LIGHTBOX TOGGLE & GRAYSCALE LOGIC */
#lightbox-img {
    transition: transform 0.3s ease, filter 0.5s ease;
}

#lightbox-img.grayscale-mode {
    filter: grayscale(100%);
}

/* PRELOADER STYLES */
body.no-scroll {
    overflow: hidden;
}

#preloader {
    transition: opacity 1.5s ease-in-out;
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}