/* Puentes del panel de afinación.
 *
 * Cada regla acá re-declara un valor que ya existe, pero leyéndolo de una variable CSS con
 * FALLBACK igual al valor de hoy. Sin ninguna variable puesta, esto no cambia absolutamente
 * nada: var(--af-aire-desktop, 118px) vale 118px hasta que alguien defina la variable.
 *
 * INVARIANTE: cada fallback de acá tiene que ser idéntico al valor `v` del control equivalente
 * en js/afinar.js. Si se separan, el panel arranca mostrando un número que no es el que está en
 * pantalla. Al bajar un cambio afinado se mueven los dos, siempre.
 *
 * Se verifica igual que cualquier otra cosa: antes/después contra producción tiene que dar 0.
 *
 * El panel (js/afinar.js) define las variables en :root SÓLO en la sesión de quien lo abre, y
 * no persiste para nadie. Este archivo sí viaja siempre: es inerte.
 *
 * Va último, después de aire.css: acá se decide.
 */

/* Píldora del nav: sólo el padding vertical, que es lo que cambia su altura. El horizontal es
 * asimétrico en el export (10 a la derecha, 16 a la izquierda) y tocarlo con un solo número
 * rompería esa asimetría, que es deliberada. */
.upran-nav-pill {
  padding-top: var(--af-pill-pad, 8px) !important;
  padding-bottom: var(--af-pill-pad, 8px) !important;
}

/* Alto de la demo en desktop. En mobile el responsive lo fija por breakpoint (852/812/760) y
 * ahí no se toca desde acá: serían tres deslizadores más para un caso que ya está resuelto. */
@media (min-width: 768px) {
  [data-demo] { height: var(--af-demo-alto, 496px) !important; }
}

/* Padding vertical de las secciones grandes. El horizontal NO: en mobile lo baja el arreglo de
 * los rótulos del microchart, y pisarlo desde acá reabriría ese bug. */
[style*="padding: 72px 56px"] {
  padding-top: var(--af-seccion-pad, 72px) !important;
  padding-bottom: var(--af-seccion-pad, 72px) !important;
}

/* Cuerpo de la bajada del hero (#9) */
.upran-hero-bajada {
  font-size: var(--af-bajada-desktop, 18px) !important;
  /* Jerarquía 2026-08-13. max-width con fallback en PX (700 es el contrato, exacto); el slider
   * escribe ch. margin-top aditivo sobre el gap real de 17px de hero.css: con 0px el render es
   * idéntico al de hoy — puente inerte, como todos. */
  max-width: var(--af-bajada-ancho, 700px) !important;
  margin-top: var(--af-gap-titulo, 0px) !important;
}

/* bajada↔CTAs, aditivo. El selector es el mismo que hero.css usa para la fila de los CTA. */
[style*="padding-top: 80px"][style*="padding-bottom: 80px"] {
  margin-top: var(--af-gap-ctas, 0px) !important;
}

@media (min-width: 768px) {
  /* Aire entre la píldora del nav y el contenido (#8) */
  [style*="padding: 98px 24px 24px"] {
    padding-top: var(--af-aire-desktop, 118px) !important;
  }

  /* Paddings verticales del bloque del hero (cambio de diseño #4) */
  [style*="padding: 90px 64px 40px"] {
    padding-top: var(--af-hero-top, 51px) !important;
    padding-bottom: var(--af-hero-bottom, 4px) !important;
    gap: var(--af-hero-gap, 17px) !important;
  }
}

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

  .upran-hero-bajada {
    font-size: var(--af-bajada-mobile, 15px) !important;
  }
}

/* Carrusel de logos: separación entre piezas y tamaño aparente del logo.
 *
 * El tamaño va por transform: scale() y NO por background-size, y eso no es un rodeo elegante
 * sino la única forma correcta. Cada logo trae su propio background-size en el inline —está en
 * la lista congelada del contrato justamente porque se calibró pieza por pieza—, así que
 * escribir un solo valor para todos los reescalaba a todos por igual. Se vio: 1924 px de
 * diferencia contra producción en la banda de logos, con el alto de página intacto.
 *
 * scale() multiplica lo que cada uno ya tiene y respeta su calibración. Además transform no
 * participa del layout, así que mover este deslizador no corre a los vecinos: se ve el tamaño
 * nuevo sin que la fila se reacomode. Para afinar es incluso mejor.
 *
 * La separación va POR TRAMO y no con un solo valor: el responsive achica la caja a 116×44 y
 * junta el paso a 12px en mobile, mientras el desktop tenía los 30 de la calibración óptica del
 * contrato. Un puente con un único fallback le imponía los 30 al teléfono — 613 px de diferencia
 * contra producción en la banda de logos, con el alto intacto.
 *
 * La ESCALA también va acotada a desktop, y por la misma razón: el #11 se afinó a 1920 y mobile
 * tenía que quedar intacto. Sin acotarla, el 0,91 achicaba también los logos del teléfono, que
 * nadie miró ni aprobó. transform no participa del layout, así que el diff de mobile daba 0 y
 * el error habría pasado sin ruido. */
@media (min-width: 768px) {
  [style*="upran-marquee"] > [role="img"] {
    margin-left: var(--af-logos-gap-desktop, 0px) !important;
    margin-right: var(--af-logos-gap-desktop, 0px) !important;
    transform: scale(var(--af-logos-escala, 0.91));
  }

  /* CAMBIO #11 · duración del marquee, para conservar la velocidad de hoy.
   * Al sacar los 30 px de cada lado la tira pasa de 3904 a 2944 px: los mismos 34 s sobre 75 %
   * del recorrido dejaban el carrusel un 25 % más lento. 34 × 0,754 ≈ 26 s lo devuelve a la
   * velocidad de antes.
   *
   * Sólo desktop, y no es un detalle: en mobile la separación no cambió, así que la tira mide
   * lo mismo (2240 px) y bajar la duración allá lo aceleraría un 31 %.
   *
   * El selector pide 34s además del nombre porque hay DOS marquees con la misma animación: el
   * de logos a 34 s y el de "Real results" a 52 s. Sin esa parte, este cambio se llevaba puesto
   * también al otro.
   *
   * Y va DENTRO de prefers-reduced-motion: no-preference, que no es una elegancia. Acá el
   * !important es obligatorio —hay que vencer al `animation: 34s ...` inline, y contra un inline
   * la especificidad no alcanza—, pero ese mismo !important, con especificidad (0,2,0), le gana
   * a la regla global `* { animation-duration: 0.01ms !important }` y dejaba el carrusel
   * corriendo con movimiento reducido activo. Se vio en el diff post-deploy: 3394 px de
   * diferencia en la banda de logos, porque el marquee estaba en marcha durante la captura.
   * Envuelto así, con reduced-motion esta regla directamente no existe y la global manda.
   * Es la tercera vez que este proyecto tropieza con lo mismo: el panel del menú, el toggle de
   * tema y ahora esto. */
  @media (prefers-reduced-motion: no-preference) {
    [style*="upran-marquee"][style*="34s"] {
      animation-duration: var(--af-logos-duracion, 26s) !important;
    }
  }
}

@media (max-width: 767px) {
  [style*="upran-marquee"] > [role="img"] {
    margin-left: var(--af-logos-gap-mobile, 12px) !important;
    margin-right: var(--af-logos-gap-mobile, 12px) !important;
  }
}