/* ========================================
   CABECERA TRANSPARENTE SOBRE EL CONTENIDO
   ======================================== */

#site-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    box-sizing: border-box;
}

/* Contenido de la cabecera */
#site-header .header-inner {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 16px 0 !important;
    box-sizing: border-box;
}

/* Color del menú */
#site-header .site-navigation a {
    color: #ffffff !important;
}

/* Hover y página activa */
#site-header .site-navigation a:hover,
#site-header .site-navigation .current-menu-item > a,
#site-header .site-navigation .current_page_item > a {
    color: #dfc7af !important;
}

/* Logo */
#site-header .custom-logo {
    width: 180px;
    height: auto;
}

/* Desactivar clic del logo */
#site-header .custom-logo-link {
    pointer-events: none;
    cursor: default;
}

/* Hover y página activa */
#site-header .site-navigation a:hover,
#site-header .site-navigation .current-menu-item > a,
#site-header .site-navigation .current_page_item > a {
    color: #dfc7af !important;
}

/* ========================================
   SEPARACIÓN BOTONES DEL MENÚ
   ======================================== */

#site-header .site-navigation > ul {
    display: flex;
    gap: 20px;
}

/* ========================================
   TEXTO DEL MENÚ EN MAYÚSCULAS
   ======================================== */

#site-header .site-navigation a {
    text-transform: uppercase;
font-size: 12px;
}

/* ========================================
   CABECERA STICKY
   ======================================== */

#site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 9999;
    transition: background-color 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

/* Estado inicial */
#site-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

/* Estado después de hacer scroll */
#site-header.scrolled {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dddddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ========================================
   COLORES DEL MENÚ
   ======================================== */

/* Cabecera transparente */
#site-header .site-navigation a {
    color: #ffffff !important;
}

/* Página activa - cabecera transparente */
#site-header .site-navigation .current-menu-item > a,
#site-header .site-navigation .current_page_item > a {
    color: #dfc7af !important;
}

/* Hover - cabecera transparente */
#site-header .site-navigation a:hover {
    color: #dfc7af !important;
}


/* ========================================
   CABECERA DESPUÉS DEL SCROLL
   ======================================== */

/* Menú normal */
#site-header.scrolled .site-navigation a {
    color: #333333 !important;
}

/* Página activa */
#site-header.scrolled .site-navigation .current-menu-item > a,
#site-header.scrolled .site-navigation .current_page_item > a {
    color: #801831 !important;
}

/* Hover */
#site-header.scrolled .site-navigation a:hover {
    color: #801831 !important;
}

/* ========================================
   CAMBIO DE LOGO AL HACER SCROLL
   ======================================== */

#site-header .site-branding {
    position: relative;
}

/* Logo de color */
#site-header .site-branding::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://abellanbarista.com/wp-content/uploads/2026/08/LogotipoPNG.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Al hacer scroll */
#site-header.scrolled .site-branding::after {
    opacity: 1 !important;
}

/* Ocultar logo original al hacer scroll */
#site-header.scrolled .site-branding .custom-logo {
    opacity: 0 !important;
}

/* Transición del logo original */
#site-header .site-branding .custom-logo {
    transition: opacity 0.3s ease;
}


/* ========================================
   BOTONES
   ======================================== */



.e-bb741d0-3181736 {
    transition: all 0.3s ease;
}

.e-bb741d0-3181736:hover {
    background-color: transparent !important;
border: 1px solid white !important;
}

.e-bb741d0-3181736:hover,
.e-bb741d0-3181736:hover * {
    color: #white !important;
}



.e-54f4255-5adfc1b {
    transition: all 0.3s ease;
}



.e-6a52c4e-a1d3f35 {
    transition: all 0.3s ease;
}

.e-6a52c4e-a1d3f35:hover {
    background-color: transparent !important;
color: #ffffff !important;
border: 1px solid #ffffff !important;
}

.e-6a52c4e-a1d3f35:hover,
.e-6a52c4e-a1d3f35:hover * {
    color: #ffffff !important;
}


.e-93cf3fa-28afa53 {
    transition: all 0.3s ease;
}

.e-93cf3fa-28afa53:hover {
    background-color: transparent !important;
color: #ffffff !important;
border: 1px solid #ffffff !important;
}

.e-93cf3fa-28afa53:hover,
.e-93cf3fa-28afa53:hover * {
    color: #ffffff !important;
}


.e-a78e428-80c973a {
    transition: all 0.3s ease;
}

.e-a78e428-80c973a:hover {
    background-color: transparent !important;
color: #ffffff !important;
border: 1px solid #ffffff !important;
}

.e-a78e428-80c973a:hover,
.e-a78e428-80c973a:hover * {
    color: #ffffff !important;
}








.e-82e59f1-bbbb72d {
    transition: all 0.3s ease;
}
.e-82e59f1-bbbb72d:hover {
    background-color: #801831 !important;
}

.e-82e59f1-bbbb72d:hover,
.e-82e59f1-bbbb72d:hover * {
    color: white !important;
}


.e-2933ed7-15c82b7 {
    transition: all 0.3s ease;
}
.e-2933ed7-15c82b7:hover {
    background-color: #801831 !important;
}

.e-2933ed7-15c82b7:hover,
.e-2933ed7-15c82b7:hover * {
    color: white !important;
}


.e-a58dbf8-60efbfc {
    transition: all 0.3s ease;
}
.e-a58dbf8-60efbfc:hover {
    background-color: #801831 !important;
}

.e-a58dbf8-60efbfc:hover,
.e-a58dbf8-60efbfc:hover * {
    color: white !important;
}


.e-e137c6d-e846a8d {
    transition: all 0.3s ease;
}
.e-e137c6d-e846a8d:hover {
    background-color: #801831 !important;
}

.e-e137c6d-e846a8d:hover,
.e-e137c6d-e846a8d:hover * {
    color: white !important;
}


.e-b4b6a2b-d5b9a01 {
    transition: all 0.3s ease;
}
.e-b4b6a2b-d5b9a01:hover {
    background-color: #801831 !important;
}

.e-b4b6a2b-d5b9a01:hover,
.e-b4b6a2b-d5b9a01:hover * {
    color: white !important;
}



.e-d76cac7-b660325 {
    transition: all 0.3s ease;
}
.e-d76cac7-b660325:hover {
    background-color: #801831 !important;
}

.e-d76cac7-b660325:hover,
.e-d76cac7-b660325:hover * {
    color: white !important;
}



.e-c9fdb5e-70b43d0 {
    transition: all 0.3s ease;
}
.e-c9fdb5e-70b43d0:hover {
    background-color: #801831 !important;
}

.e-c9fdb5e-70b43d0:hover,
.e-c9fdb5e-70b43d0:hover * {
    color: white !important;
}



.e-a319f39-c1c7e79 {
    transition: all 0.3s ease;
}
.e-a319f39-c1c7e79:hover {
    background-color: #801831 !important;
}

.e-a319f39-c1c7e79:hover,
.e-a319f39-c1c7e79:hover * {
    color: white !important;
}



.e-f9beee0-30dccd5 {
    transition: all 0.3s ease;
}
.e-f9beee0-30dccd5:hover {
    background-color: #801831 !important;
}

.e-f9beee0-30dccd5:hover,
.e-f9beee0-30dccd5:hover * {
    color: white !important;
}



.e-92512cc-b374a5c {
    transition: all 0.3s ease;
}
.e-92512cc-b374a5c:hover {
    background-color: #801831 !important;
}

.e-92512cc-b374a5c:hover,
.e-92512cc-b374a5c:hover * {
    color: white !important;
}




.e-ce720db-4aed548 {
    transition: all 0.3s ease;
}
.e-ce720db-4aed548:hover {
    background-color: #801831 !important;
}

.e-ce720db-4aed548:hover,
.e-ce720db-4aed548:hover * {
    color: white !important;
}



.e-6041182-48b022e {
    transition: all 0.3s ease;
}
.e-6041182-48b022e:hover {
    background-color: #801831 !important;
}

.e-6041182-48b022e:hover,
.e-6041182-48b022e:hover * {
    color: white !important;
}










.e-54f4255-5adfc1b:hover {
    background-color: transparent !important;
color: #00000 !important;
border: 1px solid black !important;
}

.e-54f4255-5adfc1b:hover,
.e-54f4255-5adfc1b:hover * {
    color: #000000 !important;
}



.e-8cc2d0f-2eba4b7:hover {
    background-color: transparent !important;
color: #00000 !important;
border: 1px solid black !important;
}

.e-8cc2d0f-2eba4b7:hover,
.e-8cc2d0f-2eba4b7:hover * {
    color: #000000 !important;
}



.e-88db3e5-263e32d:hover {
    background-color: transparent !important;
color: #00000 !important;
border: 1px solid black !important;
}

.e-88db3e5-263e32d:hover,
.e-88db3e5-263e32d:hover * {
    color: #000000 !important;
}



.e-12de35c-bce7eed:hover {
    background-color: transparent !important;
color: #00000 !important;
border: 1px solid black !important;
}

.e-12de35c-bce7eed:hover,
.e-12de35c-bce7eed:hover * {
    color: #000000 !important;
}




.e-13bacae-66d66cc:hover {
    background-color: transparent !important;
color: #00000 !important;
border: 1px solid black !important;
}

.e-13bacae-66d66cc:hover,
.e-13bacae-66d66cc:hover * {
    color: #000000 !important;
}




.e-622b552-4182196:hover {
    background-color: transparent !important;
color: #00000 !important;
border: 1px solid black !important;
}

.e-622b552-4182196:hover,
.e-622b552-4182196:hover * {
    color: #000000 !important;
}



/* ========================================
   HOVER SUAVE
   ======================================== */

/* Transición - elementos con icono */
.e-934038a-eef157d,
.e-934038a-eef157d *,
.e-3726cea-2c676e9,
.e-3726cea-2c676e9 *,
.e-c8a69d2-96dd65d,
.e-c8a69d2-96dd65d * {
    transition: color 0.3s ease, fill 0.3s ease;
}

/* Hover - texto + icono */
.e-934038a-eef157d:hover,
.e-934038a-eef157d:hover *,
.e-3726cea-2c676e9:hover,
.e-3726cea-2c676e9:hover *,
.e-c8a69d2-96dd65d:hover,
.e-c8a69d2-96dd65d:hover * {
    color: #801831 !important;
}

/* Iconos */
.e-934038a-eef157d:hover svg,
.e-934038a-eef157d:hover svg path,
.e-3726cea-2c676e9:hover svg,
.e-3726cea-2c676e9:hover svg path,
.e-c8a69d2-96dd65d:hover svg,
.e-c8a69d2-96dd65d:hover svg path {
    fill: #801831 !important;
}


/* ========================================
   BOTONES SIN ICONO
   ======================================== */

/* Transición */
.e-911a8d9-4f18cbf,
.e-6d14bc6-1aabe04,
.e-b1d3485-fd212e2 {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover */
.e-911a8d9-4f18cbf:hover,
.e-911a8d9-4f18cbf:hover *,
.e-6d14bc6-1aabe04:hover,
.e-6d14bc6-1aabe04:hover *,
.e-b1d3485-fd212e2:hover,
.e-b1d3485-fd212e2:hover * {
    color: #801831 !important;
}

/* ========================================
   FORMULARIO DE CONTACTO - FLUENT FORMS #3
   ======================================== */

/* CAMPOS */

#fluentform_3 .ff-el-form-control {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px 0 !important;
    width: 100% !important;
}

/* AL HACER CLICK EN EL CAMPO */

#fluentform_3 .ff-el-form-control:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* TRANSICIÓN */

#fluentform_3 .ff-el-form-control {
    transition: border-color 0.3s ease !important;
}

/* TEXTAREA */

#fluentform_3 textarea.ff-el-form-control {
    resize: vertical;
}

/* ========================================
   BOTÓN FORMULARIO - HOVER
   ======================================== */

#fluentform_3 .ff-btn-submit {
    transition: all 0.3s ease !important;
}

#fluentform_3 .ff-btn-submit:hover {
    background-color: #801831 !important;
    background-image: none !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border-color: #801831 !important;
    box-shadow: none !important;
}

/* Espacio entre el título y la checklist */
#fluentform_3 .ff-el-input--label + .ff-el-input--content {
    margin-top: 25px !important;
}

.ff-message-success {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
}





#boton-sticky {
    position: fixed !important;
    right: -15px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 999999 !important;
}

#boton-sticky {
    transition: transform 0.3s ease-in-out !important;
}

#boton-sticky:hover {
    transform: translateY(-50%) scale(1.05) !important;
}

/* Oculto inicialmente */
#boton-sticky {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Visible después del Hero */
#boton-sticky.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


html {
    scroll-behavior: smooth;
}

#formulario {
    scroll-margin-top: 100px;
}

/* =========================================================
   FOOTER - HOVER
   ========================================================= */

#footer-abellan a,
#footer-abellan a * {
    transition: color 0.35s ease, fill 0.35s ease !important;
}

#footer-abellan a:hover,
#footer-abellan a:hover * {
    color: #801831 !important;
}

#footer-abellan a:hover svg,
#footer-abellan a:hover svg path {
    fill: #801831 !important;
}

/* =========================================================
   PÁGINAS LEGALES - HEADER BLANCO
   ========================================================= */

body.page-id-1191 #site-header,
body.page-id-1179 #site-header,
body.page-id-1192 #site-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* MENÚ NEGRO */
body.page-id-1191 #site-header .site-navigation a,
body.page-id-1179 #site-header .site-navigation a,
body.page-id-1192 #site-header .site-navigation a {
    color: #000000 !important;
    transition: color 0.3s ease !important;
}

/* HOVER GRANATE */
body.page-id-1191 #site-header .site-navigation a:hover,
body.page-id-1179 #site-header .site-navigation a:hover,
body.page-id-1192 #site-header .site-navigation a:hover {
    color: #801831 !important;
}

/* PÁGINA ACTIVA GRANATE */
body.page-id-1191 #site-header .site-navigation .current-menu-item > a,
body.page-id-1179 #site-header .site-navigation .current-menu-item > a,
body.page-id-1192 #site-header .site-navigation .current-menu-item > a,
body.page-id-1191 #site-header .site-navigation .current_page_item > a,
body.page-id-1179 #site-header .site-navigation .current_page_item > a,
body.page-id-1192 #site-header .site-navigation .current_page_item > a {
    color: #801831 !important;
}

/* LOGO NEGRO */
body.page-id-1191 #site-header .site-branding .custom-logo,
body.page-id-1179 #site-header .site-branding .custom-logo,
body.page-id-1192 #site-header .site-branding .custom-logo {
    opacity: 0 !important;
}

body.page-id-1191 #site-header .site-branding::after,
body.page-id-1179 #site-header .site-branding::after,
body.page-id-1192 #site-header .site-branding::after {
    opacity: 1 !important;
}

/* =========================================================
   LOGOTIPO NEGRO
   ========================================================= */

body.pagina-legal #site-header .site-branding .custom-logo {
    opacity: 0 !important;
}

body.pagina-legal #site-header .site-branding::after {
    opacity: 1 !important;
}

/* =========================================================
   HEADER - TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    #site-header .header-inner {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }

}


/* =========================================================
   BURGER - TABLET / MÓVIL
   ========================================================= */

@media (max-width: 1024px) {

    /* Botón totalmente transparente */
    #site-header .site-navigation-toggle-holder,
    #site-header .site-navigation-toggle {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* El span NO tiene fondo */
    #site-header .site-navigation-toggle-icon {
        position: relative !important;
        display: block !important;
        width: 20px !important;
        height: 16px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: transparent !important;
    }

    /* Creamos las 3 líneas */
    #site-header .site-navigation-toggle-icon::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        width: 20px !important;
        height: 2px !important;
        background: #ffffff !important;
        transform: translateY(-50%) !important;
        box-shadow:
            0 -7px 0 #ffffff,
            0 7px 0 #ffffff !important;
    }

    /* Eliminamos el pseudo-elemento original */
    #site-header .site-navigation-toggle-icon::after {
        display: none !important;
        content: none !important;
    }

    /* AL HACER SCROLL → las 3 negras */
    #site-header.scrolled .site-navigation-toggle-icon::before {
        background: #000000 !important;
        box-shadow:
            0 -7px 0 #000000,
            0 7px 0 #000000 !important;
    }

}

@media (max-width: 1024px) {
    #site-header .site-navigation-toggle-holder {
        position: absolute !important;
        right: 30px !important;
bottom: 9px !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 1024px) {

    /* Fondo blanco para todo el menú desplegado */
    #site-header .site-navigation-dropdown,
    #site-header .site-navigation-dropdown ul,
    #site-header .site-navigation-dropdown li,
    #site-header .site-navigation-dropdown a {
        background-color: #ffffff !important;
    }

    /* Texto de todos los botones */
    #site-header .site-navigation-dropdown a {
        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        color: #000000 !important;
    }

    /* Página seleccionada */
    #site-header .site-navigation-dropdown .current-menu-item > a,
    #site-header .site-navigation-dropdown .current_page_item > a {
        color: #C9A98A !important;
        background-color: #ffffff !important;
    }

}

/* BURGER NEGRO EN PÁGINAS LEGALES */
@media (max-width: 1024px) {

    body.page-id-1191 #site-header .site-navigation-toggle-icon::before,
    body.page-id-1179 #site-header .site-navigation-toggle-icon::before,
    body.page-id-1192 #site-header .site-navigation-toggle-icon::before {
        background: #000000 !important;
        box-shadow:
            0 -7px 0 #000000,
            0 7px 0 #000000 !important;
    }

}

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

@media (max-width: 767px) {

    /* Espaciado izquierdo del logo */
    #site-header .site-branding {
        margin-left: 50px !important;
    }

}

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

@media (max-width: 767px) {

    /* Espaciado izquierdo del logo */
    #site-header .site-branding {
        margin-left: 50px !important;
    }

    /* Tipografía del menú desplegable */
    #site-header .site-navigation-dropdown a {
        font-size: 12px !important;
    }

    /* Asegurar que los enlaces del menú reciben los clics */
    #site-header .site-navigation-dropdown {
        position: relative !important;
        z-index: 10000 !important;
    }

    #site-header .site-navigation-dropdown a {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }

}


@media (max-width: 767px) {

    /* Logo */
    #site-header .site-branding {
        margin-left: 50px !important;
        transform: translateY(5px) !important;
    }

    #site-header .site-branding .custom-logo {
        max-width: 80px !important;
    }

    

}

/* ================================
   COPYRIGHT FOOTER
   ================================ */

.e-32b0840-8901db9 {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: -50px !important;
}

.e-7b65a3b-4a3809c {
    margin: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}


/* =================================
   ORDEN IMAGEN / TEXTO
   TABLET Y MÓVIL
   ================================= */
 

@media (max-width: 1024px) {

    /* IMAGEN */
    [data-id="eaa0560"] {
        order: 1 !important;
    }

    /* FLEXBOX 3 — TEXTOS */
    [data-id="16c9337"] {
        order: 2 !important;
    }

}

@media (max-width: 1024px) {

    /* IMAGEN SIEMPRE ARRIBA */
    [data-id="4cb4eab"] {
        order: 1 !important;
    }

    /* TEXTO SIEMPRE DEBAJO */
    [data-id="ee7c7fe"] {
        order: 2 !important;
    }

}

@media (max-width: 1024px) {

    /* IMAGEN SIEMPRE ARRIBA */
    [data-id="89658c0"] {
        order: 1 !important;
    }

    /* TEXTO SIEMPRE DEBAJO */
    [data-id="30848a3"] {
        order: 2 !important;
    }

}

@media (max-width: 1024px) {

    /* IMAGEN SIEMPRE ARRIBA */
    [data-id="3573d60"] {
        order: 1 !important;
    }

    /* TEXTO SIEMPRE DEBAJO */
    [data-id="88590a9"] {
        order: 2 !important;
    }

}

@media (max-width: 1024px) {

    /* IMAGEN SIEMPRE ARRIBA */
    [data-id="e9e416a"] {
        order: 1 !important;
    }

    /* TEXTO SIEMPRE DEBAJO */
    [data-id="9c7147a"] {
        order: 2 !important;
    }

}  

/* ========================================
   MENÚ MÓVIL/TABLET EN MAYÚSCULAS
   ======================================== */

@media (max-width: 1024px) {
    #site-header .site-navigation-dropdown a,
    #site-header .site-navigation-dropdown li a,
    #site-header .site-navigation ul li a {
        text-transform: uppercase !important;
    }
}