/* ==========================================================
   Noe y Moli — Social Dance Girona
   Identidad: noche cálida, guirnaldas de bombillas, dorado
   ========================================================== */

:root{
  --noche:#0D0A08;
  --brasa:#181110;
  --brasa-alta:#221816;
  --bombilla:#E8B44C;
  --bombilla-honda:#C08A2E;
  --crema:#F4E9D6;
  --humo:#A9998A;
  --borde:rgba(232,180,76,.22);

  --script:'Great Vibes', cursive;
  --titulo:'Oswald', 'Arial Narrow', sans-serif;
  --texto:'Barlow', system-ui, sans-serif;

  --ancho:1120px;
  --lectura:66ch;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--noche);
  color:var(--crema);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--bombilla);text-decoration:none;}
a:hover{text-decoration:underline;}

:focus-visible{
  outline:2px solid var(--bombilla);
  outline-offset:3px;
}

.envoltorio{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* ---------- Guirnalda ---------- */
.guirnalda{
  display:block;
  width:100%;
  height:46px;
  color:var(--bombilla);
  opacity:.85;
}
.guirnalda .cable{fill:none;stroke:rgba(232,180,76,.35);stroke-width:1.4;}
.guirnalda .bulbo{fill:var(--bombilla);}
.guirnalda .halo{fill:var(--bombilla);opacity:.22;}

@media (prefers-reduced-motion: no-preference){
  .guirnalda .bulbo{animation:latido 5.5s ease-in-out infinite;}
  .guirnalda .bulbo:nth-of-type(3n){animation-delay:-1.9s;}
  .guirnalda .bulbo:nth-of-type(3n+1){animation-delay:-3.4s;}
}
@keyframes latido{
  0%,100%{opacity:1;}
  50%{opacity:.62;}
}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(13,10,8,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.cabecera .envoltorio{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:72px;
}
.marca{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--crema);
  text-decoration:none;
}
.marca:hover{text-decoration:none;}
.monograma{
  width:40px;height:40px;
  flex:0 0 40px;
  border-radius:50%;
  border:1px solid var(--borde);
}
.marca span{
  font-family:var(--script);
  font-size:1.55rem;
  line-height:1;
  padding-top:.25rem;
  color:var(--bombilla);
}

.navegacion{display:flex;align-items:center;gap:1.6rem;}
.navegacion a{
  font-family:var(--titulo);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--crema);
}
.navegacion a:hover{color:var(--bombilla);text-decoration:none;}
.navegacion a[aria-current="page"]{color:var(--bombilla);}

.abrir-menu{
  display:none;
  background:none;
  border:1px solid var(--borde);
  border-radius:3px;
  color:var(--crema);
  font-family:var(--titulo);
  letter-spacing:.1em;
  font-size:.8rem;
  text-transform:uppercase;
  padding:.5rem .8rem;
  cursor:pointer;
}

@media (max-width:860px){
  .abrir-menu{display:block;}
  .navegacion{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--brasa);
    border-bottom:1px solid var(--borde);
    padding:.5rem 1.5rem 1.2rem;
    display:none;
  }
  .navegacion.abierta{display:flex;}
  .navegacion a{padding:.75rem 0;width:100%;}
}

/* ---------- Botones ---------- */
.boton{
  display:inline-block;
  font-family:var(--titulo);
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.85rem 1.7rem;
  border-radius:2px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.boton:hover{text-decoration:none;}
.boton-lleno{
  background:var(--bombilla);
  color:var(--noche);
  font-weight:500;
}
.boton-lleno:hover{background:#F3C86B;}
.boton-hueco{
  border:1px solid var(--bombilla);
  color:var(--bombilla);
}
.boton-hueco:hover{background:rgba(232,180,76,.12);}

.acciones{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:2rem;
}

/* ---------- Portada ---------- */
.portada{
  position:relative;
  min-height:clamp(480px, 78vh, 720px);
  display:flex;
  align-items:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(232,180,76,.22), transparent 62%),
    linear-gradient(180deg, #1E1512 0%, #0D0A08 100%);
}
.portada-foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.42;
}
.portada::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13,10,8,.55) 0%, rgba(13,10,8,.35) 45%, rgba(13,10,8,.95) 100%);
}
.portada .envoltorio{position:relative;z-index:2;padding-block:5rem;}

.portada-guirnalda{
  position:absolute;
  top:0;left:0;right:0;
  z-index:3;
}

.rotulo{
  font-family:var(--script);
  color:var(--bombilla);
  font-size:clamp(3.6rem, 11vw, 7rem);
  line-height:.9;
  margin:0;
  text-shadow:0 0 42px rgba(232,180,76,.42);
}
.rotulo-bajo{
  font-family:var(--titulo);
  font-weight:300;
  font-size:clamp(1.5rem, 5.2vw, 2.9rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  margin:.35rem 0 0;
  color:var(--crema);
}
.entradilla{
  max-width:46ch;
  margin:1.6rem auto 0;
  font-size:clamp(1.05rem, 2.2vw, 1.22rem);
  color:var(--crema);
}
.portada .acciones{justify-content:center;}

/* ---------- Secciones ---------- */
.seccion{padding-block:5rem;}
.seccion-brasa{background:var(--brasa);}
.seccion-ajustada{padding-block:3.5rem;}

h1,h2,h3{
  font-family:var(--titulo);
  font-weight:400;
  line-height:1.12;
  margin:0 0 1rem;
}
h1{font-size:clamp(2.2rem,6vw,3.4rem);letter-spacing:.02em;}
h2{font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:.05em;}
h3{font-size:1.2rem;letter-spacing:.06em;color:var(--bombilla);}

p{margin:0 0 1.15rem;max-width:var(--lectura);}
.seccion ul{max-width:var(--lectura);}

.centrado{text-align:center;}
.centrado p{margin-inline:auto;}

.destacado{
  font-family:var(--titulo);
  font-weight:300;
  font-size:clamp(1.3rem,3.4vw,1.9rem);
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--bombilla);
  max-width:24ch;
}

/* ---------- Rejilla de actividades ---------- */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1.6rem;
  margin-top:2.5rem;
}
.tarjeta{
  background:var(--brasa-alta);
  border:1px solid var(--borde);
  padding:2rem 1.6rem;
  display:flex;
  flex-direction:column;
}
.tarjeta h3{margin-bottom:.6rem;}
.tarjeta p{flex:1;color:var(--humo);margin-bottom:1.4rem;}
.tarjeta a{
  font-family:var(--titulo);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.82rem;
}

/* ---------- Galería ---------- */
.galeria{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.9rem;
  margin-top:2.5rem;
}
.galeria img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:saturate(.92);
  background:
    linear-gradient(135deg, #241A15, #14100E);
}
.galeria-ancha img{aspect-ratio:3/2;}

/* ---------- Datos del evento ---------- */
.ficha{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.4rem;
  margin-top:2.5rem;
  border-top:1px solid var(--borde);
  padding-top:2rem;
}
.ficha div h3{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--humo);margin-bottom:.4rem;}
.ficha div p{font-family:var(--titulo);font-size:1.15rem;color:var(--crema);margin:0;letter-spacing:.03em;}

/* ---------- Cita de comunidad ---------- */
.citas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.6rem;
  margin-top:2.5rem;
}
.cita{
  border-left:2px solid var(--bombilla);
  padding:.2rem 0 .2rem 1.4rem;
}
.cita p{font-style:italic;color:var(--crema);margin-bottom:.5rem;}
.cita span{font-family:var(--titulo);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--humo);}

/* ---------- Preguntas ---------- */
.preguntas{margin-top:2.5rem;max-width:var(--lectura);}
.pregunta{
  border-top:1px solid var(--borde);
  padding:1.5rem 0;
}
.pregunta:last-child{border-bottom:1px solid var(--borde);}
.pregunta h3{
  color:var(--crema);
  font-size:1.12rem;
  letter-spacing:.02em;
  margin-bottom:.6rem;
}
.pregunta p{color:var(--humo);margin-bottom:0;}
.pregunta p + p{margin-top:.8rem;}

/* ---------- Listas ---------- */
.lista-limpia{list-style:none;padding:0;margin:1.5rem 0 0;}
.lista-limpia li{
  padding:.75rem 0 .75rem 1.7rem;
  position:relative;
  border-bottom:1px solid rgba(232,180,76,.12);
  color:var(--crema);
}
.lista-limpia li::before{
  content:"";
  position:absolute;
  left:0;top:1.35rem;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--bombilla);
  box-shadow:0 0 8px rgba(232,180,76,.7);
}

/* ---------- Bloque llamada ---------- */
.llamada{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,180,76,.16), transparent 60%),
    var(--brasa);
  border-top:1px solid var(--borde);
  text-align:center;
  padding-block:4.5rem;
}
.llamada h2{color:var(--crema);}
.llamada p{margin-inline:auto;color:var(--humo);}

/* ---------- Pie ---------- */
.pie{
  background:var(--noche);
  border-top:1px solid var(--borde);
  padding-block:3rem;
  font-size:.95rem;
  color:var(--humo);
}
.pie .envoltorio{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
}
.pie h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--humo);}
.pie ul{list-style:none;padding:0;margin:0;}
.pie li{margin-bottom:.45rem;}
.pie a{color:var(--crema);}
.pie a:hover{color:var(--bombilla);}
.pie-legal{
  border-top:1px solid var(--borde);
  margin-top:2.5rem;
  padding-top:1.5rem;
  text-align:center;
  font-size:.85rem;
}

/* ---------- WhatsApp flotante ---------- */
.flotante{
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:50;
  background:var(--bombilla);
  color:var(--noche);
  font-family:var(--titulo);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.8rem;
  padding:.8rem 1.2rem;
  border-radius:40px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.flotante:hover{text-decoration:none;background:#F3C86B;}

@media (max-width:520px){
  .seccion{padding-block:3.5rem;}
  .flotante{font-size:.74rem;padding:.7rem 1rem;}
}