.fondo-home{
    background-image:url("img/home-bg2.jpg");
    background-size: cover;
    background-position: top center;
}
.cajon-form{
    background-color: #1a013898;
    padding: 20px;
    border-radius: 20px;
}
.fondo-rojo{
    background-color: #C70206;
}
.menu-desplegable {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 200px;
    z-index: 1000;
    background: #C70206;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    padding: 5px;
}
.fondo-principal{
    background-image:url("img/principal-bg.jpg");
    background-size: cover;
    background-position: top center;
}
.fondo-gira{
    background-image: url(img/banner-interno.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #4c00ab;
}
.fondo-gris{
    background-color: #ebebeb !important;
}
.tombola-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7px, max-content));  
  gap: 6px; /* espacio entre botones */
  justify-content: center; /* centra todo */
}

/* === RUEDA / TÓMBOLA === */
.wheel-wrap{ position:relative; width:380px; height:380px; margin:30px auto; }

/* Nuevo: contenedor rotatorio que incluye la imagen de la rueda + etiquetas */
.wheel-rotor{
  position:absolute; inset:0;
  transition: transform 4s cubic-bezier(.17,.67,.14,1.02);
  transform: rotate(0deg);
}

.wheel{
  position:absolute; inset:0;
  background:url('img/ruleta.png') center/contain no-repeat;
  border-radius:50%;
}

/* SVG que pinta los textos de los segmentos, ahora dentro del rotor */
.wheel-labels{ position:absolute; inset:0; pointer-events:none; }
.wheel-labels text{
  font: 700 11px/1 "Inter", system-ui, sans-serif;
  fill:#ffffff00;
  paint-order: stroke;
  stroke:#4a007c00;
  stroke-width:2.5px;
  text-anchor: middle;
  letter-spacing:.3px;
  /*display: none;*/
}

.pointer{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  width:52px; height:52px;
  background:url('img/diamante.png') center/contain no-repeat;
  z-index:3; pointer-events:none;
}
.spin-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #5d00d6, #3d00a8);
  box-shadow:0 0 0 8px rgba(255,255,255,.1) inset, 0 6px 16px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; cursor:pointer; text-transform:uppercase;
  z-index:4;
}


@media screen and (min-width: 100px) and (max-width: 1000px)
{
    .tombola-grid {        
        grid-template-columns: repeat(8, auto); 
        }
}