/* ==========================================================================
   Shiptimize PT — Componentes
   Sem gradientes. Sem sombras. Profundidade por contraste e bordas 0.5px.
   ========================================================================== */

/* --- Botoes -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-button);
  border: var(--bw) solid transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Accao principal. Laranja cheio com texto em tinta: 8.7:1, bem acima do
   minimo, e e o unico elemento cheio a laranja da pagina, portanto o olho
   vai direito a ele. A borda mais escura define o limite do botao. */
.btn--primary {
  background: var(--c-orange);
  border-color: #E08A00;
  color: var(--c-ink);
}
.btn--primary:hover { background: var(--c-amber); border-color: var(--c-orange); }

/* Accao secundaria em tinta, para quando ha duas accoes na mesma zona. */
.btn--ink {
  background: var(--c-ink);
  color: var(--c-on-dark);
}
.btn--ink:hover { background: #000; }

.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-ink);
}
.btn--ghost:hover { border-color: var(--c-grey-light); }

/* Acento laranja: apenas sobre fundo escuro */
.btn--accent {
  background: transparent;
  border-color: var(--c-orange);
  color: var(--c-orange);
}
.btn--accent:hover { background: var(--c-orange); color: var(--c-ink); }

/* --- Pills e tags -------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 5px var(--sp-sm);
  background: var(--c-surface-3);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  color: var(--c-ink);
}
.pill--accent { border-color: var(--c-orange); color: var(--c-ink); background: var(--c-surface); }

.pill-group { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

/* --- Cards --------------------------------------------------------------- */

/* Card sempre branco com borda definida. Sobre fundo branco a borda faz a
   separacao, sobre fundo alternado e o proprio branco que a faz. Um so
   tratamento, coerente em toda a pagina. */
.card {
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
}
.card--alt  { background: var(--c-surface-2); }
.card--dark { background: var(--c-surface-dark-2); border-color: var(--c-on-dark-border); color: var(--c-on-dark-body); }
.card--dark .card__body { color: var(--c-on-dark-body); }
.card--dark h3 { color: var(--c-on-dark); }

.card--link {
  display: block;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.card--link:hover { border-color: var(--c-grey-light); }
.card--link:hover .card__arrow { transform: translateX(4px); }

.card__arrow {
  color: var(--c-orange);
  transition: transform var(--dur) var(--ease);
  display: inline-block;
}

.card__title { margin-bottom: var(--sp-xs); }
.card__body  { color: var(--c-grey); margin: 0; }

/* --- Citacao de acento --------------------------------------------------- */

.quote {
  border-left: 2px solid var(--c-orange);
  background: var(--c-surface-3);
  padding: var(--sp-md) var(--sp-lg);
  margin: 0;
  border-radius: 0 var(--r-button) var(--r-button) 0;
}
.quote p {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-xs);
}
.quote cite {
  font-style: normal;
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
}

/* --- Lista de resultados ------------------------------------------------- */

.outcomes { list-style: none; margin: 0; padding: 0; }
.outcomes li {
  position: relative;
  padding-left: var(--sp-md);
  margin-bottom: var(--sp-base);
  color: var(--c-grey);
  max-width: var(--container-text);
}
.outcomes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
}
.outcomes strong { color: var(--c-ink); font-weight: var(--fw-medium); }
.section--dark .outcomes strong { color: var(--c-on-dark); }
.section--dark .outcomes li { color: var(--c-on-dark-body); }

/* --- Painel escuro ------------------------------------------------------- */

.panel-dark {
  background: var(--c-surface-dark);
  color: var(--c-on-dark-body);
  border-radius: var(--r-card);
  padding: var(--sp-2xl);
}
.panel-dark h2 { color: var(--c-on-dark); margin-bottom: var(--sp-base); }
.panel-dark .eyebrow { color: var(--c-on-dark-label); }

/* --- Metricas ------------------------------------------------------------ */

.metric {
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-md);
}
.metric__value {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-xs);
}
.metric__label {
  font-size: var(--fs-caption);
  color: var(--c-grey);
  margin: 0;
}

/* --- Navegacao ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface);
  border-bottom: var(--bw) solid var(--c-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 72px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  text-decoration: none;
  flex: none;
}

/* Contentor que agrupa a lista e as accoes. Em desktop e uma linha unica,
   em mobile transforma-se no painel dropdown (ver media query abaixo). */
.nav__menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-xl);
  flex: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a {
  text-decoration: none;
  color: var(--c-grey);
  font-size: var(--fs-body);
  padding-block: var(--sp-xs);
  border-bottom: 1px solid transparent;
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-orange); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-sm); }

.nav__toggle {
  display: none;
  background: none;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-button);
  padding: var(--sp-xs) var(--sp-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-body);
}

@media (max-width: 1024px) {
  .nav__toggle { display: block; }
  .nav__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--c-surface);
    border-bottom: var(--bw) solid var(--c-border);
    padding: var(--sp-md) var(--gutter);
  }
  .nav__menu[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
  .nav__actions { margin-top: var(--sp-md); }
}

/* --- Breadcrumbs (SEO + orientacao) -------------------------------------- */

.breadcrumbs {
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
  padding-block: var(--sp-base);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: 0; padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: var(--sp-xs); color: var(--c-border); }
.breadcrumbs li:last-child::after { content: none; }
.breadcrumbs a { color: var(--c-grey); text-decoration: none; }

/* --- Formularios --------------------------------------------------------- */

.field { display: block; margin-bottom: var(--sp-base); }
.field__label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-grey);
  margin-bottom: var(--sp-micro);
}
.field__input {
  width: 100%;
  padding: var(--sp-sm) var(--sp-base);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-button);
  background: var(--c-surface);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
}
.field__input:hover { border-color: var(--c-grey-light); }
.field__error { color: #B4342A; font-size: var(--fs-caption); margin-top: var(--sp-micro); }

/* --- Rodape -------------------------------------------------------------- */

.site-footer {
  background: var(--c-surface-dark);
  color: var(--c-on-dark-body);
  padding-block: var(--sp-2xl) var(--sp-lg);
}
.site-footer h3 {
  color: var(--c-on-dark);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-xs); }
.site-footer a { color: var(--c-on-dark-body); text-decoration: none; font-size: var(--fs-body); }
.site-footer a:hover { color: var(--c-amber); }
.site-footer__bottom {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-md);
  border-top: var(--bw) solid var(--c-on-dark-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--c-on-dark-label);
}

/* --- Banner de consentimento --------------------------------------------- */

.consent {
  position: fixed;
  left: var(--sp-base);
  right: var(--sp-base);
  bottom: var(--sp-base);
  z-index: 90;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-md) var(--sp-lg);
}
.consent[hidden] { display: none; }
.consent__text { font-size: var(--fs-caption); color: var(--c-grey); margin: 0; max-width: 44ch; }
.consent__actions { display: flex; gap: var(--sp-xs); }

@media (max-width: 600px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent__actions .btn { flex: 1; justify-content: center; }
}

/* --- Formulario por passos ------------------------------------------------ */

.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-base);
  margin-bottom: var(--sp-xl);
}
.steps__item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex: none;
}
.steps__num {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-grey-light);
}
.steps__label { font-size: var(--fs-caption); color: var(--c-grey-light); }
.steps__item[data-state="active"] .steps__num,
.steps__item[data-state="done"] .steps__num {
  border-color: var(--c-orange);
  color: var(--c-ink);
}
.steps__item[data-state="active"] .steps__label,
.steps__item[data-state="done"] .steps__label { color: var(--c-ink); }
.steps__bar {
  flex: 1;
  height: var(--bw);
  background: var(--c-border);
  position: relative;
}
.steps__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--c-orange);
  transition: width var(--dur) var(--ease);
}

.form-step[hidden] { display: none; }

/* --- Campos adicionais ---------------------------------------------------- */

.field__label .req { color: var(--c-orange); margin-left: 2px; }

.field__hint {
  display: block;
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
  margin-top: var(--sp-micro);
}

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5C59' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-base) center;
  padding-right: var(--sp-2xl);
  cursor: pointer;
}

textarea.field__input { min-height: 120px; resize: vertical; }

.field__input:invalid:not(:placeholder-shown) { border-color: #B4342A; }

.form-actions {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  flex-wrap: wrap;
}

.form-consent {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
  margin-top: var(--sp-md);
}
.form-consent input { margin-top: 4px; flex: none; }
.form-consent label { font-size: var(--fs-caption); color: var(--c-grey); line-height: var(--lh-caption); }

/* Honeypot anti spam, invisivel para humanos e para leitores de ecra */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  margin-top: var(--sp-md);
  padding: var(--sp-md);
  border-radius: var(--r-button);
  border: var(--bw) solid var(--c-border);
  background: var(--c-surface-3);
  font-size: var(--fs-body);
}
.form-status[hidden] { display: none; }
.form-status[data-type="error"] { border-color: #B4342A; color: #B4342A; }

/* --- Titulo rotativo ------------------------------------------------------
   Tres palavras que deslizam verticalmente. CSS puro, sem JS.
   O inline-grid empilha as palavras na mesma celula, portanto a largura
   ajusta-se sozinha a palavra mais longa e nada salta durante a transicao.
   -------------------------------------------------------------------------- */

.rotator__mask {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  /* folga para as descendentes, o overflow cortaria o p de "simples" */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.rotator__word {
  grid-area: 1 / 1;
  color: var(--c-orange);
  white-space: nowrap;
  transform: translateY(100%);
  opacity: 0;
  animation: rotator-slide 7.2s var(--ease) infinite;
}

.rotator__word:nth-child(1) { animation-delay: 0s; }
.rotator__word:nth-child(2) { animation-delay: 2.4s; }
.rotator__word:nth-child(3) { animation-delay: 4.8s; }

@keyframes rotator-slide {
  0%   { transform: translateY(100%);  opacity: 0; }
  4%   { transform: translateY(0);     opacity: 1; }
  29%  { transform: translateY(0);     opacity: 1; }
  33%  { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* Movimento reduzido: as palavras continuam a alternar, mas por fundido
   em vez de deslize. Sao conteudo, nao decoracao, portanto congela-las
   esconderia duas das tres mensagens.
   Os !important sao necessarios para ultrapassar a regra universal de
   prefers-reduced-motion definida em base.css. */
@media (prefers-reduced-motion: reduce) {
  .rotator__word {
    transform: none;
    animation-name: rotator-fade !important;
    animation-duration: 7.2s !important;
    animation-timing-function: ease !important;
    animation-iteration-count: infinite !important;
  }
}

@keyframes rotator-fade {
  0%,  6%   { opacity: 0; transform: none; }
  10%, 29%  { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: none; }
}

/* --- Paginas de texto longo (legais, artigos) ----------------------------- */

.prose { max-width: var(--container-text); }
.prose h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin: var(--sp-2xl) 0 var(--sp-base);
  padding-top: var(--sp-md);
  border-top: var(--bw) solid var(--c-border);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: var(--sp-lg) 0 var(--sp-xs);
}
.prose p, .prose li { color: var(--c-grey); }
.prose ul { padding-left: var(--sp-md); margin: 0 0 var(--sp-base); }
.prose li { margin-bottom: var(--sp-xs); max-width: var(--container-text); }
.prose a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-orange); }
.prose strong { color: var(--c-ink); font-weight: var(--fw-medium); }

.legal-meta {
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
  padding-bottom: var(--sp-md);
  border-bottom: var(--bw) solid var(--c-border);
  margin-bottom: var(--sp-2xl);
}

.table-wrap { overflow-x: auto; margin-bottom: var(--sp-base); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.table th, .table td {
  text-align: left;
  padding: var(--sp-sm);
  border-bottom: var(--bw) solid var(--c-border);
  vertical-align: top;
}
.table th { font-weight: var(--fw-medium); color: var(--c-ink); }
.table td { color: var(--c-grey); }

/* Logo. Altura fixa, largura proporcional, para nao causar salto de layout. */
.nav__logo-img { height: 24px; width: auto; display: block; }

/* --- Contentor estreito, para paginas de leitura -------------------------- */

.container--narrow { max-width: 820px; }
.container--narrow .prose { max-width: none; }
.container--narrow .prose p,
.container--narrow .prose li { max-width: none; }

/* --- Painel suave ---------------------------------------------------------
   Da peso visual a coluna secundaria de uma seccao a duas colunas, para que
   a assimetria de altura pareca intencional em vez de acidental.
   -------------------------------------------------------------------------- */

.panel-soft {
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
}

.panel-soft .outcomes li:last-child { margin-bottom: 0; }

/* Seccao a duas colunas com respiro maior entre elas */
.grid--split { gap: var(--sp-3xl); align-items: start; }
@media (max-width: 900px) {
  .grid--split { gap: var(--sp-xl); }
}

/* ==========================================================================
   Blocos editoriais
   O sistema proibe sombras, gradientes e fotografia. A variacao tem de vir
   da estrutura: filetes, grelhas e ritmo, nao de decoracao.
   ========================================================================== */

/* --- Colunas separadas por filete, sem caixas ----------------------------- */

/* Cards independentes. A versao anterior eram colunas separadas por filete,
   sem fundo proprio, o que sobre a seccao alternada nao tinha presenca. */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-base);
}
.feature-row__item {
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
}
.feature-row__item h3 { margin-bottom: var(--sp-xs); }
.feature-row__item p { color: var(--c-grey); margin: 0; }

@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .feature-row__item { padding: var(--sp-md); }
}

/* --- Grelha de espécimes, para mostrar amplitude -------------------------- */

.specimen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border-top: var(--bw) solid var(--c-border);
  border-left: var(--bw) solid var(--c-border);
}
.specimen__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs);
  min-height: 72px;
  padding: var(--sp-base) var(--sp-md);
  border-right: var(--bw) solid var(--c-border);
  border-bottom: var(--bw) solid var(--c-border);
  font-size: var(--fs-body);
  color: var(--c-grey-light);
  text-decoration: none;
}
a.specimen__cell { color: var(--c-ink); }
a.specimen__cell:hover { background: var(--c-surface-2); }
a.specimen__cell:hover .specimen__arrow { transform: translateX(3px); }
.specimen__arrow {
  color: var(--c-orange);
  transition: transform var(--dur) var(--ease);
}
.section--alt .specimen__cell { background: var(--c-surface); }
.section--alt a.specimen__cell:hover { background: var(--c-surface-3); }

@media (max-width: 600px) {
  .specimen { grid-template-columns: repeat(2, 1fr); }
  .specimen__cell { min-height: 60px; padding: var(--sp-sm) var(--sp-base); font-size: var(--fs-caption); }
}

/* --- Revelação ao entrar no ecrã ------------------------------------------
   Só se aplica quando o JS está activo, senão o conteúdo ficaria invisível
   para quem tem JS desligado e para alguns crawlers.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Sequência numerada ---------------------------------------------------
   Os numerais só se justificam porque isto é mesmo uma sequência: cada passo
   depende do anterior. Em blocos de benefícios paralelos, numerar é ruído.
   -------------------------------------------------------------------------- */

.steps-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--c-orange);
  counter-reset: passo;
}
.steps-flow__item {
  padding: var(--sp-lg);
  border-left: var(--bw) solid var(--c-card-line);
  counter-increment: passo;
}
.steps-flow__item:first-child { border-left: 0; padding-left: 0; }

.steps-flow__item::before {
  content: "0" counter(passo);
  display: block;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  color: var(--c-orange-text);
  margin-bottom: var(--sp-sm);
}
.steps-flow__item h3 { margin-bottom: var(--sp-xs); }
.steps-flow__item p { color: var(--c-grey); margin: 0; }

@media (max-width: 900px) {
  .steps-flow { grid-template-columns: 1fr; }
  .steps-flow__item {
    border-left: 0;
    padding: var(--sp-md) 0;
    border-bottom: var(--bw) solid var(--c-border);
  }
  .steps-flow__item::before { margin-bottom: var(--sp-xs); }
  .steps-flow__item:last-child { border-bottom: 0; }
}

/* --- Grelha de blocos a dois ----------------------------------------------
   Cards brancos, como na homepage. A versao anterior eram colunas separadas
   por filete, sem fundo proprio, que sobre a seccao alternada desapareciam.
   -------------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-base);
}
.feature-grid__item {
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
}
.feature-grid__item h3 { margin-bottom: var(--sp-xs); }
.feature-grid__item p { color: var(--c-grey); }
.feature-grid__item p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .feature-grid__item { padding: var(--sp-md); }
}

/* --- Selos e redes no rodapé ----------------------------------------------
   O selo Portugal 2020 leva chapa branca: o azul da bandeira europeia e o
   azul-marinho do FC&QC não têm contraste suficiente sobre #1A1A1A, e as
   regras de utilização das marcas de financiamento exigem legibilidade.
   -------------------------------------------------------------------------- */

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xl);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: var(--bw) solid var(--c-on-dark-border);
}

.footer-badges__plate {
  background: #FFFFFF;
  border-radius: var(--r-button);
  padding: var(--sp-sm) var(--sp-base);
  display: inline-flex;
  align-items: center;
}

.footer-badges img { display: block; }
.footer-badges .badge-pt2020  { width: 240px; height: auto; }
.footer-badges .badge-livro   { width: 130px; height: auto; }
.footer-badges .badge-ctt     { width: 84px;  height: auto; border-radius: var(--r-pill); }

.footer-badges a { display: inline-flex; align-items: center; }
.footer-badges a:hover { opacity: 0.82; }

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--c-on-dark-body);
  text-decoration: none;
}
.footer-social:hover { color: var(--c-amber); }
.footer-social svg { display: block; }

@media (max-width: 600px) {
  .footer-badges { gap: var(--sp-md); margin-top: var(--sp-xl); }
  .footer-badges .badge-pt2020 { width: 200px; }
  .footer-badges .badge-livro  { width: 110px; }
  .footer-badges .badge-ctt    { width: 64px; }
}

/* --- Ajustes: grelha de espécimes ---------------------------------------- */

.specimen__cell {
  justify-content: center;
  text-align: center;
  color: var(--c-ink);
}
a.specimen__cell { justify-content: center; }

/* Nota e botão na mesma linha, a nota ocupa a largura toda disponível */
.specimen-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md) var(--sp-lg);
}
.specimen-note p { max-width: none; margin: 0; flex: 1 1 340px; }
.specimen-note .btn { flex: none; }

@media (max-width: 600px) {
  .specimen-note .btn { width: 100%; justify-content: center; }
}

/* --- Chamada final centrada ----------------------------------------------- */

.cta-center { text-align: center; }
.cta-center > * { margin-inline: auto; }

/* --- Selos: mais pequenos, na mesma linha do aviso de rodapé -------------- */

.site-footer__bottom {
  align-items: center;
  gap: var(--sp-lg);
}
.site-footer__bottom .footer-badges {
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--sp-md);
  justify-content: center;
  flex: 1 1 auto;
}
.site-footer__bottom .badge-pt2020 { width: 160px; }
.site-footer__bottom .badge-livro  { width: 92px; }
.site-footer__bottom .badge-ctt    { width: 42px; }
.site-footer__bottom .footer-badges__plate { padding: 6px 10px; }

@media (max-width: 900px) {
  .site-footer__bottom { flex-direction: column; text-align: center; }
  .site-footer__bottom .footer-badges { order: -1; }
}

/* Painel alinhado ao centro vertical da coluna de texto ao lado.
   Só em desktop: quando as colunas colapsam, o alinhamento perde sentido. */
@media (min-width: 901px) {
  .panel-soft--middle { align-self: center; }
}

/* Sequência numerada em coluna única, para barras laterais e colunas estreitas */
.steps-flow--stack { grid-template-columns: 1fr; }
.steps-flow--stack .steps-flow__item {
  border-left: 0;
  padding: var(--sp-md) 0;
  border-bottom: var(--bw) solid var(--c-border);
}
.steps-flow--stack .steps-flow__item::before { margin-bottom: var(--sp-micro); }
.steps-flow--stack .steps-flow__item:last-child { border-bottom: 0; }

/* ==========================================================================
   Blocos de produto
   Introduzidos para o .pt (vertical ecommerce). Divergem do brand book
   corporate ao permitir captura de ecrã e blocos de dados com laranja.
   O laranja continua restrito: apontamentos, numerais e cards de dados.
   ========================================================================== */

/* --- Par: texto de um lado, imagem do outro ------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-3xl);
  align-items: center;
}
.showcase--flip .showcase__media { order: -1; }
.showcase__text > * + * { margin-top: var(--sp-base); }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .showcase--flip .showcase__media { order: 0; }
}

/* --- Moldura de captura de ecrã ------------------------------------------
   Barra de janela minimalista. Sem sombras: o recorte é definido pela
   borda de 0.5px e pelo contraste com o fundo da secção.
   -------------------------------------------------------------------------- */

.shot {
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-card);
}

/* Barra branca, igual ao fundo do card. Uma barra em tom diferente criava
   uma faixa cinzenta que competia com a propria captura. */
.shot__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-base);
  border-bottom: var(--bw) solid var(--c-card-line);
  background: #FFFFFF;
}
.shot__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-card-line);
  flex: none;
}
.shot__label {
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
  margin-left: var(--sp-xs);
}

.shot__img { display: block; width: 100%; height: auto; }

.shot__caption {
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
  margin-top: var(--sp-sm);
}

/* --- Cards de dados, com laranja ------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-base);
}
/* Cartao de dados. Tres niveis: a preposicao pequena por cima, o numero,
   e o que ele conta. A quarta linha e detalhe opcional.
   Os rotulos sao curtos de proposito: se quebrarem em duas linhas, os
   cartoes ficam com alturas de texto diferentes e o conjunto desalinha. */
.stat {
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  background: var(--c-card);
}
.stat__pre {
  font-size: var(--fs-caption);
  color: var(--c-grey);
  margin: 0;
  line-height: 1.3;
}
.stat__value {
  font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -1.4px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  margin: 2px 0 var(--sp-xs);
}
.stat__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin: 0;
  line-height: 1.3;
}
.stat__note {
  font-size: var(--fs-caption);
  color: var(--c-grey-light);
  margin: 2px 0 0;
  line-height: 1.4;
}

@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* --- Grelha de logos ------------------------------------------------------ */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: var(--bw) solid var(--c-card-line);
  border-left: var(--bw) solid var(--c-card-line);
}
.logo-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  min-height: 116px;
  padding: var(--sp-base);
  border-right: var(--bw) solid var(--c-card-line);
  border-bottom: var(--bw) solid var(--c-card-line);
  text-decoration: none;
  background: var(--c-card);
  transition: background var(--dur) var(--ease);
}
.logo-grid__cell:hover { background: var(--c-surface-2); }
.logo-grid__cell img { width: 40px; height: 40px; display: block; }
.logo-grid__cell span {
  font-size: var(--fs-caption);
  color: var(--c-ink);
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid__cell { min-height: 96px; }
  .logo-grid__cell img { width: 32px; height: 32px; }
}

/* --- Diagrama de regra ----------------------------------------------------
   Representa o Rulebook: condição, condição, ação.
   -------------------------------------------------------------------------- */

.rule {
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  background: var(--c-card);
}

.rule__row {
  position: relative;
  padding-left: var(--sp-2xl);
  padding-bottom: var(--sp-md);
}
.rule__row:last-child { padding-bottom: 0; }

/* linha vertical que liga os passos */
.rule__row::before {
  content: "";
  position: absolute;
  left: 11px; top: 22px; bottom: -2px;
  width: var(--bw);
  background: var(--c-border);
}
.rule__row:last-child::before { display: none; }

.rule__tag {
  position: absolute;
  left: 0; top: 0;
  font-size: 9px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-grey-light);
}
.rule__row--action .rule__tag { color: var(--c-orange-text); }

.rule__box {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-button);
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-body);
  background: var(--c-surface-2);
  margin-top: 14px;
}
.rule__row--action .rule__box {
  border-color: var(--c-orange);
  border-left-width: 2px;
  background: var(--c-card);
}
.rule__field { color: var(--c-grey); }
.rule__value { font-weight: var(--fw-medium); color: var(--c-ink); }

.rule__caption { font-size: var(--fs-caption); color: var(--c-grey-light); margin: var(--sp-md) 0 0; }

@media (max-width: 600px) {
  .rule { padding: var(--sp-md); }
  .rule__row { padding-left: var(--sp-lg); }
  .rule__box { flex-wrap: wrap; }
}

/* --- Cards numerados sobre painel escuro ---------------------------------
   O laranja, que sobre fundo claro so passa a 2:1, aqui da 7.2:1. E o unico
   sitio do site onde pode ser numeral grande sem escurecer.
   -------------------------------------------------------------------------- */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-base);
  counter-reset: auto;
}

.auto-card {
  background: var(--c-surface-dark-2);
  border: var(--bw) solid var(--c-on-dark-border);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  counter-increment: auto;
}

.auto-card::before {
  content: "0" counter(auto);
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  color: var(--c-orange);
  margin-bottom: var(--sp-md);
}

.auto-card h3 { color: var(--c-on-dark); margin-bottom: var(--sp-xs); }
.auto-card p  { color: var(--c-on-dark-body); margin: 0; max-width: none; }

@media (max-width: 900px) {
  .auto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .auto-card { padding: var(--sp-md); }
}

/* --- Declaração de modelo de custo ----------------------------------------
   Responde a pergunta do preco sem tabela. A frase principal e tratada como
   afirmacao, nao como titulo de seccao, por isso leva peso maior.
   -------------------------------------------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3xl);
  align-items: start;
}
.pricing__claim {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-base);
  max-width: 14ch;
}
.pricing__claim em {
  font-style: normal;
  color: var(--c-orange-text);
}
/* A excepcao do contrato proprio fecha-se num card com o seu CTA. Assim
   deixa de ser uma nota solta e passa a ser um caminho para quem se
   reconhece na pergunta. */
.pricing__card {
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-left: 2px solid var(--c-orange);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
}
.pricing__card h3 { margin-bottom: var(--sp-xs); }
.pricing__card p {
  color: var(--c-grey);
  margin: 0 0 var(--sp-lg);
  max-width: none;
}

@media (max-width: 900px) {
  .pricing { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .pricing__claim { max-width: none; }
}
@media (max-width: 600px) {
  .pricing__card { padding: var(--sp-md); }
  .pricing__card .btn { width: 100%; justify-content: center; }
}

/* Identificação legal e contactos, em faixa própria por baixo das colunas.
   Antes vivia dentro da coluna Legal, o que a fazia crescer e desequilibrava
   as tres colunas. */
.site-footer__org {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: var(--bw) solid var(--c-on-dark-border);
}
.site-footer__id {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--c-on-dark-label);
  margin: 0;
  max-width: none;
}
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-xs);
  text-align: right;
}
.site-footer__contact a { font-size: var(--fs-caption); }

@media (max-width: 700px) {
  .site-footer__org { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
  .site-footer__contact { align-items: flex-start; text-align: left; }
}

/* --- Narrativa em tempos -------------------------------------------------
   Tres momentos de igual peso, ligados por filete. Substitui um par de
   texto e painel que ficava desequilibrado: coluna curta de um lado,
   bloco pesado do outro.
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.story__col {
  border-top: var(--bw) solid var(--c-card-line);
  padding-top: var(--sp-md);
}
.story__col p { color: var(--c-grey); margin: 0; max-width: none; }

.story__step {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--c-ink) !important;
  margin-bottom: var(--sp-xs) !important;
}

/* O ultimo tempo e a resposta, nao mais um episodio: leva o acento. */
.story__col--end { border-top-color: var(--c-orange); border-top-width: 2px; }
.story__col--end .story__step { color: var(--c-ink) !important; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: var(--sp-md); }
}

/* Card de pessoa: retrato a par do texto. O circulo e a unica forma
   redonda do site, e existe porque o assunto e uma cara, nao um dado. */
.person {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.person__photo {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: var(--bw) solid var(--c-card-line);
}
.person .card__body { margin-bottom: 0; }

@media (max-width: 600px) {
  .person__photo { width: 72px; height: 72px; }
  .person { gap: var(--sp-sm); }
}

/* Ligação ao perfil, nos cards de pessoa */
.person__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
  font-size: var(--fs-caption);
  color: var(--c-grey);
  text-decoration: none;
}
.person__link:hover { color: var(--c-ink); }
.person__link svg { flex: none; }

/* --- Cartão de plataforma com logo ---------------------------------------
   Substitui a grelha de células só com nome. O logo faz o reconhecimento
   instantaneo, que e o objectivo de uma pagina de integracoes.
   -------------------------------------------------------------------------- */

.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-base);
}

.plat {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 76px;
  padding: var(--sp-base);
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.plat:hover { border-color: var(--c-grey-light); }
.plat img { width: 36px; height: 36px; flex: none; display: block; }
.plat__name {
  font-size: var(--fs-body);
  color: var(--c-ink);
  line-height: 1.25;
}

@media (max-width: 600px) {
  .plat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
  .plat { min-height: 64px; padding: var(--sp-sm); gap: var(--sp-xs); flex-direction: column; text-align: center; }
  .plat img { width: 30px; height: 30px; }
  .plat__name { font-size: var(--fs-caption); }
}

/* --- Cartão de transportadora --------------------------------------------
   Sem logo: so o CTT tem ficheiro. Quando os restantes existirem, colocar
   um <img class="carrier__logo"> antes do <h3> e o estilo ja esta pronto.
   -------------------------------------------------------------------------- */

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-base);
}

.carrier {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-md);
  align-items: start;
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
}
.carrier__logo {
  width: 48px; height: 48px;
  display: block;
  border-radius: var(--r-pill);
}
/* Marca provisoria, enquanto nao ha ficheiro: iniciais da transportadora */
.carrier__mark {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--c-grey);
  letter-spacing: 0.02em;
}
.carrier h3 { margin-bottom: var(--sp-micro); }
.carrier p  { color: var(--c-grey); margin: 0; max-width: none; }
.carrier__tags { display: flex; flex-wrap: wrap; gap: var(--sp-micro); margin-top: var(--sp-sm); }

@media (max-width: 900px) { .carrier-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .carrier { padding: var(--sp-md); grid-template-columns: 40px 1fr; gap: var(--sp-sm); }
  .carrier__logo, .carrier__mark { width: 40px; height: 40px; }
}

/* --- Faixa de transportadoras, no hero ------------------------------------ */

.carrier-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  align-items: center;
}
.carrier-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-micro) var(--sp-sm) var(--sp-micro) var(--sp-micro);
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--c-grey);
}
.carrier-strip__item img { width: 28px; height: 28px; display: block; flex: none; }

@media (max-width: 600px) {
  .carrier-strip { gap: var(--sp-xs); }
  .carrier-strip__item img { width: 24px; height: 24px; }
}

/* --- Fecho de página ------------------------------------------------------
   Faixa a toda a largura, igual em todas as paginas. Nao e um card: e uma
   mudanca de fundo que marca o fim do conteudo e prepara o rodape.
   -------------------------------------------------------------------------- */

.section--closing {
  background: var(--c-surface-2);
  border-top: var(--bw) solid var(--c-card-line);
  padding-block: var(--sp-3xl);
  text-align: center;
}
.section--closing h2 { margin-bottom: var(--sp-base); }

.closing__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-grey);
  max-width: 54ch;
  margin: 0 auto var(--sp-lg);
}

/* Reforcos: respondem as objeccoes do momento de decidir. */
.closing__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: var(--bw) solid var(--c-card-line);
  max-width: 640px;
  margin-inline: auto;
}
.closing__point {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-caption);
  color: var(--c-grey);
}
.closing__point::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  flex: none;
}

@media (max-width: 600px) {
  .section--closing { padding-block: var(--sp-2xl); }
  .section--closing .btn { width: 100%; justify-content: center; }
  .closing__points { gap: var(--sp-xs); flex-direction: column; align-items: center; }
}

/* --- Faixa de transportadoras, no hero ------------------------------------ */

.carrier-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  align-items: center;
}
.carrier-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-micro) var(--sp-sm) var(--sp-micro) var(--sp-micro);
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--c-grey);
}
.carrier-strip__item img { width: 28px; height: 28px; display: block; flex: none; }

@media (max-width: 600px) {
  .carrier-strip { gap: var(--sp-xs); }
  .carrier-strip__item img { width: 24px; height: 24px; }
}

/* --- Fecho de página ------------------------------------------------------
   Banda de largura total, igual em todas as paginas. Substitui um cartao
   contido, que lido entre a seccao anterior e o rodape parecia um intervalo.
   -------------------------------------------------------------------------- */

.closing {
  background: var(--c-surface-2);
  border-top: var(--bw) solid var(--c-card-line);
  padding-block: var(--sp-3xl);
  text-align: center;
}
.closing h2 { margin-bottom: var(--sp-base); }
.closing__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-grey);
  max-width: 52ch;
  margin: 0 auto var(--sp-lg);
}

/* Reforcos: respondem as tres objeccoes do momento de decidir. */
.closing__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: var(--bw) solid var(--c-card-line);
}
.closing__point {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-caption);
  color: var(--c-grey);
}
.closing__point::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  flex: none;
}

@media (max-width: 600px) {
  .closing { padding-block: var(--sp-2xl); }
  .closing .btn { width: 100%; justify-content: center; }
  .closing__points { gap: var(--sp-xs); flex-direction: column; align-items: center; }
}


/* --- Faixa de transportadoras, no hero ------------------------------------ */

.carrier-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  align-items: center;
}
.carrier-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-micro) var(--sp-sm) var(--sp-micro) var(--sp-micro);
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--c-grey);
}
.carrier-strip__item img { width: 28px; height: 28px; display: block; flex: none; }

@media (max-width: 600px) {
  .carrier-strip { gap: var(--sp-xs); }
  .carrier-strip__item img { width: 24px; height: 24px; }
}

/* --- Fecho de página ------------------------------------------------------
   Bloco de conclusao. Ficava entre uma seccao escura e o rodape escuro, e
   sendo branco e leve lia-se como intervalo. Passa a painel contido, com
   fundo proprio e argumentos de reforco por baixo do botao.
   -------------------------------------------------------------------------- */

.closing {
  background: var(--c-surface-2);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-3xl) var(--sp-2xl);
  text-align: center;
}
.closing h2 { margin-bottom: var(--sp-base); }
.closing__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-grey);
  max-width: 52ch;
  margin: 0 auto var(--sp-lg);
}

/* Reforcos: respondem as tres objeccoes do momento de decidir. */
.closing__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: var(--bw) solid var(--c-card-line);
}
.closing__point {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-caption);
  color: var(--c-grey);
}
.closing__point::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  flex: none;
}

@media (max-width: 600px) {
  .closing { padding: var(--sp-xl) var(--sp-md); }
  .closing .btn { width: 100%; justify-content: center; }
  .closing__points { gap: var(--sp-xs); flex-direction: column; align-items: center; }
}

/* --- Mural de parceiros ---------------------------------------------------
   Os logotipos vem em proporcoes muito diferentes, de quadrados e circulos
   a wordmarks largos. A solucao tem duas partes:

   1. Uma moldura igual para todos, que da a consistencia visual.
   2. Cada logotipo dimensionado para ocupar area semelhante dentro dela,
      com o tamanho escrito no proprio HTML. Sem isso, um quadrado a 44px
      de altura mostra 1936px2 de tinta e um wordmark largo quase o triplo,
      e o mural parece desalinhado mesmo estando alinhado.
   -------------------------------------------------------------------------- */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-base);
}

.partner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: var(--c-card);
  border: var(--bw) solid var(--c-card-line);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.partner:hover { border-color: var(--c-grey-light); }

/* A moldura. Igual em todos os cartoes, seja o logotipo quadrado,
   redondo ou uma faixa larga. */
.partner__slot {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2);
  border-radius: var(--r-button);
  padding: var(--sp-xs);
}
.partner__logo {
  max-width: 116px;
  max-height: 44px;
  object-fit: contain;
  object-position: center;
  display: block;
}
.partner__name {
  font-size: var(--fs-caption);
  color: var(--c-grey);
  text-align: center;
  line-height: 1.3;
}
.partner:hover .partner__name { color: var(--c-ink); }

@media (max-width: 600px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
  .partner { padding: var(--sp-sm); }
  .partner__slot { height: 64px; }
  .partner__logo { transform: scale(0.8); }
}