/* MOFT live content: what the pages need once their cards come from the panel.
   1. [hidden] always wins (sections switch on and off as content arrives).
   2. Real photos fill their box (the boxes were placeholders until now).
   3. Friendly empty states: a plain card, the honey on Novedades, and the oven scenes on the Mostrador. */

[hidden]{display:none!important}

/* ---------- Photos ---------- */
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ph .promo-dot{z-index:2}

/* ---------- Empty states ---------- */
.live-empty{display:grid;justify-items:center;gap:var(--moft-space-2);padding:var(--moft-space-6) var(--moft-space-4);text-align:center;max-width:640px;margin-inline:auto}
.live-empty .t-h3,.live-empty .t-small{margin:0}
.ob-live+.ob-empty,.ob~.live-empty{margin-top:var(--moft-space-4)}

/* Mostrador with nothing on show (Home strip and Mostrador page): the drawing straight on the page, no card, with a
   title and a few playful lines under it (just to read, no link); from 768px they sit beside it and the pair is centred. The drawings (escenas/*.svg) animate
   on their own; the page swaps in their still copy for "reduce motion" with <picture>. */
.live-empty--scene{max-width:none;gap:var(--moft-space-4);padding:0 0 var(--moft-space-4)}
.live-empty__art{display:block;width:min(100%,380px)}
.live-empty__art img{display:block;width:100%;height:auto}
.live-empty__txt{display:grid;gap:var(--moft-space-2);justify-items:center}
.live-empty__txt .t-small{max-width:40ch;text-wrap:pretty}
@media (min-width:768px){
  .live-empty--scene{grid-template-columns:minmax(0,460px) minmax(0,34ch);justify-content:center;align-items:center;justify-items:start;column-gap:var(--moft-space-7);text-align:left}
  .live-empty__art{width:100%}
  .live-empty__txt{justify-items:start}
}

/* Honey (Novedades and Catálogo with nothing to show): a dipper pouring a thread of honey into a full jar,
   which spills over the rim and hangs a drop.
   Drawn like the brand drips: caramelo honey with a solid caramelo-deep shade offset below-right and
   caramelo-light highlights; the jar and the dipper keep the chocolate outline. Solid colours only.
   Moves with transform only; on "reduce motion" everything is drawn at rest. */
.honey{padding-block:var(--moft-space-7) var(--moft-space-8)}
.honey__wrap{display:grid;gap:var(--moft-space-5);align-items:center;justify-items:center;text-align:center}
.honey__art{width:160px;height:auto;overflow:visible} /* a touch taller than the text beside it */
.honey__text{display:grid;gap:var(--moft-space-3);justify-items:center;max-width:46ch}
.honey__text .t-h2,.honey__p{margin:0}
.honey__p{font-size:var(--moft-size-body);line-height:1.55;color:var(--moft-text-on-light)}
@media (min-width:900px){
  .honey__wrap{grid-template-columns:auto minmax(0,46ch);gap:var(--moft-space-6);justify-content:center;justify-items:start;text-align:left}
  .honey__text{justify-items:start}
}
.honey__honey{fill:var(--moft-caramelo,#D66518)}
.honey__deep{fill:var(--moft-caramelo-deep,#A54300)}
.honey__deep-soft{fill:var(--moft-caramelo,#D66518)}
.honey__hi{fill:none;stroke:var(--moft-caramelo-light,#FFDEB6);stroke-width:3;stroke-linecap:round}
.honey__coil{fill:none;stroke:var(--moft-caramelo-deep,#A54300);stroke-width:2.5;stroke-linecap:round}
.honey__jar-honey{fill:var(--moft-salty-caramel,#FFC580)}
.honey__glint{fill:none;stroke:var(--moft-whipped-cream,#FFF9F3);stroke-width:7;stroke-linecap:round}
.honey__outline{fill:none;stroke:var(--moft-chocolate,#702D00);stroke-width:4;stroke-linejoin:round}
.honey__glass{fill:var(--moft-whipped-cream,#FFF9F3);stroke:var(--moft-chocolate,#702D00);stroke-width:4;stroke-linejoin:round}
.honey__label{fill:var(--moft-whipped-cream,#FFF9F3);stroke:var(--moft-chocolate,#702D00);stroke-width:3}
.honey__comb{fill:var(--moft-salty-caramel,#FFC580);stroke:var(--moft-chocolate,#702D00);stroke-width:2.5;stroke-linejoin:round}
.honey__wood{fill:var(--moft-chocolate-light,#D6A380);stroke:var(--moft-chocolate,#702D00);stroke-width:4}
.honey__groove{fill:none;stroke:var(--moft-chocolate,#702D00);stroke-width:3;stroke-linecap:round}
.honey__ground{fill:var(--moft-caramelo-light,#FFDEB6)}

/* 1 the thread pours down (speeding up, like anything falling), 2 the jar brims over and the spill creeps down,
   3 the drop swells at its tip; then, on a loop, a big drop runs down the thread, the drop hangs and stretches, the dipper sways */
.honey__pour,.honey__spill{transform-box:fill-box;transform-origin:50% 0}
.honey__pour{animation:honey-pour 1s cubic-bezier(.55,0,.9,.6) .3s both}
.honey__spill{animation:honey-pour 1.6s cubic-bezier(.3,.6,.4,1) 1.2s both}
.honey__drop{transform-box:fill-box;transform-origin:50% 0;animation:honey-swell .9s cubic-bezier(.3,1.4,.5,1) 2.4s both}
.honey__hang{transform-box:fill-box;transform-origin:50% 0;animation:honey-hang 2.6s ease-in-out 3.3s infinite alternate}
.honey__bead{transform-box:fill-box;transform-origin:50% 50%;transform:translateY(140px) scale(0);animation:honey-bead 2.8s cubic-bezier(.5,0,.85,.7) 1.6s infinite}
/* with each big drop the thread runs thicker for a moment and the pile in the jar swells, then both settle */
.honey__stream{transform-box:view-box;transform-origin:180px 0;animation:honey-surge 2.8s ease-in-out 1.6s infinite}
.honey__pile{transform-box:fill-box;transform-origin:50% 100%;animation:honey-plop 2.8s ease-out 1.6s infinite}
.honey__dipper{transform-box:view-box;transform-origin:180px 140px;animation:honey-sway 5s ease-in-out infinite alternate}
@keyframes honey-pour{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes honey-swell{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes honey-hang{from{transform:scale(1)}to{transform:scale(.94,1.14)}}
@keyframes honey-bead{
  0%{transform:translateY(140px) scale(0)}
  18%{transform:translateY(150px) scale(1)}
  60%{transform:translateY(203px) scale(.85)}
  70%,100%{transform:translateY(208px) scale(0)}
}
@keyframes honey-surge{
  0%{transform:scaleX(1)}
  14%,58%{transform:scaleX(1.5)}
  80%,100%{transform:scaleX(1)}
}
@keyframes honey-plop{
  0%,56%{transform:scale(1)}
  66%{transform:scale(1.14,1.4)}
  86%,100%{transform:scale(1)}
}
@keyframes honey-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
/* 404: the jar is empty (someone ate it) and the dipper lets go of the last drop, which falls into the jar and vanishes */
.honey__glass-fill{fill:var(--moft-whipped-cream,#FFF9F3)}
.honey__glass-shade,.honey__inside{fill:var(--moft-caramelo-light,#FFDEB6)}
.honey__fall{transform-box:fill-box;transform-origin:50% 0;animation:honey-fall 3.2s linear .6s infinite both}
@keyframes honey-fall{
  0%{transform:translateY(0) scale(0)}
  40%{transform:translateY(0) scale(1);animation-timing-function:ease-in-out}
  52%{transform:translateY(3px) scale(.92,1.18);animation-timing-function:cubic-bezier(.5,0,1,1)}
  78%,100%{transform:translateY(80px) scale(.85,1.25)}
}
/* the 404 buttons' bottom space moves to the section, so the jar centres on the text itself */
.honey__text .nf__actions{padding-bottom:0}
.pagehead .honey__wrap{padding-bottom:var(--moft-space-7)}
@media (min-width:900px){
  .honey__art--nf{width:220px} /* the 404 text is a page title, so the jar grows with it */
  .honey__text .pagehead__sub{margin-inline:0}
  .honey__text .nf__actions{justify-content:flex-start}
}
/* Receta not found (producto.html): the same empty jar. The dry dipper rummages inside it, comes up with nothing, looks
   one way and the other, a honey question mark pops up, and it goes back down to look again. The jar's front is drawn
   over the dipper, so it disappears inside. One 6.4 s loop shared by every part. */
.honey__ask-line,.honey__ask-deep{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.honey__ask-line{stroke:var(--moft-caramelo,#D66518)}
.honey__ask-deep{stroke:var(--moft-caramelo-deep,#A54300)}
.honey__stir{transform-box:view-box;transform-origin:180px 212px;animation:honey-stir 6.4s ease-in-out .4s infinite}
.honey__lift{animation:honey-lift 6.4s .4s infinite}
.honey__shake{transform-box:view-box;transform-origin:180px 406px;animation:honey-shake 6.4s ease-in-out .4s infinite}
.honey__ask{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);animation:honey-ask 6.4s .4s infinite}
@keyframes honey-stir{
  0%,34%,40%{transform:rotate(0)}
  6%,20%{transform:rotate(-6deg)}
  13%,27%{transform:rotate(6deg)}
  54%{transform:rotate(-10deg)}
  64%{transform:rotate(10deg)}
  72%,100%{transform:rotate(0)}
}
@keyframes honey-lift{
  0%,34%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,0,.2,1)}
  45%{transform:translateY(-128px);animation-timing-function:ease-in-out}
  50%,72%{transform:translateY(-120px);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  82%,100%{transform:translateY(0)}
}
@keyframes honey-shake{
  0%,34%,82%,100%{transform:rotate(0)}
  6%,20%{transform:rotate(-1deg)}
  13%,27%{transform:rotate(1deg)}
  85%{transform:rotate(.8deg)}
  88%{transform:rotate(-.5deg)}
  91%{transform:rotate(0)}
}
@keyframes honey-ask{
  0%,50%{transform:scale(0) rotate(-20deg)}
  55%{transform:scale(1.15) rotate(8deg)}
  59%,70%{transform:scale(1) rotate(0)}
  76%,100%{transform:scale(0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .honey__fall,.honey__stir,.honey__lift,.honey__shake,.honey__ask,.honey__pour,.honey__spill,.honey__drop,.honey__hang,.honey__dipper,.honey__stream,.honey__pile{animation:none}
  .honey__bead{animation:none;display:none}
  .honey__ask{transform:none}
}

/* ---------- Page not found (404.html) ---------- */
.nf__actions{display:flex;flex-wrap:wrap;gap:var(--moft-space-3);justify-content:center;margin:var(--moft-space-5) 0 0;padding-bottom:var(--moft-space-7)}