/* ==========================================================================
   SECOES - hero, clientes, quem somos, diferenciais, servicos, numeros,
            contato, rodape e paginas institucionais
   ========================================================================== */

/* ==========================================================================
   1. HERO
   Video de operacao real em tela cheia, sob gradiente de leitura. Enquanto o
   arquivo final nao chega, o slot se apresenta com a especificacao esperada.
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-block-start: calc(var(--header-h) + var(--sp-5));
  background-color: var(--c-petrol-900);
  color: #EDF1F0;
  overflow: hidden;
  isolation: isolate;
}

.hero__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Slot do video de fundo. Ocupa mais que a altura do hero para sobrar
   percurso ao parallax sem revelar borda. Ver substituicoes.md, seção 3. */
.hero__media {
  position: absolute;
  inset: -8% 0 0;
  height: 116%;
  display: grid;
  place-items: center;
  will-change: transform;
}
.hero__video,
.hero__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--hero-media-opacity, 0.70);
}

/* Estado vazio do hero, ate o video final ser colocado. Ocupa a mesma celula
   de grid do conteudo e se ancora no canto inferior direito dela - ou seja,
   sempre logo acima da faixa de selos, sem depender da altura dela. */
.hero__slot {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  z-index: 2;
  pointer-events: none;
  margin: 0 clamp(var(--sp-5), 4vw, var(--sp-10)) var(--sp-6);
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5);
  max-width: min(27rem, 62vw);
  padding: var(--sp-5) var(--sp-6);
  text-align: start;
  background-color: rgb(6 9 11 / 0.5);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #7E9299;
}
.hero__slot::before {
  inset: calc(var(--sp-2) * -1);
  border-color: rgb(58 108 124 / 0.7);
}
.hero__slot .media-slot__name { color: #C6D2D4; }
.hero__slot .media-slot__spec { color: #7E9299; }

/* No celular o hero nao tem area livre: titulo, subtitulo e CTAs ocupam a
   coluna inteira. O aviso do slot some - ele e auxilio de montagem, nao
   conteudo, e a instrucao continua no comentario do HTML e em
   substituicoes.md. Some junto quando o video entrar. */
@media (max-width: 47.999em) {
  .hero__slot { display: none; }
}

/* Gradiente de leitura: garante contraste AA do texto sobre a imagem. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(6 9 11 / 0.72) 0%, rgb(6 9 11 / 0.10) 34%, rgb(11 26 33 / 0.86) 88%),
    linear-gradient(96deg, var(--c-petrol-900) 6%, rgb(11 26 33 / 0.58) 46%, rgb(11 26 33 / 0.14) 100%);
}

/* Granulacao fina: tira o aspecto plastificado do gradiente. */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Malha tecnica: leve grade de prancheta, quase imperceptivel. */
.hero__gridlines {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgb(58 108 124 / 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(58 108 124 / 0.14) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(78% 62% at 74% 46%, #000 0%, transparent 72%);
  mask-image: radial-gradient(78% 62% at 74% 46%, #000 0%, transparent 72%);
}


/* Grid, e nao flex: um item flex encolheria ate a largura da linha mais
   longa do titulo, e a divisao em linhas realimentaria esse encolhimento. */
.hero__inner {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
}

.hero__content {
  width: 100%;
  max-width: 46rem;
  padding-block: var(--sp-8);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-6);
  color: #C6D2D4;
}
.hero__eyebrow .icon { color: var(--c-amber-500); }

.hero__title { margin-block-end: var(--sp-6); }
/* Cada linha do titulo entra por baixo de uma mascara. O padding compensa a
   entrelinha fechada (0.95) para que cedilhas e descendentes nao sejam
   cortados pelo overflow da mascara. */
.hero__title .line {
  display: block;
  overflow: hidden;
  /* A entrelinha fechada (0.95) corta til, cedilha e descendentes contra o
     overflow da mascara. O padding devolve o espaco e a margem negativa o
     retira do fluxo, mantendo o ritmo vertical intacto. */
  padding-block: 0.2em 0.16em;
  margin-block: -0.2em -0.16em;
}
.hero__title .line > span { display: block; }

.hero__sub {
  max-width: 40rem;
  margin-block-end: var(--sp-8);
  color: #B4C3C6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Rodape do hero: selos de atuacao + indicador de rolagem. */
.hero__foot {
  position: relative;
  border-block-start: var(--stroke) solid rgb(36 80 94 / 0.6);
  background-color: rgb(6 9 11 / 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-5);
}
.hero__seals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.scroll-cue {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  color: #8FA3A8;
}
.scroll-cue__label {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--wd-compressed);
}
.scroll-cue__rail {
  position: relative;
  width: 1px;
  height: 2.75rem;
  background-color: rgb(58 108 124 / 0.55);
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 45%;
  background-color: var(--c-amber-500);
  animation: cue-run 2.1s var(--ease-in-out-quint) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-110%); }
  60%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}

/* ==========================================================================
   2. CLIENTES - prova social
   ========================================================================== */
.clients { border-block-end: var(--stroke) solid var(--line); }
.clients__head {
  display: grid;
  gap: var(--sp-5);
  max-width: 58rem;
  margin-block-end: var(--sp-9);
}
.clients__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-block-start: var(--sp-9);
  padding-block-start: var(--sp-6);
  border-block-start: var(--stroke) solid var(--line);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 1.5;
  max-width: 44rem;
}
.clients__note .icon { color: var(--accent); margin-block-start: 1px; }

/* ==========================================================================
   3. QUEM SOMOS
   ========================================================================== */
.about__grid {
  display: grid;
  gap: var(--sp-10);
}
.about__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.about__title { max-width: 22ch; }
.about__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-7);
  border-block-start: var(--stroke) solid var(--line);
}
.about__meta-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.about__meta-value {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 106;
  color: var(--text);
}

/* Visual da frota: pranchas de elevacao empilhadas com profundidade. */
.about__visual { position: relative; }
.fleet-stack {
  position: relative;
  display: grid;
  gap: var(--sp-5);
}
/* A imagem sangra ate a borda da prancha; so a legenda tem respiro. */
.fleet-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  will-change: transform;
}
/* A legenda absorve a altura sobrando quando a prancha vizinha e mais alta,
   em vez de deixar uma faixa de superficie vazia embaixo. */
.fleet-plate__caption {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-block-start: var(--stroke) solid var(--line);
}
.fleet-plate__name {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--wd-compressed);
  color: var(--text);
}
.fleet-plate__tag {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--wd-compressed);
  color: var(--accent-text);
}

/* ==========================================================================
   4. DIFERENCIAIS
   Grid deliberadamente assimetrico: 7/5 na primeira linha, 5/7 na segunda.
   ========================================================================== */
.why__head {
  display: grid;
  gap: var(--sp-6);
  margin-block-end: var(--sp-10);
}
.why__title { max-width: 20ch; }
.why__intro { max-width: 46ch; }

.why__grid { display: grid; gap: var(--grid-gap); }

/* ==========================================================================
   5. SERVICOS
   Lista de linhas expansiveis. A imagem tecnica do equipamento acompanha o
   cursor no desktop e aparece dentro do painel no toque.
   ========================================================================== */
.services__head {
  display: grid;
  gap: var(--sp-6);
  margin-block-end: var(--sp-9);
}
.services__list { border-block-start: var(--stroke) solid var(--line); }

.service {
  /* Respiro interno da faixa: as reguas e o fundo do estado aberto vao de
     ponta a ponta, o conteudo fica recuado dentro deles. */
  --service-pad: clamp(var(--sp-4), 2.8vw, var(--sp-10));
  border-block-end: var(--stroke) solid var(--line);
  transition: background-color var(--dur-base) var(--ease-out-quart);
}
.service.is-open { background-color: var(--bg-alt); }

/* O <h3> existe pela semantica (navegacao por titulos e SEO); quem carrega
   a aparencia e o .service__title dentro do botao. */
.service__heading { font: inherit; }

/* Em coluna estreita o icone e o botao dividem a primeira faixa e o texto
   ocupa a largura inteira. A partir de 48em tudo volta para uma linha so. */
.service__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "icon toggle"
    "titles titles";
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding-block: clamp(var(--sp-6), 3vw, var(--sp-8));
  padding-inline: var(--service-pad);
  text-align: start;
  color: var(--text);
  transition: padding-inline-start var(--dur-slow) var(--ease-out-expo),
              color var(--dur-base) var(--ease-out-quart);
}
.service__head:hover {
  padding-inline-start: calc(var(--service-pad) + var(--sp-5));
}

.service__icon {
  grid-area: icon;
  justify-self: start;
  color: var(--accent-text);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.service__head:hover .service__icon { transform: scale(1.08); }

.service__titles {
  grid-area: titles;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.service__title { color: inherit; }
.service__summary {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}

.service__toggle {
  grid-area: toggle;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: var(--stroke) solid var(--line-hi);
  border-radius: var(--radius-pill);
  color: var(--text);
  transition: background-color var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
}
.service__head:hover .service__toggle {
  border-color: var(--accent);
  color: var(--accent-text);
}
.service.is-open .service__toggle {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: rotate(135deg);
}

.service__panel { overflow: hidden; }
.service__panel-inner {
  display: grid;
  gap: var(--sp-7);
  padding-inline: var(--service-pad);
  padding-block-end: var(--sp-9);
}
.service__scope-title { margin-block-end: var(--sp-4); }
.service__scope { display: grid; gap: var(--sp-3); }
.service__scope li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.service__scope .icon { color: var(--accent); margin-block-start: 3px; }

.service__media {
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-md);
  background-color: var(--surface);
}

/* Painel que segue o cursor no desktop. */
.service-preview {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-sticky);
  width: 22rem;
  padding: var(--sp-5);
  background-color: var(--c-petrol-800);
  border: var(--stroke) solid var(--c-petrol-600);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  display: none;
}
.service-preview__art {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--c-petrol-500);
}
.service-preview__art .media-slot__name { color: #C6D2D4; }
.service-preview__label {
  display: block;
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: var(--stroke) solid var(--c-petrol-600);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--wd-compressed);
  color: var(--c-amber-500);
}

/* ==========================================================================
   6. NUMEROS DA OPERACAO
   Anotacao de cota (dimension line) - o unico lugar, junto ao hero, onde o
   vocabulario de desenho tecnico aparece, porque aqui ele mede algo real.
   ========================================================================== */
.metrics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-end: var(--sp-10);
}
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--grid-gap);
}
.metric { display: flex; flex-direction: column; gap: var(--sp-4); }
.metric__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--ff-display);
  font-size: var(--fs-metric);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  font-variation-settings: "wdth" 112;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.metric__suffix { color: var(--accent-text); }

/* Linha de cota com terminadores em tique, como em prancha de projeto. */
.metric__rule {
  position: relative;
  height: 9px;
  border-block-start: var(--stroke) solid var(--line-hi);
}
.metric__rule::before,
.metric__rule::after {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  width: var(--stroke);
  height: 9px;
  background-color: var(--line-hi);
}
.metric__rule::before { inset-inline-start: 0; }
.metric__rule::after { inset-inline-end: 0; }

.metric__label {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--wd-compressed);
  color: var(--text-muted);
}

/* ==========================================================================
   7. CONTATO
   ========================================================================== */
.contact__grid { display: grid; gap: var(--sp-10); }
.contact__intro { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact__title { max-width: 18ch; }
.contact__text { max-width: 52ch; }

.contact__panel {
  position: relative;
  padding: clamp(var(--sp-6), 3.4vw, var(--sp-10));
  background-color: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-md);
}

.form__rows { display: grid; gap: var(--sp-7); }
.form__row { display: grid; gap: var(--sp-7); }
.form__consent { display: grid; gap: var(--sp-5); }
.form__legal {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-faint);
  margin: 0;
}
.form__legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }

/* Armadilha anti-spam: invisivel para gente, irresistivel para robo. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.form__status[data-state="error"] { color: var(--c-danger); }
.theme-light .form__status[data-state="error"] { color: var(--c-danger-deep); }

/* Confirmacao de envio - marca SVG, jamais emoji. */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-block: var(--sp-8);
}
.form-success__mark {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1.5px solid var(--c-success);
  border-radius: var(--radius-pill);
  color: var(--c-success);
}
.form-success__mark .icon { width: 1.75rem; height: 1.75rem; stroke-width: 2; }
.form-success__text { color: var(--text-muted); max-width: 46ch; margin: 0; }

.contact__channels { display: flex; flex-direction: column; }

/* ==========================================================================
   8. RODAPE
   ========================================================================== */
.site-footer { background-color: var(--bg); color: var(--text); }
.site-footer__top { padding-block: var(--section-pad-sm); }
.site-footer__grid { display: grid; gap: var(--sp-9); }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 34rem; }
.site-footer__statement {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.site-footer__social { display: flex; gap: var(--sp-3); }
.social-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-expo);
}
.social-btn:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: translateY(-2px);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--grid-gap);
}
.footer-col__title {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--wd-compressed);
  color: var(--text-faint);
  margin-block-end: var(--sp-5);
}
.footer-col__list { display: grid; gap: var(--sp-3); }
.footer-col__list a {
  display: inline-block;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-expo);
}
.footer-col__list a:hover {
  color: var(--accent-text);
  transform: translateX(3px);
}

.site-footer__bottom {
  border-block-start: var(--stroke) solid var(--line);
  padding-block: var(--sp-6);
}
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.site-footer__copy {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-faint);
  margin: 0;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.site-footer__legal a,
.site-footer__legal button {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  transition: color var(--dur-base) var(--ease-out-quart);
}
.site-footer__legal a:hover,
.site-footer__legal button:hover { color: var(--accent-text); }

/* ==========================================================================
   9. PAGINAS INSTITUCIONAIS (politica, termos)
   ========================================================================== */
.page-head {
  padding-block: calc(var(--header-h) + var(--sp-10)) var(--sp-10);
  background-color: var(--c-petrol-900);
  color: #EDF1F0;
  border-block-end: var(--stroke) solid var(--c-petrol-600);
}
.page-head__inner { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 52rem; }
.page-head__meta { color: #8FA3A8; font-size: var(--fs-sm); margin: 0; }

.doc { max-width: 48rem; }
.doc h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  font-variation-settings: "wdth" 108;
  color: var(--text);
  margin-block: var(--sp-10) var(--sp-4);
}
.doc h2:first-child { margin-block-start: 0; }
.doc h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 650;
  font-variation-settings: "wdth" var(--wd-normal);
  color: var(--text);
  margin-block: var(--sp-7) var(--sp-3);
}
.doc p,
.doc li {
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-body);
}
.doc p + p { margin-block-start: var(--sp-4); }
.doc ul { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.doc ul li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.doc ul .icon { color: var(--accent); margin-block-start: 4px; }
.doc a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.doc__updated {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-9);
  padding: var(--sp-3) var(--sp-5);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}
.doc__updated .icon { color: var(--accent); }

/* ==========================================================================
   10. BREAKPOINTS DE SECAO
   ========================================================================== */
/* Abaixo de 34em os dois CTAs empilham: larguras diferentes lado a lado
   viram degrau visual, entao ocupam a coluna inteira. */
@media (max-width: 33.999em) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

@media (min-width: 34em) {
  .form__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fleet-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-plate--lead { grid-column: 1 / -1; }
  .service__panel-inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .service__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon titles toggle";
  }
}

@media (min-width: 62em) {
  .scroll-cue { display: flex; }
  .metrics__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .why__grid > .feature-card:nth-child(1) { grid-column: span 7; }
  .why__grid > .feature-card:nth-child(2) { grid-column: span 5; }
  .why__grid > .feature-card:nth-child(3) { grid-column: span 5; }
  .why__grid > .feature-card:nth-child(4) { grid-column: span 7; }
  .why__head { grid-template-columns: 1.15fr 1fr; align-items: end; gap: var(--sp-10); }
  .services__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--sp-10); }
  .clients__head { grid-template-columns: 1fr 1.05fr; align-items: end; gap: var(--sp-10); max-width: none; }
}

@media (min-width: 68em) {
  .hero__content { padding-block: var(--sp-9); max-width: 64rem; }
  .about__grid { grid-template-columns: 1fr 1.08fr; gap: var(--sp-12); align-items: center; }
  .contact__grid { grid-template-columns: 1.25fr 1fr; gap: var(--sp-12); align-items: start; }
  .contact__intro { position: sticky; top: calc(var(--header-h-compact) + var(--sp-9)); }
  .site-footer__grid { grid-template-columns: 1fr 1.4fr; gap: var(--sp-12); }
  .service__head { gap: var(--sp-8); }
  .service__titles { display: grid; grid-template-columns: 1fr 1.25fr; align-items: baseline; gap: var(--sp-8); }
  .service-preview { display: block; }
}

@media (min-width: 90em) {
  .hero__content { max-width: 68rem; }
}