/* Secretária Virtual — home em dois passos (02/10/2026, D-2026-10-02-SITE1) · squad sites.
   Acréscimos por cima do v6.css do SVSuite (mesmo visual vivo): logo da SV, a faixa "1 · 2" do herói, a seção "Dois passos",
   os 4 cartões "quando as secretárias entram", a chamada da franquia, o cartão "Passo 2" dos preços, "Na mídia" e os selos do rodapé. */

/* ---------- logo da Secretária Virtual (o oficial, fundo transparente) ---------- */
.marca-sv{gap:0}
.marca-sv .logo-sv{height:46px;width:auto;display:block}
.topo-acoes .ln svg.i{width:18px;height:18px;stroke:var(--ciano-cl)}
footer .marca-sv .logo-sv{height:42px}
footer .endereco{margin-top:10px;font-size:14px;color:rgba(255,255,255,.62)}
footer .selos{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
footer .selos img{height:40px;width:auto;background:#fff;border-radius:8px;padding:5px 8px}
footer .base a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}

/* ---------- herói: os dois passos em uma linha ---------- */
.heroi .dois{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0}
.heroi .dois li{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(12,28,72,.62);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;min-width:0}
.heroi .dois b{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--ciano),#0B6DAE);color:var(--navy);box-shadow:0 8px 18px rgba(76,176,234,.35)}
.heroi .dois li:nth-child(2) b{background:linear-gradient(135deg,#FFB46B,var(--cta));color:#fff;box-shadow:0 8px 18px rgba(200,69,15,.35)}
.heroi .dois span{display:flex;flex-direction:column;line-height:1.25}
.heroi .dois strong{font-size:15px;font-weight:700}
.heroi .dois small{font-size:13px;color:rgba(255,255,255,.74)}
.heroi .acoes{margin-top:24px}

.heroi .liga{margin-top:18px;font-size:15px;color:rgba(255,255,255,.78)}
.heroi .liga a{color:var(--ciano-cl);font-weight:600;border-bottom:1px solid rgba(155,214,246,.4)}
.heroi .liga a:hover{color:#fff}
.heroi h1{font-size:clamp(40px,3.9vw,56px);letter-spacing:-.04em}
@media (min-width:1081px){.heroi .wrap{grid-template-columns:minmax(0,620px) minmax(0,1fr)}}

/* ---------- a seção "Dois passos" ---------- */
.passos2{display:grid;grid-template-columns:1fr 150px 1fr;gap:0;align-items:stretch;max-width:1100px;margin:0 auto}
.passo2{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-radius:26px;padding:36px 34px 34px;box-shadow:var(--sombra);overflow:hidden}
.passo2 .num{position:absolute;top:10px;right:22px;font-size:132px;line-height:1;font-weight:800;letter-spacing:-.06em;color:var(--azul);opacity:.07;pointer-events:none;font-family:'Plus Jakarta Sans',Inter,sans-serif}
.passo2 .olho{position:relative}
.passo2 h3{position:relative;font-size:clamp(24px,2.3vw,30px);line-height:1.1;letter-spacing:-.025em;margin:10px 0 12px;color:var(--tinta);text-wrap:balance}
.passo2>p{position:relative;color:var(--cinza);font-size:17px;line-height:1.55}
.passo2 ul{position:relative;list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px;flex:1}
.passo2 li{display:flex;gap:10px;font-size:16px;color:var(--tinta)}
.passo2 li svg{width:19px;height:19px;stroke:#1B8F52;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:3px;flex:none}
.passo2 .btn{position:relative;width:100%}
.passo2.gente2{background:linear-gradient(165deg,#083397,#061C5C);border-color:transparent;color:#fff;box-shadow:0 30px 70px rgba(8,51,151,.30)}
.passo2.gente2 .num{color:#fff;opacity:.09}
.passo2.gente2 .olho{color:var(--ciano-cl)}
.passo2.gente2 h3{color:#fff}
.passo2.gente2>p{color:rgba(255,255,255,.80)}
.passo2.gente2 li{color:#fff}
.passo2.gente2 li svg{stroke:#5CE0A0}
.passo2.gente2 .btn-vidro{border-color:rgba(255,255,255,.35)}
.elo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 10px;text-align:center}
.elo span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra)}
.elo span svg{width:24px;height:24px;stroke:var(--azul2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.elo small{font-size:13px;font-weight:600;color:var(--cinza);line-height:1.35}
.obs-passos{max-width:900px;margin:22px auto 0;text-align:center;font-size:14.5px;color:var(--cinza2)}

/* ---------- quando as secretárias entram: 4 cartões ---------- */
@media (min-width:1081px){.dores.quatro{grid-template-columns:repeat(4,1fr)}}
@media (min-width:721px) and (max-width:1080px){.dores.quatro{grid-template-columns:1fr 1fr}}
.dores.quatro .dor .ic{background:#E9F3FF}
.dores.quatro .dor .ic svg{stroke:var(--azul2)}

/* ---------- a franquia: chamada para quem quer ser secretária virtual ---------- */
.franquia{display:flex;align-items:center;gap:18px;margin-top:22px;padding:22px 26px;border-radius:var(--raio);background:linear-gradient(135deg,#FFF6EF,#FFFFFF);border:1px solid #F3D9C8;color:var(--tinta);transition:box-shadow .3s,transform .3s var(--ease)}
.franquia:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.franquia .ic{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#FFB46B,var(--cta))}
.franquia .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.franquia>span:nth-child(2){flex:1;font-size:16px;color:var(--cinza)}
.franquia b{color:var(--tinta);font-weight:700;margin-right:4px}
.franquia .mais{font-weight:700;color:var(--cta);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.franquia .mais svg{transition:transform .3s}
.franquia:hover .mais svg{transform:translateX(4px)}

/* ---------- preços: a fita também no cartão claro (passo 2) ---------- */
.plano .fita{position:absolute;top:-13px;right:24px;background:var(--ciano);color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.05em;padding:5px 12px;border-radius:999px;z-index:1}
.plano .fita.fita-2{background:var(--cta);color:#fff}
.plano .preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}

/* ---------- na mídia ---------- */
.materias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.materias a{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 22px 20px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);transition:box-shadow .3s,transform .3s var(--ease)}
.materias a:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.materias b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ciano-esc)}
.materias span{font-size:16px;font-weight:600;color:var(--tinta);line-height:1.4}

/* ---------- telas menores ---------- */
@media (max-width:1080px){
  .passos2{grid-template-columns:1fr;max-width:720px}
  .elo{flex-direction:row;padding:18px 0;gap:14px}
  .elo span svg{transform:rotate(90deg)}
  .materias{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .marca-sv .logo-sv{height:36px}
  footer .marca-sv .logo-sv{height:36px}
  .heroi .dois{gap:8px}
  .heroi .dois li{flex:1 1 100%;padding:9px 12px 9px 9px}
  .passo2{padding:26px 20px 24px;border-radius:20px}
  .passo2 .num{font-size:96px;top:6px;right:14px}
  .franquia{flex-wrap:wrap;padding:18px}
  .franquia>span:nth-child(2){flex:1 1 calc(100% - 68px)}
  .franquia .mais{margin-left:68px}
  .materias{grid-template-columns:1fr}
  .materias a{padding:16px 16px 14px}
  footer .selos img{height:34px}
}