/* ============================================================
   BASE — Reset, variables, tipografía, utilidades
   Clan 6 BJJ & MMA · Brutalist Tribal
   ============================================================ */

:root {
  --white: #ffffff;
  --black: #000000;
  --accent: #c8ff00;   /* verde ácido */
  --gray-900: #1a1a1a;
  --gray-500: #888888;

  --font-title: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --max: 1200px;
  --nav-h: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;   /* el marquee rotado no debe generar scroll horizontal */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--black);
  color: var(--white);
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* ---------------- Scroll snap cinemático ---------------- */
.snap {
  scroll-snap-type: y proximity;
}
.section {
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--nav-h) + 3rem) 1.5rem 3rem;
  overflow: hidden;
  transition: background-color .6s var(--ease);
}
.section--auto {
  min-height: auto;
  scroll-snap-align: none;
}

/* En móvil / touch NO forzamos snap (mejor tacto natural) */
@media (pointer: coarse), (max-width: 768px) {
  .snap { scroll-snap-type: none; }
  .section { scroll-snap-align: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .snap { scroll-snap-type: none; }
}

/* ---------------- Temas de sección (contraste alterno) ---------------- */
.section[data-nav="on-dark"]   { background: var(--black); color: var(--white); }
.section[data-nav="on-light"]  { background: var(--white); color: var(--black); }
.section[data-nav="on-accent"] { background: var(--accent); color: var(--black); }

/* ---------------- Reveal (bloques) ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------- Reveal palabra por palabra ---------------- */
.words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.words .word > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.words.is-visible .word > span {
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .words .word > span { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  border: 3px solid var(--black);
  background: var(--white);
  color: var(--black);
  transition: transform .25s var(--ease), background-color .25s, color .25s;
  min-height: 44px;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 currentColor; }
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black);
}
.btn--accent:hover { box-shadow: 6px 6px 0 var(--white); }
.btn--dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.btn--dark:hover { box-shadow: 6px 6px 0 var(--white); }
.btn--outline-light {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--outline-light:hover { background: var(--white); color: var(--black); box-shadow: none; transform: translate(-3px,-3px); }

/* ---------------- Kickers / etiquetas ---------------- */
.kicker,
.hero__kicker, .man__kicker, .disc__kicker, .sched__kicker,
.loc__kicker, .cta__kicker, .manifesto__kicker {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
}

/* ---------------- Marquee diagonal ---------------- */
.marquee {
  background: var(--accent);
  color: var(--black);
  padding: .9rem 0;
  overflow: hidden;
  transform: rotate(-3deg) scale(1.06);
  margin: -2.5rem 0;
  position: relative;
  z-index: 5;
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  font-family: var(--font-title);
  font-size: clamp(.85rem, 1.8vw, 1.25rem);
  letter-spacing: .04em;
  white-space: nowrap;
}
.marquee__track span { padding-right: .5rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------------- Reveal con clip-path (apertura horizontal) ---------------- */
.reveal--clip {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal--clip.is-visible { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal--clip { clip-path: none; transition: none; }
}

/* ---------------- Contenedores comunes ---------------- */
.section__wrap { width: 100%; max-width: var(--max); margin: 0 auto; }