body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #1a1020; /* Morado oscuro base */
  color: #fff;
  overflow-x: hidden;
}

/* ===== SECCIÓN INICIO ===== */
.inicio {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ==== FONDO PASTELERÍA CON 4 COLORES: Rosa, Celeste, Lavanda, Verde Pastel ==== */
.inicio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 20%, #ffb6c155 0%, transparent 40%), /* Rosa suave */
    radial-gradient(circle at 80% 30%, #87ceeb55 0%, transparent 40%), /* Celeste */
    radial-gradient(circle at 40% 70%, #dda0dd55 0%, transparent 40%), /* Lavanda */
    radial-gradient(circle at 70% 80%, #98fb9855 0%, transparent 40%), /* Verde menta */
    linear-gradient(45deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%);
  filter: blur(60px);
  animation: movimientoPasteleria 20s infinite alternate ease-in-out;
  z-index: 0;
}

/* ==== PATRÓN SUTIL DE ELEMENTOS DULCES ==== */
.inicio::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, #87ceeb22 1px, transparent 2px),
    radial-gradient(circle at 90% 40%, #ffb6c122 1px, transparent 2px),
    radial-gradient(circle at 50% 80%, #dda0dd22 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, #98fb9822 1px, transparent 2px);
  background-size: 150px 150px, 120px 120px, 130px 130px, 140px 140px;
  animation: flotarElementos 40s infinite linear;
  z-index: 0;
}

@keyframes movimientoPasteleria {
  0% { 
    transform: translate(-5%, -5%) scale(1);
    background: 
      radial-gradient(circle at 20% 20%, #ffb6c155 0%, transparent 40%),
      radial-gradient(circle at 80% 30%, #87ceeb55 0%, transparent 40%),
      radial-gradient(circle at 40% 70%, #dda0dd55 0%, transparent 40%),
      radial-gradient(circle at 70% 80%, #98fb9855 0%, transparent 40%),
      linear-gradient(45deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%);
  }
  50% { 
    transform: translate(3%, 4%) scale(1.03);
    background: 
      radial-gradient(circle at 60% 40%, #87ceeb55 0%, transparent 40%),
      radial-gradient(circle at 30% 60%, #ffb6c155 0%, transparent 40%),
      radial-gradient(circle at 70% 20%, #dda0dd55 0%, transparent 40%),
      radial-gradient(circle at 40% 90%, #98fb9855 0%, transparent 40%),
      linear-gradient(135deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%);
  }
  100% { 
    transform: translate(-2%, 2%) scale(1);
    background: 
      radial-gradient(circle at 40% 30%, #98fb9855 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, #ffb6c155 0%, transparent 40%),
      radial-gradient(circle at 20% 80%, #87ceeb55 0%, transparent 40%),
      radial-gradient(circle at 60% 50%, #dda0dd55 0%, transparent 40%),
      linear-gradient(225deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%);
  }
}

@keyframes flotarElementos {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 150px 150px, 120px 120px, 130px 130px, 140px 140px; }
}

/* Contenido sobre el fondo */
.contenido-inicio {
  position: relative;
  z-index: 1;
  animation: fadeIn 1.5s ease-in;
}

/* ==== LOGO ==== */
.logo-imagen {
  width: 160px;
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 15px #87ceeb) drop-shadow(0 0 5px #ffb6c1);
  animation: fadeInLogo 2s ease-in-out forwards;
}

/* ==== TEXTO ANIMADO CON NEÓN CELESTE ==== */
.logo-sipah {
  width: 300px;
  height: 130px;
  margin-bottom: 10px;
}

.texto-logo {
  font-family: 'Poppins', sans-serif;
  font-size: 70px;
  font-weight: bold;
  fill: none;
  stroke: #87ceeb; /* Celeste principal */
  stroke-width: 2px;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: escribir 3s ease forwards, neonCeleste 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px #87ceeb);
}

@keyframes escribir { to { stroke-dashoffset: 0; } }

@keyframes neonCeleste {
  0%, 100% { 
    stroke: #87ceeb; 
    filter: drop-shadow(0 0 5px #87ceeb) drop-shadow(0 0 10px #87ceeb66); 
  }
  50% { 
    stroke: #a8d8f0; 
    filter: drop-shadow(0 0 8px #a8d8f0) drop-shadow(0 0 15px #87ceeb88); 
  }
}

#tituloPrincipal {
  font-size: 24px;
  color: #87ceeb; /* Celeste */
  opacity: 0;
  animation: aparecer 3s ease 2s forwards;
  text-shadow: 0 0 8px #87ceeb66;
}

.subtitulo {
  font-size: 18px;
  color: #ffb6c1; /* Rosa pastel */
  margin-bottom: 25px;
  opacity: 0;
  animation: aparecer 3s ease 3s forwards;
  text-shadow: 0 0 6px #ffb6c166;
}

#explorarBtn {
  padding: 12px 25px;
  background: linear-gradient(90deg, #87ceeb, #ffb6c1); /* Celeste a rosa */
  color: #2a1a35;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  opacity: 0;
  animation: aparecer 3s ease 4s forwards;
  box-shadow: 0 0 12px #87ceeb;
  border: 1px solid #87ceeb;
}

#explorarBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px #87ceeb, 0 0 15px #ffb6c1;
  background: linear-gradient(90deg, #ffb6c1, #87ceeb);
}

/* ==== CATÁLOGO CON FONDO DE 4 COLORES ==== */
.catalogo {
  text-align: center;
  padding: 50px;
  background: 
    linear-gradient(135deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%),
    radial-gradient(circle at top left, #ffb6c133, transparent 50%),
    radial-gradient(circle at bottom right, #87ceeb33, transparent 50%),
    radial-gradient(circle at top right, #dda0dd33, transparent 50%),
    radial-gradient(circle at bottom left, #98fb9833, transparent 50%);
  background-blend-mode: overlay;
  position: relative;
}

.catalogo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, #87ceeb15 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, #ffb6c115 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, #dda0dd15 1px, transparent 2px),
    radial-gradient(circle at 60% 20%, #98fb9815 1px, transparent 2px);
  background-size: 100px 100px, 120px 120px, 110px 110px, 130px 130px;
  animation: flotarSuave 25s infinite linear;
  z-index: 0;
}

@keyframes flotarSuave {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 100px 100px, 120px 120px, 110px 110px, 130px 130px; }
}

.titulo-catalogo {
  color: #87ceeb;
  font-size: 30px;
  text-shadow: 0 0 15px #87ceeb66;
  margin-bottom: 20px;
  animation: aparecer 1.5s ease-in-out;
  position: relative;
  z-index: 1;
}

/* Buscador */
#buscador {
  width: 60%;
  padding: 12px;
  border-radius: 30px;
  border: 1px solid #87ceeb;
  font-size: 16px;
  text-align: center;
  margin-bottom: 40px;
  outline: none;
  color: #333;
  background: #f0f8ff;
  box-shadow: 0 0 12px #87ceeb;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}
#buscador:focus {
  transform: scale(1.05);
  box-shadow: 0 0 20px #87ceeb;
  border-color: #87ceeb;
}

/* Tarjetas de pastelerías */
.pastelerias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  animation: fadeIn 1.5s ease-in;
  position: relative;
  z-index: 1;
}

.card {
  width: 240px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #87ceeb;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 15px #87ceeb66;
  transition: 0.4s;
  backdrop-filter: blur(8px);
}
.card:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px #87ceeb, 0 0 15px #ffb6c166;
  border-color: #87ceeb;
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 1px solid #87ceeb;
  transition: 0.3s;
}

.card:hover img {
  border-bottom-color: #87ceeb;
}

.card h3 {
  color: #87ceeb;
  font-size: 18px;
  margin: 10px 0;
  text-shadow: 0 0 8px #87ceeb66;
}

/* Botón volver */
#volverInicio {
  background: linear-gradient(90deg, #87ceeb, #ffb6c1);
  color: #2a1a35;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 50px;
  box-shadow: 0 0 15px #87ceeb;
  transition: all 0.3s ease-in-out;
  animation: pulseCeleste 3s infinite ease-in-out;
  position: relative;
  z-index: 1;
  border: 1px solid #87ceeb;
}
#volverInicio:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px #87ceeb, 0 0 15px #ffb6c1;
  background: linear-gradient(90deg, #ffb6c1, #87ceeb);
}

@keyframes pulseCeleste {
  0%, 100% {
    box-shadow: 0 0 12px #87ceeb, 0 0 8px #ffb6c155;
  }
  50% {
    box-shadow: 0 0 18px #87ceeb, 0 0 12px #ffb6c155;
  }
}

/* ====== CAPA 3: PRODUCTOS ====== */
#productos {
  display: none;
  min-height: 100vh;
  text-align: center;
  background: 
    linear-gradient(135deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%),
    radial-gradient(circle at top right, #87ceeb33, transparent 50%),
    radial-gradient(circle at bottom left, #ffb6c133, transparent 50%),
    radial-gradient(circle at top left, #dda0dd33, transparent 50%),
    radial-gradient(circle at bottom right, #98fb9833, transparent 50%);
  background-blend-mode: overlay;
  padding: 50px 20px;
  position: relative;
}

#productos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 70% 20%, #98fb9815 1px, transparent 2px),
    radial-gradient(circle at 30% 80%, #ffb6c115 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, #87ceeb15 1px, transparent 2px);
  background-size: 120px 120px, 140px 140px, 130px 130px;
  animation: flotarProductos 30s infinite linear;
  z-index: 0;
}

@keyframes flotarProductos {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 120px 120px, 140px 140px, 130px 130px; }
}

#tituloProductos {
  color: #87ceeb;
  font-size: 30px;
  text-shadow: 0 0 15px #87ceeb66;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.productos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  position: relative;
  z-index: 1;
}

.producto-card {
  width: 230px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #87ceeb;
  border-radius: 12px;
  box-shadow: 0 0 15px #87ceeb66;
  transition: 0.3s;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.producto-card:hover {
  transform: scale(1.07);
  box-shadow: 0 0 25px #87ceeb, 0 0 12px #ffb6c155;
  border-color: #87ceeb;
}

.producto-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 1px solid #87ceeb;
  transition: 0.3s;
}

.producto-card:hover img {
  border-bottom-color: #87ceeb;
}

.producto-card h4 {
  color: #87ceeb;
  margin: 10px 0;
  text-shadow: 0 0 6px #87ceeb66;
}

.producto-card p {
  color: #e6e6fa;
  font-size: 14px;
  margin-bottom: 15px;
}

#volverCatalogo {
  background: linear-gradient(90deg, #87ceeb, #ffb6c1);
  color: #2a1a35;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 50px;
  box-shadow: 0 0 15px #87ceeb;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  border: 1px solid #87ceeb;
}

#volverCatalogo:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px #87ceeb, 0 0 15px #ffb6c155;
  background: linear-gradient(90deg, #ffb6c1, #87ceeb);
}

/* ==== MÚSICA ==== */
#musicControl {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 100;
  cursor: pointer;
}

#musicIcon {
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 0 8px #87ceeb) drop-shadow(0 0 3px #ffb6c1);
  transition: all 0.3s ease;
}

#musicIcon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 15px #87ceeb) drop-shadow(0 0 8px #ffb6c1);
}

/* ==== EFECTOS ==== */
.oculto { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInLogo { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes aparecer { to { opacity: 1; } }

/* ===== SECCIÓN COMENTARIOS ===== */
.comentarios-section {
  display: none;
  min-height: 100vh;
  padding: 50px 20px;
  background: linear-gradient(135deg, #1a1020 0%, #2a1a35 100%);
  position: relative;
}

.comentarios-container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Formulario de comentarios */
.formulario-comentario {
  background: rgba(255, 255, 255, 0.08);
  padding: 25px;
  border-radius: 15px;
  border: 1px solid #87ceeb;
  box-shadow: 0 0 20px #87ceeb66;
}

.formulario-comentario h3 {
  color: #87ceeb;
  margin-bottom: 20px;
  text-align: center;
}

.formulario-comentario input,
.formulario-comentario textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #87ceeb;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-family: 'Poppins', sans-serif;
}

.formulario-comentario textarea {
  height: 100px;
  resize: vertical;
}

.formulario-comentario input::placeholder,
.formulario-comentario textarea::placeholder {
  color: #ccc;
}

/* Calificación con estrellas */
.calificacion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #87ceeb;
}

.estrellas {
  display: flex;
  gap: 5px;
}

.estrella {
  font-size: 24px;
  color: #555;
  cursor: pointer;
  transition: color 0.2s;
}

.estrella:hover,
.estrella.seleccionada {
  color: #ffd700;
}

/* Lista de comentarios */
.lista-comentarios {
  background: rgba(255, 255, 255, 0.08);
  padding: 25px;
  border-radius: 15px;
  border: 1px solid #ffb6c1;
  box-shadow: 0 0 20px #ffb6c166;
  max-height: 600px;
  overflow-y: auto;
}

.lista-comentarios h3 {
  color: #ffb6c1;
  margin-bottom: 20px;
  text-align: center;
}

.comentarios-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comentario-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 10px;
  border-left: 4px solid #87ceeb;
}

.comentario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comentario-usuario {
  font-weight: bold;
  color: #87ceeb;
}

.comentario-fecha {
  font-size: 12px;
  color: #ccc;
}

.comentario-texto {
  color: #e6e6fa;
  line-height: 1.4;
  margin-bottom: 8px;
}

.comentario-calificacion {
  color: #ffd700;
  font-size: 14px;
}

/* Botón volver */
.btn-volver {
  background: linear-gradient(90deg, #87ceeb, #ffb6c1);
  color: #2a1a35;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.btn-volver:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #87ceeb;
}

/* Responsive */
@media (max-width: 768px) {
  .comentarios-container {
    grid-template-columns: 1fr;
  }
  
  .lista-comentarios {
    max-height: 400px;
  }
}

.comentarios {
  background: #0a0a0a;
  border-top: 2px solid #00ffff;
  padding: 40px;
  text-align: center;
  color: white;
}

.comentarios h2 {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
}

#listaComentarios {
  margin: 20px auto;
  max-width: 600px;
  text-align: left;
}

.comentario {
  background: rgba(255,255,255,0.1);
  border: 1px solid #00ffff;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 10px 15px;
  box-shadow: 0 0 10px #00ffff33;
}

.comentario strong {
  color: #39ff14;
}

#formComentario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

#formComentario input,
#formComentario textarea {
  width: 100%;
  max-width: 600px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  outline: none;
}

#formComentario button {
  background: #00ffff;
  border: none;
  border-radius: 8px;
  padding: 10px 25px;
  cursor: pointer;
  font-weight: bold;
  color: #000;
  transition: 0.3s;
}

#formComentario button:hover {
  background: #39ff14;
}

/* ===== MEJORAS PARA EL SISTEMA DE COMENTARIOS ===== */

/* Asegurar que las secciones se muestren/oculten correctamente */
.oculto {
  display: none !important;
}

/* Contenedor principal de productos + comentarios */
#productos {
  display: none;
  min-height: 100vh;
  text-align: center;
  background: 
    linear-gradient(135deg, #1a1020 0%, #2a1a35 50%, #1a1020 100%),
    radial-gradient(circle at top right, #87ceeb33, transparent 50%),
    radial-gradient(circle at bottom left, #ffb6c133, transparent 50%),
    radial-gradient(circle at top left, #dda0dd33, transparent 50%),
    radial-gradient(circle at bottom right, #98fb9833, transparent 50%);
  background-blend-mode: overlay;
  padding: 50px 20px;
  position: relative;
}

/* Cuando la sección productos está activa */
#productos:not(.oculto) {
  display: block;
}

/* Sección de comentarios dentro de productos */
.comentarios {
  max-width: 800px;
  margin: 60px auto 30px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 1px solid #87ceeb;
  box-shadow: 0 0 25px #87ceeb66;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.comentarios h2 {
  color: #87ceeb;
  font-size: 28px;
  margin-bottom: 25px;
  text-shadow: 0 0 12px #87ceeb66;
  animation: aparecer 1s ease-in-out;
}

/* Lista de comentarios */
.lista-comentarios {
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  margin-bottom: 25px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid #ffb6c155;
}

/* Estilo para cuando no hay comentarios */
.sin-comentarios {
  text-align: center;
  color: #87ceeb;
  font-style: italic;
  padding: 30px;
  opacity: 0.7;
  animation: pulseCelesteSuave 3s infinite ease-in-out;
}

@keyframes pulseCelesteSuave {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.9; }
}

/* Comentario individual */
.comentario {
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid #87ceeb;
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
  transition: all 0.3s ease;
  animation: slideInUp 0.5s ease;
}

.comentario:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(135, 206, 235, 0.3);
}

.comentario strong {
  color: #ffb6c1;
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  text-shadow: 0 0 8px #ffb6c166;
}

.comentario p {
  color: #e6e6fa;
  line-height: 1.5;
  margin-bottom: 8px;
}

.comentario small {
  color: #87ceeb;
  font-size: 12px;
  opacity: 0.7;
}

/* Formulario de comentarios */
#formComentario {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

#formComentario input,
#formComentario textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #87ceeb;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
  outline: none;
}

#formComentario input::placeholder,
#formComentario textarea::placeholder {
  color: #ccc;
}

#formComentario input:focus,
#formComentario textarea:focus {
  border-color: #ffb6c1;
  box-shadow: 0 0 15px #ffb6c155;
  transform: scale(1.02);
}

#formComentario textarea {
  height: 100px;
  resize: vertical;
  min-height: 80px;
}

#formComentario button {
  background: linear-gradient(90deg, #87ceeb, #ffb6c1);
  color: #2a1a35;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  margin-top: 10px;
  border: 1px solid #87ceeb;
}

#formComentario button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #87ceeb, 0 0 15px #ffb6c155;
  background: linear-gradient(90deg, #ffb6c1, #87ceeb);
}

#formComentario button:active {
  transform: scale(0.95);
}

/* Animaciones para comentarios */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar personalizado para la lista de comentarios */
.lista-comentarios::-webkit-scrollbar {
  width: 6px;
}

.lista-comentarios::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.lista-comentarios::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #87ceeb, #ffb6c1);
  border-radius: 10px;
}

.lista-comentarios::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffb6c1, #87ceeb);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .comentarios {
    margin: 40px 15px 20px;
    padding: 20px;
  }
  
  .comentarios h2 {
    font-size: 24px;
  }
  
  .lista-comentarios {
    max-height: 300px;
  }
  
  #formComentario input,
  #formComentario textarea {
    padding: 10px 12px;
  }
  
  #formComentario button {
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .comentario {
    padding: 12px;
  }
  
  .comentario strong {
    font-size: 14px;
  }
  
  .comentario p {
    font-size: 13px;
  }
}

/* ===== MEJORAS VISUALES GENERALES ===== */
.card, .producto-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover, .producto-card:hover {
  transform: translateY(-8px) scale(1.05);
}

/* Efecto de brillo en botones */
#explorarBtn, #volverInicio, #volverCatalogo, #formComentario button {
  position: relative;
  overflow: hidden;
}

#explorarBtn::after, #volverInicio::after, #volverCatalogo::after, #formComentario button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: brillo 3s infinite;
}

@keyframes brillo {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* Mejora para el buscador */
#buscador {
  position: relative;
  z-index: 2;
}

#buscador::before {
  content: '🔍';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

#buscador {
  padding-left: 45px;
}