/* ═══════════════════════════════════════════════════════════════
CA CONTAINERS UY — header.css
BEM: .hdr | Fuentes: Barlow Condensed + Barlow (Google Fonts)
Añadir en :
═══════════════════════════════════════════════════════════════ */
/* ── Variables ─────────────────────────────────────────────── */
:root {
--clr-brand: rgba(29, 137, 111, 1);
--clr-brand-dark: rgba(22, 105, 85, 1);
--clr-brand-light: rgba(29, 137, 111, 0.12);
--clr-topbar-bg: #111c18;
--clr-topbar-text: rgba(255,255,255,0.72);
--clr-topbar-hover: #ffffff;
--clr-white: #ffffff;
--clr-text-nav: rgba(255,255,255,0.92);
--clr-nav-hover: #ffffff;
--clr-wa: #25d366;
--clr-wa-hover: #1db954;
--clr-overlay: rgba(10, 20, 16, 0.55);
--hdr-bar-h: 68px;
--hdr-topbar-h: 36px;
--hdr-total-h: calc(var(--hdr-bar-h) + var(--hdr-topbar-h));
--radius-sm: 4px;
--radius-md: 8px;
--radius-pill: 999px;
--transition-fast: 150ms ease;
--transition-med: 260ms cubic-bezier(.4,0,.2,1);
--transition-slow: 380ms cubic-bezier(.4,0,.2,1);
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
}
/* ── Reset mínimo ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* ═══════════════════════════════════════════════════════════════
TOPBAR
═══════════════════════════════════════════════════════════════ */
.hdr__topbar {
background: var(--clr-topbar-bg);
height: var(--hdr-topbar-h);
width: 100%;
position: relative;
z-index: 1000;
}
.hdr__topbar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
height: 100%;
display: flex;
align-items: center;
gap: 20px;
}
.hdr__topbar-link {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 400;
color: var(--clr-topbar-text);
text-decoration: none;
letter-spacing: 0.01em;
transition: color var(--transition-fast);
}
.hdr__topbar-link:hover { color: var(--clr-topbar-hover); }
.hdr__topbar-icon {
flex-shrink: 0;
opacity: 0.7;
}
.hdr__topbar-badge {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-body);
font-size: 12px;
color: var(--clr-topbar-text);
opacity: 0.6;
margin-left: auto;
}
.hdr__topbar-socials {
display: flex;
align-items: center;
gap: 2px;
margin-left: 4px;
}
.hdr__topbar-social {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--clr-topbar-text);
text-decoration: none;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
}
.hdr__topbar-social:hover {
color: var(--clr-white);
background: rgba(255,255,255,0.08);
}
/* ═══════════════════════════════════════════════════════════════
SPACER (JS lo dimensiona cuando activa sticky)
═══════════════════════════════════════════════════════════════ */
#hdr-spacer {
height: 0;
transition: height var(--transition-med);
}
/* ═══════════════════════════════════════════════════════════════
HEADER PRINCIPAL
═══════════════════════════════════════════════════════════════ */
.hdr {
background: var(--clr-brand);
width: 100%;
position: relative;
z-index: 999;
/* Línea decorativa inferior: separa del contenido */
border-bottom: 2px solid var(--clr-brand-dark);
transition:
box-shadow var(--transition-med),
background var(--transition-med);
}
/* Sticky: el JS añade esta clase */
.hdr--sticky {
position: sticky;
top: 0;
left: 0;
right: 0;
box-shadow:
0 2px 8px rgba(0,0,0,0.18),
0 6px 24px rgba(0,0,0,0.10);
background: var(--clr-brand);
}
/* Cuando sticky, el topbar también se oculta (ya subió) */
.hdr--sticky ~ .hdr__topbar,
.hdr--sticky + .hdr__topbar { display: none; }
/* ── Barra interior ─────────────────────────────────────────── */
.hdr__bar {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
height: var(--hdr-bar-h);
display: flex;
align-items: center;
gap: 32px;
}
/* ── Logo ───────────────────────────────────────────────────── */
.hdr__logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.hdr__logo-mark {
display: flex;
align-items: center;
}
.hdr__logo-img {
width: 120px;
height: 40px;
object-fit: contain;
display: block;
}
/* Fallback: si la imagen no carga, el texto toma protagonismo */
.hdr__logo-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.hdr__logo-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--clr-white);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.hdr__logo-tagline {
font-family: var(--font-display);
font-size: 11px;
font-weight: 400;
color: rgba(255,255,255,0.65);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 2px;
}
/* ── Nav escritorio ─────────────────────────────────────────── */
.hdr__nav {
flex: 1;
}
.hdr__nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}
.hdr__nav-item { position: relative; }
.hdr__nav-link {
display: block;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--clr-text-nav);
text-decoration: none;
padding: 6px 14px;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
position: relative;
}
/* Línea inferior animada en hover */
.hdr__nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 14px;
right: 14px;
height: 2px;
background: var(--clr-white);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-med);
}
.hdr__nav-link:hover { color: var(--clr-nav-hover); }
.hdr__nav-link:hover::after { transform: scaleX(1); }
/* Estado activo */
.hdr__nav-link--active {
color: var(--clr-white);
background: rgba(255,255,255,0.12);
}
.hdr__nav-link--active::after { transform: scaleX(1); }
/* ── Actions (CTA WhatsApp) ─────────────────────────────────── */
.hdr__actions {
display: flex;
align-items: center;
margin-left: auto;
flex-shrink: 0;
}
.hdr__cta-wa {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--clr-white);
background: var(--clr-wa);
text-decoration: none;
padding: 9px 18px;
border-radius: var(--radius-pill);
border: 2px solid var(--clr-wa);
letter-spacing: 0.01em;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
white-space: nowrap;
}
.hdr__cta-wa:hover {
background: var(--clr-wa-hover);
border-color: var(--clr-wa-hover);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
.hdr__cta-wa:active { transform: translateY(0); box-shadow: none; }
.hdr__cta-wa-icon { flex-shrink: 0; }
/* Variante full-width (drawer móvil) */
.hdr__cta-wa--full {
width: 100%;
justify-content: center;
border-radius: var(--radius-md);
padding: 12px 18px;
font-size: 15px;
}
/* ── Hamburger (móvil) ──────────────────────────────────────── */
.hdr__hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
margin-left: auto;
background: transparent;
border: 1.5px solid rgba(255,255,255,0.35);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.hdr__hamburger:hover {
border-color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.08);
}
.hdr__hamburger-bar {
display: block;
width: 20px;
height: 1.8px;
background: var(--clr-white);
border-radius: 2px;
transform-origin: center;
transition:
transform var(--transition-med),
opacity var(--transition-fast),
width var(--transition-med);
}
/* Estado abierto: X */
.hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bar:nth-child(1) {
transform: translateY(6.8px) rotate(45deg);
}
.hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bar:nth-child(2) {
opacity: 0;
width: 0;
}
.hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bar:nth-child(3) {
transform: translateY(-6.8px) rotate(-45deg);
}
/* ═══════════════════════════════════════════════════════════════
OVERLAY
═══════════════════════════════════════════════════════════════ */
.hdr__overlay {
position: fixed;
inset: 0;
background: var(--clr-overlay);
z-index: 1098;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-med), visibility var(--transition-med);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.hdr__overlay--open {
opacity: 1;
visibility: visible;
}
/* ═══════════════════════════════════════════════════════════════
DRAWER MÓVIL
═══════════════════════════════════════════════════════════════ */
.hdr__drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 88vw);
background: var(--clr-topbar-bg);
z-index: 1099;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--transition-slow);
overflow-y: auto;
overscroll-behavior: contain;
}
.hdr__drawer--open {
transform: translateX(0);
}
/* Header del drawer */
.hdr__drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--clr-brand);
border-bottom: 1px solid rgba(255,255,255,0.1);
flex-shrink: 0;
}
.hdr__drawer-logo {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--clr-white);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hdr__drawer-close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255,255,255,0.12);
border: none;
border-radius: var(--radius-sm);
color: var(--clr-white);
cursor: pointer;
transition: background var(--transition-fast);
}
.hdr__drawer-close:hover { background: rgba(255,255,255,0.22); }
/* Lista nav drawer */
.hdr__drawer-list {
list-style: none;
margin: 0;
padding: 12px 0;
flex: 1;
}
.hdr__drawer-link {
display: flex;
align-items: center;
padding: 13px 24px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
text-decoration: none;
border-left: 3px solid transparent;
transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.hdr__drawer-link:hover {
color: var(--clr-white);
background: rgba(255,255,255,0.06);
border-left-color: rgba(255,255,255,0.3);
}
.hdr__drawer-link--active {
color: var(--clr-white);
background: rgba(29, 137, 111, 0.25);
border-left-color: var(--clr-brand);
}
/* CTA dentro del drawer */
.hdr__drawer-cta {
padding: 16px 20px 8px;
flex-shrink: 0;
}
/* Contacto al pie del drawer */
.hdr__drawer-contact {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 20px 24px;
border-top: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0;
}
.hdr__drawer-contact-link {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
color: rgba(255,255,255,0.52);
text-decoration: none;
padding: 6px 0;
transition: color var(--transition-fast);
}
.hdr__drawer-contact-link:hover { color: rgba(255,255,255,0.85); }
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* ≤ 1024px: ocultar texto del CTA */
@media (max-width: 1024px) {
.hdr__cta-wa-text { display: none; }
.hdr__cta-wa {
padding: 9px 12px;
border-radius: var(--radius-sm);
}
.hdr__bar { gap: 20px; }
}
/* ≤ 860px: ocultar nav escritorio, mostrar hamburger */
@media (max-width: 860px) {
.hdr__nav { display: none; }
.hdr__actions { display: none; }
.hdr__hamburger { display: flex; }
.hdr__bar { gap: 0; }
.hdr__logo { margin-right: auto; }
}
/* ≤ 520px: topbar más compacta */
@media (max-width: 520px) {
.hdr__topbar-badge { display: none; }
.hdr__topbar-inner { gap: 12px; }
}
/* ≤ 360px */
@media (max-width: 360px) {
.hdr__bar { padding: 0 16px; }
.hdr__logo-name { font-size: 19px; }
}
/* ═══════════════════════════════════════════════════════════════
UTILIDADES — focus visible accesible
═══════════════════════════════════════════════════════════════ */
.hdr__nav-link:focus-visible,
.hdr__cta-wa:focus-visible,
.hdr__hamburger:focus-visible,
.hdr__drawer-link:focus-visible,
.hdr__topbar-link:focus-visible,
.hdr__topbar-social:focus-visible,
.hdr__drawer-close:focus-visible {
outline: 2px solid rgba(255,255,255,0.9);
outline-offset: 2px;
}