/* ==========================================================================
   Arte em Planejados — Sistema de Design
   Implementa aep.md §8 (Estratégia Visual)
   ========================================================================== */

/* --- Fontes auto-hospedadas (RNF 12.1) --------------------------------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-300-latin.woff2') format('woff2');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:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-400-latin.woff2') format('woff2');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:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600-latin.woff2') format('woff2');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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2');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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin.woff2') format('woff2');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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-latin.woff2') format('woff2');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 (aep.md §8.2, §8.3, §8.4, §8.5) ---------------------------- */
:root{
  /* Cores */
  --oliva-profundo:#3F4A35;
  --oliva-marca:#5A6B44;
  --oliva-claro:#8FA173;
  --oliva-nevoa:#E8EBE1;
  --branco:#FFFFFF;
  --areia:#F7F5F0;
  --carvao:#1E211B;
  --cinza-pedra:#6E7268;
  --latao:#B08D57;
  --sucesso:#4C7A4A;
  --erro:#A34A3C;

  /* Espaçamento — base 8px */
  --s-4:4px;  --s-8:8px;   --s-12:12px; --s-16:16px; --s-24:24px;
  --s-32:32px;--s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px; --s-160:160px;

  --container:1280px;
  --container-wide:1600px;
  --pad-lateral:20px;
  --sec-y:64px;
  --gutter:16px;

  --raio:4px;
  --transicao:200ms ease-out;
  --suave:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:1024px){
  :root{ --pad-lateral:40px; --sec-y:128px; --gutter:24px; }
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  color:var(--carvao); background:var(--branco);
  overflow-x:hidden;
}
@media (min-width:1024px){ body{font-size:18px} }
img,picture,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--oliva-marca)}
ul{margin:0;padding:0}

/* --- Tipografia (aep.md §8.3) ------------------------------------------ */
h1,h2,h3,h4{margin:0;font-weight:400}
h1,.h1{font-family:'Fraunces',Georgia,serif;font-size:36px;line-height:1.08;letter-spacing:-.02em}
h2,.h2{font-family:'Fraunces',Georgia,serif;font-size:28px;line-height:1.15;letter-spacing:-.01em}
h3,.h3{font-size:22px;font-weight:600;line-height:1.3}
h4,.h4{font-size:18px;font-weight:600;line-height:1.4}
@media (min-width:1024px){
  h1,.h1{font-size:64px}
  h2,.h2{font-size:44px}
  h3,.h3{font-size:28px}
  h4,.h4{font-size:20px}
}
p{margin:0 0 var(--s-16);max-width:68ch}
.texto-pequeno{font-size:15px;line-height:1.6}
@media (min-width:1024px){ .texto-pequeno{font-size:16px} }
.legenda{font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.02em;color:var(--cinza-pedra)}
.sobretitulo{
  display:block;font-size:12px;font-weight:600;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oliva-marca);
  margin-bottom:var(--s-16);
}
@media (min-width:1024px){ .legenda{font-size:14px} .sobretitulo{font-size:13px} }
.apoio{color:var(--cinza-pedra);font-size:17px}
.numero-display{font-family:'Fraunces',Georgia,serif;font-weight:300;color:var(--latao);line-height:1}

/* --- Layout ------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-lateral)}
.secao{padding-block:var(--sec-y)}
.secao--areia{background:var(--areia)}
.secao--nevoa{background:var(--oliva-nevoa)}
.secao--escura{background:var(--oliva-profundo);color:var(--branco)}
.secao--escura h2,.secao--escura h3{color:var(--branco)}
.secao--escura p{color:rgba(255,255,255,.86)}
.secao__cabecalho{margin-bottom:var(--s-48);max-width:68ch}
.secao__cabecalho--centro{margin-inline:auto;text-align:center}
.grid{display:grid;gap:var(--gutter)}
@media (min-width:768px){ .grid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} }

/* --- Acessibilidade ----------------------------------------------------- */
:focus-visible{outline:2px solid var(--oliva-claro);outline-offset:2px;border-radius:2px}
.pular-para-conteudo{
  position:absolute;left:var(--s-16);top:-100px;z-index:200;
  background:var(--oliva-profundo);color:#fff;padding:var(--s-12) var(--s-24);
  border-radius:var(--raio);transition:top var(--transicao);
}
.pular-para-conteudo:focus{top:var(--s-16)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- Botões (aep.md §8.6) ---------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);
  min-height:48px;padding:16px 32px;border-radius:var(--raio);
  font-size:16px;font-weight:600;letter-spacing:.01em;text-align:center;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background var(--transicao),color var(--transicao),border-color var(--transicao);
}
.btn--primario{background:var(--oliva-marca);color:var(--branco)}
.btn--primario:hover{background:var(--oliva-profundo)}
.btn--secundario{background:transparent;color:var(--oliva-profundo);border-color:var(--oliva-profundo)}
.btn--secundario:hover{background:var(--oliva-nevoa)}
.btn--claro{background:var(--branco);color:var(--oliva-profundo)}
.btn--claro:hover{background:var(--oliva-nevoa)}
.btn--contorno-claro{background:transparent;color:var(--branco);border-color:var(--branco)}
.btn--contorno-claro:hover{background:rgba(255,255,255,.12)}
.btn--bloco{width:100%}
.link-terciario{
  color:var(--oliva-marca);font-weight:600;text-decoration:underline;
  text-underline-offset:4px;
}
.grupo-botoes{display:flex;flex-direction:column;gap:var(--s-12);margin-top:var(--s-32)}
@media (min-width:768px){ .grupo-botoes{flex-direction:row;flex-wrap:wrap} .btn--bloco{width:auto} }

/* --- Cabeçalho (wireframe §00) ----------------------------------------- */
.cabecalho{
  position:fixed;inset:0 0 auto 0;z-index:100;height:64px;
  display:flex;align-items:center;
  background:transparent;
  transition:background 320ms var(--suave),box-shadow 320ms var(--suave),backdrop-filter 320ms var(--suave);
}
/* Véu de gradiente: dá legibilidade à marca e ao menu sobre a fotografia do hero,
   sem escurecer a imagem como uma barra sólida faria. */
.cabecalho::before{
  content:'';position:absolute;inset:0 0 auto 0;height:132px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(30,33,27,.58) 0%,rgba(30,33,27,.26) 55%,rgba(30,33,27,0) 100%);
  transition:opacity 320ms var(--suave);
}
.cabecalho.is-solido::before,.cabecalho--fixo::before{opacity:0}
.cabecalho.is-solido,.cabecalho--fixo{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 rgba(30,33,27,.08),0 6px 24px rgba(30,33,27,.05);
}
.cabecalho__interno{position:relative}
.cabecalho__interno{display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);width:100%}
.marca{display:flex;align-items:center;gap:var(--s-12);text-decoration:none;color:var(--carvao)}
.marca__monograma{height:34px;width:auto;transition:transform 420ms var(--suave)}
.marca:hover .marca__monograma{transform:rotate(-6deg) scale(1.06)}
.marca__nome{font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
/* A marca só fica branca no desktop, onde o cabeçalho se sobrepõe à fotografia.
   No mobile o hero coloca a foto abaixo do texto, então o cabeçalho é sempre sólido. */
@media (min-width:1024px){
  .cabecalho:not(.is-solido) .marca--sobre-foto{color:var(--branco);text-shadow:0 1px 3px rgba(30,33,27,.45)}
  .cabecalho:not(.is-solido) .marca--sobre-foto .marca__monograma{
    filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(30,33,27,.45));
  }
}
@media (max-width:1023px){
  .cabecalho,.cabecalho:not(.is-solido){
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    box-shadow:0 1px 0 rgba(30,33,27,.08);
  }
  .cabecalho::before{opacity:0}
}

.nav-principal{display:none}
@media (min-width:1024px){
  .nav-principal{display:flex;align-items:center;gap:var(--s-24)}
  .nav-principal a{
    color:var(--carvao);text-decoration:none;font-size:16px;font-weight:500;
    padding:var(--s-8) 0;
  }
  .cabecalho:not(.is-solido) .nav-principal--sobre-foto a,
  .cabecalho:not(.is-solido) .nav-principal--sobre-foto .submenu-gatilho{
    color:var(--branco);text-shadow:0 1px 3px rgba(30,33,27,.45);
  }
  .cabecalho:not(.is-solido) .nav-principal--sobre-foto .link-arquiteto{color:rgba(255,255,255,.82)}
  .cabecalho:not(.is-solido) .submenu a{text-shadow:none}

  /* Sublinhado que cresce da esquerda no hover e recolhe pela direita ao sair */
  .nav-principal a:not(.btn):not(.link-arquiteto),
  .nav-principal .submenu-gatilho{position:relative}
  .nav-principal a:not(.btn):not(.link-arquiteto)::before,
  .nav-principal .submenu-gatilho::before{
    content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right center;
    transition:transform 340ms var(--suave);
  }
  .nav-principal a:not(.btn):not(.link-arquiteto):hover::before,
  .nav-principal a:not(.btn):not(.link-arquiteto):focus-visible::before,
  .nav-principal .submenu-gatilho:hover::before,
  .nav-principal .submenu-gatilho[aria-expanded="true"]::before{
    transform:scaleX(1);transform-origin:left center;
  }
  .nav-principal a[aria-current="page"]::before{transform:scaleX(1)}
  .nav-principal a:not(.btn),
  .nav-principal .submenu-gatilho{transition:color 240ms var(--suave),opacity 240ms var(--suave)}
  .cabecalho.is-solido .nav-principal a:not(.btn):hover,
  .cabecalho.is-solido .nav-principal .submenu-gatilho:hover{color:var(--oliva-marca)}
  .nav-principal a[aria-current="page"]{color:var(--oliva-marca);font-weight:600}
  .link-arquiteto{transition:color 240ms var(--suave),transform 240ms var(--suave)}
  .link-arquiteto:hover{transform:translateY(-1px)}

  .cabecalho .btn{
    padding:12px 24px;min-height:44px;font-size:15px;
    transition:background 240ms var(--suave),transform 240ms var(--suave),box-shadow 240ms var(--suave);
  }
  .cabecalho .btn--primario:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(63,74,53,.28)}
  .cabecalho .btn--primario:active{transform:translateY(0)}
}
.link-arquiteto{font-size:13px;color:var(--cinza-pedra);text-decoration:none}
.link-arquiteto:hover{color:var(--oliva-marca)}

/* Mega-menu */
.tem-submenu{position:relative}
.submenu-gatilho{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  cursor:pointer;font-size:16px;font-weight:500;color:inherit;padding:var(--s-8) 0;
}
.submenu-gatilho::after{
  content:'';width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform 300ms var(--suave);
}
.submenu-gatilho[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

.submenu{
  position:absolute;top:calc(100% + 14px);left:50%;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-24);
  background:var(--branco);border:1px solid var(--oliva-nevoa);
  border-radius:var(--raio);box-shadow:0 18px 48px rgba(30,33,27,.14);
  padding:var(--s-24);width:520px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-10px) scale(.985);transform-origin:top center;
  transition:opacity 280ms var(--suave),transform 280ms var(--suave),visibility 0s linear 280ms;
}
/* Ponte invisível: o ponteiro atravessa o vão até o painel sem fechar o menu. */
.submenu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.submenu[data-aberto="true"]{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity 280ms var(--suave),transform 280ms var(--suave),visibility 0s linear 0s;
}
.submenu a{
  display:flex;align-items:center;gap:var(--s-12);padding:var(--s-8);
  border-radius:var(--raio);color:var(--carvao) !important;font-size:15px;
  opacity:0;transform:translateY(8px);
  transition:opacity 320ms var(--suave),transform 320ms var(--suave),background 220ms var(--suave);
}
.submenu[data-aberto="true"] a{opacity:1;transform:none}
.submenu[data-aberto="true"] a:nth-child(1){transition-delay:40ms}
.submenu[data-aberto="true"] a:nth-child(2){transition-delay:70ms}
.submenu[data-aberto="true"] a:nth-child(3){transition-delay:100ms}
.submenu[data-aberto="true"] a:nth-child(4){transition-delay:130ms}
.submenu[data-aberto="true"] a:nth-child(5){transition-delay:160ms}
.submenu[data-aberto="true"] a:nth-child(6){transition-delay:190ms}
.submenu[data-aberto="true"] a:nth-child(n+7){transition-delay:220ms}
.submenu a:hover{background:var(--areia)}
.submenu a span{transition:transform 240ms var(--suave)}
.submenu a:hover span{transform:translateX(3px)}
.submenu img{width:44px;height:34px;object-fit:cover;border-radius:2px;flex:none;transition:transform 320ms var(--suave)}
.submenu a:hover img{transform:scale(1.07)}
.submenu .sem-foto{width:44px;height:34px;background:var(--oliva-nevoa);border-radius:2px;flex:none}

/* Menu mobile */
.abrir-menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:none;border:0;cursor:pointer;color:inherit;
}
.abrir-menu span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background 200ms var(--suave)}
.abrir-menu span::before,.abrir-menu span::after{
  content:'';position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
  transition:transform 320ms var(--suave);
}
.abrir-menu span::before{top:-7px} .abrir-menu span::after{top:7px}
.abrir-menu:hover span::before{transform:translateY(-1.5px)}
.abrir-menu:hover span::after{transform:translateY(1.5px)}
@media (min-width:1024px){ .abrir-menu{display:none} }

.menu-mobile{
  position:fixed;inset:0;z-index:150;background:var(--branco);
  padding:var(--s-16) var(--pad-lateral) var(--s-96);
  overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity 300ms var(--suave),transform 300ms var(--suave),visibility 0s linear 300ms;
}
.menu-mobile[data-aberto="true"]{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity 300ms var(--suave),transform 300ms var(--suave),visibility 0s linear 0s;
}
.menu-mobile li{opacity:0;transform:translateY(10px);transition:opacity 320ms var(--suave),transform 320ms var(--suave)}
.menu-mobile[data-aberto="true"] li{opacity:1;transform:none}
.menu-mobile[data-aberto="true"] li:nth-child(1){transition-delay:60ms}
.menu-mobile[data-aberto="true"] li:nth-child(2){transition-delay:90ms}
.menu-mobile[data-aberto="true"] li:nth-child(3){transition-delay:120ms}
.menu-mobile[data-aberto="true"] li:nth-child(4){transition-delay:150ms}
.menu-mobile[data-aberto="true"] li:nth-child(5){transition-delay:180ms}
.menu-mobile[data-aberto="true"] li:nth-child(n+6){transition-delay:210ms}
.fechar-menu{transition:transform 320ms var(--suave),color 200ms var(--suave)}
.fechar-menu:hover{transform:rotate(90deg);color:var(--oliva-marca)}
.menu-mobile__topo{display:flex;justify-content:space-between;align-items:center;height:48px;margin-bottom:var(--s-32)}
.fechar-menu{width:48px;height:48px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--carvao)}
.menu-mobile ul{list-style:none}
.menu-mobile li a{
  display:flex;align-items:center;gap:var(--s-16);
  padding:var(--s-12) 0;text-decoration:none;color:var(--carvao);
  font-size:18px;border-bottom:1px solid var(--oliva-nevoa);min-height:48px;
  transition:color 220ms var(--suave),padding-left 260ms var(--suave);
}
.menu-mobile li a:hover{color:var(--oliva-marca);padding-left:var(--s-8)}
.menu-mobile li a img{transition:transform 320ms var(--suave)}
.menu-mobile li a:hover img{transform:scale(1.06)}
.menu-mobile img{width:56px;height:42px;object-fit:cover;border-radius:2px}
.menu-mobile .sem-foto{width:56px;height:42px;background:var(--oliva-nevoa);border-radius:2px}
.menu-mobile__titulo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-pedra);font-weight:600;margin:var(--s-32) 0 var(--s-8)}

/* --- Hero (wireframe §01) ---------------------------------------------- */
.hero{padding-top:64px}
.hero__figura{margin:0}
.hero__figura img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero__conteudo{background:var(--areia);padding:var(--s-48) var(--pad-lateral) var(--s-48)}
.hero__conteudo .container{padding-inline:0}
.hero h1{margin-bottom:var(--s-24)}
.hero__sub{font-size:17px;color:var(--cinza-pedra);max-width:56ch}
.hero__reforco{
  display:flex;align-items:center;gap:var(--s-8);
  margin-top:var(--s-24);font-size:14px;color:var(--cinza-pedra);
}
.ponto-vivo{
  width:8px;height:8px;border-radius:50%;background:var(--sucesso);flex:none;
  animation:pulsar 2s ease-in-out infinite;
}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.35}}

@media (min-width:1024px){
  .hero{position:relative;padding-top:0;min-height:88vh;display:flex;align-items:center}
  .hero__figura{position:absolute;inset:0}
  .hero__figura img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .hero__figura::after{content:'';position:absolute;inset:0;background:rgba(30,33,27,.35)}
  .hero__conteudo{position:relative;background:none;padding:120px 0 var(--s-64);width:100%}
  .hero__conteudo .container{padding-inline:var(--pad-lateral)}
  .hero__caixa{max-width:calc(6 / 12 * 100%);min-width:min(640px,100%)}
  .hero h1,.hero .sobretitulo{color:var(--branco)}
  .hero .sobretitulo{color:var(--oliva-nevoa)}
  /* Restrito a .hero: só ali o texto assenta sobre a fotografia escurecida.
     Sem o escopo, o branco vaza para o topo das páginas internas (fundo areia). */
  .hero .hero__sub{color:rgba(255,255,255,.9)}
  .hero .hero__reforco{color:rgba(255,255,255,.9)}
  .hero__sub{font-size:19px}
  /* Sobre a fotografia, o botão secundário precisa de contorno claro (WCAG AA) */
  .hero .btn--secundario{color:var(--branco);border-color:var(--branco)}
  .hero .btn--secundario:hover{background:rgba(255,255,255,.12)}
}

/* Hero interno (páginas de ambiente) */
.hero-interno{padding-top:64px;background:var(--areia)}
.hero-interno__grade{display:grid;gap:0}
.hero-interno__texto{padding:var(--s-48) 0}
.hero-interno img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:1024px){
  .hero-interno__grade{grid-template-columns:1fr 1fr;gap:var(--s-64);align-items:center}
  .hero-interno__texto{padding:var(--s-96) 0}
  .hero-interno img{aspect-ratio:4/3;border-radius:var(--raio)}
}
.hero-interno--simples{padding-block:calc(64px + var(--s-64)) var(--s-64)}

/* --- Selos de confiança (wireframe §02) -------------------------------- */
.selos{background:var(--oliva-nevoa);padding-block:var(--s-32)}
.selos__lista{
  list-style:none;display:flex;gap:var(--s-24);
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.selos__lista::-webkit-scrollbar{display:none}
.selos__lista li{
  flex:0 0 auto;width:40%;min-width:132px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-8);
}
.selos__lista svg{width:32px;height:32px;stroke:var(--oliva-profundo);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.selos__lista span{font-size:14px;font-weight:500;color:var(--oliva-profundo);line-height:1.3}
@media (min-width:1024px){
  .selos__lista{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible}
  .selos__lista li{width:auto;min-width:0}
}

/* --- Cards de ambiente / projeto ---------------------------------------- */
.card{
  display:block;text-decoration:none;color:inherit;background:var(--branco);
  border-radius:var(--raio);overflow:hidden;
  transition:box-shadow var(--transicao),transform var(--transicao);
}
.card:hover{box-shadow:0 8px 32px rgba(30,33,27,.10)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card__corpo{padding:var(--s-16) var(--s-8) var(--s-24)}
.card__titulo{font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:var(--s-8)}
.card__titulo::after{content:'→';color:var(--oliva-marca);font-weight:400}
.card__tag{
  display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-pedra);margin-bottom:var(--s-4);
}

/* Lista de ambientes ainda sem fotografia (CL05) */
.lista-texto{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-12);
  padding:var(--s-24);background:var(--areia);border-radius:var(--raio);margin-top:var(--s-32);
}
.lista-texto li{font-size:16px}
.lista-texto a{color:var(--oliva-profundo);text-decoration:underline;text-underline-offset:3px}
.lista-texto__rotulo{width:100%;font-size:14px;color:var(--cinza-pedra);margin-bottom:var(--s-4)}

/* --- Bloco de duas colunas (Por que confiar) ---------------------------- */
.duas-colunas{display:grid;gap:var(--s-48)}
@media (min-width:1024px){ .duas-colunas{grid-template-columns:1fr 1fr;gap:var(--s-96);align-items:center} }
.mosaico-fabrica{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.mosaico-fabrica > *:last-child{grid-column:1 / -1}
.espaco-foto{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1;background:var(--oliva-nevoa);border:1px dashed var(--oliva-claro);
  border-radius:var(--raio);padding:var(--s-16);
  font-size:13px;line-height:1.4;color:var(--oliva-profundo);
}
.espaco-foto--larga{aspect-ratio:2/1}

/* --- Filtro + galeria de projetos (RF07) -------------------------------- */
.filtros{
  display:flex;gap:var(--s-8);overflow-x:auto;padding-bottom:var(--s-8);
  margin-bottom:var(--s-32);scrollbar-width:none;
}
.filtros::-webkit-scrollbar{display:none}
.filtro{
  flex:0 0 auto;min-height:44px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--oliva-claro);background:transparent;
  color:var(--oliva-profundo);font-size:15px;font-weight:500;cursor:pointer;
  transition:background var(--transicao),color var(--transicao);
}
.filtro:hover{background:var(--oliva-nevoa)}
.filtro[aria-pressed="true"]{background:var(--oliva-profundo);color:var(--branco);border-color:var(--oliva-profundo)}
.galeria{display:grid;gap:var(--gutter)}
@media (min-width:768px){ .galeria{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .galeria{grid-template-columns:repeat(3,1fr)} }
.galeria__item{padding:0;border:0;background:none;cursor:pointer;text-align:left;border-radius:var(--raio);overflow:hidden}
.galeria__item img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform var(--transicao)}
.galeria__item:hover img{transform:scale(1.02)}
.galeria__item figcaption{padding:var(--s-12) var(--s-4) 0}
.galeria__item[hidden]{display:none}

/* Lightbox */
.lightbox{border:0;padding:0;max-width:100vw;max-height:100vh;width:100%;height:100%;background:rgba(30,33,27,.96)}
.lightbox::backdrop{background:rgba(30,33,27,.96)}
.lightbox__interno{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--s-16);gap:var(--s-16)}
.lightbox img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:var(--raio)}
.lightbox__legenda{color:#fff;font-size:15px;text-align:center;max-width:60ch}
.lightbox__controles{display:flex;gap:var(--s-8);align-items:center}
.lightbox button{
  min-width:48px;min-height:48px;border-radius:var(--raio);
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);
  cursor:pointer;font-size:18px;
}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lightbox__fechar{position:absolute;top:var(--s-16);right:var(--s-16)}

/* --- Depoimentos (wireframe §06) ---------------------------------------- */
.depoimento{display:grid;gap:var(--s-24);align-items:center;max-width:900px;margin-inline:auto}
@media (min-width:768px){ .depoimento{grid-template-columns:200px 1fr;gap:var(--s-48)} }
.depoimento img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raio)}
.depoimento blockquote{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:24px;line-height:1.4}
.depoimento cite{display:block;margin-top:var(--s-16);font-style:normal;font-size:16px;font-weight:600}
.depoimento .legenda{margin-top:var(--s-4)}
.depoimentos__navegacao{display:flex;justify-content:center;gap:var(--s-12);margin-top:var(--s-32)}
.ponto{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.ponto::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--oliva-claro)}
.ponto[aria-selected="true"]::before{background:var(--oliva-profundo)}
.depoimento[hidden]{display:none}

/* Aviso de conteúdo pendente — não publicar em produção */
.pendente{
  border:1px dashed var(--oliva-claro);background:var(--areia);
  border-radius:var(--raio);padding:var(--s-24);color:var(--oliva-profundo);
  font-size:15px;line-height:1.5;
}
.pendente strong{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s-8);color:var(--latao)}

/* --- Condições de pagamento (wireframe §07) ----------------------------- */
.pagamento{display:grid;gap:var(--gutter);text-align:center}
@media (min-width:768px){ .pagamento{grid-template-columns:repeat(3,1fr)} }
.pagamento__card{border:1px solid var(--oliva-nevoa);border-radius:var(--raio);padding:var(--s-32) var(--s-24)}
.pagamento__rotulo{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-pedra)}
.pagamento__valor{font-size:48px;margin:var(--s-12) 0 var(--s-4)}
.pagamento__detalhe{font-size:15px;color:var(--cinza-pedra);margin:0}

/* --- Processo (wireframe §08) ------------------------------------------- */
.processo{list-style:none;counter-reset:etapa;position:relative;max-width:820px}
.processo li{
  position:relative;display:grid;grid-template-columns:64px 1fr;
  gap:var(--s-16);padding-bottom:var(--s-32);
}
.processo li:not(:last-child)::before{
  content:'';position:absolute;left:26px;top:48px;bottom:8px;
  width:1px;background:var(--oliva-claro);
}
.processo__num{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:40px;color:var(--latao);line-height:1}
.processo h3{font-size:20px;margin-bottom:var(--s-4)}
.processo p{margin:0;color:var(--cinza-pedra)}

/* --- FAQ (RF10) ---------------------------------------------------------- */
.faq{max-width:820px;border-top:1px solid var(--oliva-nevoa)}
.faq details{border-bottom:1px solid var(--oliva-nevoa)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-16);
  padding:var(--s-24) 0;cursor:pointer;list-style:none;
  font-size:18px;font-weight:600;min-height:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;font-weight:400;color:var(--oliva-marca);flex:none}
.faq details[open] summary::after{content:'–'}
.faq details > div{padding-bottom:var(--s-24)}
.faq p{margin-bottom:0;color:var(--cinza-pedra)}

/* --- Instagram (wireframe §10) ------------------------------------------ */
.instagram-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8)}
@media (min-width:768px){ .instagram-grade{grid-template-columns:repeat(6,1fr)} }
.instagram-grade img{aspect-ratio:1;object-fit:cover;border-radius:2px}

/* --- Rodapé (wireframe §12) --------------------------------------------- */
.rodape{background:var(--oliva-profundo);color:rgba(255,255,255,.86);padding-block:var(--s-64) var(--s-96)}
.rodape a{color:rgba(255,255,255,.86);text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape__grade{display:grid;gap:var(--s-48)}
@media (min-width:768px){ .rodape__grade{grid-template-columns:1.4fr 1fr 1fr} }
.rodape .marca__nome{color:#fff}
.rodape__titulo{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oliva-claro);margin-bottom:var(--s-16)}
.rodape ul{list-style:none;display:grid;gap:var(--s-8)}
.rodape__contato{display:grid;gap:var(--s-8);font-size:15px;margin-top:var(--s-24)}
.rodape__mapa{margin-top:var(--s-24);border:0;width:100%;height:200px;border-radius:var(--raio)}
.rodape__cidades{
  margin-top:var(--s-48);padding-top:var(--s-24);
  border-top:1px solid rgba(255,255,255,.18);font-size:15px;
}
.rodape__legal{
  margin-top:var(--s-24);padding-top:var(--s-24);
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:var(--s-16);font-size:14px;
}

/* --- WhatsApp flutuante (RF01) + barra fixa (RF02) ---------------------- */
.whatsapp-flutuante{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--oliva-marca);color:#fff;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(30,33,27,.24);
}
.whatsapp-flutuante svg{width:28px;height:28px;fill:currentColor}
.whatsapp-flutuante:hover{background:var(--oliva-profundo)}
@media (min-width:1024px){ .whatsapp-flutuante{display:flex} }

.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-8);
  padding:10px var(--s-16) calc(10px + env(safe-area-inset-bottom));
  background:var(--branco);border-top:1px solid var(--oliva-nevoa);
}
.barra-fixa .btn{padding:12px 16px;font-size:15px;min-height:48px}
@media (min-width:1024px){ .barra-fixa{display:none} }
@media (max-width:1023px){ body{padding-bottom:76px} }

/* --- Formulário em etapas (RF03) ---------------------------------------- */
.formulario{max-width:680px}
.progresso{margin-bottom:var(--s-32)}
.progresso__trilha{height:4px;background:var(--oliva-nevoa);border-radius:999px;overflow:hidden}
.progresso__barra{height:100%;background:var(--oliva-marca);width:33.33%;transition:width 300ms ease-out}
.progresso__rotulo{margin-top:var(--s-8);font-size:14px;color:var(--cinza-pedra)}
.etapa[hidden]{display:none}
.etapa h3{margin-bottom:var(--s-24)}
.campo{margin-bottom:var(--s-24)}
.campo > label,.campo__legenda{
  display:block;font-size:15px;font-weight:600;margin-bottom:var(--s-8);
}
.campo__ajuda{font-size:14px;color:var(--cinza-pedra);margin:0 0 var(--s-12)}
.campo input[type="text"],.campo input[type="tel"],.campo input[type="email"],.campo select,.campo textarea{
  width:100%;min-height:48px;padding:12px 16px;
  border:1px solid var(--oliva-claro);border-radius:var(--raio);
  background:var(--branco);font-size:16px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oliva-marca)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--erro)}
.erro-campo{display:block;margin-top:var(--s-8);font-size:14px;color:var(--erro)}
fieldset{border:0;padding:0;margin:0 0 var(--s-24)}
.opcoes{display:grid;gap:var(--s-8)}
@media (min-width:600px){ .opcoes{grid-template-columns:repeat(2,1fr)} }
.opcao{
  display:flex;align-items:center;gap:var(--s-12);
  padding:12px var(--s-16);min-height:48px;
  border:1px solid var(--oliva-claro);border-radius:var(--raio);cursor:pointer;
  transition:background var(--transicao),border-color var(--transicao);
}
.opcao:hover{background:var(--areia)}
.opcao:has(input:checked){border-color:var(--oliva-marca);background:var(--oliva-nevoa)}
.opcao input{width:20px;height:20px;accent-color:var(--oliva-marca);flex:none}
.opcao span{font-size:15px}
.consentimento{display:flex;gap:var(--s-12);align-items:flex-start;font-size:15px;line-height:1.5}
.consentimento input{width:20px;height:20px;margin-top:2px;accent-color:var(--oliva-marca);flex:none}
.acoes-etapa{display:flex;gap:var(--s-12);flex-wrap:wrap;margin-top:var(--s-32)}
.pote-de-mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{
  padding:var(--s-16);border-radius:var(--raio);font-size:15px;margin-bottom:var(--s-24);
  border:1px solid;
}
.aviso--erro{border-color:var(--erro);color:var(--erro);background:#FBF1EF}
.aviso--info{border-color:var(--oliva-claro);color:var(--oliva-profundo);background:var(--oliva-nevoa)}

/* --- Consentimento de cookies (RF13) ------------------------------------ */
.cookies{
  position:fixed;left:var(--s-16);right:var(--s-16);bottom:var(--s-16);z-index:120;
  background:var(--branco);border:1px solid var(--oliva-claro);border-radius:var(--raio);
  box-shadow:0 12px 40px rgba(30,33,27,.18);padding:var(--s-24);
  display:none;max-width:520px;
}
.cookies[data-visivel="true"]{display:block}
@media (max-width:1023px){ .cookies{bottom:86px} }
.cookies p{font-size:15px;margin-bottom:var(--s-16)}
.cookies__acoes{display:flex;gap:var(--s-8);flex-wrap:wrap}
.cookies .btn{padding:12px 20px;min-height:44px;font-size:15px}

/* --- Utilitários -------------------------------------------------------- */
.prosa h2{margin-top:var(--s-64);margin-bottom:var(--s-16)}
.prosa h3{margin-top:var(--s-32);margin-bottom:var(--s-8)}
.prosa > *:first-child{margin-top:0}
.prosa ul{margin:0 0 var(--s-16) var(--s-24);list-style:disc}
.prosa li{margin-bottom:var(--s-8);max-width:68ch}
.migalhas{font-size:14px;color:var(--cinza-pedra);padding-block:var(--s-16)}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-8)}
.migalhas li:not(:last-child)::after{content:'/';margin-left:var(--s-8);color:var(--oliva-claro)}
.migalhas a{color:var(--cinza-pedra)}
.destaque-preco{
  background:var(--oliva-nevoa);border-radius:var(--raio);
  padding:var(--s-24);margin-block:var(--s-24);
}
.destaque-preco p:last-child{margin-bottom:0}

/* --- Animação de entrada (respeita prefers-reduced-motion) -------------- */
/* Sem JavaScript o conteúdo permanece visível — a animação é um acréscimo. */
.js .revelar{opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out,transform 400ms ease-out}
.js .revelar.is-visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .marca:hover .marca__monograma,.fechar-menu:hover,.submenu a:hover img,.menu-mobile li a:hover img{transform:none}
  .js .revelar{opacity:1;transform:none}
}