/* ═══════════════════════════════════════════════════════════ Oficina Virtual Calama — Estilos de Navegación Archivo: css/nav.css Cargar ANTES del CSS específico de cada página. ═══════════════════════════════════════════════════════════ */ /* ── Fuente del menú (Barlow) para TODAS las páginas ────────── Garantiza que el nav se vea igual aunque la página no cargue Barlow en su (ej. utilidades y calculadoras usan Inter). */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap'); /* ── Variables base (fallback si la página no las define) ── */ :root { --naranja: #e87722; --naranja-oscuro: #c25a0c; --naranja-claro: #ffa45a; --naranja-muyclaro:#fff2e6; --gris-oscuro: #1a1a1a; --gris-medio: #4a4a4a; --gris-claro: #767676; --gris-borde: #e0e0e0; --gris-fondo: #f5f5f5; --blanco: #ffffff; --negro: #000000; --verde: #067112; --verde-claro: #16ab27; --sombra: 0 4px 24px rgba(0,0,0,0.12); } /* ── TOPBAR ──────────────────────────────────────────────── */ .topbar { background: var(--gris-oscuro); color: #ccc; font-family: 'Barlow', sans-serif; font-size: 0.82rem; padding: 7px 0; border-bottom: 2px solid var(--naranja); line-height: 1.4; overflow: hidden; } .topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 5px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .topbar a { color: var(--naranja-claro); text-decoration: none; } .topbar a:hover { color: var(--blanco); } .topbar-left, .topbar-right { display: flex; gap: 16px; align-items: center; flex-wrap: nowrap; } /* ── SOCIAL BAR ──────────────────────────────────────────── */ .social-bar { background: #111; padding: 10px 0; border-top: 2px solid var(--naranja); } .social-bar .container { display: flex; justify-content: center; gap: 14px; align-items: center; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .social-bar span { color: var(--blanco); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; } .social-btn { display: flex; align-items: center; gap: 7px; text-decoration: none; padding: 7px 16px; border-radius: 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 650; font-size: 0.90rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; } .social-btn:hover { transform: translateY(-2px); filter: brightness(1.1); } .social-btn svg { width: 17px; height: 17px; flex-shrink: 0; } .s-facebook { background: #1877F2; color: #fff; } .s-instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; } .s-tiktok { background: #010101; color: #fff; border: 1px solid #333; } .s-youtube { background: #FF0000; color: #fff; } /* ── NAVBAR ──────────────────────────────────────────────── */ nav { position: sticky; top: 0; z-index: 100; background: var(--blanco); box-shadow: 0 2px 12px rgba(0,0,0,0.10); border-bottom: 3px solid var(--naranja); font-family: 'Barlow', sans-serif; line-height: 1.4; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 68px; max-width: 1200px; margin: 0 auto; } .logo { display: flex; align-items: center; text-decoration: none; } .logo img { height: 50px; width: auto; mix-blend-mode: multiply; filter: contrast(1.05) saturate(1.1); } .nav-links { display: flex; list-style: none; gap: 2px; align-items: center; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: var(--gris-medio); font-weight: 600; font-size: 0.93rem; text-transform: uppercase; letter-spacing: 0.1px; padding: 7px 11px; border-radius: 9px; transition: all 0.2s; } .nav-links a:hover, .nav-links a.active { background: var(--naranja-oscuro); color: var(--blanco); } /* Dropdown — aislado contra estilos externos (ej. cyr2026.css). cyr2026.css aplica height:0 + overflow:hidden en @media 992px, por eso se necesitan estos !important para que el li no colapse. */ .nav-links .dropdown { position: relative !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; min-width: 0 !important; top: auto !important; left: auto !important; height: auto !important; overflow: visible !important; } .nav-links .dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--blanco); border: 1px solid var(--gris-borde); border-top: 3px solid var(--naranja); min-width: max-content; box-shadow: var(--sombra); z-index: 200; border-radius: 0 0 6px 6px; opacity: 1; visibility: visible; transform: none; } .nav-links .dropdown:hover .dropdown-menu, .nav-links .dropdown:focus-within .dropdown-menu { display: block; } .nav-links .dropdown-menu a { display: block; padding: 9px 14px; font-size: 0.8rem; border-radius: 5px; color: var(--gris-medio); } .nav-links .dropdown-menu a:hover { background: var(--naranja-oscuro); color: var(--blanco); } /* WhatsApp button — especificidad alta para ganar a .nav-links a:hover en cualquier página */ .nav-links a.btn-nav { background: var(--verde-claro) !important; color: var(--blanco) !important; border-radius: 9px !important; padding: 9px 16px !important; font-weight: 450 !important; } .nav-links a.btn-nav:hover { background: var(--verde) !important; color: var(--blanco) !important; } /* Hamburger */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: 2px solid var(--naranja); border-radius: 6px; cursor: pointer; padding: 6px; z-index: 200; transition: background 0.2s; } .hamburger:hover { background: var(--naranja); } .hamburger span { display: block; width: 22px; height: 2px; background: var(--naranja); border-radius: 2px; transition: all 0.3s ease; } .hamburger:hover span { background: var(--blanco); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── FOOTER ──────────────────────────────────────────────── */ footer { background: #111; color: #999; padding: 52px 0 0; font-family: 'Barlow', sans-serif; font-size: 0.78rem; line-height: 1.6; } footer .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 42px; border-bottom: 1px solid rgba(255,255,255,0.07); } .footer-logo-img { height: 96px; width: auto; mix-blend-mode: lighten; filter: brightness(1.15) saturate(1.1); margin-bottom: 11px; display: block; } footer p { line-height: 1.8; color: var(--gris-claro); margin-bottom: 16px; font-size: 1rem; } .footer-contact a { display: flex; align-items: center; gap: 6px; color: var(--blanco); text-decoration: none; margin-bottom: 6px; font-size: 1rem; transition: color 0.2s; } .footer-contact a:hover { color: var(--naranja-claro); } footer h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 2px; color: var(--blanco); margin-bottom: 13px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 6px; } .footer-links a { color: #777; text-decoration: none; font-size: 1.1rem; transition: color 0.2s; } .footer-links a:hover { color: var(--naranja-claro); } .footer-bottom { padding: 16px; text-align: center; font-size: 0.70rem; color: #444; } .footer-bottom a { color: var(--naranja); text-decoration: none; } /* Iconos RRSS en footer */ .footer-social { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; transition: all 0.2s; } .footer-social a:hover { transform: translateY(-2px); filter: brightness(1.2); } .footer-social svg { width: 23px; height: 23px; fill: white; } .fs-fb { background: #1877F2; } .fs-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); } .fs-tt { background: #010101; border: 1px solid #333; } .fs-yt { background: #FF0000; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .topbar-left { display: none; } .hamburger { display: flex; } .nav-links { display: none; position: fixed; top: 68px; left: 0; right: 0; background: var(--blanco); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); border-top: 3px solid var(--naranja); z-index: 999; max-height: calc(100vh - 68px); overflow-y: auto; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 13px 22px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--gris-borde); } .nav-links .dropdown-menu { display: block !important; position: static; box-shadow: none; border: none; border-top: none; background: var(--gris-fondo); border-radius: 0; padding-left: 16px; } .nav-links .dropdown-menu a { font-size: 0.9rem; padding: 10px 22px; border-bottom: 1px solid var(--gris-borde); color: var(--gris-claro); } .nav-links a.btn-nav { margin: 10px 22px 0 !important; border-radius: 6px !important; text-align: center; display: block; } .footer-grid { grid-template-columns: 1fr; } }