/* ═══════════════════════════════════════════════════════════
   VWT · EVENTOS · el backstage
   La página es la mesa de control de un evento: negro absoluto y
   un foco de luz que sigue al cursor. Sin fotos: la luz es la
   imagen. Cuatro tipos de evento abren a tamaño de pantalla y
   cada uno tiene su color; al pasar el cursor, la página entera
   cambia de piel.
   Se respetan: navbar, footer, Poppins y los colores del sitio.
   ═══════════════════════════════════════════════════════════ */

.ev{
  --ev-pad: clamp(1.4rem, 5vw, 6rem);
  --ev-max: calc(1400px * var(--k, 1));
  --ev-sec: clamp(5rem, calc(12 * var(--1vh)), 9rem);
  --ev-t: .9s;
  --ev-e: cubic-bezier(.22,1,.36,1);
  --ev-negro: #0B0708;
  --ev-vino: #6B1D2A;
  --ev-acc: #AC3749;
  --ev-crema: #EDE6DA;
  --ev-c: var(--ev-negro);
  font-family: 'Poppins', sans-serif;
  background: var(--ev-negro); color: #fff;
  position: relative; overflow: hidden;
}
.ev-in{ max-width: var(--ev-max); margin-inline: auto; padding-inline: var(--ev-pad) }
.ev-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ── revelado ── */
.ev-rv{ opacity: 0; transform: translateY(26px); transition: opacity var(--ev-t) var(--ev-e), transform var(--ev-t) var(--ev-e) }
.ev-rv[data-d="1"]{ transition-delay: .08s } .ev-rv[data-d="2"]{ transition-delay: .16s }
.ev-rv[data-d="3"]{ transition-delay: .24s } .ev-rv[data-d="4"]{ transition-delay: .32s }
.ev-rv.on{ opacity: 1; transform: none }

/* ═══════════════════════════════════════════════════════════
   1 · EL MENÚ · cuatro tipos a tamaño de pantalla
   El fondo de la página toma el color del tipo señalado.
   ═══════════════════════════════════════════════════════════ */
.ev-menu{
  position: relative; min-height: calc(100 * var(--1vh));
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h, 62px) + 2rem) var(--ev-pad) 4rem;
  background: var(--ev-c); transition: background-color 1s var(--ev-e);
}
.ev-menu-l{ list-style: none; margin: 0; padding: 0; max-width: var(--ev-max); width: 100% }
.ev-m a{
  display: grid; grid-template-columns: clamp(2.4rem,4vw,4.5rem) 1fr; column-gap: calc(32.0px * var(--k, 1)); align-items: baseline;
  padding: clamp(.5rem,calc(1.4 * var(--1vh)),1.1rem) 0; text-decoration: none; color: inherit;
  border-top: 1px solid rgba(255,255,255,.14);
}
.ev-m:last-child a{ border-bottom: 1px solid rgba(255,255,255,.14) }
.ev-m-n{ font-size: .82rem; font-weight: 700; letter-spacing: .06em; opacity: .55 }
.ev-m-t{
  font-size: calc(176.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.07em; line-height: .86;
  text-transform: uppercase; opacity: .38;
  transition: opacity .6s var(--ev-e), transform .9s var(--ev-e), letter-spacing .9s var(--ev-e);
}
.ev-m-s{
  grid-column: 2; font-size: calc(17.6px * var(--k, 1)); font-weight: 300; opacity: 0;
  transform: translateY(-6px); transition: opacity .6s var(--ev-e), transform .6s var(--ev-e);
}
.ev-m.is-on .ev-m-t, .ev-m a:focus-visible .ev-m-t{ opacity: 1; transform: translateX(.08em); letter-spacing: -.06em }
.ev-m.is-on .ev-m-s, .ev-m a:focus-visible .ev-m-s{ opacity: .9; transform: none }
.ev-m a:focus-visible{ outline: none }
.ev-menu-p{ margin: 2.4rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .45 }
/* piel clara: casamientos */
.ev-menu.piel-clara{ color: var(--ev-negro) }
.ev-menu.piel-clara .ev-m a{ border-color: rgba(11,7,8,.16) }
.ev-menu.piel-clara .ev-m-t{ color: var(--ev-negro) }

/* ═══════════════════════════════════════════════════════════
   2 · EL ROL
   ═══════════════════════════════════════════════════════════ */
.ev-rol{ padding: var(--ev-sec) 0; background: var(--ev-negro) }
.ev-h{
  margin: 0; font-size: calc(128.0px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.065em; line-height: .9; max-width: 14ch;
}
.ev-rol-h{ font-size: calc(153.6px * var(--k, 1))}
.ev-p{
  margin: clamp(1.4rem,3vw,2.2rem) 0 0; max-width: 44ch;
  font-size: calc(24.0px * var(--k, 1)); line-height: 1.5; font-weight: 300; letter-spacing: -.015em; opacity: .85;
}
.ev-k{ margin: 0 0 clamp(1rem,2vw,1.4rem); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6 }

/* ═══════════════════════════════════════════════════════════
   3–6 · LOS CUATRO TIPOS · cada uno en su color
   ═══════════════════════════════════════════════════════════ */
.ev-tipo{ padding: var(--ev-sec) 0; background: var(--ev-c); color: #fff; scroll-margin-top: var(--nav-h, 62px) }
.ev-tipo[data-tipo="casa"]{ color: var(--ev-negro) }
.ev-lista{
  list-style: none; margin: clamp(2.6rem,5vw,4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: calc(64.0px * var(--k, 1));
  border-top: 1px solid currentColor;
}
.ev-lista li{
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: baseline;
  padding: clamp(1rem,2vw,1.4rem) 0; border-bottom: 1px solid rgba(255,255,255,.22);
  font-size: calc(21.6px * var(--k, 1)); font-weight: 300; letter-spacing: -.015em; line-height: 1.35;
}
.ev-tipo[data-tipo="casa"] .ev-lista li{ border-color: rgba(11,7,8,.2) }
.ev-lista li span{ font-size: .8rem; font-weight: 700; letter-spacing: .06em; opacity: .6; font-variant-numeric: tabular-nums }
/* el texto del tipo negro se ve bajo el foco: opaco de base, para que no dependa de él */
.ev-tipo[data-tipo="lanz"] .ev-lista li{ border-color: rgba(255,255,255,.14) }

/* ═══════════════════════════════════════════════════════════
   7 · EL RIDER · lista técnica, sin adornos
   ═══════════════════════════════════════════════════════════ */
.ev-rider{ padding: var(--ev-sec) 0; background: var(--ev-negro) }
.ev-rider-l{
  list-style: none; margin: clamp(2.6rem,5vw,4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 clamp(2rem,4vw,4rem);
  border-top: 1px solid rgba(255,255,255,.22);
}
.ev-rider-l li{
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: baseline;
  padding: clamp(.9rem,1.8vw,1.2rem) 0; border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: calc(18.4px * var(--k, 1)); font-weight: 300; line-height: 1.35;
}
.ev-rider-l li span{ font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--ev-acc); font-variant-numeric: tabular-nums }

/* ═══════════════════════════════════════════════════════════
   8 · CIERRE · dos palabras enormes
   ═══════════════════════════════════════════════════════════ */
.ev-fin{ padding: var(--ev-sec) 0 calc(var(--ev-sec) * 1.2); background: var(--ev-negro) }
.ev-cta{
  display: flex; align-items: baseline; gap: .3em; text-decoration: none;
  color: #fff !important; -webkit-text-fill-color: #fff;
  font-size: calc(200.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.07em; line-height: .9;
  transition: color .6s var(--ev-e);
}
.ev-cta i{ font-style: normal; font-size: .55em; transition: transform .8s var(--ev-e) }
.ev-cta:hover{ color: var(--ev-acc) !important; -webkit-text-fill-color: var(--ev-acc) }
.ev-cta:hover i{ transform: translateX(.3em) }

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .ev-lista, .ev-rider-l{ grid-template-columns: 1fr }
  .ev-m-t{ font-size: calc(96.0px * var(--k, 1))}
  .ev-m.is-on .ev-m-t{ transform: none }
  .ev-menu-p{ display: none }
}
@media (hover: none){
}
@media (prefers-reduced-motion: reduce){
  .ev-rv{ opacity: 1; transform: none; transition: none }
  .ev-menu, .ev-m-t, .ev-m-s{ transition: none }
}

/* ═══════════════════════════════════════════════════════════
   MÁS LENGUAJE DE AGENCIA
   1 · Letras huecas en el menú: cada tipo se dibuja solo con el
       contorno y se rellena al señalarlo.
   2 · Marca de agua: el número del tipo, gigante y hueco, detrás
       del bloque, desplazándose a otra velocidad con el scroll.
   3 · Indicador lateral: un punto por tipo, en su color, que se
       enciende al entrar en su sección.
   ═══════════════════════════════════════════════════════════ */
.ev-m-t{
  opacity: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.55);
  transition: color .6s var(--ev-e), -webkit-text-stroke-color .6s var(--ev-e), transform .9s var(--ev-e), letter-spacing .9s var(--ev-e);
}
.ev-m.is-on .ev-m-t, .ev-m a:focus-visible .ev-m-t{ color: #fff; -webkit-text-stroke-color: #fff }
.ev-menu.piel-clara .ev-m-t{ -webkit-text-stroke-color: rgba(11,7,8,.5); color: transparent }
.ev-menu.piel-clara .ev-m.is-on .ev-m-t{ color: var(--ev-negro); -webkit-text-stroke-color: var(--ev-negro) }
.ev-menu.piel-clara .ev-m-n, .ev-menu.piel-clara .ev-m-s, .ev-menu.piel-clara .ev-menu-p{ color: var(--ev-negro) }

.ev-tipo{ position: relative; overflow: hidden }
.ev-agua{
  position: absolute; right: -.05em; top: 50%; z-index: 0; pointer-events: none;
  font-size: calc(736.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.08em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.14);
  transform: translate(0, -50%); will-change: transform;
}
.ev-tipo[data-tipo="casa"] .ev-agua{ -webkit-text-stroke-color: rgba(11,7,8,.12) }
.ev-tipo .ev-in{ position: relative; z-index: 1 }

.ev-lado{
  position: fixed; right: calc(25.6px * var(--k, 1)); top: 50%; transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; gap: .8rem;
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ev-e);
}
.ev-lado.visible{ opacity: 1; pointer-events: auto }
.ev-lado a{
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.55) !important; -webkit-text-fill-color: rgba(255,255,255,.55);
  transition: color .5s var(--ev-e);
}
.ev-lado a i{ width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .5s var(--ev-e), transform .5s var(--ev-e) }
.ev-lado a.is-on{ color: #fff !important; -webkit-text-fill-color: #fff }
.ev-lado a.is-on i{ background: currentColor; transform: scale(1.3) }
.ev-lado a[data-lado="acti"].is-on i{ background: #fff }
@media (max-width: 900px){
  .ev-lado{ display: none }
  .ev-agua{ font-size: calc(288.0px * var(--k, 1))}
}
@media (prefers-reduced-motion: reduce){
  .ev-agua{ transform: translate(0,-50%) !important }
}

/* ═══════════════════════════════════════════════════════════
   NÚMEROS SÓLIDOS · un color distinto para cada fondo
   negro → bordó · bordó → negro · crema → bordó · rojo → negro
   ═══════════════════════════════════════════════════════════ */
.ev-agua{ -webkit-text-stroke: 0; color: var(--ev-vino) }
.ev-tipo[data-tipo="cong"] .ev-agua{ color: var(--ev-negro) }
.ev-tipo[data-tipo="casa"] .ev-agua{ color: var(--ev-vino); -webkit-text-stroke: 0 }
.ev-tipo[data-tipo="acti"] .ev-agua{ color: var(--ev-negro) }

/* ═══════════════════════════════════════════════════════════
   EL LOMO · MENDOZA en vertical, a todo lo alto del bloque
   La palabra es el lomo del rider: ocupa el alto completo del
   bloque, en bordó sólido, y la lista vive a su lado.
   ═══════════════════════════════════════════════════════════ */
.ev-rider{ position: relative; overflow: hidden; min-height: calc(100 * var(--1vh)); display: grid; align-items: center }
.ev-lomo{
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: calc(240.0px * var(--k, 1));
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: calc(clamp(5.6rem, calc(15.5 * var(--1vh)), 13.5rem) * var(--k, 1)); font-weight: 700; letter-spacing: -.06em; line-height: 1;
  color: var(--ev-vino);
}
.ev-rider-in{ position: relative; z-index: 1; padding-left: calc(304.0px * var(--k, 1))}
@media (max-width: 900px){
  .ev-rider{ min-height: 0 }
  .ev-lomo{ position: static; width: auto; writing-mode: horizontal-tb; transform: none; justify-content: flex-start;
            padding: 0 var(--ev-pad); font-size: calc(112.0px * var(--k, 1)); margin-bottom: -.3em }
  .ev-rider-in{ padding-left: var(--ev-pad) }
}

/* ═══════════════════════════════════════════════════════════
   MODO OSCURO
   La página ya es negra: en oscuro, el negro absoluto pasa a un
   negro puro del sistema y los bloques de color se conservan;
   la piel crema de casamientos pasa a humo con tinta clara, para
   que no quede una pantalla blanca en el modo oscuro.
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ev, body.dark .ev{ --ev-negro: #000000; --ev-crema: #0C0A0A }
html[data-theme="dark"] .ev-tipo[data-tipo="casa"], body.dark .ev-tipo[data-tipo="casa"]{ --ev-c: #0C0A0A; color: #F7F5F5 }
html[data-theme="dark"] .ev-tipo[data-tipo="casa"] .ev-lista li, body.dark .ev-tipo[data-tipo="casa"] .ev-lista li{ border-color: rgba(255,255,255,.22) }
html[data-theme="dark"] .ev-tipo[data-tipo="casa"] .ev-agua, body.dark .ev-tipo[data-tipo="casa"] .ev-agua{ color: var(--ev-vino) }
html[data-theme="dark"] .ev-menu.piel-clara, body.dark .ev-menu.piel-clara{ color: #F7F5F5 }
html[data-theme="dark"] .ev-menu.piel-clara .ev-m a, body.dark .ev-menu.piel-clara .ev-m a{ border-color: rgba(255,255,255,.16) }
html[data-theme="dark"] .ev-menu.piel-clara .ev-m-t, body.dark .ev-menu.piel-clara .ev-m-t{ -webkit-text-stroke-color: rgba(255,255,255,.55) }
html[data-theme="dark"] .ev-menu.piel-clara .ev-m.is-on .ev-m-t, body.dark .ev-menu.piel-clara .ev-m.is-on .ev-m-t{ color: #F7F5F5; -webkit-text-stroke-color: #F7F5F5 }
html[data-theme="dark"] .ev-menu.piel-clara .ev-m-n, html[data-theme="dark"] .ev-menu.piel-clara .ev-m-s, html[data-theme="dark"] .ev-menu.piel-clara .ev-menu-p,
body.dark .ev-menu.piel-clara .ev-m-n, body.dark .ev-menu.piel-clara .ev-m-s, body.dark .ev-menu.piel-clara .ev-menu-p{ color: #F7F5F5 }
html[data-theme="dark"] .ev-tipo[data-tipo="lanz"], body.dark .ev-tipo[data-tipo="lanz"]{ --ev-c: #0C0A0A }