/* ==========================================================================
   ME LATE CHOCOLATE - Pure CSS Animations & Real Chocolate Drips
   Visible, fluida y con alto contraste sobre cualquier fondo
   ========================================================================== */

:root {
    --choco-dark: #200f04;
    --choco-milk: #3c1e0b;
    --choco-creamy: #552a0d;
    --choco-highlight: rgba(255, 235, 215, 0.45);
}

/* Cascada de Chocolate en el Borde Izquierdo */
.choco-waterfall-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 65px !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    overflow: visible !important;
    filter: drop-shadow(4px 4px 12px rgba(18, 8, 2, 0.75));
}

@media (max-width: 768px) {
    .choco-waterfall-container {
        width: 38px !important;
    }
}

/* Columna base del derretido continuo */
.choco-stream-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 100%;
    background: linear-gradient(90deg, #180b03 0%, #3a1c09 60%, #4a240c 90%, #200f04 100%);
    box-shadow: inset -2px 0 6px rgba(255, 255, 255, 0.25), inset 3px 0 8px rgba(0, 0, 0, 0.8);
    border-radius: 0 4px 4px 0;
}

@media (max-width: 768px) {
    .choco-stream-body {
        width: 14px;
    }
}

/* Efecto de escurrimiento líquido continuo con brillo */
.choco-stream-body::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 2px;
    width: 5px;
    height: 200%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--choco-highlight) 30%, 
        transparent 60%, 
        var(--choco-highlight) 85%, 
        transparent 100%);
    animation: chocoGlossFlow 4.5s linear infinite;
}

@keyframes chocoGlossFlow {
    0% { transform: translateY(0); }
    100% { transform: translateY(50%); }
}

/* Estructura común de las ondas y gotas derretidas */
.choco-drip {
    position: absolute;
    left: 0;
    background: linear-gradient(135deg, #48230c 0%, #291305 100%);
    border-radius: 0 0 26px 26px;
    box-shadow: inset -2px -4px 6px rgba(255, 255, 255, 0.3), 3px 6px 12px rgba(0,0,0,0.65);
    transform-origin: top center;
}

.choco-drip::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 25%;
    width: 50%;
    height: 45%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
}

/* Gota 1: Superior (Cerca de la cabecera) */
.choco-drip-1 {
    top: 0;
    width: 36px;
    height: 140px;
    animation: dripPulse1 6s ease-in-out infinite alternate;
}

/* Gota 2: Zona Media Alta */
.choco-drip-2 {
    top: 24%;
    width: 48px;
    height: 180px;
    animation: dripPulse2 7.5s ease-in-out infinite alternate;
}

/* Gota 3: Zona Central */
.choco-drip-3 {
    top: 50%;
    width: 40px;
    height: 160px;
    animation: dripPulse1 8s ease-in-out 1s infinite alternate;
}

/* Gota 4: Zona Inferior */
.choco-drip-4 {
    top: 75%;
    width: 44px;
    height: 150px;
    animation: dripPulse2 9s ease-in-out 0.5s infinite alternate;
}

@media (max-width: 768px) {
    .choco-drip-1 { width: 24px; height: 95px; }
    .choco-drip-2 { width: 30px; height: 120px; }
    .choco-drip-3 { width: 26px; height: 105px; }
    .choco-drip-4 { width: 28px; height: 100px; }
}

@keyframes dripPulse1 {
    0% { height: 120px; border-radius: 0 0 20px 20px; }
    50% { height: 175px; border-radius: 0 0 32px 32px; }
    100% { height: 140px; border-radius: 0 0 24px 24px; }
}

@keyframes dripPulse2 {
    0% { height: 140px; border-radius: 0 0 24px 24px; }
    50% { height: 210px; border-radius: 0 0 36px 36px; }
    100% { height: 165px; border-radius: 0 0 28px 28px; }
}

/* Gotas que caen goteando al vacío */
.choco-falling-tear {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 20px;
    background: radial-gradient(circle at 35% 30%, #5a2c0f 0%, #200f04 85%);
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    box-shadow: inset -1px -2px 3px rgba(255,255,255,0.45), 2px 4px 8px rgba(0,0,0,0.6);
    opacity: 0;
    will-change: transform, opacity;
}

@media (max-width: 768px) {
    .choco-falling-tear {
        left: 4px;
        width: 10px;
        height: 15px;
    }
}

.tear-1 {
    top: 175px;
    animation: dropFallPhysics 5.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

.tear-2 {
    top: 45%;
    animation: dropFallPhysics 7.2s 2.6s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

.tear-3 {
    top: 72%;
    animation: dropFallPhysics 6.5s 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

@keyframes dropFallPhysics {
    0% {
        transform: translateY(0) scale(0.6, 0.7);
        opacity: 0;
    }
    12% {
        transform: translateY(12px) scale(0.9, 1.2);
        opacity: 0.95;
    }
    40% {
        transform: translateY(160px) scale(0.85, 1.4);
        opacity: 0.9;
    }
    70% {
        transform: translateY(380px) scale(0.7, 1.6);
        opacity: 0.65;
    }
    90%, 100% {
        transform: translateY(580px) scale(0.4, 2);
        opacity: 0;
    }
}

/* Efectos de flotación suave en imágenes de Elementor */
.choco-floating {
    animation: chocoGentleFloat 4.8s ease-in-out infinite alternate !important;
}

.choco-floating-delayed {
    animation: chocoGentleFloat 5.8s ease-in-out 1.2s infinite alternate !important;
}

@keyframes chocoGentleFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(0.6deg); }
    100% { transform: translateY(2px) rotate(-0.4deg); }
}

/* Scroll reveal con aceleración GPU */
.choco-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.choco-reveal.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Ajuste Responsivo Movil: Margen de contenido para evitar traslape con la cascada */
@media (max-width: 768px) {
    body {
        padding-left: 28px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .choco-waterfall-container {
        width: 24px !important;
    }
    .choco-stream-body {
        width: 10px !important;
    }
    .choco-drip-1 { width: 18px !important; height: 80px !important; }
    .choco-drip-2 { width: 22px !important; height: 105px !important; }
    .choco-drip-3 { width: 19px !important; height: 90px !important; }
    .choco-drip-4 { width: 20px !important; height: 85px !important; }
    .choco-falling-tear {
        left: 2px !important;
        width: 7px !important;
        height: 11px !important;
    }
}

/* Margen Universal para Header, Navegación y Contenido */
header.header,
.elementor-location-header,
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-container,
.elementor-nav-menu--main {
    padding-left: 48px !important;
    box-sizing: border-box !important;
}

.elementor.elementor-11,
.elementor.elementor-83,
.elementor.elementor-123,
.elementor.elementor-176,
.elementor.elementor-179,
main,
#content,
.neve-main {
    padding-left: 48px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    header.header,
    .elementor-location-header,
    .elementor-location-header .e-con-inner,
    .elementor-location-header .elementor-container,
    .elementor-nav-menu--main,
    .elementor.elementor-11,
    .elementor.elementor-83,
    .elementor.elementor-123,
    .elementor.elementor-176,
    .elementor.elementor-179,
    main,
    #content,
    .neve-main {
        padding-left: 32px !important;
    }
    .elementor-menu-toggle {
        margin-left: 8px !important;
    }
    .elementor-nav-menu--dropdown {
        left: 32px !important;
        width: calc(100% - 32px) !important;
    }
}