/* =========================================================================
   Inicio. Portada con prueba (texto a la izquierda, pantallas reales a la
   derecha), historias, cómo trabajo y con qué (navy), cierre con llamado.

   El movimiento cuenta la historia del negocio:
   - Entrada (una vez, 1,2 s): el titular sube palabra por palabra desde su
     máscara; después llegan la bajada y los botones. Todo está en el HTML y
     sin animación (sin soporte o con «reducir movimiento») se ve entero.
   - Scroll (sólo con animation-timeline, dentro de @supports): la portada se
     aleja; el capítulo navy arranca con la forma del panel y se abre de
     borde a borde.
   - Marquesina: un carril de borde a borde con lo que el cliente ya usa; lo
     que va por detrás es una línea chica y quieta. Se pausa con el puntero encima, con el foco del
     teclado o con su botón (WCAG 2.2.2). Sin JS o con «reducir movimiento»,
     grilla quieta.
   - Historias (id="historias"): cuatro clientes, antes y ahora. Con scroll
     timelines, cada captura se destapa al entrar y en el padrón se marcan
     solas las cuotas sin pagar; sin soporte, todo quieto y marcado.
   ========================================================================= */

/* -------------------------------------------------------------------------
   La portada: qué hago y para quién, y un solo llamado.
   ------------------------------------------------------------------------- */
.inicio {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
}

/* Texto a la izquierda y, en pantalla ancha, la prueba a la derecha: tres
   pantallas reales recortadas. Debajo de 48rem la prueba no se dibuja y en
   su lugar queda la línea de clientes, que lleva a las historias. */
.inicio-portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 3vw, 4.5rem) clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
  padding-block: clamp(1.75rem, 0.9rem + 3.6vw, 4.5rem) clamp(3rem, 1.6rem + 5.2vw, 6.25rem);
}
@media (min-width: 60rem) {
  .inicio-portada { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
}

.inicio-lugar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-2);
}
.inicio-lugar::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--acento);
}

.inicio-titulo {
  max-width: 13em;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4.25rem);   /* 34 → 68 */
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.042em;
}

/* Cada palabra en su máscara. El relleno con margen negativo agranda la
   ventana (acentos, descendentes) sin mover la composición. */
.titulo-visual .palabra {
  display: inline-block;
  overflow: clip;
  padding: 0.14em 0.05em 0.18em;
  margin: -0.14em -0.05em -0.18em;
  vertical-align: top;
}
.titulo-visual .palabra > span { display: inline-block; }

.inicio-bajada {
  max-width: 36rem;
  margin-top: clamp(1rem, 0.75rem + 1vw, 1.6rem);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.inicio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);
}

/* La línea de clientes (sólo donde no está la prueba) */
.inicio-clientes { margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.45; }
.inicio-clientes a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--tinta);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.inicio-clientes-rotulo { font-weight: 500; color: var(--tinta-2); }
@media (min-width: 48rem) { .inicio-clientes { display: none; } }

/* La prueba */
.inicio-prueba { display: none; }
@media (min-width: 48rem) {
  .inicio-prueba { display: block; width: 100%; max-width: 40rem; }
}
.inicio-pantallas {
  position: relative;
  aspect-ratio: 5 / 4;
}
.pantalla {
  position: absolute;
  overflow: clip;
  border-radius: 10px;
  background: #ECE6D9;
  box-shadow:
    0 0 0 1px rgb(10 22 40 / .08),
    0 22px 44px -26px rgb(10 22 40 / .45);
}
.pantalla img { width: 100%; height: 100%; object-fit: cover; }
.pantalla--mostrador { top: 0; left: 0; width: 80%; aspect-ratio: 960 / 493; }
.pantalla--butacas   { bottom: 0; left: 7%; width: 42%; aspect-ratio: 1; }
.pantalla--butacas img { object-position: 50% 60%; }      /* el escenario y las filas */
.pantalla--celular {
  top: 12%;
  right: 0;
  width: 29%;
  aspect-ratio: 390 / 844;
  padding: 5px;
  border-radius: 24px;
  background: var(--navy);
}
.pantalla--celular img { border-radius: 19px; object-position: 50% 0; }
.inicio-prueba figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-chico);
  line-height: 1.45;
  color: var(--tenue);
}

/* -------------------------------------------------------------------------
   El capítulo navy: la postura (resultados, no apps), aprender rápido lo
   nuevo y lo que integro. Ocupa todo el ancho; su texto va al ancho de la
   página y los carriles, de borde a borde.
   ------------------------------------------------------------------------- */
.herramientas {
  --foco: var(--turquesa);
  /* Lo que mide el margen hasta el texto en un bloque de ancho completo */
  --borde-texto: max(var(--margen), (100% - var(--ancho)) / 2 + var(--margen));
  padding-block: clamp(3.25rem, 2rem + 4.2vw, 5.75rem) clamp(3rem, 2rem + 3.2vw, 4.75rem);
  background: var(--navy);
  color: var(--hueso);
  overflow-x: hidden;                       /* Safari 15 no conoce clip */
  overflow-x: clip;
}

.herramientas-texto {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  align-items: last baseline;               /* el párrafo cierra en la línea del título */
  gap: 1.25rem clamp(2rem, 0.5rem + 5vw, 6rem);
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
}

.herramientas-titulo {
  font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);           /* 32 → 56 */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.herramientas-texto p {
  max-width: 34em;
  color: var(--niebla);
  line-height: 1.6;
}

.marquesina { margin-top: clamp(3rem, 1.75rem + 4.5vw, 6rem); }

.grupo-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  max-width: var(--ancho);
  margin: 0 auto 0.75rem;
  padding-inline: var(--margen);
}

.grupo-cabeza h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--bruma);
}

/* Cada carril ocupa todo el ancho; quieto, su lista se alinea con el texto */
.carril { padding-inline: var(--borde-texto); }
.carril--frente { padding-block: 0.5rem; }

/* Quieta (sin JS o con «reducir movimiento»): grilla prolija */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem 1.25rem;
}
.logos[hidden] { display: none; }

.logos li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Íconos en una caja fija (los nombres arrancan todos a la misma distancia);
   las marcas que ya son palabra (ARCA, Woo, PeopleForce) van solas. */
.logos li:not(.logo-palabra) img { flex: none; width: 1.65em; height: 1.3em; object-fit: contain; }
.logos .logo-palabra img { width: auto; height: 0.8em; }
.logos .logo-palabra img[alt="PeopleForce"] { height: 0.95em; }   /* su caja incluye la descendente */

/* El control de pausa: sólo existe cuando algo se mueve */
.marquesina-control {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  min-width: 8.25rem;
  padding: 0.5rem 1.1rem 0.5rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy-claro);
  color: var(--hueso);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale var(--t-presion) var(--ease-out), background-color var(--t-hover) ease;
}
.marquesina-control:active { scale: var(--presion); }

.control-icono { position: relative; flex: none; width: 0.875rem; height: 0.875rem; }
.control-icono svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition:
    opacity 300ms var(--ease-icono),
    scale 300ms var(--ease-icono),
    filter 300ms var(--ease-icono);
}
.icono-reanudar { translate: 1px 0; }                          /* centro óptico del triángulo */
.marquesina:not(.esta-pausada) .icono-reanudar,
.marquesina.esta-pausada .icono-pausar { opacity: 0; scale: 0.25; filter: blur(4px); }

@media (hover: hover) and (pointer: fine) {
  .marquesina-control:hover { background-color: var(--navy-claro-2); }
}

/* -------------------------------------------------------------------------
   Con movimiento (hay JS para el botón de pausa y nadie pidió reducirlo)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* Entrada, una vez: 60 ms → 1,2 s. Lo oculto vive sólo en el «from» de
     cada animación: si la animación no corre, todo está a la vista. */
  .titulo-visual .palabra > span {
    animation: palabra-sube 850ms var(--ease-expo) both;
    animation-delay: calc(60ms + var(--i) * 32ms);
  }
  .inicio-lugar { animation: llega 520ms var(--ease-out) 40ms both; }
  .inicio-bajada { animation: llega 520ms var(--ease-out) 380ms both; }
  .inicio-acciones,
  .inicio-clientes { animation: llega 520ms var(--ease-out) 460ms both; }
  .inicio-prueba { animation: llega 700ms var(--ease-out) 300ms both; }

  /* La marquesina */
  .js .marquesina-control { display: inline-flex; }

  .js .carril {
    --hueco: clamp(2.25rem, 1.25rem + 3.2vw, 4.5rem);
    display: flex;
    gap: var(--hueco);
    padding-inline: 0;
    overflow-x: hidden;
    overflow-x: clip;
  }
  .js .carril--frente { --duracion: 58s; --sentido: normal; padding-block: 0.65rem; }

  .js .carril .logos,
  .js .carril .logos[hidden] {
    display: flex;
    flex: none;
    justify-content: space-around;
    gap: var(--hueco);
    min-width: 100%;
    animation: carril-avanza var(--duracion) linear infinite var(--sentido);
  }

  .js .carril .logos li { gap: 0.4em; min-height: 0; white-space: nowrap; }
  .js .carril .logos li:not(.logo-palabra) img { width: 1.2em; height: 1em; }
  .js .carril .logos .logo-palabra img { height: 0.72em; }
  .js .carril .logos .logo-palabra img[alt="PeopleForce"] { height: 0.86em; }
  .js .carril--frente .logos li { font-size: clamp(1.375rem, 0.95rem + 1.75vw, 2.375rem); letter-spacing: -0.025em; }

  /* Pausas: el puntero sobre un carril y el foco del teclado; el botón manda
     sobre las dos (si pidió «Reanudar», corre aunque el foco siga ahí). */
  .js .marquesina:has(:focus-visible) .logos,
  .js .marquesina.esta-pausada .logos { animation-play-state: paused; }
  .js .marquesina.en-marcha .logos { animation-play-state: running; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js .marquesina:has(.carril:hover) .logos { animation-play-state: paused; }
}

/* Lo que va por detrás: una línea chica y quieta, sin carril */
.herramientas-detras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.1rem;
  max-width: var(--ancho);
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) auto 0;
  padding-inline: var(--margen);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--niebla);
}
.herramientas-detras-rotulo { font-size: inherit; font-weight: 650; color: var(--bruma); }
.herramientas-detras ul { display: contents; }
.herramientas-detras li { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2rem; font-weight: 550; }
.herramientas-detras li:not(.logo-palabra) img { flex: none; width: 1.15em; height: 1em; object-fit: contain; opacity: 0.85; }
.herramientas-detras .logo-palabra img { width: auto; height: 0.75em; opacity: 0.85; }
.herramientas-detras .logo-palabra img[alt="PeopleForce"] { height: 0.9em; }

@keyframes palabra-sube { from { translate: 0 135%; } }
@keyframes llega { from { opacity: 0; translate: 0 14px; } }
@keyframes carril-avanza { to { translate: calc(-100% - var(--hueco)) 0; } }

/* -------------------------------------------------------------------------
   Ligado al scroll. Sólo donde hay scroll timelines; si no, todo quieto y
   en su lugar. Lineal: el scroll es la curva.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* La portada se aleja un poco más rápido que el scroll al salir */
    .inicio-portada {
      animation: portada-se-aleja linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }

  /* El capítulo arranca con la forma del panel (al ancho de la página, con
     esquinas) y se abre de borde a borde mientras entra. En el celular el
     margen es de 16 px: no vale la pena el trabajo. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
    .herramientas {
      view-timeline-name: --capitulo;
      animation: capitulo-se-abre linear both;
      animation-timeline: --capitulo;
      animation-range: entry 0% entry 75%;
    }
    .herramientas-texto {
      animation: capitulo-asienta linear both;
      animation-timeline: --capitulo;
      animation-range: entry 0% entry 75%;
    }
  }
}

/* Sube un 12 % más que el scroll; recién en el último tramo se apaga, y
   nunca por debajo de 0,45: un llamado lavado parece deshabilitado. */
@keyframes portada-se-aleja {
  35% { opacity: 1; }
  to { translate: 0 -12%; opacity: 0.45; }
}
@keyframes capitulo-se-abre {
  from { clip-path: inset(0 var(--borde-texto) round var(--radio-panel)); }
  to { clip-path: inset(0 0 round 0); }
}
@keyframes capitulo-asienta { from { translate: 0 2.5rem; } }

/* -------------------------------------------------------------------------
   Celular y tableta
   ------------------------------------------------------------------------- */
@media (max-width: 59.99rem) {
  .herramientas-texto { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .inicio-acciones { flex-direction: column; }
  .inicio-acciones .boton { width: 100%; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 0.75rem; }
  .logos li { gap: 0.5rem; font-size: 0.9375rem; min-height: 2.5rem; }
}

/* =========================================================================
   Historias de clientes. Papel otra vez después del capítulo navy: cada
   historia es texto (quién, qué cambió, antes y ahora, lo que falta) y una
   prueba (captura o ilustración). Alternan de lado en pantalla ancha; en el
   DOM el texto va siempre primero. Los enlaces son de texto: el único botón
   lleno de la página sigue siendo el WhatsApp del inicio.
   ========================================================================= */
.historias {
  --marco: #ECE6D9;                         /* papel un escalón más hondo */
  --radio-marco: 20px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--margen) clamp(3rem, 2rem + 3vw, 5rem);
}

.historias-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  align-items: last baseline;
  gap: 1.25rem clamp(2rem, 0.5rem + 5vw, 6rem);
}

.historias-antetitulo {
  margin-bottom: 0.9rem;
  font-size: var(--t-chico);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--enlace);
}

.historias-titulo {
  font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);           /* como el capítulo navy */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.historias-cabeza > p {
  max-width: 34em;
  color: var(--tinta-2);
  line-height: 1.6;
}

.historias-lista { margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 0; padding: 0; list-style: none; }
.historias-lista > li + li { border-top: 1px solid var(--linea); }

.historia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 2rem clamp(2rem, 0.5rem + 5vw, 6rem);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
/* Pares: la prueba a la izquierda (sólo visual; el orden de lectura no cambia) */
.historias-lista > li:nth-child(even) .historia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.historias-lista > li:nth-child(even) .historia-figura { order: -1; }

.historia-cliente {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta-2);
}
.historia-numero {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--enlace);
}

.historia-titulo {
  margin-top: 0.85rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);      /* 24 → 38 */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Antes y ahora: lo de antes en gris y con filete neutro; lo de ahora en
   tinta, con filete turquesa y cada logro con su tilde. */
.antes-ahora {
  display: grid;
  gap: 1.1rem;
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
}
.antes-ahora > div { padding-left: 1rem; border-left: 2px solid var(--linea); }
.antes-ahora > .ahora { border-left-color: var(--acento); }
.antes-ahora dt {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.antes-ahora dd { margin: 0.3rem 0 0; line-height: 1.55; }
.antes dd { color: var(--tinta-2); }
.ahora li { position: relative; padding-left: 1.5em; }
.ahora li + li { margin-top: 0.4rem; }
.ahora li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.5em;
  width: 0.7em;
  height: 0.38em;
  border-left: 2px solid var(--enlace);
  border-bottom: 2px solid var(--enlace);
  rotate: -45deg;
}

/* Lo que falta, dicho sin vueltas */
.historia-nota {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--tinta-2);
}
.historia-nota::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.38em;
  border: 2px solid var(--tenue);
  border-radius: 50%;
}

/* Enlaces de texto: tinta, subrayado que se engrosa en turquesa y la flecha
   que avanza. Con el foco del teclado pasa lo mismo que con el puntero. */
.historia-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.enlace-historia {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  color: var(--tinta);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.enlace-historia svg {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--enlace);
  transition: translate var(--t-rodar) var(--ease-out);
}
.enlace-historia:focus-visible { text-decoration-color: var(--acento); }
.enlace-historia:focus-visible svg { translate: 3px 0; }
.enlace-historia--sitio:focus-visible svg { translate: 2px -2px; }

/* La prueba */
.historia-figura figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-chico);
  color: var(--tenue);
}
.historia-marco {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  border-radius: var(--radio-marco);
  background: var(--marco);
  overflow: clip;
}
.historia-marco img {
  width: 100%;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgb(10 22 40 / .08),
    0 18px 40px -24px rgb(10 22 40 / .4);
  transition: scale 700ms var(--ease-out);
}
.historia-figura--vertical img { max-width: 24rem; }
.historia-figura--celular img { max-width: 15rem; border-radius: 22px; }

/* El padrón de la asociación: filas anónimas; las cuotas sin pagar, en turquesa */
.padron {
  width: 100%;
  max-width: 26rem;
  padding-bottom: 0.35rem;
  border-radius: 12px;
  background: #FBF9F4;
  box-shadow:
    0 0 0 1px rgb(10 22 40 / .08),
    0 18px 40px -24px rgb(10 22 40 / .4);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.padron-cabeza,
.padron li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
}
.padron-cabeza {
  border-bottom: 1px solid var(--linea);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--tenue);
}
.padron li + li { border-top: 1px solid rgb(10 22 40 / .06); }
.padron-socio { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.padron-avatar { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--linea); }
.padron-estado {
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tenue);
  white-space: nowrap;
}
.padron .debe { background: rgb(0 184 169 / .08); }
.padron .debe .padron-estado { background: var(--acento); color: var(--navy); }

@media (hover: hover) and (pointer: fine) {
  .enlace-historia:hover { text-decoration-color: var(--acento); }
  .enlace-historia:hover svg { translate: 3px 0; }
  .enlace-historia--sitio:hover svg { translate: 2px -2px; }
  .historia:hover .historia-marco img { scale: 1.015; }
}

/* Ligado al scroll: la captura se destapa desde abajo mientras entra y el
   texto se asienta; en el padrón, cada cuota sin pagar se marca cuando su
   fila llega. Sin soporte o con «reducir movimiento», todo quieto y marcado. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .historia-marco {
      animation: marco-se-destapa linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .historia-texto {
      animation: capitulo-asienta linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .padron .debe,
    .padron .debe .padron-estado {
      animation: cuota-se-marca linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 40%;
    }
  }
}

@keyframes marco-se-destapa {
  from { clip-path: inset(8% 5% 0 5% round var(--radio-marco)); translate: 0 2rem; }
  to { clip-path: inset(0 round var(--radio-marco)); }
}
@keyframes cuota-se-marca { from { background-color: transparent; color: var(--tenue); } }

@media (max-width: 59.99rem) {
  .historias-cabeza,
  .historia,
  .historias-lista > li:nth-child(even) .historia { grid-template-columns: 1fr; }
  .historias-lista > li:nth-child(even) .historia-figura { order: 0; }
}

@media (max-width: 30rem) {
  .historia-enlaces { flex-direction: column; gap: 0; }
  .padron li, .padron-cabeza { padding-inline: 0.75rem; }
}

/* «Ver todas», debajo de la cuarta historia */
.historias-lista > li:last-child .historia { padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.historias-todas {
  display: flex;
  justify-content: center;
}

/* Survivo en el celular: el marco muestra el escenario y unas filas, no la
   sala entera (la figura entra en menos de una pantalla). */
@media (max-width: 47.99rem) {
  .historia-figura--vertical img { aspect-ratio: 680 / 600; object-fit: cover; object-position: 50% 0; }
}

/* =========================================================================
   Cierre: la pregunta y el único llamado, antes del pie.
   ========================================================================= */
/* Banda navy de borde a borde, separada de Cómo trabajo por aire propio */
.cierre {
  --foco: var(--turquesa);
  margin-top: clamp(4rem, 2.5rem + 5vw, 8rem);
  padding-block: clamp(4rem, 2.5rem + 5.5vw, 8.5rem);
  background: var(--navy);
  color: var(--hueso);
}
.cierre-interior {
  display: grid;
  justify-items: start;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
}
.cierre-antetitulo {
  margin-bottom: 1rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  font-weight: 600;
  color: var(--turquesa);
}
.cierre-titulo {
  max-width: 12ch;
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cierre-bajada {
  margin-top: 1.25rem;
  max-width: 34em;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--niebla);
}
/* Qué incluye el diagnóstico: más chica, arriba del botón */
.cierre-incluye {
  margin-top: 1rem;
  max-width: 38em;
  padding-left: 1rem;
  border-left: 2px solid var(--turquesa);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hueso);
}
.cierre .pendiente { color: var(--bruma); }
.boton--grande {
  margin-top: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  min-height: 3.75rem;
  --relleno-x: 1.75rem;
  font-size: 1.1875rem;
}
@media (max-width: 30rem) { .boton--grande { width: 100%; } }

/* =========================================================================
   Barra fija de WhatsApp, sólo en el celular. Sin JS está siempre; con JS
   (clase .io) aparece cuando no se ve ningún botón grande de WhatsApp.
   scroll-padding-bottom: el foco del teclado nunca queda debajo (WCAG 2.4.11).
   ========================================================================= */
.barra-whatsapp { display: none; }
@media (max-width: 47.99rem) {
  :root { --alto-barra: 3.25rem; }
  html { scroll-padding-bottom: calc(var(--alto-barra) + 1.5rem); }
  .pie { padding-bottom: calc(var(--alto-barra) + 1rem + env(safe-area-inset-bottom, 0px)); }
  .barra-whatsapp {
    position: fixed;
    z-index: 10;
    left: var(--margen);
    right: var(--margen);
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--alto-barra);
    padding: 0.5rem 1rem;
    border-radius: var(--radio);
    background: var(--navy);
    color: var(--hueso);
    box-shadow: 0 10px 24px -12px rgb(10 22 40 / .55);
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
    transition: translate 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 0s;
  }
  .barra-whatsapp svg { flex: none; width: 1.25em; height: 1.25em; color: var(--turquesa); }
  .io .barra-whatsapp:not(.a-la-vista) {
    translate: 0 calc(100% + 1rem);
    opacity: 0;
    visibility: hidden;
    transition: translate 260ms var(--ease-out), opacity 200ms ease, visibility 0s linear 260ms;
  }
}

/* =========================================================================
   Cómo trabajo. Papel después del capítulo navy. Las tres formas de empezar
   no son un catálogo: van sobre una vía, de menos a más compromiso, y el
   nodo de cada una se llena un poco más (aro, aro con punto, lleno). Abajo,
   lo que no hago, con una cruz chica. Sin botones: el llamado es el cierre.
   ========================================================================= */
.como-trabajo {
  --nodo: 1.25rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem) var(--margen) clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.como-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  align-items: last baseline;
  gap: 1.25rem clamp(2rem, 0.5rem + 5vw, 6rem);
}
.como-antetitulo {
  margin-bottom: 0.9rem;
  font-size: var(--t-chico);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--enlace);
}
.como-titulo {
  font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.como-cabeza > p {
  max-width: 34em;
  color: var(--tinta-2);
  line-height: 1.6;
}

/* El camino */
.camino { margin-top: clamp(2.75rem, 1.75rem + 3.5vw, 5rem); }

.camino-escala {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.camino-escala span:last-child { color: var(--enlace); }
.camino-escala span:last-child::after { content: " →"; }

.camino-pasos {
  --riel-desde: 0 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 0.5rem + 3vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* La vía: un filete que va del neutro al turquesa, a la altura de los nodos */
.camino-pasos::before,
.camino-pasos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nodo) / 2 - 1px);
  height: 2px;
  border-radius: 2px;
  background: var(--linea);
}
.camino-pasos::after {
  background: linear-gradient(to right, var(--linea), var(--enlace));
  transform-origin: left center;
}

.paso {
  position: relative;
  z-index: 1;
  display: flex;                            /* sin subgrid: el precio al pie igual */
  flex-direction: column;
  padding-top: calc(var(--nodo) + 1.5rem);
  view-timeline-name: --paso;
}
/* Con subgrid las seis filas (número, nombre, para quién, qué hago, qué te
   llevás, precio) son las mismas en los tres pasos. */
@supports (grid-template-rows: subgrid) {
  .camino-pasos { row-gap: 0; }
  .paso {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    align-content: start;
  }
}
.paso-nodo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--nodo);
  height: var(--nodo);
  border: 2px solid var(--enlace);
  border-radius: 50%;
  background: var(--papel);
  transition: scale var(--t-rodar) var(--ease-out);
}
/* Más compromiso, más lleno */
.paso--2 .paso-nodo { background: radial-gradient(circle, var(--enlace) 0 28%, var(--papel) 30%); }
.paso--3 .paso-nodo { background: var(--enlace); box-shadow: inset 0 0 0 2px var(--papel); }

.paso-numero {
  font-size: var(--t-chico);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--enlace);
}
.paso-titulo {
  margin-top: 0.35rem;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);   /* 22 → 30 */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.paso-para,
.paso-hago {
  max-width: 30em;
  margin-top: 0.75rem;
  color: var(--tinta-2);
  line-height: 1.6;
}
.paso-para { color: var(--tinta); }
.paso-rotulo {
  display: block;
  margin-bottom: 0.15rem;
  font-size: var(--t-chico);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--enlace);
}
/* Qué te llevás: el mismo filete del «ahora» en los tres */
.paso-destacado {
  max-width: 30em;
  margin-top: 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--acento);
  font-weight: 600;
  line-height: 1.5;
}
/* El precio, al pie y a la misma altura en los tres */
.paso-precio {
  margin-top: auto;                         /* sin subgrid: lo empuja al pie */
  padding-top: 2.25rem;                     /* aire + filete, con o sin subgrid */
  background: linear-gradient(var(--linea), var(--linea)) left 1.1rem / 100% 1px no-repeat;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@supports (grid-template-rows: subgrid) {
  .paso-precio { align-self: end; }
}

/* Lo que no hago */
.no-hago {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 1.25rem clamp(2rem, 0.5rem + 5vw, 6rem);
  margin-top: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  border-top: 1px solid var(--linea);
}
.no-hago-titulo {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.no-hago-lista li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.45;
  color: var(--tinta-2);
}
.no-hago-lista li + li { border-top: 1px solid var(--linea); }
.no-hago-lista li:first-child { padding-top: 0.2rem; }
.no-hago-lista strong { font-weight: 700; color: var(--tinta); }
/* La cruz: dos trazos, sin depender de la letra */
.no-hago-lista li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: calc(0.85rem + 0.32em);
  width: 0.8em;
  height: 0.8em;
  background:
    linear-gradient(45deg, transparent 43%, var(--tenue) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--tenue) 43% 57%, transparent 57%);
  transition: rotate var(--t-rodar) var(--ease-out);
}
.no-hago-lista li:first-child::before { top: calc(0.2rem + 0.32em); }

@media (hover: hover) and (pointer: fine) {
  .paso:hover .paso-nodo { scale: 1.2; }
  .no-hago-lista li:hover::before { rotate: 90deg; }
}

/* Ligado al scroll: la vía se dibuja mientras entra, cada paso se asienta un
   poco después del anterior y su nodo crece en su lugar. Sin soporte o con
   «reducir movimiento», la vía entera y todo en su sitio. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* La vía termina de dibujarse antes de que se lleguen a leer los títulos */
    .camino-pasos { view-timeline-name: --via; }
    .camino-pasos::after {
      animation: riel-se-dibuja linear both;
      animation-timeline: --via;
      animation-range: entry 10% entry 50%;
    }
    .paso {
      animation: capitulo-asienta linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .paso--2 { animation-range: entry 10% entry 85%; }
    .paso--3 { animation-range: entry 20% entry 100%; }
    .paso-nodo {
      animation: nodo-llega linear both;
      animation-timeline: --paso;
      animation-range: entry 40% cover 40%;
    }
    .no-hago-lista li {
      animation: capitulo-asienta linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes riel-se-dibuja { from { scale: var(--riel-desde); } }
@keyframes nodo-llega { from { transform: scale(0.45); } }

/* Celular: la vía se para y los pasos bajan por ella */
@media (max-width: 47.99rem) {
  .como-cabeza,
  .no-hago { grid-template-columns: 1fr; }
  /* La escala, arriba del primer paso y abajo del último */
  .camino { display: flex; flex-direction: column; }
  .camino-escala { display: contents; }
  .camino-escala span:first-child { margin-bottom: 1.25rem; }
  .camino-escala span:first-child::after { content: " ↓"; }
  .camino-escala span:last-child { order: 2; margin-top: 1.5rem; }
  .camino-escala span:last-child::after { content: none; }
  .camino-pasos { order: 1; grid-template-columns: 1fr; gap: 0; }
  /* La vía por tramos: de cada nodo al siguiente, y termina en el último */
  .camino-pasos::before,
  .camino-pasos::after { display: none; }
  .paso:not(:last-child)::before,
  .paso:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(var(--nodo) / 2 - 1px);
    top: calc(0.1rem + var(--nodo) / 2);
    bottom: calc(-0.1rem - var(--nodo) / 2);
    width: 2px;
    border-radius: 2px;
    background: var(--linea);
  }
  .paso:not(:last-child)::after {
    background: linear-gradient(to bottom, var(--linea), var(--enlace));
    transform-origin: center top;
  }
  .paso { display: block; grid-row: auto; padding: 0 0 2.25rem calc(var(--nodo) + 1.25rem); }
  .paso:last-child { padding-bottom: 0; }
  .paso-nodo { top: 0.1rem; }
  .paso-titulo { margin-top: 0.2rem; }
  .paso-precio { padding-top: 2rem; background-position: left 0.9rem; }
  /* Que la barra fija de WhatsApp no tape el final del camino */
  .no-hago { margin-top: calc(var(--alto-barra) + 2.5rem); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 47.99rem) {
    .paso:not(:last-child)::after {
      animation: riel-tramo linear both;
      animation-timeline: --paso;
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes riel-tramo { from { scale: 1 0; } }

/* =========================================================================
   Quién soy. Papel, corta. En escritorio, una credencial a la izquierda (la
   foto chica y, debajo, los datos que se pueden comprobar en renglones de
   rótulo y dato) y al lado quién es y dónde trabaja. La foto conserva su
   color y lleva apenas un toque de la marca (una capa turquesa → navy en
   modo «color», muy baja): se ve elegida, no filtrada. Sin botones: el
   llamado es el cierre.
   ========================================================================= */
.quien {
  --radio-foto: 16px;
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  grid-template-areas:
    "foto  cabeza"
    "foto  texto"
    "datos texto";
  grid-template-rows: auto auto 1fr;
  gap: 0 clamp(2rem, 0.5rem + 5vw, 6rem);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem) var(--margen) 0;
}

.quien-foto {
  grid-area: foto;
  align-self: start;
  justify-self: start;
  width: min(100%, 10rem);
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-foto);
  overflow: clip;
  background: linear-gradient(160deg, var(--turquesa-tinta), var(--navy) 72%);
}
.quien-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 28%;
  filter: saturate(0.9) contrast(1.03);
}
/* El toque de marca: el degradé sólo tiñe un poco el color, la luz es la de
   la foto. Arriba de todo, la línea de borde muy tenue por dentro. */
.quien-foto::before,
.quien-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.quien-foto::before {
  z-index: 1;
  background: linear-gradient(160deg, var(--turquesa-tinta), var(--navy) 80%);
  mix-blend-mode: color;
  opacity: 0.16;
}
.quien-foto::after {
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgb(10 22 40 / .12);
}

.quien-cabeza { grid-area: cabeza; }
.quien-antetitulo {
  margin-bottom: 0.9rem;
  font-size: var(--t-chico);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--enlace);
}
.quien-titulo {
  max-width: 20ch;
  font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.quien-texto {
  grid-area: texto;
  display: grid;
  gap: 1rem;
  max-width: 38em;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: var(--tinta-2);
  line-height: 1.6;
}
.quien-fuerte { color: var(--tinta); font-weight: 650; }
.quien-fuerte .pendiente { font-weight: 500; }

/* La ficha: una columna de renglones rótulo-dato, debajo de la foto en
   escritorio y a lo ancho en el celular */
.quien-datos {
  grid-area: datos;
  align-self: start;
  display: grid;
  margin: 1.5rem 0 0;
}
.quien-datos > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: baseline;
  padding-block: 0.6rem;
  border-top: 1px solid var(--linea);
}
.quien-datos > div:last-child { border-bottom: 1px solid var(--linea); }
.quien-datos dt {
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--tenue);
}
.quien-datos dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.quien-datos .pendiente { font-weight: 500; }

/* Ligado al scroll: la foto se destapa desde abajo y se asienta en su
   escala, el texto y cada renglón de la ficha suben un poco al entrar. Sin
   soporte o con «reducir movimiento», todo quieto y en su lugar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .quien-foto {
      animation: foto-se-destapa linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .quien-foto img {
      animation: foto-se-asienta linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .quien-cabeza,
    .quien-texto,
    .quien-datos > div {
      animation: capitulo-asienta linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .quien-datos > div:nth-child(3n + 2) { animation-range: entry 10% entry 85%; }
    .quien-datos > div:nth-child(3n + 3) { animation-range: entry 20% entry 100%; }
  }
}
@keyframes foto-se-destapa {
  from { clip-path: inset(10% 0 0 0 round var(--radio-foto)); translate: 0 2rem; }
  to { clip-path: inset(0 round var(--radio-foto)); }
}
@keyframes foto-se-asienta { from { scale: 1.08; } }

/* Tableta: la credencial más angosta y el rótulo más corto */
@media (max-width: 59.99rem) {
  .quien { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .quien-datos > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* Celular: la foto chica al lado del título, y el resto a lo ancho. La
   ficha en renglones de rótulo y dato para que entre en poco alto. */
@media (max-width: 47.99rem) {
  .quien {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-areas:
      "foto cabeza"
      "texto texto"
      "datos datos";
    grid-template-rows: auto;
    gap: 0 1.25rem;
  }
  .quien-foto { --radio-foto: 14px; align-self: center; width: 100%; }
  .quien-antetitulo { margin-bottom: 0.5rem; }
  .quien-titulo { font-size: clamp(1.375rem, 1rem + 1.6vw, 1.75rem); }
  .quien-datos { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
  .quien-datos > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* «Quién soy» en el menú sólo desde 64rem: entre 48 y 64 no entra sin
   apretar la cabecera, y en el celular el menú no se dibuja. */
@media (max-width: 63.99rem) {
  .navegacion .solo-escritorio { display: none; }
}
/* Entre 64 y 72rem, con cuatro secciones, el menú se aprieta un poco para
   que el botón de WhatsApp siga en un renglón. */
@media (min-width: 64rem) and (max-width: 71.99rem) {
  .navegacion ul { gap: 0.25rem 1.25rem; }
}