/* =========================================================
   Marine Trade Finance — marinetradefinance.com
   Plantilla Green Bunkers aplicada (ver ../plantilla-web/PROMPT.md)

   Bloque 0 de la plantilla — lo único propio de esta web:
     COLOR PRIMARIO   #0B3E65  (navy)
     COLOR SECUNDARIO #F37022  (naranja)
     COLOR TEXTO      #14202C  (en vez del #424242 genérico)

   El naranja no se usa nunca como texto pequeño sobre fondo claro: no llega
   al contraste mínimo. Para eso están --secondary-ink y --secondary-lite.

   Todo lo demás (escala tipográfica, espaciado, radios, animaciones,
   breakpoints) es la plantilla sin modificar.
   ========================================================= */

@import url("assets/fonts.css");

/* =========================================================
   BLOQUE 3 — Color
   ========================================================= */

:root {
  --primary:       #0B3E65;
  --primary-deep:  #072B47;
  --secondary:     #F37022;

  /* Variantes del naranja de marca. El naranja puro da 2.94:1 sobre blanco,
     por debajo del mínimo AA de 4.5, así que NO se usa como texto pequeño:
       --secondary       relleno, bordes, acentos (no texto)
       --secondary-ink   texto pequeño sobre fondo claro   → 5.17:1 blanco,
                                                             4.60:1 sobre tinte
       --secondary-lite  texto sobre fondo navy            → 6.57:1  */
  --secondary-ink: #B54E13;
  --secondary-lite:#F9A870;

  --text:          #14202C;
  --white:         #FFFFFF;
  --cream:         #F7F5F1;

  /* Derivados — calculados desde primary/secondary, no elegidos a mano */
  --section-tint:  rgba(11, 62, 101, 0.07);
  --overlay-light: rgba(255, 255, 255, 0.10);
  --overlay-mid:   rgba(255, 255, 255, 0.39);
  --border-soft:   #C1C2CF;
  --text-muted:    #4A5764;
  --rule-light:    rgba(247, 245, 241, 0.20);

  /* Tipografía */
  --serif: "Fauna One", Georgia, "Times New Roman", serif;
  --sans:  "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono-label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* BLOQUE 4 — Retícula y espaciado */
  --container:      1140px;
  --container-wide: 1400px;
  --gutter:  40px;

  --gap-xs:  8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;

  --section-y: 96px;
  --card-padding: 32px;

  --radius:    10px;
  --radius-lg: 15px;
}

/* =========================================================
   Base
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;          /* BLOQUE 2 — cuerpo 18px/1.6 */
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* BLOQUE 2 — escala tipográfica, con clamp() entre móvil y escritorio */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--primary);
  margin: 0;
}

h1 {
  font-size: clamp(32px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.139;
  letter-spacing: -1px;
}
h2 {
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 500;
  line-height: 1.103;
  letter-spacing: -1px;
}
h3 {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.278;
  letter-spacing: -1px;
}
h4 {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.333;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-muted);
}

/* BLOQUE 8 — Eyebrow. No encoge nunca: marca el ritmo de lectura. */
.eyebrow {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--secondary-ink);
  margin: 0 0 12px;
}
/* Sobre navy el naranja oscurecido se hunde (2.43:1): ahí va el claro. */
.section-dark .eyebrow,
.on-dark .eyebrow,
.band .eyebrow { color: var(--secondary-lite); }

.label {
  font-family: var(--mono-label);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.143;
  color: var(--text-muted);
}

.micro {
  font-family: var(--mono-label);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.quote {
  font-family: var(--mono-label);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide { max-width: var(--container-wide); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary); color: var(--white);
  padding: 12px 18px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Foco siempre visible — la plantilla prohíbe outline:none */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}

/* =========================================================
   BLOQUE 8 — Botones
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* texto centrado también si el botón se estira */
  text-align: center;
  gap: var(--gap-xs);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  text-decoration: none;
  white-space: nowrap;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Primario — relleno secundario, hover se vacía */
.btn-primary {
  background: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}
.btn-primary:hover {
  background: transparent;
  color: var(--secondary-ink);
}

/* Outline — transparente, hover se rellena */
.btn-outline {
  background: transparent;
  color: var(--secondary-ink);
  border-color: var(--secondary);
}
.btn-outline:hover {
  background: var(--secondary);
  color: var(--white);
}

/* Outline sobre fondo oscuro/imagen — borde blanco */
.btn-on-dark {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-on-dark:hover {
  background: var(--white);
  color: var(--primary);
}

/* Link de texto — la segunda acción de una sección nunca es un botón */
.link-quiet {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease;
}
.link-quiet:hover { color: var(--secondary-ink); border-color: var(--secondary-ink); }
.on-dark .link-quiet { color: var(--white); border-color: var(--rule-light); }
.on-dark .link-quiet:hover { color: var(--secondary-lite); border-color: var(--secondary-lite); }

/* =========================================================
   BLOQUE 5.1 — Barra superior
   ========================================================= */

.topbar {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  min-height: 44px;
  flex-wrap: wrap;
}
.topbar a {
  text-decoration: none;
  transition: color .3s ease;
}
.topbar a:hover { color: var(--white); }
.topbar-contact {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
}
.topbar-social {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}
.topbar-social svg { width: 16px; height: 16px; fill: currentColor; }

/* =========================================================
   BLOQUE 5.2 / 6 — Header sticky
   No encoge, no cambia de altura, no oculta el logo.
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-stuck {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  border-bottom-color: rgba(11, 62, 101, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  min-height: 82px;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: var(--primary);
}
.wordmark-mark {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  border-right: 1px solid var(--border-soft);
  padding-right: 14px;
}
.wordmark-name {
  font-family: var(--mono-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

/* Los links y el CTA van en una sola fila. Sin esto el <ul> y el botón
   se apilan como bloques y el CTA se sale del header. */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/* Acotado a `ul a`: sin esto también alcanza al CTA del header, que es un
   <a> dentro de .primary-nav, y le pisa el padding, el color y el borde
   de .btn — el botón queda pegado al texto. */
.primary-nav ul a {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.primary-nav ul a:hover { color: var(--secondary-ink); border-bottom-color: var(--secondary-ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  width: 48px; height: 44px;
  cursor: pointer;
  position: relative;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 14px;
  width: 20px; height: 2px;
  background: var(--primary);
  content: "";
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle-bars { top: 21px; }
.nav-toggle-bars::before { top: -7px; left: 0; }
.nav-toggle-bars::after  { top: 7px;  left: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Secciones
   ========================================================= */

.section { padding: var(--section-y) 0; }
.section-tint { background: var(--section-tint); }
.section-dark {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.78);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }

.section-head { max-width: 62ch; margin-bottom: var(--gap-lg); }
.section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--text-muted); }
.section-dark .section-head p { color: rgba(255, 255, 255, 0.72); }

/* =========================================================
   BLOQUE 5.3 — Hero
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Sin esto, en portátiles de poca altura el titular toca el header */
  padding: var(--section-y) 0;
  background: var(--primary-deep);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 43, 71,.55) 0%, rgba(7, 43, 71,.88) 100%),
    var(--overlay-light);
  z-index: 1;
}
/* Sustituir por fotografía real: background-image en .hero-media */
.hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(243, 112, 34,.30) 0%, transparent 62%),
    radial-gradient(110% 80% at 8% 88%, rgba(19, 78, 124,.85) 0%, transparent 60%),
    var(--primary-deep);
}
.hero .container { position: relative; z-index: 2; }

/* El ancho lo fija el bloque, no el titular: así el eyebrow no parte
   y el subtítulo puede usar sus 52ch. */
.hero-copy { max-width: min(920px, 100%); }
.hero h1 {
  color: var(--white);
  margin-bottom: var(--gap-md);
  text-wrap: balance;   /* reparte las líneas; degrada solo si no hay soporte */
}
.hero .eyebrow { color: var(--secondary-lite); }
.hero-lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin-bottom: var(--gap-lg);
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

/* =========================================================
   BLOQUE 5.5 / 8 — Tarjetas de valor
   ========================================================= */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg);
}

.card {
  background: var(--section-tint);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  text-align: center;
  transition: transform .3s ease;
}
.card h4 { margin-bottom: var(--gap-sm); }
.card p { color: var(--text-muted); margin: 0; }

.card-icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--gap-md);
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Único efecto de hover con movimiento en toda la web */
.hover-float { transition: transform .3s ease; }
.hover-float:hover { transform: translateY(-8px); }

/* =========================================================
   BLOQUE 5.6 / 8 — Bloque imagen + texto, alternando
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-lg);
  align-items: center;
}
.split + .split { margin-top: 72px; }

/* Alterna el lado en cada bloque consecutivo */
.split.is-reversed .split-media { order: 2; }

.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  background:
    linear-gradient(140deg, rgba(11, 62, 101,.94) 0%, rgba(19, 78, 124,.86) 55%, rgba(243, 112, 34,.55) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--card-padding);
  color: var(--white);
}
/* Gesto asimétrico: UNA sola vez por página, en la imagen más importante */
.split-media.is-feature { border-radius: 10px 0 0 64px; }

.split-media-label {
  font-family: var(--mono-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.split-body h4 { margin-bottom: var(--gap-xs); }
.split-body .sub { color: var(--secondary-ink); font-weight: 600; margin-bottom: var(--gap-md); }
.split-body p { color: var(--text-muted); }
.split-body .btn, .split-body .link-quiet { margin-top: var(--gap-sm); }

/* =========================================================
   Listas
   ========================================================= */

.list-check {
  list-style: none;
  margin: 0 0 var(--gap-lg);
  padding: 0;
}
.list-check li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid rgba(11, 62, 101, 0.10);
  color: var(--text-muted);
}
.section-dark .list-check li {
  border-bottom-color: var(--rule-light);
  color: rgba(255, 255, 255, 0.78);
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 18px; height: 2px;
  background: var(--secondary);
}

.numbered { list-style: none; margin: 0; padding: 0; }
.numbered > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--gap-sm);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid rgba(11, 62, 101, 0.10);
}
.numbered .num {
  font-family: var(--mono-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--secondary-ink);
  padding-top: 10px;
}
.numbered h4 { margin-bottom: var(--gap-xs); }
.numbered p { color: var(--text-muted); max-width: 58ch; margin: 0; }

/* Servicios */
.service-group + .service-group { margin-top: var(--gap-lg); }
.group-label {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--secondary-ink);
  margin: 0 0 var(--gap-md);
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid rgba(11, 62, 101, 0.10);
}
.service {
  background: var(--white);
  border: 1px solid rgba(11, 62, 101, 0.10);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
}
/* El nivel del encabezado lo manda la jerarquía del documento; dentro de una
   ficha se compone siempre a escala de tarjeta, no de titular de sección. */
.service h2, .service h3, .service h4 {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.333;
  letter-spacing: normal;
  margin-bottom: var(--gap-xs);
}
.service p { color: var(--text-muted); margin: 0; }
/* Las fichas con más de un párrafo necesitan aire entre ellos */
.service p + p { margin-top: var(--gap-sm); }

/* Callout transversal: misma ficha, con filete de acento a la izquierda.
   No es un producto más, por eso ocupa el ancho completo. */
.service-callout {
  margin-top: var(--gap-lg);
  border-left: 3px solid var(--secondary);
}
.service-callout h4 { color: var(--secondary-ink); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
}

/* Tres pilares — solo texto, da respiro tras tanto bloque visual */
.pillar h4 { margin-bottom: var(--gap-xs); }
.pillar p { color: var(--text-muted); margin: 0; }
.section-dark .pillar p { color: rgba(255, 255, 255, 0.72); }

/* Banda de cierre */
.band {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 64px var(--card-padding);
  text-align: center;
}
.band h2 { color: var(--white); margin-bottom: var(--gap-sm); }
.band p { color: rgba(255, 255, 255, 0.78); max-width: 60ch; margin: 0 auto var(--gap-lg); }

/* Párrafo de cierre de sección (Approach, Team). Hereda el color del
   contenedor, así funciona igual sobre fondo claro y sobre navy. */
.closing-copy {
  max-width: 68ch;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.7;
}

/* Marcador de copy pendiente — la plantilla prohíbe inventar texto.
   Sin uso ahora mismo; se conserva para futuros huecos de redacción. */
.copy-todo {
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: var(--gap-md);
  font-family: var(--mono-label);
  font-size: 14px;
  color: var(--text-muted);
  background: rgba(243, 112, 34, 0.05);
}

.logo-strip-box {
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: 46px 20px;
  text-align: center;
  font-family: var(--mono-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================================
   BLOQUE 8 — Formulario
   ========================================================= */

.form { max-width: 720px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
}
.field { margin-bottom: var(--gap-md); }

.field label {
  display: block;
  font-family: var(--mono-label);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--gap-xs);
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(243, 112, 34, 0.18);
  outline: none;               /* sustituido por el box-shadow de foco, no eliminado */
}
.field textarea { resize: vertical; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }

/* Consentimiento RGPD — obligatorio antes de enviar */
.field-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}
.field-consent input {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 3px;
  accent-color: var(--secondary);
}
.field-consent label {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.field-consent a { color: var(--primary); }

/* Trampa antispam: fuera de pantalla, nunca visible ni tabulable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--gap-sm);
  font-size: 15px;
  color: var(--text-muted);
  min-height: 1.4em;
}
/* El error no se distingue solo por el color: el texto ya dice qué pasa. */
.form-status.is-error { color: #B3261E; font-weight: 600; }

/* =========================================================
   Páginas legales
   ========================================================= */

.legal { padding: var(--section-y) 0; max-width: 76ch; }
.legal h1 { color: var(--primary); margin-bottom: var(--gap-md); }
.legal h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: var(--gap-lg) 0 var(--gap-sm);
}
.legal h3 {
  font-size: clamp(19px, 1.7vw, 22px);
  margin: var(--gap-md) 0 var(--gap-xs);
}
.legal p, .legal li { color: var(--text-muted); }
.legal ul, .legal ol { padding-left: 1.2em; margin: 0 0 1.15em; }
.legal li { margin-bottom: var(--gap-xs); }
.legal a { color: var(--primary); }
.legal .updated {
  font-family: var(--mono-label);
  font-size: 14px;
  color: var(--text-muted);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid rgba(11, 62, 101, 0.10);
  margin-bottom: var(--gap-lg);
}
.legal-notice-box {
  border: 1px dashed var(--secondary);
  border-radius: var(--radius);
  background: rgba(243, 112, 34, 0.06);
  padding: var(--gap-md);
  margin-bottom: var(--gap-lg);
  font-family: var(--mono-label);
  font-size: 14px;
  color: var(--text);
}
.legal-notice-box strong { color: var(--secondary-ink); }
/* Desacotado de .legal: la misma tabla se usa en la home y en /investors */
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 480px; }
.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid rgba(11, 62, 101, 0.10);
  font-size: 15px;
}
.table-scroll th { color: var(--primary); font-weight: 600; }
/* Tabla de parámetros: la primera columna es la etiqueta del dato */
.table-params td:first-child { color: var(--primary); font-weight: 600; width: 34%; }

/* Enlace de pie de sección */
.section-foot { margin-top: var(--gap-lg); }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: var(--primary-deep);
  color: rgba(247, 245, 241, 0.70);
  padding: 64px 0 48px;
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-md) var(--gap-lg);
}
.footer-name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--gap-xs);
}
.footer-contact a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 2px;
  transition: color .3s ease;
}
.footer-contact a:hover { color: var(--white); }

.footer-nav {
  display: flex;
  gap: var(--gap-md);
  align-items: flex-start;
  flex-wrap: wrap;
}
.footer-nav a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: color .3s ease;
}
.footer-nav a:hover { color: var(--white); }

.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  padding-top: var(--gap-md);
  font-size: 14px;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--white); }

.disclaimer {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--rule-light);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 245, 241, 0.55);
}
.disclaimer span { display: block; max-width: 76ch; }

/* =========================================================
   BLOQUE 6 — Animaciones de entrada
   fadeInUp 30px / 600ms, escalonado 0 → 200 → 400ms.
   ========================================================= */

.reveal {
  opacity: 0;
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal,
.reveal-up      { transform: translateY(30px); }
.reveal-left    { transform: translateX(-30px); }
.reveal-right   { transform: translateX(30px); }
.reveal-fade    { transform: none; }

/* Escalonado: nunca más de 400ms */
.reveal-d1 { transition-delay: .2s; }
.reveal-d2 { transition-delay: .4s; }

/* =========================================================
   BLOQUE 7 — Responsive. Tres breakpoints, ni uno más.
   ========================================================= */

/* --- Escritorio estrecho: con cinco ítems de menú más el CTA, el header
       no cabe holgado por debajo de ~1200px. Solo aprieta la separación;
       no cambia tamaños ni oculta nada. --- */
@media (min-width: 1025px) and (max-width: 1200px) {
  .primary-nav,
  .primary-nav ul { gap: var(--gap-md); }
}

/* --- Tablet: 768–1024px --- */
@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
    --section-y: 76px;
  }

  .primary-nav { display: none; }
  .primary-nav.is-open {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 82vw);
    background: var(--primary);
    padding: 96px var(--gutter) var(--gutter);
    overflow-y: auto;
    z-index: 120;
  }
  .primary-nav.is-open ul { flex-direction: column; gap: 0; }
  .primary-nav.is-open li { border-bottom: 1px solid var(--rule-light); }
  .primary-nav.is-open ul a {
    display: block;
    padding: 18px 0;
    font-size: 20px;
    color: var(--white);
    border-bottom: none;
    min-height: 44px;
  }
  .primary-nav.is-open .btn {
    margin-top: var(--gap-md);
    width: 100%;
    justify-content: center;
  }

  .nav-toggle { display: block; z-index: 130; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 43, 71, .5);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* Rejillas de 3 → 2 columnas */
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Los bloques imagen-texto siguen en horizontal, imagen al 40% */
  .split { grid-template-columns: 40% minmax(0, 1fr); gap: var(--gap-md); }
  .split.is-reversed { grid-template-columns: minmax(0, 1fr) 40%; }
  .split-media { min-height: 260px; }
}

/* --- Móvil: ≤767px --- */
@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --section-y: 56px;
    --card-padding: 24px;
  }

  body { font-size: 16px; }

  .wordmark-name { display: none; }
  .wordmark-mark { border-right: none; padding-right: 0; }
  .header-inner { min-height: 66px; }

  .hero { min-height: 100svh; }
  .hero-copy { max-width: none; }
  .hero-actions { gap: var(--gap-sm); }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Todo a una columna */
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); }

  /* La imagen SIEMPRE encima del texto, dé igual el lado en escritorio */
  .split,
  .split.is-reversed { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); }
  .split.is-reversed .split-media { order: 0; }
  .split + .split { margin-top: var(--gap-lg); }
  .split-media { min-height: 200px; }
  .split-media.is-feature { border-radius: 10px 0 0 40px; }

  .numbered > li { grid-template-columns: 44px minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .band { padding: 40px var(--card-padding); }

  /* Áreas táctiles mínimas de 44px */
  .topbar-social a,
  .footer-nav a,
  .primary-nav ul a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Desplazamiento y escalonado reducidos: en pantalla pequeña se notan */
  .reveal, .reveal-up { transform: translateY(20px); }
  .reveal-left  { transform: translateX(-20px); }
  .reveal-right { transform: translateX(20px); }
  .reveal-d1 { transition-delay: .12s; }
  .reveal-d2 { transition-delay: .24s; }
}

/* Tablas: nunca provocan scroll horizontal en la página */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================
   BLOQUE 6 — Accesibilidad del movimiento (obligatorio)
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hover-float:hover { transform: none; }
}