body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #e1e6e8;
  color: #222;
}


.transparent-navbar {
  background-color: rgba(255, 255, 255, 0.5) !important; /* Negro semitransparente */
  backdrop-filter: blur(6px); /* 👈 efecto vidrio esmerilado opcional */

}


/* Imagen sticky */
.sticky-image {
  position: sticky;
  top: 80px; /* altura del navbar si es fixed */
}

.text-section {
  padding: 2rem;
}

/* Animación básica */
.footer {
  opacity: 0;
  transform: translateY(40px);
  transition: all 2s ease;
}

.footer.show {
  opacity: 1;
  transform: translateY(0);
}

.card img {
  height: 400px;
  object-fit: cover;
}

.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s;
}

.sticky-carousel {
  position: sticky;
  top: 12vh; /* se queda pegado arriba */
  z-index: 1; /* que quede encima de otros elementos */
  height: 85vh;     /* ocupa toda la altura de la ventana */
}

.carousel-principal img {
  height: 85vh;        /* altura fija */
  object-fit: cover;    /* mantiene proporciones y llena el espacio */
}

.col-lg-6 {
  padding-bottom: 5vh; /* o ajusta según cuánto antes quieres que se despegue */
}

.navbar .nav-link {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: #00B050; /* verde Office */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.navbar .nav-link:hover::after {
  transform: scaleX(1);
}


.navbar .nav-link {
  border-bottom: 3px solid transparent;/* línea blanca gruesa al pasar el mouse */
}

.zoom-container {
  overflow: hidden;          /* oculta lo que se sale del contenedor */
}

.zoom-container img {
  transition: transform 0.3s ease; /* animación suave */
}

.zoom-container:hover img {
  transform: scale(1.1); /* efecto de zoom visual */
}


.footer {
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1); /* sombra hacia arriba */
}

.accordion-button:hover {
  background-color: #f1f1f1;
  color: #333;
}


.price{font-size:2.25rem;font-weight:700}
.badge-trust{position:absolute;left:.75rem;top:.75rem}
.sku{font-size:.9rem;color:#6c757d}
.thumb{cursor:pointer;border:1px solid #e9ecef;border-radius:.25rem}
.thumb.active{outline:2px solid #0d6efd}
.specs-table th{width:35%}
.sticky-actions{position:sticky;top:1rem}
.brand-muted{color:#6c757d}
.section-title{border-bottom:1px solid #e9ecef;padding-bottom:.5rem;margin-bottom:1rem}
.carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%}
.reco-card img{object-fit:contain;height:140px}
.strike{ text-decoration: line-through; color:#888 }

.carousel-product img {
  object-fit: cover;    /* mantiene proporciones y llena el espacio */
}

a {
  text-decoration: none;
}

.footer-section a {
  color: gray;
  text-decoration: none;
}

.footer-section a:hover {
  color: black;
}

.accordion-button:focus {
  box-shadow: none; /* elimina el borde azul brillante */
  background-color: #D9FFEA; /* color personalizado al hacer clic */
  color: black; /* texto negro */
}

.accordion-button:hover {
  box-shadow: none; /* elimina el borde azul brillante */
  background-color: #D9FFEA; /* color personalizado al hacer clic */
  color: black; /* texto negro */
}

.accordion-button:not(.collapsed) {
  background-color: #D9FFEA; /* color cuando está expandido */
  color: black;
}

.footer-section .nav-link {
  color: #6c757d; /* gris Bootstrap */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section .nav-link:hover {
  color: black !important;
}

.min-vh-90 {
  min-height: 80vh; /* 90% del alto de la pantalla */
}


.about-section h2 {
  color: #00B050; /* verde oscuro, puedes ajustar el tono */}
  
.floating-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    padding: 20px 30px;
    font-size: 18px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    width: auto;
    max-width: 90%;
}