:root{
  --wave:#2980b9;--accent:#00e5c0;--blush:#d4748a;--ocean:#0d2d4e;--aqua:#41b8d5;
  --lima:#5CDB5C;--foam:#a8dce8;--white:#fff;--deep:#0a1628;--flamingo:#c9546e;
  --ig-cri:#330066;--ig-des:#ED4D65;--ig-mod:#FF9900;--ig-fav:#00796B;--ig-equ:#0097A7;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',Arial,sans-serif;color:var(--white);background:var(--deep);
  overflow-x:hidden;line-height:1.6;
}
h1,h2,h3,.brand{font-family:'Syne',sans-serif;font-weight:800}
img{max-width:100%;display:block}
section{position:relative;padding:5rem 1.25rem;overflow:hidden}
.wrap{width:100%;max-width:760px;margin:0 auto;position:relative;z-index:6}
.eyebrow{font-family:'Syne',sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.5rem;position:absolute;top:1.5rem;left:1.25rem}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--accent);display:inline-block}
h2{font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.2;margin-bottom:1.1rem}
h2 span{color:var(--accent)}
p{font-size:clamp(.92rem,2.4vw,1.02rem);color:var(--foam)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}
.reveal-delay-3{transition-delay:.36s}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;background:radial-gradient(120% 90% at 50% 0%,var(--ocean) 0%,var(--deep) 60%,var(--deep) 100%);
  padding:6rem 1.25rem 3rem;
}
.hero-bg-s{position:absolute;width:140vw;max-width:1100px;opacity:.05;top:50%;left:50%;transform:translate(-50%,-50%);filter:brightness(0) invert(1);pointer-events:none;z-index:0;animation:spinSlow 90s linear infinite}
@keyframes spinSlow{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-rainbow{position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--aqua),var(--blush),var(--accent),var(--wave),var(--aqua));background-size:200% 100%;animation:rainbowShift 12s linear infinite;z-index:2}
@keyframes rainbowShift{0%{background-position:0% 0}100%{background-position:200% 0}}
.hero-tagline{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1.3rem,6vw,1.9rem);letter-spacing:.01em;line-height:1.15;text-align:center;position:relative;z-index:2;animation:floaty 5s ease-in-out infinite}
.hero-tagline .l1{color:var(--aqua);display:block}
.hero-tagline .l2{color:var(--accent);display:block}
.hero-spacer{flex:1 1 auto;min-height:1.5rem}
.hero-row{display:flex;flex-direction:column;align-items:center}
.hero-logo{width:min(70vw,260px);margin:0 auto 1.5rem;filter:drop-shadow(0 2px 1px rgba(10,22,40,.8));position:relative;z-index:2}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-sub{margin-top:0;color:var(--white);opacity:1;max-width:420px;font-size:1rem;font-weight:500;position:relative;z-index:2}
.hero-credits{
  font-family:'Syne',sans-serif;font-size:.88rem;line-height:1.7;color:var(--foam);
  position:relative;z-index:2;background:none;border:none;
  text-decoration:none;display:inline-block;cursor:pointer;transition:color .25s,transform .25s;
}
.hero-credits:hover{color:var(--blush);transform:translateY(-2px)}
.hero-scroll{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--foam);opacity:.7;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:2;text-decoration:none;cursor:pointer;transition:opacity .2s}
.hero-scroll:hover{opacity:1}
.hero-scroll .arrow{width:16px;height:16px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);animation:bounceArrow 1.6s ease-in-out infinite}
@keyframes bounceArrow{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}

/* ---------- Par de setinhas (voltar/avançar), reaproveitado no rodapé de blocos individuais ---------- */
.section-nav{
  display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:1.75rem;
  position:absolute;left:0;right:0;bottom:1.5rem;z-index:2;
}
.funcionalidades .section-nav{bottom:1rem}
.section-nav-inline{position:static;margin-top:.9rem}
.section-scroll,.section-back{display:flex;text-decoration:none;cursor:pointer;opacity:.7;transition:opacity .2s}
.section-scroll:hover,.section-back:hover{opacity:1}
.section-scroll .arrow,.section-back .arrow{width:16px;height:16px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.section-scroll .arrow{transform:rotate(45deg);margin-top:-2px}
.section-back .arrow{transform:rotate(225deg);margin-top:2px}
.autora .section-scroll .arrow,.processo .section-scroll .arrow,.autora .section-back .arrow,.processo .section-back .arrow{border-right-color:var(--ocean);border-bottom-color:var(--ocean)}

/* ---------- SOBRE (sigla + resumo) ---------- */
.sobre{background:radial-gradient(120% 90% at 50% 0%,var(--ocean) 0%,var(--deep) 60%,var(--deep) 100%)}
.sigla-row{display:flex;flex-direction:column;gap:.4rem;margin-top:1.5rem;width:fit-content;margin-left:auto;margin-right:auto}
.sigla-item{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--foam)}
.sigla-l{width:2.2rem;height:1.6rem;flex-shrink:0}
.sobre p.reveal{margin-top:2.25rem}

/* ---------- ORIGEM (timeline) ---------- */
.origem{background:linear-gradient(180deg,var(--deep) 0%,#0c2036 100%)}
@media(min-width:900px){
  .origem{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:2rem;padding-bottom:1.4rem}
  .origem .timeline{margin-top:1.5rem}
  .origem .tl-item{padding-bottom:1rem}
}
.timeline{margin-top:2.25rem;display:flex;flex-direction:column;gap:0}
.tl-item{position:relative;padding:0 0 1.5rem 2.1rem;border-left:2px solid rgba(65,184,213,.25)}
.tl-item:last-child{border-color:transparent;padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-7px;top:.2rem;width:12px;height:12px;border-radius:50%;background:var(--tl-c,var(--accent));box-shadow:0 0 0 4px var(--tl-glow,rgba(0,229,192,.15))}
.tl-item:nth-child(1){--tl-c:var(--aqua);--tl-glow:rgba(65,184,213,.18)}
.tl-item:nth-child(2){--tl-c:var(--accent);--tl-glow:rgba(0,229,192,.15)}
.tl-item:nth-child(3){--tl-c:var(--blush);--tl-glow:rgba(212,116,138,.18)}
.tl-item:nth-child(4){--tl-c:var(--wave);--tl-glow:rgba(41,128,185,.2)}
.tl-item:nth-child(5){--tl-c:var(--lima);--tl-glow:rgba(92,219,92,.2)}
.tl-item b{font-family:'Syne',sans-serif;color:var(--white);font-size:.95rem;display:block;margin-bottom:.35rem}
.tl-item p{font-size:.95rem}

/* ---------- FUNCIONALIDADES (cards) ---------- */
.funcionalidades{background:var(--ocean)}
@media(min-width:900px){.funcionalidades{padding-top:2rem;padding-bottom:.9rem;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start}}
.feat-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.3rem}
@media(min-width:640px){.feat-grid{grid-template-columns:1fr 1fr}}
.feat-card{
  background:rgba(255,255,255,.035);border:1px solid rgba(65,184,213,.18);border-radius:14px;
  padding:1rem 1.4rem;transition:transform .3s,border-color .3s,box-shadow .3s;cursor:default;
}
.feat-card:hover,.feat-card:active{transform:translateY(-4px);border-color:rgba(0,229,192,.5);box-shadow:0 16px 32px rgba(0,0,0,.35),0 0 0 1px rgba(0,229,192,.1)}
.fc-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.feat-card .fc-icon{width:34px;height:34px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.feat-card h3{font-size:1rem;color:var(--accent);margin-bottom:0;flex:1;min-width:0}
.feat-card p{font-size:.85rem;margin:0}
.feat-card.wide{grid-column:1/-1}
.eci-teaser{
  margin-top:.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
  background:linear-gradient(120deg,rgba(0,229,192,.08),rgba(65,184,213,.05));border:1px dashed rgba(0,229,192,.35);
  border-radius:14px;padding:1.1rem 1.3rem;
}
.eci-teaser p{margin:0;font-size:1.02rem;color:var(--white)}
.eci-teaser b{color:var(--accent)}
.eci-teaser-iqa b{color:var(--aqua)}
.eci-teaser-iqa .btn-eci{background:var(--aqua);animation:none;box-shadow:none}
.eci-teaser-iet b{color:var(--lima)}
.eci-teaser-iet .btn-eci{background:var(--lima);animation:none;box-shadow:none}
.feat-card-wave h3{color:var(--aqua)}
.funcionalidades .feat-card h3{color:var(--white)}
.lp-inline-icon{width:16px;height:16px;display:inline-block;vertical-align:-2px;margin-right:.4rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
/* Botão de ação (.btn-eci): gradiente wave/accent com pulso lento */
.btn-eci{
  flex-shrink:0;font-family:'Syne',sans-serif;font-weight:800;font-size:.82rem;letter-spacing:.05em;
  background:linear-gradient(135deg,var(--wave),var(--accent));background-size:200% 200%;
  animation:calcPulse 14s ease-in-out infinite;
  color:var(--deep);border:none;border-radius:5px;padding:.7rem 1.3rem;
  cursor:pointer;transition:transform .25s,box-shadow .25s;white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,229,192,.3);
}
.btn-eci:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,229,192,.5)}
@keyframes calcPulse{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}

/* ---------- LAUDO E RELATÓRIO ---------- */
.laudo{background:linear-gradient(180deg,var(--ocean) 0%,#132c47 100%)}
.laudo h3{color:var(--white);font-weight:800}
.laudo .feat-grid{align-items:stretch}
.laudo .feat-card{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- ESCALA ECI INTERATIVA ---------- */
.eci-section{background:radial-gradient(120% 100% at 50% 100%,#132c47 0%,var(--deep) 60%)}
.eci-panel{margin-top:2rem}
.eci-desc{text-align:center;color:var(--deep);opacity:.85;font-size:.85rem;margin:.75rem 0 0;min-height:1.4em}
.eci-nota{text-align:center;color:var(--foam);opacity:.55;font-size:.72rem;max-width:420px;margin:.9rem auto 0;font-style:italic}

/* Card do gadget ECI */
.eci-gauge-card{
  position:relative;z-index:6;
  margin-top:1.75rem;background:linear-gradient(160deg, rgba(168,220,232,.90) 0%, rgba(232,247,251,.82) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;
  padding:1.5rem 1.25rem 1.1rem;box-shadow:0 20px 44px rgba(0,0,0,.28);
}
.eci-gauge-row{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.eci-gauge-wrap{width:100%;max-width:260px;position:relative;cursor:pointer}
.eci-gauge-svg{width:100%;height:auto;display:block;overflow:visible}
.ig-seg{filter:brightness(.78);transition:filter .3s}
.ig-seg.active{filter:brightness(1.08) drop-shadow(0 0 6px rgba(0,0,0,.15))}
.eci-gauge-pointer{fill:var(--deep)}
.eci-gauge-cap{fill:var(--deep)}
.eci-gauge-readout{text-align:center;margin-top:.6rem;position:relative;z-index:2}
.eci-gauge-cls{font-family:'Syne',sans-serif;font-weight:800;font-size:1.35rem;transition:color .3s;color:var(--deep)}
.eci-gauge-cls.eci-hint-text{font-weight:600;font-size:.8rem;opacity:.6;text-transform:none;letter-spacing:0}
.eci-gauge-side{width:100%}
.eci-gauge-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .6rem;font-size:.68rem}
.eci-legend-btn{
  display:flex;align-items:center;gap:.35rem;font-family:'Syne',sans-serif;font-weight:700;color:var(--deep);
  background:rgba(255,255,255,.35);border:1.5px solid transparent;border-radius:8px;
  padding:.4rem .6rem;cursor:pointer;transition:all .2s;
}
.eci-legend-btn:hover{background:rgba(255,255,255,.6)}
.eci-legend-btn.active{border-color:var(--pc)}
.eci-legend-btn i{width:9px;height:9px;border-radius:3px;display:inline-block}
@media(min-width:560px){
  .eci-gauge-row{flex-direction:row;justify-content:flex-start;align-items:center;gap:1.75rem}
  .eci-gauge-wrap{flex-shrink:0}
  .eci-gauge-legend{flex-direction:column;justify-content:center;flex-shrink:0}
  .eci-gauge-side{flex:1;min-width:0}
  .eci-desc{text-align:left}
  .eci-gauge-readout{text-align:left;margin-top:0;margin-bottom:.5rem}
}

/* ---------- VALIDAÇÃO ---------- */
.validacao{background:radial-gradient(120% 100% at 50% 100%,#132c47 0%,var(--deep) 60%)}
.val-stat{text-align:center;margin:2rem 0 1.5rem;background:linear-gradient(280deg,rgba(41,128,185,.70) 5%,rgb(13,45,78) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:1.75rem 1.5rem;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.val-num{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(3rem,14vw,4.5rem);color:var(--blush);line-height:1}
.val-legend{font-size:.85rem;color:var(--foam);margin-top:.4rem}
.val-refs{display:flex;gap:.6rem;align-items:flex-start;font-size:.78rem;color:var(--foam);opacity:.65;font-style:italic;border-top:1px solid rgba(65,184,213,.2);padding-top:1.1rem;margin-top:1rem}
.val-refs img{width:16px;height:16px;flex-shrink:0;margin-top:2px}

/* ---------- SOBRE A AUTORA ---------- */
.autora{background:var(--foam);color:var(--deep)}
.autora .eyebrow{color:var(--wave)}
.autora .eyebrow::before{background:var(--wave)}
.autora h2{color:var(--ocean)}
.autora h2 span{color:var(--aqua)}
.autora-foto{
  float:left;width:215px;height:215px;border-radius:50%;
  background-image:url('foto-autora.jpg');background-size:cover;background-position:center;
  margin:.25rem 1.25rem .75rem 0;border:3px solid var(--blush);
  box-shadow:0 0 0 6px rgba(212,116,138,.18),0 12px 28px rgba(10,22,40,.25);
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
@media(max-width:480px){
  .autora-foto{float:none;display:block;margin:0 auto .85rem}
}
.autora-bio{max-width:640px;color:#3d5568;text-align:justify}
.autora-bio + .autora-bio{margin-top:.65rem}
.autora-bio b{color:var(--deep)}

/* ---------- QUEM DESENVOLVEU (cards de créditos) ---------- */
.equipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem auto 0;max-width:760px}
.pessoa{
  background:linear-gradient(280deg,rgba(41,128,185,.70) 5%,rgb(13,45,78) 100%);
  border:1px solid rgba(65,184,213,.18);border-radius:8px;padding:1.1rem 1.3rem;
  position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(13,45,78,.15);
}
.pessoa::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.pessoa.andrezza::before{background:linear-gradient(90deg,var(--flamingo),var(--blush))}
.pessoa.lianderson::before{background:linear-gradient(90deg,var(--wave),var(--aqua))}
.pessoa.orientador::before{background:linear-gradient(90deg,var(--lima),var(--accent))}
.pessoa.full{grid-column:1/-1;justify-self:center;width:calc(50% + .5rem)}
.pessoa-name{font-family:'Syne',sans-serif;font-weight:700;font-size:1.5rem;margin-bottom:.2rem;color:var(--white)}
.pessoa-role{font-size:.82rem;color:var(--foam);letter-spacing:.03em}
.pessoa-fullname{font-size:.72rem;color:rgba(230,244,255,.5);margin-top:.15rem;font-style:italic}
.pessoa-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.pessoa-links a{
  font-family:'Syne',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--wave),var(--accent));background-size:200% 200%;
  animation:calcPulse 14s ease-in-out infinite;
  color:var(--deep);border:none;border-radius:5px;padding:.32rem .72rem;
  cursor:pointer;transition:transform .25s,box-shadow .25s;white-space:nowrap;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,229,192,.2);
}
.pessoa-links a:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,229,192,.35)}
@media(max-width:480px){.equipe-grid{grid-template-columns:1fr}.pessoa.full{grid-column:1;width:auto;justify-self:stretch}}

/* ---------- COMO FOI FEITA ---------- */
.processo{background:#d8ecf3;color:var(--deep)}
.processo .eyebrow{color:var(--wave)}
.processo .eyebrow::before{background:var(--wave)}
.processo h2{color:var(--ocean)}
.processo h2 span{color:var(--aqua)}
.processo p.reveal{max-width:640px;color:#3d5568}
.processo p.reveal + p.reveal{margin-top:1.25rem}
.tool-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.tool-badge{
  position:relative;font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;color:var(--wave);
  background:linear-gradient(160deg,rgba(168,220,232,.90) 0%,rgba(232,247,251,.82) 100%);
  border:1px solid rgba(41,128,185,.3);border-radius:8px;padding:.5rem .9rem;
  box-shadow:0 6px 16px rgba(13,45,78,.15);cursor:default;transition:transform .2s;
}
.tool-badge:hover{transform:translateY(-2px)}
.tool-badge[data-tooltip]{cursor:help}
.tool-badge[data-tooltip]::after{
  content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:220px;background:var(--deep);color:var(--foam);font-family:'DM Sans',sans-serif;
  font-weight:400;font-size:.72rem;line-height:1.4;text-align:center;padding:.55rem .75rem;border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5;
}
.tool-badge[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* Primeiro e último badge alinham o tooltip pela borda para não vazar da seção */
.tool-badge:first-child[data-tooltip]::after{left:0;transform:translateX(0) translateY(4px)}
.tool-badge:first-child[data-tooltip]:hover::after{transform:translateX(0) translateY(0)}
.tool-badge:last-child[data-tooltip]::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
.tool-badge:last-child[data-tooltip]:hover::after{transform:translateX(0) translateY(0)}

/* ---------- CONTATO ---------- */
.contato{background:linear-gradient(160deg,var(--deep) 0%,var(--ocean) 60%,var(--wave) 100%);text-align:center}
.contato h2{text-align:left}
.contato-links{margin-top:1.5rem;text-align:left}
.contato-line{font-size:1.02rem;color:var(--foam);margin-top:.75rem}
.contato-line a{color:var(--aqua);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(65,184,213,.4);transition:border-color .2s}
.contato-line a:hover{border-color:var(--aqua)}
.contato p.reveal:not(.contato-nota){margin-top:1rem}
.contato-nota{font-size:.72rem;line-height:1.6;color:var(--foam);opacity:.55;margin-top:2rem;text-align:left;margin-left:-.75rem}
.contato{padding-bottom:0}
footer{padding:1.25rem 1.25rem 1.5rem;text-align:center;background:var(--deep)}
.contato-footer{
  margin-left:-1.25rem;margin-right:-1.25rem;padding:1.25rem 1.25rem;
  background:linear-gradient(260deg,var(--ocean) 75%,rgba(65,184,213,.8) 100%);
  background-size:200% 200%;animation:gradientFlow 8s ease-in-out infinite alternate;
  position:relative;overflow:hidden;
}
.contato-footer::before{content:'';position:absolute;bottom:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--aqua),var(--blush),var(--accent),var(--aqua),var(--wave),var(--aqua));background-size:200% 100%;animation:rainbowShift 30s linear infinite}
@keyframes gradientFlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
footer p{font-size:.85rem;color:var(--foam)}
footer img{width:150px;opacity:.85}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 auto .5rem}
.footer-version{font-size:.75rem;color:var(--foam);letter-spacing:.05em}

.back-to-top{position:fixed;bottom:1.5rem;right:.5rem;width:32px;height:32px;border:none;border-radius:50%;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s 1s,transform .3s;z-index:999;filter:drop-shadow(0 3px 2px rgba(10,22,40,.35))}
.back-to-top.visible{opacity:.3;pointer-events:auto}
.back-to-top:hover{opacity:1;transform:translateY(-3px);filter:drop-shadow(0 3px 2px rgba(10,22,40,.35)) drop-shadow(0 0 6px rgba(0,229,192,.65));transition:opacity .2s,transform .25s}

.page-watermark{
  position:fixed;left:-8%;top:50%;transform:translateY(-50%);
  width:55vh;height:auto;opacity:0;
  filter:drop-shadow(0 0 40px rgba(65,184,213,.2));
  pointer-events:none;z-index:5;transition:opacity 1s ease;
}
.page-watermark.visible{opacity:.15}

/* ---------- NAVEGAÇÃO POR SEÇÕES (dot-nav com scrollspy) ---------- */
.dot-nav{
  position:fixed;right:.9rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.7rem;z-index:40;pointer-events:none;
  opacity:.4;transition:opacity .3s;
}
/* Acende ao usar (mouse ou teclado), durante a navegação e no hero; ocioso fica discreto */
.dot-nav:hover,.dot-nav:focus-within,.dot-nav:has(a:hover),.dot-nav.at-hero,.dot-nav.nav-active{opacity:1}
.dot-nav a{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;width:14px;height:14px;pointer-events:auto;text-decoration:none;--dc:var(--aqua)}
/* Trilho (pílula translúcida) e preenchimento de progresso atrás dos pontos */
.dot-nav::before,.dot-nav::after{content:'';position:absolute;right:3px;width:3px;border-radius:3px;pointer-events:none;z-index:-1}
.dot-nav::before{top:-7px;bottom:-7px;background:rgba(168,220,232,.22)}
.dot-nav::after{
  top:-7px;height:calc((100% + 14px) * var(--progress,0));
  background:linear-gradient(180deg,
    var(--aqua) 0%,var(--accent) 9.09%,var(--blush) 18.18%,var(--wave) 27.27%,var(--lima) 36.36%,
    var(--aqua) 45.45%,var(--accent) 54.55%,var(--blush) 63.64%,var(--wave) 72.73%,var(--lima) 81.82%,
    var(--aqua) 90.91%,var(--accent) 100%);
  background-size:100% var(--track-h,320px);background-repeat:no-repeat;background-position:top left;
  box-shadow:0 0 5px rgba(0,229,192,.3);transition:height .15s linear;
}
/* Cores dos pontos seguindo a paleta da timeline da "história" */
.dot-nav a:nth-child(5n+1){--dc:var(--aqua)}
.dot-nav a:nth-child(5n+2){--dc:var(--accent)}
.dot-nav a:nth-child(5n+3){--dc:var(--blush)}
.dot-nav a:nth-child(5n+4){--dc:var(--wave)}
.dot-nav a:nth-child(5n+5){--dc:var(--lima)}
.dot-nav a::before{
  content:'';width:9px;height:9px;border-radius:50%;background:var(--dc);opacity:.5;
  box-shadow:0 1px 3px rgba(10,22,40,.35);transition:transform .25s,opacity .25s,box-shadow .25s;
}
.dot-nav a.passed::before{opacity:1}
.dot-nav a:hover::before,.dot-nav a:focus-visible::before{opacity:1;transform:scale(1.15)}
.dot-nav a.active::before{opacity:1;transform:scale(1.5);box-shadow:0 0 8px var(--dc)}
.dot-label{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px);
  white-space:nowrap;font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.02em;
  color:var(--dc);background:var(--deep);padding:.35rem .6rem;border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.dot-nav a:hover .dot-label,.dot-nav a:focus-visible .dot-label,
.dot-nav.at-hero .dot-label{opacity:1;transform:translateY(-50%) translateX(0)}
/* No hero os nomes ficam soltos, sem a pílula de fundo e no tom único (sem poluição de cor) */
.dot-nav.at-hero .dot-label{background:transparent;box-shadow:none;padding-right:.2rem;color:var(--foam)}

/* Botão de abrir o menu (só existe no mobile): um ponto discreto */
.dot-nav-toggle{display:none;background:none;border:none;padding:0;pointer-events:auto}

@media(max-width:600px){
  .dot-nav{right:.6rem;top:.85rem;transform:none;gap:.55rem;opacity:1}
  .dot-nav a{width:12px;height:12px}
  .dot-nav a::before{width:7px;height:7px}
  .dot-nav::before,.dot-nav::after{display:none}

  /* Na tela estreita a coluna de pontos vira um botão com 3 bolinhas coloridas,
     ancorado no canto para não passar por cima de conteúdo ao rolar, que
     expande a lista de seções ao toque. Com o menu aberto, o próprio botão
     vira um × discreto no lugar das bolinhas, indicando "toque pra fechar". */
  .dot-nav-toggle{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    align-self:flex-end;
    width:30px;height:30px;border-radius:50%;cursor:pointer;
    background:none;box-shadow:none;
    transition:transform .2s;
  }
  .dot-nav-toggle span{width:6px;height:6px;border-radius:50%;display:block;box-shadow:0 1px 3px rgba(10,22,40,.4);transition:opacity .2s}
  .dot-nav-toggle span:nth-child(1){background:var(--aqua)}
  .dot-nav-toggle span:nth-child(2){background:var(--accent)}
  .dot-nav-toggle span:nth-child(3){background:var(--blush)}
  .dot-nav-toggle::before,.dot-nav-toggle::after{
    content:'';position:absolute;top:50%;left:50%;width:13px;height:2px;border-radius:2px;
    background:var(--wave);opacity:0;transition:opacity .2s;
  }
  .dot-nav-toggle::before{transform:translate(-50%,-50%) rotate(45deg)}
  .dot-nav-toggle::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .dot-nav.menu-open .dot-nav-toggle span{opacity:0}
  .dot-nav.menu-open .dot-nav-toggle::before,.dot-nav.menu-open .dot-nav-toggle::after{opacity:.85}
  .dot-nav-toggle:active{transform:scale(.9)}
  /* No hero o botão não aparece; só some a partir da 2ª seção */
  .dot-nav.at-hero .dot-nav-toggle{display:none}

  /* Lista fica oculta até o botão ser tocado */
  .dot-nav a{display:none}
  .dot-nav.menu-open{
    gap:.15rem;margin-top:.6rem;padding:.6rem .4rem;border-radius:14px;
    background:linear-gradient(160deg,rgba(168,220,232,.92) 0%,rgba(232,247,251,.86) 100%);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 20px 44px rgba(10,22,40,.35);
    max-height:65vh;overflow-y:auto;
    z-index:10001;
  }
  .dot-nav.menu-open a{
    display:flex;position:static;width:auto;height:auto;justify-content:flex-start;
    align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;
  }
  .dot-nav.menu-open a::before{position:static;opacity:1;flex-shrink:0;box-shadow:none}
  .dot-nav.menu-open a.active::before{transform:scale(1.3)}
  .dot-nav.menu-open a:hover,.dot-nav.menu-open a.active{background:rgba(255,255,255,.4)}
  .dot-nav.menu-open .dot-label{
    position:static;opacity:1;transform:none;background:none;box-shadow:none;padding:0;
    color:var(--wave);font-size:.82rem;
  }
}

@media(max-width:420px){
  section{padding:3.5rem 1rem}
  .eyebrow{left:1rem}
  .contato-footer{margin-left:-1rem;margin-right:-1rem}
  .contato-nota{margin-left:-.5rem}
}

/* ---------- DESKTOP: mais respiro em telas largas ---------- */
@media(min-width:900px){
  section{padding:2rem 2rem 6.5rem}
  .wrap{max-width:1060px}
  .hero-row{flex-direction:row;justify-content:center;align-items:center;gap:3rem}
  .hero-logo{width:min(22vw,280px);margin:0}
  .hero-tagline{font-size:clamp(1.6rem,2.8vw,2.2rem)}
  .hero-sub{max-width:420px;font-size:1.15rem;opacity:.85;text-align:left}
  .hero-credits{font-size:1rem}
  .autora-bio,.processo p.reveal{max-width:none}
  .feat-grid{grid-template-columns:1fr 1fr 1fr}
  .feat-card.wide{grid-column:1/-1}
  .laudo .feat-grid{grid-template-columns:1fr 1fr 1fr}
  h2{font-size:1.9rem}
  p{font-size:1rem}
  .eyebrow{font-size:.8rem}
  .nowrap-desktop{white-space:nowrap}
  .eyebrow{left:2rem}
  .wrap{padding-top:1rem}
  .autora,.processo{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:2rem;padding-bottom:.9rem}
  .conceitos,.laudo,.eci-section,.validacao{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:2rem;padding-bottom:5.9rem}
  .sobre{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:2rem;padding-bottom:.9rem}
  .contato{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:2rem;padding-bottom:0}
  .contato-footer{padding-top:1rem;padding-bottom:1rem;margin-left:-2rem;margin-right:-2rem;padding-left:2rem;padding-right:2rem}
  .contato-nota{margin-top:auto;margin-left:-1.25rem}
  .section-nav-inline{margin-top:.5rem}
}
@media(min-width:1200px){
  .wrap{max-width:1080px}
}

/* ---------- MOBILE: enquadramento das setas é feature de desktop ---------- */
@media(max-width:899px){
  .section-nav{display:none}
  .hero-scroll{pointer-events:none;cursor:default}
}

/* ---------- CONCEITOS (IQA / IET) ---------- */
.conceitos{background:linear-gradient(180deg,#0c2036 0%,var(--ocean) 100%)}

/* ---------- POPUPS (IQA, IET, Corpo D'água, ECI) ---------- */
.lp-overlay{position:fixed;inset:0;background:linear-gradient(90deg,rgba(41,128,185,0),rgba(65,184,213,0),rgba(0,229,192,.2));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:1rem}
.lp-overlay.open{opacity:1;pointer-events:all}
.lp-modal{background:rgba(13,45,78,.96);border:1px solid rgba(65,184,213,.18);border-radius:14px;padding:0;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,.7);transform:translateY(24px);transition:transform .35s;position:relative}
.lp-overlay.open .lp-modal{transform:translateY(0)}
.lp-header{padding:1.6rem 3rem 1rem 1.6rem;border-bottom:1px solid rgba(65,184,213,.1);position:sticky;top:0;background:var(--ocean);border-radius:14px 14px 0 0}
.lp-header::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--aqua),var(--blush),var(--accent),var(--aqua),var(--wave),var(--aqua));background-size:200% 100%;animation:rainbowShift 30s linear infinite}
.lp-close{position:absolute;top:1.1rem;right:1.2rem;background:none;border:none;color:var(--foam);font-size:1.2rem;cursor:pointer;line-height:1}
.lp-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;color:var(--white)}
.lp-title span{color:var(--accent);font-weight:600;font-size:.85rem;display:block;margin-top:.15rem}
.lp-sub{font-size:.72rem;color:var(--foam);letter-spacing:.08em;text-transform:uppercase;margin-top:.4rem;opacity:.8}
.lp-body{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:1.25rem}
.lp-body p{font-size:.88rem;line-height:1.7;color:var(--foam);margin:0}
.lp-group-label{font-family:'Syne',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.lp-cls-list{display:flex;flex-direction:column;gap:.4rem}
.lp-cls-row{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;border-radius:8px;padding:.55rem .8rem}
.lp-cls-name{flex:1}
.lp-cls-range{font-size:.76rem;opacity:.85}
.lp-feat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.lp-feat-list li{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--aqua);display:flex;align-items:center;gap:.6rem;letter-spacing:.01em}
.lp-feat-list li img{width:15px;height:15px;flex-shrink:0}
.curve-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.8rem}
@media(min-width:480px){.curve-grid{grid-template-columns:1fr 1fr}}
.curve-box{background:rgba(255,255,255,.04);border:1px solid rgba(65,184,213,.15);border-radius:10px;padding:.8rem}
.curve-label{font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;margin-bottom:.5rem}
.lp-note{font-size:.8rem;line-height:1.7;color:var(--foam);background:rgba(212,116,138,.08);border:1px solid rgba(212,116,138,.22);border-radius:8px;padding:.9rem 1rem}
.lp-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.uf-badge{font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;padding:.2rem .5rem;border-radius:6px;border:1px solid}
.uf-cetesb{background:rgba(41,128,185,.2);border-color:rgba(41,128,185,.4);color:var(--foam)}
.uf-igam{background:rgba(0,229,192,.12);border-color:rgba(0,229,192,.3);color:var(--accent)}
.uf-outros{background:rgba(65,184,213,.1);border-color:rgba(65,184,213,.2);color:rgba(168,220,232,.7);font-style:italic;font-size:.68rem}


/* ══════════════════════════════════════════════════════════════════════════ */
/* WIDGET DE ACESSIBILIDADE (fonte + TTS + reset)                             */
/* ══════════════════════════════════════════════════════════════════════════ */
.accessibility-widget {
  position: fixed;
  right: 0.75rem;
  top: 2.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  max-width: calc(100vw - 1.5rem);
  pointer-events: none;
}
.accessibility-toggle{pointer-events:auto}
.accessibility-panel.show{pointer-events:auto}


/* Botão principal */
.accessibility-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff; /* fundo branco */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  opacity: 0.4; /* meio apagado por padrão */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
}

.accessibility-toggle:hover,
.accessibility-toggle:focus-visible {
  opacity: 1; /* acende ao passar/chegar o mouse ou focar */
  transform: scale(1.08);
  border-color: rgba(74, 200, 244, 0.5);
  box-shadow: 0 6px 20px rgba(74, 200, 244, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.accessibility-toggle.near {
  opacity: 1; /* acende quando o mouse chega perto */
}

.accessibility-toggle:active {
  transform: scale(0.95);
}

/* Ícone de acessibilidade (novo símbolo da ONU) */
.accessibility-icon {
  width: 33px;
  height: 33px;
}

/* Painel de opções */
.accessibility-panel {
  position: fixed;
  top: 2.5rem;
  right: 0.75rem;
  background:linear-gradient(160deg,rgba(168,220,232,0.9) 0%,rgba(232,247,251,0.82) 100%);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 20px rgba(65,184,213,.1), 0 0 0 1px rgba(65,184,213, 0.1);
  padding: 0;
  min-width: 250px;
  max-width: min(300px, calc(100vw - 2rem));
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
}

.accessibility-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.accessibility-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: none;
  border: none;
  color: var(--blush);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0.7;
  z-index: 1;
}

.accessibility-close:hover {
  background: rgba(212,116,138, 0.1);
  opacity: 1;
  border-radius: 5px;
}

/* Seções do painel */
.accessibility-section {
  padding: 0.65rem 0.65rem;
}

.accessibility-section:last-child {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -0.35rem;
}

.accessibility-label {
  display: block;
  font-size: 0.85rem;
  color: var(--ocean);
  font-weight: bold;
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}

/* Controles de fonte */
.font-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(255,255,255,0.3);
  padding: 0.5rem 0.65rem;
  border-radius: 5px;
  border: 1px solid rgba(41,128,185,0.3);
}

.font-btn {
  background: rgba(65, 184, 213,0.1);
  border: 1px solid rgba(65, 184, 213);
  border-radius: 5px;
  color: var(--wave);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Syne', sans-serif;
  min-width: 42px;
  flex-shrink: 0;
}

.font-btn-reset {
  background: rgba(65, 184, 213,0.1);
  border-color: rgba(65, 184, 213);
  color: var(--ocean);
}

.font-btn:hover {
  background: rgba(41,128,185, 0.25);
  border-color: var(--wave);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13,245,227, 0.3);
}

.font-btn-reset:hover {
  background: rgba(65, 184, 213, 0.25);
  border-color: var(--wave);
  box-shadow: 0 2px 8px rgba(65, 184, 213, 0.3);
}

.font-btn:active {
  transform: translateY(0);
}

.font-size-display {
  color: var(--ocean);
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 45px;
  text-align: center;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(41,128,185, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(41,128,185, 0);
  }
}

/* Botão de reset */
.reset-btn {
  width: 100%;
  background: rgba(212,116,138,0);
  border: 0.1px solid rgba(212,116,138,0);
  border-radius: 5px;
  color: rgba(212,116,138,0.8);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.15rem 0rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Syne', sans-serif;
}

.reset-btn:hover {
  background: rgba(212,116,138,0.2);
  border-color: rgba(212,116,138,0.3);
  transform: translateY(-1px);
}

.reset-btn:active {
  transform: translateY(0);
}

/* Configurações de voz dentro do painel */
.tts-config-group {
  margin-top: 0.75rem;
}

.tts-config-label-new {
  display: block;
  font-size: 0.8rem;
  color: rgba(13,45,78, 0.5);
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.tts-select-new {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  background:rgba(255,255,255,0.4);
  border: 1px solid rgba(41,128,185, 0.3);
  border-radius: 5px;
  color: var(--wave);
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.tts-select-new:hover {
  background: rgba(65,184,213,0.15);
  border-color: var(--aqua);
}

.tts-select-new:focus {
  outline: none;
  border-color: var(--wave);
  box-shadow: 0 0 0 2px rgba(65, 184, 213, 0.2);
}

.tts-select-new option {
  background :rgb(255,255,255);
  color: var(--wave);
}

.tts-slider-new {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(41,128,185, 0.2);
  outline: none;
  cursor: pointer;
  margin-top: 0.5rem;
  appearance: none;
}

.tts-slider-new::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wave);
  cursor: pointer;
  transition: all 0.2s;
}

.tts-slider-new::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(41,128,185, 0.5);
}

.tts-slider-new::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wave);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.tts-slider-new::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(41,128,185, 0.5);
}

.tts-speed-value {
  color: var(--wave);
  font-weight: 700;
  margin-left: 0.35rem;
  font-size: 0.8rem;
}

/* Botão "Ouvir tela" no painel de acessibilidade */
.tts-tela-btn {
  width: 100%;
  margin-top: 0.5rem;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(41,128,185, 0.3);
  border-radius: 5px;
  color: var(--wave);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Syne', sans-serif;
}
.tts-tela-btn:hover {
  background: rgba(65, 184, 213, 0.15);
  border-color: var(--aqua);
  transform: translateY(-1px);
}
.tts-tela-btn.speaking {
  background: linear-gradient(135deg, var(--aqua) 0%, var(--wave) 100%);
  color: var(--deep);
  border-color: var(--aqua);
  animation: pulse 1.5s infinite;
}

/* Botão TTS nos modais */
.modal-tts-btn {
  position: absolute;
  top: 1.2rem;
  right: 3.4rem;
  background: rgba(65, 184, 213, 0.1);
  border: 1px solid rgba(65, 184, 213, 0.35);
  border-radius: 50%;
  color: var(--aqua);
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-tts-btn:hover {
  background: rgba(65, 184, 213, 0.25);
  border-color: var(--aqua);
}

/* Responsivo */
@media (max-width: 768px) {
  .accessibility-widget {
    right: 0rem;
    top: 6.5rem;
    max-width: calc(100vw - 1rem);
  }
  
  .accessibility-toggle {
    width: 24px;
    height: 24px;
  }

  .accessibility-icon {
    width: 24px;
    height: 24px;
  }
  
  .accessibility-panel {
    top: 6.5rem;
    right: 0.5rem;
    min-width: 260px;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 7.5rem);
  }
}

/* Popup de "Ouvir" ao selecionar texto */
#tts-select-popup{position:fixed;z-index:10060;display:none;align-items:center}
#tts-select-btn{background:linear-gradient(135deg,var(--wave),var(--aqua));color:var(--white);border:none;border-radius:6px;font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;padding:.4rem .7rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap}
#tts-select-btn:hover{filter:brightness(1.08)}

/* VLibras — reposiciona o botão de acesso para o canto inferior esquerdo,
   evitando colisão com o back-to-top (canto inferior direito) */
div[vw]{left:12px;right:auto}
div[vw] .active[vw-access-button]{left:12px!important;right:auto!important}