/* =========================================================
   DORADO — FONDO MOBILE DEFINITIVO
   2026-09-24

   Objetivo:
   - La intro y el hero usan EXACTAMENTE la misma imagen móvil.
   - La imagen del hero vive dentro del HERO, no en el wrapper que
     también contiene beneficios. Así "cover" calcula el recorte
     contra el viewport/hero y no contra una sección mucho más alta.
   - Desktop no se modifica.
   - El dock inferior conserva el estilo oscuro ya aprobado.
   ========================================================= */

@keyframes doradoMobileIntroBg {
  from { transform: scale(1.018); }
  to   { transform: scale(1); }
}

@media (max-width: 820px) {

  /* INTRO — misma imagen móvil */
  .brand-intro-bg {
    inset: 0 !important;
    background-image: url('../images/backgrounds/hero-bg-dorado-mobile.webp') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform-origin: center center !important;
    animation: doradoMobileIntroBg 6s cubic-bezier(.2,.7,.2,1) both !important;
  }

  /*
   * El wrapper contiene HERO + BENEFICIOS.
   * No debe calcular el "cover" de la foto porque su altura es mucho
   * mayor que una pantalla y terminaba ampliando la imagen hasta
   * mostrar casi solamente el cielo.
   */
  .hero-combined-scene {
    position: relative !important;
    background: #061019 !important;
  }

  .hero-combined-scene::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /*
   * HERO — misma imagen y mismo encuadre que la intro.
   * Al estar aplicada directamente al hero, center/cover funciona
   * sobre una altura de pantalla y mantiene visible al pescador.
   */
  .hero-combined-scene > .hero {
    min-height: 100svh !important;
    background-color: #061019 !important;
    background-image: url('../images/backgrounds/hero-bg-dorado-mobile.webp') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  .hero-combined-scene > .hero .hero-shell {
    min-height: 100svh !important;
    padding-top: 84px !important;
    padding-bottom: 102px !important;
    align-items: flex-end !important;
  }

  /*
   * Desactiva únicamente las capas antiguas que podían volver a
   * dibujar el fondo horizontal. No toca contenido, botones ni cards.
   */
  .hero-combined-scene .hero-bg {
    background: transparent !important;
  }

  .hero-combined-scene .hero-bg::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
  }

  /* Conserva el sombreado suave ya existente para legibilidad. */
  .hero-combined-scene .hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(2,8,12,.08) 0%,
        rgba(2,8,12,.02) 42%,
        rgba(2,8,12,.22) 100%) !important;
  }

  /* =========================================================
     DOCK MOBILE — conserva la corrección ya aprobada
     ========================================================= */
  .mobile-dock {
    background: rgba(4,10,15,.94) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.30) !important;
  }

  .mobile-dock-item {
    color: #aeb7bd !important;
    background: transparent !important;
  }

  .mobile-dock-item .ui-icon,
  .mobile-dock-item span {
    color: inherit !important;
  }

  .mobile-dock-item.active {
    color: #f6b13c !important;
    background: rgba(239,159,36,.13) !important;
    box-shadow: inset 0 0 0 1px rgba(239,159,36,.24) !important;
  }

  .mobile-dock-item.active .ui-icon,
  .mobile-dock-item.active span {
    color: #f6b13c !important;
  }

  .mobile-dock-item[href*="wa.me"] {
    color: #55dc83 !important;
  }
}

/* iPhone/Android angostos: mismo encuadre, sin mover el foco. */
@media (max-width: 430px) {
  .brand-intro-bg,
  .hero-combined-scene > .hero {
    background-position: center center !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .brand-intro-bg {
    animation: none !important;
    transform: none !important;
  }
}