.vip-info
{
  padding:70px clamp(30px,6vw,100px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  background:linear-gradient(115deg,#061122,#003f58 58%,#006f72);
  border-block:1px solid #ffffff1f
}

.vip-info h2,
.vip-info h3
{
  margin:0;
  text-transform:uppercase;
  font-size:clamp(38px,5vw,72px);
  line-height:.86;
  letter-spacing:-.06em
}

.vip-info h3 em
{
  color:transparent;
  -webkit-text-stroke:1px #ffffffbf;
  font-style:normal
}

.whatsapp-cta
{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:min(100%,370px);
  padding:20px 26px;
  background:#25d366;
  color:#fff;
  font-size:22px;
  font-weight:800;
  transition:.25s
}

.whatsapp-cta:hover
{
  transform:translateY(-3px);
  box-shadow:0 15px 35px #25d36638
}

.whatsapp-cta svg
{
  width:42px;
  height:42px;
  flex:0 0 auto
}

.whatsapp-cta span
{
  display:grid;
  gap:5px
}

.whatsapp-cta small
{
  font-size:9px;
  letter-spacing:.14em
}

@media(max-width:767px)
{
  .vip-info
  {
    padding:55px 20px;
    align-items:stretch;
    flex-direction:column
  }
  .whatsapp-cta
  {
    min-width:0;
    width:100%;
    font-size:19px
  }
  .whatsapp-cta svg
  {
    width:38px;
    height:38px
  }
}

:root
{
  --night:#03051a;
  --night2:#070a21;
  --blue:#0068b2;
  --cyan:#00a3ad;
  --white:#f7f8fb;
  --muted:#a9acbd;
  --gold:#b4956b
}

*
{
  box-sizing:border-box
}

html
{
  scroll-behavior:smooth;
  overflow-x:clip
}

body
{
  margin:0;
  background:var(--night);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden
}

a
{
  color:inherit;
  text-decoration:none
}

img
{
  display:block;
  max-width:100%
}

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

main
{
  padding-left:84px
}

.side-rail
{
  position:fixed;
  inset:0 auto 0 0;
  width:84px;
  z-index:50;
  background:rgba(3,5,26,.9);
  backdrop-filter:blur(16px);
  border-right:1px solid #ffffff1a;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:26px 0
}

.rail-mark
{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  font-size:12px;
  font-weight:900
}

.side-rail nav
{
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:34px
}

.side-rail nav a
{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#c7c8d2;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase
}

.side-rail nav a:hover
{
  color:var(--cyan)
}

.rail-socials
{
  display:grid;
  gap:18px
}

.rail-socials a
{
  width:20px;
  height:20px;
  opacity:.8
}

.rail-socials a:hover
{
  opacity:1
}

.mobile-header
{
  display:none
}

.hero
{
  min-height:94vh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}

.hero-media
{
  position:absolute;
  inset:0;
  background:url('/res/img/hero.jpg') center 42%/cover;
  animation:heroZoom 14s ease-in-out infinite alternate
}

.hero-shade
{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#03051a80,#03051a24),linear-gradient(0deg,var(--night),transparent 42%),radial-gradient(circle at 62% 35%,#00a3ad38,transparent 38%)
}

.hero-content
{
  position:relative;
  z-index:2;
  text-align:center;
  width:min(800px,84vw);
  display:grid;
  justify-items:center
}

.main-logo
{
  width:min(570px,75vw);
  filter:drop-shadow(0 16px 40px #0008)
}

.hero-content h1
{
  margin:8px 0 32px;
  text-transform:uppercase;
  letter-spacing:.33em;
  font-size:12px;
  line-height:1.5;
  color:#d4d8e5;
  font-weight:400;
  -webkit-text-stroke:0
}

.hero-content p
{
  margin:8px 0 32px;
  text-transform:uppercase;
  letter-spacing:.33em;
  font-size:12px;
  color:#d4d8e5
}

.cta
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:54px;
  padding:0 25px;
  font-weight:800;
  font-size:11px;
  letter-spacing:.12em;
  border:1px solid transparent;
  transition:.25s
}

.cta-primary
{
  background:linear-gradient(90deg,var(--blue),var(--cyan))
}

.cta-primary:hover
{
  transform:translateY(-3px);
  box-shadow:0 12px 35px #00a3ad4d
}

.hero-note
{
  position:absolute;
  z-index:3;
  bottom:35px;
  right:40px;
  margin:0;
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  writing-mode:vertical-rl
}

@keyframes heroZoom
{
  to
  {
    transform:scale(1.08)
  }
}

.ticker
{
  overflow:hidden;
  border-block:1px solid #ffffff1f;
  background:#05071a
}

.ticker div
{
  width:max-content;
  padding:22px 0;
  font-weight:900;
  font-size:14px;
  letter-spacing:.35em;
  animation:ticker 80s linear infinite
}

.ticker i
{
  color:var(--cyan);
  margin:0 28px;
  font-style:normal
}

@keyframes ticker
{
  to
  {
    transform:translateX(-50%)
  }
}

.section
{
  padding:120px clamp(30px,6vw,100px)
}

.eyebrow
{
  margin:0 0 18px;
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em
}

h1,h2
{
  margin:0;
  text-transform:uppercase;
  font-size:clamp(34px,6.4vw,100px);
  line-height:.86;
  letter-spacing:-.06em;
  overflow-wrap:break-word
}

h1 em,h2 em
{
  color:transparent;
  -webkit-text-stroke:1px #ffffffbf;
  font-style:normal
}

.events
{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(40px,6vw,100px);
  align-items:start;
  background:radial-gradient(circle at 85% 20%,#0068b224,transparent 30%)
}

.section-heading
{
  position:sticky;
  top:70px
}

.section-heading>p:last-child
{
  max-width:390px;
  margin:34px 0 0;
  color:var(--muted);
  line-height:1.8
}

.fourvenues-shell
{
  min-height:600px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 30px 80px #0005
}

#fourvenues-iframe
{
  width:100%;
  min-height:600px
}

.experience
{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:8vw;
  align-items:center;
  background:var(--night2)
}

.experience-copy>p:last-child
{
  max-width:500px;
  color:var(--muted);
  line-height:1.8;
  margin-top:36px
}

.experience-grid
{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid #ffffff1f
}

.experience-grid article
{
  min-height:230px;
  padding:28px;
  border:1px solid #ffffff12;
  transition:.3s
}

.experience-grid article:hover
{
  background:linear-gradient(135deg,#0068b22e,#00a3ad1f)
}

.experience-grid span
{
  font-size:10px;
  color:var(--cyan)
}

.experience-grid h3
{
  margin:80px 0 10px;
  text-transform:uppercase
}

.experience-grid p
{
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}

.award-section
{
  min-height:620px;
  padding:100px clamp(30px,8vw,130px);
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:7vw;
  align-items:center;
  background:linear-gradient(120deg,#081d32,#0068b2 58%,#00a3ad)
}

.award-number
{
  display:grid;
  justify-items:center;
  border-right:1px solid #ffffff42;
  padding-right:7vw
}

.award-number strong
{
  font-size:clamp(120px,18vw,250px);
  line-height:.9;
  letter-spacing:-.1em;
  margin-left:-.1em
}

.award-number small
{
  letter-spacing:.3em;
  font-weight:700;
  font-size:10px
}

.award-copy img
{
  width:min(450px,80%);
  margin-bottom:42px
}

.award-copy h2
{
  font-size:clamp(38px,4vw,65px);
  max-width:760px
}

.award-copy p
{
  max-width:670px;
  line-height:1.7;
  color:#e1eff3
}

.award-actions
{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px
}

.cta-outline
{
  border-color:#ffffff80
}

.cta-outline:hover
{
  background:#fff;
  color:var(--blue)
}

.cta-gold
{
  background:var(--gold)
}

.cta-gold:hover
{
  background:#fff;
  color:#6d5436;
  transform:translateY(-3px)
}

.vote-deadline
{
  display:block;
  margin-top:15px;
  color:#ffffffb3
}

.social-section
{
  background:#050719
}

.social-title
{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:56px
}

.social-title h2
{
  font-size:clamp(43px,6vw,82px)
}

.social-title>a
{
  border-bottom:1px solid var(--cyan);
  padding-bottom:9px;
  font-size:11px;
  letter-spacing:.14em
}

.instagram-grid
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.instagram-grid>a
{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:#101329
}

.instagram-grid>a>img
{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s
}

.instagram-grid>a:hover>img
{
  transform:scale(1.06);
  filter:brightness(.65)
}

.instagram-grid span
{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transition:.25s
}

.instagram-grid span img
{
  width:28px;
  height:28px
}

.instagram-grid>a:hover span
{
  opacity:1
}

.instagram-grid>a.is-video::after
{
  content:"";
  position:absolute;
  left:12px;
  bottom:12px;
  width:0;
  height:0;
  border-style:solid;
  border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 4px #0008);
  z-index:1
}

.photo-gallery
{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(440px,1.2fr);
  align-items:center;
  gap:clamp(32px,5vw,90px);
  min-height:620px;
  padding:clamp(72px,8vw,140px) clamp(30px,6vw,100px);
  overflow:hidden;
  background:#020617
}

.photo-gallery-copy
{
  position:relative;
  z-index:1;
  max-width:570px
}

.photo-gallery-copy h2
{
  font-size:clamp(58px,7vw,118px)
}

.photo-gallery-copy>p:not(.eyebrow)
{
  max-width:470px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65
}

.photo-gallery-copy .cta
{
  margin-top:34px
}

.photo-gallery-visual img
{
  width:min(100%,900px);
  height:auto;
  margin-inline:auto
}

.masia-section
{
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)
}

.masia-image
{
  background:url('/res/img/masia.jpg') center/cover;
  min-height:550px
}

.masia-copy
{
  padding:90px clamp(35px,6vw,95px);
  align-self:center
}

.masia-copy h2
{
  font-size:clamp(45px,6vw,86px)
}

.masia-copy>p:not(.eyebrow)
{
  color:var(--muted);
  line-height:1.8;
  max-width:570px;
  margin:35px 0
}

.contact-section
{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px,4vw,56px);
  align-items:start;
  background:radial-gradient(circle at 10% 20%,#00a3ad1f,transparent 25%)
}

.contact-intro h2
{
  font-size:clamp(40px,5.4vw,84px)
}

@media(min-width:1024px)
{
  .contact-intro
  {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:28px 48px;
    align-items:end
  }
  .contact-intro .eyebrow
  {
    grid-column:1;
    margin-bottom:0
  }
  .contact-intro h2
  {
    grid-column:1
  }
  .contact-intro>p:not(.eyebrow)
  {
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
    max-width:none
  }
}

.contact-intro>p:not(.eyebrow),address
{
  color:var(--muted);
  max-width:480px;
  line-height:1.8;
  font-style:normal
}

.contact-intro address
{
  margin-top:45px;
  color:#fff
}

.forms-wrap
{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,48px);
  align-items:stretch
}

form
{
  border-top:1px solid var(--cyan);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  min-width:0
}

form h3
{
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:32px
}

label
{
  display:grid;
  gap:8px;
  margin-bottom:20px;
  color:#c5c7d1;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase
}

input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),textarea,select
{
  width:100%;
  border:0;
  border-bottom:1px solid #ffffff33;
  background:transparent;
  color:#fff;
  font-size:16px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:none;
  line-height:1.4;
  padding:12px 0;
  min-height:44px;
  outline:0;
  resize:vertical
}

textarea
{
  min-height:120px
}

select
{
  appearance:none;
  border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f7f8fb' d='M1.2 1.3 6 6.1l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  padding-right:28px
}

input:focus,textarea:focus,select:focus
{
  border-color:var(--cyan)
}

select option
{
  color:#111
}

form button
{
  width:100%;
  min-height:50px;
  border:0;
  background:#fff;
  color:#040619;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  cursor:pointer
}

form button:hover
{
  background:var(--cyan);
  color:#fff
}

footer
{
  padding:50px clamp(30px,6vw,100px);
  border-top:1px solid #ffffff1a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  color:var(--muted);
  font-size:11px
}

footer>img
{
  width:150px
}

footer div
{
  display:flex;
  gap:30px;
  text-transform:uppercase;
  letter-spacing:.13em
}

@media(max-width:1023px)
{
  main
  {
    padding-left:0;
    padding-top:64px
  }
  .side-rail
  {
    display:none
  }
  .mobile-header
  {
    display:flex;
    height:64px;
    position:fixed;
    inset:0 0 auto;
    z-index:60;
    padding:0 20px;
    align-items:center;
    justify-content:space-between;
    background:#03051ae6;
    backdrop-filter:blur(14px);
    border-bottom:1px solid #ffffff1a
  }
  .mobile-brand
  {
    font-size:13px;
    font-weight:900;
    letter-spacing:.15em
  }
  .mobile-header .mobile-brand img
  {
    width:auto;
    height:28px;
    max-width:min(160px,58vw)
  }
  .hero
  {
    min-height:calc(92vh - 64px)
  }
  .events,.experience,.contact-section,.faq-section
  {
    grid-template-columns:1fr
  }
  .section-heading
  {
    position:static
  }
  .award-section
  {
    grid-template-columns:1fr;
    text-align:center
  }
  .award-number
  {
    border:0;
    border-bottom:1px solid #ffffff40;
    padding:0 0 45px
  }
  .award-copy
  {
    display:grid;
    justify-items:center
  }
  .photo-gallery
  {
    grid-template-columns:1fr;
    gap:38px;
    min-height:0;
    padding:76px 22px 60px
  }
  .photo-gallery-copy h2
  {
    font-size:clamp(54px,18vw,82px)
  }
  .photo-gallery-copy>p:not(.eyebrow)
  {
    margin-top:24px;
    font-size:15px
  }
  .photo-gallery-copy .cta
  {
    width:100%;
    max-width:330px
  }
  .photo-gallery-visual
  {
    margin-inline:-22px
  }
  .masia-section
  {
    grid-template-columns:1fr
  }
  .masia-image
  {
    min-height:460px
  }
}

@media(max-width:767px)
{
  .section
  {
    padding:82px 20px
  }
  .hero-content h1,
  .hero-content p
  {
    font-size:9px;
    letter-spacing:.22em
  }
  .main-logo
  {
    width:88vw
  }
  .events
  {
    gap:45px
  }
  .fourvenues-shell,#fourvenues-iframe
  {
    min-height:520px
  }
  .experience-grid
  {
    grid-template-columns:1fr 1fr
  }
  .experience-grid article
  {
    min-height:185px;
    padding:20px 16px
  }
  .experience-grid h3
  {
    margin-top:55px;
    font-size:14px
  }
  .experience-grid p
  {
    font-size:11px
  }
  .award-section
  {
    padding:80px 20px
  }
  .award-number strong
  {
    font-size:150px
  }
  .award-actions
  {
    width:100%;
    display:grid
  }
  .social-title
  {
    align-items:flex-start;
    flex-direction:column
  }
  .instagram-grid
  {
    grid-template-columns:1fr 1fr;
    gap:6px
  }
  .instagram-grid .mobile-hidden
  {
    display:none
  }
  .masia-image
  {
    min-height:370px
  }
  .masia-copy
  {
    padding:70px 20px
  }
  .forms-wrap
  {
    grid-template-columns:1fr;
    gap:55px
  }
  footer
  {
    flex-direction:column;
    text-align:center
  }
}

@media(prefers-reduced-motion:reduce)
{
  html
  {
    scroll-behavior:auto
  }
  *,*::before,*::after
  {
    animation:none!important;
    transition:none!important
  }
}

.hero-video
{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border:0
}

.rail-mark
{
  background:transparent;
  width:70px;
  height:58px
}

.rail-mark img
{
  width:68px;
  max-width:none;
  height:auto
}

.mobile-brand img
{
  width:145px;
  height:auto
}

.location-section
{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  min-height:620px;
  background:#050719;
  border-top:1px solid #ffffff1a
}

.location-map
{
  min-height:540px;
  overflow:hidden;
  background:#071022
}

.location-map iframe
{
  width:100%;
  height:100%;
  min-height:620px;
  border:0;
  filter:grayscale(1) invert(.92) contrast(.85) hue-rotate(175deg);
  opacity:.82
}

.location-copy
{
  padding:90px clamp(35px,6vw,90px);
  align-self:center
}

.location-copy h2
{
  font-size:clamp(48px,6vw,88px)
}

.location-copy address
{
  margin:34px 0;
  color:#d9dbe4;
  font-size:16px
}

.route-actions
{
  display:grid;
  gap:12px;
  max-width:390px
}

.route-actions .cta
{
  width:100%
}

@media(max-width:1023px)
{
  .location-section
  {
    grid-template-columns:1fr
  }
  .location-map,.location-map iframe
  {
    min-height:420px
  }
  .location-copy
  {
    padding:70px 20px
  }
}

.events-content
{
  min-width:0
}

.events-content .vip-info
{
  margin-top:28px;
  padding:30px;
  gap:28px
}

.events-content .vip-info h2,
.events-content .vip-info h3
{
  font-size:clamp(25px,2.7vw,42px)
}

.events-content .whatsapp-cta
{
  min-width:245px;
  padding:16px 19px;
  font-size:16px
}

.events-content .whatsapp-cta svg
{
  width:32px;
  height:32px
}

.location-section
{
  grid-template-columns:minmax(0,1fr) minmax(0,.75fr);
  min-height:520px
}

.location-map
{
  min-height:500px
}

.location-map iframe
{
  min-height:520px
}

@media(max-width:1023px)
{
  .location-section
  {
    grid-template-columns:1fr
  }
  .location-map,.location-map iframe
  {
    min-height:420px
  }
}

@media(max-width:767px)
{
  .events-content .vip-info
  {
    padding:28px 20px
  }
  .events-content .whatsapp-cta
  {
    min-width:0;
    font-size:17px
  }
}

.experience-icon
{
  display:block;
  width:46px;
  height:46px;
  margin-top:42px;
  color:var(--cyan);
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85
}

.experience-grid h3
{
  margin-top:26px
}

.events-content .vip-info
{
  justify-content:center;
  text-align:center;
  flex-direction:column;
  gap:20px
}

.events-content .vip-info h2,
.events-content .vip-info h3
{
  font-size:clamp(30px,3.1vw,48px);
  letter-spacing:-.035em
}

.vip-subtitle
{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase
}

.vip-subtitle em
{
  color:#fff;
  font-style:normal
}

.events-content .whatsapp-cta
{
  min-width:0;
  width:48px;
  height:48px;
  padding:0;
  border-radius:14px;
  justify-content:center
}

.events-content .whatsapp-cta svg
{
  width:25px;
  height:25px
}

@media(max-width:767px)
{
  .events-content .vip-info
  {
    align-items:center
  }
  .events-content .whatsapp-cta
  {
    width:48px;
    min-width:48px
  }
  .vip-subtitle
  {
    font-size:13px
  }
}

.events-content .vip-info h2 em,
.events-content .vip-info h3 em
{
  color:transparent;
  -webkit-text-stroke:1px #ffffffbf;
  font-style:normal
}

.events-content .whatsapp-cta
{
  width:92px;
  border-radius:18px
}

.chocola-signature
{
  min-height:82px;
  padding:18px 30px;
  border-top:1px solid #ffffff12;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#020413;
  color:#737789;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:8px
}

.chocola-signature img
{
  width:115px;
  height:auto
}

.chocola-signature small
{
  font-size:8px
}

.chocola-signature:hover
{
  color:#fff
}

.chocola-signature:hover img
{
  opacity:.9
}

@media(max-width:767px)
{
  .events-content .whatsapp-cta
  {
    width:82px;
    min-width:82px
  }
  .chocola-signature
  {
    gap:10px;
    padding-inline:18px
  }
  .chocola-signature img
  {
    width:100px
  }
}

@media(max-width:1023px)
{
  .masia-copy
  {
    order:-1
  }
  .masia-image
  {
    order:2
  }
}

.mobile-menu
{
  display:none
}

.mobile-menu-toggle
{
  display:none
}

@media(max-width:1023px)
{
  body.mobile-menu-open
  {
    overflow:hidden
  }
  .mobile-menu-toggle
  {
    width:42px;
    height:42px;
    padding:10px;
    border:0;
    background:transparent;
    display:grid;
    align-content:center;
    gap:5px;
    cursor:pointer
  }
  .mobile-menu-toggle span
  {
    display:block;
    width:22px;
    height:1.5px;
    background:#fff;
    transition:.25s;
    transform-origin:center
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1)
  {
    transform:translateY(6.5px) rotate(45deg)
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2)
  {
    opacity:0
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3)
  {
    transform:translateY(-6.5px) rotate(-45deg)
  }
  .mobile-menu
  {
    position:fixed;
    z-index:59;
    inset:calc(64px + env(safe-area-inset-top,0px)) 0 0;
    display:flex;
    flex-direction:column;
    padding:30px max(22px,env(safe-area-inset-right,0px)) max(25px,env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));
    background:linear-gradient(160deg,#03051af7,#07142ffc);
    backdrop-filter:blur(18px);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .32s ease,visibility .32s;
    overflow-y:auto
  }
  .mobile-menu.is-open
  {
    transform:translateX(0);
    visibility:visible
  }
  .mobile-menu-links
  {
    display:grid
  }
  .mobile-menu-links>a
  {
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 2px;
    border-bottom:1px solid #ffffff18;
    font-size:clamp(24px,7vw,36px);
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:-.04em
  }
  .mobile-menu-links>a span
  {
    width:24px;
    color:var(--cyan);
    font-size:9px;
    letter-spacing:.1em
  }
  .mobile-menu-events
  {
    margin-top:24px;
    width:100%
  }
  .mobile-menu-socials
  {
    display:flex;
    gap:28px;
    margin-top:auto;
    padding-top:30px
  }
  .mobile-menu-socials a
  {
    display:flex;
    align-items:center;
    gap:9px;
    color:#b8bbc7;
    font-size:10px;
    letter-spacing:.13em;
    text-transform:uppercase
  }
  .mobile-menu-socials img
  {
    width:19px;
    height:19px
  }
}

.reveal-item
{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms)
}

.reveal-item.is-visible
{
  opacity:1;
  transform:translateY(0)
}

.reveal-delay-0 { --reveal-delay:0ms }
.reveal-delay-1 { --reveal-delay:55ms }
.reveal-delay-2 { --reveal-delay:110ms }
.reveal-delay-3 { --reveal-delay:165ms }

.skip-link
{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 18px;
  background:var(--cyan);
  color:#fff;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.skip-link:focus
{
  left:20px;
  top:20px
}

.visually-hidden
{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.form-privacy
{
  display:flex!important;
  grid-template-columns:none;
  align-items:flex-start;
  gap:10px;
  margin:auto 0 18px;
  color:#c5c7d1;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:none
}

.form-privacy input
{
  width:20px;
  height:20px;
  min-height:20px;
  margin-top:1px;
  flex:0 0 auto;
  accent-color:var(--cyan)
}

.form-privacy a
{
  color:var(--cyan);
  text-decoration:underline
}

.form-recaptcha-note
{
  margin:12px 0 0;
  color:#8b8e9d;
  font-size:11px;
  letter-spacing:.03em;
  line-height:1.5;
  text-transform:none
}

.form-recaptcha-note a
{
  color:var(--cyan);
  text-decoration:underline
}

.form-alert
{
  margin:0 0 18px
}

.form-alert-ok,
.form-alert-error
{
  margin:0;
  padding:12px 0;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:none
}

.form-alert-ok
{
  color:#7dffc2
}

.form-alert-error
{
  color:#ff8b8b
}

form button:disabled
{
  opacity:.65;
  cursor:wait
}

.page-legal main
{
  padding-left:0;
  padding-top:0
}

@media(max-width:1023px)
{
  .page-legal
  {
    padding-top:0
  }
}

footer div
{
  flex-wrap:wrap;
  justify-content:center
}

.faq-section
{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:7vw;
  min-width:0;
  background:radial-gradient(circle at 80% 20%,#0068b21f,transparent 28%)
}

.faq-list
{
  display:grid;
  gap:12px;
  align-content:start
}

.faq-list details
{
  border:1px solid #ffffff1f;
  background:#05071a
}

.faq-list summary
{
  cursor:pointer;
  list-style:none;
  padding:22px 24px;
  font-weight:800;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase
}

.faq-list summary::-webkit-details-marker
{
  display:none
}

.faq-list details[open] summary
{
  color:var(--cyan)
}

.faq-list details p
{
  margin:0;
  padding:0 24px 22px;
  color:var(--muted);
  line-height:1.8;
  max-width:640px
}

.faq-list,
.section-heading,
.events-content,
.experience-copy,
.experience-grid,
.forms-wrap,
.contact-intro,
.award-copy,
.masia-copy,
.location-copy
{
  min-width:0
}

/* Desktop compacto: portátiles 1024–1279 con rail lateral */
@media(min-width:1024px) and (max-width:1279px)
{
  .section
  {
    padding:96px clamp(28px,4vw,64px)
  }
  .events
  {
    grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    gap:40px
  }
  .experience,
  .faq-section
  {
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:40px
  }
  .contact-section
  {
    grid-template-columns:1fr;
    gap:40px
  }
  .award-section
  {
    padding:88px clamp(28px,5vw,72px);
    gap:40px
  }
  .masia-copy,
  .location-copy
  {
    padding:72px clamp(28px,4vw,56px)
  }
  .forms-wrap
  {
    gap:22px
  }
}

/* Tablet y móvil: menú superior, secciones apiladas */
@media(max-width:1023px)
{
  main
  {
    padding-left:0;
    padding-top:calc(64px + env(safe-area-inset-top,0px))
  }
  .side-rail
  {
    display:none
  }
  .mobile-header
  {
    display:flex;
    height:calc(64px + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));
    position:fixed;
    inset:0 0 auto;
    z-index:60;
    align-items:center;
    justify-content:space-between;
    background:#03051ae6;
    backdrop-filter:blur(14px);
    border-bottom:1px solid #ffffff1a
  }
  .mobile-header .mobile-brand img
  {
    width:auto;
    height:28px;
    max-width:min(160px,58vw)
  }
  .hero
  {
    min-height:calc(100svh - 64px - env(safe-area-inset-top,0px))
  }
  .hero-content
  {
    width:min(720px,90vw);
    padding:0 8px
  }
  .hero-note
  {
    display:block;
    writing-mode:horizontal-tb;
    bottom:22px;
    right:0;
    left:0;
    text-align:center;
    letter-spacing:.18em
  }
  .section
  {
    padding:88px clamp(24px,5vw,48px)
  }
  .events,
  .experience,
  .contact-section,
  .faq-section,
  .award-section,
  .photo-gallery,
  .masia-section,
  .location-section
  {
    grid-template-columns:1fr
  }
  .section-heading
  {
    position:static
  }
  .award-section
  {
    text-align:center;
    padding:88px clamp(24px,5vw,48px);
    min-height:0
  }
  .award-number
  {
    border:0;
    border-bottom:1px solid #ffffff40;
    padding:0 0 40px
  }
  .award-copy
  {
    display:grid;
    justify-items:center
  }
  .masia-copy
  {
    order:-1;
    padding:64px clamp(24px,5vw,48px)
  }
  .masia-image
  {
    order:2;
    min-height:420px
  }
  .location-map,
  .location-map iframe
  {
    min-height:380px
  }
  .location-copy
  {
    padding:64px clamp(24px,5vw,48px)
  }
  .route-actions
  {
    max-width:none
  }
  .fourvenues-shell,
  #fourvenues-iframe
  {
    min-height:560px
  }
  footer
  {
    padding:40px clamp(24px,5vw,48px);
    gap:22px
  }
}

/* Solo tablet: mantener grillas útiles de 2 y 3 columnas */
@media(min-width:768px) and (max-width:1023px)
{
  .experience-grid,
  .forms-wrap
  {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .instagram-grid
  {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .social-title
  {
    align-items:flex-end
  }
  .cta
  {
    min-height:52px
  }
}

/* Móvil */
@media(max-width:767px)
{
  .section
  {
    padding:72px 20px
  }
  .hero-content h1,
  .hero-content p
  {
    font-size:clamp(10px,2.7vw,12px);
    letter-spacing:.14em;
    line-height:1.55;
    max-width:22em
  }
  .main-logo
  {
    width:min(78vw,340px)
  }
  .hero .cta
  {
    width:min(100%,340px);
    gap:12px
  }
  .ticker div
  {
    font-size:11px;
    letter-spacing:.18em;
    padding:16px 0
  }
  .ticker i
  {
    margin:0 16px
  }
  .events
  {
    gap:36px
  }
  .fourvenues-shell,
  #fourvenues-iframe
  {
    min-height:480px
  }
  .experience-grid
  {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .experience-grid article
  {
    min-height:168px;
    padding:18px 14px
  }
  .experience-icon
  {
    width:38px;
    height:38px;
    margin-top:28px
  }
  .experience-grid h3
  {
    margin-top:18px;
    font-size:14px
  }
  .experience-grid p
  {
    font-size:12px
  }
  .award-section
  {
    padding:64px 20px
  }
  .award-number strong
  {
    font-size:clamp(96px,28vw,150px)
  }
  .award-copy img
  {
    width:min(280px,72%);
    margin-bottom:28px
  }
  .award-actions
  {
    width:100%;
    display:grid
  }
  .social-title
  {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-bottom:36px
  }
  .instagram-grid
  {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px
  }
  .instagram-grid .mobile-hidden
  {
    display:none
  }
  .masia-image
  {
    min-height:280px
  }
  .masia-copy
  {
    padding:56px 20px
  }
  .forms-wrap
  {
    grid-template-columns:1fr;
    gap:48px
  }
  .faq-list summary
  {
    padding:18px 16px;
    font-size:13px
  }
  .faq-list details p
  {
    padding:0 16px 18px
  }
  .location-copy
  {
    padding:56px 20px
  }
  .location-map,
  .location-map iframe
  {
    min-height:280px
  }
  footer
  {
    flex-direction:column;
    text-align:center;
    padding:36px 20px
  }
  .vip-info
  {
    padding:48px 20px;
    align-items:stretch;
    flex-direction:column
  }
  .events-content .vip-info
  {
    padding:24px 18px;
    align-items:center
  }
  .events-content .whatsapp-cta
  {
    width:82px;
    min-width:82px
  }
  .vip-subtitle
  {
    font-size:13px
  }
  .chocola-signature
  {
    gap:10px;
    padding-inline:18px
  }
  .chocola-signature img
  {
    width:100px
  }
}

/* Teléfonos estrechos */
@media(max-width:479px)
{
  .section
  {
    padding:60px 16px
  }
  .award-section,
  .masia-copy,
  .location-copy
  {
    padding-inline:16px
  }
  .experience-grid
  {
    grid-template-columns:1fr
  }
  .experience-grid article
  {
    min-height:0
  }
  .mobile-menu-links>a
  {
    font-size:22px;
    padding:12px 2px
  }
  .cta
  {
    min-height:48px;
    width:100%;
    padding:0 16px;
    letter-spacing:.08em
  }
  .hero-note
  {
    font-size:9px;
    letter-spacing:.12em
  }
}