/* Digital Home — estilos partilhados por todas as paginas */
:root{
  --verde:#3B4A2F;
  --verde-fundo:#2F3B26;
  --creme:#F5F0E8;
  --creme-80:rgba(245,240,232,.82);
  --creme-60:rgba(245,240,232,.62);
  --castanho:#4A352B;
  --ouro:#B8956A;
  --laranja:#E89C5C;
  --vinho:#8A3140;
  --veu:rgba(10,16,9,.46);
  --display:"Playfair Display","Times New Roman",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1160px;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  background:var(--verde);
  color:var(--creme);
  font-family:var(--display);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

.env{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.rotulo{
  font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ouro);
}
h1,h2,h3{font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,68px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1}
h3{font-size:clamp(24px,2.4vw,30px);line-height:1.15}
p{color:var(--creme-80);max-width:64ch}
.destaque{color:var(--ouro);font-style:italic}

/* ---------- Cabeçalho ---------- */
header{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding-block:22px;
}
header .env{display:flex;align-items:center;justify-content:space-between;gap:24px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{width:38px;height:auto}
.marca span{font-family:var(--sans);font-size:13px;letter-spacing:.24em;text-transform:uppercase}
nav ul{display:flex;gap:26px;list-style:none}
nav a{
  font-family:var(--sans);font-size:13px;letter-spacing:.08em;
  text-decoration:none;color:var(--creme-80);padding-block:4px;
}
nav a:hover,nav a[aria-current="page"]{color:var(--creme);border-bottom:1px solid var(--ouro)}
@media (max-width:860px){nav{display:none}}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  padding-block:140px 80px;
  background:var(--verde-fundo) url("/assets/hero.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,9,.55) 0%,var(--veu) 45%,rgba(10,16,9,.72) 100%);
}
.hero .env{position:relative;z-index:2}
.hero h1{margin:18px 0 24px;max-width:19ch;font-size:clamp(36px,5.6vw,60px)}
.hero p{font-size:clamp(17px,1.6vw,20px)}
.botoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14px;letter-spacing:.06em;
  padding:15px 26px;border-radius:999px;text-decoration:none;
  border:1px solid var(--creme);transition:background .2s ease,color .2s ease;
}
.btn.cheio{background:var(--creme);color:var(--castanho);border-color:var(--creme)}
.btn.cheio:hover{background:var(--ouro);border-color:var(--ouro);color:#2B1810}
.btn.vazio{color:var(--creme)}
.btn.vazio:hover{background:rgba(245,240,232,.12)}
.frase{
  margin-top:56px;font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--creme-60);
}

/* ---------- Secções ---------- */
section{padding-block:clamp(70px,9vw,120px)}
.cabecalho-seccao{margin-bottom:52px;max-width:60ch}
.cabecalho-seccao h2{margin:12px 0 16px}

.servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:rgba(245,240,232,.16)}
.servico{background:var(--verde);padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px;text-decoration:none}
.servico:hover{background:#425335}
.servico .num{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;color:var(--ouro)}
.servico p{font-size:16.5px}
.servico .etiquetas{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.servico .etiquetas span{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme-60);border:1px solid rgba(245,240,232,.24);padding:5px 10px;border-radius:999px;
}
.servico .seta{font-family:var(--sans);font-size:13px;color:var(--ouro);letter-spacing:.06em}

.faixa{background:var(--castanho);text-align:center;padding-block:clamp(56px,7vw,88px)}
.faixa h2{font-style:italic;color:var(--creme)}

.casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.caso{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.caso img{aspect-ratio:4/3;object-fit:cover;border-radius:2px;filter:saturate(.92)}
.caso:hover img{filter:none}
.caso .tipo{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)}
.caso h3{font-size:22px}

.destaque-caso{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){.destaque-caso{grid-template-columns:1fr}}
.destaque-caso .etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.destaque-caso .etiquetas span{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme-60);border:1px solid rgba(245,240,232,.24);padding:5px 10px;border-radius:999px;
}

.estudio{background:var(--verde-fundo)}
.estudio blockquote{font-size:clamp(22px,2.8vw,32px);line-height:1.35;max-width:24ch;color:var(--creme)}

/* ---------- Contacto ---------- */
.contacto{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,72px)}
@media (max-width:820px){.contacto{grid-template-columns:1fr}}
.dados{font-family:var(--sans);font-size:15px;line-height:2;color:var(--creme-80)}
.dados a{text-decoration:none;border-bottom:1px solid rgba(184,149,106,.5)}
form{display:grid;gap:18px}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.linha{grid-template-columns:1fr}}
label{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--creme-60);display:block;margin-bottom:8px}
input,select,textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(245,240,232,.3);
  color:var(--creme);font-family:var(--sans);font-size:16px;padding:10px 0;border-radius:0;
}
select{color:var(--creme-80)}
select option{background:var(--verde);color:var(--creme)}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--ouro)}
.rgpd{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--creme-60)}
.rgpd a{color:var(--ouro)}
button[type=submit]{
  justify-self:start;cursor:pointer;background:var(--creme);color:var(--castanho);
  border:0;border-radius:999px;padding:15px 30px;
  font-family:var(--sans);font-size:14px;letter-spacing:.06em;transition:background .2s ease;
}
button[type=submit]:hover{background:var(--ouro)}

/* ---------- Rodapé ---------- */
footer{border-top:1px solid rgba(245,240,232,.18);padding-block:52px 40px;font-family:var(--sans);font-size:14px}
.footer-grelha{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media (max-width:760px){.footer-grelha{grid-template-columns:1fr}}
footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);font-weight:400;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--creme-80)}
footer a:hover{color:var(--creme)}
.assinatura{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:var(--creme-60);letter-spacing:.1em;text-transform:uppercase}
address{font-style:normal}


/* ---------- Video do hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;
}
.hero-marca{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:min(38vw,420px);height:auto;opacity:.14;z-index:1;pointer-events:none;
}
@media (max-width:860px){.hero-marca{display:none}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ---------- Botao DHOS ---------- */
nav a.dhos{
  border:1px solid rgba(245,240,232,.45);border-radius:999px;
  padding:6px 14px;font-size:11.5px;letter-spacing:.16em;
}
nav a.dhos:hover{background:rgba(245,240,232,.12);border-color:var(--ouro);border-bottom-color:var(--ouro)}

/* ---------- Cartoes de caso sem fotografia ---------- */
.caso-texto{
  border:1px solid rgba(245,240,232,.2);padding:26px 24px;min-height:190px;
  justify-content:flex-end;transition:border-color .2s ease,background .2s ease;
}
.caso-texto:hover{border-color:var(--ouro);background:rgba(245,240,232,.04)}
.marca-cliente{background:var(--creme);padding:44px;border-radius:2px}


/* ---------- Faixa com fotografia ---------- */
.faixa{
  position:relative;overflow:hidden;
  background:var(--castanho) url("/assets/faixa-material.webp") center/cover no-repeat;
}
.faixa::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,24,16,.62),rgba(43,24,16,.48));
}
.faixa .env{position:relative;z-index:1}
.faixa h2{color:var(--creme);text-shadow:0 1px 24px rgba(10,9,7,.45)}

/* ---------- Cartao de caso com a marca do cliente ---------- */
.caso-marca{position:relative}
.caso-marca::before{
  content:"";position:absolute;inset:18px 18px 78px;
  background:var(--marca) center/contain no-repeat;
  opacity:.9;filter:invert(1) brightness(1.9) contrast(.85);
}
.caso-marca:hover::before{opacity:1}


/* ---------- Onde trabalhamos ---------- */
.local .concelhos{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;
}
.local .concelhos li{
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  border:1px solid rgba(245,240,232,.24);border-radius:999px;padding:8px 16px;color:var(--creme-80);
}
.nota-local{font-family:var(--sans);font-size:14px;margin-top:22px;color:var(--creme-60)}

/* ---------- Perguntas ---------- */
.faq{display:grid;gap:0;border-top:1px solid rgba(245,240,232,.18);max-width:74ch}
.faq details{border-bottom:1px solid rgba(245,240,232,.18)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-size:19px;line-height:1.4;color:var(--creme);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:19px;color:var(--ouro);
  font-family:var(--sans);font-size:20px;transition:transform .2s ease;
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--ouro)}
.faq details p{padding:0 0 22px;font-size:16.5px;max-width:70ch}
.faq details p a{color:var(--ouro)}


/* ================= Paginas interiores ================= */
.pagina-topo{padding-block:150px 20px}
.pagina-topo h1{font-size:clamp(34px,5vw,56px);margin:14px 0 18px;max-width:18ch}
.migalhas{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--creme-60);margin-bottom:18px}
.migalhas a{text-decoration:none;color:var(--creme-60)}
.migalhas a:hover{color:var(--ouro)}

/* CTA no menu */
nav a.nav-cta{
  background:var(--creme);color:var(--castanho);border-radius:999px;
  padding:8px 18px;font-size:12.5px;letter-spacing:.06em;
}
nav a.nav-cta:hover{background:var(--ouro);color:#2B1810;border-bottom-color:transparent}

/* Entregaveis */
.entregaveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:rgba(245,240,232,.16)}
.entregavel{background:var(--verde);padding:26px 24px}
.entregavel h3{margin-bottom:8px}
.entregavel p{font-size:15.5px;margin:0}

/* Etapas */
.etapas{list-style:none;padding:0;margin:0;display:grid;gap:22px;max-width:74ch}
.etapas li{display:flex;gap:20px;align-items:flex-start}
.etapas .n{font-family:var(--mono,var(--sans));font-size:12px;letter-spacing:.16em;color:var(--ouro);padding-top:5px}
.etapas h3{margin-bottom:4px}
.etapas p{font-size:15.5px;margin:0}

/* Caixa de preco */
.preco-caixa{border:1px solid var(--ouro);padding:26px 28px;margin-top:36px;max-width:60ch}
.preco-valor{font-family:var(--display);font-size:clamp(24px,3vw,32px);color:var(--creme);margin:8px 0 10px}
.preco-caixa a{color:var(--ouro);text-decoration:none;font-family:var(--sans);font-size:14px}

/* Tabela de precos */
.scroll-tabela{overflow-x:auto;border:1px solid rgba(245,240,232,.2);margin-bottom:28px}
.tabela-precos{border-collapse:collapse;width:100%;min-width:620px}
.tabela-precos th,.tabela-precos td{text-align:left;padding:18px 20px;border-bottom:1px solid rgba(245,240,232,.16);vertical-align:top;font-size:15.5px}
.tabela-precos th{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);font-weight:400}
.tabela-precos td.num{font-family:var(--sans);font-size:22px;white-space:nowrap;color:var(--creme);font-variant-numeric:tabular-nums}
.tabela-precos .mes{font-size:13px;color:var(--creme-60)}
.tabela-precos .sub{font-family:var(--sans);font-size:12px;color:var(--creme-60)}
.tabela-precos tr.destacada td{background:rgba(184,149,106,.12)}
.tabela-precos tr:last-child td{border-bottom:none}

/* Duas colunas */
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:780px){.duas-colunas{grid-template-columns:1fr}}
.caixa-inclui,.caixa-exclui{border:1px solid rgba(245,240,232,.2);padding:24px}
.caixa-inclui h3,.caixa-exclui h3{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.caixa-inclui h3{color:var(--good,#9CC4A8)}
.caixa-exclui h3{color:var(--ouro)}
.caixa-inclui ul,.caixa-exclui ul{margin:0;padding-left:18px}
.caixa-inclui li,.caixa-exclui li{font-family:var(--sans);font-size:14.5px;color:var(--creme-80);margin-bottom:9px}

/* Portfolio */
.caso .resumo{font-family:var(--sans);font-size:14px;color:var(--creme-60);margin:0}
.caso-marca .resumo,.caso-marca .tipo,.caso-marca h2{position:relative;z-index:1}

/* Notas / blog */
.lista-artigos{display:grid;gap:0;border-top:1px solid rgba(245,240,232,.18);max-width:78ch}
.artigo{display:block;text-decoration:none;padding:30px 0;border-bottom:1px solid rgba(245,240,232,.18)}
.artigo .data{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}
.artigo h2{font-size:clamp(24px,2.8vw,32px);margin:10px 0 8px}
.artigo p{font-size:16px;margin-bottom:12px}
.artigo .seta{font-family:var(--sans);font-size:13px;color:var(--ouro)}
.artigo:hover h2{color:var(--ouro)}

.artigo-completo{padding-block:150px 40px}
.artigo-completo .env{max-width:760px}
.artigo-completo h1{font-size:clamp(32px,4.6vw,50px);margin:12px 0 22px}
.artigo-completo .entrada{font-size:20px;line-height:1.55;color:var(--creme);border-left:2px solid var(--ouro);padding-left:20px;margin-bottom:34px}
.artigo-completo h2{font-size:clamp(23px,2.6vw,30px);margin:38px 0 12px}
.artigo-completo p{font-size:17.5px;margin-bottom:16px;max-width:none}
.artigo-completo ul,.artigo-completo ol{margin-bottom:20px;padding-left:22px}
.artigo-completo li{font-size:17px;color:var(--creme-80);margin-bottom:10px}
.artigo-completo a{color:var(--ouro)}

/* Chamada final */
.chamada{border-top:1px solid rgba(245,240,232,.18);text-align:center;padding-block:clamp(60px,8vw,100px)}
.chamada h2{margin:12px 0 14px}
.chamada p{margin-inline:auto}
.chamada .botoes{justify-content:center}


label .dica{
  text-transform:none;letter-spacing:0;font-size:11px;color:var(--ouro);margin-left:6px;
}


/* ---------- Prova, logo a seguir ao hero ---------- */
.prova{padding-block:clamp(38px,5vw,58px);border-bottom:1px solid rgba(245,240,232,.14)}
.lista-prova{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:12px 40px}
.lista-prova li{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);color:var(--creme)}
.lista-prova li span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--creme-60);margin-top:4px}
.nota-prova{font-family:var(--sans);font-size:14px;color:var(--creme-60);margin-top:22px}
.nota-prova a{color:var(--ouro)}


/* Telefone no cabecalho: 55% dos compradores saem de um site sem contactos visiveis */
nav a.tel-cabecalho{
  font-family:var(--mono,var(--sans));font-size:13px;letter-spacing:.08em;color:var(--creme);
  border-bottom:1px solid rgba(184,149,106,.5);
}
nav a.tel-cabecalho:hover{color:var(--ouro);border-bottom-color:var(--ouro)}
@media (max-width:960px){nav a.tel-cabecalho{display:none}}

/* ---------- v2: categorias de showroom ---------- */
.categorias{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:rgba(245,240,232,.16);
}
.categoria{
  background:var(--verde);padding:30px 26px 26px;display:flex;flex-direction:column;
  gap:10px;text-decoration:none;transition:background .25s ease;
}
.categoria:hover{background:var(--verde-fundo)}
.categoria h3{font-size:clamp(21px,2.2vw,26px)}
.categoria p{font-family:var(--sans);font-size:14.5px;color:var(--creme-80);margin:0}
.categoria .seta{font-family:var(--sans);font-size:13px;color:var(--ouro);margin-top:auto;padding-top:12px}
.categoria .brevemente{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--creme-60);border:1px solid rgba(245,240,232,.22);border-radius:999px;
  padding:4px 12px;align-self:flex-start;
}

/* ---------- v2: os tres numeros ---------- */
.contas{border-top:1px solid rgba(245,240,232,.18)}
.numeros{list-style:none;padding:0;margin:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));background:rgba(245,240,232,.16)}
.numeros li{background:var(--verde);padding:30px 26px}
.numeros .n{font-family:var(--sans);font-size:12px;letter-spacing:.18em;color:var(--ouro);display:block;margin-bottom:12px}
.numeros h3{font-size:21px;margin-bottom:10px}
.numeros p{font-size:15.5px;margin:0;color:var(--creme-80)}

/* ---------- v2: ciclo de compra ---------- */
.ciclo li{padding-bottom:22px;border-bottom:1px solid rgba(245,240,232,.14)}
.ciclo li:last-child{border-bottom:0}
.ciclo .falta{
  font-family:var(--sans);font-size:14.5px;color:var(--creme-60);margin-top:10px;
  border-left:2px solid var(--ouro);padding-left:14px;
}
.ciclo .falta strong{color:var(--ouro);font-weight:400}

/* ---------- v2: caso por publicar ---------- */
.caso-vazio{border-top:1px solid rgba(245,240,232,.18)}
.caso-vazio h2{margin:12px 0 14px;max-width:22ch}
.caso-vazio p{max-width:62ch}

/* ---------- v2: caminhos por perfil ---------- */
.caminhos-seccao{border-top:1px solid rgba(245,240,232,.18)}
.caminhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:rgba(245,240,232,.16)}
.caminho{background:var(--verde);padding:30px 26px}
.caminho .n{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ouro);display:block;margin-bottom:10px}
.caminho h3{font-size:23px;margin-bottom:6px}
.caminho .perfil{font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--creme-60);margin-bottom:16px}
.caminho ol{margin:0;padding-left:20px}
.caminho li{font-family:var(--sans);font-size:14.5px;color:var(--creme-80);margin-bottom:10px}

/* ---------- v2: menu no telemovel ---------- */
.menu-btn{display:none}
@media (max-width:860px){
  header .env{position:relative}
  .menu-btn{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;
  }
  .menu-btn span{
    display:block;height:1.5px;width:100%;background:var(--creme);border-radius:2px;
    transition:transform .22s ease,opacity .18s ease;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  nav{
    display:none;position:absolute;top:calc(100% + 20px);left:0;right:0;
    background:var(--verde-fundo);border:1px solid rgba(245,240,232,.18);
    padding:6px 0;box-shadow:0 18px 40px rgba(10,16,9,.42);
  }
  nav[data-aberto="true"]{display:block}
  nav ul{flex-direction:column;gap:0}
  nav li{border-bottom:1px solid rgba(245,240,232,.1)}
  nav li:last-child{border-bottom:0}
  nav a{display:block;padding:14px 22px;font-size:14.5px}
  nav a:hover,nav a[aria-current="page"]{border-bottom:0;color:var(--ouro)}
  nav a.dhos,nav a.nav-cta{
    display:block;margin:12px 22px;text-align:center;border-radius:999px;
  }
  nav a.tel-cabecalho{display:block;color:var(--ouro)}
}
@media (prefers-reduced-motion:reduce){.menu-btn span{transition:none}}

/* ---------- v2: legibilidade do dourado em texto pequeno ----------
   O ouro da marca (#B8956A) da 3.42:1 sobre o verde, abaixo do minimo
   de 4.5:1 para texto normal. Fica para elementos grandes; o texto
   pequeno passa a usar um tom mais claro, que da 4.53:1. */
:root{--ouro-claro:#CDAE86}
.rotulo,
.migalhas,
.migalhas a,
.artigo .data,
.artigo .seta,
.servico .seta,
.categoria .seta,
.etapas .n,
.numeros .n,
.caminho .n,
.passos li::before,
.caixa-exclui h3,
.cartao-dados h3,
.ciclo .falta strong,
.nota-prova a,
.nota-local a,
label .dica,
table th{color:var(--ouro-claro)}

/* ================================================================
   v2: PROFUNDIDADE
   O site era um campo verde plano do topo ao fundo. Passa a ter
   quatro niveis de superficie e um ritmo de seccoes alternadas.
   ================================================================ */
:root{
  --verde-profundo:#242D1D;   /* seccoes alternadas */
  --verde-noite:#1B2216;      /* chamada final, o ponto mais escuro */
}

/* Ritmo: seccoes alternadas ganham fundo mais escuro e um fio no topo */
main > section:nth-of-type(even):not(.hero):not(.faixa):not(.estudio):not(.prova):not(.pagina-topo){
  background:var(--verde-profundo);
  border-top:1px solid rgba(245,240,232,.10);
  border-bottom:1px solid rgba(245,240,232,.10);
}

/* Cartoes passam a ler-se como objetos, e nao como fundo com riscas */
.servico,
.categoria,
.entregavel,
.numeros li,
.caminho,
.caixa-inclui,
.caixa-exclui{
  background:var(--verde-fundo);
}
.servico:hover,
.categoria:hover{background:#38452C}
.caminho{border:1px solid rgba(245,240,232,.10)}
.caixa-inclui,.caixa-exclui{border-color:rgba(245,240,232,.14)}

/* As grelhas ganham um fio mais visivel entre cartoes */
.servicos,.categorias,.entregaveis,.numeros,.caminhos{background:rgba(245,240,232,.10)}

/* Perguntas: linhas que se leem, com a aberta em destaque */
.faq details{
  border-bottom:1px solid rgba(245,240,232,.14);
  transition:background .2s ease;
}
.faq details[open]{
  background:var(--verde-fundo);
  border-left:2px solid var(--ouro);
}
.faq details[open] summary{color:var(--creme)}
.faq details[open] > p{padding-inline:20px 18px}
.faq details[open] summary{padding-inline:20px}

/* Topo das paginas interiores fecha com um fio */
.pagina-topo{border-bottom:1px solid rgba(245,240,232,.10);padding-bottom:clamp(46px,6vw,72px)}

/* Chamada final: o ponto mais escuro da pagina, para fechar com peso */
.chamada{
  background:var(--verde-noite);
  border-top:1px solid rgba(184,149,106,.30);
}
.chamada .rotulo{color:var(--ouro-claro)}

/* Rodape separa-se do corpo */
footer{background:var(--verde-noite);border-top:1px solid rgba(245,240,232,.10)}

/* Bloco de contacto: recolhe para dentro de um painel */
#contacto .contacto{
  background:var(--verde-fundo);
  border:1px solid rgba(245,240,232,.12);
  padding:clamp(26px,4vw,44px);
}
main > section:nth-of-type(even) #contacto .contacto,
#contacto .contacto{background:var(--verde-fundo)}

/* Faixa de material ganha altura, para respirar entre blocos de texto */
.faixa{padding-block:clamp(80px,11vw,140px)}

/* Artigos do blog: cada linha e um objeto */
.artigo{padding-inline:22px;transition:background .2s ease}
.artigo:hover{background:var(--verde-fundo)}

/* Etapas numeradas ganham um fio vertical que guia a leitura */
.etapas{position:relative}
.etapas > li{padding-left:4px}
.etapas .n{
  min-width:34px;text-align:right;
}

/* Respiro: 120px entre seccoes dava ecras quase vazios */
section{padding-block:clamp(56px,6.5vw,88px)}
.cabecalho-seccao{margin-bottom:36px}
.pagina-topo{padding-block:140px clamp(38px,4.5vw,56px)}

/* ---------- v2: capas das paginas interiores ---------- */
.pagina-topo.com-capa{
  position:relative;overflow:hidden;
  background:var(--verde-fundo) var(--capa) center/cover no-repeat;
  padding-block:clamp(150px,16vw,190px) clamp(46px,6vw,72px);
  border-bottom:1px solid rgba(245,240,232,.14);
}
.pagina-topo.com-capa::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,30,19,.82) 0%,rgba(24,30,19,.70) 45%,rgba(24,30,19,.88) 100%);
}
.pagina-topo.com-capa > .env{position:relative;z-index:1}
.pagina-topo.com-capa h1,
.pagina-topo.com-capa p{text-shadow:0 1px 20px rgba(10,12,8,.5)}

/* ---------- v2: WhatsApp sempre presente ---------- */
.wa{
  position:fixed;right:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px);z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:#1F7A4D;color:#F5F0E8;text-decoration:none;
  border-radius:999px;padding:13px 20px 13px 16px;
  font-family:var(--sans);font-size:14.5px;letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(10,16,9,.45);
  transition:background .2s ease,transform .2s ease;
}
.wa:hover{background:#248F5A;transform:translateY(-2px)}
.wa svg{width:22px;height:22px;flex:none;fill:currentColor}
.wa .texto{white-space:nowrap}
@media (max-width:560px){
  .wa{padding:14px;border-radius:50%}
  .wa .texto{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}
@media (prefers-reduced-motion:reduce){.wa{transition:none}}


/* ---------- v2: cartoes de categoria com fotografia ---------- */
.categoria{padding:0;overflow:hidden}
.categoria .foto{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--verde-profundo);
}
.categoria .foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) brightness(.82);
  transition:transform .5s ease,filter .35s ease;
}
.categoria:hover .foto img{transform:scale(1.04);filter:saturate(1) brightness(.95)}
.categoria .foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,30,19,.10),rgba(24,30,19,.55));
}
.categoria .foto.sem-foto{
  background:var(--verde-profundo) url("/assets/monograma.webp") center/78px no-repeat;
  opacity:.5;
}
.categoria .corpo{
  display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px;flex:1;
}
.categoria .corpo h3{font-size:clamp(20px,2vw,24px)}
.categoria .seta{margin-top:auto;padding-top:12px}
.categoria.sem-imagem .brevemente{margin-top:2px}

/* ---------- v2: faixa de capa nos artigos ---------- */
.capa-faixa{
  position:relative;height:clamp(220px,32vw,380px);margin-top:0;
  background:var(--verde-fundo) var(--capa) center/cover no-repeat;
  border-bottom:1px solid rgba(245,240,232,.14);
}
.capa-faixa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,30,19,.45),rgba(24,30,19,.82));
}
.capa-faixa + .artigo-completo{padding-top:clamp(38px,5vw,62px)}

/* ---------- v2: faixa limpa no fundo das capas ----------
   O veu escuro deixa de cobrir os ultimos 50px, e a fotografia
   aparece a cheio numa tira, com um fio dourado a marcar o corte. */
.pagina-topo.com-capa::before{
  inset:0 0 clamp(30px,4.2vw,52px) 0;
}
.pagina-topo.com-capa::after{
  content:"";position:absolute;left:0;right:0;
  bottom:clamp(30px,4.2vw,52px);height:1px;
  background:linear-gradient(90deg,rgba(184,149,106,0),rgba(205,174,134,.75) 18%,rgba(205,174,134,.75) 82%,rgba(184,149,106,0));
}
.capa-faixa::after{inset:0 0 clamp(26px,3.6vw,44px) 0}
.capa-faixa::before{
  content:"";position:absolute;left:0;right:0;z-index:1;
  bottom:clamp(26px,3.6vw,44px);height:1px;
  background:linear-gradient(90deg,rgba(184,149,106,0),rgba(205,174,134,.75) 18%,rgba(205,174,134,.75) 82%,rgba(184,149,106,0));
}

/* ---------- v2: capas a toda a altura, como o hero da home ---------- */
.pagina-topo.com-capa{
  min-height:92vh;
  display:flex;
  align-items:center;
  padding-block:clamp(150px,17vw,200px) clamp(60px,8vw,110px);
}
.pagina-topo.com-capa > .env{width:100%}
.capa-faixa{height:clamp(300px,44vw,520px)}
@media (max-width:640px){
  .pagina-topo.com-capa{min-height:78vh}
}

/* ---------- Correcao de alinhamento ----------
   O .hero e flex, por isso o .env encolhia ate ao conteudo e centrava-se,
   ficando 132px mais a dentro do que todas as outras seccoes.
   Com width:100% volta a assentar na mesma grelha do resto do site. */
.hero > .env{width:100%}

/* ---------- v2: destaque do H1 do hero ----------
   O ouro a 60px lia-se como bege. Fica so o italico, em creme. */
.hero h1 .destaque{color:var(--creme);font-style:italic}

/* ---------- v2: monograma do hero mais presente ---------- */
.hero-marca{opacity:.30}

/* ================================================================
   v3: MATERIA DA MARCA
   A identidade nas redes nao assenta em verde chapado, assenta em
   fundos com materia: couro azeitona, madeira escura, e o monograma
   como marca de agua enorme. As superficies de fecho passam a ter
   grao, e o rodape passa a fechar com o logotipo da marca.
   Contraste verificado: creme sobre o pior pixel de cada textura
   fica acima de 8:1, muito acima do minimo de 4.5:1.
   ================================================================ */

.chamada{
  position:relative;
  background:
    linear-gradient(rgba(27,34,22,.58), rgba(27,34,22,.58)),
    image-set(url("/assets/textura-couro.webp") type("image/webp"),
              url("/assets/textura-couro.jpg")  type("image/jpeg"))
    center/cover no-repeat,
    var(--verde-noite);
  overflow:hidden;
}
/* monograma gigante, como nos posts */
.chamada::before{
  content:"";position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(46vw,520px);aspect-ratio:481/453;
  background:url("/assets/monograma.webp") center/contain no-repeat;
  opacity:.07;pointer-events:none;
}
.chamada > .env{position:relative;z-index:1}
@media (max-width:860px){.chamada::before{width:82vw;right:-18%;opacity:.05}}

footer{
  background:
    linear-gradient(rgba(27,34,22,.70), rgba(27,34,22,.70)),
    image-set(url("/assets/textura-couro.webp") type("image/webp"),
              url("/assets/textura-couro.jpg")  type("image/jpeg"))
    center/cover no-repeat,
    var(--verde-noite);
}

/* Topos sem fotografia deixam de ser verde chapado e ganham madeira */
.pagina-topo:not(.com-capa){
  background:
    linear-gradient(rgba(27,34,22,.68), rgba(27,34,22,.68)),
    image-set(url("/assets/textura-madeira.webp") type("image/webp"),
              url("/assets/textura-madeira.jpg")  type("image/jpeg"))
    center/cover no-repeat,
    var(--verde-fundo);
}

/* Assinatura da marca no rodape */
.marca-rodape{
  display:block;width:200px;height:auto;margin:0 0 14px;
}
@media (max-width:720px){.marca-rodape{width:170px}}

/* Menu em maiusculas. Caixa alta pede mais entrelinha entre letras e
   um corpo ligeiramente menor, senao a barra fica pesada e larga. */
nav a{text-transform:uppercase;font-size:12px;letter-spacing:.145em}
nav ul{gap:22px}
nav a.nav-cta{font-size:11.5px;letter-spacing:.14em;padding:9px 18px}
@media (max-width:860px){
  nav a{font-size:13px;letter-spacing:.16em}
}

/* ================================================================
   v4: ACABAMENTO
   O que faz as referencias parecerem caras nao e a cor, e tres
   coisas: ar a mais, blocos que flutuam em vez de faixas coladas
   de bordo a bordo, e um selo a marcar a costura entre a
   fotografia e o texto. Nada disto precisa de fundos creme.
   ================================================================ */

/* --- 1. Ar --- */
section{padding-block:clamp(88px,10.5vw,148px)}
h2{font-size:clamp(30px,4.1vw,48px);line-height:1.06;letter-spacing:-.005em}
.cabecalho-seccao{
  margin-bottom:clamp(48px,6vw,72px);
  max-width:46ch;margin-inline:auto;text-align:center;
}
.cabecalho-seccao h2{margin:14px 0 18px}
.cabecalho-seccao p{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.62}

/* --- 2. Blocos que flutuam --- */
main > section:nth-of-type(even):not(.hero):not(.faixa):not(.estudio):not(.prova):not(.pagina-topo){
  border-radius:clamp(18px,2.6vw,36px);
  margin-inline:clamp(10px,2.2vw,34px);
  border:1px solid rgba(245,240,232,.10);
  overflow:hidden;
}
/* as grelhas la dentro deixam de encostar aos cantos rasgados */
.categorias,.servicos,.numeros,.caminhos{border-radius:14px;overflow:hidden}
.categoria .foto{border-radius:0}

/* --- 3. Selo na costura entre a fotografia e o texto --- */
.selo{
  position:relative;
}
.selo::before{
  content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:clamp(84px,9vw,116px);aspect-ratio:1;border-radius:50%;
  background:var(--verde-noite) url("/assets/chave.webp") center/52% no-repeat;
  border:1px solid rgba(184,149,106,.55);
  box-shadow:0 10px 34px rgba(10,14,8,.45);
  z-index:3;
}

/* --- 4. Cantos nas fotografias, como nas referencias --- */
.faixa{border-radius:clamp(18px,2.6vw,36px);margin-inline:clamp(10px,2.2vw,34px)}
.capa-faixa{border-radius:0}

@media (max-width:720px){
  .cabecalho-seccao{text-align:left;margin-inline:0;max-width:none}
  main > section:nth-of-type(even):not(.hero):not(.faixa):not(.estudio):not(.prova):not(.pagina-topo){
    margin-inline:8px;border-radius:16px;
  }
}

/* v4, correcoes de grelha e do selo */

/* O selo estava a ser cortado pelo overflow do painel. O painel nao
   precisa de cortar nada: as grelhas ja recolhem para dentro da goteira. */
main > section:nth-of-type(even):not(.hero):not(.faixa):not(.estudio):not(.prova):not(.pagina-topo){
  overflow:visible;
}

/* Grelhas com o numero exato de colunas. Seis categorias em 3x2 e
   quatro servicos em 2x2, para nao sobrarem celulas vazias. */
@media (min-width:900px){
  .categorias{grid-template-columns:repeat(3,1fr)}
  .servicos{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:600px) and (max-width:899px){
  .categorias,.servicos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:599px){
  .categorias,.servicos{grid-template-columns:1fr}
}

/* Selo um pouco maior e com a chave a ocupar mais espaco */
.selo::before{width:clamp(92px,9.5vw,126px);background-size:56%}

/* Com os cabecalhos ao centro, os blocos de corpo que tem medida
   limitada tambem passam a assentar no mesmo eixo. O texto continua
   alinhado a esquerda dentro deles, so o bloco e que centra. */
.faq,.etapas,.lista-artigos,.ciclo,.preco-caixa,.passos,.caixa-inclui,.caixa-exclui{
  margin-inline:auto;
}
.ciclo{max-width:78ch}
@media (max-width:720px){
  .faq,.etapas,.lista-artigos,.ciclo,.preco-caixa{margin-inline:0}
}
.nota-local,.nota-prova{text-align:center;max-width:60ch;margin-inline:auto}
@media (max-width:720px){.nota-local,.nota-prova{text-align:left;margin-inline:0}}

/* Selo com o monograma DH em vez da chave */
.selo::before{
  background-image:url("/assets/monograma.webp");
  background-size:50%;
}
/* O monograma oficial e creme, nao verde. O selo e a marca de agua
   da chamada passam a usar o ficheiro certo. */
.selo::before{background-image:url("/assets/monograma-creme.webp")}
.chamada::before{background-image:url("/assets/monograma-creme.webp");opacity:.06}

/* Selo sem disco: so o monograma na costura. A sombra segue o
   contorno das letras, nao um circulo, para o creme aguentar
   qualquer fotografia por baixo. */
.selo::before{
  width:clamp(76px,7.8vw,104px);
  background-color:transparent;
  background-size:contain;
  border:0;border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 2px 10px rgba(10,14,8,.55)) drop-shadow(0 0 26px rgba(10,14,8,.35));
}

/* ---------- Hero simplificado, ao centro ----------
   Como nas referencias: fotografia a toda a largura, rotulo pequeno,
   titulo grande e uma linha de apoio. Nada mais. O monograma sai
   daqui porque ja aparece a seguir, na costura. */
.hero .env{text-align:center;max-width:1000px}
.hero h1{max-width:19ch;margin-inline:auto}
.hero .rotulo{margin-bottom:22px}
.hero > .env > p:not(.rotulo){max-width:56ch;margin-inline:auto;font-size:clamp(17px,1.6vw,19.5px)}
.hero .botoes{justify-content:center;margin-top:38px}
.hero-marca{display:none}
@media (max-width:640px){
  .hero h1{max-width:none}
  .hero .botoes{flex-wrap:wrap}
}

/* Com o texto ao centro, o veu do hero passa a fechar tambem pelo
   meio. Sem isto o titulo cai por cima da zona clara do video. */
.hero::after{
  background:
    radial-gradient(ellipse 78% 62% at 50% 52%, rgba(12,18,10,.58) 0%, rgba(12,18,10,.30) 62%, rgba(12,18,10,0) 100%),
    linear-gradient(180deg,rgba(10,16,9,.58) 0%,var(--veu) 45%,rgba(10,16,9,.74) 100%);
}

/* Os paragrafos herdam max-width:64ch da regra base. Dentro de um
   bloco centrado, a caixa deles encostava a esquerda e o texto
   centrava dentro da caixa, nao dentro da seccao. Faltavam as
   margens automaticas. */
.hero .rotulo,
.hero > .env > p,
.cabecalho-seccao p,
.chamada p,
.faixa p{max-width:none;margin-inline:auto}
.hero > .env > p:not(.rotulo){max-width:56ch}
.chamada > .env > p{max-width:62ch}
@media (max-width:720px){
  .cabecalho-seccao p{margin-inline:0}
}

/* O veu por cima da fotografia do cartao existia por habito: o texto
   fica por baixo da imagem, nao em cima dela, por isso nao havia nada
   a proteger. Em fotografia noturna estava a comer a metade de baixo. */
.categoria .foto img{filter:saturate(.94) brightness(.96)}
.categoria .foto::after{
  background:linear-gradient(180deg,rgba(24,30,19,.04),rgba(24,30,19,.20));
}
.categoria:hover .foto img{transform:scale(1.04);filter:saturate(1) brightness(1.02)}

/* A textura de couro sai da chamada e do rodape. As duas ultimas
   seccoes voltam a verde chapado. */
.chamada{background:var(--verde-noite)}
footer{background:var(--verde-noite)}

/* ================================================================
   v5: ESCALA E LEITURA
   Havia treze tamanhos de texto de corpo entre 11.5 e 20px, um h3
   a 11px e um h4 a 11px. Isso nao e uma escala, e ruido, e e o que
   se ve como "proporcoes erradas".
   Passa a haver seis degraus, com razao de cerca de 1.22 entre eles.
   O dourado da marca da 3.42:1 sobre o verde base, abaixo do minimo
   de 4.5:1. Todo o texto pequeno em dourado passa para o tom claro.
   ================================================================ */
:root{
  --t-micro: 12px;    /* rotulos, numeros, datas, migalhas, etiquetas */
  --t-mini:  14px;    /* notas, avisos, rodape */
  --t-base:  17px;    /* corpo */
  --t-medio: 19.5px;  /* entradas e perguntas */
  --t-h3:    clamp(21px, 2.1vw, 25px);
  --t-h2:    clamp(28px, 3.2vw, 36px);
  --t-h2-gr: clamp(32px, 4.1vw, 46px);   /* cabecalho de seccao */
  --t-h1:    clamp(34px, 5vw, 54px);
  --creme-70:rgba(245,240,232,.76);
}

/* --- degraus --- */
h1{font-size:var(--t-h1)}
.hero h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
.cabecalho-seccao h2,.chamada h2,.faixa h2{font-size:var(--t-h2-gr)}
h3,.categoria h3,.categoria .corpo h3,.caminho h3,.numeros h3,.caso h3,.entregavel h3{
  font-size:var(--t-h3);line-height:1.18
}
p,li{font-size:var(--t-base)}
.hero > .env > p:not(.rotulo),
.cabecalho-seccao p,
.chamada > .env > p,
.faq summary{font-size:var(--t-medio)}
.servico p,.categoria p,.caminho p,.entregavel p,.numeros p,.artigo p{font-size:var(--t-base)}

/* tudo o que e rotulo pequeno cai no mesmo degrau */
.rotulo,.migalhas,.artigo .data,.servico .num,.numeros .n,.caminho .n,
.etapas .n,.caminho .perfil,.assinatura,.lista-prova li span,
.tabela-precos .sub,nav a,footer h4,label,
.caixa-inclui h3,.caixa-exclui h3,.cartao-dados h3,
.servico .etiquetas span,.migalhas a{font-size:var(--t-micro)}
.rgpd,.nota-local,.nota-prova,.dica,footer p,footer a,footer li{font-size:var(--t-mini)}
nav a.nav-cta{font-size:var(--t-micro)}

/* --- contraste: o dourado escuro sai de todo o texto pequeno --- */
.rotulo,.migalhas,.migalhas a,.artigo .data,.artigo .seta,.servico .seta,
.categoria .seta,.servico .num,.numeros .n,.caminho .n,.etapas .n,
.passos li::before,.caixa-exclui h3,.cartao-dados h3,.ciclo .falta strong,
.nota-prova a,.nota-local a,label .dica,table th,footer h4,
.chamada .rotulo,.tabela-precos .sub{color:var(--ouro-claro)}

/* links dentro de texto corrido: o dourado escuro nao passava */
main p a,main li a,main summary a,footer a:hover{color:var(--ouro-claro)}
main p a:hover,main li a:hover{color:var(--creme)}

/* creme a 62% em texto pequeno ficava a 4.35:1. Sobe para 76%. */
.nota-local,.nota-prova,.rgpd,.assinatura,.migalhas,
.lista-prova li span,.tabela-precos .sub,label{color:var(--creme-70)}

/* entrelinha do corpo, agora que os tamanhos assentaram */
p{line-height:1.62}
.hero > .env > p:not(.rotulo),.cabecalho-seccao p{line-height:1.55}

/* v5, fecho da escala. Estes seletores vem por ultimo e com peso
   suficiente para nao serem apanhados por regras de contexto. */
h1,.hero h1,.pagina-topo h1,.artigo-completo h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
.cabecalho-seccao h2,.chamada h2,.faixa h2{font-size:var(--t-h2-gr)}
h3,.caso h3,.categoria h3,.categoria .corpo h3,.numeros h3,.caminho h3{font-size:var(--t-h3)}

/* degrau medio: entradas, perguntas e as linhas de apoio dos cabecalhos */
.artigo-completo .entrada,
.faq summary,
.hero > .env > p:not(.rotulo),
.cabecalho-seccao > p:not(.rotulo),
.chamada > .env > p:not(.rotulo){font-size:var(--t-medio);line-height:1.55}

/* degrau de corpo */
main p:where(:not(.rotulo):not(.entrada):not(.nota-local):not(.nota-prova):not(.rgpd):not(.perfil):not(.dica)),
main li,
.ciclo .falta,.ciclo .falta strong,
select,option,textarea,input{font-size:var(--t-base)}

/* degrau micro: tudo o que e etiqueta. Vem depois de tudo. */
p.rotulo,.rotulo,
.cabecalho-seccao p.rotulo,.hero p.rotulo,.chamada p.rotulo,.artigo-completo p.rotulo,
span.num,span.n,p.perfil,span.seta,span.dica,label .dica,
nav a,nav a.nav-cta,label,footer h4,
.caixa-inclui h3,.caixa-exclui h3,.cartao-dados h3,
.servico .etiquetas span,.migalhas,.migalhas a,.artigo .data,
.assinatura,.tabela-precos .sub,.lista-prova li span{font-size:var(--t-micro)}

/* degrau mini */
p.rgpd,p.nota-local,p.nota-prova,
footer p,footer a,footer li,
.btn,button,a.btn{font-size:var(--t-mini)}

/* contraste: nao sobra dourado escuro em texto pequeno nem em links */
a{color:inherit}
main a:where(:not(.btn):not(.nav-cta):not(.categoria):not(.servico):not(.artigo)),
.rgpd a,label a,footer a:hover{color:var(--ouro-claro)}
main a:not(.btn):hover{color:var(--creme)}
.caixa-inclui h3{color:#A8CCB4}

/* ultimos restos fora da escala */
.cartao-dados h3{font-size:var(--t-micro)}
.caixa-inclui li,.caixa-exclui li,.caminho li,.categoria p,.ciclo .falta,
.artigo .resumo{font-size:var(--t-base)}
.artigo-completo h2{font-size:var(--t-h2)}
@media (max-width:860px){ nav a{font-size:var(--t-mini)} }

/* ================================================================
   v6: LIMA, E TUDO ACIMA DO ACEITAVEL
   Cor de destaque passa a lima #D2EA72, que da 7.14:1 sobre o verde
   base, o pior fundo do site. Isso e nivel AAA, nao o minimo AA.
   Em traco fino e texto pequeno. Os botoes ficam creme.
   Tamanhos: nada abaixo de 13px, corpo a 17px, acima dos 16px que
   se recomendam para leitura em ecra.
   Creme secundario sobe de 82% para 90%, que da 7.05:1.
   ================================================================ */
:root{
  --lima:#D2EA72;
  --lima-forte:#C6E24F;   /* so para tracos e simbolos grandes */
  --ouro:#D2EA72;         /* substitui o dourado em todo o lado */
  --ouro-claro:#D2EA72;
  --creme-80:rgba(245,240,232,.90);
  --creme-70:rgba(245,240,232,.90);
  --creme-60:rgba(245,240,232,.90);
  --t-micro: 13px;
  --t-mini:  15px;
  --t-base:  17px;
  --t-medio: 20px;
  --t-h3:    clamp(22px, 2.2vw, 26px);
  --t-h2:    clamp(29px, 3.3vw, 37px);
  --t-h2-gr: clamp(33px, 4.2vw, 47px);
  --t-h1:    clamp(35px, 5.1vw, 55px);
}

/* a lima entra onde o dourado estava */
.rotulo,.migalhas,.migalhas a,.artigo .data,.artigo .seta,.servico .seta,
.categoria .seta,.servico .num,.numeros .n,.caminho .n,.etapas .n,
.passos li::before,.caixa-exclui h3,.cartao-dados h3,.ciclo .falta strong,
.nota-prova a,.nota-local a,label .dica,table th,footer h4,
.chamada .rotulo,.tabela-precos .sub,.artigo-completo .entrada,
main a:where(:not(.btn):not(.nav-cta):not(.categoria):not(.servico):not(.artigo)){color:var(--lima)}

/* tracos finos: e aqui que a lima ganha presenca sem gritar */
.chamada{border-top:1px solid var(--lima)}
.faq details[open]{border-left-color:var(--lima)}
.artigo-completo .entrada{border-left-color:var(--lima)}
.caixa-exclui{border-color:rgba(210,234,114,.34)}
.pagina-topo.com-capa::after{background:var(--lima)}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--lima)}
.servico:hover .seta,.categoria:hover .seta{color:var(--lima-forte)}
.selo::before{filter:drop-shadow(0 2px 10px rgba(10,14,8,.6))}

/* botoes ficam creme, como combinado */
.btn.cheio{background:var(--creme);color:var(--castanho);border-color:var(--creme)}
.btn.cheio:hover{background:var(--lima);color:#1B2216;border-color:var(--lima)}
nav a.nav-cta{background:var(--creme);color:var(--castanho)}
nav a.nav-cta:hover{background:var(--lima);color:#1B2216}

/* o verde do WhatsApp deixa de ser a unica cor viva fora da marca */
.wa{background:#1F7A4C}
.caixa-inclui h3{color:#CFE8D8}

/* ---------- Menu sempre presente ----------
   O cabecalho passa a acompanhar a pagina. Fica transparente por
   cima da fotografia do topo e ganha fundo assim que se desce, para
   o texto nao se misturar com o que passa por baixo. */
header{
  position:sticky;top:0;left:auto;right:auto;z-index:60;
  padding-block:18px;
  transition:background .25s ease,padding .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
header[data-fixo]{
  background:rgba(27,34,22,.90);
  border-bottom-color:rgba(245,240,232,.12);
  padding-block:12px;
}
@supports (backdrop-filter:blur(10px)){
  header[data-fixo]{background:rgba(27,34,22,.72);backdrop-filter:blur(12px) saturate(1.1)}
}
header[data-fixo] .marca img{width:32px;height:32px;transition:width .25s ease,height .25s ease}
/* o hero deixa de precisar do espaco que o cabecalho absoluto ocupava */
.hero{margin-top:calc(-1 * (18px * 2 + 38px));padding-block:calc(140px + 18px) 80px}
@media (max-width:860px){
  header[data-aberto-menu]{background:rgba(27,34,22,.97)}
}

/* ================================================================
   v7: TUDO UM DEGRAU ACIMA
   O texto mais pequeno era 13px. Sobe para 14.5px e o corpo passa
   de 17 para 18px. Nada no site fica abaixo dos 14px.
   ================================================================ */
:root{
  --t-micro: 14.5px;
  --t-mini:  16.5px;
  --t-base:  18px;
  --t-medio: 21.5px;
  --t-h3:    clamp(23px, 2.3vw, 28px);
  --t-h2:    clamp(30px, 3.4vw, 39px);
  --t-h2-gr: clamp(34px, 4.3vw, 49px);
  --t-h1:    clamp(36px, 5.2vw, 57px);
}
/* os que tinham tamanho proprio e escapavam a escala */
.btn,button,a.btn,.wa .texto{font-size:var(--t-mini)}
.legal td,.legal th,table td{font-size:var(--t-base)}
.legal th{font-size:var(--t-micro)}
.rgpd,.rgpd span{font-size:var(--t-mini)}
.marca span{font-size:var(--t-micro)}
.migalhas,.migalhas a,.migalhas span{font-size:var(--t-micro)}
.wa{padding:13px 20px}
/* caixa alta a 14.5 pede um pouco menos de entrelinha entre letras */
.rotulo{letter-spacing:.18em}
nav a{letter-spacing:.13em}
/* setas dos cartoes e botao do formulario, que tinham tamanho proprio */
.seta,.servico .seta,.categoria .seta,.artigo .seta{font-size:var(--t-micro)}
button[type=submit]{font-size:var(--t-mini)}
.cartao-dados a,.cartao-dados p,.cartao-dados li{font-size:var(--t-base)}

/* ================================================================
   v8: A SERIFA FICA SÓ NOS TÍTULOS
   O Playfair é uma serifa de contraste alto: os traços finos são
   muito mais finos do que os grossos. Em corpo de texto claro sobre
   fundo escuro, os finos quase desaparecem e o olho cansa. É uma
   letra de título, não de leitura corrida.
   O corpo passa para Jost, que já estava carregado.
   ================================================================ */
body,p,li,td,input,textarea,select,button,summary,blockquote cite,
.entrada,.falta,.resumo,.dados,.rgpd,figcaption{
  font-family:var(--sans);
}
h1,h2,h3,.faixa h2,.chamada h2,blockquote,.hero h1 .destaque{
  font-family:var(--display);
}
/* a Jost e geometrica e pede um pouco mais de ar entre linhas */
p,li{line-height:1.68;letter-spacing:.004em}
.hero > .env > p:not(.rotulo),.cabecalho-seccao > p:not(.rotulo),
.chamada > .env > p:not(.rotulo){line-height:1.6}
/* peso 300 fica fino de mais sobre verde: o corpo usa 400 */
p,li,td{font-weight:400}
.artigo-completo .entrada{font-weight:400}

/* ================================================================
   v9: O DEGRAU MEDIO ESTAVA A PERDER
   A regra do corpo tinha varios :not() encadeados, e cada um deles
   soma peso. Ficou mais forte do que a regra das linhas de apoio,
   que por isso apareciam ao mesmo tamanho do corpo. Aqui a ordem
   fica corrigida com peso suficiente.
   ================================================================ */
main .hero > .env > p:not(.rotulo),
main .cabecalho-seccao > p:not(.rotulo),
main .chamada > .env > p:not(.rotulo),
.hero > .env > p:not(.rotulo),
.cabecalho-seccao > p:not(.rotulo),
.chamada > .env > p:not(.rotulo),
.artigo-completo .entrada,
.faq summary{
  font-size:var(--t-medio);
  line-height:1.55;
  color:var(--creme);
  font-family:var(--sans);
}
/* a linha de apoio do hero e a entrada de seccao ganham medida propria */
.hero > .env > p:not(.rotulo){max-width:48ch}
.cabecalho-seccao > p:not(.rotulo){max-width:52ch}

/* v9, fecho: paragrafos que ficaram entre degraus depois de a regra
   de corpo baixar de peso. Voltam ao degrau de corpo. */
main .env > p:where(:not(.rotulo):not(.entrada):not(.nota-local):not(.nota-prova):not(.rgpd)),
main .etapas p,main .ciclo p,main .passos p,main .caixa-inclui li,main .caixa-exclui li,
main .lista-artigos p,main .artigo p,main .dados p,main form p{font-size:var(--t-base)}
/* mas as linhas de apoio mantem o degrau medio */
main .hero > .env > p:not(.rotulo),
main .cabecalho-seccao > p:not(.rotulo),
main .chamada > .env > p:not(.rotulo),
main .artigo-completo .entrada{font-size:var(--t-medio)}
/* A chamada final ficou so com titulo e botao: pede menos altura e
   os dois elementos mais perto um do outro. */
.chamada{padding-block:clamp(64px,7vw,96px)}
.chamada h2{margin:0}
.chamada .botoes{margin-top:26px;justify-content:center}

/* ================================================================
   v10: TOPO CLARO NAS PAGINAS INTERIORES
   Igual a referencia: fundo creme, tipo escuro, duas fotografias
   cortadas pelas margens, sem degrade nenhum por cima delas.
   A home mantem o hero escuro com video.
   Contraste do tipo escuro sobre creme: 14.6:1, nivel AAA.
   ================================================================ */
:root{
  --creme-fundo:#F5F0E8;
  --tinta:#1B2216;              /* verde-noite serve de tinta */
  --tinta-80:rgba(27,34,22,.80);
  --tinta-60:rgba(27,34,22,.62);
}

.pagina-topo.claro{
  background:var(--creme-fundo);
  color:var(--tinta);
  position:relative;overflow:hidden;
  padding-block:clamp(150px,15vw,190px) clamp(64px,7vw,96px);
  border-bottom:0;
  min-height:min(78vh,700px);
  display:flex;align-items:center;
}
.pagina-topo.claro > .env{position:relative;z-index:2;width:100%}
.pagina-topo.claro h1{color:var(--tinta);max-width:13ch}
.pagina-topo.claro p{color:var(--tinta-80)}
.pagina-topo.claro .rotulo{color:var(--tinta-60);letter-spacing:.2em}
.pagina-topo.claro .migalhas,
.pagina-topo.claro .migalhas a{color:var(--tinta-60)}
.pagina-topo.claro .migalhas a:hover{color:var(--tinta)}
.pagina-topo.claro .btn.cheio{
  background:#B9C08D;color:var(--tinta);border-color:#B9C08D;
}
.pagina-topo.claro .btn.cheio:hover{background:#A9B179;border-color:#A9B179}
.pagina-topo.claro .btn.vazio{color:var(--tinta);border-color:rgba(27,34,22,.45)}
.pagina-topo.claro .btn.vazio:hover{background:rgba(27,34,22,.07)}

/* as duas fotografias, cortadas pelas margens, sem veu */
.pagina-topo.claro .lado{
  position:absolute;z-index:1;background-size:cover;background-position:center;
  pointer-events:none;
}
.pagina-topo.claro .lado.esq{
  left:0;top:26%;bottom:12%;width:clamp(70px,10vw,168px);
}
.pagina-topo.claro .lado.dir{
  right:0;top:8%;bottom:8%;width:clamp(170px,28vw,400px);
}
@media (max-width:1000px){
  .pagina-topo.claro .lado.esq{display:none}
  .pagina-topo.claro .lado.dir{width:30vw;top:0;bottom:0}
  .pagina-topo.claro h1{max-width:none}
}
@media (max-width:680px){
  .pagina-topo.claro{min-height:0;display:block;padding-block:130px 44px}
  .pagina-topo.claro .lado.dir{
    position:relative;width:auto;inset:auto;margin:32px calc(var(--gutter)*-1) 0 0;
    height:46vw;max-height:300px;
  }
}

/* o cabecalho tem de virar escuro por cima do creme, ate se descer */
body[data-topo-claro] header:not([data-fixo]) .marca span,
body[data-topo-claro] header:not([data-fixo]) nav a{color:var(--tinta)}
body[data-topo-claro] header:not([data-fixo]) nav a.nav-cta{
  background:var(--tinta);color:var(--creme-fundo)
}
body[data-topo-claro] header:not([data-fixo]) .marca img{filter:brightness(0) saturate(100%) invert(9%) sepia(21%) saturate(892%) hue-rotate(56deg) brightness(96%) contrast(92%)}
body[data-topo-claro] header:not([data-fixo]) .menu-btn span{background:var(--tinta)}

/* a seccao a seguir ao topo claro fecha o degrau de luz com um corte seco */
.pagina-topo.claro + section{border-top:0}

/* v10, correcoes:
   1. o creme tem de subir por baixo do cabecalho, senao fica uma
      barra verde no topo, que e o fundo do body a aparecer.
   2. a nala da esquerda estava alta de mais.
   3. o paragrafo precisa de medida, senao enche a largura toda. */
.pagina-topo.claro{
  margin-top:-74px;
  padding-top:clamp(190px,17vw,225px);
}
.pagina-topo.claro > .env > p:not(.rotulo){max-width:50ch}
.pagina-topo.claro .lado.esq{top:34%;bottom:16%;width:clamp(64px,8.5vw,140px)}
.pagina-topo.claro .lado.dir{top:9%;bottom:9%}
@media (max-width:680px){
  .pagina-topo.claro{margin-top:-70px;padding-top:150px}
}
/* a lima nao se le sobre creme: dentro do topo claro os links ficam tinta */
.pagina-topo.claro a:not(.btn){color:var(--tinta);text-decoration:none}
.pagina-topo.claro .migalhas a{color:var(--tinta-60)}
.pagina-topo.claro a:not(.btn):hover{color:var(--tinta);text-decoration:underline}
/* v10, contraste sobre creme: 62% dava 4.43:1 e o alvo e 7.
   Sobe para 82%, que da 8.2:1. E os links tem de ganhar peso
   suficiente para a lima nao passar por cima. */
:root{--tinta-60:rgba(27,34,22,.82);--tinta-80:rgba(27,34,22,.90)}
main .pagina-topo.claro a:not(.btn),
main .pagina-topo.claro .migalhas a,
main .pagina-topo.claro .migalhas span,
.pagina-topo.claro .rotulo,
.pagina-topo.claro .migalhas{color:var(--tinta-60)}
main .pagina-topo.claro a:not(.btn):hover{color:var(--tinta);text-decoration:underline}
main .pagina-topo.claro.claro a:not(.btn),
main .pagina-topo.claro.claro .migalhas a{color:var(--tinta-60)}
main .pagina-topo.claro.claro a:not(.btn):hover{color:var(--tinta)}

/* v10b: a folga do texto e a mesma dos dois lados.
   Estava 82px a esquerda e 335px a direita, e era isso que fazia a
   nala parecer colada ao texto. Para igualar, a nala estreita e a
   fotografia da direita cresce ate encontrar a mesma folga. */
.pagina-topo.claro .lado.esq{width:clamp(34px,3.8vw,60px)}
.pagina-topo.claro .lado.dir{width:clamp(190px,40vw,600px)}
@media (max-width:1000px){
  .pagina-topo.claro .lado.dir{width:32vw}
}

/* v10c: titulo e paragrafo do topo claro partilham a mesma medida.
   Em ch nao dava, porque o titulo e serifa a 57px e o corpo e sans a
   18px, e um ch nao vale o mesmo nos dois. Fica em pixeis.
   O text-wrap:balance tambem sai daqui, senao encurta as linhas por
   conta propria e a coluna nunca chega ao limite. */
.pagina-topo.claro h1,
.pagina-topo.claro > .env > p:not(.rotulo){
  max-width:clamp(320px, 36vw, 520px);
}
.pagina-topo.claro h1{text-wrap:pretty}

/* ================================================================
   v11: CONTINUIDADE A SERIO
   Antes eram duas fotografias diferentes, uma de cada lado, e nao se
   percebia a ideia. Agora e UMA fotografia a toda a largura da
   seccao, com um painel creme opaco por cima a tapar o meio. O que
   sobra nas duas pontas e a mesma imagem, nos sitios certos, por
   isso o olho fecha a continuidade por tras do texto.
   ================================================================ */
.pagina-topo.claro{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--creme-fundo);
}
/* barra creme na altura do cabecalho, para o menu escuro se ler */
.pagina-topo.claro::before{
  content:"";position:absolute;left:0;right:0;top:0;height:74px;
  background:var(--creme-fundo);z-index:1;
}
/* painel central: deixa a fotografia visivel so nas pontas */
.pagina-topo.claro::after{
  content:"";position:absolute;top:74px;bottom:0;
  left:clamp(34px,3.8vw,60px);
  right:clamp(190px,40vw,600px);
  background:var(--creme-fundo);z-index:1;
}
.pagina-topo.claro > .env{z-index:2}
.pagina-topo.claro .lado{display:none}

@media (max-width:1000px){
  .pagina-topo.claro::after{right:32vw}
}
@media (max-width:680px){
  /* no telemovel a fotografia passa a faixa em baixo, a toda a largura */
  .pagina-topo.claro::after{left:0;right:0;bottom:44vw}
  .pagina-topo.claro{padding-bottom:calc(44vw + 24px)}
}

/* v12: o hero estava escuro de mais. O veu desce de 58% para 38% no
   centro e de 58/74% para 38/56% na vertical. O video ja foi
   recodificado mais claro, por isso o texto continua a passar. */
.hero::after{
  background:
    radial-gradient(ellipse 82% 66% at 50% 52%, rgba(12,18,10,.42) 0%, rgba(12,18,10,.20) 64%, rgba(12,18,10,0) 100%),
    linear-gradient(180deg,rgba(10,16,9,.40) 0%,rgba(10,16,9,.28) 45%,rgba(10,16,9,.58) 100%);
}
/* com menos veu o texto pede uma sombra propria para aguentar
   qualquer fotograma do video */
.hero h1,.hero > .env > p{text-shadow:0 1px 18px rgba(10,14,8,.55)}
.hero .rotulo{text-shadow:0 1px 12px rgba(10,14,8,.65)}
/* v12b: medi o pior fotograma do video por baixo do texto. A 42% de
   veu dava 5.4:1, que passa no minimo legal mas nao no alvo AAA de 7.
   A 52% da 7.1:1. Continua muito mais claro do que os 58% de antes. */
.hero::after{
  background:
    radial-gradient(ellipse 82% 66% at 50% 52%, rgba(12,18,10,.52) 0%, rgba(12,18,10,.26) 64%, rgba(12,18,10,0) 100%),
    linear-gradient(180deg,rgba(10,16,9,.44) 0%,rgba(10,16,9,.34) 45%,rgba(10,16,9,.60) 100%);
}

/* ================================================================
   v13: BLOG COM FOTOGRAFIA
   Era uma lista de linhas. Passa a grelha de cartoes com imagem,
   categoria por cima do titulo e uma barra de filtros que funciona.
   A pagina inteira fica creme, como a referencia.
   ================================================================ */
.pagina-topo.claro.centro{
  min-height:0;padding-block:clamp(150px,14vw,180px) clamp(40px,4.5vw,60px);
  background-image:none;text-align:center;display:block;
}
.pagina-topo.claro.centro::before,
.pagina-topo.claro.centro::after{display:none}
.pagina-topo.claro.centro h1,
.pagina-topo.claro.centro > .env > p:not(.rotulo){margin-inline:auto;max-width:34ch}
.pagina-topo.claro.centro h1{max-width:20ch}
.pagina-topo.claro.centro .rotulo{margin-bottom:14px}

/* barra de categorias */
.barra-cats{
  background:var(--creme-fundo);color:var(--tinta);
  padding-block:16px;
  border-block:1px solid rgba(27,34,22,.14);
}
.barra-cats .env{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.etiqueta-cats{
  font-family:var(--display);font-style:italic;font-size:var(--t-mini);
  color:var(--tinta-60);
}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtro{
  cursor:pointer;background:transparent;border:1px solid transparent;
  color:var(--tinta-60);font-family:var(--sans);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filtro:hover{color:var(--tinta);border-color:rgba(27,34,22,.22)}
.filtro[aria-pressed="true"]{background:var(--tinta);color:var(--creme-fundo);border-color:var(--tinta)}

/* grelha de cartoes */
.seccao-artigos{
  background:var(--creme-fundo);color:var(--tinta);
  padding-block:clamp(48px,6vw,80px);
}
.grelha-artigos{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px) clamp(20px,2.4vw,34px);
}
@media (max-width:900px){.grelha-artigos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grelha-artigos{grid-template-columns:1fr}}
.cartao-artigo{text-decoration:none;display:flex;flex-direction:column;gap:0}
.cartao-artigo .capa{display:block;aspect-ratio:4/3;overflow:hidden;background:rgba(27,34,22,.08)}
.cartao-artigo .capa img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.cartao-artigo:hover .capa img{transform:scale(1.04)}
.cartao-artigo .cat{
  display:block;margin-top:18px;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-60);
}
.cartao-artigo h2{
  font-size:clamp(20px,1.9vw,24px);line-height:1.25;color:var(--tinta);
  margin:8px 0 10px;font-weight:400;
}
.cartao-artigo:hover h2{text-decoration:underline;text-underline-offset:4px}
.cartao-artigo .data{
  font-family:var(--sans);font-size:var(--t-micro);color:var(--tinta-60);
  letter-spacing:.06em;text-transform:none;
}
.sem-artigos{text-align:center;margin-top:36px;color:var(--tinta-60)}
/* a chamada a seguir volta ao verde, com corte seco */
.seccao-artigos + section{border-top:0}
/* as seccoes creme do blog nao entram no ritmo dos paineis escuros */
main > section.barra-cats,
main > section.seccao-artigos{
  background:var(--creme-fundo) !important;
  border-radius:0;margin-inline:0;border-color:rgba(27,34,22,.14);
  overflow:visible;
}
main > section.seccao-artigos{border-block:0}
main > section.barra-cats,
main > section.seccao-artigos{
  margin-inline:0 !important;border-radius:0 !important;border-left:0;border-right:0;
}
/* v13b: o rotulo do topo centrado herdava max-width:64ch sem margens
   automaticas, por isso centrava dentro da caixa e nao na seccao. */
.pagina-topo.claro.centro .rotulo,
.pagina-topo.claro.centro > .env > p{max-width:none;margin-inline:auto}
.pagina-topo.claro.centro h1{max-width:20ch;margin-inline:auto}
.pagina-topo.claro.centro > .env > p:not(.rotulo){max-width:36ch;margin-inline:auto}

/* ================================================================
   v14: CARTOES DE SERVICO COM FOTOGRAFIA
   Mesma anatomia dos cartoes de categoria: imagem em cima, texto
   em baixo, tudo dentro do mesmo link.
   ================================================================ */
.servico{padding:0;gap:0;overflow:hidden}
.servico .foto{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--verde-profundo)}
.servico .foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) brightness(.94);
  transition:transform .6s ease,filter .35s ease;
}
.servico:hover .foto img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.servico .corpo{
  display:flex;flex-direction:column;gap:12px;
  padding:26px 28px 26px;flex:1;
}
.servico .corpo .seta{margin-top:auto;padding-top:10px}
@media (max-width:600px){
  .servico .foto{aspect-ratio:2/1}
  .servico .corpo{padding:22px 22px 24px}
}

/* faixa de fotografia a toda a largura, sem veu e sem texto por cima */
.faixa-foto{margin:0;display:block;line-height:0}
.faixa-foto img{
  width:100%;height:clamp(220px,30vw,400px);object-fit:cover;display:block;
  filter:saturate(.96);
}
@media (max-width:600px){.faixa-foto img{height:44vw;min-height:170px}}

/* ================================================================
   v15: APRESENTACAO DOS SERVICOS
   1. Os quatro caminhos estavam numa grelha de 3 colunas, o que
      deixava uma celula vazia e cartoes de alturas diferentes.
      Passam a 2x2.
   2. Cada caminho e uma sequencia com ordem, por isso os passos
      ganham numero proprio em vez de bolinhas.
   ================================================================ */
@media (min-width:900px){
  .caminhos{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:600px) and (max-width:899px){
  .caminhos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:599px){
  .caminhos{grid-template-columns:1fr}
}
.caminho{display:flex;flex-direction:column;padding:32px 30px 30px}
.caminho .perfil{margin-bottom:20px}

/* passos numerados a serio, com o numero fora da coluna de texto */
.caminho ol{
  list-style:none;padding:0;margin:0;
  display:grid;gap:16px;counter-reset:passo;
}
.caminho ol li{
  counter-increment:passo;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  margin:0;font-size:var(--t-base);color:var(--creme-80);line-height:1.55;
}
.caminho ol li::before{
  content:counter(passo,decimal-leading-zero);
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--lima);font-variant-numeric:tabular-nums;
  padding-top:3px;
}
/* o cabecalho de cada caminho separa-se dos passos com um fio */
.caminho .perfil{
  padding-bottom:16px;border-bottom:1px solid rgba(245,240,232,.14);
}

/* v15b: os cartoes de servico voltam a ser so texto */
.servico{padding:34px 30px 30px;gap:14px;display:flex;flex-direction:column}
.servico .foto,.servico .corpo{display:contents}
.servico .seta{margin-top:auto;padding-top:18px}

/* ================================================================
   v16: O PROGRAMA DE LEADS EM DESTAQUE
   Os outros tres serviços sao peças que se contratam à parte. O
   programa junta-as e é o único com compromisso longo, por isso
   deixa de ser o quarto cartão igual aos outros: fica numa linha
   só, a toda a largura, por baixo dos três.
   ================================================================ */
@media (min-width:900px){
  .servicos{grid-template-columns:repeat(3,1fr)}
  .servico.programa{grid-column:1 / -1}
}
@media (min-width:600px) and (max-width:899px){
  .servicos{grid-template-columns:repeat(2,1fr)}
  .servico.programa{grid-column:1 / -1}
}

.servico.programa{
  background:var(--verde);
  border-top:2px solid var(--lima);
  padding:34px 34px 32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  grid-template-areas:"cabeca texto" "cabeca seta";
  align-items:start;
  column-gap:clamp(28px,4vw,60px);row-gap:16px;
}
.servico.programa .num{
  grid-area:cabeca;align-self:start;
  color:var(--lima);
}
.servico.programa h3{
  grid-area:cabeca;align-self:start;margin-top:26px;
  font-size:clamp(26px,2.6vw,32px);
}
.servico.programa p{grid-area:texto;margin:0;max-width:52ch}
.servico.programa .seta{grid-area:seta;align-self:end;padding-top:0}
.servico.programa:hover{background:#42522F}

@media (max-width:899px){
  .servico.programa{
    display:flex;flex-direction:column;gap:14px;
  }
  .servico.programa h3{margin-top:0}
}
/* a classe antiga chamava-se destaque e colidia com o .destaque do
   hero, que poe italico. Fica programa, e o italico sai daqui. */
.servico.programa,.servico.programa *{font-style:normal}

/* v16b: o cartao do programa ganha o que so ele tem, que e conter os
   outros. A lista do que inclui e o argumento, e o botao cheio diz
   que este e o caminho principal. */
.servico.programa{
  background:var(--verde-noite);
  border-top:2px solid var(--lima);
  grid-template-areas:"cabeca texto" "inclui texto" "inclui botao";
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  row-gap:0;
}
.servico.programa .num{grid-area:cabeca;margin-bottom:8px}
.servico.programa h3{grid-area:cabeca;align-self:end;margin:24px 0 0}
.servico.programa .inclui{
  grid-area:inclui;display:grid;gap:9px;margin-top:22px;align-self:start;
}
.servico.programa .inclui span{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline;
  font-family:var(--sans);font-size:var(--t-mini);color:var(--creme-80);line-height:1.45;
}
.servico.programa .inclui span::before{
  content:"";width:14px;height:1px;background:var(--lima);
  display:block;transform:translateY(-4px);
}
.servico.programa p{grid-area:texto;align-self:start;font-size:var(--t-medio);line-height:1.5}
.servico.programa .btn.cheio{
  grid-area:botao;justify-self:start;align-self:end;margin-top:24px;
}
.servico.programa:hover{background:#232C1C}
.servico.programa:hover .btn.cheio{background:var(--lima);color:#1B2216;border-color:var(--lima)}
@media (max-width:899px){
  .servico.programa{display:flex;flex-direction:column;gap:0}
  .servico.programa h3{margin:6px 0 0}
  .servico.programa .inclui{margin-top:20px}
  .servico.programa p{margin-top:20px}
  .servico.programa .btn.cheio{margin-top:24px}
}

/* ================================================================
   v17: PORQUÊ A DIGITAL HOME
   Três razões em linhas empilhadas, não em três cartões lado a
   lado. A afirmação fica à esquerda e a prova à direita, para se
   ler como argumento e não como grelha de virtudes.
   ================================================================ */
.razoes{display:grid;gap:0;border-top:1px solid rgba(245,240,232,.14)}
.razao{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,64px);
  padding:clamp(28px,3.4vw,42px) 0;
  border-bottom:1px solid rgba(245,240,232,.14);
  align-items:start;
}
.razao h3{
  margin:0;font-size:clamp(21px,2.1vw,26px);line-height:1.2;
  color:var(--creme);position:relative;padding-top:14px;
}
.razao h3::before{
  content:"";position:absolute;top:0;left:0;
  width:34px;height:2px;background:var(--lima);
}
.razao p{margin:0;max-width:56ch}
@media (max-width:820px){
  .razao{grid-template-columns:1fr;gap:14px}
}

/* ================================================================
   v18: GEOMETRIA DO TOPO CLARO POR CONSTRUCAO
   O que estava: o painel creme tinha left e right independentes, os
   dois em clamp de vw, afinados a 1440px. A coluna de texto tinha um
   terceiro clamp, tambem independente. Entre os 1000 e os 1300 os
   tres andavam a ritmos diferentes: a folga da esquerda caia para 14
   pixeis enquanto a da direita ficava com mais de 200.
   Agora ha uma unica variavel de folga, usada dos dois lados, e a
   fotografia da direita e o que sobra da conta. As folgas sao iguais
   em qualquer largura porque saem da mesma variavel, e o titulo e o
   paragrafo herdam a medida da coluna em vez de a repetirem.
   ================================================================ */
.pagina-topo.claro:not(.centro){
  --esq:clamp(40px,4vw,64px);
  --folga:clamp(34px,7vw,150px);
  --medida:clamp(300px,40vw,640px);
}
.pagina-topo.claro:not(.centro)::after{
  left:var(--esq);
  right:max(180px, calc(100% - var(--esq) - var(--folga)*2 - var(--medida)));
}
.pagina-topo.claro:not(.centro) > .env{
  max-width:none;margin:0;
  padding-left:calc(var(--esq) + var(--folga));
  padding-right:calc(var(--folga) + max(180px, calc(100% - var(--esq) - var(--folga)*2 - var(--medida))));
}
.pagina-topo.claro:not(.centro) h1,
.pagina-topo.claro:not(.centro) > .env > p:not(.rotulo){max-width:none}

/* abaixo dos 1000 a nala da esquerda sai e a margem do texto volta a
   ser a goteira normal do site. A folga da direita acompanha. */
@media (max-width:1000px){
  .pagina-topo.claro:not(.centro){--folga:clamp(28px,4.5vw,56px)}
  .pagina-topo.claro:not(.centro)::after{left:0;right:32vw}
  .pagina-topo.claro:not(.centro) > .env{
    padding-left:var(--gutter);
    padding-right:calc(32vw + var(--folga));
  }
}
/* em pilha a fotografia passa para baixo e o texto usa as duas goteiras */
@media (max-width:680px){
  .pagina-topo.claro:not(.centro)::after{left:0;right:0}
  .pagina-topo.claro:not(.centro) > .env{
    padding-left:var(--gutter);padding-right:var(--gutter);
  }
}


/* ================================================================
   v19: A CHAVE COMO SISTEMA, E NAO COMO APARICAO
   A chave estava no monograma e no video do hero, e desaparecia do
   resto do site. Um marcador so fica na cabeca das pessoas com
   repeticao. Passa a marcar quatro sitios, sempre com o mesmo
   desenho e sempre a herdar a cor por baixo (mask + currentColor),
   para funcionar sobre creme e sobre verde-noite.
   O melhor uso e o da FAQ: abrir uma pergunta roda a chave, que e
   literalmente o gesto de destrancar.
   ================================================================ */
:root{--chave:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2058%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M11.5%201a10.5%2011%200%201%200%200%2022%2010.5%2011%200%200%200%200-22Zm0%204.7a5.8%206.3%200%201%201%200%2012.6%205.8%206.3%200%200%201%200-12.6Z%22%2F%3E%3Cpath%20d%3D%22M20%2010.2h36V13.8h-2.8V19h-3.2v-5.2h-2.4V19h-3.2v-5.2H20Z%22%2F%3E%3C%2Fsvg%3E")}
.marca-chave{
  display:inline-block;background-color:currentColor;
  -webkit-mask:var(--chave) no-repeat center/contain;
          mask:var(--chave) no-repeat center/contain;
}

/* 1. faixa da assinatura: a chave por cima de "Home is where your brand belongs" */
.faixa .env::before{
  content:"";display:block;width:clamp(54px,5.8vw,78px);aspect-ratio:58/24;
  margin:0 auto clamp(22px,2.6vw,32px);
  background-color:var(--creme);
  opacity:.92;filter:drop-shadow(0 1px 14px rgba(10,9,7,.45));
  -webkit-mask:var(--chave) no-repeat center/contain;
          mask:var(--chave) no-repeat center/contain;
}

/* 2. FAQ: a chave substitui o mais e o menos, e roda ao abrir */
.faq summary::after{
  content:"";width:26px;height:11px;right:0;top:calc(50% - 5.5px);
  background-color:var(--ouro);
  -webkit-mask:var(--chave) no-repeat center/contain;
          mask:var(--chave) no-repeat center/contain;
  transform-origin:50% 50%;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.faq details[open] summary::after{content:"";transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){
  .faq summary::after{transition:none}
}

/* 3. razoes: cada motivo entra com a chave */
.razao h3{position:relative}
.razao h3::before{
  content:"";position:absolute;left:-34px;top:.55em;
  width:22px;height:9.1px;background-color:var(--ouro);
  -webkit-mask:var(--chave) no-repeat center/contain;
          mask:var(--chave) no-repeat center/contain;
}
@media (max-width:900px){.razao h3::before{display:none}}

/* 4. rodape: fecha a assinatura */
.assinatura > span:first-child::before{
  content:"";display:inline-block;width:20px;height:8.3px;margin-right:9px;
  background-color:currentColor;vertical-align:middle;
  -webkit-mask:var(--chave) no-repeat center/contain;
          mask:var(--chave) no-repeat center/contain;
}

/* ================================================================
   v20: SUBMENUS EM "PARA QUEM" E "SERVIÇOS"
   Sem JavaScript: abre no hover e tambem no focus-within, para
   quem navega por teclado. O painel tem sempre fundo escuro e
   texto creme, independente de a pagina ter topo claro ou escuro,
   senao muda de cor a cada pagina e deixa de se ler.
   No telemovel o menu ja e uma lista aberta, por isso os submenus
   ficam sempre visiveis e apenas indentados.
   ================================================================ */
.tem-menu{position:relative}
.submenu{
  position:absolute;top:100%;left:-18px;z-index:60;
  display:flex;flex-direction:column;gap:0;
  min-width:250px;padding:8px 0;margin-top:14px;
  background:var(--verde-fundo);
  border:1px solid rgba(245,240,232,.16);
  box-shadow:0 20px 46px rgba(10,16,9,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
/* ponte invisivel: o rato atravessa a folga sem o painel fechar */
.tem-menu::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:20px;
}
.tem-menu:hover > .submenu,
.tem-menu:focus-within > .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
}
.submenu li{border:0}
.submenu a{
  display:block;padding:10px 20px;white-space:nowrap;
  color:var(--creme) !important;
  font-size:12px;letter-spacing:.12em;border-bottom:0;
}
.submenu a:hover{color:var(--ouro-claro) !important;background:rgba(245,240,232,.06)}
.submenu li:first-child a{
  color:var(--creme-60) !important;
  border-bottom:1px solid rgba(245,240,232,.14);
  margin-bottom:4px;padding-bottom:12px;
}
.submenu li:first-child a:hover{color:var(--ouro-claro) !important}
@media (prefers-reduced-motion:reduce){
  .submenu{transition:none}
}
@media (max-width:860px){
  .tem-menu::after{display:none}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0;padding:0 0 8px;
    background:rgba(10,16,9,.28);border:0;box-shadow:none;
  }
  .submenu a{padding:11px 22px 11px 40px;font-size:13px}
  .submenu li:first-child a{margin-bottom:0}
}

/* ================================================================
   v21: O MONOGRAMA NA COSTURA ENTRE O VIDEO E AS CATEGORIAS
   Marca a passagem do hero para o corpo da pagina. Fica sobre o
   fundo do body, entre as duas seccoes, e nao por cima de nenhuma
   delas, para nao apanhar o degrade do video nem os cantos
   arredondados da grelha.
   ================================================================ */
.marca-costura{
  display:flex;align-items:center;justify-content:center;
  padding-block:clamp(34px,4.6vw,58px);
}
.marca-costura::before{
  content:"";display:block;
  width:clamp(52px,5.4vw,74px);aspect-ratio:481/453;
  background:url("/assets/monograma-creme.webp") center/contain no-repeat;
  opacity:.85;
  filter:drop-shadow(0 2px 12px rgba(10,14,8,.4));
}