/* ================== ESTILOS GENERALES ================== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
  padding-top: 100px; /* deja espacio para la navbar fija */
}
/* Logo principal */
.logo-main {
  height: 55px;  /* puedes dejarlo así o bajarlo a 45 si quieres más compacto */
  width: auto;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

/* Enlace del logo principal */
.logo-main-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* Logo secundario (Soluciones Piscina) */
.logo-extra-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-left: 8px;   /* pequeño espacio entre logos */
}

.icono-extra {
  height: 40px;       /* ✅ tamaño final del logo pequeño */
  width: auto;
  max-height: 40px;   /* evita que crezca si la imagen es muy grande */
  object-fit: contain;
  border-radius: 4px; /* opcional, lo hace más limpio */
  transition: transform 0.2s ease-in-out;
}

.icono-extra:hover {
  transform: scale(1.1);
}
.navbar {
  width: 95%;
  background-color: #eaf4ff;         /* azul muy claro */
  padding: 6px 0;                    /* barra más delgada */
  border-top: 1.5px solid #00a2ff;   /* borde azul fino */
  border-bottom: 1.5px solid #00a2ff;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 162, 255, 0.15); /* leve brillo azul */
  margin: 10px auto;
  transition: all 0.3s ease;
}

.navbar:hover {
  background-color: #ffffff;         /* ✅ queda blanco al pasar el mouse */
  box-shadow: 0 0 8px rgba(0, 162, 255, 0.25); /* brillo sutil */
  border-top: 1.5px solid #0098ee;   /* un poco más intenso */
  border-bottom: 1.5px solid #0098ee;
}

.footer {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
  border-top: 2px solid #00a2ff;
  box-shadow: 0 -0px 8px rgba(0, 162, 255, 0.4);
}

.footer-container {
  width: 90%;
  margin: 0 auto;
  display: grid;                         /* Cambiamos a grid para centrar mejor */
  grid-template-columns: 1fr auto 1fr;   /* Izq - centro - der equilibrado */
  align-items: center;
  position: relative;
}

/* Texto centrado */
.footer p {
  justify-self: center;
  margin: 0;
  font-size: 15px;
  color: #e0e0e0;
  text-align: center;
}

/* Redes sociales (izquierda) */
.social-icons {
  display: flex;
  gap: 18px;
  justify-self: start;
}

.social-icons a {
  font-size: 22px;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

/* Colores originales */
.social-icons a.facebook i { color: #1877f2; }
.social-icons a.instagram i { color: #e4405f; }
.social-icons a.tiktok i { color: #69c9d0; }
.social-icons a.whatsapp i { color: #25d366; }

/* Hover neón */
.social-icons a:hover {
  transform: scale(1.2);
  text-shadow: 0 0 10px currentColor;
}

/* Logos (derecha más centrados) */
.footer-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  padding-right: 60px; /* 🔹 Los acerca hacia el centro */
}

.footer-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.footer-logo-extra {
  height: 28px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.footer-logo:hover,
.footer-logo-extra:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px #00a2ff);
}
footer {
  background-color: #000;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Redes sociales */
.social-icons a {
  margin-right: 12px;
  font-size: 22px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* Colores originales */
.facebook i { color: #1877F2; }
.whatsapp i { color: #25D366; }
.instagram i { color: #E4405F; }

/* Texto centrado */
.footer-text {
  text-align: center;
  flex: 1;
  font-size: 15px;
}

/* Logos a la derecha */
.footer-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logos img {
  height: 40px;
  width: auto;
  border-radius: 6px;
  transition: transform 0.3s ease;
}

.footer-logos img:hover {
  transform: scale(1.1);
}


/* ================== FOOTER ================== */
footer {
  text-align: center;
  padding: 1rem;
  background: #222;
  color: white;
  margin-top: 20px;
}

.footer {
  background-color: #000;                   /* Fondo negro */
  color: #fff;
  padding: 20px 0;
  border-top: 2px solid #00a2ff;            /* Borde azul neón */
  box-shadow: 0 -0px 8px rgba(0, 162, 255, 0.4);
}

.footer-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.footer p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 15px;
  color: #e0e0e0;
  text-align: center;
}

.social-icons {
  display: flex;
  gap: 18px;
}

/* Tamaño base */
.social-icons a {
  font-size: 22px;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

/* Colores originales */
.social-icons a.facebook i { color: #1877f2; }    /* Azul Facebook */
.social-icons a.instagram i { color: #e4405f; }   /* Rosa Instagram */
.social-icons a.tiktok i { color: #69c9d0; }      /* Cian TikTok */
.social-icons a.whatsapp i { color: #25d366; }    /* Verde WhatsApp */

/* Efecto hover: aumenta tamaño y brillo neón */
.social-icons a:hover {
  transform: scale(1.2);
  text-shadow: 0 0 10px currentColor;
}



/* ================== WHATSAPP BUTTON ================== */
#whatsapp-btn {
  position: fixed;
  bottom: 90px;              /* 🔼 encima del footer */
  right: 25px;
  width: 65px;
  height: 65px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2000;             /* 🔝 asegura que quede encima del footer */
  transition: transform 0.3s ease, background-color 0.3s ease;
  text-decoration: none;
}

#whatsapp-btn:hover {
  background-color: #1ebe5d;
  transform: scale(1.1);
}

#whatsapp-btn img {
  width: 38px;
  height: 38px;
  display: block;
}



/* ================== HOME ================== */
.home .hero {
  background: url("img/hero.jpg") center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 5rem 2rem;
}

.home-sections {
  display: flex;
  justify-content: space-around;
  margin: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.home-sections article {
  background: white;
  padding: 1rem;
  border-radius: 10px;
  width: 30%;
  min-width: 250px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ================== TIENDA ================== */
.tienda h1 {
  text-align: center;
  margin: 2rem 0;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.producto {
  background: white;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.producto img {
  max-width: 100%;
  border-radius: 10px;
}

.producto button {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
}

.producto button:hover {
  background: #084298;
}


/* ================== NOSOTROS ================== */
.nosotros {
  padding: 2rem;
  text-align: center;
}

.nosotros-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  justify-content: center;
}

.nosotros-contenido img {
  max-width: 400px;
  border-radius: 10px;
  flex: 1;
}

.nosotros-contenido div {
  flex: 2;
  text-align: justify;
  min-width: 280px;
}

/* ================== BLOG (FONDO AZUL CON BURBUJAS) ================== */
.blog {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: auto;
  text-align: center;
  background: linear-gradient(180deg, #cceeff, #e6f7ff);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Título principal */
.blog h1 {
  color: #003366;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

/* Subtítulos */
.blog h2 {
  color: #003366;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Texto */
.blog p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: justify;
}

/* Misión y Visión */
.mision-vision {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  justify-content: center;
}

.mision-vision article {
  flex: 1;
  min-width: 280px;
  background: #ffffffcc; /* blanco translúcido */
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: left;
}

.mision-vision h2 {
  color: #0066cc;
  margin-bottom: 0.5rem;
}

.blog {
  padding: 1rem 1rem; /* antes tenía 4rem, lo bajamos */
  max-width: 1000px;
  margin: 20px auto; /* antes era auto o más grande */
  text-align: center;
  background: linear-gradient(180deg, #cceeff, #e6f7ff);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Corrige el espacio superior del Blog */
.blog {
  margin-top: 0 !important;     /* elimina margen superior */
  padding-top: 0rem !important; /* ajusta si deseas un poco de aire */
}

/* Si sigue quedando una franja de imagen arriba del Blog */
header, .navbar, .home, .video-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}



/* ================== BURBUJAS ANIMADAS ================== */
.bubble {
  position: absolute;
  bottom: -50px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: rise 15s infinite ease-in-out;
}

/* Animación de subida */
@keyframes rise {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateX(30px) translateY(-60vh) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateX(-30px) translateY(-120vh) scale(1.3);
    opacity: 0;
  }
}

/* ============ NAVBAR FIJA EN TODA LA PÁGINA ============ */
.navbar {
  background: #ffffff;
  padding: 0.5rem 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;       
  z-index: 1000;     

  display: flex;
  justify-content: center; /* centra el contenido */
}

/* Contenedor interno de la navbar */
.nav-container {
  max-width: 1200px;   /* ancho máximo del contenido */
  margin: 0 auto;      /* centra el bloque */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Menús izquierdo y derecho */
.nav-left, .nav-right {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-left a, .nav-right a {
  color: #0066cc;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-left a:hover, .nav-right a:hover {
  color: #003366;
}

/* Logo con texto al lado */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}

.nav-logo img {
  height: 80px;
  display: inline-block;
}

.nav-logo span {
  font-size: 1.4rem;
  font-weight: bold;
  color: #003366;
  letter-spacing: 1px;
}

/* ===== TIENDA ===== */
.tienda {
  padding: 2rem;
  text-align: center;
}

.tienda h1 {
  font-size: 2.2rem;
  color: #003366;
  margin-bottom: 2rem;
}

/* Grid de productos */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

/* Tarjeta de cada producto */
.producto {
  background: #ffffff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.producto:hover {
  transform: translateY(-5px);
}

/* Imágenes uniformes */
.producto img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

/* Nombre del jacuzzi */
.producto h2 {
  margin: 0.8rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #0099cc; /* agua clara */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Botones */
.acciones {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn-carrito,
.btn-comprar {
  flex: 1;
  padding: 0.6rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.btn-carrito {
  background: #00bcd4; /* agua clara */
  color: white;
}

.btn-carrito:hover {
  background: #0097a7;
}

.btn-comprar {
  background: #4caf50;
  color: white;
}

.btn-comprar:hover {
  background: #388e3c;
}
/* ================== CARRITO ================== */
.carrito-container {
  max-width: 900px;
  margin: 120px auto;
  padding: 2rem;
  background: linear-gradient(180deg, #cceeff, #e6f7ff);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.carrito-container h1 {
  text-align: center;
  color: #003366;
  margin-bottom: 1.5rem;
}

.item-carrito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffffcc;
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

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

.item-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.item-info h2 {
  font-size: 1.2rem;
  margin: 0;
  color: #003366;
}

.cantidad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cantidad button {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}

.cantidad button:hover {
  background: #084298;
}

.total {
  font-size: 1.5rem;
  font-weight: bold;
  color: #003366;
  text-align: right;
  margin-top: 1rem;
}

.acciones {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.acciones button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}

.acciones .vaciar {
  background: #dc3545;
  color: white;
}

.acciones .vaciar:hover {
  background: #a71d2a;
}

.acciones .whatsapp {
  background: #25d366;
  color: white;
}

.acciones .whatsapp:hover {
  background: #1ebe5d;
}
/* ================== BURBUJAS PERSONALIZADAS (Carrito + Blog + Contacto) ================== */
.bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  animation: rise 15s infinite ease-in-out;
  background: rgba(0, 191, 255, 0.35); /* celeste translúcido */
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.4); /* brillo suave */
}

/* Variación de tamaños y opacidad para dar naturalidad */
.bubble:nth-child(3n) {
  background: rgba(0, 191, 255, 0.45);
}
.bubble:nth-child(4n) {
  background: rgba(173, 216, 230, 0.4); /* azul más claro */
}
.bubble:nth-child(5n) {
  background: rgba(135, 206, 250, 0.5);
}

/* Animación de subida */
@keyframes rise {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(40px) translateY(-60vh) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translateX(-40px) translateY(-120vh) scale(1.5);
    opacity: 0;
  }
}
/* ================== BURBUJAS EXTRA PARA LA TIENDA ================== */
.tienda {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #cceeff, #e6f7ff);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Burbujas */
.tienda .bubble {
  position: absolute;
  bottom: -60px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: rise 10s infinite ease-in-out; /* más rápidas */
  z-index: 0;
}

/* Muchas burbujas con tamaños y posiciones distintas */
.tienda .bubble:nth-child(1)  { width: 20px; height: 20px; left: 5%;  animation-duration: 12s; }
.tienda .bubble:nth-child(2)  { width: 35px; height: 35px; left: 12%; animation-duration: 14s; }
.tienda .bubble:nth-child(3)  { width: 25px; height: 25px; left: 20%; animation-duration: 11s; }
.tienda .bubble:nth-child(4)  { width: 40px; height: 40px; left: 28%; animation-duration: 15s; }
.tienda .bubble:nth-child(5)  { width: 30px; height: 30px; left: 36%; animation-duration: 13s; }
.tienda .bubble:nth-child(6)  { width: 50px; height: 50px; left: 44%; animation-duration: 16s; }
.tienda .bubble:nth-child(7)  { width: 25px; height: 25px; left: 52%; animation-duration: 12s; }
.tienda .bubble:nth-child(8)  { width: 30px; height: 30px; left: 60%; animation-duration: 10s; }
.tienda .bubble:nth-child(9)  { width: 40px; height: 40px; left: 68%; animation-duration: 14s; }
.tienda .bubble:nth-child(10) { width: 35px; height: 35px; left: 76%; animation-duration: 12s; }
.tienda .bubble:nth-child(11) { width: 20px; height: 20px; left: 84%; animation-duration: 11s; }
.tienda .bubble:nth-child(12) { width: 45px; height: 45px; left: 92%; animation-duration: 13s; }
.tienda .bubble:nth-child(13) { width: 28px; height: 28px; left: 15%; animation-duration: 9s; }
.tienda .bubble:nth-child(14) { width: 22px; height: 22px; left: 33%; animation-duration: 8s; }
.tienda .bubble:nth-child(15) { width: 55px; height: 55px; left: 70%; animation-duration: 15s; }
.tienda .bubble:nth-child(16) { width: 18px; height: 18px; left: 88%; animation-duration: 7s; }

/* Animación más rápida */
@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-50vh) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) scale(1.3);
    opacity: 0;
  }
}
/* ================== ESTILO DETALLE PRODUCTO (subpáginas) ================== */
.producto-detalle {
  max-width: 1000px;
  margin: 120px auto;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: linear-gradient(180deg, #cceeff, #e6f7ff);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.producto-img img {
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.producto-info {
  flex: 1;
  min-width: 280px;
}

.producto-info h2 {
  color: #003366;
  margin-bottom: 0.5rem;
}

.producto-info .precio {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0099cc;
  margin-bottom: 1rem;
}

.producto-info h3 {
  margin-top: 1rem;
  color: #0066cc;
}

.producto-info ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.producto-info button {
  margin-top: 1rem;
  background: #0d6efd;
  color: white;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}

.producto-info button:hover {
  background: #084298;
}

/* Burbujas animadas en producto */
.producto-detalle .bubble {
  position: absolute;
  bottom: -50px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: rise 12s infinite ease-in-out;
}

.producto-detalle .bubble:nth-child(1) {
  left: 10%;
  width: 40px;
  height: 40px;
  animation-duration: 10s;
}

.producto-detalle .bubble:nth-child(2) {
  left: 30%;
  width: 25px;
  height: 25px;
  animation-duration: 8s;
}

.producto-detalle .bubble:nth-child(3) {
  left: 50%;
  width: 35px;
  height: 35px;
  animation-duration: 11s;
}

.producto-detalle .bubble:nth-child(4) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-duration: 7s;
}

.producto-detalle .bubble:nth-child(5) {
  left: 85%;
  width: 50px;
  height: 50px;
  animation-duration: 13s;
}
/* ================== DETALLE DE PRODUCTO ================== */
.producto-detalle {
  position: relative;
  padding: 3rem 2rem;
  max-width: 1100px;
  margin: 120px auto;
  background: linear-gradient(180deg, #cceeff, #e6f7ff);
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  overflow: hidden;
}

.producto-contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.producto-img img {
  width: 380px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.producto-info {
  flex: 1;
  min-width: 280px;
}

.producto-info h1 {
  font-size: 2.2rem;
  color: #003366;
  margin-bottom: 1rem;
}

.producto-info .medidas {
  font-weight: bold;
  color: #0066cc;
  margin-bottom: 0.8rem;
}

.producto-info ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
  line-height: 1.6;
}

.acciones-detalle {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.acciones-detalle .btn-carrito,
.acciones-detalle .btn-comprar {
  flex: 1;
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
}

.acciones-detalle .btn-carrito {
  background: #00bcd4;
  color: white;
}

.acciones-detalle .btn-carrito:hover {
  background: #0097a7;
}

.acciones-detalle .btn-comprar {
  background: #4caf50;
  color: white;
}

.acciones-detalle .btn-comprar:hover {
  background: #388e3c;
}

.regresar {
  margin-top: 1.5rem;
}

.regresar a {
  text-decoration: none;
  font-weight: bold;
  color: #003366;
}

.regresar a:hover {
  text-decoration: underline;
}

/* ================== BURBUJAS PARA DETALLE ================== */
.producto-detalle .bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.producto-detalle .bubbles span {
  position: absolute;
  bottom: -150px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: rise 8s infinite ease-in-out;
}

.producto-detalle .bubbles span:nth-child(1) { left: 10%; animation-duration: 6s; width: 30px; height: 30px; }
.producto-detalle .bubbles span:nth-child(2) { left: 25%; animation-duration: 8s; width: 40px; height: 40px; }
.producto-detalle .bubbles span:nth-child(3) { left: 40%; animation-duration: 10s; width: 25px; height: 25px; }
.producto-detalle .bubbles span:nth-child(4) { left: 55%; animation-duration: 7s; width: 35px; height: 35px; }
.producto-detalle .bubbles span:nth-child(5) { left: 70%; animation-duration: 9s; width: 45px; height: 45px; }
.producto-detalle .bubbles span:nth-child(6) { left: 85%; animation-duration: 6s; width: 20px; height: 20px; }

@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-50vh) scale(1.2); opacity: 1; }
  100% { transform: translateY(-100vh) scale(1.3); opacity: 0; }
}
.regresar-superior {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 10;
}

.regresar-superior a {
  text-decoration: none;
  font-weight: bold;
  color: #003366;
  background: rgba(255,255,255,0.8);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.regresar-superior a:hover {
  background: #003366;
  color: white;
}
.regresar-superior {
  margin: 20px;
}

.regresar-superior a {
  text-decoration: none;
  font-size: 1rem;
  color: #0056b3;
  background: #e6f0ff;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.regresar-superior a:hover {
  background: #cce0ff;
}

.detalle-jacuzzi {
  max-width: 800px;
  margin: 40px auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.detalle-jacuzzi h1 {
  text-align: center;
  color: #003366;
  margin-bottom: 1.5rem;
}

.detalle-jacuzzi img {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  border-radius: 12px;
}

.detalle-jacuzzi ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.detalle-jacuzzi button {
  display: block;
  margin: 20px auto 0;
  background: #0d6efd;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.detalle-jacuzzi button:hover {
  background: #084298;
}

/* ================== JACUZZIS ALEATORIOS ================== */
.recomendaciones {
  margin-top: 20px;       /* espacio arriba reducido */
  padding: 15px 10px;     /* menos grosor interno */
  background: linear-gradient(135deg, #cceeff, #e6f7ff);
  border-radius: 12px;    /* esquinas más discretas */
  position: relative;
  overflow: hidden;
  width: 95%;             /* no ocupa todo el ancho */
  margin-left: auto;      /* centrado */
  margin-right: auto;     /* centrado */
  box-sizing: border-box;
}

/* Contenedor de burbujas */
.recomendaciones .bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.recomendaciones .bubbles span {
  position: absolute;
  bottom: -150px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  animation: rise 8s infinite ease-in-out;
}

.recomendaciones .bubbles span:nth-child(1) { left: 10%; animation-duration: 6s; width: 30px; height: 30px; }
.recomendaciones .bubbles span:nth-child(2) { left: 25%; animation-duration: 8s; width: 40px; height: 40px; }
.recomendaciones .bubbles span:nth-child(3) { left: 40%; animation-duration: 10s; width: 25px; height: 25px; }
.recomendaciones .bubbles span:nth-child(4) { left: 55%; animation-duration: 7s; width: 35px; height: 35px; }
.recomendaciones .bubbles span:nth-child(5) { left: 70%; animation-duration: 9s; width: 45px; height: 45px; }
.recomendaciones .bubbles span:nth-child(6) { left: 85%; animation-duration: 6s; width: 20px; height: 20px; }

@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-50vh) scale(1.2); opacity: 1; }
  100% { transform: translateY(-100vh) scale(1.3); opacity: 0; }
}

/* Título */
.recomendaciones h2 {
  margin-bottom: 15px;
  font-size: 1.6em;
  color: #004d66;
  text-align: center;
  font-weight: bold;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 3px rgba(255,255,255,0.6);
}

/* Lista de productos */
.recomendaciones-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* Tarjeta de producto */
.recomendacion-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recomendacion-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.recomendacion-item img {
  width: 100%;
  height: auto;
  border-bottom: 3px solid #b3e5fc;
}

.recomendacion-item h3 {
  margin: 12px 0 5px;
  font-size: 1.1em;
  color: #0077b6;
}

.recomendacion-item a {
  display: inline-block;
  padding: 8px 14px;
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  color: white;
  text-decoration: none;
  border-radius: 20px;
  margin-bottom: 12px;
  transition: background 0.3s ease;
}

.recomendacion-item a:hover {
  background: linear-gradient(135deg, #0077b6, #023e8a);
}

/* ================== SECCIÓN NOSOTROS ================== */
.nosotros {
  position: relative;
  padding: 90px 20px;
  background: radial-gradient(circle at top, #bff0ff 0%, #a6e3f7 40%, #d6f4ff 100%);
  text-align: center;
  overflow: hidden;
  backdrop-filter: blur(2px);
}

/* Fondo animado de burbujas */
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* Estilo de cada burbuja con efecto 3D */
.bubble {
  position: absolute;
  bottom: -120px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(0,160,210,0.25));
  box-shadow: 0 0 15px rgba(0,160,210,0.25), inset 0 0 10px rgba(255,255,255,0.4);
  opacity: 0.8;
  animation: rise var(--duration) cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
  filter: blur(calc(var(--size) / 15));
  transform-origin: center;
  mix-blend-mode: screen;
}

/* Movimiento orgánico tipo agua */
@keyframes rise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.7;
  }
  20% {
    transform: translateY(-20vh) translateX(10px) scale(1.05);
    opacity: 1;
  }
  40% {
    transform: translateY(-45vh) translateX(-12px) scale(1.1);
    opacity: 0.9;
  }
  60% {
    transform: translateY(-70vh) translateX(8px) scale(1.15);
    opacity: 0.7;
  }
  80% {
    transform: translateY(-90vh) translateX(-5px) scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-120vh) scale(1.05);
    opacity: 0;
  }
}

/* Capa superior para el contenido */
.nosotros > *:not(.bubbles) {
  position: relative;
  z-index: 2;
}

/* Animación flotante del logo */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-nosotros {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-bottom: 50px;
}

.hero-nosotros .hero-logo {
  width: 110px;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0, 150, 200, 0.3);
  animation: float 5s ease-in-out infinite;
}

.hero-nosotros h1 {
  font-size: 2.8em;
  color: #004c61;
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-nosotros .slogan {
  font-size: 1.2em;
  font-style: italic;
  color: #007ba9;
  margin-top: 8px;
  text-align: left;
}

/* Tarjetas */
.info-nosotros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  max-width: 1100px;
  margin: 0 auto;
}

.info-nosotros .card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-align: left;
}

.info-nosotros .card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 150, 200, 0.15);
}

.info-nosotros h2 {
  color: #00a8d6;
  margin-bottom: 15px;
  font-weight: 600;
}

.info-nosotros p,
.info-nosotros ul {
  color: #333;
  line-height: 1.6;
}

.info-nosotros ul {
  list-style: none;
  padding: 0;
}

.info-nosotros li {
  margin-bottom: 8px;
}

.info-nosotros li::before {
  content: "✔️ ";
  color: #00b4d8;
}
/* ================== SECCIÓN HOME ================== */
.home {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #bde9ff 0%, #b3e4ff 50%, #c7efff 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

/* 🎬 Video de fondo */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* debajo de las burbujas */
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(1.1); /* más natural y visible */
}

/* 🔆 Capa de luz suave sobre el video */
.video-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(180,220,255,0.25));
  z-index: 1;
}

/* Fondo animado encima del video */
.home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.35), transparent 70%);
  animation: lightWaves 18s linear infinite;
  opacity: 0.5;
  z-index: 2;
  filter: blur(25px);
}

/* Capa de burbujas (entre el video y el texto) */
.home .bubbles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

/* Burbujas individuales */
.home .bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(160,220,255,0.25));
  box-shadow: 0 0 18px rgba(200,240,255,0.4), inset 0 0 10px rgba(255,255,255,0.6);
  opacity: 0.9;
  animation: rise var(--duration) cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
  filter: blur(calc(var(--size) / 25));
  mix-blend-mode: screen;
}

.home .bubbles .bubble:nth-child(odd) {
  animation-delay: calc(var(--duration) / 3);
}

/* Animación burbujas */
@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  50% { transform: translateY(-60vh) scale(1.1); opacity: 0.8; }
  100% { transform: translateY(-120vh) scale(1); opacity: 0; }
}

/* Ondas suaves de fondo */
@keyframes lightWaves {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Contenido principal */
.hero {
  position: relative;
  z-index: 4;
  color: #004c61;
  animation: floatText 4s ease-in-out infinite;
}

.hero h1 {
  font-size: 2.8em;
  margin-bottom: 10px;
  color: #007ea7;
  text-shadow: 1px 1px 5px rgba(255,255,255,0.9);
}

.hero p {
  font-size: 1.2em;
  color: #005f73;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}

@keyframes floatText {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Sección de las tarjetas */
.home-sections {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

/* Tarjetas (Calidad, Innovación, Confianza) */
.home-sections article {
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(235,250,255,0.92) 100%);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 30px;
  width: 300px;
  box-shadow: 0 10px 25px rgba(80,170,220,0.25);
  border: 1.5px solid rgba(255,255,255,0.9);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 4;
}

/* efecto de brillo y profundidad */
.home-sections article::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,0.45), rgba(200,240,255,0.25));
  z-index: -1;
  pointer-events: none;
}

.home-sections article:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 35px rgba(70,160,210,0.4);
}


/* ================== BURBUJAS REALISTAS CON COLOR PERSONALIZADO ================== */
.carrito-container {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #b9e9ff 0%, #e6faff 70%, #d8f0ff 100%);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 3px 12px rgba(0, 60, 100, 0.25);
  z-index: 1;
}

/* Capa de luces suaves de fondo */
.carrito-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(180,220,255,0.5) 0%, transparent 70%),
              radial-gradient(circle at 80% 20%, rgba(160,230,255,0.45) 0%, transparent 60%);
  z-index: 0;
}

/* Efecto de burbuja */
.bubble {
  position: absolute;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0%, rgba(160,220,255,0.4) 100%);
  box-shadow: 0 0 15px rgba(255,255,255,0.45),
              inset 0 0 10px rgba(255,255,255,0.5),
              0 0 30px rgba(135,206,250,0.3);
  animation: riseFloat 16s infinite ease-in-out;
  opacity: 0.8;
  filter: blur(0.3px);
}

/* Tamaños, posiciones y delays variados */
.bubble:nth-child(1)  { width: 25px; height: 25px; left: 5%;  animation-duration: 13s; }
.bubble:nth-child(2)  { width: 40px; height: 40px; left: 15%; animation-duration: 17s; animation-delay: 2s; }
.bubble:nth-child(3)  { width: 22px; height: 22px; left: 25%; animation-duration: 11s; animation-delay: 4s; }
.bubble:nth-child(4)  { width: 55px; height: 55px; left: 35%; animation-duration: 19s; animation-delay: 1s; }
.bubble:nth-child(5)  { width: 32px; height: 32px; left: 45%; animation-duration: 14s; animation-delay: 3s; }
.bubble:nth-child(6)  { width: 45px; height: 45px; left: 55%; animation-duration: 20s; animation-delay: 5s; }
.bubble:nth-child(7)  { width: 25px; height: 25px; left: 65%; animation-duration: 12s; animation-delay: 1s; }
.bubble:nth-child(8)  { width: 38px; height: 38px; left: 75%; animation-duration: 16s; animation-delay: 2s; }
.bubble:nth-child(9)  { width: 28px; height: 28px; left: 85%; animation-duration: 15s; animation-delay: 4s; }
.bubble:nth-child(10) { width: 50px; height: 50px; left: 92%; animation-duration: 18s; animation-delay: 3s; }

/* Animación flotante más suave */
@keyframes riseFloat {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.7;
  }
  30% {
    transform: translateX(25px) translateY(-35vh) scale(1.15);
    opacity: 1;
  }
  70% {
    transform: translateX(-25px) translateY(-90vh) scale(1.25);
    opacity: 0.9;
  }
  100% {
    transform: translateX(0) translateY(-120vh) scale(1.4);
    opacity: 0;
  }
}

/* Burbujas que pasan por delante */
.carrito-container .bubble.front {
  z-index: 2;
  opacity: 0.6;
  filter: blur(1px);
}

/* Texto y botones visibles sobre fondo brillante */
.carrito-container h1,
.carrito-container .total,
.carrito-container .acciones button {
  position: relative;
  z-index: 3;
  color: #003a5c;
  text-shadow: 0 0 8px rgba(255,255,255,0.9);
}

/* Botones con color del agua */
.carrito-container .acciones button {
  background: linear-gradient(135deg, #00bfff, #009fd4);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.carrito-container .acciones button:hover {
  background: linear-gradient(135deg, #009fd4, #00bfff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}


/* ================== BURBUJAS REALISTAS PARA BLOG ================== */
.blog {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #c6f1ff 0%, #dbf8ff 50%, #f2fcff 100%);
}

/* Capa de burbujas */
.blog .bubble {
  position: absolute;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(160,220,255,0.3));
  box-shadow: 0 0 15px rgba(180,230,255,0.35),
              inset 0 0 10px rgba(255,255,255,0.5),
              0 0 20px rgba(160,220,255,0.25);
  opacity: 0.85;
  animation: riseBlog var(--duration, 18s) cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
  mix-blend-mode: screen;
  filter: blur(calc(var(--size, 25px) / 25));
  z-index: 1;
}

@keyframes riseBlog {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  40%  { transform: translateX(20px) translateY(-50vh) scale(1.2); opacity: 1; }
  80%  { transform: translateX(-20px) translateY(-100vh) scale(1.3); opacity: 0.9; }
  100% { transform: translateY(-130vh) scale(1.4); opacity: 0; }
}

/* === Variación de tamaños, posiciones y tiempos === */
.blog .bubble:nth-child(1)  { --size: 20px; left: 5%;  --duration: 14s; }
.blog .bubble:nth-child(2)  { --size: 28px; left: 10%; --duration: 16s; }
.blog .bubble:nth-child(3)  { --size: 18px; left: 15%; --duration: 20s; }
.blog .bubble:nth-child(4)  { --size: 35px; left: 20%; --duration: 22s; }
.blog .bubble:nth-child(5)  { --size: 25px; left: 25%; --duration: 18s; }
.blog .bubble:nth-child(6)  { --size: 40px; left: 30%; --duration: 26s; }
.blog .bubble:nth-child(7)  { --size: 30px; left: 35%; --duration: 17s; }
.blog .bubble:nth-child(8)  { --size: 24px; left: 40%; --duration: 19s; }
.blog .bubble:nth-child(9)  { --size: 38px; left: 45%; --duration: 28s; }
.blog .bubble:nth-child(10) { --size: 22px; left: 50%; --duration: 21s; }
.blog .bubble:nth-child(11) { --size: 26px; left: 55%; --duration: 19s; }
.blog .bubble:nth-child(12) { --size: 32px; left: 60%; --duration: 25s; }
.blog .bubble:nth-child(13) { --size: 20px; left: 65%; --duration: 18s; }
.blog .bubble:nth-child(14) { --size: 42px; left: 70%; --duration: 29s; }
.blog .bubble:nth-child(15) { --size: 28px; left: 75%; --duration: 16s; }
.blog .bubble:nth-child(16) { --size: 34px; left: 80%; --duration: 27s; }
.blog .bubble:nth-child(17) { --size: 24px; left: 85%; --duration: 23s; }
.blog .bubble:nth-child(18) { --size: 38px; left: 90%; --duration: 25s; }
.blog .bubble:nth-child(19) { --size: 22px; left: 92%; --duration: 20s; }
.blog .bubble:nth-child(20) { --size: 26px; left: 12%; --duration: 19s; }
.blog .bubble:nth-child(21) { --size: 33px; left: 28%; --duration: 26s; }
.blog .bubble:nth-child(22) { --size: 29px; left: 48%; --duration: 24s; }
.blog .bubble:nth-child(23) { --size: 31px; left: 68%; --duration: 22s; }
.blog .bubble:nth-child(24) { --size: 37px; left: 88%; --duration: 28s; }


/* ================== BURBUJAS PARA CARRITO ================== */
.carrito-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #c6f1ff 0%, #dbf8ff 50%, #f2fcff 100%);
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(180,230,255,0.35);
  padding: 30px;
  z-index: 0;
}

/* Burbujas */
.carrito-container .bubble {
  position: absolute;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(160,220,255,0.3));
  box-shadow: 0 0 15px rgba(180,230,255,0.35),
              inset 0 0 10px rgba(255,255,255,0.5),
              0 0 20px rgba(160,220,255,0.25);
  opacity: 0.85;
  animation: riseCart var(--duration, 18s) cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
  mix-blend-mode: screen;
  filter: blur(calc(var(--size, 25px) / 25));
  z-index: 0;
}

@keyframes riseCart {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  40%  { transform: translateX(20px) translateY(-50vh) scale(1.2); opacity: 1; }
  80%  { transform: translateX(-20px) translateY(-100vh) scale(1.3); opacity: 0.9; }
  100% { transform: translateY(-130vh) scale(1.4); opacity: 0; }
}

/* Variaciones */
.carrito-container .bubble:nth-child(1)  { --size: 18px; left: 8%;  --duration: 14s; }
.carrito-container .bubble:nth-child(2)  { --size: 25px; left: 15%; --duration: 16s; }
.carrito-container .bubble:nth-child(3)  { --size: 22px; left: 22%; --duration: 20s; }
.carrito-container .bubble:nth-child(4)  { --size: 30px; left: 28%; --duration: 22s; }
.carrito-container .bubble:nth-child(5)  { --size: 26px; left: 35%; --duration: 18s; }
.carrito-container .bubble:nth-child(6)  { --size: 40px; left: 42%; --duration: 26s; }
.carrito-container .bubble:nth-child(7)  { --size: 24px; left: 50%; --duration: 19s; }
.carrito-container .bubble:nth-child(8)  { --size: 28px; left: 58%; --duration: 21s; }
.carrito-container .bubble:nth-child(9)  { --size: 35px; left: 66%; --duration: 25s; }
.carrito-container .bubble:nth-child(10) { --size: 32px; left: 72%; --duration: 23s; }
.carrito-container .bubble:nth-child(11) { --size: 27px; left: 80%; --duration: 20s; }
.carrito-container .bubble:nth-child(12) { --size: 38px; left: 88%; --duration: 28s; }
.carrito-container .bubble:nth-child(13) { --size: 20px; left: 94%; --duration: 17s; }
.carrito-container .bubble:nth-child(14) { --size: 42px; left: 4%;  --duration: 29s; }
.carrito-container .bubble:nth-child(15) { --size: 24px; left: 12%; --duration: 21s; }
.carrito-container .bubble:nth-child(16) { --size: 36px; left: 25%; --duration: 27s; }
.carrito-container .bubble:nth-child(17) { --size: 28px; left: 48%; --duration: 22s; }
.carrito-container .bubble:nth-child(18) { --size: 31px; left: 68%; --duration: 24s; }
.carrito-container .bubble:nth-child(19) { --size: 37px; left: 88%; --duration: 28s; }
.carrito-container .bubble:nth-child(20) { --size: 33px; left: 54%; --duration: 25s; }



/* ================== BURBUJAS PARA CONTACTO ================== */
.contacto-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #d2f3ff 0%, #eafaff 50%, #ffffff 100%);
  border-radius: 25px;
  padding: 40px;
  box-shadow: 0 0 30px rgba(160,220,255,0.4);
  z-index: 0;
}

/* Burbujas */
.contacto-container .bubble {
  position: absolute;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(140,210,255,0.3));
  box-shadow: 0 0 15px rgba(180,230,255,0.4),
              inset 0 0 12px rgba(255,255,255,0.5),
              0 0 25px rgba(160,220,255,0.25);
  opacity: 0.9;
  animation: riseContacto var(--duration, 20s) cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
  mix-blend-mode: screen;
  filter: blur(calc(var(--size, 25px) / 25));
  z-index: 0;
}

@keyframes riseContacto {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  40%  { transform: translateX(25px) translateY(-50vh) scale(1.15); opacity: 1; }
  80%  { transform: translateX(-25px) translateY(-100vh) scale(1.3); opacity: 0.85; }
  100% { transform: translateY(-130vh) scale(1.4); opacity: 0; }
}

/* Variaciones (muchas burbujas con diferentes tamaños y velocidades) */
.contacto-container .bubble:nth-child(1)  { --size: 18px; left: 6%;  --duration: 16s; }
.contacto-container .bubble:nth-child(2)  { --size: 26px; left: 12%; --duration: 18s; }
.contacto-container .bubble:nth-child(3)  { --size: 22px; left: 20%; --duration: 22s; }
.contacto-container .bubble:nth-child(4)  { --size: 35px; left: 28%; --duration: 25s; }
.contacto-container .bubble:nth-child(5)  { --size: 28px; left: 36%; --duration: 21s; }
.contacto-container .bubble:nth-child(6)  { --size: 40px; left: 43%; --duration: 26s; }
.contacto-container .bubble:nth-child(7)  { --size: 24px; left: 50%; --duration: 19s; }
.contacto-container .bubble:nth-child(8)  { --size: 30px; left: 58%; --duration: 23s; }
.contacto-container .bubble:nth-child(9)  { --size: 37px; left: 65%; --duration: 28s; }
.contacto-container .bubble:nth-child(10) { --size: 32px; left: 72%; --duration: 24s; }
.contacto-container .bubble:nth-child(11) { --size: 27px; left: 80%; --duration: 20s; }
.contacto-container .bubble:nth-child(12) { --size: 42px; left: 88%; --duration: 27s; }
.contacto-container .bubble:nth-child(13) { --size: 20px; left: 94%; --duration: 17s; }
.contacto-container .bubble:nth-child(14) { --size: 45px; left: 4%;  --duration: 30s; }
.contacto-container .bubble:nth-child(15) { --size: 25px; left: 17%; --duration: 21s; }
.contacto-container .bubble:nth-child(16) { --size: 34px; left: 30%; --duration: 26s; }
.contacto-container .bubble:nth-child(17) { --size: 31px; left: 47%; --duration: 24s; }
.contacto-container .bubble:nth-child(18) { --size: 39px; left: 63%; --duration: 29s; }
.contacto-container .bubble:nth-child(19) { --size: 36px; left: 81%; --duration: 27s; }
.contacto-container .bubble:nth-child(20) { --size: 29px; left: 90%; --duration: 23s; }


/* ================== FONDO AZUL PARA TODAS LAS SECCIONES ================== */
.carrito-container,
.blog,
.contacto,
.contacto-container,
.tienda,
#contacto,
section.contacto {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #bdefff 0%, #9ee4ff 100%);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 170, 255, 0.15);
  z-index: 0;
}


/* ================== BURBUJAS REALISTAS - CONTACTO ================== */
.contacto-container {
  position: relative;
  overflow: hidden;
  /* El fondo lo manejas con el estilo global; esta clase asegura posicionamiento */
  z-index: 0;
  padding: 2.5rem;
}

/* capa de luces suaves (opcional) */
.contacto-container::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.10), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(200,240,255,0.06), transparent 40%);
  z-index: 0;
  mix-blend-mode: overlay;
}

/* regla base para burbujas */
.contacto-container .bubble {
  position: absolute;
  bottom: -120px;                 /* inicio por debajo */
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
              rgba(255,255,255,0.98) 0%,
              rgba(180,230,255,0.45) 45%,
              rgba(140,210,255,0.22) 100%);
  box-shadow:
    0 0 12px rgba(255,255,255,0.6),      /* brillo central */
    inset 0 6px 18px rgba(255,255,255,0.45),
    0 0 24px rgba(140,200,255,0.18);      /* halo exterior */
  opacity: 0.88;
  mix-blend-mode: screen;
  filter: blur(0.4px);
  z-index: 1;                           /* por detrás del contenido principal */
  will-change: transform, opacity;
  transform-origin: center;
  /* animación controlada por variable --duration */
  animation: riseContact var(--duration, 18s) cubic-bezier(.4,.12,.2,1) infinite;
}

/* burbujas que pasan por delante (clase adicional .front) */
.contacto-container .bubble.front {
  z-index: 3;
  opacity: 0.65;
  filter: blur(0.8px);
  pointer-events: none;
}

/* trayectoria más orgánica (uso de translate3d para mejor rendimiento) */
@keyframes riseContact {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.75;
  }
  30% {
    transform: translate3d(22px, -36vh, 0) scale(1.08);
    opacity: 1;
  }
  60% {
    transform: translate3d(-28px, -82vh, 0) scale(1.18);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(0, -130vh, 0) scale(1.35);
    opacity: 0;
  }
}

/* === VARIACIONES: tamaños, posiciones y duración / delay ===
   (24 burbujas, cámbialas o agrega más si quieres) */
.contacto-container .bubble:nth-child(1)  { left: 4%;  width: 18px; height: 18px; --duration: 13s;  animation-delay: 0s;}
.contacto-container .bubble:nth-child(2)  { left: 10%; width: 26px; height: 26px; --duration: 16s; animation-delay: 1s;}
.contacto-container .bubble:nth-child(3)  { left: 16%; width: 22px; height: 22px; --duration: 14s; animation-delay: 3s;}
.contacto-container .bubble:nth-child(4)  { left: 22%; width: 34px; height: 34px; --duration: 20s; animation-delay: 2s;}
.contacto-container .bubble:nth-child(5)  { left: 28%; width: 28px; height: 28px; --duration: 18s; animation-delay: 4s;}
.contacto-container .bubble:nth-child(6)  { left: 34%; width: 42px; height: 42px; --duration: 24s; animation-delay: 6s;}
.contacto-container .bubble:nth-child(7)  { left: 40%; width: 24px; height: 24px; --duration: 15s; animation-delay: 0.5s;}
.contacto-container .bubble:nth-child(8)  { left: 46%; width: 30px; height: 30px; --duration: 19s; animation-delay: 2.5s;}
.contacto-container .bubble:nth-child(9)  { left: 52%; width: 36px; height: 36px; --duration: 22s; animation-delay: 3.2s;}
.contacto-container .bubble:nth-child(10) { left: 58%; width: 20px; height: 20px; --duration: 12s; animation-delay: 1.2s;}
.contacto-container .bubble:nth-child(11) { left: 64%; width: 32px; height: 32px; --duration: 21s; animation-delay: 5s;}
.contacto-container .bubble:nth-child(12) { left: 70%; width: 26px; height: 26px; --duration: 17s; animation-delay: 2.8s;}
.contacto-container .bubble:nth-child(13) { left: 76%; width: 40px; height: 40px; --duration: 25s; animation-delay: 4.5s;}
.contacto-container .bubble:nth-child(14) { left: 82%; width: 22px; height: 22px; --duration: 16s; animation-delay: 3.5s;}
.contacto-container .bubble:nth-child(15) { left: 88%; width: 30px; height: 30px; --duration: 18s; animation-delay: 1.8s;}
.contacto-container .bubble:nth-child(16) { left: 92%; width: 46px; height: 46px; --duration: 26s; animation-delay: 5.5s;}
/* extras (para densidad) */
.contacto-container .bubble:nth-child(17) { left: 8%;  width: 38px; height: 38px; --duration: 28s; animation-delay: 6s;}
.contacto-container .bubble:nth-child(18) { left: 18%; width: 29px; height: 29px; --duration: 20s; animation-delay: 2.2s;}
.contacto-container .bubble:nth-child(19) { left: 30%; width: 21px; height: 21px; --duration: 15s; animation-delay: 0.9s;}
.contacto-container .bubble:nth-child(20) { left: 44%; width: 33px; height: 33px; --duration: 23s; animation-delay: 4.2s;}
.contacto-container .bubble:nth-child(21) { left: 56%; width: 27px; height: 27px; --duration: 19s; animation-delay: 3.7s;}
.contacto-container .bubble:nth-child(22) { left: 68%; width: 35px; height: 35px; --duration: 22s; animation-delay: 4.8s;}
.contacto-container .bubble:nth-child(23) { left: 78%; width: 23px; height: 23px; --duration: 18s; animation-delay: 2.6s;}
.contacto-container .bubble:nth-child(24) { left: 86%; width: 44px; height: 44px; --duration: 27s; animation-delay: 5.1s;}

/* ===== Rendimiento: reducir en pantallas pequeñas ===== */
@media (max-width: 720px) {
  /* muestra solo las primeras 10 burbujas en móviles */
  .contacto-container .bubble:nth-child(n+11) { display: none; }
}



/* Fondo de video general para toda la tienda */
.video-fondo-tienda {
  position: fixed;   /* siempre detrás mientras haces scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;       /* queda detrás de todo */
  overflow: hidden;
}

.video-fondo-tienda video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  opacity: 0.45;
}

/* ===== FONDO DE VIDEO TIENDA ===== */
.video-fondo-tienda {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* mantiene el video detrás */
}

.video-fondo-tienda video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: brightness(0.7);
}

/* ===== SECCIONES DE LA TIENDA ===== */
.tienda {
  position: relative;
  background: transparent; /* 🔥 total transparencia */
  padding: 40px 20px;
  z-index: 1;
}

/* ===== GRID DE PRODUCTOS ===== */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  background: transparent; /* 🔥 sin bloque de fondo */
  z-index: 2;
}

/* ===== TARJETAS DE PRODUCTOS ===== */
.producto {
  background: rgba(0, 0, 0, 0.45); /* leve transparencia negra para resaltar sobre el video */
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: white;
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 3;
}

.producto:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.03);
}

.producto img {
  width: 100%;
  border-radius: 10px;
}

.producto h2 {
  color: #fff;
  margin: 10px 0;
}

.producto button {
  background: rgba(0, 140, 255, 0.8);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.producto button:hover {
  background: rgba(0, 140, 255, 1);
}

/* ===== TÍTULOS ===== */
.tienda h1, 
.tienda h2 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  text-align: center;
}


/* Fondo de imagen para la sección nosotros */
.nosotros {
  position: relative;
  background: url("img/nosotros2.jpg") no-repeat center center/cover;
  z-index: 0;
}

/* Capa semitransparente para mejorar contraste del texto */
.nosotros::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* Ajusta la opacidad si quieres más o menos oscuro */
  z-index: 0;
}

/* Todo el contenido visible queda encima del fondo */
.nosotros > * {
  position: relative;
  z-index: 1;
}
.nosotros .card {
  background: rgba(255, 255, 255, 0.22); /* Aumenta transparencia a 22% */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15); /* sombra sutil oscura para contraste */
  padding: 25px;
  color: #fff; /* texto blanco para mejor contraste */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* mejora legibilidad */
  transition: transform 0.3s ease, background 0.3s ease;
}

.nosotros .card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.3); /* un poco más visible al pasar el mouse */
}

.bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; /* debajo del contenido, encima del video */
}

.bubble {
  position: absolute;
  bottom: -50px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: rise var(--duration) linear infinite;
  width: var(--size);
  height: var(--size);
  opacity: 0.8;
}

@keyframes rise {
  from {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  to {
    transform: translateY(-100vh) scale(1.3);
    opacity: 0;
  }
}

/* Asegurar que los otros elementos estén arriba */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* el video va debajo */
}

.hero, .nosotros {
  position: relative;
  z-index: 2; /* el texto y tarjetas encima de burbujas */
}






/* Fondo de imagen para la sección blog */
.blog {
  position: relative;
  background: url("img/blog4.jpg") no-repeat center center/cover;
  z-index: 0;
}

/* Capa semitransparente para mejorar contraste del texto */
.blog::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* Ajusta la opacidad si quieres más o menos oscuro */
  z-index: 0;
}


/* ==== Botón flotante de WhatsApp ==== */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #25D366;
  color: white;
  font-size: 28px;
  line-height: 0;
  padding: 16px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

/* ==== Responsivo ==== */
@media (max-width: 768px) {
  section.contacto {
    padding: 25px 15px;
  }
  section.contacto h2 {
    font-size: 1.8rem;
  }
  .whatsapp-float {
    right: 18px;
    bottom: 18px;
  }
}



/* ==================== STYLE AISLADO: SECCIÓN HOME ==================== */

/* 🎬 Contenedor principal */
.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background: #000;
}

/* Fondo de video */
.home .video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.home .bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.65) saturate(1.05);
}

/* Capa sutil sobre el video */
.home .video-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}

/* ---------------- Burbujas ---------------- */
.home .bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.home .bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(160,220,255,0.2));
  box-shadow: 0 0 10px rgba(180,230,255,0.2), inset 0 0 8px rgba(255,255,255,0.4);
  opacity: 0.9;
  animation: home-rise var(--duration) linear infinite;
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 25));
  mix-blend-mode: screen;
}

@keyframes home-rise {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(-120vh) scale(1.1); opacity: 0; }
}

/* ---------------- HERO (Título) ---------------- */
.home .hero {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  padding-top: 10px; /* ajusta según tu barra de navegación */
  color: #fff;
}

.home .hero-content h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  color: #eaf9ff;
  text-shadow: 0 0 10px rgba(0,0,0,0.6);
  margin-bottom: 0.5rem;
}

.home .hero-content h1 span {
  color: #00b7ff;
}

.home .hero-content p {
  font-size: 1.2rem;
  color: #d6ebff;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  margin: 0;
}

/* ---------------- TARJETAS ---------------- */
.home .home-sections {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  padding: 40px 5%;
}

/* 🎨 Tarjetas con efecto vidrio transparente */
.home .home-sections article {
  flex: 1 1 300px;
  background: rgba(255, 255, 255, 0.05); /* casi transparente */
  backdrop-filter: blur(15px); /* efecto vidrio */
  border-radius: 20px;
  padding: 30px;
  width: 300px;
  color: #ffffff;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 4;
}

/* ✨ Hover con brillo */
.home .home-sections article:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 180, 255, 0.45);
  border-color: rgba(0, 180, 255, 0.3);
}

/* 🏷️ Títulos */
.home .home-sections h2 {
  color: #00d9ff;
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

/* 📄 Texto */
.home .home-sections p {
  color: #e6faff;
  line-height: 1.5;
  font-size: 1rem;
}

/* 🌟 Palabras resaltadas */
.home .home-sections .resaltar {
  color: #00e0ff;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
  letter-spacing: 0.3px;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .home .home-sections {
    flex-direction: column;
    align-items: center;
  }

  .home .home-sections article {
    width: 90%;
  }
}


/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 768px) {
  .home .hero {
    padding-top: 100px;
  }

  .home .hero-content h1 {
    font-size: 2.2em;
  }

  .home .home-sections {
    flex-direction: column;
    align-items: center;
  }

  .home .home-sections article {
    width: 90%;
  }
}
/* ---------------- SECCIÓN HOME SIN CUADROS + EFECTO NEÓN ---------------- */
.home .home-sections {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  padding: 40px 5%;
  text-align: center;
}

/* 🔹 Sin cuadros */
.home .home-sections article {
  flex: 1 1 300px;
  color: #ffffff;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  transition: all 0.35s ease;
  cursor: pointer;
}

/* 🔹 Efecto neón al pasar el mouse */
.home .home-sections article:hover h2 {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00eaff;
  transform: scale(1.05);
}

.home .home-sections article:hover p {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
  transform: scale(1.02);
}

/* 🔹 Títulos principales */
.home .home-sections h2 {
  color: #00eaff;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  transition: all 0.35s ease;
}

/* 🔹 Texto descriptivo */
.home .home-sections p {
  font-size: 1.05rem;
  color: #eafcff;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
  transition: all 0.35s ease;
}

/* 🌟 Resaltado de palabras */
.home .home-sections strong {
  color: #00eaff;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .home .home-sections {
    flex-direction: column;
    gap: 35px;
  }
}

/* =================== EFECTO SUAVE PARA TÍTULO DE TIENDA =================== */
.tienda .titulo-neon {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  color: #c8f5ff; /* color base más claro para buena lectura */
  text-shadow:
    0 0 2px #7ee0ff,
    0 0 6px #3cc3ff,
    0 0 12px #1a9fff;
  animation: glowPulse 3s infinite alternate ease-in-out;
  margin-bottom: 10px;
}

/* Efecto de resplandor animado más sutil */
@keyframes glowPulse {
  from {
    text-shadow:
      0 0 2px #7ee0ff,
      0 0 6px #3cc3ff,
      0 0 10px #1a9fff;
  }
  to {
    text-shadow:
      0 0 4px #a4f3ff,
      0 0 8px #66d4ff,
      0 0 14px #1aaaff;
  }
}

/* Subtítulo debajo */
.tienda h2 {
  text-align: center;
  color: #d9faff;
  text-shadow:
    0 0 2px #7ee0ff,
    0 0 5px #3cc3ff;
  margin-top: 10px;
}


/* ===== Footer Fijo ===== */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000; /* Puedes cambiar color si tu diseño lo requiere */
    color: #fff;
    z-index: 9999;
    padding: 12px 0;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.35);
}

.footer-container {
    width: 95%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Redes sociales */
.social-icons a {
    font-size: 22px;
    margin-right: 15px;
    color: #fff;
    transition: 0.3s;
}

.social-icons a:hover {
    transform: scale(1.2);
}

/* Logos */
.footer-logos img {
    height: 40px;
    margin-left: 10px;
}

/* 📌 Evita que el contenido quede tapado por el footer */
body {
    padding-bottom: 80px; /* Ajustar dependiendo del tamaño de tu footer */
}

/* ✅ Responsive */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}
/* Corrección global para centrar contenido en todas las páginas */
.page-content {
    width: 90%;
    max-width: 1200px;
    margin: 120px auto 100px auto; /* Top ajustado por header fijo + Footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Para que no quede pegado al header fijo */
header {
    margin-bottom: 20px;
}

/* Compatibilidad móvil */
@media (max-width: 768px) {
    .page-content {
        margin-top: 140px; /* Más espacio en móvil */
    }
}



/* =========================
   SECCIÓN CONTACTO
   ========================= */
.contacto {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px; /* separación con el header/footer */
  overflow: hidden;
}

/* Capa de color translúcida encima del fondo */
.contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(3px);
  z-index: 0;
}

/* ====== BURBUJAS ====== */
.contacto .bubble {
  position: absolute;
  bottom: -120px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: subir 12s infinite ease-in;
  opacity: 0.8;
  z-index: 1;
}

/* Variación de tamaño y posición de burbujas */
.contacto .bubble:nth-child(1) { width: 40px; height: 40px; left: 10%; animation-duration: 9s; }
.contacto .bubble:nth-child(2) { width: 60px; height: 60px; left: 20%; animation-duration: 11s; }
.contacto .bubble:nth-child(3) { width: 30px; height: 30px; left: 30%; animation-duration: 10s; }
.contacto .bubble:nth-child(4) { width: 70px; height: 70px; left: 40%; animation-duration: 14s; }
.contacto .bubble:nth-child(5) { width: 50px; height: 50px; left: 55%; animation-duration: 8s; }
.contacto .bubble:nth-child(6) { width: 90px; height: 90px; left: 70%; animation-duration: 13s; }
.contacto .bubble:nth-child(7) { width: 20px; height: 20px; left: 80%; animation-duration: 7s; }
.contacto .bubble:nth-child(8) { width: 100px; height: 100px; left: 90%; animation-duration: 15s; }

@keyframes subir {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}

/* ====== CONTENEDOR GENERAL ====== */
.contacto .contact-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px;
  width: 90%;
  max-width: 1100px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ====== FORMULARIO ====== */
.contacto .contact-form {
  flex: 1;
  min-width: 300px;
  margin-right: 40px;
}

.contacto .contact-form h1 {
  font-size: 2rem;
  color: #004e7c;
  margin-bottom: 20px;
}

.contacto .contact-form input,
.contacto .contact-form textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.contacto .contact-form input:focus,
.contacto .contact-form textarea:focus {
  border-color: #00aaff;
}

.contacto .contact-form button {
  background: #00aaff;
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.contacto .contact-form button:hover {
  background: #007acc;
}

/* ====== INFORMACIÓN ====== */
.contacto .contact-info {
  flex: 1;
  min-width: 250px;
}

.contacto .contact-info h2 {
  color: #004e7c;
  margin-top: 0;
}

.contacto .contact-info p {
  font-size: 1rem;
  color: #333;
  margin: 8px 0;
}

/* ====== REDES SOCIALES ====== */
.contacto .social-icons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.contacto .social-icons a {
  font-size: 40px;
  transition: transform 0.3s ease;
}

.contacto .social-icons a:hover {
  transform: scale(1.2);
}

.contacto .facebook { color: #1877F2; }
.contacto .instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contacto .tiktok {
  background: radial-gradient(circle at 3% 30%, #25F4EE 0%, #FE2C55 6%, #000000 9%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contacto .whatsapp { color: #25D366; }

/* ====== RESPONSIVO ====== */
@media (max-width: 768px) {
  .contacto .contact-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contacto .contact-form {
    margin-right: 0;
    margin-bottom: 30px;
  }
}


/* 🔧 Ajuste de espacio entre el hero y las tarjetas */
.home .hero {
  margin-bottom: 0;  /* elimina espacio extra del hero */
  padding-bottom: 20px; /* conserva un pequeño respiro */
}

.home .cards, /* o el contenedor de tus tarjetas */
.section-cards {
  margin-top: 0; /* elimina espacio superior si existía */
  padding-top: 10px; /* deja un margen visual pequeño */
}


/* ================== AJUSTE AISLADO: CARRITO Y CONTACTO ================== */

/* 🛒 CARRITO */
section.carrito,
div.carrito {
  margin-top: -180px;     /* 🔼 sube más */
  padding-top: 0;
  position: relative;
  z-index: 1;
}

section.carrito h1,
div.carrito h1 {
  margin-top: 0;
  padding-top: 10px;
  text-align: center;
}

/* 📩 CONTACTO */
section.contacto,
div.contacto {
  margin-top: -15px;     /* 🔼 similar, un poco menos */
  padding-top: 0;
  position: relative;
  z-index: 1;
}

section.contacto h1,
div.contacto h1 {
  margin-top: 0;
  padding-top: 10px;
  text-align: center;
}

/* 📱 Ajuste Responsive (solo afecta a estas dos secciones) */
@media (max-width: 768px) {
  section.carrito,
  div.carrito {
    margin-top: -105px;
  }
  section.contacto,
  div.contacto {
    margin-top: -50px;
  }
}

/* 🎯 Ajuste fino: eliminar espacio superior SOLO del contenedor principal del carrito */
body .carrito-container {
  margin-top: 40px !important;   /* mueve el bloque hacia arriba sin alterar padding interno */
}

/* Si el navbar fijo deja un hueco, ajusta según altura */
body header + .carrito-container,
body nav + .carrito-container {
  margin-top: 0 !important;       /* normal */
  transform: translateY(-10px);   /* sube visualmente el bloque */
}

/* 🎯 Ajuste fino: eliminar espacio superior SOLO del contacto */
body .contacto {
  margin-top: -70px !important;   /* Sube el bloque sin afectar el contenido */
}

/* 🧱 Si el navbar fijo deja hueco, compensar */
body header + .contacto,
body nav + .contacto {
  margin-top: 0 !important;
  transform: translateY(-20px);   /* Sube el bloque para pegarlo al menú */
}

/* ✨ Ajuste visual extra si aún hay un pequeño espacio */
body .contacto {
  transform: translateY(-25px);   /* Ajusta -15, -20 o -25 según necesites */
}


/* 🎯 Ajuste fino: eliminar espacio superior SOLO del blog */
body .blog {
  margin-top: 30px !important;   /* Sube el bloque completo sin dañar padding interno */
}

/* 🧱 Si el navbar fijo deja un hueco visual, compensar */
body header + .blog,
body nav + .blog {
  margin-top: 0 !important;
  transform: translateY(-20px);   /* ajusta la altura del blog respecto al menú */
}

/* ✨ Si quieres aún más pegado, ajusta el valor */
body .blog {
  transform: translateY(-25px);   /* -25 o -30 si aún queda espacio */
}


/* ==================== TIENDA ==================== */
/* Elimina el espacio superior sin afectar diseño ni video de fondo */
body .tienda {
  margin-top: -10px !important;     /* sube el bloque ligeramente */
}

/* Si el navbar fijo deja un hueco, compensar */
body header + .video-fondo-tienda,
body nav + .video-fondo-tienda {
  margin-top: 0 !important;
  transform: translateY(-20px);     /* sube el video también */
}

body header + .tienda,
body nav + .tienda {
  margin-top: 0 !important;
  transform: translateY(-20px);     /* alinea el contenido con el video */
}

/* Ajuste visual final si aún queda un pequeño espacio */
body .tienda:first-of-type {
  transform: translateY(-25px);     /* ajusta -15, -20 o -25 según necesites */
}



/* ✅ Fondo con imagen en la sección CONTACTO */
.contacto {
    background: url("img/contacto6.jpg") no-repeat center center/cover !important;
    padding: 80px 0;
    position: relative;
    width: 100%;
    z-index: 0;
}

/* ✅ Contenedores sólidos y elegantes */
.contact-form,
.contact-info,
.contacto .formulario,
.contacto .info-contacto,
.contacto .card,
.contacto .box {
    background: #ffffff !important; /* Blanco sólido */
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.20);
    color: #083b56;
}

/* ✅ Inputs blancos y legibles */
.contacto input,
.contacto textarea {
    background: #ffffff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}

/* ✅ Botón estilo original */
.contacto button,
.contacto input[type="submit"] {
    background: linear-gradient(180deg, #01a9ff, #007bbd) !important;
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

/* ✅ Redes sociales visibles y ordenadas */
.contact-info .social-icons,
.contact-info .redes,
.contact-info .social {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.contact-info img,
.contact-info svg,
.contact-info i {
    width: 45px;
    height: 45px;
}

/* ✅ Contenedor general sin fondo blanco gigante */
.contact-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ✅ Quitar scroll horizontal */
html, body {
    overflow-x: hidden !important;
}

/* ✅ Ocultar scrollbar horizontal en navegadores WebKit */
body::-webkit-scrollbar:horizontal {
    display: none;
}

/* ✅ Responsivo */
@media (max-width: 900px) {
    .contact-container {
        padding-top: 130px;
        gap: 30px;
        flex-direction: column;
    }
}
/* ✅ Overlay para mejorar contraste del fondo */
.contacto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15); /* 🔹 Oscurecer un poco la imagen */
    z-index: -1;
}

/* ✅ Hacer visibles los contenedores sin exagerar */
.contact-form,
.contact-info {
    background: rgba(300,300,300,0.30) !important; 
}

.contact-form,
.info-box,
.contacto * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}


/* ============================
   📌 GALERÍA DE PRODUCTO
   ============================ */

.galeria {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 460px;
}

/* --- CONTENEDOR PRINCIPAL --- */
.galeria-principal {
  width: 100%;
  height: 380px;   /* 🔥 Tamaño fijo para todas las imágenes/video */
  border-radius: 15px;
  overflow: hidden;
  background: #ffffff40;
  backdrop-filter: blur(6px);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- IMAGEN/VIDEO PRINCIPAL --- */
.galeria-principal img,
.galeria-principal video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 🔥 Ajusta sin deformar */
  border-radius: 10px;
}

/* --- MINIATURAS --- */
.galeria-miniaturas {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.galeria-miniaturas img,
.galeria-miniaturas video {
  width: 85px;
  height: 85px;
  object-fit: cover;  /* 🔥 Igual tamaño sin deformación */
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
  border: 3px solid transparent;
}

/* Miniatura seleccionada */
.galeria-miniaturas .activa {
  border-color: #00a2ff;
  transform: scale(1.05);
}

/* Hover */
.galeria-miniaturas img:hover,
.galeria-miniaturas video:hover {
  transform: scale(1.05);
}
/* Animación para el logo principal */
@keyframes slideDownFade {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.logo-main {
  animation: slideDownFade 1s ease-out forwards;
}

/* Animación para el logo extra */
@keyframes zoomRotate {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.icono-extra {
  animation: zoomRotate 1s ease-out forwards;
  transform-origin: center;
}
/* ============================
   HEADER CON EFECTO SCROLL
   ============================ */

/* Estado normal (arriba del todo) */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: rgba(255, 255, 255, 1); /* Blanco */
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Cuando haces scroll */
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.4); /* Transparente */
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Elegante */
}

/* Para evitar que el contenido suba por debajo del menú */
body {
  padding-top: 90px; /* Ajusta según el tamaño de tu header */
}

.galeria-miniaturas video.mini {
  width: 90px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
}
/* 📌 Contenedor general de miniaturas */
.galeria-miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  align-items: center;
}

/* 📌 Estilo unificado para miniaturas (imágenes y videos) */
.galeria-miniaturas .mini {
  width: 90px;          /* tamaño fijo para evitar que el video tape todo */
  height: 70px;
  object-fit: cover;    /* recorta y centra */
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.2s ease-in-out;
}

/* 📌 Detalle visual para indicar la miniatura seleccionada */
.galeria-miniaturas .mini.activa {
  border-color: #3498db;
  transform: scale(1.05);
}

/* 📌 Evita que los videos ocupen espacio extraño */
.galeria-miniaturas video.mini {
  background: #000;
  display: block;
}

/* 📌 Imagen/video principal */
.galeria-principal img,
.galeria-principal video {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
}





/* celular */

/* ===================== HEADER MÓVIL LIMPIO ===================== */
@media (max-width: 768px) {

  .navbar {
    padding: 0;
    background-color: #000000;
  }

  .nav-container {
    max-width: 330px;        /* MÁS ANGOSTO */
    margin: 0 auto;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* LOGOS + TEXTO */
  .nav-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 4px 0;
  }

  .logo-main {
    height: 26px;            /* PEQUEÑO */
  }

  .icono-extra {
    height: 22px;            /* PEQUEÑO */
  }

  .logo-text {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* MENÚ SUPERIOR (3) */
  .nav-left {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 4px 0;
  }

  /* MENÚ INFERIOR (3) */
  .nav-right {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 4px 0;
  }

  .nav-left a,
  .nav-right a {
    font-size: 11px;
  }
}

 /* footer */
 /* ================= FOOTER SOLO MÓVIL – FINAL ================= */
@media (max-width: 768px) {

  .footer {
    padding: 12px 8px;
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr; /* izquierda | centro | derecha */
    align-items: center;
    gap: 6px;
  }

  /* ===== IZQUIERDA: REDES 2x2 ===== */
  .social-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 arriba, 2 abajo */
    gap: 8px 10px;
    justify-items: center;
    align-items: center;
  }

  .social-icons a {
    font-size: 16px;
  }

  /* ===== CENTRO: TEXTO ===== */
  .footer p {
    margin: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.25;
  }

  .footer p span {
    display: block;
  }

/* ===== LOGOS DERECHA (FORZADOS AL BORDE) ===== */
  .footer-logos {
    position: absolute;
    right: -40px;           /* 🔴 FORZADO A LA DERECHA */
    bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: center; /* 🔴 NO CENTRO */
    gap: 0px;
  }

  .footer-logos img {
    height: 30px;
    display: block;
  }
}