/* ============================================================================
   MPV — Acervo de Vídeos
   Paleta derivada da marca do site (azul #2C61AD). Estrutura pelo Elementor
   (loop-grid + Loop Item 32464); o visual mora aqui.
   Fonte de verdade: /root/mpv-backup/acervo.css · nota "MPV — Acervo de Vídeos".

   NOTA DE ARQUITETURA: o espaçamento interno dos containers do Loop Item é
   definido no JSON do Elementor (flex_gap), não aqui. O Elementor emite gap por
   elemento com especificidade maior que esta folha, e brigar com isso foi o que
   colou o numeral no rótulo antes.
   ========================================================================== */

.mpv-hero,.mpv-barwrap,.mpv-rows,.mpv-home,.mpv-assuntos{
  --paper:#FFFFFF;--band:#F3F7FB;--card:#FFFFFF;
  --line:#E2E9F1;--line-2:#C7D5E5;
  --ink:#152030;--ink-2:#41505F;--mute:#6E7F90;
  --brand:#2C61AD;--brand-hi:#1F4C8C;--live:#1E7A3C;
  --serif:"Iowan Old Style","Hoefler Text",Georgia,"Times New Roman",serif;
  --gut:clamp(1rem,4vw,3rem);
  --max:1440px;
  --cardw:clamp(14rem,19vw,17rem);
  color:var(--ink);
}
/* faixas sangram; conteúdo limitado por dentro, numa regra só */
.mpv-hero,.mpv-barwrap,.mpv-rows{
  padding-left:max(var(--gut), calc((100% - var(--max)) / 2));
  padding-right:max(var(--gut), calc((100% - var(--max)) / 2));
}
.mpv-hero{background:var(--band);border-bottom:1px solid var(--line)}
.mpv-barwrap,.mpv-rows{background:var(--paper)}

/* o widget HTML encolhe para o conteúdo dentro do flex do Elementor */
.mpv-row > .elementor-widget,
.mpv-barwrap > .elementor-widget,
.mpv-home > .elementor-widget{width:100%!important;max-width:100%!important}
.mpv-html > .elementor-widget-container{width:100%}
.mpv-rowhead,.mpv-bar,.mpv-res{width:100%}
.mpv-bar br,.mpv-rowhead br{display:none}

/* ============================ CARD ============================ */
.mpv-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  height:100%;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.mpv-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 14px 32px -16px rgba(21,32,48,.32);
}
.mpv-card:focus-within{outline:2px solid var(--brand);outline-offset:2px}

.mpv-artwrap{position:relative;overflow:hidden;background:var(--band)}
.mpv-art,.mpv-art .elementor-widget-container,.mpv-art figure,.mpv-art a{display:block;line-height:0}
.mpv-art img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.mpv-card:hover .mpv-art img{transform:scale(1.035)}
/* sem arte: bloco tipográfico, não faixa vazia */
.mpv-artwrap:not(:has(img))::after{
  content:"sem arte";display:grid;place-content:center;aspect-ratio:16/9;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  background:repeating-linear-gradient(135deg,var(--band),var(--band) 10px,#EAF0F7 10px,#EAF0F7 20px);
}

/* selo do numeral, sobre a arte — não disputa espaço com o rótulo */
.mpv-badge{
  position:absolute;left:.6rem;bottom:.6rem;z-index:2;pointer-events:none;
}
.mpv-badge:empty,
.mpv-badge:has(.elementor-heading-title:empty){display:none}
.mpv-badge .elementor-heading-title{
  display:inline-block;
  padding:.2rem .5rem;border-radius:4px;
  background:rgba(12,22,36,.82);
  color:#fff;font-size:.82rem;font-weight:600;line-height:1.25;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;
  backdrop-filter:saturate(1.4) blur(2px);
}

.mpv-body{padding:.78rem .85rem .9rem}
.mpv-rot .elementor-heading-title{
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);line-height:1.3;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mpv-titulo .elementor-heading-title,.mpv-titulo a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.95rem;font-weight:600;line-height:1.38;color:var(--ink);
  text-decoration:none;
}
.mpv-card:hover .mpv-titulo a{color:var(--brand)}
.mpv-data .elementor-heading-title{
  font-size:.79rem;font-weight:400;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.mpv-rot:empty,.mpv-titulo:empty,.mpv-data:empty{display:none}

/* ============================ HERÓI ============================ */
.mpv-hero{padding-top:clamp(1.5rem,3vw,2.4rem);padding-bottom:clamp(1.5rem,3vw,2.2rem)}
.mpv-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--live);margin-bottom:1rem;
}
.mpv-eyebrow::before{content:"";width:.42rem;height:.42rem;background:var(--live);border-radius:50%}
.mpv-herogrid .elementor-loop-container{display:block!important}
.mpv-herogrid .mpv-card{
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  transform:none!important;display:grid;gap:clamp(1.2rem,3vw,2.4rem);
}
.mpv-herogrid .mpv-artwrap{
  border:1px solid var(--line-2);border-radius:8px;background:var(--paper);
  box-shadow:0 18px 44px -20px rgba(21,32,48,.38);
  align-self:center;justify-self:end;max-width:44rem;width:100%;
}
.mpv-herogrid .mpv-body{padding:0;align-self:center}
/* posicionamento explícito: o `order` dos containers do Elementor empata em
   especificidade e a ordem de fonte decide */
@media (min-width:60rem){
  .mpv-herogrid .mpv-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .mpv-herogrid .mpv-body{grid-column:1;grid-row:1}
  .mpv-herogrid .mpv-artwrap{grid-column:2;grid-row:1}
}
@media (max-width:59.999rem){
  .mpv-herogrid .mpv-body{grid-column:1;grid-row:1}
  .mpv-herogrid .mpv-artwrap{grid-column:1;grid-row:2;justify-self:stretch}
}
.mpv-herogrid .mpv-badge{left:.9rem;bottom:.9rem}
.mpv-herogrid .mpv-badge .elementor-heading-title{font-size:1rem;padding:.28rem .66rem}
.mpv-herogrid .mpv-rot .elementor-heading-title{font-size:.72rem;margin-bottom:.5rem}
.mpv-herogrid .mpv-titulo .elementor-heading-title,.mpv-herogrid .mpv-titulo a{
  font-family:var(--serif);font-size:clamp(1.3rem,2.7vw,1.95rem);font-weight:600;
  line-height:1.2;letter-spacing:-.01em;-webkit-line-clamp:4;margin-bottom:.6rem;
}
.mpv-herogrid .mpv-data .elementor-heading-title{font-size:.86rem;color:var(--ink-2)}
.mpv-herogrid .mpv-card:hover .mpv-art img{transform:none}

/* ============================ BARRA ============================ */
.mpv-barwrap{padding-top:1.1rem;padding-bottom:.4rem}
.mpv-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.mpv-search{position:relative;flex:1 1 20rem;min-width:15rem;max-width:26rem}
.mpv-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--mute)}
.mpv-search input{
  width:100%;padding:.6rem .85rem .6rem 2.4rem;background:var(--paper);
  border:1px solid var(--line-2);border-radius:6px;color:var(--ink);font-size:.92rem;
}
.mpv-search input::placeholder{color:var(--mute)}
.mpv-search input:focus{border-color:var(--brand);outline:3px solid rgba(44,97,173,.16);outline-offset:0}
.mpv-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.mpv-chip{
  padding:.36rem .78rem;border:1px solid var(--line-2);border-radius:100px;
  font-size:.79rem;color:var(--ink-2);background:var(--paper);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.mpv-chip:hover{border-color:var(--brand);color:var(--brand)}
.mpv-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.mpv-year{
  padding:.38rem .65rem;background:var(--paper);color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:100px;font-size:.79rem;
  width:auto!important;flex:0 0 auto;max-width:11rem;height:auto;
}
.mpv-clear{background:none;border:0;color:var(--brand);font-size:.78rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.mpv-tally{margin-left:auto;font-size:.76rem;color:var(--mute);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ============================ FILEIRAS ============================ */
.mpv-rows{padding-bottom:2.6rem}
.mpv-row{margin-top:2rem}
.mpv-rowhead{display:flex;align-items:baseline;gap:.6rem;flex-wrap:nowrap;margin-bottom:.7rem}
.mpv-rowhead h2{
  font-family:var(--serif);font-size:clamp(1.08rem,1.9vw,1.3rem);font-weight:600;
  margin:0;color:var(--ink);flex:0 1 auto;min-width:0;
}
.mpv-rowsub{
  flex:1 1 auto;min-width:0;font-size:.75rem;color:var(--mute);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mpv-arrows{margin-left:auto;display:flex;gap:.35rem;flex:none}
.mpv-arrow{
  width:2rem;height:2rem;border:1px solid var(--line-2);border-radius:50%;
  background:var(--paper);color:var(--ink-2);font-size:1.1rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,border-color .15s,color .15s;
}
.mpv-arrow:hover:not([disabled]){background:var(--brand);border-color:var(--brand);color:#fff}
.mpv-arrow[disabled]{opacity:.32;cursor:default}
/* o Elementor gera CSS por elemento com especificidade maior: daí o !important
   nas propriedades estruturais do grid */
.mpv-track .elementor-loop-container{
  display:grid!important;grid-auto-flow:column!important;
  grid-auto-columns:var(--cardw)!important;grid-template-columns:none!important;
  gap:.8rem!important;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.mpv-track .elementor-loop-container::-webkit-scrollbar{height:6px}
.mpv-track .elementor-loop-container::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:100px}
.mpv-track .e-loop-item{scroll-snap-align:start;height:auto;display:flex}
.mpv-track .e-loop-item > .mpv-card{width:100%}

/* ============================ HOME ============================
   A seção mora dentro do bloco azul "Últimas Lives" do tema: fundo transparente,
   sem título próprio (o bloco já tem o dele) e contraste ajustado para o azul. */
.mpv-home{background:transparent;padding:0}
.mpv-home .mpv-row{margin-top:0}
.mpv-home .mpv-rowhead{margin-bottom:.6rem}
.mpv-home .mpv-arrow{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff;
}
.mpv-home .mpv-arrow:hover:not([disabled]){background:#fff;border-color:#fff;color:var(--brand)}
.mpv-home .mpv-arrow[disabled]{opacity:.3}
.mpv-home .mpv-track .elementor-loop-container{
  scrollbar-color:rgba(255,255,255,.5) transparent;
}
.mpv-home .mpv-track .elementor-loop-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5)}
/* o tema estiliza `a` com especificidade 0,2,0; daí o seletor com elemento */
.mpv-home a.mpv-verTodos{
  display:inline-block;margin-top:1rem;font-size:.86rem;font-weight:600;
  color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.5);
}
.mpv-home a.mpv-verTodos:hover{color:#fff;text-decoration-color:#fff}
/* e o título do card também: o tema pinta `a` dentro do conteúdo */
.mpv-card a.mpv-titulo,.mpv-titulo a{color:var(--ink)}
.mpv-card:hover .mpv-titulo a{color:var(--brand)}

/* ============================ RESULTADOS ============================ */
.mpv-res{padding-top:1.3rem}
.mpv-reshead{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.mpv-reshead h2{font-family:var(--serif);font-size:1.22rem;font-weight:600;margin:0;color:var(--ink)}
.mpv-reshead p{margin:0;font-size:.8rem;color:var(--mute)}
.mpv-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr))}
.mpv-grid .mpv-card{display:flex;flex-direction:column}
.mpv-grid .mpv-artwrap{position:relative}
.mpv-vazio{
  grid-column:1/-1;padding:3.2rem 1rem;text-align:center;color:var(--mute);
  border:1px dashed var(--line-2);border-radius:8px;
}
.mpv-vazio b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink);margin-bottom:.4rem}

/* ============================ ASSUNTOS ============================ */
.mpv-assuntos{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.mpv-assunto{
  display:inline-flex;align-items:baseline;gap:.42rem;
  padding:.42rem .82rem;border:1px solid var(--line-2);border-radius:100px;
  background:var(--paper);color:var(--ink-2);text-decoration:none;line-height:1.2;
  transition:border-color .15s,color .15s,background .15s;
}
.mpv-assunto:hover{border-color:var(--brand);color:var(--brand);background:var(--band)}
.mpv-assunto b{font-weight:600;font-size:.68em;color:var(--mute);font-variant-numeric:tabular-nums}
.mpv-assunto:hover b{color:var(--brand)}
.mpv-assunto.mpv-n0{font-size:.86rem}
.mpv-assunto.mpv-n1{font-size:.96rem}
.mpv-assunto.mpv-n2{font-size:1.08rem}
.mpv-assunto.mpv-n3{font-size:1.22rem;font-weight:600;color:var(--ink)}
.mpv-assunto.mpv-n4{font-size:1.4rem;font-weight:700;color:var(--ink)}

/* ============================ TELAS ESTREITAS ============================
   Auditoria em 390px acusou fonte < 12px nos cards. No celular o card ocupa a
   largura toda, então não há motivo para letra miúda. Alvos de toque >= 34px. */
@media (max-width:47.999rem){
  .mpv-hero,.mpv-barwrap,.mpv-rows,.mpv-home,.mpv-assuntos{--cardw:min(78vw,17rem)}
  .mpv-rot .elementor-heading-title{font-size:.79rem;letter-spacing:.07em}
  .mpv-titulo .elementor-heading-title,.mpv-titulo a{font-size:1rem;-webkit-line-clamp:3}
  .mpv-data .elementor-heading-title{font-size:.82rem}
  .mpv-badge .elementor-heading-title{font-size:.9rem;padding:.24rem .56rem}
  .mpv-eyebrow{font-size:.78rem;letter-spacing:.1em}
  .mpv-rowsub{font-size:.8rem}
  .mpv-rowhead h2{font-size:1.16rem}
  .mpv-tally{font-size:.8rem}
  .mpv-arrow{width:2.25rem;height:2.25rem;font-size:1.2rem}
  .mpv-chip{padding:.52rem .88rem;font-size:.86rem}
  .mpv-year{padding:.52rem .8rem;font-size:.86rem}
  .mpv-clear{padding:.42rem 0;font-size:.86rem}
  .mpv-search input{padding:.72rem .85rem .72rem 2.45rem;font-size:1rem}
  .mpv-assunto{padding:.52rem .9rem}
  .mpv-verTodos{padding:.42rem 0;font-size:.92rem}
  .mpv-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr))}
}
@media (max-width:30rem){
  .mpv-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .mpv-grid .mpv-titulo .elementor-heading-title,
  .mpv-grid .mpv-titulo a{font-size:.88rem;-webkit-line-clamp:3}
  .mpv-grid .mpv-rot .elementor-heading-title{font-size:.72rem}
  .mpv-grid .mpv-data .elementor-heading-title{font-size:.74rem}
  .mpv-grid .mpv-badge .elementor-heading-title{font-size:.8rem;padding:.18rem .44rem}
  .mpv-assunto.mpv-n3{font-size:1.08rem}
  .mpv-assunto.mpv-n4{font-size:1.18rem}
}

@media (prefers-reduced-motion:reduce){
  .mpv-card,.mpv-art img{transition:none!important}
  .mpv-card:hover{transform:none}
  .mpv-card:hover .mpv-art img{transform:none}
}