@font-face{
  font-family:"Diodrum";
  src:url("./fonts/DiodrumCyrillic-Extralight.woff") format("woff");
  font-weight:200;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Diodrum";
  src:url("./fonts/DiodrumCyrillic-Light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Diodrum";
  src:url("./fonts/DiodrumCyrillic-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Diodrum";
  src:url("./fonts/DiodrumCyrillic-Medium.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Diodrum";
  src:url("./fonts/DiodrumCyrillic-Semibold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Diodrum";
  src:url("./fonts/DiodrumCyrillic-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Stretch Pro";
  src:
    url("./fonts/StretchPro.woff2") format("woff2"),
    url("./fonts/StretchPro.woff") format("woff");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Delight";
  src:url("./fonts/Delight.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-base:"Diodrum", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent:"Stretch Pro","Diodrum", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title:"Delight","Diodrum", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kicker-evento-size:22px;
  --kicker-evento-spacing:.10em;
  --kicker-evento-line:.85;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font-base);
  font-weight:400;
  background:#050607;
  color:rgba(255,255,255,.92);
  overflow-x:hidden;
}

button,input,textarea,select{font-family:inherit}

a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

.topGlow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(255,176,32,.12), transparent 55%),
    radial-gradient(900px 420px at 10% 18%, rgba(255,106,0,.10), transparent 55%),
    radial-gradient(900px 420px at 90% 18%, rgba(255,106,0,.08), transparent 55%);
  filter:saturate(1.05);
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

header{display:none}
main{position:relative;z-index:1}
section{padding:76px 0;scroll-margin-top:80px}
#inicio{padding:0}

.heroBanner{
  position:relative;
  width:100%;
  min-height:78vh;
  max-height:920px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:#050607;
}

.heroBannerImg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  filter:saturate(1.04) contrast(1.02);
  background-image:var(--heroDesktop);
  will-change:transform;
}

@media (max-width:720px){
  .heroBannerImg{background-image:var(--heroMobile);}
}

.heroBannerShade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 32%, rgba(0,0,0,.34) 70%, rgba(0,0,0,.78) 100%),
    radial-gradient(900px 520px at 50% 30%, rgba(255,176,32,.10), transparent 62%);
  pointer-events:none;
}

.heroBannerInner{
  position:relative;
  z-index:2;
  height:78vh;
  max-height:920px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:86px 22px 56px 22px;
}

.heroHash{
  font-family:var(--font-base);
  font-weight:700;
  position:relative;
  letter-spacing:-.03em;
  line-height:.95;
  font-size:clamp(34px, 6.2vw, 86px);
  text-transform:uppercase;
  text-shadow:0 18px 60px rgba(0,0,0,.55);
}

.heroHash .outline{
  font-family:var(--font-base);
  font-weight:700;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,176,32,.55);
  text-stroke:1.5px rgba(255,176,32,.55);
  opacity:.55;
  pointer-events:none;
}

.heroHash .outline.top{top:-22px}
.heroHash .outline.bottom{bottom:-22px}

.heroHash .solid{
  font-family:var(--font-base);
  font-weight:700;
  display:block;
  color:rgba(255,255,255,.95);
}

.heroMiniBar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:3;
  height:86px;
  background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

@media (max-width:520px){
  .heroHash .outline.top{top:-14px}
  .heroHash .outline.bottom{bottom:-14px}
}

.kicker{
  font-family:var(--font-title);
  font-weight:400;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  text-align:center;
  font-size:16px;
  color:rgba(255,255,255,.48);
  letter-spacing:.10em;
  text-transform:none;
}

.kicker i{
  width:26px;
  height:1px;
  flex:0 0 28px;
  background:linear-gradient(90deg, transparent, rgba(255,176,32,.9), transparent);
  display:inline-block;
}

h2{
  font-family:var(--font-base);
  font-weight:700;
  margin:0;
  font-size:34px;
  line-height:1.12;
  letter-spacing:-.03em;
}

.sub{
  font-family:var(--font-base);
  font-weight:300;
  margin:14px 0 0 0;
  color:rgba(255,255,255,.66);
  font-size:15px;
  line-height:1.7;
  max-width:72ch;
}

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.sectionTitle{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:760px;
}

.btnPrimary{
  font-family:var(--font-base);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #ffb020, #ff6a00);
  color:#0b0b0b;
  font-size:13px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 42px rgba(255,106,0,.18);
  transition:transform .18s ease, filter .18s ease;
  white-space:nowrap;
  cursor:pointer;
}

.btnPrimary:hover{
  transform:translateY(-1px);
  filter:saturate(1.07) brightness(1.02);
}

.promoCarousel{
  position:relative;
  border-radius:26px;
  border:none;
  background:transparent;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  padding:14px;
}

.promoStage{
  position:relative;
  width:min(980px, 100%);
  height:auto;
  border-radius:0;
  border:none;
  overflow:visible;
  background:transparent;
  margin:0 auto;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}

.promoScroller{
  width:min(980px, 100%);
  margin:0 auto;
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:18px 30vw;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.promoScroller::-webkit-scrollbar{display:none}

.promoShot{
  position:relative;
  flex:0 0 auto;
  width:320px;
  aspect-ratio:9/16;
  border:none;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 55px rgba(0,0,0,.55);
  scroll-snap-align:center;
  filter:blur(5px);
  opacity:.78;
  transform:scale(.96);
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
  will-change:transform, filter, opacity;
}

.promoShot.isActive{
  filter:none;
  opacity:1;
  transform:scale(1.06);
}

@media (max-width:980px){
  .promoShot{width:280px}
  .promoScroller{padding:18px 26vw}
}

@media (max-width:640px){
  .promoShot{width:300px}
  .promoScroller{padding:18px 18vw}
}

.menuBoxes{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  justify-items:center;
}

.menuBox{
  width:min(520px, 100%);
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.menuBox:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 300px at 0% 0%, rgba(255,176,32,.14), transparent 60%),
    radial-gradient(520px 300px at 100% 40%, rgba(255,106,0,.12), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.menuTitle{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:26px;
  height:100%;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:-.02em;
  align-items:center;
  text-align:center;
}

.menuWord{
  font-family:var(--font-accent);
  font-weight:800;
  font-size:34px;
  line-height:1;
  color:rgba(255,255,255,.96);
}

.menuBranch{
  font-family:var(--font-accent);
  font-weight:800;
  font-size:34px;
  line-height:1;
  color:#ffb020;
}

.form{
  margin-top:10px;
  display:grid;
  gap:10px;
}

.field{
  font-family:var(--font-base);
  font-weight:400;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px 12px;
  color:rgba(255,255,255,.92);
  outline:none;
  font-size:13px;
}

textarea.field{
  min-height:104px;
  resize:vertical;
}

.formRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.help{
  font-family:var(--font-base);
  font-weight:300;
  margin:10px 0 0 0;
  color:rgba(255,255,255,.48);
  font-size:12px;
  line-height:1.7;
}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}

.reveal.on{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:980px){
  h2{font-size:30px}
  .menuBoxes{grid-template-columns:1fr}
}

@media (max-width:520px){
  section{padding:62px 0}
  .kicker{font-size:65px}
  .howtoGroupTitle{font-size:16px}
}

.evStage{
  width:100%;
  margin-top:16px;
}

.evScroller{
  width:min(980px, 100%);
  margin:0 auto;
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:18px 30vw;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.evScroller::-webkit-scrollbar{display:none}

.evShot{
  flex:0 0 auto;
  width:320px;
  aspect-ratio:9/16;
  border:none;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 55px rgba(0,0,0,.55);
  scroll-snap-align:center;
  filter:blur(6px);
  opacity:.78;
  transform:scale(.96);
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
  will-change:transform, filter, opacity;
}

.evShot.isActive{
  filter:none;
  opacity:1;
  transform:scale(1.06);
}

@media (max-width:980px){
  .evShot{width:280px}
  .evScroller{padding:18px 26vw}
}

@media (max-width:640px){
  .evShot{width:300px}
  .evScroller{padding:18px 18vw}
}

.evHeroFull{
  position:relative;
  width:100vw;
  height:78vh;
  max-height:920px;
  overflow:hidden;
  border:0;
  border-radius:0;
  box-shadow:none;
  left:50%;
  transform:translateX(-50%);
  margin:14px 0 18px 0;
  background:#050607;
}

.evHeroFullImg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-image:var(--evDesktop);
  transform:scale(1.02);
  filter:saturate(1.04) contrast(1.02);
  will-change:transform;
}

@media (max-width:720px){
  .evHeroFullImg{background-image:var(--evMobile);}
}

.evHeroFullShade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 32%, rgba(0,0,0,.34) 70%, rgba(0,0,0,.78) 100%),
    radial-gradient(900px 520px at 50% 30%, rgba(255,176,32,.10), transparent 62%);
  pointer-events:none;
}

.whatsRail{
  position:fixed;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.waBtn{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.waBtn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,176,32,.28);
}

.waBtn:after{
  content:attr(dataLabel);
  position:absolute;
  left:64px;
  white-space:nowrap;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.86);
  font-size:12px;
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  backdrop-filter:blur(10px);
}

.waBtn:hover:after{
  opacity:1;
  transform:translateX(0);
}

@media (max-width:520px){
  .whatsRail{left:12px}
  .waBtn{
    width:50px;
    height:50px;
    border-radius:16px;
  }
}

.howtoTitle{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.howtoDots{
  display:flex;
  gap:8px;
  align-items:center;
}

.howtoDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,176,32,.92);
  box-shadow:0 10px 24px rgba(255,106,0,.18);
  opacity:.95;
}

.howtoH2{
  font-family:var(--font-accent);
  font-weight:800;
  font-size:44px;
  line-height:1;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
}

@media (max-width:640px){
  .howtoH2{font-size:38px}
}

.howtoBlock{
  margin-top:16px;
  display:grid;
  gap:18px;
}

.howtoGroupTitle{
  font-family:var(--font-base);
  font-weight:600;
  font-size:18px;
  color:rgba(255,255,255,.72);
  letter-spacing:.1em;
  text-transform:none;
  margin:0 0 10px 0;
}

.howtoGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

@media (max-width:980px){
  .howtoGrid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .howtoGrid{grid-template-columns:1fr}
}

.howtoCard{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:140px;
}

.howtoCardTop{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.howtoCardName{
  font-family:var(--font-base);
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
  font-size:14px;
  margin:0;
}

.howtoCardAddr{
  font-family:var(--font-base);
  font-weight:300;
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.62);
  line-height:1.6;
}

.howtoActions{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.howtoBtn{
  font-family:var(--font-base);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
  font-size:12px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}

.howtoBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
}

.howtoBtnPrimary{
  background:linear-gradient(135deg, #ffb020, #ff6a00);
  color:#0b0b0b;
  border:1px solid rgba(255,255,255,.12);
}

.siteFooter{
  margin-top:60px;
  padding:18px 0;
  background:#000;
  border-top:1px solid rgba(255,255,255,.10);
  position:relative;
  z-index:2;
}

.siteFooter p{
  font-family:var(--font-base);
  font-weight:400;
  margin:0;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.92);
  line-height:1.6;
  letter-spacing:.01em;
}

@media (max-width:520px){
  .siteFooter{padding:16px 0;}
  .siteFooter p{font-size:12px;}
}

#eventos .wrap > div[style] .kicker{
  font-family:var(--font-accent);
  font-size:var(--kicker-evento-size);
  letter-spacing:var(--kicker-evento-spacing);
  line-height:var(--kicker-evento-line);
  text-transform:none;
  justify-content:center;
  text-align:center;
  width:100%;
}

#eventos .wrap > div[style] .kicker i{
  flex:0 0 28px;
}

#promociones .sectionHead{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

#promociones .sectionTitle{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}

#promociones .kicker{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}

.lightbox.isOpen{
  opacity:1;
  visibility:visible;
}

.lightboxImg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.lightboxClose{
  position:absolute;
  top:18px;
  right:18px;
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
}

.lightboxClose:hover{
  background:rgba(255,255,255,.16);
}

.promoShot,
.evShot{
  cursor:pointer;
}