/* ASL Representações — componentes
   Blocos reutilizáveis. Novas páginas devem reaproveitar estas classes. */

/* Botões -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 var(--e-5);
  border: 2px solid transparent;
  background: var(--laranja);
  color: var(--texto-sobre-laranja);
  font-family: var(--fonte-titulo);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

.btn:hover {
  background: var(--laranja-claro);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(239, 104, 7, 0.7);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--bloco {
  width: 100%;
}

/* Dois botões no site inteiro:
   - .btn: ação principal (cotação), laranja com texto grafite;
   - .btn--zap: WhatsApp, branco com texto petróleo, que fica laranja no hover,
     no clique e no foco. Petróleo sobre o laranja: 5,2:1. */
.btn--zap {
  gap: 0.6rem;
  background: var(--branco);
  border-color: var(--petroleo);
  color: var(--petroleo);
}

.btn--zap:hover,
.btn--zap:active,
.btn--zap:focus-visible {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--petroleo);
}

/* Em fundo escuro a borda some no branco do botão */
.secao--escura .btn--zap,
.hero__zap .btn--zap,
.final__chamada .btn--zap {
  border-color: var(--branco);
}

.btn__icone {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

/* No celular os botões empilhados ficam com a mesma largura */
@media (max-width: 559px) {
  .botoes .btn {
    width: 100%;
  }
}

.btn[disabled] {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.link-apoio {
  display: inline-block;
  color: var(--petroleo-medio);
  font-size: var(--t-sm);
  font-weight: 600;
}

.secao--escura .link-apoio,
.topo .link-apoio {
  color: var(--azul-claro);
}

/* Cabeçalho ----------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--petroleo-fundo);
  border-bottom: 1px solid var(--linha-escura);
}

.topo__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 4.5rem;
}

.topo__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.topo__logo img {
  width: 148px;
  height: auto;
}

/* Topo: o mesmo botão de WhatsApp, em tamanho menor */
.topo__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 var(--e-3);
  background: var(--branco);
  border: 2px solid var(--branco);
  color: var(--petroleo);
  font-family: var(--fonte-titulo);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao);
}

.topo__acao svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.topo__acao:hover,
.topo__acao:active,
.topo__acao:focus-visible {
  background: var(--laranja);
  border-color: var(--laranja);
}

/* Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--petroleo-fundo);
  color: var(--texto-claro);
  overflow: hidden;
}

/* Paletes de expedição envoltos em filme: o lado do texto fica sob o degradê
   e o papelão e os paletes de madeira aparecem em volta do formulário. */
.hero__foto,
.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__foto img {
  object-fit: cover;
  object-position: 50% 50%;
}

/* Coluna única (celular e tablet): a foto fica só na primeira tela, atrás do
   texto, e se dissolve no fundo antes do formulário. Esticada pelo hero inteiro
   ela era ampliada 2,4× e virava borrão. */
@media (max-width: 999px) {
  .hero__foto {
    bottom: auto;
    height: min(100svh, 60rem);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .hero__foto img {
    object-position: 62% 50%;
  }
  .hero .sobretitulo {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
}

.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 26, 41, 0.82) 0%,
    rgba(2, 26, 41, 0.9) 100%
  );
}

@media (min-width: 1000px) {
  .hero__foto::after {
    background: linear-gradient(
      100deg,
      rgba(2, 26, 41, 0.96) 0%,
      rgba(2, 26, 41, 0.86) 45%,
      rgba(2, 26, 41, 0.45) 68%,
      rgba(2, 26, 41, 0.25) 100%
    );
  }
}

/* Corte diagonal na base: triângulo na cor da seção seguinte */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--corte-altura);
  background: var(--petroleo);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hero__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-6);
  padding-top: clamp(2rem, 1rem + 3vw, 3.25rem);
  padding-bottom: calc(var(--corte-altura) + var(--etiqueta-sobe) + var(--e-5));
}

@media (min-width: 1000px) {
  .hero__wrap {
    grid-template-columns: minmax(0, 1.1fr) minmax(23rem, 0.9fr);
    gap: var(--e-7);
    align-items: center;
  }
}

.hero h1 {
  color: var(--branco);
}

.hero__texto {
  margin-top: var(--e-4);
  max-width: 50ch;
  font-size: var(--t-md);
  color: var(--texto-claro);
}

/* No mobile o formulário fica abaixo da dobra; o botão leva até ele. */
.hero__cta {
  margin-top: var(--e-4);
}

@media (min-width: 1000px) {
  .hero__cta {
    display: none;
  }
}

.hero__zap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-claro-suave);
}

.hero__pontos {
  margin-top: var(--e-5);
  display: grid;
  gap: var(--e-3);
  list-style: none;
}

.hero__pontos li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--t-sm);
  color: var(--texto-claro);
}

.hero__pontos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 1.125rem;
  height: 4px;
  background: var(--laranja);
  transform: skewX(var(--corte));
}

.hero__pontos b {
  color: var(--branco);
  font-weight: 600;
}

/* Entrada do hero: título, texto e formulário em sequência curta */
@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.hero__conteudo > *,
.hero .form-cartao {
  animation: entrar 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__conteudo > :nth-child(2) {
  animation-delay: 60ms;
}
.hero__conteudo > :nth-child(3) {
  animation-delay: 120ms;
}
.hero__conteudo > :nth-child(n + 4) {
  animation-delay: 180ms;
}
.hero .form-cartao {
  animation-delay: 200ms;
}

/* Etiqueta de condições ----------------------------------------------- */
/* Assinatura da página: os números de fornecimento no formato de uma
   etiqueta de expedição, sobreposta ao corte do hero. */

.etiqueta {
  display: flow-root;
  position: relative;
  z-index: 2;
  background: var(--petroleo);
}

.etiqueta__cartao {
  margin-top: calc(-1 * (var(--corte-altura) + var(--etiqueta-sobe)));
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Ficha: cartão branco com cabeçalho grafite e dados em células, no formato
   de etiqueta de expedição. Usada na etiqueta de condições e na micragem. */
.ficha {
  background: var(--branco);
  color: var(--grafite);
}

.ficha__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  max-width: none;
  padding: 0.625rem var(--e-4);
  background: var(--grafite);
  color: var(--branco);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ficha__cabeca span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.ficha__cabeca span:first-child::before {
  content: "";
  width: 1.25rem;
  height: 4px;
  background: var(--laranja);
  transform: skewX(var(--corte));
}

.ficha__cabeca span:last-child {
  color: var(--azul-claro);
}

.ficha__dados {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.ficha__dados > div {
  padding: var(--e-3) var(--e-4) var(--e-4);
  border-bottom: 1px dashed var(--linha-campo);
}

.ficha__dados > div:nth-child(odd) {
  border-right: 1px dashed var(--linha-campo);
}

.ficha__dados > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

@media (min-width: 720px) {
  .ficha__dados {
    grid-template-columns: repeat(4, 1fr);
  }
  .ficha__dados > div {
    border-bottom: 0;
    border-right: 1px dashed var(--linha-campo);
  }
  .ficha__dados > div:last-child {
    border-right: 0;
  }
}

/* Detalhe menor abaixo do valor (ex.: quais são as normas ISO) */
.ficha dd small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
  white-space: normal;
  color: var(--texto-suave);
}

.ficha dt {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.ficha dd {
  margin-top: var(--e-1);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: 800;
  font-stretch: var(--largura-h1);
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .ficha__cabeca span:last-child {
    display: none;
  }
  .etiqueta .ficha__dados > div {
    padding: var(--e-2) var(--e-3) var(--e-3);
  }
  .etiqueta .ficha dd {
    font-size: 1.125rem;
    white-space: nowrap;
  }
}

/* Formulário ---------------------------------------------------------- */

.form-cartao {
  background: var(--branco);
  border-top: 5px solid var(--laranja);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  color: var(--texto);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

/* O título do formulário é H2 no hero e H3 na chamada final; mesmo visual */
.form-cartao h2,
.form-cartao h3 {
  font-size: var(--t-xl);
  font-weight: 800;
  font-stretch: var(--largura-h2);
  line-height: 1;
  text-transform: uppercase;
}

.form-cartao__apoio {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.campo {
  margin-top: 0.875rem;
}

.campo label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ardosia);
}

.campo__opcional {
  font-weight: 400;
}


.campo input,
.campo select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0 0.875rem;
  background: var(--branco);
  border: 1px solid var(--linha-campo);
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input::placeholder {
  color: #6b7885;
  font-size: var(--t-sm);
}

.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ardosia) 50%),
    linear-gradient(135deg, var(--ardosia) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.campo input:hover,
.campo select:hover {
  border-color: var(--ardosia);
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: inset 0 0 0 1px var(--laranja), 0 0 0 3px rgba(239, 104, 7, 0.18);
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] {
  border-color: #c0392b;
}

.campo__erro {
  display: none;
  margin-top: 0.3rem;
  font-size: var(--t-xs);
  color: #b03222;
}

.campo__erro.visivel {
  display: block;
}

.campos-duplos {
  display: grid;
  column-gap: var(--e-3);
}

@media (min-width: 520px) {
  .campos-duplos {
    grid-template-columns: 1fr 1fr;
  }
}

.form-cartao .btn {
  margin-top: var(--e-4);
}

/* Pedido mínimo logo acima do botão: filtra quem compra abaixo de 300 kg */
.form-cartao__minimo {
  position: relative;
  margin-top: var(--e-4);
  padding-left: 1.5rem;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--texto);
}

.form-cartao__minimo::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.9rem;
  height: 0.25rem;
  background: var(--laranja);
  transform: skewX(var(--corte));
}

.form-cartao__minimo + .btn {
  margin-top: var(--e-2);
}

.form-cartao__nota {
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  color: var(--ardosia);
}

.form-cartao__falha {
  display: none;
  margin-top: var(--e-3);
  padding: var(--e-3);
  background: #fdf0ec;
  border-left: 4px solid var(--laranja);
  font-size: var(--t-sm);
}

.form-cartao__falha.visivel {
  display: block;
}

.form-cartao__falha .btn {
  display: flex;
  margin-top: var(--e-2);
}

/* Fotos --------------------------------------------------------------- */
/* Canto inferior direito cortado no ângulo da marca. */

.dividido__foto img,
.rep__foto {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 4rem),
    calc(100% - 1.8rem) 100%,
    0 100%
  );
}

/* Seção dividida: foto + conteúdo ------------------------------------- */

.dividido {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 960px) {
  .dividido {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--e-7);
  }
  /* Foto à direita */
  .dividido--inverso {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .dividido--inverso .dividido__foto {
    order: 2;
  }
}

.dividido__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--petroleo);
}

@media (min-width: 960px) {
  .dividido__foto img {
    aspect-ratio: 4 / 5;
  }
}

.dividido .secao__cabeca {
  margin-bottom: var(--e-5);
}

/* Diferenciais -------------------------------------------------------- */

.diferenciais {
  display: grid;
  gap: var(--e-4) var(--e-5);
  list-style: none;
}

@media (min-width: 600px) {
  .diferenciais {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .diferenciais--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 860px) {
  .diferenciais--3 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--e-5);
  }
}

.diferenciais li {
  padding-top: var(--e-3);
  border-top: 2px solid var(--grafite);
}

.diferenciais h3 {
  font-size: var(--t-md);
}

.diferenciais p {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

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

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: var(--borda);
}

.cartao__img {
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: var(--petroleo);
}

@media (min-width: 720px) {
  .cartao__img {
    aspect-ratio: 4 / 3;
  }
}

.cartao__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--e-4);
}

.cartao__corpo p {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.cartao__corpo p {
  margin-bottom: var(--e-3);
}

.cartao__corpo .cartao__uso {
  margin: auto 0 0;
  padding-top: var(--e-3);
  border-top: var(--borda);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.02em;
  color: var(--ardosia);
}

/* Outras linhas (shrink, polipropileno): cartão horizontal com foto ----- */

.linhas {
  margin-top: var(--e-6);
}

.linhas__cabeca {
  display: grid;
  gap: var(--e-1);
  margin-bottom: var(--e-4);
  padding-top: var(--e-4);
  border-top: 2px solid var(--grafite);
}

@media (min-width: 860px) {
  .linhas__cabeca {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--e-5);
  }
}

.linhas__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 800;
  font-stretch: var(--largura-h2);
  line-height: 1.15;
}

.linhas__cabeca p:not(.linhas__titulo) {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.linhas__grade {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 980px) {
  .linhas__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

.linha {
  display: grid;
  background: var(--branco);
  border: var(--borda);
}

@media (min-width: 560px) {
  .linha {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.linha__arte {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--petroleo);
  overflow: hidden;
}

/* Lado a lado: a foto acompanha a altura do texto */
@media (min-width: 560px) {
  .linha__arte {
    aspect-ratio: auto;
    min-height: 13rem;
  }
}

.linha__arte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linha__corpo {
  display: flex;
  flex-direction: column;
  padding: var(--e-4);
}

.linha__tipo {
  margin-bottom: 0.35rem;
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petroleo-medio);
}

.linha__corpo p {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.linha__corpo .linha__uso {
  margin: var(--e-3) 0 var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--borda);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.02em;
  color: var(--ardosia);
}

.linha__corpo .btn {
  margin-top: auto;
  padding-inline: var(--e-3);
}

/* Sinais (dores): cards com ícone ---------------------------------- */

.sinais {
  display: grid;
  gap: var(--e-3);
  list-style: none;
}

@media (min-width: 640px) {
  .sinais {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .sinais {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sinal {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: rgba(2, 26, 41, 0.6);
  border: 1px solid var(--linha-escura);
  border-top: 3px solid var(--laranja);
}

.sinal__icone {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--laranja);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sinal h3 {
  margin-top: var(--e-1);
  font-size: var(--t-md);
  line-height: 1.3;
}

.sinal p {
  font-size: var(--t-sm);
  color: var(--texto-claro-suave);
}

/* No celular: ícone ao lado do texto, card mais baixo */
@media (max-width: 639px) {
  .sinal:not(.sinal--chamada) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--e-3);
    row-gap: 0.25rem;
    padding: var(--e-3);
  }
  .sinal:not(.sinal--chamada) .sinal__icone {
    grid-row: span 2;
    width: 1.75rem;
    height: 1.75rem;
  }
  .sinal h3 {
    margin-top: 0;
  }
}

/* Sexto card: fecha a grade com a chamada para comparar */
.sinal--chamada {
  justify-content: space-between;
  background: transparent;
  border: 1px dashed rgba(163, 187, 199, 0.45);
  border-top: 3px solid var(--laranja);
}

.sinal .sinal__chamada {
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--branco);
}

.sinal--chamada .btn {
  align-self: stretch;
  padding-inline: var(--e-3);
}

/* Passos -------------------------------------------------------------- */

.passos {
  display: grid;
  gap: var(--e-5);
  list-style: none;
  counter-reset: passo;
}

@media (min-width: 860px) {
  .passos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.passos li {
  counter-increment: passo;
  padding-top: var(--e-3);
  border-top: 3px solid var(--laranja);
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: var(--t-2xl);
  font-weight: 800;
  font-stretch: var(--largura-h1);
  color: var(--petroleo-medio);
  line-height: 1;
}

.passos--perguntas li::before {
  content: "Pergunta " counter(passo);
  margin-bottom: var(--e-2);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petroleo-medio);
}

.passos p {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* Representante ------------------------------------------------------- */

.rep {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 900px) {
  .rep {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--e-7);
  }
}

.rep__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--petroleo);
}

@media (max-width: 899px) {
  .rep__moldura {
    max-width: 22rem;
  }
}

.rep__texto {
  margin-top: var(--e-3);
}

.rep__citacao {
  margin: var(--e-5) 0;
  padding-left: var(--e-4);
  border-left: 4px solid var(--laranja);
}

.rep__citacao blockquote {
  font-family: var(--fonte-titulo);
  font-size: var(--t-xl);
  font-weight: 800;
  font-stretch: var(--largura-h2);
  line-height: 1.1;
}

.rep__citacao figcaption {
  margin-top: var(--e-1);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.rep__dados {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-4) 0 var(--e-5);
  padding-top: var(--e-4);
  border-top: var(--borda);
  list-style: none;
}

@media (min-width: 600px) {
  .rep__dados {
    grid-template-columns: repeat(3, auto);
    gap: var(--e-5);
  }
}

.rep__dados b {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 800;
}

.rep__dados span {
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

/* Equipe comercial: seção com os vendedores, depois da cotação final ---- */

.equipe {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}

.equipe__cabeca {
  display: grid;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

@media (min-width: 860px) {
  .equipe__cabeca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--e-6);
  }
}

.equipe__cabeca h2 {
  font-size: var(--t-xl);
}

.equipe__cabeca p {
  color: var(--texto-suave);
}

.equipe__lista {
  display: grid;
  gap: var(--e-3);
  list-style: none;
}

@media (min-width: 860px) {
  .equipe__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vendedor {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-3);
  background: var(--branco);
  border: var(--borda);
  border-top: 3px solid var(--laranja);
  color: var(--texto);
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.vendedor:hover {
  border-color: var(--grafite);
  border-top-color: var(--laranja);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(3, 34, 53, 0.55);
}

/* Inicial num bloco petróleo com o canto cortado no ângulo da marca */
.vendedor__inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--petroleo);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 800;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 78% 100%, 0 100%);
  transition: background var(--transicao), color var(--transicao);
}

.vendedor:hover .vendedor__inicial {
  background: var(--laranja);
  color: var(--texto-sobre-laranja);
}

.vendedor__dados {
  display: grid;
  min-width: 0;
}

.vendedor__dados b {
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 800;
  line-height: 1.2;
}

.vendedor__dados small {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.vendedor__numero {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-family: var(--fonte-dado);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--petroleo-medio);
}

/* Seta de ação: avança no hover */
.vendedor::after {
  content: "→";
  margin-left: auto;
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--laranja-forte);
  transition: transform var(--transicao);
}

.vendedor:hover::after {
  transform: translateX(4px);
}

.vendedor__numero .btn__icone {
  width: 1rem;
  height: 1rem;
}

/* Seção com foto de fundo --------------------------------------------- */

.secao--foto {
  background-color: var(--petroleo);
  background-image: linear-gradient(
      180deg,
      rgba(3, 34, 53, 0.9),
      rgba(3, 34, 53, 0.94)
    ),
    var(--foto, none);
  background-size: cover;
  background-position: center;
}

@media (min-width: 900px) {
  .secao--foto {
    background-image: linear-gradient(
        90deg,
        var(--petroleo) 45%,
        rgba(3, 34, 53, 0.75) 65%,
        rgba(3, 34, 53, 0.25) 100%
      ),
      var(--foto, none);
    background-size: cover, auto 100%;
    background-position: center, right center;
    background-repeat: no-repeat;
  }
}

/* Certificações ------------------------------------------------------- */

.selos {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-4);
  list-style: none;
}

/* Celular: uma linha compacta por selo, código à esquerda */
@media (max-width: 559px) {
  .selos li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
  }
  .selos span {
    margin-top: 0;
    text-align: right;
  }
}

@media (min-width: 560px) {
  .selos {
    grid-template-columns: repeat(3, minmax(0, 13rem));
  }
}

@media (min-width: 1000px) {
  .selos {
    grid-template-columns: repeat(4, minmax(0, 13rem));
  }
}

.selos li {
  padding: var(--e-3);
  background: rgba(2, 26, 41, 0.72);
  border: 1px solid rgba(163, 187, 199, 0.35);
  border-top: 3px solid var(--laranja);
  font-family: var(--fonte-dado);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--branco);
}

.selos span {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--fonte-texto);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--azul-claro);
}

/* Setores ------------------------------------------------------------- */

.setores {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border: var(--borda);
  list-style: none;
}

@media (min-width: 640px) {
  .setores {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .setores {
    grid-template-columns: repeat(3, 1fr);
  }
}

.setores li {
  padding: var(--e-4);
  background: var(--branco);
}

.setores b {
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 700;
}

.setores span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* Região: mapa de fundo da área de entrega --------------------------- */
/* Pontos da região (imagem gerada da malha IBGE, desfocada) com arcos saindo
   de Várzea Paulista para as principais cidades. O fundo é decorativo; o
   conteúdo e a lista de cidades ficam no texto. */

.regiao {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Caixa do mapa na proporção da imagem (1600×925). A base fica a 62,5% da
   largura; --alvo-x diz onde ela deve cair na seção. */
.regiao__fundo {
  --mapa-w: max(115%, 1100px);
  --alvo-x: 70%;
  position: absolute;
  z-index: -2; /* abaixo do degradê (.regiao::before), que protege o texto */
  top: 50%;
  left: calc(var(--alvo-x) - 0.625 * var(--mapa-w));
  width: var(--mapa-w);
  aspect-ratio: 1600 / 925;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 48% 50% at 62.5% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 50% at 62.5% 50%, #000 55%, transparent 100%);
}

/* Degradê entre o mapa e o texto: sólido até o fim do bloco de texto (34rem a
   partir da margem do .wrap) e some em seguida, liberando o mapa à direita. */
.regiao::before {
  --texto-fim: calc(max(0px, (100% - var(--largura)) / 2) + var(--e-4) + 34rem);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--petroleo) 0,
    var(--petroleo) calc(var(--texto-fim) + var(--e-3)),
    rgba(3, 34, 53, 0) calc(var(--texto-fim) + 8rem)
  );
}

.regiao__arcos {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.regiao__pontos {
  opacity: 0.9;
}

/* Sem non-scaling-stroke: com ele o tracejado é medido em pixels de tela e o
   pathLength="1" deixa de bater quando o mapa é ampliado (sobrava um pedaço do
   arco junto ao destino). A espessura fica em ~2px de tela dividindo pela escala
   do SVG, que o mapa.js informa em --mapa-escala. */
.arco path {
  fill: none;
  stroke: var(--laranja);
  stroke-width: calc(2px / var(--mapa-escala, 1));
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(239, 104, 7, 0.9));
}

.arco__carga {
  fill: #ffd2ad;
  filter: drop-shadow(0 0 6px rgba(239, 104, 7, 1));
}

.arco__destino {
  fill: var(--laranja);
}

.arco__pulso {
  fill: none;
  stroke: var(--laranja);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.regiao__base circle {
  fill: var(--branco);
}

.regiao__base .regiao__base-pulso {
  fill: rgba(239, 104, 7, 0.35);
}

.regiao__texto {
  position: relative;
  max-width: 34rem;
}

.regiao .secao__cabeca {
  margin-bottom: var(--e-5);
}

/* Cidades por eixo: rótulo em mono, cidades em linha separadas por ponto */
.eixos {
  display: grid;
  gap: var(--e-4) var(--e-5);
  padding-block: var(--e-4);
  border-block: 1px dashed rgba(163, 187, 199, 0.35);
}

@media (min-width: 560px) {
  .eixos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.eixo h3 {
  position: relative;
  padding-left: 1rem;
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--azul-claro);
}

.eixo h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--laranja);
}

.eixo h3 span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--fonte-texto);
  letter-spacing: 0;
  text-transform: none;
  color: var(--laranja-claro);
}

.eixo__cidades {
  margin-top: 0.4rem;
  padding-left: 1rem;
  list-style: none;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--texto-claro);
}

.eixo__cidades li {
  display: inline;
}

.eixo__cidades li + li::before {
  content: " · ";
  content: " · " / "";
  color: var(--azul-claro);
}

/* Tablet e celular: mapa atrás do bloco de números, mais apagado,
   com a base centralizada. */
@media (max-width: 959px) {
  .regiao {
    padding-bottom: clamp(16rem, 60vw, 24rem);
  }
  .regiao::before {
    background: linear-gradient(
      180deg,
      var(--petroleo) 0%,
      rgba(3, 34, 53, 0.9) 45%,
      rgba(3, 34, 53, 0) 75%
    );
  }
  .regiao__fundo {
    --mapa-w: max(180%, 640px);
    --alvo-x: 50%;
    top: auto;
    bottom: -8%;
    transform: none;
  }
}

/* FAQ ----------------------------------------------------------------- */

.faq {
  max-width: 52rem;
  border-top: 2px solid var(--grafite);
}

.faq details {
  border-bottom: 1px solid #c9d5db;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-4);
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--transicao);
}

.faq summary:hover {
  color: var(--petroleo-medio);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--laranja);
  border-bottom: 2px solid var(--laranja);
  transform: rotate(45deg) translateY(-0.2rem);
  transition: transform var(--transicao);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-0.2rem);
}

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p {
    animation: entrar 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

.faq p {
  padding-bottom: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

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

.final {
  position: relative;
  background: var(--petroleo);
  color: var(--texto-claro);
}

/* Corte diagonal no topo, paralelo ao da base do hero */
.final::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: var(--corte-altura);
  background: var(--gelo);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.final__wrap {
  position: relative;
  display: grid;
  gap: var(--e-6);
  padding-top: calc(var(--secao-y) + var(--corte-altura) * 0.5);
  padding-bottom: var(--secao-y);
}

@media (min-width: 1000px) {
  .final__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.9fr);
    gap: var(--e-7);
    align-items: center;
  }
}

.final__chamada h2 {
  color: var(--branco);
}

.final__texto {
  margin-top: var(--e-3);
  font-size: var(--t-md);
  color: var(--texto-claro);
}

/* Rodapé -------------------------------------------------------------- */

.rodape {
  background: var(--grafite);
  color: var(--azul-claro);
  font-size: var(--t-sm);
}

.rodape__wrap {
  display: grid;
  gap: var(--e-5);
  padding-block: var(--e-6);
}

@media (min-width: 760px) {
  .rodape__wrap {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.rodape img {
  width: 150px;
  margin-bottom: var(--e-3);
}

.rodape h3 {
  margin-bottom: var(--e-2);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--branco);
}

.rodape a {
  color: var(--branco);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding-block: var(--e-3);
  border-top: 1px solid var(--linha-escura);
  font-size: var(--t-xs);
}

/* Barra fixa de WhatsApp (mobile) ------------------------------------- */

.barra-zap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 3.5rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--branco);
  border-top: 3px solid var(--laranja);
  box-shadow: 0 -8px 24px -12px rgba(3, 34, 53, 0.45);
  color: var(--petroleo);
  font-family: var(--fonte-titulo);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transicao);
}

.barra-zap:hover,
.barra-zap:active,
.barra-zap:focus-visible {
  background: var(--laranja);
}

.barra-zap svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

@media (min-width: 900px) {
  .barra-zap {
    display: none;
  }
}

@media (max-width: 899px) {
  body {
    padding-bottom: 3.5rem;
  }
}

/* No mobile a barra fixa já cobre o contato; o link do topo sai para não quebrar em duas linhas. */
@media (max-width: 560px) {
  .topo__acao {
    display: none;
  }
}

/* Especificação técnica ----------------------------------------------- */

.especificacao__rodape {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
  align-items: start;
}

@media (min-width: 900px) {
  .especificacao__rodape {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-6);
  }
}

.micragem {
  box-shadow: 0 24px 48px -28px rgba(3, 34, 53, 0.45);
}

.micragem__valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.micragem__valores li {
  padding: var(--e-4) var(--e-3) var(--e-1);
  font-family: var(--fonte-titulo);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  font-weight: 800;
  font-stretch: var(--largura-h1);
  line-height: 1;
  text-align: center;
}

.micragem__valores li + li {
  border-left: 1px dashed var(--linha-campo);
}

.micragem__unidade {
  max-width: none;
  padding-bottom: var(--e-3);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.micragem__nota {
  max-width: none;
  padding: var(--e-3) var(--e-4);
  border-top: 1px dashed var(--linha-campo);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.especificacao__texto h3 {
  font-size: var(--t-md);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-top: var(--e-2);
  list-style: none;
}

.chips li {
  padding: 0.35rem 0.75rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  font-size: var(--t-xs);
  font-weight: 500;
}

/* Rendimento: custo por palete ---------------------------------------- */

.rendimento {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 960px) {
  .rendimento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.rendimento .secao__cabeca {
  margin-bottom: var(--e-4);
}

.rendimento__texto + .rendimento__texto {
  margin-top: var(--e-3);
}

.rendimento__texto {
  color: var(--texto-claro);
}

.conta {
  padding: var(--e-5);
  background: rgba(2, 26, 41, 0.6);
  border: 1px solid var(--linha-escura);
  border-top: 4px solid var(--laranja);
}

.conta__titulo {
  font-size: var(--t-md);
}

.conta__formula {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e-2);
  margin-block: var(--e-4);
}

/* "=" e resultado ocupam a largura toda, abaixo da divisão */
.conta__formula > :nth-child(4),
.conta__termo--resultado {
  grid-column: 1 / -1;
}

.conta__formula > :nth-child(4) {
  justify-self: center;
  line-height: 1;
}

.conta__termo {
  display: flex;
  flex-direction: column;
  padding: var(--e-2) var(--e-3);
  border: 1px dashed rgba(163, 187, 199, 0.45);
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 800;
  font-stretch: var(--largura-h1);
  line-height: 1.1;
  color: var(--branco);
}

.conta__termo small {
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

.conta__termo--resultado {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--grafite);
}

.conta__termo--resultado small {
  color: var(--grafite);
}

.conta__operador {
  font-family: var(--fonte-titulo);
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--laranja);
}

.conta__texto {
  font-size: var(--t-sm);
  color: var(--texto-claro-suave);
}

.conta__texto + .conta__texto {
  margin-top: var(--e-2);
}

.conta .botoes {
  margin-top: var(--e-4);
}

/* Aplicação: parágrafo de apoio ------------------------------------- */

.aplicacao__texto {
  max-width: 46rem;
  margin-top: calc(-1 * var(--e-3));
  font-size: var(--t-md);
  color: var(--texto-suave);
}

/* Cores do jumbo ------------------------------------------------------ */

.cores {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}

@media (min-width: 960px) {
  .cores {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--e-6);
  }
}

/* Slide de filmes coloridos ------------------------------------------- */

.cores__midia {
  display: grid;
  gap: var(--e-4);
}

.carrossel__janela {
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 4rem),
    calc(100% - 1.8rem) 100%,
    0 100%
  );
}

.carrossel__trilho {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.carrossel__trilho::-webkit-scrollbar {
  display: none;
}

.carrossel__trilho:focus-visible {
  outline-offset: -3px;
}

.carrossel__item {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.carrossel__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--petroleo);
}

.carrossel__legenda {
  position: absolute;
  left: var(--e-3);
  bottom: var(--e-3);
  padding: 0.3rem 0.6rem;
  background: var(--grafite);
  color: var(--branco);
  font-family: var(--fonte-dado);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carrossel__controles {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

.carrossel__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1.5px solid var(--grafite);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.carrossel__botao svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carrossel__botao--anterior svg {
  transform: scaleX(-1);
}

.carrossel__botao:hover {
  background: var(--grafite);
  color: var(--branco);
}

.carrossel__contador {
  font-family: var(--fonte-dado);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.carrossel__contador b {
  font-weight: 500;
  color: var(--grafite);
}

/* Amostras compactas abaixo do slide */
.cores__midia .cores__amostras li::before {
  height: 2.75rem;
  clip-path: none;
}

/* Amostras como faixas de filme, com o topo no corte da marca */
.cores__amostras {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e-3) var(--e-1);
  list-style: none;
}

@media (min-width: 560px) {
  .cores__amostras {
    grid-template-columns: repeat(9, 1fr);
  }
}

.cores__amostras li {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  text-align: center;
  color: var(--texto-suave);
}

.cores__amostras li::before {
  content: "";
  height: clamp(6rem, 14vw, 11rem);
  background: var(--cor);
  box-shadow: inset 0 0 0 1px rgba(30, 30, 30, 0.15);
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
}

.cores__usos {
  display: grid;
  gap: var(--e-3);
  list-style: none;
}

.cores__usos li {
  padding-top: var(--e-3);
  border-top: 2px solid var(--grafite);
}

.cores__usos h3 {
  font-size: var(--t-md);
}

.cores__usos p {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* Animações de entrada ------------------------------------------------ */
/* anima.js marca os elementos abaixo da dobra com [data-anima] e adiciona
   .visivel quando eles entram na tela. Sem JS, sem IntersectionObserver ou
   com movimento reduzido, nada é escondido. */

.secao--gelo {
  --cortina: var(--gelo);
}

.dividido__foto,
.rep__moldura {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  [data-anima] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  [data-anima].visivel {
    opacity: 1;
    transform: none;
  }

  /* O traço diagonal do sobretítulo se desenha depois do texto aparecer */
  .sobretitulo[data-anima]::before {
    transform: skewX(var(--corte)) scaleX(0);
    transform-origin: left center;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms;
  }

  .sobretitulo[data-anima].visivel::before {
    transform: skewX(var(--corte)) scaleX(1);
  }

  /* Fotos: uma cortina na cor da seção sai no ângulo da marca, com um
     fio laranja na borda que revela a imagem. */
  [data-anima="foto"] {
    opacity: 1;
    transform: none;
  }

  [data-anima="foto"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5%;
    width: 175%;
    background: var(--cortina, var(--branco));
    border-left: 4px solid var(--laranja);
    transform: skewX(var(--corte)) translateX(0);
    transform-origin: top left;
    transition: transform 1000ms cubic-bezier(0.7, 0, 0.2, 1) 100ms;
  }

  [data-anima="foto"].visivel::after {
    transform: skewX(var(--corte)) translateX(96%);
  }
}