/* =====================================================================
   components.css — Componentes reutilizáveis
   Botões, badges, cards (controlo / frentes / especialidades / artigo),
   processo, listas entra/não-entra, CTA, formulários e multi-etapas.
   ===================================================================== */

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  padding: 0.8em 1.4em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-200);
  line-height: 1; text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn .btn__arrow { transition: transform var(--transition); }
.btn:hover .btn__arrow { transform: translateX(3px); }

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

.btn--dark { background: var(--color-heading); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.btn--outline { background: transparent; border-color: var(--color-border); color: var(--color-heading); }
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Sobre fundo escuro */
.btn--dark-outline { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.btn--dark-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.06); }

.btn--ghost { background: transparent; color: var(--color-primary); padding-inline: 0; }
.btn--ghost:hover { color: var(--color-primary-dark); }

.btn--lg { padding: 0.95em 1.7em; font-size: var(--fs-300); }
.btn--block { width: 100%; }

/* ---- Badge / etiqueta ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.35em 0.8em; border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-100); font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--on-dark { background: rgba(238,75,34,0.16); color: var(--color-primary); }

/* ---- Card base ---- */
.card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card__title { font-size: var(--fs-500); }
.card__text { color: var(--color-muted); font-size: var(--fs-200); }
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-primary); }

/* ---- Cartão de controlo (Secção 1: ícone em quadro suave + título + texto) ---- */
.control-card { gap: var(--space-md); }
.control-card .card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: #f4f1ef;
  color: var(--color-primary);
}
.control-card .card__icon svg { width: 26px; height: 26px; }

/* ---- Cartão de frente (Secção 2: imagem à esquerda + corpo à direita) ---- */
.front-card {
  padding: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-background);
  display: flex; flex-direction: row; gap: 0;
}
.front-card__media { width: 40%; flex: none; align-self: stretch; background: var(--color-surface-2); overflow: hidden; min-height: 190px; }
.front-card__media img { width: 100%; height: 100%; object-fit: cover; }
.front-card__body { flex: 1; padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); justify-content: center; }
.front-card__body h3 { font-size: var(--fs-500); }
.front-card__cta { margin-top: var(--space-xs); }

/* ---- Cartão de especialidade (Secção 4: ícone + label, compacto) ---- */
.specialty-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
.specialty-card {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.specialty-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.specialty-card__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--color-primary); }
.specialty-card__icon svg { width: 26px; height: 26px; }
.specialty-card__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-200); color: var(--color-heading); line-height: var(--lh-snug); }

/* ---- Cartão de artigo ---- */
.article-card { padding: 0; overflow: hidden; }
.article-card__media { aspect-ratio: 16 / 9; background: var(--color-surface-2); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.article-card__meta { font-size: var(--fs-100); color: var(--color-muted); }

/* ---- Processo (Secção 5: linha de etapas) ---- */
.process { display: grid; gap: var(--space-lg); }
.process__list { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; counter-reset: step; }
.process-step { display: grid; gap: var(--space-xs); position: relative; }
.process-step__head { display: flex; align-items: center; gap: var(--space-sm); }
.process-step__icon {
  position: relative; flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-dark-border); color: #fff;
  background: var(--color-dark);
}
.process-step__icon svg { width: 24px; height: 24px; }
.process-step__num {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 12px;
}
.process-step h3 { font-size: var(--fs-400); color: #fff; }
.process-step p { color: var(--color-on-dark-muted); font-size: var(--fs-200); }
.process__note {
  margin-top: var(--space-xs); padding-top: var(--space-md);
  border-top: 1px solid var(--color-dark-border);
  color: var(--color-on-dark-muted); font-size: var(--fs-200);
}

/* ---- Listas Entra / Não entra (Secção 6) ---- */
.scope-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.scope-col {
  padding: var(--space-lg);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.scope-col__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.scope-col__head h3 { font-size: var(--fs-500); }
.scope-list { display: grid; gap: var(--space-sm); }
.scope-list li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-200); }
.scope-list .mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; margin-top: 1px; line-height: 1; }
.scope-list--in .mark { background: #e3f3ea; color: var(--color-success); }
.scope-list--out .mark { background: #fbe6e3; color: var(--color-danger); }
.scope-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); }
.scope-icon--in { background: #e3f3ea; color: var(--color-success); }
.scope-icon--out { background: #fbe6e3; color: var(--color-danger); }

/* ---- Lista de pontos (check laranja) ---- */
.check-list { display: grid; gap: var(--space-sm); }
.check-list li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.check-list .check {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700; margin-top: 1px;
}

/* ---- Bloco CTA ---- */
.cta-block {
  display: flex; flex-direction: column; gap: var(--space-md);
  align-items: flex-start; padding: var(--space-xl);
  border-radius: var(--radius-lg); background: var(--color-primary); color: #fff;
}
.cta-block h2 { color: #fff; }
.cta-block p { color: rgba(255,255,255,0.9); max-width: 52ch; }
.cta-block .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---- Formulários ---- */
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--color-heading); }
.field .hint { font-size: var(--fs-100); color: var(--color-muted); }
.field--required label::after { content: " *"; color: var(--color-danger); }

.input, .textarea, .select {
  width: 100%; padding: 0.7em 0.85em;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }

.checkbox, .radio { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-200); }
.checkbox input, .radio input { margin-top: 0.2em; }

/* ---- Formulário multi-etapas ---- */
.multistep { display: grid; gap: var(--space-lg); }
.multistep__progress { display: flex; gap: var(--space-xs); counter-reset: step; }
.multistep__progress li { flex: 1; display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--fs-100); color: var(--color-muted); }
.multistep__progress li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--radius-pill); background: var(--color-surface-2);
  color: var(--color-muted); font-weight: var(--fw-semibold); font-family: var(--font-heading);
}
.multistep__progress li::after { content: ""; height: 3px; border-radius: 3px; background: var(--color-border); }
.multistep__progress li.is-active { color: var(--color-primary); font-weight: var(--fw-semibold); }
.multistep__progress li.is-active::before { background: var(--color-primary); color: #fff; }
.multistep__progress li.is-done::before { background: var(--color-success); color: #fff; }
.multistep__progress li.is-done::after, .multistep__progress li.is-active::after { background: var(--color-primary); }

.form-step { display: none; }
.form-step.is-active { display: grid; gap: var(--space-md); }
.form-step__title { font-size: var(--fs-500); }
.multistep__nav { display: flex; justify-content: space-between; gap: var(--space-sm); }
.multistep__success { display: none; text-align: center; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.multistep__success.is-visible { display: block; }

/* ---- Placeholder de mockup (fase de construção) ---- */
.mockup-placeholder {
  display: grid; place-items: center; text-align: center; gap: var(--space-sm);
  min-height: 320px; padding: var(--space-xl);
  border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 12px, var(--color-surface-2) 12px, var(--color-surface-2) 24px);
  color: var(--color-muted);
}
.mockup-placeholder strong { color: var(--color-heading); font-family: var(--font-heading); font-size: var(--fs-500); }

/* ---- Ícone muted (cartões de problema) ---- */
.card__icon--muted { background: var(--color-surface-2) !important; color: var(--color-muted) !important; }

/* ---- Feat item (items "Não fica sozinho" — sem box de cartão) ---- */
.feat-item { display: grid; gap: var(--space-2xs); }
.feat-item__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--color-primary-soft); color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.feat-item__icon svg { width: 22px; height: 22px; }
.feat-item h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--color-heading); }
.feat-item p { color: var(--color-muted); font-size: var(--fs-200); }

/* ---- Cartão de serviço compacto (grid de 6 colunas) ---- */
.service-card-sm { padding: var(--space-md); gap: var(--space-xs); }
.service-card-sm .card__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.service-card-sm .card__icon svg { width: 22px; height: 22px; }
.service-card-sm .card__title { font-size: var(--fs-200); font-weight: var(--fw-semibold); }
.service-card-sm .card__text { font-size: var(--fs-100); }

/* ---- Timeline: Antes / Durante / Depois ---- */
.timeline { display: grid; gap: var(--space-md); }
.timeline-sep { display: none; }
.timeline-card { border-radius: var(--radius-md); overflow: hidden; background: var(--color-dark-soft); }
.timeline-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.timeline-card__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72); transition: filter var(--transition); }
.timeline-card:hover .timeline-card__media img { filter: brightness(0.85); }
.timeline-card__badge {
  position: absolute; top: var(--space-md); left: var(--space-md); z-index: 2;
  background: var(--color-primary); color: #fff;
  padding: 0.3em 0.85em; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-100); letter-spacing: 0.04em;
}
.timeline-card__caption { padding: var(--space-md); color: var(--color-on-dark-muted); font-size: var(--fs-200); line-height: var(--lh-snug); }

/* ---- Two-col media (conteúdo à esquerda + imagem à direita) ---- */
.two-col-media { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: center; }
.two-col-media__content { display: grid; gap: var(--space-md); align-content: start; }
.two-col-media__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.5; }
.two-col-media__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Scope + imagem lateral (Prometemos clareza) ---- */
.scope-media-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
.scope-media-grid__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.scope-media-grid__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Especialidades dark (fundo escuro) ---- */
.specialty-dark-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, 1fr); }
.specialty-dark-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-dark-soft); border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md); transition: border-color var(--transition);
}
.specialty-dark-card:hover { border-color: var(--color-primary); }
.specialty-dark-card .ic { color: var(--color-primary); }
.specialty-dark-card .ic svg { width: 26px; height: 26px; }
.specialty-dark-card span { color: #fff; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-200); line-height: var(--lh-snug); }

/* ---- Dark two-col split (sec 3) ---- */
.dark-two-col { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: start; }

/* ---- Feat compact list (sec 5) ---- */
.feat-compact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.feat-compact li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.feat-compact .ic-sm {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
}
.feat-compact--left .ic-sm { background: var(--color-surface-2); color: var(--color-muted); }
.feat-compact--right .ic-sm { background: var(--color-primary-soft); color: var(--color-primary); }
.feat-compact .ic-sm svg { width: 18px; height: 18px; }
.feat-compact li strong { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-200); color: var(--color-heading); line-height: var(--lh-snug); }

/* ---- Form + media (formulário de candidatura) ---- */
.form-media-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: start; }
.form-media-grid__aside { display: grid; gap: var(--space-md); align-content: start; }
.form-media-grid__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.5; }
.form-media-grid__img img { width: 100%; height: 100%; object-fit: cover; }
.data-safe {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-md); background: var(--color-surface);
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
}
.data-safe .ic { color: var(--color-primary); flex: none; margin-top: 2px; }
.data-safe strong { color: var(--color-heading); font-size: var(--fs-300); display: block; margin-bottom: 2px; }
.data-safe p { font-size: var(--fs-200); color: var(--color-muted); }

/* ---- FAQ accordion ---- */
.faq-grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-md); padding: var(--space-md) var(--space-lg);
  background: #fff; cursor: pointer; width: 100%; text-align: left;
  border: none; font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-300); color: var(--color-heading); transition: background var(--transition);
}
.faq-q:hover { background: var(--color-surface); }
.faq-q .faq-ico { flex: none; color: var(--color-muted); transition: transform var(--transition), color var(--transition); }
.faq-item.is-open .faq-q .faq-ico { transform: rotate(180deg); color: var(--color-primary); }
.faq-a {
  display: none; padding: var(--space-sm) var(--space-lg) var(--space-md);
  color: var(--color-muted); font-size: var(--fs-200); border-top: 1px solid var(--color-border);
}
.faq-item.is-open .faq-a { display: block; }

/* =====================================================================
   PÁGINA EMPRESAS — componentes específicos
   ===================================================================== */

/* Cabeçalho de ícone no cartão do hero */
.hero-card__head { display: flex; align-items: center; gap: var(--space-sm); }
.hero-card__head .icon-box {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff; display: grid; place-items: center;
}
.hero-card__head .icon-box svg { width: 24px; height: 24px; }
.hero-card__head strong {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  color: var(--color-heading); font-size: var(--fs-300); line-height: var(--lh-snug);
}
.hero-card__rows--lined .hero-card__row { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.hero-card__rows--lined .hero-card__row:last-child { border-bottom: 0; padding-bottom: 0; }

/* Placeholder fotográfico (imagens reais a fornecer) */
.photo-ph { background: linear-gradient(135deg, #cfd4da, #aab0b8); position: relative; }
.photo-ph::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: grid; place-items: center; padding: var(--space-sm); text-align: center;
  color: rgba(255,255,255,0.9); font-family: var(--font-heading); font-weight: 600;
  font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.08em;
}
.photo-ph--dark { background: linear-gradient(135deg, #2a2e36, #14161a); }

/* Secção 4 — cartões imagem com overlay (áreas) */
.overlay-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  min-height: 230px; display: flex; color: #fff;
  background: linear-gradient(135deg, #3a3f47, #22262d);
}
.overlay-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlay-card__body {
  position: relative; margin-top: auto; width: 100%; padding: var(--space-md) var(--space-md) var(--space-lg);
  background: linear-gradient(0deg, rgba(10,11,15,0.94) 0%, rgba(10,11,15,0.6) 55%, rgba(10,11,15,0) 100%);
  display: flex; flex-direction: column; gap: 4px;
}
.overlay-card__body h3 { color: #fff; font-size: var(--fs-400); }
.overlay-card__body p { color: rgba(255,255,255,0.82); font-size: var(--fs-100); }
.overlay-card__arrow { position: absolute; right: var(--space-md); bottom: var(--space-md); z-index: 2; color: var(--color-primary); }
.overlay-card__arrow svg { width: 22px; height: 22px; }

/* Secção 5 — cartão vertical imagem-topo */
.stack-card { padding: 0; border: 0; background: transparent; gap: var(--space-sm); box-shadow: none; }
.stack-card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.stack-card__media img { width: 100%; height: 100%; object-fit: cover; }
.stack-card h3 { font-size: var(--fs-400); }
.stack-card p { color: var(--color-muted); font-size: var(--fs-200); }
.stack-card__cta { margin-top: var(--space-2xs); }

/* Secção 6 — 3 passos horizontais (Antes/Durante/Depois) */
.steps3 { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.step3 { position: relative; display: grid; gap: var(--space-xs); }
.step3__head { display: flex; align-items: center; gap: var(--space-sm); }
.step3__num {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 13px;
}
.step3__icon { color: #fff; }
.step3__icon svg { width: 26px; height: 26px; }
.step3 h3 { color: #fff; font-size: var(--fs-400); }
.step3 p { color: var(--color-on-dark-muted); font-size: var(--fs-200); }

/* Secção 7 — cartão de informação (imagem + rodapé com ícone) */
.info-card { padding: 0; overflow: hidden; }
.info-card__media { aspect-ratio: 16 / 10; background: var(--color-surface-2); }
.info-card__media img { width: 100%; height: 100%; object-fit: cover; }
.info-card__foot { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }
.info-card__foot .ic { color: var(--color-primary); flex: none; }
.info-card__foot span { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-200); color: var(--color-heading); }

/* Secção 7 — mini cartão (grelha de 6) */
.mini-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.mini-card .ic { color: var(--color-primary); }
.mini-card .ic svg { width: 22px; height: 22px; }
.mini-card h4 { font-size: var(--fs-200); }
.mini-card p { color: var(--color-muted); font-size: var(--fs-100); }

/* ---- Collab cards (Como Funciona sec 5) ---- */
.collab-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.collab-card { display: grid; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.collab-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
.collab-card__icon svg { width: 28px; height: 28px; }
.collab-card h3 { font-size: var(--fs-500); }
.collab-card p { color: var(--color-muted); font-size: var(--fs-200); }

/* ---- Report float (relatorio inclinado) ---- */
/* ---- Logo size fix ---- */
.site-brand__logo { max-height: 32px; width: auto; display: block; }

/* ========== CONTEÚDOS / ARTIGO COMPONENTS ========== */

/* Newsletter banner */
.nl-banner { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; background: var(--color-dark-2); border-radius: var(--radius-lg); padding: var(--space-xl); }
.nl-banner__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(238,75,34,.15); color: var(--color-primary); }
.nl-banner__icon svg { width: 28px; height: 28px; }
.nl-banner__copy { flex: 1; min-width: 180px; }
.nl-banner__copy h3 { color: #fff; font-size: var(--fs-400); }
.nl-banner__copy p { color: var(--color-on-dark-muted); font-size: var(--fs-200); margin-top: 4px; }
.nl-banner__form { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: var(--space-xs); }
.nl-banner__form .newsletter-form { flex: 1; }
.nl-banner__note { font-size: var(--fs-100); color: var(--color-on-dark-muted); }

/* Topic cards (Explore por tema) */
.topic-card { padding: var(--space-md); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-xs); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.topic-card:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(238,75,34,.08); }
.topic-card__head { display: flex; align-items: center; gap: var(--space-xs); }
.topic-card__head .ic { color: var(--color-primary); }
.topic-card__head h3 { font-size: var(--fs-300); font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.topic-card p { font-size: var(--fs-200); color: var(--color-muted); }
.topic-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-xs); }
.topic-card__tags span { font-size: var(--fs-100); padding: 2px 8px; border-radius: 99px; background: var(--color-surface); color: var(--color-muted); }

/* Article preview cards */
.article-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.article-card__media { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__cat { font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.article-card__title { font-size: var(--fs-300); font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-heading); line-height: 1.35; }
.article-card__cta { font-size: var(--fs-200); color: var(--color-primary); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }

/* Audience overlay cards with CTA */
.audience-card { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4; }
.audience-card img { width: 100%; height: 100%; object-fit: cover; }
.audience-card__body { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14,15,19,.88) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-md); gap: var(--space-xs); }
.audience-card__body h3 { color: #fff; font-size: var(--fs-400); }
.audience-card__body p { color: rgba(255,255,255,.75); font-size: var(--fs-200); }
.audience-card__body a { color: var(--color-primary); font-weight: var(--fw-semibold); font-size: var(--fs-200); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }

/* Content principle items (dark strip) */
.cont-principles { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.cont-principle { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 110px; }
.cont-principle .ic { color: var(--color-primary); }
.cont-principle span { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: #fff; }

/* Content journey steps */
.cont-journey { display: flex; flex-direction: column; gap: var(--space-sm); }
.cont-journey-step { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cont-journey-step .ic { color: var(--color-primary); flex: none; margin-top: 2px; }
.cont-journey-step h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.cont-journey-step p { font-size: var(--fs-200); color: var(--color-muted); margin-top: 2px; }

/* Before-list items */
.before-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.before-item { display: flex; align-items: flex-start; gap: var(--space-sm); }
.before-item .ic { color: var(--color-primary); flex: none; margin-top: 2px; }
.before-item h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.before-item p { font-size: var(--fs-200); color: var(--color-muted); margin-top: 2px; }

/* ========== ARTIGO INDIVIDUAL ========== */
.article-layout { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: start; }
.article-body { display: flex; flex-direction: column; gap: var(--space-lg); }
.article-body p { font-size: var(--fs-400); line-height: 1.75; color: var(--color-text); }
.article-body h2 { font-size: var(--fs-500); margin-top: var(--space-md); }
.article-body ul { padding-left: var(--space-lg); display: flex; flex-direction: column; gap: 6px; }
.article-body ul li { font-size: var(--fs-300); color: var(--color-text); line-height: 1.6; }
.article-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.article-checklist li { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--fs-300); color: var(--color-text); }
.article-checklist li::before { content: "✓"; color: var(--color-primary); font-weight: 700; flex: none; margin-top: 1px; }
.blockquote-accent { border-left: 4px solid var(--color-primary); background: rgba(238,75,34,.06); padding: var(--space-md) var(--space-lg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.blockquote-accent p { font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--color-heading); font-style: italic; }
.blockquote-dark { background: var(--color-dark-2); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); }
.blockquote-dark p { color: #fff; font-size: var(--fs-400); font-weight: var(--fw-semibold); }
.article-sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }
.sidebar-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.sidebar-box h4 { font-size: var(--fs-300); font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.toc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.toc-list li a { font-size: var(--fs-200); color: var(--color-muted); display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; }
.toc-list li a:hover { color: var(--color-primary); }
.sidebar-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar-checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-200); color: var(--color-text); }
.sidebar-checklist li::before { content: "✓"; color: #22a25a; font-weight: 700; flex: none; }
.sidebar-note { background: #fff8ec; border: 1px solid #f5c842; border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.sidebar-note p { font-size: var(--fs-200); color: #7a5a00; }
.meta-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.meta-bar__inner { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); padding-block: var(--space-md); }
.meta-item { display: flex; align-items: flex-start; gap: var(--space-xs); }
.meta-item .ic { color: var(--color-primary); flex: none; margin-top: 2px; }
.meta-item dt { font-size: var(--fs-100); color: var(--color-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; }
.meta-item dd { font-size: var(--fs-200); color: var(--color-text); }
.mid-cta { background: var(--color-dark-2); border-radius: var(--radius-lg); padding: var(--space-xl); display: grid; gap: var(--space-lg); }
.mid-cta h3 { font-size: var(--fs-600); color: #fff; }
.mid-cta p { color: var(--color-on-dark-muted); }
.mid-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.help-cards { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
.help-card { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.help-card .ic { color: var(--color-primary); }
.help-card h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.help-card p { font-size: var(--fs-200); color: var(--color-muted); }
.related-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
.related-card { display: grid; gap: var(--space-xs); }
.related-card__media { aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; }
.related-card__media img { width:100%;height:100%;object-fit:cover; }
.related-card__cat { font-size: var(--fs-100); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.related-card__title { font-size: var(--fs-300); font-family: var(--font-heading); font-weight: var(--fw-semibold); line-height: 1.35; }
.related-card a.link { font-size: var(--fs-200); color: var(--color-primary); font-weight: var(--fw-semibold); }

/* ========== MULTI-STEP FORM (pedido.html) ========== */
.form-progress { display: flex; align-items: flex-start; margin-bottom: var(--space-xl); }
.progress-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.progress-step::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--color-border); z-index: 0; }
.progress-step:first-child::before { display: none; }
.progress-step.done::before { background: var(--color-primary); }
.progress-step__dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-border); background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--color-muted); position: relative; z-index: 1; transition: all .2s; }
.progress-step.active .progress-step__dot { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.progress-step.done .progress-step__dot { border-color: #22a25a; background: #22a25a; color: #fff; }
.progress-step__label { font-size: 11px; color: var(--color-muted); text-align: center; margin-top: 6px; line-height: 1.3; max-width: 72px; }
.progress-step.active .progress-step__label { color: var(--color-primary); font-weight: 600; }

.form-step-card { display: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); }
.form-step-card.active { display: grid; gap: var(--space-xl); grid-template-columns: 1fr 1fr; }
.form-step-card.active.full { grid-template-columns: 1fr; }

.form-step-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-md); }
.form-step-num { font-size: var(--fs-100); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.form-step-title { font-size: var(--fs-500); font-family: var(--font-heading); font-weight: var(--fw-bold); }
.form-step-desc { font-size: var(--fs-200); color: var(--color-muted); }

.form-radio-group { display: flex; flex-direction: column; gap: 8px; }
.form-radio-opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s; }
.form-radio-opt:hover { border-color: var(--color-primary); }
.form-radio-opt input[type="radio"] { accent-color: var(--color-primary); width: 16px; height: 16px; flex: none; }
.form-radio-opt span { font-size: var(--fs-300); }

.form-info-note { display: flex; align-items: flex-start; gap: var(--space-xs); background: rgba(238,75,34,.05); border: 1px solid rgba(238,75,34,.15); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin-top: var(--space-sm); }
.form-info-note p { font-size: var(--fs-200); color: var(--color-muted); }

.form-fields { display: flex; flex-direction: column; gap: var(--space-md); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--color-heading); }
.form-field .opt { font-weight: 400; color: var(--color-muted); }
.form-field input, .form-field select, .form-field textarea { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--fs-300); font-family: var(--font-body); width: 100%; background: #fff; color: var(--color-text); transition: border-color .15s; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(238,75,34,.08); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field-footer { display: flex; justify-content: flex-end; margin-top: var(--space-md); }

.form-step-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.form-step-row__info { display: flex; align-items: center; gap: var(--space-md); }
.form-step-row__num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-surface); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--color-muted); flex: none; }
.form-step-row__text h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--color-muted); }
.form-step-row__text p { font-size: var(--fs-200); color: var(--color-muted); margin-top: 2px; }
.form-step-row__chevron { color: var(--color-muted); }

.form-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xl); }
.form-success { text-align: center; padding: var(--space-2xl) var(--space-xl); background: #f0fdf6; border: 1.5px solid #22a25a; border-radius: var(--radius-lg); display: none; }
.form-success.show { display: block; }
.form-success .ic { color: #22a25a; margin-bottom: var(--space-md); }
.form-success h3 { font-size: var(--fs-600); color: var(--color-heading); }
.form-success p { color: var(--color-muted); margin-top: var(--space-sm); }

.upload-area { border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); cursor: pointer; transition: border-color .15s; }
.upload-area:hover { border-color: var(--color-primary); }
.upload-area .ic { color: var(--color-muted); }
.upload-area p { font-size: var(--fs-200); color: var(--color-muted); }
.upload-area strong { font-size: var(--fs-300); color: var(--color-heading); }

/* ========== HERO FULL-BLEED (index) ========== */
.home-hero--fullbleed { position: relative; overflow: hidden; min-height: 680px; background: var(--color-dark-2); }
.home-hero__bg { position: absolute; inset: 0; z-index: 0; }
.home-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; display: block; }
.home-hero--fullbleed::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,15,19,.92) 0%, rgba(14,15,19,.75) 28%, rgba(14,15,19,.1) 52%, transparent 68%, rgba(14,15,19,.08) 80%, rgba(14,15,19,.25) 100%); pointer-events: none; }
.home-hero__inner--fullbleed { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); max-width: 1440px; margin-inline: auto; padding: 88px 40px; min-height: 680px; }
.home-hero__inner--fullbleed .home-hero__content { max-width: 420px; flex-shrink: 0; }
.home-hero__inner--fullbleed .hero-card { flex-shrink: 0; width: 270px; }

/* ========== HERO 3-COL (index) — legacy, unused ========== */
.home-hero--3col { position: relative; background: var(--color-dark-2); overflow: hidden; min-height: 680px; }
.home-hero__inner--3col { display: grid; grid-template-columns: 2fr 3fr; gap: 0; align-items: stretch; max-width: 1440px; margin-inline: auto; min-height: 680px; }
.home-hero__inner--3col .home-hero__content { padding: 88px 56px 88px 56px; align-self: center; position: relative; z-index: 2; }
.home-hero__figure { position: relative; overflow: hidden; }
.home-hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.home-hero__inner--3col .hero-card { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 3; width: 288px; }

/* ========== EDITORIAL IMG-CARDS ========== */
.img-cards { display: grid; gap: 24px; align-items: stretch; }
.img-cards--4 { grid-template-columns: repeat(4, 1fr); }
.img-cards--3 { grid-template-columns: repeat(3, 1fr); }
.img-card { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.img-card__photo { flex-shrink: 0; overflow: hidden; }
.img-cards--4 .img-card__photo { height: 290px; }
.img-cards--3 .img-card__photo { height: 310px; }
.img-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.img-card:hover .img-card__photo img { transform: scale(1.04); }
.img-card__body { background: #111; padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.img-card__icon { color: var(--color-primary); flex-shrink: 0; }
.img-card__rule { width: 28px; height: 2px; background: var(--color-primary); border: none; margin: 8px 0 10px; flex-shrink: 0; }
.img-card__title { font-size: var(--fs-500); font-family: var(--font-heading); font-weight: 700; color: #fff; line-height: 1.2; margin: 0; }
.img-card__desc { font-size: var(--fs-200); color: rgba(255,255,255,.58); line-height: 1.55; margin-top: 4px; }
/* Inline layout (icon beside title — como-funciona) */
.img-card__head { display: flex; align-items: flex-start; gap: 10px; }
.img-card__head .img-card__icon { margin-top: 2px; }
.img-card__head .img-card__title { font-size: var(--fs-300); font-family: var(--font-heading); font-weight: 700; color: #fff; line-height: 1.25; }

/* ========== CONTACTO PAGE ========== */
.contact-channels { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-md); }
.contact-channel { padding: var(--space-lg) var(--space-md); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-sm); transition: border-color .2s, box-shadow .2s; }
.contact-channel:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(238,75,34,.07); }
.contact-channel .ic { color: var(--color-primary); }
.contact-channel h3 { font-size: var(--fs-400); font-family: var(--font-heading); font-weight: 700; }
.contact-channel p { font-size: var(--fs-200); color: var(--color-muted); flex: 1; }
.contact-channel .link-arrow { font-size: var(--fs-200); font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }

.contact-form-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-xl); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.contact-form-field { display: flex; flex-direction: column; gap: 6px; }
.contact-form-field label { font-size: var(--fs-200); font-weight: 600; color: var(--color-heading); }
.contact-form-field input, .contact-form-field select, .contact-form-field textarea { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 11px 14px; font-size: var(--fs-300); font-family: var(--font-body); width: 100%; background: #fff; transition: border-color .15s; color: var(--color-text); }
.contact-form-field input::placeholder, .contact-form-field textarea::placeholder { color: #bbb; }
.contact-form-field input:focus, .contact-form-field select:focus, .contact-form-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(238,75,34,.08); }
.contact-form-field textarea { resize: vertical; min-height: 110px; }
.contact-form-privacy { display: flex; align-items: flex-start; gap: 10px; }
.contact-form-privacy input[type="checkbox"] { accent-color: var(--color-primary); margin-top: 3px; flex: none; width: 16px; height: 16px; }
.contact-form-privacy label { font-size: var(--fs-200); color: var(--color-muted); line-height: 1.5; }
.contact-form-privacy a { color: var(--color-primary); }

.contact-info-sidebar { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-info-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.contact-info-item .ic { color: var(--color-primary); flex: none; margin-top: 2px; }
.contact-info-item h4 { font-size: var(--fs-300); font-weight: 700; margin-bottom: 2px; }
.contact-info-item p { font-size: var(--fs-200); color: var(--color-muted); line-height: 1.5; }
.contact-info-item a { color: var(--color-text); text-decoration: none; }
.contact-info-item a:hover { color: var(--color-primary); }

.context-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-md); }
.context-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.context-card .ic { color: var(--color-primary); }
.context-card h3 { font-size: var(--fs-400); font-weight: 700; color: #fff; }
.context-card p { font-size: var(--fs-200); color: rgba(255,255,255,.58); line-height: 1.55; }

.profile-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-md); }
.profile-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.profile-card__media { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; }
.profile-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.profile-card:hover .profile-card__media img { transform: scale(1.04); }
.profile-card h3 { font-size: var(--fs-300); font-weight: 700; font-family: var(--font-heading); }
.profile-card p { font-size: var(--fs-200); color: var(--color-muted); line-height: 1.5; }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: var(--fs-300); font-weight: 600; color: var(--color-heading); }
.faq-item__trigger .faq-chevron { flex: none; color: var(--color-primary); transition: transform .25s; }
.faq-item__trigger[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-item__body { display: none; padding-bottom: var(--space-md); font-size: var(--fs-300); color: var(--color-muted); line-height: 1.65; }
.faq-item__body.open { display: block; }

/* ========== PORTFOLIO ========== */
.portfolio-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-xl); }
.portfolio-filter-tab { padding: 8px 18px; border-radius: 99px; border: 1.5px solid var(--color-border); font-size: var(--fs-200); font-weight: var(--fw-semibold); cursor: pointer; background: transparent; color: var(--color-muted); transition: all .2s; white-space: nowrap; font-family: var(--font-body); }
.portfolio-filter-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.portfolio-filter-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.portfolio-featured { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-xl); }
.portfolio-featured__media { min-height: 360px; overflow: hidden; }
.portfolio-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-featured__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); justify-content: center; }
.portfolio-case-tag { font-size: var(--fs-100); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); }
.portfolio-case-title { font-size: var(--fs-600); font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: 1.2; }
.portfolio-case-meta { font-size: var(--fs-200); color: var(--color-muted); }
.portfolio-case-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-xs); }
.portfolio-case-chip { font-size: var(--fs-100); padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 99px; color: var(--color-muted); display: inline-flex; align-items: center; gap: 4px; }
.portfolio-case-chip .ic { color: var(--color-primary); }
.portfolio-case-cta { font-size: var(--fs-300); color: var(--color-primary); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-sm); }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.portfolio-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.portfolio-card__media { aspect-ratio: 4/3; overflow: hidden; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.05); }
.portfolio-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.portfolio-card__cta { font-size: var(--fs-200); color: var(--color-primary); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: var(--space-sm); }

.proc-principles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); }
.proc-principle { display: flex; flex-direction: column; gap: var(--space-sm); }
.proc-principle .ic { color: var(--color-primary); }
.proc-principle h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.proc-principle p { font-size: var(--fs-200); color: var(--color-muted); }

.case-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.case-timeline-item { display: flex; flex-direction: column; gap: var(--space-xs); }
.case-timeline-item__media { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; }
.case-timeline-item__media img { width: 100%; height: 100%; object-fit: cover; }
.case-timeline-item__label { font-size: var(--fs-200); font-weight: var(--fw-semibold); color: var(--color-muted); text-align: center; }

.transparency-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
.transparency-item { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.transparency-item .ic { color: var(--color-primary); margin-bottom: 4px; }
.transparency-item h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.transparency-item p { font-size: var(--fs-200); color: var(--color-muted); }

.report-float { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(-1.5deg); transform-origin: center; }
.report-float img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Service area cards (Sobre sec 2) ---- */
.service-area-card { padding: 0; overflow: hidden; border: 0; box-shadow: none; background: transparent; }
.service-area-card__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); }
.service-area-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-area-card__body { padding: var(--space-md) 0 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.service-area-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: var(--space-2xs); }
.service-area-card__icon svg { width: 22px; height: 22px; }
.service-area-card h3 { font-size: var(--fs-400); color: var(--color-heading); }
.service-area-card p { color: var(--color-muted); font-size: var(--fs-200); }

/* ---- Not-us cards (Sobre sec 5) ---- */
.not-us-grid { display: grid; gap: var(--space-md); }
.not-us-card { display: flex; gap: var(--space-sm); align-items: flex-start; }
.not-us-card .icon-x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-pill); background: #fbe6e3; color: var(--color-danger); }
.not-us-card h4 { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--color-heading); }
.not-us-card p { font-size: var(--fs-200); color: var(--color-muted); margin-top: 2px; }
.not-us-note { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); font-weight: var(--fw-semibold); font-size: var(--fs-200); }

/* ---- Principle dark cards (Sobre sec 6) ---- */
.principles-dark-grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr 1fr; }
.principle-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); background: var(--color-dark-soft); border: 1px solid var(--color-dark-border); border-radius: var(--radius-md); }
.principle-card .ic { color: var(--color-primary); }
.principle-card h4 { color: #fff; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-200); }

/* ---- Ecosystem flow (Sobre sec 7) ---- */
.ecosystem-flow { display: flex; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.ecosystem-brand { display: grid; gap: var(--space-xs); flex: 1; min-width: 140px; }
.ecosystem-brand__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; }
.ecosystem-brand__icon svg { width: 26px; height: 26px; }
.ecosystem-brand h3 { font-size: var(--fs-400); color: var(--color-heading); }
.ecosystem-brand p { font-size: var(--fs-200); color: var(--color-muted); }
.ecosystem-arrow { display: flex; align-items: center; padding-top: var(--space-lg); color: var(--color-primary); font-size: 1.5rem; font-weight: 700; }

/* ---- Metrics inline (Sobre sec 8) ---- */
.metrics-inline { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.metric-item { display: flex; align-items: center; gap: var(--space-xs); flex: 1; min-width: 120px; }
.metric-item .ic { color: var(--color-primary); flex: none; }
.metric-item span { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-200); color: var(--color-heading); }