/* ==========================================================================
   TEMA CLARO — carregado DEPOIS do estilo.css, só sobrescreve.
   O escuro continua intacto no index.html.

   Regra que os números impuseram (contraste WCAG medido, não no olho):
     laranja da marca #FF7130 sobre gelo = 2,45:1  -> REPROVA como texto
     por isso existem DOIS laranjas aqui:
       --gold      #FF7130  só PREENCHIMENTO (botão, quadrado, fio)
       --gold-txt  #B84509  4,82:1, é o que vai em letra pequena
   ========================================================================== */
:root{
    --bg:#F4F2ED;          /* gelo quente. 16:1 com a tinta */
    --superficie:#FBFAF7;  /* cartão, um degrau acima do fundo */
    --grafite:#EAE6DF;     /* o antigo "sobe um degrau" invertido */
    --ink:#191614;         /* tinta                    16,10:1 */
    --greige:#3D3730;      /* texto corrido             9,3:1  */
    --muted:#6B635A;       /* secundário                5,28:1 */
    --line:#DCD6CC;
    --gold:#FF7130;        /* só preenchimento */
    --gold-txt:#B84509;    /* laranja de texto          4,82:1 */
    --gold-soft:rgba(184,69,9,.3);
}
body{background:var(--bg);color:var(--greige)}
/* o granulado escuro sujava o claro: vira multiply bem fraco */
body::after{opacity:.02;mix-blend-mode:multiply}

/* ---------- topo ---------- */
.nav{background:rgba(244,242,237,.85);border-bottom-color:var(--line)}
.nav a{color:var(--greige)}
.nav a:hover{color:var(--ink)}

/* ---------- hero: véu claro da esquerda, foto respira na direita ---------- */
.hero>img{filter:brightness(1.02) contrast(.98) saturate(.9)}
.hero::after{background:
    linear-gradient(90deg,var(--bg) 0%,rgba(244,242,237,.94) 32%,rgba(244,242,237,.35) 62%,rgba(244,242,237,.12) 100%),
    linear-gradient(0deg,var(--bg) 2%,rgba(244,242,237,0) 26%)}
.hero h1{color:var(--ink)}
.hero h1 em{color:#8C8175}
.hero p{color:var(--greige)}
.rolar{color:var(--muted)}
.rolar::after{background:linear-gradient(90deg,var(--gold-txt),transparent)}

/* ---------- laranja que virou texto ---------- */
.tag,.cab .kick,.servicos .n,.passos .n{color:var(--gold-txt)}
.tag::before,.tag::after{background:var(--gold-soft)}

/* ---------- superfícies ---------- */
.numeros div,.servicos article{background:var(--superficie)}
.servicos article:hover{background:var(--grafite)}
.numeros div:hover{background:var(--grafite)}
.servicos article:hover h3{color:var(--gold-txt)}
.numeros b,.cab h2,.servicos h3,.passos h3,.zapao h3{color:var(--ink)}
.cab h2 em{color:#8C8175}
.corpo p,.cab p{color:var(--greige)}
.vozes{background:var(--line)}
.vozes blockquote{background:var(--superficie)}
.vozes p{color:var(--greige)}
.contato{background:var(--grafite)}
.zapao{background:var(--superficie);border-color:var(--line)}
.dados b,.dados a{color:var(--ink)}
.rodape{background:var(--bg)}

/* ---------- fotos: sem escurecer, no claro fica sujo ---------- */
.obras figure{background:var(--grafite)}
.obras img{filter:brightness(1) contrast(1.02) saturate(.94)}
.obras figure:hover img{filter:brightness(1.04) contrast(1.03) saturate(1)}
.obras figure:hover{outline-color:rgba(184,69,9,.5)}

/* ---------- botões e formulário ---------- */
.btn{background:var(--gold);color:#14100c}      /* 6,9:1, o melhor par do sistema */
.btn:hover{background:#ff8a52}
.btn-vazado{color:var(--ink);border-color:#C9C1B4}
.btn-vazado:hover{border-color:var(--gold-txt);background:rgba(184,69,9,.06)}
.campo input,.campo select,.campo textarea{background:#fff;border-color:#C9C1B4;color:var(--ink)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--gold-txt);background:#fff}
.campo input::placeholder,.campo textarea::placeholder{color:#9A9289}
.form small,.zapao p,.zapao small{color:var(--muted)}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline-color:var(--gold-txt)}
.servicos p a{color:var(--gold-txt);border-bottom-color:rgba(184,69,9,.45)}

/* ==========================================================================
   VARIANTES DE HERO (uma classe a mais no <section class="hero">)
   ========================================================================== */

/* ---- Hero da versão clara (escolhido em 22/08 entre 3 opções).
        Sem foto de fundo: texto na esquerda, foto quadrada na direita, com o
        quadrado laranja da marca ecoando atrás, deslocado.
        Motivo prático além do estético: as fotos têm 960px de largura, e numa
        caixa de ~535px sobra resolução. Ocupando a tela inteira ficavam macias. ---- */
.hero--split{min-height:auto;display:block;padding:9rem 6vw 6rem;background:var(--bg)}
.hero--split::after{display:none}
.hero--split .in{display:grid;grid-template-columns:1.02fr .98fr;gap:5.5rem;
    align-items:center;max-width:1180px}
.hero--split .texto{grid-column:1}
.hero--split .quadro{position:relative;grid-column:2}
.hero--split .quadro img{display:block;width:100%;height:auto;aspect-ratio:1/1;
    object-fit:cover;filter:contrast(1.03) saturate(.95);position:relative;z-index:1}
/* o height:auto é obrigatório: o atributo height="960" do HTML vira altura fixa e
   o aspect-ratio só age quando um dos lados é automático. Sem ele a foto sai 388x960. */
.hero--split .quadro::before{content:'';position:absolute;z-index:0;
    left:-18px;top:18px;width:100%;height:100%;border:1px solid var(--gold)}
.hero--split h1{max-width:14ch}
.hero--split .rolar{display:none}
@media (max-width:900px){
    .hero--split{padding:7.5rem 7vw 4rem}
    .hero--split .in{grid-template-columns:1fr;gap:3rem}
    .hero--split .quadro{grid-column:1;grid-row:2}
    .hero--split .quadro::before{left:-10px;top:10px}
}
.vozes--duas{background:var(--line)}
.vozes--duas blockquote{background:var(--superficie)}
.vozes--duas p{color:var(--greige)}

/* páginas de serviço */
.lista{background:var(--line)}
.lista article{background:var(--superficie)}
.faq summary:hover{color:var(--gold-txt)}
.faq summary::after,.faq summary::before{background:var(--gold-txt)}
.faq details p a{color:var(--gold-txt);border-bottom-color:rgba(184,69,9,.45)}
.veja a:hover{border-color:var(--gold-txt)}