/* ====== Base & Tokens ====== */
:root{
  --rojo:#B00000;
  --rojo-oscuro:#4D0000;
  --negro:#000;
  --gris:#ccc;
  --gris-700:#646464;
  --blanco:#fff;

  --radius:12px;
  --shadow-md:0 6px 16px rgba(0,0,0,.18);
}

body {
  font-family:'Poppins',sans-serif;
  margin:0;
  background:var(--rojo);
  color:#fff;
}
 div, input, textarea { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

/* ====== Layout contenedor ====== */
.contenedor{
 width: 900px; 
  margin: 40px auto;
  padding: 20px;
  background: var(--blanco);
  color: var(--negro);
  border-radius: 20px;
}
@media only screen and (max-width: 618px) {
.contenedor{  
  width: 90%; 
  text-align: center;
}
}
/* Contenedores globales antes fijos a 1100px */
.top,.main{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding-inline:16px;
}
.pre_top{ background-color:var(--rojo-oscuro); padding:5px; margin-top:40px; }
.main_pre{ background-color:var(--gris); }

/* ====== Tipografía ====== */
h1{
  font-weight:800;
  font-size: clamp(28px, 4vw, 40px);
  text-align:center;
  color:var(--rojo);
  margin: 0 0 10px;
}
h2{
  text-align:center;
  font-weight:400;
  margin:0 0 30px;
}
.bloque{ margin-bottom:40px; }

h3{
  font-size: clamp(18px, 2.4vw, 24px);
  color:var(--rojo);
  border-bottom:2px solid var(--rojo);
  margin:0;
  padding-bottom:0;
}

/* ====== Grids y columnas ====== */
.fila{
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
  margin-top:15px;
}
@media (min-width:768px){
  .fila{ grid-template-columns: 1fr 1fr; }
}
.col h4{ color:#333; margin-bottom:10px; }

/* ====== Números / Bolas ====== */
.numeros{ display: flex ; gap:10px; flex-wrap:wrap; text-align:center;  }
@media only screen and (max-width: 618px) {
.numeros{ display: inline-flex ; gap:10px; flex-wrap:wrap; text-align:center;  
}}
.bola, .bolaB, .bolaR{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  font-weight:700; font-size: clamp(18px, 2.4vw, 22px);
  border:1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
  font-size: 35px;
}

/* degradés específicos */
.bola{
  color:var(--rojo);
  background: radial-gradient(circle at 30% 30%, #ffffff, #d1d5db, #F0ECEE);
}
.bolaB{
  color:var(--rojo);
  background: radial-gradient(circle at 30% 30%, #ffffff, #ECECEE, #9ca3af);
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.bolaR{
  color:#fff;
  background: radial-gradient(circle at 30% 30%, #FF7F7F, #A10000, #A10000);
}

/* ====== Banda hero ====== */
.b1{
  background-color:#1426AD;
  background-image:url(images/bg.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  margin:auto;
  width:100%;
  min-height: 125px;           /* antes fijo 165px */
  padding:10px;
  border-radius: var(--radius);
  margin-bottom:60px;
  box-shadow: var(--shadow-md);
}
@media (min-width:768px){
  .b1{ min-height:165px; }
}

.amarillo{ width:100%; height:10px; background:#FFF100; }
.naranja { width:100%; height:10px; background:#FF8200; }
.negro   { width:100%; height:10px; background:#000; }

/* ====== Bloque premio ====== */
.premio{
  display:grid;
  grid-template-columns: 1fr 1fr; /* móvil 2 columnas iguales */
  align-items:center;
  justify-items:left;
  gap:16px;
  padding: 0 16px 0 30px;
  margin: 30px 0 50px;
  width:100%;
}
@media (min-width:900px){
  .premio{ grid-template-columns: 300px 1fr; }
}

/* ====== Texto horario ====== */
.hora{
  text-align:left;
  font-size: clamp(22px, 4.2vw, 35px);
  font-weight:700;
  color:#000;
  padding: 10px 0 0 30px;
}
.dia{
  text-align:left;
  font-size: clamp(13px, 2.2vw, 15px);
  font-weight:400;
  color:#000;
  padding: 0 0 10px 30px;
}

/* Dígitos circulares */
.numero{ display:flex; gap:6px; flex-wrap:wrap; }
.digito{
  display:grid; place-items:center;
  width:55px; height:55px; border-radius:50%;
  background:#ccc; color:#000;
  font-weight:500; font-size: clamp(18px, 2.6vw, 25px);
  font-family:Arial, sans-serif;
}

/* Párrafo */
.tiemposnica{
  text-align:justify;
  font-size: clamp(14px, 2.4vw, 18px);
  letter-spacing:-0.5px;
  font-weight:300; color:#000;
}

/* ====== Footers / filas ====== */
.foot1_pre{ width:100%; display:flex; justify-content:center; align-items:center; margin:auto; }
.foot1{
  display:flex; align-items:center; justify-content:center; gap:15px;
  text-align:center;
  font-size: clamp(22px, 5vw, 35px);
  letter-spacing:-2px; font-weight:500; color:#fff;
  padding:10px 20px; border-radius:6px; line-height:1.1;
  background:transparent;
  transition:transform .2s ease;
}
.foot1:hover{ transform: translateY(-2px); }

.celeste{ background:var(--gris-700); height:30px; width:100%; }
.borde{ border-bottom:1px solid #000; margin:10px 0; width:100%; }

/* Titulares centrados */
.f1{
  font-size: clamp(22px, 4.4vw, 35px);
  letter-spacing:-1px; font-weight:700; color:#000; padding:10px; text-align:center;
}
.f2{
  font-size: clamp(14px, 2.6vw, 18px);
  text-align:center; font-weight:300; color:#000; padding:10px 10px 20px;
}

/* Grids informativos */
.f3{
  display:grid; grid-template-columns: 1fr; gap:12px;
  margin:auto; width:100%; color:#000; padding:10px; font-weight:300;
}
@media (min-width:640px){
  .f3{ grid-template-columns: 1fr 100px; align-items:center; justify-items:center; }
}

/* Tarjetas triple */
.f18{
  display:grid; grid-template-columns: 1fr; gap:20px;
  margin:auto; width:100%;
  background:#ccc; color:#000; padding:16px;
  border:1px solid rgba(0,0,0,.4); border-radius:6px;
  box-shadow:0 0 10px rgba(0,0,0,.3);
  text-shadow:0 0 10px rgba(0,0,0,.2);
  transition: box-shadow .3s ease;
}
@media (min-width:768px){
  .f18{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Bloques finos */
.f10_pre{ width:100%; display:flex; justify-content:center; align-items:center; margin:auto; }
.f10,.f11{
  display:flex; align-items:center; gap:15px;
  text-align:left; font-size:11px; font-weight:500; color:#000; padding:10px 20px;
}
.f11{ justify-content:flex-start; }

/* ====== Títulos con línea a la derecha ====== */
.R1{
  display:flex; align-items:center;
  font-size: clamp(18px, 3.6vw, 25px);
  font-weight:700; color:#fff; padding: 20px 0 30px 15px; text-align:left;
}
.R1::after{
  content:""; flex-grow:1; height:2px; background:#fff; margin-left:20px;
}
.R2{
  font-size: clamp(20px, 5vw, 33px);
  color:#fff; font-weight:800; letter-spacing:0;
  text-align:left;
  text-shadow:0 0 10px rgba(0,0,0,.2);
  padding: 0 0 0 15px; text-transform:uppercase;
}

/* ====== Enlaces y botones ====== */
a.b1a{ text-decoration:none; }
a.b1a:hover{ text-decoration:underline; color:white; }

.ayer{ display:grid; margin:auto; }
.ayer a{
  color:#fff; text-decoration:none; text-align:center;
  font-size: clamp(18px, 4.8vw, 30px);
  background: #e11; padding:12px 16px; border-radius:15px;
}
.ayer a:hover{ background:#A10000; }