/* Vistio Business v1.1.81 — reparación móvil de la composición premium.
   Sustituye únicamente la hoja móvil v1.1.80; preserva su ayuda de Transparencia.
   NO modifica la vista de escritorio, los beneficios originales ni el panel. */

@media (max-width: 820px) {
  /* El ejemplo debe determinar su propia altura. Nunca recortarlo desde su contenedor. */
  #landing .hero .hero-art.vb-hero-immersive {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    align-self: start;
  }

  #landing .hero .hero-art.vb-hero-immersive .vb146-stage {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #landing .hero .hero-art.vb-hero-immersive .vb146-gallery,
  #landing .hero .hero-art.vb-hero-immersive .vb146-secondary {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Separación real, después del marco completo, sin cubrirlo con la marquesina. */
  #landing .hero.wrap {
    align-items: start;
    padding-bottom: clamp(38px, 8vw, 58px) !important;
  }

  #landing > .marquee.v07-marquee {
    position: relative;
    z-index: 1;
    margin-top: 0;
  }

  /* Transparencia: se conserva la indicación implementada en v1.1.80. */
  #planes .vb180-mobile-table-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 14px;
    padding: 11px 13px;
    border: 1px solid rgba(217, 170, 92, .26);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(45, 36, 27, .92), rgba(23, 19, 15, .86));
    color: #efd9b0;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: .015em;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  }
  #planes .vb180-mobile-table-note .vb180-mobile-table-note-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(232, 189, 111, .16);
    color: #f0c979;
    font-size: 13px;
    font-weight: 700;
  }
  #planes .vb180-mobile-table-note.is-hidden { display: none; }
  #planes .vb138-table-wrap {
    scroll-behavior: smooth;
    scroll-padding-inline: 18px;
  }
}

@media (max-width: 600px) {
  /* Los dos ejemplos secundarios crecen según el contenido, sin filas 1fr forzadas. */
  #landing .hero .hero-art.vb-hero-immersive .vb146-secondary {
    grid-template-rows: none !important;
    grid-auto-rows: max-content;
  }
  #landing .hero .hero-art.vb-hero-immersive .vb146-link,
  #landing .hero .hero-art.vb-hero-immersive .vb146-catalog {
    height: auto !important;
    min-height: max-content;
    max-height: none !important;
  }
  #planes .vb180-mobile-table-note {
    margin-top: 10px;
    font-size: 11px;
  }
}