/* ========================================================================== BAAN PHO — header.css · componente 2 del inventario Valores extraídos de "Baan Pho - Home v4.dc.html": los style= (móvil) y las reglas .bp-* del . Estados: .solido la pone js al pasar 80px de scroll (Home v4, línea 806: y > 80); mega y desplegable de idioma abren por hover/focus-within y la js solo añade aria y cierre con Escape. Excepción documentada al breakpoint único: el header del diseño define además 1180px, 900–1279px (modo tablet: burger + CTA suelto) y 1280–1439px (nav comprimida). Son comportamiento del prototipo, no artefacto de la herramienta. ========================================================================== */ /* El centrado va por márgenes automáticos, no por left:50% + translateX(-50%). Aquel par deja el borde izquierdo en una fracción de píxel cuando el ancho de pantalla es impar (375 / 2 = 187,5), y en pantallas de densidad 1 o 3 esa fracción no cae sobre un píxel físico: se veía una raya del fondo de la página colándose por la izquierda, bajo el header. Con left/right a 0 y los márgenes en auto, el centrado lo resuelve la maquetación en enteros. Además deja transform libre para la animación de ocultar. */ .bp-header { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 430px; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: linear-gradient(to bottom, rgba(var(--velo-header), 0.55), rgba(var(--velo-header), 0)); background-size: auto, 430px; box-shadow: none; transition: background .4s ease, box-shadow .4s ease, transform .4s ease; } .bp-header.solido { background: linear-gradient(rgba(var(--verde-header), 0.94), rgba(var(--verde-header), 0.94)), var(--trama-masaje); background-size: auto, 430px; box-shadow: var(--sombra-header); } /* Al bajar, el header se aparta; al subir vuelve. La clase la pone js sobre (ver marco.js, "sentido del desplazamiento"). Como es `fixed`, no ocupa sitio en el flujo: apartarlo no mueve ni un píxel del contenido. Para deshacerlo basta con borrar esta regla y su gemela de categorias.css. Sin js el header se queda quieto, que es el comportamiento de siempre. */ .bajando .bp-header { transform: translateY(-100%); } /* ---- Logo ---- */ .bp-logo { display: flex; align-items: center; gap: 11px; } .bp-logo img { width: 30px; height: 26px; flex: none; } .bp-wordmark { font-family: var(--font-serif); font-size: var(--fs-logo); letter-spacing: var(--ls-logo); color: var(--blanco-foto); font-weight: var(--fw-serif-fuerte); } /* ---- Nav desktop ---- */ .bp-desknav { display: none; align-items: center; gap: 22px; } .bp-navlink { font-size: var(--fs-sm); letter-spacing: var(--ls-nav); color: var(--blanco-foto); font-weight: var(--fw-medio); white-space: nowrap; } /* hover del helmet (.bp-desknav a:hover); en el prototipo lo anulaban los style= inline — se implementa la regla escrita en el diseño */ .bp-navlink:hover { color: var(--oro-500); } /* página actual — después del hover para que gane siempre, como al renderizar el prototipo */ .bp-nav-on { position: relative; } .bp-navlink.bp-nav-on { color: var(--oro-200); font-weight: var(--fw-fuerte); } .bp-nav-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; background: var(--oro-500); } /* ---- Mega-menú (desktop, dentro del header) ---- */ .bp-mega-wrap { position: relative; } .bp-mega { position: fixed; left: 0; right: 0; top: 64px; padding: 14px 4vw 0; opacity: 0; pointer-events: none; transition: opacity .25s ease; } /* hover solo en dispositivos con ratón: en táctil el hover "pegado" dejaba el panel abierto sin poder cerrarlo; ahí manda .abierta (js) */ @media (hover: hover) { .bp-mega-wrap:hover .bp-mega, .bp-mega-wrap:focus-within .bp-mega { opacity: 1; pointer-events: auto; } } .bp-mega-wrap.abierta .bp-mega { opacity: 1; pointer-events: auto; } .bp-mega-panel { max-width: var(--contenedor-texto); margin: 0 auto; background-image: linear-gradient(rgba(var(--verde-panel-1), 0.98), rgba(var(--verde-panel-2), 0.99)), var(--trama-hojas); background-size: auto, 520px; border: 1px solid var(--linea-inv); border-radius: var(--r-lg); padding: 42px 46px 32px; /* helmet pisa el 36px 42px 28px del style= */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 44px; /* helmet pisa el 28px 36px del style= */ box-shadow: var(--sombra-mega); } .bp-mega-cat { font-family: var(--font-serif); font-size: var(--fs-mega-cat-desktop); /* helmet pisa el 20px del style= */ color: var(--oro-200); display: block; margin-bottom: 18px; /* helmet pisa el 14px del style= */ transition: color .2s ease; } .bp-mega-lista { display: flex; flex-direction: column; gap: 15px; /* helmet pisa el 10px del style= */ } .bp-mega-sub { font-size: var(--fs-base); /* helmet: 16.5px pisa el 13.5px del style= */ line-height: 1.4; color: var(--texto-inv); transition: color .2s ease; } .bp-mega-cat:hover, .bp-mega-sub:hover, .bp-mega-ver:hover { color: var(--oro-100); } .bp-mega-pie { grid-column: 1 / -1; border-top: 1px solid rgba(var(--oro-rgb), 0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; } .bp-mega-ver { font-size: var(--fs-mega-sub); /* helmet: 13.5px pisa el 13px del style= */ letter-spacing: var(--ls-cta); text-transform: uppercase; font-weight: var(--fw-fuerte); color: var(--oro-200); transition: color .2s ease; } .bp-mega-pie span { font-size: var(--fs-cta-compacta); color: var(--texto-inv-suave); } /* ---- Selector de idioma ---- */ .bp-lang { position: relative; } .bp-lang-btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(var(--oro-rgb), 0.45); border-radius: var(--r-pastilla); padding: 9px 15px; cursor: pointer; color: var(--oro-200); font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: var(--ls-boton); font-weight: var(--fw-negrita); } .bp-chevron { display: inline-block; font-size: var(--fs-micro); transform: rotate(0deg); transition: transform .3s ease; } @media (hover: hover) { .bp-lang:hover .bp-chevron, .bp-lang:focus-within .bp-chevron { transform: rotate(180deg); } } .bp-lang.abierta .bp-chevron { transform: rotate(180deg); } .bp-lang-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 172px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1); background-image: linear-gradient(rgba(var(--verde-panel-1), 0.98), rgba(var(--verde-panel-2), 0.99)), var(--trama-hojas); background-size: auto, 320px; border: 1px solid var(--linea-inv); border-radius: var(--r-md); padding: 8px; box-shadow: var(--sombra-desplegable); } @media (hover: hover) { .bp-lang:hover .bp-lang-menu, .bp-lang:focus-within .bp-lang-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } } .bp-lang.abierta .bp-lang-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .bp-lang-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-xs); color: var(--texto-inv-2); font-size: var(--fs-nav-compacta); } /* en el prototipo los items no cambian al pasar el ratón (el inline gana al a:hover global): se fija el mismo color en hover */ .bp-lang-item:hover { color: var(--texto-inv-2); } .bp-lang-item--activo, .bp-lang-item--activo:hover { background: rgba(var(--oro-rgb), 0.14); color: var(--beige); /* #f3ecd9 literal en el prototipo */ } .bp-lang-check { color: var(--oro-500); font-size: var(--fs-xs); } .bp-lang-badge { color: var(--texto-inv-suave); font-size: var(--fs-2xs); letter-spacing: var(--ls-nav); } /* ---- CTA Reservar ---- */ .bp-reservar { font-size: var(--fs-xs); letter-spacing: var(--ls-cta); text-transform: uppercase; font-weight: var(--fw-fuerte); color: var(--sobre-oro); background: var(--oro-500); padding: 11px 24px; border-radius: var(--r-pastilla); } .bp-reservar:hover { color: var(--sobre-oro); } /* CTA suelto del modo tablet (900–1279) */ .bp-tabcta { display: none; align-items: center; justify-content: center; font-size: var(--fs-cta-compacta); letter-spacing: var(--ls-cta); text-transform: uppercase; font-weight: var(--fw-fuerte); color: var(--sobre-oro); background: var(--oro-500); padding: 11px 22px; border-radius: var(--r-pastilla); } .bp-tabcta:hover { color: var(--sobre-oro); } /* ---- Hamburguesa ---- */ .bp-burger { display: flex; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; background: none; border: none; } .bp-burger-linea { width: 24px; height: 2px; background: var(--blanco-foto); display: block; } .bp-burger-linea--corta { width: 16px; background: var(--oro-700); } /* ========================================================================== Desktop ========================================================================== */ @media (min-width: 900px) { .bp-header { max-width: 100%; padding: 20px 3.5vw; } /* En escritorio el header se queda. Apartarlo solo tiene sentido donde la pantalla es escasa: allí compite con la cinta de pestañas y con la barra flotante, que aquí ni siquiera existe. */ .bajando .bp-header { transform: none; } .bp-burger { display: none; } .bp-desknav { display: flex; gap: 15px; margin-left: 26px; } .bp-navlink { font-size: var(--fs-nav-desktop); letter-spacing: var(--ls-nav-desktop); } /* en el prototipo renderizado la regla del helmet (.bp-desknav > a !important) alcanza también a Reservar y pisa su style= (13px/2px): a ≥900px se ve 15.5px/0.8px. Se reproduce el render. */ .bp-reservar { font-size: var(--fs-nav-desktop); letter-spacing: var(--ls-nav-desktop); } } @media (min-width: 1180px) { .bp-desknav { gap: 22px; } } /* Modo tablet del prototipo: nav fuera, burger + CTA suelto */ @media (min-width: 900px) and (max-width: 1279px) { .bp-header .bp-desknav { display: none; } .bp-header .bp-burger { display: flex; } .bp-tabcta { display: inline-flex; margin-left: auto; margin-right: 16px; } } /* Nav comprimida del prototipo. Nota: el helmet también baja los links a 14.5px aquí, pero para los links normales esa regla está muerta al renderizar (la pisa el !important posterior del bloque 900) y se ven a 15.5px; solo el trigger "Masajes" baja de verdad (su selector .bp-desknav a.bp-mega-trigger tiene más especificidad). */ @media (min-width: 1280px) and (max-width: 1439px) { .bp-desknav { gap: 14px; margin-left: 18px; } .bp-mega-trigger { font-size: var(--fs-nav-1280); } /* literal del prototipo (.bp-desknav > div:last-of-type a): su selector alcanza los items del desplegable de idioma, no el botón */ .bp-lang-item { padding: 7px 11px; font-size: var(--fs-cta-1280); } .bp-reservar { padding: 10px 20px; font-size: var(--fs-cta-1280); } }