/*
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;
    }
}


.wdt-popup-box-trigger-icon svg.e-fas-paw {
    width: 28px !important;
    height: 28px !important;
    fill: #222222 !important;
    transition: all 0.3s ease !important;
}
.wdt-popup-box-trigger-holder:hover .wdt-popup-box-trigger-icon svg.e-fas-paw {
    fill: #e91e63 !important;
    transform: scale(1.1) rotate(5deg) !important;
}


/* === MENU UNIFORME, LETRAS BLANCAS, SIN SUBRAYADOS Y CON ANIMACION ELEGANTE === */
.wdt-header-menu ul.wdt-primary-nav > li > a,
.wdt-header-menu ul.wdt-primary-nav > li > a > span,
.wdt-header-menu .menu-item > a,
.wdt-header-menu .menu-item > a > span {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: inline-block !important;
}

/* Quitar líneas, bordes, fondos o subrayados activos por defecto */
.wdt-header-menu ul.wdt-primary-nav > li::before,
.wdt-header-menu ul.wdt-primary-nav > li::after,
.wdt-header-menu ul.wdt-primary-nav > li > a::before,
.wdt-header-menu ul.wdt-primary-nav > li > a::after,
.wdt-header-menu ul.wdt-primary-nav > li.current-menu-item > a::before,
.wdt-header-menu ul.wdt-primary-nav > li.current-menu-item > a::after,
.wdt-header-menu ul.wdt-primary-nav > li.current_page_item > a::before,
.wdt-header-menu ul.wdt-primary-nav > li.current_page_item > a::after,
.wdt-header-menu ul.wdt-primary-nav > li > a > span::before,
.wdt-header-menu ul.wdt-primary-nav > li > a > span::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Animación bonita en hover: elevación suave, brillo y línea flotante luminosa */
.wdt-header-menu ul.wdt-primary-nav > li > a:hover {
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
}

/* Línea animada moderna central que se expande hacia los lados en hover */
.wdt-header-menu ul.wdt-primary-nav > li {
    position: relative;
}
.wdt-header-menu ul.wdt-primary-nav > li > a {
    padding-bottom: 6px !important;
}
.wdt-header-menu ul.wdt-primary-nav > li > a {
    border-bottom: 2px solid transparent !important;
}
.wdt-header-menu ul.wdt-primary-nav > li > a:hover {
    border-bottom: 2px solid rgba(255, 255, 255, 0.85) !important;
}

/* Iconos de la derecha en blanco parejo */
.wdt-header-icons-list-item i svg,
.wdt-header-icons-list-item a,
.wdt-popup-box-trigger-icon svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}
.wdt-header-icons-list-item a:hover svg,
.wdt-popup-box-trigger-holder:hover .wdt-popup-box-trigger-icon svg {
    fill: #ffebee !important;
    transform: scale(1.12) !important;
}


/* ==============================================================
   PERSONALIZACION MENU MOVIL - COLOR DEL LOGO (#e91e63 / #d81b60)
   SOLO VERSION MOVIL (max-width: 1024px)
   ============================================================== */
@media (max-width: 1024px) {
    /* Fondo de los botones / enlaces del menu movil */
    .mobile-menu ul li.menu-item > a,
    .mobile-menu ul li.menu-item > a:hover,
    .mobile-menu ul li.menu-item:hover > a,
    .mobile-menu ul li.current-menu-item > a,
    .mobile-menu ul li.current_page_item > a,
    .mobile-menu ul li.current-menu-ancestor > a,
    .mobile-menu ul li.current_page_ancestor > a,
    .mobile-menu ul li.current_menu_item > a,
    .mobile-menu ul li.current_page_item > a,
    .mobile-menu ul li ul li.current-menu-item > a,
    .mobile-menu ul li ul li.current-page-item > a,
    .mobile-menu ul li ul li.current_menu_item > a,
    .mobile-menu ul li ul li.current_page_item > a,
    .wdt-header-menu .mobile-menu ul li.menu-item > a,
    .wdt-header-menu .mobile-menu ul li.current-menu-item > a,
    .wdt-header-menu .mobile-menu ul li.current_page_item > a {
        background-color: #e91e63 !important;
        background: #e91e63 !important;
        color: #ffffff !important;
    }

    /* Fondo general del contenedor desplegable en blanco limpio */
    .mobile-menu,
    .mobile-menu > ul,
    .mobile-menu ul,
    .mobile-menu ul li ul {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    /* Boton hamburguesa / icono de apertura del menu movil */
    .mobile-nav-container .menu-trigger.menu-trigger-icon i,
    .mobile-nav-container .menu-trigger.menu-trigger-icon i:before,
    .mobile-nav-container .menu-trigger.menu-trigger-icon i:after {
        background-color: #e91e63 !important;
    }

    .mobile-nav-container .menu-trigger.menu-trigger-icon {
        border-color: #e91e63 !important;
    }

    .mobile-nav-container .menu-trigger {
        color: #e91e63 !important;
    }
}


/* ==========================================================================
   ELIMINAR DEFINITIVAMENTE LÍNEAS / SEPARADORES / BREADCRUMBS EN PÁGINAS INTERNAS
   ========================================================================== */
.main-title-section-wrapper,
.main-title-section-wrapper:before,
.main-title-section-wrapper:after,
#header-wrapper .main-title-section-wrapper,
#header-wrapper .main-title-section-wrapper:before,
#header-wrapper .main-title-section-wrapper:after,
.main-title-section-wrapper > .main-title-section-bg,
.main-title-section-wrapper > .main-title-section-bg:before,
.main-title-section-wrapper > .main-title-section-bg:after,
.main-title-section-container,
#header-wrapper:after,
#header-wrapper:before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header-wrapper {
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   ALINEACIÓN EXACTA EN UNA SOLA LÍNEA CON LOGO EN LA MITAD
   ========================================================================== */

/* 1. En Desktop y Laptops: Garantizar que la columna del menú ocupe el ancho adecuado y fluya en una sola línea */
@media (min-width: 1025px) {
    /* Forzar que el contenedor de widgets dentro de la columna 5ed7b47 sea flex en una sola línea */
    .elementor-element-5ed7b47 > .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* Ocultar el menú responsive móvil en desktop */
    .elementor-element-d8f93b9 {
        display: none !important;
    }

    /* Mostrar menú izquierdo, logo y menú derecho como elementos flex sin forzar wrap */
    .elementor-element-0589724,
    .elementor-element-bb1527a,
    .elementor-element-560471d {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Eliminar los paddings asimétricos que empujaban el menú a una segunda línea */
    .elementor-element-0589724 > .elementor-widget-container,
    .elementor-element-560471d > .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* El logo en el centro */
    .elementor-element-bb1527a {
        margin: 0 15px !important;
        padding: 0 !important;
    }
    .elementor-element-bb1527a div.wdt-logo-container img {
        max-width: 80px !important;
        width: 80px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Menús de navegación 100% en una sola fila continua */
    .wdt-header-menu,
    .wdt-header-menu .menu-container {
        display: flex !important;
        align-items: center !important;
    }

    .wdt-header-menu ul.wdt-primary-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    .wdt-header-menu ul.wdt-primary-nav > li {
        display: inline-block !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .wdt-header-menu ul.wdt-primary-nav > li > a {
        white-space: nowrap !important;
        padding: 6px 4px !important;
        font-size: 13.5px !important;
        letter-spacing: 0.5px !important;
    }

    /* Ajustar proporción de las columnas en la barra para que no se quiebre */
    .elementor-element-e41da68 > .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .elementor-element-5ed7b47 {
        flex: 1 1 auto !important;
        max-width: calc(100% - 140px) !important;
    }
    .elementor-element-3d4efd8 {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* 2. En Tablet y Mobile: Ocultar menús desktop divididos y mostrar únicamente el menú móvil */
@media (max-width: 1024px) {
    .elementor-element-0589724,
    .elementor-element-560471d {
        display: none !important;
    }
    .elementor-element-d8f93b9 {
        display: inline-block !important;
    }
    .mobile-nav-container {
        display: block !important;
    }
    .mobile-nav-container .menu-trigger.menu-trigger-icon i {
        background-color: #ffffff !important;
    }
    .mobile-nav-container .menu-trigger.menu-trigger-icon i:before,
    .mobile-nav-container .menu-trigger.menu-trigger-icon i:after {
        background-color: #ffffff !important;
    }
}