/* ============================================================
   TRANSMODAL GROUP — hoja de estilos de producción (consolidada)
   Generada desde el design-system. No editar a mano:
   la fuente vive en src/design-system + src/app/globals.css
   ============================================================ */

/* Transmodal webfonts — loaded from Google Fonts CDN.
   Primary: DM Sans · Secondary: Open Sans · Labels/eyebrows: Montserrat.
   NOTE: not self-hosted. If you need offline/self-hosted .woff2 files,
   ask the brand team for the licensed font binaries. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=Montserrat:wght@500;600;700;800&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   TRANSMODAL · COLOR TOKENS
   Logistics brand — deep nautical blues, clean & corporate.
   Base palette values come straight from the Figma "Paleta de color".
   ============================================================ */

:root {
  /* ---- Brand blues (primary) ---- */
  --tm-azul-oscuro: #05385C;   /* Azul oscuro  — darkest, headers/backgrounds */
  --tm-azul-medio:  #125E96;   /* Azul medio   — core brand blue */
  --tm-azul-claro:  #6C90AB;   /* Azul claro   — muted slate-blue */
  --tm-blanco:      #FFFFFF;   /* Blanco */

  /* ---- Accent (interactive / bright) ---- */
  --tm-accent:        #23A6F0; /* bright sky blue — buttons, links, CTAs */
  --tm-accent-hover:  #1B8FD4; /* darker on hover */
  --tm-accent-press:  #1578B5; /* darkest on press */

  /* ---- Support colors ---- */
  --tm-verde:   #8ABC49;       /* Verde   — success / eco / sustainability */
  --tm-celeste: #D2D8E4;       /* Celeste — soft surface tint */

  /* ---- Neutrals / text ---- */
  --tm-negro:       #000000;
  --tm-tinta:       #212322;   /* Tinta — near-black para H2/H3/H4 */
  --tm-gris-medio:  #737373;   /* Gris medio — body text secondary */
  --tm-gris-claro:  #ABABAB;   /* Gris claro — captions, disabled */
  --tm-gris-borde:  #E3E6EB;   /* hairline borders */
  --tm-gris-fondo:  #F6F7F9;   /* page / card alt surface */

  /* ---- Gradients (brand signature) ---- */
  --tm-grad-medio-oscuro: linear-gradient(180deg, #125E96 0%, #05385C 100%); /* @kind other */
  --tm-grad-claro-medio:  linear-gradient(180deg, #6C90AB 0%, #125E96 100%); /* @kind other */
  --tm-grad-hero:         linear-gradient(135deg, #125E96 0%, #05385C 100%); /* @kind other */

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */
  --color-bg:            var(--tm-blanco);
  --color-bg-alt:        var(--tm-gris-fondo);
  --color-bg-inverse:    var(--tm-azul-oscuro);
  --color-surface:       var(--tm-blanco);
  --color-surface-tint:  var(--tm-celeste);

  --color-text:          var(--tm-azul-oscuro);  /* primary text on light */
  --color-text-ink:      var(--tm-tinta);         /* headings near-black #212322 */
  --color-text-body:     var(--tm-gris-medio);   /* long-form body #737373 */
  --color-text-muted:    var(--tm-gris-medio);
  --color-text-subtle:   var(--tm-gris-claro);
  --color-text-inverse:  var(--tm-blanco);
  --color-text-link:     var(--tm-accent);

  --color-primary:       var(--tm-azul-medio);
  --color-primary-deep:  var(--tm-azul-oscuro);
  --color-accent:        var(--tm-accent);
  --color-success:       var(--tm-verde);

  --color-border:        var(--tm-gris-borde);
  --color-border-strong: var(--tm-azul-claro);

  --color-icon:          var(--tm-azul-medio);
}

/* ============================================================
   TRANSMODAL · TYPOGRAPHY TOKENS
   Fuente de verdad del sistema tipográfico (tabla de niveles).
   Primary: DM Sans (display, headings, nav, botones)
   Secondary: Open Sans (body, lead)
   Labels / eyebrows: Montserrat (uppercase, tracked)

   Nivel      Uso        Desktop  Mobile   Weight   LH    LS      Color
   Display    cifras     60       44–48    800–900  1.0   normal  #6C90AB
   H1         hero       58       38       800      1.2   0.2px   contextual
   H2         sección    40       30       700      1.2   0.2px   #212322
   H2·alt     subheader  48       30       600      1.2   0.2px   #125E96
   H3         tarjeta    24       22–24    700      1.2   0.1px   #212322/#125E96
   H4         subtítulo  20       18–20    700      1.25  0.1px   #212322
   Eyebrow    overline   20       20       800      1.5   0.2px   UPPERCASE
   Body       párrafo    16       14       400–500  1.5   0.2px   #737373
   Lead       destacado  20       18       500      1.5   normal  #05385C
   Small      legales    14       14       600      1.5   0.2px   #737373
   Nav/Enlace menú       14–16    14       600      1.5   0.2px   #737373→#05385C
   Botón 1º   CTA        18       18       700      1.2   0.1px   blanco/#05385C→#125E96
   Botón 2º   outline    18       18       700      1.2   0.1px   #05385C, borde 2px
   Form       campos     16       16       400      1.5   normal  borde 1px #125E96
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-label:   "Montserrat", "DM Sans", sans-serif;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ---- Type scale — DESKTOP (px) ---- */
  --fs-display:  60px;  /* cifras */
  --fs-h1:       58px;  /* hero */
  --fs-h2:       40px;  /* sección */
  --fs-h2-alt:   48px;  /* subheader */
  --fs-h3:       24px;  /* tarjeta */
  --fs-h4:       20px;  /* subtítulo */
  --fs-eyebrow:  20px;  /* overline */
  --fs-lead:     20px;  /* destacado */
  --fs-body:     16px;  /* párrafo */
  --fs-small:    14px;  /* legales / caption */
  --fs-nav:      16px;  /* menú */
  --fs-button:   18px;  /* CTA */
  --fs-form:     16px;  /* campos */

  /* ---- Type scale — MOBILE (px) ---- */
  --fs-display-m: 46px;
  --fs-h1-m:      38px;
  --fs-h2-m:      30px;
  --fs-h2-alt-m:  30px;
  --fs-h3-m:      23px;
  --fs-h4-m:      19px;
  --fs-eyebrow-m: 20px;
  --fs-lead-m:    18px;
  --fs-body-m:    14px;
  --fs-nav-m:     14px;

  /* ---- Line heights ---- */
  --lh-display: 1.0;   /* @kind other · cifras */
  --lh-heading: 1.2;   /* @kind other · H1–H3 */
  --lh-h4:      1.25;  /* @kind other · H4 */
  --lh-normal:  1.5;   /* @kind other · body / eyebrow / nav */

  /* ---- Tracking (letter-spacing) ---- */
  --ls-none:  normal;  /* @kind other */
  --ls-tight: 0.1px;   /* @kind other · H3/H4/botones */
  --ls-wide:  0.2px;   /* @kind other · H1/H2/body/nav/eyebrow */
  --ls-label: 0.2px;   /* @kind other · eyebrow (alias legacy) */
}

/* ============================================================
   TRANSMODAL · SPACING, RADII, SHADOWS, LAYOUT
   The brand reads square & engineered: buttons are sharp by
   default, with an optional fully-rounded pill variant.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-30: 120px;  /* section padding in the kit */

  /* ---- Radii ---- */
  --radius-none: 0;      /* default brand shape — square/engineered */
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 40px;   /* rounded button variant */
  --radius-full: 9999px;

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-thick: 2px;

  /* ---- Shadows (subtle, corporate) ---- */
  --shadow-sm:  0 1px 2px rgba(5, 56, 92, 0.06);
  --shadow-md:  0 4px 16px rgba(5, 56, 92, 0.10);
  --shadow-lg:  0 12px 40px rgba(5, 56, 92, 0.14);
  --shadow-card: 0 2px 12px rgba(5, 56, 92, 0.08);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1400px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur-base: 0.25s; /* @kind other */
}

/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --accent: rgb(108,194,74); /* @kind color */
  --azul-1: rgb(18,94,150); /* @kind color */
  --azul-2: rgb(5,56,92); /* @kind color */
  --azul-3: rgb(108,144,171); /* @kind color */
  --color-white: rgb(255,255,255); /* @kind color */
  --colors-neutral-icon-coloricon: var(--colors-neutral-text-colortexttertiary); /* @kind color */
  --colors-neutral-text-colortexttertiary: rgba(0,0,0,0.45); /* @kind color */
  --radius-medium: 0;
  --secundario-1: rgb(138,188,73); /* @kind color */
  --secundario-2: rgb(210,216,228); /* @kind color */
  --texto-gris-claro: rgb(171,171,171); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --colors-neutral-icon-coloricon: var(--colors-neutral-text-colortexttertiary); /* @kind color */
  --colors-neutral-text-colortexttertiary: rgba(255,255,255,0.45); /* @kind color */
}

/* ---- Estilos de la página (gt-*) ---- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.gt-page {
  --gt-ink: #05385C;        /* azul oscuro — Lead, texto botón outline */
  --gt-blue: #125E96;       /* azul medio — H2·alt, hover, borde form */
  --gt-tinta: #212322;      /* tinta near-black — H2 / H3 / H4 */
  --gt-slate: #6C90AB;      /* azul claro — Display (cifras) */
  --gt-blue-soft: #D2D8E4;
  --gt-green: #8ABC49;
  --gt-text: #737373;       /* Body / Small / Nav */
  --gt-muted: #737373;
  --gt-line: #E3E6EB;
  background: #fff;
  color: var(--gt-tinta);
  overflow-x: hidden;
}
.gt-container { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }

.gt-utility { background: var(--gt-ink); color: #fff; font: 700 12px/1 var(--font-label); }
.gt-utility-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.gt-utility span { letter-spacing: .03em; }
.gt-utility div { display: flex; gap: 18px; align-items: center; }
.gt-utility a { color: rgba(255,255,255,.88); }
.gt-utility a:hover { color: #fff; }

.gt-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--gt-line);
}
.gt-topbar-inner { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.gt-logo { height: 66px; width: auto; }

/* Nav / Enlace — 16/14 · 600 · LH1.5 · LS0.2px · #737373 → #05385C */
.gt-nav { display: flex; gap: clamp(18px, 3vw, 42px); align-items: center; }
.gt-nav a {
  color: var(--gt-text);
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
}
.gt-nav a:hover { color: var(--gt-ink); }

.gt-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.gt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,56,92,.78), rgba(5,56,92,.92));
}
.gt-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1030px;
  text-align: center;
  padding: 96px 0 118px;
}

/* H1 — 58/38 · 800 · LH1.2 · LS0.2px · contextual (blanco en hero) */
.gt-hero h1 {
  margin: 0 auto;
  max-width: 980px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h1-m), 5vw, var(--fs-h1));
  line-height: var(--lh-heading);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-wide);
}

/* Lead — 20/18 · 500 · LH1.5 · normal · #05385C (blanco en hero) */
.gt-hero p {
  max-width: 980px;
  margin: 30px auto 0;
  color: rgba(255,255,255,.94);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-none);
}
.gt-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 42px; }

/* Botones — 18px · 700 · LH1.2 · LS0.1px · radius 0 */
.gt-button {
  min-height: 62px;
  min-width: 245px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 34px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  border: 2px solid transparent;
  border-radius: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* Botón 1º canónico — fondo #05385C → hover #125E96, texto blanco */
.gt-button-primary { background: var(--gt-ink); color: #fff; }
.gt-button-primary:hover { background: var(--gt-blue); color: #fff; }
/* Botón 2º canónico — outline #05385C, borde 2px */
.gt-button-secondary { background: transparent; border-color: var(--gt-ink); color: var(--gt-ink); }
.gt-button-secondary:hover { background: var(--gt-ink); color: #fff; }
/* Variantes sobre superficies oscuras (hero / final-card) */
.gt-button-white { background: #fff; color: var(--gt-ink); }
.gt-button-white:hover { background: var(--gt-blue); color: #fff; }
.gt-button-outline { background: transparent; border: 2px solid rgba(255,255,255,.82); color: #fff; }
.gt-button-outline:hover { background: #fff; color: var(--gt-ink); }

.gt-section { padding: 100px 0; }

/* H2 — 40/30 · 700 · LH1.2 · LS0.2px · #212322 */
.gt-section h2 {
  margin: 0;
  color: var(--gt-tinta);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h2-m), 3.6vw, var(--fs-h2));
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

/* Body — 16/14 · 400 · LH1.5 · LS0.2px · #737373 */
.gt-section p {
  color: var(--gt-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
}

/* Eyebrow — 20px · 800 · LH1.5 · LS0.2px · UPPERCASE
   (prefijo .gt-page para ganar a la especificidad de `.gt-section p`) */
.gt-page .gt-eyebrow {
  margin: 0 0 18px;
  color: var(--gt-blue);
  font-family: var(--font-label);
  font-weight: var(--fw-extra);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.gt-page .gt-eyebrow-light { color: rgba(255,255,255,.86); }
.gt-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: start; }
.gt-split-tight { align-items: center; }

.gt-intro { background: #fff; }
.gt-timeline { margin-top: 66px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gt-line); border-left: 1px solid var(--gt-line); }
.gt-timeline-item { background: #fff; padding: 36px; min-height: 250px; border-right: 1px solid var(--gt-line); border-bottom: 1px solid var(--gt-line); }

/* Display (cifras) — 60/46 · 900 · LH1.0 · normal · #6C90AB */
.gt-timeline-item span {
  color: var(--gt-slate);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-display-m), 5vw, var(--fs-display));
  line-height: var(--lh-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-none);
}
/* H3 — 24/23 · 700 · LH1.2 · LS0.1px · #212322 */
.gt-timeline-item h3 {
  margin: 20px 0 12px;
  color: var(--gt-tinta);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.gt-timeline-item p {
  margin: 0;
  color: var(--gt-muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
}

.gt-brands { background: var(--gt-blue-soft); }
.gt-section-head { max-width: 900px; margin-bottom: 44px; }
.gt-brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gt-brand-card {
  background: #fff;
  display: grid;
  grid-template-rows: 330px 1fr;
  min-height: 650px;
  border: 1px solid rgba(5,56,92,.08);
}
.gt-brand-card > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.gt-brand-card > div { padding: 42px; display: flex; flex-direction: column; align-items: flex-start; }
/* Eyebrow (kicker) — mismo nivel Eyebrow, acento verde */
.gt-page .gt-card-kicker {
  margin: 0 0 14px;
  color: var(--gt-green);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-extra);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
/* H2·alt (nombre de marca) — 48/30 · 600 · LH1.2 · LS0.2px · #125E96 */
.gt-brand-card h3 {
  margin: 0;
  color: var(--gt-blue);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h2-alt-m), 4vw, var(--fs-h2-alt));
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}
.gt-brand-card p:not(.gt-card-kicker) { margin: 22px 0 28px; }
/* Enlace de tarjeta ("Ir al sitio →") */
.gt-brand-card span {
  margin-top: auto;
  color: var(--gt-blue);
  font-family: var(--font-display);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.gt-diversified-logo { width: min(330px, 100%); margin: 2px 0 16px; }

.gt-services { background: linear-gradient(180deg, #125E96 0%, #05385C 100%); color: #fff; }
.gt-services h2 { color: #fff; }
.gt-services p { color: rgba(255,255,255,.86); }
.gt-proof-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
/* Body sobre oscuro */
.gt-proof-item {
  padding: 26px;
  color: rgba(255,255,255,.86);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  border-right: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.gt-sustainability { background: #fff; }
.gt-sustainability-card { display: grid; grid-template-columns: 48% 1fr; gap: 58px; align-items: center; }
.gt-sustainability-card > img { width: 100%; height: 520px; object-fit: cover; }

.gt-final { background: #fff; padding-top: 0; }
.gt-final-card {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 72px;
}
.gt-final-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,56,92,.94), rgba(5,56,92,.62)); }
.gt-final-card > div { position: relative; z-index: 1; max-width: 760px; }
.gt-final-card h2 { color: #fff; }
.gt-final-card p:not(.gt-eyebrow) { color: rgba(255,255,255,.9); }
.gt-final-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* Form — 16px · 400 · LH1.5 · normal · borde 1px #125E96 · radius 0 */
.gt-input,
.gt-page input[type="text"],
.gt-page input[type="email"],
.gt-page input[type="tel"],
.gt-page input[type="search"],
.gt-page input[type="number"],
.gt-page textarea,
.gt-page select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-form);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-none);
  color: var(--gt-tinta);
  background: #fff;
  border: 1px solid var(--gt-blue);
  border-radius: 0;
  padding: 12px 14px;
}
.gt-input:focus,
.gt-page input:focus,
.gt-page textarea:focus,
.gt-page select:focus {
  outline: 2px solid var(--gt-blue);
  outline-offset: 1px;
}

.gt-footer { background: var(--gt-ink); color: #fff; padding: 70px 0 52px; }
.gt-footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; border-top: 1px solid rgba(255,255,255,.28); padding-top: 34px; }
.gt-footer-brand img { width: 245px; }
/* Body sobre oscuro */
.gt-footer-brand p {
  max-width: 440px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.76);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
}
.gt-footer-links { display: grid; gap: 18px; text-align: right; }
/* Nav / Enlace sobre oscuro */
.gt-footer a {
  color: rgba(255,255,255,.92);
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
}
.gt-footer a:hover { color: #fff; }

@media (max-width: 980px) {
  .gt-topbar-inner { min-height: 86px; }
  .gt-logo { height: 52px; }
  .gt-nav { gap: 16px; }
  .gt-nav a { font-size: var(--fs-nav-m); }
  .gt-hero { min-height: 620px; }
  .gt-split, .gt-brand-grid, .gt-sustainability-card { grid-template-columns: 1fr; }
  .gt-timeline { grid-template-columns: 1fr; }
  .gt-proof-grid { grid-template-columns: 1fr; }
  .gt-sustainability-card > img { height: 380px; }
  .gt-footer-inner { flex-direction: column; }
  .gt-footer-links { text-align: left; }
}

@media (max-width: 640px) {
  /* Overrides mobile de la tabla (Body 14 · Lead 18 · Nav 14 · H3 23 · H4 19) */
  .gt-page {
    --fs-body: var(--fs-body-m);
    --fs-lead: var(--fs-lead-m);
    --fs-nav:  var(--fs-nav-m);
    --fs-h3:   var(--fs-h3-m);
    --fs-h4:   var(--fs-h4-m);
  }
  .gt-container { width: min(100% - 28px, 1240px); }
  .gt-utility { display: none; }
  .gt-topbar-inner { min-height: 74px; }
  .gt-logo { height: 44px; }
  .gt-nav { display: none; }
  .gt-hero { min-height: 560px; }
  .gt-hero-inner { padding: 72px 0 82px; }
  .gt-hero p { font-weight: var(--fw-medium); }
  .gt-section { padding: 74px 0; }
  .gt-button { width: 100%; min-width: 0; min-height: 58px; }
  .gt-brand-card { grid-template-rows: 240px 1fr; min-height: auto; }
  .gt-brand-card > div, .gt-timeline-item { padding: 28px; }
  .gt-sustainability-card > img { height: 280px; }
  .gt-final-card { padding: 38px 26px; min-height: 500px; }
}