/* ==========================================================
   Páginas de serviço (sitelinks do Google Ads) — 02/10/2026
   Complementa o style.css; não altera nada da página inicial.
   ========================================================== */

.hero h1{max-width:20ch}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--navy)}

/* ---- antes e depois em formato de conversa ---- */
.ba{display:grid;gap:18px}
@media(min-width:820px){.ba{grid-template-columns:1fr 1fr;gap:28px}}
.chat{border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden;box-shadow:var(--shadow)}
.chat-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--mist)}
.chat-h .av{width:30px;height:30px;border-radius:50%;background:var(--navy-t);display:grid;place-items:center;font-family:var(--f-d);font-weight:700;font-size:13px;color:var(--navy)}
.chat-h b{font-size:14px;display:block;line-height:1.2}
.chat-h span{font-size:12px;color:var(--muted)}
.chat-h .tag{margin-left:auto;font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.chat.after .chat-h .tag{border-color:var(--teal);color:var(--teal)}
.chat-b{padding:16px;display:grid;gap:8px;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(27,79,140,.025) 22px 23px)}
.msg{max-width:84%;padding:9px 12px 18px;border-radius:10px;font-size:14px;line-height:1.45;position:relative;white-space:pre-line}
.msg time{position:absolute;right:9px;bottom:3px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.msg.in{background:var(--mist2);justify-self:start;border-top-left-radius:3px}
.msg.out{background:var(--navy-t);justify-self:end;border-top-right-radius:3px}
.msg.sys{justify-self:center;background:none;padding:4px 10px;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.msg.bad{justify-self:center;background:#FDF1EC;color:#8A3B12;font-size:13px;padding:6px 12px;border-radius:99px}
.ba-note{margin-top:14px;font-size:14px;color:var(--muted)}

/* ---- o que está incluído ---- */
.feat{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feat > div{background:var(--paper);padding:22px;display:grid;gap:8px;align-content:start}
.feat .ic{width:36px;height:36px;border-radius:var(--r);background:var(--navy-t);display:grid;place-items:center}
.feat .ic svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-family:var(--f-d);font-size:16.5px;font-weight:700;letter-spacing:-.02em}
.feat p{font-size:14.5px;color:var(--muted)}

/* ---- fluxo em linha ---- */
.flow{display:grid;gap:10px;counter-reset:f}
@media(min-width:860px){.flow{grid-template-columns:repeat(4,1fr);gap:0}}
.flow li{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:18px 18px 18px 18px}
@media(min-width:860px){
  .flow li{border-radius:0;border-right-width:0}
  .flow li:first-child{border-radius:var(--r) 0 0 var(--r)}
  .flow li:last-child{border-radius:0 var(--r) var(--r) 0;border-right-width:1px}
  .flow li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;background:var(--paper);border-top:1px solid var(--line);border-right:1px solid var(--line);transform:translateY(-50%) rotate(45deg);z-index:1}
}
.flow li::before{counter-increment:f;content:"0" counter(f);display:block;font-family:var(--f-m);font-size:12px;color:var(--teal);margin-bottom:6px}
.flow b{display:block;font-family:var(--f-d);font-size:15.5px;letter-spacing:-.015em}
.flow span{font-size:14px;color:var(--muted)}

/* ---- cartões de outras soluções ---- */
.more{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.more a{display:grid;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .16s}
.more a:hover{border-color:var(--navy)}
.more b{font-family:var(--f-d);font-size:16.5px;letter-spacing:-.02em}
.more span{font-size:14px;color:var(--muted)}
.more em{font-style:normal;font-family:var(--f-m);font-size:12px;color:var(--navy);margin-top:4px}

/* ---- planos com um ou dois itens não esticam ---- */
.plans.narrow{max-width:760px}

/* ---- faixa de chamada final ---- */
.cta-band{background:var(--navy);color:#fff}
.cta-band .wrap{display:grid;gap:18px;align-items:center;padding-block:clamp(40px,6vw,64px)}
@media(min-width:860px){.cta-band .wrap{grid-template-columns:1fr auto}}
.cta-band h2{font-family:var(--f-d);font-weight:700;letter-spacing:-.025em;font-size:clamp(23px,3vw,31px);line-height:1.15}
.cta-band p{color:#C9D8EA;margin-top:8px;max-width:58ch}
.cta-band .btn-p{background:#fff;color:var(--navy)}
.cta-band .btn-p:hover{background:var(--navy-t)}

/* ---- texto justificado no padrão da home ---- */
.feat p,.flow span,.ba-note{-webkit-hyphens:auto;hyphens:auto}

/* ---- ajustes de grade (02/10) ---- */
.flow{list-style:none;padding:0;margin:0}
.feat{grid-template-columns:1fr}
@media(min-width:600px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.feat{grid-template-columns:repeat(3,1fr)}.feat.f4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:600px) and (max-width:899px){.feat.f3 > div:last-child{grid-column:1/-1}}