/* =============================================================================
   AREIA PRIMO — FOLHA DE ESTILO
   -----------------------------------------------------------------------------
   Organização:
     01. Variáveis e base
     02. Tipografia e elementos comuns
     03. Botões
     04. Fotografias (com estado "sem foto")
     05. Cabeçalho e navegação
     06. Hero
     07. Faixa industrial
     08. Produto
     09. Entrega
     10. De onde vem a Areia Primo
     11. Ambiental
     12. Orçamento e formulário
     13. Contato
     14. Rodapé
     15. Flutuantes e utilitários
     16. Animações
     17. Responsivo
============================================================================= */


/* =============================================================================
   01. VARIÁVEIS E BASE
============================================================================= */
:root{
  /* Azul da logo Areia Primo */
  --azul:          #3A3FA2;
  --azul-escuro:   #2B2F7D;
  --azul-noite:    #1B1F5A;
  --azul-tinta:    #12153D;

  /* Tons naturais */
  --areia-clara:   #EFE4CE;
  --areia:         #DCC79F;
  --areia-escura:  #C0A275;
  --bege:          #F5F0E6;
  --papel:         #FAF7F1;
  --marrom:        #6B563C;

  --carvao:        #17161A;
  --grafite:       #3B3A40;
  --cinza:         #7A7880;
  --branco:        #FFFFFF;

  --fonte-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --fonte-cond:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --fonte-texto:   "Barlow", "Segoe UI", system-ui, sans-serif;
  --fonte-script:  "Petit Formal Script", "Segoe Script", cursive;

  --margem:        clamp(1.25rem, 5vw, 5.5rem);
  --largura:       1360px;

  --transicao:     .45s cubic-bezier(.2,.7,.3,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--carvao);
  font-family:var(--fonte-texto);
  font-size:clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height:1.65;
  overflow-x:hidden;
}

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

::selection{ background:var(--azul); color:#fff; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul); color:#fff; padding:.9rem 1.4rem;
  font-family:var(--fonte-cond); text-transform:uppercase; letter-spacing:.1em;
}
.pular:focus{ left:0; }

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

/* O atributo hidden precisa vencer qualquer display definido por classe —
   sem isso, um elemento marcado como oculto continua ocupando espaço. */
[hidden]{ display:none !important; }


/* =============================================================================
   02. TIPOGRAFIA E ELEMENTOS COMUNS
============================================================================= */
/* ATENÇÃO AO EDITAR OS TÍTULOS
   A Anton tem acentos bem altos. Com a entrelinha justa que o site usa, uma
   palavra acentuada em MAIÚSCULA na segunda linha (Á, É, Ê...) sobe e encosta
   na linha de cima. Regra prática: deixe a palavra acentuada na PRIMEIRA linha
   do título. Ex.: "DA AREIA PRIMO ATÉ / A SUA OBRA." */
.titulo{
  font-family:var(--fonte-display);
  font-weight:400;
  font-size:clamp(2.6rem, 6.2vw, 5.4rem);
  line-height:.95;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--azul);
  margin:0 0 1.6rem;
}
.titulo--gigante{ font-size:clamp(3.2rem, 9vw, 7.4rem); }
.titulo--claro{ color:var(--branco); }

.olho{
  font-family:var(--fonte-cond);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--marrom);
  margin:0 0 1.2rem;
  display:flex; align-items:center; gap:.85rem;
}
.olho::before{
  content:""; width:34px; height:3px; background:var(--azul); flex:none;
}
.olho--claro{ color:var(--areia); }
.olho--claro::before{ background:var(--areia); }

.lead{
  font-size:clamp(1.1rem, 1rem + .5vw, 1.4rem);
  line-height:1.5;
  color:var(--grafite);
  max-width:46ch;
}

.assinatura{
  font-family:var(--fonte-script);
  font-size:clamp(1.25rem,2.1vw,1.85rem);
  color:var(--azul);
  margin:2.4rem 0 .1rem;
  line-height:1.25;
  text-wrap:balance; /* se quebrar, quebra equilibrado, sem palavra órfã */
}
.assinatura__cargo{
  font-family:var(--fonte-cond);
  letter-spacing:.22em; text-transform:uppercase;
  font-size:.85rem; color:var(--cinza); margin:0;
}


/* =============================================================================
   03. BOTÕES
============================================================================= */
.botao{
  --cor: var(--branco);
  --fundo: var(--azul);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.95rem 1.7rem;
  background:var(--fundo); color:var(--cor);
  font-family:var(--fonte-cond); font-weight:700;
  font-size:1rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; border:0; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.botao::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.14);
  transform:translateY(101%);
  transition:transform var(--transicao);
}
.botao:hover{ transform:translateY(-3px); box-shadow:0 12px 26px -14px rgba(0,0,0,.6); }
.botao:hover::after{ transform:translateY(0); }
.botao:active{ transform:translateY(-1px); }
.botao > *{ position:relative; z-index:1; }

.botao--azul{  --fundo:var(--azul);        --cor:#fff; }
.botao--areia{ --fundo:var(--areia-clara); --cor:var(--azul-noite); }
.botao--contorno{
  --fundo:transparent; --cor:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);
}
.botao--contorno:hover{ box-shadow:inset 0 0 0 2px #fff; }
/* contorno para fundos claros */
.botao--tinta{
  --fundo:transparent; --cor:var(--azul-noite);
  box-shadow:inset 0 0 0 2px rgba(27,31,90,.45);
}
.botao--tinta:hover{ box-shadow:inset 0 0 0 2px var(--azul-noite); }
.botao--tinta::after{ background:rgba(27,31,90,.10); }
.botao--grande{ padding:1.15rem 2.2rem; font-size:1.08rem; }
.botao--bloco{ width:100%; justify-content:center; text-align:center; padding:1.25rem 1.5rem; }

.icone-zap{ width:20px; height:20px; flex:none; }


/* =============================================================================
   04. FOTOGRAFIAS
   -----------------------------------------------------------------------------
   Cada <figure class="foto"> traz uma <img> real e uma legenda de reserva.
   Quando o arquivo ainda não existe, o JS marca a figura com .foto--vazia e
   entra a textura de areia com a indicação do arquivo esperado.
============================================================================= */
.foto{
  position:relative; margin:0; overflow:hidden;
  background:var(--areia-clara);
  isolation:isolate;
}
.foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
.foto__vazia{ display:none; }

.foto--vazia img{ display:none; }
.foto--vazia{
  background:
    linear-gradient(150deg, rgba(255,255,255,.5), rgba(192,162,117,.18)),
    url("../img/texturas/areia.svg") center/cover,
    var(--areia);
}
.foto--vazia .foto__vazia{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.5rem; text-align:center;
  font-family:var(--fonte-cond); text-transform:uppercase;
  color:var(--marrom);
}
.foto--vazia .foto__vazia::before{
  content:""; position:absolute; inset:14px;
  border:1px dashed rgba(107,86,60,.45);
}
.foto__arquivo{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  text-transform:none; font-size:.78rem; letter-spacing:0;
  background:rgba(255,255,255,.72); padding:.35rem .6rem;
  color:var(--azul-noite);
  max-width:100%; overflow-wrap:anywhere;
}
.foto__desc{ font-size:.9rem; letter-spacing:.16em; }

/* Nas fotos de fundo (hero / ambiental) o lembrete vai para o canto,
   para não competir com o texto por cima. */
.foto--capa.foto--vazia .foto__vazia{
  inset:auto 0 0 auto; flex-direction:row; align-items:flex-end;
  gap:.6rem; padding:1rem 1.2rem; opacity:.75;
}
.foto--capa.foto--vazia .foto__vazia::before{ display:none; }
.foto--capa.foto--vazia .foto__desc{ display:none; }

/* variantes de proporção */
.foto--capa{ position:absolute; inset:0; }
.foto--alta{ aspect-ratio:4/5; }
.foto--larga{ aspect-ratio:16/10; }

/* zoom suave no hover de blocos clicáveis/visuais */
.historia__midia .foto:hover img{ transform:scale(1.04); }


/* =============================================================================
   05. CABEÇALHO
============================================================================= */
/* O cabeçalho é claro desde o topo, como na peça da empresa: fundo papel,
   navegação escura e botão azul. */
.cabecalho{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,241,.93);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(23,22,26,.10);
  transition:box-shadow .4s ease, padding .4s ease;
  padding:.7rem 0;
}
.cabecalho__interno{
  max-width:var(--largura); margin:0 auto;
  padding:0 var(--margem);
  display:flex; align-items:center; gap:1.5rem;
}

.cabecalho--fixo{
  padding:.45rem 0;
  box-shadow:0 10px 30px -22px rgba(23,22,26,.7), 0 1px 0 rgba(23,22,26,.12);
}

.marca{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--azul);
  transition:color .4s ease;
}
.marca__simbolo{ width:34px; height:40px; flex:none; }
.marca__nome{
  font-family:var(--fonte-display);
  font-size:1.5rem; letter-spacing:.02em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
}

.navegacao{
  margin-left:auto;
  display:flex; align-items:center; gap:2rem;
}
.navegacao a{
  font-family:var(--fonte-cond); font-weight:600;
  font-size:1rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--carvao); text-decoration:none;
  position:relative; padding:.35rem 0;
  transition:color .3s ease;
}
.navegacao a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.navegacao a:hover::after,
.navegacao a.ativo::after{ transform:scaleX(1); transform-origin:left; }
.navegacao a.ativo{ color:var(--azul); }

.navegacao__cta{ display:none; }
.cabecalho__cta{ flex:none; }

.hamburger{
  display:none;
  width:46px; height:40px; background:none; border:0; cursor:pointer;
  padding:0; margin-left:auto;
}
.hamburger span{
  display:block; height:3px; width:28px; margin:5px auto;
  background:var(--carvao);
  transition:transform .35s ease, opacity .25s ease, background .4s ease;
}
.hamburger[aria-expanded="true"] span{ background:var(--branco); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }


/* =============================================================================
   06. HERO
============================================================================= */
/* A peça da empresa remontada: pátio ao fundo, headline azul à esquerda,
   fotografias emolduradas e o bloco da marca com a tarja do CODEMA. */
.hero{
  position:relative;
  min-height:min(80svh, 700px);
  padding:clamp(2.5rem,5vh,4rem) 0 clamp(3rem,6vh,4.5rem);
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--areia-clara);
}
.hero__fundo{
  position:absolute; inset:-8% 0;
  background:
    url("../img/hero-fundo.jpg") center 45%/cover no-repeat,
    url("../img/texturas/areia.svg") center/cover;
  will-change:transform;
}
.hero__veu{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(245,240,230,.92) 0%,
    rgba(245,240,230,.76) 28%,
    rgba(245,240,230,.20) 56%,
    rgba(245,240,230,.04) 100%);
}

.hero__grade{
  position:relative;
  max-width:var(--largura); width:100%;
  margin:auto; padding:0 var(--margem);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);
  align-items:center;
  column-gap:clamp(2rem,4.5vw,4.5rem);
  row-gap:clamp(2rem,5vh,3rem);
}

/* --- lado esquerdo: headline --- */
.hero__titulo{
  font-family:var(--fonte-display); font-weight:400;
  font-size:clamp(2.9rem, 5.2vw, 5.4rem);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--azul);
  margin:0 0 1.4rem;
}
.hero__titulo span{ display:block; }
.hero__titulo span:last-child{ color:var(--azul-noite); }

.hero__linha{
  font-family:var(--fonte-cond); font-weight:700;
  font-size:clamp(1rem,.95rem + .4vw,1.25rem);
  letter-spacing:.04em; text-transform:uppercase; line-height:1.35;
  color:var(--carvao);
  margin:0 0 2rem;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__acoes .botao--grande{ padding:1.1rem 1.8rem; font-size:1.02rem; }

/* --- lado direito: a peça --- */
.peca__fotos{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.6rem,1.2vw,1.1rem);
  margin-bottom:clamp(1.4rem,3vh,2.2rem);
}
.peca__fotos figure{
  margin:0; overflow:hidden;
  aspect-ratio:16/10;
  background:#fff;
  border:4px solid #fff;
  border-radius:14px;
  box-shadow:0 18px 34px -20px rgba(23,22,26,.65);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.peca__fotos figure:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 44px -22px rgba(23,22,26,.7);
}
.peca__fotos img{
  width:100%; height:100%; object-fit:cover;
  border-radius:10px;
}

.peca__marca{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; gap:clamp(.9rem,2vw,1.6rem);
}
.peca__simbolo{
  width:clamp(64px,8.5vw,118px); height:auto; aspect-ratio:838/981;
  color:var(--azul); flex:none;
}
.peca__nome{
  font-family:var(--fonte-display); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,4.1rem);
  line-height:.9; letter-spacing:.005em; text-transform:uppercase;
  color:var(--azul);
  margin:0 0 .7rem;
}
.peca__nota{
  margin:0;
  background:rgba(255,255,255,.78);
  padding:.7rem .95rem;
  font-family:var(--fonte-cond); font-weight:600;
  font-size:clamp(.82rem,.78rem + .18vw,.95rem);
  line-height:1.45; letter-spacing:.02em; text-transform:uppercase;
  color:var(--grafite);
}
.peca__nota strong{ color:var(--azul-noite); font-weight:700; }

.hero__seta{
  position:absolute; left:50%; bottom:1.4rem; translate:-50% 0;
  width:42px; height:42px; display:none;
  border:1px solid rgba(58,63,162,.4); border-radius:50%;
  background:rgba(255,255,255,.5);
}
.hero__seta span{
  position:absolute; inset:0; margin:auto;
  width:9px; height:9px;
  border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:translateY(-3px) rotate(45deg);
  animation:desce 1.8s ease-in-out infinite;
}
@keyframes desce{
  0%,100%{ transform:translateY(-5px) rotate(45deg); opacity:.4; }
  50%    { transform:translateY(1px)  rotate(45deg); opacity:1; }
}
@media (min-width:900px){ .hero__seta{ display:block; } }


/* =============================================================================
   07. FAIXA INDUSTRIAL
============================================================================= */
.faixa{
  background:var(--azul);
  color:var(--branco);
  padding:.75rem 0;
  overflow:hidden;
}
.faixa__trilho{
  display:flex; width:max-content;
  animation:correr 38s linear infinite;
}
.faixa__grupo{
  display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem;
  font-family:var(--fonte-display); font-size:1.15rem;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.faixa__grupo i{ font-style:normal; font-size:.6rem; color:var(--areia); }
@keyframes correr{ to{ transform:translateX(-50%); } }


/* =============================================================================
   08. PRODUTO
============================================================================= */
.produto{
  position:relative;
  padding:clamp(4.5rem,11vh,8.5rem) var(--margem);
  background:var(--papel);
}
.produto::before{
  content:""; position:absolute; inset:0;
  background:url("../img/texturas/topografia.svg") center/cover no-repeat;
  opacity:.18; pointer-events:none;
}
.produto__grade{
  position:relative;
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.produto__texto .lead{ margin:0 0 2rem; }
.produto__nota{
  border-left:3px solid var(--areia);
  padding-left:1.2rem; margin:0 0 2.4rem;
  color:var(--grafite); max-width:44ch;
}

.ficha{
  margin:0 0 2rem; padding:0;
  border-top:1px solid rgba(23,22,26,.14);
}
.ficha > div{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.85rem 0; border-bottom:1px solid rgba(23,22,26,.14);
}
.ficha dt{
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; font-size:.88rem;
  color:var(--cinza);
}
.ficha dd{ margin:0; font-weight:500; text-align:right; }

.produto__midia{ position:relative; }
.produto__midia::before{
  content:""; position:absolute; inset:auto -18px -18px auto;
  width:62%; height:62%; background:var(--azul);
}


/* =============================================================================
   09. ENTREGA
============================================================================= */
.entrega{
  position:relative;
  background:var(--azul-noite);
  color:var(--branco);
  padding:clamp(4.5rem,11vh,8.5rem) var(--margem);
  overflow:hidden;
}
.entrega::before{
  content:""; position:absolute; inset:0;
  background:url("../img/texturas/topografia.svg") center/cover no-repeat;
  opacity:.13; filter:invert(1) sepia(.5) saturate(.6); pointer-events:none;
}
.entrega > *{ position:relative; max-width:var(--largura); margin-inline:auto; }

.entrega__topo{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:end;
  padding-bottom:clamp(2.5rem,6vh,4rem);
}
.entrega__texto{
  color:rgba(255,255,255,.78);
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  max-width:38ch; margin:0;
}

.entrega__fluxo{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
}
/* Sem fotografias nesta seção, a faixa de etapas é quem a sustenta:
   respira mais e os elementos ganham corpo. */
.etapa{
  position:relative;
  padding:clamp(2.6rem,6.5vh,4.2rem) 1.5rem clamp(2.6rem,6.5vh,4.2rem) 0;
  transition:background .4s ease;
}
.etapa + .etapa{ padding-left:1.8rem; }
.etapa + .etapa::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%;
  width:1px; background:rgba(255,255,255,.22);
}
.etapa__num{
  display:block;
  font-family:var(--fonte-display); font-size:1rem;
  letter-spacing:.12em; color:var(--areia); margin-bottom:1.4rem;
}
.etapa__icone{
  width:clamp(48px,4vw,58px); height:auto; aspect-ratio:1;
  color:#fff; margin-bottom:1.3rem;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.etapa:hover .etapa__icone{ transform:translateX(6px); }
.etapa h3{
  font-family:var(--fonte-display); font-weight:400;
  font-size:clamp(1.4rem,2.7vw,2.1rem);
  text-transform:uppercase; letter-spacing:.01em;
  margin:0; line-height:1;
}


/* =============================================================================
   10. DE ONDE VEM A AREIA PRIMO
============================================================================= */
.historia{
  position:relative;
  padding:clamp(4.5rem,11vh,8.5rem) var(--margem);
  background:var(--bege);
}
.historia__grade{
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.historia__corpo p{
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  color:var(--grafite); max-width:48ch;
}
.historia__corpo strong{ color:var(--azul); font-weight:600; }
.historia__midia{ position:relative; }
.historia__midia::after{
  content:""; position:absolute; left:-20px; top:-20px;
  width:120px; height:120px;
  border-left:4px solid var(--azul); border-top:4px solid var(--azul);
}
/* Selo da fundação. Fica no alto à direita: embaixo brigaria com o botão
   flutuante do WhatsApp, que mora no canto inferior direito da tela. */
.historia__selo{
  position:absolute; right:-18px; top:-18px;
  display:grid; place-content:center; text-align:center;
  width:clamp(96px,11vw,132px); aspect-ratio:1;
  background:var(--azul); color:#fff;
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  font-size:.75rem; line-height:1.5;
}
.historia__selo strong{
  display:block;
  font-family:var(--fonte-display); font-weight:400;
  font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:.02em;
  line-height:1; margin-top:.15rem;
}


/* =============================================================================
   11. AMBIENTAL
============================================================================= */
.ambiental{
  position:relative;
  background:var(--azul-tinta);
  color:var(--branco);
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:clamp(420px,62vh,640px);
  overflow:hidden;
}
.ambiental__texto{
  padding:clamp(3.5rem,9vh,7rem) clamp(1.5rem,5vw,5rem)
          clamp(3.5rem,9vh,7rem) var(--margem);
  max-width:640px; margin-left:auto; width:100%;
}
.ambiental__icone{ width:54px; height:54px; color:var(--areia); margin-bottom:1.6rem; }
.ambiental__texto p{
  color:rgba(255,255,255,.8); max-width:46ch; margin:0;
  font-size:clamp(1rem,.97rem + .3vw,1.15rem);
}
.ambiental__texto strong{ color:var(--areia); font-weight:600; }
.ambiental__midia{
  position:relative; align-self:stretch; overflow:hidden;
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
/* sobra vertical para o parallax não descobrir as bordas */
.ambiental__midia .foto--capa{ inset:-14% 0; will-change:transform; }


/* =============================================================================
   12. ORÇAMENTO E FORMULÁRIO
============================================================================= */
.orcamento{
  position:relative;
  background:var(--azul-noite);
  padding:0 0 clamp(4rem,10vh,7rem);
}
.orcamento::before{
  content:""; position:absolute; inset:0;
  background:url("../img/texturas/areia.svg") center/cover no-repeat;
  opacity:.09; pointer-events:none;
}

.passos{
  position:relative;
  max-width:var(--largura); margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) var(--margem);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.passo{ display:flex; align-items:baseline; gap:.9rem; }
.passo span{
  font-family:var(--fonte-display);
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  color:rgba(255,255,255,.22); line-height:1;
}
.passo p{
  margin:0; color:#fff;
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  font-size:clamp(.88rem,1.4vw,1rem);
}

.orcamento__grade{
  position:relative;
  max-width:var(--largura); margin:0 auto;
  padding:clamp(3rem,8vh,5rem) var(--margem) 0;
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.orcamento__chamada .titulo{ font-size:clamp(2.4rem,5.2vw,4.6rem); }
.orcamento__chamada p{ color:rgba(255,255,255,.8); max-width:34ch; }
.orcamento__chamada .botao{ margin-top:1.5rem; }
.orcamento__ou{
  font-family:var(--fonte-cond); letter-spacing:.2em;
  text-transform:uppercase; font-size:.82rem;
  color:rgba(255,255,255,.45); margin-top:1.1rem;
}

.formulario{
  background:var(--papel);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
}
.campo{ display:flex; flex-direction:column; gap:.4rem; }
.campo--largo{ grid-column:1/-1; }
.campo label{
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  font-size:.82rem; color:var(--grafite);
}
.campo input,.campo textarea{
  font-family:var(--fonte-texto); font-size:1rem;
  padding:.8rem .9rem;
  border:1px solid rgba(23,22,26,.2);
  background:#fff; color:var(--carvao);
  border-radius:0; resize:vertical;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.campo input:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(58,63,162,.16);
}
.campo input.invalido,.campo textarea.invalido{ border-color:#B4402F; }
.formulario .botao{ grid-column:1/-1; margin-top:.4rem; }
.formulario__aviso{
  grid-column:1/-1; margin:0; min-height:1.2em;
  font-family:var(--fonte-cond); letter-spacing:.08em;
  text-transform:uppercase; font-size:.85rem; color:var(--azul);
}
.formulario__aviso.erro{ color:#B4402F; }


/* =============================================================================
   13. CONTATO
============================================================================= */
.contato{
  padding:clamp(4.5rem,11vh,8.5rem) var(--margem);
  background:var(--bege);
}
.contato__grade{
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
/* enquanto não houver mapa, o contato ocupa a largura inteira */
.contato__grade.sem-mapa{ grid-template-columns:1fr; }
.contato__grade.sem-mapa .contato__dados{
  display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4rem);
}
.contato__grade.sem-mapa .contato__dados > div:nth-child(2){ border-top:1px solid rgba(23,22,26,.14); }
.contato__grade.sem-mapa .contato__dados > div:nth-child(3){ border-bottom:1px solid rgba(23,22,26,.14); }

.contato__dados{ margin:0 0 2.4rem; padding:0; }
.contato__dados > div{
  display:grid; grid-template-columns:130px 1fr; gap:1rem;
  padding:1rem 0; border-top:1px solid rgba(23,22,26,.14);
}
.contato__dados > div:last-child{ border-bottom:1px solid rgba(23,22,26,.14); }
.contato__dados dt{
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  font-size:.85rem; color:var(--cinza); padding-top:.15rem;
}
.contato__dados dd{ margin:0; font-size:1.08rem; font-weight:500; }
.contato__dados dd a{ color:var(--azul); text-decoration:none; }
.contato__dados dd a:hover{ text-decoration:underline; }
.contato__dados dd.vazio{ color:var(--cinza); font-style:italic; font-weight:400; }

.contato__mapa{ min-height:380px; background:var(--areia-clara); }
.contato__mapa iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; }


/* =============================================================================
   14. RODAPÉ
============================================================================= */
.rodape{
  background:var(--azul-noite);
  color:var(--branco);
  padding:clamp(3.5rem,9vh,6rem) var(--margem) 2rem;
}
.rodape__topo{
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,6vh,4rem);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.rodape__marca{ display:flex; gap:1.1rem; align-items:flex-start; }
.rodape__simbolo{ width:52px; height:62px; color:var(--branco); flex:none; }
.rodape__nome{
  font-family:var(--fonte-display); font-size:clamp(1.9rem,4vw,2.6rem);
  text-transform:uppercase; line-height:1; margin:0 0 .5rem;
}
.rodape__tag{
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  font-size:.92rem; color:var(--areia); margin:0;
}
.rodape__links{ display:flex; flex-direction:column; gap:.7rem; }
.rodape__links a{
  font-family:var(--fonte-cond); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; font-size:.95rem;
  color:rgba(255,255,255,.78); text-decoration:none;
  transition:color .25s ease, transform .25s ease;
  width:max-content;
}
.rodape__links a:hover{ color:#fff; transform:translateX(4px); }
.rodape__contato{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.rodape__dado{
  margin:0; color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.4;
}
.rodape__dado:empty{ display:none; }
.rodape__base{
  max-width:var(--largura); margin:0 auto;
  padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--fonte-cond); letter-spacing:.1em;
  text-transform:uppercase; font-size:.8rem;
  color:rgba(255,255,255,.45);
}
.rodape__base p{ margin:0; }


/* =============================================================================
   15. FLUTUANTES
============================================================================= */
.zap-flutuante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:110;
  width:58px; height:58px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.zap-flutuante svg{ width:30px; height:30px; }
.zap-flutuante.visivel{ opacity:1; visibility:visible; transform:none; }
.zap-flutuante:hover{ transform:scale(1.06); }


/* =============================================================================
   16. ANIMAÇÕES
============================================================================= */
[data-anim]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
[data-anim].visivel{ opacity:1; transform:none; }
[data-anim]:nth-child(2){ transition-delay:.07s; }
[data-anim]:nth-child(3){ transition-delay:.14s; }
[data-anim]:nth-child(4){ transition-delay:.21s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-anim]{ opacity:1; transform:none; }
  .hero__fundo,.ambiental__midia .foto--capa{ transform:none !important; }
}


/* =============================================================================
   17. RESPONSIVO
============================================================================= */
@media (max-width:1080px){
  .entrega__topo{ grid-template-columns:1fr; align-items:start; }
  .entrega__texto{ max-width:46ch; }
  .rodape__topo{ grid-template-columns:1fr 1fr; }
  .rodape__marca{ grid-column:1/-1; }
}

@media (max-width:900px){
  html{ scroll-padding-top:70px; }

  /* --- menu mobile --- */
  .cabecalho__cta{ display:none; }
  .hamburger{ display:block; }
  .navegacao{
    position:fixed; inset:0;
    margin:0; padding:6rem var(--margem) 2.5rem;
    background:var(--azul-noite);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.4rem;
    clip-path:circle(0% at calc(100% - 45px) 40px);
    transition:clip-path .6s cubic-bezier(.7,0,.3,1);
    pointer-events:none;
  }
  .navegacao.aberta{
    clip-path:circle(150% at calc(100% - 45px) 40px);
    pointer-events:auto;
  }
  /* Com o menu aberto o cabeçalho perde o fundo desfocado: backdrop-filter
     cria bloco de contenção e prenderia o painel fixo dentro da barra. */
  .cabecalho.cabecalho--menu{
    background:transparent; backdrop-filter:none; box-shadow:none;
  }

  /* marca e botão continuam acima do painel do menu */
  .marca,.hamburger{ position:relative; z-index:2; }
  .cabecalho--menu .marca{ color:#fff; }
  .cabecalho--menu .hamburger span{ background:#fff; }

  .navegacao a{
    color:#fff !important;
    font-family:var(--fonte-display); font-size:2rem; line-height:1.25;
    letter-spacing:.01em; text-transform:uppercase;
  }
  .navegacao a::after{ display:none; }
  .navegacao a.ativo{ color:var(--areia) !important; }
  .navegacao a.navegacao__cta{
    display:inline-flex; margin-top:1.4rem; padding:1.05rem 1.9rem;
    background:var(--areia-clara);
    font-family:var(--fonte-cond); font-size:1.05rem; letter-spacing:.13em;
    color:var(--azul-noite) !important;
  }

  /* o botão flutuante sai de cena enquanto o menu está aberto */
  .cabecalho--menu ~ .zap-flutuante{ opacity:0; visibility:hidden; }

  /* --- hero em coluna: headline, botões e a peça logo abaixo --- */
  .hero__grade{ grid-template-columns:1fr; }
  .hero__titulo{ font-size:clamp(2.7rem, 8vw, 4.6rem); }
  .hero__veu{
    background:linear-gradient(to bottom,
      rgba(245,240,230,.90) 0%,
      rgba(245,240,230,.74) 42%,
      rgba(245,240,230,.42) 100%);
  }

  /* --- seções em coluna --- */
  .produto__grade,
  .historia__grade,
  .contato__grade,
  .orcamento__grade,
  .ambiental{ grid-template-columns:1fr; }

  .produto__midia{ order:-1; }
  .historia__midia{ order:-1; }
  .historia__midia::after{ display:none; }

  .ambiental{ min-height:0; }
  .ambiental__texto{ max-width:none; padding-inline:var(--margem); order:2; }
  .ambiental__midia{ clip-path:none; height:52vw; max-height:420px; order:1; }

  .entrega__fluxo{ grid-template-columns:1fr 1fr; }
  .etapa{ padding:1.8rem 1.2rem 1.8rem 0; }
  .etapa:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.22); }
  .etapa:nth-child(odd){ padding-left:0; }
  .etapa:nth-child(odd)::before{ display:none; }
  .etapa:nth-child(even){ padding-left:1.5rem; }

  .passos{ grid-template-columns:1fr 1fr; gap:1.2rem 1.5rem; }
  .contato__mapa{ min-height:300px; }
  .contato__mapa iframe{ min-height:300px; }
}

@media (max-width:640px){
  /* no celular a peça fica compacta: fotos menores e marca em bloco */
  .peca__fotos{ gap:.5rem; }
  .peca__fotos figure{ border-width:3px; border-radius:10px; }
  .peca__fotos img{ border-radius:7px; }
  .peca__marca{ gap:.8rem; }
  .peca__nome{ margin-bottom:.5rem; }
  .peca__nota{ padding:.6rem .75rem; }

  .faixa__grupo{ font-size:1rem; gap:1.5rem; padding-right:1.5rem; }


  .formulario{ grid-template-columns:1fr; }
  /* no celular o selo encosta na borda da foto, sem sair da tela */
  .historia__selo{ right:0; top:-14px; }
  .contato__dados > div{ grid-template-columns:1fr; gap:.15rem; }
  .rodape__topo{ grid-template-columns:1fr; }
  .produto__midia::before{ inset:auto -10px -10px auto; }
  .botao--grande{ width:100%; justify-content:center; }
  .hero__acoes{ flex-direction:column; align-items:stretch; }
}