/* ==========================================================================
   TWALA TECHNOLOGY — "A Faixa"
   A banda tricolor do manual como espinha estrutural do site.
   Uma regra geradora: --ratio governa a escala tipografica, a espessura da
   faixa e o ritmo vertical. Nada aqui e composto a olho.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* A regra geradora */
  --ratio: 1.28;
  --u: 8px;

  /* Escala tipografica derivada */
  --t0: 1rem;
  --t1: 1.28rem;
  --t2: 1.638rem;
  --t3: 2.097rem;
  --t4: 2.684rem;
  --t5: 3.436rem;
  --t6: 4.398rem;

  /* Faixa: espessura de lamina e filete, derivados de --u */
  /* A lamina e fina por decisao: em escala grande o tricolor le-se como
     bandeira, nao como marca de tecnologia. Deriva do mesmo racio. */
  --band-w: calc(var(--u) / var(--ratio) / var(--ratio));  /* ~4.88px */
  --band-f: calc(var(--u) / var(--ratio) / 4);             /* ~1.56px */
  --band-h: calc(var(--band-w) * 3 + var(--band-f) * 2); /* 44px — faixa completa */

  /* Ritmo vertical */
  --s1: calc(var(--u) * 1);
  --s2: calc(var(--u) * 2);
  --s3: calc(var(--u) * 3);
  --s4: calc(var(--u) * 5);
  --s5: calc(var(--u) * 8);
  --s6: calc(var(--u) * 13);
  --section: clamp(calc(var(--u) * 8), 9vw, calc(var(--u) * 15));

  /* Cores institucionais — Manual v1.0 */
  --preto: #111111;
  --vermelho: #cf171c;
  --amarelo: #fdb603;
  --branco: #ffffff;

  /* Neutros */
  --titulo: #1a1a1a;
  --texto: #333333;
  --corpo: #404040;
  --linha: #dedede;
  --quente: #f6f6f6;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1360px;

  --nav-h: 92px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --slow: 620ms;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@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;
  }
}

body {
  font-family: "Inter", "Poppins", system-ui, -apple-system, sans-serif;
  font-size: var(--t0);
  line-height: 1.7;
  color: var(--corpo);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Superficies do browser: nada fica por vestir ------------------------ */
::selection { background: var(--amarelo); color: var(--preto); }
:root { caret-color: var(--vermelho); accent-color: var(--vermelho); }
:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--quente); }
::-webkit-scrollbar-thumb { background: var(--preto); }
::-webkit-scrollbar-thumb:hover { background: var(--vermelho); }
html { scrollbar-color: var(--preto) var(--quente); scrollbar-width: thin; }
::marker { color: var(--vermelho); }

/* --- Tipografia --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .display {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  color: var(--titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.4rem, 6.4vw, var(--t6));
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.2rem, 5.4vw, var(--t5)); }
h2 { font-size: clamp(1.9rem, 4.2vw, var(--t4)); line-height: 1.08; }
h3 { font-size: clamp(1.35rem, 2.4vw, var(--t2)); line-height: 1.2; letter-spacing: -0.015em; }
h4 { font-size: var(--t1); letter-spacing: -0.01em; }

p { max-width: var(--measure); }
.lead {
  font-size: clamp(1.06rem, 1.7vw, var(--t1));
  line-height: 1.6;
  color: var(--texto);
}

.label {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--preto);
}

/* Numerais tabulares onde ha numeros a comparar */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.phead + .section--tight { padding-top: var(--s5); }
.section--dark { background: var(--preto); color: #cfcfcf; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--branco); }
.section--dark .lead { color: #d8d8d8; }
.section--warm { background: var(--quente); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--preto);
  color: var(--branco);
  padding: var(--s2) var(--s3);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   A FAIXA — o unico divisor do sistema. Nao ha bordas de card, nao ha
   linhas decorativas. Tudo o que separa e uma faixa, e toda a faixa
   carrega informacao.
   ========================================================================== */

.band {
  display: block;
  width: 100%;
  height: var(--band-h);
  background:
    linear-gradient(var(--preto), var(--preto)) 0 0 / 100% var(--band-w) no-repeat,
    linear-gradient(var(--vermelho), var(--vermelho)) 0 calc(var(--band-w) + var(--band-f)) / 100% var(--band-w) no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) 0 100% / 100% var(--band-w) no-repeat;
  background-color: transparent;
}
.band--thin { --band-w: 3px; --band-f: 1px; }

/* A regua: o divisor de seccao por omissao. Uma linha fina, com um selo
   tricolor curto a abrir. O tricolor marca, nao domina. */
.rule {
  position: relative;
  height: 3px;
  background: var(--linha);
}
.rule::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 96px;
  background: linear-gradient(90deg,
    var(--preto) 0 33.33%, var(--vermelho) 33.33% 66.66%, var(--amarelo) 66.66%);
}
.section--dark .rule, .foot .rule { background: #2e2e2e; }
.section--dark .rule::before, .foot .rule::before {
  background: linear-gradient(90deg,
    var(--branco) 0 33.33%, var(--vermelho) 33.33% 66.66%, var(--amarelo) 66.66%);
}
.band--rule { margin-block: var(--s5); }

/* Faixa de progresso: fica sob a navegacao e regista o percurso.
   Movimento com memoria — a mesma banda diz onde estas. */
.progress {
  position: relative;
  height: 4px;
  background: var(--quente);
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--preto) 0 33.33%, var(--vermelho) 33.33% 66.66%, var(--amarelo) 66.66% 100%);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* --- Navegacao ---------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--nav-h);
}
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 54px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s2), 2.2vw, var(--s4));
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.nav__link {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--titulo);
  text-decoration: none;
  padding-block: var(--s2);
  letter-spacing: -0.01em;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 3px;
  width: 100%;
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  flex: 0 0 auto;
  margin-left: var(--s2);
}
.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: var(--s1);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 30px;
  height: 3px;
  background: var(--preto);
  margin-block: 6px;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.nav[data-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2) { opacity: 0; }
.nav[data-open="true"] .nav__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  .nav__links {
    /* O .nav usa backdrop-filter e por isso e o bloco de contencao dos
       descendentes posicionados: ancoramos o painel ao cabecalho. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    flex-direction: column;
    justify-content: center;
    gap: var(--s4);
    background: var(--branco);
    margin: 0;
    padding: var(--s4) var(--gutter);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--slow) var(--ease), opacity var(--fast) var(--ease),
                visibility 0s linear var(--slow);
  }
  .nav[data-open="true"] .nav__links {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--slow) var(--ease), opacity var(--fast) var(--ease),
                visibility 0s;
  }
  .nav__link { font-size: var(--t2); }
  .nav__cta { display: none; }
  .nav__links .nav__cta { display: block; margin: var(--s2) 0 0; }
}

/* --- Accao: blocos de faixa, nao pilulas -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 18px 30px;
  border: 0;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform var(--slow) var(--ease);
  transform-origin: left;
}
.btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  z-index: -1;
  transition: background var(--fast) var(--ease);
}
.btn--primary { color: var(--branco); }
.btn--primary::before { background: var(--vermelho); }
.btn--primary::after { background: var(--amarelo); }
.btn--primary:hover::before { background: var(--preto); }
.btn--primary:hover::after { background: var(--vermelho); }

.btn--ghost { color: var(--preto); }
.btn--ghost::before { background: transparent; box-shadow: inset 0 0 0 2px var(--preto); }
.btn--ghost::after { background: var(--vermelho); }
.btn--ghost:hover { color: var(--branco); }
.btn--ghost:hover::before { background: var(--preto); }

.btn--onDark { color: var(--preto); }
.btn--onDark::before { background: var(--branco); }
.btn--onDark::after { background: var(--vermelho); }
.btn--onDark:hover { color: var(--branco); }
.btn--onDark:hover::before { background: var(--vermelho); }
.btn--onDark:hover::after { background: var(--amarelo); }

.btn:active { transform: translateY(1px); }
.btn__arrow { width: 18px; height: 18px; flex: 0 0 auto; }

/* Ligacao textual com faixa por baixo */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--titulo);
  text-decoration: none;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--vermelho), var(--vermelho));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  transition: background-size var(--fast) var(--ease), color var(--fast) var(--ease);
}
.link:hover { background-size: 100% 100%; color: var(--branco); }
.section--dark .link { color: var(--branco); }

/* ==========================================================================
   HERO — a faixa entra em cima a esquerda, atravessa a diagonal e sai em
   baixo a direita. A janela da fotografia e recortada por ela. Os tres
   segmentos da faixa sao a posicao do slide, e o controlo.
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--s5), 9vh, 120px) clamp(var(--s4), 5vh, 64px);
  overflow: hidden;
  background: var(--preto);
  color: var(--branco);
}

/* Fundo: as tres fotografias em rotacao, a toda a largura. */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
}
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.06) brightness(0.62);
  transform: scale(1.08);
  transition: transform 11s linear;
}
.hero__slide[data-active="true"] img { transform: scale(1); }

/* Vidro escuro: e o que garante o contraste do texto sobre qualquer foto. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(17,17,17,0.90) 0%, rgba(17,17,17,0.78) 38%, rgba(17,17,17,0.42) 72%, rgba(17,17,17,0.22) 100%),
    linear-gradient(to top, rgba(17,17,17,0.82) 0%, rgba(17,17,17,0) 46%);
}

/* A faixa fica: fina, vertical, a marcar a coluna do discurso. */
.hero__mark {
  width: 108px;
  height: 5px;
  background: linear-gradient(90deg,
    var(--branco) 0 33.33%, var(--vermelho) 33.33% 66.66%, var(--amarelo) 66.66%);
  margin-bottom: var(--s4);
}

.hero__grid {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero__copy { position: relative; max-width: min(700px, 58%); }
.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--branco);
}
.hero__title em { font-style: normal; display: block; color: var(--amarelo); }
.hero__lead {
  margin-top: var(--s4);
  max-width: 46ch;
  color: #dcdcdc;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
}
.hero__actions {
  position: relative;
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Barra inferior: legenda da foto a esquerda, controlo da faixa a direita. */
.hero__foot {
  position: relative;
  z-index: 3;
  margin-top: clamp(var(--s5), 8vh, var(--s6));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.hero__caption {
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d2d2d2;
  max-width: 46ch;
}

/* O controlo continua a ser a faixa: tres segmentos, tres fotografias. */
.slider {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 6px;
  width: min(280px, 42vw);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.slider:active { cursor: grabbing; }
.slider__seg {
  flex: 1;
  height: 6px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.28);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.slider__seg::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.slider__seg:nth-child(1) { color: var(--branco); }
.slider__seg:nth-child(2) { color: var(--vermelho); }
.slider__seg:nth-child(3) { color: var(--amarelo); }
.slider__seg[aria-selected="true"]::after { transform: scaleX(1); }
.slider__seg:hover::after { transform: scaleX(1); opacity: 0.5; }
.slider__seg[aria-selected="true"]:hover::after { opacity: 1; }

@media (max-width: 900px) {
  .hero { min-height: min(94svh, 760px); }
  .hero__copy { max-width: none; }
  .hero__lead { font-size: 1rem; }
  .hero__title { font-size: clamp(2.1rem, 9.6vw, 3rem); }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(17,17,17,0.72) 0%, rgba(17,17,17,0.82) 40%, rgba(17,17,17,0.95) 100%);
  }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .slider { width: 100%; }
}

/* ==========================================================================
   NUMEROS + SOFTWARES — carrossel que corre ao longo da faixa.
   Nao e a fila de estatisticas da categoria: os numeros viajam.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  padding-block: var(--s4);
}
.marquee__track {
  display: flex;
  gap: var(--s6);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__item {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex: 0 0 auto;
  color: var(--branco);
  white-space: nowrap;
}
.marquee__n {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.2rem, 4.4vw, var(--t4));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amarelo);
}
.marquee__l {
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9b9b9;
}
.marquee__sw {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, var(--t2));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--branco);
}
.marquee__sw span { color: var(--vermelho); }

/* ==========================================================================
   O QUE FAZEMOS — linhas separadas pela faixa. Zero cards, zero contornos.
   ========================================================================== */

.rows { border: 0; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--s3), 4vw, var(--s5));
  padding-block: clamp(var(--s4), 5vw, var(--s5));
  position: relative;
  text-decoration: none;
  color: inherit;
}
.row + .row { border-top: 0; }
.row::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--band-h);
  background:
    linear-gradient(var(--preto), var(--preto)) 0 0 / 100% var(--band-w) no-repeat,
    linear-gradient(var(--vermelho), var(--vermelho)) 0 calc(var(--band-w) + var(--band-f)) / 100% var(--band-w) no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) 0 100% / 100% var(--band-w) no-repeat;
  transform: scaleX(0.13);
  transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.row:hover::before,
.row:focus-visible::before { transform: scaleX(1); }
.row__head { display: flex; flex-direction: column; gap: var(--s2); }
.row__icon { width: 44px; height: 44px; color: var(--vermelho); }
.row__body > * + * { margin-top: var(--s3); }
.row__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  font-size: 0.9375rem;
  color: var(--texto);
}
.row__list li { display: flex; align-items: center; gap: var(--s1); }
.row__list li::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--amarelo);
  flex: 0 0 auto;
}

@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PORQUE SOMOS OS MELHORES — hastes verticais que saem da faixa.
   ========================================================================== */

.stems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0;
}
.stem {
  padding: var(--s5) var(--s4) var(--s4) 0;
  position: relative;
}
.stem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--band-w);
  background: var(--preto);
}
.stem:nth-child(3n+2)::before { background: var(--vermelho); }
.stem:nth-child(3n)::before { background: var(--amarelo); }
/* Num fundo preto a lamina preta desaparece: passa a branca. */
.section--dark .stem::before { background: var(--branco); }
.section--dark .stem:nth-child(3n+2)::before { background: var(--vermelho); }
.section--dark .stem:nth-child(3n)::before { background: var(--amarelo); }
.stem h3 { margin-bottom: var(--s2); }
.stem p { font-size: 0.9375rem; }
.section--dark .stem p { color: #c4c4c4; }
@media (min-width: 700px) {
  .stem { padding-right: var(--s5); }
}

/* ==========================================================================
   CERTIFICACAO — uma credencial real, apresentada em escala, sem parede
   de selos inventados.
   ========================================================================== */

.cred {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s4), 5vw, var(--s6));
  align-items: center;
}
.cred__mark {
  background: var(--branco);
  padding: clamp(var(--s4), 5vw, var(--s6));
  position: relative;
}
.cred__mark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--band-h);
  background:
    linear-gradient(var(--preto), var(--preto)) 0 0 / 100% var(--band-w) no-repeat,
    linear-gradient(var(--vermelho), var(--vermelho)) 0 calc(var(--band-w) + var(--band-f)) / 100% var(--band-w) no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) 0 100% / 100% var(--band-w) no-repeat;
}
.cred__name {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.6rem, 3.4vw, var(--t3));
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--titulo);
  line-height: 1.1;
}
.cred__brand {
  display: grid;
  gap: var(--s2);
  align-items: start;
}
.cred__brand img {
  width: clamp(150px, 18vw, 210px);
  height: auto;
}
.cred__brand span {
  font-family: "Poppins", sans-serif;
  font-size: clamp(var(--t2), 3vw, var(--t3));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--titulo);
}
.cred__meta {
  margin-top: var(--s2);
  font-size: 0.9375rem;
  color: var(--corpo);
}
@media (max-width: 820px) { .cred { grid-template-columns: 1fr; } }

/* --- Marcas / clientes -------------------------------------------------- */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--s4), 5vw, var(--s6));
}
.logos img {
  height: clamp(38px, 5vw, 54px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.logos img:hover { filter: grayscale(0); opacity: 1; }

/* --- Projectos ---------------------------------------------------------- */
.works { display: grid; gap: var(--s5); }
.work {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s3), 4vw, var(--s5));
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.work:nth-child(even) .work__shot { order: 2; }
.work__shot {
  position: relative;
  overflow: hidden;
  background: var(--quente);
  aspect-ratio: 16 / 11;
}
.work__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--slow) var(--ease);
}
.work:hover .work__shot img { transform: scale(1.04); }
.work__shot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--band-w);
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.work:hover .work__shot::after { transform: scaleX(1); }
.work__body > * + * { margin-top: var(--s2); }

/* Sem captura do sistema: a chapa mostra a marca do produto. */
.work__shot--brand {
  display: grid;
  place-items: center;
  padding: clamp(var(--s3), 6%, var(--s5));
  background: var(--branco);
  border: 1px solid var(--linha);
}
.work__shot--brand img {
  width: auto;
  max-width: 74%;
  height: auto;
  max-height: 56%;
  object-fit: contain;
}
.work:hover .work__shot--brand img { transform: scale(1.03); }

/* Lockup da marca a substituir o nome em texto. */
.work__brand { line-height: 0; }
.work__brand img {
  height: clamp(34px, 4vw, 52px);
  width: auto;
  max-width: min(100%, 260px);
  object-fit: contain;
}
@media (max-width: 820px) {
  .work { grid-template-columns: 1fr; }
  .work:nth-child(even) .work__shot { order: 0; }
}

/* --- Artigos ------------------------------------------------------------ */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s5) var(--s4);
}
.post { text-decoration: none; color: inherit; display: block; }
.post__shot {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--quente);
  margin-bottom: var(--s3);
  position: relative;
}
.post__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.post:hover .post__shot img { transform: scale(1.04); }
.post__shot::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--preto) 0 33.33%, var(--vermelho) 33.33% 66.66%, var(--amarelo) 66.66%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.post:hover .post__shot::after { transform: scaleX(1); }
.post__meta {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: var(--s1);
}
.post h3 { font-size: var(--t1); }
.post p { font-size: 0.9375rem; margin-top: var(--s2); }

/* --- Formulario --------------------------------------------------------- */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: var(--s1); }
.field > label {
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--titulo);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--quente);
  border: 0;
  border-bottom: 3px solid var(--linha);
  padding: 16px 18px;
  color: var(--texto);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
.field input:focus, .field textarea:focus, .field select:focus {
  background: var(--branco);
  border-bottom-color: var(--vermelho);
  outline-offset: 2px;
}
.field textarea { min-height: 140px; resize: vertical; }

/* O CSS do Filament (@filamentStyles) injecta um chevron em `select` sem
   `background-repeat`/`appearance`, o que fazia a seta repetir-se por cima do
   texto. Desenhamos a nossa seta e fechamos a porta a essa regra.
   `.form .field select` tem mais especificidade que `select:not(.choices)`. */
.form .field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 48px;
  background-color: var(--quente);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px 18px;
}
.form .field select:focus { background-color: var(--branco); }
.form .field select::-ms-expand { display: none; }

/* Verificacao humana: uma conta simples ao lado do campo. */
.field--captcha { max-width: 340px; }
.captcha {
  display: flex;
  align-items: stretch;
  gap: var(--s1);
  background: var(--quente);
  border-bottom: 3px solid var(--linha);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field--error .captcha { border-bottom-color: var(--vermelho); }
.captcha:focus-within { background: var(--branco); border-bottom-color: var(--vermelho); }
.captcha__sum {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 18px;
  font-family: "Poppins", sans-serif;
  font-size: var(--t1);
  font-weight: 600;
  color: var(--titulo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
}
.form .field .captcha__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: var(--t1);
  font-weight: 600;
  color: var(--titulo);
}
.form .field .captcha__input:focus { background: transparent; outline-offset: -2px; }
.captcha__new {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  background: none;
  border: 0;
  color: #6f6f6f;
  cursor: pointer;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.captcha__new:hover { color: var(--vermelho); transform: rotate(-120deg); }
.captcha__new svg { width: 16px; height: 16px; }
.field--error input, .field--error textarea, .field--error select { border-bottom-color: var(--vermelho); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vermelho);
}
.field__error svg { width: 16px; height: 16px; flex: 0 0 auto; }
.form__ok {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  background: var(--preto);
  color: var(--branco);
  padding: var(--s3) var(--s4);
}
.form__ok svg { width: 22px; height: 22px; color: var(--amarelo); flex: 0 0 auto; margin-top: 2px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }

button[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Cabecalho de pagina interior --------------------------------------- */
.phead {
  padding-block: clamp(var(--s5), 8vw, var(--s6)) var(--s4);
  position: relative;
  overflow: hidden;
}
.phead__title { max-width: 20ch; }
.phead__lead { margin-top: var(--s3); }
.crumbs {
  display: flex;
  gap: var(--s1);
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6f6f;
  margin-bottom: var(--s3);
}
.crumbs a { text-decoration: none; color: var(--vermelho); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Rodape ------------------------------------------------------------- */
.foot { background: var(--preto); color: #b4b4b4; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  padding-block: var(--s6) var(--s5);
}
.foot h4 {
  color: var(--branco);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.foot ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.foot a { text-decoration: none; color: #b4b4b4; transition: color var(--fast) var(--ease); }
.foot a:hover { color: var(--amarelo); }
.foot__logo { height: 46px; width: auto; margin-bottom: var(--s3); }
.foot__tag { color: #8f8f8f; font-size: 0.9375rem; max-width: 32ch; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  padding-block: var(--s3);
  font-size: 0.8125rem;
  color: #8f8f8f;
}
@media (max-width: 1100px) { .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* --- Revelacao: um unico momento, ja visivel por defeito ---------------- */
[data-reveal] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  }
  .js [data-reveal][data-shown="true"] { opacity: 1; transform: none; }
}

.u-mt3 { margin-top: var(--s3); }
.u-mt4 { margin-top: var(--s4); }
.u-mt5 { margin-top: var(--s5); }
.u-max { max-width: var(--measure); }

/* --- Acessibilidade ----------------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Variante da accao secundaria sobre fundo preto */
.btn--ghostDark { color: var(--branco); }
.btn--ghostDark::before { background: transparent; box-shadow: inset 0 0 0 2px #4a4a4a; }
.btn--ghostDark::after { background: var(--amarelo); }
.btn--ghostDark:hover { color: var(--preto); }
.btn--ghostDark:hover::before { background: var(--branco); box-shadow: inset 0 0 0 2px var(--branco); }
.btn--ghostDark:hover::after { background: var(--vermelho); }

/* Marcas em fundo claro sao mais legiveis sem inversao */
.section--warm .logos img { mix-blend-mode: multiply; }

/* --- Artigo ------------------------------------------------------------- */
.article { max-width: 44rem; margin-inline: auto; }
.article__cover {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--quente);
  position: relative;
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6f6f;
}
.article__meta strong { color: var(--vermelho); font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; padding: 0; }
.tags li {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--titulo);
  background: var(--quente);
  padding: 6px 12px;
  border-bottom: 3px solid var(--amarelo);
}

.prose { font-size: 1.0625rem; line-height: 1.78; color: var(--corpo); }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { font-size: var(--t2); margin-top: var(--s5); }
.prose h3 { font-size: var(--t1); margin-top: var(--s4); }
.prose p { max-width: none; }
.prose a { color: var(--vermelho); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prose a:hover { background: var(--amarelo); color: var(--preto); text-decoration-color: transparent; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--s1); }
.prose img { margin-block: var(--s4); }
.prose blockquote {
  padding-top: var(--s3);
  background:
    linear-gradient(var(--preto), var(--preto)) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--vermelho), var(--vermelho)) 0 6px / 100% 4px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) 0 12px / 100% 4px no-repeat;
  font-size: var(--t1);
  line-height: 1.5;
  color: var(--titulo);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--quente);
  padding: 2px 6px;
}
.prose pre {
  background: var(--preto);
  color: #e8e8e8;
  padding: var(--s3);
  overflow-x: auto;
}
.prose pre code { background: none; color: inherit; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.prose th { font-family: "Poppins", sans-serif; color: var(--titulo); }

.share { display: flex; flex-wrap: wrap; gap: var(--s1); }
.share a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--titulo);
  padding: 10px 16px;
  background: var(--quente);
  border-bottom: 3px solid var(--linha);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.share a:hover { background: var(--preto); color: var(--branco); border-bottom-color: var(--vermelho); }

/* Paginacao */
.paginacao nav { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.paginacao a, .paginacao span {
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 14px;
  color: var(--titulo);
  background: var(--quente);
}
.paginacao a:hover { background: var(--preto); color: var(--branco); }

/* A lamina preta desaparece sobre fundo preto: sobre escuro, ela e branca. */
.section--dark .band,
.foot .band {
  background:
    linear-gradient(var(--branco), var(--branco)) 0 0 / 100% var(--band-w) no-repeat,
    linear-gradient(var(--vermelho), var(--vermelho)) 0 calc(var(--band-w) + var(--band-f)) / 100% var(--band-w) no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) 0 100% / 100% var(--band-w) no-repeat;
}

.logos img { opacity: 0.78; }

/* O manual so tem a assinatura principal em ficheiro; sobre preto ela assenta
   deliberadamente numa placa branca (combinacao "Principal" do manual),
   ate existir o ficheiro da versao reversa. */
.foot__logo {
  height: 62px;
  background: var(--branco);
  padding: 10px 16px;
  box-sizing: content-box;
}

/* ==========================================================================
   STACK TECNOLOGICA — as marcas com que construimos, a vista.
   ========================================================================== */
.stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) clamp(var(--s4), 6vw, var(--s6));
}
.stack__group {
  padding-top: var(--s3);
  box-shadow: inset 0 1px 0 #2e2e2e;
}
.stack__group h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: var(--s3);
}
.stack__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.tech {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--branco);
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--titulo);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tech img,
.tech svg { width: 22px; height: 22px; opacity: 0.9; flex: 0 0 auto; }
.tech:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(17, 17, 17, 0.1); }
.section--dark .tech { background: #1c1c1c; color: #e6e6e6; }
.section--dark .tech img { filter: invert(1) brightness(1.6); opacity: 0.85; }
.section--dark .tech svg { color: var(--branco); opacity: 0.85; }
.section--dark .tech:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }

@media (max-width: 820px) {
  .stack { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ==========================================================================
   PROCESSO — cinco etapas numeradas. A sequencia e a informacao.
   ========================================================================== */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 92px minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s3) var(--s4);
  padding-block: var(--s4);
  position: relative;
}
.step + .step { box-shadow: inset 0 1px 0 var(--linha); }
.section--dark .step + .step { box-shadow: inset 0 1px 0 #2e2e2e; }
.step__n {
  font-family: "Poppins", sans-serif;
  font-size: var(--t2);
  font-weight: 700;
  line-height: 1;
  color: var(--vermelho);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t1); }
.step p { font-size: 0.9375rem; }
.section--dark .step p { color: #c4c4c4; }
@media (max-width: 820px) {
  .step { grid-template-columns: 56px minmax(0, 1fr); }
  .step p { grid-column: 2; }
}

/* Faixa de produto: rotulo curto sobre o tipo de sistema */
.kicker-kind {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermelho);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--corpo);
  background: var(--quente);
  padding: 5px 10px;
}
.section--dark .chips span { background: #1f1f1f; color: #cfcfcf; }

.u-mt6 { margin-top: var(--s6); }

/* ==========================================================================
   CIRCUITOS TECNOLOGICOS — textura do manual. Sempre atras do conteudo,
   nunca a atravessar texto, sempre discreta.
   ========================================================================== */
.circuits {
  position: absolute;
  z-index: 0;
  width: clamp(320px, 42vw, 620px);
  height: auto;
  pointer-events: none;
  color: var(--linha);
}
.circuits--dark { color: #2f2f2f; }
.circuits--onPhoto { color: rgba(255, 255, 255, 0.34); }

.circuits--top-right { top: 0; right: 0; transform: translate(14%, -18%); }
.circuits--bottom-left { bottom: 0; left: 0; transform: translate(-16%, 20%) scaleX(-1); }
.circuits--top-left { top: 0; left: 0; transform: translate(-14%, -18%) scaleX(-1); }

.circuits__nodes { opacity: 0.9; }

.circuits__pulse {
  stroke: var(--vermelho);
  stroke-dasharray: 34 1200;
  stroke-dashoffset: 1234;
  opacity: 0;
}
.circuits--onPhoto .circuits__pulse { stroke: var(--amarelo); }
.circuits--dark .circuits__pulse--b { stroke: var(--amarelo); }

@media (prefers-reduced-motion: no-preference) {
  .circuits__pulse--a { animation: trace 7s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
  .circuits__pulse--b { animation: trace 9s cubic-bezier(0.45, 0, 0.25, 1) 2.4s infinite; }
}
@keyframes trace {
  0% { stroke-dashoffset: 1234; opacity: 0; }
  6% { opacity: 1; }
  62% { opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* As seccoes que recebem circuitos abrem contexto de posicionamento */
.section, .phead, .hero, .marquee { position: relative; overflow: hidden; }
.section > .wrap, .phead > .wrap, .hero > .wrap { position: relative; z-index: 2; }

/* Rodape: assinatura reversa do manual, sem placa branca */
.foot__logo {
  height: 54px;
  background: none;
  padding: 0;
}

/* Campanha: hero de imagem unica e modal no sistema do site */
.hero--campaign .hero__slide { opacity: 1; }
.campaign-modal { padding: var(--s2) 0; }
.campaign-modal .u-mt2 { margin-top: var(--s2); color: var(--corpo); }

[id] { scroll-margin-top: 112px; }

.service-hero {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  color: #c4c4c4;
  padding-block: clamp(var(--s5), 8vw, var(--s6)) var(--s5);
}
.service-hero__inner { position: relative; z-index: 2; }
.service-hero .crumbs { color: #b8b8b8; }
.service-hero .crumbs a { color: var(--amarelo); }
.service-hero .crumbs svg { color: #b4b4b4; }
.service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(var(--s5), 7vw, var(--s6));
  align-items: end;
}
.service-hero__title {
  max-width: 19ch;
  color: var(--branco);
  font-size: clamp(var(--t3), 5.4vw, var(--t6));
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.service-hero--detail .service-hero__title {
  max-width: 21ch;
  font-size: clamp(var(--t3), 4.8vw, var(--t5));
}
.service-hero__lead {
  max-width: 58ch;
  margin-top: var(--s4);
  color: #d8d8d8;
}
.service-hero__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s4);
  color: var(--amarelo);
}
.service-hero__aside {
  position: relative;
  padding-top: var(--s4);
  box-shadow: inset 0 3px 0 #373737;
}
.service-hero__aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 3px;
  background: linear-gradient(90deg, var(--branco) 0 33.33%, var(--vermelho) 33.33% 66.66%, var(--amarelo) 66.66%);
}
.service-hero__aside-title {
  max-width: none;
  margin-bottom: var(--s2);
  font-family: "Poppins", sans-serif;
  font-size: var(--t1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--branco);
}
.service-hero__aside p:not(.service-hero__aside-title) { color: #c8c8c8; }
.service-hero__list {
  display: grid;
  gap: var(--s2);
  padding: 0;
  list-style: none;
}
.service-hero__list li {
  position: relative;
  padding-left: var(--s3);
  color: #dcdcdc;
}
.service-hero__list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--amarelo);
}
.service-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s3);
  box-shadow: inset 0 1px 0 #383838;
}
.service-anchors a {
  color: #dcdcdc;
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration-color: var(--vermelho);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color var(--fast) var(--ease);
}
.service-anchors a:hover { color: var(--amarelo); }

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--s4), 6vw, var(--s6));
  align-items: start;
}
.section-intro > :last-child { justify-self: start; }
.section--dark .section-intro > p:not(.lead) { color: #c4c4c4; }

.loss-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--s4), 6vw, var(--s6));
}
.loss-item {
  position: relative;
  padding: var(--s4) 0 var(--s5) var(--s4);
  box-shadow: inset 0 1px 0 var(--linha);
}
.loss-item::before {
  content: "";
  position: absolute;
  top: calc(var(--s4) + 0.45em);
  left: 0;
  width: 11px;
  height: 11px;
  background: var(--vermelho);
}
.loss-item h3 { font-size: var(--t1); }
.loss-item p { margin-top: var(--s2); }

.service-fit {
  max-width: 34ch;
  font-size: var(--t0);
  font-weight: 600;
  color: var(--vermelho);
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s5), 8vw, calc(var(--s6) * 1.5));
  align-items: start;
}
.fit-grid h2 { font-size: clamp(var(--t2), 3vw, var(--t3)); }
.check-list {
  display: grid;
  gap: var(--s3);
  padding: 0;
  list-style: none;
}
.check-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
}
.check-list svg { margin-top: 3px; color: var(--vermelho); }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(var(--s5), 8vw, var(--s6));
  align-items: start;
}
.faq-list details { box-shadow: inset 0 1px 0 var(--linha); }
.faq-list details:last-child { box-shadow: inset 0 1px 0 var(--linha), inset 0 -1px 0 var(--linha); }
.faq-list summary {
  position: relative;
  padding: var(--s3) 48px var(--s3) 0;
  color: var(--titulo);
  font-family: "Poppins", sans-serif;
  font-size: var(--t1);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 18px;
  height: 2px;
  background: var(--vermelho);
  transition: transform var(--fast) var(--ease);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0); }
.faq-list details p { padding: 0 48px var(--s4) 0; }

.service-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(var(--s5), 8vw, var(--s6));
  align-items: start;
}
.service-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.service-contact__note {
  flex-basis: 100%;
  color: #b4b4b4;
  font-size: 0.8125rem;
}

@media (max-width: 900px) {
  .service-hero__grid,
  .section-intro,
  .fit-grid,
  .faq-layout,
  .service-contact__grid {
    grid-template-columns: 1fr;
  }
  .service-hero__grid { gap: var(--s5); }
  .service-hero__aside { max-width: var(--measure); }
  .section-intro { gap: var(--s3); }
  .faq-layout { gap: var(--s4); }
}

@media (max-width: 640px) {
  .service-hero { padding-block: var(--s5) var(--s4); }
  .service-hero__title,
  .service-hero--detail .service-hero__title { font-size: clamp(var(--t3), 10.5vw, var(--t4)); }
  .service-anchors { display: grid; gap: var(--s2); }
  .loss-list { grid-template-columns: 1fr; }
  .loss-item { padding-right: 0; }
  .service-contact__actions .btn { width: 100%; justify-content: center; }
}