/* ============================================================
   BONO BUS · SECTIONS (page-level composition)
   Header · Hero oscuro + mini-ruta · Ahorro · Pasos · Confianza
   · Footer · Sticky buy bar.
   ============================================================ */

/* ---------- Header ---------- */
.bb-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bb-line);}
.bb-header__in{display:flex;align-items:center;justify-content:space-between;padding-block:12px;gap:16px;}
.bb-header__logo{height:28px;}
.bb-nav{display:none;gap:26px;font-weight:800;font-size:var(--fs-sm);}
.bb-nav a{text-decoration:none;color:var(--bb-muted);}
.bb-nav a:hover{color:var(--bb-blue-700);}
.bb-header__actions{display:flex;align-items:center;gap:12px;}
.bb-header__login{font-size:var(--fs-sm);font-weight:800;color:var(--bb-blue-700);text-decoration:none;}
@media (min-width:960px){.bb-nav{display:flex;}}

/* hamburguesa + menú móvil */
.bb-header__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:42px;
  border:1.5px solid var(--bb-line);background:#fff;border-radius:var(--r-md);padding:0 10px;flex:0 0 auto;}
.bb-header__burger span{height:2.5px;border-radius:2px;background:var(--bb-ink);transition:transform var(--dur) var(--ease),opacity var(--dur);}
.bb-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.bb-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.bb-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.bb-header__in{justify-content:flex-start;}
.bb-header__logo{margin-right:auto;}
.bb-mobnav{display:flex;flex-direction:column;border-top:1px solid var(--bb-line);background:#fff;padding:8px var(--gutter) 16px;}
.bb-mobnav[hidden]{display:none!important;}
.bb-mobnav a{padding:14px 4px;font-weight:800;color:var(--bb-ink);text-decoration:none;border-bottom:1px solid var(--bb-line);}
.bb-mobnav a:last-child{border-bottom:none;color:var(--bb-blue-700);}
@media (min-width:960px){
  .bb-header__burger{display:none;}
  .bb-mobnav{display:none !important;}
  .bb-header__logo{margin-right:0;}
  .bb-header__in{justify-content:space-between;}
}
@media (max-width:959px){
  .bb-header__login{display:none;} /* vive en el menú móvil */
}

/* ---------- Hero oscuro ---------- */
.bb-hero{background:radial-gradient(125% 90% at 78% -10%,var(--bb-navy-700) 0%,var(--bb-navy-800) 55%,var(--bb-navy-900) 100%);
  color:var(--bb-on-dark);position:relative;overflow:hidden;}
.bb-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;opacity:.6;pointer-events:none;}
.bb-hero__in{position:relative;z-index:2;padding-block:var(--sp-6) var(--sp-8);}
.bb-hero__grid{display:grid;gap:var(--sp-6);}
.bb-hero h1{color:#fff;font-size:var(--fs-display);font-weight:var(--bb-fw-black);line-height:var(--lh-tight);margin-top:14px;}
.bb-hero h1 em{font-style:normal;color:#6cb6ff;}
.bb-hero__lead{color:var(--bb-on-dark-2);font-size:var(--fs-body);margin:var(--sp-4) 0 0;max-width:40ch;}
.bb-hero__cta{display:flex;gap:12px;margin-top:var(--sp-6);}
.bb-hero__cta .bb-btn--primary{flex:1;}
.bb-hero__visual{position:relative;}
.bb-hero__badge{position:absolute;top:-30px;right:-8px;width:72px;height:72px;border-radius:50%;background:var(--bb-red);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);z-index:3;
  box-shadow:0 0 0 5px rgba(11,31,58,.55),var(--sh-red);}
.bb-hero__badge b{font-family:var(--bb-font-head);font-weight:var(--bb-fw-black);font-size:26px;line-height:.8;}
.bb-hero__badge span{font-size:8px;font-weight:800;letter-spacing:.12em;}
.bb-hero__trust{display:flex;align-items:center;gap:8px 14px;margin-top:var(--sp-6);color:var(--bb-on-dark-2);
  font-size:var(--fs-sm);font-weight:700;flex-wrap:wrap;line-height:1.3;}
.bb-hero__trust b{color:#fff;}
.bb-hero__trust-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.bb-hero__trust-item:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--bb-on-dark-3);margin-left:14px;}

/* mini-ruta funcional */
.bb-route{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);
  padding:22px 18px 18px;backdrop-filter:blur(4px);}
.bb-route__track{padding-right:64px;}
.bb-route__track{display:flex;align-items:center;}
.bb-route__stop{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;}
.bb-route__stop .pt{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--bb-blue-600);box-shadow:0 0 0 4px rgba(47,138,232,.25);}
.bb-route__stop .pt.end{border-color:var(--bb-red);box-shadow:0 0 0 4px rgba(214,42,52,.25);}
.bb-route__stop small{font-size:var(--fs-sm);font-weight:800;color:#fff;}
.bb-route__line{flex:1;height:3px;margin:0 4px 26px;position:relative;
  background:repeating-linear-gradient(90deg,rgba(108,182,255,.85) 0 9px,transparent 9px 17px);}
.bb-route__bus{position:absolute;top:-13px;left:0;font-size:19px;will-change:transform;}
@media (prefers-reduced-motion:no-preference){
  .bb-route__bus{animation:bb-drive 4.2s var(--ease) infinite;}
}
@keyframes bb-drive{0%{left:-2%}45%{left:88%}50%{left:88%}55%{left:88%;opacity:1}56%{opacity:0}57%{left:-2%;opacity:0}60%{opacity:1}100%{left:-2%}}
.bb-route__fares{display:flex;flex-direction:column;gap:2px;}
.bb-route__fare{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.bb-route__fare:last-child{border-bottom:none;}
.bb-route__fare small{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--bb-on-dark-3);}
.bb-route__fare b{font-family:var(--bb-font-head);font-weight:var(--bb-fw-black);font-size:18px;color:#fff;}
.bb-route__fare.was b{color:var(--bb-on-dark-2);text-decoration:line-through;font-weight:800;}
.bb-route__fare.save b{color:var(--bb-mint);}
.bb-route__hint{margin:10px 0 0;font-size:11px;color:var(--bb-on-dark-3);font-weight:700;text-align:center;}

/* ---------- Sección Ahorro (pedagógica) ---------- */
.bb-save{background:#fff;}
.bb-save__card{background:linear-gradient(180deg,#fbfcfe,#fff);border:1px solid var(--bb-line);
  border-radius:var(--r-2xl);padding:var(--sp-6);box-shadow:var(--sh-2);}
.bb-save__bars{display:flex;flex-direction:column;gap:var(--sp-5);margin:var(--sp-5) 0;}
.bb-bar__top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.bb-bar__top .lbl{font-weight:800;font-size:var(--fs-sm);color:var(--bb-ink);}
.bb-bar__top .lbl small{display:block;color:var(--bb-faint);font-weight:700;font-size:var(--fs-xs);text-transform:none;letter-spacing:0;}
.bb-bar__top .amt{font-family:var(--bb-font-head);font-weight:var(--bb-fw-black);font-size:var(--fs-h3);}
.bb-bar__track{height:38px;border-radius:var(--r-md);background:var(--bb-bg-2);overflow:hidden;}
.bb-bar__fill{height:100%;border-radius:var(--r-md);display:flex;align-items:center;padding-left:14px;color:#fff;
  font-weight:800;font-size:var(--fs-sm);transition:width 1s var(--ease);}
.bb-bar--full .bb-bar__fill{width:100%;background:#c4c9d2;color:#3a3f48;}
.bb-bar--promo .bb-bar__fill{width:65%;background:linear-gradient(90deg,var(--bb-blue-700),var(--bb-blue-600));}
@media (prefers-reduced-motion:no-preference){
  .bb-save__card:not(.seen) .bb-bar__fill{width:0;}
}
.bb-save__result{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--bb-ok-bg);
  color:#0f6b3f;border-radius:var(--r-lg);padding:18px;font-weight:800;font-size:var(--fs-body);}
.bb-save__result b{font-family:var(--bb-font-head);font-weight:var(--bb-fw-black);font-size:var(--fs-h2);}
.bb-save__note{text-align:center;color:var(--bb-faint);font-size:var(--fs-xs);margin-top:var(--sp-4);}

/* ---------- Cómo funciona ---------- */
.bb-steps{display:grid;gap:var(--sp-4);counter-reset:step;}
.bb-step{background:#fff;border:1px solid var(--bb-line);border-radius:var(--r-lg);padding:var(--sp-5);
  display:flex;gap:16px;align-items:flex-start;}
.bb-step__n{counter-increment:step;flex:0 0 auto;width:42px;height:42px;border-radius:var(--r-md);
  background:var(--bb-blue-100);color:var(--bb-blue-700);font-family:var(--bb-font-head);font-weight:900;
  font-size:20px;display:grid;place-items:center;}
.bb-step__n::before{content:counter(step);}
.bb-step h3{font-size:var(--fs-h3);font-weight:var(--bb-fw-strong);}
.bb-step p{color:var(--bb-muted);font-size:var(--fs-sm);margin:4px 0 0;}

/* ---------- Por qué / confianza ---------- */
.bb-why{background:var(--bb-blue-100);}
.bb-why__grid{display:grid;gap:var(--sp-4);}
.bb-why__item{background:#fff;border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);}
.bb-why__item .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--bb-blue-100);
  display:grid;place-items:center;font-size:22px;margin-bottom:12px;}
.bb-why__item h3{font-size:var(--fs-h3);font-weight:var(--bb-fw-strong);}
.bb-why__item p{color:var(--bb-muted);font-size:var(--fs-sm);margin:4px 0 0;}
.bb-punto{display:flex;align-items:center;gap:16px;background:var(--bb-navy-800);color:#fff;border-radius:var(--r-xl);
  padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-6);flex-wrap:wrap;}
.bb-punto__star{width:48px;height:48px;border-radius:50%;background:var(--bb-red);display:grid;place-items:center;
  font-size:24px;flex:0 0 auto;}
.bb-punto h3{color:#fff;font-size:var(--fs-h3);font-weight:800;}
.bb-punto p{color:var(--bb-on-dark-2);font-size:var(--fs-sm);margin:2px 0 0;}

/* ---------- Footer ---------- */
.bb-footer{background:var(--bb-navy-900);color:var(--bb-on-dark-2);padding-block:var(--sp-8) var(--sp-6);}
.bb-footer__grid{display:grid;gap:var(--sp-6);}
.bb-footer__logo{height:30px;filter:brightness(0) invert(1);margin-bottom:14px;}
.bb-footer h4{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-weight:800;}
.bb-footer a{color:var(--bb-on-dark-2);text-decoration:none;font-size:var(--fs-sm);display:block;margin-bottom:9px;}
.bb-footer a:hover{color:#fff;}
.bb-footer__pay{display:flex;gap:8px;flex-wrap:wrap;}
.bb-footer__pay span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:6px;
  padding:6px 10px;font-size:11px;font-weight:800;color:#fff;}
.bb-footer__social{display:flex;gap:10px;}
.bb-footer__social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;margin:0;font-weight:800;color:#fff;}
.bb-footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-7);padding-top:var(--sp-5);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--bb-on-dark-3);}

/* ---------- Sticky buy bar (móvil) ---------- */
.bb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--bb-line);
  box-shadow:0 -10px 24px -16px rgba(11,31,58,.4);padding:12px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transform:translateY(120%);transition:transform .35s var(--ease);padding-bottom:max(12px,env(safe-area-inset-bottom));}
.bb-sticky.is-visible{transform:translateY(0);}
.bb-sticky__info small{display:block;font-size:var(--fs-xs);color:var(--bb-faint);font-weight:700;}
.bb-sticky__info b{font-family:var(--bb-font-head);font-weight:900;font-size:var(--fs-h3);color:var(--bb-ink);}
.bb-sticky__info b .was{font-size:var(--fs-xs);color:var(--bb-faint);text-decoration:line-through;font-family:var(--bb-font-body);margin-left:6px;}
@media (min-width:960px){.bb-sticky{display:none !important;}}

/* grid base (must precede media queries) */
.bb-grid-pkgs{display:grid;gap:var(--sp-5);grid-template-columns:1fr;}
.bb-pkgs-wrap{padding-bottom:var(--sp-6);}

/* ---------- Desktop composition ---------- */
@media (min-width:960px){
  .bb-section{padding-block:var(--sp-10);}
  .bb-hero__in{padding-block:var(--sp-8) var(--sp-10);}
  .bb-hero__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--sp-9);}
  .bb-hero__badge{width:92px;height:92px;top:-34px;right:-12px;}
  .bb-hero__badge b{font-size:38px;}
  .bb-hero__cta{max-width:440px;}
  .bb-route{padding:26px;}
  .bb-route .bb-route__track{padding-right:88px;}
  .bb-route__fare b{font-size:24px;}
  .bb-grid-pkgs{grid-template-columns:repeat(3,1fr);}
  .bb-save__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-8);align-items:center;}
  .bb-steps{grid-template-columns:repeat(4,1fr);}
  .bb-why__grid{grid-template-columns:repeat(4,1fr);}
  .bb-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}
  .bb-sec-head h2{font-size:var(--fs-h2);}
}
@media (min-width:600px) and (max-width:959px){
  .bb-grid-pkgs{grid-template-columns:repeat(2,1fr);}
  .bb-why__grid{grid-template-columns:repeat(2,1fr);}
  .bb-steps{grid-template-columns:repeat(2,1fr);}
}