/* ==========================================================================
   La Saciedad Secreta — ABACO
   Landing de subasta virtual.

   Arquitectura:
   - Secciones "flat": el PNG es la sección completa (texto quemado).
     Sobre ellas se posicionan hotspots en % para que los botones
     dibujados sean clicables. Al ser porcentuales, escalan con la imagen.
   - Sección "categorias": construida en HTML/CSS real.
   - Sliders: vanilla, controlados desde js/main.js.

   Convención de nombres: todas las clases y custom properties de este
   proyecto llevan el prefijo "lss-" (La Saciedad Secreta). El prefijo va
   siempre en el bloque, nunca en el elemento ni en el modificador:
   .lss-card__media, .lss-btn--blue, --lss-c-blue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colores muestreados directamente de los PNG originales */
  --lss-c-blue: #0000fe;
  --lss-c-blue-dark: #0000c9;
  --lss-c-pink: #fbced5;
  --lss-c-cream: #fbd4ce;
  --lss-c-white: #ffffff;
  --lss-c-ink: #5b5b63;
  --lss-c-placeholder: #eeeef0;

  --lss-font-base: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Ancho máximo del sitio: los artes están diseñados a 1920 */
  --lss-site-max: 1920px;
  /* Ancho del contenido interno de las secciones construidas */
  --lss-wrap-max: 1280px;
  --lss-wrap-gutter: 24px;

  --lss-radius-pill: 999px;
  --lss-transition: 260ms cubic-bezier(.4, 0, .2, 1);

  /* Carril lateral reservado para las flechas del carrusel de piezas,
     de modo que queden por fuera de las tarjetas y no encima. */
  --lss-arrow-lane: clamp(44px, 4.5vw, 72px);
}

/* --------------------------------------------------------------------------
   2. Reset
   Selectores de elemento: no llevan prefijo porque no son clases.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--lss-font-base);
  color: var(--lss-c-blue);
  background: var(--lss-c-white);
  overflow-x: hidden;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2, h3 {
  margin: 0;
  text-wrap: balance;
}

a { text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Layout base
   -------------------------------------------------------------------------- */
.lss-site,
.lss-section--footer {
  max-width: var(--lss-site-max);
  margin-inline: auto;
}

.lss-section { position: relative; }

.lss-wrap {
  width: 100%;
  max-width: var(--lss-wrap-max);
  margin-inline: auto;
  padding-inline: var(--lss-wrap-gutter);
}

/* Sección cuyo contenido es un único PNG de ancho completo */
.lss-flat {
  position: relative;
  margin: 0;
  font-size: 0;
}

.lss-flat > img { width: 100%; }

/* --------------------------------------------------------------------------
   4. Hotspots
   Enlaces transparentes sobre botones dibujados dentro del PNG.
   Las coordenadas son porcentajes del arte original, por lo que se
   mantienen alineadas en cualquier ancho de pantalla.
   -------------------------------------------------------------------------- */
.lss-hotspot {
  position: absolute;
  z-index: 2;
  border-radius: var(--lss-radius-pill);
  /* Ayuda visual para verificar la posición durante el desarrollo:
     descomentar la línea siguiente.
     background: rgba(255, 0, 0, .35); */
}

/* Banner Cabecera.png (1920x800) — botón "Ver Catálogo" */
.lss-hotspot--hero {
  left: 63.9%;
  top: 81.2%;
  width: 18.8%;
  height: 10.4%;
}

/* prefooter.png (1920x700) — botón "Ver Catálogo" */
.lss-hotspot--catalogo {
  left: 41.5%;
  top: 59.1%;
  width: 18.8%;
  height: 11.9%;
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.lss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: var(--lss-radius-pill);
  font-size: clamp(.875rem, .55rem + .72vw, 1.125rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform var(--lss-transition), background-color var(--lss-transition), color var(--lss-transition);
}

.lss-btn:hover { transform: translateY(-2px); }
.lss-btn:active { transform: translateY(0); }

.lss-btn--blue {
  background: var(--lss-c-blue);
  color: var(--lss-c-white);
}

.lss-btn--blue:hover { background: var(--lss-c-blue-dark); }

.lss-btn--light {
  background: var(--lss-c-white);
  color: var(--lss-c-blue);
}

.lss-btn--light:hover { background: var(--lss-c-pink); }

/* --------------------------------------------------------------------------
   6. Slider de banners (sección 2)
   -------------------------------------------------------------------------- */
.lss-banner-slider {
  position: relative;
  overflow: hidden;
}

.lss-banner-slider__viewport { overflow: hidden; }

.lss-banner-slider__track {
  display: flex;
  transition: transform var(--lss-transition);
  will-change: transform;
}

.lss-banner-slider__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
}

.lss-banner-slider__slide > img { width: 100%; }

/* CTA superpuesto, centrado horizontalmente sobre el arte */
.lss-banner-slider__cta {
  position: absolute;
  left: 50%;
  top: 86%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.lss-banner-slider__cta:hover { transform: translate(-50%, calc(-50% - 2px)); }

/* --------------------------------------------------------------------------
   7. Controles compartidos de slider (flechas + puntos)
   -------------------------------------------------------------------------- */
.lss-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(36px, 2.6vw, 48px);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  transition: background-color var(--lss-transition), opacity var(--lss-transition);
}

.lss-slider-arrow:hover { background: var(--lss-c-white); }

.lss-slider-arrow::before {
  content: "";
  width: 32%;
  aspect-ratio: 1;
  border-right: 2.5px solid var(--lss-c-blue);
  border-bottom: 2.5px solid var(--lss-c-blue);
}

.lss-slider-arrow--prev { left: clamp(10px, 1.6vw, 28px); }
.lss-slider-arrow--prev::before { rotate: 135deg; translate: 18% 0; }

.lss-slider-arrow--next { right: clamp(10px, 1.6vw, 28px); }
.lss-slider-arrow--next::before { rotate: -45deg; translate: -18% 0; }

.lss-slider-arrow--dark {
  background: rgba(0, 0, 254, .08);
}

.lss-slider-arrow--dark:hover { background: rgba(0, 0, 254, .16); }

/* En el carrusel de piezas las flechas van fuera de las tarjetas: se pegan
   al borde del contenedor, dentro del carril reservado por el padding.
   El slider de banners conserva sus flechas sobre la imagen. */
.lss-cards .lss-slider-arrow--prev { left: 0; }
.lss-cards .lss-slider-arrow--next { right: 0; }

/* El JS agrega [hidden] cuando hay un solo slide o todo cabe en pantalla */
.lss-slider-arrow[hidden],
.lss-slider-dots[hidden] { display: none; }

.lss-slider-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 1.8vw, 28px);
  z-index: 3;
  display: flex;
  gap: 10px;
  translate: -50% 0;
}

/* Este nodo lo crea js/main.js: si cambia el nombre, cambiarlo también allí */
.lss-slider-dots__dot {
  width: 12px;
  aspect-ratio: 1;
  border: 2px solid var(--lss-c-white);
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--lss-transition);
}

.lss-slider-dots__dot[aria-selected="true"] { background: var(--lss-c-white); }

.lss-slider-dots--dark .lss-slider-dots__dot { border-color: #b9b9c2; }
.lss-slider-dots--dark .lss-slider-dots__dot[aria-selected="true"] {
  border-color: #8f8f99;
  background: #8f8f99;
}

/* --------------------------------------------------------------------------
   8. Sección categorías (construida en HTML)
   -------------------------------------------------------------------------- */
.lss-section--categorias {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--lss-c-white);
}

.lss-categorias__title {
  font-size: clamp(1.5rem, .85rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--lss-c-blue);
}

/* Grilla de lotes: la columna la define row-cols-*, aquí solo el espaciado.
   El color corta la herencia del azul definido en body. */
.lss-lotes {
  color: #212529;
  row-gap: 24px;
  margin-inline: -8px;
}

.lss-lotes > .syc-card { padding-inline: 8px; }

/* Mensaje sin resultados: hotsubastas.css lo reduciría al 20% de una columna */
.lss-lotes > .col-lg-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* El recorte vive en el viewport, no aquí: así las flechas pueden
   posicionarse en el carril lateral sin que este contenedor las corte. */
.lss-cards {
  position: relative;
  margin-top: clamp(32px, 4vw, 64px);
  padding-bottom: 44px; /* espacio para los puntos */
  padding-inline: var(--lss-arrow-lane); /* carril de las flechas */
}

.lss-cards__viewport { overflow: hidden; }

.lss-cards__track {
  display: flex;
  transition: transform var(--lss-transition);
  will-change: transform;
}

.lss-card {
  flex: 0 0 33.3333%;
  min-width: 0;
  padding-inline: clamp(10px, 1.4vw, 24px);
}

.lss-card__link {
  display: block;
  color: inherit;
}

.lss-card__media {
  overflow: hidden;
  background: var(--lss-c-placeholder);
  aspect-ratio: 1;
}

.lss-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lss-transition);
}

.lss-card__link:hover .lss-card__media > img { transform: scale(1.04); }

.lss-card__label {
  margin-top: 1.25em;
  font-size: clamp(.875rem, .7rem + .6vw, 1.375rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--lss-c-ink);
}

.lss-categorias__actions {
  margin-top: clamp(24px, 3vw, 40px);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Sección Apoya (slider de marcas)
   -------------------------------------------------------------------------- */
.lss-section--apoya {
  padding-block: clamp(40px, 5vw, 80px);
  background: var(--lss-c-blue);
}

.lss-apoya__title {
  font-size: clamp(1.375rem, .9rem + 1.9vw, 2.5rem);
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--lss-c-cream);
}

.lss-brands {
  position: relative;
  margin-top: clamp(28px, 3.5vw, 56px);
  padding-bottom: 40px; /* espacio para los puntos */
  overflow: hidden;
}

.lss-brands__track {
  display: flex;
  align-items: center;
  transition: transform var(--lss-transition);
  will-change: transform;
}

.lss-brand {
  flex: 0 0 20%;
  min-width: 0;
  padding-inline: clamp(12px, 1.6vw, 28px);
}

/* Alto fijo: los logos tienen proporciones distintas y con height: auto
   el alto dependía de cada una. object-fit los encaja sin deformarlos. */
.lss-brand > img {
  width: 100%;
  height: clamp(56px, 6.5vw, 80px);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .lss-card { flex-basis: 50%; }
  .lss-brand { flex-basis: 33.3333%; }
}

/* Móvil */
@media (max-width: 767px) {
  .lss-card { flex-basis: 100%; }
  .lss-brand { flex-basis: 50%; }

  /* El CTA deja de flotar sobre el arte: en pantallas angostas el banner
     es una franja muy baja y el botón superpuesto quedaría ilegible.
     Pasa a flujo normal, debajo de la imagen. */
  .lss-banner-slider__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lss-banner-slider__cta {
    position: static;
    transform: none;
    margin-block: 20px 8px;
  }

  .lss-banner-slider__cta:hover { transform: translateY(-2px); }

  .lss-slider-dots {
    position: static;
    translate: none;
    justify-content: center;
    margin-top: 18px;
  }

  .lss-banner-slider .lss-slider-dots { padding-bottom: 18px; }

  .lss-cards,
  .lss-brands { padding-bottom: 0; }

  .lss-slider-arrow { display: none; }

  /* Sin flechas visibles, el carril lateral solo restaría ancho útil */
  .lss-cards { padding-inline: 0; }
}