@media (max-width: 820px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  body, html { min-width: 100vw !important; overflow-x: hidden; }

  /* Banner mobile: siempre 100% visible */
  .banner-mobile {
    width: 100vw; display: flex; align-items: center; justify-content: center;
    background: #000; overflow: hidden; margin: 0;
    min-height: 0 !important; height: auto !important;
  }
  .banner-mobile .banner-img {
    width: 100vw; height: auto; min-height: 0; max-height: none;
    object-fit: contain !important; object-position: center;
    display: block;
    animation: bannerShow 1.2s cubic-bezier(.24,1.18,.44,1) both;
  }

  /* Bloque destacado: abajo del banner, todo centrado */
  .landing-mobile {
    width: 100vw;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 0 4vw;
    margin-top: 4vw;
    margin-bottom: 14vw; /* espacio adicional para no chocar con el sticky */
  }
  .landing-mobile .landing-titulo {
    font-size: 1.14rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 13px;
    margin-top: 0;
    color: #fff;
    line-height: 1.18;
    letter-spacing: 0.1px;
  }
  .landing-mobile .landing-sub {
    font-size: 1.02rem;
    text-align: center;
    color: #ededed;
    margin-bottom: 0;
    line-height: 1.28;
    max-width: 97vw;
    font-weight: 400;
  }

  /* --- Sticky CTA inferior (solo mobile) --- */
  /* El contenedor del sticky usa la variante block para ocupar ancho */
  .sticky-cta .btn-stack {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }

  /* En landing-mobile, si muestras el botón, ocupa ancho cómodo */
  .landing-mobile .btn-stack {
    width: 94vw;
    max-width: 340px;
    margin: 23px auto 0;
  }

  /* Botón en mobile (la base negra es el elemento .btn-base) */
  .landing-mobile .btn-ver-catalogos,
  .sticky-cta .btn-ver-catalogos {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 0;
    border-radius: 32px;
    background: linear-gradient(90deg, #ff1616 50%, #b10000 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.7px;
    border: none;
    outline: none;
    transition: transform .17s ease, box-shadow .2s ease;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
  }
  /* Ajustes finos para la base negra en mobile */
  .landing-mobile .btn-base,
  .sticky-cta .btn-base {
    inset: -8px;           /* un poco menos grande en mobile */
    transform: translateY(3px);
  }

  /* Cuando hay sticky, se añade padding extra al body */
  body.has-sticky-padding {
    padding-bottom: var(--sticky-cta-h, 82px);
  }
}

/* Si quieres ocultar el botón de la sección en mobile y dejar solo el sticky: */
.landing-mobile .btn-stack {
  display: none !important;
}