/* MOOD · Acceso a «Mi pedido» destacado en el encabezado.
   Se mantiene la animación y el contador original. */
.header .nav-actions .bag{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:auto;
  min-width:125px;
  height:42px;
  flex-shrink:0;
  padding:0 15px 0 12px;
  border-radius:12px;
  color:#fff;
  background:var(--teal);
  box-shadow:0 5px 14px #005f9128;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  transform-origin:center;
  transition:background-color .24s ease,color .24s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.header .nav-actions .bag svg{
  width:24px;
  height:24px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.header .nav-actions .bag .cart-label{
  display:inline;
  font-size:13px;
  font-weight:700;
  letter-spacing:.005em;
  line-height:1;
}
.header .nav-actions .bag #cart-count{
  position:absolute;
  top:-8px;
  right:-8px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:23px;
  height:23px;
  padding:0 4px;
  background:var(--orange);
  color:#082c42;
  border:2px solid #fff;
  border-radius:99px;
  font:700 11px/1 var(--sans);
  box-shadow:0 3px 8px #0002;
}
.header .nav-actions .bag #cart-count[hidden]{display:none!important}
@media (hover:hover) and (pointer:fine){
  .header .nav-actions .bag:hover{
    color:#082c42;
    background:var(--orange);
    transform:translateY(-4px) rotate(-1.5deg);
    box-shadow:0 12px 23px #fa783c4c;
  }
  .header .nav-actions .bag:hover svg{transform:translateY(-1px) rotate(-7deg)}
}
.header .nav-actions .bag:focus-visible{
  color:#082c42;
  background:var(--orange);
  transform:translateY(-3px);
  box-shadow:0 12px 23px #fa783c4c;
}
.header .nav-actions .bag:active{transform:translateY(-1px) scale(.97)}
/* Rebote breve solo cuando aumenta la cantidad del pedido. */
.header .nav-actions .bag.cart-bump{animation:cart-mood-bump .53s ease-out both}
.header .nav-actions .bag.cart-bump #cart-count{animation:cart-mood-count .45s ease-out both}
@keyframes cart-mood-bump{
  0%{transform:translateY(0) scale(1)}
  32%{transform:translateY(-6px) scale(1.09) rotate(-4deg)}
  62%{transform:translateY(1px) scale(.98) rotate(2deg)}
  100%{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes cart-mood-count{
  0%{transform:scale(.78)}
  50%{transform:scale(1.35)}
  100%{transform:scale(1)}
}
/* En pantallas pequeñas, solo el icono + contador: no ocupa la barra. */
@media(max-width:900px){
  .header .nav-actions .bag{
    min-width:44px;
    width:44px;
    height:44px;
    padding:0;
    border-radius:12px;
  }
  .header .nav-actions .bag .cart-label{display:none}
  .header .nav-actions .bag svg{width:25px;height:25px}
}
@media(max-width:600px){
  .header .nav-actions{gap:10px}
}
@media(max-width:380px){
  .header .nav-wrap{gap:8px}
  .header .brand{width:64px}
  .header .nav-actions{gap:8px}
  .header .nav-actions .bag{width:42px;min-width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .header .nav-actions .bag,
  .header .nav-actions .bag svg{transition:none!important}
  .header .nav-actions .bag.cart-bump,
  .header .nav-actions .bag.cart-bump #cart-count{animation:none!important}
  .header .nav-actions .bag:is(:hover,:focus-visible,:active){transform:none!important}
  .header .nav-actions .bag:hover svg{transform:none!important}
}


/* La cabecera fija no debe tapar el título de la sección «¿Cuál es tu MOOD hoy?». */
#ambientes{scroll-margin-top:78px}