:root {
  --bg0: #070A0E;
  --bg1: #0B1017;
  --card: #0E1622;
  --stroke: rgba(255, 255, 255, .10);
  --text: #EAF0F7;
  --muted: #A7B4C4;

  --neon: #18F08B;
  --neon2: #10C073;
  --neonGlow: 0 0 18px rgba(24, 240, 139, .25), 0 0 44px rgba(24, 240, 139, .12);

  --radius: 18px;
}

.navbar-logo {
  height: 50px;
  /* ajusta tamaño */
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(24, 240, 139, .18));
}

/* En móvil un poquito más chico */
@media (max-width: 576px) {
  .navbar-logo {
    height: 30px;
  }
}

.phone-frame {
  width: min(320px, 86%);
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .55),
    0 0 28px rgba(24, 240, 139, .10);
  position: relative;
  overflow: hidden;
}

.phone-frame:before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 20%, rgba(24, 240, 139, .18), transparent 52%);
  pointer-events: none;
}

.phone-frame img {
  border-radius: 22px;
  display: block;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Cards tipo gallery para coach */
.coach-card {
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.coach-card:hover {
  transform: translateY(-5px);
  border-color: rgba(24, 240, 139, .35);
  background: rgba(14, 22, 34, .72);
}

.coach-img {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.coach-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .5s ease;
  filter: saturate(1.05) contrast(1.05);
}

.coach-card:hover .coach-img img {
  transform: scale(1.06);
}

.coach-img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .55));
  pointer-events: none;
}

/* Phone mock */
.phone-frame {
  width: min(320px, 86%);
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55), 0 0 28px rgba(24, 240, 139, .10);
  position: relative;
  overflow: hidden;
}

.phone-frame:before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 20%, rgba(24, 240, 139, .18), transparent 52%);
  pointer-events: none;
}

.phone-frame img {
  border-radius: 22px;
  display: block;
}

/* Mini pills */
.mini-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.mini-pill i {
  color: var(--neon);
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Coach flow - imágenes más pro (más aire + más pequeñas) */
.coach-shot {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(14, 22, 34, .55);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .45);

  /* más aire */
  padding: 14px;
  margin: 10px auto;

  /* más pequeña */
  max-width: 520px;
}

.coach-shot.highlight {
  border-color: rgba(24, 240, 139, .35);
}

/* screenshots más “limpios”: no recortar, centrados */
.coach-shot img {
  width: 100%;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  background: #0b1017;
}

/* En desktop: un poquito más de margen lateral */
@media (min-width: 992px) {
  .coach-shot {
    margin: 14px auto;
  }
}

/* ===== SELECT DARK MODE (BrainFits) ===== */
.form-select {
  background-color: #0b1017 !important;
  /* negro */
  color: #ffffff !important;
  /* texto blanco */
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  font-weight: 700;

  /* flecha custom */
  background-image:
    linear-gradient(45deg, transparent 50%, #18F08B 50%),
    linear-gradient(135deg, #18F08B 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 13px) calc(50% - 4px),
    100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;

  padding-right: 3rem;
  /* espacio para flecha */
}

/* Hover */
.form-select:hover {
  border-color: rgba(24, 240, 139, .35);
}

/* Focus */
.form-select:focus {
  background-color: #0b1017;
  color: #ffffff;
  border-color: rgba(24, 240, 139, .45);
  box-shadow: 0 0 0 .25rem rgba(24, 240, 139, .15);
}

/* Opciones desplegadas */
.form-select option {
  background-color: #0b1017;
  color: #ffffff;
}

/* Disabled */
.form-select:disabled {
  background-color: #0b1017;
  color: rgba(255, 255, 255, .45);
}

/* Base general */
body {
  font-size: 15px;
  /* antes se siente 16+ por pesos y paddings */
  line-height: 1.55;
}

.navbar .btn {
  font-size: .76rem;
  padding: .55rem .85rem !important;
}

/* Hero */
.hero {
  padding-top: 105px;
  padding-bottom: 30px;
}

/* menos alto */
.hero-title {
  font-size: clamp(1.85rem, 3.7vw, 3.0rem);
  /* BAJA el titular */
  line-height: 1.04;
  letter-spacing: -1px;
}

.hero-sub {
  font-size: .96rem;
  line-height: 1.55;
  max-width: 66ch;
}

/* Pill / tags */
.pill {
  font-size: .85rem;
  padding: .45rem .72rem;
}

.mini-tag {
  font-size: .75rem;
  padding: .25rem .52rem;
}

.badge-mini {
  font-size: .73rem;
  padding: .22rem .50rem;
}

/* Botones grandes del hero / CTA */
.btn-neon,
.btn-ghost {
  font-size: .92rem;
  padding: .72rem 1.05rem !important;
  /* baja el “bloque” */
  border-radius: 13px;
}

/* Secciones */
section {
  padding: 48px 0;
}

/* menos aire = más elegante */

/* Cards: textos */
.micro {
  font-size: 1.02rem;
  /* título de card */
  font-weight: 850;
}

.hint {
  font-size: .88rem;
  /* subtítulo de card */
  line-height: 1.45;
}

/* Icon badge un poco más pequeño */
.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

/* Impact chips */
.impact-chip {
  padding: 10px 12px;
  border-radius: 15px;
}

.impact-val {
  font-size: 1.18rem;
  letter-spacing: -.6px;
}

.impact-lbl {
  font-size: .86rem;
}

/* Suite title (inline style clamp) - lo “parcheamos” sin tocar HTML */
#suite .fw-bold[style*="clamp"] {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem) !important;
  letter-spacing: -.6px !important;
}

/* CTA title (inline style clamp) */
section .fw-bold[style*="clamp(1.5rem"] {
  font-size: clamp(1.25rem, 2.3vw, 1.85rem) !important;
}

/* Footer (tu footer nuevo) */
.bf-footer {
  font-size: .92rem;
  line-height: 1.55;
}

.bf-footer .fs-5 {
  font-size: 1.05rem !important;
}

.bf-footer__title {
  font-size: .80rem;
  letter-spacing: .10em;
}

.bf-footer__link {
  font-size: .90rem;
}

.bf-footer__mini {
  font-size: .84rem;
}

.bf-footer__badges .bf-badge {
  font-size: .76rem;
  padding: .26rem .52rem;
}

/* Mobile: aún más compacto */
@media (max-width: 576px) {
  body {
    font-size: 14.5px;
  }

  .hero-title {
    font-size: clamp(1.65rem, 6.2vw, 2.25rem);
  }

  .btn-neon,
  .btn-ghost {
    padding: .65rem .95rem !important;
  }
}

/* ---------- Showcase (imagen vertical tipo phone mockup) ---------- */
.showcase {
  padding: 46px 0;
}

.phone-frame {
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(450px 220px at 20% 10%, rgba(24, 240, 139, .18), transparent 60%),
    radial-gradient(420px 220px at 90% 20%, rgba(24, 240, 139, .10), transparent 60%),
    linear-gradient(180deg, rgba(14, 22, 34, .40), rgba(14, 22, 34, .82));
  box-shadow: 0 28px 110px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.phone-frame:before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 180deg, transparent, rgba(24, 240, 139, .20), transparent, rgba(255, 255, 255, .08), transparent);
  animation: spin 10s linear infinite;
  opacity: .75;
  pointer-events: none;
}

.phone-inner {
  position: relative;
  z-index: 2;
  border-radius: 22px;
  margin: 12px;
  overflow: hidden;
  border: 1px solid rgba(24, 240, 139, .22);
  background: rgba(0, 0, 0, .25);
}

.phone-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 720 / 1400;
  /* respeta tu tamaño */
  object-fit: cover;
}

.phone-top {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .40);
  border: 1px solid rgba(255, 255, 255, .10);
  z-index: 3;
  backdrop-filter: blur(8px);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kpi {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(14, 22, 34, .46);
}

.kpi .v {
  font-weight: 950;
  letter-spacing: -.6px;
  font-size: 1.05rem;
  line-height: 1.1;
}

.kpi .l {
  color: var(--muted);
  font-weight: 800;
  font-size: .84rem;
}

@media (max-width: 576px) {
  .kpi-row {
    grid-template-columns: 1fr;
  }
}

.navbar .nav-link {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
  font-size: .82rem;
  color: rgba(234, 240, 247, .86) !important;
  padding: .85rem .85rem !important;
  border-radius: 14px;
  position: relative;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}

.navbar .nav-link:hover {
  transform: translateY(-1px);
  color: var(--text) !important;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(24, 240, 139, .18);
}

/* Activo: estilo “tab pro” */
.navbar .nav-link.active {
  color: var(--text) !important;
  background: rgba(24, 240, 139, .08);
  border-color: rgba(24, 240, 139, .30);
  box-shadow: 0 10px 26px rgba(24, 240, 139, .10);
}

/* Subrayado neon al hover/active (look deportivo) */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(24, 240, 139, .75), transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  opacity: 1;
  transform: translateY(0);
}

/* Separación + alineación en desktop */
@media (min-width: 992px) {
  .navbar-nav {
    gap: .35rem;
  }
}

/* Toggler pro */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 14px !important;
  padding: .55rem .65rem !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(24, 240, 139, .18) !important;
}

/* ===== FOOTER PRO ===== */
.bf-footer-pro {
  border-top: 1px solid var(--stroke);
  background:
    radial-gradient(900px 400px at 20% -10%, rgba(24, 240, 139, .08), transparent 60%),
    linear-gradient(180deg, rgba(7, 10, 14, .85), rgba(7, 10, 14, .95));
  padding: 56px 0 24px;
}

.bf-footer-copy {
  color: rgba(234, 240, 247, .85);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 52ch;
}

.bf-footer-title {
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.bf-footer-link {
  display: block;
  text-decoration: none;
  color: rgba(234, 240, 247, .85);
  font-size: .92rem;
  padding: 6px 0;
}

.bf-footer-link:hover {
  color: var(--neon);
}

.bf-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bf-badge {
  font-size: .74rem;
  font-weight: 900;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.bf-badge i {
  color: var(--neon);
  margin-right: 4px;
}

.bf-footer-card {
  background: rgba(14, 22, 34, .45);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 14px;
}

.bf-footer-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: .92rem;
  text-decoration: none;
}

.bf-footer-contact i {
  color: var(--neon);
}

.bf-footer-sep {
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 10px 0;
}

.bf-footer-bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Brand mark reuse */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(24, 240, 139, .9), rgba(24, 240, 139, .25) 55%, rgba(255, 255, 255, .04) 70%);
  box-shadow: var(--neonGlow);
}

.logo-foot {
  width: 300px !important;
  margin-top: -30px;
}

/* ===== Switch planes: Persona natural vs Coach/Gym ===== */
.plan-switch {
  border-radius: 999px;
}

.plan-tab {
  border-radius: 999px !important;
}

.plan-tab.active {
  background: rgba(24, 240, 139, .10) !important;
  border-color: rgba(24, 240, 139, .35) !important;
  box-shadow: 0 14px 34px rgba(24, 240, 139, .10);
  color: var(--text) !important;
}

.plans-group {
  display: none;
}

.plans-group.show {
  display: block;
}