/* ═══════════════════════════════════════════════════════════════════════════
   OnBox · CAPA EDITORIAL para las páginas internas (2026-08-02)

   Va DESPUÉS de styles_new.css y le cambia los fundamentos: paleta,
   tipografía, aire, bordes, sombras y botones. No se toca el HTML de las
   páginas, así que el texto que ya posiciona en Google queda intacto.

   Por qué una capa y no reescribirlas: son 11 páginas con ~140 clases y
   componentes propios (splitHero, compareGrid, traceGrid…). Reescribir todo a
   mano es lento y se rompe contenido. Unificando los fundamentos, las 11
   pasan a hablar el mismo idioma que la portada nueva.

   Antecedente que se tuvo en cuenta: una capa de override YA fracasó antes en
   este proyecto, cuando se intentó volver oscura una estructura clara. Acá el
   caso es otro —la portada editorial también es clara y comparte la lógica de
   container/section/card—, así que la capa suma en vez de pelearse.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#fbfaf9; --paper2:#f2eeea; --card:#fff;
  --ink:#141010; --ink2:#48413e; --muted-c:#7f7773;
  --borgo:#7a0019; --borgo-lit:#a8123a;
  --line:rgba(20,16,16,.12); --line-soft:rgba(20,16,16,.06);
  --sombra:0 1px 2px rgba(20,16,16,.04),0 12px 34px rgba(20,16,16,.07);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}

html{scroll-behavior:smooth}
body{
  background:var(--paper)!important;color:var(--ink)!important;
  font-family:var(--sans)!important;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Grano finísimo, igual que en la portada: es lo que la saca de plano digital */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Tipografía: peso 300 y tracking cerrado. Es toda la personalidad. ──── */
h1,h2,h3,h4{font-family:var(--sans)!important;color:var(--ink);
  font-weight:300!important;letter-spacing:-.028em;text-wrap:balance;line-height:1.14}
h1{font-size:clamp(2.4rem,5.6vw,4.2rem)!important;line-height:1.04;letter-spacing:-.042em}
h2{font-size:clamp(1.8rem,3.4vw,2.8rem)!important}
h3{font-size:1.15rem!important;font-weight:500!important;letter-spacing:-.014em}
p,li{color:var(--ink2)}
.lead{font-size:clamp(1.02rem,1.3vw,1.16rem)!important;color:var(--ink2)!important}
.muted{color:var(--muted-c)!important}
strong,b{font-weight:500}

.eyebrow,.section-title small,.coverageTag,.zonaChip,.map-tag{
  font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--borgo)!important;font-weight:500!important;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.container{max-width:1220px!important;padding-left:24px;padding-right:24px}
.section{padding:clamp(66px,8vw,104px) 0!important;background:transparent}
.section--alt,.stack-section,.timeline-section{
  background:var(--paper2)!important;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.sectionHead,.section-title{margin-bottom:44px}

/* ── Botones: píldora, igual que la portada ─────────────────────────────── */
.btn,.cta-button,.socialBtn,.serviceCard__link,.storeCard__link{
  border-radius:9999px!important;font-family:var(--sans)!important;
  font-weight:500!important;font-size:14px!important;letter-spacing:0!important;
  text-transform:none!important;padding:13px 26px!important;
  border:1px solid var(--line)!important;background:var(--card)!important;
  color:var(--ink)!important;box-shadow:var(--sombra)!important;
  transition:transform .2s,border-color .2s!important;
}
.btn:hover,.cta-button:hover{transform:translateY(-1px);border-color:rgba(20,16,16,.28)!important}
.btn--primary,.cta-button,.btn--whatsapp{
  background:var(--borgo)!important;color:#fff!important;border-color:var(--borgo)!important;
}
.btn--primary:hover,.cta-button:hover,.btn--whatsapp:hover{background:#8f0020!important}
.btn--ghost{background:transparent!important;box-shadow:none!important;color:var(--ink)!important}
.btnRow{display:flex;gap:12px;flex-wrap:wrap}

/* ── Tarjetas: fondo blanco, borde finito, sombra suave ─────────────────── */
.serviceCard,.faqItem,.coverageCard,.zoneCard,.zonaCard,.systemCard,.storeCard,
.testimonialCard,.howtoStep,.traceStep,.compareCol,.altaCard,.socialCard,
.about-card,.vcard,.logoCard,.spotlightPanel,.portalPanel,.leadForm,.statItem,
.feature-item,.stat-item,.historyStep{
  background:var(--card)!important;border:1px solid var(--line-soft)!important;
  border-radius:16px!important;box-shadow:var(--sombra)!important;
  transition:border-color .2s,transform .2s,box-shadow .2s!important;
}
.serviceCard:hover,.coverageCard:hover,.zonaCard:hover,.storeCard:hover,
.systemCard:hover,.about-card:hover,.vcard:hover{
  border-color:var(--line)!important;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(20,16,16,.05),0 16px 40px rgba(20,16,16,.09)!important;
}
.compareCol--good{border-color:rgba(122,0,25,.28)!important}
.compareCol--bad{background:var(--paper2)!important}

.badge,.trustChip,.coverageTag,.zonaChip,.portalBadge{
  border-radius:9999px!important;border:1px solid var(--line)!important;
  background:var(--card)!important;color:var(--ink2)!important;
  font-size:12.5px!important;padding:6px 14px!important;
}
.badge--orange,.coverageTag--live{
  border-color:var(--borgo)!important;color:var(--borgo)!important;
  background:rgba(122,0,25,.05)!important;
}

/* ── Números ────────────────────────────────────────────────────────────── */
.statItem__value,.stat-number,.howtoStep__num,.traceStep__n{
  color:var(--borgo)!important;font-weight:300!important;letter-spacing:-.035em!important;
}
.statItem__label,.stat-label{color:var(--muted-c)!important;font-size:13px!important}
.statsBar{background:var(--card)!important;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}

/* ── Barra y pie ────────────────────────────────────────────────────────── */
.header{
  background:rgba(251,250,249,.72)!important;backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft)!important;box-shadow:none!important;
}
.nav a,.nav__cta{font-family:var(--sans)!important;font-size:14px!important;
  letter-spacing:0!important;text-transform:none!important}
.nav a{color:var(--ink2)!important}
.nav a:hover{color:var(--ink)!important}
.brand__name{font-weight:500!important;letter-spacing:-.01em!important;color:var(--ink)!important}
.brand__slogan{color:var(--muted-c)!important}

.footer{background:var(--paper2)!important;color:var(--muted-c)!important;
  border-top:1px solid var(--line-soft)!important}
.footer a{color:var(--ink2)!important}
.footer a:hover{color:var(--borgo)!important}

/* ── Fotos: mismo redondeo y sombra que en la portada ───────────────────── */
.cardPhoto,.photoBand,.feature-image img,.vcard__img,.flexShot__photo,.splitCard__bg{
  border-radius:18px!important;overflow:hidden;
}
.photoBand{box-shadow:var(--sombra)}

/* ── Cierre oscuro, como el de la portada ───────────────────────────────── */
/* Cierre de pagina. Antes lo dejé como un rectangulo negro liso de lado a lado:
   partia la pagina en dos y parecia un bloque sin terminar. Ahora es una
   TARJETA —esquinas redondeadas y aire alrededor— y el fondo se construye con
   el bordo de la marca en vez de negro puro, asi el cierre pertenece al sitio
   en lugar de interrumpirlo. */
.finalCta{
  position:relative;overflow:hidden;isolation:isolate;
  border:0!important;
  border-radius:clamp(20px,2.4vw,30px)!important;
  padding:clamp(48px,7vw,84px) clamp(26px,5vw,60px)!important;
  color:#fff!important;
  background:
    radial-gradient(115% 150% at 12% -15%, #a8123a 0%, rgba(168,18,58,0) 52%),
    radial-gradient(95% 130% at 106% 115%, #7a0019 0%, rgba(122,0,25,0) 58%),
    linear-gradient(158deg,#1c1114 0%,#100c0d 54%,#180a11 100%)!important;
  box-shadow:0 26px 64px rgba(20,16,16,.22);
}
/* Trama finisima en diagonal: le da cuerpo al fondo sin que se note el truco.
   Van en absolute para que el grid del contenedor no las tome como celdas. */
.finalCta::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px)}
/* Luz suave cayendo desde arriba */
.finalCta::after{
  content:"";position:absolute;left:50%;top:-55%;width:130%;aspect-ratio:2/1;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 70%)}

.finalCta h2,.finalCta h3{color:#fff!important}
.finalCta p,.finalCta .lead{color:rgba(255,255,255,.74)!important}
.finalCta .eyebrow{color:#ff9db0!important}

.finalCta .btn,.finalCta .cta-button{
  background:#fff!important;color:#12100f!important;border-color:#fff!important;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  transition:transform .25s ease,box-shadow .25s ease}
.finalCta .btn:hover,.finalCta .cta-button:hover{
  transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.32)}
/* El segundo boton no puede ser otro pastillon blanco igual: se distingue */
.finalCta .btn--ghost{
  background:transparent!important;color:#fff!important;
  border-color:rgba(255,255,255,.45)!important;box-shadow:none}
.finalCta .btn--ghost:hover{
  background:rgba(255,255,255,.10)!important;border-color:#fff!important}

/* El .reveal de styles_new.css puede dejar contenido invisible si su script no
   corre. Acá se fuerza visible: contenido oculto es peor que sin animación. */
.reveal{opacity:1!important;transform:none!important}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   PASADA PUNTA A PUNTA (2026-08-02)
   La capa anterior unificaba color y tipografia; faltaba lo que mas se nota al
   saltar de una pagina a otra: la barra, las portadas de seccion y el boton
   flotante. Acá va todo eso.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barra: chica, vidriada, sin el bloque rojo "Logística" ─────────────── */
.header{padding:0!important}
.header__inner{padding:13px 24px!important;max-width:1220px}
.brand__logoWrap{width:34px!important;height:34px!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:9px!important}
.brand__logo{width:34px!important;height:34px!important;border-radius:9px}
.brand__stack{gap:0!important;line-height:1.1}
.brand__mark{font-size:15px!important;font-weight:500!important;color:var(--ink)!important;
  letter-spacing:-.01em!important;text-transform:none!important}
/* "Logística" pasa a ser un pie discreto en vez de un bloque de color */
.brand__name{font-size:10.5px!important;font-weight:500!important;color:var(--muted-c)!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;background:none!important;
  padding:0!important;border-radius:0!important}
.nav{gap:22px!important}
.nav a{padding:0!important;border-radius:0!important;background:none!important}
.nav a.active{color:var(--borgo)!important}
/* Ojo: envios-flex traia el enlace en naranja con estilo en linea */
.nav a[style*="accent-orange"]{color:var(--ink2)!important}
.nav__cta{border-radius:9999px!important;background:var(--borgo)!important;color:#fff!important;
  padding:10px 20px!important;border:1px solid var(--borgo)!important;font-weight:500!important}
.nav__cta:hover{background:#8f0020!important}
.navToggle__bar{background:var(--ink)!important}

/* ── Portadas de seccion: alineadas a la izquierda, como la de inicio ───── */
.hero-log,.hero-flex,.hero-gastro,.hero-about,.hero-recruit,.hero-local,.hero-zona{
  text-align:left!important;position:relative;
}
.hero-log>*,.hero-flex>*,.hero-gastro>*,.hero-about>*,
.hero-recruit>*,.hero-local>*,.hero-zona>*{position:relative;z-index:2}
.hero-log .container,.hero-flex .container,.hero-gastro .container,.hero-about .container,
.hero-recruit .container,.hero-local .container,.hero-zona .container{text-align:left!important}
.hero-log h1,.hero-flex h1,.hero-gastro h1,.hero-about h1,
.hero-recruit h1,.hero-local h1,.hero-zona h1{
  margin-left:0!important;margin-right:0!important;max-width:17ch;
}
.hero-log p,.hero-flex p,.hero-gastro p,.hero-about p,
.hero-recruit p,.hero-local p,.hero-zona p{
  margin-left:0!important;margin-right:0!important;max-width:56ch;
}
.hero-log .btnRow,.hero-flex .btnRow,.hero-gastro .btnRow,.hero-about .btnRow,
.hero-recruit .btnRow,.hero-local .btnRow,.hero-zona .btnRow{justify-content:flex-start!important}
/* Sobre foto oscura el texto va blanco y los botones se adaptan */
.hero-log h1,.hero-flex h1,.hero-gastro h1,.hero-about h1,
.hero-recruit h1,.hero-local h1,.hero-zona h1{color:#fff!important}
.hero-log p,.hero-flex p,.hero-gastro p,.hero-about p,
.hero-recruit p,.hero-local p,.hero-zona p{color:rgba(255,255,255,.82)!important}
.hero-log .eyebrow,.hero-flex .eyebrow,.hero-gastro .eyebrow,.hero-about .eyebrow,
.hero-recruit .eyebrow,.hero-local .eyebrow,.hero-zona .eyebrow{color:#ff8fa3!important}
.hero-log .btn:not(.btn--primary),.hero-flex .btn:not(.btn--primary),
.hero-gastro .btn:not(.btn--primary),.hero-about .btn:not(.btn--primary),
.hero-recruit .btn:not(.btn--primary),.hero-local .btn:not(.btn--primary),
.hero-zona .btn:not(.btn--primary){
  background:rgba(255,255,255,.1)!important;color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;box-shadow:none!important;backdrop-filter:blur(6px);
}

/* ── Botón flotante: era verde chillón y se comía la paleta ─────────────── */
.wa-fab{
  background:var(--borgo)!important;
  box-shadow:0 4px 10px rgba(20,16,16,.14),0 14px 40px rgba(122,0,25,.28)!important;
  border-radius:9999px!important;font-family:var(--sans)!important;font-weight:500!important;
}
.wa-fab:hover{background:#8f0020!important;transform:translateY(-2px)}
.wa-fab:focus-visible{outline:3px solid var(--borgo-lit)!important;outline-offset:3px}

/* ── Formularios ────────────────────────────────────────────────────────── */
.leadForm input,.leadForm select,.leadForm textarea{
  border:1px solid var(--line)!important;border-radius:12px!important;
  background:var(--card)!important;font-family:var(--sans)!important;font-size:15px!important;
  padding:12px 16px!important;color:var(--ink)!important;
}
.leadForm input:focus,.leadForm select:focus,.leadForm textarea:focus{
  outline:none;border-color:var(--borgo)!important;
}

/* ── Pantalla de carga: fuera ────────────────────────────────────────────
   Tapaba la pagina con un logo gigante hasta ~3 s en CADA visita, y la
   portada nueva no la tiene: saltar de una seccion a otra mostraba el splash
   y rompia la continuidad. Ademas retrasa el primer contenido util, que es lo
   que mide Google. Se oculta por CSS; el script que la borra igual corre. */
.splash{display:none!important}