/* =========================================================
   Macss — Detalles premium
   1. Barra de avisos (texto que se desplaza)
   2. Intro de marca al entrar
   3. Grano de película sobre toda la página
   4. Cursor "Ver" sobre las zapatillas
   5. Segunda vista al pasar el cursor por el catálogo
   6. Botón flotante de WhatsApp
   7. Acordeón de información en la ficha
   ========================================================= */

:root {
  --anuncio-alto: 32px;
}

/* ---------- 1. Barra de avisos ---------- */
.nav {
  height: auto;
  transition:
    background var(--medio) var(--ease),
    border-color var(--medio),
    transform var(--medio) var(--ease);
}

.nav-interior {
  height: var(--nav-alto);
}

/* Al bajar, la barra de avisos se esconde y queda solo la navegación */
.nav.con-fondo {
  transform: translateY(calc(-1 * var(--anuncio-alto)));
}

.anuncio {
  height: var(--anuncio-alto);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
  background: rgba(10, 10, 10, 0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.anuncio-pista {
  display: flex;
  flex-shrink: 0;
  gap: 48px;
  padding-right: 48px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
  animation: anuncio 38s linear infinite;
}

.anuncio-pista span::before {
  content: "✦";
  margin-right: 48px;
  color: var(--texto-tenue);
}

.anuncio:hover .anuncio-pista {
  animation-play-state: paused;
}

@keyframes anuncio {
  to { transform: translateX(-100%); }
}

/* La portada deja espacio para la barra */
.galeria {
  padding-top: calc(var(--nav-alto) + var(--anuncio-alto) + 40px);
}

.galeria::before {
  top: calc(var(--nav-alto) + var(--anuncio-alto));
}

/* ---------- 2. Intro de marca ----------
   Funciona solo con CSS: aunque falle el JavaScript, desaparece sola. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #0d0d0e;
  pointer-events: none; /* nunca bloquea los clics, aunque la animación se quede a medias */
  animation: intro-salida 700ms var(--ease) 1150ms forwards;
}

.intro-contenido {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.intro-marca {
  font-family: var(--fuente-marca);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: 1;
  color: var(--texto);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  animation: intro-marca 900ms var(--ease) 100ms forwards;
}

.intro-linea {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 180, 0.8), transparent);
  transform: scaleX(0);
  animation: intro-linea 800ms var(--ease) 350ms forwards;
}

@keyframes intro-marca {
  to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes intro-linea {
  to { transform: scaleX(1); }
}

@keyframes intro-salida {
  to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

/* ---------- 3. Grano de película ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 4. Cursor "Ver" ---------- */
.cursor-ver {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 20, 20, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto);
  pointer-events: none;
  opacity: 0;
  scale: 0.4;
  transition:
    opacity 250ms var(--ease),
    scale 350ms var(--ease);
}

.cursor-ver.activo {
  opacity: 1;
  scale: 1;
}

.con-cursor-ver .repisa-zapatilla {
  cursor: none;
}

/* ---------- 5. Segunda vista en el catálogo ---------- */
.tarjeta-imagen .tarjeta-alt {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition:
    opacity var(--medio) var(--ease),
    transform var(--lento) var(--ease);
}

.tarjeta-imagen .tarjeta-principal {
  transition:
    opacity var(--medio) var(--ease),
    transform var(--lento) var(--ease);
}

@media (hover: hover) {
  .tarjeta:hover .tarjeta-imagen:has(.tarjeta-alt) .tarjeta-principal {
    opacity: 0;
  }
  .tarjeta:hover .tarjeta-alt {
    opacity: 1;
  }
}

/* ---------- 6. WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: rgba(22, 22, 23, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  color: var(--texto);
  transform: translateY(0);
  transition:
    transform var(--medio) var(--ease),
    border-color var(--rapido),
    opacity var(--medio);
}

.wa-flotante svg {
  width: 22px;
  height: 22px;
  color: #6fd38a;
}

.wa-flotante:hover {
  border-color: rgba(111, 211, 138, 0.6);
  transform: translateY(-2px);
}

/* Se esconde mientras está abierta la ficha o el carrito */
body.sin-scroll .wa-flotante {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

@media (max-width: 700px) {
  .wa-flotante {
    width: 52px;
    padding: 0;
    justify-content: center;
  }
  .wa-flotante span {
    display: none;
  }
}

/* ---------- 7. Acordeón en la ficha ---------- */
.ficha-acordeon {
  margin-top: auto;
  padding-top: 24px;
}

.ficha-acordeon details {
  border-top: 1px solid var(--linea);
}

.ficha-acordeon details:last-child {
  border-bottom: 1px solid var(--linea);
}

.ficha-acordeon summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: var(--texto-sm);
  cursor: pointer;
  list-style: none;
}

.ficha-acordeon summary::-webkit-details-marker {
  display: none;
}

.ficha-acordeon summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  color: var(--texto-suave);
  transition: transform var(--medio) var(--ease);
}

.ficha-acordeon details[open] summary::after {
  transform: rotate(45deg);
}

.ficha-acordeon details p {
  padding: 0 0 16px;
  font-size: var(--texto-sm);
  line-height: 1.6;
  color: var(--texto-suave);
}

.ficha-confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--texto-tenue);
}

.ficha-confianza span::before {
  content: "✓";
  margin-right: 6px;
  color: #7fbf8e;
}

/* ---------- 8. Categorías con foto (estilo "Shop by activity") ---------- */
.categorias {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.categoria {
  position: relative;
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
  border-radius: 8px;
  background: var(--fondo-elevado);
  text-align: left;
  isolation: isolate;
}

.categoria img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(0.85) brightness(0.85);
  transition:
    transform 900ms var(--ease),
    filter var(--medio);
}

/* Degradado para que el texto se lea sobre cualquier foto */
.categoria::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 35%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 35%);
}

/* Marco del filtro activo */
.categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--medio) var(--ease);
}

.categoria.activo::after {
  box-shadow: inset 0 0 0 2px var(--texto);
}

.categoria-nombre {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
}

.categoria-cantidad {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-size: 10px;
  letter-spacing: var(--espaciado-letras);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.categoria:hover img {
  transform: scale(1.06);
  filter: saturate(1) brightness(0.95);
}

.categoria.activo img {
  filter: saturate(1) brightness(1);
}

@media (max-width: 860px) {
  /* En celular las categorías se deslizan de lado */
  .categorias {
    grid-auto-columns: 42%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--margen));
    padding-inline: var(--margen);
    scroll-padding-inline: var(--margen);
  }
  .categorias::-webkit-scrollbar {
    display: none;
  }
  .categoria {
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .categorias {
    grid-auto-columns: 62%;
  }
}

/* ---------- 9. Redes sociales del pie de página ---------- */
.redes {
  margin-top: 48px;
}

.redes-titulo {
  margin-bottom: 18px;
  font-size: var(--texto-md);
  font-weight: 500;
}

.redes-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  list-style: none;
}

.redes-lista a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--texto);
  transition:
    transform var(--rapido) var(--ease),
    opacity var(--rapido);
}

.redes-lista svg {
  width: 34px;
  height: 34px;
}

.redes-lista a:hover {
  transform: translateY(-2px);
  opacity: 0.75;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
  .anuncio-pista {
    animation: none;
  }
}