/* ==============================================================
   BONJOUR WEB — 26-R01I
   Fix definitivo: Bundle Home + Drawer Sticky Mobile
   Alcance exclusivo: <= 767.98px
   ============================================================== */

@media (max-width: 767.98px) {

  /* ============================================================
     1. HOME — DISEÑO WEB + GOOGLE ADS
     Reducir padding real y eliminar cualquier overflow horizontal.
     ============================================================ */

  html,
  body.bonjour-v2 {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .bonjour-v2 .bj-home-v2 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .bonjour-v2 .bj-bundle-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bonjour-v2 .bj-bundle-card > *,
  .bonjour-v2 .bj-bundle-copy,
  .bonjour-v2 .bj-bundle-copy h3,
  .bonjour-v2 .bj-bundle-copy p,
  .bonjour-v2 .bj-bundle-benefit {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bonjour-v2 .bj-bundle-copy {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bonjour-v2 .bj-bundle-copy h3,
  .bonjour-v2 .bj-bundle-copy p {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* R01F usaba ancho basado en viewport.
     Desde ahora el beneficio respeta el ancho interno de la tarjeta. */
  .bonjour-v2 .bj-bundle-benefit {
    position: relative !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
  }

  .bonjour-v2 .bj-bundle-benefit strong {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bonjour-v2 .bj-bundle-benefit .bj-btn,
  .bonjour-v2 .bj-btn--bundle {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* Imágenes/logos nunca pueden ensanchar la tarjeta. */
  .bonjour-v2 .bj-bundle-card img,
  .bonjour-v2 .bj-bundle-partner-badge {
    max-width: 100% !important;
    height: auto !important;
  }


  /* ============================================================
     2. DRAWER STICKY — LIBERAR FIXED DE LA CÁPSULA DEL HEADER
     Safari puede tratar transform/filter/backdrop-filter/contain
     del ancestro como containing block de un fixed.
     ============================================================ */

  .bonjour-v2 .bj-site-header.menu-open,
  .bonjour-v2 .bj-site-header.menu-open .bj-header-shell {
    transform: none !important;
    -webkit-transform: none !important;

    filter: none !important;
    -webkit-filter: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    perspective: none !important;
    contain: none !important;
    will-change: auto !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    -webkit-mask: none !important;
    mask: none !important;

    overflow: visible !important;
  }

  /* Al abrir menú, el header deja de imponer su geometría sticky.
     El panel y la X ya son fixed independientes. */
  .bonjour-v2 .bj-site-header.menu-open {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
  }

  .bonjour-v2 .bj-site-header.menu-open .bj-header-shell {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
  }

  .bonjour-v2 .bj-site-header.menu-open .bj-nav-panel {
    position: fixed !important;

    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;

    box-sizing: border-box !important;

    z-index: 2147483000 !important;
  }


  /* ============================================================
     3. AGENDAR REUNIÓN
     Selector real auditado: .bj-btn--header-ghost
     Color + text-fill para vencer el estado blanco del sticky.
     ============================================================ */

  .bonjour-v2 .bj-site-header.menu-open
  .bj-nav-panel .bj-btn--header-ghost,

  .bonjour-v2 .bj-site-header.is-stuck.menu-open
  .bj-nav-panel .bj-btn--header-ghost,

  .bonjour-v2 .bj-site-header.is-over-dark.menu-open
  .bj-nav-panel .bj-btn--header-ghost,

  .bonjour-v2 .bj-site-header.is-stuck.is-over-dark.menu-open
  .bj-nav-panel .bj-btn--header-ghost {
    color: #17365b !important;
    -webkit-text-fill-color: #17365b !important;

    opacity: 1 !important;

    background: #ffffff !important;
    border-color: rgba(23, 54, 91, .22) !important;
  }

  .bonjour-v2 .bj-site-header.menu-open
  .bj-nav-panel .bj-btn--header-ghost * {
    color: #17365b !important;
    -webkit-text-fill-color: #17365b !important;
    opacity: 1 !important;
  }

  /* Solicitar propuesta conserva la paleta azul/blanco. */
  .bonjour-v2 .bj-site-header.menu-open
  .bj-nav-panel .bj-btn--header-primary,

  .bonjour-v2 .bj-site-header.menu-open
  .bj-nav-panel .bj-btn--header-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}