/* =========================================================
   Aliança — CSS das páginas interiores
   Daily Shot Solutions · 24H Draft
   ========================================================= */

/* ---------- Hero de página ---------- */
.phero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 85% -20%, #21306F 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color:#fff; padding:clamp(52px,6vw,84px) 0 clamp(44px,5vw,68px);
}
.phero__rings{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:min(620px,64vw); color:rgba(229,179,58,.13); pointer-events:none;
}
.phero__inner{ position:relative; }

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 26px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.crumb a{ color:rgba(255,255,255,.7); text-decoration:none; }
.crumb a:hover{ color:var(--gold); }
.crumb span{ opacity:.4; }

.phero__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,1.3rem+3.6vw,4.2rem);
  line-height:.98; letter-spacing:-.04em; margin:18px 0 0; max-width:18ch;
}
.phero__title em{ font-style:normal; color:var(--gold); }
.phero__lead{ max-width:56ch; margin:22px 0 0; color:rgba(255,255,255,.72); font-size:1.08rem; }
.phero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin:52px 0 0; background:var(--line-lite);
  border:1px solid var(--line-lite); border-radius:12px; overflow:hidden;
}
.facts div{ background:var(--navy-deep); padding:22px 20px; }
.facts dt{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 10px;
}
.facts dd{
  margin:0; font-family:var(--display); font-weight:700; font-size:1.28rem;
  letter-spacing:-.02em; color:var(--gold); line-height:1.15;
}
.facts dd small{ display:block; font-family:var(--body); font-weight:400; font-size:.78rem; color:rgba(255,255,255,.5); letter-spacing:0; margin-top:5px; }

/* ---------- Secções ---------- */
.sec{ padding:clamp(60px,7vw,100px) 0; }
.sec--cream{ background:var(--cream); }
.sec--sand{ background:var(--cream-2); }
.sec--navy{ background:var(--navy); color:#fff; }
.sec--deep{ background:var(--navy-deep); color:#fff; }
.sec--gold{ background:var(--gold); color:var(--navy); }

.sec__head{ max-width:720px; margin-bottom:46px; }
.sec__head p.sub{ margin:16px 0 0; color:var(--slate); }
.sec--navy .sec__head p.sub, .sec--deep .sec__head p.sub{ color:rgba(255,255,255,.62); }

.prose{ max-width:66ch; }
.prose p{ color:var(--slate); }
.sec--navy .prose p, .sec--deep .prose p{ color:rgba(255,255,255,.7); }
.prose p + p{ margin-top:16px; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.grid2--tight{ gap:28px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ---------- Tabela comparativa ---------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.sec--navy .tbl-wrap, .sec--deep .tbl-wrap{ border-color:var(--line-lite); background:rgba(255,255,255,.04); }

.tbl{ width:100%; border-collapse:collapse; min-width:640px; font-size:.95rem; }
.tbl th, .tbl td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.sec--navy .tbl th, .sec--navy .tbl td,
.sec--deep .tbl th, .sec--deep .tbl td{ border-bottom-color:var(--line-lite); }
.tbl thead th{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); font-weight:500; background:var(--cream-2);
}
.sec--navy .tbl thead th, .sec--deep .tbl thead th{ color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); }
.tbl tbody th{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:1rem; }
.sec--navy .tbl tbody th, .sec--deep .tbl tbody th{ color:#fff; }
.tbl td{ color:var(--slate); }
.sec--navy .tbl td, .sec--deep .tbl td{ color:rgba(255,255,255,.7); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:rgba(229,179,58,.05); }
.tbl .yes{ color:#1E7A4E; font-weight:600; }
.tbl .no{ color:#C0392B; font-weight:600; }
.sec--navy .tbl .yes, .sec--deep .tbl .yes{ color:#5FD39B; }
.sec--navy .tbl .no, .sec--deep .tbl .no{ color:#F08A96; }
.tbl__hi{ background:rgba(229,179,58,.1) !important; }

.tag{
  display:inline-block; font-family:var(--mono); font-size:.6rem; font-weight:700;
  letter-spacing:.08em; padding:4px 9px; border-radius:5px;
  background:var(--navy); color:var(--gold);
}
.sec--navy .tag, .sec--deep .tag{ background:var(--gold); color:var(--navy); }

/* ---------- Gráfico de barras ---------- */
.bars{ display:grid; gap:20px; margin:0; }
.bar__top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:9px; }
.bar__label{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--navy); letter-spacing:-.01em; }
.sec--navy .bar__label, .sec--deep .bar__label{ color:#fff; }
.bar__val{ font-family:var(--mono); font-size:.78rem; color:var(--gold); font-weight:500; white-space:nowrap; }
.bar__track{ height:12px; border-radius:99px; background:rgba(19,28,78,.09); overflow:hidden; }
.sec--navy .bar__track, .sec--deep .bar__track{ background:rgba(255,255,255,.1); }
.bar__fill{
  height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-lite));
  transition:width 1.1s var(--ease);
}
.bar__fill--navy{ background:linear-gradient(90deg, var(--navy-soft), var(--navy)); }
.bar__note{ margin:8px 0 0; font-size:.83rem; color:var(--slate); }
.sec--navy .bar__note, .sec--deep .bar__note{ color:rgba(255,255,255,.5); }

.chart-note{
  margin:26px 0 0; font-family:var(--mono); font-size:.63rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate); opacity:.7;
}
.sec--navy .chart-note, .sec--deep .chart-note{ color:rgba(255,255,255,.4); opacity:1; }

/* ---------- Donut ---------- */
.donut{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.donut__svg{ width:220px; flex:none; transform:rotate(-90deg); }
.donut__svg circle{ fill:none; stroke-width:22; }
.donut__legend{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.donut__legend li{ display:flex; align-items:baseline; gap:12px; font-size:.94rem; color:var(--slate); }
.sec--navy .donut__legend li, .sec--deep .donut__legend li{ color:rgba(255,255,255,.7); }
.donut__legend i{ width:12px; height:12px; border-radius:3px; flex:none; }
.donut__legend b{ font-family:var(--display); color:var(--navy); }
.sec--navy .donut__legend b, .sec--deep .donut__legend b{ color:#fff; }

/* ---------- Timeline ---------- */
.tl{ list-style:none; margin:0; padding:0; position:relative; }
.tl::before{
  content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg, var(--gold), rgba(229,179,58,.15));
}
.tl li{ position:relative; padding:0 0 34px 72px; }
.tl li:last-child{ padding-bottom:0; }
.tl__dot{
  position:absolute; left:0; top:0;
  width:48px; height:48px; border-radius:50%;
  border:3px solid var(--gold); background:var(--cream);
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:.9rem; color:var(--navy);
}
.sec--navy .tl__dot, .sec--deep .tl__dot{ background:var(--navy); color:var(--gold); }
.sec--sand .tl__dot{ background:var(--cream-2); }
.tl h3{ font-family:var(--display); font-weight:700; font-size:1.2rem; margin:8px 0 8px; color:var(--navy); letter-spacing:-.02em; }
.sec--navy .tl h3, .sec--deep .tl h3{ color:#fff; }
.tl p{ margin:0; color:var(--slate); font-size:.96rem; max-width:56ch; }
.sec--navy .tl p, .sec--deep .tl p{ color:rgba(255,255,255,.68); }
.tl__meta{
  display:inline-block; margin-top:10px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold);
}

/* ---------- Callout ---------- */
.callout{
  border-left:3px solid var(--gold); padding:20px 24px; border-radius:0 10px 10px 0;
  background:rgba(229,179,58,.08); margin:32px 0 0;
}
.sec--navy .callout, .sec--deep .callout{ background:rgba(255,255,255,.05); }
.callout p{ margin:0; font-size:.95rem; color:var(--slate); }
.sec--navy .callout p, .sec--deep .callout p{ color:rgba(255,255,255,.72); }
.callout strong{ color:var(--navy); }
.sec--navy .callout strong, .sec--deep .callout strong{ color:var(--gold); }
.callout__t{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); margin:0 0 8px !important;
}

/* ---------- Cartões genéricos ---------- */
.box{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; }
.sec--navy .box, .sec--deep .box{ background:rgba(255,255,255,.04); border-color:var(--line-lite); }
.box h3{ font-family:var(--display); font-weight:700; font-size:1.22rem; margin:16px 0 10px; color:var(--navy); letter-spacing:-.02em; }
.sec--navy .box h3, .sec--deep .box h3{ color:#fff; }
.box p{ margin:0; color:var(--slate); font-size:.95rem; }
.sec--navy .box p, .sec--deep .box p{ color:rgba(255,255,255,.68); }
.box__n{
  font-family:var(--mono); font-weight:700; font-size:.72rem; letter-spacing:.12em;
  color:var(--gold);
}

/* ---------- Checklist ---------- */
.chk{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.chk li{ position:relative; padding-left:32px; color:var(--slate); font-size:.96rem; }
.sec--navy .chk li, .sec--deep .chk li{ color:rgba(255,255,255,.7); }
.chk li::before{
  content:""; position:absolute; left:0; top:.32em; width:17px; height:17px; border-radius:50%;
  border:2px solid var(--gold);
}
.chk li::after{
  content:""; position:absolute; left:5px; top:.62em; width:7px; height:4px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}
.chk--x li::before{ border-color:#C0392B; }
.chk--x li::after{ border-color:#C0392B; transform:none; left:5.5px; top:.62em; width:6px; height:0; border-left:0; border-bottom:2px solid #C0392B; }

/* ---------- Calculadora / Wizard ---------- */
.tool-card{
  background:#0F1533; border:1px solid var(--line-lite); border-radius:16px;
  padding:34px 32px; box-shadow:0 40px 80px -46px rgba(0,0,0,.75); color:#fff;
}
.tool-card h3{ font-family:var(--display); font-weight:800; font-size:1.5rem; margin:0 0 8px; letter-spacing:-.02em; }
.tool-card > p{ margin:0 0 26px; color:rgba(255,255,255,.6); font-size:.95rem; }

.tfield{ margin-bottom:18px; }
.tfield label{
  display:block; font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px;
}
.tfield input, .tfield select{
  width:100%; font-family:var(--body); font-size:.98rem; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid var(--line-lite);
  border-radius:9px; padding:13px 15px;
}
.tfield input:focus, .tfield select:focus{ border-color:var(--gold); outline:none; }
.tfield select option{ background:#0F1533; color:#fff; }

.tresult{
  margin-top:24px; padding:24px; border-radius:12px;
  background:rgba(229,179,58,.1); border:1px solid rgba(229,179,58,.3);
}
.tresult__k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.tresult__v{ font-family:var(--display); font-weight:800; font-size:1.9rem; letter-spacing:-.03em; margin:0; line-height:1.05; }
.tresult__d{ margin:12px 0 0; font-size:.92rem; color:rgba(255,255,255,.65); }
.tresult--warn{ background:rgba(224,89,107,.1); border-color:rgba(224,89,107,.35); }
.tresult--warn .tresult__k{ color:#F08A96; }

/* wizard */
.wiz__step{ display:none; }
.wiz__step.is-on{ display:block; }
.wiz__q{ font-family:var(--display); font-weight:700; font-size:1.35rem; margin:0 0 20px; letter-spacing:-.02em; }
.wiz__opts{ display:grid; gap:10px; }
.wiz__opt{
  text-align:left; font-family:var(--body); font-size:.96rem;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.85);
  border:1px solid var(--line-lite); border-radius:10px; padding:15px 18px; cursor:pointer;
  transition:.2s var(--ease);
}
.wiz__opt:hover{ border-color:var(--gold); background:rgba(229,179,58,.08); }
.wiz__opt small{ display:block; margin-top:4px; color:rgba(255,255,255,.45); font-size:.82rem; }
.wiz__bar{ height:3px; background:rgba(255,255,255,.1); border-radius:3px; margin-bottom:26px; overflow:hidden; }
.wiz__bar i{ display:block; height:100%; width:33%; background:var(--gold); transition:width .4s var(--ease); }
.wiz__back{
  background:none; border:0; cursor:pointer; margin-top:18px;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.wiz__back:hover{ color:var(--gold); }

.wiz__res{ text-align:center; padding:10px 0; }
.wiz__plate{
  display:inline-flex; align-items:stretch; background:#fff; border:2px solid #101427;
  border-radius:6px; overflow:hidden; min-width:150px; height:74px; margin-bottom:22px;
}
.wiz__plate span{
  width:26px; background:linear-gradient(180deg,#1c3fa0,#12277a); color:var(--gold-lite);
  font-family:var(--mono); font-size:.62rem; font-weight:700; display:grid; place-items:end center; padding-bottom:7px;
}
.wiz__plate strong{ flex:1; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:2rem; color:#101427; letter-spacing:.06em; padding:0 18px; }
.wiz__res h4{ font-family:var(--display); font-weight:800; font-size:1.6rem; margin:0 0 10px; letter-spacing:-.02em; }
.wiz__res p{ color:rgba(255,255,255,.65); margin:0 auto 24px; max-width:40ch; font-size:.95rem; }
.wiz__res-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- Escada de consequências ---------- */
.stairs{ display:grid; gap:12px; }
.stair{
  display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:20px 24px; background:#fff;
  border-left-width:4px;
}
.stair--1{ border-left-color:#3FBF7F; }
.stair--2{ border-left-color:#E5B33A; }
.stair--3{ border-left-color:#E38B3C; }
.stair--4{ border-left-color:#C0392B; }
.stair__k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); font-weight:700; }
.stair__v{ margin:0; color:var(--slate); font-size:.95rem; }
.stair__v strong{ color:var(--navy); }

/* ---------- Faixa CTA de página ---------- */
.pcta{ background:var(--gold); color:var(--navy); padding:clamp(50px,6vw,78px) 0; }
.pcta__inner{ display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between; }
.pcta h2{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(1.7rem,1.1rem+2.2vw,2.7rem); margin:0; color:var(--navy); max-width:20ch;
}
.pcta h2 em{ font-style:normal; color:#fff; }
.pcta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.pcta .btn--gold{ --bg:var(--navy); --fg:var(--gold); }
.pcta .btn--gold:hover{ --bg:var(--navy-soft); }
.pcta .btn--outline{ --fg:var(--navy); --bd:rgba(19,28,78,.4); }
.pcta .btn--outline:hover{ --bd:var(--navy); --fg:var(--navy); }

/* ---------- Próximas páginas ---------- */
.next{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.next a{
  display:block; text-decoration:none; padding:24px 26px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:.3s var(--ease);
}
.next a:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 20px 40px -30px rgba(19,28,78,.5); }
.next b{ display:block; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--navy); letter-spacing:-.01em; }
.next span{ display:block; margin-top:6px; font-size:.87rem; color:var(--slate); }

/* ---------- Fonte / rodapé legal ---------- */
.source{
  margin:34px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--slate);
}
.sec--navy .source, .sec--deep .source{ border-top-color:var(--line-lite); color:rgba(255,255,255,.45); }
.source a{ color:inherit; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .grid2{ grid-template-columns:1fr; gap:36px; }
  .grid3, .next{ grid-template-columns:1fr 1fr; }
  .facts{ grid-template-columns:1fr 1fr; }
  .donut{ gap:28px; }
}
@media (max-width:640px){
  .grid3, .next{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .tl li{ padding-left:60px; }
  .tl::before{ left:19px; }
  .tl__dot{ width:40px; height:40px; font-size:.8rem; }
  .stair{ grid-template-columns:1fr; gap:10px; }
  .tool-card{ padding:26px 22px; }
  .donut__svg{ width:170px; margin-inline:auto; }
  .pcta__inner{ flex-direction:column; align-items:flex-start; }
}
