/* HEAVY CIRCUIT · Teaser V6 · hero centrado matemáticamente dentro del espacio libre
   Layout únicamente. El Ghost Dirty original vive, SIN CAMBIOS, en ghost-dirty.css. */
:root{
  --font-interface:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --font-display:var(--font-interface);
  --font-body:var(--font-interface);
  --font-tech:var(--font-interface);
  color-scheme:dark;font-family:var(--font-body);font-size:17px;
  color:#f6f7fa;background:#070809;font-synthesis:none;
  font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;
  color:#f6f7fa;background:radial-gradient(ellipse 70% 33% at 50% -10%,rgba(45,64,86,.17),transparent 72%),#070809;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #a7c7f6;outline-offset:3px}
.shell{
  width:min(1220px,calc(100% - 84px));margin-inline:auto;
  min-height:0;
  display:flex;flex-direction:column;
}
.topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  min-height:clamp(62px,8.5vh,86px);gap:20px;border-bottom:1px solid #27303a;
}
.brand-lockup{display:inline-flex;align-items:center;gap:12px;min-width:0}
.symbol{width:clamp(48px,5.6vh,62px);height:auto;object-fit:contain;flex:none}
.brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-copy strong{font:800 clamp(24px,2.1vw,31px)/.99 var(--font-display);letter-spacing:.015em;white-space:nowrap}
.brand-copy small{font:650 10px/1.1 var(--font-body);letter-spacing:.205em;color:#a7b6c4;white-space:nowrap}
.follow{display:inline-flex;align-items:center;gap:12px;font:750 12px var(--font-body);letter-spacing:.14em;white-space:nowrap}
.follow-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #374556;background:#131923;border-radius:12px;transition:background .2s}
.follow:hover .follow-icon{background:#25364a}
.follow-icon svg{width:19px;height:19px;stroke:#c7dbea;stroke-width:1.7;fill:none;stroke-linecap:round}
/* Ritmo equilibrado: hero protagonista, con separación moderada del ecosistema.
   No estirar la portada para llenar artificialmente toda la pantalla. */
main{flex:0 0 auto;display:flex;flex-direction:column;min-height:0}
.hero{flex:0 0 auto;min-height:0;padding:clamp(46px,6.8vh,65px) 0;display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:flex;align-items:center;gap:13px;font:760 12px var(--font-tech);letter-spacing:.20em;color:#a5c9dc;text-transform:uppercase}
.eyebrow:before{content:"";height:2px;width:29px;background:#68b2ca}
.hero h1{
  font:800 clamp(55px,min(7vw,11vh),108px)/.91 var(--font-display);
  letter-spacing:-.017em;margin:clamp(8px,1.15vh,13px) 0 0;
}
.hero h1 .heavy{color:#86bdce}
.hero h1 .second{display:block;color:#f0f5f8}
.hero-sub{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(11px,1.85vh,18px)}
.hero-sub p{font:550 15px/1.45 var(--font-body);color:#a8b8c6;margin:0}
.hero-sub span{font:750 11px var(--font-tech);letter-spacing:.20em;color:#73899c;white-space:nowrap}
.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:clamp(9px,1.6vh,16px);margin:0 0 clamp(9px,1.4vh,14px);
  border-top:1px solid #27303a;font:750 11px var(--font-tech);
  letter-spacing:.20em;color:#a5b8c8;
}
.hpCoachHomeOverview{margin-bottom:clamp(24px,3.2vh,38px)}
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:clamp(107px,16vh,172px) clamp(68px,8vh,86px);gap:clamp(9px,1.35vh,14px)}
.cards>.hpDisciplineCard{grid-column:span 2}
/* TIME y REC mantienen su ancho original: la segunda fila tiene media altura. */
.cards>.hpDisciplineCard:nth-last-child(-n + 2){grid-column:span 3;padding:7px 23px}
.cards>.hpDisciplineCard:nth-last-child(-n + 2) .hpDisciplineKicker{font-size:10px;line-height:1}
.cards>.hpDisciplineCard:nth-last-child(-n + 2) h3{font-size:clamp(23px,2vw,30px);margin:3px 0 1px;line-height:1}
.cards>.hpDisciplineCard:nth-last-child(-n + 2) .hpDisciplineState{font-size:11px;line-height:1;padding-top:2px}
/* En la web app los colores se parametrizan: mismo color-mix y marca de agua. */
.cards .hpDisciplineCard{
  background:linear-gradient(90deg,color-mix(in srgb,var(--v26-mark) 28%,#191a1c) 0%,#191a1c 82%);
  min-width:0;min-height:0;cursor:default;
}
.footer{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  min-height:clamp(45px,6.7vh,64px);padding:10px 0;
  color:#718394;font:670 11px var(--font-tech);letter-spacing:.12em;gap:20px;
}
.footer a{color:#d1dfe8;border-bottom:1px solid #69869a;padding-bottom:4px;white-space:nowrap}
.footer a:hover{color:#fff}
@media(max-width:1040px){
  .shell{width:calc(100% - 54px)}.cards{gap:11px}.cards .hpDisciplineCard{padding-inline:19px}
}
@media(max-width:760px){
  .shell{width:calc(100% - 34px)}
  .topbar{min-height:clamp(50px,7.8vh,66px)}
  .symbol{width:clamp(39px,5.8vh,49px)}
  .brand-copy strong{font-size:clamp(19px,5.9vw,25px)}
  .brand-copy small{font-size:7px;letter-spacing:.15em}
  .follow{font-size:0;gap:0}.follow-icon{width:35px;height:35px}
  .hero{padding:clamp(24px,4.0vh,38px) 0;min-height:0}
  .hpCoachHomeOverview{margin-bottom:clamp(22px,3vh,32px)}
  .eyebrow{font-size:9px;letter-spacing:.15em;gap:9px}.eyebrow:before{width:19px}
  .hero h1{font-size:clamp(37px,10.6vw,63px);line-height:.94;margin-top:clamp(9px,1.5vh,14px)}
  .hero-sub{margin-top:clamp(10px,1.7vh,15px)}.hero-sub p{font-size:12px}.hero-sub span{display:none}
  .section-head{font-size:9px;letter-spacing:.09em;padding-top:10px;margin-bottom:10px}
  /* 2 + 1 + 2: cinco productos visibles sin cinco filas de scroll. */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,clamp(80px,15.4vh,136px)) clamp(62px,7.7vh,72px);gap:8px}
  .cards>.hpDisciplineCard,.cards>.hpDisciplineCard:nth-last-child(-n + 2){grid-column:span 1}
  .cards>.hpDisciplineCard:nth-child(3){grid-column:span 2}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2){padding:7px 12px}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2) .hpDisciplineKicker{font-size:9px;line-height:1}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2) h3{font-size:clamp(17px,4.8vw,24px);margin:3px 0 1px;line-height:1}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2) .hpDisciplineState{font-size:10px;line-height:1;padding-top:2px}
  .cards .hpDisciplineCard{min-height:0;padding:12px 14px 11px}
  .cards .hpDisciplineKicker{font-size:10px;letter-spacing:.12em}
  .cards .hpDisciplineCard h3{font-size:clamp(19px,5.5vw,30px);margin:clamp(5px,1vh,11px) 0 4px;line-height:1.06}
  .cards .hpDisciplineState{font-size:11px;padding-top:7px}
  .footer{min-height:clamp(34px,5.5vh,52px);font-size:9px;gap:10px;padding:8px 0}
  .footer a{font-size:10px}
}
@media(max-width:380px){
  .symbol{width:40px}.brand-copy strong{font-size:20px}
  .brand-copy small{font-size:6.5px}
  .hero h1{font-size:clamp(35px,10.35vw,42px)}
  .cards .hpDisciplineCard{padding-inline:11px}
  .cards .hpDisciplineCard h3{font-size:clamp(18px,5.4vw,23px)}
  .cards .hpDisciplineKicker{font-size:9px}
}
/* Pantallas bajas: compactación adicional sin cortar ni ocultar contenido. */
@media(min-width:761px) and (max-height:720px){
  .topbar{min-height:58px}.symbol{width:46px}.brand-copy strong{font-size:24px}
  .hero{padding:22px 0}.hero h1{font-size:clamp(53px,min(6.6vw,10.4vh),79px);margin-top:8px}
  .hero-sub{margin-top:9px}.section-head{padding-top:8px;margin-bottom:8px}
  .cards{grid-template-rows:repeat(2,clamp(92px,16vh,124px));gap:9px}
  .cards .hpDisciplineCard{padding-top:14px;padding-bottom:10px}
  .cards .hpDisciplineCard h3{margin-top:5px;font-size:clamp(21px,2vw,29px)}
  .cards .hpDisciplineState{font-size:13px;padding-top:7px}
  .footer{min-height:41px;padding:7px 0}
}
@media(max-width:760px) and (max-height:690px){
  .topbar{min-height:49px}.follow-icon{width:31px;height:31px}
  .hero{padding:0}.hero h1{font-size:clamp(33px,10vw,48px);margin-top:9px}
  .hero-sub{margin-top:9px}.hero-sub p{font-size:11px}
  .section-head{padding-top:7px;margin-bottom:7px}
  .cards{grid-template-rows:repeat(2,clamp(74px,14.3vh,99px)) 62px;gap:7px}
  .cards .hpDisciplineCard{padding-top:9px;padding-bottom:8px}
  .cards .hpDisciplineCard h3{margin-top:4px;margin-bottom:3px}
  .cards .hpDisciplineState{padding-top:4px}
  .footer{min-height:32px;padding:5px 0}
}

/* Móvil horizontal / ventanas muy bajas: hero a la izquierda y cards a la derecha. */
@media(orientation:landscape) and (min-width:600px) and (max-height:550px){
  .shell{width:calc(100% - 32px)}
  .topbar{min-height:44px}
  .symbol{width:34px}.brand-copy strong{font-size:18px}.brand-copy small{font-size:6.5px}
  .follow{font-size:10px}.follow-icon{width:29px;height:29px}
  main{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.3fr);align-content:center;align-items:center;gap:16px}
  .hero{padding:12px 0;min-height:0;display:flex;flex-direction:column;justify-content:center}
  .eyebrow{font-size:8px;letter-spacing:.11em}.eyebrow:before{width:16px}
  .hero h1{font-size:clamp(32px,4.6vw,62px);line-height:.92;margin-top:9px}
  .hero-sub{margin-top:12px}.hero-sub p{font-size:10px}
  .hero-sub span{display:none}
  .section-head{font-size:8px;letter-spacing:.07em;padding-top:7px;margin-bottom:7px}
  .cards{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:clamp(73px,26vh,119px) clamp(53px,13vh,63px);gap:7px}
  .cards>.hpDisciplineCard,.cards>.hpDisciplineCard:nth-child(3){grid-column:span 2}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2){grid-column:span 3;padding:5px 9px}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2) h3{font-size:clamp(14px,1.5vw,22px);margin:2px 0 0}
  .cards>.hpDisciplineCard:nth-last-child(-n + 2) .hpDisciplineState{font-size:9px;padding-top:1px}
  .cards .hpDisciplineCard{min-height:0;padding:8px 10px}
  .cards .hpDisciplineKicker{font-size:8px;letter-spacing:.08em}
  .cards .hpDisciplineCard h3{font-size:clamp(14px,1.5vw,22px);margin:4px 0 0;line-height:1}
  .cards .hpDisciplineState{font-size:9px;padding-top:3px}
  .footer{min-height:29px;padding:4px 0;font-size:8px}.footer a{font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}