/* Estilos de /gracias y /instalar */
.top { padding: 18px 0; }
.post { max-width: 780px; padding-top: 28px; padding-bottom: 72px; }
.post h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.post .bajada { margin-top: 14px; }
.post .bajada strong { color: var(--texto); }
.bloque { margin-top: 44px; }
.bloque > h2 { font-size: clamp(22px, 3.2vw, 28px); }
.bloque > p { color: var(--suave); margin-top: 8px; }

/* Estado del pago */
.estado-icono { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 22px; }
.estado-ok .estado-icono { background: var(--verde); }
.estado-espera .estado-icono { background: var(--acento); }
.estado-mal .estado-icono { background: var(--rojo); }
.cargando-ico { width: 30px; height: 30px; border: 4px solid rgba(28, 27, 58, .25); border-top-color: var(--tinta); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Línea de tiempo */
.linea { list-style: none; margin-top: 30px; background: var(--fondo-2); border-radius: var(--r); padding: 8px 22px; }
.linea li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; position: relative; }
.linea li + li { border-top: 1px solid var(--linea); }
.linea .punto { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea); }
.linea .hecho .punto { background: var(--verde); border-color: var(--verde); }
.linea .ahora .punto { border-color: var(--acento); }
.linea .ahora .punto::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--acento); animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(.6); opacity: .6; } }
.linea strong { display: block; font-size: 17px; }
.linea span { color: var(--suave); font-size: 15.5px; }
.linea span b { color: var(--texto); }

.acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.nota { margin-top: 26px; padding: 16px 18px; border-radius: var(--r-chico); background: var(--fondo-2); color: var(--suave); font-size: 15.5px; }
.nota a { color: var(--texto); font-weight: 700; }
.nota strong { color: var(--texto); }
.guia { margin-top: 18px; list-style: none; }

/* Títulos como zócalo de noticiero, igual que en la landing */
.z { font-weight: 800; letter-spacing: -0.035em; line-height: 1.18; }
.z span {
  background: var(--z, var(--acento)); color: var(--tinta);
  padding: 0.02em 0.26em 0.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.post h1.z { font-size: clamp(32px, 5.4vw, 52px); }

/* Botón de baja */
.caja-baja { margin-top: 30px; max-width: 520px; }
.caja-texto { color: var(--tinta-suave); margin: -6px 0 18px; }
.btn-baja { width: 100%; }