/* ============================================================ Jardines de Carbajosa — barra de navegación superior. Pegar al final de css/styles.css (después de tipologias.css). Vuestro styles.css YA tenía escritas todas las reglas de .header-top-bar, .header-nav, .nav-toggler-btn y .nav-close-btn, incluido el menú móvil con `html.mobile`. Faltaba solo el HTML. Aquí añadimos únicamente lo que no estaba: 1. Que la barra se quede fija arriba al hacer scroll. 2. Los iconos en SVG (vuestras reglas esperaban ). 3. Que el título de cada sección no quede tapado al saltar. ============================================================ */ /* --- 1. Barra fija al bajar ------------------------------------ Sobre la foto de portada la barra va transparente (como la teníais: position:absolute). En cuanto se hace scroll, vuestro scroll-detect.js pone la clase `scrolled` en el , y aprovechamos ese momento para fijarla. Fondo verde de marca: el logo es crema, así que sigue leyéndose. */ body.scrolled .header-top-bar { position: fixed; top: 0; left: 0; z-index: 998; background-color: var(--color-primary, #4e6735); box-shadow: 0 2px 14px rgba(0, 0, 0, .18); transition: background-color 250ms ease-in-out; } /* La portada mide 100vh, así que no hace falta compensar el hueco: la barra solo se fija cuando ya se ha bajado. */ /* --- 2. Iconos ------------------------------------------------ Vuestras reglas dimensionan `.nav-toggler-btn img`. Como usamos SVG en línea (para no añadir archivos), replicamos el tamaño. */ .nav-toggler-btn svg, .nav-close-btn svg { width: 26px; height: 26px; color: var(--color-tertiary, #eeeddd); } .nav-close-btn { background: none; border: 0; padding: 0; cursor: pointer; } .nav-toggler-btn { background: none; border: 0; padding: 0; } @media (max-width: 1200px) { /* El botón de cerrar vive dentro del panel lateral negro. */ .nav-close-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 28px; right: 24px; z-index: 1; } /* La portada tenía su propio logo suelto para móvil. Ahora el logo vive en la barra, así que ese se solaparía con él: lo apagamos. */ .main-header .header-logo-mobile { display: none; } } /* --- 3. Anclas ------------------------------------------------- Con la barra fija, el título de la sección quedaría debajo. (El desplazamiento fino lo hace menu.js; esto cubre el salto directo con la URL, p.ej. jardinesdecarbajosa.com/#tipologias) */ #intro, #zonas, #carousel, #video, #mapa, #tipologias, #contact { scroll-margin-top: var(--height-header-top-bar, 120px); } /* --- Accesibilidad --------------------------------------------- */ .header-top-bar a:focus-visible, .header-top-bar button:focus-visible { outline: 2px solid var(--color-tertiary, #eeeddd); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.scrolled .header-top-bar { transition: none; } } /* --- 4. Barra horizontal en escritorio ----------------------- La plantilla recoge el menú en la hamburguesa por debajo de 1200px, pero a anchos intermedios de escritorio dejaba ver la barra Y la hamburguesa a la vez, y los enlaces sin alinear. Forzamos aquí, por encima de 1200px, la barra horizontal limpia (sin hamburguesa). Por debajo manda la plantilla. */ @media (min-width: 1201px) { .header-top-bar .nav-toggler-btn, .header-top-bar .nav-close-btn { display: none !important; } .header-top-bar .header-nav { position: static !important; height: auto !important; width: auto !important; right: auto !important; background: transparent !important; padding: 0 !important; } .header-top-bar .header-nav > ul { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 40px); height: auto !important; padding: 0 !important; margin: 0; } .header-top-bar .header-nav > ul li { display: flex !important; width: auto !important; border: 0 !important; } .header-top-bar .header-nav > ul li a { padding: 6px 2px !important; white-space: nowrap; } } /* --- 5. Portada: precio destacado + gancho de campaña ------------ La caja crema del hero (`p.prom-advice`) traía el precio al mismo tamaño que el resto. Lo agrandamos para que sea lo primero que se lee, y debajo colocamos un botón que baja a "Disponibilidad". */ .header-info .prom-advice-precio { font-size: 2.35em; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } /* Segunda línea ("desde 172.000 € + IVA") como bloque, con aire por arriba para que el número grande no se pegue al texto de la primera línea. */ .header-info .prom-advice-l2 { display: block; margin-top: 14px; line-height: 1.15; } .header-info .prom-campania { display: flex; width: fit-content; align-items: center; gap: 9px; margin-top: 16px; clear: both; padding: 10px 20px; background: var(--color-primary, #4e6735); color: var(--color-tertiary-light, #f5f4e8); border-radius: 26px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1.25; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); transition: background-color .15s ease, transform .15s ease; } .header-info .prom-campania-precio { font-size: 1.45em; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .header-info .prom-campania::after { content: "\2192"; /* flecha -> */ font-size: 1.15em; line-height: 1; } .header-info .prom-campania:hover, .header-info .prom-campania:focus-visible { background: var(--color-primary-dark, #3a4d28); transform: translateY(-1px); color: #ffffff; } @media (max-width: 600px) { .header-info .prom-campania { font-size: 12px; padding: 9px 16px; } } @media (prefers-reduced-motion: reduce) { .header-info .prom-campania { transition: none; } }