/* Laboratório ANPROVIN, folha principal.
   Escrita a partir do desenho aprovado. Mobile primeiro.
   Farnesi Digital, agosto de 2026. */

/* ---------------------------------------------------------------- fontes */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --vinho: #800f41;
  --vinho-escuro: #45152a;
  --carvao: #23191c;
  --ouro: #b5883f;

  --fundo: #faf8f6;
  --branco: #fff;
  --texto: #23191c;
  --suave: #57484c;
  --apagado: #6b5c60;
  --fraco: #8a7a7e;

  --borda: #e8ded7;
  --borda-suave: #eadfd8;
  --borda-chip: #e6d9d2;

  --serifa: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  --largura: 1440px;
  --lado: 24px;
}

@media (min-width: 900px) {
  :root { --lado: 72px; }
}

/* ---------------------------------------------------------------- base */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serifa);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--vinho-escuro);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }

a { color: var(--vinho); text-decoration: none; }
a:hover { color: var(--vinho-escuro); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 2px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vinho);
  color: #fff;
  padding: 12px 18px;
  z-index: 20;
}
.pular:focus { left: 0; color: #fff; }

.pagina { max-width: var(--largura); margin: 0 auto; background: var(--fundo); }
.secao { padding: 48px var(--lado); }
@media (min-width: 900px) { .secao { padding: 96px var(--lado); } }

.olho {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ouro);
}
.olho::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .olho { font-size: 11px; letter-spacing: 0.26em; gap: 12px; }
  .olho::before { width: 34px; }
}

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.botao--cheio { background: var(--vinho); color: #fff; }
.botao--cheio:hover { background: var(--vinho-escuro); color: #fff; }
.botao--vazado { border-color: #d8c9c2; color: var(--vinho-escuro); background: transparent; }
.botao--vazado:hover { border-color: var(--vinho); color: var(--vinho); }
.botao--fino { min-height: 46px; padding: 0 22px; font-size: 14px; }
.botao svg { flex-shrink: 0; }

/* ---------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.topo__interno {
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--lado);
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 48px; height: auto; }
.marca__texto { display: flex; flex-direction: column; gap: 1px; }
.marca__nome { font-family: var(--serifa); font-size: 17px; color: var(--vinho-escuro); }
.marca__sub { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fraco); }

@media (min-width: 900px) {
  .marca img { width: 58px; }
  .marca__texto { border-left: 1px solid #e0d4cc; padding-left: 14px; }
  .marca__nome { font-size: 19px; }
  .marca__sub { font-size: 10px; letter-spacing: 0.22em; }
}

.menu__botao {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #e2d6ce;
  border-radius: 2px;
  cursor: pointer;
}
.menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px var(--lado) 20px;
  border-top: 1px solid var(--borda);
  background: var(--branco);
}
.menu[data-aberto="sim"] { display: flex; }
.menu a { padding: 13px 0; font-size: 15px; color: #4a3d40; }
.menu a.botao--cheio { color: #fff; }
.menu a.botao--cheio:hover { color: #fff; }
.menu .botao { margin-top: 10px; }

@media (min-width: 1100px) {
  .menu__botao { display: none; }
  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    border: 0;
  }
  .menu a { padding: 0; font-size: 14px; }
  .menu .botao { margin-top: 0; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--carvao);
  overflow: hidden;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* Véu: forte à esquerda, onde fica o texto, e fraco à direita,
   para os selos do Governo e da ABDI continuarem legíveis na placa. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(35,25,28,.92) 0%, rgba(35,25,28,.80) 55%, rgba(35,25,28,.88) 100%);
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 56px var(--lado) 52px;
  max-width: var(--largura);
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(40px, 10vw, 74px);
  line-height: 1.01;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__linha {
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.35;
  color: var(--ouro);
  font-weight: 400;
  max-width: 520px;
}
.hero__apoio { font-size: 15px; line-height: 1.7; color: #ddd0d4; max-width: 480px; }
.hero__acoes { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.hero .olho { color: var(--ouro); }
.hero .botao--vazado { border-color: rgba(255,255,255,.45); color: #fff; }
.hero .botao--vazado:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

@media (min-width: 900px) {
  .hero::before {
    background: linear-gradient(100deg, rgba(35,25,28,.94) 0%, rgba(35,25,28,.88) 42%, rgba(35,25,28,.42) 72%, rgba(35,25,28,.30) 100%);
  }
  .hero__texto { padding: 104px var(--lado) 100px; gap: 24px; min-height: 560px; justify-content: center; }
  .hero__acoes { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
  .hero__acoes .botao { min-height: 54px; }
}

/* ------------------------------------------------------------ placa */

.placa { margin: 0; }
.placa img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 42%;
}
@media (min-width: 900px) {
  .placa img { height: 340px; }
}

/* ---------------------------------------------------------------- faixa */

.faixa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px var(--lado);
  background: var(--vinho-escuro);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.faixa span:first-child { color: #d8bfa4; }
.faixa span:last-child { color: #e8dcd2; }

@media (min-width: 900px) {
  .faixa {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 22px var(--lado);
    font-size: 12px;
  }
  .faixa::after { display: none; }
}

/* ---------------------------------------------------------------- duas colunas */

.duplo { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
  .duplo--topo { align-items: start; }
  .duplo > .duplo__col { display: flex; flex-direction: column; gap: 22px; }
}
.duplo__col { display: flex; flex-direction: column; gap: 20px; }
.duplo h2 { font-size: clamp(28px, 6vw, 40px); }
.duplo p { font-size: 15.5px; line-height: 1.7; color: var(--suave); }
@media (min-width: 900px) { .duplo p { font-size: 16px; } }

.retrato { width: 100%; height: auto; border-radius: 2px; }

/* números */
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.numero { display: flex; flex-direction: column; gap: 3px; }
.numero b { font-family: var(--serifa); font-size: 28px; font-weight: 400; color: var(--vinho); }
.numero span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fraco); line-height: 1.35; }
@media (min-width: 900px) {
  .numeros { display: flex; gap: 40px; padding-top: 8px; }
  .numero b { font-size: 34px; }
  .numero span { font-size: 12px; letter-spacing: 0.1em; }
}

/* ---------------------------------------------------------------- diferenciais */

.diferenciais {
  background: var(--branco);
  border-top: 1px solid #efe6e0;
  border-bottom: 1px solid #efe6e0;
}
.diferenciais__cabeca { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.diferenciais__cabeca h2 { font-size: clamp(26px, 6vw, 36px); }
.grade { display: flex; flex-direction: column; gap: 1px; background: var(--borda-suave); }
.item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 4px; background: var(--branco); }
.item__icone { color: var(--vinho); flex-shrink: 0; margin-top: 2px; }
.item h3 { font-size: 17px; line-height: 1.25; }
.item p { font-size: 14px; line-height: 1.6; color: var(--apagado); margin-top: 5px; }

@media (min-width: 900px) {
  .diferenciais__cabeca { align-items: center; text-align: center; gap: 14px; margin-bottom: 44px; }
  .diferenciais__cabeca .olho::before { display: none; }
  .grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item { flex-direction: column; gap: 14px; padding: 34px 32px; }
  .item h3 { font-size: 18px; }
  .item p { margin-top: 0; }
}

/* ---------------------------------------------------------------- análises */

.parametros { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.parametros li {
  font-size: 13px;
  color: var(--vinho-escuro);
  background: var(--branco);
  border: 1px solid var(--borda-chip);
  padding: 9px 13px;
  border-radius: 2px;
}
.nota-lateral {
  font-size: 14px;
  line-height: 1.65;
  color: var(--apagado);
  border-left: 2px solid var(--ouro);
  padding-left: 14px;
}
@media (min-width: 900px) { .nota-lateral { padding-left: 16px; } }

/* ---------------------------------------------------------------- qualidade */

.qualidade { background: var(--vinho-escuro); }
.qualidade__foto { width: 100%; height: 260px; object-fit: cover; object-position: center 26%; }
.qualidade__texto { display: flex; flex-direction: column; gap: 18px; padding: 44px var(--lado); }
.qualidade h2 { color: #fff; font-size: clamp(26px, 6vw, 38px); }
.qualidade p { font-size: 15.5px; line-height: 1.7; color: #e0d0d6; }
.garantias { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 13px; }
.garantias li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.55; color: #f0e6ea; }
.garantias svg { flex-shrink: 0; margin-top: 3px; }

@media (min-width: 900px) {
  .qualidade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qualidade picture { position: relative; min-height: 520px; }
  .qualidade__foto { position: absolute; inset: 0; width: 100%; height: 100%; }
  .qualidade__texto { padding: 84px var(--lado) 84px 64px; justify-content: center; gap: 24px; }
  .qualidade p, .qualidade h2 { max-width: 470px; }
  .garantias li { font-size: 15px; }
}

/* ---------------------------------------------------------------- solicitar */

.solicitar { background: var(--branco); }


/* ---------------------------------------------------------------- rodapé */

.rodape { background: var(--carvao); color: #c9bcc0; padding: 44px var(--lado) 28px; }
.rodape__grade { display: flex; flex-direction: column; gap: 30px; max-width: var(--largura); margin: 0 auto; }
.rodape h2 { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro); font-family: var(--sans); }
.rodape img { width: 66px; height: auto; }
.rodape__sobre p { font-size: 13.5px; line-height: 1.65; color: #a89a9e; margin-top: 14px; max-width: 260px; }
.rodape__lista { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rodape__lista li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; color: #e6dcd8; }
.rodape__lista svg { flex-shrink: 0; margin-top: 3px; }
.rodape__lista a { color: #e6dcd8; }
.rodape__lista a:hover { color: #fff; }
.rodape__navegacao { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rodape__navegacao a { font-size: 14.5px; color: #c9bcc0; }
.rodape__navegacao a:hover { color: #fff; }
.rodape__fim {
  max-width: var(--largura);
  margin: 30px auto 0;
  border-top: 1px solid #3a2e31;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: #7d7074;
}

@media (min-width: 900px) {
  .rodape { padding: 76px var(--lado) 40px; }
  .rodape__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .rodape img { width: 78px; }
  .rodape__fim { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; font-size: 12.5px; margin-top: 48px; padding-top: 26px; }
}

/* ---------------------------------------------------------------- picture */

picture { display: block; }

/* ---------------------------------------------------------------- carrossel */

.carrossel { position: relative; }

.carrossel__trilho {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carrossel__trilho { scroll-behavior: auto; } }

.carrossel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-width: 0;
}
.carrossel__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* setas */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--borda-chip);
  border-radius: 50%;
  color: var(--vinho-escuro);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  z-index: 2;
}
.carrossel__seta:hover { background: #fff; color: var(--vinho); }
.carrossel__seta[hidden] { display: none; }
.carrossel__seta--ant { left: 12px; }
.carrossel__seta--prox { right: 12px; }

/* marcadores */
.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  list-style: none;
  padding: 0;
}
.carrossel__ponto {
  width: 32px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--borda-chip);
  cursor: pointer;
  transition: background 0.2s ease;
}
.carrossel__ponto[aria-current="true"] { background: var(--vinho); }

.carrossel__legenda {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fraco);
  text-align: center;
}

/* na seção Qualidade o carrossel ocupa a metade inteira, sem borda */
.qualidade .carrossel { height: 100%; }
.qualidade .carrossel__trilho { height: 100%; border-radius: 0; }
.qualidade .carrossel__slide picture { display: block; }
.qualidade .carrossel__slide img { aspect-ratio: auto; height: 260px; object-fit: cover; object-position: center 26%; }
.qualidade .carrossel__pontos {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 2;
}
.qualidade .carrossel__ponto { background: rgba(255, 255, 255, 0.45); }
.qualidade .carrossel__ponto[aria-current="true"] { background: #fff; }

@media (min-width: 900px) {
  /* o slide precisa continuar em bloco: com flex, a imagem volta a se dimensionar
     pela proporção natural e sobra faixa vazia na coluna */
  .qualidade .carrossel__slide { display: block; height: 100%; }
  .qualidade .carrossel__slide picture { display: block; height: 100%; }
  .qualidade .carrossel__slide img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------- botão do menu */

@media (min-width: 1100px) {
  .menu { gap: 26px; }
  .menu .botao {
    margin-left: 12px;
    min-height: 44px;
    padding: 0 24px;
    letter-spacing: 0.01em;
  }
}

/* ------------------------------------------------------------- assinatura */

.assinatura {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #7d7074;
}
.assinatura a { color: #a89a9e; }
.assinatura a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- serviços */

.servicos { background: var(--branco); border-top: 1px solid #efe6e0; }
.servicos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--borda-suave);
}
.servico { background: var(--branco); padding: 24px 4px; display: flex; flex-direction: column; gap: 8px; }
.servico h3 { font-size: 19px; line-height: 1.25; }
.servico p { font-size: 14.5px; line-height: 1.65; color: var(--apagado); }
@media (min-width: 900px) {
  .servicos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servico { padding: 32px 36px; }
}

/* -------------------------------------------------------- missão e valores */

.mvv { background: var(--fundo); }
.mvv__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 26px;
}
.mvv__bloco { display: flex; flex-direction: column; gap: 10px; }
.mvv__bloco h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ouro);
}
.mvv__bloco p { font-size: 15.5px; line-height: 1.7; color: var(--suave); }
.mvv__valores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mvv__valores li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--suave);
}
.mvv__valores li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--vinho);
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .mvv__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; margin-top: 40px; }
}

/* -------------------------------------------------- carrossel de largura total */

.carrossel--faixa .carrossel__trilho { border-radius: 0; }
.carrossel--faixa .carrossel__slide img {
  aspect-ratio: auto;
  height: 190px;
  object-fit: cover;
  object-position: center 42%;
}
.carrossel--faixa .carrossel__pontos {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 2;
}
.carrossel--faixa .carrossel__ponto { background: rgba(255, 255, 255, 0.5); }
.carrossel--faixa .carrossel__ponto[aria-current="true"] { background: #fff; }
.carrossel--faixa .carrossel__seta { background: rgba(255, 255, 255, 0.85); border-color: transparent; }

@media (min-width: 900px) {
  .carrossel--faixa .carrossel__slide img { height: 340px; }
  .carrossel--faixa .carrossel__seta--ant { left: 24px; }
  .carrossel--faixa .carrossel__seta--prox { right: 24px; }
}

/* ------------------------------------------------------- ícones das seções */

.servico__icone,
.mvv__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vinho);
}

.servico__icone {
  width: 46px;
  height: 46px;
  border: 1px solid var(--borda-chip);
  border-radius: 50%;
  margin-bottom: 4px;
}

.mvv__icone {
  width: 44px;
  height: 44px;
  color: var(--ouro);
  justify-content: flex-start;
}