/* ============================================================
   ENTRADAS — estilos propios de esta página
   ============================================================ */

.cabecera-ent{
  position:relative;overflow:hidden;text-align:center;
  padding:calc(72px + clamp(46px,6vw,80px)) 0 clamp(34px,4vw,54px);
  background:
    radial-gradient(90% 120% at 50% -10%,rgba(18,97,166,.34),transparent 62%),
    linear-gradient(180deg,#0C2242,var(--tinta));
}
.cabecera-ent__manchas{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:0;pointer-events:none;
  background:url("../img/marca/textura-manchas.png") center bottom/cover no-repeat;
  opacity:.14;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 88%);
  mask-image:linear-gradient(to top,#000,transparent 88%);
}
.cabecera-ent .wrap{position:relative;z-index:2}

/* ---------- Boletos sueltos ---------- */
.boletos{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(14px,2vw,22px);max-width:820px;margin-inline:auto}
.boleto{
  position:relative;display:grid;justify-items:center;text-align:center;gap:4px;
  padding:34px 28px 30px;border:1px solid var(--linea);border-radius:18px;
  background:linear-gradient(160deg,rgba(20,48,86,.68),rgba(10,23,42,.88));
  transition:transform .3s,border-color .3s;
}
.boleto:hover{transform:translateY(-5px);border-color:var(--linea-oro)}
/* muescas laterales, como un boleto real */
.boleto::before,.boleto::after{
  content:"";position:absolute;top:50%;width:24px;height:24px;border-radius:50%;
  background:var(--tinta);transform:translateY(-50%);
}
.boleto::before{left:-13px}
.boleto::after{right:-13px}
.boleto__tipo{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.boleto__precio{
  font-family:var(--numeros);font-weight:400;font-size:clamp(2.8rem,7vw,4rem);line-height:1;
  color:#fff;margin-top:10px;font-variant-numeric:tabular-nums;
}
.boleto__moneda{font-size:.72rem;color:rgba(233,239,246,.5);margin-bottom:20px}
.boleto__lista{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;text-align:left;width:100%}
.boleto__lista li{font-size:.85rem;color:rgba(233,239,246,.7);padding-left:20px;position:relative;line-height:1.45}
.boleto__lista li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--oro)}
.boleto .btn{width:100%}

/* ---------- Bono Ocelote ---------- */
.bono{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,48px);align-items:center;
  border:1px solid var(--linea-oro);border-radius:20px;
  background:linear-gradient(158deg,rgba(164,115,45,.24),rgba(10,23,42,.92));
  padding:clamp(20px,3vw,38px);
}
.bono__imagen{
  border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.bono__imagen img{width:100%;height:auto;display:block}
.bono__info{display:grid;justify-items:start;gap:5px}
.bono__cinta{
  background:linear-gradient(90deg,var(--oro),#D3A253);color:var(--tinta);
  font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 18px;border-radius:100px;margin-bottom:8px;
}
.bono__precio{
  font-family:var(--numeros);font-weight:400;font-size:clamp(3rem,7.5vw,4.4rem);line-height:1;
  color:var(--oro);font-variant-numeric:tabular-nums;
}
.bono__moneda{font-size:.76rem;color:rgba(233,239,246,.55);margin-bottom:18px}
.bono__lista{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.bono__lista li{font-size:.94rem;color:rgba(233,239,246,.78);padding-left:26px;position:relative;line-height:1.45}
.bono__lista li b{color:#fff}
.bono__lista li::before{
  content:"";position:absolute;left:0;top:4px;width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2CA80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bono__nota{font-size:.83rem;color:rgba(233,239,246,.5);margin:0 0 22px;max-width:40ch}
@media(max-width:820px){.bono{grid-template-columns:1fr}}

/* ---------- Pasos para comprar ---------- */
.paso__n{
  display:block;font-family:var(--numeros);font-weight:400;font-size:1.6rem;
  color:var(--oro);line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums;
}

/* ---------- Dónde es ---------- */
.donde{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  border:1px solid var(--linea);border-radius:16px;
  background:linear-gradient(160deg,rgba(20,48,86,.55),rgba(10,23,42,.8));
  padding:clamp(24px,3vw,34px);margin-top:clamp(26px,3.4vw,42px);
}


/* ---------- Bloque de compra ---------- */
.aviso-pago{
  max-width:56ch;margin:0 auto clamp(24px,3vw,34px);text-align:center;
  font-family:var(--texto);font-size:.85rem;color:rgba(233,239,246,.55);text-transform:none;
}
.compra{display:grid;gap:11px;width:100%;justify-items:center}
.btn--compra{width:100%}
.compra__alterna{
  font-family:var(--texto);font-size:.76rem;color:rgba(233,239,246,.5);
  text-decoration:underline;text-underline-offset:3px;transition:color .25s;
}
.compra__alterna:hover{color:var(--oro)}
.bono__info .compra{justify-items:start}
.bono__info .btn--compra{width:auto;min-width:260px}


/* ---------- Jornadas: un bloque por partido ---------- */
.jornadas{display:grid;gap:clamp(22px,3vw,34px);max-width:900px;margin-inline:auto}
.jornada{
  border:1px solid var(--linea);border-radius:20px;
  background:linear-gradient(160deg,rgba(20,48,86,.42),rgba(10,23,42,.7));
  padding:clamp(18px,2.4vw,26px);
}
.jornada__cab{
  display:flex;align-items:center;gap:clamp(13px,2vw,20px);flex-wrap:wrap;
  padding-bottom:clamp(14px,2vw,20px);margin-bottom:clamp(16px,2.2vw,22px);
  border-bottom:1px solid var(--linea);
}
.jornada__fecha{
  /* En rejilla, el número y el mes se reparten media caja cada uno y se
     centran por separado, así que el bloque completo quedaba descuadrado.
     En columna flexible los dos se centran como un solo grupo. */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;flex:none;
  width:62px;height:62px;border-radius:14px;
  background:rgba(8,17,31,.55);border:1px solid var(--linea-oro);
}
.jornada__fecha b{
  font-family:var(--numeros);font-weight:400;font-size:1.5rem;line-height:1;
  color:var(--oro);font-variant-numeric:tabular-nums;
  display:block;
}
.jornada__fecha span{
  font-size:.5rem;font-weight:700;letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;color:rgba(233,239,246,.5);line-height:1;
}
.jornada__titulo{font-family:var(--display);font-weight:800;font-size:clamp(.98rem,2vw,1.2rem);text-transform:uppercase;line-height:1.2}
.jornada__meta{font-family:var(--texto);font-size:.79rem;color:rgba(233,239,246,.52);margin:6px 0 0;text-transform:none}
.jornada__etq{
  margin-left:auto;font-size:.53rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro);
  border:1px solid var(--linea-oro);border-radius:100px;padding:6px 14px;white-space:nowrap;
}
.jornada .boletos{max-width:none}
.aviso-pago b{color:var(--oro);font-weight:700}
@media(max-width:560px){
  .jornada__etq{margin-left:0;order:3}
}


/* Escudos de los dos equipos en la cabecera de cada jornada */
.jornada__duelo{
  display:flex;align-items:center;gap:10px;flex:none;margin-left:auto;
}
.jornada__escudo{
  width:52px;height:52px;flex:none;border-radius:12px;overflow:hidden;
  background:rgba(8,17,31,.4);border:1px solid var(--linea-oro);
  display:grid;place-items:center;
}
.jornada__escudo img{width:100%;height:100%;object-fit:cover;display:block}
.jornada__vs{
  font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.1em;
  color:var(--oro);
}
/* La etiqueta deja de empujar: ahora el duelo es lo que va a la derecha */
.jornada__etq{margin-left:0}

@media(max-width:700px){
  .jornada__duelo{margin-left:0;order:3}
  .jornada__etq{order:4}
}
@media(max-width:420px){
  .jornada__escudo{width:44px;height:44px}
}