/* =========================================================
   Vita Quali — Landing Page
   Paleta: azul petróleo (cor real da logo) + verde sálvia como
   acento, clean e profissional
   ========================================================= */

:root{
  --color-primary: #005F83;      /* azul petróleo — cor exata da logo */
  --color-primary-dark: #003E55;
  --color-primary-light: #E1EDF1;
  --color-accent: #2E8B67;       /* verde sálvia (acento: checkmarks, ícones) */
  --color-accent-light: #E9F6EF;
  --color-ink: #172227;
  --color-text: #47535A;
  --color-muted: #6C7A82;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F8F9;
  --color-border: #E2E9EC;
  --color-danger: #C0392B;

  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(0,95,131,0.07);
  --shadow-md: 0 12px 32px rgba(0,95,131,0.12);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 .6em;
}
h1{ font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; }
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; }
h3{ font-size: 1.15rem; font-weight: 600; }
p{ margin: 0 0 1em; }
a{ color: var(--color-primary); text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-block;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: .8em;
}
.eyebrow--center{ display:block; text-align:center; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .85em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn--primary{ background: var(--color-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline{ border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline:hover{ background: var(--color-primary-light); transform: translateY(-2px); }
.btn--ghost{ border-color: var(--color-border); color: var(--color-ink); }
.btn--ghost:hover{ background: var(--color-bg-alt); }
.btn--light{ background:#fff; color: var(--color-primary-dark); }
.btn--light:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline-light{ border-color: rgba(255,255,255,.6); color:#fff; }
.btn--outline-light:hover{ background: rgba(255,255,255,.12); }
.btn--sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.65; cursor:not-allowed; transform:none !important; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px; gap: 1.5rem;
}
.brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-heading); font-size:1.25rem; color:var(--color-ink); }
.brand__logo{ height: 40px; width:auto; display:block; }

.nav__list{ display:flex; gap: 2.1rem; }
.nav__list a{ color: var(--color-ink); font-weight:500; font-size:.95rem; position:relative; }
.nav__list a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--color-accent);
  transition: width .2s ease;
}
.nav__list a:hover::after{ width:100%; }

.header__actions{ display:flex; align-items:center; gap:.7rem; }

.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; padding:0;
}
.nav__toggle span{ display:block; height:2px; width:100%; background: var(--color-ink); border-radius:2px; transition:.25s; }
.nav__toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2){ opacity:0; }
.nav__toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero{
  padding: 5.5rem 0 5rem;
  background:
    radial-gradient(1100px 480px at 85% -10%, var(--color-accent-light) 0%, transparent 60%),
    var(--color-bg);
}
.hero__inner{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items:center; }
.hero__lead{ font-size: 1.08rem; color: var(--color-muted); max-width: 46ch; }
.hero__cta{ display:flex; gap: 1rem; flex-wrap:wrap; margin: 1.6rem 0 1.8rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap: 1.4rem; }
.hero__trust li{ display:flex; align-items:center; gap:.5em; font-size:.9rem; color: var(--color-text); font-weight:500; }
.hero__trust svg{ color: var(--color-accent); flex-shrink:0; }

.hero__visual{ position:relative; min-height: 340px; padding: 12% 0; }
.hero__glow{
  position:absolute; inset: 6% 10%; background: var(--color-primary);
  filter: blur(70px); opacity:.18; border-radius:50%; z-index:0;
}
.hero__photo{
  position:relative; z-index:1; width:100%; aspect-ratio: 5/4;
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; }
.hero__card{
  position:absolute; z-index:2; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 1.2rem 1.4rem; width: 230px; max-width: 72%;
  display:flex; flex-direction:column; gap:.3rem;
}
.hero__card strong{ font-family: var(--font-heading); font-size:1.3rem; color:var(--color-ink); }
.hero__card span{ font-size:.85rem; color: var(--color-muted); }
.hero__card--1{ left: 4%; bottom: -12%; }
.hero__card--2{ right: 4%; top: -12%; }

/* ===== Pillars ===== */
.pillars{ padding: 0 0 1rem; }
.pillars__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: -3rem; position:relative; z-index: 2;
}
.pillar{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
}
.pillar__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius: 50%; background: var(--color-primary-light);
  margin-bottom: 1rem;
}
.pillar p{ color: var(--color-muted); font-size: .95rem; margin:0; }

/* ===== Section generic ===== */
.section{ padding: 6rem 0; }
.section--alt{ background: var(--color-bg-alt); }
.section__head{ max-width: 640px; margin: 0 auto 3rem; text-align:center; }
.section__lead{ color: var(--color-muted); }

/* ===== Services ===== */
.services__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.service-card{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 2rem 1.6rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius: var(--radius-sm); background: var(--color-primary-light);
  margin-bottom: 1.1rem;
}
.service-card p{ font-size: .93rem; color: var(--color-muted); margin:0; }
.service-card--highlight{
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
}
.service-card--highlight h3, .service-card--highlight p{ color:#fff; }
.service-card--highlight p{ color: rgba(255,255,255,.85); }
.service-card--highlight .service-card__icon{ background: rgba(255,255,255,.15); }

/* ===== Timeline / Processo ===== */
.timeline{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; position:relative;
}
.timeline__item{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.8rem; position:relative;
}
.timeline__number{
  font-family: var(--font-heading); font-weight:700; font-size:1.6rem;
  color: var(--color-accent); display:block; margin-bottom:.6rem;
}
.timeline__item p{ font-size:.93rem; color:var(--color-muted); margin:0; }

/* ===== Diferenciais ===== */
.diferenciais__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items:center; }

/* ===== Split section (foto + texto) — "Atuação em campo" ===== */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:center; }
.split__photo{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border); aspect-ratio: 4/3;
}
.split__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.check-list li{
  display:flex; align-items:flex-start; gap:.7em; margin-bottom: 1rem;
  font-weight:500; color: var(--color-ink);
}
.check-list__icon{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background: var(--color-accent); color:#fff; font-size:.8rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.stat-cards{ display:grid; gap: 1.2rem; }
.stat-card{
  background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.6rem 1.8rem; display:flex; align-items:baseline; gap:.8rem;
}
.stat-card strong{ font-family: var(--font-heading); font-size:1.7rem; color: var(--color-primary); }
.stat-card span{ font-size:.9rem; color: var(--color-muted); }
.stat-card--dark{ background: var(--color-primary); border-color: var(--color-primary); }
.stat-card--dark strong, .stat-card--dark span{ color:#fff; }

/* ===== CTA banner ===== */
.cta-banner{ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); padding: 4.5rem 0; }
.cta-banner__inner{ text-align:center; }
.cta-banner h2{ color:#fff; margin-bottom:.4em; }
.cta-banner p{ color: rgba(255,255,255,.85); max-width: 50ch; margin: 0 auto 1.6rem; }
.cta-banner .hero__cta{ justify-content:center; }

/* ===== Contact ===== */
.contact__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items:start; }
.contact__list{ margin: 1.8rem 0; }
.contact__list li{ display:flex; gap:.9em; margin-bottom: 1.3rem; align-items:flex-start; }
.contact__icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background: var(--color-primary-light);
  display:inline-flex; align-items:center; justify-content:center;
}
.contact__list strong{ display:block; font-size:.85rem; color: var(--color-muted); font-weight:600; }
.contact__list a, .contact__list span{ color: var(--color-ink); font-weight:500; }
.social{ display:flex; gap:.7rem; }
.social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--color-border);
  display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700;
  color: var(--color-primary);
}
.social a:hover{ background: var(--color-primary-light); }

.contact-form{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 2.4rem; box-shadow: var(--shadow-md);
}
.contact-form h3{ margin-bottom: 1.2rem; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field{ margin-bottom: 1.1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; color: var(--color-ink); margin-bottom:.4em; }
.field input, .field select, .field textarea{
  width:100%; padding:.75em .9em; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border);
  font-family: inherit; font-size:.95rem; color: var(--color-ink); background: var(--color-bg-alt);
  transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--color-accent); background:#fff;
}
.field textarea{ resize: vertical; min-height: 100px; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--color-danger); }
.field__error{ display:block; font-size:.8rem; color: var(--color-danger); margin-top:.3em; min-height: 1em; }

/* honeypot: escondido de humanos, visível para bots */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ font-size:.78rem; color: var(--color-muted); margin: .9rem 0 0; }
.form-feedback{ margin-top: 1rem; font-size:.9rem; font-weight:600; min-height: 1.2em; }
.form-feedback.is-success{ color: var(--color-accent); }
.form-feedback.is-error{ color: var(--color-danger); }

/* ===== Footer ===== */
.site-footer{ background: var(--color-primary-dark); color: rgba(255,255,255,.8); padding: 2.8rem 0; }
.footer__inner{ text-align:center; }
.footer__inner .brand{ justify-content:center; }
.footer__inner .brand__logo{ height: 46px; }
.footer__tagline{ font-size:.9rem; margin: .8rem 0 .3rem; }
.footer__copy{ font-size:.8rem; opacity:.7; margin:0; }

/* ===== WhatsApp float ===== */
.whatsapp-float{
  position: fixed; bottom: 22px; right: 22px; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4); z-index: 90; transition: transform .15s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* ===== Reveal animation =====
   Progressive enhancement: o conteúdo fica visível por padrão. Só quando o
   JavaScript roda com sucesso a classe "js-reveal" é adicionada ao <html>,
   habilitando o efeito de fade-in. Assim, se o JS falhar ou não carregar,
   nenhuma seção fica invisível para o visitante. */
html.js-reveal [data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js-reveal [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-reveal [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__inner, .diferenciais__grid, .contact__grid{ grid-template-columns: 1fr; }
  .hero__visual{ order:-1; min-height:260px; }
  .services__grid{ grid-template-columns: repeat(2,1fr); }
  .timeline{ grid-template-columns: repeat(2,1fr); }
  .pillars__grid{ grid-template-columns: 1fr; margin-top: -1.5rem; }
}

@media (max-width: 760px){
  .nav{
    position:absolute; top:76px; left:0; right:0; background:#fff;
    border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .nav.is-open{ max-height: 320px; }
  .nav__list{ flex-direction:column; gap:0; padding: .5rem 0; }
  .nav__list a{ display:block; padding: .9rem 24px; }
  .header__actions{ display:none; }
  .nav__toggle{ display:flex; }
  .services__grid{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .hero__card{ width: 200px; padding: 1rem 1.2rem; }
  .hero__card strong{ font-size: 1.1rem; }
  .hero__card span{ font-size: .78rem; }
  .contact-form{ padding: 1.6rem; }
  .split{ grid-template-columns: 1fr; }
}