/* ============================================================
   Milesman — Rediseño del header global
   Aislado en .et-l--header. No afecta al resto del sitio.
   v1.0.0 — 2026-05-08
   ============================================================ */

/* Cargar Raleway (peso 500/600) si el sitio aún no la tiene */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap');

/* ---------- Botón toggle de submenú: oculto por defecto, solo aparece en mobile ---------- */
.et-l--header .mm-toggle{
    display: none !important;
}

/* ---------- Wrapper del header — FIXED al top ---------- */
.et-l--header,
header.et-l.et-l--header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #fff !important;
    border-bottom: 1px solid #f2f2f2 !important;
    box-shadow: 0 1px 3px rgba(10,61,98,.04);
}
/* Ocultar cualquier sección/fila/divider extra del Theme Builder header
   (la banda azul con triángulo decorativo que aparecía debajo del logo). */
.et-l--header .et_pb_section:not(.et_pb_section_0_tb_header){
    display: none !important;
}
.et-l--header .et_pb_section_0_tb_header .et_pb_row:not(.et_pb_row_0_tb_header){
    display: none !important;
}
.et-l--header .et_pb_divider,
.et-l--header [class*="et_pb_divider_"]{
    display: none !important;
}
/* Ocultar cualquier overlay/decoración de fondo del section con triángulos o patrones */
.et-l--header .et_pb_section_0_tb_header > .et_pb_top_inside_divider,
.et-l--header .et_pb_section_0_tb_header > .et_pb_bottom_inside_divider{
    display: none !important;
}
.et-l--header .et_pb_section_0_tb_header,
.et-l--header .et_pb_section_0_tb_header.et_pb_section--fixed{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;            /* Anular translateX de Divi que rompe fixed en hijos */
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: #fff !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.et-l--header .et_pb_row_0_tb_header{
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    border-bottom: 0 !important;
    height: 64px;
}

/* Columnas: anular el grid 50/50 por defecto */
.et-l--header .et_pb_column_0_tb_header,
.et-l--header .et_pb_column_1_tb_header{
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.et-l--header .et_pb_column_1_tb_header{
    flex: 1 1 auto !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ---------- Logo ---------- */
.et-l--header .et_pb_image_0_tb_header,
.et-l--header .et_pb_image_0_tb_header .et_pb_image_wrap{
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.et-l--header .et_pb_image_0_tb_header img{
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

/* ---------- Menú ---------- */
.et-l--header #menuespecial,
.et-l--header .et_pb_menu_0_tb_header{
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 0 auto;
}
.et-l--header .et_pb_menu_0_tb_header .et_pb_menu_inner_container,
.et-l--header .et_pb_menu_0_tb_header .et_pb_menu__wrap,
.et-l--header .et_pb_menu_0_tb_header .et_pb_menu__menu{
    background: transparent !important;
    width: auto !important;
}

.et-l--header .et-menu-nav{
    float: none !important;
    text-align: right !important;
}
.et-l--header ul.et-menu.nav{
    display: flex !important;
    align-items: center;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    padding-bottom: 0 !important;
}
.et-l--header ul.et-menu.nav > li{
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
.et-l--header ul.et-menu.nav > li > a{
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .2px !important;
    color: #222 !important;
    text-decoration: none !important;
    text-transform: none !important;
    padding: 6px 0 !important;
    display: inline-block !important;
    position: relative;
    transition: color .25s ease;
    line-height: 1.2 !important;
}
.et-l--header ul.et-menu.nav > li > a::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: #0a3d62;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.et-l--header ul.et-menu.nav > li > a:hover{
    color: #0a3d62 !important;
}
.et-l--header ul.et-menu.nav > li > a:hover::after{
    transform: scaleX(1);
}
.et-l--header ul.et-menu.nav > li.current-menu-item > a,
.et-l--header ul.et-menu.nav > li.current_page_item > a{
    color: #0a3d62 !important;
}
.et-l--header ul.et-menu.nav > li.current-menu-item > a::after,
.et-l--header ul.et-menu.nav > li.current_page_item > a::after{
    transform: scaleX(1);
}

/* Indicador de submenú (chevron sutil) */
.et-l--header ul.et-menu.nav > li.menu-item-has-children > a{
    padding-right: 14px !important;
}
.et-l--header ul.et-menu.nav > li.menu-item-has-children > a::before{
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .55;
    transition: transform .25s ease, opacity .25s ease;
}
.et-l--header ul.et-menu.nav > li.menu-item-has-children:hover > a::before{
    transform: translateY(-30%) rotate(-135deg);
    opacity: 1;
}

/* ---------- Submenú ---------- */
.et-l--header ul.et-menu .sub-menu{
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(10,61,98,.08) !important;
    padding: 4px 0 !important;
    min-width: 200px !important;
    max-width: 400px !important;
    width: max-content !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-4px) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.et-l--header ul.et-menu li.menu-item-has-children:hover > .sub-menu{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important;
    display: block !important;
}
.et-l--header ul.et-menu .sub-menu li{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.et-l--header ul.et-menu .sub-menu a,
.et-l--header ul.et-menu .sub-menu li a,
.et-l--header ul.et-menu li:hover .sub-menu a,
.et-l--header ul.et-menu .menu-item-has-children:hover > .sub-menu a,
.et-l--header ul.et-menu .menu-item-has-children:hover > .sub-menu li > a{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-family: 'Raleway', 'Open Sans', Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #444 !important;
    background: transparent !important;
    opacity: 1 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.et-l--header ul.et-menu .sub-menu a:hover,
.et-l--header ul.et-menu .sub-menu li > a:hover,
.et-l--header ul.et-menu .menu-item-has-children:hover > .sub-menu li > a:hover{
    background: #e8eef3 !important;
    color: #0a3d62 !important;
    box-shadow: inset 3px 0 0 #0a3d62 !important;
}

/* ---------- Hamburguesa (oculta en desktop) ---------- */
.et-l--header .mm-hamburger{
    display: none;
    background: transparent;
    border: 0;
    width: 40px; height: 40px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin-left: 12px;
    flex-shrink: 0;
}
.et-l--header .mm-hamburger span{
    display: block;
    width: 22px; height: 2px;
    background: #222;
    border-radius: 2px;
    transition: transform .3s ease, opacity .25s ease;
}
.et-l--header.mm-open .mm-hamburger span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}
.et-l--header.mm-open .mm-hamburger span:nth-child(2){
    opacity: 0;
}
.et-l--header.mm-open .mm-hamburger span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

/* Ocultar la hamburguesa nativa de Divi (et_mobile_nav_menu) por si aparece */
.et-l--header .et_mobile_nav_menu{
    display: none !important;
}

/* ---------- Responsive: < 1100px ---------- */
@media (max-width: 1100px){
    /* Forzar layout del row: logo izquierda, hamburguesa derecha */
    .et-l--header .et_pb_section_0_tb_header .et_pb_row_0_tb_header,
    .et-l--header .et_pb_section--with-menu .et_pb_row_0_tb_header{
        padding: 0 16px !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
    /* Logo column a la izquierda */
    .et-l--header .et_pb_section_0_tb_header .et_pb_column_0_tb_header{
        margin-right: auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 60% !important;
    }
    /* Column del menú (donde vive la hamburguesa): solo ocupa el ancho de la hamburguesa */
    .et-l--header .et_pb_section_0_tb_header .et_pb_column_1_tb_header{
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }
    /* La hamburguesa siempre visible y a la derecha */
    .et-l--header .mm-hamburger{
        display: flex !important;
        order: 99 !important;
        margin-left: 8px !important;
    }
    /* Ocultar el menú horizontal y mostrarlo como dropdown FIXED full-width.
       Usamos #menuespecial en el selector para igualar specificity con la regla
       desktop `.et-l--header #menuespecial { background: transparent !important }`
       — sin el ID, esa regla ganaba y el dropdown salía transparente. */
    .et-l--header #menuespecial,
    .et-l--header .et_pb_menu_0_tb_header{
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        background: #fff !important;
        border-bottom: 1px solid #f2f2f2 !important;
        box-shadow: 0 8px 24px rgba(10,61,98,.06) !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height .35s cubic-bezier(.4,0,.2,1) !important;
        z-index: 9999 !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 0 !important;
    }
    .et-l--header.mm-open #menuespecial,
    .et-l--header.mm-open .et_pb_menu_0_tb_header{
        max-height: calc(100vh - 64px) !important;
        overflow-y: auto !important;
    }
    /* Ajuste cuando hay barra de admin de WP */
    body.logged-in.admin-bar .et-l--header #menuespecial,
    body.logged-in.admin-bar .et-l--header .et_pb_menu_0_tb_header{
        top: 96px !important;
    }
    @media (max-width: 782px){
        body.logged-in.admin-bar .et-l--header #menuespecial,
        body.logged-in.admin-bar .et-l--header .et_pb_menu_0_tb_header{
            top: 110px !important;
        }
    }
    /* Forzar la cadena entera del menú a layout block (rompe el flex row de Divi) */
    .et-l--header .et_pb_menu_0_tb_header .et_pb_menu_inner_container,
    .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__wrap,
    .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__menu,
    .et-l--header .et_pb_menu_0_tb_header .et-menu-nav{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        text-align: left !important;
        flex: none !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* El menú nativo móvil de Divi siempre oculto */
    .et-l--header .et_pb_menu_0_tb_header .et_mobile_nav_menu,
    .et-l--header .et_pb_menu_0_tb_header .mobile_nav{
        display: none !important;
    }
    /* Lista principal: vertical apilada */
    .et-l--header ul.et-menu.nav,
    .et-l--header ul#menu-entrada{
        display: block !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .et-l--header ul.et-menu.nav > li,
    .et-l--header ul#menu-entrada > li{
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f4f4f4 !important;
        position: relative;
    }
    .et-l--header ul.et-menu.nav > li:last-child{
        border-bottom: 0 !important;
    }
    .et-l--header ul.et-menu.nav > li > a{
        display: block !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        white-space: normal !important;
    }
    .et-l--header ul.et-menu.nav > li > a::after{
        display: none !important;
    }
    .et-l--header ul.et-menu.nav > li.menu-item-has-children > a{
        padding-right: 56px !important;
    }
    /* Ocultar la flecha nativa de Divi en móvil — usamos nuestro botón .mm-toggle */
    .et-l--header ul.et-menu.nav > li.menu-item-has-children > a::before,
    .et-l--header ul.et-menu.nav > li.menu-item-has-children > a::after{
        display: none !important;
    }
    /* Botón toggle de submenú en móvil */
    .et-l--header ul.et-menu.nav > li.menu-item-has-children > .mm-toggle{
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 56px !important;
        height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        color: #0a3d62 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform .2s ease, background .2s ease !important;
        z-index: 2 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(10,61,98,.15) !important;
    }
    .et-l--header ul.et-menu.nav > li.menu-item-has-children > .mm-toggle:hover{
        background: #f4f7fa !important;
    }
    /* Chevron hecho con borders (no SVG, evita problemas de hit-test en touch) */
    .et-l--header ul.et-menu.nav > li.menu-item-has-children > .mm-toggle .mm-chev{
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(45deg) translate(-2px, -2px) !important;
        transition: transform .25s ease !important;
        pointer-events: none !important;
    }
    .et-l--header ul.et-menu.nav > li.menu-item-has-children.mm-sub-open > .mm-toggle .mm-chev{
        transform: rotate(-135deg) translate(-2px, -2px) !important;
    }
    /* Submenús en móvil: PLEGADOS por defecto, abiertos solo si li tiene .mm-sub-open */
    .et-l--header ul.et-menu .sub-menu,
    .et-l--header ul.et-menu li:hover > .sub-menu,
    .et-l--header ul.et-menu li.menu-item-has-children:hover > .sub-menu{
        position: static !important;
        transform: none !important;
        background: #fafbfc !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: block !important;
        transition: max-height .3s ease, opacity .25s ease, visibility .25s ease !important;
    }
    .et-l--header ul.et-menu li.menu-item-has-children.mm-sub-open > .sub-menu{
        max-height: 800px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .et-l--header ul.et-menu .sub-menu li{
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
    .et-l--header ul.et-menu .sub-menu a,
    .et-l--header ul.et-menu .sub-menu li > a,
    .et-l--header ul.et-menu .menu-item-has-children:hover > .sub-menu a,
    .et-l--header ul.et-menu .menu-item-has-children:hover > .sub-menu li > a,
    .et-l--header ul.et-menu li:hover .sub-menu a,
    .et-l--header ul.et-menu li:hover .sub-menu li > a{
        display: block !important;
        padding: 10px 40px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        white-space: normal !important;
        color: #444 !important;
        background: transparent !important;
        opacity: 1 !important;
    }
    .et-l--header ul.et-menu .sub-menu a:hover,
    .et-l--header ul.et-menu .sub-menu li > a:hover,
    .et-l--header ul.et-menu li.mm-sub-open > .sub-menu li > a:active{
        color: #0a3d62 !important;
        background: #e8eef3 !important;
        box-shadow: inset 3px 0 0 #0a3d62 !important;
    }
}

/* ---------- Compensar el header fixed: empujar el contenido 64px ----------
   Solo en páginas que usan el header del Theme Builder (Divi añade .et-tb-has-header).
   Excluye páginas con plantilla en blanco (/alquiler-compact/, /bio/, etc.). */
body.et-tb-has-header #main-content{
    padding-top: 64px !important;
}
body.et-tb-has-header #page-container,
body.et-tb-has-header #et-main-area,
body.et-tb-has-header{
    padding-top: 0 !important;
}
/* Anular el inline `overflow-y: hidden` y altura fija que algunos scripts de Divi
   aplican al #page-container en mobile — rompen el flujo y desplazan el contenido. */
body.et-tb-has-header #page-container{
    overflow: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ---------- Ajuste para barra de admin de WP ---------- */
body.logged-in.admin-bar .et-l--header,
body.logged-in.admin-bar header.et-l.et-l--header{
    top: 32px !important;
}
@media (max-width: 782px){
    body.logged-in.admin-bar .et-l--header,
    body.logged-in.admin-bar header.et-l.et-l--header{
        top: 46px !important;
    }
}

/* ---------- /laser-azul-blauman-resultados/ (page 10913): solo HEADER ----------
   Anton pidió únicamente el header global en esta landing orgánica.
   La plantilla "default" trae también el footer del Theme Builder; lo ocultamos
   solo en esta página (la landing cierra con su propia sección de contacto navy).
   Scope estricto por body.page-id-10913 → no afecta al resto del sitio. */
body.page-id-10913 .et-l--footer,
body.page-id-10913 #main-footer,
body.page-id-10913 #footer-bottom{
    display: none !important;
}


/* ---------- /laser-azul-blauman-resultados/ (page 10913): ancho completo ----------
   La fila Divi que envuelve el HTML de la landing lleva width:100% en el shortcode,
   pero al editar la pagina por REST la CSS estatica de Divi no se regenero y la fila
   cae al ancho por defecto (~1080px), dejando blanco a los lados en pantallas anchas.
   Forzamos full-bleed en la seccion de contenido (hero/galeria/resenas); el contenido
   sigue centrado por su propio .wrap (max 1200px). La seccion de contacto navy
   (#bmr-contacto) se excluye para conservar su ancho contenido. Scope: page-id-10913. */
body.page-id-10913 .et_pb_section:not(#bmr-contacto) > .et_pb_row{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.page-id-10913 .et_pb_section:not(#bmr-contacto) > .et_pb_row > .et_pb_column{
    padding-left: 0 !important;
    padding-right: 0 !important;
}