/* =========================================================
   MARIMPEX · WEB.CSS · sistema de diseño real del sitio
   Fuente: maqueta aprobada por el CEO (Diseñador de Marca, 04-10-2026).
   Traslado fiel a producción por UI/Frontend Developer, 15-10-2026.
   Se retiró de este archivo SOLO la "mesa" del visor de maqueta:
   pestañas de navegación, rótulos de artboard (.mesa-*, .ab-label,
   .page/.is-on, .draft) y el scope .ab-noche (modo noche: no se
   publica todavía, igual que decidió el CEO para este mismo archivo
   el 2026-10-14 — ver docs/marca/15-web.md §5 si se habilita después).
   Valores: docs/marca/02-color.md y docs/marca/15-web.md. Ningún HEX
   fuera de ahí. El mapa (--map-*) no escucha al tema: fijo y oscuro.

   COMPAT (no tocar sin revisar public/about.html y
   public/servicios/crossborder-trading.html, fuera de scope de esta
   sesión): ese :root de abajo mezcla el nombrado nuevo del rediseño
   (--f-display/body/mono) con el nombrado viejo que esas 2 páginas
   siguen consumiendo (--web-font-display/body/mono, --web-max-w,
   y los --web-* de superficie/tinta a nivel global). El bloque
   .ab-dia de más abajo repite los mismos valores de día — es
   redundante a propósito, no un conflicto: nunca van a diferir.
   ========================================================= */

:root{
  --f-display:'Archivo','Arial Black',Arial,sans-serif;
  --f-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  /* ---------- Superficies ---------- */
  --web-bg: #FAF7F0;             /* fondo de página */
  --web-surface: #FFFFFF;        /* card, input, pie de cookies */
  --web-surface-2: #EDE9DE;      /* banda de cierre, chip */
  --web-sunk: #E4DFD3;           /* columna "No incluye", zebra, hover de fila */
  --web-line: #E5E2DA;           /* línea decorativa 1px */
  --web-input: #7A7462;          /* borde de input, contraste >= 3:1 */

  /* ---------- Tinta ---------- */
  --web-ink: #0E0D0B;            /* texto principal */
  --web-ink-2: #5F5A48;          /* texto secundario, rótulos, decorativo */

  /* ---------- Acento y marca ---------- */
  --web-accent: #0E0D0B;         /* tinta de acento de día: número de paso, cita, foco */
  --web-brand: #B8FF3C;          /* lima como SUPERFICIE: botón primario, resaltador, badge */
  --web-brand-fg: #0E0D0B;       /* texto sobre lima */
  --web-brand-hover: #A9F02B;
  --web-brand-pressed: #93DC18;
  --web-brand-soft: #EDFFC9;     /* callout "Lo que conviene saber" */

  /* Naranja de detalle: SIEMPRE este tono sobre papel, nunca #FF6B1A */
  --web-accent-2-ink: #B54708;
  --web-accent-2-soft: #FFE8D9;

  /* ---------- Semáforo de canal ---------- */
  --web-status-ok: #2E7D14;
  --web-status-ok-soft: #EAF6E4;
  --web-status-warn: #B54708;
  --web-status-warn-soft: #FFE8D9;
  --web-status-error: #B42318;
  --web-status-error-soft: #FDE7E4;
  --web-status-fg: #FFFFFF;      /* texto sobre pill sólido */

  /* ---------- Foco, link, símbolo ---------- */
  --web-focus: #0E0D0B;
  --web-x: #0E0D0B;
  --web-link: #0E0D0B;

  /* ---------- Mapa (siempre oscuro, de día y de noche) ---------- */
  --map-ocean: #0A111C;
  --map-land: #1A2230;
  --map-route: #B8FF3C;
  --map-label: #EAEAEC;

  /* ---------- Tipografía (manual §4) ---------- */
  /* Archivo 600/700/800 titulares · IBM Plex Sans 400/500/600 cuerpo ·
     IBM Plex Mono 400/500 datos y rótulos. Fallback real sin webfont. */
  --web-font-display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --web-font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --web-font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

  /* ---------- Grilla (manual §3) ---------- */
  --web-max-w: 1312px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:hidden}
svg{display:block}
h1,h2,h3,h4{text-wrap:balance}

/* ---- Scope de tokens --web-* (día, único modo publicado; redundante con el :root de arriba) ---- */
.ab-dia{
  --web-bg:#FAF7F0; --web-surface:#FFFFFF; --web-surface-2:#EDE9DE; --web-sunk:#E4DFD3;
  --web-line:#E5E2DA; --web-input:#7A7462;
  --web-ink:#0E0D0B; --web-ink-2:#5F5A48; --web-accent:#0E0D0B;
  --web-brand:#B8FF3C; --web-brand-fg:#0E0D0B; --web-brand-hover:#A9F02B; --web-brand-pressed:#93DC18; --web-brand-soft:#EDFFC9;
  --web-accent-2-ink:#B54708; --web-accent-2-soft:#FFE8D9;
  --web-status-ok:#2E7D14; --web-status-ok-soft:#EAF6E4;
  --web-status-warn:#B54708; --web-status-warn-soft:#FFE8D9;
  --web-status-error:#B42318; --web-status-error-soft:#FDE7E4;
  --web-status-fg:#FFFFFF; --web-focus:#0E0D0B; --web-x:#0E0D0B; --web-link:#0E0D0B; --web-link-hover:#B54708;
  --web-mark-bg:var(--web-brand); --web-mark-fg:var(--web-brand-fg);
  --web-rotulo-ink:var(--web-ink); --web-rotulo-sq:inline-block;
  --web-hero-x:var(--web-sunk); --web-hero-x-alpha:.55;
  --web-btn-halo:none;
  color-scheme:light;
}

/* ---- Contenedor de página real (antes "artboard" en la maqueta) ---- */
.ab{background:var(--web-bg);color:var(--web-ink);font-family:var(--f-body);overflow:hidden;position:relative}
.ab :focus-visible{outline:2px solid var(--web-focus);outline-offset:2px}

.w-wrap{max-width:1440px;margin:0 auto;padding-left:64px;padding-right:64px}
@media (max-width:767px){.w-wrap{padding-left:20px;padding-right:20px}}

/* ---- Nav (15-web §6) ---- */
.w-nav{height:72px;border-bottom:1px solid var(--web-line);display:flex;align-items:center;gap:28px}
.w-wordmark{display:block;width:168px;flex:none}
.w-wordmark svg{width:100%;height:auto}
.w-nav-items{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.w-nav-items a{font:500 15px/20px var(--f-body);color:var(--web-ink);text-decoration:none;padding:6px 0 4px;border-bottom:2px solid transparent;white-space:nowrap}
.w-nav-items a.is-active{font-weight:600;border-bottom-color:var(--web-brand)}
.w-nav-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.w-nav-mono{font:500 13px/20px var(--f-mono);color:var(--web-ink);text-decoration:none;white-space:nowrap}
.w-toggle,.w-burger{width:40px;height:40px;display:grid;place-items:center;background:none;border:1px solid var(--web-line);color:var(--web-ink);padding:0;cursor:pointer;border-radius:0}
.w-toggle svg,.w-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w-burger{display:none}
@media (max-width:1279px){.w-nav-mono{display:none}}
@media (max-width:1023px){
  .w-nav{height:60px;gap:12px}
  .w-nav-items,.w-nav-right .w-btn-nav{display:none}
  .w-burger{display:grid}
  .w-wordmark{width:132px}
  .w-toggle,.w-burger{width:44px;height:44px}
  .w-nav-right{gap:8px}
}

/* ---- Panel de navegacion mobile (abre/cierra con JS via [hidden]) ---- */
.w-nav-panel{border-bottom:1px solid var(--web-line);padding:4px 0 24px}
.w-nav-panel[hidden]{display:none}
.w-panel-items{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.w-panel-items li{border-bottom:1px solid var(--web-line)}
.w-panel-items li:first-child{border-top:1px solid var(--web-line)}
.w-panel-items a{display:block;padding:14px 2px;font:500 16px/22px var(--f-body);color:var(--web-ink);text-decoration:none}
.w-panel-items a.is-active{font-weight:700}
.w-panel-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px}
.w-panel-mono{font:500 13px/20px var(--f-mono);color:var(--web-ink);text-decoration:none}
.w-panel-actions .w-btn{width:100%}
@media (min-width:1024px){.w-nav-panel{display:none!important}}
.w-crumbs{font:400 13px/20px var(--f-mono);color:var(--web-ink-2);margin:28px 0 0}
.w-crumbs a{color:inherit;text-decoration:none}

/* ---- Botones ---- */
.w-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;background:var(--web-brand);color:var(--web-brand-fg);font:600 16px/1 var(--f-body);text-decoration:none;border:0;border-radius:0;cursor:pointer;white-space:nowrap}
.w-btn:hover{background:var(--web-brand-hover);box-shadow:var(--web-btn-halo)}
.w-btn:active{background:var(--web-brand-pressed);box-shadow:none}
.w-btn-nav{height:44px;padding:0 18px}
.w-btn-sec{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border:1px solid var(--web-ink);color:var(--web-ink);background:transparent;font:500 16px/1 var(--f-body);text-decoration:none;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){.w-btn,.w-btn-sec{transition:background .15s,box-shadow .15s}}

/* ---- Tipografía (15-web §4) ---- */
.w-rotulo{display:inline-flex;align-items:center;gap:10px;font:500 13px/20px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-rotulo-ink);margin:0}
.w-rotulo::before{content:"";width:9px;height:9px;background:var(--web-brand);display:var(--web-rotulo-sq);flex:none}
.w-rotulo-2{display:inline-block;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-ink-2);margin:0}
.w-h1{font:800 clamp(36px,1.2rem + 4.4vw,80px)/1.05 var(--f-display);letter-spacing:-.035em;margin:24px 0 0}
.w-h1-page{font:800 clamp(36px,1.2rem + 2.6vw,60px)/1.08 var(--f-display);letter-spacing:-.03em;margin:20px 0 0}
mark.w-mark{background:var(--web-mark-bg);color:var(--web-mark-fg);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.w-h2{font:700 clamp(28px,1.2rem + 1.5vw,40px)/1.15 var(--f-display);letter-spacing:-.025em;margin:16px 0 0}
.w-h3{font:700 clamp(20px,1rem + .5vw,24px)/1.25 var(--f-display);letter-spacing:-.02em;margin:0}
.w-bajada{font:400 clamp(18px,1rem + .4vw,22px)/1.45 var(--f-body);color:var(--web-ink-2);margin:0;max-width:700px}
.w-cuerpo{font:400 18px/28px var(--f-body);margin:0;max-width:640px}
.w-cuerpo + .w-cuerpo{margin-top:18px}
@media (max-width:767px){.w-cuerpo{font-size:17px;line-height:26px}}
.w-small{font:400 16px/24px var(--f-body);color:var(--web-ink-2);margin:0}
.w-link{font:500 16px/24px var(--f-body);color:var(--web-link);text-decoration:underline;text-underline-offset:3px}
.w-link:hover{color:var(--web-link-hover)}
.w-dato{font:400 15px/24px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--web-ink)}
.w-nota{font:400 13px/20px var(--f-mono);color:var(--web-ink-2);margin:0}

/* ---- Hero ---- */
.w-hero{position:relative;padding-top:80px}
.w-hero-x{position:absolute;right:-40px;top:24px;width:clamp(240px,38vw,600px);height:auto;fill:var(--web-hero-x);opacity:var(--web-hero-x-alpha);pointer-events:none}
.w-hero-in{position:relative;max-width:1100px}
.w-bajada-hero{margin-top:20px;color:var(--web-ink)}
.w-hero .w-cuerpo{margin-top:24px}
.w-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.w-hechos{position:relative;list-style:none;margin:72px 0 0;padding:28px 0 72px;border-top:1px solid var(--web-line);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.w-hecho-k{display:block;font:500 13px/20px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-ink-2)}
.w-hecho-v{display:block;font:400 17px/24px var(--f-body);margin-top:6px;max-width:36ch}
.w-page-head{padding:0 0 56px;border-bottom:1px solid var(--web-line)}
.w-page-head .w-bajada{margin-top:18px}
.w-page-head .w-actions{margin-top:32px}
@media (max-width:1023px){.w-hechos{grid-template-columns:1fr 1fr}.w-hechos li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:767px){
  .w-hero{padding-top:48px}
  .w-rotulo{font-size:11px;line-height:16px}
  .w-hero-x{top:12px;right:-60px;width:260px}
  .w-actions{flex-direction:column}
  .w-actions .w-btn,.w-actions .w-btn-sec{width:100%}
  .w-hechos{grid-template-columns:1fr;gap:20px;margin-top:48px;padding-bottom:48px}
}

/* ---- Secciones y cards ---- */
.w-sec{padding:80px 0}
.w-sec + .w-sec{border-top:1px solid var(--web-line)}
.w-sec-sunk{background:var(--web-surface-2)}
@media (max-width:767px){.w-sec{padding:48px 0}}
.w-sec-head{max-width:760px}
.w-sec-head .w-bajada{margin-top:16px}
.w-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.w-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.w-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
@media (max-width:1023px){.w-grid3,.w-grid4{grid-template-columns:1fr 1fr}.w-grid3>:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:767px){.w-grid3,.w-grid2,.w-grid4{grid-template-columns:1fr;margin-top:32px}}
.w-card{background:var(--web-surface);border:1px solid var(--web-line);padding:32px;display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:767px){.w-card{padding:22px}}
.w-card h3{font:700 clamp(20px,1rem + .5vw,24px)/1.25 var(--f-display);letter-spacing:-.02em;margin:0}
.w-desc{font:400 16px/24px var(--f-body);color:var(--web-ink-2);margin:0}
.w-incl-k{font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-ink-2);margin:4px 0 -6px}
.w-incl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.w-incl li{position:relative;padding-left:22px;font:400 16px/24px var(--f-body)}
.w-incl li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--web-brand)}
.w-incl-no li::before{background:var(--web-ink-2)}
.w-card .w-link{margin-top:auto;align-self:flex-start}
.w-mini{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--web-line);margin-top:32px;background:var(--web-line);gap:1px}
.w-mini>div{background:var(--web-surface);padding:20px 22px;min-width:0}
.w-mini h4{font:700 17px/22px var(--f-display);letter-spacing:-.015em;margin:8px 0 6px}
.w-mini p{font:400 15px/22px var(--f-body);color:var(--web-ink-2);margin:0}
@media (max-width:1023px){.w-mini{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:767px){.w-mini{grid-template-columns:1fr}}

/* ---- Pasos numerados + callout ---- */
.w-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;margin-top:48px}
@media (max-width:1023px){.w-steps{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.w-steps{grid-template-columns:1fr;gap:28px}}
.w-step{border-top:1px solid var(--web-line);padding-top:16px;min-width:0}
.w-stepnum{font:500 32px/36px var(--f-mono);color:var(--web-accent);font-variant-numeric:tabular-nums}
.w-steptitle{font:700 24px/30px var(--f-display);letter-spacing:-.02em;margin:8px 0 0}
.w-steptxt{font:400 17px/26px var(--f-body);color:var(--web-ink-2);margin:8px 0 0}
.w-callout{background:var(--web-brand-soft);padding:20px 24px;margin-top:18px}
.w-callout p:not(.w-rotulo){font:400 16px/24px var(--f-body);margin:8px 0 0;color:var(--web-ink)}
.w-callout-wide{padding:24px 28px;max-width:760px;margin-top:32px}
.w-callout-wide p:not(.w-rotulo){font-size:17px;line-height:26px}

/* ---- Tabla Incluye / No incluye ---- */
.w-incl-table{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--web-line);margin-top:48px}
.w-incl-table>div{padding:32px}
.w-incl-table>div:first-child{background:var(--web-surface);border-right:1px solid var(--web-line)}
.w-incl-table>div:last-child{background:var(--web-sunk)}
.w-incl-table .w-incl{margin-top:16px;gap:14px}
.w-incl-table .w-incl li{font-size:17px;line-height:26px}
@media (max-width:767px){.w-incl-table{grid-template-columns:1fr}.w-incl-table>div{padding:22px}.w-incl-table>div:first-child{border-right:0;border-bottom:1px solid var(--web-line)}}

/* ---- Pill de canal (siempre con el nombre escrito) ---- */
.w-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:14px;font:500 12px/1 var(--f-mono);border:1px solid currentColor;white-space:nowrap}
.w-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.w-pill-ok{color:var(--web-status-ok);background:var(--web-status-ok-soft)}
.w-pill-warn{color:var(--web-status-warn);background:var(--web-status-warn-soft)}
.w-pill-error{color:var(--web-status-error);background:var(--web-status-error-soft)}
.w-pill-neutral{color:var(--web-ink);background:var(--web-surface-2)}
.w-canales{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.w-canal{border-top:1px solid var(--web-line);padding-top:18px}
.w-canal p{font:400 16px/24px var(--f-body);color:var(--web-ink-2);margin:14px 0 0}
@media (max-width:1023px){.w-canales{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.w-canales{grid-template-columns:1fr}}

/* ---- Chip cuadrado (estado de buque, canal de venta): acento, no pill ---- */
.w-chip{display:inline-block;padding:4px 8px;font:500 11px/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--web-surface-2);color:var(--web-ink);white-space:nowrap}
.w-chip-brand{background:var(--web-brand);color:var(--web-brand-fg)}
.w-chip-warn{background:var(--web-accent-2-soft);color:var(--web-accent-2-ink)}

/* ---- Expedientes ---- */
.w-exp{background:var(--web-surface);border:1px solid var(--web-line);padding:32px;display:flex;flex-direction:column;gap:14px;min-width:0}
.w-exp-meta{font:400 12px/18px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--web-ink-2);margin:0;display:grid;gap:4px}
.w-exp dl{margin:0;display:grid;gap:12px}
.w-exp dt{font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-ink-2)}
.w-exp dd{margin:4px 0 0;font:400 16px/24px var(--f-body)}

/* ---- FAQ ---- */
.w-faq{margin:40px 0 0;border-top:1px solid var(--web-line);max-width:860px}
.w-faq details{border-bottom:1px solid var(--web-line)}
.w-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;font:700 clamp(18px,1rem + .4vw,22px)/1.3 var(--f-display);letter-spacing:-.015em}
.w-faq summary::-webkit-details-marker{display:none}
.w-faq summary::after{content:"+";font:400 24px/1 var(--f-mono);color:var(--web-ink-2);flex:none}
.w-faq details[open] summary::after{content:"·"}
.w-faq details p{font:400 17px/26px var(--f-body);color:var(--web-ink);margin:0 0 24px;max-width:66ch}

/* ---- Cita del CEO ---- */
.w-cita{border-left:4px solid var(--web-accent);padding:4px 0 4px 28px;margin:48px 0 0;max-width:820px}
.w-cita p{font:700 clamp(22px,1rem + .8vw,26px)/1.3 var(--f-display);letter-spacing:-.015em;margin:0}
.w-cita footer{font:400 13px/20px var(--f-mono);color:var(--web-ink-2);margin-top:14px}

/* ---- Manifiesto ---- */
.w-lineas{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--web-line)}
.w-lineas li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--web-line)}
.w-lineas .n{font:500 15px/24px var(--f-mono);color:var(--web-ink-2)}
.w-lineas .t{font:700 clamp(22px,1rem + 1vw,32px)/1.25 var(--f-display);letter-spacing:-.02em;margin:0}
.w-lineas .s{font:400 17px/26px var(--f-body);color:var(--web-ink-2);margin:10px 0 0;max-width:62ch}
@media (max-width:767px){.w-lineas li{grid-template-columns:1fr;gap:6px}}
.w-team{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.w-person{background:var(--web-surface);border:1px solid var(--web-line);padding:32px;display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start}
.w-avatar{width:96px;height:96px;background:var(--web-sunk);display:grid;place-items:center;font:800 36px/1 var(--f-display);color:var(--web-ink);letter-spacing:-.04em}
.w-person h3{font:700 24px/30px var(--f-display);letter-spacing:-.02em;margin:0}
.w-person .rol{font:500 12px/18px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--web-ink-2);margin:6px 0 10px}
.w-person p{font:400 16px/24px var(--f-body);margin:0}
@media (max-width:767px){.w-team{grid-template-columns:1fr}.w-person{grid-template-columns:1fr}}
.w-timeline{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.w-timeline li{border-top:2px solid var(--web-ink);padding-top:14px}
.w-timeline .y{font:500 15px/24px var(--f-mono);color:var(--web-ink)}
.w-timeline p{font:400 15px/22px var(--f-body);color:var(--web-ink-2);margin:6px 0 0}
@media (max-width:1023px){.w-timeline{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:767px){.w-timeline{grid-template-columns:1fr 1fr}}
.w-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.w-tag{font:500 13px/20px var(--f-mono);padding:8px 12px;border:1px solid var(--web-line);background:var(--web-surface);color:var(--web-ink)}

/* ---- Panel oscuro de seguimiento / mapa: usa solo --map-* ---- */
.w-dark{background:var(--map-ocean);color:var(--map-label);padding:48px;margin-top:48px;position:relative;overflow:hidden}
@media (max-width:767px){.w-dark{padding:24px 20px}}
.w-dark .w-rotulo{color:var(--map-route)}
.w-dark .w-rotulo::before{display:none}
.w-dark h3{font:700 clamp(22px,1rem + 1vw,32px)/1.2 var(--f-display);letter-spacing:-.02em;margin:10px 0 0}
.w-dark .w-dato,.w-dark .w-nota,.w-dark .w-small{color:var(--map-label)}
.w-dark .w-small,.w-dark .w-nota{opacity:.72}
.w-demo{position:absolute;right:24px;top:24px;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--map-label);border:1px solid var(--map-label);padding:5px 10px;opacity:.9}
@media (max-width:767px){.w-demo{position:static;display:inline-block;margin:0 0 14px}}
.w-hilo{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative}
.w-hilo::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--map-land)}
.w-hilo li{position:relative;padding:22px 12px 0 0;min-width:0}
.w-hilo li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--map-land);border:1px solid var(--map-label)}
.w-hilo li.done::before{background:var(--map-route);border-color:var(--map-route)}
.w-hilo li.now::before{background:var(--map-route);border-color:var(--map-route);box-shadow:0 0 0 6px rgba(184,255,60,.22)}
.w-hilo .k{display:block;font:500 11px/16px var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.w-hilo li.done .k,.w-hilo li.now .k{color:var(--map-route)}
.w-hilo .v{display:block;font:400 13px/18px var(--f-mono);opacity:.72;margin-top:4px}
@media (max-width:1023px){.w-hilo{grid-template-columns:repeat(4,1fr);gap:28px 0}.w-hilo::before{display:none}}
@media (max-width:767px){.w-hilo{grid-template-columns:1fr 1fr}}
.w-route{width:100%;height:auto;margin-top:32px}
.w-route .sea{fill:none;stroke:var(--map-land);stroke-width:1}
.w-route .done{fill:none;stroke:var(--map-route);stroke-width:2}
.w-route .todo{fill:none;stroke:var(--map-label);stroke-width:1;stroke-dasharray:3 5;opacity:.6}
.w-route .port{fill:var(--map-label)}
.w-route .ship{fill:var(--map-route)}
.w-route text{font:500 11px var(--f-mono);fill:var(--map-label);letter-spacing:.08em}
.w-route .halo{fill:none;stroke:var(--map-route);stroke-width:1.5;opacity:.5}
@media (prefers-reduced-motion: no-preference){
  .w-route .halo{animation:halo 2.4s ease-out infinite}
  @keyframes halo{0%{r:6;opacity:.6}100%{r:22;opacity:0}}
}

/* ---- Mapa por provincia ---- */
.w-mapgrid{display:grid;grid-template-columns:minmax(0,330px) 1fr;gap:48px;margin-top:32px;align-items:start}
@media (max-width:1023px){.w-mapgrid{grid-template-columns:1fr}}
.w-map{width:100%;max-width:330px;height:auto;margin:0 auto}
.w-map .land{fill:var(--map-land);stroke:var(--map-ocean);stroke-width:.8;stroke-linejoin:round}
.w-map .pv{fill:var(--map-route);stroke:var(--map-ocean);stroke-width:.8;stroke-linejoin:round;cursor:pointer}
.w-map .pv[data-b="1"]{fill-opacity:.12}.w-map .pv[data-b="2"]{fill-opacity:.28}.w-map .pv[data-b="3"]{fill-opacity:.48}.w-map .pv[data-b="4"]{fill-opacity:.72}.w-map .pv[data-b="5"]{fill-opacity:1}
.w-map .pv.tick,.w-map .pv:hover{fill-opacity:1;stroke:var(--map-label)}
@media (prefers-reduced-motion: no-preference){.w-map .pv{transition:fill-opacity .6s,stroke .3s}}
.w-map .caba{fill:none;stroke:var(--map-label);stroke-width:.8;opacity:.8}
.w-map text{font:500 9px var(--f-mono);fill:var(--map-label);letter-spacing:.08em}
.w-mapside{display:grid;gap:28px;min-width:0}
.w-kpi{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--map-land);padding-top:20px}
.w-kpi .k{font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.w-kpi .v{font:700 clamp(24px,1rem + 1vw,32px)/1.1 var(--f-display);letter-spacing:-.02em;margin-top:6px;color:var(--map-route);font-variant-numeric:tabular-nums}
.w-kpi .v small{font:400 13px/18px var(--f-mono);color:var(--map-label);letter-spacing:0;display:block;margin-top:4px;opacity:.72}
.w-kpi-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:767px){.w-kpi-3{grid-template-columns:1fr;gap:16px}}
.w-legend{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font:400 12px/16px var(--f-mono);opacity:.9}
.w-legend span{display:inline-flex;align-items:center;gap:7px}
.w-legend i{width:14px;height:14px;background:var(--map-route);display:inline-block}
.w-legend i.b1{opacity:.12}.w-legend i.b2{opacity:.28}.w-legend i.b3{opacity:.48}.w-legend i.b4{opacity:.72}.w-legend i.b5{opacity:1}
.w-legend i.b0{background:var(--map-land);opacity:1}
.w-provs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font:400 13px/20px var(--f-mono)}
.w-provs li{display:grid;grid-template-columns:1fr 64px;gap:12px;align-items:center;padding:3px 0;border-bottom:1px solid var(--map-land)}
.w-provs li.tick{color:var(--map-route)}
.w-provs b{display:block;height:6px;background:var(--map-route);justify-self:start}
@media (max-width:767px){.w-provs{grid-template-columns:1fr}}
.w-live{font:400 13px/20px var(--f-mono);display:flex;gap:10px;align-items:center}
.w-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--map-route);flex:none}
@media (prefers-reduced-motion: no-preference){.w-live::before{animation:blink 1.6s ease-in-out infinite}@keyframes blink{50%{opacity:.3}}}

/* ---- Franja de integraciones ---- */
.w-intg{margin-top:48px;border-top:1px solid var(--web-line)}
.w-intg-row{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--web-line)}
.w-intg-row h3{font:700 20px/26px var(--f-display);letter-spacing:-.015em;margin:10px 0 0}
.w-intg-row .w-nota{margin-top:10px;max-width:30ch}
.w-logos{display:flex;flex-wrap:wrap;gap:12px;align-content:start}
.w-logo{display:inline-flex;align-items:center;justify-content:center;min-width:132px;height:56px;padding:0 18px;border:1px solid var(--web-line);background:var(--web-surface);color:var(--web-ink-2);font:700 15px/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.w-logo-s{height:56px;flex-direction:column;gap:4px;align-items:flex-start;text-transform:none;letter-spacing:-.01em;font-size:17px}
.w-logo-s small{font:400 11px/14px var(--f-mono);letter-spacing:.06em;color:var(--web-ink-2)}
@media (max-width:1023px){.w-intg-row{grid-template-columns:1fr;gap:16px}}

/* ---- Tabla de datos (arribos, costos) ---- */
.w-tablewrap{overflow-x:auto;margin-top:40px;border:1px solid var(--web-line);background:var(--web-surface)}
.w-table{width:100%;border-collapse:collapse;min-width:720px}
.w-table th{font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-ink-2);text-align:left;padding:14px 16px;border-bottom:1px solid var(--web-line)}
.w-table td{font:400 15px/22px var(--f-mono);font-variant-numeric:tabular-nums;padding:14px 16px;border-bottom:1px solid var(--web-line);white-space:nowrap}
.w-table tr:last-child td{border-bottom:0}
.w-table td.num,.w-table th.num{text-align:right}
.w-table td.sans{font-family:var(--f-body);font-size:16px}
.w-table-dark{min-width:560px}
.w-dark .w-tablewrap{border-color:var(--map-land);background:transparent}
.w-dark .w-table th,.w-dark .w-table td{border-color:var(--map-land);color:var(--map-label)}
.w-dark .w-table th{opacity:.72}
.w-dark .w-table td.lime{color:var(--map-route)}

/* ---- Email de aviso (maqueta) ---- */
.w-mail{background:var(--web-surface);border:1px solid var(--web-line);max-width:560px;margin-top:32px}
.w-mail-h{background:var(--web-ink);color:#EAEAEB;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.w-mail-h svg{width:92px;height:auto}
.w-mail-h span{font:500 11px/16px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#B8FF3C}
.w-mail-b{padding:24px}
.w-mail-b h4{font:700 22px/28px var(--f-display);letter-spacing:-.02em;margin:0}
.w-mail-b p{font:400 15px/22px var(--f-body);margin:12px 0 0}
.w-mail-b .w-dato{display:block;margin-top:14px;font-size:13px;color:var(--web-ink-2)}

/* ---- Banda de cierre ---- */
.w-band{background:var(--web-surface-2);padding:64px 0}
.w-band-in{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.w-band h2{font:700 clamp(28px,1.2rem + 1.2vw,36px)/1.17 var(--f-display);letter-spacing:-.025em;margin:0}
.w-band .w-bajada{margin-top:12px;max-width:640px}
@media (max-width:767px){.w-band{padding:48px 0}.w-band-in{grid-template-columns:1fr}.w-band .w-btn{width:100%}}

/* ---- Pie: cinco columnas más banda inferior (15-web §6) ---- */
.w-pie{padding:56px 0 0}
.w-pie-top{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:32px 24px;padding-bottom:48px;border-bottom:1px solid var(--web-line)}
.w-pie-brand .w-pie-wm{width:150px}
.w-pie-brand .w-pie-wm svg{width:100%;height:auto}
.w-pie-claim{font:700 17px/24px var(--f-display);letter-spacing:-.015em;margin:14px 0 0;color:var(--web-ink)}
.w-pie-anchor{font:400 14px/20px var(--f-body);color:var(--web-ink-2);margin:10px 0 0;max-width:30ch}
.w-pie nav h2{font:500 12px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--web-ink-2);margin:0 0 14px}
.w-pie nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.w-pie nav a{font:400 15px/20px var(--f-body);color:var(--web-ink);text-decoration:none}
.w-pie nav a:hover{text-decoration:underline;text-underline-offset:3px}
.w-pie nav li small{display:block;font:400 12px/16px var(--f-mono);color:var(--web-ink-2);margin-top:2px}
.w-pie-dl a{display:block;border:1px solid var(--web-line);background:var(--web-surface);padding:12px 14px}
.w-pie-dl a b{display:block;font:500 12px/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--web-ink-2)}
.w-pie-dl a span{display:block;font:500 15px/20px var(--f-body);margin-top:4px}
.w-pie-dl a small{display:block;margin-top:6px}
.w-pie-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding:24px 0 40px;font:400 13px/20px var(--f-mono);color:var(--web-ink-2)}
.w-pie-bottom ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.w-pie-bottom a{color:inherit}
.w-pie-x{width:34px;height:26px;fill:var(--web-x);flex:none}
.w-pie-grupo{width:100%;font:400 12px/18px var(--f-mono);color:var(--web-ink-2)}
@media (max-width:1279px){.w-pie-top{grid-template-columns:repeat(3,1fr)}.w-pie-brand{grid-column:1/-1}}
@media (max-width:767px){.w-pie-top{grid-template-columns:1fr 1fr}}


/* =========================================================
   COMPAT · .site-footer · NO TOCAR sin revisar about.html y
   servicios/crossborder-trading.html (fuera de scope, 15-10-2026).
   Componente de la v3 vieja, sin equivalente en el rediseño (que
   usa .w-pie con su propia estructura). Se preserva igual para no
   romper esas 2 páginas al reemplazar este CSS compartido.
   ========================================================= */
/* =========================================================
   PIE ÚNICO · manual §6 "Pie"
   Cinco <nav aria-label>, encabezados Mono versalita, banda
   inferior con razón social. Importado por las 5 páginas v3
   para no duplicar el footer en cada archivo.
   ========================================================= */
.site-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--web-line);
  background: var(--web-surface-2);
  color: var(--web-ink-2);
  font-family: var(--web-font-body);
}
.site-footer .container {
  width: 100%;
  max-width: var(--web-max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--web-line);
}
.site-footer-col h2 {
  font-family: var(--web-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--web-ink);
  margin: 0 0 16px;
}
.site-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer-col li {
  font-size: 15px;
  line-height: 20px;
  color: var(--web-ink-2);
}
.site-footer-col a {
  color: var(--web-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms;
}
.site-footer-col a:hover { color: var(--web-accent-2-ink); }
.site-footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--web-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--web-ink-2);
}
.site-footer-legal { margin: 0; line-height: 1.6; }
.site-footer-copy { margin: 0; white-space: nowrap; }
.site-footer-pending { color: var(--web-ink-2); }
@media (max-width: 1024px) {
  .site-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer-bottom { flex-direction: column; }
}