/* ═══════════════════════════════════════════════════════════════════════════
   ComeCerca — Panel del restaurante, panel de administración y página PRO
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera del panel ───────────────────────────────────────────────────── */

.panel-head {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-warm);
}

.panel-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.panel-head__greeting {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.panel-head__sub { color: var(--color-ink-soft); font-size: var(--text-lg); }

.panel-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.panel-switch .select { min-width: 240px; }

.panel-head__account {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.panel-session {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.panel-session__user {
  font-weight: 600;
  color: var(--color-ink-soft);
}

/* ── Acceso al panel ──────────────────────────────────────────────────────── */

.login-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--space-7);
}

.login-card__title { font-size: var(--text-xl); }
.login-card__intro { color: var(--color-ink-soft); font-size: var(--text-sm); }
.login-card .note { margin-top: var(--space-2); }

/* ── Pestañas del panel ───────────────────────────────────────────────────── */

.panel-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.panel-tabs::-webkit-scrollbar { display: none; }

.panel-tabs__item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.panel-tabs__item:hover { color: var(--color-ink); }

.panel-tabs__item.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── Estado de la ficha ───────────────────────────────────────────────────── */

.status-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
}

/* Anillo de progreso dibujado solo con CSS */
.status-ring {
  --value: 0;
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--ring-color, var(--color-accent)) calc(var(--value) * 1%), var(--color-bg-sunk) 0);
  flex-shrink: 0;
}

.status-ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-surface);
}

.status-ring--warning { --ring-color: var(--color-warning); }
.status-ring--stale { --ring-color: var(--color-border-strong); }

.status-ring__value {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
}

.status-ring__label {
  position: relative;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.status-card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.status-card__text { color: var(--color-ink-soft); max-width: 48ch; }

.status-card__factors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.factor-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  background: var(--color-bg-sunk);
  color: var(--color-ink-soft);
}

.factor-pill--ok { background: var(--state-verified-bg); color: var(--state-verified); }
.factor-pill--low { background: var(--state-outdated-bg); color: var(--state-outdated); }

/* Semáforo por bloques de información: horarios, precios, carta, servicios. */
.status-sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.status-sections__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  background: var(--color-bg-sunk);
  color: var(--color-ink-soft);
}

.status-sections__mark { font-weight: 700; }
.status-sections__state { font-size: var(--text-xs); color: var(--color-ink-muted); }

.status-sections__item.is-ok { background: var(--state-verified-bg); color: var(--state-verified); }
.status-sections__item.is-ok .status-sections__state { color: inherit; opacity: 0.8; }
.status-sections__item.is-partial,
.status-sections__item.is-outdated { background: var(--state-pending-bg); color: #7A5A0F; }
.status-sections__item.is-partial .status-sections__state,
.status-sections__item.is-outdated .status-sections__state { color: inherit; opacity: 0.8; }

.status-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Tareas pendientes ────────────────────────────────────────────────────── */

.tasks { display: grid; gap: var(--space-3); }

.task {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.task:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }

.task__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: var(--color-bg-sunk);
}

.task__body { flex: 1; min-width: 0; }
.task__title { font-weight: 600; font-size: var(--text-md); }
.task__question { font-size: var(--text-base); color: var(--color-ink-soft); }
.task__time { font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: var(--space-1); }

.task__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.task.is-done { opacity: 0.6; border-color: var(--color-accent); }

/* Pregunta de precio con opciones directas */
.price-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.price-choice__option {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.price-choice__option:hover,
.price-choice__option[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

/* ── Confirmación global ──────────────────────────────────────────────────── */

.confirm-all {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: var(--color-ink-inverse);
}

.confirm-all h2 { font-size: var(--text-2xl); }
.confirm-all p { color: color-mix(in srgb, var(--color-ink-inverse) 76%, transparent); }

.confirm-all__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.confirm-all__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  font-size: var(--text-sm);
}

/* ── Rejilla del panel ────────────────────────────────────────────────────── */

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.panel-block + .panel-block { margin-top: var(--space-8); }

.panel-block__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.panel-block__count {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-secondary-strong);
}

.panel-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.panel-block__head .panel-block__title { margin-bottom: 0; }

/* ── Carta editable ───────────────────────────────────────────────────────── */

.dish-group + .dish-group { margin-top: var(--space-6); }

.dish-group__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.dish-list { display: grid; }

.dish-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.dish-row:last-child { border-bottom: none; }
.dish-row.is-off { opacity: 0.6; }

.dish-row__thumb-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}

.dish-row__thumb {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunk);
}

.dish-row__thumb--empty {
  display: block;
  border: 1px dashed var(--color-border);
}

.dish-row__body { min-width: 0; }
.dish-row__name { font-weight: 600; font-size: var(--text-md); }

.dish-row__photo-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.dish-row__off {
  margin-left: var(--space-2);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--color-bg-sunk);
  color: var(--color-ink-muted);
}

.dish-row__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-block: var(--space-1) var(--space-2);
}

.dish-row__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dish-row__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Galería del panel ────────────────────────────────────────────────────── */

.photo-dropzone {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunk);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.photo-dropzone:hover,
.photo-dropzone.is-drag,
.photo-dropzone:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  outline: none;
}

.photo-dropzone__title {
  margin: 0;
  font-weight: 600;
}

.photo-confirm {
  display: grid;
  gap: var(--space-4);
}

.photo-confirm__img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--radius-md);
  background: var(--color-bg-sunk);
}

.photo-confirm__file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  word-break: break-all;
  margin: 0;
}

.photo-url-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.photo-card {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.photo-card.is-cover {
  border-color: var(--color-primary);
}

.photo-card__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}

.photo-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunk);
}

.photo-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
}

.photo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.photo-preview {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--radius-md);
  background: var(--color-bg-sunk);
}

.dish-photo-hint { margin: 0; }

/* ── Editor de horarios ───────────────────────────────────────────────────── */

.hours-editor { display: grid; gap: var(--space-1); margin-top: var(--space-5); }

.hours-row {
  display: grid;
  grid-template-columns: 7.5rem 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.hours-row__day { font-weight: 600; font-size: var(--text-base); }

.hours-row__times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.hours-row__shift {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-muted);
}

/* Un campo de hora no necesita el ancho de un campo de texto: en móvil ese
   exceso es justo lo que provoca el desbordamiento horizontal. */
.input--time {
  width: auto;
  min-width: 0;
  padding-inline: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.hours-editor__actions { margin-top: var(--space-5); }

/* ── Casillas y etiquetas seleccionables ──────────────────────────────────── */

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  cursor: pointer;
}

.chip-group { border: none; padding: 0; }
.chip-group + .chip-group { margin-top: var(--space-2); }

.chip-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.chip-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.chip-check:hover { border-color: var(--color-border-strong); }

.chip-check:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.chip-check .checkbox input,
.chip-check input { width: 16px; height: 16px; margin: 0; }

/* ── Reportes de usuarios ─────────────────────────────────────────────────── */

.report {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--state-review);
  background: var(--state-review-bg);
}

.report + .report { margin-top: var(--space-3); }
.report__type { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #8A4A1C; }
.report__text { margin-block: var(--space-2); font-size: var(--text-base); }

.report__values {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
}

.report__values del { color: var(--color-ink-muted); }
.report__values strong { color: var(--color-ink); }
.report__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Estadísticas ─────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.stat {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-primary);
}

.stat__label { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-1); }

.demo-warning {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--state-pending-bg);
  color: #7A5A0F;
  font-size: var(--text-sm);
}

/* ── Notificaciones ───────────────────────────────────────────────────────── */

.notification {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.notification + .notification { margin-top: var(--space-2); }
.notification__title { font-weight: 600; font-size: var(--text-base); }
.notification__body { font-size: var(--text-sm); color: var(--color-ink-soft); }
.notification.is-unread { border-left: 3px solid var(--color-secondary); }

/* ── Tablas del panel de administración ──────────────────────────────────── */

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.metric {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-xs);
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
}

.metric__label { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-2); }
.metric--alert .metric__value { color: var(--color-danger); }
.metric--warning .metric__value { color: var(--color-warning); }
.metric--ok .metric__value { color: var(--color-accent-strong); }

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}

.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.tab:hover { color: var(--color-ink); }
.tab[aria-selected='true'] { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }

.table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-surface-warm);
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-warm); }
.table__num { font-variant-numeric: tabular-nums; text-align: right; }
.table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

.admin-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-soft);
  font-size: var(--text-sm);
}

.admin-key .input { max-width: 280px; }

.admin-onboard-wrap {
  display: grid;
  gap: var(--space-8);
  max-width: 40rem;
}

.admin-onboard {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.admin-onboard--transfer {
  background: var(--color-surface-warm, var(--color-surface));
}

.admin-onboard__sub {
  margin: var(--space-2) 0 0;
  font-size: var(--text-md);
}

.admin-onboard__field {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
}

.admin-onboard__field .input,
.admin-onboard__field .select {
  font-weight: 400;
  width: 100%;
}

.admin-onboard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.admin-onboard__result {
  margin-top: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-tint, rgba(14, 76, 92, 0.08));
  border: 1px solid var(--color-border-subtle);
  display: grid;
  gap: var(--space-3);
  word-break: break-all;
}

.admin-onboard__ok {
  margin: 0;
  font-weight: 600;
}

.job-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.job {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  min-width: 220px;
  flex: 1;
}

.job__name { font-weight: 600; font-size: var(--text-base); }
.job__desc { font-size: var(--text-sm); color: var(--color-ink-muted); flex: 1; }

/* ── Página para restaurantes (PRO) ───────────────────────────────────────── */

.pro-hero {
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(48rem 30rem at 85% 0%, rgba(226, 96, 63, 0.1), transparent 60%),
    var(--color-bg);
}

.pro-hero h1 {
  font-size: var(--text-4xl);
  line-height: 1.02;
  max-width: 16ch;
  margin-bottom: var(--space-5);
}

.pro-hero h1 span { display: block; }
.pro-hero h1 span:last-child { color: var(--color-secondary); }

.pro-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.benefit {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.benefit__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-primary-tint);
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

.benefit h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.benefit p { color: var(--color-ink-soft); font-size: var(--text-base); }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.plan--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.plan__flag {
  position: absolute;
  top: -12px;
  left: clamp(1.75rem, 3vw, 2.5rem);
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
}

.plan__name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.plan__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
}

.plan__price small { font-size: var(--text-base); color: var(--color-ink-muted); font-weight: 400; }
.plan__pitch { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* El tercer plan también avisa de que no existe todavía, sin robar el foco. */
.plan__flag--quiet {
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border);
}
.plan__features { display: grid; gap: var(--space-3); font-size: var(--text-base); }

.plan__features li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-ink-soft);
}

.plan__features li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.plan__features li.is-off { opacity: 0.5; }
.plan__features li.is-off::before { content: '—'; color: var(--color-ink-muted); }

.founder-box {
  display: grid;
  gap: var(--space-4);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, #7A3322, var(--color-secondary));
  color: #fff;
  text-align: center;
  justify-items: center;
}

.founder-box h2 { font-size: var(--text-2xl); }
.founder-box p { max-width: 52ch; color: rgba(255, 255, 255, 0.85); }

.founder-box__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--text-sm);
  font-weight: 600;
}