/* ============================================================
   INTLOGISTIC S.A.S. - Design system
   Marca: azul #0242a4 (tomado del isotipo original), gris neutro,
   blanco. Un solo acento (azul). Radios: pill en interactivos,
   14px en tarjetas/paneles. Tipografía: Space Grotesk (display) +
   Manrope (texto).
   ============================================================ */

:root {
  --navy-950: #060e1f;
  --navy-900: #0a1830;
  --navy-800: #0f2247;
  --navy-700: #16305f;
  --brand: #0242a4;
  --brand-600: #0350c4;
  --brand-500: #1863e0;
  --brand-400: #4f8ef2;
  --sky-300: #8cbcff;
  --ink-900: #0c1220;
  --ink-700: #34394a;
  --ink-500: #5c6478;
  --ink-400: #7c8496;
  --line: #e3e7f0;
  --line-soft: #edf0f6;
  --surface: #ffffff;
  --surface-alt: #f5f7fb;
  --surface-tint: #eef2fb;
  --success: #147a4b;
  --danger: #b32a2a;

  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-input: 10px;

  --container: 1240px;
  --nav-h: 76px;
  /* Alto reservado por la cintilla fija de indicadores. La franja se mantiene
     aunque la consulta falle (muestra un aviso), así que nunca cambia el layout. */
  --ticker-h: 38px;
  /* Verde/rojo de mercado para las variaciones de la cintilla. Van aquí y no en
     --success/--danger porque esos están calibrados para texto sobre blanco y
     sobre la franja casi negra quedarían apagados. Contraste medido sobre
     #04070f: 9,7:1 y 6,6:1 (AA de sobra). */
  --ticker-up: #2ecc8f;
  --ticker-down: #ff5a52;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Regla más firme que --line: sostiene la estructura tabular del hero y los ledgers */
  --rule: #d3dcea;

  /* Tokens que cambian en modo oscuro (ver [data-theme="dark"] al final). El
     texto de titulares y el azul de enlaces ya no salen de --navy-900 / --brand,
     porque esos también son FONDOS (secciones oscuras, botones) y no pueden
     invertirse. */
  --heading: var(--navy-900);
  --brand-ink: var(--brand);
  --header-bg: rgba(255, 255, 255, 0.92);
  --icon-plate: var(--surface-tint);
  --field-bg: var(--surface);

  --shadow-sm: 0 1px 2px rgba(10, 24, 48, 0.06), 0 1px 1px rgba(10, 24, 48, 0.04);
  --shadow-md: 0 12px 32px -12px rgba(10, 24, 48, 0.22);
  --shadow-lg: 0 24px 64px -20px rgba(6, 14, 31, 0.35);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Sin scroll anchoring: el header sticky encoge 20px al cruzar el umbral de
     scroll (.is-scrolled) y Chrome "compensaba" bajando scrollY, lo que quitaba
     la clase, el header volvía a crecer y así en bucle (temblor entre ~14 y 30px).
     Ver main.js, "Sticky header". */
  overflow-anchor: none;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ticker-h) + var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html.i18n-pending body { visibility: hidden; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

body {
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.58;
  padding-top: var(--ticker-h);
}

h1, h2, h3, h4, .display {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--heading);
  text-wrap: balance;
}
h1, .display { font-weight: 800; letter-spacing: -0.035em; }

/* Códigos, cifras y datos tabulares (partidas, tributos, teléfonos) */
.tnum, address {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 640px) {
  .container { padding-inline: 20px; }
}

.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: 16px; top: -60px;
  background: var(--brand); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-pill);
  z-index: 200; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: calc(var(--ticker-h) + 16px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(2, 66, 164, 0.55);
}
.btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--heading);
}
.btn-outline:hover { border-color: var(--brand-ink); color: var(--brand-ink); }

.btn-block { width: 100%; }

/* ---------- Cintilla de indicadores ----------
   Fija en el tope, por encima del topbar y del header pegajoso. El carrusel es
   CSS puro: la pista lleva la lista de indicadores dos veces y se desplaza hasta
   -50%, de modo que el segundo juego llega justo donde arrancaba el primero y el
   bucle no tiene costura. No hace falta ninguna librería de animación.
   El alto lo reserva --ticker-h desde :root; la franja nunca se colapsa, así que
   no hay salto de layout cuando llegan (o fallan) los datos. */
.ticker-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  height: var(--ticker-h);
  display: flex; align-items: center;
  overflow: hidden;
  background: #04070f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  line-height: 1;
}

/* Difumina los dos extremos para que los indicadores no aparezcan ni se corten
   de golpe contra el borde de la pantalla. */
.ticker-bar::before,
.ticker-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
  pointer-events: none;
}
.ticker-bar::before { left: 0; background: linear-gradient(90deg, #04070f 15%, rgba(4, 7, 15, 0)); }
.ticker-bar::after { right: 0; background: linear-gradient(270deg, #04070f 15%, rgba(4, 7, 15, 0)); }

.ticker-track {
  display: flex; align-items: center; flex: none;
  white-space: nowrap;
  will-change: transform;
  /* main.js calcula --ticker-duration con el ancho real para que la velocidad
     sea la misma haya 4 indicadores o 12. */
  animation: ticker-scroll var(--ticker-duration, 90s) linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Se detiene al pasar el cursor o al tabular dentro: un dato que se escapa
   mientras lo estás leyendo es peor que no mostrarlo. */
.ticker-bar:hover .ticker-track,
.ticker-bar:focus-within .ticker-track { animation-play-state: paused; }

/* Carga o error: sin desplazamiento. Sin movimiento tampoco hace falta
   difuminar el borde izquierdo, que ahí solo apagaría el primer dato. Ya NO se
   usa cuando la lista es más corta que la pantalla (monitores de 2560 px): ahí
   main.js rellena cada copia con .ticker-spacer y la cinta sigue corriendo. */
.ticker-bar.is-static .ticker-track { animation-name: none; }
.ticker-bar.is-static::before { display: none; }

/* Relleno invisible al final de cada copia para que mida al menos el ancho de la
   barra; su ancho lo pone main.js. */
.ticker-spacer { flex: none; height: 1px; }

.ticker-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 22px;
  /* El borde va en TODOS los ítems, incluido el primero, para que las dos
     copias de la pista midan exactamente lo mismo y el bucle no derive. */
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.ticker-name { color: rgba(255, 255, 255, 0.58); font-weight: 500; }
.ticker-value { color: #fff; font-weight: 600; }

/* Verde al alza y rojo a la baja: aquí el color NO está diciendo "bueno/malo"
   (una TRM al alza es mala noticia para un importador), sino que es el código de
   mercado con el que se lee cualquier cintilla de cotizaciones. La flecha sigue
   cargando la dirección por su cuenta, así que el dato no depende del color
   —importa para daltonismo y para una impresión en blanco y negro—.
   Ojo: el panel de TRM del hero sigue deliberadamente SIN color; ese es un dato
   suelto, no una cinta de mercado. */
.ticker-delta { color: rgba(255, 255, 255, 0.5); font-size: 0.72rem; }
.ticker-delta.is-up { color: var(--ticker-up); }
.ticker-delta.is-down { color: var(--ticker-down); }
.ticker-arrow { font-size: 0.66rem; }

/* gracias/ es la confirmación del formulario: va sin cintilla, igual que va sin
   topbar y sin menú. Anular el token evita que quede reservada la franja. */
.sin-ticker { --ticker-h: 0px; }

.ticker-status { padding: 0 22px; color: rgba(255, 255, 255, 0.55); }
.ticker-status a { color: var(--sky-300); text-decoration: underline; text-underline-offset: 2px; }

.ticker-skeleton {
  display: inline-block; width: 190px; height: 9px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.16), rgba(255,255,255,.07));
  background-size: 200% 100%;
  animation: ticker-shimmer 1.4s ease-in-out infinite;
}
@keyframes ticker-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (max-width: 640px) {
  :root { --ticker-h: 34px; }
  .ticker-bar { font-size: 0.74rem; }
  .ticker-item { padding: 0 16px; gap: 6px; }
  .ticker-bar::before, .ticker-bar::after { width: 34px; }
}

/* La cintilla se mueve siempre, sin importar prefers-reduced-motion: a
   diferencia de la entrada del hero o las partículas (que sí respetan esa
   preferencia), esta lleva información -cotizaciones- y su movimiento es un
   desplazamiento lineal y lento, justo el tipo que esa preferencia no busca
   evitar (evita lo brusco/parpadeante). Decisión explícita del cliente,
   verificada primero: con "Efectos de animación" activado en Windows la
   cintilla seguía congelada, así que el freeze lo causaba la regla global de
   arriba (animation-duration a ~0 con !important sobre *), no el sistema.
   Aquí se restaura con más especificidad (clase > selector universal), que
   gana el empate de !important sin depender del orden en la hoja. El shimmer
   de carga si sigue respetando la preferencia, por no ser el dato en sí. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation-duration: var(--ticker-duration, 90s) !important;
    animation-iteration-count: infinite !important;
  }
  .ticker-skeleton { animation-name: none; }
}

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 40px;
}
.topbar-links { display: flex; align-items: center; gap: 22px; }
.topbar-links a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color 0.2s var(--ease); }
.topbar-links a:hover { color: #fff; }
.topbar-links svg { width: 14px; height: 14px; opacity: 0.85; }
.topbar-rate { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.topbar-rate .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex: none; }

@media (max-width: 780px) {
  .topbar-rate { display: none; }
}
/* En móvil el teléfono pesa más que el correo: se quita el correo para que el
   número quepa en una línea (antes se partía en dos y el correo lo desplazaba). */
@media (max-width: 640px) {
  .topbar-links { width: 100%; justify-content: space-between; gap: 12px; }
  .topbar-links a[href^="mailto:"] { display: none; }
}

/* ---------- Main nav ---------- */
.site-header {
  position: sticky; top: var(--ticker-h); z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line-soft);
}
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  gap: 20px;
  transition: height 0.25s var(--ease);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 60px; width: auto; display: block; transition: height 0.25s var(--ease); }
.brand-logo--dark { display: none; }

@media (min-width: 1025px) {
  .site-header:not(.is-scrolled) .navbar { height: 96px; }
  .site-header:not(.is-scrolled) .brand-logo { height: 72px; }
}

.nav-links {
  display: flex; align-items: center; gap: 6px;
  flex: 1; justify-content: center;
}
.nav-links a {
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-size: 0.94rem; font-weight: 500; color: var(--ink-700);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  background: var(--surface-tint); color: var(--brand-ink);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Idioma (banderas) y tema (sol/luna). Botones de 36px: el área de toque mínima
   cómoda sin ensanchar el cabezal. */
.lang-switch { display: inline-flex; align-items: center; gap: 4px; }
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  border: 1px solid transparent; color: var(--heading);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.lang-btn { opacity: 0.55; }
.lang-btn:hover { opacity: 1; background: var(--surface-tint); }
.lang-btn[aria-pressed="true"] { opacity: 1; border-color: var(--line); background: var(--surface-tint); }
.flag { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(10, 24, 48, 0.14); display: block; }

/* Interruptor claro/oscuro. El riel es "hundido" (sombra interior) y lleva el
   icono del modo contrario, tenue; la perilla lleva el del modo actual: sol
   naranja a la izquierda en claro, luna azul a la derecha en oscuro. Es un
   <button role="switch" aria-checked>: el nombre accesible es fijo ("Modo
   oscuro") y el estado lo comunica aria-checked. */
.theme-toggle { width: 64px; height: 34px; padding: 0; border-radius: var(--radius-pill); flex: none; }
.switch-track {
  --knob: 28px;
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: inherit;
  background: #dde2ec;
  box-shadow: inset 0 2px 5px rgba(20, 30, 60, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  transition: background-color 0.3s var(--ease);
}
.sw-sun, .sw-moon {
  position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  color: #9aa3b8; transition: opacity 0.3s var(--ease);
}
.sw-sun { left: 10px; opacity: 0; }
.sw-moon { right: 10px; opacity: 1; }
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: var(--knob); height: var(--knob);
  border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, #ffb13b, #f57c00);
  box-shadow: 0 3px 7px rgba(245, 124, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: transform 0.32s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.k-sun, .k-moon {
  position: absolute; top: 50%; left: 50%; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  transition: opacity 0.25s var(--ease), transform 0.32s var(--ease);
}
.k-moon { opacity: 0; transform: rotate(-40deg) scale(0.6); }
.theme-toggle:hover .switch-knob { filter: brightness(1.06); }
.lang-btn:focus-visible, .theme-toggle:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; }

.nav-toggle {
  display: none; position: relative; flex: none;
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.6px; background: var(--heading);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle::before { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle::after { transform: translate(-50%, calc(-50% + 6px)); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1024px) {
  /* Desplegable anclado al cabezal (absolute + top:100%), NO fixed: el cabezal
     tiene backdrop-filter, que convierte a un hijo fixed en "relativo al cabezal"
     y no a la pantalla, y el menú salía de 47px de alto y transparente. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - var(--ticker-h) - var(--nav-h)); overflow-y: auto;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    background: var(--surface);
    padding: 18px 24px 28px;
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.is-open {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  .nav-links a { padding: 13px 14px; font-size: 1.02rem; }
  .nav-toggle { display: inline-flex; }
  /* Logo a la izquierda; idioma, tema y menú agrupados a la derecha. */
  .nav-actions { order: 2; margin-left: auto; gap: 6px; }
  .nav-toggle { order: 3; }
}
@media (max-width: 400px) {
  .navbar { gap: 10px; }
  .brand-logo { height: 46px; }
  .lang-btn { width: 32px; height: 32px; }
  .theme-toggle { width: 54px; height: 30px; }
  .switch-track { --knob: 24px; }
  .sw-sun, .sw-moon { width: 13px; height: 13px; margin-top: -6.5px; }
  .sw-sun { left: 8px; }
  .sw-moon { right: 8px; }
  .k-sun, .k-moon { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
  .lang-switch { gap: 2px; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
  padding-block: 88px 96px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  /* La foto va a opacidad completa; todo el oscurecimiento vive aquí, en un
     solo velo, para que sea predecible. Más fuerte a la izquierda (donde cae
     el texto) y se abre hacia la derecha para que se vea la escena. */
  background:
    linear-gradient(100deg, rgba(4, 10, 24, 0.88) 0%, rgba(4, 10, 24, 0.6) 34%, rgba(4, 10, 24, 0.32) 58%, rgba(4, 10, 24, 0.22) 100%),
    linear-gradient(180deg, rgba(6, 14, 31, 0.15) 0%, rgba(6, 14, 31, 0.4) 68%, var(--navy-950) 100%);
}
#particles {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 620px) 1fr;
  gap: 48px; align-items: end;
}
.hero-eyebrow {
  display: block;
  font-size: 0.95rem; font-weight: 500;
  color: var(--sky-300);
  margin-bottom: 18px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  max-width: 22ch;
}
.hero p.lede {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 1.09rem;
  color: rgba(255, 255, 255, 0.78);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Panel de TRM en el hero: un dato vivo, no decoración. Canto casi vivo y
   reglas horizontales — se lee como una cifra oficial, no como una tarjeta. */
.trm-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 18px 24px 20px;
  backdrop-filter: blur(6px);
  max-width: 420px;
  margin-left: auto;
}
.trm-label {
  font-size: 0.86rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.trm-value {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: #fff;
}
.trm-value .trm-currency { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.5); letter-spacing: 0; }
.trm-delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0;
}
/* Sin verde/rojo a propósito: para un importador una TRM al alza es mala
   noticia, así que el color implicaría un juicio equivocado. La flecha basta. */
.trm-delta { color: rgba(255, 255, 255, 0.62); }
.trm-meta { margin-top: 10px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.trm-note {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.52); line-height: 1.45;
}
.trm-panel a { text-decoration: underline; text-underline-offset: 3px; color: rgba(255,255,255,0.8); }
.trm-panel a:hover { color: #fff; }

/* Barra de carga: ocupa el sitio de la cifra para que el panel no salte */
.trm-skeleton {
  display: block; width: 190px; height: 0.72em; border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  animation: trm-pulse 1.4s ease-in-out infinite;
}
@keyframes trm-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .trm-skeleton { animation: none; } }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .trm-panel { margin-left: 0; }
}

/* ---------- Registro de regímenes (variante clara, fuera del hero) ---------- */
.regimes {
  margin-top: 56px; padding-top: 44px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 380px) 1fr;
  gap: 56px; align-items: start;
}
.regimes-intro h3 { font-size: 1.35rem; margin-bottom: 12px; }
.regimes-intro p { color: var(--ink-500); font-size: 0.97rem; margin-bottom: 20px; }
.regimes-intro .btn { width: max-content; }

@media (max-width: 860px) {
  .regimes { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; padding-top: 36px; }
}

.ledger {
  border-top: 1px solid var(--rule);
}
.ledger-row {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-row dt { color: var(--heading); font-weight: 600; font-size: 0.97rem; }
.ledger-row dd { color: var(--ink-500); font-size: 0.92rem; line-height: 1.5; }

@media (max-width: 620px) {
  .ledger-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- Section scaffolding ---------- */
.section { padding-block: 88px; }
.section-tight { padding-block: 64px; }
.section-alt { background: var(--surface-alt); }
.section-dark { background: var(--navy-950); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
.section-head p { margin-top: 14px; color: var(--ink-500); font-size: 1.03rem; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Encabezado de la home con ilustración a la izquierda. La imagen es un render
   sobre fondo blanco: multiply hace que el blanco desaparezca contra la página
   (que es blanca) y solo queden los vehículos y sus sombras. Sus bordes inferior,
   izquierdo y derecho conservan un gris tenue de la sombra del piso, así que se
   difuminan con una máscara para que no se note el rectángulo. Si esta sección
   pasa a un fondo que no sea blanco, multiply seguirá funcionando, pero revisa
   las sombras. */
.intro-split {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 44px;
}
.intro-split .section-head { margin-bottom: 0; }
.intro-art {
  width: 100%; height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 84%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 84%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 860px) {
  .intro-split { grid-template-columns: 1fr; gap: 28px; }
  /* En móvil el titular va primero: la imagen es apoyo, no lo que se busca. */
  .intro-art { order: 2; max-width: 520px; margin-inline: auto; }
}

.eyebrow {
  display: block;
  font-size: 0.92rem; font-weight: 500;
  color: var(--brand-ink);
  margin-bottom: 10px;
}
.section-dark .eyebrow { color: var(--sky-300); }

/* ---------- Tarjetas de credenciales ----------
   Suben sobre el hero con margen negativo: el solape cose las dos secciones y
   pone blanco contra el navy del final del hero. Ese gesto es el diseño; por eso
   las tarjetas por dentro son puro tipo, sin iconos ni adornos. */
.stat-cards {
  position: relative; z-index: 3;
  margin-top: -54px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  box-shadow: 0 20px 44px -24px rgba(6, 14, 31, 0.5);
}
/* Son credenciales, no titulares: apoyan al hero, no compiten con él. */
.stat-card .num {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 700; color: var(--heading);
  letter-spacing: -0.03em; line-height: 1.1;
}
.stat-card .label {
  margin-top: 8px; font-size: 0.88rem;
  color: var(--ink-500); line-height: 1.45;
}

@media (max-width: 900px) {
  /* Sin solape en móvil: el hero termina con el panel de TRM y las tarjetas
     se le montarían encima. */
  .stat-cards { grid-template-columns: repeat(2, 1fr); margin-top: 28px; gap: 14px; }
}
@media (max-width: 460px) {
  /* Una columna por legibilidad, pero más compactas: son cuatro y vienen
     justo después de un hero alto. */
  .stat-cards { grid-template-columns: 1fr; gap: 10px; }
  .stat-card { padding: 16px 18px; }
  .stat-card .label { margin-top: 5px; }
}

/* ---------- Selector de servicios ----------
   Reemplaza al bento de tarjetas de tamaños distintos. Seis filas idénticas
   (icono + nombre) a la izquierda y, a la derecha, una foto que cambia según la
   fila sobre la que estés (ratón o teclado). Cada fila es un enlace normal a su
   sección de /servicios/, así que sin JS sigue funcionando: solo se queda fija la
   primera foto. En móvil no hay foto: son tarjetas iguales con su descripción. */
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc-stage { display: none; }

.service-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-plate); color: var(--brand);
  margin-bottom: 20px; flex: none;
}
.service-icon svg { width: 24px; height: 24px; }
.service-icon img { width: 30px; height: 30px; object-fit: contain; }

.svc-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.svc-row .service-icon { margin-bottom: 0; transition: background-color 0.25s var(--ease); }
.svc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-text strong { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: var(--heading); transition: color 0.25s var(--ease); }
.svc-desc { color: var(--ink-500); font-size: 0.9rem; line-height: 1.45; }
.svc-row > svg { width: 18px; height: 18px; color: var(--ink-400); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.svc-row:hover, .svc-row.is-active { background: var(--surface-tint); border-color: transparent; }
.svc-row:hover .service-icon, .svc-row.is-active .service-icon { background: var(--icon-plate-hover, #fff); }
.svc-row:hover strong, .svc-row.is-active strong { color: var(--brand-ink); }
.svc-row:hover > svg, .svc-row.is-active > svg { color: var(--brand-ink); transform: translateX(4px); }
.svc-row:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; }

.tile-link {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 600; color: #fff;
}
.tile-link svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .svc-list { grid-template-columns: 1fr; gap: 10px; }
  .svc-row { padding: 16px 16px; gap: 14px; }
}

@media (min-width: 900px) {
  .svc-select { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: stretch; }
  /* Filas de altura idéntica que reparten todo el alto de la foto. */
  .svc-list { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 8px; }
  .svc-desc { display: none; }
  .svc-row { padding: 0 22px; }
  .svc-row .service-icon { width: 52px; height: 52px; }
  .svc-row .service-icon img { width: 32px; height: 32px; }
  .svc-text strong { font-size: 1.2rem; }

  .svc-stage {
    display: block; position: relative; min-height: 500px;
    border-radius: var(--radius-card); overflow: hidden;
    background: var(--navy-900);
  }
  .svc-panel {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .svc-panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .svc-panel > img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.05); transition: transform 0.9s var(--ease);
  }
  .svc-panel.is-active > img { transform: scale(1); }
  .svc-panel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4, 15, 41, 0) 35%, rgba(4, 15, 41, 0.9) 100%);
  }
  .svc-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 32px 36px; }
  .svc-caption h3 { color: #fff; font-size: 1.6rem; margin-bottom: 10px; }
  .svc-caption p { color: rgba(255, 255, 255, 0.86); font-size: 1rem; max-width: 46ch; }
}

/* ---------- Differentiators (why us) ---------- */
.why-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.why-item { display: flex; gap: 16px; }
.why-icon {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  background: var(--surface-tint); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center;
}
.why-icon svg { width: 22px; height: 22px; }
.why-item h3 { font-size: 1.04rem; margin-bottom: 6px; }
.why-item p { color: var(--ink-500); font-size: 0.93rem; }

@media (max-width: 720px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ---------- Split panel (image + text) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.split-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  aspect-ratio: 4 / 3.1;
}
/* <picture> es un bloque de altura automática: sin esto, el height:100% del
   <img> no resuelve y la foto no llena el contenedor con aspect-ratio. */
.split-media picture, .hero-bg picture { display: block; width: 100%; height: 100%; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 16px; }
.split-copy p { color: var(--ink-500); margin-bottom: 14px; }
.split-copy p + p { margin-top: -2px; }
.split.reverse { grid-template-columns: 1fr 1fr; }
.split.reverse .split-media { order: 2; }

@media (max-width: 900px) {
  .split, .split.reverse { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse .split-media { order: 0; }
}

/* ---------- Credential / callout banner ---------- */
.callout {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--brand) 150%);
  color: #fff;
  padding: 56px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
}
.callout h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 22ch; }
.callout p { margin-top: 12px; color: rgba(255,255,255,0.78); max-width: 48ch; }
.callout-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
.callout-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: rgba(255,255,255,0.7);
  margin-top: 18px;
}
.callout-badge svg { width: 16px; height: 16px; flex: none; }
.callout-badge a { text-decoration: underline; text-underline-offset: 3px; color: #fff; }

@media (max-width: 860px) {
  .callout { grid-template-columns: 1fr; padding: 36px 26px; }
}

/* ---------- Process / steps ---------- */
.process-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.process-item {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 24px; padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.process-item .idx {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.6rem; font-weight: 700; color: var(--line);
}
.process-item h3 { font-size: 1.08rem; margin-bottom: 6px; }
.process-item p { color: var(--ink-500); font-size: 0.94rem; max-width: 60ch; }

@media (max-width: 620px) {
  .process-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- News / resources card ---------- */
.resource-card {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 26px; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden;
}
.resource-card img { width: 100%; height: 100%; object-fit: cover; }
.resource-card .body { padding: 26px 26px 26px 0; display: flex; flex-direction: column; justify-content: center; }
.resource-card .meta { font-size: 0.8rem; color: var(--ink-400); margin-bottom: 8px; }
.resource-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.resource-card p { color: var(--ink-500); font-size: 0.93rem; }
.resource-card a.stretched::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 620px) {
  .resource-card { grid-template-columns: 1fr; }
  .resource-card .body { padding: 0 20px 20px; }
  .resource-card img { aspect-ratio: 16/9; }
}

/* ---------- Blog (índice, tarjetas, artículo) ---------- */
.blog-tarjetas { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.blog-tarjeta {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink-900); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.blog-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-tarjeta:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; }
.blog-tarjeta__foto { position: relative; display: block; }
.blog-tarjeta img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--surface-alt); }
.blog-tarjeta__categoria {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--brand-ink);
  box-shadow: var(--shadow-md);
}
.blog-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; flex: 1; }
.blog-tarjeta__fecha { font-size: 0.8rem; color: var(--ink-500); }
.blog-tarjeta__titulo { font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--heading); }
.blog-tarjeta__resumen { font-size: 0.93rem; color: var(--ink-500); }
.blog-tarjeta__leer { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--brand-ink); }
.blog-tarjeta__leer svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.blog-tarjeta:hover .blog-tarjeta__leer svg { transform: translateX(4px); }
.blog-vacio { color: var(--ink-500); }

.page-header .blog-meta { margin-top: 10px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); }
.blog-categoria-badge {
  display: inline-flex; align-items: center;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 6px 14px; margin-bottom: 14px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

.blog-cuerpo { max-width: 46rem; margin-inline: auto; font-size: 1.05rem; line-height: 1.7; color: var(--ink-700); }
.blog-portada { width: 100%; height: auto; border-radius: var(--radius-card); margin: 0 0 30px; display: block; border: 1px solid var(--line); background: var(--surface-alt); }
.blog-cuerpo h2 { margin: 2.2rem 0 0.7rem; line-height: 1.25; color: var(--heading); }
.blog-cuerpo h3 { margin: 1.8rem 0 0.5rem; line-height: 1.3; color: var(--heading); }
.blog-cuerpo p, .blog-cuerpo ul, .blog-cuerpo ol { margin: 0 0 1.1rem; }
/* El reset global (ul, ol { list-style: none; padding: 0 }, arriba del fichero) quita
   números y viñetas para que el resto del sitio construya sus propias listas (menú,
   footer...). El cuerpo del artículo es texto libre en Markdown, así que aquí se
   restauran: si no, un "1. ..." o "- ..." del editor no se ve en la página publicada
   aunque sí se vea en la previsualización del panel (esa usa panel.css, sin el reset). */
.blog-cuerpo ul { list-style: disc; padding-left: 1.3em; }
.blog-cuerpo ol { list-style: decimal; padding-left: 1.3em; }
.blog-cuerpo li { margin-bottom: 0.4rem; }
.blog-cuerpo li::marker { color: var(--ink-400); }
.blog-cuerpo a { color: var(--brand-ink); text-underline-offset: 0.15em; }
.blog-cuerpo .destacado {
  margin: 1.6rem 0; padding: 1rem 1.25rem;
  background: var(--surface-tint); border-left: 6px solid var(--brand-ink); border-radius: 10px;
}
.blog-cuerpo .destacado p:last-child { margin-bottom: 0; }
.blog-volver { margin-top: 8px; font-weight: 600; }
.blog-volver a { color: var(--brand-ink); }

.blog-otras { padding-top: 0; }
.blog-otras .section-head { margin-bottom: 32px; }

:root[data-theme="dark"] .blog-tarjeta img,
:root[data-theme="dark"] .blog-portada { filter: brightness(0.88); }

@media (max-width: 640px) {
  .blog-cuerpo { font-size: 1rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 64px 28px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
/* El pie usa la variante monocroma para fondo oscuro, así que va directo sobre
   el navy: ya no necesita la placa blanca que antes rescataba el azul del "Int". */
.footer-brand .brand-logo { height: 68px; }
.footer-brand p { margin-top: 16px; color: rgba(255,255,255,0.6); font-size: 0.92rem; max-width: 34ch; }
.footer-col h3 {
  color: #fff; font-size: 0.95rem;
  margin-bottom: 16px; font-weight: 600;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: 0.92rem; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-col address { font-style: normal; font-size: 0.92rem; line-height: 1.7; }

.footer-bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 0.84rem; color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Page header (interior pages) ---------- */
.page-header {
  background: var(--navy-950);
  color: #fff;
  padding-block: 56px 44px;
  position: relative;
  overflow: hidden;
}
.page-header-bg { position: absolute; inset: 0; z-index: 0; }
.page-header-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.page-header::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 90% 0%, rgba(2, 66, 164, 0.45), transparent 60%),
    linear-gradient(180deg, rgba(6, 14, 31, 0.5) 0%, rgba(6, 14, 31, 0.82) 70%, var(--navy-950) 100%);
}
.page-header .inner { position: relative; z-index: 1; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.breadcrumbs a:hover { color: #fff; }
.page-header h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 26ch; }
.page-header p { margin-top: 14px; color: rgba(255,255,255,0.72); max-width: 60ch; font-size: 1.02rem; }

/* ---------- Service detail sections ---------- */
.service-detail {
  padding-block: 56px;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 300px 1fr; gap: 44px;
}
.service-detail:last-child { border-bottom: none; }
.service-detail .head { position: sticky; top: calc(var(--ticker-h) + var(--nav-h) + 24px); align-self: start; }
.service-thumb {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
}
.service-thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-detail .head .service-icon { margin-bottom: 18px; }
.service-detail .head h2 { font-size: 1.4rem; }
.service-detail .body p { color: var(--ink-500); margin-bottom: 14px; max-width: 68ch; }
.service-detail .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.service-detail .tags span {
  font-size: 0.78rem; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--surface-tint); color: var(--brand-ink); font-weight: 600;
}

/* ---------- Mini process steps (within a service-detail body) ---------- */
.mini-steps {
  margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
}
.mini-step { display: flex; gap: 14px; align-items: flex-start; }
.mini-step-icon { width: 42px; height: 42px; flex: none; }
.mini-step h3 { font-size: 0.98rem; margin-bottom: 4px; }
.mini-step p { color: var(--ink-500); font-size: 0.88rem; margin: 0; }

@media (max-width: 560px) {
  .mini-steps { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .service-detail { grid-template-columns: 1fr; gap: 18px; }
  .service-detail .head { position: static; }
}

/* ---------- Topic grid (Servicios: profundidad en aduanas) ---------- */
.topic-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.topic-card {
  padding: 28px; border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--line);
}
.topic-icon { width: 44px; height: 44px; margin-bottom: 18px; display: block; }
.topic-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.topic-card p { color: var(--ink-500); font-size: 0.93rem; margin-bottom: 16px; }
.topic-card ul { display: grid; gap: 9px; }
.topic-card ul li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.88rem; color: var(--ink-700);
}
.topic-card ul li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); margin-top: 7px; flex: none;
}

@media (max-width: 900px) {
  .topic-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .topic-grid { grid-template-columns: 1fr; }
}

/* ---------- Inline CTA (lighter-weight than .callout) ---------- */
.cta-inline {
  margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 32px;
  border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--line);
}
.cta-inline h3 { font-size: 1.08rem; margin-bottom: 4px; }
.cta-inline p { color: var(--ink-500); font-size: 0.93rem; }

@media (max-width: 620px) {
  .cta-inline { flex-direction: column; align-items: flex-start; }
  .cta-inline .btn { width: 100%; justify-content: center; }
}

/* ---------- Values grid (Nosotros) ---------- */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.value-card {
  padding: 28px; border-radius: var(--radius-card);
  background: var(--surface-alt); border: 1px solid var(--line);
}
.value-card .service-icon { margin-bottom: 18px; }
.value-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.value-card p { color: var(--ink-500); font-size: 0.93rem; }

@media (max-width: 860px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
.contact-info-card {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 32px;
  background: var(--surface-alt);
}
.contact-row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.contact-row:first-child { border-top: none; padding-top: 0; }
.contact-row .service-icon { background: var(--icon-plate-hover, var(--surface)); margin-bottom: 0; }
.contact-row h3 { font-size: 0.95rem; margin-bottom: 4px; }
.contact-row p, .contact-row a { color: var(--ink-500); font-size: 0.93rem; }
.contact-row a:hover { color: var(--brand-ink); }

.map-frame {
  margin-top: 22px; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 16/11;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Cotización ---------- */
.quote-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px; align-items: start;
}
.quote-aside { display: grid; gap: 22px; }
.quote-photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line); }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; }
.quote-aside-title { font-size: 1.15rem; margin-bottom: 18px; }
.quote-steps { display: grid; gap: 18px; margin-bottom: 22px; }
.quote-steps li { display: flex; gap: 14px; align-items: flex-start; }
.quote-step-idx {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 0.9rem; font-weight: 700;
}
.quote-steps h3 { font-size: 0.98rem; margin-bottom: 3px; }
.quote-steps p { color: var(--ink-500); font-size: 0.9rem; margin: 0; }
@media (min-width: 901px) {
  .quote-aside { position: sticky; top: calc(var(--ticker-h) + var(--nav-h) + 24px); }
}
@media (max-width: 900px) {
  .quote-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--heading); }
.field .hint { font-size: 0.8rem; color: var(--ink-400); }
.form-grid > .hint { font-size: 0.8rem; color: var(--ink-400); margin: -6px 0 0; }
.field input, .field textarea, .field select {
  padding: 13px 15px; border-radius: var(--radius-input);
  border: 1.5px solid var(--line); background: var(--field-bg);
  font-size: 0.96rem; color: var(--ink-900);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(2, 66, 164, 0.14);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select:required:invalid { color: var(--ink-400); }
.field select option { color: var(--ink-900); background: var(--field-bg); }

.hp-field { position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px; }

.form-error, .form-success {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius-input);
  font-size: 0.92rem; margin-bottom: 20px;
}
.form-error[hidden], .form-success[hidden] { display: none; }
.form-error { background: #fdecec; color: var(--danger); border: 1px solid #f4c6c6; }
.form-success { background: #e9f7ef; color: var(--success); border: 1px solid #bfe8d1; }
.form-error svg, .form-success svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.privacy-note { font-size: 0.82rem; color: var(--ink-400); margin-top: 14px; }

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Entrada del hero ----------
   Único momento animado de la página. El resto del contenido aparece sin
   transición: cuando todo entra igual, nada llama la atención. */
.hero-inner > div { animation: hero-in 0.75s var(--ease) both; }
.hero-inner > div:nth-child(2) { animation-delay: 0.12s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* .reveal se conserva como gancho del IntersectionObserver en main.js,
   pero ya no anima: el contenido es visible desde el inicio. */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > div { animation: none; }
}

/* ---------- WhatsApp floating action ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #1fae5a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px -10px rgba(20, 122, 71, 0.55);
  transition: transform 0.2s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }


/* ---------- Modo oscuro ----------
   Se activa con data-theme="dark" en <html> (botón sol/luna del cabezal; la
   elección se guarda en localStorage). Casi todo el sitio ya está hecho de
   tokens, así que aquí se redefinen esos y se corrigen los pocos casos donde
   el color estaba escrito a mano: iconos planos (su azul marino se pierde sobre
   fondo oscuro, así que van sobre una placa clara), el logo (variante para
   fondos oscuros), la ilustración con fondo blanco y el mapa. Las secciones que
   ya eran oscuras (hero, topbar, pie, callout) no cambian. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0b1424;
  --surface-alt: #0f1b30;
  --surface-tint: #15254a;
  --ink-900: #e8eefb;
  --ink-700: #c6d0e6;
  --ink-500: #9dabc7;
  --ink-400: #8390ab;
  --line: #23334f;
  --line-soft: #1a2741;
  --rule: #2b3c5e;
  --heading: #f3f6ff;
  --brand-ink: #8cbcff;
  --header-bg: rgba(11, 20, 36, 0.88);
  --icon-plate: #dfe8fb;
  --icon-plate-hover: #dfe8fb;
  --field-bg: #0f1b30;
  --success: #4ade80;
  --danger: #ff8a80;
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -20px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: block; }
/* Interruptor en oscuro: riel más hondo, perilla azul con luna a la derecha. */
:root[data-theme="dark"] .switch-track {
  background: #0d1a33;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .sw-sun { opacity: 1; color: #55648a; }
:root[data-theme="dark"] .sw-moon { opacity: 0; }
:root[data-theme="dark"] .switch-knob {
  transform: translateX(calc(64px - var(--knob) - 6px));
  background: linear-gradient(145deg, #6c9bff, #3563e0);
  box-shadow: 0 3px 9px rgba(53, 99, 224, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
:root[data-theme="dark"] .k-sun { opacity: 0; transform: rotate(40deg) scale(0.6); }
:root[data-theme="dark"] .k-moon { opacity: 1; transform: none; }
@media (max-width: 400px) {
  :root[data-theme="dark"] .switch-knob { transform: translateX(calc(54px - var(--knob) - 6px)); }
}
:root[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }

/* Las tarjetas flotan sobre el hero: en oscuro se separan por borde, no por sombra. */
:root[data-theme="dark"] .stat-card { box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.7); }
:root[data-theme="dark"] .svc-row:hover,
:root[data-theme="dark"] .svc-row.is-active { border-color: var(--line); }

/* Iconos planos sin caja (aduanas, /servicios/): van sobre una placa clara. */
:root[data-theme="dark"] .topic-icon,
:root[data-theme="dark"] .mini-step-icon {
  background: var(--icon-plate); border-radius: 10px; padding: 6px; box-sizing: border-box;
}

/* La ilustración de la home es un render sobre fondo BLANCO: sobre azul oscuro,
   multiply la volvería negra. Se muestra sobre su propia placa clara. */
:root[data-theme="dark"] .intro-art {
  mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none;
  background: #fff; border-radius: 22px;
}

:root[data-theme="dark"] .form-error { background: #3a1a1e; border-color: #6b2a31; color: #ffb4ad; }
:root[data-theme="dark"] .form-success { background: #12301f; border-color: #1f5a37; color: #86efac; }

/* Mapa de Google: no tiene modo oscuro, se invierte manteniendo los tonos. */
:root[data-theme="dark"] .map-frame iframe { filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9); }

/* Fotos: un punto menos de brillo para que no deslumbren sobre fondo oscuro. */
:root[data-theme="dark"] .split-media img,
:root[data-theme="dark"] .service-thumb img,
:root[data-theme="dark"] .resource-card img { filter: brightness(0.88); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }