/* Cacau Holdings · folha única do site · v4 (13/10/2026)
   A revisão da Carol de 12/10 (PESSOAL, 06h17 às 08h05): fundo preto, vinho mais escuro que o bordô, letra
   cursiva mais alta e em negrito, marca maior, uma página só, contato por WhatsApp e e-mail sem formulário.
   Os níveis da casa continuam (painel com linha de 1px, cabeçalho em faixa, recuo um tom abaixo), agora no escuro.
   A v3 (11/10) está em ../_arquivo/site-v3-2026-10-11/. */

@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-latin-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(../fonts/playfair-display-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(../fonts/playfair-display-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(../fonts/libre-franklin-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(../fonts/libre-franklin-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(../fonts/libre-franklin-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --preto:#0a0809;        /* nível 1: a página */
  --superficie:#141012;   /* nível 2: o painel */
  --recuo:#1c1619;        /* nível 3: dentro do painel */
  --vinho:#2a0512;        /* mais escuro que o bordô da v3 (#35081f), pedido dela */
  --vinho-2:#3a0a1b;
  --vinho-luz:#c9a3b2;    /* o "rosinha" que ela aprovou em 13/10 */
  --rosa:#c9a3b2;         /* 14/10: ela voltou pro rosinha de antes ("do jeito que estava antes era a cor que eu queria"); o forte das tulipas era #e4506f */
  --didone:"Playfair Display",var(--serif);
  --linha:#2a2226;
  --linha-forte:#3d3237;
  --tinta:#f4efe9;
  --tinta-2:#c8beb8;
  --tinta-3:#968b86;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",Arial,Helvetica,sans-serif;
  --larg:1200px;
  --lado:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--preto);color:var(--tinta);font:400 16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
.miolo{max-width:var(--larg);margin:0 auto;padding:0 var(--lado)}
/* a letra dela: cursiva, alta e em negrito */
/* 14/10: "vamos mudar pra padrão forma mesmo": letra de forma, reta, sem o itálico de 13/10 */
h1,h2,.frase-dela{font-family:var(--didone);font-style:normal;font-weight:500;line-height:1.12;margin:0;letter-spacing:0}
h3{font-family:var(--didone);font-style:normal;font-weight:600;margin:0;line-height:1.2}

/* ---------- botões */
.acao{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:10px;background:var(--tinta);color:var(--vinho);border:1px solid var(--tinta);font:600 15.5px/1 var(--sans);text-decoration:none;cursor:pointer}
.acao:hover{background:#fff}
.acao-2{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 20px;border-radius:10px;background:transparent;color:var(--tinta);border:1px solid var(--linha-forte);font:600 15.5px/1 var(--sans);text-decoration:none}
.acao-2:hover{border-color:var(--tinta-2)}
.acao svg{width:20px;height:20px}

/* ---------- topo: a marca maior */
.topo{background:rgba(10,8,9,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--linha)}
.topo .miolo{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
.topo .marca img{width:270px;height:auto}
.topo nav{display:flex;gap:4px}
.topo nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--tinta-2);padding:8px 12px;border-radius:8px}
.topo nav a:hover{color:var(--tinta);background:var(--recuo)}
.topo .acao-topo{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;background:var(--tinta);color:var(--vinho);font:600 14px/1 var(--sans);text-decoration:none;white-space:nowrap}
.topo .acao-topo svg{width:17px;height:17px}

/* ---------- abertura: o vídeo dela de fundo, inteiro */
.heroi{position:relative;min-height:calc(100vh - 84px);max-height:900px;display:flex;align-items:flex-end;overflow:hidden}
.heroi .fundo,.heroi video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroi::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,9,.96) 0%,rgba(10,8,9,.72) 38%,rgba(10,8,9,.18) 75%,rgba(10,8,9,.05) 100%)}
.heroi .miolo{position:relative;z-index:1;width:100%;padding-top:120px;padding-bottom:84px}
.rotulo{font:600 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--vinho-luz);margin:0 0 18px}
/* a frase do topo na forma da marca CACAU: caixa alta, serifa de alto contraste, letra espaçada, no tamanho da marca */
.heroi h1{font-family:var(--didone);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(28px,3.4vw,48px);line-height:1.15;max-width:22em}
.heroi .apoio{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--rosa);font-weight:500;max-width:34em;margin:20px 0 32px}
.heroi .botoes{display:flex;gap:12px;flex-wrap:wrap}

/* destaque: a frase dela de 13/10, sozinha */
.destaque{padding:110px 0 0}
.frase-dela{font-size:clamp(30px,3.8vw,52px);max-width:20em}

/* ---------- seções e painéis */
.secao{padding:96px 0 0}
.secao-cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.secao-cabeca h2{font-size:clamp(34px,4vw,54px)}
.secao-cabeca p{color:var(--tinta-2);font-size:17px;margin:10px 0 0;max-width:36em}
.painel{background:var(--superficie);border:1px solid var(--linha);border-radius:16px}
.painel-cabeca{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px solid var(--linha)}
.painel-cabeca b{font:600 14px/1.3 var(--sans)}
.painel-cabeca span{font-size:13px;color:var(--tinta-3)}

/* pilares, 6 */
.pilares{display:grid;grid-template-columns:repeat(3,1fr)}
.pilares>div{padding:28px 24px;border-top:1px solid var(--linha)}
.pilares>div:nth-child(-n+3){border-top:0}
.pilares>div:not(:nth-child(3n+1)){border-left:1px solid var(--linha)}
.pilares .n{font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--vinho-luz)}
.pilares h3{font-size:26px;margin:12px 0 8px;color:var(--tinta)}
.pilares p{margin:0;color:var(--rosa);font-size:15.5px}

/* etapas, 3, com o vídeo dela de cidade ao lado não: cada uma num recuo */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}
.etapas>div{background:var(--recuo);border:1px solid var(--linha);border-radius:12px;padding:26px 22px}
.etapas .contagem{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--linha-forte);font:600 14px/1 var(--sans);color:var(--vinho-luz)}
.etapas h3{font-size:26px;margin:16px 0 8px}
.etapas p{margin:0;color:var(--tinta-2);font-size:15.5px}

/* faixa de foto */
.faixa-foto{position:relative;margin-top:104px;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden}
.faixa-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faixa-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,9,.94) 0%,rgba(10,8,9,.4) 50%,rgba(10,8,9,0) 78%)}
.faixa-foto .miolo{position:relative;z-index:1;padding-bottom:80px;width:100%}
.frase-grande{font-size:clamp(38px,5.4vw,74px);max-width:13em;margin:0}

/* 14/10: "Metodologia" com a marca do lado, na letra da própria logo (pedido dela), em branco */
.com-marca{display:flex;align-items:center;flex-wrap:wrap;gap:.35em 18px}
.com-marca img{height:.82em;width:auto;margin-top:.08em}

/* serviços */
.servicos{list-style:none;margin:0;padding:0}
.servicos li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;padding:24px 22px;border-top:1px solid var(--linha)}
.servicos li:first-child{border-top:0}
.servicos h3{font-size:23px}
.servicos p{margin:0;color:var(--tinta-2);font-size:15.5px}
.servicos .par{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.servicos .par div{background:var(--recuo);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;font-size:14.5px;color:var(--tinta-2)}
.servicos .par b{display:block;color:var(--tinta);font-weight:600;margin-bottom:2px}

/* números e empresas atendidas */
.numeros{display:grid;grid-template-columns:repeat(3,1fr)}
.numeros>div{padding:34px 24px;text-align:center}
.numeros>div+div{border-left:1px solid var(--linha)}
.numeros b{display:block;font-family:var(--didone);font-weight:500;font-size:clamp(46px,5.4vw,72px);line-height:1}
.numeros span{display:block;margin-top:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--vinho-luz)}
.atendidas{border-top:1px solid var(--linha);padding:24px 22px 26px}
.atendidas .t{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:14px}
/* 14/10: sai a cápsula (pesava no celular, "a formatação também"); lista corrida em colunas, com filete */
.atendidas ul{list-style:none;margin:0;padding:0;columns:3;column-gap:32px}
.atendidas li{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px;color:var(--tinta-2)}

/* garantia */
.garantia{display:grid;grid-template-columns:1fr 1fr}
.garantia>div{padding:34px 28px}
.garantia>div+div{border-left:1px solid var(--linha)}
.garantia h3{font-size:28px;margin:0 0 10px}
.garantia p{margin:0;color:var(--tinta-2);font-size:16px}

/* Estados Unidos */
.eua{display:grid;grid-template-columns:1.3fr 1fr}
.eua .midias{display:grid;gap:12px;padding:12px}
.eua figure{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--linha);min-height:260px;height:100%}
.eua figure img,.eua figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eua figcaption{position:absolute;right:10px;bottom:10px;font-size:11.5px;color:#fff;background:rgba(10,8,9,.6);padding:4px 8px;border-radius:6px}
.eua .local{padding:36px 30px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-left:1px solid var(--linha)}
.eua .pino{color:var(--vinho-luz)}
.eua .onde{font-family:var(--didone);font-weight:500;font-size:36px;line-height:1.05;margin:8px 0 0}
.eua .endereco{color:var(--tinta-2);font-size:16px;margin:10px 0 0;font-style:normal}

/* contato: sem formulário, WhatsApp e e-mail */
.falar{position:relative;margin-top:110px;padding:120px 0;overflow:hidden;background:var(--vinho)}
.falar .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.falar .miolo{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.falar h2{font-size:clamp(38px,4.6vw,62px)}
.falar .convite p{color:#e6d3da;font-size:18px;max-width:28em;margin:16px 0 0}
.contatos{display:grid;gap:12px}
.contato{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:14px;background:rgba(10,8,9,.55);border:1px solid rgba(255,255,255,.14);text-decoration:none}
.contato:hover{border-color:rgba(255,255,255,.4)}
.contato svg{width:28px;height:28px;flex:none;color:#fff}
.contato span{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#d7bfc8}
.contato b{display:block;font-size:19px;font-weight:600;margin-top:2px;word-break:break-word}

/* rodapé */
.rodape{background:var(--preto);color:var(--tinta-2);padding:64px 0 28px;font-size:15px;border-top:1px solid var(--linha)}
.rodape .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.rodape img{width:230px;height:auto;margin-bottom:14px}
.rodape .col{display:flex;flex-direction:column;gap:9px}
.rodape .t{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 4px}
.rodape a{text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape .legal{display:flex;justify-content:space-between;margin-top:48px;padding-top:22px;border-top:1px solid var(--linha);font-size:13px;color:var(--tinta-3)}

/* página de texto (privacidade) */
.pagina{padding:72px 0 0}
.pagina h1{font-size:clamp(40px,5vw,64px);margin-bottom:28px}
.painel-corpo{padding:22px}
.painel-corpo p{margin:0 0 12px;color:var(--tinta-2)}
.painel-corpo a{color:var(--vinho-luz)}

@media (max-width:900px){
  .topo .miolo{height:72px}
  .topo nav{display:none}
  .topo .marca img{width:190px}
  /* 13/10: no celular o vídeo dela aparece INTEIRO, sem corte (cortado em pé ele perdia a turbina, "mal posicionado") */
  .heroi{display:block;min-height:0;max-height:none}
  .heroi::after{display:none}
  .heroi .fundo{position:relative;inset:auto;height:auto;aspect-ratio:16/9}
  .heroi video{inset:0 0 auto 0;height:auto;aspect-ratio:16/9}
  .heroi .miolo{padding-top:30px;padding-bottom:56px}
  .destaque{padding-top:64px}
  .duas-fotos,.pilares,.etapas,.garantia,.eua,.falar .miolo,.rodape .cols,.numeros{grid-template-columns:1fr}
  .numeros>div+div{border-left:0;border-top:1px solid var(--linha)}
  .numeros>div{padding:24px}
  .atendidas ul{columns:2;column-gap:20px}
  .atendidas li{font-size:14px}
  .pilares>div{border-left:0!important;border-top:1px solid var(--linha)!important}
  .pilares>div:first-child{border-top:0!important}
  .servicos li,.servicos .par{grid-template-columns:1fr}
  .servicos li{gap:12px}
  .garantia>div+div{border-left:0;border-top:1px solid var(--linha)}
  .eua .local{border-left:0;border-top:1px solid var(--linha)}
  .eua .midias{grid-template-rows:none;grid-template-columns:1fr}
  .secao{padding-top:72px}
  .secao-cabeca{flex-direction:column;align-items:flex-start}
  .faixa-foto{margin-top:72px;min-height:56vh}
  .faixa-foto .miolo{padding-bottom:48px}
  .falar{margin-top:72px;padding:72px 0}
  .falar .miolo{gap:28px}
  .rodape .legal{flex-direction:column;gap:8px}
}
@media (max-width:420px){.topo .acao-topo{height:38px;padding:0 12px;font-size:13px}.topo .marca img{width:150px}}
@media (prefers-reduced-motion:reduce){.heroi video{display:none}html{scroll-behavior:auto}}