/* Fundación Morei · página de sedes (26-oct-2026)
   Se apoya en /estilos.css y /programas/programas.css (cabecera, .prog-hero, .migas, .etiqueta, .prog-bloque).
   Cada sede fija su bombillo con --acento. El coral sigue siendo solo para donar. */

/* --- Hero: mapa de vuelo --- */
.sedes-hero .envoltura { grid-template-columns: 1.15fr .85fr; }
.sedes-saltos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; padding: 0; list-style: none; }
.sedes-saltos a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--linea); font-weight: 600; text-decoration: none; color: var(--indigo);
  transition: border-color .2s, transform .2s;
}
.sedes-saltos a:hover { border-color: var(--azul-real); transform: translateY(-1px); }
.sedes-saltos a::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }

.prog-hero .mapa-vuelo { margin: 0; justify-self: center; width: 100%; max-width: 17rem; position: relative; }
.mapa-vuelo svg { width: 100%; height: auto; overflow: visible; }
.mapa-vuelo .rio { fill: none; stroke: var(--celeste); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.mapa-vuelo .rio-nombre { fill: var(--turquesa); font: italic 600 9.5px var(--texto); letter-spacing: .06em; }
.mapa-vuelo .mar { fill: var(--cielo-suave); }
.mapa-vuelo .mar-nombre { fill: var(--azul-real); font: 600 10px var(--texto); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.mapa-vuelo .vuelo { fill: none; stroke: var(--azul-real); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; }
.mapa-vuelo .punto-halo { fill: var(--c); opacity: .22; transform-box: fill-box; transform-origin: center; animation: latido 2.8s ease-in-out infinite; }
.mapa-vuelo .punto { fill: var(--c); stroke: var(--blanco); stroke-width: 3; }
.mapa-vuelo .ciudad { fill: var(--indigo); font: 400 15px var(--display); }
.mapa-vuelo .depto { fill: var(--tinta-suave); font: 600 9.5px var(--texto); letter-spacing: .08em; text-transform: uppercase; }
.mapa-vuelo a:focus-visible { outline: none; }
.mapa-vuelo a:focus-visible .punto { stroke: var(--azul-real); }
.prog-hero .mapa-vuelo figcaption { position: static; max-width: none; margin-top: .4rem; padding: 0; background: none; box-shadow: none; font-size: .8rem; color: var(--tinta-suave); text-align: center; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.5); opacity: .08; } }

/* --- Bloque de cada sede --- */
.sede { padding-block: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: 80px; }
.sede + .sede { border-top: 1px solid var(--linea); }
.sede--cielo { background: var(--cielo-claro); }
.sede-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.sede-cabeza h2 { margin-top: .5rem; }
.sede-cabeza .depto { font-family: var(--display); color: var(--azul-real); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; }
.sello {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; background: var(--lima); color: var(--ala-noche);
}
.sello--nueva { background: color-mix(in srgb, var(--acento) 20%, var(--blanco)); color: var(--indigo); }
.sello svg { width: 16px; height: 16px; }

.sede-cuerpo { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.6rem, 4vw, 3.5rem); margin-top: clamp(1.8rem, 4vw, 2.8rem); align-items: start; }

/* Galería: una foto grande en arco y tres pequeñas */
.sede-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.sede-galeria li { margin: 0; position: relative; }
.sede-galeria li:first-child { grid-column: 1 / -1; }
.sede-galeria img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; aspect-ratio: 4 / 5; background: var(--cal-2); }
.sede-galeria li:first-child img { aspect-ratio: 3 / 2; border-radius: clamp(120px, 22vw, 260px) clamp(120px, 22vw, 260px) 18px 18px; }
.sede-galeria figcaption, .sede-galeria .pie-foto {
  position: absolute; left: .7rem; bottom: .7rem; right: .7rem; font-size: .78rem; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.foto-sola { max-width: 30rem; }
.foto-sola img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-arco); background: var(--cal-2); }

/* Ficha de datos */
.sede-ficha {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 24px; padding: clamp(1.3rem, 2.6vw, 1.9rem);
  position: relative; box-shadow: 0 24px 50px rgba(43, 55, 87, .08);
}
.sede-ficha::before { content: ""; position: absolute; top: -1px; left: 1.6rem; right: 1.6rem; height: 4px; border-radius: 0 0 4px 4px; background: var(--acento); }
.sede-ficha dl { margin: 0; display: grid; gap: 1.05rem; }
.sede-ficha dt { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-real); }
.sede-ficha dt svg { width: 18px; height: 18px; flex: none; color: var(--acento); }
.sede-ficha dd { margin: .25rem 0 0; }
.sede-ficha dd small { display: block; color: var(--tinta-suave); font-size: .9rem; }
.sede-ficha .acciones { display: grid; gap: .6rem; margin-top: 1.5rem; }
.sede-ficha .acciones .boton { justify-content: center; width: 100%; }
.boton-whatsapp { background: var(--verde); color: #fff; }
.boton-whatsapp:hover { background: var(--verde-tinta); }
.sede-ficha .boton svg { width: 20px; height: 20px; }

/* Reseña y población */
.sede-relato { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.6rem, 4vw, 3.5rem); margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.sede-relato h3 { margin-bottom: .8rem; }
.sede-relato p + p { margin-top: .9rem; }
.sede-relato .contexto { color: var(--tinta-suave); }
.poblacion { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .9rem 0 0; list-style: none; }
.poblacion li { padding: .4rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--acento) 14%, var(--blanco)); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); font-size: .92rem; }

.aviso-adecuacion {
  margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--cielo-claro);
  border: 1px dashed color-mix(in srgb, var(--azul-real) 35%, transparent); font-size: .95rem;
}
.sede--cielo .aviso-adecuacion { background: var(--blanco); }

@media (max-width: 960px) {
  .sedes-hero .envoltura, .sede-cuerpo, .sede-relato { grid-template-columns: 1fr; }
  .prog-hero .mapa-vuelo { justify-self: center; max-width: 15rem; }
}
@media (max-width: 520px) {
  .sede-galeria { gap: .5rem; }
  .sede-galeria figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-vuelo .punto-halo { animation: none; }
  .sedes-saltos a { transition: none; }
}