/* ==========================================================================
   SULA - marketing para arquitetura

   Sistema reescrito em 23/09/2026, depois de a fundadora ler o site anterior
   como apresentacao e nao como site. O que mudou e por que:

   1. ESCURO, E SO ESCURO. Nao e tema, e o mundo da marca. Manter dois temas
      dobrava o trabalho de cada peca e nenhum dos dois ficava resolvido.
   2. TRES VOZES, TRES TRABALHOS. A Jost estrutura, a Bodoni italica anota, a
      IBM Plex Mono mede. Antes as tres disputavam o mesmo lugar.
   3. BORDA A BORDA. Acabou a coluna de 1060px no meio da tela. Imagem e
      traco correm a tela toda; so o texto para numa medida, a de 1440px.
   4. NADA NASCE INVISIVEL. O reveal saiu: conteudo escondido atras de script
      some em captura, em impressao e em previa de link.

   Bodoni Moda so na otica de 9pt, arquivo estatico. As oticas maiores afinam
   a haste da didone ate ela sumir, e em fundo escuro isso acontece antes.
   ========================================================================== */

@font-face{font-family:"Jost";src:url("fonts/jost-light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --noite:#12100E; --superficie:#1B1815; --areia:#28241D;
  --papel:#EDE6D9; --papel-fraco:#A79C89;
  --traco:#3A342B; --traco-fraco:#26221C;
  --terracota:#CC6B41; --oliva:#8D9680;
  --sans:"Jost","Century Gothic",system-ui,sans-serif;
  --serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --goteira:clamp(1.25rem,5vw,4rem);
  /* A medida segura o texto, nao o fundo. Imagem, traco e barra continuam de
     borda a borda; o que se le para em 1440px e centraliza, porque num monitor
     de 1900px o texto ficava todo na metade esquerda e a direita sobrava vazia.
     Ate 1440px de tela nada muda: a margem continua sendo a goteira.
     O 100% resolve contra quem usa a variavel, que e sempre a pagina inteira. */
  --medida:1440px;
  --margem:max(var(--goteira),calc((100% - var(--medida)) / 2));
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--noite);color:var(--papel);
  font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-optical-sizing:none;
  overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:300;line-height:.98;letter-spacing:-.03em;
  text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}

/* as tres vozes ------------------------------------------------------------
   A Bodoni italica em terracota e a que anota: entra DENTRO da frase ou em
   aparte curto, nunca em bloco de leitura e nunca em controle. */
.obs{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.06em;letter-spacing:0;color:var(--terracota);
  font-optical-sizing:none}
.nota{font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--terracota);font-size:clamp(1.12rem,1.8vw,1.5rem);line-height:1.35;
  max-width:34ch;padding-left:clamp(.9rem,1.6vw,1.3rem);
  border-left:1px solid var(--terracota);
  margin-top:clamp(1.8rem,3.4vw,2.6rem);font-optical-sizing:none}
.rot{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--papel-fraco)}

/* barra --------------------------------------------------------------------
   Fixa no topo: com seis enderecos, a navegacao nao pode sumir na rolagem. */
.barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  gap:1.2rem;padding:.9rem var(--margem);
  background:color-mix(in srgb,var(--noite) 84%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--traco-fraco)}
.barra a.logo{display:block;flex:none}
.barra .marca{display:block;width:clamp(124px,14vw,180px);aspect-ratio:840/152;
  background:url("marca/marca-1l-papel.svg") center/contain no-repeat}
.barra nav{display:flex;gap:clamp(.7rem,2vw,1.7rem);margin-left:auto;flex-wrap:wrap}
.barra nav a{font-family:var(--sans);font-weight:500;font-size:.88rem;
  color:var(--papel-fraco);padding:.4rem 0;transition:color .16s ease}
.barra nav a[aria-current="page"]{color:var(--terracota)}
@media (hover:hover){ .barra nav a:hover{color:var(--terracota)} }
@media (max-width:880px){
  .barra{flex-wrap:wrap;gap:.5rem 1rem}
  .barra .botao{margin-left:auto}
  .barra nav{order:3;flex-basis:100%;margin-left:0;gap:0 .8rem;
    padding-top:.4rem;border-top:1px solid var(--traco-fraco)}
  .barra nav a{padding:.55rem 0}
}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:500;font-size:.92rem;line-height:1.2;
  background:var(--papel);color:var(--noite);
  padding:.95rem 1.7rem;min-height:50px;
  border:1px solid var(--papel);
  transition:background-color .18s ease,color .18s ease,
             border-color .18s ease,transform .16s var(--ease)}
.botao:active{transform:scale(.97)}
@media (hover:hover){
  .botao:hover{background:var(--terracota);border-color:var(--terracota);color:var(--noite)}
}
.botao.vazado{background:none;color:var(--papel);border-color:var(--traco)}
@media (hover:hover){
  .botao.vazado:hover{border-color:var(--terracota);color:var(--terracota);background:none}
}
.portas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* capa ---------------------------------------------------------------------
   Sangria total com o tipo por cima. So funciona porque as imagens novas tem
   2400px de origem: as antigas, de 1024px, amoleciam nesta medida. */
.capa{position:relative;min-height:clamp(480px,78vh,800px);display:grid;
  align-items:end;border-bottom:1px solid var(--traco-fraco);overflow:hidden}
.capa-fundo{position:absolute;inset:0;z-index:0}
.capa-fundo img{width:100%;height:100%;object-fit:cover;object-position:34% center;
  filter:saturate(.9) brightness(.86)}
/* dois degrades: um da contraste ao texto, o outro costura a base da imagem
   com a secao seguinte em vez de deixar borda dura */
.capa-fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,16,14,.92) 6%,rgba(18,16,14,.62) 44%,rgba(18,16,14,.12) 100%),
             linear-gradient(0deg,var(--noite) 0%,transparent 26%)}
.capa-texto{position:relative;z-index:1;
  padding:clamp(3rem,9vw,6rem) var(--margem) clamp(2.2rem,5vw,3.6rem);
  display:flex;flex-direction:column;gap:clamp(1.2rem,2.4vw,1.8rem)}
/* Sem max-width no bloco: com a margem centralizada, um teto de 56rem que
   inclui o padding apertava o titulo no monitor largo. Quem mede e cada
   filho, em ch. */
.capa h1{font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1.0;max-width:16ch}
/* A linha de apoio e uma so. Com 42ch ela quebrava em tres capas e nao nas
   outras tres; a mais longa, a de /planos, pede 34em, e 72ch sao 43em. */
.capa .apoio{max-width:72ch;color:var(--papel);opacity:.86;
  font-size:clamp(1rem,1.25vw,1.15rem)}

/* ficha tecnica ------------------------------------------------------------ */
.ficha{position:absolute;z-index:2;right:var(--margem);
  bottom:clamp(2.2rem,5vw,3.6rem);width:min(296px,78vw);
  background:color-mix(in srgb,var(--superficie) 82%,transparent);
  backdrop-filter:blur(16px);border:1px solid var(--traco);
  padding:clamp(1rem,2vw,1.3rem)}
.ficha dl{margin:0;display:grid;gap:.7rem}
.ficha dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--papel-fraco);margin-bottom:.15rem}
/* o dd nasce com margin-inline-start de 40px no navegador */
.ficha dd{margin:0;font-size:.95rem;line-height:1.35;font-weight:500}
@media (max-width:1060px){ .ficha{display:none} }

/* assinatura ---------------------------------------------------------------
   Retrato a esquerda, fio no meio, quem fala a direita. O fio e o mesmo gesto
   da logomarca, onde um risco vertical separa o wordmark da assinatura: no SVG
   ele e um rect de 4 por 152, ou seja atravessa a altura inteira. Aqui ele faz
   o mesmo, colado na altura do bloco.

   A foto nao tem moldura. Uma mascara radial come as quatro bordas para ela
   se mesclar no fundo em vez de ser um retangulo colado sobre ele, e a grade
   foto fica sem grade: o tratamento que amarra as bandas de material esfriava
   a luz de fim de tarde, que e o que a foto tem de melhor. Sobre pele, tanto a
   lavagem de terracota em soft-light quanto o sepia tiram dela o que o resto
   do site nao tem. */
.assina{display:grid;grid-template-columns:auto 1px minmax(0,1fr);
  gap:clamp(1rem,2.6vw,2.2rem);align-items:stretch;
  margin-bottom:clamp(1.4rem,3vw,2rem)}
.assina .foto{margin:0;display:flex;align-items:center}
/* height:auto e obrigatorio: o atributo height do HTML vira dica de
   apresentacao e, sem isto, vence o aspect-ratio. */
.assina img{width:clamp(132px,17vw,208px);height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:50% 6%;
  filter:saturate(1.06) contrast(1.02);
  -webkit-mask-image:radial-gradient(104% 94% at 50% 36%,#000 22%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.28) 74%,transparent 96%);
          mask-image:radial-gradient(104% 94% at 50% 36%,#000 22%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.28) 74%,transparent 96%)}
.assina .fio{align-self:stretch;width:1px;
  background:linear-gradient(180deg,transparent 0%,var(--traco) 14%,
             var(--papel-fraco) 50%,var(--traco) 86%,transparent 100%)}
.assina .dizeres{align-self:center}
.assina .nome{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:500;
  letter-spacing:-.01em;line-height:1.2;color:var(--terracota)}
.assina .papel{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--papel-fraco);margin-top:.4rem}
.fala{max-width:52ch;color:var(--papel-fraco);font-size:clamp(1rem,1.15vw,1.08rem)}
.assina .fala{margin-top:1.1rem}
.fala + .fala{margin-top:.85rem}

/* No estreito o risco deita, que e o que a logomarca de 2 linhas faz. */
@media (max-width:620px){
  .assina{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .assina img{width:clamp(140px,44vw,190px)}
  .assina .fio{align-self:start;width:min(190px,44vw);height:1px;
    background:linear-gradient(90deg,var(--papel-fraco) 0%,var(--traco) 62%,transparent 100%)}
}

/* declaracao ---------------------------------------------------------------
   Uma frase por tela, e so uma vez por pagina. E o unico lugar onde o site
   levanta a voz. */
.declara{padding:clamp(3rem,8vw,6rem) var(--margem);
  border-bottom:1px solid var(--traco-fraco)}
.declara p{font-size:clamp(1.5rem,4.2vw,3.2rem);font-weight:300;line-height:1.08;
  letter-spacing:-.03em;max-width:22ch}
.declara .rot{display:block;margin-bottom:clamp(1rem,2.6vw,1.8rem)}

/* secao --------------------------------------------------------------------
   Titulo a esquerda, uma linha de apoio a direita. A linha de apoio e UMA, e
   ela explica; quem conclui e o aparte em Bodoni. */
.secao{padding:clamp(2.6rem,6vw,4.8rem) var(--margem);
  border-bottom:1px solid var(--traco-fraco)}
/* Titulo e apoio na mesma coluna. Em duas colunas a frase de apoio ficava
   solta no canto direito, longe do titulo que ela explica, e o olho nao
   ligava uma coisa na outra. Subtexto fica embaixo. */
.secao-cabeca{margin-bottom:clamp(1.8rem,3.4vw,2.6rem)}
.secao-cabeca h2{font-size:clamp(1.8rem,4.2vw,3.2rem)}
/* 72ch pelo mesmo motivo da .apoio: com 52ch so o subtitulo de "O que eu
   faco" ia para a segunda linha. */
.secao-cabeca p{color:var(--papel-fraco);max-width:72ch;
  margin-top:clamp(.6rem,1.2vw,.9rem);font-size:clamp(1rem,1.15vw,1.08rem)}

/* grade de itens -----------------------------------------------------------
   Serve para as frentes, para as competencias e para o que mais for cartao.
   Sem sombra e sem raio: o contorno e que define, como na prancha. */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  border-top:1px solid var(--traco)}
.item{padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1.1rem,1.8vw,1.5rem);
  border-bottom:1px solid var(--traco);border-right:1px solid var(--traco);
  display:grid;gap:.55rem;align-content:start;transition:background-color .2s ease}
@media (hover:hover){ .item:hover{background:var(--superficie)} }
.item:last-child{border-right:0}
.item .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--terracota)}
.item h3{font-size:clamp(1.12rem,1.6vw,1.4rem);letter-spacing:-.01em;font-weight:500}
.item p{color:var(--papel-fraco);font-size:.93rem;line-height:1.5}
@media (max-width:780px){ .item{border-right:0} }

/* etapas -------------------------------------------------------------------
   Numerada porque a ordem e a informacao: e o argumento do metodo.

   Cada descricao cabe numa linha, e isso e o que mantem as seis linhas com a
   mesma altura. Antes o teto de 54ch cortava a do Diagnostico, que mede 511px,
   e so ela ganhava segunda linha. No largo a descricao comeca em 50%, a mesma
   linha que divide o .duas e a grade de quatro, e so abre essa terceira coluna
   a partir de 1240px, onde a metade ainda passa de 540px. Abaixo disso ela
   desce para baixo do titulo, na coluna do titulo: no celular ela caia na
   coluna do numero, de 54px, e saia uma palavra por linha. */
.etapas{border-top:1px solid var(--traco)}
.etapa{display:grid;grid-template-columns:3.4rem minmax(0,1fr);
  gap:.35rem clamp(.8rem,3vw,2.2rem);
  padding:clamp(1rem,2.2vw,1.5rem) 0;border-bottom:1px solid var(--traco-fraco);
  align-items:baseline}
/* O avanco no hover era padding-left, que passa pelo layout e, com a coluna
   em 50%, estreitava a descricao no meio do gesto. Transform nao reflui. */
.etapa > *{transition:transform .25s var(--ease)}
@media (hover:hover){ .etapa:hover > *{transform:translateX(.7rem)} }
.etapa .n{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;
  color:var(--terracota)}
.etapa h3{font-size:clamp(1.2rem,2.4vw,1.8rem);font-weight:300}
.etapa p{grid-column:2;color:var(--papel-fraco);font-size:.94rem;max-width:62ch}
@media (min-width:1240px){
  .etapa{grid-template-columns:3.4rem minmax(0,1fr) 50%}
  .etapa p{grid-column:auto}
}

/* planos -------------------------------------------------------------------- */
.planos{display:grid;border:1px solid var(--traco);grid-template-columns:1fr}
@media (min-width:880px){ .planos{grid-template-columns:repeat(3,1fr)} }
.plano{padding:clamp(1.4rem,2.4vw,2rem);border-right:1px solid var(--traco);
  display:grid;gap:.9rem;align-content:start}
.plano:last-child{border-right:0}
.plano.marcado{background:var(--superficie)}
.plano h3{font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:300}
.plano .para{color:var(--papel-fraco);font-size:.92rem}
.plano .prazo{font-family:var(--sans);font-weight:500;font-size:.88rem;
  color:var(--papel);padding-top:.7rem;border-top:1px solid var(--traco)}
@media (max-width:880px){
  .plano{border-right:0;border-bottom:1px solid var(--traco)}
  .plano:last-child{border-bottom:0}
}

/* listas -------------------------------------------------------------------
   O marcador e um traco de 9px, a menor medida em que a linha do sistema
   ainda mede alguma coisa. */
.itens{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.itens li{position:relative;padding-left:1.4rem;font-size:.93rem;line-height:1.5;
  color:var(--papel-fraco)}
.itens li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;
  background:var(--terracota)}
.itens li strong{color:var(--papel);font-weight:500}
.itens.nao li::before{background:var(--papel-fraco)}

/* duas colunas -------------------------------------------------------------- */
.duas{display:grid;grid-template-columns:1fr;border:1px solid var(--traco)}
@media (min-width:780px){ .duas{grid-template-columns:1fr 1fr} }
.duas > div{padding:clamp(1.3rem,2.4vw,1.9rem)}
.duas > div + div{border-top:1px solid var(--traco);background:var(--superficie)}
@media (min-width:780px){
  .duas > div + div{border-top:0;border-left:1px solid var(--traco)}
}
.duas h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:400;color:var(--papel-fraco);
  margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--traco)}

/* perguntas -----------------------------------------------------------------
   Sanfona em <details> nativo: abre no clique, funciona sem JS, ja vem com
   teclado e leitor de tela resolvidos. Nenhuma biblioteca faz melhor do que o
   navegador faz de graca aqui.

   O sinal e uma cruz de duas hairlines que vira um traco ao abrir. E o mesmo
   gesto de linha que a marca usa, e diz a coisa certa: fechado soma, aberto
   subtrai. */
.perguntas{border-top:1px solid var(--traco)}
.perguntas details{border-bottom:1px solid var(--traco-fraco)}
.perguntas summary{cursor:pointer;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;
  align-items:center;padding:clamp(1rem,2vw,1.4rem) 0;
  font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:500;letter-spacing:-.01em;
  transition:color .16s ease}
/* os dois precisam existir: o primeiro some no Safari, o segundo no resto */
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::marker{content:""}
@media (hover:hover){ .perguntas summary:hover{color:var(--terracota)} }
.perguntas summary:focus-visible{outline:2px solid var(--terracota);outline-offset:4px}

.perguntas .sinal{position:relative;width:15px;height:15px;justify-self:end}
.perguntas .sinal::before,.perguntas .sinal::after{content:"";position:absolute;
  background:var(--terracota);transition:transform .22s var(--ease)}
.perguntas .sinal::before{left:0;top:7px;width:15px;height:1px}
.perguntas .sinal::after{left:7px;top:0;width:1px;height:15px}
.perguntas details[open] .sinal::after{transform:scaleY(0)}

/* Sem teto em ch: com 62ch quatro das seis respostas iam para a segunda
   linha com a largura inteira livre, e a sanfona perdia o passo. A maior
   mede 966px. O padding da direita e a coluna do sinal, para a resposta
   nunca correr por baixo dele. */
.perguntas p{color:var(--papel-fraco);font-size:.96rem;
  padding:0 calc(15px + 1.2rem) clamp(1rem,2vw,1.4rem) 0}
.perguntas details[open] p{animation:abre .22s var(--ease)}
@keyframes abre{from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none}}

/* faixa de imagem ----------------------------------------------------------- */
.faixa{position:relative;margin:0;height:clamp(220px,38vh,420px);overflow:hidden;
  border-bottom:1px solid var(--traco-fraco)}
.faixa img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.8)}
.faixa figcaption{position:absolute;left:var(--margem);bottom:1.1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--papel-fraco)}

/* retrato ------------------------------------------------------------------- */
.retrato{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;
  align-items:center}
@media (min-width:880px){ .retrato{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
.retrato img{width:100%;height:auto;object-fit:cover;
  outline:1px solid var(--traco);outline-offset:-1px}
.retrato .texto h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:.8rem}
.retrato .texto p{color:var(--papel-fraco);max-width:46ch}
.retrato .texto p + p{margin-top:.8rem}

/* formulario ----------------------------------------------------------------
   Campo e controle: contorno visivel, aresta viva, superficie levantada. */
.formulario{display:grid;gap:clamp(.9rem,2vw,1.1rem);max-width:34rem}
.campo{display:grid;gap:.35rem}
.campo label{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--papel-fraco)}
.campo input,.campo select,.campo textarea{
  font-family:var(--sans);font-size:1rem;line-height:1.5;color:var(--papel);
  background:var(--superficie);border:1px solid var(--traco);border-radius:0;
  padding:.7rem .8rem;width:100%;transition:border-color .16s ease}
.campo textarea{min-height:6rem;resize:vertical}
.campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:right 1rem top 1.35rem,right .64rem top 1.35rem;
  background-repeat:no-repeat;padding-right:2.4rem}
@media (hover:hover){
  .campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--papel-fraco)}
}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  border-color:var(--terracota)}
.enviar{justify-self:start;cursor:pointer}
.nota-form{font-size:.88rem;color:var(--papel-fraco);max-width:44ch}

/* e-mail e copia ------------------------------------------------------------ */
.email{display:inline-flex;align-items:center;gap:.2rem}
.copiar{display:inline-grid;place-items:center;width:44px;height:44px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--papel-fraco);
  transition:color .16s ease,transform .16s var(--ease)}
.copiar:active{transform:scale(.97)}
@media (hover:hover){ .copiar:hover{color:var(--terracota)} }
.copiar .face{grid-area:1/1;width:15px;height:15px;
  transition:opacity .18s ease,scale .18s ease,filter .18s ease}
.copiar .feito,.copiar .falhou{opacity:0;scale:.96;filter:blur(3px)}
.copiar .feito{color:var(--oliva)}
.copiar .falhou{color:var(--terracota)}
.copiar[data-copiado] .copia,.copiar[data-falhou] .copia{opacity:0;scale:.96;filter:blur(3px)}
.copiar[data-copiado] .feito,.copiar[data-falhou] .falhou{opacity:1;scale:1;filter:blur(0)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* icones ---------------------------------------------------------------------
   WhatsApp, Instagram, e-mail e local, em assets/icones.svg. O traco pesa o
   mesmo que o do icone de copiar, perto de 1.2px na tela. Nenhum leva a cor
   da propria rede: o verde do WhatsApp e o degrade do Instagram nao estao na
   paleta. Com currentColor o icone segue o texto do lado, inclusive no hover
   e no botao cheio. Os cantos do Instagram sao os unicos arredondados do
   site, porque o desenho e de terceiro: de canto vivo ele deixa de ser
   reconhecido, e o icone existe para ser reconhecido. */
.ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.email > a{display:inline-flex;align-items:center;gap:.55rem}
.pe .ic{width:16px;height:16px}

/* chamada final -------------------------------------------------------------- */
.chamada{padding:clamp(3.5rem,9vw,7rem) var(--margem);
  border-bottom:1px solid var(--traco-fraco)}
.chamada h2{font-size:clamp(2.1rem,7vw,5.5rem);margin-bottom:clamp(1.4rem,3vw,2.2rem)}

/* pagina de texto corrido ---------------------------------------------------
   So a de privacidade usa. Medida curta e subtitulo em Jost Medium: e um texto
   que ninguem le por prazer, entao pelo menos precisa ser rapido de varrer. */
.corrido{max-width:62ch}
.corrido h3{font-size:clamp(1.08rem,1.6vw,1.28rem);font-weight:500;
  letter-spacing:-.01em;margin-top:clamp(1.8rem,3vw,2.4rem);margin-bottom:.55rem}
.corrido h3:first-child{margin-top:0}
.corrido p{color:var(--papel-fraco);font-size:.98rem}
.corrido p + p{margin-top:.75rem}
.corrido ul + p{margin-top:.8rem}
.corrido ul{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.corrido li{position:relative;padding-left:1.4rem;color:var(--papel-fraco);
  font-size:.98rem;line-height:1.55}
.corrido li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;
  background:var(--terracota)}
.corrido a{color:var(--papel);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--traco)}
@media (hover:hover){ .corrido a:hover{color:var(--terracota)} }

/* rodape --------------------------------------------------------------------- */
.pe{padding:clamp(2.5rem,5vw,3.6rem) var(--margem) clamp(1.4rem,3vw,2rem);
  display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:780px){ .pe{grid-template-columns:2fr 1fr 1fr} }
.pe h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--papel-fraco);font-weight:400;margin-bottom:1rem}
.pe ul{list-style:none;margin:0;padding:0;display:grid}
/* Cada linha mede 44px, e quem mede e o proprio link: antes a altura vinha do
   <li> e o alvo de toque continuava com 22px dentro dele. O seletor tambem
   era `.pe li > span`, que acertava o .email e quebrava o flex dele, deixando
   o botao de copiar fora do eixo do endereco. */
.pe li{display:flex;align-items:center}
/* :not(.botao) porque `.pe a` vence `.botao` na especificidade: sem isso o
   botao do rodape virava display:flex e esticava na largura da coluna. */
.pe a:not(.botao),.pe .texto{color:var(--papel-fraco);font-size:.93rem;
  display:flex;align-items:center;gap:.6rem;min-height:44px;transition:color .16s ease}
.pe .botao{align-self:start}
/* O logo e a porta para a capa, no lugar do item "Capa" que saiu da lista,
   como ja e no cabecalho. Por ser `a`, desfaz o flex de 44px das linhas. */
.pe a.logo{display:block;min-height:0;width:max-content}
.pe .email{display:inline-flex;align-items:center;gap:.1rem}
.pe .email a{min-height:44px}
/* O hover tambem precisa do :not(.botao), pelo mesmo motivo: `.pe a:hover`
   vence `.botao:hover` e pintava o texto do botao de terracota sobre o fundo
   terracota, e o "Falar no WhatsApp" sumia. */
@media (hover:hover){ .pe a:not(.botao):hover{color:var(--terracota)} }
.pe .marca{display:block;width:clamp(150px,18vw,210px);aspect-ratio:840/152;
  background:url("marca/marca-1l-papel.svg") center/contain no-repeat;
  margin-bottom:1.1rem}
/* Quem quebra a linha e o <br> depois de "eles.", na frase, e nao o teto:
   com 34ch ela partia em "e so / para eles". */
.pe .dizer{color:var(--papel-fraco);font-size:.94rem;margin-bottom:1.5rem}
.credito{padding:1.1rem var(--margem) 2.4rem;border-top:1px solid var(--traco-fraco);
  display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;justify-content:space-between;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papel-fraco)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}