:root {
  /* Paleta basada en tu logo */
  --bm-blue-50: #e9f7ff;
  --bm-blue-100: #cfefff;
  --bm-blue-200: #9edfff;
  --bm-blue-300: #5fc7ff;
  --bm-blue-500: #1ea7e1;
  --bm-blue-600: #168fc7;
  --bm-blue-700: #1175a6;
  --bm-blue-800: #0b5b85;

  --bm-green-100: #d6f6e5;
  --bm-green-300: #7be3b0;
  --bm-green-500: #33b46b;
  --bm-green-600: #27955a;
  --bm-green-700: #1f7b4a;

  --bm-yellow-200: #ffe07a;
  --bm-yellow-400: #f3c61a;

  --bm-ink: #0b1220;

  /* Control del "azulejo" */
  --tile: 88px;

  /* ✅ Control rápido de burbujas (sube/baja si quieres más/menos) */
  --bubbles-opacity: 1;   /* 0.6 a 1.1 */
  --bubbles-blur: 0.25px; /* 0px a 0.6px */
}
.hero-bg {
  background-image:
    linear-gradient(
  rgba(10, 60, 110, 0.65),
  rgba(255, 255, 255, 0.75)
),
    url("./imgs/hero-bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mapear tus clases Tailwind a colores BrilloMax (sin tocar tu HTML) */
.bg-sky-50 { background-color: var(--bm-blue-50) !important; }
.bg-sky-200 { background-color: var(--bm-blue-200) !important; }
.bg-sky-300 { background-color: var(--bm-blue-300) !important; }
.bg-sky-500 { background-color: var(--bm-blue-500) !important; }
.bg-sky-600 { background-color: var(--bm-blue-600) !important; }
.bg-sky-700 { background-color: var(--bm-blue-700) !important; }
.bg-sky-800 { background-color: var(--bm-blue-800) !important; }

.text-sky-700 { color: var(--bm-blue-700) !important; }
.text-sky-900 { color: var(--bm-ink) !important; }

.bg-emerald-50 { background-color: var(--bm-green-100) !important; }
.bg-emerald-200 { background-color: rgba(51,180,107,.18) !important; }
.bg-emerald-300 { background-color: var(--bm-green-300) !important; }
.bg-emerald-400 { background-color: rgba(51,180,107,.85) !important; }
.bg-emerald-500 { background-color: var(--bm-green-500) !important; }
.bg-emerald-600 { background-color: var(--bm-green-600) !important; }
.bg-emerald-700 { background-color: var(--bm-green-700) !important; }

.text-emerald-700 { color: var(--bm-green-700) !important; }

.bg-amber-50 { background-color: rgba(243,198,26,.16) !important; }
.bg-amber-200 { background-color: rgba(243,198,26,.45) !important; }
.bg-amber-300 { background-color: rgba(243,198,26,.85) !important; }
.text-amber-700 { color: #a16207 !important; }

.shadow-soft {
  box-shadow:
    0 10px 25px rgba(2, 6, 23, 0.08),
    0 2px 10px rgba(2, 6, 23, 0.06);
}

/* Botón marca */
.btn-brand {
  background: linear-gradient(90deg, var(--bm-blue-600), var(--bm-green-600));
  box-shadow: 0 16px 40px rgba(30,167,225,.18), 0 8px 20px rgba(51,180,107,.12);
}
.btn-brand:hover { filter: brightness(1.05) saturate(1.05); }

/* CTA brand */
.cta-brand {
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(243,198,26,.20), transparent 60%),
    linear-gradient(135deg, var(--bm-blue-600), var(--bm-green-600));
}

/* ✅ Fondo BrilloMax limpio (SIN burbujas) */
.bm-bg{
  background:
    /* sombras suaves / zonas de profundidad */
    radial-gradient(900px 420px at 18% 8%, rgba(30,167,225,.20), transparent 62%),
    radial-gradient(800px 380px at 88% 12%, rgba(51,180,107,.14), transparent 60%),
    radial-gradient(1100px 560px at 40% 105%, rgba(30,167,225,.16), transparent 64%),
    radial-gradient(700px 420px at 72% 86%, rgba(11,91,133,.08), transparent 60%),

    /* brillo suave superior */
    radial-gradient(1200px 500px at 50% 0%, rgba(255,255,255,.55), transparent 60%),

    /* azulejo (rejilla sutil) */
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),

    /* base clara */
    linear-gradient(180deg, rgba(235,247,255,.96), rgba(255,255,255,.98));

  background-size:
    auto, auto, auto, auto,
    auto,
    auto,
    84px 84px,
    84px 84px,
    auto;

  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat;
}



/* ✅ Burbujas “que se noten” (aro + brillo + reflejo)
   - sin tapar el contenido (pointer-events:none)
   - visibles sobre fondo azul (mix-blend-mode: screen + opacity más alto)
*/


/* brillo extra suave para “jabón” */
.bm-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(850px 450px at 20% 12%, rgba(30,167,225,.28), transparent 60%),
    radial-gradient(900px 520px at 90% 22%, rgba(51,180,107,.20), transparent 60%),
    radial-gradient(1200px 700px at 50% 100%, rgba(255,255,255,.22), transparent 62%);
  mix-blend-mode: soft-light;
  animation: glowShift 14s ease-in-out infinite alternate;
}

@keyframes bubblesDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(12px,-14px,0) scale(1.02); }
}
@keyframes glowShift {
  from { transform: translate3d(0,0,0); opacity: .20; }
  to   { transform: translate3d(-10px,8px,0); opacity: .26; }
}

/* ✅ Cortes por sección tipo wave */
.bm-section { position: relative; }
.bm-section::before,
.bm-section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:34px;
  pointer-events:none;
}
.bm-section::before{
  top:-1px;
  background:
    radial-gradient(120px 30px at 10% 100%, rgba(255,255,255,.95) 60%, transparent 62%),
    radial-gradient(160px 40px at 35% 100%, rgba(255,255,255,.90) 60%, transparent 62%),
    radial-gradient(140px 34px at 60% 100%, rgba(255,255,255,.92) 60%, transparent 62%),
    radial-gradient(190px 44px at 85% 100%, rgba(255,255,255,.90) 60%, transparent 62%);
  opacity:.9;
}
.bm-section::after{
  bottom:-1px;
  background:
    radial-gradient(140px 34px at 15% 0%, rgba(255,255,255,.92) 60%, transparent 62%),
    radial-gradient(170px 40px at 45% 0%, rgba(255,255,255,.88) 60%, transparent 62%),
    radial-gradient(150px 34px at 70% 0%, rgba(255,255,255,.90) 60%, transparent 62%),
    radial-gradient(200px 44px at 90% 0%, rgba(255,255,255,.88) 60%, transparent 62%);
  opacity:.85;
}

/* mejora sombra del floating button */
.fixed.bottom-5.right-5 { filter: drop-shadow(0 10px 20px rgba(2,6,23,.18)); }

/* Ocultar scrollbars del FAQ track */
#faqTrack::-webkit-scrollbar { display: none; }


.bm-hours-ticker {
  position: relative;
  overflow: hidden;
  height: 28px;
  width: 180px; /* ancho controlado */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}

.bm-hours-track {
  display: flex;
  gap: 22px;
  white-space: nowrap;
  animation: bmHoursLoop 6s linear infinite;
}

.bm-hours-item {
  font-size: 13px;
  font-weight: 800;
  color: rgba(11,18,32,.85);
}

.bm-dot {
  opacity: .5;
  font-weight: 900;
}

@keyframes bmHoursLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}