/* HOK rebrand override — loaded after the inline :root vars so it wins.
 * Single source of truth for the HOK palette. Tweak the two values below. */
:root {
  /* HOK palette — núcleo del isotipo (Mati 2026-06-28) */
  --c-lime: #ADF405;        /* HOK lima eléctrica (antes #1fd68a petró) */
  --c-dark-green: #181E24;  /* HOK carbón (antes #052424 petró) */
  /* derivados que en el bundle eran rgba literales del petró viejo (rgb 5,36,36) */
  --c-dark-green-05: rgba(24,30,36,.05);
  --c-dark-green-15: rgba(24,30,36,.15);
  --c-dark-green-20: rgba(24,30,36,.20);
}

/* The logo + animated logos hardcode the old lime as an inline SVG fill.
   CSS fill overrides the presentation attribute, so recolor only those paths. */
svg [fill="#ABFF02"],
svg [fill="#abff02"] { fill: var(--c-lime) !important; }

/* HERO TRAP ("trabarse") — replicate the native sticky pin.
   In the live site the hero component sets .sequence-background-wrapper and .content
   to position:sticky; height:100vh, so the tall .video-sequence-scroll track scrolls
   past while the canvas + text stay pinned (the "trap"), revealing the text
   progressively. Offline that JS never applies it (they stay static) so there is no
   trap. Force it via CSS to match the original exactly. */
/* HERO TRAP — pin the hero unit (truck visual + text) to the viewport while the
   tall track scrolls past, so it "traps" and the text reveals progressively.
   Offline the native component never applies this, so we force it. */
.video-carousel .video-sequence-background {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 0 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* LOGO — the nav/footer wordmark is a Vue component that re-renders its inline
   SVG on hydration, so a static HTML swap is discarded. Do it in CSS instead:
   hide the vector "Terminal" wordmark and render an "HOK" lockup via ::after.
   The per-letter `animated-logo` (scroll reveal) is class `animated-logo`, NOT
   `terminal-logo`, so it is left untouched. */
svg.terminal-logo,
.logo-link svg, .logo-section svg, .mobile-drawer-logo-link svg { display: none !important; }
.logo-link, .logo-section, .mobile-drawer-logo-link {
  position: relative; display: inline-flex; align-items: center;
}
/* Isotipo HOK antes del wordmark (lockup [iso] HOK) */
.logo-link::before, .logo-section::before, .mobile-drawer-logo-link::before {
  content: ""; display: inline-block; flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem; margin-right: 0;
  background: url("/images/hok-isotipo.svg") center/contain no-repeat;
}
/* Solo el isotipo en el nav (pedido de Mati): wordmark "HOK" oculto */
.logo-link::after, .logo-section::after, .mobile-drawer-logo-link::after {
  content: none;
}

/* Section glow gradient hardcodes rgba(171,255,2,..) in a bundle rule.
   If you want it on-brand too, uncomment and scope to the element:
   .some-glow { background: radial-gradient(circle at 50% 50%, rgba(31,214,138,.8), transparent 15rem) !important; } */

/* ============================================================================
   TÍTULOS → Nippo  (la fuente de HOK). El body/texto queda con Suisse de la web.
   Cambio scopeado SOLO a selectores de título — no toca body, botones, animaciones
   ni la sección BENEFICIOS (es solo font-family, no altera layout ni timing).
   Mati 2026-06-28. */
@font-face{font-family:"Nippo";src:url("/fonts/Nippo-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nippo";src:url("/fonts/Nippo-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Nippo";src:url("/fonts/Nippo-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
.title-h1, .title-h2, .title-h3, .title-h4, .title-sequence, .title-si,
.heading__wrapper, .title__wrapper, .footer-title, .drawer-section-title,
.category-resources__title, .error-page__title {
  font-family: "Nippo", var(--font-primary), sans-serif !important;
}

/* ============================================================================
   INTRO / LOADER — el isotipo "T" y el texto "Terminal" son un componente Vue
   (se re-renderiza en hidratación → editar el HTML estático no sirve). Override
   por CSS: ocultar el SVG/texto de Terminal y mostrar el isotipo HOK + "HOK". */
.animated-logo svg { display: none !important; }
.animated-logo::before {
  content: ""; flex: 0 0 auto;
  width: 10em; height: 10em;
  background: url("/images/hok-isotipo.svg") center/contain no-repeat;
}
/* el texto ahora lo anima el bundle (gi("HOK")) — solo le damos la tipografía de marca */
.animated-logo .text { font-family: "Nippo", "SuisseIntl", sans-serif !important; }

/* ───────────────────────────────────────────────────────────────
   Ocultar la banda de logos de clientes de Terminal (Ryder/DSV/Bimbo/
   NFI/Ocean Spray/…). NO son clientes de HOK → mostrar marcas ajenas es
   falso y poco profesional. Banda = .logo-grid-window (intro + .logo-grid).
   CSS (no DOM) → sobrevive el re-render de Vue.
   Reemplazo por una banda de métricas/casos HOK: pendiente (web-cliente).
   ─────────────────────────────────────────────────────────────── */
.logo-grid-window { display: none !important; }
.logo-grid { display: none !important; }
/* cinturón y tiradores: cualquier logo del CDN de Terminal (cuenta 337048) */
img[src*="/337048/"] { display: none !important; }