/* ═══════════════════════════════════════════════════════════════ TEC-ALUM — Header & Navegación ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────── BARRA SUPERIOR (solo desktop) ───────────────────────────────────────── */ .ta-topbar { background-color: var(--ta-primary); color: rgba(255,255,255,0.85); font-size: 13px; font-family: var(--ta-font-body); height: 36px; display: flex; align-items: center; overflow: hidden; } .ta-topbar-inner { max-width: var(--ta-max-width); margin: 0 auto; padding: 0 var(--ta-container-x); display: flex; align-items: center; gap: 24px; width: 100%; } .ta-topbar-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ta-topbar-item a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color var(--ta-transition); } .ta-topbar-item a:hover { color: #fff; } .ta-topbar-sep { flex: 1; } @media (max-width: 768px) { .ta-topbar { display: none; } } /* ───────────────────────────────────────── NAVBAR ───────────────────────────────────────── */ .ta-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* La topbar empuja el navbar abajo */ } /* La admin bar de WP es fixed y desplaza el 32px (46px en móvil). El header no hereda ese desplazamiento por sí solo, así que hay que empujarlo manualmente o queda un hueco entre el header y el contenido. */ @media screen and (min-width: 783px) { body.admin-bar .ta-header { top: 32px; } } @media screen and (max-width: 782px) { body.admin-bar .ta-header { top: 46px; } } .ta-navbar { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(194,198,211,0.3); transition: box-shadow 0.3s var(--ta-ease), background 0.3s var(--ta-ease); } /* El header se vuelve sticky solo con la navbar cuando se hace scroll */ .ta-header.is-scrolled .ta-topbar { height: 0; overflow: hidden; transition: height 0.3s var(--ta-ease); } .ta-header.is-scrolled .ta-navbar { box-shadow: 0 4px 24px rgba(0,52,111,0.10); background: rgba(255,255,255,0.99); } .ta-navbar-inner { max-width: var(--ta-max-width); margin: 0 auto; padding: 0 var(--ta-container-x); height: 76px; display: flex; align-items: center; gap: 32px; } /* ───────────────────────────────────────── LOGO ───────────────────────────────────────── */ .ta-navbar-logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; } .ta-navbar-logo img, .ta-navbar-logo .custom-logo { height: 52px; width: auto; display: block; } .ta-logo-mark { display: flex; align-items: center; gap: 10px; } .ta-logo-name { display: flex; flex-direction: column; line-height: 1; } .ta-logo-name-main { font-family: var(--ta-font-display); font-size: 20px; font-weight: 800; color: var(--ta-primary); letter-spacing: -0.03em; } .ta-logo-name-sub { font-family: var(--ta-font-body); font-size: 11px; font-weight: 600; color: var(--ta-tertiary); letter-spacing: 0.12em; text-transform: uppercase; } /* ───────────────────────────────────────── MENÚ PRINCIPAL ───────────────────────────────────────── */ .ta-nav { flex: 1; display: flex; justify-content: center; } .ta-nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } /* Items de primer nivel */ .ta-nav-menu > li { position: relative; } .ta-nav-menu > li > a { display: flex; align-items: center; gap: 4px; font-family: var(--ta-font-body); font-size: 15px; font-weight: 500; color: var(--ta-on-surface-variant); text-decoration: none; padding: 8px 14px; border-radius: var(--ta-radius-md); transition: color var(--ta-transition), background var(--ta-transition); position: relative; white-space: nowrap; } .ta-nav-menu > li > a:hover, .ta-nav-menu > li.current-menu-item > a, .ta-nav-menu > li.current_page_item > a, .ta-nav-menu > li.current-menu-parent > a, .ta-nav-menu > li.current-menu-ancestor > a { color: var(--ta-primary); background: rgba(0,52,111,0.06); } /* Indicador subrayado activo */ .ta-nav-menu > li.current-menu-item > a::after, .ta-nav-menu > li.current_page_item > a::after { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 2px; background: var(--ta-primary); border-radius: var(--ta-radius-full); } /* Sub-menú dropdown */ .ta-nav-menu .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--ta-outline-variant); border-radius: var(--ta-radius-lg); box-shadow: var(--ta-shadow-xl); padding: 8px; list-style: none; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s var(--ta-ease), transform 0.2s var(--ta-ease), visibility 0.2s; pointer-events: none; } .ta-nav-menu > li:hover > .sub-menu, .ta-nav-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .ta-nav-menu .sub-menu a { display: block; padding: 10px 14px; font-size: 14px; color: var(--ta-on-surface); text-decoration: none; border-radius: var(--ta-radius-md); transition: background var(--ta-transition), color var(--ta-transition); } .ta-nav-menu .sub-menu a:hover { background: rgba(0,52,111,0.07); color: var(--ta-primary); } /* ───────────────────────────────────────── ACCIONES NAVBAR ───────────────────────────────────────── */ .ta-navbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* CTA Button */ .ta-navbar-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--ta-primary); color: #fff; font-family: var(--ta-font-body); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: var(--ta-radius-md); text-decoration: none; white-space: nowrap; transition: background var(--ta-transition), transform var(--ta-duration) var(--ta-ease), box-shadow var(--ta-transition); box-shadow: var(--ta-shadow-sm); } .ta-navbar-cta:hover { background: var(--ta-primary-container); color: #fff; transform: translateY(-1px); box-shadow: var(--ta-shadow-md); } .ta-navbar-cta:active { transform: scale(0.97); } /* WhatsApp icono */ .ta-navbar-wa { width: 40px; height: 40px; border-radius: var(--ta-radius-md); background: rgba(37,211,102,0.1); color: #25d366; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background var(--ta-transition), transform var(--ta-transition); flex-shrink: 0; } .ta-navbar-wa:hover { background: #25d366; color: #fff; transform: scale(1.08); } /* ───────────────────────────────────────── CARRITO ───────────────────────────────────────── */ .ta-navbar-cart { position: relative; width: 40px; height: 40px; border-radius: var(--ta-radius-md); background: rgba(0,52,111,0.06); color: var(--ta-primary); display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; transition: background var(--ta-transition), transform var(--ta-transition), color var(--ta-transition); } .ta-navbar-cart:hover { background: var(--ta-primary); color: #fff; transform: scale(1.08); } .ta-navbar-cart__badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; background: var(--ta-tertiary); color: #fff; font-family: var(--ta-font-body); font-size: 10px; font-weight: 700; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; border: 2px solid #fff; transition: transform 0.25s var(--ta-ease), opacity 0.2s; } .ta-navbar-cart__badge.is-empty { opacity: 0; transform: scale(0); pointer-events: none; } /* ───────────────────────────────────────── HAMBURGER BUTTON ───────────────────────────────────────── */ .ta-hamburger-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--ta-outline-variant); border-radius: var(--ta-radius-md); cursor: pointer; padding: 0; flex-shrink: 0; transition: background var(--ta-transition), border-color var(--ta-transition); -webkit-tap-highlight-color: transparent; } .ta-hamburger-btn:hover { background: var(--ta-surface-container); border-color: var(--ta-outline); } .ta-hamburger-icon { display: flex; flex-direction: column; gap: 5px; width: 20px; } .ta-hamburger-icon span { display: block; height: 2px; background: var(--ta-on-surface); border-radius: var(--ta-radius-full); transition: transform 0.3s var(--ta-ease), opacity 0.2s, width 0.3s var(--ta-ease); transform-origin: center; } .ta-hamburger-icon span:nth-child(3) { width: 14px; } /* Estado abierto */ .ta-hamburger-btn[aria-expanded="true"] .ta-hamburger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ta-hamburger-btn[aria-expanded="true"] .ta-hamburger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); } .ta-hamburger-btn[aria-expanded="true"] .ta-hamburger-icon span:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); } /* ───────────────────────────────────────── OVERLAY OSCURO (móvil) ───────────────────────────────────────── */ .ta-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ta-ease); } .ta-nav-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ───────────────────────────────────────── MENÚ MÓVIL — Drawer lateral / Panel full ───────────────────────────────────────── */ @media (max-width: 1024px) { /* backdrop-filter convierte al navbar en containing block de los position:fixed internos y atrapa/recorta el panel del menú. En móvil/tablet se quita y se usa fondo sólido. */ .ta-navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } .ta-hamburger-btn { display: flex; } .ta-nav-overlay { display: block; } /* Ocultar CTA en tablet pequeño */ @media (max-width: 600px) { .ta-navbar-cta { display: none; } } /* Panel deslizante desde la derecha */ .ta-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; z-index: 999; flex-direction: column; justify-content: flex-start; overflow-y: auto; padding: 24px 0; transform: translateX(100%); transition: transform 0.35s var(--ta-ease-out); box-shadow: -8px 0 40px rgba(0,52,111,0.15); border-left: 1px solid var(--ta-outline-variant); /* Sobreescribir flex del desktop */ display: flex !important; } .ta-nav.is-open { transform: translateX(0); } /* Header dentro del panel */ .ta-nav::before { content: ''; display: block; height: 76px; /* espacio para el navbar */ flex-shrink: 0; } .ta-nav-menu { flex-direction: column; align-items: stretch; gap: 2px; padding: 16px 16px 24px; width: 100%; } .ta-nav-menu > li > a { font-size: 17px; font-weight: 600; padding: 14px 16px; border-radius: var(--ta-radius-md); justify-content: space-between; } .ta-nav-menu > li > a::after { display: none !important; } /* Sub-menú en móvil — se despliega inline */ .ta-nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: var(--ta-surface-container-low); border-radius: var(--ta-radius-md); padding: 4px 8px; margin: 4px 0 8px 16px; pointer-events: auto; display: none; } .ta-nav-menu > li.is-open > .sub-menu { display: block; } .ta-nav-menu .sub-menu a { font-size: 15px; padding: 10px 12px; } /* CTA dentro del panel — visible solo en móvil */ .ta-nav-menu-footer { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 0; margin-top: auto; border-top: 1px solid var(--ta-outline-variant); } .ta-nav-cta-mobile { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--ta-primary); color: #fff; border-radius: var(--ta-radius-md); font-weight: 700; font-size: 15px; text-decoration: none; transition: background var(--ta-transition); } .ta-nav-cta-mobile:hover { background: var(--ta-primary-container); color: #fff; } .ta-nav-wa-mobile { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: rgba(37,211,102,0.1); color: #1a8040; border-radius: var(--ta-radius-md); font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid rgba(37,211,102,0.3); transition: background var(--ta-transition); } .ta-nav-wa-mobile:hover { background: #25d366; color: #fff; border-color: #25d366; } /* Info de contacto al pie del panel */ .ta-nav-contact-mini { padding: 16px; font-size: 13px; color: var(--ta-on-surface-variant); } .ta-nav-contact-mini a { color: var(--ta-primary); } } /* El footer del panel móvil NO debe verse en desktop. (Scoped al desktop: si fuera regla global pisaría, por orden de cascada, el display:flex del media query móvil de arriba.) */ @media (min-width: 1025px) { .ta-nav-menu-footer { display: none; } } /* ───────────────────────────────────────── OFFSET DEL BODY PARA HEADER FIJO ───────────────────────────────────────── */ body { padding-top: calc(36px + 76px); /* topbar + navbar */ } /* Cuando se hace scroll, topbar desaparece */ body.ta-header-scrolled { /* El padding lo maneja JS dinámicamente */ } @media (max-width: 768px) { body { padding-top: 76px; /* solo navbar (topbar oculta en móvil) */ } }