/* =====================================================================
   BeeWall · cabecera (Kadence) con la línea de diseño
   ---------------------------------------------------------------------
   Arriba: transparente, con el color del texto adaptado al fondo que hay
   debajo (html.bw-hdr-on-dark / html.bw-hdr-on-light, lo pone
   beewall-header.js). Al bajar: "isla" negra redondeada y flotante; se
   esconde al bajar y vuelve al subir. Logo + wordmark y botón "Hablamos".
   ===================================================================== */
:root { --bw-hdr-ink: #2c2c2c; --bw-hdr-accent: #FFCB05; --bw-hdr-cream: #FCF6E6; }
html.bw-hdr-on-dark { --bw-hdr-ink: #FCF6E6; }
/* El tema aplicaba mix-blend-mode: difference a la cabecera (amarillo → azul). Los colores ya se adaptan por JS. */
#masthead { mix-blend-mode: normal !important; isolation: isolate; }

/* Transparente en TODA la web (como en la home): la cabecera va sobre el contenido, sin franja de color */
#masthead { position: absolute !important; top: 0; left: 0; right: 0; z-index: 100; background: transparent !important; }
#masthead .site-header-upper-wrap, #masthead .site-main-header-wrap, #masthead .site-header-row-container-inner, #masthead .site-header-inner-wrap { background: transparent !important; box-shadow: none !important; }
body.admin-bar #masthead { top: 32px; }
/* Plantillas sin hero propio (entradas, listado del blog, búsqueda, 404): aire para que el título no quede bajo la cabecera */
body.single-post #inner-wrap > .entry-hero:first-child, body.blog #inner-wrap > .entry-hero:first-child, body.search #inner-wrap > .entry-hero:first-child,
body.archive:not(.post-type-archive-bw_proyecto):not(.tax-bw_servicio) #inner-wrap > .entry-hero:first-child { padding-top: 88px; background: var(--global-palette8, #FCF6E6); }
/* Si la plantilla no lleva hero de título, el aire va en el propio contenedor */
body.single-post #inner-wrap:not(:has(> .entry-hero)), body.blog #inner-wrap:not(:has(> .entry-hero)), body.search #inner-wrap:not(:has(> .entry-hero)), body.archive:not(.post-type-archive-bw_proyecto):not(.tax-bw_servicio) #inner-wrap:not(:has(> .entry-hero)) { padding-top: 88px; }

/* Marca: logo hexagonal + wordmark */
/* El enlace (40px) quedaba pegado arriba del bloque .site-branding (74px): centramos el bloque en flex */
#masthead .site-branding { display: flex !important; align-items: center; }
#masthead .site-branding .brand { display: inline-flex !important; align-items: center; align-self: center; gap: 10px; text-decoration: none !important; }
#masthead .site-branding .brand::before { content: ''; width: 40px; height: 40px; flex: none; background: url('https://beewall.es/wp-content/uploads/2024/08/cropped-LOGO_BEEWALL_DEF-1.png') center / contain no-repeat; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
#masthead .site-branding .brand:hover::before { transform: rotate(-12deg) scale(1.06); }
/* Primer pintado sin JS: el wordmark lo pone el CSS (::after); cuando el JS inserta .bw-wordmark, el ::after desaparece */
#masthead .site-branding .brand:not(:has(.bw-wordmark))::after { content: 'BeeWall'; }
#masthead .site-branding .brand .bw-wordmark, #masthead .site-branding .brand:not(:has(.bw-wordmark))::after { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -0.03em; color: var(--bw-hdr-ink); line-height: 1; transform: translateY(0.07em); /* ajuste óptico: la tinta de Poppins quedaba ~1.5px alta respecto al hexágono */ transition: color 0.3s ease; }

/* Navegación */
#masthead .header-navigation .menu { flex-wrap: nowrap; white-space: nowrap; }
#masthead .header-navigation .menu > li > a { font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: var(--bw-hdr-ink) !important; padding: 0.6em 0.7em !important; position: relative; transition: color 0.3s ease; }
#masthead .header-navigation .menu > li > a::after { content: ''; position: absolute; left: 0.7em; right: 0.7em; bottom: 0.25em; height: 2px; background: var(--bw-hdr-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
#masthead .header-navigation .menu > li > a:hover::after, #masthead .header-navigation .menu > li.current-menu-item > a::after { transform: scaleX(1); }
#masthead .header-social-wrap .social-button { color: var(--bw-hdr-ink) !important; background: transparent !important; transition: color 0.3s ease, transform 0.3s ease; }
#masthead .header-social-wrap .social-button:hover { color: var(--bw-hdr-accent) !important; transform: translateY(-2px); }
#masthead .mobile-toggle-open-container .menu-toggle-open { color: var(--bw-hdr-ink) !important; background: transparent !important; }

/* Botón Hablamos (lo inserta el JS) */
#masthead .bw-hdr-cta { display: inline-flex; align-items: center; align-self: center; height: auto; line-height: 1; gap: 8px; margin-left: 18px; background: var(--bw-hdr-accent); color: #2c2c2c !important; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; padding: 11px 18px; border-radius: 999px; text-decoration: none !important; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; white-space: nowrap; }
#masthead .bw-hdr-cta:hover { box-shadow: 0 12px 28px rgba(44, 44, 44, 0.25); } /* la subida la gestiona beewall-buttons.css (escala, sin saltitos) */
#masthead .bw-hdr-cta i { font-style: normal; transition: transform 0.3s ease; }
#masthead .bw-hdr-cta:hover i { transform: translateX(3px); }

/* Fila de cabecera: transición hacia la isla */
#masthead .site-header-inner-wrap { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
#masthead .site-main-header-inner-wrap { transition: background 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, margin 0.4s ease, max-width 0.4s ease, min-height 0.4s ease; }
/* Kadence pinta fondo blanco al fijarse: fuera, la isla lleva el suyo */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-main-header-wrap .site-header-row-container-inner { background: transparent !important; box-shadow: none !important; }

/* Isla (al bajar) */
html.bw-hdr-stuck { --bw-hdr-ink: #FCF6E6; }
html.bw-hdr-stuck #masthead .site-main-header-inner-wrap { background: rgba(44, 44, 44, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 999px; margin: 12px auto 0; max-width: 1240px; min-height: 64px; padding: 0 14px 0 22px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); }
html.bw-hdr-stuck #masthead .site-branding .brand .bw-wordmark, html.bw-hdr-stuck #masthead .site-branding .brand::after { font-size: 20px; }
html.bw-hdr-stuck #masthead .site-branding .brand::before { width: 34px; height: 34px; }
html.bw-hdr-stuck #masthead .header-navigation .menu > li > a { color: var(--bw-hdr-cream) !important; }
html.bw-hdr-stuck #masthead .header-navigation .menu > li > a:hover { color: var(--bw-hdr-accent) !important; }
@media (max-width: 1280px) { #masthead #main-header .header-social-wrap { display: none; } }

/* Móvil: Kadence no fija la cabecera móvil; la fijamos nosotros al bajar (el JS reserva la altura en #mobile-header) */
html.bw-hdr-stuck.bw-hdr-mobile #masthead #mobile-header > .site-header-inner-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
/* Móvil: fila transparente arriba, isla al bajar */
#masthead #mobile-header .site-main-header-inner-wrap { min-height: 64px; }
html.bw-hdr-stuck #masthead #mobile-header .site-main-header-inner-wrap { margin: 10px 12px 0; padding: 0 6px 0 14px; min-height: 58px; max-width: none; }

/* Cajón móvil: negro, ítems gigantes con entrada escalonada */
#mobile-drawer .drawer-inner { background: #2c2c2c !important; color: #FCF6E6; }
#mobile-drawer .drawer-header .menu-toggle-close { color: #FFCB05 !important; }
#mobile-drawer .drawer-header .menu-toggle-close .toggle-close-bar { background: #FFCB05 !important; }
#mobile-drawer .mobile-navigation .menu > li { border: 0 !important; opacity: 0; transform: translateY(18px); }
#mobile-drawer.show-drawer .mobile-navigation .menu > li { animation: bwDrawerIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
@keyframes bwDrawerIn { to { opacity: 1; transform: none; } }
#mobile-drawer .mobile-navigation .menu > li > a { font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important; letter-spacing: -0.03em; line-height: 1.05; color: #FCF6E6 !important; padding: 12px 0 !important; border: 0 !important; transition: color 0.3s ease, padding-left 0.3s ease; }
#mobile-drawer .mobile-navigation .menu > li > a:hover, #mobile-drawer .mobile-navigation .menu > li.current-menu-item > a { color: #FFCB05 !important; }
#mobile-drawer .drawer-content { padding-top: 24px; }
#mobile-drawer .bw-drawer-foot { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(252, 246, 230, 0.15); opacity: 0; animation: bwDrawerIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 560ms; }
#mobile-drawer .bw-drawer-foot .bw-hdr-cta { display: inline-flex; align-items: center; gap: 8px; background: #FFCB05; color: #2c2c2c !important; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; padding: 14px 22px; border-radius: 999px; text-decoration: none !important; }
#mobile-drawer .bw-drawer-foot p { font-family: 'Manrope', sans-serif; font-size: 13px; opacity: 0.6; margin: 16px 0 0; letter-spacing: 0.08em; text-transform: uppercase; }
#mobile-drawer .bw-drawer-foot p a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  #mobile-drawer .mobile-navigation .menu > li, #mobile-drawer .bw-drawer-foot { opacity: 1; transform: none; animation: none; }
  #masthead .site-header-inner-wrap, #masthead .site-main-header-inner-wrap { transition: none; }
}

/* Plantillas que empiezan en oscuro: tinta crema desde el primer pintado (antes el menú era invisible hasta que el JS medía el fondo).
   Solo mientras el JS no ha puesto bw-hdr-on-dark / bw-hdr-on-light. */
html:not(.bw-hdr-on-light):not(.bw-hdr-on-dark) body:is(.error404, .bw-seo, .bw-legal, .blog, .single-post, .search, .post-type-archive-bw_proyecto, .tax-bw_servicio, .page-id-271, .page-id-77, .page-id-78) #masthead { --bw-hdr-ink: #FCF6E6; }

/* Sobre fondo claro (hero amarillo, crema) el acento miel no se ve: hover de redes y subrayado del menú en tinta; miel solo sobre oscuro o en la isla */
html:not(.bw-hdr-on-dark):not(.bw-hdr-stuck) #masthead .header-social-wrap .social-button:hover { color: var(--bw-hdr-ink) !important; opacity: 0.6; }
html:not(.bw-hdr-on-dark):not(.bw-hdr-stuck) #masthead .header-navigation .menu > li > a::after { background: currentColor; }