/* ── LANDINGS: que se puedan leer ──────────────────────────────────────────
   Las paginas de aterrizaje eran un muro de texto: parrafos sin separacion,
   lineas de 90 caracteres, secciones sin margen lateral que pegaban el texto
   al borde del movil, y ni una imagen. Esto lo arregla sin tocar el diseño
   del resto del sitio: solo actua dentro de <main>. */

/* 1 · MARGENES. .page-section llevaba "padding: X 0", o sea cero por los
   lados. Las que no envolvian su contenido en .container dejaban el texto
   tocando el borde de la pantalla. */
main > section,
main .lp-section,
main .page-section,
main .hero-small,
main .page-cta { padding-left: clamp(18px, 5vw, 64px); padding-right: clamp(18px, 5vw, 64px); }
/* Las secciones sin clase tampoco tenian aire arriba ni abajo */
main > section:not(.page-section):not(.hero-small):not(.page-cta) {
  padding-top: clamp(34px, 5.5vw, 64px); padding-bottom: clamp(34px, 5.5vw, 64px);
  max-width: 1320px; margin-left: auto; margin-right: auto;
}
main .page-section > .container,
main .page-cta > .container { padding-left: 0; padding-right: 0; }

/* Y el aire entre secciones era de hasta 140 px, que en un movil es media
   pantalla en blanco entre parrafo y parrafo. */
main .page-section { padding-top: clamp(44px, 7vw, 92px); padding-bottom: clamp(44px, 7vw, 92px); }

/* 2 · LA MEDIDA. Una linea de texto se lee mal por encima de unos 70
   caracteres: el ojo pierde el renglon al volver. */
main p, main li { max-width: 68ch; }

/* 3 · RITMO DEL TEXTO. Los parrafos iban pegados unos a otros. */
main p { margin: 0 0 1.15em; line-height: 1.75; }
main p:last-child { margin-bottom: 0; }
main h2 { margin: 0 0 .7em; line-height: 1.25; }
main h3 { margin: 1.8em 0 .5em; line-height: 1.35; font-size: 1.08rem; color: var(--crystal); }
main h3:first-child { margin-top: 0; }
main h2 + p, main h3 + p { margin-top: 0; }

/* 4 · LISTAS. Salian sin viñeta y sin separacion, como un parrafo cortado. */
main ul { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }
main ul li { margin: 0 0 .55em; padding-left: .2em; line-height: 1.7; }
main ul li::marker { color: var(--amethyst-glow); }
main ul li strong { color: var(--white); }

/* 5 · IMAGENES dentro del contenido */
main figure { margin: 1.8em 0; }
main figure img,
main img.landing-img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid rgba(var(--acento-rgb, 168,85,247), .22);
  background: var(--nebula);
}
main figcaption {
  margin-top: .6em; font-size: .82rem; line-height: 1.55;
  color: var(--silver); text-align: center; max-width: 60ch;
}
main figure.landing-media { margin-left: auto; margin-right: auto; max-width: 560px; }

/* En pantalla ancha, texto e imagen se reparten en vez de apilarse */
@media (min-width: 900px) {
  main .con-imagen { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
  main .con-imagen > figure { margin-top: 0; }
}

/* 6 · El boton de WhatsApp tapaba el ultimo boton de la pagina en el movil */
@media (max-width: 680px) { main .page-cta:last-child { padding-bottom: 96px; } }

/* 7 · ACCESIBILIDAD. Sin esto, quien navega con el teclado no ve donde esta. */
main a:focus-visible,
main button:focus-visible,
.whatsapp-float:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
main a { text-underline-offset: .18em; }
/* El enlace para saltar el menu: invisible hasta que se tabula */
.saltar-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--amethyst); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.saltar-contenido:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none !important; }
}