/* ==========================================================
   ELCAN SERVICE — LANDING PAGE
   CSS puro, mobile-first, sem frameworks.
   ========================================================== */

/* ---------- Design tokens (Brandkit) ---------- */
:root {
  --azul: #2E7BBC;
  --azul-escuro: #246AA7;
  --laranja: #E57A1A;
  --amarelo: #D9AF2D;
  --preto: #232321;
  --branco: #FFFFFF;
  --cinza: #F5F5F5;

  --font-title: 'Cinzel', 'Libre Baskerville', Georgia, serif;
  --font-body: 'Roboto Condensed', Arial, sans-serif;

  --radius: 4px;
  --container-w: 1160px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --shadow-soft: 0 4px 16px rgba(35, 35, 33, 0.08);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--preto);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--preto);
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-sm); }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Foco visível para acessibilidade / teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--azul-escuro);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.eyebrow-center { text-align: center; }
.text-center { text-align: center; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-whatsapp {
  background: var(--laranja);
  color: var(--branco);
}
.btn-whatsapp:hover { background: #cc6a10; }

.btn-outline {
  background: transparent;
  border-color: var(--azul);
  color: var(--azul);
}
.btn-outline:hover { background: var(--azul); color: var(--branco); }

.btn-large { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn-full { width: 100%; }

.btn-header { display: none; }
@media (min-width: 900px) {
  .btn-header { display: inline-flex; padding: 0.65rem 1.25rem; font-size: 0.95rem; }
}

.icon-wpp { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  gap: var(--space-sm);
}
.logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--font-title);
  font-weight: 700;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.logo-text { font-family: var(--font-title); font-size: 1.05rem; color: var(--azul-escuro); }
.logo-text strong { color: var(--preto); }

.main-nav { display: none; }
@media (min-width: 900px) {
  .main-nav { display: block; }
  .main-nav ul { display: flex; gap: var(--space-md); }
  .main-nav a { font-weight: 500; font-size: 0.95rem; }
  .main-nav a:hover { color: var(--azul); }
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-xl) 0; background: var(--cinza); }
.hero-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
.hero-subtitle { font-size: 1.1rem; color: #4a4a48; max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid #e2e2df;
}
.trust-bar li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul-escuro);
}
.icon-trust { width: 1.1em; height: 1.1em; fill: var(--azul); flex-shrink: 0; }

.hero-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  width: 100%;
  aspect-ratio: 4/4.5;
  object-fit: cover;
  background: #dfe7ee; /* placeholder enquanto a foto real não é carregada */
}

/* ---------- Serviços ---------- */
.services { padding: var(--space-2xl) 0; }
.services h2 { text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
.services-group-title {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  color: var(--azul-escuro);
  border-left: 4px solid var(--laranja);
  padding-left: 0.6rem;
}
.services-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.service-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.service-card-highlight { border-color: var(--laranja); }
.service-badge {
  position: absolute;
  top: -12px; left: var(--space-md);
  background: var(--laranja);
  color: var(--branco);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
}
.service-icon { width: 2.25rem; height: 2.25rem; fill: var(--azul); margin-bottom: var(--space-xs); }
.service-cta { color: var(--azul-escuro); font-weight: 700; display: inline-block; margin-top: 0.4rem; }
.service-cta:hover { color: var(--laranja); }

/* ---------- Antes e Depois ---------- */
.before-after {
  margin-top: var(--space-xl);
  background: var(--cinza);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 900px) {
  .before-after { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
}
.before-after-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.before-after-media figure { margin: 0; }
/* 1/1 e nao 4/3: a foto do "antes" e paisagem e a do "depois" e retrato, e o
   quadrado e a unica proporcao que as duas alcancam sem decepar o aparelho.
   Com 4/3 aqui, o object-fit recortava de volta e cortava topo e base. */
.before-after-media img { border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; background: #dfe7ee; }
.before-after-media figcaption {
  text-align: center;
  margin-top: 0.4rem;
  font-weight: 700;
  color: var(--azul-escuro);
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* ---------- Segmentos atendidos ---------- */
/* Os estilos de .clients-logos saíram em 27/08 junto com os logos placeholder.
   Se um dia houver logo de cliente real com autorização de uso de marca, o
   histórico do Git tem a régua antiga. */
.clients { padding: var(--space-xl) 0; background: var(--branco); }
.audience-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.audience-badges li {
  background: var(--cinza);
  color: var(--azul-escuro);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
}

/* ---------- Quem Somos ---------- */
.about { padding: var(--space-2xl) 0; background: var(--cinza); }
.about-grid { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.about-media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); aspect-ratio: 4/4.5; object-fit: cover; background: #dfe7ee; }

/* ---------- Diferenciais ---------- */
.differentials { padding: var(--space-2xl) 0; }
.differentials-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}
@media (min-width: 700px) {
  .differentials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .differentials-grid { grid-template-columns: repeat(4, 1fr); }
}
.differential-item { text-align: center; padding: var(--space-md); }
.diff-icon { width: 2.5rem; height: 2.5rem; fill: var(--laranja); margin-bottom: var(--space-xs); }

/* ---------- Área de Atendimento ---------- */
.coverage { padding: var(--space-2xl) 0; background: var(--azul); color: var(--branco); }
.coverage h2, .coverage .eyebrow { color: var(--branco); }
.coverage-grid { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 900px) {
  .coverage-grid { grid-template-columns: 1fr 1fr; }
}
.coverage-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-sm) 0 var(--space-md); }
.coverage-list li {
  background: rgba(255,255,255,0.15);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}
.coverage-media img { border-radius: var(--radius); background: rgba(255,255,255,0.1); aspect-ratio: 4/3; object-fit: cover; }
/* A excecao de area e verdadeira, mas nao pode competir com a area-base:
   menor, ela le como nota de rodape da frase acima.
   SEM opacity: a primeira versao usava 0.85 e derrubava o contraste do texto
   branco sobre o azul da secao de 4.49:1 para 3.71:1 — reprovacao clara no
   AA da WCAG para texto normal. A hierarquia sai do tamanho, nao da cor. */
.coverage-note { font-size: 0.95rem; max-width: 48ch; }

/* ---------- Depoimentos ---------- */
/* SEM USO desde 27/08: a seção saiu do index.html porque os depoimentos eram
   Lorem ipsum e o perfil da Elcan no Google ainda não tem avaliação real.
   Mantidos de propósito — a marcação volta igual assim que houver avaliação,
   e são ~25 linhas. Se em três meses ainda não tiver voltado, apague: o Git
   guarda. */
.testimonials { padding: var(--space-2xl) 0; background: var(--cinza); }
.testimonials-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
}
@media (min-width: 700px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: 0;
  box-shadow: var(--shadow-soft);
}
.stars { color: var(--amarelo); letter-spacing: 0.15em; margin-bottom: var(--space-xs); }
.testimonial-card p { font-style: italic; }
.testimonial-card footer { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--space-sm); }
.testimonial-card footer img { border-radius: 50%; }
.testimonial-card footer span { font-weight: 700; font-size: 0.9rem; }

/* ---------- Como Funciona ---------- */
.how-it-works { padding: var(--space-2xl) 0; }
.steps {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
  counter-reset: step;
}
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step { text-align: center; }
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--font-title);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

/* ---------- FAQ ---------- */
.faq { padding: var(--space-2xl) 0; background: var(--cinza); }
.faq-list { max-width: 760px; margin: var(--space-lg) auto 0; display: grid; gap: var(--space-sm); }
.faq-item {
  background: var(--branco);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #e2e2df;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--azul-escuro);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  float: right;
  font-size: 1.3rem;
  color: var(--laranja);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: var(--space-xs); }

/* ---------- CTA Final + Formulário ---------- */
.final-cta { padding: var(--space-2xl) 0; }
.final-cta-grid {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 950px) {
  .final-cta-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.quote-form {
  position: relative;
  background: var(--cinza);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.quote-form h3 { margin-bottom: var(--space-md); }
.form-row { margin-bottom: var(--space-sm); display: flex; flex-direction: column; gap: 0.35rem; }
.form-row-group { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 500px) {
  .form-row-group { grid-template-columns: 1fr 1fr; }
}
.form-row label { font-weight: 700; font-size: 0.9rem; }
.optional { font-weight: 400; color: #77776f; }
.form-row input,
.form-row select,
.form-row textarea {
  padding: 0.7rem 0.85rem;
  border: 1px solid #d2d2cd;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--branco);
  color: var(--preto);
}
.form-row-checkbox { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.form-row-checkbox input { margin-top: 0.3rem; }
.form-row-checkbox label { font-weight: 400; font-size: 0.85rem; }
.form-row-checkbox a { color: var(--azul-escuro); text-decoration: underline; }
.form-note { font-size: 0.8rem; color: #77776f; margin-top: var(--space-xs); text-align: center; }

.form-status {
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  margin-top: var(--space-sm);
  min-height: 1.2em;
}
.form-status-sucesso { color: #1e7e34; }
.form-status-erro { color: #c0392b; }

/* Linha de formulário fora do fluxo visual. */
.form-row-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Aviso de Privacidade ---------- */
.privacy-notice { padding: var(--space-xl) 0; background: var(--cinza); }
.privacy-notice p, .privacy-notice ul { max-width: 70ch; color: #4a4a48; }
.privacy-notice h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}
.privacy-notice ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.privacy-version { font-size: 0.8rem; color: #77776f; margin-top: var(--space-md); }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--preto); color: #d7d7d3; padding-top: var(--space-xl); }
.footer-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-lg);
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-brand .logo-text { color: var(--branco); }
.footer-brand .logo-text strong { color: var(--amarelo); }
.footer-nav h4, .footer-contact h4 { color: var(--branco); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--space-sm); }
.footer-nav ul { display: grid; gap: 0.5rem; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--laranja); }
/* Telefone e WhatsApp são dois links irmãos: sem block eles colam na mesma linha. */
.footer-contact a { display: block; }
.footer-legal { font-size: 0.8rem; color: #a3a39d; margin-top: 0.35rem; }
.footer-bottom {
  border-top: 1px solid #3a3a37;
  padding: var(--space-md) 0;
  font-size: 0.8rem;
  color: #8f8f8a;
}

/* ---------- Botão flutuante WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 56px; height: 56px;
  background: var(--laranja);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(35,35,33,0.25);
  z-index: 60;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: var(--branco); }