/* ===== vitrine de fotos — padrão m-video-hermes, prefixo phv ===== */
.phvlinha{--tinta:#14213d;--menu:#163976;--tag:#d92b2b;--faixa-h:52px;--controles-h:44px;
  display:grid;gap:18px;grid-template-columns:1fr;align-items:start;margin:0 0 18px}
@media(min-width:900px){ .phvlinha{grid-template-columns:minmax(330px,0.78fr) 1.22fr;gap:22px} }
.phvlinha__dir{display:flex;flex-direction:column;gap:14px;min-width:0}
.phvlinha__dir>*{margin:0!important}

.phv{position:relative;width:100%;aspect-ratio:16/9;background:#05070d;overflow:hidden;
  border-radius:8px;user-select:none;box-shadow:0 10px 30px rgba(13,22,46,.20),0 2px 6px rgba(13,22,46,.10);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
@media(min-width:900px){ .phv{aspect-ratio:4/3} }
.phv *{box-sizing:border-box}
.phv:focus-visible{outline:3px solid var(--menu);outline-offset:3px}

.phv__palco{position:absolute;inset:0}
.phv__quadro{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.phv__quadro.e-agora{opacity:1}
.phv__quadro img{width:100%!important;height:100%!important;object-fit:cover;display:block;
  transform:scale(1.02);max-width:none;border-radius:0}
.phv__quadro.e-agora img{animation:phv-passeio var(--passeio,8s) ease-out forwards}
@keyframes phv-passeio{from{transform:scale(1.02)} to{transform:scale(1.09)}}
.phv.parada .phv__quadro.e-agora img{animation-play-state:paused}

.phv__veu-topo{position:absolute;left:0;right:0;top:0;height:28%;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.62) 0%,rgba(5,7,13,.12) 60%,transparent 100%)}
.phv__veu-base{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,7,13,.88) 0%,rgba(5,7,13,.55) 32%,rgba(5,7,13,.12) 68%,transparent 100%)}
.phv__ir{position:absolute;inset:0;z-index:2}

.phv__topo{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;
  gap:9px;padding:10px 12px;pointer-events:none}
.phv__selo{display:flex;align-items:center;gap:7px;background:rgba(22,57,118,.88);
  padding:4px 9px 4px 4px;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.phv__selo img{width:19px;height:19px;border-radius:2px;display:block}
.phv__selo span{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff;line-height:1}
.phv__vao{flex:1}
.phv__relogio{font-family:"Barlow Condensed",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  color:rgba(255,255,255,.92);-webkit-text-fill-color:rgba(255,255,255,.92);text-shadow:0 1px 5px rgba(0,0,0,.6)}

.phvchy{position:absolute;left:0;right:0;bottom:var(--controles-h);z-index:3;padding:0 11px 9px;transition:opacity .25s}
.phv.gaveta-aberta .phvchy{opacity:0;pointer-events:none}
.phvchy__tarja{display:inline-block;position:relative;bottom:-3px;margin-left:13px;
  background:var(--tag);color:#fff;-webkit-text-fill-color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:3px 12px 2px;box-shadow:0 2px 9px rgba(0,0,0,.45);
  animation:phv-tarja .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes phv-tarja{from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none}}
.phvchy__faixa{display:flex;align-items:stretch;height:var(--faixa-h);
  background:linear-gradient(180deg,#fff 0%,#f3f4f8 100%);box-shadow:0 4px 18px rgba(0,0,0,.5);
  overflow:hidden;animation:phv-faixa .45s cubic-bezier(.2,.8,.25,1) both}
@keyframes phv-faixa{from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none}}
.phvchy__placa{flex:0 0 var(--faixa-h);display:grid;place-items:center;position:relative;
  background:linear-gradient(180deg,#1d4a93 0%,var(--menu) 100%);border-right:3px solid var(--tag)}
.phvchy__placa::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%)}
.phvchy__placa img{width:68%;height:auto;display:block;max-width:none}
.phvchy__texto{flex:1;min-width:0;display:flex;align-items:center;padding:0 13px;overflow:hidden}
.phvchy__rolo{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.phvchy__parte{font-family:"Barlow Condensed",sans-serif;font-size:23px;line-height:1;font-weight:700;
  text-transform:uppercase;color:var(--tinta);-webkit-text-fill-color:var(--tinta);padding-right:56px}
.phvchy__rolo.rolando{animation:phv-rolar var(--t) linear 1.1s infinite}
@keyframes phv-rolar{from{transform:translateX(0)} to{transform:translateX(var(--d))}}
.phv.parada .phvchy__rolo.rolando{animation-play-state:paused}
.phvchy__agora{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 11px;
  background:linear-gradient(180deg,#e63b3b 0%,var(--tag) 100%);
  font-family:"Barlow Condensed",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  color:#fff;-webkit-text-fill-color:#fff}
.phvchy__agora i{width:7px;height:7px;border-radius:50%;background:#fff;animation:phv-pisca 1.5s infinite}
@keyframes phv-pisca{0%,100%{opacity:1}45%{opacity:.2}}
.phvchy__base{display:flex;align-items:center;gap:12px;background:var(--menu);padding:4px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.phvchy__base b{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff}
.phvchy__base .dir{margin-left:auto;font-size:11.5px;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.80);-webkit-text-fill-color:rgba(255,255,255,.80)}

.phv__grande{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:5;
  width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,255,255,.92);
  background:rgba(5,7,13,.38);cursor:pointer;display:grid;place-items:center;padding:0;
  opacity:0;transition:opacity .2s,transform .2s}
.phv.parada .phv__grande,.phv.ativa .phv__grande{opacity:1}
.phv__grande:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(5,7,13,.55)}
.phv__grande svg{width:23px;height:23px;fill:#fff}

.phv__controles{position:absolute;left:0;right:0;bottom:0;z-index:7;height:var(--controles-h);
  padding:0 7px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(0deg,rgba(5,7,13,.92),rgba(5,7,13,.45))}
.phv__trilho{display:flex;gap:3px;align-items:center;height:10px;cursor:pointer;margin:0 4px}
.phv__traco{flex:1;height:3px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
.phv__traco i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.phv__traco.visto i{width:100%}
.phv__linha{display:flex;align-items:center;gap:2px}
.phv__bt{width:31px;height:28px;display:grid;place-items:center;border:0;background:transparent;
  cursor:pointer;border-radius:4px;padding:0}
.phv__bt:hover{background:rgba(255,255,255,.18)}
.phv__bt svg{width:16px;height:16px;fill:#fff}
.phv__bt.ligado{background:rgba(255,255,255,.24)}
.phv__conta{font-family:"Barlow Condensed",sans-serif;font-size:12.5px;letter-spacing:.08em;font-weight:700;
  color:rgba(255,255,255,.95);-webkit-text-fill-color:rgba(255,255,255,.95);padding:0 8px;font-variant-numeric:tabular-nums}
.phv__leia{margin-left:auto;display:flex;align-items:center;padding:0 10px;height:26px;border-radius:3px;
  background:rgba(255,255,255,.14);text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;-webkit-text-fill-color:#fff}
.phv__leia:hover{background:var(--tag);color:#fff}

.phv__gaveta{position:absolute;left:0;right:0;bottom:var(--controles-h);z-index:6;
  background:rgba(8,12,22,.94);padding:9px;border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(calc(100% + var(--controles-h)));transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.phv.gaveta-aberta .phv__gaveta{transform:none}
.phv__fila{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.phv__fila::-webkit-scrollbar{height:5px}
.phv__fila::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32);border-radius:3px}
.phv__mini{flex:0 0 104px;cursor:pointer;border:2px solid transparent;border-radius:4px;
  overflow:hidden;background:#0d1322;transition:border-color .2s,transform .2s}
.phv__mini:hover{transform:translateY(-2px)}
.phv__mini.e-agora{border-color:var(--tag)}
.phv__mini img{width:100%!important;height:56px!important;object-fit:cover;display:block;max-width:none}
.phv__mini span{font-size:10px;line-height:1.3;padding:5px 6px 6px;height:36px;color:#fff;
  -webkit-text-fill-color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== berço + encaixe no canto ao rolar a página ===== */
.phvberco{position:relative;width:100%;aspect-ratio:16/9}
@media(min-width:900px){ .phvberco{aspect-ratio:4/3} }
.phvberco>.phv{position:absolute;inset:0;aspect-ratio:auto}

.phv__fechar{position:absolute;top:6px;right:6px;z-index:9;width:26px;height:26px;border:0;padding:0;
  border-radius:50%;background:rgba(5,7,13,.62);color:#fff;-webkit-text-fill-color:#fff;
  cursor:pointer;display:none;align-items:center;justify-content:center;font-size:17px;line-height:1}
.phv__fechar:hover{background:var(--tag)}

.phv.flutua{position:fixed!important;inset:auto 18px 18px auto;width:min(360px,46vw);height:auto;
  aspect-ratio:16/9!important;z-index:99999;border-radius:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.3);
  --faixa-h:40px;--controles-h:36px;
  animation:phv-encaixa .32s cubic-bezier(.2,.8,.25,1)}
@keyframes phv-encaixa{from{opacity:0;transform:translateY(26px) scale(.93)} to{opacity:1;transform:none}}
.phv.flutua .phv__fechar{display:flex}
.phv.flutua .phvchy__base,.phv.flutua .phv__relogio,.phv.flutua .phv__grande{display:none}
.phv.flutua .phvchy{padding:0 8px 7px}
.phv.flutua .phvchy__parte{font-size:18px;padding-right:46px}
.phv.flutua .phvchy__tarja{font-size:11px;padding:2px 9px 1px;margin-left:9px}
.phv.flutua .phvchy__agora{font-size:11px;padding:0 8px}
.phv.flutua .phv__topo{padding:7px 36px 7px 9px}
.phv.flutua .phv__selo span{font-size:10.5px}
.phv.flutua .phv__gaveta{display:none}
@media(max-width:640px){ .phv.flutua{width:min(250px,64vw);right:10px;bottom:10px} }

/* ===== celular: o letreiro encolhe junto com a tela ===== */
@media(max-width:899px){
  .phvlinha{--faixa-h:44px;--controles-h:40px}
  .phvchy{padding:0 9px 8px}
  .phvchy__parte{font-size:17px;padding-right:44px}
  .phvchy__tarja{font-size:11px;padding:2px 10px 1px;margin-left:10px;letter-spacing:.11em}
  .phvchy__agora{font-size:10.5px;padding:0 9px;gap:5px}
  .phvchy__agora i{width:6px;height:6px}
  .phvchy__base{padding:3px 10px}
  .phvchy__base b{font-size:10.5px}
  .phvchy__base .dir{font-size:10.5px}
  .phv__selo span{font-size:10.5px}
  .phv__relogio{font-size:11px}
  .phv__grande{width:50px;height:50px}
  .phv__grande svg{width:20px;height:20px}
}
@media(max-width:420px){
  .phvlinha{--faixa-h:40px}
  .phvchy__parte{font-size:15px;padding-right:38px}
  .phvchy__agora{font-size:9.5px;padding:0 7px}
  .phvchy__tarja{font-size:10px}
}

/* no canto o espaço é curto: cai o "AGORA" e o nome ao lado da marca */
.phv.flutua .phvchy__agora{display:none}
.phv.flutua .phv__selo span{display:none}
.phv.flutua .phv__selo{padding:4px}
.phv.flutua .phvchy__parte{font-size:15px;padding-right:38px}
.phv.flutua .phvchy__tarja{font-size:9.5px;padding:2px 8px 1px;margin-left:8px;bottom:-2px}
.phv.flutua .phvchy__placa{flex-basis:calc(var(--faixa-h) - 6px)}
.phv.flutua .phvchy__faixa{height:calc(var(--faixa-h) - 6px)}

/* celular: foto mais alta e sem a tarja do endereço (o canto segue 16/9) */
@media(max-width:899px){
  .phvberco{aspect-ratio:4/3}
  .phv{aspect-ratio:4/3}
  .phvchy__base{display:none}
}

/* ===== quando a matéria traz vídeo, ele roda mudo no lugar da foto ===== */
.phv__tv{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  aspect-ratio:16/9;z-index:1;background:#000;overflow:hidden}
.phv__tv.e-cheio{inset:0;transform:none;aspect-ratio:auto}
.phv__tv iframe,.phv__tv video{width:100%;height:100%;border:0;display:block;object-fit:cover}
/* a foto vira fundo desfocado, para a tarja de 16:9 não ficar com banda crua */
.phv.com-video .phv__quadro.e-agora img{filter:blur(18px) brightness(.42);
  transform:scale(1.14);animation:none}
.phv__selo-tv{display:none;align-items:center;gap:5px;background:rgba(217,43,43,.92);
  padding:4px 9px;border-radius:3px;font-family:"Barlow Condensed",sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff}
.phv.com-video .phv__selo-tv{display:flex}
.phv__selo-tv svg{width:9px;height:9px;fill:#fff}

/* ===== dentro da matéria, logo depois do corpo do texto ===== */
/* 36px embaixo para o bloco não encostar no banner que vem logo abaixo */
.phvlinha--artigo{display:block;margin:30px 0 36px!important;grid-template-columns:none}
/* no computador, 20% mais baixo que o 16:9 (altura = largura x 9/16 x 0,8) */
.phvlinha--artigo .phvberco{aspect-ratio:20/9}
@media(max-width:899px){ .phvlinha--artigo .phvberco{aspect-ratio:4/3} }

/* a vitrine vazia não deve deixar meia linha em branco na capa */
.phvlinha--so-direita{grid-template-columns:1fr!important}