/* ===============================
   SECCIÓN HERO NUEVA (SUBPÁGINA)
   =============================== */
.hero-text {
  color: var(--color-gray);
  max-width: 640px;
}

/* ===============================
   📡 Canales - Broadcaster Bot
   =============================== */
.bb-canales{
  background:#fff;
  overflow: hidden;
}

/* Card base */
.bb-canal-card{
  background:#fff;
  border:1px solid #edf1f7;
  border-radius:16px;
  padding:28px 22px;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}

.bb-canal-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(0,0,0,.08);
}

/* Icono cuadrado (suave) */
.bb-canal-ico{
  width:56px;
  height:56px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px auto;
  color:#0b5cff;
  background:rgba(0,163,255,.10);
  box-shadow:0 14px 28px rgba(0,163,255,.12);
}

.bb-canal-ico i{
  font-size:22px;
}

/* Variantes por canal (solo cambia el tinte) */
.bb-ico--sms{
      background: radial-gradient(circle at 20% 20%, rgba(125, 0, 255, 0.25), transparent 55%), radial-gradient(circle at 80% 80%, rgba(90, 0, 200, 0.25), transparent 55%);
    color: #7d00ff;
}
.bb-ico--email{
  background: radial-gradient(circle at 20% 20%, rgba(37, 211, 102, 0.25), transparent 55%), radial-gradient(circle at 80% 80%, rgba(16, 183, 89, 0.25), transparent 55%);
    color: #19a54a;
}
.bb-ico--rcs{
  background: radial-gradient(circle at 20% 20%, rgba(0, 163, 255, 0.25), transparent 55%), radial-gradient(circle at 80% 80%, rgba(0, 120, 215, 0.25), transparent 55%);
    color: #007ad6;
}
.bb-ico--voz{
      background: radial-gradient(circle at 20% 20%, rgba(255, 153, 0, 0.25), transparent 55%), radial-gradient(circle at 80% 80%, rgba(230, 120, 0, 0.25), transparent 55%);
    color: #ff9900;
}

/* Mock derecha */
.bb-canal-mock{
  width:100%;
  border-radius:22px;
  overflow:hidden;
      border: 1px solid rgb(230, 230, 240);
}

.bb-canal-mock img{
  width:100%;
  height:auto;
  display:block;
  
}

/* Responsive */
@media (max-width: 991px){
  .bb-canal-mock{
    border-radius:18px;
  }
}


/* ===============================
   ⚡ 3 Pasos
   =============================== */

   .bb-pasos{
  background:#fff;
}

.bb-steps-wrap{
  max-width: 980px;
  margin: 0 auto;
}

/* Línea conectora (solo desktop) */
@media (min-width: 992px){
  .bb-steps-wrap::before{
    content:"";
    position:absolute;
    left: 16%;
    right: 16%;
    top: 92px;              /* altura donde cae entre el 01 y el ícono */
    height: 2px;
    background: rgba(0, 200, 83, .55);
    z-index: 0;
  }
}

/* Card */
.bb-step-card{
  position: relative;
  z-index: 1;
  background:#fff;
  border:1px solid #edf1f7;
  border-radius:16px;
  padding: 28px 22px 30px;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
}

/* Número grande */
.bb-step-num{
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1px;
  color: rgba(0, 200, 83, .18); /* verde muy suave */
  margin-bottom: 12px;
}

/* Icono verde */
.bb-step-ico{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 16px;
  color: rgba(0, 200, 83, 1);
   background: radial-gradient(circle at 20% 20%, rgba(37, 211, 102, 0.25), transparent 55%), radial-gradient(circle at 80% 80%, rgba(16, 183, 89, 0.25), transparent 55%);
    color: #19a54a;
  box-shadow: 0 16px 34px rgba(0, 200, 83, .10);
}

.bb-step-ico i{
  font-size: 22px;
}


/* ===============================
  🧩 Funcionalidades
   =============================== */

.bb-funcionalidades{
  background:#fff;
}

.bb-func-grid{
  max-width: 1200px;
  margin: 0 auto;
}

.bb-func-card{
  background:#fff;
  border:1px solid #edf1f7;
  border-radius:16px;
  padding:26px 22px;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}

.bb-func-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(0,0,0,.08);
}

/* Icono azul degradado (igual al look del resto) */
.bb-func-ico{
  width:56px;
  height:56px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;

      background: linear-gradient(135deg, rgb(0, 98, 255), rgb(0, 163, 255));
  color:#fff;
  box-shadow:0 10px 22px rgba(0,163,255,.25);
}

.bb-func-ico i{
  font-size:22px;
}


/* ===============================
  📩 Qué puedes enviar
   =============================== */

/* 📩 Qué puedes enviar */
.bb-que-enviar{ background:#fff; overflow: hidden;}

.bb-que-enviar .row{
    max-width: 800px;
    margin: 0 auto;
}

/* Tabs pills */
.bb-tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid #e9eef6;
  background:#fff;
  color:var(--color-black);
  font-weight:600;
  font-size:14px; /* si tienes fs-14, puedes quitarlos */
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.bb-tab i{ font-size:16px; }

.bb-tab:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}

.bb-tab.active{
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-light));
  color:#fff;
  border-color: transparent;
  box-shadow:0 18px 34px rgba(0,163,255,.20);
}

/* Panel animation */
.bb-panel{
  will-change: transform, opacity;
}
.bb-anim-out{
  opacity:0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.bb-anim-in{
  opacity:1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}

/* Icono grande izquierdo */
.bb-hero-ico{
  width:52px;
  height:52px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(34,197,94,.14); /* se sobreescribe via JS */
  color:#16a34a;                  /* se sobreescribe via JS */
}
.bb-hero-ico i{ font-size:20px; }

/* Phone stage */
.bb-phone-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bb-phone-glow{
  position:absolute;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: rgba(0,163,255,.22);
  filter: blur(26px);
  right: 10px;
  top: 80px;
  z-index:0;
}

.bb-phone{
  position:relative;
  z-index:1;
  width: 340px;
  height: 400px;
  border-radius: 36px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: #eef4ff;
  border: 3px solid #0f172a;
  border-bottom: 0px;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

/* Top status */
.bb-phone-top{
  height: 34px;
  padding: 8px 16px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  color:#0f172a;
  font-weight:700;
  font-size:12px;
}
.bb-notch{
  width: 92px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.10);
  margin-top: 2px;
}
.bb-signal{
  width: 20px;
  height: 10px;
  border-radius: 3px;
  background: rgba(15,23,42,.18);
  margin-top: 2px;
}

/* Header app */
.bb-phone-header{
  height: 74px;
  background: #0b6cf2; /* azul */
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 18px;
  color:#fff;
}
.bb-app-ico{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.bb-app-ico i{ font-size:18px; }

.bb-app-name{ font-weight:800; font-size:13px; line-height:1.1; }
.bb-app-sub{ font-weight:500; font-size:11px; opacity:.9; }

/* Body */
.bb-phone-body{
  padding: 22px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

/* Bubble */
.bb-bubble{
  max-width: 240px;
  padding: 14px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.35;
  background: #1f2a33;
  color:#fff;
  box-shadow: 0 18px 30px rgba(0,0,0,.18);
  will-change: transform, opacity;
}
.bb-bubble--in{ border-top-left-radius: 10px; }

/* Bubble animation */
.bb-bubble-out{
  opacity:0;
  transform: translateY(10px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}
.bb-bubble-in{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .28s ease, transform .28s ease;
}

/* Phone shadow base (como en las imágenes) */
.bb-phone-shadow{
  position:absolute;
  bottom: 10px;
  width: 420px;
  height: 60px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  filter: blur(18px);
  z-index:0;
}

.bb-feature-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
.bb-feature-list li{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--color-gray);
    font-size: 14px;
}
.bb-feature-list li i{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: #25D366 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    margin-top: 2px;
    font-size: 18px !important;
}

@media (max-width: 992px){
  .bb-tabs{
    min-width: 250px;
    overflow: scroll;
    padding: 16px 0px 32px 0px;
    margin-bottom: 8px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: start !important;
  }
    .bb-tab {

        min-width: 200px;
        text-align: center;
        justify-content: center;
    }
    .bb-tab.active{
        text-align: center;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .bb-tab,
  .bb-anim-out, .bb-anim-in,
  .bb-bubble-out, .bb-bubble-in{
    transition:none !important;
  }
}

/* ===============================
  ✅ Beneficios Broadcaster Mobile
   =============================== */

   /* ✅ Beneficios Broadcaster Mobile */
.bb-beneficios{
  background:#fff;
}

.bb-beneficios-grid{
  max-width: 1120px;
  margin-left:auto;
  margin-right:auto;
}

.bb-beneficio-card{
  background:#ffffff;
  border:1px solid #edf1f7;
  border-radius:16px;
  padding:26px 24px;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.bb-beneficio-card:hover{
  transform: translateY(-6px);
  box-shadow:0 16px 38px rgba(0,0,0,.08);
}

.bb-beneficio-ico{
  width:56px;
  height:56px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;

  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-light));
  color:#fff;
  box-shadow:0 10px 22px rgba(0,163,255,.25);
}

.bb-beneficio-ico i{
  font-size:22px;
}


/* ===============================
  ❓ FAQs 
   =============================== */

   /* ❓ FAQs */
.bb-faqs{
  background: #fff; /* azul muy suave como la captura */
}

.bb-faq-card{
  max-width: 1180px;
  background: #fff;
  border: 1px solid #dbe7ff;
  border-radius: 10px;
  overflow: hidden;
}

/* Quitamos estilo default bootstrap */
.bb-accordion .accordion-item{
  border: 0;
}

.bb-acc-item + .bb-acc-item{
  border-top: 1px solid #e8eef8;
}

/* Header */
.bb-acc-btn{
  background: #B8E0FF;
  color: var(--color-black);
  font-weight: 700;
  font-size: 18px;
  padding: 18px 22px;
  box-shadow: none !important;
}

.bb-acc-btn.collapsed{
  background: #ffffff;
  font-weight: 600;
}

/* Chevron (Bootstrap usa ::after) */
.bb-accordion .accordion-button::after{
  transform: rotate(-90deg);
  transition: transform .25s ease;
}

.bb-accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(0deg);
}

/* Body */
.bb-acc-body{
  padding: 18px 22px 22px;
  color: var(--color-gray);
}

.bb-link{
  color: var(--color-blue);
  text-decoration: none;
  font-weight: 700;
}
.bb-link:hover{ text-decoration: underline; }

.bb-acc-highlight{
  color: var(--color-blue);
  font-weight: 800;
}
.accordion-button:not(.collapsed) {
        color: var(--color-blue);
    background-color: #B8E0FF;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}