/* ==========================================================================
   LEGACY-UI SKIN
   Reviste visualmente el checkout/contacto/diagnóstico de paladar (portados
   tal cual de index.html bajo .legacy-ui) para que combinen con la estética
   editorial de redesign.css en vez de verse como el sitio anterior pegado
   encima. No toca HTML, IDs ni scripts/main.js — solo presentación.
   Se carga DESPUÉS de main-scoped.css para ganar el cascade (misma
   especificidad, orden de carga posterior).
   ========================================================================== */

/* Main-scoped.css fuerza min-height:100vh en cada .legacy-ui (por el mapeo
   body/html -> .legacy-ui del scoping) — aquí son paneles pequeños dentro
   del hero/catálogo, no páginas completas. */
.legacy-ui {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
}

/* .rd-hero-sub es un grid de 2 columnas (lede | botones). El diagnóstico de
   paladar es el tercer hijo, así que sin esto cae en una fila nueva pero
   solo ocupa la primera columna — mitad de la pantalla con la otra mitad
   vacía. Ocupa siempre las dos columnas; el centrado/ancho en reposo se
   resuelve DENTRO del bloque (ver .paladar-diagnostico más abajo), no
   intentando que se perciba como continuación de la columna de arriba —
   esa relación no se notaba lo suficiente y seguía leyéndose como "pegado
   a la izquierda sin razón". */
.rd-hero-sub > .legacy-ui {
  grid-column: 1 / -1;
}

/* El encabezado editorial que precede a cada bloque (✦ / Tu pedido, ✦ /
   Hablemos) usa .rd-container (max-width 1280px, padding var(--rd-edge)).
   .compra-container/.contacto-contenido traían su propio ancho/padding del
   sitio anterior (1200px fijo, 1rem) — se igualan aquí para que el borde
   izquierdo del formulario quede exactamente debajo del título, no corrido. */
.legacy-ui .compra-container,
.legacy-ui .contacto-contenido {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--rd-edge) 0 !important;
  text-align: left !important;
}

/* .contacto (la <section> que envuelve el form) todavía traía su propio
   fondo café oscuro (#2c1810) — otra isla de color distinta del negro
   #0A0A0A del resto de la página. */
.legacy-ui .contacto {
  background: transparent !important;
  padding: clamp(1.6rem, 4vw, 3rem) 0 !important;
}

/* Reset general: sin redondeos, sombras, blur ni degradados heredados del
   sitio anterior — el rediseño es plano, tipográfico, de filete fino. */
.legacy-ui,
.legacy-ui * {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
}

.legacy-ui {
  font-family: var(--rd-mono);
}

.legacy-ui h2, .legacy-ui h3, .legacy-ui h4 {
  font-family: var(--rd-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
}
.legacy-ui h2 { font-size: var(--rd-step-2) !important; }
.legacy-ui h3 { font-size: var(--rd-step-1) !important; font-weight: 500 !important; }
.legacy-ui h4 { font-size: var(--rd-step-0) !important; }

.legacy-ui label {
  font-family: var(--rd-mono) !important;
  font-size: var(--rd-step--1) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500 !important;
}

/* ---- Marco general: UN solo filete envolvente, no tarjetas anidadas.
   El resto del sitio no apila cajas — usa papel + regla fina + tipografía.
   Aquí se hace lo mismo: el formulario completo vive en un marco; adentro,
   cada parte se separa con reglas horizontales, no con más cajas. ---- */
.legacy-ui .compra-formulario,
.legacy-ui .contacto-formulario {
  background: transparent !important;
  border: none !important;
  border-top: 2px solid var(--rd-ink) !important;
  color: var(--rd-ink);
}

.legacy-ui .compra-formulario-contenido { padding: clamp(1.6rem, 4vw, 3rem) 0 !important; }

/* Las "cajas" del formulario anterior (pasos, tarjetas de producto, resumen,
   validación) pierden su fondo/borde de tarjeta; se convierten en bloques
   separados por una regla horizontal fina, como el resto de la página. */
.legacy-ui .form-step,
.legacy-ui .order-preview,
.legacy-ui .shipping-progress-bar,
.legacy-ui .packs-seleccion,
.legacy-ui .validation-summary,
.legacy-ui .promo-discount-preview {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--rd-line) !important;
  color: var(--rd-ink);
}

/* El validador de dirección y el aviso sí conservan un marco — son
   confirmaciones puntuales, no el cuerpo del formulario. El diagnóstico de
   paladar NO (ver bloque dedicado más abajo): es parte del flujo del hero,
   no un widget aparte, así que no debe sentirse como una caja ajena. */
.legacy-ui .validation-container,
.legacy-ui .validation-notice {
  background: var(--rd-paper-2) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink);
}

.legacy-ui .compra-formulario h2,
.legacy-ui .compra-formulario h3,
.legacy-ui .contacto h2 {
  color: var(--rd-ink) !important;
  text-align: left !important;
}

/* ---- Pasos del formulario: numeral editorial grande, no insignia-círculo --- */
.legacy-ui .form-step { padding-top: clamp(1.6rem, 3vw, 2.4rem) !important; }
.legacy-ui .form-step:first-child { border-top: none !important; padding-top: 0 !important; }
.legacy-ui .form-step-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 0 1rem !important;
  align-items: baseline !important;
  gap: 1rem !important;
}
.legacy-ui .form-step-header h3 {
  color: var(--rd-ink) !important;
  font-size: var(--rd-step-1) !important;
}
.legacy-ui .form-step-number {
  background: transparent !important;
  color: var(--rd-vermillion) !important;
  font-family: var(--rd-display) !important;
  font-size: var(--rd-step-1) !important;
  font-weight: 600 !important;
  width: auto !important;
  height: auto !important;
}
.legacy-ui .form-step-number::after { content: '.'; }

/* ---- Inputs / selects / textareas ----
   La primera versión era solo un filete inferior, sin fondo ni caja — se
   veía elegante pero el formulario "se perdía": no se leía como algo
   llenable. Ahora llevan una caja real (fondo + contorno completo) para
   que se reconozcan de inmediato como campos de formulario, y quedan más
   compactos (menos padding/gap) para que de verdad se sienta como un
   formulario de envío, no como prosa editorial. */
.legacy-ui input[type="text"],
.legacy-ui input[type="email"],
.legacy-ui input[type="tel"],
.legacy-ui input[type="number"],
.legacy-ui textarea,
.legacy-ui select:not(.qty-select-hidden) {
  background: var(--rd-paper-2) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  padding: 0.65rem 0.8rem !important;
  width: 100%;
}
.legacy-ui input:focus,
.legacy-ui textarea:focus,
.legacy-ui select:focus {
  outline: none !important;
  border-color: var(--rd-vermillion) !important;
  background: var(--rd-paper) !important;
}
.legacy-ui input::placeholder,
.legacy-ui textarea::placeholder { color: var(--rd-ink-soft) !important; opacity: 1; }

/* Más compacto: menos aire entre campos y menos margen bajo cada label */
.legacy-ui .form-group { margin-bottom: 0.9rem !important; }
.legacy-ui .compra-formulario .form-group { margin-bottom: 0.7rem !important; }
.legacy-ui .compra-formulario .form-grid { gap: 0.8rem !important; margin-bottom: 1rem !important; }
.legacy-ui .contacto-formulario .form-group { margin-bottom: 1rem !important; }
.legacy-ui label { margin-bottom: 0.35rem !important; }

/* Validación de dirección: inputs con estado (válido/inválido) siguen con
   acento semántico, pero sobre fondo oscuro, no blanco */
.legacy-ui .validation-field-group input {
  background: var(--rd-paper-2) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
  padding: 0.65rem 0.8rem !important;
}
.legacy-ui .validation-field-group input[data-status="valid"] { border-color: #4a9c5d !important; }
.legacy-ui .validation-field-group input[data-status="invalid"] { border-color: #c0564f !important; }
.legacy-ui .validation-field-group label,
.legacy-ui .validation-header p,
.legacy-ui .notice-text,
.legacy-ui .summary-content,
.legacy-ui .summary-address {
  color: var(--rd-ink) !important;
  opacity: 1 !important;
}
.legacy-ui .summary-title,
.legacy-ui .summary-placeholder,
.legacy-ui .form-help {
  color: var(--rd-ink-soft) !important;
}
.legacy-ui .validation-header h4 {
  color: var(--rd-vermillion) !important;
  font-family: var(--rd-display) !important;
}
.legacy-ui .validation-container::before { display: none !important; }

/* ---- Botones: bloque sólido dorado, mono, mayúsculas, sin gradiente/pill --- */
.legacy-ui button,
.legacy-ui .toggle-compra-btn,
.legacy-ui .cta-button,
.legacy-ui .cta-primary,
.legacy-ui #submitBtn,
.legacy-ui #enviarBtn,
.legacy-ui #apply-promo-btn {
  font-family: var(--rd-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  font-size: var(--rd-step--1) !important;
  background: var(--rd-vermillion) !important;
  color: var(--rd-paper) !important;
  border: 2px solid var(--rd-vermillion) !important;
  transition: background 0.2s, color 0.2s;
}
.legacy-ui button:hover:not(:disabled),
.legacy-ui .toggle-compra-btn:hover,
.legacy-ui .cta-button:hover,
.legacy-ui .cta-primary:hover {
  background: transparent !important;
  color: var(--rd-vermillion) !important;
}
.legacy-ui button:disabled,
.legacy-ui .btn-locked {
  background: transparent !important;
  color: var(--rd-ink-soft) !important;
  border: 2px solid var(--rd-line) !important;
}

/* El botón "Realizar Pedido" venía centrado y de ancho fijo (300px), como un
   widget flotante suelto en medio de la página. Ahora se alinea a la
   izquierda, bajo el encabezado "✦ / Tu pedido" que lo precede, como
   cualquier otro CTA del rediseño. */
.legacy-ui .toggle-compra-btn {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0.95rem 1.8rem !important;
}

/* Confirmar/cancelar dirección: mantienen acento semántico (verde/rojo) pero
   en línea, no gradiente relleno */
.legacy-ui .btn-confirm-address {
  background: transparent !important;
  color: #4a9c5d !important;
  border: 2px solid #4a9c5d !important;
}
.legacy-ui .btn-confirm-address:hover:not(:disabled) { background: #4a9c5d !important; color: var(--rd-paper) !important; }
.legacy-ui .btn-cancel-validation {
  background: transparent !important;
  color: #c0564f !important;
  border: 2px solid #c0564f !important;
}
.legacy-ui .btn-cancel-validation:hover { background: #c0564f !important; color: var(--rd-paper) !important; }

/* ---- Productos / steppers de cantidad: filas de índice, no tarjetas ----
   Mismo lenguaje que .rd-index-item del catálogo: nombre grande en Fraunces,
   regla fina entre filas, precio también en serif, sin caja ni fondo. */
.legacy-ui .producto-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--rd-line) !important;
  border-radius: 0 !important;
  padding: 1rem 0 !important;
  gap: 1rem !important;
}
.legacy-ui .producto-card:hover,
.legacy-ui .producto-card:focus-within {
  border-bottom-color: var(--rd-vermillion) !important;
  background: transparent !important;
}
.legacy-ui .producto-thumb { filter: grayscale(0.15); }
.legacy-ui .producto-info label {
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
  font-size: var(--rd-step-1) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
.legacy-ui .producto-precio {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-mono) !important;
  font-size: var(--rd-step--1) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* En móvil, el nombre en Fraunces a var(--rd-step-1) partía en 3-4 líneas
   angostas junto al thumb (56px) y el stepper (~110px) — se achica la
   miniatura y el tamaño de letra para que quepa en 1-2 líneas. */
@media (max-width: 600px) {
  .legacy-ui .producto-thumb { width: 40px !important; height: 40px !important; }
  .legacy-ui .producto-info label { font-size: var(--rd-step-0) !important; }
  .legacy-ui .producto-card { gap: 0.7rem !important; }
}
.legacy-ui .qty-stepper { background: transparent !important; border: 1px solid var(--rd-line) !important; }
.legacy-ui .qty-btn { background: transparent !important; color: var(--rd-vermillion) !important; }
.legacy-ui .qty-btn:hover { background: var(--rd-paper) !important; }
.legacy-ui .qty-value { color: var(--rd-ink) !important; font-family: var(--rd-mono) !important; }

.legacy-ui .productos-categoria {
  font-family: var(--rd-mono) !important;
  font-size: var(--rd-step--1) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rd-vermillion) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.legacy-ui .productos-categoria::before {
  content: "";
  width: clamp(20px, 4vw, 40px);
  height: 1px;
  background: var(--rd-vermillion);
}

.legacy-ui .pack-option.destacado {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--rd-vermillion) !important;
}
.legacy-ui .ahorra-tag,
.legacy-ui .form-badge {
  background: transparent !important;
  color: var(--rd-vermillion) !important;
  border: 1px solid var(--rd-vermillion) !important;
  font-family: var(--rd-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Barra de envío / preview de pedido ---- */
.legacy-ui .progress-track { background: transparent !important; border-bottom: 1px solid var(--rd-line) !important; height: 2px !important; }
.legacy-ui .progress-fill { background: var(--rd-vermillion) !important; }
.legacy-ui .order-preview h4 {
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  font-size: var(--rd-step--1) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 500 !important;
}
.legacy-ui .order-subtotal {
  border-top: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
  font-size: var(--rd-step-1) !important;
}

/* ---- Código de promo ---- */
.legacy-ui .promo-code-input-group input {
  background: var(--rd-paper-2) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
}
.legacy-ui .discount-label,
.legacy-ui .discount-amount { color: #4a9c5d !important; }
.legacy-ui .promo-code-message.success { color: #4a9c5d !important; }
.legacy-ui .promo-code-message.error { color: #c0564f !important; }

/* ---- Contacto ---- */
.legacy-ui .contacto-contenido { text-align: left !important; max-width: none !important; }
.legacy-ui .contacto-intro { color: var(--rd-ink-soft) !important; }
.legacy-ui .character-counter { color: var(--rd-ink-soft) !important; }

/* ---- Diagnóstico de paladar ----
   Sin caja: es parte del flujo del hero, separado solo por un filete
   superior, igual que cualquier otra transición entre bloques del sitio.

   En reposo: se centra como un elemento propio, con ancho de lectura
   cómodo — un bloque centrado se lee como deliberado sin importar la
   asimetría de las columnas arriba (lede | botones); intentar que se
   perciba como "continuación" de esa columna no funcionó, seguía
   leyéndose como pegado a la izquierda sin razón.

   Al revelar el resultado SÍ tiene sentido usar el ancho completo: se
   parte en dos columnas, control | resultado. */
.legacy-ui .paladar-diagnostico {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--rd-line) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 480px) !important;
  justify-content: center !important;
  gap: var(--rd-gap) !important;
  align-items: start !important;
}
.legacy-ui .paladar-diagnostico:has(#paladar-resultado:not([hidden])) {
  grid-template-columns: 1fr 1fr !important;
  justify-content: stretch !important;
}
.legacy-ui .paladar-control {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.legacy-ui .paladar-pregunta {
  font-family: var(--rd-display) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: var(--rd-step-0) !important;
  color: var(--rd-ink) !important;
  margin: 0 !important;
}
.legacy-ui .paladar-slider {
  background: var(--rd-line) !important;
  height: 1px !important;
  margin: 0;
}
.legacy-ui .paladar-slider::-webkit-slider-thumb {
  background: var(--rd-vermillion) !important;
  border: none !important;
  width: 13px !important;
  height: 13px !important;
}
.legacy-ui .paladar-slider::-moz-range-thumb {
  background: var(--rd-vermillion) !important;
  border: none !important;
  width: 13px !important;
  height: 13px !important;
}
.legacy-ui .paladar-labels {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-mono) !important;
  font-size: var(--rd-step--1) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 !important;
}
.legacy-ui .paladar-resultado {
  border-top: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 1px solid var(--rd-line);
  padding-left: clamp(1.5rem, 4vw, 3rem) !important;
}
/* Medidor de intensidad: reemplaza la señal de "cantidad" que daban los ☕
   repetidos por algo más editorial — una línea que se llena según el
   valor del slider (ver script al final del body). */
.legacy-ui .paladar-gauge {
  height: 2px;
  background: var(--rd-line);
  margin: 0 0 1.1rem;
  overflow: hidden;
}
.legacy-ui .paladar-gauge-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--rd-vermillion);
  transition: width 0.3s ease;
}
.legacy-ui .paladar-perfil {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-mono) !important;
  font-size: var(--rd-step--1) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1.3rem 0 !important;
}
.legacy-ui .paladar-perfil strong {
  display: block !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
  font-style: italic;
  font-weight: 600 !important;
  font-size: var(--rd-step-2) !important;
  line-height: 1.05 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.7rem !important;
}

@media (max-width: 860px) {
  /* :has(#paladar-resultado:not([hidden])) es más específico que esta regla
     sola — se repite aquí para empatar esa especificidad y así SÍ ganar en
     pantallas angostas, sin importar si el resultado ya está visible. */
  .legacy-ui .paladar-diagnostico,
  .legacy-ui .paladar-diagnostico:has(#paladar-resultado:not([hidden])) {
    grid-template-columns: 1fr !important;
  }
  .legacy-ui .paladar-resultado {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--rd-line) !important;
    padding-top: 1.3rem !important;
  }
}

/* main.css agranda el thumb a 32px en móvil para que sea fácil tocar con el
   dedo — se respeta esa intención (un thumb de 13px sería difícil de
   arrastrar en pantalla táctil), solo con una medida menos "botón" y más
   acorde al resto del slider delgado. */
@media (max-width: 480px) {
  .legacy-ui .paladar-slider::-webkit-slider-thumb { width: 22px !important; height: 22px !important; }
  .legacy-ui .paladar-slider::-moz-range-thumb { width: 22px !important; height: 22px !important; }
}

/* ---- Estados de validación de campo (checkout/contacto): se dejan los
   colores semánticos (válido/inválido), solo se homogeneiza tipografía ---- */
.legacy-ui .field-validation,
.legacy-ui .form-status,
.legacy-ui .contacto-status,
.legacy-ui .cooldown-status,
.legacy-ui #form-status {
  font-family: var(--rd-mono) !important;
  /* Vacíos, traían background-color:rgba(255,255,255,0.1) de main.css —
     se veía como una barra clara flotando debajo del botón sin mensaje. */
  background: transparent !important;
}

/* ---- Quiz "¿Cuál es tu café?" ----
   Traía fondo degradado, texto centrado, pills redondeadas con sombra —
   mismo tratamiento que el resto: sin caja, filetes finos, Fraunces
   itálica para el resultado, mono para todo lo demás. */
.legacy-ui .quiz-section {
  background: transparent !important;
  /* Mismo ancho/margen que .rd-container (el encabezado "✦ / El test" de
     arriba) — sin esto, .quiz-container (640px, sin centrar) quedaba
     pegado al borde izquierdo de la pantalla en vez de alinearse con el
     encabezado. */
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--rd-edge) 0 !important;
}
.legacy-ui .quiz-container {
  max-width: 640px !important;
  margin: 0 !important;
  text-align: left !important;
  /* redesign.css trae ".quiz-section .quiz-container{background;border}"
     de un intento de integración anterior (reusaba las clases viejas del
     index.html de antes) — se neutraliza para que quede sin caja, igual
     que el resto del formulario portado. */
  background: transparent !important;
  border: none !important;
}
.legacy-ui .quiz-intro {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-mono) !important;
  opacity: 1 !important;
  margin-bottom: 2rem !important;
}
.legacy-ui .quiz-progress-wrap {
  background: var(--rd-line) !important;
  height: 2px !important;
  margin-bottom: 2.5rem !important;
}
.legacy-ui .quiz-progress-bar { background: var(--rd-vermillion) !important; }
.legacy-ui .quiz-q-num {
  color: var(--rd-vermillion) !important;
  font-family: var(--rd-mono) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legacy-ui .quiz-q-text {
  font-family: var(--rd-display) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: var(--rd-step-1) !important;
  color: var(--rd-ink) !important;
}
.legacy-ui .quiz-options { gap: 0 !important; }
.legacy-ui .quiz-option {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  padding: 1rem 0.2rem !important;
}
.legacy-ui .quiz-option:hover {
  background: transparent !important;
  border-bottom-color: var(--rd-vermillion) !important;
  color: var(--rd-vermillion) !important;
  transform: none !important;
}
.legacy-ui .quiz-option.selected {
  background: transparent !important;
  border-bottom-color: var(--rd-vermillion) !important;
  color: var(--rd-vermillion) !important;
  font-weight: 700 !important;
}
.legacy-ui .result-title {
  font-family: var(--rd-display) !important;
  font-style: italic;
  font-weight: 600 !important;
  font-size: var(--rd-step-2) !important;
  color: var(--rd-ink) !important;
  margin-bottom: 0.9rem !important;
}
.legacy-ui .result-desc {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-mono) !important;
  opacity: 1 !important;
  /* main.css traía margin-left/right:auto (para centrarlo en el layout
     viejo, que era text-align:center) — con el contenedor ahora alineado
     a la izquierda, eso lo dejaba descentrado respecto al título/botón. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 56ch !important;
}
.legacy-ui .result-badge {
  background: transparent !important;
  border: 1px solid var(--rd-vermillion) !important;
  color: var(--rd-vermillion) !important;
  font-family: var(--rd-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500 !important;
}
.legacy-ui .quiz-restart-btn {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--rd-step--1) !important;
  background: transparent !important;
}
.legacy-ui .quiz-restart-btn:hover { color: var(--rd-vermillion) !important; }