/* ═══════════════════════════════════════════════════════ ARCFOX CÓRDOBA — HEADER + FOOTER Fuente única del "chrome" del sitio. Se carga al final del de cada página, después de los estilos inline, para sobrescribir el header viejo. Las url() se resuelven relativas a ESTE archivo, así que funcionan igual desde /, /arcfox-t1/, /nosotros/, etc. ═══════════════════════════════════════════════════════ */ /* ── TIPOGRAFÍA ── */ @font-face{font-family:"Dinnex";font-weight:200;src:url("../wp-content/uploads/2026/01/dinnextw1g_ultralight.otf") format("opentype");font-display:swap} @font-face{font-family:"Dinnex";font-weight:300;src:url("../wp-content/uploads/2026/01/dinnextw1g_light.otf") format("opentype");font-display:swap} @font-face{font-family:"Dinnex";font-weight:400;src:url("../wp-content/uploads/2026/01/dinnextw1g.otf") format("opentype");font-display:swap} @font-face{font-family:"Dinnex";font-weight:500;src:url("../wp-content/uploads/2026/01/dinnextw1g_medium.otf") format("opentype");font-display:swap} @font-face{font-family:"Dinnex";font-weight:700;src:url("../wp-content/uploads/2026/01/dinnextw1g_bold.otf") format("opentype");font-display:swap} @font-face{font-family:"Dinnex";font-weight:800;src:url("../wp-content/uploads/2026/01/dinnextw1g_heavy.otf") format("opentype");font-display:swap} @font-face{font-family:"Dinnex";font-weight:900;src:url("../wp-content/uploads/2026/01/dinnextw1g_black.otf") format("opentype");font-display:swap} :root{ --acento:#4698cb; /* Pantone 7688 C — manual de identidad */ --acento-oscuro:#3782b3; --negro:#000; } /* ═══ HEADER ═══ */ #header{ position:fixed;top:0;left:0;right:0;z-index:1000; background:#fff; display:flex;align-items:center;justify-content:space-between; padding:12px 30px; box-shadow:0 1px 4px rgba(0,0,0,.08); transition:padding .3s; } #header.scrolled{padding:8px 30px} /* El logo manda la altura del header: 54px = misma altura que el logo anterior */ .header-logo img{height:54px;width:auto;max-width:none} /* ── NAV DESKTOP ── */ .nav-desktop{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0} .nav-desktop>li{position:relative;margin:0 10px} .nav-desktop>li>a{ font-family:"Dinnex",sans-serif;font-weight:300;font-size:16px;color:#000; padding:15px 0;display:flex;align-items:center;gap:4px; transition:color .2s;border-bottom:2px solid transparent; } .nav-desktop>li>a:hover, .nav-desktop>li:hover>a{color:var(--acento)} .nav-desktop>li>a.activo{color:var(--acento)} .nav-desktop>li>a .arrow{font-size:10px;transition:transform .2s} .nav-desktop>li:hover>a .arrow{transform:rotate(180deg)} /* ── MEGA MENÚ ── */ .mega-menu{ display:none;position:fixed;top:78px;left:0;width:100%; background:#fff;border:1px solid #e8e8e8;padding:30px 20px;z-index:999; } .nav-desktop>li:hover .mega-menu{display:block} /* Con el header encogido el panel tiene que subir, si no queda una franja de la página asomando entre el header y el mega menú. */ #header.scrolled .mega-menu{top:70px} /* Puente invisible entre el link "Modelos" y el mega menú. Entre el borde de abajo del link (~64px) y el panel (78px) hay un hueco: al bajar el mouse hacia los autos se perdía el :hover y el menú se cerraba. El ::after sólo existe mientras el li está en hover, así que no tapa nada. */ .nav-desktop>li:has(.mega-menu):hover::after{ content:"";position:absolute;left:-14px;right:-14px;top:100%;height:26px; } .mega-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .mega-menu-item{ text-align:center;padding:8px;cursor:pointer;transition:background .2s; display:flex;flex-direction:column;align-items:center;justify-content:flex-end; } .mega-menu-item:hover{background:#f0f0f0} .mega-menu-item img{width:100%;margin-bottom:8px;object-fit:contain} .mega-menu-item span{font-size:16px;font-weight:300;color:#000} /* ── REDES EN EL HEADER ── */ .header-social{display:flex;align-items:center;gap:16px} .header-social a{color:#000;display:flex;align-items:center;line-height:0;transition:color .2s,transform .2s} .header-social a:hover{color:var(--acento);transform:translateY(-2px)} .header-social svg{width:20px;height:20px;fill:currentColor;display:block} /* ── HAMBURGUESA ── */ .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px} .hamburger span{display:block;width:28px;height:3px;background:#000;transition:all .3s} .hamburger:hover span{background:var(--acento)} .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ── MENÚ MOBILE ── */ .mobile-menu{ display:none;position:fixed;top:78px;left:0;right:0;background:#fff;z-index:999; padding:0;border-top:1px solid #eee;max-height:calc(100vh - 78px);overflow-y:auto; } .mobile-menu.open{display:block} .mobile-menu ul{list-style:none;margin:0;padding:0} .mobile-menu>ul>li>a, .mobile-menu>ul>li>span{ display:flex;align-items:center;justify-content:space-between; padding:14px 20px;font-size:16px;font-weight:300;color:#000; border-bottom:1px solid #e8e8e8;cursor:pointer;transition:background .2s,color .2s; } .mobile-menu>ul>li>a:hover, .mobile-menu>ul>li>span:hover{color:var(--acento)} .mobile-menu>ul>li>span.active .fa-caret-down{transform:rotate(180deg)} .mobile-menu>ul>li>span .fa-caret-down{transition:transform .2s} .mobile-submenu{display:none;background:#fff;padding:0} .mobile-submenu.open{display:block} .mobile-submenu-grid{display:grid;grid-template-columns:1fr;gap:0} .mobile-submenu-item{text-align:center;padding:16px 20px;border-bottom:1px solid #e8e8e8;transition:background .2s} .mobile-submenu-item:hover{background:#f7f7f7} .mobile-submenu-item img{width:100%;max-width:320px;margin:0 auto 8px;display:block;object-fit:contain} .mobile-submenu-item span{font-size:16px;font-weight:300} .mobile-social{display:flex;gap:28px;align-items:center;padding:24px 25px 14px;border-top:1px solid #eee;margin-top:8px} .mobile-social a{color:#000;display:flex;align-items:center;line-height:0;transition:color .2s} .mobile-social a:hover{color:var(--acento)} .mobile-social svg{width:26px;height:26px;fill:currentColor;display:block} /* ═══ FOOTER ═══ */ #logo-bar{display:none} /* barra de logos vieja, reemplazada por el footer */ #site-footer{ background:var(--negro);color:#fff; font-family:"Dinnex",sans-serif;font-weight:300; padding:60px 30px 0; } .footer-inner{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px; align-items:start; } .footer-col h3{ font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:#fff;margin-bottom:18px; } .footer-col p, .footer-col a{font-size:15px;line-height:1.7;color:rgba(255,255,255,.75)} .footer-col a{display:block;transition:color .2s} .footer-col a:hover{color:var(--acento)} .footer-col ul{list-style:none;margin:0;padding:0} .footer-brand img{width:230px;margin-bottom:18px} .footer-brand p{font-size:14px;color:rgba(255,255,255,.6);max-width:280px} .footer-social{display:flex;gap:18px;margin-top:22px} .footer-social a{color:#fff;line-height:0;transition:color .2s,transform .2s} .footer-social a:hover{color:var(--acento);transform:translateY(-2px)} .footer-social svg{width:22px;height:22px;fill:currentColor;display:block} .footer-dato{margin-bottom:14px} .footer-dato span{ display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:rgba(255,255,255,.45);margin-bottom:2px; } .footer-mapa{color:var(--acento)!important;font-weight:400;margin-top:6px} .footer-legal{ max-width:1280px;margin:50px auto 0;padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.15); display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; } .footer-legal p{font-size:13px;color:rgba(255,255,255,.55)} .footer-legal a{font-size:13px;color:rgba(255,255,255,.55);transition:color .2s} .footer-legal a:hover{color:var(--acento)} /* ── VOLVER ARRIBA + WHATSAPP FLOTANTE ── */ #back-top{ position:fixed;bottom:30px;right:30px;width:44px;height:44px; background:var(--acento);color:#fff; display:flex;align-items:center;justify-content:center; border-radius:3px;font-size:16px;cursor:pointer; opacity:0;pointer-events:none;transition:opacity .3s,background .2s;z-index:500; } #back-top.visible{opacity:1;pointer-events:auto} #back-top:hover{background:var(--acento-oscuro)} .wa-float{ position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%; background:#25d366;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:1200;transition:transform .2s,box-shadow .2s; } .wa-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3)} .wa-float svg{width:32px;height:32px;fill:#fff;display:block} /* ═══ RESPONSIVE ═══ */ /* Con "Posventa" y "Usados Seleccionados" el menú es más largo: se compacta un poco antes de saltar a la hamburguesa (1024px). */ @media (max-width:1250px){ .nav-desktop>li{margin:0 7px} .nav-desktop>li>a{font-size:15px} .header-social{gap:12px} } @media (max-width:1100px){ .nav-desktop>li{margin:0 5px} .nav-desktop>li>a{font-size:14px} } @media (max-width:1024px){ .nav-desktop{display:none} .header-social{display:none} .hamburger{display:flex} .header-logo img{height:38px} .mega-menu,.mobile-menu{top:62px} .mobile-menu{max-height:calc(100vh - 62px)} .footer-inner{grid-template-columns:1fr 1fr;gap:34px} .footer-brand{grid-column:1 / -1} } @media (max-width:767px){ #header{padding:12px 15px} #header.scrolled{padding:8px 15px} .header-logo img{height:36px} .mega-menu,.mobile-menu{top:60px} .mobile-menu{max-height:calc(100vh - 60px)} #site-footer{padding:44px 20px 0} .footer-inner{grid-template-columns:1fr;gap:30px} .footer-brand img{width:190px} .footer-legal{margin-top:34px;justify-content:center;text-align:center} .wa-float{right:16px;bottom:16px;width:52px;height:52px} .wa-float svg{width:28px;height:28px} #back-top{bottom:86px;right:22px} }