/* ==========================================================================
   Gesundheits-Report — advertorial
   Estética de portal de notícia alemão: claro, denso, serifada nos títulos.
   Nada da identidade "iris" aqui — aquela é a marca Zionix, não o veículo.
   ========================================================================== */

:root{
  --brand:#0B3B5C;          /* azul institucional do cabeçalho */
  --brand-dark:#082B43;
  --accent:#E8630A;         /* laranja do play e dos destaques */
  --accent-dark:#C85206;

  --ink:#111418;            /* texto principal */
  --ink-2:#3C444D;          /* texto secundário */
  --ink-3:#6B7480;          /* metadados */
  --line:#DFE3E8;
  --line-2:#EDF0F3;
  --bg:#FFFFFF;
  --bg-2:#F5F7F9;

  --ok:#12805C;
  --warn:#B45309;

  --serif:"Georgia","Times New Roman",serif;
  --sans:"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;

  --wrap:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  /* overscroll-behavior-x barra o arrasto lateral por toque (o "puxão"
     elástico do iOS), que overflow-x:hidden sozinho não impede. */
  overscroll-behavior-x:none;
}
body{
  width:100%;
  max-width:100%;
  margin:0 !important;
  padding:0 !important;
  overflow-x:clip;
  overscroll-behavior-x:none;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }

/* Fundo sempre ocupa 100% da viewport; o conteúdo mantém alinhamento editorial. */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,32px);
}

.anzeige,.masthead,.mainnav,.crumbs,.article,.pitch,.social-comments,.site-footer{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}


/* ------------------------------------------------------------- anzeige --- */
/* Rótulo de publicidade. Obrigatório: sem ele o advertorial é
   publicidade dissimulada (§5a UWG). Não remover.                          */
.anzeige{
  background:#FFF4E5; border-bottom:1px solid #F0D9B5;
  font-family:var(--sans); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#8A5A12; text-align:center;
  padding:7px 16px;
}
.anzeige b{ font-weight:700; }

/* -------------------------------------------------------------- header --- */
.masthead{ background:var(--brand); color:#fff; }
.masthead__top{ display:flex; align-items:center; gap:20px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.brand img{ width:30px; height:30px; }
.brand__name{ font-family:var(--serif); font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.brand__name span{ font-weight:400; opacity:.75; }

.masthead__actions{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; }
.btn-abo{
  border:1px solid rgba(255,255,255,.6); padding:7px 14px; border-radius:2px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:#fff;
}

.mainnav{ background:var(--brand-dark); }
.mainnav ul{
  display:flex; gap:22px; list-style:none; margin:0; padding:0;
  font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.mainnav ul::-webkit-scrollbar{ display:none; }
.mainnav a{ display:block; padding:12px 0; color:rgba(255,255,255,.88); text-decoration:none; white-space:nowrap; }
.mainnav a:hover{ color:#fff; }

/* --------------------------------------------------------- breadcrumb --- */
.crumbs{
  background:var(--bg); border-bottom:1px solid var(--line);
  font-size:12px; color:var(--ink-3); padding:11px 0;
}
.crumbs span{ margin:0 7px; opacity:.6; }
.crumbs b{ color:var(--ink-2); font-weight:600; }

/* --------------------------------------------------------------- artigo --- */
.article{ background:var(--bg); padding-bottom:56px; }
.article__inner{ display:grid; grid-template-columns:1fr; gap:0; padding-top:28px; }

.share{ display:flex; flex-direction:column; gap:14px; }
.share a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--ink-3); text-decoration:none;
  font-size:14px; font-weight:700;
}
.share a:hover{ border-color:var(--ink-3); color:var(--ink); }

.kicker{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.kicker__tag{ background:var(--accent); color:#fff; padding:3px 9px; border-radius:2px; }
.kicker__cat{ color:var(--accent-dark); }

/* aviso de disponibilidade limitada, ao lado do selo ao vivo */
.kicker__aviso{
  color:#D92D20; font-weight:700; letter-spacing:.06em;
}

/* selo de transmissão ao vivo — bolinha piscando */
.kicker__live{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--bg);
  padding:4px 10px 4px 8px; border-radius:2px;
  color:var(--ink); font-weight:700;
}
.kicker__live::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex:none;
  animation:pisca 1.3s steps(1,end) infinite;
}
@keyframes pisca{
  0%,55%   { opacity:1; box-shadow:0 0 0 0 rgba(232,99,10,.45); }
  56%,100% { opacity:.18; box-shadow:0 0 0 4px rgba(232,99,10,0); }
}
/* respeita quem desativou animação no sistema */
@media (prefers-reduced-motion:reduce){
  .kicker__live::before{ animation:none; opacity:1; }
}

h1{
  font-family:var(--serif); font-size:clamp(28px,2.2rem + 1.2vw,44px);
  line-height:1.14; letter-spacing:-.015em; margin:0 0 16px; font-weight:700;
}
.standfirst{
  font-family:var(--serif); font-size:20px; line-height:1.5; color:#d40000;
  margin:0 0 20px;
}
.byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink-3); margin-bottom:26px;
}
.byline b{ color:var(--ink); font-weight:700; }

/* ------------------------------------------------------------ vsl slot --- */
.vsl{ margin:0 0 10px; }
.vsl__frame{
  position:relative; aspect-ratio:16/9; background:#0D0F12;
  display:grid; place-items:center; overflow:hidden;
}
.vsl__frame iframe,.vsl__frame video,.vsl__frame vturb-smartplayer{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* placeholder — sai quando o embed entrar */
.vsl__ph{ text-align:center; color:rgba(255,255,255,.62); padding:24px; }
.vsl__play{
  width:74px; height:74px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; margin:0 auto 16px;
}
.vsl__play::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:22px solid #fff; border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.vsl__ph code{ font-size:12px; color:rgba(255,255,255,.45); }

.vsl__caption{
  background:var(--bg-2); border:1px solid var(--line); border-top:0;
  padding:12px 16px; font-size:13.5px; color:var(--ink-2); line-height:1.5;
}
.vsl__caption .src{ display:block; margin-top:5px; font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }

/* --------------------------------------------------- espectadores ao vivo --- */
.viewers{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-2); border:1px solid var(--line); border-top:0;
  padding:11px 16px; font-size:14px; color:var(--ink-2);
}
.viewers__dot{
  width:9px; height:9px; border-radius:50%; background:#D92D20; flex:none;
  animation:pisca 1.3s steps(1,end) infinite;
}
.viewers__n{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.viewers__label{ color:var(--ink-3); }
.viewers__live{
  margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#D92D20;
}
/* enquanto não há conexão, o bloco não aparece — nada de número inventado */
.viewers[hidden]{ display:none; }

@media (prefers-reduced-motion:reduce){
  .viewers__dot{ animation:none; }
}

/* --------------------------------------------------------------- corpo --- */
.body{ font-family:var(--serif); font-size:19px; line-height:1.68; margin-top:30px; }
.body p{ margin:0 0 20px; }
.body h2{
  font-family:var(--serif); font-size:26px; line-height:1.25; margin:36px 0 14px; font-weight:700;
}
.body strong{ font-weight:700; }
.body ul{ margin:0 0 20px; padding-left:22px; }
.body li{ margin-bottom:9px; }

.pullquote{
  margin:32px 0; padding:20px 24px; border-left:4px solid var(--accent);
  background:var(--bg-2); font-family:var(--serif); font-size:21px; line-height:1.45; font-style:italic;
}
.pullquote cite{ display:block; margin-top:10px; font-size:14px; font-style:normal; color:var(--ink-3); }

figure{ margin:30px 0; }
figcaption{ font-family:var(--sans); font-size:13px; color:var(--ink-3); padding-top:9px; line-height:1.45; }

/* ----------------------------------------------------------------- cta --- */
.cta{
  margin:34px 0; padding:26px; background:#FFF8F2; border:1px solid #F3D9C0;
  text-align:center; font-family:var(--sans);
}
.cta h3{ font-family:var(--serif); font-size:23px; margin:0 0 10px; line-height:1.3; }
.cta p{ font-size:16px; color:var(--ink-2); margin:0 0 18px; }
.btn{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; font-size:17px; letter-spacing:.01em;
  padding:16px 34px; border-radius:3px;
  box-shadow:0 2px 0 var(--accent-dark);
}
.btn:hover{ background:var(--accent-dark); box-shadow:0 2px 0 #A34304; }
.cta small{ display:block; margin-top:12px; font-size:12.5px; color:var(--ink-3); }

/* -------------------------------------------------------------- rodapé --- */
.site-footer{ background:var(--brand-dark); color:rgba(255,255,255,.75); padding:34px 0; font-size:13px; }
.site-footer nav{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px; }
.site-footer a{ color:rgba(255,255,255,.85); text-decoration:underline; }
.site-footer p{ margin:0 0 8px; line-height:1.6; max-width:70ch; }
.site-footer .disclaimer{ font-size:11.5px; color:rgba(255,255,255,.55); margin-top:14px; }

/* ------------------------------------------------------------- mobile --- */
@media (max-width:720px){
  body{ font-size:16px; }
  .article__inner{ grid-template-columns:1fr; gap:0; }
  .share{ flex-direction:row; margin-bottom:18px; }
  .masthead__actions{ display:none; }
  .body{ font-size:18px; }
  .vsl__play{ width:58px; height:58px; }
  .vsl__play::after{ border-left-width:17px; border-top-width:11px; border-bottom-width:11px; }
}


/* ===== Correção global de largura / overflow ===== */
@media (max-width:760px){
  .wrap{ padding-inline:16px; }
  .masthead__top{ min-width:0; }
  .mainnav .wrap{ padding-inline:16px; overflow:hidden; }
  /* O menu rola na horizontal, em uma linha só, como jornal de verdade.
     overscroll-behavior-x:contain prende esse arrasto dentro do próprio
     menu: ele desliza, mas não repassa o movimento para a página. Somado
     ao overscroll-behavior-x:none do html/body, a página fica firme. */
  .mainnav ul{
    max-width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mainnav ul::-webkit-scrollbar{ display:none; }
  .article__inner{ width:100%; min-width:0; }
  .article__inner > *, .vsl, .vsl__frame{ min-width:0; max-width:100%; }
}