/* ==========================================================================
   LANDING — "EcoPrecision Analytical"
   Estructura del diseño de referencia (landingref/stitch_eco_tech_landing_evolution),
   con la tipografía y la paleta del sitio (site.css) para que la portada no
   desentone del header, el footer ni del resto de páginas.

   El diseño original venía maquetado con Tailwind por CDN. Este proyecto no
   compila CSS (ver README), así que está escrito a mano.

   De la referencia se conserva la ESTRUCTURA —retícula, mosaico, carril de
   fases, panel oscuro de métricas, reglas de 1px— y se descartan sus colores
   y fuentes (negro + Inter + JetBrains Mono) en favor de los del sitio: verde
   bosque, Manrope y DM Mono.

   Sin sombras salvo las del propio sistema de botones: la jerarquía se
   construye con capas tonales y reglas de 1px ("technical rulers").

   Ámbito: todo cuelga de .lp para no colisionar con site.css, que sigue
   sirviendo al header, el footer y el resto del sitio.
   ========================================================================== */

.lp {
  /* ── Color ─────────────────────────────────────────────────────────────
     Los nombres del diseño original se mantienen como alias, pero apuntan a
     los tokens de site.css: así la landing comparte paleta exacta con el
     header, el footer y el resto de páginas. Cambiar un color del sitio lo
     cambia también aquí.                                                   */
  --surface: var(--surface-1);                  /* blanco                  */
  --surface-warm: var(--surface-2);             /* gris muy claro, alterno */
  --surface-container-lowest: var(--surface-1); /* tarjetas                */
  --surface-container-low: var(--surface-2);    /* banda alterna           */
  --surface-container: var(--forest-900);       /* pie                     */
  --surface-container-highest: var(--surface-3);
  --on-surface: var(--ink);
  --on-surface-variant: var(--muted);
  --outline: var(--muted);
  --outline-soft: var(--line);              /* reglas de 1px         */
  --outline-technical: var(--muted);
  --primary: var(--forest-900);             /* negro → verde bosque  */
  --on-primary: #ffffff;
  --primary-container: var(--forest-700);
  --secondary: var(--leaf-d);
  --secondary-container: var(--leaf);       /* CTA sólido            */
  --on-secondary-container: #ffffff;
  --secondary-fixed: var(--leaf-2);         /* acento sobre oscuro   */
  --accent: var(--leaf-d);                  /* kickers y etiquetas   */

  /* ── Espaciado ─────────────────────────────────────────────────────── */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 48px;
  --margin-desktop: 24px;  /* mismo canal lateral que .wrap del sitio */
  --gutter: 24px;
  --maxw: var(--wrap);     /* 1220px: alinea con el nav y el footer   */

  /* ── Tipografía ────────────────────────────────────────────────────────
     Manrope en toda la portada, igual que en el resto del sitio: una única
     familia para titulares, texto y etiquetas.                             */
  --font-sans: 'Manrope', sans-serif;
  --font-title: 'Manrope', sans-serif;
  --font-label: 'Manrope', sans-serif;

  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  /* Sin tamaño propio: hereda el del sitio para que la portada componga
     exactamente igual que /servicios, /nosotros y el resto. */
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* site.css asigna su familia a h1–h6 con un selector de elemento, que gana a
   la herencia de .lp; se reafirma aquí la del sistema. */
.lp h1,
.lp h2,
.lp h3,
.lp h4,
.lp h5,
.lp h6 {
  font-family: var(--font-title);
  letter-spacing: -.025em;
}

.lp img { display: block; max-width: 100%; }

/* Contenedor: ancho fijo con márgenes amplios (rejilla fija-fluida). */
.lp-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}

.lp-section { padding: var(--xl) 0; }

/* ── Tipografía del sistema ─────────────────────────────────────────── */

/* Etiquetas: misma familia que el resto de la portada, en versales y con el
   tracking abierto para que sigan leyéndose como rótulo. */
.lp-label {
  font-family: var(--font-label);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Titular del hero: más grande que el resto de titulares — el hero ocupa la
   pantalla completa y el texto debe llenarla, no flotar pequeño en el centro. */
.lp-display-lg {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}

/* Titulares de sección: mismas métricas que .section-head h2. */
.lp-display-md {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.018em;
  margin: 0;
}

.lp-headline {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  margin: 0;
}

/* Nunca se parten palabras: ninguna línea termina en guion. El interlineado
   sube un punto, que con renglones largos se lee mejor. */
.lp-body {
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
  hyphens: none;
}

/* Justificado SOLO en los párrafos que ocupan el ancho de la sección.
   Sin partir palabras, el margen derecho recto se paga estirando los espacios,
   y eso únicamente sale gratis cuando en el renglón caben muchas palabras. En
   una columna estrecha el mismo ajuste abre huecos entre palabras, así que ahí
   se deja bandera a la derecha. */
.lp-model-text,
.lp-method-intro,
.lp-eco-intro,
.lp-ecorregiones-text .lp-body {
  text-align: justify;
  text-justify: inter-word;
}

/* El hero y el CTA final centran su texto sobre la foto. */
.lp-hero-sub,
.lp-cta-inner .lp-body {
  text-align: center;
}

.lp-muted { color: var(--on-surface-variant); }
.lp-tech  { color: var(--outline-technical); }

/* Enlace de texto con subrayado fino: el "ver más" de las cabeceras. */
.lp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  font-size: .95rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.lp-link:hover { color: var(--blue-d); }
.lp-link::after { content: '→'; font-weight: 400; }

/* ── Botones ────────────────────────────────────────────────────────── */

/* Botones: mismas métricas que .btn de site.css (Manrope 600, .95rem,
   radio 2px). Se abandona el mono en versales del diseño original para que un
   botón de la landing sea idéntico a uno de cualquier otra página. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: .16s;
}

/* Verde hoja, como .btn-primary. */
.lp-btn--solid { background: var(--leaf); color: #fff; }
.lp-btn--solid:hover { background: var(--leaf-d); box-shadow: 0 8px 20px -10px rgba(46, 110, 50, .55); }

.lp-btn--light { background: #fff; color: var(--forest-800); }
.lp-btn--light:hover { background: var(--leaf-soft); color: var(--leaf-d); }

/* Vidrio sobre foto: el paisaje se ve a través, difuminado. */
.lp-btn--glass {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.lp-btn--glass:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .8);
}

.lp-btn--mint { background: var(--leaf); color: #fff; }
.lp-btn--mint:hover { background: var(--leaf-d); box-shadow: 0 8px 20px -10px rgba(46, 110, 50, .55); }

/* ══════════════════════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════════════════════ */

.lp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Foto propia: sierra mexicana, tal cual es. La ruta es relativa a public/css,
   así que sigue resolviendo aunque el sitio cuelgue de un subdirectorio. */
.lp-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/paisaje.jpg');
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.04);
  animation: lp-hero-zoom 18s ease-out forwards;
}

/* Velo sobre la foto para que el texto y los botones destaquen. Es un
   degradado, no un tinte plano: carga en el centro —donde va el contenido— y
   se abre arriba y abajo, así el paisaje sigue leyéndose en los bordes. */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 20, 12, .62) 0%, rgba(6, 20, 12, .30) 28%,
                            rgba(6, 20, 12, .34) 72%, rgba(6, 20, 12, .70) 100%),
    radial-gradient(78% 62% at 50% 50%, rgba(6, 20, 12, .62), transparent 82%);
}

@keyframes lp-hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.lp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  padding: 120px var(--md) var(--xl);
  text-align: center;
  color: #fff;
}

.lp-hero-eyebrow {
  color: var(--secondary-fixed);
  letter-spacing: 0.3em;
  margin: 0 0 var(--md);
}

.lp-hero h1 {
  color: #fff;
  margin-bottom: var(--lg);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(6, 20, 12, .8), 0 1px 4px rgba(6, 20, 12, .6);
}

/* Verde claro, no el de marca: sobre foto oscura el --leaf-d no contrasta. */
.lp-hero h1 .lp-verde { color: var(--leaf-2); }

.lp-hero-sub {
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .95);
  max-width: 62ch;
  margin: 0 auto var(--xl);
  text-shadow: 0 1px 14px rgba(6, 20, 12, .85), 0 1px 3px rgba(6, 20, 12, .55);
}

.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  justify-content: center;
}

/* Coordenadas ancladas abajo a la izquierda: firma "de instrumento". */
.lp-hero-coords {
  position: absolute;
  bottom: var(--lg);
  left: var(--margin-desktop);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sm);
  color: rgba(255, 255, 255, .6);
}

.lp-hero-coords .material-symbols-outlined { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   2. ALIADOS
   ══════════════════════════════════════════════════════════════════════ */

.lp-allies {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--outline-soft);
}

/* Dos columnas, como la sección de misión: la rejilla de logos a un lado y el
   mensaje al otro, en vez de una franja estrecha de logos atenuados. */
.lp-allies-grid-wrap {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Los logos en filas y columnas, cada uno en su celda. */
.lp-allies-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--md);
}

/* ── La rejilla se reacomoda sola según cuántos aliados haya ───────────────
   `:has()` cuenta los hijos, así que los saltos ocurren en el navegador: el
   servidor no calcula nada y no hace falta JavaScript. Al publicar un aliado
   más desde el panel, la sección se reordena sola.

   Hasta 6 los logos van junto al texto, en tres columnas y a tamaño completo:
   ahí la columna mide 642px y cada tarjeta queda en 203px.

   Del séptimo en adelante esa columna se queda corta —seis logos dentro de
   642px salen a 94px cada uno, ilegibles—, así que la sección pasa a ancho
   completo: el texto sube y los logos forman un muro de seis por fila a 190px,
   que es más de lo que tenían antes.

   Del decimotercero en adelante bajan un escalón más y caben ocho por fila, a
   138px. Ese es el tope: por debajo el logo deja de reconocerse, así que a
   partir de ahí la rejilla ya no encoge, solo añade filas. */

/* 7 o más: la sección deja de ser de dos columnas. */
.lp-allies-grid-wrap:has(.lp-allies-logos > :nth-child(7)) {
  grid-template-columns: 1fr;
  gap: var(--xl);
}

/* El texto pasa a encabezar el muro en lugar de quedar debajo de él. */
.lp-allies-grid-wrap:has(.lp-allies-logos > :nth-child(7)) .lp-allies-text { order: -1; }

.lp-allies-logos:has(> :nth-child(7)) { grid-template-columns: repeat(6, 1fr); }

.lp-allies-logos:has(> :nth-child(7)) .lp-ally {
  min-height: 112px;
  padding: var(--md) var(--sm);
}

.lp-allies-logos:has(> :nth-child(7)) .lp-ally img { max-height: 44px; }

/* 13 o más: último escalón de tamaño. */
.lp-allies-logos:has(> :nth-child(13)) { grid-template-columns: repeat(8, 1fr); }

.lp-allies-logos:has(> :nth-child(13)) .lp-ally {
  min-height: 96px;
  gap: 6px;
}

.lp-allies-logos:has(> :nth-child(13)) .lp-ally img { max-height: 36px; }

.lp-allies-logos:has(> :nth-child(13)) .lp-ally-name {
  font-size: .78rem;
  line-height: 1.25;
}

.lp-ally {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  min-height: 128px;
  padding: var(--lg) var(--md);
  background: var(--surface-1);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}

a.lp-ally:hover {
  border-color: var(--leaf);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -20px rgba(16, 40, 24, .45);
}

/* Escala de grises en reposo y a color al pasar: los logos no compiten con la
   página pero se ven íntegros al fijarse en ellos. */
.lp-ally img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}

a.lp-ally:hover img { transform: scale(1.04); }

/* El nombre acompaña siempre al logo; si no hay logo, queda él solo. */
.lp-ally-name {
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--on-surface-variant);
  transition: color .25s;
}

a.lp-ally:hover .lp-ally-name { color: var(--leaf-d); }

.lp-allies-text h2 { margin-bottom: var(--md); }

/* Aviso para el administrador cuando no hay aliados cargados. */
.lp-allies-empty {
  margin: 0;
  padding: var(--lg);
  border: 1px dashed var(--outline-soft);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════════════
   MODELO DE NEGOCIO
   ══════════════════════════════════════════════════════════════════════ */

.lp-model { background: var(--surface); }

.lp-model h2 { margin-bottom: var(--md); }

/* Texto corrido tal cual, en párrafos: sin tarjetas ni listas. Sin tope de
   medida —ocupa el ancho de la sección, como el resto de bloques de texto. */
.lp-model-text { margin: 0 0 var(--md); }
.lp-model-text:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   4. MISIÓN
   ══════════════════════════════════════════════════════════════════════ */

.lp-mission { background: var(--surface); }

/* Mitad y mitad: con 7fr para la foto, el texto de la misión quedaba en una
   columna estrecha que partía las frases cada pocas palabras. */
.lp-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xl);
  align-items: center;
}

.lp-mission-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lp-mission-media img { width: 100%; height: 100%; object-fit: cover; }

/* Placa sólida sobre la foto: ancla el bloque y da el acento "documento". */
/* Vidrio oscuro: deja entrever la foto y no la corta en seco. */
.lp-mission-badge {
  position: absolute;
  bottom: var(--md);
  left: var(--md);
  right: var(--md);
  max-width: 24rem;
  padding: var(--md) var(--lg);
  border-radius: var(--radius);
  background: rgba(12, 30, 20, .58);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: #fff;
}

.lp-mission-badge p { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.45; }

.lp-mission-body { display: flex; flex-direction: column; gap: var(--lg); }

/* Regla vertical gruesa a la izquierda del titular. */
.lp-mission-body h2 {
  border-left: 4px solid var(--primary);
  padding-left: var(--md);
}


/* ══════════════════════════════════════════════════════════════════════
   4. SERVICIOS
   ══════════════════════════════════════════════════════════════════════ */

.lp-services { background: var(--surface-warm); }

.lp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--md) var(--lg);
  margin-bottom: var(--xl);
}

.lp-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.lp-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-soft);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .5s;
}

.lp-card:hover { border-color: var(--leaf); }

.lp-card-media { height: 12rem; overflow: hidden; }

/* Marcador para entradas sin foto: inicial sobre fondo teñido. */
.lp-card-media--empty {
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border-bottom: 1px solid var(--outline-soft);
}

.lp-card-media--empty span {
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--muted);
  opacity: .55;
}

.lp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}

.lp-card:hover .lp-card-media img { transform: scale(1.05); }

.lp-card-body { padding: var(--lg); }
.lp-card-body > .lp-label { color: var(--accent); margin: 0 0 var(--xs); }
.lp-card-body h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.3; margin: 0 0 var(--md); }

/* Descripción en mono pequeño, recortada a 3 líneas: densidad de ficha. */
.lp-card-date {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--outline-technical);
  margin: var(--md) 0 0;
}

.lp-card-desc {
  font-family: var(--font-sans);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--on-surface-variant);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   5. PROTOCOLO
   Rejilla, no carril: con scroll horizontal la última fase quedaba fuera de
   pantalla y el protocolo parecía tener una fase menos de las que tiene.
   ══════════════════════════════════════════════════════════════════════ */

.lp-method {
  background: var(--surface-container-low);
  border-top: 1px solid var(--outline-soft);
  border-bottom: 1px solid var(--outline-soft);
}

.lp-method h2 { margin-bottom: var(--md); }

/* Párrafo ESG bajo el título, antes de las tarjetas de fase. */
.lp-method-intro { margin: 0 0 var(--xl); }

/* Las cinco fases usan la misma tarjeta que los servicios: caja blanca con
   borde de 1px que se tiñe de verde al pasar el cursor, y una fotografía de la
   etapa en la cabecera. */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
}

/* Cabecera con foto: mismo tratamiento que la «media» de los servicios, algo
   más baja porque la tarjeta de fase es estrecha (cinco por fila). */
.lp-step-media {
  height: 9rem;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--outline-soft);
}

.lp-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.lp-card.lp-step:hover .lp-step-media img { transform: scale(1.05); }

/* Una fase no navega a ningún sitio: no se eleva como las tarjetas enlazadas. */
.lp-card.lp-step:hover { transform: none; box-shadow: none; }

/* Las fases son cortas y deben leerse enteras: sin el recorte a 3 líneas que
   sí tiene sentido en las tarjetas de servicio, donde el texto es variable. */
.lp-step .lp-card-desc {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════════
   6. ECOSISTEMAS (mosaico)
   ══════════════════════════════════════════════════════════════════════ */

.lp-eco { background: var(--surface); }
.lp-eco h2 { margin-bottom: var(--xl); }

/* Áreas explícitas en vez de alto fijo: con el texto fuera de la foto cada
   pieza mide lo que mida su contenido, y un `height` cerrado hacía que el pie
   se saliera de la rejilla y pisara el párrafo de fuentes. */
.lp-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "xl xl ancha ancha"
    "xl xl uno   dos";
  gap: var(--xl) var(--lg);
  align-items: start;
}

/* Cada pieza son dos bloques separados: la foto y, DEBAJO Y FUERA de ella, el
   texto sobre el fondo de la sección. Nada de rótulos encima de la imagen. */
.lp-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: none;
}

/* La primera pieza ocupa el cuadrante 2×2. */
.lp-tile--xl { grid-area: xl; }
.lp-tile--wide { grid-area: ancha; }
.lp-mosaic > .lp-tile:nth-child(3) { grid-area: uno; }
.lp-mosaic > .lp-tile:nth-child(4) { grid-area: dos; }

.lp-tile-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}

/* La pieza grande es vertical; la ancha, apaisada. */
.lp-tile--xl .lp-tile-media { aspect-ratio: 3 / 4; }
.lp-tile--wide .lp-tile-media { aspect-ratio: 16 / 9; }

.lp-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s;
}

.lp-tile:hover .lp-tile-media img { transform: scale(1.06); }

/* Texto fuera de la foto: sin fondo propio, con una regla fina que lo ancla. */
.lp-tile-caption {
  flex: none;
  padding: var(--md) 0 0;
  margin-top: var(--md);
  border-top: 2px solid var(--leaf);
  color: var(--on-surface);
}

/* El párrafo de fuentes arranca en su propia fila, nunca solapado. */
.lp-sources { clear: both; }

/* La cifra manda: cuerpo grande y casi negro sobre el fondo claro. */
.lp-tile-caption .lp-label {
  display: block;
  margin: 0 0 var(--xs);
  color: var(--on-surface);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .03em;
}

.lp-tile--xl .lp-tile-caption .lp-label,
.lp-tile--wide .lp-tile-caption .lp-label { font-size: 1.45rem; }

.lp-tile-caption h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--blue);
}

.lp-tile--xl .lp-tile-caption h3,
.lp-tile--wide .lp-tile-caption h3 { font-size: 1.15rem; }

.lp-tile-text {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--on-surface-variant);
  margin: var(--sm) 0 0;
  max-width: 58ch;
}

/* Las piezas pequeñas solo muestran el dato y el nombre. */
.lp-tile:not(.lp-tile--xl):not(.lp-tile--wide) .lp-tile-text { display: none; }

.lp-eco-intro { margin: calc(var(--lg) * -1) 0 var(--xl); }

.lp-sources {
  margin: var(--lg) 0 0;
  padding-top: var(--md);
  border-top: 1px solid var(--outline-soft);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--outline-technical);
  max-width: 90ch;
}

/* ══════════════════════════════════════════════════════════════════════
   ECORREGIONES (mapa SEMARNAT)
   ══════════════════════════════════════════════════════════════════════ */

.lp-ecorregiones {
  background: var(--surface-warm);
  border-top: 1px solid var(--outline-soft);
}

.lp-ecorregiones h2 { margin-bottom: var(--lg); }

/* Título y texto a la izquierda, mapa a la derecha. El mapa se lleva la
   columna ancha: es un mapa de la República con siete regiones y su leyenda,
   y por debajo de cierto tamaño deja de leerse. `stretch` iguala la altura de
   las dos columnas. */
/* Hueco ancho entre columnas: separa el texto del mapa y empuja el mapa
   contra el margen derecho. La columna de texto se ensancha lo justo para que
   el justificado no abra huecos entre palabras. */
.lp-ecorregiones-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: stretch;
}

/* El texto ocupa toda la altura de la imagen y se centra dentro. */
.lp-ecorregiones-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-ecorregiones-map {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* El mapa lleva placa blanca y borde: el JPG trae fondo claro propio y así
   no «flota» sobre la banda gris de la sección. */
.lp-ecorregiones-map img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════════════════════════════
   8. DISCIPLINAS
   ══════════════════════════════════════════════════════════════════════ */

.lp-team { background: var(--surface-warm); }
.lp-team h2 { margin-bottom: var(--xl); }

.lp-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--xl); }

.lp-person { display: block; text-decoration: none; color: inherit; }

/* Desaturado por defecto, a color en hover: el gesto editorial del diseño. */
.lp-person-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--lg);
  filter: grayscale(1);
  transition: filter .5s;
}

.lp-person:hover .lp-person-media { filter: grayscale(0); }
.lp-person-media img { width: 100%; height: 100%; object-fit: cover; }

.lp-person h3 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--xs); }
.lp-person-role { color: var(--accent); margin: 0 0 var(--md); }
.lp-person p:last-child {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-surface-variant);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   9. CTA FINAL
   ══════════════════════════════════════════════════════════════════════ */

.lp-cta {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lp-cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/landing/cta-bosque.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: brightness(.5);
}

.lp-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  padding: var(--xl) var(--md);
  text-align: center;
  color: #fff;
}

.lp-cta-inner h2 { color: #fff; margin-bottom: var(--lg); text-wrap: balance; }
.lp-cta-inner p { color: rgba(255, 255, 255, .8); margin: 0 0 var(--xl); }

/* ══════════════════════════════════════════════════════════════════════
   10. CONTACTO
   ══════════════════════════════════════════════════════════════════════ */

.lp-contact { background: var(--surface-warm); border-top: 1px solid var(--outline-soft); }

.lp-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.lp-contact-info h2 { margin-bottom: var(--md); }
.lp-contact-info > p { max-width: 46ch; }

/* Datos de contacto: etiqueta mono arriba, valor debajo, regla de separación. */
.lp-contact-data { margin: var(--xl) 0 0; }

.lp-contact-data dt {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--outline-technical);
  padding-top: var(--md);
  border-top: 1px solid var(--outline-soft);
}

.lp-contact-data dd {
  margin: var(--xs) 0 var(--md);
  font-size: 1.02rem;
  color: var(--on-surface);
}

.lp-contact-data a { color: inherit; text-decoration: none; transition: color .2s; }
.lp-contact-data a:hover { color: var(--blue); }

/* ── Formulario ─────────────────────────────────────────────────────── */

.lp-form {
  display: grid;
  gap: var(--lg);
  align-content: start;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius);
}

.lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lg); }
.lp-field { display: flex; flex-direction: column; gap: var(--sm); }

.lp-field label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--outline-technical);
}

.lp-field label span { color: var(--leaf-d); }

.lp-field input,
.lp-field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--on-surface);
  transition: border-color .2s, box-shadow .2s;
}

.lp-field textarea { resize: vertical; min-height: 118px; }

.lp-field input::placeholder,
.lp-field textarea::placeholder { color: #9aa89e; }

.lp-field input:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 95, 180, .16);
}

.lp-form-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--md);
}

.lp-form-note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--outline-technical);
  max-width: 30ch;
}

.lp-alert {
  padding: var(--md);
  font-size: .92rem;
  line-height: 1.55;
  border: 1px solid;
  border-radius: var(--radius);
  margin: 0;
}

.lp-alert--ok  { border-color: var(--leaf); color: var(--forest-800); background: #f0f7ea; }
.lp-alert--err { border-color: #ba1a1a; color: #93000a; background: #ffdad6; }


/* ── Redes sociales del bloque de contacto ──────────────────────────── */

.lp-social { margin-top: var(--xl); }

.lp-social-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--outline-technical);
  margin: 0 0 var(--md);
  padding-top: var(--md);
  border-top: 1px solid var(--outline-soft);
}

.lp-social-row { display: flex; flex-wrap: wrap; gap: var(--md); }

/* Botones grandes con acabado de vidrio: el fondo se ve a través y se
   difumina, de modo que se integran con la sección en vez de recortarse. */
.lp-social-btn {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--forest-800);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow:
    0 4px 18px -8px rgba(20, 32, 26, .28),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), color .25s, box-shadow .3s, background .25s;
}

.lp-social-btn svg { width: 24px; height: 24px; display: block; }

.lp-social-btn:hover {
  transform: translateY(-3px);
  color: var(--blue);
  background: rgba(255, 255, 255, .78);
  box-shadow:
    0 12px 26px -12px rgba(20, 32, 26, .38),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.lp-social-empty {
  margin: 0;
  padding: var(--md);
  border: 1px dashed var(--outline-soft);
  border-radius: var(--radius);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════════════
   11. PIE
   ══════════════════════════════════════════════════════════════════════ */

/* Verde bosque sobre blanco translúcido: el mismo pie que .site-footer sirve
   en el resto de páginas, para que el cierre de la landing sea idéntico. */
/* El body del sitio es una columna flex; el pie propio de la portada también
   se empuja abajo, igual que .site-footer. */
.lp-footer {
  margin-top: auto;
  background: var(--forest-900);
  color: rgba(255, 255, 255, .72);
  padding: 60px 0 24px;
}

.lp-footer-grid { display: grid; grid-template-columns: 5fr 2fr 2fr 3fr; gap: var(--gutter); }

/* `max-height` y no `height`: con `height` fijo, un logo más pequeño que 40px
   se estiraba hasta ese alto y salía borroso, porque el navegador se inventa
   los píxeles que faltan. Así nunca se amplía por encima de su tamaño real;
   como mucho se reduce, que sí se ve nítido. */
.lp-footer-brand img { max-height: 40px; width: auto; margin-bottom: var(--md); }

.lp-footer-name {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: var(--md);
}

.lp-footer-legal {
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
  max-width: 30rem;
  margin: 0 0 var(--lg);
}

.lp-footer-social { display: flex; gap: var(--md); }
.lp-footer-social a { color: var(--leaf-2); text-decoration: none; transition: opacity .3s; }
.lp-footer-social a:hover { opacity: .65; }
.lp-footer-social svg { width: 20px; height: 20px; display: block; }

.lp-footer h5 { margin: 0 0 var(--md); font-size: .95rem; font-weight: 700; color: #fff; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sm); }

.lp-footer ul a {
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s;
}

.lp-footer ul a:hover { color: var(--leaf-2); }

.lp-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  padding-bottom: var(--xs);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}

.lp-footer-cta:hover { color: var(--leaf-2); border-bottom-color: var(--leaf-2); }
.lp-footer-note { font-size: .88rem; line-height: 1.7; color: rgba(255, 255, 255, .62); margin: var(--sm) 0 0; }

/* Cierre del pie: crédito de desarrollo. */
.lp-footer-foot {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 44px;
  padding-top: 20px;
}

.lp-footer-powered {
  display: flex;
  align-items: center;
  gap: var(--sm);
  margin: 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}

/* Placa blanca bajo el logo: el trazo verde oscuro de Emelit se perdería
   directamente sobre el verde bosque del pie. */
.lp-footer-powered img {
  height: 30px;
  width: auto;
  padding: 3px 8px;
  background: #fff;
  border-radius: var(--radius);
}


/* Navegadores sin backdrop-filter: se opacan los fondos para conservar el
   contraste del texto (el efecto se pierde, la legibilidad no). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-btn--glass    { background: rgba(255, 255, 255, .22); }
  .lp-mission-badge { background: rgba(12, 30, 20, .88); }
  .lp-social-btn    { background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANIMACIONES
   Entrada al entrar en pantalla. Todo parte de un estado visible: si el JS
   no corre, el contenido se ve igualmente (la clase .lp-anim solo la añade
   el script, y sin ella no hay ocultamiento).
   ══════════════════════════════════════════════════════════════════════ */

/* El script marca el documento; solo entonces se ocultan los elementos. */
.lp-anim [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .45s ease,
    transform .45s ease;
}

/* Escalonado por posición, sin estilos en línea: así el analizador CSS del
   editor no tropieza con la sintaxis de plantilla dentro de style="". */
/* El retardo se aplica solo al estado revelado: la entrada va escalonada y la
   salida es inmediata (si no, al salir de pantalla los bloques se desvanecerían
   con retraso y se vería como un tirón). */
.lp-anim .lp-grid-4 > [data-reveal].is-in:nth-child(2),
.lp-anim .lp-steps > [data-reveal].is-in:nth-child(2),
.lp-anim .lp-mosaic > [data-reveal].is-in:nth-child(2) { transition-delay: 80ms; }

.lp-anim .lp-grid-4 > [data-reveal].is-in:nth-child(3),
.lp-anim .lp-steps > [data-reveal].is-in:nth-child(3),
.lp-anim .lp-mosaic > [data-reveal].is-in:nth-child(3) { transition-delay: 160ms; }

.lp-anim .lp-grid-4 > [data-reveal].is-in:nth-child(4),
.lp-anim .lp-steps > [data-reveal].is-in:nth-child(4),
.lp-anim .lp-mosaic > [data-reveal].is-in:nth-child(4) { transition-delay: 240ms; }

.lp-anim .lp-grid-4 > [data-reveal].is-in:nth-child(n+5),
.lp-anim .lp-steps > [data-reveal].is-in:nth-child(n+5) { transition-delay: 320ms; }

.lp-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* Titulares: entran con un desplazamiento algo mayor. */
.lp-anim [data-reveal='title'] { transform: translateY(26px); }

/* Piezas del mosaico: además, la foto se asienta con una escala mínima. */
.lp-anim .lp-tile[data-reveal] .lp-tile-media img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.lp-anim .lp-tile[data-reveal].is-in .lp-tile-media img { transform: scale(1); }

/* ── Hero: entrada al cargar, sin esperar al scroll ─────────────────── */

.lp-hero-inner > * {
  opacity: 0;
  transform: translateY(22px);
  animation: lp-rise .9s cubic-bezier(.22, .61, .36, 1) forwards;
}

.lp-hero-inner > *:nth-child(1) { animation-delay: .12s; }
.lp-hero-inner > *:nth-child(2) { animation-delay: .26s; }
.lp-hero-inner > *:nth-child(3) { animation-delay: .40s; }

@keyframes lp-rise {
  to { opacity: 1; transform: none; }
}

/* ── Refuerzo de las interacciones de tarjeta ───────────────────────── */

.lp-card {
  transition: border-color .35s, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}

.lp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -22px rgba(16, 40, 24, .45);
}

.lp-card h3 { transition: color .25s; }
.lp-card:hover h3 { color: var(--blue); }

/* Subrayado que crece desde la izquierda en los enlaces de sección. */
.lp-link { position: relative; border-bottom-color: transparent; }

.lp-link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.lp-link:hover::before { transform: scaleX(.35); }

/* La fase del protocolo marca su regla superior al pasar el cursor. */
.lp-step { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.lp-step:hover { transform: translateY(-3px); }

/* Nadie se marea: con movimiento reducido, todo aparece sin desplazarse. */
@media (prefers-reduced-motion: reduce) {
  .lp-anim [data-reveal],
  .lp-anim [data-reveal].is-in,
  .lp-hero-inner > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .lp-hero-bg { animation: none; transform: none; }
  .lp-card:hover, .lp-step:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   La rejilla de 12 columnas colapsa a una sola, pero el padding se mantiene
   ajustado (16px) para conservar la densidad técnica.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .lp-wrap { padding: 0 var(--lg); }
  .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lp-team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--lg); }
  .lp-mission-grid { grid-template-columns: 1fr; }
  .lp-allies-grid-wrap { grid-template-columns: 1fr; }
  .lp-allies-logos { grid-template-columns: repeat(3, 1fr); }
  /* Los escalones por cantidad se repiten aquí porque `:has()` tiene más peso
     que el selector de clase suelto: sin esto, ocho columnas seguirían
     vigentes en una tableta. */
  .lp-allies-logos:has(> :nth-child(7))  { grid-template-columns: repeat(4, 1fr); }
  .lp-allies-logos:has(> :nth-child(13)) { grid-template-columns: repeat(5, 1fr); }
  .lp-impact-grid { grid-template-columns: 1fr; }
  .lp-impact-intro { border-right: 0; padding-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: var(--xl); }
  .lp-contact-grid { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); gap: var(--lg) var(--md); }
  .lp-ecorregiones-grid { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--xl) var(--lg); }
  .lp-hero-coords { left: var(--lg); }
  /* Dos columnas: las piezas ancha y grande pasan a ocupar la fila entera. */
  .lp-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'xl xl' 'ancha ancha' 'uno dos';
  }
  .lp-tile--xl .lp-tile-media { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .lp { font-size: 16px; }
  .lp-wrap { padding: 0 var(--md); }
  .lp-section { padding: 40px 0; }

  /* En una columna de móvil caben pocas palabras por renglón, así que
     justificar sin partir palabras abre huecos enormes. Se alinea a la
     izquierda: el borde derecho queda irregular, pero se lee bien. */
  .lp-model-text,
  .lp-method-intro,
  .lp-eco-intro,
  .lp-ecorregiones-text .lp-body { text-align: left; }
  .lp-grid-4 { grid-template-columns: 1fr; }
  .lp-team-grid { grid-template-columns: 1fr; }
  .lp-allies-logos { grid-template-columns: repeat(2, 1fr); }
  .lp-allies-logos:has(> :nth-child(7))  { grid-template-columns: repeat(2, 1fr); }
  .lp-allies-logos:has(> :nth-child(13)) { grid-template-columns: repeat(3, 1fr); }
  .lp-ally { min-height: 92px; padding: var(--md); }
  /* En móvil la tarjeta ya es pequeña por el ancho: no tiene sentido encogerla
     otro escalón por haber muchos aliados. */
  .lp-allies-logos:has(> :nth-child(7)) .lp-ally,
  .lp-allies-logos:has(> :nth-child(13)) .lp-ally { min-height: 92px; padding: var(--md); }
  .lp-allies-logos:has(> :nth-child(7)) .lp-ally img,
  .lp-allies-logos:has(> :nth-child(13)) .lp-ally img { max-height: 44px; }
  .lp-steps { grid-template-columns: 1fr; gap: var(--md); }
  /* A una columna la tarjeta ocupa todo el ancho: la foto necesita más alto
     para no quedar en una franja aplastada. */
  .lp-step-media { height: 12rem; }
  .lp-form { padding: var(--lg); }
  .lp-form-note { max-width: none; }
  .lp-section-head { flex-direction: column; align-items: flex-start; gap: var(--sm); }
  .lp-form-row { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr; }
  /* Una sola columna: cada pieza ocupa su propia fila. */
  .lp-mosaic {
    grid-template-columns: 1fr;
    grid-template-areas: 'xl' 'ancha' 'uno' 'dos';
    gap: var(--xl);
  }
  .lp-tile--xl .lp-tile-media,
  .lp-tile--wide .lp-tile-media { aspect-ratio: 4 / 3; }
  /* En una sola columna sí cabe la descripción de todas las piezas. */
  .lp-tile .lp-tile-text { display: block; }
  .lp-hero-coords { display: none; }
  .lp-btn { width: 100%; }
  /* background-attachment: fixed rinde mal en móvil (repintado por scroll). */
  .lp-cta-bg { background-attachment: scroll; }
}

/* ── Accesibilidad ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .lp-card:hover .lp-card-media img,
  .lp-tile:hover img { transform: none; }
}

.lp a:focus-visible,
.lp button:focus-visible,
.lp input:focus-visible,
.lp textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.lp-hero a:focus-visible,
.lp-cta a:focus-visible { outline-color: #fff; }