:root{
  --navy:#09212C; --navy-2:#0F2E3B; --navy-3:#143B4B; --navy-deep:#061821;
  --gold:#97927D; --gold-2:#BFB79B; --gold-3:#E4DFCC;
  --paper:#F6F4EE; --muted:#93A5AD;
  --line:rgba(228,223,204,.14);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* o html precisa ter cor propria: e ele que aparece no "puxao" alem do fim
   da pagina no celular (overscroll) e nas laterais em tela larga */
html{
  background:var(--navy-deep);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--sans);
  background-color:var(--navy-deep);
  background-image:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--paper);
  min-height:100vh;min-height:100dvh;
  display:flex;justify-content:center;
  padding:0 0 46px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{width:100%;max-width:452px;overflow:hidden}

/* ---------- BLOCO DE IDENTIDADE ---------- */
.role{
  font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-2);
}
h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 96,"SOFT" 20;
  font-weight:600;line-height:1.04;
  letter-spacing:-.02em;text-wrap:balance;
}
.oab{font-size:12px;color:#BCCBD1;font-weight:500;letter-spacing:.01em}

.rule{display:flex;align-items:center;justify-content:center;gap:13px;margin:18px 0}
.rule span{height:1px;width:52px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.rule i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold-2)}

.lede{
  font-family:var(--serif);font-variation-settings:"opsz" 30;
  font-weight:400;font-size:18px;line-height:1.5;
  text-align:center;color:var(--gold-3);text-wrap:balance;
  padding:0 24px;
}
.lede em{font-style:italic;color:#fff;font-weight:500}

.prompt{
  margin:28px 24px 15px;text-align:center;
  font-size:10.5px;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- CARDS (estilo A) ---------- */
.paths{padding:0 20px;display:flex;flex-direction:column;gap:14px}
.path{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--navy-2);border:1px solid var(--line);border-radius:12px;
  padding:22px 20px 20px;overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,background .24s;
}
.path:hover{transform:translateY(-3px);border-color:rgba(228,223,204,.4);background:var(--navy-3)}
.path .num{
  position:absolute;bottom:-20px;right:14px;
  font-family:var(--serif);font-variation-settings:"opsz" 144,"WONK" 1;
  font-size:94px;font-weight:600;font-style:italic;line-height:1;
  color:rgba(228,223,204,.055);pointer-events:none;
}
.eyebrow{
  display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:10px;
}
.path h2{
  font-family:var(--serif);font-variation-settings:"opsz" 48;
  font-weight:600;font-size:21px;line-height:1.16;
  letter-spacing:-.012em;margin-bottom:8px;text-wrap:balance;
}
.path p{
  font-size:15px;line-height:1.56;color:#AEC0C7;letter-spacing:-.003em;
  text-wrap:pretty;
}
/* rodapé do card em uma única faixa — botão à esquerda, destino à direita */
.cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:16px;
}
.go{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  min-height:42px;padding:10px 16px;border-radius:9px;
  font-size:14px;font-weight:700;letter-spacing:-.008em;
  border:1px solid rgba(228,223,204,.34);color:var(--paper);
  transition:gap .24s;white-space:nowrap;
}
.path:hover .go{gap:13px}
.go svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.host{
  flex:1 1 auto;min-width:0;
  font-size:10px;letter-spacing:.01em;color:#788C94;
  text-align:right;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.path.lead{background:linear-gradient(158deg,#17414F,#0E2B37);border-color:rgba(191,183,155,.46)}
.path.lead .eyebrow{padding-right:116px}
.path.lead .go{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}
.path.lead p{color:#C3D2D8}
.tag{
  position:absolute;top:0;right:0;background:var(--gold-2);color:var(--navy);
  font-size:9.5px;font-weight:800;letter-spacing:.14em;
  padding:6px 13px;border-bottom-left-radius:12px;
}

/* ---------- RODAPÉ ---------- */
.foot{margin-top:34px;padding:0 24px;text-align:center}
.socials{display:flex;justify-content:center;gap:11px;margin-bottom:20px}
.socials a{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--gold-3);text-decoration:none;transition:.24s}
.socials a:hover{border-color:rgba(228,223,204,.42);color:#fff;transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.copy{font-size:11px;letter-spacing:.02em;color:#66787F}