/* ===========================================================
   PLANTA — folha exclusiva de desentupidoraindaiatubao.com.br
   Estética de prancha técnica. HTML + CSS puro.
   =========================================================== */
:root{
  --folha:#f4f6f8; --folha2:#e9edf2; --branco:#fff; --risco:#c9d4e0;
  --grafite:#16202b; --grafite2:#45556704; --txt:#1d2a37; --txt2:#55687c; --txt3:#8798ab;
  --cota:#0b63c5; --cota2:#e8f1fc; --marca:#d6202f; --ok:#0f8a5f; --aviso:#b26a00;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --l:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--txt);font:400 17px/1.65 var(--sans);
  background:var(--folha);
  background-image:linear-gradient(var(--risco) 1px,transparent 1px),
    linear-gradient(90deg,var(--risco) 1px,transparent 1px);
  background-size:52px 52px;background-attachment:fixed}
.pr{width:min(100% - 30px,var(--l));margin-inline:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--cota);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:3px solid var(--marca);outline-offset:2px}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.4px;color:var(--grafite)}
h1{font-size:clamp(29px,4.4vw,46px)}
h2{font-size:clamp(23px,3vw,32px)}
h3{font-size:clamp(19px,2.2vw,22px)}
h4{font-size:17px}
p{margin:0 0 1.05em}
.chamariz{font-size:clamp(17px,1.9vw,19.5px);color:var(--txt2);max-width:66ch}
.cod{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--cota);background:var(--cota2);border:1px solid #bcd6f2;padding:4px 10px;
  display:inline-block;margin-bottom:12px}
.cod.r{color:var(--marca);background:#fdeaec;border-color:#f5c2c7}

/* topo */
.tarja{background:var(--grafite);color:#dbe4ee;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.4px}
.tarja .pr{display:flex;gap:18px;justify-content:space-between;align-items:center;
  min-height:36px;flex-wrap:wrap;padding-block:5px}
.tarja a{color:#8fc4ff}
header.cab{background:var(--branco);border-bottom:2px solid var(--grafite);position:sticky;top:0;z-index:30}
.cab .pr{display:flex;align-items:center;gap:14px;min-height:70px;flex-wrap:wrap}
.selo{display:flex;align-items:center;gap:10px}
.selo img{width:42px;height:42px;object-fit:contain}
.selo b{display:block;font-size:16px;letter-spacing:-.3px;color:var(--grafite);line-height:1.1}
.selo span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--txt3)}
.rota{margin-left:auto;display:flex;gap:0;flex-wrap:wrap;align-items:center}
.rota a{font-size:13.5px;font-weight:600;color:var(--txt2);padding:8px 12px;
  border-left:1px solid var(--risco)}
.rota a:first-child{border-left:0}
.rota a:hover{color:var(--cota);background:var(--folha2);text-decoration:none}
.rota a[aria-current="page"]{color:var(--grafite);background:var(--folha2)}
.acao{background:var(--marca);color:#fff !important;border:0 !important;padding:10px 16px !important;
  font-weight:700 !important;margin-left:10px}
.acao:hover{background:#ab1824;text-decoration:none !important}

/* capa */
.capa{padding:52px 0;border-bottom:1px solid var(--risco)}
.capa .pr{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.bts{display:flex;gap:11px;flex-wrap:wrap;margin:24px 0 16px}
.bt{display:inline-block;padding:13px 22px;font-weight:700;font-size:15.5px;border:2px solid var(--grafite)}
.bt:hover{text-decoration:none}
.bt-a{background:var(--grafite);color:#fff}
.bt-a:hover{background:#000;color:#fff}
.bt-b{background:var(--branco);color:var(--grafite)}
.bt-b:hover{background:var(--folha2)}
.specs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--risco);border:1px solid var(--risco);font-family:var(--mono);font-size:12.5px}
.specs li{background:var(--branco);padding:10px 13px;color:var(--txt2)}
.specs b{color:var(--grafite);display:block;font-size:14px;font-family:var(--sans)}

/* blocos */
.bloco{padding:52px 0;border-bottom:1px solid var(--risco)}
.bloco.alt{background:var(--branco)}
.rotulo-bloco{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.rotulo-bloco .num{font-family:var(--mono);font-size:12px;color:var(--txt3);
  border:1px solid var(--risco);padding:3px 8px}

/* pranchas (cartões) */
.pranchas{display:grid;gap:14px}
.p2{grid-template-columns:repeat(2,1fr)}
.p3{grid-template-columns:repeat(3,1fr)}
.p4{grid-template-columns:repeat(4,1fr)}
.prancha{background:var(--branco);border:1px solid var(--risco);padding:20px;position:relative}
.prancha::before{content:"";position:absolute;left:-1px;top:-1px;width:10px;height:10px;
  border-left:2px solid var(--cota);border-top:2px solid var(--cota)}
.prancha:hover{border-color:var(--cota);box-shadow:0 2px 0 var(--cota)}
.prancha h3,.prancha h4{margin-bottom:.3em}
.prancha p{font-size:15px;color:var(--txt2);margin:0}
.prancha .ir{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:1px;text-transform:uppercase}

/* texto técnico */
.memo{max-width:74ch}
.memo h2{margin-top:1.6em;padding-bottom:7px;border-bottom:2px solid var(--grafite)}
.memo h3{margin-top:1.4em}
.memo ul,.memo ol{color:var(--txt2)}
.memo li{margin-bottom:.45em}
.obs{border:1px solid var(--cota);background:var(--cota2);padding:16px 20px;margin:26px 0;
  color:var(--txt2);position:relative}
.obs::before{content:"NOTA";position:absolute;top:-10px;left:14px;background:var(--cota);
  color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:2px;padding:2px 8px}
.risco-alto{border:1px solid var(--marca);background:#fdeaec;padding:16px 20px;margin:26px 0;
  color:var(--txt2);position:relative}
.risco-alto::before{content:"ATENÇÃO";position:absolute;top:-10px;left:14px;background:var(--marca);
  color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:2px;padding:2px 8px}
.seq{list-style:none;counter-reset:s;padding:0;margin:26px 0;border-top:1px solid var(--risco)}
.seq li{counter-increment:s;display:grid;grid-template-columns:58px 1fr;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--risco)}
.seq li::before{content:"0" counter(s);font-family:var(--mono);font-size:19px;color:var(--cota);
  font-weight:700}
.seq strong{display:block;margin-bottom:2px;color:var(--grafite)}
.seq span{color:var(--txt2);font-size:15.5px}

table.quadro{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;font-family:var(--sans)}
table.quadro caption{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--txt3);padding-bottom:8px}
table.quadro th,table.quadro td{text-align:left;padding:11px 13px;border:1px solid var(--risco)}
table.quadro th{background:var(--folha2);font-family:var(--mono);font-size:11.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--txt2);width:34%}

.qa details{border:1px solid var(--risco);background:var(--branco);margin-bottom:8px}
.qa summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none;position:relative;
  padding-left:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"?";position:absolute;left:16px;top:13px;width:20px;height:20px;
  background:var(--cota);color:#fff;font-family:var(--mono);font-size:12px;display:grid;
  place-items:center}
.qa details[open] summary{background:var(--folha2)}
.qa p{padding:14px 18px;margin:0;color:var(--txt2);font-size:15.5px}

.matriz{columns:3;column-gap:26px;font-size:14.5px}
.matriz a{display:block;break-inside:avoid;padding:4px 0;color:var(--txt2);
  border-bottom:1px dotted var(--risco)}
.matriz a:hover{color:var(--cota);text-decoration:none;border-bottom-color:var(--cota)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.tags a{font-family:var(--mono);font-size:12.5px;padding:6px 11px;background:var(--branco);
  border:1px solid var(--risco);color:var(--txt2)}
.tags a:hover{border-color:var(--cota);color:var(--cota);text-decoration:none}

.caminho{font-family:var(--mono);font-size:12px;color:var(--txt3);padding:12px 0;
  border-bottom:1px solid var(--risco);background:var(--branco)}
.caminho ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0}
.caminho li::after{content:"/";margin-left:8px;color:var(--risco)}
.caminho li:last-child::after{content:""}
.caminho a{color:var(--txt3)}

.carimbo{background:var(--grafite);color:#e6edf5;padding:38px;margin:44px 0;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.carimbo h2{color:#fff;margin-bottom:.3em}
.carimbo p{color:#a9bbcd;margin:0;max-width:52ch}
.carimbo .bt-a{background:var(--marca);border-color:var(--marca)}
.carimbo .bt-b{background:transparent;color:#fff;border-color:#55687c}

footer.rod{background:var(--branco);border-top:2px solid var(--grafite);padding:42px 0 22px;
  font-size:14.5px;color:var(--txt2)}
.rod .grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.rod h4{font-family:var(--mono);font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--txt3);margin-bottom:12px}
.rod ul{list-style:none;padding:0;margin:0}
.rod li{margin-bottom:7px}
.rod a{color:var(--txt2)}
.rod a:hover{color:var(--cota)}
.rod .legenda{border-top:1px solid var(--risco);margin-top:30px;padding-top:16px;
  font-family:var(--mono);font-size:11.5px;color:var(--txt3);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}

.fixo{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;gap:9px}
.fixo a{padding:13px 18px;font-weight:700;font-size:14.5px;border:2px solid var(--grafite);
  box-shadow:4px 4px 0 var(--grafite)}
.fixo .w{background:var(--ok);color:#fff}
.fixo .t{background:var(--branco);color:var(--grafite)}
.fixo a:hover{text-decoration:none;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--grafite)}

/* desenhos animados */
.desenho{width:100%;max-width:290px;margin-inline:auto;background:var(--branco);
  border:1px solid var(--risco);aspect-ratio:1}
.desenho.mini{max-width:120px}
@keyframes p-cai{0%{transform:translateY(0);opacity:0}14%{opacity:1}86%{opacity:1}
  100%{transform:translateY(58px);opacity:0}}
@keyframes p-sobe{0%{transform:translateY(0) scale(.5);opacity:0}26%{opacity:.9}
  100%{transform:translateY(-46px) scale(1.2);opacity:0}}
@keyframes p-gira{to{transform:rotate(360deg)}}
@keyframes p-pulsa{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes p-corre{to{stroke-dashoffset:-120}}
@keyframes p-bal{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes p-cresce{0%{transform:scaleY(.25);opacity:.4}100%{transform:scaleY(1);opacity:1}}
@keyframes p-vai{0%{transform:translateX(-48px);opacity:0}20%{opacity:1}80%{opacity:1}
  100%{transform:translateX(48px);opacity:0}}
@keyframes p-bate{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}
.d1{animation:p-cai 2.1s linear infinite}
.d2{animation:p-cai 2.1s linear infinite .5s}
.d3{animation:p-cai 2.1s linear infinite 1.05s}
.d4{animation:p-cai 2.1s linear infinite 1.6s}
.b1{animation:p-sobe 2.6s ease-out infinite}
.b2{animation:p-sobe 2.6s ease-out infinite .7s}
.b3{animation:p-sobe 2.6s ease-out infinite 1.4s}
.gi{animation:p-gira 7s linear infinite;transform-origin:center}
.gi-r{animation:p-gira 5s linear infinite reverse;transform-origin:center}
.pu{animation:p-pulsa 2.2s ease-in-out infinite}
.fl{stroke-dasharray:14 10;animation:p-corre 2.4s linear infinite}
.fl-l{stroke-dasharray:8 14;animation:p-corre 3.6s linear infinite}
.ba{animation:p-bal 3.2s ease-in-out infinite;transform-origin:center}
.cr{animation:p-cresce 3.4s ease-in-out infinite alternate;transform-origin:bottom}
.va{animation:p-vai 3s linear infinite}
.va2{animation:p-vai 3s linear infinite 1.5s}
.bt-up{animation:p-bate 1.9s ease-in-out infinite}
.es{animation:p-pulsa 2.8s ease-in-out infinite}
.es2{animation:p-pulsa 2.8s ease-in-out infinite 1.4s}

.cent{text-align:center}
.peq{font-family:var(--mono);font-size:12px;color:var(--txt3)}
.pula{position:absolute;left:-9999px;background:var(--cota);color:#fff;padding:10px 16px;
  font-weight:700;z-index:99}
.pula:focus{left:0;top:0}
figure{margin:24px 0}
figure img{border:1px solid var(--risco)}
figcaption{font-family:var(--mono);font-size:11.5px;color:var(--txt3);padding-top:7px}

@media (max-width:1000px){
  .capa .pr{grid-template-columns:1fr;gap:30px}
  .p4{grid-template-columns:repeat(2,1fr)}
  .matriz{columns:2}
  .rod .grade{grid-template-columns:1fr 1fr}
  .carimbo{grid-template-columns:1fr}
}
@media (max-width:740px){
  body{font-size:16.5px;background-size:34px 34px}
  .rota{width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap}
  .rota a{white-space:nowrap;border-left:0}
  .p2,.p3,.p4{grid-template-columns:1fr}
  .matriz{columns:1}
  .specs{grid-template-columns:1fr}
  .bloco{padding:38px 0}
  .rod .grade{grid-template-columns:1fr}
  .fixo a{padding:11px 14px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@media print{body{background:#fff}.tarja,.rota,.fixo{display:none}}