/* Área de miembros · estilos compartidos
   Paleta: azul marino profundo + arena + dorado (confianza inmobiliaria). */
:root{
  --bg:#f4f1ea;
  --surface:#ffffff;
  --surface-2:#f8f6f1;
  --line:#e3ddd0;
  --fg:#16233b;
  --fg-soft:#4b5567;
  --fg-faint:#8a8f99;
  --navy:#16233b;
  --navy-2:#22345a;
  --gold:#c8963e;
  --gold-hover:#b5852f;
  --gold-soft:rgba(200,150,62,.14);
  --gold-text:#8c6420;
  --ok:#2f7a4f;
  --ok-soft:#e5f2ea;
  --warn:#9a5a08;
  --warn-soft:#fbefdc;
  --danger:#b3392b;
  --danger-soft:#fbe6e3;
  --shadow:0 1px 2px rgba(22,35,59,.05), 0 12px 30px rgba(22,35,59,.08);
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --radius:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1626; --surface:#152038; --surface-2:#1a2743; --line:#273a5e;
    --fg:#eef1f6; --fg-soft:#b3bccc; --fg-faint:#7d879a;
    --gold:#d6a654; --gold-hover:#e2b56a; --gold-soft:rgba(214,166,84,.16); --gold-text:#e6bd70;
    --ok:#7fcf9f; --ok-soft:rgba(127,207,159,.13); --warn:#e8b062; --warn-soft:rgba(232,176,98,.13);
    --danger:#f08a7c; --danger-soft:rgba(240,138,124,.13);
    --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1626; --surface:#152038; --surface-2:#1a2743; --line:#273a5e;
  --fg:#eef1f6; --fg-soft:#b3bccc; --fg-faint:#7d879a;
  --gold:#d6a654; --gold-hover:#e2b56a; --gold-soft:rgba(214,166,84,.16); --gold-text:#e6bd70;
  --ok:#7fcf9f; --ok-soft:rgba(127,207,159,.13); --warn:#e8b062; --warn-soft:rgba(232,176,98,.13);
  --danger:#f08a7c; --danger-soft:rgba(240,138,124,.13);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--gold-text); }
img{ max-width:100%; }
.wrap{ max-width:1040px; margin:0 auto; padding:28px 16px 72px; }
.wrap.narrow{ max-width:480px; }

/* ---------- top bar ---------- */
.top{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px max(16px, calc((100vw - 1040px)/2)); background:var(--navy); color:#f4f1ea; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.01em; }
.mark{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--gold); color:#16233b; font-family:var(--font-display); font-weight:700; }
.top nav{ display:flex; gap:4px; flex-wrap:wrap; }
.top nav a{ color:#d9dee8; text-decoration:none; font-size:14px; font-weight:600; padding:7px 11px; border-radius:8px; }
.top nav a:hover{ background:rgba(255,255,255,.09); color:#fff; }

/* ---------- type ---------- */
.eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); margin:0 0 10px; }
h1, .h2, .h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.1; margin:0 0 12px; text-wrap:balance; }
h1{ font-size:clamp(30px, 5vw, 46px); }
.h2{ font-size:clamp(24px, 3.6vw, 32px); }
.h3{ font-size:20px; }
.lead{ color:var(--fg-soft); font-size:16.5px; margin:0 0 18px; max-width:62ch; }
.small{ font-size:14px; margin:16px 0 0; }
.hint{ font-size:12.5px; color:var(--fg-faint); font-weight:400; }
.center{ text-align:center; justify-content:center; }
.muted{ color:var(--fg-faint) !important; }

/* ---------- auth ---------- */
.auth{ background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:34px 30px; box-shadow:var(--shadow); margin-top:4vh; text-align:center; }
.auth .lead{ margin-inline:auto; }
.auth .form{ text-align:left; margin-top:8px; }

/* ---------- forms ---------- */
.form{ display:flex; flex-direction:column; gap:14px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--fg); }
input[type=email], input[type=password], input[type=text]{
  font:inherit; font-size:16px; padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--fg); outline:none; width:100%;
}
input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.check{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:8px 14px; background:var(--surface-2); font-size:14px; font-weight:500; cursor:pointer; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; padding:13px 20px; border-radius:11px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn-accent{ background:var(--gold); color:#16233b; }
.btn-accent:hover{ background:var(--gold-hover); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--fg-faint); }
.btn-block{ width:100%; }
.btn.copied{ background:var(--ok); color:#fff; border-color:var(--ok); }
button.link{ border:0; background:none; color:var(--gold-text); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; }
.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

.alert{ border-radius:11px; padding:11px 14px; font-size:14px; margin:0 0 12px; text-align:left; }
.alert.error{ background:var(--danger-soft); color:var(--danger); }
.alert.ok{ background:var(--ok-soft); color:var(--ok); }

/* ---------- dashboard ---------- */
.hero{ padding:18px 0 22px; }
.products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px; }
.product{ display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); color:inherit; text-decoration:none; transition:transform .12s, border-color .12s; }
.product h2{ font-family:var(--font-display); font-size:22px; font-weight:700; margin:4px 0 0; letter-spacing:-.01em; }
.product p{ margin:0; color:var(--fg-soft); font-size:14.5px; }
.product .go{ margin-top:auto; padding-top:10px; font-weight:700; color:var(--gold-text); font-size:14.5px; }
.product .btn{ margin-top:auto; align-self:flex-start; }
a.product.open:hover{ border-color:var(--gold); transform:translateY(-2px); }
.product.locked{ background:var(--surface-2); }
.product.locked h2, .product.locked p{ opacity:.75; }
.badge{ align-self:flex-start; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge.ok{ background:var(--ok-soft); color:var(--ok); }
.badge.soon{ background:var(--warn-soft); color:var(--warn); }
.badge.lock{ background:var(--line); color:var(--fg-soft); }

/* ---------- cards & content ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); margin-bottom:18px; }
.narrow-card{ max-width:620px; margin-inline:auto; }
.card.center .row{ justify-content:center; }
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th, td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-faint); }
.events{ list-style:none; padding:0; margin:0; font-size:13.5px; display:flex; flex-direction:column; gap:6px; }

/* product page */
.phero{ background:linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); color:#f4f1ea; border-radius:22px; padding:34px 30px; margin-bottom:18px; box-shadow:var(--shadow); }
.phero .eyebrow{ color:var(--gold); }
.phero .lead{ color:#cfd6e3; }
.tabs{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin-bottom:8px; scrollbar-width:thin; }
.tab{ border:1px solid var(--line); background:var(--surface); color:var(--fg-soft); padding:10px 16px; border-radius:999px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tab:hover{ color:var(--fg); border-color:var(--fg-faint); }
.tab[aria-selected="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
.panel h2{ font-family:var(--font-display); font-size:26px; margin:0 0 8px; letter-spacing:-.01em; }
.panel h3{ font-size:17px; margin:22px 0 8px; }
.steps{ counter-reset:s; list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:12px; }
.steps li{ counter-increment:s; display:flex; gap:14px; align-items:flex-start; }
.steps li::before{ content:counter(s); flex:0 0 30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-text); font-weight:700; font-family:var(--font-mono); font-size:13px; }
.steps b{ display:block; }
.steps span{ color:var(--fg-soft); font-size:14.5px; }
.files{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-top:14px; }
.file{ border:1px solid var(--line); border-radius:13px; padding:16px; background:var(--surface-2); display:flex; flex-direction:column; gap:8px; }
.file b{ font-size:15px; }
.file .hint{ margin:0; }
.copybox{ border:1px solid var(--line); border-radius:13px; background:var(--surface-2); padding:16px; margin-top:12px; }
.copybox .head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.copybox .head b{ font-size:15px; }
.copybox pre{ white-space:pre-wrap; word-break:break-word; font-family:var(--font-body); font-size:14.5px; margin:0; color:var(--fg); }
.copybox .btn{ padding:8px 14px; font-size:13.5px; }
.video{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; margin-top:12px; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video .ph{ position:absolute; inset:0; display:grid; place-items:center; color:#cfd6e3; font-size:14px; text-align:center; padding:14px; background:linear-gradient(120deg,#16233b,#22345a); }
.note{ border-left:3px solid var(--gold); background:var(--gold-soft); padding:12px 14px; border-radius:0 10px 10px 0; font-size:14.5px; margin-top:14px; }

@media (max-width:560px){
  .auth{ padding:28px 20px; }
  .card, .phero{ padding:22px 18px; }
  .top nav a{ padding:6px 8px; font-size:13.5px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* primera vez / ayuda en login y activar */
.first-time{ margin-top:20px; padding:16px; border:1px dashed var(--line); border-radius:13px; text-align:left; display:flex; flex-direction:column; gap:6px; }
.first-time span{ color:var(--fg-soft); font-size:14px; }
.first-time .btn{ margin-top:6px; }
.help{ text-align:left; margin-top:16px; font-size:14px; color:var(--fg-soft); }
.help summary{ cursor:pointer; color:var(--gold-text); font-weight:600; }
.help p{ margin:8px 0 0; }