/* ==========================================================
   Site Vidral
   Blocos brancos sobre fundo cinza, barra fixa flutuante.
   Identidade: identidade/design-guide.md
   ========================================================== */

:root{
  /* --- paleta Vidral --- */
  --vinho:    #800000;   /* cor de comunicacao: titulos, destaques, icones */
  --vinho-2:  #630000;   /* hover dos botoes */
  --preto:    #000000;
  --cinza:    #efefef;   /* fundo da pagina */
  --branco:   #ffffff;   /* blocos */
  --vermelho: #f90300;   /* SO no logo (ja vem no PNG) — nunca na comunicacao */

  --texto2:   #5f5f5f;   /* >= 4,5:1 sobre branco E sobre o cinza */
  --linha:    #e2e2e2;


  --r-bloco:  16px;
  --r-m:      14px;

  --gap:      32px;      /* cinza aparecendo entre os blocos */
  --largura:  1400px;
  --topo:     16px;      /* distancia da barra ao topo da tela */
  --barra-h:  80px;
  --barra-min: 62px;     /* altura da barra depois de encolher */
  --barra-py: 14px;
  --barra-px: 24px;      /* lateral da barra — o estado rolado NAO mexe nisso */

  --sombra:       0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --sombra-barra: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.07);
  --sombra-rolou: 0 2px 6px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.12);

  /* curva forte de saida: resposta imediata, assentamento suave */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:var(--topo) 24px 32px;
  background:var(--cinza);
  color:var(--preto);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }

/* ---------------- FOCO E ATALHO ---------------- */

:focus-visible{
  outline:2px solid var(--vinho);
  outline-offset:3px;
}

/* sobre o hero escuro e o botao vinho, o contorno vinho some */
.hero__body :focus-visible,
.zap-flutuante:focus-visible{ outline-color:var(--branco); }

/* secoes recebem foco ao navegar pelas ancoras — sem contorno no bloco */
[tabindex="-1"]:focus{ outline:none; }

/* aparece so no Tab — sem transicao, e acao de teclado */
.pular{
  position:absolute;
  left:16px;
  top:-100px;
  z-index:2000;
  padding:12px 18px;
  background:var(--vinho);
  color:var(--branco);
  border-radius:10px;
  font-size:14px;
  font-weight:600;
}

.pular:focus{ top:16px; }

/* ---------------- BARRA FIXA ---------------- */

.barra{
  position:sticky;
  top:var(--topo);
  z-index:1000;
  margin-bottom:var(--gap);
}

.barra__caixa{
  position:relative;
  max-width:var(--largura);
  margin:0 auto;
  min-height:var(--barra-h);
  padding:var(--barra-py) var(--barra-px);
  display:flex;
  align-items:center;
  background:var(--branco);
  border-radius:var(--r-bloco);
  box-shadow:var(--sombra-barra);
  transition:min-height .25s ease, padding .25s ease,
             background-color .25s ease, box-shadow .25s ease;
}

/* estado rolado: translucido, desfocado, mais baixo, sombra mais presente.
   So muda o padding VERTICAL — o lateral continua vindo de --barra-px. */
.barra.rolou .barra__caixa{
  --barra-py:8px;
  min-height:var(--barra-min);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:var(--sombra-rolou);
}

.brand{
  display:flex;
  align-items:center;
  flex:none;
}

.brand__img{
  display:block;
  height:48px;
  width:auto;
  transition:height .25s ease;
}

.barra.rolou .brand__img{ height:38px; }

.nav{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  padding-left:32px;
}

.nav a{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
  color:var(--texto2);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .16s ease;
}

.nav a:hover,
.nav a.ativo{ color:var(--vinho); }

.nav a.ativo::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--vinho);
}

/* botao de tres linhas — so no celular */
.menu-btn{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:transparent;
  border:1px solid var(--linha);
  border-radius:10px;
  cursor:pointer;
  transition:transform .16s var(--ease-out);
}

.menu-btn:active{ transform:scale(.95); }

.menu-btn span{
  display:block;
  width:18px;
  height:2px;
  background:var(--preto);
  transition:transform .2s var(--ease-out), opacity .2s ease;
}

.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- BLOCOS ---------------- */

.bloco{
  max-width:var(--largura);
  margin:0 auto var(--gap);
  padding:48px;
  background:var(--branco);
  border-radius:var(--r-bloco);
  box-shadow:var(--sombra);
  scroll-margin-top:calc(var(--topo) + var(--barra-min) + 16px);
}

.bloco--rodape{ margin-bottom:0; }

.bloco--hero{
  position:relative;
  padding:0;
  overflow:hidden;
}

/* ---------------- TIPOGRAFIA ---------------- */

.h2{
  margin:0;
  color:var(--vinho);
  font-size:41px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
  text-transform:uppercase;
}

/* traco vinho acima do titulo — ecoa a barra do logo na cor de comunicacao */
.h2::before{
  content:"";
  display:block;
  width:40px;
  height:3px;
  margin-bottom:18px;
  background:var(--vinho);
}

.muted{
  margin:0;
  color:var(--texto2);
  font-size:16px;
  line-height:1.6;
}

.muted--sub{ font-size:15px; }

/* ---------------- HERO ---------------- */

.hero__img{
  display:block;
  width:100%;
  height:min(480px,65vh);
  object-fit:cover;
}

.hero__veil{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(0,0,0,.66) 0%,
    rgba(0,0,0,.36) 46%,
    rgba(0,0,0,0) 78%);
}

.hero__body{
  position:absolute;
  left:56px;
  top:50%;
  transform:translateY(-50%);
  width:min(760px,62%);
  color:var(--branco);
}

/* "Desde 1977" em serifa italica — a elegancia do guia de marca */
.hero__kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:21px;
  letter-spacing:.01em;
  opacity:.95;
}

.hero__kicker::before{
  content:"";
  width:36px;
  height:2px;
  background:currentColor;
  opacity:.7;
}

.hero__title{
  margin:0;
  font-size:clamp(32px,4.6vw,62px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.015em;
  text-transform:uppercase;
}

.hero__sub{
  margin:18px 0 0;
  font-size:17px;
  line-height:1.5;
  opacity:.92;
}

/* ---------------- BOTÕES ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  padding:15px 30px;
  background:var(--vinho);
  color:var(--branco);
  border:1.5px solid var(--vinho);
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease,
             border-color .16s ease, transform .16s var(--ease-out);
}

.btn:hover{
  background:var(--vinho-2);
  border-color:var(--vinho-2);
}

/* o clique precisa ser sentido */
.btn:active{ transform:scale(.97); }

.btn--linha{
  background:transparent;
  color:var(--vinho);
}

.btn--linha:hover{
  background:var(--vinho);
  border-color:var(--vinho);
  color:var(--branco);
}

/* botao do cabecalho — WhatsApp. 24px ate o ultimo link do menu. */
.btn--barra{
  margin-top:0;
  margin-left:24px;
  flex:none;
  padding:12px 22px;
  font-size:12px;
}

.ico-zap{
  width:16px;
  height:16px;
  flex:none;
}

/* ---------------- SOBRE NÓS ---------------- */

.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:48px;
}

.about__intro .h2{ margin-bottom:18px; }

.about__intro .muted{
  max-width:520px;
  font-size:17px;
}

.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 32px;
  align-content:center;
}

.stat b{
  display:block;
  color:var(--vinho);
  font-size:56px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}

.stat span{
  display:block;
  margin-top:8px;
  color:var(--texto2);
  font-size:13px;
  font-weight:500;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* ---------------- CATÁLOGO ---------------- */

.catalog{
  display:grid;
  grid-template-columns:minmax(230px,1fr) 3fr;
  gap:40px;
}

.catalog__intro{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.catalog__intro .h2{ margin-bottom:16px; }

.catalog__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

/* o card e um <button> que abre a galeria — zera o visual nativo */
.obj{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

/* a moldura recorta a imagem, que pode crescer no hover sem vazar */
.obj__media{
  display:block;        /* e um <span>: <button> so aceita conteudo em linha */
  overflow:hidden;
  border-radius:var(--r-m);
}

.obj__img{
  display:block;
  width:100%;
  height:auto;          /* o atributo height do <img> viraria altura em CSS */
  aspect-ratio:4/5;
  max-height:300px;
  object-fit:cover;
  transition:transform .5s var(--ease-out);
}

.obj__name{
  display:block;
  margin-top:13px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:color .16s ease;
}

/* largura zero: a seta transborda para a direita do texto e nunca empurra
   o nome para uma segunda linha. O espacamento vem do transform, que nao
   ocupa layout. */
.obj__seta{
  display:inline-block;
  width:0;
  overflow:visible;
  white-space:nowrap;
  color:var(--vinho);
  opacity:0;
  transform:translateX(2px);
  transition:opacity .2s ease, transform .2s var(--ease-out);
}

.obj__qty{
  display:block;
  margin-top:5px;
  color:var(--texto2);
  font-size:13px;
}

/* teclado ganha o mesmo retorno do mouse */
.obj:focus-visible .obj__name{ color:var(--vinho); }
.obj:focus-visible .obj__seta{ opacity:1; transform:translateX(6px); }

/* no toque nao existe hover — a seta fica sempre a vista como pista */
@media (hover:none){
  .obj__seta{ opacity:1; transform:translateX(6px); }
}

.arrows{
  display:flex;
  gap:10px;
  margin-top:24px;
}

/* sem transbordo o JS marca [hidden]; o display:flex acima venceria sem isto */
.arrows[hidden]{ display:none; }

.arrow{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  background:var(--branco);
  color:var(--texto2);
  border:1px solid var(--linha);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease,
             border-color .16s ease, transform .16s var(--ease-out);
}

.arrow svg{ width:17px; height:17px; }

.arrow--on,
.arrow:hover:not(:disabled){
  background:var(--vinho);
  color:var(--branco);
  border-color:var(--vinho);
}

.arrow:active:not(:disabled){ transform:scale(.95); }

.arrow:disabled{
  opacity:.35;
  cursor:default;
}

/* ---------------- COMO TRABALHAMOS ---------------- */

.how__head .h2{ margin-bottom:14px; }

.how__body{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:46px;
  align-items:stretch;
  margin-top:28px;
}

.how__media{
  position:relative;
  height:100%;
  max-height:480px;
}

.how__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--r-m);
}

/* selo em painel de vidro fosco — elemento recorrente da marca */
.badge{
  position:absolute;
  top:-24px;
  right:-24px;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  background:rgba(128,0,0,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--branco);
  border-radius:50%;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
}

.steps{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:passo;
  min-height:480px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.step{
  counter-increment:passo;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--linha);
}

.step:first-child{ padding-top:0; }

.step:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.step__ico{
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  background:var(--branco);
  color:var(--vinho);
  border:1.5px solid var(--preto);
  border-radius:50%;
}

.step__ico svg{ width:20px; height:20px; }

.step__txt b{
  display:block;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}

/* "01"–"05" em vinho, vindos da propria ordem do <ol> */
.step__txt b::before{
  content:counter(passo, decimal-leading-zero);
  display:block;
  margin-bottom:4px;
  color:var(--vinho);
  font-size:12px;
  letter-spacing:.14em;
}

.step__txt p{
  margin:5px 0 0;
  color:var(--texto2);
  font-size:15px;
  line-height:1.45;
}

/* ---------------- DEPOIMENTOS ---------------- */

.depo__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:32px;
}

.depo{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:28px;
  background:var(--cinza);
  border-radius:var(--r-m);
}

.depo__aspas{
  display:block;
  color:var(--vinho);
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:60px;
  line-height:.6;
}

.depo__txt{
  margin:18px 0 0;
  color:var(--preto);
  font-size:17px;
  font-weight:500;
  line-height:1.5;
}

.depo__quem{
  margin-top:auto;
  padding-top:24px;
}

.depo__estrelas{
  display:block;
  margin-bottom:8px;
  color:var(--vinho);
  font-size:15px;
  letter-spacing:.12em;
}

.depo__quem b{
  display:block;
  font-size:14px;
  font-weight:700;
}

.depo__quem small{
  display:block;
  margin-top:3px;
  color:var(--texto2);
  font-size:12px;
}

/* ---------------- INFORMAÇÕES (RODAPÉ) ---------------- */

.rodape{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:56px;
  align-items:start;
}

.rodape__dados .h2{ margin-bottom:8px; }

.contato__dados{
  margin:0;
  padding:0;
  list-style:none;
}

.contato__dados li{
  padding:14px 0;
  border-bottom:1px solid var(--linha);
}

.contato__dados li:last-child{ border-bottom:0; }

.contato__dados span{
  display:block;
  color:var(--texto2);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.contato__dados b{
  display:block;
  margin-top:4px;
  font-size:17px;
  font-weight:600;
}

.contato__dados a{ transition:color .16s ease; }

.contato__nota{
  display:inline-block;
  margin-top:4px;
  color:var(--texto2);
  font-size:14px;
  font-weight:500;
}

.contato__dados a:hover{ color:var(--vinho); }

.rodape__mapa{ min-width:0; }

.mapa{
  display:block;
  width:100%;
  height:340px;
  border:0;
  border-radius:var(--r-m);
}

.rodape__base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--linha);
  color:var(--texto2);
  font-size:13px;
}

.rodape__topo{
  font-weight:600;
  transition:color .16s ease;
}

.rodape__topo:hover{ color:var(--vinho); }

/* ---------------- GALERIA DE PRODUTO ---------------- */

/* trava a rolagem da pagina enquanto a galeria esta aberta; o gutter
   estavel reserva o espaco da barra de rolagem pra pagina nao pular de lado */
html.galeria-aberta{
  overflow:hidden;
  scrollbar-gutter:stable;
  background:#232323;   /* pinta o espaco reservado da barra no tom do fundo escuro */
}

.galeria{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(12,12,12,.9);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .15s ease-out;   /* sai mais rapido do que entra */
}

.galeria[hidden]{ display:none; }

.galeria.aberta{
  opacity:1;
  transition:opacity .22s var(--ease-out);
}

.galeria__caixa{
  width:min(1100px, 100%);
  height:100%;
  max-height:880px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transform:scale(.98);
  transition:transform .22s var(--ease-out);
}

.galeria.aberta .galeria__caixa{ transform:none; }

/* no fundo escuro o contorno de foco vinho some — fica branco */
.galeria :focus-visible{ outline-color:var(--branco); }

.galeria__topo{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--branco);
}

.galeria__titulo{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.galeria__contador{
  flex:none;
  white-space:nowrap;   /* "Foto 1 de 5" nunca quebra */
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
}

.galeria__fechar{
  width:44px;
  height:44px;
  margin-left:auto;
  flex:none;
  display:grid;
  place-items:center;
  padding:0;
  background:rgba(255,255,255,.08);
  color:var(--branco);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .16s ease, transform .16s var(--ease-out);
}

.galeria__fechar:hover{ background:rgba(255,255,255,.18); }

.galeria__fechar:active{ transform:scale(.95); }

.galeria__fechar svg{ width:20px; height:20px; }

/* palco: pan-y deixa o deslizar horizontal do dedo chegar ao JS */
.galeria__palco{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y pinch-zoom;
  user-select:none;
}

.galeria__foto{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--r-m);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  transition:opacity .2s ease;
  -webkit-user-drag:none;
}

.galeria__foto.carregando{ opacity:0; }

.galeria__seta{
  position:absolute;
  top:50%;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  background:var(--branco);
  color:var(--vinho);
  border:0;
  border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  cursor:pointer;
  transform:translateY(-50%);
  transition:background-color .16s ease, color .16s ease, transform .16s var(--ease-out);
}

.galeria__seta svg{ width:20px; height:20px; }

.galeria__seta--ant{ left:12px; }

.galeria__seta--prox{ right:12px; }

.galeria__seta:hover{
  background:var(--vinho);
  color:var(--branco);
}

.galeria__seta:active{ transform:translateY(-50%) scale(.95); }

.galeria__base{
  display:flex;
  align-items:center;
  gap:16px;
}

.galeria__miniaturas{
  flex:1;
  min-width:0;
  display:flex;
  gap:10px;
  padding:4px;
  overflow-x:auto;
  scrollbar-width:none;
}

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

.galeria__mini{
  flex:none;
  width:72px;
  height:56px;
  padding:0;
  background:rgba(255,255,255,.08);
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  opacity:.55;
  transition:opacity .16s ease, border-color .16s ease;
}

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

.galeria__mini:hover{ opacity:.9; }

.galeria__mini[aria-current="true"]{
  opacity:1;
  border-color:var(--branco);
}

.galeria__pedir{
  margin-top:0;
  flex:none;
}

/* produto com uma foto so: sem setas, contador nem miniaturas */
.galeria.unica .galeria__seta,
.galeria.unica .galeria__contador,
.galeria.unica .galeria__miniaturas{ display:none; }

.galeria.unica .galeria__base{ justify-content:center; }

@media (max-width:700px){

  .galeria{ padding:12px; }

  .galeria__caixa{ gap:12px; }

  .galeria__titulo{ font-size:15px; }

  .galeria__seta{
    width:40px;
    height:40px;
  }

  .galeria__seta--ant{ left:6px; }

  .galeria__seta--prox{ right:6px; }

  .galeria__base{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .galeria__pedir{ justify-content:center; }

  .galeria__mini{
    width:60px;
    height:48px;
  }
}

/* ---------------- WHATSAPP FLUTUANTE ---------------- */

/* so existe no celular com JS (ver bloco <=700px) */
.zap-flutuante{ display:none; }

.zap-flutuante svg{ width:26px; height:26px; }

/* ---------------- ENTRADA AO ROLAR ----------------
   So esconde quando o JS esta rodando (.js vem do <head>).
   Blocos sobem 24px; cards do catalogo entram de lado, escalonados. */

.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ---------------- HOVER (so com mouse) ----------------
   No toque o hover "gruda" depois do tap — por isso fica fechado aqui. */

@media (hover:hover) and (pointer:fine){

  .obj:hover .obj__img{ transform:scale(1.04); }

  .obj:hover .obj__name{ color:var(--vinho); }

  .obj:hover .obj__seta{ opacity:1; transform:translateX(6px); }
}

/* ---------------- RESPONSIVO ---------------- */

@media (min-width:1241px){

  /* lateral so onde a fileira NAO rola na horizontal — abaixo disso o
     deslocamento empurraria o scrollWidth e piscaria barra de rolagem */
  .js .reveal--lado{ transform:translateX(64px); }
}

@media (max-width:1240px){

  .nav{ gap:20px; }

  .nav a{ font-size:12px; letter-spacing:.05em; }

  .catalog{
    grid-template-columns:minmax(200px,1fr) 2.2fr;
    gap:32px;
  }

  .catalog__grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,1fr);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:4px;
  }

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

  .obj{ scroll-snap-align:start; }
}

@media (max-width:980px){

  .about,
  .catalog,
  .how__body,
  .rodape{
    grid-template-columns:1fr;
    gap:32px;
  }

  .how__media{
    height:auto;
    max-height:none;
  }

  .how__img{ height:380px; }

  .steps{
    min-height:0;
    justify-content:flex-start;
  }

  .step:last-child{ padding-bottom:14px; }

  .depo__grid{ grid-template-columns:1fr; }
}

/* --- menu em lista vertical --- */
@media (max-width:900px){

  .menu-btn{ display:flex; }

  /* abre a partir do botao (canto superior direito), mais rapido ao fechar.
     visibility tira os links do Tab enquanto o menu esta fechado. */
  .nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-left:0;
    padding:8px;
    background:var(--branco);
    border-radius:var(--r-bloco);
    box-shadow:var(--sombra-rolou);
    transform-origin:top right;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px) scale(.98);
    transition:opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
  }

  .nav.aberto{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s;
  }

  .nav a{
    padding:14px 12px;
    border-radius:10px;
  }

  .nav a:hover,
  .nav a.ativo{ background:var(--cinza); }

  .nav a.ativo::after{ display:none; }

  /* o botao do WhatsApp continua visivel, fora do menu sanduiche */
  .btn--barra{ margin-left:auto; }
}

@media (max-width:700px){

  :root{
    --gap:16px;
    --barra-h:64px;
    --barra-min:54px;
    --barra-py:10px;
    --barra-px:12px;
  }

  body{ padding:var(--topo) 12px 16px; }

  .barra__caixa{ gap:12px; }

  .brand__img{ height:36px; }

  .barra.rolou .brand__img{ height:30px; }

  .btn--barra{
    padding:11px 14px;
    font-size:10.5px;
    letter-spacing:.06em;
  }

  .bloco{ padding:24px; }

  .bloco--hero{ padding:0; }

  /* no celular nenhuma imagem passa de 300px de altura */
  .hero__img,
  .how__img{ height:300px; }

  .hero__body{
    left:20px;
    right:20px;
    width:auto;
  }

  /* o hero do celular tem 300px: o texto precisa caber inteiro, sem
     cortar o "Desde 1977" em cima nem o botao embaixo */
  .hero__kicker{ font-size:15px; gap:10px; margin-bottom:8px; }

  .hero__kicker::before{ width:24px; }

  .hero__title{ font-size:26px; line-height:1.08; }

  .hero__sub{ margin-top:10px; font-size:15px; line-height:1.45; }

  /* a quebra forcada deixava "e box —" sozinho numa linha */
  .hero__sub br{ display:none; }

  .hero__body .btn{ margin-top:16px; padding:13px 24px; }

  /* veu mais forte no meio, onde o texto passa sobre a parte clara da foto */
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(0,0,0,.6) 0%,
      rgba(0,0,0,.48) 50%,
      rgba(0,0,0,.62) 100%);
  }

  .hero__body{ text-shadow:0 1px 12px rgba(0,0,0,.35); }

  .h2{ font-size:30px; }

  .h2::before{ margin-bottom:14px; }

  .about__intro .muted{ font-size:16px; }

  .stats{ gap:22px 20px; }

  .stat b{ font-size:40px; }

  .catalog__grid{ grid-auto-columns:minmax(78%,1fr); }

  .step__txt b{ font-size:16px; }

  .step__txt p{ font-size:14px; }

  .badge{
    top:-14px;
    right:-4px;
    width:92px;
    height:92px;
    font-size:9.5px;
  }

  .mapa{ height:240px; }

  .rodape__base{
    flex-direction:column;
    align-items:flex-start;
  }

  /* entra de baixo depois do hero; sai mais rapido do que entra */
  .js .zap-flutuante{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:900;
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--vinho);
    color:var(--branco);
    box-shadow:0 6px 20px rgba(128,0,0,.35), 0 2px 6px rgba(0,0,0,.15);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px) scale(.96);
    transition:opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
  }

  .js .zap-flutuante.visivel{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s;
  }

  .js .zap-flutuante.visivel:active{ transform:scale(.95); }
}

/* celulares estreitos: logo + botao + sanduiche nao cabem lado a lado */
@media (max-width:400px){

  .brand__img{ height:30px; }

  .barra.rolou .brand__img{ height:26px; }
}

@media (max-width:350px){

  /* so o icone do WhatsApp — o aria-label do link continua dizendo "Contato" */
  .btn--barra .btn__txt{ display:none; }

  .btn--barra{ padding:11px; }

  .ico-zap{ width:18px; height:18px; }
}

/* ---------------- MOVIMENTO REDUZIDO ----------------
   Menos movimento, nao zero: some o deslocamento, fica o esmaecer. */

@media (prefers-reduced-motion:reduce){

  html{ scroll-behavior:auto; }

  .js .reveal,
  .js .reveal--lado{
    transform:none;
    transition:opacity .4s ease;
  }

  .obj__img{ transition:none; }

  .btn:active,
  .arrow:active,
  .menu-btn:active{ transform:none; }

  .galeria__caixa,
  .galeria.aberta .galeria__caixa,
  .nav,
  .nav.aberto,
  .js .zap-flutuante,
  .js .zap-flutuante.visivel{ transform:none; }
}