:root {
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tipografía títulos */
h1, h2, h3, h4, h5, h6,
.h-serif {
  font-family: 'Righteous', sans-serif;
}

/* =====================================================
   UI HOVERS — Elohim Tessla
   Basado en utilidades Bootstrap
   ===================================================== */

/* 1️⃣ Sombra en hover (cards, bloques clickeables) */
.hover-shadow {
  transition: box-shadow .2s ease-in-out;
}
.hover-shadow:hover {
  box-shadow: var(--bs-box-shadow-lg);
}

/* 2️⃣ Elevación sutil (cards principales / productos) */
.hover-lift {
  transition: transform .2s ease-in-out;
}
.hover-lift:hover {
  transform: translateY(-3px);
}

/* 3️⃣ Atenuación suave (imágenes) */
.hover-fade {
  transition: opacity .2s ease-in-out;
}
.hover-fade:hover {
  opacity: .9;
}

/* 4️⃣ Cambio de color a acento (links / CTA suaves) */
.hover-accent {
  transition: color .2s ease-in-out;
}
.hover-accent:hover {
  color: var(--bs-primary);
}

/* 5️⃣ Micro-movimiento de iconos (flechas, acciones) */
.hover-icon-move i {
  transition: transform .2s ease-in-out;
}
.hover-icon-move:hover i {
  transform: translateX(4px);
}

/* Ajuste visual general para iconos Bootstrap */
.bi {
  vertical-align: middle;
}

/* =====================================================
   Cards hover (genérico)
   ===================================================== */

.card-hover {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.08);
}

/* =========================================================
   STRIPS / CAROUSELS (productos, colecciones, etc.)
========================================================= */
.strip-snap{
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: .25rem 1rem 1rem;
}
.strip-snap > .item{
  width: 80%;
  scroll-snap-align: start;
/* Evita que los items se encojan en el carrusel horizontal */
  flex: 0 0 auto;
}

/* Desktop grid */
@media (orientation: landscape){
  .strip-snap{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    overflow: visible !important;
    padding: 0 !important;
  }
  .strip-snap > .item{ width:auto; }
}

/* =========================================================
   MISCELANEOS (botones y otros)
========================================================= */

.btn.btn-mini{
  --bs-btn-padding-y: .1rem;
  --bs-btn-padding-x: .4rem; 
  --bs-btn-font-size: .75rem;
}

@media (min-width: 768px) {
  .pan-img{
    max-height: 100vh !important;
  }
}

/*elimina la flechita del dropdown*/
.no-caret::after {
  display: none !important;
}

@media (min-width: 992px){ /* lg */
  #selectionList{
    max-height: 360px;  /* ajusta */
    overflow: auto;
    padding-right: .25rem;
    scrollbar-gutter: stable;
  }
}

/* ------------------------------------------------------------
   Hero carousel: pan (x/y) + zoom via CSS variables
   Usage: <img class="img-pan" style="--x:-12%;--y:-8%;--z:1.06;--dur:10000ms">
------------------------------------------------------------ */

.carousel-item {
  overflow: hidden; /* recorta el “exceso” de la imagen al moverse */
}

.img-pan{
  /* La idea: la imagen es un poco más grande que el contenedor
     para que al desplazarse no aparezcan bordes vacíos */
  width: 110%;
  max-height: 200%;
  object-position: center right;

  /* Defaults (si no envías nada desde BD, no se mueve) */
  --x: 0%;
  --y: 0%;
  --z: 1;
  --dur: 10000ms;

  animation: panXY var(--dur) ease-in-out both;
  will-change: transform;
}

@keyframes panXY {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(var(--x), var(--y)) scale(var(--z)); }
}

/* Respeta accesibilidad: usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  .img-pan{
    animation: none;
    width: 100%;
    height: 100%;
  }
}