/* Evolts · Landing /automacao/residencial — componentes extras.
   Carregado depois de app.css + lp-automacao.css; usa os mesmos tokens do site. */

.center { text-align: center; margin-top: 2.5rem; }

/* hero: eyebrow com ícone de local */
.hero--res .eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.hero--res .eyebrow svg { width: 1rem; height: 1rem; }
.hero--res .hero__sub { max-width: 40rem; }

/* ---------- seletor de fase (qualifica o lead) ---------- */
.phase-pick { margin-top: 2rem; max-width: 46rem; }
.phase-pick__q { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--primary-foreground) / .85); margin-bottom: .75rem; }
.phase-pick__grid { display: grid; gap: .6rem; }
@media (min-width: 720px) { .phase-pick__grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
.phase { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: .75rem; background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); text-decoration: none; box-shadow: var(--shadow-medium); transition: transform .2s, box-shadow .2s, background-color .2s; }
.phase:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); }
.phase:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 3px; }
.phase__ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .6rem; background: hsl(var(--accent) / .1); color: hsl(var(--accent)); }
.phase__ic svg { width: 1.25rem; height: 1.25rem; }
.phase__txt { display: grid; min-width: 0; }
.phase__txt strong { font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.phase__txt span { font-size: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.35; }
.phase__go svg { width: 1.1rem; height: 1.1rem; color: hsl(var(--accent)); transition: transform .2s; }
.phase:hover .phase__go svg { transform: translateX(3px); }
.phase-pick__alt { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .875rem; color: hsl(var(--primary-foreground) / .85); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(var(--primary-foreground) / .35); }
.phase-pick__alt svg { width: 1rem; height: 1rem; }
.phase-pick__alt:hover { color: hsl(var(--primary-foreground)); }
.phase-pick--dark { max-width: 60rem; margin: 0 auto 2.5rem; }

/* ---------- fatores do investimento ---------- */
.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .factors { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.factors li { padding: 1.6rem 1.5rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); box-shadow: var(--shadow-soft); }
.factors__n { display: block; font-size: 2.25rem; font-weight: 300; line-height: 1; color: hsl(var(--accent)); margin-bottom: .9rem; }
.factors h3 { font-size: 1.0625rem; font-weight: 600; }
.factors p { margin-top: .4rem; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.factors__cta { display: grid; gap: 1.25rem; justify-items: center; text-align: center; max-width: 44rem; margin: 2.5rem auto 0; }
.factors__cta p { font-size: .9375rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
@media (max-width: 559px) { .factors__cta .btn, .center .btn { width: 100%; white-space: normal; } }

/* ---------- serviços ---------- */
.svc { display: grid; gap: 1rem; }
@media (min-width: 640px) { .svc { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .svc { grid-template-columns: repeat(3, 1fr); } }
.svc__card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow .25s, transform .25s; }
.svc__card:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); }
.svc__card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.svc__card > div { padding: 1.2rem 1.3rem 1.4rem; }
.svc__card h3 { font-size: 1.0625rem; font-weight: 600; }
.svc__card p { margin-top: .35rem; font-size: .9rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
@media (max-width: 639px) {
  .svc__card { display: grid; grid-template-columns: 7rem 1fr; }
  .svc__card img { aspect-ratio: auto; height: 100%; }
  .svc__card > div { padding: .9rem 1rem; }
}

/* ---------- dores ---------- */
.pains { display: grid; gap: .85rem; margin: .5rem 0 1.5rem; }
.pain { padding: 1.1rem 1.25rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); box-shadow: var(--shadow-soft); }
.pain h3 { font-size: 1rem; font-weight: 600; color: hsl(var(--accent)); }
.pain p { margin-top: .3rem; font-size: .9rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

/* ---------- janela da obra ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.timeline li { position: relative; padding: 1.5rem 1.4rem 1.6rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: var(--shadow-soft); }
.timeline__tag { display: inline-block; margin-bottom: .9rem; padding: .25rem .65rem; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.timeline h3 { font-size: 1.0625rem; font-weight: 600; }
.timeline p { margin-top: .4rem; font-size: .9rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.timeline li.is-urgent { border-color: hsl(var(--accent) / .55); box-shadow: 0 0 0 1px hsl(var(--accent) / .25), var(--shadow-medium); }
.timeline li.is-urgent .timeline__tag { background: hsl(var(--accent)); }

/* ---------- rodapé: roteamento de parceiros e vagas ---------- */
.lp-foot__note { max-width: 1400px; margin: 1.5rem auto 0; padding: 0 1rem; text-align: center; font-size: .75rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.lp-foot__note a { color: hsl(var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  .phase, .svc__card, .phase__go svg { transition: none; }
}