/* ==========================================================================
   Páginas interiores: fiestas, espacios, archivo de fotos, reseñas, legal
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera de página interior
   -------------------------------------------------------------------------- */

.portada {
  position: relative;
  /* Alto mínimo para que la foto se lea como un banner. Sin esto la portada
     medía lo que midiera el texto (a veces 330 px), el degradado la fundía a
     negro antes de terminar y quedaba un pozo negro entre la portada y la
     primera sección. */
  min-height: min(58svh, 520px);
  display: grid;
  align-content: center;
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem)) clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Y la sección que viene detrás no necesita todo su aire: ya lo ha puesto la
   portada. */
.portada + .seccion { padding-top: clamp(2.5rem, 5vw, 4rem); }

.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.portada__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.portada__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 10, .88) 0%, rgba(8, 7, 10, .74) 50%, var(--fondo) 100%),
    linear-gradient(110deg, rgba(227, 6, 19, .3) 0%, transparent 60%);
}

.portada__contenido { display: grid; gap: 1.1rem; max-width: 52rem; }

/* Migas de pan */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  color: var(--texto-tenue);
}

.migas a { transition: color .18s ease; }
.migas a:hover { color: var(--rojo-vivo); }
.migas li:not(:last-child)::after { content: '/'; margin-left: .45rem; opacity: .5; }
.migas [aria-current='page'] { color: var(--texto-medio); }

/* --------------------------------------------------------------------------
   Bloque "qué incluye tu fiesta"
   -------------------------------------------------------------------------- */

.incluye {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--superficie), transparent 80%);
}

/* Es un h2 por jerarquía (cuelga del h1 de la página), pero visualmente no
   debe competir con los títulos de sección: va un punto por debajo. */
.incluye h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Carrusel de fotos de local / finca
   -------------------------------------------------------------------------- */

/* La ficha quedaba plana: mismo tono que el fondo, borde casi invisible y las
   fotos pegadas al filo. Ahora tiene un fondo con algo de degradado, un borde
   que se ve y sombra propia, para que se lea como una tarjeta y no como un
   trozo suelto de página. */
.local {
  /* En columna para que el texto se quede el aire sobrante: si no, una ficha
     con el párrafo más corto sube sus fotos y su enlace unos píxeles y la fila
     entera queda desalineada. */
  display: flex;
  flex-direction: column;
  border: 1px solid #34303f;
  border-radius: var(--radio);
  overflow: hidden;
  background: linear-gradient(165deg, #1b1825 0%, #131019 60%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transition: border-color .28s ease, box-shadow .28s ease;
}

.local:hover {
  border-color: rgba(255, 17, 48, .4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 26px rgba(227, 6, 19, .18);
}

.local__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: 1.25rem clamp(1.1rem, 3vw, 1.75rem) .75rem;
}

.local__cabecera h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  margin-right: auto;
}

/* El número del espacio manda; el subtítulo acompaña, más discreto */
.local__cabecera h3 span {
  color: var(--texto-medio);
  font-family: 'Outfit', sans-serif;
  font-size: .82em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.local__meta {
  flex-shrink: 0;
  padding: .3rem .8rem;
  border: 1px solid rgba(255, 17, 48, .4);
  border-radius: var(--radio-pill);
  background: rgba(227, 6, 19, .12);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rojo-suave);
  white-space: nowrap;
}

.local__cuerpo {
  flex: 1 1 auto;
  padding: 0 clamp(1.1rem, 3vw, 1.75rem) 1.1rem;
  display: grid;
  gap: .9rem;
}

.local__cuerpo p {
  color: var(--texto-medio);
  max-width: 68ch;
}

.local__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.local__etiquetas li {
  padding: .3rem .75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, .03);
  font-size: .8rem;
  color: var(--texto-medio);
}

/* --------------------------------------------------------------------------
   Galería de fotos: mosaico o carrusel
   --------------------------------------------------------------------------
   Era siempre un carrusel, y en un portátil enseñaba 2,7 fotos de las ocho que
   hay: para verlas todas había que dar tres veces a la flecha. Las fotos son
   el producto, así que a partir de 900 px se enseñan todas de golpe en
   mosaico y el carrusel se queda para el móvil, que es donde deslizar con el
   dedo es lo natural.

   El número de columnas del mosaico lo reparte rejillas.js, igual que el resto
   de la web: ocho fotos salen 4×2 y nueve 3×3, nunca una fila coja.
   -------------------------------------------------------------------------- */

.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: .6rem;
  padding: 0 clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Oculta la barra nativa; la navegación va por botones y arrastre táctil */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrusel__pista::-webkit-scrollbar { display: none; }

/* La última foto se cortaba a hueso contra el filo de la tarjeta y parecía un
   error de maquetación. Con el desvanecido queda intencionado, y de paso avisa
   de que hay más fotos a la derecha. */
.carrusel[data-modo='carrusel'] .carrusel__pista {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4rem), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4rem), transparent 100%);
}

/* Al llegar al final ya no hay nada que insinuar */
.carrusel[data-fin='true'] .carrusel__pista {
  -webkit-mask-image: none;
  mask-image: none;
}

.carrusel__pista > * {
  flex: 0 0 min(84%, 420px);
  scroll-snap-align: start;
  border-radius: var(--radio-s);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--superficie-alta);
}

.carrusel__pista img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .4s ease;
}

.carrusel__pista > *:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   Modo mosaico: todas las fotos a la vez
   -------------------------------------------------------------------------- */

.carrusel[data-modo='mosaico'] .carrusel__pista {
  display: grid;
  gap: .6rem;
  overflow: visible;
  scroll-snap-type: none;
  /* El hueco de abajo lo pedía el carrusel para separar de las flechas; en
     mosaico deja el aire descompensado. */
  padding: clamp(1.1rem, 3vw, 1.75rem);
  /* rejillas.js pone las columnas que cuadren; esto es solo el respaldo */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.carrusel[data-modo='mosaico'] .carrusel__pista > * { flex: none; }

/* En mosaico no hacen falta ni flechas ni contador */
.carrusel[data-modo='mosaico'] .carrusel__btn,
.carrusel[data-modo='mosaico'] .carrusel__contador { display: none; }

/* --------------------------------------------------------------------------
   Flechas y contador (solo en carrusel)
   -------------------------------------------------------------------------- */

.carrusel__btn {
  position: absolute;
  top: calc(50% - 1.4rem);
  translate: 0 -50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 7, 10, .82);
  border: 1px solid var(--borde);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.carrusel__btn:hover { background: var(--rojo); border-color: var(--rojo); }

.carrusel__btn[disabled] { opacity: .25; pointer-events: none; }

.carrusel__btn--prev { left: clamp(.4rem, 1.5vw, .9rem); }
.carrusel__btn--next { right: clamp(.4rem, 1.5vw, .9rem); }

/* Cuántas fotos hay y en cuál vas. Sin esto la gente deja de deslizar antes
   de llegar al final, porque no sabe si quedan dos o diez. */
.carrusel__contador {
  position: absolute;
  top: clamp(.6rem, 2vw, 1rem);
  right: clamp(1.4rem, 3.5vw, 2rem);
  padding: .25rem .7rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde);
  background: rgba(8, 7, 10, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-medio);
  pointer-events: none;
}

.carrusel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* En táctil sobran las flechas: se navega deslizando */
@media (hover: none) {
  .carrusel__btn { display: none; }
}

/* --------------------------------------------------------------------------
   Visor de imagen a pantalla completa
   -------------------------------------------------------------------------- */

.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 3, 6, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}

.visor[data-abierto='true'] { opacity: 1; visibility: visible; }

.visor img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radio-s);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8);
}

.visor__cerrar {
  position: absolute;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  font-size: 1.5rem;
  line-height: 1;
  transition: background .2s ease;
}

.visor__cerrar:hover { background: var(--rojo); }

.visor__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background .2s ease;
}

.visor__nav:hover { background: var(--rojo); }
.visor__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.visor__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.visor__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; }

.visor__contador {
  position: absolute;
  bottom: clamp(.75rem, 3vw, 1.5rem);
  left: 50%;
  translate: -50% 0;
  font-size: .85rem;
  color: var(--texto-medio);
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Archivo de fotos (descarga con contraseña)
   -------------------------------------------------------------------------- */

.archivo__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.5rem;
}

.filtro {
  padding: .5rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  font-size: .88rem;
  font-weight: 600;
  color: var(--texto-medio);
  transition: all .2s ease;
}

.filtro:hover { border-color: var(--rojo-vivo); color: #fff; }

.filtro[aria-pressed='true'] {
  background: var(--degradado-rojo);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--brillo-rojo);
}

.buscador {
  position: relative;
  margin-bottom: 1.5rem;
}

.buscador input {
  width: 100%;
  padding: .95rem 1.1rem .95rem 3rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  color: var(--texto);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.buscador input::placeholder { color: var(--texto-tenue); }

.buscador input:focus {
  outline: none;
  border-color: var(--rojo-vivo);
  box-shadow: var(--brillo-rojo);
}

.buscador svg {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--texto-tenue);
  stroke-width: 2;
  pointer-events: none;
}

.eventos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}

.evento-foto {
  display: grid;
  gap: .8rem;
  padding: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .25s ease, transform .25s ease;
}

.evento-foto:hover { border-color: rgba(255, 17, 48, .45); transform: translateY(-3px); }

.evento-foto__cab { display: grid; gap: .3rem; }

.evento-foto h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}

.evento-foto time {
  font-size: .82rem;
  color: var(--texto-tenue);
  letter-spacing: .04em;
}

.evento-foto__form { display: flex; gap: .5rem; }

.evento-foto input {
  flex: 1;
  min-width: 0;
  padding: .7rem .95rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font-size: .93rem;
  color: var(--texto);
}

.evento-foto input:focus {
  outline: none;
  border-color: var(--rojo-vivo);
}

.evento-foto button {
  padding: .7rem 1.1rem;
  border-radius: var(--radio-s);
  background: var(--degradado-rojo);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  transition: box-shadow .2s ease;
}

.evento-foto button:hover { box-shadow: var(--brillo-rojo); }
.evento-foto button[disabled] { opacity: .55; pointer-events: none; }

.evento-foto__aviso {
  font-size: .86rem;
  line-height: 1.5;
  padding: .6rem .85rem;
  border-radius: var(--radio-s);
}

.evento-foto__aviso--error {
  background: rgba(227, 6, 19, .12);
  border: 1px solid rgba(227, 6, 19, .4);
  color: var(--rojo-suave);
}

.evento-foto__aviso--ok {
  background: rgba(37, 211, 102, .1);
  border: 1px solid rgba(37, 211, 102, .35);
  color: #6ee7a0;
}

.vacio {
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
  color: var(--texto-tenue);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

/* --------------------------------------------------------------------------
   Reseñas
   -------------------------------------------------------------------------- */

.resenas {
  /* Mosaico en columnas: las capturas tienen alturas muy distintas y así
     no quedan huecos enormes entre ellas. */
  column-count: 3;
  column-gap: 1rem;
}

@media (max-width: 900px) { .resenas { column-count: 2; } }
@media (max-width: 560px) { .resenas { column-count: 1; } }

.resenas img {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  break-inside: avoid;
  cursor: zoom-in;
  transition: border-color .25s ease, transform .25s ease;
}

.resenas img:hover {
  border-color: rgba(255, 17, 48, .5);
  transform: translateY(-3px);
}

.estrellas {
  display: inline-flex;
  gap: .15rem;
  color: #ffc531;
}

.estrellas svg { width: 20px; height: 20px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contacto-datos { display: grid; gap: 1.25rem; }

.dato {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.3rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .22s ease;
}

.dato:hover { border-color: rgba(255, 17, 48, .45); }

.dato__icono {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-s);
  background: rgba(227, 6, 19, .16);
  color: var(--rojo-vivo);
}

.dato__icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* El marcado usa h3 —dentro de una sección con h2 es lo que toca—; esto
   apuntaba a un h4 que no existía, así que las etiquetas salían como
   titulares enormes. */
.dato h3 {
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: .2rem;
}

.dato a, .dato p { color: var(--texto); font-size: 1rem; }
.dato a:hover { color: var(--rojo-vivo); }

/* --------------------------------------------------------------------------
   Páginas legales
   -------------------------------------------------------------------------- */

.legal { max-width: 46rem; }

.legal h2 { margin-bottom: 1.5rem; }

.legal h3 {
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  font-size: 1.2rem;
  color: var(--rojo-vivo);
}

.legal p, .legal li { color: var(--texto-medio); margin-bottom: .9rem; }

.legal ul { list-style: disc; padding-left: 1.5rem; }

.legal a { color: var(--rojo-vivo); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Aviso de cookies
   -------------------------------------------------------------------------- */

.cookies {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  z-index: 150;
  width: min(100% - 1.5rem, 560px);
  padding: 1.25rem 1.4rem;
  background: rgba(18, 16, 24, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  display: grid;
  gap: 1rem;
  transition: opacity .3s ease, translate .3s ease;
}

.cookies[hidden] { display: none; }

.cookies p { font-size: .9rem; color: var(--texto-medio); }

.cookies a { color: var(--rojo-vivo); text-decoration: underline; }

.cookies__botones { display: flex; flex-wrap: wrap; gap: .6rem; }

.cookies__botones .btn { flex: 1; min-width: 140px; padding: .7rem 1.2rem; font-size: .9rem; min-height: 42px; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.error404 {
  min-height: 70svh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.25rem;
  padding-block: calc(var(--nav-h) + 3rem) 4rem;
}

.error404 b {
  font-family: 'Anton', sans-serif;
  font-size: clamp(5rem, 22vw, 11rem);
  line-height: .85;
  background: var(--degradado-rojo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Testimonios
   --------------------------------------------------------------------------
   Son las tres reseñas firmadas que ya estaban en la web antigua. Se citan tal
   cual, solo con la falta de ortografía corregida y sin el nombre comercial de
   la sala (los espacios van sin nombre en toda la web).
   -------------------------------------------------------------------------- */

.testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap);
}

.testimonio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: linear-gradient(165deg, var(--superficie) 0%, transparent 85%);
  transition: border-color .28s ease, transform .28s ease;
}

.testimonio:hover {
  border-color: rgba(255, 17, 48, .4);
  transform: translateY(-4px);
}

/* Comilla de apertura, en grande y de fondo */
.testimonio::before {
  content: '“';
  position: absolute;
  top: -.35rem;
  right: 1rem;
  font-family: 'Anton', serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 17, 48, .16);
  pointer-events: none;
}

.testimonio blockquote {
  margin: 0;
  color: var(--texto-medio);
  font-size: 1rem;
  line-height: 1.7;
}

.testimonio figcaption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--borde);
}

.testimonio figcaption b {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}

.testimonio figcaption span {
  font-size: .85rem;
  color: var(--rojo-suave);
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   --------------------------------------------------------------------------
   Acordeón nativo con <details>/<summary>: se abre sin JavaScript, va con
   teclado y el buscador del navegador encuentra el texto aunque esté plegado.
   -------------------------------------------------------------------------- */

.faq-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 900px) {
  .faq-duo { grid-template-columns: 1fr; }
}

.faq { display: grid; gap: .7rem; }

.faq__item {
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  transition: border-color .22s ease;
}

.faq__item[open] { border-color: rgba(255, 17, 48, .4); }

.faq__item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}

/* Safari pinta su propio triángulo si no se le quita explícitamente */
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  margin-left: auto;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--rojo-vivo);
  border-bottom: 2px solid var(--rojo-vivo);
  rotate: 45deg;
  translate: 0 -.15em;
  transition: rotate .25s ease, translate .25s ease;
}

.faq__item[open] summary::after { rotate: -135deg; translate: 0 .1em; }

.faq__item summary:hover { color: #fff; }

.faq__respuesta {
  padding: 0 clamp(1rem, 2.5vw, 1.4rem) 1.15rem;
  color: var(--texto-medio);
}

.faq__respuesta p { margin: 0; max-width: 62ch; }

/* El testimonio que acompaña a las preguntas se queda a la vista al bajar */
.testimonio--suelto { position: sticky; top: calc(var(--nav-h) + 1.5rem); }

@media (max-width: 900px) {
  .testimonio--suelto { position: static; }
}

/* Listado de ciudades: pastillas, para que se lean de un vistazo y se toquen
   bien con el dedo */
.ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.ciudades a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--superficie);
  font-weight: 600;
  font-size: .95rem;
  color: var(--texto-medio);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.ciudades a:hover {
  border-color: var(--rojo-vivo);
  background: rgba(227, 6, 19, .1);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Índice de municipios
   -------------------------------------------------------------------------- */

.indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.indice-grupo h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.05rem;
  padding-bottom: .6rem;
  margin-bottom: .9rem;
  border-bottom: 2px solid var(--rojo);
}

.indice-grupo h3 small {
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--texto-tenue);
}

.indice-lista { display: grid; gap: .1rem; }

.indice-lista a,
.indice-lista span {
  display: block;
  padding: .3rem 0;
  font-size: .93rem;
}

.indice-lista a { color: var(--texto); }
.indice-lista a:hover { color: var(--rojo-vivo); }

/* Los municipios sin página propia se listan igual, para que la cobertura sea
   real, pero sin fingir que hay un enlace detrás. */
.indice-lista span { color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   Puerta de Instagram
   --------------------------------------------------------------------------
   Aparece en la tarjeta de la galería cuando la contraseña es correcta:
   primero seguirnos, después el botón de abrir las fotos. El degradado del
   botón de seguir es el de la marca de Instagram, que ahí es lo reconocible.
   -------------------------------------------------------------------------- */

.puerta-ig {
  display: grid;
  gap: .65rem;
  justify-items: stretch;
  margin-top: .9rem;
  text-align: center;
}

.puerta-ig p {
  font-size: .92rem;
  color: var(--texto);
}

.puerta-ig__seguir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border-radius: var(--radio-pill);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
  box-shadow: 0 8px 24px rgba(238, 42, 123, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.puerta-ig__seguir:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(238, 42, 123, .5);
}

.puerta-ig__seguir svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.puerta-ig__seguir svg [data-punto] { fill: currentColor; stroke: none; }

.puerta-ig__abrir {
  padding: .7rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--rojo);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}

.puerta-ig__abrir:disabled {
  background: var(--superficie-alta);
  color: var(--texto-tenue);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Otras fiestas
   --------------------------------------------------------------------------
   Cierra cada página de fiesta con las otras seis. Quien entra buscando
   Halloween acaba muchas veces contratando una graduación, y hasta ahora no
   tenía forma de tropezarse con ella: desde aquí solo se salía por el menú.

   Van con el nombre grande y debajo, en pequeño, para quién es cada una: sin
   esa línea "Universiparty" y "Fiestas light" no le dicen nada a quien no
   conoce la casa.
   -------------------------------------------------------------------------- */

.otras-fiestas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .7rem;
}

.otra-fiesta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: .3rem;
  align-content: center;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .01) 65%);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Filo rojo que se enciende, como en las tarjetas del resto de la web */
.otra-fiesta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--degradado-rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.otra-fiesta:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 17, 48, .5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.otra-fiesta:hover::before { transform: scaleX(1); }

.otra-fiesta__nombre {
  font-family: 'Anton', 'Outfit', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--texto);
}

.otra-fiesta__quien {
  font-size: .82rem;
  color: var(--texto-medio);
  line-height: 1.35;
}

.otra-fiesta::after {
  content: '→';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--rojo-vivo);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.otra-fiesta:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* --------------------------------------------------------------------------
   Vídeos verticales
   --------------------------------------------------------------------------
   El formato de móvil, el mismo que sube a Instagram. Se ven en fila, y en
   pantallas estrechas se deslizan con el dedo en vez de apilarse: cuatro
   vídeos de 9:16 uno debajo de otro son cuatro pantallas de scroll.

   Arrancan con el cartel puesto y sin descargar nada. El vídeo pesa 12 MB; el
   cartel, 15 KB.
   -------------------------------------------------------------------------- */

/* En móvil los vídeos van en carriles deslizantes, UNO POR ORIENTACIÓN: un
   carril mezclado ponía apaisados de 178 px junto a verticales de 425 y
   quedaban colgados a media altura con el hueco negro debajo. Los carriles
   los monta videos.js al agrupar. */
.videos-v {
  display: flex;
  flex-direction: column;
  gap: clamp(.8rem, 2.5vw, 1.2rem);
}

.videos-v__carril {
  display: flex;
  align-items: flex-start;
  gap: clamp(.6rem, 1.5vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: .5rem;
  scrollbar-width: none;
}

.videos-v__carril::-webkit-scrollbar { display: none; }

/* El carril de apaisados enseña casi uno entero y el asomo del siguiente */
.videos-v__carril--ancho .video-v--ancho { flex: 0 0 min(88%, 26rem); }

/* Los contenedores del reparto de escritorio no pintan nada por sí mismos
   en móvil, por si un cambio de tamaño pilla la estructura a medias. */
.videos-v__banda,
.videos-v__fila,
.videos-v__cuatro { display: contents; }

@media (min-width: 760px) {
  /* En escritorio el reparto lo montan bandas y filas; el carril se disuelve */
  .videos-v__carril { display: contents; }
}

/* A partir de tablet caben todos: se reparten y se acabó el deslizamiento.
   Los apaisados y los verticales van en rejillas separadas —16:9 y 9:16 en la
   misma fila no cuadran nunca: o la fila crece hasta el vertical y los
   apaisados nadan, o se recortan—. El número de columnas de cada grupo lo
   calcula videos.js con el mismo repartidor que las demás rejillas. */
@media (min-width: 760px) {
  .videos-v {
    display: flex;
    flex-direction: column;
    /* videos.js lee este hueco para calcular las medidas: si se cambia aquí,
       el reparto se entera solo. */
    gap: 12px;
    overflow: visible;
    align-items: stretch;
  }

  .videos-v__banda,
  .videos-v__fila {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  /* El vertical se cambia de lado en cada banda */
  .videos-v__banda--derecha { flex-direction: row-reverse; }

  /* Fila que no llena el ancho porque se topó el alto: al centro */
  .videos-v__fila--centrada { justify-content: center; }
}

/* Sección con uno o dos vídeos: modo charla. El titular y la entradilla dejan
   de flotar encima de un vídeo huérfano y se ponen a su lado, como una ficha
   de Instagram con su texto. La clase la pone videos.js al contar. */
@media (min-width: 900px) {
  .seccion--video-lado .contenedor {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
  .seccion--video-lado .cabecera-seccion { margin-bottom: 0; }

  /* La lista y el botón que acompañan al reel respiran entre sí */
  .seccion--video-lado .cabecera-seccion .lista-check { margin: 1.4rem 0; }

  .videos-v__cuatro {
    display: grid;
    gap: 12px;
  }

  /* Las medidas las pone videos.js al píxel; aquí solo se quitan los topes
     que traen las fichas del carril de móvil. */
  .videos-v .video-v,
  .videos-v .video-v--ancho { max-width: none; min-width: 0; }

  .videos-v .video-v__media { width: 100%; object-fit: cover; }
}

.video-v {
  position: relative;
  flex: 0 0 min(72%, 15rem);
  scroll-snap-align: center;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.video-v:hover { border-color: rgba(255, 17, 48, .5); box-shadow: var(--sombra-card); }

.video-v__media {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  cursor: pointer;
}

/* --- Botón de reproducir, centrado --- */
.video-v__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(227, 6, 19, .9);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, opacity .25s ease;
}

.video-v__play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }

.video-v:hover .video-v__play { transform: scale(1.08); background: var(--rojo-vivo); }

/* Mientras corre, el botón se aparta */
.video-v--sonando .video-v__play { opacity: 0; pointer-events: none; }

/* --- Sonido, arriba a la derecha --- */
.video-v__sonido {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(8, 7, 10, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.video-v__sonido:hover { background: rgba(8, 7, 10, .85); border-color: var(--rojo-vivo); }
.video-v__sonido svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Pie --- */
.video-v__pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem .85rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--texto);
  background: linear-gradient(transparent, rgba(8, 7, 10, .9));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Detalle de espacio
   -------------------------------------------------------------------------- */

/* La portada de un espacio no necesita la altura épica de las de fiesta:
   aquí manda la galería, que viene justo debajo. */
.portada--compacta { min-height: clamp(20rem, 45vh, 26rem); }

.aviso-anonimo {
  max-width: 52rem;
  margin-inline: auto;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(255, 17, 48, .35);
  border-radius: var(--radio-s);
  background: rgba(227, 6, 19, .06);
}

.aviso-anonimo p { margin: 0; color: var(--texto-medio); font-size: .93rem; line-height: 1.6; }
.aviso-anonimo strong { color: var(--texto); }

.local__pie { padding: 0 clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.75rem); }

/* Aftermovie horizontal: ocupa el ancho de dos verticales y va en 16:9 */
.video-v--ancho { flex: 0 0 min(92%, 30rem); }
.video-v--ancho .video-v__media { aspect-ratio: 16 / 9; }

@media (min-width: 760px) {
  /* Dentro de su propio grupo ya no necesita ocupar dos columnas */
  .video-v--ancho { grid-column: auto; }
}

/* Los pasos del contacto respiran más que los del bloque de fotos */
.pasos--anchos { max-width: 44rem; }
.pasos--anchos li { font-size: 1.02rem; padding: .95rem 1.15rem; }

/* Dentro de una ficha de local el carrusel mide unos 370 px, y con el 84 % de
   asomo la foto se quedaba en 264: siempre se veía una foto y media cortada.
   Aquí va una entera por vista, a sangre de lado a lado.
   El relleno lateral tiene que irse: el `scroll-snap` alinea contra el borde
   de RELLENO, no contra el de contenido, así que con relleno siempre queda una
   franja a los lados por donde asoma la foto siguiente por mucho que la
   diapositiva mida el 100 %. Sin relleno, la foto ocupa justo lo que se ve.
   El desvanecido también sobra: sobre una foto entera parece que esté rota. */
.local .carrusel[data-modo='carrusel'] .carrusel__pista {
  padding-left: 0;
  padding-right: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.local .carrusel[data-modo='carrusel'] .carrusel__pista > * {
  flex-basis: 100%;
  /* A sangre: las esquinas redondeadas las pone la ficha */
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

/* `.duo` reparte por auto-fit las columnas que quepan: a 1180 px salen TRES.
   Con dos hijos la sobrante se colapsa sola y todo va bien, pero en contacto
   había un tercer hijo —el titular con `grid-column: 1/-1`— que la mantenía
   viva: los datos ocupaban un tercio, la foto otro y el último se quedaba en
   blanco. El titular ya está fuera; esto asegura las dos columnas. */
.duo--pareja { grid-template-columns: 1fr; align-items: stretch; }

@media (min-width: 900px) {
  .duo--pareja { grid-template-columns: 1fr 1fr; }
}

.contacto-datos { align-content: start; }

.dato__cuerpo { min-width: 0; }
.dato__cuerpo a { overflow-wrap: anywhere; }

/* La foto acompaña a la columna de datos en vez de quedarse flotando a media
   altura: crece hasta donde llegue la lista. */
.duo--pareja .duo__media { height: 100%; }
.duo--pareja .duo__media img { height: 100%; aspect-ratio: auto; min-height: 18rem; }