/* Nicolás Bossio — IFBB PRO (Maqueta v3) */
:root{
  --bg:#0a0a0a;
  --fg:#f2f2f2;
  --muted:#b5b5b5;
  --card:#121212;
  --stroke:#242424;
  --accent:#ff7a00;
  --accent-soft:#ff9a3c;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1140px,92%);margin:0 auto;padding:82px 0 56px}

.topbar{
  position:fixed;inset:0 0 auto 0;height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:rgba(10,10,10,.75);
  border-bottom:1px solid rgba(36,36,36,.85);
  backdrop-filter: blur(10px);
  z-index:10;
}

.brand{display:flex;align-items:center;gap:10px}
.brand img{
  width:51px;height:51px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.brand span{font-weight:700;letter-spacing:.02em}

.nav{display:flex;gap:14px}
.nav a{opacity:.85}
.nav a:hover{opacity:1}
@media (max-width: 900px){ .nav{display:none} }

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:14px;
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:#000;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(255,122,0,.18);
}
.btn:hover{filter:brightness(1.05)}
.btn.small{padding:9px 12px;border-radius:12px}
.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(255,122,0,.85);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(255,122,0,.08)}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding:26px;
  border-radius:26px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(255,122,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  box-shadow: var(--shadow);
}

.hero-copy{padding:14px}
.kicker{color:var(--accent);font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-size:12px}
.hero h2{font-size:38px;line-height:1.08;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 18px;font-size:16px;max-width:56ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
}

.hero-media{
  background:#000;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  min-height:300px;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 18%;
  transform:scale(1.02);
}
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.62));
}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero h2{font-size:32px}
  .hero-media{
  background:#000;min-height:360px}
}

.section{padding:30px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.section h3{margin:0;font-size:22px}
.muted{color:var(--muted)}
.tiny{font-size:12px}

.profile{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:14px;
  align-items:stretch;
}
.profile-media{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.profile-media img{width:100%;height:100%;object-fit:cover}
.profile-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  border-radius:20px;
  padding:18px;
  box-shadow: var(--shadow);
}
.profile-card h4{margin:0 0 8px;font-size:20px}

.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.mini-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.mini{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px;
}
.mini-title{color:var(--muted);font-size:12px}
.mini-value{font-size:16px;font-weight:900;margin-top:4px}

@media (max-width: 900px){
  .profile{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  border-radius:20px;
  padding:18px;
  box-shadow: var(--shadow);
}
.card.wide{padding:20px}
.card-icon{font-size:26px;margin-bottom:10px}
.card h4{margin:0 0 8px}
.ticks{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.ticks li{margin:6px 0}

.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} }

.form{display:grid;gap:12px;margin-top:12px}
label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
input{
  padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:#0f0f0f;color:var(--fg);outline:none;
}
input:focus{border-color:rgba(255,122,0,.85)}

.demo-box{
  border:1px dashed rgba(255,122,0,.55);
  background:rgba(255,122,0,.06);
  border-radius:18px;
  padding:16px;
}
.demo-box h5{margin:0 0 10px}
.demo-box ol{margin:0;padding-left:18px}

.sep{border:none;border-top:1px solid rgba(255,255,255,.10);margin:18px 0}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hidden{display:none}

.contact{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (max-width: 900px){ .contact{flex-direction:column;align-items:flex-start} }

.footer{border-top:1px solid rgba(36,36,36,.85);padding:18px 0;color:var(--muted);text-align:center}

/* INTRO CINEMATOGRÁFICA */
.intro{
  position:fixed;inset:0;
  z-index:9999;
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(255,122,0,.18), transparent 62%),
    linear-gradient(180deg, #040404, #0a0a0a);
  overflow:hidden;
}

.intro-canvas{position:absolute;inset:0;display:block;opacity:.9}

.intro-vignette{
  position:absolute;inset:-2px;
  background:radial-gradient(circle at 50% 40%, transparent 40%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.92) 100%);
  pointer-events:none;
}

.intro-grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.10;
  animation: grainMove 2.2s steps(2) infinite;
  pointer-events:none;
}
@keyframes grainMove{
  0%{transform:translate(0,0)}
  25%{transform:translate(-6px,4px)}
  50%{transform:translate(4px,-6px)}
  75%{transform:translate(-4px,-3px)}
  100%{transform:translate(0,0)}
}

.intro-center{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  padding:28px;
  text-align:center;
}

.intro-logo-wrap{
  width:min(440px, 78vw);
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.6);
  transform: translateY(10px) scale(1.5);
  filter: blur(6px);
  opacity:0;
  will-change: transform, filter, opacity;
  /* Apple-like: entrada + micro-flotación */
  animation: logoIn 1.05s ease forwards, logoFloat 6.5s ease-in-out infinite;
  animation-delay: .15s, 1.25s;
}
.intro-logo{width:100%;height:auto;display:block}

@keyframes logoIn{
  to{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.intro-copy{
  margin-top:16px;
  opacity:0;
  transform: translateY(12px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
  animation: copyIn 1.0s ease forwards;
  animation-delay: .55s;
}
@keyframes copyIn{
  to{opacity:1; transform: translateY(0); filter: blur(0)}
}

.intro-kicker{
  margin:14px 0 10px;
  color:var(--accent);
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
}
.intro-line{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:.01em;
  text-shadow: 0 0 30px rgba(255,122,0,.12);
}
.intro-sub{
  margin:0 0 18px;
  color:var(--muted);
  font-size:12px;
}

/* “Invade” = un leve pulso */
.intro-line{
  animation: pulseText 3.8s ease-in-out infinite;
}
@keyframes pulseText{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.006)}
}

.intro-skip{
  position:absolute;
  top:18px; right:18px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:var(--fg);
  cursor:pointer;
}
.intro-skip:hover{background:rgba(255,255,255,.06)}

.intro-bottom{
  position:absolute;
  left:0;right:0;bottom:18px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.intro-tag{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
  color:rgba(242,242,242,.9);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  font-size:12px;
}

/* salida automática (fade) */
.intro.out{
  animation: introOut .65s ease forwards;
}
@keyframes introOut{
  to{opacity:0; visibility:hidden}
}

/* Intro mobile tuning */
@media (max-width: 520px){
  .intro-logo-wrap{ transform: translateY(10px) scale(1.15); border-radius:22px; }
  .intro-line{ font-size:22px; }
  .intro-sub{ font-size:12px; }
  .intro-center{ padding:22px; }
  /* en mobile evitamos el “pulso” constante si se siente raro */
  .intro-line{ animation-duration: 5.2s; }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .intro-line, .intro-grain, .intro-logo-wrap, .intro-copy{animation:none !important}
}


/* TRANSICIÓN POST-INTRO: imagen + zoom cinematográfico */
.transition{
  position:fixed; inset:0;
  z-index:9998;
  overflow:hidden;
  background:#000;
  opacity:0;
  pointer-events:none;
}
.transition-bg{
  position:absolute; inset:-10%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)),
    url("img/nico-hero.jpg") center/cover no-repeat;
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.05);
}
.transition-vignette{
  position:absolute; inset:-2px;
  background:radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,0,0,.70) 75%, rgba(0,0,0,.92) 100%);
}
.transition.play{
  animation: transInOut 4s ease forwards;
  pointer-events:auto;
}
.transition.play .transition-bg{
  animation: kenBurns 4s ease forwards;
}
@keyframes transInOut{
  0%{opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{opacity:0}
}
@keyframes kenBurns{
  0%{transform:scale(1.08) translateY(6px)}
  100%{transform:scale(1.18) translateY(-10px)}
}

/* FRASE SOBRE TRANSICIÓN (torso / hero) */
.transition-quote{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(920px, 88vw);
  text-align:center;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.25;
  font-size:clamp(18px, 2.2vw, 28px);
  color:rgba(255,255,255,.92);
  text-shadow: 0 12px 40px rgba(0,0,0,.65);
  opacity:0;
  padding:0 10px;
}
.transition.play .transition-quote{
  animation: quoteInOut 4s ease forwards;
}
@keyframes quoteInOut{
  0%{opacity:0; transform:translate(-50%, -50%) translateY(10px)}
  22%{opacity:1; transform:translate(-50%, -50%) translateY(0)}
  78%{opacity:1; transform:translate(-50%, -50%) translateY(0)}
  100%{opacity:0; transform:translate(-50%, -50%) translateY(-8px)}
}




/* MENÚ PRINCIPAL */
.menu{
  margin-top:18px;
  padding:26px;
  border-radius:26px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255,122,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  box-shadow: var(--shadow);
}

.menu-inner{
  display:grid;
  gap:12px;
  text-align:center;
}

.menu-kicker{
  margin:0;
  color:var(--accent);
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
}
.menu-title{
  margin:0 0 8px;
  font-size:24px;
}

.menu-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}

@media (max-width: 900px){
  .menu-grid{grid-template-columns:1fr}
}

.menu-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(400px 120px at 20% 0%, rgba(255,122,0,.10), transparent 65%),
    rgba(255,255,255,.03);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.menu-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,122,0,.55);
  background:
    radial-gradient(500px 160px at 20% 0%, rgba(255,122,0,.16), transparent 65%),
    rgba(255,255,255,.035);
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
}
.menu-ic{
  width:48px;height:48px;
  border-radius:16px;
  display:grid;place-items:center;
  color: var(--accent);
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,.10);
  flex:0 0 auto;
}
.menu-ic svg{width:26px;height:26px}
.menu-txt{display:grid;gap:2px;text-align:left}
.menu-h{font-weight:950;letter-spacing:.01em}
.menu-s{color:var(--muted);font-size:13px}

.menu-contact{
  width:fit-content;
  margin:8px auto 0;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--fg);
}
.menu-contact:hover{
  border-color: rgba(255,122,0,.55);
  background: rgba(255,122,0,.08);
}
.menu-contact-ic{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:10px;
  background: rgba(255,122,0,.12);
  color: var(--accent);
  font-weight:900;
}

/* TEAM */
.team-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){
  .team-grid{grid-template-columns:1fr}
}
.team-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  border-radius:20px;
  padding:14px;
  box-shadow: var(--shadow);
}
.team-ph{
  height:160px;
  border-radius:16px;
  border:1px dashed rgba(255,122,0,.55);
  background:
    radial-gradient(500px 180px at 30% 0%, rgba(255,122,0,.14), transparent 65%),
    rgba(255,255,255,.02);
  margin-bottom:12px;
}



/* HERO + MENU (debajo del hero, sin seguir bajando) */
.hero-stack{display:grid; gap:14px}
.hero-menu{
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255,122,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  box-shadow: var(--shadow);
}
.hero-menu .menu-grid{margin-top:6px}
.hero-menu .menu-title{margin-bottom:2px}
.hero-menu .menu-kicker{margin-bottom:0}

/* PÁGINAS INTERNAS */
.page-head{
  margin-top:6px;
  padding:18px;
  border-radius:22px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(36,36,36,.85);
}
.page-head h1{margin:0 0 6px; font-size:30px}
.page-head p{margin:0; color:var(--muted)}
.backlink{display:inline-flex; gap:8px; align-items:center; opacity:.9}
.backlink:hover{opacity:1}


/* MENÚ: más grande + más color (sin romper paleta del logo) */
.menu-grid{gap:14px}
.menu-card{
  padding:18px 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  overflow:hidden;
}
.menu-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 160px at 20% 0%, rgba(255,122,0,.22), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.menu-card::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background: linear-gradient(180deg, rgba(255,122,0,1), rgba(255,122,0,.35));
  opacity:.95;
  pointer-events:none;
}
.menu-card:nth-child(2)::after{ background: linear-gradient(180deg, rgba(255,60,60,1), rgba(255,60,60,.35)); }
.menu-card:nth-child(3)::after{ background: linear-gradient(180deg, rgba(255,176,0,1), rgba(255,176,0,.35)); }
.menu-card:nth-child(4)::after{ background: linear-gradient(180deg, rgba(120,210,255,1), rgba(120,210,255,.35)); }

.menu-ic{
  width:54px;height:54px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,122,0,.20), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.10);
}
.menu-card:nth-child(2) .menu-ic{ background: linear-gradient(180deg, rgba(255,60,60,.20), rgba(0,0,0,.25)); color: rgb(255,90,90); }
.menu-card:nth-child(3) .menu-ic{ background: linear-gradient(180deg, rgba(255,176,0,.22), rgba(0,0,0,.25)); color: rgb(255,190,40); }
.menu-card:nth-child(4) .menu-ic{ background: linear-gradient(180deg, rgba(120,210,255,.22), rgba(0,0,0,.25)); color: rgb(150,225,255); }

.menu-h{font-size:16px}
.menu-s{font-size:13px}

@media (max-width: 900px){
  .menu-card{padding:16px 16px}
  .menu-ic{width:52px;height:52px}
}

/* Selector de idioma */
.lang{display:flex; gap:8px; align-items:center; margin-right:10px}
.lang-link{
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.lang-link:hover{opacity:1; border-color: rgba(255,122,0,.45)}
.lang-link.on{opacity:1; border-color: rgba(255,122,0,.75); background: rgba(255,122,0,.08)}
.lang-sep{opacity:.35}
@media (max-width: 900px){ .lang{display:none} }

/* Menú embebido dentro del HERO */
.hero-buttons{
  margin-top:16px;
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255,122,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(36,36,36,.95);
  box-shadow: var(--shadow);
}
.hero-buttons .menu-grid{margin-top:10px}
.hero-buttons .menu-title{margin:0 0 6px; font-size:22px}
.hero-buttons .menu-kicker{margin:0; font-size:11px}


/* ====== MENÚ PREMIUM: hover marcado + targets grandes + mobile tocable ====== */

/* tarjetas más altas, más "tocables" */
.menu-card{
  min-height: 92px;
  gap: 14px;
}

/* micro-animación + brillo */
.menu-card{
  will-change: transform, box-shadow, border-color, filter;
}
.menu-card:hover{
  transform: translateY(-4px) scale(1.01);
  filter: saturate(1.04);
}
.menu-card:active{
  transform: translateY(-1px) scale(0.995);
}

/* halo exterior al hover */
.menu-card:hover::before{
  opacity: 1;
}
.menu-card:hover{
  box-shadow: 0 26px 70px rgba(0,0,0,.70);
}

/* icono con leve rotación */
.menu-card:hover .menu-ic{
  transform: translateY(-1px) rotate(-2deg);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
}
.menu-ic{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* En mobile: 1 columna, tarjetas más altas, padding grande */
@media (max-width: 900px){
  .menu-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .menu-card{
    min-height: 104px;
    padding: 18px 18px;
    border-radius: 22px;
  }
  .menu-ic{
    width:58px; height:58px;
    border-radius: 20px;
  }
  .menu-h{font-size:17px}
  .menu-s{font-size:13px}
}

/* En pantallas muy chicas: aún más grande */
@media (max-width: 420px){
  .menu-card{min-height: 112px}
  .menu-ic{width:60px;height:60px}
}


@media (max-width: 900px){
  .hero h2{font-size:34px}
  .hero-buttons{padding:14px}
  .hero-buttons .menu-title{font-size:20px}
}

/* ====== AJUSTE MENÚ (color + distribución) ====== */
/* Volvemos a un estilo más comercial: un solo acento (naranja), tarjetas 2x2 equilibradas */

.menu-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 900px){
  .menu-grid{grid-template-columns:1fr}
}

.menu-card{
  min-height: 96px;
  padding:18px 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 160px at 15% 0%, rgba(255,122,0,.16), transparent 62%),
    rgba(255,255,255,.03);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform:none;
  filter:none;
}

/* Quitamos la barra lateral de colores (por si quedó definida) */
.menu-card::after{ display:none !important; }

/* Hover más lindo, pero sobrio */
.menu-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,122,0,.60);
  background:
    radial-gradient(620px 190px at 15% 0%, rgba(255,122,0,.22), transparent 62%),
    rgba(255,255,255,.035);
  box-shadow: 0 26px 70px rgba(0,0,0,.72);
}
.menu-card:active{ transform: translateY(-1px); }

.menu-ic{
  width:56px;height:56px;
  border-radius:18px;
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(255,122,0,.30), transparent 65%),
    rgba(0,0,0,.28);
  color: var(--accent);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,.10);
  transform:none !important;
}

.menu-h{font-size:16px}
.menu-s{font-size:13px}

/* Menú embebido en HERO: alineación un poco más compacta */
.hero-buttons{
  padding:18px;
}
.hero-buttons .menu-title{
  font-size:22px;
}

/* ====== Idioma: visible siempre (incluye móvil) ====== */
@media (max-width: 900px){
  .lang{display:flex !important}
}

/* Barra de idioma estilo pill */
.lang{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px;
  border-radius: 999px;
}
.lang-link{
  padding: 8px 12px;
}

/* ====== Menú: menos colorinche, más premium ====== */
.menu-card{
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.menu-card::before{
  opacity: .35 !important;
}
.menu-ic{
  background: rgba(0,0,0,.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255,122,0,.12) !important;
}
.menu-card:hover{
  border-color: rgba(255,122,0,.65) !important;
  background: rgba(255,255,255,.03) !important;
}
.menu-card:hover::before{
  opacity: .55 !important;
}

/* HERO imagen: más arriba (evitar que quede cortada) */
.hero-media img{
  object-position: 50% 10% !important;
  transform: scale(1.01) !important;
}

/* ===== Idioma arriba a la derecha (junto a Ingresar) ===== */
.topbar{gap:14px}
.lang{margin-left:auto; margin-right:8px}
@media (max-width: 900px){
  .lang{margin-left:auto; margin-right:6px}
}


/* --- Auth notices --- */
.notice{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.notice.error{border-color:rgba(255,90,90,.45);background:rgba(255,90,90,.10)}


/* === AJUSTES (OPCION 3) - integrar hero + agrandar imagen + sin texto abajo === */
.footer{display:none !important;}

/* Intro: imagen más grande y menos "flotante" */
.intro-logo-wrap{
  width: min(760px, 92vw) !important;
  border: 0 !important;
  box-shadow: 0 28px 140px rgba(0,0,0,.85) !important;
}
.intro-logo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* fade de bordes para integrarse con el fondo */
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* Sección hero: menos tarjeta, más integrada */
.hero{
  background:
    radial-gradient(900px 520px at 50% 15%, rgba(255,122,0,.16), transparent 62%),
    radial-gradient(800px 520px at 50% 110%, rgba(255,122,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 22px 90px rgba(0,0,0,.55) !important;
}

/* Foto más grande y "pegada" al fondo (sin borde duro) */
.hero{
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.hero-media{
  min-height: 440px !important;
  border: 0 !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 120px rgba(0,0,0,.75) !important;
}
.hero-media::before{
  content:"";
  position:absolute;
  inset:-35px;
  background-image: url("img/nico-hero.jpg");
  background-size: cover;
  background-position: 50% 18%;
  filter: blur(22px) brightness(.55) saturate(.95);
  transform: scale(1.08);
  z-index:0;
}
.hero-media img{position:relative;z-index:1; transform: scale(1.08) !important;}
.hero-media::after{
  z-index:2;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62)) !important;
}


/* Home hero without side image (buttons-only section) */
.hero.no-media{grid-template-columns:1fr;}
.hero.no-media .hero-copy{max-width: 860px;}


/* Skip en segunda pantalla (torso/transition) */
.transition-skip{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
}


/* ✅ Mobile: sacar "Área de alumnos" y usar el texto de ayuda como título */
@media (max-width: 720px){
  /* ocultar el título grande */
  .alumnos-title,
  .area-title,
  h1.area-title,
  h1.alumnos-title{
    display:none !important;
  }

  /* el texto "Ingresá con tu DNI..." pasa a ser título */
  .alumnos-help,
  .area-help,
  .login-help{
    display:block !important;
    margin: 0 0 14px !important;
    font-size: clamp(26px, 7vw, 34px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg, #f2f2f2) !important;
  }
}


/* =========================================================
   FIX OBJETIVOS MOBILE (NO DUPLICADOS + CARDS PROLIJAS)
   ========================================================= */

/* En desktop: se usa GOALS PRO (GSAP). En mobile: solo GOALS MOBILE */
.goals-mobile{display:none;}
@media (max-width: 900px){
  .goals-mobile{display:block;}
  #goalsPro{display:none !important;}
  .goals-pro{display:none !important;}
  #goalsFinal{display:none !important;}
}

/* Wrapper */
@media (max-width: 900px){
  .goals-mobile{
    margin-top: 16px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(900px 520px at 50% 0%, rgba(255,122,0,.10), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .goals-mobile-track{
    display:grid;
    gap: 16px;
    padding: 14px;
  }

  /* Slide-card */
  .goal-mob{
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: #0b0b0b;
  }

  /* Zona imagen (sin cortar la cabeza) */
  .goal-mob-bg{
    position: relative;
    height: 44svh;
    min-height: 280px;
    background-image: var(--mob-img);
    background-size: cover;
    background-position: 50% 25%;
  }
  .goal-mob-bg::before{
    content:"";
    position:absolute;
    inset:-22px;
    background-image: var(--mob-img);
    background-size: cover;
    background-position: 50% 35%;
    filter: blur(18px) brightness(.55) saturate(.95);
    transform: scale(1.12);
    opacity: .95;
  }
  .goal-mob-bg img{
    position:absolute;
    inset:0;
    margin:auto;
    width:100%;
    height:100%;
    object-fit: contain;      /* ✅ no recorta */
    object-position: 50% 50%;
    z-index: 1;
  }

  /* Cuerpo */
  .goal-mob-body{
    position: relative;
    z-index: 2;
    padding: 16px 16px 18px;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.92));
  }

  .goal-mob-body .goal-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(242,242,242,.92);
  }
  .goal-mob-body .goal-badge.badge-pro{
    background: rgba(255,122,0,.16);
    border-color: rgba(255,122,0,.35);
    color: #ffb36b;
  }

  .goal-mob-body h4{
    margin: 10px 0 10px;
    font-size: 22px;
    line-height: 1.08;
  }
  .goal-mob-body .muted{
    font-size: 14px;
    line-height: 1.5;
  }
  .goal-mob-body .ticks{
    margin: 12px 0 0;
  }

  /* Hint (solo 1er slide) */
  .goal-mob-hint{
    position:absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.35);
    color: rgba(242,242,242,.90);
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 11px;
    user-select:none;
  }

  /* CTA final */
  .goals-mobile-cta{
    display:flex;
    justify-content:center;
    padding: 6px 14px 16px;
  }
  .btn.pulse{
    position: relative;
    animation: nbPulse 1.25s ease-in-out infinite;
  }
  @keyframes nbPulse{
    0%,100%{ transform: translateY(0) scale(1); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
    50%{ transform: translateY(-1px) scale(1.03); box-shadow: 0 18px 52px rgba(255,122,0,.18); }
  }
}

/* ===== FIX V2 (SOLO CELU): juntar imagen + texto del INTRO ===== */
@media (max-width: 520px){
  /* forzamos layout en columna con gap controlado */
  .intro-center{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:16px !important;
  }

  /* eliminamos márgenes que abren aire */
  .intro-logo-wrap{ margin:0 !important; width:min(520px, 86vw) !important; }
  .intro-copy{ margin-top:0 !important; }
  .intro-line{ margin:0 0 6px !important; }
  .intro-sub{ margin:0 !important; }
}

/* =========================
   TEAM Showcase (autoplay)
   ========================= */
.team-showcase .section-head{margin-bottom:16px}
.team-stage{
  position:relative;
  border:1px solid var(--stroke);
  background: radial-gradient(1200px 600px at 50% 40%, rgba(255,122,0,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0));
  border-radius:28px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.team-stage-media{
  position:relative;
  aspect-ratio: 16 / 9;
  min-height: 360px;
}

.team-stage-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.05);
}

.team-stage-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 35% 40%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(1200px 520px at 70% 35%, rgba(0,0,0,.28), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.45));
  pointer-events:none;
}

.team-stage-ui{
  position:absolute; inset:16px 16px auto 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  pointer-events:none;
}

.team-stage-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.45);
  color:var(--fg);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

.team-stage-counter{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:rgba(255,255,255,.92);
  font-size:12px;
}

.team-stage-progress{
  position:absolute; left:0; right:0; bottom:0;
  height:5px;
  background: rgba(255,255,255,.08);
}

.team-stage-bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(255,122,0,.9), rgba(255,154,60,.9));
  box-shadow: 0 0 18px rgba(255,122,0,.35);
}

.team-ctas{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.team-cta.hidden{display:none !important}

.team-galleries{margin-top:26px}
.team-gallery{margin-top:22px}
.team-gallery-head{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}

.team-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.team-grid .team-card,
.team-grid .team-item{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.team-item img{width:100%;height:240px;object-fit:contain;display:block;background:#000}
.team-item .meta{display:none}
.team-item .meta .t{font-weight:700;font-size:14px}
.team-item .meta .s{color:var(--muted);font-size:12px;margin-top:2px}

.team-note{margin-top:12px;opacity:.9}

@keyframes nbSlideIn{
  from{opacity:0;transform:scale(1.02) translateX(18px);filter:blur(2px)}
  to{opacity:1;transform:scale(1.08) translateX(0);filter:blur(0)}
}
@keyframes nbSlideHold{
  from{transform:scale(1.08)}
  to{transform:scale(1.12)}
}
@keyframes nbSlideOut{
  from{opacity:1;transform:scale(1.12) translateX(0);filter:blur(0)}
  to{opacity:0;transform:scale(1.10) translateX(-18px);filter:blur(2px)}
}

.team-stage-img.is-in{animation: nbSlideIn .55s ease-out both}
.team-stage-img.is-hold{animation: nbSlideHold 2.2s ease-in-out both}
.team-stage-img.is-out{animation: nbSlideOut .45s ease-in both}

@media (max-width: 900px){
  .team-grid{grid-template-columns: repeat(2, 1fr);}
  .team-stage-media{min-height: 320px;}
  .team-item img{height:220px}
}
@media (max-width: 560px){
  .team-grid{grid-template-columns: 1fr;}
  .team-stage-media{aspect-ratio: 4 / 5; min-height: 420px;}
  .team-stage-ui{inset:12px}
}


/* ===== TEAM Video Hero ===== */
.team-video-hero{position:relative;border:1px solid var(--stroke);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#000;min-height:360px}
.team-video{width:100%;height:100%;min-height:360px;display:block;object-fit:cover}
.team-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72));pointer-events:none}
.team-video-ui{position:absolute;inset:auto 16px 16px 16px;display:flex;flex-direction:column;gap:12px}
.team-video-actions{display:flex;gap:10px;flex-wrap:wrap}
.team-sound{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.28);color:rgba(242,242,242,.92)}
.team-sound-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px rgba(255,122,0,.18)}
.team-sound.is-on .team-sound-dot{background:#4ade80;box-shadow:0 0 0 6px rgba(74,222,128,.18)}
@media (max-width:900px){.team-video{min-height:420px}.team-video-actions{flex-direction:column}.team-video-actions .btn{width:100%}}
.team-galleries{margin-top:16px;transition:max-height .45s ease, opacity .35s ease, transform .35s ease;overflow:hidden}
.team-galleries.is-collapsed{max-height:0;opacity:0;transform:translateY(8px)}
.team-galleries.is-open{max-height:6000px;opacity:1;transform:none}


/* === TRAYECTORIA HERO VIDEO (NB) === */
.tray-hero{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  min-height:520px;
  background:#000;
}
.tray-hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}
.tray-hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 40% 35%, rgba(255,122,0,.20), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.35) 55%, rgba(0,0,0,.72));
  pointer-events:none;
}
.tray-hero .tray-inner{
  position:relative;
  z-index:1;
  padding:34px;
  width:min(980px, 92%);
}
.tray-kicker{
  margin:0 0 10px;
  color:var(--accent);
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
}
.tray-title{
  margin:0 0 12px;
  font-size: clamp(34px, 4.1vw, 56px);
  line-height:1.02;
  font-weight:950;
  letter-spacing:.01em;
}
.tray-lead{
  margin:0 0 18px;
  color:rgba(242,242,242,.88);
  max-width:68ch;
  font-size:15px;
  line-height:1.45;
}
.tray-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.tray-actions .btn{padding:12px 16px;border-radius:16px}
.tray-actions .btn.ghost{background:rgba(0,0,0,.25)}
.tray-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.tray-badge{
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:rgba(242,242,242,.86);
  font-size:12px;
  backdrop-filter: blur(10px);
}
.tray-sound{
  position:absolute;
  right:14px; bottom:14px;
  z-index:2;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--fg);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.tray-sound:hover{background:rgba(255,255,255,.06)}
.tray-sound.is-on{
  border-color: rgba(255,122,0,.60);
  box-shadow: 0 16px 40px rgba(255,122,0,.10);
}

/* Modales */
.nb-modal{
  position:fixed; inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.70);
}
.nb-modal.is-open{display:grid;}
.nb-modal .panel{
  width:min(980px, 96vw);
  max-height: min(86vh, 820px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 40% 0%, rgba(255,122,0,.18), transparent 62%),
    linear-gradient(180deg, rgba(12,12,12,.96), rgba(10,10,10,.94));
  box-shadow: 0 24px 90px rgba(0,0,0,.75);
  position:relative;
}
.nb-modal .panel-head{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:rgba(10,10,10,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  z-index:2;
}
.nb-modal .panel-title{margin:0;font-size:16px;font-weight:900}
.nb-modal .close{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  color:var(--fg);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.nb-modal .close:hover{background:rgba(255,255,255,.06)}
.nb-modal .panel-body{padding:18px}

.nb-video{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
  box-shadow: var(--shadow);
}
.nb-video video{width:100%; height:min(72vh, 680px); object-fit:contain; display:block; background:#000}
.nb-video .sound{
  position:absolute; right:12px; bottom:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.38);
  color:var(--fg);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.nb-video .sound:hover{background:rgba(255,255,255,.06)}
.nb-video .sound.is-on{border-color: rgba(255,122,0,.60)}


/* Trayectoria: bio dentro del modal (más legible) */
.tray-bio{
  margin:0 0 14px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.55);
  color: rgba(242,242,242,.92);
  line-height:1.35;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}



/* =========================
   NB Music — botón brillante (Team + Grillas)
   ========================= */
@keyframes nbMusicGlow{
  0%,100%{ box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 rgba(255,122,0,0); transform: translateY(0) scale(1); }
  50%{ box-shadow: 0 18px 52px rgba(0,0,0,.55), 0 0 26px rgba(255,122,0,.85); transform: translateY(-1px) scale(1.03); }
}
@keyframes nbMusicBlink{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.25); }
}

/* Team page: el botón existente */
.team-sound{
  cursor:pointer;
  user-select:none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, filter .2s ease;
  animation: nbMusicBlink 1.35s ease-in-out infinite;
}
.team-sound:hover{
  border-color: rgba(255,122,0,.55);
  background: rgba(255,122,0,.08);
  filter: brightness(1.18);
}
.team-sound.is-on{
  animation: nbMusicGlow 1.25s ease-in-out infinite;
  border-color: rgba(255,122,0,.65);
  background: rgba(255,122,0,.10);
}

/* Pages de atletas/transformaciones: FAB flotante */
.nb-music-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  color: rgba(242,242,242,.95);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: nbMusicBlink 1.35s ease-in-out infinite;
}
.nb-music-fab .nb-music-ic{ font-size: 14px; }
.nb-music-fab.is-on{
  border-color: rgba(255,122,0,.60);
  background: rgba(255,122,0,.10);
  animation: nbMusicGlow 1.25s ease-in-out infinite;
}
.nb-music-fab.needs-tap{
  border-color: rgba(255,122,0,.70);
  background: rgba(255,122,0,.12);
  animation: nbMusicGlow .95s ease-in-out infinite;
}


/* ===== TEAM SOUND button: premium attention ===== */
.team-sound{
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.team-sound:hover{ transform: translateY(-1px); border-color: rgba(255,122,0,.55); }
.team-sound.is-on{
  border-color: rgba(255,122,0,.65);
  background: rgba(255,122,0,.10);
  box-shadow: 0 0 24px rgba(255,122,0,.22);
  animation: nbTeamSoundGlow 1.25s ease-in-out infinite;
}
.team-sound.needs-tap{
  border-color: rgba(255,122,0,.85);
  background: rgba(255,122,0,.14);
  box-shadow: 0 0 34px rgba(255,122,0,.35);
  animation: nbTeamSoundPulse .95s ease-in-out infinite;
}
@keyframes nbTeamSoundGlow{
  0%,100%{ box-shadow: 0 0 18px rgba(255,122,0,.22); }
  50%{ box-shadow: 0 0 34px rgba(255,122,0,.42); }
}
@keyframes nbTeamSoundPulse{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.03); }
}

/* PEGAR AL FINAL DE objetivos-fix.css (o styles.css) */
/* Evita que overlay/video tapen clicks en mobile */
.goals-hero-video,
.goals-hero-overlay{
  pointer-events: none !important;
}

.goals-hero-content{
  position: relative;
  z-index: 5;
}

.goals-hero-back,
.goals-hero-actions a,
#soundToggle{
  position: relative;
  z-index: 6;
}
/* =====================================================
   TRAYECTORIA MODAL: 2 cards centradas + mismo tamaño
   ===================================================== */
.tray-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap:18px;
  justify-content:center;
  align-items:start;
}

.tray-grid .card{
  max-width: 520px;
  margin: 0 auto;
}

.tray-grid .card img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
}

@media (max-width: 900px){
  .tray-grid{
    grid-template-columns: 1fr;
  }
  .tray-grid .card img{
    height: 320px;
  }
}



/* =====================================================
   FIX v6: FORZAR VIDEO VISIBLE + CENTRAR 4 BOTONES (DESKTOP)
   ===================================================== */

@media (min-width: 901px){
  /* 1) Asegurar que el contenedor de video NO esté oculto */
  .desktop-only{ display: block !important; }

  .bg-video-full{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .bg-video-full video{
    display:block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Overlay MUY leve (para que se vea el video) */
  .bg-video-full-overlay{
    position:absolute !important;
    inset:0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.38)) !important;
  }

  /* 2) Que el contenido quede arriba del video */
  body{ background: transparent !important; }
  .topbar, header, main, footer{ position: relative !important; z-index: 2 !important; }

  /* 3) Hacer el recuadro principal más transparente para ver el video */
  .hero.no-media{
    background: rgba(12,12,12,.32) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(8px) !important;
  }
  .hero.no-media::before{
    /* si hay capas internas oscuras */
    opacity: .45 !important;
  }

  /* 4) Centrar el bloque de 4 botones (grid) */
  .hero.no-media .menu-grid{
    width: min(1000px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    justify-items: stretch !important;
    grid-template-columns: repeat(2, minmax(340px, 1fr)) !important;
    gap: 18px !important;
  }
  .hero.no-media .menu-grid > *{
    width: 100% !important;
  }

  /* Alinear “¿Qué querés hacer hoy?” al centro */
  .hero.no-media .menu h2,
  .hero.no-media .menu .menu-title,
  .hero.no-media .menu .menu-kicker{
    text-align: center !important;
  }
}

/* Mobile: no tocar */
@media (max-width: 900px){
  .bg-video-full{ display:none !important; }
}


/* --- Home video sound toggle (desktop only) --- */
@media (min-width: 992px){
  .sound-toggle{
    position: absolute;
    left: 18px;
    top: 78px; /* abajo del logo */
    z-index: 25;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .sound-toggle:hover{
    transform: translateY(-1px);
    background: rgba(255,122,0,.22);
    border-color: rgba(255,122,0,.7);
  }
}


/* --- Home bigger menu buttons (desktop only) --- */
@media (min-width: 992px){
  .menu-grid{
    max-width: 980px;
    margin: 0 auto;
    gap: 24px;
  }
  .menu-card{
    min-height: 128px;
    padding: 28px 30px;
    border-radius: 28px;
  }
  .menu-ic{
    width: 72px;
    height: 72px;
  }
  .menu-h{ font-size: 19px; }
  .menu-s{ font-size: 14px; }
  .menu-contact{
    padding: 16px 18px;
    border-radius: 999px;
    font-size: 16px;
  }
}
/* =========================
   DESKTOP BOOST (PC)
   Aumenta todo SOLO en pantallas grandes
   Pegalo al final del CSS
========================= */

/* 1) Subimos el tamaño base (rem) en desktop */
@media (min-width: 1100px){
  html{ font-size: 18px; } /* antes 16px => +12.5% */
}
@media (min-width: 1400px){
  html{ font-size: 19px; } /* +18.75% */
}
@media (min-width: 1700px){
  html{ font-size: 20px; } /* +25% */
}

/* 2) Contenedor más ancho en PC (si usás .container) */
@media (min-width: 1100px){
  .container{
    width: min(1320px, 92%);
    padding: 96px 0 70px; /* un poco más de aire */
  }
}

/* 3) Botones más grandes y “vendibles” en PC */
@media (min-width: 1100px){
  button, .btn, .button, a.btn, a.button{
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 1rem;
  }
}

/* 4) Títulos y texto: un toque más grandes en desktop */
@media (min-width: 1100px){
  h1{ font-size: 3rem; line-height: 1.05; }
  h2{ font-size: 2rem; }
  p{ font-size: 1.05rem; }
}

/* 5) Cards más “grandes” en PC (si usás .card / .panel) */
@media (min-width: 1100px){
  .card, .panel, .section-card{
    padding: 22px 22px;
    border-radius: 22px;
  }
}


/* =========================================================
   FINAL OVERRIDE: HOME VIDEO SOUND BUTTON CLICKABLE
   (no rompe mobile)
   ========================================================= */

/* El contenedor debe aceptar clicks (si no, el botón no funciona) */
.bg-video-full{ pointer-events: auto !important; }
.bg-video-full video,
.bg-video-full-overlay{ pointer-events: none !important; }
.bg-video-full .sound-toggle{ pointer-events: auto !important; }

/* Mobile: aseguramos que 'desktop-only' NO oculte el video del home */
@media (max-width: 900px){
  .desktop-only{ display:block !important; }

  .bg-video-full{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 44vh !important;
    min-height: 240px !important;
    max-height: 520px !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  .bg-video-full video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .sound-toggle{
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    top: auto !important;
    z-index: 60 !important;
  }
}


/* Quote inside Team */
.motivation-quote{
  margin: 22px 0 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.motivation-quote:before{
  content:"";
  position:absolute;
  left:16px; right:16px; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.9;
}
.motivation-quote p{
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .2px;
}
@media (max-width: 520px){
  .motivation-quote p{ font-size: 18px; }
}


/* =========================
   MUSIC BUTTON (PROTAGONISTA, UNIFICADO)
   ========================= */
.nb-music{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(255,122,0,.70);
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.94);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nb-music:hover{ transform: translateY(-2px); border-color: rgba(255,122,0,.95); }

.nb-music .nb-music-ic{ font-size:18px; line-height:1; }
.nb-music .nb-music-text{ font-size:12px; }
.nb-music .nb-music-dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.22);
}

.nb-music.is-on{
  border-color: rgba(255,122,0,.98);
  box-shadow:
    0 0 28px rgba(255,122,0,.26),
    0 22px 70px rgba(0,0,0,.65);
  animation: nbMusicGlowPro 1.05s ease-in-out infinite;
}
.nb-music.is-on .nb-music-dot{
  background: var(--accent);
  box-shadow: 0 0 16px rgba(255,122,0,.60);
  animation: nbMusicDotPro .9s ease-in-out infinite;
}

@keyframes nbMusicGlowPro{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.06);} }
@keyframes nbMusicDotPro{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.25); opacity:.85;} }

@media (max-width: 520px){
  .nb-music{ right:12px; bottom:12px; padding:12px 14px; }
  .nb-music .nb-music-text{ font-size:11px; }
}
/* ===== BOTÓN MÚSICA FIJO SOLO EN INDEX (video fullscreen) ===== */

.bg-video-full{
  position: relative;
}

.bg-video-full .nb-music{
  position: absolute !important;
  bottom: 18px;
  right: 18px;
  z-index: 5;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;

  transition: transform .2s ease, box-shadow .2s ease;
}

.bg-video-full .nb-music:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.team-quote{
  margin-top: 18px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  font-weight: 700;
  color: #ffffff;
  max-width: 780px;
}

.team-quote::before{
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ff7a00, transparent);
  margin-bottom: 14px;
  border-radius: 3px;
}

/* =========================
   NB — Banner de vencimiento (panel alumno)
   ========================= */
.banner-warning{
  margin: 14px auto;
  max-width: 1140px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,122,0,.10);
  border: 1px solid rgba(255,122,0,.35);
  color: var(--fg, #f2f2f2);
}
.banner-warning b{ color: #fff; }

.btn-renovar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:10px;
  padding:10px 12px;
  border-radius:14px;
  background: linear-gradient(135deg,var(--accent,#ff7a00),var(--accent-soft,#ff9a3c));
  color:#000;
  font-weight:900;
  text-decoration:none;
  box-shadow: 0 12px 30px rgba(255,122,0,.18);
}
.btn-renovar:hover{ filter:brightness(1.05); }

/* =========================
   NB — Fix visual: evitar que dos barras de acciones se apilen
   (si existen dos contenedores dentro de .topbar con botones)
   Nota: NO puede eliminar HTML duplicado; solo reduce el caos visual.
   ========================= */
.topbar .actions-dup{ display:none !important; }