/* ========================================================================== Bethesda Spa - Cabecera unica del sitio Se renderiza desde inc/site-header.php en wp_body_open, igual en todas las paginas. Los enlaces salen del menu "Header Menu" (Apariencia > Menus). Revision 2026-09-02 1. Los enlaces ya no son pildoras con borde propio: cada uno tenia su cajita y juntos leian como una fila de botones sueltos. 2. El contenido de la barra se alinea con los 1240px de la pagina. Antes el logo caia 63px a la izquierda del H1 y la cabecera no cuadraba con nada. 3. Los enlaces se pegan al logo y solo el CTA se va a la derecha. Antes habia 835px de vacio entre la marca y el menu. 4. Se anade el isotipo: sin el, la izquierda no tenia peso visual. 5. La hamburguesa pasa de Tablet (1024px) a Telefono (767px). ========================================================================== */ :root{ --bx-green:#5C7B4E; --bx-green-dark:#4A6640; --bx-cream:#FFFFFF; --bx-ink:#3b463d; --bx-body:#5F6B62; --bx-muted:#667168; --bx-accent:#c1703a; --bx-accent-dark:#a95f2f; --bx-line:#e4e6e0; --bx-line-2:#dcded8; --bx-ease:cubic-bezier(.22,.61,.36,1); } /* Los anclas no deben quedar tapadas por la barra fija (~78px). */ html{ scroll-padding-top:80px; } .bx-header, .bx-header *{ box-sizing:border-box; } .bx-header{ /* Sin caja propia. Un elemento sticky solo puede pegarse dentro de la caja de su padre: con la cabecera como caja de 116px, la barra de navegacion se despegaba a los 45px de scroll y el menu desaparecia del resto de la pagina - en movil no habia forma de abrirlo. Con display:contents el padre de .bx-bar pasa a ser el y la barra queda clavada arriba toda la pagina, sin numeros magicos ni medidas en JS. El z-index y el position se llevan a .bx-bar, que ahora es la caja real. Auditoria 2026-09-15. */ display:contents; font-family:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } /* Solo la barra de navegacion queda fija: la de anuncio se va con el scroll, asi en movil no se pierden 45px de pantalla de forma permanente. */ .bx-bar{ position:sticky; top:0; z-index:9990; } .admin-bar .bx-bar{ top:32px; } @media (max-width:782px){ .admin-bar .bx-bar{ top:46px; } } /* --- Barra de anuncio ---------------------------------------------------- */ .bx-topbar{ background:var(--bx-green); color:#fff; text-align:center; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.45; padding:10px 16px; margin:0; } @media (max-width:640px){ .bx-topbar{ font-size:10px; letter-spacing:.08em; padding:8px 14px; } } /* --- Barra principal ----------------------------------------------------- El fondo va a sangre completa, pero el contenido se centra en 1240px para alinearse con el resto de la pagina. */ .bx-bar{ background:var(--bx-cream); border-bottom:1px solid var(--bx-line); box-shadow:0 6px 22px -18px rgba(59,70,61,.55); display:flex; align-items:center; padding-block:12px; padding-inline:max(40px, calc((100% - 1240px) / 2)); } @media (max-width:1120px){ .bx-bar{ padding-inline:28px; } } @media (max-width:1024px){ .bx-bar{ padding-inline:20px; } } /* --- Marca --------------------------------------------------------------- */ .bx-logo{ display:flex; align-items:center; gap:12px; flex:0 0 auto; text-decoration:none; line-height:1; padding:4px 0; /* Sin esto hereda el rosa #c36 por defecto de Hello Elementor para . */ color:inherit; } .bx-logo-mark{ width:46px; height:auto; display:block; transition:transform .4s var(--bx-ease); } .bx-logo:hover .bx-logo-mark{ transform:rotate(-5deg) scale(1.06); } .bx-logo-text{ display:flex; flex-direction:column; gap:3px; } .bx-logo-name{ font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif; font-size:26px; font-weight:600; color:var(--bx-ink); letter-spacing:.01em; transition:color .2s var(--bx-ease); } .bx-logo-sub{ font-size:9.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--bx-muted); transition:color .2s var(--bx-ease); } .bx-logo:hover .bx-logo-name{ color:var(--bx-green); } .bx-logo:hover .bx-logo-sub{ color:var(--bx-accent); } /* --- Navegacion ---------------------------------------------------------- El grupo completo (enlaces + CTA) se alinea a la derecha, como en cualquier header estandar: logo a la izquierda, menu a la derecha. */ .bx-nav{ display:flex; align-items:center; flex:1; justify-content:flex-end; gap:32px; margin:0 0 0 56px; padding:0; list-style:none; } @media (max-width:1120px){ .bx-nav{ gap:24px; margin-left:36px; } } .bx-nav a{ position:relative; display:inline-flex; align-items:center; font-size:15px; font-weight:500; color:var(--bx-body); text-decoration:none; white-space:nowrap; padding:8px 0; border:0; background:transparent; transition:color .2s var(--bx-ease); } @media (max-width:1120px){ .bx-nav a{ font-size:14px; } } /* Subrayado que se dibuja de izquierda a derecha al pasar el mouse. */ .bx-nav a:not(.bx-cta)::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px; background:var(--bx-accent); transform:scaleX(0); transform-origin:right center; transition:transform .32s var(--bx-ease); } .bx-nav a:not(.bx-cta):hover, .bx-nav a:not(.bx-cta):focus-visible{ color:var(--bx-green); } .bx-nav a:not(.bx-cta):hover::after, .bx-nav a:not(.bx-cta):focus-visible::after{ transform:scaleX(1); transform-origin:left center; } .bx-nav a[aria-current="page"]:not(.bx-cta){ color:var(--bx-green); } .bx-nav a[aria-current="page"]:not(.bx-cta)::after{ transform:scaleX(1); } /* --- CTA: la unica pildora de la barra ----------------------------------- Verde, no terracota: coincide con el token 'Book now' de DESIGN.md. */ .bx-nav a.bx-cta, .bx-nav a.bx-cta[aria-current="page"]{ background:var(--bx-green); border:1.5px solid var(--bx-green); border-radius:999px; color:#fff; font-weight:600; padding:13px 28px; transition:background-color .2s var(--bx-ease), border-color .2s var(--bx-ease), transform .2s var(--bx-ease), box-shadow .2s var(--bx-ease); } .bx-nav a.bx-cta:hover, .bx-nav a.bx-cta:focus-visible{ background:var(--bx-green-dark); border-color:var(--bx-green-dark); color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(78,112,89,.65); } .bx-nav a.bx-cta:active{ transform:translateY(0); } /* Foco visible y consistente */ .bx-nav a:focus-visible, .bx-logo:focus-visible, .bx-burger:focus-visible{ outline:2px solid var(--bx-accent); outline-offset:3px; border-radius:4px; } /* --- Boton hamburguesa --------------------------------------------------- */ .bx-burger{ display:none; width:46px; height:46px; flex:0 0 46px; margin-left:auto; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; border:0; border-radius:999px; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background-color .2s var(--bx-ease); } .bx-burger:hover{ background:rgba(78,112,89,.09); } .bx-burger span{ display:block; width:20px; height:1.5px; border-radius:2px; background:var(--bx-green); transition:transform .26s var(--bx-ease), opacity .18s var(--bx-ease); } .bx-burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .bx-burger.is-open span:nth-child(2){ opacity:0; } .bx-burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } /* --- TELEFONO: aqui y solo aqui entra la hamburguesa --------------------- */ @media (max-width:767px){ .bx-burger{ display:flex; } .bx-bar{ padding-block:10px; padding-inline:18px; } .bx-logo-mark{ width:38px; } .bx-logo-name{ font-size:21px; } .bx-logo-sub{ font-size:8.5px; letter-spacing:.18em; } /* Panel desplegable. display:none/flex en vez de una transicion de max-height: es el patron que no deja enlaces enfocables ni clicables cuando el menu esta cerrado. */ .bx-nav{ display:none; position:absolute; top:100%; left:0; right:0; flex:none; flex-direction:column; align-items:stretch; gap:0; margin:0; background:var(--bx-cream); border-bottom:1px solid var(--bx-line-2); padding:6px 20px 22px; max-height:calc(100dvh - 120px); overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 16px 28px -18px rgba(59,70,61,.55); /* forwards, no both: con both el panel se queda en el primer fotograma (opacity:0) si la animacion no llega a correr, y el menu se abre invisible aunque este desplegado. Auditoria 2026-09-15. */ animation:bx-nav-in .22s ease forwards; } .bx-nav.is-open{ display:flex; } @keyframes bx-nav-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .bx-nav a{ /* display:flex + width:100%: con inline-flex el enlace solo ocupaba el ancho del texto y la linea separadora salia cortada a media fila. */ display:flex; width:100%; justify-content:flex-start; font-size:16px; padding:16px 2px; border:0; border-bottom:1px solid var(--bx-line); border-radius:0; background:transparent; color:var(--bx-ink); } /* En el panel el subrayado sobra: ya hay separadores entre filas. */ .bx-nav a:not(.bx-cta)::after{ display:none; } .bx-nav a:not(.bx-cta):hover{ color:var(--bx-accent); } .bx-nav a.bx-cta, .bx-nav a.bx-cta[aria-current="page"]{ justify-content:center; border-radius:999px; border:1.5px solid var(--bx-accent); margin:18px 0 0; padding:16px 26px; } .bx-nav a.bx-cta:hover{ transform:none; box-shadow:none; } .bx-nav li:last-child a:not(.bx-cta){ border-bottom:0; } body.bx-nav-open{ overflow:hidden; } } /* --- Menos movimiento ---------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .bx-nav{ animation:none; } .bx-nav a::after{ transition:none; } .bx-nav a.bx-cta:hover{ transform:none; } .bx-burger span{ transition:none; } .bx-logo:hover .bx-logo-mark{ transform:none; } } /* --- Selector de idioma (EN | ES) - TranslatePress, texto sin banderas ---- */ .bx-lang{ display:flex; align-items:center; gap:7px; flex:0 0 auto; margin-left:22px; font-family:Karla,sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; } .bx-lang a{ color:var(--bx-muted); text-decoration:none; transition:color .2s var(--bx-ease); } .bx-lang a:hover, .bx-lang a:focus-visible{ color:var(--bx-green); } .bx-lang .bx-lang-cur{ color:var(--bx-green); } .bx-lang .bx-lang-sep{ color:var(--bx-line-2); font-weight:400; } @media (max-width:767px){ .bx-lang{ margin-left:auto; margin-right:10px; } .bx-burger{ margin-left:0; } } /* El selector flotante de TranslatePress fuera: usamos el de la cabecera. */ .trp-floating-switcher, #trp-floater-ls{ display:none !important; } /* --- CTA "Book now" despues del selector de idioma (escritorio) --------- Peticion de negocio: en la barra de escritorio el boton va como ultimo elemento, despues de EN | ES. La copia dentro de .bx-nav se conserva solo para el panel movil (donde .bx-lang no forma parte del desplegable). */ .bx-cta--bar{ flex:0 0 auto; margin-left:22px; display:inline-flex; align-items:center; white-space:nowrap; font-family:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:15px; font-weight:600; line-height:1; text-decoration:none; background:var(--bx-green); border:1.5px solid var(--bx-green); border-radius:999px; color:#fff; padding:13px 28px; transition:background-color .2s var(--bx-ease), border-color .2s var(--bx-ease), transform .2s var(--bx-ease), box-shadow .2s var(--bx-ease); } @media (max-width:1120px){ .bx-cta--bar{ font-size:14px; margin-left:18px; } } .bx-cta--bar:hover, .bx-cta--bar:focus-visible{ background:var(--bx-green-dark); border-color:var(--bx-green-dark); color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(78,112,89,.65); } .bx-cta--bar:active{ transform:translateY(0); } .bx-cta--bar:focus-visible{ outline:2px solid var(--bx-accent); outline-offset:3px; } /* Escritorio: se oculta la copia del CTA que vive dentro del menu. */ @media (min-width:768px){ .bx-nav > li.bx-nav__cta{ display:none; } } /* Movil: el CTA suelto no se pinta; se usa el del panel desplegable. */ @media (max-width:767px){ .bx-cta--bar{ display:none; } } @media (prefers-reduced-motion:reduce){ .bx-cta--bar:hover{ transform:none; } }