/* ═══════════════════════════════════════════════════════════════════════════ OnBox · BARRA Y PIE ÚNICOS (2026-08-03) Antes había DOS componentes distintos conviviendo: la portada tenía su barra y su pie, y las 11 internas otros. Emparejarlos por color no alcanzaba — eran marcados diferentes, así que se seguían viendo distintos. Acá hay uno solo, con clases propias (ob-) para no chocar con .nav/.footer de styles_new.css, y se inyecta el MISMO marcado en todas las páginas. Este archivo no lleva !important ni pisa contenido: solo define la barra y el pie. Por eso puede cargarse también en la portada sin pelearse con sus estilos propios. ═══════════════════════════════════════════════════════════════════════════ */ /* El botón flotante va colgado del , fuera de la barra y del pie, así que necesita ver estas variables. Estaban declaradas solo dentro de esos dos y el botón salía transparente en la portada. */ .ob-nav,.ob-foot,.wa-fab{ --ob-paper:#fbfaf9; --ob-paper2:#f2eeea; --ob-card:#fff; --ob-ink:#141010; --ob-ink2:#48413e; --ob-muted:#7f7773; --ob-borgo:#7a0019; --ob-line:rgba(20,16,16,.12); --ob-line-soft:rgba(20,16,16,.06); --ob-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ob-mono:ui-monospace,Menlo,Consolas,monospace; } /* ── Barra ──────────────────────────────────────────────────────────────── */ .ob-nav{ position:fixed;top:0;left:0;right:0;z-index:1000; font-family:var(--ob-sans); background:rgba(251,250,249,.72);backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid transparent;transition:background .3s,border-color .3s; } .ob-nav.ob-solid{background:rgba(251,250,249,.94);border-bottom-color:var(--ob-line)} .ob-nav__in{ max-width:1220px;margin:0 auto;padding:13px 24px; display:flex;align-items:center;justify-content:space-between;gap:20px; } /* Marca. Estaba chica y las dos lineas no se leian como una unidad: el nombre a 15 px y abajo "SERVICIOS LOGISTICOS" a 9,5 px en monoespaciada gris clara, que al lado de una barra en sans parecia un pie de foto pegado al logo. Ahora es un bloque solo: logo mas grande, nombre con mas peso, y la bajada en la MISMA tipografia del sitio, con el espaciado abierto que se usa en membretes. El gris sube de tono para que se lea sin competir con el nombre. */ .ob-brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto} .ob-brand img{width:41px;height:41px;border-radius:11px;display:block} .ob-brand__t{display:flex;flex-direction:column;line-height:1.12} .ob-brand__n{font-size:17.5px;font-weight:600;color:var(--ob-ink);letter-spacing:-.022em} .ob-brand__s{font-family:var(--ob-sans);font-size:9.8px;font-weight:500;letter-spacing:.19em; text-transform:uppercase;color:var(--ob-ink2);opacity:.72;margin-top:3px;white-space:nowrap} /* En pantallas chicas el nombre solo: la bajada apretaria contra la hamburguesa */ @media(max-width:380px){ .ob-brand img{width:36px;height:36px} .ob-brand__s{display:none} } .ob-links{display:flex;align-items:center;gap:22px} .ob-links a{font-size:14px;color:var(--ob-ink2);text-decoration:none;white-space:nowrap; transition:color .2s} .ob-links a:hover{color:var(--ob-ink)} .ob-links a.ob-on{color:var(--ob-borgo)} .ob-links a.ob-ext::after{content:" ↗";font-size:11px;opacity:.55} .ob-cta{ display:inline-flex;align-items:center;border-radius:9999px;padding:10px 20px; font-size:14px;font-weight:500;background:var(--ob-borgo);color:#fff!important; border:1px solid var(--ob-borgo);text-decoration:none;transition:background .2s,transform .2s; } .ob-cta:hover{background:#8f0020;transform:translateY(-1px)} /* Botón de menú: la portada NO tenía uno y en celular los enlaces simplemente desaparecían, dejando el sitio sin navegación. */ .ob-burger{display:none;width:42px;height:38px;border:1px solid var(--ob-line); border-radius:11px;background:var(--ob-card);cursor:pointer;padding:0; align-items:center;justify-content:center;flex-direction:column;gap:4px} .ob-burger span{display:block;width:17px;height:1.6px;background:var(--ob-ink); border-radius:2px;transition:transform .25s,opacity .25s} .ob-nav[data-abierto="1"] .ob-burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)} .ob-nav[data-abierto="1"] .ob-burger span:nth-child(2){opacity:0} .ob-nav[data-abierto="1"] .ob-burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)} /* Al sacar el botón de la barra sobró lugar, pero "Trabajá con nosotros" es largo: entre 1120 y 1360 se aprieta apenas para no quedar al borde. */ @media(min-width:1121px) and (max-width:1360px){ .ob-links{gap:18px} } @media(max-width:1120px){ .ob-burger{display:flex} .ob-links{ position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch; gap:0;background:rgba(251,250,249,.98);backdrop-filter:blur(14px); border-bottom:1px solid var(--ob-line);padding:8px 24px 18px; display:none; } .ob-nav[data-abierto="1"] .ob-links{display:flex} .ob-links a{padding:13px 0;border-bottom:1px solid var(--ob-line-soft);font-size:15px} .ob-cta{margin-top:14px;justify-content:center;padding:13px 20px} } /* Empuja el contenido: la barra es fija y si no tapa lo primero de la página */ body{padding-top:0} .ob-espacio{height:64px} /* ── Pie ────────────────────────────────────────────────────────────────── */ .ob-foot{ background:var(--ob-paper2);border-top:1px solid var(--ob-line-soft); padding:54px 0 38px;font-family:var(--ob-sans);font-size:13.5px;color:var(--ob-muted); } .ob-foot__in{max-width:1220px;margin:0 auto;padding:0 24px} .ob-foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px} @media(max-width:860px){.ob-foot__g{grid-template-columns:1fr 1fr;gap:26px}} @media(max-width:520px){.ob-foot__g{grid-template-columns:1fr}} .ob-foot h4{font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--ob-ink2);margin:0 0 12px;font-weight:500;font-family:var(--ob-sans)} .ob-foot a{display:block;color:var(--ob-muted);padding:3px 0;text-decoration:none;transition:color .2s} .ob-foot a:hover{color:var(--ob-borgo)} .ob-foot p{margin:0;color:var(--ob-muted);max-width:290px;line-height:1.6} .ob-foot__base{margin-top:34px;padding-top:20px;border-top:1px solid var(--ob-line-soft); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .ob-foot__marca{display:flex;align-items:center;gap:10px;margin-bottom:14px} .ob-foot__marca img{width:30px;height:30px;border-radius:8px} .ob-foot__marca b{color:var(--ob-ink);font-weight:500;font-size:14.5px} /* ── Botón flotante de contacto ────────────────────────────────────────────── Vive acá y no en styles_new.css porque la portada y "cómo trabajamos" no cargan esa hoja: en esas dos el botón directamente no aparecía. Las páginas internas igual lo repintan desde editorial.css, así que se ve igual en todas. */ .wa-fab{ position:fixed;right:18px;bottom:18px;z-index:900; display:inline-flex;align-items:center;gap:10px; height:56px;padding:0 20px 0 17px;border-radius:9999px; background:var(--ob-borgo);color:#fff;text-decoration:none; font-family:var(--ob-sans);font-size:14.5px;font-weight:500; box-shadow:0 4px 10px rgba(20,16,16,.14),0 14px 40px rgba(122,0,25,.28); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } .wa-fab:hover{background:#8f0020;transform:translateY(-2px); box-shadow:0 6px 14px rgba(20,16,16,.16),0 20px 48px rgba(122,0,25,.34)} .wa-fab:focus-visible{outline:3px solid #a8123a;outline-offset:3px} .wa-fab svg{flex:none} /* En celular queda solo el círculo con el ícono: tapa menos pantalla */ @media(max-width:640px){ .wa-fab{height:54px;width:54px;padding:0;justify-content:center;right:14px;bottom:14px} .wa-fab__label{display:none} } @media(prefers-reduced-motion:reduce){.ob-nav,.ob-links,.ob-burger span{transition:none;} .wa-fab{transition:none}} /* ── Intro de marca ──────────────────────────────────────────────────────── Pedido del dueño: en TODAS las paginas (tambien al navegar entre secciones), el logo mas grande, y "que brille, mas epico". Corta y contundente: 1,2s de logo y se va — un golpe de marca, no una pantalla de carga. */ .obx-intro{ position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: radial-gradient(1200px 800px at 50% 42%, #141824, #0a0c11 70%); transition: opacity .45s cubic-bezier(.4,0,.2,1); } /* Halo rojo que respira detras del logo */ .obx-intro::before{ content:''; position: absolute; left: 50%; top: 50%; width: min(92vmin, 760px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(215,58,73,.30), rgba(215,58,73,.08) 45%, transparent 66%); filter: blur(16px); } /* El destello que lo hace "brillar": una franja de luz que barre el logo. */ .obx-intro__wrap{ position: relative; border-radius: 50%; overflow: hidden; width: min(58vmin, 420px); aspect-ratio: 1; box-shadow: 0 0 90px 18px rgba(215,58,73,.28), 0 30px 80px rgba(0,0,0,.6); } .obx-intro__wrap::after{ content:''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.10) 52%, transparent 66%); transform: translateX(-130%); } .obx-intro__logo{ width: 100%; height: 100%; display: block } .obx-intro--out{ opacity: 0; pointer-events: none } .obx-intro--out .obx-intro__wrap{ transform: scale(1.08); transition: transform .45s cubic-bezier(.4,0,.2,1) } @media (prefers-reduced-motion: no-preference){ .obx-intro::before{ animation: obxHalo 1.6s ease-in-out infinite alternate } .obx-intro__wrap{ animation: obxIntro .9s cubic-bezier(.16,.84,.28,1) both } .obx-intro__wrap::after{ animation: obxShine .8s cubic-bezier(.4,0,.2,1) .45s both } } @keyframes obxIntro{ 0% { opacity:0; transform: rotate(-160deg) scale(.55); filter: blur(5px) } 60% { opacity:1; filter: blur(0) } 80% { transform: rotate(5deg) scale(1.05) } 100% { opacity:1; transform: rotate(0deg) scale(1) } } @keyframes obxShine{ to{ transform: translateX(130%) } } @keyframes obxHalo{ from{ opacity:.5; transform: translate(-50%,-50%) scale(.92) } to{ opacity:1; transform: translate(-50%,-50%) scale(1.08) } } @media (prefers-reduced-motion: reduce){ .obx-intro__logo{ opacity: 1 } } /* ── Tiras de logos ──────────────────────────────────────────────────────── Banda CENTRADA con aire y un marco sutil — antes los logos quedaban flotando alineados a la izquierda en el medio de la seccion, sin estructura, y parecian pegados de casualidad. El titulo centrado arriba con sus lineas a los costados es el patron clasico de "trust bar" de sitio corporativo. */ .obx-tira{ margin: 34px auto 0; max-width: 880px; text-align: center } .obx-tira__t{ display: flex; align-items: center; gap: 18px; justify-content: center; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748b; margin: 0 0 22px; } /* Las lineas a los costados del titulo */ .obx-tira__t::before, .obx-tira__t::after{ content:''; height: 1px; flex: 1 1 40px; max-width: 140px; background: linear-gradient(90deg, transparent, #cbd5e1); } .obx-tira__t::after{ background: linear-gradient(90deg, #cbd5e1, transparent) } .obx-tira__items{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 52px; padding: 26px 30px; background: rgba(255,255,255,.65); border: 1px solid #e8edf4; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .obx-tira__logo{ height: 54px; width: auto; max-width: 220px; object-fit: contain; display: block; transition: transform .25s ease, filter .25s ease; } .obx-tira__logo:hover{ transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 6px 14px rgba(15,23,42,.18)) } .obx-tira__logo[data-m="ml"]{ height: 62px } .obx-tira__logo[data-m="tn"]{ height: 48px } .obx-tira__logo[data-m="woo"]{ height: 36px } .obx-tira__logo[data-m="andreani"]{ height: 46px } .obx-tira__logo[data-m="oca"]{ height: 40px } @media (max-width: 560px){ .obx-tira__items{ gap: 16px 30px; padding: 20px 16px } .obx-tira__logo{ height: 40px } .obx-tira__logo[data-m="ml"]{ height: 46px } .obx-tira__logo[data-m="woo"]{ height: 27px } }