/* ============================================================
   Carta MMM — CSS compartilhado entre todas as cartas Gabriela
   Paleta navy + gold, Plus Jakarta Sans + Inter
   ============================================================ */

:root {
  --c-bg: #ffffff; --c-bg-soft: #f5f7fa; --c-bg-muted: #eef1f6;
  --c-surface: #ffffff; --c-surface-2: #fafbfd;
  --c-text: #0e1f3a; --c-text-strong: #051124;
  --c-text-muted: #4a5868; --c-text-soft: #7c8696;
  --c-primary: #0e1f3a; --c-primary-2: #1a3160; --c-primary-deep: #051124;
  --c-accent: #d49029; --c-accent-hi: #e5a23b;
  --c-accent-dim: #a86d18; --c-accent-tint: rgba(212,144,41,0.10);
  --c-line: #e2e6ec; --c-line-soft: #eef0f4;
  --c-whatsapp: #25D366;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(14,31,58,.06);
  --shadow-md: 0 6px 24px rgba(14,31,58,.07);
  --shadow-navy: 0 12px 32px rgba(14,31,58,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:#fafbfd; color:var(--c-text);
  font-family:var(--font-body); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Sticky header */
.welcome-top { position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line); padding:14px 0; }
.welcome-top-inner { max-width:880px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; }
.welcome-top .doc-label { color:var(--c-text-muted); font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.welcome-top img.brand-m3 { height:34px; width:auto; }

/* Hero */
.welcome-hero {
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(212,144,41,.12), transparent 60%),
    linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
  color:#fff; padding:90px 24px 80px;
}
.welcome-hero-inner { max-width:880px; margin:0 auto; }
.welcome-hero .from {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); padding:8px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-size:.85rem; margin-bottom:22px; color:rgba(255,255,255,.95);
}
.welcome-hero h1 { font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing:-0.035em; line-height:1.08; margin:0 0 22px; }
.welcome-hero h1 em { color:var(--c-accent-hi); font-style:normal; }
.welcome-hero .subtitle { font-size:1.12rem; color:rgba(255,255,255,.85);
  max-width:640px; margin:0 0 26px; line-height:1.65; }
.welcome-hero .meta { display:inline-flex; align-items:center; gap:14px;
  font-size:.8rem; color:var(--c-accent-hi);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.welcome-hero .meta::before, .welcome-hero .meta::after {
  content:"—"; color:var(--c-accent); letter-spacing:0; }

/* Audio card */
.audio-card { max-width:760px; margin:-42px auto 0; padding:0 24px;
  position:relative; z-index:10; }
.audio-card-inner {
  background:linear-gradient(135deg, #fff 0%, #fafbfd 100%);
  border:1px solid var(--c-line); border-top:4px solid var(--c-accent);
  border-radius:var(--radius-lg); padding:26px 28px;
  box-shadow:var(--shadow-md);
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
}
.audio-card-icon { width:56px; height:56px; border-radius:14px;
  background:linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  display:grid; place-items:center; color:var(--c-accent-hi);
  box-shadow:0 6px 18px rgba(14,31,58,.18); }
.audio-card-icon svg { width:28px; height:28px; }
.audio-card-content { display:flex; flex-direction:column; gap:12px; }
.audio-card-top { display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; }
.audio-card-title { font-family:var(--font-display); font-weight:700;
  font-size:1.02rem; color:var(--c-text-strong); letter-spacing:-0.01em; }
.audio-card-meta { font-size:.78rem; color:var(--c-text-soft);
  letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.audio-card audio { width:100%; height:38px; }
@media (max-width: 580px) {
  .audio-card-inner { grid-template-columns:1fr; gap:14px; padding:22px 20px; }
  .audio-card-icon { width:48px; height:48px; }
  .audio-card-icon svg { width:24px; height:24px; }
}

/* Privacy banner */
.privacy-banner { max-width:880px; margin:22px auto 0; padding:0 24px;
  position:relative; z-index:5; }
.privacy-banner-inner { background:#fff; border:1px solid var(--c-line);
  border-left:4px solid var(--c-accent); border-radius:var(--radius-md);
  padding:14px 22px; box-shadow:var(--shadow-sm);
  display:flex; align-items:flex-start; gap:14px;
  font-size:.9rem; color:var(--c-text-muted); line-height:1.55; }
.privacy-banner-inner svg { flex-shrink:0; margin-top:2px; color:var(--c-accent-dim); }
.privacy-banner-inner strong { color:var(--c-text-strong); font-weight:600; }
.privacy-banner-inner code { font-family:var(--font-mono); font-size:.85em;
  background:var(--c-bg-soft); padding:1px 5px; border-radius:3px; color:var(--c-text); }

/* Construction banner */
.construction-banner { max-width:880px; margin:14px auto 0; padding:0 24px; }
.construction-banner-inner {
  background:linear-gradient(135deg, rgba(212,144,41,.08), rgba(212,144,41,.03));
  border:1px solid rgba(212,144,41,.30);
  border-radius:var(--radius-md); padding:14px 22px;
  display:flex; align-items:center; gap:14px;
  font-size:.88rem; color:var(--c-text-muted); line-height:1.55;
}
.construction-banner-inner svg { flex-shrink:0; color:var(--c-accent-dim); }
.construction-banner-inner strong { color:var(--c-accent-dim); font-weight:700; }
.construction-banner-inner a { color:var(--c-accent-dim); font-weight:600; text-decoration:underline; }

/* Article */
.article.welcome { max-width:760px; margin:0 auto; padding:50px 24px 60px; }
.welcome p.lead { font-size:1.16rem; line-height:1.65; color:var(--c-text); font-weight:400;
  border-left:3px solid var(--c-accent); background:rgba(212,144,41,0.04);
  padding:20px 24px; border-radius:0 8px 8px 0; margin:0 0 40px; }
.welcome p.lead strong { color:var(--c-text-strong); font-weight:600; }
.welcome h2 { font-family:var(--font-display); font-weight:700;
  font-size:1.65rem; color:var(--c-text-strong);
  letter-spacing:-0.025em; line-height:1.25;
  margin:2.5em 0 .7em; position:relative; padding-left:88px; }
.welcome h2 .num { position:absolute; left:0; top:8px;
  font-size:.72rem; letter-spacing:.22em; color:var(--c-accent);
  font-weight:700; text-transform:uppercase; font-family:var(--font-body); }
.welcome h3 { font-family:var(--font-display); font-size:1.15rem;
  font-weight:600; color:var(--c-text-strong);
  margin:1.8em 0 .5em; letter-spacing:-0.015em; }
.welcome p { font-size:1rem; line-height:1.75; color:var(--c-text); margin:0 0 1.2em; }
.welcome ul, .welcome ol { padding-left:24px; margin:0 0 1.4em; }
.welcome li { margin-bottom:.5em; line-height:1.7; }
.welcome li::marker { color:var(--c-accent); }
.welcome strong { color:var(--c-text-strong); font-weight:600; }
.welcome em { color:var(--c-accent-dim); font-style:normal; font-weight:600; }
.welcome code { font-family:var(--font-mono); font-size:.88em;
  background:var(--c-bg-soft); padding:1px 6px; border-radius:3px; color:var(--c-text); }
.welcome a { color:var(--c-accent-dim); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; }
.welcome a:hover { color:var(--c-accent); }

.dots { text-align:center; margin:50px 0;
  color:var(--c-accent); letter-spacing:.5em; font-size:1.2rem; }

.welcome .callout {
  background:linear-gradient(135deg, #fff, var(--c-bg-soft));
  border:1px solid var(--c-line); border-left:4px solid var(--c-accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:22px 26px; margin:1.8em 0;
}
.welcome .callout strong:first-child {
  color:var(--c-primary); display:block; margin-bottom:6px;
  font-size:1.05rem; font-family:var(--font-display); font-weight:700;
}
.welcome .callout p:last-child { margin:0; color:var(--c-text-muted); }

.welcome blockquote { margin:1.6em 0; padding:20px 26px;
  background:var(--c-primary); color:rgba(255,255,255,.92);
  border-radius:var(--radius-md); font-style:italic; font-size:1rem; }
.welcome blockquote p { color:rgba(255,255,255,.92); margin:0; }

/* Tag pills */
.tech-pills { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 24px; }
.tech-pill { display:inline-block; padding:5px 12px;
  background:rgba(212,144,41,.08); border:1px solid rgba(212,144,41,.20);
  color:var(--c-accent-dim);
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  border-radius:999px; font-family:var(--font-body); }

/* Hub model section (used in carta 2) */
.hub-model {
  background:linear-gradient(135deg, #fff 0%, var(--c-bg-soft) 100%);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg); padding:32px 28px;
  margin:2em 0 3em; box-shadow:var(--shadow-md);
  position:relative;
}
.hub-model::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--c-accent), var(--c-accent-hi), var(--c-accent));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.hub-model-eyebrow {
  font-family:var(--font-body); font-size:.74rem;
  letter-spacing:.22em; color:var(--c-accent-dim);
  text-transform:uppercase; font-weight:700; margin-bottom:8px;
}
.hub-model h3 { font-family:var(--font-display); font-weight:700;
  font-size:1.35rem; color:var(--c-text-strong);
  letter-spacing:-0.02em; line-height:1.3; margin:0 0 12px; }
.hub-model > p { font-size:.98rem; line-height:1.65; color:var(--c-text-muted);
  max-width:600px; margin:0 0 24px; }
.hub-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:20px; }
.hub-tile { background:#fff; border:1px solid var(--c-line);
  border-radius:var(--radius-md); padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:8px; }
.hub-tile-icon { width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, rgba(212,144,41,.12), rgba(212,144,41,.04));
  border:1px solid rgba(212,144,41,.20);
  display:grid; place-items:center; color:var(--c-accent-dim); }
.hub-tile-icon svg { width:18px; height:18px; }
.hub-tile-title { font-family:var(--font-display); font-weight:700;
  font-size:.95rem; color:var(--c-text-strong); letter-spacing:-0.01em; }
.hub-tile-desc { font-size:.82rem; line-height:1.5; color:var(--c-text-muted); }
.hub-tile-count { font-family:var(--font-display); font-weight:800;
  color:var(--c-accent-dim); font-size:1.2rem;
  letter-spacing:-0.02em; margin-top:auto; padding-top:8px; }
@media (max-width: 680px) {
  .hub-grid { grid-template-columns:1fr; }
  .hub-model { padding:26px 22px; }
}

/* Stats row */
.stats-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:28px 0; }
.stats-row .stat { background:#fff; border:1px solid var(--c-line);
  border-radius:var(--radius-md); padding:22px 16px; text-align:center; }
.stats-row .stat .n { font-family:var(--font-display); font-weight:800;
  color:var(--c-primary); font-size:1.95rem;
  letter-spacing:-0.03em; line-height:1.1; margin-bottom:6px; }
.stats-row .stat .label { color:var(--c-text-muted); font-size:.8rem; line-height:1.4; }
@media (max-width: 720px) { .stats-row { grid-template-columns:1fr; } }

/* Closing card */
.welcome-close { background:linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color:#fff; padding:60px 28px; text-align:center;
  border-radius:var(--radius-xl); margin:60px 0 20px;
  box-shadow:var(--shadow-navy); }
.welcome-close h2 { color:#fff; padding:0; font-size:1.85rem; margin:0 0 14px;
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; }
.welcome-close h2 .num { display:none; }
.welcome-close p { color:rgba(255,255,255,.88); max-width:560px;
  margin:0 auto 24px; font-size:1.04rem; }
.welcome-close a.btn-pri {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--c-primary);
  padding:14px 26px; border-radius:999px;
  text-decoration:none; font-weight:700;
  font-family:var(--font-display); letter-spacing:-0.005em;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.welcome-close a.btn-pri:hover {
  transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,0.24);
}
.welcome-close .contact-meta { margin-top:18px; color:rgba(255,255,255,.7); font-size:.88rem; }

/* Signature */
.signature { text-align:center; padding:40px 0 60px; }
.signature img.m3-sig { height:50px; width:auto; opacity:.95; margin-bottom:16px; }
.signature .name { font-family:var(--font-display); font-weight:700;
  color:var(--c-text-strong); font-size:1.15rem;
  letter-spacing:-0.01em; margin-bottom:2px; }
.signature .role { color:var(--c-text-muted); font-size:.9rem; margin-bottom:14px; }
.signature .since { font-style:italic; color:var(--c-text-soft); font-size:.9rem; margin-bottom:18px; }
.signature .date { letter-spacing:.25em; text-transform:uppercase;
  font-size:.7rem; color:var(--c-text-soft); font-weight:500; }