/* ========================================
   RESET Y CONFIGURACIÓN BASE
   ======================================== */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

main {
  flex: 1;
}

/* ========================================
   TIPOGRAFÍA
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: "Barriecito", cursive;
  color: #333;
  margin-bottom: 1rem;
}

/* ========================================
   ANIMACIONES
   ======================================== */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInMenu {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  20% {
    opacity: 1;
    transform: translateX(0);
  }
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ========================================
   HEADER Y NAVEGACIÓN
   ======================================== */

header {
  background-color: #007C91;
}

/* Estilos para el logo sin subrayado */
.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: none;
}

.navbar-toggler {
  border: none;
  background: transparent;
}

.navbar-toggler .toggler-icon {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: white;
  transition: all 0.3s ease;
}

.navbar-nav {
  margin-left: auto;
}

.navbar-nav .nav-link {
  position: relative;
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 5px;
  transition: color 0.3s ease;
  margin: 0 10px;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: rgb(0, 0, 0);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar-nav .nav-link:hover {
  color: #000000;
}

.navbar-nav .nav-link:hover::after {
  width: 60%;
}

.navbar-brand {
  font-size: 1.5rem;
}

/* ========================================
   HERO BANNER
   ======================================== */

.hero-banner-productos {
  position: relative;
  height: 100px;
  min-height: 600px;
  background: url('../assets/fondo-inicio.png') center center/cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-banner-productos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.overlay-hero {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  padding: 40px 60px;
  border-radius: 15px;
  text-align: center;
  z-index: 2;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.contenido-overlay h1 {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.contenido-overlay p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

/* ========================================
   SECCIÓN DESTACADOS
   ======================================== */

.destacados {
  padding: 60px 0;
}

.destacados .titulo-seccion {
  text-align: center;
  margin-bottom: 3rem;
}

.destacados .productos-inicio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.destacados .producto-inicio {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
}

.destacados .producto-inicio:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.destacados .producto-inicio h3 {
  color: #007C91;
  margin-bottom: 1rem;
}

.destacados .producto-inicio p {
  color: #666;
  margin-bottom: 1.5rem;
}

.destacados .producto-inicio .btn-modern {
  background: linear-gradient(135deg, #007C91, #004D5E);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  font-weight: 600;
}

.destacados .producto-inicio .btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 124, 145, 0.3);
  color: white;
}

/* ========================================
   PÁGINA DE DESTACADOS (CATEGORÍAS)
   ======================================== */

.servicios {
  background: linear-gradient(135deg, #e8f4f8 0%, #d1e7dd 50%, #cfe2ff 100%);
  padding: 80px 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.servicios::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

.servicios .titulo-seccion {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.servicios .titulo-seccion h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.servicios .grid-servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.servicios .servicio {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.servicios .servicio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 25px;
  pointer-events: none;
}

.servicios .servicio:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px rgba(31, 38, 135, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.35);
}

.servicios .servicio h3 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.servicios .servicio p {
  color: #5a6c7d;
  line-height: 1.6;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

/* ========================================
   TARJETAS DE PRODUCTOS STANLEY
   ======================================== */

.producto-card-stanley {
  background: linear-gradient(135deg, #f8f4e6 0%, #f5e6d3 100%);
  border-radius: 15px;
  border: 2px solid #e8d5b5;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  animation: slideInFromRight 0.6s ease-out;
}

.producto-card-stanley::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.producto-card-stanley:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: #d4c4a8;
}

.producto-card-stanley .card-img-top {
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.producto-card-stanley:hover .card-img-top {
  transform: scale(1.05);
}

.producto-card-stanley .card-body {
  padding: 1.5rem;
  background: transparent;
  position: relative;
  z-index: 1;
}

.producto-card-stanley .card-title {
  color: #2c3e50;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.producto-card-stanley .card-text {
  color: #5a6c7d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  text-align: center;
}

.producto-card-stanley ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.producto-card-stanley ul li {
  color: #5a6c7d;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  text-align: center;
  position: relative;
  padding-left: 15px;
}

.producto-card-stanley ul li::before {
  content: '•';
  color: #007C91;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.producto-card-stanley .precio-stanley {
  color: #dc3545;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.producto-card-stanley .cantidad-controls-stanley {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.producto-card-stanley .qty-btn-stanley {
  background: #007C91;
  color: white;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.producto-card-stanley .qty-btn-stanley:hover {
  background: #004D5E;
  transform: scale(1.1);
}

.producto-card-stanley .cantidad-input-stanley {
  width: 60px;
  text-align: center;
  border: 2px solid #007C91;
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
  font-weight: 600;
  background: white;
  color: #2c3e50;
}

.producto-card-stanley .cantidad-input-stanley:focus {
  outline: none;
  border-color: #004D5E;
  box-shadow: 0 0 0 3px rgba(0, 124, 145, 0.2);
}

.producto-card-stanley .btn-agregar-stanley {
  background: linear-gradient(135deg, #007C91, #004D5E);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.producto-card-stanley .btn-agregar-stanley:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 124, 145, 0.3);
  color: white;
}

.producto-card-stanley .btn-agregar-stanley:active {
  transform: translateY(0);
}

/* ========================================
   CARRITO DE COMPRAS
   ======================================== */

#carrito-resumen {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#carrito-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #007C91, #004D5E);
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

#carrito-flotante:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  color: white;
}

#carrito-flotante .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #dc3545;
}

.carrito-animado {
  animation: bounce 0.6s ease-in-out;
}

.carrito-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
  animation: fadeInUp 0.3s ease-out;
}

.carrito-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 1rem;
}

.carrito-info {
  flex: 1;
}

.carrito-info h6 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.carrito-info p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.cantidad-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.5rem 0;
}

.cantidad-controls button {
  background: #007C91;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cantidad-controls input {
  width: 50px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

.eliminar-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.toast-carrito {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  animation: fadeInOut 2s ease-in-out;
  font-weight: 600;
}

/* ========================================
   FILTROS Y CONTROLES
   ======================================== */

#filtros-categoria {
  margin-bottom: 2rem;
}

#filtros-categoria .btn {
  border-radius: 25px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

#filtros-categoria .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 124, 145, 0.3);
}

#filtros-categoria .btn.active {
  background-color: #007C91;
  border-color: #007C91;
  color: white;
}

.bloque-cantidad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0;
  justify-content: center;
  flex-wrap: wrap;
}

.bloque-cantidad input[type=number] {
  width: 60px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px;
  font-size: 14px;
  background-color: white;
  transition: border-color 0.3s ease;
}

.bloque-cantidad input[type=number]:focus {
  outline: none;
  border-color: #007C91;
  box-shadow: 0 0 0 2px rgba(0, 124, 145, 0.2);
}

.bloque-cantidad .qty-btn {
  background: #007C91;
  color: white;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloque-cantidad .qty-btn:hover {
  background: #004D5E;
  transform: scale(1.1);
}

.bloque-cantidad .agregar-carrito {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
}

.bloque-cantidad .agregar-carrito:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
}

/* ========================================
   FORMULARIOS
   ======================================== */

.form-control:focus {
  border-color: #007C91;
  box-shadow: 0 0 0 0.2rem rgba(0, 124, 145, 0.25);
}

.form-text {
  color: #6c757d;
  font-size: 0.875rem;
}

#ver-historial, #limpiar-historial {
  transition: all 0.3s ease;
}

#ver-historial:hover, #limpiar-historial:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ========================================
   BOTONES Y ELEMENTOS COMUNES
   ======================================== */

.btn-modern {
  background: linear-gradient(135deg, #007C91, #004D5E);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  font-weight: 600;
  cursor: pointer;
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 124, 145, 0.3);
  color: white;
}

.precio {
  font-size: 1.25rem;
  font-weight: bold;
  color: #007C91;
  margin: 1rem 0;
}

/* ========================================
   FOOTER
   ======================================== */

footer {
  background-color: #004D5E;
  color: white;
  text-align: center;
  padding: 20px 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  /* Hero Banner */
  .hero-banner-productos {
    height: 70vh;
    min-height: 500px;
  }

  .overlay-hero {
    padding: 30px 40px;
    margin: 0 20px;
  }

  .contenido-overlay h1 {
    font-size: 2rem;
  }

  .contenido-overlay p {
    font-size: 1rem;
  }

  /* Navegación */
  .collapse.navbar-collapse {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 240px;
    background-color: #007C91;
    padding: 1rem;
    border-radius: 10px;
    z-index: 999;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    animation: fadeInMenu 0.3s ease-out forwards;
  }

  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #007C91;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .navbar-nav {
    flex-direction: column;
  }

  .nav-link {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Carrito */
  #carrito-nav-desktop {
    display: none;
  }
  
  /* Tarjetas Stanley */
  .producto-card-stanley {
    margin-bottom: 1.5rem;
  }
  
  .producto-card-stanley .card-title {
    font-size: 1.2rem;
  }
  
  .producto-card-stanley .precio-stanley {
    font-size: 1.2rem;
  }
  
  /* Filtros */
  #filtros-categoria {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  #filtros-categoria .btn {
    margin-bottom: 0.5rem;
  }
  
  /* Carrito modal */
  .offcanvas-end {
    width: 100vw;
  }

  .carrito-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .carrito-info {
    width: 100%;
  }
}

@media (max-width: 576px) {
  /* Hero Banner */
  .overlay-hero {
    padding: 25px 30px;
  }
  
  .contenido-overlay h1 {
    font-size: 1.5rem;
  }
  
  .contenido-overlay p {
    font-size: 0.9rem;
  }
  
  /* Servicios */
  .servicios .grid-servicios {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .servicios .titulo-seccion h2 {
    font-size: 2rem;
  }
  
  .servicios .servicio {
    padding: 1.5rem 1rem;
  }
  
  /* Carrito modal */
  .offcanvas-end {
    width: 100vw;
  }
}

@media (max-width: 992px) {
  /* Servicios */
  .servicios .grid-servicios {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .servicios .servicio {
    padding: 2rem 1.5rem;
  }
}