/* Cambios de contrato #8 y #9, más el arreglo de raíz de los rótulos del microchart.
 * Va después de responsive.css y de hero.css: acá se decide, y lo de antes es la base.
 */

/* ── #8 · aire entre la píldora del nav y el inicio del contenido ───────────
 * Medido antes de tocar: el hueco entre el fondo de la píldora y el primer contenido era de
 * 55 px en desktop y 36 en mobile. Objetivo 80 y 56.
 *
 * El criterio no es un número lindo: la píldora mide 53-56 px de alto, y un hueco del orden de
 * su propia altura se lee como separación decidida en vez de como sobra.
 *
 * El conflicto que estaba previsto —que el aire empujara el badge "Demo en vivo" fuera del
 * viewport inicial— NO se dispara, y eso se midió, no se supuso: el badge estaba a 773 px con
 * viewport de 900 en desktop (127 de sobra) y a 627 con 844 en iPhone (217 de sobra). Los +25
 * y +20 entran sin tocar ni los logos ni las métricas. hero-fold.mjs lo vuelve a verificar.
 *
 * Se fija padding-top y sólo eso: los laterales y el fondo de cada tramo quedan como están. */
@media (min-width: 768px) {
  [style*="padding: 98px 24px 24px"] { padding-top: 118px !important; }
}

@media (max-width: 767px) {
  [style*="padding: 98px 24px 24px"] { padding-top: 91px !important; }
}

/* ── #9 · escalón mobile de la bajada del hero ──────────────────────────────
 * En desktop la bajada pasa a 18px por el EDIT del build. En mobile el responsive bajaba los
 * 20px a 17 con [style*="font-size: 20px"], selector que ya no matchea. Sin esta regla la
 * bajada quedaría en 18 en el teléfono, MÁS GRANDE que hoy.
 *
 * Va por clase y no por huella de estilo: [style*="font-size: 18px"] se llevaría puestos los
 * otros 8 usos de ese tamaño en el sitio. La proporción es la que ya usaba el sistema:
 * 20→17 era ~0,85; 18→15 es ~0,83. */
@media (max-width: 767px) {
  .upran-hero-bajada { font-size: 15px !important; }
}

/* El arreglo de raíz de los rótulos del microchart vive en css/tipografia.css, con el resto de
 * la tanda de emergencia: es el mismo bug, no un cambio de contrato. */

/* ── La banda de la preview, en mobile ──────────────────────────────────────
 * "Navegá las secciones. Los leads son de un entorno de demostración." es una tercera columna
 * en una fila que en un teléfono ya venía apretada: los tres textos quedaban en columnas de dos
 * o tres palabras, uno al lado del otro, ilegibles.
 *
 * Se oculta sólo en mobile —en escritorio la fila tiene aire de sobra y el texto informa— y los
 * dos que quedan pasan al centro. El space-between con un solo hijo lo empujaría a la izquierda.
 *
 * No se toca ningún valor del contrato: se oculta y se centra. */
@media (max-width: 767px) {
  [style*="justify-content: space-between"][style*="padding-bottom: 16px"] > span[style*="color: var(--brand-soft)"] {
    display: none !important;
  }

  [style*="justify-content: space-between"][style*="padding-bottom: 16px"] {
    justify-content: center !important;
  }
}