/* ==========================================================
   SALSA MAMBA — The Art of Movement
   ========================================================== */

:root{
  --ivory: #F3F0EA;
  --ivory-light: #F8F6F1;
  --black: #111111;
  --black-deep: #080808;
  --gray: #77736D;
  --gold: #B5965A;
  --gold-light: #D2BC85;
  --accent: #C85A45;

  /* tokens de tema (claro por defecto) */
  --paper: var(--ivory);
  --paper-alt: var(--ivory-light);
  --paper-rgb: 243,240,234;
  --ink: var(--black);
  --ink-rgb: 17,17,17;
  --ink-soft: var(--gray);

  --font-display: 'DM Serif Display', serif;
  --font-script: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;

  --container: 1360px;
  --gutter: clamp(24px, 5vw, 96px);
  --ease: cubic-bezier(.25,.1,.25,1);
}

html[data-theme="dark"]{
  --paper: #131211;
  --paper-alt: #1b1a18;
  --paper-rgb: 19,18,17;
  --ink: #F3F0EA;
  --ink-rgb: 243,240,234;
  --ink-soft: #A39C90;
}
html[data-theme="dark"] body{ background: var(--paper); }
html{ transition: none; }
body, .header, .mobile-menu{ transition: background .4s var(--ease), color .4s var(--ease); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1,h2,h3{ font-family: var(--font-display); font-weight:400; margin:0; letter-spacing:-.01em; }
p{ margin:0; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.eyebrow{
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 18px;
}
.eyebrow--light{ color: var(--gold-light); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 17px 34px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 2px;
  transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn--gold{ background: var(--gold); color: var(--black-deep); }
.btn--gold:hover{ background: var(--gold-light); transform: translateY(-2px); }
.btn--ghost{ background:transparent; color: var(--ink); padding: 17px 8px; }
.btn--ghost .play-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--ink);
  font-size: 11px;
}
.btn--outline{ border: 1px solid var(--ink); color: var(--ink); padding: 13px 26px; }
.btn--outline:hover{ background: var(--ink); color: var(--paper); }
.btn--outline.btn--light{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn--outline.btn--light:hover{ background:#fff; color:#111; }
.btn--small{ padding: 11px 22px; font-size: 13px; }
.btn--large{ padding: 21px 46px; font-size: 15.5px; }

.link-arrow{
  display:inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  position: relative;
  padding-bottom: 3px;
}
.link-arrow::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.link-arrow:hover::after{ transform: scaleX(1); transform-origin: left; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================
   HEADER
   ========================================================== */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease);
}
.header.is-scrolled{
  background: rgba(var(--paper-rgb),.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb),.06);
}
.header__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.header.is-scrolled .header__inner{ padding-top:18px; padding-bottom:18px; }

.logo{ display:flex; align-items:center; gap:10px; color: var(--ink); }
.logo__img{ height: 38px; width:auto; display:block; filter: invert(1); transition: filter .4s var(--ease); }
html[data-theme="dark"] .logo__img{ filter: none; }
.logo__img--fixed-light{ filter: none !important; }

.nav{ display:flex; gap: 34px; }
.nav a{ font-size: 13.5px; font-weight: 500; letter-spacing: .01em; position: relative; padding: 4px 0; }
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold);
  transition: width .35s var(--ease);
}
.nav a:hover::after{ width:100%; }

.header__actions{ display:flex; align-items:center; gap:16px; }
.icon-toggle{
  width: 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--ink); border: 1px solid rgba(var(--ink-rgb),.18); flex-shrink:0;
  transition: border-color .3s, color .3s;
}
.icon-toggle:hover{ border-color: var(--gold); color: var(--gold); }
.icon-toggle svg{ width:17px; height:17px; }
.icon-toggle__moon{ display:none; }
html[data-theme="dark"] .icon-toggle__sun{ display:none; }
html[data-theme="dark"] .icon-toggle__moon{ display:block; }

.lang-toggle{
  display:flex; align-items:center; gap:4px;
  font-size: 12px; font-weight: 600; letter-spacing:.03em; color: var(--ink-soft);
  border: 1px solid rgba(var(--ink-rgb),.18); border-radius: 20px; padding: 7px 12px;
  transition: border-color .3s;
}
.lang-toggle:hover{ border-color: var(--gold); }
.lang-toggle i{ font-style:normal; opacity:.4; }
.lang-toggle span{ transition: color .3s, font-weight .3s; }
.lang-toggle[data-lang="es"] span[data-lang-opt="es"],
.lang-toggle[data-lang="en"] span[data-lang-opt="en"]{ color: var(--gold); font-weight:700; }
.mobile-menu__controls{ display:flex; align-items:center; gap: 14px; margin: 6px 0 8px; }

.burger{ display:none; flex-direction:column; gap:6px; width: 26px; }
.burger span{ display:block; height:1px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; top: 0;
  background: var(--paper-alt);
  display:flex; flex-direction:column; justify-content:center; gap:44px;
  padding: 0 var(--gutter);
  transform: translateY(-100%);
  opacity:0;
  transition: transform .5s var(--ease), opacity .4s;
  z-index: 150;
}
.mobile-menu.is-open{ transform: translateY(0); opacity:1; }
.mobile-menu nav{ display:flex; flex-direction:column; gap: 22px; }
.mobile-menu nav a{ font-family: var(--font-display); font-size: 34px; }
.mobile-menu .btn{ align-self:flex-start; }

/* ==========================================================
   HERO
   ========================================================== */
.hero{ position:relative; min-height: 100vh; display:flex; flex-direction:column; justify-content:center; padding: 150px var(--gutter) 60px; }
.hero__grid{
  max-width: var(--container); margin: 0 auto; width:100%;
  display:grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items:center;
}
.eyebrow{ text-transform: none; }
.hero__title{ font-size: clamp(42px, 5vw, 66px); line-height: 1.06; margin-bottom: 26px; }
.text-gold{ color: var(--gold); }
.hero__text{ max-width: 380px; color: var(--ink-soft); font-size: 16.5px; margin-bottom: 40px; }
.hero__actions{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; }

.hero__media{ position:relative; }
.hero__blob{
  position:absolute; inset: -6% -10% -6% 4%;
  border-radius: 50%;
  z-index:0;
  will-change: transform;
}
.hero__blob--1{
  background: radial-gradient(circle at 60% 40%, rgba(181,150,90,.22), transparent 65%);
  animation: heroDrift1 17s ease-in-out infinite;
}
.hero__blob--2{
  background: radial-gradient(circle at 35% 65%, rgba(200,90,69,.12), transparent 60%);
  animation: heroDrift2 21s ease-in-out infinite;
}
@keyframes heroDrift1{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(3%, -4%) scale(1.1); }
}
@keyframes heroDrift2{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-4%, 3%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce){
  .hero__blob{ animation: none; }
}
.hero__photo{ position:relative; z-index:1; width:100%; aspect-ratio: 4/5; object-fit:cover; box-shadow: 0 40px 70px -30px rgba(17,17,17,.35); }.hero__index{
  position:absolute; right: -34px; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; display:flex; align-items:center; gap:10px;
  font-size: 12px; letter-spacing:.05em; color: var(--ink-soft); z-index:2;
}
.hero__index i{ display:block; width:1px; height:34px; background: var(--ink-soft); opacity:.5; }
.hero__scroll{ position:absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width:1px; height: 46px; background: rgba(var(--ink-rgb),.18); overflow:hidden; }
.hero__scroll span{ position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold); animation: scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

@media (max-width: 980px){
  .hero{ padding-top: 130px; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ order:-1; margin: 0 -8px 8px; }
  .hero__index{ display:none; }
  .hero__text{ max-width:none; }
}

/* ==========================================================
   MANIFIESTO
   ========================================================== */
.manifiesto{
  max-width: var(--container); margin: 150px auto; padding: 0 var(--gutter);
  display:grid; grid-template-columns: .82fr 1fr; gap: 90px; align-items:center;
}
.manifiesto__photo .img-ph{ width:100%; aspect-ratio: 4/5; }
.manifiesto__photo img{ width:100%; aspect-ratio: 4/5; object-fit:cover; filter: grayscale(1) contrast(1.05); }
.manifiesto__content h2{ font-size: clamp(30px, 3.4vw, 42px); line-height:1.18; margin: 0 0 22px; max-width: 460px; }
.manifiesto__content p{ color: var(--ink-soft); font-size: 16px; max-width: 420px; margin-bottom: 6px; }
.manifiesto__script{ font-family: var(--font-script); font-style: italic; font-size: 30px; color: var(--gold); margin-top: 30px !important; }

@media (max-width: 900px){
  .manifiesto{ grid-template-columns:1fr; gap: 40px; margin: 90px auto; }
}

/* ==========================================================
   EXPERIENCIA
   ========================================================== */
.experiencia{ background: var(--black-deep); color: var(--ivory); padding: 110px 0 0; }
.experiencia__eyebrow{
  text-align:center; text-transform: uppercase; font-size: 12px; letter-spacing: .18em;
  color: var(--gold-light); margin: 0 0 60px;
}
.experiencia__grid{ display:grid; grid-template-columns: repeat(3, 1fr); }
.experiencia__col{
  position:relative; min-height: 480px; padding: 40px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.experiencia__col::before{
  content:''; position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  transform: scale(1.06);
  transition: transform 1.1s var(--ease), filter .6s;
  filter: grayscale(.3) brightness(.55);
}
.experiencia__col::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,8,8,0) 30%, rgba(8,8,8,.85) 100%); }
.experiencia__col:hover::before{ transform: scale(1.13); filter: grayscale(0) brightness(.62); }
.experiencia__num{ position:relative; z-index:1; font-family: var(--font-display); font-size: 60px; color: var(--gold); line-height:1; margin-bottom: 10px; }
.experiencia__col h3{ position:relative; z-index:1; font-size: 24px; margin-bottom: 10px; }
.experiencia__col p{ position:relative; z-index:1; color: rgba(243,240,234,.75); max-width: 260px; font-size: 14.5px; }
.experiencia__col + .experiencia__col{ border-left: 1px solid rgba(243,240,234,.08); }

@media (max-width: 900px){
  .experiencia__grid{ grid-template-columns: 1fr; }
  .experiencia__col{ min-height: 380px; }
  .experiencia__col + .experiencia__col{ border-left:none; border-top: 1px solid rgba(243,240,234,.08); }
}

/* ==========================================================
   RITMOS
   ========================================================== */
.ritmos{
  max-width: var(--container); margin: 0 auto; padding: 150px var(--gutter);
  display:grid; grid-template-columns: .82fr 1fr; gap: 70px; align-items:center;
}
.ritmos__item{
  display:flex; align-items:baseline; gap: 18px;
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px);
  color: rgba(var(--ink-rgb),.28);
  padding: 12px 0;
  text-align:left; width:100%;
  transition: color .35s var(--ease);
}
.ritmos__item span{ font-family: var(--font-body); font-size: 13px; color: var(--gold); font-weight:600; }
.ritmos__item:hover, .ritmos__item.is-active{ color: var(--ink); }
.ritmos__media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; transition: opacity .5s var(--ease); }
.ritmos__media{ position:relative; overflow:hidden; }

@media (max-width: 900px){
  .ritmos{ grid-template-columns: 1fr; padding: 90px var(--gutter); gap:36px; }
  .ritmos__media{ order:-1; }
}

/* ==========================================================
   NIVELES
   ========================================================== */
.niveles{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 150px; text-align:center; }
.niveles__title{ font-size: clamp(28px,3.2vw,38px); margin-bottom: 64px; }
.niveles__grid{ display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items:start; gap: 34px; }
.niveles__col{ padding: 0 10px; }
.niveles__icon{ width: 42px; height:42px; color: var(--gold); margin: 0 auto 26px; }
.niveles__col h3{ font-size: 21px; margin-bottom: 12px; }
.niveles__col p{ color: var(--ink-soft); font-size: 14.5px; margin-bottom: 26px; max-width: 260px; margin-left:auto; margin-right:auto; }
.niveles__sep{ width:1px; align-self:stretch; background: rgba(var(--ink-rgb),.1); }

@media (max-width: 860px){
  .niveles__grid{ grid-template-columns: 1fr; gap: 50px; }
  .niveles__sep{ display:none; }
}

/* ==========================================================
   HORARIOS
   ========================================================== */
.horarios{ background: var(--black-deep); color: var(--ivory); padding: 120px var(--gutter); }
.horarios .eyebrow{ text-align:center; }
.horarios__days{ display:flex; justify-content:center; gap: 6px; flex-wrap:wrap; margin-bottom: 60px; }
.horarios__days button{
  padding: 12px 22px; font-size: 13px; font-weight:500; letter-spacing:.03em;
  color: rgba(243,240,234,.55); border: 1px solid rgba(243,240,234,.14);
  transition: all .3s var(--ease);
}
.horarios__days button.is-active{ background: var(--gold); color: var(--black-deep); border-color: var(--gold); }
.horarios__days button:hover:not(.is-active){ border-color: rgba(243,240,234,.4); color: var(--ivory); }

.horarios__grid{ max-width: var(--container); margin: 0 auto; display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(243,240,234,.1); margin-bottom: 50px; }
.horario-slot{ background: var(--black-deep); padding: 34px 26px; }
.horario-slot__time{ font-family: var(--font-display); font-size: 26px; color: var(--gold-light); margin-bottom: 16px; display:block; }
.horario-slot h4{ font-family: var(--font-body); font-weight:600; font-size: 15px; margin-bottom: 8px; letter-spacing: .01em; }
.horario-slot p{ font-size: 13px; color: rgba(243,240,234,.5); margin-bottom: 20px; }
.horarios .link-arrow{ display:block; text-align:center; }

.horarios__private{
  max-width: var(--container); margin: 60px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  padding: 34px 40px; border: 1px solid rgba(243,240,234,.14);
}
.horarios__private h4{ font-family: var(--font-display); font-weight:400; font-size: 21px; color: var(--ivory); margin: 0 0 6px; }
.horarios__private p{ color: rgba(243,240,234,.55); font-size: 14px; margin:0; max-width: 380px; }
.horarios__private .btn{ flex-shrink:0; }

@media (max-width: 900px){ .horarios__grid{ grid-template-columns: 1fr 1fr; } .horarios__private{ padding: 28px; } }
@media (max-width: 560px){ .horarios__grid{ grid-template-columns: 1fr; } }

/* ==========================================================
   PROFESORES
   ========================================================== */
.profesores{ max-width: var(--container); margin: 0 auto; padding: 150px var(--gutter); }
.profesores .eyebrow{ text-align:center; }
.profesores__card{
  position:relative;
  display:grid; grid-template-columns: .8fr 1fr; align-items:center; gap: 0;
  background: var(--black-deep); overflow:hidden;
}
.profesores__photo{ height: 100%; }
.profesores__photo img{ width:100%; height:100%; min-height: 440px; object-fit:cover; filter: grayscale(.15); }.profesores__info{ padding: 60px; color: var(--ivory); }
.profesores__role{ text-transform: uppercase; font-size: 11px; letter-spacing: .12em; color: var(--gold); margin: 0 0 14px; }
.profesores__info h3{ font-size: clamp(30px,3.4vw,44px); margin-bottom: 12px; }
.profesores__spec{ color: var(--gold-light); font-size: 13.5px; letter-spacing:.03em; margin-bottom: 22px; }
.profesores__info p:not(.profesores__spec){ color: rgba(243,240,234,.65); max-width: 360px; margin-bottom: 28px; }
.profesores__nav{ position:absolute; bottom: 30px; right: 34px; display:flex; gap:10px; }
.profesores__nav button{ width: 42px; height:42px; border:1px solid rgba(243,240,234,.3); border-radius:50%; color:#fff; transition: all .3s; }
.profesores__nav button:hover{ background: var(--gold); border-color: var(--gold); color: var(--black-deep); }

/* ---------------- pies bailando (fondo animado) ---------------- */
.footsteps{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.footstep{
  position:absolute; width: 26px; height:auto; fill: var(--gold);
  opacity: .07;
  animation: stepPulse 3.6s ease-in-out infinite;
  animation-delay: calc(var(--d) * .45s);
}
.footstep--l{ transform: scaleX(-1) rotate(6deg); }
.footstep--r{ transform: rotate(-6deg); }
@keyframes stepPulse{
  0%, 100%{ opacity: .05; }
  50%{ opacity: .22; }
}
.profesores__photo, .profesores__info{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .footstep{ animation: none; opacity: .1; }
}

@media (max-width: 860px){
  .profesores{ padding: 90px var(--gutter); }
  .profesores__card{ grid-template-columns: 1fr; }
  .profesores__photo img{ min-height: 320px; }
  .profesores__info{ padding: 40px 34px 70px; }
}

/* ---------------- ÁREA DE PROFESORES (login) ---------------- */
.profesores__staff{ max-width: var(--container); margin: 50px auto 0; }
.staff-toggle{ font-size: 14px; }

.staff-panel{
  margin-top: 26px;
  border: 1px solid rgba(var(--ink-rgb),.12);
  padding: 40px;
  background: var(--paper-alt);
}
.staff-panel__login label{ display:block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; letter-spacing:.02em; }
.staff-panel__row{ display:flex; gap: 10px; max-width: 380px; flex-wrap:wrap; }
.staff-panel__row input{
  flex:1; min-width: 180px; padding: 13px 16px; font-family: var(--font-body); font-size: 14px;
  border: 1px solid rgba(var(--ink-rgb),.2); background: var(--paper); color: var(--ink);
}
.staff-panel__row input:focus{ outline: 2px solid var(--gold); outline-offset: 1px; }
.staff-panel__error{ color: var(--accent); font-size: 13px; margin-top: 12px; }

.staff-panel__content h4{ font-size: 24px; margin-bottom: 10px; }
.staff-panel__content > p{ color: var(--ink-soft); max-width: 520px; margin-bottom: 30px; font-size: 14.5px; }
.staff-videos{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 32px; }
.staff-video h5{ font-family: var(--font-display); font-weight:400; font-size: 18px; margin: 0 0 8px; }
.staff-video p{ color: var(--ink-soft); font-size: 13.5px; margin-bottom: 14px; }
.staff-video__frame{ position:relative; width:100%; aspect-ratio: 16/9; background:#000; }
.staff-video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.staff-video__empty{
  aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center;
  border: 1px dashed rgba(var(--ink-rgb),.2); color: var(--ink-soft); font-size: 12.5px; letter-spacing:.03em;
}

@media (max-width: 600px){ .staff-panel{ padding: 28px 22px; } }

/* ==========================================================
   EVENTOS
   ========================================================== */
.eventos{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 150px; }
.eventos__head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 46px; }
.eventos__head .eyebrow{ margin:0; }

.evento-feature{
  display:grid; grid-template-columns: .62fr 1fr; gap: 0;
  background: var(--black-deep); overflow:hidden;
}
.evento-feature__poster{ height:100%; }
.evento-feature__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.evento-feature__info{ padding: 56px; color: #fff; display:flex; flex-direction:column; justify-content:center; }
.evento-feature__info h3{ font-size: clamp(28px,3vw,38px); margin-bottom: 10px; }
.evento-feature__subtitle{ color: var(--gold-light); font-size: 14.5px; margin-bottom: 18px; }
.evento-feature__info > p{ color: rgba(255,255,255,.65); max-width: 420px; margin-bottom: 26px; }
.evento-feature__details{ list-style:none; margin: 0 0 32px; padding:0; display:flex; flex-direction:column; gap: 10px; }
.evento-feature__details li{ font-size: 14px; color: rgba(255,255,255,.85); padding-left: 18px; position:relative; }
.evento-feature__details li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:1px; background: var(--gold); }

@media (max-width: 860px){
  .evento-feature{ grid-template-columns: 1fr; }
  .evento-feature__poster{ max-height: 420px; }
  .evento-feature__info{ padding: 34px 30px 46px; }
}
@media (max-width: 620px){
  .eventos__head{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ==========================================================
   GALERÍA
   ========================================================== */
.galeria{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 150px; }
.galeria .eyebrow{ text-align:center; }
.galeria__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 10px; margin-bottom: 40px;
}
.galeria__item{ position:relative; overflow:hidden; }
.galeria__item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease), filter .5s; filter: grayscale(.25); }
.galeria__item:hover img{ transform: scale(1.06); filter: grayscale(0); }
.galeria__item--wide{ grid-column: span 2; }
.galeria__item--play{ grid-row: span 2; }
.play-circle{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  background: rgba(243,240,234,.92); display:flex; align-items:center; justify-content:center;
  font-size: 15px; color: var(--black); transition: transform .3s var(--ease);
}
.galeria__item--play:hover .play-circle{ transform: scale(1.1); }
.galeria .link-arrow{ display:block; text-align:center; }

@media (max-width: 900px){
  .galeria__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .galeria__item--wide{ grid-column: span 2; }
}

/* ==========================================================
   CTA FINAL
   ========================================================== */
.cta-final{ position:relative; min-height: 78vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 60px var(--gutter); overflow:hidden; }
.cta-final::before{ content:''; position:absolute; inset:0; background: var(--bg) center/cover; }
.cta-final::after{ content:''; position:absolute; inset:0; background: rgba(8,8,8,.62); }
.cta-final__inner{ position:relative; z-index:1; color:#fff; max-width: 640px; }
.cta-final__inner h2{ font-size: clamp(34px,5vw,58px); line-height:1.1; margin-bottom: 22px; }
.cta-final__inner p{ font-size: 17px; color: rgba(255,255,255,.75); margin-bottom: 40px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{ background: var(--black-deep); color: var(--ivory); padding: 100px var(--gutter) 30px; }
.footer__top{ max-width: var(--container); margin: 0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 70px; border-bottom: 1px solid rgba(243,240,234,.08); }
.footer__brand .logo__img{ height: 44px; }
.footer__tag{ margin-top: 28px; color: rgba(243,240,234,.55); font-size: 14px; line-height:1.7; }
.footer__col h4{ font-family: var(--font-body); font-weight:600; font-size: 13px; letter-spacing:.04em; color: var(--gold-light); margin-bottom: 20px; }
.footer__col a, .footer__col p{ display:block; color: rgba(243,240,234,.6); font-size: 14px; margin-bottom: 12px; }
.footer__col a:hover{ color: var(--gold-light); }
.footer__map{ margin-top: 16px; border: 1px solid rgba(243,240,234,.14); }
.footer__map iframe{ display:block; width:100%; height: 160px; border:0; filter: grayscale(.25) contrast(1.05); }
.footer__social{ display:flex; gap: 12px; }
.footer__social a{ width: 38px; height:38px; border:1px solid rgba(243,240,234,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer__social svg{ width:17px; height:17px; }
.footer__social a:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.footer__bottom{ max-width: var(--container); margin: 0 auto; display:flex; justify-content:space-between; align-items:center; padding-top: 30px; flex-wrap:wrap; gap: 14px; }
.footer__bottom p{ color: rgba(243,240,234,.4); font-size: 12.5px; }
.footer__bottom div{ display:flex; gap: 24px; }
.footer__bottom a{ color: rgba(243,240,234,.4); font-size: 12.5px; }
.footer__bottom a:hover{ color: var(--gold-light); }

@media (max-width: 900px){
  .footer__top{ grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
}

/* ==========================================================
   WHATSAPP FLOTANTE
   ========================================================== */
.whatsapp-btn{
  position: fixed; right: 28px; bottom: 28px; z-index: 180;
  width: 58px; height: 58px; border-radius: 50%;
  background: #1E1E1E; color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.4);
}
.whatsapp-btn svg{ width: 26px; height:26px; }
.whatsapp-btn::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border: 1px solid rgba(30,30,30,.5);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(1); opacity:.6; }
  100%{ transform: scale(1.7); opacity:0; }
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.lightbox{
  position: fixed; inset:0; z-index: 300; background: rgba(8,8,8,.94);
  display:flex; align-items:center; justify-content:center; padding: 40px;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width: 90vw; max-height: 86vh; object-fit:contain; }
.lightbox__close{ position:absolute; top: 26px; right: 32px; color:#fff; font-size: 20px; width:44px; height:44px; }

/* ==========================================================
   MODAL: PRÓXIMO EVENTO
   ========================================================== */
.promo-modal{
  position: fixed; inset:0; z-index: 400;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.promo-modal.is-open{ opacity:1; visibility:visible; transition: opacity .4s var(--ease); }
.promo-modal__backdrop{
  position:absolute; inset:0; background: rgba(6,6,6,.72); backdrop-filter: blur(4px);
}
.promo-modal__card{
  position:relative; z-index:1;
  display:grid; grid-template-columns: .78fr 1fr;
  max-width: 860px; width:100%; max-height: 88vh;
  background: var(--black-deep); color: var(--ivory);
  overflow: hidden;
  transform: scale(.94) translateY(10px);
  transition: transform .45s var(--ease);
}
.promo-modal.is-open .promo-modal__card{ transform: scale(1) translateY(0); }
.promo-modal__poster{ height:100%; max-height: 88vh; overflow:hidden; }
.promo-modal__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-modal__info{ padding: 44px 42px; overflow-y:auto; }
.promo-modal__info h3{ font-size: clamp(24px,3vw,32px); margin: 6px 0 12px; }
.promo-modal__subtitle{ color: var(--gold-light); font-size: 13.5px; margin-bottom: 20px; }
.promo-modal__info .evento-feature__details{ margin-bottom: 28px; }
.promo-modal__close{
  position:absolute; top: 18px; right: 18px; z-index:2;
  width: 38px; height:38px; border-radius:50%;
  background: rgba(8,8,8,.5); color:#fff; font-size: 15px;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s;
}
.promo-modal__close:hover{ background: rgba(181,150,90,.85); }

@media (max-width: 760px){
  .promo-modal__card{ grid-template-columns: 1fr; max-height: 92vh; overflow-y:auto; }
  .promo-modal__poster{ max-height: 260px; }
  .promo-modal__info{ padding: 32px 26px 40px; overflow-y: visible; }
}
@media (prefers-reduced-motion: reduce){
  .promo-modal, .promo-modal__card{ transition: opacity .01s linear; transform:none; }
}
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:flex; }
  #themeToggle, #langToggle{ display:none; }
}