@charset "UTF-8";
/* ============================================================
   Jaguar Black Tecnologia — estilo das LANDINGS DE SERVIÇO
   Carregado depois de css/base.css, só nas páginas de serviço
   e no molde _modelo-servico.html.
   ============================================================ */

/* Hero da landing */
.hero-sec{position:relative;overflow:hidden;padding-block:clamp(48px,8vw,104px)}
.hero-sec>.container{position:relative;z-index:2}
.hero-sec .hero-inner{max-width:820px}
.hero-sec h1{margin-bottom:18px}
.hero-sec .glow{position:absolute;top:-160px;right:-120px;width:560px;height:560px;
  background:radial-gradient(circle,var(--accent-soft),transparent 62%);pointer-events:none;z-index:1}
.hero-sec .hero-note{margin-top:16px;font-size:.85rem;color:var(--text-dim);display:block}

/* Hero em duas colunas: texto + demonstração de conversa */
.hero-sec .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}

/* Demonstração de conversa (celular desenhado — estático, não interativo) */
.phone{width:300px;margin-inline:auto;background:#0b0f14;border:1px solid var(--border-strong);
  border-radius:30px;padding:14px 12px 18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.phone-top{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;
  border-bottom:1px solid var(--border);margin-bottom:12px}
.phone-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--secondary));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#04222b;font-size:.95rem;font-family:var(--font-head)}
.phone-name{font-size:.9rem;font-weight:600;color:#fff;font-family:var(--font-head)}
.phone-status{font-size:.7rem;color:#1fa861}
.chat{display:flex;flex-direction:column;gap:8px}
.bubble{max-width:82%;padding:8px 11px;border-radius:13px;font-size:.82rem;line-height:1.45}
.bubble.in{align-self:flex-start;background:#1b2330;border-bottom-left-radius:3px;color:var(--text)}
.bubble.out{align-self:flex-end;background:#123b2a;border-bottom-right-radius:3px;color:#d6f5e4}
.bubble .t{display:block;font-size:.62rem;color:var(--text-dim);margin-top:3px;text-align:right}
.typing{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;background:#1b2330;
  border-radius:13px;border-bottom-left-radius:3px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:bk 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes bk{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* Blocos da espinha narrativa */
.pain-grid,.feat-grid,.steps-grid{display:grid;gap:18px}
.pain-grid{grid-template-columns:repeat(2,1fr)}
.feat-grid{grid-template-columns:repeat(3,1fr)}
.steps-grid{grid-template-columns:repeat(3,1fr);counter-reset:st}

/* Problema */
.pain{background:var(--surface);border:1px solid var(--border);border-left:3px solid #c0573e;
  padding:20px 22px;border-radius:var(--radius-sm)}
.pain h3{color:#fff;font-size:1.02rem;margin-bottom:6px}

/* Como entra (passos numerados) */
.step{position:relative;background:var(--surface);border:1px solid var(--border);
  padding:26px 22px;border-radius:var(--radius)}
.step::before{counter-increment:st;content:"0" counter(st);font-family:var(--font-head);
  font-size:1.5rem;font-weight:600;color:var(--accent);display:block;margin-bottom:10px}
.step h3{color:#fff;font-size:1.05rem;margin-bottom:6px}

/* Âncora de valor */
.anchor-box{background:linear-gradient(135deg,var(--bg-soft),var(--surface));border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:clamp(32px,5vw,52px);text-align:center}
.anchor-box .small{font-size:.85rem;color:var(--text-dim);margin-top:16px}

/* Para quem é */
.who{max-width:62ch}
.who p+p{margin-top:14px}

@media(max-width:860px){
  .hero-sec .grid{grid-template-columns:1fr}
  .col-demo{order:-1}
  .pain-grid,.feat-grid,.steps-grid{grid-template-columns:1fr}
}