/* ZF [pro]Tech — muro de CNPJ. Tudo escopado em .zfpt para não colidir com o tema. */
@font-face{font-family:'ZF Prometo';src:url('fonts/ZFPrometo-Light.ttf') format('truetype');font-weight:300 400;font-display:swap}
@font-face{font-family:'ZF Prometo';src:url('fonts/ZFPrometo-Medium.ttf') format('truetype');font-weight:500 600;font-display:swap}
@font-face{font-family:'ZF Prometo';src:url('fonts/ZFPrometo-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

.zfpt,body.zfpt-full{
  --zf-blue:#0057B7; --zf-dark-blue:#000828; --zf-middle-blue:#00265F;
  --zf-cyan:#00ABE7; --zf-cyan-25:#CEEBFC; --zf-red:#E52330;
  --zf-gray-100:#F0F2F4; --zf-gray-300:#ACBBC5; --zf-gray-500:#768E9F; --zf-gray-800:#475968;
  --grad:radial-gradient(circle at 8% 6%, var(--zf-blue) 0%, var(--zf-dark-blue) 80%);
  font-family:'ZF Prometo',Tahoma,'Trebuchet MS',Arial,sans-serif;
  font-weight:300;line-height:1.5;color:var(--zf-dark-blue);
}
.zfpt *,.zfpt *::before,.zfpt *::after{box-sizing:border-box}
.zfpt img,.zfpt svg,.zfpt iframe{display:block;max-width:100%}
.zfpt p{margin:0}
.zfpt h2,.zfpt h3{font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0;color:inherit;text-transform:none}
.zfpt ul{margin:0;padding:0;list-style:none}

.zfpt-eyebrow{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--zf-blue);margin-bottom:12px}
.zfpt-eyebrow.is-light{color:var(--zf-cyan)}
.zfpt-h1{font-size:40px;max-width:20ch}
.zfpt-h2{font-size:29px;max-width:26ch}
.zfpt-h2.is-dark{color:var(--zf-dark-blue);max-width:none}
.zfpt-lead{font-size:17px;margin-top:14px !important;max-width:52ch}
.zfpt-hint{font-size:13px;color:var(--zf-gray-500)}
.zfpt-mt{margin-top:16px !important}
.zfpt-link{color:var(--zf-blue);font-weight:700;text-decoration:underline}

/* botões — cantos retos, sem sombra */
.zfpt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:700;font-size:15px;
  padding:14px 26px;border:2px solid transparent;border-radius:0;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.zfpt-btn.is-primary{background:var(--zf-blue);color:#fff}
.zfpt-btn.is-primary:hover{background:var(--zf-middle-blue);color:#fff}
.zfpt-btn.is-cyan{background:var(--zf-cyan);color:var(--zf-dark-blue)}
.zfpt-btn.is-cyan:hover{background:#0098cf;color:#fff}
.zfpt-btn.is-outline{background:transparent;color:var(--zf-blue);border-color:var(--zf-blue)}
.zfpt-btn.is-outline:hover{background:var(--zf-blue);color:#fff}
.zfpt-btn.is-block{width:100%}
.zfpt-btn.is-sm{padding:8px 14px;font-size:13px}
.zfpt-btn[disabled]{opacity:.55;cursor:progress}

.zfpt-badge{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;margin-bottom:16px}
.zfpt-badge.is-live{background:var(--zf-red);border-color:var(--zf-red)}
.zfpt-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:zfpt-pulse 1.6s infinite}
@keyframes zfpt-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.zfpt-tag{display:inline-block;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--zf-cyan);color:#0086b8;align-self:flex-start;margin-bottom:11px}

/* muro */
.zfpt-muro{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;background:var(--grad);color:#fff;padding:52px 44px}
.zfpt-muro .zfpt-h1{color:#fff}
.zfpt-muro .zfpt-lead{color:rgba(255,255,255,.86)}
.zfpt-list{margin-top:28px !important;display:grid;gap:12px;max-width:46ch}
.zfpt-list li{font-size:15px;color:rgba(255,255,255,.86);padding-left:26px;position:relative}
.zfpt-list li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-left:2px solid var(--zf-cyan);border-bottom:2px solid var(--zf-cyan);transform:rotate(-45deg)}
.zfpt-card{background:#fff;color:var(--zf-dark-blue);padding:36px}
.zfpt-card__title{font-size:25px;color:var(--zf-blue);margin-bottom:6px !important}
.zfpt-field{display:block;margin:20px 0 18px}
.zfpt-label{display:block;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--zf-gray-500);margin-bottom:8px}
.zfpt-input{width:100%;padding:14px 16px;border:1px solid var(--zf-gray-300);border-radius:0;background:#fff;font-family:inherit;font-weight:500;color:var(--zf-dark-blue)}
.zfpt-input:focus{outline:0;border-color:var(--zf-blue)}
.zfpt-input.is-lg{font-size:23px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.zfpt-msg{font-size:14px;font-weight:500;padding:12px 14px;margin-bottom:14px;border-left:3px solid var(--zf-red);background:#fdeced;color:#a4141e}

/* barra do visitante identificado */
.zfpt-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--zf-gray-300);padding-bottom:14px;margin-bottom:26px}
.zfpt-who{font-weight:700;font-size:14px;color:var(--zf-gray-800);font-variant-numeric:tabular-nums}

/* destaque do evento */
.zfpt-stage{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start;background:var(--grad);color:#fff;padding:40px 40px 44px}
.zfpt-stage .zfpt-h2{color:#fff}
.zfpt-stage .zfpt-lead{color:rgba(255,255,255,.82);font-size:16px}
.zfpt-when{display:flex;gap:26px;margin:24px 0 0 !important;flex-wrap:wrap}
.zfpt-when div{border-left:2px solid var(--zf-cyan);padding-left:13px}
.zfpt-when dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0}
.zfpt-when dd{font-size:18px;font-weight:500;margin:4px 0 0;font-variant-numeric:tabular-nums}
.zfpt-frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(255,255,255,.18)}
.zfpt-frame iframe{width:100%;height:100%;border:0}
.zfpt-cover{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:22px;
  background:rgba(0,8,40,.55);overflow:hidden}
.zfpt-cover__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:-1}
.zfpt-cover p{font-size:13.5px;color:rgba(255,255,255,.8);max-width:36ch}
.zfpt-count{font-size:32px;font-weight:500;font-variant-numeric:tabular-nums}

/* chat ao vivo do YouTube — aparece só depois de entrar na transmissão */
.zfpt-chat{display:flex;flex-direction:column;background:#0b1330;border:1px solid rgba(255,255,255,.18);height:100%}
.zfpt-chat[hidden]{display:none}  /* display:flex venceria o [hidden] da folha do browser */
.zfpt-chat__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.14);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.zfpt-chat__nota{font-weight:300;font-size:11.5px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.6)}
/* altura mínima acompanha o player (16:9 da coluna ao lado), para o chat não ficar
   mais baixo que o vídeo nem sobrar caixa vazia embaixo */
.zfpt-chat__frame{flex:1;min-height:460px;position:relative;background:#0b1330}  /* escuro enquanto carrega */
/* posicionado por inset: com height:100% o iframe não acha altura definida no flex
   (o pai só tem min-height) e desaba para os 150px padrão, cortando o chat */
.zfpt-chat__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* modo assistir: some o texto do evento, o player cresce e o chat senta ao lado.
   400px é a largura nativa do chat do YouTube — abaixo disso os avisos dele quebram
   em três linhas e ficam cortados, porque a caixa tem altura fixa do lado deles. */
.zfpt-stage.is-assistindo{grid-template-columns:minmax(0,1fr) 400px}
.zfpt-stage.is-assistindo .zfpt-stage__col{display:none}
/* quem manda na altura da linha é o player: sem isso o mínimo do chat estica a linha
   e sobra caixa embaixo do vídeo */
.zfpt-stage.is-assistindo .zfpt-chat__frame{min-height:0}

/* histórico */
.zfpt-hist{padding:40px 0 8px}
.zfpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:24px}
.zfpt-vcard{background:#fff;border:1px solid var(--zf-gray-300);display:flex;flex-direction:column;cursor:pointer;transition:border-color .2s,transform .2s}
.zfpt-vcard:hover{border-color:var(--zf-blue);transform:translateY(-3px)}
.zfpt-vcard.is-soon{cursor:default}
.zfpt-vcard.is-soon:hover{border-color:var(--zf-gray-300);transform:none}
.zfpt-vcard__thumb{position:relative;aspect-ratio:16/9;background:var(--zf-dark-blue);overflow:hidden}
.zfpt-vcard__thumb img{width:100%;height:100%;object-fit:cover}
.zfpt-vcard__play{position:absolute;inset:0;background:rgba(0,8,40,.3);transition:background .2s}
.zfpt-vcard__play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:var(--zf-cyan)}
.zfpt-vcard__play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);z-index:2;
  border-left:15px solid var(--zf-dark-blue);border-top:9px solid transparent;border-bottom:9px solid transparent}
.zfpt-vcard:hover .zfpt-vcard__play{background:rgba(0,8,40,.1)}
.zfpt-vcard__when{position:absolute;left:0;top:0;background:var(--zf-dark-blue);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 11px}
.zfpt-vcard__body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.zfpt-vcard__title{font-size:18px;color:var(--zf-dark-blue)}
.zfpt-vcard__data{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--zf-gray-500);margin-top:7px !important;font-variant-numeric:tabular-nums}
.zfpt-vcard__desc{font-size:14px;color:var(--zf-gray-800);margin-top:9px !important;flex:1}
.zfpt-vcard .zfpt-hint{margin-top:12px !important}
.zfpt-empty{background:#fff;border:1px solid var(--zf-gray-300);padding:40px;text-align:center;color:var(--zf-gray-800);margin-top:24px}

/* player das gravações */
.zfpt-dlg{border:0;padding:0;max-width:min(1060px,94vw);width:100%;background:var(--zf-dark-blue);color:#fff}
.zfpt-dlg::backdrop{background:rgba(0,8,40,.85)}
.zfpt-dlg__head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px}
.zfpt-dlg__head h3{font-size:17px}
.zfpt-dlg__close{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:36px;height:36px;cursor:pointer;font-size:16px;line-height:1}
.zfpt-dlg__close:hover{background:rgba(255,255,255,.12)}
.zfpt-dlg__frame{aspect-ratio:16/9;background:#000}
.zfpt-dlg__frame iframe{width:100%;height:100%;border:0}
.zfpt-dlg__note{padding:13px 20px 18px;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ── modo tela cheia (template do plugin) ── */
body.zfpt-full{margin:0;background:#fff;display:flex;flex-direction:column;min-height:100vh;
  font-family:'ZF Prometo',Tahoma,'Trebuchet MS',Arial,sans-serif}
body.zfpt-full{background:var(--zf-gray-100)}
body.zfpt-full .zfpt-page{flex:1;width:100%;display:flex;flex-direction:column}
body.zfpt-full .zfpt{flex:1;display:flex;flex-direction:column}

/* Uma peça só: as faixas vão de borda a borda e o conteúdo fica centrado num limite de leitura.
   Sem isso, o painel com gradiente vira um retângulo colado sobre o branco do tema. */
body.zfpt-full .zfpt-muro,
body.zfpt-full .zfpt-stage,
body.zfpt-full .zfpt-bar,
body.zfpt-full .zfpt-hist{padding-inline:max(24px,calc((100% - 1200px) / 2))}

/* o muro ocupa toda a altura livre entre cabeçalho e rodapé */
body.zfpt-full .zfpt-muro{flex:1;align-content:center}
body.zfpt-full .zfpt-hist{flex:1}

/* a barra do CNPJ se funde ao cabeçalho: vira um bloco escuro contínuo com o logo */
body.zfpt-full .zfpt-bar{background:var(--zf-dark-blue);border-bottom:0;margin:0;padding-top:0;padding-bottom:18px}
body.zfpt-full .zfpt-who{color:rgba(255,255,255,.72)}
body.zfpt-full .zfpt-bar .zfpt-btn.is-outline{color:#fff;border-color:rgba(255,255,255,.45)}
body.zfpt-full .zfpt-bar .zfpt-btn.is-outline:hover{background:rgba(255,255,255,.12);color:#fff}
.zfpt-topbar{background:var(--zf-dark-blue)}
.zfpt-topbar__in{max-width:1240px;margin:0 auto;height:72px;display:flex;align-items:center;padding:0 24px}
.zfpt-topbar img{height:26px;width:auto}
.zfpt-footbar{background:var(--zf-dark-blue);color:rgba(255,255,255,.62);margin-top:auto}
.zfpt-footbar__in{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px}
.zfpt-footbar img{height:20px;width:auto;opacity:.85}

@media(max-width:860px){
  .zfpt-topbar__in{height:60px;padding:0 18px}
  body.zfpt-full .zfpt-page{padding:0}
  .zfpt-muro,.zfpt-stage,.zfpt-stage.is-assistindo{grid-template-columns:1fr;gap:28px;padding:32px 24px}
  /* mesma especificidade da regra de desktop, senão ela vence o media query e o chat colapsa */
  .zfpt-stage.is-assistindo .zfpt-chat__frame,.zfpt-chat__frame{min-height:min(62vh,460px)}
  .zfpt-chat{height:auto}
  .zfpt-h1{font-size:29px}
  .zfpt-h2{font-size:23px}
  .zfpt-card{padding:26px}
}