/* ===========================================================
   Humanus Soluções Essenciais — Stratpharma Brasil
   Identidade visual Humanus aplicada à estrutura Stratpharma
   =========================================================== */

:root{
  /* paleta institucional Humanus */
  --navy:#1F4E5F;  --navyD:#163A46;
  --blue:#2E75B6;  --blueD:#1d5a79;  --blueL:#EAF2F6;
  --teal:#1D9E8E;  --tealD:#0F6B5E;  --tealL:#E3F3F0;
  --orange:#C45414;--orangeD:#c25101;--orangeL:#FBEDE6;
  --purple:#8C288C;--purpleD:#6d1f6d;--purpleL:#F6E9F6;
  --humanus:#B4143C; --humanusD:#8d0f2f;
  --ink:#22282c;   --grey:#6b7680;   --line:#dfe6ea;
  --shell:#101820; --bg:#F4F7F8;     --white:#fff;
  --radius:14px;
  --shadow:0 2px 14px rgba(16,24,32,.08);
  --shadowUp:0 10px 30px rgba(16,24,32,.14);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ---------- Topo ---------- */
.topbar{background:var(--shell); color:#cfd8dd; font-size:13px}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding-top:7px; padding-bottom:7px; flex-wrap:wrap}
.topbar a{color:#cfd8dd}
.topbar strong{color:#fff}

header.site{position:sticky; top:0; z-index:100; background:#fff;
  box-shadow:0 1px 0 var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-top:14px; padding-bottom:14px}
.logo img{height:52px; width:auto}
.logo small{display:block; font-size:10.5px; letter-spacing:.13em;
  color:var(--grey); text-transform:uppercase; margin-top:5px; white-space:nowrap}

nav.main{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
nav.main > a, nav.main .drop > button{
  display:inline-block; padding:9px 13px; border-radius:8px;
  font-size:14.5px; color:var(--ink); background:none; border:0;
  font-family:inherit; cursor:pointer; white-space:nowrap;
}
nav.main > a:hover, nav.main .drop > button:hover{background:var(--blueL); text-decoration:none}
nav.main > a.on{color:var(--humanus); font-weight:600; box-shadow:inset 0 -2px 0 var(--humanus)}
.drop{position:relative}
.drop-menu{position:absolute; top:100%; left:0; min-width:255px; background:var(--shell);
  border-radius:10px; padding:7px; box-shadow:var(--shadowUp); display:none}
.drop:hover .drop-menu, .drop:focus-within .drop-menu{display:block}
.drop-menu a{display:block; padding:10px 13px; color:#e8eef1; font-size:14px; border-radius:7px}
.drop-menu a:hover{background:rgba(255,255,255,.1); text-decoration:none}

.btn{display:inline-block; padding:12px 24px; border-radius:9px; font-weight:600;
  font-size:14.5px; background:var(--humanus); color:#fff; border:0; cursor:pointer}
.btn:hover{background:var(--humanusD); text-decoration:none; color:#fff}
.btn.ghost{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 2px var(--navy)}
.btn.ghost:hover{background:var(--navy); color:#fff}
.btn.light{background:#fff; color:var(--navy)}
.btn.light:hover{background:#eef4f6; color:var(--navy)}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--navyD); color:#fff; overflow:hidden;
  display:flex; align-items:center; min-height:420px}
.hero .bg{position:absolute; inset:0; opacity:.30; object-fit:cover; width:100%; height:100%}
.hero .wrap{position:relative; width:100%; padding-top:86px; padding-bottom:86px}
.hero h1{font-size:clamp(29px,4.4vw,50px); line-height:1.14; margin:0 0 20px; max-width:19ch}
.hero p.lead{font-size:clamp(16px,1.9vw,20px); max-width:60ch; margin:0 0 28px; color:#e2edf1}
.hero .kicker{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#9fc7d6; margin:0 0 14px; font-weight:600}
.barra{display:flex; height:7px}
.barra div{flex:1}

.hero.slim .wrap{padding-top:58px; padding-bottom:58px}
.hero.slim h1{font-size:clamp(26px,3.4vw,40px); max-width:24ch}

/* ---------- Seções ---------- */
section.bloco{padding:66px 0}
section.bloco.alt{background:#fff}
h2.tit{font-size:clamp(23px,3vw,33px); margin:0 0 12px; color:var(--navy); line-height:1.22}
h2.tit.center{text-align:center}
p.sub{color:var(--grey); font-size:16.5px; max-width:74ch; margin:0 0 34px}
p.sub.center{text-align:center; margin-left:auto; margin-right:auto}
h3{font-size:19px; margin:0 0 9px; color:var(--navy)}
.rule{width:64px; height:4px; background:var(--humanus); border-radius:3px; margin:0 0 22px}
.rule.center{margin-left:auto; margin-right:auto}

.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}

.card{background:#fff; border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow); border:1px solid var(--line)}
.card.pad0{padding:0; overflow:hidden}
.card .body{padding:22px 24px 26px}
.card h3{margin-top:0}
.card p{margin:0 0 10px; font-size:15px; color:#3d464d}
.card p:last-child{margin-bottom:0}

/* cartões coloridos por produto (padrão da Central Humanus) */
.pcard{border-radius:var(--radius); padding:26px; color:#fff; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:186px}
.pcard h3{color:#fff; margin:0 0 8px; font-size:21px}
.pcard p{color:rgba(255,255,255,.93); font-size:14.5px; margin:0 0 14px}
.pcard .go{margin-top:auto; font-weight:600; color:#fff; font-size:14.5px}
.pcard:hover{text-decoration:none; transform:translateY(-3px); transition:transform .2s}
.f-med {background:linear-gradient(135deg,#2878A0,#1d5a79)}
.f-derm{background:linear-gradient(135deg,#F06400,#c25101)}
.f-cel {background:linear-gradient(135deg,#14A08C,#0e7a6a)}
.f-mark{background:linear-gradient(135deg,#8C288C,#6d1f6d)}
.f-ciencia{background:linear-gradient(135deg,#E8792B,#c25e12)}
.f-navy{background:linear-gradient(135deg,#1F4E5F,#163A46)}

/* números */
.stats{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{background:#fff; border-radius:var(--radius); padding:28px 20px; text-align:center;
  border:1px solid var(--line); box-shadow:var(--shadow)}
.stat b{display:block; font-size:38px; color:var(--humanus); line-height:1.1; font-weight:700}
.stat span{display:block; font-size:14px; color:var(--grey); margin-top:9px}

/* produto — ficha */
.produto{display:grid; gap:34px; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:center; padding:38px 0; border-bottom:1px solid var(--line)}
.produto:last-child{border-bottom:0}
.produto .marca{max-width:270px; margin-bottom:18px}
.produto .foto{background:#fff; border-radius:var(--radius); padding:18px;
  border:1px solid var(--line); box-shadow:var(--shadow)}
.tagline{font-weight:600; color:var(--navy); font-size:17px; margin:0 0 12px}
ul.limpa{margin:0 0 18px; padding-left:20px}
ul.limpa li{margin-bottom:8px; font-size:15px; color:#3d464d}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.tag{background:var(--blueL); color:var(--navy); font-size:12.5px; padding:5px 11px;
  border-radius:999px; font-weight:600}
.tag.t{background:var(--tealL); color:var(--tealD)}
.tag.o{background:var(--orangeL); color:var(--orangeD)}
.tag.p{background:var(--purpleL); color:var(--purpleD)}

/* estudos científicos */
.estudo{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow)}
.estudo > summary{cursor:pointer; padding:20px 24px; list-style:none; display:block}
.estudo > summary::-webkit-details-marker{display:none}
.estudo > summary::after{content:"＋"; float:right; color:var(--humanus);
  font-size:20px; line-height:1; margin-left:12px}
.estudo[open] > summary::after{content:"−"}
.estudo > summary:hover{background:var(--blueL)}
.estudo .quem{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--humanus); font-weight:700; margin:0 0 6px}
.estudo .titulo{font-size:17.5px; color:var(--navy); font-weight:600; margin:0 0 5px;
  line-height:1.35}
.estudo .fonte{font-size:13.5px; color:var(--grey); margin:0}
.estudo .conteudo{padding:4px 24px 26px; border-top:1px solid var(--line)}
.estudo .conteudo h4{margin:20px 0 7px; color:var(--navy); font-size:15px;
  text-transform:uppercase; letter-spacing:.06em}
.estudo .conteudo p{font-size:15px; margin:0 0 10px; color:#3d464d}
.ficha{background:var(--blueL); border-left:4px solid var(--blue); padding:15px 18px;
  border-radius:0 9px 9px 0; margin:18px 0; font-size:14.5px}
.refbox{background:#f7f9fa; border:1px solid var(--line); border-radius:9px;
  padding:14px 17px; font-size:13.5px; color:var(--grey); margin-top:18px}

/* referências bibliográficas */
.bib{margin:0; padding:0; list-style:none}
.bib li{background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:0 9px 9px 0; padding:13px 17px; margin-bottom:9px; font-size:13.8px;
  color:#3d464d; line-height:1.55}

/* tabela */
table.dados{width:100%; border-collapse:collapse; background:#fff; font-size:14.5px;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
table.dados th{background:var(--navy); color:#fff; text-align:left; padding:13px 15px;
  font-size:13.5px; letter-spacing:.03em}
table.dados td{padding:12px 15px; border-top:1px solid var(--line); vertical-align:top}
table.dados tr:nth-child(even) td{background:#fbfcfd}
.tabela-rolagem{overflow-x:auto}

/* faixa de destaque */
.faixa{background:var(--navyD); color:#fff; padding:56px 0}
.faixa h2{color:#fff; margin:0 0 12px; font-size:clamp(22px,2.8vw,31px)}
.faixa p{color:#d6e5ea; max-width:66ch; margin:0 0 24px; font-size:16.5px}

/* contato */
.contato-item{display:flex; align-items:center; gap:15px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:19px 22px;
  box-shadow:var(--shadow)}
.contato-item .ico{width:46px; height:46px; border-radius:11px; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
  flex-shrink:0}
.contato-item span{display:block; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey)}
.contato-item b{font-size:16.5px; color:var(--ink)}

/* rodapé */
footer.site{background:var(--shell); color:#aab6bd; padding:52px 0 26px; font-size:14px}
footer.site h4{color:#fff; font-size:14px; margin:0 0 13px; letter-spacing:.06em;
  text-transform:uppercase}
footer.site a{color:#aab6bd; display:block; padding:4px 0}
footer.site a:hover{color:#fff}
footer.site .logo-rod{background:#fff; border-radius:10px; padding:11px 14px;
  display:inline-block; margin-bottom:16px}
footer.site .logo-rod img{height:42px}
.rodape-fim{border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:20px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px}
.aviso{background:#0b1117; color:#8d99a1; font-size:12.5px; padding:15px 0; text-align:center}

/* estatísticas dentro do estudo */
.estat{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:20px 0}
.estat div{border-radius:11px; padding:16px 14px; color:#fff; text-align:center}
.estat div b{display:block; font-size:26px; line-height:1.15; font-weight:700}
.estat div span{display:block; font-size:11.5px; margin-top:7px; letter-spacing:.05em;
  line-height:1.4; color:rgba(255,255,255,.94)}
.estat div:nth-child(3n+1){background:var(--orange)}
.estat div:nth-child(3n+2){background:var(--blue)}
.estat div:nth-child(3n+3){background:var(--navy)}
blockquote.pull{margin:20px 0; padding:16px 20px; border-left:4px solid var(--teal);
  background:var(--tealL); border-radius:0 9px 9px 0; font-size:16px; font-style:italic;
  color:var(--tealD)}
.destaque{background:var(--orangeL); border-left:4px solid var(--orange);
  padding:15px 18px; border-radius:0 9px 9px 0; margin:16px 0; font-size:15px}
/* alinha o +/− na mesma linha do título */
.estudo > summary{display:flex; align-items:flex-start; gap:14px; justify-content:space-between}
.estudo > summary::after{float:none; align-self:center}
.estudo > summary > div{flex:1; min-width:0}

/* ---------- menu mobile ---------- */
.hamburguer{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;
  border-radius:8px}
.hamburguer span{display:block; width:24px; height:2.5px; background:var(--ink);
  border-radius:2px; transition:transform .22s, opacity .22s}
.hamburguer:hover{background:var(--blueL)}

@media(max-width:860px){
  .hero{min-height:300px}
  header.site .wrap{flex-direction:row; align-items:center; flex-wrap:wrap}
  .hamburguer{display:flex}
  nav.main{display:none; width:100%; flex-direction:column; align-items:stretch;
    gap:0; padding:8px 0 4px; border-top:1px solid var(--line); margin-top:12px}
  #menu-toggle:checked ~ nav.main{display:flex}
  #menu-toggle:checked ~ .hamburguer span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  #menu-toggle:checked ~ .hamburguer span:nth-child(2){opacity:0}
  #menu-toggle:checked ~ .hamburguer span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .produto{grid-template-columns:1fr}
  nav.main > a, nav.main .drop > button{width:100%; text-align:left; padding:13px 12px;
    border-radius:8px; font-size:16px}
  nav.main > a.on{box-shadow:none; background:var(--blueL)}
  .drop{width:100%}
  .drop > button{display:block}
  .drop-menu{position:static; display:block; background:transparent; box-shadow:none;
    padding:0 0 6px}
  .drop-menu a{color:var(--grey); padding:11px 12px 11px 28px; font-size:15px}
  .drop-menu a:hover{background:var(--blueL); color:var(--ink)}
  .topbar .wrap{flex-direction:column; align-items:flex-start; gap:4px}
}

/* ===========================================================
   Central de Conteúdo — layout de duas colunas
   =========================================================== */
.central-layout{display:grid; grid-template-columns:308px minmax(0,1fr);
  gap:0; max-width:1420px; margin:0 auto; align-items:start}

.lateral{position:sticky; top:96px; align-self:start; max-height:calc(100vh - 110px);
  overflow-y:auto; padding:22px 16px 30px; border-right:1px solid var(--line)}
.busca-caixa{position:relative; margin-bottom:14px}
.busca-caixa input{width:100%; padding:12px 38px 12px 14px; border:1px solid var(--line);
  border-radius:10px; font:inherit; font-size:14.5px; background:#fff}
.busca-caixa input:focus{outline:2px solid var(--humanus); outline-offset:1px; border-color:transparent}
.limpa-busca{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0;
  background:none; font-size:21px; color:var(--grey); cursor:pointer; padding:2px 8px; line-height:1}
.limpa-busca:hover{color:var(--humanus)}

.mhome{width:100%; text-align:left; padding:11px 14px; border:1px solid var(--line);
  background:#fff; border-radius:10px; font:inherit; font-size:14.5px; cursor:pointer;
  margin-bottom:14px; color:var(--navy); font-weight:600}
.mhome:hover{background:var(--blueL)}

.mgrupo{margin-bottom:9px; border-radius:11px; overflow:hidden}
.mcat{width:100%; text-align:left; border:0; background:transparent; cursor:pointer;
  font:inherit; color:#fff; padding:13px 15px; display:block; position:relative;
  line-height:1.3; -webkit-appearance:none; appearance:none}
.mcat:hover{background:rgba(255,255,255,.10)}
.mcat small{display:block; font-size:11px; opacity:.9; margin-top:4px; font-weight:400;
  line-height:1.4}
.mcat .seta{position:absolute; right:13px; top:14px; transition:transform .2s; font-size:13px}
.mgrupo.aberto .mcat .seta{transform:rotate(180deg)}
.mgrupo .msub{display:none; background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 11px 11px}
.mgrupo.aberto .msub{display:block}
.mitem{display:block; width:100%; text-align:left; border:0; background:none; font:inherit;
  font-size:13.6px; padding:10px 15px; cursor:pointer; color:#3d464d; line-height:1.4;
  border-bottom:1px solid #f0f4f6}
.mitem:last-child{border-bottom:0}
.mitem:hover{background:var(--blueL); color:var(--ink)}
.mitem.atual{background:var(--blueL); color:var(--humanus); font-weight:600;
  box-shadow:inset 3px 0 0 var(--humanus)}

.palco{padding:26px 30px 60px; min-width:0}
.trilha{font-size:12.5px; color:var(--grey); margin-bottom:18px;
  text-transform:uppercase; letter-spacing:.06em}
.trilha b{color:var(--ink)}
.trilha span{margin:0 6px}

.pg{display:none}
.pg.ativo{display:block}

/* capa do índice */
.capa-central{background:linear-gradient(135deg,var(--navy),var(--navyD)); color:#fff;
  border-radius:16px; padding:38px 34px; margin-bottom:34px}
.capa-central h1{margin:6px 0 12px; font-size:clamp(25px,3.3vw,35px); line-height:1.18}
.capa-central p{color:#d7e6ec; max-width:70ch; margin:0; font-size:16px}
.capa-central .kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:#9fc7d6; margin:0; font-weight:600}

/* índice em grade */
.ibloco{margin-bottom:36px}
.ititulo{font-size:17px; color:#fff; margin:0 0 14px; padding:12px 17px; border-radius:11px;
  line-height:1.3}
.ititulo small{display:block; font-size:11.5px; opacity:.92; font-weight:400; margin-top:3px}
.igrade{display:grid; gap:13px; grid-template-columns:repeat(auto-fill,minmax(266px,1fr))}
.icard{position:relative; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; cursor:pointer; font:inherit; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px; transition:transform .16s, box-shadow .16s}
.icard:hover{transform:translateY(-2px); box-shadow:var(--shadowUp); border-color:var(--blue)}
.icard b{font-size:15px; color:var(--navy); line-height:1.35}
.icard span{font-size:12.8px; color:var(--grey); line-height:1.45}
.icard .tem-pdf{font-size:11px; font-style:normal; color:var(--tealD); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; margin-top:2px}

/* prévia da imagem relacionada, ao passar o mouse no card do estudo */
.icard-prev{position:absolute; left:50%; bottom:100%; transform:translate(-50%,6px);
  width:220px; height:140px; object-fit:cover; border-radius:10px; border:3px solid #fff;
  box-shadow:0 14px 30px rgba(15,30,40,.28); margin-bottom:10px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:20}
.icard:hover .icard-prev, .icard:focus-visible .icard-prev{opacity:1; transform:translate(-50%,0)}
@media(max-width:640px){.icard-prev{display:none}}

/* resultados da busca */
.resultados{margin-bottom:26px}
.resultados .quantos{font-size:14px; color:var(--grey); margin:0 0 14px}
.resultados .nada{background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:22px; color:var(--grey)}
.rcard{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--humanus); border-radius:0 12px 12px 0; padding:15px 18px;
  margin-bottom:10px; cursor:pointer; font:inherit; box-shadow:var(--shadow)}
.rcard:hover{background:var(--blueL)}
.rcard b{display:block; font-size:15.5px; color:var(--navy); margin-bottom:4px; line-height:1.35}
.rcard span{display:block; font-size:13px; color:var(--grey); margin-bottom:6px}
.rcard em{display:block; font-size:13px; color:#59636b; font-style:normal; line-height:1.5}
.rcard mark{background:#ffe9b0; color:inherit; padding:0 2px; border-radius:3px}

/* visualizador de PDF */
.conteudo-central .doc-obj{min-height:auto}
.conteudo-central .doc-obj.montado{height:min(78vh,860px)}
.conteudo-central .doc-obj iframe{width:100%; height:100%; min-height:520px; border:0;
  border-radius:0 0 12px 12px; display:block}
.conteudo-central .doc-ph{padding:34px 20px; text-align:center; color:var(--grey)}
.conteudo-central .doc-ph button{margin-top:12px; padding:11px 22px; border:0; cursor:pointer;
  background:var(--navy); color:#fff; border-radius:9px; font:inherit; font-weight:600}
.conteudo-central .doc-ph button:hover{background:var(--navyD)}
.conteudo-central .doc-dl, .conteudo-central .doc-open{display:inline-block; cursor:pointer;
  text-decoration:none}

/* lightbox */
.lb{position:fixed; inset:0; background:rgba(10,16,22,.94); z-index:900; display:flex;
  align-items:center; justify-content:center; padding:26px; cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:100%; max-height:92vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-barra{position:absolute; top:16px; right:22px; display:flex; align-items:center; gap:10px}
.lb-baixar{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14);
  color:#fff; border:0; font:inherit; font-size:14px; font-weight:600; padding:0 18px; height:46px;
  border-radius:23px; cursor:pointer; text-decoration:none; white-space:nowrap}
.lb-baixar:hover{background:rgba(255,255,255,.28); text-decoration:none; color:#fff}
.lb-baixar[hidden]{display:none}
.lb-fecha{background:rgba(255,255,255,.14); color:#fff;
  border:0; font-size:30px; line-height:1; width:46px; height:46px; border-radius:50%;
  cursor:pointer; flex-shrink:0}
.lb-fecha:hover{background:rgba(255,255,255,.28)}
.conteudo-central img{cursor:zoom-in}

.aviso-flutuante{position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--shell); color:#fff; padding:13px 24px; border-radius:10px; z-index:950;
  font-size:14.5px; box-shadow:var(--shadowUp); transition:opacity .5s}
.aviso-flutuante.some{opacity:0}

/* esconde o "x" nativo do input[type=search] — usamos o nosso */
.busca-caixa input::-webkit-search-cancel-button,
.busca-caixa input::-webkit-search-decoration{-webkit-appearance:none; appearance:none}

/* botão que abre o índice lateral no celular */
.abre-indice{display:none; width:100%; align-items:center; justify-content:space-between;
  padding:12px 15px; border:1px solid var(--line); background:#fff; border-radius:10px;
  font:inherit; font-size:15px; font-weight:600; color:var(--navy); cursor:pointer}
.abre-indice .seta{transition:transform .2s; font-size:13px}
.lateral.aberta .abre-indice .seta{transform:rotate(180deg)}

@media(max-width:980px){
  .central-layout{grid-template-columns:1fr}
  .lateral{position:static; max-height:none; border-right:0;
    border-bottom:1px solid var(--line); padding:14px 20px 16px}
  .palco{padding:18px 20px 50px}
  .igrade{grid-template-columns:1fr}
  .capa-central{padding:28px 22px}
  .conteudo-central .doc-obj.montado{height:70vh}
  .abre-indice{display:flex}
  .lateral .lateral-lista{display:none; margin-top:12px}
  .lateral.aberta .lateral-lista{display:block}
}

/* caixa de etapa do tratamento — ficha de produto */
.etapa-box{background:var(--blueL); border-radius:12px; padding:16px 18px; margin:0 0 18px}
.etapa-box .rotulo{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); font-weight:700; margin:0 0 4px}
.etapa-box .nome{font-size:16.5px; font-weight:700; color:var(--navy); margin:0 0 8px}
.etapa-box .quando{font-size:14px; color:#3d464d; margin:0 0 12px; line-height:1.5}
.etapa-box .medidas{display:flex; gap:10px; flex-wrap:wrap}
.etapa-box .medida{background:#fff; border-radius:8px; padding:8px 13px; flex:1; min-width:130px}
.etapa-box .medida b{display:block; font-size:13.5px; color:var(--ink)}
.etapa-box .medida span{display:block; font-size:11px; color:var(--grey);
  text-transform:uppercase; letter-spacing:.05em; margin-top:2px}
.produto.derm-etapa .etapa-box{background:var(--orangeL)}
.produto.cel-etapa .etapa-box{background:var(--tealL)}
.produto.mark-etapa .etapa-box{background:var(--purpleL)}
.produto.derm-etapa .etapa-box .rotulo, .produto.derm-etapa .etapa-box .nome{color:var(--orangeD)}
.produto.cel-etapa .etapa-box .rotulo, .produto.cel-etapa .etapa-box .nome{color:var(--tealD)}
.produto.mark-etapa .etapa-box .rotulo, .produto.mark-etapa .etapa-box .nome{color:var(--purpleD)}