/* ============================================================
   PAN Aquática · componentes
   Depende de tokens.css. Nenhum HEX aqui, só var(--token).
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  /* Trava de raiz. Nada nesta página deve criar rolagem horizontal;
     se criar, é bug e o recorte abaixo impede que ele estrague a
     página inteira. `clip` e não `hidden`: `hidden` transformaria o
     html em contêiner de rolagem e quebraria o cabeçalho sticky. */
  overflow-x:clip;
}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-normal);
  letter-spacing:var(--tracking-body);
  color:var(--fg-1);
  background:var(--bg-page);
}

img,svg{display:block;max-width:100%;height:auto}

h1,h2,h3{
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-display);
}

a{
  color:var(--fg-link);
  text-decoration-color:var(--line-accent);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}

::selection{background:var(--pan-profundas-20);color:var(--fg-1)}

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

/* pular para o conteúdo, acessibilidade */
.pular{
  position:absolute;left:var(--space-4);top:var(--space-4);z-index:100;
  transform:translateY(-200%);
  background:var(--bg-dark);color:var(--fg-inv-1);
  padding:var(--space-3) var(--space-5);border-radius:var(--r-2);
  font-size:var(--fs-body-s);text-decoration:none;
}
.pular:focus{transform:translateY(0)}

/* ---------- utilitários ---------- */
.wrap{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--space-6)}
.medida{max-width:var(--measure)}

.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--fg-rotulo);
}

/* Rótulo sobre fundo escuro, em dois graus.
   Superfície sólida aguenta o barro mais saturado. A cena tem vídeo
   por baixo, que clareia o fundo, e ali o barro precisa abrir mais. */
.submersao .eyebrow{color:var(--fg-rotulo-inv)}

.cena-palco .eyebrow,
.cena .oferta .eyebrow{color:var(--fg-rotulo-video)}

/* filete de barro. único acento quente, pontual */
.filete{
  display:block;width:28px;height:1px;
  background:var(--line-accent);
  margin-bottom:var(--space-4);
}

/* ============================================================
   TELA DE CARREGAMENTO

   Tudo aqui depende da classe .carregando, posta por script inline
   no <head>. Sem JavaScript ela nunca entra, a tela não existe e o
   site aparece normalmente. É esse o contrato de segurança.
   ============================================================ */

.carga{display:none}

.carregando .carga{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:200;
  background:var(--bg-page);
  transition:opacity var(--carga-rev,1100ms) var(--ease-agua);
}

/* O conteúdo espera pintado, só coberto pela tela (opaca, z-index 200).
   Não esconder com opacity 0: o Chrome não mede o que está invisível, e
   se o teste do PageSpeed encerra antes da revelação o resultado sai
   sem LCP (erro NO_LCP, 24/10/2026). Nada no site passa de z-index 200. */
body>:not(.carga){transition:opacity var(--carga-rev,1100ms) var(--ease-agua)}

.carga-marca{
  width:min(38vw,190px);height:auto;overflow:visible;
  transform-origin:center;
  transition:transform var(--carga-rev,1100ms) cubic-bezier(.62,0,.36,1),
             opacity   var(--carga-rev,1100ms) var(--ease-agua);
}
.carga-fantasma{fill:var(--fg-1);opacity:.13}
.carga-agua{fill:var(--fg-1)}

/* a revelação: o símbolo avança e a página aparece por dentro dele */
.revelando .carga{opacity:0}
.revelando .carga-marca{transform:scale(var(--carga-tunel,13));opacity:0}

@media (prefers-reduced-motion:reduce){
  .carga-marca{transition:opacity 200ms linear}
  .revelando .carga-marca{transform:none}
}

/* ---------- cabeçalho ---------- */
.topo{
  /* preso em qualquer largura. Sem isso a navegação sumia para sempre
     depois da primeira rolagem no desktop */
  position:sticky;top:0;z-index:30;
  background:var(--bg-page);
  border-bottom:1px solid var(--line-1);
}
/* O deslize do recolhimento. Escopado em header.topo porque o traço de
   cima do hambúrguer também se chama topo, e um transform ali estragaria
   o desenho do ícone. */
header.topo{transition:transform var(--dur-2) var(--ease-agua)}
/* recolhido: sobe inteiro para fora da tela. pan.js põe e tira o
   atributo conforme a direção da rolagem */
header.topo[data-recolhido="true"]{transform:translateY(-100%)}
/* com o menu aberto o cabeçalho fica sempre à vista: o hambúrguer, virado X barro, é o único fechar */
[data-menu=aberto] header.topo{transform:none}
.topo-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding-block:var(--space-4);
}
.marca{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  text-decoration:none;
}
.marca img{
  display:block;
  width:74px;
  transition:opacity var(--dur-1) var(--ease-agua);
}
.marca::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:74px;
  aspect-ratio:250.91 / 178.88;
  background:var(--pan-barro);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-1) var(--ease-agua);
  /* SVG embutido: máscara por URL externa não carrega em file:// em alguns navegadores e a logo sumia no hover */
  --marca-mascara:url("data:image/svg+xml,%3Csvg id='uuid-8a5981b2-e24f-47e9-8d43-44ed03154d5e' data-name='Camada 2' xmlns='http://www.w3.org/2000/svg' width='250.91' height='178.88' viewBox='0 0 250.91 178.88'%3E%3Cg id='uuid-e700661e-290d-42e6-a1bb-c9c0165564e7' data-name='Camada 1'%3E%3Cg%3E%3Cg%3E%3Cpath d='M151.35,63.4c-.6-3.69-1.21-7.41-1.96-11.08-.72-3.6-1.93-7.99-3.63-10.32-5.29-7.26-10.75,2.72-12.22,8.03-1.05,3.33-1.75,6.87-2.41,10.32-1.49,8.03-2.88,16.16-4.63,24.19-2.96,12.68-6.6,26.91-17.25,35.46-8.95,7.29-22.06,5.06-26.82-5.78-3.28-7.75.33-16.32,5.61-22.39,4.18-4.97,9.27-9.15,13.59-14.01,4.37-4.81,7.91-10.27,10.69-16.15,4.06-8.64,7.24-17.76,10.54-26.75,3.3-8.58,7.47-28.43,20.17-20.39,8.45,6.13,10.82,18.71,13.25,28.33,1.92,7.7,3.8,15.42,7.16,22.62,3.21,6.78,8.02,13.2,14.7,16.81,5.18,3,11.73,4.05,16.88,6.91,3.22,1.76,5.77,4.75,6.43,8.23,1.6,9.2-6.42,19.92-15.75,21.18-9.02,1.26-16.67-5.81-20.94-13.14-7.26-12.77-11.19-27.51-13.4-41.99v-.09Z' fill='%232F3D37'/%3E%3Cpath d='M197.66,68.52c-1.31,11.13-12.69,10.81-20.25,4.88-7.29-5.33-9.38-13.85-8.23-22.29.68-6.03,2.1-12.08,3.55-17.99,1.88-7.07,3.84-15.12,8.71-20.64,4.53-5.22,11.24-5.53,15.87-.29,4.74,5.26,6.74,12.49,9.46,18.88,4.42,10.48,9.01,21.06,14.34,31.16,2.15,3.89,4.73,8.21,8.09,11.06,3.83,3.29,7.09,2.08,7.5-3.58.41-4.13-.84-10.3-2.08-15.03-3.37-13.69-9.15-26.33-9.6-40.43-.43-14.38,13.86-19.93,21.63-6.91,5.63,10.56,3.97,24.32,4.19,35.97-.07,5.58-.1,10.92-.49,16.5-.56,8.69.39,25.68-1,34.28-.85,5.12-1.79,10.73-4.36,15.21-2.8,5.07-7.84,7.02-12.93,3.93-3.93-2.37-6.72-6.84-8.79-10.98-6.26-13.36-11.08-36.35-16.94-49.89-1.03-2.25-11.87-28.5-14.43-20.49-.61,2.78-.06,6.42.49,9.38,1.56,9,6.17,18.02,5.27,27.2v.08Z' fill='%232F3D37'/%3E%3Cpath d='M45.27,29.13c-21.91,18.5,4.02,45.15,5.08,67.01,1.22,16.77-13.55,29.85-28.94,22.66C8.82,111.69,3.35,96.14.87,82.24c-2.21-12.26-.03-24.81,4.41-36.42,2.47-6.55,5.59-12.98,10.24-18.19,7.59-8.42,18.54-13.74,29.4-16.02,12.52-2.69,25.62.01,37.02,5.46,12.79,6.01,30.31,20.52,26.57,36.74-3.55,11.85-16.95,18.32-28,20.98-8.25,1.78-17.71,1.76-24.19-4.16-6.24-5.59-6.19-15.96,0-21.74,5.81-6.35,18.48-4.82,21.97-11.87,1.86-5.61-4.24-10.14-8.73-11.94-8.08-3.51-17.47-1.93-24.18,3.97l-.11.09Z' fill='%232F3D37'/%3E%3Ccircle cx='141.42' cy='77.6' r='8.07' fill='%232F3D37'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M126,147.44c-3.45-.66.26-3.87,1.45-5.07.41-.41.85-.86,1.4-1.04.98-.34,2.04.62,1.82,1.63-.12.61-.54,1.08-1.03,1.59-1.15,1.07-1.96,2.74-3.64,2.89Z' fill='%232F3D37'/%3E%3Cpath d='M158.52,145.88c-1.53,1.31-4.36-.95-2.73-2.59,1.48-1.09,4.21,1.03,2.73,2.59Z' fill='%232F3D37'/%3E%3Cpath d='M94.84,156.48c-2.81,2.09-6.25,3.03-8.81,5.38-.8,1.41-.77,3.11-1.4,4.62-1.39,3.75-2.73,7.61-4.5,11.2-.59,1.76-3.43,1.62-2.79-.59,1.64-4.55,3.89-8.88,5.02-13.58.57-2.4-3.62-3.05,1.14-5.46.58-.29-.71-.74-1.03-1-.85-.49-1.38-1.62-2.43-1.23-1.49.61-3.09,1.6-4.71.92-1.09-.53-1.7-1.3-2.69-.43-1.65,1.17-5.24,2.65-5.6-.46-.15-.88.51-2.14-.33-2.5-.57-.14-1.39.26-1.95.47-1.09.44-2.26.72-3.34,1.19-2.73.99-5.75,1.93-8.35,3.03-2.39.9-4.88,1.37-7.26,2.26-4.18.99-8.8.85-13.13.27-1.54-.35-3.37-.84-4.65-1.89-1.04-1.05.03-2.39,1.41-2.13,11.32,4.74,22.39-1.68,33.13-4.97,2.99-1.25,6.08-2.12,9.29-2.35,2.05-.26,4.69-.99,6.6-.1.86.77.51,1.9-.29,2.62-1,.78-1.19,2.35.53,1.19,2.41-2.16,3.57-3.5,6.88-4.3,1.6-.54,3.38-1.32,5.02-.62,2.5,1.93-1.57,5.06-2.25,7.21-1.55,3.13,3.13-.36,4-.82,3.14-1.65,5.7-4.18,8.81-5.82,1.48-.59,2.33.55,1.78,1.9-.43,1.25-2.35,1.66-2.62,3.17.09,1.68,3.05-1.33,3.76-1.51,1.85-.81,3.51-2.98,5.68-2.63.66.21,1,.96.78,1.6-.31,1.04-2.39,2.01-2.24,3.46.28.35.94-.28,1.29-.47,2.15-1.38,4.78-2.27,7.1-3.37,2.51-.71,5.05-1.34,7.63-1.59,1.37-.08,4.16-1.16,4.33.89-.15,1.37-1.69,5.21,1.21,3.84,1.7-.92,3.45-2.04,4.9-3.34,2.07-2,5.61-3.39.32-3.64-1.22-.19-1.52-1.71-.57-2.4.71-.53,1.63-.35,2.46-.38,2.16-.18,4.79.61,6.57-.94.78-.57,1.2-1.43,2.13-1.72.83-.26,2.13.07,2.22,1.1.13.45-.2,1.07.34,1.3.54.21,1.99.12,2.75.26.39.07.69.31.76.73.42,3.61-5.96.55-7.54,2.64-2.11,2.59-6.37,8.23.48,4.66,1.94-.89,3.72-2.13,5.4-3.35.62-.48,1.45-1.41,2.28-1.3.92.06,1.28,1.16.92,1.93-.27,1.01-2.18,2.32-1.9,3.09,1.8,1.02,6.84-1.19,8.8-1.88,2.68-.8,5.48-1.57,8.18-2.25,1.38-.39,2.8-.9,4.33-.62,1.31.15,2.01,1.71.69,2.48-.6.33-1.31.41-1.96.61-1.52.52-3.14,1.05-4.39,2.06-.75.56-2.35,2.08-.29,1.75,1.69-.17,3.24-.97,4.81-1.55,2.03-.76,4.08-1.48,6.04-2.37,2.89-1.02,5.9-1.53,8.97-1.8,1.09-.09,2.78-.42,3.18.87.32,1.58-2.81,3.65.66,4.93,2.24.81,13.32-.35,16.58-.5,4.08-.23,8.09-1.01,12.17-1.28,1.2-.05,3.55-.18,4.11.88.19,1.19-2.44,1.82-3.46,2.01-6.62,1.09-29.58,3.68-32.88.14-.52-.69-1.16-1.55-2.14-1.23-9.89,4.71-5.51-1.77-9.86.2-3.59.94-10.63,5.64-12.41.23-.18-.84.37-1.94-.69-1.95-3.69.79-7.4,3.28-11.32,2.26-1.18-.11-1.99-1.37-3.14-1.3-1.99.74-4.06,1.92-6.26,2.16-4.65.37-2.55-5.26-4.31-3.62-2.42,1.91-7.41,6.08-10.6,3.96-.76-.5-1.17-1.83-2.21-1.45-1.31.54-2.78,1.61-4.26,1.51-1.02-.14-1.78-1.28-1.4-2.26.2-.61.32-1.22-.52-1.05-1.9.59-3.76,1.53-5.5,2.53-1.92,1.21-4.27,3.34-6.64,1.95-.79-.48-.47-2.21-1.35-2.25-1.71.38-2.42,1.99-4.38,2.43-.91.2-2.08.31-2.8-.37-.77-.9-.82-2.22-2.31-1.28Z' fill='%232F3D37'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask:var(--marca-mascara) center / contain no-repeat;
  mask:var(--marca-mascara) center / contain no-repeat;
}
.marca:hover img,.marca:focus-visible img{opacity:0}
.marca:hover::after,.marca:focus-visible::after{opacity:1}

/* A marca dentro da gaveta, clicavel para voltar a home.
   No desktop o menu e barra e a logo ja esta no cabecalho, entao some. */
/* no desktop o menu e barra: nao ha gaveta, logo nao ha o que fechar */
.menu-marca{display:none}
.fechar-menu{display:none}
.menu-marca img{display:block;width:100%;height:auto}

.menu ul{list-style:none;display:flex;gap:var(--space-5);flex-wrap:wrap}
.menu a{
  font-size:var(--fs-meta);
  text-transform:uppercase;
  letter-spacing:var(--tracking-micro);
  font-weight:var(--fw-medium);
  color:var(--fg-2);
  text-decoration:none;
  padding-block:var(--space-2);
  border-bottom:1px solid transparent;
  transition:color var(--dur-1) var(--ease-agua),border-color var(--dur-1) var(--ease-agua);
}
.menu a:hover,.menu a:focus-visible{color:var(--fg-1);border-bottom-color:var(--line-accent)}
.menu a[aria-current=page]{color:var(--fg-1);border-bottom-color:var(--line-accent)}

/* Ícone do menu, baseado em Flippin' Burgers de Mikael Ainalem (MIT).
   Adaptações: o SVG é decorativo dentro do nosso <button>, em vez de
   virar botão com role e tabindex; o estado vem de aria-expanded, que o
   pan.js já mantém, em vez de uma classe própria; traço em token e mais
   fino, para acompanhar a hairline do resto do site. */
.abrir-menu{
  display:none;
  width:46px;height:46px;padding:0;
  background:transparent;border:0;border-radius:var(--r-2);
  cursor:pointer;position:relative;z-index:3;
  -webkit-tap-highlight-color:transparent;
}
.abrir-menu:focus-visible{outline:2px solid var(--fg-1);outline-offset:2px}

.ham{
  display:block;width:100%;height:100%;
  transition:transform var(--dur-2) var(--ease-agua);
}
.ham .linha{
  fill:none;
  stroke:var(--fg-1);
  stroke-width:3.6;
  stroke-linecap:round;
  transition:stroke-dasharray var(--dur-2) var(--ease-agua),
             stroke-dashoffset var(--dur-2) var(--ease-agua),
             transform var(--dur-2) var(--ease-agua);
}
.ham .topo{stroke-dasharray:40 160}
.ham .meio{stroke-dasharray:40 142;transform-origin:50%}
.ham .base{stroke-dasharray:40 85;transform-origin:50%}

/* Aberto: o conjunto gira 45 graus, as pontas recolhem e o meio cruza.
   O traço vira Barro, que é uso previsto pelo manual: filete, borda,
   número e ícone. Como objeto gráfico o critério é 3:1, e sobre o
   cabeçalho em Vapor ele dá 3,48:1. Por isso o véu não cobre a barra. */
.abrir-menu[aria-expanded="true"] .linha{stroke:var(--line-accent)}
.abrir-menu[aria-expanded="true"] .ham{transform:rotate(45deg)}
.abrir-menu[aria-expanded="true"] .topo{stroke-dashoffset:-64px}
.abrir-menu[aria-expanded="true"] .meio{transform:rotate(90deg)}
.abrir-menu[aria-expanded="true"] .base{stroke-dashoffset:-64px}

/* Véu por trás da gaveta. Também serve de área de fechar.

   Fica no nível do body, abaixo do cabeçalho: ele escurece o conteúdo,
   nunca a barra onde mora o botão de fechar. Se cobrisse a barra, o
   Vapor viraria meio-tom e nenhum passo do Barro alcançaria 3:1.

   A opacidade vem da cor, não do elemento: com opacity < 1 o navegador
   mistura o fundo desfocado com o não desfocado e o borrão fica fraco.

   backdrop-filter é caro, mas aqui roda em estado parado: a gaveta trava
   a rolagem do fundo, então o borrão é rasterizado uma vez. */
/* "body>" no seletor: a regra da tela de carregamento (body>:not(.carga)) é mais específica
   e trocava esta transição por uma de opacidade, deixando o desfoque instantâneo */
body>.veu-menu{
  position:fixed;inset:0;z-index:20;
  background:rgba(var(--pedra-rgb,87,117,112),0);
  pointer-events:none;
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  /* o desfoque e o véu entram e saem em gradação de meio segundo, com aceleração suave nas duas pontas */
  transition:background-color 500ms cubic-bezier(.45,0,.25,1),
             -webkit-backdrop-filter 500ms cubic-bezier(.45,0,.25,1),
             backdrop-filter 500ms cubic-bezier(.45,0,.25,1);
}

/* ---------- abertura ---------- */
/* Contêiner que delimita o sticky. Sem ele, a capa fica grudada no topo
   pela página inteira e reaparece por baixo das seções seguintes. */
/* z-index 2 e nao 0, por causa da crista no pe da submersao.

   A abertura cria um contexto de empilhamento, e tudo que mora dentro
   dela fica confinado ao nivel dela -- inclusive a onda de baixo, que
   sai do bloco escuro por transform e deveria pousar sobre a secao
   seguinte. Em z-index 0 a abertura inteira ficava debaixo da
   .sustenta, que esta em 1: a onda existia, com path e cor corretos, e
   era simplesmente pintada por cima.

   Precisa ser 2, nao 1: empatada com a .sustenta ela perderia mesmo
   assim, porque no empate decide a ordem no HTML e a .sustenta vem
   depois. A onda de cima nunca sofreu disso porque invade a .silencio,
   que esta dentro da propria abertura. */
.abertura{position:relative;z-index:2}

/* ---------- dobra 1 · silêncio ---------- */
/* fica presa no topo enquanto a submersão sobe por cima */
.silencio{
  position:sticky;top:0;z-index:0;isolation:isolate;
  min-height:66svh;   /* sobe: a crista da submersão assoma no pé */
  display:grid;place-items:center;
  background:var(--bg-page);
  padding-block:var(--space-7);
  text-align:center;
  overflow:hidden;              /* prende a deriva do Suminagashi */
}

/* campo do Suminagashi. as camadas vazam para fora e o recorte segura

   `contain:paint` junto de `overflow:hidden`, aqui e nos outros três
   recortes desta folha, não é redundância. Todo filho destes campos
   tem `will-change:transform`, o que o promove a camada composta, e o
   WebKit do iOS não aplica o recorte de um pai comum a uma camada
   composta: o filho escapa. Como estes filhos são muito mais largos
   que a tela, o documento inteiro ficava com milhares de pixels de
   largura no iPhone. A página escorregava no zoom e o Safari passava
   a descartar tiles de pintura, que era por que a Pedra úmida e o
   Suminagashi da carta d'água simplesmente não apareciam.
   `contain:paint` torna o recorte válido também na camada composta. */
.sumi-campo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;contain:paint;
}
.sumi{
  position:absolute;inset:-18%;
  /* background-size é definido por sumi.js, conforme o ajuste escolhido */
  background:url('../img/suminagashi.svg') center no-repeat;
  transform-origin:center;
  will-change:transform,opacity;
  opacity:0;                    /* sumi.js define a opacidade real */
}

/* ---------- a água dentro da mancha ----------
   O canvas ocupa a abertura inteira e é pintado por hero.js. A
   opacidade vem do preset: 0,4. Não é gosto, é legibilidade — acima
   disso a manchete perde contraste sobre a água. Ver a medição em
   BRAND-TOKENS.md §2.

   O recorte vive no próprio canvas (destination-in), então aqui não
   entra overflow nem contain: não há filho que possa vazar. */
.silencio canvas.agua,.situar-secao canvas.agua{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:.4;
}
/* ---------- duotone da água: a metade que mora no CSS ----------
   hero.js pinta o duotone no próprio canvas (ctx.filter) só onde isso
   sai barato. Em tela estreita ou aparelho de toque ele desliga o
   filtro por quadro — custo alto no canvas 2D — e delega a cor ao
   compositor, que resolve na GPU de uma vez só.

   Esta é a outra metade. A condição TEM de espelhar `corNoCompositor`
   em hero.js:50. Se as duas divergirem, a água ou perde a cor ou
   recebe o duotone duas vezes. Mexeu numa, mexe na outra.

   O filtro é aplicado ao canvas já recortado (destination-in): fora da
   mancha o pixel é transparente, e alfa zero continua zero depois de
   brightness/contrast — não há halo na borda da tinta. */
@media (max-width:820px),(pointer:coarse){
  .silencio canvas.agua,.situar-secao canvas.agua{filter:var(--filtro-agua)}
}
/* A Hero conserva 40% de água. Quem conduz mantém o vídeo mascarado
   em 10%, sob o véu de leitura compartilhado. */
.situar-secao canvas.situar-sumi-video{opacity:.1}
/* o vídeo só alimenta o canvas: fica no documento, invisível, sem
   ocupar espaço e sem receber ponteiro */
.agua-fonte{
  position:absolute;left:0;top:0;width:1px;height:1px;
  opacity:0;pointer-events:none;
}
/* o cacho de esferas SUBSTITUI o ponteiro; os dois juntos brigam.
   Só onde existe ponteiro fino — no toque não há cacho e esconder
   o cursor não faria sentido nenhum */
@media (hover:hover) and (pointer:fine){
  .cursor-liquido .silencio.palco{cursor:none}
}

.silencio .wrap{position:relative;z-index:2}

/* ---------- véu de leitura ----------
   Pertence à seção inteira, entre o canvas e o conteúdo. A sangria de
   um pixel cobre arredondamentos do navegador sob zoom e elimina frestas
   nas bordas. O mesmo véu atua em Quem conduz. */
.silencio::before,.situar-secao::before{
  content:'';
  position:absolute;
  /* A sangria mínima cobre arredondamentos de pixel em qualquer zoom. */
  inset:-1px;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 54%,
    rgba(var(--vapor-rgb),.30) 0%,
    rgba(var(--vapor-rgb),.30) 74%,
    rgba(var(--vapor-rgb),0)   100%);
}
/* símbolo quadrado. o círculo Vapor some sobre o fundo Vapor
   e sobra só a forma em Águas profundas */
.silencio .simbolo{width:206px;margin:0 auto var(--space-5);opacity:.92}
/* o canvas do símbolo líquido é bem maior que o desenho: a margem em
   volta é o espaço por onde o ponteiro se aproxima. Por isso ele não
   leva a largura de 206px da imagem, e sim o teto da coluna. */
.silencio .simbolo-liquido{
  display:block;margin:0 auto var(--space-4);
  max-width:100%;
}
.silencio .simbolo-liquido[hidden]{display:none}
.silencio .simbolo-reserva[hidden]{display:none}
.silencio h1{
  font-size:var(--fs-d1);
  font-weight:var(--fw-light);
  line-height:1.12;
  max-width:18ch;margin-inline:auto;
}
.silencio p{
  margin-top:var(--space-5);
  font-size:var(--fs-body-s);
  /* --fg-3 era o natural aqui, e sobre Vapor chapado funcionava. Sobre
     a água ele cai para 2,06:1 no pior quadro, e nenhum véu razoável
     resolve: a 22% ainda é 2,63:1. A quietude desta linha passa a vir
     do tamanho e do tracking, não da cor. */
  color:var(--fg-1);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
}

/* ---------- dobra 2 · submersão ---------- */
.submersao{
  position:relative;z-index:1;
  background:var(--bg-dark);
  color:var(--fg-inv-1);
  padding-block:var(--space-11);
}

/* Superfícies de água, nas duas bordas do bloco escuro.
   Saem para fora dele, por isso .submersao não pode ter overflow hidden.
   A altura vem de onda.js, a partir da configuração. O valor abaixo é só
   o que aparece se o JavaScript não carregar. */
.onda{
  position:absolute;left:0;right:0;z-index:3;
  width:100%;
  height:clamp(34px,4.5vw,64px);
  pointer-events:none;
}
.onda path{fill:var(--bg-dark)}

.onda-topo{top:0;transform:translateY(-99%)}
.onda-base{bottom:0;transform:translateY(99%) scaleY(-1)}
/* recorte fixo. a imagem nunca escapa daqui */
.submersao-foto{
  position:absolute;inset:0;
  overflow:hidden;contain:paint;
}
/* o plano é o que inclina e desloca. nasce maior que o recorte,
   por isso a borda não aparece. A escala vem de parallaxe.js */
.submersao-plano{
  position:absolute;inset:0;
  background-image:url('../img/submersao.jpg');
  background-size:cover;background-position:center;
  opacity:.34;
  transform-origin:center;
  will-change:transform;
}
/* véu de Águas profundas. garante contraste do texto por cima */
.submersao-veu{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    var(--veu-1) 0%,
    var(--veu-2) 42%,
    var(--veu-1) 100%);
}
.submersao .wrap{position:relative;z-index:2}
.submersao .filete{background:var(--line-accent)}
.submersao h2{
  font-size:var(--fs-d2);
  font-weight:var(--fw-light);
  line-height:var(--lh-snug);
  max-width:22ch;
  text-wrap:balance;
}
.submersao .conducao{
  margin-top:var(--space-7);
  font-size:var(--fs-body-l);
  font-weight:var(--fw-light);
  line-height:var(--lh-loose);
  color:var(--fg-inv-1);
  max-width:34ch;
}
.submersao .apoio{
  margin-top:var(--space-6);
  color:var(--fg-inv-2);
  max-width:var(--measure);
}

/* ---------- seções ---------- */
/* fundo e z-index explícitos: o que vem depois da abertura precisa cobrir,
   nunca deixar a capa aparecer por baixo */
.secao{
  position:relative;z-index:1;
  background:var(--bg-page);
  padding-block:var(--space-10);
  border-bottom:1px solid var(--line-1);
}
.secao:last-of-type{border-bottom:0}
.secao-cabeca{margin-bottom:var(--space-8);max-width:var(--measure)}
.secao-cabeca h2{
  font-size:var(--fs-d2);
  font-weight:var(--fw-light);
  line-height:var(--lh-snug);
  margin-top:var(--space-3);
}
.secao-cabeca h2 b{font-weight:var(--fw-bold)}
.secao-cabeca p{margin-top:var(--space-5);color:var(--fg-2);font-size:var(--fs-body-l);font-weight:var(--fw-light)}

.prosa p+p{margin-top:var(--space-5)}
.prosa{max-width:var(--measure);color:var(--fg-2)}
.prosa strong{font-weight:var(--fw-semibold);color:var(--fg-1)}

/* ============================================================
   O QUE SUSTENTA · os três eixos como história presa

   Versão clara do mecanismo estudado na BASE 2: a seção prende,
   a rolagem troca a lâmina e o passo, e o índice à esquerda nomeia
   os três eixos e leva até eles ao clique.

   As fotos são os elementos entregues em Vapor com alfa baixo,
   então cada lâmina é um cartão em Águas profundas com a foto por
   cima: o contexto escuro para o qual elas foram desenhadas.

   Solta (tela estreita, toque, movimento reduzido ou sem JS), a
   seção empilha os três passos com as imagens no fluxo.
   ============================================================ */
.sustenta{
  position:relative;z-index:1;
  background:var(--bg-page);
  border-bottom:1px solid var(--line-1);
  padding-top:0;
}
/* o cabeçalho vive DENTRO do palco: preso, ele fica na tela junto
   com os passos e não sobra vazio entre ele e o conteúdo */
.sustenta .secao-cabeca{margin-bottom:var(--space-6)}

.sustenta-pista{position:relative;padding-block:var(--space-9)}
.sustenta-palco{position:relative;overflow:hidden;isolation:isolate}
.sustenta-unicorn-cena{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;background:var(--bg-page);contain:layout paint}
.sustenta-unicorn-cena canvas,.sustenta-unicorn-cena iframe{width:100%!important;height:100%!important}
.sustenta-sumi{
  position:absolute;left:50%;top:50%;z-index:0;
  width:max(138vw,1200px);aspect-ratio:811.5/218.33;
  background:url('../img/suminagashi.svg') center/100% 100% no-repeat;
  opacity:.05;pointer-events:none;
  transform:translate3d(calc(-50% + var(--sustenta-sumi-x, -240px)),-50%,0) scale(1.08);
  transform-origin:center;will-change:transform;
}
.sustenta-palco>.wrap{position:relative;z-index:1}
.sustenta.unicorn-carregada .sustenta-sumi{display:none}
.sustenta.unicorn-falha .sustenta-unicorn-cena{display:none}
.sustenta-grade{display:grid;gap:var(--space-7)}

.sustenta-indice{display:none}
.sustenta-midia{display:none}

/* ---- solta: passos empilhados ---- */
.sustenta .passo{
  display:grid;grid-template-columns:280px 1fr;
  gap:var(--space-6);align-items:start;
  padding-block:var(--space-6);
  border-top:1px solid var(--line-1);
}
.sustenta .passo:first-child{border-top:0}
.passo-img{
  background:var(--bg-dark);
  aspect-ratio:3/4;overflow:hidden;
}
.passo-img img{width:100%;height:100%;object-fit:cover;filter:var(--filtro-agua)}
.sustenta .passo .num{
  display:block;
  font-size:var(--fs-h5);line-height:1;
  font-weight:var(--fw-light);
  letter-spacing:var(--tracking-display);
  color:var(--fg-rotulo);
  font-variant-numeric:tabular-nums;
}
.sustenta .passo h3{
  font-size:var(--fs-d3);
  font-weight:var(--fw-semibold);
  margin-block:var(--space-3) var(--space-4);
}
.sustenta .passo p{color:var(--fg-2);max-width:46ch;line-height:var(--lh-loose)}
.sustenta .passo>.num,.sustenta .passo>h3,.sustenta .passo>p{grid-column:2}
.sustenta .passo>.passo-img{grid-column:1;grid-row:1 / span 3}

/* ---- presa: palco fixo, lâminas como nível de água ---- */
.sustenta.presa .sustenta-pista{height:230vh;padding-block:0}
.sustenta.presa .sustenta-palco{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;
  overflow:clip;                 /* nada vaza para a seção de baixo */
}
.sustenta.presa .sustenta-palco>.wrap{width:100%}
.sustenta.presa .sustenta-grade{
  grid-template-columns:220px minmax(280px,400px) 1fr;
  align-items:center;width:100%;
}

.sustenta.presa .sustenta-indice{display:grid;gap:var(--space-3)}
.sustenta-indice button{
  display:flex;align-items:baseline;gap:var(--space-3);
  background:none;border:0;
  padding:var(--space-1) 0 var(--space-1) var(--space-3);
  border-left:2px solid transparent;
  font-family:inherit;font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-micro);text-transform:uppercase;
  font-weight:var(--fw-medium);
  color:var(--fg-3);cursor:pointer;text-align:left;
  opacity:.5;                     /* inativo recua; o ativo acende */
  transition:color var(--dur-1) var(--ease-agua),
             border-color var(--dur-1) var(--ease-agua),
             opacity var(--dur-1) var(--ease-agua);
}
.sustenta-indice .curto{display:none}
.sustenta-indice button i{
  font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--fg-rotulo);
}
.sustenta-indice button:hover{color:var(--fg-1);opacity:1}
.sustenta-indice button:focus-visible{outline:2px solid var(--fg-1);outline-offset:3px}
.sustenta-indice button[aria-current="true"]{
  color:var(--fg-1);opacity:1;
}

.sustenta.presa .sustenta-midia{
  display:block;position:relative;
  aspect-ratio:3/4;              /* o retrato das fotos: nada e cortado */
  height:min(50svh,470px);width:auto;
  max-width:100%;
  justify-self:center;
  /* as lâminas animam clip-path, o que também as compõe em camada:
     mesmo motivo do contain:paint dos campos de Suminagashi */
  overflow:hidden;contain:paint;
  background:var(--bg-dark);
  box-shadow:var(--shadow-1);
}
/* A lâmina sobe com crista, não com régua. A borda é uma polilinha
   de 16 pontos traçada por dois senos de frequências não múltiplas,
   a mesma gramática das cristas entre seções.

   Fechada, a crista descansa fora do quadro; cheia, a borda é reta.
   Como os dois estados têm a mesma contagem de vértices, o navegador
   interpola ponto a ponto: a onda entra forte e vai assentando à
   medida que a água sobe, que é o que a água faz mesmo. E reverte
   sozinha ao rolar de volta. */
.lamina-eixo{
  position:absolute;inset:0;
  background:var(--bg-dark);
  clip-path:polygon(0.00% 114.55%, 6.67% 112.60%, 13.33% 109.56%, 20.00% 109.36%, 26.67% 109.58%, 33.33% 106.13%, 40.00% 100.88%, 46.67% 100.30%, 53.33% 106.51%, 60.00% 113.63%, 66.67% 115.01%, 73.33% 111.31%, 80.00% 108.37%, 86.67% 108.52%, 93.33% 107.97%, 100.00% 103.96%, 100% 100%, 0% 100%);
  transition:clip-path 1100ms var(--ease-agua);
}
.lamina-eixo img{width:100%;height:100%;object-fit:cover;filter:var(--filtro-agua)}

/* ---------- a cor sob o ponteiro ----------
   A mesma fotografia, uma segunda vez, sem o duotone. Fica invisível
   até o ponteiro chegar: uma máscara radial abre um halo de matiz
   original em volta do cursor, e fecha atrás dele.

   O halo persegue o ponteiro com atraso, conduzido por pan.js. Esse
   atraso é o efeito: a cor não acompanha o mouse, ela demora um
   instante, como coisa que se move dentro d'água.

   Mesmo arquivo do <img> de baixo: o navegador reaproveita, nenhum
   download a mais. Com o raio em 0 a máscara não revela nada, que é o
   estado em repouso e o estado permanente onde não há ponteiro. */
.lamina-eixo img.cor{
  position:absolute;inset:0;
  filter:none;
  /* Um sopro, nao uma revelacao. A 100% a matiz original destoava de
     uma pagina que vive inteira em saturacao baixa; a 50% ainda puxava
     a foto para fora da paleta. Em 20% o que passa e brilho: percebe-se
     que ha cor ali sem que a cor tome conta. */
  opacity:.2;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(circle var(--cor-r,0px)
                     at var(--cor-x,50%) var(--cor-y,50%),
                     #000 55%, transparent 100%);
          mask-image:radial-gradient(circle var(--cor-r,0px)
                     at var(--cor-x,50%) var(--cor-y,50%),
                     #000 55%, transparent 100%);
}
.lamina-eixo.ativa{clip-path:polygon(0.00% 0%, 6.67% 0%, 13.33% 0%, 20.00% 0%, 26.67% 0%, 33.33% 0%, 40.00% 0%, 46.67% 0%, 53.33% 0%, 60.00% 0%, 66.67% 0%, 73.33% 0%, 80.00% 0%, 86.67% 0%, 93.33% 0%, 100.00% 0%, 100% 100%, 0% 100%)}

.sustenta.presa .passo{display:block;border-top:0;padding:0;margin:0}
.sustenta.presa .passo-img{display:none}
/* Os três passos dividem a mesma célula do grid: sobrepõem-se, e o
   contêiner assume sozinho a altura do mais alto.

   Antes eram absolutos dentro de um min-height fixo. Esse piso era um
   chute que não acompanhava a quebra de linha: em tela estreita o texto
   ganha linhas, o passo cresce, e o piso continuava no mesmo lugar. */
.sustenta.presa .sustenta-passos{position:relative;display:grid;align-items:center}
.sustenta.presa .passo{
  grid-area:1/1;
  opacity:0;transform:translateY(30px);
  transition:opacity 650ms var(--ease-agua),transform 650ms var(--ease-agua);
  pointer-events:none;
}
.sustenta.presa .passo.ativa{
  opacity:1;transform:none;
  pointer-events:auto;
  transition-delay:170ms;
}

/* ============================================================
   CENA COM VÍDEO CONTROLADO PELA ROLAGEM

   Fundo escuro, e isso não é escolha estética solta. Com o vídeo em
   opacidade alta, texto escuro sobre ele daria 2:1. Sobre Águas
   profundas o texto em Vapor fica entre 4,7:1 e 8,7:1 em toda a faixa
   de opacidade, porque as duas superfícies são escuras.
   ============================================================ */

.cena{position:relative;background:var(--bg-dark)}
.cena-presa{height:var(--cena-altura,380vh)}

.cena-palco{
  position:relative;
  display:grid;align-items:center;
  overflow:hidden;
  background:var(--bg-dark);
  color:var(--fg-inv-1);
  padding-block:var(--space-9);
}
.cena-presa .cena-palco{position:sticky;top:0;height:100svh;padding-block:0}
.cena-palco h2{color:var(--fg-inv-1)}

.cena-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.35;                  /* cena.js assume daqui em diante */
  pointer-events:none;
}
/* véu de Águas profundas: puxa o azul do vídeo para dentro da paleta */
.cena-tinta{
  position:absolute;inset:0;
  background:var(--bg-dark);
  mix-blend-mode:color;
  opacity:.35;
  pointer-events:none;
}
.cena-conteudo{position:relative;z-index:2}

/* Barra de progresso da cena.
   Existe para o usuário perceber que a seção presa tem fim, e não
   achar que a página travou nem rolar por cima do efeito.
   Pertence à fase de espera: nasce invisível e sobe quando a
   animação termina. */
.cena-barra-area{
  position:absolute;left:0;right:0;bottom:15px;z-index:3;
  width:100%;max-width:var(--max-width);
  margin-inline:auto;padding-inline:var(--space-6);
  pointer-events:none;
  opacity:0;
}
.cena-barra{
  height:var(--cena-barra,2px);
  background:var(--line-inv);
  overflow:hidden;
}
.cena-barra-fill{display:block;height:100%;width:0;background:var(--line-accent)}
.cena-simples .cena-barra-area{display:none}

/* O rótulo ocupa a coluna final; o título percorre o palco até ela. */
.cena-cabeca{width:fit-content}
.cena-cabeca h2{will-change:transform}
.cena-titulo-linha{position:relative;display:block;width:fit-content;max-width:100%}
/* A máscara só é ativada quando a cena está sob controle do JavaScript.
   Assim, sem script ou com movimento reduzido, o título segue legível. */
.cena-revela-ativa .cena-titulo-linha{
  clip-path:inset(0 calc((1 - var(--cena-revela,1)) * 100%) 0 0);
  opacity:var(--cena-revela,1);
  will-change:clip-path,opacity;
}

.cena-revela-ativa .cena-titulo-linha::after{
  content:"";position:absolute;z-index:1;top:12%;bottom:12%;
  left:calc(var(--cena-revela,1) * 100%);width:1px;
  background:var(--line-accent);opacity:calc(1 - var(--cena-revela,1));
  box-shadow:0 0 8px color-mix(in srgb,var(--line-accent),transparent 35%);
}

/* Cartões na variante escura, em vidro jateado.

   O blur aqui não é decoração, é legibilidade: sem ele o texto fica
   sobre um fundo que muda de brilho a cada frame do vídeo, e a leitura
   oscila. O blur congela esse fundo numa mancha estável.

   backdrop-filter é caro, porque o navegador reborra o fundo a cada
   quadro e aqui o fundo é vídeo em movimento. Por isso: raio baixo,
   só nos três cartões, nunca em área cheia. */
.cena .oferta{
  background:rgba(var(--vidro-rgb),var(--cena-vidro-tinta,.55));
  -webkit-backdrop-filter:blur(var(--cena-vidro,12px)) saturate(.9);
  backdrop-filter:blur(var(--cena-vidro,12px)) saturate(.9);
  border-color:var(--line-inv);
  color:var(--fg-inv-1);
  transition:opacity var(--dur-2) var(--ease-agua),
             transform var(--dur-2) var(--ease-agua);
}
.cena .oferta:hover,.cena .oferta:focus-visible{
  background:rgba(var(--vidro-rgb),calc(var(--cena-vidro-tinta,.55) + .12));
  border-color:var(--fg-inv-2);
}
.cena .oferta p{color:var(--fg-inv-2)}
.cena .oferta h3{color:var(--fg-inv-1)}

/* navegador sem backdrop-filter recebe o mesmo tom, sem borrar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cena .oferta{background:rgba(var(--vidro-rgb),.82)}
}

/* Modo solto: a seção rola normalmente, mas o vídeo continua ao fundo
   reagindo à rolagem. O palco NÃO leva o poster como background-image:
   o atributo poster do próprio <video> já cobre a espera e, por estar
   dentro do elemento, herda a opacidade e o filtro. */
.cena-simples .cena-palco{background:var(--bg-dark)}

@media (prefers-reduced-motion:reduce){
  .cena .oferta{transition:none}
}

/* ---------- cartões de oferta ---------- */
.ofertas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.oferta{
  display:flex;flex-direction:column;
  border:1px solid var(--line-1);
  border-radius:var(--r-0);
  box-shadow:var(--shadow-1);
  background:var(--bg-recess);
  padding:var(--space-6);
  text-decoration:none;color:inherit;
  transition:background var(--dur-2) var(--ease-agua),border-color var(--dur-2) var(--ease-agua);
}
.oferta:hover,.oferta:focus-visible{background:var(--bg-page);border-color:var(--line-2)}
.oferta h3{
  font-size:var(--fs-d3);
  font-weight:var(--fw-semibold);
  margin-block:var(--space-4) var(--space-4);
}
.oferta p{font-size:var(--fs-body-s);color:var(--fg-2);line-height:var(--lh-loose);flex:1}
/* ---------- chamada líquida do cartão ----------

   Porte do "Liquid UI Elements" do catálogo (projeto 05), com a
   config homologada: duração 1200 · fusão 4,25.
   A cor ativa da config era #2F3D37; virou Barro em teste. Ver a
   ressalva de contraste em .ir-onda.

   Três coincidências dispensaram conversão: a curva do catálogo é
   cubic-bezier(.22,.61,.36,1), que já é o nosso --ease-agua; 1200ms
   já é --dur-4; e o raio 4px do recorte já é --r-2. O catálogo foi
   escrito na paleta da Pan: o --ui-black dele é #59645F, que é o
   nosso --pan-profundas-80, e o --ui-active é --pan-profundas-100.

   O gatilho é o cartão inteiro, não a chamada. O cartão já é o
   link, e um <button> dentro de um <a> seria marcação inválida. A
   chamada segue <span> e só ganha superfície.

   O rótulo é Vapor nos DOIS estados, nunca em transição de cor: 5,20:1
   em repouso e 9,62:1 cheio. Se ele acompanhasse a onda, no meio do
   caminho ficaria sobre bolha parcial, com contraste indefinido. */
.oferta .ir{
  position:relative;
  /* display explícito, e não herdado: o cartão é flex e hoje
     blockifica o span sozinho, mas overflow e contain não valem em
     inline não substituído. Se o cartão deixar de ser flex, o recorte
     do botão some sem aviso */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:var(--space-6);
  padding:var(--space-3) var(--space-5);
  /* mesma largura do botão do catálogo. os três rótulos têm tamanhos
     diferentes e, lado a lado no rodapé dos cartões, larguras
     desiguais deixam a fileira torta. cabe o mais longo com folga */
  min-width:158px;
  border-radius:var(--r-2);
  background:var(--pan-profundas-80);
  color:var(--fg-inv-1);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  /* o recorte do botão é daqui, não de um <clipPath>: o clip do
     catálogo é um rect de 132x45 esticado, e num botão mais largo o
     canto sai elíptico. contain:paint também é o que segura camada
     composta no WebKit do iPhone, onde overflow:hidden sozinho vaza */
  overflow:hidden;
  contain:paint;
}
.oferta .ir-rotulo{position:relative;z-index:1}
.oferta .ir-onda{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;overflow:visible;
  /* o preenchimento é Barro, o único acento quente da marca. Em
     Águas profundas a onda dava 1,26:1 contra o vidro do cartão e o
     botão RECUAVA no hover, ao contrário do que um hover pede. Barro
     inverte isso: o botão avança.

     ⚠ O rótulo Vapor sobre Barro puro dá 3,48:1 e REPROVA AA para
     texto de 13px, que exige 4,5:1. Está assim a pedido, para
     avaliação. Trocar por #96552F resolve com 4,88:1 e quase o mesmo
     laranja — é o valor que BRAND-TOKENS.md §2 já registra como a
     alternativa acessível ao Barro. --pan-barro-s70 também passa,
     com 4,76:1, mas escurece mais o tom. */
  fill:var(--pan-barro);
  pointer-events:none;
}
/* filtro no <g>, e não em cada círculo: a fusão só acontece se o
   desfoque enxergar as cinco bolhas de uma vez */
.oferta .ir-onda g{filter:url(#liq-goo)}
.oferta .ir-onda circle{transition:transform var(--dur-4) var(--ease-agua)}

/* repouso: as cinco fora do quadro, cada uma por um lado */
.oferta .ir-onda .liq-1{transform:translate(-16px,-40px)}
.oferta .ir-onda .liq-2{transform:translate(8px,40px)}
.oferta .ir-onda .liq-3{transform:translate(40px,-40px)}
.oferta .ir-onda .liq-4{transform:translate(4px,40px)}
.oferta .ir-onda .liq-5{transform:translate(-40px,40px)}

.oferta:hover .ir-onda circle,
.oferta:focus-visible .ir-onda circle{transform:translate(0,0)}

/* na posição final as cinco bolhas não cobrem o botão inteiro: sobram
   vãos no topo e no canto direito, que só a fusão do filtro fecha, e
   ela varia de navegador para navegador. Perto do fim da onda o fundo
   vira Barro e nenhum vão de #59645F fica à mostra. A saída é imediata */
.oferta:hover .ir,
.oferta:focus-visible .ir{
  background-color:var(--pan-barro);
  transition:background-color var(--dur-2) var(--ease-agua) calc(var(--dur-4) * .55);
}

/* sobre o vídeo o botão precisa de aresta própria: a claridade do
   quadro varia, e há trecho em que o #59645F em repouso encosta no
   vidro do cartão (1,06:1) e o botão sumiria como forma. Cheio de
   Barro isso não acontece, mas o repouso é o estado padrão */
.cena .oferta .ir{border:1px solid var(--line-inv)}

.liq-defs{position:absolute;width:0;height:0}

@media (prefers-reduced-motion:reduce){
  .oferta .ir-onda circle{transition:none}
  .oferta:hover .ir,.oferta:focus-visible .ir{transition:none}
}

/* ---------- o que sustenta, presa em tela estreita ----------
   Mesmo fluxo do desktop: a seção prende, a rolagem troca lâmina e
   passo, o índice acompanha. Só a arrumação muda: coluna única, com
   o índice virando fileira de rótulos curtos no topo. Isso não é
   scroll-jacking: a página rola normal, a seção só se demora. */
@media (max-width:1024px){
  /* ORÇAMENTO DE ALTURA — tudo daqui para baixo existe para o conteúdo
     caber em 100svh.

     No inspetor do computador não há barra de navegador dinâmica, então
     svh, lvh e dvh valem o mesmo e sobra espaço. No iPhone o svh desconta
     as barras do Chrome e o palco fica uns 180px mais baixo. Como o palco
     tem overflow:clip, o que não coube não transborda: é cortado no meio
     da frase, e a seção seguinte parece estar comendo o texto.

     Medido: com 569px de janela o conteúdo pedia 695px. A foto era o item
     mais caro, presa a 52vw de largura com proporção 3/4, o que a fazia
     crescer em altura justamente onde não há altura. Agora ela é dimensionada
     pela altura disponível, e a largura decorre da proporção. */
  .sustenta.presa .sustenta-grade{
    grid-template-columns:1fr;
    gap:var(--space-4);
    align-items:start;
  }
  .sustenta.presa .secao-cabeca{margin-bottom:var(--space-4)}
  .sustenta.presa .secao-cabeca h2{font-size:var(--fs-d3)}

  .sustenta.presa .sustenta-indice{
    display:flex;flex-wrap:wrap;
    gap:var(--space-2) var(--space-4);
  }
  .sustenta.presa .sustenta-indice button{
    padding:var(--space-1) 0 var(--space-1) var(--space-2);
  }
  .sustenta-indice .longo{display:none}
  .sustenta-indice .curto{display:inline}

  /* A foto recebe a altura que sobra, não uma fração da tela.

     O resto do palco (cabeçalho, índice, texto do passo) custa por volta
     de 400px e NÃO encolhe com a tela. Tirar uma fração do svh fazia a
     foto minguar em aparelho alto sem necessidade, e ainda assim estourar
     no baixo. Subtraindo o custo fixo, a folga fica constante em ~50px
     em toda a faixa e a foto usa tudo que sobra. */
  .sustenta.presa .sustenta-midia{
    /* Em tela estreita o quadro deixa de seguir a proporção da foto e
       passa a ocupar a coluna inteira. A altura continua vindo do
       orçamento; a largura é toda a que houver, e o object-fit:cover das
       lâminas recorta pelo centro.

       aspect-ratio:auto é obrigatório aqui: a regra base fixa 3/4, e com
       width:100% a altura passaria a ser derivada da largura, estourando
       o palco de novo. */
    aspect-ratio:auto;
    height:clamp(140px, calc(100svh - 450px), 280px);
    width:100%;
    justify-self:stretch;
  }

  /* Enquadramento por foto.

     O recorte central serve para duas das três, mas na corporal as duas
     pessoas de frente para a câmera vivem no terço de cima do original:
     as cabeças estão entre as linhas 40 e 350 de 1195, e o quadro central
     começa na 250. Cortava as duas. Ancorado no topo, entram inteiras.

     Vale só aqui: no desktop o quadro tem a mesma proporção da foto e
     não há recorte para posicionar. */
  .sustenta.presa .lamina-eixo[data-foco="topo"] img{object-position:50% 0%}
  /* na terapêutica o corte central perdia o cabelo da condutora no topo,
     mas 0% raspava o queixo de quem flutua, na linha 693 de uma janela
     que termina na 694. 6% deixa folga parecida nas duas pontas. */
  .sustenta.presa .lamina-eixo[data-foco="alto"] img{object-position:50% 6%}
  .sustenta.presa .passo p{max-width:none}
}

/* ---------- carta d'água ---------- */
.textos{border-top:1px solid var(--line-1)}
.texto{
  display:grid;grid-template-columns:130px 1fr auto;
  gap:var(--space-6);align-items:baseline;
  padding-block:var(--space-6);
  border-bottom:1px solid var(--line-1);
  text-decoration:none;color:inherit;
  transition:background var(--dur-1) var(--ease-agua);
}
.texto:hover{background:var(--bg-recess)}
.texto .cat{
  font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-micro);
  text-transform:uppercase;color:var(--fg-3);
}
.texto h3{font-size:var(--fs-h5);font-weight:var(--fw-light);line-height:var(--lh-snug)}
.texto .data{font-size:var(--fs-meta);color:var(--fg-3);font-variant-numeric:tabular-nums}


/* ============================================================
   MARÉ · campo semântico em deriva
   Faixa clara entre a cena escura e a carta em pedra. Os seis
   verbos de processo do LINGUAGEM em laço lento; a rolagem soma
   uma deriva por cima, conduzida por pan.js.
   ============================================================ */
.mare{
  position:relative;z-index:1;
  /* o trilho tem milhares de pixels de largura: sem contain:paint ele
     escapa do recorte no iOS e alarga o documento inteiro */
  overflow:hidden;contain:paint;white-space:nowrap;
  background:var(--bg-page);
  padding-block:var(--space-8);
  cursor:grab;
  /* pan-y deixa a rolagem vertical da página passar; só o gesto
     horizontal fica conosco. É o que torna o arrasto vivível no toque */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.mare.arrastando{cursor:grabbing}
.mare-deriva{will-change:transform}
/* 330s porque a lista quadruplicou: o que importa é a velocidade
   em px/s, não o tempo da volta. Maré, não letreiro de loja.

   Sem `will-change` de propósito: o elemento tem mais de 7000px de
   largura e a dica forçaria uma camada permanente desse tamanho na
   memória do aparelho. A animação de transform já é composta
   enquanto roda, que é quando a suavidade importa. */
.mare-trilho{display:inline-block;animation:mare 330s linear infinite}
.mare span{
  font-size:var(--fs-mare);
  font-weight:var(--fw-extralight);
  letter-spacing:var(--tracking-display);
  color:var(--fg-3);
}
.mare i{font-style:normal;color:var(--line-accent);margin-inline:var(--space-5)}
@keyframes mare{to{transform:translateX(-50%)}}

/* ============================================================
   CARTA D'ÁGUA · seção em Pedra úmida

   Fundo no degrau de leitura da pedra (s85): a pedra pura deixa o
   Vapor a 4,24:1 e reprova AA. O Barro morre sobre a pedra (1,2:1),
   então o acento aqui é o Barro 20 da escala, que passa como
   elemento gráfico (3,8:1).

   O Suminagashi de fundo é a versão em Vapor, em duas folhas que
   derivam sozinhas e respondem ao cursor com mola subamortecida,
   conduzidas por pan.js.
   ============================================================ */
.carta-viva{
  position:relative;
  background:var(--pan-pedra-s85);
  border-bottom:0;
  overflow:hidden;
  padding-block:var(--space-9);      /* era --space-10 herdado de .secao */
}
/* a seção é lista, não manifesto: título um degrau abaixo do
   das demais e cabeçalho mais justo */
.carta-viva .secao-cabeca{margin-bottom:var(--space-6)}
.carta-viva .secao-cabeca h2{font-size:var(--fs-d3)}
.carta-viva .secao-cabeca p{font-size:var(--fs-body);margin-top:var(--space-4)}
.carta-viva .texto{padding-block:var(--space-5)}
.carta-viva .texto h3{font-size:var(--fs-h6)}
.carta-viva .wrap{position:relative;z-index:1}

.sumi-campo-carta{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;contain:paint;
}
.sumi-carta{
  position:absolute;inset:-14%;
  background:url('../img/suminagashi-vapor.svg') center no-repeat;
  background-size:cover;
  opacity:.05;   /* era .07, reduzido 30% a pedido */
  transform-origin:center;
  will-change:transform;
}

.carta-viva .filete{background:var(--pan-barro-20)}
.carta-viva .eyebrow{color:var(--pan-vapor-100)}
.carta-viva .secao-cabeca h2{color:var(--pan-vapor-100)}
.carta-viva .secao-cabeca p{color:var(--pan-profundas-10)}

.carta-viva .textos{border-top:1px solid var(--line-inv)}
.carta-viva .texto{border-bottom:1px solid var(--line-inv)}
.carta-viva .texto:hover{background:var(--hover-inv)}
.carta-viva .texto .cat{color:var(--pan-vapor-100)}
.carta-viva .texto h3{color:var(--pan-vapor-100)}
.carta-viva .texto .data{color:var(--pan-profundas-10)}

/* ---------- citação líquida · Unicorn Studio ---------- */
.unicorn-citacao{
  position:relative;z-index:1;
  width:100%;height:clamp(400px,58svh,640px);
  overflow:hidden;contain:layout paint;
  background:#2f3d37;
}
.unicorn-citacao-cena{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:#2f3d37;
}

/* ---------- quem conduz · card editorial ---------- */
.situar-secao{position:relative;isolation:isolate;overflow:hidden;contain:paint}
.situar-secao>.wrap{position:relative;z-index:2}
.situar-card{
  display:flex;min-width:0;min-height:clamp(560px,62svh,660px);
  overflow:hidden;contain:paint;
  border:1px solid var(--line-1);border-radius:var(--r-0);
  background:var(--bg-recess);box-shadow:var(--shadow-1);
  transition:border-color var(--dur-3) var(--ease-agua),
             box-shadow var(--dur-3) var(--ease-agua);
}
.situar-card-media{
  position:relative;flex:0 0 56%;min-width:0;margin:0;
  overflow:hidden;background:var(--bg-dark);
  transition:flex-basis var(--dur-4) var(--ease-agua);
}
.situar-card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(47,61,55,.02) 28%,rgba(47,61,55,.82) 100%);
}
.situar-card-media img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:56% center;
  filter:saturate(.82) contrast(.96);
  transition:transform var(--dur-4) var(--ease-agua),
             filter var(--dur-3) var(--ease-agua);
}
.situar-card-identidade{
  position:absolute;z-index:1;left:var(--space-7);right:var(--space-7);bottom:var(--space-7);
  color:var(--fg-inv-1);
}
.situar-card-identidade .filete{background:var(--pan-barro-20)}
.situar-card-identidade .eyebrow{margin-top:var(--space-3);color:var(--fg-inv-2)}
.situar-card-identidade h2{
  max-width:15ch;margin-top:var(--space-3);
  font-size:clamp(var(--fs-d3),3.1vw,var(--fs-d1));
  font-weight:var(--fw-semibold);line-height:var(--lh-tight);
}
.situar-card-tagline{
  max-width:42ch;margin-top:var(--space-3);
  color:var(--fg-inv-2);font-size:var(--fs-body-s);line-height:var(--lh-normal);
}
.situar-card-resumo{
  max-width:48ch;max-height:8em;margin-top:var(--space-4);overflow:hidden;
  color:var(--fg-inv-2);font-size:var(--fs-body-s);line-height:var(--lh-loose);
  opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease-agua),
             transform var(--dur-3) var(--ease-agua),
             max-height var(--dur-3) var(--ease-agua),
             margin var(--dur-3) var(--ease-agua);
}
.situar-card-conteudo{
  display:flex;flex:1 1 44%;min-width:0;flex-direction:column;
  background:var(--bg-recess);
}
.situar-card-paineis{order:1;flex:1}
.situar-card.tabs-prontas .situar-card-paineis{display:grid;align-items:start}
.situar-card-painel{padding:var(--space-7)}
.situar-card.tabs-prontas .situar-card-painel{grid-area:1/1}
.situar-card-painel>.eyebrow{margin-bottom:var(--space-5)}
.situar-card-painel .prosa{max-width:none}
.situar-card-painel+.situar-card-painel{
  margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--line-1);
}
.situar-card.tabs-prontas .situar-card-painel+.situar-card-painel{margin-top:0;border-top:0}
.situar-card.tabs-prontas .situar-card-painel:not(.is-active){display:none}
.situar-card.tabs-prontas .situar-card-painel.is-active{animation:situarPainelEntra var(--dur-2) var(--ease-agua) both}
@keyframes situarPainelEntra{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.situar-card-limite{
  margin-top:var(--space-7);padding:var(--space-5) var(--space-6);
  border-left:2px solid var(--line-accent);background:var(--bg-page);
  color:var(--fg-2);font-size:var(--fs-body-s);line-height:var(--lh-loose);
}
.situar-card-abas{
  order:2;display:none;margin-top:auto;border-top:1px solid var(--line-1);
  background:var(--bg-recess);
}
.situar-card.tabs-prontas .situar-card-abas{display:flex}
.situar-card-abas button{
  position:relative;isolation:isolate;overflow:hidden;contain:paint;
  flex:1 1 50%;min-height:58px;padding:var(--space-3) var(--space-4);
  border:0;border-bottom:3px solid transparent;background:transparent;
  color:var(--fg-3);cursor:pointer;font:inherit;
  font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-micro);text-transform:uppercase;
  transition:color var(--dur-1) var(--ease-agua),
             border-color var(--dur-1) var(--ease-agua),
             background var(--dur-1) var(--ease-agua);
}
/* O mesmo preenchimento líquido das chamadas de Práticas, agora
   aplicado às abas sem alterar sua semântica nem o filete ativo. */
.situar-card-abas .ir-rotulo{position:relative;z-index:2}
.situar-card-abas .ir-onda{
  position:absolute;left:0;top:0;z-index:1;
  width:100%;height:calc(100% - 3px);display:block;overflow:visible;
  fill:var(--pan-barro-s70);pointer-events:none;
}
.situar-card-abas .ir-onda g{filter:url(#liq-goo)}
.situar-card-abas .ir-onda circle{transition:transform var(--dur-4) var(--ease-agua)}
.situar-card-abas .ir-onda .liq-1{transform:translate(-16px,-40px)}
.situar-card-abas .ir-onda .liq-2{transform:translate(8px,40px)}
.situar-card-abas .ir-onda .liq-3{transform:translate(40px,-40px)}
.situar-card-abas .ir-onda .liq-4{transform:translate(4px,40px)}
.situar-card-abas .ir-onda .liq-5{transform:translate(-40px,40px)}
.situar-card-abas button.is-active{
  color:var(--fg-1);border-bottom-color:var(--line-accent);
  background:rgba(181,106,62,.05);
}
.situar-card-abas button:hover,.situar-card-abas button:focus-visible{color:var(--fg-inv-1)}
.situar-card-abas button:hover .ir-onda circle,
.situar-card-abas button:focus-visible .ir-onda circle{transform:translate(0,0)}
.situar-card-abas button:focus-visible{outline:2px solid var(--fg-1);outline-offset:-5px}
.situar-card-painel:focus-visible{outline:2px solid var(--line-accent);outline-offset:-6px}


@media (max-width:900px){
  .situar-card{display:block;min-height:0}
  .situar-card-media{width:100%;aspect-ratio:16/10}
  .situar-card-identidade{left:var(--space-6);right:var(--space-6);bottom:var(--space-6)}
  .situar-card-identidade h2{font-size:clamp(var(--fs-d3),7vw,var(--fs-d2))}
  .situar-card-resumo{display:none}
}

@media (max-width:640px){
  .situar-card-media{aspect-ratio:4/3}
  .situar-card-media img{object-position:58% center}
  .situar-card-identidade{left:var(--space-5);right:var(--space-5);bottom:var(--space-5)}
  .situar-card-tagline{font-size:var(--fs-meta)}
  .situar-card-painel{padding:var(--space-6) var(--space-5)}
  .situar-card-limite{padding:var(--space-4) var(--space-5)}
  .situar-card-abas button{min-height:62px;padding-inline:var(--space-2)}
}

@media (prefers-reduced-motion:reduce){
  .situar-card,.situar-card-media,.situar-card-media img,.situar-card-resumo{transition:none}
  .situar-card-abas .ir-onda circle{transition:none}
  .situar-card.tabs-prontas .situar-card-painel.is-active{animation:none}
}

/* ---------- casca das páginas internas ---------- */
.casca{padding-block:var(--space-10) var(--space-9);border-bottom:1px solid var(--line-1)}
.casca h1{
  font-size:var(--fs-d2);
  font-weight:var(--fw-light);
  line-height:var(--lh-snug);
  margin-top:var(--space-4);
  max-width:16ch;
}
.casca h1 b{font-weight:var(--fw-bold)}
.casca .medida{margin-top:var(--space-6);color:var(--fg-2)}
.rascunho{
  margin-top:var(--space-8);
  padding:var(--space-5) var(--space-6);
  border:1px dashed var(--line-2);
  font-size:var(--fs-body-s);
  color:var(--fg-3);
  max-width:var(--measure);
}
.sub-itens{margin-top:var(--space-7);list-style:none;border-top:1px solid var(--line-1);max-width:var(--measure)}
.sub-itens li{padding-block:var(--space-4);border-bottom:1px solid var(--line-1);color:var(--fg-2)}

/* ---------- rodapé ---------- */
.rodape{
  position:relative;z-index:1;
  background:var(--bg-dark);color:var(--fg-inv-2);
  padding-block:var(--space-9) var(--space-7);
}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-8)}
.rodape img{width:88px;margin-bottom:var(--space-5)}
.rodape h4{
  font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-micro);
  text-transform:uppercase;font-weight:var(--fw-medium);
  color:var(--fg-rotulo-inv);margin-bottom:var(--space-4);
}
.rodape ul{list-style:none;display:grid;gap:var(--space-3)}
.rodape a{color:var(--fg-inv-2);text-decoration:none;font-size:var(--fs-body-s)}
.rodape a:hover{color:var(--fg-inv-1);text-decoration:underline;text-decoration-color:var(--line-accent)}
.rodape .assinatura{
  margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:1px solid var(--line-inv);
  font-size:var(--fs-meta);color:var(--fg-inv-2);
  display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
}
.rodape .assinatura p{max-width:60ch}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width:1024px){
  .submersao{padding-block:var(--space-10)}
  .secao{padding-block:var(--space-9)}
  .ofertas{grid-template-columns:1fr 1fr}
  .rodape-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .wrap{padding-inline:var(--space-5)}

  /* ---------- menu em gaveta ----------
     Movimento inspirado no hamburger de Erik Terwan (MIT, 2015):
     painel preso à borda esquerda, escondido por translate, entrando
     ao toque. Fica o gesto; sai a metamorfose do ícone em X, que é
     ruído de interface e não pertence à contenção da marca.

     A visibilidade acompanha o transform para a gaveta fechada sair
     da ordem de tabulação e do leitor de tela. */
  .abrir-menu{display:flex}

  .menu{
    /* a gaveta sai da direita, do mesmo lado do botão que a abre */
    position:fixed;inset:0 0 0 auto;z-index:2;
    width:min(84vw,360px);max-width:none;
    background:var(--bg-page);
    border-left:1px solid var(--line-1);
    border-bottom:0;
    padding:var(--space-10) var(--space-6) var(--space-8);
    overflow-y:auto;
    display:block;visibility:hidden;
    transform:translateX(100%);
    transition:transform var(--dur-2) var(--ease-agua),
               visibility 0s linear var(--dur-2);
  }
  .menu[data-aberto=true]{
    visibility:visible;transform:none;
    transition:transform var(--dur-2) var(--ease-agua),visibility 0s;
  }

  /* Fechar mora DENTRO da gaveta, e não no cabeçalho.
     Com a gaveta aberta o body ganha overflow:hidden para travar a
     rolagem de fundo, e isso faz o body virar contêiner de rolagem: o
     position:sticky do cabeçalho perde a âncora e a barra some da tela.
     Quem abriu o menu depois de rolar ficava sem nenhum jeito visível
     de fechar. Este botão não depende de nada externo. */
  .fechar-menu{
    position:absolute;top:var(--space-5);right:var(--space-5);
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;          /* alvo de toque confortável */
    padding:0;border:0;background:none;
    color:var(--fg-2);cursor:pointer;
    transition:color var(--dur-1) var(--ease-agua);
  }
  .fechar-menu svg{
    width:20px;height:20px;
    fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  }
  .fechar-menu:hover{color:var(--fg-1)}
  .fechar-menu:focus-visible{outline:2px solid var(--fg-1);outline-offset:2px}

  .menu-marca{
    display:block;width:114px;
    margin-bottom:var(--space-6);
    border-radius:var(--r-2);
  }
  .menu-marca:focus-visible{outline:2px solid var(--fg-1);outline-offset:4px}

  .menu ul{flex-direction:column;gap:0}
  .menu li{border-bottom:1px solid var(--line-1)}
  .menu li:last-child{border-bottom:0}
  .menu a{display:block;padding-block:var(--space-4);font-size:var(--fs-body-s)}

  [data-menu=aberto] .veu-menu{
    /* véu em Pedra úmida, o verde da marca: em Águas profundas ele lia como preto */
    background:rgba(var(--pedra-rgb,87,117,112),.5);
    pointer-events:auto;
    -webkit-backdrop-filter:blur(var(--veu-desfoque,12px));
    backdrop-filter:blur(var(--veu-desfoque,12px));
  }
  [data-menu=aberto] body{overflow:hidden}
  .topo-inner{position:relative}

  /* a cena respira mais e nunca prende */
  .cena-presa{height:auto}
  .cena-presa .cena-palco{position:relative;height:auto;padding-block:var(--space-8)}
  .cena-palco{padding-block:var(--space-8)}
  .cena-cabeca{width:auto;transform:none!important;margin-bottom:var(--space-7)}
  .cena-revela-ativa .cena-titulo-linha{clip-path:none;opacity:1}
  .cena-revela-ativa .cena-cabeca > .eyebrow{opacity:1}
.cena-revela-ativa .cena-titulo-linha::after{display:none}
  .cena .ofertas{gap:var(--space-4)}
  /* sem !important: o reveal por viewport precisa poder animar.
     o estado padrão é visível, então sem JavaScript nada some */
  .cena .oferta{opacity:1;transform:none}
  .cena-barra-area{display:none}

  /* a submersão para de deslizar. vira empilhamento simples */
  .silencio{position:relative;min-height:auto;padding-block:var(--space-9) var(--space-10)}
  .silencio h1{max-width:none}
  .silencio .simbolo{width:119px;margin-bottom:var(--space-5)}

  .submersao{padding-block:var(--space-9)}
  .submersao h2{max-width:none}
  .submersao .conducao{font-size:var(--fs-body);max-width:none}

  .secao{padding-block:var(--space-8)}
  .sustenta .passo{grid-template-columns:1fr}
  .sustenta .passo>.num,.sustenta .passo>h3,.sustenta .passo>p{grid-column:1}
  .sustenta .passo>.passo-img{grid-row:auto}

  .ofertas{grid-template-columns:1fr}
  .texto{grid-template-columns:1fr;gap:var(--space-2)}
  .texto .data{order:3}
  .rodape-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .rodape{padding-block:var(--space-8) var(--space-6)}
  .rodape .assinatura{margin-top:var(--space-6)}
}

@media (prefers-reduced-motion:reduce){
  .sustenta-sumi{
    transform:translate3d(-50%,-50%,0) scale(1.08);
    will-change:auto;
  }
  html{scroll-behavior:auto}
  .menu{transition:visibility 0s}
  .ham,.ham .linha{transition:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
  /* sem deslizamento. as duas dobras ficam empilhadas */
  .silencio{position:relative}
}

/* ---------- cursor líquido oficial ---------- */
.cursor-oficial{
  position:fixed;inset:0;z-index:90;
  width:100%;height:100%;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  html.cursor-liquido,html.cursor-liquido *{cursor:none!important}
}
@media (prefers-reduced-motion:reduce){
  .cursor-oficial{display:none}
}
/* ============================================================
   CARTA D’ÁGUA · carrossel editorial

   O SVG criado para os artigos permanece como matriz visual. O
   fundo vetorial foi derivado sem textos nem placeholder; conteúdo,
   imagens e metadados continuam semânticos e editáveis no HTML.
   A flutuação vive no slide e a escala no card, evitando disputa de
   transform entre os dois movimentos.
   ============================================================ */
.blog-carrossel{position:relative}
.blog-trilho{
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--space-4),2vw,var(--space-6));
  margin-inline:-8px;padding:16px 8px 24px;
  isolation:isolate;
}
.blog-slide{
  display:flex;min-width:0;
  transform-origin:center;
  animation:blog-flutua 8.8s var(--ease-agua) var(--flutua-atraso,0s) infinite;
}
.blog-card{
  container-type:inline-size;
  position:relative;isolation:isolate;
  display:flex;flex:1;flex-direction:column;min-width:0;
  aspect-ratio:548.79 / 808.18;
  overflow:hidden;
  border:1px solid var(--line-inv);
  border-radius:10.755% / 7.303%;
  background-color:var(--pan-pedra);
  background-image:url('../img/blog/card-fundo.svg');
  background-position:center;background-repeat:no-repeat;background-size:100% 100%;
  box-shadow:var(--shadow-1);
  color:var(--pan-vapor-100);text-decoration:none;
  transform:scale(1);
  transform-origin:center;
  transition:transform var(--dur-3) var(--ease-agua),
             border-color var(--dur-3) var(--ease-agua);
}
.blog-card-imagem{
  flex:0 0 auto;
  margin:3.105% 3.492% 0;
  aspect-ratio:510.47 / 456.04;
  overflow:hidden;
  border-radius:8.377% / 9.376%;
  background:var(--pan-vapor-100);
  box-shadow:inset 0 0 0 1px var(--line-inv);
}
.blog-card-imagem img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(.98);
}
.blog-card-imagem--controle img{object-position:68% 50%}
.blog-card-imagem--menisco img{object-position:46% 50%}
.blog-card-imagem--ontologica img{object-position:50% 42%}
.blog-card-imagem--placeholder img{object-position:50% 50%;filter:none}
.blog-card-corpo{
  display:flex;flex:1;flex-direction:column;min-height:0;
  padding:7.9% 3.492% 7.8%;
}
.blog-card-meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  font-size:clamp(.72rem,4.7cqi,1.14rem);
  font-weight:var(--fw-extralight);
  line-height:1;letter-spacing:.01em;text-transform:uppercase;
}
.blog-card-meta time{flex:0 0 auto;font-size:.84em;white-space:nowrap}
.blog-card h3{
  margin-top:5.8cqi;
  color:inherit;
  font-size:clamp(1.12rem,6.8cqi,1.78rem);
  font-weight:var(--fw-extrabold);
  line-height:1.08;
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
}
.blog-card-corpo>p{
  margin-top:auto;
  font-size:clamp(.76rem,4.7cqi,1.14rem);
  font-weight:var(--fw-extralight);
  line-height:1;text-transform:uppercase;
}
.blog-card-corpo>p strong{font-weight:var(--fw-medium)}
.blog-card:focus-visible{
  outline:2px solid var(--pan-vapor-100);outline-offset:4px;
  transform:scale(1.018);z-index:2;
}
.blog-trilho:has(.blog-card:focus-visible) .blog-card:not(:focus-visible){transform:scale(.985)}

.blog-navegacao{
  display:none;align-items:center;justify-content:flex-end;gap:var(--space-3);
  margin-top:var(--space-3);
}
.blog-seta{
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--line-inv);border-radius:var(--r-pill);
  background:transparent;color:var(--pan-vapor-100);cursor:pointer;
  transition:background var(--dur-2) var(--ease-agua),
             border-color var(--dur-2) var(--ease-agua),
             opacity var(--dur-2) var(--ease-agua);
}
.blog-seta svg{width:18px;height:18px}
.blog-seta path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.blog-seta:hover,.blog-seta:focus-visible{background:var(--pan-barro);border-color:var(--pan-barro)}
.blog-seta:disabled{opacity:.32;cursor:default;background:transparent;border-color:var(--line-inv)}
.blog-pontos{display:flex;align-items:center;gap:7px}
.blog-ponto{
  width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--pan-profundas-20);
  transition:width var(--dur-2) var(--ease-agua),background var(--dur-2) var(--ease-agua);
}
.blog-ponto.is-ativo{width:18px;background:var(--pan-barro)}
.blog-status{
  min-width:4.5ch;
  color:var(--pan-profundas-10);
  font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-micro);text-align:center;text-transform:uppercase;
}

@keyframes blog-flutua{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}

@media (hover:hover) and (pointer:fine){
  .blog-card:hover{transform:scale(1.018);z-index:2}
  .blog-trilho:has(.blog-card:hover) .blog-card:not(:hover){transform:scale(.985)}
}

@media (max-width:900px){
  .blog-trilho{
    display:flex;gap:var(--space-5);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:8px;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:var(--pan-pedra-20) transparent;
  }
  .blog-trilho::-webkit-scrollbar{height:4px}
  .blog-trilho::-webkit-scrollbar-track{background:transparent}
  .blog-trilho::-webkit-scrollbar-thumb{background:var(--pan-pedra-20);border-radius:var(--r-pill)}
  .blog-slide{
    flex:0 0 min(78vw,500px);
    scroll-snap-align:start;scroll-snap-stop:always;
  }
  .blog-carrossel.is-pronto .blog-navegacao{display:flex}
}

@media (max-width:640px){
  .carta-viva .secao-cabeca{margin-bottom:var(--space-5)}
  .blog-trilho{gap:var(--space-4)}
  .blog-slide{flex-basis:min(82vw,380px)}
  .blog-navegacao{justify-content:flex-start}
  .blog-status{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .blog-slide,.blog-card,
  .blog-card:hover,.blog-card:focus-visible,
  .blog-trilho:has(.blog-card:hover) .blog-card:not(:hover),
  .blog-trilho:has(.blog-card:focus-visible) .blog-card:not(:focus-visible){transform:none!important}
  .blog-trilho{scroll-behavior:auto}
}
/* ============================================================
   O QUE SUSTENTA · composição editorial 02

   A fotografia ocupa o campo esquerdo. Cabeçalho, índice horizontal
   e passo ativo formam um único painel à direita. A máquina de estados,
   as lâminas de água e o halo de cor continuam sob controle de pan.js.
   ============================================================ */
.sustenta-conteudo{min-width:0}

.sustenta.presa .sustenta-grade{
  grid-template-columns:minmax(180px,.62fr) minmax(0,1fr);
  gap:clamp(var(--space-4),4.2vw,var(--space-8));
  align-items:stretch;
}
.sustenta.presa .sustenta-midia{
  grid-column:1;grid-row:1;
  display:block;
  width:100%;height:auto;max-width:none;
  aspect-ratio:900 / 1195;
  align-self:center;justify-self:stretch;
}
.sustenta.presa .sustenta-conteudo{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;min-width:0;
  min-height:min(76svh,52vw,620px);
  padding:clamp(var(--space-5),3.6vw,var(--space-8));
  background:rgba(var(--vapor-rgb),.58);
}
.sustenta.presa .sustenta-conteudo .secao-cabeca{
  max-width:none;margin:0 0 clamp(var(--space-4),2.8vh,var(--space-6));
}
.sustenta.presa .sustenta-conteudo .secao-cabeca h2{
  max-width:20ch;
  margin-top:var(--space-2);
  font-size:clamp(2rem,3vw,3.7rem);
  text-wrap:balance;
}
.sustenta.presa .sustenta-rail{margin:0}
.sustenta.presa .sustenta-indice{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;width:100%;
}
.sustenta.presa .sustenta-indice button{
  width:100%;min-width:0;min-height:44px;
  justify-content:flex-start;gap:var(--space-2);
  padding:var(--space-2) clamp(var(--space-2),1vw,var(--space-4));

  font-size:clamp(.64rem,.72vw,var(--fs-eyebrow));
  white-space:nowrap;
}


.sustenta.presa .sustenta-indice .longo{display:inline}
.sustenta.presa .sustenta-indice .curto{display:none}
.sustenta.presa .sustenta-passos{
  min-height:clamp(135px,18vh,190px);
  margin-top:auto;padding-top:clamp(var(--space-5),6vh,var(--space-8));
  align-items:end;
}
.sustenta.presa .passo{align-self:end}
.sustenta.presa .passo .num{
  color:var(--fg-rotulo);
  font-size:clamp(.95rem,1.35vw,1.25rem);
}
.sustenta.presa .passo h3{
  margin-block:var(--space-3) var(--space-4);
  font-size:clamp(1.45rem,2.2vw,2rem);
  font-weight:var(--fw-semibold);
}
.sustenta.presa .passo p{
  max-width:44ch;
  font-size:var(--fs-body-s);
  line-height:var(--lh-loose);
}

@media (max-width:760px){
  .sustenta.presa .sustenta-grade{gap:var(--space-4)}
  .sustenta.presa .sustenta-conteudo{padding:var(--space-5)}
  .sustenta.presa .sustenta-conteudo .secao-cabeca{margin-bottom:var(--space-3)}
  .sustenta.presa .sustenta-conteudo .secao-cabeca h2{
    font-size:clamp(1.45rem,4vw,1.9rem);
  }
  .sustenta.presa .sustenta-indice .longo{display:none}
  .sustenta.presa .sustenta-indice .curto{display:inline}
  .sustenta.presa .sustenta-indice button{
    padding-inline:var(--space-2);
    font-size:var(--fs-meta);
  }
  .sustenta.presa .sustenta-passos{
    min-height:115px;padding-top:var(--space-4);
  }
  .sustenta.presa .passo h3{
    margin-block:var(--space-2) var(--space-3);
    font-size:clamp(1.25rem,3.4vw,1.55rem);
  }
}

@media (max-width:519px){
  .sustenta.presa .sustenta-grade{
    grid-template-columns:1fr;
    gap:var(--space-4);
    align-items:start;
  }
  .sustenta.presa .sustenta-midia{
    grid-column:1;grid-row:1;
    width:100%;height:clamp(140px,calc(100svh - 420px),220px);
    aspect-ratio:auto;
  }
  .sustenta.presa .lamina-eixo:not([data-foco]) img{object-position:50% 64%}
  .sustenta.presa .sustenta-conteudo{
    grid-column:1;grid-row:2;
    min-height:0;
    padding:var(--space-5);
  }
  .sustenta.presa .sustenta-conteudo .secao-cabeca h2{
    max-width:18ch;
    font-size:clamp(2rem,9vw,3rem);
  }
}

/* =====================================================================
   PAGE ABOUT: editorial routes, media and deposition
   ===================================================================== */
.sobre-percurso{scroll-margin-top:96px}.sobre-percurso[hidden]{display:none}.sobre-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sobre-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:calc(100svh - 86px);padding-block:clamp(var(--space-8),8vw,var(--space-10));background:var(--bg-dark);color:var(--fg-inv-1)}
.sobre-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(112deg,rgba(var(--vidro-rgb),.88),rgba(var(--vidro-rgb),.36) 58%,rgba(var(--vidro-rgb),.72));pointer-events:none}
.sobre-hero-sumi{position:absolute;z-index:-2;left:50%;top:50%;width:max(145vw,1800px);aspect-ratio:811.5/218.33;background:url('../img/suminagashi-vapor.svg') center/100% 100% no-repeat;opacity:.12;transform:translate(-50%,-50%);pointer-events:none}
.sobre-hero-grade{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr);gap:clamp(var(--space-7),6vw,var(--space-10));align-items:end}.sobre-hero-texto{align-self:center}.sobre-hero .eyebrow{color:var(--fg-rotulo-inv)}
.sobre-hero h1{max-width:11.5ch;margin-block:var(--space-4) var(--space-6);font-size:clamp(2.7rem,4.8vw,4.9rem);font-weight:var(--fw-light);line-height:.98;letter-spacing:var(--tracking-display)}.sobre-hero h1 b,.sobre-intro-texto h2 b,.buscadora-texto h2 b{font-weight:var(--fw-bold)}.sobre-hero-texto>p:not(.eyebrow){max-width:47ch;color:var(--fg-inv-2);line-height:var(--lh-loose)}.sobre-hero-orientacao{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--line-inv);font-size:var(--fs-body-s)}
.sobre-escolhas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.sobre-escolha{position:relative;isolation:isolate;overflow:hidden;display:grid;min-height:clamp(430px,54vh,590px);border:1px solid var(--line-inv);background:var(--bg-dark);color:var(--fg-inv-1);text-decoration:none;box-shadow:var(--shadow-1);transition:transform var(--dur-2) var(--ease-agua),border-color var(--dur-2) var(--ease-agua),box-shadow var(--dur-2) var(--ease-agua)}.sobre-escolha::after{content:"";position:absolute;z-index:3;left:0;right:100%;bottom:0;height:3px;background:var(--pan-barro);transition:right var(--dur-3) var(--ease-agua)}.sobre-escolha:hover,.sobre-escolha:focus-visible,.sobre-escolha[aria-current="location"]{transform:translateY(-6px);border-color:var(--pan-barro);box-shadow:0 18px 42px rgba(20,30,26,.24)}.sobre-escolha:hover::after,.sobre-escolha:focus-visible::after,.sobre-escolha[aria-current="location"]::after{right:0}.sobre-escolha:focus-visible{outline:2px solid var(--pan-barro-40);outline-offset:4px}
.sobre-escolha-midia{position:absolute;z-index:-1;inset:0;overflow:hidden;background:var(--bg-dark)}.sobre-escolha-midia::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--vidro-rgb),.96) 4%,rgba(var(--vidro-rgb),.22) 70%,rgba(var(--vidro-rgb),.1))}.sobre-escolha-midia>img{width:100%;height:100%;object-fit:cover;object-position:center;filter:var(--filtro-agua);transition:transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)}.sobre-escolha:hover .sobre-escolha-midia>img,.sobre-escolha:focus-visible .sobre-escolha-midia>img{transform:scale(1.035);filter:none}.sobre-escolha-midia--marca::before{content:"";position:absolute;inset:0;background:url('../img/suminagashi-vapor.svg') center/100% 100% no-repeat;opacity:.14}.sobre-escolha-midia--marca::after{background:linear-gradient(to top,rgba(var(--vidro-rgb),.9),rgba(var(--vidro-rgb),.1) 82%)}
.sobre-escolha-conteudo{position:relative;z-index:2;display:grid;align-content:end;padding:var(--space-6)}.sobre-escolha-num{position:absolute;top:var(--space-6);right:var(--space-6);color:var(--fg-rotulo-video);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro)}.sobre-escolha-tipo{margin-bottom:var(--space-3);color:var(--fg-rotulo-video);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}.sobre-escolha strong{display:block;max-width:12ch;font-size:clamp(1.9rem,3.2vw,3rem);line-height:var(--lh-snug)}.sobre-escolha-resumo{display:block;max-width:35ch;margin-top:var(--space-3);color:var(--fg-inv-2);font-size:var(--fs-body-s);line-height:var(--lh-normal)}.sobre-escolha-acao{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line-inv);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.sobre-intro{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-page)}.sobre-intro--marca{background:var(--bg-recess)}.sobre-intro-grade{display:grid;grid-template-columns:minmax(260px,.76fr) minmax(0,1.24fr);gap:clamp(var(--space-7),6vw,var(--space-9));align-items:center}.sobre-intro-texto{min-width:0}.sobre-intro-texto h2{max-width:13ch;margin-block:var(--space-4) var(--space-6);font-size:clamp(2.55rem,4.4vw,4.35rem);font-weight:var(--fw-light);line-height:1;letter-spacing:var(--tracking-display)}.sobre-destaque{max-width:39ch;color:var(--fg-1);font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:var(--lh-normal)}.sobre-prosa{max-width:63ch;margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--line-1)}.sobre-prosa p{color:var(--fg-2);line-height:var(--lh-loose)}.sobre-prosa p+p{margin-top:var(--space-4)}
.sobre-retrato,.sobre-marca-simbolo{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;min-height:620px;padding:var(--space-8);background:var(--bg-dark);color:var(--fg-inv-1);border:1px solid var(--line-1)}.sobre-retrato{display:block;padding:0}.sobre-retrato img{width:100%;height:100%;min-height:620px;object-fit:cover;filter:var(--filtro-agua)}.sobre-retrato::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--vidro-rgb),.78),transparent 52%)}.sobre-retrato figcaption{position:absolute;z-index:1;right:var(--space-5);bottom:var(--space-5);left:var(--space-5);color:var(--fg-inv-2);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro);text-transform:uppercase}.sobre-marca-simbolo{background:var(--pan-barro)}.sobre-marca-simbolo::before{content:"";position:absolute;z-index:-1;inset:0;background:url('../img/suminagashi-vapor.svg') center/100% 100% no-repeat;opacity:.15}.sobre-marca-unicorn-cena{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;background:var(--pan-barro);contain:layout paint}.sobre-marca-unicorn-cena canvas,.sobre-marca-unicorn-cena iframe{width:100%!important;height:100%!important}.sobre-marca-simbolo>:not(.sobre-marca-unicorn-cena){position:relative;z-index:1}.sobre-marca-simbolo.unicorn-falha .sobre-marca-unicorn-cena{display:none}.sobre-logo-liquida{display:block;max-width:100%;margin:0 auto var(--space-4)}.sobre-logo-liquida[hidden],.sobre-logo-reserva[hidden]{display:none}.sobre-logo-reserva{width:min(76%,340px);height:auto}.sobre-marca-simbolo p{margin-top:var(--space-6);color:var(--fg-inv-2);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.sobre-faixa{padding-block:var(--space-7);background:var(--bg-dark);color:var(--fg-inv-1)}.sobre-faixa-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line-inv)}.sobre-faixa-grade>div{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);padding:var(--space-5)}.sobre-faixa-grade>div+div{border-left:1px solid var(--line-inv)}.sobre-faixa strong{color:var(--fg-rotulo-inv);font-size:var(--fs-h5);font-weight:var(--fw-light);line-height:1}.sobre-faixa span{max-width:29ch;color:var(--fg-inv-2);font-size:var(--fs-body-s);line-height:var(--lh-normal)}
.sobre-secao{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-page)}.sobre-secao-cabeca{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.62fr);gap:clamp(var(--space-7),8vw,var(--space-10));align-items:end;margin-bottom:var(--space-8)}.sobre-secao-cabeca h2,.sobre-proposito-cabeca h2,.sobre-tempo-cabeca h2,.sobre-valores-cabeca h2,.sobre-manifesto h2{max-width:13ch;margin-top:var(--space-4);font-size:clamp(2.5rem,4.5vw,4.6rem);font-weight:var(--fw-light);line-height:1;letter-spacing:var(--tracking-display)}.sobre-secao-cabeca h2 b,.sobre-proposito h2 b,.sobre-tempo h2 b,.sobre-valores h2 b,.sobre-manifesto h2 b{font-weight:var(--fw-bold)}.sobre-secao-cabeca>p{color:var(--fg-2);line-height:var(--lh-loose)}
.sobre-oficios{background:var(--bg-recess)}.sobre-oficios-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}.sobre-oficio{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr);min-height:530px;border:1px solid var(--line-1);background:var(--bg-page)}.sobre-oficio figure{margin:0;overflow:hidden}.sobre-oficio figure img{width:100%;height:100%;object-fit:cover;filter:var(--filtro-agua);transition:transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)}.sobre-oficio:hover figure img{transform:scale(1.03);filter:none}.sobre-oficio>div{display:flex;flex-direction:column;padding:var(--space-6)}.sobre-indice{color:var(--pan-barro);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro)}.sobre-oficio h3{margin-block:var(--space-3);font-size:var(--fs-h3);line-height:var(--lh-snug)}.sobre-oficio p:last-child{color:var(--fg-2);line-height:var(--lh-loose)}
.sobre-pesquisa{background:var(--bg-dark);color:var(--fg-inv-1)}.sobre-pesquisa-grade,.sobre-proposito-grade,.sobre-valores-grade,.sobre-manifesto-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(var(--space-7),8vw,var(--space-10));align-items:center}.sobre-pesquisa-imagem{position:relative;height:650px;overflow:hidden}.sobre-pesquisa-galeria{position:relative;width:100%;height:100%}.sobre-pesquisa-galeria img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:sobre-pesquisa-crossfade 64s linear infinite}
@keyframes sobre-pesquisa-crossfade{0%,100%{opacity:0}3.125%,6.25%{opacity:1}9.375%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sobre-pesquisa-galeria img{animation:none;opacity:0}.sobre-pesquisa-galeria img:first-child{opacity:1}}.sobre-pesquisa-texto .eyebrow{color:var(--fg-rotulo-inv)}.sobre-pesquisa-texto h2{max-width:12ch;margin-block:var(--space-4) var(--space-6);font-size:clamp(2.5rem,4.5vw,4.6rem);font-weight:var(--fw-light);line-height:1}.sobre-pesquisa-texto h2 b{font-weight:var(--fw-bold)}.sobre-pesquisa-texto .sobre-destaque,.sobre-pesquisa-texto .sobre-prosa p{color:var(--fg-inv-2)}.sobre-pesquisa blockquote{margin:var(--space-6) 0 0;padding:var(--space-5);border-left:2px solid var(--pan-barro);background:rgba(var(--vidro-rgb),.28);color:var(--fg-inv-1);font-size:var(--fs-body-s);line-height:var(--lh-loose)}
.sobre-tempo{background:var(--bg-page)}.sobre-tempo-grade{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);gap:clamp(var(--space-7),9vw,var(--space-11))}.sobre-tempo-cabeca{align-self:start;position:sticky;top:110px}.sobre-linha-tempo{display:grid;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-1)}.sobre-linha-tempo li{display:grid;grid-template-columns:140px 1fr;gap:var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--line-1)}.sobre-linha-tempo>li>span{color:var(--pan-barro);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro);text-transform:uppercase}.sobre-linha-tempo strong{display:block;font-size:var(--fs-h4);line-height:var(--lh-snug)}.sobre-linha-tempo p{margin-top:var(--space-3);color:var(--fg-2);line-height:var(--lh-loose)}
.sobre-proposito{background:var(--bg-recess)}.sobre-proposito-texto>p{color:var(--fg-2);line-height:var(--lh-loose)}.sobre-proposito-texto>p+p{margin-top:var(--space-5)}.sobre-eixos{background:var(--bg-page)}.sobre-eixos-grade,.sobre-compromissos-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line-1)}.sobre-eixos-grade article,.sobre-compromissos-grade article{min-height:300px;padding:var(--space-6)}.sobre-eixos-grade article+article,.sobre-compromissos-grade article+article{border-left:1px solid var(--line-1)}.sobre-eixos-grade h3,.sobre-compromissos-grade h3{margin-top:var(--space-7);font-size:var(--fs-h3);line-height:var(--lh-snug)}.sobre-eixos-grade p,.sobre-compromissos-grade p{margin-top:var(--space-4);color:var(--fg-2);line-height:var(--lh-loose)}
.sobre-valores{background:var(--bg-dark);color:var(--fg-inv-1)}.sobre-valores .eyebrow,.sobre-manifesto .eyebrow{color:var(--fg-rotulo-inv)}.sobre-valores-lista{display:grid;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-inv)}.sobre-valores-lista li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-4);padding-block:var(--space-4);border-bottom:1px solid var(--line-inv)}.sobre-valores-lista span{color:var(--pan-barro-40);font-size:var(--fs-meta)}.sobre-valores-lista strong{font-size:var(--fs-h4)}.sobre-valores-lista p{margin-top:var(--space-2);color:var(--fg-inv-2);line-height:var(--lh-normal)}.sobre-compromissos{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-recess)}.sobre-compromissos-cabeca{max-width:780px;margin-bottom:var(--space-8)}.sobre-compromissos-cabeca h2{max-width:13ch;margin-top:var(--space-4);font-size:clamp(2.5rem,4.5vw,4.6rem);font-weight:var(--fw-light);line-height:1}.sobre-compromissos-cabeca h2 b{font-weight:var(--fw-bold)}.sobre-manifesto{position:relative;overflow:hidden;background:var(--bg-dark)}.sobre-manifesto-folha{display:block;width:100%;height:min(100svh,820px);border:0}
.sobre-travessia{padding-block:var(--space-9);background:var(--bg-page)}.sobre-travessia--marca{background:var(--bg-recess)}.sobre-travessia-grade{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-7);align-items:center}.sobre-travessia h2{max-width:13ch;margin-block:var(--space-3);font-size:clamp(2.2rem,4vw,4rem);font-weight:var(--fw-light);line-height:1}.sobre-travessia h2 b{font-weight:var(--fw-bold)}.sobre-travessia p{max-width:48ch;color:var(--fg-2);line-height:var(--lh-loose)}.sobre-travessia-link{display:grid;justify-items:center;text-decoration:none}.sobre-travessia-link .ir{min-width:238px;margin-top:0}.sobre-travessia-nota{display:block;margin-top:var(--space-3);color:var(--fg-3);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro);text-align:center;text-transform:uppercase}
.sobre-buscadora{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-dark);color:var(--fg-inv-1)}.sobre-buscadora::before{content:"";position:absolute;z-index:-1;inset:-12%;background:url('../img/suminagashi-vapor.svg') center/cover no-repeat;opacity:.1}.buscadora-grade{display:grid;grid-template-columns:minmax(0,.82fr) minmax(340px,1.18fr);gap:clamp(var(--space-7),8vw,var(--space-10));align-items:center}.buscadora-texto{min-width:0}.buscadora-texto .eyebrow{color:var(--fg-rotulo-inv)}.buscadora-texto h2{max-width:10ch;margin-block:var(--space-4) var(--space-6);font-size:clamp(3rem,5vw,5.1rem);font-weight:var(--fw-light);line-height:.98;letter-spacing:var(--tracking-display)}.buscadora-texto .sobre-destaque{color:var(--fg-inv-2)}.buscadora-assistir{display:inline-flex;width:auto;appearance:none;margin-top:var(--space-6);padding:0;border:0;background:transparent;box-shadow:none;color:var(--fg-inv-1);font:inherit;cursor:pointer}.buscadora-assistir:hover,.buscadora-assistir:focus-visible{background:transparent;border-color:transparent;box-shadow:none}.buscadora-assistir .ir{margin-top:0;min-width:176px}.buscadora-video{position:relative;overflow:hidden;margin:0;border:1px solid var(--line-inv);background:var(--bg-dark);box-shadow:var(--shadow-2)}.buscadora-video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:var(--filtro-agua);transition:transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)}.buscadora-video:hover img{transform:scale(1.025);filter:none}.buscadora-video figcaption{position:absolute;right:var(--space-4);bottom:var(--space-4);left:var(--space-4);display:flex;justify-content:space-between;color:var(--fg-inv-1);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}.buscadora-video figcaption span{color:var(--fg-rotulo-video)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.depoimento-dialogo{width:min(1120px,calc(100vw - 40px));max-width:none;margin:auto;padding:0;border:0;background:transparent;color:var(--fg-inv-1)}.depoimento-dialogo::backdrop{background:rgba(20,30,26,.82);backdrop-filter:blur(8px)}.depoimento-dialogo-painel{position:relative;border:1px solid var(--line-inv);background:var(--bg-dark);box-shadow:var(--shadow-3)}.depoimento-player{display:block;width:100%;max-height:calc(100svh - 64px);background:#000}.depoimento-fechar{position:absolute;z-index:1;top:var(--space-3);right:var(--space-3);display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line-inv);border-radius:50%;background:rgba(var(--vidro-rgb),.8);color:var(--fg-inv-1);font:1.7rem/1 var(--font-sans);cursor:pointer}.depoimento-fechar:hover,.depoimento-fechar:focus-visible{background:var(--pan-barro)}
.sobre-revela{opacity:0;transform:translateY(28px);transition:opacity var(--dur-3) var(--ease-agua),transform var(--dur-3) var(--ease-agua)}.sobre-revela.is-visible{opacity:1;transform:translateY(0)}
@media (max-width:1120px){.sobre-hero{min-height:auto}.sobre-hero-grade{grid-template-columns:1fr}.sobre-hero-texto{max-width:820px}.sobre-escolha{min-height:500px}.sobre-oficio{grid-template-columns:1fr}.sobre-oficio figure{height:430px}.sobre-compromissos-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.sobre-intro-grade,.sobre-pesquisa-grade,.sobre-proposito-grade,.sobre-valores-grade,.sobre-manifesto-grade,.buscadora-grade{grid-template-columns:1fr}.sobre-retrato,.sobre-retrato img,.sobre-marca-simbolo{min-height:560px}.sobre-secao-cabeca{grid-template-columns:1fr;gap:var(--space-5)}.sobre-tempo-grade{grid-template-columns:1fr}.sobre-tempo-cabeca{position:static}.sobre-travessia-grade{grid-template-columns:1fr}.sobre-travessia-link{justify-self:start}}
@media (max-width:700px){.sobre-hero{padding-block:var(--space-8)}.sobre-hero h1{font-size:clamp(2.5rem,11vw,3.55rem)}.sobre-escolhas,.sobre-oficios-grid{grid-template-columns:1fr}.sobre-escolha{min-height:370px}.sobre-intro,.sobre-secao,.sobre-compromissos,.sobre-manifesto,.sobre-buscadora{padding-block:var(--space-9)}.sobre-intro-texto h2,.buscadora-texto h2{font-size:clamp(2.35rem,11vw,3.4rem)}.sobre-retrato,.sobre-retrato img,.sobre-marca-simbolo{min-height:480px}.sobre-faixa-grade{grid-template-columns:1fr}.sobre-faixa-grade>div+div{border-left:0;border-top:1px solid var(--line-inv)}.sobre-eixos-grade,.sobre-compromissos-grade{grid-template-columns:1fr}.sobre-eixos-grade article+article,.sobre-compromissos-grade article+article{border-left:0;border-top:1px solid var(--line-1)}.sobre-linha-tempo li{grid-template-columns:1fr;gap:var(--space-3)}.depoimento-dialogo{width:calc(100vw - 24px)}}
@media (max-width:480px){.sobre-hero .wrap,.sobre-intro .wrap,.sobre-secao .wrap,.sobre-faixa .wrap,.sobre-compromissos .wrap,.sobre-manifesto .wrap,.sobre-travessia .wrap,.sobre-buscadora .wrap{padding-inline:var(--space-4)}.sobre-escolha{min-height:340px}.sobre-retrato,.sobre-retrato img,.sobre-marca-simbolo{min-height:430px}.sobre-travessia-link,.sobre-travessia-link .ir{width:100%;min-width:0}}
@media (prefers-reduced-motion:reduce){.sobre-escolha,.sobre-escolha-midia img,.sobre-revela{transition:none}.sobre-revela{opacity:1;transform:none}}
/* Deriva interna da imagem: o quadro permanece imóvel e a fotografia sugere flutuação na água. */
.sobre-retrato img{transform:scale(1.055);will-change:transform;animation:sobre-retrato-deriva 13s var(--ease-agua) infinite alternate}
@keyframes sobre-retrato-deriva{from{transform:translate3d(-.8%,-1.2%,0) scale(1.055)}to{transform:translate3d(.9%,1.1%,0) scale(1.075)}}
@media (prefers-reduced-motion:reduce){.sobre-retrato img{animation:none;transform:scale(1.02)}}
/* Repouso integral dos botões inundáveis: nenhuma bolha invade a superfície antes da interação. */
.oferta .ir-onda .liq-1{transform:translate(-80px,-70px)}
.oferta .ir-onda .liq-2{transform:translate(0,70px)}
.oferta .ir-onda .liq-3{transform:translate(0,-70px)}
.oferta .ir-onda .liq-4{transform:translate(0,70px)}
.oferta .ir-onda .liq-5{transform:translate(80px,-70px)}
.oferta:hover .ir-onda circle,.oferta:focus-visible .ir-onda circle{transform:translate(0,0)}
/* Mídias alternadas do card Quem conduz: as duas fotos ocupam a mesma máscara. */
.situar-card-media>img{position:absolute;inset:0;opacity:1;transform:scale(1.001);transition:opacity var(--dur-3) var(--ease-agua),transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)}
.situar-card-media-localizacao{opacity:0!important;transform:scale(1.04)!important;object-position:center!important}
.situar-card.mostra-localizacao .situar-card-media-pan{opacity:0;transform:scale(1.04)}
.situar-card.mostra-localizacao .situar-card-media-localizacao{opacity:1!important;transform:scale(1.001)!important}
@media (min-width:641px){
  .situar-card{display:flex;min-height:clamp(560px,62svh,660px)}
  .situar-card-media{width:auto;aspect-ratio:auto;flex:0 0 56%}
  .situar-card-conteudo{flex:1 1 44%}
  .situar-card-resumo{display:block}
}
/* Respiro vertical da citação Unicorn: preserva campo antes e depois da frase. */
.unicorn-citacao{height:clamp(520px,72svh,760px)}
@media (max-width:700px){.unicorn-citacao{height:clamp(460px,68svh,620px)}}
/* Card de abas do ofício: uma só máscara para as duas linguagens. */
.oficio-card{display:flex;min-height:clamp(500px,58svh,640px);overflow:hidden;border:1px solid var(--line-1);background:var(--bg-page);box-shadow:var(--shadow-1)}
.oficio-card-midia{position:relative;flex:0 0 48%;min-width:0;margin:0;overflow:hidden;background:var(--bg-dark)}
.oficio-card-midia::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--vidro-rgb),.86),transparent 58%);pointer-events:none}
.oficio-card-imagem{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--filtro-agua);transition:opacity var(--dur-3) var(--ease-agua),transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)}
.oficio-card-imagem-terapeuta{opacity:0;transform:scale(1.04)}
.oficio-card.mostra-terapeuta .oficio-card-imagem-artista{opacity:0;transform:scale(1.04)}
.oficio-card.mostra-terapeuta .oficio-card-imagem-terapeuta{opacity:1;transform:scale(1)}
.oficio-card-midia figcaption{position:absolute;z-index:1;right:var(--space-6);bottom:var(--space-6);left:var(--space-6);color:var(--fg-inv-1)}
.oficio-card-midia .eyebrow{margin-top:var(--space-3);color:var(--fg-inv-2)}
.oficio-card-midia h3{max-width:12ch;margin-top:var(--space-3);font-size:clamp(2rem,3.2vw,3.5rem);line-height:1;font-weight:var(--fw-semibold)}
.oficio-card-conteudo{display:flex;flex:1 1 52%;min-width:0;flex-direction:column;background:var(--bg-recess)}
.oficio-card-paineis{display:block;flex:1}.oficio-card.tabs-prontas .oficio-card-paineis{display:grid;align-items:center}.oficio-card-painel{grid-area:1/1;padding:var(--space-8)}
.oficio-card.tabs-prontas .oficio-card-painel:not(.is-active){display:none}.oficio-card.tabs-prontas .oficio-card-painel.is-active{animation:oficio-painel-entra var(--dur-2) var(--ease-agua) both}
.oficio-card-painel p{max-width:38ch;color:var(--fg-2);font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:var(--lh-loose)}
@keyframes oficio-painel-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.oficio-card-abas{display:flex;margin-top:auto;border-top:1px solid var(--line-1)}
.oficio-card-abas button{position:relative;flex:1 1 50%;min-height:64px;padding:var(--space-3) var(--space-4);border:0;border-bottom:3px solid transparent;background:transparent;color:var(--fg-2);font:var(--fw-semibold) var(--fs-meta)/1 var(--font-sans);letter-spacing:var(--tracking-micro);text-transform:uppercase;cursor:pointer;transition:color var(--dur-2) var(--ease-agua),background var(--dur-2) var(--ease-agua)}
.oficio-card-abas button.is-active{border-bottom-color:var(--line-accent);background:rgba(181,106,62,.05);color:var(--fg-1)}.oficio-card-abas button:hover,.oficio-card-abas button:focus-visible{background:rgba(181,106,62,.1);color:var(--fg-1)}.oficio-card-abas button:focus-visible{outline:2px solid var(--pan-barro);outline-offset:-5px}
@media (max-width:700px){.oficio-card{display:block;min-height:0}.oficio-card-midia{min-height:420px}.oficio-card-midia figcaption{right:var(--space-5);bottom:var(--space-5);left:var(--space-5)}.oficio-card-midia h3{font-size:clamp(2rem,10vw,3rem)}.oficio-card-painel{padding:var(--space-6) var(--space-5)}.oficio-card-abas button{min-height:68px;padding-inline:var(--space-3)}}
/* ============================================================
   PÁGINAS INTERNAS · SERVIÇOS, LOJA E AGENDA
   Camada recomposta em 24/08/2026. Todos os valores cromáticos
   continuam vinculados aos tokens oficiais da marca.
   ============================================================ */

.pagina-servicos #conteudo,
.pagina-loja #conteudo,
.pagina-agenda #conteudo{position:relative;overflow:clip}

/* ---------- Serviços ---------- */
.servicos-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(680px,calc(100svh - 96px),900px);
  display:grid;align-items:center;
  padding-block:clamp(var(--space-9),10vw,var(--space-11));
  background:var(--bg-recess);border-bottom:1px solid var(--line-1)
}
.servicos-hero-sumi{
  position:absolute;z-index:-1;inset:-20% -12% -15% 38%;
  background:url('../img/suminagashi-inteiro.svg') center/cover no-repeat;
  opacity:.08;transform:rotate(-5deg) scale(1.08);pointer-events:none
}
.servicos-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
  gap:clamp(var(--space-7),8vw,var(--space-10));align-items:center
}
.servicos-hero-texto{min-width:0;max-width:780px}
.servicos-hero-texto h1{
  max-width:12ch;margin-top:var(--space-4);
  font-size:clamp(2.9rem,6vw,5.75rem);font-weight:var(--fw-light);line-height:.98
}
.servicos-hero-texto h1 b{font-weight:var(--fw-bold)}
.servicos-hero-texto>p:last-of-type{
  max-width:48ch;margin-top:var(--space-6);color:var(--fg-2);
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:var(--lh-loose)
}
.servicos-cta{display:inline-flex;width:auto;padding:0;border:0;background:transparent}
.servicos-cta:hover,.servicos-cta:focus-visible{background:transparent;border-color:transparent}
.servicos-cta .ir{min-width:240px;margin-top:var(--space-7)}
.servicos-hero-imagem{
  position:relative;justify-self:end;width:min(100%,470px);margin:0;
  aspect-ratio:3/4;overflow:hidden;background:var(--bg-dark);box-shadow:var(--shadow-1)
}
.servicos-hero-imagem::after{
  content:'';position:absolute;inset:45% 0 0;
  background:linear-gradient(to top,rgba(var(--vidro-rgb),.8),transparent);pointer-events:none
}
.servicos-hero-imagem img{
  width:100%;height:100%;object-fit:cover;filter:var(--filtro-agua);
  transform:scale(1.025);transition:transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)
}
.servicos-hero-imagem:hover img{filter:none;transform:scale(1.055)}
.servicos-hero-imagem figcaption{
  position:absolute;z-index:1;right:var(--space-5);bottom:var(--space-5);left:var(--space-5);
  color:var(--fg-inv-2);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-micro);text-transform:uppercase
}

.servicos-principio{padding-block:clamp(var(--space-9),11vw,var(--space-11))}
.servicos-principio-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:var(--space-8) clamp(var(--space-7),8vw,var(--space-10));align-items:start
}
.servicos-principio .secao-cabeca{margin:0}
.servicos-principio-texto{display:grid;gap:var(--space-5);max-width:58ch;color:var(--fg-2);font-size:var(--fs-body-l);line-height:var(--lh-loose)}
.servicos-fundamentos{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;margin-top:var(--space-4);border-block:1px solid var(--line-1)
}
.servicos-fundamentos li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);padding:var(--space-6)}
.servicos-fundamentos li+li{border-left:1px solid var(--line-1)}
.servicos-fundamentos li>span,.servicos-mapa-num{color:var(--fg-rotulo);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro)}
.servicos-fundamentos strong{display:block;margin-bottom:var(--space-2);font-size:var(--fs-h6)}
.servicos-fundamentos p{color:var(--fg-2);font-size:var(--fs-body-s);line-height:var(--lh-loose)}

.servicos-formatos{background:var(--bg-recess)}
.servicos-secao-cabeca{max-width:800px}
.servicos-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.servico-formato{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:390px;padding:var(--space-7);background:var(--bg-page)
}
.servico-formato::before{
  content:"";position:absolute;z-index:0;inset:-10%;pointer-events:none;
  background:url('../img/suminagashi-barro.svg') center/cover no-repeat;
  opacity:0;transition:opacity 1000ms var(--ease-agua)
}
.servico-formato>*{position:relative;z-index:1}
.servico-formato:hover::before,.servico-formato:focus-visible::before{opacity:.08}
.servico-formato h3{max-width:14ch}
.servico-formato>p:not(.eyebrow){max-width:48ch}
.servico-formato .ir{align-self:flex-start;min-width:170px}

.servicos-mapa{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(var(--space-9),10vw,var(--space-11));
  background:var(--bg-dark);color:var(--fg-inv-1)
}
.servicos-mapa-sumi{
  position:absolute;z-index:-1;inset:-18%;
  background:url('../img/suminagashi-vapor.svg') center/cover no-repeat;opacity:.08;pointer-events:none
}
.servicos-mapa .eyebrow{color:var(--fg-rotulo-inv)}
.servicos-mapa .secao-cabeca p{color:var(--fg-inv-2)}
.servicos-mapa-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.servicos-mapa-card{
  min-height:390px;padding:var(--space-6);border-color:var(--line-inv);
  background:rgba(var(--vidro-rgb),.58);color:var(--fg-inv-1)
}
.servicos-mapa-card:hover,.servicos-mapa-card:focus-visible{background:var(--hover-inv);border-color:var(--pan-barro-60)}
.servicos-mapa-card .servicos-mapa-num{color:var(--fg-rotulo-inv)}
.servicos-mapa-card p{color:var(--fg-inv-2)}
.servicos-mapa-link{margin-top:auto;padding-top:var(--space-6);border-top:1px solid var(--line-inv);color:var(--fg-inv-1);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}

.servicos-convites{padding-block:clamp(var(--space-9),10vw,var(--space-11))}
.servicos-convites-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.servicos-convite-card{padding:var(--space-7);border:1px solid var(--line-1);background:var(--bg-recess)}
.servicos-convite-card h3{max-width:18ch;margin-block:var(--space-4);font-size:var(--fs-d3)}
.servicos-convite-card p{max-width:54ch;color:var(--fg-2);line-height:var(--lh-loose)}
.servicos-convite-card a{display:inline-block;margin-top:var(--space-6);font-size:var(--fs-body-s);font-weight:var(--fw-semibold)}

.servicos-inicio{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-recess)}
.servicos-inicio-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(var(--space-7),8vw,var(--space-10));align-items:start}
.servicos-etapas{list-style:none;border-top:1px solid var(--line-1)}
.servicos-etapas li{display:grid;grid-template-columns:44px 1fr;gap:var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--line-1)}
.servicos-etapas li>span{color:var(--fg-rotulo);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro)}
.servicos-etapas strong{font-size:var(--fs-h6)}
.servicos-etapas p{max-width:48ch;margin-top:var(--space-2);color:var(--fg-2);font-size:var(--fs-body-s);line-height:var(--lh-loose)}
.servicos-cuidado{padding:var(--space-7);border-left:2px solid var(--line-accent);background:var(--bg-page)}
.servicos-cuidado h3{margin-block:var(--space-4);font-size:var(--fs-d3)}
.servicos-cuidado>p:not(.eyebrow){margin-top:var(--space-4);color:var(--fg-2);line-height:var(--lh-loose)}
.servicos-cuidado .servicos-cta .ir{min-width:190px}

/* ---------- Loja ---------- */
.loja-abertura,.agenda-abertura{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-page)
}
.loja-abertura::after,.agenda-abertura::after{
  content:'';position:absolute;z-index:-1;inset:-80% -8% -70% 46%;
  background:url('../img/suminagashi-inteiro.svg') center/cover no-repeat;opacity:.045;pointer-events:none
}
.loja-abertura h1,.agenda-abertura h1{max-width:12ch;font-size:clamp(3rem,6vw,5.6rem);line-height:.98}
.loja-abertura .medida,.agenda-abertura .medida{max-width:50ch;font-size:var(--fs-body-l);line-height:var(--lh-loose)}
.loja-ebooks{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-recess)}
.loja-ebooks-cabeca{max-width:780px}
.ebook-galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);align-items:stretch}
.ebook-item{min-width:0;animation:ebook-deriva 9s var(--ease-agua) infinite alternate;transition:transform var(--dur-3) var(--ease-agua),opacity var(--dur-3) var(--ease-agua)}
.ebook-item:nth-child(2){animation-delay:-4.5s;animation-direction:alternate-reverse}
.ebook-card{
  min-height:390px;height:100%;padding:0;overflow:hidden;display:grid;
  grid-template-columns:minmax(180px,.78fr) minmax(0,1.22fr);background:var(--bg-page)
}
.ebook-card:hover,.ebook-card:focus-visible{background:var(--bg-page);border-color:var(--line-accent)}
.ebook-card-capa{display:grid;place-items:center;min-width:0;margin:0;padding:var(--space-5);overflow:hidden;background:var(--pan-profundas-10)}
.ebook-card-capa img{width:100%;height:100%;max-height:350px;object-fit:cover;transition:transform var(--dur-4) var(--ease-agua)}
.ebook-card:hover .ebook-card-capa img,.ebook-card:focus-visible .ebook-card-capa img{transform:scale(1.035)}
.ebook-card-corpo{display:flex;min-width:0;flex-direction:column;padding:var(--space-6)}
.ebook-card-meta{display:flex;flex:none;justify-content:space-between;gap:var(--space-3);color:var(--fg-rotulo)!important;font-size:var(--fs-meta)!important;font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.ebook-card h3{max-width:13ch;font-size:clamp(1.8rem,2.8vw,2.7rem)}
.ebook-card-corpo>p:not(.ebook-card-meta){font-size:var(--fs-body-s);line-height:var(--lh-loose)}
.ebook-card .ir{align-self:flex-start;min-width:175px}
@keyframes ebook-deriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-5px,0)}}
@media (hover:hover) and (pointer:fine){
  .ebook-item:hover{animation-play-state:paused;transform:scale(1.018);z-index:2}
  .ebook-galeria:has(.ebook-item:hover) .ebook-item:not(:hover){transform:scale(.985);opacity:.82}
}

/* ---------- Agenda ---------- */
.agenda-secao{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-recess)}
.agenda-intro{display:flex;align-items:end;justify-content:space-between;gap:var(--space-7);margin-bottom:var(--space-8)}
.agenda-intro>div{max-width:780px}
.agenda-intro h2{margin-top:var(--space-3);font-size:var(--fs-d2);font-weight:var(--fw-light)}
.agenda-intro h2 b{font-weight:var(--fw-bold)}
.agenda-intro>div>p:last-child{max-width:58ch;margin-top:var(--space-5);color:var(--fg-2);font-size:var(--fs-body-l);line-height:var(--lh-loose)}
.agenda-contagem{flex:0 0 auto;padding:var(--space-3) var(--space-4);border:1px solid var(--line-1);color:var(--fg-3);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.agenda-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:clamp(var(--space-6),6vw,var(--space-9));align-items:start}
.agenda-programacao{min-width:0}
.agenda-programacao-cabeca{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--line-2)}
.agenda-programacao-cabeca h3{margin-top:var(--space-2);font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.agenda-lista{display:grid;gap:var(--space-7);padding-top:var(--space-6)}
.agenda-grupo{display:grid;gap:var(--space-3)}
.agenda-grupo-cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--line-1)}
.agenda-grupo-cabeca h4{font-size:var(--fs-h6);font-weight:var(--fw-semibold);text-transform:capitalize}
.agenda-grupo-cabeca span{color:var(--fg-3);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.agenda-grupo--atual .agenda-grupo-cabeca{border-bottom-color:var(--line-accent)}
.agenda-evento{display:grid;grid-template-columns:84px 1fr;gap:var(--space-5);padding:var(--space-5);border:1px solid var(--line-1);background:var(--bg-page);transition:border-color var(--dur-2) var(--ease-agua),background var(--dur-2) var(--ease-agua),transform var(--dur-2) var(--ease-agua)}
.agenda-grupo--futuro .agenda-evento{background:transparent}
.agenda-evento:hover,.agenda-evento.is-selecionado{border-color:var(--line-accent);background:var(--bg-page);transform:translateX(4px)}
.agenda-evento:focus{outline:0}.agenda-evento:focus-visible{outline:2px solid var(--line-accent);outline-offset:3px}
.agenda-evento-data{align-self:start;padding:0;border:0;background:transparent;color:var(--fg-1);font:inherit;cursor:pointer;text-align:left}
.agenda-evento-data time{display:grid;justify-items:start}
.agenda-evento-data strong{font-size:var(--fs-h3);font-weight:var(--fw-light);line-height:1}
.agenda-evento-data span{margin-top:var(--space-1);color:var(--fg-rotulo);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.agenda-evento-tipo{color:var(--fg-rotulo);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.agenda-evento-conteudo h5{margin-top:var(--space-2);font-size:var(--fs-h5);line-height:var(--lh-snug)}
.agenda-evento-descricao{max-width:50ch;margin-top:var(--space-3);color:var(--fg-2);font-size:var(--fs-body-s);line-height:var(--lh-loose)}
.agenda-evento-local{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4);color:var(--fg-3);font-size:var(--fs-meta);font-weight:var(--fw-medium);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.agenda-evento-local span+span::before{content:'·';margin-right:var(--space-3);color:var(--line-accent)}
.agenda-vazia{padding:var(--space-7);border:1px solid var(--line-1);color:var(--fg-2);text-align:center}

.agenda-calendario{position:sticky;top:110px;min-width:0}
.agenda-folha{padding:var(--space-6);border:1px solid var(--line-1);background:var(--bg-page);box-shadow:var(--shadow-1)}
.agenda-calendario-cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--line-1)}
.agenda-calendario-cabeca h3{margin-top:var(--space-2);font-size:var(--fs-h4);font-weight:var(--fw-light);text-transform:capitalize}
.agenda-navegacao{display:flex;gap:var(--space-2)}
.agenda-navegacao button{display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--line-1);border-radius:50%;background:transparent;color:var(--fg-1);cursor:pointer;transition:background var(--dur-2) var(--ease-agua),color var(--dur-2) var(--ease-agua),border-color var(--dur-2) var(--ease-agua)}
.agenda-navegacao button:hover,.agenda-navegacao button:focus-visible{border-color:var(--bg-dark);background:var(--bg-dark);color:var(--fg-inv-1)}
.agenda-navegacao svg{width:20px;height:20px}.agenda-navegacao path{fill:none;stroke:currentColor;stroke-width:1.5}
.agenda-semana,.agenda-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2)}
.agenda-semana{padding-block:var(--space-5) var(--space-3)}
.agenda-semana span{color:var(--fg-3);font-size:var(--fs-meta);font-weight:var(--fw-medium);text-align:center;text-transform:uppercase}
.agenda-dia{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--fg-2);font:var(--fw-medium) var(--fs-body-s)/1 var(--font-sans)}
button.agenda-dia{cursor:pointer;transition:background var(--dur-2) var(--ease-agua),color var(--dur-2) var(--ease-agua),border-color var(--dur-2) var(--ease-agua),transform var(--dur-2) var(--ease-agua)}
button.agenda-dia:hover,button.agenda-dia:focus-visible{border-color:var(--line-accent);transform:scale(1.06)}
.agenda-dia--fora{opacity:.28}
.agenda-dia--hoje{border-color:var(--line-2);font-weight:var(--fw-bold)}
/* ---------- dia com atividade ----------
   Era um círculo em Aguas profundas 10% (#EAECEB) sobre o Vapor da
   página (#F2EBE0): 1,00:1. O círculo não existia para o olho, e só a
   bolinha comunicava. Agora o preenchimento é que sinaliza, com 4,76:1
   contra a página.

   É o barro-s70 e não o Barro puro pelo mesmo motivo que levou o botão
   do WhatsApp a ele: o número tem 14px, exige 4,5:1, e sobre Barro puro
   fica em 3,48:1 com Vapor e 2,76:1 com Águas profundas. Nenhuma cor de
   texto salva o Barro puro aqui. Em barro-s70 o Vapor dá 4,76:1. */
.agenda-dia--evento{background:var(--pan-barro-s70);color:var(--fg-inv-1)}

/* O anel de hover sai para FORA do círculo, por box-shadow, em vez de
   usar a borda de dentro. Pedra úmida sobre o preenchimento de barro-s70
   dá 1,12:1 — as duas têm quase a mesma luminosidade e só mudam de
   matiz, então o anel simplesmente não apareceria. Por fora, sobre o
   Vapor da página, a mesma Pedra úmida dá 4,24:1 e se lê inteira.
   Cabe na goteira de 8px do grid mesmo com o scale de hover. */
button.agenda-dia--evento:hover,
button.agenda-dia--evento:focus-visible{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--pan-pedra);
}
.agenda-dia.is-selecionado{border-color:var(--bg-dark);background:var(--bg-dark);color:var(--fg-inv-1)}
/* a bolinha agora vive sobre o barro: Vapor, 4,76:1 */
.agenda-dia-marca{position:absolute;right:20%;bottom:13%;width:5px;height:5px;border-radius:50%;background:var(--fg-inv-1)}
.agenda-dia-quantidade{position:absolute;top:8%;right:8%;display:grid;width:16px;height:16px;place-items:center;border-radius:50%;background:var(--pan-barro);color:var(--fg-inv-1);font-size:.58rem}
.agenda-calendario-rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line-1)}
.agenda-hoje{padding:0;border:0;border-bottom:1px solid var(--line-accent);background:transparent;color:var(--fg-1);font:var(--fw-medium) var(--fs-meta)/1.4 var(--font-sans);cursor:pointer}
.agenda-calendario-rodape p{display:flex;align-items:center;gap:var(--space-2);color:var(--fg-3);font-size:var(--fs-meta)}
/* a legenda mostra a amostra do que sinaliza hoje: quem marca o dia
   passou a ser o preenchimento, não mais a bolinha solta */
.agenda-calendario-rodape p span{width:12px;height:12px;border-radius:50%;background:var(--pan-barro-s70)}
.agenda-anuncio{min-height:1.5em;margin-top:var(--space-3);color:var(--fg-3);font-size:var(--fs-meta);line-height:var(--lh-normal)}

/* ---------- Responsividade das três páginas ---------- */
@media (max-width:1024px){
  .servicos-hero{min-height:auto}
  .servicos-hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:var(--space-7)}
  .servicos-fundamentos{grid-template-columns:1fr}
  .servicos-fundamentos li+li{border-left:0;border-top:1px solid var(--line-1)}
  .servicos-mapa-grade{grid-template-columns:1fr}
  .servicos-mapa-card{min-height:0}
  .servicos-inicio-grid{grid-template-columns:1fr}
  .ebook-galeria{grid-template-columns:1fr}
  .ebook-card{min-height:360px}
  .agenda-layout{grid-template-columns:1fr;gap:var(--space-8)}
  .agenda-calendario{position:relative;top:auto;order:-1}
}

@media (max-width:760px){
  .servicos-hero{padding-block:var(--space-8)}
  .servicos-hero-grid,.servicos-principio-grid{grid-template-columns:1fr}
  .servicos-hero-texto h1{font-size:clamp(2.55rem,12vw,4.1rem)}
  .servicos-hero-imagem{justify-self:stretch;width:100%;aspect-ratio:4/3}
  .servicos-hero-imagem img{object-position:center 38%}
  .servicos-principio-texto{font-size:var(--fs-body)}
  .servicos-grade,.servicos-convites-grade{grid-template-columns:1fr}
  .servico-formato{min-height:340px;padding:var(--space-6)}
  .servicos-convite-card,.servicos-cuidado{padding:var(--space-6)}
  .loja-abertura h1,.agenda-abertura h1{font-size:clamp(2.75rem,13vw,4.2rem)}
  .agenda-intro{align-items:start;flex-direction:column}
}

@media (max-width:600px){
  .pagina-servicos .wrap,.pagina-loja .wrap,.pagina-agenda .wrap{padding-inline:var(--space-5)}
  .servicos-hero-sumi{inset:-5% -50% 30% 15%}
  .servicos-cta,.servicos-cta .ir{width:100%;min-width:0}
  .servicos-fundamentos li{grid-template-columns:36px 1fr;padding:var(--space-5) 0}
  .servicos-secao-cabeca{margin-bottom:var(--space-6)}
  .ebook-card{display:flex;min-height:0;flex-direction:column}
  .ebook-card-capa{aspect-ratio:4/3;padding:var(--space-4)}
  .ebook-card-capa img{max-height:none;object-fit:contain}
  .ebook-card-corpo{padding:var(--space-5)}
  .ebook-card .ir{width:100%;min-width:0}
  .agenda-folha{padding:var(--space-5) var(--space-4)}
  .agenda-calendario-cabeca{align-items:flex-start}
  .agenda-calendario-cabeca h3{font-size:var(--fs-h5)}
  .agenda-navegacao button{width:40px;height:40px}
  .agenda-semana,.agenda-dias{gap:var(--space-1)}
  .agenda-dia{font-size:var(--fs-meta)}
  .agenda-calendario-rodape{align-items:flex-start;flex-direction:column}
  .agenda-evento{grid-template-columns:58px 1fr;gap:var(--space-4);padding:var(--space-4)}
  .agenda-evento-data strong{font-size:var(--fs-h4)}
  .agenda-evento-conteudo h5{font-size:var(--fs-h6)}
  .agenda-grupo-cabeca{align-items:flex-start;flex-direction:column;gap:var(--space-1)}
}

@media (prefers-reduced-motion:reduce){
  .servicos-hero-imagem img,.ebook-item,.ebook-card-capa img,.agenda-evento,button.agenda-dia{animation:none;transition:none}
  .ebook-galeria:has(.ebook-item:hover) .ebook-item:not(:hover),.ebook-item:hover{transform:none;opacity:1}
}

/* O ofício: enquadramento superior e revelação cromática no hover. */
.oficio-card-imagem{object-position:center top}
.oficio-card:hover .oficio-card-imagem,
.oficio-card:focus-within .oficio-card-imagem{filter:none}
.oficio-card:hover .oficio-card-imagem-artista,
.oficio-card:focus-within .oficio-card-imagem-artista{transform:scale(1.025)}
.oficio-card.mostra-terapeuta:hover .oficio-card-imagem-terapeuta,
.oficio-card.mostra-terapeuta:focus-within .oficio-card-imagem-terapeuta{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .oficio-card:hover .oficio-card-imagem-artista,
  .oficio-card:focus-within .oficio-card-imagem-artista,
  .oficio-card.mostra-terapeuta:hover .oficio-card-imagem-terapeuta,
  .oficio-card.mostra-terapeuta:focus-within .oficio-card-imagem-terapeuta{transform:none}
}

/* Prévia do depoimento: a própria imagem também é um acionador de play. */
.buscadora-video[data-depoimento-abrir]{cursor:pointer;outline:0}
.buscadora-video[data-depoimento-abrir]::before{
  content:'▶';position:absolute;z-index:2;top:50%;left:50%;display:grid;
  width:64px;height:64px;place-items:center;border:1px solid var(--line-inv);
  border-radius:50%;background:rgba(var(--vidro-rgb),.76);color:var(--fg-inv-1);
  font-size:1.25rem;line-height:1;pointer-events:none;
  transform:translate(-50%,-50%);transition:transform var(--dur-2) var(--ease-agua),background var(--dur-2) var(--ease-agua)
}
.buscadora-video[data-depoimento-abrir]:hover::before,
.buscadora-video[data-depoimento-abrir]:focus-visible::before{background:var(--pan-barro);transform:translate(-50%,-50%) scale(1.06)}
.buscadora-video[data-depoimento-abrir]:focus-visible{outline:2px solid var(--pan-barro);outline-offset:4px}

/* ---------- Contato ---------- */
.pagina-contato #conteudo{position:relative;overflow:clip}
.contato-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(var(--space-8),6vw,var(--space-9));
  border-bottom:1px solid var(--line-1);background:var(--bg-page)
}
.contato-hero::after{
  content:'';position:absolute;z-index:-1;inset:-76% -12% -70% 45%;
  background:url('../img/suminagashi-inteiro.svg') center/cover no-repeat;
  opacity:.055;transform:rotate(-6deg);pointer-events:none
}
.contato-hero h1{
  max-width:14ch;margin-top:var(--space-4);
  font-size:clamp(3rem,6.2vw,5.8rem);font-weight:var(--fw-light);line-height:.98
}
.contato-hero h1 b{font-weight:var(--fw-bold)}
.contato-hero .medida{
  max-width:53ch;margin-top:var(--space-6);color:var(--fg-2);
  font-size:var(--fs-body-l);line-height:var(--lh-loose)
}
.contato-canais{padding-block:clamp(var(--space-9),10vw,var(--space-11));background:var(--bg-recess)}
.contato-card{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(370px,.98fr);
  overflow:hidden;border:1px solid var(--line-1);background:var(--bg-page);box-shadow:var(--shadow-1)
}
.contato-imagem{position:relative;min-height:620px;margin:0;overflow:hidden;background:var(--bg-dark)}
.contato-imagem::after{
  content:'';position:absolute;inset:48% 0 0;
  background:linear-gradient(to top,rgba(var(--vidro-rgb),.82),transparent);pointer-events:none
}
.contato-imagem img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:var(--filtro-agua);transform:scale(1.018);
  transition:transform var(--dur-4) var(--ease-agua),filter var(--dur-3) var(--ease-agua)
}
.contato-card:hover .contato-imagem img{filter:none;transform:scale(1.045)}
.contato-imagem figcaption{
  position:absolute;z-index:1;right:var(--space-6);bottom:var(--space-6);left:var(--space-6);
  color:var(--fg-inv-2);font-size:var(--fs-meta);font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-micro);text-transform:uppercase
}
.contato-conteudo{display:flex;min-width:0;flex-direction:column;padding:clamp(var(--space-6),5vw,var(--space-9))}
.contato-conteudo h2{max-width:13ch;margin-top:var(--space-4);font-size:clamp(2.35rem,4.2vw,4.25rem);font-weight:var(--fw-light);line-height:1}
.contato-conteudo h2 b{font-weight:var(--fw-bold)}
.contato-conteudo>p{max-width:43ch;margin-top:var(--space-6);color:var(--fg-2);font-size:var(--fs-body-l);line-height:var(--lh-loose)}
.contato-whatsapp{display:inline-flex;width:auto;margin-top:var(--space-7);padding:0;border:0;background:transparent}
.contato-whatsapp:hover,.contato-whatsapp:focus-visible{border-color:transparent;background:transparent}
.contato-whatsapp .ir{min-width:276px;margin-top:0;border:1px solid var(--line-1)}
.contato-whatsapp .ir-rotulo{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3)}
/* O ícone do WhatsApp é traçado, e não sólido: é a família do resto
   do site — o X do menu e o hambúrguer também são fill:none com
   stroke. O glifo cheio que estava aqui era o único destoando.

   fill e stroke ficam declarados nos dois lugares de propósito: os
   atributos viajam com o desenho se ele for reaproveitado solto, e a
   regra aqui garante o comportamento mesmo se alguém colar uma
   versão do ícone sem eles. A espessura fica só no atributo, que é
   onde a forma se define. */
.contato-whatsapp .ir-rotulo svg{
  width:21px;height:21px;flex:none;
  fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round;
}
.contato-email{display:grid;gap:var(--space-2);width:max-content;max-width:100%;margin-top:var(--space-6);text-decoration:none}
.contato-email span{color:var(--fg-3);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.contato-email strong{overflow-wrap:anywhere;color:var(--fg-1);font-size:var(--fs-body-l);font-weight:var(--fw-medium);text-decoration:underline;text-decoration-color:var(--line-accent);text-decoration-thickness:1px;text-underline-offset:.25em}
.contato-acoes{display:grid;justify-items:start;gap:var(--space-4);margin-top:var(--space-6)}
.contato-acoes .contato-whatsapp,.contato-acoes .contato-email{margin-top:0}
.contato-disponibilidade{max-width:53ch;margin-top:var(--space-5);color:var(--fg-3);font-size:var(--fs-body-s);line-height:var(--lh-loose)}
.contato-cuidado{max-width:50ch;margin-top:auto;padding-top:var(--space-7);border-top:1px solid var(--line-1)}
.contato-cuidado .eyebrow{margin-bottom:var(--space-3)}
.contato-cuidado>p:last-child{color:var(--fg-2);font-size:var(--fs-body-s);line-height:var(--lh-loose)}
@media (max-width:900px){
  .contato-card{grid-template-columns:1fr}
  .contato-imagem{min-height:460px}
  /* Empilhada, a figura fica sozinha na linha e nao tem coluna de texto
     de onde herdar altura. Como o video saiu do fluxo, sem isto ela
     colapsaria. Proporcao em vez de pixel: acompanha a largura da tela
     em vez de virar uma faixa alta demais no tablet e baixa demais no
     celular. */
  .contato-video{aspect-ratio:16/10}
}
@media (max-width:600px){
  .pagina-contato .wrap{padding-inline:var(--space-5)}
  .contato-hero{padding-block:var(--space-7)}
  .contato-hero h1{font-size:clamp(2.7rem,13vw,4.1rem)}
  .contato-hero .medida,.contato-conteudo>p{font-size:var(--fs-body)}
  .contato-imagem{min-height:330px}
  .contato-imagem figcaption{right:var(--space-5);bottom:var(--space-5);left:var(--space-5)}
  .contato-conteudo{min-height:0;padding:var(--space-6) var(--space-5)}
  .contato-conteudo h2{font-size:clamp(2.2rem,11vw,3.4rem)}
  .contato-whatsapp,.contato-whatsapp .ir{width:100%;min-width:0}
  .contato-email strong{font-size:var(--fs-body)}
  .contato-acoes{width:100%}
}
@media (prefers-reduced-motion:reduce){.contato-imagem img{transition:none}.contato-card:hover .contato-imagem img{transform:scale(1.018)}}

/* ---------- Interações de Ofício e depoimento ---------- */
/* As abas preservam a função de tab, mas recebem a superfície do botão inundável. */
.oficio-card-abas{gap:1px;background:var(--line-1)}
.oficio-card-abas .oferta{
  display:block;flex:1 1 50%;min-width:0;min-height:64px;margin:0;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;text-decoration:none
}
.oficio-card-abas .oferta:hover,.oficio-card-abas .oferta:focus-visible{border-color:transparent;background:transparent}
.oficio-card-abas .oferta .ir{
  display:inline-flex;width:100%;height:64px;min-width:0;margin:0;padding:var(--space-3) var(--space-4);
  align-self:stretch;border:0;border-radius:0;background:var(--pan-profundas-80);color:var(--fg-inv-1)
}
.oficio-card-abas .oferta.is-active{border:0;background:transparent;color:inherit}
.oficio-card-abas .oferta.is-active .ir{box-shadow:inset 0 -3px 0 var(--pan-barro)}
.oficio-card-abas .oferta:focus-visible .ir{outline:2px solid var(--pan-barro);outline-offset:-5px}

/* A foto responde somente à própria máscara ou aos controles que a trocam. */
.oficio-card:hover .oficio-card-imagem,.oficio-card:focus-within .oficio-card-imagem{filter:var(--filtro-agua)}
.oficio-card:hover .oficio-card-imagem-artista,.oficio-card:focus-within .oficio-card-imagem-artista{transform:none}
.oficio-card.mostra-terapeuta:hover .oficio-card-imagem-terapeuta,.oficio-card.mostra-terapeuta:focus-within .oficio-card-imagem-terapeuta{transform:scale(1)}
.oficio-card-midia:hover .oficio-card-imagem,
.oficio-card:has(.oficio-card-abas .oferta:hover) .oficio-card-imagem,
.oficio-card:has(.oficio-card-abas .oferta:focus-visible) .oficio-card-imagem{filter:none}
.oficio-card:not(.mostra-terapeuta) .oficio-card-midia:hover .oficio-card-imagem-artista,
.oficio-card:not(.mostra-terapeuta):has(.oficio-card-abas .oferta:hover) .oficio-card-imagem-artista,
.oficio-card:not(.mostra-terapeuta):has(.oficio-card-abas .oferta:focus-visible) .oficio-card-imagem-artista{transform:scale(1.025)}
.oficio-card.mostra-terapeuta .oficio-card-midia:hover .oficio-card-imagem-terapeuta,
.oficio-card.mostra-terapeuta:has(.oficio-card-abas .oferta:hover) .oficio-card-imagem-terapeuta,
.oficio-card.mostra-terapeuta:has(.oficio-card-abas .oferta:focus-visible) .oficio-card-imagem-terapeuta{transform:scale(1.025)}

/* O play só nasce no hover, com as mesmas cinco bolhas do botão inundável. */
.buscadora-video[data-depoimento-abrir]::before{content:none}
.buscadora-play{
  position:absolute;z-index:2;top:50%;left:50%;display:grid;width:74px;height:74px;place-items:center;
  overflow:hidden;border:1px solid var(--line-inv);border-radius:50%;color:var(--fg-inv-1);pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.78);transition:opacity var(--dur-2) var(--ease-agua),transform var(--dur-3) var(--ease-agua)
}
.buscadora-play-onda{position:absolute;inset:0;width:100%;height:100%;fill:var(--pan-barro);pointer-events:none}
.buscadora-play-onda g{filter:url(#liq-goo)}
.buscadora-play-onda circle{transition:transform var(--dur-4) var(--ease-agua)}
.buscadora-play-onda .liq-1{transform:translate(-16px,-40px)}
.buscadora-play-onda .liq-2{transform:translate(8px,40px)}
.buscadora-play-onda .liq-3{transform:translate(40px,-40px)}
.buscadora-play-onda .liq-4{transform:translate(4px,40px)}
.buscadora-play-onda .liq-5{transform:translate(-40px,40px)}
.buscadora-play-icone{position:relative;z-index:1;width:24px;height:24px;fill:currentColor;transform:translateX(1px)}
.buscadora-video:hover .buscadora-play,
.buscadora-video:focus-visible .buscadora-play,
.buscadora-grade:has(.buscadora-assistir:hover) .buscadora-play,
.buscadora-grade:has(.buscadora-assistir:focus-visible) .buscadora-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.buscadora-video:hover .buscadora-play-onda circle,
.buscadora-video:focus-visible .buscadora-play-onda circle,
.buscadora-grade:has(.buscadora-assistir:hover) .buscadora-play-onda circle,
.buscadora-grade:has(.buscadora-assistir:focus-visible) .buscadora-play-onda circle{transform:translate(0,0)}
.buscadora-video:focus-visible img,
.buscadora-grade:has(.buscadora-assistir:hover) .buscadora-video img,
.buscadora-grade:has(.buscadora-assistir:focus-visible) .buscadora-video img{transform:scale(1.025);filter:none}
@media (max-width:700px){.oficio-card-abas .oferta .ir{height:68px;padding-inline:var(--space-3)}}
@media (prefers-reduced-motion:reduce){
  .oficio-card-midia:hover .oficio-card-imagem-artista,
  .oficio-card:not(.mostra-terapeuta):has(.oficio-card-abas .oferta:hover) .oficio-card-imagem-artista,
  .oficio-card.mostra-terapeuta .oficio-card-midia:hover .oficio-card-imagem-terapeuta,
  .oficio-card.mostra-terapeuta:has(.oficio-card-abas .oferta:hover) .oficio-card-imagem-terapeuta{transform:none}
  .buscadora-play,.buscadora-play-onda circle{transition:none}
}
/* ---------- Contato · envelope e escrita ---------- */
.contato-hero-grade{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);gap:clamp(var(--space-7),7vw,var(--space-10));align-items:center}
.contato-hero-texto{min-width:0;scroll-margin-top:110px}
.contato-envelope{
  --envelope-tilt-x:0deg;--envelope-tilt-y:0deg;
  width:min(100%,680px);margin:0;justify-self:end;perspective:1100px;transform-style:preserve-3d
}
.contato-envelope img{
  display:block;width:100%;height:auto;will-change:transform;transform-origin:center;
  filter:drop-shadow(0 24px 25px rgba(38,58,50,.16));
  transform:rotateX(var(--envelope-tilt-x)) rotateY(var(--envelope-tilt-y)) rotateZ(-2.5deg) translateZ(0);
  transition:transform 260ms var(--ease-agua),filter var(--dur-3) var(--ease-agua)
}
.contato-envelope.is-tilting img{filter:drop-shadow(0 32px 34px rgba(38,58,50,.22))}

.contato-video{position:relative;margin:0;overflow:hidden;background:var(--bg-dark)}
.contato-video::after{content:'';position:absolute;inset:48% 0 0;background:linear-gradient(to top,rgba(var(--vidro-rgb),.82),transparent);pointer-events:none}
/* O <video> sai do fluxo, e isso e o conserto de verdade.
   Ele e 544x720, em pe. Com height:100% dentro de um pai de altura
   automatica o valor degenera para auto, e o elemento passa a impor a
   propria proporcao: a 599px de largura, 792px de altura. Era por isso
   que os seis min-height espalhados por esta folha nunca mordiam —
   todos ficavam ABAIXO da altura natural, e nenhum era o motor.
   Fora do fluxo, a figura passa a esticar ate a linha do grid, que a
   coluna de texto define, e o object-fit recorta o resto. */
.contato-video video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:saturate(.88) contrast(.96);transform:scale(1.012)
}
.contato-video figcaption{position:absolute;z-index:1;right:var(--space-6);bottom:var(--space-6);left:var(--space-6);color:var(--fg-inv-2);font-size:var(--fs-meta);font-weight:var(--fw-medium);letter-spacing:var(--tracking-micro);text-transform:uppercase}

@media (max-width:900px){
  .contato-hero-grade{grid-template-columns:1fr}
  .contato-envelope{width:min(82%,580px);margin-top:var(--space-3);justify-self:center}
}
@media (max-width:600px){
  .contato-envelope{width:min(94%,500px);margin-top:var(--space-2)}
  .contato-video figcaption{right:var(--space-5);bottom:var(--space-5);left:var(--space-5)}
}
@media (prefers-reduced-motion:reduce){
  .contato-envelope img{filter:drop-shadow(0 20px 24px rgba(38,58,50,.16));transform:rotateZ(-2.5deg);transition:none}
}
/* ---------- Ofício · palavras-guia ---------- */
.oficio-card-painel .oficio-card-gancho{
  margin-bottom:var(--space-5);color:var(--pan-barro);
  font-size:clamp(1.75rem,2.7vw,2.7rem);font-weight:var(--fw-light);
  letter-spacing:var(--tracking-display);line-height:1
}
@media (max-width:700px){.oficio-card-painel .oficio-card-gancho{margin-bottom:var(--space-4);font-size:clamp(1.65rem,8vw,2.3rem)}}
/* ---------- Contato · fundo Unicorn ---------- */
.contato-hero::after{content:none}
.contato-unicorn-cena{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:hidden;
  pointer-events:none;background:var(--bg-page);contain:layout paint
}
.contato-unicorn-cena canvas,.contato-unicorn-cena iframe{width:100%!important;height:100%!important}
.contato-hero-grade{position:relative;z-index:1}
.contato-hero.unicorn-falha .contato-unicorn-cena{display:none}
@media (max-width:900px){.contato-hero-grade{min-height:0}}
/* ---------- Contato · ajuste do card de escrita ---------- */
.contato-card{max-width:1320px;margin-inline:auto}
.contato-video video{filter:var(--filtro-agua);transform:scale(1.012)}
.contato-conteudo{padding:clamp(var(--space-5),3.6vw,var(--space-7))}
.contato-conteudo h2{font-size:clamp(2.2rem,3.6vw,3.55rem)}
.contato-conteudo>p{margin-top:var(--space-5);font-size:var(--fs-body);line-height:var(--lh-loose)}
.contato-whatsapp{margin-top:var(--space-5)}
.contato-email{margin-top:var(--space-5)}
.contato-cuidado{margin-top:var(--space-5);padding-top:var(--space-5)}
/* ---------- Contato · carta cinética ---------- */
.contato-envelope img{
  transform:perspective(1100px) rotateX(var(--envelope-tilt-x)) rotateY(var(--envelope-tilt-y)) rotateZ(-2.5deg) translateZ(0);
  transition:transform 480ms var(--ease-agua),filter 900ms var(--ease-agua)
}
.contato-envelope.is-tilting img{
  filter:drop-shadow(0 32px 34px rgba(38,58,50,.22));
  transform:perspective(1100px) rotateX(var(--envelope-tilt-x)) rotateY(var(--envelope-tilt-y)) rotateZ(-2.5deg) translateZ(0)
}
/* ---------- o levantar da carta mora no link, a inclinacao no <img> ----------
   Os dois usavam a mesma propriedade `transform` no mesmo elemento, e
   por isso dividiam a mesma transicao. Nao da para pedir 2,5s para o
   levantar sem arrastar junto o giro, que precisa acompanhar o
   ponteiro. Separados em dois elementos, cada um tem o seu tempo. */
.contato-envelope-link{
  display:block;cursor:pointer;border-radius:var(--r-2);
  transform:scale(1);transform-origin:center;
  transition:transform 2500ms var(--ease-agua);
}
.contato-envelope-link:focus-visible{outline:2px solid var(--pan-barro);outline-offset:6px}
/* metade do que era: o incremento caiu de 0,075 para 0,0375 */
.contato-envelope.is-tilting .contato-envelope-link{transform:scale(1.0375)}

@media (prefers-reduced-motion:reduce){
  .contato-envelope-link{transition:none;transform:none}
  .contato-envelope.is-tilting .contato-envelope-link{transform:none}
  .contato-envelope.is-tilting img{transform:rotateZ(-2.5deg) scale(1);transition:none}
}
/* ---------- Quem conduz · fundo Unicorn Studio ---------- */
.situar-unicorn-cena{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  background:var(--bg-dark);
}
/* A composição do Unicorn substitui integralmente o vídeo mascarado anterior. */
.situar-secao::before{background:none}
/* ---------- Quem conduz · gradientes de profundidade ---------- */
.situar-secao::before,
.situar-secao::after{
  content:"";position:absolute;inset:auto 0 auto 0;z-index:1;
  height:clamp(76px,15%,180px);
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.6;
}
.situar-secao::before{
  top:0;
  background:linear-gradient(180deg,rgba(47,61,55,1) 0%,rgba(47,61,55,0) 100%);
}
.situar-secao::after{
  bottom:0;
  background:linear-gradient(0deg,rgba(47,61,55,1) 0%,rgba(47,61,55,0) 100%);
}
/* ---------- Citação líquida · faixas de separação ---------- */
.unicorn-citacao-cena{z-index:0}
.unicorn-citacao::before,
.unicorn-citacao::after{
  content:"";position:absolute;left:0;right:0;z-index:1;
  height:12.5px;
  pointer-events:none;
  background:var(--pan-barro-100);
}
.unicorn-citacao::before{top:0}
.unicorn-citacao::after{bottom:0}
/* ---------- Sobre · Hero com fundo Unicorn Studio ---------- */
.sobre-hero-unicorn-cena{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  background:var(--bg-dark);
}
.sobre-hero-sumi{display:none}
.sobre-hero::after{
  z-index:1;
  background:linear-gradient(112deg,rgba(47,61,55,.44),rgba(47,61,55,.14) 58%,rgba(47,61,55,.30));
}
.sobre-hero-grade{z-index:2}
/* ---------- Sobre · depoimento com fundo Unicorn Studio ---------- */
.buscadora-unicorn-cena{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  background:var(--bg-dark);
}
.sobre-buscadora::before{display:none}
.buscadora-grade{position:relative;z-index:1}
/* Contato · card compacto para viewport desktop. */
@media (min-width:901px){
  .contato-canais{padding-block:clamp(var(--space-7),6vw,var(--space-9))}
  /* piso, nao motor: so entra em cena se a coluna de texto encolher
     demais. Empilhado (abaixo de 901px) a figura fica sozinha na
     linha e precisa de altura propria — ver a regra logo abaixo. */
  .contato-video{min-height:320px}
  .contato-conteudo{padding:clamp(var(--space-5),2.5vw,var(--space-6))}
  .contato-conteudo h2{max-width:16ch;font-size:clamp(2.25rem,3vw,3rem);line-height:1.02}
  .contato-conteudo>p{margin-top:var(--space-4);line-height:1.55}
  .contato-whatsapp{margin-top:var(--space-4)}
  .contato-email{margin-top:var(--space-4)}
}
/* Serviços · Hero com fundo Unicorn Studio. */
.servicos-hero-unicorn-cena{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:hidden;
  pointer-events:none;background:var(--bg-recess);contain:layout paint
}
.servicos-hero-unicorn-cena canvas,
.servicos-hero-unicorn-cena iframe{width:100%!important;height:100%!important}
.servicos-hero-grid{position:relative;z-index:1}
.servicos-hero-texto{color:var(--pan-vapor-100)}
.servicos-hero .eyebrow{color:var(--fg-rotulo-inv)}
.servicos-hero-texto>p:last-of-type{color:var(--pan-vapor-100)}
.servicos-hero.unicorn-carregada .servicos-hero-sumi{display:none}
.servicos-hero.unicorn-falha .servicos-hero-unicorn-cena{display:none}
/* ---------- abertura da loja: cena Unicorn de fundo ----------
   isolation:isolate prende os z-index aqui dentro. Sem isso o 0 da
   cena e o 1 do texto passariam a disputar com o resto da página, e
   a abertura fica logo abaixo do cabeçalho fixo.

   O fundo do contêiner é o Vapor da página de propósito: enquanto a
   cena carrega, e se ela nunca carregar, o que aparece é a abertura
   como sempre foi, em vez de um bloco de cor estranha. */
.loja-abertura{position:relative;isolation:isolate;overflow:hidden}
.loja-abertura>.wrap{position:relative;z-index:1}
.loja-unicorn-cena{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:hidden;
  pointer-events:none;background:var(--bg-page);contain:layout paint
}
.loja-unicorn-cena canvas,
.loja-unicorn-cena iframe{width:100%!important;height:100%!important}
.loja-abertura.unicorn-falha .loja-unicorn-cena{display:none}
/* WebGL animado o tempo todo não combina com quem pediu menos
   movimento; o fundo volta a ser o Vapor chapado */
@media (prefers-reduced-motion:reduce){
  .loja-unicorn-cena{display:none}
}

/* ---------- tipografia da loja sobre a cena ----------
   Vapor SO depois que a cena confirma que subiu. O fundo de espera
   do contêiner é o próprio Vapor da página, então texto Vapor por
   padrão significaria abertura em branco enquanto carrega — e
   abertura em branco para sempre se o CDN cair.

   O VÉU existe porque a cena é ANIMADA. O contraste não é um
   número, é uma faixa que muda de quadro em quadro: nos tons mais
   escuros o Vapor dá 6,34:1, nos mais claros cai para 2,27:1. Sem
   piso, a legibilidade fica à sorte do quadro. Com 62% de Águas
   profundas o pior caso sobe para 5,34:1.

   É gradiente e não chapado: firme onde o texto está, à esquerda, e
   dissolvido à direita, onde a cena aparece sem nada por cima. */
.loja-abertura.unicorn-carregada .loja-unicorn-cena::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(var(--vidro-rgb),.62) 0%,
    rgba(var(--vidro-rgb),.60) 42%,
    rgba(var(--vidro-rgb),.20) 68%,
    rgba(var(--vidro-rgb),0)   88%);
}
.loja-abertura.unicorn-carregada h1,
.loja-abertura.unicorn-carregada .medida{color:var(--fg-inv-1)}
/* o rótulo tem token próprio para fundo escuro: 4,77:1 */
.loja-abertura.unicorn-carregada .eyebrow{color:var(--fg-rotulo-inv)}
/* a troca acontece quando a cena termina de subir; sem a transição
   ela pisca de escuro para claro num quadro só */
.loja-abertura h1,
.loja-abertura .medida,
.loja-abertura .eyebrow{transition:color 600ms var(--ease-agua)}

/* ---------- catálogo da loja: abas ---------- */
.loja-abas{
  display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin-bottom:var(--space-8);
}
/* a aba herda .oferta só pela superfície do botão inundável de dentro.
   A moldura de cartão sai: aqui não é cartão, é controle. */
.loja-abas>.oferta{
  display:block;width:auto;min-width:0;
  padding:0;border:0;background:transparent;box-shadow:none;
  font:inherit;color:inherit;cursor:pointer;
}
.loja-abas>.oferta:hover,
.loja-abas>.oferta:focus-visible{background:transparent;border-color:transparent}
.loja-abas .ir{margin-top:0;min-width:150px}
/* a aba ativa fica com o botão cheio de forma permanente: é o mesmo
   gesto do hover, parado, e por isso o estado se lê sem legenda */
.loja-abas>.oferta.is-active .ir-onda circle{transform:translate(0,0)}
.loja-abas>.oferta:focus-visible .ir{outline:2px solid var(--pan-barro);outline-offset:3px}

.loja-painel[hidden]{display:none}
.loja-catalogo-cabeca{margin-bottom:var(--space-8)}

/* ---------- cartão em preparação ----------
   Sem botão e com a capa recuada: o cartão precisa dizer que ainda
   não é comprável antes de alguém tentar clicar. */
.ebook-card--espera{opacity:.86}
.ebook-card--espera .ebook-card-capa{background:var(--bg-recess)}
.ebook-card--espera .ebook-card-capa img{
  width:62%;height:auto;max-height:none;object-fit:contain;opacity:.22
}

/* ---------- seletor de cor do maiô ---------- */
.produto-cores{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.produto-cor{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-1);border-radius:var(--r-pill);
  background:none;cursor:pointer;
  font-family:inherit;font-size:var(--fs-meta);color:var(--fg-2);
  letter-spacing:var(--tracking-micro);
  transition:border-color var(--dur-1) var(--ease-agua),color var(--dur-1) var(--ease-agua);
}
/* a amostra vem de uma variável inline no botão: a cor da peça é dado
   do produto, não do sistema, e amanhã pode ter uma terceira */
.produto-cor::before{
  content:'';width:13px;height:13px;flex:none;border-radius:50%;
  background:var(--amostra);box-shadow:inset 0 0 0 1px rgba(47,61,55,.18)
}
.produto-cor:hover{border-color:var(--line-2);color:var(--fg-1)}
.produto-cor.is-active{border-color:var(--pan-barro);color:var(--fg-1)}
.produto-cor:focus-visible{outline:2px solid var(--pan-barro);outline-offset:2px}

@media (max-width:700px){
  .loja-abas{gap:var(--space-2)}
  .loja-abas .ir{min-width:0;padding-inline:var(--space-4)}
}

/* ============================================================
   SOBRE EM CAPÍTULOS
   A página deixou de oferecer escolha: lê-se a marca (01) e depois
   Panmella (02). Os cartões da abertura são o índice dos capítulos.
   Propósito e eixos dividem uma seção; cada eixo abre um diálogo.
   Os valores viram card com abas laterais e a Escuta fica fixa na
   base, porque no manual ela é o solo dos outros quatro.
   ============================================================ */

/* botão líquido sem a caixa do cartão .oferta em volta */
.oferta-solta{display:inline-flex;width:auto;appearance:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.oferta-solta:hover,.oferta-solta:focus-visible{background:transparent;border-color:transparent;box-shadow:none}
.oferta-solta .ir{margin-top:0}
.oferta-solta:focus-visible{outline:0}
.oferta-solta:focus-visible .ir{outline:2px solid var(--pan-barro);outline-offset:3px}

/* propósito + eixos */
.sobre-eixos-abrir{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line-1)}
.sobre-eixos-abrir .eyebrow{color:var(--fg-rotulo)}
/* os três eixos numa fila no desktop: a coluna tem ~530px e os botões
   no padrão (24px de respiro, tracking .08em) pediam 588px. A letra
   segue com 13px, igual aos outros botões; só respiro e tracking
   encolhem. Abaixo de ~1200px de tela a fila quebra sozinha */
.sobre-eixos-botoes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.sobre-eixo-botao .ir{padding-inline:var(--space-4);letter-spacing:.05em}

/* diálogo do eixo */
.eixo-dialogo{width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:0;background:transparent;color:var(--fg-1);overflow:visible}
.eixo-dialogo::backdrop{background:rgba(20,30,26,.82);backdrop-filter:blur(8px)}
.eixo-dialogo-painel{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-1);background:var(--bg-page)}
.eixo-dialogo-midia{margin:0;background:var(--bg-dark)}
.eixo-dialogo-midia img{display:block;width:100%;height:100%;min-height:440px;object-fit:cover}
.eixo-dialogo-texto{display:flex;flex-direction:column;justify-content:center;padding:clamp(var(--space-6),5vw,var(--space-9))}
.eixo-dialogo-texto .eyebrow{color:var(--fg-rotulo)}
.eixo-dialogo-texto h2{margin-block:var(--space-3) var(--space-5);font-size:clamp(2rem,3.4vw,3.2rem);font-weight:var(--fw-light);line-height:1;letter-spacing:var(--tracking-display)}
.eixo-dialogo-destaque{color:var(--fg-1);font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:var(--lh-normal)}
.eixo-dialogo-texto p+p{margin-top:var(--space-4);color:var(--fg-2);line-height:var(--lh-loose)}
.eixo-dialogo-texto p strong{color:var(--fg-1)}
.eixo-dialogo-link{align-self:flex-start;margin-top:var(--space-6);padding-bottom:var(--space-1);border-bottom:1px solid var(--pan-barro);color:var(--fg-1);font-size:var(--fs-meta);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-micro);text-decoration:none;text-transform:uppercase;transition:border-color var(--dur-2) var(--ease-agua)}
.eixo-dialogo-link:hover,.eixo-dialogo-link:focus-visible{border-bottom-width:2px}
.eixo-dialogo-link:focus-visible{outline:2px solid var(--pan-barro);outline-offset:4px}
.eixo-fechar{position:absolute;z-index:1;top:var(--space-3);right:var(--space-3);display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line-inv);border-radius:50%;background:rgba(var(--vidro-rgb),.8);color:var(--fg-inv-1);font:1.7rem/1 var(--font-sans);cursor:pointer}
.eixo-fechar:hover,.eixo-fechar:focus-visible{background:var(--pan-barro)}
.eixo-fechar:focus-visible{outline:2px solid var(--pan-barro);outline-offset:3px}

/* valores com o mesmo suminagashi interativo do hero do Sobre */
.sobre-valores{position:relative;isolation:isolate;overflow:hidden}
.valores-unicorn-cena{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:var(--bg-dark)}
.sobre-valores::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(112deg,rgba(var(--vidro-rgb),.44),rgba(var(--vidro-rgb),.14) 58%,rgba(var(--vidro-rgb),.3));pointer-events:none}
.sobre-valores-grade{position:relative;z-index:2}
.sobre-valores.unicorn-falha .valores-unicorn-cena{display:none}

/* valores em card */
.valores-card{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);border:1px solid var(--line-inv);background:rgba(var(--vidro-rgb),.62)}
/* coluna lateral: símbolo no alto, abas juntas na base */
.valores-coluna{display:flex;flex-direction:column;border-right:1px solid var(--line-inv)}
.valores-simbolo{display:block;width:72px;height:72px;margin:var(--space-7) auto}
.valores-abas{display:flex;flex-direction:column;margin-top:auto;border-top:1px solid var(--line-inv)}
.valores-aba{display:flex;align-items:baseline;gap:var(--space-3);width:100%;padding:var(--space-4) var(--space-5);border:0;border-bottom:1px solid var(--line-inv);background:transparent;box-shadow:inset 3px 0 0 transparent;color:var(--fg-inv-2);font:var(--fw-semibold) var(--fs-body)/1.2 var(--font-sans);text-align:left;cursor:pointer;transition:color var(--dur-2) var(--ease-agua),background-color var(--dur-2) var(--ease-agua),box-shadow var(--dur-2) var(--ease-agua)}
.valores-aba:last-child{border-bottom:0}
.valores-aba span{color:var(--pan-barro-40);font-size:var(--fs-meta);font-weight:var(--fw-medium)}
.valores-aba:hover{color:var(--fg-inv-1);background:rgba(var(--vidro-rgb),.28)}
.valores-aba[aria-selected="true"]{color:var(--fg-inv-1);background:rgba(var(--vidro-rgb),.42);box-shadow:inset 3px 0 0 var(--pan-barro)}
.valores-aba:focus-visible{outline:2px solid var(--pan-barro);outline-offset:-4px}
.valores-paineis{display:grid;align-items:center;padding:clamp(var(--space-6),4vw,var(--space-8))}
.valores-painel{grid-area:1/1;outline:0}
.valores-card:not(.abas-prontas) .valores-painel{grid-area:auto}
.valores-card:not(.abas-prontas) .valores-painel+.valores-painel{margin-top:var(--space-6)}
.valores-card.abas-prontas .valores-painel:not([hidden]){animation:oficio-painel-entra var(--dur-2) var(--ease-agua) both}
.valores-num{color:var(--pan-barro-40);font-size:var(--fs-meta);letter-spacing:var(--tracking-micro)}
.valores-painel h3{margin-block:var(--space-3) var(--space-4);font-size:clamp(2.4rem,4vw,3.6rem);font-weight:var(--fw-bold);line-height:1}
.valores-painel p{max-width:34ch;color:var(--fg-inv-2);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:var(--lh-normal)}
.valores-solo{grid-column:1/-1;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--space-2) var(--space-5);padding:var(--space-5) clamp(var(--space-5),4vw,var(--space-8));border-top:1px solid var(--line-inv);background:rgba(var(--vidro-rgb),.42)}
/* o quinto valor: bola de Barro com o numeral em Vapor. 1,5rem em negrito
   conta como texto grande, que pede 3:1 de contraste, e Vapor sobre Barro dá 3,48:1 */
.valores-solo-num{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--pan-barro);color:var(--fg-inv-1);font-size:1.5rem;font-weight:var(--fw-bold);line-height:1}
.valores-solo strong{font-size:var(--fs-h4)}
.valores-solo p{color:var(--fg-inv-2);line-height:var(--lh-normal)}

/* fecho do capítulo 02 */
.sobre-travessia--fim{background:var(--bg-recess)}
.sobre-travessia-acoes{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:flex-end}
.sobre-travessia-acoes .ir{min-width:200px}

@media (max-width:900px){
  .sobre-travessia-acoes{justify-content:flex-start}
}
@media (max-width:760px){
  .eixo-dialogo-painel{grid-template-columns:1fr}
  .eixo-dialogo-midia img{min-height:0;height:auto;aspect-ratio:16/10}
}
@media (max-width:700px){
  .valores-card{grid-template-columns:1fr}
  /* em tela estreita as quatro abas viram grade 2x2: todas à vista, sem rolagem lateral */
  .valores-coluna{border-right:0}
  .valores-simbolo{width:52px;height:52px;margin:var(--space-5) auto}
  .valores-abas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line-inv)}
  .valores-aba{border-bottom:0;box-shadow:inset 0 -3px 0 transparent}
  .valores-aba:nth-child(odd){border-right:1px solid var(--line-inv)}
  .valores-aba:nth-child(-n+2){border-bottom:1px solid var(--line-inv)}
  .valores-aba[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--pan-barro)}
  .valores-solo{grid-template-columns:1fr}
}
@media (max-width:480px){
  .sobre-travessia-acoes,.sobre-travessia-acoes .oferta-solta,.sobre-travessia-acoes .ir{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .valores-aba{transition:none}
  .valores-card.abas-prontas .valores-painel:not([hidden]){animation:none}
}

/* ============================================================
   POP-UPS: entrada e saída suaves
   Meio segundo, na curva da água. O <dialog> só esmaece; quem se
   desloca é o painel. Se o transform ficasse no <dialog>, o canvas do
   cursor líquido, que mora dentro dele enquanto está aberto, passaria
   a se posicionar pelo diálogo e não pela tela durante o movimento.
   overlay/display allow-discrete mantêm o diálogo visível na saída.
   Navegador sem @starting-style abre e fecha sem animar.
   ============================================================ */
:root{--dur-dialogo:500ms}
.eixo-dialogo,.depoimento-dialogo{opacity:0;transition:opacity var(--dur-dialogo) var(--ease-agua),overlay var(--dur-dialogo) allow-discrete,display var(--dur-dialogo) allow-discrete}
.eixo-dialogo[open],.depoimento-dialogo[open]{opacity:1}
.eixo-dialogo-painel,.depoimento-dialogo-painel{transform:translateY(18px) scale(.985);transition:transform var(--dur-dialogo) var(--ease-agua)}
.eixo-dialogo[open] .eixo-dialogo-painel,.depoimento-dialogo[open] .depoimento-dialogo-painel{transform:none}
.eixo-dialogo::backdrop,.depoimento-dialogo::backdrop{opacity:0;transition:opacity var(--dur-dialogo) var(--ease-agua),overlay var(--dur-dialogo) allow-discrete,display var(--dur-dialogo) allow-discrete}
.eixo-dialogo[open]::backdrop,.depoimento-dialogo[open]::backdrop{opacity:1}
@starting-style{
  .eixo-dialogo[open],.depoimento-dialogo[open]{opacity:0}
  .eixo-dialogo[open] .eixo-dialogo-painel,.depoimento-dialogo[open] .depoimento-dialogo-painel{transform:translateY(18px) scale(.985)}
  .eixo-dialogo[open]::backdrop,.depoimento-dialogo[open]::backdrop{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .eixo-dialogo,.depoimento-dialogo,.eixo-dialogo::backdrop,.depoimento-dialogo::backdrop,.eixo-dialogo-painel,.depoimento-dialogo-painel{transition:none}
  .eixo-dialogo-painel,.depoimento-dialogo-painel{transform:none}
}

/* pop-up só de texto (a experiência, em Serviços) */
.eixo-dialogo--so-texto{width:min(780px,calc(100vw - 32px))}
.eixo-dialogo--so-texto .eixo-dialogo-painel{grid-template-columns:1fr}
.eixo-dialogo-texto h2 b{font-weight:var(--fw-bold)}
.eixo-dialogo .servicos-fundamentos{grid-template-columns:1fr;margin-top:var(--space-6)}
.eixo-dialogo .servicos-fundamentos li{grid-template-columns:36px 1fr;padding:var(--space-4) 0}
.eixo-dialogo .servicos-fundamentos li+li{border-left:0;border-top:1px solid var(--line-1)}
.eixo-dialogo .servicos-fundamentos p{margin-top:0}
.servicos-formatos-botoes{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.eixo-dialogo .servicos-etapas{margin-top:var(--space-5)}
.eixo-dialogo .servicos-cuidado{margin-top:var(--space-6);padding:var(--space-6);background:var(--bg-recess)}
.eixo-dialogo .servicos-cuidado h3{font-size:var(--fs-h5,1.5rem)}
.eixo-dialogo .servicos-cuidado .servicos-cta .ir{margin-top:var(--space-5)}

/* tarja de separação entre os dois capítulos: valores (fim do 01) e
   depoimento (início do 02) têm textura, e sem uma pausa lisa a borda
   entre elas se perde. Reaproveita o ::before que antes carregava o
   suminagashi estático da seção */
.sobre-buscadora::before{content:"";display:block;position:absolute;z-index:2;inset:0 0 auto 0;height:clamp(24px,2.4vw,40px);background:var(--pan-profundas-100);opacity:1;pointer-events:none}

/* "outros contextos" em pop-up (Serviços): cards empilhados dentro do painel */
.eixo-dialogo .servicos-convites-grade{grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-5)}
.eixo-dialogo .servicos-convite-card{padding:var(--space-5)}
.eixo-dialogo .servicos-convite-card h3{max-width:none;margin-block:var(--space-2);font-size:var(--fs-h5,1.5rem)}
.eixo-dialogo .servicos-convite-card a{margin-top:var(--space-4)}

/* botão "Cartas d'Água" na home: respiro entre a frase e o botão */
.carta-viva-botao{margin-top:var(--space-5)}

/* ============================================================
   CARTAS D’ÁGUA · card de imagem cheia
   Mesma flutuação do slide e mesma escala do card. A imagem sangra
   até as bordas, o gradiente Águas profundas sustenta a leitura e a
   hierarquia do texto segue o card do PROCESSO: rótulo em Barro claro,
   título em Vapor, linha de apoio em Águas profundas 20. No hover a
   imagem de dentro abre (zoom), sem mexer no transform do card.
   ============================================================ */
.blog-card{background-image:none;background-color:var(--pan-profundas-100)}
.blog-card-imagem{
  position:absolute;inset:0;margin:0;
  aspect-ratio:auto;border-radius:0;
  background:var(--pan-profundas-100);box-shadow:none;
}
.blog-card-imagem img{
  filter:none;
  transform:scale(1);
  transition:transform var(--dur-3) var(--ease-agua);
}
.blog-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(47,61,55,.94) 0%,rgba(47,61,55,.82) 26%,
    rgba(47,61,55,.32) 52%,rgba(47,61,55,0) 72%);
}
.blog-card-corpo{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  flex:none;padding:0 7% 7%;
}
.blog-card-meta{
  font-size:clamp(.68rem,3.9cqi,.9rem);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-micro);
  color:var(--fg-inv-2);
}
.blog-card-meta>span{color:var(--fg-rotulo-inv)}
.blog-card-meta time{font-weight:var(--fw-regular)}
.blog-card h3{
  margin-top:2.6cqi;
  color:var(--pan-vapor-100);
  font-size:clamp(1.2rem,7.2cqi,1.95rem);
  line-height:1.1;
  text-transform:none;
}
.blog-card-corpo>p{
  margin-top:2.6cqi;
  color:var(--fg-inv-2);
  font-size:clamp(.8rem,4cqi,1rem);
  font-weight:var(--fw-regular);
  line-height:1.3;
  text-transform:none;
}
.blog-card-corpo>p strong{color:var(--pan-vapor-100)}
.blog-card:focus-visible .blog-card-imagem img{transform:scale(1.06)}
@media (hover:hover) and (pointer:fine){
  .blog-card:hover .blog-card-imagem img{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .blog-card-imagem img,
  .blog-card:hover .blog-card-imagem img,
  .blog-card:focus-visible .blog-card-imagem img{transform:none!important;transition:none}
}

/* ---------- Agenda: abertura sobre a cena Unicorn ----------
   A cena ocupa a dobra inteira. O texto fica à esquerda, em Vapor, sobre um degradê
   Águas profundas que garante o contraste nos quadros mais claros da animação. */
.agenda-abertura--cena{
  display:flex;align-items:center;min-height:clamp(560px,80svh,840px);
  padding-block:clamp(var(--space-8),8vw,var(--space-10));
  background:var(--pan-profundas-100);border-bottom:0
}
.agenda-abertura--cena::after{display:none}
.agenda-abertura--cena::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(47,61,55,.82) 0%,rgba(47,61,55,.66) 32%,rgba(47,61,55,.18) 58%,rgba(47,61,55,0) 72%)
}
.agenda-abertura--cena .wrap{width:100%}
.agenda-abertura--cena .eyebrow{color:var(--fg-rotulo-inv)}
.agenda-abertura--cena h1{color:var(--fg-inv-1)}
.agenda-abertura--cena .medida{color:var(--fg-inv-2)}
@media (max-width:1180px){
  /* telas médias e estreitas: o texto ocupa a largura toda, então o véu cobre a cena inteira */
  .agenda-abertura--cena{min-height:clamp(460px,70svh,640px)}
  .agenda-abertura--cena::before{background:rgba(47,61,55,.55)}
}

/* ---------- Loja: abertura com vídeo (teste) ----------
   Vídeo da tenda sobre a água ocupa a dobra. O texto fica no alto, à esquerda, sobre a
   névoa clara que ocupa os três quartos de cima do quadro (a parte submersa é escura). */
.loja-abertura--video{
  display:flex;align-items:flex-start;min-height:0;
  height:min(calc(100vw * 9 / 16), calc(100svh - 86px));
  padding-block:clamp(var(--space-8),7vw,var(--space-10)) var(--space-8);
  background:var(--bg-page);border-bottom:0
}
.loja-abertura--video::after{display:none}
/* véu Vapor só à esquerda: clareia a pedra atrás do parágrafo e some antes da tenda */
.loja-abertura--video::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,235,224,.86) 0%,rgba(242,235,224,.62) 30%,rgba(242,235,224,.16) 48%,rgba(242,235,224,0) 58%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 80%);mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 80%)}
.loja-abertura-video{position:absolute;top:0;bottom:0;right:0;left:auto;z-index:-2;height:100%;width:auto;aspect-ratio:16/9;max-width:100%;object-fit:contain;object-position:50% 50%;pointer-events:none;opacity:.9;
  /* empurrado um pouco além da borda direita (a seção corta o excesso) para a borda esquerda ficar longe do texto;
     a dissolução é longa e em curva, para não sobrar linha visível mesmo a 90% */
  transform:translateX(8%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 4%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.75) 32%,#000 40%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 4%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.75) 32%,#000 40%)}
.loja-abertura--video .wrap{width:100%}
.loja-abertura--video .medida{max-width:44ch;color:var(--fg-1)}
@media (max-width:1180px){
  /* telas médias e estreitas: o vídeo vem inteiro no topo e o texto fica abaixo, no Vapor */
  .loja-abertura--video{display:block;min-height:0;height:auto;padding-block:0 var(--space-5);background:var(--bg-page)}
  /* o catálogo começa logo abaixo da abertura, sem o vão do padding padrão da seção */
  .loja-abertura--video + .loja-catalogo{padding-top:var(--space-4)}
  /* o rótulo "loja" sobe para a névoa clara no alto do vídeo; o título ocupa o lugar dele */
  .loja-abertura--video .wrap{position:static}
  .loja-abertura--video .filete,
  .loja-abertura--video .eyebrow{position:absolute;z-index:2;left:var(--loja-recuo,32px)}
  .loja-abertura--video .filete{top:var(--space-5)}
  .loja-abertura--video .eyebrow{top:calc(var(--space-5) + 14px);margin:0}
  .loja-abertura--video h1{position:relative;z-index:1;margin-top:0}
  .loja-abertura--video .medida{position:relative;z-index:1}
  .loja-abertura--video::before{display:none}
  /* telas estreitas: vídeo a 90%, base dissolvida no Vapor e texto mais próximo */
  .loja-abertura-video{opacity:.9;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%)}
  .loja-abertura-video{position:relative;inset:auto;z-index:0;display:block;height:auto;aspect-ratio:16/9;margin-bottom:calc(var(--space-3) * -1);transform:none}
  .loja-abertura--video .medida{color:var(--fg-2)}
}
@media (max-width:600px){
  .loja-abertura--video{--loja-recuo:24px}
  /* mantém 16:9: o vídeo aparece inteiro também no celular */
}

/* Agenda: a cena Unicorn no fundo da abertura */
.agenda-unicorn-cena{
  position:absolute;z-index:-3;inset:0;width:100%;height:100%;overflow:hidden;
  pointer-events:none;background:var(--pan-profundas-100);contain:layout paint
}
.agenda-unicorn-cena canvas,
.agenda-unicorn-cena iframe{width:100%!important;height:100%!important}
.agenda-abertura.unicorn-falha .agenda-unicorn-cena{display:none}
@media (prefers-reduced-motion:reduce){
  .agenda-unicorn-cena{display:none}
}