/* ══════════════════════════════════════════════════════════════════
   NESSE ANGU — sistema de base · gestalt "O JEITINHO"
   Lei: nada existe só para operar a interface.
        Todo elemento carrega conteúdo E função. Zero chrome dedicado.
        R7 só nomeia — a marca e os títulos de obra. Nada mais.
   Fonte de verdade: marca/07-site-e-experiencia/ · marca/03-cor/
   ══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'CarocoTalho';           /* linhagem R7 "Sementes Talhadas" — família a rebatizar (R7 do plano) */
  src:url('fontes/CarocoTalho-Regular.woff2') format('woff2');
  font-display:swap;
}

:root{
  /* Noite fria & brasa — 70/20/10, calor só na luz */
  --breu:#0A0F10; --night:#0E1416; --mata:#1F3A36; --barro:#8C4E34;
  --ocre:#C8923F; --brasa:#E6B45E; --marfim:#ECE6D8;
  --soft:#8B9694; --meio:#7d8886; --apagado:#4f5c5b; --quase:#3a4746; --line:#19201f;
  --display:'Fraunces',Georgia,serif;
  --ui:'Inter',system-ui,sans-serif;
  --talho:'CarocoTalho',var(--display);
  --p:0%;                               /* progresso de leitura (Gesto S2) */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ui);background:var(--breu);color:var(--marfim);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:2px solid var(--brasa);outline-offset:6px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ocre);color:var(--breu);
  padding:10px 16px;font-size:13px;font-weight:600}
.skip:focus{left:0}
.grain{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.05;mix-blend-mode:overlay}

/* ═══ O NOME — um componente, três estados ═══
   repouso · prévia (hover: os rótulos aparecem) · aberto (clique)
   É assinatura, é menu, e no canto é também barra de progresso. */
.nome{display:inline-flex;align-items:flex-start;font-family:var(--talho);line-height:.88;
  letter-spacing:.01em;background:none;border:0;padding:0;cursor:pointer;color:var(--marfim)}
.nome .l{display:flex;flex-direction:column;align-items:center;position:relative;
  padding:0 .012em;transition:padding .55s cubic-bezier(.2,.7,.2,1),color .3s}
.nome .rot{font-family:var(--ui);font-size:clamp(8px,.9vw,10.5px);letter-spacing:.26em;
  text-transform:uppercase;margin-top:.42em;color:transparent;white-space:nowrap;
  transition:color .35s;line-height:1}
.nome .fix{color:#5d6b6a;cursor:default}
.nome:hover .l{padding:0 .07em}
.nome:hover .rot{color:var(--quase)}
.nome.on .l{padding:0 .11em}
.nome.on .rot{color:var(--ocre)}
.nome a.l:hover,.nome a.l:focus-visible{color:var(--brasa)}
.nome a.l:hover .rot{color:var(--brasa)}

/* o canto: mesmo componente, pequeno, com a brasa do progresso */
.canto{position:fixed;top:24px;left:clamp(18px,5vw,58px);z-index:80;font-size:16px;
  opacity:0;transform:translateY(-10px);transition:opacity .5s,transform .5s;pointer-events:none}
.canto.vis{opacity:1;transform:none;pointer-events:auto}
.canto .rot{display:none}
.canto .l,.canto .fix{padding:0;
  background:linear-gradient(90deg,var(--brasa) var(--p),#596564 var(--p));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background .1s linear}
.canto:hover .l,.canto:hover .fix{
  background:linear-gradient(90deg,var(--brasa) var(--p),#9aa3a1 var(--p));
  -webkit-background-clip:text;background-clip:text}
/* em página interna o canto já nasce visível (não há hero para esperar) */
.canto.sempre{opacity:1;transform:none;pointer-events:auto}

/* o menu aberto: o nome cresce. Nenhuma superfície nova é criada. */
.painel{position:fixed;inset:0;z-index:85;background:rgba(7,11,12,.975);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:52px;opacity:0;pointer-events:none;transition:opacity .45s}
.painel.on{opacity:1;pointer-events:auto}
.painel .nome{font-size:clamp(34px,7.6vw,96px)}
.painel .nota{font-family:var(--display);font-style:italic;font-size:14px;color:var(--quase)}

/* ═══ CTA — a única "sublinha" do sistema ═══ */
.assistir{display:inline-flex;align-items:center;gap:12px;width:fit-content;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brasa);
  padding-bottom:11px;border-bottom:1px solid rgba(230,180,94,.26);
  transition:border-color .3s,gap .3s}
.assistir:hover{border-color:var(--brasa);gap:19px}
.assistir .tri{width:0;height:0;border-left:8px solid var(--brasa);
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.discreto{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--apagado);border-bottom:1px solid var(--line);padding-bottom:6px;
  transition:color .3s,border-color .3s}
.discreto:hover{color:var(--brasa);border-color:rgba(230,180,94,.4)}

/* ═══ TIPOGRAFIA COMUM ═══ */
.corrido{font-family:var(--display);font-weight:400;font-size:clamp(21px,3.1vw,38px);
  line-height:1.44;color:var(--meio)}
.corrido strong{color:var(--marfim);font-weight:500}
.rotulo{display:block;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--quase)}
.incomodo{font-family:var(--display);font-style:italic;font-size:clamp(17px,2.3vw,27px);
  line-height:1.45;color:var(--meio);max-width:34ch}

/* obra dentro da frase — sem card, sem botão: peso, talho e uma brasa */
.obra{font-family:var(--talho);font-size:.8em;letter-spacing:.035em;color:#cdc6b7;
  position:relative;white-space:nowrap;transition:color .3s}
.obra::after{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:1px;
  background:linear-gradient(90deg,rgba(230,180,94,.6),rgba(200,146,63,.06));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.obra:hover,.obra:focus-visible{color:var(--brasa)}
.obra:hover::after,.obra:focus-visible::after{transform:scaleX(1)}

/* ═══ RODAPÉ — chato e completo de propósito: a trava de usabilidade ═══ */
.rodape{border-top:1px solid var(--line);max-width:920px;margin:0 auto;
  padding:38px clamp(22px,7vw,60px) 64px;display:flex;flex-wrap:wrap;gap:22px;
  justify-content:space-between;font-size:12px;color:var(--apagado)}
.rodape nav{display:flex;flex-wrap:wrap;gap:19px}
.rodape a:hover{color:var(--brasa)}

@media (max-width:640px){
  .nome .rot{font-size:7.5px;letter-spacing:.13em;margin-top:.5em}
  .nome:hover .l{padding:0 .03em}
  .nome.on .l{padding:0 .05em}
  .canto{font-size:14px;top:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .nome .rot{color:var(--quase)}
}

.home-link{display:inline-flex;text-decoration:none;color:inherit;cursor:pointer}
.home-link:hover .fix{color:var(--brasa) !important}

.canto::before{content:'';position:absolute;top:50%;left:50%;width:160px;height:80px;transform:translate(-50%,-50%);background:radial-gradient(ellipse, rgba(230,180,94,0.15), transparent 70%);z-index:-1;pointer-events:none;animation:pulsa-canto 4s ease-in-out infinite}
@keyframes pulsa-canto{0%,100%{opacity:.4}50%{opacity:1}}

.canto:hover .l, .canto:hover .fix{padding:0 .06em}