/* ====== Estilos del Stand Ganador (UESG Style) ====== */

/* Contenedor de imagen con cinta */
.stand-winner-img {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  margin-bottom: 12px;
}

/* Cinta de premiación */
.ribbon {
  position: absolute;
  top: 14px;
  left: -18px;
  background: linear-gradient(135deg, #ffce00, #ffb400);
  color: #111;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 18px;
  transform: rotate(-15deg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Testimonio */
.testimonio-ganador {
  border-left: 4px solid #ffce00;
  padding-left: 12px;
  margin-top: 10px;
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px 12px;
  transition: all 0.3s ease;
}

.testimonio-ganador:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.testimonio-ganador cite {
  display: block;
  font-size: 0.85rem;
  margin-top: 6px;
  font-style: normal;
  color: #ffce00;
}



/* ====== Sección Próximos Mercaditos ====== */
.proximos-eventos {
  background: linear-gradient(145deg, #fff8dc, #eeeea2);
  border: 1px solid #ffe08a;
  border-radius: 10px;
  padding: 15px 18px;
  margin-top: 15px;
  box-shadow: 0 4px 10px rgba(64, 64, 64, 0.5);
  transition: all 0.3s ease;
  height: 350px;
  width: 500px;
}

.proximos-eventos:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.proximos-eventos h4 {
  color: #111;
  font-weight: 700;
  margin-bottom: 6px;
}

.proximos-eventos p {
  color: #333;
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.proximos-eventos strong {
  color: #d48c00; /* tono cálido acorde con el amarillo UESG */
}


/* ======================================================
   🎨 Fondo animado UESG (patrón elegante en movimiento)
   ====================================================== */

body {
  background: url('../img/fondos/fondo1.png');
  background-repeat: repeat;
  background-size: 280px 280px; /* cambia 280 por 240/320 para ajustar el patrón */
  background-attachment: fixed; /* efecto tipo parallax suave */
  animation: moverFondo 70s linear infinite; /* velocidad del desplazamiento */
}

/* Movimiento diagonal del patrón */
@keyframes moverFondo {
  from { background-position: 0 0; }
  to   { background-position: 1000px 1000px; }
}

/* Capa translúcida para mejorar legibilidad del contenido (opcional) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(238, 231, 231, 0.538); /* más alto = más claro */
  z-index: -1; /* detrás de todo */
}