/* ============================================================ HEADER DEL SITIO — Diana Dussan Clínica Avanzada Fuente única de estilos del header. Se carga al FINAL del en todas las páginas, así que manda sobre las reglas antiguas de custom.css. Todo acotado a .site-header. Criterio de marca (Brand DNA): navegación sobria en versalitas espaciadas, un solo botón de acción en negro, rosa solo como acento (subrayado de la sección activa). Estados: · .site-header (sin -alfa): sobre el hero oscuro del home → texto blanco · .site-header.site-header-alfa: fondo claro translúcido → texto negro (index.js lo activa al hacer scroll en el home; pages.js siempre en el resto) ============================================================ */ .site-header{ --hd-ink: #111111; --hd-light: #ffffff; --hd-ivory: #faf7f2; --hd-rosa: #e691b7; --hd-line: rgba(17,17,17,.10); --hd-maxw: 1200px; position: sticky; top: 0; z-index: 1000; background: transparent; backdrop-filter: none; padding: 0; box-shadow: none; border-bottom: 1px solid transparent; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); -webkit-font-smoothing: antialiased; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } .site-header *, .site-header *::before, .site-header *::after{ box-sizing: border-box; } .site-header.site-header-alfa{ background: rgba(255,255,255,.78); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--hd-line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); } .site-header .container{ max-width: var(--hd-maxw); padding-inline: 20px; margin-inline: auto; } .site-header .nav{ height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* ---------- Logo: tamaño fijo (antes 4vh, variaba con la altura de pantalla) ---------- */ .site-header .brand{ display: inline-flex; align-items: center; letter-spacing: 0 !important; position: relative; z-index: 2; } .site-header .brand a{ display: inline-flex; align-items: center; } .site-header .logoblanco img{ display: none; } .site-header .logonegro img{ display: block; height: 26px; width: auto; padding: 0; } /* ---------- Enlaces ---------- */ .site-header .nav-links{ display: flex; align-items: center; gap: 32px; } .site-header .nav-links a{ position: relative; display: inline-flex; align-items: center; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.92); text-decoration: none; padding: 10px 0; background: none; border-radius: 0; opacity: 1; transition: color .25s ease, background .25s ease, border-color .25s ease; } .site-header.site-header-alfa .nav-links a{ color: var(--hd-ink); } .site-header .nav-links .icon{ display: none; } /* flechas de menús que no existen */ /* Subrayado fino rosa: fijo en la sección activa; al pasar el cursor crece desde el centro */ .site-header .nav-links a:not(.nav-cta)::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--hd-rosa); transform: scaleX(0); transform-origin: center; transition: transform .45s cubic-bezier(.65,0,.35,1); } .site-header .nav-links a[aria-current="page"]::after{ transform: scaleX(1); } .site-header .nav-links a:hover{ background: none; } /* ---------- Botón de acción: Agenda tu cita ---------- */ .site-header .nav-links a.nav-cta{ isolation: isolate; overflow: hidden; padding: 12px 22px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; color: #fff; transition: color .45s cubic-bezier(.65,0,.35,1), border-color .45s ease, background .45s ease; } /* Relleno que se desliza desde la izquierda (hover) */ .site-header .nav-links a.nav-cta::before{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65,0,.35,1); } .site-header.site-header-alfa .nav-links a.nav-cta{ background: var(--hd-ink); border-color: var(--hd-ink); color: #fff; } .site-header.site-header-alfa .nav-links a.nav-cta::before{ background: var(--hd-ivory); } /* Efectos solo con mouse (en pantallas táctiles el hover se queda "pegado") */ @media (hover: hover) and (pointer: fine){ .site-header .nav-links a:not(.nav-cta){ transition: color .25s ease, opacity .35s ease; } .site-header .nav-links:hover a:not(.nav-cta):not(:hover){ opacity: .55; } /* enfoca el enlace señalado */ .site-header .nav-links a:not(.nav-cta):hover::after{ transform: scaleX(1); } .site-header .nav-links a.nav-cta:hover{ color: var(--hd-ink); border-color: #fff; } .site-header .nav-links a.nav-cta:hover::before{ transform: scaleX(1); } .site-header.site-header-alfa .nav-links a.nav-cta:hover{ color: var(--hd-ink); border-color: var(--hd-ink); } } .site-header a:focus-visible, .site-header .burger:focus-visible{ outline: 2px solid var(--hd-rosa); outline-offset: 4px; } /* ---------- Hamburguesa ---------- */ .site-header .burger{ --size: 40px; position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: 5px; width: var(--size); height: var(--size); border: none; background: transparent; cursor: pointer; padding: 0; border-radius: 50%; margin-right: -8px; } .site-header .burger:hover{ background: rgba(127,127,127,.12); } .site-header .burger span{ display: block; width: 20px; height: 1.5px; border-radius: 2px; background: #fff; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, background .25s ease; transform-origin: center; } .site-header.site-header-alfa .burger span, .site-header[data-menu="open"] .burger span{ background: var(--hd-ink); } /* X exacta: distancia entre barras = alto (1.5px) + gap (5px) */ .site-header[data-menu="open"] .burger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .site-header[data-menu="open"] .burger span:nth-child(2){ opacity: 0; } .site-header[data-menu="open"] .burger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } /* ---------- Móvil: menú a pantalla completa ---------- */ @media (max-width: 767.98px){ .site-header .nav-links{ position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 96px 28px 40px; background: var(--hd-ivory); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; overflow-y: auto; } .site-header[data-menu="open"] .nav-links{ opacity: 1; pointer-events: auto; transform: none; } .site-header[data-menu="open"]{ background: var(--hd-ivory); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom-color: var(--hd-line); } .site-header .nav-links a, .site-header.site-header-alfa .nav-links a{ color: var(--hd-ink); font-size: 14px; letter-spacing: .2em; padding: 22px 0; border-bottom: 1px solid var(--hd-line); } .site-header .nav-links a:not(.nav-cta)::after{ bottom: -1px; } .site-header .nav-links a.nav-cta, .site-header.site-header-alfa .nav-links a.nav-cta{ justify-content: center; margin-top: 32px; padding: 18px 22px; background: var(--hd-ink); border: 1px solid var(--hd-ink); color: #fff; } body.menu-open{ overflow: hidden; } } /* ---------- Escritorio ---------- */ @media (min-width: 768px){ .site-header{ border-radius: 9999px; } .site-header .container{ padding-inline: 28px; } .site-header .nav{ height: 68px; } .site-header .logonegro img{ height: 30px; } .site-header .burger{ display: none; } .site-header .nav-links{ position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto; padding: 0; background: transparent; flex-direction: row; } } /* Tablet horizontal / portátiles pequeños: menos aire para que no se amontone */ @media (min-width: 768px) and (max-width: 1023.98px){ .site-header .nav-links{ gap: 22px; } .site-header .nav-links a{ font-size: 11.5px; letter-spacing: .12em; } .site-header .nav-links a.nav-cta{ padding: 11px 18px; } } @media (min-width: 1024px){ .site-header .container{ padding-inline: 40px; } .site-header .logonegro img{ height: 32px; } } @media (prefers-reduced-motion: reduce){ .site-header, .site-header .burger span, .site-header .nav-links, .site-header .nav-links a::after{ transition: none !important; } }