/* =====================================================================
   JOSEANE DUMMER — DESIGN DE INTERIORES
   Folha de estilo compartilhada (index.html, projeto.html, obrigado.html)

   Paleta de materiais: travertino, verde profundo, latão escovado.
   Tipografia: Bodoni Moda (títulos) + Jost (texto).
   ===================================================================== */

:root{
  /* ---- cor ---- */
  --pedra:       #F1EFE9;
  --pedra-media: #DFDACF;
  --linho:       #FBFAF7;
  --verde:       #232B26;
  --verde-claro: #3A453C;
  --tinta:       #1C1F1C;
  --tinta-suave: #565C55;
  --latao:       #9A7B4F;
  --latao-claro: #C0A57C;

  /* ---- tipografia ---- */
  --titulo: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --texto:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* escala tipográfica (razão 1.25, fluida) */
  --t1: clamp(2.9rem, 6.6vw, 5.8rem);
  --t2: clamp(2rem, 4.2vw, 3.3rem);
  --t3: clamp(1.3rem, 1.9vw, 1.65rem);
  --t4: 1.12rem;
  --miudo: .76rem;

  /* ---- ritmo ---- */
  --margem: clamp(1.25rem, 5vw, 5.5rem);
  --secao:  clamp(4.5rem, 10vw, 9rem);
  --medida: 1560px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--texto);font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);line-height:1.72;
  color:var(--tinta);background:var(--pedra);overflow-x:hidden;
  font-feature-settings:"kern" 1;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--titulo);font-weight:400;line-height:1.1;letter-spacing:-.012em}
::selection{background:var(--latao);color:var(--linho)}
:focus-visible{outline:2px solid var(--latao);outline-offset:5px}
.medida{max-width:var(--medida);margin-inline:auto}
[id]{scroll-margin-top:5.5rem}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--margem);top:1rem;z-index:99;background:var(--latao);color:var(--verde);padding:.7rem 1.2rem}

/* ---------------------------------------------------------------
   ESPAÇOS DE IMAGEM — o rótulo some sozinho quando a foto existe
   --------------------------------------------------------------- */
.slot{position:relative;overflow:hidden;background:var(--pedra-media);aspect-ratio:var(--r,4/5)}
.slot::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(154,123,79,.09) 14px 15px)}
.slot-tag{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:.7rem;letter-spacing:.07em;color:var(--tinta-suave);text-align:center;
  padding:.55rem .85rem;border:1px solid rgba(28,31,28,.18);background:rgba(251,250,247,.78);
  max-width:82%;line-height:1.5;
}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ---------------------------------------------------------------
   NAVEGAÇÃO E MARCA
   --------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;color:var(--linho);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.35rem var(--margem);
  transition:background .45s ease,padding .45s ease,color .45s ease,box-shadow .45s ease;
}
.nav.solida{background:var(--pedra);color:var(--tinta);padding:.8rem var(--margem);box-shadow:0 1px 0 rgba(28,31,28,.1)}
.nav.clara{color:var(--tinta)} /* páginas internas que abrem em fundo claro */
/* com o menu aberto a nav fica transparente sobre o overlay escuro */
.nav.menu-aberto{background:transparent;box-shadow:none;color:var(--linho)}

.marca{display:flex;align-items:center;gap:.85rem;position:relative;z-index:2}
.monograma{width:34px;height:34px;flex:none}
.monograma rect{fill:none;stroke:currentColor;stroke-width:1;opacity:.55}
.monograma text{font-family:var(--titulo);font-size:15px;fill:currentColor}
.marca-nome{font-family:var(--titulo);font-size:1.08rem;letter-spacing:.05em;line-height:1.15;white-space:nowrap}
.marca-nome span{display:block;font-family:var(--texto);font-size:.56rem;letter-spacing:.32em;opacity:.68;margin-top:.28rem}

.menu{display:flex;gap:2.1rem;align-items:center;font-size:.81rem;letter-spacing:.09em}
.menu a{position:relative;padding-bottom:3px}
.menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s ease}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current]::after{width:100%}
.btn-menu{display:none;position:relative;z-index:2;background:none;border:0;color:inherit;cursor:pointer;padding:.4rem;font-size:.78rem;letter-spacing:.12em;font-family:var(--texto)}

/* ---------------------------------------------------------------
   ELEMENTOS RECORRENTES
   --------------------------------------------------------------- */
.secao{padding:var(--secao) var(--margem)}
.escura{background:var(--verde);color:var(--linho)}
.linho{background:var(--linho)}
.titulo{font-size:var(--t2);margin-bottom:1.3rem}
.titulo em{font-style:italic}
.intro{max-width:58ch;color:var(--tinta-suave)}
.escura .intro{color:rgba(251,250,247,.72)}
.filete{width:54px;height:1px;background:var(--latao);margin-bottom:2rem}

.botao{
  display:inline-block;padding:.95rem 2.3rem;border:1px solid var(--latao);color:var(--latao);
  font-family:var(--texto);font-size:.79rem;letter-spacing:.15em;cursor:pointer;background:none;
  transition:background .35s ease,color .35s ease;
}
.botao:hover,.botao:focus-visible{background:var(--latao);color:var(--verde)}
.botao.solido{background:var(--latao);color:var(--verde)}
.botao.solido:hover,.botao.solido:focus-visible{background:transparent;color:var(--latao)}
.link-fino{font-size:.79rem;letter-spacing:.13em;border-bottom:1px solid currentColor;padding-bottom:3px;opacity:.8}
.link-fino:hover{opacity:1}

/* ---------------------------------------------------------------
   CAPA DA HOME
   --------------------------------------------------------------- */
.capa{min-height:100vh;min-height:100svh;background:var(--verde);color:var(--linho);display:grid;grid-template-columns:1fr 1.05fr;align-items:center;position:relative}
.capa-texto{padding:9.5rem var(--margem) 5rem;position:relative;z-index:3}
.capa h1{font-size:var(--t1);margin-bottom:1.7rem}
.capa h1 em{font-style:italic}
.capa p{max-width:37ch;color:rgba(251,250,247,.78);padding-left:1.35rem;border-left:1px solid var(--latao)}
.capa-acoes{display:flex;gap:1.6rem;align-items:center;margin-top:2.9rem;flex-wrap:wrap}
.capa-imagem{position:relative;height:100vh;height:100svh}
.capa-imagem .slot{aspect-ratio:auto;height:100%;background:var(--verde-claro)}
.capa-imagem .slot::before{background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(251,250,247,.06) 14px 15px)}
.capa-imagem .slot-tag{background:rgba(35,43,38,.8);color:rgba(251,250,247,.7);border-color:rgba(251,250,247,.25)}
.local-capa{position:absolute;left:var(--margem);bottom:2.1rem;z-index:4;font-size:.68rem;letter-spacing:.2em;color:rgba(251,250,247,.45)}

/* entrada — único momento de animação não acionada pelo usuário */
.entra{opacity:0;transform:translateY(16px);animation:sobe .9s cubic-bezier(.22,.61,.36,1) forwards}
.entra:nth-child(2){animation-delay:.1s}
.entra:nth-child(3){animation-delay:.2s}
@keyframes sobe{to{opacity:1;transform:none}}

/* ---------------------------------------------------------------
   SOBRE
   --------------------------------------------------------------- */
.sobre{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.sobre p+p{margin-top:1.35rem}
.destaque{font-family:var(--titulo);font-size:1.4rem;line-height:1.5;font-style:italic;margin-bottom:1.9rem}
.dados{display:flex;gap:3rem;margin-top:2.7rem;flex-wrap:wrap}
.dado b{display:block;font-family:var(--titulo);font-size:2.5rem;font-weight:400;color:var(--latao)}
.dado span{font-size:.76rem;letter-spacing:.09em;color:var(--tinta-suave)}

/* ---------------------------------------------------------------
   SERVIÇOS
   --------------------------------------------------------------- */
.servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:3.6rem;border-top:1px solid rgba(251,250,247,.18)}
.servico{padding:2.4rem 2rem 2.9rem 0;border-bottom:1px solid rgba(251,250,247,.18)}
.servico+.servico{padding-left:2rem;border-left:1px solid rgba(251,250,247,.18)}
.servico h3{font-size:var(--t3);margin-bottom:.85rem}
.servico p{font-size:.94rem;color:rgba(251,250,247,.7);max-width:34ch}

/* ---------------------------------------------------------------
   PROJETOS (mosaico assimétrico)
   --------------------------------------------------------------- */
.cabecalho{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3.6rem}
.mosaico{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.3vw,2.1rem)}
.projeto{position:relative;display:block}
.projeto .slot img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.projeto:hover .slot img,.projeto:focus-visible .slot img{transform:scale(1.035)}
.projeto figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.95rem;align-items:baseline}
.projeto h3{font-size:1.28rem}
.projeto small{font-size:.73rem;letter-spacing:.09em;color:var(--tinta-suave);white-space:nowrap}
.p1{grid-column:1/8}
.p2{grid-column:8/13;align-self:end}
.p3{grid-column:1/6}
.p4{grid-column:6/13}
.p5{grid-column:1/7;align-self:end}
.p6{grid-column:7/13}

/* estudos em 3D — grade regular, deliberadamente distinta das fotos */
.estudos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.3vw,2.1rem);margin-top:3rem}
.estudos .slot{--r:4/3}
.estudo h3{font-size:1.15rem;margin-top:.85rem}
.estudo p{font-size:.86rem;color:var(--tinta-suave)}

/* ---------------------------------------------------------------
   PROCESSO
   --------------------------------------------------------------- */
.etapas{counter-reset:etapa;margin-top:3.2rem;border-top:1px solid rgba(28,31,28,.14)}
.etapa{display:grid;grid-template-columns:auto 1fr 1.45fr;gap:clamp(1.4rem,4vw,4rem);padding:2.2rem 0;border-bottom:1px solid rgba(28,31,28,.14);align-items:baseline}
.etapa::before{counter-increment:etapa;content:counter(etapa,decimal-leading-zero);font-family:var(--titulo);font-size:1.05rem;color:var(--latao)}
.etapa h3{font-size:var(--t3)}
.etapa p{color:var(--tinta-suave);font-size:.96rem}

/* ---------------------------------------------------------------
   PROVA SOCIAL
   --------------------------------------------------------------- */
.depoimentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2.2rem,5vw,5rem);margin-top:3.2rem}
.depoimento p{font-family:var(--titulo);font-style:italic;font-size:1.32rem;line-height:1.55}
.depoimento cite{display:block;margin-top:1.3rem;font-family:var(--texto);font-style:normal;font-size:.76rem;letter-spacing:.11em;color:var(--latao-claro)}
.imprensa{display:flex;gap:clamp(2rem,5vw,4.5rem);align-items:center;flex-wrap:wrap;margin-top:4rem;padding-top:2.4rem;border-top:1px solid rgba(251,250,247,.18)}
.imprensa span{font-size:.72rem;letter-spacing:.16em;color:rgba(251,250,247,.6)}
.imprensa b{font-family:var(--titulo);font-weight:400;font-size:1.15rem;color:rgba(251,250,247,.8)}

/* faixa do Instagram */
.grade-insta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.3vw,1.1rem);margin-top:2.6rem}
.grade-insta .slot{--r:1/1}

/* ---------------------------------------------------------------
   CONTATO E FORMULÁRIO QUALIFICADOR
   --------------------------------------------------------------- */
.contato{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,7vw,7rem)}
.canais{margin-top:2.6rem;display:grid;gap:1.5rem}
.canal span{display:block;font-size:.7rem;letter-spacing:.14em;color:rgba(251,250,247,.66)}
.canal a,.canal b{font-family:var(--titulo);font-size:1.3rem;font-weight:400}
.canal a{border-bottom:1px solid transparent;transition:border-color .3s}
.canal a:hover{border-color:var(--latao)}
.investimento{margin-top:2.6rem;padding:1.4rem 1.6rem;border:1px solid rgba(251,250,247,.2)}
.investimento p{font-size:.92rem;color:rgba(251,250,247,.75);max-width:38ch}
.investimento b{font-family:var(--titulo);font-weight:400;color:var(--latao-claro)}

form{display:grid;gap:1.5rem}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.campo{display:grid;gap:.45rem}
.campo label{font-size:.72rem;letter-spacing:.13em;color:rgba(251,250,247,.72)}
.campo input,.campo select,.campo textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(251,250,247,.28);
  color:var(--linho);font-family:var(--texto);font-size:1rem;font-weight:300;padding:.55rem 0;
  transition:border-color .3s;border-radius:0;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--latao)}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--latao) 50%),linear-gradient(135deg,var(--latao) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.campo select option{background:var(--verde);color:var(--linho)}
.campo textarea{resize:vertical;min-height:84px}
.consentimento{display:flex;gap:.7rem;align-items:flex-start;font-size:.8rem;color:rgba(251,250,247,.72);line-height:1.5}
.consentimento input{width:16px;height:16px;accent-color:var(--latao);flex:none;margin-top:.2rem}
form .botao{justify-self:start}

/* ---------------------------------------------------------------
   PÁGINA DE PROJETO
   --------------------------------------------------------------- */
.projeto-capa{position:relative;height:82vh;height:82svh;min-height:460px}
.projeto-capa .slot{aspect-ratio:auto;height:100%}
.projeto-capa::after{
  content:'';position:absolute;inset:auto 0 0 0;height:55%;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(28,31,28,.72),transparent);
}
.projeto-capa .rotulo{
  position:absolute;left:var(--margem);bottom:2.6rem;z-index:5;color:var(--linho);max-width:22ch;
}
.projeto-capa h1{font-size:var(--t2)}
.projeto-capa .rotulo small{font-size:.74rem;letter-spacing:.14em;opacity:.8;display:block;margin-top:.6rem}

.projeto-corpo{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.projeto-corpo h2{font-size:var(--t3);margin:2.2rem 0 .8rem}
.projeto-corpo h2:first-child{margin-top:0}
.projeto-corpo p+p{margin-top:1.2rem}
.ficha{position:sticky;top:6rem;border-top:1px solid rgba(28,31,28,.16);font-size:.9rem}
.ficha div{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid rgba(28,31,28,.12)}
.ficha dt{color:var(--tinta-suave);font-size:.74rem;letter-spacing:.1em}
.ficha dd{text-align:right}

.galeria{display:grid;gap:clamp(1rem,2.3vw,2.1rem)}
.galeria .par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.3vw,2.1rem)}
.galeria .larga .slot{--r:16/9}
.galeria figcaption{font-size:.78rem;color:var(--tinta-suave);margin-top:.7rem;max-width:60ch}
.sangria{margin-inline:calc(var(--margem) * -1)}

.proximo{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding:2.6rem var(--margem);border-top:1px solid rgba(28,31,28,.14)}
.proximo h3{font-size:var(--t3)}

/* ---------------------------------------------------------------
   OBRIGADO
   --------------------------------------------------------------- */
.obrigado{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:8rem var(--margem) 4rem;background:var(--verde);color:var(--linho)}
.obrigado h1{font-size:var(--t2);margin:1.6rem 0 1.2rem}
.obrigado p{max-width:46ch;margin-inline:auto;color:rgba(251,250,247,.72)}
.obrigado .botao{margin-top:2.4rem}

/* ---------------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------------- */
.rodape{background:var(--verde);color:rgba(251,250,247,.68);border-top:1px solid rgba(251,250,247,.15);padding:2.3rem var(--margem);display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;font-size:.75rem;letter-spacing:.07em}
.rodape a{display:inline-block;padding:.35rem .1rem}
.rodape a:hover{color:var(--latao-claro)}

/* ---------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------- */
@media (max-width:960px){
  .capa{grid-template-columns:1fr;min-height:auto}
  .capa-texto{padding:7.5rem var(--margem) 3.4rem;order:2}
  .capa-imagem{height:60vh;height:60svh;order:1}
  .local-capa{display:none}
  .sobre,.contato,.projeto-corpo,.dupla,.galeria .par{grid-template-columns:1fr}
  .servico+.servico{padding-left:0;border-left:0}
  .mosaico{grid-template-columns:1fr;gap:2.4rem}
  .p1,.p2,.p3,.p4,.p5,.p6{grid-column:1/-1}
  .etapa{grid-template-columns:auto 1fr;gap:1.1rem 1.5rem}
  .etapa p{grid-column:2/3}
  .grade-insta{grid-template-columns:repeat(2,1fr)}
  .ficha{position:static}
  .ficha dd{text-align:left}
  .ficha div{grid-template-columns:1fr;gap:.2rem}
  .btn-menu{display:block}
  .menu{
    position:fixed;inset:0;background:var(--verde);color:var(--linho);
    flex-direction:column;justify-content:center;gap:2.1rem;font-size:1.18rem;
    transform:translateY(-100%);transition:transform .5s cubic-bezier(.22,.61,.36,1),visibility .5s;
    visibility:hidden;pointer-events:none;z-index:1;
  }
  .menu.aberto{transform:none;visibility:visible;pointer-events:auto}
  .servico{padding-right:0}
  .investimento{padding:1.2rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .entra{opacity:1;transform:none}
}
@media print{.nav,.menu,form,.rodape{display:none}}