/* ============================================================
   BIOMA — folha de estilo exclusiva de empresadededetização.online
   Tema claro, tipografia serifada, faixas alternadas. HTML+CSS puro.
   ============================================================ */
:root{
  --papel:#faf8f3; --papel2:#f2eee4; --tinta:#1b2a21; --tinta2:#4a5c51;
  --tinta3:#7c8c81; --linha:#ddd6c7; --mata:#1d6b43; --mata-esc:#12452c;
  --mel:#c8871b; --terra:#9a4a21; --alerta:#b3261e;
  --raio:4px; --larg:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:400 17.5px/1.7 Georgia,"Times New Roman",serif}
.faixa{width:min(100% - 34px,var(--larg));margin-inline:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--mata);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--mata-esc)}
:focus-visible{outline:3px solid var(--mel);outline-offset:2px}

/* tipografia */
h1,h2,h3,h4{font-family:Georgia,serif;font-weight:700;line-height:1.22;margin:0 0 .55em;
  color:var(--tinta)}
h1{font-size:clamp(31px,4.6vw,48px);letter-spacing:-.5px}
h2{font-size:clamp(25px,3.2vw,34px)}
h3{font-size:clamp(20px,2.3vw,23px)}
h4{font-size:18px}
p{margin:0 0 1.15em}
.sub{font-size:clamp(17.5px,1.9vw,20px);color:var(--tinta2);max-width:64ch;font-style:italic}
.olho{font-family:"Segoe UI",Arial,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--mel);margin:0 0 12px;display:block}
.sans{font-family:"Segoe UI",Roboto,Arial,sans-serif}

/* topo */
.aviso{background:var(--mata-esc);color:#eaf4ee;font-family:"Segoe UI",Arial,sans-serif;
  font-size:14px}
.aviso .faixa{display:flex;gap:16px;justify-content:center;align-items:center;
  min-height:40px;flex-wrap:wrap;text-align:center}
.aviso a{color:#ffd98a}
header.cabeca{background:var(--papel);border-bottom:2px solid var(--tinta);position:sticky;
  top:0;z-index:30}
.cabeca .faixa{display:flex;align-items:center;gap:16px;min-height:76px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta)}
.logo img{width:46px;height:46px;object-fit:contain}
.logo strong{display:block;font-size:17.5px;letter-spacing:-.3px;line-height:1.1}
.logo em{display:block;font-style:normal;font-family:"Segoe UI",Arial,sans-serif;font-size:10.5px;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--tinta3)}
.navega{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;align-items:center;
  font-family:"Segoe UI",Arial,sans-serif}
.navega a{font-size:14px;font-weight:600;color:var(--tinta2);text-decoration:none;
  padding:9px 11px;border-bottom:3px solid transparent}
.navega a:hover{color:var(--mata);border-bottom-color:var(--linha)}
.navega a[aria-current="page"]{color:var(--mata);border-bottom-color:var(--mata)}
.btzap{background:var(--mata);color:#fff !important;padding:11px 17px !important;
  border-radius:var(--raio);border:0 !important;font-weight:700 !important}
.btzap:hover{background:var(--mata-esc)}

/* herói */
.abertura{background:var(--papel2);border-bottom:1px solid var(--linha);padding:58px 0}
.abertura .faixa{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.botoes{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px;
  font-family:"Segoe UI",Arial,sans-serif}
.bo{display:inline-block;padding:14px 24px;border-radius:var(--raio);font-weight:700;
  font-size:16px;text-decoration:none;border:2px solid var(--mata)}
.bo-p{background:var(--mata);color:#fff}
.bo-p:hover{background:var(--mata-esc);color:#fff}
.bo-s{background:transparent;color:var(--mata)}
.bo-s:hover{background:rgba(29,107,67,.09);color:var(--mata-esc)}
.marcas{list-style:none;display:flex;gap:22px;flex-wrap:wrap;padding:0;margin:0;
  font-family:"Segoe UI",Arial,sans-serif;font-size:13.5px;color:var(--tinta3)}
.marcas li::before{content:"✓ ";color:var(--mata);font-weight:700}

/* bandas alternadas */
.banda{padding:56px 0;border-bottom:1px solid var(--linha)}
.banda.clara{background:var(--papel2)}
.banda.escura{background:var(--mata-esc);color:#e4efe8;border-bottom:0}
.banda.escura h2,.banda.escura h3{color:#fff}
.banda.escura a{color:#ffd98a}
.banda.escura .sub{color:#bcd4c6}

/* conteúdo com coluna lateral */
.duas{display:grid;grid-template-columns:1fr 290px;gap:44px;align-items:start}
.lado{position:sticky;top:98px;font-family:"Segoe UI",Arial,sans-serif;font-size:14.5px}
.lado .caixa{border:1px solid var(--linha);background:var(--papel);padding:20px;
  margin-bottom:18px;border-radius:var(--raio)}
.lado h4{font-family:"Segoe UI",Arial,sans-serif;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tinta3);margin-bottom:12px}
.lado ul{list-style:none;padding:0;margin:0}
.lado li{padding:5px 0;border-bottom:1px dotted var(--linha)}
.lado li:last-child{border:0}

/* fichas (cartões) */
.fichas{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.f2{grid-template-columns:repeat(2,1fr)}
.f3{grid-template-columns:repeat(3,1fr)}
.f4{grid-template-columns:repeat(4,1fr)}
.ficha{background:var(--papel);padding:24px;transition:background .18s}
.ficha:hover{background:var(--papel2)}
.ficha h3,.ficha h4{margin-bottom:.35em}
.ficha p{font-size:15.5px;color:var(--tinta2);margin:0}
.ficha a{font-family:"Segoe UI",Arial,sans-serif;font-size:14px;font-weight:700}
.rotulo{display:inline-block;font-family:"Segoe UI",Arial,sans-serif;font-size:10.5px;
  font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--terra);
  margin-bottom:10px}
.rotulo.v{color:var(--mata)}

/* texto */
.texto{max-width:72ch}
.texto h2{margin-top:1.7em}
.texto ul,.texto ol{color:var(--tinta2)}
.texto li{margin-bottom:.45em}
.nota{border-left:4px solid var(--mel);background:#fdf6e7;padding:18px 22px;margin:28px 0;
  color:var(--tinta2)}
.perigo{border-left:4px solid var(--alerta);background:#fdeeed;padding:18px 22px;margin:28px 0;
  color:var(--tinta2)}
.etapas{list-style:none;counter-reset:e;padding:0;margin:28px 0}
.etapas li{counter-increment:e;display:grid;grid-template-columns:46px 1fr;gap:16px;
  padding:16px 0;border-top:1px solid var(--linha)}
.etapas li::before{content:counter(e);font-family:"Segoe UI",Arial,sans-serif;font-size:26px;
  font-weight:800;color:var(--linha);line-height:1}
.etapas strong{display:block;margin-bottom:3px}
.etapas span{color:var(--tinta2);font-size:16px}

/* tabela */
table.dados{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px;
  font-family:"Segoe UI",Arial,sans-serif}
table.dados caption{text-align:left;font-size:13.5px;color:var(--tinta3);padding-bottom:9px}
table.dados th,table.dados td{text-align:left;padding:12px 14px;border:1px solid var(--linha)}
table.dados th{background:var(--papel2);font-size:12.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--tinta2)}

/* perguntas */
.perguntas details{border-bottom:1px solid var(--linha);padding:4px 0}
.perguntas summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"▾";color:var(--mata);font-size:15px;transition:transform .2s}
.perguntas details[open] summary::after{transform:rotate(180deg)}
.perguntas p{color:var(--tinta2);font-size:16.5px;padding-bottom:8px;margin:0 0 .8em}

/* listas de links */
.indice{columns:3;column-gap:30px;font-family:"Segoe UI",Arial,sans-serif;font-size:14.5px}
.indice a{display:block;break-inside:avoid;padding:5px 0;color:var(--tinta2);
  text-decoration:none;border-bottom:1px dotted transparent}
.indice a:hover{color:var(--mata);border-bottom-color:var(--mata)}
.pilulas{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0;
  font-family:"Segoe UI",Arial,sans-serif}
.pilulas a{font-size:13.5px;padding:7px 14px;border:1px solid var(--linha);
  border-radius:30px;color:var(--tinta2);text-decoration:none;background:var(--papel)}
.pilulas a:hover{border-color:var(--mata);color:var(--mata);background:#fff}

/* trilha */
.trilha{font-family:"Segoe UI",Arial,sans-serif;font-size:13px;color:var(--tinta3);
  padding:16px 0;border-bottom:1px solid var(--linha)}
.trilha ol{list-style:none;display:flex;gap:9px;flex-wrap:wrap;padding:0;margin:0}
.trilha li::after{content:"/";margin-left:9px;color:var(--linha)}
.trilha li:last-child::after{content:""}
.trilha a{color:var(--tinta3)}

/* convite */
.convite{background:var(--mata-esc);color:#e4efe8;padding:44px;text-align:center;
  border-radius:var(--raio);margin:48px 0}
.convite h2{color:#fff}
.convite p{color:#bcd4c6;max-width:58ch;margin-inline:auto}
.convite .bo-s{color:#ffd98a;border-color:#ffd98a}
.convite .bo-p{background:#ffd98a;color:var(--mata-esc);border-color:#ffd98a}

/* rodapé */
footer.rodape{background:var(--tinta);color:#c8d3cc;padding:48px 0 24px;
  font-family:"Segoe UI",Arial,sans-serif;font-size:14.5px}
.rodape .quatro{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.rodape h4{color:#fff;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:8px}
.rodape a{color:#c8d3cc;text-decoration:none}
.rodape a:hover{color:#ffd98a;text-decoration:underline}
.rodape .base{border-top:1px solid #35443b;margin-top:32px;padding-top:18px;font-size:13px;
  color:#8b9a92;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* atalho fixo */
.atalho{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  font-family:"Segoe UI",Arial,sans-serif}
.atalho a{flex:1;text-align:center;padding:15px 8px;font-weight:700;text-decoration:none;
  font-size:15px}
.atalho .z{background:var(--mata);color:#fff}
.atalho .l{background:var(--mel);color:#2a1c05}

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

/* utilidades */
.meio{text-align:center}
.mini{font-size:13.5px;color:var(--tinta3);font-family:"Segoe UI",Arial,sans-serif}
.salto{position:absolute;left:-9999px;background:var(--mel);color:#2a1c05;padding:10px 18px;
  font-weight:700;z-index:99}
.salto:focus{left:0;top:0}
figure{margin:28px 0}
figure img{border:1px solid var(--linha);border-radius:var(--raio)}
figcaption{font-family:"Segoe UI",Arial,sans-serif;font-size:13.5px;color:var(--tinta3);
  padding-top:8px;border-left:3px solid var(--mel);padding-left:11px;margin-top:9px}

@media (max-width:1000px){
  .abertura .faixa{grid-template-columns:1fr;gap:32px}
  .duas{grid-template-columns:1fr}
  .lado{position:static}
  .f4{grid-template-columns:repeat(2,1fr)}
  .indice{columns:2}
  .rodape .quatro{grid-template-columns:1fr 1fr}
}
@media (max-width:740px){
  body{font-size:17px}
  .navega{width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .navega a{white-space:nowrap}
  .f2,.f3,.f4{grid-template-columns:1fr}
  .indice{columns:1}
  .banda{padding:40px 0}
  .convite{padding:28px 20px}
  .rodape .quatro{grid-template-columns:1fr}
  .atalho{display:flex}
  body{padding-bottom:52px}
}
@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{.aviso,.navega,.atalho{display:none}body{background:#fff;color:#000}}