/* ui-pro.css — mecánicas globales de e-commerce (presión, elevación, carga percibida, reveal); reusable en el catálogo. Cargar DESPUÉS de bento-home.css (reutiliza tokens --sv-*). */

:root {
  /* Elevación en capas, siempre tintada de verde profundo (DESIGN.md). */
  --sv-elev-1: 0 1px 8px rgba(10, 61, 35, 0.07);
  --sv-elev-2: 0 4px 16px rgba(10, 61, 35, 0.12);
  --sv-elev-3: 0 12px 26px -10px rgba(10, 61, 35, 0.35);
}

/* ---------- Página firme: sin zoom por doble tap, sin resaltado gris ---------- */

a,
button,
input,
select,
textarea,
[role="button"],
.bento-tile {
  touch-action: manipulation;
}

a,
button,
[role="button"],
.bento-tile {
  -webkit-tap-highlight-color: transparent;
}

/* user-select:none solo en superficies de botón/tile, nunca en texto de párrafo */
button,
[role="button"],
.bento-tile,
.sv-press {
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Sistema de presión adictivo ---------- */

.sv-press {
  transition: transform 120ms ease-out;
}

.sv-press:active {
  transform: scale(0.96);
  transition: transform 120ms ease-out;
}

/* El rebote al soltar solo aplica cuando NO está en :active (evita interferir con el press-in) */
.sv-press:not(:active) {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Tokens de elevación aplicados a la home ---------- */

.bento-tile {
  box-shadow: var(--sv-elev-1);
}

.bento-tile:hover {
  box-shadow: var(--sv-elev-2);
}

.noticias_section .noticia {
  box-shadow: var(--sv-elev-1);
}

/* ---------- Carga de imágenes percibida (skeleton shimmer) ---------- */

.sv-img,
img.sv-img {
  position: relative;
  background: linear-gradient(90deg, #eef2ee 25%, #e4eae3 37%, #eef2ee 63%);
  background-size: 400% 100%;
  animation: sv-shimmer 1.4s ease infinite;
}

img.sv-img {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

img.sv-img.is-loaded {
  opacity: 1;
  animation: none;
  background: none;
}

@keyframes sv-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ---------- Entrada al hacer scroll ---------- */

.sv-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.sv-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion: todo lo animado queda estático y visible ---------- */

@media (prefers-reduced-motion: reduce) {
  .sv-press,
  .sv-press:active,
  .sv-press:not(:active) {
    transition: none;
    transform: none;
  }

  img.sv-img {
    transition: none;
  }

  .sv-img,
  img.sv-img {
    animation: none;
  }

  .sv-reveal,
  .sv-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}