/*
 * Mundo público — El Sazón Casero («la olla»).
 * Dirección: un solo motivo. El círculo de la olla vista desde arriba manda en todo:
 * disco gigante del inicio, máscara de las fotos, forma de botones, controles y viñetas.
 * Todo vive bajo body.sz-public: el panel del personal no carga ni hereda nada de aquí.
 */

/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */

body.sz-public {
  --sz-font-display: "Stack Sans Headline", system-ui, sans-serif;
  --sz-font-text: "Stack Sans Text", system-ui, sans-serif;

  --sz-brand-900: #0a0a0a;
  --sz-brand-700: #c4241a;   /* rojo chile: la acción y el motivo */
  --sz-brand-500: #a31c13;   /* rojo hondo: presionado y texto sobre tinte */
  --sz-brand-300: #f9d3cf;   /* tinte pálido del rojo */

  --sz-canvas: #ffffff;
  --sz-surface: #f2f2f2;     /* papel: paneles y campos */
  --sz-cream-300: #e4e4e4;
  --sz-cream-200: #f2f2f2;
  --sz-cream-100: #ebebeb;
  --sz-cream-soft: #f7f7f7;

  --sz-ink: #0a0a0a;
  --sz-ink-muted: #595959;
  --sz-line: #e2e2e2;
  --sz-line-soft: #ececec;
  --sz-line-strong: #767676;

  --sz-ok-700: #1b6a2c;
  --sz-ok-bg: #e4f2e7;
  --sz-warn-700: #7a4a00;
  --sz-warn-bg: #fdf0d3;
  --sz-danger-700: #8f1710;
  --sz-danger-bg: #fdeceb;

  --sz-text-xs: 0.8125rem;
  --sz-text-sm: 0.9375rem;
  --sz-text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --sz-text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --sz-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --sz-text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --sz-text-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  /* Titular del hero: crece con el ancho y se frena con el alto para caber en pantalla. */
  --sz-text-display: clamp(3rem, 17vw, 4.5rem);
  --sz-brand-size: 1.1875rem;

  --sz-radius-sm: 999px;     /* controles: totalmente redondos */
  --sz-radius-md: 28px;      /* paneles: un solo radio */
  --sz-radius-lg: 28px;

  --sz-focus: 3px solid var(--sz-ink);
  --sz-focus-offset: 3px;
  --sz-hover-tint: rgba(10, 10, 10, 0.05);
  --sz-press-tint: rgba(10, 10, 10, 0.14);

  --sz-pub-gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --sz-pub-max: 70rem;

  /* El puente a Bootstrap se calcula en :root; aquí se vuelve a declarar con los tokens públicos. */
  --bs-body-font-family: var(--sz-font-text);
  --bs-body-bg: var(--sz-canvas);
  --bs-body-color: var(--sz-ink);
  --bs-secondary-color: var(--sz-ink-muted);
  --bs-border-color: var(--sz-line);
  --bs-link-color: var(--sz-brand-700);
  --bs-link-hover-color: var(--sz-brand-500);
  --bs-link-color-rgb: 196, 36, 26;
  --bs-link-hover-color-rgb: 163, 28, 19;
  --bs-primary: var(--sz-brand-700);
  --bs-primary-rgb: 196, 36, 26;
  --bs-danger: var(--sz-danger-700);
  --bs-danger-rgb: 143, 23, 16;

  background: var(--sz-canvas);
  color: var(--sz-ink);
  font-family: var(--sz-font-text);
  font-size: var(--sz-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Solo se cargan los pesos 300, 400 y 500: un 600 o 700 heredado de app.css usa el 500 en lugar de un negrita falso. */
  font-synthesis: none;
}

/* :where() deja la regla con la especificidad de un h1 pelado: cualquier componente la supera. */
:where(body.sz-public) :is(h1, h2, h3) {
  font-family: var(--sz-font-display);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--sz-ink);
}

body.sz-public a { text-underline-offset: 3px; }
/* `.small` de Bootstrap es relativo (.875em) y daba 13 a 16.6 px según el contenedor. */
body.sz-public .small, body.sz-public small { font-size: var(--sz-text-sm); }
/* Solo hay pesos 300, 400 y 500: sin esto el navegador sintetiza un negrita borroso. */
body.sz-public strong, body.sz-public b, body.sz-public .fw-bold { font-weight: 500; }

/* ---------------------------------------------------------------------- */
/* Cascarón: encabezado, contenedor y pie                                  */
/* ---------------------------------------------------------------------- */

body.sz-public main.container,
body.sz-public .sz-pub-main {
  max-width: var(--sz-pub-max);
  padding-inline: var(--sz-pub-gutter);
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 8vw, 6rem) !important;
}
body.sz-public main > .sz-stack { max-width: 40rem; margin-inline: auto; width: 100%; gap: var(--sz-space-5); }
body.sz-pub-menu main > .sz-stack, body.sz-pub-armar main > .sz-stack { max-width: none; }

/* Fijo: el encabezado y el acceso a «Rastrear pedido» siguen a la vista al bajar. */
.sz-pub-header { position: sticky; top: 0; z-index: 1020; background: var(--sz-canvas); }
/* Lo que se enfoca o se salta con un ancla (#checkout-error, #precios-titulo) no debe quedar bajo el encabezado. */
body.sz-public [id], body.sz-public #checkout-error { scroll-margin-top: 5.5rem; }
.sz-pub-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 4.25rem; padding-inline: var(--sz-pub-gutter); max-width: var(--sz-pub-max); margin-inline: auto;
}
.sz-pub-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--sz-touch); color: var(--sz-ink); text-decoration: none; }
.sz-pub-brand svg { width: 2.25rem; height: 2.25rem; flex: none; color: var(--sz-brand-700); }
.sz-pub-brand__name { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-brand-size); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.sz-pub-header__link {
  display: inline-flex; align-items: center; min-height: var(--sz-touch); padding-inline: 14px; white-space: nowrap;
  border-radius: 999px; background: var(--sz-surface); color: var(--sz-ink);
  font-size: var(--sz-text-sm); font-weight: 500; text-decoration: none;
}

/* Teléfono: el nombre y el botón necesitan aire entre sí y respetar el margen derecho. */
/* Menos de 360 px: no cabe el nombre junto al botón; queda solo la olla y el nombre sigue
   disponible para lectores de pantalla (el titular del inicio ya lo dice a la vista). */
@media (max-width: 359.98px) {
  .sz-pub-brand__name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 420px) {
  body.sz-public { --sz-brand-size: 1.0625rem; }
  .sz-pub-header__bar { gap: 1.5rem; }
  .sz-pub-brand { gap: 8px; }
  .sz-pub-brand svg { width: 2rem; height: 2rem; }
  .sz-pub-header__link { padding-inline: 0.875rem; }
}

.sz-pub-footer { background: var(--sz-surface); margin-top: var(--sz-space-8); }
.sz-pub-footer__inner {
  max-width: var(--sz-pub-max); margin-inline: auto; padding: 2.5rem var(--sz-pub-gutter) 3rem;
  display: flex; flex-direction: column; gap: 18px; font-size: var(--sz-text-sm);
}
.sz-pub-footer__brand { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-brand-size); letter-spacing: -0.022em; line-height: 1.05; }
.sz-pub-footer p { margin: 0; color: var(--sz-ink-muted); max-width: 38ch; }
.sz-pub-footer a { color: var(--sz-ink); font-weight: 500; }
.sz-pub-footer__staff { display: inline-flex; align-items: center; min-height: var(--sz-touch); color: var(--sz-ink-muted) !important; font-weight: 400 !important; }

/* ---------------------------------------------------------------------- */
/* Foco visible sobre cada fondo (WCAG 2.4.7 y 1.4.11)                     */
/* ---------------------------------------------------------------------- */

/* El anillo del sistema es tinta. app.css lo pinta crema en «← atrás» y con los tokens públicos
   eso era #f2f2f2 sobre blanco (1.1:1): invisible. */
body.sz-public .sz-back-link:focus-visible,
body.sz-public .sz-page-head .sz-back-link:focus-visible { outline-color: var(--sz-ink); }

/* Sobre fondo oscuro el anillo es blanco; en tinta (#0a0a0a) sobre tinta no se veía. El resumen
   del armado declara lo mismo en su propia regla. */
body.sz-public .sz-pub-about,
body.sz-public .sz-pub-price--4,
body.sz-pub-menu [aria-labelledby="pedido-titulo"] { --sz-focus: 3px solid #fff; }

/* La franja del paquete va al ras del borde de una tarjeta con overflow: hidden, que recorta un
   anillo exterior. El anillo va hacia adentro y con el color que contrasta con cada franja
   (tinta sobre las claras, blanco sobre las oscuras). */
.sz-pub-price__go:focus-visible { outline-offset: -6px; }
.sz-pub-price--3 .sz-pub-price__go:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------- */
/* Botones y campos: totalmente redondos                                   */
/* ---------------------------------------------------------------------- */

body.sz-public .sz-btn, body.sz-public .sz-btn--lg {
  font-family: var(--sz-font-text); font-weight: 500; letter-spacing: 0; border-width: 0;
  font-size: var(--sz-text-base);
  padding-inline: 1.75rem;
}
body.sz-public .sz-btn--primary { background: var(--sz-brand-700); color: #fff; font-family: var(--sz-font-text); }
body.sz-public .sz-btn--secondary { background: var(--sz-surface); color: var(--sz-ink); }
body.sz-public .sz-btn--quiet { background: var(--sz-surface); color: var(--sz-ink); }
body.sz-public .sz-btn--danger { background: var(--sz-danger-bg); color: var(--sz-danger-700); }
@media (hover: hover) and (pointer: fine) {
  body.sz-public .sz-btn--primary:hover { background: var(--sz-brand-500); }
  body.sz-public .sz-btn--secondary:hover, body.sz-public .sz-btn--quiet:hover { background: var(--sz-cream-300); }
}
body.sz-public .sz-btn:disabled, body.sz-public .sz-btn[aria-disabled="true"] {
  background: var(--sz-cream-100); color: var(--sz-ink-muted);
}

body.sz-public .form-control,
body.sz-public .form-select {
  border: 0; background-color: var(--sz-surface); color: var(--sz-ink);
  border-radius: 999px; padding-inline: 1.25rem; min-height: 3.5rem; font-size: var(--sz-text-base);
  font-family: var(--sz-font-text);
}
body.sz-public textarea.form-control { border-radius: var(--sz-radius-md); padding-block: 1rem; min-height: 6rem; resize: none; }
body.sz-public .form-control:focus, body.sz-public .form-select:focus {
  background-color: #fff; outline: var(--sz-focus); outline-offset: 0; box-shadow: none;
}
body.sz-public .form-control::placeholder { color: #6e6e6e; }
body.sz-public .sz-input { min-height: 3.5rem !important; border-radius: 999px !important; font-size: var(--sz-text-base); }
body.sz-public textarea.sz-rounded { border-radius: var(--sz-radius-md) !important; }
body.sz-public .sz-input--pin { font-family: var(--sz-font-text); font-size: 1.25rem; letter-spacing: 0.4em; }
body.sz-public .sz-input--poppins { font-family: var(--sz-font-text); letter-spacing: 0.06em; }
body.sz-public .form-control[aria-invalid="true"],
body.sz-public .sz-phone__field:has(input[aria-invalid="true"]) {
  background-color: var(--sz-danger-bg); outline: 3px solid var(--sz-brand-700); outline-offset: 0; box-shadow: none;
}
body.sz-public main label.d-flex { font-size: var(--sz-text-sm); color: var(--sz-ink) !important; font-weight: 500; gap: 8px !important; }
body.sz-public main label.d-flex .small, body.sz-public main label.d-flex span.small { color: var(--sz-ink-muted); font-weight: 400; }

/* Teléfono: campo único redondo */
body.sz-public .sz-phone__title { font-size: var(--sz-text-sm); color: var(--sz-ink); font-weight: 500; }
body.sz-public .sz-phone__field {
  border: 0; border-radius: 999px; background: var(--sz-surface); min-height: 3.5rem;
}
body.sz-public .sz-phone__field:focus-within { background: #fff; outline: var(--sz-focus); outline-offset: 0; }
body.sz-public .sz-phone__country { border-right: 0; padding-left: 1.25rem; }
body.sz-public .sz-phone__input { font-size: var(--sz-text-base); font-family: var(--sz-font-text); }
body.sz-public .sz-phone__paste {
  border-left: 0; background: var(--sz-cream-300); color: var(--sz-ink); font-weight: 500; font-size: var(--sz-text-xs);
  padding-inline: 1.25rem; margin: 4px; border-radius: 999px; min-height: 2.75rem;
}
body.sz-public .sz-phone__help { color: var(--sz-ink-muted); font-size: var(--sz-text-xs); }

/* Avisos */
body.sz-public .sz-alert { border-radius: var(--sz-radius-md); border-width: 2px; padding: 1rem 1.25rem; font-size: var(--sz-text-sm); }
body.sz-public .sz-alert--danger { background: var(--sz-danger-bg); border-color: var(--sz-brand-700); color: var(--sz-danger-700); font-weight: 500; }
body.sz-public .sz-alert--warn { background: var(--sz-warn-bg); border-color: var(--sz-warn-700); }
body.sz-public .sz-alert--ok { background: var(--sz-ok-bg); border-color: var(--sz-ok-700); }
body.sz-public .sz-alert--info { background: var(--sz-surface); border-color: var(--sz-ink); color: var(--sz-ink); }
body.sz-public .sz-empty { border: 0; background: var(--sz-surface); border-radius: var(--sz-radius-md); padding: 2.5rem 1.5rem; }
body.sz-public .sz-empty__title { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-xl); color: var(--sz-ink); }
body.sz-public .sz-empty__text { color: var(--sz-ink-muted); font-size: var(--sz-text-sm); }

/* ---------------------------------------------------------------------- */
/* Encabezado de pantalla y etiquetas de sección                           */
/* ---------------------------------------------------------------------- */

body.sz-public .sz-page-head {
  background: none; margin: 0; padding: 0; border-radius: 0; align-items: flex-start; text-align: left; gap: 6px;
}
body.sz-public .sz-page-head h1,
body.sz-public .sz-page-head--client h1 {
  font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-3xl);
  letter-spacing: -0.022em; line-height: 1.02; color: var(--sz-ink); margin: 0;
}
body.sz-public .sz-page-head__sub, body.sz-public .sz-page-head--client .sz-page-head__sub {
  margin: 4px 0 0; font-size: var(--sz-text-base); color: var(--sz-ink-muted); line-height: 1.4;
}
body.sz-public .sz-page-head__pill { background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
body.sz-public .sz-back-link, body.sz-public .sz-page-head .sz-back-link {
  color: var(--sz-ink-muted); font-size: var(--sz-text-sm); padding-inline: 0; font-weight: 500;
}
body.sz-public .sz-section-label {
  font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-2xl);
  letter-spacing: -0.022em; line-height: 1.05; text-transform: none; color: var(--sz-ink);
}
body.sz-public .sz-menu-caption, body.sz-public .sz-cfg-group__copy {
  font-size: var(--sz-text-sm); color: var(--sz-ink-muted); line-height: 1.45; margin: 0;
}
body.sz-public .sz-menu-note {
  background: var(--sz-surface); color: var(--sz-ink); border-radius: var(--sz-radius-md);
  padding: 1rem 1.25rem; font-size: var(--sz-text-sm); line-height: 1.45;
}
body.sz-public .sz-menu-closed {
  background: var(--sz-ink); border-radius: var(--sz-radius-md); padding: 1.75rem 1.5rem; gap: 10px;
}
body.sz-public .sz-menu-closed__title { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-2xl); color: #fff; letter-spacing: -0.022em; line-height: 1.05; }
body.sz-public .sz-menu-closed__text { color: #e6e6e6; font-size: var(--sz-text-base); }
body.sz-public .sz-menu-closed__next { color: #fff; font-weight: 500; font-size: var(--sz-text-sm); }

/* ---------------------------------------------------------------------- */
/* Platillo: fila sin caja con la foto (o su hueco) en máscara circular    */
/* ---------------------------------------------------------------------- */

body.sz-public .sz-thumb {
  width: 4rem; height: 4rem; border-radius: 50%; background: var(--sz-surface); border: 0; color: var(--sz-ink);
}
body.sz-public .sz-thumb--empty, body.sz-public .sz-thumb--guarnicion, body.sz-public .sz-thumb--agua, body.sz-public .sz-thumb--postre {
  background: var(--sz-surface); border: 0; color: var(--sz-ink);
}
body.sz-public .sz-thumb--guisado { background: var(--sz-brand-300); border: 0; color: var(--sz-brand-500); }
body.sz-public .sz-thumb .material-symbols-rounded { font-size: 1.75rem; }

body.sz-public .sz-dishcard {
  background: none; border: 0; border-radius: 0; padding: 0.375rem 0; gap: 1rem;
}
body.sz-public .sz-dishcard--sold { background: none; }
body.sz-public .sz-dishcard--sold .sz-thumb { opacity: 0.45; }
body.sz-public .sz-dishcard--sold .sz-dishcard__name { color: var(--sz-ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
body.sz-public .sz-dishcard__name { font-size: var(--sz-text-base); font-weight: 500; line-height: 1.3; font-family: var(--sz-font-text); }
body.sz-public .sz-dishcard__sub { font-size: var(--sz-text-sm); color: var(--sz-ink-muted); }
body.sz-public .sz-dishcard__sub--warn { color: var(--sz-brand-500); font-weight: 500; }
body.sz-public .sz-badge {
  border: 0; border-radius: 999px; font-size: var(--sz-text-xs); font-weight: 500; padding: 0.25rem 0.75rem;
}
body.sz-public .sz-badge--warn { background: var(--sz-brand-300); color: var(--sz-brand-500); }

/* Fila de menú: el estado va bajo el nombre; así un nombre largo y «Especial · +$5 por porción» nunca se pelean el ancho. */
body.sz-public .sz-dishcard:has(> .sz-avail) { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.25rem; }
body.sz-public .sz-dishcard > .sz-avail { grid-column: 2; justify-self: start; white-space: normal; }
body.sz-public .sz-dishcard:has(> .sz-avail) > .sz-thumb { grid-row: 1 / span 2; align-self: center; }
body.sz-public .sz-avail--ok { padding-block: 0; }
body.sz-public .sz-avail { font-size: var(--sz-text-sm); font-weight: 500; border-radius: 999px; padding: 0.375rem 0.875rem; }
body.sz-public .sz-avail--ok { background: none; color: var(--sz-ink-muted); padding-inline: 0; font-weight: 400; }
body.sz-public .sz-avail--warn { background: var(--sz-brand-300); color: var(--sz-brand-500); }
body.sz-public .sz-avail--bad { background: var(--sz-ink); color: #fff; }

/* Menú de hoy */
body.sz-pub-menu main > .sz-stack > section { display: flex; flex-direction: column; gap: 0.25rem; }
body.sz-pub-menu main > .sz-stack > section > .sz-section-label { margin-bottom: 0.5rem; }
body.sz-pub-menu main > .sz-stack > section[aria-labelledby="pedido-titulo"] {
  background: var(--sz-ink); border-radius: var(--sz-radius-md); padding: 1.75rem 1.5rem; gap: 0.75rem !important;
}
body.sz-pub-menu [aria-labelledby="pedido-titulo"] h2 { color: #fff; }
body.sz-pub-menu [aria-labelledby="pedido-titulo"] .sz-menu-caption { color: #d9d9d9; font-size: var(--sz-text-base); }
body.sz-pub-menu [aria-labelledby="pedido-titulo"] .sz-btn--primary { margin-top: 0.5rem; }
body.sz-pub-menu [aria-labelledby="pedido-titulo"] .sz-btn--secondary { background: #2a2a2a; color: #fff; }
body.sz-pub-menu [aria-labelledby="precios-titulo"] .sz-checkout-summary__row {
  align-items: baseline; padding: 0.625rem 0; font-size: var(--sz-text-base);
}
body.sz-pub-menu [aria-labelledby="precios-titulo"] .sz-checkout-summary__row > span:last-child {
  font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-xl); letter-spacing: -0.02em;
}
body.sz-pub-menu [aria-labelledby="precios-titulo"] .text-body-secondary { color: var(--sz-ink-muted) !important; font-size: var(--sz-text-sm) !important; }

/* ---------------------------------------------------------------------- */
/* Armar mi pedido                                                         */
/* ---------------------------------------------------------------------- */

body.sz-public .sz-cfg-group { gap: 0.5rem; }
body.sz-public .sz-cfg-group > legend { margin-bottom: 0.25rem; }
body.sz-public .sz-chip-row { gap: 0.625rem; }
body.sz-public .sz-chip-btn {
  min-height: 3rem; padding: 0 1.25rem; border: 0; background: var(--sz-surface); color: var(--sz-ink);
  font-size: var(--sz-text-sm); font-weight: 500; font-family: var(--sz-font-text);
}
body.sz-public .sz-chip-btn--on { background: var(--sz-ink); color: #fff; }
body.sz-public .sz-chip-btn--on::before { content: "✓"; margin-right: 0.5rem; }

body.sz-public .sz-pick {
  min-height: 3.5rem; border: 0; border-radius: 999px; background: var(--sz-surface); padding-inline: 1.25rem;
}
body.sz-public .sz-pick:has(.sz-pick__input:checked) { background: var(--sz-brand-300); }
body.sz-public .sz-pick:focus-within { outline: var(--sz-focus); outline-offset: 2px; }
body.sz-public .sz-pick__box { border-radius: 50%; border-color: var(--sz-ink); width: 1.625rem; height: 1.625rem; flex-basis: 1.625rem; }
body.sz-public .sz-pick:has(.sz-pick__input:checked) .sz-pick__box { background: var(--sz-ink); }
body.sz-public .sz-pick__name { font-size: var(--sz-text-sm); font-weight: 500; }

/* Teléfono: el nombre ocupa todo el ancho y el stepper baja a su propia fila, alineado con el texto. */
@media (max-width: 599.98px) {
  body.sz-public .sz-dishcard:has(> .sz-step-group) { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.5rem; }
  body.sz-public .sz-dishcard:has(> .sz-step-group) > .sz-thumb { grid-row: 1 / span 2; align-self: start; }
  body.sz-public .sz-dishcard > .sz-step-group { grid-column: 2; justify-self: start; }
}
body.sz-public .sz-step-group { gap: 0.25rem; }
body.sz-public .sz-step {
  width: 2.75rem; height: 2.75rem; border: 0; background: var(--sz-surface); color: var(--sz-ink);
  transition: background-color 0.15s ease, scale 0.1s var(--sz-ease-out);
}
body.sz-public .sz-step:active:not(:disabled) { scale: 0.92; background: var(--sz-cream-300); }
body.sz-public .sz-step:disabled { background: var(--sz-cream-soft); color: #8a8a8a; opacity: 1; }
body.sz-public .sz-step__n {
  font-family: var(--sz-font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: -0.02em; width: 2.75rem;
}
body.sz-public .sz-step__unit { font-weight: 500; font-size: var(--sz-text-sm); color: var(--sz-ink-muted); }
@media (hover: hover) and (pointer: fine) {
  body.sz-public .sz-step:hover:not(:disabled) { background: var(--sz-cream-300); }
}
body.sz-public .sz-water-select { border-radius: 999px; border: 0; background-color: var(--sz-surface); }

/* Resumen: la única banda negra de la pantalla; el botón rojo vive sobre ella */
body.sz-public #resumen.sz-summary {
  background: var(--sz-ink); color: #fff; border: 0; border-radius: var(--sz-radius-md);
  padding: 1.25rem 1.5rem; gap: 0.875rem; --sz-focus: 3px solid #fff;
}
body.sz-public #resumen :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body.sz-public .sz-summary__line { font-size: var(--sz-text-sm); font-weight: 500; color: #fff; display: flex; gap: 0.5rem; }
body.sz-public .sz-summary__line::before { content: "!"; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #fff; color: var(--sz-ink); font-size: 0.8125rem; font-weight: 500; display: grid; place-items: center; margin-top: 1px; }
body.sz-public .sz-summary__line--ok::before { content: "✓"; background: #fff; }
body.sz-public .sz-summary__line--ok, body.sz-public .sz-summary__line--warn, body.sz-public .sz-summary__line--danger { color: #fff; }
body.sz-public .sz-summary__row { font-size: var(--sz-text-sm); color: #fff; }
body.sz-public .sz-summary__row--total { border-top: 0; margin-top: 0.25rem; padding-top: 0.5rem; }
body.sz-public .sz-summary__row--total dt, body.sz-public .sz-summary__row--total dd {
  font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-xl); color: #fff;
}
body.sz-public .sz-summary__hint { color: #d9d9d9; font-size: var(--sz-text-sm); }
body.sz-public .sz-summary__hint--ok { color: #fff; font-weight: 500; }
body.sz-public .sz-sum-toggle { color: #fff; font-family: var(--sz-font-text); }
body.sz-public .sz-sum-toggle strong { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-xl); color: #fff; letter-spacing: -0.02em; }
body.sz-public .sz-sum-toggle__hint { color: #d9d9d9; font-size: var(--sz-text-sm); }
body.sz-public #resumen .sz-btn--primary { background: var(--sz-brand-700); color: #fff; }

/* Tableta vertical (744 px): menú en dos columnas; armar queda en una columna ancha con el resumen fijo abajo. */
@media (min-width: 744px) {
  body.sz-pub-menu main > .sz-stack > section:not([aria-labelledby="pedido-titulo"]):not([aria-labelledby="precios-titulo"]) {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 0.25rem;
  }
  body.sz-pub-menu main > .sz-stack > section > .sz-section-label, body.sz-pub-menu main > .sz-stack > section > .sz-menu-caption { grid-column: 1 / -1; }
  body.sz-pub-menu main > .sz-stack > .sz-menu-note { max-width: 44rem; }
  body.sz-pub-armar main > .sz-stack { max-width: 44rem; }
  body.sz-pub-armar #resumen { bottom: var(--sz-space-3); }
  body.sz-pub-menu [aria-labelledby="precios-titulo"] ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
/* Tableta horizontal y escritorio (1000 px): lista a la izquierda, resumen fijo a la derecha. */
@media (min-width: 1000px) {
  body.sz-pub-menu main > .sz-stack > section:not([aria-labelledby="pedido-titulo"]):not([aria-labelledby="precios-titulo"]) { column-gap: 4rem; }
  body.sz-pub-armar main > .sz-stack {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 4rem; align-items: start;
  }
  body.sz-pub-armar main > .sz-stack > .sz-page-head { grid-column: 1 / -1; }
  body.sz-pub-armar main > .sz-stack > #configurator-form { grid-column: 1; }
  body.sz-pub-armar #resumen { grid-column: 2; grid-row: 2; position: sticky !important; top: 5.5rem; bottom: auto !important; }
}

/* ---------------------------------------------------------------------- */
/* Confirmar pedido                                                        */
/* ---------------------------------------------------------------------- */

body.sz-public .sz-checkout-summary {
  background: var(--sz-surface); border: 0; border-radius: var(--sz-radius-md); padding: 1.5rem; gap: 0.625rem;
}
body.sz-public .sz-checkout-summary__row { font-size: var(--sz-text-base); }
body.sz-public .sz-checkout-summary__row--total {
  border-top: 0; margin-top: 0.5rem; padding-top: 0.25rem; align-items: baseline;
  font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-2xl); letter-spacing: -0.022em; color: var(--sz-ink);
}
body.sz-public .sz-checkout-summary .small, body.sz-public .sz-checkout-summary .text-body-secondary { color: var(--sz-ink-muted) !important; font-size: var(--sz-text-sm) !important; }
body.sz-public .sz-short-dialog { box-shadow: 0 0 0 100vmax rgba(10, 10, 10, 0.55); }
body.sz-public .sz-cancel-modal__panel { border-radius: var(--sz-radius-md); padding: 1.5rem; background: #fff; }
body.sz-public .sz-cancel-modal__title { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-xl); color: var(--sz-ink); letter-spacing: -0.02em; line-height: 1.1; }
body.sz-public .sz-cancel-modal__text { color: var(--sz-ink-muted); font-size: var(--sz-text-sm); }
body.sz-public .sz-cancel-modal__text strong { color: var(--sz-ink); }

/* ---------------------------------------------------------------------- */
/* Seguimiento: el recibo es un cupón con perforación de puntos            */
/* ---------------------------------------------------------------------- */

body.sz-public .sz-receipt {
  background: var(--sz-surface); border: 0; border-radius: var(--sz-radius-md); padding: 1.5rem; gap: 1.25rem;
}
body.sz-public .sz-receipt__meta dt { font-size: var(--sz-text-xs); color: var(--sz-ink-muted); }
body.sz-public .sz-receipt__meta dd { font-size: var(--sz-text-sm); font-weight: 500; }
body.sz-public .sz-receipt__lines {
  position: relative; border-top: 5px dotted #fff; padding-top: 1.5rem; margin-top: 0.25rem;
}
body.sz-public .sz-receipt__lines::before,
body.sz-public .sz-receipt__lines::after {
  content: ""; position: absolute; top: -17px; width: 28px; height: 28px; border-radius: 50%; background: var(--sz-canvas);
}
body.sz-public .sz-receipt__lines::before { left: calc(-1.5rem - 14px); }
body.sz-public .sz-receipt__lines::after { right: calc(-1.5rem - 14px); }
body.sz-public .sz-receipt__name, body.sz-public .sz-receipt__price { font-size: var(--sz-text-sm); font-weight: 500; }
body.sz-public .sz-receipt__details { border-left: 0; padding-left: 0; font-size: var(--sz-text-sm); color: var(--sz-ink-muted); }
body.sz-public .sz-receipt__tag { background: var(--sz-brand-300); color: var(--sz-brand-500); font-size: var(--sz-text-xs); font-weight: 500; }
body.sz-public .sz-receipt__note { background: #fff; color: var(--sz-ink); border-radius: var(--sz-radius-md); font-size: var(--sz-text-sm); padding: 0.875rem 1rem; }
body.sz-public .sz-receipt__total {
  border-top: 0; padding-top: 0; font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-2xl);
  letter-spacing: -0.022em; color: var(--sz-ink);
}
body.sz-public .sz-receipt__payment { color: var(--sz-ok-700); font-size: var(--sz-text-sm); font-weight: 500; }

body.sz-public .sz-timeline { background: none; border: 0; padding: 0.25rem 0; }
body.sz-public .sz-timeline__step { gap: 1rem; align-items: center; padding-bottom: 0.875rem; }
body.sz-public .sz-timeline__dot {
  width: 1.875rem; height: 1.875rem; flex-basis: 1.875rem; background: var(--sz-surface); color: var(--sz-ink); font-size: var(--sz-text-sm);
}
body.sz-public .sz-timeline__dot--done { background: var(--sz-brand-700); color: #fff; }
body.sz-public .sz-timeline__label { font-size: var(--sz-text-base); color: var(--sz-ink-muted); }
body.sz-public .sz-timeline__label--done { color: var(--sz-ink); }
body.sz-public .sz-timeline__label.fw-bold { font-weight: 500 !important; color: var(--sz-ink); }

/* Aviso de «no se actualiza solo» (estilo en línea hoy; en el prototipo se pinta como panel) */
body.sz-pub-track .sz-card[style] { background: var(--sz-surface) !important; border-radius: var(--sz-radius-md); border: 0; }
body.sz-pub-track .sz-card[style] .sz-btn--secondary { background: #fff; }
body.sz-pub-track .sz-card[style] p { color: var(--sz-ink) !important; font-size: var(--sz-text-sm); }

/* ---------------------------------------------------------------------- */
/* Inicio                                                                  */
/* ---------------------------------------------------------------------- */

body.sz-pub-home .sz-pub-main { max-width: none; padding: 0 !important; }

/* El disco ocupa la parte alta y recortada de la pantalla; el texto empieza debajo de su borde, nunca encima.
   Todo se mide con el diámetro --d: crece con el ancho y se frena con el alto para que el hero quepa. */
.sz-pub-hero {
  position: relative; overflow: hidden; isolation: isolate;
  --d: 112vw;
  --sz-pub-edge: max(var(--sz-pub-gutter), calc((100% - var(--sz-pub-max)) / 2 + var(--sz-pub-gutter)));
  min-height: 32rem; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--d) * 0.74) var(--sz-pub-edge) 2rem;
}
.sz-pub-hero__disc {
  position: absolute; z-index: -1; right: calc(var(--d) * -0.3); top: calc(var(--d) * -0.27); width: var(--d);
  aspect-ratio: 1; border-radius: 50%; background: var(--sz-brand-700); display: grid; place-items: center;
}
.sz-pub-hero__disc svg { width: 40%; height: auto; color: #fff; }
@supports (height: 100svh) {
  body.sz-public {
    --sz-text-display: clamp(3rem, min(17vw, 8svh), 4.5rem);
    /* Alto que queda bajo el encabezado fijo (4.25 rem). svh es el alto con las barras del navegador puestas. */
    --sz-hero-h: calc(100svh - 4.25rem);
  }
  .sz-pub-hero {
    /* El disco ocupa un 30 % del alto disponible: 0.74 · d = 0.30 · alto. */
    --d: min(112vw, calc(var(--sz-hero-h) * 0.405));
    min-height: var(--sz-hero-h);
    padding-bottom: clamp(1.25rem, 3.5svh, 3rem);
  }
}
/* Pantalla baja: los botones de pedir deben verse sin bajar; el horario sigue en «Así se pide» y en el pie. */
@media (max-height: 640px), (max-width: 743.98px) and (max-height: 700px) {
  .sz-pub-hero__text { display: none; }
}
.sz-pub-hero__copy { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }
body.sz-public .sz-pub-hero h1.sz-logotype {
  font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-display);
  letter-spacing: -0.03em; line-height: 0.98; color: var(--sz-ink); margin: 0 0 0.5rem;
}
.sz-pub-hero__lead { margin: 0; font-size: var(--sz-text-lg); line-height: 1.3; max-width: 28ch; text-wrap: balance; }
.sz-pub-hero__text { margin: 0; font-size: var(--sz-text-base); color: var(--sz-ink-muted); max-width: 46ch; }
.sz-pub-hero__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; max-width: 24rem; }
.sz-pub-hero__actions .sz-btn { width: 100%; }

.sz-pub-section { padding: clamp(3rem, 8vw, 6rem) var(--sz-pub-gutter) 0; max-width: var(--sz-pub-max); margin-inline: auto; }
.sz-pub-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sz-pub-section__head h2 { margin: 0; font-size: var(--sz-text-2xl); }
.sz-pub-count { font-size: var(--sz-text-base); color: var(--sz-ink-muted); white-space: nowrap; }
.sz-pub-today__list { display: grid; gap: 0.25rem; }
.sz-pub-today__cta { margin-top: 1.5rem; max-width: 24rem; }

.sz-pub-steps { display: grid; gap: 0.5rem; margin-top: 2rem; }
.sz-pub-step {
  border-radius: var(--sz-radius-md); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 11rem;
}
.sz-pub-step h3 { margin: 0; font-size: var(--sz-text-xl); color: inherit; }
.sz-pub-step p { margin: 0; font-size: var(--sz-text-base); max-width: 34ch; }
.sz-pub-step--1 { background: #7a120b; color: #fff; }
.sz-pub-step--2 { background: var(--sz-brand-700); color: #fff; }
.sz-pub-step--3 { background: var(--sz-brand-300); color: var(--sz-ink); }
.sz-pub-step--1 h3, .sz-pub-step--2 h3 { color: #fff; }

.sz-pub-prices { display: grid; gap: 0.5rem; margin-top: 2rem; align-items: end; }
.sz-pub-price { display: flex; flex-direction: column; border-radius: var(--sz-radius-md); overflow: hidden; background: var(--sz-surface); }
.sz-pub-price__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.sz-pub-price h3 { margin: 0; font-size: var(--sz-text-xl); }
.sz-pub-price__amount { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-3xl); letter-spacing: -0.03em; line-height: 1; }
.sz-pub-price p { margin: 0; font-size: var(--sz-text-base); }
.sz-pub-price__go {
  min-height: 4rem; display: flex; align-items: center; padding-inline: 1.5rem; background: var(--sz-cream-300); color: var(--sz-ink);
  font-weight: 500; text-decoration: none; font-size: var(--sz-text-base);
}
.sz-pub-price--1 { }
.sz-pub-price--2 { background: var(--sz-brand-300); }
.sz-pub-price--2 .sz-pub-price__go { background: #efb0aa; }
.sz-pub-price--3 { background: var(--sz-brand-700); color: #fff; }
.sz-pub-price--3 h3, .sz-pub-price--3 .sz-pub-price__amount { color: #fff; }
.sz-pub-price--3 .sz-pub-price__go { background: var(--sz-brand-500); color: #fff; }
.sz-pub-price--4 { background: var(--sz-ink); color: #fff; }
.sz-pub-price--4 h3, .sz-pub-price--4 .sz-pub-price__amount { color: #fff; }
.sz-pub-price--4 .sz-pub-price__go { background: #2a2a2a; color: #fff; }
.sz-pub-prices__more { margin-top: 1.25rem; font-size: var(--sz-text-base); max-width: 52ch; }
.sz-pub-prices__more a { display: inline-flex; align-items: center; min-height: var(--sz-touch); color: var(--sz-ink); font-weight: 500; }

.sz-pub-about {
  margin: clamp(3rem, 8vw, 6rem) max(var(--sz-pub-gutter), calc((100% - var(--sz-pub-max)) / 2 + var(--sz-pub-gutter))) 0; background: var(--sz-ink); color: #fff; border-radius: var(--sz-radius-md);
  padding: clamp(1.75rem, 5vw, 3.5rem); display: grid; gap: 2rem; overflow: hidden;
}
.sz-pub-about h2 { margin: 0; font-size: var(--sz-text-2xl); color: #fff; max-width: 16ch; }
.sz-pub-about__blocks { display: grid; gap: 1.75rem; align-content: start; }
.sz-pub-about h3 { margin: 0 0 0.5rem; font-size: var(--sz-text-xl); color: #fff; }
.sz-pub-about p { margin: 0; font-size: var(--sz-text-base); color: #e6e6e6; max-width: 36ch; }
.sz-pub-about a { color: #fff; }
.sz-pub-photo {
  display: block; width: min(78vw, 22rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  margin: 0.5rem 0 -4rem; background: #2a2a2a;
}
/* Sin foto (static/img/public/cocina.jpg) el panel cierra con su propio margen. */
.sz-pub-about--no-photo { padding-bottom: clamp(1.75rem, 5vw, 3.5rem); }

.sz-pub-coupon {
  --notch: 28px;
  position: relative; max-width: var(--sz-pub-max); margin: clamp(3rem, 8vw, 6rem) auto 0; padding: 0 var(--sz-pub-gutter);
}
.sz-pub-coupon__card {
  position: relative; background: var(--sz-brand-700); color: #fff; border-radius: var(--sz-radius-md);
  display: grid; gap: 1.75rem; padding: 2rem 1.5rem 2.5rem;
}
.sz-pub-coupon__card::before, .sz-pub-coupon__card::after {
  content: ""; position: absolute; top: 56%; width: var(--notch); height: var(--notch); border-radius: 50%; background: var(--sz-canvas); transform: translateY(-50%);
}
.sz-pub-coupon__card::before { left: calc(var(--notch) / -2); }
.sz-pub-coupon__card::after { right: calc(var(--notch) / -2); }
.sz-pub-coupon__top { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 1.75rem; border-bottom: 5px dotted var(--sz-canvas); }
.sz-pub-coupon h2 { margin: 0; font-size: var(--sz-text-2xl); color: #fff; }
.sz-pub-coupon p { margin: 0; font-size: var(--sz-text-base); max-width: 40ch; }
.sz-pub-coupon a:not(.sz-btn) { color: #fff; font-weight: 500; }
.sz-pub-coupon__phone { font-family: var(--sz-font-display); font-weight: 300; font-size: var(--sz-text-2xl); letter-spacing: -0.02em; text-decoration: none; }
.sz-pub-coupon__actions { display: grid; gap: 0.625rem; }
body.sz-public .sz-pub-coupon .sz-btn--primary { background: var(--sz-ink); color: #fff; }
body.sz-public .sz-pub-coupon .sz-btn--secondary { background: #8f1710; color: #fff; }
body.sz-public .sz-pub-coupon .sz-btn { --sz-btn-h: 3.5rem; }

/* Tableta vertical (744 px): inicio en dos zonas, disco a la derecha y precios en cuadrícula de 2. */
@media (min-width: 744px) {
  .sz-pub-brand svg { width: 2.75rem; height: 2.75rem; }
  .sz-pub-header__link { padding-inline: 20px; }
  body.sz-public { --sz-brand-size: 1.5rem; --sz-text-display: clamp(3.5rem, 11vw, 7.5rem); }
  .sz-pub-hero { padding-top: clamp(1.5rem, 5vw, 4rem); }
  .sz-pub-hero__disc { right: -8vw; top: 50%; width: min(34rem, 54vw); transform: translateY(-50%); }
  @supports (height: 100svh) {
    body.sz-public { --sz-text-display: clamp(3.5rem, min(11vw, 14svh), 7.5rem); }
    .sz-pub-hero { padding-top: clamp(1.5rem, 5svh, 4rem); }
    .sz-pub-hero__disc { width: min(34rem, 54vw, 80svh); }
  }
  .sz-pub-hero__disc svg { width: 46%; }
  .sz-pub-hero__copy { max-width: 24rem; }
  .sz-pub-today__list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .sz-pub-steps { grid-template-columns: repeat(3, 1fr); }
  .sz-pub-step { min-height: 15rem; }
  .sz-pub-prices { grid-template-columns: repeat(2, 1fr); }
  .sz-pub-price { min-height: 16rem; }
  .sz-pub-about { grid-template-columns: 1.1fr 1fr; padding-bottom: 0; min-height: 32rem; }
  .sz-pub-about__blocks { gap: 1.75rem; padding-top: 0.5rem; }
  .sz-pub-photo { grid-column: 1; margin: 0 0 -4rem; width: min(100%, 20rem); }
  .sz-pub-about--no-photo { min-height: 0; padding-bottom: clamp(1.75rem, 5vw, 3.5rem); }
  .sz-pub-coupon__card { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; padding: 2.5rem; }
  .sz-pub-coupon__card::before, .sz-pub-coupon__card::after { display: none; }
  .sz-pub-coupon__top { border-bottom: 0; border-right: 5px dotted var(--sz-canvas); padding: 0 2.5rem 0 0; }
}
/* Tableta horizontal y escritorio (1000 px): hero amplio, precios escalonados en 4 columnas. */
@media (min-width: 1000px) {
  .sz-pub-hero__disc { right: -9vw; width: min(40rem, 56vw); }
  @supports (height: 100svh) {
    .sz-pub-hero { min-height: min(56rem, var(--sz-hero-h)); }
    .sz-pub-hero__disc { width: min(40rem, 56vw, 80svh); }
  }
  .sz-pub-hero__copy { max-width: 30rem; }
  .sz-pub-today__list { column-gap: 4rem; }
  .sz-pub-step { min-height: 18rem; }
  .sz-pub-prices { grid-template-columns: repeat(4, 1fr); }
  .sz-pub-price { min-height: 0; }
  .sz-pub-price--1 { min-height: 17rem; }
  .sz-pub-price--2 { min-height: 20rem; }
  .sz-pub-price--3 { min-height: 23rem; }
  .sz-pub-price--4 { min-height: 26rem; }
  .sz-pub-about { min-height: 34rem; }
  .sz-pub-about--no-photo { min-height: 0; }
  .sz-pub-about__blocks { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .sz-pub-photo { width: 24rem; margin-bottom: -5rem; }
  .sz-pub-coupon__card { gap: 3rem; padding: 3rem; }
  .sz-pub-coupon__top { padding-right: 3rem; }
}
/* Escritorio ancho (1280 px): el disco ya deja sitio a un texto más largo. */
@media (min-width: 1280px) {
  .sz-pub-hero__copy { max-width: 36rem; }
}

/* ---------------------------------------------------------------------- */
/* Botón flotante «Ordenar ahora» (inicio y menú, solo con pedidos web abiertos) */
/* ---------------------------------------------------------------------- */

.sz-pub-fab {
  position: fixed; z-index: 1020; left: 0; right: 0; bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; justify-content: center; padding-inline: var(--sz-pub-gutter); pointer-events: none;
  transition: opacity 0.18s var(--sz-ease-out), transform 0.18s var(--sz-ease-out);
}
/* public.js lo esconde mientras se ve un botón de pedir de la propia página; sin JavaScript queda visible. */
.sz-pub-fab[data-fab-state="hidden"] { opacity: 0; transform: translateY(0.5rem); visibility: hidden; }
/* El borde blanco lo separa de los paneles rojos y negros que pasan por detrás. */
body.sz-public .sz-pub-fab__link {
  pointer-events: auto; width: min(100%, 22rem); border: 3px solid #fff; --sz-btn-h: 3.5rem;
}
body.sz-public .sz-pub-fab__link:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
/* El pie deja sitio para que el botón no tape su último texto. */
body.sz-pub-home .sz-pub-footer__inner, body.sz-pub-menu .sz-pub-footer__inner { padding-bottom: 6.5rem; }
@media (min-width: 744px) {
  .sz-pub-fab { justify-content: flex-end; }
  body.sz-public .sz-pub-fab__link { width: auto; min-width: 15rem; }
}

/* ---------------------------------------------------------------------- */
/* Horizontal con poco alto (teléfono de lado): el hero es una franja       */
/* ---------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
  body.sz-public { --sz-text-display: clamp(2.25rem, 13svh, 3.5rem); }
  .sz-pub-hero { min-height: 0; padding: 1rem var(--sz-pub-edge); justify-content: center; }
  .sz-pub-hero__copy { max-width: none; gap: 0.5rem; }
  body.sz-public .sz-pub-hero h1.sz-logotype { white-space: nowrap; margin: 0; }
  .sz-pub-hero__text { display: none; }
  .sz-pub-hero__actions { flex-direction: row; max-width: 28rem; margin-top: 0.25rem; }
  .sz-pub-hero__actions .sz-btn { width: auto; flex: 1 1 0; }
  .sz-pub-hero__disc { width: min(34rem, 54vw, 120svh); }
}