/* ============================================================
   FRACTAL : FITNESS — hoja de estilos base
   Colores y tipografías extraídos del diseño V1.pdf
   ============================================================ */

:root{
  /* Paleta (muestreada del PDF) */
  --aqua:        #7DCDC8;
  --aqua-deep:   #5FB3AE;
  --pink:        #B37287;
  --pink-soft:   #AA8D97;
  --ink:         #131313;
  --ink-2:       #1A1A1A;
  --smoke:       #BDBFC1;
  --smoke-dim:   #8A8C8E;
  --white:       #FFFFFF;

  /* Alturas de las barras fijas */
  --topbar-h:    64px;
  --navbar-h:    62px;
  --bars-h:      calc(var(--topbar-h) + var(--navbar-h));

  /* Tipografía */
  --display: "Red Hat Display", system-ui, sans-serif;
  --text:    "Red Hat Text", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--smoke);
  font-family:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Fondo con grano, igual que el diseño ------------------------ */
body::before{
  content:"";
  position:fixed; inset:0;
  background:url("../img/grain.jpg") center/cover;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* Scrollbar fina como la del diseño --------------------------- */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--aqua); border-radius:3px; }
html{ scrollbar-width:thin; scrollbar-color:var(--aqua) transparent; }

/* ============================================================
   1. TOPBAR
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-h);
  z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,3vw,44px);
  background:var(--aqua);
  transition:background .45s var(--ease), color .45s var(--ease);
}
.topbar.is-light{ background:var(--white); }

.logo{ display:flex; align-items:center; }
.logo img{
  height:clamp(15px,1.9vw,26px);
  width:auto;
}

.topbar__right{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); }

.disc{
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--white);
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.disc:hover{ transform:translateY(2px); }
.disc svg{ width:16px; height:16px; }

.login{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(15px,1.5vw,22px);
  letter-spacing:.02em;
  color:var(--white);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.topbar.is-light .login{ color:var(--ink); text-shadow:none; }

/* ============================================================
   2. NAVBAR
   ============================================================ */
.navbar{
  position:fixed; top:var(--topbar-h); left:0; right:0;
  height:var(--navbar-h);
  z-index:59;
  background:rgba(19,19,19,.92);
  backdrop-filter:blur(6px);
}
.navbar__inner{
  height:calc(var(--navbar-h) - 6px);
  display:flex; align-items:center;
  gap:clamp(14px,4.2vw,72px);
  padding:0 clamp(16px,3vw,44px);
  overflow-x:auto;
  scrollbar-width:none;
}
.navbar__inner::-webkit-scrollbar{ display:none; }

.navlink{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(13px,1.35vw,19px);
  letter-spacing:.06em;
  color:var(--smoke);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.navlink:hover,
.navlink.is-active{ color:var(--aqua); }

.navlink__chev{
  width:26px; height:26px; border-radius:50%;
  background:var(--white); color:var(--ink);
  display:grid; place-items:center; flex:none;
  transition:transform .3s var(--ease);
}
.navlink__chev svg{ width:11px; height:11px; }
.navlink:hover .navlink__chev{ transform:rotate(180deg); }

/* Barra segmentada bajo el nav (rosa / gris / aqua) */
.navrule{
  display:flex; height:6px;
  background:var(--smoke);
}
.navrule span{ flex:1; }
.navrule span:nth-child(1){ background:transparent; flex:.9; }
.navrule span:nth-child(2){ background:var(--pink); flex:1.8; }
.navrule span:nth-child(3){ background:transparent; flex:1; }
.navrule span:nth-child(4){ background:var(--aqua); flex:1.8; }
.navrule span:nth-child(5){ background:transparent; flex:7; }

/* ============================================================
   3. LAYOUT DE SECCIONES
   ============================================================ */
.screen{
  position:relative;
  z-index:1;
  min-height:100svh;
  padding-top:var(--bars-h);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.screen__bg{
  position:absolute; inset:var(--bars-h) 0 0 0;
  z-index:-1;
}
.screen__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1);
}

.wrap{ width:min(1440px,100%); margin-inline:auto; padding-inline:clamp(16px,3vw,44px); }

/* ============================================================
   4. HERO
   ============================================================ */
.hero__bg img{
  width:46%;
  object-position:56% 18%;
  filter:grayscale(1) brightness(1.28) contrast(1.12);
}
.hero__bg::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(19,19,19,.55),rgba(19,19,19,0) 34%);
  pointer-events:none;
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(96deg,
    rgba(19,19,19,0)   0%,
    rgba(19,19,19,.08) 20%,
    rgba(19,19,19,.55) 33%,
    var(--ink)         44%);
}
@media (max-width:900px){
  .hero__bg img{ width:100%; }
  .hero__bg::after{ background:linear-gradient(180deg,rgba(19,19,19,.25),rgba(19,19,19,.9) 60%,var(--ink)); }
}

.hero__content{
  margin-left:auto; margin-right:0;
  width:min(880px,62vw);
  padding-bottom:clamp(60px,12vh,140px);
}
@media (max-width:900px){ .hero__content{ width:100%; } }

.headline{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(30px,5.3vw,78px);
  line-height:1.0;
  letter-spacing:-.015em;
  color:var(--smoke);
  margin:0;
  text-transform:uppercase;
}
.headline .cap{ color:var(--aqua); }

.hero__cta{
  display:flex; align-items:center; gap:22px;
  justify-content:flex-end;
  margin-top:clamp(28px,5vh,56px);
}
@media (max-width:900px){ .hero__cta{ justify-content:flex-start; } }

.pill{
  display:inline-block;
  background:var(--aqua);
  color:var(--ink);
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:9px 26px;
  border-radius:999px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.pill:hover{ background:var(--white); transform:translateY(-2px); }
.pill--lg{ font-size:14px; padding:12px 40px; }

.arrow-long{
  width:clamp(60px,8vw,120px); height:2px;
  background:var(--white);
  position:relative;
}
.arrow-long::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:14px; height:14px;
  border-top:2px solid var(--white);
  border-right:2px solid var(--white);
  transform:translateY(-50%) rotate(45deg);
}

/* ============================================================
   5. MARQUEE
   ============================================================ */
.marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 26s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

.marquee__group{ display:flex; gap:clamp(24px,4vw,64px); padding-right:clamp(24px,4vw,64px); }
.marquee__item{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,5.4vw,74px);
  letter-spacing:.12em;
  line-height:1;
  color:var(--smoke);
  white-space:nowrap;
}
.marquee__item.dim{ color:var(--smoke); opacity:.34; }

.hero__marquee{ padding-bottom:clamp(18px,4vh,46px); }

/* ============================================================
   6. BLOQUE DE TEXTO (FRACTAL / manifiesto)
   ============================================================ */
.prose{
  width:min(760px,90%);
  margin-inline:auto;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(19px,2.3vw,32px);
  line-height:1.46;
  color:var(--white);
}
.prose p{ margin:0 0 1em; }
.prose strong{ font-weight:500; color:var(--aqua); }

/* ============================================================
   7. THE MOMENT BEFORE IMPACT
   ============================================================ */
.impact{ justify-content:flex-start; padding-block:0; }
.impact__strip{
  display:grid;
  grid-template-columns:1fr 1.6fr 1.1fr;
  gap:4px;
  margin-top:clamp(40px,10vh,120px);
}
.impact__strip img{
  width:100%; height:clamp(110px,22vh,190px);
  object-fit:cover; filter:grayscale(1) contrast(1.05);
}
.impact__label{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(20px,3.6vw,50px);
  letter-spacing:.16em;
  text-align:center;
  color:var(--smoke);
  margin:clamp(24px,5vh,54px) 0 clamp(6px,1.4vh,16px);
  text-transform:uppercase;
}
.impact__numbers{ overflow:hidden; }
.impact__numbers .marquee__item{
  font-weight:900;
  font-size:clamp(64px,13vw,190px);
  letter-spacing:-.01em;
}
.n-pink{ color:var(--pink-soft); }
.n-aqua{ color:#ACB8B7; }

/* ============================================================
   8. SISTEMA CONTINUO — cards de mixes
   ============================================================ */
.mixgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,32px);
  width:min(540px,92%);
  margin-inline:auto;
}
@media (max-width:640px){ .mixgrid{ grid-template-columns:repeat(2,1fr); width:100%; } }

.mixcard{
  position:relative;
  aspect-ratio:1/.92;
  background:linear-gradient(160deg,#232323,#161616);
  border-radius:6px;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mixcard:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.55); }

.mixcard__brand{
  width:70%; max-width:140px;
  filter:brightness(1.45);
}
.mixcard--muted .mixcard__brand{ filter:brightness(1.15) opacity(.75); }
.mixcard__num{
  font-family:var(--display); font-weight:900;
  font-size:clamp(20px,3vw,34px);
  line-height:1.1; margin-top:6px;
  white-space:nowrap;
}
.mixcard__num.is-long{ font-size:clamp(15px,2.1vw,24px); letter-spacing:.02em; }
.mixcard--xrp .mixcard__num{ color:var(--white); }
.mixcard--idpro .mixcard__num{ color:var(--pink-soft); }

/* El "swoosh" diagonal de cada card */
.mixcard__swoosh{
  position:absolute; right:-14%; bottom:-18%;
  width:62%; height:62%;
  transform:rotate(0deg);
}
.mixcard__swoosh path{ fill:none; stroke-width:6; stroke-linecap:round; }
.mixcard--xrp   .mixcard__swoosh path{ stroke:var(--aqua); }
.mixcard--idpro .mixcard__swoosh path{ stroke:var(--pink); }
.mixcard--muted .mixcard__swoosh path{ stroke:var(--smoke); opacity:.5; }

.mixcard__video{
  position:absolute; left:50%; bottom:-24px; transform:translateX(-50%);
  font-family:var(--display); font-size:10px;
  letter-spacing:.34em; color:var(--smoke);
  opacity:0; transition:opacity .3s var(--ease);
}
.mixcard:hover .mixcard__video,
.mixcard.is-current .mixcard__video{ opacity:1; }

.mixgrid__row{ display:contents; }

.continuo__cta{ text-align:center; margin-top:clamp(44px,8vh,84px); }
.continuo__note{
  font-family:var(--display); font-size:clamp(11px,1.2vw,15px);
  letter-spacing:.06em; color:var(--smoke); opacity:.8;
  text-align:center; margin-top:18px; text-transform:uppercase;
}
.continuo__marquee .marquee__item{
  font-weight:900; font-size:clamp(44px,8.6vw,116px);
  color:var(--smoke); opacity:.22; letter-spacing:0;
}

/* ============================================================
   9. PROGRAMAS
   ============================================================ */
.programas__bg img{
  width:32%;
  object-position:52% 30%;
  filter:grayscale(1) brightness(1.1) contrast(1.08);
}
.programas__bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(92deg,
    rgba(19,19,19,0)   0%,
    rgba(19,19,19,.08) 14%,
    rgba(19,19,19,.72) 25%,
    var(--ink)         36%);
}
@media (max-width:900px){ .programas__bg img{ width:100%; opacity:.35; } }
.proglist{ width:min(1100px,92%); margin-left:auto; margin-right:auto; }
.progitem{
  display:flex; align-items:center; gap:22px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,6.4vw,86px);
  letter-spacing:.16em;
  line-height:1.62;
  color:var(--smoke-dim);
  transition:color .35s var(--ease), letter-spacing .5s var(--ease);
}
.progitem:hover{ color:var(--white); letter-spacing:.18em; }
.progitem .scrollhint{ color:var(--aqua); font-size:.4em; }

/* ============================================================
   10. SUSCRIPCIÓN
   ============================================================ */
.suscripcion__bg img{ filter:none; object-position:center 30%; }
.suscripcion__bg::after{
  content:""; position:absolute; inset:0;
  background:rgba(20,20,20,.18);
}
.suscripcion{ align-items:center; }

.toggle{
  display:flex; align-items:stretch;
  background:var(--aqua);
  border-radius:999px;
  width:min(600px,92%);
  margin:0 auto clamp(28px,5vh,54px);
  overflow:hidden;
}
.toggle__opt{
  flex:1; padding:16px 10px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.8vw,38px);
  color:var(--ink);
  text-align:center;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.toggle__opt small{
  display:block;
  font-family:var(--text); font-size:12px; letter-spacing:.01em;
  color:#D0402C; margin-top:2px;
}
.toggle__opt.is-on{ background:var(--white); border-radius:999px; }

.plan{
  width:min(500px,92%); margin-inline:auto;
  background:rgba(30,30,30,.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  padding:clamp(22px,3vw,34px) clamp(24px,4vw,44px);
}
.plan h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.7vw,20px);
  letter-spacing:.02em; color:var(--white);
  margin:0 0 6px;
}
.plan ul{ list-style:none; margin:0; padding:0; }
.plan li{
  font-family:var(--display); font-weight:400;
  font-size:clamp(14px,1.6vw,19px);
  color:var(--white); line-height:1.65;
}
.suscripcion__foot{ text-align:center; margin-top:clamp(30px,5vh,52px); }
.suscripcion__login{
  display:block; margin-top:20px;
  font-family:var(--display); font-size:clamp(14px,1.5vw,18px);
  color:var(--white);
}
.suscripcion__login a{ margin-left:16px; text-decoration:underline; text-underline-offset:4px; }

/* ============================================================
   11. PÁGINAS INTERNAS (equipo / eventos)
   ============================================================ */
.page-head{ padding-top:clamp(40px,8vh,90px); }
.eyebrow{
  font-family:var(--display); font-size:12px;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--aqua); margin:0 0 14px;
}
.page-title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(40px,7vw,96px); line-height:1;
  color:var(--smoke); margin:0 0 24px; text-transform:uppercase;
}
.placeholder{
  border:1px dashed rgba(189,191,193,.32);
  border-radius:4px;
  padding:clamp(24px,4vw,44px);
  margin-top:28px;
  color:var(--smoke); opacity:.8;
  font-size:15px; line-height:1.6;
}
.placeholder h4{
  font-family:var(--display); font-weight:500; color:var(--aqua);
  margin:0 0 10px; letter-spacing:.04em; text-transform:uppercase; font-size:13px;
}

.cardgrid{
  display:grid; gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-top:32px;
}
.tile{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  aspect-ratio:3/4;
  display:flex; align-items:flex-end;
  padding:18px;
  font-family:var(--display); letter-spacing:.1em; font-size:14px;
  color:var(--smoke);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.tile:hover{ border-color:var(--aqua); transform:translateY(-4px); }

/* ============================================================
   12. FOOTER
   ============================================================ */
.footer{
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  padding:clamp(30px,5vh,54px) clamp(16px,3vw,44px);
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  font-size:12px; letter-spacing:.06em; color:var(--smoke-dim);
}
.footer__logo{
  font-family:var(--display); font-size:16px; letter-spacing:.22em; color:var(--smoke);
}

/* ============================================================
   13. ACCESIBILIDAD / MOTION
   ============================================================ */
:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media (max-width:760px){
  :root{ --topbar-h:56px; --navbar-h:54px; }
  .impact__strip{ grid-template-columns:1fr 1fr; }
  .impact__strip img:nth-child(3){ grid-column:span 2; }
}


/* ============================================================
   14. DETALLE DE PROGRAMA
   ============================================================ */
.progdetail{
  min-height:auto;
  padding-block:clamp(56px,11vh,132px);
}
.progdetail__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
@media (max-width:820px){ .progdetail__inner{ grid-template-columns:1fr; } }

.progdetail__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:3px;
}
.progdetail__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.progdetail:hover .progdetail__media img{ transform:scale(1.04); }

.progdetail__media img.progdetail__iso{
  position:absolute; right:18px; bottom:18px;
  width:clamp(46px,6vw,78px);
  height:auto; object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.progdetail__sublogo{
  width:min(300px,72%);
  margin-bottom:clamp(16px,2.6vh,28px);
  filter:brightness(1.3);
}
.progdetail__text{
  font-family:var(--display); font-weight:400;
  font-size:clamp(16px,1.8vw,23px);
  line-height:1.55; color:var(--white);
  max-width:52ch;
}
.progdetail__text p{ margin:0 0 .9em; }

/* ============================================================
   15. EQUIPO
   ============================================================ */
.person{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  margin-top:clamp(28px,5vh,56px);
}
@media (max-width:820px){ .person{ grid-template-columns:1fr; } }
.person__photo{ aspect-ratio:3/4; overflow:hidden; border-radius:3px; }
.person__photo img{ width:100%; height:100%; object-fit:cover; }
.person__name{
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px,4.4vw,58px); line-height:1;
  color:var(--smoke); margin:0 0 8px; text-transform:uppercase;
}
.person__role{
  font-family:var(--display); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--aqua); margin:0 0 18px;
}
.person__bio{
  font-family:var(--display); font-size:clamp(15px,1.7vw,21px);
  line-height:1.55; color:var(--white); max-width:48ch;
}

/* ============================================================
   16. LOGO EN EL PIE Y EN LA SECCIÓN IMPACTO
   ============================================================ */
.footer__logo img{ height:52px; width:auto; opacity:.85; }
.impact__lotus{
  width:clamp(46px,5vw,72px);
  margin:0 auto clamp(10px,2vh,20px);
  opacity:.55;
}

/* ============================================================
   17. BANNER DE EVENTO
   ============================================================ */
.eventcard{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px; overflow:hidden;
  margin-top:clamp(24px,4vh,48px);
  background:rgba(255,255,255,.03);
}
@media (max-width:760px){ .eventcard{ grid-template-columns:1fr; } }
.eventcard__media{ aspect-ratio:4/3; }
.eventcard__media img{ width:100%; height:100%; object-fit:cover; }
.eventcard__body{ padding:clamp(18px,3vw,40px) clamp(18px,3vw,40px) clamp(18px,3vw,40px) 0; }
@media (max-width:760px){ .eventcard__body{ padding:0 20px 28px; } }