/* ============================================================
   RUN ADDICTION — landing bento
   Paleta: negro #050505 (fondo real del logo), rojo #FE0D38
   Tipos: Anton (display) + Archivo (texto/eyebrow)
   ============================================================ */

:root{
  --bg:        #050505;
  --red:       #FE0D38;
  --red-deep:  #7A0B22;
  --white:     #F4F4F2;
  --gray:      #8C8C8C;
  --gap: 3px;

  --dur-morph: 1.1s;
  --ease-morph: cubic-bezier(.22,.9,.3,1);
}

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

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background: var(--bg);
  color: var(--white);
  font-family:'Archivo', system-ui, sans-serif;
  overflow:hidden;
}

a{ color:inherit; text-decoration:none; }

.chev{
  display:inline-block;
  color: var(--red);
  font-weight:700;
  letter-spacing:-2px;
  transform: skewX(-6deg);
}

/* ---------- brand bar ---------- */
.brand-bar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 20px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(5,5,5,.85), rgba(5,5,5,0));
}
.brand-bar__logo{
  height:20px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.brand-bar__cue{
  margin:0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gray);
  display:flex;
  align-items:center;
  gap:6px;
}

/* ---------- bento shell ---------- */
.bento{
  position:relative;
  width:100vw;
  height:100dvh;
  display:flex;
  flex-direction:row;
  gap: var(--gap);
  background: var(--bg);
}

.right-stack{
  flex: 1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

/* ---------- panel base ---------- */
.panel{
  position:relative;
  display:block;
  overflow:hidden;
  flex-shrink:0;
  flex-basis: 25%; /* JS overrides live values */
  transition:
    flex-basis var(--dur-morph) var(--ease-morph),
    transform .5s ease,
    box-shadow .5s ease;
  will-change: flex-basis;
  outline: none;
}

.panel:focus-visible{
  z-index:5;
  box-shadow: inset 0 0 0 3px var(--red);
}

.panel__bg{
  position:absolute;
  inset:0;
  background-image: url('assets/logo-wordmark.jpg');
  background-repeat:no-repeat;
  background-size: 480% auto;
  background-color: var(--bg);
  opacity:.16;
  filter: grayscale(1) contrast(1.15);
  transform: scale(1.06);
  transition: opacity .6s ease, filter .6s ease, transform 8s linear;
}
.panel--carreras .panel__bg{ background-position: 4% 46%; }
.panel--club     .panel__bg{ background-position: 38% 46%; }
.panel--nosotros .panel__bg{ background-position: 66% 46%; }
.panel--tienda   .panel__bg{ background-position: 94% 46%; }

.panel::after{ /* duotone red wash */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(155deg, rgba(254,13,56,.16), rgba(5,5,5,.72) 60%, rgba(5,5,5,.92));
  transition: background .5s ease;
}

/* moving pace-scan seam, echoes the >> of the wordmark */
.panel__scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(254,13,56,.5) 0 2px,
    transparent 2px 34px
  );
  background-size: 200% 200%;
  opacity:.22;
  animation: pace-run 5.5s linear infinite;
}
@keyframes pace-run{
  to{ background-position: -140px -140px; }
}

.panel__content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding: clamp(16px, 3vw, 40px);
}

.panel__eyebrow{
  font-size: .72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--red);
  font-weight:600;
}

.panel__title{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
  font-size: clamp(1.6rem, 4.2vw, 4.6rem);
  color: var(--white);
}

.panel__tag{
  max-width: 46ch;
  font-size: clamp(.8rem, 1vw, .95rem);
  color: rgba(244,244,242,.72);
  font-style:italic;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}

.panel__cta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--white);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .4s ease .05s, transform .4s ease .05s;
}

/* ---------- hover / active state ---------- */
.panel:hover,
.panel:focus-visible,
.panel.is-active{
  transform: scale(1.008);
  box-shadow: 0 0 0 1px rgba(254,13,56,.4), 0 18px 60px rgba(0,0,0,.55);
}
.panel:hover .panel__bg,
.panel:focus-visible .panel__bg,
.panel.is-active .panel__bg{
  opacity:.34;
  filter: grayscale(.2) contrast(1.05);
  transform: scale(1);
}
.panel:hover::after,
.panel:focus-visible::after,
.panel.is-active::after{
  background: linear-gradient(155deg, rgba(254,13,56,.3), rgba(5,5,5,.35) 55%, rgba(5,5,5,.78));
}
.panel:hover .panel__tag,
.panel:focus-visible .panel__tag,
.panel.is-active .panel__tag,
.panel:hover .panel__cta,
.panel:focus-visible .panel__cta,
.panel.is-active .panel__cta{
  opacity:1;
  transform:none;
}

/* ---------- mobile: flatten to single column ---------- */
@media (max-width: 760px){
  .bento{ flex-direction: column; }
  .right-stack{ display:contents; } /* sus hijos pasan a ser hijos directos de .bento */
  .panel__tag{ display:none; }      /* en móvil, sin hover, evitamos texto flotando invisible */
  .panel__cta{ opacity:1; transform:none; }
  .panel__content{ padding: 18px 20px 22px; gap:4px; }
  .panel__title{ font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .brand-bar{ height:46px; padding:0 14px; }
  .brand-bar__cue{ font-size:.62rem; }
}

@media (min-width: 761px){
  .panel--carreras .panel__title{ font-size: clamp(2.4rem, 6vw, 6.4rem); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .panel{ transition: transform .3s ease, box-shadow .3s ease; }
  .panel__scan{ animation:none; opacity:.12; }
  .panel__bg{ transition: opacity .3s ease; }
}