/* ==========================================================================
   Prontix — sistema de design
   Cores e tipografia conforme "MIV_prontix.pdf" (Manual de Identidade Visual).
   Fontes auto-hospedadas: sem requisição a terceiros (adequação à LGPD).
   ========================================================================== */

/* --------------------------------------------------------- 01. tipografia  */

@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'M PLUS 1p'; src: url('../fonts/mplus1p-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'M PLUS 1p'; src: url('../fonts/mplus1p-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'M PLUS 1p'; src: url('../fonts/mplus1p-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------ 02. tokens  */

:root {
  /* paleta institucional — hex exatos do manual */
  --blue: #1A2BC3;
  --teal: #287879;
  --blush: #E7C6C1;
  --gray: #EDEDED;
  --slate: #9AAFC0;

  /* derivadas (para estados de interface e contraste) */
  --blue-700: #1522A0;
  --blue-800: #101A7C;
  --blue-ink: #0B0E28;
  --blue-ink-2: #141A3E;
  --teal-700: #1F6061;
  --blush-50: #FBF4F2;
  --blush-100: #F6E7E3;

  /* neutros */
  --ink: #17181C;
  --ink-2: #4C5261;
  --ink-3: #767D8C;
  --line: #E2E5EA;
  --line-2: #EFF1F4;
  --surface: #F7F8FA;
  --white: #FFFFFF;

  /* tipografia */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'M PLUS 1p', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* raios — o logotipo é geométrico arredondado */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* sombras — discretas, nunca sobre o logotipo */
  --sh-sm: 0 1px 2px rgba(11, 14, 40, .06), 0 1px 3px rgba(11, 14, 40, .04);
  --sh: 0 4px 12px rgba(11, 14, 40, .06), 0 2px 4px rgba(11, 14, 40, .04);
  --sh-lg: 0 18px 40px rgba(11, 14, 40, .10), 0 4px 12px rgba(11, 14, 40, .05);
  --sh-xl: 0 32px 70px rgba(11, 14, 40, .16);

  /* ritmo */
  --container: 1220px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(2.75rem, 5.5vw, 5rem);
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: 240ms var(--ease);
}

/* -------------------------------------------------------------- 03. base  */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--blue); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--blue-700); }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

strong, b { font-weight: 700; }

::selection { background: var(--blue); color: #fff; }

/* foco visível — navegação por teclado */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .sect--dark :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 999;
  transform: translate(-50%, -120%);
  padding: .85rem 1.5rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 0 0 var(--r) var(--r);
  transition: transform var(--t);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ---------------------------------------------------------- 04. utilitários */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.sect { padding-block: var(--section-y); position: relative; }
.sect--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.sect--surface { background: var(--surface); }
.sect--gray { background: var(--gray); }
.sect--blush { background: var(--blush-50); }

.sect--dark { background: var(--blue-ink); color: #E8EAF2; }
.sect--dark h1, .sect--dark h2, .sect--dark h3, .sect--dark h4 { color: #fff; }
.sect--dark a { color: #fff; }

.sect--blue { background: var(--blue); color: #fff; }
.sect--blue h1, .sect--blue h2, .sect--blue h3 { color: #fff; }

/* malha decorativa — remete à planta baixa estilizada do símbolo */
.grid-motif { position: relative; isolation: isolate; }
.grid-motif::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  flex: none;
  background: currentColor;
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }
.sect--dark .eyebrow, .sect--blue .eyebrow { color: var(--blush); }

.h-display { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 300; letter-spacing: -.035em; }
.h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 400; letter-spacing: -.03em; }
.h2 { font-size: clamp(1.75rem, 3.3vw, 2.7rem); font-weight: 400; letter-spacing: -.028em; }
.h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 600; letter-spacing: -.018em; }
.h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }

.h-display em, .h1 em, .h2 em { font-style: normal; font-weight: 600; color: var(--blue); }
.sect--dark .h2 em, .sect--dark .h1 em { color: var(--blush); }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--ink-2);
}
.sect--dark .lead, .sect--blue .lead { color: rgba(255, 255, 255, .78); }

.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.xs { font-size: .8rem; }

.stack > * + * { margin-top: 1.1rem; }
.stack-sm > * + * { margin-top: .55rem; }
.stack-lg > * + * { margin-top: 1.8rem; }

.center { text-align: center; }
.sect-head { max-width: 46rem; }
.sect-head--center { margin-inline: auto; text-align: center; }

/* tipografia da metodologia proprietária: ".360" */
.dot360 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }

/* ------------------------------------------------------------ 05. botões  */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .9rem 1.6rem;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; width: 18px; height: 18px; }

.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(26, 43, 195, .22); }
.btn--primary:hover { background: var(--blue-700); color: #fff; box-shadow: 0 10px 26px rgba(26, 43, 195, .3); }

.btn--dark { background: var(--blue-ink); color: #fff; }
.btn--dark:hover { background: var(--blue-ink-2); color: #fff; }

.btn--outline { border-color: var(--line); background: var(--white); color: var(--ink); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); background: var(--white); }

.btn--white { background: #fff; color: var(--blue-ink); }
.btn--white:hover { background: var(--blush); color: var(--blue-ink); }

.btn--ghost-light { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

.btn--wa { background: #25D366; color: #08331A; }
.btn--wa:hover { background: #1EBE5A; color: #08331A; }

.btn--sm { min-height: 44px; padding: .6rem 1.15rem; font-size: .92rem; }
.btn--lg { min-height: 58px; padding: 1rem 2rem; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row--center { justify-content: center; }

/* link com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
}
.link-arrow svg { width: 17px; height: 17px; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------- 06. cabeçalho  */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Página rolada: o conteúdo corre por baixo do cabeçalho, e a 88% o texto
   ainda aparecia através dele. A faixa fecha um pouco mais e ganha uma
   sombra rasa, que separa o cabeçalho do texto sem virar uma barra opaca.
   Onde o navegador não suporta desfoque, fecha de vez — ali a translucidez
   sozinha deixaria o texto legível por baixo. */
.header--rolado {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 16px rgba(11, 14, 40, .07);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header--rolado {
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
  }
}

/* variante sobre banner escuro (topo da página, antes do scroll) */
.header--over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.header--over .nav__link { color: rgba(255, 255, 255, .9); }
.header--over .nav__link:hover, .header--over .nav__link[aria-current] { color: #fff; }
.header--over .logo__img--dark { opacity: 0; }
.header--over .logo__img--light { opacity: 1; }
.header--over .burger span { background: #fff; }
.header--over .btn--primary { background: #fff; color: var(--blue-ink); box-shadow: none; }
.header--over .btn--primary:hover { background: var(--blush); }

.logo {
  position: relative;
  display: block;
  flex: none;
  width: 126px;
  height: 34px;
  margin-right: auto;
}
.logo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--t);
}
.logo__img--light { opacity: 0; }
.logo:hover { opacity: .82; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.35rem); }
.nav__link {
  position: relative;
  padding: .45rem .1rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .1rem;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--blue); font-weight: 600; }
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.header--over .nav__link[aria-current='page'] { color: #fff; }

.header__cta { flex: none; }

.burger {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--r-sm);
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t), background var(--t);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* menu mobile */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  background: var(--white);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.mnav[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
.mnav__list { display: flex; flex-direction: column; }
.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
}
.mnav__link[aria-current='page'] { color: var(--blue); }
.mnav__link svg { width: 18px; height: 18px; opacity: .3; }
.mnav__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }

@media (max-width: 1040px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
}

/* -------------------------------------------------------------- 07. hero  */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92svh, 860px);
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  background: var(--blue-ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
/* o <picture> precisa de altura explícita para a foto cobrir toda a seção */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* o gradiente garante contraste do texto sobre a foto, inclusive no mobile */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 14, 40, .93) 0%, rgba(11, 14, 40, .72) 34%, rgba(11, 14, 40, .3) 66%, rgba(11, 14, 40, .42) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__content { max-width: 40rem; color: #fff; }
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .84); }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .45rem 1rem .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #fff;
}
.hero__badge b { font-weight: 700; }
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blush); flex: none; }
.hero__btns { margin-top: 2.1rem; }

/* faixa de indicadores no rodapé do hero */
.hero__strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem 1.8rem;
}
.hero__stat { color: rgba(255, 255, 255, .74); font-size: .88rem; line-height: 1.5; }
.hero__stat b {
  display: block;
  margin-bottom: .12rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}

/* hero interno (páginas secundárias) */
.phero {
  padding-top: calc(var(--header-h) + clamp(2rem, 4.5vw, 3.75rem));
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.phero__inner { max-width: 52rem; }
.phero .lead { margin-top: 1.2rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.4rem;
  font-size: .82rem;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--blue); }
.crumbs svg { width: 13px; height: 13px; opacity: .5; }

/* ------------------------------------------------------------- 08. cards  */

.cards {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* Um card sozinho numa grade de duas colunas ocuparia a largura inteira —
   e num card com vídeo isso vira uma área enorme no meio da página. */
.cards--2 > .vcard:only-child { max-width: 560px; margin-inline: auto; }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Cada card com a altura do próprio conteúdo, em vez de todos esticados até
   o mais alto. Use quando o vão vazio incomodar mais que a base desalinhada. */
.cards--topo { align-items: start; }

.card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.card:hover { border-color: var(--slate); transform: translateY(-3px); box-shadow: var(--sh); }
.card p { color: var(--ink-2); font-size: .96rem; line-height: 1.65; }
.card--plain:hover { transform: none; box-shadow: none; border-color: var(--line); }

.sect--dark .card, .sect--blue .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .13);
}
.sect--dark .card:hover { border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.sect--dark .card p { color: rgba(255, 255, 255, .72); }

/* ícone em caixa */
.icon-box {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  margin-bottom: .3rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
}
.icon-box svg { width: 22px; height: 22px; }
.icon-box--teal { background: color-mix(in srgb, var(--teal) 11%, transparent); color: var(--teal); }
.icon-box--blush { background: var(--blush-100); color: #A9584B; }
.sect--dark .icon-box { background: rgba(255, 255, 255, .1); color: var(--blush); }

/* numeral de destaque */
.num {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--slate);
}

/* --------------------------------------------------- 09. projetos / grade */

.pgrid {
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

/* sem moldura: o card é a própria foto.
   O padding:0 é o que elimina a moldura — <button> traz padding próprio do
   navegador (1px 6px), e por ali o fundo escuro aparecia em volta da foto. */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blue-ink);
  text-align: left;
  width: 100%;
  transition: transform var(--t), box-shadow var(--t);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
/* A foto ocupa o card inteiro. Sem o flex:1, um card mais alto na mesma
   linha da grade deixaria os vizinhos com uma faixa escura vazia embaixo. */
.pcard__media { position: relative; flex: 1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 14, 40, .82) 0%, rgba(11, 14, 40, .28) 45%, transparent 72%);
}
.pcard__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 1.15rem 1.25rem;
  color: #fff;
}
.pcard__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
/* nome, dados e chamada ficam em linhas próprias — sem display:block eles
   correriam colados na mesma linha */
.pcard__name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.pcard__meta { display: block; margin-top: .2rem; font-size: .85rem; color: rgba(255, 255, 255, .74); }
.pcard__cue {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: #fff;
}
.pcard__cue svg { width: 15px; height: 15px; transition: transform var(--t); }
.pcard:hover .pcard__cue svg { transform: translateX(3px); }

.pcard--tall .pcard__media { aspect-ratio: 3 / 4; }
.pcard--wide { grid-column: span 2; }
.pcard--wide .pcard__media { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .pcard--wide { grid-column: span 1; } .pcard--wide .pcard__media { aspect-ratio: 4 / 3; } }

.tag {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #fff;
  white-space: nowrap;
}
.tag--solid { background: var(--blue); }
.tag--teal { background: var(--teal); }
.tag--light { background: var(--gray); color: var(--ink-2); backdrop-filter: none; }

/* filtros */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 42px;
  padding: .5rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: var(--white);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: all var(--t);
}
.chip:hover { border-color: var(--slate); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* os grupos de filtro convivem na mesma faixa, lado a lado */
.filter-bar { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: flex-start; }
.filter-group { display: grid; gap: .6rem; }
.filter-group__label {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-3);
}

/* ---------------------------------------------------------- 10. lightbox  */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: rgba(7, 9, 24, .96);
}
.lb[data-open='true'] { display: flex; flex-direction: column; }
.lb__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem clamp(1rem, 3vw, 1.6rem);
  color: #fff;
}
.lb__title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.lb__count { font-size: .85rem; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.lb__spacer { margin-left: auto; }
.lb__x {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background var(--t);
}
.lb__x:hover { background: rgba(255, 255, 255, .24); }
.lb__x svg { width: 20px; height: 20px; }

.lb__stage {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 0 clamp(.5rem, 6vw, 4.5rem) .5rem;
}
/* A foto é posicionada de forma absoluta dentro do palco para que a altura
   máxima tenha uma referência concreta. Com max-height:100% num elemento em
   fluxo, o palco crescia junto com a imagem e ela saía da tela. */
.lb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background var(--t);
}
.lb__nav:hover { background: rgba(255, 255, 255, .28); }
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav--prev { left: clamp(.4rem, 2vw, 1.4rem); }
.lb__nav--next { right: clamp(.4rem, 2vw, 1.4rem); }
.lb__cap {
  flex: none;
  padding: .9rem clamp(1rem, 3vw, 1.6rem) 1.4rem;
  text-align: center;
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
}
.lb__thumbs {
  flex: none;
  display: flex;
  gap: .4rem;
  padding: 0 clamp(1rem, 3vw, 1.6rem) 1.2rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.lb__thumb {
  flex: none;
  width: 68px;
  height: 50px;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: .45;
  border: 2px solid transparent;
  transition: opacity var(--t), border-color var(--t);
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb[aria-current='true'] { opacity: 1; border-color: #fff; }

@media (max-width: 640px) {
  .lb__nav { width: 44px; height: 44px; }
  .lb__thumbs { display: none; }
}

/* ------------------------------------------------------ 11. antes/depois  */

.ba {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--gray);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.ba__frame { position: relative; aspect-ratio: 4 / 3; }
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.ba__knob svg { width: 22px; height: 22px; }
.ba__tag {
  position: absolute;
  bottom: .85rem;
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  background: rgba(11, 14, 40, .74);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
.ba__tag--l { left: .85rem; }
.ba__tag--r { right: .85rem; }
/* input range invisível sobreposto: garante acesso por teclado */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* ------------------------------------ 12. fluxograma desenhado (serpentina) */
/* Caixas numeradas ligadas por setas, lendo em zigue-zague: da esquerda para a
   direita na 1ª faixa, desce, volta da direita para a esquerda, e assim por
   diante. No celular vira uma coluna simples. */

.fluxo {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 2.6rem 1.5rem;
  counter-reset: fx;
}
.fx {
  position: relative;
  counter-increment: fx;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 1.15rem 1rem 1rem;
  border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  transition: transform var(--t), box-shadow var(--t);
}
.fx:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(26, 43, 195, .3); }

/* primeira e última em branco, como na referência da marca */
.fx--inicio, .fx--fim {
  background: var(--white);
  color: var(--blue-ink);
  border: 1px solid var(--line);
}
.sect--dark .fx--inicio, .sect--dark .fx--fim { border-color: transparent; }

/* numeral em círculo, encaixado no topo da caixa */
.fx__n {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 3px solid var(--white);
}
.sect--dark .fx__n { border-color: var(--blue-ink); }
.sect--surface .fx__n { border-color: var(--surface); }
.sect--gray .fx__n { border-color: var(--gray); }

.fx__t { display: block; }
.fx__d {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.4;
  opacity: .78;
}

/* --- setas ligando as caixas (só no desktop) --- */
@media (min-width: 861px) {
  .fx::after,
  .fx::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
  }
  /* seta horizontal, para a direita */
  .fx[data-seta='direita']::after {
    right: -1.5rem;
    top: 50%;
    width: 1.5rem;
    height: 12px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12' fill='none'%3E%3Cpath d='M0 6h18' stroke='%239AAFC0' stroke-width='1.6' stroke-dasharray='3 3'/%3E%3Cpath d='M16 2l5 4-5 4' stroke='%239AAFC0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* seta horizontal, para a esquerda */
  .fx[data-seta='esquerda']::after {
    left: -1.5rem;
    top: 50%;
    width: 1.5rem;
    height: 12px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12' fill='none'%3E%3Cpath d='M24 6H6' stroke='%239AAFC0' stroke-width='1.6' stroke-dasharray='3 3'/%3E%3Cpath d='M8 2L3 6l5 4' stroke='%239AAFC0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* seta vertical, descendo para a próxima faixa */
  .fx[data-seta='baixo']::after {
    bottom: -2.6rem;
    left: 50%;
    width: 12px;
    height: 2.6rem;
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='42' viewBox='0 0 12 42' fill='none'%3E%3Cpath d='M6 0v32' stroke='%239AAFC0' stroke-width='1.6' stroke-dasharray='3 3'/%3E%3Cpath d='M2 30l4 5 4-5' stroke='%239AAFC0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
.sect--dark .fx[data-seta]::after { filter: brightness(1.5); }

/* celular: vira coluna única com linha vertical contínua */
@media (max-width: 860px) {
  .fluxo { --cols: 1; gap: 1.9rem; padding-left: .5rem; }
  .fx { justify-content: flex-start; text-align: left; padding-left: 2.9rem; min-height: 0; }
  .fx__n { top: 50%; left: -.5rem; transform: translateY(-50%); }
  .fx::after {
    content: '';
    position: absolute;
    left: .48rem;
    bottom: -1.9rem;
    width: 2px;
    height: 1.9rem;
    background: var(--slate);
    opacity: .45;
  }
  .fx:last-child::after { display: none; }
}

/* legenda opcional acima do fluxograma */
.fluxo-nota {
  margin-bottom: 1.6rem;
  font-size: .88rem;
  color: var(--ink-3);
}
.sect--dark .fluxo-nota { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------ 12b. fluxo em lista       */

.flow { position: relative; display: grid; gap: 1rem; }

/* desktop: linha do tempo horizontal em trilhas */
@media (min-width: 900px) {
  .flow {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem 1.25rem;
  }
}

.step {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.step:hover { border-color: var(--blue); box-shadow: var(--sh); }
.step__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: .28rem; }
.step p { font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.step__body { min-width: 0; }
.step--final .step__n { background: var(--teal); }

/* conector vertical no mobile */
@media (max-width: 899px) {
  .flow { padding-left: 1.1rem; }
  .flow::before {
    content: '';
    position: absolute;
    left: 0;
    top: .8rem;
    bottom: .8rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--blue), var(--teal));
    border-radius: 2px;
  }
  .step::before {
    content: '';
    position: absolute;
    left: -1.1rem;
    top: 1.9rem;
    width: 1.1rem;
    height: 2px;
    background: var(--line);
  }
}

/* --------------------------------------- 13. comparativo em colunas       */
/* Três caminhos lado a lado, o da Prontix destacado. Cada linha é um item
   que você tem, não tem ou tem pela metade em cada caminho. */

.cmp3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.cmp3__col {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.cmp3__col--destaque {
  border: 0;
  background: var(--blue);
  box-shadow: 0 20px 48px rgba(26, 43, 195, .3);
}
/* no desktop o cartão de destaque cresce um pouco */
@media (min-width: 861px) {
  .cmp3__col--destaque { margin-block: -12px; }
}

.cmp3__topo {
  padding: 1.5rem 1.25rem 1.15rem;
  text-align: center;
  border-bottom: 1px solid var(--line-2);
}
.cmp3__col--destaque .cmp3__topo { border-bottom-color: rgba(255, 255, 255, .2); }
.cmp3__nome {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .88rem;
}
.cmp3__col--destaque .cmp3__nome { color: #fff; font-size: 1.15rem; text-transform: none; letter-spacing: -.02em; }

/* faixa diagonal "melhor escolha" */
.cmp3__selo {
  position: absolute;
  top: 26px;
  right: -54px;
  z-index: 2;
  width: 186px;
  padding: .34rem 0;
  transform: rotate(45deg);
  background: var(--blush);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
/* no celular a faixa diagonal fica apertada: vira etiqueta acima do nome */
@media (max-width: 860px) {
  .cmp3__selo {
    position: static;
    display: inline-block;
    width: auto;
    transform: none;
    margin: 1.1rem auto -.4rem;
    padding: .22rem .7rem;
    border-radius: var(--r-full);
  }
  .cmp3__col--destaque { display: flex; flex-direction: column; }
  .cmp3__col--destaque .cmp3__selo { align-self: center; order: -1; }
}

.cmp3__lista { padding: .35rem 0 .6rem; }
.cmp3__l {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--line-2);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.cmp3__l:last-child { border-bottom: 0; }
.cmp3__col--destaque .cmp3__l { color: rgba(255, 255, 255, .95); border-bottom-color: rgba(255, 255, 255, .16); }

.cmp3__m {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
}
.cmp3__m svg { width: 11px; height: 11px; }
.cmp3__m--sim { background: var(--teal); color: #fff; }
.cmp3__m--nao { background: #C24A3F; color: #fff; }
.cmp3__m--parcial { background: #D9A22B; color: #fff; }
.cmp3__col--destaque .cmp3__m--sim { background: #fff; color: var(--blue); }

.cmp3__rodape { padding: 1rem 1.15rem 1.35rem; }
.cmp3__rodape .btn { width: 100%; }

/* legenda das marcas */
.cmp3__legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  margin-top: 1.6rem;
  font-size: .82rem;
  color: var(--ink-3);
}
.sect--dark .cmp3__legenda { color: rgba(255, 255, 255, .62); }
.cmp3__legenda span { display: inline-flex; align-items: center; gap: .4rem; }

/* No celular vira uma coluna só, com a Prontix na frente */
@media (max-width: 860px) {
  .cmp3 { grid-template-columns: 1fr; gap: .9rem; }
  .cmp3__col--destaque { order: -1; }
}

/* ------------------------------------------------------ 13b. comparativo em tabela */

.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .93rem;
}
.cmp th, .cmp td { padding: .95rem 1rem; text-align: left; vertical-align: top; }
.cmp thead th {
  position: sticky;
  top: 0;
  background: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cmp thead th:first-child { border-radius: var(--r) 0 0 0; }
.cmp thead th:last-child { border-radius: 0 var(--r) 0 0; }
.cmp thead th.is-prontix { background: var(--blue); }
.cmp tbody th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  width: 26%;
}
.cmp tbody td { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cmp tbody td.is-prontix { background: color-mix(in srgb, var(--blue) 5%, transparent); color: var(--ink); font-weight: 500; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-mark { display: inline-flex; align-items: center; gap: .4rem; }
.cmp-mark svg { width: 16px; height: 16px; flex: none; }
.cmp-mark--yes { color: var(--teal); }
.cmp-mark--no { color: #B4453C; }
.cmp-mark--part { color: #B07A22; }

/* versão em cartões para telas pequenas */
.cmp-cards { display: grid; gap: 1rem; }
.cmp-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cmp-card__head {
  padding: 1rem 1.15rem;
  background: var(--blue-ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
}
.cmp-card--prontix { border-color: var(--blue); border-width: 2px; }
.cmp-card--prontix .cmp-card__head { background: var(--blue); }
.cmp-card__row { display: grid; gap: .2rem; padding: .8rem 1.15rem; border-top: 1px solid var(--line-2); }
.cmp-card__row:first-of-type { border-top: 0; }
.cmp-card__k { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-family: var(--font-display); }
.cmp-card__v { font-size: .93rem; color: var(--ink-2); }
.cmp-card--prontix .cmp-card__v { color: var(--ink); }

@media (max-width: 860px) { .cmp-wrap { display: none; } }
@media (min-width: 861px) { .cmp-cards { display: none; } }

/* --------------------------------------------------------- 14. depoimentos */

.vcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.vcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--blue-ink);
  width: 100%;
  overflow: hidden;
}
.vcard__media img,
.vcard__media video { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity var(--t), transform var(--t); }
.vcard__media:hover img,
.vcard__media:hover video { opacity: .92; transform: scale(1.03); }
/* sem capa e sem arquivo: só o fundo escuro, sem imagem quebrada */
.vcard__semcapa { position: absolute; inset: 0; background: var(--blue-ink); }
.vcard__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vcard__play span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--blue);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  transition: transform var(--t), background var(--t);
}
.vcard__media:hover .vcard__play span { transform: scale(1.08); background: #fff; }
.vcard__play svg { width: 24px; height: 24px; margin-left: 3px; }
.vcard__body { padding: 1.25rem 1.35rem 1.4rem; }
.vcard__quote { font-size: 1.02rem; font-weight: 500; line-height: 1.55; color: var(--ink); font-family: var(--font-display); }
.vcard__frame { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; background: #000; }

/* Depoimento gravado no celular: o card acompanha o formato do vídeo.
   O limite de largura é o que impede um único depoimento de esticar pela
   página inteira quando não há outros ao lado. */
/* o seletor repetido vence a regra de :only-child, que é mais específica */
.vcard--vertical,
.cards--2 > .vcard--vertical:only-child { max-width: 320px; margin-inline: auto; }
.vcard--vertical .vcard__media { aspect-ratio: 9 / 16; }
.vcard--vertical .vcard__frame { aspect-ratio: 9 / 16; object-fit: contain; }
/* já em reprodução, a moldura some para o vídeo ocupar o card todo */
video.vcard__frame { object-fit: contain; }

.quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.quote__stars { display: flex; gap: .15rem; color: #E2A93B; }
.quote__stars svg { width: 16px; height: 16px; }
.quote blockquote { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.quote__who { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.quote__av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--gray);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-2);
}
.quote__who b { display: block; font-family: var(--font-display); font-size: .95rem; }
.quote__who span { font-size: .82rem; color: var(--ink-3); }

/* --------------------------------------------------- 14b. sócios / equipe  */

.socios { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .socios { grid-template-columns: 1fr; } }

.socio {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 1.35rem;
  align-items: start;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
@media (max-width: 520px) { .socio { grid-template-columns: 1fr; } }

.socio__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--gray);
}
.socio__foto.ph-media { min-height: 0; padding: 1rem .75rem; font-size: .78rem; }

.socio__txt > * + * { margin-top: .45rem; }
.socio__cargo {
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  color: var(--blue);
}
.socio__txt p { font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
.socio__txt .link-arrow { margin-top: .8rem; font-size: .88rem; }

/* ------------------------------------------------------------ 15. parceiros */

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logos__item {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 1.25rem;
  background: var(--white);
  text-align: center;
}
.logos__ph {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--slate);
}

/* ----------------------------------------------------------- 16. blog      */

.acard {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.acard:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--slate); }
.acard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); }
.acard:hover .acard__media img { transform: scale(1.04); }
.acard__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.3rem 1.4rem; flex: 1; }
.acard__cat {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.acard h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.acard p { font-size: .92rem; line-height: 1.62; color: var(--ink-2); }
.acard__foot { margin-top: auto; padding-top: .35rem; display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--ink-3); }
.acard__foot span + span::before { content: '·'; margin-right: .6rem; }

/* artigo */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.3rem; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; margin-top: 2.6rem; }
.prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; margin-top: 2rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.78; }
.prose ul, .prose ol { display: grid; gap: .6rem; padding-left: 1.3rem; }
.prose li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose img { border-radius: var(--r-lg); margin-block: 2rem; }
.prose blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--blue);
  background: var(--surface);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose figcaption { margin-top: -1.2rem; font-size: .84rem; color: var(--ink-3); text-align: center; }

.toc {
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.toc__t { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.toc ol { display: grid; gap: .45rem; counter-reset: t; }
.toc li { list-style: none; counter-increment: t; font-size: .94rem; }
.toc li::before { content: counter(t) '. '; color: var(--slate); font-family: var(--font-display); font-weight: 600; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--blue); }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.share__b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--ink-2);
  transition: all var(--t);
}
.share__b:hover { border-color: var(--blue); color: var(--blue); }
.share__b svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------- 17. FAQ     */

.faq { display: grid; gap: .6rem; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.faq__item[open] { border-color: var(--blue); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  transition: background var(--t);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--surface); }
.faq__q::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--blue); }
.faq__a { padding: 0 1.3rem 1.25rem; }
.faq__a p { color: var(--ink-2); font-size: .96rem; line-height: 1.7; }
.faq__a > * + * { margin-top: .8rem; }

/* ---------------------------------------------------------- 18. formulários */

.form { display: grid; gap: 1.1rem; }
.form__grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }

.label {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.label .req { color: var(--blue); }
.hint { font-size: .8rem; color: var(--ink-3); line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: #A8AEBB; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}
.select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5261' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  cursor: pointer;
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: #C24A3F; }
.err { display: none; font-size: .82rem; color: #C24A3F; font-weight: 500; }
.field.has-error .err { display: block; }

/* upload */
.file {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.file:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 3%, var(--surface)); }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line); color: var(--blue); }
.file__ico svg { width: 19px; height: 19px; }
.file__t { font-family: var(--font-display); font-weight: 600; font-size: .93rem; }
.file__s { font-size: .8rem; color: var(--ink-3); }

/* escolha em cartões (radio/checkbox) */
/* O mínimo de 158px é o que permite as quatro opções na mesma linha dentro
   do container estreito do formulário; abaixo disso a grade quebra sozinha
   para duas colunas e depois uma. */
.opts { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr)); }
.opt { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .95rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; transition: all var(--t); background: var(--white); }
.opt:hover { border-color: var(--slate); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--slate); border-radius: 50%; display: grid; place-items: center; transition: all var(--t); }
.opt__box::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--t); }
.opt input:checked ~ .opt__box { border-color: var(--blue); background: var(--blue); }
.opt input:checked ~ .opt__box::after { transform: scale(1); }
.opt:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 4%, transparent); }
.opt input:focus-visible ~ .opt__box { outline: 3px solid var(--blue); outline-offset: 3px; }
/* sem display:block os dois <span> correm na mesma linha e o nome da opção
   fica grudado na descrição */
.opt__t { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.opt__d { display: block; margin-top: .25rem; font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
.opt--check .opt__box { border-radius: 5px; }
.opt--check .opt__box::after { border-radius: 1px; width: 10px; height: 6px; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; }
.opt--check input:checked ~ .opt__box::after { transform: rotate(-45deg) scale(1); }

/* consentimento LGPD */
.consent { display: flex; align-items: flex-start; gap: .7rem; padding: .95rem 1.05rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); cursor: pointer; }
.consent span { font-size: .85rem; line-height: 1.6; color: var(--ink-2); }

.form__note { font-size: .8rem; color: var(--ink-3); line-height: 1.6; }

/* estado de sucesso */
.done {
  display: none;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--teal);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--teal) 5%, transparent);
  text-align: center;
}
.done[data-show='true'] { display: block; }
.done__ico { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--teal); color: #fff; }
.done__ico svg { width: 30px; height: 30px; }
.done ol { display: grid; gap: .55rem; max-width: 30rem; margin: 1.4rem auto 0; text-align: left; counter-reset: d; }
/* posicionamento absoluto do numeral: o texto flui normalmente, sem
   transformar elementos inline (como .todo) em itens flex isolados */
.done ol li {
  counter-increment: d;
  position: relative;
  padding-left: 1.95rem;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.done ol li::before {
  content: counter(d);
  position: absolute;
  left: 0;
  top: .22rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
}
form[data-sent='true'] { display: none; }

/* ------------------------------------------------------------ 19. rodapé   */

.footer { background: var(--blue-ink); color: rgba(255, 255, 255, .68); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
/* :not(.btn) é essencial: sem ele esta regra vence a cor do botão branco
   (mais específica que .btn--white) e o texto some no fundo claro. */
.footer a:not(.btn) { color: rgba(255, 255, 255, .72); }
.footer a:not(.btn):hover { color: #fff; }
.footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

.footer__logo { width: 118px; margin-bottom: 1.1rem; }
.footer__about { font-size: .92rem; line-height: 1.7; max-width: 25rem; }
.footer__h {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.footer__list { display: grid; gap: .6rem; font-size: .93rem; }
.footer__social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  transition: all var(--t);
}
.footer__social a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bar {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.4rem;
  font-size: .82rem;
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-left: auto; }
@media (max-width: 700px) { .footer__bar nav { margin-left: 0; } }

/* --------------------------------------------------- 20. whatsapp flutuante */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 58px;
  padding: 0 1.15rem 0 .55rem;
  border-radius: var(--r-full);
  background: #25D366;
  color: #06371C;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .94rem;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.wa:hover { background: #1FC55E; color: #06371C; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .26); }
.wa__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.wa__ico svg { width: 25px; height: 25px; }
/* até 900px fica compacto: nessas larguras o conteúdo ocupa a tela inteira e
   o rótulo cobriria botões e textos importantes */
@media (max-width: 900px) {
  .wa { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .wa__t { display: none; }
  .wa__ico { background: none; width: 30px; height: 30px; }
  .wa__ico svg { width: 30px; height: 30px; }
}

/* --------------------------------------------------------- 21. cookies     */

.cookie {
  position: fixed;
  left: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 95;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  transform: translateY(140%);
  transition: transform 420ms var(--ease);
}
.cookie[data-show='true'] { transform: none; }
.cookie__t { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: .45rem; }
.cookie p { font-size: .88rem; line-height: 1.62; color: var(--ink-2); }
.cookie__btns { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }
@media (max-width: 640px) {
  .cookie { left: .75rem; right: .75rem; bottom: .75rem; width: auto; padding: 1.15rem 1.15rem 1.25rem; }
  /* quando o banner está visível, sobe o botão do whatsapp */
  body:has(.cookie[data-show='true']) .wa { bottom: 12.5rem; }
}

/* ------------------------------------------------------- 22. animações     */

/* O conteúdo é visível por padrão. Quem esconde é o JavaScript, acrescentando
   a classe .oculto logo no começo — e a remove para animar a entrada.
   Assim, se o script não rodar ou falhar, nada some: no pior caso a página
   simplesmente aparece sem animação. */
[data-reveal] {
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
[data-reveal].oculto {
  opacity: 0;
  transform: translateY(16px);
}
[data-reveal][data-d='1'] { transition-delay: 70ms; }
[data-reveal][data-d='2'] { transition-delay: 140ms; }
[data-reveal][data-d='3'] { transition-delay: 210ms; }
[data-reveal][data-d='4'] { transition-delay: 280ms; }

/* usada pela rede de segurança: mostra na hora, sem depender de transição */
[data-reveal].sem-anim { transition: none; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal].oculto { opacity: 1; transform: none; }
}

/* ------------------------------------------------- 23. bloco de pendências */
/* Marca visualmente conteúdo que depende de material real da Prontix.
   Remover a classe (ou o atributo data-todo) quando o conteúdo for validado. */

[data-todo] { position: relative; }
.todo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .55rem;
  border-radius: var(--r-sm);
  background: #FFF4D6;
  border: 1px solid #E8CE8A;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #7A5B10;
  vertical-align: middle;
}
.todo::before { content: '⚠'; font-size: .8rem; }
.sect--dark .todo, .sect--blue .todo { background: rgba(255, 244, 214, .16); color: #FFE9AE; border-color: rgba(232, 206, 138, .4); }

.ph-media {
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: 2rem 1.25rem;
  min-height: 190px;
  background:
    repeating-linear-gradient(45deg, var(--surface) 0 10px, #fff 10px 20px);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  text-align: center;
  color: var(--ink-3);
  font-size: .86rem;
}
.ph-media svg { width: 26px; height: 26px; opacity: .5; }

/* ------------------------------------------------------------ 24. diversos */

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }


/* lista com marcador de verificação — o ícone é posicionado fora do fluxo
   para que o texto (e badges inline) se comportem como texto normal */
.checks { display: grid; gap: .7rem; }
.checks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.checks svg { position: absolute; left: 0; top: .3rem; width: 20px; height: 20px; color: var(--teal); }
.sect--dark .checks li { color: rgba(255, 255, 255, .76); }
.sect--dark .checks svg { color: var(--blush); }

/* pares de conteúdo lado a lado */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr 1fr; }
/* Duas colunas de texto: centralizar verticalmente faz a coluna mais curta
   descer, e aí os dois títulos deixam de começar na mesma linha. */
.split--topo { align-items: start; }
.split--media-first > .split__media { order: -1; }
/* conteúdo principal maior que a coluna lateral (ex.: formulário + canais) */
.split--main-aside { grid-template-columns: 1.35fr .8fr; align-items: start; }
@media (max-width: 960px) {
  .split--main-aside { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--media-first > .split__media { order: 0; }
}
.split__media img { border-radius: var(--r-lg); width: 100%; }
.split__media--tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* moldura de imagem com deslocamento */
.frame { position: relative; }
.frame::before {
  content: '';
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 62%;
  border-radius: var(--r-lg);
  background: var(--blush);
  z-index: -1;
}
.frame img { position: relative; }
.frame--teal::before { background: color-mix(in srgb, var(--teal) 22%, transparent); }

/* CTA final */
.cta-final { text-align: center; }
.cta-final .h2 { max-width: 34rem; margin-inline: auto; }
.cta-final .lead { max-width: 36rem; margin-inline: auto; }

/* paginação simples */
.pager { display: flex; justify-content: center; align-items: center; gap: .4rem; }
.pager a, .pager span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-2);
}
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager [aria-current='page'] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* 404 */
.e404 { display: grid; place-items: center; min-height: 74svh; padding-top: var(--header-h); text-align: center; }
.e404__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--blue);
}

/* impressão */
@media print {
  .header, .wa, .cookie, .mnav, .footer__social, .btn { display: none !important; }
  body { color: #000; }
  .sect--dark, .sect--blue { background: #fff !important; color: #000 !important; }
}