/* =========================================================
   Observatorio Astronómico "Dr. José Luis Sérsic"
   Tanti — Córdoba — Argentina
   ========================================================= */

/* ---------- 1. Variables ---------- */

:root {
  --noche:        #060812;
  --noche-2:      #0b0f1e;
  --superficie:   #111730;
  --borde:        #1e2745;
  --celeste:      #3fa9f5;
  --celeste-alto: #7fc7fa;
  --texto:        #e8ecf4;
  --tenue:        #97a3bb;
  --acento:       var(--celeste);

  --ancho:        1180px;
  --radio:        14px;
  --transicion:   .25s cubic-bezier(.4, 0, .2, 1);

  --fuente: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* Modo luz roja: para consultar el sitio dentro del área de observación
   sin arruinar la adaptación a la oscuridad. */
:root[data-modo="rojo"] {
  --noche:        #000000;
  --noche-2:      #0a0000;
  --superficie:   #140202;
  --borde:        #3a0808;
  --celeste:      #ff4030;
  --celeste-alto: #ff7060;
  --texto:        #ff5a48;
  --tenue:        #b33124;
  --acento:       #ff4030;
}

:root[data-modo="rojo"] img,
:root[data-modo="rojo"] video,
:root[data-modo="rojo"] iframe {
  filter: grayscale(1) sepia(1) hue-rotate(-38deg) saturate(5.5) brightness(.5);
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color var(--transicion), color var(--transicion);
}

img, video { max-width: 100%; height: auto; display: block; }

/* <picture> es inline por defecto: como acá siempre envuelve una imagen de
   bloque, en inline dejaría un hueco de línea base y rompería el recorte de
   los contenedores con overflow:hidden. */
picture { display: block; }

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.7rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }

p { margin: 0 0 1.15em; }

a { color: var(--celeste); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--celeste-alto); }

:focus-visible {
  outline: 2px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--celeste); color: #04070f;
  padding: .8rem 1.4rem; border-radius: 0 0 var(--radio) 0;
  font-weight: 700; z-index: 999;
}
.saltar:focus { left: 0; top: 0; }

/* ---------- 3. Tipografía de apoyo ---------- */

.antetitulo {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1rem;
}

.bajada {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--tenue);
  max-width: 62ch;
}

.chico { font-size: .88rem; color: var(--tenue); }

/* ---------- 4. Encabezado ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--noche) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.cabecera.fija {
  background: color-mix(in srgb, var(--noche) 96%, transparent);
  border-bottom-color: var(--borde);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img { height: 34px; width: auto; }

.nav { margin-left: auto; }
.nav__lista {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__enlace {
  display: block;
  padding: .55rem .85rem;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--texto);
}
.nav__enlace:hover { background: var(--superficie); color: var(--celeste); }
.nav__enlace[aria-current="page"] { color: var(--celeste); }

.acciones { display: flex; align-items: center; gap: .6rem; }

/* Botón de luz roja */
.luzroja {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  transition: var(--transicion);
}
.luzroja:hover { border-color: #ff4030; color: #ff4030; }
:root[data-modo="rojo"] .luzroja {
  border-color: #ff4030; color: #ff4030;
  box-shadow: 0 0 14px rgba(255, 64, 48, .45);
}
.luzroja svg { width: 19px; height: 19px; }

/* Menú móvil */
.hamburguesa {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hamburguesa span {
  display: block;
  width: 19px; height: 2px;
  margin: 4px auto;
  background: var(--texto);
  transition: var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transicion);
  white-space: nowrap;
}
.boton--primario {
  background: var(--celeste);
  color: #04070f;
}
.boton--primario:hover {
  background: var(--celeste-alto);
  color: #04070f;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--celeste) 65%, transparent);
}
.boton--fantasma {
  border-color: var(--borde);
  color: var(--texto);
  background: transparent;
}
.boton--fantasma:hover {
  border-color: var(--celeste);
  color: var(--celeste);
  transform: translateY(-2px);
}
.boton svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- 6. Portada ---------- */

.portada {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  align-items: center;
  padding: 130px 0 90px;
  overflow: hidden;
}
.portada__fondo {
  position: absolute; inset: 0;
  z-index: 0;
}
.portada__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
}
.portada__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 20% 30%, transparent, color-mix(in srgb, var(--noche) 88%, transparent) 75%),
    linear-gradient(to bottom, color-mix(in srgb, var(--noche) 70%, transparent), transparent 35%, var(--noche));
}
/* El canvas es un elemento reemplazado: con `inset: 0` y ancho automático
   conservaría su tamaño intrínseco (300×150) en vez de estirarse. */
#estrellas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.portada .contenedor { position: relative; z-index: 2; }

.portada__logo {
  width: clamp(220px, 30vw, 330px);
  margin-bottom: 2.2rem;
}
.portada h1 { max-width: 16ch; text-wrap: balance; }
.portada .bajada { margin-bottom: 2.2rem; }

.portada__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

.portada__coords {
  position: absolute;
  bottom: 2rem; right: 0;
  z-index: 2;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

/* Aviso de próxima quedada */
.proxima {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem 1.1rem .5rem .6rem;
  margin-bottom: 1.8rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  backdrop-filter: blur(8px);
  font-size: .87rem;
}
.proxima__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
  margin-left: .45rem;
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--acento) 0%, transparent); }
}
.proxima strong { color: var(--texto); }

/* ---------- 7. Secciones ---------- */

.seccion { padding: clamp(4rem, 9vw, 7rem) 0; }
.seccion--alterna { background: var(--noche-2); }

.seccion__encabezado { max-width: 68ch; margin-bottom: 3rem; }
.seccion__encabezado.centrado { margin-inline: auto; text-align: center; }
.seccion__encabezado.centrado .bajada { margin-inline: auto; }

/* Cabecera de páginas internas */
.cabecera-pagina {
  position: relative;
  padding: 160px 0 clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
}
.cabecera-pagina__fondo {
  position: absolute; inset: 0; z-index: 0;
}
.cabecera-pagina__fondo img {
  width: 100%; height: 100%; object-fit: cover; opacity: .28;
}
.cabecera-pagina__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--noche) 75%, transparent), var(--noche));
}
.cabecera-pagina .contenedor { position: relative; z-index: 1; }

.miga {
  font-size: .82rem;
  color: var(--tenue);
  margin-bottom: 1.2rem;
}
.miga a { color: var(--tenue); }
.miga a:hover { color: var(--celeste); }

/* ---------- 8. Grillas y tarjetas ---------- */

.grilla { display: grid; gap: 1.6rem; }
.grilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grilla--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.tarjeta {
  background: var(--noche-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.9rem;
  transition: var(--transicion);
}
.seccion--alterna .tarjeta { background: var(--superficie); }
.tarjeta:hover { border-color: color-mix(in srgb, var(--celeste) 45%, var(--borde)); }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p:last-child { margin-bottom: 0; }

.tarjeta__icono {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.2rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--celeste) 13%, transparent);
  color: var(--celeste);
}
.tarjeta__icono svg { width: 23px; height: 23px; }

/* Tarjeta con foto */
.tarjeta-foto {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--noche-2);
}
.tarjeta-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.tarjeta-foto:hover img { transform: scale(1.04); }
.tarjeta-foto__texto { padding: 1.5rem; }
.tarjeta-foto__texto h3 { margin-bottom: .35rem; }
.tarjeta-foto__texto p { margin: 0; }

/* ---------- 9. Bloque partido (texto + imagen) ---------- */

.partido {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.partido--invertido .partido__media { order: -1; }
.partido__media img {
  width: 100%;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
}
.partido__media figcaption {
  margin-top: .7rem;
  font-size: .82rem;
  color: var(--tenue);
}

/* ---------- 10. Listas ---------- */

.lista-marcada { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.lista-marcada li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .6rem;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: .25rem; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento);
}
.lista-marcada li:last-child { margin-bottom: 0; }

/* ---------- 11. Datos destacados ---------- */

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.dato {
  background: var(--noche);
  padding: 1.7rem 1.4rem;
  text-align: center;
}
.seccion--alterna .dato { background: var(--noche-2); }
.dato__valor {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--celeste);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dato__etiqueta {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* ---------- 12. Precios ---------- */

.precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.precio {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2rem 1.7rem;
  background: var(--noche-2);
  text-align: center;
  transition: var(--transicion);
}
.seccion--alterna .precio { background: var(--superficie); }
.precio--destacado {
  border-color: var(--celeste);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--celeste) 40%, transparent),
              0 20px 50px -30px var(--celeste);
}
.precio__etiqueta {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.precio__monto {
  display: block;
  margin: .8rem 0 .2rem;
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.precio__monto small {
  font-size: .95rem;
  font-weight: 600;
  color: var(--tenue);
  margin-right: .25rem;
  vertical-align: .35em;
}
.precio__nota { font-size: .84rem; color: var(--tenue); margin: 0; }
.precio__cinta {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--celeste);
  color: #04070f;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
}

.incluye {
  margin-top: 2rem;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem 1.8rem;
}
.incluye h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.incluye ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .4rem 1.5rem;
  list-style: none;
  padding: 0; margin: 0;
}
.incluye li { position: relative; padding-left: 1.6rem; font-size: .93rem; }
.incluye li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--acento);
  font-weight: 700;
}

/* ---------- 12 bis. Emblema de las Quedadas Estelares ---------- */

.emblema {
  display: grid;
  grid-template-columns: auto 1fr;   /* el ancho lo fija el propio archivo */
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}
.emblema__marca img {
  width: 100%;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
}
.emblema__texto h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.emblema__texto p { max-width: 58ch; }

/* El emblema tiene color propio: en modo luz roja no se tiñe con las fotos,
   se atenúa, para que siga siendo reconocible sin encandilar. */
:root[data-modo="rojo"] .emblema__marca img {
  filter: grayscale(1) sepia(1) hue-rotate(-38deg) saturate(4) brightness(.45);
}

@media (max-width: 640px) {
  .emblema { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .emblema__texto p { margin-inline: auto; }
}

/* ---------- 13. Normas ---------- */

.norma {
  border-top: 1px solid var(--borde);
  padding: 2.2rem 0;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1.4rem;
}
.norma:last-child { border-bottom: 1px solid var(--borde); }
.norma__numero {
  font-size: 1.5rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--celeste) 55%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.norma__cuerpo h3 { margin-bottom: .7rem; }
.norma__cuerpo > :last-child { margin-bottom: 0; }

.cita {
  margin: 0 0 2.5rem;
  padding: 1.6rem 2rem;
  border-left: 3px solid var(--acento);
  background: var(--noche-2);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.cita p {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  font-style: italic;
  margin: 0;
  color: var(--texto);
}
.cita cite {
  display: block;
  margin-top: .6rem;
  font-size: .85rem;
  font-style: normal;
  color: var(--tenue);
}

/* Aviso destacado */
.aviso {
  display: flex;
  gap: 1.1rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radio);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
  background: color-mix(in srgb, var(--acento) 7%, transparent);
  margin: 0 0 1.8rem;
}
.aviso svg { width: 22px; height: 22px; color: var(--acento); flex-shrink: 0; margin-top: .2rem; }
.aviso > div > :last-child { margin-bottom: 0; }
.aviso strong { color: var(--texto); }

.aviso--prohibido {
  border-color: color-mix(in srgb, #ff4d4d 38%, var(--borde));
  background: color-mix(in srgb, #ff4d4d 7%, transparent);
}
.aviso--prohibido svg { color: #ff6b6b; }

/* Áreas de observación */
.area {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.9rem;
  background: var(--noche-2);
}
.area--dura { border-color: color-mix(in srgb, var(--celeste) 42%, var(--borde)); }
.area__insignia {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.area--blanda .area__insignia { background: color-mix(in srgb, var(--celeste) 16%, transparent); color: var(--celeste); }
.area--dura   .area__insignia { background: var(--celeste); color: #04070f; }

/* ---------- 14. Cómo llegar ---------- */

.mapa {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--noche-2);
  aspect-ratio: 16 / 10;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.ruta { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.ruta li {
  position: relative;
  counter-increment: paso;
  padding: 0 0 2.2rem 3.6rem;
  border-left: 2px solid var(--borde);
  margin-left: 1.15rem;
}
.ruta li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ruta li::before {
  content: counter(paso);
  position: absolute;
  left: -1.2rem; top: -.15rem;
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  background: var(--noche);
  border: 2px solid var(--acento);
  color: var(--acento);
  font-weight: 800;
  font-size: .9rem;
}
.seccion--alterna .ruta li::before { background: var(--noche-2); }
.ruta h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.ruta p { margin-bottom: 0; }
.ruta__distancia {
  display: inline-block;
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: 999px;
  padding: .15rem .7rem;
}

.coordenadas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.coordenada { background: var(--noche-2); padding: 1.3rem 1.5rem; }
.coordenada dt {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: .35rem;
}
.coordenada dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .98rem;
  word-break: break-word;
}

.copiar {
  border: none;
  background: none;
  color: var(--tenue);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  padding: .2rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.copiar:hover { color: var(--celeste); }
.copiar svg { width: 13px; height: 13px; }

/* ---------- 15. Galería ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 2.5rem;
}
.filtro {
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transicion);
}
.filtro:hover { color: var(--texto); border-color: var(--tenue); }
.filtro[aria-pressed="true"] {
  background: var(--celeste);
  border-color: var(--celeste);
  color: #04070f;
}

.galeria {
  columns: 3 280px;
  column-gap: 1.1rem;
}
.galeria__item {
  break-inside: avoid;
  margin-bottom: 1.1rem;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--noche-2);
  cursor: zoom-in;
  display: block;
  width: 100%;
  padding: 0;
  position: relative;
  transition: var(--transicion);
}
.galeria__item[hidden] { display: none; }
.galeria__item:hover { border-color: var(--celeste); }
.galeria__item img { width: 100%; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.galeria__item:hover img { transform: scale(1.05); }
.galeria__pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem .9rem .8rem;
  background: linear-gradient(to top, rgba(4, 6, 14, .93), transparent);
  font-size: .84rem;
  font-weight: 600;
  text-align: left;
  color: var(--texto);
  opacity: 0;
  transition: opacity var(--transicion);
}
.galeria__item:hover .galeria__pie,
.galeria__item:focus-visible .galeria__pie { opacity: 1; }

/* Visor */
.visor {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(3, 4, 10, .96);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.visor[open] { display: grid; }
.visor__figura { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.visor__figura img {
  max-height: 82svh;
  width: auto;
  margin-inline: auto;
  border-radius: 8px;
}
.visor__figura figcaption {
  margin-top: 1rem;
  color: var(--tenue);
  font-size: .92rem;
}
.visor__cerrar, .visor__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: color-mix(in srgb, var(--noche) 80%, transparent);
  color: var(--texto);
  cursor: pointer;
  transition: var(--transicion);
}
.visor__cerrar:hover, .visor__nav:hover { border-color: var(--celeste); color: var(--celeste); }
.visor__cerrar { top: 1.3rem; right: 1.3rem; }
.visor__nav--ant { left: 1.3rem; top: 50%; transform: translateY(-50%); }
.visor__nav--sig { right: 1.3rem; top: 50%; transform: translateY(-50%); }
.visor svg { width: 20px; height: 20px; }

/* ---------- 16. Video ---------- */

.video-marco {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
}
.video-marco video { width: 100%; display: block; }

/* ---------- 17. Contacto ---------- */

.contacto-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--borde);
}
.contacto-item:first-child { padding-top: 0; }
.contacto-item:last-child { border-bottom: none; }
.contacto-item__icono {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--celeste) 13%, transparent);
  color: var(--celeste);
  flex-shrink: 0;
}
.contacto-item__icono svg { width: 20px; height: 20px; }
.contacto-item dt {
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: .2rem;
}
.contacto-item dd { margin: 0; font-weight: 600; font-size: 1.02rem; }

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.campo input, .campo textarea, .campo select {
  font: inherit;
  font-size: .96rem;
  color: var(--texto);
  background: var(--noche);
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: .8rem 1rem;
  transition: var(--transicion);
  width: 100%;
}
.seccion--alterna .campo input,
.seccion--alterna .campo textarea,
.seccion--alterna .campo select { background: var(--noche-2); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--celeste) 18%, transparent);
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo--doble { grid-template-columns: 1fr 1fr; gap: 1.1rem; display: grid; }

/* ---------- 18. Llamado final ---------- */

.llamado {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  overflow: hidden;
  border-top: 1px solid var(--borde);
}
.llamado__fondo { position: absolute; inset: 0; }
.llamado__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.llamado__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--noche) 12%, color-mix(in srgb, var(--noche) 55%, transparent));
}
.llamado .contenedor { position: relative; z-index: 1; }
.llamado h2 { max-width: 18ch; text-wrap: balance; }

/* ---------- 19. Pie ---------- */

.pie {
  background: var(--noche-2);
  border-top: 1px solid var(--borde);
  padding: 4rem 0 2rem;
  font-size: .93rem;
}
.pie__grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.pie__logo { width: 175px; margin-bottom: 1.2rem; }
.pie h4 {
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 1rem;
  font-weight: 700;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .55rem; }
.pie a { color: var(--texto); }
.pie a:hover { color: var(--celeste); }
.pie p { color: var(--tenue); }

.pie__base {
  border-top: 1px solid var(--borde);
  padding-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--tenue);
  font-size: .85rem;
}

.redes { display: flex; gap: .6rem; }
.redes a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--tenue);
  transition: var(--transicion);
}
.redes a:hover { border-color: var(--celeste); color: var(--celeste); }
.redes a[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.redes svg { width: 17px; height: 17px; }

/* ---------- 20. Animación de entrada ---------- */

.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.4, 0, .2, 1);
}
.revelar.visible { opacity: 1; transform: none; }

/* ---------- 21. Adaptación a pantallas chicas ---------- */

@media (max-width: 900px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 780px) {
  .hamburguesa { display: block; }
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--noche);
    border-bottom: 1px solid var(--borde);
    padding: 1rem 1.25rem 1.6rem;
    display: none;
  }
  .nav.abierta { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace { padding: .85rem .6rem; border-bottom: 1px solid var(--borde); border-radius: 0; }
  .nav__lista li:last-child .nav__enlace { border-bottom: none; }
  .acciones { margin-left: auto; }

  .partido--invertido .partido__media { order: 0; }
  .portada__coords { display: none; }
  .campo--doble { grid-template-columns: 1fr; }
  .galeria { columns: 2 150px; }
  .norma { grid-template-columns: 1fr; gap: .4rem; }
  .norma__numero { grid-row: auto; font-size: 1.1rem; }
  .visor__nav--ant { left: .5rem; }
  .visor__nav--sig { right: .5rem; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pie__grilla { grid-template-columns: 1fr; }
  .tarjeta { padding: 1.5rem; }
  .cita { padding: 1.2rem 1.3rem; }
  .portada__acciones .boton { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 22. Preferencias del usuario ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
  #estrellas { display: none; }
}

@media print {
  .cabecera, .pie__base, .portada__fondo, #estrellas,
  .llamado, .filtros, .visor, .hamburguesa, .acciones { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .seccion { padding: 1.2rem 0; }
  .norma { break-inside: avoid; }
  .tarjeta, .area, .cita { border-color: #999; background: none; }
}