.oggi-bnav { display: none; }
@media (max-width: 768px) {
.oggi-bnav {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9990;
height: calc(60px + env(safe-area-inset-bottom, 0px));
background: var(--oggi-white, #fff);
border-top: 1px solid var(--oggi-line, #e5e7eb);
box-shadow: 0 -4px 16px rgba(15,40,71,.06);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 4px;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.oggi-bnav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: 0;
padding: 6px 0;
font-family: var(--oggi-font-display);
font-size: 10px;
font-weight: 600;
color: var(--oggi-muted, #6b7280);
text-decoration: none;
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.oggi-bnav__item svg { width: 23px; height: 23px; }
.oggi-bnav__item span { line-height: 1; }
.oggi-bnav__item.is-active { color: var(--oggi-navy, #1b3a77); }
.oggi-bnav__item:active { color: var(--oggi-navy, #1b3a77); }
.oggi-bnav__play { flex: 0 0 auto; padding: 0 10px; }
.oggi-bnav__play-btn {
position: relative;
width: 54px; height: 34px;
border-radius: 12px;
background: var(--oggi-navy, #1b3a77);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(15,40,71,.28);
overflow: hidden;
}
.oggi-bnav__play-btn svg { width: 20px; height: 20px; }
.oggi-bnav__play:active .oggi-bnav__play-btn { background: var(--oggi-navy-700, #14305f); }
.oggi-bnav__play-tri {
display: flex; align-items: center; justify-content: center;
transition: opacity .3s ease, transform .3s ease;
}
.oggi-bnav__play.is-raining .oggi-bnav__play-tri {
opacity: 0; transform: scale(.4);
}
.oggi-bnav__deals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.oggi-bnav__deal {
position: absolute; top: 0;
font-family: var(--oggi-font-display);
font-size: 11px; font-weight: 800; line-height: 1;
color: var(--oggi-lime, #A3E635);
white-space: nowrap;
opacity: 0;
transform: translateY(-16px);
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.oggi-bnav__deal:nth-child(odd) { left: 8%; }
.oggi-bnav__deal:nth-child(even) { left: 50%; }
.oggi-bnav__play.is-raining .oggi-bnav__deal { animation: oggi-deal-rain 9.6s linear infinite; }
.oggi-bnav__play.is-raining .oggi-bnav__deal:nth-child(1) { animation-delay: 0s; }
.oggi-bnav__play.is-raining .oggi-bnav__deal:nth-child(2) { animation-delay: -1.6s; }
.oggi-bnav__play.is-raining .oggi-bnav__deal:nth-child(3) { animation-delay: -3.2s; }
.oggi-bnav__play.is-raining .oggi-bnav__deal:nth-child(4) { animation-delay: -4.8s; }
.oggi-bnav__play.is-raining .oggi-bnav__deal:nth-child(5) { animation-delay: -6.4s; }
.oggi-bnav__play.is-raining .oggi-bnav__deal:nth-child(6) { animation-delay: -8.0s; }
@keyframes oggi-deal-rain {
0% { opacity: 0; transform: translateY(-16px) rotate(-6deg); }
5% { opacity: 1; }
37% { opacity: 1; }
42% { opacity: 0; transform: translateY(44px) rotate(6deg); }
100% { opacity: 0; transform: translateY(44px); }
}
@media (prefers-reduced-motion: reduce) {
.oggi-bnav__play.is-raining .oggi-bnav__play-tri { opacity: 1; transform: none; }
.oggi-bnav__deal { display: none; }
}
.oggi-bnav__play--revista .oggi-bnav__play-btn {
width: 58px; height: 40px;
margin-top: -6px;
flex-direction: column; gap: 1px;
background: linear-gradient(160deg, var(--oggi-navy, #1b3a77), #16325f);
}
.oggi-bnav__revista {
position: relative;
width: 20px; height: 15px;
perspective: 60px;
}
.oggi-bnav__revista-lomo {
position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%;
margin-left: -.75px; border-radius: 1px;
background: var(--oggi-lime, #A3E635);
}
.oggi-bnav__revista-hoja {
position: absolute; top: 0; width: 9px; height: 100%;
background: #fff; border-radius: 1.5px;
transform-origin: right center;
}
.oggi-bnav__revista-hoja--izq {
left: 0;
transform-origin: right center;
animation: oggi-revista-izq 4.2s ease-in-out infinite;
}
.oggi-bnav__revista-hoja--der {
right: 0;
transform-origin: left center;
animation: oggi-revista-der 4.2s ease-in-out infinite;
}
@keyframes oggi-revista-izq {
0%, 12% { transform: rotateY(0deg); }
32%, 68% { transform: rotateY(38deg); }
88%, 100% { transform: rotateY(0deg); }
}
@keyframes oggi-revista-der {
0%, 12% { transform: rotateY(0deg); }
32%, 68% { transform: rotateY(-38deg); }
88%, 100% { transform: rotateY(0deg); }
}
.oggi-bnav__revista-rotulo {
font-size: 8.5px; font-weight: 800; line-height: 1;
letter-spacing: .04em; color: #fff;
}
.oggi-bnav__play--revista:active .oggi-bnav__play-btn { background: var(--oggi-navy-700, #14305f); }
@media (prefers-reduced-motion: reduce) {
.oggi-bnav__revista-hoja { animation: none; }
}
.oggi-bnav__cart .oggi-hdr-m__cart-badge {
position: absolute;
top: 2px;
right: calc(50% - 20px);
background: var(--oggi-red, #e11d48);
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 16px; height: 16px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px;
line-height: 1;
}
.oggi-bnav__cart .oggi-hdr-m__cart-badge--empty { display: none; }
.site { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
body.oggi-pago-pantalla .site,
body.oggi-carrito-pantalla .site { padding-bottom: 0; }
body.oggi-filtros-abierto .oggi-bnav { display: none; }
.oggi-hdr-m-wpp { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 768px) and (orientation: landscape) {
.oggi-bnav { display: none; }
.site { padding-bottom: 0; }
.oggi-hdr-m-wpp { bottom: 16px !important; }
}