/* =====================================================================
   A FOLHA DA ABERTURA  (rt-home.css)
   ===================================================================== */

/* =====================================================================
   O HERÓI
   ---------------------------------------------------------------------
   Fundo azul-marinho profundo com um gradiente de água funda no meio —
   o mesmo azul que um casco vê quando sai da barra. As obras flutuam por
   cima, cada uma com a tinta escapando da moldura.
   ===================================================================== */
.rt-heroi{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #17456b 0%, rgba(23,69,107,0) 62%),
    radial-gradient(90% 70% at 15% 100%, #0f3a52 0%, rgba(15,58,82,0) 58%),
    var(--mar);
  color:var(--papel);
  padding:clamp(48px, 8vw, 110px) 0 clamp(90px, 10vw, 150px);
}

.rt-heroi-in{
  max-width:var(--larg); margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:clamp(34px, 5vw, 64px);
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items:center;
}
@media (max-width:980px){
  .rt-heroi-in{ grid-template-columns:1fr; }
}

.rt-heroi-dizer h1{
  color:var(--papel); margin-bottom:.35em;
  font-size:clamp(2.3rem, 6vw, 4.2rem); line-height:1.04;
}
.rt-heroi-dizer h1 em{
  font-style:italic; color:var(--latao-claro); display:block;
}
.rt-heroi-dizer p{
  font-size:clamp(1rem, 1.6vw, 1.16rem); color:#c9d6e2;
  max-width:46ch; line-height:1.7;
}
.rt-heroi-bts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.rt-heroi-medalhas{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:34px;
  padding-top:22px; border-top:1px solid rgba(217,185,120,.24);
}
.rt-medalha{ display:flex; align-items:center; gap:10px; font-size:.82rem; line-height:1.3; }
.rt-medalha svg{ width:30px; height:30px; flex:0 0 auto; }
.rt-medalha b{ display:block; color:var(--latao-claro); font-size:.86rem; }
.rt-medalha span{ color:#bcc9d5; }

/* ---------------- a parede de obras ---------------- */
.rt-heroi-parede{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  /* A PAREDE TEM ALTURA PRÓPRIA, e não a altura do texto ao lado.
     Sem `aspect-ratio` as seis linhas se esticavam para acompanhar a
     coluna vizinha e os quadros saíam desproporcionais — um 17x27
     virava quadrado. Agora a parede é um retângulo estável e as obras
     mantêm cada uma a sua forma. */
  aspect-ratio:1.06 / 1;
  grid-template-rows:repeat(6, minmax(0, 1fr));
  gap:clamp(8px, 1.2vw, 16px);
  align-self:center;
}
@media (max-width:980px){
  .rt-heroi-parede{ aspect-ratio:1.25 / 1; }
}
.rt-heroi-peca{
  position:relative; display:block; text-decoration:none;
  transform:translateY(var(--desl, 0px));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  animation:rt-flutua 9s ease-in-out infinite;
  animation-delay:calc(var(--i) * -1.4s);
}
@keyframes rt-flutua{
  0%,100%{ margin-top:0; }
  50%{ margin-top:-7px; }
}
.rt-heroi-peca:nth-child(1){ grid-area:1 / 1 / 4 / 4; }
.rt-heroi-peca:nth-child(2){ grid-area:1 / 4 / 3 / 6; }
.rt-heroi-peca:nth-child(3){ grid-area:3 / 4 / 5 / 7; }
.rt-heroi-peca:nth-child(4){ grid-area:4 / 1 / 7 / 3; }
.rt-heroi-peca:nth-child(5){ grid-area:5 / 3 / 7 / 5; }
.rt-heroi-peca:nth-child(6){ grid-area:5 / 5 / 7 / 7; }
/* A CÉLULA É UM LUGAR NA PAREDE, NÃO UM MOLDE.
   ---------------------------------------------------------------------
   Antes o quadro ocupava a célula inteira (`width:100%;height:100%`) com
   `object-fit:cover` e `aspect-ratio:auto !important` — ou seja, a forma
   da GRADE mandava na forma da OBRA. Uma paisagem de 36×17 posta numa
   célula quadrada virava um quadrado com as duas pontas cortadas fora.
   Numa parede de verdade ninguém serra a tela para ela caber no prego.

   Agora a célula é só o espaço disponível: o quadro entra com a
   proporção dele (`--prop`, que vem de `larg/alt` da legenda), centrado,
   crescendo até esbarrar na largura ou na altura da célula — o que vier
   primeiro. Deitado fica deitado, em pé fica em pé, e nada é cortado. */
.rt-heroi-peca{ display:flex; align-items:center; justify-content:center; }
.rt-heroi-peca .rt-quadro{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  aspect-ratio:var(--prop, 1);
  display:flex; flex-direction:column;
}
.rt-heroi-peca .rt-quadro-pasp{ flex:1 1 auto; display:flex; min-height:0; }
.rt-heroi-peca .rt-quadro-obra,.rt-heroi-peca .rt-falta{
  width:100%; height:100%; object-fit:contain; aspect-ratio:auto !important;
}

/* A TINTA QUE ESCAPA
   ------------------------------------------------------------------
   É a mesma imagem, maior, borrada, com opacidade baixa e recortada
   por uma máscara radial que morre antes da borda. O filtro SVG de
   turbulência (posto pelo rt-home.js) empurra esse recorte e dá à
   mancha o contorno irregular de aguada em papel.
   `pointer-events:none` porque a mancha é pintura, não é botão. */
.rt-heroi-tinta{
  position:absolute; inset:-26% -26%; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:.44; filter:blur(9px);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 26%, rgba(0,0,0,.55) 48%, transparent 74%);
  mask-image:radial-gradient(ellipse at center, #000 26%, rgba(0,0,0,.55) 48%, transparent 74%);
  mix-blend-mode:screen;
}
.rt-heroi-peca:hover .rt-heroi-tinta{ opacity:.6; }
.rt-heroi-peca .rt-quadro{ position:relative; z-index:1; }

.rt-heroi-nome{
  position:absolute; left:0; right:0; bottom:-22px; z-index:2;
  font-size:.7rem; color:#a9bccb; text-align:center;
  opacity:0; transition:opacity var(--t);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rt-heroi-peca:hover .rt-heroi-nome,.rt-heroi-peca:focus-visible .rt-heroi-nome{ opacity:1; }

.rt-heroi-sem{ color:#c9d6e2; grid-column:1/-1; align-self:center; text-align:center; }

/* =====================================================================
   A MARÉ — a onda que separa o mar do papel
   ---------------------------------------------------------------------
   Duas ondas em SVG, uma sobre a outra, andando em velocidades
   diferentes e em sentidos opostos. É o ÚNICO movimento contínuo do
   site, e é lento de propósito: 22 e 30 segundos por volta. Quem pede
   menos animação vê as mesmas ondas, paradas.
   ===================================================================== */
.rt-mare{ position:relative; line-height:0; background:var(--mar); }
.rt-mare svg{ display:block; width:100%; height:clamp(48px, 7vw, 96px); }
.rt-mare .o1{ fill:rgba(247,244,238,.35); animation:rt-onda 30s linear infinite; }
.rt-mare .o2{ fill:var(--papel); animation:rt-onda 22s linear infinite reverse; }
@keyframes rt-onda{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.rt-mare.invertida{ background:var(--papel); transform:scaleY(-1); }
.rt-mare.invertida .o2{ fill:var(--mar); }
.rt-mare.invertida .o1{ fill:rgba(11,35,56,.35); }

/* =====================================================================
   OS BLOCOS DE CHAMADA
   ===================================================================== */
.rt-chamada{
  display:grid; gap:clamp(28px, 4vw, 56px); align-items:center;
  grid-template-columns:1fr 1fr;
}
.rt-chamada.trocada{ direction:rtl; }
.rt-chamada.trocada > *{ direction:ltr; }
@media (max-width:860px){ .rt-chamada,.rt-chamada.trocada{ grid-template-columns:1fr; direction:ltr; } }

.rt-chamada-fig{ position:relative; display:grid; place-items:center; }
.rt-chamada-fig .rt-quadro{ max-width:min(100%, 420px); }

.rt-lista-vant{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:11px; }
.rt-lista-vant li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; line-height:1.55; }
.rt-lista-vant svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:var(--latao); }
.rt-secao.mar .rt-lista-vant svg{ color:var(--latao-claro); }

/* =====================================================================
   OS NÚMEROS DA CASA
   ===================================================================== */
.rt-numeros{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  margin-top:10px;
}
.rt-numero b{
  display:block; font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem);
  line-height:1; color:var(--latao-claro);
}
.rt-numero span{ font-size:.82rem; color:#bcc9d5; }
.rt-secao:not(.mar) .rt-numero b{ color:var(--latao); }
.rt-secao:not(.mar) .rt-numero span{ color:var(--tinta-suave); }

/* =====================================================================
   A FAIXA DE REDES
   ===================================================================== */
.rt-faixa-redes{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
}

/* =====================================================================
   O AVISO DO ESTÚDIO DE IMAGENS
   ---------------------------------------------------------------------
   Aparece só enquanto faltarem arquivos de obra. É a ponte entre o
   catálogo (que está pronto) e as imagens (que são do artista). Quando
   todas as obras tiverem foto, ele some sozinho — e o site nunca mais
   fala nisso.
   ===================================================================== */
.rt-convite-estudio{
  background:var(--papel-2); border:1.5px solid var(--linha);
  border-left:4px solid var(--latao); border-radius:0 var(--raio-g) var(--raio-g) 0;
  padding:18px 22px; margin:0 0 32px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.rt-convite-estudio p{ margin:0; flex:1 1 300px; font-size:.9rem; line-height:1.55; }
.rt-convite-estudio b{ font-family:var(--serif); font-size:1.02rem; }

/* =====================================================================
   A ABERTURA SÓ COM O NOME  (.rt-heroi-so)
   ---------------------------------------------------------------------
   Sem parágrafo, sem botões e sem medalhas, a coluna do texto ficou com
   duas linhas — e duas linhas numa coluna de 45% da largura parecem
   esquecidas ali. O nome passa a ser a peça grande da coluna, em corpo
   de cartaz, e a parede de aquarelas cresce para ocupar o resto. A
   página inteira cabe na primeira tela, como a vitrine de uma galeria.
   ===================================================================== */
.rt-heroi-so{
  min-height:calc(100vh - 74px);
  min-height:calc(100svh - 74px);
  display:flex; align-items:center;
  padding:clamp(28px, 5vw, 64px) 0 clamp(70px, 8vw, 110px);
}
.rt-heroi-so .rt-heroi-in{
  width:100%;
  grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.rt-heroi-so .rt-heroi-dizer h1{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  line-height:1.02; letter-spacing:-.01em; margin:0;
}
.rt-heroi-so .rt-heroi-dizer h1 em{
  font-size:.52em; letter-spacing:.02em; margin-top:.35em;
}
@media (max-width:980px){
  .rt-heroi-so{ min-height:0; }
  .rt-heroi-so .rt-heroi-in{ grid-template-columns:1fr; }
  .rt-heroi-so .rt-heroi-dizer{ text-align:center; }
}

/* =====================================================================
   O MAR EM AQUARELA  (.rt-mar-aq) — ver o comentário em rt-home.js
   ---------------------------------------------------------------------
   Mora no pé da abertura, por trás do nome e das obras. A última onda
   tem a cor do rodapé, e por isso o mar parece continuar dentro dele.
   ===================================================================== */
.rt-heroi-so{ padding-bottom:clamp(120px, 15vw, 210px); }
.rt-heroi-so .rt-heroi-in{ position:relative; z-index:1; }
.rt-mar-aq{
  position:absolute; left:0; right:0; bottom:-1px; z-index:0;
  height:clamp(150px, 21vw, 280px);
  pointer-events:none; overflow:visible;   /* quem corta dos lados é a abertura */
}
.rt-mar-raia{ position:absolute; left:0; top:0; width:100%; height:100%; }
.rt-barco{
  position:absolute; left:0; top:0; transform-origin:50% 92%;
  will-change:transform; pointer-events:none;
  filter:saturate(.92) drop-shadow(0 1px 0 rgba(11,35,56,.25));
}
.rt-mar-raia[data-raia="0"] .rt-barco{ filter:saturate(.75) brightness(.95) blur(.3px); }
/* O FUNDO VIVO (rt-fundo.js): a pintura por baixo de tudo e um véu azul
   por cima dela, para o nome e as obras continuarem legíveis */
.rt-fundo-vivo{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; display:block; }
.rt-fundo-parado{ background-size:cover; background-position:center 60%; }
.rt-fundo-veu{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,35,56,.86) 0%, rgba(11,35,56,.66) 38%, rgba(11,35,56,.42) 100%),
    linear-gradient(180deg, rgba(11,35,56,.38) 0%, rgba(11,35,56,0) 35%, rgba(11,35,56,.25) 100%);
}
@media (max-width:980px){
  .rt-fundo-veu{ background:
    linear-gradient(180deg, rgba(11,35,56,.8) 0%, rgba(11,35,56,.62) 45%, rgba(11,35,56,.5) 100%); }
}
.rt-mar-aq-camada{
  position:absolute; left:0; bottom:0; height:100%; width:200%;
  line-height:0;
  will-change:transform;
  animation:rt-mar-anda var(--dur, 30s) linear infinite;
}
.rt-mar-aq-camada.volta{ animation-direction:reverse; }
.rt-mar-aq-camada svg{ display:block; width:100%; height:100%; overflow:visible; }
@keyframes rt-mar-anda{
  from{ transform:translate3d(0, 0, 0); }
  to{ transform:translate3d(-50%, 0, 0); }
}
/* a maré sobe e desce devagar, e cada camada no seu tempo */
.rt-mar-aq-camada:nth-child(2n) svg{ animation:rt-mar-mare 11s ease-in-out infinite; }
.rt-mar-aq-camada:nth-child(2n+1) svg{ animation:rt-mar-mare 14s ease-in-out infinite reverse; }
@keyframes rt-mar-mare{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(7px); }
}
@media (prefers-reduced-motion: reduce){
  .rt-mar-aq-camada,.rt-mar-aq-camada svg{ animation:none !important; }
}

/* =====================================================================
   A GARÇA (rt-garca.js) — uma camada do tamanho da abertura, por cima
   de tudo e sem receber clique. No celular o nome desce um pouco, para
   a garça de pé caber entre o cabeçalho e as letras.
   ===================================================================== */
.rt-garca{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:3; pointer-events:none; overflow:visible;
}
@media (max-width:980px){
  .rt-heroi-so .rt-heroi-dizer h1{ margin-top:clamp(64px, 17vw, 120px); }
}

/* =====================================================================
   A ABERTURA CLARA (pedido de 19/09/2026: "a página inicial está muito
   escura, deixe-a mais clara"). O fundo continua sendo a aquarela viva,
   mas o véu por cima dela passa a ser de PAPEL, e não de mar: a pintura
   aparece luminosa, como numa parede de galeria, e o nome volta a ser
   tinta escura sobre papel claro. O mar e o rodapé continuam azuis.
   ===================================================================== */
.rt-heroi.rt-heroi-claro{
  background:var(--papel);
  color:#10202e;
  --tinta:#10202e; --tinta-suave:#46586a; --tinta-fraca:#5d6c7a;
  --latao:#775a22; --linha:#d9d0bf;
}
.rt-heroi-claro .rt-heroi-dizer h1{ color:#10202e; text-shadow:0 1px 18px rgba(247,244,238,.9); }
.rt-heroi-claro .rt-heroi-dizer h1 em{ color:#775a22; }
.rt-heroi-claro .rt-fundo-veu{
  background:
    linear-gradient(90deg, rgba(247,244,238,.86) 0%, rgba(247,244,238,.62) 38%, rgba(247,244,238,.34) 100%),
    linear-gradient(180deg, rgba(247,244,238,.3) 0%, rgba(247,244,238,0) 40%);
}
@media (max-width:980px){
  .rt-heroi-claro .rt-fundo-veu{ background:
    linear-gradient(180deg, rgba(247,244,238,.84) 0%, rgba(247,244,238,.6) 45%, rgba(247,244,238,.42) 100%); }
}
.rt-heroi-claro .rt-heroi-peca .rt-quadro-obra,
.rt-heroi-claro .rt-heroi-peca img{ box-shadow:0 10px 30px rgba(40,34,24,.22), 0 2px 6px rgba(40,34,24,.14); }
.rt-heroi-claro .rt-garca{ filter:drop-shadow(0 2px 3px rgba(40,50,60,.28)); }

/* o botão do som do mar (rt-som.js) */
.rt-som-bt{
  position:absolute; right:clamp(14px, 3vw, 34px); top:clamp(14px, 2.4vw, 26px); z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  width:44px; height:44px; justify-content:center; border-radius:50%; cursor:pointer;
  background:rgba(247,244,238,.88); color:#10202e; border:1.5px solid rgba(119,90,34,.45);
  font-size:.8rem; font-weight:700; box-shadow:0 4px 14px rgba(11,35,56,.12);
}
.rt-som-bt:hover{ background:#fff; }
.rt-som-bt[aria-pressed="false"]{ color:#46586a; }
@media (max-width:560px){ .rt-som-bt span{ display:none; } .rt-som-bt{ padding:8px 10px; } }

.rt-heroi-parede.rt-home-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;height:auto;min-height:0;aspect-ratio:auto;grid-template-rows:none;padding:20px}.rt-heroi-parede.rt-home-carrossel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;height:auto;min-height:0;aspect-ratio:auto;padding:20px}.rt-home-carrossel>*{flex:0 0 min(75vw,360px);scroll-snap-align:center}.rt-home-grade .rt-card,.rt-home-carrossel .rt-card{position:relative;transform:none}@media(max-width:640px){.rt-heroi-parede.rt-home-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.rt-movimento-bt{right:calc(clamp(14px, 3vw, 34px) + 54px);font-size:20px}
.rt-movimento-pausado #rtAbertura *, .rt-movimento-pausado #rtAbertura *::before, .rt-movimento-pausado #rtAbertura *::after{animation-play-state:paused!important;transition:none!important;will-change:auto!important}
.rt-som-bt:focus-visible{outline:3px solid #b88124;outline-offset:3px}