/* ══════════════════════════════════════════════════════════
   Strata Construcciones — hoja de estilos principal
   Organizada en bloques. Los colores se cambian todos juntos
   desde :root, más abajo no hace falta tocar nada.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Paleta — "strata" = capas de roca: grises piedra + ocre */
  --carbon:      #16181c;
  --carbon-alto: #22262c;
  --piedra:      #6b7280;
  --piedra-clara:#d6d3ce;
  --hueso:       #f7f6f3;
  --blanco:      #ffffff;
  --ocre:        #c8801f;
  --ocre-claro:  #e0a03f;
  /* Versión oscurecida del ocre, para texto sobre fondos claros.
     El ocre original no llega al contraste mínimo accesible ahí. */
  --ocre-texto:  #8a5a12;

  --texto:       var(--carbon);
  --texto-suave: #55595f;
  /* Gris para texto secundario sobre fondo oscuro (--piedra no contrasta) */
  --piedra-media:#9aa0a8;

  /* Tipografía */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --ancho-max: 1140px;
  --radio: 4px;
  --transicion: 180ms ease;
}

/* ── Reset acotado ────────────────────────────────────── */

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Accesibilidad: texto sólo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ocre); color: var(--carbon);
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: 2px;
}

/* ── Estructura ───────────────────────────────────────── */

.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}

.seccion { padding: clamp(3.5rem, 9vw, 7rem) 0; }

/* El header es sticky: sin esto, los títulos quedan tapados
   al llegar desde un link del menú. */
section[id] { scroll-margin-top: 80px; }

.seccion--oscura {
  position: relative;
  background: var(--carbon);
  color: var(--piedra-clara);
  overflow: hidden;
}
.seccion--oscura .seccion__titulo { color: var(--blanco); }

/* Plano de planta como marca de agua de fondo. Va en un pseudo-elemento
   para controlar su opacidad sin afectar al contenido, y detrás de todo.
   El contenedor se eleva a z-index:1 para quedar por encima. */
.seccion--plano-fondo {
  position: relative;
  overflow: hidden;
}
.seccion--plano-fondo::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 640px;
  max-width: 85%;
  aspect-ratio: 640 / 460;
  background: url("../img/plano-planta.svg") right center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.seccion--plano-fondo > .contenedor { position: relative; z-index: 1; }

/* Variante para fondo claro: el plano tiene trazo blanco, así que lo
   invertimos a trazo oscuro y bajamos la opacidad. */
.seccion--plano-fondo--claro::before {
  filter: invert(1);
  opacity: .10;
}

.seccion--franja { background: var(--blanco); }

/* Textura de papel cuadriculado, para las secciones con mucho texto.
   Es solo CSS: no descarga ninguna imagen. */
.seccion--plano {
  background-color: var(--hueso);
  background-image:
    linear-gradient(rgba(107, 114, 128, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 114, 128, .10) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Íconos de línea de las tarjetas */
.icono {
  width: 32px; height: 32px;
  color: var(--ocre-texto);
  margin-bottom: .9rem;
  display: block;
}

.seccion__eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ocre-texto);
  margin-bottom: .75rem;
}
/* Sobre fondo oscuro sí funciona el ocre original */
.seccion--oscura .seccion__eyebrow,
.hero__eyebrow { color: var(--ocre); }

.seccion__titulo {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.seccion__bajada {
  max-width: 52ch;
  color: var(--texto-suave);
  margin-bottom: 2.5rem;
}
.seccion--oscura .seccion__bajada { color: var(--piedra-media); }

/* ── Header ───────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(22, 24, 28, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 1rem;
}

.logo {
  display: flex; align-items: center; gap: .625rem;
  text-decoration: none;
  color: var(--blanco);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Marca: tres capas apiladas, como los estratos de roca */
.logo__marca {
  width: 22px; height: 22px;
  background:
    linear-gradient(var(--ocre) 0 0)      0 0   / 100% 5px no-repeat,
    linear-gradient(var(--piedra) 0 0)    0 8px / 100% 5px no-repeat,
    linear-gradient(var(--piedra-clara) 0 0) 0 16px / 100% 5px no-repeat;
}

.logo__texto--fino {
  font-weight: 400;
  color: var(--piedra-media);
  margin-left: .35em;
}

.nav__lista {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0; padding: 0;
}

.nav__lista a {
  text-decoration: none;
  color: var(--piedra-clara);
  font-size: .95rem;
  transition: color var(--transicion);
}
.nav__lista a:hover { color: var(--blanco); }

/* El selector .nav__lista a tiene más especificidad que .boton y le pisaba
   el color: dejaba texto gris claro sobre el ocre. Se lo devolvemos. */
.nav__lista .boton,
.nav__lista .boton:hover { color: var(--carbon); }

/* Botón hamburguesa — sólo visible en mobile */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.nav-toggle__barra,
.nav-toggle__barra::before,
.nav-toggle__barra::after {
  position: absolute; left: 11px;
  width: 22px; height: 2px;
  background: var(--blanco);
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav-toggle__barra { top: 21px; }
.nav-toggle__barra::before { content: ""; top: -7px; left: 0; }
.nav-toggle__barra::after  { content: ""; top:  7px; left: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__barra { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra::after  { transform: translateY(-7px) rotate(-45deg); }

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

.boton {
  display: inline-block;
  background: var(--ocre);
  color: var(--carbon);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  padding: .85rem 1.75rem;
  border: 2px solid var(--ocre);
  border-radius: var(--radio);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transicion), border-color var(--transicion);
}
.boton:hover { background: var(--ocre-claro); border-color: var(--ocre-claro); }

.boton--chico { padding: .55rem 1.1rem; font-size: .9rem; }

.boton--fantasma {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .35);
}
.boton--fantasma:hover { background: rgba(255, 255, 255, .1); border-color: var(--blanco); }

.boton--ancho { width: 100%; }

/* ── Hero ─────────────────────────────────────────────── */
/* Portada clara tipo "papel", con el boceto de la casa atenuado detrás.
   El boceto es un dibujo oscuro sobre papel claro, por eso el fondo
   claro lo integra como un croquis; sobre fondo oscuro no funcionaría. */

.hero {
  position: relative;
  background: var(--hueso);
  color: var(--texto);
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(5rem, 12vw, 8rem);
  overflow: hidden;
}

/* El boceto, bien atrás y tenue */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/hero-boceto.jpg") center right / cover no-repeat;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}

/* Velo de papel: cubre la columna de texto para que se lea nítido, y
   transparenta hacia la derecha para dejar ver el dibujo. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    var(--hueso) 30%,
    rgba(247, 246, 243, .72) 58%,
    rgba(247, 246, 243, .2) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
}
.hero__texto { max-width: 40rem; }

.hero__eyebrow {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ocre-texto);
  margin-bottom: 1.25rem;
}

.hero__titulo {
  font-size: clamp(2.4rem, 7vw, 4.25rem);
  letter-spacing: -.035em;
  color: var(--carbon);
  margin-bottom: 1.25rem;
}
.hero__titulo em {
  font-style: normal;
  color: var(--ocre-texto);
}

.hero__bajada {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--texto-suave);
  margin-bottom: 2.25rem;
}
.hero__bajada strong { color: var(--texto); }

.hero__acciones { display: flex; flex-wrap: wrap; gap: .875rem; }

/* El botón fantasma vive ahora sobre fondo claro: borde y texto oscuros */
.hero .boton--fantasma {
  color: var(--carbon);
  border-color: rgba(22, 24, 28, .28);
}
.hero .boton--fantasma:hover {
  background: rgba(22, 24, 28, .06);
  border-color: var(--carbon);
}

/* Barras de "estratos" al pie del hero */
.hero__estratos {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  z-index: 1;
}
.hero__estratos span { height: 5px; }
.hero__estratos span:nth-child(1) { background: var(--ocre); }
.hero__estratos span:nth-child(2) { background: #8a6a3c; }
.hero__estratos span:nth-child(3) { background: var(--piedra); }
.hero__estratos span:nth-child(4) { background: var(--piedra-clara); }

/* ── Grillas y tarjetas ───────────────────────────────── */

.grilla { display: grid; gap: 1.75rem; }
/* El min() evita que el ancho mínimo de columna desborde la pantalla
   en celulares angostos: nunca puede pedir más del 100% disponible. */
.grilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }

/* Para bloques de 4 elementos: columnas fijas, nunca auto-fit.
   Con auto-fit el navegador arma 3 columnas y deja el cuarto solo
   abajo. Con 2 columnas exactas siempre queda una grilla de 2x2. */
.grilla--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .grilla--2 { grid-template-columns: 1fr; }
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--piedra-clara);
  border-top: 3px solid var(--ocre);
  border-radius: var(--radio);
  padding: 2rem 1.75rem;
}
/* Color explícito: las tarjetas tienen fondo blanco propio aunque estén
   dentro de una sección oscura, así que no deben heredar su color de texto. */
.tarjeta h3 { font-size: 1.3rem; color: var(--texto); }
.tarjeta p { color: var(--texto-suave); margin: 0 0 .9rem; }
.tarjeta p:last-child { margin-bottom: 0; }

/* Renglón de "cómo lo verificás" al pie de cada compromiso */
.tarjeta__prueba {
  font-size: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--piedra-clara);
}
.tarjeta__prueba strong { color: var(--texto); }

/* ── Datos de la encuesta ─────────────────────────────── */

.datos { margin-bottom: 1.25rem; }

.dato {
  border-top: 3px solid var(--ocre);
  padding-top: 1.1rem;
}
.dato strong {
  display: block;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: .5rem;
}
.dato p { color: var(--texto-suave); margin: 0; font-size: .97rem; }

.destacado {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--blanco);
  border-left: 4px solid var(--ocre);
  border-radius: var(--radio);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  max-width: 68ch;
}
.destacado :last-child { margin-bottom: 0; }

/* ── Método ───────────────────────────────────────────── */

.metodos { gap: 2.25rem 3rem; }

.metodo { border-top: 3px solid var(--ocre); padding-top: 1.25rem; }
.metodo h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.metodo p { color: var(--texto-suave); margin: 0; }

/* ── Socios ───────────────────────────────────────────── */

/* Dos socios, dos columnas exactas: nunca queda uno solo abajo */
.socios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2.25rem 0;
}
@media (max-width: 860px) {
  .socios { grid-template-columns: 1fr; }
}

.socio {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--blanco);
  border: 1px solid var(--piedra-clara);
  border-left: 3px solid var(--ocre);
  border-radius: var(--radio);
  padding: 1.4rem 1.6rem;
}

.socio__foto {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--piedra-clara);
}

/* Sin esto, un texto largo ensancha la ficha y desborda */
.socio__texto { min-width: 0; }

.socio h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.socio__rol {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ocre-texto);
  margin-bottom: .7rem;
}
.socio p { font-size: .96rem; margin-bottom: .7rem; }
.socio p:last-child { margin-bottom: 0; }

/* En celular la foto pasa arriba del texto */
@media (max-width: 560px) {
  .socio { flex-direction: column; gap: 1rem; }
  .socio__foto { width: 78px; height: 78px; }
}

/* ── Alcance: qué incluye y qué no ────────────────────── */

.alcance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.alcance__col {
  background: var(--blanco);
  border: 1px solid var(--piedra-clara);
  border-radius: var(--radio);
  padding: 1.75rem;
}
.alcance__col h3 {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}

.alcance__icono {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: .95rem; font-weight: 700;
  flex-shrink: 0;
}
.alcance__col--si  .alcance__icono { background: #1f7a3f; color: var(--blanco); }
.alcance__col--no  .alcance__icono { background: var(--piedra); color: var(--blanco); }

.alcance__col ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
}
.alcance__col li {
  color: var(--texto-suave);
  font-size: .97rem;
  padding-left: 1.1rem;
  position: relative;
}
.alcance__col li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--piedra-clara);
}
.alcance__col--no { background: transparent; }

/* ── Bloque de entrega ────────────────────────────────── */

.entrega {
  margin-top: 3rem;
  background: var(--carbon);
  color: var(--piedra-clara);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.entrega__titulo { color: var(--blanco); font-size: 1.4rem; }
.entrega > p { max-width: 60ch; }

.entrega__lista {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .85rem;
}
.entrega__lista li {
  padding-left: 1.6rem;
  position: relative;
  font-size: .97rem;
}
.entrega__lista li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 10px; height: 2px;
  background: var(--ocre);
}

/* ── Preguntas frecuentes ─────────────────────────────── */
/* Usa <details>/<summary> del navegador: sin JavaScript. */

.faq { max-width: 78ch; }

.faq__item { border-bottom: 1px solid var(--piedra-clara); }

.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Cruz que rota: vertical cerrada, horizontal abierta */
.faq__item summary::after {
  content: "";
  position: absolute; right: .5rem; top: 50%;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--ocre) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--ocre) 0 0) center / 2px 100% no-repeat;
  transform: translateY(-50%);
  transition: transform var(--transicion);
}
.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(var(--ocre) 0 0) center / 100% 2px no-repeat;
}

.faq__item summary:hover { color: var(--ocre); }

.faq__cuerpo { padding: 0 1.5rem 1.35rem 0; }
.faq__cuerpo p { color: var(--texto-suave); max-width: 68ch; }
.faq__cuerpo p:last-child { margin-bottom: 0; }

/* ── Pasos del proceso ────────────────────────────────── */

.pasos {
  list-style: none; margin: 0; padding: 0;
  counter-reset: paso;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.paso {
  counter-increment: paso;
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-top: 3px solid var(--piedra-clara);
  position: relative;
}
.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--ocre-texto);
  margin-bottom: .6rem;
}
.paso h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.paso p { color: var(--texto-suave); font-size: .95rem; margin: 0; }

/* Los pasos van sobre fondo oscuro: hay que aclarar textos y separadores */
.seccion--oscura .paso { border-top-color: rgba(255, 255, 255, .18); }
.seccion--oscura .paso h3 { color: var(--blanco); }
.seccion--oscura .paso p { color: var(--piedra-clara); }

/* ── Nosotros ─────────────────────────────────────────── */

/* Una sola columna: las fichas de los socios ocupan todo el ancho */
.nosotros__texto p { color: var(--texto-suave); max-width: 62ch; }
.nosotros__texto strong { color: var(--texto); }

/* ── Contacto ─────────────────────────────────────────── */

.contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}
/* Sin min-width: 0, una palabra larga (el email) ensancha la columna
   y desborda la pantalla en celulares angostos. */
.contacto > * { min-width: 0; }
.contacto__datos a { overflow-wrap: anywhere; }
.contacto__intro p { color: var(--piedra-clara); max-width: 44ch; }

.contacto__datos {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.1rem;
}
.contacto__datos li { display: grid; gap: .15rem; }
.contacto__label {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--piedra-media);
}
.contacto__datos a {
  color: var(--blanco);
  text-decoration: none;
  border-bottom: 1px solid var(--ocre);
  justify-self: start;
}
.contacto__datos a:hover { color: var(--ocre-claro); }

/* Formulario */
.formulario {
  background: var(--carbon-alto);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid; gap: 1.1rem;
}

.campo { display: grid; gap: .4rem; }
.campo label {
  font-size: .85rem; font-weight: 600;
  color: var(--piedra-clara);
}
.campo input,
.campo select,
.campo textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--blanco);
  background: var(--carbon);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--ocre); }
.campo input::placeholder,
.campo textarea::placeholder { color: #7b7f86; }

/* Marca los campos incompletos cuando se intenta enviar */
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #d9534f; }

.formulario__nota {
  margin: 0;
  font-size: .88rem;
  color: var(--piedra-media);
  min-height: 1.3em;
}

/* ── Footer ───────────────────────────────────────────── */

.footer {
  background: var(--carbon);
  color: var(--piedra-media);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 2rem 0;
  font-size: .88rem;
}
.footer__inner {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: .5rem;
}
.footer p { margin: 0; }

/* ── WhatsApp flotante ────────────────────────────────── */

.whatsapp-flotante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #25d366;
  color: var(--blanco);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform var(--transicion);
}
.whatsapp-flotante:hover { transform: scale(1.07); }

/* ══════════════════════════════════════════════════════
   Mobile
   ══════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .contacto,
  .alcance { grid-template-columns: 1fr; }
}

/* 900px y no 760: con cinco secciones más el botón, el menú horizontal
   ya no entra al lado del logo y empujaba la página a lo ancho. */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--carbon);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: none;
  }
  .nav[data-abierto="true"] { display: block; }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.5rem;
  }
  .nav__lista li { border-top: 1px solid rgba(255, 255, 255, .07); }
  .nav__lista a {
    display: block;
    padding: .9rem 0;
    font-size: 1.05rem;
  }
  .nav__lista .boton { text-align: center; margin-top: 1rem; }

  .paso { padding-right: 0; }
}

/* Respeta a quien pidió menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }