/* ==========================================================================
   Landing de WorkLogTracker. Clara, reglada, de impreso.

   Autónoma a propósito: no importa tokens.css ni components.css ni Bootstrap.
   Si algún día falta un estilo, se escribe aquí; no se enlaza una hoja del
   sitio corporativo. Hay un test que falla si alguna se cuela.

   La dirección es «documento oficial», y no es un capricho estético: lo que
   este producto entrega al cerrar el mes es literalmente un impreso con
   validez ante una inspección. La página se parece a su propia salida.

   De ahí salen tres decisiones que recorren todo el fichero:

     * **Papel, no blanco.** #f6f4ef es un blanco cálido. El blanco puro es de
       FactuSimple y el navy oscuro es de PolizaTracker; ninguna de las tres
       debe confundirse con las otras.
     * **Esquinas de 3 px.** Un impreso no tiene radios de 24 px. Es lo que más
       diferencia esta página de las otras dos de un vistazo.
     * **Dos tipografías con dos oficios.** Public Sans —del sistema de diseño
       del gobierno federal estadounidense, dibujada para formularios— lleva el
       texto. Martian Mono lleva los DATOS: las horas, la cuadrícula del
       registro, el precio y el sello. Es como está compuesto un impreso de
       verdad.

   Los colores son los del lockup real de la aplicación
   (assets/brand/svg/wk-lockup.svg): #0C2238 y #22B863.
   ========================================================================== */

@font-face {
  font-family: 'Public Sans';
  src: url("../../fonts/landings/PublicSans.37ad69b4713b.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Mono';
  src: url("../../fonts/landings/MartianMono.f4f1dcd8b05c.woff2") format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --wk-paper: #f6f4ef;
  --wk-surface: #fffdf9;
  --wk-ink: #0c2238;
  --wk-ink-soft: #4a5a6b;
  --wk-rule: #d8d2c4;

  /* El verde de marca. 2.36:1 sobre el papel: NO puede llevar texto nunca.
     Vive como forma —el sello, los puntos de la jornada, la marca de validado—
     y cuando hace falta escribir con él se usa --wk-stamp-ink, que sí pasa AA
     (6.16:1). Sobre el propio verde se escribe en TINTA (6.23:1), nunca en
     blanco, que se queda en 2.59:1 y suspendería. */
  --wk-stamp: #22b863;
  --wk-stamp-ink: #10693a;

  --wk-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --wk-data: 'Martian Mono', ui-monospace, 'Cascadia Mono', 'Courier New', monospace;

  --wk-radius: 3px;
  --wk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wk-slow: 0.75s;
}

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

/* --------------------------------------------------------------------------
   El papel

   Dos retículas superpuestas a opacidad muy baja: una fina cada 28 px y una
   más marcada cada 140 px, que es como está reglado un impreso. No se ve como
   una cuadrícula; se nota como textura, y es lo que impide que el fondo se lea
   como un blanco plano de plantilla.
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background-color: var(--wk-paper);
  background-image:
    repeating-linear-gradient(to right, rgba(12, 34, 56, 0.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(12, 34, 56, 0.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to right, rgba(12, 34, 56, 0.05) 0 1px, transparent 1px 140px);
  color: var(--wk-ink);
  font-family: var(--wk-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--wk-ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--wk-stamp-ink); }

h1, h2, h3 {
  font-family: var(--wk-body);
  font-weight: 800;
  letter-spacing: -0.021em;
  line-height: 1.08;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

/* El titular. Se estiliza por `h1` a secas y no por `.ln-hero h1`: esa cadena
   está reservada para los bloques condicionados a `html:not(.gsap)`, y hay un
   test que falla si aparece sin condicionar. La página tiene un solo h1. */
h1 { font-size: clamp(2.15rem, 5.2vw, 3.85rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.0625rem; font-weight: 700; }

p { margin: 0 0 1rem; }

.ln-wrap {
  width: min(1120px, 100% - clamp(1.5rem, 6vw, 5rem));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Salir de aquí: el salto al contenido y la vuelta a la corporativa
   -------------------------------------------------------------------------- */
.ln-skip {
  position: absolute;
  left: -9999px;
}

.ln-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: var(--wk-ink);
  color: var(--wk-paper);
  padding: 0.7rem 1rem;
  border-radius: var(--wk-radius);
}

.ln-return {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 253, 249, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid var(--wk-rule);
  border-radius: var(--wk-radius);
  font-family: var(--wk-data);
  font-size: 0.6875rem;
  font-variation-settings: 'wdth' 90;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.ln-return:hover,
.ln-return:focus-visible { border-color: var(--wk-ink); color: var(--wk-ink); }

@media (max-width: 640px) {
  .ln-return__text { display: none; }
  .ln-return { padding: 0.5rem; }
}

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

   La fotografía va debajo de una capa de papel casi opaca. No es decoración:
   es lo que garantiza el contraste. El peor caso —un píxel negro bajo la parte
   más transparente de la capa— está calculado y vigilado en
   scripts/check_contrast.py; si se toca la opacidad de aquí abajo, hay que
   recalcularlo allí.
   -------------------------------------------------------------------------- */
.ln-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(6rem, 13vw, 9.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--wk-rule);
  overflow: hidden;
}

.ln-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}

.ln-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(246, 244, 239, 0.975) 0%,
      rgba(246, 244, 239, 0.955) 46%,
      rgba(246, 244, 239, 0.9) 100%);
}

.ln-hero > .ln-wrap { position: relative; }

.ln-hero__wordmark {
  width: clamp(190px, 20vw, 264px);
  height: auto;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.ln-hero__lead {
  max-width: 56ch;
  margin-top: 1.35rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--wk-ink-soft);
  text-wrap: pretty;
}

.ln-hero__actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.ln-hero__anchor {
  font-family: var(--wk-data);
  font-size: 0.75rem;
  font-variation-settings: 'wdth' 90;
  letter-spacing: 0.02em;
  color: var(--wk-ink-soft);
}

/* --------------------------------------------------------------------------
   Rótulos de sección: la etiqueta de un campo de formulario

   Mono, versalitas y una raya corta delante. Es el gesto que más barato
   convierte una página en un impreso.
   -------------------------------------------------------------------------- */
.ln-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-family: var(--wk-data);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wk-ink-soft);
}

.ln-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  flex: none;
  background: var(--wk-stamp);
}

.ln-eyebrow:empty { display: none; }

.ln-section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--wk-rule); }
.ln-hero + .ln-section,
.ln-proof + .ln-section { border-top: 0; }

.ln-section__lead {
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--wk-ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   La prueba: una captura grande justo después del hero
   -------------------------------------------------------------------------- */
.ln-proof { padding: clamp(3rem, 7vw, 5rem) 0; }

.ln-proof__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  align-items: center;
}

.ln-proof__shot { margin: 0; }

@media (max-width: 820px) {
  .ln-proof__layout { grid-template-columns: minmax(0, 1fr); }
  .ln-proof__shot { max-width: 300px; }
}

/* El marco de las capturas.

   Las pantallas de la aplicación son casi blancas y el papel de esta página
   también: sin marco se derramarían sobre el fondo y no se sabría dónde acaba
   la captura. Un filo de un píxel y una sombra corta bastan; lo que NO se hace
   es cambiar el color de la página ni el de la app para forzar el contraste. */
.ln-proof__shot img,
.ln-tour__shot {
  border: 1px solid var(--wk-rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wk-surface);
  box-shadow: 0 1px 0 rgba(12, 34, 56, 0.04), 0 14px 30px -18px rgba(12, 34, 56, 0.4);
}

.ln-tour__shot img { border-radius: 13px; }

/* --------------------------------------------------------------------------
   Listas, pasos y fichas
   -------------------------------------------------------------------------- */
.ln-list {
  max-width: 62ch;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.ln-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.9rem;
  border-top: 1px solid var(--wk-rule);
  color: var(--wk-ink-soft);
}

.ln-list li:last-child { border-bottom: 1px solid var(--wk-rule); }

/* Una casilla sin marcar delante de cada problema: lo que hoy no está hecho. */
.ln-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 11px;
  height: 11px;
  border: 1px solid var(--wk-ink-soft);
  border-radius: 1px;
}

.ln-steps {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
  counter-reset: paso;
}

.ln-steps li {
  counter-increment: paso;
  padding-top: 2.6rem;
  border-top: 2px solid var(--wk-ink);
  position: relative;
}

.ln-steps li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0.9rem;
  left: 0;
  font-family: var(--wk-data);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 88;
  color: var(--wk-stamp-ink);
}

.ln-steps p { margin: 0; color: var(--wk-ink-soft); }

.ln-features,
.ln-fit {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin: 2rem 0 0;
}

.ln-features dt,
.ln-fit dt {
  margin-bottom: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wk-rule);
  font-weight: 800;
  letter-spacing: -0.012em;
}

.ln-features dd,
.ln-fit dd { margin: 0; color: var(--wk-ink-soft); }

/* --------------------------------------------------------------------------
   La jornada, dibujada

   Sobre una lista ordenada y con CSS, no con un SVG: el contenido sigue siendo
   texto —lo lee un buscador y lo lee un lector de pantalla en orden— y el
   dibujo es solo la capa de encima.

   Los nodos son CUADRADOS y no círculos. En una página que imita un impreso,
   un cuadradito es una casilla; un círculo sería un adorno.
   -------------------------------------------------------------------------- */
.ln-line {
  --wk-nodo: 13px;
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  position: relative;
  padding: 0;
  margin: 2.5rem 0 0;
  list-style: none;
}

.ln-line::before {
  content: '';
  position: absolute;
  top: calc(var(--wk-nodo) / 2);
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right,
    var(--wk-rule) 0 7px, transparent 7px 12px);
}

.ln-line__step { position: relative; padding-top: calc(var(--wk-nodo) + 1.15rem); }

.ln-line__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--wk-nodo);
  height: var(--wk-nodo);
  border: 2px solid var(--wk-stamp);
  border-radius: 1px;
  background: var(--wk-paper);
}

.ln-line__step:last-child .ln-line__dot { background: var(--wk-stamp); }

.ln-line h3 { margin-bottom: 0.3rem; }
.ln-line p { margin: 0; font-size: 0.9375rem; color: var(--wk-ink-soft); }

@media (max-width: 720px) {
  .ln-line { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ln-line::before { top: 0; bottom: 0; left: calc(var(--wk-nodo) / 2); right: auto; width: 1px; height: auto;
    background: repeating-linear-gradient(to bottom, var(--wk-rule) 0 7px, transparent 7px 12px); }
  .ln-line__step { padding: 0 0 0 calc(var(--wk-nodo) + 1.15rem); }
}

/* --------------------------------------------------------------------------
   El recorrido por la aplicación
   -------------------------------------------------------------------------- */
/* 300px y no 250: con 250 caben cuatro columnas justas en la anchura de la
   página, y son cinco capturas, así que la quinta se quedaba sola en una fila
   con tres huecos al lado. A tres columnas quedan 3 + 2, y de paso las
   pantallas se ven un tercio más grandes. */
.ln-tour {
  display: grid;
  gap: 3rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 2.5rem;
}

.ln-tour__item { margin: 0; }
.ln-tour__shot { transition: transform 0.4s var(--wk-ease), box-shadow 0.4s var(--wk-ease); }

.ln-tour__item:hover .ln-tour__shot {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(12, 34, 56, 0.04), 0 22px 40px -20px rgba(12, 34, 56, 0.45);
}

.ln-tour figcaption { padding-top: 1.1rem; }
.ln-tour figcaption h3 { margin-bottom: 0.3rem; }
.ln-tour figcaption p { margin: 0; font-size: 0.9375rem; color: var(--wk-ink-soft); }

/* --------------------------------------------------------------------------
   El impreso oficial

   La pieza que sostiene el segundo acto de la página. Es una hoja de papel
   sobre el papel: fondo más claro, filo, sombra corta y un sello verde girado.

   La tabla se desplaza sola en horizontal dentro de su caja en pantallas
   estrechas. Nunca desplaza la página: siete columnas no caben en un móvil y
   la alternativa —encogerlas hasta que quepan— haría ilegible justo lo que
   esta sección tiene que demostrar.
   -------------------------------------------------------------------------- */
.ln-impreso {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .ln-impreso { grid-template-columns: minmax(0, 1fr); }
}

.ln-impreso__hoja {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--wk-surface);
  border: 1px solid var(--wk-rule);
  border-radius: var(--wk-radius);
  box-shadow: 0 1px 0 rgba(12, 34, 56, 0.05), 0 18px 36px -24px rgba(12, 34, 56, 0.5);
}

/* El sello. Verde de marca con la TINTA encima: 6.23:1. En blanco se quedaría
   en 2.59:1 y suspendería, que es el motivo de que no sea blanco. */
.ln-impreso__sello {
  position: absolute;
  top: -0.85rem;
  right: clamp(0.75rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0.3rem 0.7rem;
  transform: rotate(-2.5deg);
  background: var(--wk-stamp);
  color: var(--wk-ink);
  border-radius: 2px;
  font-family: var(--wk-data);
  font-size: 0.625rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ln-impreso__scroll { overflow-x: auto; }

.ln-impreso__tabla {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-family: var(--wk-data);
  font-size: 0.6875rem;
  font-variation-settings: 'wdth' 85;
  font-variant-numeric: tabular-nums;
}

.ln-impreso__caption {
  caption-side: top;
  padding-bottom: 0.9rem;
  text-align: left;
  font-family: var(--wk-body);
  font-size: 0.8125rem;
  color: var(--wk-ink-soft);
}

.ln-impreso__tabla th,
.ln-impreso__tabla td {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--wk-rule);
  text-align: left;
  white-space: nowrap;
}

.ln-impreso__tabla thead th {
  background: rgba(12, 34, 56, 0.045);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.5938rem;
}

.ln-impreso__tabla tbody th { font-weight: 700; }
.ln-impreso__tabla tbody td { color: var(--wk-ink-soft); }

.ln-impreso__firmas {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.ln-impreso__firmas span {
  flex: 1;
  padding-top: 2.4rem;
  border-top: 1px solid var(--wk-ink);
  font-family: var(--wk-data);
  font-size: 0.5938rem;
  font-variation-settings: 'wdth' 85;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wk-ink-soft);
}

.ln-impreso__lleva { margin: 0; display: grid; gap: 1.4rem; }
.ln-impreso__lleva dt { font-weight: 800; margin-bottom: 0.25rem; }
.ln-impreso__lleva dd { margin: 0; font-size: 0.9375rem; color: var(--wk-ink-soft); }

/* --------------------------------------------------------------------------
   La banda a sangre

   Una fotografía entre los dos actos de la página. Va a sangre porque una
   banda que respeta la columna deja de ser una banda.

   La capa de encima no es decorativa: es lo que garantiza el contraste del
   titular sobre una imagen cuyos píxeles no se controlan. El peor caso —un
   píxel blanco bajo la capa— está en scripts/check_contrast.py.
   -------------------------------------------------------------------------- */
.ln-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 34vw, 400px);
  overflow: hidden;
}

.ln-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: -2;
}

/* 0,68 en el punto más claro, y no más. Por debajo, el titular no llega a
   4,5:1 sobre el píxel más claro que aporta esta fotografía —que tiene blanco
   puro en la esfera del reloj—; por encima, la capa se come la fotografía
   entera, porque el sujeto es una máquina negra. A 0,78 la banda salía como un
   rectángulo azul liso: se veía mirándola, no en ningún test. */
.ln-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(12, 34, 56, 0.80) 0%,
    rgba(12, 34, 56, 0.68) 50%,
    rgba(12, 34, 56, 0.82) 100%);
}

.ln-banner h2 {
  margin: 0;
  max-width: 22ch;
  color: var(--wk-paper);
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
}

.ln-banner .ln-wrap { position: relative; display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   El plan

   La tarjeta la comparten las tres landings y la página de contratación. Aquí
   se viste como el recuadro de importe de una factura: filo, cabecera reglada
   y la cifra en la mono de los datos.
   -------------------------------------------------------------------------- */
.ln-plan {
  max-width: 620px;
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--wk-surface);
  border: 1px solid var(--wk-rule);
  border-top: 3px solid var(--wk-ink);
  border-radius: var(--wk-radius);
  box-shadow: 0 1px 0 rgba(12, 34, 56, 0.05), 0 18px 36px -26px rgba(12, 34, 56, 0.5);
}

.ln-plan__price {
  margin: 0;
  font-family: var(--wk-data);
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 85;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ln-plan__gross {
  margin: 0.55rem 0 0;
  font-family: var(--wk-data);
  font-size: 0.6875rem;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.02em;
  color: var(--wk-ink-soft);
}

.ln-plan__unit {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wk-rule);
  color: var(--wk-ink-soft);
}

.ln-plan__includes {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.65rem;
}

.ln-plan__includes li { display: flex; gap: 0.7rem; align-items: baseline; }
.ln-plan__tick { color: var(--wk-stamp-ink); font-weight: 700; flex: none; }

.ln-plan__cta {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.85rem 1.9rem;
  background: var(--wk-ink);
  color: var(--wk-paper);
  border-radius: var(--wk-radius);
  font-family: var(--wk-data);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s var(--wk-ease), background 0.25s var(--wk-ease);
}

.ln-plan__cta:hover { transform: translateY(-2px); background: #143252; color: var(--wk-paper); }
.ln-plan__cta:active { transform: translateY(0); }

.ln-hero .ln-plan__cta { margin-top: 0; }

/* El aviso de acceso anticipado, dentro de la oferta y no en letra pequeña al
   final: se cobra un año por adelantado de algo que aún no está en manos de
   nadie, y eso es parte de lo que se contrata. */
.ln-early {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: var(--wk-paper);
  border: 1px dashed var(--wk-rule);
  border-radius: var(--wk-radius);
  font-size: 0.9375rem;
  color: var(--wk-ink-soft);
}

.ln-early__title {
  margin: 0 0 0.6rem;
  font-family: var(--wk-data);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wk-stamp-ink);
}

.ln-early ul { margin: 0.5rem 0 1rem; padding-left: 1.1rem; }
.ln-early li { margin-bottom: 0.35rem; }
.ln-early__clock { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--wk-rule); }

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */
.ln-faq { border-top: 1px solid var(--wk-rule); padding: 1.1rem 0; max-width: 68ch; }
.ln-faq:last-of-type { border-bottom: 1px solid var(--wk-rule); }
.ln-faq summary { cursor: pointer; font-weight: 700; list-style-position: outside; }
.ln-faq summary::marker { color: var(--wk-stamp); }
.ln-faq p { margin: 0.8rem 0 0; color: var(--wk-ink-soft); }

/* --------------------------------------------------------------------------
   La contratación
   -------------------------------------------------------------------------- */
.ln-contract {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  margin-top: 2rem;
}

.ln-form { display: grid; gap: 1.2rem; }
.ln-field { display: grid; gap: 0.35rem; }

.ln-field label {
  font-family: var(--wk-data);
  font-size: 0.625rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 88;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wk-ink-soft);
}

.ln-field__input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font: inherit;
  color: var(--wk-ink);
  background: var(--wk-surface);
  border: 1px solid var(--wk-rule);
  border-radius: var(--wk-radius);
}

.ln-field__input:focus-visible {
  outline: 2px solid var(--wk-stamp-ink);
  outline-offset: 1px;
  border-color: var(--wk-stamp-ink);
}

.ln-field__error,
.ln-form__error { margin: 0; font-size: 0.875rem; color: #b3261e; }
.ln-form__note { font-size: 0.875rem; color: var(--wk-ink-soft); }

/* --------------------------------------------------------------------------
   El pie de la sociedad
   -------------------------------------------------------------------------- */
.ln-foot {
  padding: 3rem 0;
  border-top: 1px solid var(--wk-rule);
  font-size: 0.875rem;
  color: var(--wk-ink-soft);
}

.ln-foot__legal { max-width: 70ch; }

.ln-foot__links {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ln-foot__return {
  font-family: var(--wk-data);
  font-size: 0.6875rem;
  font-variation-settings: 'wdth' 90;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Movimiento

   Todo lo de aquí abajo es progresivo. Nada se esconde esperando a un guion:
   si GSAP no carga, la clase `gsap` no se pone y manda este CSS; si el
   navegador tampoco entiende `animation-timeline`, no se esconde nada en
   absoluto y la página se lee entera.
   ========================================================================== */

@keyframes wk-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* `html:not(.gsap)`: landings.js pone esa clase en cuanto GSAP está
   disponible, y entonces la entrada la hace él —además partiendo el titular
   por líneas—. Sin la condición, las dos capas animarían el mismo elemento a
   la vez y el titular se quedaba congelado a opacidad 0. Pasó de verdad, y no
   lo detectó ningún test: hizo falta abrir la página y mirarla. */
html:not(.gsap) .ln-hero__wordmark,
html:not(.gsap) .ln-hero .ln-eyebrow,
html:not(.gsap) .ln-hero h1,
html:not(.gsap) .ln-hero__lead,
html:not(.gsap) .ln-hero__actions {
  animation: wk-rise var(--wk-slow) var(--wk-ease) both;
}

html:not(.gsap) .ln-hero .ln-eyebrow { animation-delay: 60ms; }
html:not(.gsap) .ln-hero h1          { animation-delay: 120ms; }
html:not(.gsap) .ln-hero__lead       { animation-delay: 200ms; }
html:not(.gsap) .ln-hero__actions    { animation-delay: 280ms; }

/* Revelado al hacer scroll, sin una línea de JavaScript. `animation-timeline:
   view()` lo resuelve el compositor, así que no puede provocar tirones. Va
   dentro de @supports porque donde no exista, el contenido tiene que salir
   visible sin más: jamás oculto esperando un evento que no va a llegar. */
@supports (animation-timeline: view()) {
  html:not(.gsap) .ln-section > .ln-wrap {
    animation: wk-rise 1ms var(--wk-ease) both;
    animation-timeline: view();
    animation-range: entry 12% entry 62%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}