/* Cambio de contrato #14 — sección Top Creatives.
 *
 * Portada de design/referencias/top-creatives-fila4-v3.html al sistema real. Acá va sólo lo que
 * no puede ir inline: media queries, keyframes y estados. Los colores van por token, siempre.
 *
 * MAPEO DE TOKENS, porque el mockup traía su propia paleta y dos nombres chocaban de frente:
 *
 *   mockup --brand      #7C3AED violeta azulado   →  --brand      #7A2E8E, el del sitio
 *   mockup --brand-soft #F3EBFB tinte de fondo    →  --brand-surface, NO --brand-soft
 *   mockup --bad        #B3261E                   →  --sem-red    (idéntico)
 *   mockup --ok         #1A7F4B                   →  --sem-green  (casi idéntico)
 *   mockup --warn       #8A6100                   →  --sem-amber
 *   mockup --muted      #6E747A                   →  --text-muted (idéntico, el valor AA del #7)
 *
 * --brand-soft era la trampa: mismo nombre, significados opuestos. En el mockup es un tinte claro
 * para fondos de chips; en el sitio es un tono MEDIO para texto. Un buscar-y-reemplazar habría
 * dado chips oscuros sobre fondo claro.
 *
 * Y el #9AA0A6 del valor crudo del mockup es el --text-muted VIEJO, el que reprobaba AA y se
 * cambió en el cambio #7. Va con el token, no con el hexadecimal.
 */

/* ── chip "Próximamente" ────────────────────────────────────────────────────
 * El latido va sin !important: la regla global de reduced-motion es
 * `* { animation-duration: 0.01ms !important }` y entre dos !important gana la especificidad.
 * Con !important acá seguiría latiendo con movimiento reducido. Es la trampa que este repo ya
 * pisó cuatro veces. */
@keyframes upran-tc-latir { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.upran-tc-pronto i { animation: upran-tc-latir 2s ease-in-out infinite; }

/* ── grilla ─────────────────────────────────────────────────────────────────
 * Cuatro columnas en escritorio, dos en tablet, y en mobile se deslizan con snap — no se apilan,
 * igual que Real results. */
@media (max-width: 1023px) {
  .upran-tc-grilla { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767px) {
  .upran-tc-grilla {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* los márgenes negativos sangran la fila hasta el borde de la pantalla; el padding devuelve
     * el aire adentro, así la primera y la última tarjeta no quedan pegadas al filo */
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 0 18px 6px !important;
    scroll-padding: 0 18px;
  }

  /* El ancho se ata al VIEWPORT, no al contenedor. Con `flex: 0 0 76%` el porcentaje se calculaba
   * sobre una grilla que en mobile ya venía angosta por los paddings de sección: la tarjeta caía
   * en 166px y el contenido se salía por los costados —se leía "4 → 62" en vez de "74 → 62"—.
   * 78vw es predecible y no depende de la cadena de ancestros, que en este repo ya demostró ser
   * difícil de razonar. El tope de 300px evita que en tablet quede desproporcionada.
   *
   * overflow:hidden en la tarjeta y min-width:0 adentro: sin eso las filas con
   * justify-content:space-between empujan desde adentro y vuelven a recortar. */
  .upran-tc-tarjeta {
    /* 66vw / 260px baja la tarjeta de 300 a ~254, que es exactamente el ancho de las tarjetas de
     * Real results a este viewport. La sección deja de tener dos escalas de tarjeta compitiendo
     * en la misma página. El creativo se achica solo, por proporción: no hay una segunda palanca.
     *
     * Las cuatro filas de datos pierden 46px y son las que venían justas, así que el juez de
     * quiebres y el de clipping son la condición de esta medida, no un trámite posterior. */
    /* La tarjeta se mide contra el SCROLLER, no contra el viewport. Ese fue el error: 253 entra
     * en una pantalla de 390, pero el scroller de esta sección sólo muestra 254 —está metido 56px
     * adentro de su contenedor por cada lado— y la tarjeta se salía 21px de su propia tira. Se
     * veía cortada aunque la medición contra el viewport dijera que sobraba lugar.
     *
     * El scroller mide unos (100vw - 136px): 24 de margen del contenedor más 112 de inserción.
     * Restando ~30 más queda el asomo que anuncia que hay otra tarjeta detrás. */
    flex: 0 0 min(calc(100vw - 166px), 236px);
    scroll-snap-align: center;
    min-width: 0;
    overflow: hidden;
  }

  .upran-tc-tarjeta > div > * { min-width: 0; }

  /* El creativo pasa a 3:2 en mobile, no a 16:9: tres de los cuatro no son video, y la
   * proporción comunica el formato. Una tira ancha diría "video" sobre un estático y un
   * carrusel. */
  .upran-tc-tarjeta > div:first-child {
    /* 4:3 y no 3:2: un poco más vertical, pedido el 2026-08-03. Con la tarjeta ya en 253 el 3:2
     * dejaba un creativo achatado que se leía como banner y no como pieza. Sigue lejos del 16:9
     * que se descartó por decir "video" sobre un estático o un carrusel. */
    aspect-ratio: 4 / 3 !important;
  }

  /* El cuerpo lleva aire entre los KPIs, sin sacar ningún dato: los cuatro son el argumento de
   * la sección. La primera pasada los había compactado (13px de padding, gap 8) y en el teléfono
   * real se leían apretados — pedido de Nicolás del 2026-08-04: más espacio vertical, más
   * legibles. El costo es ~30px de alto de tarjeta, que el carrusel absorbe sin tocar nada. */
  .upran-tc-tarjeta > div:last-child {
    padding: 16px 14px 18px !important;
    gap: 11px !important;
  }

  .upran-tc-tarjeta > div:last-child p:first-child {
    font-size: 11px !important;
  }

  .upran-tc-tarjeta > div:last-child .upran-tc-cifra {
    line-height: 1.25;
  }

  /* El aire entre el rótulo y su valor: 3px es cómodo en escritorio y de más acá, donde se
   * multiplica por cuatro filas. */
  .upran-tc-tarjeta > div:last-child p + p {
    margin-top: 1px !important;
  }

  /* La barra de métricas también se desliza en vez de envolver en cuatro filas. */
  .upran-tc-barra {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  .upran-tc-barra > * { flex-shrink: 0; }
}

/* Las cifras no quiebran nunca — misma regla que el resto del sitio, y acá hay muchas. */
.upran-tc-cifra { white-space: nowrap; }

/* El nombre de la tarjeta se corta con puntos suspensivos antes que empujar la caja. */
.upran-tc-nombre {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}