/* ═══════════════════════════════════════════════════════════ LAYOUT.CSS — Topbar, Navbar, Footer, WhatsApp flotante WebClicStudio Fuente única de la maqueta del "chrome" del sitio. Se enlaza en el de todas las páginas: el nav y el footer llegan desde partials/*.php ya renderizados, así que su CSS debe estar disponible ANTES del primer pintado. Antes esto lo inyectaba layout.js en tiempo de ejecución, lo que provocaba que el header y el footer se pintaran sin estilo (y luego colapsaran) en cada carga. No mover estas reglas de vuelta a JavaScript. ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ TOPBAR — Línea superior de contacto y redes ══════════════════════════════════════════════════════ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 910; height: var(--topbar-h, 36px); background: #B80F1D; display: flex; align-items: center; transition: transform .3s ease; } .topbar--hidden { transform: translateY(-100%); } .topbar__inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .topbar__left { display: flex; align-items: center; gap: 16px; } .topbar__item { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.90); text-decoration: none; transition: color .15s; } .topbar__item:hover { color: #fff; } .topbar__item svg { opacity: 0.85; flex-shrink: 0; } .topbar__sep { width: 1px; height: 12px; background: rgba(255,255,255,0.30); } .topbar__right { display: flex; align-items: center; gap: 12px; } .topbar__social { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.90); text-decoration: none; transition: color .15s, background .15s, border-color .15s, transform .15s; flex-shrink: 0; } .topbar__social:hover { color: #fff; background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); } @media (max-width: 640px) { .topbar__left .topbar__item:last-child, .topbar__left .topbar__sep { display: none; } .topbar__inner { padding: 0 16px; } } /* ══════════════════════════════════════════════════════ NAVBAR — WebClicStudio (SVG-based, professional) ══════════════════════════════════════════════════════ */ /* ─ Base ─ */ .navbar { position: fixed; top: var(--topbar-h, 36px); /* queda debajo del topbar */ left: 0; right: 0; z-index: 900; height: var(--nav-h, 84px); background: #fff; border-bottom: 1px solid transparent; transition: top .3s ease, border-color .3s, box-shadow .3s, background .3s; } .navbar.scrolled { top: 0; /* sube al ocultarse el topbar */ background: rgba(255,255,255,0.97); border-color: #EAECF0; box-shadow: 0 1px 0 #EAECF0, 0 4px 24px rgba(16,24,40,0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ─ Inner layout ─ */ .nb-inner { display: flex; align-items: center; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; gap: 0; } /* ─ Logo ─ */ .nb-logo { flex-shrink: 0; margin-right: 40px; line-height: 0; text-decoration: none; } .nb-logo img { height: 60px; width: auto; display: block; object-fit: contain; } /* ─ Nav links — centrados en el espacio disponible ─ */ .nb-nav { display: flex; align-items: center; gap: 0; margin: 0 auto; } .nb-link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; font-weight: 500; color: #344054; text-decoration: none; border-radius: 8px; border: none; background: none; cursor: pointer; white-space: nowrap; line-height: 1; letter-spacing: -0.01em; transition: color .15s, background .15s; -webkit-font-smoothing: antialiased; } .nb-link:hover { color: #E0121B; background: #FFF5F5; } /* Active indicator */ .nb-link--active { color: #E0121B !important; font-weight: 700 !important; background: transparent !important; } .nb-link--active::after { content: ''; position: absolute; bottom: -1px; left: 8px; right: 8px; height: 2.5px; background: #E0121B; border-radius: 2px; } /* Dropdown button activo (cuando estás en una sub-página) */ .nb-drop-btn.nb-link--active .nav-chevron { color: #E0121B; opacity: 1; } /* ─ Dropdown trigger ─ */ .nb-drop { position: relative; } .nb-drop-btn { cursor: pointer; } .nav-chevron { flex-shrink: 0; opacity: 0.5; transition: transform .2s ease, opacity .15s; } .nb-drop-btn:hover .nav-chevron { opacity: 0.85; } .nb-drop-btn[aria-expanded="true"] { color: #E0121B; background: #FFF5F5; } .nb-drop-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); opacity: 1; color: #E0121B; } /* ─ Dropdown panel ─ */ .nb-drop-panel { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1px solid #EAECF0; border-radius: 16px; box-shadow: 0 4px 6px -2px rgba(16,24,40,0.03), 0 12px 16px -4px rgba(16,24,40,0.08), 0 24px 48px -12px rgba(16,24,40,0.10); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top left; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 300; overflow: hidden; } .nb-drop:hover .nb-drop-panel, .nb-drop-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nb-drop-panel--wide { width: 540px; } .nb-drop-panel--compact { width: 240px; } /* Panel header */ .nb-drop-header { padding: 16px 16px 12px; border-bottom: 1px solid #F2F4F7; } .nb-drop-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #98A2B3; line-height: 1; } .nb-drop-sub { font-size: 12px; color: #667085; margin-top: 4px; line-height: 1.4; } /* 2-column grid for Soluciones */ .nb-drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px; } .nb-drop-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #1D2939; transition: background .13s; } .nb-drop-item:hover { background: #F9FAFB; } .nb-drop-item:hover .nb-drop-ico { background: #FEE2E2; color: #C01010; } .nb-drop-ico { width: 36px; height: 36px; border-radius: 10px; background: #FEF3F2; display: flex; align-items: center; justify-content: center; color: #E0121B; flex-shrink: 0; transition: background .13s, color .13s; } .nb-drop-ico svg { width: 18px; height: 18px; } .nb-drop-text strong { display: block; font-size: 13px; font-weight: 600; color: #101828; line-height: 1.3; margin-bottom: 2px; } .nb-drop-text span { display: block; font-size: 11.5px; color: #667085; line-height: 1.4; } /* Sectores list */ .nb-sector-list { padding: 8px; display: flex; flex-direction: column; gap: 1px; } .nb-sector-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #344054; text-decoration: none; transition: background .13s, color .13s; } .nb-sector-item:hover { background: #FFF5F5; color: #E0121B; } .nb-sector-item:hover .nb-sector-ico { color: #E0121B; } .nb-sector-ico { color: #98A2B3; display: flex; align-items: center; flex-shrink: 0; transition: color .13s; } .nb-sector-ico svg { width: 16px; height: 16px; } /* Panel footer */ .nb-drop-footer { border-top: 1px solid #F2F4F7; padding: 10px 12px; } .nb-drop-footer-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #E0121B; text-decoration: none; padding: 6px 8px; border-radius: 7px; transition: background .13s; } .nb-drop-footer-link:hover { background: #FFF5F5; } .nb-drop-footer-link svg { opacity: 0.8; } /* ─ Actions area ─ */ .nb-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 0; } /* CTA button: WhatsApp green pill */ .nb-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #22C55E; color: #fff; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(34,197,94,0.08), 0 4px 14px rgba(34,197,94,0.30); transition: background .16s, transform .13s, box-shadow .16s; will-change: transform; -webkit-font-smoothing: antialiased; } .nb-cta:hover { background: #16A34A; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(34,197,94,0.08), 0 8px 22px rgba(34,197,94,0.42); } .nb-cta:active { transform: translateY(0); } .nb-cta svg { flex-shrink: 0; } /* ─ Language toggle ─ */ .lang-toggle-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 46px; padding: 0 14px; background: #fff; color: #344054; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; border-radius: 100px; border: 1.5px solid #E4E7EC; cursor: pointer; flex-shrink: 0; transition: background .13s, border-color .13s, color .13s; } .lang-toggle-btn:hover { background: #FFF5F5; border-color: #E0121B; color: #E0121B; } .lang-toggle-btn--mobile { display: none; width: 100%; height: 44px; margin-top: 14px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; } .lang-toggle-btn--mobile:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; } /* ─ Hamburger ─ */ .nb-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: none; border: 1.5px solid #E4E7EC; cursor: pointer; color: #344054; transition: background .13s, border-color .13s; flex-shrink: 0; } .nb-burger:hover { background: #F9FAFB; border-color: #D0D5DD; } /* Ocultar elementos exclusivos del panel móvil en escritorio */ .nb-mobile-header, .nb-mobile-footer { display: none; } /* ─ Mobile nav — Full-screen overlay premium ────────────── */ @media (max-width: 1140px) { .nb-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: #0A0A0F; flex-direction: column; align-items: stretch; padding: 0; gap: 0; box-shadow: none; border: none; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .38s cubic-bezier(.23,1,.32,1), opacity .3s, visibility .38s; overflow-y: auto; overflow-x: hidden; z-index: 970; -webkit-overflow-scrolling: touch; } .nb-nav.open { transform: translateY(0); opacity: 1; visibility: visible; } /* Header del panel móvil */ .nb-nav::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #E0121B, #FF4D57, #E0121B); background-size: 200% 100%; animation: mnavGlow 3s linear infinite; } @keyframes mnavGlow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* Mostrar elementos móviles solo en mobile */ .nb-mobile-header, .nb-mobile-footer { display: flex; } /* Sección superior: logo + cerrar */ .nb-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .nb-mobile-brand { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -.02em; } .nb-mobile-brand span { color: #E0121B; } /* Links en mobile */ .nb-link { padding: 16px 24px; border-radius: 0; width: 100%; justify-content: space-between; font-size: 17px; font-weight: 600; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s, color .15s, padding-left .2s; } .nb-link:hover { color: #fff; background: rgba(224,18,27,.1); padding-left: 28px; } .nb-link:last-of-type { border-bottom: none; } .nb-link--active::after { display: none; } .nb-link--active { color: #E0121B !important; background: rgba(224,18,27,.08) !important; border-left: 3px solid #E0121B; padding-left: 21px; } /* Dropdown panels en mobile */ .nb-drop-panel { position: static; width: auto !important; box-shadow: none; border: none; border-radius: 0; background: rgba(255,255,255,.03); margin: 0; opacity: 1 !important; visibility: visible !important; transform: none !important; display: none; overflow: visible; border-left: 3px solid rgba(224,18,27,.5); padding: 4px 0; margin-left: 24px; border-radius: 0 0 8px 8px; } .nb-drop-panel.open { display: block; } .nb-drop-header { padding: 8px 16px 4px; } .nb-drop-header .nb-drop-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.3); font-weight: 700; } .nb-drop-sub { display: none; } .nb-drop-grid { grid-template-columns: 1fr; padding: 4px 8px; gap: 2px; } .nb-drop-item { padding: 10px 12px; border-radius: 8px; gap: 10px; } .nb-drop-item:hover { background: rgba(255,255,255,.06); } .nb-drop-item strong { font-size: 13px; color: rgba(255,255,255,.9); } .nb-drop-item span { font-size: 11px; color: rgba(255,255,255,.4); } .nb-drop-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(224,18,27,.15); color: #FB6B72; } .nb-drop-ico svg { width: 15px; height: 15px; } .nb-sector-list { padding: 4px 8px; } .nb-sector-item { padding: 10px 12px; font-size: 14px; color: rgba(255,255,255,.75); } .nb-sector-item:hover { background: rgba(255,255,255,.06); color: #fff; } .nb-sector-ico { color: rgba(255,255,255,.4); } .nb-drop-footer { border-top: 1px solid rgba(255,255,255,.06); margin: 4px 8px 0; padding: 8px 4px; } .nb-drop-footer-link { color: #FB6B72; } .nb-drop-footer-link:hover { background: rgba(224,18,27,.1); } .nav-chevron { color: rgba(255,255,255,.4); } .nb-burger { display: flex; } /* Toggle de idioma: se oculta en la barra y se muestra dentro del panel móvil */ .nb-actions > .lang-toggle-btn { display: none; } .lang-toggle-btn--mobile { display: flex; } /* CTA WA en mobile — texto visible */ .nb-cta { padding: 10px 14px; border-radius: 100px; width: auto; height: auto; } .nb-cta span { display: inline; font-size: 12px; } /* Footer del panel móvil: contacto + redes */ .nb-mobile-footer { margin-top: auto; padding: 20px 24px 32px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 14px; } .nb-mobile-footer__label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 2px; } .nb-mobile-contact { display: flex; flex-direction: column; gap: 10px; } .nb-mobile-contact a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; } .nb-mobile-contact a:hover { color: #fff; } .nb-mobile-contact svg { flex-shrink: 0; color: #E0121B; } .nb-mobile-socials { display: flex; gap: 10px; } .nb-mobile-socials a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.65); text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .nb-mobile-socials a:hover { background: rgba(224,18,27,.2); border-color: rgba(224,18,27,.4); color: #fff; } .nb-mobile-wa { display: flex; align-items: center; justify-content: center; gap: 10px; background: #22C55E; color: #fff; font-size: 14px; font-weight: 700; padding: 14px; border-radius: 14px; text-decoration: none; transition: background .2s, transform .15s; box-shadow: 0 8px 24px rgba(34,197,94,.3); } .nb-mobile-wa:hover { background: #16A34A; transform: translateY(-2px); } } @media (max-width: 480px) { .nb-inner { padding: 0 16px; } .nb-logo { margin-right: auto; } .nb-logo img { height: 42px; } .nb-drop-grid { grid-template-columns: 1fr; } .nb-actions { gap: 12px; } .nb-cta span { display: none; } .nb-cta { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; } .nb-nav { border-left: none; } } /* ─ Footer ────────────────────────────────────────────── */ .footer { background: #000; border-top: 1px solid rgba(255,255,255,0.05); } .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-top: 60px; padding-bottom: 60px; } @media (max-width: 1024px) { .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .footer__inner { grid-template-columns: 1fr; gap: 32px; } } .footer__logo { height: 40px; width: auto; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: 16px; } .footer__brand p { font-size: 14px; color: #6B7280; line-height: 1.7; max-width: 280px; margin-bottom: 20px; } .footer__social { display: flex; gap: 10px; } .footer__social a { width: 36px; height: 36px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #6B7280; transition: background .2s, border-color .2s, color .2s; } .footer__social a:hover { background: rgba(224,18,27,0.15); border-color: rgba(224,18,27,0.30); color: var(--red); } .footer__col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: #fff; margin-bottom: 20px; } .footer__col ul { display: flex; flex-direction: column; gap: 10px; } .footer__col ul a { font-size: 14px; color: #6B7280; transition: color .2s; } .footer__col ul a:hover { color: #fff; } .footer__contact li { display: flex; align-items: center; gap: 10px; } .footer__contact i { color: var(--red); font-size: 14px; width: 16px; } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 0; } .footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer__bottom p { font-size: 13px; color: #4B5563; } .footer__tagline { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #374151; } /* ─ WhatsApp flotante ─ */ .wa-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,0.40); z-index: 800; text-decoration: none; /* Oculto por defecto — aparece al scrollear (no distrae en el hero) */ opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.85); transition: opacity .3s ease, transform .3s ease, box-shadow .2s, visibility .3s; } .wa-float--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .wa-float--visible:hover { transform: translateY(0) scale(1.1); box-shadow: 0 12px 32px rgba(37,211,102,0.50); } /* Safe area iOS — bottom (home indicator) */ @supports (padding: env(safe-area-inset-bottom)) { .wa-float { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); } } /* Mobile nav: espacio para home indicator */ @media (max-width: 1140px) { @supports (padding: env(safe-area-inset-bottom)) { .nb-mobile-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } } } /* Footer pequeño en móvil muy pequeño */ @media (max-width: 480px) { .footer__bottom-inner { flex-wrap: wrap; justify-content: center; } .footer__bottom p, .footer__tagline { text-align: center; width: 100%; } } @media (max-width: 380px) { .footer__inner { padding-top: 40px; padding-bottom: 40px; gap: 24px; } .footer__bottom-inner { flex-direction: column; gap: 6px; } }