:root{
  --c:#17253F;               /* color del proyecto; se sobreescribe desde proyecto.json */
  --ink:#161719; --ink-2:#5C5F66; --line:#E3E2DF; --bg:#F6F5F2; --panel:#fff;
  --display:"Archivo",-apple-system,Helvetica,Arial,sans-serif;
  --ui:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--panel); color:var(--ink); font-family:var(--ui);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
@media(min-width:720px){.wrap{padding:0 40px}}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--c); color:#fff; overflow:hidden}
.hero-img,.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28}
.hero .wrap{position:relative}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:22px}
.marca{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700; font-size:15px; text-decoration:none}
.marca img{height:34px; width:auto; border-radius:6px; background:#fff}
.menu{display:none; gap:26px; font-size:14px}
.menu a{text-decoration:none; opacity:.8}
.menu a:hover{opacity:1}
@media(min-width:720px){.menu{display:flex}}
.hero-body{padding:72px 0 84px; max-width:820px}
@media(min-width:720px){.hero-body{padding:112px 0 124px}}
.hero h1{font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(38px,7.2vw,76px); margin:0 0 22px}
.hero p.frase{font-size:clamp(17px,2.2vw,22px); line-height:1.5; margin:0; opacity:.92; max-width:680px}
.btn{display:inline-block; margin-top:34px; padding:14px 26px; border-radius:999px; background:#fff;
  color:var(--c); font-weight:700; font-size:15px; text-decoration:none}
.btn:hover{opacity:.9}

/* ---------- Secciones ---------- */
.sec{padding:64px 0}
.sec.alt{background:var(--bg)}
@media(min-width:720px){.sec{padding:92px 0}}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--c); margin:0 0 14px}
.sec h2{font-family:var(--display); font-weight:800; font-size:clamp(28px,4.4vw,44px); line-height:1.1;
  letter-spacing:-.015em; margin:0 0 28px}
.texto{max-width:720px}
.texto p{margin:0 0 16px; font-size:17px}

.nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:24px; margin-top:36px}
.num b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(34px,5vw,52px);
  line-height:1; color:var(--c)}
.num span{display:block; margin-top:8px; color:var(--ink-2); font-size:14px}

.cards{display:grid; gap:20px}
@media(min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.sec.alt .card{border-color:transparent}
.card img{width:100%; aspect-ratio:16/10; object-fit:cover}
.card-in{padding:26px}
.card h3{font-family:var(--display); font-weight:800; font-size:24px; margin:0 0 10px; letter-spacing:-.01em}
.card p{margin:0; color:var(--ink-2)}

.lista{list-style:none; margin:0; padding:0; max-width:720px}
.lista li{padding:18px 0; border-top:1px solid var(--line)}
.lista li:last-child{border-bottom:1px solid var(--line)}
.lista b{display:block; font-family:var(--display); font-size:18px}
.lista span{color:var(--ink-2)}

.galeria{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:720px){.galeria{grid-template-columns:repeat(3,1fr); gap:14px}}
.galeria img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.chips li{padding:10px 18px; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-weight:600; font-size:15px}

/* ---------- Contacto y pie ---------- */
.contacto{background:var(--c); color:#fff}
.contacto .eyebrow{color:#fff; opacity:.7}
.contacto h2{color:#fff}
.vias{display:grid; gap:14px; max-width:520px}
.via{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px;
  border:1px solid rgba(255,255,255,.28); border-radius:14px; text-decoration:none}
.via:hover{background:rgba(255,255,255,.08)}
.via small{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.65}
.via strong{font-size:16px; word-break:break-word}
.cierre{margin:44px 0 0; font-family:var(--display); font-weight:700; font-size:22px}
.pie{background:var(--c); color:#fff; padding:0 0 34px; font-size:13px}
.pie .wrap{border-top:1px solid rgba(255,255,255,.2); padding-top:22px; opacity:.7}

/* ---------- Modo revisión (?revisar) ---------- */
.revisar{background:#FFF4CC; color:#5A4500; border-bottom:2px solid #E0A020; font-size:14px; padding:16px 0}
.revisar b{display:block; margin-bottom:6px}
.revisar ul{margin:6px 0 0; padding-left:20px}
.error{padding:80px 20px; text-align:center; color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Accesibilidad: foco visible con teclado */
a:focus-visible,button:focus-visible{outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px var(--c)}

/* =====================================================================
   v2 — secciones propias por evento, galería con visor, menú en celular
   ===================================================================== */
img{height:auto}
.hero-video{opacity:0; transition:opacity .6s}
.hero-video.listo{opacity:.28}

/* ---------- Menú en celular ---------- */
.menu-btn{display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px;
  padding:10px; margin-right:-10px; background:none; border:0; cursor:pointer; position:relative; z-index:31}
.menu-btn span{display:block; height:2px; background:#fff; transition:transform .25s, opacity .25s}
@media(min-width:720px){.menu-btn{display:none}}
@media(max-width:719px){
  .menu{display:flex; position:fixed; inset:0; z-index:30; flex-direction:column; justify-content:center; gap:28px;
    padding:40px 28px; background:var(--c); font-size:26px; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
  .menu a{opacity:1}
  body.menu-abierto{overflow:hidden}
  body.menu-abierto .menu{opacity:1; visibility:visible}
  body.menu-abierto .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-abierto .menu-btn span:nth-child(2){opacity:0}
  body.menu-abierto .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Quiénes somos a dos columnas ---------- */
.sobre-grid{display:grid; gap:36px; align-items:center}
@media(min-width:900px){.sobre-grid{grid-template-columns:1.05fr 1fr; gap:64px}}
.sobre-foto img{width:100%; aspect-ratio:4/3; object-fit:cover}
.nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:48px}

/* ---------- Secciones de evento ---------- */
.evento-grid{display:grid; gap:36px; align-items:center}
@media(min-width:900px){
  .evento-grid{grid-template-columns:1.15fr 1fr; gap:64px}
  .evento-der .evento-media{order:2}
}
.evento-media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.evento-sub{font-size:20px; font-weight:600; margin:-18px 0 22px}
.evento-texto p{font-size:18px; max-width:560px}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px; margin:32px 0 0; max-width:560px}
.datos div{margin:0}
.datos dd{margin:0; font-family:var(--display); font-weight:800; font-size:44px; line-height:1}
.datos dt{margin-top:8px; font-size:14px; opacity:.8; order:2}
.datos div{display:flex; flex-direction:column}
.datos dd{order:-1}
.tira{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:44px}
@media(min-width:720px){.tira{grid-template-columns:repeat(4,1fr); gap:14px}}
.evento-banner img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
@media(min-width:900px){.evento-banner img{aspect-ratio:21/9}}
.evento-ancho .evento-texto{padding-top:56px; max-width:820px}

/* ---------- Galería simétrica + pestañas ---------- */
.galeria-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:900px){.galeria-grid{grid-template-columns:repeat(4,1fr); gap:14px}}
a.lb{display:block; overflow:hidden; cursor:zoom-in}
a.lb img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .35s}
a.lb:hover img{transform:scale(1.04)}
.tira a.lb img{aspect-ratio:4/5}
.tabs{display:flex; gap:8px; margin:0 0 24px; flex-wrap:wrap}
.tabs button{font:inherit; font-weight:700; padding:10px 20px; border:1px solid currentColor; background:none; color:inherit; cursor:pointer; border-radius:999px}
.tabs button[aria-selected="true"]{background:var(--c); border-color:var(--c); color:#fff}

/* ---------- Visor de fotos ---------- */
.lb-caja{position:fixed; inset:0; z-index:50; background:rgba(10,10,12,.94); display:flex; align-items:center; justify-content:center; padding:56px 64px}
.lb-caja[hidden]{display:none}
.lb-caja img{max-width:100%; max-height:100%; object-fit:contain}
.lb-caja button{position:absolute; background:none; border:0; color:#fff; font-size:44px; line-height:1; cursor:pointer; padding:8px 14px; opacity:.8}
.lb-caja button:hover{opacity:1}
.lb-x{top:10px; right:12px}
.lb-ant{left:6px; top:50%; transform:translateY(-50%)}
.lb-sig{right:6px; top:50%; transform:translateY(-50%)}
body.trabado{overflow:hidden}
@media (prefers-reduced-motion:reduce){a.lb img,.hero-video{transition:none}}