/* =========================================================
   Old bARTchef — Mobile Responsive Fixes v2
   Scope: home.oldbartchef.com
   Purpose:
   - Eliminar desbordes horizontales
   - Evitar encimados
   - Corregir hero, navegación y tarjetas
   - Quitar CTA fijo "Comprar Pack Negroni" que tapa contenido
   ========================================================= */

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  img,
  video,
  svg,
  picture {
    max-width: 100% !important;
    height: auto !important;
  }

  main,
  section,
  header,
  footer,
  .container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* =====================================================
     Topbar
     ===================================================== */

  .topbar {
    height: 28px !important;
    min-height: 28px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 28px !important;
    white-space: nowrap !important;
  }

  .topbar-track {
    white-space: nowrap !important;
    line-height: 28px !important;
  }

  /* =====================================================
     Header / navegación
     ===================================================== */

  .nav {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: rgba(250, 242, 228, 0.92) !important;
    backdrop-filter: blur(10px);
  }

  .nav-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 14px 12px !important;
  }

  .brand {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 18px !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

  .brand span {
    max-width: 100% !important;
  }

  .nav-links {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 2px !important;
    scrollbar-width: none !important;
  }

  .nav-links::-webkit-scrollbar {
    display: none !important;
  }

  .nav-links a {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em !important;
  }

  .nav-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: static !important;
  }

  .nav-actions button,
  .nav-actions a,
  .nav-actions .btn {
    position: static !important;
    min-height: 38px !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
    max-width: 100% !important;
  }

  /* Quita CTA fijo que tapa el contenido en móvil */
  a[href*="paquete-negroni"],
  a[href*="pack-negroni"],
  a[href*="checkout-bridge"][href*="pack"],
  .sticky-cta,
  .floating-cta,
  .mobile-sticky-cta,
  .mobile-cta,
  .fixed-cta {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* Si el CTA de Pack está dentro del header, en móvil no debe tapar la pantalla */
  .nav-actions a[href*="paquete-negroni"],
  .nav-actions a[href*="checkout-bridge"][href*="pack"] {
    display: none !important;
  }

  /* =====================================================
     Hero
     ===================================================== */

  .hero {
    width: 100% !important;
    min-height: auto !important;
    padding: 42px 0 46px !important;
    overflow: hidden !important;
    display: block !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 18px !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    text-align: left !important;
  }

  .hero-copy h1,
  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 13vw, 62px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 16px !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hero-copy p,
  .hero p {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
    margin-bottom: 18px !important;
  }

  .hero-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-cta a,
  .hero-cta button,
  .hero-cta .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .hero img,
  .hero-bg,
  .hero-visual img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* =====================================================
     Titulares generales
     ===================================================== */

  h1,
  h2,
  h3,
  .section-title,
  .section-title h2,
  .headline,
  .display,
  .title {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  section h2,
  .section-title h2 {
    font-size: clamp(34px, 12vw, 54px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
  }

  section p,
  .section-copy,
  .card p,
  .product-card p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* =====================================================
     Grids / columnas
     ===================================================== */

  .products-grid,
  .product-grid,
  .cards-grid,
  .benefits-grid,
  .recipes-grid,
  .ritual-grid,
  .builder-grid,
  .b2b-grid,
  .story-grid,
  .grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 22px !important;
  }

  [class*="row"],
  [class*="columns"],
  [class*="layout"] {
    max-width: 100% !important;
  }

  /* Carruseles / tracks: que sean scroll interno, no desborde de página */
  .carousel,
  .slider,
  .rail,
  .cards-track,
  .products-track,
  [class*="carousel"],
  [class*="slider"],
  [class*="track"]:not(.topbar-track) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  .carousel::-webkit-scrollbar,
  .slider::-webkit-scrollbar,
  .rail::-webkit-scrollbar,
  .cards-track::-webkit-scrollbar,
  .products-track::-webkit-scrollbar,
  [class*="carousel"]::-webkit-scrollbar,
  [class*="slider"]::-webkit-scrollbar,
  [class*="track"]:not(.topbar-track)::-webkit-scrollbar {
    display: none !important;
  }

  /* =====================================================
     Tarjetas
     ===================================================== */

  article,
  .card,
  .product-card,
  [data-product-card],
  .recipe-card,
  .cocktail-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  article img,
  .card img,
  .product-card img,
  [data-product-card] img,
  .recipe-card img,
  .cocktail-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  article a,
  article button,
  .card a,
  .card button,
  .product-card a,
  .product-card button,
  [data-product-card] a,
  [data-product-card] button {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* =====================================================
     Sección de selección / ritual / botellas
     ===================================================== */

  .builder,
  .builder-stage,
  .bottle-selector,
  .selection,
  .selection-grid,
  .product-selector,
  .ritual,
  .ritual-card,
  .ritual-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .builder *,
  .builder-stage *,
  .bottle-selector *,
  .selection *,
  .selection-grid *,
  .product-selector *,
  .ritual *,
  .ritual-card *,
  .ritual-panel * {
    max-width: 100% !important;
  }

  .builder img,
  .builder-stage img,
  .bottle-selector img,
  .selection img,
  .selection-grid img,
  .product-selector img,
  .ritual img,
  .ritual-card img,
  .ritual-panel img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Píldoras / tabs */
  .tabs,
  .pills,
  .chips,
  .filters,
  .ritual-tabs,
  .category-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    scrollbar-width: none !important;
  }

  .tabs::-webkit-scrollbar,
  .pills::-webkit-scrollbar,
  .chips::-webkit-scrollbar,
  .filters::-webkit-scrollbar,
  .ritual-tabs::-webkit-scrollbar,
  .category-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tabs > *,
  .pills > *,
  .chips > *,
  .filters > *,
  .ritual-tabs > *,
  .category-tabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* =====================================================
     Elementos flotantes / animaciones que enciman
     ===================================================== */

  .floating,
  .floating-card,
  .floating-widget,
  .animation-card,
  .service-animation,
  [class*="floating"],
  [class*="animation"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: 100% !important;
    margin: 12px auto !important;
  }

  /* =====================================================
     Formularios y botones
     ===================================================== */

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }

  .btn,
  button,
  a.btn {
    max-width: 100% !important;
  }

  /* =====================================================
     Drawer / carrito interno
     ===================================================== */

  .obc-cart-panel,
  [data-drawer],
  .cart-drawer {
    width: min(100vw, 420px) !important;
    max-width: 100vw !important;
    right: 0 !important;
    left: auto !important;
  }
}

@media (max-width: 560px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }

  .hero-copy {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-copy h1,
  .hero h1 {
    font-size: clamp(36px, 14vw, 52px) !important;
    line-height: 0.96 !important;
  }

  .hero-copy p,
  .hero p {
    font-size: 15px !important;
  }

  section h2,
  .section-title h2 {
    font-size: clamp(32px, 12vw, 46px) !important;
  }

  .brand {
    font-size: 16px !important;
  }

  .nav-links a {
    font-size: 10.5px !important;
  }
}

@media (max-width: 390px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero-copy h1,
  .hero h1 {
    font-size: 36px !important;
  }

  section h2,
  .section-title h2 {
    font-size: 32px !important;
  }

  .nav-actions button,
  .nav-actions a,
  .nav-actions .btn {
    font-size: 11px !important;
    padding: 9px 10px !important;
  }
}
/* =========================================================
   Old bARTchef — Mobile Fixes v3
   Corrección específica post-QA móvil
   ========================================================= */

@media (max-width: 900px) {
  /* Oculta el CTA de Pack del header/nav en móvil.
     Evita que se vuelva sticky/fixed y tape contenido. */
  .desktop-pack-cta,
  .nav-actions .desktop-pack-cta,
  a.desktop-pack-cta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Por seguridad, neutraliza cualquier CTA fijo que haya heredado estilos */
  body a[href*="paquete-negroni-0-0"].desktop-pack-cta,
  body a[href*="paquete-negroni"].desktop-pack-cta {
    position: static !important;
    display: none !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* Header móvil más compacto */
  .nav {
    position: relative !important;
    overflow: hidden !important;
  }

  .nav-inner {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  .nav-actions {
    margin-top: 2px !important;
  }

  .nav-links {
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
    justify-content: flex-start !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .nav-links a {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  /* Evita que las secciones de tarjetas se salgan del viewport */
  section,
  .section,
  .container,
  .hero,
  .hero-grid,
  .builder,
  .ritual,
  .selection,
  .recipes,
  .products,
  .b2b {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Carruseles/píldoras: se permite scroll horizontal pero sin romper página */
  .tabs,
  .pills,
  .chips,
  .filters,
  .ritual-tabs,
  .category-tabs,
  [class*="tabs"],
  [class*="pills"],
  [class*="chips"],
  [class*="filters"] {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-left: 18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .tabs > *,
  .pills > *,
  .chips > *,
  .filters > *,
  .ritual-tabs > *,
  .category-tabs > *,
  [class*="tabs"] > *,
  [class*="pills"] > *,
  [class*="chips"] > *,
  [class*="filters"] > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Bloques de cocteles / tarjetas oscuras: que no encimen el contenido */
  .recipe-card,
  .cocktail-card,
  .ritual-card,
  .service-card,
  .builder-card,
  [class*="recipe"],
  [class*="cocktail"] {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Oculta animaciones flotantes en móvil si se enciman al contenido */
  .service-animation,
  .animation-card,
  .floating-widget,
  .floating-card,
  [class*="service-animation"],
  [class*="animation-card"],
  [class*="floating-widget"],
  [class*="floating-card"] {
    display: none !important;
  }

  /* Mejora separación vertical entre secciones */
  section + section,
  .section + .section {
    margin-top: 28px !important;
  }

  /* Evita que títulos enormes se corten por arriba o por abajo */
  h1,
  h2,
  h3 {
    overflow: visible !important;
    padding-bottom: 0.08em !important;
  }
}

@media (max-width: 560px) {
  .nav-links {
    gap: 14px !important;
  }

  .nav-links a {
    font-size: 9.8px !important;
  }

  .brand {
    font-size: 15px !important;
  }

  .hero,
  section,
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* =========================================================
   Old bARTchef — Mobile Fixes v4
   Corrección real post-debug
   ========================================================= */

@media (max-width: 900px) {
  /* El debug confirmó que body::before colisiona con decoración grande */
  body::before,
  body::after {
    content: none !important;
    display: none !important;
  }

  /* Botón Pack: debe existir, pero NO fijo ni tapando contenido */
  .mobile-pack-cta {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2 !important;

    display: flex !important;
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
    margin: 22px auto !important;

    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Evita que algún wrapper lo vuelva sticky/fixed */
  .mobile-pack-cta,
  .mobile-pack-cta *,
  a.mobile-pack-cta,
  button.mobile-pack-cta {
    position: relative !important;
  }

  /* Header móvil: reducir saturación */
  .nav {
    overflow: hidden !important;
  }

  .nav-inner {
    padding: 12px 14px !important;
  }

  .brand {
    text-align: center !important;
    justify-content: center !important;
  }

  /* En móvil, la navegación larga se vuelve scroll horizontal controlado */
  .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    padding: 6px 12px !important;
    gap: 16px !important;
    scrollbar-width: none !important;
  }

  .nav-links::-webkit-scrollbar {
    display: none !important;
  }

  .nav-links a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  /* Carruseles / chips como Coctelería Premium */
  .tabs,
  .pills,
  .chips,
  .filters,
  .ritual-tabs,
  .category-tabs,
  [class*="tabs"],
  [class*="pills"],
  [class*="chips"],
  [class*="filters"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 10px !important;
    scrollbar-width: none !important;
  }

  .tabs::-webkit-scrollbar,
  .pills::-webkit-scrollbar,
  .chips::-webkit-scrollbar,
  .filters::-webkit-scrollbar,
  .ritual-tabs::-webkit-scrollbar,
  .category-tabs::-webkit-scrollbar,
  [class*="tabs"]::-webkit-scrollbar,
  [class*="pills"]::-webkit-scrollbar,
  [class*="chips"]::-webkit-scrollbar,
  [class*="filters"]::-webkit-scrollbar {
    display: none !important;
  }

  .tabs > *,
  .pills > *,
  .chips > *,
  .filters > *,
  .ritual-tabs > *,
  .category-tabs > *,
  [class*="tabs"] > *,
  [class*="pills"] > *,
  [class*="chips"] > *,
  [class*="filters"] > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Evita cortes agresivos de títulos */
  h1,
  h2,
  h3 {
    overflow: visible !important;
    padding-bottom: 0.08em !important;
  }

  /* Bloques de cards oscuras */
  .recipe-card,
  .cocktail-card,
  .ritual-card,
  .service-card,
  .builder-card,
  [class*="recipe"],
  [class*="cocktail"],
  [class*="ritual"] {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Animaciones flotantes que se enciman */
  .service-animation,
  .animation-card,
  .floating-widget,
  .floating-card,
  [class*="service-animation"],
  [class*="animation-card"],
  [class*="floating-widget"],
  [class*="floating-card"] {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .brand-mark,
  .topbar .brand-mark,
  .topbar-track .brand-mark,
  .nav .brand-mark {
    display: none !important;
  }
}