:root {
--promo-bg-dark: #0f0f0f;
--promo-text-white: #FFFFFF;
--promo-text-muted: #B3B3B3;
--promo-red: #E50914;
--promo-gold: #FFC107;
}
.promo-banner-120 {
position: relative;
width: 100%;
height: 120px;
min-height: 120px;
max-height: 120px;
background-color: var(--promo-bg-dark);
border-radius: 10px;
overflow: hidden;
margin: 15px 0;
box-sizing: border-box;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid rgba(255, 193, 7, 0.4);
box-shadow: 0 0 20px rgba(255, 193, 7, 0.15);
}
/* Imagen de fondo */
.promo-bg-img-120 {
position: absolute;
top: -120px;
right: 0;
width: 70%;
height: calc(100% + 240px);
object-fit: cover;
object-position: center top;
transform: scale(1.15);
transform-origin: center top;
z-index: 0;
}
/* Overlay de degradado */
.promo-overlay-120 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(15, 15, 15, 1) 0%,
rgba(15, 15, 15, 0.98) 50%,
rgba(15, 15, 15, 0.6) 78%,
rgba(15, 15, 15, 0.15) 100%
);
z-index: 1;
}
/* Contenedor Grid unificado y centrado horizontalmente sin huecos */
.promo-content-120 {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto auto auto;
align-content: center;
padding: 0 24px;
box-sizing: border-box;
color: var(--promo-text-white);
}
/* Badges superiores ampliados */
.promo-badge-box-120 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 3px 0;
padding: 0;
}
.promo-badge-tag-120 {
background: linear-gradient(45deg, #B00710, #E50914);
color: #FFF;
font-size: 0.8rem; /* Ampliado de 0.72rem */
font-weight: 800;
padding: 4px 11px; /* Relleno ampliado */
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 2px 8px rgba(229, 9, 20, 0.5);
line-height: 1;
display: inline-flex;
align-items: center;
}
.promo-countdown-tag-120 {
background-color: rgba(255, 193, 7, 0.15);
color: var(--promo-gold);
border: 1px solid var(--promo-gold);
font-size: 0.74rem; /* Ampliado de 0.68rem */
font-weight: 700;
padding: 3px 9px;
border-radius: 4px;
letter-spacing: 0.4px;
line-height: 1;
display: inline-flex;
align-items: center;
}
/* Título principal ampliado */
.promo-title-120 {
font-size: 1.32rem; /* Ampliado de 1.15rem */
font-weight: 900;
margin: 0 0 4px 0;
padding: 0;
line-height: 1.08;
text-transform: uppercase;
letter-spacing: -0.3px;
color: #FFFFFF;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
max-width: 72%;
}
/* Fila inferior de horarios ampliada */
.promo-schedule-bar-120 {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.84rem; /* Ampliado de 0.78rem */
color: var(--promo-gold);
font-weight: 600;
line-height: 1;
margin: 0;
padding: 0;
}
.promo-schedule-tag-120 {
background: rgba(255, 193, 7, 0.12);
padding: 3px 9px;
border-radius: 4px;
border-left: 3px solid var(--promo-gold);
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.promo-subtext-120 {
color: var(--promo-text-muted);
font-size: 0.8rem; /* Ampliado de 0.75rem */
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 32%;
}
@media (max-width: 768px) {
.promo-content-120 {
padding: 0 16px;
}
.promo-title-120 {
font-size: 1rem;
max-width: 100%;
}
.promo-subtext-120 {
display: none;
}
.promo-bg-img-120 {
width: 100%;
opacity: 0.3;
}
.promo-overlay-120 {
background: linear-gradient(
180deg,
rgba(15, 15, 15, 0.85) 0%,
rgba(15, 15, 15, 0.98) 100%
);
}
}
