/* ============================================================
   Orion Growth Partners, landing oficial
   Tanda 1: esqueleto, bloques estáticos, calculadora, tabla.
   Tanda 2: mockups de los bloques 2, 5, 6 y 7, animaciones GSAP.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --fondo: #EEF0F4;
  --superficie: #FFFFFF;
  --azul: #265CA7;
  --azul-claro: #4473BB;
  --azul-velado: #F4F7FB;
  --tinta: #17181B;
  --texto: #4C4D4E;
  --linea: #E1E1E1;
  --naranja: #DC5B31;

  /* Variantes de opacidad de --tinta, no son colores nuevos. */
  --tinta-70: rgba(23, 24, 27, 0.70);
  --tinta-55: rgba(23, 24, 27, 0.55);
  --tinta-40: rgba(23, 24, 27, 0.40);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radio-tarjeta: 18px;
  --sombra-tarjeta: 0 1px 2px rgba(23, 24, 27, .05), 0 26px 60px -40px rgba(23, 24, 27, .30);
  /* Sombra más presente y difusa, para tarjetas y filas que deben sentirse apoyadas sobre el fondo. */
  --sombra-elevada: 0 10px 24px -8px rgba(23, 24, 27, .14), 0 44px 90px -36px rgba(23, 24, 27, .36);

  /* Las cuatro curvas de la pagina. El `ease` que trae CSS de fabrica se
     nota barato, asi que todo movimiento usa una de estas cuatro.
     Entrada: frena al llegar, que es como se detienen las cosas de verdad.
     Salida: arranca lento y se va rapido, para lo que desaparece.
     Mueve: pareja de los dos lados, para lo que va de un lugar a otro.
     Rebote: se pasa un poco y vuelve, solo para lo que aterriza. */
  --curva-entrada: cubic-bezier(.33, 1, .68, 1);
  --curva-salida: cubic-bezier(.32, 0, .67, 0);
  --curva-mueve: cubic-bezier(.45, 0, .55, 1);
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; }

/* ---------- Utilidades ---------- */
.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 40px);
}

.bloque {
  padding-top: clamp(56px, 9vw, 120px);
  padding-bottom: clamp(56px, 9vw, 120px);
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--azul);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.antetitulo::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--azul);
}

.titular {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tinta);
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -.01em;
  max-width: 22ch;
}
.titular em,
.titular .acento {
  color: var(--azul);
  font-style: italic;
  font-weight: 600;
}

.parrafo {
  font-family: var(--sans);
  color: var(--texto);
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.6;
  max-width: 46ch;
  margin-top: 18px;
}

.cifra {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

/* ---------- Botón ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--azul), var(--azul-claro));
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 18px 34px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 32px -12px rgba(38, 92, 167, .55), 0 3px 8px rgba(38, 92, 167, .28);
  /* Este tiempo es el del regreso. El hundido lo acorta la regla de :active,
     asi el clic responde de una y la vuelta se alcanza a ver. */
  transition: box-shadow 180ms var(--curva-entrada), transform 180ms var(--curva-entrada);
  /* Pivotea desde la base, como un boton de verdad apoyado en la pagina. */
  transform-origin: center bottom;
  white-space: nowrap;
}
.boton:hover {
  box-shadow: 0 22px 42px -14px rgba(38, 92, 167, .6), 0 5px 12px rgba(38, 92, 167, .32);
  transform: translateY(-2px);
}
/* El boton baja, encoge, y la sombra colapsa. Algo pegado al piso no proyecta
   sombra larga, y esa es la parte que hace que el clic se sienta. */
.boton:active {
  transform: translateY(2px) scale(.97);
  box-shadow: 0 4px 10px -4px rgba(38, 92, 167, .45), 0 1px 3px rgba(38, 92, 167, .30);
  transition-duration: 60ms;
}
.boton:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 3px;
}
.boton--pequeno {
  padding: 12px 24px;
  font-size: 14.5px;
  box-shadow: 0 10px 22px -10px rgba(38, 92, 167, .5), 0 2px 6px rgba(38, 92, 167, .24);
}
.boton--pequeno:active {
  box-shadow: 0 3px 8px -3px rgba(38, 92, 167, .42), 0 1px 2px rgba(38, 92, 167, .26);
}

/* ---------- Bloque 1, barra superior ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Vidrio de verdad: el fondo se transparenta y lo que pasa por detras se ve borroso. */
  background: rgba(255, 255, 255, .20);
  backdrop-filter: saturate(200%) blur(22px);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 1px 0 rgba(23, 24, 27, .05), 0 10px 30px -22px rgba(23, 24, 27, .35);
  transition:
    background-color 260ms var(--curva-entrada),
    box-shadow 260ms var(--curva-entrada),
    border-color 260ms var(--curva-entrada);
}
/* Al bajar del inicio el vidrio se cierra y la sombra se marca. Le dice al
   lector que ya dejo atras la portada. */
.topbar[data-bajado] {
  background: rgba(255, 255, 255, .52);
  border-bottom-color: rgba(255, 255, 255, .70);
  box-shadow: 0 1px 0 rgba(23, 24, 27, .06), 0 14px 34px -20px rgba(23, 24, 27, .45);
}
.topbar .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.topbar__logo {
  /* La barra mide unos 72px de alto (14px de relleno arriba y abajo). El logo recortado ya no
     trae aire transparente, así que su alto de caja ahora es el alto visual real. */
  height: clamp(36px, 5.4vw, 44px);
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.topbar .boton--pequeno {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

@media (max-width: 400px) {
  .topbar .boton--pequeno {
    padding: 9px 14px;
    font-size: 12.5px;
  }
}

/* ---------- Bloque 2, portada ---------- */
.portada {
  padding-top: clamp(56px, 9vw, 118px);
  padding-bottom: 0;
}
.portada__texto {
  /* 1020px es el ancho que necesita la frase más larga del giro para entrar en una línea. */
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}
.portada__titular {
  max-width: none;
  font-size: clamp(30px, 4.6vw, 56px);
}
.portada__parrafo {
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(14.5px, 1.15vw, 16px);
  color: var(--tinta-55);
}
.portada__acciones {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* La zona donde giran las frases. El recorte deja ver una frase a la vez. */
.giro {
  --giro-tam: clamp(30px, 4.6vw, 56px);
  position: relative;
  overflow: hidden;
  margin: clamp(4px, .7vw, 10px) 0 clamp(20px, 2.6vw, 30px);
}
/* Un doble invisible de la frase mas larga. Fija el alto de la zona y se parte
   en dos lineas cuando la pantalla es angosta. */
.giro__medida {
  display: block;
  visibility: hidden;
  pointer-events: none;
}
/* La regla mide el ancho real de la frase en una sola linea. Va absoluta y el
   recorte de la zona la esconde, asi nunca ensancha la pagina. */
.giro__regla {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}
.giro__medida,
.giro__regla,
.giro__palabra {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--giro-tam);
  line-height: 1.18;
  letter-spacing: -.01em;
}
.giro__palabra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(100deg, var(--azul) 0%, var(--azul-claro) 62%, var(--azul) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Franja de logos de clientes */
.franja-clientes {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: clamp(28px, 4vw, 40px);
  padding-bottom: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--linea);
}
.franja-clientes__rotulo {
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--tinta-55);
  margin-bottom: clamp(22px, 3.5vw, 32px);
}
/* La cinta de rubros. Va de borde a borde y se desvanece en los dos extremos,
   asi el rubro que entra y el que sale no aparecen de golpe. */
.rubros {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.rubros__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.rubros__pista {
  display: flex;
  width: max-content;
  animation: correr-rubros 42s linear infinite;
}
.rubros__grupo {
  display: flex;
  align-items: center;
  gap: clamp(34px, 4.4vw, 62px);
  padding-right: clamp(34px, 4.4vw, 62px);
  margin: 0;
  list-style: none;
}
.rubros__uno {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  color: var(--tinta-40);
}
.rubros__icono {
  flex: none;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* El grupo va duplicado, asi que medio recorrido devuelve la cinta al inicio. */
@keyframes correr-rubros {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rubros__pista { animation: none; }
}

/* ---------- Bloque 3, los tres dolores ---------- */
/* Cada tarjeta abre con una imagen de la escena, se desvanece contra el blanco,
   y debajo va la pregunta de si o no con el detalle de lo que sucede. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 26px);
}
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: 22px;
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--dy, 0px));
  transition: transform .25s var(--curva-entrada), box-shadow .25s var(--curva-entrada);
  will-change: transform;
}
.tarjeta__imagen {
  position: relative;
}
.tarjeta__imagen img {
  display: block;
  width: 100%;
  height: auto;
}
/* El desvanecido hacia el blanco de la tarjeta, para que la imagen no corte seco. */
.tarjeta__imagen::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--superficie) 92%);
  pointer-events: none;
}
.tarjeta__texto {
  padding: 4px clamp(22px, 2.4vw, 30px) clamp(26px, 3vw, 34px);
}
.tarjeta__pregunta {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--tinta);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.3;
  letter-spacing: -.012em;
  max-width: 22ch;
}
.tarjeta__cuerpo {
  margin-top: 12px;
  font-family: var(--sans);
  color: var(--texto);
  font-size: 15.5px;
  line-height: 1.6;
}
/* El brillo sigue al cursor dentro de la tarjeta. */
.tarjeta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(38, 92, 167, .10), rgba(38, 92, 167, 0) 62%);
  opacity: 0;
  transition: opacity .25s var(--curva-entrada);
  pointer-events: none;
}
.tarjeta[data-cursor-activo]::after {
  opacity: 1;
}
.tarjeta[data-cursor-activo] {
  box-shadow: var(--sombra-elevada), 0 0 0 1px rgba(38, 92, 167, .10);
}

/* ---------- Bloque 4, la cadena de tres piezas ---------- */
/* Filas de altura fija, para que los nodos del SVG caigan justo en el
   centro de cada rotulo y la animacion tenga geometria estable. */
.solucion {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.cadena {
  --pad: 28px;
  --fila: 64px;
  position: relative;
  background: var(--superficie);
  border-radius: 22px;
  box-shadow: var(--sombra-elevada);
  padding: var(--pad);
  overflow: hidden;
}
.cadena::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46%;
  background: linear-gradient(180deg, var(--azul-velado) 0%, rgba(244, 247, 251, 0) 100%);
  pointer-events: none;
}
.cadena__svg {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  width: 56px;
  height: calc(3 * var(--fila));
  overflow: visible;
}
.cadena__ida {
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
  opacity: .3;
}
.cadena__regreso {
  fill: none;
  stroke: var(--naranja);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .7;
}
.cadena__punta {
  fill: var(--naranja);
  opacity: .7;
}
.cadena__halo {
  fill: rgba(38, 92, 167, .08);
}
.cadena__anillo {
  fill: var(--superficie);
  stroke: var(--azul);
  stroke-width: 2;
}
.cadena__nucleo {
  fill: var(--azul);
}
.cadena__nodo {
  transform-box: fill-box;
  transform-origin: center;
}
.cadena__rotulos {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 72px;
}
.cadena__rotulo {
  display: flex;
  align-items: center;
  height: var(--fila);
  font-family: var(--sans);
  font-weight: 600;
  color: var(--tinta);
  font-size: clamp(16.5px, 1.6vw, 19.5px);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.cadena__rotulo + .cadena__rotulo {
  border-top: 1px solid var(--linea);
}

/* ---------- Bloques 5, 6, 7: mecanismos ---------- */
.mecanismo__cabecera { max-width: 640px; }

.mecanismo__cuerpo {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.mecanismo__cuerpo--reverso { grid-template-columns: .85fr 1.15fr; }
.mecanismo__cuerpo--reverso .mecanismo__mockup { order: 2; }
.mecanismo__cuerpo--reverso .mecanismo__lateral { order: 1; }

.mecanismo__mockup {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: var(--sombra-elevada);
}
.mecanismo__mockup img {
  display: block;
  width: 100%;
  height: auto;
}

.mecanismo__lista {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
}
.mecanismo__lista li {
  list-style: none;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--tinta);
  font-size: 17px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.mecanismo__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--naranja);
}

/* Bloque 6, sin lateral: el mockup ocupa el ancho completo */
.mecanismo__cuerpo--ancho {
  grid-template-columns: 1fr;
}

/* Bloque 7, tira de las otras automatizaciones, línea de tiempo horizontal */
/* El nodo de la pieza que el cursor toca se abre un poco. */

/* ---------- Bloque 8, tabla de herramientas ---------- */
/* Cada fila es su propia pastilla blanca, separada por espacio y no por líneas divisorias,
   con la fila de cierre como barra oscura propia. Sigue siendo un <table> semántico, el
   efecto de pastilla se logra con border-collapse: separate y sombra/radio por fila. */
.tabla-herramientas {
  margin-top: clamp(40px, 6vw, 64px);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px;
  background: transparent;
  box-shadow: none;
}
.tabla-herramientas th,
.tabla-herramientas td {
  text-align: left;
  padding: 16px 24px;
  font-family: var(--sans);
  font-size: 14.5px;
  border-bottom: none;
}
.tabla-herramientas thead th {
  padding: 0 24px 4px;
  background: transparent;
  color: var(--azul);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tabla-herramientas tbody tr {
  background: var(--superficie);
  border-radius: 18px;
  box-shadow: var(--sombra-elevada);
}
.tabla-herramientas tbody td:first-child { border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.tabla-herramientas tbody td:last-child { border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.tabla-herramientas td.col-funcionalidad { font-weight: 700; color: var(--tinta); }
.tabla-herramientas td.col-precio {
  /* Excepción autorizada: las cifras de esta tabla van en Inter negrita, no en Playfair,
     por legibilidad. El resto de las cifras de la página se quedan en Playfair azul. */
  font-family: var(--sans);
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.tabla-herramientas td.col-check,
.tabla-herramientas thead th.col-check { text-align: center; }
.insignia-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--azul-velado);
  color: var(--azul);
  font-weight: 700;
  font-size: 15px;
}
.tabla-herramientas tr.fila-cierre {
  background: var(--tinta);
  box-shadow: var(--sombra-elevada);
}
.tabla-herramientas tr.fila-cierre td {
  background: transparent;
  color: #fff;
  font-weight: 700;
}
.tabla-herramientas tr.fila-cierre td:first-child { border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.tabla-herramientas tr.fila-cierre td:last-child { border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.tabla-herramientas tr.fila-cierre td.col-precio {
  color: #fff;
  font-size: 17px;
}
.tabla-herramientas tr.fila-cierre td.col-cierre-orion { text-align: left; }

/* Colapso a tarjetas en móvil, nunca scroll horizontal de la página */
@media (max-width: 720px) {
  .tabla-herramientas thead { display: none; }
  .tabla-herramientas, .tabla-herramientas tbody, .tabla-herramientas tr, .tabla-herramientas td {
    display: block;
    width: 100%;
  }
  .tabla-herramientas tbody tr { padding: 16px 22px; margin-bottom: 14px; }
  .tabla-herramientas tbody tr:last-child { margin-bottom: 0; }
  .tabla-herramientas tbody td:first-child,
  .tabla-herramientas tbody td:last-child { border-radius: 0; }
  .tabla-herramientas td {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .tabla-herramientas td::before {
    content: attr(data-etiqueta);
    font-weight: 600;
    color: var(--tinta-55);
    flex: 0 0 auto;
  }
  .tabla-herramientas td.col-check::before { content: 'Orion'; }
  .tabla-herramientas tr.fila-cierre { padding: 20px 22px; }
  .tabla-herramientas tr.fila-cierre td:first-child,
  .tabla-herramientas tr.fila-cierre td:last-child { border-radius: 0; }
  .tabla-herramientas tr.fila-cierre td::before { color: rgba(255,255,255,.75); }
  .tabla-herramientas tr.fila-cierre td.col-cierre-orion {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ---------- Bloque 9, calculadora ---------- */
.calculadora__cabecera { text-align: left; max-width: 640px; }

.calculadora__grilla {
  margin-top: clamp(40px, 6vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.calc-card {
  background: var(--superficie);
  border: 1px solid rgba(23, 24, 27, .05);
  border-radius: 18px;
  box-shadow: var(--sombra-tarjeta);
}
.calc-controles { padding: clamp(24px, 4.5vw, 34px); }
.calc-campo + .calc-campo { margin-top: 30px; }
.calc-campo__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.calc-campo__etiqueta {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}
.calc-pastilla {
  flex: 0 0 auto;
  background: var(--azul-velado);
  color: var(--azul);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  padding: 6px 12px;
  border-radius: 999px;
  text-align: center;
  min-width: 58px;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--azul) var(--p, 50%), var(--linea) var(--p, 50%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--azul);
  box-shadow: 0 2px 6px rgba(23, 24, 27, .20);
  transition: transform .12s var(--curva-entrada), box-shadow .12s var(--curva-entrada);
}
input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 3px 10px rgba(23, 24, 27, .24); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.08); }
input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(38, 92, 167, .22), 0 2px 6px rgba(23, 24, 27, .20);
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--linea); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--azul); }
input[type=range]::-moz-range-thumb {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--azul);
  box-shadow: 0 2px 6px rgba(23, 24, 27, .20);
}
input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(38, 92, 167, .22), 0 2px 6px rgba(23, 24, 27, .20);
}

.calc-resultados { display: flex; flex-direction: column; gap: 22px; }
.calc-hero { padding: clamp(28px, 4.5vw, 40px) clamp(22px, 4vw, 34px); text-align: center; }
.calc-hero__num {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--azul);
  font-size: clamp(44px, 12vw, 78px);
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.calc-hero__linea { font-size: 18px; font-weight: 500; color: var(--tinta-70); margin: 12px 0 0; }
.calc-hero__contexto {
  font-size: 14px;
  color: var(--tinta-55);
  line-height: 1.5;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.calc-hero__contexto b { font-family: var(--serif); font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.calc-reco { padding: clamp(24px, 4vw, 32px) clamp(22px, 4vw, 34px); }
.calc-reco__texto { font-size: 15.5px; line-height: 1.6; color: var(--tinta-70); margin: 0; text-align: center; }
.calc-reco__texto b { font-family: var(--serif); font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.calc-reco__grilla { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
.calc-reco__stat { text-align: center; padding: 4px 10px 2px; }
.calc-reco__stat + .calc-reco__stat { border-left: 1px solid var(--linea); }
.calc-reco__num {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--azul);
  font-size: clamp(25px, 6.4vw, 34px);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.calc-reco__cap { font-size: 12.5px; color: var(--tinta-55); margin-top: 8px; }

@media (max-width: 880px) {
  .calculadora__grilla { grid-template-columns: 1fr; }
}

/* ---------- Bloque 10, cierre ---------- */
.cierre {
  text-align: center;
  /* Halo radial muy suave, variante de opacidad de --azul-velado (no es un color nuevo),
     que se disuelve hacia el fondo de la página. */
  background: radial-gradient(ellipse 60% 65% at 50% 18%, rgba(244, 247, 251, .9) 0%, rgba(244, 247, 251, 0) 70%);
}
.cierre__contenedor { max-width: 640px; margin: 0 auto; }
.cierre__pregunta {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tinta);
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.25;
}
.cierre__acciones { margin-top: 32px; }

/* ---------- Pie ---------- */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, .78);
  padding: clamp(40px, 6vw, 56px) 0;
}
.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pie__logo { height: 36px; width: auto; }
.pie__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 32px);
  font-family: var(--sans);
  font-size: 14.5px;
}
.pie__contacto a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding-bottom: 2px;
  transition: color .18s var(--curva-entrada), border-color .18s var(--curva-entrada);
}
.pie__contacto a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .78);
}

/* ---------- Responsive general ---------- */
@media (max-width: 900px) {
  .portada {
    padding-top: clamp(40px, 8vw, 64px);
  }
  .portada__texto {
    max-width: none;
  }
}

@media (max-width: 860px) {
  .tarjetas { grid-template-columns: 1fr; }
  .mecanismo__cuerpo,
  .mecanismo__cuerpo--reverso {
    grid-template-columns: 1fr;
  }
  .mecanismo__cuerpo--reverso .mecanismo__mockup,
  .mecanismo__cuerpo--reverso .mecanismo__lateral {
    order: initial;
  }
  .solucion {
    grid-template-columns: 1fr;
  }
  /* En movil la tira se lee como lista: nodo a la izquierda, texto al lado. */
        }

@media (max-width: 520px) {
            .pie .contenedor { flex-direction: column; align-items: flex-start; }
}

/* En pantallas chicas el embudo y el chat se leen con scroll propio, nunca encogidos. */
@media (max-width: 700px) {
  .mecanismo__mockup--embudo,
  .mecanismo__mockup--chat {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mecanismo__mockup--embudo img,
  .mecanismo__mockup--chat img {
    width: 760px;
    max-width: none;
  }
}

/* ================= Mockups armados en codigo, bloques 5, 6 y 7 ================= */
/* Van en codigo y no en imagen porque tienen que moverse solos y el texto
   de interfaz tiene que quedar nitido en cualquier pantalla. */

/* ---------- Bloque 5, el telefono que contesta solo ---------- */
.escena {
  display: grid;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* El aparato: marco de aluminio, isla, botones y una sombra en capas. */
.fono {
  position: relative;
  padding: 11px;
  border-radius: 44px;
  background: linear-gradient(150deg, #55585f 0%, #23252a 22%, #16171a 52%, #2c2e33 78%, #55585f 100%);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, .28) inset,
    0 40px 60px -30px rgba(23, 24, 27, .55),
    0 18px 30px -20px rgba(23, 24, 27, .45),
    0 2px 6px rgba(23, 24, 27, .16);
}
.fono__pantalla {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #ECE5DD;
  aspect-ratio: 246 / 476;
  display: flex;
  flex-direction: column;
}
.fono__isla {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 21px;
  border-radius: 999px;
  background: #0B0C0E;
  z-index: 4;
}
.fono__brillo {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .07) 22%, rgba(255, 255, 255, 0) 44%);
}
.fono__boton {
  position: absolute;
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2f3237, #16171a);
}
.fono__boton--silencio { left: -2px; top: 74px; height: 20px; }
.fono__boton--sube     { left: -2px; top: 116px; height: 36px; }
.fono__boton--baja     { left: -2px; top: 164px; height: 36px; }
.fono__boton--lado     { right: -2px; top: 142px; height: 60px; }

/* La barra de estado de arriba, con hora y los tres iconos. */
.barra {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 20px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F6F6F6;
  color: #17181B;
  position: relative;
  z-index: 3;
}
.barra__hora {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -.01em;
}
.barra__iconos {
  display: flex;
  align-items: center;
  gap: 5px;
}
.barra__iconos svg { fill: currentColor; }

/* La cabecera del chat. */
.wa {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wa__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 6px;
  background: #F6F6F6;
  border-bottom: 1px solid rgba(23, 24, 27, .08);
  color: #3A3D42;
}
.wa__volver { flex: 0 0 auto; color: #2E76F6; }
.wa__cara {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.wa__quien { flex: 1 1 auto; min-width: 0; }
.wa__nombre {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: #17181B;
  line-height: 1.25;
}
.wa__estado {
  font-family: var(--sans);
  font-size: 10.5px;
  color: rgba(23, 24, 27, .45);
  line-height: 1.3;
}
.wa__acciones {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #2E76F6;
}
.wa__acciones svg { fill: currentColor; }

/* El hilo, con el fondo real de WhatsApp. */
.wa__hilo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 12px 9px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 7px;
  background-color: #ECE5DD;
  background-image: url("assets/mockups/wa-fondo.webp");
  background-size: 200px auto;
  background-repeat: repeat;
}
.wa__marca {
  align-self: center;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 1px rgba(23, 24, 27, .08);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(23, 24, 27, .5);
}
.msg {
  position: relative;
  max-width: 82%;
  padding: 6px 9px 5px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.42;
  color: #111B21;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
  will-change: transform, opacity;
}
.msg--ellos {
  align-self: flex-start;
  background: #FFFFFF;
  border-top-left-radius: 2px;
}
.msg--nos {
  align-self: flex-end;
  background: #D9FDD3;
  border-top-right-radius: 2px;
}
/* La colita de cada burbuja, igual que en la app. */
.msg::before {
  content: "";
  position: absolute;
  top: 0;
  width: 9px;
  height: 11px;
}
.msg--ellos::before {
  left: -7px;
  background: #FFFFFF;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.msg--nos::before {
  right: -7px;
  background: #D9FDD3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.msg__pie {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  float: right;
  margin: 4px 0 0 8px;
  transform: translateY(2px);
}
.msg__hora {
  font-size: 9px;
  color: rgba(17, 27, 33, .45);
  white-space: nowrap;
}
.msg__check {
  display: inline-flex;
  color: rgba(17, 27, 33, .4);
}
.msg__check[data-visto] { color: #53BDEB; }

/* Los tres puntos de "escribiendo". */
.tecleo {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  border-top-left-radius: 2px;
  background: #FFFFFF;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
  opacity: 0;
}
.tecleo[data-lado="nos"] {
  align-self: flex-end;
  background: #D9FDD3;
  border-top-left-radius: 8px;
  border-top-right-radius: 2px;
}
.tecleo i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(17, 27, 33, .34);
}

/* La barra de escribir. */
.wa__abajo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px 12px;
  background: #F6F6F6;
  border-top: 1px solid rgba(23, 24, 27, .07);
}
.wa__campo {
  flex: 1 1 auto;
  height: 27px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(23, 24, 27, .07);
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(23, 24, 27, .38);
}
.wa__enviar {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--azul);
  color: #fff;
}

/* La agenda de al lado. */
.agenda {
  background: var(--superficie);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: var(--sombra-elevada);
}
.agenda__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.agenda__dia {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
}
.agenda__nota {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--tinta-40);
}
.agenda__horas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agenda__horas li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agenda__hora {
  flex: 0 0 46px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--tinta-40);
}
.agenda__ranura {
  position: relative;
  flex: 1 1 auto;
  height: 42px;
  border-radius: 10px;
  background: var(--azul-velado);
  border: 1px dashed var(--linea);
}
.agenda__cita {
  position: absolute;
  inset: -1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--azul-claro), var(--azul));
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(38, 92, 167, .85);
  will-change: transform, opacity;
}
.agenda__quien {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
}
.agenda__sello {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(255, 255, 255, .75);
}
/* La onda que sale cuando la cita aterriza. */
.agenda__ranura::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  box-shadow: 0 0 0 0 rgba(38, 92, 167, .5);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .escena {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
  }
  .fono { width: 252px; }
  .agenda { width: 100%; max-width: 380px; }
}

/* ---------- Bloque 6, el embudo de la plataforma que se mueve solo ---------- */
.panel {
  --gap: clamp(8px, 1vw, 14px);
  --alto-ficha: 138px;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: clamp(14px, 1.8vw, 20px);
  box-shadow: var(--sombra-elevada);
}
.panel__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.panel__barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.panel__pipeline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--tinta);
  padding: 7px 14px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
}
.panel__total {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--azul);
}
.panel__cabeceras {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  margin-bottom: 12px;
}
.etapa {
  min-width: 0;
  padding: 10px 12px 11px;
  border-radius: 10px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--tono);
}
.etapa__fila {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.etapa__punto {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tono);
}
.etapa__titulo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etapa__cuenta {
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--tinta-40);
}
.etapa__cuenta span {
  display: inline-block;
  font-weight: 600;
  color: var(--texto);
}

/* Las columnas de fondo dan la sensacion de tablero sin encerrar las fichas. */
.panel__columnas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  height: 0;
}
.panel__columnas span {
  display: block;
  height: calc(var(--alto-ficha) * 2 + var(--gap) + 8px);
  border-radius: 12px;
  background: var(--azul-velado);
}
.panel__pista {
  position: relative;
  height: calc(var(--alto-ficha) * 2 + var(--gap));
  padding-top: 4px;
}
.ficha {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--alto-ficha);
  padding: 11px 12px 9px;
  border-radius: 10px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(23, 24, 27, .06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.ficha__tope {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ficha__nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ficha__perfil {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  display: grid;
  place-items: center;
  color: var(--tinta-40);
}
.ficha__campos {
  margin: 0;
  display: grid;
  gap: 3px;
  font-family: var(--sans);
  font-size: 11px;
}
.ficha__campos > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
}
.ficha__campos dt {
  color: var(--texto);
  font-weight: 500;
  white-space: nowrap;
}
.ficha__campos dd {
  margin: 0;
  color: var(--tinta-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ficha__iconos {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta-40);
}
.ficha__globo {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 9.5px;
  display: grid;
  place-items: center;
}

/* ---------- Bloque 7, el telefono y la linea que se enciende ---------- */
.ruta {
  display: grid;
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* El hilo de este telefono es largo, asi que se desplaza de verdad. */
.wa__hilo--largo {
  justify-content: flex-start;
  padding-bottom: 18px;
}

/* La ficha de cita confirmada que llega dentro de la burbuja. */
.msg--ficha { padding-bottom: 6px; }
.ficha-cita {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-bottom: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .72);
}
.ficha-cita__marca {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--azul);
  color: #fff;
}
.ficha-cita__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ficha-cita__titulo { font-weight: 600; font-size: 11px; color: #111B21; }
.ficha-cita__dato { font-size: 10.5px; color: rgba(17, 27, 33, .55); }

/* Los botones de respuesta rapida, iguales a los de la app. */
.msg--consulta, .msg--resena { display: flex; flex-direction: column; }
.msg__linea { display: block; }
.msg__botones {
  display: flex;
  flex-direction: column;
  margin: 7px -9px -5px;
  border-radius: 0 0 7px 7px;
  overflow: hidden;
  background: #FFFFFF;
}
.msg__boton {
  padding: 7px 9px;
  border-top: 1px solid rgba(17, 27, 33, .09);
  text-align: center;
  font-weight: 500;
  font-size: 11px;
  color: #2E76F6;
}
.msg__botones .msg__boton:first-child { border-top: 0; }
.msg__boton[data-tocado] { background: rgba(46, 118, 246, .09); }

/* Las estrellas y el enlace de la resena. */
.estrellas {
  display: flex;
  gap: 3px;
  margin: 7px 0 5px;
  color: #E1E1E1;
}
.estrellas svg { fill: currentColor; }
.estrellas svg[data-viva] { fill: #F2B01E; }
.msg__enlace {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #2E76F6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* La linea de pasos: un riel que se llena y puntos que se encienden. */
.pasos {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px 0 4px 30px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}
.pasos__riel {
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--linea);
  overflow: hidden;
}
.pasos__relleno {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--azul-claro), var(--azul));
}
.pasos__paso { position: relative; }
.pasos__punto {
  position: absolute;
  left: -30px;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: 0 0 0 2px var(--linea) inset;
}
.pasos__punto::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--azul);
  transform: scale(0);
}
.pasos__titulo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--tinta-40);
  line-height: 1.4;
}
.pasos__cuando {
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--tinta-40);
  opacity: .7;
}
.pasos__punto::after { transition: transform .34s var(--curva-rebote); }
.pasos__paso[data-hecho] .pasos__punto { box-shadow: 0 0 0 2px var(--azul) inset; }
.pasos__paso[data-hecho] .pasos__punto::after { transform: scale(1); }
.pasos__paso[data-hecho] .pasos__titulo { color: var(--tinta); }
.pasos__paso[data-vivo] .pasos__cuando { color: var(--azul); opacity: 1; }

@media (max-width: 900px) {
  .ruta {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 26px;
  }
  .ruta .fono { width: 246px; }
  .pasos { width: 100%; max-width: 420px; }
}

/* El titular y el visual de los mecanismos van juntos en una sola fila,
   para que la seccion se lea de un vistazo sin tener que bajar. */
.mecanismo--pareja > .contenedor {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.mecanismo--pareja .mecanismo__cabecera {
  max-width: 460px;
}
.mecanismo--pareja .escena,
.mecanismo--pareja .ruta {
  margin-top: 0;
}
#recompra > .contenedor {
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
}
.mecanismo--pareja .titular {
  font-size: clamp(28px, 3.4vw, 40px);
}
@media (max-width: 900px) {
  .mecanismo--pareja > .contenedor,
  /* El selector con id de arriba pesa mas, asi que aca se repite para que
     el bloque 7 tambien pase a una sola columna en pantallas angostas. */
  #recompra > .contenedor {
    grid-template-columns: 1fr;
  }
  .mecanismo--pareja .mecanismo__cabecera {
    max-width: none;
  }
}

/* ---------- Movimiento reducido ---------- */
/* Quien pide menos movimiento en su sistema recibe la pagina quieta. Los
   modulos de JavaScript ya consultan lo mismo y no arrancan sus lineas de
   tiempo, esto apaga lo que vive solo en la hoja de estilos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}