/* ==========================================================================
   Glocal — sitio corporativo
   Dirección: oscuro con fotografía. Azul de marca como masa real, no como
   acento. Tipografía grande. Texto corto: frases, no párrafos.

   Por qué no la versión clara: se probó y leía a blog. Sin fotografía, con
   párrafos en dos columnas y serif en cuerpo, un sitio corporativo se
   confunde con un artículo. El peso visual lo cargan la imagen y el color.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Cinzel:wght@500&display=swap');

:root {
  /* Azules del logo del cliente */
  --navy-950: #060D17;
  --navy-900: #0B1523;
  --navy-800: #0F1F32;
  --navy-700: #172C45;
  --navy-600: #22405F;

  /* Cobre del monograma, muestreado del archivo original */
  --cobre: #B08D6B;
  --cobre-claro: #D6BFAA;
  --cobre-oscuro: #6C4B36;

  --hueso: #F4F2ED;
  --hueso-2: #E7E3DA;

  --ink: #F2F4F7;
  --ink-soft: rgba(242, 244, 247, .70);
  --ink-muted: rgba(242, 244, 247, .45);

  --linea: rgba(242, 244, 247, .12);
  --linea-fuerte: rgba(176, 141, 107, .38);

  /* Cinzel se queda SOLO en el wordmark del logo, donde empata con la marca.
     En la pagina lee a bufete noventero y a invitacion de boda, no a finanzas
     contemporaneas. El sitio habla en Archivo: grotesca, con autoridad, y una
     sola familia en varios pesos en vez de dos fuentes por defecto. */
  --serif: 'Cinzel', 'Times New Roman', serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1280px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Junto con el del body: sin este, el sangrado del monograma del hero
     genera scroll horizontal en telefono. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height auto es obligatorio: sin él, el atributo height del HTML se aplica
   como altura CSS y deforma el logotipo. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--cobre); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; top: 0; left: 0; z-index: 999;
  background: var(--cobre); color: var(--navy-950); padding: .75rem 1.25rem;
  /* Oculto sin sacarlo del lienzo: con left:-9999px se ensancha el scroll. */
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus { clip-path: none; top: 1rem; left: 1rem; }

/* ------------------------------------------------------- ranura de foto -- */
/* Cada .shot es un hueco de imagen. Mientras no exista la foto se ve como
   un campo de color trabajado, no como un recuadro vacío. Para poner la
   imagen definitiva basta con soltar un <img> adentro. */

.shot {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 20% 0%, var(--navy-600) 0%, transparent 60%),
    radial-gradient(90% 90% at 90% 100%, rgba(176,141,107,.20) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-950) 100%);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  /* Tratamiento ligero: las fotos se generaron con el preset de marca, ya
     vienen oscuras y en paleta. Con el desaturado fuerte que necesitaba el
     banco de imagenes, estas se enlodaban. */
  filter: saturate(.88) contrast(1.03);
}
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Tinte azul de marca encima de la foto, mas la trama fina */
  background:
    linear-gradient(180deg, rgba(15,31,50,.16) 0%, rgba(6,13,23,.34) 100%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
  pointer-events: none;
}
/* En el hero el velo ya lo pone .hero::before, aqui solo la trama */
.hero .shot::after {
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
}

/* --------------------------------------------------------- tipografía -- */

.display {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
}

/* Sin rayita y más discreto. La raya delante del rótulo es un adorno que
   pide atención sin aportar nada, y en el banner competía con el titular. */
.eyebrow {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cobre);
  margin: 0 0 1.4rem;
}

.lead {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.85;
  max-width: 34ch;
}
.muted { color: var(--ink-muted); }

/* -------------------------------------------------------------- navbar -- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.nav.is-stuck {
  background: rgba(11, 21, 35, .88);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--linea);
}

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 92px;
}

.lockup { display: inline-flex; align-items: center; gap: .9rem; }
.lockup img { flex: none; }

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.28rem;
  letter-spacing: .32em;
  color: var(--ink);
  text-indent: .32em;
  white-space: nowrap;
}

.nav__links {
  display: flex; align-items: center; gap: 2.5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.nav__links a {
  color: var(--ink-soft);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav__links a:hover { color: var(--cobre-claro); border-bottom-color: var(--cobre); }

.nav__cta {
  border: 1px solid var(--linea-fuerte);
  color: var(--cobre-claro);
  background: transparent;
  padding: .75rem 1.6rem;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nav__cta:hover { background: var(--cobre); border-color: var(--cobre); color: var(--navy-950); }

.nav__toggle { display: none; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 10rem 5rem;
  isolation: isolate;
  overflow: hidden;
}
.hero .shot {
  position: absolute; inset: 0; z-index: -2;
}
/* Velo: garantiza que el texto se lea encima de cualquier fotografía */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--navy-950) 0%, rgba(6,13,23,.82) 45%, rgba(6,13,23,.35) 100%),
    linear-gradient(0deg, var(--navy-950) 0%, transparent 45%);
}

.hero__inner { position: relative; width: 100%; }

.hero h1 {
  font-size: clamp(2.9rem, 8.2vw, 7rem);
  max-width: 14ch;
  margin: 0 0 2.4rem;
}
.hero .eyebrow { display: none; }
.hero h1 em { font-style: normal; color: var(--cobre-claro); }

.hero .lead { max-width: 34rem; margin: 0 0 3.2rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Monograma a escala, como elemento gráfico */
.hero__mark {
  position: absolute;
  right: -6%; top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: .10;
  z-index: -1;
  pointer-events: none;
}

.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.15rem 2.2rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--solid { background: var(--cobre); color: var(--navy-950); border-color: var(--cobre); }
.btn--solid:hover { background: var(--cobre-claro); border-color: var(--cobre-claro); }
.btn--ghost { color: var(--ink); border-color: var(--linea-fuerte); }
.btn--ghost:hover { border-color: var(--cobre); color: var(--cobre-claro); }
.btn svg { flex: none; }

/* ------------------------------------------------------------ secciones -- */

.section { padding-block: clamp(6rem, 12vw, 11rem); }
.section--luz { background: var(--hueso); color: var(--navy-900); }
.section--luz .lead { color: rgba(11, 21, 35, .66); }
.section--luz .eyebrow { color: var(--cobre-oscuro); }
.section--luz .eyebrow::before { background: var(--cobre-oscuro); }
.section--luz .muted { color: rgba(11, 21, 35, .5); }

/* Declaración: una sola frase, enorme.
   La medida va en rem, no en ch: ch se calcula sobre el tamaño de fuente del
   propio elemento, y .claim hereda el del cuerpo, así que 22ch daba 176px y
   partía el titular palabra por palabra. */
/* El titular manda: columna ancha para que asiente en dos líneas y no en
   cuatro. Un titular partido en cuatro líneas cortas lee a plantilla. */
.claim { text-align: left; max-width: 44rem; }
.claim h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
.claim-grid > *:last-child::before {
  content: '';
  display: block;
  width: 3.2rem; height: 1px;
  background: var(--cobre);
  opacity: .55;
  margin-bottom: 1.6rem;
}
.claim strong { color: var(--cobre-oscuro); font-weight: 400; }

.claim-grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 62rem) {
  /* Proporción editorial: el titular domina y el texto lo acompaña, alineado
     arriba y ligeramente descolgado, no flotando a media altura. */
  .claim-grid { grid-template-columns: 1.5fr .78fr; gap: 4.5rem; }
  .claim-grid > *:last-child { padding-top: .6rem; }
}

/* ---------------------------------------------------------- divisiones -- */

.division {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}
@media (min-width: 62rem) {
  .division { grid-template-columns: 1fr 1fr; align-items: stretch; }
  /* order 2 la manda a la derecha. Con -1 se quedaba a la
     izquierda, porque en el DOM ya iba primero. */
  .division--flip .division__media { order: 2; }
}

.division__media { min-height: clamp(300px, 42vw, 520px); }

.division__body {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.1rem;
}
.division__num {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--cobre);
  opacity: .55;
  margin-bottom: .4rem;
}
.division__body h3 {
  font-family: var(--sans);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  letter-spacing: .04em;
  margin: 0;
}

.division__body p { margin: 0; color: var(--ink-soft); max-width: 42ch; }

/* -------------------------------------------------------------- puertas -- */

.doors { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .doors { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.door {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(2.2rem, 4vw, 3.4rem);
  background: #FFFFFF;
  border: 1px solid rgba(11,21,35,.10);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  cursor: pointer;
}
.door:hover {
  border-color: var(--navy-800);
  box-shadow: 0 18px 60px rgba(11,21,35,.10);
}
.door h3 {
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 400; line-height: 1.25; margin: 0;
}
.door p { margin: 0; color: rgba(11,21,35,.66); font-size: .96rem; }
.door__go {
  margin-top: auto; padding-top: 1.6rem;
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cobre-oscuro); font-weight: 500;
}
.door__go svg { transition: transform .3s ease; }
.door:hover .door__go svg { transform: translateX(6px); }

/* ------------------------------------------------------------- contacto -- */

.contact { display: grid; gap: 3.5rem; align-items: start; }
@media (min-width: 62rem) {
  .contact { grid-template-columns: 1fr 1fr; gap: 6rem; }
}
.contact h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 1.8rem; }

.field { margin-bottom: 1.6rem; }
.field label {
  display: block; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: .6rem;
}
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--linea);
  color: var(--ink);
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  padding: .8rem 0;
  transition: border-color .25s ease;
}
.field select { cursor: pointer; }
/* Opaco a propósito: un desplegable translúcido deja leer lo de atrás. */
.field select option { background: var(--navy-800); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--cobre);
}
.field textarea { resize: vertical; min-height: 6rem; }

/* ------------------------------------------------------------------ pie -- */

.foot {
  border-top: 1px solid var(--linea);
  padding-block: 3.5rem;
  font-size: .84rem;
  color: var(--ink-muted);
}
.foot__inner {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: center;
}
.foot .wordmark { font-size: 1rem; color: var(--ink-soft); }

/* -------------------------------------------------------- animaciones -- */

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* ------------------------------------------------------------- móvil -- */

@media (max-width: 62rem) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 0; color: var(--ink);
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    padding: .5rem 0;
  }
  .nav.is-open .nav__links {
    display: flex; position: absolute; inset: 92px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--navy-950);
    border-bottom: 1px solid var(--linea);
    padding: 1rem var(--gutter) 2rem;
  }
  .nav.is-open .nav__links a {
    display: block; width: 100%; padding-block: 1.1rem;
    border-bottom: 1px solid var(--linea);
  }
  .hero { min-height: auto; padding-block: 9rem 4.5rem; align-items: center; }
  .hero__mark { right: -25%; opacity: .07; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .division__media { min-height: 260px; }
}

/* --------------------------------------------------- problema y solución -- */
/* El sitio tiene que decir qué vende antes que nada. Cada bloque enfrenta el
   problema real del usuario con la respuesta de Glocal. */

.problemas { display: grid; gap: 1px; background: rgba(11,21,35,.12); }
@media (min-width: 56rem) { .problemas { grid-template-columns: repeat(3, 1fr); } }

.problema {
  background: var(--hueso);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.problema__mal {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(11, 21, 35, .5);
}
.problema__bien {
  margin: 0 0 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(108, 75, 54, .3);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.4;
  color: var(--navy-900);
}

/* ------------------------------------------------------------ pendientes -- */
/* Todo lo que no salió de boca del cliente se marca. Un mockup honesto se
   defiende solo; uno relleno de suposición se cae en la primera pregunta. */

.pend {
  position: relative;
  border: 1px dashed rgba(176, 141, 107, .55);
  border-radius: 2px;
  padding: 1.5rem 1.4rem 1.3rem;
}
.pend::before {
  content: attr(data-pend);
  position: absolute;
  top: -.62rem; left: 1rem;
  background: var(--navy-900);
  padding: 0 .6rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cobre);
  white-space: nowrap;
}
.section--luz .pend { border-color: rgba(108, 75, 54, .5); }
.section--luz .pend::before { background: var(--hueso); color: var(--cobre-oscuro); }
.problema .pend::before { background: var(--hueso); }

.pend p:last-child { margin-bottom: 0; }
.pend__texto { color: var(--ink-muted); font-style: italic; }
.section--luz .pend__texto { color: rgba(11, 21, 35, .45); }

/* Aviso de versión, fijo abajo. Que nadie confunda esto con un sitio final. */
.aviso {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--cobre-oscuro);
  color: #F6EFE8;
  font-size: .72rem;
  letter-spacing: .06em;
  text-align: center;
  padding: .7rem 1rem;
}
.aviso b { font-weight: 600; }
body { padding-bottom: 2.6rem; }

/* ==========================================================================
   MÓVIL — revisión 2026-08-13
   La mayoría entra por teléfono. Cuatro cosas que estaban mal:
   1. La etiqueta de los recuadros pendientes se salía por la derecha
   2. El aviso del pie tapaba contenido al ocupar tres renglones
   3. Las secciones tenían 6rem arriba y 6rem abajo: puro aire muerto
   4. Las fotos de divisiones obligaban a demasiado scroll
   ========================================================================== */

@media (max-width: 46rem) {

  /* 1 · La etiqueta deja de flotar y pasa a ser una línea normal arriba
     del recuadro. Con nowrap y texto largo se desbordaba siempre. */
  .pend { padding: 1.1rem 1.1rem 1.05rem; }
  .pend::before {
    position: static;
    display: block;
    padding: 0 0 .6rem;
    background: none;
    white-space: normal;
    line-height: 1.4;
  }
  .section--luz .pend::before,
  .problema .pend::before { background: none; }

  /* 2 · El aviso ocupa tres renglones en pantalla angosta */
  .aviso { font-size: .66rem; padding: .6rem .9rem; line-height: 1.45; }
  body { padding-bottom: 4.6rem; }

  /* 3 · Menos aire muerto entre secciones */
  .section { padding-block: 3.6rem; }
  .hero { padding-block: 7rem 3.2rem; }
  .hero h1 { margin-bottom: 1.6rem; }
  .hero .lead { margin-bottom: 2.2rem; }
  .claim { margin-bottom: 2rem !important; }
  .claim-grid { gap: 2rem; }
  .problemas { gap: 1rem; background: none; }
  .problema { padding: 0; }
  .division__body { padding: 2.2rem 1.5rem 2.6rem; gap: .9rem; }
  .division__num { font-size: 2.6rem; margin-bottom: .1rem; }

  /* 4 · Las fotos dejan de comerse la pantalla */
  .division__media { min-height: 0; aspect-ratio: 16 / 10; }

  .doors { gap: 1rem; }
  .door { padding: 1.6rem 1.4rem; }
  .contact { gap: 2.4rem; }
  .foot { padding-block: 2.4rem; }
  .foot__inner { gap: 1.2rem; }
}

/* Guarda contra desbordes horizontales en cualquier ancho */
.wrap, .division__body, .door, .pend { min-width: 0; }

/* --------------------------------------------------------- cifras y respaldo -- */
/* Datos duros presentados sin adorno. "Elegancia es seguridad": si algo grita,
   resta. La contención es el argumento. */

.cifras { display: grid; gap: 1px; background: var(--linea); }
@media (min-width: 56rem) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifras > div { background: var(--navy-900); padding: 1.8rem 1.6rem; }
.cifras b {
  display: block; font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 600; letter-spacing: -.02em; color: var(--cobre-claro);
}
.cifras span {
  display: block; margin-top: .5rem;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}

.respaldos { display: grid; gap: 1.6rem; }
/* Cuatro pilares, no tres: con repeat(3) el cuarto quedaba huérfano. */
@media (min-width: 56rem) { .respaldos { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 3rem; } }
.respaldo { border-top: 2px solid var(--cobre); padding-top: 1.2rem; }
.respaldo h4 {
  margin: 0 0 .7rem; font-size: .95rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--navy-900);
}
.respaldo p { margin: 0; font-size: .95rem; line-height: 1.65; color: rgba(11,21,35,.7); }
.respaldo strong { color: var(--navy-900); font-weight: 600; }

/* ------------------------------------------------------------ enunciado -- */
/* Una sola sección con ritmo distinto. Cinco bloques idénticos seguidos son
   orden, no gracia: la elegancia pide que algo rompa el patrón. */

.enunciado { padding-block: clamp(6rem, 13vw, 12rem); text-align: center; }
.enunciado .eyebrow { justify-content: center; margin-bottom: 2.4rem; }
.enunciado__t {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--navy-900);
}
.enunciado__t em { font-style: normal; color: var(--cobre-oscuro); }

/* Sin numeral, el nombre de la división encabeza su bloque */
.division__body h3 { margin-top: 0; }

/* La frase que cierra el argumento del sitio. Va sola y grande: es lo único
   que se busca que quede en la cabeza. */
.enunciado__t--gigante{
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  font-weight: 600;
  letter-spacing: -.045em;
  max-width: none;
  color: var(--navy-900);
}
.enunciado__pie{
  margin: 2.2rem auto 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.8;
  color: rgba(11, 21, 35, .6);
}

/* Cambio de idioma. Discreto: es una utilidad, no una acción de la página. */
.nav__lang{
  background:none;border:0;color:var(--ink-muted);
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;padding:.5rem .2rem;margin-right:-.2rem;
  transition:color .2s ease;
}
.nav__lang:hover{color:var(--cobre-claro)}
@media screen and (max-width:62rem){
  .nav__lang{display:inline-block;margin-left:auto;margin-right:.8rem}
}

/* Banda de imagen a lo ancho de la sección. Le devuelve a Financial el peso
   que le corresponde: es el servicio, no un apartado. */
.banda{
  position:relative;
  width:100%;
  aspect-ratio: 21 / 8;
  margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
  overflow:hidden;
}
@media (max-width: 46rem){ .banda{ aspect-ratio: 16 / 10; } }

/* --------------------------------------------------- qué resolvemos -- */
/* Peso 300 en grande, no el 600 de .display: el grotesco pesado a ese tamaño
   es registro de producto, no de firma. El remate en cobre cierra el bloque. */
.problemas-sec{ background: var(--navy-950); }
.manifiesto{
  margin: clamp(1.5rem, 2.8vw, 2.3rem) 0 0;
  max-width: 58rem;
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: -.026em;
  color: var(--ink);
}
.manifiesto__cierre{
  margin: clamp(2.4rem, 4.5vw, 4rem) 0 0;
  padding-top: clamp(1.5rem, 2.6vw, 2.2rem);
  max-width: 58rem;
  border-top: 1px solid var(--linea);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--cobre-claro);
}

/* La navbar es fija: sin este margen de scroll, el salto a un ancla deja el
   eyebrow de la sección escondido detrás de ella. */
section[id]{ scroll-margin-top: 96px; }


/* Campo trampa del formulario. Va fuera de la pantalla, no con display:none:
   un robot ignora lo oculto y rellena lo que encuentra en el HTML. Si viene
   lleno, el servidor descarta el envio. */
.trampa{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}