:root {  
--hero-offset: calc(min(100vw, 1920px) * (550 / 1920) * .58);
--hero-mobile-offset: calc(min(100vw, 1080px) * (300 / 1080) * .68);
}

/* ================= LAYOUT ================= */
.page-wrap{ position: relative; z-index: 1; }
.container-narrow {
max-width: 1500px;
margin-inline: auto; /* centrado horizontal */
padding-inline: clamp(12px, 4vw, 32px); /* respiración lateral adaptable */
}

/* Tarjetas “glass” */
.glass{
background: var(--vidrio);
border: 1px solid var(--borde);
border-radius: var(--radio);
box-shadow: var(--sombra);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}

@font-face {
  font-family: 'Lawler';
  src: url("../fonts/LAWLER.1bb417316dea.otf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Títulos con subrayado decorativo */
.section-title{
  font-family: 'Lawler', serif;
  font-weight: 700;
  letter-spacing: .3px;
  font-size: clamp(1.1rem, 1rem + 1vw, 1.3rem);
  margin-bottom: .5rem;
}


.event-name{
  font-family: 'Lawler', serif;
  font-size: 40px;
  margin-bottom: .5rem;
  color: #ffffff;
  text-shadow:
    0 6px 12px rgba(0,0,0,.6);
}

.section-underline{
width: 56px; height: 4px; border-radius: 3px;
margin-bottom: 1rem;
background: linear-gradient(90deg, #b2009a, transparent);
}

/* Encabezado principal */
.brand-title{
font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
font-weight: 800;
letter-spacing: .3px;
text-align:center;
margin: .5rem 0 0 0;
}
.brand-sub{
text-align:center;
opacity:.9; margin-bottom: 1rem;
}


/* Divider fino */
.divider{
height:1px; background: linear-gradient(90deg, transparent, var(--borde), transparent);
margin: 1rem 0 1.2rem 0;
}

/* Imagen del flyer */
.flyer{
width:100%; height:auto; border-radius: var(--radio);
box-shadow: var(--sombra);
border:1px solid var(--borde);
}

/* Enlaces suaves */
a{ color: var(--acento); }
a:hover{ color: #fffffe; }

/* Pequeños detalles tipográficos */
.muted{ opacity:.8; }
.lead{ font-size: clamp(1.02rem, 1rem + .5vw, 1.25rem); }


/* ====== FAQ custom style ====== */
#faq {
border-radius: 20px;
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.05); /* glass effect */
}

#faq .section-title {
font-size: 2rem;
font-weight: 800;
text-align: center;
margin-bottom: 0.5rem;
}

#faq .section-underline {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #b2009a, transparent);
margin: 0 auto 1.5rem auto;
border-radius: 2px;
}

/* Accordion general */
.accordion-item {
background: rgba(0, 0, 0, 0.25);
border: none;
margin-bottom: 10px;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
}

.accordion-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Botones de preguntas */
.accordion-button {
font-size: 1.1rem;
font-weight: 600;
padding: 1rem 1.25rem;
background: transparent;
color: var(--tinta);
border: none;
box-shadow: none;
}

.accordion-button:not(.collapsed) {
color: #5fb13b; /* color acento cuando está abierto */
background: rgba(0, 0, 0, 0.35);
}

/* Flecha de toggle */
.accordion-button::after {
filter: invert(1) brightness(1.5);
transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
transform: rotate(90deg);
}

/* Respuestas */
.accordion-body {
font-size: 1rem;
padding: 1rem 1.5rem;
color: #e5e5e5;
line-height: 1.6;
}



/* ====== Sección Incluye (estilo) ====== */
section.incluye {
border-radius: 20px;
backdrop-filter: blur(12px);
background: rgba(255,255,255,0.05);

}

.incluye .section-title {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: .5px;
text-align: center;
}

.incluye .section-subtitle {
text-align: center;
font-size: .98rem;
opacity: .9;
margin-top: .35rem;
margin-bottom: 1rem;
}

.incluye .badges {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
margin-bottom: 1rem;
}

.incluye .badge {
padding: .35rem .6rem;
border-radius: 999px;
font-size: .82rem;
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.08);
}

.incluye .features-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: .75rem .9rem;
}

@media (max-width: 768px){
.incluye .features-grid { grid-template-columns: 1fr; }
}

.incluye .features-grid li {
display: grid;
grid-template-columns: 2rem 1fr;
align-items: start;
gap: .6rem;
padding: .75rem .85rem;
border-radius: 14px;
background: rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.06);
}

.incluye .icon {
font-size: 1.25rem;
line-height: 1;
display: inline-block;
transform: translateY(2px);
}

.incluye .feat-title {
display: block;
font-weight: 700;
margin-bottom: .15rem;
}

.incluye .feat-desc {
display: block;
font-size: .95rem;
opacity: .9;
}

.incluye .note-strong {
margin-top: 1rem;
font-weight: 700;
text-align: center;
}

.incluye .muted {
font-size: .92rem;
opacity: .8;
margin-top: .35rem;
text-align: center;
}



/* ===== Layout: Próximo evento ===== */

#eventos { /* compacta el padding inferior del section */
padding-bottom: clamp(8px, 1.2vw, 14px);
}

#eventos .evento-wrap{
display:grid;
grid-template-columns: 1fr;      /* móvil */
gap:1rem;
align-items:stretch;             /* iguala alturas */
}
@media (min-width: 992px){
#eventos .evento-wrap{ grid-template-columns: 1.8fr 1fr; }
}
#eventos .evento-wrap > *{ min-width:0; align-items: stretch;  }

/* Izquierda: tarjeta con glass */
.evento-card.glass{
height:auto;
display:flex; flex-direction:column;
border-radius:20px;
backdrop-filter:blur(12px);
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
padding-bottom:22px !important;
}
.evento-card .section-title{ font-size:1.6rem; font-weight:800; letter-spacing:.3px; }
.evento-card .divider{ height:1px; background:rgba(255,255,255,.12); margin:.6rem 0 1rem; }

/* Chips */
.chips-row > *{ min-width:0; }
.chip{
display:inline-flex; align-items:center; gap:.45rem;
padding:.45rem .7rem; border-radius:999px; font-size:.92rem;
background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
white-space:nowrap; max-width:100%;
}
.chip--date strong{ overflow:hidden; text-overflow:ellipsis; display:inline-block; }
@media (max-width:576px){
.chip{ white-space:normal; line-height:1.25; font-size:.86rem; padding:.38rem .6rem; flex:1 1 100%; }
.chip--date{ width:100%; }
}

/* Temática */
.chip-full{
display:block; padding:.65rem 1rem; border-radius:14px; font-size:.95rem; line-height:1.5;
background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
margin:.5rem 0;
}
.chip-full strong{ display:block; font-weight:700; margin-bottom:.2rem; }

/* Fases */
.fases{ display:grid; gap:.55rem; margin-top:.6rem; }
.fase-item{
display:flex; justify-content:space-between; align-items:center; gap:.75rem;
padding:.6rem .8rem; border-radius:12px; background:rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.06);
}
.fase-nombre,.fase-precio{ font-weight:700; }
.badge-agotada{
padding:.25rem .55rem; border-radius:999px; font-size:.78rem;
background:rgba(255,0,72,.18); border:1px solid rgba(255,0,72,.35); color:#ff8aa3;
}


.btn-cta{
display:inline-flex;             
align-self:flex-start;            
gap:.5rem;
padding:.9rem 1.1rem;
border-radius:14px;
font-weight:800; text-transform:uppercase;
background:linear-gradient(90deg,#0097b2,#5fb13b);
color:#ffffff; text-decoration:none; border:none;
box-shadow:0 6px 16px rgba(0,0,0,.3);
}

.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.35); color:#931d8d}
.muted{ opacity:.8; font-size:.95rem; }



/* Paleta local y tipografía (escopado para evitar conflictos) */
.gogo-reveal{
--bg:#0b0614; --bg2:#180d2a; --fog:#3a1338;
--fg:#fff7e6; --muted:#ffdcb3; --accent:#ffffff; --accent-weak:#4a2200;
--glass: rgba(255,255,255,.06);
--glass-bd: rgba(255,255,255,.14);
position: relative;
height: 100%;
}

.gogo-reveal {
display: flex;
flex-direction: column;
height: 100%; /* ocupa toda la altura de la celda */
}

/* Countdown card */
.gogo-countdown{
position: relative;
display:flex; place-items:center; text-align:center;
padding: clamp(16px,3.5vw,28px);
border-radius: 22px;
background: linear-gradient(180deg, rgba(74,34,0,.35), rgba(74,34,0,.15));
border:1px solid rgba(255,255,255,.18);
color: var(--fg);
overflow:hidden;
isolation:isolate;
height: 10px;
}

/* halo cálido */
.gogo-countdown .cd-glow{
position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.gogo-countdown .cd-glow::before{
content:""; position:absolute; inset:auto; left:50%; top:20%;
width:min(65vmin,560px); height:min(65vmin,560px); transform:translateX(-50%);
border-radius:50%;
background:
radial-gradient(closest-side, rgba(255,140,55,.22), transparent 70%),
radial-gradient(closest-side, rgba(255,140,55,.08), transparent 80%);
filter: blur(18px);
box-shadow:0 0 80px rgba(255,140,55,.08);
}

/* chispas */
.gogo-countdown .cd-sparks{
position:absolute; inset:0; pointer-events:none; opacity:.28; z-index:-1;
background:
radial-gradient(2px 2px at 18% 30%, rgba(255,140,55,.8), transparent 60%),
radial-gradient(2px 2px at 72% 18%, rgba(255,140,55,.8), transparent 60%),
radial-gradient(2px 2px at 84% 66%, rgba(255,140,55,.8), transparent 60%),
radial-gradient(2px 2px at 28% 74%, rgba(255,140,55,.8), transparent 60%);
animation: gogoTwinkle 5s linear infinite alternate;
}
@keyframes gogoTwinkle{
from { opacity:.18; transform: scale(1); }
to   { opacity:.32; transform: scale(1.02); }
}


@media (min-width: 761px){
.gogo-countdown{
display:grid;
grid-template-rows: auto 1fr auto; 
min-height:100%;
padding: clamp(14px, 2.2vw, 22px); 
}
.gogo-countdown .cd-head{ margin-bottom: .6rem; }
.gogo-countdown .cd-timer{
align-self:center; justify-self:center; /* centrado perfecto en la fila media */
margin:.4rem 0 .2rem;
}
.gogo-countdown .cd-hint{ margin-top:.4rem; }
}

@media (max-width: 760px){
.gogo-countdown{
display:grid;
grid-template-rows: auto 1fr auto; /* top / centro flexible / bottom */
min-height:100%;
padding: clamp(14px, 2.2vw, 22px); /* un poco menos de “aire” */
}
.gogo-countdown .cd-head{ margin-bottom: .6rem; }
.gogo-countdown .cd-timer{
align-self:center; justify-self:center; /* centrado perfecto en la fila media */
margin:.4rem 0 .2rem;
}
.gogo-countdown .cd-hint{ margin-top:.4rem; }
}



.cd-head{ margin-bottom: .8rem; }
.cd-logo{
width: clamp(80px, 12vw, 120px); height:auto; display:block;
margin: 0 auto .4rem;
filter: drop-shadow(0 10px 30px rgba(0,0,0,.3));
}

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

.cd-title{
font-family: "Ahkio", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-weight: 400; letter-spacing:.4px; line-height:1;
font-size: clamp(22px, 4.2vw, 36px);
margin:10; color:var(--fg);
text-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 18px rgba(255, 255, 255, 0.15);
}

.cd-sub{
margin:.25rem 0 0; color:var(--muted); font-size: clamp(13px, 2.4vw, 16px);
}

/* reloj */
.cd-timer{
margin: .8rem 0;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: clamp(22px, 5.8vw, 40px);
color: var(--accent);
padding: .6rem 1rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 28px rgba(255, 255, 255, 0.15);
background: linear-gradient(180deg, rgba(249, 248, 248, 0.35), rgba(74,34,0,.15));
}
.cd-hint{ color:var(--muted); font-size: clamp(12px,2.4vw,14px); }

/* Tarjeta gogo */
.gogo-card{
display:flex; flex-direction:column; gap:.6rem;
border-radius:20px;
background: var(--glass);
border: 1px solid var(--glass-bd);
box-shadow: 0 12px 30px rgba(0,0,0,.35);
backdrop-filter: blur(10px);
padding: clamp(10px, 2.6vw, 16px);
opacity:0; filter: blur(10px) saturate(0.7);
transform: translateY(8px);
transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.gogo-card .gogo-title{
font-weight:700; letter-spacing:.4px;
color:var(--fg); opacity:.9;
}
.gogo-card .gogo-media{
border-radius:16px; overflow:hidden; aspect-ratio: 4/5; /* ajusta si necesitas */
background: #0003;
}
.gogo-card .gogo-media img{
display:block; width:100%; height:100%; object-fit:cover;
}
.gogo-card .gogo-nombre{
font-size: clamp(16px, 3.4vw, 20px);
color: var(--muted);
}


@media (min-width: 761px){
.gogo-card{
display:flex; flex-direction:column;
min-height:100%;               /* ocupa toda la columna */
padding: clamp(10px, 1.8vw, 16px);
}
.gogo-card .gogo-media{
flex:1;                         /* ← se estira */
min-height:0;                   /* evita overflow en flex */
border-radius:16px; overflow:hidden;
}
.gogo-card .gogo-media img{
width:100%; height:100%; object-fit:cover; display:block;
}
.gogo-card .gogo-nombre{
margin-top:.45rem;
}
}

/* Estado revelado */
.gogo-reveal.revealed .gogo-countdown{ display:none; }
.gogo-reveal.revealed .gogo-card{
opacity:1; filter: blur(0) saturate(1);
transform: translateY(0);
}

/* Fallback: si JS no corre, se muestra la tarjeta */
.no-js .gogo-countdown{ display:none !important; }
.no-js .gogo-card{
opacity:1; filter:none; transform:none;
}





/* Contenedor con glass suave para toda la sección */
#ubicacion .ubic-wrap{
display: grid;
gap: clamp(14px, 2vw, 20px);
border-radius: 22px;
padding: clamp(16px, 2.4vw, 26px);
background: rgba(255,255,255,.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 992px){
#ubicacion .ubic-wrap{
grid-template-columns: 1.1fr 1.3fr; /* copy | media */
align-items: stretch;
}
}

/* Botones Maps */
.btn-maps {
display:inline-flex; align-items:center; gap:.5rem;
padding:.7rem 1rem; border-radius:12px; font-weight:700;
background:rgba(0,0,0,.35); color:#e9ecef; text-decoration:none;
border:1px solid rgba(255,255,255,.12);
transition:transform .08s ease, box-shadow .2s ease;
}
.btn-maps:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.35); }
.maps-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }

/* Copy */
#ubicacion .lead{ margin: .4rem 0 1rem; opacity: .95; }
#ubicacion .ubic-bullets{
margin: 0; padding-left: 1.1rem; opacity: .95;
}
#ubicacion .ubic-bullets li{ margin: .35rem 0; }

/* Media: mapa arriba, foto abajo (o lado a lado si quieres) */
#ubicacion .ubic-media{
display: grid;
gap: 12px;
}
#ubicacion .ubic-map{
width: 100%; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden;
}
#ubicacion .ubic-map iframe{
width: 100%; height: 100%; border: 0;
filter: saturate(1.05) contrast(1.02);
}
#ubicacion .ubic-fac{
margin: 0; border-radius: 16px; overflow: hidden;
background: rgba(0,0,0,.15);
}
#ubicacion .ubic-fac img{
display:block; width:100%; height:100%; object-fit: cover;
}

/* En escritorio, puedes poner mapa y foto lado a lado dentro de media */
@media (min-width: 1200px){
#ubicacion .ubic-media{
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
}
#ubicacion .ubic-map,
#ubicacion .ubic-fac{ aspect-ratio: auto; height: 100%; }
}

/* ===== Galería libre ===== */
.galeria-libre { position: relative; }

.gl-track{
--gutter-left: 24px;
--gutter-right: 24px;
--gap: 0;
--track-pad-y: 55px;

position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw; /* ocupa todo el viewport real */

display:flex;
align-items:center;
gap: var(--gap);
overflow-x:auto;
overflow-y:visible;
padding: var(--track-pad-y) 0;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
cursor: grab;
scroll-snap-type:x mandatory;
scroll-padding-left: var(--gutter-left);
scroll-padding-right: var(--gutter-right);
}

.gl-track::before,
.gl-track::after{
content:"";
flex: 0 0 var(--gutter-left);
}
.gl-track::after{ flex-basis: var(--gutter-right); }

.gl-track:active{ cursor: grabbing; }
.gl-track::-webkit-scrollbar{ height:0; }
.gl-track{ scrollbar-width: none; }

/* ===== Ítems ===== */
.gl-item{
position:relative;
flex:0 0 auto;
scroll-snap-align: start;
transform: scale(var(--scale,1));
transition: transform .25s ease, opacity .25s ease, z-index .25s;
z-index: var(--z, 0);
opacity: var(--alpha, 1);
}

/* Imagen base */
.gl-item img{
display:block;
height:auto;
width:100%;
max-width:100vw;  /* 🔒 nunca más ancha que la pantalla */
max-height:600px;
object-fit:contain;
border-radius:16px;
}

.gl-cap{
text-align:center;
margin-top:.4rem;
font-size:.9rem;
color:#dcdcdc;
}
.gl-cap .muted{ opacity:.7; }

@media (pointer:coarse){
.gl-item{ filter:none; }
}

/* ===== En móviles / tablets ===== */
@media (max-width: 900px){
.gl-track{
--gutter-left: 58px;
--gutter-right: 20px;
--track-pad-y: 24px;
}

.gl-item{
flex: 0 0 auto;
}

.gl-item img{
width:80%;             
max-width:100vw;    
height:auto;
max-height:90vh;     
}

.gl-cap{
font-size:.85rem;
line-height:1.3;
white-space:normal;
overflow-wrap:break-word;
}
}

/* ===== Desktop grande ===== */
@media (min-width: 992px){
.gl-track{
--gutter-left: 48px;
--gutter-right: 48px;
}
.gl-item img{
max-height:600px;
width:auto;
height:auto;
}
}