/* ═══════════════════════════════════════════════════════════════════════
   landing.css — la cara pública.

   Se apoya en `tokens.css`, que es la FUENTE del sistema visual y no se
   edita: acá no se declara ni un color, ni un radio, ni un espaciado que
   no venga de un token. Lo que sí se define son las composiciones que
   solo existen en la landing (héroe, pasos, tarjetas de módulo), porque
   `olivia.css` compone el producto y la landing no es el producto.

   Sin fuentes remotas, sin CDN, sin nada que salga a la red: la web tiene
   que verse igual con el cable desenchufado.
   ═══════════════════════════════════════════════════════════════════════ */

.ld {
  background: var(--bg);
  color: var(--tx-1);
  font-family: var(--ff-ui);
  font-size: var(--fs-4);
  line-height: var(--lh-read);
  -webkit-font-smoothing: antialiased;
}
.ld * { box-sizing: border-box; }

/* ── barra ─────────────────────────────────────────────────────────── */
.ld-hz {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 44px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s, padding .2s;
}
.ld-hz.pegada { padding-top: 10px; padding-bottom: 10px; box-shadow: var(--sh-1); }
/* Una línea de avance con el degradado del símbolo. Dice cuánto queda de
   página sin ocupar espacio ni pedir atención. */
.ld-hz::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--avance, 0%);
  background: linear-gradient(90deg, var(--brand-blue), var(--brand) 60%,
              color-mix(in srgb, var(--brand-green) 80%, var(--brand)));
  transition: width .12s linear; }
.ld-marca { display: flex; align-items: center; flex: none; }
.ld-marca svg { height: 32px; width: auto; }
/* 🔴 El nav pesaba 13px en peso normal sobre gris: se leía como pie de
   página, no como navegación. Ahora 14/600, y al pasar el puntero se enciende
   con el fondo de selección y le crece debajo el degradado del símbolo. */
.ld-nav { display: flex; gap: 6px; margin-left: 16px; }
.ld-nav a {
  display: inline-flex; align-items: center; height: 38px;
  color: var(--tx-2); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 0 13px; border-radius: var(--r-1); position: relative;
  transition: color .18s ease, background-color .18s ease;
}
.ld-nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; background-image: var(--grad-marca);
  background-repeat: no-repeat; background-size: 0% 2px;
  transition: background-size .26s ease;
}
.ld-nav a:hover { color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.ld-nav a:hover::after { background-size: 100% 2px; }
/* 🔑 «Entrar» y «Registrar» NO son dos botones iguales: uno es texto que se
   enciende al pasar y el otro es LA acción, más alto y en color pleno. Con
   los dos como botón bordeado, la barra no proponía nada. */
.ld-acc { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.ld-acc .b { height: 38px; min-height: 38px; padding: 0 13px;
  font-size: 14px; font-weight: 650; border-color: transparent;
  background: none; color: var(--tx-1); }
.ld-acc .b:hover { background: var(--sunken); color: var(--brand);
  border-color: transparent; }
.ld-acc .b.p { height: 44px; min-height: 44px; padding: 0 22px;
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ld-acc .b.p:hover { background: var(--brand-hi); border-color: var(--brand-hi);
  color: var(--brand-ink); }
.ld-burger { display: none; background: none; border: 0; color: var(--tx-1);
  cursor: pointer; margin-left: auto; }
.ld-burger svg { width: 26px; height: 26px; }

/* ── botones grandes ───────────────────────────────────────────────── */
/* Las medidas salen del handoff: alto 54, radio 12, 15.5px —el primario a
   650 y el secundario a 600—, y el relleno distinto en cada uno (30 / 26)
   porque el primario carga más texto. NO son `--sp-*`: son del héroe. */
.ld .b.grande { height: 54px; min-height: 54px; padding: 0 26px;
  border-radius: 12px; font-size: 15.5px; font-weight: 600; }
.ld .b.p.grande { padding: 0 30px; font-weight: 650; }
.ld .b { white-space: nowrap; }

/* ── héroe ─────────────────────────────────────────────────────────── */
.ld-hero { position: relative; overflow: hidden; padding: 78px 44px 96px; }
/* El halo es el único adorno de la página y no lleva imagen: dos degradados
   radiales con los colores de marca. Pesa cero y no sale a la red. */
/* Tres focos, con el AZUL al frente. La primera versión repartía verde y
   turquesa y la página entera se leía de un solo color: el símbolo recorre
   el espectro azul→verde y la landing se quedaba en la mitad verde. Va a la
   deriva, muy lento — es atmósfera, no un efecto. */
.ld-halo {
  position: absolute; inset: -34% -14% auto -14%; height: 138%;
  background:
    radial-gradient(44% 50% at 76% 28%,
      color-mix(in srgb, var(--brand-blue) 32%, transparent), transparent 68%),
    radial-gradient(38% 44% at 32% 20%,
      color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    radial-gradient(40% 46% at 16% 76%,
      color-mix(in srgb, var(--brand-green) 18%, transparent), transparent 72%);
  pointer-events: none;
  animation: deriva 26s ease-in-out infinite alternate;
}
@keyframes deriva {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .ld-halo { animation: none; } }
/* 🔑 DOS COLUMNAS IGUALES, no 1,05 contra 0,95. No es un capricho de
   simetría: a 1200 de ancho y 64 de canal, la columna de texto queda en 568
   y «Saber qué le obliga.» —que mide 577 a 66px— NO entra en un renglón. El
   titular se parte en dos como en el diseño aprobado. Con 1,05fr entraba
   justo y el héroe se leía distinto. */
.ld-hero-in {
  position: relative; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: clamp(36px, 4vw, 64px); align-items: center;
}
/* El punto verde es del diseño aprobado: la chapa sin él se lee como un
   rótulo apagado. Y va a 700 sobre tinta SECUNDARIA, no terciaria. */
.ld-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-2); margin-bottom: 26px;
}
.ld-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none; }
/* 🔴 El titular llegaba a 48px con interlínea de interfaz y se leía blando.
   66px, 1.03 de interlínea y −.028 de tracking: a este tamaño el texto se
   compone, no se lista. */
.ld-hero h1 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2rem, 3.9vw, 3.375rem);
  line-height: 1.05; letter-spacing: -.026em;
  margin: 0 0 22px; text-wrap: balance;
}
/* El mismo recorrido azul→verde del símbolo, en la línea que remata el
   titular. Es el ÚNICO texto de la página con degradado: si fueran dos,
   dejaría de significar algo. */
.ld-hero h1 em { font-style: normal;
  background-image: linear-gradient(96deg, var(--brand-blue),
    var(--brand) 58%, color-mix(in srgb, var(--brand-green) 80%, var(--brand)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* El párrafo de entrada sube a 18.5px con 1.58 de interlínea: es el único
   bloque de prosa larga de la página y a 16px se leía como nota al pie. */
.ld-lead { font-size: 18.5px; line-height: 1.58; color: var(--tx-2);
  margin: 0 0 34px; max-width: 50ch; }
.ld-lead b { font-weight: 650; color: var(--tx-1); }
.ld-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.ld-nota { font-size: 13px; color: var(--tx-3); margin: 20px 0 0; }

/* La caja de la animación. Alto fijo para que el SVG pueda abrir su
   `viewBox` de 112 a 371 sin que la página salte. El alto es el del viewBox
   final —371/112— y no uno holgado: el aire de más era lo que obligaba a
   despegar la firma del logotipo. */
.ld-hero-marca { display: flex; flex-direction: column; align-items: stretch;
  gap: 0; justify-self: end; width: 100%; max-width: 520px; }
/* 🔴 EL SVG NO PUEDE IR EN EL FLUJO. La caja declara su alto con
   `aspect-ratio` (157 px), pero el SVG lleva `height:100%` y su viewBox
   ARRANCA CUADRADO (112×112): el navegador le daba 520×520 y empujaba la
   caja. Al abrir la cámara a 371 el alto se desplomaba a 157 de un cuadro
   al otro, el héroe encogía 17 px y —al estar la fila centrada— el texto
   saltaba hacia arriba. 🔑 Absoluto: el SVG llena la caja y no la mide.
   El símbolo conserva su tamaño de principio a fin y la cámara solo abre
   hacia los lados, que es lo que la animación cuenta. */
/* `--marca-zoom` es el tope de agrandamiento del símbolo al arrancar la
   animación: 3,3125 = el ancho completo de la caja (371/112), que es el
   tamaño con el que se leía el logo de LQG.

   Acá se DECLARA el permiso; quien decide si cabe es `marca.js`, que mide
   en vivo si la marca tiene un vecino al costado. Apilada sobre el titular
   —teléfono, o pantallas donde `auto-fit` ya tiró la rejilla a una sola
   columna— el zoom se apaga solo. No hace falta media query, y por eso no
   hay una franja de anchos donde el símbolo pise el texto. */
.ld-marca-caja { position: relative; width: 100%; aspect-ratio: 371 / 112;
  --marca-zoom: 3.3125; }
/* 🔴 `pointer-events: none` NO ES COSMÉTICO. Con el zoom puesto el SVG se
   agranda 3,3 veces y su caja —invisible, porque la tinta va centrada—
   se extiende hasta 1.723 px y queda ENCIMA del botón «Registrar mi
   empresa». Sin esto, el clic principal de la página no funciona durante
   los primeros siete segundos: se lo come el logotipo. Comprobado con
   `elementFromPoint` sobre el botón. La marca es decorativa (`role="img"`)
   y no recibe interacción, así que no pierde nada. */
.ld-marca-caja > svg { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; }
/* 🔴 La firma estaba CENTRADA bajo el conjunto, en un renglón y diciendo
   «Olivia, un servicio de LQG…»: así se lee como un rótulo de la página y no
   como la firma del logotipo. 🔑 Cuelga del LOGOTIPO «Olivia» —alineada al
   borde izquierdo de la «O», que está en 145,6 de 371 → 36% del conjunto— y
   va en DOS renglones, con quién presta el servicio abajo y en tinta. El
   −3% recorta el aire vertical que deja el viewBox. Handoff de Design,
   `Olivia Landing.dc.html` / README §Marca punto 6. */
.ld-marca-pie { margin-top: -3%; margin-left: 36%; max-width: 64%;
  font-size: 13px; line-height: 1.42; color: var(--tx-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.ld-marca-pie b { color: var(--tx-1); font-weight: 700; }
/* El pie es la CONCLUSIÓN de lo que se acaba de ver, no un rótulo: aparece
   cuando la animación termina. `marca.js` pone `.listo` en la caja. */
.ld-marca-caja.listo + .ld-marca-pie { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ld-marca-pie { opacity: 1; transform: none; transition: none; } }
/* Sin el JSON de rayos no hay animación: se dice, no se deja un hueco. */
.marca-sin-datos::after { content: "Olivia"; font-family: var(--ff-display);
  font-size: var(--fs-9); color: var(--brand); }

/* ── secciones ─────────────────────────────────────────────────────── */
/* Todas las secciones del handoff miden lo mismo: 88 de aire vertical, 44
   de margen lateral y 1200 de caja. Las que se salen —cifras y módulos— lo
   dicen abajo con su propia regla y su razón. */
/* 🔴 LA CAJA DE 1200 NO SE CENTRA CON `margin: auto` EN LOS HIJOS. Se hacía
   así y cualquier regla posterior que usara la forma corta —`.ld-h2 {margin:
   0 0 10px}`, `.ld-sub {margin: 0 0 46px}`— le devolvía los márgenes
   laterales a cero sin decir nada: el título se iba al borde izquierdo y la
   rejilla seguía centrada. En una pantalla de 1440 el desfase son 100 px y
   pasa por descuido; en una de 3440 son 1.070 y la sección se parte en dos.
   🔑 Centra la SECCIÓN, con una sola pista de 1200: los hijos entran en esa
   pista pongan el margen que pongan. */
.ld-sec { padding: 88px 44px;
  display: grid; grid-template-columns: min(1200px, 100%); justify-content: center; }
.ld-h2 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(27px, 3.1vw, 38px);
  line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 10px; text-align: center; text-wrap: balance;
}
.ld-sub { text-align: center; color: var(--tx-2); font-size: 16px;
  margin: 0 0 46px; }

/* Revelado al entrar. La clase la pone el observador; sin JS, `visto` se
   aplica a todo desde el principio y la página se lee igual. */
[data-revelar] { opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
[data-revelar].visto { opacity: 1; transform: none; }
/* Lo que va en rejilla entra uno detrás de otro. `--retraso` lo escribe la
   PLANTILLA, así que el escalonado sigue el orden real de los datos y no una
   lista de `nth-child` escrita a mano que se desincroniza al agregar uno. */
[data-revelar] .ld-cifra,
[data-revelar] .ld-ventaja,
[data-revelar] .ld-mod,
[data-revelar] .ld-pasos li,
[data-revelar] .ld-razon { opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease var(--retraso, 0ms),
              transform .55s cubic-bezier(.22,1,.36,1) var(--retraso, 0ms); }
[data-revelar].visto .ld-cifra,
[data-revelar].visto .ld-ventaja,
[data-revelar].visto .ld-mod,
[data-revelar].visto .ld-pasos li,
[data-revelar].visto .ld-razon { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revelar], [data-revelar] .ld-cifra, [data-revelar] .ld-ventaja,
  [data-revelar] .ld-mod,
  [data-revelar] .ld-pasos li, [data-revelar] .ld-razon {
    opacity: 1; transform: none; transition: none; }
}

/* ── cifras ────────────────────────────────────────────────────────── */
/* 🔑 La fila de cifras se cierra ARRIBA Y ABAJO con una hairline y las
   celdas se tocan (canal 0, separadas por su propio borde). Con canal y sin
   cierre, las cuatro cifras flotaban sueltas sobre el papel. */
.ld-cifras, .ld-ventajas { padding: 26px 44px 96px; }
.ld-ventaja { padding: 32px 26px; border-right: 1px solid var(--line); }
.ld-ventaja:last-child { border-right: 0; }
.ld-ventaja b { display: block; font-family: var(--ff-display); font-size: 20px;
  font-weight: 700; line-height: 1.22; letter-spacing: -.014em; color: var(--tx-1);
  text-wrap: balance; }
.ld-ventaja span { display: block; margin-top: 10px; font-size: 14.5px;
  line-height: 1.5; color: var(--tx-2); }
@media (max-width: 820px) {
  .ld-ventaja { border-right: 0; border-top: 1px solid var(--line);
    padding: var(--sp-6) 0; }
  .ld-ventaja:first-child { border-top: 0; }
}
.ld-grid4 { display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 🔴 Cada cifra vivía en una caja gris con borde, y cuatro cajas grises en
   fila leen como una tabla de precios. Van sobre el papel, separadas por una
   línea de pelo: el número es el que tiene que pesar. */
.ld-cifra { text-align: left; padding: 32px 26px;
  border-right: 1px solid var(--line); }
.ld-cifra:last-child { border-right: 0; }
/* 🔴 En una sola columna la línea de pelo tiene que ir ARRIBA. Con
   `border-left` las cuatro cifras apiladas quedaban con una raya vertical a
   la izquierda que no separaba nada — separaba de la nada. */
@media (max-width: 820px) {
  .ld-cifra { border-right: 0; border-top: 1px solid var(--line);
    padding: var(--sp-6) 0; }
  .ld-cifra:first-child { border-top: 0; }
}
/* Las cuatro cifras recorren el espectro de la marca en vez de repetir el
   turquesa: azul, azul-turquesa, turquesa, verde. La sección deja de leerse
   plana sin agregar una sola palabra. */
.ld-cifra b { display: block; font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4vw, var(--fs-11)); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--brand); }
.ld-cifra.c1 b { color: var(--brand-blue); }
.ld-cifra.c2 b { color: color-mix(in srgb, var(--brand-blue) 55%, var(--brand)); }
.ld-cifra.c3 b { color: var(--brand); }
.ld-cifra.c4 b { color: color-mix(in srgb, var(--brand-green) 72%, var(--brand)); }
.ld-cifra span { display: block; margin-top: var(--sp-4);
  font-size: 13.5px; line-height: 1.4; color: var(--tx-2); }
.ld-pie-cifras { text-align: center; margin-top: 22px;
  font-size: 12.5px; color: var(--tx-3); }

/* ── módulos ───────────────────────────────────────────────────────── */
.ld-modulos { padding-top: 0; padding-bottom: 100px; }
.ld-mods { display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* 🔑 La tarjeta son DOS zonas, no una caja con relleno: la banda de la
   figura (190 de alto, con su halo) y el texto debajo, separado por una
   hairline. Sin esa línea la figura y el título se leían como un bloque. */
.ld-mod {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px;
  transition: border-color .2s, transform .2s, box-shadow .22s;
}
.ld-mod-tx { display: flex; flex-direction: column; gap: 10px; flex: 1;
  padding: 24px 26px 26px; border-top: 1px solid var(--line); }
.ld-mod:hover { box-shadow: 0 12px 32px -20px rgba(14,27,26,.45); }
.ld-mod:hover { border-color: var(--brand); transform: translateY(-3px); }
.ld-mod.pronto { opacity: .72; }
.ld-mod.pronto:hover { border-color: var(--line); transform: none; }
/* La figura del módulo, la MISMA que se ve adentro en el selector: el
   articulado, el terreno, la curva de carga. Un ícono de 24 px no dice qué
   hace un módulo, y obliga a explicarlo con dos párrafos. */
.ld-mod-arte { position: relative; overflow: hidden; height: 190px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--n-1), var(--surface)); }
.ld-mod-arte svg { width: 230px; max-width: 86%; height: auto; display: block;
  position: relative; z-index: 1; }
.ld-mod-arte::before { content: ""; position: absolute; inset: 0;
  opacity: .6; transition: opacity .28s; }
.ld-regulatorio .ld-mod-arte::before { background: radial-gradient(50% 60% at 60% 62%,
  color-mix(in srgb, var(--brand-blue) 32%, transparent), transparent 72%); }
.ld-ambiental .ld-mod-arte::before { background: radial-gradient(52% 60% at 40% 62%,
  color-mix(in srgb, var(--brand-green) 32%, transparent), transparent 72%); }
.ld-energia .ld-mod-arte::before { background: radial-gradient(56% 62% at 50% 64%,
  color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%); }
.ld-mod:hover .ld-mod-arte::before { opacity: 1; }
.ld-regulatorio:hover { border-color: var(--brand-blue); }
.ld-ambiental:hover { border-color: color-mix(in srgb, var(--brand-green) 80%, var(--brand)); }
.ld-mod h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.016em; }
.ld-promesa { margin: 0; color: var(--tx-2); font-size: 15px; line-height: 1.55; }
.ld-resumen { margin: 0; color: var(--tx-3); font-size: var(--fs-2);
  line-height: var(--lh-read); }
.ld-mod-link { margin-top: auto; padding-top: 6px; color: var(--brand);
  text-decoration: none; font-size: 14px; font-weight: 650; }
.ld-mod-link:hover { color: var(--brand-hi); }
.ld-mod-pronto { margin-top: auto; padding-top: 6px; font-size: var(--fs-2); color: var(--tx-3);
  letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* ── pasos ─────────────────────────────────────────────────────────── */
.ld-oscura { background: var(--sunken); }
.ld-pasos { list-style: none; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: p; }
.ld-pasos li { position: relative; padding: 26px 24px 28px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 16px; }
/* 🔴 El número era una pastilla de color de 34px: pesaba más que el título
   del paso y la sección se leía como cuatro botones. Ahora es TIPOGRAFÍA DE
   REFERENCIA —46px en el gris más claro que aún se lee— y quien marca el
   avance con color es el borde superior de la tarjeta. El orden importa, así
   que el número tiene que estar; no tiene que gritar. */
.ld-num { display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: 46px; line-height: 1; letter-spacing: -.03em; color: var(--n-4);
  margin-bottom: 0; }
.ld-pasos li { border-top: 3px solid var(--brand); }
.ld-pasos li:nth-child(1) { border-top-color: var(--brand-blue); }
.ld-pasos li:nth-child(2) {
  border-top-color: color-mix(in srgb, var(--brand-blue) 50%, var(--brand)); }
.ld-pasos li:nth-child(4) { border-top-color: var(--green-aa); }
.ld-pasos li { transition: transform .2s, border-color .2s; }
.ld-pasos li:hover { transform: translateY(-3px); border-color: var(--line-hi); }
.ld-pasos h3 { margin: 14px 0 8px; font-size: 17px; font-weight: 700; }
.ld-pasos p { margin: 0; color: var(--tx-2); font-size: 14.5px; line-height: 1.55; }

/* ── razones ───────────────────────────────────────────────────────── */
/* 🔴 Cuatro tarjetas con rail de color a la izquierda: el rail de color es
   el vocabulario del ESTADO de una obligación, y acá no había ningún estado
   — era decoración usando un signo que significa otra cosa. Ahora es una
   retícula 2×2 partida por líneas de pelo, sin cajas. */
.ld-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); }
.ld-razon { padding: 34px 44px 34px 0;
  border-bottom: 1px solid var(--line); }
.ld-razon:nth-child(even) { padding: 34px 0 34px 44px;
  border-left: 1px solid var(--line); }
.ld-razon h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700;
  letter-spacing: -.014em; text-wrap: balance; }
.ld-razon p { margin: 0; color: var(--tx-2); font-size: 15.5px; line-height: 1.62;
  max-width: 52ch; }
@media (max-width: 760px) {
  .ld-grid2 { grid-template-columns: 1fr; }
  .ld-razon, .ld-razon:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ── quién / contacto ──────────────────────────────────────────────── */
.ld-quien { text-align: center; }
.ld-quien .ld-lead { margin: 0 auto; max-width: 68ch; }
.ld-contacto { background: var(--sunken); }
.ld-contacto-in { display: grid; gap: clamp(36px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  /* Sin `margin: 0 auto`: adentro de la rejilla de la sección, un margen
     lateral automático encoge la caja al contenido (1036 en vez de 1200) y
     la desalinea contra el resto de la página. Centrar es de la sección. */
  align-items: start; max-width: 1200px; margin: 0; }
/* En contacto el par titular/bajada NO es un encabezado centrado de sección:
   es la columna izquierda de un formulario, y se compone como texto corrido. */
.ld-contacto .ld-h2, .ld-contacto .ld-sub { text-align: left; }
.ld-contacto .ld-h2 { margin-bottom: 12px; line-height: 1.08; }
.ld-contacto .ld-sub { font-size: 16.5px; line-height: 1.58; max-width: 44ch;
  margin-bottom: 32px; }
/* La sección de razones no lleva bajada: el aire que da la bajada en las
   otras secciones lo tiene que dar el propio titular. */
#porque .ld-h2 { margin-bottom: 46px; }
.ld-datos { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px; }
.ld-datos li { font-size: 16px; font-weight: 600; color: var(--tx-1); }
.ld-datos b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.ld-form { background: var(--bg); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px;
  display: flex; flex-direction: column; gap: 18px; }
.ld-form .fila { display: flex; gap: 16px; flex-wrap: wrap; }
.ld-form .campo { flex: 1 1 190px; display: flex; flex-direction: column;
  gap: 7px; }
.ld-form label { font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3); }
.ld-form input, .ld-form textarea {
  font: inherit; font-size: 15px; color: var(--tx-1);
  background: var(--n-1); border: 1px solid var(--line-hi);
  border-radius: 10px; padding: 12px 14px; width: 100%;
}
.ld-form input:focus, .ld-form textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.ld-form textarea { resize: vertical; min-height: 112px; line-height: 1.55;
  border-radius: 12px; }
/* El botón del formulario es 2px más bajo que los del héroe: ahí es la
   acción de la página, acá es el cierre de una caja. */
.ld-form .b.grande { height: 52px; min-height: 52px; align-self: flex-start; }
.ld-ok, .ld-mal { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-1);
  font-size: var(--fs-3); }
.ld-ok { background: var(--st-aldia-bg); color: var(--st-aldia); }
.ld-mal { background: var(--st-vencida-bg); color: var(--st-vencida); }

/* ── pie ───────────────────────────────────────────────────────────── */
.ld-pie { border-top: 1px solid var(--line); padding: 40px 44px 48px; }
.ld-pie-in { max-width: 1200px; margin: 0 auto; display: flex;
  align-items: center; gap: 32px; flex-wrap: wrap; }
.ld-pie-marca { display: flex; align-items: center; gap: 16px; }
.ld-pie-marca svg { height: 26px; width: auto; }
.ld-pie-marca span { font-size: 11px; font-weight: 700; color: var(--tx-3);
  letter-spacing: .1em; text-transform: uppercase; }
.ld-pie nav { display: flex; gap: 26px; margin-left: auto; }
.ld-pie nav a { color: var(--tx-2); text-decoration: none; font-size: 13.5px;
  font-weight: 600; }
.ld-pie nav a:hover { color: var(--brand); }
.ld-pie small { flex: 1 1 100%; color: var(--tx-3); font-size: 12px; }

/* ── móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Los 44 de margen lateral son del diseño de escritorio; en un teléfono se
     comen la caja de texto. Adentro del móvil manda `--pad-page`. */
  .ld-hz, .ld-sec, .ld-cifras, .ld-ventajas, .ld-modulos, .ld-pie {
    padding-left: var(--pad-page); padding-right: var(--pad-page); }
  .ld-hero { padding: var(--sp-11) var(--pad-page) var(--sp-12); }
  .ld-hero-in { grid-template-columns: 1fr; }
  .ld-hero-marca { order: -1; }
  .ld-nav, .ld-acc { display: none; }
  .ld-burger { display: block; }
  body.menu-abierto .ld-nav,
  body.menu-abierto .ld-acc {
    display: flex; position: fixed; left: 0; right: 0; top: 66px; z-index: 39;
    flex-direction: column; gap: var(--sp-5); padding: var(--sp-7) var(--pad-page);
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  body.menu-abierto .ld-acc { top: 220px; border-bottom: 0; }
  .ld-contacto .ld-h2, .ld-contacto .ld-sub { text-align: center; }
}