/* MOFT Home. Layout only: every color, size, space, radius and shadow is a --moft-* token.
   Components come from moft-design-system/components/components.css. */

*,*::before,*::after{box-sizing:border-box}

/* Drip-matched shadows. The chocolate drip's own shadow falls mostly down (≈5:1 down vs right,
   sampled from moft_drip_chocolate.png), buttons and pills (labels, price stickers, header pills) share 3px 4px instead of the
   DS default 2px 4px; cards have none except the hero box, 5px 6px (client choices). Colours stay the DS "deep shade of
   the family". Site-level override: the DS files are untouched. */
:root{
  /* Shadow scale, kept as it stands: buttons 2px 4px (kit), pills and stickers 3px 4px, hero panel 5px 6px */
  --sh-btn:2px 4px 0;--sh-pill:3px 4px 0;--sh-panel:5px 6px 0;
  --moft-shadow-glaze:3px 4px 0 var(--moft-chocolate-deep);
  --moft-shadow-glaze-promo:3px 4px 0 var(--moft-strawberry-deep);
  --moft-shadow-glaze-dietary:3px 4px 0 var(--moft-pistacho-deep);
}
.moft-pill--novedad{box-shadow:var(--sh-pill) var(--moft-caramelo-deep)}
.moft-pill--sin-gluten,.moft-pill--vegano{box-shadow:var(--sh-pill) var(--moft-pistacho-deep)}
.moft-pill--encargos{box-shadow:var(--sh-pill) var(--moft-chocolate)}
.moft-pill--oferta{box-shadow:var(--sh-pill) var(--moft-strawberry-deep)}
.moft-price{box-shadow:var(--sh-pill) var(--moft-salty-caramel-deep)}
/* Cards: no shadow, except the hero box (5px 6px, client choice) */
.moft-card{box-shadow:none}
.hero__box.moft-card{border:3px solid var(--moft-cacao);box-shadow:var(--sh-panel) var(--moft-chocolate-deep)}
html{background:var(--moft-crema);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--moft-space-9) + 12.58vw)}
body.moft{background:transparent}
body{margin:0;font-size:var(--moft-size-body);line-height:1.6;font-weight:var(--moft-weight-body)}
/* Letter spacing (client request): a little air on everything. Body .02em, headings .03em (the kit's -.02em
   headline tracking is loosened), buttons and small text .05em. Labels and Fórmula pills keep their wide .1em. */
body{letter-spacing:.02em}
.t-h2,.t-h3{letter-spacing:.03em}
.moft-btn,.hdr-pill,.link,.t-small,.tile__price{letter-spacing:.05em}
/* Page ground: the DS crema texture on a fixed layer (natural grain scale; works on iOS, unlike
   background-attachment:fixed). The layer is taller than the screen by --tex-travel and slides DOWN
   as the page scrolls up (wa.js sets --tex-shift from scroll progress), giving a counter-scroll slide.
   The texture isn't seamless, so it never repeats: the movement stays within the extra height.
   Crema (the texture's own colour) stays underneath as the fallback. */
:root{--tex-travel:50vh;--tex-shift:0px}
body::before{content:"";position:fixed;left:0;right:0;top:calc(-1 * var(--tex-travel));height:calc(100vh + var(--tex-travel));z-index:-1;background:var(--moft-crema) url("moft-design-system/elements/moft_texture_crema.png") center/cover no-repeat;will-change:transform;pointer-events:none}
/* wa.js adds a real .ground element (same look) and moves its transform directly, so scrolling never restyles the page. */
.ground{position:fixed;left:0;right:0;top:calc(-1 * var(--tex-travel));height:calc(100vh + var(--tex-travel));z-index:-1;background:var(--moft-crema) url("moft-design-system/elements/moft_texture_crema.png") center/cover no-repeat;will-change:transform;pointer-events:none}
.js body::before{display:none}
@media (prefers-reduced-motion:reduce){body::before,.ground{transform:none;top:0;height:100vh}}
h1,h2,h3,p,ol,ul{margin:0}
:where(ul[role=list],ol){list-style:none;padding:0}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:3px;border-radius:var(--moft-radius-small)}

.skip{min-height:44px;display:inline-flex;align-items:center;position:absolute;left:var(--moft-space-4);top:calc(-1 * var(--moft-space-9));z-index:20;padding:var(--moft-space-2) var(--moft-space-4);background:var(--moft-chocolate);color:var(--moft-crema);border-radius:var(--moft-radius-pill);font-weight:var(--moft-weight-bold)}
.skip:focus{top:var(--moft-space-4)}

/* Display type: Fraunces (variable, SOFT 100, WONK 0), following the "MOFT Fraunces System" Option A.
   Headlines 900; buttons and card titles 700; the hero tag is the italic-600 accent line (WONK 1).
   Everything smaller (menu, pills, labels, prices, paragraphs) is SN Pro, the kit's text face since 9 Oct 2026. */
:root{--font-display:"Fraunces",Georgia,serif}
/* Body, menu, buttons, labels and prices: SN Pro (variable 200-900), the kit's text face (it replaced Nunito). The kit's weight
   tokens (400/600/800/900) map straight onto SN Pro's axis. Nunito stays as the fallback. */
:root{--moft-font:"SN Pro","Nunito","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif}
.hero__title,.feature__title,.t-h2{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;letter-spacing:.01em}
.t-h3{font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none}
/* Buttons use the same type as the header menu: SN Pro, weight 900 (set by .moft-btn / .hdr-pill) */
.moft-btn{font-family:var(--moft-font);font-weight:var(--moft-weight-black);font-variation-settings:normal}
.t-h2{line-height:1.15}
.hero .t-label{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:24px;line-height:1.2;letter-spacing:0;text-transform:none}
/* Type scale (tokens/moft-tokens.css "Web scale") */
.t-label{font-size:var(--moft-size-label);line-height:1.2;font-weight:var(--moft-weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--moft-accent-text-on-light)}
.t-h2{font-size:var(--moft-size-h2);line-height:1.15;font-weight:var(--moft-weight-bold)}
.t-h3{font-size:var(--moft-size-h3);line-height:1.25;font-weight:var(--moft-weight-bold)}
.t-body{font-size:var(--moft-size-body);line-height:1.6;max-width:62ch}
.t-small{font-size:var(--moft-size-small);line-height:1.5;font-weight:var(--moft-weight-medium);color:var(--moft-text-brand-on-light)}

/* Text link: the DS has no link component; buttons are reserved for the WhatsApp CTAs */
.link{margin-block:-3px;font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);color:var(--moft-text-brand-on-light);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background:none;border:0;padding:11px 0;cursor:pointer;white-space:nowrap}
.link:hover{color:var(--moft-accent-text-on-light)}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--moft-space-4)}

/* Photo placeholder: real Moft photos only, never stock or AI */
.ph{display:flex;align-items:flex-end;padding:var(--moft-space-2) var(--moft-space-3);background:var(--moft-galleta);color:var(--moft-chocolate);border-radius:var(--moft-radius-small);font-size:var(--moft-size-label);font-weight:var(--moft-weight-bold);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Header: chocolate band + floating pills ----------
   The band uses the drip element's exact color so header and drip read as one pour.
   Dark-ground rules: Salty Caramel logo on its Cacao ground, crema text, salty caramel accents. */
.hdr-band{position:sticky;top:0;z-index:5;background:var(--moft-element-chocolate);color:var(--moft-text-on-dark)}
/* The drip hangs from the sticky band and travels with it. Compressed to 85% (12.58vw) at the
   client's request, a deliberate exception to the DS "never stretch" rule. Its top 125 rows are flat
   #6F2E0E (4.06vw once compressed), identical to the band, so it tucks fully under the band:
   the irregular edge starts exactly where the header ends. Drops are never cropped. */
.hdr-drip{position:absolute;left:0;top:calc(100% - 4.06vw);width:100%;height:12.58vw;pointer-events:none}
.hdr{position:relative}
.hdr-band a:focus-visible,.hdr-band button:focus-visible{outline-color:var(--moft-salty-caramel)}
.hdr{display:flex;align-items:center;gap:var(--moft-space-2);padding:max(var(--moft-space-3),env(safe-area-inset-top)) max(var(--moft-space-4),env(safe-area-inset-right)) var(--moft-space-2) max(var(--moft-space-4),env(safe-area-inset-left));max-width:1280px;margin-inline:auto}
.hdr-pill{display:inline-flex;align-items:center;background-color:var(--moft-cacao);color:var(--moft-text-on-dark);border:2px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-pill);box-shadow:var(--moft-shadow-glaze);font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);line-height:1;min-height:44px}
/* Logo pill: Salty Caramel logo on its Cacao ground, deliberately larger than the other pills */
/* Logo pill: Dulce de Leche logo on its own Crema ground, bordered in the menu pills' Cacao.
   Deliberately larger than the other pills. */
/* Logo: the white (Whipped Cream one-ink) wordmark framed in the same pill as the menu (Cacao fill, Salty Caramel border, shadow) */
/* Logo slightly smaller; extra padding below lifts it ~2.5px so the drip in the lettering feels balanced. The pill keeps its previous size. */
.hdr-logo{flex:none;display:block;padding:8px 28px 13px}
/* Wordmark sits on a hard glaze shadow, same solid Chocolate Deep as the pill shadows */
.hdr-logo img{display:block;width:72px;height:auto;filter:drop-shadow(2px 2px 0 var(--moft-chocolate-deep))}
/* Mobile: quieter language pill, same salty caramel border as the others but no fill or shadow */
.hdr-lang{margin-left:auto;gap:var(--moft-space-1);padding:0 var(--moft-space-3);background:transparent;box-shadow:none;color:var(--moft-chocolate-light)}
.hdr-lang a{text-decoration:none;padding:var(--moft-space-2) var(--moft-space-1)}
.hdr-lang a[aria-current]{color:var(--moft-text-on-dark)}
.hdr-menu{padding:0 var(--moft-space-4);cursor:pointer}
/* Phones: the language pill would push "Menú" off the screen (Română and English words are longer), so it moves into the menu window (and stays in the footer) */
@media (max-width:479px){
  .hdr-lang{display:none}
  .hdr-menu{margin-left:auto}
}
.hdr-menu[aria-expanded=true]{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
.hdr-menu:active{transform:translate(3px,4px);box-shadow:none}
.hdr-nav{display:none}

/* Mobile menu: centred modal, dark cacao-texture panel with the header pills' Salty Caramel border and a hard brand shadow.
   The rest of the screen is blurred and darkened with a brand colour (Tiramisu). Links behave like the desktop menu:
   hover = Salty Caramel fill with dark text; pressed = no fill, Salty Caramel border, Whipped Cream text. */
.menu{width:min(88vw,340px);max-height:86dvh;overflow:auto;margin:auto;padding:var(--moft-space-5);border:3px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-card);color:var(--moft-crema);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);font-family:var(--moft-font)}
.menu:focus{outline:none}
/* Modal dialogs (menu, noticia window, cookie settings) share one enter/exit: fade + small rise, 200ms strong ease-out, and the
   backdrop fades with them. Exit mirrors the entrance (display/overlay are held with allow-discrete until it ends).
   Reduced motion keeps the fade and drops the movement. */
.menu,.note,.ck-prefs{--dlg-y:14px;--dlg-s:.97;opacity:0;transform:translateY(var(--dlg-y)) scale(var(--dlg-s));transition:opacity .2s var(--moft-ease-out),transform .2s var(--moft-ease-out),overlay .2s allow-discrete,display .2s allow-discrete}
.menu[open],.note[open],.ck-prefs[open]{opacity:1;transform:none}
@starting-style{.menu[open],.note[open],.ck-prefs[open]{opacity:0;transform:translateY(var(--dlg-y)) scale(var(--dlg-s))}}
.note{--dlg-y:0px;--dlg-s:.94;transform-origin:calc(50% + var(--ox,0px)) calc(50% + var(--oy,0px))}
.menu::backdrop,.note::backdrop,.ck-prefs::backdrop,.sheet::backdrop{opacity:0;transition:opacity .2s var(--moft-ease-out),overlay .2s allow-discrete,display .2s allow-discrete}
.menu[open]::backdrop,.note[open]::backdrop,.ck-prefs[open]::backdrop,.sheet[open]::backdrop{opacity:1}
@starting-style{.menu[open]::backdrop,.note[open]::backdrop,.ck-prefs[open]::backdrop,.sheet[open]::backdrop{opacity:0}}
@media (prefers-reduced-motion:reduce){.menu,.note,.ck-prefs{--dlg-y:0px;--dlg-s:1}}
.menu::backdrop{background:color-mix(in srgb,var(--moft-tiramisu) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Menu links rise in one after another when it opens (40ms apart); on close they leave with the panel, no delay. */
.menu__list li{opacity:0;transform:translateY(8px);transition:opacity .2s var(--moft-ease-out),transform .2s var(--moft-ease-out)}
.menu[open] .menu__list li{opacity:1;transform:none}
@starting-style{.menu[open] .menu__list li{opacity:0;transform:translateY(8px)}}
.menu[open] .menu__list li:nth-child(1){transition-delay:60ms}.menu[open] .menu__list li:nth-child(2){transition-delay:100ms}.menu[open] .menu__list li:nth-child(3){transition-delay:140ms}.menu[open] .menu__list li:nth-child(4){transition-delay:180ms}.menu[open] .menu__list li:nth-child(5){transition-delay:220ms}.menu[open] .menu__list li:nth-child(6){transition-delay:260ms}
@media (prefers-reduced-motion:reduce){.menu__list li{transform:none;transition:none}}
body:has(dialog[open]){overflow:hidden}
.menu__head{display:flex;align-items:center;justify-content:space-between;gap:var(--moft-space-4);margin-bottom:var(--moft-space-4)}
.menu__t{margin:0;font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:28px;line-height:1.1;color:var(--moft-crema)}
.menu__close{font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;color:var(--moft-salty-caramel);background:none;border:0;cursor:pointer;min-height:44px;padding:0 var(--moft-space-2);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.menu__list{display:grid;gap:var(--moft-space-1);margin:0;padding:0;list-style:none}
.menu__list a{display:block;padding:calc(var(--moft-space-3) - 2px) var(--moft-space-4);border:2px solid transparent;border-radius:var(--moft-radius-pill);font-size:18px;font-weight:var(--moft-weight-black);letter-spacing:.04em;color:var(--moft-crema);text-decoration:none;text-align:center;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.menu__list a:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
.menu__list a:active{background:transparent;border-color:var(--moft-salty-caramel);color:var(--moft-whipped-cream)}
.menu__list a:focus-visible{outline:3px solid var(--moft-salty-caramel);outline-offset:2px}

/* ---------- 1 · Hero ---------- */
/* Room for the visible part of the header drip: 12.58vw - 4.06vw hidden under the band */
.hero{padding-top:calc(8.52vw + var(--moft-space-5));padding-bottom:var(--moft-space-2);text-align:left}
.hero__box{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--moft-space-2);padding:var(--moft-space-6) var(--moft-space-5)}
/* Photos: a much gentler version of the hero treatment (fine grain with faint scanlines, a few RGB specks, a touch
   more saturation, all drifting slowly) on the non-product photos when JS is off (photo-film.js replaces it otherwise).
   Product photos (Siempre en vitrina, Catálogo, the cut-through cakes) do NOT get it. The overlays sit above the <img> and
   below the labels. */
.feature__ph,.news__ph,.strip__ph{position:relative;overflow:hidden;isolation:isolate}
.feature__ph::before,.news__ph::before,.strip__ph::before,
.feature__ph::after,.news__ph::after,.strip__ph::after{content:"";position:absolute;inset:-320px;z-index:1;pointer-events:none}
.feature__ph::before,.news__ph::before,.strip__ph::before{background-image:repeating-linear-gradient(to bottom,rgba(38,13,0,.14) 0 1px,transparent 1px 4px),url("grain-retro.jpg");background-size:auto,900px 900px;mix-blend-mode:overlay;opacity:.28;animation:photo-grain 1.4s steps(1) infinite}
.feature__ph::after,.news__ph::after,.strip__ph::after{background-image:url("grain-rgb.png");background-size:800px 800px;opacity:.4;animation:photo-rgb 2.1s steps(1) infinite}
.feature__ph img,.news__ph img,.strip__ph img{filter:saturate(1.12)}
.news__ph .moft-formula{z-index:2}
/* Offsets are multiples of 4px vertically, so the 4px scanlines on the same layer stay put while the grain drifts. */
@keyframes photo-grain{0%{transform:translate(0,0)}25%{transform:translate(-200px,120px)}50%{transform:translate(150px,-180px)}75%{transform:translate(-90px,-140px)}100%{transform:translate(0,0)}}
@keyframes photo-rgb{0%{transform:translate(0,0)}33%{transform:translate(-310px,140px)}66%{transform:translate(180px,-240px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.feature__ph::before,.news__ph::before,.strip__ph::before,.feature__ph::after,.news__ph::after,.strip__ph::after{animation:none}}
/* Non-product photos with JS on: the hero's film, tamed (photo-film.js draws it on .photo-film), replaces the CSS grain above.
   The canvas sits above the <img> and below the labels, like the grain did. */
.has-film{position:relative;overflow:hidden;isolation:isolate}
.has-film::before,.has-film::after{content:none}
.photo-film{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}

/* ---------- Encarga tu tarta: dark cacao-texture panel, three numbered steps on a dotted path, personalisation chips ---------- */
.order{border-radius:var(--moft-radius-card);border:3px solid var(--moft-cacao);padding:var(--moft-space-6) var(--moft-space-5);display:grid;gap:var(--moft-space-6);color:var(--moft-crema);position:relative;overflow:hidden}
.order .t-h2{color:var(--moft-crema)}
.order__kicker{color:var(--moft-salty-caramel);margin:0 0 var(--moft-space-2)}
.order__lead{max-width:46ch;margin:var(--moft-space-3) auto 0;font-size:var(--moft-size-body);line-height:1.55;color:var(--moft-crema)}
.order__steps{display:grid;gap:var(--moft-space-6);margin:0;padding:0;list-style:none;counter-reset:none}
.order{text-align:center}
.order-step{position:relative;display:flex;flex-direction:column;align-items:center}
.order-step__top{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:var(--moft-space-4)}
.order-step__n{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--moft-radius-pill);background:var(--moft-salty-caramel);color:var(--moft-tiramisu);box-shadow:var(--sh-pill) var(--moft-tiramisu);font-family:var(--font-display);font-weight:900;font-size:26px;line-height:1}
/* phones: the horizontal path is hidden and a short vertical dotted line links each step to the next */
.order-step__path{display:none}
.order-step:not(:last-child)::after{content:"";display:block;height:44px;margin-top:var(--moft-space-5);border-left:3px dotted var(--moft-salty-caramel-deep)}
.order-step__t{margin:0 0 var(--moft-space-2);font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:24px;line-height:1.15;color:var(--moft-salty-caramel)}
.order-step p{margin:0 auto;max-width:40ch;line-height:1.55;color:var(--moft-crema)}
.order-step__meta{display:inline-block;margin-top:var(--moft-space-3);font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.06em;text-transform:uppercase;color:var(--moft-salty-caramel);border-bottom:2px solid var(--moft-salty-caramel-deep);padding-bottom:2px}
.order__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:var(--moft-space-5);padding-top:var(--moft-space-5);border-top:2px dotted var(--moft-salty-caramel-deep)}
.order__cta{flex:0 0 100%;max-width:340px;justify-content:center;text-align:center}
.order__custom-t{margin:0 0 var(--moft-space-3);font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:20px;color:var(--moft-crema)}
.order__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--moft-space-2);margin:0;padding:0;list-style:none}
.order__chips li{padding:6px 14px;border-radius:var(--moft-radius-pill);border:2px solid var(--moft-salty-caramel);color:var(--moft-salty-caramel);font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.04em}
/* scroll reveal: steps rise in one after another (only when JS is on, and never under reduced motion) */
.js .order-step{opacity:0;transform:translateY(16px);transition:opacity .4s var(--moft-ease-out) calc(var(--i) * 60ms),transform .4s var(--moft-ease-out) calc(var(--i) * 60ms)}
.js .order-step.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .order-step{transform:none;transition:opacity .3s ease calc(var(--i) * 60ms)}}

/* ---------- Encarga tu tarta, framed as a retro TV (1930s cartoon set, flat vector, brand colours, solid fills only) ----------
   Chocolate wood cabinet with a Cacao outline and the hero box's hard 5px 6px shadow, a Galleta bezel round a CRT-shaped
   screen (the cacao panel itself), a control panel (two Salty Caramel knobs, speaker grille, Strawberry power light) and
   splayed legs. Everything here is decorative (aria-hidden in the markup). */
.tv{--tv-panel:0px;position:relative}
.tv__cabinet{position:relative;z-index:0;display:grid;gap:var(--moft-space-4);padding:var(--moft-space-4) var(--moft-space-4) var(--moft-space-3);background:var(--moft-chocolate);border:3px solid var(--moft-cacao);border-radius:36px;box-shadow:var(--sh-panel) var(--moft-chocolate-deep)}
/* cartoon gloss on the lid: the same light-brown swoosh and dot the header drip carries */
.tv__cabinet::before,.tv__cabinet::after{content:"";position:absolute;top:5px;height:5px;border-radius:var(--moft-radius-pill);background:var(--moft-chocolate-light);pointer-events:none}
.tv__cabinet::before{left:40px;width:min(26%,190px)}
.tv__cabinet::after{left:calc(40px + min(26%,190px) + 10px);width:10px}
.tv__screen{position:relative;padding:10px;background:var(--moft-galleta);border:3px solid var(--moft-cacao);border-radius:34px/44px;box-shadow:inset 3px 4px 0 var(--moft-galleta-deep)}
.tv__screen .order{border-radius:26px/36px}
.tv__screen .order>*:not(.photo-film){position:relative;z-index:2}
/* glass glare: a Whipped Cream glint on the bezel; the tube itself carries the film (photo-film.js) */
.tv__screen::after{content:"";position:absolute;top:-12px;right:22px;width:26px;height:26px;background:var(--moft-whipped-cream);-webkit-mask:url("moft-design-system/icons/moft_icon_glint.svg") center/contain no-repeat;mask:url("moft-design-system/icons/moft_icon_glint.svg") center/contain no-repeat}
/* control panel: a row under the screen on phones, a column beside it on desktop */
.tv__panel{display:flex;align-items:center;justify-content:space-between;gap:var(--moft-space-4);padding:0 var(--moft-space-2)}
.tv__knob-wrap{display:grid;justify-items:center;gap:6px}
.tv__knob{--r:-40deg;position:relative;display:block;width:48px;height:48px;border-radius:50%;background:var(--moft-salty-caramel);border:3px solid var(--moft-cacao);box-shadow:var(--sh-pill) var(--moft-chocolate-deep)}
.tv__knob--b{--r:35deg}
.tv__knob::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--moft-galleta);border:2px solid var(--moft-salty-caramel-deep)}
/* only the pointer turns (round the knob centre), so the hard shadow stays put like every other shadow */
.tv__knob::after{content:"";position:absolute;left:calc(50% - 2px);top:3px;width:4px;height:14px;border-radius:var(--moft-radius-pill);background:var(--moft-cacao);transform-origin:50% 18px;transform:rotate(var(--r));transition:transform .9s var(--moft-ease-out)}
.tv__knob-t,.tv__led{font-size:var(--moft-size-label);font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--moft-salty-caramel)}
.tv__grille{flex:1;max-width:170px;display:grid;gap:5px}
.tv__grille i{display:block;height:6px;border-radius:var(--moft-radius-pill);background:var(--moft-cacao)}
.tv__led{display:grid;justify-items:center;gap:6px}
.tv__led i{display:block;width:16px;height:16px;border-radius:50%;background:var(--moft-cacao);border:3px solid var(--moft-cacao);transition:background-color .3s ease .5s,border-color .3s ease .5s}
/* switched on when the set scrolls into view (wa.js): the knobs turn to a new setting, the power light comes on */
.tv.is-on .tv__knob{--r:20deg}
.tv.is-on .tv__knob--b{--r:-25deg}
.tv.is-on .tv__led i{background:var(--moft-strawberry);border-color:var(--moft-strawberry-deep)}
@media (hover:hover){.tv__knob-wrap:hover .tv__knob{--r:110deg}.tv__knob-wrap:hover .tv__knob--b{--r:-100deg}}
.tv__feet{display:flex;justify-content:space-between;padding:0 14%;margin-top:3px}
.tv__feet i{display:block;width:18px;height:30px;background:var(--moft-cacao);border-radius:2px 2px 7px 7px;transform:skewX(-16deg);transform-origin:top}
.tv__feet i:last-child{transform:skewX(16deg)}
.tv__feet i::after{content:"";display:block;margin-top:21px;height:9px;border-radius:0 0 7px 7px;background:var(--moft-caramelo)}
@media (prefers-reduced-motion:reduce){.tv__knob::after,.tv__led i{transition:none}}
@media (min-width:1024px){
  .tv{--tv-panel:128px}
  .tv__cabinet{grid-template-columns:minmax(0,1fr) var(--tv-panel);gap:var(--moft-space-5);padding:var(--moft-space-5);border-radius:48px}
  .tv__cabinet::before,.tv__cabinet::after{top:8px;height:6px}
  .tv__cabinet::before{left:56px}
  .tv__cabinet::after{left:calc(56px + min(26%,190px) + 12px);width:12px}
  .tv__screen{padding:14px;border-radius:44px/56px}
  .tv__screen .order{border-radius:34px/46px}
  .tv__panel{flex-direction:column;justify-content:center;gap:var(--moft-space-6);padding:var(--moft-space-5) 0;border-left:3px dotted var(--moft-chocolate-light)}
  .tv__knob{width:72px;height:72px}
  .tv__knob::before{inset:12px}
  .tv__knob::after{top:4px;width:5px;height:20px;left:calc(50% - 2.5px);transform-origin:50% 29px}
  .tv__grille{flex:none;width:76px;gap:7px}
  .tv__grille i{height:7px}
  .tv__feet{padding:0 10%}
  .tv__feet i{width:24px;height:40px}
  .tv__feet i::after{margin-top:28px;height:12px}
}

/* ---------- Encarga tu tarta on phones and tablets (below 1024px): the TV becomes an order slip from the mostrador: a Whipped Cream ticket with
   torn (zigzag) top and bottom, a header line, the order panel stamped in the middle, a barcode and a thank-you.
   The Cacao outline and hard shadow come from stacked 0-blur drop-shadows so they follow the zigzag. */
@media (max-width:1023px){
  .sec--tv .tv{padding:6px 0 12px;filter:drop-shadow(3px 0 0 var(--moft-cacao)) drop-shadow(-3px 0 0 var(--moft-cacao)) drop-shadow(0 3px 0 var(--moft-cacao)) drop-shadow(0 -3px 0 var(--moft-cacao)) drop-shadow(5px 6px 0 var(--moft-chocolate-deep))}
  .tv__panel,.tv__feet{display:none}
  .tv__cabinet{display:block;padding:14px 14px 0;background:var(--moft-whipped-cream);border:0;border-radius:0;box-shadow:none}
  .tv__cabinet::before,.tv__cabinet::after{display:none}
  .tv__screen{padding:0;background:none;border:3px solid var(--moft-cacao);border-radius:var(--moft-radius-card);box-shadow:none}
  .tv__screen .order{border:0;border-radius:17px}
  .tv__screen::after{top:-10px;right:10px}
    .bx-tk-top,.bx-tk-bot{display:block;height:14px;background:linear-gradient(135deg,var(--moft-whipped-cream) 25%,transparent 25%) -7px 0/14px 14px,linear-gradient(225deg,var(--moft-whipped-cream) 25%,transparent 25%) -7px 0/14px 14px}
  .bx-tk-top{transform:scaleY(-1);margin-bottom:-1px}
  .bx-tk-bot{margin-top:-1px}
  .bx-tk-head,.bx-tk-foot{background:var(--moft-whipped-cream);padding:0 14px;color:var(--moft-cacao);font-size:var(--moft-size-label);font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase;line-height:1}
  .bx-tk-head{display:flex;justify-content:space-between;gap:8px;padding-top:10px;padding-bottom:12px;border-bottom:2px dotted var(--moft-cacao);margin:0}
  .bx-tk-head span:last-child{color:var(--moft-strawberry-deep)}
  .bx-tk-foot{display:grid;justify-items:center;gap:10px;padding-top:16px;padding-bottom:10px}
  .bx-tk-foot i{display:block;width:70%;height:34px;background:repeating-linear-gradient(90deg,var(--moft-cacao) 0 2px,transparent 2px 5px,var(--moft-cacao) 5px 9px,transparent 9px 11px,var(--moft-cacao) 11px 12px,transparent 12px 16px)}
  .bx-tk-foot span{font-family:var(--font-display);font-style:italic;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:18px}
}
@media (min-width:1024px){.bx-tk-top,.bx-tk-bot,.bx-tk-head,.bx-tk-foot{display:none}}

/* Hero photo background: fully blurred, behind the content, under a 1930s cartoon film look (hero-film.js draws the
   grain, dust and scratches on .hero__film). The layer overscans the box by 40px so the blur has no soft edge and the
   film-gate weave never shows the edge either. wa.js copies the <img> src into --hero-photo. */
.hero__box{position:relative;overflow:hidden;isolation:isolate;background:var(--moft-cacao)}
.hero__bg{position:absolute;inset:-40px;z-index:-1;overflow:hidden;background:var(--moft-cacao)}
/* Fully blurred, but still see-through: the photo's shapes and light read as soft colour blobs, not as one flat smear.
   Warm sepia-leaning, a little contrast, darkened (client request: a bit darker). Raise --hero-blur for a smoother wash. */
.hero__layer{position:absolute;inset:0;background-image:var(--hero-photo,none);background-size:cover;background-position:center}
.hero__layer--b1{filter:blur(var(--hero-blur,15px)) sepia(.35) saturate(1.25) contrast(1.05) brightness(.58);opacity:.82}
/* The film: speckle grain, dust, hairs and scratches on a canvas, with a worn-edge vignette painted on the canvas itself.
   Same layer order as the veil: above the photo, under the text. Drawn one pixel per CSS pixel and kept crisp. */
.hero__film{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;
  background:radial-gradient(ellipse 85% 95% at 50% 50%,transparent 40%,color-mix(in srgb,var(--moft-carbon) 55%,transparent) 100%)}
/* The faint version over the headline and the line below it: above the text, no vignette. Only the letters get specks. */
.hero__film--text{z-index:1;background:none}
.hero__photo{display:none}
.hero__video{object-fit:cover;width:100%;height:100%}
.hero__video[hidden]{display:none}
/* Contrast guard: a flat veil between the photo and the text. wa.js sets its colour and strength so the text reaches 4.5:1
   on the photo's average tone (cacao veil under light text, crema veil under dark text). */
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--scrim-color,var(--moft-cacao));opacity:var(--scrim,.3)}
.hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-4);position:relative}
/* Hero headline: plain solid text (the earlier gloss gradient and drop shadow were removed at the client's request) */
.hero__title{color:var(--moft-text-on-light)}
.hero--dark .hero__title{color:var(--moft-crema)}
/* Hero subheader: the occasion word cycles (cumpleaños, bodas, ...) to say we take orders for many events and for more
   than cakes; Fraunces italic 600
   (the kit's "accent line" role). The word list is stacked in one grid cell so the line never jumps. */
.hero__sub{max-width:52ch;text-wrap:balance;margin:0;font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:19px;line-height:1.45;letter-spacing:.01em;color:var(--moft-text-on-light)}
.hero--dark .hero__sub{color:var(--moft-crema)}
.hero__sub-lead{display:block}
.hero__rotor{display:inline-grid;vertical-align:bottom;overflow:hidden;padding:0 2px 3px}
.hero__rotor b{grid-area:1/1;white-space:nowrap;font-style:normal;font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--moft-caramelo-deep);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;opacity:0;animation:rotor-word 15s ease-in-out infinite}
.hero--dark .hero__rotor b{color:var(--moft-salty-caramel)}
.hero__rotor b:nth-child(1){animation-delay:0s}.hero__rotor b:nth-child(2){animation-delay:3s}.hero__rotor b:nth-child(3){animation-delay:6s}.hero__rotor b:nth-child(4){animation-delay:9s}.hero__rotor b:nth-child(5){animation-delay:12s}
@keyframes rotor-word{0%{opacity:0;transform:translateY(70%)}3%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-70%)}}
@media (prefers-reduced-motion:reduce){.hero__rotor b{animation:none}.hero__rotor b:first-child{opacity:1}}
.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}
/* Hero text: plain solid colour. On the dark film a hard ink shadow, the same cartoon outline the film uses. */
.hero--dark .hero__title,.hero--dark .hero__sub,.hero--dark .t-label{text-shadow:3px 4px 0 var(--moft-tiramisu)}
/* Main button on the dark film: a Crema ring so the Chocolate fill stands out from the dark brown behind it */
.hero--dark .btn-main{border-color:var(--moft-crema)}
/* Hero tag: in quotes, same colour as the rest of the hero text but a little fainter */
.hero .t-label{color:var(--moft-text-on-light);opacity:.78}
.hero--dark .t-label{color:var(--moft-crema)}
.hero .t-label::before{content:"\201C"}
.hero .t-label::after{content:"\201D"}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--moft-space-4);margin-top:var(--moft-space-4)}
/* Outline button for light grounds: mirror of the DS .moft-btn--outline-light (which is for dark brown only) */
.hero__title{max-width:28ch;text-wrap:balance;margin-top:var(--moft-space-2);font-size:calc(var(--moft-size-h1) * .72);line-height:1.1;font-weight:var(--moft-weight-black);letter-spacing:.03em}

/* ---------- Sections ---------- */
.sec{padding-block:var(--moft-space-6)}
.sec--feature{padding-top:var(--moft-space-5)}
/* Novedades + Siempre en vitrina: more vertical breathing room (section padding, heading gap, card interiors) */
.sec--roomy{padding-block:var(--moft-space-7)}
.sec--roomy .sec__head{margin-bottom:var(--moft-space-6)}
.sec--roomy .news{gap:var(--moft-space-4);padding:var(--moft-space-5) var(--moft-space-5) var(--moft-space-6)}
.sec--roomy .tile{gap:var(--moft-space-3);padding:var(--moft-space-4) var(--moft-space-4) var(--moft-space-5)}
.sec--roomy .tiles{row-gap:var(--moft-space-5)}
.sec__kicker{margin-bottom:var(--moft-space-3)}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--moft-space-4);margin-bottom:var(--moft-space-4)}
.sec__sub{margin:calc(-1 * var(--moft-space-3)) 0 var(--moft-space-4)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--moft-space-3)}

/* 2 · Featured news */
.feature{display:grid;gap:var(--moft-space-5)}
.feature__ph{aspect-ratio:4/3}
.feature__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-3)}
.feature__title{text-wrap:balance;font-size:var(--moft-size-h1);line-height:1.1;font-weight:var(--moft-weight-black);letter-spacing:.03em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--moft-space-5);margin-top:var(--moft-space-2)}

/* 3 · News rail (swipe on mobile) */
.rail{display:flex;gap:var(--moft-space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--moft-space-4));padding:0 var(--moft-space-4) var(--moft-space-3);scroll-padding-inline:var(--moft-space-4);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>li{scroll-snap-align:start;flex:0 0 auto}
.rail--news>li{width:min(78%,320px);display:flex}
.news{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-3);width:100%}
.news__ph{position:relative;align-self:stretch;aspect-ratio:4/3}
/* Fórmula nº on the photo's bottom-right corner, extra small. Colour follows the photo:
   wa.js samples the corner and adds .formula--on-dark (crema) or keeps the default (chocolate). */
.news__ph .moft-formula{position:absolute;right:var(--moft-space-2);bottom:var(--moft-space-2)}
.formula--xs{font-size:calc(var(--moft-size-label) * .75);letter-spacing:.1em;padding:4px 6px 2px;border-width:1.5px;line-height:1.2}
.formula--on-dark{color:var(--moft-crema)}
.news .t-small{margin-top:calc(-1 * var(--moft-space-2))}
.news__cta{align-self:flex-start;margin-top:auto}
/* Exclusiva label: the DS ships the marker icon (icons/marker-exclusiva.svg) but no pill class yet.
   Built with the DS label recipe in the icon's own family: light tint, deep text and shadow (4.65:1). */
.moft-pill--exclusiva{background:var(--moft-salty-caramel-light);color:var(--moft-salty-caramel-deep);box-shadow:var(--sh-pill) var(--moft-salty-caramel-deep)}

/* 4 · Vitrina tiles */
/* Flex rows, centred: the last short row sits in the middle. Phone: 2 per row; desktop: --per per row (set by live.js, 2 rows max) */
.tiles{--gap:var(--moft-space-3);--cols:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.tiles>li{display:flex;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-2);width:100%;padding:var(--moft-space-3)}
/* Price: quiet text on the weight row instead of the DS sticker; promo shows old price struck */
.tile__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--moft-space-2);width:100%;margin-top:auto}
.tile__price{font-size:var(--moft-size-body);font-weight:var(--moft-weight-black);color:var(--moft-text-brand-on-light);font-variant-numeric:tabular-nums;white-space:nowrap}
.tile__price--promo{color:var(--moft-promo-text-on-light)}
.tile__price--promo s{font-size:var(--moft-size-small);font-weight:var(--moft-weight-medium);color:var(--moft-chocolate);margin-right:var(--moft-space-1)}
/* Promo badge: round Oferta pill with the percent icon on the photo's bottom-right corner */
.promo-dot{position:absolute;right:var(--moft-space-2);bottom:var(--moft-space-2);display:grid;place-items:center;width:36px;height:36px;border-radius:var(--moft-radius-pill);background:var(--moft-strawberry-light);box-shadow:var(--sh-pill) var(--moft-strawberry-deep)}
.promo-dot img{width:24px;height:24px}
/* Category pill under the photo: solid Whipped Cream, Chocolate ink, same hard shadow as the other pills */
.cat-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 var(--moft-space-3) 0 var(--moft-space-2);border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-pill);background:var(--moft-whipped-cream);color:var(--moft-chocolate);box-shadow:var(--sh-pill) var(--moft-chocolate);font-size:13px;font-weight:var(--moft-weight-black);letter-spacing:.03em;line-height:1;white-space:nowrap}
.cat-pill{max-width:calc(100% - 4px)}
.cat-pill img{width:16px;height:16px;flex:none}
/* Very narrow phones: the pill shrinks to its box (smaller type, no icon, wraps if it must) */
@media (max-width:359px){.cat-pill{font-size:11px;padding:3px var(--moft-space-2);white-space:normal;line-height:1.15}.cat-pill img{display:none}}
.tile__ph{position:relative;align-self:stretch;aspect-ratio:1/1;margin-bottom:var(--moft-space-1)}
.tile .t-small{margin-top:calc(-1 * var(--moft-space-1))}
/* Smaller Fórmula nº pill for cards (DS .moft-formula is 12px with 5px 12px padding) */
.formula--sm{font-size:calc(var(--moft-size-label) * .85);letter-spacing:.1em;padding:3px var(--moft-space-2);border-width:1.5px}
.tile .moft-formula{white-space:nowrap;max-width:calc(100% - 4px);margin-top:calc(-1 * var(--moft-space-1))}
/* Very narrow phones: the Fórmula pill shrinks to its box like the category pill */
@media (max-width:359px){.tile .moft-formula{font-size:10px;letter-spacing:.06em;white-space:normal;line-height:1.15}}

/* 5 · Order steps */

/* 6 · Workshop strip */
.rail--photos>li{width:140px;height:170px}
.rail--photos>li:nth-child(5){display:none}

/* 7 · Visit */
.visit{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "m" "i" "l";gap:var(--moft-space-4);align-items:start}
.visit__text{display:contents}
.visit__text>.visit__head{grid-area:t;margin-bottom:0}
/* The map: the real streets round the shop (moft-map.svg, OpenStreetMap data in brand colours), framed like the hero box
   (3px Cacao border, hard Chocolate deep shadow), a Cacao pin with a Salty Caramel dot on the plaza, and the photos'
   tamed film on top (photo-film.js). The whole map is the link to Google Maps; hovering lifts it like the buttons. */
.visit__map{grid-area:m;position:relative;display:block;height:180px;overflow:hidden;border:3px solid var(--moft-cacao);border-radius:var(--moft-radius-card);background:var(--moft-galleta);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);transition:transform .12s ease,box-shadow .12s ease}
.visit__map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.visit__pin{position:absolute;z-index:2;left:50%;top:50%;width:34px;height:auto;transform:translate(-50%,-100%);overflow:visible;filter:drop-shadow(3px 4px 0 var(--moft-chocolate-deep))}
.visit__pin path{fill:var(--moft-cacao);stroke:var(--moft-salty-caramel);stroke-width:2.5}
.visit__pin circle{fill:var(--moft-salty-caramel)}
.visit__osm{position:absolute;z-index:2;right:0;bottom:0;padding:2px 8px;border-top-left-radius:var(--moft-radius-small);background:var(--moft-whipped-cream);color:var(--moft-text-brand-on-light);font-size:11px;font-weight:var(--moft-weight-bold);letter-spacing:.02em;line-height:1.4}
/* The load button, its note and the directions link sit under the address; once tapped the Google map replaces it (live.js) */
.visit__actions{grid-area:l;display:grid;justify-items:start;gap:var(--moft-space-2)}
.visit__map .map__frame{position:absolute;inset:0;width:100%;height:100%}
.visit__info{grid-area:i;display:grid;gap:var(--moft-space-1)}
/* The line under the address stays narrower than the address itself */
.visit__note{max-width:36ch;text-wrap:pretty}


/* ---------- Footer (WaveFooter) ---------- */
.foot{margin-top:var(--moft-space-7)}
/* Extra bottom room so the floating WhatsApp button never covers the last line */
.moft-footer{padding-inline:0;padding-bottom:var(--moft-space-9)}
/* Phones: one centred column. Logo, then the details (hours, contact), then the copyright and the take-away pill */
.foot__inner{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;font-size:var(--moft-size-small);font-weight:var(--moft-weight-medium)}
.foot__logo{display:block;width:224px;height:auto;margin-bottom:var(--moft-space-6)}
.foot__side{display:grid;justify-items:center;gap:var(--moft-space-5)}
.foot__info{display:grid;justify-items:center;gap:var(--moft-space-1)}
.foot a{color:var(--moft-crema);text-underline-offset:3px}
.foot__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:var(--moft-space-4)}
.foot__links a{display:inline-flex;align-items:center;min-height:44px}
.foot__links a[hidden]{display:none}
.foot a:hover{color:var(--moft-salty-caramel)}
/* Footer language selector: same as the header one, without the pill */
.foot__lang{display:flex;align-items:center;justify-content:center;gap:var(--moft-space-2);margin:0;font-weight:var(--moft-weight-black);color:var(--moft-chocolate-light)}
.foot__lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--moft-space-1);letter-spacing:.06em}
.foot__lang a[aria-current]{color:var(--moft-crema);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width:768px){.foot__lang{justify-content:flex-start}.foot__lang a{min-height:24px}}
.foot__lang a{text-decoration:none;color:var(--moft-chocolate-light)}
.foot__lang a[aria-current]{color:var(--moft-crema)}
.foot__lang a:hover{color:var(--moft-salty-caramel)}
/* The last line, centred across the whole footer */
.foot__copy{justify-self:stretch;margin-top:var(--moft-space-7);padding-top:var(--moft-space-3);border-top:1px solid var(--moft-chocolate-light);color:var(--moft-salty-caramel)}
.foot__hours{display:flex;flex-direction:column;align-items:center}
/* Phones: the take-away pill leads the hours block, just under the logo; from 640px it sits under the week */
.foot__tag{order:-1;margin-bottom:var(--moft-space-5)}
.foot__tag[hidden]{display:none}
.foot__tag span{display:inline-flex;align-items:center;padding:var(--moft-space-2) var(--moft-space-4);border-radius:var(--moft-radius-pill);font-weight:var(--moft-weight-black);line-height:1.2;background:var(--moft-salty-caramel);color:var(--moft-tiramisu);box-shadow:2px 4px 0 var(--moft-salty-caramel-deep)}
/* Opening hours: days with the same hours share a line, the day in Crema over its times in Salty Caramel
   (the two approved text colours on dark). */
.foot__h{margin-bottom:var(--moft-space-2);font-size:var(--moft-size-label);line-height:1.2;font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase;color:var(--moft-salty-caramel)}
.foot__week{display:grid;gap:var(--moft-space-2);margin:0}
.foot__week dt{font-weight:var(--moft-weight-black);color:var(--moft-crema)}
.foot__week dd{margin:0;white-space:nowrap;color:var(--moft-salty-caramel);font-variant-numeric:tabular-nums}
.foot__week dd span+span::before{content:"·";margin-inline:var(--moft-space-2)}

/* Tablets: still stacked and centred, but hours and contact sit side by side once there is room */
@media (min-width:640px){
  .foot__side{grid-template-columns:auto auto;justify-content:center;column-gap:var(--moft-space-7);align-items:stretch;justify-items:start;text-align:left}
  /* Hours block dissolved into the side grid so the contact column can share the schedule's row only: title above and
     take-away pill below stay outside it, and the contact lines are spread evenly from the schedule's top to its bottom */
  .foot__hours{display:contents}
  .foot__side{grid-template-rows:auto auto auto;align-items:stretch}
  .foot__h{grid-column:1;grid-row:1}
  .foot__week{grid-column:1;grid-row:2;align-content:center}
  .foot__tag{grid-column:1;grid-row:3;justify-self:start}
  .foot__info{grid-column:2;grid-row:2;justify-items:start;align-content:space-between}
  .foot__links{justify-content:flex-start}
  .foot__hours{align-items:flex-start}
  .foot__tag{order:0;margin:var(--moft-space-4) 0 0}
}
/* Desktop: the logo on the left, the details block (hours + contact) on the right. The logo is exactly as tall as that
   block (wa.js measures it into --foot-side-h; 169px is the full brand's minimum), centred on it and lifted a few pixels:
   the lockup is thin on top and heavy at the base, so true centre looks low. From 1024px so the logo's width can never
   squeeze the block (and make it taller, and the logo with it). */
@media (min-width:1024px){
  .foot__inner{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:stretch;text-align:left}
  .foot__logo{grid-column:1;grid-row:1;align-self:center;width:auto;height:var(--foot-side-h,169px);min-height:169px;max-height:240px;margin:0 var(--moft-space-6) 0 0;transform:translateY(-3%)}
  .foot__side{grid-column:2;grid-row:1;justify-self:end;justify-content:end;min-height:169px;align-content:center}
  .foot__links a{min-height:24px}
  .foot__copy{grid-column:1/-1;grid-row:2;text-align:center}
}

/* ---------- Floating WhatsApp + choice sheet ---------- */
.fab{position:fixed;z-index:15;right:var(--moft-space-4);bottom:calc(var(--moft-space-4) + env(safe-area-inset-bottom))}

.sheet{width:100%;max-width:480px;margin:auto auto 0;padding:var(--moft-space-5) var(--moft-space-4) calc(var(--moft-space-6) + env(safe-area-inset-bottom));border:0;border-radius:var(--moft-radius-card) var(--moft-radius-card) 0 0;background:var(--moft-crema);color:var(--moft-text-on-light);font-family:var(--moft-font)}
/* Choice sheet: slides up from the bottom on phones (iOS-like drawer curve, 400ms), fades and scales on desktop. */
.sheet{opacity:0;transform:translateY(100%);transition:opacity .25s var(--moft-ease-out),transform .4s var(--moft-ease-drawer),overlay .4s allow-discrete,display .4s allow-discrete}
.sheet[open]{display:grid;gap:var(--moft-space-4);opacity:1;transform:none}
@starting-style{.sheet[open]{opacity:0;transform:translateY(100%)}}
.sheet::backdrop{transition-duration:.4s}
@media (prefers-reduced-motion:reduce){.sheet{transform:none;transition:opacity .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}@starting-style{.sheet[open]{transform:none}}}
.sheet::backdrop{background:color-mix(in srgb,var(--moft-tiramisu) 60%,transparent)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--moft-space-4)}
.sheet__opt{display:grid;gap:var(--moft-space-4);justify-items:start}

/* ---------- Desktop ---------- */
@media (min-width:768px){
  .wrap{padding-inline:var(--moft-space-7)}
  .hero{padding-top:calc(8.52vw + var(--moft-space-6));padding-bottom:var(--moft-space-4)}
  .hero__box{padding:var(--moft-space-7) var(--moft-space-6);min-height:300px;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--moft-space-7)}
  .sec{padding-block:var(--moft-space-7)}
  .sec--feature{padding-top:var(--moft-space-6)}
  .sec--roomy{padding-block:var(--moft-space-8)}
  .sec--roomy .news{padding:var(--moft-space-5) var(--moft-space-5) var(--moft-space-6)}
  .sec--roomy .tile{padding:var(--moft-space-5) var(--moft-space-5) var(--moft-space-6)}
  .rail{overflow:visible;margin-inline:0;padding:0}
  .rail--news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-4)}
  .rail--news>li{width:auto}
  .tiles{--gap:var(--moft-space-4);--cols:2}
  .tile{padding:var(--moft-space-5)}
  .rail--photos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--moft-space-3)}
  .rail--photos>li{width:auto;height:220px}
  .rail--photos>li:nth-child(5){display:flex}
  .visit{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:none;gap:var(--moft-space-6);align-items:center}
  .visit__map{grid-area:auto;width:auto;height:auto;min-height:340px}
  .visit__pin{width:44px}
  .visit__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-3)}
  .visit__head{align-self:stretch}
  .sheet{margin:auto;border-radius:var(--moft-radius-card);padding:var(--moft-space-6);transform:scale(.96);transition:opacity .25s var(--moft-ease-out),transform .25s var(--moft-ease-out),overlay .25s allow-discrete,display .25s allow-discrete}
  .sheet[open]{transform:none}
  @starting-style{.sheet[open]{opacity:0;transform:scale(.96)}}
  .fab{right:var(--moft-space-6);bottom:var(--moft-space-6)}
}
@media (min-width:1024px){
  .tiles{--cols:var(--per,4)}
  .hdr{padding-inline:var(--moft-space-7)}
      .hero__title{font-size:var(--moft-size-display);line-height:1.05}
  .hero__sub{font-size:24px}
  .order{padding:var(--moft-space-8) var(--moft-space-7);gap:var(--moft-space-7)}
  .order__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-6)}
  .order-step__n{width:56px;height:56px;font-size:30px}
  .order-step__path{display:block;flex:1;height:0;margin:0 var(--moft-space-3);border-top:3px dotted var(--moft-salty-caramel-deep)}
  .order-step:not(:last-child)::after{display:none}
  .feature{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--moft-space-6);align-items:center}
  .feature__ph{aspect-ratio:auto;min-height:420px}
  .feature__title{font-size:var(--moft-size-display);line-height:1.05}
}

/* ---------- Desktop header: needs ~960px for logo + full menu + language without overlap ---------- */
@media (min-width:1024px){
  /* Logo on the left edge, menu exactly centered, language on the right edge (within .wrap limits) */
  .hdr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--moft-space-4)}
  .hdr-logo{justify-self:start}
  .hdr-lang{justify-self:end}
  .hdr-menu{display:none}
  .hdr-nav{display:inline-flex;gap:var(--moft-space-1);padding:var(--moft-space-1)}
  /* Nav links: 2px transparent border reserved (padding trimmed to match, so sizes don't change).
     Hover: Salty Caramel fill (the menu's own border colour) with dark text. Pressed: no fill, Salty Caramel
     border, Whipped Cream (lightest) text. */
  .hdr-nav a{padding:calc(var(--moft-space-3) - 2px) calc(var(--moft-space-4) - 2px);border:2px solid transparent;border-radius:var(--moft-radius-pill);text-decoration:none;white-space:nowrap}
  .hdr-nav a:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
  .hdr-nav a[aria-current]{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
  .hdr-nav a:active,.hdr-nav a[aria-current]:active{background:transparent;border-color:var(--moft-salty-caramel);color:var(--moft-whipped-cream)}
  .hdr-logo{padding:9px 38px 14px}
  .hdr-logo img{width:92px}
  /* Same height as the menu pill: 4px pill padding + 12px link padding, like .hdr-nav */
  .hdr-lang{padding:var(--moft-space-1) var(--moft-space-2);background:var(--moft-cacao);border-color:var(--moft-salty-caramel);box-shadow:var(--moft-shadow-glaze)}
  .hdr-lang a{padding:var(--moft-space-3) var(--moft-space-2)}
}

/* ---------- Buttons: roles and states ----------
   Roles: .btn-main = the page's main CTA (normally the hero "Encargar tarta"; can vary by page/position),
   .btn-secondary = "Ver catálogo", .btn-generic = every other button.
   Looks: main = DS chocolate fill (no border); secondary = Salty Caramel fill; generic = dark outline.
   Hover and press only swap solid background and text colours (no opacity, no shape change);
   pressed keeps the hover colours and drops the shadow (DS press offset). */
/* Button labels are Title Case, written by hand in every language (client choice): main words capitalised, small
   words lowercase — "Ver el Catálogo", "Vezi Catalogul", "See the Catalogue". No CSS casing, so "el", "o", "the" stay small. */
.moft-btn{text-transform:none}
.hdr-menu,.hdr-nav a{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}
@media (prefers-reduced-motion:reduce){.hdr-menu,.hdr-nav a{transition:none}}

/* Main: chocolate fill, hover/pressed light sand (Galleta) with chocolate text, as originally */
/* Main and secondary: no colour change on hover; they get the kit's lift-and-press animation (components.css). */

/* Secondary ("Ver catálogo"): Salty Caramel fill, Tiramisu text; hover/pressed the lighter tint of the same family */
.btn-secondary{--btn-shadow:var(--moft-chocolate-deep);background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}

/* Generic: real 3px dark border in the shadow's colour (padding trimmed so the size never changes; the fill stops at
   the padding box), dark text. On hover and press it only moves (the kit's lift-and-press); no colour or border change. */
.btn-generic{--bw:3px;position:relative;border:var(--bw) solid var(--moft-chocolate-deep);padding:calc(14px - var(--bw)) calc(24px - var(--bw));background:transparent;background-clip:padding-box;color:var(--moft-chocolate-deep)}
.btn-main{--btn-shadow:var(--moft-chocolate-deep)}
/* Main and secondary: a real 3px border in the shadow's colour (padding trimmed by 3px so the size doesn't change; the fill stops at the border) */
.btn-main,.btn-secondary{border:3px solid var(--btn-shadow);padding:11px 21px;background-clip:padding-box}
.moft-btn:focus-visible{border-radius:var(--moft-radius-pill)}
/* The floating WhatsApp button keeps the generic look everywhere. .btn-generic sets position:relative, so fixed is restated here
   (that clash is what left it sitting in the footer). */
.fab.btn-generic{position:fixed;background:var(--moft-crema)}
/* Header pill buttons */
.hdr-menu:hover,.hdr-menu:active{background:var(--moft-chocolate);color:var(--moft-whipped-cream)}

/* Short landscape screens (a phone on its side): the pinned header and drip would take about a third of the height, so it
   scrolls away there. Trial, to be reviewed. */
@media (orientation:landscape) and (max-height:500px){.hdr-band{position:relative}}

/* Paused while off screen (class set by wa.js) */
.is-paused,.is-paused *,.is-paused::before,.is-paused::after,.is-paused *::before,.is-paused *::after{animation-play-state:paused !important}

/* ---------- Floating WhatsApp button: two grounds (wa.js adds .fab--on-dark when the section behind it is dark) ----------
   Light ground: dark solid fill (the shadow's own colour) with a Whipped Cream line cut inside the edge, plus the hard shadow.
   Dark ground: the crema fill with the dark outline (.fab.btn-generic above). Hover and press only move, as in the kit. */
.fab{transition:transform .12s ease,box-shadow .12s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.fab:not(.fab--on-dark){--btn-shadow:var(--moft-chocolate-deep);background:var(--moft-chocolate-deep);color:var(--moft-whipped-cream);border-color:var(--moft-chocolate-deep);box-shadow:inset 0 0 0 2px var(--moft-whipped-cream),2px 4px 0 var(--btn-shadow)}
@media (hover:hover){.fab:not(.fab--on-dark):hover{box-shadow:inset 0 0 0 2px var(--moft-whipped-cream),3px 5px 0 var(--btn-shadow)}}
.fab:not(.fab--on-dark):focus-visible{box-shadow:inset 0 0 0 2px var(--moft-whipped-cream),3px 5px 0 var(--btn-shadow)}
.fab:not(.fab--on-dark):active{box-shadow:inset 0 0 0 2px var(--moft-whipped-cream),0 1px 0 var(--btn-shadow)}

/* ---------- Promotion button (.btn-oferta): the Oferta pill's own colours (Strawberry light fill, Strawberry deep text, border and shadow
   = 6.0:1) with the kit's lift-and-press animation. Used for every button on a promotion, wherever contrast allows. */
.btn-oferta{--btn-shadow:var(--moft-strawberry-deep);background:var(--moft-strawberry-light);color:var(--moft-strawberry-deep);border:3px solid var(--moft-strawberry-deep);padding:11px 21px;background-clip:padding-box}

/* ---------- Floating call button: the label swaps between two phrases in one grid cell, so the width never jumps ---------- */
.fab__rotor{display:inline-grid;text-align:center;overflow:hidden}
/* No animation-delay (a delayed word shows at full opacity until its turn and overlaps the first). Both words share one 6s cycle:
   every page opens on "Llámanos" alone, holds it, swaps to "Ring, ring" at 45-50%, and swaps back at 95-100%. */
.fab__rotor b{grid-area:1/1;font-weight:inherit;animation:6s ease-in-out infinite}
.fab__rotor b:nth-child(1){animation-name:fab-word-a}
.fab__rotor b:nth-child(2){animation-name:fab-word-b;opacity:0}
@keyframes fab-word-a{0%,43%{opacity:1;transform:none}48%{opacity:0;transform:translateY(-80%)}49%,95%{opacity:0;transform:translateY(80%)}100%{opacity:1;transform:none}}
@keyframes fab-word-b{0%,45%{opacity:0;transform:translateY(80%)}50%,93%{opacity:1;transform:none}98%{opacity:0;transform:translateY(-80%)}99%,100%{opacity:0;transform:translateY(80%)}}
@media (prefers-reduced-motion:reduce){.fab__rotor b,.fab__rotor b:nth-child(n){animation:none;opacity:0}.fab__rotor b:first-child{opacity:1}}


/* ---------- Promotion price: same size as every other price, but set in the Oferta pill's own colours so it stands out ---------- */
.tile__meta{flex-wrap:wrap;row-gap:var(--moft-space-1)}
.tile__price--promo{display:inline-flex;align-items:center;gap:var(--moft-space-2)}
.promo-price{display:inline-block;padding:2px 9px;border-radius:var(--moft-radius-pill);background:var(--moft-strawberry-light);color:var(--moft-strawberry-deep);box-shadow:var(--sh-pill) var(--moft-strawberry-deep);font-weight:900;font-variant-numeric:tabular-nums}

/* ---------- Mostrador: the day's board. Status tag on every piece, a useful action under each, a live summary on top ---------- */
.ob-live{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--moft-space-3);margin:calc(-1 * var(--moft-space-2)) 0 var(--moft-space-5)}
.ob-live__date{margin:0;font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:20px;text-transform:none;color:var(--moft-text-brand-on-light)}
.ob-live__count{display:flex;flex-wrap:wrap;gap:var(--moft-space-2);margin:0;padding:0;list-style:none}
.ob-sum{padding:4px 12px;border-radius:var(--moft-radius-pill);border:2px solid var(--moft-chocolate);font-size:var(--moft-size-small);font-weight:900;letter-spacing:.04em;color:var(--moft-chocolate)}
.ob-sum b{font-variant-numeric:tabular-nums}
.ob-sum--horno{background:var(--moft-caramelo-light);border-color:var(--moft-caramelo-deep);color:var(--moft-caramelo-deep)}
.ob-sum--disponible{background:var(--moft-chocolate);color:var(--moft-crema)}
.ob-sum--agotado{border-style:dashed}

.ob{display:flex;gap:var(--moft-space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--moft-space-4);margin:0 calc(-1 * var(--moft-space-4));padding:0 var(--moft-space-4) var(--moft-space-3);scrollbar-width:none;list-style:none}
.ob::-webkit-scrollbar{display:none}
.ob-card{flex:0 0 74%;max-width:300px;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;background:var(--moft-whipped-cream);border-radius:var(--moft-radius-card)}
.ob-card--big{flex-basis:86%;max-width:340px}
.ob-card__ph{flex:1 1 auto;min-height:180px;border-radius:0}
.ob-card--big .ob-card__ph{min-height:260px}
.ob-card__body{display:grid;gap:var(--moft-space-1);padding:var(--moft-space-4) var(--moft-space-4) var(--moft-space-3)}
.ob-card__t{margin:0;font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:var(--moft-size-h3);line-height:1.25}
.ob-card--big .ob-card__t{font-size:24px;font-weight:900}
.ob-card__meta{margin:0;font-size:var(--moft-size-small);font-weight:600;color:var(--moft-text-brand-on-light)}
.ob-card__act{justify-self:start;margin-top:var(--moft-space-1)}
/* The format above the name (a Fórmula can be on the board as a porción and as a tarta entera); the links share a row */
.ob-card__fmt{margin:0;font-size:12px;font-weight:var(--moft-weight-black);letter-spacing:.06em;text-transform:uppercase;color:var(--moft-text-brand-on-light)}
.ob-card__acts{display:flex;flex-wrap:wrap;gap:var(--moft-space-1) var(--moft-space-4)}
.ob-card__acts .ob-card__act{margin-top:var(--moft-space-1)}
.ob-card[data-status="agotado"] .ob-card__t{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--moft-chocolate-light)}
.ob-card[data-status="agotado"] img{filter:grayscale(.7)}

.ob-tag{position:absolute;left:var(--moft-space-3);top:var(--moft-space-3);z-index:2;display:inline-flex;align-items:center;gap:var(--moft-space-2);padding:6px 14px 6px 10px;border-radius:var(--moft-radius-pill);font-size:var(--moft-size-small);font-weight:900;letter-spacing:.04em;text-transform:none;box-shadow:var(--sh-pill) var(--moft-chocolate-deep)}
.ob-tag i{width:10px;height:10px;border-radius:50%;flex:none}
.ob-tag--horno{background:var(--moft-caramelo-light);color:var(--moft-caramelo-deep)}
.ob-tag--horno i{background:var(--moft-caramelo);animation:ob-pulse 1.6s ease-in-out infinite}
.ob-tag--disponible{background:var(--moft-chocolate);color:var(--moft-crema)}
.ob-tag--disponible i{background:var(--moft-salty-caramel)}
.ob-tag--agotado{background:var(--moft-galleta-light);color:var(--moft-chocolate);box-shadow:var(--sh-pill) var(--moft-chocolate-light)}
.ob-tag--agotado i{border:2px solid var(--moft-chocolate)}
@keyframes ob-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.ob-tag--horno i{animation:none}}

@media (min-width:1024px){
  .ob{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,minmax(260px,auto));gap:var(--moft-space-4);overflow:visible;margin:0;padding:0}
  .ob-card,.ob-card--big{flex:none;max-width:none}
  .ob-card--big{grid-row:1/3}
  .ob-card--big .ob-card__ph{min-height:420px}
  .ob-card__body{padding:var(--moft-space-4) var(--moft-space-5) var(--moft-space-4)}
}

/* ---------- Plain tags (shared): Noticia, Agotada / Agotado hoy, Sabores ---------- */
/* Noticia tag: a plain word, not a marker (the kit has no Noticia marker). Outline only, no icon, no sticker shadow. */
.tag-noticia,.tag-agotada{display:inline-flex;align-items:center;min-height:30px;padding:0 var(--moft-space-3);border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-pill);font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;line-height:1;color:var(--moft-chocolate)}
/* Agotada: dashed, the same quiet outline */
.tag-agotada{border-style:dashed}

/* ---------- Inner pages: page head (title + accent line, centred) ---------- */
/* Room for the visible part of the header drip, same as the Home hero */
.pagehead{padding-top:calc(8.52vw + var(--moft-space-5));padding-bottom:var(--moft-space-4)}
.pagehead{text-align:center}
.pagehead__sub{margin-inline:auto}
.pagehead__t{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-h1);line-height:1.05;letter-spacing:.02em;color:var(--moft-text-on-light)}
/* The accent line (Fraunces italic 600, WONK 1), the same role as the Home hero subheader */
.pagehead__sub{max-width:46ch;margin-top:var(--moft-space-3);text-wrap:balance;font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:19px;line-height:1.45;letter-spacing:.01em;color:var(--moft-text-brand-on-light)}

/* ---------- Inner pages: chip bar (Novedades filters, Catálogo categories): centred, in the page flow (they scroll away with the page); one floating pill, like the header pills but on the light ground ---------- */
.filters{padding-block:var(--moft-space-2)}
.filters .wrap{display:flex;justify-content:center}
.filters__bar{display:inline-flex;max-width:100%;gap:var(--moft-space-1);padding:var(--moft-space-1);overflow-x:auto;scrollbar-width:none;background:var(--moft-whipped-cream);border:2px solid var(--moft-cacao);border-radius:var(--moft-radius-pill);box-shadow:var(--sh-pill) var(--moft-chocolate-deep)}
.filters__bar::-webkit-scrollbar{display:none}
/* Chips are toggles, not marker labels: text only, no icon, no sticker shadow.
   Rest: Tiramisu text. Hover: Salty Caramel fill. Chosen: Chocolate fill, Crema text (the kit's button pair).
   Pressed: no fill, Chocolate border and text. The 2px border is always reserved, so the size never changes. */
.filters__chip{flex:none;min-height:44px;padding:0 calc(var(--moft-space-3) + 1px);border:2px solid transparent;border-radius:var(--moft-radius-pill);background:transparent;color:var(--moft-text-on-light);font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.04em;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
@media (hover:hover){.filters__chip:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}}
.filters__chip[aria-pressed=true]{background:var(--moft-chocolate);color:var(--moft-crema)}
.filters__chip:active,.filters__chip[aria-pressed=true]:active{background:transparent;border-color:var(--moft-chocolate);color:var(--moft-chocolate)}
.filters__chip:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:1px;border-radius:var(--moft-radius-pill)}
@media (prefers-reduced-motion:reduce){.filters__chip{transition:none}}
/* Phones: the bar spans the column and the five chips share it, so none hides off the edge.
   On the very narrowest screens it still scrolls sideways as a fallback. */
@media (max-width:479px){
  .filters__bar{display:flex;width:100%;gap:0}
  .filters__chip{flex:1 1 auto;padding:0 var(--moft-space-1);font-size:13px;letter-spacing:.02em}
}
@media (max-width:359px){.filters__chip{padding:0 3px;font-size:12px;letter-spacing:.01em}}

@media (min-width:768px){.pagehead{padding-top:calc(8.52vw + var(--moft-space-6))}}
@media (min-width:1024px){.pagehead__t{font-size:var(--moft-size-display);line-height:1}.pagehead__sub{font-size:24px}}

/* ---------- Promotions: on every page, a promotion's title is Strawberry deep (offer text on light, 5.5:1) ---------- */
.is-oferta :is(.feature__title,.t-h3){color:var(--moft-promo-text-on-light)}

/* ---------- Vitrina tiles: weight beside the Fórmula nº (as in the catalogue), no price, the whole card is the link ---------- */
.tile__id{display:flex;flex-wrap:wrap;align-items:center;gap:var(--moft-space-1) var(--moft-space-3);margin-top:calc(-1 * var(--moft-space-1))}
.tile__id .moft-formula,.tile__id .t-small{margin-top:0}
.tile__desc{font-size:15px;line-height:1.45;margin:0}
/* "Siempre en vitrina": the formats of the Receta, icon and word inside each pill */
.tile__fmts{display:flex;flex-wrap:wrap;gap:6px}
a.tile__link,.tile__link{color:inherit;text-decoration:none}
.tile__link::after{content:"";position:absolute;inset:0;border-radius:var(--moft-radius-card)}
.tile:has(.tile__link){position:relative;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.tile:has(.tile__link):hover{transform:translate(-2px,-3px);box-shadow:var(--sh-panel) var(--moft-chocolate-deep)}}
.tile:has(.tile__link:focus-visible){transform:translate(-2px,-3px);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);outline:3px solid var(--moft-caramelo-deep);outline-offset:3px}
.tile:has(.tile__link):active{transform:translate(1px,2px);box-shadow:1px 1px 0 var(--moft-chocolate-deep)}
.tile__link:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.tile:has(.tile__link){transition:none}}

/* Buttons: the hard shadow (2px right, 4px down) counts as part of the button, so anything centred against a button
   is centred against pill + shadow. Fixed buttons keep their own position. */
.moft-btn:not(.fab){margin:0 2px 4px 0}

/* ---------- Motion added in the animation pass ---------- */
/* Page-to-page (browsers without support just navigate). The same three beats between ANY two pages:
   1. the old page fades out into the same neutral ground every time (the crema texture, .27s);
   2. the new page's own ground fades in (.26s, overlapping the end of beat 1, so the screen is only bare for a moment);
   3. the new content lifts 120px into place over 1.12s on a gentle-start, long-settle curve while it fades in.
   The header, cookie bar and call button are held still throughout. The lift only runs when the page arrived through the
   transition (home.css's .vt-in, set by a script in each <head>), so a reload or a first visit does not slide the page.
   <main> and the footer move as normal animations of the live page; the snapshots only hand over.
   (The texture ground stays inside the page snapshot: a separately named ground is painted ABOVE the page snapshots, so being
   opaque it covered both pages for the whole transition, and the content only popped in when the transition ended.) */
:root{--lift-ease:cubic-bezier(.25,.1,.15,1);--lift-dur:1.12s;--lift-by:120px;--lift-delay:.32s}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hdr-band{view-transition-name:hdr}
  .ck{view-transition-name:ck}
  .fab{view-transition-name:fab}
  ::view-transition{background:var(--moft-crema) url("moft-design-system/elements/moft_texture_crema.png") center/cover no-repeat}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation:none}
  ::view-transition-old(root){animation:root-out .272s cubic-bezier(.45,0,.55,1) both}
  ::view-transition-new(root){animation:root-in .264s cubic-bezier(.45,0,.55,1) .224s both}
  /* Held still: the new one is simply swapped in over the old, with no crossfade of their own (two crossfading copies of
     the same pixels flicker). The header only fades its new copy in, over the old, so the current page's pill changes gently. */
  ::view-transition-old(fab),::view-transition-new(fab),
  ::view-transition-old(ck),::view-transition-new(ck),
  ::view-transition-old(hdr){animation:none;mix-blend-mode:normal}
  ::view-transition-new(hdr){animation:hdr-in .28s ease both;mix-blend-mode:normal}
  /* If one of them exists on only one of the two pages, it fades instead of blinking */
  ::view-transition-old(ck):only-child,::view-transition-old(fab):only-child{animation:fade-out .24s ease both}
  ::view-transition-new(ck):only-child,::view-transition-new(fab):only-child{animation:fade-in .24s ease both}
  .vt-in :is(main,.foot){animation:page-rise var(--lift-dur) var(--lift-ease) var(--lift-delay) backwards,page-fade .72s ease-out var(--lift-delay) backwards}
}
@keyframes page-rise{from{transform:translateY(var(--lift-by))}to{transform:none}}
@keyframes page-fade{from{opacity:0}to{opacity:1}}
@keyframes root-in{from{opacity:0}to{opacity:1}}
@keyframes root-out{from{opacity:1}to{opacity:0}}
@keyframes hdr-in{from{opacity:0}to{opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
/* Scroll reveal for the other home sections (wa.js tags them .rv and adds .is-in once, as they enter the screen). */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .35s var(--moft-ease-out) calc(var(--i,0) * 60ms),transform .35s var(--moft-ease-out) calc(var(--i,0) * 60ms)}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none}}
/* Photos fade in when they finish loading instead of popping in (wa.js adds .img-wait while one loads). */
img.img-wait{opacity:0}
img{transition:opacity .3s var(--moft-ease-out)}
/* Horizontal rails: a soft edge on the side that still has more to scroll (wa.js sets data-more). */
.rail[data-more],.ob[data-more]{--edge:28px}
.rail[data-more=end],.ob[data-more=end]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--edge)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--edge)),transparent)}
.rail[data-more=start],.ob[data-more=start]{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--edge));mask-image:linear-gradient(to right,transparent,#000 var(--edge))}
.rail[data-more=both],.ob[data-more=both]{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent)}
/* Floating button: first visit only, scales and fades in after the page has settled (fill 'backwards' keeps its hover/press working). */
@keyframes fab-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.fab--enter{animation:fab-in .35s var(--moft-ease-out) .6s backwards}
@media (prefers-reduced-motion:reduce){.fab--enter{animation:none}}
/* Toggle chips (Novedades filters, cake picker): the chosen fill is one sliding pill behind the labels. */
.has-ind{position:relative}
.has-ind>.filters__chip,.has-ind>.cake-pick__btn{position:relative;z-index:1}
.chip-ind{position:absolute;left:0;top:0;z-index:0;border-radius:var(--moft-radius-pill);background:var(--moft-chocolate);pointer-events:none;transition:transform .3s var(--moft-ease-in-out),width .3s var(--moft-ease-in-out),height .3s var(--moft-ease-in-out)}
.chip-ind.is-still{transition:none}
.has-ind .filters__chip[aria-pressed=true],.has-ind .cake-pick__btn[aria-pressed=true]{background:transparent;color:var(--moft-crema)}
/* While a chosen chip is pressed the kit shows it unfilled (outline), so the pill steps aside for that moment. */
.has-ind:has(.filters__chip[aria-pressed=true]:active,.cake-pick__btn[aria-pressed=true]:active) .chip-ind{visibility:hidden}
.has-ind .filters__chip[aria-pressed=true]:active,.has-ind .cake-pick__btn[aria-pressed=true]:active{background:transparent;border-color:var(--moft-chocolate);color:var(--moft-chocolate)}
@media (prefers-reduced-motion:reduce){.chip-ind{transition:none}}

/* ---------- Vitrina tiles: the product on a turning 1930s sunburst stage ----------
   the photo sits in a round plate that floats over its shadow and grows on hover */
.tile__ph.stage{display:grid;place-items:center;padding:0;overflow:hidden;isolation:isolate;background:var(--moft-salty-caramel-light);border:3px solid var(--moft-chocolate-deep);box-shadow:inset 0 0 0 3px var(--moft-salty-caramel-light),inset 0 0 0 5px var(--moft-chocolate-deep)}
.stage__rays{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;margin:-85% 0 0 -85%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,var(--moft-salty-caramel-light) 0 9%,transparent 9.5%),repeating-conic-gradient(var(--moft-salty-caramel-light) 0 7.5deg,var(--moft-salty-caramel) 7.5deg 15deg);
  animation:stage-spin 40s linear infinite}
.tile__ph.stage>img{position:relative;inset:auto;z-index:1;display:block}
.stage__shadow{position:absolute;z-index:1;left:50%;bottom:16%;width:64%;height:8%;margin-left:-32%;border-radius:50%;background:var(--moft-chocolate-deep);animation:stage-shadow 4s ease-in-out infinite}
.tile__ph.stage--plate>img{width:66%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%;border:3px solid var(--moft-chocolate-deep);box-shadow:4px 5px 0 var(--moft-chocolate-deep);margin-bottom:6%;animation:stage-bob 4s ease-in-out infinite}
.stage--plate .stage__shadow{bottom:11%;width:56%;margin-left:-28%}
@media (hover:hover){.tile:hover .stage__rays{animation-duration:12s}.tile:hover .stage img{transform:scale(1.05)}}
.stage img{transition:transform .25s ease}
@keyframes stage-spin{to{transform:rotate(360deg)}}
@keyframes stage-bob{0%,100%{translate:0 0}50%{translate:0 -4%}}
@keyframes stage-shadow{0%,100%{scale:1}50%{scale:.85}}
@media (prefers-reduced-motion:reduce){.stage__rays,.stage img,.stage__shadow{animation:none}}

/* "casi" squeezed in diagonally before "Siempre" like a pen correction, double-underlined in caramel */
.tile__ph.stage>.photo-film{z-index:2}
.casi::after{content:"";position:absolute;left:-.05em;right:-.1em;bottom:-.25em;height:.32em;border-top:.09em solid var(--moft-caramelo);border-bottom:.09em solid var(--moft-caramelo);border-radius:1px}
.casi{position:relative;display:inline-block;margin-right:.12em;font-size:.6em;font-style:italic;color:var(--moft-caramelo-deep);transform:rotate(-14deg) translateY(-.5em);transform-origin:right bottom}

/* Language row inside the mobile menu window (the header pill is hidden on phones) */
.menu__lang{display:flex;justify-content:center;align-items:center;gap:var(--moft-space-2);margin:var(--moft-space-4) 0 0;font-weight:var(--moft-weight-black);letter-spacing:.06em;color:var(--moft-salty-caramel)}
.menu__lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--moft-space-2);color:var(--moft-crema);text-decoration:none}
.menu__lang a:hover{color:var(--moft-salty-caramel)}
.menu__lang a[aria-current]{color:var(--moft-salty-caramel);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width:480px){.menu__lang{display:none}}

/* ---------- Inicio: search and filters over the vitrina ---------- */
.hsearch{display:grid;justify-items:center;gap:var(--moft-space-3);margin-bottom:var(--moft-space-5)}
.hsearch__box{display:block;width:100%;max-width:560px}
.hsearch__input{display:block;width:100%;min-height:52px;margin:0;padding:12px 20px;border:3px solid var(--moft-cacao);border-radius:var(--moft-radius-pill);background:var(--moft-whipped-cream);color:var(--moft-tiramisu);font-family:var(--moft-font);font-size:1.0625rem;font-weight:var(--moft-weight-medium);letter-spacing:.02em;appearance:none;-webkit-appearance:none;box-shadow:var(--sh-pill) var(--moft-chocolate-deep);transition:border-color .12s ease}
.hsearch__input::placeholder{color:var(--moft-galleta-deep);opacity:1}
.hsearch__input:focus{outline:none;border-color:var(--moft-caramelo)}
.hsearch__input:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:2px}
.hsearch__chips{max-width:100%}
.hsearch .filters__chip[hidden]{display:none}
.hsearch__status{margin:0;text-align:center}
.hsearch__none{margin:var(--moft-space-4) 0 0;text-align:center}
.hsearch__none .link{padding-block:0;font:inherit;font-weight:var(--moft-weight-bold);background:none;border:0;cursor:pointer}