/* =========================================================
   ESTILO HOME2 - Estilos nuevos para el rediseño del home
   No modifica estilochance.css (queda intacto y enlazado
   desde otras páginas). Este archivo solo se enlaza desde
   index2.php.
   ========================================================= */

body{
  overflow-x: hidden;
}


/* --- Título y párrafo intro "Tu doble acierto millonario" --- */
.tituloseccionhome{
  font-family: introfont;
  color: #003366;
  font-size: 42px;
  line-height: 1.1;
}

/* --- Tarjetas de los 3 botones (35 oportunidades / plan de premios / consulta resultados) --- */
.fila-3cards{
  gap: 20px 0;
}
.card-home3{
  display: block;
  text-decoration: none;
}
.card-home3 img{
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.card-home3 h3{
  margin-top: 12px;
}
.card-home3:hover img{
  opacity: 0.9;
}

/* --- Tabla de históricos (doble-acierto.php) --- */
.tabla-historicos-wrap{
  overflow-x: auto;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.tabla-historicos{
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-family: FjallaOne-Regular;
}
.tabla-historicos thead th{
  background-color: #FFD525;
  color: #003366;
  text-align: center;
  padding: 12px 14px;
  font-size: 18px;
  white-space: nowrap;
}
.tabla-historicos tbody td{
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  color: #333333;
  vertical-align: middle;
}
.tabla-historicos tbody td.lugar{
  text-align: left;
}
.tabla-historicos tbody tr:nth-child(even){
  background-color: #f7f7f7;
}

/* --- Cajones "GANADORES" / "TOTAL PREMIOS" (debajo de la tabla de históricos) --- */
.totalespremios-flex{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.cajonganadores{
  background-color: #FFD525;
  color: #1B0E3C;
  font-family: introfont;
  font-size: 24px;
  padding: 18px 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 0;
}
.cajontotalpremios{
  background-color: #1B0E3C;
  color: #ffffff;
  font-family: introfont;
  padding: 14px 30px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
}
.totalpremios-label{
  font-size: 16px;
  letter-spacing: 1px;
}
.totalpremios-monto{
  font-size: 30px;
}
.notapremios{
  border: 1px dashed #999999;
  padding: 12px 16px;
  font-size: 13px;
  color: #555555;
  border-radius: 4px;
}

/* --- Cajón del acumulado: fijo, siempre visible, superpuesto al carrusel --- */
.cajonacumulado{
  background-color: #1B0E3C; /* placeholder: ajustar al morado/navy exacto de marca */
  border-radius: 24px;
  margin-top: -90px;
  position: relative;
  z-index: 10;
  padding: 28px 20px 24px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.cajonacumulado h5{
  font-family: introfont;
  letter-spacing: .5px;
}
.cajonacumulado .fuenteacumuladohome{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cajonacumulado .signopesosacumulado{
  font-size: 58px;
}

/* --- Footer nuevo (inc_footer2.php) --- */
.footernuevo{
  background-color: #05052E; /* placeholder: ajustar al navy exacto de marca */
}

/* --- Carrusel "JUÉGALO EN" (15 logos, 7 visibles en desktop / 3 en móvil) --- */
.titulojuegaloen{
  font-family: introfont;
  color: #333333;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.juegaloenwrap .carousel-inner{
  padding: 0 40px; /* deja espacio para las flechas a los lados */
}
.fila-logos{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fila-logos a{
  display: block;
}
.fila-logos img{
  max-width: 100%;
  height: auto;
}
.fila-logos-7 a{
  flex: 0 0 12%;
  max-width: 12%;
}
.fila-logos-3 a{
  flex: 0 0 30%;
  max-width: 30%;
}
/* Flechas del carrusel de logos: oscuras y delgadas, visibles sobre fondo blanco */
.juegaloenwrap .carousel-control-prev,
.juegaloenwrap .carousel-control-next{
  width: 36px;
  opacity: 1;
}
.juegaloenwrap .carousel-control-prev-icon,
.juegaloenwrap .carousel-control-next-icon{
  background-image: none;
  width: 14px;
  height: 14px;
  border-top: 3px solid #999999;
  border-right: 3px solid #999999;
}
.juegaloenwrap .carousel-control-prev-icon{
  transform: rotate(-135deg);
}
.juegaloenwrap .carousel-control-next-icon{
  transform: rotate(45deg);
}

.logofooter{
  max-width: 220px;
}
.iconored-link{
  display: inline-block;
  vertical-align: middle;
}
.iconored{
  width: 38px;
  height: 38px;
  margin: 0 8px;
}
.logovigilado{
  max-width: 130px;
  vertical-align: middle;
}

/* --- Sección morada "Premios del doble acierto entregados" (imagen de borde a borde, el fondo es solo respaldo si la imagen no carga) --- */
.premiosentregados{
  background-color: #1B0E3C; /* placeholder: ajustar al morado exacto de marca */
}

/* --- Responsive (mismo breakpoint que estilochance.css: 1000px) --- */
@media screen and (min-width: 100px) and (max-width: 1000px){
  .tituloseccionhome{
    font-size: 26px;
    text-align: center;
  }
  .cajonacumulado{
    margin-top: 15px;
    padding: 16px 12px;
  }
  .cajonacumulado h5{
    font-size: 15px;
  }
  .cajonacumulado .signopesosacumulado{
    font-size: 30px;
  }
  .logofooter{
    max-width: 160px;
  }
  .iconored{
    width: 30px;
    height: 30px;
    margin: 0 6px;
  }
  .logovigilado{
    max-width: 100px;
    display: block;
    margin: 12px auto 0 auto;
  }
  .tabla-historicos thead th,
  .tabla-historicos tbody td{
    font-size: 13px;
    padding: 8px 8px;
  }
  .totalespremios-flex{
    flex-direction: column;
  }
  .cajonganadores,
  .cajontotalpremios{
    flex: 1 1 auto;
    width: 100%;
  }
  .cajonganadores{
    font-size: 18px;
    padding: 14px 20px;
  }
  .cajontotalpremios{
    padding: 12px 20px;
  }
  .totalpremios-label{
    font-size: 13px;
  }
  .totalpremios-monto{
    font-size: 22px;
  }
  .titulojuegaloen{
    font-size: 16px;
  }
  .juegaloenwrap .carousel-inner{
    padding: 0 22px;
  }
  .juegaloenwrap .carousel-control-prev,
  .juegaloenwrap .carousel-control-next{
    width: 22px;
  }
  .card-home3{
    margin-bottom: 15px;
  }
}