/*
Theme Name: Petty Child / Custom Fixes
Version: 3.0.0
*/

/* ==========================================================
   1. HEADER FIJO Y SOLIDO (MENU FIJO EN SCROLL - NO TRANSPARENTE)
   ========================================================== */

#header-wrapper {
    position: relative !important;
    z-index: 999990 !important;
}

/* La cabecera completa permanece fija en el tope */
header#header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Barra superior vinotinto de contacto */
header#header .elementor-element-4c193ea {
    display: block !important;
    position: relative !important;
    background-color: #80283E !important;
    z-index: 20 !important;
}

/* Barra del menú rosada fija */
header#header .elementor-element-59bd77e,
.elementor-element.elementor-element-59bd77e {
    position: relative !important;
    background-color: #FFBCC6 !important;
    z-index: 10 !important;
    width: 100% !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

/* Cuando se hace scroll: fondo frambuesa sólido elegante */
body.header-scrolled header#header .elementor-element-59bd77e,
body.header-scrolled .elementor-element.elementor-element-59bd77e,
.elementor-element-59bd77e.elementor-sticky--effects,
.elementor-element-59bd77e.is-sticky {
    background-color: #A03D58 !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.25) !important;
}

/* Enlaces del menú y textos: BLANCOS SIEMPRE */
header#header .wdt-primary-nav li a,
header#header .wdt-header-menu .menu-item a,
header#header .wdt-primary-nav > li > a,
.elementor-element-59bd77e .wdt-primary-nav li a,
.elementor-element-59bd77e a.item-link {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

header#header .wdt-primary-nav li.current-menu-item > a,
header#header .wdt-primary-nav li a:hover {
    color: #80283E !important;
}

/* Redes sociales en blanco */
header#header .elementor-social-icon i,
header#header .elementor-social-icon svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Botón de Adoptar blanco con texto vinotinto */
header#header .wdt-header-menu-btn .wdt-button-link,
header#header .elementor-button {
    background-color: #FFFFFF !important;
    color: #80283E !important;
    border-radius: 25px !important;
    font-weight: bold !important;
}

.wdt-mobile-nav-wrapper a {
    color: #FFFFFF !important;
}

/* Espaciado del contenido para que el menú fijo no tape nada */
body:not(.elementor-editor-active) #main {
    padding-top: 140px !important;
}

/* Anular márgenes negativos en Home 2 */
.elementor-728 .elementor-element.elementor-element-1a86d27 {
    margin-top: 0px !important;
    padding-top: 20px !important;
}
.elementor-728 .elementor-element.elementor-element-f1c3023 {
    margin-top: 0px !important;
}

/* ==========================================================
   2. INSIGNIA ROTATORIA CON TEXTO UNETE / SALVANDO VIDAS
   ========================================================== */

.wdt-custom-slider-rotate-widget .wdt-rotate-image img,
.wdt-rotate-image-container .wdt-rotate-image img {
    content: url('https://dejandohuellacol.pet/wp-content/uploads/2026/10/badge_unete.svg') !important;
    width: 175px !important;
    height: 175px !important;
    max-width: 175px !important;
    display: block !important;
}

.wdt-custom-slider-rotate-widget .wdt-rotate-second-image,
.wdt-rotate-image-container .wdt-rotate-second-image {
    display: none !important;
}

@keyframes spinBadgeContinuous {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wdt-custom-slider-rotate-widget .wdt-rotate-image,
.wdt-rotate-image-container .wdt-rotate-image {
    animation: spinBadgeContinuous 18s linear infinite !important;
    transform-origin: center center !important;
    display: inline-block !important;
}

/* ==========================================================
   3. HERO SLIDER: DESLIZAMIENTO AUTOMATICO CONTINUO SIN BOTONES
   ========================================================== */

/* Asegurar que el carrusel se muestre y fluya con naturalidad */
.wdt-custom-slider-4-advanced,
.wdt-custom-slider-4-advanced > .elementor-widget-container,
.wdt-custom-slider-4-advanced .wdt-advanced-carousel-holder,
.wdt-custom-slider-4-advanced-swiper-none,
.wdt-custom-slider-4-advanced-wrapper-none {
    overflow: visible !important;
}

.wdt-custom-slider-4-advanced .swiper-slide {
    touch-action: pan-y pinch-zoom !important;
}

/* Quitar completamente los botones de flechas y paginación en todas las pantallas */
.wdt-custom-slider-4-advanced .wdt-carousel-pagination-wrapper,
.wdt-custom-slider-4-advanced .wdt-carousel-arrow-pagination,
.wdt-custom-slider-4-advanced .wdt-swiper-pagination,
.wdt-swiper-pagination-b1d8b91,
.wdt-arrow-pagination-prev-b1d8b91,
.wdt-arrow-pagination-next-b1d8b91 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   4. RESPONSIVE MOVIL (<= 767px)
   ========================================================== */
@media (max-width: 767px) {
    header#header .elementor-element-4c193ea {
        display: none !important;
    }

    body:not(.elementor-editor-active) #main {
        padding-top: 85px !important;
    }

    #header .wdt-header-tpl .sticky-header-active {
        display: block !important;
    }

    .wdt-custom-home3-banner-bg-mask:after {
        display: none !important;
    }

    .elementor-728 .elementor-element.elementor-element-170447b {
        margin-top: 25px !important;
        padding-top: 30px !important;
        clear: both !important;
    }

    .elementor-element.elementor-element-b18d12f,
    .elementor-element.elementor-element-6883a8b,
    .elementor-element.elementor-element-ff24724 {
        display: none !important;
    }

    /* Insignia en móvil: limpia, centrada y sin estorbos */
    .wdt-custom-slider-rotate-widget {
        display: block !important;
        margin: 25px auto 10px auto !important;
        text-align: center !important;
        position: relative !important;
        top: 0 !important;
        z-index: 5 !important;
    }

    .wdt-custom-slider-rotate-widget .wdt-rotate-image img {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto !important;
    }

    .wdt-custom-slider-4-advanced > .elementor-widget-container {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .elementor-763 .elementor-element.elementor-element-207c3d9,
    .elementor-1082 .elementor-element.elementor-element-207c3d9,
    .elementor-1083 .elementor-element.elementor-element-207c3d9 {
        padding-bottom: 20px !important;
    }

    .elementor-763 .elementor-element.elementor-element-0160f3e > .elementor-widget-container {
        margin: 0 0 10px 0 !important;
        text-align: center !important;
    }

    .elementor-763 .elementor-element.elementor-element-ec6ee93 {
        padding: 0 0 10px 0 !important;
        text-align: center !important;
    }
}

/* ==========================================================
   CURSOR ANIMADO ELEGANTE (CIRCULO SUAVE + PUNTO ROSA/FRAMBUESA)
   ========================================================== */

/* Solo para pantallas con mouse (PC / Laptop) */
@media (pointer: fine) {
    /* Desactivar el cursor del tema para que no duplique */
    .wdt-cursor-wrapper,
    .wdt-cursor-pointer,
    .wdt-cursor-follower {
        display: none !important;
    }

    #custom-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background-color: #A03D58;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999999;
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    }

    #custom-cursor-circle {
        position: fixed;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        border: 2px solid #FF8F9C;
        background: rgba(255, 188, 198, 0.18);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999998;
        transform: translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    background-color 0.3s ease, 
                    border-color 0.3s ease,
                    transform 0.15s ease;
    }

    /* Efecto al pasar por enlaces, botones o tarjetas */
    body.cursor-hover #custom-cursor-circle {
        width: 58px;
        height: 58px;
        border-color: #A03D58;
        background: rgba(160, 61, 88, 0.18);
        backdrop-filter: blur(1px);
        transform: translate(-50%, -50%) scale(1.08);
    }

    body.cursor-hover #custom-cursor-dot {
        width: 10px;
        height: 10px;
        background-color: #FF4081;
    }
}