/* --- Base heredado del proyecto / index.css (resumido) --- */
:root { --font-primary: 'Inter', system-ui, sans-serif; --font-heading: 'Montserrat', system-ui, sans-serif; }
body { font-family: var(--font-primary); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight:600; line-height:1.2; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1rem; }
@media (min-width:640px){ .container { padding:0 2rem; } }
.gradient-hero-overlay { background:linear-gradient(to right, rgba(3,7,18,.90), rgba(3,7,18,.70)); }
.shadow-custom { box-shadow:0 10px 25px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); }
.shadow-custom-lg { box-shadow:0 20px 40px -12px rgba(0,0,0,0.15),0 8px 16px -4px rgba(0,0,0,0.1); }
.focus-ring:focus-visible { outline:2px solid #16a34a; outline-offset:2px; }

/* ===== NAVBAR MEJORADA RESPONSIVE ===== */
header.site-header{--nav-h:72px;transition:all .35s ease;}
header.site-header .nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1rem;}
@media (min-width:768px){header.site-header .nav-inner{gap:2rem;padding:0 2rem;}}
header.site-header:not(.scrolled){background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(0,0,0,.3));backdrop-filter:blur(6px);}
header.site-header.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 2px 12px -4px rgba(0,0,0,.1);}

/* Logo responsive */
header.site-header img{height:2.5rem;transition:height .3s;}
@media (min-width:768px){header.site-header img{height:2.75rem;}}

/* Enlaces desktop */
.nav-main a.nav-link{position:relative;font-weight:500;letter-spacing:.2px;padding:.35rem .65rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;transition:all .25s;}
@media (min-width:1024px){.nav-main a.nav-link{font-size:.9rem;}}
.nav-main a.nav-link:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:linear-gradient(90deg,#22c55e,#16a34a);transform:scaleX(0);transform-origin:left;transition:.35s cubic-bezier(.65,.05,.36,1);}
.nav-main a.nav-link:hover:after{transform:scaleX(.7);}
.nav-main a.nav-link.active:after{transform:scaleX(1);}
header.site-header:not(.scrolled) .nav-main a.nav-link{color:#f1f5f9;}
header.site-header.scrolled .nav-main a.nav-link{color:#1f2937;}
header.site-header.scrolled .nav-main a.nav-link:hover{color:#15803d;}
header.site-header:not(.scrolled) .nav-main a.nav-link:hover{color:#86efac;}

/* Botones auth como iconos circulares */
.btn-auth-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.25);color:#fff;transition:all .25s ease;position:relative;}
@media (min-width:1024px){.btn-auth-icon{width:40px;height:40px;}}
header.site-header.scrolled .btn-auth-icon{background:rgba(34,197,94,.08);border-color:rgba(22,163,74,.3);color:#15803d;}
.btn-auth-icon:hover{background:rgba(34,197,94,.25);border-color:#22c55e;transform:scale(1.08);}
header.site-header.scrolled .btn-auth-icon:hover{background:rgba(34,197,94,.15);border-color:#16a34a;}
.btn-auth-icon:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(34,197,94,.35);}
.btn-auth-icon svg{width:18px;height:18px;}
@media (min-width:1024px){.btn-auth-icon svg{width:20px;height:20px;}}

/* Tooltip para iconos */
.btn-auth-icon::after{content:attr(data-tooltip);position:absolute;bottom:-32px;left:50%;transform:translateX(-50%) scale(0);background:#1f2937;color:#fff;padding:.35rem .65rem;border-radius:.45rem;font-size:.7rem;white-space:nowrap;pointer-events:none;opacity:0;transition:all .2s ease;z-index:100;}
.btn-auth-icon:hover::after{transform:translateX(-50%) scale(1);opacity:1;}

/* Estilos especiales para botón logout desktop */
#logoutBtnDesktop{color:#dc2626;}
header.site-header.scrolled #logoutBtnDesktop{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25);}
#logoutBtnDesktop:hover{background:rgba(220,38,38,.15);border-color:#dc2626;color:#b91c1c;}
header.site-header.scrolled #logoutBtnDesktop:hover{background:rgba(220,38,38,.15);border-color:#dc2626;}

/* Estilos para botón de panel interno */
#internalPanelBtn{color:#16a34a;}
header.site-header.scrolled #internalPanelBtn{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);}
#internalPanelBtn:hover{background:rgba(34,197,94,.2);border-color:#16a34a;color:#15803d;}
header.site-header.scrolled #internalPanelBtn:hover{background:rgba(34,197,94,.2);border-color:#16a34a;}

/* Nombre de usuario en header */
header.site-header:not(.scrolled) #userNameDesktop{color:#f1f5f9;}
header.site-header.scrolled #userNameDesktop{color:#1f2937;}

/* Separador visual entre iconos */
.auth-divider{width:1px;height:24px;background:rgba(255,255,255,.2);}
header.site-header.scrolled .auth-divider{background:rgba(0,0,0,.1);}

/* Botón contacto variante outline en scroll */
.btn-contact{background:linear-gradient(140deg,#15803d,#16a34a);color:#fff;font-weight:600;padding:.5rem 1rem;border-radius:999px;font-size:.72rem;box-shadow:0 4px 12px -4px rgba(21,128,61,.5);transition:.25s;}
@media (min-width:1024px){.btn-contact{padding:.55rem 1.25rem;font-size:.75rem;}}
.btn-contact:hover{filter:brightness(1.08);}
header.site-header.scrolled .btn-contact{background:#ffffff;color:#15803d;border:1px solid #16a34a;box-shadow:0 2px 8px -4px rgba(0,0,0,.25);}
header.site-header.scrolled .btn-contact:hover{background:#f0fdf4;}

/* Diesel Soluciones botón cápsula dorado compacto */
.nav-diesel{background:linear-gradient(120deg,#f59e0b,#fbbf24,#f59e0b);color:#1f2937 !important;font-weight:700;padding:.45rem .85rem;border-radius:999px;font-size:.65rem;position:relative;overflow:hidden;border:1px solid #fbbf24;display:inline-flex;align-items:center;gap:.3rem;box-shadow:0 4px 12px -4px rgba(245,158,11,.55);transition:all .25s;}
@media (min-width:1024px){.nav-diesel{padding:.55rem 1.05rem;font-size:.7rem;}}
.nav-diesel:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,0));mix-blend-mode:overlay;}
.nav-diesel:hover{filter:brightness(1.06);transform:translateY(-1px);}

/* === BOTONES DE NAVEGACIÓN HISTORIAL (ADELANTE/ATRÁS) === */
.nav-history-container{padding:0 .5rem;border-left:1px solid rgba(255,255,255,.15);}
header.site-header.scrolled .nav-history-container{border-left-color:rgba(0,0,0,.08);}

.nav-history-btn{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.5rem;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.15);
  color:#f1f5f9;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.nav-history-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(22,163,74,.1));
  opacity:0;
  transition:opacity .25s;
}
.nav-history-btn svg{width:16px;height:16px;position:relative;z-index:1;}
.nav-history-btn:hover{
  background:rgba(34,197,94,.15);
  border-color:rgba(34,197,94,.4);
  transform:translateY(-1px);
  box-shadow:0 4px 12px -2px rgba(34,197,94,.3);
}
.nav-history-btn:hover::before{opacity:1;}
.nav-history-btn:active{transform:translateY(0) scale(.96);}
.nav-history-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}
.nav-history-btn:disabled:hover{
  transform:none;
  box-shadow:none;
  background:rgba(255,255,255,.05);
}

/* Estilos cuando el header está scrolled (fondo blanco) */
header.site-header.scrolled .nav-history-btn{
  background:rgba(34,197,94,.06);
  border-color:rgba(34,197,94,.2);
  color:#15803d;
}
header.site-header.scrolled .nav-history-btn:hover{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.35);
  box-shadow:0 4px 12px -2px rgba(34,197,94,.25);
}
header.site-header.scrolled .nav-history-btn:disabled{
  background:rgba(0,0,0,.03);
  border-color:rgba(0,0,0,.08);
  color:#9ca3af;
}
.nav-history-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.35);
}

/* ===== BARRA DE NAVEGACIÓN MÓVIL REDISEÑADA ===== */

/* Ocultar botón hamburguesa - ya no se usa */
#menuBtn{display:none !important;}

/* Barra de navegación inferior fija en móvil */
@media (max-width: 767px) {
  /* Header más compacto en móvil */
  header.site-header{padding:0 !important;}
  header.site-header .nav-inner{height:56px;padding:0 1rem;}
  header.site-header img{height:2rem !important;}
  
  /* Ocultar elementos desktop en móvil */
  .nav-main, .hidden.md\:flex{display:none !important;}
  
  /* Bottom Navigation Bar - Barra Inferior Fija */
  #mobileBottomNav{
    position:fixed !important;
    bottom:0 !important;
    left:0;
    right:0;
    height:64px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -2px 12px -4px rgba(0,0,0,.15);
    z-index:9999 !important;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    padding:0.25rem 0.5rem;
    padding-bottom:max(0.25rem, env(safe-area-inset-bottom));
    gap:0.25rem;
    align-items:center;
  }
  
  /* Fondo oscuro cuando no scrolled */
  body:not(.scrolled) #mobileBottomNav{
    background:rgba(17,24,39,.95);
    border-top:1px solid rgba(255,255,255,.1);
  }
  
  /* Items de navegación */
  .mobile-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.15rem;
    text-decoration:none;
    color:#6b7280;
    font-size:.62rem;
    font-weight:500;
    transition:all .2s;
    border-radius:.5rem;
    padding:.35rem .15rem;
    min-height:48px;
    background:transparent;
    border:none;
    cursor:pointer;
  }
  
  .mobile-nav-item.hidden{
    display:none !important;
  }
  
  body:not(.scrolled) .mobile-nav-item{color:#9ca3af;}
  
  .mobile-nav-item svg{
    width:20px;
    height:20px;
    transition:all .25s;
    flex-shrink:0;
  }
  
  .mobile-nav-item span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  
  .mobile-nav-item:active{
    transform:scale(.95);
  }
  
  .mobile-nav-item.active{
    color:#16a34a;
    font-weight:600;
  }
  
  body:not(.scrolled) .mobile-nav-item.active{color:#22c55e;}
  
  .mobile-nav-item.active svg{
    transform:scale(1.1);
  }
  
  /* Botón de logout en móvil - estilo rojo */
  .mobile-nav-item#logoutBtnMobile{
    color:#dc2626;
  }
  
  .mobile-nav-item#logoutBtnMobile svg{
    color:#dc2626;
  }
  
  .mobile-nav-item#logoutBtnMobile:active{
    background:#fee2e2;
  }
  
  /* Badge para notificaciones */
  .nav-badge{
    position:absolute;
    top:0;
    right:0;
    background:#dc2626;
    color:#fff;
    font-size:.55rem;
    padding:.15rem .35rem;
    border-radius:999px;
    font-weight:600;
  }
  
  /* Agregar padding bottom al body para compensar la barra inferior */
  body{padding-bottom:76px;}
}

/* Desktop - mantener el overlay y panel ocultos */
@media (min-width: 768px) {
  #mobileBottomNav{display:none !important;}
  #navOverlay, #mobilePanel{display:none !important;}
  body{padding-bottom:0;}
}

/* Panel lateral para menú extendido (opciones adicionales) */
#navOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:110;opacity:0;pointer-events:none;transition:.35s ease;visibility:hidden;}
#navOverlay.visible{opacity:1;pointer-events:auto;visibility:visible;}

#mobilePanel{position:fixed;bottom:64px;left:0;right:0;max-height:0;background:#fff;box-shadow:0 -4px 24px -6px rgba(0,0,0,.25);transition:max-height .4s cubic-bezier(.65,.05,.36,1);z-index:111;overflow:hidden;border-radius:1rem 1rem 0 0;}
#mobilePanel.open{max-height:60vh;}

/* Enlaces del panel */
#mobilePanel .panel-content{padding:1.5rem;overflow-y:auto;max-height:calc(60vh - 3rem);}

#mobilePanel a{color:#1f2937;font-size:.9rem;font-weight:500;transition:.25s;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.6rem;}
#mobilePanel a:hover{background:#f3f4f6;}
#mobilePanel a svg{width:20px;height:20px;color:#16a34a;}

/* --- Header dinámico replicando lógica de scroll de React Header.tsx --- */
header.site-header { transition:background-color .35s, box-shadow .35s, padding .35s; }
header.site-header:not(.scrolled){ background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.15)); padding:.95rem 0 1.05rem; }
header.site-header.scrolled{ background:rgba(255,255,255,0.9); backdrop-filter:blur(14px); box-shadow:0 4px 16px -4px rgba(0,0,0,.18); }
header.site-header .nav-link { position:relative; transition:color .25s; }
header.site-header:not(.scrolled) .nav-link { color:#fff; }
header.site-header:not(.scrolled) .nav-link:hover { color:#86efac; }
header.site-header.scrolled .nav-link { color:#1f2937; }
header.site-header.scrolled .nav-link:hover { color:#15803d; }
header.site-header.scrolled .nav-link.active:after, header.site-header .nav-link.active:after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:2px; }
/* Botones auth */
.btn-login, .btn-cta { font-weight:600; border-radius:9999px; transition:all .25s; }
.btn-login { background:rgba(255,255,255,0.85); color:#166534; padding:.55rem 1.35rem; }
.btn-login:hover { background:#fff; }
header.site-header.scrolled .btn-login { background:rgba(34,197,94,0.08); border:1px solid #16a34a; }
header.site-header.scrolled .btn-login:hover { background:rgba(34,197,94,0.15); }
.btn-cta { background:#16a34a; color:#fff; padding:.55rem 1.35rem; box-shadow:0 4px 12px -2px rgba(22,163,74,.35); }
.btn-cta:hover { background:#15803d; }

/* Mobile panel animation */
.mobile-panel-enter { animation:fadeSlide .35s ease; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Reveal (emulación framer-motion simple) */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
[data-reveal].show{ opacity:1; transform:translateY(0); }
[data-reveal-delay="100"]{ transition-delay:.10s; }
[data-reveal-delay="200"]{ transition-delay:.20s; }
[data-reveal-delay="300"]{ transition-delay:.30s; }
[data-reveal-delay="400"]{ transition-delay:.40s; }

/* Product category cards (bordes laterales como en JSX original) */
.cat-card { position:relative; padding:1.15rem; border-radius:.9rem; background:#fff; box-shadow:0 4px 16px -4px rgba(0,0,0,.06); border:1px solid #e5e7eb; transition:all .35s; display:flex; flex-direction:column; }
.cat-card:before { content:""; position:absolute; inset:0; border-radius:.9rem; padding:0; }
.cat-card.border-green { border-left:4px solid #16a34a; }
.cat-card.border-blue { border-left:4px solid #2563eb; }
.cat-card.border-yellow { border-left:4px solid #ca8a04; }
.cat-card.border-purple { border-left:4px solid #7e22ce; }
.cat-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px -4px rgba(0,0,0,.15); }
.cat-icon { width:2.25rem; height:2.25rem; margin:0 auto .5rem; display:flex; align-items:center; justify-content:center; font-size:1.45rem; }

/* Hero stats bar blur refinement */
.hero-stats { background:rgba(3,7,18,.72); backdrop-filter:blur(8px); }

/* Contact cards */
.contact-card { background:#1f2937; border:1px solid rgba(255,255,255,0.05); }

/* WhatsApp floating button pulse - Estilo mejorado de productos */
#whatsappFloat {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #16a34a;
  border-radius: 9999px;
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.4);
  z-index: 10000;
  cursor: pointer;
  transition: transform .2s ease;
  animation: wspPulse 3.5s infinite;
}
#whatsappFloat:hover { transform: scale(1.07); }
#whatsappFloat:active { transform: scale(0.97); }
#whatsappFloat svg { width: 28px; height: 28px; }
@keyframes wspPulse { 0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.55); } 50% { box-shadow:0 0 0 18px rgba(34,197,94,0); } }
@media (max-width: 767px) {
  #whatsappFloat { bottom: 80px; right: 1rem; }
}

/* Separación específica en escritorio para no superponer con WhatsApp */
@media (min-width:768px){
  .pqrs-floating-btn{
    bottom:20px !important;
    right: calc(20px + 56px + 16px) !important; /* 20px margen + 56px ancho WA + 16px espacio */
  }
}

/* Carousel Styles Premium */
#inventoryThumbs {
  scrollbar-width: thin;
  scrollbar-color: #22c55e #1f2937;
  -webkit-overflow-scrolling: touch;
}
#inventoryThumbs::-webkit-scrollbar {
  height: 5px;
}
@media (min-width: 768px) {
  #inventoryThumbs::-webkit-scrollbar {
    height: 8px;
  }
}
#inventoryThumbs::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 4px;
}
#inventoryThumbs::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 4px;
  transition: background .3s;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
#inventoryThumbs::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #16a34a, #15803d);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

/* Thumbnail images premium - MÁS GRANDES */
.carousel-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  scroll-snap-align: center;
  background: linear-gradient(135deg, #1f2937, #111827);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
@media (min-width: 768px) {
  .carousel-thumb {
    width: 140px;
    height: 105px;
    border-radius: 14px;
    border: 3px solid rgba(255, 255, 255, 0.1);
  }
}
@media (min-width: 1024px) {
  .carousel-thumb {
    width: 160px;
    height: 120px;
    border-radius: 16px;
  }
}
.carousel-thumb:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.3), 0 0 20px rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
}
.carousel-thumb.active {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3), 0 12px 24px rgba(34, 197, 94, 0.4);
  transform: scale(1.12);
  background: linear-gradient(135deg, #22c55e22, #16a34a22);
}
@media (min-width: 768px) {
  .carousel-thumb.active {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3), 0 16px 32px rgba(34, 197, 94, 0.5);
    transform: scale(1.15);
  }
}

/* Carousel container size control */
#inventoryCarousel {
  height: auto;
}

/* Efecto de cinta transportadora - mostrar miniaturas en movimiento continuo */
#inventoryCarousel > div:first-child {
  display: none !important;
}

/* Contenedor de la cinta con altura fija */
#inventoryThumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  position: relative !important;
  height: 200px !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  #inventoryThumbs {
    height: 240px !important;
  }
}

@media (min-width: 1024px) {
  #inventoryThumbs {
    height: 280px !important;
  }
}

/* Animación de desplazamiento infinito */
@keyframes scrollBelt {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Contenedor interno que se duplica para efecto infinito */
.belt-track {
  display: flex !important;
  animation: scrollBelt 450s linear infinite !important;
  gap: 1rem !important;
}

.belt-track:hover {
  animation-play-state: paused !important;
}

/* Velocidad ajustada en pantallas grandes */
@media (min-width: 1024px) {
  .belt-track {
    animation-duration: 420s !important;
  }
}

@media (min-width: 768px) {
  #inventoryCarousel {
    height: auto;
  }
}
@media (min-width: 1024px) {
  #inventoryCarousel {
    height: auto;
  }
}
@media (min-width: 1280px) {
  #inventoryCarousel {
    height: auto;
  }
}

/* Main image - absolutely centered, cannot move */
#inventoryMainImage {
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.3));
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
}
#inventoryMainImage.fade-out {
  opacity: 0.3 !important;
}

/* Loading state */
#inventoryCarousel.loading #inventoryMainImage {
  filter: blur(8px) drop-shadow(0 10px 30px rgba(0,0,0,.3));
}

/* Progress bar animation premium */
@keyframes progressAnim {
  from { width: 0%; }
  to { width: 100%; }
}

/* Pulse animation for decorative elements */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* Touch-friendly buttons */
@media (max-width: 1023px) {
  .touch-manipulation {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Tabular numbers for counter */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Gradient text animation */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Carousel container glow effect */
#inventoryCarousel {
  position: relative;
}
#inventoryCarousel::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1.5rem;
  background: linear-gradient(45deg, #22c55e, #3b82f6, #22c55e);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  opacity: 0.1;
  z-index: -1;
  filter: blur(20px);
}
@media (min-width: 768px) {
  #inventoryCarousel::before {
    border-radius: 2rem;
  }
}

/* Fallback manual si por alguna razón Tailwind no aplica (asegura que el footer no quede blanco) */
.bg-secondary-900{ background-color:#111827 !important; }
.text-secondary-300{ color:#d1d5db !important; }
.text-secondary-400{ color:#9ca3af !important; }
.text-secondary-500{ color:#6b7280 !important; }
.border-secondary-800{ border-color:#1f2937 !important; }
/* Fallback primario (para botones que aparecían blancos si Tailwind no aplica) */
.bg-primary-600{ background-color:#16a34a !important; color:#fff !important; }
.bg-primary-500{ background-color:#22c55e !important; }
.bg-primary-700{ background-color:#15803d !important; }
.hover\:bg-primary-700:hover{ background-color:#15803d !important; }
.hover\:bg-primary-600:hover{ background-color:#16a34a !important; }
.text-primary-500{ color:#22c55e !important; }
.text-primary-400{ color:#4ade80 !important; }
.border-primary-600{ border-color:#16a34a !important; }

/* --- Compactación vertical --- */
.section-compact{ padding-top:3.5rem; padding-bottom:3.5rem; }
@media (min-width:768px){ .section-compact{ padding-top:4.25rem; padding-bottom:4.25rem; } }
.section-compact-tight{ padding-top:2.75rem; padding-bottom:2.75rem; }
@media (min-width:768px){ .section-compact-tight{ padding-top:3.25rem; padding-bottom:3.25rem; } }
main > section:first-of-type{ min-height:82vh; }
/* Ajuste grid gaps */
.grid-tight{ gap:2rem; }

/* Ajuste del padding-top del main para móvil */
main#mainContent { padding-top: 56px; }
@media (min-width: 768px) {
  main#mainContent { padding-top: 72px; }
}

/* Estilo dorado llamativo para enlace Diesel Soluciones */
.link-diesel{background:linear-gradient(90deg,#f59e0b,#fbbf24,#f59e0b);color:#1f2937 !important;font-weight:700;padding:0.5rem 1.1rem;border-radius:9999px;position:relative;overflow:hidden;border:1px solid #fcd34d;box-shadow:0 4px 12px -4px rgba(245,158,11,.45),0 0 0 0 rgba(251,191,36,.55);transition:transform .25s,box-shadow .4s,filter .25s;}
.link-diesel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.65),rgba(255,255,255,0));mix-blend-mode:overlay;pointer-events:none;}
.link-diesel:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 8px 20px -4px rgba(245,158,11,.55),0 0 0 4px rgba(251,191,36,.2);}
@keyframes pulseGold{0%,100%{box-shadow:0 4px 12px -2px rgba(245,158,11,.45),0 0 0 0 rgba(251,191,36,.4);}50%{box-shadow:0 6px 18px -2px rgba(245,158,11,.6),0 0 0 10px rgba(251,191,36,0);} }
.link-diesel{animation:pulseGold 4s ease-in-out infinite;}
header.site-header.scrolled .link-diesel{color:#1f2937 !important;}

/* === NOTIFICACIÓN PQRS HOME (estilos mejorados) === */
.pqrs-notification{
  position:fixed;
  top:20px;
  right:20px;
  z-index:100;
  max-width:360px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b); /* amarillo */
  color:#1f2937;
  border-radius:12px;
  box-shadow:0 18px 45px -12px rgba(245,158,11,.55);
  display:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(16px) scale(0.98);
  transition:opacity .4s ease-out,transform .4s ease-out;
  font-family:inherit;
}
.pqrs-notification.show{
  display:block;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  animation:pqrsFadeInUp .45s ease-out;
}
.pqrs-notification-close{position:absolute;top:.45rem;right:.45rem;width:26px;height:26px;border-radius:999px;border:none;background:rgba(0,0,0,.15);color:#1f2937;font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.pqrs-notification-close:hover{background:rgba(0,0,0,.25);}

/* === MODAL PQRS (básico) === */
.pqrs-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.25rem;font-family:inherit;}
.pqrs-modal.active{display:flex;}
.pqrs-modal-overlay{position:absolute;inset:0;background:rgba(15,23,42,.72);backdrop-filter:blur(4px);}
.pqrs-modal-content{position:relative;background:#ffffff;border-radius:18px;max-width:520px;width:100%;box-shadow:0 25px 60px -15px rgba(0,0,0,.35);padding:1.75rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1rem;}
.pqrs-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.25rem;}
.pqrs-modal-header h3{margin:0;font-size:1.15rem;font-weight:700;color:#0f172a;}
.pqrs-modal-close{background:#ef4444;color:#fff;border:none;width:32px;height:32px;border-radius:10px;font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -4px rgba(239,68,68,.55);}
.pqrs-modal-close:hover{background:#dc2626;}
.pqrs-form{display:flex;flex-direction:column;gap:1rem;}
.pqrs-form-group{display:flex;flex-direction:column;gap:.4rem;}
.pqrs-form-group label{font-size:.78rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#334155;}
.pqrs-form-group input,.pqrs-form-group textarea{border:1px solid #cbd5e1;border-radius:10px;padding:.65rem .75rem;font-size:.85rem;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s,box-shadow .2s;}
.pqrs-form-group input:focus,.pqrs-form-group textarea:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.25);}
.pqrs-form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.25rem;}
.pqrs-btn-secondary{background:#e2e8f0;color:#334155;border:none;padding:.6rem 1rem;border-radius:10px;font-size:.75rem;font-weight:600;cursor:pointer;}
.pqrs-btn-secondary:hover{background:#cbd5e1;}
.pqrs-btn-primary{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border:none;padding:.6rem 1.15rem;border-radius:10px;font-size:.75rem;font-weight:600;cursor:pointer;box-shadow:0 6px 16px -6px rgba(22,163,74,.55);}
.pqrs-btn-primary:hover{filter:brightness(1.08);}
@media (max-width:640px){.pqrs-modal-content{max-height:84vh;overflow-y:auto;}}

/* Estilos para el botón flotante PQRS amarillo */
.pqrs-floating-btn{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:11000; /* elevado para no quedar detrás del botón de WhatsApp */
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#1f2937;
  font-weight:700;
  border:none;
  padding:.85rem 1.1rem;
  border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(245,158,11,.55);
  cursor:pointer;
  display:none;
  font-size:.85rem;
  letter-spacing:.5px;
  transition:transform .25s, box-shadow .25s;
}
.pqrs-floating-btn:hover{transform:translateY(-3px);box-shadow:0 16px 36px -12px rgba(245,158,11,.6);}
@media (max-width:767px){
  .pqrs-floating-btn{bottom:150px; right:20px;} /* colocar encima en móvil sin tapar */
}
.pqrs-floating-btn{
  /* Ajuste para imitar el estilo de #whatsappFloat */
  width:56px;
  height:56px;
  padding:0; /* centrado como icono circular */
  display:none; /* se activa por JS */
  align-items:center;
  justify-content:center;
  font-size:24px; /* tamaño del emoji/ícono */
  border-radius:9999px;
  letter-spacing:0; /* no texto extendido */
  box-shadow:0 10px 20px -8px rgba(0,0,0,.4),0 0 0 0 rgba(245,158,11,.5);
  animation:pqrsPulse 4s ease-in-out infinite;
  transition:transform .25s, box-shadow .35s;
}
.pqrs-floating-btn span{display:none;} /* ocultar texto si luego se agrega */
@keyframes pqrsPulse{0%,100%{box-shadow:0 10px 20px -8px rgba(0,0,0,.4),0 0 0 0 rgba(245,158,11,.5);}50%{box-shadow:0 10px 28px -6px rgba(0,0,0,.5),0 0 0 18px rgba(245,158,11,0);} }
.pqrs-floating-btn:hover{transform:scale(1.07);box-shadow:0 14px 28px -10px rgba(245,158,11,.55);} 
.pqrs-floating-btn:active{transform:scale(.92);}