/* Piezas que comparten el inicio y la página de producto:
   cartel de promociones, buscador, pie con medios de pago/envío y WhatsApp. */
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Cartel de promociones (se edita desde el panel) ---- */
.promo-bar{
    background:var(--dark);
    color:var(--white);
    overflow:hidden;
    white-space:nowrap;
}
.promo-track{
    display:flex;
    width:max-content;
    animation:promoScroll 26s linear infinite;
}
.promo-group{
    display:flex;
    align-items:center;
    gap:22px;
    padding:10px 11px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
}
.promo-sep{color:var(--pink);font-size:.7rem}
@keyframes promoScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
@media(min-width:961px){
    .promo-track{animation:none;width:auto;justify-content:center}
    .promo-group[aria-hidden="true"]{display:none}
    .promo-group .promo-sep:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
    .promo-track{animation:none;width:auto;justify-content:center}
    .promo-group[aria-hidden="true"]{display:none}
    .promo-group{white-space:normal;flex-wrap:wrap;justify-content:center;row-gap:4px}
}

/* ---- Buscador del encabezado ---- */
.header-search{
    position:relative;
    flex:1;
    max-width:480px;
    margin-left:auto;
    height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
    background:var(--white);
    border:1.5px solid #e6e6e6;
    border-radius:50px;
    transition:border-color .3s,box-shadow .3s;
}
.header-search:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px rgba(246,175,203,.2)}
.search-icon{color:#aaa;flex-shrink:0;transition:color .3s}
.header-search:focus-within .search-icon{color:var(--pink-deep)}
.header-search input[type="search"]{
    flex:1;
    min-width:0;
    height:100%;
    border:none;
    outline:none;
    font-family:var(--font-body);
    font-size:1rem;
    color:var(--dark);
    background:transparent;
}
.header-search input[type="search"]::placeholder{color:#999}
.header-search input[type="search"]::-webkit-search-cancel-button{display:none}
.search-clear-btn{
    color:#aaa;
    font-size:.85rem;
    width:26px;
    height:26px;
    border-radius:50%;
    flex-shrink:0;
    transition:color .2s,background .2s;
}
.search-clear-btn:hover{color:var(--pink-deep);background:var(--pink-light)}

.search-results{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:var(--white);
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.16);
    padding:8px;
    z-index:1100;
    max-height:min(70vh,470px);
    overflow-y:auto;
}
.search-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
    border-radius:10px;
    transition:background .2s;
}
.search-item:hover,.search-item:focus-visible{background:var(--pink-light);outline:none}
.search-item img{width:44px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--gray-bg)}
.search-item-text{min-width:0}
.search-item-name{display:block;font-size:.88rem;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-item-price{display:block;font-size:.82rem;color:var(--pink-deep);font-weight:700;margin-top:2px}
.search-all{
    width:100%;
    margin-top:6px;
    padding:12px;
    border-radius:10px;
    background:var(--dark);
    color:var(--white);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:background .3s;
}
.search-all:hover,.search-all:focus-visible{background:var(--pink-deep);outline:none}
.search-empty{padding:14px 10px;font-size:.88rem;color:#888}

/* ---- Pie de página ---- */
.main-footer{
    background:var(--dark);
    color:rgba(255,255,255,.7);
    padding:60px 0 30px;
}
.footer-content{
    display:flex;
    justify-content:space-between;
    gap:60px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{max-width:300px}
.footer-brand img{
    border-radius:50%;
    margin-bottom:16px;
    width:60px;
    height:60px;
    object-fit:cover;
}
.footer-brand p{
    font-size:.88rem;
    line-height:1.6;
}
.footer-links-grid{
    display:flex;
    gap:60px;
}
.footer-links-grid h4,.footer-medios h4{
    color:var(--white);
    font-size:.85rem;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:16px;
}
.footer-links-grid a{
    display:block;
    font-size:.85rem;
    margin-bottom:10px;
    transition:color .3s;
}
.footer-links-grid a:hover{color:var(--pink)}

.footer-medios{
    display:flex;
    flex-wrap:wrap;
    gap:28px 64px;
    padding:32px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-medios-grupo{min-width:0}
.medios-lista{display:flex;flex-wrap:wrap;gap:8px}
.medio{
    display:inline-flex;
    height:30px;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.medio svg{height:30px;width:auto;display:block}
.medio--texto{
    align-items:center;
    padding:0 12px;
    background:rgba(255,255,255,.1);
    color:var(--white);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.3px;
    white-space:nowrap;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:24px;
    font-size:.78rem;
}
.footer-credit a{
    color:var(--pink);
    font-weight:600;
    transition:color .3s;
}
.footer-credit a:hover{color:var(--pink-light)}

/* ---- WhatsApp flotante (siempre visible) ---- */
.wsp-float{
    position:fixed;
    right:clamp(14px,3vw,26px);
    bottom:clamp(14px,3vw,26px);
    z-index:900;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 8px 24px rgba(37,211,102,.35);
    transition:transform .25s var(--ease),box-shadow .25s;
}
.wsp-float svg{width:30px;height:30px}
.wsp-float:hover{transform:scale(1.07);box-shadow:0 10px 30px rgba(37,211,102,.45)}
.wsp-float:active{transform:scale(.95)}

@media(max-width:960px){
    .footer-content{flex-direction:column;gap:30px}
    .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:560px){
    .footer-links-grid{flex-direction:column;gap:30px}
}