/* hero_desktop_single_v1.css
   Desktop: hero centrado elegante que se ajusta a la proporción de la imagen (1920x900)
   Mobile: slider intacto
*/

.hero-desktop { display: none; }

@media (min-width: 803px) {
  /* Desktop ON */
  .hero-desktop { display: block !important; }

  /* Desktop OFF: slider móvil */
  section.hero-banner.hero-slider.hero-slider-mobile {
    display: none !important;
  }

  .hero-desktop {
    width: 100%;
    padding: 22px 0 12px 0;
  }

  .hero-desktop-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
  }

  /* PREMIUM:
     - Sin height fijo
     - El contenedor adopta la proporción exacta del banner
     - La imagen llena el contenedor (sin marcos)
  */
  .hero-desktop-banner {

    width: 100%;

    aspect-ratio: 1920 / 900;

    border-radius: 18px;

    overflow: hidden;



    /* Fondo premium */

    background:

      radial-gradient(1200px 420px at 20% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),

      linear-gradient(90deg, rgba(236,236,236,1), rgba(245,245,245,1));



    background-image:

      url('/static/brand/goldmarket/hero/editorial/hero_principal.webp'),

      radial-gradient(1200px 420px at 20% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),

      linear-gradient(90deg, rgba(236,236,236,1), rgba(245,245,245,1));



    background-size: contain, cover, cover;

    background-position: center center, center center, center center;

    background-repeat: no-repeat, no-repeat, no-repeat;



    box-shadow: 0 14px 32px rgba(0,0,0,0.18);

  }
  }
}

/* Pantallas grandes: un poco más ancho para sensación premium */
@media (min-width: 1400px) {
  .hero-desktop-inner { max-width: 1280px; }
}