/* CTB: fixes mobile — hero 100svh y titulo mas vendido */
@media (max-width: 768px) {
  .mil-banner {
    height: 85svh !important;
    min-height: 85svh !important;
    max-height: 85svh !important;
  }
  .mil-banner .mil-p-120-30, .mil-banner .container { padding-top: 70px !important; padding-bottom: 24px !important; }
  .ctb-hero-logo { height: 84px !important; margin-bottom: 1.2rem !important; }
  .mil-banner h1 { font-size: 2.4rem !important; line-height: 1.15 !important; margin-bottom: 1.2rem !important; }

  #cervezas h2, .ctb-vendidos h2 {
    font-size: 2.9rem !important;
    line-height: 1.1 !important;
    text-align: center;
  }
  #cervezas h2 .mil-thin { color: #c8a24a; font-weight: 300; }
}

/* CTB: smart navbar móvil */
.mil-frame { transition: transform .35s ease; }
.mil-frame.ctb-nav-hidden { transform: translateY(-110%); }

/* CTB: burbujas extra (b19-b26) — aplica en todos los viewports */
.ctb-bubble.b19 { left: 5%;  width: 8px;  height: 8px;  animation: ctb-rise linear infinite; animation-duration: 15s; animation-delay: 1s; }
.ctb-bubble.b20 { left: 16%; width: 13px; height: 13px; animation: ctb-rise linear infinite; animation-duration: 12s; animation-delay: 10s; }
.ctb-bubble.b21 { left: 26%; width: 5px;  height: 5px;  animation: ctb-rise linear infinite; animation-duration: 19s; animation-delay: 4.5s; }
.ctb-bubble.b22 { left: 41%; width: 10px; height: 10px; animation: ctb-rise linear infinite; animation-duration: 13s; animation-delay: 7.5s; }
.ctb-bubble.b23 { left: 52%; width: 7px;  height: 7px;  animation: ctb-rise linear infinite; animation-duration: 17s; animation-delay: 12.5s; }
.ctb-bubble.b24 { left: 63%; width: 15px; height: 15px; animation: ctb-rise linear infinite; animation-duration: 11s; animation-delay: 3.2s; }
.ctb-bubble.b25 { left: 78%; width: 6px;  height: 6px;  animation: ctb-rise linear infinite; animation-duration: 21s; animation-delay: 8.8s; }
.ctb-bubble.b26 { left: 94%; width: 9px;  height: 9px;  animation: ctb-rise linear infinite; animation-duration: 14s; animation-delay: 5.8s; }

/* CTB: preloader fase 2 centrada (logo + Casa TierraBuena) */
.mil-preloader .mil-reveal-frame { text-align: center !important; }
.mil-preloader .mil-reveal-frame .mil-h3 { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mil-preloader .mil-reveal-frame img { display: inline-block; }

/* CTB: club hero — respirar del navbar */
.ctb-club-hero { padding-top: 90px; }
@media (max-width: 768px) {
  .ctb-club-hero { padding-top: 60px; }
}

/* CTB: beneficios del club como lista */
.ctb-club-beneficios { list-style: none; padding: 0; display: inline-flex; flex-direction: column; gap: 10px; text-align: left; font-size: 1.08rem; }
.ctb-club-beneficios li { display: flex; align-items: center; gap: 10px; }
.ctb-club-beneficios i { color: #c8a24a; font-size: .9em; }


/* CTB: hero desktop al 85% */
@media (min-width: 769px) {
  .mil-banner { height: 85vh !important; min-height: 85vh !important; max-height: 85vh !important; }
}

/* CTB: tienda header — respirar del navbar (espeja .ctb-club-hero) */
.ctb-tienda-hero { padding-top: 90px; }
@media (max-width: 768px) {
  .ctb-tienda-hero { padding-top: 60px; }
}

/* CTB: navbar movil minimo — transparente, solo logo centrado + hamburguesa */
@media (max-width: 768px) {
  .mil-frame {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .mil-frame-top { background: transparent !important; padding: 14px 20px !important; position: relative; }
  .mil-frame-top .mil-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .mil-frame-top .mil-menu-btn { margin-left: auto; }
  .mil-frame .mil-current-page, .mil-frame-bottom { display: none !important; }
}

/* CTB: hamburguesa segun fondo */
@media (max-width: 768px) {
  .mil-frame .mil-menu-btn span,
  .mil-frame .mil-menu-btn span::before,
  .mil-frame .mil-menu-btn span::after { background-color: #2b2118 !important; transition: background-color .3s; }
  .mil-frame.ctb-nav-oscuro .mil-menu-btn span,
  .mil-frame.ctb-nav-oscuro .mil-menu-btn span::before,
  .mil-frame.ctb-nav-oscuro .mil-menu-btn span::after { background-color: #f3e9d8 !important; }
}

/* CTB: logo navbar oculto en tope de hero */
@media (max-width: 768px) {
  .mil-frame-top .mil-logo { transition: opacity .35s ease, transform .35s ease; }
  .mil-frame-top .mil-logo.ctb-logo-oculto { opacity: 0; transform: translateX(-50%) translateY(-10px) !important; pointer-events: none; }
}

/* CTB: transparencia total del navbar movil — sin blur, sin cristal, sin lineas */
@media (max-width: 768px) {
  .mil-frame, .mil-frame-top,
  .mil-frame::before, .mil-frame::after,
  .mil-frame-top::before, .mil-frame-top::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mil-frame::before, .mil-frame::after,
  .mil-frame-top::before, .mil-frame-top::after { content: none !important; }
}

/* CTB: menu overlay — logo grande arriba de Inicio, chico oculto, burbujas (todos los viewports) */
.mil-menu-frame .mil-frame-top .mil-logo { display: none !important; }
.ctb-menu-logo { text-align: left; margin-bottom: 34px; }
.ctb-menu-logo img { height: 130px; width: auto; }
@media (max-width: 768px) {
  .ctb-menu-logo { text-align: center; }
  .ctb-menu-logo img { height: 110px; }
}
/* nota: .mil-menu-frame ya es position:fixed (style.css) y eso basta como
   contenedor de las burbujas absolutas; forzar relative lo metía al flujo
   y empujaba todo el contenido ~100vh hacia abajo */
.mil-menu-frame .ctb-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mil-menu-frame .mil-menu-content, .mil-menu-frame nav { position: relative; z-index: 1; }