/* 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) */
/* 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; }

/* CTB: mas vendidos — grid estatico 3 cards, fondo blanco en fotos, CTA */
.ctb-vendidos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 768px) { .ctb-vendidos-grid { grid-template-columns: 1fr; gap: 20px; } }
.ctb-product-img { background: #ffffff !important; border-radius: 20px; }
.ctb-vendidos-cta { text-align: center; margin-top: 40px; }

/* CTB: boton circular del footer — restaurar comportamiento template */
.mil-button.mil-icon-button-sm {
  padding: 0 !important;
  width: 56px; height: 56px;
  border-radius: 50% !important;
  gap: 0;
}
.mil-button.mil-icon-button-sm svg { margin: 0; }

/* CTB: barra segmentada al 65% centrada — sin empalme con hamburguesa/logo */
.ctb-seg-wrap { width: 65% !important; max-width: 720px; margin-left: auto; margin-right: auto; left: 0; right: 0; }
.ctb-seg-wrap .ctb-seg { display: flex; }
.ctb-seg-wrap .ctb-seg-btn { flex: 1; }
@media (max-width: 768px) {
  .ctb-seg-wrap { width: 92% !important; }
}

/* CTB: radius mas prominente (28px) en contenedores y fotos */
.ctb-product-card, .ctb-product-img, .ctb-info-card, .ctb-faq-item,
.ctb-modal-card, #ctb-cart-modal .ctb-modal-card, .ctb-club-banner,
.ctb-casa-slider, .ctb-diagrama-desk .ctb-paso, .ctb-store-card,
#ctb-productos .ctb-product-card, .ctb-tienda-hero .ctb-banner-inner,
section img, .ctb-casa-gallery img {
  border-radius: 28px !important;
}
.mil-banner { border-bottom-left-radius: 28px !important; border-bottom-right-radius: 28px !important; }
footer { border-top-left-radius: 28px !important; border-top-right-radius: 28px !important; }
@media (max-width: 768px) {
  #ctb-cart-modal .ctb-modal-card { border-radius: 28px 28px 0 0 !important; }
}

/* CTB: QA fixes desktop */
.ctb-filtro { white-space: nowrap; }
@media (min-width: 769px) {
  .ctb-seg-wrap.ctb-docked { top: 96px !important; }
}
@media (max-height: 920px) and (min-width: 769px) {
  .ctb-hero-logo { height: 130px !important; margin-bottom: 1.4rem !important; }
  .mil-banner h1 { font-size: 3.4rem !important; }
}

/* CTB: QA movil — fixes */
@media (max-width: 768px) {
  .ctb-view-actions, .ctb-modal-footer .ctb-view-actions {
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .ctb-view-actions .mil-button { width: 100%; justify-content: center; }
  .ctb-view-actions .ctb-btn-secondary { width: 100%; justify-content: center; }
  .ctb-seg-btn { min-height: 44px !important; min-width: 52px; padding: 0 14px !important; }
}
.ctb-cart-close, .ctb-modal-close {
  min-width: 42px !important; min-height: 42px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

/* CTB: logo del menu solo con menu abierto (fix glitch/duplicado) */

/* CTB: boton del subscribe — fiel al template (40px absoluto dentro del input) */
.mil-subscribe-form .mil-button.mil-icon-button-sm {
  position: absolute !important;
  top: 15px; right: 15px;
  width: 40px !important; height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.mil-subscribe-form .mil-button.mil-icon-button-sm svg {
  width: 17px; height: 17px; margin: 0;
}


/* CTB: ocultar links verticales "Volver arriba" a los lados */
.mil-menu-btn ~ .mil-link.mil-dark,
.mil-frame .mil-link.mil-dark,
a.mil-link.mil-dark.mil-arrow-place { display: none !important; }

/* CTB: inputs suscribe/club sin exceso de padding, texto legible */
.mil-subscribe-form input { font-size: 14px !important; padding: 0 60px 0 24px !important; letter-spacing: 1px !important; }
/* los .ctb-pill-input quedan fuera: su padding-left (3.2rem) reserva el hueco del
   icono absoluto de forms-pill.css. Esta regla es mas especifica (0,2,1) que
   .ctb-pill-input (0,1,0) y le ganaba pese a cargar antes, dejando 18px de padding
   con el icono en left:1.2rem -> icono encimado sobre el texto del campo. */
.ctb-club-form input:not(.ctb-pill-input),
.ctb-field input:not(.ctb-pill-input),
.ctb-modal input:not(.ctb-pill-input) { padding: 13px 18px !important; font-size: 17px !important; border-radius: 14px !important; }

/* CTB: carrito mas bonito */
.ctb-cart-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #efe7d8; }
.ctb-cart-thumb { width: 60px; height: 60px; object-fit: contain; background: #fff; border-radius: 14px; flex: 0 0 60px; }
.ctb-cart-item-info { flex: 1; }
.ctb-cart-item-info strong { display: block; font-size: 1.05rem; color: var(--ctb-brown); }
.ctb-cart-item-info span { font-size: .9rem; color: #9a8b73; }
.ctb-cart-item-qty { display: flex; align-items: center; gap: 6px; }
.ctb-cart-empty-state { text-align: center; padding: 50px 20px; color: #9a8b73; }
.ctb-cart-empty-state i { font-size: 2.6rem; color: var(--ctb-gold); margin-bottom: 16px; display: block; }


/* CTB: ocultar indicador vertical de pagina (queda tras el boton WhatsApp) */
.mil-current-page { display: none !important; }
.mil-menu-frame .mil-current-page { display: none !important; }

/* ============ CTB: MENU OVERLAY (limpio, determinista) ============ */
.mil-menu-frame .mil-frame-top .mil-logo { display: none !important; }
.mil-menu-frame .mil-menu-content {
  display: flex !important;
  align-items: center;
  min-height: 100vh;
}
.mil-menu-frame .mil-menu-content > .row { width: 100%; margin: 0; }
.mil-menu-frame .col-xl-5 {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ctb-menu-logo { display: block !important; text-align: left; margin: 0 0 22px 0 !important; }
.ctb-menu-logo img { height: 128px; width: auto; }
.mil-main-menu ul li { margin-bottom: 16px !important; }
.mil-main-menu ul li a { font-size: 2.6rem !important; padding: 2px 0 !important; }
@media (max-width: 768px) {
  .mil-menu-frame .col-xl-5 { align-items: center; }
  .ctb-menu-logo { text-align: center; }
  .ctb-menu-logo img { height: 104px; }
  .mil-main-menu ul li a { font-size: 2.1rem !important; }
}
/* ============ fin menu overlay ============ */

/* CTB: nav del menu sin altura fantasma (colapsa a su ul) */
.mil-menu-frame #swupMenu, .mil-menu-frame .mil-main-menu {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
}
@media (max-width: 768px) { .mil-menu-frame .mil-main-menu { align-self: center; } }
.mil-menu-frame #swupMenu ul { margin: 0 !important; padding: 0 !important; }

/* CTB: seg bar desktop dockeada mas arriba (empalma con navbar OK) */
@media (min-width: 769px) {
  .ctb-seg-wrap { top: 14px !important; }
  .ctb-seg-wrap.ctb-docked { top: 14px !important; }
}

/* CTB: menu movil — texto centrado horizontalmente */
@media (max-width: 768px) {
  .mil-menu-frame .col-xl-5 { align-items: center; text-align: center; }
  .mil-main-menu ul { text-align: center; }
  .mil-main-menu ul li a { justify-content: center; }
}

/* CTB: carrito y whatsapp mismo tamaño (62px desk / 56px movil) */
#ctb-cart-toggle { width: 62px !important; height: 62px !important; }
#ctb-wa { width: 62px !important; height: 62px !important; }
@media (max-width: 768px) {
  #ctb-cart-toggle { width: 56px !important; height: 56px !important; }
  #ctb-wa { width: 56px !important; height: 56px !important; }
}

/* CTB: navbar movil SIN logo — solo hamburguesa */
@media (max-width: 768px) {
  .mil-frame:not(.mil-menu-frame) .mil-frame-top .mil-logo { display: none !important; }
  .mil-frame:not(.mil-menu-frame) .mil-frame-top { justify-content: flex-end !important; }
}

/* CTB: forzar tamaño exacto igual (WA tenia borde/padding extra) */
#ctb-wa, #ctb-cart-toggle { box-sizing: border-box !important; padding: 0 !important; border: none !important; }

/* CTB: ocultar barra segmentada cuando hay overlay abierto (menu/carrito) */
body.ctb-no-scroll .ctb-seg-wrap { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }

/* CTB: tachita cerrar del menu a la derecha.
   Solo desde 1201px: ahi .mil-frame vale z-index 2 y queda debajo del overlay
   (.mil-menu-frame, z-index 9), asi que la unica X visible es la de este clon. */
@media (min-width: 1201px) {
  .mil-menu-frame .mil-frame-top { display: flex !important; justify-content: flex-end !important; align-items: center; }
  .mil-menu-frame .mil-frame-top .mil-menu-btn { margin-left: auto !important; margin-right: 0 !important; }
}

/* CTB fix: una sola X al abrir el menu.
   Debajo de 1200px style.css sube .mil-frame a z-index:999, por encima del overlay,
   asi que su boton se sigue pintando con el menu abierto. Ashley ocultaba por eso
   el clon .mil-menu-frame .mil-frame-top en ese rango; la regla de arriba lo
   reactivaba en todos los anchos y salian DOS X (encimadas con 17px de desfase en
   movil, separadas izquierda/derecha en tablet).
   Aqui manda el boton del frame principal: la hamburguesa se convierte en X en su
   mismo lugar, sin salto. El color ya lo resuelven .ctb-nav-oscuro (<=768) y
   style.css:1243 (<=1200, blanco). */
@media (max-width: 1200px) {
  .mil-menu-frame .mil-frame-top { display: none !important; }
  .mil-frame:not(.mil-menu-frame) .mil-frame-top { justify-content: flex-end !important; }
}
/* red de seguridad: con el menu abierto la X vive en el frame principal, asi que
   ese frame nunca puede quedar escondido por el auto-hide del scroll */
body.ctb-no-scroll .mil-frame.ctb-nav-hidden { transform: none !important; }

/* CTB: menu nav centrado tambien en desktop */
.mil-menu-frame .mil-main-menu ul { text-align: center; }
.mil-menu-frame .mil-main-menu ul li a { justify-content: center; }
.mil-menu-frame #swupMenu, .mil-menu-frame .mil-main-menu { align-self: center !important; }

/* CTB: logo arriba de la barra segmentada en store — grande, siempre visible */
.ctb-seg-logo { display: block !important; text-align: center; margin: 0 auto 16px; }
.ctb-seg-logo img { height: 84px; width: auto; }
.ctb-seg-wrap.ctb-docked .ctb-seg-logo { display: block !important; }
@media (max-width: 768px) { .ctb-seg-logo img { height: 70px; } }

/* CTB: logo sobre barra segmentada solo en movil (en desk tapa contenido) */
@media (min-width: 769px) { .ctb-seg-logo { display: none !important; } }

/* CTB: ocultar logo navbar sobre el hero tambien en desktop */
.mil-frame:not(.mil-menu-frame) .mil-frame-top .mil-logo.ctb-logo-oculto {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .35s ease;
}

/* CTB: liquid glass en la barra segmentada al scrollear (dockeada) */
.ctb-seg { transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ctb-seg-wrap.ctb-docked .ctb-seg {
  /* CTB perf: blur 22px->14px + fondo un poco mas opaco. backdrop-filter repinta en cada
     frame de scroll; radio menor = menos jank, mismo look de cristal liquido. */
  background-color: rgba(246, 243, 238, 0.62) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 30px rgba(43, 33, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ctb-seg-wrap.ctb-docked .ctb-seg-btn:not(.ctb-seg-active) { color: #2b2118; }
/* Club conserva su acento dorado también dockeado */
.ctb-seg-wrap.ctb-docked .ctb-seg-btn.ctb-seg-club:not(.ctb-seg-active):not(:hover) { color: var(--ctb-gold); }
.ctb-seg-wrap.ctb-docked .ctb-seg-btn.ctb-seg-club:hover { color: var(--ctb-brown); }

/* CTB: miniaturas del resumen checkout mas grandes, estilo tienda */
.ctb-co-thumb {
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 8px !important;
  box-shadow: 3px 4px 12px rgba(43,33,24,.1);
}
.ctb-co-line { gap: 18px !important; padding: 16px 0 !important; }
.ctb-co-line-info strong { font-size: 1.1rem !important; }
.ctb-co-line-info span { font-size: .95rem !important; }
.ctb-co-line-total { font-size: 1.05rem !important; }

/* CTB: eliminar logo azulado del frame-top (clon con invert) en TODAS las vistas */
.mil-frame-top .mil-logo,
.mil-menu-frame .mil-frame-top .mil-logo,
.mil-frame:not(.mil-menu-frame) .mil-frame-top .mil-logo { display: none !important; }

/* CTB: preloader SIEMPRE por encima de todo (barra filtros, navbar, etc.) */
.mil-preloader { z-index: 2147483647 !important; }
.mil-preloader:not(.mil-hidden) ~ * .ctb-seg-wrap,
body:has(.mil-preloader:not(.mil-hidden)) .ctb-seg-wrap { opacity: 0 !important; visibility: hidden !important; }

/* CTB: badges de metodos de pago en footer */
.ctb-pay-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ctb-pay-badge { color: rgba(243,233,216,.75); font-size: 2rem; line-height: 1; display: inline-flex; align-items: center; }
.ctb-pay-badge.ctb-pay-stripe { font-size: .8rem; letter-spacing: 1px; gap: 6px; text-transform: uppercase; color: rgba(243,233,216,.55); }
.ctb-pay-badge.ctb-pay-stripe i { font-size: 1.3rem; color: #c8a24a; }

/* CTB: en la tienda movil el logo sobre la barra de filtros se recoge al bajar
   y vuelve al subir, para que bajando solo se vea la barra y se aproveche el
   alto. Cuando esta visible su centro queda a la altura del boton hamburguesa
   (~45px), asi que logo y navbar se leen como una sola fila. Colapsa el alto y
   el margen —no solo la opacidad— para devolver el espacio de verdad. */
@media (max-width: 768px) {
  .ctb-seg-logo {
    overflow: hidden;
    max-height: 90px;
    transition: max-height .32s ease, opacity .24s ease, margin-bottom .32s ease;
  }
  .ctb-seg-logo.ctb-logo-fuera {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0 !important;
    pointer-events: none;
  }
}