/* Paleta Mídia Mobile: azul elétrico com degradê do anil ao céu, marinho profundo.
   Para trocar as cores, altere só estes tokens. */
:root {
  --azul: #0B5FFF;
  --azul-forte: #0045D8;
  --anil: #0A2A9E;
  --degrade: linear-gradient(100deg, var(--anil) 0%, var(--azul) 55%, #1E9BFF 100%);
  --ceu: #5CCBFF;
  --ceu-claro: #DDF3FF;
  --marinho: #001B5E;
  --marinho-fundo: #00123F;
  --papel: #F2F6FD;
  --tinta: #0A1640;
  --tinta-suave: #47557A;
  --linha: #CBD6EA;
  --branco: #FFFFFF;
  --erro: #C4262E;

  --fonte: "Archivo", "Arial", sans-serif;
  --inclinacao: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  --raio: 6px;
  --gutter: 16px;
  --largura: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--branco);
  font-variation-settings: normal;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.08; }
p { margin: 0; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--ceu); outline-offset: 3px; }

.pular {
  position: absolute; left: var(--gutter); top: -60px; z-index: 20;
  background: var(--branco); color: var(--tinta); padding: .6rem 1rem; border-radius: var(--raio);
}
.pular:focus { top: 12px; }

.moldura { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 700px) { :root { --gutter: 32px; } }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.5rem;
  font: inherit; font-weight: 700; font-size: 1rem; font-stretch: 110%;
  text-decoration: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.botao--pequeno { min-height: 42px; padding: 0 1.1rem; font-size: .9375rem; }
.botao--claro { background: var(--branco); color: var(--azul-forte); }
.botao--claro:hover { background: var(--ceu-claro); }
.botao--azul { background: var(--azul); color: var(--branco); }
.botao--azul:hover { background: var(--azul-forte); }
.botao--ceu { background: var(--ceu); color: var(--marinho-fundo); }
.botao--ceu:hover { background: var(--branco); }
.botao--marinho { background: var(--marinho); color: var(--branco); }
.botao--marinho:hover { background: var(--marinho-fundo); }

.link-seta {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--ceu);
}
.link-seta:hover { text-decoration-color: currentColor; }

/* Topo */
.topo { background: var(--degrade); color: var(--branco); position: relative; z-index: 2; margin-bottom: -1px; }
.topo__barra {
  max-width: var(--largura); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topo__marca img { width: 96px; height: auto; }
.topo__nav { display: none; }
@media (min-width: 900px) {
  .topo__marca img { width: 124px; }
  .topo__nav { display: flex; gap: 2rem; margin-left: auto; margin-right: 1rem; }
  .topo__nav a { text-decoration: none; font-weight: 500; opacity: .92; }
  .topo__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
}

/* Abertura: o momento forte da página */
.abertura {
  background: var(--degrade); color: var(--branco);
  display: grid; overflow: hidden;
  padding-top: 28px;
}
.abertura__texto { padding: 0 var(--gutter) 36px; }
.abertura__titulo {
  font-style: italic; font-weight: 850; font-stretch: 125%;
  font-size: clamp(2.6rem, 10.6vw, 6.6rem);
  line-height: .9; letter-spacing: -.025em;
}
.abertura__titulo span { display: block; }
.abertura__titulo span + span { color: var(--ceu); }
.abertura__sub { margin-top: 1.25rem; max-width: 34ch; font-size: 1.125rem; line-height: 1.5; }
.abertura__acoes { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

.abertura__foto { position: relative; }
.abertura__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 50%;
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 900px) {
  .abertura {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch; padding-top: 0; min-height: min(78vh, 720px);
  }
  .abertura__texto {
    align-self: center;
    padding: 64px 72px 88px max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
  }
  .abertura__foto img { height: 100%; aspect-ratio: auto; clip-path: var(--inclinacao); }
  .abertura__titulo { font-size: min(5.4rem, 5.3vw); }
}

@media (prefers-reduced-motion: no-preference) {
  .abertura__titulo span { animation: entra .7s cubic-bezier(.2, .7, .2, 1) both; }
  .abertura__titulo span + span { animation-delay: .12s; }
  .abertura__foto img { animation: desliza .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
}
@keyframes entra {
  from { opacity: 0; transform: translateX(-48px) skewX(-14deg); }
  to { opacity: 1; transform: none; }
}
@keyframes desliza {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: none; }
}

/* Seções */
.secao { padding: 64px 0; }
.secao--papel { background: var(--papel); }
.secao--marinho { background: var(--marinho); color: var(--branco); }
.secao--azul { background: var(--degrade); color: var(--branco); }
@media (min-width: 900px) { .secao { padding: 104px 0; } }

.titulo-secao {
  font-style: italic; font-weight: 800; font-stretch: 118%;
  font-size: clamp(1.85rem, 6.4vw, 3.1rem); letter-spacing: -.02em;
  max-width: 22ch;
}
.intro { margin-top: 1rem; max-width: 56ch; color: var(--tinta-suave); font-size: 1.125rem; }

/* Provas */
.aplicacoes {
  margin-top: 2rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 8px;
}
.aplicacoes figure { scroll-snap-align: start; }
.aplicacoes img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: var(--raio); }
.aplicacoes figcaption {
  margin-top: .6rem; font-weight: 700; font-style: italic; font-stretch: 112%; font-size: 1.125rem;
}
@media (min-width: 700px) {
  .aplicacoes { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 20px; }
  .aplicacoes img { aspect-ratio: 3 / 4; }
}

/* Etapas: sequência real, por isso numerada */
.etapas { list-style: none; margin: 2.5rem 0 2.5rem; padding: 0; counter-reset: etapa; display: grid; gap: 2rem; }
.etapa { counter-increment: etapa; position: relative; padding-left: 4rem; }
.etapa::before {
  content: counter(etapa);
  position: absolute; left: 0; top: -.35rem;
  font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 3rem; line-height: 1;
  color: var(--azul);
}
.etapa h3 { font-size: 1.25rem; font-weight: 700; }
.etapa p { margin-top: .4rem; color: var(--tinta-suave); max-width: 40ch; }
@media (min-width: 900px) {
  .etapas { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .etapa { padding-left: 0; padding-top: 4.25rem; border-top: 3px solid var(--azul); }
  .etapa::before { top: 1rem; }
}

/* Formatos */
.formatos { margin-top: 2.5rem; display: grid; gap: 20px; }
.formato { background: var(--branco); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.formato__img { position: relative; background: var(--ceu-claro); height: 240px; padding: 48px 16px 16px; }
.formato__img img { width: 100%; height: 100%; object-fit: contain; }
.formato__img figcaption {
  position: absolute; left: 12px; top: 12px;
  background: var(--branco); color: var(--tinta-suave);
  font-size: .8125rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
}
.formato__texto { padding: 22px 20px 26px; }
.formato h3 { font-size: 1.6rem; font-weight: 800; font-style: italic; font-stretch: 118%; }
.formato p { margin-top: .5rem; color: var(--tinta-suave); }
@media (min-width: 900px) {
  .formatos { grid-template-columns: 1.35fr 1fr; gap: 24px; }
  .formato__img { height: 340px; padding: 56px 28px 24px; }
  .formato__texto { padding: 26px 28px 32px; }
}
.consulta { margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--ceu); color: var(--tinta-suave); max-width: 60ch; }
.consulta strong { color: var(--tinta); }

/* Processo */
.processo { display: grid; gap: 2.5rem; }
.combinados { margin: 0; display: grid; gap: 0; }
.combinados > div { padding: 1.25rem 0; border-top: 1px solid var(--linha); }
.combinados > div:last-child { border-bottom: 1px solid var(--linha); }
.combinados dt { font-weight: 700; font-size: 1.125rem; }
.combinados dd { margin: .3rem 0 0; color: var(--tinta-suave); max-width: 48ch; }
@media (min-width: 900px) {
  .processo { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
  .combinados { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .combinados > div:nth-last-child(2) { border-bottom: 1px solid var(--linha); }
}

/* Veículos */
.secao--marinho { clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); padding-top: 92px; }
.veiculos { display: grid; gap: 2.5rem; }
.veiculos__texto > p { margin-top: 1rem; max-width: 48ch; color: var(--ceu-claro); font-size: 1.125rem; }
.veiculos .titulo-secao { color: var(--branco); }
.veiculos__foto { margin-top: 2rem; }
.veiculos__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; clip-path: var(--inclinacao); }
@media (min-width: 900px) {
  .secao--marinho { clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%); padding-top: 150px; }
  .veiculos { grid-template-columns: 1fr minmax(0, 480px); gap: 4rem; align-items: start; }
}

/* Formulários */
.formulario {
  display: grid; gap: 16px;
  background: var(--branco); color: var(--tinta);
  padding: 22px 18px; border-radius: var(--raio);
}
@media (min-width: 700px) { .formulario { padding: 32px; } }
.formulario--escuro { background: var(--marinho-fundo); color: var(--branco); border: 1px solid rgba(92, 203, 255, .25); }
.campo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend { font-weight: 600; font-size: .9375rem; }
.campo legend { padding: 0; margin-bottom: 6px; }
.campo input[type="text"], .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio);
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(11, 95, 255, .25); }
.formulario--escuro .campo input[type="text"], .formulario--escuro .campo select { background: var(--branco); border-color: transparent; }
.campo--opcoes { gap: 8px; }
.opcao { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400 !important; line-height: 1.4; cursor: pointer; }
.opcao input { margin: .2rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--ceu); flex: none; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--erro); }
.formulario--escuro .campo.invalido input, .formulario--escuro .campo.invalido select { border-color: #FF8A8F; }
.campo.invalido legend, .campo.invalido > label { color: var(--erro); }
.formulario--escuro .campo.invalido legend, .formulario--escuro .campo.invalido > label { color: #FF8A8F; }
.formulario__erro { color: var(--erro); font-weight: 600; }
.formulario--escuro .formulario__erro { color: #FF8A8F; }
.formulario .botao { width: 100%; margin-top: 4px; }
.formulario__nota { font-size: .875rem; color: var(--tinta-suave); text-align: center; }
.formulario--escuro .formulario__nota { color: var(--ceu-claro); }
@media (min-width: 700px) {
  #form-agencia { grid-template-columns: 1fr 1fr; }
  #form-agencia .campo--largo, #form-agencia .botao, #form-agencia .formulario__nota, #form-agencia .formulario__erro { grid-column: 1 / -1; }
}

/* FAQ */
.perguntas { display: grid; gap: 2rem; }
.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; font-weight: 700; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2.5px solid var(--azul); border-bottom: 2.5px solid var(--azul);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { padding: 0 0 1.25rem; color: var(--tinta-suave); max-width: 62ch; }
@media (min-width: 900px) { .perguntas { grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } }

/* Proposta */
.proposta { display: grid; gap: 2rem; }
.proposta__texto > p { margin-top: 1rem; font-size: 1.125rem; max-width: 40ch; }
.proposta .titulo-secao { font-size: clamp(2.1rem, 8vw, 3.6rem); }
.proposta__email { color: var(--ceu-claro); font-size: 1rem !important; }
.proposta__email a { color: var(--branco); font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }
@media (min-width: 900px) { .proposta { grid-template-columns: 1fr 1.25fr; gap: 4rem; align-items: start; } }

/* Rodapé */
.rodape { background: var(--marinho-fundo); color: var(--ceu-claro); padding: 48px 0 40px; }
.rodape__grade { display: grid; gap: 1.75rem; }
.rodape img { width: 132px; }
.rodape__assinatura { margin-top: .75rem; font-style: italic; font-weight: 600; font-stretch: 112%; color: var(--branco); }
.rodape__contato { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rodape__contato a { color: var(--branco); text-underline-offset: 4px; }
.rodape__empresa { display: grid; gap: .35rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); }
.rodape__empresa a { color: var(--branco); text-underline-offset: 4px; }
.rodape__direitos { font-size: .875rem; opacity: .75; }
@media (min-width: 900px) { .rodape__grade { grid-template-columns: 1fr auto; align-items: end; } .rodape__empresa { grid-column: 1 / -1; } }