:root{
  --bd-accent:#B272AE;
  --bd-accent-2:#a786b0;
  --bd-bg:#ffffff;
  --bd-text:#222;
  --bd-muted:#6b6b6b;
  --bd-border:#e9e9ee;
  --bd-card:#ffffff;
  --bd-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.text-medium {
  font-weight: 500;
  color: rgb(172, 172, 172);
}

/* Remover focus outline de los días */
.fecha-dia:focus,
.fecha-dia {
  outline: none !important;
}

/* Scope principal */
.bd, .bd-hero{background:var(--bd-bg);color:var(--bd-text);}
.bd-container{max-width:1100px;}

/* Fondo suave en el área del buscador (integra cards + banner) */
.bd{background:#f6f6fa;}
.bd-hero{background:#f6f6fa;}

/* Evita scroll horizontal/espacios a la derecha en móvil */
html, body{max-width:100%; overflow-x:clip;}

/* Evita que el contenido quede tapado por la cabecera sticky al hacer scroll/anchor */
/* Ajusta este valor si la cabecera cambia de altura */
.bd-prod .card-menu img{height:210px !important;}
.bd-prod .card-adic img{height:190px !important; padding:0 !important;}

/* Ajuste del offset del header (aumentado para cabeceras grandes) */
:root{ --header-offset: 90px; }
html { scroll-padding-top: var(--header-offset); }

/* Offset para anchors: evita que la navbar sticky tape el contenido al navegar a #ids */
.anchor {
  display: block;
  position: relative;
  top: calc(-1 * var(--header-offset));
  height: 0;
  overflow: hidden;
}

/* Si el destino es un contenedor con id (p.ej. #header-page), también aplica margen de scroll */
#header-page {
  scroll-margin-top: var(--header-offset);
}

/* Offset robusto para navegación por hash (#header-page) en navegadores que ignoran scroll-margin */
#header-page::before {
  content: "";
  display: block;
  height: var(--header-offset);
  margin-top: calc(-1 * var(--header-offset));
}

/* Página compra (Paso 3): el header suele ser más alto */
body.page-cumple-compra {
  --header-offset: 160px;
}

/* En paso 3, no sumes offsets duplicados en el contenedor */
body.page-cumple-compra .bd-compra{
  margin-top: 16px;
  /* offset real bajo la navbar sticky (sin mover la navbar) */
  padding-top: var(--header-offset) !important;
}

/* Página específica: empuja el contenido para que no quede oculto tras la cabecera */
body.page-cumple-producto .bd-prod-layout { padding-top: 8px; }

/* Ajuste importante para que sticky funcione correctamente */
/* overflow-x:hidden en body a menudo rompe sticky en hijos si no se tiene cuidado */
/* Si html o body tienen overflow oculto, sticky no funciona en descendientes */
/* Usamos clip que es mas "sticky-friendly" en navegadores modernos o nos aseguramos que el padre directo no tenga overflow */


@media (max-width: 768px){
  .bd-container{padding-left:12px; padding-right:12px;}
}

/* Stepper superior */
.bd-hero{background:transparent;}
.bd-stepper{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:6px 0 10px 0;}
.bd-step{display:flex;align-items:center;gap:10px;color:var(--bd-muted);font-weight:600;}
.bd-step__dot{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--bd-border);}
.bd-step--active{color:var(--bd-accent);}
.bd-step--active .bd-step__dot{border-color:var(--bd-accent);background:rgba(178,114,174,.12);}
.bd-title{font-size:22px;font-weight:800;margin:0 0 0 0;}

/* Banner cumpleaños integrado */
.bd-banner{margin:12px 0 14px 0;border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:14px;overflow:hidden;box-shadow:var(--bd-shadow);background:#fff;}
.bd-banner__img{display:block;width:100%;max-width:100%;height:auto;max-height:240px;object-fit:cover;}
@media (max-width: 768px){
  .bd-banner__img{max-height:180px;}
}

/* Tarjeta contenedora */
.bd-card{background:var(--bd-card);border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:14px;padding:16px;box-shadow:var(--bd-shadow);}
.bd-card--spaced{margin-top:4px;}
.bd-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.bd-card__kicker{font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:#2b2b2b;}

/* Toggle actividad (Piscina / Cancha) */
.bd-toggle{display:flex;gap:10px;background:#f6f6fa;border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:14px;padding:10px;}
.bd-toggle__btn{flex:1;border:1px solid transparent;border-radius:12px;padding:10px 14px;font-weight:800;text-transform:uppercase;background:transparent;color:#3a3a3a;}
.bd-toggle__btn.selected{background:var(--bd-accent);color:#fff;border-color:var(--bd-accent);}

/* Sedes: carrusel horizontal en móvil */
.bd-sede-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.bd-sede-card{position:relative;border:2px solid transparent;border-radius:14px;background:var(--bd-card);box-shadow:var(--bd-shadow);overflow:hidden;cursor:pointer;min-width:0;display:flex;flex-direction:column;}
.bd-sede-card.selected{border-color:var(--bd-accent);}
.bd-sede-card__media{height:120px;background:linear-gradient(180deg, rgba(178,114,174,.12), rgba(255,255,255,0));}
.bd-sede-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.bd-sede-card__meta{padding:10px 12px;}
.bd-sede-card__title{font-weight:900;margin-bottom:4px;line-height:1.1;}
.bd-sede-card.selected .bd-sede-card__title{color:var(--bd-accent);}
.bd-sede-card__status{font-size:12px;color:var(--bd-muted);line-height:1.25;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bd-sede-card__check{position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:999px;background:#32b24a;color:#fff;display:none;align-items:center;justify-content:center;font-weight:900;}
.bd-sede-card.selected .bd-sede-card__check{display:flex;}

@media (max-width: 768px){
  .bd-sede-row{grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 2px 8px 2px;scroll-padding-left:12px;}
  .bd-sede-card{scroll-snap-align:start;}
  .bd-sede-card__media{height:160px;}
  .bd-sede-card__meta{padding:12px 14px;}
  .bd-sede-card__title{font-size:18px;}
}

/* Calendario: se aprovecha markup existente */
.tabla-horario{margin:0 auto;width:100%;max-width:1000px;table-layout:fixed;border-collapse:collapse;border-spacing:0;}

/* Evita “desborde” horizontal del calendario en móvil sin tocar backend */
#calendario{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:28px;background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.06);margin:16px 0;}

.tabla-horario th,
.tabla-horario td{overflow:visible;}

.tabla-horario th{position:relative;overflow:hidden;color:#fff !important;font-weight:800;text-transform:uppercase;font-size:13px;padding:14px 8px !important;background:linear-gradient(135deg,#a786b0 0%,#9674a3 100%) !important;border-radius:10px;box-shadow:0 2px 8px rgba(167,134,176,0.3);letter-spacing:0.5px;text-align:center !important;}

/* Desktop: mostrar texto completo y ocultar la letra corta */
.tabla-horario thead th .th-full{display:inline-block;}
.tabla-horario thead th .th-short{display:none !important;}
.numero_calendario{background:#fff !important;border:2px solid #e9e9ee;border-radius:14px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);vertical-align:middle;box-shadow:0 2px 6px rgba(0,0,0,0.04);position:relative;z-index:0;text-align:center !important;}
.numero_calendario .fecha-dia{padding:20px 10px;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70px;transition:all 0.3s ease;font-weight:800;position:relative;gap:8px;}

/* Forzar que el inner no pinte fondo y tome el radio del padre (evita "huecos" visuales) */
.numero_calendario .fecha-dia{background:transparent;border-radius:inherit}

/* Separación entre elementos internos (día, etiqueta, punto) para que no queden tan juntos */
.numero_calendario .fecha-dia > *{margin:4px 0;}
.numero_calendario.valido .fecha-dia{cursor:pointer;}
.numero_calendario:not(.valido) .fecha-dia{opacity:.35;pointer-events:none;}

.numero_calendario .fecha-dia::after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-radius:999px;
  margin:8px auto 0 auto;
  background:#c9c9d3 !important;
}
/* Verde para fechas válidas - CON !important PARA PRODUCCIÓN */
.tabla-horario tbody .numero_calendario.valido .fecha-dia::after{
  background:#32b24a !important;
}
/* Rojo para fechas inactivas - CON !important PARA PRODUCCIÓN */
.tabla-horario tbody .numero_calendario.inactivo .fecha-dia::after{
  background:#e02424 !important;
}

/* Fallback adicional por si los selectores anteriores no funcionan */

/* Fallback adicional: color de texto como indicador si los pseudo-elementos fallan */
.numero_calendario.valido .fecha-dia{color:#32b24a;}
.numero_calendario.inactivo .fecha-dia{color:#e02424;}

/* ========== ESTILOS DE SELECCIÓN Y HOVER ========== */

/* Hover mejorado para fechas válidas */
.numero_calendario.valido:hover,
.numero_calendario.valido.selected {
  background-color: rgba(50, 178, 74, 0.15) !important;
  box-shadow: 0 8px 28px rgba(50, 178, 74, 0.12), 0 0 0 4px rgba(50,178,74,0.04);
}

.numero_calendario.valido:visited,
.numero_calendario.valido.selected {
  background-color: rgba(82, 50, 178, 0.15) !important;
}



/* Hover para fechas inactivas: mantener fondo sutil pero eliminar la línea/contorno rojo */
.numero_calendario.inactivo:hover {
  background-color: rgba(224, 36, 36, 0.06) !important;
  /* no cambiar el border-color para evitar la línea roja visible */
  border-color: var(--bd-border) !important;
  /* eliminar shadow rojo pronunciado; sin transform */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Día SELECCIONADO - ahora ilumina toda la casilla */
.numero_calendario .fecha-dia.selected {font-weight:900;}


.numero_calendario.valido.selected .fecha-dia{
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Mismo comportamiento para inactivos */
.numero_calendario.inactivo.selected{
  background: rgba(224,36,36,0.10) !important;
}
.numero_calendario.inactivo.selected .fecha-dia{
  background: transparent !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.numero_calendario.inactivo.selected{border: none !important;box-shadow:none !important;overflow:visible !important;position:relative}
.numero_calendario.inactivo.selected::before{
  content: "";
  position: absolute;
  inset: -20px;
  background: rgba(224,36,36,0.12) !important;
  border-radius: 14px;
  z-index: 2;
  pointer-events: none;
}
.numero_calendario.inactivo.selected .fecha-dia{position:relative;z-index:3;background:transparent}

/* Forzar marcado para inactivos (si la clase se aplica en distintos elementos) */
.numero_calendario.inactivo.selected,
.numero_calendario.inactivo.selected .fecha-dia,
.numero_calendario.inactivo .fecha-dia.selected {
  background-color: rgba(224,36,36,0.10) !important;
  color: #6b0f0f !important;
  box-shadow: 0 8px 24px rgba(224,36,36,0.12) !important;
}

.numero_calendario.inactivo.selected .fecha-dia{color:#6b0f0f;background:transparent;}

@media (max-width: 768px){
  .tabla-horario{border-spacing:12px;}

    /* En calendario.php los TH ahora contienen .th-full y .th-short
      En móvil ocultamos .th-full (texto completo) y mostramos .th-short */
    .tabla-horario thead th{padding:8px 4px !important;position:relative !important;overflow:visible;}
    /* Ocultar título completo y mostrar la letra corta en móvil */
    .tabla-horario thead th .th-full{display:inline-block;}
    .tabla-horario thead th .th-short{display:none;}
    .tabla-horario thead th .th-short{display:flex !important;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;text-transform:uppercase;width:100%;height:100%;}
    .tabla-horario thead th .th-full{display:none !important;}
    /* Forzar que no aparezcan pseudo-elementos heredados de otras hojas */
    .tabla-horario thead th::before, .tabla-horario thead th::after { display: none !important; }
    /* Asegurar que el th no repinte texto de fondo de otras reglas */
    .tabla-horario thead th{color:transparent !important;font-size:0 !important;text-indent:0 !important;}

    /* Evitar que el header (o su letra) solape las casillas del body en móvil */
    .tabla-horario thead th .th-short{pointer-events:none !important;height:auto !important;line-height:1 !important;padding:0 !important;}
    .tabla-horario thead th{z-index:1 !important}
    .tabla-horario tbody td{position:relative;z-index:5}
    .numero_calendario .fecha-dia{position:relative;z-index:6}
    /* Forzar que el thead no capture eventos táctiles en móvil (permite clicks en .fecha-dia) */
    .tabla-horario thead, .tabla-horario thead th { pointer-events: none !important; }

  .tabla-horario td{padding:14px 10px !important;border-radius:14px;}

  /* Más espacio en móvil para tocar cómodamente y aprovechar overflow inferior */
  .numero_calendario .fecha-dia{padding:16px 8px;font-size:18px;min-height:74px;}
  .numero_calendario .fecha-dia::after{width:8px;height:8px;margin-top:8px;}

  /* Dejar espacio inferior visible cuando hay overflow para scroll táctil */
  #calendario{padding-bottom:56px;}
}

/* Horarios: “ticket” usando markup actual (.radio-disponibilidad) */
.radio-disponibilidad{border:2px solid rgba(50,178,74,.35);border-radius:16px;box-shadow:var(--bd-shadow);overflow:hidden;background:#fff;}
.radio-disponibilidad:not([disponibilidad="0"]){cursor:pointer;transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;}
.radio-disponibilidad:not([disponibilidad="0"]):hover{border-color:var(--bd-accent);transform:translateY(-3px);box-shadow:0 10px 28px rgba(178,114,174,.22);}
.radio-disponibilidad.selected,
.radio-disponibilidad.seleccionado{border-color:var(--bd-accent);}

.radio-disponibilidad .card-header{background:rgba(50,178,74,.10);border-bottom:1px solid var(--bd-border);padding:12px 12px;}
.radio-disponibilidad .card-header h5{margin:0;font-weight:900;text-transform:uppercase;display:grid;gap:2px;}
.radio-disponibilidad .card-header h5::after{content:"";font-size:12px;font-weight:800;color:#111827;opacity:.75;}

/* Etiqueta de turno por posición (AM/PM). Mantiene compatibilidad con markup actual */
#horario .row > div:nth-child(1) .radio-disponibilidad .card-header h5::after{content:"Turno Mañana";}
#horario .row > div:nth-child(2) .radio-disponibilidad .card-header h5::after{content:"Turno Tarde";}

.radio-disponibilidad .card-body{
  position:relative;
  padding:14px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items:center;
  justify-content:center;
  min-height:96px;
}
.radio-disponibilidad .card-body h2{margin:0;font-weight:900;color:#111827;font-size:28px;letter-spacing:.01em;}

.radio-disponibilidad .card-body::after{
  content:"DISPONIBLE";
  /* position:absolute; left/bottom removed for flex layout */
  display: inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color:#0b3f2a;
  background:rgba(50,178,74,.20);
}

.radio-disponibilidad[disponibilidad="0"]{pointer-events:none;border-color:var(--bd-border);background:#f8fafc;}
.radio-disponibilidad[disponibilidad="0"] .card-header{background:#eef2f7;}
.radio-disponibilidad[disponibilidad="0"] .card-body h2{color:#6b7280;}
.radio-disponibilidad[disponibilidad="0"] .card-body::after{content:"AGOTADO";color:#374151;background:rgba(107,114,128,.18);}

@media (max-width: 480px){
  .radio-disponibilidad .card-body h2{font-size:22px;}
  .radio-disponibilidad .card-body::after{bottom:10px;padding:5px 8px;font-size:11px;}
}

/* CTA */
.bd-cta-wrap{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:10px;padding-bottom:60px;overflow:visible;}
.bd-cta{display:block;width:min(520px,100%);border:none;border-radius:20px;padding:14px 20px;font-weight:900;line-height:1.2;text-transform:uppercase;background:linear-gradient(90deg,#9d5fa2 0%,#b174b0 100%);color:#fff;box-shadow:0 14px 32px rgba(178,114,174,.22);appearance:none;-webkit-appearance:none;overflow:visible;position:relative;z-index:1;background-clip:padding-box;}
.bd-cta[disponibilidad="0"], #carrito[disponibilidad="0"]{background:#d5d5de;color:#666;}
.bd-cta-hint{font-size:12px;color:var(--bd-muted);}

/* ==============================
   Cumple Producto (Arma tu Pack)
   ============================== */
.bd-prod .bd-title{margin-bottom:4px;}

/* Espaciado de Grid de Productos */
.bd-prod-main .row > [class*="col-"] {
    margin-bottom: 24px; /* Separación vertical */
    padding-left: 10px;  /* Separación horizontal (gutter) */
    padding-right: 10px;
}

/* Limpieza de reglas antiguas del carrusel */
/* Compensar el gutter en el row padre */
.bd-prod-main .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* Guest Counter Control */
.guest-counter-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.guest-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.1s, background-color 0.2s;
    outline: none !important;
}

.guest-btn:active {
    transform: scale(0.95);
}

.guest-btn-minus {
    background-color: #e0e0e0;
    color: #555;
}

.guest-btn-minus:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f0f0f0;
    color: #aaa;
}

.guest-btn-plus {
    background-color: #B272AE; /* Morado marca */
    color: white;
}

.guest-btn-plus:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #d1b3cf;
}


.guest-display {
    text-align: center;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.guest-display #guest-count {
    font-size: 48px;
    font-weight: 900;
    color: #333;
    line-height: 1;
    display: block;
}

.guest-feedback {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
    font-weight: 500;
}

/* =========================================
   Barra Flotante Fixed (Resumen + Continuar)
   ========================================= */
.sticky-stats-bar {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483647; /* Máximo Z-Index posible */

  background: rgba(255,255,255,0.98);
  /* Borde superior sutil de color de marca para remarcar separación */
  border-top: 1px solid rgba(178,114,174,0.12);
  /* Sombra reforzada y ligera elevación para diferenciar capas */
  box-shadow: 0 -12px 64px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.08);
  filter: drop-shadow(0 -6px 36px rgba(0,0,0,0.2));
  backdrop-filter: saturate(110%) blur(6px);

  /* En PC flota centrada y bonita */
  margin: 0 auto 24px auto;
  width: 90%;
  max-width: 1100px;
  border-radius: 50px; /* Forma de píldora completa */
  padding: 10px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Borde superior luminoso sutil para dar sensación de separación (opcional) */
.sticky-stats-bar::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 2px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
  pointer-events: none;
  opacity: 0.9;
}

/* Barra siempre visible en todas las pantallas */
.sticky-stats-bar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  transition: transform 0.22s cubic-bezier(.22,.72,.24,1), opacity 0.18s ease;
  will-change: transform, opacity;
}

/* Oculta la barra desplazándola y desactivando interacciones */
.sticky-stats-bar.sticky-hidden {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Halo difuso alrededor de la barra para enfatizar que flota */
.sticky-stats-bar::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  border-radius: 56px;
  pointer-events: none;
  z-index: -1;
  /* Halo cálido (ligeramente reducido) */
  background: radial-gradient(ellipse at center, rgba(234,128,98,0.28) 0%, rgba(234,128,98,0.16) 22%, rgba(234,158,128,0.07) 38%, rgba(178,114,174,0.03) 58%, transparent 80%);
  filter: blur(16px);
  opacity: 0.86;
}

/* Ocultar WhatsApp cuando el carrito está abierto */
#bd-cart-toggle:checked ~ * [id^="whatsapp-widget"],
#bd-cart-toggle:checked ~ [id^="whatsapp-widget"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ocultar barra inferior cuando el carrito está abierto */
#bd-cart-toggle:checked ~ .sticky-stats-bar {
  transform: translateY(120%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
  pointer-events: none !important;
}

/* Fallback robusto: cuando el sidebar/carrito está abierto, ocultar barra inferior y WhatsApp */
body.bd-cart-open .sticky-stats-bar {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.bd-cart-open [id^="whatsapp-widget"],
body.bd-cart-open [id*="whatsapp-widget"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes fadeInUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Grupo de Datos (PC) */
.sticky-stats-bar .stats-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sticky-stats-bar .stat-item {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: #f3f4f6;
    transition: transform 0.2s;
}

.sticky-stats-bar .stat-item i {
    font-size: 18px;
    color: var(--bd-accent);
}

/* Total destacado */
.stat-total {
    background-color: #e8f5e9;
    color: #1b5e20;
    font-weight: 800;
}
.stat-total i { color: #2e7d32; }

/* Botón Continuar */
.btn-continue-bar {
    background: var(--bd-accent);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(178, 114, 174, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-continue-bar:hover {
    background: #9d5d99;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(178, 114, 174, 0.5);
}

/* =========================================
   Versión Móvil Robustecida
   ========================================= */
@media (max-width: 768px) {
    /* Ajuste para que el contenido no quede oculto detrás de la barra fija */
    body {
        padding-bottom: 90px !important;
    }

    .sticky-stats-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important; /* Recto en movil */
        
        /* Asegurar visibilidad */
        background: #ffffff !important;
        border-top: 1px solid #ddd !important;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1) !important;
        z-index: 2147483647 !important;
        
        display: flex !important;
        flex-direction: row !important; /* Fila simple */
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        /* Soporte para iPhone notch/home bar */
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; 
        gap: 10px;
        
        animation: none !important; /* Evitar bugs de animación en algunos móviles */
    }

    /* Ocultar elementos innecesarios en móvil */
    .stat-local, .stat-fecha {
        display: none !important;
    }
    
    .sticky-stats-bar .stats-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
      gap: 6px !important;
        flex: 1;
        min-width: 0; /* Permite que se comprima si es necesario */
        overflow: hidden;
    }
    
    .sticky-stats-bar .stat-item {
      font-size: 11px !important;
      padding: 4px 6px !important;
        white-space: nowrap;
    }
    
    .sticky-stats-bar .barra-acciones {
        display: flex;
      gap: 4px;
        flex-shrink: 0;
    }
    
    .btn-back-bar {
      padding: 6px 8px !important;
      font-size: 0 !important;
        border-radius: 8px !important;
        white-space: nowrap;
      min-width: 34px;
      line-height: 1;
    }
    
    .btn-back-bar i {
      font-size: 16px !important;
    }
    
    .btn-continue-bar {
      padding: 8px 12px !important;
      font-size: 12px !important;
        white-space: nowrap;
    }

    
    /* Textos más legibles en móvil */
    .stat-invitados {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        font-size: 12px !important;
        color: #666 !important;
    }
    
    .stat-total {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        font-size: 16px !important;
        color: #000 !important;
        font-weight: 900 !important;
    }
    .stat-total i { display: none !important; } 

    
    /* Botón ajustado */
    .btn-continue-bar {
        padding: 8px 16px !important;
        font-size: 13px !important;
        height: 40px !important; /* Altura fija touch friendly */
    }
}

/* Neutraliza la clase espacio-movil que quitaba paddings */
@media (max-width: 576px) {
  .bd-prod .espacio-movil {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px !important; /* Espacio vertical en movil */
  }
}

.bd-prod-layout{display:block;}
.bd-prod-main{min-width:0;}

.bd-prod-barra{
  margin-top:14px;
  background:#fff;
  border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  border-radius:14px;
  box-shadow:var(--bd-shadow);
}
.bd-prod-barra span{display:inline-block; margin-right:10px;}

/* IMPORTANT: neutraliza la .barra-flotante global (custom.css) que es fixed y tapa contenido */
.bd-prod .barra-flotante{
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  z-index: auto !important;
  background: #fff !important;
  color: #111827 !important;
  padding: 10px 12px !important;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start !important;
}
.bd-prod .barra-flotante .total{color: var(--bd-accent) !important;}

/* Cards pack/adicionales */
.bd-prod .card-menu,
.bd-prod .card-adic{
  border:1px solid #e5e7eb;
  border-radius:12px; /* Menos redondeado */
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);
  overflow:hidden;
  background:#fff;
  transition: transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.bd-prod .card-menu:hover,
.bd-prod .card-adic:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.12);}

.bd-prod .card-menu.selected,
.bd-prod .card-menu.seleccionado{border:2px solid var(--bd-accent);}

.bd-prod .card-menu.selected::after,
.bd-prod .card-menu.seleccionado::after{
  content:"\2713";
  position:absolute;
  right:0;
  top:0;
  width:32px;
  height:32px;
  border-radius:0 0 0 12px; /* Esquina cuadrada visual */
  background:#32b24a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  z-index:2;
  box-shadow:none;
}

.bd-adic-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(178,114,174,0.12);
  color:var(--bd-accent);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

.bd-adic-hint{
  margin-top:6px;
  color:#6b7280;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
}

.bd-adic-hint i{
  font-size:14px;
  animation: bd-adic-pulse 1.8s ease-in-out infinite;
}

@keyframes bd-adic-pulse{
  0%, 100%{transform:translateY(0);opacity:.7;}
  50%{transform:translateY(2px);opacity:1;}
}

.bd-prod .card-menu,
.bd-prod .card-adic{position:relative;}

.bd-prod .card-menu .card-header,
.bd-prod .card-adic .card-header{background:#fff;border-bottom:1px solid #f6f6f6;padding:14px 16px;}

.bd-prod .card-menu .card-header h3,
.bd-prod .card-adic .card-header h4{margin:0;font-weight:800;font-size:16px;text-align:center;line-height:1.3;color:#222;}

/* Packs: Imagen cover ocupando todo el ancho */
.bd-prod .card-menu img{
  width:100% !important;
  height:240px !important; /* Más altura */
  object-fit:cover;
  border-radius:0;
  background:#f6f6fa;
}

/* Adicionales: Imagen grande sin restricciones */
.bd-prod .card-adic img{
  width:100% !important;
  height:200px !important; /* Altura generosa */
  object-fit:contain;
  padding:0; /* Sin padding */
  background:transparent;
  transition:transform .3s ease;
}
.bd-prod .card-adic:hover img{transform:scale(1.02);}

/* Quita márgenes del .row interno */
.bd-prod .card-menu .row,
.bd-prod .card-adic .row{margin-left:0;margin-right:0;}

.bd-prod .card-menu .card-body{padding:16px;}
.bd-prod-details{margin-top:8px; color:#555; line-height:1.4; font-size:13px;}

/* Descripción breve del producto (ej: 'Torta para 20 personas' o '50 unidades') */
.bd-prod-desc{margin-top:8px;color:#6b6b6b;font-weight:700;font-size:13px;}

/* Adicionales Body: Limpio */
.bd-prod .card-adic .card-body{
  padding:12px 14px; /* Un poco de aire */
  flex:1;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.bd-prod .card-adic .card-footer{background:#fff;border-top:none;padding:12px 14px;padding-top:0;}
.bd-prod .card-adic .card-footer h6{margin:0;font-size:18px;color:var(--bd-accent);font-weight:800;text-align:center;}

/* Qty control */
.bd-qty{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;}
.bd-qty__btn{width:32px;height:32px;border-radius:8px;border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:#fff;font-weight:900;line-height:1;color:#111;cursor:pointer;transition:background .12s ease;}
.bd-qty__btn:hover{background:#f6f6fa;}
.bd-qty__input{width:70px !important;text-align:center;border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:8px;padding:6px;font-weight:700;}

/* Mobile-only styles for cart moved to global */

.bd-prod-layout{display:block;} /* Remove grid column */

/* Cart as a Drawer on ALL screens */
/* Fix: position fixed top:0 evita que el navegador haga scroll al enfocar el input */
.bd-cart-toggle{
  position:fixed;
  top:0;
  left:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  z-index:-1;
}

 .bd-cart{
    position:fixed;
    right:0;
    top:120px;
    width:min(340px, 88vw);
    z-index:1200;
    /* Cerrado: panel fuera, manilla visible */
    transform:translate3d(100%, 0, 0);
    opacity:.985;
    transition: transform 0.46s cubic-bezier(.22,.72,.24,1), opacity 0.22s ease;
    will-change: transform;
    overflow: visible;
    backface-visibility: hidden;
}

/* Asomo solo cuando esta cerrado para no pelear con la transicion de apertura */
#bd-cart-toggle:not(:checked) ~ .bd-cart {
  animation: cart-peek 6.2s cubic-bezier(.22,.72,.24,1) infinite;
}

/* Open sidebar when checkbox is checked */
#bd-cart-toggle:checked ~ .bd-cart {
  transform: translate3d(0, 0, 0);
  opacity:1;
  animation: none;
}

#bd-cart-toggle:checked ~ .bd-cart .bd-cart__inner {
  animation: cart-open-inner 0.32s cubic-bezier(.22,.72,.24,1) both;
}

.bd-cart__handle:hover {
  animation-play-state: paused !important;
}

/* Keyframes: stay hidden most of the time, smoothly pull in then retreat */
@keyframes cart-peek {
  0%, 76% { transform: translate3d(100%, 0, 0); }
  84% { transform: translate3d(calc(100% - 10px), 0, 0); }
  90% { transform: translate3d(calc(100% - 18px), 0, 0); }
  96% { transform: translate3d(calc(100% - 12px), 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}

/* Open animation: subtle ease-in for inner panel */
@keyframes cart-open-inner {
  0% { opacity: 0.65; transform: translateX(8px) scale(0.995); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.bd-cart__inner{background:#fff;border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:16px 0 0 16px;box-shadow:var(--bd-shadow);padding:14px; height: calc(100vh - 140px); overflow-y: auto;}

/* The handle (arrow) always visible */
 .bd-cart__handle{
    position:absolute;
    left:-46px;
  top:50%;
  transform:translateY(-50%);
    width:46px;
    height:58px;
    border-radius:14px 0 0 14px;
    background:var(--bd-accent);
    box-shadow:-4px 4px 12px rgba(0,0,0,0.1);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    z-index: 1300;
    /* Solo pulso vertical/escala para no generar tirones con doble translateX */
    animation: handle-combined 2.8s ease-in-out infinite;
}

.bd-cart__icon{
  color:#fff;
  font-size:18px;
  line-height:1;
  opacity:0.95;
}

.bd-cart__label{
  display:none;
}

@media (max-width: 768px){
  /* En pantallas chicas reduce un poco la invasión visual */
  .bd-cart__handle{left:-42px;width:42px;height:54px;border-radius:12px 0 0 12px;}
  .bd-cart__handle::before{font-size:24px;}
  .bd-cart__label{display:none;}
  
  /* Reduce animation intensity on mobile for better performance */
  .bd-cart { animation-duration: 6.8s !important; }
  .bd-cart__handle { animation-duration: 3.2s !important; }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bd-cart,
  .bd-cart__handle,
  .bd-cart__handle::before {
    animation: none !important;
  }
  
  .sticky-stats-bar {
    transition: transform 0.2s ease-out !important;
  }
}
.bd-cart__handle::before{
    content:"";
    display:none;
}
#bd-cart-toggle:checked ~ .bd-cart .bd-cart__handle::before{content:"";}

/* Pause animations when the cart is open */
#bd-cart-toggle:checked ~ .bd-cart .bd-cart__handle,
#bd-cart-toggle:checked ~ .bd-cart .bd-cart__handle::before {
  animation-play-state: paused !important;
}

/* Hover: stronger bounce to indicate interactivity */
.bd-cart__handle:hover { transform: translateY(-50%) scale(1.04); }
.bd-cart__handle:hover::before { animation: handle-hover-bounce 0.64s ease-in-out 1; }

/* Keyframes */
/* Combined keyframes to produce a fluid pulse + bounce/peek for the handle (suavizada) */
@keyframes handle-combined {
  0% { transform: translateY(-50%) scale(1); }
  25% { transform: translateY(-50%) scale(1.022); }
  50% { transform: translateY(calc(-50% - 1px)) scale(1.01); }
  36% { transform: translateY(-50%) scale(1); }
  75% { transform: translateY(-50%) scale(1); }
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes handle-bounce {
  0%, 84% { transform: translateX(0); }
  88% { transform: translateX(-6px); }
  92% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes handle-hover-bounce {
  0% { transform: translateX(0); }
  30% { transform: translateX(-10px); }
  60% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* Peek animation: mostly idle, briefly moves handle outward to 'asomarse' */
@keyframes handle-peek {
  0%, 86% { left: -46px; }
  88% { left: -43px; }
  92% { left: -39px; }
  96% { left: -44px; }
  100% { left: -46px; }
}

.bd-cart__title{font-weight:900;font-size:16px;margin-bottom:10px;}

/* ==========================================================================
   CAROUSEL INDICATORS (DOTS)
   ========================================================================== */
.bd-carousel-wrapper {position: relative;}
.bd-carousel-wrapper{width:100%;}

.bd-carousel-indicators {
    display: none; /* Desktop hidden */
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 8px;
  width:100%;
}

.bd-carousel-dot {
    width: 8px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.bd-carousel-dot.active {
    background: var(--bd-accent);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .bd-carousel-indicators {
        display: flex;
    }
    
    /* Carousel alignment fixes */
    .bd-carousel-mobile {
      /* Padding para sombras (sin desperdiciar espacio a la derecha) */
      padding: 10px 12px 18px 12px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      scroll-padding-left: 12px;
      scroll-padding-right: 12px;
      scroll-snap-type: x mandatory;
        display: grid;
        grid-auto-flow: column;
      /* Mantén un preview de la siguiente card (estilo sedes) */
      grid-auto-columns: 92%;
        grid-template-columns: none !important;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .bd-carousel-mobile::-webkit-scrollbar{display:none;height:0;width:0;}

    /* Evita que reglas globales de .row desplacen el carrusel */
    .bd-prod-main .bd-carousel-mobile{margin-left:0 !important;margin-right:0 !important;}

    /* Aislar completamente de los gutters globales */
    .bd-prod-main .bd-carousel-mobile > [class*="col-"]{
      padding:0 !important;
      margin-bottom:0 !important;
    }

    /* Reset columns inside carousel */
    .bd-prod .bd-carousel-item {
        padding: 0 !important; /* Remove buffer padding */
      height: auto;
        display: block;
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 0 !important;
      scroll-snap-align: start;
      scroll-snap-stop: always;
        min-width:0;
    }
    
    /* Ensure card fills the height */
    .bd-prod .bd-carousel-item .card {
      height: auto;
    }
}

.bd-cart__item{padding:12px 14px;border:2px solid #e9e9ee;border-radius:12px;background:#fff;margin-bottom:10px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.bd-cart__item-main{flex:1;min-width:0;}
.bd-cart__item-title{font-weight:900;color:#111827;font-size:14px;line-height:1.3;}
.bd-cart__item-sub{font-size:12px;color:var(--bd-muted);margin-top:4px;line-height:1.3;}
.bd-cart__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* Total price on right side of cart items */
.bd-cart__item > .bd-cart__item-title:last-child{white-space:nowrap;font-size:15px;}

.bd-cart__title{font-weight:900;font-size:18px;color:#111827;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e9e9ee;}

.bd-cart__adicionales{margin-top:6px;margin-bottom:10px;}

.bd-cart__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 10px;border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:12px;background:#f6f6fa;margin-bottom:12px;}
.bd-cart__total-value{font-weight:900;font-size:18px;color:#111827;}

.bd-cart__cta{width:100%;border:none;border-radius:12px;padding:12px 14px;font-weight:900;text-transform:uppercase;background:var(--bd-accent);color:#fff;box-shadow:var(--bd-shadow);}

/* Mobile drawer specific overrides removed as drawer is now global */

@media (max-width: 992px){
  /* Cleaned up redundant styles */
}

@media (max-width: 768px){
  /* En móvil no estiramos cards: se ven más “como PC” */
  .bd-prod .card-menu,
  .bd-prod .card-adic{height:auto;}

  /* Ajusta el tamaño de columnas para móvil - respeta estructura Bootstrap */
  .bd-prod .col-12.col-sm-6.col-md-6.col-lg-3{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 8px; /* Forzar padding */
  }
  
  .bd-prod .col-6.col-sm-6.col-md-4.col-lg-3{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 8px; /* Forzar padding */
  }
  
  /* Ajusta imágenes y títulos para móvil */
  .bd-prod .card-menu .card-header h3,
  .bd-prod .card-adic .card-header h4{font-size:14px;padding:4px;}
  
  .bd-prod .card-menu img{height:210px !important;}
  .bd-prod .card-adic img{height:190px !important; padding:0 !important;}
  
  /* Footer de precio más compacto */
  .bd-prod .card-adic .card-footer{padding:10px 12px;padding-top:0;}
  .bd-prod .card-adic .card-footer h6{font-size:14px;}
  
  /* Qty más pequeño */
  .bd-qty{gap:4px;margin-top:6px;}
  .bd-qty__btn{width:28px;height:28px;font-size:14px;}
  .bd-qty__input{width:60px !important;padding:4px;font-size:14px;}
  
  /* Stepper más compacto */
  .bd-stepper{gap:12px;font-size:13px;}
  .bd-step__dot{width:22px;height:22px;font-size:13px;padding:14px 8px !important;background:linear-gradient(135deg,#a786b0 0%,#9674a3 100%);border-radius:10px;box-shadow:0 2px 8px rgba(167,134,176,0.3);letter-spacing:0.5px;}
  .bd-step__label{display:none;}
  
  /* Barra flotante wrap mejor en móvil */
  .bd-prod .barra-flotante{font-size:12px;padding:8px 10px !important;}
  .bd-prod .barra-flotante span{margin-right:6px;margin-bottom:4px;}
  
  /* Reduce padding de cards */
  .bd-prod .card-menu .card-body{padding:10px;}
  .bd-prod .card-adic .card-body{padding:8px;}
  
  /* Details más compacto */
  .bd-prod-details{font-size:11px;margin-top:6px;}
}

@media (max-width: 480px){
  /* Pack base: 1 columna en pantallas muy pequeñas */
  .bd-prod .col-12.col-sm-6.col-md-6.col-lg-3{
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .bd-prod .card-menu img{height:180px !important;}
  .bd-prod .card-menu .card-header h3{font-size:15px;}
}

/* Accesibilidad */
.radio-card:focus{outline:3px solid rgba(178,114,174,0.18);outline-offset:2px;}

/* Nota: antes existía un max-width fijo para el banner.
  Se elimina para que el banner ocupe el ancho del contenedor `.bd-banner`. */


/* ================================
   Compra Cumple (cumple-compra.php)
   ================================ */

.bd-compra{
  background: transparent;
  margin-top: 20px;
}

/* Asegura que el contenido no quede oculto por la navbar sticky */
.bd-compra{
  padding-top: calc(var(--header-offset) - 16px);
}

.bd-compra .bd-compra-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}

.bd-compra .bd-compra-col{min-width:0;}

@media (max-width: 991.98px){
  .bd-compra .bd-compra-grid{grid-template-columns: 1fr; gap: 14px;}
}

.bd-compra .bd-card .row{margin-left:-10px;margin-right:-10px;}
.bd-compra .bd-card .row > [class*="col-"]{padding-left:10px;padding-right:10px;margin-bottom:12px;}
.bd-compra .bd-card .row > [class*="col-"]:last-child{margin-bottom:0;}

.bd-compra label.control-label{
  color:#3f3f3f;
  font-weight:800;
  margin-bottom:6px;
}

.bd-compra .form-control{
  border:1px solid var(--bd-border) !important;
  border-radius:12px !important;
  padding:10px 12px;
  box-shadow:none !important;
  background:#fff;
}

.bd-compra .form-control:focus{
  border-color:rgba(178,114,174,.55) !important;
  box-shadow:0 0 0 .2rem rgba(178,114,174,.15) !important;
}

.bd-compra .table-responsive{border-radius:12px;}

.bd-compra .bd-compra-table{
  margin:0;
  border-color: var(--bd-border);
}

.bd-compra .bd-compra-table td,
.bd-compra .bd-compra-table th{vertical-align:middle;}

.bd-compra .bd-compra-table thead th{
  font-weight:900;
  font-size:13px;
}

.bd-compra .table-light,
.bd-compra .bd-compra-table thead,
.bd-compra .bd-compra-table tfoot{
  background: rgba(178,114,174,.06) !important;
}

.bd-compra .bd-compra-empty{
  font-weight:900;
  color:#444;
  padding:6px 0;
}

.bd-compra .bd-compra-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:6px 0 12px 0;
}

.bd-compra .bd-compra-total__label{
  font-weight:900;
  color:#2b2b2b;
}

.bd-compra .bd-compra-total__value{
  font-weight:900;
  color:var(--bd-accent);
  font-size:18px;
}

.bd-compra .bd-payment{
  border:2px solid #e9e9ee;border-radius:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  border-radius:12px;
  padding:12px;
  background: rgba(178,114,174,.04);
}

.bd-compra .bd-payment__row{
  display:flex;
  align-items:center;
  gap:10px;
}

.bd-compra .bd-payment__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  margin:0;
  cursor:pointer;
}

.bd-compra .bd-payment__title{
  font-weight:900;
  color:#222;
}

.bd-compra .bd-payment img{height:26px;width:auto;}

.bd-compra .bd-payment__desc{margin-top:10px;}
.bd-compra .bd-payment__desc p{margin:0;color:#555;line-height:1.35;font-size:13px;}

.bd-compra .bd-compra-paybtn{
  width:100%;
  float:none !important;
  margin-top:12px;
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
}

/* =======================
   Éxito Cumple (Webpay)
   ======================= */
section.bd-exito-hero{
  background: linear-gradient(135deg, #B272AE 0%, #6b4c91 100%) !important;
  padding: 40px 0 !important;
}

section.bd-exito-hero .bd-exito-title{
  margin:0 !important;
  text-align:center !important;
  font-weight:900 !important;
  font-size: 2.5rem !important;
  letter-spacing:.02em;
  color:#fff !important;
  font-style: italic;
}

section.bd-exito-hero .bd-exito-sub{
  margin-top:12px !important;
  text-align:center !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:700;
  font-size: 1.1rem;
}

section.bd-exito{
  background:#f6f6fa !important;
  padding: 30px 0 !important;
}

section.bd-exito .bd-exito-card{
  max-width:560px;
  margin:0 auto;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

section.bd-exito .bd-exito-grid{display:grid;gap:0;}

section.bd-exito .bd-exito-row{
  display:flex;
  justify-content:space-between;
  align-items: center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #e9e9ee;
}
section.bd-exito .bd-exito-row:last-child{border-bottom:none;}

section.bd-exito .bd-exito-label{
  color:#6b6b6b !important;
  font-weight:600 !important;
  font-size: 14px;
}
section.bd-exito .bd-exito-value{
  color:#111827 !important;
  font-weight:800 !important;
  text-align:right;
  font-size: 15px;
}

section.bd-exito .bd-exito-empty{
  font-weight:800;
  color:#111827;
  text-align:center;
  padding:20px 0;
  font-size: 16px;
}

section.bd-exito .bd-exito-actions{
  margin-top:20px;
  display:flex;
  justify-content:center;
}
section.bd-exito .bd-exito-cta{
  width:min(360px,100%);
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 480px){
  section.bd-exito .bd-exito-row{flex-direction:column;align-items:flex-start;gap:4px;}
  section.bd-exito .bd-exito-value{text-align:left;}
  section.bd-exito-hero .bd-exito-title{font-size: 1.8rem !important;}
}

/* =======================================================
   CORRECCIONES VISUALES (BOTONES SEPARADOS + CALENDARIO)
   ======================================================= */

/* --- 1. ARREGLO DE BOTONES (PISCINA / CANCHA) --- */

/* El contenedor principal: lo hacemos transparente y separamos los hijos */
.bd-toggle {
    background-color: transparent !important;
    border: none !important;
    display: flex !important;
    gap: 20px !important; /* Espacio entre botones */
    padding: 0 !important;
}

/* El estilo de cada botón (Piscina / Cancha) cuando NO está seleccionado */
.bd-toggle .bd-toggle__btn {
    flex: 1; /* Para que ambos midan lo mismo */
    background-color: #ebeaea !important; /* Gris claro */
    border: 2px solid #e7e7e7 !important;  /* Borde gris */
    border-radius: 15px !important;        /* Bordes bien redondos */
    color: #666 !important;                /* Texto gris oscuro */
    font-weight: 700 !important;
    padding: 15px 10px !important;         /* Botones más altos */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    opacity: 1 !important; /* Forzamos que se vean sólidos */
    transition: all 0.3s ease;
}

/* El estilo cuando SELECCIONAS un botón (Clase .selected añadida por tu JS) */
.bd-toggle .bd-toggle__btn.selected {
    background-color: #B272AE !important; /* TU COLOR MORADO */
    border-color: #92568f !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(178, 114, 174, 0.4) !important;
}


/* --- 2. ARREGLO DEL CALENDARIO (CUADRADO VERDE) --- */

/* Apuntamos a la clase que tu JS agrega (.selected) 
   y a la clase base (.fecha-dia o .numero_calendario) 
*/
.fecha-dia.selected,
.numero_calendario.selected {
    background-color: #6DCF77 !important; /* VERDE SÓLIDO */
    color: white !important;
    border-radius: 8px !important; /* Opcional: un poco de borde redondeado al cuadro */
    opacity: 1 !important;
}

/* Aseguramos que los números o textos dentro del cuadro verde 
   sean blancos y no tengan fondos grises propios 
*/
.fecha-dia.selected *,
.numero_calendario.selected * {
    background: transparent !important;
    color: white !important;
    border: none !important;
}

/* ========== MEJORAS VISUALES CALENDARIO - OVERRIDE ========== */

/* Contenedor calendario mejorado */
#calendario {
  padding: 16px !important;
  background: linear-gradient(135deg, #f8f4fb 0%, #ffffff 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(178,114,174,0.08), 0 1px 4px rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(178,114,174,0.1) !important;
  margin: 12px 0 !important;
}

/* Tabla con espaciado mejorado */
.tabla-horario {
  border-collapse: separate !important;
  border-spacing: 6px !important;
  margin: 0 auto;
}

/* Encabezados con gradiente premium */
.tabla-horario th {
  background: linear-gradient(135deg, #B272AE 0%, #9a5fa0 50%, #8a4f92 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(178,114,174,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 12px 6px !important;
  font-size: 11px !important;
}

/* Efecto brillante en encabezados */
.tabla-horario th::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0; /* mantener detrás del contenido del th */
}

.tabla-horario th > * {
  position: relative;
  z-index: 1; /* asegurar que el texto/elementos del th estén por encima */
}

/* Celdas mejoradas */
.numero_calendario {
  border: 2px solid #f0edf4 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

.numero_calendario .fecha-dia {
  padding: 18px 10px !important;
  font-size: 20px !important;
  min-height: 75px !important;
  color: #2d3748 !important;
  gap: 6px !important;
}

/* Indicadores mejorados con animación */
.numero_calendario .fecha-dia::after {
  width: 10px !important;
  height: 10px !important;
  margin-top: 10px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.tabla-horario tbody .numero_calendario.valido .fecha-dia::after {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 0 8px rgba(16,185,129,0.4), 0 2px 4px rgba(0,0,0,0.1) !important;
  animation: pulseGreen 2s ease-in-out infinite;
}

.tabla-horario tbody .numero_calendario.inactivo .fecha-dia::after {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.4), 0 2px 4px rgba(0,0,0,0.1); }
  50% { box-shadow: 0 0 16px rgba(16,185,129,0.6), 0 2px 6px rgba(0,0,0,0.15); }
}

/* Estados visuales mejorados */
.numero_calendario.valido {
  border-color: #d1fae5 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}

.numero_calendario.valido .fecha-dia {
  color: #065f46 !important;
}

.numero_calendario.inactivo {
  border-color: #fee2e2 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}

.numero_calendario.inactivo .fecha-dia {
  color: #991b1b !important;
}

/* Hover elegante */
.numero_calendario.valido:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #10b981 !important;
  box-shadow: 0 12px 28px rgba(16,185,129,0.2), 0 4px 12px rgba(0,0,0,0.08) !important;
}

.numero_calendario.valido:hover .fecha-dia {
  color: #047857 !important;
  transform: scale(1.05);
}

/* Estado seleccionado con gradiente verde */
.numero_calendario.valido.selected {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  box-shadow: 0 8px 24px rgba(16,185,129,0.35), 0 0 0 4px rgba(16,185,129,0.1) !important;
  transform: scale(1.02) !important;
}

.numero_calendario.valido.selected .fecha-dia {
  color: #fff !important;
}

.numero_calendario.valido.selected .fecha-dia::after {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(255,255,255,0.5) !important;
}

/* ========== MÓVIL OPTIMIZADO ========== */
@media (max-width: 768px) {
  #calendario {
    padding: 12px !important;
    border-radius: 14px !important;
    margin: 8px 0 !important;
  }
  
  .tabla-horario {
    border-spacing: 5px !important;
  }
  
  .tabla-horario th {
    padding: 8px 2px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }
  
  .tabla-horario th:nth-child(1)::after{content:"L";}
  .tabla-horario th:nth-child(2)::after{content:"M";}
  .tabla-horario th:nth-child(3)::after{content:"M";}
  .tabla-horario th:nth-child(4)::after{content:"J";}
  .tabla-horario th:nth-child(5)::after{content:"V";}
  .tabla-horario th:nth-child(6)::after{content:"S";}
  .tabla-horario th:nth-child(7)::after{content:"D";}
  
  .numero_calendario {
    border-radius: 10px !important;
    min-height: 55px !important;
  }
  
  .numero_calendario .fecha-dia {
    padding: 10px 4px !important;
    font-size: 15px !important;
    min-height: 55px !important;
    gap: 2px !important;
  }
  
  .numero_calendario .fecha-dia::after {
    width: 6px !important;
    height: 6px !important;
    margin-top: 4px !important;
  }
  
  /* Feedback táctil */
  .numero_calendario.valido:active {
    transform: scale(0.95) !important;
  }
}

/* Móviles muy pequeños */
@media (max-width: 400px) {
  #calendario {
    padding: 12px 8px !important;
  }
  
  .tabla-horario {
    border-spacing: 4px !important;
  }
  
  .tabla-horario th {
    padding: 8px 2px !important;
  }
  
  .numero_calendario .fecha-dia {
    font-size: 16px !important;
    padding: 12px 4px !important;
    min-height: 60px !important;
  }
}
/* ========== BARRA FLOTANTE MEJORADA CON BOTÓN RETROCESO ========== */

.barra-acciones {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.btn-back-bar {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-back-bar:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 20px rgba(239,68,68,0.4);
  transform: translateY(-2px);
}

.btn-back-bar:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

.btn-back-bar i {
  font-size: 16px;
}

/* Responsive: ajustar botones en móvil */
@media (max-width: 600px) {
  .barra-acciones {
    flex-direction: row;
    gap: 6px;
  }
  
  .btn-back-bar {
    padding: 8px 10px;
    font-size: 11px;
  }
  
  .btn-continue-bar {
    padding: 10px 14px;
    font-size: 12px;
  }
}
/* Mobile tweak: subir WhatsApp un poco más en la página de producto */
@media (max-width: 600px) {
  .page-cumple-producto [id^="whatsapp-widget"],
  .page-cumple-producto [id*="whatsapp-widget"] {
    bottom: 120px !important; /* acercar a la barra inferior */
    right: 16px !important;    /* mantener margen lateral */
  }
}

/* ==============================
   Footer: posicionamiento natural
   Usamos layout flex en el body y margin-top:auto
   para que el footer ocupe el final de la ventana cuando
   el contenido es corto, sin forzar posición fija.
*/
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Asegura que el footer se empuje abajo en layouts flex */
body > footer {
  margin-top: auto;
}

/* ==============================
   Sección Formulario de Contacto
============================== */
.bd-form-section {
  background: #f6f6fa;
  position: relative;
  padding: 28px 0 40px;
}

.bd-form-section::before, .bd-form-section::after { display: none; }

.bd-form-wrap {
  margin-top: 22px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bd-form-wrap::before,
.bd-form-wrap::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

.bd-form-wrap::before {
  width: 320px;
  height: 320px;
  top: -160px;
  right: -80px;
  background: radial-gradient(circle, rgba(178,114,174,.13) 0%, rgba(178,114,174,0) 72%);
}

.bd-form-wrap::after {
  width: 240px;
  height: 240px;
  bottom: -120px;
  left: -70px;
  background: radial-gradient(circle, rgba(129,200,255,.12) 0%, rgba(129,200,255,0) 72%);
}

/* Layout dos columnas */
.bd-form-inner {
  display: grid;
  grid-template-columns: minmax(240px, .82fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Columna izquierda normal */
.bd-form-header {
  position: static;
  padding-top: 2px;
}

.bd-form-pill { display: none; }

.bd-form-title {
  font-size: 32px;
  font-weight: 900;
  color: #2b2b2b;
  margin-bottom: 14px;
  line-height: 1.15;
}

.bd-form-subtitle {
  font-size: 15px;
  color: #555;
  margin-bottom: 22px;
  line-height: 1.55;
}

/* Lista de puntos de valor */
.bd-form-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.bd-form-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #444;
  font-weight: 500;
}
.bd-form-features li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px; min-width: 24px;
  border-radius: 50%;
  background: rgba(178,114,174,.15);
  color: var(--bd-accent);
  font-size: 13px;
  font-weight: 900;
  border: 1.5px solid rgba(178,114,174,.30);
}

/* Nota informativa */
.bd-form-note {
  background: rgba(178,114,174,.08);
  border: 1px solid rgba(178,114,174,.20);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: #555;
  line-height: 1.55;
}
.bd-form-note strong {
  color: var(--bd-accent);
  display: block;
  margin-bottom: 4px;
  font-weight: 800;
}

/* Tarjeta del iframe */
.bd-form-card {
  background: linear-gradient(145deg, #744185 0%, #9d62a5 100%);
  border-radius: 24px;
  border: 1px solid rgba(178,114,174,.14);
  box-shadow: 0 18px 40px rgba(82, 69, 111, .18);
  overflow: hidden;
  position: relative;
  z-index: 1;
  max-width: 790px;
  width: 100%;
  justify-self: end;
  padding: 10px;
}

.bd-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}

/* Cabecera de la tarjeta */
.bd-form-card__header {
  background: linear-gradient(90deg, #7a3d8c 0%, #B272AE 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.bd-form-card__icon { font-size: 18px; line-height: 1; }
.bd-form-card__label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .95;
}

.bd-contact-form {
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,243,251,.98) 100%);
  border-radius: 0 0 16px 16px;
  padding: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}

.bd-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bd-contact-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bd-contact-field--full {
  grid-column: 1 / -1;
}

.bd-contact-field__label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #694173;
}

.bd-contact-field input,
.bd-contact-field select {
  width: 100%;
  border: 1px solid rgba(122,61,140,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: #1f2937;
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow: 0 8px 18px rgba(122,61,140,.06);
}

.bd-contact-field input::placeholder {
  color: #9aa3b2;
}

.bd-contact-field input:focus,
.bd-contact-field select:focus {
  border-color: rgba(178,114,174,.55);
  box-shadow: 0 0 0 4px rgba(178,114,174,.14), 0 10px 24px rgba(122,61,140,.10);
  transform: translateY(-1px);
}

.bd-contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.bd-contact-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
  max-width: 420px;
}

.bd-contact-submit {
  border: none;
  border-radius: 16px;
  padding: 14px 20px;
  min-width: 190px;
  background: linear-gradient(90deg, #7a3d8c 0%, #b272ae 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 14px 28px rgba(122,61,140,.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.bd-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(122,61,140,.28);
}

.bd-contact-submit:disabled {
  opacity: .75;
  cursor: wait;
  transform: none;
}

.bd-form-legal {
  text-align: center;
  font-size: 11px;
  color: #999;
  margin-top: 22px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 767px) {
  .bd-form-section { padding: 18px 0 28px; }
  .bd-form-wrap { margin-top: 10px; padding: 16px; }
  .bd-form-inner { grid-template-columns: 1fr; gap: 24px; }
  .bd-form-title { font-size: 24px; }
  .bd-form-header { position: static; text-align: center; }
  .bd-form-card { max-width: none; justify-self: stretch; }
  .bd-contact-form { padding: 18px; }
  .bd-contact-form__grid { grid-template-columns: 1fr; gap: 12px; }
  .bd-contact-form__footer { flex-direction: column; align-items: stretch; }
  .bd-contact-help { max-width: none; text-align: center; }
  .bd-contact-submit { width: 100%; }
  .bd-form-features { display: none; }
  .bd-form-note { display: none; }
}