/* ============================================================
   EXCALIBUR SPORTS — immersive photographic rebuild
   monochrome · bone on black · Archivo variable + Instrument Serif
   ============================================================ */

:root{
  --black:#0a0a0b;
  --black-2:#101012;
  --bone:#f3f1ea;
  --bone-2:#e8e5db;
  --grey:#9aa0a6;
  --line:rgba(243,241,234,.14);
  --line-dark:rgba(10,10,11,.14);
  --accent:#5b7fd4;        /* azul acero — la luz fría de la portada */
  --accent-deep:#3d5cae;   /* variante para fondos claros */
  --ff:"Archivo",sans-serif;
  --ff-serif:"Instrument Serif",serif;
  --pad:clamp(1.25rem,4vw,4.5rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.js{scroll-behavior:auto}
body{
  background:var(--black);color:var(--bone);
  font-family:var(--ff);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bone)}

/* entrada suave de página */
html.js body{opacity:0;transition:opacity .6s ease}
html.js.ready body{opacity:1}

/* ---------- cursor circular (color del logo) ---------- */
@media (hover:hover) and (pointer:fine){
  html.js body, html.js body *{cursor:none!important}
}
.cursor{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:9px;height:9px;border-radius:50%;
  background:var(--bone);
  mix-blend-mode:difference;
  transition:width .28s ease,height .28s ease,background .28s ease,mix-blend-mode .28s ease;
  display:none;
}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor.is-link{
  width:26px;height:26px;
  mix-blend-mode:normal;background:rgba(91,127,212,.85);
}
.cursor.is-down{width:14px;height:14px}

/* initial states */
html.js [data-fade]{opacity:0;transform:translateY(16px)}
.mline{display:block;overflow:hidden}
html.js .mline>span{display:block;transform:translateY(110%)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem var(--pad);
  transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(10,10,11,.82);backdrop-filter:blur(14px);padding:.9rem var(--pad);border-color:var(--line)}
.nav__mark{color:var(--bone)}
.nav__mark svg{height:34px;width:auto;display:block}
.nav__menu{display:flex;gap:clamp(1.2rem,3vw,2.8rem)}
.nav__menu span{
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  opacity:.75;user-select:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  padding:1rem 2.1rem;border:1px solid var(--bone);border-radius:3rem;color:var(--bone);
  transition:background .35s,color .35s;
}
.btn:hover{background:var(--bone);color:var(--black)}

/* ============================================================
   COVER
   ============================================================ */
.cover{position:relative;height:100svh;min-height:600px;overflow:hidden}
.cover__media{position:absolute;inset:0;will-change:transform}
.cover__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.12) translateZ(0);will-change:transform;backface-visibility:hidden;
}
.cover__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.05) 30%,rgba(10,10,11,.08) 55%,rgba(10,10,11,.82) 100%),
    radial-gradient(90% 70% at 50% 46%,transparent 55%,rgba(10,10,11,.5) 100%);
}
.cover__content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 var(--pad) clamp(5.5rem,13vh,9rem);text-align:center;
  will-change:transform,opacity;
}

/* wordmark — the sword in the stone */
.wordmark{width:min(760px,88vw);height:auto;overflow:visible}
.wm__word{
  font-family:var(--ff);font-weight:900;font-stretch:112%;
  font-size:132px;letter-spacing:.02em;fill:var(--bone);
}
.wm__i{fill:transparent}
.wm__sub{
  font-family:var(--ff);font-weight:500;font-size:17px;letter-spacing:.42em;fill:var(--bone);opacity:.78;
}
.cover__line{
  margin-top:1.6rem;font-family:var(--ff-serif);font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--bone);opacity:.85;
}
.cover__foot{
  position:absolute;bottom:1.6rem;left:0;right:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad);
  font-size:.64rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);
}
.cover__scroll{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem}
.cover__scroll i{width:1px;height:38px;background:var(--line);position:relative;overflow:hidden;display:block}
.cover__scroll i::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--bone);animation:drop 2s ease-in-out infinite;
}
@keyframes drop{55%{top:100%}100%{top:100%}}
@media(max-width:700px){
  .cover__foot span:first-child,.cover__foot span:last-child{display:none}
  .cover__foot{justify-content:center}
  .wm__word{font-size:118px}
}

/* ============================================================
   MANIFESTO — editorial split (capítulo claro)
   ============================================================ */
.manifesto{
  background:var(--bone);color:var(--black);
  padding:clamp(6rem,15vh,10rem) var(--pad) clamp(4.5rem,10vh,7rem);
}
.manifesto__grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(3rem,7vw,7rem);align-items:center;
}
.manifesto__kicker{
  font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:2.2rem;
}
.manifesto__text{
  font-weight:600;font-stretch:104%;
  font-size:clamp(2rem,4.8vw,4.2rem);line-height:1.12;letter-spacing:-.01em;
}
.manifesto__text em{font-family:var(--ff-serif);font-style:italic;font-weight:400;letter-spacing:0}
.manifesto__body{
  margin-top:2.2rem;max-width:52ch;color:#5a574e;font-size:1rem;line-height:1.85;
}
.manifesto__img{position:relative}
.manifesto__img img{
  width:100%;max-height:560px;object-fit:cover;object-position:center 20%;
}
.manifesto__img figcaption{
  margin-top:1rem;font-size:.6rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#8a877c;
}
.manifesto__stats{
  max-width:1500px;margin:clamp(4rem,9vh,6.5rem) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  padding-top:2.4rem;border-top:1px solid var(--line-dark);
}
.mstat b{
  display:block;font-weight:800;font-stretch:114%;
  font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1;
  color:var(--accent-deep);
}
.mstat span{display:block;margin-top:.7rem;color:#8a877c;font-size:.78rem;letter-spacing:.04em;max-width:22ch}
@media(max-width:900px){
  .manifesto__grid{grid-template-columns:1fr}
  .manifesto__img{max-width:420px}
  .manifesto__stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   THREE WEAPONS — typographic index (claro, con preview)
   ============================================================ */
.disciplines{
  position:relative;
  background:var(--bone);color:var(--black);
  padding:clamp(3rem,7vh,5rem) 0 clamp(4rem,9vh,6.5rem);
}
.disciplines__kicker{
  max-width:1500px;margin:0 auto 1.6rem;padding:0 var(--pad);
  font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-deep);
}
.drow{
  display:grid;grid-template-columns:3.2rem 1fr auto 2.4rem;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  max-width:1500px;margin:0 auto;padding:clamp(1.4rem,3vh,2.2rem) var(--pad);
  border-top:1px solid var(--line-dark);
}
.drow:last-child{border-bottom:1px solid var(--line-dark)}
.drow em{font-style:normal;font-size:.66rem;font-weight:500;letter-spacing:.2em;color:#8a877c}
.drow b{
  font-weight:800;font-stretch:114%;text-transform:uppercase;line-height:1;
  font-size:clamp(2.6rem,6.4vw,5.4rem);
  color:transparent;-webkit-text-stroke:1.2px rgba(10,10,11,.5);
  transition:color .45s ease,-webkit-text-stroke-color .45s ease;
}
.drow:hover b{color:var(--black);-webkit-text-stroke-color:transparent}
.drow span{color:#8a877c;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;text-align:right}
.drow i{font-style:normal;color:var(--accent-deep);opacity:.55;transition:transform .35s,opacity .35s}
.drow:hover i{transform:translateX(6px);opacity:1}
@media(max-width:700px){
  .drow{grid-template-columns:2rem 1fr 1.6rem}
  .drow span{display:none}
}

/* preview flotante del arma — marco negro para contraste sobre hueso */
.dpreview{
  position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  width:min(270px,24vw);aspect-ratio:3/4;border-radius:6px;overflow:hidden;
  background:var(--black);padding:13px;
  box-shadow:0 34px 80px -18px rgba(10,10,11,.55);
  opacity:0;transform:translate(-50%,-56%) rotate(-5deg) scale(.85);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.dpreview.is-on{opacity:1;transform:translate(-50%,-56%) rotate(-3deg) scale(1)}
.dpreview img{
  width:100%;height:100%;object-fit:contain;padding:1.2rem;
  background:#fff;border-radius:3px;
}
@media(hover:none){.dpreview{display:none}}

/* ============================================================
   ATHLETES
   ============================================================ */
.athletes{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.athletes__img{overflow:hidden;position:relative}
.athletes__img img{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;backface-visibility:hidden;
}
.athletes__img--l img{object-position:center 20%}
.athletes__img--r img{object-position:center 30%}
.athletes__img::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.45)}
.athletes__overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 var(--pad);
}
.athletes__kicker{font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#9db4e8;margin-bottom:1.4rem}
.athletes__title{
  font-weight:800;font-stretch:114%;text-transform:uppercase;
  font-size:clamp(2.6rem,7.2vw,6.2rem);line-height:.98;letter-spacing:.005em;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.athletes__names{margin-top:1.8rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:.85;line-height:2}
.athletes__overlay .btn{margin-top:2.2rem}
@media(max-width:700px){
  .athletes{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}

/* ============================================================
   ARMOURY
   ============================================================ */
.armoury{background:var(--bone);color:var(--black);padding:clamp(5rem,12vh,8.5rem) var(--pad)}
.armoury__head{
  max-width:1500px;margin:0 auto clamp(2.5rem,6vh,4rem);
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
}
.armoury__head h2{
  font-weight:800;font-stretch:114%;text-transform:uppercase;
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:.005em;
}
.armoury__head p{color:#5c5a52;font-size:.95rem;max-width:34ch}
.armoury__grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.4vw,1.4rem);
}
.card{display:block}
.card figure{
  background:#fff;overflow:hidden;aspect-ratio:3/3.4;
  display:flex;align-items:center;justify-content:center;padding:1.6rem;
}
.card figure img{
  max-height:100%;width:auto;object-fit:contain;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.card:hover figure img{transform:scale(1.07)}
.card__row{
  display:flex;align-items:baseline;gap:.7rem;padding:1rem .2rem 0;
  border-top:1px solid rgba(10,10,11,.9);margin-top:1rem;
}
.card__row em{font-style:normal;font-size:.62rem;font-weight:500;letter-spacing:.14em;color:var(--accent-deep)}
.card__row b{font-weight:700;font-stretch:106%;text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em}
.card__row span{font-size:.68rem;letter-spacing:.06em;color:#8a877c;text-transform:uppercase}
.card__row i{margin-left:auto;font-style:normal;color:var(--accent-deep);transition:transform .35s}
.card:hover .card__row i{transform:translateX(6px)}
@media(max-width:1000px){.armoury__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .armoury__grid{grid-template-columns:1fr}
  .card figure{aspect-ratio:4/3}
}
.armoury__cta{
  max-width:1500px;margin:clamp(2.5rem,6vh,4rem) auto 0;
  display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap;text-align:center;
}
.btn--dark{border-color:var(--black);color:var(--black)}
.btn--dark:hover{background:var(--black);color:var(--bone)}
.armoury__cta p{color:#8a877c;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}

/* ============================================================
   SUPPLIERS — franja de marcas (arranque del capítulo oscuro)
   logos normalizados a monocromo hueso: invert+grayscale,
   screen funde los fondos blancos/negros con el negro de la página
   ============================================================ */
.brands{padding:clamp(4rem,9vh,6rem) var(--pad) clamp(3.5rem,8vh,5.5rem)}
.brands__kicker{
  text-align:center;
  font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  margin-bottom:clamp(2.4rem,5vh,3.4rem);
}
.brands__row{
  max-width:1360px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.8rem,4vh,3rem) clamp(2.4rem,5vw,4.8rem);
}
.blogo{
  height:clamp(26px,2.6vw,38px);width:auto;
  filter:grayscale(1) invert(1) brightness(1.28);
  mix-blend-mode:screen;
  opacity:.58;transition:opacity .45s ease;
}
.blogo:hover{opacity:1}
.blogo--noinvert{filter:grayscale(1) brightness(1.28)}
.blogo--tall{height:clamp(44px,4.4vw,64px)}
@media(max-width:700px){
  .brands__row{gap:1.6rem 2rem}
  .blogo{height:24px}
  .blogo--tall{height:38px}
}

/* ============================================================
   REVIEWS — rated excellent
   ============================================================ */
.reviews{
  border-top:1px solid var(--line);
  padding:clamp(5rem,12vh,8.5rem) var(--pad);
}
.reviews__head{text-align:center;max-width:1500px;margin:0 auto clamp(3rem,7vh,5rem)}
.reviews__kicker{
  font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.4rem;
}
.reviews__title{
  font-weight:800;font-stretch:114%;text-transform:uppercase;
  font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;
}
.reviews__title em{
  font-family:var(--ff-serif);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:1.04em;
}
.reviews__sub{
  margin-top:1.4rem;font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}
.reviews__grid{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);
}
.review{
  border-top:1px solid var(--line);padding-top:1.8rem;
  display:flex;flex-direction:column;gap:1.2rem;
}
.review__stars{font-size:.82rem;letter-spacing:.34em;color:var(--accent)}
.review p{color:var(--bone);opacity:.85;font-size:.95rem;line-height:1.85}
.review cite{
  margin-top:auto;font-style:normal;font-size:.64rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey);
}
@media(max-width:900px){.reviews__grid{grid-template-columns:1fr}}

/* ============================================================
   CIRCUIT
   ============================================================ */
.circuit{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden}
.circuit__media{position:absolute;inset:0}
.circuit__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  will-change:transform;backface-visibility:hidden;
}
.circuit__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.35) 0%,rgba(10,10,11,.15) 40%,rgba(10,10,11,.88) 100%);
}
.circuit__content{
  position:relative;z-index:2;padding:0 var(--pad) clamp(3.5rem,9vh,6rem);max-width:760px;
  margin-left:auto;
}
.circuit__title{
  font-weight:800;font-stretch:114%;text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5rem);line-height:1;margin-bottom:1.4rem;
}
.circuit__content>p{max-width:52ch;color:var(--bone);opacity:.85}
.circuit__trust{
  margin-top:1.6rem;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);opacity:.9;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--black);border-top:1px solid var(--line);
  padding:clamp(5rem,12vh,8rem) var(--pad) 2rem;text-align:center;
}
.foot__mark{height:52px;width:auto;color:var(--bone);margin:0 auto 1.6rem;display:block}
.foot__title{
  font-weight:800;font-stretch:114%;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1;
}
.foot__tag{font-family:var(--ff-serif);font-style:italic;color:var(--grey);margin-top:.8rem}
.foot__cols{
  max-width:1100px;margin:3.5rem auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:left;
  padding-top:2.4rem;border-top:1px solid var(--line);
}
.foot__cols span{
  display:block;font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  margin-bottom:.7rem;
}
.foot__cols p{font-size:.9rem;color:var(--bone);opacity:.85;line-height:1.9}
.foot__cols a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__bottom{
  max-width:1100px;margin:3rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
}
@media(max-width:800px){.foot__cols{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion: reduce){
  .cover__scroll i::after{animation:none}
  *{transition-duration:.01ms!important}
}