/* DonDulce · Pasdulce S.L. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --red: #e1261c;
  --red-700: #bd1512;
  --red-800: #9b100e;
  /* soft neutrals (Oct 2026: replaced the salmon pinks #fdf1f0 / #f8dcda / #ecd9d7) */
  --soft-100: #f5f3f2;   /* soft bands, panels, photo grounds, Dondulcín silhouettes */
  --soft-200: #e8e3e1;   /* dashed borders, hover borders, switch track */
  --line: #e7e1df;
  --paper: #ffffff;
  --ink: #2b1a19;
  --ink-soft: #6b5654;
  --on-red: #ffffff;
  --on-red-soft: #ffdcda;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(3rem, 1.6rem + 5.6vw, 6.4rem);
  --fs-h2: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --maxw: 1360px;
  --section: clamp(5rem, 3rem + 7vw, 9.5rem);
  --header-h: 72px;
  --radius: 16px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --z-header: 50;
  --z-menu: 60;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: var(--red) var(--soft-100);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--red);
}

body.menu-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 760;
  font-stretch: 92%;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

::selection { background: var(--red); color: #fff; }
.hero ::selection, .band--red ::selection, .band--brand ::selection, .footer ::selection, .menu ::selection { background: #fff; color: var(--red); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

.icon { width: 1.1em; height: 1.1em; flex: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }

.band--red { background: var(--red-700); color: var(--on-red); }
.band--rosa { background: var(--soft-100); color: var(--ink); }
.band--soft { background: var(--soft-100); }
/* «¿Hablamos?» closes every page on white, in the white card with soft shadow of the product pages' closing */
.closing-band { background: var(--paper); }
/* after the news (white too) the card follows straight on, as after «Otros productos» on the product pages */
.home-news + .closing-band { padding-top: 0; }
.band--brand { background: var(--red); color: var(--on-red); }
.hero :focus-visible, .band--red :focus-visible, .band--brand :focus-visible, .footer :focus-visible, .menu :focus-visible { outline-color: #fff; }

.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 54ch;
}
.band--red .lead { color: var(--on-red-soft); }

.stack > * + * { margin-top: var(--stack, 1.25rem); }

/* ---------- Buttons & links ---------- */

.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.btn .icon { transition: transform 220ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--red-700); box-shadow: 0 10px 24px -12px rgb(225 31 28 / 0.65); }
  .btn:hover .icon { transform: translateX(3px); }
}
.btn--outline { --btn-bg: transparent; --btn-fg: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { background: var(--red); color: #fff; box-shadow: inset 0 0 0 2px var(--red); }
}
.hero .btn, .band--red .btn, .band--brand .btn, .menu .btn { --btn-bg: #fff; --btn-fg: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .hero .btn:hover, .band--red .btn:hover, .band--brand .btn:hover { background: var(--soft-100); box-shadow: 0 12px 26px -14px rgb(60 0 0 / 0.55); }
}
.btn--sm { min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.975rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 620;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 200ms ease;
}
.link-arrow .icon { transition: transform 220ms var(--ease-out); }
.link-arrow--red { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { text-decoration-color: currentColor; }
  .link-arrow:hover .icon { transform: translateX(3px); }
}

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  transition: box-shadow 240ms ease;
}
.header.is-stuck { box-shadow: 0 1px 0 rgb(120 20 18 / 0.08), 0 8px 24px -18px rgb(120 20 18 / 0.3); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 50%; }
.brand img { width: 56px; height: 56px; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.nav__list { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  padding-block: 0.4rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::after { transform: scaleX(1); }
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--soft-100);
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:active { transform: scale(0.94); }
.menu-toggle .icon { width: 24px; height: 24px; }

/* Mobile menu sheet */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--red);
  color: #fff;
  padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 420ms var(--ease-drawer), visibility 0s linear 420ms;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 480ms var(--ease-drawer), visibility 0s;
}
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.menu__top .menu-toggle { display: inline-flex; background: rgb(255 255 255 / 0.12); color: #fff; }
.menu__list { list-style: none; margin: 2rem 0 0; padding: 0; }
.menu__list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.menu.is-open .menu__list li {
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease, transform 520ms var(--ease-out);
  transition-delay: calc(120ms + var(--i, 0) * 50ms);
}
.menu__list a {
  display: block;
  padding: 0.35rem 0;
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  font-weight: 760;
  font-stretch: 90%;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.menu__list a[aria-current="page"] { color: var(--on-red-soft); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.menu__foot { margin-top: auto; display: grid; gap: 1.25rem; }
.menu__foot .btn { justify-content: center; }
.menu__contact { display: grid; gap: 0.35rem; color: var(--on-red-soft); font-size: var(--fs-small); }
.menu__contact a { color: #fff; text-decoration: none; font-weight: 600; }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  :root { --header-h: 64px; }
  .brand img { width: 48px; height: 48px; }
}
@media (min-width: 861px) {
  .menu { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--red);
  color: #fff;
  min-height: min(calc(100svh - var(--header-h) - 8vh), 820px);
  display: flex;
  isolation: isolate;
  overflow-x: clip;
}
.hero__mascot {
  position: absolute;
  z-index: 0;
  right: clamp(2rem, 9vw, 10rem);
  top: clamp(1.25rem, 3vw, 2.5rem);
  width: min(29vw, 440px);
  pointer-events: none;
}
.hero__mascot .blob { fill: #cd1917; }
.hero__mascot .face { fill: var(--red); }
.hero__mascot .tongue { fill: #cd1917; }
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 1.75rem;
  padding-top: clamp(3rem, 2rem + 4.5vw, 6rem);
  padding-bottom: clamp(10rem, 17vw, 19rem);
}
@media (min-width: 861px) and (max-height: 860px) {
  .hero__inner { padding-top: clamp(2.5rem, 5vh, 4rem); gap: 1.4rem; }
  .hero__title { font-size: clamp(3rem, 0.6rem + 5vw, 5.6rem); }
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 9ch;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .line > span { display: block; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.45; color: var(--on-red); max-width: 34ch; }
.hero__sub strong { color: #fff; font-weight: 600; }
.hero .link-arrow { color: #fff; }

.hero__minis {
  position: absolute;
  z-index: 1;
  right: clamp(-6rem, -4vw, -1rem);
  bottom: 0;
  width: min(72vw, 1200px);
  transform: translateY(26.31%); /* = 28% of the original 746px-tall artwork, so the muffins sit exactly where they did */
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgb(80 6 4 / 0.4));
}
/* One layer per muffin (painter's order, back first); --i is depth (0 front, 4 back), --c the row's offset from the centre */
.hm { --f: calc((5 - var(--i)) / 5); position: absolute; left: var(--l); top: var(--t); width: var(--w); transform-origin: 50% 100%;
  transform: translate(calc(var(--mx, 0) * var(--f) * 26px), calc(var(--my, 0) * var(--f) * 14px)); }
.hm img { display: block; width: 100%; height: auto; }

.after-hero { padding-top: calc(clamp(4rem, 9vw, 8rem) + 3rem); }
/* the menu closes with its own red rule, so the band that follows needs less white before it */
.products-home { padding-bottom: calc(var(--section) * 0.55); }

@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero__inner { padding-bottom: clamp(9rem, 44vw, 16rem); }
  .hero__minis { --k: 0.55; width: 118vw; right: -14vw; transform: translateY(31.94%); }
  .hero__mascot { width: 50vw; right: -12vw; top: auto; bottom: 30vw; }
  .after-hero { padding-top: calc(18vw + 3.5rem); }
}

/* Hero entrance: pure CSS, content is visible if animations never run */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .line > span { animation: hero-rise 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  .hero__fade { animation: hero-fade 800ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 360ms); }
  /* the scene builds itself from the back: far muffins land first, the front row arrives last, rising into focus */
  .hm img { animation: hm-in 1100ms var(--ease-out) both; animation-delay: calc(140ms + (4 - var(--i)) * 95ms + var(--r) * 35ms); }
  .hero__mascot { animation: hero-mascot 1400ms var(--ease-out) 150ms both; }
}
@keyframes hero-rise { from { transform: translateY(105%); } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(12px); } }
@keyframes hero-minis { from { opacity: 0; transform: translateX(8%); filter: blur(10px); } }
@keyframes hero-mascot { from { opacity: 0; transform: translateY(24px) rotate(-4deg); } }

/* ---------- Family index (home) ---------- */

.families { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.families__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.families__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.families__item { border-bottom: 1px solid var(--line); }
.families__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: clamp(1rem, 1.6vw, 1.5rem) 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.families__name {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  font-weight: 760;
  font-stretch: 88%;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: transform 320ms var(--ease-out), color 200ms ease;
}
.families__meta { grid-column: 1; font-size: var(--fs-small); color: var(--ink-soft); }
.families__go {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms var(--ease-out);
}
.families__thumb { display: none; }
.families__item.is-active .families__go,
.families__link:focus-visible .families__go { background: var(--red); border-color: var(--red); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .families__link:hover .families__name { transform: translateX(6px); }
  .families__link:hover .families__go { background: var(--red); border-color: var(--red); color: #fff; }
}

.stage {
  position: relative;
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: center;
}
.stage__blob { position: absolute; inset: 2% 4%; color: var(--soft-100); }
.stage__blob svg { width: 100%; height: 100%; }
.stage__img {
  grid-area: 1 / 1;
  position: relative;
  width: 78%;
  max-height: 86%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  filter: blur(8px);
  transition: opacity 260ms ease, transform 420ms var(--ease-out), filter 260ms ease;
}
.stage__img.is-active { opacity: 1; transform: none; filter: blur(0); transition-duration: 420ms, 620ms, 420ms; }
.stage__img--tall { width: auto; height: 54%; }

@media (max-width: 860px) {
  .families { grid-template-columns: minmax(0, 1fr); }
  .families__stage { display: none; }
  .families__link { grid-template-columns: 96px 1fr auto; }
  .families__thumb { display: block; grid-row: 1 / span 2; width: 96px; height: 80px; object-fit: contain; }
  .families__name, .families__meta { grid-column: 2; }
  .families__go { grid-column: 3; width: 40px; height: 40px; }
}

/* ---------- Flavour picker ---------- */

.picker {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-areas: "head letter" "lead letter" "panel panel";
}
.picker__head { grid-area: head; }
.picker__lead { grid-area: lead; margin-top: 1.25rem; }
/* the red band is a little tighter than a standard section: the white card already carries the weight */
.band--brand[data-picker] { padding-block: min(var(--section), clamp(5rem, 2rem + 7vw, 7.5rem)); }
/* one white card for the whole selector: choices on the left, the chosen mini and its bag on the right */
.picker__panel {
  grid-area: panel; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 4.5vw, 4rem); padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -34px rgb(60 0 0 / 0.65);
}
.picker__chips {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2rem); padding: 0; list-style: none;
}
/* the flavour pills of the product pages (.ftab), two to a row, each as wide as its column */
.picker__chips li { display: grid; }
.picker__chips .ftab { width: 100%; white-space: normal; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 1.5px solid rgb(120 20 18 / 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit; font-size: 0.975rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(0.96); }
.chip[aria-checked="true"] { background: var(--red); border-color: var(--red); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not([aria-checked="true"]):not([aria-selected="true"]):not([aria-pressed="true"]):not([aria-disabled="true"]) { border-color: var(--red); background: #fff; }   /* the chosen chip keeps its red */
}
.chip__soon { font-size: var(--fs-xs); font-weight: 500; opacity: 0.8; }

/* the big mini and its bag on a white card too, level with the selector card */
.picker__stage {
  position: relative; isolation: isolate; overflow: hidden; min-height: 24rem;
  border-radius: 16px; background: transparent;
}
.picker__blob { position: absolute; inset: 6% 6%; z-index: -1; color: var(--soft-100); }
.picker__blob svg { width: 100%; height: 100%; }
.picker__stage figure { margin: 0; position: absolute; inset: 7% 6% 5%; }
/* no CSS drop-shadow or blur on these cut-outs: Safari paints them as a pink veil with straight edges round the
   photo. The mini stands on its own contact shadow instead, a soft ellipse drawn underneath it */
.picker__stage figure::before {
  content: ""; position: absolute; z-index: 0; left: 9%; bottom: 3.5%; width: 42%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(120 20 18 / 0.2), rgb(120 20 18 / 0.08) 60%, transparent);
  pointer-events: none;
}
.picker__stage[data-solo="bag"] figure::before { display: none; }
.picker__mini, .picker__bag {
  position: absolute; z-index: 1;
  object-fit: contain;
  opacity: 0;
  transition: opacity 240ms ease, transform 420ms var(--ease-out);
}
.picker__mini { left: 2%; bottom: 6%; width: 56%; height: 70%; object-position: bottom center; transform: translateY(14px) scale(0.96); }
.picker__bag { right: 2%; top: 2%; width: 36%; height: 86%; object-position: top center; transform: translateY(-10px) rotate(4deg); }
.picker__mini.is-active, .picker__bag.is-active { opacity: 1; transition-duration: 380ms, 640ms; }
.picker__mini.is-active { transform: none; }
.picker__bag.is-active { transform: rotate(4deg); }
.picker__stage[data-solo="bag"] .picker__bag { left: 18%; right: auto; width: 56%; height: 96%; }

.picker__name { font-size: var(--fs-h3); }
.band--brand .lead, .band--brand .picker__detail { color: var(--on-red); }
.band--brand .chip { border-color: rgb(255 255 255 / 0.55); color: #fff; }
.band--brand .chip[aria-checked="true"] { background: #fff; border-color: #fff; color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .band--brand .chip:hover:not([aria-checked="true"]) { border-color: #fff; background: rgb(255 255 255 / 0.12); }
}
/* flavour detail under the grid */
.picker__detail { margin-top: 0.5rem; color: var(--ink-soft); min-height: 3.2em; }
.picker__info { min-height: 7.5rem; }
/* the selector sits on a white card over the red band (like the EU funding card): flavours, choice, sheet link and buy button */
.picker__card { align-self: center; padding: clamp(0.5rem, 1.5vw, 1rem) clamp(0.25rem, 1vw, 0.75rem); }
.picker__card .picker__chips { margin: 0; }
.picker__card .picker__info { min-height: 0; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid var(--line); }
.band--brand .picker__card .picker__detail { color: var(--ink-soft); }
.picker__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.picker__actions .btn { flex: 1 1 auto; justify-content: center; }
.band--brand .picker__card .btn.btn--outline { --btn-bg: transparent; --btn-fg: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
@media (hover: hover) and (pointer: fine) { .band--brand .picker__card .btn.btn--outline:hover { background: var(--red); color: #fff; } }
.band--brand .picker__card :focus-visible { outline-color: var(--red); }
.band--brand .picker__card .btn { --btn-bg: var(--red); --btn-fg: #fff; }
@media (hover: hover) and (pointer: fine) { .band--brand .picker__card .btn:hover { background: var(--red-700); box-shadow: 0 12px 26px -14px rgb(120 20 18 / 0.5); } }
/* «¿otra mini?» lettering: centred, large, in the free space right of the title and lead */
.picker__lettering {
  grid-area: letter; justify-self: center; align-self: center; width: auto; height: clamp(7rem, 4rem + 6vw, 11rem);
  transform: rotate(-6deg); pointer-events: none;
}
@media (max-width: 860px) {
  /* one column: lettering centred in the free space right of the title; the photo card goes above the selector */
  .picker { grid-template-columns: 56% minmax(0, 1fr); column-gap: 0; grid-template-areas: "head letter" "lead lead" "panel panel"; }
  .picker__panel { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0.75rem; border-radius: 20px; }
  .picker__stage { order: -1; }
  .picker__card { padding: 0.25rem 0.5rem 0.75rem; }
  /* centred in the gap right of the shorter title lines: a little lower than the title's middle */
  .picker__lettering { height: auto; width: 88%; max-width: 9.5rem; translate: 0 18%; }
  .picker__stage { min-height: 0; aspect-ratio: 1.25 / 1; }
  .picker__chips .ftab { font-size: 0.875rem; }
}

/* ---------- Feature photo (sequillos) ---------- */

.feature { position: relative; }
.feature__media { position: relative; height: clamp(26rem, 62vw, 46rem); overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.feature__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin-top: clamp(-12rem, -16vw, -6rem);
  margin-left: auto;
  background: #fff;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgb(120 20 18 / 0.3);
}
@media (max-width: 700px) {
  .feature__panel { margin-top: -5rem; width: auto; margin-inline: 0; }
}

/* ---------- Pro formats (split) ---------- */

.pro__head > div { max-width: 760px; }
/* each channel shows its formats on a soft rosa stage, Dondulcín in white behind them */
.pro__stage {
  position: relative; isolation: isolate; align-self: stretch;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.75rem, 2vw, 1.5rem);
  height: clamp(15rem, 24vw, 20rem); margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem);
  border-radius: var(--radius); background: var(--soft-100); overflow: hidden;
}
.pro__blob { position: absolute; inset: 7% 0; z-index: -1; color: #fff; }   /* whole silhouette, centred behind the products */
/* white section (Oct 2026): the stages are white
   cards with a fine border and soft shadow, the Dondulcín silhouette in the soft neutral */
.pro { padding-top: calc(var(--section) * 0.75); }   /* the product menu above already closes with its red rule */
.pro .pro__stage { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 22px 44px -34px rgb(120 20 18 / 0.35); }
.pro .pro__blob { color: var(--soft-100); }
.pro__blob svg { width: 100%; height: 100%; }
.pro__stage img { height: 100%; width: auto; min-width: 0; object-fit: contain; filter: drop-shadow(0 18px 20px rgb(120 20 18 / 0.18)); transition: translate 420ms var(--ease-out); }
.pro__stage img.is-small { height: 56%; }
.pro__stage img.is-group { height: 68%; max-width: 46%; }   /* wide shot of four wrapped minis */
/* Formats compared by channel: families as rows ruled like the product menu, Hostelería and Retail as columns */
.pro-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pro-t th, .pro-t td { padding: 0; text-align: left; vertical-align: top; font-weight: inherit; }
.pro-t thead th { padding: 0 clamp(1rem, 2.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem); vertical-align: bottom; }
.pro-t thead th:last-child, .pro-t tbody td:last-child, .pro-t tfoot td:last-child { padding-right: 0; }
.pro-t__corner { width: clamp(11rem, 18vw, 15rem); }
.pro-t .pro__stage--comp { margin: 0 0 1rem; height: clamp(14rem, 20vw, 18rem); background: transparent; box-shadow: none; padding: 0; overflow: visible; }
.pro-t .pro__blob { inset: 0 6%; }
.pro-t__title { display: block; font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.pro-t .pro__for { display: block; margin-top: 0.35rem; font-size: var(--fs-small); font-weight: 600; color: var(--red-700); }
.pro-t thead tr { border-bottom: 2px solid var(--red); }
.pro-t tbody tr { border-bottom: 1px solid var(--line); }
.pro-t tbody th, .pro-t tbody td { padding-block: clamp(1rem, 2vw, 1.4rem); }
.pro-t tbody td { padding-inline: clamp(1rem, 2.5vw, 2.5rem); }
.pro-t td + td, .pro-t th + th { border-left: 1px solid var(--line); }
.pro-t tbody th { display: flex; align-items: center; gap: 0.85rem; padding-right: 1rem; font-weight: 750; font-size: 1.0625rem; line-height: 1.25; color: var(--ink); }
.pro-t__note { margin: 0 0 0.55rem; font-size: var(--fs-small); color: var(--ink-soft); }
.pro-t .pro-fam__fmts { margin: 0; }
.pro-t tfoot td { padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2.5vw, 2.5rem) 0; }
.pro-t tfoot td + td { border-left: 0; }
@media (max-width: 860px) {
  /* phones/tablets: each family becomes a heading row, its Hostelería and Retail formats side by side below */
  .pro-t, .pro-t tbody, .pro-t thead, .pro-t tfoot { display: block; }
  .pro-t tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
  .pro-t__corner { display: none; }
  .pro-t .pro__stage--comp { display: none; }
  .pro-t thead th, .pro-t tbody td, .pro-t tfoot td { padding-inline: 0; border-left: 0 !important; }
  .pro-t thead th { padding-bottom: 0.9rem; }
  .pro-t__title { font-size: 1.2rem; }
  .pro-t .pro__for { font-size: 0.8rem; }
  .pro-t tbody th { grid-column: 1 / -1; padding: 1.1rem 0 0.6rem; }
  .pro-t tbody td { padding: 0 0 1.1rem; }
  .pro-t .pro-fam__fmts { flex-direction: column; align-items: flex-start; }
  .pro-t td { min-width: 0; }
  .pro-t .pro-fam__fmts { gap: 0.35rem; }
  .pro-t .pro-fam__fmts li { max-width: 100%; }
  /* text flows as one run so long formats wrap cleanly inside the pill */
  .pro-t .pro-pill { display: inline-block; max-width: 100%; white-space: normal; padding: 0.42rem 0.7rem; font-size: 0.8125rem; line-height: 1.3; min-height: 0; }
  .pro-t .pro-pill__go { display: inline-block; vertical-align: -0.1em; margin-left: 0.25rem; }
  .pro-t tfoot tr { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .pro-t tfoot td { padding: 1.5rem 0 0; }
  .pro-t tfoot td + td { padding-top: 0; }
  .pro-t .pro__btn { width: 100%; justify-content: center; }
}
/* Phones: channel switch + formats as plain rows (text left, arrow right), one channel at a time */
.pro-switch { display: none; }
@media (max-width: 860px) {
  .pro-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; margin-bottom: 0.5rem; border-radius: 999px; background: var(--soft-100); }
  .pro-switch__btn { min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: 0.9rem; font-weight: 650; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; -webkit-tap-highlight-color: transparent; }
  .pro-switch__btn[aria-pressed="true"] { background: #fff; color: var(--red); box-shadow: 0 1px 2px rgb(60 0 0 / 0.08), 0 4px 12px -6px rgb(60 0 0 / 0.25); }
  .pro-switch__btn:active { transform: scale(0.97); }
  .pro-switch__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
  .pro-cmp .pro-t thead { display: none; }
  .pro-cmp[data-canal="hos"] .is-ret, .pro-cmp[data-canal="ret"] .is-hos { display: none !important; }
  .pro-cmp .pro-t tr { grid-template-columns: minmax(0, 1fr); }
  /* each family: a soft card, formats as a check list like the product sheets */
  .pro-cmp .pro-t tbody { display: grid; gap: 0.75rem; margin-top: 1rem; }
  .pro-cmp .pro-t tbody tr { border: 0; padding: 1rem 1.1rem 0.9rem; border-radius: 16px; background: var(--soft-100); }
  .pro-cmp .pro-t tbody th { padding: 0 0 0.6rem; }
  .pro-cmp .pro-t tbody td { padding: 0; }
  .pro-cmp .pro-t__note { margin: 0 0 0.35rem; }
  .pro-cmp .pro-fam__fmts { display: grid; gap: 0.1rem; }
  .pro-cmp .pro-pill {
    display: flex; align-items: center; gap: 0.6rem; width: auto; min-height: 40px; padding: 0.3rem 0;
    border-radius: 0; background: none; box-shadow: none; font-size: 1rem; white-space: normal;
  }
  .pro-cmp .pro-pill__go { display: none; }
  .pro-cmp a.pro-pill .pro-pill__txt { text-decoration: underline; text-decoration-color: rgb(225 38 28 / 0.35); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
  .pro-cmp a.pro-pill:active { scale: 1; }
  .pro-cmp a.pro-pill:active .pro-pill__txt { text-decoration-color: var(--red); }
  .pro-cmp a.pro-pill:hover { box-shadow: none; translate: none; }
  .pro-cmp a.pro-pill:hover .pro-pill__txt { text-decoration-color: var(--red); }
  .pro-cmp .pro-pill--static { color: var(--ink-soft); }
  .pro-cmp .pro-t tfoot tr { row-gap: 0; }
  .pro-cmp .pro-t tfoot td + td { padding-top: 1.5rem; }
}
/* Formats by family, «carta» style: small cut-out, family name, formats as pills */
.pro-fam__thumb { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; }
.pro-fam__thumb img { max-width: 3.5rem; max-height: 3.5rem; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(120 20 18 / 0.18)); }
.pro-fam__fmts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.55rem 0 0; padding: 0; list-style: none; }
/* format pills: each one opens its product page */
/* formats: the warm grey pills of the flavour pickers, no border; the site's arrow, since they stay on the site */
.pro-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.3rem 0.7rem 0.3rem 0.9rem;
  border-radius: 999px; background: var(--soft-100); color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: 0.875rem; font-weight: 550; line-height: 1.2;
  transition: background-color 180ms ease, color 180ms ease, scale 140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.pro-pill strong { font-weight: 750; }
.pro-pill__go { width: 0.85rem; height: 0.85rem; flex: none; color: var(--red); transition: translate 220ms var(--ease-out); }
a.pro-pill:active { scale: 0.97; }
/* not linked yet («Consúltanos»): an outline, like a flavour on the way */
.pro-pill--static { background: transparent; box-shadow: inset 0 0 0 1.5px var(--soft-200); color: var(--ink-soft); }
.pro-pill:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  a.pro-pill:hover { background: var(--soft-200); }
  a.pro-pill:hover .pro-pill__go { translate: 2px 0; }
}
@media (pointer: coarse) { .pro-pill { min-height: 2.6rem; padding-inline: 0.95rem 0.75rem; } }
/* Three-product still life per channel: the centre piece behind, two pieces in front at the sides */
.pro__stage--comp { display: block; height: clamp(17rem, 27vw, 22rem); margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.pro__stage--comp img { position: absolute; bottom: 7%; }
.pro__stage--comp .is-c { left: 50%; translate: -50% 0; bottom: 14%; height: 70%; max-width: 64%; z-index: 0; }
.pro__stage--comp .is-l, .pro__stage--comp .is-r { z-index: 1; }
.pro__stage--hos .is-l { left: 4%; height: auto; width: 40%; }
.pro__stage--hos .is-r { right: 4%; height: 40%; max-width: 38%; }
.pro__stage--ret .is-c { left: 55%; }
.pro__stage--ret .is-l { left: 6%; height: 66%; }
.pro__stage--ret .is-r { right: 4%; height: auto; width: 40%; }
@media (hover: hover) and (pointer: fine) {
  .pro-t thead th:hover .pro__stage--comp .is-c { translate: -50% -6px; }
  .pro-t thead th:hover .pro__stage--comp .is-l, .pro-t thead th:hover .pro__stage--comp .is-r { translate: 0 -8px; transition-delay: 40ms; }
}
.pro__btn { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.pro__btn .icon { transition: translate 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pro__btn:hover .icon { translate: 0.2em 0; }
}
/* head: title and lead on the left, the phone on the right (below them on narrow screens) */
.pro__head { display: grid; gap: 0 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 961px) {
  .pro__head { grid-template-columns: minmax(0, 1fr) auto; }
  .pro__head .pro__phone { margin-top: 0; padding-bottom: 0.35rem; }
}
/* phone: one generous line, big enough to read and tap */
.pro__phone {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 1.75rem; justify-self: start;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.pro__phone-icon { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--red); color: #fff; transition: transform 160ms var(--ease-out); }
.pro__phone-icon .icon { width: 1.4rem; height: 1.4rem; }
.pro__phone-text { display: grid; gap: 0.1rem; }
.pro__phone-text span { font-size: var(--fs-small); color: var(--ink-soft); }
.pro__phone-text strong { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem); font-weight: 800; font-stretch: 88%; line-height: 1; letter-spacing: -0.02em; transition: color 200ms ease; }
.pro__phone:active .pro__phone-icon { transform: scale(0.94); }
.pro__phone:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .pro__phone:hover strong { color: var(--red); } }
@media (max-width: 760px) {
  .pro__stage { display: none; }   /* phones: thumbnails and pills carry the section; the stages stay on larger screens */
  .pro__btn { align-self: stretch; justify-self: stretch; justify-content: center; }
}

@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Certifications ---------- */

.certs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem; }
.certs__text { max-width: 30ch; font-size: var(--fs-h4); font-weight: 650; line-height: 1.4; }
.certs__logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; }
.certs__logos img { height: clamp(64px, 6vw, 84px); width: auto; }

/* ---------- Contact close ---------- */

.close { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.close__mascot { width: clamp(9rem, 18vw, 15rem); }
.close__channels { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin-top: 1.75rem; }
.close__channel {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.close__channel .icon { width: 1em; height: 1em; color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .close__channel:hover { text-decoration: underline; }
}
@media (max-width: 640px) {
  .close { grid-template-columns: minmax(0, 1fr); }
  .close__mascot { width: 7.5rem; }
}

/* Dondulcín blink */
.dondulcin .eye { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .dondulcin.is-blinking .eye { animation: blink 260ms var(--ease-in-out); }
}
@keyframes blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.12); } }

/* ---------- Page header (inner pages) ---------- */

.page-head { padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-head__title { font-size: var(--fs-display); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; }
.page-head .lead { margin-top: 1.5rem; }
.page-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-head__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 860px) { .page-head--split { grid-template-columns: minmax(0, 1fr); } }
.page-head .actions { margin-top: 2rem; }

.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.subnav ul {
  display: flex; gap: 0.5rem;
  margin: 0; padding: 0.75rem 0;
  list-style: none;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.975rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.subnav a.is-current { background: var(--red); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .subnav a:hover:not(.is-current) { background: var(--soft-100); }
}

/* ---------- Product family blocks ---------- */

.family__head { display: grid; gap: 1.25rem; max-width: 780px; }
.family__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; font-size: var(--fs-small); font-weight: 600; }
.family__facts li { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.family__facts span { font-weight: 450; opacity: 0.8; }

.varieties {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
  margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding: 0; list-style: none;
}
.varieties li { text-align: center; }
.varieties img { width: 100%; aspect-ratio: 1.08; object-fit: contain; margin-bottom: 0.85rem; filter: drop-shadow(0 18px 18px rgb(120 20 18 / 0.16)); }
.varieties strong { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.varieties small { display: block; margin-top: 0.2rem; font-size: var(--fs-small); opacity: 0.8; }
@media (max-width: 760px) { .varieties { grid-template-columns: repeat(2, 1fr); } }

.formats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(3.5rem, 6vw, 5.5rem); padding-top: clamp(2rem, 3vw, 2.75rem); border-top: 2px solid currentColor; }
.formats h3 { font-size: var(--fs-h4); font-weight: 720; letter-spacing: -0.01em; }
.formats ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.formats li { padding: 0.55rem 0; display: flex; gap: 0.75rem; align-items: baseline; }
.formats li .icon { width: 0.95em; height: 0.95em; transform: translateY(0.12em); color: var(--red); }
.band--red .formats li .icon { color: #fff; }
@media (max-width: 760px) { .formats { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--rev > :first-child { order: 2; }
.split__media img { width: 100%; height: auto; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--rev > :first-child { order: 0; }
}

.flavour-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; }
.flavour-list li {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--soft-100);
  font-size: var(--fs-small);
  font-weight: 600;
}
.band--red .flavour-list li { background: rgb(255 255 255 / 0.14); }
.band--rosa .flavour-list li { background: #fff; }
.flavour-list .is-soon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 500; }

.texture { height: clamp(14rem, 28vw, 24rem); overflow: hidden; }
.texture img { width: 100%; height: 100%; object-fit: cover; }

.loaves { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: clamp(1rem, 3vw, 3rem); margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding: 0; list-style: none; }
.loaves li { text-align: center; }
.loaves img { height: clamp(14rem, 26vw, 24rem); width: auto; margin: 0 auto 1rem; object-fit: contain; filter: drop-shadow(0 22px 22px rgb(120 20 18 / 0.18)); }
.loaves strong { font-size: 1.125rem; }
@media (max-width: 760px) {
  .loaves { grid-template-columns: repeat(4, 70%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .loaves li { scroll-snap-align: center; }
}

.sub-lines { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); margin-top: clamp(4rem, 7vw, 6.5rem); }
.sub-line { grid-column: span 6; display: grid; align-content: start; gap: 1rem; }
.sub-line--wide { grid-column: span 12; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.sub-line--5 { grid-column: span 5; }
.sub-line--7 { grid-column: span 7; }
.sub-line h3 { font-size: var(--fs-h3); }
.sub-line p { color: var(--ink-soft); max-width: 48ch; }
.sub-line__media { border-radius: var(--radius); overflow: hidden; background: var(--soft-100); }
.sub-line__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.sub-line__cutouts { display: flex; align-items: flex-end; gap: 1rem; min-height: 9rem; }
.sub-line__cutouts img { flex: 1; min-width: 0; max-height: 11rem; object-fit: contain; filter: drop-shadow(0 16px 16px rgb(120 20 18 / 0.16)); }
@media (max-width: 860px) {
  .sub-line, .sub-line--wide, .sub-line--5, .sub-line--7 { grid-column: span 12; grid-template-columns: minmax(0, 1fr); }
}

.seq-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin: clamp(3.5rem, 6vw, 5rem) 0 0; padding: clamp(2rem, 3vw, 2.75rem) 0 0; list-style: none; border-top: 2px solid rgb(255 255 255 / 0.85); }
.seq-formats li { display: grid; gap: 0.25rem; }
.seq-formats img { width: 100%; aspect-ratio: 1.45; object-fit: contain; margin-bottom: 1.25rem; filter: drop-shadow(0 24px 24px rgb(0 0 0 / 0.3)); }
.seq-formats strong { font-size: var(--fs-h4); font-weight: 700; }
.seq-formats span { color: var(--on-red-soft); font-size: var(--fs-small); }
@media (max-width: 760px) { .seq-formats { grid-template-columns: minmax(0, 1fr); } .seq-formats img { aspect-ratio: 1.8; } }
.split__media img.rounded { border-radius: var(--radius); }

.closing { text-align: left; display: grid; gap: 1.5rem; max-width: 760px; }

/* ---------- Empresa ---------- */

.photo-head { position: relative; height: clamp(20rem, 48vw, 38rem); overflow: hidden; }
.photo-head img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }

/* Empresa · quality: a tall rounded photo beside the four commitments, each with its Phosphor icon in a white
   circle on the warm grey band; red rule on top, fine lines between, like the site's lists */
.quality-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.quality-grid__photo { overflow: hidden; border-radius: 16px; background: var(--soft-200); }
.quality-grid__photo img { display: block; width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.commit { align-self: center; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--red); }
.commit li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: clamp(1.25rem, 2.2vw, 1.75rem) 0; border-bottom: 1px solid rgb(43 26 25 / 0.1); }
.commit__icon { width: 3rem; height: 3rem; padding: 0.7rem; border-radius: 50%; background: var(--paper); color: var(--red); box-shadow: 0 8px 18px -12px rgb(120 20 18 / 0.35); }
.commit h3 { font-size: var(--fs-h4); font-weight: 750; line-height: 1.25; }
.commit p { margin-top: 0.3rem; color: var(--ink-soft); }
@media (max-width: 860px) {
  .quality-grid { grid-template-columns: minmax(0, 1fr); }
  .quality-grid__photo img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* Empresa · four pillars: a 2 × 2 poster on the red band, white hairlines between the cells */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.24); }
.pillars li { padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 3rem) clamp(1.75rem, 3vw, 2.75rem) 0; border-bottom: 1px solid rgb(255 255 255 / 0.24); }
.pillars li:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / 0.24); }
.pillars li:nth-child(even) { padding-left: clamp(1.25rem, 3vw, 3rem); }
.pillars h3 { font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; line-height: 1.05; letter-spacing: -0.02em; }
.pillars p { margin-top: 0.75rem; max-width: 40ch; color: var(--on-red-soft); font-size: var(--fs-lead); line-height: 1.5; }
@media (max-width: 760px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars li, .pillars li:nth-child(even) { padding: 1.5rem 0; }
  .pillars li:nth-child(odd) { border-right: 0; }
}


.manifesto { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.manifesto blockquote { margin: 0; }
.manifesto blockquote p { font-size: var(--fs-h2); font-weight: 780; font-stretch: 88%; line-height: 1.02; letter-spacing: -0.03em; }
.manifesto .lead { margin-top: 1.75rem; max-width: 60ch; }

.news { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.news li { border-top: 1px solid var(--line); }
.news li:last-child { border-bottom: 1px solid var(--line); }
.news a { display: grid; grid-template-columns: 11rem 1fr auto; gap: 0.5rem 2rem; align-items: baseline; padding: 1.5rem 0; text-decoration: none; }
.news time { font-size: var(--fs-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.news strong { font-size: var(--fs-h4); font-weight: 680; line-height: 1.4; }
.news .icon { color: var(--ink-soft); transition: transform 220ms var(--ease-out), color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .news a:hover strong { text-decoration: underline; text-decoration-thickness: 0.06em; }
  .news a:hover .icon { transform: translate(2px, -2px); color: var(--red); }
}
@media (max-width: 640px) { .news a { grid-template-columns: 1fr auto; } .news time { grid-column: 1 / -1; } }

/* ---------- Contacto ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.channels { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.75rem; }
.channels li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.channels .icon-badge { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--soft-100); color: var(--red); }
.channels .icon-badge .icon { width: 1.25rem; height: 1.25rem; }
.channels small { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
.channels a, .channels address { font-style: normal; font-size: 1.25rem; font-weight: 650; text-decoration: none; line-height: 1.35; }
.channels a.link-arrow { font-size: var(--fs-small); margin-top: 0.4rem; }
.shop-line { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.shop-line .link-arrow { margin-left: 0.25rem; white-space: nowrap; }
/* where we are: the Sequillos map, under the details on the left (after the form on phones) */
.contact > form { grid-row: 1 / span 2; grid-column: 2; }
.contact__aside { grid-column: 1; margin: 0.5rem 0 0; }
@media (max-width: 860px) {
  .contact > form { grid-row: auto; grid-column: auto; }
  .contact__aside { grid-column: auto; margin-top: 0; }
}

.form { display: grid; gap: 1.5rem; background: #fff; padding: clamp(1.5rem, 3.5vw, 3rem); border-radius: var(--radius); box-shadow: 0 1px 0 rgb(120 20 18 / 0.06), 0 30px 60px -36px rgb(120 20 18 / 0.32); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; }
.field label, .field legend { font-weight: 650; font-size: 0.975rem; padding: 0; }
.field .opt { font-weight: 450; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #6b7d8f; }
.field input:hover, .field textarea:hover { border-color: var(--soft-200); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgb(226 30 28 / 0.16); }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--red); }
.field__error { display: none; align-items: center; gap: 0.4rem; color: var(--red-700); font-size: var(--fs-small); font-weight: 550; }
.field[data-invalid] .field__error, .check[data-invalid] .field__error { display: flex; }
.field__hint { font-size: var(--fs-small); color: var(--ink-soft); }

fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
/* form options: the flavour pills (warm grey; the chosen one white, ringed in red), all the same width */
.segmented { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.segmented input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.segmented label {
  display: flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: 0.45rem 0.75rem; border-radius: 999px; background: var(--soft-100); box-shadow: inset 0 0 0 2px transparent;
  font-weight: 650; font-size: 0.975rem; line-height: 1.2; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.segmented label:active { transform: scale(0.97); }
.segmented input:checked + label { background: var(--paper); box-shadow: inset 0 0 0 2px var(--red), 0 12px 24px -14px rgb(120 20 18 / 0.45); }
@media (hover: hover) and (pointer: fine) { .segmented input:not(:checked) + label:hover { background: var(--soft-200); } }
/* phones: three pills side by side are narrower than «profesional» or «distribución», and the text ran into the round
   ends, so the choices stack, one full-width pill each */
@media (max-width: 560px) {
  .segmented label { padding-inline: 0.5rem; font-size: 0.9375rem; }
  [data-contact-form] .segmented { grid-template-columns: 1fr; }
  [data-contact-form] .segmented label { min-height: 2.875rem; }
}
.segmented input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 2px; }

.check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--fs-small); color: var(--ink-soft); }
.check input { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--red); }
.check a { color: var(--ink); font-weight: 600; }

.form__status { display: none; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 12px; font-weight: 550; }
.form__status .icon { width: 1.35rem; height: 1.35rem; margin-top: 0.05rem; }
.form[data-state="success"] .form__status--ok { display: flex; background: #e7f3ec; color: #1d5b3a; }
.form[data-state="error"] .form__status--err { display: flex; background: #fdecea; color: var(--red-700); }
.form[data-state="loading"] .btn .icon { animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }

@media (max-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Funding & footer ---------- */

.funding { padding-block: 2.5rem; border-top: 1px solid var(--line); }
.funding__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.funding__logos { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.funding__logos img { height: 52px; width: auto; }
.funding__logos img.fin-feder { height: 22px; }
.funding p { flex: 1 1 26rem; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; max-width: 70ch; }

/* Footer: the close of every page. The logo with one line of the brand in display (the phone and email are already
   big in «¿Hablamos?» just above, so here they stay at text size, in Contacto); the links in clean columns; the
   funding and the legal lines at the foot. Behind it all, a giant Dondulcín tone on tone (as in the hero) peeks in
   from the bottom right corner and blinks now and then */
.footer {
  position: relative; isolation: isolate; overflow: hidden; background: var(--red); color: rgb(255 255 255 / 0.9);
  padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: max(2rem, env(safe-area-inset-bottom)); font-size: var(--fs-small);
}
.footer a { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; } }
.footer__mascot {
  position: absolute; z-index: -1; right: clamp(-6rem, -4vw, -2rem); bottom: clamp(-9rem, -8vw, -4rem);
  width: clamp(18rem, 10rem + 26vw, 34rem); rotate: -12deg; pointer-events: none;
}
.footer__mascot .blob { fill: #cd1917; }
.footer__mascot .face { fill: var(--red); }
.footer__mascot .tongue { fill: #cd1917; }

.footer__top { display: flex; align-items: center; gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); }
.footer__logo { flex: none; display: block; width: 76px; }
.footer__logo img { display: block; width: 100%; height: auto; }
.footer__statement {
  max-width: 22ch; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 800; font-stretch: 88%; line-height: 1.05;
  letter-spacing: -0.025em; color: #fff; text-wrap: balance;
}
.footer__statement span { display: block; margin-top: 0.6rem; font-size: var(--fs-small); font-weight: 450; font-stretch: 100%; letter-spacing: 0; line-height: 1.5; color: #fff; }   /* full white: anything lighter falls under 4.5:1 on the red */
.footer address { font-style: normal; line-height: 1.6; color: rgb(255 255 255 / 0.82); }
/* contact needs no heading: the company and its address lead the column, a step up from the links beside them;
   the phone and email (big in «¿Hablamos?» and elsewhere) stay at text size underneath */
.footer__address { margin-top: -0.25rem; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); line-height: 1.4 !important; color: #fff !important; }
.footer__address strong { display: block; margin-bottom: 0.2rem; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 800; font-stretch: 90%; letter-spacing: -0.015em; line-height: 1.2; }
.footer__reach { margin-top: 1rem !important; }
.footer__reach a { font-weight: 650; }
.footer__more {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem; font-weight: 650;
  text-decoration: underline !important; text-decoration-color: rgb(255 255 255 / 0.45) !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.3em;
  transition: text-decoration-color 200ms ease;
}
.footer__more .icon { width: 1em; height: 1em; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .footer__more:hover { text-decoration-color: #fff !important; }
  .footer__more:hover .icon { transform: translateX(3px); }
}
.footer .social { margin-top: 1.5rem; }

.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: clamp(2rem, 3.5vw, 2.75rem); border-top: 1px solid rgb(255 255 255 / 0.25);
  max-width: 62rem;
}
.footer h2 { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: 0; margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__col--products ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.16); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.social a:active { transform: scale(0.94); }
.social .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .social a:hover { background: rgb(255 255 255 / 0.28); text-decoration: none; } }

/* the funding (it has to be there) and the legal lines close the footer, small */
.footer .funding { margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2rem) 0 0; border-top: 1px solid rgb(255 255 255 / 0.25); }
.footer .funding__logos { padding: 0.8rem 1.25rem; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -24px rgb(60 0 0 / 0.55); }
.footer .funding__logos img { height: 44px; }
.footer .funding__logos img.fin-feder { height: 19px; }
.footer .funding p { color: rgb(255 255 255 / 0.82); max-width: 62ch; }
.footer__legal { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; font-size: var(--fs-xs); color: #fff; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
/* leave the mascot's corner to the mascot */
@media (min-width: 961px) { .footer .funding, .footer__legal { max-width: 62rem; } }   /* same measure as the links: the corner is the mascot's */

@media (max-width: 960px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .footer__col--products { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__logo { width: 64px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .footer__col--products, .footer__col { grid-column: auto; }
  .footer__col ul:not(.footer__reach) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .footer__col--contact { padding-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.25); }   /* no heading: a rule marks where it starts */
  .footer__mascot { width: 84vw; right: -22vw; bottom: -18vw; }
  .footer .funding__logos { gap: 1.1rem; padding: 0.7rem 1rem; }
  .footer .funding__logos img { height: 36px; }
  .footer .funding__logos img.fin-feder { height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .footer__mascot .eye { animation: none !important; } }

/* ---------- Reveal (single, quiet) ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms ease, transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .stage__img, .picker__mini, .picker__bag { transform: none !important; }
}

/* =========================================================
   Product pages
   ========================================================= */

/* Breadcrumbs. Desktop: the trail, its steps joined by Phosphor's caret; links in soft ink that take the site's
   red underline on hover, the page you are on in ink. Phones: only the way back, as a pill (the flavour pills'
   warm grey) with the arrow pointing left: «← Productos», «← Noticias». The icons are masks, so they take the
   colour of the text on any background (white, glaze, night sky). */
.crumbs { --crumb-caret: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d=%22M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z%22/%3E%3C/svg%3E"); --crumb-back: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cpath d=%22M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z%22/%3E%3C/svg%3E"); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.55rem; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0; list-style: none;
  font-size: var(--fs-small); font-weight: 550; color: var(--ink-soft); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.crumbs li + li::before { content: ""; flex: none; width: 0.7em; height: 0.7em; background: currentColor; opacity: 0.45;
  -webkit-mask: var(--crumb-caret) center / contain no-repeat; mask: var(--crumb-caret) center / contain no-repeat; }
.crumbs a { padding-block: 0.3rem; color: var(--ink-soft); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  transition: color 180ms ease, text-decoration-color 180ms ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); text-decoration-color: var(--red); } }
.crumbs a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 650; }
@media (max-width: 760px) {
  /* phones: only the parent, as a pill that goes back */
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2) { display: inline-flex; }
  .crumbs li + li::before { display: none; }
  .crumbs ol { margin-bottom: 1.25rem; }
  .crumbs li:nth-last-child(2) a {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 1rem 0.4rem 0.8rem; border-radius: 999px;
    background: var(--crumb-bg, var(--soft-100)); color: var(--crumb-fg, var(--ink)); font-weight: 650; text-decoration: none;
    transition: transform 160ms var(--ease-out), background-color 180ms ease;
  }
  .crumbs li:nth-last-child(2) a::before { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor;
    -webkit-mask: var(--crumb-back) center / contain no-repeat; mask: var(--crumb-back) center / contain no-repeat; }
  .crumbs li:nth-last-child(2) a:active { transform: scale(0.97); }
}

/* Product hero */
.p-hero { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.p-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.p-hero__title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; }
.p-hero__tagline { margin-top: 1rem; font-size: var(--fs-h4); font-weight: 650; color: var(--red); }
.p-hero .lead { margin-top: 1.25rem; }
.p-hero .actions { margin-top: 2rem; }
.p-facts { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.75rem, 1rem + 2vw, 2.75rem); margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.p-facts div { display: grid; gap: 0.2rem; }
.p-facts dt { font-size: var(--fs-small); color: var(--ink-soft); }
/* the facts a buyer looks for first: weight, shelf life, flavours */
.p-facts dd { margin: 0; font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.p-hero__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.9; min-height: 0; }
.p-hero__blob { position: absolute; inset: 0 2%; color: var(--soft-100); }
.p-hero__blob svg { width: 100%; height: 100%; }
.p-hero__img { position: relative; width: 78%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 30px 36px rgb(120 20 18 / 0.2)); }
/* tall cut-outs: sized against the box so the box (and its blob) keep their proportion */
.p-hero__media--tall .p-hero__img { position: absolute; inset: 0; margin: auto; width: auto; height: 90%; max-width: 100%; }
/* Photo / 3D switch (Mini Magdalenas): photo and canvas share one cell and cross-fade */
.p-hero__media--turn > .p-hero__img { grid-area: 1 / 1; transition: opacity 360ms ease, scale 460ms var(--ease-out); animation-fill-mode: backwards; }
.p-hero__media--turn > .is-turntable { opacity: 0; scale: 0.96; pointer-events: none; }
.p-hero__media--turn.is-3d > .p-hero__img:not(.is-turntable) { opacity: 0; scale: 0.96; }
.p-hero__media--turn.is-3d > .is-turntable { opacity: 1; scale: 1; pointer-events: auto; }
.turn-switch {
  position: absolute; z-index: 2; left: 50%; bottom: -2.25rem; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem 0.45rem 0.5rem;
  border: 0; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 0.9375rem; font-weight: 650; cursor: pointer;
  box-shadow: 0 1px 0 rgb(120 20 18 / 0.06), 0 10px 24px -12px rgb(120 20 18 / 0.45);
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.turn-switch:active { transform: scale(0.97); }
.turn-switch:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.turn-switch__track { position: relative; width: 2.5rem; height: 1.45rem; border-radius: 999px; background: var(--soft-200); transition: background-color 220ms ease; }
.turn-switch__knob { position: absolute; top: 0.18rem; left: 0.18rem; width: 1.09rem; height: 1.09rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(60 0 0 / 0.3); transition: translate 260ms var(--ease-out); }
.turn-switch[aria-checked="true"] .turn-switch__track { background: var(--red); }
.turn-switch[aria-checked="true"] .turn-switch__knob { translate: 1.05rem 0; }
.turn-switch.is-loading .turn-switch__knob { animation: turn-wait 900ms ease-in-out infinite alternate; }
@keyframes turn-wait { to { translate: 1.05rem 0; } }
.turn-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 1rem; translate: -50% 0.4rem; margin: 0;
  padding: 0.3rem 0.8rem; border-radius: 999px; background: rgb(255 255 255 / 0.9);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 260ms ease, translate 360ms var(--ease-out);
}
.p-hero__media--turn.is-3d:not(.has-dragged) .turn-hint { opacity: 1; translate: -50% 0; transition-delay: 500ms; }
@media (max-width: 860px) {
  .p-hero__media--turn { margin-bottom: 3.25rem; }
  .turn-switch { bottom: -3rem; }
  .turn-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero__media--turn > .p-hero__img, .turn-hint { transition-property: opacity; scale: 1 !important; }
  .turn-switch.is-loading .turn-switch__knob { animation: none; }
}
/* 3D turntable: grab to spin; vertical swipes still scroll the page */
.p-hero__img.is-turntable { animation: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.p-hero__img.is-turntable.is-dragging { cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) {
  .p-hero__img { animation: hero-fade 900ms var(--ease-out) 120ms both; }
}
@media (max-width: 860px) {
  .p-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .p-hero__media { order: -1; aspect-ratio: 1.25 / 1; max-width: 520px; width: 100%; margin-inline: auto; }
}

/* Flavour tabs + ficha */
.flavours .lead { max-width: 60ch; }
.flavours--white { background: var(--paper); }
.tabs { margin-top: clamp(2rem, 4vw, 3rem); }
.tabs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.15; }
.tab small { font-size: var(--fs-xs); font-weight: 500; opacity: 0.8; }
/* every flavour chip as tall as a two-line one (name + «Próximamente»), so rows line up */
.tabs__list .chip.tab { min-height: 3.35rem; }
/* a flavour on the way: same chip, dashed and quiet, not clickable */
.tab--soon { border-style: dashed; color: var(--ink-soft); cursor: default; }
.tab--soon:active { transform: none; }
.chip[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.tabs__panels { margin-top: 1.5rem; }
.ficha {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  background: var(--paper); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 3rem);
  box-shadow: 0 1px 0 rgb(120 20 18 / 0.05), 0 24px 50px -34px rgb(120 20 18 / 0.35);
}
.flavours--white .ficha { background: var(--soft-100); box-shadow: none; }
.ficha:focus-visible { outline-offset: 4px; }
.ficha.is-entering .ficha__img, .ficha.is-entering .ficha__body { animation: ficha-in 420ms var(--ease-out) both; }
.ficha.is-entering .ficha__body { animation-delay: 40ms; }
@keyframes ficha-in { from { opacity: 0; transform: translateY(8px); } }
.ficha__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.95; align-self: start; }   /* static: the photo doesn't follow the scroll */
.ficha__blob { position: absolute; inset: 4%; color: var(--soft-100); }
.flavours--white .ficha__blob { color: #fff; }
.ficha__blob svg { width: 100%; height: 100%; }
.ficha__img { position: relative; width: 80%; max-height: 84%; object-fit: contain; filter: drop-shadow(0 22px 26px rgb(120 20 18 / 0.2)); }
.ficha__media--tall .ficha__img { width: auto; height: 70%; }
.ficha__pack { position: absolute; right: 0; bottom: 2%; width: 34%; max-height: 52%; object-fit: contain; filter: drop-shadow(0 14px 18px rgb(120 20 18 / 0.22)); }
.ficha__name { font-size: var(--fs-h3); }
.ficha__sub { display: inline-block; margin-left: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.8rem; font-weight: 650; vertical-align: middle; letter-spacing: 0; }
.ficha__block { margin-top: 1.5rem; }
.ficha__block h4 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
/* formats in the fact sheet: compact pills instead of a ticked list */
.ficha__formats { margin: 0.6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ficha__formats li { display: inline-flex; align-items: center; min-height: 30px; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: var(--soft-100); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; }
.ficha__formats .icon { display: none; }
.ficha__ing { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.65; }
.ficha__ing strong { color: var(--ink); font-weight: 750; }
.ficha__allergen { margin-top: 0.5rem; font-size: var(--fs-small); }
.ficha__note, .ficha__keep { margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--ink-soft); }
.ficha__pending { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--soft-100); font-size: var(--fs-small); color: var(--ink-soft); }
.flavours--white .ficha__pending { background: #fff; }
.ficha__pending a { color: var(--red); font-weight: 650; }
.ficha--single { margin-top: clamp(2rem, 4vw, 3rem); }
/* one short sheet next to a wide photo: centre the text and lower the photo box so no empty corner is left */
@media (min-width: 861px) {
  .ficha--single { align-items: center; }
  .ficha--single .ficha__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha__media { position: relative; top: auto; aspect-ratio: 1.2 / 1; }
  /* every flavour in view: two pills to a row, all the same width, instead of a row that slides sideways */
  .tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs__list .tab, .ftab, .glaze__tab, .cut__tab { min-width: 0; white-space: normal; text-align: left; }
}

/* Nutrition */
.nut { margin-top: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nut summary { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 700; }
.nut summary::-webkit-details-marker { display: none; }
.nut summary small { font-weight: 500; color: var(--ink-soft); font-size: var(--fs-xs); }
.nut__chev { margin-left: auto; transition: transform 220ms var(--ease-out); color: var(--red); }
.nut[open] .nut__chev { transform: rotate(90deg); }
.nut table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.nut th, .nut td { padding: 0.45rem 0; text-align: left; border-top: 1px solid var(--line); font-weight: 500; }
.nut td { text-align: right; font-weight: 650; }
.nut tr:first-child th, .nut tr:first-child td { border-top: 0; }
.nut tr.is-sub th { padding-left: 1rem; color: var(--ink-soft); }
.nut tr.is-sub td { font-weight: 500; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .nut summary:hover span { color: var(--red); } }

/* Format tiles */
.fmt-groups { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.fmt-group h3 { font-size: var(--fs-h4); font-weight: 720; letter-spacing: -0.01em; padding-bottom: 0.9rem; border-bottom: 2px solid var(--red); }
.fmt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: 1.75rem 0 0; padding: 0; list-style: none; }
.fmt { display: grid; gap: 0.2rem; align-content: start; }
.fmt img { width: 100%; aspect-ratio: 1 / 0.9; object-fit: contain; margin-bottom: 0.9rem; filter: drop-shadow(0 16px 18px rgb(120 20 18 / 0.16)); }
.fmt strong { font-size: 1.0625rem; line-height: 1.3; }
.fmt span { font-size: var(--fs-small); color: var(--ink-soft); }
.fmt-groups--single .fmt-list { grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); margin-top: 0; }
@media (max-width: 560px) { .fmt-list, .fmt-groups--single .fmt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Related products */
.related { padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); }
.rel-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); margin: 1.75rem 0 0; padding: 0; list-style: none; }
.rel { display: grid; gap: 0.75rem; text-decoration: none; justify-items: center; text-align: center; }
.rel__img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--soft-100); }
.rel__img img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; transition: transform 300ms var(--ease-out); filter: drop-shadow(0 10px 12px rgb(120 20 18 / 0.18)); }
/* wide shots (groups, wrapped bars): the circle's horizontal chord fits them larger */
.rel__img img.is-wide { inset: 14% 6%; width: 88%; height: 72%; }
.rel__name { font-weight: 650; font-size: var(--fs-small); line-height: 1.3; }
@media (hover: hover) and (pointer: fine) {
  .rel:hover .rel__img img { transform: scale(1.06) rotate(-2deg); }
  .rel:hover .rel__name { color: var(--red); }
}
@media (max-width: 860px) {
  .rel-list { grid-template-columns: repeat(7, 36%); overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .rel-list::-webkit-scrollbar { display: none; }
  .rel-list li { scroll-snap-align: start; }
}

/* Home: product categories */
.products-home__head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Home: product menu («la carta»). Big type rows; on pointer devices a red band
   rises behind the row and the product photo follows the cursor. */
.products-home { overflow-x: clip; }
.carta { margin: 0; padding: 0; list-style: none; border-bottom: 1.5px solid var(--red); }
.carta__item { position: relative; }
/* the active row comes in front of its neighbours, so its red band covers the rules they draw */
.carta__item:hover, .carta__item:focus-within { z-index: 2; }
.carta__sub > li { position: relative; }
.carta__sub > li:hover, .carta__sub > li:focus-within { z-index: 2; }
.carta__item::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1.5px; background: var(--red);
  transform-origin: left; pointer-events: none;
}
.carta__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(1.1rem, 0.6rem + 1.6vw, 2.1rem);
  color: var(--ink); text-decoration: none; outline: none;
}
.carta__row::before {
  content: ""; position: absolute; inset-block: -2px; inset-inline: calc(50% - 50vw); z-index: 0;   /* 2px past the row: covers the red rules above and below */
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform 220ms var(--ease-out);
}
.carta__row > span { position: relative; z-index: 1; }
.carta__name {
  margin: 0; font-size: clamp(2.6rem, 0.9rem + 6.4vw, 6rem); font-weight: 800; font-stretch: 85%;
  line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance;
}
.carta__row .carta__name { justify-self: start; transition: color 220ms ease, translate 420ms var(--ease-out); }
.carta__meta { display: grid; justify-items: end; gap: 0.45rem; margin: 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; text-align: right; color: var(--ink-soft); transition: color 220ms ease; }
.carta__count {
  padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--red); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.4;
  transition: background-color 220ms ease, color 220ms ease;
}
.carta__go {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--red); color: #fff;
  transition: background-color 220ms ease, color 220ms ease, transform 260ms var(--ease-out);
}
.carta__go .icon { width: 1.35rem; height: 1.35rem; }

/* Floating photo: hidden until the row is hovered or focused */
.carta__img {
  position: absolute; z-index: 3; left: 70%; top: 50%; translate: -50% -50%;
  width: clamp(9rem, 4rem + 9vw, 15rem); height: clamp(9rem, 4rem + 9vw, 15rem);
  object-fit: contain; pointer-events: none;
  filter: blur(8px) drop-shadow(0 24px 26px rgb(60 0 0 / 0.35));
  opacity: 0; scale: 0.82;
  transition: opacity 160ms ease, scale 220ms var(--ease-out), filter 200ms ease;
}
.is-tracking > .carta__img { left: 0; top: 0; }
.carta__row:focus-visible .carta__img, .carta__sub-row:focus-visible .carta__img {
  opacity: 1; scale: 1; filter: blur(0) drop-shadow(0 24px 26px rgb(60 0 0 / 0.35));
  transition: opacity 220ms ease, scale 380ms var(--ease-out), filter 260ms ease;
}

/* Active row: red band from below, white type */
.carta__row:focus-visible::before { transform: scaleY(1); transform-origin: bottom; transition-duration: 340ms; }
.carta__row:focus-visible .carta__name, .carta__row:focus-visible .carta__meta { color: #fff; }
.carta__row:focus-visible .carta__count, .carta__row:focus-visible .carta__go { background: #fff; color: var(--red); }

/* Bizcochos: one heading row, five formats beneath */
.carta__item--group { padding-block: clamp(1.1rem, 0.6rem + 1.6vw, 2.1rem) clamp(1.25rem, 0.8rem + 1.4vw, 2rem); }
.carta__group-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.5rem 2rem; }
.carta__group-head .carta__meta { padding-bottom: 0.4rem; }
.carta__sub { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(0.75rem, 2vw, 2rem); margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; }
.carta__sub-row {
  position: relative; display: grid; gap: 0.3rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; outline: none;
}
.carta__sub-name {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: clamp(1.3rem, 0.9rem + 1.2vw, 2.1rem); font-weight: 800; font-stretch: 88%;
  line-height: 1.05; letter-spacing: -0.025em; transition: color 200ms ease;
}
.carta__sub-name .icon { flex: none; width: 0.75em; height: 0.75em; color: var(--red); transition: translate 260ms var(--ease-out); }
.carta__sub-meta { font-size: var(--fs-small); color: var(--ink-soft); }
.carta__sub-row .carta__img { --lift: 58%; left: 50%; top: -50%; width: clamp(6.5rem, 3.5rem + 5vw, 9.5rem); height: clamp(6.5rem, 3.5rem + 5vw, 9.5rem); }
.carta__sub-row.is-tracking .carta__img { left: 0; top: 0; }
.carta__sub-row:focus-visible { border-top-color: var(--red); }
.carta__sub-row:focus-visible .carta__sub-name { color: var(--red); }
.carta__sub-row:focus-visible .carta__sub-name .icon { translate: 0.2em 0; }
.carta__row:focus-visible, .carta__sub-row:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.carta__row:focus-visible { outline-color: #fff; outline-offset: -6px; }

@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .carta__row:hover::before { transform: scaleY(1); transform-origin: bottom; transition-duration: 340ms; }
  .carta__row:hover .carta__name { color: #fff; translate: 0.15em 0; }
  .carta__row:hover .carta__meta { color: #fff; }
  .carta__row:hover .carta__count, .carta__row:hover .carta__go { background: #fff; color: var(--red); }
  .carta__row:hover .carta__go { transform: rotate(-45deg); }
  .carta__row:hover .carta__img, .carta__sub-row:hover .carta__img {
    opacity: 1; scale: 1; filter: blur(0) drop-shadow(0 24px 26px rgb(60 0 0 / 0.35));
    transition: opacity 220ms ease, scale 380ms var(--ease-out), filter 260ms ease;
  }
  .carta__sub-row:hover { border-top-color: var(--red); }
  .carta__sub-row:hover .carta__sub-name { color: var(--red); }
  .carta__sub-row:hover .carta__sub-name .icon { translate: 0.2em 0; }
}
.carta__row:active .carta__go { scale: 0.94; }

/* Desktop with a mouse: details live under the name, hidden; the row opens on hover so the photo
   can roam freely between the name and the arrow */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .carta__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 0fr; row-gap: 0; transition: grid-template-rows 420ms var(--ease-out), row-gap 420ms var(--ease-out); }
  .carta__row .carta__name { grid-column: 1; grid-row: 1; }
  .carta__row .carta__meta {
    grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; text-align: left;
    font-size: var(--fs-lead); opacity: 0; translate: 0 -0.4rem;
    transition: color 220ms ease, opacity 200ms ease, translate 420ms var(--ease-out);
  }
  .carta__row .carta__count { font-size: var(--fs-small); }
  .carta__row .carta__go { grid-column: 2; grid-row: 1 / span 2; }
  .carta__row:hover, .carta__row:focus-visible { grid-template-rows: auto 1fr; row-gap: 0.75rem; }
  .carta__row:hover .carta__meta, .carta__row:focus-visible .carta__meta { opacity: 1; translate: 0 0; transition: color 220ms ease, opacity 260ms ease 80ms, translate 420ms var(--ease-out); }
}
/* Bizcochos formats: hidden arrow circle outside desktop (mobile keeps its inline arrow) */
.carta__sub-go { display: none; }
/* Desktop with a mouse: the five bizcocho formats are rows like the ones above, clearly smaller
   (they hang from «Bizcochos»): on hover the row opens to show its weight and a line about it,
   the red band runs edge to edge and the photo follows the cursor */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .carta__item--group { padding-bottom: 0; }
  .carta__sub { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
  .carta__sub-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 0fr; align-items: center;
    gap: 0 clamp(1rem, 2vw, 2rem); padding: clamp(0.8rem, 0.45rem + 0.9vw, 1.2rem) 0 clamp(0.8rem, 0.45rem + 0.9vw, 1.2rem) clamp(1.5rem, 3vw, 3rem);
    border-top: 1px solid var(--line);
    transition: grid-template-rows 420ms var(--ease-out), row-gap 420ms var(--ease-out);
  }
  .carta__sub-row::before {
    content: ""; position: absolute; inset-block: -2px; inset-inline: calc(50% - 50vw); z-index: 0;   /* over its own top border and the next rule */
    background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform 220ms var(--ease-out);
  }
  .carta__sub-row > span { position: relative; z-index: 1; }
  .carta__sub-name { grid-column: 1; grid-row: 1; justify-self: start; font-size: clamp(2rem, 0.9rem + 2.5vw, 3.25rem); font-stretch: 86%; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; transition: color 220ms ease, translate 420ms var(--ease-out); }
  .carta__sub-name .icon { display: none; }
  .carta__sub-meta {
    grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden; max-width: 62ch; text-wrap: pretty;
    font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--ink-soft);
    opacity: 0; translate: 0 -0.4rem; transition: color 220ms ease, opacity 200ms ease, translate 420ms var(--ease-out);
  }
  .carta__sub-go {
    grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--red); color: #fff; transition: background-color 220ms ease, color 220ms ease, transform 260ms var(--ease-out);
  }
  .carta__sub-go .icon { width: 1.1rem; height: 1.1rem; }
  .carta__sub-row .carta__img, .carta__sub-row.is-tracking .carta__img { --lift: 0%; width: clamp(8rem, 3.5rem + 7vw, 12rem); height: clamp(8rem, 3.5rem + 7vw, 12rem); }
  .carta__sub-row .carta__img { left: 70%; top: 50%; }
  .carta__sub-row.is-tracking .carta__img { left: 0; top: 0; }
  .carta__sub-row:hover, .carta__sub-row:focus-visible { grid-template-rows: auto 1fr; row-gap: 0.5rem; }
  .carta__sub-row:hover::before, .carta__sub-row:focus-visible::before { transform: scaleY(1); transform-origin: bottom; transition-duration: 340ms; }
  .carta__sub-row:hover .carta__sub-name, .carta__sub-row:focus-visible .carta__sub-name { color: #fff; translate: 0.15em 0; }
  .carta__sub-row:hover .carta__sub-meta, .carta__sub-row:focus-visible .carta__sub-meta { color: #fff; opacity: 1; translate: 0 0; transition: color 220ms ease, opacity 260ms ease 80ms, translate 420ms var(--ease-out); }
  .carta__sub-row:hover .carta__sub-go, .carta__sub-row:focus-visible .carta__sub-go { background: #fff; color: var(--red); transform: rotate(-45deg); }
  .carta__sub-row:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
}
/* Lines draw in as the list scrolls into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta__item::before { animation: carta-line linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes carta-line { from { transform: scaleX(0); } }

/* Touch and small screens: the photo sits in the row, always visible */
@media (max-width: 700px), (hover: none) {
  .carta__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; padding-block: 1rem; }
  .carta__row::before { display: none; }
  .carta__row:active { background: var(--soft-100); }
  .carta__img, .is-tracking > .carta__img {
    position: static; grid-column: 1; grid-row: 1 / span 2; translate: none; rotate: none;
    width: clamp(5rem, 3rem + 8vw, 8rem); height: clamp(4.5rem, 2.6rem + 7vw, 7rem);
    opacity: 1; scale: 1; filter: drop-shadow(0 10px 12px rgb(60 0 0 / 0.22));
  }
  .carta__name { grid-column: 2; grid-row: 1; align-self: end; }
  .carta__name { font-size: clamp(2rem, 1.2rem + 4vw, 3.5rem); }
  .carta__meta { grid-column: 2; grid-row: 2; justify-items: start; text-align: left; margin-top: -0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
  .carta__go { grid-column: 3; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; }
  .carta__item--group { padding-block: 1.25rem 1.5rem; }
  .carta__group-head .carta__meta { margin: 0; padding: 0; }
  .carta__sub { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .carta__sub-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: 0; padding-block: 0.6rem; }
  .carta__sub-row .carta__img, .carta__sub-row.is-tracking .carta__img { grid-row: 1 / span 2; width: 4.5rem; height: 3.75rem; }
  .carta__sub-name, .carta__sub-meta { grid-column: 2; }
  .carta__sub-name { font-size: 1.4rem; }
  /* same pattern as the rows above: red circle with the arrow on the right, a size smaller */
  .carta__sub-name .icon { display: none; }
  .carta__sub-go { display: grid; place-items: center; grid-column: 3; grid-row: 1; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--red); color: #fff; }
  .carta__sub-go .icon { width: 1rem; height: 1rem; }
  .carta__sub-row:active .carta__sub-go { scale: 0.94; }
  .carta__sub-row:active { background: var(--soft-100); }
}
/* Phones: the names carry the menu. Details (weights, descriptions) live on each product page,
   so they are dropped here and the names grow. No drop-shadow on the thumbnails: iOS Safari
   clips it to the image box and paints a grey square behind each photo. */
@media (max-width: 700px) {
  .carta__img, .is-tracking > .carta__img { filter: none; }
  .carta__row { align-items: center; padding-block: 1.1rem; }
  .carta__row .carta__meta, .carta__group-head .carta__meta, .carta__sub-meta { display: none; }
  .carta__name { grid-row: 1 / span 2; align-self: center; font-size: clamp(2.35rem, 0.9rem + 6.4vw, 3.5rem); line-height: 0.95; }
  .carta__img, .is-tracking > .carta__img { width: clamp(4.75rem, 2.5rem + 9vw, 7rem); height: clamp(4.75rem, 2.5rem + 9vw, 7rem); }
  .carta__group-head .carta__name { font-size: clamp(2.35rem, 0.9rem + 6.4vw, 3.5rem); }
  .carta__sub { margin-top: 0.75rem; }
  .carta__sub-row { padding-block: 0.75rem; }
  .carta__sub-row .carta__img, .carta__sub-row.is-tracking .carta__img { grid-row: 1; width: 4.75rem; height: 4rem; }
  .carta__sub-name { grid-row: 1; font-size: clamp(2rem, 1rem + 4.4vw, 2.6rem); }
}

/* Phones: the desktop menu, and its gesture. No photos at rest, as on desktop; the row crossing the middle of the
   screen lights up with the desktop's red band (`.is-lit`, set in main.js): white type, its line underneath,
   the photo coming in on the right and the arrow turning in a white circle. The thumb is the cursor */
@media (max-width: 700px) {
  .carta__item:has(.is-lit), .carta__sub > li:has(.is-lit) { z-index: 2; }
  .carta__row, .carta__sub-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 0fr; align-items: center; column-gap: 1rem; row-gap: 0;
    transition: grid-template-rows 420ms var(--ease-out), row-gap 420ms var(--ease-out);
  }
  .carta__row { padding-block: 1.15rem; }
  .carta__row:active, .carta__sub-row:active { background: none; }
  .carta__row::before, .carta__sub-row::before {
    display: block; content: ""; position: absolute; inset-block: -2px; inset-inline: calc(50% - 50vw); z-index: 0;
    background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform 220ms var(--ease-out);
  }
  .carta__sub-row > span { position: relative; z-index: 1; }
  .carta__name, .carta__group-head .carta__name { grid-column: 1; grid-row: 1; align-self: center; font-size: clamp(2.35rem, 0.9rem + 6.4vw, 3.5rem); line-height: 0.95; }
  .carta__row .carta__name, .carta__sub-name { transition: color 220ms ease, translate 420ms var(--ease-out); }
  /* the line under the name: folded away until the row is lit */
  .carta__row .carta__meta, .carta__sub-meta {
    display: block; grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden; margin: 0;
    text-align: left; font-size: var(--fs-small); font-weight: 600; color: #fff; opacity: 0; translate: 0 -0.4rem;
    transition: opacity 160ms ease, translate 420ms var(--ease-out);
  }
  /* names and lines keep clear of the photo, which comes in on the right («Mini / Magdalenas» on two lines) */
  .carta__row .carta__name, .carta__row .carta__meta { padding-right: 5.75rem; }
  .carta__sub-name, .carta__sub-meta { padding-right: 4.75rem; }
  .carta__group-head .carta__meta { display: none; }
  .carta__go, .carta__sub-go {
    display: grid; place-items: center; grid-column: 2; grid-row: 1 / span 2; align-self: center; border-radius: 50%; background: var(--red); color: #fff;
    transition: background-color 220ms ease, color 220ms ease, transform 260ms var(--ease-out);
  }
  .carta__go { width: 2.75rem; height: 2.75rem; }
  .carta__sub-go { width: 2.35rem; height: 2.35rem; }
  .carta__sub-go .icon { width: 1rem; height: 1rem; }
  /* bizcochos: the five formats hang from «Bizcochos» as smaller rows with fine rules, as on desktop */
  .carta__item--group { padding-block: 1.25rem 0; }
  .carta__sub { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0.75rem; }
  .carta__sub-row { padding-block: 0.85rem; border-top: 1px solid var(--line); }
  .carta__sub-name { grid-column: 1; grid-row: 1; justify-self: start; font-size: clamp(1.9rem, 1rem + 4vw, 2.5rem); font-stretch: 86%; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
  .carta__sub-name .icon { display: none; }
  /* the photo: hidden, on the right between the name and the arrow; it comes in when the row lights up */
  .carta__img, .is-tracking > .carta__img, .carta__sub-row .carta__img, .carta__sub-row.is-tracking .carta__img {
    position: absolute; z-index: 2; left: auto; right: 3.6rem; top: 50%; grid-row: auto; grid-column: auto;
    width: 5.75rem; height: 5.75rem; translate: 0 -50%; rotate: -6deg; scale: 0.8; opacity: 0; filter: blur(6px);
    transition: opacity 160ms ease, scale 220ms var(--ease-out), filter 200ms ease, rotate 420ms var(--ease-out);
  }
  .carta__sub-row .carta__img { right: 3.2rem; width: 4.75rem; height: 4.75rem; }
  /* lit */
  .is-lit::before { transform: scaleY(1); transform-origin: bottom; transition-duration: 340ms; }
  .carta__row.is-lit, .carta__sub-row.is-lit { grid-template-rows: auto 1fr; row-gap: 0.45rem; }
  .is-lit .carta__name, .is-lit .carta__sub-name { color: #fff; translate: 0.1em 0; }
  .is-lit .carta__meta, .is-lit .carta__sub-meta { opacity: 1; translate: 0 0; transition: opacity 260ms ease 80ms, translate 420ms var(--ease-out); }
  .is-lit .carta__go, .is-lit .carta__sub-go { background: #fff; color: var(--red); transform: rotate(-45deg); }
  .is-lit .carta__img { opacity: 1; scale: 1; rotate: 0deg; filter: none; transition: opacity 220ms ease, scale 380ms var(--ease-out), filter 260ms ease, rotate 520ms var(--ease-out); }
  .carta__sub-row.is-lit { border-top-color: transparent; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .carta__row, .carta__sub-row, .carta__row::before, .carta__sub-row::before, .carta__img,
  .carta__row .carta__meta, .carta__sub-meta, .carta__go, .carta__sub-go { transition: none !important; }
}

/* Hero parallax: each row drifts at its own speed while the hero scrolls away */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hm { animation: hm-dolly linear both; animation-timeline: scroll(root); animation-range: 0 100vh; will-change: translate, scale, rotate; }
    .hero__mascot { translate: 0 0; animation: hero-mascot 1400ms var(--ease-out) 150ms both, mascot-drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90vh; }
    .hero__inner { animation: hero-lift linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  }
}
/* Scrolling flies the camera through the rows: near muffins rise, spread and grow far more than distant ones,
   tilting outwards, so the depth reads as real parallax instead of a flat picture */
@keyframes hm-dolly { to {
  translate: calc(var(--c) * var(--f) * 46px * var(--k, 1)) calc(var(--f) * -230px * var(--k, 1));
  scale: calc(1 + var(--f) * 0.18 * var(--k, 1));
  rotate: calc(var(--c) * var(--f) * 4deg * var(--k, 1));
} }
@keyframes hm-in { from { opacity: 0; translate: 0 45%; filter: blur(10px); } }
@keyframes hero-lift { to { translate: 0 -70px; opacity: 0.35; } }
@keyframes mascot-drift { to { translate: 0 90px; rotate: -10deg; scale: 0.92; } }

/* Home: «Seguimos siendo DonDulce». The red band and white card of the mini magdalenas picker: on the left the
   words, the way to Empresa and the certifications; on the right one logo at a time on warm grey, chosen with year
   pills. On arrival it tells the story once (1988 → 2018 → 2026) and stops on today's logo, which winks */
/* one column of words centred on the card: title, entry, the certifications as a line of proof, one button */
.legacy__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "intro card";
  gap: 2.5rem clamp(3rem, 7vw, 7rem); align-items: center;
}
.legacy__intro { grid-area: intro; }
.legacy__intro .lead { margin-top: 1.25rem; max-width: 40ch; }
.legacy__intro .btn { margin-top: 2.25rem; }

.legacy__card {
  grid-area: card; display: grid; gap: 1rem; padding: clamp(0.75rem, 1.5vw, 1.25rem); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgb(80 0 0 / 0.12), 0 36px 60px -36px rgb(60 0 0 / 0.8);
}
/* the logos sit on the white of the card itself, nothing behind them; each box is sized so the three weigh the same */
.legacy__stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; }
.legacy__logo {
  grid-area: 1 / 1; position: relative; width: 56%; height: 80%; display: grid; place-items: center;
  opacity: 0; filter: blur(10px); transform: scale(0.9) rotate(-5deg);
  transition: opacity 420ms ease, filter 520ms var(--ease-out), transform 620ms var(--ease-out);
}
.legacy__logo[data-year="1988"] { width: 74%; }   /* the 1988 banner is wide and short */
.legacy__logo[data-year="2018"] { width: 50%; height: 72%; }   /* trimmed to the blob; the 2026 SVG keeps a white halo round it */
.legacy__logo.is-active { opacity: 1; filter: none; transform: none; }
.legacy__logo img, .legacy__logo svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* year pills: the flavour pills (warm grey; the chosen one white, ringed in red), years in display */
.legacy__years { padding-top: clamp(0.75rem, 1.5vw, 1.25rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.legacy__pill {
  min-height: 3.25rem; padding: 0.4rem 0.75rem; border: 0; border-radius: 999px; background: var(--soft-100); color: var(--ink);
  box-shadow: inset 0 0 0 2px transparent; font: inherit; font-size: 1.375rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.legacy__pill:active { transform: scale(0.97); }
.legacy__pill[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 0 0 2px var(--red), 0 12px 24px -14px rgb(120 20 18 / 0.45); }
.legacy__pill:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .legacy__pill[aria-pressed="false"]:hover { background: var(--soft-200); } }

/* certifications as a line of proof under the entry, not a second button: the three seals in white circles that
   overlap like a stack of badges, and the sentence in white; the whole line goes to the certifications on Empresa */
.legacy__proof {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem;
  margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.25);
  max-width: 34rem; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.legacy__seals { display: flex; }
.legacy__seals > span {
  display: grid; place-items: center; width: 3.85rem; height: 3.85rem; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 3px var(--red-700), 0 10px 18px -10px rgb(60 0 0 / 0.6);
  transition: transform 260ms var(--ease-out);
}
.legacy__seals > span + span { margin-left: -0.65rem; }
.legacy__seals img { display: block; width: 66%; height: 66%; object-fit: contain; }
.legacy__seals > span:nth-child(2) img { width: 74%; }   /* the IFS mark is wide and short */
.legacy__proof-text { font-weight: 600; line-height: 1.4; text-wrap: pretty; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: text-decoration-color 200ms ease; }
.legacy__proof-text .nowrap { white-space: nowrap; }
.legacy__proof-text .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; transition: transform 220ms var(--ease-out); }
.legacy__proof:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .legacy__proof:hover .legacy__proof-text { text-decoration-color: #fff; }
  .legacy__proof:hover .legacy__proof-text .icon { transform: translateX(3px); }
  .legacy__proof:hover .legacy__seals > span { transform: translateY(-3px); }
  .legacy__proof:hover .legacy__seals > span:nth-child(2) { transition-delay: 40ms; }
  .legacy__proof:hover .legacy__seals > span:nth-child(3) { transition-delay: 80ms; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy__logo { transition: opacity 200ms ease; filter: none; transform: none; }
}
@media (max-width: 860px) {
  .legacy__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card"; gap: 2.5rem; }

}
@media (max-width: 480px) {
  .legacy__stage { aspect-ratio: 4 / 3; }
  .legacy__logo { width: 66%; height: 84%; }
  .legacy__logo[data-year="1988"] { width: 88%; }
  .legacy__logo[data-year="2018"] { width: 60%; height: 76%; }
  .legacy__pill { font-size: 1.2rem; min-height: 3rem; }
  .legacy__seals > span { width: 3.4rem; height: 3.4rem; }
  .legacy__proof-text { font-size: var(--fs-small); }
}

/* Sequillos feature: panel floats as its own card, with breathing room before the next band */
.feature__flavours { width: fit-content; max-width: 100%; margin: 1.5rem 0 2rem; }
.feature { padding-bottom: var(--section); }
@media (max-width: 700px) { .feature { padding-bottom: calc(var(--section) * 0.8); } }
/* Mid widths: the photo is too short to hold the card, so it spans the full width like on phones */
@media (min-width: 701px) and (max-width: 1099px) {
  .feature__panel { width: auto; margin-left: 0; }
}
/* Wide screens: the card sits inside the photo, bottom right, so no white gap opens beside it */
@media (min-width: 1100px) {
  .feature { padding-bottom: 0; }
  .feature > .wrap { position: absolute; inset-inline: 0; bottom: clamp(3.5rem, 4.5vw, 5rem); }
  .feature__panel { margin-top: 0; }
}

/* =========================================================
   Trabaja con nosotros
   ========================================================= */
/* left: title and text, centred on the card; right: the form card, with Dondulcín peeking over its top edge and winking at whoever applies */
.jobs-page { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); background: var(--soft-100); --crumb-bg: var(--paper); }   /* warm grey, so the white card has edges for Dondulcín to sit on */
.jobs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 2.5rem clamp(3rem, 7vw, 7rem); align-items: center; }
.jobs-intro__title { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem); font-weight: 800; font-stretch: 88%; line-height: 0.96; letter-spacing: -0.032em; text-wrap: balance; }
.jobs-intro__lead { margin-top: 1.5rem; max-width: 38ch; color: var(--ink-soft); text-wrap: pretty; }
.jobs-intro__help { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--soft-200); max-width: 30rem; color: var(--ink-soft); }
.jobs-intro__help a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.3em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .jobs-intro__help a:hover { color: var(--red); } }

/* the mascot sits on the card's top-right corner, whole and in front; --peek is how much of him rises above the card */
.jobs-card { --peek: clamp(4rem, 1.5rem + 3.5vw, 5.5rem); --sink: 2.5rem; position: relative; padding-top: var(--peek); }
.jobs-card > .form { position: relative; }
.jobs-card__mascot {
  /* his base sinks --sink into the card, so he rests on the corner instead of floating over it */
  position: absolute; z-index: 1; bottom: calc(100% - var(--peek) - var(--sink)); right: clamp(1.5rem, 5%, 3rem);
  width: clamp(6.5rem, 3rem + 5vw, 8.75rem); height: auto; transform: rotate(9deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 14px 14px rgb(120 20 18 / 0.18));
}
@media (prefers-reduced-motion: no-preference) {
  /* once, on arrival: he comes up from behind the card */
  .jobs-card__mascot { animation: jobs-peek 900ms var(--ease-out) 250ms both; }
  @keyframes jobs-peek { from { opacity: 0; transform: translateY(18%) rotate(-6deg) scale(0.9); } }
}

.form--cv { gap: 1.75rem; }
.form--cv > h2 { margin-bottom: -0.25rem; }
.field__label { font-weight: 650; font-size: 0.975rem; }

/* PDF picker: the whole row is the file input; once chosen, it turns white with a red edge and names the file */
.drop {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: 6rem; padding: 1rem 1.25rem 1rem 1rem; border: 1.5px dashed var(--soft-200); border-radius: 12px;
  background: var(--soft-100); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out);
}
.field .drop { padding: 1rem 1.25rem 1rem 1rem; }   /* the drop is a <label>: beat `.field label { padding: 0 }` */
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop__badge {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 12px;
  background: var(--paper); color: var(--red); box-shadow: 0 10px 20px -14px rgb(120 20 18 / 0.45);
  transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--ease-out);
}
.drop__badge .icon { width: 1.75rem; height: 1.75rem; }
.drop__body { display: grid; gap: 0.15rem; min-width: 0; }
.drop__text { font-weight: 700; font-size: 1.0625rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop__hint { font-size: var(--fs-small); font-weight: 450; color: var(--ink-soft); }
.drop__end { display: grid; place-items: center; color: var(--red); }
.drop__end .icon { width: 1.4rem; height: 1.4rem; transition: transform 260ms var(--ease-out); }
.drop:active { transform: scale(0.99); }
.drop:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.drop.is-over { border-color: var(--red); background: var(--paper); }
.drop.is-over .drop__badge { transform: translateY(-3px) rotate(-4deg); }
.drop.has-file { border-style: solid; border-color: var(--red); background: var(--paper); }
.drop.has-file .drop__badge { background: var(--red); color: #fff; box-shadow: none; animation: drop-in 420ms var(--ease-out); }
.drop.has-file .drop__end { display: none; }
@keyframes drop-in { from { transform: scale(0.86); } }
@media (hover: hover) and (pointer: fine) {
  .drop:hover { border-color: var(--red); }
  .drop:not(.has-file):hover .drop__end .icon { transform: translateY(-3px); }
}
.field[data-invalid] .drop { border-color: var(--red); border-style: solid; }
.field[data-invalid] .drop.has-file .drop__badge { background: var(--paper); color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
@media (prefers-reduced-motion: reduce) {
  .drop, .drop__badge, .drop__end .icon { transition: none; animation: none; }
  .drop.is-over .drop__badge, .drop:active { transform: none; }
}

.form__row { align-items: start; }

@media (max-width: 860px) {
  .jobs-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .jobs-intro__lead { max-width: 40ch; }
  .jobs-intro__help { margin-top: 1.5rem; padding-top: 1.25rem; }
  .jobs-card { --peek: 3.25rem; --sink: 1.75rem; }
  .jobs-card__mascot { width: 5.25rem; right: 1.25rem; }
}
@media (max-width: 560px) {
  .drop { grid-template-columns: auto minmax(0, 1fr); }
  .field .drop { padding-right: 1rem; }
  .drop__end { display: none; }
  .form--cv .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Noticias
   ========================================================= */
.news-head { padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.news-cat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); font-weight: 650; line-height: 1.3; color: var(--red); text-decoration: none; }
.news-cat .icon { flex: none; width: 1.1em; height: 1.1em; }
a.news-cat:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.nl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.nl-meta time { font-size: var(--fs-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Latest three: one lead story, two beside it */
/* Home: the same «latest three» as the news page, title and link to the archive on one line */
.home-news__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.news-latest__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.nl-main, .nl-side { color: inherit; text-decoration: none; outline: none; }
.nl-main { display: grid; align-content: start; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.nl-main__media, .nl-side__media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--soft-100); }
.nl-main__media { aspect-ratio: 16 / 10; }
.nl-main__media img, .nl-side__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.nl-main__text { display: grid; justify-items: start; gap: 0.9rem; }
.nl-main__title { font-size: var(--fs-h2); font-weight: 800; font-stretch: 86%; line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; transition: color 200ms ease; }
.nl-main__excerpt { max-width: 54ch; font-size: 1.125rem; color: var(--ink-soft); }
.nl-main .link-arrow { margin-top: 0.4rem; }
.nl-stack { display: grid; grid-template-rows: auto auto; align-content: start; gap: clamp(1.5rem, 3vw, 2.5rem); }
.nl-side { display: grid; gap: 1rem; }
.nl-side__media { aspect-ratio: 16 / 9; }
.nl-side__media--plain { display: grid; place-items: center; background: var(--soft-100); color: var(--red); }
.nl-side__media--plain .icon { width: clamp(3rem, 5vw, 4.5rem); height: clamp(3rem, 5vw, 4.5rem); transition: transform 500ms var(--ease-out); }
.nl-side__text { display: grid; gap: 0.6rem; }
.nl-side__title { font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); font-weight: 800; font-stretch: 90%; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; transition: color 200ms ease; }
.nl-main:focus-visible .nl-main__media, .nl-side:focus-visible .nl-side__media { outline: 3px solid var(--red); outline-offset: 4px; }
.nl-main:focus-visible .nl-main__title, .nl-side:focus-visible .nl-side__title { color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .nl-main:hover .nl-main__media img, .nl-side:hover .nl-side__media img { transform: scale(1.035); }
  .nl-side:hover .nl-side__media--plain .icon { transform: rotate(-8deg) scale(1.08); }
  .nl-main:hover .nl-main__title, .nl-side:hover .nl-side__title { color: var(--red); }
  .nl-main:hover .link-arrow .icon { transform: translateX(4px); }
}

/* Archive: years down the side, a typographic row per story */
.archive { padding-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.archive__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.archive__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.chip__n { margin-left: 0.2rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.72; }
.chip[aria-pressed="true"] .chip__n { opacity: 1; }   /* on the red chip the faded count fails contrast */
.year { display: grid; grid-template-columns: minmax(clamp(6.5rem, 11vw, 11rem), max-content) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 3rem); border-top: 1.5px solid var(--red); }
.year + .year { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.year__num {
  position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; margin: 0; padding-top: 1.1rem;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 5.25rem); font-weight: 800; font-stretch: 85%; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.archive__list { margin: 0; padding: 0; list-style: none; }
.archive__list li + li { border-top: 1px solid var(--line); }
.arow {
  position: relative; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto 2.5rem; align-items: center;
  gap: 0.5rem clamp(1rem, 2.5vw, 2.25rem); padding-block: clamp(1.05rem, 0.8rem + 0.6vw, 1.5rem);
  color: var(--ink); text-decoration: none; outline: none;
}
.arow time { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.arow__title { justify-self: start; font-size: clamp(1.2rem, 0.95rem + 0.85vw, 1.7rem); font-weight: 750; font-stretch: 92%; line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; transition: color 200ms ease, translate 380ms var(--ease-out); }
.arow .news-cat { justify-self: end; color: var(--ink-soft); font-weight: 600; }
.arow .news-cat .icon { color: var(--red); }
.arow__go { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--soft-200); transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 260ms var(--ease-out); }
.arow__go .icon { width: 1.1rem; height: 1.1rem; }
.arow__ph { display: none; }
.float-img {
  position: absolute; z-index: 3; left: 72%; top: 50%; translate: -50% -50%;
  width: clamp(12rem, 6rem + 12vw, 20rem); aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px;
  pointer-events: none; opacity: 0; scale: 0.86; filter: blur(6px);
  box-shadow: 0 30px 50px -24px rgb(60 10 8 / 0.45);
  transition: opacity 160ms ease, scale 220ms var(--ease-out), filter 200ms ease;
}
.is-tracking > .float-img { left: 0; top: 0; }
.arow:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.arow:focus-visible .arow__title { color: var(--red); }
.arow:focus-visible .float-img { opacity: 1; scale: 1; filter: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .arow:hover .arow__title { color: var(--red); translate: 0.12em 0; }
  .arow:hover .arow__go { background: var(--red); color: #fff; box-shadow: none; transform: rotate(-45deg); }
  .arow:hover .float-img { opacity: 1; scale: 1; filter: none; transition: opacity 220ms ease, scale 380ms var(--ease-out), filter 260ms ease; }
}
.archive [hidden] { display: none; }

/* Post */
.post__head { padding-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; margin: 0 0 1.1rem; }
.post__meta time { font-size: var(--fs-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.post__title { max-width: 18ch; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5rem); font-weight: 800; font-stretch: 86%; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.post__title--long { max-width: 24ch; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1; }
.post__lead { max-width: 46ch; margin-top: 1.4rem; }
.post__hero { margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); }
.post__hero--fill img { width: 100%; max-height: min(72vh, 42rem); object-fit: cover; border-radius: var(--radius); }
.post__hero--stage { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem); border-radius: var(--radius); background: var(--soft-100); }
.post__hero--stage img { width: auto; max-width: 100%; max-height: min(68vh, 38rem); border-radius: 10px; box-shadow: 0 34px 60px -34px rgb(80 20 18 / 0.5); }
.post__hero--video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--ink); }
.yt.yt--file { width: auto; background: none; border-radius: 10px; box-shadow: 0 34px 60px -34px rgb(80 20 18 / 0.5); }
.yt.yt--file img { width: auto; max-width: 100%; max-height: min(68vh, 38rem); aspect-ratio: auto; box-shadow: none; }
.post__hero--stage .yt--file img { border-radius: 10px; }
.post__layout { display: grid; grid-template-columns: minmax(0, 44rem) minmax(15rem, 21rem); justify-content: space-between; gap: clamp(3rem, 7vw, 7rem); }
.prose { font-size: 1.125rem; line-height: 1.72; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.1em; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 800; font-stretch: 90%; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--red); }
.prose strong { font-weight: 700; }
.post__video, .post__gallery, .post__funding { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.post__gallery { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.post__gallery figure, .post__video { margin: 0; }
.post__gallery img { width: 100%; height: auto; border-radius: var(--radius); }
.yt { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink); cursor: pointer; }
.yt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 700ms var(--ease-out), filter 300ms ease; }
.yt__play { position: absolute; left: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem); display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.7rem 1.3rem 0.7rem 1rem; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: 1rem; box-shadow: 0 16px 28px -14px rgb(60 0 0 / 0.6); transition: transform 220ms var(--ease-out), background-color 200ms ease; }
.yt__play .icon { width: 1.25rem; height: 1.25rem; }
.yt:active .yt__play { transform: scale(0.94); }
.yt:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.post__video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.post__video figcaption { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--ink-soft); }
.post__video figcaption a { color: inherit; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) {
  .yt:hover img { transform: scale(1.03); filter: brightness(0.92); }
  .yt:hover .yt__play { background: var(--red-700); }
}
.post__funding { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--soft-100); }
.post__funding img { width: 100%; max-width: 32rem; height: auto; padding: 0.85rem 1.1rem; border-radius: 10px; background: #fff; }
.post__funding p { margin: 0; max-width: 60ch; font-size: var(--fs-small); color: var(--ink-soft); }
.post__funding dl { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 1rem 0 0; }
.post__funding dt { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.post__funding dd { margin: 0.15rem 0 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.post__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; border-top: 1.5px solid var(--red); }
.post__aside h2 { margin: 1.1rem 0 0.4rem; font-size: var(--fs-h4); font-weight: 800; }
.post__aside ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.post__aside li + li { border-top: 1px solid var(--line); }
.post__aside li a { display: grid; gap: 0.2rem; padding-block: 0.9rem; color: var(--ink); text-decoration: none; }
.post__aside time { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.post__aside li span { font-weight: 700; line-height: 1.3; transition: color 200ms ease; }
.post__aside li a:hover span, .post__aside li a:focus-visible span { color: var(--red); }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 4rem); padding-block: clamp(3.5rem, 7vw, 6rem) var(--section); }
.pager__link { display: grid; align-content: start; gap: 0.6rem; padding-top: 1.25rem; border-top: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; }
.pager__link--next { justify-items: end; text-align: right; }
.pager__label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); font-weight: 650; color: var(--red); }
.pager__label .icon { width: 1.05rem; height: 1.05rem; transition: transform 220ms var(--ease-out); }
.pager__title { max-width: 26ch; font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem); font-weight: 800; font-stretch: 90%; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; transition: color 200ms ease; }
.pager__link:hover .pager__title, .pager__link:focus-visible .pager__title { color: var(--red); }
.pager__link--prev:hover .pager__label .icon { transform: translateX(-4px); }
.pager__link--next:hover .pager__label .icon { transform: translateX(4px); }

@media (max-width: 960px) {
  .news-latest__grid { grid-template-columns: minmax(0, 1fr); }
  .nl-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .post__layout { grid-template-columns: minmax(0, 1fr); }
  .post__aside { position: static; }
  .arow { grid-template-columns: 4.25rem minmax(0, 1fr) 2.5rem; }
  .arow .news-cat { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -0.2rem; }
  .arow__go { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 700px), (hover: none) {
  .float-img, .is-tracking > .float-img { display: none; }
}
@media (max-width: 700px) {
  .nl-stack { grid-template-columns: minmax(0, 1fr); }
  .nl-side { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  .nl-side__media { aspect-ratio: 1; border-radius: 12px; }
  .nl-side__media--plain .icon { width: 2.5rem; height: 2.5rem; }
  .nl-side__title { font-size: 1.3rem; }
  .archive__head { align-items: start; }
  .archive__filters { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter)); margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .archive__filters::-webkit-scrollbar { display: none; }
  .archive__filters .chip { white-space: nowrap; }
  .year { display: block; }
  .year__num { position: static; padding: 1rem 0 0.25rem; font-size: 2.75rem; }
  .arow { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.15rem 1rem; padding-block: 1rem; }
  .arow .float-img, .arow__ph { display: grid; grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .arow .float-img { position: static; width: 4.5rem; aspect-ratio: 1; translate: none !important; rotate: none !important; opacity: 1; scale: 1; filter: none; box-shadow: none; border-radius: 10px; }
  .arow__ph { place-items: center; width: 4.5rem; aspect-ratio: 1; border-radius: 10px; background: var(--soft-100); color: var(--red); }
  .arow__ph .icon { width: 1.75rem; height: 1.75rem; }
  .arow time { grid-column: 2; grid-row: 1; }
  .arow__title { grid-column: 2; grid-row: 2; font-size: 1.15rem; }
  .arow .news-cat { grid-column: 2; grid-row: 3; margin-top: 0.15rem; font-size: var(--fs-xs); }
  .arow__go { display: none; }
  .arow:active { background: var(--soft-100); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link--next { justify-items: start; text-align: left; }
  .prose { font-size: 1.0625rem; }
}
@media (max-width: 700px) {
  .post__head .crumbs li:last-child { display: none; }
}
/* Funding-only stories: the INFO / FEDER logo strip stands in as the image, on white */
.nl-side__media--logo { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.nl-side__media--logo img { width: 86%; height: auto; max-height: 70%; object-fit: contain; }
.float-img--logo { aspect-ratio: 16 / 9; object-fit: contain; padding: 1.25rem 1.5rem; background: #fff; }
@media (min-width: 701px) { .arow .float-img--logo + .arow__ph { display: none; } }
@media (max-width: 700px) {
  .arow .float-img--logo { padding: 0.4rem; background: #fff; box-shadow: inset 0 0 0 1px var(--line); object-fit: contain; }
  .arow .float-img--logo + .arow__ph { display: none; }
  .nl-side__media--logo img { width: 90%; max-height: 80%; }
}

/* =========================================================
   Bizcochos redondos: el sistema planetario DonDulce
   ========================================================= */
.cosmos {
  --space: #120807; --space-2: #1f0d0b; --tilt: 64deg; --glow: #ff8a7d;
  position: relative; overflow: clip; isolation: isolate;   /* clip, not hidden: hidden would make it a scroll container and freeze the scroll-driven lines inside */
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0 var(--section);
  color: #f7eeec;
  background:
    radial-gradient(55% 45% at 74% 36%, rgb(225 38 28 / 0.24), transparent 70%),
    radial-gradient(40% 28% at 8% 70%, rgb(189 21 18 / 0.16), transparent 70%),
    radial-gradient(28% 18% at 96% 66%, rgb(255 150 120 / 0.07), transparent 70%),
    linear-gradient(180deg, var(--space) 0%, var(--space-2) 100%);
}
.cosmos ::selection { background: var(--red); color: #fff; }
.cosmos__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stars { position: absolute; top: 0; left: 0; border-radius: 50%; }
.stars--s { opacity: 0.5; }
.stars--m { opacity: 0.72; }
.stars--l { opacity: 0.9; animation: twinkle 4.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 1; } }
.shooting {
  position: absolute; top: 14%; left: 64%; width: 9rem; height: 1.5px; border-radius: 999px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.95), rgb(255 200 190 / 0.35) 40%, transparent);
  opacity: 0; transform: rotate(-18deg); animation: shoot 11s linear infinite 2.5s;
}
.shooting--2 { top: 46%; left: 30%; animation-duration: 17s; animation-delay: 9s; }
@keyframes shoot {
  0%, 93% { opacity: 0; transform: rotate(-18deg) translateX(0); }
  94% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-18deg) translateX(-26rem); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .stars--s { animation: drift-s linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
    .stars--m { animation: drift-m linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
  }
}
@keyframes drift-s { to { translate: 0 -40px; } }
@keyframes drift-m { to { translate: 0 -110px; } }

.cosmos .crumbs ol, .cosmos .crumbs a { color: rgb(255 255 255 / 0.62); }
@media (hover: hover) and (pointer: fine) { .cosmos .crumbs a:hover { color: #fff; } }
.cosmos .crumbs [aria-current] { color: #fff; }
.cosmos .crumbs { --crumb-bg: rgb(255 255 255 / 0.1); --crumb-fg: #fff; }
.cosmos__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.cosmos__title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.cosmos__tagline { margin-top: 1rem; font-size: var(--fs-h4); font-weight: 650; color: var(--glow); }
.cosmos .lead { margin-top: 1.25rem; color: rgb(255 255 255 / 0.76); }
.cosmos .p-facts { border-top-color: rgb(255 255 255 / 0.14); }
.cosmos .p-facts dt { color: rgb(255 255 255 / 0.6); }
.cosmos .p-facts dd { color: #fff; }
.cosmos .actions { margin-top: 2rem; }

/* The orrery: a tilted plane with five orbits; planets counter-rotate so they always face us */
.orrery { --p: clamp(3.1rem, 1.3rem + 5.4vw, 7.6rem); --ry: 0deg; position: relative; transform: perspective(1800px) rotateY(var(--ry)); transform-style: preserve-3d; pointer-events: none; width: min(100%, 50rem); aspect-ratio: 1 / 0.7; margin-inline: auto; }
.orrery__plane { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; transform: translateY(-50%) rotateX(var(--tilt)); transform-style: preserve-3d; pointer-events: none; }
.orbit {
  position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.2); pointer-events: none;
  transform: rotateZ(var(--a)); transform-style: preserve-3d;
  transition: border-color 400ms ease, box-shadow 400ms ease;
}
.planet {
  position: absolute; left: 50%; top: 0; width: calc(var(--p) * var(--s)); aspect-ratio: 1; translate: -50% -50%;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; pointer-events: auto;
  transform: rotateZ(calc(var(--a) * -1)) rotateX(calc(var(--tilt) * -1));
}
.planet__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.55)); transition: scale 500ms var(--ease-out), filter 400ms ease; }
.planet__label {
  position: absolute; left: 50%; top: calc(100% + 0.45rem + max(var(--on), var(--hov)) * 11%); z-index: 2; translate: -50% 0; white-space: nowrap;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.6);
  transition: color 300ms ease, scale 400ms var(--ease-out), top 500ms var(--ease-out);
}
/* Saturn keeps its rings: the back half sits behind the cake, the front half crosses over it */
.planet__ring, .planet__ring::after {
  position: absolute; left: -30%; right: -30%; top: 38%; height: 30%; border-radius: 50%;
  border: 2px solid rgb(255 214 190 / 0.6); box-shadow: 0 0 14px rgb(255 180 150 / 0.25); rotate: -12deg;
}
.planet__ring { z-index: 0; }
.planet__ring::after { content: ""; left: -2px; right: -2px; top: -2px; height: calc(100% + 4px); rotate: 0deg; z-index: 2; clip-path: inset(52% 0 0 0); box-shadow: none; }
.planet--saturno .planet__ring { z-index: 0; }
.planet--saturno .planet__img { z-index: 1; }

.orrery__sun { position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; translate: -50% -50%; transform: rotateX(calc(var(--tilt) * -1)); pointer-events: none; }
.orrery__corona { position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(circle, transparent 0 22%, rgb(255 110 80 / 0.6) 27%, rgb(225 38 28 / 0.22) 40%, transparent 68%); animation: corona 5.5s ease-in-out infinite alternate; }
@keyframes corona { to { scale: 1.12; opacity: 0.75; } }
.cosmos__sun-face { position: relative; display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .orbit { animation: orbit var(--t) linear infinite; }
  .planet { animation: counter var(--t) linear infinite; }
  .orrery:hover .orbit, .orrery:hover .planet { animation-play-state: paused; }
}
@keyframes orbit { to { transform: rotateZ(calc(var(--a) + 360deg)); } }
@keyframes counter { to { transform: rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(calc(var(--tilt) * -1)); } }
@media (prefers-reduced-motion: reduce) {
  .stars--l, .shooting, .orrery__corona { animation: none !important; }
}

/* Selected planet: its orbit lights up, the cake grows and glows */
.orrery[data-active="mercurio"] .orbit--mercurio, .orrery[data-active="venus"] .orbit--venus, .orrery[data-active="marte"] .orbit--marte,
.orrery[data-active="jupiter"] .orbit--jupiter, .orrery[data-active="saturno"] .orbit--saturno {
  border-color: rgb(255 138 125 / 0.75); box-shadow: 0 0 22px rgb(225 38 28 / 0.4), inset 0 0 22px rgb(225 38 28 / 0.25);
}
.orrery[data-active="mercurio"] .planet--mercurio, .orrery[data-active="venus"] .planet--venus, .orrery[data-active="marte"] .planet--marte,
.orrery[data-active="jupiter"] .planet--jupiter, .orrery[data-active="saturno"] .planet--saturno { --on: 1; }
.planet { --on: 0; --hov: 0; transition: opacity 350ms ease; }
.planet .planet__img { scale: calc(1 + max(var(--on), var(--hov)) * 0.2); filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.55)) drop-shadow(0 0 calc(max(var(--on), var(--hov)) * 22px) rgb(255 120 90 / calc(max(var(--on), var(--hov)) * 0.6))); }
.planet .planet__label { color: rgb(255 255 255 / calc(0.6 + max(var(--on), var(--hov)) * 0.4)); scale: calc(1 + max(var(--on), var(--hov)) * 0.15); }
.planet__label small {
  display: block; margin-top: 0.15rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--glow); opacity: var(--hov); translate: 0 calc((1 - var(--hov)) * -0.25rem); transition: opacity 250ms ease, translate 350ms var(--ease-out);
}
/* Hovering a planet (or its pill below): its orbit opens up and glows, the rest of the system steps back */
.orbit { transition: border-color 400ms ease, box-shadow 400ms ease, scale 500ms var(--ease-out), border-width 300ms ease; }
.orrery[data-hover] .planet { opacity: 0.38; }
.orrery[data-hover] .orbit, .orrery[data-hover] .planet { animation-play-state: paused; }
.orrery[data-hover="mercurio"] .planet--mercurio, .orrery[data-hover="venus"] .planet--venus, .orrery[data-hover="marte"] .planet--marte,
.orrery[data-hover="jupiter"] .planet--jupiter, .orrery[data-hover="saturno"] .planet--saturno { --hov: 1; opacity: 1; }
.orrery[data-hover="mercurio"] .orbit--mercurio, .orrery[data-hover="venus"] .orbit--venus, .orrery[data-hover="marte"] .orbit--marte,
.orrery[data-hover="jupiter"] .orbit--jupiter, .orrery[data-hover="saturno"] .orbit--saturno {
  scale: 1.045; border-width: 2px; border-color: rgb(255 160 145 / 0.95);
  box-shadow: 0 0 34px rgb(225 38 28 / 0.55), inset 0 0 30px rgb(225 38 28 / 0.35);
}

/* Picker and fact sheet, on the night sky */
.cosmos__picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid rgb(255 255 255 / 0.12); }
.cosmos__picker-title { margin: 0; font-size: var(--fs-h4); font-weight: 800; color: #fff; }
.cosmos__legend { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cosmos__tab {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.05rem; min-height: 52px;
  padding: 0.5rem 1.25rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.04);
  color: #fff; font: inherit; line-height: 1.15; cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out);
}
.cosmos__tab-planet { font-size: 1.05rem; font-weight: 800; font-stretch: 92%; }
.cosmos__tab small { font-size: var(--fs-xs); font-weight: 600; color: rgb(255 255 255 / 0.62); }
.cosmos__tab:active { transform: scale(0.97); }
.cosmos__tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--red); }
.cosmos__tab[aria-selected="true"] small { color: var(--ink-soft); }
.cosmos__tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cosmos__tab:hover:not([aria-selected="true"]) { border-color: rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.08); } }
.cosmos__panels { margin-top: 1.5rem; }
.cosmos .ficha { background: rgb(255 255 255 / 0.045); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); color: #f7eeec; }
.cosmos .ficha:focus-visible { outline-color: #fff; }
.cosmos .ficha__blob { color: rgb(225 38 28 / 0.22); }
.cosmos .ficha__img { filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.55)); }
.cosmos .ficha__name, .cosmos .ficha__block h4 { color: #fff; }
.cosmos .ficha__ing { color: rgb(255 255 255 / 0.74); }
.cosmos .ficha__ing strong, .cosmos .ficha__allergen strong { color: #fff; }
.cosmos .ficha__formats .icon, .cosmos .nut__chev { color: var(--glow); }
.cosmos .ficha__formats li { background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.88); }
.cosmos .ficha__note, .cosmos .ficha__keep { color: rgb(255 255 255 / 0.58); }
.cosmos .ficha__pending { background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.76); }
.cosmos .ficha__pending a { color: var(--glow); }
.cosmos .nut { border-color: rgb(255 255 255 / 0.14); }
.cosmos .nut th, .cosmos .nut td { border-top-color: rgb(255 255 255 / 0.1); }
.cosmos .nut summary small, .cosmos .nut tr.is-sub th, .cosmos .nut tr.is-sub td { color: rgb(255 255 255 / 0.58); }
@media (hover: hover) and (pointer: fine) { .cosmos .nut summary:hover span { color: var(--glow); } }

@media (max-width: 960px) {
  .cosmos__grid { grid-template-columns: minmax(0, 1fr); }
  .orrery { aspect-ratio: 1 / 0.76; margin-top: 0.5rem; }
}
@media (max-width: 700px) {
  .cosmos { --tilt: 60deg; }
  .orrery { aspect-ratio: 1 / 0.62; margin-top: 1rem; }
  .orrery__plane { left: 8%; width: 84%; }
  .planet__label { display: none; }
  .cosmos__picker { display: block; }
  .cosmos__legend { margin-top: 0.85rem; scroll-padding-inline: var(--gutter); }
  .cosmos__tab { flex: none; }
}

/* Bizcochos redondos: the rest of the page stays under the same sky */
.cosmos--tail {
  padding: 0 0 clamp(4rem, 3rem + 4vw, 7rem);
  background:
    radial-gradient(45% 40% at 82% 78%, rgb(225 38 28 / 0.2), transparent 70%),
    radial-gradient(35% 30% at 10% 20%, rgb(189 21 18 / 0.1), transparent 70%),
    linear-gradient(180deg, var(--space-2) 0%, var(--space) 75%);
}
.cosmos-rel { padding-top: clamp(1rem, 2vw, 2rem); }
.cosmos-rel .h3 { color: #fff; }
.cosmos .rel__img { background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03) 60%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); transition: box-shadow 300ms ease; }
.cosmos .rel__img img { filter: drop-shadow(0 12px 14px rgb(0 0 0 / 0.5)); }
.cosmos .rel__name { color: rgb(255 255 255 / 0.86); transition: color 200ms ease; }
.cosmos .rel:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .cosmos .rel:hover .rel__img { box-shadow: inset 0 0 0 1px rgb(255 138 125 / 0.7), 0 0 28px rgb(225 38 28 / 0.35); }
  .cosmos .rel:hover .rel__name { color: var(--glow); }
}
.cosmos-close {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(4rem, 3rem + 4vw, 7rem); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); border-top: 1px solid rgb(255 255 255 / 0.12);
}
.cosmos-close .h2 { color: #fff; max-width: 16ch; }
.cosmos-close .lead { margin-top: 1.25rem; max-width: 46ch; }
.cosmos .btn--outline { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.75); }
@media (hover: hover) and (pointer: fine) { .cosmos .btn--outline:hover { --btn-bg: #fff; --btn-fg: var(--red); box-shadow: none; } }
.cosmos-close__moon { display: grid; place-items: center; }
.cosmos-close__moon-img {
  width: clamp(11rem, 6rem + 14vw, 20rem); height: auto; rotate: -10deg;
  filter: drop-shadow(0 0 30px rgb(255 255 255 / 0.22)) drop-shadow(0 0 110px rgb(255 170 150 / 0.18));
}
@media (prefers-reduced-motion: no-preference) {
  .cosmos-close__moon-img { animation: moon-float 9s ease-in-out infinite alternate; }
}
@keyframes moon-float { from { translate: 0 -8px; rotate: -12deg; } to { translate: 0 10px; rotate: -6deg; } }
@media (max-width: 760px) {
  .cosmos-close { grid-template-columns: minmax(0, 1fr); }
  .cosmos-close__moon { order: -1; justify-items: start; }
  .cosmos-close__moon-img { width: 9.5rem; }
}

/* Bizcochos redondos: the funding strip lives under the same sky; logos keep a white card so they read correctly */
.cosmos--tail { padding-bottom: 0; }
.cosmos .funding { margin-top: clamp(4rem, 3rem + 4vw, 6rem); padding-block: 2.5rem 3rem; background: transparent; border-top: 1px solid rgb(255 255 255 / 0.12); }
.cosmos .funding__logos { padding: 0.9rem 1.4rem; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6); }
.cosmos .funding p { color: rgb(255 255 255 / 0.62); }

/* Bizcochos redondos: the header floats over the sky, the menu sits in a white pill */
body:has(.cosmos) .header { background: transparent; transition: background-color 300ms ease, box-shadow 300ms ease; }
body:has(.cosmos) .header.is-stuck { background: rgb(18 8 7 / 0.6); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); }
body:has(.cosmos) .nav__list { padding: 0.6rem 1.5rem; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6); }
body:has(.cosmos) .nav__link { color: var(--ink); }
body:has(.cosmos) .menu-toggle { background: #fff; }
body:has(.cosmos) .cosmos:not(.cosmos--tail) { margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + clamp(1.75rem, 1.25rem + 2vw, 3rem)); }
@supports not (backdrop-filter: blur(1px)) { body:has(.cosmos) .header.is-stuck { background: rgb(18 8 7 / 0.92); } }

/* Bizcochos redondos: the footer closes the night instead of switching to red */
.footer--cosmos { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid rgb(255 255 255 / 0.12);
  background: radial-gradient(40% 50% at 85% 100%, rgb(225 38 28 / 0.16), transparent 70%), linear-gradient(180deg, #120807 0%, #0c0504 100%);
  color: rgb(255 255 255 / 0.66); }
.footer--cosmos .cosmos__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.footer--cosmos a { color: rgb(255 255 255 / 0.88); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .footer--cosmos a:hover { color: var(--glow, #ff8a7d); } }
.footer--cosmos .social a { background: #fff; color: var(--red); box-shadow: 0 12px 24px -16px rgb(0 0 0 / 0.7); }
@media (hover: hover) and (pointer: fine) { .footer--cosmos .social a:hover { background: #fff; color: var(--red-700); transform: translateY(-2px); } }
.footer--cosmos .footer__legal, .footer--cosmos .footer__grid { border-top-color: rgb(255 255 255 / 0.12); }
.footer--cosmos .footer__mascot { display: none; }
.footer--cosmos .footer__legal { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.12); }   /* no funding strip here: the legal line keeps its own rule */
.footer--cosmos address, .footer--cosmos .footer__statement span { color: rgb(255 255 255 / 0.66); }


/* ===== Bizcochos Glaseados: the glaze pours over the page =====
   Each flavour is a coat of glaze in its packaging colour (--gc). The coat's lower edge hangs
   drips into the next section; changing flavour pours a new coat down over the old one. */
.glaze, .glaze-ficha { --drip-h: calc(max(100vw, 1100px) * 300 / 1440); }
.glaze {
  position: relative; z-index: 2; isolation: isolate;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  --ink-soft: #4a3330;
  /* the cakes waiting their turn are turned -38°, so their corners stick out past the screen on phones;
     clip only sideways, so the drips still hang over the next section */
  overflow-x: clip;
}
.glaze__pour { position: absolute; inset: 0 0 calc(var(--drip-h) * -1) 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glaze__layer { position: absolute; inset: 0; visibility: hidden; color: var(--gc); }
.glaze__layer.is-on { visibility: visible; }
.glaze__sheet {
  /* runs 4px under the edge, so the two layers overlap instead of meeting on a hairline */
  position: absolute; inset: 0 0 calc(var(--drip-h) - 4px) 0;
  /* flat colour along the bottom edge so the sheet and the drips read as one piece;
     the sheen stays in the upper part, well clear of the seam */
  background:
    radial-gradient(70% 55% at 10% 0%, rgb(255 255 255 / 0.28), transparent 70%),
    var(--gc);
}
.glaze__drips {
  position: absolute; left: 50%; top: calc(100% - var(--drip-h));
  width: max(100%, 1100px); max-width: none; height: auto; translate: -50% 0; overflow: hidden; shape-rendering: geometricPrecision;
  fill: currentColor;   /* no filter: a filtered layer renders a shade off from the sheet in Safari */
}
.drip__shade { fill: none; stroke: var(--gd); stroke-linecap: round; opacity: 0.32; }
.drip__gloss { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.38; }
.drip__spark { fill: #fff; opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  /* on arrival the drips creep out from under the lip, slow and heavy like real glaze */
  .glaze__layer.is-first .drip > g { animation: drip-creep var(--t) cubic-bezier(0.3, 0.55, 0.2, 1) var(--d) both; }
}
@keyframes drip-creep { from { translate: 0 calc(var(--y) * -1px); } }

.glaze__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head media" "body media"; column-gap: clamp(2rem, 5vw, 5rem);
}
.glaze__head { grid-area: head; align-self: end; }
.glaze__body { grid-area: body; }
.glaze__title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; }
.glaze__tagline { margin-top: 1rem; font-size: var(--fs-h4); font-weight: 650; }
.glaze .lead { margin-top: 1.25rem; max-width: 46ch; }
.glaze .p-facts { border-top-color: rgb(43 26 25 / 0.16); }
.glaze .crumbs { --crumb-bg: rgb(255 255 255 / 0.32); }   /* the back pill on the glaze, like its flavour pills */
.glaze .actions { margin-top: 2rem; }
/* buy button in the text colour: reads on every glaze (yellow, orange, green) without fighting it */
.glaze .btn { --btn-bg: var(--ink); --btn-fg: #fff; }
@media (hover: hover) and (pointer: fine) {
  .glaze .btn:hover { background: #4a2e2b; box-shadow: 0 12px 24px -12px rgb(43 26 25 / 0.55); }
}
.glaze ::selection { background: var(--ink); color: #fff; }

.glaze__media { grid-area: media; display: grid; place-items: center; align-self: center; }
.glaze__cake {
  grid-area: 1 / 1; width: min(100%, 36rem); height: auto;
  opacity: 0; rotate: -38deg; scale: 0.9;
  filter: blur(8px) drop-shadow(0 34px 34px rgb(70 35 10 / 0.26));
  transition: opacity 260ms ease, rotate 500ms var(--ease-out), scale 500ms var(--ease-out), filter 300ms ease;
}
.glaze__cake.is-on {
  opacity: 1; rotate: 0deg; scale: 1;
  filter: blur(0) drop-shadow(0 34px 34px rgb(70 35 10 / 0.26));
  /* arrives as the new coat passes over it */
  transition-duration: 520ms, 1100ms, 1100ms, 600ms; transition-delay: 260ms;
}

.glaze__pick { margin-top: 1.75rem; }
.glaze__pick-label { font-size: var(--fs-small); font-weight: 650; }
.glaze__tabs { margin-top: 0.75rem; gap: 0.6rem; }
.glaze__tab {
  display: inline-flex; align-items: center; gap: 0.65rem; min-height: 3.5rem;
  padding: 0.35rem 1.15rem 0.35rem 0.35rem; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / 0.32); box-shadow: inset 0 0 0 1.5px rgb(43 26 25 / 0.2);
  color: var(--ink); font: inherit; font-weight: 680; line-height: 1.1; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.glaze__tab small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 500; }
.glaze__tab:active { transform: scale(0.97); }
.glaze__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.glaze__tab[aria-selected="true"] { background: #fff; box-shadow: 0 10px 22px -12px rgb(70 35 10 / 0.55); }
@media (hover: hover) and (pointer: fine) {
  .glaze__tab:not([aria-selected="true"]):not(.glaze__tab--soon):hover { background: rgb(255 255 255 / 0.62); }
}
.glaze__swatch {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; overflow: hidden;
  background: var(--gc); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.7);
}
.glaze__swatch img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; }
.glaze__tab--soon { cursor: default; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(43 26 25 / 0.28); }
.glaze__tab--soon:active { transform: none; }
.glaze__tab--soon span:last-child { font-weight: 600; }
.glaze__swatch--soon { background: #5b3521; box-shadow: none; }

/* the next section sits over the drips, so its text stays on top */
.glaze-ficha { position: relative; z-index: 3; padding-top: calc(var(--section) + var(--drip-h) * 0.55); }
.glaze-ficha .tabs__panels { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

@media (max-width: 860px) {
  .glaze__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "body"; }
  .glaze__media { margin-top: 1.5rem; }
  .glaze__cake { width: min(88%, 26rem); }
  .glaze__tabs { margin-top: 0.75rem; }
  /* on phones show the middle of the edge at near full size: fatter, longer drips */
  .glaze, .glaze-ficha { --drip-w: 1300px; --drip-h: calc(1300px * 300 / 1440); }
  .glaze__drips { width: var(--drip-w); }
  .glaze-ficha { padding-top: calc(var(--section) + var(--drip-h) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .glaze__cake { rotate: 0deg; scale: 1; transition-property: opacity; }
}

/* ===== Bizcochos Rectangulares: cut a slice to see the crumb =====
   Drag the knife across the loaf: the end piece lifts away and the real slice photo comes out.
   Cut once and every other flavour you pick is cut for you. */
.cut { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); overflow-x: clip; }
.cut__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "head stage" "body stage"; column-gap: clamp(2rem, 5vw, 5rem);
}
.cut__head { grid-area: head; align-self: end; }
.cut__body { grid-area: body; }
.cut__title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; }
.cut__tagline { margin-top: 1rem; font-size: var(--fs-h4); font-weight: 650; color: var(--red); }
.cut .lead { margin-top: 1.25rem; max-width: 46ch; }
.cut .actions { margin-top: 2rem; }

/* stage: the loaf stands on the left, the slice lands to its right */
.cut__stage { grid-area: stage; position: relative; align-self: center; aspect-ratio: 1 / 1.02; width: 100%; max-width: 40rem; margin-inline: auto; }
.cut__blob { position: absolute; inset: 4% 0 10%; color: var(--soft-100); }
.cut__blob svg { width: 100%; height: 100%; }
.cut__loaf { --cut: 21%; --p: 0; position: absolute; top: 3%; left: 13%; height: 82%; margin: 0; visibility: hidden; }
.cut__loaf.is-on, .cut__loaf.is-leaving { visibility: visible; }
.cut__piece { filter: drop-shadow(0 22px 22px rgb(90 40 10 / 0.18)); }
.cut__piece--body { height: 100%; }
.cut__piece--end { position: absolute; inset: 0; transform-origin: 50% var(--cut); }
.cut__clip { height: 100%; }
.cut__piece--body .cut__clip { clip-path: inset(var(--cut) -20% -20% -20%); }
.cut__piece--end .cut__clip { clip-path: inset(-20% -20% calc(100% - var(--cut)) -20%); }
.cut__img { display: block; height: 100%; width: auto; max-width: none; }

.cut__slice {
  position: absolute; top: 20%; left: 86%; width: 124%; max-width: none; height: auto;
  filter: drop-shadow(0 30px 28px rgb(90 40 10 / 0.24)); opacity: 0; pointer-events: none;
}

/* knife: a slider along the cut line */
.cut__track { position: absolute; left: -16%; right: -16%; top: var(--cut); height: 0; }
.cut__guide { position: absolute; inset: -1px 0 auto; border-top: 2px dashed rgb(225 38 28 / 0.45); }
.cut__trail { position: absolute; inset: -1.5px 0 auto; height: 3px; border-radius: 2px; background: var(--red); transform-origin: left; scale: var(--p) 1; }
.cut__knife {
  position: absolute; top: var(--cut); left: calc(-16% + var(--p) * 132%); translate: -50% -50%;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--red); color: #fff; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 12px 24px -10px rgb(150 20 15 / 0.6);
  transition: scale 160ms var(--ease-out), opacity 200ms ease;
}
.cut__knife .icon { width: 1.6rem; height: 1.6rem; rotate: 45deg; }
.cut__knife:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cut__knife.is-dragging { cursor: grabbing; scale: 1.08; }
.cut__loaf.is-returning .cut__knife { transition: left 260ms var(--ease-out), scale 160ms var(--ease-out); }
.cut__loaf.is-returning .cut__trail { transition: scale 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cut__knife:hover { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) {
  /* a nudge so the knife reads as something to move */
  .cut__loaf.is-on:not(.is-cut) .cut__knife:not(.is-dragging):not(:focus-visible) { animation: knife-nudge 2.6s var(--ease-out) 1.4s infinite; }
}
@keyframes knife-nudge { 0%, 60%, 100% { translate: -50% -50%; } 30% { translate: calc(-50% + 14px) -50%; } }

/* after the cut */
.cut__loaf.is-cut .cut__knife, .cut__loaf.is-cut .cut__track { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.cut__loaf.is-cut .cut__piece--end { animation: end-away 900ms cubic-bezier(0.5, 0, 0.2, 1) both; }
.cut__loaf.is-cut .cut__slice { opacity: 1; animation: slice-in 900ms cubic-bezier(0.3, 1.25, 0.5, 1) 280ms both; }
@keyframes end-away {
  0% { transform: none; opacity: 1; }
  28% { transform: translate(0, -9%) rotate(-5deg); opacity: 1; }
  100% { transform: translate(55%, -2%) rotate(14deg) scale(0.9); opacity: 0; }
}
@keyframes slice-in {
  from { transform: translate(-42%, -14%) rotate(16deg) scale(0.5); opacity: 0; filter: blur(6px) drop-shadow(0 30px 28px rgb(90 40 10 / 0.24)); }
  to { transform: none; opacity: 1; filter: blur(0) drop-shadow(0 30px 28px rgb(90 40 10 / 0.24)); }
}
/* changing flavour: the next loaf slides in along the counter, the previous one slides out */
.cut__loaf.is-entering { animation: loaf-in 560ms var(--ease-out) both; }
.cut__loaf.is-leaving { animation: loaf-out 320ms cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes loaf-in { from { translate: 45% 0; opacity: 0; } }
@keyframes loaf-out { to { translate: -35% 0; opacity: 0; } }

.cut__hint { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); text-align: center; }
.cut__hint > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.4rem; transition: opacity 240ms ease; }
.cut__hint .icon { width: 1rem; height: 1rem; color: var(--red); }
.cut__hint-done { opacity: 0; visibility: hidden; }
.cut__stage[data-state="cut"] .cut__hint-todo { opacity: 0; visibility: hidden; pointer-events: none; }
.cut__stage[data-state="cut"] .cut__hint-done { opacity: 1; visibility: visible; transition-delay: 600ms; }
.cut__again { padding: 0.35rem 0.2rem; border: 0; background: none; font: inherit; color: var(--red); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

.cut__pick { margin-top: 1.75rem; }
.cut__pick-label { font-size: var(--fs-small); font-weight: 650; }
.cut__tabs { margin-top: 0.75rem; gap: 0.6rem; }
/* Flavour pills on white (every product page but Glaseados, which has its own on the glaze, and Redondos):
   the flavour's photo in a circle and its name, the language of the glaze picker. Resting on warm grey;
   the chosen one lifts to white, ringed in red, with the fact sheet's soft shadow. */
.ftab, .cut__tab {
  display: inline-flex; align-items: center; gap: 0.65rem; min-height: 3.5rem;
  padding: 0.35rem 1.15rem 0.35rem 0.35rem; border: 0; border-radius: 999px;
  background: var(--soft-100); box-shadow: inset 0 0 0 1.5px transparent;
  color: var(--ink); font: inherit; font-weight: 680; line-height: 1.1; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ftab small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); }
.ftab:active, .cut__tab:active { transform: scale(0.97); }
.ftab:focus-visible, .cut__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ftab[aria-selected="true"], .ftab[aria-checked="true"], .cut__tab[aria-selected="true"] {
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--red), 0 12px 24px -14px rgb(120 20 18 / 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .ftab:not([aria-selected="true"]):not([aria-checked="true"]):not(.ftab--soon):hover, .cut__tab:not([aria-selected="true"]):hover { background: var(--soft-200); }
}
.ftab__swatch { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.8); }
.ftab__swatch img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; }
/* a slice's crumb (the same thumbnails as Bizcochos Rectangulares), when the flavour has one (`swatch` in products_data) */
.ftab__swatch--crumb img { scale: 1.5; }
/* on the way: an empty circle and a dashed outline, never selectable */
.ftab--soon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--soft-200); color: var(--ink-soft); cursor: default; }
.ftab--soon:active { transform: none; }
.ftab__swatch--soon { background: var(--soft-100); box-shadow: none; }
@media (max-width: 860px) {
  /* two to a row on phones (see .tabs__list): long names break onto a second line inside the pill */
  .ftab, .cut__tab { gap: 0.5rem; min-height: 3.25rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; font-size: 0.9375rem; white-space: normal; }
  .ftab > span:last-child { min-width: 0; }
  .ftab__swatch, .cut__swatch { width: 2.4rem; height: 2.4rem; }
}
.cut__swatch { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; overflow: hidden; background: var(--soft-100); }
.cut__swatch img { width: 100%; height: 100%; object-fit: cover; scale: 1.5; }

@media (max-width: 860px) {
  .cut__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; }
  .cut__stage { margin-top: 1.5rem; max-width: 26rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cut__loaf.is-cut .cut__piece--end { animation: none; opacity: 0; }
  .cut__loaf.is-cut .cut__slice, .cut__loaf.is-entering, .cut__loaf.is-leaving { animation: none; }
}

/* Small flavour picker next to a fact sheet (Glaseados, Rectangulares): mirrors the picker up top,
   so changing flavour doesn't mean scrolling back up */
.ficha-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.ficha-head + .tabs__panels { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.flavour-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem; border-radius: 1.6rem; background: var(--switch-bg, var(--soft-100)); }
.flavour-switch__btn {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 0.95rem 0.4rem 0.6rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: var(--fs-small); font-weight: 650; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.flavour-switch__btn:active { transform: scale(0.97); }
.flavour-switch__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* chosen: white, ringed in red, like the flavour pills above it (.ftab) */
.flavour-switch__btn[aria-pressed="true"] { background: var(--switch-on-bg, #fff); color: var(--switch-on-fg, var(--ink)); box-shadow: inset 0 0 0 2px var(--red), 0 4px 12px -6px rgb(120 20 18 / 0.35); }
@media (hover: hover) and (pointer: fine) { .flavour-switch__btn:not([aria-pressed="true"]):not([aria-current]):not([aria-disabled]):hover { color: var(--ink); } }
.flavour-switch__dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--gc); box-shadow: inset 0 0 0 1px rgb(43 26 25 / 0.12); }
.flavour-switch__thumb { width: 1.6rem; height: 1.6rem; margin-left: -0.25rem; border-radius: 50%; overflow: hidden; background: var(--soft-100); }
.flavour-switch__thumb img { width: 100%; height: 100%; object-fit: cover; scale: 1.5; }
/* on the grey band the picker sits on white, and the chosen flavour goes red like the tabs up top */
.cut-ficha { --switch-bg: #fff; }
.cut-ficha .ficha__media { aspect-ratio: 1 / 0.82; }
/* the standing loaf fits inside the box instead of setting its height */
.cut-ficha .ficha__media--tall .ficha__img { position: absolute; inset: 0; margin: auto; width: auto; height: 84%; max-width: 100%; }

/* ===== Sequillos: through the hole =====
   The hero pins while you scroll; the camera flies into the sequillo and through its hole,
   and Jumilla (the still life and its story) is on the other side.
   Without JS or with reduced motion it is a plain hero followed by the story. */
.hole__intro { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.hole__title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; }
.hole__tagline { margin-top: 1rem; font-size: var(--fs-h4); font-weight: 650; color: var(--red); }
.hole__text .lead { margin-top: 1.25rem; max-width: 44ch; }
.hole__text .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hole__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 34px rgb(120 70 20 / 0.22)); }
.hole__plane { display: none; }
.hole__photo img, .hole__blur img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hole__blur { display: none; }
/* out-of-focus copy behind the sharp photo while it is still smaller than the hole's window */
.hole.is-live .hole__blur { display: block; position: absolute; inset: 0; filter: blur(28px); transform: scale(1.15); }
.hole__story { position: relative; color: #fff; }
.hole__story .lead { margin-top: 1.25rem; max-width: 52ch; color: rgb(255 255 255 / 0.9); }

/* plain layout (no JS, reduced motion) */
.hole:not(.is-live) .hole__pin { display: grid; grid-template-columns: minmax(0, 1fr); }
.hole:not(.is-live) .hole__intro { order: 1; }
.hole:not(.is-live) .hole__front { order: 2; display: grid; place-items: center; padding: 2rem var(--gutter) var(--section); }
.hole:not(.is-live) .hole__donut { width: min(80vw, 30rem); }
.hole:not(.is-live) .hole__scene { order: 3; position: relative; }
.hole:not(.is-live) .hole__photo { display: block; height: clamp(24rem, 55vw, 40rem); }
.hole:not(.is-live) .hole__story { padding-block: 2.5rem var(--section); color: var(--ink); }
.hole:not(.is-live) .hole__story .lead { color: var(--ink-soft); }

/* live: a tall track with a pinned stage */
.hole.is-live { height: 320vh; }
.hole.is-live .hole__pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow: hidden; }
.hole.is-live .hole__scene, .hole.is-live .hole__front, .hole.is-live .hole__intro { position: absolute; inset: 0; }
.hole.is-live .hole__scene { background: #2a1a12; }
.hole.is-live .hole__photo { position: absolute; inset: 0; will-change: transform; }
.hole.is-live .hole__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 10 6 / 0) 35%, rgb(20 10 6 / 0.72)); opacity: var(--shade, 0); pointer-events: none; }
.hole.is-live .hole__story { z-index: 1; position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vh, 4.5rem); opacity: 0; will-change: opacity, transform; }
.hole.is-live .hole__story .h2 { max-width: 14ch; }
/* the white page, with a round window exactly where the hole is (position and size set per frame) */
.hole.is-live .hole__plane {
  display: block; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--hx, 72%) var(--hy, 54%), transparent var(--hr, 0px), var(--paper) calc(var(--hr, 0px) + 0.5px));
}
.hole.is-live .hole__donut {
  position: absolute; left: 72%; top: 52%; width: min(36vw, 64vh, 36rem); translate: -50% -50%;
  transform-origin: 49.8% 51.7%;   /* centre of the hole in the photo */
  isolation: isolate;               /* keeps its soft shadow (::before) just behind it */
}
/* no filter and no will-change on what zooms ×15: Safari clips huge filtered layers and leaves stale
   tiles behind when scrolling back up. The shadow is a soft gradient behind the sequillo instead. */
.hole.is-live .hole__img { filter: none; transform-origin: 49.8% 51.7%; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.hole.is-live .hole__donut { touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.hole.is-live .hole__donut.is-dragging { cursor: grabbing; }   /* turns about its hole, so the hole stays on the window */
.hole.is-live .hole__donut::before { content: ""; position: absolute; inset: 14% 8% -6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(120 70 20 / 0.22), transparent); transform: translateY(6%); }
.hole.is-live .hole__intro { display: flex; flex-direction: column; pointer-events: none; }
.hole.is-live .hole__intro > * { pointer-events: auto; }
.hole.is-live .hole__text { margin-block: auto; max-width: 34rem; will-change: opacity, transform; }
@media (max-width: 860px) {
  .hole.is-live .hole__donut { left: 50%; top: 76%; width: min(62vw, 30vh, 20rem); }
  .hole.is-live .hole__text { margin-block: 0 auto; }
  .hole.is-live .hole__text .lead { font-size: 1rem; margin-top: 0.75rem; }
  .hole.is-live .hole__text .p-facts { display: none; }
  .hole.is-live .hole__text .actions { margin-top: 1.25rem; }
}
/* on phones the pinned hero has no room for the key facts: they show above the fact sheet instead */
.ficha-facts { display: none; }
@media (max-width: 860px) { .hole.is-live ~ .flavours .ficha-facts { display: block; } }

/* flavour picker: the current flavour as a static pill, and flavours on the way, shown but not selectable */
.flavour-switch__btn[aria-current="true"] { background: var(--switch-on-bg, #fff); color: var(--switch-on-fg, var(--ink)); box-shadow: inset 0 0 0 2px var(--red), 0 4px 12px -6px rgb(120 20 18 / 0.35); cursor: default; }
.flavour-switch__btn[aria-disabled="true"] { cursor: default; color: var(--ink-soft); }
.flavour-switch__btn[aria-disabled="true"]:active { transform: none; }
.flavour-switch__btn small { margin-left: 0.15rem; font-size: var(--fs-xs); font-weight: 500; opacity: 0.85; }
.flavours .flavour-switch { --switch-bg: #fff; }
.ficha-lead { margin-top: 1rem; max-width: 52ch; }
/* short phones: no room for the second link next to the buy button; the sequillo gets the space */
@media (max-width: 860px) and (max-height: 720px) {
  .hole.is-live .hole__text .link-arrow { display: none; }
}

/* ===== Sequillos: after the hole =====
   White, in the site's own light tones (the fact sheet below is the grey band): the names, then the four ingredients. */
.seq-inside { background: var(--paper); color: var(--ink); padding-block: var(--section); overflow: clip; }

/* names: a map of Spain with each name where it is used */
.seq-names { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.seq-names__text .lead { margin-top: 1.25rem; max-width: 44ch; }
.map { position: relative; margin: 0; }
.map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__ccaa { fill: var(--soft-100); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; transition: fill 300ms ease; }
.map__ccaa.is-hl { fill: rgb(225 38 28 / 0.16); }
.map__places { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.map__place { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 0.45rem; translate: -6px -50%; }
.map__place--area { translate: -50% -50%; }
/* pink = where the sequillo goes by another name (the regions' fill, and Madrid's dot, a deeper shade of it so it reads at 12 px);
   red = Jumilla, its home */
.map__dot { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--red) 55%, #fff); box-shadow: 0 0 0 3px #fff; }
.map__place--home .map__dot { background: var(--red); }
.map__label {
  display: grid; gap: 0.1rem; padding: 0.45rem 0.75rem; border-radius: 10px; background: #fff; white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgb(43 26 25 / 0.45), 0 0 0 1px rgb(43 26 25 / 0.06);
  font-size: clamp(0.78rem, 0.62rem + 0.5vw, 1.05rem); line-height: 1.15;
}
.map__label strong { font-weight: 750; letter-spacing: -0.01em; }
.map__label span { font-size: 0.8em; color: var(--ink-soft); }
.map__place--home .map__label { background: var(--red); color: #fff; box-shadow: 0 12px 24px -12px rgb(150 20 15 / 0.7); }
.map__place--home .map__label span { color: var(--on-red-soft); }
.map__note { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  /* the home of the sequillo breathes */
  .map__place--home .map__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: map-pulse 2.4s var(--ease-out) infinite; }
  /* labels arrive one after another when the map comes into view */
  .js .map__place { opacity: 0; scale: 0.92; transition: opacity 420ms ease, scale 520ms var(--ease-out); transition-delay: calc(var(--i) * 140ms + 150ms); }
  .js .map.is-in .map__place { opacity: 1; scale: 1; }
}
@keyframes map-pulse { from { opacity: 0.55; scale: 1; } to { opacity: 0; scale: 3.2; } }

/* ingredients: four giant words, outlined, that fill in as they cross the middle of the screen */
.seq-ingr { margin-top: calc(var(--section) * 1.1); }
.seq-ingr__list { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.seq-ingr__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 2rem; padding-block: clamp(0.5rem, 1.2vw, 1rem); border-top: 1px solid var(--soft-200); }
.seq-ingr__row:last-child { border-bottom: 1px solid var(--soft-200); }
.seq-ingr__word { font-size: clamp(2.5rem, 1rem + 5.2vw, 5.75rem); font-weight: 800; font-stretch: 82%; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); }
.seq-ingr__note { font-size: var(--fs-lead); color: var(--ink-soft); }
.seq-ingr__coda { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 30ch; font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.seq-ingr__coda em { font-style: normal; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 0.12em; text-underline-offset: 0.16em; text-decoration-skip-ink: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* outlined word; a filled copy on top is wiped in from the left and the outline fades as it fills.
       The copy's box runs past the last letter, which negative tracking pushes outside the word's own box. */
    .seq-ingr__word { position: relative; color: transparent; -webkit-text-stroke: 1.5px rgb(43 26 25 / 0.32);
      animation: seq-stroke linear both; animation-timeline: view(); animation-range: entry 55% cover 45%; }
    .seq-ingr__word::after { content: attr(data-w); position: absolute; inset: 0 -0.2em 0 0; color: var(--ink); -webkit-text-stroke: 0;
      clip-path: inset(0 100% 0 0); animation: seq-fill linear both; animation-timeline: view(); animation-range: entry 55% cover 45%; }
    .seq-ingr__note { animation: seq-note linear both; animation-timeline: view(); animation-range: entry 65% cover 45%; }
  }
}
@keyframes seq-fill { to { clip-path: inset(0 0 0 0); } }
@keyframes seq-stroke { 80% { -webkit-text-stroke-color: rgb(43 26 25 / 0.32); } to { -webkit-text-stroke-color: transparent; } }
@keyframes seq-note { from { opacity: 0; translate: -12px 0; } }

@media (max-width: 860px) {
  .seq-names { grid-template-columns: minmax(0, 1fr); }
  .seq-ingr__row { flex-direction: column; align-items: flex-start; }
}

/* fact sheet: the single sequillo sits well inside its silhouette */
.flavours .ficha--single .ficha__img { width: auto; height: 64%; max-width: 70%; }


/* Sequillos hero: the sequillo arrives with a turn, the text rises line by line,
   then the sequillo keeps turning very slowly (a hint that there is more to it) */
@media (prefers-reduced-motion: no-preference) {
  .hole.is-live .hole__img { animation: seq-arrive 1200ms var(--ease-out) 120ms both, seq-turn 140s linear 1.4s infinite; }
  .hole.is-live .hole__text > * { animation: seq-rise 800ms var(--ease-out) both; }
  .hole.is-live .hole__text > :nth-child(1) { animation-delay: 60ms; }
  .hole.is-live .hole__text > :nth-child(2) { animation-delay: 140ms; }
  .hole.is-live .hole__text > :nth-child(3) { animation-delay: 220ms; }
  .hole.is-live .hole__text > :nth-child(4) { animation-delay: 300ms; }
  .hole.is-live .hole__text > :nth-child(5) { animation-delay: 380ms; }
}
/* never below scale 1: the hole must stay larger than the window cut in the page behind it */
@keyframes seq-arrive { from { rotate: -35deg; scale: 1.08; } }
@keyframes seq-turn { to { rotate: 360deg; } }
@keyframes seq-rise { from { opacity: 0; translate: 0 18px; } }

/* «Otros productos» on product pages (not Bizcochos Redondos). Two parts:
   1. The next family in catalogue order, big: the page reads like the printed catalogue, one page after another.
      Its name, its tagline in red and its photo on the Dondulcín silhouette, a glimpse of that page's header.
   2. «Toda la gama» in the language of the page's Formats: each photo on warm grey in its rounded square, the red
      rule under it and the name in bold; the five bizcochos under one group title. Every photo is sized so the
      product covers the same area of its square (--w / --h, set by the generator). No sideways scrolling anywhere. */
.next {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.next__text { display: grid; justify-items: start; }
.next__name { font-size: var(--fs-h2); font-weight: 800; font-stretch: 86%; line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.next__tagline { margin-top: 0.9rem; font-size: var(--fs-h4); font-weight: 650; color: var(--red); }
.next__meta { margin-top: 0.6rem; max-width: 40ch; color: var(--ink-soft); }
.next__btn { margin-top: 1.75rem; }
.next__media { position: relative; display: block; aspect-ratio: 1 / 0.78; }
.next__blob { position: absolute; inset: 0 3%; color: var(--soft-100); transition: scale 520ms var(--ease-out); }
.next__blob svg { width: 100%; height: 100%; }
/* boxed in the silhouette whatever its shape: tall loaves and wide bars alike */
.next__img { position: absolute; inset: 9% 14% 11%; width: 72%; height: 80%; max-width: none; object-fit: contain;
  filter: drop-shadow(0 26px 30px rgb(120 20 18 / 0.2)); transition: transform 520ms var(--ease-out), filter 520ms ease; }
.next:active .next__btn { transform: scale(0.97); }
.next:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) {
  .next:hover .next__btn { background: var(--red-700); box-shadow: 0 10px 24px -12px rgb(225 31 28 / 0.65); }
  .next:hover .next__btn .icon { transform: translateX(3px); }
  .next:hover .next__img { transform: translateY(-4%) rotate(-3deg) scale(1.04); filter: drop-shadow(0 36px 34px rgb(120 20 18 / 0.24)); }
  .next:hover .next__blob { scale: 1.03; }
}

.shelf { margin-top: var(--section); }
.shelf__list, .shelf__sub { margin: 0; padding: 0; list-style: none; }
.shelf__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem); }
.shelf__list > li:not(.shelf__group) { grid-row: 2; }
.shelf__group { display: grid; grid-column: 4 / -1; grid-row: 1 / span 2; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.shelf__label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1rem; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem); font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1; }
.shelf__sub { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: subgrid; }
.shelf__item { display: grid; align-content: start; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.shelf__img { position: relative; display: block; aspect-ratio: 1; border-radius: 16px; background: var(--soft-100); transition: transform 160ms var(--ease-out); }
.shelf__img img { position: absolute; inset: 0; margin: auto; width: var(--w, 76%); height: var(--h, 76%); max-width: none; object-fit: contain;
  filter: drop-shadow(0 14px 14px rgb(120 70 20 / 0.18)); transition: transform 400ms var(--ease-out); }
.shelf__name { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 2px solid var(--red); font-size: var(--fs-body); font-weight: 750; line-height: 1.2; text-wrap: balance; transition: color 200ms ease; }
.shelf__here { margin-top: 0.2rem; font-size: var(--fs-xs); font-weight: 650; color: var(--red); }
/* the page you are on: its square ringed in red, like the selected flavour */
.shelf__item[aria-current="page"] .shelf__img { box-shadow: inset 0 0 0 2px var(--red); }
.shelf__item:active .shelf__img { transform: scale(0.97); }
.shelf__item:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) {
  .shelf__item:hover .shelf__img img { transform: scale(1.06) rotate(-2deg); }
  .shelf__item:not([aria-current]):hover .shelf__name { color: var(--red); }
}
@media (prefers-reduced-motion: reduce) {
  .next__img, .next__blob, .shelf__img img { transition: none; }
  .next:hover .next__img, .next:hover .next__blob, .shelf__item:hover .shelf__img img { transform: none; scale: none; }
}
@media (max-width: 860px) {
  .next { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .next__media { order: -1; width: min(100%, 24rem); justify-self: center; }
  .next__btn { margin-top: 1.4rem; }
  /* tablets and phones: three to a row, nothing to scroll sideways. The families on the first row, then the
     bizcochos under their title, three and two (the two centred, so no square is missing) */
  .shelf__list { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; row-gap: 1.5rem; column-gap: 0.75rem; }
  .shelf__list > li:not(.shelf__group) { grid-row: auto; grid-column: span 2; }
  .shelf__group { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; row-gap: 1.25rem; }
  .shelf__label { grid-row: auto; margin: 0.75rem 0 0; }
  .shelf__sub { grid-row: auto; row-gap: 1.5rem; }
  .shelf__sub > li { grid-column: span 2; }
  .shelf__sub > li:nth-child(4) { grid-column: 2 / span 2; }
  .shelf__img { border-radius: 12px; }
  .shelf__name { margin-top: 0.6rem; padding-top: 0.5rem; font-size: var(--fs-small); }
  .shelf__item:focus-visible { border-radius: 12px; }
}

/* Formats on product pages: a tile per format, with the figure that tells it apart (read off its name) */
.pf-lead { margin-top: 1.25rem; max-width: 52ch; }
.pf-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.pf { display: grid; align-content: start; }
.pf__stage { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--soft-100); }
.pf__stage img { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 20px rgb(120 70 20 / 0.18)); transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pf:hover .pf__stage img { transform: scale(1.04) rotate(-1.5deg); } }
.pf__fig { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--red); }
.pf__fig strong { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); font-weight: 800; font-stretch: 85%; line-height: 0.9; letter-spacing: -0.035em; color: var(--red); font-variant-numeric: tabular-nums; }
.pf__fig span { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.pf__name { margin-top: 0.75rem; font-size: var(--fs-h4); font-weight: 750; }
.pf__sub { font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 760px) {
  .pf-list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  /* compact on phones: photo on the left, the figure and the name on the right */
  .pf { grid-template-columns: 42% minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .pf__stage { grid-row: 1 / span 3; aspect-ratio: 1; }
  .pf__fig { margin-top: 0; padding-top: 0.6rem; flex-wrap: wrap; row-gap: 0.1rem; }
  .pf__name { margin-top: 0.4rem; }
}

/* Sequillos fact sheet: allergens as chips, nutrition per 100 g in the open */
.algs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.alg { display: inline-flex; align-items: center; min-height: 28px; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 650; }
.alg--has { background: var(--red); color: #fff; }
.alg--may { box-shadow: inset 0 0 0 1.5px var(--soft-200); color: var(--ink-soft); }
.algs__key { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--ink-soft); }
.algs__key .alg { min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--ink-soft); font-weight: 500; }
.algs__key .alg::before { content: ""; width: 0.6rem; height: 0.6rem; margin-right: 0.4rem; border-radius: 50%; }
.algs__key .alg--has::before { background: var(--red); }
.algs__key .alg--may::before { box-shadow: inset 0 0 0 1.5px var(--soft-200); }
.nutri h4 small { margin-left: 0.35rem; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); }
.nutri__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; margin: 0.6rem 0 0; }   /* rows with hairlines, no box: it already sits in the sheet's card */
.nutri__cell { display: grid; align-content: start; gap: 0.3rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.nutri__cell:first-child { grid-column: 1 / -1; }   /* energy across, the four nutrients in a 2 × 2 grid */
.nutri__cell dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.nutri__cell dd { margin: 0; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.nutri__cell dd strong { font-size: 1.6rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; }
.nutri__cell dd small { display: block; margin-top: 0.2rem; font-size: var(--fs-xs); color: var(--ink-soft); }

/* Bizcochos Redondos: «Otros productos» as small dark planets on a faint orbit */
.cosmos .orbit-list { position: relative; isolation: isolate; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-block: 12px; }   /* room to float and grow without being clipped by the sideways scroll on phones */
/* the orbit: a dashed line from each planet's centre to the next one's (circles are as wide as their
   item, so the centre sits at 50cqw down) */
.cosmos .orbit-list li { position: relative; container-type: inline-size; }
.cosmos .orbit-list li:not(:last-child)::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50cqw; width: calc(100% + clamp(0.75rem, 2vw, 1.5rem));
  border-top: 1px dashed rgb(255 255 255 / 0.22); pointer-events: none;
}
.cosmos .rel__img { transition: box-shadow 300ms ease, scale 420ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .cosmos .orbit-list .rel__img { animation: rel-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); }
}
@keyframes rel-float { 50% { translate: 0 -7px; } }
@media (hover: hover) and (pointer: fine) {
  .cosmos .rel:hover .rel__img { scale: 1.08; }
  .cosmos .rel:hover .rel__img img { transform: scale(1.04) rotate(-6deg); }
}
/* Phones: no sideways row. The planets become a constellation: three lanes (left, right, middle; --x from the
   generator), each planet just under the last and never in the same lane as the one before, joined edge to edge
   by a dashed line that draws itself as it scrolls into view. Sizes in cqw of the list: circles 30, step 21. */
.rel__line { display: none; }
@media (max-width: 860px) {
  .cosmos .orbit-list {
    --step: 21cqw;
    display: block; position: relative; container-type: inline-size; overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding: 0 0 calc(6 * 21% + 30% + 3.5rem);   /* % of the width: the six steps, one circle, its name */
  }
  .cosmos .orbit-list li { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--i) * var(--step)); width: 30cqw; container-type: normal; }
  .cosmos .orbit-list li::before { display: none; }
  .cosmos .orbit-list .rel { grid-template-columns: 100%; justify-items: stretch; gap: 0.6rem; }
  /* the name may run a little wider than its circle, evenly on both sides, without widening the circle */
  .cosmos .orbit-list .rel__name { margin-inline: -4cqw; font-size: 0.875rem; line-height: 1.25; }
  .cosmos .orbit-list .rel:active .rel__img { scale: 0.95; }
  @supports (width: hypot(1px, 1px)) and (rotate: atan2(1px, 1px)) {
    /* from this circle's centre towards the next one's, starting and stopping at their edges (radius 15) */
    .rel__line {
      display: block; position: absolute; z-index: -1; left: 15cqw; top: 15cqw; height: 2px;
      width: calc(hypot(var(--dx) * 1cqw, var(--step)) - 30cqw);
      transform-origin: 0 0; transform: rotate(atan2(var(--step), var(--dx) * 1cqw)) translateX(15cqw);
      border-top: 1px dashed rgb(255 255 255 / 0.32); pointer-events: none;
    }
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .rel__line { animation: line-draw linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
      }
    }
  }
}
@keyframes line-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* «¿Buscas un formato concreto?» on product pages: white, in a card with the fact sheet's soft shadow.
   It follows «Otros productos» (also white), so it takes no top padding of its own. */
.format-close { background: var(--paper); padding-top: 0; }
.close-card {
  max-width: none; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 1px 0 rgb(120 20 18 / 0.05), 0 24px 50px -34px rgb(120 20 18 / 0.35);
}

.pf-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.pf-group__title { margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; }
.pf-group__title + .pf-list { margin-top: 1.25rem; }
.pf__fig--none { margin: 0; padding: 0; border: 0; }
.pf__fig--none + .pf__name { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--red); }

/* Fact sheets on white: no grey band behind; the sheet keeps its card and soft shadow */
.flavours, .cut-ficha { background: var(--paper); }
.flavours .flavour-switch, .cut-ficha { --switch-bg: var(--soft-100); }

/* the open fact sheet under the night sky of Bizcochos Redondos */
.cosmos .nutri__cell { border-top-color: rgb(255 255 255 / 0.14); }
.cosmos .nutri__cell dt, .cosmos .nutri__cell dd small, .cosmos .nutri h4 small, .cosmos .algs__key, .cosmos .algs__key .alg { color: rgb(255 255 255 / 0.62); }
.cosmos .alg--may { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3); color: rgb(255 255 255 / 0.85); }
.cosmos .algs__key .alg--may::before { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3); }

/* fact sheet: a quiet link down to the page's «Formatos» section, or one line when there is a single format */
.ficha__to-formats { display: inline-flex; font-size: var(--fs-small); white-space: nowrap; }
.ficha__to-formats .icon { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) { .ficha__to-formats:hover .icon { transform: translateX(3px); } }   /* the icon is turned: this moves it down */

/* «Formatos» narrowed to one flavour: its formats stay, the rest fade back */
.pf { transition: opacity 300ms ease, filter 300ms ease; }
.pf.is-off { opacity: 0.28; filter: grayscale(1); }
.pf-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.5rem; padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-radius: 999px; background: var(--soft-100); font-size: var(--fs-small); width: fit-content; max-width: 100%; }
.pf-filter[hidden] { display: none; }
.pf-filter strong { color: var(--red); }
.pf-filter__all { min-height: 36px; padding: 0.35rem 0.95rem; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  font: inherit; font-weight: 650; cursor: pointer; box-shadow: 0 4px 12px -6px rgb(43 26 25 / 0.35); transition: transform 160ms var(--ease-out); }
.pf-filter__all:active { transform: scale(0.97); }
.ficha__format { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--ink-soft); }
.ficha__format span { font-weight: 650; color: var(--ink); }
.cosmos .ficha__format { color: rgb(255 255 255 / 0.7); }
.cosmos .ficha__format span { color: #fff; }
@media (max-width: 560px) { .pf-filter { border-radius: 16px; } }   /* it wraps on phones: card corners, not a pill */

/* foot of the fact sheet: storage on the left, the way down to «Formatos» on the right */
.ficha__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.ficha__foot .ficha__keep { margin: 0; }
/* «Todos los sabores» on the formats every flavour comes in */
.pf__all { margin-top: 0.35rem; font-size: var(--fs-xs); font-weight: 650; color: var(--red); }

/* Wide screens (from 1600px): the content column widens, headlines grow, and the home hero is composed
   against the content column instead of the screen's edge, so no red gap opens between text and art.
   Laptops and phones are untouched. */
@media (min-width: 1600px) {
  :root {
    --maxw: 1520px;
    --fs-display: clamp(6.4rem, 2.6rem + 3.9vw, 8.5rem);
    --fs-h2: clamp(4.25rem, 2rem + 2.4vw, 5.25rem);
    --fs-lead: 1.5rem;
  }
  .hero__title { font-size: var(--fs-display); }   /* also over the short-screen rule above */
  /* Dondulcín sits at the right edge of the content column, not of the screen */
  .hero__mascot { right: calc((100vw - var(--maxw)) / 2 + var(--gutter)); width: min(26vw, 540px); }
  /* the rows of minis still run off the right edge (that is the effect), a little larger */
  .hero__minis { width: min(70vw, 1380px); }
}

/* ===== Empresa (oct. 2026) ===== */
/* The story in chapters: the title stays in view on the left while the chapters go by on the right,
   each with its time in red display type (not the home's timeline, which says less) */
.story { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.story__head { position: sticky; top: calc(72px + 2rem); }
.story__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--red); }
.story__list li { display: grid; grid-template-columns: clamp(7rem, 11vw, 10rem) minmax(0, 1fr); gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.5rem, 2.5vw, 2.25rem) 0; border-bottom: 1px solid var(--line); }
.story__when { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 800; font-stretch: 86%; line-height: 1; letter-spacing: -0.03em; color: var(--red); }
.story__list h3 { font-size: var(--fs-h4); font-weight: 750; line-height: 1.25; }
.story__list p { margin-top: 0.5rem; max-width: 52ch; color: var(--ink-soft); }
@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__head { position: static; }
  .story__list li { grid-template-columns: minmax(0, 1fr); }
}

/* Certifications: the format cards of the product pages (seal on warm grey, red rule, name, what it covers) */
.certs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.certs-cards li { display: grid; align-content: start; }
/* each card opens its certificate in a new tab: the whole card is the link */
.certs-cards__link { display: grid; align-content: start; color: inherit; text-decoration: none; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.certs-cards__link:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.certs-cards__stage { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--soft-100); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.certs-cards__stage img { width: auto; height: 46%; max-width: 72%; object-fit: contain; transition: transform 300ms var(--ease-out); }
.certs-cards__link:active .certs-cards__stage { transform: scale(0.98); }
.certs-cards strong { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--red); font-size: var(--fs-h4); font-weight: 750; }
.certs-cards strong + span { margin-top: 0.25rem; font-size: var(--fs-small); color: var(--ink-soft); }
.certs-cards__doc { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: var(--fs-small); font-weight: 650; color: var(--red); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: transparent; transition: text-decoration-color 180ms ease; }
.certs-cards__doc .icon { width: 1.1rem; height: 1.1rem; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .certs-cards__link:hover .certs-cards__stage { background: var(--soft-200); }
  .certs-cards__link:hover .certs-cards__stage img { transform: scale(1.05); }
  .certs-cards__link:hover .certs-cards__doc { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) { .certs-cards__stage, .certs-cards__stage img { transition: none; } }
@media (max-width: 860px) { .certs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Awards: the Hypnos award leads with the TV piece about us; the rest as photo cards that open their story */
.award-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.award-lead__video { margin: 0; }
.award-lead__video figcaption { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--ink-soft); }
.award-lead__name { margin-top: 0.5rem; font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; line-height: 1.05; letter-spacing: -0.02em; }
.award-lead__text p { margin: 1rem 0 1.5rem; max-width: 42ch; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }
.award__year { display: block; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 800; font-stretch: 86%; line-height: 1; letter-spacing: -0.03em; color: var(--red); }
.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding: 0; list-style: none; }
.award { display: grid; align-content: start; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.award__img { display: block; overflow: hidden; border-radius: 16px; background: var(--soft-100); }
.award__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms var(--ease-out); }
.award .award__year { margin-top: 1rem; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); }
.award__name { margin-top: 0.35rem; font-size: var(--fs-h4); font-weight: 750; line-height: 1.25; transition: color 180ms ease; }
.award__by { margin-top: 0.25rem; font-size: var(--fs-small); color: var(--ink-soft); }
.award:active .award__img { transform: scale(0.98); }
.award:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) {
  .award:hover .award__img img { transform: scale(1.04); }
  .award:hover .award__name { color: var(--red); }
}
/* Fairs: one row per fair, its editions as the site's warm grey pills, each to its story */
.fairs__title { margin-top: clamp(3.5rem, 6vw, 5rem); font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; }
.fairs { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 2px solid var(--red); }
.fair { display: grid; grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 1.4fr); gap: 0.75rem clamp(1.5rem, 4vw, 3rem); align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.fair__name strong { display: block; font-size: var(--fs-h4); font-weight: 750; }
.fair__name span { font-size: var(--fs-small); color: var(--ink-soft); }
.fair__years { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 860px) {
  .award-lead { grid-template-columns: minmax(0, 1fr); }
  /* phones: each award as a compact row, the photo on the left (like the format cards) */
  .awards { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .award { grid-template-columns: 40% minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .award__img { grid-row: 1 / span 3; border-radius: 12px; }
  .award__img img { aspect-ratio: 1; }
  .award .award__year { margin-top: 0; }
  .award__name { font-size: 1rem; }
  .fair { grid-template-columns: minmax(0, 1fr); padding: 1rem 0; }
}

/* Work with us: its own card on warm grey, before the closing card */
.jobs { padding-top: 0; }
.jobs__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 16px; background: var(--soft-100); }
.jobs__card p { margin-top: 0.5rem; max-width: 52ch; color: var(--ink-soft); }
.jobs + .closing-band { padding-top: 0; }

/* =========================================================
   Product headers, second round (Oct 2026): Mini Magdalenas (the tray), Magdalenas (the morning counter),
   Bizcochos Individuales (to go) and Planchas (ready to cut). Same type, pills and cards as the rest.
   ========================================================= */
.tray__title, .morning__title, .togo__title, .slab__title { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem); font-weight: 800; font-stretch: 88%; line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; }
.tray__tagline, .morning__tagline, .togo__tagline, .slab__tagline { margin-top: 1rem; font-size: var(--fs-h4); font-weight: 650; color: var(--red); }
.morning .lead, .togo .lead, .slab .lead { margin-top: 1.25rem; max-width: 46ch; }
.morning .actions, .togo .actions, .slab .actions { margin-top: 2rem; }
.tray, .morning, .togo, .slab { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }

/* ===== Mini Magdalenas: the tray =====
   The eight flavours stand side by side on one warm grey tray, a collection to look at; the chosen one lifts
   out of its place (white, ringed in red, like every chosen flavour) and its sheet opens under the tray,
   pointing at it. «¿otra mini?» takes the next one. Naranja waits as an empty place on the tray. */
/* title and tagline beside the lead (two blocks of about the same height, so no empty corner), then one band
   under both with the key facts on the left and the buttons on the right */
.tray__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titles lead" "meta meta"; gap: 0 clamp(2rem, 5vw, 5rem); align-items: end; }
.tray__titles { grid-area: titles; }
.tray__lead { grid-area: lead; max-width: 50ch; }
.tray__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.tray__meta .p-facts { margin: 0; padding: 0; border: 0; }
.tray__board { margin-top: clamp(2.5rem, 5vw, 4rem); }
.tray__bar { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: -1.1rem; padding-inline: 0.5rem; }
.tray__pick { padding-bottom: 1.6rem; font-size: var(--fs-small); font-weight: 650; letter-spacing: 0; color: var(--ink-soft); }
/* «¿otra mini?»: the home's lettering, in red, tilted, sitting on the tray's edge */
.tray__more { padding: 0.25rem 0.5rem; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 200ms var(--ease-out); }
.tray__more-art { display: block; width: clamp(6.5rem, 4.5rem + 5vw, 9rem); aspect-ratio: 247.5 / 165.1; background: var(--red); rotate: -6deg;
  -webkit-mask: url("../img/otra-mini.svg") center / contain no-repeat; mask: url("../img/otra-mini.svg") center / contain no-repeat; transition: rotate 260ms var(--ease-out); }
.tray__more:active { transform: scale(0.95); }
.tray__more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .tray__more:hover .tray__more-art { rotate: -10deg; } }

.tray__slots {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(0.25rem, 0.7vw, 0.6rem);
  padding: clamp(0.5rem, 1vw, 0.85rem); border-radius: 28px; background: var(--soft-100);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -16px 30px -24px rgb(120 20 18 / 0.25);
}
.tray__slot {
  position: relative; display: grid; justify-items: center; align-content: end; gap: 0.55rem; min-width: 0;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) 0.35rem 0.85rem; border: 0; border-radius: 20px; background: transparent;
  font: inherit; color: var(--ink-soft); text-align: center; cursor: pointer;
  transition: background-color 220ms ease, box-shadow 260ms ease, color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tray__mini { position: relative; display: grid; place-items: end center; width: 100%; aspect-ratio: 1 / 0.9; transition: scale 160ms var(--ease-out); }
/* a contact shadow drawn under each mini (no CSS drop-shadow on these cut-outs: Safari veils them) */
.tray__mini::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -5%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(90 40 20 / 0.3), transparent); transition: transform 420ms var(--ease-out), opacity 420ms ease; }
.tray__img { position: relative; width: 86%; height: auto; max-height: 100%; object-fit: contain; transform-origin: 50% 100%; transition: transform 460ms var(--ease-out); }
.tray__name { display: block; min-height: 2.4em; font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); font-weight: 650; line-height: 1.2; text-wrap: balance; }
.tray__name small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 500; }
.tray__slot[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--red), 0 16px 30px -20px rgb(120 20 18 / 0.55); }
.tray__slot[aria-selected="true"] .tray__img { transform: translateY(-10%) scale(1.06); }
.tray__slot[aria-selected="true"] .tray__mini::before { transform: scale(0.72); opacity: 0.55; }
.tray__slot:active .tray__mini { scale: 0.96; }
.tray__slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tray__slot:not([aria-selected="true"]):not(.tray__slot--soon):hover { color: var(--ink); }
  .tray__slot:not([aria-selected="true"]):not(.tray__slot--soon):hover .tray__img { transform: translateY(-4%) rotate(-3deg); }
}
/* «¿otra mini?» hops the next one out of the tray */
.tray__slot.is-hop .tray__img { animation: tray-hop 560ms var(--ease-out); }
@keyframes tray-hop-sm { 0% { transform: none; } 45% { transform: translateY(-13%) rotate(6deg) scale(1.03); } 100% { transform: translateY(-6%) scale(1.03); } }
@keyframes tray-hop { 0% { transform: none; } 45% { transform: translateY(-16%) rotate(7deg) scale(1.06); } 100% { transform: translateY(-10%) scale(1.06); } }
/* on the way: an empty place on the tray */
.tray__slot--soon { cursor: default; color: var(--ink-soft); }
.tray__mini--soon { place-items: end center; }
.tray__mini--soon::before { display: none; }
.tray__cup { width: 62%; height: 22%; margin-bottom: 1%; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--soft-200); background: rgb(255 255 255 / 0.5); }

/* the sheet opens under the tray, a notch pointing at the chosen mini */
.tray__panels { position: relative; margin-top: 1.25rem; }
.tray__panels::before {
  content: ""; position: absolute; z-index: 0; top: -8px; left: var(--x, 50%); width: 17px; height: 17px; translate: -50% 0; rotate: 45deg;
  border-radius: 3px 0 0 0; background: var(--red);
}
.tray__panels.is-ready::before { transition: left 460ms var(--ease-out); }
.tray .ficha { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* the chosen mini comes in with a turn, its bag a beat later */
  .tray .ficha.is-entering .ficha__img { animation: mini-turn 760ms cubic-bezier(0.3, 1.3, 0.5, 1) both; }
  .tray .ficha.is-entering .ficha__pack { animation: ficha-in 460ms var(--ease-out) 160ms both; }
}
@keyframes mini-turn { from { opacity: 0; transform: translateY(12%) rotate(-16deg) scale(0.86); } }

/* the 3D render of the chocolate-chip mini, in its fact sheet (photo first; the switch loads the frames) */
.ficha__media--turn > .ficha__img { grid-area: 1 / 1; width: auto; height: 64%; max-width: 80%; transition: opacity 360ms ease, scale 460ms var(--ease-out); }
.ficha__media--turn > .is-turntable { opacity: 0; scale: 0.96; pointer-events: none; }
.ficha__media--turn.is-3d > .ficha__img:not(.is-turntable) { opacity: 0; scale: 0.96; }
.ficha__media--turn.is-3d > .is-turntable { opacity: 1; scale: 1; pointer-events: auto; }
.ficha__media--turn .turn-switch { bottom: 0.25rem; left: 0; translate: 0 0; }
.ficha__media--turn .turn-hint { bottom: auto; top: 0.5rem; }
.ficha__media--turn.is-3d:not(.has-dragged) .turn-hint { opacity: 1; translate: -50% 0; transition-delay: 500ms; }
.ficha__img.is-turntable { animation: none; filter: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ficha__img.is-turntable.is-dragging { cursor: grabbing; }

@media (max-width: 900px) {
  .tray__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titles" "lead" "meta"; }
  .tray__lead { margin-top: 1.25rem; }
  .tray__meta { justify-content: flex-start; }
  /* a square tray: three rows of three */
  .tray__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 24px; }
  .tray__mini { aspect-ratio: 1 / 0.82; }
  .tray__img { width: 74%; }
  /* the 3 × 3 tray: the chosen one lifts less, and its hop stays inside the red ring */
  .tray__slot { padding-top: 1.5rem; }
  .tray__slot[aria-selected="true"] .tray__img { transform: translateY(-6%) scale(1.03); }
  .tray__slot.is-hop .tray__img { animation-name: tray-hop-sm; }
}
@media (max-width: 860px) {
  .ficha__media--turn .turn-switch { bottom: 0.25rem; }
  /* 3 to a row: the chosen mini of the top row rises into the sticker's corner, so the sticker sits above the board, not on it */
  .tray__bar { margin-bottom: 0.5rem; align-items: center; }
  .tray__pick { padding-bottom: 0; }
  /* in three rows the notch under the tray can only follow the column, never the row: it pointed at the wrong mini.
     The red ring on the chosen one says it alone */
  .tray__panels::before { display: none; }
}
@media (max-width: 560px) {
  .tray__bar { padding-inline: 0.25rem; }
  .tray__slot { padding: 1.35rem 0.2rem 0.65rem; border-radius: 16px; gap: 0.4rem; }
  .tray__img { width: 74%; }
  .tray__name { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tray__img, .tray__mini::before, .tray__panels.is-ready::before { transition: none; }
  .tray__slot.is-hop .tray__img { animation: none; }
}

/* ===== Magdalenas: the one from the bar counter =====
   A calm page. The header is the morning coffee with the magdalena standing in front of the photo;
   then the scale (35 g against the mini's 12,5 g) and the box of 48 filling one at a time. */
.morning__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.morning__media { position: relative; padding-bottom: 13%; }
.morning__photo { overflow: hidden; aspect-ratio: 1.26; border-radius: var(--radius); background: var(--soft-100); }
.morning__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* inside the photo's right edge, so the frame reads as one clean line and no strip of cup shows beside the dome */
.morning__mag { position: absolute; right: 7%; bottom: 0; width: 48%; }
.morning__mag-img { position: relative; display: block; width: 100%; height: auto; }
.morning__shadow { position: absolute; left: 6%; right: 6%; bottom: -4%; height: 13%; border-radius: 50%; background: radial-gradient(closest-side, rgb(70 35 20 / 0.32), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .morning__photo img { animation: morning-photo 1400ms var(--ease-out) both; }
  .morning__mag { animation: morning-mag 1100ms var(--ease-out) 260ms both; }
}
@keyframes morning-photo { from { opacity: 0; scale: 1.06; } }
@keyframes morning-mag { from { opacity: 0; transform: translateY(10%); } }
@media (max-width: 860px) {
  .morning__grid { grid-template-columns: minmax(0, 1fr); }
  .morning__media { order: -1; width: 100%; max-width: 560px; margin-inline: auto; padding-bottom: 11%; }
  .morning__mag { right: 7%; width: 44%; }
}

/* 35 g against 12,5 g: both stand on a warm grey counter; scrolling, the magdalena grows to its size */
.scale { padding-top: clamp(2.5rem, 5vw, 5rem); }
.scale__text .lead, .box48__text .lead { margin-top: 1rem; }
.scale__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.scale__stage { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2rem, 7vw, 6rem); padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--soft-100); }
.scale__item { position: relative; display: grid; justify-items: center; }
.scale__img { position: relative; display: block; height: auto; transform-origin: 50% 100%; }
.scale__item--mini .scale__img { width: clamp(6rem, 3rem + 9vw, 11rem); }
/* 2,8 times the weight: about 1,41 times as tall */
.scale__item--mag .scale__img { width: clamp(8.5rem, 4.25rem + 12.7vw, 15.5rem); }
.scale__label { display: grid; justify-items: center; gap: 0.2rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--red); min-width: 8rem; }
.scale__label strong { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 800; font-stretch: 88%; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.scale__item--mag .scale__label strong { color: var(--red); }
.scale__label span { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scale__item--mag .scale__img { animation: mag-grow linear both; animation-timeline: view(); animation-range: entry 60% cover 52%; }
  }
}
@keyframes mag-grow { from { scale: 0.71; } }
@media (max-width: 860px) {
  .scale__grid { grid-template-columns: minmax(0, 1fr); }
}

/* the box of 48, from above: one magdalena at a time as it crosses the screen, then the second layer lands */
.box48 { padding-top: 0; }
.box48__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.box48__count { display: flex; align-items: baseline; gap: 0.75rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 1.5rem; }
.box48__n { font-size: clamp(4.5rem, 2.5rem + 7vw, 9rem); font-weight: 800; font-stretch: 85%; line-height: 0.85; letter-spacing: -0.04em; color: var(--red); font-variant-numeric: tabular-nums; }
.box48__n::after { content: "48"; }
.box48__count span { font-size: var(--fs-h4); font-weight: 700; }
.box48__stage { position: relative; margin: 0; aspect-ratio: 1300 / 982; }
.box48__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.box48__cells { position: absolute; inset: 0; }
.box48__cell { position: absolute; background-image: url("../img/caja48-llena.webp"); background-repeat: no-repeat; opacity: 0;
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent); }
@property --n { syntax: "<integer>"; inherits: false; initial-value: 48; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .box48 { view-timeline: --box48 block; }
    .box48__cell { animation: cell-in linear both; animation-timeline: --box48;
      animation-range: cover calc(8% + var(--i) * 1.25%) cover calc(11% + var(--i) * 1.25%); }
    .box48__full { animation: layer-two linear both; animation-timeline: --box48; animation-range: cover 41% cover 50%; }
    .box48__n { animation: count48 linear both; animation-timeline: --box48; animation-range: cover 8% cover 50%; counter-reset: n var(--n); }
    .box48__n::after { content: counter(n); }
  }
}
@keyframes cell-in { from { opacity: 0; transform: translateY(-12%) scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes layer-two { from { opacity: 0; transform: translateY(-5%) scale(1.035); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes count48 { 0% { --n: 0; } 74% { --n: 24; } 79% { --n: 24; } 100% { --n: 48; } }
@media (max-width: 860px) {
  .box48__grid { grid-template-columns: minmax(0, 1fr); }
  .box48__count { margin-bottom: 1rem; }
}

/* ===== Bizcochos Individuales: to go =====
   The open display box of 30 is the interface: take one out (it rises from among the others and lands in
   front) and open it (the wrapper slides off, the bizcocho stays). */
.togo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.togo__stage { position: relative; aspect-ratio: 1 / 0.86; }
.togo__blob { position: absolute; inset: 0 3% 6%; color: var(--soft-100); }
.togo__blob svg { width: 100%; height: 100%; }
.togo__box { position: absolute; z-index: 2; left: 9%; top: 9%; width: 84%; height: auto; cursor: pointer; }
.togo__bar { position: absolute; z-index: 1; left: 2%; top: 58%; width: 56%; transform-origin: 50% 50%;
  transform: translate(13%, -100%) rotate(-82deg) scale(0.62); }
.togo__wrapper, .togo__wrap { display: block; width: 100%; height: auto; }
.togo__open { position: absolute; left: 9.5%; top: 22%; width: 81%; height: auto; opacity: 0; }
.togo__stage[data-state="out"] .togo__bar, .togo__stage[data-state="open"] .togo__bar { z-index: 3; transform: rotate(-4deg); cursor: pointer; }
.togo__stage[data-state="out"] .togo__bar::after, .togo__stage[data-state="open"] .togo__bar::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 4%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgb(70 35 20 / 0.32), transparent); }
.togo__stage[data-state="open"] .togo__open { opacity: 1; transition: opacity 360ms ease 140ms; }
.togo__stage[data-state="open"] .togo__wrapper { animation: wrapper-off 820ms cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes wrapper-off {
  0% { transform: none; opacity: 1; clip-path: inset(0 0 0 0); }
  30% { transform: translate(4%, -3%) rotate(2deg); opacity: 1; clip-path: inset(0 0 0 0); }
  100% { transform: translate(62%, -10%) rotate(9deg); opacity: 0; clip-path: inset(0 0 0 38%); }
}
.togo__step { position: absolute; z-index: 4; left: 50%; bottom: -0.5rem; translate: -50% 0; margin: 0; }
.togo__btn {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 46px; padding: 0.55rem 1.15rem 0.55rem 1.25rem;
  border: 0; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 0.975rem; font-weight: 680; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--red), 0 12px 24px -14px rgb(120 20 18 / 0.5);
  transition: transform 160ms var(--ease-out), background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.togo__btn .icon { color: var(--red); transition: transform 220ms var(--ease-out), rotate 300ms var(--ease-out); }
.togo__stage[data-state="open"] .togo__btn .icon { rotate: -180deg; }
.togo__btn:active { transform: scale(0.97); }
.togo__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .togo__btn:hover { background: var(--soft-100); }
  .togo__stage[data-state="box"] .togo__box:hover ~ .togo__step .togo__btn .icon, .togo__btn:hover .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .togo__box { animation: hero-fade 900ms var(--ease-out) 120ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .togo__stage[data-state="open"] .togo__wrapper { animation: none; opacity: 0; }
}
@media (max-width: 860px) {
  .togo__grid { grid-template-columns: minmax(0, 1fr); }
  .togo__stage { order: -1; width: 100%; max-width: 520px; margin: 0 auto 1.5rem; }
}

/* «¿Cuántas cajas necesito?»: a calculator in the fact sheet's card; inputs left, the answer right */
/* closed, the card is a short row: it sits closer to the fact sheet above and to «Formatos» below */
.boxcalc { padding-top: 0; margin-top: calc(var(--section) * -0.5); padding-bottom: calc(var(--section) * 0.45); }
.boxcalc__card {
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.75rem); border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 1px 0 rgb(120 20 18 / 0.05), 0 24px 50px -34px rgb(120 20 18 / 0.35);
}
/* closed by default: the question and «Calcular»; the calculator opens in place under a fine rule */
.boxcalc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.boxcalc__title { font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.boxcalc__intro { margin-top: 0.5rem; max-width: 52ch; color: var(--ink-soft); }
.boxcalc__toggle { flex: none; }
.boxcalc__toggle .icon { transition: rotate 260ms var(--ease-out); }
.boxcalc__toggle[aria-expanded="true"] .icon { rotate: 45deg; }
html:not(.js) .boxcalc__toggle { display: none; }
.boxcalc__panel { display: grid; grid-template-rows: 1fr; }
.js .boxcalc__panel { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 380ms var(--ease-out), opacity 220ms ease; }
.js .boxcalc__panel.is-open { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 420ms var(--ease-out), opacity 300ms ease 80ms; }
.boxcalc__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); min-height: 0; overflow: hidden;
  /* room for focus rings and the chosen chips' shadow, which the clip would cut */
  margin: 0 -6px; padding: 0 6px;
}
.boxcalc__inner > * { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.boxcalc__panel { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); }
.js .boxcalc__panel:not(.is-open) { margin-top: 0; border-top-color: transparent; transition: grid-template-rows 380ms var(--ease-out), opacity 220ms ease, margin-top 380ms var(--ease-out), border-color 200ms ease; }
.boxcalc__in > .boxcalc__field:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .js .boxcalc__panel, .js .boxcalc__panel.is-open, .boxcalc__toggle .icon { transition: none; } }
.boxcalc__field { margin: 1.75rem 0 0; padding: 0; border: 0; min-width: 0; }
.boxcalc__label { display: block; margin-bottom: 0.6rem; padding: 0; font-size: var(--fs-small); font-weight: 650; }
.stepper { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: var(--soft-100); }
.stepper__btn { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
  box-shadow: 0 6px 14px -10px rgb(120 20 18 / 0.5); transition: transform 160ms var(--ease-out), color 180ms ease; -webkit-tap-highlight-color: transparent; }
.stepper__btn .icon { width: 1.15rem; height: 1.15rem; }
.stepper__btn:active { transform: scale(0.94); }
.stepper__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .stepper__btn:hover { color: var(--red); } }
.stepper__input { width: 4.5ch; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: center;
  font: inherit; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 8px; }
.boxcalc__days { display: grid; grid-template-columns: repeat(7, minmax(0, 3rem)); gap: 0.4rem; }
.boxcalc__days input, .slab__kind input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.boxcalc__days label { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--soft-100); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 180ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.boxcalc__days label:active { transform: scale(0.95); }
.boxcalc__days input:checked + label { background: var(--paper); box-shadow: inset 0 0 0 2px var(--red), 0 8px 18px -12px rgb(120 20 18 / 0.5); }
.boxcalc__days input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .boxcalc__days input:not(:checked) + label:hover { background: var(--soft-200); } }
.boxcalc__fmt { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.boxcalc__out { align-self: center; }
.boxcalc__big { display: grid; gap: 0.4rem; }
.boxcalc__big strong { font-size: clamp(4.5rem, 2.5rem + 6vw, 8rem); font-weight: 800; font-stretch: 85%; line-height: 0.85; letter-spacing: -0.04em; color: var(--red); font-variant-numeric: tabular-nums; }
.boxcalc__big span { font-size: var(--fs-h4); font-weight: 700; }
.boxcalc__facts { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.75rem, 1rem + 2vw, 2.75rem); margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.boxcalc__facts div { display: grid; gap: 0.2rem; }
.boxcalc__facts dt { font-size: var(--fs-small); color: var(--ink-soft); }
.boxcalc__facts dd { margin: 0; font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); font-weight: 750; font-variant-numeric: tabular-nums; }
/* one box against its 150 days: a measured line, the red stretch is how long the box lasts */
.shelf150 { margin-top: 1.75rem; }
.shelf150__title { font-size: var(--fs-small); color: var(--ink-soft); }
.shelf150__title span, .shelf150__title strong { color: var(--ink); font-weight: 700; }
.shelf150__axis { position: relative; height: 2.6rem; margin: 1rem 0.6rem 0; border-top: 1px solid rgb(43 26 25 / 0.3); }
.shelf150__box { position: absolute; left: 0; top: -4px; width: min(var(--box), 100%); height: 7px; border-radius: 999px; background: var(--red); transition: width 420ms var(--ease-out); }
.shelf150__tick { position: absolute; left: var(--at); top: 0; translate: -50% 0; padding-top: 0.55rem; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.shelf150__tick::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; height: 0.4rem; background: rgb(43 26 25 / 0.3); }
.shelf150__tick:last-child { color: var(--ink); font-weight: 750; }
.shelf150__note { min-height: 1.6em; font-size: var(--fs-small); color: var(--ink-soft); }
.boxcalc__out .actions { margin-top: 1.75rem; }
.boxcalc__small { margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--ink-soft); }
@media (max-width: 860px) {
  .boxcalc__inner { grid-template-columns: minmax(0, 1fr); }
  .boxcalc__inner > .boxcalc__out { padding-top: 0; }
  .boxcalc__toggle { width: 100%; justify-content: center; }
  .boxcalc__days { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 24rem; }
}
@media (prefers-reduced-motion: reduce) { .shelf150__box { transition: none; } }

/* ===== Planchas de Bizcocho: ready to cut =====
   A cutting plan on the real photo: the lines are drawn on a flat plane mapped onto the cake's top face
   (matrix3d from the four corners measured on the photo), with dimension lines like a technical sheet. */
.slab__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.slab__tool { display: grid; gap: clamp(2.25rem, 4vw, 3rem); }
.slab__stage { position: relative; aspect-ratio: 1000 / 496; margin-right: 1.75rem; }
.slab__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 420ms ease; }
.slab__photo--cut { opacity: 0; }
.slab__tool[data-kind="porcionada"] .slab__photo--whole { opacity: 0; }
.slab__tool[data-kind="porcionada"] .slab__photo--cut { opacity: 1; }
.slab__plane { position: absolute; left: 0; top: 0; width: 1000px; height: 740px; transform-origin: 0 0; transform: scale(0); pointer-events: none; transition: opacity 300ms ease; }
.slab__tool[data-kind="porcionada"] .slab__plane, .slab__tool[data-kind="porcionada"] .slab__dim { opacity: 0; }
.slab__lines { display: block; width: 100%; height: 100%; overflow: visible; }
.slab__lines .edge { fill: none; stroke: rgb(255 255 255 / 0.8); stroke-width: 4; stroke-dasharray: 14 14; }
.slab__lines .cut-shade { stroke: rgb(80 35 10 / 0.3); stroke-width: 15; stroke-linecap: round; }
.slab__lines .cut { stroke: #fff; stroke-width: 6.5; stroke-linecap: round; }
.slab__lines line { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .slab__lines line { animation: slab-draw 620ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
}
@keyframes slab-draw { from { stroke-dashoffset: var(--len); } }
/* dimension lines: under the front edge and down the right side, with the count of portions */
.slab__dim { position: absolute; display: grid; place-items: center; color: var(--ink-soft); transition: opacity 300ms ease; }
.slab__dim span { padding: 0.1rem 0.5rem; background: var(--paper); font-size: var(--fs-small); font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.slab__dim--x { left: 8.6%; right: 8.4%; top: calc(100% + 0.5rem); height: 1.5rem; }
.slab__dim--x::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid currentColor; }
.slab__dim--x::after { content: ""; position: absolute; inset: 0; border-inline: 1px solid currentColor; }
.slab__dim--y { top: 9%; bottom: 19.6%; left: calc(100% + 0.25rem); width: 1.5rem; }
.slab__dim--y::before { content: ""; position: absolute; inset: 0 auto 0 50%; border-left: 1px solid currentColor; }
.slab__dim--y::after { content: ""; position: absolute; inset: 0; border-block: 1px solid currentColor; }
.slab__dim--y span { position: relative; z-index: 1; padding: 0.3rem 0; }
.slab__dim--x span { position: relative; z-index: 1; }
.slab__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); align-items: end; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.slab__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.slab__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; padding: 0; font-size: var(--fs-small); font-weight: 650; }
.slab__kind { grid-template-columns: 0.7fr 0.7fr 1.6fr; margin-top: 0; }
.slab__r { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.slab__field--range { padding-bottom: 0.9rem; transition: opacity 240ms ease; }
.slab__tool[data-kind="porcionada"] .slab__field--range { opacity: 0.4; }
.slab__range { width: 100%; height: 2rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.slab__range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(var(--red), var(--red)) 0 / var(--fill, 20%) 100% no-repeat, var(--soft-200); }
.slab__range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--soft-200); }
.slab__range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--red); }
.slab__range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: calc(2px - 0.8rem); border: 4px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 4px 12px -4px rgb(120 20 18 / 0.6); transition: scale 160ms var(--ease-out); }
.slab__range::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border: 4px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 4px 12px -4px rgb(120 20 18 / 0.6); box-sizing: border-box; }
.slab__range:active::-webkit-slider-thumb { scale: 1.1; }
.slab__range:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.slab__range:disabled { cursor: not-allowed; }
.slab__readout { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.slab__readout strong { font-size: clamp(3.5rem, 2.25rem + 4vw, 6rem); font-weight: 800; font-stretch: 85%; line-height: 0.85; letter-spacing: -0.04em; color: var(--red); font-variant-numeric: tabular-nums; }
.slab__readout span { font-size: var(--fs-h4); font-weight: 700; }
.slab__cuts { grid-column: 1 / -1; margin-top: -0.5rem; font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 1100px) {
  .slab__panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .slab__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .slab__kind { grid-template-columns: 1fr 1fr; }
  .slab__kind label:last-of-type { grid-column: 1 / -1; }
}

/* ===== Legal pages (Oct 2026): long reading, calm. Title like a news post, an index that follows
   the reading on desktop, the four legal pages as pills (the chosen one with the red ring of the pickers) ===== */
.legal__head { padding-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }
.legal__title { max-width: 16ch; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5rem); font-weight: 800; font-stretch: 86%; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.legal__lead { max-width: 46ch; margin-top: 1.25rem; }
.legal__date { margin: 0.9rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.legal-nav { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.legal-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: var(--soft-100);
  color: var(--ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none; transition: background-color 160ms ease, box-shadow 160ms ease; }
.legal-nav a[aria-current] { background: var(--paper); box-shadow: inset 0 0 0 2px var(--red); }
@media (hover: hover) and (pointer: fine) { .legal-nav a:not([aria-current]):hover { background: var(--soft-200); } }
.legal-nav a:focus-visible, .legal__toc a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.legal-nav a:active { transform: scale(0.97); }

.legal__layout { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 44rem); justify-content: space-between; gap: clamp(2.5rem, 6vw, 6rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: var(--section); border-top: 1px solid var(--line); }
.legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
.legal__toc h2 { margin: 0 0 0.75rem; font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.legal__toc a { display: block; margin-left: -1px; padding: 0.45rem 0 0.45rem 1rem; border-left: 2px solid transparent; color: var(--ink-soft);
  font-size: var(--fs-small); line-height: 1.35; text-decoration: none; transition: color 160ms ease, border-color 160ms ease; }
.legal__toc a[aria-current] { color: var(--ink); font-weight: 650; border-left-color: var(--red); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--ink); } }

.legal__body section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal__body > section:first-child > h2, .legal__body > aside + section > h2 { margin-top: 0; }
.legal__body > aside + section { margin-top: 2.5rem; }
.legal__body h3 { margin: 1.75em 0 0; font-size: 1.2rem; font-weight: 750; line-height: 1.25; }
.legal__body h3 + p { margin-top: 0.5em; }
.legal__body ol { padding-left: 1.25em; }
.legal__body ol li::marker { color: var(--red); font-weight: 700; }
.legal__body a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal__body a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }

/* identity data and the first-layer summary: label over value, two columns where there is room */
.legal-facts, .legal-summary dl { display: grid; gap: 0; margin: 1.5em 0 0; }
.legal-facts div, .legal-summary dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.legal-facts div:last-child { border-bottom: 1px solid var(--line); }
.legal-facts dt, .legal-summary dt { font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); line-height: 1.6; }
.legal-facts dd, .legal-summary dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.legal-summary { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--soft-100); }
.legal-summary h2 { margin: 0 !important; font-size: var(--fs-h4) !important; }
.legal-summary dl { margin-top: 1rem; }
.legal-summary dl div { border-top-color: var(--soft-200); }
.legal-form { margin-top: 1.75em; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--soft-100); font-size: 1rem; }
.legal-form > * + * { margin-top: 0.9em; }
.legal-form ul { margin-top: 0.9em; padding-left: 1.1em; }
@media (max-width: 900px) {
  .legal__layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .legal__toc { position: static; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--soft-100); }
  .legal__toc ol { border-left: 0; columns: 2; column-gap: 1.25rem; }
  .legal__toc a { margin: 0; padding: 0.4rem 0; border: 0; }
}
@media (max-width: 560px) {
  .legal__toc ol { columns: 1; }
  .legal-facts div, .legal-summary dl div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}
@media print {
  .header, .footer, .legal-nav, .legal__toc, .skip-link { display: none !important; }
  .legal__layout { display: block; border: 0; padding: 0; }
}

/* the basic data-protection notice under each form (first layer, LOPDGDD art. 11) and the bots' honeypot */
.form__privacy { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-soft); }
.form__privacy a { color: var(--ink); font-weight: 600; text-underline-offset: 0.2em; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 404 */
.notfound__inner { display: grid; justify-items: start; gap: 1.25rem; min-height: 50vh; align-content: center; }
.notfound__code { margin: 0; font-size: clamp(5rem, 3rem + 10vw, 11rem); font-weight: 800; font-stretch: 86%; line-height: 0.85; letter-spacing: -0.04em; color: var(--red); }
.notfound .lead { max-width: 44ch; }
.notfound .actions { margin-top: 0.75rem; }

/* ===== Empresa, Oct 2026: «Compromiso con la calidad» on white. The macro photo cut to Dondulcín's silhouette
   over a red one that turns as it scrolls by; the four commitments joined by a red trace (from the team to the
   finished product) that draws itself with the scroll, each stop lighting its ring as the line reaches it ===== */
.quality { overflow-x: clip; }
.quality__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.quality__photo { position: relative; margin: 0; aspect-ratio: 299.2 / 307.9; }
.quality__photo img, .quality__blob { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask: url(../img/dondulcin-silueta.svg) center / contain no-repeat; mask: url(../img/dondulcin-silueta.svg) center / contain no-repeat; }
.quality__photo img { object-fit: cover; object-position: 50% 55%; }
.quality__blob { background: var(--red); transform: translate(5%, 4%) rotate(-9deg) scale(0.98); }
.quality__text .lead { margin-top: 1.25rem; max-width: 46ch; }
.trace { position: relative; margin: clamp(2rem, 3.5vw, 2.75rem) 0 0; padding: 0; list-style: none; }
.trace::before, .trace::after { content: ""; position: absolute; top: 1.6rem; bottom: 1.6rem; left: calc(1.6rem - 1px); width: 2px; border-radius: 2px; }
.trace::before { background: var(--line); }
.trace::after { background: var(--red); transform-origin: top; }
.trace li { position: relative; z-index: 1; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.trace li + li { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }
.trace__icon { width: 3.2rem; height: 3.2rem; padding: 0.8rem; border-radius: 50%; background: var(--paper); color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.trace h3 { padding-top: 0.2rem; font-size: var(--fs-h4); font-weight: 750; line-height: 1.25; }
.trace p { margin-top: 0.3rem; max-width: 44ch; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .quality__blob { animation: q-turn linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .trace::after { animation: q-draw linear both; animation-timeline: view(); animation-range: entry 70% cover 62%; }
    .trace__icon { animation: q-stop linear both; animation-timeline: view(); animation-range: entry 100% cover 45%; }
    @keyframes q-turn { from { transform: translate(7%, 7%) rotate(-16deg) scale(0.96); } to { transform: translate(3%, 1%) rotate(-3deg) scale(0.99); } }
    @keyframes q-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes q-stop { 0%, 70% { color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--soft-200); } 100% { color: var(--red); box-shadow: inset 0 0 0 2px var(--red); } }
  }
}
@media (max-width: 900px) {
  .quality__inner { grid-template-columns: minmax(0, 1fr); }
  .quality__photo { width: min(88%, 24rem); justify-self: center; order: 2; }
}

/* «Cuatro pilares»: on the red band, the mission held on the left while the four pillars pass on the right as
   large editorial rows (icon in a white disc, display title, the sentence under it), split by fine white rules */
.pillars-band__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.pillars-band__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.pillars-band__head .lead { max-width: 34ch; margin-top: 1.25rem; }
.pillar-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.28); }
.pillar-rows li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: clamp(1.1rem, 2.2vw, 1.75rem); align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid rgb(255 255 255 / 0.28); }
.pillar-rows__icon { width: 3.5rem; height: 3.5rem; padding: 0.85rem; border-radius: 50%; background: var(--paper); color: var(--red); }
.pillar-rows h3 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.9rem); font-weight: 800; font-stretch: 86%; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.pillar-rows p { margin-top: 0.7rem; max-width: 46ch; color: var(--on-red-soft); font-size: var(--fs-lead); line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pillar-rows li > * { animation: pillar-in linear both; animation-timeline: view(); animation-range: entry 15% entry 90%; }
    .pillar-rows li > div { animation-range: entry 25% entry 100%; }
    @keyframes pillar-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 900px) {
  .pillars-band__inner { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .pillars-band__head { position: static; }
}
@media (max-width: 560px) {
  .pillar-rows li { grid-template-columns: 2.9rem minmax(0, 1fr); }
  .pillar-rows__icon { width: 2.9rem; height: 2.9rem; padding: 0.7rem; }
}
.award-lead__photo { display: block; overflow: hidden; border-radius: var(--radius); }
.award-lead__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .award-lead__photo:hover img { transform: scale(1.03); } }

/* Sequillos hero, Oct 2026: what to do with the sequillo. A pill under it (it is also the keyboard way in) with
   the second gesture in small type; it fades as soon as the scroll starts. A press on the sequillo flies you through. */
.hole__hint { display: none; }
.hole.is-live .hole__hint { position: absolute; left: 72%; bottom: clamp(1.25rem, 4.5vh, 2.75rem); transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem; will-change: opacity; }
.hole__go { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0 1.15rem 0 0.55rem; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 650; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--red), 0 10px 24px -14px rgb(120 20 18 / 0.45); transition: transform 160ms var(--ease-out), background-color 160ms ease; }
/* the red disc stays put inside the ring; only the arrow in it nudges down, so it never touches the pill's edge */
.hole__go-dot { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--red); color: #fff; overflow: hidden; }
.hole__go-icon { width: 1rem; height: 1rem; }
.hole__go:active { transform: scale(0.97); }
.hole__go:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .hole__go:hover { background: #fff5f4; } }
.hole__hint-sub { font-size: var(--fs-xs); color: var(--ink-soft); }
.hole.is-live .hole__donut { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .hole__go-icon { animation: hole-nudge 2.4s var(--ease-in-out) 1.8s infinite; }
  @keyframes hole-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(2px); } }
  .hole.is-live .hole__hint { animation: seq-rise 800ms var(--ease-out) 900ms both; }
}
@media (hover: hover) and (pointer: fine) {
  .hole.is-live .hole__img { transition: scale 300ms var(--ease-out); }
  .hole.is-live .hole__donut:hover .hole__img { scale: 1.03; }
}
/* phones: the sequillo fills the space under the text, so the hint is the sentence only, over its foot */
@media (max-width: 860px) {
  .hole.is-live .hole__hint { left: 50%; bottom: 1rem; }
  .hole__hint-sub { display: none; }
  .hole__go { min-height: 44px; font-size: var(--fs-xs); }
}

/* ===== Spacing between sections (Oct 2026 review). Two white sections in a row each kept their full padding,
   so ~300px of blank white sat between them (product pages: sheet → Formatos → Otros productos; Empresa; news).
   When a white section follows another white one, it starts at under a third of the usual space (the one above keeps its full bottom). Sections that already
   start at 0 on purpose (box of 48, calculator, jobs card, closing cards) and the home page keep theirs. */
:is(.section, .seq-inside):not([class*="band--"]) + .section:not([class*="band--"]):not(.pro, .jobs, .closing-band, .format-close, .box48, .boxcalc, .glaze-ficha) {
  padding-top: calc(var(--section) * 0.3);
}
.archive + .closing-band, main > .post + .closing-band { padding-top: calc(var(--section) * 0.5); }

/* fact sheet foot: storage note on the left; «Ver formatos» and the shop on the right (Oct 2026) */
.ficha__foot { align-items: center; }
.ficha__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-left: auto; }
@media (max-width: 560px) {
  .ficha__acts { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* =====================================================================
   Tienda online (oct. 2026): catálogo, cesta lateral, pedido y gracias.
   Mismo lenguaje que las tarjetas de Formatos: foto sobre gris cálido en su cuadrado de 16 px, filete rojo,
   nombre en negrita; precio en display rojo. Cesta: panel lateral blanco que entra con la curva del cajón.
   ===================================================================== */

/* Cabecera: botón de la cesta, a la derecha del menú (en móvil, junto al botón del menú) */
.header__tools { display: flex; align-items: center; gap: 0.5rem; }
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: var(--soft-100); color: var(--ink); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cart-btn .icon { width: 24px; height: 24px; }
.cart-btn:active { transform: scale(0.94); }
.cart-btn__count {
  position: absolute; top: -2px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--paper);
  font-size: 0.8125rem; font-weight: 750; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums;
  transition: transform 200ms var(--ease-out), opacity 200ms ease;
}
.cart-btn.is-empty .cart-btn__count { transform: scale(0.6); opacity: 0; }
.cart-btn.is-bump .cart-btn__count { animation: cart-bump 420ms var(--ease-out); }
@keyframes cart-bump { 30% { transform: scale(1.35); } }
@media (hover: hover) and (pointer: fine) { .cart-btn:hover { background: var(--soft-200); } }
.nav .btn[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--red-700); }

/* ---------- Catálogo ---------- */
.shop-head { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.shop-head__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.shop-head__title { font-size: var(--fs-display); font-weight: 800; font-stretch: 85%; line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance; }
.shop-head__lead { margin-top: 1.25rem; max-width: 34ch; }
.shop-facts dt { display: inline-flex; align-items: center; gap: 0.4rem; }
.shop-facts dt .icon { width: 1.15em; height: 1.15em; color: var(--red); }
.shop-facts .shop-facts__sub { font-size: var(--fs-small); font-weight: 550; letter-spacing: 0; color: var(--ink-soft); }
.shop-head__media { aspect-ratio: 1 / 0.78; }
.shop-head__img { position: absolute; max-width: none; object-fit: contain; filter: drop-shadow(0 28px 30px rgb(120 20 18 / 0.2)); }
.shop-head__img--bag { width: 46%; height: 78%; left: 12%; top: 8%; transform: rotate(-6deg); }
.shop-head__img--minis { width: 54%; height: 52%; right: 6%; bottom: 6%; }
@media (prefers-reduced-motion: no-preference) {
  .shop-head__img--bag { animation: shop-in 900ms var(--ease-out) both; }
  .shop-head__img--minis { animation: shop-in 900ms 120ms var(--ease-out) both; }
  @keyframes shop-in { from { opacity: 0; translate: 0 22px; filter: blur(6px) drop-shadow(0 28px 30px rgb(120 20 18 / 0)); } }
}

.shop-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.shop-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px;
  background: var(--soft-100); font-weight: 650; text-decoration: none; transition: background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .shop-jump a:hover { background: var(--soft-200); } }

.shop__groups { display: grid; gap: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.shop-group { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.shop-group__head { display: grid; gap: 0.6rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.shop-group__title { font-size: var(--fs-h3); font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.05; }
.shop-group__head p { max-width: 62ch; color: var(--ink-soft); }
.shop-group__head .link-arrow { color: var(--ink); white-space: nowrap; }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; }

.sp { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; }
.sp__stage { position: relative; aspect-ratio: 1 / 0.86; border-radius: 16px; background: var(--soft-100); overflow: hidden; }
.sp__stage img { position: absolute; inset: 9%; width: 82%; height: 82%; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 20px rgb(120 70 20 / 0.18)); transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sp:hover .sp__stage img { transform: scale(1.04) rotate(-1.5deg); } }
.sp__out { display: none; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--soft-100); color: var(--ink-soft); font-size: 0.975rem; font-weight: 650; }
.sp.is-soldout .sp__ctrl > * { display: none; }
.sp.is-soldout .sp__ctrl > .sp__out { display: inline-flex; justify-content: center; }
.sp.is-soldout .sp__stage img { filter: grayscale(1); opacity: 0.45; }
.sp__name { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 2px solid var(--red); font-size: var(--fs-h4); font-weight: 750; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.sp__format { margin-top: 0.3rem; font-size: var(--fs-small); color: var(--ink-soft); }
.sp__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.sp__price { display: grid; gap: 0.15rem; }
.sp__price strong { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem); font-weight: 800; font-stretch: 86%; line-height: 0.95; letter-spacing: -0.03em; color: var(--red); font-variant-numeric: tabular-nums; }
.sp__unit { font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sp.is-soldout .sp__price strong { color: var(--ink-soft); }

/* «Añadir» y el contador ocupan el mismo hueco: al añadir, uno se funde en el otro */
.sp__ctrl { display: grid; flex: none; }
.sp__ctrl > * { grid-area: 1 / 1; justify-self: end; transition: opacity 180ms ease, transform 240ms var(--ease-out), filter 180ms ease; }
.sp__ctrl[data-state="add"] .sp__qty,
.sp__ctrl[data-state="qty"] .sp__add { opacity: 0; transform: scale(0.92); filter: blur(2px); pointer-events: none; visibility: hidden; transition: opacity 140ms ease, transform 200ms var(--ease-out), filter 140ms ease, visibility 0s 200ms; }
.sp__add .icon { width: 1.05em; height: 1.05em; }
@media (hover: hover) and (pointer: fine) { .sp__add:hover .icon { transform: rotate(90deg); } }

.qty { display: inline-flex; align-items: center; gap: 0.15rem; padding: 3px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--red); }
.qty__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; color: var(--red); cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.qty__btn .icon { width: 18px; height: 18px; }
.qty__btn:active { transform: scale(0.9); }
.qty__btn:disabled { color: var(--soft-200); cursor: not-allowed; }
.qty__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .qty__btn:not(:disabled):hover { background: #fdecea; } }
.qty__n { min-width: 2ch; font-weight: 750; font-size: 1.0625rem; text-align: center; font-variant-numeric: tabular-nums; }
.qty--sm .qty__btn { width: 34px; height: 34px; }
.qty--sm .qty__btn .icon { width: 16px; height: 16px; }

.shop-pro { padding-top: 0; }
.shop-pro__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--radius); background: var(--soft-100); }
.shop-pro__card p { margin-top: 0.6rem; max-width: 52ch; color: var(--ink-soft); }
.shop-pro__card .btn { background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .shop-pro__card .btn:hover { background: var(--red); color: #fff; } }

/* ---------- Cesta lateral ---------- */
.cart { position: fixed; inset: 0; z-index: calc(var(--z-menu) + 5); }
.cart__scrim { position: absolute; inset: 0; background: rgb(43 26 25 / 0.42); opacity: 0; transition: opacity 320ms ease; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 28rem); display: flex; flex-direction: column;
  background: var(--paper); box-shadow: -24px 0 60px -30px rgb(60 10 8 / 0.45);
  transform: translateX(104%); transition: transform 380ms var(--ease-drawer);
  padding-bottom: env(safe-area-inset-bottom);
}
.cart.is-open .cart__scrim { opacity: 1; }
.cart.is-open .cart__panel { transform: none; transition-duration: 460ms; }
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem 0.75rem 1.5rem; height: var(--header-h); border-bottom: 1px solid var(--line); }
.cart__title { font-size: 1.5rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; }
.cart__close { display: inline-flex; }
.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.5rem 1.5rem; }
.cart__ship { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.6rem; align-items: center; padding: 0.85rem 1rem; border-radius: 12px; background: var(--soft-100); font-size: var(--fs-small); }
.cart__ship .icon { width: 1.25rem; height: 1.25rem; color: var(--red); }
.meter { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--soft-200); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--red); transition: width 420ms var(--ease-out); }
.cart__lines { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.cl { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "img text total" "img qty qty"; gap: 0.35rem 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cl__img { grid-area: img; width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: var(--soft-100); padding: 5px; }
.cl__text { grid-area: text; display: grid; gap: 0.1rem; font-size: var(--fs-small); line-height: 1.3; }
.cl__text strong { font-size: 1rem; font-weight: 700; }
.cl__text span { color: var(--ink-soft); }
.cl__warn, .cl__text .cl__warn { color: var(--red-700); font-weight: 650; }
.cl__total { grid-area: total; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl .qty { grid-area: qty; justify-self: start; margin-top: 0.25rem; }
.cl.is-soldout .cl__img { filter: grayscale(1); opacity: 0.5; }
.cart__empty { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; color: var(--ink-soft); }
.cart__empty strong { display: block; color: var(--ink); font-size: 1.125rem; }
.cart__mascot { width: 6.5rem; }
.cart__foot { display: grid; gap: 0.9rem; padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--line); background: var(--paper); }
.cart__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 650; }
.cart__sum small { font-weight: 450; color: var(--ink-soft); font-size: var(--fs-xs); }
.cart__sum strong { font-size: 1.5rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cart__go { justify-content: center; }
.cart__go.is-disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 560px) {
  .cart__panel { width: 100%; }
  .cart__head { padding-left: var(--gutter); }
  .cart__body, .cart__foot { padding-inline: var(--gutter); }
}

/* Aviso «Añadido a la cesta» */
.cart-toast {
  position: fixed; z-index: calc(var(--z-menu) + 2); right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.75rem; width: min(calc(100% - 2 * var(--gutter)), 25rem); padding: 0.85rem 0.85rem 0.85rem 1.1rem;
  border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: 0 20px 40px -20px rgb(43 26 25 / 0.6);
  font-size: var(--fs-small); opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 220ms ease, transform 320ms var(--ease-out);
}
.cart-toast.is-in { opacity: 1; transform: none; }
.cart-toast > .icon { width: 1.35rem; height: 1.35rem; flex: none; color: #ff8f88; }
.cart-toast span { display: grid; gap: 0.1rem; flex: 1; min-width: 0; color: rgb(255 255 255 / 0.78); }
.cart-toast span strong { color: #fff; font-size: 1rem; }
.cart-toast__btn { flex: none; min-height: 40px; padding: 0.4rem 1rem; border: 0; border-radius: 999px; background: #fff; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; }
.cart-toast__btn:active { transform: scale(0.97); }
@media (max-width: 560px) { .cart-toast { left: var(--gutter); right: var(--gutter); width: auto; } }

/* ---------- Pedido ---------- */
.checkout { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 var(--section); background: var(--soft-100); --crumb-bg: var(--paper); }
.checkout__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); font-weight: 800; font-stretch: 86%; line-height: 0.95; letter-spacing: -0.03em; }
.checkout__noscript { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: #fdecea; color: var(--red-700); font-weight: 600; }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.checkout__form { gap: 0; padding: 0; overflow: hidden; }
.checkout__form .icon { flex: none; }
.co-step { display: grid; gap: 1.25rem; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.co-step[hidden] { display: none; }
.co-step__title { float: left; width: 100%; padding: 0; margin-bottom: 0.25rem; font-size: 1.375rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; }
.co-step__title + * { clear: both; }
.co-step--plain { gap: 1.25rem; }
.co-ship { grid-template-columns: 1fr 1fr; margin-top: 0; }
.co-ship label { justify-content: flex-start; gap: 0.85rem; min-height: 4.5rem; padding: 0.85rem 1.1rem; border-radius: var(--radius); text-align: left; }
.co-ship label .icon { width: 1.75rem; height: 1.75rem; color: var(--red); }
.co-ship label > span { display: grid; gap: 0.1rem; }
.co-ship label > span > span { font-weight: 500; font-size: var(--fs-small); color: var(--ink-soft); }
.co-pickup, .co-zone { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 12px; background: var(--soft-100); font-size: var(--fs-small); }
.co-pickup .icon, .co-zone .icon { width: 1.25rem; height: 1.25rem; color: var(--red); margin-top: 0.1rem; }
.form__row--cp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.field select {
  width: 100%; min-height: 52px; padding: 0.8rem 2.75rem 0.8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232b1a19'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.1rem;
  color: var(--ink); font: inherit; font-size: 1.0625rem; appearance: none; cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field select:hover { border-color: var(--soft-200); }
.field select:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgb(226 30 28 / 0.16); }
.co-toggle { color: var(--ink); font-size: 1rem; }
.co-toggle input { margin-top: 0.15rem; }
.co-invoice { display: grid; gap: 1.25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--soft-100); }
.co-invoice .field input { background: var(--paper); }
.co-pay { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: #fcfbfb; }
.co-pay .check { color: var(--ink); font-size: 1rem; }
.co-pay .form__status--err { display: none; }
.checkout__form[data-state="error"] .co-pay .form__status--err { display: flex; background: #fdecea; color: var(--red-700); }
.co-pay__btn { justify-content: center; min-height: 60px; font-size: 1.1875rem; }
.checkout__form[data-state="loading"] .co-pay__btn .icon { animation: none; }
.checkout__form[data-state="loading"] .co-pay__btn { opacity: 0.8; cursor: progress; }
.co-pay__note { font-size: var(--fs-xs); color: var(--ink-soft); text-align: center; }

.co-summary { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.co-summary__card { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius); background: var(--paper); box-shadow: 0 1px 0 rgb(120 20 18 / 0.06), 0 30px 60px -36px rgb(120 20 18 / 0.32); }
.co-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.co-summary__head h2 { font-size: 1.375rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.02em; }
.co-summary__edit, .co-free__btn { border: 0; padding: 0.35rem 0; background: none; font: inherit; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.25em; cursor: pointer; }
.co-lines { margin: 1rem 0 0; padding: 0; list-style: none; }
.co-line { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.co-line__img { position: relative; }
.co-line__img img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--soft-100); padding: 4px; }
.co-line__n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 750; line-height: 22px; text-align: center; }
.co-line__text { display: grid; gap: 0.1rem; font-size: var(--fs-small); line-height: 1.3; }
.co-line__text strong { font-size: 0.975rem; }
.co-line__text span { color: var(--ink-soft); }
.co-line__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-line.is-soldout img { filter: grayscale(1); opacity: 0.5; }
.co-lines--static .co-line { grid-template-columns: 1fr auto; }
.co-line--ship .co-line__text span { color: var(--ink); font-size: 0.975rem; }
.co-totals { display: grid; gap: 0.4rem; margin: 1rem 0 0; }
.co-totals div { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.co-totals dd { margin: 0; }
.co-totals .co-totals__total { margin-top: 0.4rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); color: var(--ink); align-items: baseline; }
.co-totals__total dt { font-weight: 750; }
.co-totals__total dt span { font-weight: 450; font-size: var(--fs-xs); color: var(--ink-soft); }
.co-totals__total dd { font-size: 1.75rem; font-weight: 800; font-stretch: 86%; letter-spacing: -0.025em; color: var(--red); }
.co-free { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--soft-100); font-size: var(--fs-small); }

.checkout__empty { display: grid; justify-items: center; gap: 1rem; max-width: 30rem; margin: clamp(2rem, 5vw, 4rem) auto 0; padding: clamp(2rem, 5vw, 3rem); border-radius: var(--radius); background: var(--paper); text-align: center; }
.checkout__empty p { color: var(--ink-soft); }
.checkout__mascot { width: 7rem; }

@media (max-width: 960px) {
  .checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 560px) {
  .co-ship { grid-template-columns: 1fr; }
  .co-ship label { border-radius: var(--radius); }
  .form__row--cp { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Gracias / pago no completado ---------- */
.done { background: var(--soft-100); }
.done__wrap { display: grid; justify-items: start; gap: 1.25rem; max-width: 44rem; }
.done__state { display: grid; justify-items: start; gap: 1.25rem; width: 100%; }
.done__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); font-weight: 800; font-stretch: 86%; line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.done__mascot { width: 6.5rem; }
.done__card { width: 100%; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius); background: var(--paper); box-shadow: 0 1px 0 rgb(120 20 18 / 0.06), 0 30px 60px -36px rgb(120 20 18 / 0.32); }
.done__next-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.done__card > p { margin-top: 0.4rem; color: var(--ink-soft); }
.done__loading { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 650; color: var(--ink-soft); }
.done__loading .icon { width: 1.4rem; height: 1.4rem; color: var(--red); animation: spin 800ms linear infinite; }
.done__help { color: var(--ink-soft); }
.done__help a, .done .lead a { color: var(--ink); font-weight: 650; }
.done .form__status { display: flex; background: #fdecea; color: var(--red-700); }
.done .form__status[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .done__loading .icon { animation: none; } }

@media (max-width: 860px) {
  .shop-head__grid { grid-template-columns: minmax(0, 1fr); }
  .shop-head__media { width: min(100%, 24rem); justify-self: center; }
}
@media (max-width: 560px) {
  .shop-head__media { display: none; }
  .shop-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .shop-jump::-webkit-scrollbar { display: none; }
  .shop-jump a { flex: none; }
  .shop-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 0.9rem; }
  .sp__buy { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .sp__ctrl > * { justify-self: stretch; }
  .sp__add { justify-content: center; }
  .sp__qty { justify-content: space-between; }
  .sp__name { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cart__panel, .cart__scrim, .cart-toast, .sp__ctrl > * { transition: none; }
}
.nav { margin-left: auto; }
/* the tools stay on desktop even with an empty cart: the language selector lives there */

/* Tienda con Redsys en modo de pruebas: franja bajo la cabecera, solo en /tienda/ */
.test-strip { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem var(--gutter); background: #fff3d6; color: #6b4300; font-size: var(--fs-small); text-align: center; }
.test-strip .icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------------- Selector de idioma (cabecera) y lista de idiomas del menú móvil ----------------
   The site's own grammar: a white floating panel (16px, warm shadow) like the «¿Hablamos?» card, ink type in the
   display face, and the one decorative shape, Dondulcín's silhouette, in warm grey behind each code. Red appears
   once: the current language wears the logo's Dondulcín (red, white face, winking); hovering a language tints its
   silhouette red and straightens it. Each language is written in its own language, with a small greeting below. */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 48px; padding: 0 0.7rem 0 0.8rem;
  border: 0; border-radius: 999px; background: var(--soft-100); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 800; font-stretch: 90%; letter-spacing: 0.01em;
  transition: transform 160ms var(--ease-out), background-color 200ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lang__btn .icon { width: 20px; height: 20px; transition: rotate 500ms var(--ease-out); }
.lang__caret { width: 12px; height: 12px; opacity: 0.55; transition: rotate 220ms var(--ease-out); }
.lang__btn:active { transform: scale(0.96); }
.lang__btn[aria-expanded="true"] { background: var(--soft-200); }
.lang__btn[aria-expanded="true"] .lang__caret { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) {
  .lang__btn:hover { background: var(--soft-200); }
  .lang__btn:hover .icon, .lang__btn[aria-expanded="true"] .icon { rotate: -25deg; }
}

.lang__list {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: calc(var(--z-header) + 1);
  width: max-content; min-width: 13rem; margin: 0; padding: 0.3rem; list-style: none;
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgb(43 26 25 / 0.06), 0 4px 10px -2px rgb(43 26 25 / 0.08), 0 24px 48px -18px rgb(43 26 25 / 0.3);
  transform-origin: calc(100% - 2.5rem) 0;
  transition: opacity 180ms ease, transform 240ms var(--ease-out);
}
.lang__list[hidden] {
  display: block; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;
  transition: opacity 120ms ease, transform 140ms ease, visibility 0s 140ms;
}
.lang__list li { transition: opacity 220ms ease calc(40ms + var(--i) * 26ms), translate 320ms var(--ease-out) calc(40ms + var(--i) * 26ms); }
.lang__list[hidden] li { opacity: 0; translate: 0 5px; transition: none; }
.lang__list li + li::before { content: ""; display: block; height: 1px; margin: 0 0.65rem; background: var(--line); }
.lang__list a {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem;
  border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color 160ms ease;
}
.lang__badge { position: relative; display: grid; place-items: center; flex: none; width: 1.95rem; aspect-ratio: 299.2 / 307.9; transition: rotate 320ms var(--ease-out), scale 320ms var(--ease-out); }
.lang__blob { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--soft-100); stroke: transparent; stroke-width: 2px; vector-effect: non-scaling-stroke; transition: fill 200ms ease, stroke 200ms ease; }
.lang__blob path { vector-effect: non-scaling-stroke; }
.lang__code { position: relative; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 800; font-stretch: 90%; letter-spacing: 0.03em; translate: 0 0.04em; transition: color 200ms ease; }
.lang__list li:nth-child(odd) .lang__badge { rotate: -7deg; }
.lang__list li:nth-child(even) .lang__badge { rotate: 6deg; }
.lang__name { font-size: 1.0625rem; font-weight: 800; font-stretch: 88%; line-height: 1.1; letter-spacing: -0.02em; }
/* the greeting: a quiet aside on the right, lighter than the name */
.lang__hello { margin-left: auto; padding-left: 1rem; color: #9b8986; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
/* the current language: the logo's Dondulcín (red, white face, winking) and its name in red */
.lang__badge .lang__mascot { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgb(120 20 18 / 0.22)); }
.lang__list a[aria-current="true"] .lang__name { color: var(--red); }
.lang__list a:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .lang__list a:hover { background: var(--soft-100); }
  .lang__list a:not([aria-current="true"]):hover .lang__blob { fill: var(--soft-200); }
  .lang__list a:hover .lang__badge { rotate: 0deg; scale: 1.06; }
  .lang__list a[aria-current="true"]:hover .lang__badge { animation: lang-wink 600ms var(--ease-out); }
}
@keyframes lang-wink { 40% { rotate: 10deg; scale: 1.1; } }
@media (max-width: 520px) {
  .lang__btn { padding: 0 0.6rem 0 0.7rem; }
  .lang__btn .icon { width: 18px; height: 18px; }
  .lang__list { right: -56px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang__list, .lang__list[hidden], .lang__list li { transform: none; translate: none; transition-duration: 0s; }
  .lang__btn .icon, .lang__badge { transition: none; animation: none; }
}

.menu__langs ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.menu__langs a {
  display: inline-flex; align-items: center; height: 42px; padding: 0 1rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.12); color: #fff; text-decoration: none;
  font-size: 1.0625rem; font-weight: 750; font-stretch: 90%; letter-spacing: -0.01em;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.menu__langs a:active { transform: scale(0.96); }
.menu__langs a .lang__code { display: none; }
.menu__langs a[aria-current="true"] { background: #fff; color: var(--red); }
/* translated legal pages: the Spanish text is the one that counts */
.legal__note { max-width: 62ch; margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--soft-100); font-size: var(--fs-small); color: var(--ink-soft); }
.legal__note a { color: var(--ink); font-weight: 650; }

/* translated pages: long compounds (German above all) hyphenate by language instead of pushing the layout sideways;
   anywhere, a word longer than its column breaks rather than overflowing */
body { overflow-wrap: break-word; }
html:not([lang="es"]) body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
html:not([lang="es"]) :is(.btn, button, .nav__link, .lang__list, .chip, .menu__list) { hyphens: manual; -webkit-hyphens: manual; }
/* a button never wider than its column: a label that does not fit (translations) wraps onto two balanced lines; one that fits stays on one */
.btn { max-width: 100%; white-space: normal; text-wrap: balance; text-align: center; }
.btn .icon { flex: none; }

/* «¿otra mini?» is hand-drawn in Spanish: in the other languages the same words, translated, in the display face,
   tilted like the drawing (the drawn one stays for Spanish) */
.picker__lettering--text, .tray__more-txt { display: none; }
html:not([lang="es"]) img.picker__lettering { display: none; }
html:not([lang="es"]) .picker__lettering--text {
  display: block; height: auto; max-width: 11ch; margin: 0; color: #fff; text-align: center;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem); font-weight: 800; font-stretch: 88%; line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance;
}
html:not([lang="es"]) .tray__more-art { -webkit-mask: none; mask: none; background: none; width: max-content; max-width: 11.5rem; aspect-ratio: auto; }
html:not([lang="es"]) .tray__more-txt {
  display: block; color: var(--red); text-align: center; font-family: var(--font); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem);
  font-weight: 800; font-stretch: 88%; line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance;
}
@media (max-width: 860px) { html:not([lang="es"]) .picker__lettering--text { width: auto; max-width: 9rem; font-size: clamp(1.75rem, 1rem + 3vw, 2.4rem); } }
/* Bizcochos Individuales: its hero (the box of 60) is not a .section, so «Sabores» kept a full top padding;
   it now starts as close as the other product pages' first section does */
.togo + .section { padding-top: calc(var(--section) * 0.45); }