/*
Theme Name: Five2one
Theme URI: https://five2oneestate.com/
Description: Child Theme personalizado
Author: Select Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: hiroshi
Template: hiroshi
*/


/*======================================
=            CONTENEDOR
======================================*/

.five2one-whatsapp-wrapper{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:999999;
    display:flex;
    align-items:center;
    gap:12px;
}


/*======================================
=            BOTÓN
======================================*/

.five2one-whatsapp{

    position:relative;
    display:block;
    width:74px;
    height:74px;
    overflow:visible;      /* IMPORTANTE */
    transition:.30s ease;

}

.five2one-whatsapp:hover{

    transform:scale(1.08);

}


/* La imagen es la que se hace redonda */

.five2one-whatsapp img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
    box-shadow:0 10px 30px rgba(0,0,0,.18);

}


/*======================================
=            BOLITA
======================================*/

.five2one-whatsapp::after{

    content:"";
    position:absolute;
    top:-2px;
    right:-2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ef4444;
    border:1px solid #fff;
    z-index:100;
    transition:.3s;

}


/* Disponible */

.five2one-whatsapp.activo::after{

    background:#22c55e;
    animation:five2oneWhatsappPulse 1.8s infinite;

}


/*======================================
=            BOCADILLO
======================================*/

.five2one-whatsapp-message{

    position:relative;
    background:#fff;
    padding:12px 16px;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    min-width:190px;
    opacity:0;
    visibility:hidden;
    transform:translateX(10px);
    transition:.25s;
    pointer-events:none;

}

.five2one-whatsapp-message strong{

    display:block;
    font-size:15px;
    margin-bottom:2px;

}

.five2one-whatsapp-message span{

    display:block;
    font-size:13px;
    color:#666;

}


.five2one-whatsapp-message::after{

    content:"";

    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:8px solid #fff;

}


.five2one-whatsapp-wrapper:hover .five2one-whatsapp-message{

    opacity:1;
    visibility:visible;
    transform:translateX(0);

}


/*======================================
=            PULSO
======================================*/

@keyframes five2oneWhatsappPulse{

    0%{
        box-shadow:0 0 0 0 rgba(34,197,94,.7);
    }

    70%{
        box-shadow:0 0 0 10px rgba(34,197,94,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(34,197,94,0);
    }

}


/*======================================
=            TABLET
======================================*/

@media (max-width:1024px){

    .five2one-whatsapp-wrapper{

        right:20px;
        bottom:20px;

    }

    .five2one-whatsapp{

        width:68px;
        height:68px;

    }

}


/*======================================
=            MÓVIL
======================================*/

	
@media (max-width: 767px) {

    .five2one-whatsapp-wrapper{
        right: 16px;
        bottom: 16px;
    }

    .five2one-whatsapp{
        width: 56px !important;
        height: 56px !important;
    }

    .five2one-whatsapp-message{
        display: none;
    }
}



/* =========================================
   BOTONES MORPH - MENÚ / CERRAR
   ========================================= */

.morph-open,
.morph-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* =========================================
   ÁREA DEL ICONO
   ========================================= */

.morph-open .elementor-icon,
.morph-close .elementor-icon {
    width: 20px;
    height: 16px;
    position: relative;
    display: block;
    flex-shrink: 0;
}


/* OCULTAMOS LOS ICONOS ORIGINALES */
.morph-open .elementor-icon svg,
.morph-close .elementor-icon svg {
    display: none;
}


/* =========================================
   HAMBURGUESA
   ========================================= */

.morph-open .elementor-icon::before,
.morph-open .elementor-icon::after {
    content: "";
    position: absolute;
    left: 0;

    width: 20px;
    height: 1.2px;

    background: currentColor;

    transform-origin: center;

    transition:
        transform .45s cubic-bezier(.68,-.6,.32,1.6),
        top .45s cubic-bezier(.68,-.6,.32,1.6),
        opacity .2s ease;
}

.morph-open .elementor-icon::before {
    top: 2px;
}

.morph-open .elementor-icon::after {
    top: 13px;
}


/* LÍNEA CENTRAL */
.morph-open .elementor-icon {
    background:
        linear-gradient(
            currentColor,
            currentColor
        )
        left 7.5px / 20px 1.2px no-repeat;

    transition:
        transform .45s cubic-bezier(.68,-.6,.32,1.6),
        opacity .25s ease;
}


/* =========================================
   ICONO X
   ========================================= */

.morph-close .elementor-icon::before,
.morph-close .elementor-icon::after {
    content: "";
    position: absolute;

    left: 0;
    top: 7.5px;

    width: 20px;
    height: 1.2px;

    background: currentColor;

    transform-origin: center;

    transition:
        transform .45s cubic-bezier(.68,-.6,.32,1.6),
        opacity .25s ease;
}

.morph-close .elementor-icon::before {
    transform: rotate(45deg);
}

.morph-close .elementor-icon::after {
    transform: rotate(-45deg);
}


/* =========================================
   EFECTO HOVER
   ========================================= */

.morph-open:hover .elementor-icon {
    transform: scale(.92);
}

.morph-close:hover .elementor-icon {
    transform: rotate(90deg) scale(.92);
}


/* FONDO DIFUMINADO DETRÁS DEL OFF-CANVAS */
.e-off-canvas__overlay,
.elementor-off-canvas__overlay {
    background: rgba(0, 0, 0, 0.03) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ==================================================
   FIN EFECTO MORPH
   ================================================== */



/* ==================================================
   HEADER GLOBAL
   FIJO · SIN EFECTOS DE SCROLL
   ================================================== */

.header-global {
    width: 100% !important;
    z-index: 99999 !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    opacity: 1 !important;
    transform: none !important;

    pointer-events: auto !important;
    transition: none !important;
}


/* ==================================================
   ANULAMOS ANTIGUOS ESTADOS
   ================================================== */

.header-global.is-sticky,
.header-global.header-hidden,
.header-global.is-sticky.header-hidden,
.header-global.is-sticky:not(.header-hidden) {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}


/* ==================================================
   MENÚ VERTICAL
   FUERA DE HOME NUNCA SE VE
   ================================================== */

body:not(.home) .home-menu-vertical {
    display: none !important;
}


/* ==================================================
   HOME · ESCRITORIO
   ================================================== */

@media (min-width: 1025px) {

    /*
     * Evita que el cambio entre menús
     * mueva el contenido de la página
     */
    body.home .elementor-location-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }


    /* ------------------------------
       ANTES DE PASAR #principio
       ------------------------------ */

    body.home:not(.home-past-principio) .home-menu-vertical {
        display: flex !important;
    }

    body.home:not(.home-past-principio) .header-global {
        display: flex !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    /* ------------------------------
       DESPUÉS DE PASAR #principio
       ------------------------------ */

    body.home.home-past-principio .home-menu-vertical {
        display: none !important;
    }

    body.home.home-past-principio .header-global {
        display: flex !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

}


/* ==================================================
   TABLET + MÓVIL
   HEADER GLOBAL SIEMPRE FIJO
   ================================================== */

@media (max-width: 1024px) {

    .home-menu-vertical {
        display: none !important;
    }

    .header-global {
        display: flex !important;

        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        pointer-events: auto !important;
        transition: none !important;
    }

}

/* ==================================================
   AJUSTE BARRA DE ADMINISTRACIÓN WORDPRESS
   Solo afecta cuando estamos logueados
   ================================================== */

body.admin-bar .header-global {
    top: 32px !important;
}


/* WordPress aumenta la barra en pantallas pequeñas */
@media (max-width: 782px) {

    body.admin-bar .header-global {
        top: 46px !important;
    }

}

/* ==================================================
   ELIMINAR CONTENEDOR VACÍO DEL HEADER
   ================================================== */

.elementor-location-header .elementor-element-62f55bd {
    display: none !important;
}