/* ============================================================================
   Home (Inicio) — presentación de rubros.
   Reemplaza wwwroot/css/inicio.css. Usa los tokens de site.css; ningún color,
   tamaño ni espaciado suelto.
============================================================================ */

/* ---------------------------------------------------------------------------
   Hero de envíos — video de fondo con scrubbing por scroll (escritorio) y el
   mensaje "Enviamos a todo el país con Correo Argentino y Andreani". En
   escritorio la sección queda fija mientras la pista, más alta que el viewport,
   se desplaza por detrás: la barra de progreso avanza y el texto aparece
   escalonado (lo maneja hero-envios.js). En mobile no hay pin: el video se ve
   en un bloque de alto acotado con el texto encima, sin JS.
--------------------------------------------------------------------------- */

.hero-envios {
  margin-bottom: var(--esp-7);
}

.hero-envios-pista {
  position: relative;
}

.hero-envios-viewport {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tinta);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-2);
  min-height: 340px;
}

.hero-envios-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-envios-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 23, 20, 0.30), rgba(26, 23, 20, 0.70));
}

.hero-envios-progreso {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.20);
  z-index: 4;
}
.hero-envios-progreso span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--marca);
}

.hero-envios-contenido {
  position: relative;
  z-index: 3;
  padding: var(--esp-7) var(--esp-5);
  color: #fff;
  text-align: center;
}

.hero-envios-etiqueta {
  font-family: var(--fuente-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--txt-etiqueta);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--esp-2);
}

.hero-envios-titulo {
  font-size: var(--txt-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--esp-3);
  color: #fff;
}

.hero-envios-bajada {
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  margin: 0 auto;
}

/* Escritorio: pin + scroll encadenado. La posición y alto reales del viewport
   los ajusta hero-envios.js según la altura del header. */
@media (min-width: 992px) {
  .hero-envios-pista {
    height: 220vh;
  }

  .hero-envios-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 560px;
  }

  .hero-envios-contenido {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--esp-7) clamp(24px, 5vw, 72px);
  }

  .hero-envios-titulo {
    font-size: clamp(34px, 4vw, var(--txt-display));
  }

  .hero-envios-contenido [data-hero-reveal] {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-envios-contenido [data-hero-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Vidriera — banners de rubro (Tecnología / Perfumería) con scroll encadenado
   (pin + cross-fade). El texto es fijo y toda la tarjeta es un link al
   catálogo filtrado por ese rubro. En escritorio la sección queda fija en
   pantalla mientras la pista (más alta que el viewport) se desplaza por
   detrás, cruzando entre las 3 imágenes de producto. En mobile no hay pin:
   las 3 imágenes se muestran juntas, en fila, sin JS.
--------------------------------------------------------------------------- */

.vidriera-seccion {
  margin-bottom: var(--esp-7);
}

.vidriera-pista {
  position: relative;
}

.vidriera-viewport {
  position: relative;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.vidriera-progreso {
  display: none;
}

.vidriera-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5);
  padding: var(--esp-6) var(--esp-5);
  color: inherit;
  text-decoration: none;
}
.vidriera-grid:hover {
  color: inherit;
}

.vidriera-etiqueta {
  font-family: var(--fuente-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--txt-etiqueta);
  font-weight: 600;
  color: var(--marca);
  margin-bottom: var(--esp-2);
}

.vidriera-titulo {
  font-size: var(--txt-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--esp-2);
  color: var(--tinta);
}

.vidriera-bajada {
  color: var(--tinta-2);
  max-width: 46ch;
  margin-bottom: var(--esp-4);
}

.vidriera-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  min-height: 160px;
}

.vidriera-sombra {
  display: none;
}

.vidriera-imagen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vidriera-imagen img {
  max-height: 130px;
  max-width: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(26, 23, 20, 0.16));
}

.vidriera-nav {
  display: none;
}

/* Variante de color de marca (Perfumería): fondo rojo, texto y botón blancos. */
.vidriera-viewport--marca {
  background: var(--marca);
  border-color: var(--marca);
}
.vidriera-viewport--marca .vidriera-etiqueta {
  color: rgba(255, 255, 255, 0.85);
}
.vidriera-viewport--marca .vidriera-titulo {
  color: #fff;
}
.vidriera-viewport--marca .vidriera-bajada {
  color: rgba(255, 255, 255, 0.92);
}
.vidriera-viewport--marca .vidriera-sombra {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.35), transparent 72%);
}
.vidriera-viewport--marca .vidriera-imagen img {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}

.vidriera-btn-blanco {
  background: #fff;
  color: var(--marca);
  border-color: #fff;
}
.vidriera-btn-blanco:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--marca-hover);
  border-color: rgba(255, 255, 255, 0.9);
}

/* Escritorio: la pista se vuelve alta y el viewport queda fijo (sticky) para
   que el scroll dispare el cruce entre imágenes. La posición y altura reales
   del viewport se ajustan por JS según la altura del header. */
@media (min-width: 992px) {
  .vidriera-pista {
    height: 300vh;
  }

  .vidriera-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 560px;
  }

  .vidriera-progreso {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--borde);
    z-index: 4;
  }
  .vidriera-progreso span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--marca);
  }

  .vidriera-grid {
    height: 100%;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: var(--esp-6);
    padding: var(--esp-7) clamp(24px, 5vw, 72px);
  }

  .vidriera-titulo {
    font-size: clamp(34px, 4vw, var(--txt-display));
  }

  .vidriera-visual {
    min-height: 380px;
  }

  .vidriera-sombra {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: min(60%, 320px);
    height: 22px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(26, 23, 20, 0.16), transparent 72%);
    filter: blur(4px);
  }

  .vidriera-imagen {
    position: absolute;
    inset: 0;
    will-change: opacity, transform, filter;
  }
  .vidriera-imagen:not(:first-child) {
    opacity: 0;
  }
  .vidriera-imagen img {
    max-height: min(50vh, 400px);
  }

  .vidriera-nav {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    position: absolute;
    right: clamp(16px, 2.6vw, 32px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }

  .vidriera-dot {
    appearance: none;
    border: 0;
    background: transparent;
    padding: var(--esp-2);
    cursor: pointer;
    display: block;
  }

  .vidriera-dot-marca {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--borde-fuerte);
    display: block;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .vidriera-dot.activo .vidriera-dot-marca {
    background: var(--marca);
    box-shadow: 0 0 0 4px var(--marca-suave);
    transform: scale(1.35);
  }

  .vidriera-viewport--marca .vidriera-progreso {
    background: rgba(255, 255, 255, 0.25);
  }
  .vidriera-viewport--marca .vidriera-progreso span {
    background: #fff;
  }
  .vidriera-viewport--marca .vidriera-dot-marca {
    background: rgba(255, 255, 255, 0.4);
  }
  .vidriera-viewport--marca .vidriera-dot.activo .vidriera-dot-marca {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
  }
}