/* ===== Linguagem "rótulo": papel, tinta, ouro, letra de máquina ===== */
:root{--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--papel:#f4efe3}
.rotulo-pg{background:var(--papel)}
@media (prefers-color-scheme: dark){.rotulo-pg{background:#12110e}}
.rotulo-pg header.top{position:static;color:var(--fg);border-bottom:1.5px solid var(--fg)}
.rotulo-pg header.top .marca b{color:var(--gold)}
.rotulo-pg nav a{color:var(--muted)}
.rotulo-pg nav a[aria-current="page"],.rotulo-pg nav a:hover{color:var(--fg);border-color:var(--gold)}
.mono{font-family:var(--mono)}

/* Faixa de topo, como a borda de uma embalagem */
.faixa-topo{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-block:8px;border-bottom:1px dashed var(--line)}

/* ===== Abertura: manchete + prancha desenhada ===== */
.abre{padding:56px 0 40px}
.abre-grade{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.abre h1{font-size:clamp(2.3rem,4.6vw,4.2rem);line-height:1}
.abre h1 em{color:var(--gold)}
.abre .lead{margin-top:24px;color:var(--muted)}
.abre .lead em{color:var(--gold);font-style:italic;font-family:var(--display);font-size:1.15em}
.carimbo-fonte{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:4px}
.acoes-claro .btn-contorno{color:var(--fg);border-color:var(--fg)}

.prancha{position:relative}
.prancha svg{width:100%;height:auto;overflow:visible}
.prancha .traco{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.prancha .guia{fill:none;stroke:var(--fg);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.prancha .ponto{fill:var(--gold)}
.prancha .aro{fill:none;stroke:var(--gold);stroke-width:1}
.prancha .tag rect{fill:var(--surface);stroke:var(--fg);stroke-width:1.2}
.prancha .tag text{font-family:var(--mono);font-size:10.5px;fill:var(--fg)}
.prancha .tag .t1{font-size:9px;letter-spacing:.12em;fill:var(--gold);font-weight:700}
.prancha .legenda-prancha{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--muted)}
.js .prancha .traco{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 3s cubic-bezier(.4,.1,.2,1)}
.js .prancha.on .traco{stroke-dashoffset:0}
.js .prancha .tag,.js .prancha .guia,.js .prancha .ponto,.js .prancha .aro{opacity:0;transition:opacity .7s}
.js .prancha.on .tag,.js .prancha.on .guia,.js .prancha.on .ponto,.js .prancha.on .aro{opacity:1}
.js .prancha.on .g1 *{transition-delay:1.6s}.js .prancha.on .g2 *{transition-delay:2.1s}
.js .prancha.on .g3 *{transition-delay:2.6s}.js .prancha.on .g4 *{transition-delay:3.1s}
.prancha.on .aro{animation:aro 2.4s ease-out 3.4s infinite}
@keyframes aro{0%{r:4;opacity:.9}100%{r:16;opacity:0}}

/* ===== Faixa corrente das resoluções da ANVISA ===== */
.fita{background:var(--tinta);color:#f1ece2;overflow:hidden;border-block:1.5px solid var(--tinta)}
.fita-trilho{display:flex;width:max-content;animation:fita 48s linear infinite}
.fita:hover .fita-trilho{animation-play-state:paused}
.fita span{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;white-space:nowrap;padding:14px 28px;display:inline-flex;gap:12px;align-items:center}
.fita span b{color:var(--ouro);font-weight:600}
.fita span::after{content:"◆";color:var(--ouro);margin-left:28px}
@keyframes fita{to{transform:translateX(-50%)}}

/* ===== Informação do seu rosto (rótulo) ===== */
.info-grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.info{background:var(--surface);color:var(--fg);border:2.5px solid var(--fg);padding:16px 18px;max-width:420px;font-family:var(--body);box-shadow:10px 10px 0 var(--gold)}
.info h3{font-family:var(--body);font-weight:800;font-size:1.65rem;letter-spacing:-.01em;line-height:1;border-bottom:10px solid var(--fg);padding-bottom:8px;margin:0}
.info .porcao{font-size:.85rem;border-bottom:4px solid var(--fg);padding:6px 0}
.info dl{margin:0}
.info dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--fg);padding:7px 0;font-size:.92rem}
.info dt{font-weight:700}
.info dd{margin:0;font-family:var(--mono);font-size:.85rem;text-align:right}
.info .grossa{border-bottom:4px solid var(--fg)}
.info .rodape-info{font-size:.72rem;color:var(--muted);padding-top:8px;line-height:1.4}
.js .info dl div{opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.js .info.on dl div{opacity:1;transform:none}
.js .info.on dl div:nth-child(2){transition-delay:.15s}.js .info.on dl div:nth-child(3){transition-delay:.3s}
.js .info.on dl div:nth-child(4){transition-delay:.45s}.js .info.on dl div:nth-child(5){transition-delay:.6s}
.js .info.on dl div:nth-child(6){transition-delay:.75s}.js .info.on dl div:nth-child(7){transition-delay:.9s}

/* ===== Carimbos ===== */
.carimbos{display:flex;flex-wrap:wrap;gap:22px 34px;justify-content:center;padding:20px 0}
.carimbo{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1;color:var(--ouro);border:3px double var(--ouro);border-radius:10px;padding:12px 26px;transform:rotate(-4deg);letter-spacing:.02em}
.carimbo:nth-child(2){transform:rotate(3deg);color:#f1ece2;border-color:#f1ece2}
.carimbo:nth-child(3){transform:rotate(-2deg)}
.js .carimbo{opacity:0;scale:1.6;transition:opacity .35s,scale .35s cubic-bezier(.3,1.6,.5,1)}
.js .carimbos.on .carimbo{opacity:1;scale:1}
.js .carimbos.on .carimbo:nth-child(2){transition-delay:.35s}.js .carimbos.on .carimbo:nth-child(3){transition-delay:.7s}
.nega{color:rgba(241,236,226,.65);text-align:center;margin:26px auto 0;font-family:var(--mono);font-size:.85rem;letter-spacing:.04em}

/* ===== Produtos como etiquetas penduradas ===== */
.etiquetas{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;padding-top:30px}
.etq{position:relative;background:var(--surface);border:1.5px solid var(--fg);border-radius:6px 6px 22px 22px;padding:52px 34px 32px;transform:rotate(-1.5deg);transition:transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .5s;box-shadow:6px 8px 0 rgba(0,0,0,.08)}
.etq:nth-child(2){transform:rotate(1.5deg)}
.etq:hover{transform:rotate(0) translateY(-6px);box-shadow:10px 14px 0 var(--gold)}
.etq::before{content:"";position:absolute;top:16px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:1.5px solid var(--fg);background:var(--papel)}
.etq::after{content:"";position:absolute;top:-34px;left:50%;width:1.5px;height:52px;background:var(--fg);transform:rotate(18deg);transform-origin:bottom}
.etq .codigo{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted);display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:16px}
.etq h3{font-size:2.3rem;line-height:1}
.etq .papel{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:6px 0 14px}
.etq p{color:var(--muted)}
.barras-cod{display:flex;gap:2px;height:34px;margin-top:20px}
.barras-cod i{display:block;background:var(--fg)}
.etq a.mais{font-weight:700;text-decoration:none;display:inline-flex;gap:8px}
.etq a.mais::after{content:"→"}

/* ===== Origem ===== */
.origem{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;max-width:900px}
.origem .num-grande{font-family:var(--display);font-size:clamp(5rem,12vw,9rem);line-height:.8;color:var(--gold)}
.origem p{font-size:1.15rem}

/* ===== Rodapé como verso da embalagem ===== */
.verso{background:var(--papel);color:var(--fg);border-top:1.5px solid var(--fg);font-family:var(--mono);font-size:.8rem}
@media (prefers-color-scheme: dark){.verso{background:#12110e}}
.verso .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:34px}
.verso b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.verso a{color:var(--fg)}

@media (prefers-reduced-motion: reduce){
  .fita-trilho{animation:none}
  .js .prancha .traco{stroke-dashoffset:0;transition:none}
  .js .prancha .tag,.js .prancha .guia,.js .prancha .ponto,.js .info dl div,.js .carimbo{opacity:1;transform:none;scale:1;transition:none}
  .prancha.on .aro{animation:none}
}
@media (max-width:900px){
  .abre-grade,.info-grade,.etiquetas{grid-template-columns:1fr}
  .verso .wrap{grid-template-columns:1fr}
  .origem{grid-template-columns:1fr;gap:10px}
}
.js .etq.surge.on{transform:rotate(-1.5deg)}
.js .etq.surge.on:nth-child(2){transform:rotate(1.5deg)}
.js .etq.surge.on:hover{transform:rotate(0) translateY(-6px)}