:root{
  --navy:oklch(.24 .07 258);--navy-deep:oklch(.18 .06 260);--sky:oklch(.93 .035 235);
  --gold:oklch(.8 .15 85);--gold-deep:oklch(.68 .14 75);--earth:oklch(.38 .06 50);--earth-light:oklch(.9 .03 70);
  --bg:oklch(.985 .008 85);--fg:oklch(.2 .05 258);--card:#fff;--muted:oklch(.95 .015 80);--muted-fg:oklch(.45 .04 255);
  --border:oklch(.88 .03 75);--cream:oklch(.98 .01 85);
  --display:"Playfair Display",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
ul{list-style:none}
svg.i{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
section[id],footer[id]{scroll-margin-top:5rem}
.wrap{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.wrap6{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.sec{padding:6rem 0}
.eyebrow{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.3em;color:var(--gold-deep);margin-bottom:.75rem}
.h2{font-family:var(--display);font-size:2.25rem;font-weight:700;color:var(--navy);line-height:1.1}
.sh{text-align:center;margin-bottom:3rem}
.sh.light .h2{color:var(--cream)}
@media(min-width:768px){.h2{font-size:3rem}}

/* Navbar */
header.nav{position:fixed;top:0;width:100%;z-index:50;transition:all .3s;background:transparent}
header.nav.solid{background:color-mix(in oklab,var(--sky) 90%,transparent);box-shadow:0 4px 6px -1px #0002;backdrop-filter:blur(12px)}
header.nav nav{max-width:80rem;margin:0 auto;height:4rem;padding:0 1rem;display:flex;align-items:center;justify-content:space-between}
@media(min-width:768px){header.nav nav{height:5rem;padding:0 2rem}}
.brand{display:flex;align-items:center;gap:.5rem}
.logo-dot{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center}
.brand span.t{font-family:var(--display);font-size:1.125rem;font-weight:600;line-height:1.2;color:var(--cream)}
.brand em{font-style:italic;color:var(--gold-deep)}
header.nav.solid .brand span.t{color:var(--navy)}
@media(min-width:768px){.brand span.t{font-size:1.25rem}}
.links{display:none;gap:1.5rem;align-items:center}
.links a{font-size:.875rem;font-weight:500;color:color-mix(in oklab,var(--cream) 90%,transparent);transition:color .2s}
.links a:hover{color:var(--gold-deep)}
header.nav.solid .links a{color:var(--navy)}
header.nav.solid .links a:hover{color:var(--gold-deep)}
@media(min-width:1024px){.links{display:flex}.burger{display:none!important}}
.nav-r{display:flex;align-items:center;gap:.5rem}
.cta{display:none;background:var(--gold);color:var(--navy);font-weight:600;font-size:.875rem;padding:.625rem 1.25rem;border-radius:999px;box-shadow:0 10px 15px -3px #0003;transition:background .2s}
.cta:hover{background:var(--gold-deep)}
@media(min-width:640px){.cta{display:inline-block}}
.burger{padding:.5rem;border-radius:6px;color:var(--cream)}
header.nav.solid .burger{color:var(--navy)}
.burger svg{width:1.5rem;height:1.5rem}
.mobile{display:none;border-top:1px solid var(--border);background:color-mix(in oklab,var(--sky) 95%,transparent);padding:.5rem 1rem 1rem}
.mobile.open{display:block}
.mobile a{display:block;padding:.5rem .75rem;border-radius:6px;font-weight:500;color:var(--navy)}
.mobile a:hover{background:var(--card)}
.mobile a.c{margin-top:.5rem;border-radius:999px;background:var(--gold);text-align:center;font-weight:600}

/* Hero */
.hero{position:relative;height:100svh;min-height:560px;width:100%;overflow:hidden;background:var(--navy-deep)}
.hero>img,.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero iframe{position:absolute;left:50%;top:50%;height:56.25vw;min-height:100%;width:177.78vh;min-width:100%;transform:translate(-50%,-50%);pointer-events:none;border:0}
.hero .shade{position:absolute;inset:0;background:linear-gradient(to top,var(--navy-deep),color-mix(in oklab,var(--navy-deep) 40%,transparent),color-mix(in oklab,var(--navy-deep) 30%,transparent))}
.hero .txt{position:absolute;inset:auto 0 0 0;z-index:5;padding:0 1.5rem 5rem;text-align:center}
@media(min-width:768px){.hero .txt{padding-bottom:6rem}}
.hero .eyebrow{color:var(--gold);letter-spacing:.35em;margin-bottom:1rem}
.hero h1{max-width:56rem;margin:0 auto;font-size:3rem;font-weight:700;line-height:1.05;color:var(--cream)}
@media(min-width:640px){.hero h1{font-size:3.75rem}}
@media(min-width:768px){.hero h1{font-size:4.5rem}}
@media(min-width:1024px){.hero h1{font-size:6rem}}
.hero .rule{width:6rem;height:1px;background:var(--gold);margin:1.5rem auto}
.hero p.sub{max-width:42rem;margin:0 auto;font-size:1.125rem;color:color-mix(in oklab,var(--cream) 85%,transparent)}
@media(min-width:768px){.hero p.sub{font-size:1.25rem}}
.mute{position:absolute;bottom:1.5rem;right:1rem;z-index:10;width:3rem;height:3rem;border-radius:50%;border:1px solid color-mix(in oklab,var(--gold) 60%,transparent);background:color-mix(in oklab,var(--navy) 60%,transparent);color:var(--gold);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;transition:.2s}
.mute:hover{background:var(--gold);color:var(--navy)}
@media(min-width:768px){.mute{bottom:2.5rem;right:2.5rem}}

/* About */
.about{background:var(--bg)}
.about .grid{display:grid;gap:3rem;align-items:center}
@media(min-width:768px){.about .grid{grid-template-columns:1fr 1fr}}
.frame{position:relative}
.frame:before{content:"";position:absolute;left:-1rem;top:-1rem;width:100%;height:100%;border:2px solid var(--gold);border-radius:1rem}
.frame img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1rem;box-shadow:0 25px 50px -12px #0006}
.body p{margin-bottom:1rem;line-height:1.625}
.about .body{font-size:1.125rem;color:var(--muted-fg)}

/* Ejes */
.ejes{background:color-mix(in oklab,var(--sky) 40%,transparent)}
.cards{display:grid;gap:2rem}
@media(min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:var(--card);box-shadow:0 1px 2px #0001;transition:box-shadow .3s}
.card:hover{box-shadow:0 20px 25px -5px #0002}
.card .im{aspect-ratio:4/3;overflow:hidden}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.card:hover .im img{transform:scale(1.1)}
.card .p{padding:1.5rem}
.card h3{font-size:1.5rem;font-weight:700;color:var(--navy);margin-bottom:.5rem}
.card .p>p{color:var(--muted-fg);margin-bottom:1.25rem}
.more{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--earth);transition:gap .2s,color .2s}
.card:hover .more{gap:.75rem}.more:hover{color:var(--gold-deep)}

/* History */
.hist{background:color-mix(in oklab,var(--earth-light) 50%,transparent)}
.hist .grid{display:grid;gap:3rem}
@media(min-width:1024px){.hist .grid{grid-template-columns:5fr 7fr}}
.hist .eyebrow{color:var(--earth)}
.hist .body{font-size:1.125rem;color:var(--earth)}
.hist .body p:first-child:first-letter{float:left;margin-right:.5rem;font-family:var(--display);font-size:3.75rem;line-height:1;font-weight:700;color:var(--gold-deep)}
.pics{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1rem}
.pics img{width:100%;height:100%;object-fit:cover;border-radius:.75rem;border:4px solid color-mix(in oklab,var(--gold) 40%,transparent);box-shadow:0 10px 15px -3px #0003;aspect-ratio:4/3}
.pics img:first-child{grid-row:span 2;aspect-ratio:3/4}

/* Gallery */
.gal{background:color-mix(in oklab,var(--sky) 40%,transparent)}
.masonry{columns:2;column-gap:1rem}
@media(min-width:768px){.masonry{columns:3}}
@media(min-width:1024px){.masonry{columns:4}}
.masonry button{position:relative;display:block;width:100%;margin-bottom:1rem;overflow:hidden;border-radius:.75rem;break-inside:avoid}
.masonry img{width:100%;transition:transform .5s}
.masonry button:hover img{transform:scale(1.05)}
.masonry .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in oklab,var(--navy) 70%,transparent),color-mix(in oklab,var(--earth) 70%,transparent));opacity:0;transition:opacity .3s;color:var(--gold)}
.masonry button:hover .ov{opacity:1}
.ov svg{width:2rem;height:2rem}

/* Events (carousel) */
.events{background:var(--navy)}
.events .empty{text-align:center;color:color-mix(in oklab,var(--cream) 70%,transparent)}
.car{position:relative}
.track{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.25rem 0}
.track::-webkit-scrollbar{display:none}
.track>*{flex:0 0 100%;scroll-snap-align:start}
.events .track>*{flex-basis:100%}
@media(min-width:640px){.events .track>*{flex-basis:calc(50% - .75rem)}}
@media(min-width:1024px){.events .track>*{flex-basis:calc(33.333% - 1rem)}}
.cbtn{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--gold);background:var(--card);color:var(--navy);display:flex;align-items:center;justify-content:center;transition:.2s}
.cbtn:hover{background:var(--gold)}
.cbtn:disabled{opacity:.4;cursor:default}
.events .cbtn{background:var(--navy);color:var(--gold)}
.events .cbtn:hover{background:var(--gold);color:var(--navy)}
.events .car .cbtn{display:none;position:absolute;top:50%;transform:translateY(-50%)}
@media(min-width:768px){.events .car{padding:0 3rem}.events .car .cbtn{display:flex}.events .car .prev{left:0}.events .car .next{right:0}}
.ev{position:relative;height:420px;overflow:hidden;border-radius:1rem}
.ev img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.ev:hover img.bg{transform:scale(1.05)}
.ev .g{position:absolute;inset:0;background:linear-gradient(to top,var(--navy-deep),color-mix(in oklab,var(--navy-deep) 40%,transparent),transparent)}
.badge{position:absolute;left:1rem;top:1rem;border-radius:6px;padding:.125rem .625rem;font-size:.75rem;font-weight:600;background:var(--gold);color:var(--navy)}
.badge.past{background:var(--earth);color:var(--cream)}
.ev .in{position:absolute;inset:auto 0 0 0;padding:1.5rem}
.ev h3{font-size:1.5rem;font-weight:700;color:var(--cream);margin-bottom:1rem}
.btn-o{border:1px solid var(--gold);color:var(--gold);padding:.5rem 1.25rem;border-radius:999px;font-size:.875rem;font-weight:600;transition:.2s}
.btn-o:hover{background:var(--gold);color:var(--navy)}

/* Maleconeada */
.mal{background:var(--bg)}
.mal .box{display:grid;overflow:hidden;border-radius:1.5rem;background:var(--navy);box-shadow:0 25px 50px -12px #0006}
@media(min-width:768px){.mal .box{grid-template-columns:1fr 1fr}}
.mal .box img{width:100%;height:18rem;object-fit:cover}
@media(min-width:768px){.mal .box img{height:100%}}
.mal .t{display:flex;flex-direction:column;justify-content:center;padding:2rem}
@media(min-width:768px){.mal .t{padding:3.5rem}}
.mal .eyebrow{color:var(--gold)}
.mal .h2{color:var(--cream);margin-bottom:1.5rem}
.mal .body{font-size:1.125rem;color:color-mix(in oklab,var(--cream) 80%,transparent)}

/* Program */
.prog{background:var(--bg);overflow:hidden}
.prog .track{gap:1rem;padding:.5rem 10%;scroll-padding:0 10%}
.prog .track>*{flex-basis:80%;scroll-snap-align:center}
@media(min-width:768px){.prog .track{gap:1.5rem}}
.month{display:grid;gap:2rem;border-radius:1.5rem;border:1px solid var(--border);background:var(--card);padding:1.5rem;box-shadow:0 10px 15px -3px #0002}
@media(min-width:768px){.month{padding:2.5rem}}
@media(min-width:1024px){.month{grid-template-columns:3fr 2fr}}
.month h3{font-size:2.25rem;font-weight:700;text-transform:capitalize;color:var(--navy);margin-bottom:1.5rem}
.wk,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
@media(min-width:768px){.wk,.days{gap:.5rem}}
.wk div{padding:.5rem 0;text-align:center;font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--earth)}
.day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:var(--muted);font-size:.875rem}
@media(min-width:768px){.day{font-size:1rem}}
.day.has{background:var(--gold);font-weight:700;color:var(--navy);box-shadow:0 1px 3px #0003}
.day.today{box-shadow:0 0 0 2px var(--navy)}
.day i{margin-top:2px;width:4px;height:4px;border-radius:50%;background:var(--navy)}
.month h4{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:1rem;font-family:var(--sans)}
.month .none{color:var(--muted-fg)}
.agenda{display:grid;gap:.75rem}
.agenda li{display:flex;gap:1rem;border-left:4px solid var(--gold);border-radius:12px;background:color-mix(in oklab,var(--sky) 50%,transparent);padding:.75rem}
.agenda .d{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--navy)}
.agenda b{display:block;font-weight:600;color:var(--navy)}
.agenda small{font-size:.875rem;color:var(--muted-fg)}
.cnav{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}

/* Logos */
.logos{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--earth-light) 40%,transparent);padding:2.5rem 0}
.logos p{text-align:center;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.3em;color:var(--earth);margin-bottom:1.5rem}
.mq{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.mq>div{display:flex;width:max-content;align-items:center;gap:4rem;animation:marquee 30s linear infinite}
.mq>div>div{display:flex;height:4rem;flex-shrink:0;align-items:center}
.mq img{height:3rem;width:auto;object-fit:contain;opacity:.8;filter:grayscale(1);transition:.2s}
.mq img:hover{opacity:1;filter:none}
.mq span{font-family:var(--display);font-size:1.5rem;font-weight:600;font-style:italic;color:color-mix(in oklab,var(--earth) 70%,transparent)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Footer */
footer{background:var(--navy-deep);color:var(--cream)}
footer .grid{display:grid;gap:3rem;padding:4rem 1.5rem}
@media(min-width:768px){footer .grid{grid-template-columns:repeat(3,1fr)}}
footer .brand{margin-bottom:1rem}
footer .brand .logo-dot{width:2.5rem;height:2.5rem}
footer .brand .t{font-size:1.5rem}
footer .brand em{color:var(--gold)}
footer .about-t{color:color-mix(in oklab,var(--cream) 70%,transparent)}
footer h3{font-size:1.25rem;color:var(--gold);margin-bottom:1rem;font-weight:400}
footer li{margin-bottom:.75rem}
footer li a{display:flex;align-items:center;gap:.75rem}
footer li a:hover{color:var(--gold)}
footer li svg{color:var(--gold)}
.wa{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;background:var(--gold);color:var(--navy);padding:.75rem 1.5rem;font-weight:600;transition:background .2s}
.wa:hover{background:var(--gold-deep)}
.soc{display:flex;gap:.75rem}
.soc a{width:3rem;height:3rem;border-radius:50%;border:1px solid color-mix(in oklab,var(--gold) 50%,transparent);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:.2s}
.soc a:hover{background:var(--gold);color:var(--navy)}
.soc svg{width:1.25rem;height:1.25rem}
.bottom{border-top:1px solid color-mix(in oklab,var(--cream) 10%,transparent)}
.bottom .in{max-width:80rem;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;font-size:.875rem;color:color-mix(in oklab,var(--cream) 60%,transparent)}
@media(min-width:768px){.bottom .in{flex-direction:row}}
.bottom .in div{display:flex;gap:1.5rem}
.bottom a:hover{color:var(--gold)}

/* Modal */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:#000a;padding:1rem}
.modal.open{display:flex}
.mbox{position:relative;max-height:90vh;width:100%;max-width:42rem;overflow-y:auto;border-radius:.75rem;background:var(--card);padding:1.5rem;display:grid;gap:1rem}
.mbox.img{max-width:64rem;background:transparent;padding:0;overflow:visible}
.mbox.img img{max-height:85vh;width:100%;object-fit:contain;border-radius:.5rem}
.mbox.img p{text-align:center;color:var(--cream)}
.mbox>img.hd{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:.5rem}
.mbox h3{font-size:1.875rem;color:var(--navy)}
.meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.875rem;color:var(--muted-fg)}
.meta span{display:flex;align-items:center;gap:.25rem}
.meta svg{width:1rem;height:1rem;color:var(--gold-deep)}
.mbox .desc{white-space:pre-line;line-height:1.625;color:var(--muted-fg)}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mg img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:6px}
.x{position:absolute;right:.75rem;top:.75rem;z-index:2;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fffd;color:var(--navy)}
.mbox.img .x{right:.5rem;top:.5rem}

/* Eje page */
.ejehero{position:relative;height:60vh;min-height:400px;overflow:hidden}
.ejehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ejehero .shade{position:absolute;inset:0;background:linear-gradient(to top,var(--navy-deep),color-mix(in oklab,var(--navy-deep) 50%,transparent),color-mix(in oklab,var(--navy-deep) 20%,transparent))}
.ejehero .t{position:absolute;inset:auto 0 0 0;max-width:56rem;margin:0 auto;padding:0 1.5rem 3rem}
.ejehero .eyebrow{color:var(--gold);margin-bottom:.5rem}
.ejehero h1{font-size:3rem;font-weight:700;color:var(--cream)}
@media(min-width:768px){.ejehero h1{font-size:4.5rem}}
.ejehero p{margin-top:.75rem;font-size:1.125rem;color:color-mix(in oklab,var(--cream) 80%,transparent)}
.ejeart{max-width:48rem;margin:0 auto;padding:4rem 1.5rem}
.back{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--earth);margin-bottom:2rem}
.back:hover{color:var(--gold-deep)}
.ejeart p{margin-bottom:1.25rem;font-size:1.125rem;line-height:1.625;color:var(--muted-fg)}
.others{margin-top:3rem;display:grid;gap:1rem}
@media(min-width:640px){.others{grid-template-columns:1fr 1fr}}
.others a{border:1px solid var(--border);border-radius:.75rem;background:color-mix(in oklab,var(--sky) 40%,transparent);padding:1.25rem;transition:border-color .2s}
.others a:hover{border-color:var(--gold)}
.others b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--navy)}
.others small{font-size:.875rem;color:var(--muted-fg)}
.loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted-fg)}