/* =====================================================================
   RICARDO TRAVESEDO ARTES — A FOLHA DA CASA  (estilo.css)
   =====================================================================

   O TEMA É NÁUTICO, E ISSO NÃO QUER DIZER ÂNCORA DESENHADA
   ---------------------------------------------------------------------
   A maioria das aquarelas do Ricardo é marinha: barco, farol, enseada,
   regata. O site tinha de ter o mesmo ar — mas um site de galeria erra
   feio quando confunde "náutico" com "decoração de churrascaria à
   beira-mar". Nada de leme no cabeçalho, nada de corda em tudo.

   O náutico aqui é feito de quatro coisas, e nenhuma delas grita:

     · a COR: azul-marinho profundo (o casco), branco-casca-de-ovo (a
       vela e o papel de aquarela) e latão (o metal de bordo — luneta,
       sino, roldana). Três cores, e só;
     · a MEDIDA: linhas finas de latão separando as seções, como os
       filetes de uma carta náutica;
     · a ÁGUA: o único movimento contínuo do site é uma ondulação lenta,
       de maré, e não uma animação de site;
     · o BRANCO EM VOLTA: obra de aquarela precisa de margem. A folha
       toda respeita margens largas, como um paspatur.

   AS CORES FORAM MEDIDAS, NÃO ESCOLHIDAS DE OLHO
   ---------------------------------------------------------------------
   Cada par tinta/fundo abaixo foi conferido contra o mínimo da WCAG 2.1
   AA (4,5:1 para texto normal, 3:1 para texto grande) pela bateria
   `tcontraste.py`, que fotografa a tela e lê o pixel. Os valores estão
   escritos ao lado de cada token; quem mudar uma cor tem de rodar a
   bateria de novo, e ela reprova se a conta não fechar.

     tinta  #10202e sobre papel  #f7f4ee ........ 14,9:1
     suave  #46586a sobre papel  #f7f4ee .........  6,7:1
     latão  #775a22 sobre papel  #f7f4ee .........  5,9:1
     latão  #775a22 sobre papel-2 #efe9dd ........  5,3:1
     latão  #775a22 sobre papel-3 #e5dccb ........  4,7:1
     papel  #f7f4ee sobre mar    #0b2338 ........ 14,6:1
     latão claro #d9b978 sobre mar #0b2338 ....... 8,5:1
     coral  #a8452f sobre papel  #f7f4ee .........  5,7:1

   O LATÃO ERA #8a6a2c, E A LINHA ACIMA DIZIA "5,4:1"
   ---------------------------------------------------------------------
   Dizia, e estava errada: 4,58:1 sobre o papel claro, 4,16:1 sobre o
   papel-2 e 3,69:1 sobre o papel-3. O número tinha sido estimado de
   olho, contra o papel mais claro dos três, e nunca contra as outras
   duas superfícies em que essa mesma cor escreve — o preço de cada
   cartão, o olho de cada seção, o "limpar filtros" da barra de filtros.
   A bateria fotografou e leu o pixel: quarenta e seis trechos reprovados
   pela mesma cor. O latão escureceu para #775a22 e passa nas três.
   Quem mudar de novo roda `trt-contraste.py`; ela reprova se não fechar.

   AS TRÊS SUPERFÍCIES ESCURAS TÊM TINTA PRÓPRIA
   ---------------------------------------------------------------------
   Abaixo dos tokens há um bloco que REDEFINE `--tinta`, `--tinta-suave`,
   `--tinta-fraca` e `--latao` dentro de tudo o que é pintado de
   azul-marinho. Assim `.rt-card-p{color:var(--latao)}` continua sendo
   uma regra só, e acerta nos dois fundos — em vez de precisar de um
   `.rt-secao.mar .rt-card-p` para cada uma das vinte classes que
   escrevem com tinta. E logo depois há o bloco contrário: as ilhas
   claras que vivem DENTRO do escuro (a caixa quadriculada da imagem que
   falta, a lista de miniaturas, as pastilhas, os campos de formulário)
   devolvem os tokens ao valor de papel, senão escreveriam claro no claro.
   ===================================================================== */

/* =====================================================================
   1. OS TOKENS
   ===================================================================== */
:root{
  /* o mar */
  --mar:#0b2338;
  --mar-2:#12354f;
  --mar-3:#1b4a68;
  --mar-veu:rgba(11,35,56,.72);

  /* o papel */
  --papel:#f7f4ee;
  --papel-2:#efe9dd;
  --papel-3:#e5dccb;

  /* a tinta */
  --tinta:#10202e;
  --tinta-suave:#46586a;
  --tinta-fraca:#6b7a88;

  /* o latão de bordo */
  --latao:#775a22;          /* sobre papel */
  --latao-claro:#d9b978;    /* sobre mar */
  --latao-vivo:#c9a14e;

  /* o resto do mar */
  --verde:#245c56;
  --verde-claro:#7fae9c;
  --coral:#a8452f;
  --coral-claro:#e08a72;

  --linha:rgba(16,32,46,.14);
  --linha-mar:rgba(247,244,238,.18);

  --raio:4px;
  --raio-g:10px;
  --sombra:0 1px 2px rgba(11,35,56,.06), 0 8px 24px rgba(11,35,56,.08);
  --sombra-quadro:0 2px 4px rgba(11,35,56,.12), 0 18px 40px rgba(11,35,56,.22);

  --larg:1280px;
  --gutter:clamp(16px, 4vw, 48px);

  --serif:'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t:.22s cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   1b. A TINTA DE CADA CHÃO
   ---------------------------------------------------------------------
   Uma regra de cor que serve para os dois fundos é uma regra que erra
   num deles. `.rt-card-p{color:var(--latao)}` escrevia latão escuro no
   papel (certo) e latão escuro no azul-marinho (3,19:1, reprovado) —
   e o remendo de então foi `.rt-secao.mar .rt-card-p{...}`, uma linha
   nova para cada classe que escreve. São vinte classes; a vigésima
   primeira nasce errada e ninguém percebe.
   Aqui o CHÃO declara a tinta dele. Quem escreve pede `var(--tinta)` ou
   `var(--latao)` e acerta nos dois, porque quem responde é a superfície.
   ===================================================================== */
.rt-secao.mar, .rt-heroi, .rt-mar, .rt-escuro,
.rt-topo, .rt-pe, .rt-barra, .rt-gaveta-topo,
.ja-conta, .rt-enc-conta, .rt-sala-palco.escuro{
  --tinta:var(--papel);
  --tinta-suave:#c3d0dc;   /* 8,3:1 sobre o mar  */
  --tinta-fraca:#a6b6c4;   /* 6,2:1 sobre o mar  */
  --latao:var(--latao-claro);
  --linha:var(--linha-mar);
}

/* AS ILHAS CLARAS DENTRO DO ESCURO.
   ---------------------------------------------------------------------
   Uma seção azul-marinho pode ter, dentro dela, uma caixa de papel: a
   lista de miniaturas com rolagem própria, o quadriculado que ocupa o
   lugar de uma imagem que ainda não chegou, uma pastilha, um campo de
   formulário. Se elas herdassem a tinta do chão escuro, escreveriam
   claro sobre claro — o mesmo defeito, do outro lado. Então devolvem
   os tokens ao valor de papel. */
.rt-secao.mar .rt-falta, .rt-heroi .rt-falta, .rt-mar .rt-falta,
.rt-secao.mar .ja-escolha, .rt-secao.mar .rt-sala-escolha,
.rt-secao.mar .rt-pastilha, .rt-secao.mar .rt-caixa,
.rt-secao.mar input, .rt-secao.mar select, .rt-secao.mar textarea,
.rt-claro{
  --tinta:#10202e;
  --tinta-suave:#46586a;
  --tinta-fraca:#6b7a88;
  --latao:#775a22;
  --linha:rgba(16,32,46,.14);
}

/* =====================================================================
   2. O ALICERCE
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem, 5.2vw, 3.6rem); }
h2{ font-size:clamp(1.55rem, 3.4vw, 2.5rem); }
h3{ font-size:clamp(1.15rem, 2.2vw, 1.5rem); }
p{ margin:0 0 1em; }

.rt-wrap{ max-width:var(--larg); margin:0 auto; padding:0 var(--gutter); }
.rt-estreito{ max-width:820px; }

/* PULAR PARA O CONTEÚDO — o primeiro elemento focável de toda página.
   Quem navega por teclado não deve ter de passar por trinta links de
   menu para chegar ao que veio ler. */
.rt-pular{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--mar); color:var(--papel);
  padding:14px 20px; border-radius:0 0 var(--raio-g) 0; font-weight:700;
}
.rt-pular:focus{ left:0; }

:focus-visible{ outline:3px solid var(--latao-vivo); outline-offset:3px; border-radius:2px; }

/* =====================================================================
   3. O FILETE DE LATÃO — a linha que separa as seções
   ---------------------------------------------------------------------
   Numa carta náutica as divisões são finas e dupla-linha. É o que está
   aqui: 1px forte, 2px de folga, 1px fraco. Custa três pixels e dá ao
   site inteiro o ar de instrumento.
   ===================================================================== */
.rt-filete{
  height:4px; border:0; margin:0;
  background:
    linear-gradient(var(--latao),var(--latao)) top/100% 1px no-repeat,
    linear-gradient(rgba(138,106,44,.3),rgba(138,106,44,.3)) bottom/100% 1px no-repeat;
}
.rt-mar .rt-filete{
  background:
    linear-gradient(var(--latao-claro),var(--latao-claro)) top/100% 1px no-repeat,
    linear-gradient(rgba(217,185,120,.35),rgba(217,185,120,.35)) bottom/100% 1px no-repeat;
}

/* =====================================================================
   4. O CABEÇALHO
   ===================================================================== */
.rt-topo{
  position:sticky; top:0; z-index:500;
  background:var(--mar); color:var(--papel);
  border-bottom:1px solid rgba(217,185,120,.28);
}
.rt-topo-in{
  max-width:var(--larg); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:22px; min-height:74px;
}
.rt-marca{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--papel); flex:0 0 auto;
}
.rt-marca-sinal{ width:40px; height:40px; flex:0 0 auto; }
.rt-marca-txt{ display:flex; flex-direction:column; line-height:1.05; }
.rt-marca-n{ font-family:var(--serif); font-size:1.22rem; font-weight:600; letter-spacing:.01em; }
.rt-marca-s{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--latao-claro); font-weight:700;
}

.rt-nav{ display:flex; gap:2px; margin-left:auto; align-items:center; }
.rt-nav a{
  padding:10px 12px; text-decoration:none; font-size:.86rem; font-weight:600;
  border-radius:var(--raio); color:var(--papel); position:relative;
  /* SETE ABAS NUMA LINHA SÓ. Sem isto, "Jogos americanos" e "Sala de
     exposição" quebram em duas linhas e o cabeçalho cresce 20px no meio
     do menu — o que faz o topo "pular" quando a janela muda de tamanho. */
  white-space:nowrap;
}
.rt-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--latao-claro); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.rt-nav a:hover::after,.rt-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.rt-nav a[aria-current="page"]{ color:var(--latao-claro); }

.rt-topo-acoes{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }

.rt-bt-carrinho{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1.5px solid rgba(217,185,120,.5);
  color:var(--papel); padding:9px 15px; border-radius:999px;
  cursor:pointer; font-size:.86rem; font-weight:700; min-height:44px;
  transition:background var(--t), border-color var(--t);
}
.rt-bt-carrinho:hover{ background:rgba(217,185,120,.14); border-color:var(--latao-claro); }
.rt-bt-carrinho .n{
  min-width:21px; height:21px; padding:0 5px; border-radius:999px;
  background:var(--latao-vivo); color:var(--mar);
  font-size:.72rem; font-weight:800; display:grid; place-items:center;
}
.rt-bt-carrinho .n[hidden]{ display:none; }

/* NO CELULAR O BOTÃO DO CARRINHO PERDE A PALAVRA.
   Com "Carrinho" escrito, a marca + o botão + o hambúrguer somavam 442 px
   numa tela de 390 — e o hambúrguer saía pela direita. O ícone do
   carrinho é universal e o contador continua à vista; a palavra vira
   `aria-label`, e quem usa leitor de tela continua ouvindo "Carrinho". */
@media (max-width:560px){
  .rt-bt-carrinho span:not(.n){
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .rt-bt-carrinho{ padding:9px 12px; }
  .rt-marca-n{ font-size:1.06rem; }
  .rt-marca-sinal{ width:34px; height:34px; }
}

.rt-hamb{
  display:none; background:transparent; border:1.5px solid rgba(217,185,120,.5);
  color:var(--papel); width:44px; height:44px; border-radius:var(--raio); cursor:pointer;
}

@media (max-width:1040px){
  .rt-nav{
    position:fixed; inset:74px 0 auto 0; background:var(--mar-2);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 0 16px;
    border-bottom:1px solid rgba(217,185,120,.3);
    max-height:calc(100vh - 74px); overflow:auto;
    /* FECHADO QUER DIZER FORA DA TELA, E TAMBÉM FORA DO TECLADO.
       Só `opacity:0` deixa os sete links do menu ainda alcançáveis pelo
       Tab e ainda lidos pelo leitor de tela: quem navega por teclado
       atravessava um menu invisível antes de chegar ao conteúdo.
       `visibility:hidden` tira os três de uma vez — vista, foco e voz —
       e a transição atrasada mantém o desaparecimento suave. */
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--t), transform var(--t), visibility 0s linear .22s;
  }
  .rt-nav.on{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity var(--t), transform var(--t), visibility 0s;
  }
  .rt-nav a{ padding:15px var(--gutter); border-bottom:1px solid rgba(217,185,120,.12); }
  .rt-nav a::after{ display:none; }
  .rt-hamb{ display:grid; place-items:center; }
}

/* =====================================================================
   5. O QUADRO — o componente mais importante do site
   ---------------------------------------------------------------------
   A mesma marcação desenha o quadro na vitrine, na ficha da obra, no
   configurador de encomenda, na sala de exposição e no simulador de
   parede. Um quadro só, cinco lugares: se a moldura mudar, muda nos
   cinco de uma vez.

       .rt-quadro           a moldura (a madeira)
         .rt-quadro-vidro   o brilho do vidro, por cima de tudo
         .rt-quadro-pasp    o paspatur (a janela de cartão)
           .rt-quadro-obra  a aquarela

   As medidas vêm de variáveis CSS que o JavaScript escreve em cima:
   --pasp (cor), --mold (cor), --mold-w (espessura da madeira),
   --pasp-w (largura do paspatur). Assim o configurador muda uma
   variável e o desenho inteiro acompanha, sem remontar nada.
   ===================================================================== */
.rt-quadro{
  --mold:#8a6f4e; --mold-w:16px;
  --pasp:#f2ece0; --pasp-w:26px;
  position:relative; display:inline-block; max-width:100%;
  background:var(--mold);
  padding:var(--mold-w);
  border-radius:2px;
  box-shadow:var(--sombra-quadro);
  /* o veio da madeira: duas faixas de luz, nada de textura falsa */
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.22), rgba(255,255,255,0) 32%),
    linear-gradient(260deg, rgba(0,0,0,.20), rgba(0,0,0,0) 34%);
}
.rt-quadro.sem-moldura{ --mold-w:0px; background:transparent; box-shadow:none; }
.rt-quadro.sem-moldura .rt-quadro-pasp{ box-shadow:var(--sombra-quadro); }

.rt-quadro-pasp{
  position:relative; background:var(--pasp); padding:var(--pasp-w);
  /* o bisel do paspatur: a lasca de 45° que se vê na janela recortada */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}
.rt-quadro-pasp.sem-pasp{ --pasp-w:0px; background:transparent; box-shadow:none; }

.rt-quadro-obra{
  position:relative; display:block; width:100%; height:auto;
  background:var(--papel-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.16);
}

/* O VIDRO. Um reflexo diagonal muito fraco, e nada mais. Vidro de
   verdade não brilha como plástico — quem exagera aqui faz a aquarela
   parecer impressa. */
.rt-quadro-vidro{
  position:absolute; inset:var(--mold-w); pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 24%,
    rgba(255,255,255,0) 46%, rgba(255,255,255,0) 100%);
}
.rt-quadro[data-vidro="acrilico"] .rt-quadro-vidro{ opacity:.55; }
.rt-quadro[data-vidro="antirreflexo"] .rt-quadro-vidro{ opacity:.14; }
.rt-quadro[data-vidro="nenhum"] .rt-quadro-vidro{ display:none; }

/* =====================================================================
   6. O LUGAR DA OBRA QUE AINDA NÃO TEM ARQUIVO
   ---------------------------------------------------------------------
   REGRA DA CASA, E ELA NÃO SE DOBRA: nunca uma imagem genérica no lugar
   de uma obra específica. Nenhuma "aquarela de banco de imagens" vai
   fingir ser um Travesedo, e nenhum desenho gerado vai ocupar a parede
   de uma obra que existe de verdade.
   Onde o arquivo ainda não chegou, o espaço fica com a proporção certa
   da obra, na cor do papel, e DIZ o que falta e qual é o nome do arquivo.
   É feio de propósito: um vazio explicado faz alguém resolver; um vazio
   bonito não faz ninguém resolver nada.
   ===================================================================== */
.rt-falta{
  position:relative; width:100%; background:
    repeating-linear-gradient(135deg,
      var(--papel-2) 0 11px, var(--papel-3) 11px 22px);
  display:grid; place-items:center; text-align:center; padding:18px;
  box-shadow:inset 0 0 0 1px rgba(16,32,46,.14);
}
.rt-falta b{
  display:block; font-family:var(--serif); font-size:.95rem;
  color:var(--tinta); margin-bottom:4px;
}
.rt-falta code{
  font-size:.7rem; color:var(--tinta-suave); word-break:break-all;
  background:rgba(255,255,255,.7); padding:2px 6px; border-radius:3px;
}
.rt-falta small{ display:block; font-size:.7rem; color:var(--tinta-suave); margin-top:6px; }

/* =====================================================================
   7. A VITRINE
   ===================================================================== */
.rt-secao{ padding:clamp(48px, 7vw, 92px) 0; }
.rt-secao.mar{ background:var(--mar); color:var(--papel); }
.rt-secao.mar h2,.rt-secao.mar h3{ color:var(--papel); }
.rt-secao.papel2{ background:var(--papel-2); }

.rt-titulo-secao{ margin-bottom:8px; }
.rt-sub-secao{
  color:var(--tinta-suave); font-size:1.02rem; max-width:62ch; margin:0 0 34px;
}
.rt-secao.mar .rt-sub-secao{ color:#c9d4dd; }

.rt-olho{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--latao); margin-bottom:10px;
}
.rt-secao.mar .rt-olho{ color:var(--latao-claro); }

/* A GRADE E O CARTÃO SÃO OS DOS JOGOS AMERICANOS (pedido de 19/09/2026):
   quatro colunas no computador, foto em cartão de canto arredondado,
   nome à esquerda e preço à direita, botão de carrinho embaixo. */
.rt-grade{
  display:grid; gap:clamp(18px, 2.2vw, 28px);
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  align-items:start;
}
.rt-grade.densa{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }

.rt-card{ display:flex; flex-direction:column; gap:10px; color:inherit; position:relative; }
.rt-card-foto{
  display:block; background:var(--papel-2); border-radius:6px; overflow:hidden;
  box-shadow:0 2px 4px rgba(11,35,56,.12), 0 12px 28px rgba(11,35,56,.14);
  transition:transform var(--t), box-shadow var(--t);
}
.rt-card-foto img{ display:block; width:100%; height:auto; }
.rt-card-foto:hover,.rt-card-foto:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 4px 8px rgba(11,35,56,.14), 0 18px 36px rgba(11,35,56,.18);
}
.rt-card-linha{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rt-card-t{
  font-family:var(--serif); font-size:1rem; font-weight:600; line-height:1.3;
  color:var(--tinta); text-decoration:none;
}
.rt-card-t:hover{ text-decoration:underline; text-underline-offset:3px; }
.rt-card-p{ font-size:.92rem; font-weight:800; color:var(--latao); white-space:nowrap; }
.rt-card-v{ font-size:.8rem; font-weight:700; color:var(--tinta-suave); white-space:nowrap; }
.rt-card-bt{ align-self:stretch; }
.rt-secao.mar .rt-card-t{ color:var(--papel); }
.rt-secao.mar .rt-card-p{ color:var(--latao-claro); }
.rt-secao.mar .rt-card-v{ color:#b9c6d2; }
@media (max-width:560px){
  .rt-grade,.rt-grade.densa{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 12px; }
  .rt-card-linha{ flex-direction:column; align-items:flex-start; gap:2px; }
  .rt-card-t{ font-size:.92rem; }
  .rt-card-bt{ min-height:42px; padding:9px 10px; font-size:.84rem; }
}

.rt-selo{
  position:absolute; top:10px; right:10px; z-index:3;
  font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; background:var(--mar); color:var(--papel);
}
.rt-selo.vendido{ background:var(--tinta-suave); }
.rt-selo.novo{ background:var(--latao); color:#fff; }

/* =====================================================================
   8. BOTÕES
   ===================================================================== */
.rt-bt{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 26px; border-radius:999px;
  font-size:.95rem; font-weight:700; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:transform var(--t), background var(--t), box-shadow var(--t);
  background:var(--mar); color:var(--papel);
}
.rt-bt:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,35,56,.22); }
.rt-bt:active{ transform:none; }
.rt-bt[disabled],.rt-bt[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.rt-bt.ouro{ background:var(--latao-vivo); color:#23180a; }
.rt-bt.linha{ background:transparent; border-color:var(--mar); color:var(--mar); }
.rt-bt.linha:hover{ background:rgba(11,35,56,.06); }
/* O BOTÃO DE CONTORNO SOBRE FUNDO ESCURO.
   A primeira versão listava só `.rt-mar` e `.rt-secao.mar` — e o herói
   da abertura não tem nenhuma das duas classes. Resultado: o
   "Encomendar a minha", o segundo botão da primeira tela do site,
   ficava azul-marinho sobre azul-marinho. Invisível. Um botão que
   ninguém vê é uma venda que ninguém faz.
   A lista agora inclui todo fundo escuro da casa, e a bateria
   `tcontraste.py` mede a primeira tela justamente por causa disto. */
.rt-mar .rt-bt.linha,.rt-secao.mar .rt-bt.linha,
.rt-heroi .rt-bt.linha,.rt-par .rt-bt.linha{
  border-color:var(--latao-claro); color:var(--latao-claro); background:transparent;
}
.rt-mar .rt-bt.linha:hover,.rt-secao.mar .rt-bt.linha:hover,
.rt-heroi .rt-bt.linha:hover,.rt-par .rt-bt.linha:hover{ background:rgba(217,185,120,.14); }
.rt-bt.peq{ min-height:40px; padding:9px 17px; font-size:.85rem; }
.rt-bt.larga{ width:100%; }
.rt-bt svg{ width:19px; height:19px; flex:0 0 auto; }

/* =====================================================================
   9. FORMULÁRIOS
   ===================================================================== */
.rt-campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.rt-campo label{ font-size:.82rem; font-weight:700; color:var(--tinta); }
.rt-campo .dica{ font-size:.76rem; color:var(--tinta-suave); font-weight:400; }
.rt-campo input,.rt-campo select,.rt-campo textarea{
  padding:12px 14px; border:1.5px solid var(--linha); border-radius:var(--raio);
  background:#fff; min-height:46px; width:100%;
}
.rt-campo input:focus,.rt-campo select:focus,.rt-campo textarea:focus{
  border-color:var(--mar-3); outline:3px solid rgba(27,74,104,.22); outline-offset:0;
}
.rt-campo textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.rt-linha2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.rt-linha3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; }
@media (max-width:640px){ .rt-linha2,.rt-linha3{ grid-template-columns:1fr; } }

.rt-erro{ color:var(--coral); font-size:.8rem; font-weight:600; }

/* as pastilhas de escolha (moldura, paspatur, vidro, tamanho) */
.rt-pastilhas{ display:flex; flex-wrap:wrap; gap:9px; }
.rt-pastilha{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 15px; border:1.5px solid var(--linha); border-radius:999px;
  background:#fff; font-size:.86rem; font-weight:600; min-height:44px;
  transition:border-color var(--t), background var(--t);
}
.rt-pastilha:hover{ border-color:var(--mar-3); }
/* O RÁDIO SOME DA VISTA MAS NÃO DO TECLADO NEM DO LEITOR DE TELA.
   `width:0;height:0` esconde de verdade — e esconde DEMAIS: um elemento
   sem área não é rolado para a tela quando recebe foco, e em alguns
   navegadores deixa de ser anunciado. Quem navega por teclado perderia
   a escolha de moldura inteira. Este é o recorte canônico de
   "visualmente escondido": o elemento continua com 1px, continua na
   ordem de foco e continua no leitor de tela. */
.rt-pastilha input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.rt-pastilha:has(input:checked){ border-color:var(--mar); background:var(--mar); color:var(--papel); }
.rt-pastilha:has(input:focus-visible){ outline:3px solid var(--latao-vivo); outline-offset:2px; }
.rt-pastilha .amostra{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
/* NAVEGADOR SEM `:has()` — a escolha continua visível.
   O `:has()` é recente; num aparelho de dois anos atrás ele não existe,
   e sem esta reserva a pastilha escolhida ficava idêntica às outras:
   o cliente montava a moldura inteira sem saber o que tinha marcado. */
.rt-pastilha.marcada{ border-color:var(--mar); background:var(--mar); color:var(--papel); }

/* =====================================================================
   10. A GAVETA DO CARRINHO
   ===================================================================== */
.rt-veu{
  position:fixed; inset:0; background:var(--mar-veu); z-index:900;
  opacity:0; pointer-events:none; transition:opacity var(--t);
}
.rt-veu.on{ opacity:1; pointer-events:auto; }

.rt-gaveta{
  position:fixed; top:0; right:0; bottom:0; width:min(430px, 100vw);
  background:var(--papel); z-index:910; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t);
  box-shadow:-10px 0 40px rgba(11,35,56,.3);
}
/* `display:flex` GANHA DO `hidden`, E ISSO CUSTOU 52 PIXELS.
   O navegador aplica `[hidden]{display:none}` com a força mais fraca que
   existe; qualquer `display` escrito numa folha de estilo passa por cima.
   A gaveta fechada continuava ocupando 390 px à direita da tela — fora da
   vista, mas dentro da largura do documento. Resultado: o celular ganhava
   uma rolagem lateral de 52 px em TODA página, do tipo que o visitante
   sente e não sabe explicar.
   Esta linha é a correção, e ela vale para qualquer elemento da casa que
   tenha `display` próprio e possa ficar `hidden`. */
.rt-gaveta[hidden]{ display:none !important; }
.rt-gaveta.on{ transform:none; }
.rt-gaveta-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; background:var(--mar); color:var(--papel);
}
.rt-gaveta-topo h3{ margin:0; font-size:1.15rem; color:var(--papel); }
.rt-x{
  background:transparent; border:0; color:inherit; cursor:pointer;
  width:44px; height:44px; border-radius:50%; font-size:1.5rem; line-height:1;
  display:grid; place-items:center;
}
.rt-x:hover{ background:rgba(255,255,255,.12); }
.rt-gaveta-corpo{ flex:1 1 auto; overflow:auto; padding:18px 20px; }
.rt-gaveta-pe{ border-top:1px solid var(--linha); padding:18px 20px; background:var(--papel-2); }

.rt-item{ display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--linha); }
.rt-item-fig{ width:74px; flex:0 0 auto; }
.rt-item-in{ flex:1 1 auto; min-width:0; }
.rt-item-t{ font-family:var(--serif); font-size:.96rem; font-weight:600; line-height:1.3; }
.rt-item-d{ font-size:.76rem; color:var(--tinta-suave); margin-top:2px; }
.rt-item-p{ font-weight:700; margin-top:5px; }
.rt-item-tirar{
  background:transparent; border:0; color:var(--coral); cursor:pointer;
  font-size:.76rem; font-weight:700; padding:6px 0; text-decoration:underline;
}
.rt-conta{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:.92rem; }
.rt-conta.total{ font-size:1.14rem; font-weight:800; border-top:1px solid var(--linha); margin-top:8px; padding-top:12px; }

.rt-vazio{ text-align:center; padding:44px 10px; color:var(--tinta-suave); }

/* =====================================================================
   11. O RODAPÉ
   ===================================================================== */
.rt-pe{ background:var(--mar); color:var(--papel); padding:60px 0 28px; }
.rt-pe a{ color:var(--papel); }
.rt-pe-grade{
  display:grid; gap:36px;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
}
@media (max-width:900px){ .rt-pe-grade{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .rt-pe-grade{ grid-template-columns:1fr; } }
.rt-pe h4{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--latao-claro); margin:0 0 14px; font-weight:800;
}
.rt-pe ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.rt-pe ul a{ text-decoration:none; font-size:.9rem; opacity:.9; }
.rt-pe ul a:hover{ opacity:1; text-decoration:underline; }

.rt-redes{ display:flex; flex-wrap:wrap; gap:10px; }
.rt-rede{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1.5px solid rgba(217,185,120,.4); border-radius:999px;
  padding:9px 15px; font-size:.84rem; font-weight:700; min-height:44px;
  transition:background var(--t), border-color var(--t);
}
.rt-rede:hover{ background:rgba(217,185,120,.15); border-color:var(--latao-claro); }
.rt-rede svg{ width:19px; height:19px; flex:0 0 auto; }
/* O VERDE DO WHATSAPP ESCURECEU. O verde da marca (#1f8a4c) com letra
   branca por cima dá 4,38:1 — passa de raspão por baixo do mínimo de
   4,5:1, e a bateria mediu isso em dezoito lugares (o pé de todas as
   páginas). #19733f mantém o verde e dá 5,89:1. */
.rt-rede.zap{ background:#19733f; border-color:#19733f; color:#fff; }
.rt-rede.zap:hover{ background:#125a30; border-color:#125a30; }

.rt-pe-fim{
  margin-top:40px; padding-top:20px; border-top:1px solid rgba(217,185,120,.22);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.79rem; color:#b9c6d2;
}

/* =====================================================================
   12. A BARRA DO CELULAR
   ===================================================================== */
.rt-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:700; display:none;
  background:var(--mar); border-top:1px solid rgba(217,185,120,.3);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.rt-barra ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); }
.rt-barra a,.rt-barra button{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:transparent; border:0; color:var(--papel); text-decoration:none;
  font-size:.62rem; font-weight:700; padding:7px 2px; min-height:52px; cursor:pointer;
  width:100%;
}
.rt-barra svg{ width:21px; height:21px; }
.rt-barra .ativo{ color:var(--latao-claro); }
@media (max-width:820px){
  .rt-barra{ display:block; }
  body{ padding-bottom:64px; }
}

/* =====================================================================
   13. O QUE SOME NA IMPRESSÃO
   ===================================================================== */
@media print{
  .rt-topo,.rt-barra,.rt-pe,.rt-gaveta,.rt-veu,.rt-pular,
  .rt-bt,.rt-acess-bt{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .rt-quadro{ box-shadow:none; }
}

/* =====================================================================
   14. QUEM PEDIU MENOS MOVIMENTO
   ---------------------------------------------------------------------
   Não é preferência de gosto: enxaqueca vestibular e transtorno
   vestibular pioram com movimento na tela. Quando o sistema operacional
   pede para reduzir, o site OBEDECE — e a onda da maré, que é o único
   movimento contínuo da casa, é a primeira a parar.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
html.rt-sem-anim *,html.rt-sem-anim *::before,html.rt-sem-anim *::after{
  animation:none !important; transition:none !important;
}

/* =====================================================================
   15. ALTO CONTRASTE
   ===================================================================== */
html.rt-contraste{
  --papel:#fff; --papel-2:#fff; --papel-3:#f0f0f0;
  --tinta:#000; --tinta-suave:#1a1a1a; --tinta-fraca:#333;
  --mar:#000; --mar-2:#000; --mar-3:#000;
  --latao:#5a4300; --latao-claro:#ffd97a; --latao-vivo:#ffd97a;
  --linha:rgba(0,0,0,.55);
}
html.rt-contraste .rt-card-d,html.rt-contraste .rt-sub-secao{ color:#1a1a1a; }
html.rt-contraste .rt-quadro{ box-shadow:0 0 0 2px #000; }

.rt-contatos-flutuantes{position:fixed;right:18px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:8px}.rt-contatos-flutuantes a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #c7b28b;border-radius:24px;background:#173e4b;color:#fff;text-decoration:none;box-shadow:0 4px 18px #0002;font-size:.85rem}.rt-contatos-flutuantes a:focus-visible{outline:3px solid #c7b28b;outline-offset:3px}@media(max-width:760px){.rt-contatos-flutuantes{bottom:calc(82px + env(safe-area-inset-bottom));right:12px}.rt-contatos-flutuantes a{padding:8px 13px}}@media print{.rt-contatos-flutuantes{display:none}}