/* Vestare — site institucional.
   Cores e tipografia vêm do Brand Guide 2025; nada aqui é escolha avulsa.
   A proporção do manual (Azul Naval 45%, Off-White 25%, Azul Médio 15%,
   Azul Claro 10%, Cinza Leve 5%) é o que decide o que pinta área grande. */

:root {
  --azul-naval: #1a3a5c;
  --azul-medio: #2e5f8a;
  --azul-claro: #a8c4dc;
  --off-white: #f5f2ed;
  --creme: #ede0d0;
  --cinza-leve: #e8e4df;

  --texto: var(--azul-naval);
  /* Escurecido em relação ao Azul Claro: o manual o reserva para ícones, e
     ele não passa em contraste como texto sobre o Off-White. */
  --texto-suave: #4f6376;

  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --largura: 1100px;
  --respiro: clamp(4rem, 9vw, 7rem);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.largura {
  width: min(100% - 3rem, var(--largura));
  margin-inline: auto;
}

.pular {
  position: absolute;
  left: -9999px;
  background: var(--azul-naval);
  color: var(--off-white);
  padding: .75rem 1rem;
  z-index: 100;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 242, 237, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cinza-leve);
}

.faixa {
  width: min(100% - 3rem, var(--largura));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .9rem 0;
}

/* A marca é wordmark: a tagline é mais larga que o nome, então o conjunto é
   centralizado para não sair torto. */
.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
  text-decoration: none;
  color: var(--azul-naval);
}
.marca-nome { font-weight: 700; letter-spacing: .12em; font-size: 1.15rem; }
.marca-nome.pequeno { font-size: .95rem; }
.marca-tagline { font-size: .5rem; letter-spacing: .2em; opacity: .8; }

.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: .92rem;
  transition: color .2s;
}
.menu a:hover { color: var(--azul-naval); }

.botao-area {
  background: var(--azul-naval);
  color: var(--off-white) !important;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.botao-area:hover { background: var(--azul-medio); }

/* ---------------------------------------------------------------- capa */

/* A capa é a foto da parede da lavanderia sob um véu Azul Naval. O véu é forte
   à esquerda, onde fica o texto, e quase transparente à direita, onde fica o
   letreiro — assim a marca aparece na foto sem disputar com o título. */
.capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 13vw, 9rem) 0 var(--respiro);
  background: var(--azul-naval);
  color: var(--off-white);
}

.capa-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 55%;
}

.capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(26, 58, 92, .95) 0%,
      rgba(26, 58, 92, .86) 38%,
      rgba(26, 58, 92, .28) 100%),
    linear-gradient(rgba(26, 58, 92, .22), rgba(26, 58, 92, .48));
}

.capa .sobretitulo { color: var(--azul-claro); }
.capa h1 { color: var(--off-white); }
.capa .chamada { color: rgba(245, 242, 237, .88); }

/* No celular o texto ocupa a largura toda: o degradê lateral não protege mais
   nada, e o véu precisa ser parelho. */
@media (max-width: 760px) {
  .capa::after {
    background: linear-gradient(rgba(26, 58, 92, .78), rgba(26, 58, 92, .92));
  }
  .capa-foto { object-position: 58% 30%; }
}

.sobretitulo {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--texto-suave);
  margin: 0 0 1.4rem;
}

h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 1.4rem;
  max-width: 18ch;
}

.chamada {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--texto-suave);
  max-width: 55ch;
  margin: 0 0 2.4rem;
}

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

.botao-principal, .botao-secundario {
  display: inline-block;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.botao-principal { background: var(--azul-naval); color: var(--off-white); }
.botao-principal:hover { background: var(--azul-medio); }
.botao-secundario { border: 1px solid var(--azul-naval); color: var(--azul-naval); }
.botao-secundario:hover { background: var(--azul-naval); color: var(--off-white); }

.botao-principal.claro { background: var(--off-white); color: var(--azul-naval); }
.botao-principal.claro:hover { background: var(--azul-claro); }
.botao-secundario.claro { border-color: var(--off-white); color: var(--off-white); }
.botao-secundario.claro:hover { background: var(--off-white); color: var(--azul-naval); }

/* ------------------------------------------------------------- números */

.numeros { padding: 0 0 var(--respiro); }

.grade-numeros {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.grade-numeros div {
  background: #fff;
  border: 1px solid var(--cinza-leve);
  border-radius: 14px;
  padding: 1.6rem;
}
.grade-numeros strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: .4rem;
}
.grade-numeros span { color: var(--texto-suave); font-size: .95rem; }

/* --------------------------------------------------------------- seções */

.secao { padding: var(--respiro) 0; }
.secao.alternada { background: var(--creme); }

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  max-width: 20ch;
}

.subtitulo {
  color: var(--texto-suave);
  max-width: 58ch;
  margin: 0 0 3rem;
  font-size: 1.05rem;
}
.subtitulo.claro { color: var(--azul-claro); }

.grade-servicos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.cartao {
  background: #fff;
  border: 1px solid var(--cinza-leve);
  border-radius: 14px;
  padding: 1.8rem;
}
.cartao h3 { margin: 0 0 .6rem; font-size: 1.15rem; }
.cartao p { margin: 0; color: var(--texto-suave); font-size: .96rem; }

/* -------------------------------------------------------------- galeria */

.escuro { background: var(--azul-naval); color: var(--off-white); }
.escuro h2 { color: var(--off-white); }

.galeria { padding: var(--respiro) 0; background: var(--creme); }

.grade-fotos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.foto {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cinza-leve);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- passos */

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: passo;
}
.passos li {
  background: #fff;
  border: 1px solid var(--cinza-leve);
  border-radius: 14px;
  padding: 1.8rem;
}
.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul-naval);
  font-weight: 700;
  margin-bottom: 1rem;
}
.passos h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.passos p { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* ------------------------------------------------------------- empresas */

.duas-colunas {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
}
.duas-colunas p { color: var(--texto-suave); max-width: 50ch; }
.duas-colunas .botao-principal { margin-top: 1rem; }

.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li {
  padding: .95rem 0 .95rem 2rem;
  border-bottom: 1px solid rgba(26, 58, 92, .12);
  position: relative;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: 1.45rem;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--azul-medio);
}
.lista-marcada li:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- contato */

.contato { padding: var(--respiro) 0; text-align: center; }
.contato h2 { margin-inline: auto; }
.contato .subtitulo { margin-inline: auto; }
.contato .acoes { justify-content: center; }
.local {
  margin-top: 2.5rem;
  color: var(--azul-claro);
  font-size: .9rem;
  letter-spacing: .05em;
}

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

.rodape { padding: 2rem 0; border-top: 1px solid var(--cinza-leve); }
.faixa-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.direitos { color: var(--texto-suave); font-size: .88rem; }
.faixa-rodape a { color: var(--azul-medio); font-size: .88rem; }

/* ------------------------------------------------ revelação ao rolar */

/* Sem JavaScript o conteúdo simplesmente aparece — o site precisa funcionar
   antes de ser bonito. A ocultação só existe sob `.com-js`. */
.com-js .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.com-js .revela.visivel { opacity: 1; transform: none; }

/* Itens de uma mesma grade entram em cascata curta, para o olho acompanhar
   sem que a página pareça lenta. */
.com-js .revela:nth-child(2) { transition-delay: .08s; }
.com-js .revela:nth-child(3) { transition-delay: .16s; }
.com-js .revela:nth-child(4) { transition-delay: .24s; }

/* Quem pediu menos movimento no sistema recebe a página inteira, parada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .com-js .revela { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .menu a:not(.botao-area) { display: none; }
}

/* Legenda da foto: identifica o equipamento sem precisar de texto ao redor. */
.foto { display: flex; flex-direction: column; }
.foto img { aspect-ratio: 4 / 3; }
.foto figcaption {
  padding: .85rem 1rem;
  font-size: .88rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--cinza-leve);
}
.foto figcaption strong { color: var(--azul-naval); font-weight: 600; }

/* As máquinas foram fotografadas em pé, e o quadro é deitado. Em vez de
   encolher a foto inteira até virar uma tira no meio do branco, corta-se a
   altura e guarda-se o pedaço que identifica o equipamento: painel e cesto. O
   modelo, que fica escrito na base, já está na legenda. */
.foto-produto img { object-position: center 34%; }

/* Faixa de largura total. A altura é limitada pela tela para a foto entrar
   como faixa, e não como um bloco de 700px de parede; o corte tira o chão e a
   prateleira vazia, e mantém o letreiro no meio. */
.faixa-parede {
  width: 100%;
  height: min(56vw, 60vh);
  object-fit: cover;
  object-position: center 42%;
}

/* ------------------------------------------------------------- fachada */

/* Faixa de largura total: a legenda em Azul Naval encosta na seção de
   contato, e as duas leem como um bloco só — a porta e o convite. */
.fachada { margin: 0; }
.fachada img {
  width: 100%;
  height: min(52vw, 56vh);
  object-fit: cover;
  /* A placa fica no terço de cima da foto: o corte precisa preservá-la
     inteira, e o que sobra do portão já diz o resto. */
  object-position: center 10%;
}
.fachada figcaption {
  background: var(--azul-naval);
  color: var(--azul-claro);
  text-align: center;
  padding: 1.4rem 1.5rem .2rem;
  font-size: .98rem;
}
.fachada figcaption strong {
  display: block;
  color: var(--off-white);
  font-size: 1.15rem;
  margin-bottom: .3rem;
}