/* #16 · Hero nuevo con video — grid del split, card del player, corte del H1, banda de
 * métricas V3, logos y peek de la demo.
 *
 * Un archivo único, como motion.css: la tanda se revierte entera o no se revierte. Carga sólo
 * en el home (lo enlaza build.mjs junto a anclas.css) y DESPUÉS de afinar.css — no compite con
 * él: los puentes de los controles nuevos del panel viven acá, junto a la regla que gobiernan.
 * INVARIANTE de siempre: cada fallback de acá tiene que ser idéntico al `v` de su control en
 * js/afinar.js.
 *
 * Todo por clase. El runtime re-serializa los estilos inline al hidratar y un selector de
 * atributo calibrado sobre el archivo no matchea nada (la trampa documentada en responsive.css):
 * las clases sobreviven cualquier serialización.
 */

/* ── El H1, TÍTULO COMPLETO (17/8): murió el corte forzado. «reales» era la última palabra
 * colgando sola en su línea; ahora el título fluye entero. Medido antes de escribir esto:
 * a ≥1240 el texto pide 1003px en un contenedor de 1064 → entra COMPLETO en una línea.
 *
 * El span queda INERTE, no por descuido: es lo que hace reversible la prueba (una línea) y
 * el corte lo pedía el contrato hasta hoy. Si Nicolás confirma, se elimina del EDIT del build.
 *
 * El display:inline solo no alcanzaba: a 768 y a 1024 el texto no entra en una línea y la
 * envoltura natural volvía a dejar «reales» sola ("De curiosos a clientes / reales") — el
 * mismo huérfano, ahora sin que nadie lo hubiera pedido. text-wrap:balance reparte las líneas
 * parejo ("De curiosos a / clientes reales") y mata la huérfana en esa franja.
 *
 * El !important no es pereza: el H1 trae `text-wrap:pretty` en su estilo INLINE (del export
 * congelado), y contra un inline la especificidad no alcanza — el mismo motivo por el que lo
 * usan los puentes del afinador. Sin él la regla se declara y no gobierna: medido, computaba
 * `pretty` en las 13 anchuras. Acá es seguro porque no hay animación de por medio (la trampa
 * del !important en este repo era ganarle a la regla global de reduced-motion).
 *
 * Degradación: donde `balance` no exista (Safari < 17.5) la declaración se descarta y manda el
 * `pretty` del inline — exactamente el estado de hoy, que ya reparte bien en mobile y a ≥1100
 * entra en una línea sin depender de nadie. Se pierde sólo el arreglo de 768/1024. */
.upran-hero-reales {
  display: inline;
}

.upran-hero-col h1 {
  text-wrap: balance !important;
}

/* La columna es contenedor de medida: el tope por construcción del H1 (tanda final) se calcula
 * contra su ancho real, así la línea 1 entra aunque el deslizador de split la angoste. */
.upran-hero-col {
  container-type: inline-size;
}

/* ── La card del video ── */
.upran-hero-video {
  margin: 0; /* figure trae margen del user-agent */
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upran-video-caja {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-video-ratio, 16 / 9);
  border-radius: 16px;
  overflow: hidden;
  /* Variante B: la CAJA murió (sin borde, sin sombra de card) — el video flota con un halo de
   * dos capas: glow violeta grande y difuso detrás (el token de marca, con color-mix para el
   * alfa: ningún hexadecimal suelto) + sombra oscura de asiento. El halo vive en este mismo
   * nodo, que es el que rota con el scroll: la inclinación se lo lleva puesto por
   * construcción. En claro y en oscuro el mismo par de capas — el glow sobre blanco se lee
   * más tenue y sobre oscuro más presente; capturado en ambos para el OK. */
  background: linear-gradient(135deg, var(--brand-surface), var(--s2));
  box-shadow:
    0 26px 90px -8px color-mix(in srgb, var(--brand) 42%, transparent),
    0 16px 36px -14px rgb(0 0 0 / 0.42);
}

.upran-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Click-to-play CON SONIDO: el botón cubre la card entera. Nada de autoplay. */
.upran-video-play {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

/* El aro y el triángulo con bordes CSS — el patrón de Top Creatives (TC_PLAY), agrandado.
 * El scrim oscuro sobre media es el mismo recurso que ya usa esa sección. */
.upran-video-aro {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms ease;
}
.upran-video-play:hover .upran-video-aro,
.upran-video-play:focus-visible .upran-video-aro {
  transform: scale(1.06);
}
/* mismo anillo de foco que el resto del sistema */
.upran-video-play:focus-visible .upran-video-aro {
  box-shadow: 0 0 0 3px var(--brand-surface), 0 0 0 4.5px var(--brand);
}
.upran-video-play:focus-visible {
  outline: none;
}

.upran-video-tri {
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

.upran-video-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 9px;
  border-radius: 9999px;
}

/* Reproduciendo: se van el play y el chip, mandan los controles nativos (los pone el JS). */
.upran-video-activo .upran-video-play,
.upran-video-activo .upran-video-chip {
  display: none;
}

/* ── El cartel del autoplay muteado ─────────────────────────────────────────────
 * Estado BASE = oculto. Sólo aparece cuando el JS confirmó que el video ESTÁ andando
 * (.upran-video-auto se pone en el then del play(), no antes): un cartel que dice «tu video ya
 * empezó» sobre un video quieto —autoplay rechazado, fuente rota, reduced-motion— sería una
 * mentira, y es exactamente lo que pasa si el estado se declara por adelantado.
 * En ese modo el aro de play cede su lugar: el cartel ES el llamado a la acción. */
.upran-video-cartel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.55);
  max-width: min(86%, 420px);
}
.upran-video-auto .upran-video-cartel {
  display: flex;
}
.upran-video-auto .upran-video-aro {
  display: none;
}

.upran-video-cartel-titulo {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
}
.upran-video-cartel-sub {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}

/* El foco de teclado tiene que verse también en este modo: el anillo del sistema vivía en el
 * aro, y el aro acá no está. Sin esto, tabular hasta el player en modo autoplay no mostraba
 * nada — el botón cubre la card entera y el foco quedaba invisible. */
.upran-video-auto .upran-video-play:focus-visible .upran-video-cartel {
  box-shadow: 0 0 0 3px var(--brand-surface), 0 0 0 4.5px var(--brand);
}

@media (max-width: 767px) {
  .upran-video-cartel {
    padding: 12px 16px;
  }
  .upran-video-cartel-titulo {
    font-size: 16px;
  }
  .upran-video-cartel-sub {
    font-size: 13px;
  }
}

/* ── La FRASE bajo el video ─────────────────────────────────────────────────────
 * Las tres columnas de métricas murieron y en su lugar va una sola frase. El contrato es
 * explícito sobre la jerarquía: menos peso visual que el video, sigue siendo nota al pie y no
 * un segundo título.
 *
 * Tipografía INTERMEDIA, y el número sale de los dos vecinos reales y no de la nada: el caption
 * del video era 13px (murió en la tanda anterior) y la bajada del hero es 18px — 15px queda
 * justo en el medio. Peso normal en la prosa, y el destaque sólo en las dos cifras.
 *
 * Ancho en ch y no en px: 50ch es la medida del contrato y ch se mide sobre la fuente real, así
 * que la línea conserva su largo de lectura aunque cambie el cuerpo con el deslizador. Ese
 * ancho la deja además claramente más angosta que el video (940px), que es lo que sostiene la
 * jerarquía. */
.upran-hero-frase {
  margin: 0;
  width: 100%;
  max-width: var(--af-frase-ancho, 50ch);
  /* PUENTE del afinador: cuerpo de la frase. El control se PARTIÓ en par desktop/mobile
   * porque el pedido lo obliga: subirla en desktop con un solo valor arrastraba mobile, donde
   * el techo es la bajada (14px allá) y la frase quedaría por encima. Desktop 17 —«un poco más
   * grande», y todavía por debajo de los 18 de la bajada—; mobile 13,5, entre el caption
   * histórico de 13 y esos 14. */
  font-size: var(--af-frase-desktop, 19px);
  /* En MOBILE la escala del hero se comprime: la bajada baja a 14px, así que un valor fijo
   * dejaba la frase MÁS GRANDE que la bajada — exactamente al revés de la jerarquía que pide
   * el contrato. Lo cazó la sonda comparando contra la bajada real de cada ancho, y no contra
   * un número escrito a mano. Su valor está más abajo, en su propio tramo. */
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .upran-hero-frase {
    font-size: var(--af-frase-mobile, 15px);
  }
}

.upran-frase-cifra {
  font-weight: 600;
  color: var(--text-primary);
  /* Las cifras no quiebran ni entre sus partes: «+US$ 60M» lleva un espacio fino adentro y sin
   * esto podía partirse entre «US$» y «60M» al final de una línea. Es la misma regla que
   * css/tipografia.css aplica a las cifras del sistema; acá va explícita porque este nodo nace
   * en esta tanda. */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Aire del tramo bajo el video ──────────────────────────────────────────────
 * Video ↔ banda y banda ↔ logos se leían pegados (sólo el gap del hero: 17px desktop / 8
 * mobile). PUENTE del afinador, ADITIVO como los gaps de jerarquía (0 = como estaba):
 * --af-aire-tramo suma sobre el gap — fábrica 17px = el doble en desktop (17+17=34). En mobile
 * aplica LA MITAD del valor (la proporción de los ritmos, 8/17): 8+8,5 ≈ 16,5, también el
 * doble. El respiro logos ↔ demo acompaña con el mismo valor (media abajo, sobre el margen del
 * bloque de la demo). El aire separa BLOQUES; lo interno de cada uno no se toca. */
.upran-hero-frase,
[style*="max-width: 940px"] {
  margin-top: var(--af-aire-tramo, 17px);
}
@media (max-width: 767px) {
  .upran-hero-frase,
  [style*="max-width: 940px"] {
    margin-top: calc(var(--af-aire-tramo, 17px) * 0.5);
  }
}

/* logos ↔ demo: el margen inline del bloque de la demo (56px desktop; el responsive lo baja a
 * 44 en tablet y 30 en mobile) gana el acompañamiento. Cargando después de responsive.css,
 * estas reglas deciden. */
@media (min-width: 1024px) {
  [style*="margin: 56px 64px 0px"] { margin-top: calc(56px + var(--af-aire-tramo, 17px)) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  [style*="margin: 56px 64px 0px"] { margin-top: calc(44px + var(--af-aire-tramo, 17px)) !important; }
}
@media (max-width: 767px) {
  [style*="margin: 56px 64px 0px"] { margin-top: calc(30px + var(--af-aire-tramo, 17px) * 0.5) !important; }
}

/* (El destello de cierre del bloque del hero VIVIÓ UNA TANDA Y SE FUE. Nicolás, viéndolo en el
 * teléfono, rodeó la zona de los logos: «¿y ese fondo en los logos? lo saquemos». La banda caía
 * justo detrás del rótulo y del carrusel, así que en vez de leerse como un remate de luz se
 * leía como un PANEL de fondo puesto atrás de las marcas — que es otra cosa, y no la que pidió.
 * Se retira entera: regla, clase, deslizadores y juez. El halo del video —que nunca se movió y
 * que se midió en su propia captura— sigue siendo la única luz de marca del hero.) */

/* ── El rótulo del carrusel ─────────────────────────────────────────────────────
 * Va entre la cita y los logos, y pertenece a los LOGOS: por eso el aire no se reparte en dos
 * mitades iguales sino que queda más cerca de la tira que de la cita. Un rótulo equidistante
 * se lee como un tercer bloque suelto; pegado a lo que nombra, se lee como su encabezado.
 *
 * «Apenas legible» = el token más tenue del sistema (--text-muted) y el escalón chico. No se
 * toca la opacidad: en modo claro el mismo opacity da un contraste completamente distinto, y
 * lo que acá se busca es discreción, no invisibilidad. */
.upran-logos-rotulo {
  margin: 0;
  /* PUENTE del afinador: cuerpo del rótulo. Fábrica 14px en desktop, 13px en mobile.
   *
   * POR QUÉ EL PAR, Y NO UN SOLO NÚMERO (medido el 27/8). El rótulo estaba en 12px fijo y se
   * leía como la letra chica de la página en vez de como una etiqueta: a 12px queda 0,5px por
   * encima del chip de duración del video —que está en el MISMO bloque visual, tres elementos
   * más arriba— y 1px por encima del grupo de 11px, que son 46 nodos. Competía hacia abajo.
   *
   * El techo es la cita del video, y NO MIDE LO MISMO EN LOS DOS TRAMOS: 19px en desktop y
   * 15px en mobile. Por eso un solo valor no sirve. 14px es la escala de etiqueta secundaria
   * del sitio —es el cuerpo de los enlaces del nav— y en desktop deja 5px de aire contra la
   * cita; en mobile ese mismo 14px quedaría a 1px de la cita y pasaría a competir con ella,
   * que es exactamente lo que no se quería. 13px en mobile deja 2px y conserva la jerarquía.
   *
   * El par sigue la misma convención que el aire de este bloque, que ya está partido en
   * `--af-aire-logos-desktop` / `--af-aire-logos-mobile`. El corte es el mismo: 768px.
   *
   * LAS VARIABLES SON PROPIAS DE ESTE RÓTULO y de nada más. Hay 28 nodos del chasis que también
   * computan 12px —el separador «/» del selector, los rótulos de rubro del carrusel, las
   * etiquetas de las barras del diagnóstico—, pero ninguno pasa por acá: llegan por estilos
   * inline o por otras reglas. Subir esto NO los mueve, que era la condición. */
  font-size: var(--af-rotulo-logos-desktop, 14px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 767px) {
  .upran-logos-rotulo {
    font-size: var(--af-rotulo-logos-mobile, 13px);
  }
}

/* video ↔ frase — recalibrado con el cambio a frase única.
 *
 * Los valores anteriores (96/62 arriba, 86/58 en logos) se calibraron cuando el bloque del
 * medio eran TRES cajas de cifra+label: una masa alta y con peso visual, que necesitaba mucho
 * aire para despegarse del video. Con una sola frase de texto liviano ese aire sobra y el tramo
 * queda estirado. Bajan ~40%: 130px → 90 entre bloques en desktop, 78,5 → 56 en mobile,
 * manteniendo el ritmo PAREJO entre los tres (video ↔ frase ↔ logos), que es lo que se aprobó.
 *
 * (Texto original de la tanda del 17/8, que sigue explicando por qué el puente es propio:)
 * video ↔ métricas — segundo pedido del 17/8 («sigo viendo esto todo junto»). El aire del
 * tramo dejaba las métricas a 16.5px del caption en mobile y 34 en desktop, mientras que abajo
 * el carrusel ya respiraba 78.5/130: el bloque del medio quedaba pegado al video y suelto de
 * los logos. Con esto los TRES bloques (video+caption / métricas / logos) quedan a la misma
 * distancia entre sí — ritmo parejo, medido borde visual contra borde visual.
 *
 * Puente propio y no subir --af-aire-tramo: ese valor gobierna también el margen de la demo,
 * y emparejar desde ahí habría empujado la demo con la misma mano. En par desktop/mobile por
 * lo mismo que el de logos: la proporción ×0.5 no empareja los dos anchos a la vez.
 *
 * La clase va DUPLICADA a propósito: sube la especificidad a (0,2,0) y le gana a la regla
 * compartida del aire-tramo sin depender del orden ni de la forma del árbol. El primer intento
 * fue `.upran-hero-col .upran-metricas-v3` y no matcheaba nada —el bloque NO cuelga de la
 * columna del copy, sino del contenedor del hero, que no tiene clases—: la regla se declaraba
 * y el margen seguía en 17px. Medido, no supuesto. (El nodo pasó de ser la banda de tres
 * columnas a la frase; el aire lo gobierna la misma regla, con la clase nueva.) */
@media (min-width: 768px) {
  .upran-hero-frase.upran-hero-frase {
    margin-top: calc(var(--af-aire-tramo, 17px) + var(--af-aire-frase-desktop, 56px));
  }
}
@media (max-width: 767px) {
  .upran-hero-frase.upran-hero-frase {
    margin-top: calc(var(--af-aire-tramo, 17px) * 0.5 + var(--af-aire-frase-mobile, 39px));
  }
}

/* métricas ↔ logos — pedido del 17/8: el carrusel respiraba mucho más abajo que arriba. Abajo
 * juntan el margen de la demo Y ~30px de aire muerto DENTRO del wrap del export (height 105px
 * inline con una tira de 64): 130px vs 44 a 1240, 78.5 vs 20.5 a 390, medidos entre bordes
 * visuales de la tira. Margen propio del wrap, ADITIVO sobre gap + aire-tramo, con fábrica que
 * deja arriba = abajo exacto en los dos anchos de referencia. En par desktop/mobile como los
 * demás aires: la proporción ×0.5 no empareja los dos anchos a la vez.
 * El wrap se identifica por su inline congelado (max-width 940 + height 105, único en el
 * documento) y la especificidad (0,2,0) le gana a la regla compartida del aire-tramo sin
 * depender del orden. Lo interno del wrap no se toca. */
@media (min-width: 768px) {
  [style*="max-width: 940px"][style*="height: 105px"] {
    margin-top: calc(var(--af-aire-tramo, 17px) + var(--af-aire-logos-desktop, 56px));
  }
}
@media (max-width: 767px) {
  [style*="max-width: 940px"][style*="height: 105px"] {
    margin-top: calc(var(--af-aire-tramo, 17px) * 0.5 + var(--af-aire-logos-mobile, 39px));
  }
}

/* ── Cambio de layout: EL SPLIT SE ABANDONÓ — una sola columna centrada en todos los anchos.
 * El orden desktop es el de mobile: badge → H1 → bajada → CTA → video amplio → banda → logos →
 * demo. La grilla quedó como wrapper de columna; el video toma el mismo ancho máximo que la
 * banda de métricas y los logos (940px): una sola columna óptica. */
.upran-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 14px;
}
.upran-hero-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 14px;
}
.upran-hero-video {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Desktop (≥1024): ritmo del afinador, H1 a 72 y el enderezado del video ── */
@media (min-width: 1024px) {
  .upran-hero-grid,
  .upran-hero-col {
    /* el mismo deslizador "gap interno" del hero */
    gap: var(--af-hero-gap, 17px);
  }

  .upran-hero-col h1 {
    /* H1 en DOS líneas por construcción: el deslizador manda hasta el tope en que la línea 1
     * («De curiosos a clientes», 9,71px de ancho por px de fuente, medido) dejaría de entrar;
     * ahí el cqw la achica en vez de dejarla envolver.
     * PUENTE del afinador (título desktop): fábrica DE VUELTA en 72px — el 48 existía por la
     * columna angosta del split; sin split, la línea entra a 72 en todo el rango. */
    font-size: min(var(--af-titulo-desktop, 72px), 9.9cqw) !important;
  }

  /* El enderezado: el video arranca apenas recostado hacia atrás (rotateX, origen abajo) y
   * js/hero-video.js sube --upran-video-endereza de 0 a 1 en los primeros ~400px de scroll —
   * one-way: plano queda plano. El ángulo INICIAL es puente del afinador (0 = el efecto no
   * existe). TODO el efecto vive en no-preference: con reduced-motion esta regla no existe y
   * el video es plano siempre. Sin JS, el fallback de --upran-video-endereza es 1: plano.
   * El transform no rompe el hit-testing — el play viaja con la caja, inclinada o no. */
  @media (prefers-reduced-motion: no-preference) {
    .upran-video-caja {
      transform: perspective(1200px) rotateX(calc(var(--af-video-angulo, 8deg) * (1 - var(--upran-video-endereza, 1))));
      transform-origin: center bottom;
      transition: transform 120ms ease-out;
    }
  }
}

/* ── Mobile (<768): la columna aprieta el ritmo ── */
@media (max-width: 767px) {
  .upran-hero-grid,
  .upran-hero-col {
    gap: 8px; /* el mismo ritmo que el hero comprimido (cambio #4) */
  }

  /* ── Logos (cierre del #16): EL MARQUEE VOLVIÓ también a mobile — la grilla estática de dos
   * filas murió por decisión de Nicolás. El único cambio conservado es la separación entre
   * piezas, que la maneja el puente de siempre en afinar.css (--af-logos-gap-mobile, 12px de
   * fábrica: el doble de antes). Desplazamiento, pausa al hover y pipeline de color: los del
   * contrato, sin tocar. */

}

/* ── Mobile angosto (≤480): tope por construcción también para el título ── */
@media (max-width: 480px) {
  .upran-hero-col h1 {
    /* PUENTE del afinador (título mobile): el 34 de fábrica manda hasta donde la línea 1
     * entra; más angosto, el cqw la achica (390 → ~33px, 360 → ~30px). El puente viejo de
     * afinar.css se retiró — una sola fuente, acá. */
    font-size: min(var(--af-titulo-mobile, 34px), 9.9cqw) !important;
  }
}

/* ── El peek de la demo: asoma recortada y con degradado, EN TODOS LOS ANCHOS ──
 * Nicolás, sobre la versión de mobile: «me gustó ese difuminado que le diste abajo, ¿podemos
 * tenerlo en todos?». Salió del bloque ≤767 y ahora vive suelto.
 *
 * El marco del navegador falso se recorta y un velo degradado hacia --brand-surface —el panel
 * violeta que tiene detrás— marca que la demo sigue. js/hero-video.js agrega upran-peek-abierto
 * al <html> cuando el visitante se acerca scrolleando o cuando el foco de teclado entra al
 * marco; expandida, esta regla deja de existir y la demo queda EXACTAMENTE como siempre. El JS
 * nunca chequeó el ancho, así que el mecanismo ya servía a los dos tramos sin tocarlo.
 *
 * El ALTO va por tramo y no compartido: la demo mide 496px en desktop y bastante menos en el
 * teléfono, así que un solo número recortaría de más de un lado o no se notaría del otro. En
 * desktop 380 deja ver la mayor parte del portal y el velo igual se lee; en mobile siguen los
 * 300 de siempre, que es lo que Nicolás ya aprobó. Cada uno con su deslizador. */
/* El aire que separaba la cita del carrusel pasa al RÓTULO, que ahora es lo primero del
 * bloque; entre el rótulo y la tira queda un respiro corto, el de un encabezado con lo que
 * encabeza. Los dos valores son puentes: el de arriba reusa el par de logos que ya existía
 * —el bloque es el mismo, sólo empieza antes— y el corto tiene el suyo. */
.upran-logos-rotulo {
  margin-top: calc(var(--af-aire-tramo, 17px) + var(--af-aire-logos-desktop, 56px));
}
[style*="max-width: 940px"][style*="height: 105px"] {
  margin-top: var(--af-rotulo-gap, 10px);
}
@media (max-width: 767px) {
  .upran-logos-rotulo {
    margin-top: calc(var(--af-aire-tramo, 17px) * 0.5 + var(--af-aire-logos-mobile, 39px));
  }
}

html:not(.upran-peek-abierto) .upran-demo-marco {
  position: relative;
  max-height: var(--af-peek-alto-desktop, 380px);
}
html:not(.upran-peek-abierto) .upran-demo-marco::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, transparent, var(--brand-surface) 92%);
  pointer-events: none;
  z-index: 30;
}
@media (max-width: 767px) {
  html:not(.upran-peek-abierto) .upran-demo-marco {
    max-height: var(--af-peek-alto, 300px);
  }
}