/* =========================================================================
 * ESTILOS OFICIALES & RESPONSIVE ADAPTATIVO FACTOR X COMPANY
 * Optimizado automáticamente para Android (Móvil / Tablet) y PC (Desktop / 4K)
 * ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=Space+Grotesk:wght@500;700;800&display=swap');

:root {
  --fx-dark: #00382e;
  --fx-darker: #00261f;
  --fx-emerald: #059669;
  --fx-accent-orange: #ff6b35;
  --fx-accent-amber: #f59e0b;
  --fx-cyan: #06b6d4;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Normalización y renderizado fluido */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8faf9;
  color: #1e293b;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

h1, h2, h3, .font-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* Tipografía Adaptativa Fluida (Android & PC) */
h1 { font-size: clamp(1.4rem, 3.5vw, 2.75rem); }
h2 { font-size: clamp(1.2rem, 2.8vw, 2.25rem); }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.75rem); }

/* Scrollbar personalizado moderno */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Ocultar barra de scroll en elementos desplazables táctiles */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Contenedor de categorías con desplazamiento táctil suave */
#category-pills {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
#category-pills > button {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Tarjetas de Producto Adaptativas */
.fx-product-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.04);
}
@media (hover: hover) and (pointer: fine) {
  .fx-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px -6px rgba(0, 56, 46, 0.12);
  }
}
.fx-product-card:active {
  transform: scale(0.99);
}

/* Slider Hero con Animación Suave */
.fx-hero-slide {
  transition: opacity 0.45s ease-in-out, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Safe areas para Android (Notch, barra inferior de gestos) */
.safe-area-pb {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* Efectos visuales de botones */
button, a {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
button:active:not(:disabled), a:active {
  transform: scale(0.97);
}

/* Toasts flotantes */
#toast-container {
  pointer-events: none;
}
#toast-container > div {
  pointer-events: auto;
}

/* Ajustes para pantallas ultra anchas (Monitores PC 2K / 4K) */
@media (min-width: 1920px) {
  .max-w-7xl {
    max-width: 1440px;
  }
}