/* brand.css — ajustes da Aracaju Multimarcas sobre o main.css do design-system. */

/* --- esquema invertido ----------------------------------------------------
   O tema nasceu preto sobre branco. */
:root {
  --amarelo: #F5C518;
  --perola: #EFEBE3;
  --preto-marca: #111111;
  --preto-2: #141414;

  --tinta: var(--perola);
  --papel: #000000;
  --papel-escuro: #000000;

  /* As três superfícies claras do tema (bege, cinza e azul) alternavam os cards da faixa horizontal, a seção dos termos e o overlay do menu. */
  --beige: var(--preto-2);
  --grey: #1C1C1C;
  --blue: #10141A;

  /* altura da faixa amarela que fecha o painel "Quem disse que seminovo…" */
  --faixa-fecho: 9vh;
}

/* O --blue também pintava o texto do cursor customizado, que fica em
   mix-blend-mode sobre o ponto vermelho. Ali o azul-claro original continua. */
#mouse span span { color: #C7D7E9; }

/* --- menu: faixa lateral --------------------------------------------------
   O tema abria o menu como uma página inteira, com foto em destaque e lista de veículos. */
:root { --faixa-menu: 4.4rem; }

header .header__menu {
  justify-content: flex-end;
  padding: 0;
  background: rgba(0, 0, 0, .55);
}

header .header__menu__bg {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 0;
  max-width: var(--faixa-menu);
  height: 100%;
  background: #000;
}

/* Mesma receita do menu vertical do hero: linha de itens girada -90°, com
   origem no canto inferior direito. */
header .header__menu__nav-site {
  position: absolute;
  top: calc(var(--wrapper-padd) - 1.15rem);
  right: var(--wrapper-padd);
  bottom: auto;
  left: auto;
  width: auto;
  padding: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.2rem;
  font-size: var(--parrafo);
  line-height: 1;
  transform: rotate(-90deg);
  transform-origin: bottom right;
}

header .header__menu__nav-site li { white-space: nowrap; }

/* --- botão do menu --------------------------------------------------------
   O tema pendurava um `filter: invert(100%)` neste botão para ele se defender sozinho de seções claras. */
/* Fora do .header, que está inteiro em mix-blend-mode: difference. Perdeu o
   pai fixo, então é fixed por conta própria. */
header .header__btn {
  position: fixed;
  filter: none;
}


header .header__btn::before { background: var(--papel); }

/* Com o menu aberto o botão é só um X: sem pílula, sem borda, sem mancha. A
   classe entra e sai no menu_tl (clicks.js), junto com a troca do texto. */
header .header__btn.is-x {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-size: var(--titulo);
  line-height: 1;
}

header .header__btn.is-x::before { display: none; }

@media (max-width: 950px) {
  header .header__menu {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
  }
}

.bg-amarelo.c-black,
.bg-amarelo .c-black { color: #000; }

/* O fecho da faixa era um painel amarelo de 150vw. Como a faixa entra pela
   direita, dele só se via uma tira amarela vertical colada no painel preto.
   O painel ficou preto e o amarelo virou a faixa do rodapé do painel de texto,
   logo abaixo. */
main .mod-scroll__cierre {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
}

/* Faixa amarela no pé do painel "Quem disse que seminovo…", de ponta a ponta.
   Sobe de baixo para cima — o `y` sai de 100% no scroll.js, junto com a
   entrada do texto. */
main .last-item__content__faixa {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: var(--faixa-fecho);
  background: var(--amarelo);
  transform: translateY(100%);
  pointer-events: none;
}

/* No mobile o painel tem altura automática e o texto ia parar debaixo da
   faixa. O rodapé do bloco reserva a altura dela. */
@media (max-width: 950px) {
  main .mod-scroll__projects .last-item__content__wrap {
    padding-bottom: calc(var(--faixa-fecho) + 2.4rem);
  }
}

/* Asteriscos da faixa "SEMINOVOS": são <img> de um SVG com fill=currentColor,
   e currentColor dentro de <img> não herda — resolve para preto. */
.mod-scroll__carousel__image { filter: invert(1); }

.bg-amarelo { background-color: var(--amarelo); }

/* --- logotipo -------------------------------------------------------------
   O tema usa três blocos (normal / is / boring). */
.logo { width: 7.9em; }

/* O "boring" original era girado 180° como piada da marca antiga; em "marcas"
   isso só deixava a palavra de cabeça para baixo. */
.logo__boring,
.logo__boring .reg { transform: none; }

.logo__is { font-style: italic; }

/* --- silhueta do hero -----------------------------------------------------
   logo-marca.png é um traço branco sobre um retângulo PRETO OPACO — não tem canal alfa. */
main .mod-scroll__intro__marca {
  position: absolute;
  left: var(--wrapper-padd);
  /* espaço suficiente para a assinatura não encostar no copyright, que fica
     preso em bottom: var(--wrapper-padd) no canto esquerdo */
  bottom: calc(var(--wrapper-padd) * 3.2);
  /* vem depois do texto no HTML, então sem isto pintava por cima dele */
  z-index: 0;
  width: 62%;
  max-width: 46rem;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

main .mod-scroll__intro__content {
  position: relative;
  z-index: 1;
}

main .mod-scroll__intro__marca img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  opacity: .92;
}

/* A assinatura encosta na base do desenho. */
main .mod-scroll__intro__marca__tag {
  display: block;
  margin-top: -20%;
  text-align: center;
  font-size: 1.15vw;
  letter-spacing: .38em;
  text-indent: .38em;
  line-height: 1.4;
  opacity: .55;
}

main .mod-scroll__intro__marca__tag i {
  font-style: normal;
  opacity: .5;
}

@media (max-width: 950px) {
  main .mod-scroll__intro__marca {
    width: 86%;
    bottom: calc(var(--wrapper-padd) * 2.5);
  }

  main .mod-scroll__intro__marca__tag {
    font-size: 2.1vw;
    letter-spacing: .28em;
    text-indent: .28em;
  }
}

/* --- hero -----------------------------------------------------------------
   O tema traz width:80vw inline no wrapper do intro. */
@media (min-width: 951px) {
  main .mod-scroll__intro .wrapper { width: 80vw; }
}

/* As linhas do título são recortadas em .clip-y para as letras entrarem de
   fora, e o line-height é 0.9: a caixa fica menor que os glifos e comia o pé
   do texto — a barriga do "Q" e a inclinação do CONFIA em itálico. O padding
   aumenta a área do recorte e a margem negativa devolve o espaço, então o
   layout não muda. */
main .mod-scroll__intro__title .splitline {
  padding-top: .06em;
  margin-top: -.06em;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}

/* --- fecho do último veículo ("Quem disse que seminovo…") ------------------
   O scroll.js anima a largura do painel; o texto tem de acompanhar. */
main .mod-scroll__projects .last-item__content__wrap { width: 100%; }
main .mod-scroll__projects .last-item__content__title .line { width: 100%; }

/* A faixa horizontal vira uma camada só. Os z-index de dentro dela (o fecho
   tem 15) escapavam e pintavam por cima das seções seguintes; isolate os
   prende ali dentro, e o que vem depois no HTML cobre a faixa normalmente. */
main .mod-scroll {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.veiculo__preco { display: block; }

/* --- ficha cadastral em 5 passos ------------------------------------------
   Mesma sequência do site original: dados pessoais, endereço, dados profissionais, referências e descrição do bem. */
.ficha__passos {
  display: flex;
  gap: .6rem;
  margin: .4rem 0 1.6rem;
  padding: 0;
  list-style: none;
}

.ficha__passo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  font-family: var(--f-izmir);
  font-size: var(--parrafo);
  color: rgba(255, 255, 255, .4);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.ficha__passo.is-on {
  border-color: var(--amarelo);
  background-color: var(--amarelo);
  color: var(--preto-marca);
}

.ficha__passo.is-feito {
  border-color: rgba(255, 255, 255, .55);
  color: rgba(255, 255, 255, .55);
}

.ficha {
  width: 100%;
}

.ficha__etapa {
  border: 0;
  margin: 0;
  padding: 0;
}

.ficha__etapa[hidden] { display: none; }

.ficha__etapa__titulo {
  display: block;
  margin-bottom: 1.4rem;
  padding: 0;
}

/* grupos de rádio — fora de .modal__content__form__wrap-input de propósito:
   o main.js assume um .modal__content__form__input dentro de cada wrap. */
.ficha__escolha { margin-bottom: 1.5rem; }

.ficha__escolha__rotulo {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-izmir);
  font-size: var(--subtitulo);
  opacity: .55;
}

.ficha__escolha__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}

.ficha__opcao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-izmir);
  font-size: var(--parrafo);
  cursor: pointer;
}

.ficha__opcao input { accent-color: var(--amarelo); }

.ficha__acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
}

.ficha__voltar {
  background: none;
  border: 0;
  padding: .4rem 0;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  transition: opacity .25s ease;
}

.ficha__voltar:hover { opacity: 1; }
.ficha__acoes [hidden] { display: none; }

/* campo com erro depois de tentar avançar — vermelho clareado, porque o
   #C0392B do tema some no fundo preto */
.modal__content__form__input.is-invalido {
  border-bottom-color: #E4665B;
}

.ficha__erro {
  width: 100%;
  margin-bottom: 1rem;
  font-family: var(--f-izmir);
  font-size: var(--subtitulo);
  color: #E4665B;
}

/* --- quem somos -----------------------------------------------------------
   Duas colunas em conversa: a frase de abertura grande em Editorial New à
   esquerda, o corpo em Izmir à direita. As palavras da abertura entram por
   baixo de uma máscara e as linhas do corpo acendem, as duas coisas presas à
   rolagem (animations.js). */
.quem-somos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: start;
}

.quem-somos__lead {
  margin: 0;
  padding-right: 2rem;
  font-size: var(--titulo-xl);
  line-height: 1.12;
  letter-spacing: -.01em;
}

/* a linha é a máscara, a palavra é o que sobe */
.quem-somos__lead .linha-mascara {
  overflow: clip;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.quem-somos__lead .palavra {
  display: inline-block;
  will-change: transform;
}

.quem-somos__paragrafo {
  margin: 0 0 1.1em;
  max-width: 34rem;
  opacity: .85;
}

/* O corpo tem de vir nos <p>, e não só no contêiner: as margens são em `em` e,
   com o contêiner grande e o texto pequeno, o espaço entre parágrafos crescia
   sozinho. A medida em `ch` acompanha o próprio corpo do texto. */
@media (min-width: 951px) {
  .quem-somos .quem-somos__texto,
  .quem-somos__paragrafo {
    font-size: 32px;
    line-height: 1.35;
  }

  .quem-somos__paragrafo {
    max-width: 34ch;
    margin-bottom: .7em;
  }
}

.quem-somos__paragrafo:last-child { margin-bottom: 0; }

@media (max-width: 950px) {
  .quem-somos {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .quem-somos__lead {
    padding-right: 0;
    font-size: min(var(--titulo-xl), 8.4vw);
  }

  .quem-somos__paragrafo { max-width: none; }
}

/* --- barra de busca do estoque --------------------------------------------
   Chips de marca em cima, campos embaixo, como no site original. */
.filtros {
  width: 100%;
  margin-bottom: 2.6rem;
}

.filtros__marcas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 1.4rem;
}

.filtros__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  height: 3.4rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(var(--border-radius) * .45);
  background: var(--preto-2);
  color: inherit;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}

.filtros__marca__logo {
  width: auto;
  max-width: 3.4rem;
  max-height: 1.7rem;
  filter: grayscale(1) brightness(1.75);
  opacity: .8;
  transition: opacity .25s ease, filter .25s ease;
}

.filtros__marca:hover { border-color: rgba(255, 255, 255, .38); }

.filtros__marca.is-on {
  border-color: var(--amarelo);
  background: rgba(245, 197, 24, .08);
}

.filtros__marca.is-on .filtros__marca__logo,
.filtros__marca:hover .filtros__marca__logo {
  filter: none;
  opacity: 1;
}

.filtros__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
}

.filtros__campo {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 8rem;
}

.filtros__campo--largo { flex: 2 1 16rem; }

.filtros__rotulo { opacity: .55; }

/* A seta do <select> some quando trocamos a aparência nativa, então ela volta
   como imagem de fundo — é o chevron que já vinha do material de origem. */
.filtros__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 3rem;
  padding: 0 2.2rem 0 .9rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(var(--border-radius) * .35);
  background-color: var(--preto-2);
  background-image: url("../img/ui/chevron.svg");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: .7rem;
  color: var(--perola);
  cursor: pointer;
  transition: border-color .25s ease;
}

.filtros__select:hover,
.filtros__select:focus-visible {
  border-color: rgba(255, 255, 255, .4);
  outline: none;
}

/* A lista aberta é desenhada pelo sistema, não pela página: sem isto o menu
   sai com fundo branco e texto pérola em cima. */
.filtros__select option {
  background: #141414;
  color: var(--perola);
}

.filtros__buscar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  height: 3rem;
  padding: 0 2rem;
  border: 0;
  border-radius: calc(var(--border-radius) * .35);
  background: var(--amarelo);
  color: #000;
  cursor: pointer;
  transition: filter .25s ease;
}

.filtros__buscar:hover { filter: brightness(1.12); }

.filtros__limpar {
  margin-top: 1rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  transition: opacity .25s ease;
}

.filtros__limpar:hover { opacity: 1; }

.estoque__vazio {
  width: 100%;
  max-width: 34rem;
  opacity: .6;
}

.estoque__vazio[hidden] { display: none; }

@media (max-width: 560px) {
  .filtros__campo,
  .filtros__campo--largo,
  .filtros__buscar { flex: 1 1 100%; }
  .filtros__marca { flex: 1 1 auto; min-width: 4.6rem; }
}

/* --- modal "venda seu veículo" --------------------------------------------
   Reaproveita a linguagem da ficha cadastral. */
.modal--venda .modal__content {
  width: min(52rem, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--border-radius);
  padding: calc(var(--wrapper-padd) * 1.6) calc(var(--wrapper-padd) * 1.4);
  margin: 6vh 0;
}

.modal--venda .modal__close {
  position: absolute;
  top: var(--wrapper-padd);
  right: var(--wrapper-padd);
  z-index: 4;
  width: 2rem;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.venda__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.1rem 1.6rem;
  width: 100%;
  margin: 2rem 0 1.6rem;
}

.venda__campo--largo { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .venda__campos { grid-template-columns: 1fr; gap: 1.7rem; }
}

.modal--venda .modal__content__form__wrap-input { position: relative; }

.modal--venda .modal__content__form__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: top left;
  font-family: var(--f-izmir);
  font-size: var(--titulo);
  line-height: var(--titulo-lh);
  transition: transform .25s cubic-bezier(.58, .01, .44, 1),
              font-size .25s cubic-bezier(.58, .01, .44, 1);
}

.modal--venda .modal__content__form__label.on {
  transform: translateY(-70%);
  font-size: var(--subtitulo);
}

.modal--venda .modal__content__form__input {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  font-family: var(--f-izmir);
  font-size: var(--titulo);
}

.modal--venda .ficha__acoes { margin-top: 1.4rem; }

/* --- grade do estoque -----------------------------------------------------
   Entra depois da faixa horizontal, onde a página passa a rolar para baixo. */
.estoque__intro {
  width: 100%;
  max-width: 34rem;
  margin: 0 0 2.6rem;
  opacity: .6;
}

.estoque {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem var(--grid-gap);
  width: 100%;
}

@media (max-width: 1200px) { .estoque { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 950px)  { .estoque { grid-template-columns: repeat(2, 1fr); gap: 2.4rem var(--grid-gap); } }
@media (max-width: 560px)  { .estoque { grid-template-columns: 1fr; } }

.estoque__item__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.estoque__item__media { overflow: hidden; }

.estoque__item__media .media__source {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.estoque__item__btn:hover .media__source,
.estoque__item__btn:focus-visible .media__source { transform: scale(1.04); }

.estoque__item__info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .8rem;
  margin-top: 1rem;
}

.estoque__item__num {
  grid-row: 1 / span 2;
  opacity: .4;
  padding-top: .25em;
}

.estoque__item__nome { margin: 0; }
.estoque__item__specs { margin: 0; opacity: .6; }

.estoque__item__preco {
  grid-column: 2;
  margin: .5rem 0 0;
}

/* --- modal do veículo -----------------------------------------------------
   Segue o mesmo arranjo do site original: galeria à esquerda, preço, ficha em grade e as duas chamadas à direita. */
.modal--veiculo .modal__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  width: min(84rem, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--border-radius);
  padding: calc(var(--wrapper-padd) * 1.3) calc(var(--wrapper-padd) * 1.1);
  margin: 6vh 0;
}

/* o .close só é dimensionado dentro de .modal--contact / .modal--media;
   sem isto os dois <span> viram riscas atravessando o modal inteiro */
.modal--veiculo .modal__close {
  position: absolute;
  top: var(--wrapper-padd);
  right: var(--wrapper-padd);
  z-index: 4;
  width: 2rem;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .modal--veiculo .modal__close { width: 1.4rem; }
}

.modal--veiculo .veiculo__nome { margin: 0; padding-right: 3rem; }

.veiculo {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.4rem;
  align-items: start;
}

/* sem isto a faixa de miniaturas (que rola no eixo x) vira o min-content da
   primeira coluna e empurra a ficha para fora do modal */
.veiculo__galeria,
.veiculo__dados { min-width: 0; }

@media (max-width: 950px) { .veiculo { grid-template-columns: 1fr; gap: 1.6rem; } }

.veiculo__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--border-radius) * .5);
  background: rgba(255, 255, 255, .05);
}

.veiculo__foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.veiculo__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  /* o ‹ › herdaria a tinta pérola e sumiria dentro do círculo claro */
  color: #000;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease;
}

.veiculo__seta:hover { background: #fff; }
.veiculo__seta--ant { left: .8rem; }
.veiculo__seta--prox { right: .8rem; }
.veiculo__seta[hidden] { display: none; }

.veiculo__contador {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  padding: .15em .6em;
  border-radius: 2em;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}

.veiculo__miniaturas {
  display: flex;
  gap: .5rem;
  margin-top: .6rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.veiculo__miniaturas[hidden] { display: none; }

.veiculo__mini {
  flex: 0 0 auto;
  width: 5.2rem;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: .3rem;
  overflow: hidden;
  opacity: .45;
  cursor: pointer;
  transition: opacity .25s ease, outline-color .25s ease;
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.veiculo__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veiculo__mini:hover { opacity: .8; }
.veiculo__mini.is-on { opacity: 1; outline-color: var(--amarelo); }

.veiculo__preco { margin: 0 0 1.2rem; }

.veiculo__ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem 1.2rem;
  margin: 0 0 1.6rem;
}

.veiculo__ficha__rotulo {
  font-size: var(--subtitulo);
  text-transform: uppercase;
  opacity: .5;
}

.veiculo__ficha__valor {
  margin: 0;
  font-size: var(--parrafo);
}

.veiculo__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.6rem;
}

.veiculo__cta--sec {
  border-bottom: 1px solid currentColor;
  padding-bottom: .1em;
  opacity: .6;
  transition: opacity .25s ease;
}

.veiculo__cta--sec:hover { opacity: 1; }

.veiculo__resumo { margin: 0 0 1.4rem; opacity: .75; }
.veiculo__resumo[hidden] { display: none; }

.veiculo__bloco { margin-bottom: 1.3rem; }
.veiculo__bloco[hidden] { display: none; }

.veiculo__bloco__titulo {
  margin: 0 0 .5rem;
  opacity: .5;
}

.veiculo__destaques,
.veiculo__opcionais {
  margin: 0;
  padding: 0;
  list-style: none;
}

.veiculo__destaques li { padding: .1rem 0; opacity: .75; }

.veiculo__opcionais {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
}

/* Opcionais na coluna da galeria: a da direita é bem mais alta e sobrava
   um bloco morto aqui. */
.veiculo__bloco--opcionais {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.veiculo__opcionais li {
  padding: .2em .7em;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 2em;
  font-size: var(--subtitulo);
  opacity: .7;
}

/* --- as duas chamadas antes do rodapé -------------------------------------
   Eram só duas fotos soltas, sem legenda e sem link — ninguém sabia para que serviam. */
.mod-media__item--chamada .media__source {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A proporção mora aqui, e não num `style=` no HTML, para poder mudar no
   mobile — inline ela ganharia de qualquer media query. */
.mod-media__item--chamada .media__wrap-source { aspect-ratio: 944 / 406; }

.chamada {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: var(--wrapper-padd);
  text-align: center;
  color: var(--perola);
  background-color: rgba(0, 0, 0, .58);
  transition: background-color .35s ease;
}

.chamada:hover,
.chamada:focus-visible { background-color: rgba(0, 0, 0, .34); }

.chamada__icone {
  width: 2.5rem;
  height: auto;
  margin-bottom: .35rem;
}

.chamada__titulo { display: block; }

.chamada__texto {
  display: block;
  opacity: .82;
}

@media (max-width: 950px) {
  .chamada__icone { width: 2rem; }
}

/* --- mapa -----------------------------------------------------------------
   Ocupa a coluna que estava vazia ao lado do endereço. */
.mapa {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--preto-2);
}

.mapa__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92);
  /* desligado até o clique — ver mapa.js */
  pointer-events: none;
}

.mapa.is-ativo .mapa__frame { pointer-events: auto; }

.mapa__aviso {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  padding: .3em .8em;
  border-radius: 2em;
  background: rgba(0, 0, 0, .72);
  color: var(--perola);
  pointer-events: none;
  transition: opacity .25s ease;
}

.mapa.is-ativo .mapa__aviso { opacity: 0; }

.mapa__rota {
  display: inline-block;
  margin-top: .9rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: .1em;
  opacity: .6;
  transition: opacity .25s ease;
}

.mapa__rota:hover { opacity: 1; }

@media (max-width: 950px) {
  .mapa { aspect-ratio: 4 / 3; margin-bottom: 1.4rem; }
}

/* --- ícones de contato ----------------------------------------------------
   O sprite fica no topo do <body>; aqui só o tamanho e o alinhamento. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icone {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
}

.contato__item {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}


.contato__linha {
  display: flex;
  align-items: flex-start;
  gap: .6em;
}

/* o ícone acompanha a primeira linha do parágrafo, não o meio do bloco */
.contato__linha .icone {
  margin-top: .38em;
  opacity: .65;
}

.contato__linha a {
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.contato__linha a:hover { border-bottom-color: currentColor; }

/* dentro do botão o ícone fica antes do texto, na mesma linha de base */
.icone--btn {
  width: 1.05em;
  height: 1.05em;
  margin-right: .5em;
  vertical-align: -.15em;
}

/* --- aviso de rolagem -----------------------------------------------------
   A home tem dois sentidos de leitura: a faixa horizontal anda para o lado e o resto desce. */
/* O lugar muda com o modo: no meio da parte vertical a dica cairia em cima
   dos botões que a página centraliza. */
.rolagem {
  position: fixed;
  bottom: calc(var(--wrapper-padd) * 1.4);
  left: var(--wrapper-padd);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 2em;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  transition: opacity .4s ease, transform .4s ease, background-color .25s ease, border-color .25s ease;
}

.rolagem:hover,
.rolagem:focus-visible {
  background: rgba(0, 0, 0, .9);
  border-color: rgba(255, 255, 255, .4);
  outline: none;
}

.rolagem:active { transform: scale(.97); }
.rolagem[data-direcao="lado"]:active { transform: translateX(-50%) scale(.97); }

.rolagem[data-direcao="lado"] {
  left: 50%;
  transform: translateX(-50%);
}

/* Escondido é escondido: sem o pointer-events o botão continuaria clicável
   por cima do rodapé, invisível. */
.rolagem.is-fora {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.rolagem[data-direcao="lado"].is-fora {
  transform: translateX(-50%) translateY(1rem);
}

.rolagem__mouse {
  width: .9em;
  height: 1.35em;
  opacity: .55;
}

.rolagem__seta {
  width: 1.15em;
  height: 1.15em;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* Uma seta só: em pé aponta para baixo, girada -90° aponta para a direita,
   que é para onde a leitura avança. */
.rolagem[data-direcao="baixo"] .rolagem__seta { transform: rotate(0deg); }
.rolagem[data-direcao="lado"]  .rolagem__seta { transform: rotate(-90deg); }

/* O translateY vem depois do rotate, no eixo já girado: o empurrão sai sempre
   para onde a ponta aponta. */
.rolagem[data-direcao="baixo"] .rolagem__seta { animation: rolagem-desce 1.9s ease-in-out infinite; }
.rolagem[data-direcao="lado"]  .rolagem__seta { animation: rolagem-lado 1.9s ease-in-out infinite; }

@keyframes rolagem-desce {
  0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
  30%           { transform: rotate(0deg) translateY(.28em); }
}

@keyframes rolagem-lado {
  0%, 60%, 100% { transform: rotate(-90deg) translateY(0); }
  30%           { transform: rotate(-90deg) translateY(.28em); }
}

@media (prefers-reduced-motion: reduce) {
  .rolagem__seta { animation: none; }
}

/* No celular a rolagem já é o gesto natural: o aviso só ocuparia tela. */
@media (max-width: 950px) {
  .rolagem { display: none; }
}

/* --- MOBILE ---------------------------------------------------------------
   Todo título de display tem teto em vw, calculado para a palavra mais longa
   caber: font-size <= largura / (N letras x 0,64em). */
@media (max-width: 950px) {

  /* Uma coluna só. */
  main .mod-scroll__intro__wrap-titles {
    grid-template-columns: 1fr;
    grid-gap: .1em 0;
  }

  main .mod-scroll__intro__title {
    white-space: normal;
    font-size: min(1.45rem, 6.4vw);
  }

  main .mod-scroll__intro__title .splitline { white-space: normal; }

  /* "TRANSPARÊNCIA" tem 13 letras: 13 × 0,64 = 8,3em. */
  main .mod-scroll__terms__term__title {
    font-size: min(3.3rem, 9.8vw);
    white-space: nowrap;
    -webkit-hyphens: none;
    hyphens: none;
  }

  /* os termos entram deslocados na horizontal; sem o recorte esse
     deslocamento viraria rolagem lateral da página */
  main .mod-scroll__terms { overflow-x: clip; }

  /* As duas chamadas antes do rodapé, uma embaixo da outra. */
  main .mod-media--double { flex-wrap: wrap; }

  main .mod-media--double .mod-media__item--chamada { width: 100%; }

  .mod-media__item--chamada .media__wrap-source { aspect-ratio: 16 / 7; }

  /* A caixa da foto é uma janela retrato (62svh) e a foto é deitada (4:3): com
     `cover` sobrava um talho no meio do carro. `contain` encaixa a foto
     inteira dentro da mesma caixa, sem mexer em altura nenhuma — o resto do
     item continua exatamente como o tema desenhou. */
  main .mod-scroll__projects__item__image .media__source {
    position: relative;
    top: 0;
    height: 100%;
    transform: none;
    object-fit: contain;
  }
}

/* Nenhuma palavra hifenizada no meio, em nenhum título — se não couber, o
   teto em vw acima é que tem de baixar. */
.anima__title,
.mod-scroll__terms__term__title,
.mod-scroll__text__title,
.last-item__content__title,
.mod-title--lines .line {
  -webkit-hyphens: none;
  hyphens: none;
}

/* --- faixa de marcas ------------------------------------------------------ */
.marcas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5vw;
  width: 100%;
}

/* Os sete logotipos são PNG colorido sobre transparência. */
.marcas img {
  width: 2.6vw;
  min-width: 34px;
  height: auto;
  filter: grayscale(1) brightness(1.75);
  opacity: .8;
  transition: opacity .3s ease, filter .3s ease;
}

.marcas img:hover {
  filter: none;
  opacity: 1;
}

/* O menu do rodapé sobe 10px no desktop. */
@media (min-width: 951px) {
  main .mod-footer__footer__legal { top: calc(55% - 10px); }
}

/* --- assinatura do rodapé -------------------------------------------------
   Substitui o lettering em SVG do tema original (marca de terceiros) pela silhueta da marca sobre um wordmark tipográfico, os dois centralizados. */
main .mod-footer__content { min-height: 0; }

main .mod-footer__bg.mod-footer__wordmark {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  line-height: .8;
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
}

/* Mesmo PNG do hero: traço branco sobre retângulo preto opaco, apagado pelo mix-blend-mode. */
.mod-footer__marca {
  display: block;
  width: 44vw;
  max-width: 40rem;
  height: auto;
  margin: -5vw 0 -8vw;
  mix-blend-mode: screen;
  opacity: .92;
}

.mod-footer__wordmark__top {
  display: block;
  font-size: 12vw;
  text-transform: uppercase;
}

.mod-footer__wordmark__bottom {
  display: block;
  font-family: var(--f-edit-italic);
  font-size: 5.2vw;
  opacity: .45;
}

/* A assinatura da marca, fechando o conjunto silhueta + wordmark. */
.mod-footer__wordmark__tag {
  display: block;
  margin-top: 1.6vw;
  font-size: 1.35vw;
  letter-spacing: .42em;
  text-indent: .42em;
  line-height: 1.4;
  opacity: .6;
}

.mod-footer__wordmark__tag i {
  font-style: normal;
  opacity: .5;
}

@media (max-width: 767px) {
  .mod-footer__marca { width: 68vw; margin: -7vw 0 -12vw; }
  .mod-footer__wordmark__top { font-size: 22vw; }
  .mod-footer__wordmark__bottom { font-size: 9vw; }
  .mod-footer__wordmark__tag { font-size: 2.6vw; letter-spacing: .3em; text-indent: .3em; margin-top: 3vw; }
  .marcas { gap: 6vw; }
  .marcas img { width: 9vw; }
}