/* =====================================================================
   Catalogo de la Comunidad — estilos
   Paleta:  dorado (header)  ·  verde ensueno (banners)
            lavanda (categorias)  ·  rosa (tarjetas)  ·  chispa dorada
   Tipos:   Fraunces (display)  +  Nunito (texto)
   ===================================================================== */

:root{
  --fondo:      #FBF6EF;
  --tinta:      #40364F;   /* texto principal, ciruela grisaceo */
  --tinta-suave:#6E6280;

  --oro-1:      #F4C95D;   /* boton amarillo claro */
  --oro-2:      #E3A62F;   /* boton amarillo profundo */
  --oro-borde:  #C98A1E;

  --verde-velo: rgba(98, 99, 98, 0); /* velo sobre banners */

  --lavanda-1:  #B9B8EC;
  --lavanda-2:  #9A97E0;
  --lavanda-borde:#8480D4;

  --rosa-1:     #F2C0EC;
  --rosa-2:     #E79BDC;
  --rosa-velo:  rgba(82, 40, 40, 0);
  --rosa-borde: #D98CCF;

  --chispa:     #F6C64B;

  --sombra:     0 10px 30px rgba(64, 54, 79, .12);
  --radio:      18px;
  --ancho:      1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Nunito", system-ui, sans-serif;
  color:var(--tinta);
  background:
    radial-gradient(1200px 500px at 50% -10%, #FDEFD6 0%, transparent 60%),
    var(--fondo);
  line-height:1.5;
}
h2,h3{ font-family:"Fraunces", Georgia, serif; font-weight:600; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- CABECERA con botones amarillos ---------- */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:rgba(251,246,239,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,138,30,.18);
}
.nav{
  max-width:var(--ancho); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,1.4vw,18px);
  padding:12px 16px;
  flex-wrap:wrap;
}
.nav__grupo{ display:flex; gap:clamp(6px,1.2vw,14px); flex-wrap:wrap; justify-content:center; }
.btn-sub{
  font-weight:800; font-size:.95rem; letter-spacing:.2px;
  padding:11px 20px; border-radius:12px;
  color:#5b3d05;
  background:linear-gradient(180deg, var(--oro-1), var(--oro-2));
  border:1px solid var(--oro-borde);
  box-shadow:0 4px 0 var(--oro-borde), 0 8px 18px rgba(227,166,47,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-sub:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn-sub:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--oro-borde); }
.logo{
  flex:0 0 auto;
  width:56px; height:56px; border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #FBDB8C, var(--oro-2));
  border:2px solid var(--oro-borde);
  box-shadow:0 6px 16px rgba(227,166,47,.4);
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- CARRUSEL de banners (disolucion) ---------- */
.carrusel{
  position:relative;
  max-width:var(--ancho); margin:22px auto 0;
  padding:0 16px;
}
.carrusel__pista{
  position:relative;
  height:clamp(220px, 34vw, 420px);
  border-radius:26px; overflow:hidden;
  box-shadow:var(--sombra);
}
.banner{
  position:absolute; inset:0; margin:0;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.6s ease, transform 6s ease;
  pointer-events:none;
}
.banner::after{ /* velo verde de ensueno */
  content:""; position:absolute; inset:0;


}
.banner.is-activo{ opacity:1; transform:scale(1); pointer-events:auto; }
.banner__texto{
  position:relative; z-index:2;
  color:#fff; padding:clamp(18px,3vw,40px);
  text-shadow:0 2px 14px rgba(0,0,0,.35);
  max-width:60ch;
}
.banner__texto h2{ font-size:clamp(1.5rem, 3.4vw, 2.7rem); line-height:1.05; }
.banner__texto p{ margin:.4rem 0 0; font-weight:600; opacity:.95; }
.carrusel__puntos{
  display:flex; gap:9px; justify-content:center;
  margin-top:14px;
}
.punto{
  width:10px; height:10px; border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(64,54,79,.22);
  transition:transform .2s, background .2s, width .2s;
}
.punto.is-activo{ background:var(--oro-2); width:26px; border-radius:6px; }

/* ---------- CATEGORIAS (circulos lavanda) ---------- */
.categorias{
  max-width:var(--ancho); margin:34px auto 8px;
  padding:0 16px;
  display:flex; gap:clamp(10px,2vw,26px);
  overflow-x:auto; scroll-snap-type:x proximity;
  justify-content:center; flex-wrap:wrap;
}
.cat{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--tinta-suave); font-weight:700; font-size:.85rem;
  scroll-snap-align:center;
}
.cat__circulo{
  width:66px; height:66px; border-radius:50%;
  overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--lavanda-1), var(--lavanda-2));
  border:2px solid transparent;
  box-shadow:0 6px 16px rgba(122,118,212,.28);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cat__circulo img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat__circulo--todas{ color:#fff; font-weight:800; font-size:.9rem; }
.cat:hover .cat__circulo{ transform:translateY(-3px) scale(1.03); }
.cat.is-activa .cat__circulo{
  border-color:var(--lavanda-borde);
  box-shadow:0 0 0 4px rgba(154,151,224,.28), 0 8px 20px rgba(122,118,212,.4);
}
.cat.is-activa{ color:var(--tinta); }

/* ---------- BARRA cerca de mi ---------- */
.barra-cerca{
  max-width:var(--ancho); margin:6px auto 0; padding:16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
}
.btn-cerca{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size:1rem; cursor:pointer;
  padding:13px 24px; border-radius:14px; color:#fff;
  background:linear-gradient(180deg,#7C79D6,#5F5CC2);
  border:1px solid var(--lavanda-borde);
  box-shadow:0 6px 18px rgba(95,92,194,.35);
  transition:transform .12s ease, filter .12s ease;
}
.btn-cerca:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-cerca__pin{ font-size:1.15rem; }
.btn-reset{
  background:none; border:1px dashed var(--tinta-suave);
  color:var(--tinta-suave); padding:10px 16px; border-radius:12px;
  cursor:pointer; font-weight:700;
}
.estado-cerca{ margin:0; width:100%; text-align:center; color:var(--tinta-suave); font-weight:600; min-height:1.2em; }

/* ---------- CUADRICULA de tarjetas rosas ---------- */
.catalogo{
  max-width:var(--ancho); margin:8px auto 60px; padding:0 16px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 2vw, 26px);
}
.tarjeta{
  position:relative;
  aspect-ratio:4/3; border-radius:var(--radio); overflow:hidden;
  background-size:cover; background-position:center;
  cursor:pointer;
  border:1px solid var(--rosa-borde);
  box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(155,60,140,.28); }
.tarjeta__velo{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  color:#fff;
  background:linear-gradient(180deg, transparent 30%, var(--rosa-velo) 100%);
}
.tarjeta__titulo{ font-size:1.15rem; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.tarjeta__dir{ margin:2px 0 0; font-weight:700; font-size:.82rem; opacity:.92; }
.tarjeta__contador{
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.9); color:#8b2c7d;
  font-weight:800; font-size:.72rem; padding:5px 10px; border-radius:999px;
}
.tarjeta__distancia{
  position:absolute; top:12px; left:12px;
  background:linear-gradient(180deg,#7C79D6,#5F5CC2); color:#fff;
  font-weight:800; font-size:.72rem; padding:5px 10px; border-radius:999px;
  box-shadow:0 4px 10px rgba(95,92,194,.4);
}
.tarjeta.oculta{ display:none; }
.sin-resultados{ grid-column:1/-1; text-align:center; color:var(--tinta-suave); font-weight:700; padding:40px 0; }

/* ---------- PIE ---------- */
.pie{
  text-align:center; padding:34px 16px 46px;
  color:var(--tinta-suave); font-weight:700;
  border-top:1px solid rgba(201,138,30,.14);
}

/* ---------- LIGHTBOX de galeria ---------- */
.lightbox{
  position:fixed; inset:0; z-index:60;
  background:rgba(30,20,34,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:20px;
  animation:aparece .25s ease;
}
.lightbox[hidden]{ display:none; }   /* respeta el atributo hidden */
@keyframes aparece{ from{opacity:0} to{opacity:1} }
.lightbox__marco{ margin:0; max-width:min(900px, 92vw); text-align:center; }
/* contenido agrupado y centrado, todo junto a la imagen */
.lightbox__contenido{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:min(880px, 94vw);
}
.lightbox__fila{ display:flex; align-items:center; gap:12px; }
.lightbox__imgwrap{ position:relative; display:inline-block; line-height:0; }
.lightbox__img{
  display:block;
  max-height:64vh; max-width:min(720px, 78vw); width:auto;
  border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.5);
}
/* barra de compartir ARRIBA de la imagen (fuera de ella) */
.lightbox__compartir{
  display:flex; gap:12px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-bottom:2px;
}
.lightbox__pie{ color:#fff; margin:0; font-weight:700; }
.lightbox__cerrar{
  position:absolute; top:16px; right:20px;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  font-size:1.2rem; color:#fff; background:rgba(255,255,255,.15);
}
/* flechas AL LADO de la imagen (no en los bordes de la pantalla) */
.lightbox__flecha{
  flex:0 0 auto;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  font-size:1.9rem; line-height:1; color:#fff; background:rgba(255,255,255,.18);
  transition:background .15s ease;
}
.lightbox__flecha:hover, .lightbox__cerrar:hover{ background:rgba(255,255,255,.34); }
/* miniaturas justo debajo de la imagen */
.lightbox__miniaturas{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.lightbox__miniaturas img{
  width:64px; height:46px; object-fit:cover; border-radius:8px; cursor:pointer;
  opacity:.55; border:2px solid transparent; transition:opacity .15s, border-color .15s;
}
.lightbox__miniaturas img.is-activa{ opacity:1; border-color:var(--chispa); }
@media (max-width:520px){
  .lightbox__flecha{ width:40px; height:40px; font-size:1.5rem; }
  .lightbox__img{ max-width:70vw; }
  .lightbox__miniaturas img{ width:48px; height:36px; }
}

/* ---------- CANVAS de chispas ---------- */
#chispas{
  position:fixed; inset:0; z-index:55;
  pointer-events:none;
}

/* ---------- Responsivo ---------- */
@media (max-width:860px){
  .catalogo{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .catalogo{ grid-template-columns:1fr; }
  .cat__circulo{ width:56px; height:56px; font-size:1.35rem; }
  .btn-sub{ padding:9px 14px; font-size:.85rem; }
  .logo{ width:46px; height:46px; font-size:1.4rem; }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .banner{ transition:opacity .4s ease; transform:none !important; }
  html{ scroll-behavior:auto; }
  #chispas{ display:none; }
}

/* Foco visible por teclado */
:focus-visible{ outline:3px solid var(--lavanda-2); outline-offset:3px; border-radius:8px; }

/* ---------- BOTONES DE COMPARTIR (dentro de la galeria) ---------- */
.social{
  font:inherit; font-weight:800; font-size:.95rem;
  color:#fff; cursor:pointer; text-decoration:none;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px; padding:11px 22px;
  display:inline-flex; align-items:center; gap:8px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.2);
  transition:background .14s ease, transform .12s ease;
}
.social:hover{ background:rgba(255,255,255,.32); transform:translateY(-2px); }
.social--fb:hover{ background:#1877F2; border-color:#1877F2; }
.social--ig:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color:transparent; }
.social--wa:hover{ background:#25D366; border-color:#25D366; }
@media (max-width:520px){
  .social{ font-size:.82rem; padding:9px 16px; }
  .lightbox__compartir{ gap:8px; }
}

/* Pagina interior (eventos / contacto): contenedor de texto */
.pagina{
  max-width:820px; margin:38px auto 60px; padding:0 20px;
}
.pagina h1{ font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--tinta); margin:0 0 8px; }
.pagina .intro{ color:var(--tinta-suave); font-weight:600; font-size:1.05rem; margin:0 0 26px; }
.evento{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid rgba(201,138,30,.16);
  border-radius:16px; padding:16px 18px; margin-bottom:14px;
  box-shadow:var(--sombra);
}
.evento__fecha{
  flex:0 0 auto; text-align:center; min-width:58px;
  background:linear-gradient(180deg,var(--oro-1),var(--oro-2)); color:#5b3d05;
  border-radius:12px; padding:8px 10px; font-weight:800; line-height:1.1;
}
.evento__fecha span{ display:block; font-size:1.5rem; }
.evento h3{ margin:0 0 4px; font-family:"Fraunces",serif; }
.evento p{ margin:0; color:var(--tinta-suave); font-weight:600; }

/* Formulario de contacto */
.form{ display:flex; flex-direction:column; gap:14px; }
.form label{ font-weight:800; color:var(--tinta); font-size:.9rem; display:flex; flex-direction:column; gap:6px; }
.form input, .form textarea{
  font:inherit; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(122,118,212,.35); background:#fff; color:var(--tinta);
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--lavanda-2); box-shadow:0 0 0 3px rgba(154,151,224,.25); }
.form button{
  align-self:flex-start; cursor:pointer;
  font-weight:800; color:#fff; padding:13px 26px; border-radius:14px; border:none;
  background:linear-gradient(180deg,#7C79D6,#5F5CC2);
  box-shadow:0 6px 18px rgba(95,92,194,.35);
}
.datos-contacto{ margin-top:26px; color:var(--tinta-suave); font-weight:600; line-height:1.9; }

/* ---------- Mensaje de estado del formulario de contacto ---------- */
.form-estado{ margin:6px 0 0; font-weight:700; min-height:1.2em; }
.form-estado.is-ok{ color:#2e8b57; }
.form-estado.is-error{ color:#c0392b; }

/* ---------- MAPA de Google Maps dentro de la galeria (diapositiva 3) ---------- */
.lightbox__mapa{
  width:min(720px, 78vw); height:64vh; border:0;
  border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.5);
  background:#e9e5ef; display:block;
}
/* miniatura del mapa */
.lightbox__miniaturas .mini-mapa{
  width:64px; height:46px; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:.7;
  display:grid; place-items:center; font-size:1.3rem; line-height:1;
  background:linear-gradient(135deg,#c9e7d2,#a7cbe8);
  transition:opacity .15s, border-color .15s;
}
.lightbox__miniaturas .mini-mapa.is-activa{ opacity:1; border-color:var(--chispa); }
@media (max-width:520px){
  .lightbox__miniaturas .mini-mapa{ width:48px; height:36px; font-size:1rem; }
}

/* ---------- Recuadro de direccion sobre el mapa (galeria) ---------- */
.lightbox__direccion{
  position:absolute; left:12px; right:12px; bottom:12px;
  background:rgba(30,20,34,.72); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:10px 14px;
  font-weight:700; font-size:.92rem; text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}