/* SH Video — Show Glass
   Thumbs em <img> real (nunca background-image: o NitroPack faz lazy de bg e não restaura).

   ⚠️ BLINDAGEM CONTRA O TEMA (lição de 02/08): o tema/Elementor sobrescrevia o plugin —
   títulos viravam Montserrat 28px MAIÚSCULO e as <img> eram esmagadas por um `width:auto`
   global. Por isso as regras de tipografia e de imagem são dobradas em especificidade
   (.shv-group X, .shv-auto X) e usam !important CIRÚRGICO — só nas propriedades que o tema
   ataca (font, transform, dimensão da imagem, display do botão). NÃO espalhar !important. */

:root{
  --shv-accent:#C6A053; --shv-accent-dark:#9C7A2E; --shv-ink:#0A1521;
  --shv-radius:20px; --shv-cards:2; --shv-grid:3;
}

/* ---------- capa clicável ---------- */
.shv-poster{
  position:relative; display:block; width:100%; padding:0; margin:0; border:0;
  background:var(--shv-ink); border-radius:calc(var(--shv-radius) - 6px);
  overflow:hidden; cursor:pointer; line-height:0; appearance:none;
}
.shv-group .shv-poster,.shv-auto .shv-poster,.shv-thumbwrap .shv-poster,.shv-inline .shv-poster,.shv-band .shv-poster{
  display:block!important; width:100%!important; padding:0!important; border:0!important;
  box-shadow:none!important; line-height:0!important; min-height:0!important;
  text-transform:none!important; background:var(--shv-ink)!important;
}
.shv-poster:focus-visible{outline:3px solid var(--shv-accent); outline-offset:3px}
.shv-th{width:100%; height:100%; object-fit:cover; display:block}
.shv-group .shv-th,.shv-auto .shv-th,.shv-thumbwrap .shv-th,.shv-inline .shv-th,.shv-band .shv-th{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important;
  max-width:none!important; object-fit:cover!important; display:block!important;
  margin:0!important; border-radius:0!important;
}
.shv-th--empty{display:block; width:100%; aspect-ratio:9/16; background:var(--shv-ink)}

/* proporções */
.shv-r-9-16 .shv-poster{aspect-ratio:9/16}
.shv-r-16-9 .shv-poster{aspect-ratio:16/9}
.shv-r-1-1  .shv-poster{aspect-ratio:1/1}

/* ---------- botão de play ---------- */
.shv-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease;
}
.shv-play svg{width:22px; height:22px; margin-left:2px}
.shv-poster:hover .shv-play{transform:scale(1.08)}

/* estilo padrão aprovado: círculo escuro + borda dourada */
.shv-play--sg::before{
  content:""; position:absolute; width:52px; height:52px; border-radius:50%;
  background:rgba(10,21,33,.72); border:1.5px solid var(--shv-accent);
}
.shv-play--sg svg{position:relative; fill:#E2C585}
.shv-poster:hover .shv-play--sg::before{background:var(--shv-accent-dark)}
.shv-poster:hover .shv-play--sg svg{fill:#fff}

.shv-play--solid::before{
  content:""; position:absolute; width:56px; height:56px; border-radius:50%;
  background:var(--shv-accent);
}
.shv-play--solid svg{position:relative; fill:#fff}

.shv-play--minimal::before{
  content:""; position:absolute; width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.92);
}
.shv-play--minimal svg{position:relative; fill:var(--shv-ink)}

.shv-play--yt::before{
  content:""; position:absolute; width:62px; height:44px; border-radius:12px;
  background:rgba(0,0,0,.75);
}
.shv-play--yt svg{position:relative; fill:#fff; width:26px; height:26px}

/* ============================================================
   LAYOUT SHOWCASE — a faixa escura de vídeos de TODAS as páginas.
   (o layout `card`, mais abaixo, é exclusivo de /projetos-assinados/)
   Reproduz o desenho .sgsh já aprovado no site, com duas diferenças:
     · <img> no lugar de background-image (o NitroPack esvaziava os cards em produção)
     · o card inteiro é um <button>, então teclado e leitor de tela funcionam
   ============================================================ */
/* Sem truque de full-bleed: as seções escuras que o site já usa também ficam dentro do
   container do Elementor (medido: x=40, w=1501 numa viewport de 1581). Esticar com 100vw
   dava overflow horizontal e desalinhamento, porque o container do Elementor é flex. */
.shv-band{width:100%; background:#0A1521; overflow:hidden}
.shv-band-in{max-width:1180px; margin:0 auto; padding:62px 22px 66px}
/* variante "nua": entra dentro de uma seção escura que a página já tem (só o trilho) */
.shv-band--bare{width:auto; margin-left:0; background:none}
.shv-band--bare .shv-band-in{max-width:none; padding:0}
.shv-band .shv-band-e{
  display:block!important; font-family:Inter,system-ui,sans-serif!important;
  font-size:11px!important; font-weight:500!important; letter-spacing:.22em!important;
  text-transform:uppercase!important; color:var(--shv-accent)!important; margin:0 0 14px!important;
}
.shv-band .shv-band-t{
  font-family:'Cormorant Garamond',Georgia,serif!important; font-size:40px!important;
  font-weight:400!important; line-height:1.12!important; letter-spacing:normal!important;
  text-transform:none!important; color:#F6F5F2!important; margin:0 0 12px!important;
}
.shv-band .shv-band-t em{font-style:italic!important; color:#E2C585!important; font-weight:400!important}
.shv-band .shv-band-s{
  font-family:Inter,system-ui,sans-serif!important; font-size:14.5px!important;
  font-weight:300!important; line-height:1.7!important; color:#9AA3AE!important;
  text-transform:none!important; margin:0 0 30px!important; max-width:620px!important;
}

/* TRILHO HORIZONTAL, não grade.
   ⚠️ Lição de 02/08: primeiro fiz como grade de 3 colunas e ficou errado em dois pontos —
   o card inchou de ~216px para 322px, e qualquer página com 4+ vídeos quebrava linha
   (4 vídeos = 3 + 1 sobrando). O desenho original do site é um trilho que rola na horizontal
   com ~5 cards visíveis, que nunca quebra e serve para qualquer quantidade de vídeo. */
.shv-sc-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:4px 2px 10px;
}
.shv-sc-track::-webkit-scrollbar{height:4px}
.shv-sc-track::-webkit-scrollbar-thumb{background:rgba(198,160,83,.4); border-radius:4px}
.shv-sc{
  flex:0 0 calc((100% - (var(--shv-cols,5) - 1) * 14px) / var(--shv-cols,5));
  scroll-snap-align:start;
}
.shv-sc{margin:0; padding:0; border:0; background:none}

.shv-band .shv-poster--sc{
  aspect-ratio:9/16; border-radius:12px!important;
  border:.5px solid rgba(255,255,255,.1)!important; background:#11181F!important;
  box-shadow:0 14px 32px rgba(0,0,0,.5)!important; overflow:hidden!important;
}
.shv-band .shv-poster--sc .shv-th{
  transition:transform .55s cubic-bezier(.22,.61,.36,1); will-change:transform;
}
.shv-band .shv-poster--sc:hover .shv-th{transform:scale(1.06)}
.shv-sc-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,17,.05),rgba(8,12,17,.78));
  transition:opacity .45s ease;
}
.shv-band .shv-poster--sc:hover .shv-sc-veil{opacity:.38}

/* botão vazado branco — o desenho das páginas atuais */
.shv-play--ghost::before{
  content:""; position:absolute; width:48px; height:48px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.78); background:rgba(11,15,20,.22);
}
.shv-play--ghost svg{position:relative; fill:#fff}
.shv-band .shv-play{z-index:2}

.shv-sc-m{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:15px 13px;
  display:flex; flex-direction:column; gap:3px; text-align:left;
}
/* clamp: mesmo com o rótulo curto, título longo não pode vazar do card */
.shv-band .shv-sc-m b{
  font-family:Inter,system-ui,sans-serif!important; font-size:10.5px!important;
  font-weight:500!important; letter-spacing:.15em!important; text-transform:uppercase!important;
  color:#E2C585!important; line-height:1.3!important; margin:0!important;
  display:-webkit-box!important; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden!important; word-break:break-word;
}
.shv-band .shv-sc-m i{
  font-family:'Cormorant Garamond',Georgia,serif!important; font-style:italic!important;
  font-size:18px!important; font-weight:400!important; line-height:1.15!important;
  color:#F6F5F2!important; text-transform:none!important; letter-spacing:normal!important;
  display:-webkit-box!important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden!important; word-break:break-word;
}

@media(max-width:900px){
  .shv-band-in{padding:46px 18px 50px}
  .shv-band .shv-band-t{font-size:31px!important}
  .shv-sc-track{gap:12px; margin-right:-18px; padding-right:18px}
  .shv-sc{flex:0 0 46%}
}
@media(max-width:560px){
  .shv-sc{flex:0 0 68%}
  .shv-band .shv-band-t{font-size:27px!important}
  .shv-band .shv-sc-m i{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){
  .shv-band .shv-poster--sc .shv-th,.shv-sc-veil{transition:none}
  .shv-band .shv-poster--sc:hover .shv-th{transform:none}
}

/* ---------- card ---------- */
.shv-card{
  display:flex; gap:18px; align-items:flex-start; background:#fff;
  border:1px solid rgba(11,15,20,.1); border-radius:var(--shv-radius); padding:18px;
  font-family:Inter,system-ui,sans-serif;
}
.shv-card-media{flex:0 0 150px}
.shv-card-body{flex:1; min-width:0}
.shv-badge{
  display:inline-block; font:500 10px/1 Inter,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--shv-accent-dark);
  border:1px solid var(--shv-accent); border-radius:999px; padding:5px 10px; margin-bottom:8px;
}
.shv-title{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:20px;
  line-height:1.15; color:var(--shv-ink); margin:0 0 7px;
}
.shv-desc{font-weight:300; font-size:12.5px; line-height:1.75; color:#6E747C; margin:0}
.shv-yt{
  display:inline-block; font:400 11px/1 Inter,sans-serif; color:var(--shv-accent-dark);
  margin-top:9px; text-decoration:none;
}
.shv-yt:hover{text-decoration:underline}

/* blindagem tipográfica: o tema tentava impor Montserrat/uppercase/28px */
.shv-group .shv-title,.shv-auto .shv-title,.shv-card .shv-title{
  font-family:'Cormorant Garamond',Georgia,serif!important; font-size:20px!important;
  font-weight:500!important; line-height:1.15!important; text-transform:none!important;
  letter-spacing:normal!important; color:var(--shv-ink)!important; margin:0 0 7px!important;
}
.shv-group .shv-group-title,.shv-auto .shv-group-title{
  font-family:'Cormorant Garamond',Georgia,serif!important; font-size:28px!important;
  font-weight:500!important; text-transform:none!important; letter-spacing:normal!important;
  line-height:1.2!important; margin:0 0 18px!important;
}
.shv-group .shv-desc,.shv-auto .shv-desc{
  font-family:Inter,system-ui,sans-serif!important; font-size:12.5px!important;
  font-weight:300!important; line-height:1.75!important; color:#6E747C!important;
  text-transform:none!important; margin:0!important;
}
.shv-group .shv-badge,.shv-auto .shv-badge{
  font-family:Inter,system-ui,sans-serif!important; font-size:10px!important;
  line-height:1!important; letter-spacing:.16em!important;
}
.shv-group .shv-yt,.shv-auto .shv-yt{
  font-family:Inter,system-ui,sans-serif!important; font-size:11px!important;
  text-transform:none!important;
}
.shv-group .shv-card-media,.shv-auto .shv-card-media{flex:0 0 150px!important; max-width:150px!important}

/* ---------- grupos ---------- */
.shv-group{position:relative; max-width:1080px; margin:0 auto}
.shv-group-title{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:28px;
  color:var(--shv-ink); margin:0 0 18px;
}
.shv-group--grid .shv-group-items{
  display:grid; grid-template-columns:repeat(var(--shv-cols,var(--shv-grid)),1fr); gap:18px;
}
.shv-group--cards .shv-group-items{
  display:grid; grid-template-columns:repeat(var(--shv-cols,var(--shv-cards)),1fr); gap:22px;
}
.shv-group--carousel .shv-group-items{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding-bottom:6px;
}
.shv-group--carousel .shv-group-items::-webkit-scrollbar{height:6px}
.shv-group--carousel .shv-group-items::-webkit-scrollbar-thumb{background:rgba(11,15,20,.18); border-radius:3px}
.shv-group--carousel .shv-thumbwrap{flex:0 0 200px; scroll-snap-align:start}
.shv-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border-radius:50%; border:1px solid rgba(11,15,20,.12); background:#fff; cursor:pointer;
  font-size:22px; line-height:1; color:var(--shv-ink); display:none;
}
.shv-nav--prev{left:-14px} .shv-nav--next{right:-14px}
.shv-group--carousel:hover .shv-nav{display:block}
.shv-nav:hover{background:var(--shv-accent); color:#fff; border-color:var(--shv-accent)}

/* ---------- lightbox ---------- */
.shv-modal{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,15,.88); padding:24px; opacity:0; transition:opacity .2s ease;
}
.shv-modal.is-open{opacity:1}
.shv-modal-box{
  position:relative; width:min(92vw,420px); max-height:92vh; aspect-ratio:9/16;
  background:#000; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.shv-modal-box.is-wide{width:min(94vw,980px); aspect-ratio:16/9}
.shv-modal-box iframe,.shv-modal-box video{width:100%; height:100%; border:0; display:block}
/* ⚠️ O botão ficava FORA da caixa (top:-46px). Medido em 02/08: com a caixa alta (725px numa
   viewport de 789) ele caía em y=-14, invisível e inclicável — só dava para fechar no ESC ou
   clicando fora. Agora fica DENTRO da caixa, no canto, onde sempre aparece. */
.shv-close{
  position:absolute; top:10px; right:10px; width:38px!important; height:38px!important;
  border-radius:50%; background:rgba(10,15,22,.62); border:1px solid rgba(255,255,255,.38);
  color:#fff; font-size:19px!important; line-height:1!important; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center; padding:0!important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.shv-close:hover{background:var(--shv-accent); border-color:var(--shv-accent)}
.shv-close:focus-visible{outline:3px solid var(--shv-accent); outline-offset:2px}
body.shv-lock{overflow:hidden}

/* ---------- responsivo ---------- */
@media(max-width:900px){
  .shv-group--grid .shv-group-items{grid-template-columns:repeat(2,1fr)}
  .shv-group--cards .shv-group-items{grid-template-columns:1fr}
}
@media(max-width:560px){
  .shv-card{flex-direction:column; padding:14px}
  .shv-card-media{flex:none; width:100%}
  .shv-group--grid .shv-group-items{grid-template-columns:1fr}
  .shv-group--carousel .shv-thumbwrap{flex:0 0 62vw}
  .shv-modal{padding:14px}
  .shv-modal-box{width:100%; max-height:78vh}
  .shv-title{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .shv-play,.shv-modal{transition:none}
  .shv-group--carousel .shv-group-items{scroll-behavior:auto}
}