/* A fonte do wordmark mora aqui dentro. Nada de chamada externa: o site não
   entrega o IP de quem visita para terceiro nenhum. Poppins, licença OFL. */
@font-face{
  font-family:"Poppins";
  src:url("../fontes/poppins-500-latin.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================================
   Lumin'área · sistema visual
   Base clara e quente. Amarelo só como luz. Cantos retos. Muito respiro.
   ========================================================================= */

:root{
  --preto:#000000;
  --luz:#F0CB00;        /* Amarelo Luz, do sistema de marca de 08/09 */
  --marfim:#F7F2E9;
  --branco:#FFFFFF;

  /* Gelo: o mesmo tom da faixa do topo. É o fundo das faixas que precisam
     descolar do marfim sem virar outra cor. */
  --gelo:#EBE9E4;

  --linho:#E2D6CD;      /* Linho Natural */
  --areia:#CEB6A7;      /* Areia Quente */
  --taupe:#B09F8D;      /* Pedra Taupe */
  --terra:#B67460;      /* Terra Suave, do manual de cor */
  --cafe:#5E4B33;       /* Café Profundo */
  --marrom:#2A1B16;     /* Marrom Profundo */

  /* Pedra Taupe funda: a tarja escura da casa, mais cinza quente do que marrom */
  --pedra-funda:#6A655F;
  --tarja:var(--pedra-funda);

  --tinta:#221812;
  /* 11/09, pedido dela olhando a home inteira: o reforço de dez por cento de
     preto que a gente tinha dado só na letra do cartão passou a valer para
     todo o texto de apoio do site. O público da casa é 50+, e o tom antigo
     (#5A4B40) pedia esforço no celular, ao sol. */
  --tinta-suave:#51443A;
  /* o mesmo tom com 10% de preto por cima, para a letra que fica sobre o
     vidro do cartão de abertura, que era onde ela sumia */
  --tinta-no-vidro:#51443A;
  --rotulo:#7A6C60;

  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --marca:"Poppins", var(--sans);

  --gutter:clamp(22px, 5.5vw, 96px);
  --largura:1240px;
  /* respiro mantido, cerca de 1cm a menos entre um bloco e outro */
  --secao:clamp(60px, 7.6vw, 124px);
  --respiro:clamp(30px, 3.6vw, 52px);

  --calma:cubic-bezier(.22,.8,.28,1);
  --topo-altura:78px;

  /* o desenho do WhatsApp, o mesmo que o JS escreve em ICO_ZAP. Mora aqui
     como máscara para o .ico-zap poder herdar a cor de quem o carrega. */
  --desenho-zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2C6.6 2 2.2 6.4 2.2 11.84c0 1.94.53 3.75 1.45 5.31L2 22l4.98-1.6a9.8 9.8 0 0 0 5.06 1.4c5.44 0 9.84-4.4 9.84-9.84C21.88 6.4 17.48 2 12.04 2Zm5.72 13.9c-.24.68-1.4 1.3-1.94 1.34-.5.05-.98.23-3.3-.7-2.78-1.12-4.54-3.98-4.68-4.17-.13-.19-1.11-1.5-1.11-2.86 0-1.36.7-2.02.95-2.3.25-.27.55-.34.73-.34l.52.01c.17.01.4-.06.62.48.24.57.8 1.97.87 2.11.07.14.11.31.02.5-.09.19-.14.31-.28.47-.14.17-.29.37-.41.5-.14.14-.28.29-.12.56.16.27.72 1.18 1.54 1.91 1.06.94 1.95 1.23 2.22 1.37.27.14.43.12.59-.07.16-.19.68-.79.86-1.06.18-.27.36-.22.61-.13.25.09 1.6.75 1.87.89.27.13.45.2.52.31.07.11.07.65-.17 1.33Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--marfim);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.78;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-wrap:pretty;
}
body.pre-entrada,body.pagina-aberta,body.menu-aberto{overflow:hidden}

img{max-width:100%;height:auto;display:block}
picture{display:block}
/* luz homogênea entre as fotos: mesma casa, mesma hora do dia */
.parallax-foto img,.capa picture img,.chegada-foto img,.entrada figure img,
.evento-foto img,.galeria img,.casa-foto img,.historia-foto img{
  filter:saturate(.85) contrast(1.02) sepia(.08);
}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

.faixa{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}

/* ------------------------------------------------------------ tipografia */
.display{font-size:clamp(40px,6vw,80px);line-height:1.0;letter-spacing:-.035em;font-weight:600}
.titulo-1{font-size:clamp(31px,4.2vw,56px);line-height:1.06;letter-spacing:-.032em}
.titulo-2{font-size:clamp(26px,3.2vw,44px);line-height:1.12;letter-spacing:-.03em}
.titulo-3{font-size:clamp(19px,1.7vw,25px);line-height:1.24;letter-spacing:-.022em}

.chamada{font-size:clamp(17px,1.5vw,20px);color:var(--tinta-suave);max-width:56ch;line-height:1.72}
.destaque{font-size:clamp(18px,1.7vw,22px);line-height:1.55;letter-spacing:-.018em;color:var(--tinta)}
.miudo{font-size:14.5px;color:var(--rotulo);line-height:1.7}
.limite{max-width:60ch}

.rotulo{
  display:flex;align-items:center;gap:12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.3em;
  color:var(--rotulo);font-weight:500;margin:0 0 22px;line-height:1;
}
.rotulo.claro{color:var(--areia)}
.tick{display:block;width:20px;height:2px;background:var(--luz);flex:none}
.rotulo-min{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.28em;
  color:var(--taupe);margin:0 0 14px;font-weight:500;
}
.aviso{
  border-left:2px solid var(--luz);padding:4px 0 4px 18px;margin-top:24px;
  color:var(--tinta);font-size:15.5px;line-height:1.6;
}

/* ------------------------------------------------------- o deslizamento */
.desliza{
  opacity:0;transform:translateY(42px);
  transition:opacity 1.05s var(--calma) var(--atraso,0s), transform 1.05s var(--calma) var(--atraso,0s);
}
.desliza.entrou{opacity:1;transform:none}

/* a foto se revela por máscara, deslizando de baixo para cima */
figure.desliza img,figure.desliza picture{will-change:clip-path}
figure.desliza picture{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--calma) var(--atraso,0s)}
figure.desliza.entrou picture{clip-path:inset(0 0 0 0)}

/* --------------------------------------------------------------- marca
   O quadrinho amarelo. É a marca da casa, não um bloco de cor: fica pequeno,
   ancorado no topo, e é a única área amarela cheia do site. */
.marca{display:block;flex:none}
.badge{
  display:block;width:54px;height:54px;overflow:hidden;
  box-shadow:0 2px 14px rgba(20,14,9,.14);
  transition:transform .5s var(--calma),box-shadow .5s var(--calma);
}
.badge img{width:100%;height:100%;object-fit:cover}
.marca:hover .badge{transform:translateY(-1px);box-shadow:0 6px 22px rgba(20,14,9,.22)}
.topo.sobre-foto .badge{box-shadow:0 4px 20px rgba(0,0,0,.34)}

/* a palavra acesa: o amarelo da marca dentro do título */
.acende{font-style:normal;color:var(--luz)}
/* frase inteira: se não couber na linha, ela desce junto e não quebra no meio */
.frase{display:inline-block}

/* ---------------------------------------------------------------- topo */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--topo-altura);
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding-inline:var(--gutter);
  background:rgba(247,242,233,0);
  transition:background .5s var(--calma), box-shadow .5s var(--calma);
}
.topo.assentado{
  background:rgba(247,242,233,.94);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--linho);
}
/* o menu inteiro encostado à direita, ao lado do WhatsApp */
.menu{display:flex;gap:clamp(16px,2vw,32px);align-items:center;margin-left:auto}
/* 11/09: ela achou o corpo do menu pequeno demais. Não precisa ser grande,
   precisa ser legível, então subiu de 13 para 14,5, e o mesmo degrau vale nas
   duas quebras de tela lá embaixo. */
.menu a{font-size:14.5px;color:var(--tinta);position:relative;padding-block:6px}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--luz);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--calma);
}
.menu a:hover::after{transform:scaleX(1)}
.topo.sobre-foto .menu a{color:var(--branco)}

.topo-acoes{display:flex;align-items:center;gap:18px}
.zap{display:grid;place-items:center;width:34px;height:34px}
.zap svg{width:21px;height:21px;fill:#3f9a54;transition:transform .4s var(--calma)}
.zap:hover svg{transform:scale(1.08)}
.topo.sobre-foto .zap svg{fill:#66c47c}
.som{display:grid;place-items:center;width:34px;height:34px}
.som-ondas{display:flex;gap:3px;align-items:center;height:16px}
.som-ondas b{display:block;width:2px;height:5px;background:var(--tinta);transition:height .4s var(--calma)}
.topo.sobre-foto .som-ondas b{background:var(--branco)}
.som.ligado .som-ondas b{animation:onda-som 1.4s ease-in-out infinite}
.som.ligado .som-ondas b:nth-child(2){animation-delay:.2s}
.som.ligado .som-ondas b:nth-child(3){animation-delay:.4s}
.risquinhos{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px}
.risquinhos span{display:block;height:1px;background:var(--tinta);transition:.4s var(--calma)}
.topo.sobre-foto .risquinhos span{background:var(--branco)}

/* -------------------------------------------------------------- botões */
.btn-linha,.btn-solido,.abrir{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.24em;font-weight:500;
  line-height:1;position:relative;
}
.btn-linha{
  border:1px solid var(--areia);padding:17px 26px;color:var(--tinta);
  transition:border-color .45s var(--calma),color .45s var(--calma);overflow:hidden;
}
.btn-linha::after,.btn-solido::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--luz);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--calma);
}
.btn-linha:hover{border-color:var(--tinta)}
.btn-linha:hover::after,.btn-solido:hover::after{transform:scaleX(1)}
.btn-linha.claro{border-color:rgba(226,216,205,.35);color:var(--marfim)}
.btn-linha.claro:hover{border-color:var(--marfim)}
.btn-solido{
  background:var(--taupe);color:var(--marrom);padding:18px 30px;
  transition:background .45s var(--calma),color .45s var(--calma);overflow:hidden;
}
.btn-solido:hover{background:var(--pedra-funda);color:var(--marfim)}

.abrir{
  border:1px solid var(--areia);padding:14px 20px;color:var(--tinta);
  justify-content:space-between;gap:18px;
  transition:border-color .4s var(--calma),background .4s var(--calma);
}
.abrir:hover{border-color:var(--tinta);background:rgba(226,216,205,.28)}
.mais{
  width:13px;height:13px;flex:none;position:relative;
}
.mais::before,.mais::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .5s var(--calma);
}
.mais::before{width:13px;height:1px}
.mais::after{width:1px;height:13px}
.abrir[aria-expanded="true"] .mais::after{transform:translate(-50%,-50%) scaleY(0)}

:focus-visible{outline:2px solid var(--luz);outline-offset:3px}

/* ================================================================ chegança */
.chegada{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:#0d0906;transition:opacity 1.2s var(--calma), visibility 1.2s;
}
.chegada.saindo{opacity:0;visibility:hidden;pointer-events:none}
.chegada-foto{position:absolute;inset:0}
/* o filme da chegança, quando existir, cobre a foto e a apaga por baixo */
.chegada-filme{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s var(--calma);z-index:1;
  filter:brightness(.62) saturate(.82) sepia(.12);
}
.chegada.com-filme .chegada-filme{opacity:1}
.chegada.com-filme .chegada-foto{opacity:0}
.chegada-foto img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(.82) sepia(.12);transition:filter 2.6s var(--calma)}
/* 04/09: o véu ganhou peso na metade de baixo. A foto da chegança agora vem
   da Sala de Edição, e a Cinara troca ela quando quiser: a que entrou é de
   piscina ao sol, clara justamente embaixo, onde caem o campo do nome e a
   dica do sino. Com o degradê antigo, que só chegava a .36 no pé da tela, o
   texto creme sumia ali. O escuro embaixo resolve para esta foto e para
   qualquer outra que ela suba depois. */
/* 11/09, pedido dela às 14h09: "faltou filtro escuro sobre o filme da home
   (como feito anteriormente)". O filme entrou com z-index:1 e passou a cobrir
   o véu, que não tinha empilhamento nenhum: o escuro continuava ali, embaixo
   do filme, sem fazer efeito. O véu agora fica acima do filme e da foto, e o
   texto da chegança sobe para o 3. */
.chegada-veu{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(40% 36% at 50% 50%, rgba(9,6,4,.68), rgba(9,6,4,.34) 62%, transparent 100%),
    linear-gradient(180deg, rgba(9,6,4,.34), rgba(9,6,4,.2) 34%, rgba(9,6,4,.58) 74%, rgba(9,6,4,.72));
  transition:background 2.2s var(--calma);
}
.chegada.acesa .chegada-foto img{filter:brightness(1.12) saturate(.95) sepia(.07)}
.chegada.acesa .chegada-veu{
  background:
    radial-gradient(58% 46% at 50% 52%, rgba(9,6,4,.66), rgba(9,6,4,.3) 68%, transparent 100%),
    linear-gradient(180deg, rgba(9,6,4,.5), rgba(9,6,4,.3) 36%, rgba(9,6,4,.66) 76%, rgba(9,6,4,.78));
}
/* As folhas de bananeira recortadas saíram da chegança em 24/08: mesmo paradas,
   o sopro que elas davam no toque do sino ficava artificial. A primeira tela é a
   foto da casa e mais nada. Se um dia entrar filme de verdade no fundo, é ele que
   faz a folha mexer, e não o CSS. */

/* A sombra de leitura anda junto com o texto, não com a foto. Escurecer o
   creme das linhas pequenas deixaria elas num meio-termo sujo sobre a foto
   clara, então o preto entrou ATRÁS delas: um borrão macio preso à coluna do
   conteúdo, que sai de cena nas bordas e deixa a casa aparecer. Assim a
   leitura fica garantida seja qual for a foto da vez.
   O z-index:1 aqui é o que segura o ::before dentro deste empilhamento; sem
   ele o borrão cairia atrás da própria foto. */
.chegada-centro{position:relative;z-index:3;text-align:center;padding-inline:var(--gutter);width:100%;max-width:600px}
.chegada-centro::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1480px,210vw);height:178%;
  /* 11/09: com quatro paradas curtas o degradê fechava cedo e a borda ficava
     visível, então a sombra lia como mancha em cima da foto. Agora ela é mais
     larga, mais alta, começa mais leve e morre em seis paradas, que é o que
     faz o olho parar de enxergar onde ela acaba. */
  background:radial-gradient(closest-side,
    rgba(9,6,4,.38), rgba(9,6,4,.33) 34%, rgba(9,6,4,.24) 54%,
    rgba(9,6,4,.13) 72%, rgba(9,6,4,.05) 87%, transparent 100%);
}
.chegada-marca{display:block;width:clamp(56px,6vw,74px);margin:0 auto 26px;line-height:0;flex:none}
/* 11/09: no celular dela a marca e o sino apareciam achatados. O aspect-ratio
   com object-fit segura o desenho redondo mesmo quando a altura da tela aperta
   ou quando o elemento vira item de um flex. */
.chegada-marca img{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:contain}
.chegada-titulo{color:var(--branco);font-size:clamp(30px,4.4vw,50px)}
.chegada-linha{
  color:rgba(247,242,233,.94);font-size:16px;margin-top:14px;
  text-shadow:0 1px 14px rgba(9,6,4,.6);
}

.chegada-nome{margin-top:clamp(34px,5vh,52px)}
.chegada-nome label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.3em;
  color:rgba(247,242,233,.86);margin-bottom:14px;
  text-shadow:0 1px 12px rgba(9,6,4,.6);
}
.chegada-nome input{
  width:100%;max-width:340px;background:transparent;
  border:0;border-bottom:1px solid rgba(247,242,233,.3);
  color:var(--branco);font-family:inherit;font-size:19px;text-align:center;
  padding:12px 8px;transition:border-color .4s var(--calma);
}
.chegada-nome input::placeholder{color:rgba(247,242,233,.56)}
.chegada-nome input:focus{outline:none;border-bottom-color:rgba(247,242,233,.7)}

.sino{position:relative;width:112px;height:112px;flex:none;aspect-ratio:1;display:grid;place-items:center;margin:clamp(28px,4vh,42px) auto 0}
.sino svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible;transform-box:fill-box;transform-origin:center}
.sino svg circle,.sino svg path{fill:none;stroke:rgba(247,242,233,.5);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.sino .sino-corpo,.sino .sino-badalo,.sino .sino-cabo{stroke:rgba(247,242,233,.82)}
.sino .sino-onda{stroke:var(--luz);opacity:0;transform-box:fill-box;transform-origin:center}
.sino:hover .sino-anel{stroke:var(--luz)}
.sino-dica{
  margin-top:16px;font-size:10.5px;text-transform:uppercase;letter-spacing:.28em;
  color:rgba(247,242,233,.88);text-shadow:0 1px 12px rgba(9,6,4,.66);
}

/* 04/09: a reverberação voltou a ser a da página do sino do Universo Visual,
   que é a que a Cinara lembra. O que fazia ela sair redonda lá: o anel nasce
   pequenininho preso ao centro por left/top de 50% com o translate de menos
   metade, e cresce por largura e altura a partir dali, então abre igual para
   todos os lados, como água na água.
   O que existia aqui escalava o <circle> do SVG sem origem própria: sem
   fill-box o navegador media a partir do canto do viewBox, e a onda deslizava
   para o lado. São três anéis, um atrás do outro, e todos ficam por trás do
   desenho do sino, que sobe no z-index. Fora do fluxo, nada empurra a tela. */
.sino::before,.sino::after{
  content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:10px;height:10px;transform:translate(-50%,-50%);
  border:1px solid var(--luz);border-radius:50%;
  opacity:0;pointer-events:none;
}
.chegada.tocado .sino::before{animation:onda 2.6s var(--calma) forwards}
.chegada.tocado .sino::after{animation:onda 2.6s var(--calma) .34s forwards}
@keyframes onda{
  0%{opacity:.9;width:10px;height:10px}
  100%{opacity:0;width:min(320px,76vw);height:min(320px,76vw)}
}
/* o terceiro anel é o próprio círculo do SVG, que já nasce do tamanho da
   borda do sino: ele sai por último e fecha a água */
.chegada.tocado .sino .sino-onda{animation:onda-anel 2.6s var(--calma) .68s forwards}
@keyframes onda-anel{
  0%{opacity:.72;transform:scale(1)}
  100%{opacity:0;transform:scale(2.4)}
}
/* o brilho que acende no centro no instante do toque, como na página antiga */
.chegada.tocado .sino svg{animation:brilho-sino 2.6s var(--calma) forwards}
@keyframes brilho-sino{
  0%{filter:drop-shadow(0 0 0 rgba(240,200,0,0))}
  16%{filter:drop-shadow(0 0 20px rgba(240,200,0,.5))}
  100%{filter:drop-shadow(0 0 0 rgba(240,200,0,0))}
}
/* o sino balança pendurado pelo cabo, e não em volta do canto do desenho */
.chegada.tocado .sino .sino-corpo{
  animation:balanca 2.2s var(--calma);
  transform-box:fill-box;transform-origin:50% 0;
}
@keyframes balanca{
  0%,100%{transform:rotate(0)}15%{transform:rotate(6deg)}
  38%{transform:rotate(-4deg)}62%{transform:rotate(2deg)}82%{transform:rotate(-1deg)}
}

/* ============================================== abertura, imagem parada
   O tamanho da foto grudada e o quanto o conteúdo sobe por cima dela saem
   os dois do mesmo --alto. Quando eram dois números soltos, um mexia sem o
   outro e a foto descolava do cartão. */
.parallax{position:relative;--alto:100svh}
.parallax-foto{position:sticky;top:0;height:var(--alto);overflow:hidden}
/* O picture precisa ser um plano com altura própria. Sem isto, a altura de
   100% do img não tem em que se apoiar, ele volta ao tamanho natural e sobra
   um vazio cinza embaixo da foto: o "plano perdido" que aparecia na rolagem
   do celular, onde a foto é muito mais baixa que a tela. */
.parallax-foto picture{position:absolute;inset:0;display:block}
.parallax-foto img{width:100%;height:100%;object-fit:cover}
.video-fundo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s var(--calma);z-index:1;
}
.parallax-foto.com-video .video-fundo{opacity:1}
/* 11/09, pedido dela às 14h09: "faltou filtro escuro sobre o filme da home
   (como feito anteriormente)". Era isto: o filme entrou com z-index:1 e o véu
   não tinha empilhamento nenhum, então o escuro ficava ATRÁS do filme e só
   aparecia enquanto a foto parada estava no lugar dele. Com a foto funcionava,
   com o filme sumia, e foi por isso que ela viu a diferença. */
.parallax-veu{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(96deg, rgba(16,11,7,.62) 0%, rgba(16,11,7,.42) 40%, rgba(16,11,7,.14) 76%, transparent 100%),
    linear-gradient(180deg, rgba(16,11,7,.42) 0%, transparent 30%, rgba(16,11,7,.4) 100%);
}
/* A sombra de folhagem que balançava por cima da foto da casa saiu em 24/08,
   junto com as bananeiras da chegança. Nenhuma folha mexe no site: a foto é a
   foto. Se um dia entrar filme de verdade, o movimento vem dele. */
.hero-luz{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,40%), rgba(240,200,0,.16), transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity 1.2s var(--calma);
}
.parallax:hover .hero-luz{opacity:1}

.parallax-conteudo{
  position:relative;margin-top:calc(var(--alto) * -1);min-height:calc(var(--alto) * 1.5);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:clamp(150px,26svh,260px);
}
/* O box de vidro fosco que desliza sobre a foto parada. Deixa a casa
   aparecer por trás, sem tirar a leitura do texto. */
/* vidro escovado: mais transparência e mais borrado, a casa aparecendo
   através do bloco */
.cartao{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.38));
  backdrop-filter:blur(48px) saturate(1.22);
  -webkit-backdrop-filter:blur(48px) saturate(1.22);
  border-left:2px solid var(--luz);
  box-shadow:0 26px 70px rgba(20,14,9,.26), inset 0 0 0 1px rgba(255,255,255,.46);
  max-width:min(880px,100%);
  padding:clamp(30px,3.4vw,50px) clamp(26px,3.2vw,52px) clamp(28px,3vw,42px);
}
/* onde não há backdrop-filter, o vidro vira um branco quase cheio */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cartao{background:rgba(255,255,255,.92)}
}
.cartao .titulo-1{max-width:15ch}
/* 04/09: o nome de quem tocou o sino vem primeiro, numa linha própria acima
   do título, e não mais pendurado no fim da frase que a Cinara escreve. Fica
   menor que o título, com respiro embaixo, para receber sem roubar a cena. */
/* 04/09, segunda volta: tinha ficado pequeno demais. O nome de quem chegou é
   uma saudação, não uma legenda: fica logo abaixo do título em escala, com o
   nome em cheio. */
.cartao-saudacao{
  font-size:clamp(19px,1.9vw,26px);line-height:1.34;letter-spacing:-.018em;
  color:var(--tinta-no-vidro);margin-bottom:16px;max-width:36ch;
}
.saudacao-nome{color:var(--tinta);font-weight:600}
/* no vidro, a palavra acesa é branca, não amarela */
/* 12/09, pedido da Carol olhando a home: "coloca o Lumi na cor diferente
   pra chamar a atenção". O branco sobre branco não destacava nada. O nome
   da casa passa a acender no Amarelo Luz da própria marca, que é o único
   ponto de cor da abertura e sobra de contraste sobre a foto escura. */
#titulo-abertura .acende{color:var(--luz);text-shadow:0 1px 20px rgba(20,14,9,.34)}
/* Pedido dela na reunião de 02/09: dez por cento a mais de preto na letra do
   box branco, porque em cima do vidro ela não estava aparecendo direito. O
   --tinta-suave #5A4B40 vira #51443A, que é ele com 10% de preto por cima. */
.cartao-linha{
  margin-top:22px;max-width:48ch;font-size:clamp(16px,1.4vw,18.5px);
  color:var(--tinta-no-vidro);line-height:1.72;
}
.cartao-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.cartao-acoes .btn-linha,.cartao-acoes .btn-solido{
  padding:15px 20px;letter-spacing:.16em;font-size:10.5px;
}
.cartao-acoes .btn-linha{border-color:rgba(42,27,22,.4);background:rgba(255,255,255,.28)}
.cartao-acoes .btn-linha:hover{border-color:var(--tinta);background:rgba(255,255,255,.5)}

/* ========================================================== compromissos */
.tarja{display:grid;grid-template-columns:repeat(5,1fr)}
.tarja li{padding:0 clamp(14px,1.8vw,28px);border-left:1px solid var(--linho)}
.tarja li:first-child{padding-left:0;border-left:0}
.tarja li:last-child{padding-right:0}
.icone{width:26px;height:26px;fill:none;stroke:var(--rotulo);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.tarja h3{font-size:14px;letter-spacing:-.01em}
.tarja p{font-size:13.5px;line-height:1.62;color:var(--tinta-suave);margin:0}
.tarja-min li p{font-size:13px;color:var(--tinta-suave);margin:0}
.tarja-min .icone{margin-bottom:16px}

/* a faixa gelo dos cinco compromissos, logo abaixo do humano em foco */
.pilares{background:var(--gelo);padding:clamp(34px,4vw,58px) 0}
.tarja-pilares li{
  text-align:center;border-left:1px solid rgba(42,27,22,.1);
  padding:0 clamp(12px,1.6vw,24px);
}
.tarja-pilares li:first-child{border-left:0}
.tarja-pilares .icone{margin:0 auto 14px;width:24px;height:24px;stroke:var(--terra)}
/* o termo logo abaixo do ícone entra sempre em bold, antes da frase */
.tarja-pilares h3{
  font-size:12px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;
  color:var(--tinta);margin-bottom:9px;
}
.tarja-pilares p{font-size:13.5px;line-height:1.58;color:var(--tinta-suave);max-width:24ch;margin-inline:auto}

/* ============================================================= manifesto */
/* `overflow-x:clip` é o que segura a sangria da digital dentro da largura da
   tela. Sem ele a imagem inclinada empurrava a página para 498px num iPhone de
   375: sobrava uma tarja branca do lado e o botão do menu ficava fora da vista,
   sem jeito de abrir. Não dá para resolver no body: ali o `overflow-x:hidden`
   é repassado para a janela em vez de recortar, e o corte não acontece.
   `clip` no lugar de `hidden` porque só ele deixa o outro eixo em `visible`:
   a digital continua atravessando a emenda por cima e por baixo, que é o
   desenho pedido. Só o que vaza para os lados é aparado. */
.manifesto{
  position:relative;z-index:1;padding:clamp(38px,4.6vw,74px) 0 clamp(30px,3.6vw,52px);
  overflow-x:clip;overflow-y:visible;
}
.manifesto .faixa{position:relative;z-index:1}
.manifesto .display{max-width:12ch}
.manifesto-linha{
  margin-top:24px;max-width:44ch;font-size:clamp(19px,1.8vw,22px);
  color:var(--tinta-suave);line-height:1.66;
}

/* A digital humana, a arte da casa.
   24/08, pedido da Cinara: ampliada, inclinada, sobrepondo os planos e saindo
   da página. Antes ela estava parada num canto, do tamanho de um selo, e ficava
   com cara de coisa esquecida ali. Agora nasce no marfim, atravessa a linha do
   cinza e sangra pela direita: é a passagem por cima da emenda que costura os
   dois planos num só. Sangria é isso, o elemento vaza da tela e você não vê o
   desenho inteiro. Ela mora só aqui: na página de empresas o labirinto de
   pedras já faz esse papel, e as duas juntas competiriam. */
/* 04/09: pedido da Cinara na reunião de 02/09, palavra por palavra: aumentar
   o tamanho da digital para que ela se sobreponha sutilmente às seções de
   entrada. E, do áudio de 22/08: "aplicar com um pouco de transparência,
   mesmo estando já clarinho". Então ela cresce e sobe, atravessando a emenda
   das seções de cima e de baixo, e a opacidade cai junto, para o desenho
   ganhar presença sem ganhar peso. */
.digital{
  position:absolute;z-index:0;pointer-events:none;
  /* 04/09, palavras dela aos 23:00: "pode aumentar sem medo, só não vai cobrir
     o olhar sistêmico". Ela cresce até a borda e atravessa as três seções,
     costurando abertura, manifesto e faixa gelo. */
  width:clamp(520px,82vw,1320px);height:auto;
  /* sai pela borda direita: o corte é do lado de fora da tela */
  right:clamp(-330px,-15vw,-96px);
  /* sobe o suficiente para encostar na seção de entrada, e desce por cima da
     faixa gelo do outro lado, em vez de parar nas duas emendas */
  top:clamp(-330px,-19vw,-110px);
  /* Instrução dela no WhatsApp, 22/08 às 20h52: "pode girar inclinando um
     pouco mais levemente, só para dar mais brilho de movimento, uma parte da
     digital deve ser cortada mesmo, ou seja, vai sair fora da página". */
  transform:rotate(-22deg);transform-origin:center;
  /* era .62 quando ela era pequena. Cresceu bastante, então alivia um pouco
     para não pesar, e para de novo sem sumir da página. */
  opacity:.44;
}
/* para ela poder atravessar para cima, a seção da entrada não pode recortar */
.abertura{overflow:visible}
/* iPhone antigo (Safari até 15) não conhece `clip`, e sem recorte a página
   voltaria a esticar. Nesses aparelhos vale `hidden`: a digital para na emenda
   em vez de atravessá-la. Perde-se um pedaço do desenho, nunca a navegação. */
@supports not (overflow-x: clip){
  .manifesto{overflow:hidden}
}

/* A digital passa por cima do fundo cinza, nunca por cima do texto que está
   nele: os cinco compromissos sobem um degrau para ficarem sempre legíveis. */
.pilares .faixa{position:relative;z-index:2}

/* ================================================================= busca */
.busca{padding:var(--secao) 0}
.cabeca{margin-bottom:var(--respiro)}
.cabeca .titulo-2{max-width:18ch}
.cabeca .chamada{margin-top:22px}
.cabeca-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

.entradas{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px);
  align-items:start;
}
/* A listra gelo por trás: começa na altura em que o box branco monta sobre a
   foto e desce até o fim, crescendo junto quando as camadas abrem.
   O --palco-topo é medido no lumi.js, porque depende da altura real da foto. */
.entradas::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;transform:translateX(-50%);width:100vw;
  top:var(--palco-topo,58%);bottom:calc(var(--secao) * -.5);
  background:var(--gelo);
}
/* Com tudo fechado, as três caixinhas brancas medem o mesmo, e por isso os
   três "saiba mais" pousam na mesma linha, alinhados com as fotos acima.
   Quando uma camada abre, a régua sai do caminho e cada cartão volta à
   altura natural, sem deixar vazio branco nos outros dois. */
.entradas:not(:has(.abrir[aria-expanded="true"])){align-items:stretch}
.entrada{position:relative;z-index:1;display:flex;flex-direction:column}
.entrada-corpo{flex:1;display:flex;flex-direction:column}
/* o par de ações desceu para o pé da caixinha, que é onde o botão sozinho
   ficava antes de o link do WhatsApp entrar ao lado dele */
.entrada > .entrada-corpo > .bloco-acoes{margin-top:auto}
/* o --corpo-min é medido no lumi.js, com tudo fechado */
@media (min-width:1041px){ .entrada-corpo{min-height:var(--corpo-min,auto)} }
.entrada figure{overflow:hidden;background:var(--linho)}
.entrada figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.6s var(--calma);
}
.entrada:hover figure img{transform:scale(1.03)}
/* 02/09: a Cinara pediu que a caixinha do "saiba mais" ficasse alinhada com
   a foto de cima, nas três. A caixa era 18px mais estreita de cada lado e
   isso deixava três bordas soltas no meio da seção. Agora ela nasce e
   termina na mesma prumada da foto, e só sobe por cima dela. */
.entrada-corpo{
  position:relative;z-index:1;
  background:var(--branco);border:1px solid var(--linho);
  margin:-54px 0 0;padding:clamp(24px,2.2vw,30px);
  transition:border-color .5s var(--calma),box-shadow .5s var(--calma);
  box-shadow:0 12px 34px rgba(20,14,9,.06);
}
.entrada:hover .entrada-corpo{border-color:var(--areia)}
.entrada .titulo-3{margin-bottom:14px}
.entrada-linha{color:var(--tinta-suave);font-size:15px;line-height:1.7;margin-bottom:24px}
.entrada .abrir{width:100%}
.selo-nr{
  display:inline-block;margin:-12px 0 24px;padding:7px 12px;
  border:1px solid var(--linho);background:var(--gelo);
  font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--terra);
}

/* os três trilhos que abrem dentro do caminho Cuidar da mente */
.trilhos{border-top:1px solid var(--linho);margin-bottom:26px}
.trilho{border-bottom:1px solid var(--linho)}
.trilho-botao{
  width:100%;padding:15px 0;border:0;
  letter-spacing:.12em;text-transform:none;font-size:13.5px;
  color:var(--tinta);
}
.trilho-botao:hover{background:none;border:0;color:var(--terra)}
.trilho-botao[aria-expanded="true"]{color:var(--terra)}
.trilho .camada-dentro{padding-top:2px;padding-bottom:20px}
.trilho .camada-dentro p{font-size:15px}
.trilho .aviso{margin-top:18px}

/* camadas que abrem deslizando */
.camada{display:grid;grid-template-rows:0fr;transition:grid-template-rows .52s var(--calma)}
.camada.aberta{grid-template-rows:1fr}
.camada > div{overflow:hidden}
.camada-dentro{padding-top:28px;font-size:15.5px;line-height:1.8;color:var(--tinta-suave)}
.camada-dentro h4{font-size:16px;margin:28px 0 12px;color:var(--tinta);letter-spacing:-.015em}
.camada-dentro h4:first-child{margin-top:0}
.camada-dentro .destaque{font-size:17px;color:var(--tinta);margin-bottom:14px}
.camada-dentro .btn-linha{margin-top:26px}
.par-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* O par de ações dos cartões: o "saiba mais" e, ao lado dele, a conversa
   direta no WhatsApp. Onde o cartão é estreito o link desce sozinho para a
   linha de baixo, e é por isso que o embrulho quebra. */
.bloco-acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* o link é o caminho curto, não o principal: fica discreto ao lado do botão
   e só ganha corpo quando o cursor encosta */
.zap-bloco{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;font-weight:500;
  line-height:1;padding:14px 2px;color:var(--rotulo);
  border-bottom:1px solid transparent;
  transition:color .4s var(--calma),border-color .4s var(--calma);
}
.zap-bloco:hover{color:var(--tinta);border-bottom-color:var(--areia)}
/* O mesmo desenho do ícone que o JS escreve em ICO_ZAP, aqui como máscara:
   assim ele nasce com a cor do link e acompanha o hover, sem precisar de um
   SVG solto dentro do HTML. */
.ico-zap{
  width:17px;height:17px;flex:none;display:inline-block;
  background:currentColor;
  -webkit-mask:var(--desenho-zap) center/contain no-repeat;
  mask:var(--desenho-zap) center/contain no-repeat;
}

.esteira{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:26px 0 30px;padding:16px 0;border-block:1px solid var(--linho);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--terra);
}
.esteira i{width:20px;height:1px;background:var(--areia);flex:none}

/* ============================================================= encontros */
.encontros{background:var(--tarja);color:var(--marfim);padding:var(--secao) 0}
.encontros .tick{background:var(--areia)}
.encontros .play{background:transparent;border-color:rgba(226,216,205,.45)}
.encontros .play-ondas b{background:var(--luz)}
.encontros .play::after{border-color:rgba(226,216,205,.3)}
.encontros .ponto{background:var(--areia)}
.encontros .ponto.formando{background:var(--terra)}
.encontros .titulo-2{color:var(--branco)}
.lista-eventos{border-top:1px solid rgba(226,216,205,.16)}
.lista-eventos li{border-bottom:1px solid rgba(226,216,205,.16)}
.evento{
  display:grid;
  /* a última coluna mede o próprio botão: com largura fixa, "quero me
     inscrever" vazava a margem direita e desalinhava a linha inteira */
  grid-template-columns:132px minmax(200px,244px) 1fr minmax(168px,max-content);
  grid-template-rows:auto auto;
  gap:0 clamp(20px,2.6vw,36px);align-items:start;
  padding:clamp(24px,2.6vw,34px) 0;
}
.evento-data{grid-column:1;grid-row:1 / span 2;line-height:1;padding-top:4px}
.evento-data .dia{display:block;font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--branco)}
.evento-data .mes{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--areia);margin-top:10px;white-space:nowrap}
.evento-data .semana{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin-top:8px}
/* a foto atravessa as duas linhas: leitura mais quadrada, base junto da LuzIA */
.evento-foto{
  grid-column:2;grid-row:1 / span 2;align-self:stretch;position:relative;
  overflow:hidden;background:rgba(0,0,0,.12);
  min-height:clamp(190px,17vw,244px);
}
.evento-foto picture{position:absolute;inset:0}
.evento-foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--calma);
}
.evento:hover .evento-foto img{transform:scale(1.04)}
.evento-foto.espelhada img{transform:scaleX(-1)}
.evento:hover .evento-foto.espelhada img{transform:scaleX(-1) scale(1.04)}
.evento-corpo{grid-column:3;grid-row:1}
.evento-acoes{grid-column:4;grid-row:1}
.evento-corpo .categoria{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.26em;color:var(--luz);
  margin:0 0 12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.evento-corpo .categoria .estado{margin-left:auto}
.evento-corpo h3{font-size:clamp(19px,1.8vw,25px);color:var(--branco);margin-bottom:10px}
.evento-resumo{font-size:14.5px;color:rgba(247,242,233,.62);margin:0;max-width:52ch}
.evento-acoes{display:flex;flex-direction:column;gap:10px}
.encontros .evento .btn-linha{border-color:rgba(226,216,205,.3);color:var(--marfim);justify-content:center;white-space:nowrap}
.encontros .evento .btn-linha:hover{border-color:var(--marfim)}
.estado{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);display:inline-flex;align-items:center;gap:8px}
.ponto{width:5px;height:5px;background:var(--luz);flex:none;display:inline-block}
.ponto.formando{background:var(--taupe)}
.ponto.demanda{background:var(--terra)}

/* ------------------------------------------------------ o bloco da LuzIA */
.luzia-avatar{display:block;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;
  border:1px solid var(--linho);background:var(--marfim)}
.luzia-avatar img{width:100%;height:100%;object-fit:cover}
/* na agenda o rosto da LuzIA fica mais discreto: um véu quente por cima,
   para ele não disputar atenção com a foto do encontro */
.evento .luzia-avatar,.lista-eventos .luzia-avatar{position:relative}
.evento .luzia-avatar img,.lista-eventos .luzia-avatar img{
  filter:saturate(.82) brightness(.94);
}
.evento .luzia-avatar::after,.lista-eventos .luzia-avatar::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(42,27,22,.22);pointer-events:none;
}
.marca-vazia{display:block;width:38px;height:38px;flex:none;opacity:.5}
.marca-vazia svg{width:100%;height:100%;fill:none;stroke:var(--areia);stroke-width:1.1}

/* Uma linha só: a LuzIA à esquerda, ouvir e ler à direita, embaixo do botão.
   A base do bloco fecha junto com a base da foto do encontro. */
.luzia-bloco{
  position:relative;margin-top:0;padding:0;border:0;max-width:none;
}
.evento .luzia-bloco{
  grid-column:3 / -1;grid-row:2;align-self:end;
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(226,216,205,.22);
}
.luzia-linha{
  display:grid;grid-template-columns:1fr auto;
  gap:20px clamp(20px,2.6vw,36px);align-items:center;
}
.luzia-topo{display:flex;align-items:center;gap:14px;margin-bottom:0}
.luzia-nome{
  margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--marfim);font-weight:500;
}
.luzia-chamada{
  font-size:14px;color:rgba(247,242,233,.72);margin:4px 0 0;letter-spacing:-.01em;
}
.luzia-acoes{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.ouvir-padrao{
  display:inline-flex;align-items:center;gap:14px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--marfim);
  transition:opacity .4s var(--calma);
}
.ouvir-padrao .play{width:46px;height:46px;pointer-events:none}
.ouvir-padrao:hover .play{border-color:var(--terra)}
.ouvir-padrao.mudo{opacity:.45;cursor:default}
.ouvir-padrao.mudo .play{opacity:.5}
.luzia-ler{
  justify-content:center;border:1px solid rgba(226,216,205,.3);padding:13px 16px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--marfim);display:inline-flex;align-items:center;gap:12px;
  transition:border-color .4s var(--calma),background .4s var(--calma);
}
.luzia-ler:hover{border-color:var(--marfim);background:rgba(247,242,233,.06)}
.luzia-texto{color:rgba(247,242,233,.72);font-size:14.5px;padding-top:18px}


/* na página interna, clara e um pouco maior */
.corpo-pagina .luzia-bloco{
  border:1px solid var(--linho);background:var(--branco);max-width:none;
  padding:22px 26px;margin-top:30px;
}
/* dentro da Agenda o fundo é claro, então o bloco vira o mesmo box branco,
   de linhas retas, alinhado com o corpo e com o botão */
.lista-eventos.escura .luzia-bloco{
  border:1px solid var(--linho);background:var(--branco);
  padding:18px 22px;border-top:1px solid var(--linho);
}
.lista-eventos.escura .luzia-nome{color:var(--tinta)}
.lista-eventos.escura .luzia-chamada{color:var(--tinta-suave)}
.lista-eventos.escura .ouvir-padrao{color:var(--tinta)}
.lista-eventos.escura .luzia-ler{border-color:var(--areia);color:var(--tinta)}
.lista-eventos.escura .luzia-ler:hover{border-color:var(--tinta);background:rgba(226,216,205,.28)}
.lista-eventos.escura .luzia-texto{color:var(--tinta-suave)}
.lista-eventos.escura .play{background:var(--branco);border-color:var(--areia)}
.corpo-pagina .luzia-nome{color:var(--tinta)}
.corpo-pagina .luzia-chamada{color:var(--tinta-suave);font-size:15px}
.corpo-pagina .ouvir-padrao{color:var(--tinta)}
.corpo-pagina .luzia-ler{border-color:var(--areia);color:var(--tinta)}
.corpo-pagina .luzia-ler:hover{border-color:var(--tinta);background:rgba(226,216,205,.28)}
.corpo-pagina .luzia-texto{color:var(--tinta-suave)}

/* clara, dentro da página da Agenda */
.lista-eventos.escura{border-top-color:var(--linho)}
.lista-eventos.escura li{border-bottom-color:var(--linho)}
.lista-eventos.escura .evento-data .dia{color:var(--tinta)}
.lista-eventos.escura .evento-data .mes{color:var(--terra)}
.lista-eventos.escura .evento-corpo h3{color:var(--tinta)}
.lista-eventos.escura .evento-resumo{color:var(--tinta-suave)}
.lista-eventos.escura .evento-corpo .categoria{color:var(--cafe)}
.lista-eventos.escura .btn-linha{border-color:var(--areia);color:var(--tinta);justify-content:center}
.nota-estados{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;font-size:11px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--terra)}
.nota-estados span{display:inline-flex;align-items:center;gap:9px}

/* =================================================== a casa, jogo de fotos */
.casa{padding:var(--secao) 0}
.casa .cabeca .titulo-2{max-width:20ch}
.casa-jogo{
  display:grid;grid-template-columns:.86fr 1fr 1fr;
  gap:clamp(22px,2.6vw,44px) clamp(20px,2.4vw,40px);align-items:start;
}
.casa-foto picture{display:block;overflow:hidden;background:var(--linho)}
.casa-foto img{width:100%;object-fit:cover}
.casa-foto figcaption{
  margin-top:14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;color:var(--rotulo);
}
.casa-sino{grid-column:1;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column}
.casa-sino picture{flex:1}
.casa-sino img{height:100%;min-height:clamp(420px,44vw,720px)}
.casa-texto{grid-column:2 / span 2;grid-row:1;padding-top:clamp(4px,1.6vw,24px);max-width:52ch}
.casa-texto p{color:var(--tinta-suave);font-size:16px}
.casa-texto .btn-linha{margin-top:26px}
/* as três fotos fecham na mesma linha embaixo; o sino pode ser o mais alto */
.casa-dentro{grid-column:2;grid-row:2;align-self:end}
.casa-fora{grid-column:3;grid-row:2;align-self:end}
.casa-dentro img,.casa-fora img{aspect-ratio:4/5}

/* ============================================================ localização */
.localizacao{background:var(--cafe);color:var(--marfim);padding:clamp(38px,4.4vw,64px) 0}
.localizacao .tarja{grid-template-columns:repeat(4,1fr)}
.localizacao .tarja li{
  text-align:center;border-left:1px solid rgba(247,242,233,.18);
  padding:0 clamp(12px,1.6vw,26px);
}
.localizacao .tarja li:first-child{border-left:0}
.localizacao .icone{margin:0 auto 14px;stroke:var(--luz);width:24px;height:24px}
.localizacao .tarja li p{color:rgba(247,242,233,.9);font-size:13.5px}

/* 08/09, as duas queixas dela no PDF de ajustes: as tarjas "estavam num bom
   tamanho, foi reduzido, ficou mais difícil de ler", e a localização "ficou
   minúsculo, ruim de ler, e perdeu em harmonia de layout". O corpo volta a
   crescer, e o ícone cresce junto para a linha não desequilibrar. */
/* 11/09, ela de novo nos dois blocos: "cresça proporcionalmente o conjunto
   todo, ícones e informações, só a ponto de manter o alinhamento com a linha
   guia de títulos e parágrafos da página". A linha guia é a .chamada, que vai
   até 20px, então o corpo sobe até 17 e o ícone acompanha. */
.tarja p,.tarja-min li p,.localizacao .tarja li p{font-size:clamp(15px,1.16vw,17px);line-height:1.62}
.tarja-min .icone,.localizacao .icone{width:32px;height:32px;margin-bottom:18px}
.tarja-pilares .icone{width:30px;height:30px;margin-bottom:16px}
/* 12/09, achado pela conferência: ela pediu para crescer o CONJUNTO, e o
   rótulo tinha subido um pixel enquanto o ícone subiu seis e o texto três.
   Agora ele acompanha a mesma proporção do resto da peça. */
.tarja-pilares h3{font-size:14px;letter-spacing:.18em}
.tarja-pilares p{font-size:clamp(15px,1.16vw,17px);line-height:1.62;max-width:26ch}
/* o número que ela pediu em negrito não pode virar um bloco mais escuro: é o
   mesmo creme, só com peso. */
.localizacao .tarja li p strong{font-weight:600;color:var(--marfim)}
.localizacao{padding:clamp(46px,5vw,74px) 0}
.localizacao .tarja li{padding:0 clamp(14px,1.9vw,30px)}
.tarja h3{font-size:15px}

/* =============================================================== riquezas */
.riquezas{padding:var(--secao) 0;background:var(--gelo)}
.riquezas .lista-riquezas li{border-top-color:rgba(42,27,22,.14)}
.riquezas .numero{color:rgba(42,27,22,.12)}
.lista-riquezas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,3.6vw,62px) clamp(34px,4.4vw,80px)}
.lista-riquezas li{position:relative;padding-top:34px;border-top:1px solid var(--linho)}
.numero{
  position:absolute;top:26px;right:0;font-size:clamp(56px,6vw,88px);line-height:1;
  font-weight:600;letter-spacing:-.05em;color:var(--linho);pointer-events:none;
}
.lista-riquezas .titulo-3{max-width:16ch;margin-bottom:16px;position:relative}
.lista-riquezas p{color:var(--tinta-suave);font-size:15.5px;max-width:44ch;position:relative}

/* =============================================================== história */
.historia{padding:var(--secao) 0;background:var(--branco);border-top:1px solid var(--linho)}
/* o título alinha à esquerda, na largura inteira; a foto desce para o lado do
   box e fecha na mesma altura dele */
.historia-cabeca{margin-bottom:var(--respiro)}
.historia-cabeca .titulo-2{max-width:24ch;margin-bottom:20px}
.historia-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,3.6vw,56px);align-items:stretch}
.historia-foto{
  overflow:hidden;background:var(--linho);position:relative;
  min-height:clamp(320px,32vw,500px);
}
.historia-foto picture{position:absolute;inset:0}
.historia-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.historia-lado{display:flex;flex-direction:column}
.historia-box{flex:1;display:flex}
.historia-box .tocador{flex:1;display:flex;flex-direction:column}

/* --------------------------------------------------------- o tocador */
.tocador{border:1px solid var(--linho);background:var(--marfim);padding:clamp(22px,2.4vw,30px)}
.tocador-linha{display:flex;align-items:center;gap:clamp(16px,2vw,24px)}
/* O PLAY DA CASA. O mesmo desenho em todo lugar: história, depoimento e LuzIA. */
.play{
  width:58px;height:58px;flex:none;border:1px solid var(--areia);border-radius:50%;
  display:grid;place-items:center;position:relative;background:var(--branco);
  transition:border-color .5s var(--calma),background .5s var(--calma),transform .5s var(--calma);
}
.play.grande,.tocador.grande .play{width:74px;height:74px}
.play::after{
  content:"";position:absolute;inset:-6px;border:1px solid var(--linho);border-radius:50%;
  opacity:0;transition:opacity .5s var(--calma),transform .6s var(--calma);
}
.play:hover:not(:disabled){border-color:var(--terra)}
.play:hover:not(:disabled)::after{opacity:1;transform:scale(1.06)}
.play:disabled{opacity:.42;cursor:default}
/* a setinha do play é o amarelo da casa, em todo lugar */
.play-seta{
  width:0;height:0;margin-left:4px;
  border-left:13px solid var(--luz);border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.play.grande .play-seta{border-left-width:15px;border-top-width:9px;border-bottom-width:9px}
.play-ondas{display:none;gap:2.5px;align-items:center;height:18px}
.play-ondas b{display:block;width:2.5px;height:6px;background:var(--luz);animation:onda-som 1s ease-in-out infinite}
.play-ondas b:nth-child(2){animation-delay:.15s}
.play-ondas b:nth-child(3){animation-delay:.3s}
.play-ondas b:nth-child(4){animation-delay:.45s}
@keyframes onda-som{0%,100%{height:5px}50%{height:17px}}
.tocando .play .play-seta,.ouvir-padrao.tocando .play-seta{display:none}
.tocando .play .play-ondas,.ouvir-padrao.tocando .play-ondas{display:flex}
.tocador-meio{flex:1;min-width:0}
.tocador-quem{font-size:15px;color:var(--tinta);margin:0;letter-spacing:-.015em;font-weight:500}
.tocador-papel{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--terra);margin:6px 0 0}

/* Depoimento escrito, sem gravação: mesma voz tipográfica do tocador, sem o
   tocador. Entrou em 26/08, quando os quatro depoimentos da casa passaram a
   ser texto e o aviso de "áudio em produção" deixou de fazer sentido. */
/* 11/09, o formato que ela desenhou: a palavra Depoimento discreta em caixa
   alta, na cor terra da casa, e o nome com o estado logo abaixo. */
.dep-rotulo{
  font-size:10px;text-transform:uppercase;letter-spacing:.26em;
  color:var(--terra);margin:0 0 8px;font-weight:600;
}
.dep-quem{font-size:15px;color:var(--tinta);margin:0;letter-spacing:-.015em;font-weight:500}
.dep-papel{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--terra);margin:6px 0 0}
.onda{width:100%;height:40px;display:block;margin-top:12px;cursor:pointer}
.tocador-info{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);
}
.aviso-audio{color:var(--taupe)}
.velocidades{display:flex;gap:8px}
.velocidades button{
  border:1px solid var(--linho);padding:6px 10px;font-size:10px;letter-spacing:.14em;
  color:var(--terra);transition:.35s var(--calma);
}
.velocidades button[aria-pressed="true"]{border-color:var(--tinta);color:var(--tinta)}
.tocador .abrir-texto{margin-top:26px;width:100%}
.tocador .camada-dentro{padding-top:24px;margin-top:24px;border-top:1px solid var(--linho)}
.texto-solto{
  margin-top:24px;padding-top:24px;border-top:1px solid var(--linho);
  font-size:15.5px;line-height:1.8;color:var(--tinta-suave);
}

/* ============================================================ depoimentos */
.depoimentos{padding:var(--secao) 0}

/* rolagem lateral: entram quantos depoimentos a casa tiver */
.carrossel{position:relative}
.trilha-depoimentos{
  display:flex;gap:20px;align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--areia) transparent;
}
.trilha-depoimentos::-webkit-scrollbar{height:3px}
.trilha-depoimentos::-webkit-scrollbar-thumb{background:var(--areia)}
.trilha-depoimentos:focus-visible{outline:2px solid var(--luz);outline-offset:6px}
/* 11/09, bloco 15: "a quebra lateral do próximo depoimento fica como um ruído
   visual, não mostra mas aparece. O ideal seria deixar 3, daí a pessoa clica e
   vê os próximos 3". Então a conta é exata: três cartões e os dois vãos entre
   eles somam a largura inteira, e o quarto fica fora da vista, sem lasca. */
.trilha-depoimentos > li{
  flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.trilha-depoimentos blockquote{
  margin:0;flex:1;padding:24px 24px 26px;border:1px solid var(--linho);border-top:0;
  background:var(--branco);
  font-size:15.5px;line-height:1.68;color:var(--tinta-suave);letter-spacing:-.01em;
}
/* pelo topo: o play e o nome começam na mesma altura nos três cartões,
   mesmo quando o papel de quem fala ocupa duas linhas em um deles */
.trilha-depoimentos .tocador{border-bottom:0;background:var(--branco);min-height:150px;display:flex;align-items:flex-start}
.trilha-depoimentos li.reservado{
  border:1px dashed var(--linho);padding:34px 24px;align-items:center;text-align:center;
  justify-content:center;gap:14px;
}
.carrossel-setas{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.carrossel.sem-setas .carrossel-setas{display:none}
/* a seta pedida menor no mesmo bloco: ela conduz, não disputa com o cartão */
.seta{
  width:36px;height:36px;border:1px solid var(--areia);display:grid;place-items:center;
  transition:border-color .4s var(--calma),opacity .4s var(--calma),background .4s var(--calma);
}
.seta:hover:not(:disabled){border-color:var(--tinta);background:var(--branco)}
.seta:disabled{opacity:.3;cursor:default}
.seta i{
  width:8px;height:8px;border-left:1px solid var(--tinta);border-bottom:1px solid var(--tinta);
  transform:rotate(45deg);margin-left:3px;
}
.seta[data-lado="1"] i{transform:rotate(-135deg);margin:0 3px 0 0}
li.reservado .luzia-avatar{opacity:.5}
.reservado-nome{font-size:14px;color:var(--terra);margin:0}
.reservado-papel{font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;color:var(--taupe);margin:0}

/* ============================================== a conversa com a LuzIA */
.conversa{padding:var(--secao) 0;background:var(--gelo)}
/* a caixa da conversa ocupa a mesma coluna do título: centralizada e mais
   estreita, ela quebrava a margem que o resto da página segue */
.conversa-caixa{border:1px solid var(--linho);background:var(--branco)}
.conversa-topo{
  display:flex;align-items:center;gap:14px;padding:20px 24px;
  border-bottom:1px solid var(--linho);
}
.conversa-topo .luzia-avatar{width:52px;height:52px}
.conversa-nome{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.conversa-papel{margin:2px 0 0;font-size:10.5px;text-transform:uppercase;letter-spacing:.22em;color:var(--terra)}
.conversa-status{
  margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--terra);
  display:inline-flex;align-items:center;gap:8px;
}
.conversa-status::before{content:"";width:5px;height:5px;background:var(--luz);display:block}

.conversa-fio{
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;
  max-height:420px;overflow-y:auto;background:var(--marfim);
}
.bolha{
  max-width:76%;padding:16px 20px;font-size:15.5px;line-height:1.65;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--calma),transform .5s var(--calma);
}
.bolha.entrou{opacity:1;transform:none}
.bolha p{margin:0}
.bolha.luzia{background:var(--branco);border:1px solid var(--linho);border-left:2px solid var(--luz);color:var(--tinta)}
.bolha.voce{align-self:flex-end;background:var(--tarja);color:var(--marfim);border:1px solid var(--tarja)}
.bolha .btn-linha{margin-top:18px}
.bolha.digitando{display:flex;gap:6px;align-items:center;padding:18px 20px}
.bolha.digitando span{width:6px;height:6px;background:var(--taupe);display:block;animation:pisca 1.2s infinite}
.bolha.digitando span:nth-child(2){animation-delay:.18s}
.bolha.digitando span:nth-child(3){animation-delay:.36s}
@keyframes pisca{0%,60%,100%{opacity:.25}30%{opacity:1}}

.conversa-perguntas{
  display:flex;flex-wrap:wrap;gap:10px;padding:22px 24px;border-top:1px solid var(--linho);
}
.pergunta-chip{
  border:1px solid var(--areia);padding:12px 18px;font-size:13.5px;color:var(--tinta);
  transition:border-color .4s var(--calma),background .4s var(--calma),opacity .4s var(--calma);
  text-align:left;
}
.pergunta-chip:hover{border-color:var(--tinta);background:var(--marfim)}
.pergunta-chip.usada{opacity:.34;cursor:default;border-style:dashed}
.chip-contato{border-color:var(--tinta);background:var(--marfim);font-weight:500}
.chip-contato::before{content:"";width:6px;height:6px;background:var(--luz);display:inline-block;margin-right:10px}

/* o contato que a LuzIA conduz: nada é guardado aqui, ela só monta a mensagem */
.deixa-contato{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.deixa-contato label{
  display:flex;flex-direction:column;gap:7px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.22em;color:var(--terra);
}
.deixa-contato input{
  border:1px solid var(--linho);background:var(--marfim);padding:12px 14px;
  font-family:inherit;font-size:15px;color:var(--tinta);letter-spacing:normal;text-transform:none;
}
.deixa-contato input:focus{outline:none;border-color:var(--taupe)}
.deixa-contato .btn-linha{justify-content:center;margin-top:4px}
.deixa-contato .miudo{font-size:12px;margin:0}

/* ================================================================= rodapé */
.rodape{background:var(--tarja);color:var(--marfim);padding:clamp(48px,5.6vw,84px) 0 clamp(30px,3.4vw,48px)}
/* a assinatura fica numa linha só */
.assinatura{
  font-size:clamp(15px,1.5vw,19px);color:rgba(247,242,233,.9);margin:0;max-width:none;
  letter-spacing:-.015em;
  padding-bottom:clamp(26px,3.2vw,44px);border-bottom:1px solid rgba(226,216,205,.16);
}
@media (min-width:821px){ .assinatura{white-space:nowrap} }
/* 11/09: o nome da casa na tagline do rodapé passa a sair no amarelo da
   marca, e não em branco. Pedido dela na conferência do bloco 16. */
.assinatura strong{font-weight:600;color:var(--luz)}

.rodape-grade{
  display:grid;grid-template-columns:1.15fr .95fr .9fr;
  gap:clamp(26px,3.4vw,56px);padding:clamp(30px,3.6vw,48px) 0;
}
.rodape-bloco .rotulo{margin-bottom:18px}
.rodape .tick{background:var(--luz)}

.mapa-cartao{display:block;position:relative;overflow:hidden;border:1px solid rgba(226,216,205,.2)}
.mapa-cartao img{width:100%;height:auto;display:block;transition:transform 1.4s var(--calma)}
.mapa-cartao:hover img{transform:scale(1.03)}
.mapa-abrir{
  position:absolute;left:0;bottom:0;padding:11px 16px;
  background:rgba(247,242,233,.94);color:var(--tinta);
  font-size:10px;text-transform:uppercase;letter-spacing:.22em;
}
.rodape-endereco{font-size:13.5px;color:rgba(247,242,233,.8);margin:16px 0 0;line-height:1.6}
.mapa-credito{font-size:10.5px;color:rgba(247,242,233,.42);margin:8px 0 0;letter-spacing:.04em}

.rodape-contato li{border-bottom:1px solid rgba(226,216,205,.14)}
.rodape-contato li:last-child{border-bottom:0}
.rodape-contato a{
  display:flex;align-items:center;gap:14px;padding:13px 0;
  font-size:14px;color:rgba(247,242,233,.82);transition:color .4s var(--calma);
}
.rodape-contato a:hover{color:var(--luz)}
.ico-min{width:17px;height:17px;flex:none;fill:currentColor}
.ico-linha{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

.rodape-links{display:flex;flex-direction:column;gap:11px;font-size:14px}
.rodape-links a{
  color:rgba(247,242,233,.82);align-self:flex-start;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:.4s var(--calma);
}
.rodape-links a:hover{color:var(--marfim);border-bottom-color:var(--luz)}

.rodape-fim{
  display:flex;justify-content:space-between;gap:14px 40px;flex-wrap:wrap;
  padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(226,216,205,.16);
}
.copyright{font-size:12px;color:rgba(247,242,233,.5);margin:0;letter-spacing:.02em}
/* o link legal do rodapé: discreto, e acende no amarelo da casa ao passar */
.rodape-legal{
  color:rgba(247,242,233,.62);
  box-shadow:inset 0 -1px 0 rgba(226,216,205,.28);
  transition:color .3s var(--calma),box-shadow .3s var(--calma);
}
.rodape-legal:hover{color:var(--marfim);box-shadow:inset 0 -1px 0 var(--luz)}

/* ======================================================== páginas internas */
.fundo-pagina{
  position:fixed;inset:0;z-index:110;background:rgba(20,14,9,.4);
  opacity:0;transition:opacity .6s var(--calma);backdrop-filter:blur(2px);
}
.fundo-pagina.aberto{opacity:1}
.pagina{
  position:fixed;left:0;right:0;bottom:0;top:clamp(24px,5vh,56px);z-index:120;
  background:var(--marfim);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .66s var(--calma);
  box-shadow:0 -20px 60px rgba(20,14,9,.28);
}
.pagina.aberta{transform:none}
.pagina-barra{
  display:flex;align-items:center;gap:20px;flex:none;
  padding:0 var(--gutter);height:62px;
  border-bottom:1px solid var(--linho);background:rgba(247,242,233,.96);
}
.voltar{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--tinta);
  border:1px solid var(--areia);padding:12px 20px;
  transition:border-color .4s var(--calma),background .4s var(--calma);
}
.voltar:hover{border-color:var(--tinta);background:var(--branco)}
.seta-voltar{
  width:8px;height:8px;flex:none;border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
.pagina-titulo{font-size:11px;text-transform:uppercase;letter-spacing:.26em;color:var(--terra)}
.pagina-rolagem{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.capa{position:relative;min-height:min(56svh,520px);display:flex;align-items:flex-end;overflow:hidden}
.capa picture{position:absolute;inset:0}
.capa picture img{width:100%;height:100%;object-fit:cover}
.capa-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,7,.34),rgba(14,10,7,.72))}
.capa-texto{position:relative;padding-block:clamp(38px,5.4vh,68px)}
.capa .titulo-1{color:var(--branco);max-width:17ch}
.capa .chamada{color:rgba(247,242,233,.78);margin-top:24px}
.capa .destaque{color:var(--marfim);margin-top:22px;max-width:34ch}
.capa-limpa{min-height:0;background:var(--marfim);align-items:flex-start}
.capa-limpa .capa-texto{padding-top:clamp(38px,5.4vh,66px)}
.capa-limpa .titulo-1{color:var(--tinta)}
.capa-limpa .chamada{color:var(--tinta-suave)}
.capa-limpa .destaque{color:var(--tinta)}

.corpo-pagina{padding-block:clamp(34px,4.2vw,62px)}
.colunas{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(34px,4.6vw,80px);align-items:start}
.coluna-texto p{color:var(--tinta-suave);font-size:16px}
.coluna-texto .destaque{color:var(--tinta);margin-bottom:24px}
.ficha{border:1px solid var(--linho);padding:clamp(26px,3vw,38px);background:var(--branco)}
.ficha dl div{padding:16px 0;border-bottom:1px solid var(--linho)}
.ficha dl div:last-of-type{border-bottom:0}
.ficha dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.26em;color:var(--terra);margin-bottom:8px}
.ficha dd{margin:0;font-size:15px;line-height:1.6;color:var(--tinta)}
.ficha .btn-linha{margin-top:24px}

.galeria{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,18px);margin-top:clamp(34px,4.2vw,62px);
}
.galeria figure{overflow:hidden}
.galeria picture{display:block;overflow:hidden;background:var(--linho);height:100%}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.galeria-alta{grid-row:span 2}
.galeria-alta img{aspect-ratio:auto;height:100%;min-height:320px}
.galeria-larga{grid-column:span 2}
.galeria-larga img{aspect-ratio:16/9}

.camadas-lista{margin-top:clamp(34px,4.2vw,62px);border-top:1px solid var(--linho)}
.camadas-lista article{border-bottom:1px solid var(--linho);padding:clamp(22px,2.4vw,32px) 0}
.camadas-lista .titulo-3{margin-bottom:18px;max-width:24ch}
.camadas-lista .entrada-linha{margin-bottom:20px;max-width:44ch}
/* Os quatro programas, 24/08. Antes eram quatro linhas de texto numa lista
   sanfonada, e a página inteira ficava sem imagem. Agora cada programa é um
   cartão com a sua foto, no mesmo desenho dos cartões da agenda: canto reto,
   fio de linho, foto sangrando de borda a borda no topo. */
/* 04/09: a Cinara achou os quadros estourados, e estavam mesmo. Numa tela
   larga cada cartão passava dos 500px, com foto de 16 por 10 e tipo maior que
   o da home, e isso é quase o dobro do cartão dos caminhos, que é o desenho
   que ela aprovou. A grade agora tem teto próprio, a foto ficou mais rasa e o
   miolo respira menos, para os quatro pousarem na escala da casa. */
/* 13/09, 09h43, com as palavras dela: "essa diagramação não rola, está fora do
   padrão de 3 já estabelecido na página. Deveria estar um ao lado do outro".
   Os programas são três, e a página inteira decide por três: as capacidades, os
   formatos, as competências do Ser. A grade de dois deixava o terceiro sozinho
   embaixo, que é exatamente o que ela viu. */
.programas{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.7vw,24px);margin-top:clamp(30px,3.6vw,52px);
}
@media (max-width:900px){.programas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.programas{grid-template-columns:1fr}}
.programa{
  display:flex;flex-direction:column;
  border:1px solid var(--linho);background:var(--branco);
}
.programa-foto{
  position:relative;overflow:hidden;background:var(--linho);
  aspect-ratio:16/9;
}
.programa-foto picture{position:absolute;inset:0;display:block}
.programa-foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.02) sepia(.08);
  transition:transform 1.1s var(--calma);
}
.programa:hover .programa-foto img{transform:scale(1.035)}
.programa-corpo{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(20px,1.9vw,26px);
}
.programa-corpo .titulo-3{margin:8px 0 12px;max-width:none}
.programa-corpo .entrada-linha{margin-bottom:18px;max-width:none;font-size:14.5px}
/* a dupla de ações fica colada no rodapé do cartão, para os quatro alinharem
   mesmo com textos de tamanhos diferentes */
.programa-corpo .bloco-acoes{margin-top:auto}
.programa-corpo .abrir{max-width:280px}
.programa-corpo .camada{width:100%}
.programa-corpo .camada-dentro{padding-top:22px}

/* os dois blocos que fecham a página de Empresas acompanham a medida da
   grade dos programas, para a coluna terminar toda na mesma prumada */
.idgs{margin-top:clamp(34px,4.2vw,62px);border-top:1px solid var(--linho);padding-top:clamp(24px,2.6vw,36px);max-width:880px}
.idgs ul{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.idgs li{border:1px solid var(--areia);padding:12px 20px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}

.convite-empresa{margin-top:clamp(34px,4.2vw,60px);background:var(--branco);border:1px solid var(--linho);padding:clamp(32px,4vw,56px);max-width:880px}
.convite-empresa .titulo-3{margin-bottom:14px;max-width:20ch}
.convite-empresa p{color:var(--tinta-suave);max-width:48ch}
.convite-empresa .btn-solido{margin-top:26px}

/* Duas fotos lado a lado, do mesmo tamanho, com a altura mandada pela mais
   baixa. Serve para dar respiro numa página que era só texto. */
.dupla{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.2vw,18px);margin-top:clamp(30px,3.6vw,52px);
}
.dupla figure{overflow:hidden;background:var(--linho)}
.dupla picture{display:block;height:100%}
.dupla img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

.condicoes{margin-top:clamp(30px,3.6vw,52px);border-top:1px solid var(--linho);padding-top:clamp(24px,2.6vw,34px)}
.condicoes li{padding:15px 0 15px 26px;border-bottom:1px solid var(--linho);position:relative;font-size:15.5px;color:var(--tinta-suave)}
.condicoes li::before{content:"";position:absolute;left:0;top:27px;width:12px;height:1px;background:var(--areia)}

.filtro{margin-top:clamp(34px,4.2vw,60px);max-width:640px}
.campo{margin-bottom:22px}
.campo label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--terra);margin-bottom:10px}
.campo input,.campo textarea{
  width:100%;background:var(--branco);border:1px solid var(--linho);
  padding:15px 16px;font-family:inherit;font-size:16px;color:var(--tinta);resize:vertical;
}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--taupe)}
.consentimento{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--tinta-suave);line-height:1.6;margin-bottom:26px}
.consentimento input{margin-top:5px;accent-color:var(--cafe)}
.retorno{margin-top:20px;font-size:14px;color:var(--cafe);min-height:1.2em}

/* ================================================= página de experiência */
.exp-bloco{padding-block:clamp(24px,2.6vw,38px);border-bottom:1px solid var(--linho)}
.exp-bloco:last-child{border-bottom:0}
.exp-lista{margin-top:22px}
.exp-lista li{padding:13px 0 13px 26px;position:relative;color:var(--tinta-suave);font-size:15.5px;border-bottom:1px solid var(--linho)}
.exp-lista li:last-child{border-bottom:0}
.exp-lista li::before{content:"";position:absolute;left:0;top:25px;width:12px;height:1px;background:var(--areia)}
/* Quem conduz, com retrato. As fichas vêm do #equipe escondido no index.html,
   clonadas inteiras, e por isso o estilo mora aqui e não junto delas. */
.conduz{display:grid;gap:clamp(20px,2.4vw,30px);margin-top:22px}
.conduz-ficha{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,1.8vw,24px);
  align-items:start;
}
.conduz-retrato{
  width:clamp(72px,7vw,92px);margin:0;border-radius:50%;overflow:hidden;
  background:var(--linho);aspect-ratio:1;
}
.conduz-retrato picture{display:block;height:100%}
.conduz-retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.conduz-nome{font-size:17px;color:var(--tinta);margin-bottom:3px}
.conduz-papel{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--terra);margin-bottom:12px;
}
.conduz-bio{color:var(--tinta-suave);font-size:15.5px;line-height:1.75;max-width:56ch}
@media (max-width:520px){
  .conduz-ficha{grid-template-columns:1fr;gap:14px}
}

/* 08/09: era uma tabela. As celulas ficavam coladas por um vao de 1px sobre
   fundo linho, e a ultima linha esticava os que sobravam, deixando aquele
   bloco vazio do lado do endereco. Ela escreveu no PDF de ajustes: "em vez de
   usar essa tabela (visualmente mais pesada), vamos adaptar com mais
   atratividade, algo assim (uma dessas opcoes que ja fazem parte do padrao)",
   e o padrao que ela apontou e o cartao solto. O desenho de cada caixa ja
   existia: faltava soltar uma da outra. O auto-fill no lugar do auto-fit e o
   que impede a ultima linha de esticar e virar buraco. */
.exp-info{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,224px),1fr));
  gap:clamp(12px,1.2vw,18px);background:none;border:0;
}
.exp-info div{padding:22px 24px}
.exp-info dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;color:var(--terra);margin-bottom:10px}
.exp-info dd{margin:0;font-size:15px;line-height:1.6;color:var(--tinta)}
.exp-fecho{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}

/* =============================================================== responsivo */
@media (max-width:1040px){
  .entradas{grid-template-columns:1fr 1fr}
  .entrada:nth-child(3){grid-column:1/-1}
  .entrada:nth-child(3) figure img{aspect-ratio:16/9}
  .historia-grade{grid-template-columns:1fr;gap:30px}
  .historia-foto{min-height:0}
  .historia-foto picture{position:static}
  .historia-foto img{aspect-ratio:16/10;height:auto}
  .colunas{grid-template-columns:1fr}
  .trilha-depoimentos > li{flex-basis:calc((100% - 20px) / 2)}
  .casa-jogo{grid-template-columns:1fr 1fr}
  .casa-sino{grid-column:1 / span 2;grid-row:1}
  .casa-sino img{aspect-ratio:16/10;min-height:0}
  .casa-texto{grid-column:1 / span 2;grid-row:2;max-width:none}
  .casa-dentro{grid-column:1;grid-row:3}
  .casa-fora{grid-column:2;grid-row:3}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .rodape-mapa{grid-column:1/-1}

  .evento{grid-template-columns:100px minmax(160px,190px) 1fr;grid-template-rows:auto auto auto}
  .evento-data{grid-column:1;grid-row:1}
  .evento-foto{grid-column:2;grid-row:1 / span 2}
  .evento-corpo{grid-column:3;grid-row:1}
  .evento-acoes{grid-column:3;grid-row:2;flex-direction:row;justify-self:start;margin-top:16px}
  .evento .luzia-bloco{grid-column:1/-1;grid-row:3;margin-top:20px}
}

@media (max-width:820px){
  :root{--topo-altura:66px}
  /* 08/09, pedido dela no PDF de ajustes: "ao clicar nos 3 pontinhos, surge
     tela grande com os 3 itens do menu. Parece desnecessário e acaba
     dissolvendo o foco no ambiente. Talvez seja melhor manter as 3 palavrinhas
     visíveis e posicionadas antes do ícone do whats e do som". Foi isso: as
     três palavras ficam na barra, antes dos ícones, e a folha de tela inteira
     saiu junto com os risquinhos. */
  .menu{
    position:static;height:auto;background:none;flex-direction:row;
    transform:none;gap:clamp(9px,2.8vw,16px);margin:0 auto 0 clamp(6px,2vw,14px);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:13.5px;white-space:nowrap;padding-block:8px}
  /* as três palavras e os dois ícones dividem uma barra de 375px, então cada
     folga aqui é o que decide se "Para Empresas" aparece inteiro: a barra
     ganha as bordas de volta e o cabeçalho encosta mais na lateral. */
  .topo-acoes{gap:10px}
  .topo{padding-inline:14px;gap:8px}

  /* 08/09, pergunta dela em 04/09 vendo a tela do sino: "no seu cel a sombra
     escura tb fica marcada assim?". Ficava. O borrão que garante a leitura é
     uma elipse presa à coluna do texto, e no celular a coluna é quase a tela
     inteira: a elipse acabava dentro da foto e desenhava uma banda de borda
     dura atravessando a casa. Aqui ela passa a terminar fora da tela, então o
     escuro morre no nada e a foto volta a respirar. O texto continua com o
     mesmo contraste. */
  .chegada-centro::before{
    width:min(1120px,230vw);height:190%;
    background:radial-gradient(farthest-side,
      rgba(9,6,4,.46), rgba(9,6,4,.34) 34%, rgba(9,6,4,.18) 58%,
      rgba(9,6,4,.07) 76%, transparent 100%);
  }
  @media (max-width:400px){
    .menu a{font-size:12.5px;letter-spacing:-.01em}
    .menu{gap:9px;margin-left:6px}
  }
  /* o grupo do WhatsApp e do som encosta à direita, depois das palavras */
  .topo-acoes{margin-left:0;flex-shrink:0}
  .risquinhos{display:none}

  /* no celular ela continua grande e vazando, só que mais discreta: a tela é
     estreita e o texto passa perto */
  .digital{
    width:min(96vw,440px);right:-26vw;top:auto;bottom:-52px;opacity:.4;
    transform:rotate(-15deg);
  }

  .tarja{grid-template-columns:1fr 1fr;gap:30px 0}
  .tarja li{border-left:0;padding:0 20px 0 0}
  .tarja li:nth-child(odd){padding-left:0}
  .localizacao .tarja{grid-template-columns:1fr 1fr}
  .tarja-pilares li,.localizacao .tarja li{border-left:0;padding:0 8px;text-align:center}
  .tarja-pilares li:last-child{grid-column:1/-1}
  .tarja-pilares p{max-width:32ch}

  .programas{grid-template-columns:1fr}
  .programa-foto{aspect-ratio:16/9}
  .dupla{grid-template-columns:1fr}
  .dupla img{aspect-ratio:16/10}

  .entradas{grid-template-columns:1fr;gap:44px}
  .entradas::before{display:none}
  .entrada figure img,.entrada:nth-child(3) figure img{aspect-ratio:4/3}

  .lista-riquezas{grid-template-columns:1fr}
  .trilha-depoimentos > li{flex-basis:100%}
  .galeria{grid-template-columns:1fr}
  .galeria-grande{grid-row:auto}
  .galeria-alta,.galeria-larga{grid-row:auto;grid-column:auto}
  .rodape-grade{grid-template-columns:1fr;gap:34px}
  .rodape-mapa{grid-column:auto}

  .evento{grid-template-columns:84px 1fr;grid-template-rows:auto auto auto auto;gap:18px}
  .evento-data{grid-column:1;grid-row:1}
  .evento-corpo{grid-column:2;grid-row:1}
  .evento-foto{grid-column:1/-1;grid-row:2}
  .evento-acoes{grid-column:1/-1;grid-row:3;flex-direction:row;margin-top:0}
  .evento .luzia-bloco{grid-column:1/-1;grid-row:4;margin-top:0}
  .evento-foto{min-height:0;position:relative}
  .evento-foto picture{position:static}
  .evento-foto img{aspect-ratio:16/9;height:auto}
  .evento-data .dia{font-size:27px}
  .luzia-linha{grid-template-columns:1fr}
  .luzia-acoes{justify-content:flex-start}

  /* No celular a barra do navegador some quando a pessoa rola, e a tela
     cresce no meio do caminho. Medindo a foto pela tela CHEIA (lvh), ela
     continua cobrindo depois que a barra sai: o que sobra é recorte da
     própria foto, nunca um vazio. Quem não conhece lvh fica no svh. */
  .parallax{--alto:100svh}
  /* 02/09: a faixa vazia que a Cinara viu em 24/08. O palco tinha 1,7 tela de
     altura e o cartão terminava perto da primeira: sobravam quase 80% de uma
     tela de foto sem nada em cima, e no celular isso lê como buraco, não como
     respiro. O palco agora acompanha o cartão, com uma sobra curta embaixo. */
  .parallax-conteudo{
    min-height:calc(var(--alto) * 1.06);
    padding-top:clamp(120px,20svh,200px);
    padding-bottom:clamp(40px,7svh,72px);
  }

  .bloco-abertura{padding-block:20px}
  .bolha{max-width:88%}
  .pagina{top:0}
  .pagina-barra{height:56px}
}

@supports (height:100lvh){
  @media (max-width:820px){
    .parallax{--alto:100lvh}
  }
}

@media (max-width:520px){
  body{font-size:16px}
  .tocador-linha{gap:14px}
  .play,.tocador.grande .play{width:56px;height:56px}
  .luzia-acoes{flex-direction:column}
  .acoes-abertura a{flex:1 1 100%;justify-content:center}
  .entrada-corpo{margin:-40px 0 0}
}

/* =============================================================== movimento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .camada{transition:none}
  .desliza{opacity:1;transform:none}
  /* sem movimento não há reverberação: os anéis simplesmente não existem,
     em vez de piscar de uma vez só */
  .sino::before,.sino::after{display:none}
  .chegada.tocado .sino .sino-onda,
  .chegada.tocado .sino svg,
  .chegada.tocado .sino .sino-corpo{animation:none}
  /* sem movimento a foto volta a ser um bloco normal, e o picture volta a
     ocupar o fluxo junto com ela */
  .parallax-foto{position:relative;height:auto}
  .parallax-foto picture{position:static}
  .parallax-foto img{height:auto}
  .parallax-conteudo{margin-top:0;min-height:0;padding-block:var(--secao)}
  figure.desliza picture{clip-path:none}
}

/* =========================================================================
   AS PÁGINAS INTERNAS NO MESMO NÍVEL DA HOME
   -------------------------------------------------------------------------
   Feito em 02/09/2026. A Cinara disse que as páginas internas não estavam
   no nível da home, e estava certa: elas tinham metade do respiro, nenhum
   box de vidro, nenhuma revelação ao rolar e linha de texto larga demais.
   Este bloco vai no fim de propósito, para corrigir sem mexer no que já
   estava aprovado acima.
   ========================================================================= */

/* 1 · a capa da página interna volta a ter presença */
.capa{ min-height:min(68svh,620px); }
/* 03/09: a foto desta capa vinha por uma variável escrita no atributo style,
   que a CSP bloqueia. Agora ela entra como <picture>, como nas outras capas,
   e o escuro fica aqui: mesmo que a foto demore ou falte, o fundo já é escuro
   e o texto claro continua legível. */
.capa.capa-foto{
  position:relative;
  background:#1A1712;
  color:#F7F2E9;
  display:flex; align-items:flex-end; padding-block:clamp(46px,6vw,86px);
}
.capa.capa-foto .capa-veu{
  background:linear-gradient(180deg, rgba(26,23,18,.62) 0%, rgba(26,23,18,.30) 46%, rgba(26,23,18,.78) 100%);
}
/* a capa sem foto não herda a altura da capa com foto */
.capa.capa-limpa{ min-height:0; background:var(--marfim); align-items:flex-start; }
.capa.capa-foto .titulo-1,
.capa.capa-foto .chamada,
.capa.capa-foto .rotulo{ color:#F7F2E9; }
.capa.capa-foto .chamada{ color:rgba(247,242,233,.86); }
.capa.capa-foto .rotulo{ color:var(--luz); }

/* 2 · o respiro passa a ser o mesmo das seções da home */
.corpo-pagina{ padding-block:var(--secao); }
.exp-bloco{ padding-block:clamp(38px,4.4vw,64px); }
.corpo-pagina > * + *{ margin-top:clamp(28px,3.4vw,52px); }

/* 3 · a barra de voltar respeita a mesma caixa do conteúdo */
.pagina-barra{
  max-width:var(--largura); margin-inline:auto; width:100%;
}

/* 4 · medida de linha: nada passa de 60 caracteres, como na home */
.exp-bloco p, .exp-lista li, .camada-dentro p, .condicoes li,
.corpo-pagina .chamada, .corpo-pagina dd{ max-width:60ch; }
.exp-bloco > p:only-child{ max-width:64ch; }
.filtro{ max-width:none; }

/* 5 · o box de vidro fosco da home, agora também aqui dentro */
.ficha, .programa, .convite-empresa, .exp-info > div{
  position:relative;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-left:2px solid var(--luz);
  box-shadow:0 18px 48px -28px rgba(26,23,18,.34), inset 0 0 0 1px rgba(255,255,255,.46);
  border-radius:2px;
}
.ficha::after, .programa::after, .convite-empresa::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(70% 60% at 0% 0%, rgba(240,200,0,.10), transparent 60%),
             radial-gradient(70% 60% at 100% 100%, rgba(240,200,0,.07), transparent 60%);
}
.ficha > *, .programa > *, .convite-empresa > *{ position:relative; z-index:1; }

/* 6 · o degrau tipográfico que faltava depois da capa */
.corpo-pagina > section > .rotulo{ margin-bottom:6px; }
.corpo-pagina .titulo-3{ font-size:clamp(21px,2.5vw,29px); }
/* dentro do cartão de programa o degrau é outro: ali o título divide espaço
   com a foto, a linha de apoio e as duas ações, e a escala da página inteira
   deixava o quadro estourado. Escrito com o .corpo-pagina na frente porque
   precisa ganhar da regra de cima, que vem depois no arquivo. */
.corpo-pagina .programa-corpo .titulo-3{ font-size:clamp(18px,1.6vw,22px); }
.corpo-pagina .programa-corpo .entrada-linha{ font-size:14.5px; }

/* 7 · nada de palavra sozinha no que vem do dados.js */
.corpo-pagina p, .corpo-pagina li, .corpo-pagina dd,
.exp-bloco p, .exp-lista li{ text-wrap:pretty; }
.corpo-pagina .rotulo, .corpo-pagina .titulo-3, .capa .chamada{ text-wrap:balance; }

@media (max-width:820px){
  .corpo-pagina .titulo-3{ max-width:none; }
  .entrada-linha{ max-width:none; }
  .capa{ min-height:min(58svh,520px); }
}

/* a medida de leitura vale para todo parágrafo da página interna, não só
   para os blocos nomeados. Sem isto a linha passava de 120 caracteres. */
.corpo-pagina p, .corpo-pagina li{ max-width:62ch; }
/* 04/09: a medida de 62ch existe para o texto respirar, e estava sendo aplicada
   também nos itens que são LAYOUT e não parágrafo. O card de cada encontro da
   agenda é um <li>, e ficava preso em 664px dentro de uma lista de 1064, com a
   coluna do texto espremida em 102px. Era isso que ela via como "desce e fica
   comprimido, perdeu a formatação", e só aparecia no monitor grande, porque em
   tela menor a lista já cabia nos 62ch. */
.corpo-pagina .lista-eventos > li,
.corpo-pagina .camadas-lista > li,
.corpo-pagina .exp-info > li,
.corpo-pagina .galeria > li{ max-width:none; }
.corpo-pagina .ficha p, .corpo-pagina .programa p{ max-width:58ch; }


/* =========================================================================
   PARÁGRAFO ESCRITO NA SALA DE EDIÇÃO
   Quando a Cinara aperta Enter duas vezes dentro de um campo que já é um
   <p>, o texto novo entra como <span class="par">, e não como <p> dentro de
   <p>, que seria marcação inválida. O respiro é o mesmo do parágrafo da casa.
   ========================================================================= */
.par{display:block}
.par + .par{margin-top:1.15em}


/* =========================================================================
   AS BOLINHAS DAS PÁGINAS DE INSCRIÇÃO
   Pedido dela aos 38:47 da gravação de 02/09: as secundárias ficaram só texto,
   "sopa aguada". Entra uma imagem pequena e redonda antes de cada bloco, com o
   texto deslocado para o lado. No celular ela sobe para cima do rótulo, porque
   ali largura é o que não sobra.
   ========================================================================= */
/* 11/09/2026, segunda volta. A bolinha de 80 pontos era um selo, e selo não
   é imagem: ela apontou de novo que as internas ficaram "sem vida, sem graça",
   e um carimbo redondo ao lado do texto não tira página nenhuma da sopa.

   Agora a foto tem corpo: ocupa a coluna inteira ao lado do texto, em retrato,
   e TROCA DE LADO a cada bloco. É a alternância que dá o zigue-zague de
   revista, e é ela que faz o olho descer a página com vontade. No celular a
   foto sobe inteira, acima do texto, porque ali coluna dupla é ilegível. */
/* 11/09: a foto tinha altura fixa de 4/5 e o texto tinha a altura que tinha.
   No bloco "o que você poderá levar", três linhas curtas ficavam ao lado de
   uma foto de 451px de pé, e foi isso que ela viu como "ficou estranho".
   Agora a foto tem a altura do texto do bloco, com um mínimo para não virar
   tarja, e as duas colunas terminam juntas. */
.exp-bloco.ilustrado{
  display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,48px);align-items:stretch;
}
.exp-bloco.ilustrado .bolinha{aspect-ratio:auto;min-height:clamp(260px,30vw,340px)}
/* A foto preenche a caixa inteira, e é preciso ser por posição absoluta: a
   altura da coluna vem do texto ao lado, então `height:100%` na foto cai num
   cálculo circular e o navegador devolve a proporção natural da imagem. Era
   isso que deixava um retângulo cinza embaixo da foto no bloco 05. */
.exp-bloco.ilustrado .bolinha picture{position:absolute;inset:0;display:block}
.exp-bloco.ilustrado .bolinha img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exp-bloco.ilustrado:nth-of-type(even){grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr)}
.exp-bloco.ilustrado:nth-of-type(even) .bolinha{order:2}

.bolinha{
  display:block;width:100%;aspect-ratio:4/5;
  overflow:hidden;background:var(--gelo);border:0;border-radius:2px;
  position:relative;
}
.bolinha img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);
}
/* o fio de luz no pé da foto, o mesmo gesto do resto da casa */
.bolinha::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--luz),rgba(240,203,0,.14));
}
.exp-corpo{min-width:0}

@media (max-width:820px){
  .exp-bloco.ilustrado,
  .exp-bloco.ilustrado:nth-of-type(even){grid-template-columns:minmax(0,1fr)}
  .exp-bloco.ilustrado:nth-of-type(even) .bolinha{order:0}
  .bolinha{aspect-ratio:16/10;margin-bottom:20px}
  /* no celular a coluna é uma só, então a foto volta a ter proporção própria:
     altura de 100% numa linha sozinha não tem em que se apoiar */
  .exp-bloco.ilustrado .bolinha{aspect-ratio:16/10;height:auto;min-height:0}
  .exp-bloco.ilustrado .bolinha picture,
  .exp-bloco.ilustrado .bolinha img{position:absolute;inset:0}
}

/* =========================================================================
   A AGENDA NO MONITOR GRANDE
   Ela apontou aos 36:14 que "ver a agenda inteira" abre certo no topo e, ao
   descer, comprime e perde a formatação. Acontece só na tela larga: a coluna
   do corpo era 1fr e esticava sem teto, enquanto a foto e a data ficavam
   presas no tamanho antigo. A lista passa a ter a mesma caixa do resto.
   ========================================================================= */
@media (min-width:1500px){
  /* 04/09, segunda volta: a primeira tentativa redefiniu as colunas e a do
     corpo ficou com zero pixel, ou seja, piorou. A causa do aperto dela era
     só a lista esticando sem teto na tela larga. Então o conserto é um teto,
     e as colunas continuam as mesmas do resto do site. */
  .lista-eventos{max-width:1180px;margin-inline:auto}
  .lista-eventos .evento-resumo{max-width:56ch}
}


/* =========================================================================
   AS PALAVRAS DA CASA
   Pedido dela em 03 e em 17 de agosto, duas vezes com a mesma frase. São
   marcação, não frase: entram soltas sob o título, separadas por um traço
   fino, e sem competir com a chamada.
   ========================================================================= */
.palavras-casa{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 0;
}
.palavras-casa li{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,242,233,.72);padding:0 16px;
  border-left:1px solid rgba(247,242,233,.26);
}
.palavras-casa li:first-child{padding-left:0;border-left:0}
@media (max-width:640px){
  .palavras-casa li{font-size:10.5px;padding:0 10px;letter-spacing:.14em}
}


/* 08/09: a conversa com a LuzIA passou a viver dentro da página da Casa, a
   pedido dela. Aqui ela deixa de se comportar como seção de página inteira:
   sem fundo próprio, sem borda de topo e com o respiro da própria página. */
.conversa.na-pagina{padding:0;margin-top:clamp(32px,4vw,64px);background:none;border-top:0}
.conversa.na-pagina .cabeca{margin-bottom:clamp(20px,2.4vw,32px)}

/* ============================================ Self Mentoring, Para Empresas
   08/09: o miolo que ela mandou no PDF de 06/09. Duas coisas ela pediu junto
   com o texto, e as duas moram aqui: sair da "tabela visualmente mais pesada"
   e ficar "menos pastel/fria". Por isso os blocos vêm em cartão, com a terra
   suave da casa marcando a entrada de cada um, e não em linhas de tabela. */
.entrada-empresas{
  max-width:62ch;margin:0 0 var(--respiro);padding-left:clamp(14px,1.6vw,22px);
  border-left:2px solid var(--terra);
}
.sm-bloco{margin:var(--secao) 0 0}
.sm-bloco .cabeca{margin-bottom:var(--respiro)}
/* 13/09, 09h51 e 09h53, dois pedidos que são o mesmo defeito: a medida de 18ch
   picava os títulos desta página. "Ela não precisa fazer quebra numa frase tão
   pequena" era o Sem jargão e sem palco, que agora cabe numa linha. E "essa
   quebra não rola, deveria ser apenas 2 linhas: ...treinável, e já..." era a
   régua internacional, que em 32ch quebra na vírgula, exatamente onde ela
   mostrou. O balance já vinha do h2 da casa. */
.sm-bloco .cabeca .titulo-2{max-width:32ch}
/* 13/09, 09h46, com as palavras dela: "por que ela quis mudar padrão de fonte
   aqui? palestra, imersão e jornada. Poderia ter usado a fonte padrão em CA
   pra diferenciar, mas não mudar desnecessariamente". Então é a fonte do
   corpo, em caixa alta, que é a solução que ela mesma deu. */
.sm-bloco .titulo-4{
  font-family:var(--sans);font-weight:600;font-size:clamp(13px,1vw,14px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.3;
  margin:0 0 12px;color:var(--tinta);
}

.sm-capacidades,.sm-lista,.sm-formatos ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,22px)}
.sm-capacidades{grid-template-columns:repeat(3,1fr)}
.sm-capacidades li{
  background:var(--branco);border:1px solid var(--linho);border-top:3px solid var(--terra);
  border-radius:2px;padding:clamp(20px,2.2vw,30px);
}
.sm-capacidades .titulo-3{font-size:clamp(19px,1.7vw,23px);margin:6px 0 12px}
.sm-capacidades p:last-child{font-size:15px;line-height:1.68;color:var(--tinta-suave);margin:0}

/* 13/09, 09h48, com as palavras dela: "senti falta de um temperinho aqui. Ex
   um ícone discreto para complementar cada box e ficar menos frio". Um glifo
   de traço fino por capacidade, na cor da casa, acima do rótulo. É máscara e
   não imagem, para a cor sair do token e acompanhar a página. */
.sm-capacidades li::before{
  content:"";display:block;width:26px;height:26px;margin:0 0 14px;
  background-color:var(--terra);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:left center;mask-position:left center;
}
/* perceber e clarear: a íris que abre */
.sm-capacidades li:nth-child(1)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}
/* cuidar e restaurar: a curva que recolhe */
.sm-capacidades li:nth-child(2)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.6 3.4 5.4 6.2 5.4 8.6a5.4 5.4 0 0 1-10.8 0c0-2.4 1.8-5.2 5.4-8.6Z'/%3E%3Cpath d='M9.4 12.6a2.7 2.7 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.6 3.4 5.4 6.2 5.4 8.6a5.4 5.4 0 0 1-10.8 0c0-2.4 1.8-5.2 5.4-8.6Z'/%3E%3Cpath d='M9.4 12.6a2.7 2.7 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
}
/* conduzir-se no mundo: a agulha da bússola */
.sm-capacidades li:nth-child(3)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.4 8.6-2 4.8-4.8 2 2-4.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.4 8.6-2 4.8-4.8 2 2-4.8Z'/%3E%3C/svg%3E");
}
/* em "como acontece" são dois boxes, e o par tem os seus próprios glifos */
.sm-capacidades-duas li:nth-child(1)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.2' cy='9' r='2.6'/%3E%3Ccircle cx='15.8' cy='9' r='2.6'/%3E%3Cpath d='M4 19c0-2.4 1.9-4.2 4.2-4.2M20 19c0-2.4-1.9-4.2-4.2-4.2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.2' cy='9' r='2.6'/%3E%3Ccircle cx='15.8' cy='9' r='2.6'/%3E%3Cpath d='M4 19c0-2.4 1.9-4.2 4.2-4.2M20 19c0-2.4-1.9-4.2-4.2-4.2'/%3E%3C/svg%3E");
}
.sm-capacidades-duas li:nth-child(2)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20H4Z'/%3E%3Cpath d='M9.6 20v-5.4h4.8V20'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20H4Z'/%3E%3Cpath d='M9.6 20v-5.4h4.8V20'/%3E%3C/svg%3E");
}

.sm-fecho{
  max-width:70ch;margin:clamp(24px,2.6vw,36px) 0 0;font-size:clamp(16px,1.15vw,17.5px);
  line-height:1.72;color:var(--tinta-suave);
}

.sm-ser{
  margin-top:var(--respiro);background:var(--gelo);border-radius:2px;
  padding:clamp(24px,2.8vw,40px);
}
.sm-ser .titulo-3{margin:0 0 14px}
.sm-ser p{max-width:70ch;margin:0 0 12px;color:var(--tinta-suave);line-height:1.7}
.sm-ser p:last-child{margin-bottom:0;color:var(--cafe)}

.sm-territorios,.sm-formatos{margin-top:var(--secao)}
.sm-territorios-topo,.sm-formatos-topo{max-width:70ch;margin:12px 0 var(--respiro);color:var(--tinta-suave);line-height:1.7}
.sm-lista{grid-template-columns:repeat(3,1fr)}
.sm-lista li{
  background:var(--branco);border:1px solid var(--linho);border-radius:2px;
  padding:clamp(20px,2.2vw,30px);
}
.sm-lista p{margin:0 0 10px;font-size:15px;line-height:1.68;color:var(--tinta-suave)}
.sm-lista .miudo{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--linho);color:var(--rotulo)}

.sm-formatos ul{grid-template-columns:repeat(3,1fr)}
.sm-formatos li{border-top:1px solid var(--areia);padding-top:18px}
.sm-formatos li p{margin:0;font-size:15px;line-height:1.68;color:var(--tinta-suave)}
.sm-formatos > .miudo{margin-top:var(--respiro)}

.sm-arremate{
  margin-top:var(--secao);background:var(--cafe);color:var(--marfim);
  border-radius:2px;padding:clamp(28px,3.2vw,48px);
}
.sm-arremate .titulo-3{color:var(--marfim);margin:0 0 16px;max-width:22ch}
.sm-arremate p{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.85;color:rgba(247,242,233,.92)}

@media (max-width:900px){
  .sm-capacidades,.sm-lista,.sm-formatos ul{grid-template-columns:1fr}
}

/* ====================================== parceiros, menos pastel e mais quente
   09/09, pedido dela no PDF de ajustes: "mude campos, cor de fundo, elementos
   sinalizadores do olhar / atenção. Rever também em: página para parceiros,
   secundárias eventos, e para empresas (tentando fazer ficar menos pastel /
   fria)". Empresas e a secundária do encontro já receberam o cartão e a cor
   quente. Aqui a página de parceiros recebe a mesma linguagem: a abertura
   ganha a barra de terra suave, as condições deixam de ser lista cinza e
   passam a ter o traço quente marcando cada uma, e o formulário sai do vazio
   e vira cartão, que é o que tira a sensação de frio. */
.corpo-pagina > .destaque.limite{
  padding-left:clamp(14px,1.6vw,22px);
  border-left:2px solid var(--terra);
}
.condicoes li::before{
  top:26px;width:16px;height:2px;background:var(--terra);
}
.condicoes li{color:var(--tinta)}
.filtro{
  background:var(--branco);
  border:1px solid var(--linho);
  border-top:3px solid var(--terra);
  border-radius:2px;
  padding:clamp(24px,2.8vw,40px);
}
.filtro .rotulo{margin-top:0}
.filtro .campo input,.filtro .campo textarea{background:var(--marfim)}
.filtro .btn-solido{margin-top:6px}

/* =========================================================================
   A bilheteria · o bloco de compra que serve a todos os encontros
   Mesmo sistema da casa: marfim, cantos retos, amarelo só como fio.
   ========================================================================= */
.bilheteria{display:grid; gap:clamp(24px,3.4vw,38px)}
.bi-passo{border-top:1px solid var(--linho); padding-top:clamp(20px,2.6vw,28px)}
.bi-rotulo{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe); margin:0 0 14px;
}
.bi-valor{font-size:clamp(20px,3vw,26px); color:var(--tinta); margin:0 0 20px; font-weight:600}
.bi-titulo{font-size:clamp(19px,2.6vw,24px); margin:0 0 10px; font-weight:600; letter-spacing:-.02em}
.bi-fina{font-size:15px; color:var(--tinta-suave); margin:0}

.bi-formas{
  display:grid; gap:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.bi-forma{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.bi-qr{width:min(210px,100%); background:#fff; padding:10px; line-height:0}
.bi-qr svg{width:100%; height:auto; display:block}
.bi-forma .btn-solido,.bi-forma .btn-linha{margin:0}

.bi-cupom{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:clamp(22px,3vw,30px)}
.bi-campo{display:flex; flex-direction:column; gap:8px; flex:1 1 240px}
.bi-campo span{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe);
}
.bi-campo input{
  padding:14px 16px; font-family:inherit; font-size:16.5px; color:var(--tinta);
  background:var(--marfim); border:1px solid var(--linho); border-radius:0;
}
.bi-campo input:focus{outline:none; border-color:var(--marrom); background:#fff}
.bi-aviso{margin:12px 0 0; font-size:15px; color:var(--terra); min-height:1.3em}
.bi-aviso.vale{color:var(--cafe)}
.bi-aviso:empty{min-height:0}

.bi-inscricao{display:grid; gap:16px; margin-top:clamp(20px,2.6vw,28px); max-width:520px}
.bi-inscricao input[type="text"],.bi-inscricao input[type="tel"],.bi-inscricao input[type="email"]{
  width:100%; padding:14px 16px; font-family:inherit; font-size:16.5px; color:var(--tinta);
  background:var(--marfim); border:1px solid var(--linho); border-radius:0;
}
.bi-inscricao input:focus{outline:none; border-color:var(--marrom); background:#fff}
.bi-arquivo{display:block}
.bi-arquivo span{
  display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:8px;
}
.bi-arquivo input{
  width:100%; padding:14px; font-family:inherit; font-size:15px;
  background:var(--marfim); border:1px dashed var(--areia);
}
/* o campo isca: gente não vê, robô preenche */
.bi-isca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.bi-aceite{display:flex; gap:12px; align-items:flex-start}
.bi-aceite input{margin-top:5px; width:18px; height:18px; accent-color:var(--marrom); flex-shrink:0}
.bi-aceite span{font-size:14.5px; color:var(--tinta-suave)}
.bi-inscricao .btn-solido{justify-self:start}
.bi-inscricao .btn-solido:disabled{opacity:.5; cursor:progress}

/* =======================================================================
   A CHAMADA DOS ENCONTROS NA HOME
   Decisão da Cinara em 09/09/2026: a home anuncia, a Agenda inscreve. Sem
   foto, sem resumo e sem botão de comprar aqui, para não existirem dois
   caminhos de inscrição disputando a mesma pessoa.
   ======================================================================= */
.chamada-evento{
  display:grid;
  grid-template-columns:92px 1fr 28px;
  gap:clamp(16px,2.4vw,30px);
  align-items:center;
  padding:clamp(20px,2.4vw,28px) 0;
  text-decoration:none;
  color:inherit;
  transition:opacity .25s ease;
}
.chamada-evento:hover{opacity:.72}
.chamada-evento:hover .chamada-seta::after{transform:translateX(5px)}

/* 11/09: com o dia da semana junto ("SET, SÁB.") a linha ficou mais larga, e
   sem largura mínima ela quebrava em duas no celular. */
.chamada-data{line-height:1;min-width:4.6em}
.chamada-data .dia{
  display:block;font-size:clamp(26px,3vw,34px);font-weight:600;
  letter-spacing:-.04em;color:var(--branco);
}
.chamada-data .mes{
  display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--areia);margin-top:8px;white-space:nowrap;
}

.chamada-corpo{display:block;min-width:0}
.chamada-corpo .categoria{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--areia);margin-bottom:9px;
}
.chamada-titulo{
  display:block;font-size:clamp(17px,2.1vw,21px);
  letter-spacing:-.015em;color:var(--branco);line-height:1.3;
  text-wrap:balance;
}

.chamada-seta{display:block;width:28px;height:16px;position:relative}
.chamada-seta::after{
  content:"";position:absolute;top:5px;right:2px;
  width:9px;height:9px;border-top:1px solid var(--areia);
  border-right:1px solid var(--areia);transform:rotate(45deg);
  transition:transform .25s ease;
}

@media (max-width:640px){
  .chamada-evento{grid-template-columns:64px 1fr 20px;gap:16px}
  .chamada-data .dia{font-size:24px}
}

.encontros-chamada{
  margin:14px 0 0;max-width:52ch;
  color:var(--linho);font-size:15.5px;line-height:1.6;
}

/* ===================================================================
   COMEÇAR PELO SER, AGORA NA ABERTURA · 11/09
   Ele subiu para o começo da página de empresas a pedido dela. Como
   agora é a primeira coisa depois da entrada, ganha um fio de luz em
   cima, em vez do fundo gelo que servia quando ele era um bloco no
   meio do caminho. Assim ele abre a leitura sem virar caixa.
   =================================================================== */
/* 13/09, 09h39, com as palavras dela: "linha amarela perdida antes do texto
   começar". Era esta: um fio amarelo atravessando a largura toda, sem nada a
   que pertencer. Virou a marca curta que a casa já usa nos rótulos, do
   tamanho do tick, encostada no título. */
.sm-ser.sm-ser-abre{
  margin-top:var(--respiro);background:transparent;padding:0;
  border-top:0;padding-top:clamp(22px,2.4vw,32px);position:relative;
}
.sm-ser.sm-ser-abre::before{
  content:"";position:absolute;left:0;top:0;
  width:44px;height:2px;background:var(--luz);
}
.sm-ser.sm-ser-abre .titulo-3{margin:0 0 16px}
.sm-ser.sm-ser-abre p{max-width:66ch}

/* o período do ciclo, logo abaixo do resumo: ela pediu no bloco 11 que o
   Medit_Ação dissesse de quando a quando vai, e não só o dia da semana */
.evento-periodo{
  margin:8px 0 0;font-size:12.5px;letter-spacing:.04em;
  color:var(--terra);font-weight:500;
}
.lista-eventos.escura .evento-periodo{color:var(--cafe)}

/* ===================================================================
   O TEXTO DA CASA QUE VOLTA DEPOIS DA GALERIA · 11/09
   As imagens entram no meio da leitura de propósito, e o que sobrou do
   texto continua embaixo delas, na mesma medida de leitura da coluna,
   para o olho reencontrar a linha onde parou.
   =================================================================== */
.casa-continua{
  max-width:64ch;margin:clamp(26px,3vw,44px) 0 0;
  color:var(--tinta-suave);line-height:1.72;font-size:15.5px;
}
.casa-continua .par{display:block}
.casa-continua .par + .par{margin-top:1.15em}

/* ===================================================================
   OS TRÊS ATALHOS DA MENTE · 11/09, bloco 08 da conferência
   Eram três gavetas que abriam dentro da home. Viraram três links para
   as páginas onde cada coisa mora de verdade. Cada um leva o nome e uma
   linha só de contexto, porque o resto está do outro lado do clique.
   =================================================================== */
.atalhos-mente{list-style:none;margin:4px 0 24px;padding:0;display:grid;gap:18px}
.atalhos-mente li{display:block}
.atalhos-mente a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:16.5px;font-weight:500;letter-spacing:-.015em;
  color:var(--terra);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(182,116,96,.4);
  transition:color .4s var(--calma),text-decoration-color .4s var(--calma);
}
.atalhos-mente a::after{
  content:"";width:7px;height:7px;flex:none;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);transition:transform .4s var(--calma);
}
.atalhos-mente a:hover{color:var(--cafe);text-decoration-color:currentColor}
.atalhos-mente a:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.atalhos-mente span{
  display:block;margin-top:5px;max-width:52ch;
  font-size:14.5px;line-height:1.62;color:var(--tinta-suave);
}
/* a segunda linha é a letra miúda de cada caminho: formato, pré-requisito,
   horário. Ela existe porque a Cinara escreveu esses detalhes na Sala, e
   jogar fora o que ela escreveu para deixar o bloco mais limpo não é uma
   troca que a gente faz. */
.atalhos-mente .atalho-fina{
  margin-top:3px;font-size:13px;color:var(--rotulo);
}
/* o atalho da Essência usa a classe do WhatsApp só para pegar o número
   certo, e não deve herdar o desenho de botão que ela tem nos blocos */
.atalhos-mente .atalho-zap{background:none;border:0;padding:0}

/* =========================================================================
   AS PÁGINAS INTERNAS, COM RITMO · 11/09/2026

   O pedido dela, no áudio das 0h10: "a front page está mais leve, mais
   concisa, mais direta, mais organizada. Agora NAS INTERNAS a gente precisa
   de bastante atenção, Carol". E na conferência, bloco por bloco: "ficou uma
   página sem vida, sem graça", "estrutura que exige esforço para ler, e sem
   tempero nem apelo visual", "o layout precisa ter estrutura, ritmo,
   conforto, harmonia e atratividade".

   A DIREÇÃO, em cinco linhas, escrita antes de mexer numa regra:

   1. A sensação é de entrar numa casa, e não de ler um folheto: a interna
      precisa conduzir como a home conduz, com chegada, respiro e saída.
   2. A referência vem do editorial impresso, onde a imagem interrompe a
      coluna e o texto retoma depois dela, e não do site de spa com cards
      iguais empilhados.
   3. O que o mercado dela faz e a gente não vai fazer: bloco de card idêntico
      repetido até o rodapé, cada um com sua sombrinha.
   4. O gesto que ninguém usa nesse nicho: o número da etapa em tipo grande na
      margem, como numa partitura, marcando a passagem do tempo dentro da
      página. É a aposta desta entrega.
   5. Proibido aqui: cartão de vidro em fila, ícone genérico e texto corrido
      de mais de três parágrafos sem quebra.
   ========================================================================= */

/* ---------------------------------------------- 1 · o número da etapa
   Ele mora na margem, em tipo grande e quase apagado, e some no celular,
   onde margem é o que não existe. Não é enfeite: é o que diz para o olho
   que a página tem partes, e quantas faltam. */
.corpo-pagina .rotulo.etapa{position:relative}
@media (min-width:1100px){
  .corpo-pagina .rotulo.etapa::before{
    content:attr(data-etapa);
    position:absolute;right:calc(100% + 30px);top:-.55em;
    font-family:var(--marca);font-size:46px;font-weight:600;line-height:1;
    letter-spacing:-.04em;color:var(--linho);
    pointer-events:none;
  }
  .exp-funda .rotulo.etapa::before{color:rgba(247,242,233,.22)}
}

/* ------------------------------------------- 2 · o respiro entre blocos
   Era tudo do mesmo tamanho, um atrás do outro. Agora o espaço entre um
   bloco e o outro cresce, e é ele que faz a leitura ter fôlego. */
.corpo-pagina .exp-bloco{padding-block:clamp(30px,4vw,58px)}
/* 12/09, com a foto que ela mandou: "tem fios que se repetem ali
   desnecessariamente, sem sentido, vários fios soltos, perdidos".
   O bloco tinha fio embaixo E o seguinte tinha fio em cima, então
   toda emenda virava duas linhas paralelas com um vão morto no meio.
   Agora é um fio só por emenda. */
.corpo-pagina .exp-bloco{border-bottom:0}
.corpo-pagina .exp-bloco + .exp-bloco{border-top:1px solid var(--linho)}

/* ------------------------------------------------- 3 · a faixa funda
   Uma só na página inteira, no meio, onde a leitura pede uma virada. É a
   mesma tarja escura que a home usa na localização, e ela sangra de ponta
   a ponta da tela em vez de ficar presa na coluna. */
.corpo-pagina .exp-funda{
  position:relative;color:var(--marfim);
  padding-block:clamp(40px,5vw,72px);
  border-top:0;
}
.corpo-pagina .exp-funda + .exp-bloco{border-top:0}
.corpo-pagina .exp-funda::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;background:var(--cafe);
}
.corpo-pagina .exp-funda .rotulo{color:var(--luz)}
.corpo-pagina .exp-funda .tick{background:var(--luz)}
.corpo-pagina .exp-funda p,
.corpo-pagina .exp-funda li{color:rgba(247,242,233,.92)}
.corpo-pagina .exp-funda .exp-lista li::before{background:var(--luz)}

/* ----------------------------------------------- 4 · a lista com marca
   O bullet redondo do navegador é de documento, e não de página de casa.
   Entra um traço curto na cor terra, alinhado com a primeira linha. */
.corpo-pagina .exp-lista{list-style:none;padding:0;margin:16px 0 0}
.corpo-pagina .exp-lista li{
  position:relative;padding:0 0 0 26px;margin-bottom:14px;
  font-size:clamp(15px,1.2vw,16.5px);line-height:1.7;color:var(--tinta-suave);
  /* a régua de linho que sobrou da versão antiga riscava cada item, e dentro
     da faixa escura ela virava um traço claro atravessando a frase */
  border-bottom:0;
}
.corpo-pagina .exp-lista li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:13px;height:1px;background:var(--terra);
}

/* -------------------------------------- 5 · o valor, que era uma célula
   O investimento estava numa casinha de tabela, do mesmo tamanho de
   "cancelamento". É o número que decide a compra, e agora ele tem corpo. */
/* 11/09, pedido dela às 14h19: "não queremos tanto destaque para o preço. E o
   desconto para praticantes deve estar na segunda linha, em fonte menor".
   O valor tinha virado manchete de 38px na volta da manhã. Agora ele é uma
   linha firme de leitura, e a condição de praticante desce para baixo dele,
   miúda, do jeito que ela escreveu no documento. */
.exp-investimento{
  font-family:var(--marca);font-size:clamp(19px,1.7vw,23px);font-weight:500;
  letter-spacing:-.015em;color:var(--tinta);margin:4px 0 4px;line-height:1.3;
}
.exp-condicao{
  font-size:14px;line-height:1.5;color:var(--tinta-fraca,#6d6259);
  margin:0 0 22px;max-width:46ch;
}

/* --------------------------------------- 6 · a ficha, nas duas alturas
   Mesmo desenho da página do Bendita Pausa, para as duas não parecerem de
   sites diferentes: o que decide em cartão, o que se confere depois miúdo. */
.corpo-pagina .ficha-alta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin:0 0 18px;background:var(--linho);border:1px solid var(--linho);
}
.corpo-pagina .ficha-alta > div{
  background:var(--marfim);padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:7px;max-width:none;
}
.corpo-pagina .ficha-alta dt{
  font-size:10px;text-transform:uppercase;letter-spacing:.26em;
  color:var(--terra);margin:0;font-weight:600;
}
.corpo-pagina .ficha-alta dd{
  margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.45;
  color:var(--tinta);letter-spacing:-.015em;max-width:none;
}
.corpo-pagina .ficha-alta > div:first-child,
.corpo-pagina .ficha-alta > div:last-child{grid-column:1 / -1}

/* 11/09: em grade de duas colunas, um item curto ao lado de um item longo
   abria um buraco branco no meio da ficha, e o vão lia como erro de página.
   Em duas colunas de TEXTO os itens se acomodam em sequência, um embaixo do
   outro, e a coluna vira quando enche: nenhum vão sobra no meio. */
.corpo-pagina .ficha-baixa{
  columns:2;column-gap:clamp(20px,2.6vw,36px);margin:0 0 26px;
}
.corpo-pagina .ficha-baixa > div{
  display:flex;flex-direction:column;gap:5px;max-width:none;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  padding-bottom:clamp(14px,1.8vw,22px);
}
.corpo-pagina .ficha-baixa dt{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--rotulo);margin:0;
}
.corpo-pagina .ficha-baixa dd{
  margin:0;font-size:14px;line-height:1.6;color:var(--tinta-suave);max-width:44ch;
}

@media (max-width:640px){
  .corpo-pagina .ficha-alta{grid-template-columns:minmax(0,1fr)}
  .corpo-pagina .ficha-alta > div:first-child,
  .corpo-pagina .ficha-alta > div:last-child{grid-column:auto}
  .corpo-pagina .ficha-baixa{columns:1}
}

/* ------------------------------------------- consertos da mesma tarde
   Duas coisas que só apareceram com a página montada no ar, e que eu não
   teria visto lendo o código:

   1. Dentro da faixa escura o texto da lista sumia. A regra do creme e a
      regra da lista tinham o mesmo peso, e a que vem por último no arquivo
      é a da lista, escura. Aqui o creme volta com peso maior, e não por
      sorte de ordem.
   2. O número da etapa caía em cima da foto redonda dos blocos ilustrados.
      Nesses, ele sai da margem e entra na linha do rótulo, onde tem espaço. */
.corpo-pagina .exp-funda .exp-lista li,
.corpo-pagina .exp-funda .exp-corpo p,
.corpo-pagina .exp-funda .destaque{color:rgba(247,242,233,.94)}
.corpo-pagina .exp-funda .exp-lista li::before{background:var(--luz)}

@media (min-width:1100px){
  .corpo-pagina .ilustrado .rotulo.etapa::before{
    position:static;display:inline-block;
    margin-right:12px;vertical-align:-.22em;
    font-size:26px;color:var(--areia);
  }
  .corpo-pagina .exp-funda.ilustrado .rotulo.etapa::before{color:rgba(240,203,0,.5)}
}

/* =========================================================================
   O MENU DENTRO DA PÁGINA INTERNA · 12/09/2026
   Pedido dela em áudio: "ele tem que permanecer com o menu aparente, e não
   como uma página à parte que depois volta. A pessoa navega para onde ela
   quiser sem precisar voltar para o menu para depois escolher outro menu."
   A barra de cima passou a ser navegação de verdade, e não só uma saída.
   ========================================================================= */
.pagina-menu{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  margin-left:auto;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pagina-menu::-webkit-scrollbar{display:none}
.pagina-menu a{
  position:relative;white-space:nowrap;
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--tinta-suave);padding:6px 0;
  transition:color .35s var(--calma);
}
.pagina-menu a:hover{color:var(--tinta)}
.pagina-menu a.aqui{color:var(--tinta)}
.pagina-menu a.aqui::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--luz);
}
/* No celular a barra fica apertada: o título da página some e quem manda é
   o menu, que é o que ela pediu para estar sempre à vista. */
@media (max-width:860px){
  .pagina-titulo{display:none}
  .pagina-menu{margin-left:14px}
  .voltar span{display:none}
  .voltar{padding:10px 12px}
}

/* =========================================================================
   O MENU NAS PÁGINAS INTERNAS · 12/09/2026
   Ela pediu por áudio, e tinha pedido antes: "as páginas secundárias precisam
   estar acontecendo dentro da navegabilidade do site, ele tem que permanecer
   com o menu aparente". O cabeçalho aqui é o MESMO da home, com as mesmas
   classes: o que muda é que ele já nasce assentado, porque nestas páginas não
   existe o rolar da home para assentá-lo.
   ========================================================================= */
body.tem-topo-interna{padding-top:var(--topo-altura)}
.topo-interna{position:fixed}
/* O ingresso centra o bilhete na tela pelo próprio body. O cabeçalho é fixo
   justamente para não entrar nessa conta e desalinhar o bilhete. */
body.tem-topo-interna .palco{min-height:calc(100svh - var(--topo-altura))}

/* O "me avise sobre o próximo ciclo", devolvido em 12/09 com destino. Discreto
   de propósito: quem já decidiu vir clica no botão de cima, e este é para quem
   não pode nesta data. */
.avise{
  display:inline-block;margin-top:12px;
  font-size:12.5px;color:var(--tinta-suave);
  border-bottom:1px solid var(--linho);padding-bottom:2px;
  transition:color .35s var(--calma),border-color .35s var(--calma);
}
.avise:hover{color:var(--tinta);border-color:var(--terra)}

/* A razão social e o CNPJ, no rodapé, desde 12/09. Menores que o resto do pé
   de página de propósito: é informação de lei, e não de leitura. */
.razao-social{font-size:11.5px;opacity:.72;letter-spacing:.01em}

/* =========================================================================
   PARA EMPRESAS · refeita em 12/09/2026 pelo texto novo da Cinara
   Nenhuma fonte nova aqui, por aviso dela no mesmo dia: "não inventar de
   fazer salada de fonte". É a Poppins da marca com a sans do sistema, que é
   o que o site inteiro já usa. O que entra é ritmo, e não tipo novo.
   ========================================================================= */

/* os dois botões da capa, lado a lado */
.capa-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}

/* a ficha de um olhar, logo abaixo da capa */
.ficha-empresa{background:var(--gelo)}
/* 13/09, 09h39, com as palavras dela: "tarja fora de alinhamento". A causa era
   uma linha só: o margin:0 do dl matava o margin-inline:auto que a faixa usa
   para centrar, e a tarja inteira nascia 80px à esquerda da linha guia do
   texto. Agora ela pousa na mesma prumada do resto da página. */
.ficha-empresa dl{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-block:0;margin-inline:auto;
}
.ficha-empresa dl > div{padding:clamp(20px,2.2vw,28px) 20px clamp(20px,2.2vw,28px) 0}
.ficha-empresa dl > div + div{padding-left:24px;border-left:1px solid var(--linho)}
.ficha-empresa dt{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:7px;
}
.ficha-empresa dd{margin:0;font-size:15px;line-height:1.5;color:var(--tinta)}
@media (max-width:820px){
  .ficha-empresa dl{grid-template-columns:repeat(2,1fr)}
  .ficha-empresa dl > div:nth-child(3){padding-left:0;border-left:0}
  .ficha-empresa dl > div:nth-child(n+3){border-top:1px solid var(--linho)}
}

/* os sinais que chegam ao RH
   13/09, 09h56, com as palavras dela: "já tínhamos falado sobre detalhes de
   capricho visual que importam para a leitura e a percepção de valor da
   informação, pra não ficar com itens só com traços e tão seca assim".
   O traço de 11px virou um losango de traço fino na cor da casa, os itens
   ganharam respiro, e a lista passou a ter uma margem de cor à esquerda, que
   é o que segura a leitura de cinco linhas seguidas. */
.sinais-empresa{
  list-style:none;margin:26px 0 0;padding:0 0 0 clamp(18px,2vw,26px);
  max-width:64ch;border-left:2px solid var(--terra);
}
.sinais-empresa li{
  position:relative;padding:18px 0 18px 30px;
  color:var(--tinta);font-size:16.5px;line-height:1.6;
}
.sinais-empresa li + li{border-top:1px solid var(--linho)}
.sinais-empresa li::before{
  content:"";position:absolute;left:2px;top:24px;
  width:9px;height:9px;border:1px solid var(--terra);
  transform:rotate(45deg);
}

/* as cinco dimensões, com a primeira acesa
   13/09, 09h57: "aqui tinha foto?? Era a da IDG?". A imagem que ela lembra é o
   gráfico das cinco dimensões, que ela tentou subir em 02/09 e o upload comeu.
   Em vez de um print de baixa resolução, as cinco dimensões viraram a própria
   figura: cinco colunas lado a lado, na altura de um gráfico, com Ser acesa,
   que é onde a casa trabalha. Some a falta da foto e sobra o argumento. */
.idg-lista{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linho);
  border:1px solid var(--linho);
}
.idg-lista li{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  background:var(--marfim);padding:clamp(16px,1.8vw,22px) clamp(12px,1.4vw,18px);
  min-height:clamp(140px,15vw,180px);
}
.idg-lista li.aqui{background:var(--branco);box-shadow:inset 0 4px 0 var(--luz)}
/* cada dimensão com o seu tom, para a faixa ler como gráfico e não como
   tabela. É a paleta da casa em cinco degraus, e não o arco-íris do material
   original: a figura precisa pertencer à página. */
.idg-lista li:nth-child(2){box-shadow:inset 0 4px 0 rgba(193,144,58,.55)}
.idg-lista li:nth-child(3){box-shadow:inset 0 4px 0 rgba(160,124,74,.5)}
.idg-lista li:nth-child(4){box-shadow:inset 0 4px 0 rgba(131,110,88,.45)}
.idg-lista li:nth-child(5){box-shadow:inset 0 4px 0 rgba(108,99,90,.4)}
.idg-n{
  font-family:var(--marca);font-size:clamp(24px,2.6vw,34px);
  color:var(--areia);line-height:1;
}
.idg-lista li.aqui .idg-n{color:var(--luz)}
.idg-lista b{font-size:clamp(14px,1.2vw,16px);font-weight:600;color:var(--tinta);line-height:1.25}
.idg-lista span:not(.idg-n){font-size:13px;color:var(--tinta-suave);line-height:1.5;margin-top:auto}
@media (max-width:900px){
  .idg-lista{grid-template-columns:repeat(2,1fr)}
  .idg-lista li{min-height:0}
  .idg-lista li.aqui{grid-column:1 / -1}
}
@media (max-width:520px){
  .idg-lista{grid-template-columns:1fr}
  .idg-lista li.aqui{grid-column:auto}
}

/* as cinco competências do Ser
   mesmo pedido das 09h56: a lista era cinco linhas iguais, sem hierarquia
   nenhuma. Agora o nome da competência vem em cima e a explicação embaixo,
   com um número miúdo marcando a ordem, que é o que dá o capricho sem
   acrescentar uma palavra ao texto dela. */
.sm-lista-fina{margin-top:18px;counter-reset:comp}
.sm-lista-fina li{
  counter-increment:comp;position:relative;
  padding:16px 0 16px clamp(30px,3vw,40px);
  border-bottom:1px solid var(--linho);font-size:15.5px;
}
.sm-lista-fina li:first-child{border-top:1px solid var(--linho)}
.sm-lista-fina li::before{
  content:counter(comp,decimal-leading-zero);
  position:absolute;left:0;top:18px;
  font-size:11px;letter-spacing:.1em;color:var(--terra);
  font-variant-numeric:tabular-nums;
}
.sm-lista-fina b{display:block;color:var(--tinta);margin-bottom:3px}
.sm-lista-fina span{color:var(--tinta-suave);line-height:1.6}

/* o cabeçalho dos programas, que antes não tinha.
   13/09: o rótulo, o título e o pé são filhos do mesmo grid dos cartões, então
   precisam atravessar a linha inteira, senão cada um ocupa uma célula e o
   bloco desalinha. Era parte do "alinhamentos básicos" que ela apontou. */
.programas-rotulo{grid-column:1 / -1;margin-bottom:0}
.programas-titulo{grid-column:1 / -1;margin:6px 0 clamp(10px,1.4vw,18px)}
.programas-pe{grid-column:1 / -1;margin-top:14px}

/* duas colunas, para "como acontece" */
@media (min-width:900px){
  .sm-capacidades-duas{grid-template-columns:repeat(2,1fr)}
}

/* o retrato de quem conduz */
.conduz-empresa{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.4vw,30px);align-items:start;margin-top:22px;
}
.conduz-empresa .conduz-retrato{
  width:clamp(96px,10vw,136px);margin:0;border-radius:50%;overflow:hidden;
  background:var(--linho);aspect-ratio:1;
}
.conduz-empresa .conduz-retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.conduz-empresa p:not(.destaque){font-size:16px;line-height:1.75;color:var(--tinta-suave);max-width:60ch}
/* 05/10: em Para Empresas o retrato entra ao lado da frase em destaque, que
   continua do tamanho que tinha, e as duas ficam no mesmo eixo */
.conduz-empresa:has(> p.destaque){align-items:center}
@media (max-width:640px){ .conduz-empresa{grid-template-columns:1fr} }

/* a NR-1 fica num bloco com peso, porque é a pergunta que o RH faz primeiro */
.bloco-nr1{background:var(--gelo);padding:clamp(24px,3vw,40px);border-radius:2px}
.bloco-nr1 p{max-width:64ch}

/* ------------------------------ a marca no lugar do "voltar", desde 12/09
   Ela apontou a palavra: "toda página secundária pede para voltar". A marca
   faz o mesmo trabalho sem pedir nada, e é o mesmo gesto das outras páginas
   da casa, onde o logo sempre leva para a entrada. */
.pagina-marca{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer;
  border-radius:2px;transition:transform .35s var(--calma),opacity .35s var(--calma);
}
.pagina-marca img{width:38px;height:38px;display:block}
.pagina-marca:hover{transform:translateY(-1px)}
.pagina-marca:focus-visible{outline:2px solid var(--luz);outline-offset:3px}
@media (max-width:860px){ .pagina-marca{width:40px;height:40px} .pagina-marca img{width:34px;height:34px} }

/* "Antes de tudo deve vir o Começar pelo Ser", e é a frase dela. O bloco sai
   de dentro do corpo da página e encosta na capa, antes da faixa de dados. */
.sm-ser-fora{padding:clamp(26px,3.2vw,46px) 0}
.sm-ser-fora .sm-ser{max-width:64ch}
.sm-ser-fora .sm-ser-abre{margin:0}

/* =========================================================================
   27/09/2026 · o doc ADAPTAÇÃO-SITE-LUMI da Cinara
   Só o desenho do que entrou novo. Nenhuma fonte nova, nenhuma cor nova: as
   mesmas variáveis da casa.
   ========================================================================= */
.cartao-assina{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.26em;font-weight:500;
  color:var(--rotulo);margin:0 0 16px;
}
.cartao-ola{font-family:var(--marca);font-size:clamp(16px,1.5vw,19px);color:var(--tinta);margin:0 0 10px}
.cartao-saudacao + .cartao-ola{margin-top:0}

.manifesto-texto{max-width:62ch;margin-top:clamp(18px,2vw,26px)}
.manifesto-texto p{font-size:clamp(16px,1.25vw,18px);line-height:1.72;color:var(--tinta-suave);text-wrap:pretty}
.manifesto-texto p + p{margin-top:1em}

.entradas-simples .entrada-linha{margin-bottom:16px}
.entrada-entram{font-size:14.5px;line-height:1.75;color:var(--tinta-suave);margin:0 0 22px}
.entrada-entram span:first-child{font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--rotulo)}
.entrada-entram a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--areia);text-underline-offset:3px}
.entrada-entram a:hover{text-decoration-color:var(--terra)}

.ainda-ano .cabeca{margin-bottom:clamp(22px,2.6vw,34px)}
.ano-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
.ano-lista a{
  display:flex;flex-direction:column;gap:8px;height:100%;
  padding:clamp(22px,2.4vw,32px);border:1px solid rgba(226,216,205,.3);
  color:var(--marfim);text-decoration:none;transition:border-color .3s;
}
.ano-lista a:hover{border-color:var(--marfim)}
.ano-lista b{font-family:var(--marca);font-weight:500;font-size:clamp(20px,1.9vw,26px);color:var(--branco)}
.ano-lista span{font-size:15.5px;line-height:1.6;color:var(--linho)}
/* 29/09: com encontro publicado na Central, a lista mostra os da Central,
   cada um levando à página com inscrição. Os itens escritos pela Cinara
   continuam no código e voltam à vista com a caneta da Edição acesa. */
.ano-lista.tem-central > li:not(.ano-central){display:none}
body.ed-on .ano-lista.tem-central > li:not(.ano-central){display:list-item}
body.ed-on .ano-lista > li.ano-central{display:none}
.ano-2027{margin:clamp(24px,2.8vw,36px) 0 18px;font-size:16px;color:var(--linho);text-wrap:pretty}

.sm-home{display:block}
.sm-home .historia-lado{justify-content:center;gap:16px}
.sm-home .historia-lado p{text-wrap:pretty;margin:0}
.sm-home .bloco-acoes{margin-top:10px}

.capa-ficha{margin-top:16px;font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--linho)}

.corpo-pagina .sm-bloco > p{max-width:68ch;text-wrap:pretty}
.corpo-pagina .sm-bloco > p + p{margin-top:.9em}
.corpo-pagina .sm-bloco > .bloco-acoes{margin-top:26px}
.corpo-pagina .sm-bloco > .titulo-3{margin:28px 0 8px}
.sm-fluxo{
  margin-top:22px;font-size:11.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--terra);font-weight:600;line-height:1.9;
}
.sm-quatro{grid-template-columns:repeat(4,1fr)}
.sm-capacidades li p + p{margin-top:.6em}
.forma-empresa{padding:clamp(24px,2.8vw,40px) 0;border-top:1px solid var(--linho)}
.forma-empresa:first-of-type{border-top:0;padding-top:0}
.forma-empresa > p{max-width:68ch;text-wrap:pretty}
.forma-empresa > p + p{margin-top:.8em}
.forma-empresa .titulo-3{margin:6px 0 12px}
.forma-empresa .sinais-empresa{margin:16px 0}
.forma-empresa .titulo-4{margin-top:26px}
.forma-empresa .sm-capacidades{margin-top:14px}
.forma-empresa .bloco-acoes{margin-top:22px}
.sm-bloco-fecho .titulo-2{max-width:26ch;text-wrap:balance}

@media (max-width:1040px){
  .sm-quatro{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .ano-lista{grid-template-columns:1fr}
  .sm-quatro{grid-template-columns:1fr}
}
/* títulos que a Cinara escreveu em caixa alta no doc de 27/09 */
.titulo-3.caixa-alta{font-size:clamp(15px,1.25vw,18px);letter-spacing:.08em;line-height:1.35}
.entrada-entram a{white-space:nowrap}
.entradas-simples .btn-linha{line-height:1.6}
#faq .cabeca .titulo-2{max-width:22ch;text-wrap:balance}
#faq .cabeca .chamada{max-width:60ch}
.sm-capacidades.sem-icone li::before{display:none}
.sm-capacidades li p{font-size:15px;line-height:1.68;color:var(--tinta-suave)}
.forma-empresa > .rotulo-min{font-size:12.5px;letter-spacing:.2em;color:var(--terra);font-weight:600}
.sm-fluxo{text-wrap:balance}
/* 27/09: o menu do doc dela tem quatro palavras, e ela pediu em 08/09 as
   palavras sempre visíveis no celular, sem os três pontinhos. Quatro não
   cabem ao lado da marca em 375px, então no celular o menu desce para uma
   segunda linha, de ponta a ponta, e todas continuam à vista. */
@media (max-width:430px){
  :root{--topo-altura:98px}
  .topo{flex-wrap:wrap;align-content:center;row-gap:2px;padding-inline:14px}
  .topo .menu{order:3;flex-basis:100%;margin:0;justify-content:space-between;overflow:visible}
  .topo .menu a{font-size:12.5px;letter-spacing:0}
  .topo-acoes{margin-left:auto}
  .pagina-barra{height:auto;flex-wrap:wrap;padding-block:10px 4px}
  .pagina-menu{flex-basis:100%;margin:4px 0 0;justify-content:space-between;overflow:visible}
  .pagina-menu a{letter-spacing:.08em;font-size:10.5px}
}

/* =======================================================================
   28/09/2026 · Briefing Final de Execução da Cinara (27/09, 19h27)
   ======================================================================= */
/* o botão fixo: Agenda / Falar com a LuzIA. Reto, pequeno, na cor da casa,
   e some na tela do sino, que é a porta de entrada. */
.botao-fixo{
  position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:130;
  display:flex;background:var(--marfim);border:1px solid var(--areia);
  box-shadow:0 10px 30px rgba(20,14,9,.12);
}
.botao-fixo a{
  display:block;padding:14px 18px;font-size:11px;line-height:1;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;color:var(--tinta);white-space:nowrap;
  transition:background .4s var(--calma),color .4s var(--calma);
}
.botao-fixo a + a{border-left:1px solid var(--areia)}
.botao-fixo a:hover{background:var(--pedra-funda);color:var(--marfim)}
body.pre-entrada .botao-fixo{display:none}
.rodape{padding-bottom:calc(clamp(30px,3.4vw,48px) + 64px)}
@media (max-width:430px){
  .botao-fixo{left:12px;right:12px;bottom:12px}
  .botao-fixo a{flex:1;text-align:center;padding:15px 8px;letter-spacing:.14em}
}

/* "Conduzido por Cinara Bastos", com o nome levando para a bio */
.capa-conduz{margin-top:14px;font-size:14.5px;color:rgba(247,242,233,.86);text-wrap:pretty}
.capa-conduz a{color:var(--marfim);text-decoration:underline;text-decoration-color:rgba(247,242,233,.5);text-underline-offset:3px}
.capa-conduz a:hover{text-decoration-color:var(--luz)}

/* o hub Experiências: as três portas, sem a listra gelo da home */
.portas-exp::before{display:none}
.portas-exp .entrada-corpo{margin-top:-40px}
.porta-status{font-size:12px;text-transform:uppercase;letter-spacing:.16em;line-height:1.7;color:var(--terra);margin:0 0 22px;text-wrap:balance}

/* a LuzIA na home: a frase de bastidor e o botão */
#faq .cabeca .luzia-bastidor{margin-top:10px}
#faq .cabeca .bloco-acoes{margin-top:22px}
.sm-home .historia-lado p{max-width:60ch}
/* 28/09: com "Experiências" no lugar de "Agenda", a barra da página interna
   passava 42px da tela em 375px e cortava o "Para Empresas". Letra e
   espaço um pouco menores, e as quatro palavras cabem inteiras. */
@media (max-width:430px){
  .pagina-menu{min-width:0;gap:8px}
  .pagina-menu a{letter-spacing:.03em;font-size:10px}
}

/* 29/09: o cuidado do briefing de 27/09, o mesmo das páginas de evento */
.rodape-cuidado{margin-top:18px;max-width:72ch;text-wrap:pretty}

/* 05/10: pedidos da Cinara no grupo, de 03/10.
   O "Aqui entra(m):" era orientação de navegação e não texto para aparecer:
   some com a linha inteira, para os três boxes ficarem no mesmo padrão. */
.entradas-simples .entrada-entram > span:first-child,
.entradas-simples .entrada-entram > br:first-of-type{display:none}
/* O respiro do alto da página somava duas vezes antes do primeiro bloco. */
.corpo-pagina > .sm-bloco:first-child{margin-top:0}
/* e o nome de cada um não quebra no meio, como já acontecia com os links */
.entrada-entram [data-ed="h27.card2-l1"],
.entrada-entram [data-ed="h27.card2-l2"]{white-space:nowrap}

/* 05/10, Histórico de ajustes do site da Cinara: "Reduzir os espaços vazios
   abaixo da foto do topo" nas páginas das experiências. Eram 104px de vazio
   no computador entre a foto e a primeira linha; ficam cerca da metade. */
#pagina .capa-exp + .corpo-pagina{padding-top:clamp(30px,4vw,56px)}
/* e "Conferir o enquadramento da foto do topo (o grupo com o rapaz moreno)":
   no centro, a faixa larga cortava o alto das cabeças do grupo */
#pagina .capa-exp-grupo picture img{object-position:50% 36%}
/* 05/10: a capa do Self Mentoring é o labirinto do cartão "Fazer uma
   travessia"; o enquadramento desce para o labirinto e quem caminha nele */
#pagina .capa-labirinto picture img{object-position:50% 64%}
/* 05/10, Histórico de ajustes: "Alinhar os três botões do Por onde começar
   na mesma altura". Medido: no computador (1366) o primeiro botão tinha uma
   linha e os outros dois duas, então o alto dos três não batia (18px de
   diferença). No celular (390) o terceiro quebrava em duas linhas e ficava
   mais alto que os outros. Agora os três têm a largura do cartão e a mesma
   altura: duas linhas de espaço no computador, uma linha só no celular. */
#busca .entradas-simples .bloco-acoes .btn-linha{
  width:100%;justify-content:center;text-align:center;
}
@media (min-width:641px){
  #busca .entradas-simples .bloco-acoes .btn-linha{min-height:calc(3.2em + 36px)}
}
@media (max-width:640px){
  #busca .entradas-simples .bloco-acoes .btn-linha{padding-inline:14px;letter-spacing:.12em}
}