
:root{
  --bt-verde:#35c96d;
  --bt-verde-claro:#75e59b;
  --bt-fondo:#060706;
  --bt-panel:#0e110f;
  --bt-texto:rgba(255,255,255,.68);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pagina-box-training{margin:0;background:var(--bt-fondo);color:#fff;font-family:Arial,Helvetica,sans-serif}
body.pagina-box-training a{text-decoration:none;color:inherit}
.bt-contenedor{width:min(1180px,calc(100% - 40px));margin:auto}

.bt-header{position:fixed;inset:0 0 auto;z-index:1000;height:78px;background:rgba(5,7,5,.86);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.bt-header-inner{width:min(1240px,calc(100% - 34px));height:100%;margin:auto;display:flex;align-items:center;gap:26px}
.bt-logo img{width:84px;max-height:54px;object-fit:contain}
.bt-nav{display:flex;gap:22px;margin-left:auto}
.bt-nav a{font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bt-nav a:hover,.bt-nav a.activo{color:#fff}
.bt-header-cta,.bt-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-transform:uppercase;font-weight:900;letter-spacing:.7px}
.bt-header-cta{min-height:42px;padding:0 18px;background:var(--bt-verde);color:#06120a;font-size:10px}

.bt-hero{position:relative;min-height:100vh;padding:145px 0 82px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 76% 44%,rgba(53,201,109,.20),transparent 30%),linear-gradient(180deg,#050605,#0d160f 64%,#060706)}
.bt-hero::after{content:"BOX TRAINING";position:absolute;top:7.5%;left:2.8vw;color:rgba(255,255,255,.035);font-size:clamp(82px,11.5vw,182px);font-weight:900;line-height:.82;letter-spacing:-8px;white-space:nowrap;pointer-events:none}
.bt-trama{position:absolute;inset:0;opacity:.13;background:linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:74px 74px}
.bt-luz{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.bt-luz-1{width:340px;height:340px;left:-8%;top:20%;background:rgba(53,201,109,.10)}
.bt-luz-2{width:320px;height:320px;right:3%;bottom:5%;background:rgba(117,229,155,.08)}
.bt-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.bt-etiqueta{display:block;margin-bottom:18px;color:var(--bt-verde-claro);font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.bt-hero h1,.bt-seccion h2,.bt-resultados h2,.bt-reserva h2{margin:0;text-transform:uppercase;line-height:.88;letter-spacing:-4px}
.bt-hero h1{font-size:clamp(68px,8.2vw,132px)}
.bt-hero h1 strong{display:block;color:var(--bt-verde);white-space:nowrap}
.bt-lema{margin:28px 0 0;color:var(--bt-verde-claro);font-size:15px;font-weight:900;letter-spacing:2.1px;text-transform:uppercase}
.bt-hero-texto{max-width:670px;margin:24px 0 0;color:var(--bt-texto);font-size:17px;line-height:1.75}
.bt-hero-botones,.bt-reserva-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.bt-btn{min-height:54px;padding:0 25px;font-size:11px;transition:transform .25s,box-shadow .25s,border-color .25s}
.bt-btn:hover{transform:translateY(-3px)}
.bt-btn-principal{background:var(--bt-verde);color:#06120a!important;box-shadow:0 16px 40px rgba(53,201,109,.22)}
.bt-btn-secundario{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.025)}
.bt-hero-datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.bt-hero-datos span{padding:9px 13px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.025);font-size:10px;font-weight:800;text-transform:uppercase}

.bt-energia{position:relative;width:min(100%,520px);aspect-ratio:1;margin-left:auto;border:1px solid rgba(53,201,109,.34);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(53,201,109,.14),rgba(53,201,109,.035) 58%,transparent 70%);box-shadow:0 0 90px rgba(53,201,109,.14),inset 0 0 70px rgba(53,201,109,.05)}
.bt-energia-numero{color:var(--bt-verde);font-size:clamp(90px,10vw,150px);font-weight:900;line-height:.78;letter-spacing:-8px}
.bt-energia>strong{margin-top:24px;font-size:18px;letter-spacing:5px}
.bt-orbita{position:absolute;color:rgba(255,255,255,.72);font-size:10px;font-weight:900;letter-spacing:1.5px}
.bt-orbita-1{top:8%;left:42%}
.bt-orbita-2{right:2%;top:48%}
.bt-orbita-3{bottom:7%;left:35%}
.bt-orbita-4{left:0;top:48%}

.bt-seccion{padding:118px 0;scroll-margin-top:80px}
.bt-dos-columnas{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.bt-seccion h2,.bt-resultados h2,.bt-reserva h2{font-size:clamp(48px,5.8vw,88px)}
.bt-texto-editorial p{color:var(--bt-texto);font-size:17px;line-height:1.78}
.bt-texto-editorial p:first-child{margin-top:0;color:#fff;font-size:24px;line-height:1.48}
.bt-texto-editorial blockquote{margin:38px 0;padding:26px 0 26px 28px;border-left:3px solid var(--bt-verde);color:rgba(255,255,255,.8);font-size:22px;line-height:1.5}

.bt-beneficios{background:#0a0c0a}
.bt-cabecera{max-width:820px;margin-bottom:58px}
.bt-cabecera>p{color:var(--bt-texto);font-size:17px;line-height:1.7}
.bt-beneficios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bt-beneficios-grid article,.bt-perfiles-grid article{min-height:260px;padding:28px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:linear-gradient(145deg,rgba(53,201,109,.055),rgba(255,255,255,.012));transition:.28s}
.bt-beneficios-grid article:hover,.bt-perfiles-grid article:hover{transform:translateY(-6px);border-color:rgba(53,201,109,.35);box-shadow:0 22px 54px rgba(0,0,0,.34)}
.bt-beneficios-grid span,.bt-perfiles-grid span{color:rgba(53,201,109,.55);font-size:42px;font-weight:900}
.bt-beneficios-grid h3,.bt-perfiles-grid h3{margin:48px 0 13px;font-size:25px;text-transform:uppercase}
.bt-beneficios-grid p,.bt-perfiles-grid p{margin:0;color:var(--bt-texto);font-size:14px;line-height:1.7}

.bt-clase{background:#070807}
.bt-clase-linea{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.bt-clase-linea article{position:relative;min-height:250px;padding:24px 20px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.02);transition:.28s}
.bt-clase-linea article::after{content:"";position:absolute;top:50%;right:-13px;width:14px;height:1px;background:rgba(53,201,109,.32)}
.bt-clase-linea article:last-child::after{display:none}
.bt-clase-linea article:hover{transform:translateY(-5px);border-color:rgba(53,201,109,.34)}
.bt-clase-linea span{color:var(--bt-verde);font-size:30px;font-weight:900}
.bt-clase-linea h3{margin:56px 0 12px;font-size:20px;text-transform:uppercase}
.bt-clase-linea p{margin:0;color:var(--bt-texto);font-size:13px;line-height:1.65}

.bt-para-quien{background:#0d110e}
.bt-perfiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.bt-resultados{padding:110px 0;background:#070807}
.bt-resultados-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.bt-resultados-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bt-resultados-lista span{padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02);font-size:15px;font-weight:800;text-transform:uppercase}

.bt-reserva{padding:125px 0;text-align:center;background:radial-gradient(circle,rgba(53,201,109,.16),transparent 38%),#0d160f}
.bt-reserva h2{max-width:900px;margin:auto}
.bt-reserva>div>p{max-width:680px;margin:24px auto 0;color:var(--bt-texto);font-size:17px;line-height:1.7}
.bt-reserva-botones{justify-content:center}

.bt-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.bt-reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){
  .bt-nav{display:none}
  .bt-hero-grid,.bt-dos-columnas,.bt-resultados-grid{grid-template-columns:1fr}
  .bt-energia{margin:20px auto 0}
  .bt-beneficios-grid{grid-template-columns:repeat(2,1fr)}
  .bt-clase-linea{grid-template-columns:repeat(3,1fr)}
  .bt-clase-linea article::after{display:none}
}

@media(max-width:700px){
  .bt-contenedor{width:min(100% - 28px,1180px)}
  .bt-header{height:68px}
  .bt-header-cta{font-size:8px;padding:0 13px}
  .bt-hero{min-height:auto;padding:112px 0 70px}
  .bt-hero h1{font-size:clamp(52px,14vw,76px);letter-spacing:-4px}
  .bt-hero::after{top:8%;left:4vw;font-size:clamp(58px,17vw,92px);letter-spacing:-5px}
  .bt-energia{width:min(100%,360px)}
  .bt-energia-numero{font-size:90px}
  .bt-seccion,.bt-resultados,.bt-reserva{padding:84px 0}
  .bt-seccion h2,.bt-resultados h2,.bt-reserva h2{font-size:clamp(40px,12vw,60px);letter-spacing:-2px}
  .bt-beneficios-grid,.bt-perfiles-grid,.bt-clase-linea,.bt-resultados-lista{grid-template-columns:1fr}
  .bt-beneficios-grid article,.bt-perfiles-grid article,.bt-clase-linea article{min-height:auto}
}

@media(prefers-reduced-motion:reduce){
  .bt-reveal{opacity:1;transform:none}
}

.bt-avatar-panel{display:flex;justify-content:center;align-items:center}
.bt-avatar{max-width:480px;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(53,201,109,.25))}
.bt-energia-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(53,201,109,.25);border-radius:18px;padding:28px;margin-bottom:24px;background:rgba(53,201,109,.05)}
.bt-energia-mini span{font-size:64px;font-weight:900;color:var(--bt-verde)}
.bt-energia-mini strong{letter-spacing:3px}


/* =========================================================
   CORRECCIÓN — AVATAR BOX TRAINING REAL
========================================================= */

.bt-avatar-panel {
  min-height: 650px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.bt-avatar {
  width: auto !important;
  height: 610px !important;
  max-width: 100% !important;
  max-height: 610px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: translate(18px, -2px) !important;
  filter:
    drop-shadow(0 28px 36px rgba(0,0,0,.58))
    drop-shadow(0 0 28px rgba(53,201,109,.22)) !important;
}

@media (max-width: 1100px) {
  .bt-avatar-panel {
    min-height: 560px !important;
  }

  .bt-avatar {
    height: 540px !important;
    max-height: 540px !important;
    transform: translate(8px, 0) !important;
  }
}

@media (max-width: 820px) {
  .bt-avatar-panel {
    min-height: 470px !important;
  }

  .bt-avatar {
    width: min(100%, 480px) !important;
    height: auto !important;
    max-height: 500px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .bt-avatar-panel {
    min-height: 400px !important;
  }

  .bt-avatar {
    width: min(102%, 420px) !important;
    max-height: 430px !important;
  }
}


/* =========================================================
   AJUSTE FINAL — AVATAR BOX TRAINING IGUAL A KICKBOXING
========================================================= */

.bt-hero-grid {
  grid-template-columns: 1.03fr .97fr !important;
  gap: 48px !important;
}

.bt-avatar-panel {
  min-height: 650px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.bt-avatar {
  width: auto !important;
  height: 650px !important;
  max-width: 100% !important;
  max-height: 650px !important;
  object-fit: contain !important;
  transform: translate(20px, -2px) scale(1.08) !important;
  transform-origin: center center !important;
  filter:
    drop-shadow(0 28px 36px rgba(0,0,0,.58))
    drop-shadow(0 0 28px rgba(53,201,109,.22)) !important;
}

@media (max-width: 1100px) {
  .bt-avatar-panel {
    min-height: 580px !important;
  }

  .bt-avatar {
    height: 575px !important;
    max-height: 575px !important;
    transform: translate(10px, 0) scale(1.05) !important;
  }
}

@media (max-width: 820px) {
  .bt-avatar-panel {
    min-height: 470px !important;
  }

  .bt-avatar {
    width: min(100%, 500px) !important;
    height: auto !important;
    max-height: 520px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .bt-avatar-panel {
    min-height: 410px !important;
  }

  .bt-avatar {
    width: min(104%, 430px) !important;
    max-height: 445px !important;
  }
}


/* Ajuste final: avatar un poco más grande */
.bt-avatar{
    height:700px !important;
    max-height:700px !important;
    transform:translate(20px,-2px) scale(1.15) !important;
}
@media (max-width:1100px){
 .bt-avatar{
    height:620px !important;
    max-height:620px !important;
    transform:translate(10px,0) scale(1.10) !important;
 }
}
