/* ==========================================================================
   Servex — landing
   Estructura y ritmo del template que el cliente eligió, con su propia paleta.
   Depende de tokens.css.
   ========================================================================== */

/* ---------------------------------------------------------------- Ritmo ----
   Un solo selector controla el espaciado vertical de las secciones, para que
   nada compita por especificidad más adelante. */

.sec { padding-block: 96px; }
.sec--surface { background: var(--sx-surface); }
.sec--tight { padding-block: 64px; }

.sec__head { max-width: 620px; margin-inline: auto; text-align: center; }
.sec__head h1,
.sec__head h2 { font-size: 36px; }
.sec__head p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--sx-mute);
}

@media (max-width: 760px) {
  .sec { padding-block: 64px; }
  .sec__head h1,
  .sec__head h2 { font-size: 28px; }
}

/* ------------------------------------------------------------------ Nav ----*/

/* La salida de emergencia. El menú lo dibuja chrome.js, así que sin
   JavaScript no habría forma de moverse entre las seis páginas: esta barra
   está en el HTML de cada una, dentro de <noscript>, y no se ve nunca
   mientras el script haga su trabajo. */
.sinjs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-block: 20px;
  border-bottom: 1px solid var(--sx-line);
  font-size: 15px;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sx-line);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 76px;
}

.nav__logo { flex: none; }
.nav__logo svg { height: 38px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
/* El subrayado crece desde el centro al pasar por encima. Va en un
   pseudoelemento con `scaleX` y no en `border-bottom` para que aparecer no
   desplace el texto ni un píxel. */
.nav__links a {
  position: relative;
  font-size: 15px;
  color: var(--sx-slate);
  transition: color var(--sx-dur-1) var(--sx-ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--sx-accent);
  transform: scaleX(0);
  transition: transform var(--sx-dur-2) var(--sx-ease);
}
.nav__links a:hover { color: var(--sx-deep); }
.nav__links a:hover::after { transform: scaleX(1); }

/* La página en la que se está lleva el subrayado puesto. Mientras el sitio
   era una sola página no había nada que marcar: todos los enlaces llevaban al
   mismo documento. Con seis páginas, el menú es también un "usted está aquí". */
.nav__links a.is-aqui {
  color: var(--sx-deep);
  font-weight: 500;
}
.nav__links a.is-aqui::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-btn);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--sx-deep);
}

@media (max-width: 980px) {
  .nav__links, .nav .sx-pill { display: none; }
  .nav__burger { display: block; }
  .nav--open .nav__links {
    display: flex;
    position: absolute;
    inset: 76px 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 8px var(--sx-gutter) 20px;
    background: var(--sx-white);
    border-bottom: 1px solid var(--sx-line);
    box-shadow: var(--sx-shadow-md);
    /* El panel pasa de `display:none` a `display:flex`, y `display` no admite
       transición: la entrada tiene que ser una animación, no un cambio de
       estado. Cae desde arriba porque de arriba viene, y eso ya dice de dónde
       salió sin necesidad de mirar el botón. */
    transform-origin: top center;
    animation: sx-menu var(--sx-dur-2) var(--sx-ease);
  }
  @keyframes sx-menu {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to   { opacity: 1; transform: none; }
  }
  .nav--open .nav__links a {
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid var(--sx-line);
  }
  /* En el panel desplegable cada enlace ya lleva su propio separador: el
     subrayado del escritorio se montaría encima. */
  .nav--open .nav__links a::after { display: none; }
  .nav--open .sx-pill { display: inline-flex; margin-top: 16px; }
}

/* ----------------------------------------------------------------- Hero ----*/

.hero {
  background: var(--sx-surface);
  padding-block: 84px 68px;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

/* El titular vive en dos líneas: una por <span>. Si el tamaño crece hasta
   partirlas, el bloque pierde el ritmo del diseño original. */
.hero h1 {
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero h1 span { display: block; }

.hero__sub {
  margin-top: 22px;
  max-width: 470px;
  font-size: 16px;
  line-height: 1.8;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Puntos del carrusel del original, reinterpretados como el anillo de la marca */
.hero__dots {
  display: flex;
  gap: 10px;
  margin-top: 46px;
}
.hero__dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 2px solid var(--sx-accent);
  background: transparent;
  padding: 0;
  cursor: default;
}
.hero__dot[aria-current='true'] { background: var(--sx-accent); }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__sub { max-width: none; }
}

/* --- El mapa: el elemento firma de la página ---
   La máquina la tiene cualquiera. Lo que Servex tiene es técnico propio en las
   cinco ciudades donde un comprador corporativo concentra sus sedes, así que
   eso es lo que abre la página. El mismo contorno y la misma proyección que usa
   el radar del sistema, pero sin scores ni semáforo: aquí solo se afirma dónde
   hay servicio. */

.heromapa { position: relative; }

/* Fuera del hero el mapa pierde la columna que lo acotaba, y el panel de las
   cinco ciudades —que va anclado a la derecha— se iría al borde de un
   contenedor de 1200 px, a medio metro del país que comenta. Aquí se le
   devuelve un ancho propio. */
.mapa { max-width: 560px; margin-inline: auto; }

.heromapa__svg svg {
  width: 100%;
  /* 440 y no 400: desde que cada ciudad lleva su nombre escrito, el mapa
     necesita el ancho extra para que las etiquetas se lean sin apretarse
     contra el marcador. */
  max-width: 440px;
  height: auto;
  margin-inline: auto;
}

/* El nombre de cada ciudad, escrito al lado de su marcador. Es el cambio de
   fondo de la portada: ya no se cuenta cuántas plazas hay, se nombra cuáles
   son. Un comprador con sede en Cali quiere leer "Cali", no deducirlo de un
   punto en el suroccidente. */
.heromapa__svg .pin__etq {
  font-family: var(--sx-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--sx-deep);
}
.heromapa__svg .pin__halo {
  transition: opacity var(--sx-dur-2) var(--sx-ease);
}
.heromapa__svg .pin:hover .pin__halo,
.heromapa__svg .pin:focus-visible .pin__halo { opacity: .16; }

/* El país se traza primero y las ciudades se encienden después, de norte a
   sur. No es decoración y el orden importa: primero queda claro que el mapa es
   Colombia, y solo entonces se escribe un nombre tras otro — Barranquilla,
   Cartagena, Medellín, Bogotá, Cali. Cinco nombres que aparecen de uno en uno
   se leen y se recuerdan; un mapa que ya viene con los cinco puestos se mira
   una vez y se pasa de largo.

   El largo del trazo no se declara aquí: lo mide landing.js sobre el propio
   contorno con getTotalLength() y lo escribe en el elemento. Estimarlo a ojo
   no vale — pasarse deja el dibujo terminado antes de tiempo y quedarse corto
   deja medio país sin línea. Por eso la animación solo declara su destino: el
   punto de partida es el valor que el script acaba de poner.

   Sin la clase no hay nada que animar y el contorno se ve entero, que es el
   comportamiento correcto si el script no llegara a ejecutarse. */
.heromapa__svg .contorno.trazando {
  animation: sx-trazo 900ms var(--sx-ease-io) forwards;
}
@keyframes sx-trazo {
  to { stroke-dashoffset: 0; }
}

.heromapa__svg .pin {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: sx-pin var(--sx-dur-3) var(--sx-ease) forwards;
}
@keyframes sx-pin {
  from { opacity: 0; transform: scale(.35); }
  60%  { opacity: 1; transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1); }
}

/* Con movimiento reducido el país ya está trazado y las cinco ciudades ya
   están encendidas: se ve el resultado, que es lo que importa, sin el recorrido. */
@media (prefers-reduced-motion: reduce) {
  .heromapa__svg .pin { opacity: 1; animation: none; }
  /* El `!important` es necesario aquí y solo aquí: el largo del trazo lo
     escribe el script en el atributo `style` del elemento, y una regla normal
     de la hoja no le gana. Sin esto, con movimiento reducido el contorno se
     quedaría dibujado a medias para siempre. */
  .heromapa__svg .contorno {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none;
  }
}

/* El aro engorda bajo el cursor. La transición es lo que separa un mapa que
   responde de uno que parpadea. */
.heromapa__svg .pin__aro {
  transition: stroke-width var(--sx-dur-1) var(--sx-ease);
}
.heromapa__svg .pin:hover .pin__aro,
.heromapa__svg .pin:focus-visible .pin__aro { stroke-width: 4; }

/* Panel flotante, en el sitio que ocupaba el contador del equipo: la esquina
   inferior derecha es donde el ojo aterriza después de recorrer el mapa. */
.heromapa__nota {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(300px, 68%);
  padding: 16px 20px;
  background: var(--sx-white);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-card);
  box-shadow: var(--sx-shadow-lg);
}

.heromapa__n {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sx-deep);
  font-variant-numeric: tabular-nums;
}

.heromapa__nota b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sx-ink);
}
.heromapa__nota span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--sx-mute);
}

/* Sin sitio para el panel flotante, vuelve al flujo bajo el mapa. */
@media (max-width: 720px) {
  .heromapa__svg svg { max-width: 300px; }
  .heromapa__nota { position: static; width: 100%; margin-top: 20px; }
}

/* ---------------------------------------------------- Credenciales --------
   Ocupa el lugar de la fila de logos de clientes del original. Servex vende
   por confianza a bancos y clínicas: lo que hay que mostrar aquí son señales
   de respaldo, no logotipos de clientes que no podemos exponer. */

.cred { border-bottom: 1px solid var(--sx-line); }

.cred__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sx-line);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-card);
  overflow: hidden;
}

.cred__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: var(--sx-white);
}
.cred__ico {
  flex: none;
  color: var(--sx-accent);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sx-r-btn);
  background: var(--sx-accent-50);
}
.cred__t {
  font-size: 15px;
  font-weight: 600;
  color: var(--sx-ink);
  line-height: 1.35;
}
/* En /contacto los títulos de la rejilla son enlaces —WhatsApp, correo,
   teléfono—. Se ven como el resto de títulos y el acento queda para el hover:
   tres enlaces azules en fila leerían como una lista de navegación. */
.cred__t a { color: inherit; }
.cred__t a:hover { color: var(--sx-accent); }
.cred__d { font-size: 12.5px; color: var(--sx-mute); }

@media (max-width: 900px) { .cred__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cred__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Cards ----*/

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 54px;
}

.card {
  padding: 34px 26px 30px;
  text-align: center;
  background: var(--sx-white);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-card);
  box-shadow: var(--sx-shadow-sm);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease),
              transform var(--sx-dur-2) var(--sx-ease),
              border-color var(--sx-dur-2) var(--sx-ease);
}
.card:hover {
  box-shadow: var(--sx-shadow-md);
  transform: translateY(-3px);
  border-color: var(--sx-accent-100);
}

/* El cuadro pálido de detrás del icono se separa un punto cuando la tarjeta
   se levanta. Es el único elemento de la tarjeta con vida propia, y basta
   para que el conjunto no se lea como una imagen fija que se desplaza. */
.card__ico::before {
  transition: transform var(--sx-dur-2) var(--sx-ease);
}
.card:hover .card__ico::before { transform: translate(2px, -2px); }

/* El icono monta desplazado sobre un cuadro pálido: es el gesto que da
   carácter a las tarjetas del diseño original. */
.card__ico {
  position: relative;
  width: 50px;
  height: 46px;
  margin: 0 auto 22px;
}
/* El cuadro asoma en diagonal por detrás del trazo, solapándolo. Separados
   se leen como dos objetos distintos y el gesto se pierde. */
.card__ico::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--sx-accent-50);
}
.card__ico > span {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sx-accent);
}

.card h3 { font-size: 19px; line-height: 1.35; }
.card p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--sx-mute);
}

/* La tarjeta que además es enlace: la portada resume cada sección en dos
   líneas y manda a su página. Hereda la tarjeta entera y solo añade lo que
   cambia — que el bloque completo sea el área clicable y no solo la flecha,
   que es el error clásico de este patrón en pantallas táctiles. */
.card--link {
  display: block;
  color: inherit;
}
.card--link:hover { color: inherit; }
.card--link .sx-arrow { margin-top: 18px; }
/* La flecha responde al hover de toda la tarjeta, no solo al suyo propio */
.card--link:hover .sx-arrow svg { transform: translateX(4px); }

@media (max-width: 1040px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Alternada ---*/

.alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}
.alt--flip .alt__fig { order: 2; }

.alt h1,
.alt h2 { font-size: 34px; }
.alt__p {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--sx-mute);
}
.alt .sx-btn { margin-top: 30px; }

.alt__lista { margin-top: 22px; }
.alt__lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.7;
}
.alt__lista svg { flex: none; margin-top: 3px; color: var(--sx-accent); }
.alt__lista b { color: var(--sx-ink); font-weight: 600; }

@media (max-width: 900px) {
  .alt { grid-template-columns: 1fr; gap: 40px; }
  .alt--flip .alt__fig { order: 0; }
  .alt h1,
  .alt h2 { font-size: 27px; }
}

/* --- Diagrama del canon: qué entra en la cuota mensual --- */

.canon {
  padding: 30px;
  background: var(--sx-white);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-card);
  box-shadow: var(--sx-shadow-md);
}
.canon__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sx-line);
}
.canon__top b { font-size: 17px; color: var(--sx-deep); font-weight: 600; }
.canon__top span { font-size: 12px; color: var(--sx-mute); }

.canon__items { margin-top: 6px; }
.canon__items li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sx-line);
  font-size: 14px;
  color: var(--sx-ink);
}
.canon__items li:last-child { border-bottom: 0; }
.canon__items i {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sx-r-btn);
  background: var(--sx-accent-50);
  color: var(--sx-accent);
}
.canon__items em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sx-open);
}
.canon__pie {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--sx-accent);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.canon__pie b { font-size: 15px; color: var(--sx-ink); }
.canon__pie span { font-size: 13px; color: var(--sx-mute); }

/* ----------------------------------------------------------------- Stats ---*/

.stats {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 64px;
}
.stats h2 { font-size: 30px; line-height: 1.3; }
.stats h2 span { display: block; }
.stats__sub { margin-top: 12px; font-size: 13px; color: var(--sx-mute); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 28px;
}
.stats__item { display: flex; align-items: center; gap: 16px; }
.stats__item > span { flex: none; color: var(--sx-accent); }
.stats__n {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sx-ink);
  line-height: 1.1;
}
.stats__l { font-size: 12.5px; color: var(--sx-mute); }

@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr; gap: 38px; }
  .stats h2 { font-size: 25px; }
}
@media (max-width: 460px) { .stats__grid { grid-template-columns: 1fr; gap: 24px; } }

/* -------------------------------------------------------------- Cobertura --*/

.cob {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: start;
}
.cob h1,
.cob h2 { font-size: 34px; }
.cob__p { margin-top: 18px; font-size: 14px; line-height: 1.95; color: var(--sx-mute); }
.cob__p--nota {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sx-line);
  font-size: 12.5px;
}

/* El mapa vive en la portada; aquí va la lista con nombre y departamento.
   Con cinco plazas la rejilla pasa de tres columnas a una sola tira: cinco
   celdas repartidas en tres columnas dejan un hueco de dos al final, y ese
   hueco se lee como si faltara algo. */
.cob__ciudades {
  display: grid;
  gap: 1px;
  background: var(--sx-line);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-card);
  overflow: hidden;
}
.cob__ciudades li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  background: var(--sx-white);
  transition: background-color var(--sx-dur-1) var(--sx-ease);
}
.cob__ciudades li:hover { background: var(--sx-accent-50); }
.cob__ciudades b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--sx-ink);
  letter-spacing: -0.01em;
}
.cob__ciudades span { font-size: 12.5px; color: var(--sx-mute); }

@media (max-width: 900px) {
  .cob { grid-template-columns: 1fr; gap: 34px; }
  .cob h1,
  .cob h2 { font-size: 27px; }
}

/* ------------------------------------------------------------- Sectores ----
   Toma el lugar del bloque de testimonio del original: cuadro visual a la
   izquierda, contenido a la derecha, con el nombre destacado en el acento. */

.sect {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 58px;
  align-items: stretch;
}

.sect__fig {
  display: grid;
  place-items: center;
  padding: 40px;
  border-radius: var(--sx-r-card);
  background: var(--sx-accent-50);
  border: 1px solid var(--sx-accent-100);
  color: var(--sx-ink);
  text-align: center;
}
.sect__fig svg { color: var(--sx-accent-500); }
.sect__fig b {
  display: block;
  margin-top: 22px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sx-deep);
}
.sect__fig p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--sx-mute);
}

.sect__lista { display: grid; gap: 1px; background: var(--sx-line); }
.sect__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 4px;
  background: var(--sx-white);
}
.sect__row:first-child { padding-top: 0; }
.sect__row:last-child { padding-bottom: 0; }
.sect__row b {
  font-size: 17px;
  font-weight: 600;
  color: var(--sx-accent);
  letter-spacing: -0.01em;
}
.sect__row span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--sx-mute);
}
.sect__row p { font-size: 14px; line-height: 1.9; color: var(--sx-slate); }

@media (max-width: 900px) {
  .sect { grid-template-columns: 1fr; gap: 34px; }
  .sect__row { grid-template-columns: 1fr; gap: 8px; padding: 20px 4px; }
}

/* ----------------------------------------------------------------- Pasos ---
   El patrón de tarjeta blanca superpuesta y desbordada del original. En lugar
   de fotografías de banco de imágenes, escenas line-art del propio catálogo. */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
}

.paso { position: relative; padding-bottom: 74px; }

/* Los tres pasos son una secuencia, y al señalar uno el resto tiene que
   ceder el foco sin desaparecer. La tarjeta blanca sube y su sombra crece;
   la fotografía de detrás se acerca muy poco —1 %— dentro de su marco. */
.paso__fig, .paso__card {
  transition: transform var(--sx-dur-3) var(--sx-ease),
              box-shadow var(--sx-dur-3) var(--sx-ease);
}
/* El recorte del recuadro ya lo pone landing-foto.css, que carga después */
.paso:hover .paso__card {
  transform: translateY(-4px);
  box-shadow: var(--sx-shadow-lg);
}
.paso:hover .paso__fig { transform: scale(1.01); }

/* El original pone una fotografía aquí. Sin banco de imágenes, el bloque
   necesita textura propia: la trama diagonal fina evita que se lea como un
   rectángulo de color plano, y recoge el trazo del catálogo.
   El icono va arriba porque la tarjeta blanca invade la mitad inferior. */
.paso__fig {
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 34px;
  height: 214px;
  border-radius: var(--sx-r-card);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #A49CD9 0%, var(--sx-accent-600) 58%, #150F4E 100%);
  color: var(--sx-white);
}

.paso__card {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  padding: 22px 20px 20px;
  text-align: center;
  background: var(--sx-white);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-card);
  box-shadow: var(--sx-shadow-md);
}
.paso__n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sx-accent);
}
.paso__card h3 { margin-top: 8px; font-size: 16.5px; line-height: 1.4; }
.paso__card p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--sx-mute);
}

@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr; gap: 22px; max-width: 460px; margin-inline: auto; }
}

/* ------------------------------------------------------------------ CTA ----*/

.cta { text-align: center; }
.cta h1,
.cta h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.2;
  max-width: 780px;
  margin-inline: auto;
}
.cta h1 span,
.cta h2 span { display: block; }
.cta__p {
  margin-top: 18px;
  max-width: 540px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.85;
  color: var(--sx-mute);
}
.cta__acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.cta__nota { margin-top: 22px; font-size: 12.5px; color: var(--sx-mute); }

/* --------------------------------------------------------------- Footer ----*/

/* Pie claro. Sin el bloque oscuro que antes cerraba la página, el borde
   superior es lo único que lo despega de la sección anterior. */
.foot {
  background: var(--sx-deep-50);
  border-top: 1px solid var(--sx-accent-100);
  color: var(--sx-slate);
  padding-block: 64px 30px;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.foot__logo svg { height: 36px; width: auto; }
.foot__about {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.85;
  max-width: 300px;
  color: var(--sx-mute);
}
.foot h4 {
  color: var(--sx-deep);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}
.foot li { padding: 6px 0; }
.foot a, .foot li {
  font-size: 13.5px;
  color: var(--sx-slate);
}
.foot a { transition: color var(--sx-dur-1) var(--sx-ease); }
.foot a:hover { color: var(--sx-accent); }
.foot__contacto li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.6;
}
.foot__contacto svg { flex: none; margin-top: 3px; color: var(--sx-accent); }
/* El glifo de WhatsApp va en el índigo del resto del pie y no en su verde:
   aquí es una entrada más de la lista de contacto, no un botón. El verde se
   reserva para donde hay que pulsar. */
.foot__wa { flex: none; margin-top: 3px; line-height: 0; }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--sx-accent-100);
  font-size: 12.5px;
  color: var(--sx-mute);
}

@media (max-width: 900px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ Botón flotante ----
   WhatsApp fijo abajo a la derecha, presente desde que carga la página y en
   las seis. No aparece y desaparece según el desplazamiento: quien busca cómo
   escribir no debería tener que averiguar primero dónde está el botón, y un
   elemento que va y viene obliga a eso.

   Es CSS y nada más — sin estado, sin clase que poner ni quitar, sin
   JavaScript que pueda fallar. Lo único que lo pinta es chrome.js. */

.wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  /* Por debajo del nav (60): al desplazarse, la barra pasa por encima. */
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 18px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-wa);
  color: var(--sx-deep);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  box-shadow: var(--sx-shadow-lg);
  transition: background-color var(--sx-dur-2) var(--sx-ease),
              transform var(--sx-dur-1) var(--sx-ease-io),
              box-shadow var(--sx-dur-2) var(--sx-ease);
}

.wa:hover { background: var(--sx-wa-600); color: var(--sx-deep); }
/* Cede bajo el dedo y vuelve, igual que .sx-pill */
.wa:active { transform: translateY(1px) scale(.98); box-shadow: none; }

/* En el móvil se queda solo el glifo: un pill con texto sobre una pantalla de
   360 px tapa una columna entera de contenido. El nombre de la acción sigue
   estando en el aria-label, así que no se pierde para quien no ve el icono. */
@media (max-width: 560px) {
  .wa {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
  }
  .wa__txt {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}