/* ============================================================
   Astra Creative Audio — navegacion.css (29-oct-2026)
   El catálogo por constelaciones y la barra inferior del móvil.
   Reutiliza las variables de estilos.css: nada de colores sueltos
   salvo transparencias de --cyan y --violeta.
   ============================================================ */

/* ---------- Las puertas: una por constelación ---------- */
.puertas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0 8px;
}
.puerta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 18px 74px;
  min-height: 84px;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--bg-2) 100%);
  color: var(--text);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.puerta:hover { text-decoration: none; border-color: rgba(77, 227, 255, .45); transform: translateY(-2px); }
.puerta b { font-size: 1.02rem; }
.puerta span:last-child { color: var(--muted); font-size: .84rem; }
.puerta-n {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Astra Titulos", "Arial Black", system-ui, sans-serif;
  font-size: 2.3rem;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* un par de estrellas fijas por puerta: la firma cósmica, sin animar */
.puerta::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 12px;
  width: 46px;
  height: 30px;
  background:
    radial-gradient(circle, var(--cyan) 0 1.4px, transparent 2px) 0 22px / 8px 8px no-repeat,
    radial-gradient(circle, var(--violeta-claro) 0 1.2px, transparent 2px) 20px 4px / 8px 8px no-repeat,
    radial-gradient(circle, var(--text) 0 1px, transparent 1.6px) 38px 16px / 8px 8px no-repeat;
  opacity: .55;
}

/* ---------- Constelaciones y filas ---------- */
.constelacion { margin-top: 46px; scroll-margin-top: 5rem; }
.constelacion-titulo {
  font-family: "Astra Titulos", "Arial Black", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .035em;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.constelacion-titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.fila-titulo {
  margin: 22px 0 10px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  scroll-margin-top: 5rem;
}
.fila-n {
  display: inline-block;
  margin-left: 6px;
  padding: 0 .45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: 0;
}

.fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.fila-pista { display: none; }

/* ---------- La tarjeta (un astro) ---------- */
.astro {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  scroll-margin-top: 5rem;
}
.astro:hover {
  border-color: rgba(139, 92, 246, .55);
  box-shadow: 0 10px 34px rgba(5, 6, 15, .6), 0 0 0 1px rgba(77, 227, 255, .12);
  transform: translateY(-3px);
}
.astro-enlace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 0 0 16px;
  color: var(--text);
}
.astro-enlace:hover { text-decoration: none; }
.astro-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: 8px;
  background: radial-gradient(ellipse at 50% 60%, rgba(139, 92, 246, .14) 0%, transparent 70%), var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* contain y no cover: los paneles tienen proporciones muy distintas y un panel recortado engaña */
.astro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .35s ease;
}
.astro:hover .astro-media img { transform: scale(1.04); }
.astro-cat,
.astro-nombre,
.astro-txt,
.astro-precio { padding-inline: 16px; }
.astro-cat {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.astro-nombre {
  font-family: "Astra Titulos", "Arial Black", system-ui, sans-serif;
  font-size: 1.22rem;
  line-height: 1.15;
}
.astro-nombre .fx {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.astro-txt { color: var(--muted); font-size: .9rem; line-height: 1.45; flex: 1; }
.astro-precio { font-size: .86rem; color: var(--text); margin-top: 4px; }
.astro-precio b { color: var(--cyan); font-size: 1rem; }
.astro-compra {
  margin: 0 16px 16px;
  padding: .55rem .9rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  font-size: .88rem;
  color: var(--bg);
  background: var(--grad);
}
.astro-compra:hover { text-decoration: none; filter: brightness(1.1); }

/* ---------- Móvil: filas que se deslizan ---------- */
@media (max-width: 759px) {
  .puertas { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .puerta { min-height: 66px; padding: 12px 16px 12px 64px; }
  .puerta-n { font-size: 1.9rem; left: 16px; }

  .constelacion { margin-top: 34px; }
  .fila {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* se sale del contenedor hasta el borde: se ve asomar la siguiente tarjeta */
    margin-inline: -1.25rem;
    padding: 2px 1.25rem 6px;
  }
  .fila::-webkit-scrollbar { display: none; }
  .astro { flex: 0 0 78%; scroll-snap-align: start; }
  .astro:hover { transform: none; }
  .fila-pista { display: block; margin: 6px 0 0; font-size: .74rem; color: var(--muted); text-align: right; }
  /* con una sola tarjeta no hay nada que deslizar */
  .fila:has(> .astro:only-child) + .fila-pista { display: none; }
  .fila > .astro:only-child { flex-basis: 100%; }
}

/* ---------- Barra inferior del móvil ---------- */
.dock { display: none; }

@media (max-width: 759px) {
  .dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.35fr;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(10, 13, 31, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(5, 6, 15, .7);
  }
  .dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 48px;
    justify-content: center;
    border-radius: 14px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
  }
  .dock a:hover, .dock a:focus-visible, .dock a.activo { color: var(--text); text-decoration: none; background: rgba(77, 227, 255, .08); }
  .dock svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: currentColor; }
  .dock svg path, .dock svg rect { fill: none; }
  .dock a.dock-prueba {
    color: var(--bg);
    background: var(--grad);
    font-size: .84rem;
    font-weight: 800;
  }

  /* que el pie y la burbuja de Astrini no queden debajo de la barra */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  #astrini-burbuja { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; right: 14px; }
  #astrini-burbuja img, #astrini-burbuja video { width: 50px; height: 50px; }
  #astrini-chat { bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .puerta, .astro, .astro-media img { transition: none; }
  .puerta:hover, .astro:hover, .astro:hover .astro-media img { transform: none; }
}

/* Mientras está abierto el aviso de cookies, la barra se aparta: no se tapan el uno al otro. */
body:has(#astra-cookies:not([hidden])) .dock { display: none; }

/* Una fila con una sola tarjeta (la voz): en ordenador va tumbada, imagen a la izquierda,
   para que no quede una columna suelta y un hueco enorme a la derecha. */
@media (min-width: 760px) {
  .fila:has(> .astro:only-child) { grid-template-columns: 1fr; }
  .astro:only-child .astro-enlace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 0;
    min-height: 300px;
  }
  .astro:only-child .astro-media {
    grid-column: 1;
    grid-row: 1 / span 5;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .astro:only-child .astro-cat,
  .astro:only-child .astro-nombre,
  .astro:only-child .astro-txt,
  .astro:only-child .astro-precio { grid-column: 2; padding-inline: 18px 26px; }
  .astro:only-child .astro-cat { padding-top: 28px; }
  .astro:only-child .astro-nombre { font-size: 1.6rem; }
  .astro:only-child .astro-precio { padding-bottom: 82px; }
  .astro:only-child .astro-compra {
    position: absolute;
    left: calc(53.5% + 22px);
    bottom: 26px;
    margin: 0;
    padding-inline: 1.6rem;
  }
}

/* ---------- Antes → después (js/escucha.js) ----------
   Una píldora sobre la imagen: en reposo invita a escuchar; sonando, dice si es el
   tramo sin plugin o con él y se va llenando de izquierda a derecha. */
.escucha {
  --p: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(77, 227, 255, .35);
  background:
    linear-gradient(90deg, rgba(77, 227, 255, .22) calc(var(--p) * 100%), transparent 0),
    rgba(10, 13, 31, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.escucha:hover, .escucha:focus-visible { border-color: var(--cyan); }
.escucha:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.escucha-icono {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--cyan);
}
.sonando .escucha-icono { width: 8px; height: 8px; border: 0; border-radius: 1px; background: var(--cyan); }
.escucha.despues {
  border-color: rgba(139, 92, 246, .7);
  background:
    linear-gradient(90deg, rgba(139, 92, 246, .32) calc(var(--p) * 100%), transparent 0),
    rgba(10, 13, 31, .82);
}
.escucha.despues .escucha-icono { background: var(--violeta-claro); }
.astro.sonando { border-color: rgba(77, 227, 255, .5); }
/* el navegador pidió un clic antes de dejar sonar: un aviso suave, una sola vez */
.escucha.pide-clic { border-color: var(--cyan); animation: escucha-aviso 1.2s ease 2; }
@keyframes escucha-aviso {
  50% { box-shadow: 0 0 0 6px rgba(77, 227, 255, .18); }
}
@media (max-width: 759px) {
  .escucha { min-height: 36px; padding-inline: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .escucha, .escucha.pide-clic { transition: none; animation: none; }
}