/* =====================================================================
   A FOLHA DA ACESSIBILIDADE  (rt-acessibilidade.css)
   ---------------------------------------------------------------------
   O botão fica embaixo à esquerda, e não à direita: à direita mora a
   gaveta do carrinho, e dois painéis disputando o mesmo canto acabam um
   por cima do outro no celular.
   ===================================================================== */
.rt-acess{ position:fixed; left:14px; bottom:14px; z-index:1100; }
@media (max-width:820px){ .rt-acess{ bottom:74px; } }
/* no celular: dentro da barra do topo, do tamanho dos outros botões dela */
.rt-acess.no-topo{ position:static; }
.rt-acess.no-topo .rt-acess-bt{
  width:44px; height:44px; box-shadow:none; border-width:1.5px;
  border-color:rgba(217,185,120,.5); background:transparent;
}
.rt-acess.no-topo .rt-acess-bt svg{ width:22px; height:22px; }
.rt-acess.no-topo .rt-acess-painel{
  position:fixed; top:80px; bottom:auto; left:12px; right:12px; width:auto;
  max-height:calc(100vh - 170px); z-index:1300;
}

.rt-acess-bt{
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:var(--mar); color:var(--latao-claro);
  border:2px solid var(--latao-claro);
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(11,35,56,.35);
  transition:transform var(--t);
}
.rt-acess-bt:hover{ transform:scale(1.06); }

.rt-acess-painel{
  position:absolute; left:0; bottom:62px; width:min(330px, calc(100vw - 28px));
  background:var(--papel); color:var(--tinta);
  border:1.5px solid var(--linha); border-radius:var(--raio-g);
  box-shadow:0 18px 50px rgba(11,35,56,.28);
  padding:14px; max-height:min(74vh, 620px); overflow:auto;
}
.rt-acess-topo{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--linha);
}
.rt-acess-topo b{ font-family:var(--serif); font-size:1.08rem; }
.rt-acess-topo .rt-x{ width:36px; height:36px; color:var(--tinta); }

.rt-acess-g{ margin-bottom:14px; }
.rt-acess-lab{
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave); margin-bottom:8px;
}
.rt-acess-bts{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rt-acess-b{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:9px 13px; min-height:42px; border-radius:var(--raio);
  border:1.5px solid var(--linha); background:#fff;
  font-size:.83rem; font-weight:700;
  transition:border-color var(--t), background var(--t);
}
.rt-acess-b:hover{ border-color:var(--mar-3); }
.rt-acess-b.on{ background:var(--mar); color:var(--papel); border-color:var(--mar); }
.rt-acess-b.larga{ flex:1 1 100%; justify-content:center; }
.rt-acess-val{ font-size:.82rem; font-weight:800; color:var(--latao); margin-left:auto; }

.rt-acess-nota{
  font-size:.76rem; line-height:1.5; color:var(--tinta-suave);
  background:var(--papel-2); padding:9px 11px; border-radius:var(--raio);
  margin:0 0 9px;
}
.rt-acess-aviso{
  font-size:.8rem; color:var(--coral); font-weight:600; margin:0;
}

/* =====================================================================
   O ESTÚDIO DE IMAGENS
   ===================================================================== */
.rt-est{
  position:fixed; inset:0; z-index:1250; background:rgba(11,35,56,.86);
  display:grid; place-items:center; padding:16px;
}
.rt-est-cx{
  background:var(--papel); border-radius:var(--raio-g);
  width:min(720px, 100%); max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.rt-est-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; background:var(--mar); color:var(--papel);
  border-radius:var(--raio-g) var(--raio-g) 0 0;
}
.rt-est-topo b{ font-family:var(--serif); font-size:1.12rem; display:block; }
.rt-est-topo span{ font-size:.79rem; color:#c9d4dd; }
.rt-est-corpo{ padding:18px; overflow:auto; }

.rt-est-alvo{
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  border:2.5px dashed var(--linha); border-radius:var(--raio-g);
  padding:34px 20px; cursor:pointer; color:var(--tinta-suave);
  transition:border-color var(--t), background var(--t);
}
.rt-est-alvo:hover,.rt-est-alvo.sobre{ border-color:var(--latao); background:var(--papel-2); }
.rt-est-alvo b{ font-family:var(--serif); font-size:1.14rem; color:var(--tinta); }
.rt-est-alvo small{ font-size:.75rem; margin-top:6px; }

.rt-est-placar{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 10px; }
.rt-est-placar span{
  font-size:.78rem; font-weight:800; padding:6px 12px; border-radius:999px;
}
.rt-est-placar .ok{ background:#1f6b45; color:#fff; }
.rt-est-placar .dv{ background:var(--latao); color:#fff; }
.rt-est-placar .fa{ background:var(--papel-3); color:var(--tinta); }

.rt-est-corpo h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--latao); margin:18px 0 8px; }
.rt-est-lista{ list-style:none; margin:0; padding:0; display:grid; gap:5px;
  max-height:240px; overflow:auto; font-size:.83rem; }
.rt-est-lista li{ padding:6px 8px; background:var(--papel-2); border-radius:var(--raio); }
.rt-est-lista code{ font-size:.75rem; color:var(--tinta-suave); }
.rt-est-lista i{ font-size:.72rem; color:var(--tinta-fraca); }
.rt-est-lista select{ padding:6px 8px; border-radius:var(--raio);
  border:1.5px solid var(--linha); max-width:100%; min-height:38px; }
.rt-est-nota{ font-size:.79rem; color:var(--tinta-suave); line-height:1.55; margin:10px 0 0; }
.rt-est-erro{ color:var(--coral); font-weight:600; }
.rt-est-acoes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* celular estreito: com o botão da acessibilidade no topo, a barra tem
   quatro peças (marca, acessibilidade, carrinho, menu) e precisa caber
   inteira em 360 px */
@media (max-width:420px){
  .rt-topo-acoes{ gap:6px; }
  .rt-acess.no-topo .rt-acess-bt, .rt-hamb{ width:40px; height:40px; }
  .rt-bt-carrinho{ padding:8px 10px; min-height:40px; }
  .rt-marca-n{ font-size:.96rem; }
  .rt-marca-s{ font-size:.54rem; letter-spacing:.12em; }
  .rt-marca-sinal{ width:30px; height:30px; }
}