@charset "UTF-8";

/* =============================================================================
   HTEC SAÚDE — folha de estilo única
   -----------------------------------------------------------------------------
   Escrita à mão a partir do design system da versão React (Tailwind v4), para
   que o site rode na Hostinger sem nenhuma etapa de build: é este arquivo que o
   navegador recebe, sem compilação, sem CDN e sem dependência externa.

   Os tokens abaixo são exatamente os mesmos da versão anterior. A cor primária
   #00209B vem do site atual; o ciano de apoio #29ABE2 é a cor dos triângulos do
   logotipo.

   Sumário
     01. Fontes
     02. Tokens
     03. Reset e base
     04. Tipografia
     05. Layout (container, seções)
     06. Utilitários (ícones, grid tecnológico, halos)
     07. Animação de entrada
     08. Botões
     09. Componentes de conteúdo (badge, título de seção)
     10. Cabeçalho
     11. Hero
     12. Sobre
     13. Serviços
     14. Diferenciais
     15. Processo
     16. Resultados
     17. Chamada final
     18. Contato e formulário
     19. Rodapé
     20. Botão flutuante de WhatsApp
     21. Preferências de movimento
   ========================================================================== */

/* --------------------------------------------------------------- 01. Fontes */
/* Plus Jakarta Sans variável, auto-hospedada (Fontsource, licença OFL). */

@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* --------------------------------------------------------------- 02. Tokens */

:root {
  /* marca */
  --brand-50: #eef1ff;
  --brand-100: #e0e5ff;
  --brand-200: #c6cfff;
  --brand-300: #a2b0ff;
  --brand-400: #7b85fb;
  --brand-500: #5a5df2;
  --brand-600: #4038dd;
  --brand-700: #2a25b0;
  --brand-800: #00209b; /* cor da marca */
  --brand-900: #0a1a5e;
  --brand-950: #060c2e; /* superfícies escuras */

  --accent-300: #7fd0f5;
  --accent-400: #52bdec;
  --accent-500: #29abe2; /* ciano do logotipo */
  --accent-600: #1a8ec0;

  /* neutros */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* estados */
  --green-50: #f0fdf4;
  --green-200: #bbf7d0;
  --green-800: #166534;
  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-100: #fee2e2;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-800: #991b1b;

  --whatsapp: #25d366;
  --whatsapp-hover: #20bd5a;

  /* tipografia */
  --font-sans: 'Plus Jakarta Sans Variable', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ritmo tipográfico — fluido, sem saltos entre breakpoints */
  --text-display: clamp(2.25rem, 4.6vw, 3.75rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --text-lead: clamp(1rem, 1.35vw, 1.1875rem);

  /* elevação */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /*
   * Altura do cabeçalho em um lugar só: o próprio header e o scroll-padding das
   * âncoras leem esta variável e nunca saem de sincronia.
   */
  --header-h: 3.75rem; /* 60px */
}

@media (min-width: 768px) {
  :root {
    --header-h: 4rem; /* 64px */
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 4.5rem; /* 72px */
  }
}

/* -------------------------------------------------------- 03. Reset e base */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* o cabeçalho é sticky, então a âncora precisa parar abaixo dele */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  background-color: #fff;
  color: var(--slate-600);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* trava a rolagem enquanto o menu mobile está aberto */
body.is-menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

svg {
  flex: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

::selection {
  background-color: var(--brand-200);
  color: var(--brand-950);
}

/* link "pular para o conteúdo" — só aparece ao receber foco pelo teclado */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 60;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip-path: none;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: var(--shadow-lg);
  color: var(--brand-800);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- 04. Tipografia */

h1,
h2,
h3,
h4 {
  color: var(--slate-900);
  font-weight: 700;
  text-wrap: balance;
}

.t-display {
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.t-h2 {
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.t-h3 {
  font-size: var(--text-h3);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.t-lead {
  font-size: var(--text-lead);
  line-height: 1.65;
}

/* ------------------------------------------------------------- 05. Layout */

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 2rem;
  }
}

/* Espaçamento vertical consistente entre todas as seções da página. */
.section {
  padding-block: 4rem;
}

@media (min-width: 640px) {
  .section {
    padding-block: 5rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 7rem;
  }
}

/* Superfícies — controlam o ritmo claro/escuro da página. */
.section--white {
  background-color: #fff;
}

.section--muted {
  background-color: var(--slate-50);
}

.section--dark {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-950);
  color: var(--slate-300);
}

/* o conteúdo precisa ficar acima do grid e dos halos, que são absolutos */
.section--dark > .container {
  position: relative;
}

/* ------------------------------------------------------- 06. Utilitários */

/* Tamanhos de ícone — os SVGs herdam a cor do texto. */
.icon-3 { width: 0.875rem; height: 0.875rem; }
.icon-4 { width: 1rem; height: 1rem; }
.icon-4-5 { width: 1.125rem; height: 1.125rem; }
.icon-5 { width: 1.25rem; height: 1.25rem; }
.icon-6 { width: 1.5rem; height: 1.5rem; }

/* Grid tecnológico discreto — só em superfícies escuras, baixa opacidade. */
.tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Halos suaves de fundo, sem neon. */
.halo {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}

/* ------------------------------------------------ 07. Animação de entrada */
/*
 * Fade-in discreto com leve movimento vertical quando o elemento entra na tela.
 * A classe `js` é adicionada ao <html> por um script inline no <head>: sem
 * JavaScript nada é escondido, então o conteúdo nunca fica invisível.
 */

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .reveal {
  opacity: 0;
}

.js .reveal.is-visible {
  animation: reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ------------------------------------------------------------ 08. Botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.2s,
    box-shadow 0.2s,
    color 0.2s,
    gap 0.2s;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--lg {
  height: 3.25rem;
  padding-inline: 1.75rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background-color: var(--brand-800);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--brand-700);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  background-color: var(--brand-900);
}

.btn--secondary {
  background-color: #fff;
  color: var(--brand-800);
  box-shadow: 0 0 0 1px var(--slate-300), var(--shadow-xs);
}

.btn--secondary:hover {
  background-color: var(--slate-50);
  box-shadow: 0 0 0 1px var(--brand-300), var(--shadow-xs);
}

.btn--on-dark {
  background-color: rgb(255 255 255 / 0.1);
  color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
  backdrop-filter: blur(4px);
}

.btn--on-dark:hover {
  background-color: rgb(255 255 255 / 0.2);
}

/* --------------------------------------------- 09. Componentes de conteúdo */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background-color: var(--brand-50);
  color: var(--brand-800);
  box-shadow: 0 0 0 1px var(--brand-100);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge--dark {
  background-color: rgb(255 255 255 / 0.1);
  color: var(--accent-300);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15);
}

/* Título de seção: rótulo curto, título e descrição. */
.heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.heading--left {
  align-items: flex-start;
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.heading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-800);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.heading__eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background-color: rgb(0 32 155 / 0.4);
}

.heading__description {
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--slate-600);
}

.heading--dark .heading__eyebrow {
  color: var(--accent-400);
}

.heading--dark .heading__eyebrow::before {
  background-color: rgb(82 189 236 / 0.6);
}

.heading--dark h2 {
  color: #fff;
}

.heading--dark .heading__description {
  color: var(--slate-300);
}

/* --------------------------------------------------------- 10. Cabeçalho */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #fff;
  border-bottom: 1px solid rgb(226 232 240 / 0.6);
  transition: box-shadow 0.3s, border-color 0.3s;
}

.header.is-scrolled {
  border-bottom-color: rgb(226 232 240 / 0.8);
  box-shadow: var(--shadow-sm);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.header__logo {
  flex: none;
}

.header__logo img {
  height: 2rem;
  width: auto;
}

@media (min-width: 640px) {
  .header__logo img {
    height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .header__logo img {
    height: 2.5rem;
  }
}

.header__nav {
  display: none;
}

.header__nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header__nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--slate-600);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.header__nav a:hover {
  background-color: var(--slate-100);
  color: var(--brand-800);
}

.header__cta {
  display: none;
}

.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border-radius: 0.5rem;
  color: var(--slate-700);
  transition: background-color 0.2s;
}

.header__toggle:hover {
  background-color: var(--slate-100);
}

/* o ícone exibido depende do estado do botão */
.header__toggle .icon-close,
.header__toggle[aria-expanded='true'] .icon-open {
  display: none;
}

.header__toggle[aria-expanded='true'] .icon-close {
  display: block;
}

@media (min-width: 1024px) {
  .header__nav,
  .header__cta {
    display: block;
  }

  .header__toggle {
    display: none;
  }
}

/* Menu mobile: sobrepõe o conteúdo em vez de empurrar a página. */
.header__menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  border-bottom: 1px solid var(--slate-200);
  background-color: #fff;
  box-shadow: var(--shadow-lg);
  padding-block: 1rem;
}

.header__menu[hidden] {
  display: none;
}

.header__menu a.header__menu-link {
  display: block;
  padding: 0.875rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--slate-700);
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.header__menu a.header__menu-link:hover {
  background-color: var(--slate-50);
  color: var(--brand-800);
}

.header__menu .btn {
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .header__menu {
    display: none;
  }
}

/* --------------------------------------------------------------- 11. Hero */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-950);
}

.hero .tech-grid {
  opacity: 0.7;
}

.hero__halo-a {
  top: -8rem;
  right: -6rem;
  width: 32rem;
  height: 32rem;
  background-color: rgb(64 56 221 / 0.25);
  filter: blur(120px);
}

.hero__halo-b {
  bottom: -10rem;
  left: -8rem;
  width: 28rem;
  height: 28rem;
  background-color: rgb(41 171 226 / 0.15);
  filter: blur(120px);
}

.hero__inner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3rem;
  padding-block: 4rem;
}

@media (min-width: 640px) {
  .hero__inner {
    padding-block: 5rem;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
    padding-block: 6rem;
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero__content h1 {
  color: #fff;
}

.hero__subtitle {
  max-width: 36rem;
  color: var(--slate-300);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
  }

  .hero__actions .btn {
    width: auto;
  }
}

.hero__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-400);
  font-size: 0.875rem;
}

.hero__note svg {
  color: var(--accent-400);
}

.hero__figure {
  position: relative;
  max-width: 28rem;
  margin-inline: auto;
}

.hero__figure::before {
  content: '';
  position: absolute;
  inset: 1.5rem;
  border-radius: 9999px;
  background-color: rgb(41 171 226 / 0.2);
  filter: blur(48px);
}

.hero__figure img {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero__media {
    justify-self: end;
  }

  .hero__figure {
    max-width: none;
  }
}

/* faixa de pilares — ancora o hero e antecipa a seção Sobre */
.hero__pillars {
  position: relative;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.hero__pillars ul {
  display: grid;
  gap: 1.5rem 2rem;
  padding-block: 2rem;
}

@media (min-width: 640px) {
  .hero__pillars ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hero__pillars ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hero__pillar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero__pillar span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / 0.1);
  color: var(--accent-400);
}

.hero__pillar span:last-child {
  color: var(--slate-200);
  font-size: 0.875rem;
  font-weight: 600;
}

/* -------------------------------------------------------------- 12. Sobre */

.about__grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 4rem;
  }
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 1.625;
}

.about__closing {
  padding-left: 1rem;
  border-left: 2px solid var(--brand-800);
  color: var(--slate-800);
  font-style: italic;
  font-weight: 500;
}

.about__aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about__brand {
  width: 16rem;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .about__brand {
    width: 18rem;
  }
}

@media (min-width: 1024px) {
  .about__brand {
    width: 20rem;
  }
}

.about__pillars {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .about__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.about__pillar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background-color: var(--slate-50);
  box-shadow: 0 0 0 1px rgb(226 232 240 / 0.7);
}

.about__pillar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--slate-200);
  color: var(--brand-800);
}

.about__pillar p {
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Segmentos atendidos */
.about__segments {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--slate-200);
}

@media (min-width: 1024px) {
  .about__segments {
    margin-top: 5rem;
  }
}

.about__segments-title {
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about__segments ul {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .about__segments ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about__segment {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
}

.about__segment > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background-color: var(--brand-800);
  color: #fff;
}

.about__segment p {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

/* ----------------------------------------------------------- 13. Serviços */

.services__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
  }
}

.services__grid > li {
  display: flex;
}

.service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--slate-200);
  transition: transform 0.3s, box-shadow 0.3s;
}

@media (min-width: 1024px) {
  .service-card {
    padding: 1.75rem;
  }
}

.service-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0 0 1px var(--brand-200), 0 10px 15px -3px rgb(226 232 240 / 0.6),
    0 4px 6px -4px rgb(226 232 240 / 0.6);
}

/* caixa de altura fixa: as artes têm proporções diferentes e isto alinha os títulos */
.service-card__media {
  display: flex;
  align-items: flex-start;
  height: 4rem;
}

.service-card__media img {
  max-height: 4rem;
  width: auto;
  object-fit: contain;
}

.service-card h3 {
  margin-top: 1.25rem;
}

.service-card p {
  flex: 1;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  margin-top: 1rem;
  padding-block: 0.375rem;
  color: var(--brand-800);
  font-size: 0.875rem;
  font-weight: 600;
  transition: gap 0.2s;
}

.service-card:hover .service-card__link {
  gap: 0.625rem;
}

/* ------------------------------------------------------- 14. Diferenciais */

.differentials .tech-grid {
  opacity: 0.6;
}

.differentials__halo {
  top: 50%;
  left: 50%;
  width: 30rem;
  height: 30rem;
  transform: translate(-50%, -50%);
  background-color: rgb(64 56 221 / 0.2);
  filter: blur(130px);
}

/* alternância de destaque evita a leitura de “lista de cards iguais” */
.differentials__grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin-top: 3rem;
  border-radius: 0.75rem;
  background-color: rgb(255 255 255 / 0.1);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
  .differentials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .differentials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4rem;
  }
}

.differentials__grid > li {
  background-color: var(--brand-950);
}

.differential {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.75rem;
  transition: background-color 0.3s;
}

.differential:hover {
  background-color: rgb(255 255 255 / 0.04);
}

.differential > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / 0.1);
  color: var(--accent-400);
}

.differential h3 {
  color: #fff;
}

.differential p {
  color: var(--slate-400);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* ----------------------------------------------------------- 15. Processo */

.process__list {
  display: grid;
  gap: 2rem 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .process__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4rem;
  }
}

/* trilho superior: conecta as etapas sem virar mais um card */
.process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding-top: 1.5rem;
}

.process__step::before,
.process__step::after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
}

.process__step::before {
  inset-inline: 0;
  background-color: var(--slate-200);
}

.process__step::after {
  left: 0;
  width: 2.5rem;
  background-color: var(--brand-800);
}

.process__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.process__number {
  color: var(--brand-800);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
}

.process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background-color: var(--brand-50);
  color: var(--brand-800);
}

.process__step p {
  font-size: 0.875rem;
  line-height: 1.625;
}

/* --------------------------------------------------------- 16. Resultados */

.stats {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--brand-800);
}

.stat__value {
  color: var(--slate-900);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.stat__value span {
  color: var(--brand-800);
}

.stat__label {
  color: var(--slate-600);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ----------------------------------------------------- 17. Chamada final */

.cta {
  background-color: #fff;
  padding-block: 4rem;
}

@media (min-width: 640px) {
  .cta {
    padding-block: 5rem;
  }
}

@media (min-width: 1024px) {
  .cta {
    padding-block: 6rem;
  }
}

.cta__box {
  position: relative;
  overflow: hidden;
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  background-color: var(--brand-800);
}

@media (min-width: 640px) {
  .cta__box {
    padding-inline: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .cta__box {
    padding: 4rem 3.5rem;
  }
}

.cta__box .tech-grid {
  opacity: 0.5;
}

.cta__halo {
  top: -5rem;
  right: -4rem;
  width: 18rem;
  height: 18rem;
  background-color: rgb(41 171 226 / 0.2);
  filter: blur(90px);
}

.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
}

.cta__inner > div {
  max-width: 42rem;
}

.cta__inner h2 {
  color: #fff;
}

.cta__inner p {
  margin-top: 0.75rem;
  color: var(--brand-100);
  line-height: 1.625;
}

.cta__inner .btn {
  flex: none;
  width: 100%;
}

@media (min-width: 640px) {
  .cta__inner .btn {
    width: auto;
  }
}

/* ------------------------------------------- 18. Contato e formulário */

.contact__grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
    margin-top: 4rem;
  }
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact__card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--slate-200);
}

@media (min-width: 640px) {
  .contact__card {
    padding: 1.75rem;
  }
}

.contact__card > p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

.contact__channels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.contact__channels .btn {
  width: 100%;
  justify-content: flex-start;
}

.contact__channels .btn svg {
  color: var(--whatsapp);
}

.contact__channel-label {
  font-weight: 600;
}

.contact__channel-number {
  color: var(--slate-500);
  font-weight: 400;
}

.contact__address {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
}

.contact__address > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background-color: var(--brand-50);
  color: var(--brand-800);
}

.contact__address address {
  font-size: 0.875rem;
  line-height: 1.625;
}

.contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-200);
}

.contact__social a {
  color: var(--brand-800);
  font-size: 0.875rem;
  font-weight: 600;
}

.contact__social a:hover {
  text-decoration: underline;
}

/* --- formulário --- */

.form {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--slate-200);
}

@media (min-width: 640px) {
  .form {
    padding: 2rem;
  }
}

.form__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__field--full {
    grid-column: span 2;
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form__label {
  color: var(--slate-700);
  font-size: 0.875rem;
  font-weight: 600;
}

.form__required {
  margin-left: 0.125rem;
  color: var(--red-500);
}

.form__control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--slate-300);
  border-radius: 0.5rem;
  background-color: #fff;
  color: var(--slate-900);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form__control::placeholder {
  color: var(--slate-400);
}

.form__control:hover {
  border-color: var(--slate-400);
}

.form__control:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-200);
}

.form__control:disabled {
  background-color: var(--slate-50);
}

.form__control[aria-invalid='true'] {
  border-color: var(--red-400);
}

.form__control[aria-invalid='true']:focus {
  border-color: var(--red-500);
  box-shadow: 0 0 0 2px var(--red-100);
}

select.form__control {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}

textarea.form__control {
  min-height: 8rem;
  resize: vertical;
}

.form__error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--red-600);
  font-size: 0.75rem;
  font-weight: 500;
}

.form__submit {
  margin-top: 1.5rem;
}

.form__note {
  margin-top: 1rem;
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1.625;
}

/* honeypot: invisível para pessoas, preenchido por robôs */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* feedback de envio */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.alert svg {
  margin-top: 0.125rem;
}

.alert--success {
  background-color: var(--green-50);
  color: var(--green-800);
  box-shadow: 0 0 0 1px var(--green-200);
}

.alert--error {
  background-color: var(--red-50);
  color: var(--red-800);
  box-shadow: 0 0 0 1px var(--red-200);
}

/* estado "enviando" do botão, aplicado por JS no submit */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn__spinner {
  display: none;
  animation: spin 1s linear infinite;
}

.btn.is-sending .btn__spinner {
  display: block;
}

.btn.is-sending .btn__idle {
  display: none;
}

/* ------------------------------------------------------------ 19. Rodapé */

.footer {
  background-color: var(--brand-950);
  color: var(--slate-400);
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    padding-block: 4rem;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .footer__brand {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .footer__brand {
    grid-column: span 1;
  }
}

.footer__brand img {
  width: 9rem;
}

.footer__brand p {
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

.footer h2 {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.footer a {
  transition: color 0.2s;
}

.footer a:hover {
  color: #fff;
}

.footer__link {
  display: inline-block;
  padding-block: 0.375rem;
  font-size: 0.875rem;
}

.footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.375rem;
  font-size: 0.875rem;
}

.footer__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
}

.footer__address svg {
  margin-top: 0.125rem;
}

.footer__address address {
  font-size: 0.875rem;
  line-height: 1.625;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.footer__social a {
  font-size: 0.875rem;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
  }
}

.footer__bottom p,
.footer__legal a {
  font-size: 0.75rem;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* --------------------------------------- 20. Botão flutuante de WhatsApp */
/* Atalho flutuante — equivale ao plugin wp-whatsapp do site atual. */

.wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 640px) {
  .wa {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

.wa__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
}

.wa__list[hidden] {
  display: none;
}

.wa__list li {
  width: 100%;
}

.wa__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--slate-200), var(--shadow-lg);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.wa__item:hover {
  background-color: var(--slate-50);
}

.wa__item svg {
  color: var(--whatsapp);
}

.wa__item-label {
  color: var(--slate-900);
  font-weight: 600;
}

.wa__item-number {
  color: var(--slate-500);
}

.wa__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background-color: var(--whatsapp);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: background-color 0.2s, transform 0.2s;
}

.wa__toggle:hover {
  background-color: var(--whatsapp-hover);
  transform: scale(1.05);
}

@media (min-width: 640px) {
  .wa__toggle {
    width: 3.5rem;
    height: 3.5rem;
  }

  .wa__toggle svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.wa__toggle .icon-close,
.wa__toggle[aria-expanded='true'] .icon-open {
  display: none;
}

.wa__toggle[aria-expanded='true'] .icon-close {
  display: block;
}

/* ------------------------------------------------------ 21. Sem JavaScript */
/*
 * A classe `no-js` sai do <html> logo no início do <head>; ela só sobrevive se
 * o script estiver bloqueado. Nesse caso, os controles que dependem de JS somem
 * e o que eles revelariam passa a ficar visível o tempo todo.
 */

.no-js .header__toggle,
.no-js .wa__toggle {
  display: none;
}

.no-js .header__bar {
  flex-wrap: wrap;
  height: auto;
  padding-block: 0.75rem;
}

.no-js .header__nav,
.no-js .header__cta {
  display: block;
}

.no-js .header__nav ul {
  flex-wrap: wrap;
}

.no-js .wa__list[hidden] {
  display: flex;
}

/* ------------------------------------------ 22. Preferências de movimento */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .service-card:hover,
  .wa__toggle:hover {
    transform: none;
  }
}