/* =========================================================
   MAZARANCH BASKETBALL — STYLE.CSS
   Path: public_html/assets/css/style.css
   (CLEAN + FIXED, based on your current file)
   ========================================================= */

/* ---------- Base / Tokens ---------- */
:root{
  --bg:#07080a;
  --bg2:#0b0f16;
  --card:rgba(255,255,255,.035);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);

  --orange:#ff6a00;
  --orange2:#ff9a3c;
  --hot:#ff3d00;

  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.18);

  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:24px;

  --max:1160px;

  --h:"Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --b:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--b);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(255,106,0,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,61,0,.10), transparent 55%),
    radial-gradient(800px 600px at 50% 85%, rgba(255,154,60,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2) 35%, var(--bg));
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
::selection{background:rgba(255,106,0,.35); color:#fff}

.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

/* ---------- Ambient FX ---------- */
.fx{position:fixed; inset:0; pointer-events:none; z-index:-1}

.fx--grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode:overlay;
}

.fx--smoke{
  background:
    radial-gradient(700px 500px at 18% 28%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(600px 450px at 72% 62%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(900px 600px at 60% 18%, rgba(255,106,0,.12), transparent 65%);
  filter:blur(14px) saturate(110%);
  opacity:.90;
  animation:smokeMove 14s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}

.fx--sparks{opacity:.75}

@keyframes smokeMove{
  from{transform:translate3d(-10px,-6px,0) scale(1)}
  to{transform:translate3d(14px,10px,0) scale(1.03)}
}

/* ---------- Typography ---------- */
.eyebrow{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,154,60,.92);
}

.h2{
  font-family:var(--h);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(34px,4.5vw,54px);
  line-height:1.0;
  margin:0 0 12px;
}

.h3{
  font-family:var(--h);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 8px;
  font-size:22px;
}

.h4{
  font-family:var(--h);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin:0 0 10px;
  font-size:13px;
  color:rgba(255,154,60,.92);
}

.p{margin:0; line-height:1.65; color:rgba(255,255,255,.82); font-size:15px}
.p--muted{color:var(--muted)}
.link{color:rgba(255,154,60,.95)}
.link:hover{text-decoration:underline}

.accent{
  background:linear-gradient(90deg, var(--orange), var(--orange2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Header / Nav ---------- */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(7,8,10,.88), rgba(7,8,10,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand__logo{height:38px; width:auto}

.nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.nav__toggle{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(255,255,255,.85);
  border-radius:999px;
}

/* IMPORTANT: keep using .nav__panel (your HTML uses it) */
.nav__panel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}

.nav__link{
  font-size:14px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);
  position:relative;
  padding:10px 6px;
  white-space:nowrap;
}
.nav__link:hover{color:rgba(255,255,255,.96)}
.nav__link::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:6px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--orange), transparent);
  transform:scaleX(0);
  transition:.22s ease;
  opacity:.85;
}
.nav__link:hover::after{transform:scaleX(1)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.9);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  cursor:pointer;
  user-select:none;
}
.btn:hover{transform:translateY(-1px); border-color:var(--line2)}
.btn--primary{
  background:
    radial-gradient(140% 140% at 10% 10%, rgba(255,154,60,.95), rgba(255,106,0,.85) 45%, rgba(255,61,0,.85) 100%);
  border-color:rgba(255,106,0,.35);
  box-shadow:0 22px 55px rgba(255,106,0,.16);
}
.btn--ghost{background:rgba(0,0,0,.18)}
.btn--sm{padding:10px 14px; border-radius:14px; font-size:14px}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:72px 0 30px;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  background:url("../img/hero.jpg") center/cover no-repeat;
  transform:scale(1.02);
  filter:saturate(110%) contrast(1.05);
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(255,106,0,.22), transparent 60%),
    radial-gradient(900px 700px at 80% 12%, rgba(255,61,0,.16), transparent 60%),
    linear-gradient(135deg, rgba(10,10,10,.86), rgba(10,10,10,.52) 45%, rgba(10,10,10,.88));
}

.hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:34px;
  align-items:stretch;
}

.hero__title{
  font-family:var(--h);
  font-weight:700;
  letter-spacing:.02em;
  font-size: clamp(44px, 6vw, 74px);
  line-height:.95;
  margin:10px 0 12px;
  text-transform:uppercase;
  text-shadow:0 20px 80px rgba(0,0,0,.75);
}

.hero__lead{color:rgba(255,255,255,.78); max-width:56ch; margin:0 0 18px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}

.hero__stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:22px;
}
.stat{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.18);
  padding:12px 14px;
}
.stat__num{font-family:var(--h); font-size:22px; letter-spacing:.04em; text-transform:uppercase}
.stat__label{font-size:13px; color:rgba(255,255,255,.66); line-height:1.35}

/* Hero visual card */
.heroCard{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

.heroCard__badge{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.20);
  font-size:13px;
  color:rgba(255,255,255,.78);
}
.pill__dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,106,0,.18);
}
.pill--ghost{opacity:.85}

.heroCard__frame{
  position:relative;
  height:340px;
  margin:18px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#050608;
}

/* Si usas IMG dentro del frame */
.heroCard__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  filter:saturate(1.08) contrast(1.05);
  z-index:0;
}

/* Si usas DIV .heroCard__img con background-image */
.heroCard__img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  filter:saturate(1.08) contrast(1.05);
  z-index:0;
}

.heroCard__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  z-index:1;
}

.heroCard__flare{
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(500px 320px at 40% 40%, rgba(255,106,0,.35), transparent 70%),
    radial-gradient(500px 360px at 65% 65%, rgba(255,61,0,.25), transparent 70%);
  filter:blur(10px);
  opacity:.9;
  animation:glow 4.8s ease-in-out infinite alternate;
  mix-blend-mode:screen;
  z-index:2;
  pointer-events:none;
}

@keyframes glow{
  from{transform:translate3d(-8px,-4px,0) scale(1)}
  to{transform:translate3d(10px,8px,0) scale(1.02)}
}

.heroCard__meta{
  display:grid;
  gap:10px;
  padding:0 18px 18px;
}

.metaItem{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.metaItem__k{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.metaItem__v{font-size:13px; color:rgba(255,255,255,.78)}

/* ---------- Marquee (infinite) ---------- */
.marquee{
  position:relative;
  z-index:2;
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  overflow:hidden;
}

.marquee__track{
  display:flex;
  width:max-content;
  will-change:transform;
  gap:0;
  padding:12px 0;
  animation:marq var(--marq-speed, 14s) linear infinite;
}

/* Works with your current HTML spans OR .marquee__item */
.marquee__track > span,
.marquee__item{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding-right:40px;
  font-family:var(--h);
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
  font-size:14px;
}

@keyframes marq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- Sections ---------- */
.section{padding:84px 0}
.section--alt{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.20));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.section__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:start;
}

.section__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.bullets{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.bullet{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.bullet__icon{font-size:18px; line-height:1.2}

/* Media card */
.mediaCard{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
  min-height:460px;
}
.mediaCard__img{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 420px at 30% 25%, rgba(255,106,0,.22), transparent 62%),
    radial-gradient(700px 520px at 70% 70%, rgba(255,61,0,.14), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.55));
}
.mediaCard__grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.70));
}
.mediaCard__stamp{
  position:absolute;
  left:18px; bottom:18px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.30);
}
.stamp__big{
  font-family:var(--h);
  font-size:32px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.stamp__small{
  margin-top:4px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,154,60,.92);
}

/* Programs cards */
.cards{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.cards--4{grid-template-columns:repeat(4,1fr)}

.card{
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(700px 420px at 15% 15%, rgba(255,154,60,.12), transparent 60%),
    rgba(255,255,255,.03);
  padding:18px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,106,0,.30);
  box-shadow:0 26px 90px rgba(0,0,0,.45)
}

/* Image on top WITHOUT breaking padding:
   - put <div class="card__img" style="background-image:url(...)"></div> as first child */
.card__img{
  height:160px;
  border-radius:18px;
  margin:-18px -18px 14px; /* full-bleed inside card */
  background-size:cover;
  background-position:center top;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.card__img::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 240px at 25% 30%, rgba(255,106,0,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
}

/* Events */
.events{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.eventCard{
  display:flex;
  gap:14px;
  align-items:center;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    radial-gradient(800px 420px at 15% 20%, rgba(255,106,0,.14), transparent 60%),
    rgba(255,255,255,.03);
  padding:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.eventCard__date{
  width:74px;
  border-radius:20px;
  border:1px solid rgba(255,106,0,.26);
  background:rgba(255,106,0,.10);
  text-align:center;
  padding:10px 0;
}
.eventCard__day{font-family:var(--h); font-size:34px; line-height:1}
.eventCard__mon{font-size:12px; letter-spacing:.22em; color:rgba(255,154,60,.95)}
.eventCard__body{flex:1}
.eventCard__cta{display:flex; gap:10px; flex-wrap:wrap}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.chip{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,106,0,.14);
  border:1px solid rgba(255,106,0,.30);
  color:rgba(255,154,60,.95);
  font-size:12px;
}
.chip--ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.76);
}

.ctaStrip{
  margin-top:18px;
  border-radius:28px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 30% 20%, rgba(255,106,0,.18), transparent 65%),
    linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.30));
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ctaStrip__actions{display:flex; gap:10px; flex-wrap:wrap}

/* Past posts */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}
.mediaPost{
  border-radius:24px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.mediaPost__img{
  height:170px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Fotos reales */
.mediaPost__img--1{
  background-image:
    radial-gradient(520px 280px at 20% 30%, rgba(255,106,0,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    url("../img/past-1.jpg");
}

.mediaPost__img--2{
  background-image:
    radial-gradient(520px 280px at 70% 35%, rgba(255,154,60,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    url("../img/past-2.jpg");
}

.mediaPost__img--3{
  background-image:
    radial-gradient(520px 320px at 30% 30%, rgba(255,106,0,.18), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    url("../img/past-3.jpg");
}
.mediaPost__body{padding:16px}
.metaLine{display:flex; gap:10px; align-items:center; margin-bottom:8px}
.meta{color:rgba(255,255,255,.62); font-size:13px}
.tag{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,106,0,.14);
  border:1px solid rgba(255,106,0,.30);
  color:rgba(255,154,60,.95);
  font-size:12px;
}

/* Gallery */
.gallery{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.gItem{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  min-height:160px;
  outline:1px solid var(--line);
  transition: transform .15s ease, outline-color .15s ease;
}
.gItem:hover{transform:translateY(-2px); outline-color:rgba(255,106,0,.34)}
.gItem:nth-child(1){grid-column:span 4}
.gItem:nth-child(2){grid-column:span 5}
.gItem:nth-child(3){grid-column:span 3}
.gItem:nth-child(4){grid-column:span 6}
.gItem:nth-child(5){grid-column:span 3}
.gItem:nth-child(6){grid-column:span 3}

.gItem__ph{position:absolute; inset:0}
.gItem__ph--1{background:radial-gradient(600px 320px at 30% 30%, rgba(255,106,0,.32), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.40))}
.gItem__ph--2{background:radial-gradient(650px 340px at 70% 35%, rgba(255,154,60,.30), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.40))}
.gItem__ph--3{background:radial-gradient(520px 340px at 40% 55%, rgba(255,61,0,.24), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.40))}
.gItem__ph--4{background:radial-gradient(700px 420px at 30% 35%, rgba(255,106,0,.26), transparent 70%), radial-gradient(600px 360px at 75% 70%, rgba(255,61,0,.18), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.40))}
.gItem__ph--5{background:radial-gradient(520px 320px at 60% 35%, rgba(255,154,60,.26), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.40))}
.gItem__ph--6{background:radial-gradient(520px 320px at 45% 50%, rgba(255,61,0,.20), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.40))}

/* Contact (NO FORM, single column) */
.contact{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
}
.contact__cards{display:grid; gap:10px; margin:14px 0}
.miniCard{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.miniCard__k{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.miniCard__v{margin-top:6px; color:rgba(255,255,255,.80); font-size:14px}

.socialRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.social{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
  font-size:12px;
}
.social:hover{border-color:rgba(255,106,0,.32)}

/* Footer */
.footer{
  padding:42px 0 22px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
}
.footer__logo{height:34px}
.footer__cols{display:flex; gap:34px; flex-wrap:wrap}
.footer__col a{display:block; color:rgba(255,255,255,.74); font-size:14px; padding:6px 0}
.footer__col a:hover{color:rgba(255,255,255,.92)}

.footer__bottom{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer__bottomInner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.toTop{
  width:42px; height:42px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.toTop:hover{border-color:rgba(255,106,0,.30)}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:100;
}
.lightbox[hidden]{display:none}
.lightbox__img{
  width:min(100%, 980px);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow);
  background:rgba(255,255,255,.03);
}
.lightbox__close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
  cursor:pointer; font-size:22px;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:110;
}
.modal[hidden]{display:none}
.modal__panel{
  width:min(720px, 100%);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,14,20,.92);
  box-shadow:var(--shadow);
  padding:18px;
  position:relative;
}
.modal__close{
  position:absolute;
  top:14px; right:14px;
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
  cursor:pointer; font-size:22px;
}
.list{margin:12px 0 14px; padding-left:18px; color:rgba(255,255,255,.78)}
.list li{margin:6px 0}

/* Reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1; transform:translateY(0)}

/* =========================================================
   BREAK SECTIONS — CLEAN (supports --break-img from your HTML)
   IMPORTANT: do NOT use background: ... here (it kills the image)
   ========================================================= */
.break{
  position:relative;
  height:52vh;
  min-height:320px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#050608;
}

/* Image comes from:
   <section class="break" style="--break-img:url('assets/img/break-1.jpg')">
*/
.break__bg{
  position:absolute;
  inset:-8%;
  background-image: var(--break-img); /* <-- KEY */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  filter:saturate(135%) contrast(1.08);
  transform:translateY(var(--break-shift, 0px)) scale(1.05);
  opacity:var(--break-opacity, 1);
  will-change:transform, opacity;
  z-index:0;
}

/* fallback glow WITHOUT overwriting the image */
.break__bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 420px at 30% 25%, rgba(255,106,0,.18), transparent 65%),
    radial-gradient(700px 520px at 70% 70%, rgba(255,61,0,.12), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.55));
  mix-blend-mode:screen;
  opacity:.8;
}

.break__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.70)),
    radial-gradient(900px 520px at 20% 40%, rgba(255,106,0,.16), transparent 70%),
    radial-gradient(900px 700px at 80% 35%, rgba(255,61,0,.12), transparent 70%);
  opacity:var(--break-opacity, 1);
  z-index:1;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .section__grid{grid-template-columns:1fr}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .footer__inner{flex-direction:column}
}

@media (max-width: 760px){
  /* Keep nav horizontal (wrap) */
  .nav__toggle{display:none !important;}

  /* soporta ambos: .nav__panel (viejo) y .nav__list (tu HTML actual) */
  .nav__panel,
  .nav__list{
    justify-content:flex-end;
    gap:10px 14px;
  }

  .nav__link{
    padding:8px 6px;
    font-size:13px;
  }

  .hero__stats{grid-template-columns:1fr}
  .eventCard{flex-direction:column; align-items:flex-start}
  .eventCard__date{width:100%}
  .ctaStrip{flex-direction:column; align-items:flex-start}
  .gallery{grid-template-columns:repeat(6, 1fr)}
  .gItem:nth-child(n){grid-column:span 6}
}

/* =========================================================
   NAV EMERGENCY FIX — SOLO para el menú (no rompe otros UL)
   ========================================================= */
.header .nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* aplica SOLO a la lista del menú */
.header .nav .nav__list,
.header .nav .nav__panel{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:14px 18px !important;

  align-items:center !important;
  justify-content:center !important;
}

.header .nav .nav__list li,
.header .nav .nav__panel li{
  margin:0 !important;
  padding:0 !important;
}

.header .nav .nav__list a,
.header .nav .nav__panel a{
  display:inline-flex !important;
  align-items:center !important;
  padding:10px 6px !important;
  font-size:14px !important;
  letter-spacing:.02em !important;
  color:rgba(255,255,255,.78) !important;
  white-space:nowrap !important;
  position:relative !important;
  text-decoration:none !important;
}

.header .nav .nav__list a::after,
.header .nav .nav__panel a::after{
  content:"" !important;
  position:absolute !important;
  left:6px !important; right:6px !important; bottom:6px !important;
  height:2px !important;
  background:linear-gradient(90deg, transparent, var(--orange), transparent) !important;
  transform:scaleX(0) !important;
  transition:.22s ease !important;
  opacity:.85 !important;
}

.header .nav .nav__list a:hover,
.header .nav .nav__panel a:hover{color:rgba(255,255,255,.96) !important;}

.header .nav .nav__list a:hover::after,
.header .nav .nav__panel a:hover::after{transform:scaleX(1) !important;}

.header .header__cta{margin-left:auto !important;}

@media (max-width:760px){
  .nav__toggle{display:none !important;}

  .header .nav .nav__list,
  .header .nav .nav__panel{
    justify-content:flex-end !important;
    gap:10px 14px !important;
  }

  .header .nav .nav__list a,
  .header .nav .nav__panel a{
    padding:8px 6px !important;
    font-size:13px !important;
  }
}

/* =========================================
   HERO CARD IMAGE — limpio (usa tu var --hero-card)
   ========================================= */
.heroCard__frame{ position:relative; }

.heroCard__img{
  position:absolute;
  inset:0;
  z-index:0;

  /* La foto real */
  background-image: var(--hero-card);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* look */
  transform:scale(1.02);
  filter:saturate(1.08) contrast(1.05);
}

/* efectos encima de la foto */
.heroCard__img::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(220px 260px at 50% 55%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(280px 280px at 50% 100%, rgba(255,106,0,.18), transparent 70%);
  pointer-events:none;
}

.heroCard__overlay{ position:absolute; inset:0; z-index:1; }
.heroCard__flare{ position:absolute; inset:-60px; z-index:2; pointer-events:none; }

/* =========================================
   ABOUT / MEDIA CARD — que NO se corte nunca
   (esto es lo que tú estás pidiendo)
   ========================================= */
.mediaCard__img{
  position:absolute;
  inset:0;

  /* si le pones una foto, se verá completa */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  /* por si sobra espacio alrededor (cuando sea vertical/horizontal rara) */
  background-color:#050608;
}

/* helpers opcionales (por si quieres forzar comportamiento) */
.img--contain{
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.img--cover{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ================================
   GALLERY THUMBS — USE REAL IMAGES
   (no cambia HTML, no rompe menú)
   ================================ */

.gItem__ph{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.05) contrast(1.05);
}

/* cada cuadro toma su imagen según el orden */
.gallery .gItem:nth-child(1) .gItem__ph{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    url("../img/gallery-1.jpg");
}

.gallery .gItem:nth-child(2) .gItem__ph{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    url("../img/gallery-2.jpg");
}

.gallery .gItem:nth-child(3) .gItem__ph{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    url("../img/gallery-3.jpg");
}

.gallery .gItem:nth-child(4) .gItem__ph{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    url("../img/gallery-4.jpg");
}

.gallery .gItem:nth-child(5) .gItem__ph{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    url("../img/gallery-5.jpg");
}

.gallery .gItem:nth-child(6) .gItem__ph{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    url("../img/gallery-6.jpg");
}

/* =========================================
   FOOTER LEGAL — CLEAN & CENTERED
   ========================================= */

.footer__bottomInner{
  justify-content:center;
}

.footer__legal{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.footer__copy{
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.55);
}

.footer__credit{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.40);
}

.footer__credit a{
  margin-left:4px;
  color:rgba(255,154,60,.85);
  text-decoration:none;
  transition:color .2s ease, text-shadow .2s ease;
}

.footer__credit a:hover{
  color:rgba(255,154,60,1);
  text-shadow:0 0 12px rgba(255,106,0,.45);
}
/* =========================================
   MOBILE HEADER — HAMBURGER CLEAN
   ========================================= */

.header--mobile{
  height:64px;
}

.header__inner{
  height:64px;
}

.header__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav__toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

.nav__toggle span{
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
}

/* Drawer */
.nav__drawer{
  position:fixed;
  inset:64px 0 0 0;
  background:rgba(5,6,8,.96);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  transform:translateY(-100%);
  transition:transform .35s ease;
  z-index:40;
}

.nav__drawer a{
  font-family:var(--h);
  font-size:20px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

.nav__drawer a:hover{
  color:var(--orange);
}

/* Estado abierto */
.nav__drawer.is-open{
  transform:translateY(0);
}

/* Desktop: mantiene tu nav normal */
@media (min-width: 980px){
  .nav__drawer{display:none;}
  .nav__toggle{display:none;}
}

/* ================================
   MOBILE HAMBURGER NAV (override)
   Pegar al FINAL del CSS
   ================================ */
@media (max-width: 760px){

  /* Header: una sola línea discreta */
  .header__inner{
    padding:10px 0;
    gap:10px;
  }

  /* Logo un poco más chico */
  .brand__logo{ height:34px; }

  /* Oculta CTA "Inscríbete" SOLO en móvil */
  .header__cta{ display:none !important; }

  /* Muestra el botón hamburguesa */
  .nav__toggle{
    display:inline-flex !important;
    margin-left:auto;
  }

  /* El contenedor nav ya no centra el UL */
  .header .nav{
    justify-content:flex-end !important;
  }

  /* IMPORTANTE: en móvil el UL debe ser panel desplegable */
  .header .nav ul{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    top:70px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:0 !important;
    padding:10px !important;
    margin:0 !important;

    border-radius:20px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:rgba(7,8,10,.92) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow:0 24px 80px rgba(0,0,0,.55) !important;

    /* oculto por default */
    opacity:0 !important;
    transform:translateY(-8px) scale(.98) !important;
    pointer-events:none !important;
    transition:opacity .18s ease, transform .18s ease !important;
    z-index:80 !important;
  }

  /* Estado abierto (se lo pondrá JS) */
  .header .nav ul.is-open{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
    pointer-events:auto !important;
  }

  /* Links dentro del panel */
  .header .nav a{
    padding:14px 14px !important;
    font-size:15px !important;
    border-radius:14px !important;
  }
  .header .nav a::after{ display:none !important; }

  .header .nav li + li{
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
}