/* Sazón V80 Organic — portal screens: login, Mi cuenta (account) and reparto.
   Loaded after the legacy portal-v2.css; selectors are scoped to body.o-page so they win without !important.
   Markup contracts (ids, data-* hooks, classes rendered by portal-v2.js) are unchanged. */

body.o-page[data-page="login"],
body.o-page[data-page="account"],
body.o-page[data-page="reparto"] { background: var(--color-bg); position: relative; overflow-x: hidden; }

/* ── shared top bar ───────────────────────────────────────────────────── */
.o-page .o-topbar {
  position: sticky; top: 0; z-index: 30;
  height: auto; min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border: 0; box-shadow: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.o-page .o-topbar .brand { font-size: 28px; }
.o-page .o-topbar .top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.o-page .o-topbar .btn.secondary:not(.icon-btn) { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.o-page .o-topbar .btn.icon-btn:disabled { opacity: 1; cursor: progress; }
.o-page .o-topbar .btn.icon-btn:disabled svg { animation: o-spin .9s linear infinite; }
.o-page .o-topbar .top-logout svg { margin-right: 2px; }

/* ── LOGIN ────────────────────────────────────────────────────────────── */
.o-page .login.o-login {
  position: relative; min-height: 100vh; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  place-items: stretch; background: var(--color-bg); overflow: hidden;
}
.o-login__scene {
  position: relative; z-index: 1; margin: 16px; min-height: 520px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 4vw, 48px); overflow: hidden;
  border-radius: 40px; background: var(--color-accent-2-800); color: var(--color-accent-2-100);
}
.o-page .o-login__brand { position: relative; font-size: 32px; color: var(--color-bg); }
.o-page .o-login__brand:hover { color: var(--color-bg); }
.o-page .o-login__brand .brand-dot { color: var(--color-accent-300); }
.o-login__plate { position: relative; align-self: center; width: min(78%, 380px); margin: 32px 0; }
.o-login__plate .o-plate__photo { inset: 0; }
.o-login__tagline {
  position: relative; margin: 0; max-width: 16ch;
  font: 400 clamp(26px, 3vw, 36px)/1.1 var(--font-heading); color: var(--color-bg);
}
.o-page .login-card.o-login__panel {
  position: relative; z-index: 1; width: auto; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.o-login__bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 32px; }
.o-page .o-login .lang { float: none; }
.o-login__body { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 440px; }
.o-page .o-login__body h1 { margin: 0; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--color-text); }
.o-login__body > p { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.o-page .o-login .notice { margin: 0; border-radius: 20px; }
.o-page .login-card .o-login__form { display: grid; gap: 14px; margin: 0; }
.o-page .login-card .o-login__form .field input { min-height: 50px; border-radius: var(--radius-pill); }
.o-page .o-login__submit { min-height: 54px; font-size: 17px; margin-top: 4px; }
.o-page .login-card input.o-otp { font: 800 28px/1 var(--font-body); letter-spacing: .5em; text-align: center; padding-left: calc(16px + .5em); }
.o-otp-dots { display: flex; gap: 10px; justify-content: center; }
.o-otp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); transition: background-color .2s; }
.o-otp-dot.is-on { background: var(--color-accent); }
.o-otp-dot.is-pop { animation: o-pop .32s var(--ease-bounce); }
.o-login__row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.o-login__secure { font-size: 12px; color: var(--color-accent-2-800); }

@media (max-width: 860px) {
  .o-login__scene { min-height: 0; padding: 22px 24px 26px; border-radius: 32px; }
  .o-login__plate { width: min(56%, 240px); margin: 18px 0 14px; }
  .o-login__tagline { font-size: 24px; }
  .o-page .login-card.o-login__panel { padding: 8px 20px 48px; }
  .o-login__bar { margin-bottom: 18px; }
}

/* ── MI CUENTA ────────────────────────────────────────────────────────── */
.o-page .member.o-member {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 48px) 88px;
}
.o-page .o-member h1, .o-page .o-member h2, .o-page .o-member h3 { color: var(--color-text); }
.o-page .o-member .sz-eyebrow, .o-page .o-member .sz-kicker, .o-page .o-member .section-label {
  font: 800 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700);
}

/* Tabs: pill track with an olive active pill. */
.o-page .member-nav {
  display: flex; gap: 4px; width: 100%; min-width: 0; overflow-x: auto;
  padding: 5px; margin: 0 0 32px; border: 0;
  border-radius: var(--radius-pill); background: var(--color-surface);
  scrollbar-width: none;
}
.o-page .member-nav::-webkit-scrollbar { display: none; }
.o-page .member-nav .sz-tab, .o-page .member-nav button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text); box-shadow: none;
  font: 700 15px/1.2 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background-color .35s var(--ease-bounce), color .25s, box-shadow .25s;
}
.o-page .member-nav .sz-tab:hover, .o-page .member-nav button:hover { background: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.o-page .member-nav .sz-tab.active, .o-page .member-nav button.active {
  background: var(--color-accent-2-800); color: var(--color-accent-2-100); box-shadow: var(--shadow-sm);
}
.o-page .member-nav .sz-tab i { background: var(--color-accent); color: var(--color-bg); font-style: normal; }
.o-page .member-nav .sz-tab.active i { background: var(--color-accent-300); color: var(--color-accent-900); }

/* Greeting: big, flush-left. */
.o-page .sz-page-head { text-align: left; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.o-page .sz-page-head h1 { font: 400 clamp(40px, 5vw, 60px)/1 var(--font-heading); margin: 0; }
.o-page .sz-page-head .sz-lead { margin: 0; font-size: 17px; color: var(--color-text); }
.o-page .sz-welcome h1, .o-page .sz-dash-hero h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1; margin: 0; }
.o-page .sz-welcome .sz-sub, .o-page .sz-dash-hero .sz-sub { font-size: 17px; }
.o-page .sz-dash-hero { background: transparent; color: var(--color-text); padding: 0; border: 0; box-shadow: none; }

/* Next-delivery hero: terracotta card with a floating disc. */
.o-page .sz-hero {
  position: relative; overflow: hidden;
  background: var(--color-accent); color: var(--color-bg);
  border: 0; border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 36px);
  box-shadow: none;
}
.o-page .sz-hero::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px;
  border-radius: 50%; background: var(--color-accent-600); pointer-events: none;
  animation: o-float 17s ease-in-out infinite;
}
.o-page .sz-hero > * { position: relative; }
.o-page .sz-hero .sz-eyebrow { color: var(--color-bg); }
.o-page .sz-hero h2 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.02; color: var(--color-bg); }
.o-page .sz-hero-meta, .o-page .sz-hero-meta b { color: var(--color-bg); }
.o-page .sz-hero .badge, .o-page .sz-hero .badge.ok { background: var(--color-bg); color: var(--color-accent-800); }
.o-page .sz-hero-side { background: color-mix(in srgb, var(--color-bg) 16%, transparent); border: 0; border-radius: var(--radius-lg); color: var(--color-bg); }
.o-page .sz-hero-num span, .o-page .sz-hero-num small { color: var(--color-bg); }
.o-page .sz-hero .sz-track li i { border: 4px solid var(--color-accent); background: var(--color-accent-400); }
.o-page .sz-hero .sz-track li::before { background: var(--color-accent-400); height: 4px; border-radius: 999px; }
.o-page .sz-hero .sz-track li.done i, .o-page .sz-hero .sz-track li.now i { background: var(--color-bg); }
.o-page .sz-hero .sz-track li.done::before, .o-page .sz-hero .sz-track li.now::before { background: var(--color-bg); }
.o-page .sz-hero .sz-track li.now i { animation: o-pulse 2.2s ease-in-out infinite; }
.o-page .sz-hero .sz-track li span { color: var(--color-bg); font-weight: 700; }
.o-page .sz-hero-empty { background: var(--color-accent); color: var(--color-bg); }
.o-page .sz-hero-empty h2 { color: var(--color-bg); }
.o-page .sz-hero-empty p { color: var(--color-bg); opacity: .92; }
.o-page .sz-hero .btn:not(.secondary), .o-page .sz-hero .sz-dash-cta {
  background: var(--color-bg); color: var(--color-accent-800); border-color: transparent;
}
.o-page .sz-hero .btn:not(.secondary):hover, .o-page .sz-hero .sz-dash-cta:hover { background: var(--color-neutral-100); color: var(--color-accent-900); }
.o-page .sz-hero .btn.secondary { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.o-page .sz-hero .btn.secondary:hover { background: color-mix(in srgb, var(--color-bg) 16%, transparent); color: var(--color-bg); }

/* Weekly card + current plan: olive. */
.o-page .sz-weekly-card, .o-page .sz-plan-now {
  background: var(--color-accent-2-800); color: var(--color-accent-2-100);
  border: 0; border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 32px); box-shadow: none;
}
.o-page .sz-weekly-card h3, .o-page .sz-weekly-price b, .o-page .sz-plan-now b { color: var(--color-bg); }
.o-page .sz-weekly-card .sz-eyebrow { color: var(--color-accent-300); }
.o-page .sz-weekly-card p:not(.sz-eyebrow), .o-page .sz-weekly-price small, .o-page .sz-plan-now small { color: var(--color-accent-2-100); }
.o-page .sz-weekly-card .btn.secondary {
  color: var(--color-accent-2-100); border-color: color-mix(in srgb, var(--color-accent-2-100) 40%, transparent);
}
.o-page .sz-weekly-card .btn.secondary:hover { background: color-mix(in srgb, var(--color-accent-2-100) 14%, transparent); }

/* Subscription tab: sand container, cream plan options, Caprasimo prices. */
.o-page .sz-plan-card {
  background: var(--color-surface); color: var(--color-text);
  border: 0; border-radius: var(--radius-xl); box-shadow: none;
}
.o-page .sz-plan-head h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1; margin: 0 0 6px; color: var(--color-text); }
.o-page .sz-plan-lead { color: var(--color-neutral-700); font-size: 15px; }
.o-page .sz-plan-choice-grid { gap: 16px; }
.o-page .sz-plan-choice {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  background: var(--color-neutral-100); color: var(--color-text);
  border: 0; border-radius: var(--radius-lg); padding: 22px; box-shadow: none;
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.o-page .sz-plan-choice:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.o-page .sz-plan-choice > small:first-child { font: 800 12px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); }
.o-page .sz-plan-choice strong { font: 400 34px/1.05 var(--font-heading); color: var(--color-text); }
.o-page .sz-plan-choice s { color: var(--color-neutral-600); }
.o-page .sz-plan-choice .save { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 700; font-size: 13px; }
.o-page .sz-plan-choice .btn { width: 100%; margin-top: 6px; }
.o-page .sz-plan-state { background: var(--color-accent-2-100); color: var(--color-accent-2-900); border: 0; border-radius: var(--radius-md); }
.o-page .sz-plan-flow { gap: 8px; }
.o-page .sz-plan-flow span {
  border: 0; border-radius: var(--radius-pill); background: var(--color-neutral-100); color: var(--color-text);
  font-weight: 700; font-size: 13px;
}
.o-page .sz-plan-howto { background: var(--color-neutral-100); border: 0; border-radius: var(--radius-lg); }
.o-page .sz-plan-note { background: var(--color-bg); border-radius: var(--radius-md); }

/* Subscription banner. */
.o-page .sz-sub-banner { background: var(--color-accent-2-800); color: var(--color-accent-2-100); border: 0; border-radius: var(--radius-xl); }
.o-page .sz-sub-banner.is-paused { background: var(--color-accent-700); }
.o-page .sz-sub-banner.is-done { background: var(--color-accent-2-700); }
.o-page .sz-sub-banner-text h3, .o-page .sz-sub-banner-text b { color: var(--color-bg); }
.o-page .sz-sub-banner-text .sz-eyebrow { color: var(--color-accent-300); }
.o-page .sz-sub-banner-actions .btn.secondary { color: var(--color-accent-2-100); border-color: color-mix(in srgb, var(--color-accent-2-100) 40%, transparent); background: transparent; }

/* Quick actions + stats. */
.o-page .sz-quick { gap: 14px; }
.o-page .sz-action {
  background: var(--color-surface); color: var(--color-text);
  border: 0; border-radius: var(--radius-lg); padding: 20px; box-shadow: none;
  transition: background-color .2s, transform .25s var(--ease-bounce);
}
.o-page .sz-action:hover { background: var(--color-accent-100); transform: translateY(-3px); }
.o-page .sz-action b { font: 700 16px/1.25 var(--font-body); }
.o-page .sz-stats, .o-page .sz-dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px;
  margin: 20px 0; padding: 0; background: transparent; border: 0; box-shadow: none;
}
.o-page .sz-stat, .o-page .sz-stats div {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  border: 0; border-radius: var(--radius-lg); background: var(--color-surface); padding: 18px 20px;
  transition: transform .3s var(--ease-bounce);
}
.o-page .sz-stat:hover { transform: translateY(-3px); }
.o-page .sz-stat span, .o-page .sz-stats span { font: 400 36px/1.1 var(--font-heading); }
.o-page .sz-stat small, .o-page .sz-stats small { font: 800 11px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.o-page .sz-stat.c1 { background: var(--color-accent); color: var(--color-bg); }
.o-page .sz-stat.c2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.o-page .sz-stat.c3 { background: var(--color-accent-200); color: var(--color-accent-900); }
.o-page .sz-stat.c4 { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.o-page .sz-stat.c1 small, .o-page .sz-stat.c2 small { color: inherit; opacity: .85; }
.o-page .sz-dash-cta { border-radius: var(--radius-pill); }

/* Blocks, meals, chips. */
.o-page .sz-block { background: transparent; border: 0; padding: 0; }
.o-page .sz-block-head h3 { font-size: 32px; }
.o-page .sz-meals { gap: 16px; }
.o-page .sz-meal {
  background: var(--color-surface); border: 0; border-radius: var(--radius-lg);
  padding: 16px; box-shadow: none; overflow: visible;
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.o-page .sz-meal:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.o-page .sz-meal-img, .o-page .sz-meal-blank {
  width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--color-neutral-200);
}
.o-page .sz-meal-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .8s var(--ease-soft); }
.o-page .sz-meal:hover .sz-meal-img img { transform: rotate(18deg) scale(1.04); }
.o-page .sz-meal-body { text-align: center; }
.o-page .sz-meal-body small { font: 800 11px/1.2 var(--font-body); letter-spacing: .12em; color: var(--color-accent-2-800); }
.o-page .sz-meal-body h4 { font: 700 15px/1.25 var(--font-body); }
.o-page .sz-tags span, .o-page .sz-chip, .o-page .sz-topic {
  border: 0; border-radius: var(--radius-pill); background: var(--color-neutral-200); color: var(--color-text);
}
.o-page .sz-chip.active, .o-page .sz-topic.active { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.o-page .sz-sizes { background: var(--color-bg); border-radius: var(--radius-pill); padding: 4px; gap: 4px; border: 0; }
.o-page .sz-sizes button { border: 0; border-radius: var(--radius-pill); background: transparent; }
.o-page .sz-sizes button.active { background: var(--color-neutral-100); box-shadow: var(--shadow-sm); color: var(--color-text); }
.o-page .sz-qty button {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--color-bg); color: var(--color-text); font: 800 20px/1 var(--font-body);
}
.o-page .sz-qty button:last-child { background: var(--color-accent); color: var(--color-bg); }
.o-page .sz-qty button:hover { transform: scale(1.08); }
.o-page .sz-add { border-radius: var(--radius-pill); }
.o-page .sz-credit-progress, .o-page .sz-meter-bar { border-radius: var(--radius-pill); background: var(--color-neutral-300); overflow: hidden; }
.o-page .sz-meter-bar i { background: var(--color-accent); border-radius: var(--radius-pill); }

/* Orders. */
.o-page .order, .o-page .sz-order-card {
  background: var(--color-surface); border: 0; border-radius: var(--radius-lg);
  padding: 18px 22px; box-shadow: none;
}
.o-page .sz-order-id { font-family: var(--font-heading); font-weight: 400; }
.o-page .sz-origin { border-radius: var(--radius-pill); }
.o-page .sz-totals { border-top: 1px solid var(--color-divider); }

/* Messages. */
.o-page .sz-chat { background: var(--color-surface); border: 0; border-radius: var(--radius-xl); }
.o-page .sz-chat-thread { background: transparent; }
.o-page .sz-bubble-inner { border-radius: 22px; }
.o-page .sz-bubble.is-me .sz-bubble-inner { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.o-page .sz-bubble.is-them .sz-bubble-inner { background: var(--color-neutral-100); color: var(--color-text); }
.o-page .sz-bubble { animation: o-rise .4s var(--ease-soft) both; }
.o-page .sz-chat-form textarea { border-radius: var(--radius-md); background: var(--color-neutral-100); }
.o-page .sz-chat-day span { background: var(--color-bg); border-radius: var(--radius-pill); }

/* Profile, receipt, modal, cart bar. */
.o-page .sz-profile-view, .o-page .sz-receipt { background: var(--color-surface); border: 0; border-radius: var(--radius-xl); }
.o-page .sz-profile-head h2 { font-size: 34px; }
.o-page .sz-modal { background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); backdrop-filter: blur(2px); }
.o-page .sz-modal-card {
  background: var(--color-bg); border: 0; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); animation: o-rise .4s var(--ease-soft) both;
}
.o-page .sz-member-cart-bar { background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(10px); border-top: 0; box-shadow: var(--shadow-lg); }
.o-page .sz-alert { background: var(--color-accent-100); color: var(--color-accent-900); border: 0; border-radius: var(--radius-lg); }
.o-page .sz-blank, .o-page .o-member .empty { background: var(--color-surface); border: 0; border-radius: var(--radius-lg); }

/* ── REPARTO (driver) ─────────────────────────────────────────────────── */
.o-page .rep-cabecera h1 { font-size: clamp(34px, 5vw, 48px); }
.o-page .rep-dia h2 { font-size: 26px; }
.o-page .rep-card {
  background: var(--color-surface); border: 0; border-radius: var(--radius-lg); box-shadow: none;
}
.o-page .rep-card.en-ruta { background: var(--color-accent-100); box-shadow: inset 0 0 0 2px var(--color-accent); }
.o-page .rep-card.hecha { background: var(--color-accent-2-100); }
.o-page .rep-bag { border-radius: var(--radius-pill); background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.o-page .rep-mensaje { border-radius: var(--radius-md); background: var(--color-neutral-100); }
.o-page .reparto-quien { font-weight: 700; color: var(--color-accent-2-800); }

@media (max-width: 640px) {
  .o-page .o-topbar { padding: 10px 14px; gap: 8px; }
  .o-page .o-topbar .brand { font-size: 24px; }
  .o-page .o-topbar .top-actions { gap: 6px; }
  .o-page .o-topbar .top-logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .o-page .o-topbar .top-logout { width: 40px; padding: 0; justify-content: center; }
  .o-page .o-topbar .top-text-link { padding: 8px 10px; }
  .o-page .member-nav .sz-tab, .o-page .member-nav button { padding: 9px 14px; font-size: 14px; min-height: 40px; }
}

/* V80.1 — Mensajes: one sand surface for header + thread; keep the WhatsApp button clear of the topic chips. */
.o-page .sz-chat-head { background: transparent; border-bottom: 1px solid var(--color-divider); }
.o-page .sz-chat-compose { background: transparent; border-top: 1px solid var(--color-divider); padding-left: 72px; }
@media (min-width: 900px) { .o-page .sz-chat-compose { padding-left: 16px; } }

/* V80.1 — next-delivery card: decorative disc bottom-left (clear of the side box), solid side box,
   progress tracker with 22px dots centred on a 4px line and a highlighted current step. */
.o-page .sz-hero::before { top: auto; right: auto; left: -70px; bottom: -90px; width: 220px; height: 220px; opacity: .55; }
.o-page .sz-hero-side {
  background: var(--color-accent-600); color: var(--color-bg);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: none;
}
.o-page .sz-hero .sz-track { margin-top: 26px; }
.o-page .sz-hero .sz-track li { color: var(--color-bg); font-size: 13px; }
.o-page .sz-hero .sz-track li i {
  width: 22px; height: 22px; margin: 0 auto 10px; box-sizing: border-box;
  border: 4px solid var(--color-accent); background: var(--color-accent-400); box-shadow: none;
}
.o-page .sz-hero .sz-track li::before {
  top: 9px; height: 4px; left: -50%; width: 100%; border-radius: 999px; background: var(--color-accent-400);
}
.o-page .sz-hero .sz-track li.done i, .o-page .sz-hero .sz-track li.now i { background: var(--color-bg); border-color: var(--color-accent); }
.o-page .sz-hero .sz-track li.done::before, .o-page .sz-hero .sz-track li.now::before { background: var(--color-bg); }
.o-page .sz-hero .sz-track li.now i { width: 28px; height: 28px; margin-top: -3px; margin-bottom: 7px; border-color: var(--color-bg); background: var(--color-accent-800); }
.o-page .sz-hero .sz-track li span { font-size: 13px; font-weight: 600; opacity: .85; }
.o-page .sz-hero .sz-track li.done span { opacity: 1; }
.o-page .sz-hero .sz-track li.now span { opacity: 1; font-weight: 800; }
@media (max-width: 640px) { .o-page .sz-hero .sz-track li span { font-size: 10px; } }

/* V80.2 — login on phones: compact scene so the e-mail field is visible without scrolling. */
@media (max-width: 600px) {
  .o-login__scene { margin: 10px; padding: 16px 20px; flex-direction: row; align-items: center; gap: 14px; border-radius: 28px; }
  .o-login__plate { width: 92px; margin: 0; flex: none; }
  .o-login__plate .o-orbit { display: none; }
  .o-page .o-login__brand { font-size: 26px; }
  .o-login__tagline { font-size: 17px; max-width: none; }
  .o-login__scene > .o-blob { display: none; }
  .o-page .login-card.o-login__panel { padding: 4px 18px 40px; }
  .o-login__bar { margin-bottom: 10px; }
  .o-page .o-login__body h1 { font-size: 38px; }
  .o-login__body { gap: 14px; }
}

/* ── V80.6 — Mi cuenta design pass ─────────────────────────────────────── */
/* Stat cards: auto-fit gave 3 columns at tablet/laptop widths and left the
   4th card ("Sin plan") alone on a second row. Four across, two on phones. */
.o-page .sz-dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .o-page .sz-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Labels on the two light cards were legacy grey (#a19786) on pastel, ~2.2:1. */
.o-page .sz-stat.c3 small, .o-page .sz-stat.c4 small { color: inherit; opacity: .8; }

/* Meal thumbnails: the sprite was scaled to 420% on a 110x104 box, so each
   circle showed slices of the neighbouring dishes. Same 570% square crop as
   the storefront cards, which uses the same sprite positions. */
body[data-page="account"] .sz-meal-img.sz-meal-photo {
  width: 110px; height: 110px; background-size: 570% auto;
}

/* Plan price: "/ semana" at headline size broke "$50.00 /" and "semana" onto
   two lines. Price big, period small, on one line. */
.o-page .sz-per { font: 700 15px/1 var(--font-body); color: var(--color-neutral-700); white-space: nowrap; }

/* WhatsApp on phones/tablets: the legacy ≤700px rule pins it bottom-LEFT
   (left:12px !important), where it covered form fields in "Mis datos" and card
   text. Same bottom-right spot as the storefront. */
@media (max-width: 860px) {
  body[data-page="account"] .sazon-wa, body[data-page="account"] .sazon-wa[data-v58] {
    left: auto !important; right: 14px !important;
  }
}

/* ── V96 · Suscripción: status panel, stepper, plan cards (Mafe, suscripcion-melhorias.md) ───────────── */
.o-page .szp { display: flex; flex-direction: column; gap: 22px; }
.o-page .szp .sz-plan-lead { font-size: 15px; color: var(--color-neutral-700); margin: 0; }
.o-page .szp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o-page .szp-panel { border-radius: 22px; border: 1px solid var(--status-info-border); background: var(--status-info-bg); padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.o-page .szp-panel.is-action { background: var(--status-action-bg); border-color: var(--status-action-border); }
.o-page .szp-panel.is-ok { background: var(--status-ok-bg); border-color: var(--status-ok-border); }
.o-page .szp-panel.is-error { background: var(--status-error-bg); border-color: var(--status-error-border); }
.o-page .szp-panel.is-error h3 { color: var(--color-danger-ink); }
.o-page .szp-steps { list-style: none; margin: 0; padding: 0 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.o-page .szp-step { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.2 var(--font-body); color: var(--color-neutral-700); }
.o-page .szp-dot { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--step-todo); font: 700 13px/1 var(--font-body); color: var(--color-neutral-700); background: transparent; }
.o-page .szp-step.is-done .szp-dot { background: var(--step-done); border-color: var(--step-done); color: #fff; }
.o-page .szp-step.is-current { color: var(--color-text); font-weight: 800; }
.o-page .szp-step.is-current .szp-dot { background: var(--step-current); border-color: var(--step-current); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-current) 22%, transparent); }
.o-page .szp-step.is-error .szp-dot { background: var(--color-danger); border-color: var(--color-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 20%, transparent); }
.o-page .szp-label { display: flex; flex-direction: column; min-width: 0; }
.o-page .szp-now { font: 700 11px/1.2 var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.o-page .szp-body { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.o-page .szp-copy { flex: 1 1 320px; min-width: 0; }
.o-page .szp-eyebrow { margin: 0 0 4px; font: 800 12px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); }
.o-page .szp-copy h3 { margin: 0 0 6px; font: 800 24px/1.15 var(--font-body); color: var(--color-text); }
.o-page .szp-copy h3:focus { outline: none; }
.o-page .szp-copy p { margin: 0; color: var(--color-neutral-800); font-size: 15px; line-height: 1.5; }
.o-page .szp-actions { flex: 0 1 300px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.o-page .szp-actions .btn { width: 100%; min-height: 48px; }
.o-page .szp-fine { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.4; text-align: center; }
.o-page .szp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--color-accent-700); text-decoration: underline; cursor: pointer; min-height: 0; }
.o-page .szp-progress { position: relative; margin-top: 12px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 10%, transparent); max-width: 420px; }
.o-page .szp-progress i { display: block; height: 100%; border-radius: inherit; background: var(--step-done); }
.o-page .szp-progress b { position: absolute; right: 0; top: 14px; font-size: 13px; color: var(--color-neutral-700); }
.o-page .szp-coupon { border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); padding-top: 12px; }
/* Block 5: delivery or pickup for the weekly plan. */
.o-page .szp-ful { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.o-page .szp-ful legend { font-weight: 700; margin-bottom: 4px; }
.o-page .szp-ful label { display: flex; align-items: center; gap: 8px; }
.o-page .szp-coupon summary { cursor: pointer; font-weight: 700; color: var(--color-accent-700); min-height: 32px; display: flex; align-items: center; }
.o-page .szp-coupon-field { display: grid; gap: 4px; margin: 8px 0 4px; max-width: 320px; font-size: 13px; font-weight: 600; }
.o-page .szp-coupon-field input { min-height: 44px; border-radius: 12px; border: 1px solid var(--color-neutral-600); padding: 0 12px; font: 600 16px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; background: #fff; color: var(--color-text); }
.o-page .szp-coupon small { color: var(--color-neutral-700); }
.o-page .szp-foot { margin: 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); font-size: 13.5px; color: var(--color-neutral-800); }
.o-page .szp-error { margin: 0; color: var(--color-danger-ink); font-weight: 700; font-size: 14px; }
.o-page .szp-plans header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.o-page .szp-plans header h3 { margin: 0; font: 800 20px/1.2 var(--font-body); }
.o-page .szp-plans header p { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.o-page .szp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.o-page .szp-card { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--color-neutral-100); border: 2px solid transparent; border-radius: 20px; padding: 20px; }
.o-page .szp-card.is-selected { border-color: var(--plan-selected-border); }
.o-page .szp-badge { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: var(--plan-badge-bg); color: var(--plan-badge-fg); font: 700 12px/1.3 var(--font-body); }
.o-page .szp-card-eyebrow { margin: 0; font: 800 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); }
.o-page .szp-card h4 { margin: 0; font: 800 26px/1.1 var(--font-body); color: var(--color-text); }
.o-page .szp-card-line { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.o-page .szp-price { margin: 6px 0 0; font: 800 32px/1.05 var(--font-body); color: var(--color-text); }
.o-page .szp-price span { font: 600 15px/1 var(--font-body); color: var(--color-neutral-700); }
.o-page .szp-facts { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.o-page .szp-save { padding: 4px 12px; border-radius: 999px; background: var(--save-chip-bg); color: var(--save-chip-fg); font-weight: 700; font-size: 13px; }
.o-page .szp-card .btn { width: 100%; margin-top: 8px; }
.o-page .szp-card-state { margin: 8px 0 0; font-weight: 700; font-size: 14px; color: var(--color-neutral-800); }
.o-page .szp-manage { background: var(--color-neutral-100); border-radius: 20px; padding: 18px 20px; }
.o-page .szp-manage h3 { margin: 0 0 4px; font: 800 18px/1.2 var(--font-body); }
.o-page .szp-manage p { margin: 0 0 12px; font-size: 14px; color: var(--color-neutral-700); }
.o-page .szp-manage-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.o-page .szp-howto { background: var(--color-neutral-100); border-radius: 20px; padding: 4px 20px; }
.o-page .szp-howto summary { cursor: pointer; font-weight: 800; min-height: 52px; display: flex; align-items: center; }
.o-page .szp-howto ol { margin: 0 0 16px; padding-left: 20px; line-height: 1.55; color: var(--color-neutral-800); }
@media (max-width: 640px) {
  .o-page .szp-panel { padding: 16px; }
  .o-page .szp-step { flex-direction: column; text-align: center; font-size: 12.5px; gap: 4px; }
  .o-page .szp-now { display: none; }
  .o-page .szp-copy h3 { font-size: 21px; }
  .o-page .szp-actions { flex-basis: 100%; }
}