/* ============================================================
   BRANDING BOARD — Ningbo Pacific Bridge Trade Co., Limited
   Marca: NINGBO PACIFIC · agente de compras + freight forwarder
   Corredor Asia → México & EE.UU.  ·  EN / ES / 中文
   Paleta cliente "Navy Coral" (navy del logo + acento coral).
   Tipografía cliente: Unbounded (display) + Inter (texto) + Space Mono (datos).
   Cambiar este archivo re-skinea toda la web sin tocar los bloques.
   ============================================================ */
/* Fuentes alojadas LOCALMENTE (self-host) — rinden sin depender de Google Fonts (clave en China / sin internet). */
@import url('fonts.css');

:root{
  /* Paleta del cliente: Navy (del logo) + Coral */
  --brand-1:oklch(0.29 0.085 258);   /* navy profundo — nav/footer/hero/bandas (≈ #122A4D) */
  --brand-2:oklch(0.41 0.095 256);   /* azul medio (≈ #1F4A82) */
  --brand-3:oklch(0.57 0.090 248);   /* steel blue (≈ #5B82B8) */
  --brand-4:oklch(0.78 0.050 246);   /* azul claro brumoso (≈ #A9BFDD) */
  --brand-5:oklch(0.93 0.018 250);   /* casi blanco azulado (≈ #E4EAF2) */

  /* Acento Coral */
  --accent:oklch(0.71 0.165 32);     /* coral vivo para botones/rellenos (≈ #FB6F54) */
  --accent-ink:oklch(0.23 0.045 262);/* texto sobre el coral (navy casi-negro, AA) */
  --accent-text:oklch(0.55 0.155 33);/* coral más oscuro para texto chico sobre claro (AA ≥4.5) */

  /* Roles derivados */
  --ink:oklch(0.26 0.025 260);
  --ink-soft:oklch(0.47 0.022 258);
  --ink-faint:oklch(0.59 0.018 256);
  --surface:oklch(0.992 0.003 250);
  --surface-2:oklch(0.966 0.007 248);
  --card:oklch(1 0 0);
  --line:oklch(0.905 0.010 250);

  /* Personalidad — moderna, confiable, con punch geométrico (Unbounded) */
  --font-display:'Unbounded','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-body:'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;
  --radius:12px;                     /* suave/moderno, acompaña a Unbounded */
  --maxw:1200px;
  --shadow:0 22px 54px -28px oklch(0.29 0.06 258 / 0.55);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Unbounded es ancha: aflojamos el tracking negativo de los títulos para que respire */
h1,h2,h3,h4{letter-spacing:-0.005em}
.h-sec{letter-spacing:-0.01em}

/* ---- Overrides de marca: contraste AA del coral sobre claro ---- */
.eyebrow{color:var(--accent-text)}
.statc__c .delta{color:var(--accent-text)}
.tl span{color:var(--accent-text)}
.lane__mode,.office .role,.ports .pc{color:var(--accent-text)}
/* datos/cifras en mono (look operativo de forwarder) */
.statc__c b,.stats b,.hero__meta b,.lcost__total b,.corridor__leg b{font-family:var(--font-mono);letter-spacing:-0.02em}

/* ============================================================ NAV — logo en imagen (versión clara sobre hero oscuro / color sobre nav blanco) */
.nav__logo{gap:0;padding:0}
.nav__logo img{height:34px;width:auto;display:block}
.nav__logo .logo-white{display:block}
.nav__logo .logo-color{display:none}
.nav.scrolled .nav__logo .logo-white{display:none}
.nav.scrolled .nav__logo .logo-color{display:block}
/* header móvil compacto: logo + idioma + CTA + burger sin saturar (alto ≤110px) */
@media(max-width:860px){
  .nav__in{padding-top:14px;padding-bottom:14px}
  .nav__logo img{height:28px}
  .nav__cta{gap:8px}
  .nav__cta .btn--primary{padding:9px 14px;font-size:13px}
}
@media(max-width:400px){
  .nav__logo img{height:25px}
  .nav__cta .btn--primary{padding:8px 11px;font-size:12.5px}
}

/* el hero de la home es oscuro (foto + scrim navy) → texto e eyebrow claros */
.hero__bg::after{background:linear-gradient(100deg,var(--brand-1) 10%,color-mix(in oklab,var(--brand-1),transparent 30%) 52%,color-mix(in oklab,var(--brand-1),transparent 72%) 100%)}
.hero .eyebrow{color:var(--brand-4)}
/* el .container del hero debe LLENAR el ancho: como flex-item sin width se encoge al contenido y
   descentra el texto respecto del logo (rompía LOGO-alineado). width:100% lo alinea al margen del contenido. */
.hero>.container{width:100%}
/* hero algo más compacto + meta oculto en móvil: el banner de cookies (fijo abajo) tapaba el hero__meta */
.hero{min-height:84vh}
.hero__in{padding:clamp(104px,14vw,130px) 0 clamp(34px,5vw,58px)}
.hero__meta{margin-top:clamp(26px,4vw,40px)}
@media(max-width:1024px){.hero__meta{display:none}}

/* ============================================================ SECTORS — grilla de los 9 rubros (íconos, sin foto; va en la home, disjunta de las fotos de producto) */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.sector{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px;
  background:var(--card);border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.4);
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.sector:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.sector__n{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-text);letter-spacing:.02em}
.sector__ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:23px;
  background:color-mix(in oklab,var(--brand-1),transparent 90%);color:var(--brand-1);transition:background .2s,color .2s}
.sector:hover .sector__ic{background:var(--accent);color:var(--accent-ink)}
.sector h3{font-size:1.12rem;line-height:1.2}
.sector p{color:var(--ink-soft);font-size:13.7px;margin-top:-4px}
.sector__tags{margin-top:auto;font-size:12.5px;color:var(--ink-faint);line-height:1.5}
@media(max-width:860px){.sectors{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sectors{grid-template-columns:1fr}}

/* ============================================================ CORRIDOR — franja del corredor Asia → México & EE.UU. */
.corridor{background:var(--brand-1);color:#fff;border-radius:calc(var(--radius)*1.6);overflow:hidden;
  padding:clamp(26px,4vw,40px);margin-top:46px;position:relative}
.corridor::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(120% 130% at 12% 10%,color-mix(in oklab,var(--brand-2),transparent 45%),transparent 60%)}
.corridor__in{position:relative;z-index:1}
.corridor__legs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.corridor__leg{border-top:2px solid rgba(255,255,255,.18);padding-top:14px}
.corridor__leg .pt{font-family:var(--font-mono);font-size:12.5px;color:var(--brand-4);letter-spacing:.04em;text-transform:uppercase}
.corridor__leg b{display:block;font-size:1.5rem;font-weight:700;color:#fff;margin-top:8px}
.corridor__leg span{display:block;font-size:13px;color:rgba(255,255,255,.74);margin-top:3px}
@media(max-width:760px){.corridor__legs{grid-template-columns:1fr 1fr}}

/* ============================================================ LCOST — transparencia de costo puesto en planta (landed cost) */
.lcost{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:46px}
.lcost__panel{background:var(--card);border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.5);
  padding:clamp(22px,3vw,30px);box-shadow:var(--shadow)}
.lcost__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.lcost__row .k{font-size:14.5px;color:var(--ink-soft)}
.lcost__row .v{font-family:var(--font-mono);font-size:14.5px;font-weight:700;color:var(--ink)}
.lcost__total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:16px;
  padding:16px 18px;border-radius:var(--radius);background:color-mix(in oklab,var(--accent),transparent 90%)}
.lcost__total .k{font-weight:700;color:var(--ink);font-size:14.5px}
.lcost__total b{font-family:var(--font-mono);font-size:1.5rem;color:var(--accent-text)}
.lcost__note{font-size:12.5px;color:var(--ink-faint);margin-top:12px}
@media(max-width:820px){.lcost{grid-template-columns:1fr}}

/* ============================================================ OFFICES — presencia en China + mercados servidos (nosotros/contacto) */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.office{border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.3);padding:24px;background:var(--card);
  transition:border-color .2s,transform .2s var(--ease)}
.office:hover{border-color:var(--accent);transform:translateY(-3px)}
.office .flag{width:30px;height:20px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.office b{display:block;margin-top:12px;font-size:15.5px}
.office span{display:block;color:var(--ink-soft);font-size:13.7px;margin-top:6px;line-height:1.55}
.office .role{display:block;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:10px}
@media(max-width:820px){.offices{grid-template-columns:1fr}}

/* ============================================================ LEGAL — páginas legales escaneables (TOC lateral pegajoso) */
.legal{display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.legal__toc{position:sticky;top:96px;font-size:14px}
.legal__toc a{display:block;padding:7px 0 7px 14px;color:var(--ink-soft);border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.legal__toc a:hover{color:var(--accent-text);border-color:var(--accent)}
.legal__body h2{font-size:1.3rem;margin:34px 0 10px;scroll-margin-top:96px}
.legal__body h2:first-child{margin-top:0}
.legal__body p,.legal__body li{color:var(--ink-soft);font-size:15px;margin-top:10px}
.legal__body ul{margin-left:20px}
.legal__meta{font-size:13.5px;color:var(--ink-faint);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:8px}
@media(max-width:760px){.legal{grid-template-columns:1fr}.legal__toc{position:static}}

/* foco visible reforzado en el formulario */
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Cookie bar: barra inferior full-width pegada al borde, no una píldora que flota sobre el contenido
   (antes se solapaba con la info de contacto / intros en páginas internas). */
.cookiebar{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;
  background:var(--brand-1);color:#fff;border-top:1px solid rgba(255,255,255,.16);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.55);padding:13px clamp(20px,5vw,40px)}
@media(min-width:560px){.cookiebar{justify-content:center;gap:22px}.cookiebar span{max-width:64ch}}