/* Sazón V80 Organic — storefront (index.html + support.html, compiled React bundle in /_next/).
   The bundle's markup is fixed (hydration), so this layer restyles its semantic classes. It is loaded
   after /_next/static/css and site-fixes.css; the legacy file carries many !important rules from
   V44–V78, so the few declarations that must beat one of those are marked !important here too.
   Business content (menu, prices, portions, plans) still comes from the bundle and Supabase. */

body.antialiased {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}
body.antialiased h1, body.antialiased h2, body.antialiased h3 {
  font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.01em;
}
body.antialiased em { font-style: normal; }
body.antialiased :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
body.antialiased ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
body.antialiased main { position: relative; }

/* Soft floating shapes behind the page (pseudo-elements: no DOM for React to reconcile). */
body.antialiased main::before, body.antialiased main::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  border-radius: var(--radius-blob); animation: o-float 14s ease-in-out infinite;
}
body.antialiased main::before { top: 40px; right: -120px; width: 420px; height: 420px; background: var(--color-accent-200); opacity: .7; }
body.antialiased main::after { top: 560px; left: -140px; width: 320px; height: 320px; background: var(--color-accent-2-200); opacity: .8; animation-duration: 17s; }
body.antialiased main > * { position: relative; z-index: 1; }

/* ── announcement + header ────────────────────────────────────────────── */
.announcement {
  background: var(--color-accent-2-800) !important; color: var(--color-accent-2-100) !important;
  font: 500 13px/1.3 var(--font-body); letter-spacing: .04em; padding: 9px 20px;
}
.announcement svg { fill: currentColor; }
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: auto !important; min-height: 76px; gap: 20px;
  padding: 14px clamp(16px, 5vw, 64px) !important;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent) !important;
  border-bottom: 0 !important; box-shadow: none !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.site-header .brand, footer .brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--color-text); }
body.antialiased .site-header .brand .brand-mark, body.antialiased footer .brand .brand-mark { display: none !important; }
.site-header .brand-name, footer .brand-name { font: 400 30px/1 var(--font-heading) !important; color: var(--color-text) !important; }
.brand-dot { color: var(--color-accent) !important; }
.site-header .brand-caption, footer .brand-caption {
  margin: 0 !important; font: 700 11px/1 var(--font-body) !important; letter-spacing: .14em !important; color: var(--color-accent-2-700) !important;
}
.main-nav { gap: 6px !important; }
.main-nav a {
  padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--color-text) !important; font: 600 15px/1.2 var(--font-body) !important; text-decoration: none;
  transition: background-color .2s;
}
.main-nav a::after { display: none !important; }
.main-nav a:hover { background: var(--color-accent-100); }
.nav-actions { gap: 8px !important; }
.account-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--color-surface) !important; color: var(--color-text) !important;
  font: 700 15px/1.2 var(--font-body) !important; text-decoration: none;
  transition: background-color .2s;
}
.account-link:hover { background: var(--color-accent-2-200) !important; }
.bag-button {
  display: inline-flex !important; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--color-accent) !important; color: var(--color-bg) !important;
  font: 700 15px/1.2 var(--font-body) !important; cursor: pointer;
  transition: background-color .2s, transform .3s var(--ease-bounce);
}
.bag-button:hover { background: var(--color-accent-600) !important; transform: rotate(-3deg) scale(1.04); }
.bag-button > span:last-child {
  min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-accent-800);
  font-size: 13px; font-weight: 800; position: static !important;
}
.mobile-toggle { border-radius: 50% !important; background: var(--color-surface) !important; color: var(--color-text) !important; }

/* ── hero: cream ground, big Caprasimo headline, rotating plate ───────── */
.hero {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important;
  align-items: center; gap: clamp(32px, 5vw, 72px) !important;
  min-height: 0 !important; max-height: none !important; max-width: 1320px; margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 64px) clamp(60px, 7vw, 100px) !important;
  background: transparent !important; overflow: visible !important;
}
.hero-copy {
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
  padding: 0 !important; background: transparent !important; color: var(--color-text) !important;
  animation: o-rise .9s var(--ease-soft) both;
}
.hero-copy .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--color-accent-2-100); color: var(--color-accent-2-800) !important;
  font: 800 12px/1.2 var(--font-body) !important; letter-spacing: .08em;
}
.hero-copy .eyebrow > span { display: none; }
.hero h1 {
  margin: 0 !important; color: var(--color-text) !important;
  font: 400 clamp(48px, 7vw, 92px)/.98 var(--font-heading) !important; letter-spacing: -.01em !important;
}
.hero h1 em { color: var(--color-accent) !important; font-style: normal; }
.hero-copy > p { margin: 0; max-width: 34ch; color: var(--color-text) !important; font-size: 19px !important; line-height: 1.5; }
.hero-copy > .button.primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--color-accent) !important; color: var(--color-bg) !important; box-shadow: none !important;
  font: 400 17px/1.2 var(--font-heading) !important; text-decoration: none;
  transition: background-color .2s, transform .3s var(--ease-bounce) !important;
}
.hero-copy > .button.primary:hover { background: var(--color-accent-600) !important; transform: translateY(-2px) scale(1.02) !important; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px !important; color: var(--color-accent-2-800) !important; }
.hero-notes span { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--font-body) !important; }
.hero-notes svg { color: var(--color-accent-2-700) !important; }

.hero-image {
  position: relative !important; justify-self: center;
  width: min(100%, 540px); height: auto !important; aspect-ratio: 1 / 1 !important;
  min-height: 0 !important; max-height: none !important;
  background: transparent !important; overflow: visible !important;
  animation: o-rise 1s .14s var(--ease-soft) both;
}
.hero-image::before {
  content: ""; position: absolute; inset: -6%; z-index: 0;
  background: var(--color-accent-2-300); border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  animation: o-float 14s ease-in-out infinite;
}
.hero-image picture {
  position: absolute !important; inset: 7%; z-index: 1; display: block !important;
  border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-surface);
}
.hero-image picture img {
  position: absolute !important; inset: -22%; width: 144% !important; height: 144% !important; max-width: none;
  aspect-ratio: auto !important; object-fit: cover; object-position: 52% 50%;
  animation: o-spin 80s linear infinite;
}
.hero-stamp {
  position: absolute !important; z-index: 3; right: 2% !important; top: 4% !important; left: auto !important; bottom: auto !important;
  width: 124px !important; height: 124px !important; padding: 10px; gap: 4px !important;
  border: 0 !important; outline: 0 !important; border-radius: 50% !important;
  background: var(--color-accent) !important; color: var(--color-bg) !important; box-shadow: var(--shadow-md) !important;
  font: 800 10px/1.2 var(--font-body) !important; letter-spacing: 2px !important; text-align: center;
  animation: o-bob 3.2s ease-in-out infinite;
}
.hero-stamp svg { color: var(--color-bg) !important; fill: var(--color-bg); width: 26px !important; height: 26px !important; }
.hero-stamp span { font: 400 13px/1.1 var(--font-heading) !important; letter-spacing: 0 !important; color: var(--color-bg); }
.hero-caption { display: none !important; }
.hero-image .o-store-orbit { z-index: 2; }

/* Values bar → tilted olive band (Caprasimo). */
.values-bar {
  position: relative; z-index: 2;
  display: flex !important; justify-content: center !important; flex-wrap: wrap; gap: 14px 48px !important;
  margin: 0 -20px; padding: 20px 5% !important; overflow: hidden !important;
  background: var(--color-accent-2-700) !important; color: var(--color-accent-2-100) !important;
  border: 0 !important; transform: rotate(-1.2deg);
}
.values-bar > span {
  display: inline-flex !important; align-items: center; gap: 12px;
  font: 400 clamp(18px, 2.2vw, 26px)/1.2 var(--font-heading) !important; color: var(--color-accent-2-100) !important; white-space: nowrap;
}
.values-bar svg { color: var(--color-accent-300) !important; width: 24px !important; height: 24px !important; stroke-width: 2.4px !important; }

/* ── section headings ─────────────────────────────────────────────────── */
.section { padding-left: clamp(20px, 5vw, 64px) !important; padding-right: clamp(20px, 5vw, 64px) !important; }
.menu-section { padding-top: clamp(72px, 9vw, 128px) !important; }
.section-heading, .how-section > .eyebrow, .how-section > h2 { text-align: left !important; }
.eyebrow { font: 800 13px/1.2 var(--font-body) !important; letter-spacing: .14em !important; color: var(--color-accent-700) !important; }
.section-heading h2, .how-section > h2 {
  font: 400 clamp(40px, 5.5vw, 68px)/1 var(--font-heading) !important; color: var(--color-text) !important; margin: 12px 0 !important;
}
.section-heading p { font-size: 18px !important; max-width: 44ch; color: var(--color-text) !important; }

/* Radix tab lists (menu filter, portion picker, plan type) as pill segmented controls. */
[data-slot="tabs-list"] {
  height: auto !important; gap: 4px; padding: 4px !important;
  border-radius: var(--radius-pill) !important; background: var(--color-surface) !important;
}
[data-slot="tabs-trigger"] {
  min-height: 40px; padding: 9px 18px !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  color: var(--color-text) !important; font: 700 14px/1.2 var(--font-body) !important; letter-spacing: .02em;
  transition: background-color .3s var(--ease-bounce), color .2s, box-shadow .2s !important;
}
[data-slot="tabs-trigger"]:hover { background: color-mix(in srgb, var(--color-bg) 70%, transparent) !important; }
[data-slot="tabs-trigger"][data-state="active"] { background: var(--color-bg) !important; box-shadow: var(--shadow-sm) !important; }
.filter-tabs [data-slot="tabs-trigger"][data-state="active"] { background: var(--color-accent-2-800) !important; color: var(--color-accent-2-100) !important; }

/* ── meal cards: round dish, surface card ─────────────────────────────── */
.meal-grid { gap: 20px !important; }
.meal-card {
  display: flex; flex-direction: column;
  background: var(--color-surface) !important; border: 0 !important; border-radius: var(--radius-lg) !important;
  box-shadow: none !important; overflow: visible !important; padding: 18px 18px 20px;
  transition: transform .35s var(--ease-bounce), box-shadow .35s !important;
}
.meal-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-md) !important; }
.meal-card .photo-button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.meal-card .meal-photo {
  width: min(100%, 220px); margin: 4px auto 0; aspect-ratio: 1 !important;
  border-radius: 50% !important; box-shadow: var(--shadow-md);
  background-size: 570% auto !important;
  transition: transform .9s var(--ease-soft);
}
.meal-card:hover .meal-photo { transform: rotate(-14deg) scale(1.03); }
.meal-card .meal-day {
  position: absolute; left: 0; bottom: 6%; top: auto !important;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-accent-2-800) !important; color: var(--color-accent-2-100) !important;
  font: 800 12px/1 var(--font-body) !important; letter-spacing: .12em; box-shadow: var(--shadow-md);
}
.meal-card .photo-detail { display: none; }
.meal-content { padding: 16px 4px 0 !important; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.meal-type {
  align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--color-accent-100); color: var(--color-accent-800) !important;
  font: 800 11px/1.3 var(--font-body) !important; letter-spacing: .06em !important;
}
.meal-title {
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 clamp(22px, 2.2vw, 27px)/1.08 var(--font-heading) !important; color: var(--color-text) !important;
}
.meal-content > p { font-size: 15px !important; line-height: 1.5; color: var(--color-text) !important; margin: 0; }
.meal-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; border: 0 !important; }
.meal-bottom strong { font: 400 28px/1 var(--font-heading) !important; color: var(--color-text) !important; }
.meal-bottom small { color: var(--color-accent-2-800) !important; font-size: 13px !important; }
.add-button, .meal-card .add-button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 20px !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--color-accent) !important; color: var(--color-bg) !important;
  font: 400 15px/1.2 var(--font-heading) !important; cursor: pointer;
  transition: background-color .2s, transform .3s var(--ease-bounce) !important;
}
.add-button:hover, .meal-card .add-button:hover { background: var(--color-accent-600) !important; transform: scale(1.05); }
.add-button:active { transform: scale(.95); }
.menu-footnote { font-size: 14px !important; color: var(--color-text) !important; }

/* ── plans: rounded olive band + cream card ───────────────────────────── */
#plans.plan-section, .plan-section {
  position: relative; overflow: hidden;
  margin: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 40px) !important;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px) !important;
  border-radius: 48px !important; background: var(--color-accent-2-800) !important; background-image: none !important; color: var(--color-accent-2-100) !important;
  gap: 48px !important;
}
.plan-section::before {
  content: ""; position: absolute; right: -80px; bottom: -120px; width: 340px; height: 340px;
  border-radius: 50%; background: var(--color-accent-2-700); pointer-events: none;
  animation: o-float 16s ease-in-out infinite;
}
.plan-section > * { position: relative; }
.plan-section .eyebrow { color: var(--color-accent-300) !important; }
.plan-section h2 { font: 400 clamp(38px, 5vw, 62px)/1.02 var(--font-heading) !important; color: var(--color-bg) !important; }
.plan-section h2 em { color: var(--color-accent-300) !important; }
.plan-section > div > p { color: var(--color-accent-2-100) !important; font-size: 18px !important; }
.plan-perks span { color: var(--color-accent-2-100) !important; font-weight: 600; }
.plan-perks svg { color: var(--color-accent-300) !important; }
.plan-card {
  background: var(--color-bg) !important; color: var(--color-text) !important;
  border: 0 !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important;
  padding: clamp(28px, 4vw, 44px) !important;
}
.plan-card .eyebrow { color: var(--color-accent-700) !important; }
.plan-card h3 { font: 400 40px/1 var(--font-heading) !important; color: var(--color-text) !important; }
.plan-price { font: 800 26px/1.2 var(--font-body) !important; color: var(--color-text) !important; }
.plan-card p { color: var(--color-text) !important; }
.plan-card .button, .plan-card a.button.primary {
  border-radius: var(--radius-pill) !important; background: var(--color-accent) !important; color: var(--color-bg) !important;
  font: 400 16px/1.2 var(--font-heading) !important; border: 0 !important;
}

/* ── how it works: bobbing numbered circles ───────────────────────────── */
.how-section { padding-top: clamp(72px, 9vw, 128px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; }
.steps { gap: 40px !important; }
.step { background: transparent !important; border: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.how-section .step-top { border: 0 !important; padding: 0 !important; }
.how-section .step-top svg { display: none; }
.how-section .step-top span {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  font: 400 36px/1 var(--font-heading) !important; animation: o-bob 2.8s ease-in-out infinite;
}
.how-section .step:nth-child(1) .step-top span { background: var(--color-accent); color: var(--color-bg) !important; }
.how-section .step:nth-child(2) .step-top span { background: var(--color-accent-2-500); color: var(--color-bg) !important; animation-delay: -.4s; }
.how-section .step:nth-child(3) .step-top span { background: var(--color-accent-200); color: var(--color-accent-900) !important; animation-delay: -.8s; }
.step h3 { font: 400 28px/1.1 var(--font-heading) !important; color: var(--color-text) !important; margin: 0 !important; }
.step p { font-size: 17px !important; line-height: 1.5; max-width: 30ch; color: var(--color-text) !important; }

/* ── delivery strip: pill-shaped surface ──────────────────────────────── */
.delivery-strip {
  display: flex !important; gap: 24px; align-items: center; flex-wrap: wrap;
  margin: 0 clamp(12px, 3vw, 40px) 64px !important; padding: 32px clamp(24px, 4vw, 48px) !important;
  border: 0 !important; border-radius: 999px !important; background: var(--color-surface) !important; color: var(--color-text) !important;
}
.delivery-strip::before {
  content: ""; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23f5ead8' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 28px no-repeat;
  animation: o-bob 3s ease-in-out infinite;
}
.delivery-strip > div { flex: 1 1 300px; }
.delivery-strip h3 { font: 400 28px/1.1 var(--font-heading) !important; color: var(--color-text) !important; margin: 0 0 4px !important; }
.delivery-strip p { margin: 0 !important; color: var(--color-text) !important; }
.button.outline, .text-link {
  border-radius: var(--radius-pill) !important; border: 1px solid var(--color-divider) !important;
  background: transparent !important; color: var(--color-text) !important;
  padding: 10px 22px !important; font: 400 15px/1.2 var(--font-heading) !important; text-decoration: none;
}
.button.outline:hover, .text-link:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; }

/* ── footer, dock, language switch ────────────────────────────────────── */
body.antialiased > footer {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 40px clamp(20px, 5vw, 64px) 56px !important;
  background: transparent !important; color: var(--color-text) !important; border: 0 !important;
}
body.antialiased > footer .brand-name { font-size: 34px !important; }
body.antialiased > footer p { margin: 0; color: var(--color-text) !important; }
body.antialiased > footer div { display: flex; flex-wrap: wrap; gap: 20px; }
body.antialiased > footer div a { color: var(--color-accent-700) !important; font-weight: 600; font-size: 14px; }
body.antialiased > footer small { width: 100%; color: var(--color-neutral-700) !important; }
.mobile-dock { background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important; border-top: 0 !important; box-shadow: var(--shadow-lg); }
.mobile-dock a, .mobile-dock button { color: var(--color-text) !important; font-weight: 700; }
.mobile-dock button { color: var(--color-accent-700) !important; }
.language-switch {
  gap: 2px !important; padding: 3px !important; border: 0 !important;
  background: var(--color-surface) !important; box-shadow: var(--shadow-md) !important;
}
/* EN/ES pill: sits in the sticky header band, in a slot reserved to the right of the header actions.
   The bundle toggles .is-scrolled once the announcement bar has scrolled away. */
body.antialiased > .language-switch {
  position: fixed !important; z-index: 70; bottom: auto !important; left: auto !important;
  top: calc(34px + (79px - 36px) / 2) !important; right: clamp(16px, 5vw, 64px) !important;
}
body.antialiased > .language-switch.is-scrolled { top: calc((79px - 36px) / 2) !important; }
body.antialiased .site-header .nav-actions { margin-right: 108px; }
.site-header .language-switch { position: static !important; box-shadow: none !important; }
.language-switch > span { display: none; }
.language-switch button {
  padding: 6px 12px !important; border-radius: var(--radius-pill); color: var(--color-text) !important;
  font: 800 12px/1.2 var(--font-body) !important;
}
.language-switch button.active { background: var(--color-bg) !important; box-shadow: var(--shadow-sm); }

/* ── support page (same bundle) ───────────────────────────────────────── */
.support-page h1 { font: 400 clamp(44px, 6vw, 76px)/1 var(--font-heading) !important; color: var(--color-text) !important; }
.support-page h1 em { color: var(--color-accent) !important; }
.support-page .button.primary {
  border-radius: var(--radius-pill) !important; background: var(--color-accent) !important; color: var(--color-bg) !important;
  font: 400 16px/1.2 var(--font-heading) !important; border: 0 !important;
}
.support-grid section { background: var(--color-surface) !important; border: 0 !important; border-radius: var(--radius-lg) !important; }
.support-grid svg { color: var(--color-accent) !important; }
.support-page .panel { background: var(--color-neutral-100) !important; border: 0 !important; border-radius: var(--radius-xl) !important; }
.support-page details { border-color: var(--color-divider) !important; }
.support-page summary { font-weight: 700; cursor: pointer; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .site-header { min-height: 64px; padding: 10px 16px !important; }
  .site-header .brand-name { font-size: 26px !important; }
  .site-header .brand-caption { display: none !important; }
  .hero { padding-top: 28px !important; }
  .hero-image { width: min(88%, 420px); }
  .hero-stamp { width: 96px !important; height: 96px !important; font-size: 8px !important; }
  .plan-section { border-radius: 36px !important; }
  .delivery-strip { border-radius: var(--radius-xl) !important; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(42px, 13vw, 56px) !important; }
  .hero-image { width: min(74%, 340px); margin: 18px auto 8px; }
  .hero-image .o-orbit__pill { padding: 6px 12px; font-size: 12px; }
  .values-bar { gap: 8px 22px !important; }
  .values-bar > span { font-size: 17px !important; }
  .meal-card .meal-photo { width: min(78%, 200px); }
}
@media (max-width: 860px) {
  body.antialiased .site-header .nav-actions { margin-right: 0; }
  body.antialiased > .language-switch, body.antialiased > .language-switch.is-scrolled {
    top: auto !important; right: auto !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.antialiased main::before, body.antialiased main::after, .hero-image::before, .hero-image picture img,
  .hero-stamp, .how-section .step-top span, .delivery-strip::before, .plan-section::before,
  .hero-copy, .hero-image { animation: none !important; }
}

/* ── V80.1 — delivery strip: one pin, readable day cards, rounded (not pill) when content is tall ── */
.delivery-strip {
  border-radius: var(--radius-xl) !important; background: var(--color-surface) !important;
  color: var(--color-text) !important; box-shadow: none !important;
}
.delivery-strip::before { display: none; }
.delivery-strip > svg {
  flex: none; width: 64px !important; height: 64px !important; padding: 16px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-bg) !important; animation: o-bob 3s ease-in-out infinite;
}
.delivery-strip h3, .delivery-strip p { color: var(--color-text) !important; }
.delivery-day {
  background: var(--color-neutral-100) !important; border: 0 !important; border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
}
.delivery-day b { color: var(--color-text) !important; font-size: 15px !important; }
.delivery-day span { color: var(--color-accent-700) !important; font-weight: 600; }
.delivery-strip .button, .delivery-strip a.button {
  background: var(--color-accent) !important; color: var(--color-bg) !important; border-color: transparent !important;
  border-radius: var(--radius-pill) !important; box-shadow: none !important;
}
.delivery-strip .button:hover { background: var(--color-accent-600) !important; }

/* ── V80.1 — weekly plans block injected into #plans by store-enhancements.js ── */
#plans .sz-v66-weekly { padding: 8px 0 0 !important; background: transparent !important; }
#plans .sz-v66-weekly-head .kicker { color: var(--color-accent-300) !important; font: 800 13px/1.2 var(--font-body) !important; letter-spacing: .14em; }
#plans .sz-v66-weekly-head h3 {
  font: 400 clamp(40px, 5.5vw, 68px)/1 var(--font-heading) !important; letter-spacing: -.01em !important;
  color: var(--color-bg) !important;
}
#plans .sz-v66-weekly-head h3 em { color: var(--color-accent-300) !important; font-style: normal; font-weight: 400 !important; }
#plans .sz-v66-weekly-head p { color: var(--color-accent-2-100) !important; }
#plans .sz-v66-plan {
  background: var(--color-bg) !important; color: var(--color-text) !important; border: 0 !important;
  border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important;
  transition: transform .35s var(--ease-bounce);
}
#plans .sz-v66-plan:hover { transform: translateY(-4px); }
#plans .sz-v66-plan h4 { font: 400 28px/1.1 var(--font-heading) !important; color: var(--color-text) !important; }
#plans .sz-v66-plan .price { font: 400 44px/1 var(--font-heading) !important; letter-spacing: 0 !important; color: var(--color-text) !important; }
#plans .sz-v66-plan .price small { font: 700 15px/1.2 var(--font-body) !important; color: var(--color-neutral-700) !important; }
#plans .sz-v66-save {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--color-accent-100) !important; color: var(--color-accent-800) !important; font-size: 12px; font-weight: 800;
}
#plans .sz-v66-plan li:before { color: var(--color-accent) !important; }
#plans .sz-v66-plan .button {
  border-radius: var(--radius-pill) !important; background: var(--color-accent) !important; color: var(--color-bg) !important;
  font: 400 16px/1.2 var(--font-heading) !important; border: 0 !important;
}
#plans .sz-v66-plan .button:hover { background: var(--color-accent-600) !important; }
#plans .sz-v74-weekly-art, #plans .sz-v74-weekly-art img { border-radius: var(--radius-xl) !important; }

/* ── V80.2 — mobile width, top notice, floating stack, touch targets ── */
/* The tilted values band (negative margins + rotation) and the orbit pills must never widen the
   page: clip horizontal overflow at the root so the layout viewport stays at the device width. */
html, body.antialiased { overflow-x: clip; }
@media (max-width: 860px) {
  .values-bar { margin: 0 !important; transform: none; }
  .announcement {
    display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 2px 10px; padding: 7px 14px !important; font-size: 12px !important; line-height: 1.35; text-align: center;
  }
  .announcement > svg { display: none; }
  .announcement .sazon-cutoff-chip { flex: 0 1 auto; white-space: nowrap; }
  /* Floating stack on phones: dock (68px) at the bottom; the language pill and WhatsApp sit above it,
     the install banner sits above the dock instead of on top of the other buttons. */
  .mobile-dock { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100vw; }
  .mobile-dock a span, .mobile-dock button span { font-size: 11px !important; }
  .sazon-pwa { left: 10px !important; right: 10px !important; width: auto !important; max-width: calc(100vw - 20px) !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; border-radius: var(--radius-lg) !important; }
  body.antialiased > .language-switch button { min-height: 36px; min-width: 40px; }
}

/* ── V80.3 — legal & help pages (generated by tools/legal/build.js) ── */
.content-page { max-width: 820px !important; margin: 0 auto !important; padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 32px) 48px !important; }
.content-page h1 { font: 400 clamp(38px, 6vw, 60px)/1.02 var(--font-heading) !important; color: var(--color-text) !important; margin: 10px 0 14px !important; }
.content-page .lead { font-size: 18px !important; line-height: 1.55; color: var(--color-text) !important; max-width: 60ch; }
.content-section {
  margin: 18px 0 0; padding: clamp(18px, 3vw, 26px);
  background: var(--color-neutral-100); border-radius: var(--radius-lg);
}
.content-section h2 { font: 400 clamp(22px, 3vw, 28px)/1.15 var(--font-heading) !important; color: var(--color-text) !important; margin: 0 0 10px !important; }
.content-section p, .content-section li { font-size: 16px; line-height: 1.65; color: var(--color-text); }
.content-section p + p { margin-top: 10px; }
.content-section ul, .content-section ol { margin: 6px 0 0; padding-left: 22px; }
.content-section li + li { margin-top: 6px; }
.content-page a:not(.button) { color: var(--color-accent-700); text-underline-offset: 3px; }
.content-faq {
  margin: 12px 0 0; padding: 0 clamp(18px, 3vw, 24px);
  background: var(--color-neutral-100); border-radius: var(--radius-lg);
}
.content-faq summary {
  cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative;
  font: 700 17px/1.35 var(--font-body); color: var(--color-text);
}
.content-faq summary::-webkit-details-marker { display: none; }
.content-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font: 400 26px/1 var(--font-heading); color: var(--color-accent); transition: transform .25s var(--ease-soft);
}
.content-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.content-faq p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--color-text); }
.content-updated { margin-top: 22px; font-size: 13px; color: var(--color-neutral-700); }
.content-crosslinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.content-crosslinks--legal { margin-top: 10px; }
.content-crosslinks a {
  padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-text) !important; font: 700 13px/1.2 var(--font-body); text-decoration: none;
}
.content-crosslinks a:hover { background: var(--color-accent-100); }
.content-crosslinks a[aria-current="page"] { background: var(--color-accent-2-800); color: var(--color-accent-2-100) !important; }
.content-footer { padding: 32px clamp(18px, 5vw, 64px) 48px !important; background: transparent !important; }
.content-footer small { color: var(--color-neutral-700) !important; }

/* ── V80.4 — floating stack on phones: WhatsApp and the install hint never cover the hero ── */
@media (max-width: 860px) {
  .sazon-wa {
    left: auto !important; right: 14px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: 50px !important; height: 50px !important; box-shadow: var(--shadow-md) !important;
  }
  body:has(.sazon-pwa) .sazon-wa { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; }
  body.antialiased:has(.sazon-pwa) > .language-switch, body.antialiased:has(.sazon-pwa) > .language-switch.is-scrolled { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; }
  .sazon-pwa { padding: 10px 14px !important; font-size: 13px !important; line-height: 1.35; }
  .sazon-profile-banner { font-size: 13px !important; padding: 10px 16px !important; }
}

/* ── V80.5 — on short phones the hero heading/copy reaches down to where the
   WhatsApp FAB and language pill are pinned. Rather than chase a fixed
   offset (copy length varies by language), keep them hidden while the hero
   is still in view and fade them in once it has scrolled past — flagged via
   html.sz-hero-passed, set by the IntersectionObserver in
   store-enhancements.js (the class lives on <html>, not <body>: see that
   file for why). ── */
@media (max-width: 860px) {
  html:not(.sz-hero-passed) .sazon-wa {
    opacity: 0;
    pointer-events: none;
  }
  html.sz-hero-passed .sazon-wa {
    opacity: 1;
  }
  .sazon-wa { transition: opacity .25s ease; }
}

/* ── V80.6 — storefront design pass ───────────────────────────────────────
   Found in a desktop + mobile audit of the home page. Every rule here fixes
   something that was measurably wrong, not just a taste change. */
:root { --sz-gutter: clamp(20px, 5vw, 64px); }

/* 1. One content column. The plans band and the delivery strip took side
      margins but were capped by the bundle's max-width, so they hugged the
      left edge (38px left vs 142px right at 1280px) instead of lining up
      with the menu and the hero. */
#plans.plan-section, .plan-section, .delivery-strip {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--sz-gutter)) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
#plans.plan-section, .plan-section { margin-top: clamp(24px, 4vw, 48px) !important; margin-bottom: clamp(24px, 4vw, 48px) !important; }
.delivery-strip { margin-top: 0 !important; margin-bottom: 64px !important; }

/* 2. Hero: at 1280×800 the 90px headline broke into 5 lines and pushed the
      only call to action ("Arma tu caja") below the fold. The "Hecho en casa"
      stamp sat on the orbit path, so the ingredient pills slid under it
      (it was already hidden on phones for the same reason). */
.hero-stamp { display: none !important; }
@media (min-width: 861px) {
  .hero { padding-top: clamp(32px, 4.5vw, 64px) !important; align-items: center !important; }
  .hero h1 { font-size: clamp(48px, 5.4vw, 78px) !important; }
}

/* 3. Category cards: 3 fixed columns left the 4th card alone on a second row.
      On phones they stacked into ~300px of tall cards before the first dish —
      a swipeable row keeps them one tap away without the scroll. */
.sazon-menu-family-tabs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
@media (max-width: 760px) {
  .sazon-menu-family-tabs {
    display: flex !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    width: auto !important; margin-left: calc(-1 * var(--sz-gutter)) !important; margin-right: calc(-1 * var(--sz-gutter)) !important;
    padding: 2px var(--sz-gutter) 8px; scroll-padding: 0 var(--sz-gutter); scrollbar-width: none;
  }
  .sazon-menu-family-tabs::-webkit-scrollbar { display: none; }
  .sazon-family-card { flex: 0 0 auto; max-width: 78%; scroll-snap-align: start; padding: 12px 16px !important; }
}

/* 4. Portion picker. v67 hid every tablist in the menu toolbar to drop the old
      category tabs, and took the Small/Medium picker with it: customers could
      not change size from the grid, every price showed the Small price, and
      the label "Elige tu porción" was left floating on its own. */
#menu .menu-toolbar .portion-picker { display: inline-flex !important; align-items: center; gap: 12px; }
#menu .menu-toolbar .portion-picker [role="tablist"] { display: inline-flex !important; }
#menu .menu-toolbar .portion-picker > span { font: 700 14px/1.2 var(--font-body) !important; color: var(--color-text) !important; }
/* Compact segmented control, not the 76px card style v66 gave every menu tab. */
#menu .menu-toolbar .portion-picker [role="tablist"] {
  gap: 4px; padding: 4px !important; border-radius: var(--radius-pill) !important;
  background: var(--color-surface) !important; box-shadow: none !important;
}
#menu .menu-toolbar .portion-picker [role="tab"] {
  min-height: 40px !important; padding: 8px 18px !important; border: 0 !important;
  border-radius: var(--radius-pill) !important; background: transparent !important; box-shadow: none !important;
  font: 700 14px/1.2 var(--font-body) !important; color: var(--color-text) !important; transform: none !important;
}
#menu .menu-toolbar .portion-picker [role="tab"][data-state="active"],
#menu .menu-toolbar .portion-picker [role="tab"][aria-selected="true"] {
  background: var(--color-accent-2-800) !important; color: var(--color-accent-2-100) !important;
}

/* 5. Single-size dishes (e.g. Fit = Medium only) show their own price — see
      fixSingleSizePrice() in store-enhancements.js. */
.meal-card[data-sz-fixed-size] .meal-bottom > div:not(.sz-price-fixed) { display: none !important; }
.sz-price-fixed { display: grid; gap: 4px; }
.sazon-portion-rule {
  align-self: flex-start; margin: 2px 0 4px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-accent-2-100); color: var(--color-accent-2-800);
  font: 800 11px/1.3 var(--font-body); letter-spacing: .04em;
}

/* 6. Phones: WhatsApp and the EN/ES pill were both pinned at left:12px /
      bottom:160px, one on top of the other, covering card text. The V80.4
      "move WhatsApp right" rule never applied: the button carries data-v58,
      and the older `.sazon-wa[data-v58]` rule out-ranked it. WhatsApp now sits
      bottom-right above the dock; the language pill moves up into the header
      row, where every other storefront puts it. */
@media (max-width: 860px) {
  .sazon-wa, .sazon-wa[data-v58] {
    left: auto !important; right: 14px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(.sazon-pwa) .sazon-wa, body:has(.sazon-pwa) .sazon-wa[data-v58] {
    bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.antialiased > .language-switch, body.antialiased > .language-switch.is-scrolled,
  body.antialiased:has(.sazon-pwa) > .language-switch, body.antialiased:has(.sazon-pwa) > .language-switch.is-scrolled {
    position: absolute !important; z-index: 120 !important;
    top: calc(var(--sz-ann-h, 34px) + 11px) !important; right: 16px !important;
    bottom: auto !important; left: auto !important; box-shadow: none !important;
  }
}

/* 7. Values band on phones: cream text on a 72%-cream pill (~1.1:1 contrast,
      unreadable), stacked 4 high with 88px of padding left over from the old
      floating buttons. Two columns, no pills, readable. */
@media (max-width: 700px) {
  .values-bar {
    display: grid !important; grid-template-columns: 1fr 1fr; justify-items: start;
    gap: 12px 16px !important; padding: 18px 20px !important;
    background: var(--color-accent-2-700) !important;
  }
  .values-bar > span {
    background: transparent !important; border: 0 !important; padding: 0 !important;
    white-space: normal !important; font-size: 15px !important; line-height: 1.2; gap: 8px !important;
    color: var(--color-accent-2-100) !important;
  }
  .values-bar svg { width: 18px !important; height: 18px !important; flex: none; }
}

/* 8. Hero on phones: headline and the call to action first, the dish after —
      the CTA used to sit a full screen and a half below the top. */
@media (max-width: 860px) {
  .hero-copy { order: 1; }
  .hero-image { order: 2; }
}

/* V89: rotating last line of the home headline (assets/js/hero-words.js). The bundle's h1 stays for
   screen readers; the aria-hidden copy takes its exact look. */
.hero h1.sz-h1-src {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: -1px !important;
}
.hero .sz-h1 {
  margin: 0; color: var(--color-text);
  font: 400 clamp(48px, 7vw, 92px)/.98 var(--font-heading); letter-spacing: -.01em;
}
.hero .sz-h1 em { color: var(--color-accent); font-style: normal; }
.hero .sz-words { display: grid; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero .sz-words > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(100%);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .6s cubic-bezier(.4, 0, .2, 1);
}
.hero .sz-words > span.is-on { opacity: 1; transform: none; }
.hero .sz-words > span.is-out { transform: translateY(-100%); }
/* Phrases waiting their turn go back below without crossing the line. */
.hero .sz-words > span:not(.is-on):not(.is-out) { transition: none; }
@media (max-width: 520px) { .hero .sz-h1 { font-size: clamp(42px, 13vw, 56px); } }
@media (min-width: 861px) { .hero .sz-h1 { font-size: clamp(48px, 5.4vw, 78px); } }
@media (prefers-reduced-motion: reduce) { .hero .sz-words > span { transition: none; } }

/* Audit A-18 / A-45: one primary button everywhere — white on Brasa #a9552a (5.22:1, was cream on #c67139 = 3.03:1),
   Figtree 700 (Caprasimo stays for headings; at 15px it read poorly on buttons). */
html body .hero-copy > .button.primary,
html body a.button.primary,
html body button.button.primary,
html body .plan-card .button,
html body #plans .plan-card .button,
html body #plans.plan-section .plan-card .button,
html body .meal-card .add-button {
  background: var(--color-cta-bg) !important;
  border-color: var(--color-cta-bg) !important;
  color: var(--color-cta-fg) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
html body .hero-copy > .button.primary:hover,
html body a.button.primary:hover,
html body button.button.primary:hover,
html body .plan-card .button:hover,
html body #plans .plan-card .button:hover,
html body .meal-card .add-button:hover {
  background: var(--color-cta-bg-hover) !important;
  border-color: var(--color-cta-bg-hover) !important;
}
html body .meal-card.is-soldout .add-button { background: var(--color-neutral-400) !important; border-color: var(--color-neutral-400) !important; }

/* Audit A-50 / A-51 / A-47: small text and links that missed WCAG AA (measured in the browser), and the inner-page
   header that ran past the screen edge at 390px. */
html body #plans .sz-v66-plan .button {
  background: var(--color-cta-bg) !important; color: var(--color-cta-fg) !important;
  font: 700 16px/1.2 var(--font-body) !important;
}
html body #plans .sz-v66-plan .button:hover { background: var(--color-cta-bg-hover) !important; }
html body .sz-v66-plan .compare { color: var(--color-text-secondary) !important; }
html body .sazon-family-card small { color: var(--color-text-secondary) !important; }
html body .menu-section .section-heading .eyebrow, html body .section-heading .eyebrow, html body .content-page .eyebrow { color: var(--color-link) !important; }
html body .main-nav a { color: var(--color-link) !important; }
html body .how-section .step:nth-child(2) .step-top > span { background: var(--color-accent-2-800) !important; color: var(--color-neutral-100) !important; }
html body .support-page > p, html body .support-page .support-grid p, html body .support-page details p { color: var(--color-text-green) !important; }
html body[data-page] .content-page p a:not(.button):not(.brand):not(.text-link), html body .content-faq p a { color: var(--color-link) !important; }
html body .sazon-allergy-global a { color: var(--color-link) !important; }
html body .delivery-strip a.button.outline { background: var(--color-cta-bg) !important; border-color: var(--color-cta-bg) !important; color: var(--color-cta-fg) !important; font: 700 16px/1.2 var(--font-body) !important; }
html body[data-page] .content-crosslinks a:not(.button):not(.brand):not(.text-link) { color: var(--color-link) !important; }
html body[data-page] .content-crosslinks a[aria-current="page"]:not(.button):not(.brand):not(.text-link) { color: var(--color-neutral-100) !important; }
@media (max-width: 520px) {
  html body .sazon-support-header { padding-left: 16px !important; padding-right: 16px !important; gap: 8px; }
  html body .sazon-support-header .brand-caption { display: none !important; }
  html body .sazon-support-header .nav-actions { gap: 8px !important; min-width: 0; }
  html body .sazon-support-header .account-link { font-size: 13px !important; white-space: nowrap; }
}
/* Audit A-48: the Ayuda cards had no inner padding on desktop. */
@media (min-width: 761px) { html body .support-page .support-grid > section { padding: 24px 28px !important; } }
/* Audit A-77: the active order-type toggle uses the brand green, not black. */
html body .sazon-plan-switch button.is-on { background: var(--color-accent-2-800) !important; color: var(--color-neutral-100) !important; border-color: var(--color-accent-2-800) !important; }
/* Audit A-74: small tap targets (language switch, help link, cart steppers) reach 44px. */
html body .language-switch button { min-height: 44px; min-width: 44px; }
html body .sazon-sum-line [data-act] { min-width: 44px; min-height: 44px; }
html body[data-page] .content-footer-links a:not(.button):not(.brand):not(.text-link) { color: var(--color-link) !important; }
@media (max-width: 520px) {
  html body .site-header .language-switch button { min-width: 32px; padding: 0 6px; }
}
@media (max-width: 520px) {
  html body#top .site-header.sazon-support-header { display: flex !important; justify-content: space-between !important; align-items: center; gap: 8px !important; padding-left: 16px !important; padding-right: 16px !important; }
  html body#top .site-header.sazon-support-header .brand { margin: 0 !important; padding: 0 !important; flex: none; }
  html body#top .site-header.sazon-support-header .account-link { padding: 0 10px !important; min-width: 0; }
  html body#top .site-header.sazon-support-header .nav-actions { flex: none; margin: 0 !important; }
}