:root {
  --bg: #0d1412;
  --bg-2: #141f1b;
  --card: #192621;
  --card-2: #21322b;
  --card-hover: #263b33;
  --line: #2b3e36;
  --line-strong: #3b5449;
  --ink: #eff7f2;
  --ink-soft: #a2b7ac;
  --ink-muted: #6f887b;
  --accent: #ffb340;
  --accent-2: #ffd27a;
  --accent-glow: rgba(255, 179, 64, 0.18);
  --teal: #35d0a4;
  --teal-glow: rgba(53, 208, 164, 0.18);
  --blue: #4ea8de;
  --red: #ff6b57;
  --radius: 18px;
  --shadow: 0 12px 32px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, #173426 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #1b2f23 0%, transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: 70px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(13, 20, 18, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.auth-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.auth-loading, .auth-visitor {
  color: var(--ink-muted);
  font: 600 12px "Inconsolata";
}
.auth-mini-btn, .text-btn {
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font: 700 13px "Outfit";
  cursor: pointer;
}
.auth-mini-btn {
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
.auth-mini-btn:hover { background: var(--card-2); }
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font: 600 12px "Inconsolata";
  cursor: pointer;
}
.account-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.account-chip img, .avatar-fallback {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #201400;
  font: 800 13px "Outfit";
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.logo {
  color: var(--accent);
  font-size: 22px;
  transform: rotate(-45deg);
  display: inline-block;
}
h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
h1::after { content: ".ar"; color: var(--accent); font-weight: 800; }

/* Main Mode Selector (Transportista vs Remitente) */
.page-nav {
  display: flex;
  gap: 6px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.page-nav[hidden], .page-btn[hidden] { display: none !important; }

.page-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: 700 14px "Outfit";
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .2s ease;
}
.page-btn:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.page-btn.is-active {
  background: var(--accent);
  color: #201400;
  box-shadow: 0 4px 14px rgba(255, 179, 64, 0.28);
}
.page-btn.is-active.mode-cargo {
  background: var(--teal);
  color: #032017;
  box-shadow: 0 4px 14px rgba(53, 208, 164, 0.28);
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Authentication and first-time profile setup */
.auth-shell, .setup-shell {
  max-width: 620px;
  margin: 7vh auto 0;
}
.auth-shell { text-align: center; }
.auth-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  color: var(--bg);
  background: var(--accent);
  border-radius: 18px;
  font-size: 30px;
  transform: rotate(45deg);
}
.auth-mark span { transform: rotate(-45deg); }
.eyebrow, .setup-kicker {
  color: var(--accent);
  font: 700 12px "Inconsolata";
  letter-spacing: 1.6px;
  margin: 0 0 10px;
}
.auth-shell h2, .setup-shell h2 {
  margin: 0;
  font-size: clamp(30px, 6vw, 48px);
  letter-spacing: -1.8px;
  line-height: 1;
}
.auth-lead, .setup-lead {
  max-width: 430px;
  margin: 15px auto 28px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}
.auth-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--card-2);
  border-radius: 12px;
  font-size: 20px;
}
.auth-card h3 { margin: 0 0 3px; font-size: 16px; }
.auth-card p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }
.text-btn { margin-top: 24px; padding: 4px; }
.text-btn:hover { color: var(--ink); text-decoration: underline; }
.auth-note {
  max-width: 380px;
  margin: 15px auto 0;
  color: var(--ink-muted);
  font: 500 11.5px "Inconsolata";
  line-height: 1.5;
}
.setup-shell { max-width: 640px; }
.setup-shell h2 { font-size: clamp(30px, 5vw, 42px); }
.setup-lead { margin: 10px 0 24px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: .15s;
}
.role-card:hover { border-color: var(--line-strong); background: var(--card-hover); }
.role-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.role-icon { font-size: 25px; }
.role-card strong { display: block; font-size: 14px; }
.role-card small { display: block; color: var(--ink-soft); font-size: 12px; line-height: 1.35; margin-top: 4px; }
.role-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: transparent;
  font-size: 13px;
}
.role-card.is-selected .role-check { color: #201400; background: var(--accent); border-color: var(--accent); }
.setup-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.field-help { display: block; margin-top: 6px; color: var(--ink-muted); font: 500 11px "Inconsolata"; }
.setup-actions { display: flex; gap: 10px; margin-top: 22px; }
.setup-actions .btn { min-width: 150px; }
.privacy-line { margin: 18px 0 0; color: var(--ink-muted); font: 500 11.5px "Inconsolata"; }

/* Section Header & Sub-Tabs */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.view-meta h2 {
  font-size: 24px;
  margin: 0 0 4px;
  letter-spacing: -.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.view-meta p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.45;
}
.view-meta p b {
  color: var(--accent-2);
  font-weight: 600;
}

.sub-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--card);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.sub-tab {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: 600 13.5px "Outfit";
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: .15s;
}
.sub-tab:hover { color: var(--ink); }
.sub-tab.is-active {
  background: var(--card-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

/* Filters bar */
.controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.loc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 12px;
  flex: 1;
  min-width: 240px;
  transition: border-color .15s;
}
.loc-search:focus-within { border-color: var(--accent); }
.loc-search span { color: var(--accent); font-weight: 700; }
.loc-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font: 500 14px "Outfit";
}
.loc-search input::placeholder { color: var(--ink-muted); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: 600 13px "Outfit";
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-active {
  background: var(--card-2);
  border-color: var(--accent);
  color: var(--accent-2);
}

/* Feed & Cards */
.feed { display: grid; gap: 14px; }

.route-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease, background-color .15s;
  position: relative;
}
.route-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--card-hover);
}
.route-card.has-direct-match {
  border-color: rgba(53, 208, 164, 0.72);
  box-shadow: 0 0 0 1px rgba(53, 208, 164, 0.12), var(--shadow);
}
.route-card.has-direct-match:hover {
  border-color: var(--teal);
}

.route-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.route-pins {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  flex-shrink: 0;
}
.pin { width: 12px; height: 12px; border-radius: 50%; }
.pin.a { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.pin.b { background: var(--teal); box-shadow: 0 0 0 4px var(--teal-glow); }
.route-line {
  width: 2px;
  height: 24px;
  background: repeating-linear-gradient(var(--ink-muted) 0 3px, transparent 3px 6px);
}

.route-lbls { flex: 1; min-width: 0; }
.route-lbls .route-title {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.route-lbls .route-title .arrow { color: var(--ink-muted); font-size: 14px; }
.route-lbls .item-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
}
.route-lbls .meta {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-top: 5px;
  font-weight: 500;
  line-height: 1.4;
}

.badge {
  padding: 6px 12px;
  border-radius: 8px;
  font: 700 12px "Outfit";
  white-space: nowrap;
  letter-spacing: .2px;
}
.badge.auto { background: #223348; color: #a5c4f2; }
.badge.camioneta { background: #352b48; color: #cbb9f2; }
.badge.pickup { background: #35421f; color: #d2e49c; }
.badge.camion { background: #44241d; color: #f2baa9; }
.badge.carga { background: #183d31; color: #7de8be; }
.card-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.match-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(53, 208, 164, 0.16);
  color: #7de8be;
  font: 700 11.5px "Outfit";
  white-space: nowrap;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
  gap: 12px;
}

.size-tag {
  font: 700 11.5px "Inconsolata";
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 5px 10px;
  border-radius: 6px;
}
.size-tag.chica { color: #ffe895; background: rgba(255, 179, 64, 0.14); }
.size-tag.mediana { color: #ffd27a; background: rgba(255, 179, 64, 0.22); }
.size-tag.grande { color: #fff; background: rgba(255, 179, 64, 0.38); }

.card-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.price {
  font-size: 19px;
  font-weight: 800;
  color: var(--accent-2);
}
.price small {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

/* Forms & Panels */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.panel h3 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -.4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel .hint {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 22px;
  line-height: 1.45;
}

.offer-feed-section {
  margin-top: 28px;
}
.offer-feed-section .section-heading h3 {
  margin: 0 0 14px;
  font-size: 20px;
  letter-spacing: -.4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-grid { display: grid; gap: 16px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 500 15px "Outfit";
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 70px; }
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .duo { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .auth-status { order: 2; margin-left: 0; }
  .page-nav { width: 100%; justify-content: stretch; }
  .page-btn { flex: 1; justify-content: center; font-size: 13px; padding: 8px 10px; }
  .auth-card { grid-template-columns: auto 1fr; }
  .auth-card .btn { grid-column: 1 / -1; width: 100%; }
  .role-grid, .setup-form { grid-template-columns: 1fr; }
  .auth-shell, .setup-shell { margin-top: 4vh; }
  .route-row { align-items: flex-start; }
  .card-badges { flex-direction: column; align-items: flex-end; }
}

.seg { display: flex; gap: 8px; }
.seg .opt {
  flex: 1;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 12px 10px;
  border-radius: 12px;
  cursor: pointer;
  font: 600 13px "Outfit";
  transition: .15s;
}
.seg .opt small {
  display: block;
  color: var(--ink-muted);
  font-weight: 500;
  margin-top: 3px;
}
.seg .opt:hover { border-color: var(--line-strong); }
.seg .opt.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #201400;
}
.seg .opt.is-active small { color: #5a3800; font-weight: 600; }

.btn {
  border: none;
  cursor: pointer;
  font: 700 15.5px "Outfit";
  background: var(--accent);
  color: #221500;
  padding: 14px 22px;
  border-radius: 12px;
  transition: all .15s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.btn.teal {
  background: var(--teal);
  color: #032017;
}
.btn.teal:hover {
  background: #56e2bc;
}
.btn.secondary {
  background: var(--card-2);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line-strong);
}
.btn.secondary:hover {
  background: #2b3e36;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.veh-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .veh-picker { grid-template-columns: 1fr; }
}
.veh {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: .15s;
  position: relative;
}
.veh:hover { border-color: var(--line-strong); }
.veh .name { font-weight: 700; font-size: 15px; }
.veh .cap { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.veh.is-active {
  border-color: var(--accent);
  background: var(--card-2);
}
.veh .check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
}
.veh.is-active .check {
  background: var(--accent);
  border-color: var(--accent);
}

.empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(20, 31, 27, 0.4);
}
.empty .big { font-size: 42px; margin-bottom: 10px; display: block; }

.match-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: -4px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(53, 208, 164, 0.5);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(53, 208, 164, 0.14), rgba(53, 208, 164, 0.05));
  color: var(--ink);
}
.match-notice-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--teal);
  color: #032017;
  font-size: 17px;
  font-weight: 800;
}
.match-notice strong {
  display: block;
  color: #9bf2d2;
  font-size: 14px;
}
.match-notice p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

/* Modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 6, 0.76);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
  animation: fadeIn .18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  max-width: 460px;
  width: 100%;
  padding: 26px;
  box-shadow: var(--shadow);
  animation: popIn .2s cubic-bezier(.16, 1, .3, 1);
}
@keyframes popIn { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.modal h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.4px; }
.modal .sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 18px; line-height: 1.45; }
.modal .field { margin-bottom: 14px; }
.modal .actions { display: flex; gap: 10px; margin-top: 12px; }
.modal .actions .btn { flex: 1; }
.verify {
  font-family: "Inconsolata";
  color: var(--accent-2);
  font-size: 12.5px;
  margin-top: 16px;
  text-align: center;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #201400;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: popIn .2s ease-out;
  z-index: 60;
  max-width: 90%;
  text-align: center;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }

/* Landing page */
main:has(.landing-shell) {
  max-width: 1180px;
  padding-top: 42px;
}
.landing-shell {
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(36px, 7vw, 92px);
  padding: 42px 20px 66px;
}
.landing-copy { position: relative; z-index: 2; }
.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 179, 64, .3);
  border-radius: 999px;
  color: var(--accent-2);
  background: rgba(255, 179, 64, .08);
  font: 700 11px "Inconsolata";
  letter-spacing: .35px;
  text-transform: uppercase;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-glow);
}
.landing-shell h2 {
  max-width: 590px;
  margin: 22px 0 18px;
  color: var(--ink);
  font-size: clamp(48px, 6.2vw, 78px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -4px;
}
.landing-shell h2 em {
  color: var(--accent);
  font-style: normal;
}
.landing-lead {
  max-width: 480px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}
.landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.landing-primary { min-width: 178px; }
.landing-primary span, .landing-bottom .btn span { font-size: 17px; }
.landing-secondary {
  border: 0;
  padding: 13px 12px;
  color: var(--ink-soft);
  background: transparent;
  font: 700 14px "Outfit";
  cursor: pointer;
}
.landing-secondary:hover { color: var(--ink); }
.landing-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin: 22px 0 0;
  color: var(--ink-muted);
  font: 600 11px "Inconsolata";
  text-transform: uppercase;
  letter-spacing: .35px;
}
.landing-trust span { color: var(--teal); font-size: 14px; }
.landing-visual {
  position: relative;
  min-height: 430px;
  isolation: isolate;
}
.landing-visual::before {
  content: "";
  position: absolute;
  inset: 9% 4% 7%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 208, 164, .15), transparent 65%);
  filter: blur(2px);
}
.visual-orbit {
  position: absolute;
  border: 1px solid rgba(53, 208, 164, .19);
  border-radius: 50%;
  transform: rotate(-24deg);
}
.orbit-one { width: 86%; height: 48%; left: 7%; top: 26%; }
.orbit-two { width: 54%; height: 81%; left: 23%; top: 8%; border-color: rgba(255, 179, 64, .2); }
.visual-route {
  position: absolute;
  top: 47%;
  left: 12%;
  right: 12%;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-muted);
  font: 700 10px "Inconsolata";
  letter-spacing: 1.5px;
}
.route-dash {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 13px);
}
.visual-card {
  position: absolute;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(300px, 78%);
  padding: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(25, 38, 33, .94);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
}
.visual-card > div { min-width: 0; }
.visual-cargo { top: 11%; left: 1%; transform: rotate(-4deg); }
.visual-driver { right: 1%; bottom: 11%; transform: rotate(4deg); }
.visual-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 23px;
}
.cargo-icon { color: var(--accent); background: var(--accent-glow); }
.driver-icon { color: var(--teal); background: var(--teal-glow); }
.visual-card small, .visual-card strong, .visual-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-card small {
  margin-bottom: 3px;
  color: var(--ink-muted);
  font: 700 9px "Inconsolata";
  letter-spacing: .8px;
}
.visual-card strong { color: var(--ink); font-size: 14px; }
.visual-card div > span { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.visual-card > b { color: var(--teal); font-size: 20px; }
.visual-cargo > b { color: var(--accent); }
.visual-center {
  position: absolute;
  top: 38%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 179, 64, .55);
  border-radius: 22px;
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 0 0 9px rgba(255, 179, 64, .08), 0 16px 36px rgba(255, 179, 64, .2);
  font-size: 32px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.visual-center span { transform: rotate(-45deg); }
.landing-proof {
  padding: 27px 20px 42px;
  border-top: 1px solid var(--line);
}
.proof-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.proof-intro .eyebrow { margin: 0; }
.proof-intro h3 { margin: 0; color: var(--ink); font-size: 23px; letter-spacing: -.8px; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.proof-card {
  position: relative;
  min-height: 166px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(25, 38, 33, .7);
}
.proof-number {
  position: absolute;
  top: 18px;
  right: 19px;
  color: var(--ink-muted);
  font: 700 11px "Inconsolata";
}
.proof-icon { display: block; margin-bottom: 17px; font-size: 22px; }
.proof-card h4 { margin: 0 0 6px; font-size: 16px; }
.proof-card p { max-width: 260px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.landing-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 20px 26px;
  padding: 20px 22px;
  border: 1px solid rgba(53, 208, 164, .28);
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(53, 208, 164, .1), rgba(53, 208, 164, .03));
}
.landing-bottom p { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.landing-bottom .btn { padding: 11px 16px; font-size: 13px; }

/* First-party account modal */
.auth-modal {
  position: relative;
  max-width: 430px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 30px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: var(--ink-muted);
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); background: var(--card-2); }
.auth-modal-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 13px;
  color: var(--bg);
  background: var(--accent);
  font-size: 22px;
  transform: rotate(45deg);
}
.auth-modal-mark span { transform: rotate(-45deg); }
.auth-modal .eyebrow { margin-bottom: 8px; }
.auth-modal h3 { font-size: 30px; letter-spacing: -1px; }
.auth-modal-sub { margin: 0 0 21px; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.auth-form { display: grid; gap: 2px; }
.auth-form .field { margin-bottom: 10px; }
.auth-form input { width: 100%; }
.auth-submit { width: 100%; margin-top: 7px; }
.auth-switch { margin: 19px 0 0; color: var(--ink-soft); text-align: center; font-size: 13px; }
.auth-switch .text-btn { padding: 0; }
.auth-legal { margin: 16px 0 0; color: var(--ink-muted); font: 500 10.5px/1.45 "Inconsolata"; text-align: center; }

@media (max-width: 820px) {
  .landing-shell { grid-template-columns: 1fr; gap: 18px; padding-top: 25px; }
  .landing-copy { text-align: center; }
  .landing-badge, .landing-actions, .landing-trust { justify-content: center; }
  .landing-shell h2, .landing-lead { margin-left: auto; margin-right: auto; }
  .landing-visual { width: min(620px, 100%); margin: 0 auto; }
}
@media (max-width: 600px) {
  main:has(.landing-shell) { padding: 20px 10px; }
  .landing-shell { padding: 20px 8px 42px; }
  .landing-shell h2 { font-size: clamp(42px, 13vw, 62px); letter-spacing: -2.8px; }
  .landing-lead { font-size: 15px; }
  .landing-actions { flex-direction: column; gap: 5px; }
  .landing-primary { width: 100%; }
  .landing-visual { min-height: 370px; transform: scale(.94); transform-origin: top center; margin-bottom: -20px; }
  .visual-card { width: 83%; }
  .visual-cargo { left: 0; }
  .visual-driver { right: 0; }
  .proof-intro { display: block; }
  .proof-intro h3 { margin-top: 8px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { min-height: auto; }
  .landing-bottom { align-items: flex-start; flex-direction: column; margin: 0 8px 18px; }
  .landing-bottom .btn { width: 100%; }
  .auth-modal { padding: 25px 20px; }
}

app.js

/* v1.1 — gestión, estados y accesibilidad */
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; background:var(--card-2); color:var(--ink-soft); font:700 11px "Inconsolata"; text-transform:uppercase; }
.status-pill.active,.status-pill.aceptada { color:#7de8be; background:rgba(53,208,164,.12); }
.status-pill.rechazada,.status-pill.cancelled { color:#ff9b8d; background:rgba(255,107,87,.12); }
.status-pill.paused { color:#ffd27a; background:rgba(255,179,64,.12); }
.request-list { display:grid; gap:12px; }
.request-card { border:1px solid var(--line); background:var(--card); border-radius:14px; padding:16px; }
.request-card .request-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.request-card h4 { margin:0 0 5px; font-size:15px; }
.request-card p { margin:4px 0; color:var(--ink-soft); font-size:13px; line-height:1.4; }
.request-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.btn.small { padding:9px 13px; font-size:13px; }
.mine-grid { display:grid; gap:12px; }
.mine-card { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px; }
.mine-card h4 { margin:0 0 7px; font-size:16px; }
.mine-card .mine-meta { color:var(--ink-soft); font-size:13px; line-height:1.45; }
.mine-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.health-note { margin-top:12px; color:var(--ink-muted); font:500 11px "Inconsolata"; }
@media(max-width:600px){ .request-card .request-head { flex-direction:column; } }

/* UX: exploración pública y modales */
body.modal-open { overflow: hidden; }
.modal-error {
  margin: 4px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255,107,87,.35);
  border-radius: 10px;
  color: #ffb2a7;
  background: rgba(255,107,87,.08);
  font-size: 13px;
}
.guest-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 12px 0 18px;
}
.guest-results-head h2 { margin: 4px 0 6px; font-size: 30px; letter-spacing: -1px; }
.guest-results-head p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.read-only-note {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.025);
  font-size: 13px;
}
@media (max-width: 600px) {
  .guest-results-head { align-items: stretch; flex-direction: column; }
  .guest-results-head .btn { width: 100%; }
}

.match-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--line);border-radius:14px;margin:10px 0 20px;background:rgba(255,255,255,.025)}
.match-card p{margin:5px 0;color:var(--ink-soft);font-size:13px}.match-help{color:var(--teal)!important;font-weight:600}.request-card.is-match{border-color:var(--teal)}
.chat-modal{width:min(560px,calc(100vw - 28px));}.chat-messages{height:320px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:12px;margin:12px 0;background:rgba(0,0,0,.08)}
.chat-message{max-width:82%;margin:7px 0;padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.06)}.chat-message.mine{margin-left:auto}.chat-message.system{max-width:100%;text-align:center;background:rgba(255,255,255,.04);font-style:italic}.chat-message small{display:block;font-size:10px;opacity:.65;margin-bottom:3px}.chat-form{display:flex;gap:8px}.chat-form input{flex:1;min-width:0}
@media(max-width:600px){.match-card{align-items:stretch;flex-direction:column}.chat-form{flex-direction:column}.chat-form .btn{width:100%}}


/* v9: clasificación de carga */
.field-help { display:block; margin-top:6px; color:var(--ink-muted); font-size:11px; line-height:1.35; }

/* v11 — etapa visual de entrega, sin alterar el circuito existente */
.delivery-tracking{margin:18px 0 24px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card-2)}
.delivery-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.delivery-head h4{margin:3px 0 5px;font-size:16px}
.delivery-head p{margin:0;color:var(--ink-soft);font-size:12px;line-height:1.45;max-width:650px}
.tracking-guide{font:700 11px "Inconsolata";padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);white-space:nowrap}
.delivery-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.delivery-step{position:relative;min-width:0;padding-right:12px}
.delivery-marker{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);font-size:15px;position:relative;z-index:2}
.delivery-step.is-pending .delivery-marker{opacity:.72}
.delivery-copy{display:flex;flex-direction:column;gap:4px;margin-top:9px;padding-right:8px}
.delivery-copy strong{font-size:12px;color:var(--ink)}
.delivery-copy span{font-size:11px;line-height:1.35;color:var(--ink-soft)}
.delivery-connector{position:absolute;left:34px;right:0;top:17px;height:1px;background:var(--line);z-index:1}
.delivery-note{margin-top:16px;padding:11px 13px;border-radius:10px;background:var(--card);border:1px dashed var(--line);color:var(--ink-soft);font-size:11px;line-height:1.45}
.delivery-note b{color:var(--ink)}
@media(max-width:700px){.delivery-head{flex-direction:column}.tracking-guide{white-space:normal}.delivery-timeline{grid-template-columns:1fr;gap:13px}.delivery-step{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding-right:0}.delivery-marker{grid-row:1}.delivery-copy{margin-top:0}.delivery-connector{left:16px;top:34px;bottom:-13px;width:1px;height:auto;right:auto}.delivery-step:last-child .delivery-connector{display:none}}
.delivery-step.is-done .delivery-marker{opacity:1;border-color:var(--line-strong)}
.delivery-step.is-current .delivery-marker{opacity:1;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.delivery-step.is-done .delivery-copy strong,.delivery-step.is-current .delivery-copy strong{font-weight:800}
.delivery-guide-action{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.delivery-guide-action div{display:flex;flex-direction:column;gap:3px}.delivery-guide-action strong{font-size:12px}.delivery-guide-action span{font-size:11px;color:var(--ink-soft)}
.delivery-code{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--card)}
.delivery-code span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}.delivery-code strong{font:800 17px "Inconsolata";letter-spacing:.08em}.delivery-code small{font-size:10px;color:var(--ink-soft)}
.delivery-code.private strong{font:700 12px inherit;letter-spacing:0}.delivery-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}.delivery-wait{font-size:11px;color:var(--ink-soft)}
.delivery-code-form{display:flex;gap:8px;flex-wrap:wrap}.delivery-code-form input{min-width:260px;flex:1}
@media(max-width:700px){.delivery-guide-action{align-items:stretch;flex-direction:column}.delivery-code-form{flex-direction:column}.delivery-code-form input{min-width:0;width:100%}}

/* espacioAr — seguridad, legal y footer */
.auth-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

.captcha-wrap { min-height: 68px; display:flex; align-items:center; margin:8px 0 5px; overflow:hidden; }
.terms-check { display:flex; align-items:flex-start; gap:9px; margin:7px 0 4px; color:var(--ink-soft); font-size:12px; line-height:1.45; cursor:pointer; }
.terms-check input { margin-top:2px; width:16px; height:16px; flex:0 0 auto; }
.terms-check a { color:var(--ink); text-decoration:underline; }
.site-footer { width:min(1120px, calc(100% - 32px)); margin:30px auto 18px; padding:18px 4px 8px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:8px 24px; color:var(--ink-muted); font-size:12px; }
.site-footer > div { display:flex; gap:9px; align-items:baseline; }
.site-footer strong { color:var(--ink); font-size:13px; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; }
.site-footer a { color:var(--ink-soft); text-decoration:none; }
.site-footer a:hover { color:var(--ink); text-decoration:underline; }
.site-footer small { grid-column:1 / -1; font-size:10px; }
@media (max-width:600px){.site-footer{grid-template-columns:1fr;}.site-footer nav{justify-content:flex-start;}.site-footer small{grid-column:auto;}}
.legal-page{width:min(820px,calc(100% - 32px));margin:0 auto;padding:52px 0 70px;color:var(--ink);line-height:1.65}.legal-page h1{font-size:clamp(38px,6vw,58px);line-height:1.05;letter-spacing:-2px;margin:8px 0 18px}.legal-page h2{font-size:20px;margin:30px 0 8px}.legal-page p{color:var(--ink-soft);max-width:720px}.legal-back{display:inline-block;margin-bottom:42px;color:var(--ink);text-decoration:none;font-weight:700}.legal-updated{margin-top:42px;font-size:12px;color:var(--ink-muted)!important}

/* Panel de administración espacioAr */
.admin-nav { border-color: rgba(255,179,64,.35); }
.admin-shell { max-width: 1180px; margin: 0 auto; padding: 30px 22px 70px; }
.admin-hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:22px; }
.admin-hero h2 { margin:6px 0 8px; font-size:clamp(28px,4vw,42px); }
.admin-hero p { max-width:760px; color:var(--ink-soft); margin:0; }
.admin-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; padding:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; }
.admin-tab { border:1px solid transparent; background:transparent; color:var(--ink-soft); padding:10px 14px; border-radius:10px; cursor:pointer; font:700 14px "Outfit"; }
.admin-tab span { margin-right:7px; }
.admin-tab:hover,.admin-tab.is-active { background:var(--bg); color:var(--ink); border-color:var(--line-strong); }
.admin-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:16px; }
.admin-metric { background:var(--bg-2); border:1px solid var(--line); border-radius:15px; padding:16px; min-width:0; }
.admin-metric span,.admin-metric small { display:block; color:var(--ink-muted); font-size:12px; }
.admin-metric strong { display:block; font-size:27px; margin:6px 0 3px; overflow:hidden; text-overflow:ellipsis; }
.admin-panels { display:grid; grid-template-columns:1.35fr .85fr; gap:16px; }
.admin-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.admin-section-head h3 { margin:5px 0 3px; }
.admin-section-head .hint { margin:4px 0 0; }
.admin-finance { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.admin-finance > div { padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.admin-finance small { display:block; color:var(--ink-muted); }
.admin-finance strong { display:block; margin-top:5px; font-size:20px; }
.admin-months { display:grid; gap:9px; margin-top:18px; }
.admin-month { position:relative; display:grid; grid-template-columns:72px 125px 1fr; gap:10px; align-items:center; min-height:30px; }
.admin-month span { color:var(--ink-muted); font-size:12px; }
.admin-month b { font-size:13px; }
.admin-month i { display:block; height:8px; border-radius:99px; background:var(--accent); min-width:3px; opacity:.8; }
.admin-settings-summary { display:grid; gap:10px; margin:0; }
.admin-settings-summary div { display:flex; justify-content:space-between; gap:15px; padding:11px 0; border-bottom:1px solid var(--line); }
.admin-settings-summary dt { color:var(--ink-muted); }
.admin-settings-summary dd { margin:0; font-weight:700; text-align:right; }
.admin-tools { display:flex; gap:8px; align-items:center; }
.admin-tools input { min-width:260px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:10px 12px; font:500 14px "Outfit"; }
.admin-checks { display:flex; flex-wrap:wrap; gap:12px; color:var(--ink-soft); font-size:14px; }
.admin-checks label { display:flex; align-items:center; gap:7px; }
.admin-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
.admin-table { width:100%; border-collapse:collapse; min-width:850px; }
.admin-table th,.admin-table td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
.admin-table th { color:var(--ink-muted); font-size:11px; text-transform:uppercase; letter-spacing:.45px; background:var(--bg-2); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table td strong,.admin-table td small { display:block; }
.admin-table td small { color:var(--ink-muted); margin-top:2px; }
.admin-row-actions { white-space:nowrap; }
.admin-message-list { display:grid; gap:10px; }
.admin-message { padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.admin-message > div { display:flex; justify-content:space-between; gap:12px; }
.admin-message > div span,.admin-message > small { color:var(--ink-muted); font-size:11px; }
.admin-message p { margin:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-warning { padding:12px 14px; border:1px solid rgba(255,179,64,.35); background:rgba(255,179,64,.07); border-radius:12px; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.admin-user-modal { width:min(720px,calc(100vw - 28px)); max-height:90vh; overflow:auto; }
.btn.danger { background:transparent; color:#ff8c8c; border:1px solid rgba(255,100,100,.3); }
.btn.danger:hover { border-color:rgba(255,100,100,.55); }
.btn.tiny { padding:7px 9px; border-radius:8px; font-size:12px; }

@media (max-width: 1050px) {
  .admin-grid { grid-template-columns:repeat(3,1fr); }
  .admin-panels { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
  .admin-shell { padding:22px 14px 55px; }
  .admin-hero { align-items:flex-start; flex-direction:column; }
  .admin-grid { grid-template-columns:repeat(2,1fr); }
  .admin-finance { grid-template-columns:1fr; }
  .admin-tools { width:100%; flex-direction:column; align-items:stretch; }
  .admin-tools input { min-width:0; width:100%; }
  .admin-tabs { overflow:auto; flex-wrap:nowrap; }
  .admin-tab { white-space:nowrap; }
}


/* espacioAr — propuesta pública separada y navegación */
.about-nav { margin-left:auto; color:var(--ink-soft); text-decoration:none; font-size:12px; font-weight:700; padding:9px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(25,38,33,.55); transition:.2s ease; }
.about-nav:hover { color:var(--ink); border-color:var(--line-strong); background:var(--card); }
.proposal-section { scroll-margin-top:84px; padding:72px 20px 68px; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(13,20,18,.18),rgba(25,38,33,.20)); }
.proposal-head { max-width:760px; margin:0 auto 28px; text-align:center; }
.proposal-head .eyebrow { margin-bottom:8px; }
.proposal-head h2 { margin:0 0 12px; color:var(--ink); font-size:clamp(30px,4vw,46px); line-height:1.03; letter-spacing:-1.8px; }
.proposal-head p { max-width:680px; margin:0 auto; color:var(--ink-soft); font-size:15px; line-height:1.65; }
.proposal-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr); gap:14px; align-items:stretch; }
.proposal-main,.proposal-side { border:1px solid var(--line); border-radius:18px; background:rgba(25,38,33,.62); }
.proposal-main { padding:24px; }
.proposal-route { display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:14px; align-items:center; padding:15px 16px; border:1px dashed var(--line-strong); border-radius:14px; background:rgba(13,20,18,.5); }
.proposal-route span { color:var(--ink-muted); font:700 9px "Inconsolata"; letter-spacing:.9px; }
.proposal-route strong { color:var(--ink); font-size:14px; }
.proposal-route i { color:var(--accent); font-style:normal; font-size:20px; text-align:center; }
.proposal-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:12px; }
.proposal-steps > div { position:relative; min-height:126px; padding:18px; border:1px solid var(--line); border-radius:14px; background:rgba(13,20,18,.34); }
.proposal-steps b { display:block; margin-bottom:20px; color:var(--accent); font:700 11px "Inconsolata"; }
.proposal-steps strong { display:block; margin-bottom:5px; color:var(--ink); font-size:15px; }
.proposal-steps span { display:block; color:var(--ink-soft); font-size:12px; line-height:1.5; }
.proposal-side { padding:25px; background:linear-gradient(145deg,rgba(255,179,64,.10),rgba(53,208,164,.06)); }
.proposal-side-mark { display:grid; place-items:center; width:42px; height:42px; margin-bottom:22px; border-radius:13px; color:var(--bg); background:var(--accent); transform:rotate(45deg); font-size:20px; }
.proposal-side-mark::first-letter { transform:rotate(-45deg); }
.proposal-side .eyebrow { display:block; margin-bottom:7px; }
.proposal-side h3 { margin:0 0 20px; color:var(--ink); font-size:23px; line-height:1.1; letter-spacing:-.8px; }
.proposal-role { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); }
.proposal-role > span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--card); }
.proposal-role strong,.proposal-role small { display:block; }
.proposal-role strong { color:var(--ink); font-size:13px; }
.proposal-role small { margin-top:3px; color:var(--ink-soft); font-size:11px; line-height:1.4; }
.proposal-cta { width:100%; margin-top:17px; }
.auth-security-note { margin:10px 0 0; color:var(--ink-muted); font-size:10px; line-height:1.45; text-align:center; }
.captcha-wrap { min-height:0; height:0; margin:0; overflow:hidden; }
@media(max-width:820px){ .about-nav { margin-left:auto; margin-right:8px; } .proposal-grid{grid-template-columns:1fr}.proposal-side{display:grid;grid-template-columns:42px 1fr;column-gap:14px}.proposal-side-mark{grid-row:1 / span 3;margin-bottom:0}.proposal-side .eyebrow,.proposal-side h3{grid-column:2}.proposal-role,.proposal-cta{grid-column:1 / -1}.proposal-side h3{margin-bottom:10px} }
@media(max-width:600px){ .about-nav{font-size:11px;padding:8px 9px}.proposal-section{padding:42px 12px}.proposal-main{padding:15px}.proposal-route{grid-template-columns:1fr auto 1fr;gap:8px}.proposal-route span{display:none}.proposal-route strong{font-size:12px}.proposal-route i{font-size:17px}.proposal-steps{grid-template-columns:1fr}.proposal-steps>div{min-height:auto}.proposal-side{display:block;padding:20px}.proposal-side-mark{margin-bottom:20px}.proposal-side h3{margin-bottom:15px}.auth-modal{padding:25px 20px}}

/* v23 UX */
.view-quick-actions{display:flex;justify-content:flex-end}.account-shell,.preferences-shell{max-width:1180px;margin:0 auto;padding:30px 22px 70px}.account-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}.account-head h2{margin:5px 0 7px;font-size:clamp(30px,4vw,44px);letter-spacing:-1.5px}.account-head p{margin:0;color:var(--ink-soft);max-width:720px}.account-actions{display:flex;gap:8px;flex-wrap:wrap}.account-tabs{display:flex;gap:6px;padding:5px;border:1px solid var(--line);background:var(--bg-2);border-radius:14px;margin-bottom:16px}.account-tab,.preference-nav{border:1px solid transparent;background:transparent;color:var(--ink-soft);font:700 14px "Outfit";padding:10px 14px;border-radius:10px;cursor:pointer}.account-tab.is-active,.account-tab:hover,.preference-nav.is-active,.preference-nav:hover{background:var(--bg);border-color:var(--line-strong);color:var(--ink)}.account-tab span{margin-left:4px;color:var(--ink-muted)}.account-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.account-profile-card{display:flex;gap:18px;align-items:flex-start}.account-avatar{display:grid;place-items:center;width:70px;height:70px;flex:0 0 auto;border-radius:20px;background:var(--accent);color:var(--bg);font-size:30px;font-weight:800}.account-data h3{margin:4px 0 2px}.account-data>p{margin:0 0 16px;color:var(--ink-muted)}.account-data dl{display:grid;gap:8px;margin:0 0 16px}.account-data dl div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:8px 0}.account-data dt{color:var(--ink-muted)}.account-data dd{margin:0;text-align:right;font-weight:700}.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.account-stats div{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}.account-stats strong,.account-stats span{display:block}.account-stats strong{font-size:22px}.account-stats span{font-size:11px;color:var(--ink-muted)}.preferences-layout{display:grid;grid-template-columns:220px 1fr;gap:14px}.preferences-menu{display:grid;align-content:start;gap:7px}.preference-nav{text-align:left;background:var(--bg-2)}.preference-list{display:grid;gap:12px;margin:20px 0}.preference-list div{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid var(--line)}.preference-list span{color:var(--ink-soft);font-size:13px}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.mode-card{padding:18px;text-align:left;border:1px solid var(--line);border-radius:15px;background:var(--bg-2);color:var(--ink);cursor:pointer}.mode-card.is-active,.mode-card:hover{border-color:var(--accent);transform:translateY(-1px)}.mode-card span,.mode-card strong,.mode-card small{display:block}.mode-card span{font-size:28px;margin-bottom:10px}.mode-card small{margin-top:5px;color:var(--ink-soft);line-height:1.45}.publish-modal{width:min(780px,calc(100vw - 26px));max-height:92vh;overflow:auto}.publish-modal>.panel{border:0;background:transparent;padding:0}.tracking-standalone{margin-top:14px}.delivery-code strong{letter-spacing:3px;font-size:24px}.proposal-nav{display:flex;gap:7px;align-items:center;margin-left:auto}.proposal-nav .about-nav.is-current{color:var(--ink);border-color:var(--line-strong)}.proposal-standalone{max-width:1180px;margin:0 auto}.proposal-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;padding:72px 22px 55px}.proposal-hero-copy h2{margin:7px 0 14px;font-size:clamp(38px,5vw,62px);line-height:1;letter-spacing:-2.5px}.proposal-hero-copy p{max-width:650px;color:var(--ink-soft);font-size:16px;line-height:1.7}.proposal-hero-actions{display:flex;gap:9px;margin-top:23px;flex-wrap:wrap}.proposal-visual{position:relative;min-height:330px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(255,179,64,.10),rgba(25,38,33,.54));overflow:hidden}.proposal-orbit{position:absolute;border:1px dashed var(--line-strong);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.proposal-o1{width:270px;height:270px}.proposal-o2{width:190px;height:190px}.proposal-route-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:10px;align-items:center;width:min(86%,520px);padding:20px;border:1px solid var(--line-strong);border-radius:17px;background:rgba(13,20,18,.88)}.proposal-route-card span{font:700 9px "Inconsolata";color:var(--ink-muted)}.proposal-route-card strong{font-size:15px}.proposal-route-card b{font-size:20px;color:var(--accent)}.proposal-visual-note{position:absolute;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);font-size:11px;font-weight:700}.note-a{top:22px;right:18px}.note-b{bottom:22px;left:18px}.proposal-section-standalone{padding:55px 22px}.section-title{text-align:center;max-width:720px;margin:0 auto 26px}.section-title h2{font-size:clamp(30px,4vw,44px);margin:6px 0 10px}.section-title p{margin:0;color:var(--ink-soft)}.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.flow-grid article{padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--bg-2);min-height:175px}.flow-grid article>span{font:700 11px "Inconsolata";color:var(--accent)}.flow-grid article>div{font-size:25px;margin:16px 0 9px}.flow-grid h3{margin:0 0 6px}.flow-grid p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.55}.proposal-commercial{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start;padding:55px 22px 75px}.proposal-commercial h2{margin:7px 0 10px;font-size:clamp(30px,4vw,44px)}.proposal-commercial>div>p{color:var(--ink-soft);line-height:1.7}.commercial-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.commercial-cards article{padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,179,64,.08),rgba(53,208,164,.05))}.commercial-cards strong,.commercial-cards span,.commercial-cards a{display:block}.commercial-cards span{margin:8px 0 18px;color:var(--ink-soft);font-size:13px;line-height:1.45}.commercial-cards a{color:var(--ink);font-weight:800;text-decoration:none}@media(max-width:820px){.account-grid,.preferences-layout,.proposal-hero,.proposal-commercial{grid-template-columns:1fr}.flow-grid{grid-template-columns:repeat(2,1fr)}.account-head{align-items:flex-start;flex-direction:column}.mode-grid,.commercial-cards{grid-template-columns:1fr}}@media(max-width:560px){.account-shell,.preferences-shell,.proposal-hero,.proposal-section-standalone,.proposal-commercial{padding-left:14px;padding-right:14px}.account-profile-card{flex-direction:column}.account-stats{grid-template-columns:1fr 1fr}.account-stats div:last-child{grid-column:1/-1}.flow-grid{grid-template-columns:1fr}.preferences-menu{grid-template-columns:1fr}.proposal-hero{padding-top:42px}.proposal-route-card{grid-template-columns:1fr auto 1fr}.proposal-route-card span{display:none}.proposal-route-card{width:calc(100% - 26px);padding:14px}.proposal-hero-copy h2{font-size:42px}}

/* ===================== espacioAr v24 · UX limpio ===================== */
.auth-status{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.auth-mini-btn{white-space:nowrap}
.auth-mini-btn.admin-shortcut{font-weight:800}
.account-profile-screen,.preferences-clean,.tracking-center{max-width:1120px;margin:0 auto;padding:38px 20px 72px}
.account-profile-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);gap:18px;align-items:stretch}
.account-profile-card{display:flex;gap:22px;align-items:flex-start;padding:30px}
.account-avatar{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;flex:0 0 auto;font-size:24px;font-weight:800;border:1px solid var(--line-strong);background:var(--bg-2)}
.account-data h2{margin:5px 0 2px;font-size:clamp(28px,4vw,40px);letter-spacing:-1px}
.account-username{margin:0 0 20px;color:var(--ink-muted);font-weight:600}
.account-data dl{display:grid;gap:0;margin:0 0 20px}
.account-data dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.account-data dt{color:var(--ink-muted);font-size:13px}.account-data dd{margin:0;font-weight:700;text-align:right}
.role-inline{display:inline-flex;margin-left:6px}
.account-activity-card{padding:30px}.account-activity-card h3{margin:5px 0 20px}
.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.account-stats div{padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--bg-2)}.account-stats strong{display:block;font-size:28px}.account-stats span{display:block;margin-top:4px;color:var(--ink-muted);font-size:12px;line-height:1.35}
.preferences-clean{max-width:860px}.preference-card{max-width:760px;margin:0 auto;padding:32px}.preference-card h2{margin:7px 0 10px;font-size:clamp(30px,4vw,46px);letter-spacing:-1.6px}.preference-card .role-grid{margin-top:24px}.role-card.is-current{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);transform:translateY(-1px)}.role-card.is-current .role-check{opacity:1}.account-inline-footer{max-width:760px;margin:18px auto 0;padding:4px 2px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--ink-muted);font-size:12px}.account-inline-footer strong{color:var(--ink)}
.tracking-center-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:22px}.tracking-center-head h2{margin:7px 0 7px;font-size:clamp(32px,4vw,48px);letter-spacing:-1.7px}.tracking-center-head p{margin:0;color:var(--ink-muted);max-width:700px}.tracking-center-actions{display:flex;gap:8px;flex-wrap:wrap}.tracking-standalone{margin:0 0 18px}.tracking-history{margin-top:32px}.tracking-history-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.tracking-history-head h3{margin:5px 0 0;font-size:24px}.tracking-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.history-card{display:flex;justify-content:space-between;gap:16px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2)}.history-card h4{margin:6px 0 4px}.history-card p{margin:0;color:var(--ink-muted);font-size:13px}.history-meta{display:flex;align-items:flex-end;flex-direction:column;justify-content:space-between;gap:12px;text-align:right}.history-meta span{font-size:11px;color:var(--ink-muted)}.history-meta strong{font-size:12px}.delivery-code-highlight{margin-top:14px}.delivery-code-highlight strong{display:block;margin-top:5px;font-size:30px;letter-spacing:6px}.delivery-code-highlight small{display:block;max-width:600px;margin-top:6px;line-height:1.45}.delivery-note{margin-top:12px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:13px;color:var(--ink-muted);font-size:12px}.delivery-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.delivery-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.delivery-step{position:relative;min-width:0}.delivery-marker{position:relative;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--bg-2);font-size:14px;font-weight:800}.delivery-step.is-current .delivery-marker{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}.delivery-step.is-done .delivery-marker{background:var(--ink);color:var(--bg)}.delivery-copy{padding:10px 12px 0 0}.delivery-copy strong{display:block;font-size:12px;line-height:1.3}.delivery-copy span{display:block;margin-top:4px;font-size:11px;color:var(--ink-muted);line-height:1.4}.delivery-connector{position:absolute;left:34px;right:0;top:16px;height:1px;background:var(--line-strong)}.delivery-step.is-done .delivery-connector{background:var(--ink)}
.admin-nav{font-weight:800}.admin-shortcut{font-weight:800}
/* Pulido visual de landing sin cambiar su estructura ni CTAs */
.landing-shell{isolation:isolate}.landing-copy h2{text-wrap:balance}.landing-primary,.landing-secondary{transition:transform .18s ease,box-shadow .18s ease}.landing-primary:hover,.landing-secondary:hover{transform:translateY(-2px)}.proof-card{transition:transform .18s ease,border-color .18s ease}.proof-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
@media(max-width:860px){.account-profile-layout{grid-template-columns:1fr}.tracking-center-head{align-items:flex-start;flex-direction:column}.tracking-history-grid{grid-template-columns:1fr}.delivery-timeline{display:block}.delivery-step{display:grid;grid-template-columns:42px 1fr;gap:4px;padding-bottom:15px}.delivery-copy{padding-top:2px}.delivery-connector{left:16px;top:34px;width:1px;height:calc(100% - 28px)}.account-stats{grid-template-columns:1fr}}
@media(max-width:600px){.account-profile-screen,.preferences-clean,.tracking-center{padding:24px 14px 54px}.account-profile-card,.preference-card,.account-activity-card{padding:22px}.account-profile-card{gap:15px}.account-data dl>div{display:block}.account-data dd{text-align:left;margin-top:4px}.tracking-center-actions{width:100%}.tracking-center-actions .btn{flex:1}.history-card{display:block}.history-meta{margin-top:14px;align-items:flex-start;text-align:left}.account-inline-footer{flex-direction:column;gap:2px}}
/* espacioAr v24 · landing visual refinement */
.landing-shell{position:relative;overflow:hidden;border-radius:28px}
.landing-shell::before,.landing-shell::after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px);opacity:.55}
.landing-shell::before{width:360px;height:360px;right:-120px;top:-150px;background:radial-gradient(circle,rgba(255,179,64,.14),transparent 68%)}
.landing-shell::after{width:300px;height:300px;left:-150px;bottom:-150px;background:radial-gradient(circle,rgba(53,208,164,.10),transparent 68%)}
.landing-copy,.landing-visual{position:relative;z-index:1}
.landing-badge{backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.10)}
.landing-primary{box-shadow:0 10px 28px rgba(0,0,0,.12)}
.landing-primary:hover{box-shadow:0 14px 34px rgba(0,0,0,.16)}
.landing-visual{transform:translateZ(0)}
@media(max-width:600px){.landing-shell{border-radius:22px}.landing-shell::before{width:240px;height:240px;right:-120px;top:-100px}.landing-shell::after{width:210px;height:210px;left:-120px;bottom:-120px}}