/* ==========================================================================
   Seções da homepage (na ordem em que aparecem)
   ========================================================================== */

/* ---------- Hero: texto à esquerda, painel do processo à direita ---------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  background:
    linear-gradient(to bottom, var(--surface-2), var(--surface) 85%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--heading);
  text-wrap: balance;
}
.hero__brand { display: flex; width: fit-content; margin-bottom: var(--space-5); line-height: 1.4; letter-spacing: 0.08em; }
.hero__headline { display: block; }
/* Destaque em marca-texto com o verde vibrante */
.hl {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pcj-green-vibrant) 55%, transparent) 62%, color-mix(in srgb, var(--pcj-green-complementary) 55%, transparent) 92%, transparent 92%);
  padding-inline: 0.06em;
}

.hero__lead { font-size: var(--fs-md); color: var(--text-muted); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.hero__facts div { display: flex; flex-direction: column-reverse; }
.hero__facts dt { font-size: var(--fs-sm); color: var(--text-muted); }
.hero__facts dd {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}

/* Painel em gradiente das cores oficiais com cartão branco por cima */
.hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  border-radius: calc(var(--radius-lg) + 0.5rem);
  background:
    radial-gradient(circle at 85% 10%, var(--pcj-green-complementary), transparent 45%),
    linear-gradient(140deg, var(--pcj-blue-secondary) 0%, var(--pcj-blue-primary) 45%, var(--pcj-green-primary) 100%);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  overflow: hidden;
}
/* Pontilhado decorativo */
.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(255 255 255 / 0.22) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, black, transparent 60%);
  mask-image: linear-gradient(200deg, black, transparent 60%);
}

.flow-card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.flow-card__label {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow { display: grid; gap: var(--space-5); }
.flow__item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
/* Linha vertical ligando as etapas */
.flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 2.85rem;
  bottom: calc(var(--space-5) * -1 + 0.25rem);
  width: 2px;
  background: linear-gradient(var(--pcj-blue-secondary), var(--pcj-green-vibrant));
  opacity: 0.5;
}
.flow__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--accent-text);
}
.flow__item:nth-child(2) .flow__icon { background: var(--green-soft); color: var(--pcj-green-primary); }
.flow__item:nth-child(3) .flow__icon { background: var(--ink-2); color: var(--pcj-green-vibrant); }
.flow__icon .icon { width: 1.2rem; height: 1.2rem; }
.flow__title { font-weight: 800; color: var(--heading); }
.flow__text { color: var(--text-muted); font-size: 0.9375rem; }

.hero__now {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  background: rgb(11 42 64 / 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.9375rem;
}
.live-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--pcj-green-vibrant);
  box-shadow: 0 0 0 0 var(--pcj-green-complementary);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: pulse 2s infinite; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pcj-green-complementary) 70%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 56em) {
  /* minmax(0, 1fr): a coluna não cresce além da tela por causa de textos longos */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30em) {
  .hero__actions .btn { width: 100%; }
}

/* ---------- Clientes: faixa clara de logos ---------- */
.clients { padding-block: var(--space-6) var(--space-7); background: var(--surface); }
.clients__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-6);
}
.clients__title {
  max-width: 11rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.4;
}

.marquee {
  --logo-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
}

/* Cartão de logo: tamanho fixo e proporcional à tela, sempre com fundo branco.
   Alguns arquivos têm fundo branco próprio e outros são transparentes; o branco
   uniforme faz todos parecerem iguais nos dois temas. A imagem fica sempre
   contida no cartão (object-fit: contain), sem vazar nem distorcer. */
.logo-item {
  flex: none;
  width: clamp(7.5rem, 6rem + 5vw, 10rem);
  aspect-ratio: 2 / 1;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.logo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* MRV: o arquivo tem muita margem vertical; amplia para equilibrar com os demais */
.logo-item--zoom img {
  transform: scale(1.45);
  filter: brightness(1.03); /* o fundo do arquivo é #f9fefd; leva a branco puro */
}
[data-theme="dark"] .logo-item { border-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .marquee.is-animated .marquee__track { animation: marquee 50s linear infinite; }
  .marquee.is-animated:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - var(--logo-gap) / 2)); }
}
.marquee:not(.is-animated) { -webkit-mask-image: none; mask-image: none; }
.marquee:not(.is-animated) .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; }

@media (max-width: 47.99em) {
  .clients__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .clients__title { max-width: none; text-align: center; }
}

/* ---------- Serviços: abas ---------- */
.services { background: var(--surface-2); }

.svc {
  display: grid;
  grid-template-columns: 19.5rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* Sem JS a lista de abas (e a instrução) fica oculta e todos os painéis aparecem empilhados */
.svc__nav { display: none; }
.js .svc__nav {
  display: grid;
  gap: var(--space-3);
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}

/* Instrução: deixa claro que a lista troca o conteúdo ao lado */
.svc__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.svc__hint .icon { width: 1.15rem; height: 1.15rem; flex: none; }
.svc__hint-mobile { display: none; }

.js .svc__tabs { display: grid; gap: 0.5rem; }

/* Cópias das pontas (fileira em loop) só existem no celular */
.svc__tab.svc__tab--clone { display: none; }
@media (max-width: 56em) {
  .js .svc__tab.svc__tab--clone { display: flex; }
}

/* Cada serviço com cara de botão: fundo, borda e seta visíveis em todos */
.svc__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.8rem 0.9rem 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.svc__tab > span { flex: 1; }
.svc__tab .icon { color: var(--text-muted); transition: color 0.2s, transform 0.2s var(--ease); }
/* Seta sempre na mesma coluna, à direita, mesmo quando o nome quebra em duas linhas */
.svc__chev { opacity: 0.55; margin-left: auto; flex: none; }
.svc__tab:hover {
  border-color: color-mix(in srgb, var(--accent-text) 45%, var(--line));
  color: var(--heading);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.svc__tab:hover .svc__chev { opacity: 1; color: var(--accent-text); transform: translateX(3px); }

/* Selecionado: azul, com um "bico" apontando para o painel ao lado */
.svc__tab[aria-selected="true"] {
  background: var(--pcj-blue-primary);
  border-color: var(--pcj-blue-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--pcj-blue-primary) 80%, transparent);
  transform: none;
}
.svc__tab[aria-selected="true"] .icon { color: #fff; }
.svc__tab[aria-selected="true"] .svc__chev { opacity: 1; transform: none; }
.svc__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--pcj-blue-primary);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}

/* Contador e anterior/próximo no topo do painel */
.svc__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.svc__pager[hidden] { display: none; }
.svc__pager-count { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.svc__pager-count strong { color: var(--heading); }
.svc__pager-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.5rem;
  min-width: 2.5rem;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.svc__pager-btn:hover:not(:disabled) { border-color: var(--accent-text); color: var(--accent-text); }
.svc__pager-btn:disabled { opacity: 0.4; cursor: default; }
.svc__pager-btn .icon { width: 1.1rem; height: 1.1rem; }

.svc__panels { display: grid; gap: var(--space-5); }
.svc__panel {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.svc__panel[hidden] { display: none; }
.js .svc__panel:not([hidden]) { animation: panel-in 0.35s var(--ease); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.svc__head { display: grid; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.svc__cat { color: var(--accent-text); font-weight: 700; font-size: var(--fs-sm); }
.svc__title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.svc__summary { font-size: var(--fs-md); color: var(--text-muted); max-width: 44rem; }

.svc__body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-6);
}
.svc__body h4 {
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heading);
}
.svc__body p { color: var(--text-muted); }
.svc__body p + h4 { margin-top: var(--space-5); }
.svc__gains {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.svc__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
/* "Prefiro começar pelo diagnóstico" fica mais discreto que "Ver detalhes do serviço" */
.svc__alt { color: var(--text-muted); font-weight: 600; }

@media (max-width: 56em) {
  .svc { grid-template-columns: minmax(0, 1fr); }
  .js .svc__nav { position: static; min-width: 0; }
  .svc__hint-desktop { display: none; }
  .svc__hint-mobile { display: inline; }

  /* No celular as abas viram uma fileira rolável de chips, em loop, com o
     serviço selecionado sempre no centro. As cópias do último (antes do 1º)
     e do 1º (depois do último) permitem centralizar as pontas sem espaço
     vazio; o esmaecimento dos dois lados mostra que há mais opções. */
  .js .svc__tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 0.5rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
  }
  .js .svc__tabs::-webkit-scrollbar { display: none; }
  .svc__tab {
    flex: none;
    width: auto;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    scroll-snap-align: center;
  }
  .svc__tab:hover { transform: none; }
  .svc__chev { display: none; }
  .svc__tab[aria-selected="true"]::after { display: none; }
  .svc__body { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- Diferenciais ---------- */
.why { background: var(--surface); }
.why__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.why__intro { display: grid; gap: var(--space-4); justify-items: start; }

.stat-list {
  display: grid;
  gap: 0;
  width: 100%;
  margin-top: var(--space-4);
}
.stat-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-weight: 600;
}
.stat-list__num {
  min-width: 6.5rem;
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.stat-list li:nth-child(2) .stat-list__num { color: var(--pcj-green-primary); }
.stat-list li:nth-child(3) .stat-list__num { color: var(--heading); }

.why__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.feature {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}
.feature:hover { background: var(--surface); border-color: var(--line); transform: translateY(-3px); }
.feature:nth-child(even) { margin-top: var(--space-6); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
  background: var(--grad-brand);
  color: #fff;
}
.feature__icon .icon { width: 1.35rem; height: 1.35rem; }
.feature__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.feature p { color: var(--text-muted); }

/* Faixa de foto que fecha a seção, ocupando as duas colunas */
.photo-strip {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  box-shadow: var(--shadow);
  aspect-ratio: 21 / 8;
}
.photo-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.photo-strip figcaption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  max-width: calc(100% - 2 * var(--space-4));
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgb(0 26 59 / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
}

@media (max-width: 56em) {
  .why__grid { grid-template-columns: 1fr; }
  .photo-strip { aspect-ratio: 16 / 9; }
  .photo-strip figcaption { border-radius: var(--radius); }
  .feature:nth-child(even) { margin-top: 0; }
}
@media (max-width: 34em) {
  .why__cards { grid-template-columns: 1fr; }
}

/* ---------- Case: faixa azul-escura com brilhos verdes suaves ---------- */
.case {
  --color-focus: var(--pcj-green-vibrant);
  --case-bg: #001a3b; /* azul-escuro definido para esta seção */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--section-y);
  background:
    radial-gradient(34rem 24rem at 100% 100%, color-mix(in srgb, var(--pcj-green-primary) 30%, transparent), transparent 70%),
    radial-gradient(26rem 18rem at 0% 0%, color-mix(in srgb, var(--pcj-green-vibrant) 10%, transparent), transparent 70%),
    var(--case-bg);
  color: #fff;
}
/* Pontilhado verde bem discreto no canto superior direito */
.case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--pcj-green-complementary) 35%, transparent) 1.2px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(28rem 20rem at 92% 8%, black, transparent 70%);
  mask-image: radial-gradient(28rem 20rem at 92% 8%, black, transparent 70%);
  pointer-events: none;
}
/* Cartão do depoimento ganha um leve toque verde na borda */
.case .case__quote { border-color: color-mix(in srgb, var(--pcj-green-vibrant) 22%, transparent); }
.case .case__tag { border-color: color-mix(in srgb, var(--pcj-green-vibrant) 55%, transparent); color: var(--pcj-green-vibrant); }
.case__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.case__side { display: grid; gap: var(--space-4); justify-items: start; }
.case__side .h2 { color: #fff; }
.case__intro { color: rgb(255 255 255 / 0.85); max-width: 26rem; }
.case__tag {
  justify-self: start;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.4);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.case__quote {
  display: grid;
  align-content: space-between;
  gap: var(--space-5);
  height: 100%;
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
}
.case__quote blockquote { margin: 0; }
.case__quote blockquote p {
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* ---------- Carrossel de depoimentos ----------
   Base: rolagem horizontal com "snap" (funciona com dedo, trackpad e sem JS).
   O JS adiciona setas, contador e pontos. */
.carousel { display: grid; gap: var(--space-4); min-width: 0; }
.carousel__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.carousel__controls { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.carousel__controls[hidden], .carousel__dots[hidden] { display: none; }
.carousel__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: transparent;
  color: #fff;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.carousel__btn:hover:not(:disabled) { background: var(--pcj-green-vibrant); border-color: var(--pcj-green-vibrant); color: var(--ink); }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel__btn[data-carousel-prev] .icon { transform: rotate(180deg); }
.carousel__count { min-width: 3rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.carousel__dots { display: flex; justify-content: center; gap: var(--space-2); }
.carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.4);
  transition: width 0.3s var(--ease), background-color 0.3s;
}
.carousel__dot[aria-current="true"] { width: 1.75rem; background: var(--pcj-green-vibrant); }
/* Área de toque maior sem aumentar o ponto */
.carousel__dot { position: relative; }
.carousel__dot::after { content: ""; position: absolute; inset: -0.75rem -0.5rem; } /* área de toque ≥ 24px */
.case__quote figcaption { display: flex; align-items: center; gap: var(--space-4); }
.case__quote figcaption > span:last-child { display: grid; }
.case__quote figcaption span span { opacity: 0.85; font-size: var(--fs-sm); }
/* Logo do cliente no lugar da inicial: cartão branco, como na faixa de clientes */
.case__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.5rem;
  height: 3.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  background: #fff;
}
.case__logo img { width: 100%; height: 100%; object-fit: contain; }
.case__logo--wide { width: 7.5rem; }
/* Marcas do cliente que foram tema do projeto (ex.: Bala Chita e Azedinha, da Cory) */
.case__brands { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.case__brands li {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.3rem;
  border-radius: var(--radius);
  background: #fff;
}
.case__brands img { width: 100%; height: 100%; object-fit: contain; }
.case__avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--pcj-green-vibrant);
  color: var(--ink);
  font-weight: 800;
}

@media (max-width: 56em) {
  .case__inner { grid-template-columns: 1fr; }
}

/* ---------- Quem somos ---------- */
.about__top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.about__top header { display: grid; gap: var(--space-4); justify-items: start; }

.model { display: grid; gap: var(--space-3); counter-reset: none; }
.model li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--surface-2);
  border-left: 3px solid var(--pcj-blue-secondary);
}
.model li:nth-child(2) { border-left-color: var(--pcj-green-primary); }
.model li:nth-child(3) { border-left-color: var(--pcj-green-vibrant); }
.model__n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-text);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.model p { color: var(--text-muted); }
.model strong { color: var(--heading); }

.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  border-block: 1px solid var(--line);
}
.mvv li { padding: var(--space-6) var(--space-5); }
.mvv li + li { border-left: 1px solid var(--line); }
.mvv__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 800;
}
.mvv__title .icon { color: var(--pcj-green-primary); }
.mvv p { color: var(--text-muted); }

.about__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.panel {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.panel__title { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--space-4); }
.panel__text { color: var(--text-muted); margin-bottom: var(--space-4); }

.network { display: grid; gap: var(--space-4); margin: 0; }
.network div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px dashed var(--line); }
.network div:last-child { border-bottom: 0; padding-bottom: 0; }
.network dt { font-weight: 800; color: var(--accent-text); }
.network dd { margin: 0; color: var(--text-muted); }

.org-chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.org-chips li {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface-2);
}
/* Presidência ocupa a linha inteira; as outras quatro diretorias ficam em 2×2 */
.org-chips__lead { grid-column: 1 / -1; }
.org-chips strong { color: var(--heading); }
.org-chips span { color: var(--text-muted); font-size: var(--fs-sm); }

.mej {
  --color-focus: var(--pcj-green-vibrant);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(24rem 14rem at 0% 0%, color-mix(in srgb, var(--pcj-green-complementary) 22%, transparent), transparent 70%),
    var(--ink);
  color: rgb(255 255 255 / 0.82);
}
.mej__figure {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.mej__figure strong {
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pcj-green-vibrant);
}
.mej__text strong { color: #fff; }

@media (max-width: 56em) {
  .about__top, .about__panels { grid-template-columns: 1fr; }
  .mvv { grid-template-columns: 1fr; }
  .mvv li + li { border-left: 0; border-top: 1px solid var(--line); }
  .mej { grid-template-columns: 1fr; gap: var(--space-3); }
}
@media (max-width: 30em) {
  .org-chips { grid-template-columns: 1fr; }
  .network div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- Gestões ---------- */
.teams {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.teams__head { display: grid; gap: var(--space-4); justify-items: start; }

/* Sem JS, os seletores somem e todas as fotos aparecem empilhadas */
.teams__tabs { display: none; }
.js .teams__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}
.teams__tab {
  display: grid;
  gap: 0.1rem;
  min-height: 3.75rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.teams__tab strong {
  color: var(--heading);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.teams__tab span { font-size: 0.75rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teams__tab:hover { border-color: var(--pcj-blue-secondary); transform: translateY(-1px); }
.teams__tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--grad-brand);
  color: rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow);
}
.teams__tab[aria-selected="true"] strong { color: #fff; }

.teams__panels { position: relative; display: grid; gap: var(--space-5); }

/* Setas sobre a foto: a faixa tem a mesma proporção da imagem (3:2),
   então ficam centralizadas nela mesmo quando a legenda vai para baixo. */
.teams__arrows {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 3 / 2;
  padding-inline: clamp(0.5rem, 0.25rem + 1vw, 1rem);
  pointer-events: none;
}
.teams__arrows[hidden] { display: none; }
.teams__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: rgb(0 26 59 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.teams__arrow .icon { width: 1.35rem; height: 1.35rem; }
.teams__arrow:hover { background: var(--pcj-green-vibrant); border-color: transparent; color: var(--ink); }
.teams__arrow:active { transform: scale(0.94); }
.teams__arrow:focus-visible { outline: 3px solid var(--pcj-green-vibrant); outline-offset: 2px; }

/* Prévia da gestão que ainda não tem foto */
.teams__soon {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  height: 100%;
  aspect-ratio: 3 / 2;
  padding: var(--space-6) clamp(3.5rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 3vw, 6rem);
  text-align: center;
  color: rgb(255 255 255 / 0.8);
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.09) 1px, transparent 1.5px) 0 0 / 18px 18px,
    radial-gradient(30rem 18rem at 85% 10%, color-mix(in srgb, var(--pcj-green-complementary) 22%, transparent), transparent 70%),
    radial-gradient(26rem 18rem at 10% 90%, color-mix(in srgb, var(--pcj-blue-secondary) 30%, transparent), transparent 70%),
    #001a3b;
}
.teams__soon-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--pcj-green-vibrant) 70%, transparent);
  color: var(--pcj-green-vibrant);
}
.teams__soon-icon .icon { width: 1.75rem; height: 1.75rem; }
.teams__soon-tag {
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pcj-green-vibrant) 16%, transparent);
  color: var(--pcj-green-vibrant);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.teams__soon p { max-width: 22rem; font-size: var(--fs-md); }
.teams__panel[hidden] { display: none; }
.js .teams__panel:not([hidden]) { animation: panel-in 0.35s var(--ease); }
.teams__panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }

.teams__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 2;
}
.teams__figure img { width: 100%; height: 100%; object-fit: cover; }
.teams__figure figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1rem, 0.75rem + 1.5vw, 1.75rem) clamp(0.875rem, 0.75rem + 0.75vw, 1.375rem);
  background: linear-gradient(to top, rgb(0 26 59 / 0.88), rgb(0 26 59 / 0.5) 55%, transparent);
  color: rgb(255 255 255 / 0.85);
  font-size: var(--fs-sm);
}
.teams__figure figcaption strong { color: #fff; font-size: var(--fs-lg); font-weight: 800; }

@media (max-width: 56em) {
  .teams { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30em) {
  .teams__tab { padding: var(--space-2) var(--space-3); min-height: 3.25rem; align-content: center; }
  .teams__tab strong { font-size: var(--fs-md); }
  .teams__tab span { font-size: 0.75rem; }
  /* Sem espaço para o semestre por extenso (ele aparece na legenda); fica só o "Atual" */
  .teams__tab:not(.teams__tab--current) span { display: none; }
  .teams__soon { padding: var(--space-5) var(--space-8); gap: var(--space-2); }
  .teams__soon-icon { width: 3rem; height: 3rem; }
  .teams__soon-icon .icon { width: 1.35rem; height: 1.35rem; }
  .teams__soon-tag { font-size: 0.75rem; }
  .teams__soon p { font-size: var(--fs-sm); }
  /* No celular a legenda vai para baixo da foto, para não cobrir rostos */
  .teams__figure { aspect-ratio: auto; background: var(--surface); }
  .teams__figure img { aspect-ratio: 3 / 2; height: auto; }
  .teams__figure figcaption {
    position: static;
    display: grid;
    gap: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ink);
  }
}

/* ---------- Estudantes ---------- */
.students {
  --color-focus: var(--pcj-green-vibrant);
  background:
    radial-gradient(36rem 24rem at 100% 0%, color-mix(in srgb, var(--pcj-blue-secondary) 30%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at 0% 100%, color-mix(in srgb, var(--pcj-green-primary) 35%, transparent), transparent 70%),
    var(--ink);
  color: rgb(255 255 255 / 0.82);
}
.students__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  row-gap: var(--space-7);
}
.students header { display: grid; gap: var(--space-4); justify-items: start; }
.students .h2 { color: #fff; }
.students__lead { font-size: var(--fs-md); max-width: 32rem; margin-bottom: var(--space-2); }

.students__photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.06);
}
.students__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
.students__photo figcaption {
  display: grid;
  gap: 0.1rem;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
}
.students__photo figcaption strong { color: #fff; font-size: var(--fs-base); }

/* Texto e foto lado a lado; os quatro benefícios numa linha logo abaixo */
.tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.tile {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  transition: background-color 0.3s, border-color 0.3s;
}
.tile:hover { background: rgb(255 255 255 / 0.1); border-color: color-mix(in srgb, var(--pcj-green-vibrant) 50%, transparent); }
.tile__n { color: var(--pcj-green-vibrant); font-weight: 800; font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.tile strong { color: #fff; font-size: var(--fs-md); }
.tile span:last-child { font-size: 0.9375rem; }

@media (max-width: 56em) {
  .students__inner { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 26em) {
  .tiles { grid-template-columns: 1fr; }
}

/* ---------- Contato ---------- */
.contact { background: var(--surface-2); }
.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.contact__copy { display: grid; gap: var(--space-4); justify-items: start; }
.contact__info { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.contact__info li { display: flex; gap: var(--space-4); align-items: center; }
.contact__info li > span:last-child { display: grid; }
.contact__info small { color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; }
.contact__info a { font-weight: 700; word-break: break-word; }
.contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

.next-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.next-card__title { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--space-5); }
.next { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); counter-reset: step; }
.next li {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding-left: 3rem;
  counter-increment: step;
}
.next li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--heading);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.next strong { color: var(--heading); }
.next span { color: var(--text-muted); font-size: 0.9375rem; }

@media (max-width: 56em) {
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 30em) {
  .next-card .btn { white-space: normal; }
}

/* ---------- Rodapé ---------- */
.site-footer {
  --color-focus: var(--pcj-green-vibrant);
  /* Espaço extra embaixo para o botão flutuante do WhatsApp não cobrir o "Voltar ao topo" */
  padding-block: var(--space-8) calc(var(--space-5) + 5rem);
  background: var(--ink);
  color: rgb(255 255 255 / 0.72);
  border-top: 4px solid transparent;
  border-image: var(--grad-vibrant) 1;
}
/* No modo escuro, separa do fundo da página os blocos que já eram escuros */
[data-theme="dark"] .mej,
[data-theme="dark"] .hero__panel { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), var(--shadow-lg); }
[data-theme="dark"] .site-footer { background: #071019; }
[data-theme="dark"] .hl {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pcj-green-vibrant) 35%, transparent) 62%, color-mix(in srgb, var(--pcj-green-complementary) 35%, transparent) 92%, transparent 92%);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-6);
}
.site-footer__about img { height: 2.5rem; width: auto; margin-bottom: var(--space-4); }
.site-footer__about p { max-width: 24rem; font-size: 0.9375rem; }
.site-footer__contact { margin-top: var(--space-4); }
.site-footer .site-footer__contact a { color: #fff; font-weight: 600; }

/* Redes sociais: botões circulares de 44px (área de toque confortável) */
.site-footer .social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.site-footer .social__link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.22);
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.site-footer .social__link:hover {
  background: var(--pcj-green-vibrant);
  border-color: var(--pcj-green-vibrant);
  color: var(--ink);
  transform: translateY(-2px);
}
.social__link .icon { width: 1.2rem; height: 1.2rem; }
.site-footer__title { margin-bottom: var(--space-4); font-size: 0.9375rem; color: #fff; }
.site-footer ul { display: grid; gap: var(--space-2); }
.site-footer a {
  display: inline-block;
  padding-block: 0.2rem; /* área de toque ≥ 24px no celular */
  color: rgb(255 255 255 / 0.72);
  text-decoration: none;
  font-size: 0.9375rem;
}
.site-footer a:hover { color: var(--pcj-green-vibrant); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--fs-sm);
}

@media (max-width: 56em) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 30em) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Página 404 ---------- */
.notfound {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-items: center;
  padding-block: var(--space-7) var(--space-8);
  background:
    radial-gradient(30rem 20rem at 100% 0%, color-mix(in srgb, var(--pcj-green-vibrant) 14%, transparent), transparent 70%),
    radial-gradient(30rem 20rem at 0% 100%, color-mix(in srgb, var(--pcj-blue-secondary) 14%, transparent), transparent 70%),
    var(--surface-2);
}
.notfound__inner { display: grid; gap: var(--space-5); justify-items: start; max-width: 46rem; }
.notfound__title { font-size: var(--fs-hero); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
.notfound__text { font-size: var(--fs-md); color: var(--text-muted); max-width: 36rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.notfound__help { color: var(--text-muted); }
.notfound__help a { font-weight: 700; }