/* Regalos · Soy Diego Pozo — shared styles for the portal and every gift page.
   Same brand system as tools.diegopozo.com: green → warm-black band, warm dark surfaces. */
:root{
  --bg:#130e0a;
  --surface:#1b1610;
  --surface-2:#231d15;
  --line:#332b1f;
  --fg:#f2efe6;
  --fg-soft:#aaa392;
  --fg-faint:#736c5b;
  --accent:#5fb027;
  --accent-hover:#72c935;
  --accent-ink:#0e1606;
  --accent-soft:rgba(95,176,39,.15);
  --accent-text:#8fd65c;
  --warn:#e7a54d;
  --warn-soft:rgba(231,165,77,.13);
  --band-from:#5fb027;
  --band-mid:#2f3f18;
  --band-to:#130e0a;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.35);
  --font-display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, Consolas, Menlo, monospace;
  --radius:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f5ee; --surface:#ffffff; --surface-2:#f7f9f2; --line:#dde3d2;
    --fg:#151a0f; --fg-soft:#535b45; --fg-faint:#8a917b;
    --accent:#4f9e1e; --accent-hover:#448a19; --accent-ink:#ffffff;
    --accent-soft:rgba(79,158,30,.12); --accent-text:#3b7a14;
    --warn:#9a5208; --warn-soft:#fbeedd;
    --shadow:0 1px 2px rgba(21,26,15,.05), 0 10px 26px rgba(21,26,15,.07);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f3f5ee; --surface:#ffffff; --surface-2:#f7f9f2; --line:#dde3d2;
  --fg:#151a0f; --fg-soft:#535b45; --fg-faint:#8a917b;
  --accent:#4f9e1e; --accent-hover:#448a19; --accent-ink:#ffffff;
  --accent-soft:rgba(79,158,30,.12); --accent-text:#3b7a14;
  --warn:#9a5208; --warn-soft:#fbeedd;
  --shadow:0 1px 2px rgba(21,26,15,.05), 0 10px 26px rgba(21,26,15,.07);
  color-scheme:light;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent-text); }
.wrap{ max-width:1000px; margin:0 auto; padding-inline:16px; padding-block:20px 64px; }
.wrap.narrow{ max-width:720px; }

/* ---------- brand band ---------- */
.band{
  background:linear-gradient(100deg, var(--band-from) 0%, var(--band-mid) 50%, var(--band-to) 100%);
  color:#fff; border-radius:20px; padding:30px 28px 28px; margin-bottom:22px; box-shadow:var(--shadow);
}
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin:0 0 10px; }
.eyebrow a{ color:inherit; text-decoration:none; }
.band h1{
  font-family:var(--font-display); font-weight:800; font-size:clamp(28px, 5vw, 44px);
  line-height:1.02; letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance;
}
.band p{ margin:0; max-width:56ch; opacity:.92; }

/* ---------- portal grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.gift{
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; color:inherit; text-decoration:none; box-shadow:var(--shadow);
  transition:border-color .12s, transform .12s;
}
.gift:hover, .gift:focus-visible{ border-color:var(--accent); outline:none; transform:translateY(-1px); }
.gift h2{ font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em; margin:0; }
.gift p{ margin:0; color:var(--fg-soft); font-size:14px; }
.gift .go{ margin-top:auto; font-weight:700; font-size:14px; color:var(--accent-text); }
.badge{
  align-self:flex-start; font-family:var(--font-mono); font-size:11px; font-weight:500;
  color:var(--accent-text); background:var(--accent-soft); padding:4px 9px; border-radius:6px;
}
.empty{
  border:1px dashed var(--line); border-radius:var(--radius); padding:34px 20px; text-align:center; color:var(--fg-soft);
}
.empty h2{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--fg); margin:0 0 6px; }
.empty p{ margin:0 auto; max-width:46ch; font-size:14px; }

/* ---------- gift page ---------- */
.gift-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width:820px){ .gift-layout{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.card h2{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.01em; margin:0 0 6px; }
.card .sub{ color:var(--fg-soft); font-size:14px; margin:0 0 16px; }
.checks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; }
.checks li::before{
  content:""; flex:0 0 20px; height:20px; margin-top:2px; border-radius:6px; background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%235fb027' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:20px 20px;
}
.checks b{ display:block; font-weight:600; }
.checks span{ color:var(--fg-soft); font-size:14px; }
.preview-img{
  margin-top:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2);
  aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; color:var(--fg-faint); font-size:13px; text-align:center; padding:12px;
}
.preview-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.form-card{ position:sticky; top:16px; }
@media (max-width:820px){ .form-card{ position:static; } }
.form-slot{ min-height:120px; }
.form-pending{
  border:1px dashed var(--warn); background:var(--warn-soft); color:var(--warn);
  border-radius:12px; padding:16px; font-size:13px; line-height:1.5;
}
.form-pending code{ font-family:var(--font-mono); font-size:12px; }
.privacy{ font-size:12px; color:var(--fg-faint); margin:12px 0 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; padding:13px 20px; border-radius:11px;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--accent-hover); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--fg-faint); }
.btn-block{ width:100%; }

/* ---------- thank-you page ---------- */
.steps{ counter-reset:s; list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:12px; }
.steps li{ counter-increment:s; display:flex; gap:12px; align-items:flex-start; color:var(--fg-soft); font-size:14px; }
.steps li::before{
  content:counter(s); flex:0 0 24px; height:24px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12px; color:var(--accent-text); background:var(--accent-soft);
}
.steps b{ color:var(--fg); font-weight:600; }
.next{ margin-top:18px; }
.next .row{ display:flex; gap:10px; flex-wrap:wrap; }

footer{ text-align:center; color:var(--fg-faint); font-size:12px; margin-top:32px; }
footer a{ color:inherit; }

@media (max-width:560px){
  .band{ padding:24px 18px; }
  .card{ padding:18px; }
  .next .row .btn{ flex:1; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }