@charset "UTF-8";
/* ==========================================================================
   LTD CONSULTORÍA — Sistema de diseño "Estructura Abierta"
   Autor: Dirección creativa + Design System LTD
   Arquitectura: Tokens → Base → Layout → Componentes → Secciones → Utilidades
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Paleta primitiva: titanio + azul petróleo -------------------------
     Neutros con ligero sesgo frío (metal, no gris plano). El azul petróleo es
     uno de los tonos del titanio anodizado: único acento de la marca. */
  --ltd-white:        #FFFFFF;
  --ltd-ink:          #0B0D10; /* Grafito profundo — fondos oscuros */
  --ltd-graphite-900: #1A1E23;
  --ltd-graphite-800: #262B31;
  --ltd-graphite-700: #3A4047;
  --ltd-steel-600:    #545B63; /* Acero oscuro — texto secundario */
  --ltd-steel-500:    #737A82; /* Acero — bordes de controles */
  --ltd-steel-400:    #969CA3; /* Acero claro — texto secundario sobre oscuro */
  --ltd-silver-300:   #B8BDC2; /* Plata — estructura sobre oscuro */
  --ltd-steel-200:    #CDD1D5;
  --ltd-silver-200:   #D3D7DA;
  --ltd-steel-100:    #E4E6E9;
  --ltd-steel-50:     #F3F4F5; /* Titanio claro — superficies */
  --ltd-petrol-800:   #0B4A50;
  --ltd-petrol-700:   #0F5E66; /* Azul petróleo — acento sobre claro */
  --ltd-petrol-400:   #4FA3A8; /* Petróleo claro — acento sobre oscuro */
  --ltd-petrol-300:   #7CC0C3;
  --ltd-petrol-100:   #D3E9EA;
  --ltd-petrol-50:    #EEF6F6;

  /* --- Tokens semánticos: superficie clara -------------------------------- */
  --bg:               var(--ltd-white);
  --bg-muted:         var(--ltd-steel-50);
  --surface:          var(--ltd-white);
  --surface-muted:    var(--ltd-steel-50);
  --surface-brand:    var(--ltd-petrol-50);
  --border:           var(--ltd-steel-100);
  --border-strong:    var(--ltd-steel-200);
  --border-interactive: var(--ltd-steel-500); /* ≥3:1 — bordes de controles */
  --text:             #15181C;
  --text-secondary:   var(--ltd-steel-600);
  --text-inverse:     var(--ltd-white);
  --primary:          var(--ltd-petrol-700);
  --primary-hover:    var(--ltd-petrol-800);
  --accent:           var(--ltd-petrol-700);
  --focus:            var(--ltd-petrol-700);

  /* --- Estados ------------------------------------------------------------ */
  --success:          #0B7A55;
  --success-bg:       #E6F5EF;
  --warning:          #8A5A00;
  --warning-bg:       #FBF3E3;
  --error:            #B3261E;
  --error-bg:         #FCECEA;

  /* --- Tipografía --------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display:  clamp(2.25rem, 1.4rem + 2.7vw, 3.5rem);
  --fs-h1:       clamp(2.125rem, 1.45rem + 2.6vw, 3.5rem);
  --fs-h2:       clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --fs-h3:       clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-h4:       clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lead:     clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body:     1rem;
  --fs-small:    0.9375rem;
  --fs-caption:  0.8125rem;
  --fs-eyebrow:  0.75rem;

  --lh-tight:   1.04;
  --lh-heading: 1.14;
  --lh-body:    1.65;

  /* --- Espaciado ---------------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;     --space-9: 4rem;
  --space-10: 5rem;    --space-11: 6rem;    --space-12: 8rem;
  --section-y:  clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter:     clamp(1.25rem, 0.75rem + 2.4vw, 3rem);
  --container:  75rem;   /* 1200px */
  --container-wide: 87.5rem;

  /* --- Forma y profundidad ------------------------------------------------ */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 13, 16, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 13, 16, 0.06), 0 2px 6px rgba(11, 13, 16, 0.04);
  --shadow-md: 0 2px 4px rgba(11, 13, 16, 0.05), 0 12px 28px -12px rgba(11, 13, 16, 0.16);
  --shadow-lg: 0 4px 8px rgba(11, 13, 16, 0.05), 0 28px 60px -24px rgba(11, 13, 16, 0.22);

  /* --- Movimiento --------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  620ms;

  --header-h: 4.5rem;

  /* Placa de acero: degradado vertical corto, luz desde arriba */
  --ltd-steel-plate: linear-gradient(180deg, #C3C9CF 0%, #B8BFC6 55%, #ACB4BC 100%);
}

/* Superficies oscuras: se re-mapean los mismos tokens semánticos.
   Cualquier componente colocado dentro hereda el contraste correcto. */
.surface-dark {
  color-scheme: dark;
  --bg:               var(--ltd-ink);
  --bg-muted:         var(--ltd-graphite-900);
  --surface:          rgba(255, 255, 255, 0.035);
  --surface-muted:    rgba(255, 255, 255, 0.06);
  --surface-brand:    rgba(79, 163, 168, 0.12);
  --border:           rgba(184, 189, 194, 0.16);
  --border-strong:    rgba(184, 189, 194, 0.28);
  --border-interactive: #737A82;
  --text:             var(--ltd-white);
  --text-secondary:   #969CA3;
  --primary:          var(--ltd-petrol-400);
  --primary-hover:    var(--ltd-petrol-300);
  --accent:           var(--ltd-petrol-300);
  --focus:            var(--ltd-petrol-300);
  --shadow-md: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  background-color: var(--bg);
  color: var(--text);
}

/* Superficies acero (hero, Plataforma, Contacto): misma placa y tokens
   ajustados para que todo componente dentro mantenga el contraste. Valores
   verificados contra el tono más oscuro del degradado (#ACB4BC). */
.surface-steel {
  --bg:               #B8BFC6;
  --bg-muted:         #C3C9CF;
  --surface:          rgba(255, 255, 255, 0.42);
  --surface-muted:    rgba(255, 255, 255, 0.55);
  --surface-brand:    rgba(15, 94, 102, 0.10);
  --border:           rgba(21, 24, 28, 0.12);
  --border-strong:    rgba(21, 24, 28, 0.22);
  --border-interactive: #4A5159;
  --text:             #15181C;
  --text-secondary:   var(--ltd-graphite-700);
  --primary:          var(--ltd-petrol-800);
  --primary-hover:    #083A3F;
  --accent:           var(--ltd-petrol-800);
  --focus:            var(--ltd-petrol-800);
  background-color: #B8BFC6;
  background-image: var(--ltd-steel-plate);
  color: var(--text);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo [hidden] debe imponerse sobre los display de componente
   (.field usa display:grid y anularía el display:none del user-agent). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Margen al llegar a una sección con scrollIntoView (también dentro de marcos) */
main section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
/* El foco programático al llegar a una sección no dibuja contorno; los controles conservan el suyo */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.012em; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Justificado: opcional (.text-justify) y solo para prosa institucional larga.
   Decisión basada en medición del espacio entre palabras (normal ≈ 0.27em):
   · Se justifica: descripción de cada etapa del proceso, texto de «Nosotros»
     y la explicación «¿Por qué LTD se comunica conmigo?». Párrafos de 3 a 7
     líneas con 55–95 caracteres por línea; espacio máximo ≲ 0.6em.
   · No se justifica: introducciones de sección y leads (texto grande con
     líneas cortas: huecos de hasta 1.65em), respuestas del FAQ (párrafos de
     2–3 líneas: hasta 0.71em), listas, tarjetas angostas, avisos, formularios.
   · Solo desde 80rem (1280px): a 1152px las mismas columnas abrían huecos de
     0.69em, a 1024px de 0.75em y en celular de hasta 2.75em. */
p { text-align: left; }
@media (min-width: 80rem) {
  .text-justify {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
  }
}

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--primary-hover); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.15rem; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; color: var(--text); -webkit-hyphens: manual; hyphens: manual; } /* términos clave y de marca nunca se parten */
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

::selection { background: var(--ltd-petrol-700); color: #fff; }

/* Foco visible, consistente y siempre legible */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--ltd-petrol-700);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

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

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 46rem; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 3.5vw, 5rem); }
.section--muted { background-color: var(--ltd-steel-50); }
.section--hairline { border-top: 1px solid var(--border); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid { gap: var(--space-6); }
}

/* Encabezado de sección: retícula editorial */
.section-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
@media (min-width: 64rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-9);
    align-items: end;
  }
}
.section-head p { color: var(--text-secondary); font-size: var(--fs-lead); max-width: 54ch; }
.section-head h2 { margin-bottom: 0; max-width: 20ch; }

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --- 4.1 Eyebrow / etiqueta de dato -------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 1.5rem; height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--accent { color: var(--accent); }

/* --- 4.2 Botones ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  --btn-bd: var(--primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;                 /* objetivo táctil ≥ 44px */
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* Las etiquetas largas pueden partir línea: un botón nunca debe forzar
     desbordamiento horizontal en pantallas angostas. */
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--primary-hover); --btn-bd: var(--primary-hover); color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.surface-dark .btn:not(.btn--inverse):not(.btn--secondary):not(.btn--ghost) { --btn-fg: var(--ltd-ink); }
/* La tarjeta del formulario re-mapea a claro: su botón vuelve a texto blanco */
.surface-dark .lead-card .btn:not(.btn--inverse):not(.btn--secondary):not(.btn--ghost) { --btn-fg: #fff; }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-interactive); }
.btn--secondary:hover { --btn-bg: var(--surface-muted); --btn-fg: var(--text); --btn-bd: var(--text); }

.btn--inverse { --btn-bg: #fff; --btn-fg: var(--ltd-ink); --btn-bd: #fff; }
.btn--inverse:hover { --btn-bg: var(--ltd-silver-200); --btn-fg: var(--ltd-ink); --btn-bd: var(--ltd-silver-200); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: transparent; padding-inline: 0.75rem; }
.btn--ghost:hover { --btn-bg: var(--surface-muted); box-shadow: none; }

.btn--lg { min-height: 3.375rem; padding: 0.9375rem 1.875rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn__icon { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* Enlace con flecha (CTA terciario) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--primary);
  min-height: 2.75rem;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(4px); }
/* --- 4.3 Tarjetas --------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card h3, .card h4 { margin-bottom: 0; }
.card p { color: var(--text-secondary); font-size: var(--fs-small); }
.card--raised { box-shadow: var(--shadow-sm); }
.card--compact h3 { font-size: var(--fs-h4); }
.card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  color: var(--primary);
}

/* Icono geométrico de tarjeta */
.card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--primary);
  margin-bottom: var(--space-2);
  flex: none;
}
.surface-dark .card__icon { background: rgba(255,255,255,0.04); color: var(--ltd-silver-300); }

/* --- 4.4 Tarjeta de ruta (segmentación por audiencia) --------------------- */
.route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.route:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.route:has(a:focus-visible) { border-color: var(--primary); box-shadow: var(--shadow-md); }
.route h3 { font-size: 1.25rem; margin: 0; }
@media (min-width: 56rem) {
  /* Alinea el cuerpo de las tres tarjetas aunque un título ocupe una línea menos */
  .route h3 { min-height: 2.28em; }
}
.route p { color: var(--text-secondary); font-size: var(--fs-small); margin: 0; flex: 1; }
.route__link { text-decoration: none; }
/* Área de clic completa manteniendo un enlace real y accesible */
.route__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.route__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- 4.5 Píldora / chip --------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface);
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.pill--soon { color: var(--text-secondary); border-color: var(--border-strong); background: var(--surface-muted); }
.surface-dark .pill--soon { color: var(--ltd-silver-300); background: rgba(184, 189, 194, 0.08); border-color: rgba(184, 189, 194, 0.28); }

/* --- 4.6 Placeholder editorial (dato aún no disponible) ------------------- */
.ph {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px dashed var(--border-interactive);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.45em;
  /* Nunca debe forzar desbordamiento horizontal: los placeholders que deben
     leerse en una sola línea usan espacios duros en el marcado. */
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.surface-dark .ph { border-color: rgba(184, 189, 194, 0.35); }

/* ==========================================================================
   5. HEADER Y NAVEGACIÓN
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Sobre el hero de acero claro: vidrio acero; al avanzar, blanco (is-stuck) */
  background: rgba(195, 201, 207, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--ltd-steel-100);
  box-shadow: 0 1px 0 rgba(11, 13, 16, 0.04);
}
.header__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; text-decoration: none; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
/* Monograma vectorial: alto fijo en em y ancho automático, así escala con el
   tipo sin romper la caja. El canal por donde pasa el trazo está recortado de
   las letras con una máscara, no pintado del color del fondo: funciona igual
   sobre blanco, sobre la placa de acero y sobre grafito. */
.brand__word {
  display: block; height: 1.75rem; width: auto; flex: none;
  fill: var(--ltd-ink); transition: fill var(--dur) var(--ease);
}
.surface-dark .brand__word { fill: #fff; }
.surface-dark .brand__word .mark-trace { stroke: var(--ltd-petrol-400); }
.surface-dark .brand__word .mark-node { fill: var(--ltd-petrol-400); }
.brand__word .mark-trace { stroke: var(--ltd-petrol-400); }
.brand__word .mark-node { fill: var(--ltd-petrol-400); }
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ltd-silver-300);
  margin-top: 3px;
  transition: color var(--dur) var(--ease);
}
.header .brand__word, .footer .brand__word { fill: var(--ltd-ink); }
.header .brand__word .mark-trace, .footer .brand__word .mark-trace { stroke: var(--ltd-petrol-700); }
.header .brand__word .mark-node, .footer .brand__word .mark-node { fill: var(--ltd-petrol-700); }
.header .brand__tag { color: var(--ltd-graphite-700); }

.nav { margin-left: auto; display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ltd-graphite-700);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ltd-ink); background: rgba(21, 24, 28, 0.06); }
.nav__link[aria-current="true"] { color: var(--ltd-ink); background: rgba(21, 24, 28, 0.08); }
.header.is-stuck .nav__link { color: var(--ltd-steel-600); }
.header.is-stuck .nav__link:hover,
.header.is-stuck .nav__link[aria-current="true"] { color: var(--ltd-ink); background: var(--ltd-steel-50); }

.header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.nav + .header__actions { margin-left: 0; }   /* el gap del header ya separa: mismo hueco a ambos lados del menú */
.header .btn--header { --btn-bg: var(--ltd-petrol-700); --btn-fg: #fff; --btn-bd: var(--ltd-petrol-700); min-height: 2.625rem; padding: 0.5rem 1.125rem; display: none; white-space: nowrap; flex: none; }
.header .btn--header:hover { --btn-bg: var(--ltd-petrol-800); --btn-bd: var(--ltd-petrol-800); }
.header.is-stuck .btn--header { --btn-bg: var(--ltd-petrol-700); --btn-fg: #fff; --btn-bd: var(--ltd-petrol-700); }
.header.is-stuck .btn--header:hover { --btn-bg: var(--ltd-petrol-800); --btn-bd: var(--ltd-petrol-800); }

/* Botón hamburguesa */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid #4A5159;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ltd-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header.is-stuck .nav-toggle { color: var(--ltd-ink); border-color: var(--ltd-steel-200); }
.nav-toggle:hover { background: rgba(21, 24, 28, 0.06); }
.header.is-stuck .nav-toggle:hover { background: var(--ltd-steel-50); }
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; height: 1.5px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panel móvil */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--ltd-ink);
  color: #fff;
  padding: var(--space-6) 0 var(--space-9);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid rgba(184, 189, 194, 0.14); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.125rem 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.mobile-nav__link span:last-child { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ltd-silver-300); letter-spacing: 0.1em; }
.mobile-nav__actions { display: grid; gap: var(--space-3); }
.mobile-nav__meta { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(184, 189, 194, 0.14); font-size: var(--fs-caption); color: #969CA3; }

/* Menú completo solo cuando caben sus seis enlaces y el botón en una línea
   (medido: ~1 170 px). Por debajo, menú desplegable. */
@media (min-width: 75rem) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .header .btn--header { display: inline-flex; }
  .mobile-nav { display: none; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1.25rem + 3.5vw, 4rem));
  padding-bottom: clamp(3rem, 1.75rem + 4.5vw, 5.25rem);
  overflow: hidden;
  isolation: isolate;
}
/* Fondo: placa de acero claro. Degradado vertical corto (luz desde arriba),
   retícula grafito muy tenue y un reflejo metálico; sin negro. */
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: #B8BFC6;
  background-image: var(--ltd-steel-plate);
}
.hero__grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(21, 24, 28, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 24, 28, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 70% 15%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 15%, #000 20%, transparent 78%);
}
.hero__halo {
  position: absolute;
  top: -30%; right: -10%;
  width: min(60rem, 90vw); aspect-ratio: 1;
  /* Reflejo metálico: brillo blanco con un matiz petróleo muy contenido */
  background:
    radial-gradient(circle at 42% 45%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.10) 36%, transparent 62%),
    radial-gradient(circle at 62% 60%, rgba(15, 94, 102, 0.08) 0%, transparent 50%);
}
.hero__inner {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 68rem) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-9); }
}
/* Pantallas de poca altura (laptops de 13"): el CTA principal no debe caer
   por debajo del pliegue. */
@media (min-width: 68rem) and (max-height: 50rem) {
  .hero { padding-top: calc(var(--header-h) + var(--space-6)); padding-bottom: var(--space-8); }
  .hero__lead { margin-bottom: var(--space-5); }
}
.hero__eyebrow { color: var(--ltd-graphite-700); }
.hero h1 { font-size: var(--fs-display); max-width: 18ch; }
.hero h1 em {
  font-style: normal;
  color: var(--ltd-petrol-800);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: #2C3136;
  max-width: 54ch;
  margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero__actions .btn { flex: 1 1 auto; min-width: min(15rem, 100%); }
@media (min-width: 30rem) { .hero__actions .btn { flex: 0 0 auto; min-width: 0; } }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(21, 24, 28, 0.14);
  list-style: none; margin: 0; padding-left: 0;
}
.hero__facts li {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ltd-graphite-700);
  margin: 0;
}
.hero__facts svg { color: var(--ltd-petrol-800); flex: none; }
/* Botón secundario sobre acero: borde ≥ 3:1 en todo el degradado */
.hero .btn--secondary { --btn-bd: #4A5159; }
.hero .btn--secondary:hover { --btn-bg: rgba(255, 255, 255, 0.45); --btn-bd: var(--ltd-ink); }

/* --- Panel visual del hero: "consola de portafolio" ---------------------- */
.console {
  position: relative;
  border: 1px solid var(--ltd-graphite-700);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #2A2F35, #14171B);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.35) inset, 0 40px 80px -40px rgba(11, 13, 16, 0.6);
  overflow: hidden;
}
.console__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid rgba(184, 189, 194, 0.16);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #969CA3;
}
.console__status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ltd-petrol-400); }
.console__status i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 163, 168, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(79, 163, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 163, 168, 0); }
}
.console__body { padding: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem); display: grid; gap: var(--space-5); }
.console__row { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.console__stat {
  border: 1px solid rgba(184, 189, 194, 0.14);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}
.console__stat dt {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #969CA3; margin-bottom: 0.375rem;
}
.console__stat dd {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.125rem); color: #fff; letter-spacing: -0.01em;
}
.console__stat dd small { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400; color: var(--ltd-silver-300); display: block; letter-spacing: 0.06em; }

/* Diagrama de flujo del portafolio (SVG animado, sutil) */
.console__flow { border: 1px solid rgba(184, 189, 194, 0.14); border-radius: var(--radius); background: rgba(255,255,255,0.02); padding: var(--space-4); }
.console__flow-title {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #969CA3; margin-bottom: 0.75rem;
}
.console__flow svg { display: block; width: 100%; height: auto; }
/* Cada línea se dibuja una sola vez al aparecer: los canales «llegan» al centro.
   pathLength="1" permite animar cualquier trazo con dasharray 1. */
.flow-line {
  fill: none;
  stroke: var(--ltd-silver-300);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.flow-line--out { stroke: var(--ltd-petrol-400); }
.is-revealed .flow-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 250ms);
}
.no-js .flow-line { stroke-dashoffset: 0; }

/* ==========================================================================
   7. BANDA DE RUTAS (segmentación por audiencia)
   ========================================================================== */
.routes { margin-top: calc(var(--section-y) * -0.5); position: relative; z-index: 2; }
.routes__grid { display: grid; gap: var(--space-4); }
@media (min-width: 56rem) { .routes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   8. PILARES / DIFERENCIACIÓN
   ========================================================================== */
.pillar { display: flex; flex-direction: column; gap: var(--space-3); }
.pillar__num {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.14em;
  color: var(--primary); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border);
}
.pillar h3 { font-size: 1.25rem; margin: var(--space-2) 0 0; }
.pillar p { color: var(--text-secondary); font-size: var(--fs-small); margin: 0; }

/* Cita / declaración editorial */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.026em;
  max-width: 22ch;
  margin: 0;
}
.statement span { color: var(--text-secondary); }

/* ==========================================================================
   9. CICLO DE GESTIÓN (stepper accesible)
   ========================================================================== */
.cycle { display: grid; gap: var(--space-6); }
@media (min-width: 64rem) { .cycle { grid-template-columns: minmax(0, 1fr); } }

/* Móvil y tableta: tira horizontal con scroll-snap. Seis pestañas apiladas
   obligarían a recorrer una pantalla completa antes de llegar al contenido. */
.cycle__tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: 0;
}
.cycle__tab { flex: 0 0 10.5rem; scroll-snap-align: start; }
.cycle__tabs::-webkit-scrollbar { height: 4px; }
.cycle__tabs::-webkit-scrollbar-track { background: var(--border); border-radius: 2px; }
.cycle__tabs::-webkit-scrollbar-thumb { background: var(--border-interactive); border-radius: 2px; }
.cycle__tabs { scrollbar-width: thin; scrollbar-color: var(--border-interactive) var(--border); }

@media (min-width: 64rem) {
  .cycle__tabs {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0; overflow: visible; padding-bottom: 0;
  }
  .cycle__tab { flex: initial; }
}

.cycle__tab {
  position: relative;
  display: flex; flex-direction: column; gap: 0.375rem;
  width: 100%;
  min-height: 3.75rem;
  padding: var(--space-4) var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 64rem) {
  .cycle__tabs { border-top: 1px solid var(--border); }
  .cycle__tab { border: 0; border-radius: 0; padding-inline: var(--space-4); border-left: 1px solid var(--border); }
  .cycle__tab:last-child { border-right: 1px solid var(--border); }
  .cycle__tab::before {
    content: ""; position: absolute; inset: -1px 0 auto 0; height: 2px;
    background: var(--primary); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .cycle__tab[aria-selected="true"]::before { transform: scaleX(1); }
}
.cycle__tab:hover { color: var(--text); background: var(--surface-muted); }
.cycle__tab[aria-selected="true"] { color: var(--text); background: var(--surface-brand); border-color: var(--primary); }
@media (min-width: 64rem) {
  .cycle__tab[aria-selected="true"] { background: transparent; border-color: var(--border); }
}
.cycle__tab-num { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; color: var(--primary); }
.cycle__tab-label { font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; }

.cycle__panel { display: none; }
.cycle__panel.is-active { display: block; animation: fade-up var(--dur-slow) var(--ease-out) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cycle__panel-inner {
  display: grid; gap: var(--space-6);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
@media (min-width: 64rem) {
  .cycle__panel-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-9); align-items: start; }
}
.cycle__panel h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.cycle__panel p { color: var(--text-secondary); }
.cycle__list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.cycle__list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  font-size: var(--fs-small); color: var(--text-secondary); margin: 0;
}
.cycle__list svg { color: var(--primary); margin-top: 0.3em; flex: none; }

.cycle__aside {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  padding: var(--space-5);
}
.cycle__aside dt {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.25rem;
}
.cycle__aside dd { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--text); }
.cycle__aside dd:last-child { margin-bottom: 0; }

/* ==========================================================================
   10. INSTITUCIONES / SPLIT EDITORIAL
   ========================================================================== */
.split { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}
.checklist { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-4); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); margin: 0; }
.checklist svg { color: var(--accent); margin-top: 0.25em; flex: none; }
.checklist strong { display: block; margin-bottom: 0.125rem; }
.checklist span { color: var(--text-secondary); font-size: var(--fs-small); }

/* ==========================================================================
   11. TECNOLOGÍA — mapa de capas
   ========================================================================== */
.layers { display: grid; gap: var(--space-3); }
.layer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.layer:hover { border-color: var(--border-strong); transform: translateX(3px); }
.layer__id {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em;
  color: var(--accent); padding-top: 0.15em;
}
.layer h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; }
.layer p { font-size: var(--fs-small); color: var(--text-secondary); margin: 0; }

/* Canales: tarjetas que llenan la fila completa en cualquier ancho */
.canales { list-style: none; margin: 0 0 var(--space-7); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.canal {
  flex: 1 1 10.5rem;
  display: grid; gap: 0.375rem; align-content: start;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.canal__id {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.canal__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.012em; color: var(--text); }
.canal__use { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary); }

/* Aplicaciones de un centro: etiquetas informativas, no controles */
.usecases__title {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
  margin: var(--space-6) 0 var(--space-3);
}
.usecases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.usecases li {
  margin: 0;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-muted);
  font-size: var(--fs-small); color: var(--text);
}
.usecases li.is-origin { border-left-color: var(--primary); background: var(--surface-brand); }
.usecases small {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary);
}

/* ==========================================================================
   12. ATENCIÓN A PERSONAS — cascada
   Tramos uniformes de arriba a abajo. Todos comparten la misma retícula que
   el formulario de contacto (encabezado fijo a la izquierda, contenido a la
   derecha), el mismo padding y el mismo separador; dentro de cada tramo las
   celdas son del mismo tamaño.
   ========================================================================== */
.cascade {
  --cascade-pad-x: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --cascade-pad-y: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --cascade-gap: clamp(0.75rem, 0.5rem + 0.8vw, 1rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cascade__row {
  display: grid;
  gap: var(--space-5);
  padding: var(--cascade-pad-y) var(--cascade-pad-x);
  border-top: 1px solid var(--border);
}
.cascade__row:first-child { border-top: 0; }
@media (min-width: 64rem) {
  .cascade__row { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-8); }
}
.cascade__head { display: grid; gap: 0.375rem; align-content: start; }
.cascade__label {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary);
}
.cascade__title { margin: 0; font-size: var(--fs-h4); }
.cascade__hint { margin: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary); }
.cascade__body { min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--cascade-gap); align-content: start; }
.cascade__prose { margin: 0; color: var(--text-secondary); max-width: 68ch; }
.cascade__lede { margin: 0; font-weight: 600; color: var(--text); }
.cascade__note { margin: 0; font-size: var(--fs-caption); line-height: 1.55; color: var(--text-secondary); }

/* Celdas del mismo tamaño: 1 → 2 → 3/4 columnas */
.cascade__grid { display: grid; gap: var(--cascade-gap); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .cascade__grid--2, .cascade__grid--3, .cascade__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .cascade__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cascade__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cascade__cell {
  display: grid; gap: 0.375rem; align-content: start;
  margin: 0; min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
.cascade__cell--inline {
  grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--fs-small); font-weight: 500; color: var(--text);
}
.cascade__cell--inline svg { color: var(--primary); flex: none; }
/* Pasos: número en su propia columna, título y texto alineados a la derecha */
.cascade__steps > .cascade__cell { grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-3); }
.cascade__steps > .cascade__cell > .cascade__num { grid-row: span 2; padding-top: 0.2em; }
.cascade__num {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary);
}
.cascade__cell-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.cascade__cell-text { font-size: var(--fs-caption); line-height: 1.55; color: var(--text-secondary); }
.cascade__value { margin: 0; min-width: 0; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--text); }

/* Tramo de seguridad: mismo formato, rojo semántico (distinto del acento de marca) */
.cascade__row--alert { background: var(--error-bg); }
.cascade__row--alert .cascade__label { color: var(--error); }
.cascade__row--alert .cascade__cell { background: var(--surface); border-color: color-mix(in srgb, var(--error) 20%, transparent); }
.cascade__row--alert .cascade__cell--inline svg { color: var(--error); }

.cascade__action {
  display: grid; gap: var(--space-4); align-items: center;
  margin-top: var(--space-2);
}
@media (min-width: 40rem) { .cascade__action { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); } }

/* Avisos (sección Plataforma) */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface-muted);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.notice svg { color: var(--primary); margin-top: 0.15em; flex: none; }
.notice strong { display: block; color: var(--text); margin-bottom: 0.25rem; font-size: var(--fs-body); }

/* ==========================================================================
   13. PREGUNTAS FRECUENTES — columna lateral fija + preguntas a todo lo ancho
   ========================================================================== */
.faq-layout { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 64rem) {
  .faq-layout { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--space-9); align-items: start; }
  .faq-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.faq-aside { display: grid; gap: var(--space-5); align-content: start; }
.faq-aside h2 { margin: 0; }
@media (min-width: 64rem) { .faq-aside h2 { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.125rem); } }
.faq-aside .eyebrow { margin: 0; }
.faq-aside__intro { margin: 0; color: var(--text-secondary); }

.faq-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.faq-filter {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-filter:hover { color: var(--text); border-color: var(--text); }
.faq-filter[aria-pressed="true"] { background: var(--ltd-ink); border-color: var(--ltd-ink); color: #fff; }
.faq-filter__count {
  min-width: 1.75rem; padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-family: var(--font-mono); font-size: 0.6875rem; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.faq-filter[aria-pressed="true"] .faq-filter__count { background: rgba(255, 255, 255, 0.16); color: #fff; }
@media (min-width: 64rem) {
  .faq-filters { display: grid; gap: var(--space-2); }
  .faq-filter { width: 100%; border-radius: var(--radius); padding-inline: 1.125rem; }
}

.faq-help {
  display: grid; gap: var(--space-2); justify-items: start;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.faq-help__title { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text); }
.faq-help__text { margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--text-secondary); }

.faq-main { min-width: 0; }
.faq-main .accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding-inline: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
}
.faq-empty { margin: var(--space-5) 0 0; font-size: var(--fs-small); color: var(--text-secondary); }

.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item.is-last { border-bottom: 0; }   /* última pregunta visible (JS), aun filtrando */
.accordion__item[hidden] { display: none; }
.accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  width: 100%;
  padding: var(--space-5) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.accordion__trigger:hover { color: var(--primary); }
.accordion__icon {
  flex: none; width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--border-interactive); border-radius: 50%;
  display: grid; place-items: center;
  position: relative; margin-top: 0.15rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.accordion__icon::before { width: 9px; height: 1.5px; }
.accordion__icon::after { width: 1.5px; height: 9px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--ltd-ink); border-color: var(--ltd-ink); color: #fff; transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { opacity: 0; }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__content { padding: 0 3rem var(--space-5) 0; max-width: 72ch; color: var(--text-secondary); font-size: var(--fs-small); }
.accordion__content p { margin-bottom: var(--space-3); }

/* ==========================================================================
   14. FORMULARIO
   ========================================================================== */
.form { display: grid; gap: var(--space-5); }
.form__grid { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.4375rem; align-content: start; }
.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.field__label .req { color: var(--error); margin-left: 0.15em; }
.field__optional { font-weight: 400; color: var(--text-secondary); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);   /* ≥16px evita el zoom automático en iOS */
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%2351607A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.field input::placeholder, .field textarea::placeholder { color: #858B92; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-secondary); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field__error {
  display: none;
  align-items: center; gap: 0.375rem;
  font-size: var(--fs-caption);
  color: var(--error);
  font-weight: 500;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 20%, transparent); }
.field.has-error .field__error { display: flex; }
.field__help { font-size: var(--fs-caption); color: var(--text-secondary); }

.checkbox { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.checkbox input {
  appearance: none; -webkit-appearance: none;
  width: 1.5rem; height: 1.5rem; margin: 0 0 0;
  border: 1.5px solid var(--border-interactive); border-radius: 4px;
  background: var(--surface); cursor: pointer; flex: none;
  transition: all var(--dur) var(--ease);
}
.checkbox input:checked {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.checkbox label { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.55; cursor: pointer; }
.checkbox.has-error input { border-color: var(--error); }

/* Estados del formulario */
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__status {
  display: none;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  border: 1px solid transparent;
}
.form__status.is-visible { display: grid; grid-template-columns: auto 1fr; }
.form__status svg { margin-top: 0.15em; flex: none; }
.form__status strong { display: block; margin-bottom: 0.15rem; }
.form__status[data-state="info"] { background: var(--surface-brand); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--text); }
.form__status[data-state="info"] svg { color: var(--primary); }
.form__status[data-state="success"] { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: #06432F; }
.form__status[data-state="success"] svg { color: var(--success); }
.form__status[data-state="error"] { background: var(--error-bg); border-color: color-mix(in srgb, var(--error) 35%, transparent); color: #6B1710; }
.form__status[data-state="error"] svg { color: var(--error); }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0.6; }
.spinner {
  width: 1rem; height: 1rem; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   15. CONTACTO — formulario de ancho completo en retícula de bloques
   Cada bloque usa la misma retícula: encabezado (número, título, ayuda) en una
   columna fija y campos en la columna flexible. Bordes izquierdos, paddings y
   separadores coinciden entre todos los bloques.
   ========================================================================== */
.lead-card {
  --form-pad-x: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --form-pad-y: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --form-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.surface-dark .lead-card,
.surface-steel .lead-card {
  --bg: #fff; --surface: #fff; --surface-muted: var(--ltd-steel-50); --surface-brand: var(--ltd-petrol-50);
  --text: #15181C; --text-secondary: var(--ltd-steel-600);
  --border: var(--ltd-steel-100); --border-strong: var(--ltd-steel-200); --border-interactive: var(--ltd-steel-500);
  --primary: var(--ltd-petrol-700); --primary-hover: var(--ltd-petrol-800); --focus: var(--ltd-petrol-700);
  --accent: var(--ltd-petrol-700);
  color: var(--text);
  color-scheme: light;
}

.lead-form { counter-reset: bloque; }

.form-block {
  display: grid;
  gap: var(--form-gap);
  padding: var(--form-pad-y) var(--form-pad-x);
  border-top: 1px solid var(--border);
  counter-increment: bloque;   /* un bloque oculto no cuenta: la numeración nunca salta */
}
.form-block:first-child { border-top: 0; }
@media (min-width: 64rem) {
  .form-block { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-8); }
}

.form-block__head { display: grid; gap: 0.375rem; align-content: start; }
.form-block__num::before {
  content: counter(bloque, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.14em; color: var(--primary);
}
.form-block__title { font-size: var(--fs-h4); margin: 0; }
.form-block__hint { margin: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary); }
.form-block__body { min-width: 0; }

/* Campos en pares simétricos; .field--full ocupa la fila completa */
.fields { display: grid; gap: var(--form-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 40rem) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
.fields--message { align-items: stretch; }
@media (min-width: 40rem) {
  @supports (grid-template-rows: subgrid) {
    .fields--message { grid-template-rows: auto minmax(15rem, 1fr) auto auto; row-gap: 0; }
    .fields--message > .field--message { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .fields--message > .field--message > :first-child { margin-bottom: 0.4375rem; }
    .fields--message .field__meta { margin-top: 0.5rem; }
  }
}

/* Mensaje y vista previa con la misma altura */
.field--message { grid-template-rows: auto minmax(0, 1fr) auto; }
.field--message textarea { height: 100%; min-height: 15rem; }
.field__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); min-height: 1.25rem; }
.field__meta .field__help, .field__meta .field__count { font-size: 0.75rem; line-height: 1.5; }
.field__meta .field__help { margin: 0; }
.field__count {
  margin: 0; flex: none;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right;
}
.field__count.is-near { color: var(--warning); }

.wa-preview {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-height: 15rem; height: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow: hidden;
}
.wa-preview__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-caption);
}
.wa-preview__to { font-weight: 600; color: var(--text); }
.wa-preview__num { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wa-preview__body { padding: var(--space-4); overflow: auto; max-height: 26rem; }
.wa-preview__bubble {
  padding: 0.75rem 0.875rem 0.5rem;
  border-radius: 10px 2px 10px 10px;
  background: var(--surface-brand);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  font-size: 0.875rem; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  text-align: left; -webkit-hyphens: manual; hyphens: manual;
}
.wa-preview__bubble strong { font-weight: 600; }
.wa-preview__bubble .is-empty { color: var(--text-secondary); }
.wa-preview__time {
  display: block; margin-top: 0.375rem; text-align: right;
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-secondary);
}

/* Aviso de privacidad simplificado en el punto de captura (Ley, art. 16, II) */
.privacy-brief { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); background: var(--surface-muted); }
.privacy-brief p { margin: 0; font-size: var(--fs-caption); line-height: 1.55; color: var(--text-secondary); text-align: left; hyphens: manual; }
.privacy-brief strong { color: var(--text); }

/* Envío */
.form-submit { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 40rem) { .form-submit { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); } }
.form-submit__note { margin: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary); text-align: left; hyphens: manual; }
.btn__glyph { flex: none; }
.lead-form .field__error { margin-top: var(--space-2); }
.form__status > div > p { margin: 0 0 var(--space-2); text-align: left; hyphens: manual; }
.form__status > div > p:last-child { margin-bottom: 0; }
.form__status a { font-weight: 600; }

.contact-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;   /* objetivo táctil */
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.contact-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mobile-nav__meta .contact-link { min-height: 0; color: #fff; }

/* WhatsApp: el glifo distingue el canal de un teléfono normal.
   El subrayado del hover se limita al número, no al icono. */
.contact-link--wa { gap: 0.4rem; }
.contact-link--wa:hover { text-decoration: none; }
.contact-link--wa:hover .contact-link__num { text-decoration: underline; text-underline-offset: 0.2em; }
.icon-wa { flex: none; color: var(--ltd-petrol-700); }
.surface-dark .icon-wa, .surface-steel .icon-wa { color: currentColor; }
.address { font-style: normal; font-family: var(--font-sans); font-weight: 500; line-height: 1.55; text-wrap: pretty; }

/* ==========================================================================
   16. FOOTER — franja a todo lo ancho en cuatro columnas
   Sin tarjetas: marca, contacto, oficinas y aviso comparten tres renglones
   (subgrid) — títulos en una línea, contenidos a la misma altura y acciones
   en la base —, separados por líneas verticales finas. En tableta pasan a
   dos por dos y en celular se apilan en el mismo orden.
   ========================================================================== */
.footer {
  --footer-line: rgba(21, 24, 28, 0.14);
  color: var(--text);
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  border-top: 1px solid var(--footer-line);
}
.footer .brand__tag { color: var(--ltd-graphite-700); }

/* Celular: una columna, bloques separados por una línea horizontal */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.footer-col {
  display: grid; align-content: start; row-gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--footer-line);
  min-width: 0;
}
.footer-col:first-child { padding-top: 0; border-top: 0; }
.footer-col:last-child { padding-bottom: 0; }
.footer-col__foot:empty { display: none; }

/* Tableta: dos por dos, con renglones compartidos dentro de cada fila */
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto auto 1fr auto;
  }
  .footer-col {
    grid-row: span 3; grid-template-rows: subgrid; row-gap: 1rem;
    padding: 0; border-top: 0;
  }
  .footer-col:nth-child(even) { padding-left: 2.5rem; border-left: 1px solid var(--footer-line); }
  .footer-col:nth-child(odd) { padding-right: 2.5rem; }
  .footer-col:nth-child(-n+2) { padding-bottom: 2rem; }
  .footer-col:nth-child(n+3) { padding-top: 2rem; border-top: 1px solid var(--footer-line); }
  .footer-col__foot:empty { display: block; }
}

/* Escritorio: cuatro columnas con renglones compartidos */
@media (min-width: 75rem) {
  .footer-grid {
    /* Contacto nunca es más angosta que su dato más largo (el correo) */
    grid-template-columns: minmax(0, 1.3fr) minmax(max-content, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr auto;
  }
  .footer-col,
  .footer-col:nth-child(n) {
    grid-row: span 3; grid-template-rows: subgrid; row-gap: 1.125rem;
    padding: 0 2.25rem; border-top: 0;
    border-left: 1px solid var(--footer-line);
  }
  .footer-col:first-child { padding-left: 0; border-left: 0; }
  .footer-col:last-child { padding-right: 0; }
}

.footer-col__head { display: flex; align-items: flex-end; min-height: 2.75rem; }
.footer-col__label {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.footer-col__body {
  margin: 0; font-size: var(--fs-small); line-height: 1.6;
  color: var(--text-secondary); text-wrap: pretty;
}
.footer-col__body strong { color: var(--text); font-weight: 600; }
.footer-col__foot { display: flex; align-items: flex-end; }

.footer-data { display: grid; gap: 0.875rem; align-content: start; }
.footer-data div { display: grid; gap: 0.2rem; }
.footer-data dt {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.footer-data dd { margin: 0; min-width: 0; font-size: var(--fs-small); color: var(--text); text-wrap: pretty; }
.footer-data .contact-link { min-height: 2.25rem; }
.footer-data .address { font-weight: 400; }
/* Horario en dos renglones intencionales: días arriba, horas abajo */
.footer-hours { display: grid; gap: 0.1rem; }
.footer-hours span:last-child { font-variant-numeric: tabular-nums; }

/* Nota de oficinas: se lee como aclaración, no como parte del domicilio */
.data-note {
  margin: 0; padding-left: 0.75rem;
  border-left: 2px solid var(--footer-line, var(--border));
  font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary);
  text-wrap: pretty;
}
.data-note strong { color: var(--text); }

/* ==========================================================================
   17. GRÁFICOS ABSTRACTOS DE APOYO
   ========================================================================== */
.figure-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  overflow: hidden;
}
.figure-frame { padding-bottom: clamp(2.75rem, 2.25rem + 1vw, 3.5rem); }
.figure-frame::after {
  content: attr(data-caption);
  position: absolute; left: clamp(1.25rem, 1rem + 1vw, 2rem); bottom: 0.875rem;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.figure-frame svg {
  /* El diagrama no debe escalar más allá de su tamaño de diseño: por encima de
     ~30rem su tipografía interna supera a la del cuerpo de texto. */
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
}

/* ==========================================================================
   18. MOVIMIENTO — scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .flow-line { stroke-dashoffset: 0; }
}

/* ==========================================================================
   19. UTILIDADES
   ========================================================================== */
.text-secondary { color: var(--text-secondary); }
.lead { font-size: var(--fs-lead); color: var(--text-secondary); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); }
.stack-3 { display: grid; gap: var(--space-3); }
.stack-4 { display: grid; gap: var(--space-4); }
.stack-5 { display: grid; gap: var(--space-5); }
.stack-6 { display: grid; gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.max-46 { max-width: 46ch; } .max-56 { max-width: 56ch; }

@media print {
  .header, .mobile-nav, .hero__bg, .nav-toggle, .btn { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   DOCUMENTOS LEGALES (aviso de privacidad)
   Tratamiento utilitario: medida de lectura cómoda, índice fijo, tablas
   con desplazamiento propio y numeración real de secciones.
   ========================================================================== */
.legal-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 3vw, 4rem)); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.legal-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.legal-hero__lead { max-width: 60ch; font-size: var(--fs-lead); color: var(--text-secondary); margin: 0 0 var(--space-6); }
.legal-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); margin: 0; }
.legal-meta dt { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.legal-meta dd { margin: 0.25rem 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--text); }

.legal-layout { display: grid; gap: var(--space-7); }
@media (min-width: 64rem) {
  .legal-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-9); align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
.legal-toc {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.legal-toc__title { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.legal-toc ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.125rem; font-size: var(--fs-small); }
.legal-toc li { margin: 0; padding-left: 0.25rem; }
.legal-toc li::marker { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.legal-toc a { display: block; padding: 0.3rem 0; color: var(--text); text-decoration: none; line-height: 1.35; }   /* block: el número se alinea con la primera línea */
.legal-toc a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; }

.legal-body { max-width: 46rem; min-width: 0; }
.legal-section { padding-top: var(--space-7); margin-top: var(--space-7); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal-section h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.legal-num { font-family: var(--font-mono); font-weight: 500; font-size: 0.8em; color: var(--primary); margin-right: 0.25em; }
.legal-section h3 { font-size: var(--fs-h4); margin: var(--space-6) 0 var(--space-3); }
.legal-section p, .legal-list li { color: var(--text-secondary); }
.legal-section strong { color: var(--text); }
.legal-list { padding-left: 1.4rem; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.legal-list li { margin: 0; padding-left: 0.25rem; }

.legal-summary { padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); background: var(--surface-brand); }
.legal-summary__title { margin: 0 0 var(--space-3); font-weight: 600; color: var(--text); }
.legal-summary ul { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--text); }
.legal-summary li { margin: 0; }

.legal-note { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--surface-muted); border: 1px solid var(--border); }
.legal-note p { margin: 0; font-size: var(--fs-small); }

.legal-contact { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); }
@media (min-width: 40rem) { .legal-contact { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-5); } .legal-contact div { display: contents; } }
.legal-contact dt { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); padding-top: 0.2em; }
.legal-contact dd { margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--text); }
@media (min-width: 40rem) { .legal-contact dd { margin: 0; } }
.legal-contact .contact-link { min-height: 0; }

.table-scroll { overflow-x: auto; margin: var(--space-4) 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.legal-table { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: var(--fs-small); }
.legal-table th, .legal-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; }
.legal-table thead th { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-muted); }
.legal-table tbody th { font-weight: 600; color: var(--text); width: 28%; }
.legal-table td { color: var(--text-secondary); }
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-back { margin-top: var(--space-8); }

@media print {
  .legal-toc, .legal-back, .footer { display: none !important; }
  .legal-hero { padding-top: 0; background: none; }
  .legal-layout { display: block; }
  .table-scroll { overflow: visible; border: 0; }
  .legal-table { min-width: 0; }
}

/* Página 404 */
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.error-note { max-width: 36rem; margin-top: var(--space-6); font-size: var(--fs-small); color: var(--text-secondary); }