/**
 * Identidade visual da Sorria Mais. UMA folha para as quatro paginas.
 *
 * Nenhuma pagina repete regra de estilo: se algo precisa mudar no visual,
 * muda aqui e vale para clinica-geral, implante, protese e ortodontia.
 *
 * DIRECAO: clinica conhecida do Centro de Itatiba. Fundo claro, azul da marca
 * nos lugares de decisao (cabecalho, CTA, titulos, faixas), amarelo apenas
 * como acento curto. Sem fotografia, sem ilustracao de pessoa, sem card
 * decorativo repetido: a composicao se sustenta em tipografia, faixas de cor,
 * linhas finas e espaco.
 *
 * O que foi deliberadamente deixado de fora: glassmorphism, brilho animado,
 * grade futurista, onda decorativa, sombra forte, pill em excesso e destaque
 * de texto por pseudo-elemento.
 */

/* ---------------------------------------------------------------- tokens */
:root{
  --azul:#14357A;
  --azul-escuro:#0E2757;
  --azul-medio:#2A4F9E;
  --azul-suave:#EAF0FA;
  --azul-linha:#C9D7EE;

  --amarelo:#FFC81F;
  --amarelo-texto:#8A6400;   /* amarelo so e legivel como texto nesta versao */

  --papel:#FFFFFF;
  --papel-2:#FAF8F4;
  --tinta:#191D24;
  --tinta-suave:#4B535F;
  --linha:#E4E2DC;

  --raio:10px;
  --raio-p:8px;
  --largura:1080px;
  --altura-cabecalho:64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:calc(var(--altura-cabecalho) + 12px)}

body{
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--tinta);
  background:var(--papel);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

h1,h2,h3{font-family:'Bitter',Georgia,serif;line-height:1.22;color:var(--azul-escuro);font-weight:600}
a{color:var(--azul);text-decoration-thickness:1px;text-underline-offset:2px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}

/* Foco visivel unico, em todo controle, inclusive sobre fundo azul. */
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px;border-radius:2px}
.secao--azul :focus-visible,.cta-final :focus-visible{outline-color:#FFFFFF}

.container{max-width:var(--largura);margin:0 auto;padding:0 20px}
@media(min-width:640px){.container{padding:0 28px}}

.pular-para-conteudo{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--azul);color:#fff;padding:12px 18px;border-radius:var(--raio-p);
  font-weight:600;transition:top .15s;
}
.pular-para-conteudo:focus{top:12px}

/* ------------------------------------------------------------- cabecalho */
/*
 * Compacto (60px) e presente em todas as larguras. NAO existe CTA flutuante:
 * um cabecalho fixo mais uma barra flutuante roubariam duas faixas da tela do
 * celular para dizer a mesma coisa.
 */
.cabecalho{
  position:sticky;top:0;z-index:100;
  background:var(--papel);
  border-bottom:1px solid var(--linha);
}
.cabecalho-inner{
  max-width:var(--largura);margin:0 auto;padding:0 12px;
  height:var(--altura-cabecalho);
  display:flex;align-items:center;gap:12px;
}
@media(min-width:640px){.cabecalho-inner{padding:0 28px}}

/*
 * O logotipo e o lockup completo, com a tagline, por decisao do cliente.
 * A tagline so comeca a ser legivel perto de 44px de altura de lockup, entao
 * o logotipo ocupa a maior altura que o cabecalho comporta em cada largura.
 * O limite e o celular: em 320px a soma do logotipo e do botao precisa caber
 * na largura util, e o logotipo e quase 4x mais largo do que alto.
 */
.marca{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;text-decoration:none}
.marca img{display:block;width:auto;height:34px}
@media(min-width:560px){.marca img{height:46px}}
@media(min-width:900px){.marca img{height:54px}}
@media(min-width:900px){:root{--altura-cabecalho:78px}}
@media(min-width:560px) and (max-width:899px){:root{--altura-cabecalho:70px}}

.cabecalho-tel{
  display:none;align-items:center;gap:6px;
  color:var(--tinta-suave);font-size:.9rem;font-weight:600;text-decoration:none;
  min-height:44px;padding:0 4px;
}
.cabecalho-tel:hover{color:var(--azul)}
.cabecalho-tel svg{width:16px;height:16px;flex:none;color:var(--azul)}
@media(min-width:560px){.cabecalho-tel{display:inline-flex}}

/* -------------------------------------------------------------- botoes */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;
  border-radius:var(--raio-p);
  font-weight:700;font-size:1rem;line-height:1.25;
  text-align:center;text-decoration:none;
  transition:background-color .15s,color .15s;
}
.botao svg{width:18px;height:18px;flex:none}
.botao--principal{background:var(--azul);color:#fff}
.botao--principal:hover{background:var(--azul-escuro)}
.botao--amarelo{background:var(--amarelo);color:var(--azul-escuro)}
.botao--amarelo:hover{background:#F0B800}
.botao--linha{border:1.5px solid var(--azul-linha);color:var(--azul);background:var(--papel)}
.botao--linha:hover{background:var(--azul-suave)}
.botao--cabecalho{min-height:44px;padding:10px 16px;font-size:.9rem;border-radius:var(--raio-p)}
.botao--largo{width:100%}
@media(min-width:420px){.botao--largo{width:auto}}

/* ---------------------------------------------------------------- hero */
.hero{
  background:var(--papel-2);
  border-bottom:1px solid var(--linha);
  padding:44px 0 40px;
  position:relative;
}
/* Padrao discreto em CSS: hairlines diagonais a 3% de opacidade. Sem grade
   tecnologica, sem brilho, sem gradiente difuso. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(20,53,122,.035) 0 1px,transparent 1px 11px);
}
.hero > *{position:relative}
@media(min-width:900px){.hero{padding:64px 0 60px}}

.hero-grade{display:grid;gap:28px}
@media(min-width:900px){.hero-grade{grid-template-columns:1.35fr .9fr;gap:48px;align-items:start}}

.hero-local{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--azul-medio);margin-bottom:14px;
}
.hero-local svg{width:15px;height:15px;flex:none}

.hero h1{font-size:clamp(1.7rem,4.6vw,2.55rem);margin-bottom:16px;max-width:19ch}
@media(min-width:900px){.hero h1{max-width:16ch}}

.hero-texto{font-size:1.05rem;color:var(--tinta-suave);max-width:46ch;margin-bottom:26px}

.hero-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Cartao do hero: informacao verificavel, nao um espaco reservado para foto */
.cartao-info{
  background:var(--papel);
  border:1px solid var(--linha);
  border-top:3px solid var(--amarelo);
  border-radius:var(--raio);
  padding:22px;
}
.cartao-info h2{font-size:1rem;font-family:'Figtree',sans-serif;font-weight:700;color:var(--azul-escuro);margin-bottom:14px}
.cartao-info dl{display:grid;gap:12px}
.cartao-info dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.cartao-info dd{font-size:.98rem;color:var(--tinta);margin-top:1px}
.cartao-info dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.cartao-info dd a:hover{text-decoration:underline}
.cartao-info hr{border:0;border-top:1px solid var(--linha);margin:2px 0}

/* -------------------------------------------------------------- secoes */
.secao{padding:52px 0}
@media(min-width:900px){.secao{padding:68px 0}}
.secao--suave{background:var(--papel-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.secao--azul{background:var(--azul);color:#fff}
.secao--azul h2,.secao--azul h3{color:#fff}

.titulo-secao{font-size:clamp(1.35rem,3vw,1.85rem);max-width:24ch;margin-bottom:10px}
.titulo-secao::after{content:'';display:block;width:44px;height:3px;background:var(--amarelo);margin-top:14px;border-radius:2px}
.secao--azul .titulo-secao::after{background:var(--amarelo)}
.intro-secao{color:var(--tinta-suave);max-width:56ch;margin:18px 0 30px;font-size:1.02rem}
.secao--azul .intro-secao{color:rgba(255,255,255,.86)}

/* ------------------------------------------------------- situacoes */
/* Lista com linhas finas. Descreve situacoes, nao diagnostica quem le. */
.situacoes{display:grid;gap:0;max-width:70ch}
@media(min-width:760px){.situacoes{grid-template-columns:1fr 1fr;column-gap:40px;max-width:none}}
.situacoes li{padding:15px 0;border-top:1px solid var(--linha);font-size:1rem;color:var(--tinta)}
.situacoes li:first-child{border-top:0}
@media(min-width:760px){.situacoes li:nth-child(2){border-top:0}}
.aviso-avaliacao{margin-top:24px;font-size:.92rem;color:var(--tinta-suave);max-width:60ch;padding-left:14px;border-left:3px solid var(--amarelo)}

/* ------------------------------------------------------ explicacao */
.explicacao{display:grid;gap:24px}
@media(min-width:860px){.explicacao{grid-template-columns:1fr 1fr;gap:48px}}
.explicacao p{color:var(--tinta-suave);margin-bottom:14px;font-size:1.02rem}
.explicacao p:last-child{margin-bottom:0}
.explicacao strong{color:var(--tinta);font-weight:700}
.explicacao h3{font-size:1.1rem;margin-bottom:10px;font-family:'Figtree',sans-serif;font-weight:700}
.quadro{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);padding:24px}
.quadro .situacoes{grid-template-columns:1fr;max-width:none}
.quadro .situacoes li:nth-child(2){border-top:1px solid var(--linha)}
.secao--suave .quadro{background:var(--papel)}

/* ---------------------------------------------------------- etapas */
/* Tres linhas numeradas, separadas por hairline. Nao sao cards. */
.etapas{counter-reset:etapa;max-width:74ch}
.etapas li{
  counter-increment:etapa;
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.22);
}
.etapas li:first-child{border-top:0;padding-top:4px}
.etapas li::before{
  content:counter(etapa);
  font-family:'Bitter',Georgia,serif;font-size:1.5rem;font-weight:700;
  color:var(--amarelo);line-height:1;padding-top:3px;
}
.etapas h3{font-size:1.05rem;margin-bottom:5px;font-family:'Figtree',sans-serif;font-weight:700}
.etapas p{color:rgba(255,255,255,.84);font-size:.98rem}

/* ------------------------------------------------------ avaliacoes */
.avaliacoes-topo{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:28px}
.selo-google{display:inline-flex;align-items:center;gap:10px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-p);padding:10px 14px}
.secao--suave .selo-google{background:var(--papel)}
.selo-google svg.g{width:19px;height:19px;flex:none}
.selo-google b{font-size:1.15rem;color:var(--azul-escuro)}
.selo-google span{font-size:.88rem;color:var(--tinta-suave)}
.link-google{font-size:.92rem;font-weight:600;min-height:44px;display:inline-flex;align-items:center}

.avaliacoes{display:grid;gap:16px}
@media(min-width:780px){.avaliacoes{grid-template-columns:repeat(3,1fr)}}
.avaliacao{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio-p);padding:20px}
.avaliacao blockquote{font-size:.98rem;color:var(--tinta);margin-bottom:14px}
.avaliacao figcaption{font-size:.86rem;color:var(--tinta-suave);font-weight:600}

/* ------------------------------------------------------------ faq */
.faq{max-width:74ch}
.faq-item{border-top:1px solid var(--linha)}
.faq-item:last-child{border-bottom:1px solid var(--linha)}
.faq-pergunta{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;min-height:56px;
  font-size:1.02rem;font-weight:600;color:var(--azul-escuro);text-align:left;
}
.faq-pergunta:hover{color:var(--azul-medio)}
.faq-pergunta svg{width:18px;height:18px;flex:none;color:var(--azul-medio);transition:transform .18s}
.faq-pergunta[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq-resposta{padding:0 0 20px;color:var(--tinta-suave);font-size:.98rem;max-width:66ch}
.faq-resposta[hidden]{display:none}

/* ------------------------------------------------------ localizacao */
.local{display:grid;gap:24px}
@media(min-width:860px){.local{grid-template-columns:1fr 1fr;gap:36px;align-items:start}}
.mapa{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--papel-2)}
.mapa iframe{display:block;width:100%;height:290px;border:0}
.local dl{display:grid;gap:16px}
.local dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:2px}
.local dd{font-size:1rem}
.local dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.local dd a:hover{text-decoration:underline}

/* -------------------------------------------------------- cta final */
.cta-final{background:var(--azul);color:#fff;padding:52px 0}
.cta-final h2{color:#fff;font-size:clamp(1.35rem,3vw,1.9rem);max-width:20ch;margin-bottom:12px}
.cta-final p{color:rgba(255,255,255,.86);max-width:52ch;margin-bottom:26px;font-size:1.02rem}
.cta-final-acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-final-tel{color:#fff;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:7px}
.cta-final-tel svg{width:17px;height:17px}

/* ----------------------------------------------------------- rodape */
/*
 * Rodape CLARO, e nao azul-escuro. Duas razoes: acima dele ja existe a faixa
 * azul do CTA, e duas faixas azuis coladas empilhavam peso demais no fim da
 * pagina; e o logotipo tem azul-marinho e preto, entao sobre azul-escuro ele
 * precisava de uma placa branca que lia como adesivo colado. No claro, a
 * marca aparece inteira, do tamanho certo, sem moldura nenhuma.
 */
.rodape{background:var(--papel-2);color:var(--tinta-suave);border-top:1px solid var(--linha);padding:44px 0 32px;font-size:.92rem}
.rodape-grade{display:grid;gap:24px}
@media(min-width:760px){.rodape-grade{grid-template-columns:1.3fr 1fr 1fr}}
.rodape h2{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-medio);font-family:'Figtree',sans-serif;font-weight:700;margin-bottom:10px}
.rodape-marca{display:block;margin-bottom:18px}
.rodape-marca img{display:block;width:100%;max-width:250px;height:auto}
.rodape a{color:var(--azul);text-decoration:none;font-weight:600}
.rodape li a{display:inline-flex;align-items:center;min-height:44px}
.rodape-botao{display:inline-flex;align-items:center;min-height:44px;color:var(--azul);font-weight:600;font-size:.92rem;text-align:left}
.rodape-botao:hover{text-decoration:underline}
.rodape a:hover{text-decoration:underline}
.rodape li{margin-bottom:2px}
.rodape-legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--linha);font-size:.85rem;color:var(--tinta-suave)}
.rodape-legal p{margin-bottom:5px}

/* ------------------------------------------------------------ modal */
.modal{
  position:fixed;inset:0;z-index:150;
  background:rgba(14,39,87,.55);
  display:none;
  padding:16px;
  overflow-y:auto;
}
.modal[data-aberto="true"]{display:flex;align-items:flex-start;justify-content:center}
@media(min-width:600px){.modal{padding:32px 16px}}

.modal-caixa{
  background:var(--papel);
  border-radius:var(--raio);
  border-top:4px solid var(--amarelo);
  width:100%;max-width:460px;margin:auto;
  padding:24px 20px 22px;
  position:relative;
  box-shadow:0 10px 40px rgba(14,39,87,.18);
}
@media(min-width:600px){.modal-caixa{padding:28px 28px 26px}}
.modal-fechar{
  position:absolute;top:8px;right:8px;
  width:44px;height:44px;border-radius:var(--raio-p);
  display:flex;align-items:center;justify-content:center;color:var(--tinta-suave);
}
.modal-fechar:hover{background:var(--papel-2);color:var(--tinta)}
.modal-fechar svg{width:20px;height:20px}
.modal-caixa h2{font-size:1.3rem;margin-bottom:6px;padding-right:44px}
.modal-sub{color:var(--tinta-suave);font-size:.95rem;margin-bottom:20px}

/* ---------------------------------------------------------- formulario */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.9rem;font-weight:600;color:var(--tinta);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:48px;
  padding:12px 13px;
  font-family:inherit;font-size:1rem;color:var(--tinta);
  background:var(--papel);
  border:1.5px solid #CFCDC7;border-radius:var(--raio-p);
}
.campo textarea{min-height:72px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#8B9099}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#A9A7A1}
.campo :focus-visible{border-color:var(--azul)}
.campo-dica{font-size:.82rem;color:var(--tinta-suave);margin-top:5px}

/* Honeypot: fora da tela, invisivel para quem le a pagina e para leitor de tela */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consentimento{font-size:.83rem;color:var(--tinta-suave);line-height:1.55;margin:16px 0 6px}
.consentimento a{color:var(--azul);font-weight:600}

.acoes-form{display:grid;gap:9px;margin-top:14px}
.acoes-form .botao{width:100%}
.botao--discreto{
  min-height:44px;padding:10px 14px;
  font-size:.88rem;font-weight:600;color:var(--tinta-suave);
  background:none;border-radius:var(--raio-p);
  display:inline-flex;align-items:center;justify-content:center;
}
.botao--discreto:hover{background:var(--papel-2);color:var(--tinta)}
.botao[disabled],.botao--discreto[disabled]{opacity:.6;cursor:progress}

.erro-form{
  margin-top:12px;font-size:.92rem;font-weight:600;color:#9A1B1B;
}
.erro-form:empty{margin:0}


/* ------------------------------------------- aviso de medicao (consent) */
/*
 * Faixa presa no rodape da janela. NAO cobre o conteudo por inteiro, nao
 * escurece a pagina e nao trava a rolagem: quem quiser ignorar navega o site
 * inteiro sem decidir. As duas acoes tem o mesmo peso — mesmo tamanho, mesma
 * altura, contraste equivalente.
 */
.aviso-medicao{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  max-height:60vh;overflow-y:auto;
  background:var(--papel);
  border-top:2px solid var(--azul);
  box-shadow:0 -4px 20px rgba(14,39,87,.10);
  padding:16px 0;
}
.aviso-medicao[hidden]{display:none}
.aviso-inner{max-width:var(--largura);margin:0 auto;padding:0 20px;display:grid;gap:12px}
@media(min-width:900px){
  .aviso-inner{grid-template-columns:1fr auto;align-items:center;gap:28px;padding:0 28px}
}
.aviso-medicao h2{font-size:1rem;font-family:'Figtree',sans-serif;font-weight:700;margin-bottom:5px}
.aviso-medicao p{font-size:.88rem;color:var(--tinta-suave);max-width:70ch}
.aviso-medicao a{font-weight:600}
/* Aceitar e Recusar lado a lado ja em 320px, com a MESMA largura: destaque
   equivalente nao e so mesma altura, e tambem mesma area de toque. */
.aviso-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aviso-acoes .link-preferencias{grid-column:1 / -1}
@media(min-width:900px){
  /* larguras iguais tambem no desktop */
  .aviso-acoes{grid-template-columns:168px 168px auto;align-items:center}
  .aviso-acoes .link-preferencias{grid-column:auto}
}
/*
 * Aceitar e Recusar sao VISUALMENTE IDENTICOS: mesmo fundo, mesma borda,
 * mesma cor de texto, mesmo peso, mesma altura e mesma largura. So o rotulo
 * muda. Um botao solido para aceitar e um contornado para recusar nao seriam
 * "destaque equivalente" — a diferenca de peso ja empurra a escolha.
 */
.aviso-acoes .botao--consent{
  min-height:46px;padding:11px 18px;font-size:.92rem;white-space:nowrap;
  background:var(--papel);color:var(--azul-escuro);
  border:1.5px solid var(--azul);font-weight:700;
}
.aviso-acoes .botao--consent:hover{background:var(--azul-suave)}
.link-preferencias{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:11px 8px;
  font-size:.9rem;font-weight:600;color:var(--azul);background:none;
}
.link-preferencias:hover{text-decoration:underline}

/* --------------------------------------------- painel de preferencias */
.painel-preferencias{
  position:fixed;inset:0;z-index:130;
  background:rgba(14,39,87,.5);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
}
.painel-preferencias[hidden]{display:none}
@media(min-width:640px){.painel-preferencias{align-items:center;padding:24px}}
.painel-caixa{
  background:var(--papel);width:100%;max-width:480px;
  border-radius:var(--raio) var(--raio) 0 0;
  border-top:4px solid var(--azul);
  padding:22px 20px;max-height:92vh;overflow-y:auto;
}
@media(min-width:640px){.painel-caixa{border-radius:var(--raio);padding:26px}}
.painel-caixa h2{font-size:1.15rem;margin-bottom:6px}
.painel-caixa > p{font-size:.9rem;color:var(--tinta-suave);margin-bottom:16px}
.pref-estado{
  font-size:.86rem;color:var(--azul-escuro);background:var(--azul-suave);
  border-radius:var(--raio-p);padding:10px 12px;margin-bottom:16px;
}
.pref-item{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--linha)}
.pref-item input{width:22px;height:22px;margin-top:2px;accent-color:var(--azul)}
.pref-item label{font-weight:600;font-size:.96rem;display:block;margin-bottom:3px;cursor:pointer}
.pref-item p{font-size:.86rem;color:var(--tinta-suave)}
.pref-fixo{opacity:.65}
.painel-acoes{display:grid;gap:8px;margin-top:18px}
@media(min-width:420px){.painel-acoes{grid-template-columns:1fr 1fr}}
.painel-acoes .botao{min-height:46px;font-size:.92rem}
.painel-rodape{margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.painel-rodape button{font-size:.85rem;color:var(--tinta-suave);min-height:44px;padding:0 4px;font-weight:600}
.painel-rodape button:hover{color:var(--azul);text-decoration:underline}

/* O aviso ocupa a base da tela: o conteudo ganha folga para nao ficar atras. */
body:has(.aviso-medicao:not([hidden])) .rodape{padding-bottom:260px}
@media(min-width:900px){body:has(.aviso-medicao:not([hidden])) .rodape{padding-bottom:110px}}

/* ------------------------------------------------------- utilitarios */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Conteudo NUNCA depende de animacao para aparecer: nao ha entrada animada
   nesta folha. A unica transicao e de cor/estado em controle. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}