/* Pilulin – estilo único do site. Medidas copiadas de docs/telas-referencia/.
   Base 18px no computador e 17px no celular; o botão A+ aumenta para 21px / 19px. */

/* Atkinson Hyperlegible (Braille Institute, licença SIL Open Font License 1.1: /fontes/OFL.txt), servida pelo
   próprio site desde 04/11/2026: sem chamada ao Google Fonts (mais rápido e sem passar o IP do visitante adiante). */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fontes/atkinson-400-italico-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fontes/atkinson-400-italico-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fontes/atkinson-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fontes/atkinson-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fontes/atkinson-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fontes/atkinson-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --roxo: #5B21B6;
  --roxo-hover: #4C1D95;
  --roxo-claro: #F1EAFB;
  --roxo-fundo: #FBF8FF;
  --roxo-borda: #E4D8F8;
  --roxo-cartao: #C9B6EE;
  --texto: #1B1F23;
  --texto-2: #3D4750;
  --texto-3: #5A646C;
  --borda: #E3E6E8;
  --borda-2: #D5DADE;
  --borda-campo: #8A949C;
  --borda-chip: #C9CFD4;
  --linha: #EEF0F1;
  --foco: #F2A93B;
  --cinza: #F6F8F7;
  --verde-fundo: #E3F4EA;
  --verde: #0B6B3A;
  --verde-economia: #17663A;
  --laranja-fundo: #FFF1D6;
  --laranja: #7A4B00;
  --vermelho-fundo: #FDECEA;
  --vermelho: #A1281C;
  --ref-fundo: #ECE7F5;
  --ref: #3B2A63;
}

html { font-size: 18px; -webkit-text-size-adjust: 100%; }
html.letra-grande { font-size: 22px; }  /* +22% (era 21 px: quase não se notava; teste de 10/11/2026) */
@media (max-width: 700px) {
  html { font-size: 17px; }
  html.letra-grande { font-size: 20px; }  /* +18% (era 19 px) */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--texto);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--roxo); }
a:hover { color: var(--roxo-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
svg { flex: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cont { max-width: 1180px; margin: 0 auto; padding-left: 1.5em; padding-right: 1.5em; }
@media (max-width: 700px) {
  .cont { padding-left: 1.1em; padding-right: 1.1em; }
  .so-pc { display: none !important; }
}
@media (min-width: 701px) {
  .so-cel { display: none !important; }
}

.pular {
  position: absolute; left: 1em; top: -10em; z-index: 50;
  padding: 0.7em 1em; background: var(--texto); color: #FFFFFF; border-radius: 0.6em; font-weight: 700;
}
.pular:focus { top: 1em; color: #FFFFFF; }

.aviso-exemplo {
  padding: 0.5em 1em; background: var(--laranja-fundo); color: #5C3900;
  border-bottom: 1px solid #F0D9A8; font-size: 0.92em; text-align: center;
}

/* ---------- botões e etiquetas comuns ---------- */

.btn-roxo {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 0.9em; background: var(--roxo); color: #FFFFFF;
  text-decoration: none; font-size: 1.02em; font-weight: 700;
}
.btn-roxo:hover { background: var(--roxo-hover); color: #FFFFFF; }
.btn-largo { display: inline-flex; padding: 0 1.6em; }
.btn-contorno {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: 0.7em; min-height: 3.2em; border: 2px solid var(--roxo); border-radius: 1em;
  background: #FFFFFF; color: var(--roxo); text-decoration: none;
  font-family: inherit; font-size: 1.05em; font-weight: 700; cursor: pointer;
}
.btn-contorno:hover { background: var(--roxo-claro); color: var(--roxo); }

.chip {
  min-height: 48px; padding: 0.45em 1.15em; border-radius: 999px;
  border: 2px solid var(--borda-2); background: #FFFFFF; color: var(--texto);
  font-family: inherit; font-size: 1em; font-weight: 700; cursor: pointer;
}
.chip:hover { border-color: var(--roxo); }
.chip[aria-selected=true], .chip[aria-checked=true] { background: var(--roxo); border-color: var(--roxo); color: #FFFFFF; }

.selo { display: inline-block; padding: 0.25em 0.65em; border-radius: 999px; font-size: 0.85em; font-weight: 700; }
.selo-queda { background: var(--roxo); color: #FFFFFF; }
.selo-menor { background: var(--verde-fundo); color: var(--verde); }
.selo-lojas { background: var(--laranja-fundo); color: var(--laranja); }

/* ---------- topo ---------- */

.topo { border-bottom: 1px solid var(--borda); background: #FFFFFF; }
.topo-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em;
  padding-top: 1em; padding-bottom: 1em;
}
.marca { display: flex; align-items: center; gap: 0.6em; min-height: 48px; text-decoration: none; color: var(--texto); }
.marca:hover { color: var(--texto); }
.marca-icone {
  width: 2.4em; height: 2.4em; border-radius: 0.7em; background: var(--roxo);
  display: flex; align-items: center; justify-content: center;
}
.marca-nome { font-size: 1.3em; font-weight: 700; letter-spacing: -0.01em; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.menu a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.6em 0.9em;
  border-radius: 0.6em; color: var(--texto); text-decoration: none;
}
.menu a:hover { background: var(--roxo-claro); color: var(--roxo); }
.btn-letra {
  display: flex; align-items: center; gap: 0.4em; min-height: 48px; padding: 0.5em 1em;
  border: 2px solid var(--texto); border-radius: 999px; background: #FFFFFF; color: var(--texto);
  font-family: inherit; font-size: 1em; font-weight: 700; cursor: pointer;
}
.btn-letra-a { font-size: 1.15em; }
.btn-letra[aria-pressed=true] { background: var(--texto); color: #FFFFFF; }

.topo-busca .topo-in { justify-content: flex-start; padding-top: 0.9em; padding-bottom: 0.9em; }
.topo-busca .marca-nome { font-size: 1.2em; }
.busca-topo { flex: 999 1 360px; min-width: 0; position: relative; }
.busca-topo .campo svg { left: 0.9em; }
.busca-topo .campo input {
  height: 3em; padding: 0 1em 0 2.7em; font-size: 1.05em; border-radius: 0.9em; box-shadow: none;
}
.busca-topo .sug { position: absolute; left: 0; right: 0; top: calc(100% + 0.4em); z-index: 20; }

@media (max-width: 700px) {
  .topo-in { gap: 0.6em; padding-top: 0.8em; padding-bottom: 0.8em; }
  .marca { gap: 0.5em; }
  .marca-icone { width: 2.2em; height: 2.2em; border-radius: 0.6em; }
  .marca-icone svg { width: 22px; height: 22px; }
  .marca-nome { font-size: 1.1em; }
  .topo-busca .marca-nome { font-size: 1.1em; }
  .btn-letra { justify-content: center; min-width: 52px; padding: 0 0.8em; font-size: 1.05em; }
  .btn-letra-a { font-size: 1em; }
  .btn-letra-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo-busca .topo-in { justify-content: space-between; padding-top: 0.7em; padding-bottom: 0.7em; }
  .busca-topo { order: 3; flex-basis: 100%; }
  .busca-topo .campo svg { left: 0.8em; width: 20px; height: 20px; }
  .busca-topo .campo input { font-size: 1em; padding-left: 2.5em; }
}

/* ---------- busca ---------- */

.campo { position: relative; }
.campo svg { position: absolute; left: 1em; top: 50%; transform: translateY(-50%); pointer-events: none; }
.campo input {
  width: 100%; height: 4em; padding: 0 1.2em 0 3.2em;
  font-family: inherit; font-size: 1.2em; color: var(--texto); background: #FFFFFF;
  border: 2px solid var(--borda-campo); border-radius: 1.2em; box-shadow: 0 6px 24px rgba(16, 40, 36, 0.08);
}
.campo input::placeholder { color: #6B757D; }

.sug {
  background: #FFFFFF; border: 2px solid var(--borda-2); border-radius: 1.2em;
  box-shadow: 0 16px 40px rgba(16, 40, 36, 0.12); overflow: hidden;
}
.sug ul { list-style: none; margin: 0; padding: 0; }
.sug a {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  min-height: 3.8em; padding: 0.9em 1.2em; border-bottom: 1px solid var(--linha);
  font-size: 1.1em; color: var(--texto); text-decoration: none;
}
.sug li:last-child a { border-bottom: none; }
.sug a:hover, .sug a:focus { background: var(--roxo-fundo); color: var(--texto); }
.sug-txt { display: flex; flex-direction: column; gap: 0.15em; }
.sug-nome { font-weight: 700; }
.sug-sub { font-size: 0.88em; color: var(--texto-2); }
.sug-tipo {
  flex: none; padding: 0.25em 0.7em; border-radius: 999px;
  background: var(--roxo-claro); color: var(--roxo); font-size: 0.82em; font-weight: 700;
}
.sug-vazio { margin: 0; padding: 1.2em; font-size: 1.05em; color: var(--texto-2); }

.busca-hero { margin: 2em auto 0; max-width: 720px; text-align: left; }
.busca-rotulo { display: block; margin: 0 0 0.5em 0.2em; font-size: 1.15em; font-weight: 700; }
.busca-linha { display: flex; flex-wrap: wrap; gap: 0.6em; }
.busca-hero .campo { flex: 999 1 380px; min-width: 0; }
.busca-hero .sug { flex-basis: 100%; order: 3; margin-top: -0.1em; }
.busca-botao {
  flex: 1 0 auto; min-height: 4.8rem; padding: 0 2em;
  font-family: inherit; font-size: 1.2em; font-weight: 700; color: #FFFFFF;
  background: var(--roxo); border: none; border-radius: 1.2em; cursor: pointer;
}
.busca-botao:hover { background: var(--roxo-hover); }
.hero-local { margin: 0.9em 0 0 0.2em; display: flex; align-items: center; gap: 0.45em; font-size: 0.98em; color: var(--texto-2); }

@media (max-width: 700px) {
  .busca-hero { margin-top: 1.4em; }
  .busca-rotulo { margin-bottom: 0.4em; font-size: 1.05em; }
  .busca-linha { gap: 0.4em; }
  .busca-hero .campo svg { left: 0.9em; width: 24px; height: 24px; }
  .busca-hero .campo input { height: 3.6em; padding-left: 2.9em; padding-right: 1em; font-size: 1.15em; border-radius: 1em; }
  .busca-hero .sug { order: 2; border-radius: 1em; }
  .busca-botao { order: 3; flex-basis: 100%; margin-top: 0.3em; min-height: 3.6em; border-radius: 1em; }
  .hero-local { justify-content: center; margin: 0.8em 0 0; font-size: 0.92em; }
  .hero-local svg { width: 16px; height: 16px; }
  .sug a { flex-direction: column; align-items: flex-start; gap: 0.15em; min-height: 3.4em; padding: 0.85em 1em; font-size: 1.05em; }
  .sug-tipo { display: none; }
  .sug-sub { font-size: 0.86em; }
  .sug-vazio { padding: 1em; font-size: 1em; }
}

/* ---------- página inicial ---------- */

.hero { background: linear-gradient(180deg, #F7F2FE 0%, #FFFFFF 100%); }
.hero-in { max-width: 860px; margin: 0 auto; padding: 3.8em 1.5em 2.6em; text-align: center; }
.pilula-farma {
  display: inline-flex; align-items: center; gap: 0.5em; margin: 0 0 1em; padding: 0.35em 0.9em;
  background: #FFFFFF; color: var(--roxo); border: 1px solid var(--roxo-borda); border-radius: 999px;
  font-size: 0.95em; font-weight: 700;
}
.hero h1 { font-size: 3em; line-height: 1.12; letter-spacing: -0.02em; }
.hero-sub { max-width: 32em; margin: 0.7em auto 0; font-size: 1.2em; color: var(--texto-2); }

.confianca { border-top: 1px solid #EEE8F8; border-bottom: 1px solid #EEE8F8; }
.confianca ul {
  list-style: none; max-width: 1180px; margin: 0 auto; padding: 1.1em 1.5em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8em 2.4em;
}
.confianca li { display: flex; align-items: center; gap: 0.5em; }

.ofertas { padding-top: 3em; padding-bottom: 3.5em; }
.secao-cab {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.6em 1.5em; margin-bottom: 1.2em;
}
.secao-cab h1, .secao-cab h2 { font-size: 2em; letter-spacing: -0.01em; }
.secao-cab p { margin-top: 0.3em; font-size: 1.02em; color: var(--texto-2); }
.link-forte { padding: 0.5em 0; font-size: 1.05em; font-weight: 700; text-decoration: none; }

.abas { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1.4em; }

.grade-ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1em; }
.oferta {
  display: flex; flex-direction: column; overflow: hidden;
  background: #FFFFFF; border: 1.5px solid var(--borda); border-radius: 1.2em;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.oferta:hover { border-color: var(--roxo-cartao); box-shadow: 0 10px 28px rgba(60, 20, 120, 0.10); }
.oferta-img { position: relative; height: 8.5em; display: flex; align-items: center; justify-content: center; }
.oferta-icone { font-size: 3em; line-height: 1; }
.oferta-img .selo { position: absolute; left: 0.7em; top: 0.7em; }
.oferta-corpo { flex: 1; display: flex; flex-direction: column; gap: 0.25em; padding: 1em 1.1em 1.1em; }
.oferta h3 { font-size: 1.08em; line-height: 1.3; }
.oferta-tam { font-size: 0.95em; color: var(--texto-2); }
.oferta-tam strong { color: var(--texto); }
.oferta-preco { margin-top: 0.5em; font-size: 1.65em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.oferta-un { font-size: 0.95em; color: var(--texto-2); }
.oferta-loja { margin: 0.35em 0 0.8em; font-size: 0.95em; }
.oferta-corpo > .btn-roxo { margin-top: auto; }

.como { background: var(--cinza); }
.como > .cont { padding-top: 3.5em; padding-bottom: 3.5em; }
.como h2 { margin: 0 0 1.2em; font-size: 2em; text-align: center; letter-spacing: -0.01em; }
.passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2em;
}
.passos li { padding: 1.6em; background: #FFFFFF; border: 1px solid var(--borda); border-radius: 1.2em; }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em;
  border-radius: 999px; background: var(--roxo); color: #FFFFFF; font-size: 1.1em; font-weight: 700;
}
.passos h3 { margin: 0.6em 0 0.3em; font-size: 1.2em; }
.passos p { font-size: 1.02em; color: var(--texto-2); }
.lojas-lista { margin: 2.2em 0 0; text-align: center; font-size: 1.05em; color: var(--texto-2); }
.lojas-lista strong { color: var(--texto); }

@media (max-width: 700px) {
  .hero-in { padding: 1.8em 1.1em 1.5em; }
  .pilula-farma { gap: 0.4em; margin-bottom: 0.9em; padding: 0.3em 0.8em; font-size: 0.9em; }
  .pilula-farma svg { width: 16px; height: 16px; }
  .hero h1 { font-size: 1.85em; line-height: 1.15; }
  .hero-sub { margin-top: 0.6em; font-size: 1.05em; }

  .confianca ul {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em 0.8em;
    padding: 0.9em 1.1em; font-size: 0.92em; line-height: 1.25;
  }
  .confianca li { gap: 0.45em; }
  .confianca svg { width: 20px; height: 20px; }

  .ofertas { padding-top: 1.8em; padding-bottom: 2em; }
  .secao-cab { display: block; margin-bottom: 0.9em; }
  .secao-cab h1, .secao-cab h2 { font-size: 1.5em; letter-spacing: 0; }
  .secao-cab p { margin-top: 0.2em; font-size: 0.95em; }
  .abas {
    flex-wrap: nowrap; gap: 0.45em; overflow-x: auto; scrollbar-width: none;
    margin: 0 -1.1em 1em; padding: 0 1.1em 0.2em;
  }
  .abas::-webkit-scrollbar { display: none; }
  .abas .chip { flex: none; min-height: 44px; padding: 0.35em 1em; font-size: 0.95em; white-space: nowrap; }

  .grade-ofertas { display: flex; flex-direction: column; gap: 0.7em; }
  .oferta { flex-direction: row; gap: 0.8em; padding: 0.8em; border-radius: 1em; }
  .oferta-img { width: 4.6em; height: 4.6em; border-radius: 0.8em; }
  .oferta-icone { font-size: 1.7em; }
  .oferta-corpo { min-width: 0; gap: 0.15em; padding: 0; }
  .oferta-corpo > .selo { align-self: flex-start; padding: 0.15em 0.55em; font-size: 0.78em; line-height: 1.35; }
  .oferta h3 { margin-top: 0.15em; font-size: 1em; line-height: 1.25; }
  .oferta-tam { font-size: 0.86em; }
  .oferta-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5em; margin-top: 0.3em; }
  .oferta-preco { margin-top: 0; font-size: 1.35em; }
  .oferta-un { font-size: 0.82em; }
  .oferta-linha .btn-roxo { flex: none; min-height: 44px; padding: 0 1em; border-radius: 0.8em; font-size: 0.95em; }

  .como > .cont { padding-top: 1.8em; padding-bottom: 1.8em; }
  .como h2 { margin-bottom: 0.9em; font-size: 1.45em; }
  .passos { display: flex; flex-direction: column; gap: 0.7em; }
  .passos li { display: flex; align-items: flex-start; gap: 0.8em; padding: 1em; border-radius: 1em; }
  .passo-num { width: 2em; height: 2em; font-size: 1em; }
  .passos p { font-size: 1.02em; color: var(--texto); }
  .lojas-lista { margin-top: 1.2em; font-size: 0.92em; }
}

/* ---------- página do produto ---------- */

.pag-produto { padding-top: 1.6em; padding-bottom: 3em; }
.voltar {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px;
  font-size: 1.05em; font-weight: 700; text-decoration: none;
}
.produto-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2em; margin-top: 1em; }
.produto-principal { flex: 999 1 600px; min-width: 0; }
.produto-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 1em; }
.produto-titulo { font-size: 2.3em; line-height: 1.15; letter-spacing: -0.02em; }
.produto-sub { margin-top: 0.35em; font-size: 1.15em; color: var(--texto-2); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.9em; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.8em;
  border-radius: 999px; font-size: 0.95em; font-weight: 700;
}
.etiqueta-cinza { background: #F3F5F6; border: 1px solid var(--borda-2); }
.etiqueta-roxa { background: var(--roxo-claro); color: var(--roxo); }

.escolha {
  display: flex; flex-wrap: wrap; gap: 1.2em 2.4em; margin-top: 1.5em; padding: 1.3em 1.4em;
  border: 2px solid var(--roxo-borda); background: var(--roxo-fundo); border-radius: 1.2em;
}
.escolha-titulo { margin: 0 0 0.45em; font-size: 1.08em; font-weight: 700; }
.escolha-opcoes { display: flex; flex-wrap: wrap; gap: 0.5em; }
.opcao {
  min-height: 48px; min-width: 5.2em; padding: 0.4em 1em; border-radius: 0.8em;
  border: 2px solid var(--borda-chip); background: #FFFFFF; color: var(--texto);
  font-family: inherit; font-size: 1.05em; font-weight: 700; cursor: pointer;
}
#escolha-qtd .opcao { min-width: 4.4em; }
.escolha-larga { flex-basis: 100%; }
.opcao-mais { border-style: dashed; color: var(--roxo); min-width: 0; }
.link-qtd {
  min-height: 48px; padding: 0.4em 0; border: none; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 1.02em; font-weight: 700; color: var(--roxo); text-decoration: underline;
  text-underline-offset: 3px;
}
.link-qtd:hover { color: var(--roxo-hover); }
#qtd-detalhe .escolha-titulo { margin-top: 0.2em; }
.opcao:hover { border-color: var(--roxo); }
.opcao[aria-checked=true] { background: var(--roxo); border-color: var(--roxo); color: #FFFFFF; }
.escolha-dica { margin-top: 0.4em; font-size: 0.95em; color: var(--texto-2); }
.escolha-outra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0.6em 0 0; font-size: 0.95em; }
.escolha-outra input {
  width: 6.5em; min-height: 48px; padding: 0 0.7em; font: inherit; font-size: 1.05em;
  border: 2px solid var(--borda-campo); border-radius: 0.8em; background: #FFFFFF; color: var(--texto);
}
.escolha-outra .opcao { min-width: 0; }

.resumo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em;
  margin-top: 1.3em; padding: 1.4em 1.6em; background: var(--roxo); color: #FFFFFF; border-radius: 1.2em;
}
.resumo:empty { display: none; }
.resumo-rotulo { font-size: 1.05em; opacity: 0.92; }
.resumo-preco { margin-top: 0.1em; font-size: 2.6em; font-weight: 700; line-height: 1.1; }
.resumo-onde { margin-top: 0.2em; font-size: 1.05em; }
.resumo-por { font-size: 0.42em; font-weight: 400; opacity: 0.92; }
.economia { max-width: 19em; padding: 0.9em 1.2em; background: #FFFFFF; color: var(--texto); border-radius: 1em; }
.economia-rotulo { color: var(--texto-2); }
.economia-valor { margin-top: 0.1em; font-size: 1.8em; font-weight: 700; color: var(--verde-economia); }

.lista-cab { margin: 1.8em 0 0.4em; }
.lista-cab h2 { font-size: 1.4em; }
.lista-cab p { margin-top: 0.2em; color: var(--texto-2); }
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em 1.4em;
  margin: 0.6em 0 1em; padding: 0.9em 1em; background: var(--cinza); border-radius: 1em;
}
.filtro-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.filtro-chips .chip { min-height: 44px; padding: 0.3em 0.95em; border-color: var(--borda-chip); font-size: 0.98em; }
.filtro-chips .chip[aria-checked=true] { border-color: var(--roxo); }
.filtro-select { display: flex; align-items: center; gap: 0.5em; font-size: 0.98em; font-weight: 700; }
.filtro-select select {
  min-height: 44px; padding: 0 0.8em; font-family: inherit; font-size: 1em; color: var(--texto);
  background: #FFFFFF; border: 2px solid var(--borda-campo); border-radius: 0.7em;
}

.opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7em; }
.linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em 1.2em; padding: 1em 1.2em;
  background: #FFFFFF; border: 1px solid var(--borda-2); border-radius: 1.1em;
}
.linha.melhor { border: 2px solid var(--roxo); }
.linha.esgotado { opacity: 0.7; }
.linha-info { flex: 999 1 260px; min-width: 0; }
.linha-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; }
.linha-nome { font-size: 1.15em; font-weight: 700; }
.tag { padding: 0.12em 0.6em; border-radius: 999px; font-size: 0.82em; font-weight: 700; }
.tag-gen { background: var(--verde-fundo); color: var(--verde); }
.tag-sim { background: var(--laranja-fundo); color: var(--laranja); }
.tag-ref { background: var(--ref-fundo); color: var(--ref); }
.tag-melhor { background: var(--roxo-claro); color: var(--roxo); }
.tag-esgotado { background: var(--vermelho-fundo); color: var(--vermelho); }
.linha-pacote { margin-top: 0.2em; font-size: 0.98em; color: var(--texto-2); }
.linha-pacote strong { color: var(--texto); }
.linha-sobra { margin-top: 0.15em; font-size: 0.92em; color: var(--laranja); }
.linha-rodape { display: contents; }
.linha-preco { flex: 0 0 auto; text-align: right; }
.linha-total { font-size: 1.6em; font-weight: 700; line-height: 1.1; }
.linha-un { margin-top: 0.1em; font-size: 0.92em; color: var(--texto-2); }
.btn-loja {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 3em; padding: 0 1.2em; border: 2px solid var(--roxo); border-radius: 0.9em;
  background: #FFFFFF; color: var(--roxo); font-size: 1.02em; font-weight: 700; text-decoration: none;
}
.btn-loja:hover { background: var(--roxo-claro); color: var(--roxo); }
.melhor .btn-loja { background: var(--roxo); color: #FFFFFF; }
.melhor .btn-loja:hover { background: var(--roxo-hover); color: #FFFFFF; }
.vazio {
  margin: 0; padding: 1.2em; border: 2px dashed var(--borda-2); border-radius: 1em;
  font-size: 1.02em; color: var(--texto-2);
}
.nota { margin-top: 1em; font-size: 0.95em; color: var(--texto-3); }

.caixa { padding: 1.3em; border-radius: 1.1em; }
.caixa-cinza { background: var(--cinza); }
.caixa-borda { border: 2px solid var(--borda); }
.caixa-roxa { background: var(--roxo-fundo); border: 2px solid var(--roxo-borda); }
.caixa h2 { display: flex; align-items: center; gap: 0.4em; margin: 0 0 0.4em; font-size: 1.15em; }
.caixa p { margin: 0 0 0.5em; color: var(--texto-2); }
.caixa p strong { color: var(--texto); }
.caixa .pequeno { margin: 0; font-size: 0.95em; }
.combina h2 { margin-bottom: 0.6em; }
.combina a {
  display: flex; align-items: center; gap: 0.8em; min-height: 48px; padding: 0.6em 0;
  border-top: 1px solid var(--linha); color: var(--texto); text-decoration: none;
}
.combina a:hover .combina-nome { color: var(--roxo); }
.combina-icone {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em;
  border-radius: 0.7em; background: var(--roxo-claro); font-size: 1.2em;
}
.combina-txt { flex: 1; min-width: 0; }
.combina-nome { display: block; font-weight: 700; }
.combina-preco { display: block; font-size: 0.92em; color: var(--texto-2); }
.combina-preco strong { color: var(--texto); }
.popular { padding: 0 0.3em; font-size: 0.95em; color: var(--texto-2); }
.popular strong { color: var(--texto); }

@media (max-width: 700px) {
  .pag-produto { padding-top: 1em; padding-bottom: 2em; }
  .produto-layout { display: block; margin-top: 0; }
  .produto-titulo { font-size: 1.75em; }
  .produto-sub { margin-top: 0.3em; font-size: 1em; }
  .etiquetas { gap: 0.4em; margin-top: 0.7em; }
  .etiqueta { padding: 0.2em 0.7em; font-size: 0.86em; }
  .etiqueta svg { display: none; }

  .escolha { display: block; margin-top: 1.1em; padding: 1em; border-radius: 1em; }
  .escolha-bloco + .escolha-bloco { margin-top: 0.9em; }
  .escolha-titulo { margin-bottom: 0.4em; font-size: 1.02em; }
  .escolha-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
  #escolha-forma { grid-template-columns: repeat(2, 1fr); }
  .opcao, #escolha-qtd .opcao { min-width: 0; padding: 0.4em 0.3em; font-size: 1em; }
  .escolha-dica { font-size: 0.88em; }

  .resumo { display: block; margin-top: 1em; padding: 1.1em; border-radius: 1em; }
  .resumo-rotulo { font-size: 0.95em; }
  .resumo-preco { font-size: 2.1em; }
  .resumo-onde { font-size: 0.95em; }
  .resumo-unidade { margin-top: 0.1em; font-size: 0.9em; opacity: 0.92; }
  .economia { max-width: none; margin-top: 0.8em; padding: 0.7em 0.9em; border-radius: 0.8em; }
  .economia-rotulo { font-size: 0.9em; }
  .economia-valor { margin: 0; font-size: 1.45em; }

  .lista-cab { margin: 1.5em 0 0.7em; }
  .lista-cab h2 { font-size: 1.3em; }
  .lista-cab p { font-size: 0.92em; }
  .filtros { display: block; margin: 0; padding: 0; background: none; }
  .filtro-chips { gap: 0.4em; }
  .filtro-chips .chip { padding: 0.3em 0.8em; font-size: 0.95em; white-space: nowrap; }
  .filtro-select { justify-content: space-between; gap: 0.6em; margin: 0.6em 0 0.9em; font-size: 0.95em; }
  .filtro-select select { flex: 1; padding: 0 0.7em; }

  .opcoes { gap: 0.6em; }
  .linha { display: block; padding: 0.9em; border-radius: 1em; }
  .linha-titulo { gap: 0.35em; }
  .linha-nome { margin-right: 0.1em; font-size: 1.05em; }
  .tag { padding: 0.1em 0.55em; font-size: 0.78em; }
  .linha-pacote { font-size: 0.9em; }
  .linha-sobra { margin-top: 0.1em; font-size: 0.86em; }
  .linha-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6em; margin-top: 0.5em; }
  .linha-preco { text-align: left; }
  .linha-total { font-size: 1.45em; }
  .linha-un { margin-top: 0; font-size: 0.85em; }
  .btn-loja { min-height: 46px; padding: 0 1em; border-radius: 0.8em; font-size: 0.98em; }
  .btn-loja svg { display: none; }
  .vazio { padding: 1em; font-size: 0.98em; }
  .nota { margin-top: 0.8em; font-size: 0.88em; }

  .produto-lateral { margin-top: 1.4em; gap: 0.9em; }
  .caixa { padding: 1.1em; border-radius: 1em; }
  .caixa h2 { font-size: 1.1em; }
  .caixa h2 svg { display: none; }
  .caixa p { margin-bottom: 0.45em; font-size: 0.95em; }
  .caixa .pequeno { font-size: 0.9em; }
  .combina h2 { margin-bottom: 0.4em; }
  .combina a { gap: 0.7em; }
  .combina-icone { width: 2.4em; height: 2.4em; font-size: 1.1em; }
  .combina-nome { font-size: 0.95em; }
  .combina-preco { font-size: 0.88em; }
  .popular { padding: 0; font-size: 0.9em; }
}

/* ---------- busca / todos os produtos ---------- */

.pag-busca { padding-top: 2em; padding-bottom: 3em; }
.pag-busca h1 { font-size: 2.3em; line-height: 1.15; letter-spacing: -0.02em; }
.busca-resumo { margin-top: 0.4em; font-size: 1.1em; color: var(--texto-2); }
.busca-vazia {
  margin-top: 1.4em; padding: 1.2em 1.4em; border: 2px dashed var(--borda-2); border-radius: 1.1em;
  font-size: 1.05em; color: var(--texto-2);
}
.busca-vazia p + p { margin-top: 0.4em; }
.busca-vazia strong { color: var(--texto); }
.produtos-grupo { margin-top: 2em; }
.produtos-grupo h2 { margin-bottom: 0.7em; font-size: 1.4em; }
.produtos-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.7em;
}
.produto-item a {
  display: flex; align-items: center; gap: 0.9em; min-height: 4.2em; height: 100%; padding: 0.8em 1em;
  border: 1.5px solid var(--borda); border-radius: 1em; color: var(--texto); text-decoration: none;
}
.produto-item a:hover { border-color: var(--roxo-cartao); box-shadow: 0 8px 22px rgba(60, 20, 120, 0.08); color: var(--texto); }
.produto-icone {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.6em; height: 2.6em; border-radius: 0.7em; font-size: 1.2em;
}
.produto-item-txt { min-width: 0; }
.produto-item-nome { display: block; font-weight: 700; }
.produto-item-sub { display: block; font-size: 0.9em; color: var(--texto-2); }

@media (max-width: 700px) {
  .pag-busca { padding-top: 1.3em; padding-bottom: 2em; }
  .pag-busca h1 { font-size: 1.75em; }
  .busca-resumo { font-size: 1em; }
  .produtos-grupo { margin-top: 1.5em; }
  .produtos-grupo h2 { font-size: 1.2em; }
  .produtos-lista { grid-template-columns: 1fr; gap: 0.6em; }
}

/* ---------- ofertas (página) ---------- */

.pag-ofertas { padding-top: 2.2em; }
.explica-selos { margin-top: 2.5em; }
.explica-selos h2 { font-size: 1.3em; }
.explica-selos ul { list-style: none; margin: 0.6em 0 0.9em; padding: 0; display: flex; flex-direction: column; gap: 0.7em; }
.explica-selos li { color: var(--texto-2); }
.explica-selos .selo { margin-right: 0.4em; }

/* ---------- páginas de texto ---------- */

.pagina { max-width: 800px; margin: 0 auto; padding: 2.5em 1.5em 3.5em; }
.pagina h1 { margin-bottom: 0.5em; font-size: 2.3em; line-height: 1.15; letter-spacing: -0.02em; }
.pagina h2 { margin: 1.6em 0 0.5em; font-size: 1.4em; }
.pagina p, .pagina li { font-size: 1.05em; color: var(--texto-2); }
.pagina p { margin: 0 0 0.8em; }
.pagina ul { margin: 0 0 0.8em; padding-left: 1.3em; }
.pagina li + li { margin-top: 0.4em; }
.pagina strong { color: var(--texto); }
.pagina .pagina-intro { font-size: 1.2em; color: var(--texto); }
.pagina .passos { margin: 1.5em 0 0.5em; }
.pagina .passos p { font-size: 1em; }
.pagina .lista-selos { list-style: none; padding: 0; }
.pagina .lista-selos .selo { margin-right: 0.3em; font-size: 0.8em; }
.pequeno-data { font-size: 0.95em !important; }
.responsavel { margin: 1.5em 0; }
.responsavel p { margin: 0; }
.responsavel-rotulo { font-size: 0.95em !important; font-weight: 700; color: var(--roxo) !important; }
.responsavel-nome { margin-top: 0.1em !important; font-size: 1.5em !important; font-weight: 700; color: var(--texto) !important; }

@media (max-width: 700px) {
  .pagina { padding: 1.5em 1.1em 2.5em; }
  .pagina h1 { font-size: 1.75em; }
  .pagina h2 { font-size: 1.2em; }
  .pagina .pagina-intro { font-size: 1.1em; }
}

/* ---------- rodapé ---------- */

.rodape { border-top: 1px solid var(--borda); background: #FFFFFF; }
.rodape > .cont { padding-top: 2em; padding-bottom: 3em; font-size: 0.95em; color: var(--texto-2); }
.rodape p { margin: 0 0 0.8em; }
.rodape .rodape-forte { margin: 0; font-weight: 700; color: var(--texto); }
.rodape-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.4em; margin: 0 0 1em; padding: 0; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration: none; }

@media (max-width: 700px) {
  .rodape > .cont { padding-top: 1.4em; padding-bottom: 2em; font-size: 0.9em; }
  .rodape p { margin-bottom: 0.7em; }
  .rodape-links { gap: 0 1.1em; }
}

.aviso-real {
  padding: 0.5em 1em; background: var(--verde-fundo); color: var(--verde);
  border-bottom: 1px solid #BFE3CD; font-size: 0.92em; text-align: center;
}

/* ---------- conferência manual (Drogasil e Raia) ---------- */

.linha-data { color: var(--texto-3); }
.conferir-passo { margin: 1.2em 0; }
.pagina .conferir-passo h2 { margin-top: 0; }
.conferir-linha { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; }
.conferir-campo {
  flex: 1 1 14em; min-height: 48px; padding: 0 0.9em; font: inherit;
  border: 2px solid var(--borda-campo); border-radius: 0.8em;
}
.conferir-ok { color: var(--verde) !important; }
.conferir-alerta { color: var(--laranja) !important; }
.conferir-amostra { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 0.6em; }
.conferir-amostra li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 1em;
  padding: 0.8em 1em; border: 1.5px solid var(--borda); border-radius: 1em;
}
.conferir-busca { display: block; font-size: 0.9em; color: var(--texto-3); }
.conferir-lojas { display: flex; flex-wrap: wrap; gap: 0.4em; }
.conferir-status {
  padding: 0.2em 0.7em; border-radius: 999px; font-size: 0.88em; font-weight: 700;
  background: var(--laranja-fundo); color: var(--laranja);
}
.conferir-status.feito { background: var(--verde-fundo); color: var(--verde); }

/* ---------- preço buscado na hora ---------- */

.etiqueta-alerta { background: var(--laranja-fundo); color: var(--laranja); }
.resumo-preco-menor { display: flex; align-items: center; gap: 0.4em; font-size: 1.8em; }
.resumo-buscando {
  flex-basis: 100%; display: flex; align-items: center; gap: 0.5em;
  margin-top: 0.2em; font-size: 0.95em; opacity: 0.92;
}
.girando {
  flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 0.15em solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF;
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }
@media (max-width: 700px) {
  .resumo-preco-menor { font-size: 1.45em; }
  .resumo-buscando { margin-top: 0.8em; }
}

/* ---------- Minha lista ---------- */

.topo-acoes { display: flex; align-items: center; gap: 0.5em; }
.link-lista {
  position: relative; display: inline-flex; align-items: center; gap: 0.4em; min-height: 48px; padding: 0.4em 0.8em;
  border-radius: 999px; color: var(--texto); font-weight: 700; text-decoration: none;
}
.link-lista:hover { background: var(--roxo-claro); color: var(--roxo); }
.lista-contagem {
  min-width: 1.5em; padding: 0.05em 0.45em; border-radius: 999px; background: var(--roxo); color: #FFFFFF;
  font-size: 0.8em; text-align: center;
}
.acoes-lista { margin-top: 0.8em; }
.acoes-lista .btn-contorno { margin-top: 0; }
.acoes-lista-ok { margin-top: 0.5em; font-weight: 700; color: var(--verde); }
.pagina-lista { max-width: 900px; }
.lista-vazia { padding: 1.2em 1.4em; border: 2px dashed var(--borda-2); border-radius: 1.1em; }
.lista-itens { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 0.6em; }
.lista-itens .lista-item {
  margin: 0; padding: 0.6em 0.6em 0.6em 1.1em; border: 1.5px solid var(--borda); border-radius: 1em;
}
.lista-item-nome a { font-weight: 700; font-size: 1.05em; color: var(--texto); }
.lista-item-nome span { display: block; font-size: 0.92em; color: var(--texto-2); }
.lista-item-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; font-size: 0.95em; }
.lista-item-campos label { display: flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--texto); }
.lista-item-campos input, .lista-item-campos select {
  min-height: 44px; padding: 0 0.6em; font: inherit; font-weight: 400; color: var(--texto); background: #FFFFFF;
  border: 2px solid var(--borda-campo); border-radius: 0.7em;
}
.lista-item-campos input { width: 5em; }
.lista-item-campos span { font-weight: 400; color: var(--texto-2); }
.link-remover {
  min-height: 44px; padding: 0 0.4em; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--vermelho); text-decoration: underline;
}
.lista-enviar { margin-top: 1em; padding: 0.9em 1.1em; border-radius: 1em; background: var(--roxo-fundo); }
.pagina .lista-enviar p { margin: 0; }
.lista-enviar p span { display: block; font-size: 0.95em; color: var(--texto-2); }
.lista-enviar-botoes { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.7em; }
.lista-enviar-botoes .btn-contorno { flex: 1 1 12em; width: auto; margin-top: 0; padding: 0 1em; }
.lista-enviar .acoes-lista-ok:empty { display: none; }
.lista-progresso { display: flex; align-items: center; gap: 0.5em; color: var(--texto-2); }
.girando-escuro { border-color: var(--roxo-borda); border-top-color: var(--roxo); }
#lista-resultado { display: flex; flex-direction: column; gap: 0.9em; margin-top: 0.6em; }
.loja-total { padding: 1em 1.2em; border: 1.5px solid var(--borda-2); border-radius: 1.1em; background: #FFFFFF; }
.loja-total.melhor { border: 2px solid var(--roxo); }
.loja-total.combinacao { background: var(--roxo-fundo); border-style: dashed; }
.loja-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.4em 1em; }
.pagina .loja-cab h3 { margin: 0; font-size: 1.2em; }
.pagina .loja-cab p { margin: 0.1em 0 0; font-size: 0.95em; }
.loja-total-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; }
.loja-total-valor strong { font-size: 1.6em; line-height: 1.1; }
.lista-escolhas { list-style: none; padding: 0 !important; margin: 0.6em 0 0 !important; border-top: 1px solid var(--linha); }
.pagina .lista-escolhas li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8em; margin: 0;
  padding: 0.5em 0; border-bottom: 1px solid var(--linha); font-size: 0.98em;
}
.lista-escolha strong { display: block; color: var(--texto); }
.lista-escolha span { display: block; font-size: 0.92em; }
.lista-escolha-preco { display: flex; align-items: center; gap: 0.7em; white-space: nowrap; }
.lista-escolha-preco a { display: inline-flex; align-items: center; gap: 0.2em; min-height: 44px; font-weight: 700; }
.lista-falta span { color: var(--vermelho); }
.pequeno-nota { font-size: 0.92em !important; color: var(--texto-3) !important; }
@media (max-width: 700px) {
  .link-lista { padding: 0.4em 0.6em; }
  .topo-busca .topo-acoes { margin-left: auto; }
  .lista-item-campos { width: 100%; }
  .loja-total-valor { align-items: flex-start; }
}

/* página inicial: atalho para a "Minha lista", logo abaixo da busca */
.atalho-lista {
  display: flex; align-items: center; gap: 0.9em; max-width: 720px; margin: 1.4em auto 0; padding: 0.8em 1.1em;
  border: 2px dashed var(--roxo-borda); border-radius: 1.1em; background: #FFFFFF; color: var(--texto);
  text-align: left; text-decoration: none;
}
.atalho-lista:hover { border-color: var(--roxo); background: var(--roxo-fundo); color: var(--texto); }
.atalho-lista.com-itens { border-style: solid; border-color: var(--roxo); }
.atalho-lista-icone {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em;
  border-radius: 0.8em; background: var(--roxo-claro);
}
.atalho-lista-txt { flex: 1; display: flex; flex-direction: column; gap: 0.1em; }
.atalho-lista-txt strong { color: var(--roxo); }
.atalho-lista-txt span { font-size: 0.95em; color: var(--texto-2); }
.atalho-lista-seta { flex: none; font-size: 1.8em; line-height: 1; color: var(--roxo); }
.busca-lista { margin: 0 0 1.4em; max-width: none; }
@media (max-width: 700px) {
  .atalho-lista { margin-top: 1.1em; padding: 0.7em 0.9em; gap: 0.7em; }
  .atalho-lista-txt span { font-size: 0.9em; }
}

/* ---------- ajustes de usabilidade ---------- */
.btn-resumo-loja {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 48px;
  margin-top: 0.8em; padding: 0 1.3em; border-radius: 0.9em; background: #FFFFFF; color: var(--roxo);
  font-weight: 700; text-decoration: none;
}
.btn-resumo-loja:hover { background: var(--roxo-claro); color: var(--roxo-hover); }
.btn-resumo-loja:focus-visible { outline: 3px solid var(--foco, #F2A93B); outline-offset: 2px; }
.acoes-lista-ok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em 1em;
  padding: 0.6em 0.6em 0.6em 1.1em; border: 2px solid #BFE3CD; border-radius: 1em; background: #E3F4EA; }
.acoes-lista-ok span { color: var(--verde); }
.acoes-lista-ok .btn-roxo { min-height: 46px; }

.btn-pequeno {
  min-height: 44px; padding: 0 1em; border: 2px solid var(--borda-2); border-radius: 0.8em; background: #FFFFFF;
  font: inherit; font-size: 0.95em; font-weight: 700; color: var(--roxo); cursor: pointer;
}
.btn-pequeno:hover { background: var(--roxo-claro); border-color: var(--roxo-borda); }
.btn-remover {
  min-width: 44px; min-height: 44px; border: none; border-radius: 999px; background: none; cursor: pointer;
  font-size: 1.05em; color: var(--texto-2);
}
.btn-remover:hover { background: #FBE9E9; color: var(--vermelho); }
.lista-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.lista-item-nome { min-width: 0; }
.lista-item-botoes { display: flex; align-items: center; gap: 0.2em; flex: none; }
.lista-item .lista-item-campos { margin-top: 0.6em; padding: 0.7em 0.5em 0.2em 0; border-top: 1px solid var(--linha); }
.lista-item .lista-item-campos[hidden] { display: none; }

.loja-total.melhor { padding: 1.1em 1.3em; }
.loja-total.melhor .tag-melhor { display: inline-block; margin-bottom: 0.3em; }
.loja-total.melhor .loja-total-valor strong { font-size: 2em; color: var(--roxo); }
.loja-acoes { margin-top: 0.6em; }
.lista-outras-titulo { margin: 0.6em 0 0 !important; font-size: 1.15em; }
.lista-outras { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0.6em; }
.pagina .lista-outras .loja-outra { margin: 0; padding: 0.8em 1.1em; border: 1.5px solid var(--borda); border-radius: 1em; }
.pagina .loja-outra h4 { margin: 0; font-size: 1.08em; }
.pagina .loja-outra .loja-cab p { margin: 0.1em 0 0; font-size: 0.92em; }
.loja-outra .loja-total-valor strong { font-size: 1.3em; }
.loja-outra.incompleta .loja-total-valor strong { color: var(--texto-2); font-size: 1.1em; }
.pagina .loja-cab p.loja-falta { color: var(--vermelho); }
.loja-mais { font-size: 0.9em; color: var(--texto-2); }
@media (max-width: 700px) {
  .btn-resumo-loja { display: flex; width: 100%; }
  .acoes-lista-ok .btn-roxo { flex: 1; }
  .lista-item-campos label { flex-wrap: wrap; }
  .pagina .lista-outras .loja-cab { flex-wrap: nowrap; }
  .lista-outras .loja-total-valor { align-items: flex-end; }
  .loja-total.melhor .loja-cab { flex-wrap: nowrap; }
  .loja-total.melhor .loja-total-valor { align-items: flex-end; }
  .loja-total.melhor .loja-total-valor strong { font-size: 1.6em; }
}

/* forma e dose perguntadas já na busca */
.sug-passo { padding: 0.9em 1em 1em; outline: none; }
.sug-passo-cab { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.4em; }
.sug-voltar {
  min-height: 44px; padding: 0 0.8em; border: none; border-radius: 0.8em; background: var(--roxo-fundo);
  font: inherit; font-size: 0.95em; font-weight: 700; color: var(--roxo); cursor: pointer;
}
.sug-voltar:hover { background: var(--roxo-claro); }
.sug-passo-nome { margin: 0; font-size: 1.15em; font-weight: 700; }
.sug-pergunta { margin: 0.7em 0 0.4em; font-weight: 700; }
.sug-pergunta span { font-weight: 400; color: var(--texto-2); }
.sug-opcoes { display: flex; flex-wrap: wrap; gap: 0.45em; }
.sug .sug-opcao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 4.5em;
  padding: 0 1em; border: 2px solid var(--borda-2); border-radius: 0.9em; background: #FFFFFF;
  font: inherit; font-weight: 700; color: var(--texto); text-decoration: none; cursor: pointer;
}
.sug .sug-opcao:hover, .sug .sug-opcao:focus { border-color: var(--roxo); background: var(--roxo-fundo); color: var(--roxo); }
.sug .sug-opcao[aria-pressed=true] { background: var(--roxo); border-color: var(--roxo); color: #FFFFFF; }
.sug .sug-dose { border-color: var(--roxo-borda); color: var(--roxo); }
.sug .sug-dose.sugerida { border-color: var(--roxo); background: var(--roxo-claro); }
.sug .sug-todas {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.6em; padding: 0; border: none;
  font-size: 0.95em; font-weight: 700; color: var(--roxo); text-decoration: underline;
}
.sug .sug-todas:hover, .sug .sug-todas:focus { background: none; }

.escolha.fechada .escolha-bloco:not(#bloco-qtd) { display: none; }
.escolha-resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 1em; }
.escolha-resumo p { margin: 0; font-size: 1.1em; }
.escolha-resumo p span { display: block; font-size: 0.85em; color: var(--texto-2); }
.escolha-resumo[hidden] { display: none; }
.escolha.fechada #bloco-qtd:not([hidden]) { margin-top: 0.6em; }
@media (max-width: 700px) {
  .sug-passo { padding: 0.8em 0.8em 0.9em; }
  .sug .sug-opcao { min-height: 46px; padding: 0 0.8em; font-size: 0.95em; }
}

/* conferência: vários produtos de uma página de busca */
.conferir-recebidos { list-style: none; padding: 0 !important; margin: 0.8em 0 !important; display: flex; flex-direction: column; gap: 0.4em; }
.pagina .conferir-recebidos li { margin: 0; }
.conferir-recebidos label {
  display: flex; align-items: flex-start; gap: 0.7em; padding: 0.6em 0.8em; border: 1.5px solid var(--borda);
  border-radius: 0.8em; background: #FFFFFF; cursor: pointer;
}
.conferir-recebidos input { width: 1.4em; height: 1.4em; margin-top: 0.15em; flex: none; }
.conferir-recebidos label > span { flex: 1; display: flex; flex-direction: column; gap: 0.1em; }
.conferir-recebidos label > span span { font-size: 0.92em; color: var(--texto-2); }
.conferir-recebidos .conferir-na-loja { color: var(--texto-3) !important; }
.conferir-preco { flex: none; font-size: 1.1em; }
.conferir-outros summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.conferir-outros ul { font-size: 0.92em; color: var(--texto-2); }

/* página do remédio vinda de uma marca: as outras marcas ficam num bloco à parte */
.outras-marcas { margin-top: 1.2em; }
.outras-marcas .btn-outras { margin-top: 0; border-style: dashed; color: var(--texto); border-color: var(--borda-2); }
.outras-marcas .btn-outras[aria-expanded=true] { border-style: solid; }
.outras-marcas #outras-corpo .lista-cab { margin-top: 1.2em; }

/* busca: etiqueta da dose mais comum de cada forma */
.sug-comum { display: inline-block; margin-left: .35em; padding: .05em .45em; border-radius: 999px; font-size: .78em;
  font-weight: 700; background: var(--roxo-claro, #F1EAFB); color: var(--roxo, #5B21B6); vertical-align: middle; }

/* busca com erro de digitação: "Você quis dizer losartana?" */
.sug-correcao { margin: 0; padding: .7em 1em; font-size: .95em; color: var(--texto); background: var(--roxo-fundo);
  border-bottom: 1px solid var(--borda); }
.sug-correcao strong { color: var(--roxo); }

/* Melhorias da página do remédio (29/10/2026) */
/* selo de receita: borda forte e ícone também no celular, sozinho na linha */
.etiqueta-receita { background: #FFFFFF; border: 2px solid var(--texto-2); color: var(--texto); font-weight: 700; }
.pag-produto .etiqueta-alerta { border: 2px solid var(--laranja); font-weight: 700; }
.link-outra { display: block; font-size: 0.95em; }
.escolha-outra[hidden] { display: none; }
/* farmácia em destaque na lista e preços com algarismos alinhados */
.linha-loja { color: var(--texto); font-size: 1.02em; }
.linha-total, .resumo-preco, .economia-valor, .linha-un { font-variant-numeric: tabular-nums; }
.economia-ref { margin: 0.2em 0 0; font-size: 0.9em; color: var(--texto-2); }
@media (max-width: 700px) {
  .etiqueta-receita svg, .pag-produto .etiqueta-alerta svg { display: inline-block; }
  .pag-produto .etiqueta-alerta { font-size: 0.95em; padding: 0.3em 0.8em; }
  .etiqueta-receita { font-size: 0.95em; padding: 0.3em 0.8em; }
  /* "Por caixa", 30, 60, 90 numa fileira só */
  #escolha-qtd { grid-template-columns: repeat(4, 1fr); }
  #escolha-qtd .opcao { font-size: 0.92em; padding: 0.4em 0.1em; white-space: nowrap; }
}

/* Escolha de farmácias (página do remédio e Minha lista) */
.escolha-lojas { margin: 0 0 0.4em; }
.painel-lojas { margin: 0.3em 0 1em; padding: 1em 1.1em; border: 2px solid var(--borda-2); border-radius: 1em; background: #FFFFFF; }
.painel-lojas[hidden] { display: none; }
.painel-lojas legend { padding: 0 0.3em; font-weight: 700; font-size: 1.05em; }
.painel-lojas-dica { margin: 0 0 0.6em; color: var(--texto-2); font-size: 0.95em; }
.painel-lojas-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 0.4em 1em; }
.loja-opcao { display: flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 0 0.6em; border-radius: 0.7em;
  cursor: pointer; font-weight: 700; }
.loja-opcao:hover { background: var(--cinza); }
.loja-opcao input { width: 1.4em; height: 1.4em; margin: 0; accent-color: var(--roxo); flex: none; }
.painel-lojas-aviso { margin: 0.4em 0 0; font-weight: 700; color: #8A1C1C; }
.painel-lojas-aviso:empty { display: none; }
@media (max-width: 700px) {
  .painel-lojas { padding: 0.8em; }
  .painel-lojas-opcoes { grid-template-columns: 1fr; gap: 0.1em; }
}

/* Conferência: configuração recolhida, lista "Para conferir" e preços conferidos (30/10/2026) */
.conferir-config { margin: 1em 0; }
.conferir-config > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.pagina .conferir-config h2 { font-size: 1.15em; margin-top: 1em; }
.conferir-secao { margin-top: 2em; }
.conferir-resumo { font-weight: 700; }
.conferir-fila { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 0.5em; }
.pagina .conferir-fila li {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 1em;
  padding: 0.7em 1em; border: 1.5px solid var(--borda); border-radius: 1em;
}
.conferir-fila li > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2em; }
.conferir-btn {
  display: inline-flex; width: auto; min-height: 48px; margin: 0; padding: 0 1em; font-size: 0.95em; border-radius: 0.8em;
}
.conferir-btn:disabled { opacity: 0.5; cursor: default; }
.conferir-em-dia { margin-top: 0.8em; }
.conferir-em-dia > summary, .conferir-remessas > summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700;
}
.conferir-outro { margin-top: 1em; }
.conferir-remessas ul { list-style: none; padding: 0 !important; }
.pagina .conferir-remessas li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em; margin: 0.3em 0;
}
.conferir-ferramentas { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.8em 0; }
.conferir-grupo h3 { margin: 1.2em 0 0.4em; font-size: 1.1em; }
.conferir-grupo h3 span { color: var(--texto-3); font-weight: 400; }
.conferir-grupo ul { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 0.4em; }
.pagina .conferir-grupo li {
  margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4em 0.8em;
  padding: 0.7em 0.9em; border: 1.5px solid var(--borda); border-radius: 0.9em;
}
.conferir-marcar { width: 1.4em; height: 1.4em; margin-top: 0.2em; flex: none; accent-color: var(--roxo); }
.conferir-produto { flex: 1 1 16em; display: flex; flex-direction: column; gap: 0.15em; }
.conferir-produto > span { font-size: 0.92em; color: var(--texto-2); }
.conferir-corrigir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.8em; margin-top: 0.5em; }
.conferir-corrigir[hidden] { display: none; }
.conferir-corrigir .conferir-campo { width: 7em; flex: none; margin-left: 0.4em; }
.conferir-estoque { display: inline-flex; align-items: center; gap: 0.4em; min-height: 48px; }
.conferir-estoque input { width: 1.3em; height: 1.3em; }
.conferir-acoes { display: flex; gap: 0.4em; flex-wrap: wrap; }
.conferir-remover { border-color: #8A1C1C; color: #8A1C1C; }
@media (max-width: 700px) {
  .conferir-acoes { width: 100%; }
  .conferir-acoes .conferir-btn { flex: 1; justify-content: center; }
}

/* Conferência: sequência automática; a janelinha aberta pelo botão mostra só o resultado */
.conferir-sequencia { margin: 0.8em 0 1em; }
.conferir-sequencia p { margin: 0.3em 0; }
.conferir-modo-auto .conferir-secao, .conferir-modo-auto #config, .conferir-modo-auto .pagina-intro,
.conferir-modo-auto .aviso-exemplo, .conferir-modo-auto header, .conferir-modo-auto footer { display: none !important; }
.conferir-modo-auto .pagina h1 { font-size: 1.3em; }

/* Preços do lote de madrugada, prontos no HTML (frase de resposta e tabelas) */
.resposta-precos { margin: 0.8em 0 0.4em; max-width: 46em; color: var(--texto-2); font-size: 0.98em; line-height: 1.5; }
.precos-dia { margin-top: 2em; }
.precos-dia h2 { font-size: 1.3em; }
.precos-dia-sub { margin: 0.3em 0 0.6em; font-size: 0.92em; color: var(--texto-3); }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.4em 0 0.8em; }
.tabela-precos { width: 100%; border-collapse: collapse; font-size: 0.93em; font-variant-numeric: tabular-nums; }
.tabela-precos th, .tabela-precos td { padding: 0.55em 0.7em; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela-precos thead th { font-size: 0.9em; color: var(--texto-2); background: var(--cinza); white-space: nowrap; }
.tabela-precos tbody th { font-weight: 700; }
.tabela-precos a { color: var(--roxo); }
.tabela-sub { color: var(--texto-3); font-size: 0.9em; }
.precos-dia-tudo > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--roxo); }
@media (max-width: 700px) {
  .tabela-precos { font-size: 0.88em; }
  .tabela-precos th, .tabela-precos td { padding: 0.5em 0.5em; }
}
.tabela-precos .num { white-space: nowrap; }

/* Painel do dono (/painel/) */
.pagina-painel { max-width: 1100px; }
.painel-dono { display: flex; align-items: flex-start; gap: 0.6em; margin-top: 0.6em; cursor: pointer; }
.painel-dono input { width: 1.4em; height: 1.4em; margin-top: 0.15em; flex: none; accent-color: var(--roxo); }
.painel-abas { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 1em 0; border-bottom: 2px solid var(--borda); }
.painel-abas button, .painel-abas a {
  min-height: 48px; padding: 0 1.1em; border: none; background: none; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--texto-2); border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center;
}
.painel-abas a { margin-left: auto; color: var(--roxo); }
.painel-abas button[aria-selected=true] { color: var(--roxo); border-bottom-color: var(--roxo); }
.painel-aba h2 { font-size: 1.15em; margin: 1.2em 0 0.4em; }
.painel-status { padding: 0.8em 1em; border-radius: 0.8em; font-weight: 700; }
.painel-avisos { margin: 0.6em 0 1em; padding: 0.9em 1.1em; border: 2px solid #B45309; border-radius: 1em; background: #FFF8EC; }
.pagina .painel-avisos h2 { margin: 0 0 0.4em; color: #7A4B00; }
.painel-avisos ul { margin: 0; padding-left: 1.2em !important; }
.pagina .painel-avisos li { margin: 0.45em 0; }
.painel-aviso-ruim { color: #8A1C1C; }
.painel-avisos-ok { border-color: var(--verde); background: var(--verde-fundo); color: var(--verde); }
.link-aba { padding: 0; border: none; background: none; font: inherit; color: var(--roxo); text-decoration: underline; cursor: pointer; }
.painel-linha-ruim th, .painel-linha-ruim td { background: #FDECEC; }
.painel-aba h3 { font-size: 1.02em; margin: 0.9em 0 0.3em; }
.painel-status-bom { background: var(--verde-fundo); color: var(--verde); }
.painel-status-ruim { background: var(--laranja-fundo); color: var(--laranja); }
.painel-numeros { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.8em 0; }
.painel-numeros p { flex: 1 1 12em; margin: 0; padding: 0.8em 1em; border: 1.5px solid var(--borda); border-radius: 0.8em; }
.painel-numeros strong { display: block; font-size: 1.6em; color: var(--roxo); }
.painel-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 0 1.5em; }
.painel-lista { padding-left: 1.4em !important; }
.pagina .painel-lista li { margin: 0.25em 0; }
.painel-n { display: inline-block; min-width: 1.6em; padding: 0 0.4em; border-radius: 999px; background: var(--roxo-claro, #F1EAFB);
  color: var(--roxo); font-weight: 700; font-size: 0.85em; text-align: center; }
.painel-data, .painel-vazio, .painel-dica { color: var(--texto-3); font-size: 0.92em; }
.painel-barra { display: inline-block; width: 8em; height: 0.7em; border-radius: 999px; background: var(--cinza); vertical-align: middle; overflow: hidden; }
.painel-barra span { display: block; height: 100%; background: var(--roxo); }
.painel-barra span.cheia { background: #B45309; }
.painel-cartoes { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 0.4em; }
.pagina .painel-cartoes li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5em 1em; padding: 0.7em 1em; border: 1.5px solid var(--borda); border-radius: 0.9em; }
.painel-cartoes li > div { display: flex; flex-direction: column; gap: 0.15em; }
.painel-cartoes li > div span { font-size: 0.92em; color: var(--texto-2); }
#lote-filtro { margin: 0.4em 0 0.8em; width: 100%; }
/* botões do modo dono nas páginas de remédio */
.dono-botao { margin-top: 0.4em; padding: 0.25em 0.7em; border: 1.5px dashed #8A1C1C; border-radius: 0.6em; background: #FFF;
  color: #8A1C1C; font: inherit; font-size: 0.85em; font-weight: 700; cursor: pointer; }
.dono-lote { margin: 0.5em 0; font-size: 0.9em; color: var(--texto-2); }

/* Leitor de código de barras pela câmera (site/js/leitor.js) */
.botao-leitor {
  position: absolute; right: 0.35em; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 0.8em; background: transparent; color: var(--roxo); cursor: pointer;
}
.botao-leitor:hover { background: var(--roxo-claro, #F1EAFB); }
.botao-leitor svg { position: static; transform: none; pointer-events: none; }
.campo.com-leitor input { padding-right: 3.4em !important; }
.busca-topo .botao-leitor { width: 44px; height: 44px; right: 0.2em; }
.leitor-aberto, .leitor-aberto body { overflow: hidden; }
.leitor {
  position: fixed; inset: 0; z-index: 1000; background: #000; color: #FFF;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.leitor[hidden] { display: none; }
.leitor-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leitor-moldura {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(86vw, 520px); height: min(34vh, 220px); border: 3px solid #FFF; border-radius: 1em;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}
.leitor-linha {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #F2A93B;
  animation: leitor-varre 1.6s ease-in-out infinite alternate;
}
@keyframes leitor-varre { from { transform: translateY(-60px); } to { transform: translateY(60px); } }
@media (prefers-reduced-motion: reduce) { .leitor-linha { animation: none; } }
.leitor-texto {
  position: relative; margin: 0 1em 1em; max-width: 30em; text-align: center; font-size: 1.15em; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.leitor-botoes { position: relative; display: flex; gap: 0.6em; margin-bottom: max(1.2em, env(safe-area-inset-bottom)); }
.leitor-botao {
  min-height: 52px; padding: 0 1.4em; border-radius: 1em; border: 2px solid #FFF; background: rgba(0, 0, 0, 0.35);
  color: #FFF; font: inherit; font-size: 1.05em; font-weight: 700; cursor: pointer;
}
.leitor-cancelar { background: #FFF; color: #1B1F23; }
.leitor-botoes { flex-wrap: wrap; justify-content: center; padding: 0 1em; }
.leitor-pausado .leitor-moldura { display: none; }
.leitor-pausado .leitor-texto { margin-bottom: 1.5em; font-size: 1.25em; }
.link-leitor {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; margin: 0.3em 0 0; padding: 0 0.2em;
  border: none; background: none; color: var(--roxo); font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-leitor svg { flex: none; }

/* ---------- página inicial (01/11/2026; docs/tela-inicial/RELATORIO-FINAL-tela-inicial.md) ---------- */
.ini { --roxo-noite: #2E1065; --lilas: #F1EAFB; }
.ini-hero { background: var(--roxo-noite); color: #FFFFFF; padding: 2.4rem 0 3rem; }
.ini-hero-g { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
.ini-hero-g > * { min-width: 0; }
.ini-hero-g.ini-sem-quadro { grid-template-columns: minmax(0, 46rem); }
.ini-status {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 0.9rem; padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  font-size: 0.92rem; color: #EDE6FA;
}
.ini-vivo { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; flex: none; animation: ini-pulsa 2s ease-out infinite; }
@keyframes ini-pulsa { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } }
.ini-hero h1 { font-size: 2.45rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 0.6rem; max-width: 20ch; }
.ini-sub { font-size: 1.12rem; color: #DDD3F3; margin: 0 0 1.2rem; max-width: 40ch; }

/* caixa de busca */
.ini-busca {
  background: #FFFFFF; color: var(--texto); border-radius: 22px; padding: 1.2rem 1.2rem 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.08);
}
.ini-rotulo { display: block; font-size: 1.15rem; font-weight: 700; margin: 0 0 0.55rem; }
.ini-cb-linha { display: flex; gap: 0.55rem; }
.ini-cb-campo { flex: 1; min-width: 0; position: relative; }
.ini-busca .campo svg { left: 0.85rem; }
.ini-busca .campo input {
  height: 3.8rem; padding: 0 3rem 0 2.7rem; font-size: 1.22rem; border: 2.5px solid var(--roxo); border-radius: 16px;
  box-shadow: none;
}
.ini-busca .campo input::placeholder { color: #6B7480; }
.ini-busca .campo input:focus { outline: none; border-color: var(--roxo-hover); box-shadow: 0 0 0 5px rgba(242, 169, 59, 0.55); }
.ini-limpar {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); cursor: pointer;
}
.ini-busca .ini-limpar svg { position: static; transform: none; }
.ini-buscar {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3.8rem; padding: 0 1.5rem;
  border: 0; border-radius: 16px; background: var(--roxo); color: #FFFFFF; font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.ini-buscar:hover { background: var(--roxo-hover); }
.ini-acoes { display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--borda); }
.ini-acoes.com-camera { grid-template-columns: 1fr 1fr; }
.ini-acao {
  display: flex; align-items: center; gap: 0.6rem; min-height: 3.1rem; padding: 0.45rem 0.7rem; border-radius: 12px;
  border: 1.5px solid var(--borda-2); background: #FFFFFF; color: var(--texto); text-decoration: none; font: inherit; cursor: pointer; text-align: left;
}
.ini-acao:hover { border-color: var(--roxo); color: var(--texto); }
.ini-acao strong { font-size: 1rem; line-height: 1.25; }
.ini-ic { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; }
.ini-cam .ini-ic { background: var(--laranja-fundo); color: var(--laranja); }
.ini-lst .ini-ic { background: var(--lilas); color: var(--roxo); }
.ini-lst.tem { border-color: var(--roxo); background: var(--roxo-fundo); }

/* sugestões da busca na inicial */
.ini-busca .sug { position: absolute; left: 0; right: 0; top: calc(100% + 0.45rem); z-index: 30; border-radius: 16px; }
@media (min-width: 701px) {
  /* no computador as sugestões ocupam a largura do campo + Buscar (o texto não quebra tanto) */
  .ini-cb-linha { position: relative; }
  .ini-cb-campo { position: static; }
}
.ini-busca .campo input:placeholder-shown { padding-right: 0.8rem; }
html.letra-grande .ini-busca .campo input { font-size: 1.08rem; }  /* a letra já subiu: o texto de exemplo cabe */
.ini-busca .sug-tipo, .ini-busca .sug-sub .so-cel { display: none !important; }
.sug .sug-com-acao { display: flex; align-items: center; gap: 0.5rem; padding-right: 0.6rem; border-bottom: 1px solid var(--linha); }
.sug .sug-com-acao > a { flex: 1; min-width: 0; border-bottom: none; }
.sug-selo { flex: none; padding: 0.15rem 0.5rem; border-radius: 8px; border: 1.5px solid; font-size: 0.75rem; font-weight: 700; }
.sug-selo.isento { color: var(--verde); background: var(--verde-fundo); border-color: #9FD4B3; }
.sug-selo.rx { color: #8A1C1C; background: #FDECEC; border-color: #F2B8B8; }
.sug-mais {
  flex: none; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.7rem; padding: 0 0.7rem; border-radius: 10px;
  border: 1.5px solid var(--roxo); background: #FFFFFF; color: var(--roxo); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.sug-mais.ok { background: var(--verde-fundo); border-color: var(--verde); color: var(--verde); }
.sug-rod { margin: 0; padding: 0.7rem 1rem; border-top: 1px solid var(--borda); font-size: 0.9rem; color: var(--texto-2); }

/* quadro do exemplo sem receita */
.ini-quadro, .ini-cartao { margin: 0; background: #FFFFFF; color: var(--texto); border-radius: 18px; padding: 1.3rem 1.3rem 1rem; }
.ini-quadro { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.ini-q-corpo { transition: opacity 0.3s ease, transform 0.3s ease; }
.ini-q-corpo.saindo { opacity: 0; transform: translateX(-12px); }
.ini-q-topo h2, .ini-cartao h3 { font-size: 1.3rem; margin: 0; }
.ini-q-dif { display: inline-block; margin: 0.45rem 0 0; padding: 0.3rem 0.65rem; border-radius: 10px; background: var(--verde-fundo); color: var(--verde); font-weight: 700; }
.ini-q-det { margin: 0.35rem 0 0.55rem; color: var(--texto-2); font-size: 0.95rem; }
.ini-selo { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 8px; border: 1.5px solid; font-size: 0.85rem; font-weight: 700; }
.ini-selo.isento { color: var(--verde); background: var(--verde-fundo); border-color: #9FD4B3; }
.ini-selo.rx { color: #8A1C1C; background: #FDECEC; border-color: #F2B8B8; }
.ini-barras { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ini-b { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 0.7rem; color: var(--texto); text-decoration: none; }
a.ini-b { min-height: 48px; padding: 0.2rem 0.4rem; margin: 0 -0.4rem; border-radius: 10px; }
a.ini-b:hover { background: var(--lilas); color: var(--texto); }
a.ini-b .ini-b-loja { text-decoration: underline; text-decoration-color: var(--roxo-cartao); text-underline-offset: 3px; }
.ini-b-valor { font-weight: 700; text-align: right; }
.ini-b-prod { grid-column: 1 / -1; font-size: 0.85rem; color: var(--texto-2); line-height: 1.35; }
.ini-b-trilho { grid-column: 1 / -1; height: 12px; background: #F1F2F4; border-radius: 6px; overflow: hidden; }
.ini-b-barra { display: block; height: 100%; width: var(--w); background: #B9A5E3; border-radius: 6px; transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ini-barras li:first-child .ini-b-barra { background: var(--verde); }
.ini-barras li:first-child .ini-b-loja, .ini-barras li:first-child .ini-b-valor { color: var(--verde); font-weight: 700; }
.ini-barras.espera .ini-b-barra { width: 0 !important; }
.ini-q-rod { margin-top: 0.9rem; padding-top: 0.65rem; border-top: 1px solid var(--borda); display: grid; gap: 0.15rem; font-size: 0.85rem; color: var(--texto-2); }
.ini-q-rod p:empty { display: none; }
.ini-troca { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 0.8rem; padding-top: 0.65rem; border-top: 1px solid var(--borda); font-size: 0.88rem; color: var(--texto-2); }
.ini-troca-rot { white-space: nowrap; }
.ini-pontos { display: flex; gap: 6px; flex: 1; }
.ini-pontos button {
  position: relative; flex: 1; min-width: 18px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: #E7E2F0;
  overflow: visible; cursor: pointer;
}
.ini-pontos button::before { content: ""; position: absolute; inset: -19px 0; }
.ini-pontos button.visto { background: #B9A5E3; }
.ini-pontos button[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; background: var(--roxo); transform-origin: left;
  animation: ini-enche 6s linear forwards;
}
.ini-quadro.parado .ini-pontos button[aria-current="true"]::after { animation-play-state: paused; }
.ini-quadro.sem-movimento .ini-pontos button[aria-current="true"]::after { animation: none; transform: none; }
@keyframes ini-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ini-pausa { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid var(--borda-2); background: #FFFFFF; color: var(--texto); cursor: pointer; }
.ini-pausa:hover { border-color: var(--roxo); color: var(--roxo); }

/* passos */
.ini-passos { background: #FFFFFF; border-bottom: 1px solid var(--borda); }
.ini-passos ol { list-style: none; margin: 0 auto; padding-top: 1.2rem; padding-bottom: 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: ini-p; }
.ini-passos li { counter-increment: ini-p; display: flex; gap: 0.8rem; align-items: center; font-size: 1.02rem; }
.ini-passos li::before { content: counter(ini-p); flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--lilas); color: var(--roxo); font-weight: 700; display: grid; place-items: center; }

/* preços nas farmácias: abas e linhas que abrem */
.ini-sec { padding: 3rem 0; }
.ini-sec h2 { font-size: 1.85rem; margin: 0 0 0.6rem; }
.ini-intro { color: var(--texto-2); margin: 0 0 1rem; max-width: 66ch; }
.ini-nota { font-size: 0.9rem; color: var(--texto-2); margin-top: 0.8rem; max-width: 80ch; }
.ini-abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); margin: 0 0 1.2rem; overflow-x: auto; }
.ini-abas button {
  min-height: 52px; padding: 0.6rem 1rem; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-size: 1.02rem; color: var(--texto-2); cursor: pointer; white-space: nowrap;
}
.ini-abas button[aria-selected="true"] { color: var(--roxo); border-bottom-color: var(--roxo); font-weight: 700; }
.ini-linhas { border-top: 2px solid var(--texto); }
.ini-l-cab, .ini-linha-btn { display: grid; grid-template-columns: 1.5fr 1fr 0.9fr 0.8fr auto; gap: 0.6rem; align-items: center; }
.ini-l-cab { padding: 0.55rem 0.6rem; font-size: 0.9rem; color: var(--texto-2); font-weight: 700; }
.ini-linha { border-bottom: 1px solid var(--borda); }
.ini-linha-btn {
  width: 100%; min-height: 64px; padding: 0.8rem 0.6rem; border: 0; background: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.ini-linha-btn:hover { background: var(--roxo-fundo); }
.ini-linha-btn:focus-visible { outline-offset: -3px; }
.ini-l-nome strong { display: block; font-size: 1.1rem; }
.ini-l-nome span { color: var(--texto-2); font-size: 0.92rem; }
.ini-l-menor { color: var(--verde); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.ini-l-menor small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--texto-2); }
.ini-l-maior { white-space: nowrap; }
.ini-l-ver { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; color: var(--roxo); font-weight: 700; font-size: 0.92rem; }
.ini-l-seta { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--lilas); transition: transform 0.2s; }
.ini-linha[data-aberta="1"] .ini-l-seta { transform: rotate(180deg); }
.ini-l-lojas { margin: 0 0.6rem 1rem; padding: 0.8rem 0.9rem; background: var(--roxo-fundo); border: 1px solid #E7DDF7; border-radius: 12px; }
.ini-l-lojas > p { margin: 0 0 0.5rem; font-size: 0.92rem; color: var(--texto-2); }
.ini-l-lojas .ini-barras { margin: 0; }
.ini-l-lojas .ini-l-reg { margin: 0.7rem 0 0; font-size: 0.85rem; }
.ini-l-acoes { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.8rem; }
.ini-btn-sec {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; padding: 0 0.9rem; border-radius: 12px; border: 1.5px solid var(--roxo);
  background: #FFFFFF; color: var(--roxo); font: inherit; font-size: 0.95rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ini-btn-sec:hover { background: var(--lilas); color: var(--roxo); }
.ini-btn-sec.ok { background: var(--verde-fundo); border-color: var(--verde); color: var(--verde); }

/* bloco da lista */
.ini-bloco-lista { background: var(--lilas); }
.ini-bl-g { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.ini-bl-g.ini-sem-exemplo { grid-template-columns: minmax(0, 46rem); }
.ini-bl-g > div > p { color: var(--texto-2); margin: 0 0 1rem; max-width: 46ch; }
.ini-bl-btn {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3.4rem; padding: 0 1.4rem; border-radius: 16px;
  background: var(--roxo); color: #FFFFFF; font-weight: 700; font-size: 1.1rem; text-decoration: none;
}
.ini-bl-btn:hover { background: var(--roxo-hover); color: #FFFFFF; }
.ini-bl-sua { margin-top: 0.8rem; font-weight: 700; color: var(--roxo-hover); }
.ini-cartao { box-shadow: 0 10px 30px rgba(46, 16, 101, 0.12); }
.ini-lista-it { list-style: none; margin: 0.7rem 0 0.3rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; }
.ini-lista-it li { position: relative; padding-left: 0.9rem; font-weight: 700; font-size: 0.98rem; }
.ini-lista-it li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--roxo); }
.ini-lista-it span { display: block; font-weight: 400; color: var(--texto-2); font-size: 0.85rem; }
.ini-tot { margin: 0.9rem 0 0; font-weight: 700; }

/* garantias */
.ini-garantias { border-top: 1px solid var(--borda); }
.ini-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ini-tres h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.ini-tres p { color: var(--texto-2); }

/* aviso que aparece embaixo ao incluir na lista */
.ini-aviso {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 60; max-width: calc(100% - 2rem); display: flex; gap: 0.8rem; align-items: center;
  padding: 0.8rem 1rem; border-radius: 14px; background: var(--texto); color: #FFFFFF; font-size: 1rem;
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); transition: opacity 0.25s, transform 0.25s;
}
.ini-aviso.on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.ini-aviso a { color: #FFFFFF; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ini-vivo, .ini-pontos button[aria-current="true"]::after { animation: none; }
  .ini-q-corpo, .ini-b-barra, .ini-l-seta, .ini-aviso { transition: none; }
}
@media (max-width: 900px) {
  .ini-hero-g { grid-template-columns: 1fr; gap: 1.6rem; }
  .ini-bl-g { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 700px) {
  .ini-hero { padding: 1.2rem 0 1.8rem; }
  .ini-status { font-size: 0.85rem; margin-bottom: 0.65rem; }
  .ini-hero h1 { font-size: 1.75rem; margin-bottom: 0.45rem; }
  .ini-sub { font-size: 1rem; margin-bottom: 0.9rem; }
  .ini-busca { padding: 0.9rem 0.8rem 0.8rem; border-radius: 18px; margin: 0 -0.25rem; }
  .ini-cb-linha { flex-direction: column; }
  .ini-busca .campo input { font-size: 1.12rem; padding-left: 2.5rem; }
  .ini-busca .campo svg { left: 0.7rem; }
  .ini-buscar { min-height: 3.4rem; }
  .ini-acao { gap: 0.45rem; padding: 0.45rem 0.55rem; }
  .ini-acao strong { font-size: 0.92rem; }
  .ini-ic { width: 1.9rem; height: 1.9rem; }
  .ini-quadro, .ini-cartao { padding: 1rem 0.9rem 0.8rem; }
  .ini-passos ol { grid-template-columns: 1fr; gap: 0.7rem; padding-top: 1rem; padding-bottom: 1rem; }
  .ini-sec { padding: 2rem 0; }
  .ini-sec h2 { font-size: 1.45rem; }
  .ini-l-cab, .ini-linha-btn { grid-template-columns: 1.4fr 0.9fr auto; }
  .ini-l-venda, .ini-l-maior, .ini-l-ver-t { display: none; }
  .ini-lista-it { grid-template-columns: 1fr; }
  .ini-tres { grid-template-columns: 1fr; gap: 1.1rem; }
  .sug-selo { display: none; }
}

/* ---------- página do remédio (03/11/2026; docs/pagina-resultado/RELATORIO-pagina-resultado.md) ---------- */
.rm-pag { --roxo-noite: #2E1065; --lilas: #F1EAFB; }
.rm { background: var(--roxo-noite); color: #FFFFFF; padding: 1.2rem 0 2.4rem; }
.rm-voltar { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; color: #DDD3F3; font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.rm-voltar:hover { color: #FFFFFF; }
.rm-g { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.4rem; align-items: start; margin-top: 0.3rem; }
.rm-g > * { min-width: 0; }
.rm h1 { font-size: 2.3rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
.rm-sub { color: #DDD3F3; font-size: 1.05rem; margin: 0 0 0.8rem; }
.rm-selos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.rm-selo { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 8px; font-size: 0.88rem; font-weight: 700; }
.rm-selo[hidden] { display: none; }
.rm-selo.rx { background: #FDECEC; color: #8A1C1C; }
.rm-selo.isento { background: var(--verde-fundo); color: var(--verde); }
.rm-selo-claro { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, 0.35); color: #EDE6FA; font-size: 0.88rem; font-weight: 700; }

/* passos (cartão branco) */
.rm-passos, .rm-resumo { background: #FFFFFF; color: var(--texto); border-radius: 22px; padding: 1.1rem 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.rm-forma { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--borda); }
.rm-forma-txt { margin: 0; font-size: 1.05rem; }
.rm-formas { flex-basis: 100%; }
.rm-formas[hidden] { display: none; }
.rm-passo + .rm-passo { border-top: 1px solid var(--borda); margin-top: 0.9rem; padding-top: 0.9rem; }
.rm-passo[hidden] { display: none; }
.rm-passo-t { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.65rem; font-size: 1.12rem; font-weight: 700; }
.rm-n { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--roxo); color: #FFFFFF; font-size: 0.92rem; }
.rm-opc { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rm-b {
  min-height: 52px; min-width: 4.2rem; padding: 0 1rem; border-radius: 12px; border: 2px solid var(--borda-chip);
  background: #FFFFFF; color: var(--texto); font: inherit; font-size: 1.06rem; font-weight: 700; cursor: pointer; line-height: 1.1;
}
.rm-b:hover { border-color: var(--roxo); }
.rm-b[aria-checked=true] { background: var(--roxo); border-color: var(--roxo); color: #FFFFFF; }
.rm-b small { display: block; font-size: 0.72rem; font-weight: 400; }
.rm-b-mais { border-style: dashed; color: var(--roxo); }
.rm-dica { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--texto-2); }
.rm-outra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; }
.rm-outra[hidden] { display: none; }
.rm-outra label { font-weight: 700; }
.rm-outra input { width: 6.5rem; min-height: 52px; padding: 0 0.7rem; font: inherit; font-size: 1.05rem; border: 2px solid var(--borda-campo); border-radius: 12px; }

/* cartão do menor preço */
.rm-r-rot { margin: 0; color: var(--texto-2); font-size: 0.98rem; }
.rm-r-preco { margin: 0.2rem 0; font-size: 3rem; font-weight: 700; line-height: 1.05; color: var(--verde); font-variant-numeric: tabular-nums; }
.rm-resumo.carregando .rm-r-preco { color: var(--texto-2); }
.rm-r-preco.pulso { animation: rm-pulso 0.5s ease; }
@keyframes rm-pulso { 40% { transform: scale(1.04); } }
.rm-r-onde { margin: 0; font-size: 1.05rem; }
.rm-r-un { margin: 0.15rem 0 0; color: var(--texto-2); font-size: 0.95rem; }
.rm-r-un:empty { display: none; }
.rm-data { color: var(--texto-2); font-size: 0.88em; font-weight: 400; }
.rm-r-acoes { display: grid; gap: 0.6rem; margin-top: 1rem; }
.rm-btn-loja {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 60px; padding: 0 1rem; border-radius: 16px;
  background: var(--roxo); color: #FFFFFF; font-size: 1.12rem; font-weight: 700; text-decoration: none; text-align: center;
}
.rm-btn-loja:hover { background: var(--roxo-hover); color: #FFFFFF; }
.rm-btn-loja[hidden] { display: none; }
.rm-btn-lista {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 56px; padding: 0 1rem; border-radius: 16px;
  border: 2px solid var(--roxo); background: #FFFFFF; color: var(--roxo); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.rm-btn-lista:hover { background: var(--roxo-fundo); }
.rm-btn-lista.ok { border-color: var(--verde); color: var(--verde); background: var(--verde-fundo); }
.rm-r-dif { margin-top: 1rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--verde-fundo); color: var(--verde); }
.rm-r-dif[hidden] { display: none; }
.rm-r-dif strong { font-size: 1.25rem; }
.rm-r-dif p { margin: 0.15rem 0 0; color: var(--texto-2); font-size: 0.9rem; }
.rm-r-mip { margin: 0.8rem 0 0; font-size: 1.05rem; font-weight: 700; color: var(--texto-2); }  /* RDC 96/2008, art. 24: advertência com pelo menos 35% da maior letra (preço: 3rem) */
.rm-r-mip[hidden] { display: none; }
.rm-r-busca { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--borda); }
.rm-r-busca > p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--texto-2); }
.rm-lojas-st { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.rm-lojas-st li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.55rem; border-radius: 8px; font-size: 0.82rem; background: #F3F4F6; color: var(--texto-2); }
.rm-lojas-st li.ok { background: var(--verde-fundo); color: var(--verde); }
.rm-lojas-st li.ok::before { content: "\2713"; font-weight: 700; }
.rm-lojas-st li.buscando::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #C9CED4; border-top-color: var(--roxo); animation: girar 0.8s linear infinite; }
.rm-lojas-st li.fora { background: none; border: 1px dashed var(--borda-2); }
.rm-resumo .escolha-lojas { margin: 0.4rem 0 0; }
.rm-resumo .painel-lojas { margin-bottom: 0; }
.rm-r-acoes + .dono-lote { margin: 0.6rem 0 0; }

/* lista de opções */
.rm-lista { padding: 2.2rem 0 2rem; }
.rm-lista-g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.4rem; align-items: start; }
.rm-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.rm-cab h2 { margin: 0; font-size: 1.7rem; }
.rm-cab p { margin: 0; color: var(--texto-2); }
.rm-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.9rem; padding: 0.7rem; background: #F6F7F8; border-radius: 16px; }
.rm-filtros[hidden], .rm-filtros [hidden] { display: none; }
.rm-filtros .chip { min-height: 44px; background: #FFFFFF; }
.rm-filtros .chip[aria-checked=true] { background: var(--roxo); color: #FFFFFF; }
.rm-filtro { display: flex; align-items: center; gap: 0.45rem; color: var(--texto-2); font-size: 0.95rem; font-weight: 700; }
.rm-filtro select { min-height: 44px; max-width: 13rem; padding: 0 0.6rem; font: inherit; font-weight: 400; color: var(--texto); background: #FFFFFF; border: 1.5px solid var(--borda-campo); border-radius: 10px; }
.rm-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rm-op { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.1rem; padding: 0.9rem 1rem; border: 1.5px solid var(--borda-2); border-radius: 16px; background: #FFFFFF; }
.rm-op.entra { animation: rm-entra 0.35s ease both; }
@keyframes rm-entra { from { opacity: 0; transform: translateY(6px); } }
.rm-op.melhor { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.rm-op.esgotado { opacity: 0.65; }
.rm-op-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.rm-op-nome strong { font-size: 1.12rem; }
.rm-op .tag { padding: 0.1rem 0.5rem; border-radius: 6px; font-size: 0.78rem; }
.rm-op .tag-gen { background: #E8F0FE; color: #1E3A8A; }
.rm-op .tag-sim { background: var(--lilas); color: var(--roxo-hover); }
.rm-op .tag-ref { background: var(--laranja-fundo); color: var(--laranja); }
.rm-op .tag-melhor { background: var(--verde); color: #FFFFFF; }
.rm-op .tag-esgotado { background: #EEF0F2; color: var(--texto-2); }
.rm-op-loja { margin: 0.25rem 0 0; font-size: 1rem; }
.rm-op-sobra { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--laranja); }
.rm-op-reg { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--texto-2); }
.rm-op-dir { display: flex; align-items: center; gap: 1rem; }
.rm-op-preco { text-align: right; }
.rm-op-preco strong { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.rm-op-preco span { font-size: 0.85rem; color: var(--texto-2); }
.rm-btn-op { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 52px; padding: 0 1rem; border-radius: 14px; background: var(--roxo); color: #FFFFFF; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rm-btn-op:hover { background: var(--roxo-hover); color: #FFFFFF; }
.rm-op.esgotado .rm-btn-op { background: #6B7480; }
.rm-ver-mais { width: 100%; min-height: 56px; margin-top: 0.7rem; padding: 0 1rem; border-radius: 14px; border: 2px solid var(--roxo); background: #FFFFFF; color: var(--roxo); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.rm-ver-mais:hover { background: var(--roxo-fundo); }
.rm-ver-mais[hidden] { display: none; }
.rm-lista .vazio { margin-top: 0.6rem; }
.rm-lista .outras-marcas { margin-top: 1.2rem; }
.rm-notas { margin-top: 1.6rem; }
.rm-notas > p { margin: 0.5rem 0; font-size: 0.9rem; color: var(--texto-2); max-width: 80ch; }
.rm-notas .precos-dia-tudo { margin: 0.6rem 0; }

/* lateral */
.rm-lat { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.rm-caixa { padding: 1rem 1.1rem; border: 1.5px solid var(--borda-2); border-radius: 18px; background: #FFFFFF; }
.rm-caixa h2 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.45rem; font-size: 1.12rem; }
.rm-caixa h2 svg { flex: none; color: var(--roxo); }
.rm-caixa p { margin: 0.35rem 0; font-size: 0.95rem; color: var(--texto-2); }
.rm-caixa p strong { color: var(--texto); }
.rm-caixa .rm-pq { font-size: 0.88rem; }
.rm-lilas { background: var(--lilas); border-color: var(--lilas); }
.rm-doses-t { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rm-doses-t th, .rm-doses-t td { padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.rm-doses-t td { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm-doses-t td span { display: block; font-size: 0.8rem; font-weight: 400; color: var(--texto-2); }
.rm-doses-t a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--roxo); }
.rm-doses-t a[aria-current=true] { color: var(--texto); text-decoration: none; }
.rm-doses-t a[aria-current=true]::after { content: " \00b7  aberta"; font-weight: 400; color: var(--texto-2); font-size: 0.85em; margin-left: 0.25em; }

/* barra fixa embaixo */
.rm-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #FFFFFF; border-top: 1px solid var(--borda-2); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08); transform: translateY(110%); transition: transform 0.3s ease, visibility 0.3s; visibility: hidden; }
.rm-barra.on { transform: none; visibility: visible; }
.rm-barra-in { display: flex; align-items: center; gap: 0.8rem; min-height: 76px; }
.rm-barra-txt { flex: 1; min-width: 0; }
.rm-barra-txt strong { display: block; font-size: 1.35rem; color: var(--verde); font-variant-numeric: tabular-nums; }
.rm-barra-txt span { display: block; font-size: 0.88rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-barra-lista { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 2px solid var(--roxo); background: #FFFFFF; color: var(--roxo); cursor: pointer; }
.rm-barra-lista.ok { border-color: var(--verde); color: var(--verde); background: var(--verde-fundo); }
.rm-barra-loja { flex: none; min-height: 52px; font-size: 1.02rem; }
body.rm-barra-on .ini-aviso { bottom: 6rem; }

@media (prefers-reduced-motion: reduce) {
  .rm-r-preco.pulso, .rm-op.entra, .rm-lojas-st li.buscando::before { animation: none; }
  .rm-barra { transition: none; }
}
@media (max-width: 1000px) {
  .rm-lista-g { grid-template-columns: minmax(0, 1fr); }
  .rm-lat { position: static; }
}
@media (max-width: 900px) {
  .rm-g { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .rm-lista { padding-bottom: 6rem; }
}
@media (max-width: 700px) {
  .rm { padding: 0.4rem 0 1.4rem; }
  .rm h1 { font-size: 1.8rem; }
  .rm-sub { font-size: 0.98rem; margin-bottom: 0.6rem; }
  .rm-selos { margin-bottom: 0.8rem; gap: 0.4rem; }
  .rm-selo svg { display: none; }
  .rm-passos, .rm-resumo { padding: 0.9rem 0.8rem; border-radius: 18px; margin: 0 -0.25rem; }
  .rm-passo-t { font-size: 1.05rem; }
  .rm-forma { padding-bottom: 0.6rem; margin-bottom: 0.7rem; }
  .rm-passo + .rm-passo { margin-top: 0.7rem; padding-top: 0.7rem; }
  .rm-b { min-width: 3.4rem; padding: 0 0.7rem; font-size: 1rem; }
  #escolha-qtd.rm-qtds { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0.35rem; }  /* vence a regra antiga do #escolha-qtd */
  .rm-qtds .rm-b { min-width: 0; padding: 0 0.2rem; }
  .rm-r-preco { font-size: 2.5rem; }
  .rm-lista { padding-top: 1.6rem; }
  .rm-cab h2 { font-size: 1.4rem; }
  .rm-filtros { padding: 0.6rem; }
  .rm-filtro { width: 100%; justify-content: space-between; }
  .rm-filtro select { flex: 1; max-width: none; }
  .rm-op { grid-template-columns: minmax(0, 1fr); padding: 0.85rem; }
  .rm-op-dir { justify-content: space-between; }
  .rm-op-preco { text-align: left; }
  .rm-btn-op { padding: 0 0.9rem; }
  .rm-barra-in { gap: 0.6rem; min-height: 72px; }
  .rm-barra-txt strong { font-size: 1.25rem; }
  .rm-barra-loja { padding: 0 0.8rem; font-size: 0.98rem; }
  /* aviso "entrou na sua lista" na largura da tela (também na inicial) */
  .ini-aviso { left: 0.8rem; right: 0.8rem; max-width: none; transform: translateY(20px); }
  .ini-aviso.on { transform: none; }
}

/* ---------- páginas de texto (03/11/2026; docs/paginas-de-texto/RELATORIO-paginas-de-texto.md) ---------- */
.tx-pag { --roxo-noite: #2E1065; --lilas: #F1EAFB; }
.tx-faixa { background: var(--roxo-noite); color: #FFFFFF; padding: 1.2rem 0 1.9rem; }
.tx-faixa h1 { font-size: 2.3rem; line-height: 1.1; margin: 0.3rem 0 0.45rem; }
.tx-intro { max-width: 60ch; margin: 0; font-size: 1.15rem; color: #E4DAF7; }
.tx-data { margin: 0.7rem 0 0; font-size: 0.88rem; color: #C9BCEB; }
.tx { padding: 1.9rem 0 2.8rem; }
.tx-g { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2.7rem; align-items: start; }
.tx-g.sem-ind { grid-template-columns: minmax(0, 1fr); }
.tx-g > * { min-width: 0; }
.tx-ind { position: sticky; top: 1rem; padding-left: 1rem; border-left: 3px solid var(--lilas); }
.tx-ind-t { margin: 0 0 0.45rem; font-size: 0.92rem; font-weight: 700; color: var(--texto-2); }
.tx-ind details summary { display: none; }
.tx-ind ul { list-style: none; margin: 0; padding: 0; }
.tx-ind a { display: flex; align-items: center; min-height: 44px; padding: 0.2rem 0; color: var(--texto); font-size: 0.98rem; line-height: 1.35; text-decoration: none; }
.tx-ind a:hover, .tx-ind a.atual { color: var(--roxo); font-weight: 700; }
.tx-txt { max-width: 70ch; font-size: 1.05rem; line-height: 1.65; }
.tx-txt h2 { margin: 1.9rem 0 0.55rem; font-size: 1.5rem; line-height: 1.25; scroll-margin-top: 1rem; }
.tx-txt > h2:first-child { margin-top: 0; }
.tx-txt p { margin: 0 0 0.8rem; }
.tx-txt ul { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.tx-cod { margin: 0 0 0.8rem; padding: 0.8rem 1rem; background: var(--lilas); border-radius: 10px; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tx-txt li { margin: 0.45rem 0; }
.tx-txt a { font-weight: 700; }
.tx-ic { flex: none; display: grid; place-items: center; }
.tx-dest { display: flex; gap: 0.8rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.9rem 1rem; border-radius: 16px; background: var(--verde-fundo); }
.tx-dest .tx-ic { color: var(--verde); }
.tx-dest p { margin: 0; }
.tx-dest.lilas { background: var(--lilas); }
.tx-dest.lilas .tx-ic { color: var(--roxo); }
.tx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0.35rem 0 1rem; }
.tx-card { padding: 0.9rem 1rem; border: 1.5px solid var(--borda-2); border-radius: 16px; background: #FFFFFF; }
.tx-card .tx-ic { width: 46px; height: 46px; margin-bottom: 0.45rem; border-radius: 12px; background: var(--lilas); color: var(--roxo); }
.tx-card strong { display: block; margin-bottom: 0.2rem; font-size: 1.08rem; }
.tx-card p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--texto-2); }
.tx-simples .tx-card p { color: var(--texto); font-size: 1.02rem; }
.tx-passos { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; counter-reset: passo; }
.tx-txt .tx-passos li { margin: 0; }
.tx-passos li { counter-increment: passo; padding: 0.9rem; border: 1.5px solid var(--borda-2); border-radius: 16px; background: #FFFFFF; font-size: 0.98rem; line-height: 1.45; }
.tx-passos li::before { content: counter(passo); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 0.55rem; border-radius: 50%; background: var(--roxo); color: #FFFFFF; font-weight: 700; }
.tx-passos strong { display: block; margin-bottom: 0.2rem; font-size: 1.05rem; }
.tx-txt .tx-lojas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.25rem 0 0.8rem; padding: 0; list-style: none; }
.tx-lojas li { margin: 0; padding: 0.45rem 0.7rem; border-radius: 10px; background: #F3F4F6; font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.tx-lojas li span { display: block; font-size: 0.8rem; font-weight: 400; color: var(--texto-2); }
.tx-lojas li.viva { background: var(--verde-fundo); color: var(--verde); }
.tx-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin: 0 0 1.1rem; }
.tx-numeros div { padding: 0.9rem; border-radius: 16px; background: #F3F4F6; }
.tx-numeros strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--roxo-noite); }
.tx-numeros span { font-size: 0.95rem; color: var(--texto-2); }
.tx-cta { display: flex; flex-wrap: wrap; gap: 0.8rem 1.3rem; align-items: center; justify-content: space-between; margin-top: 1.7rem; padding: 1.2rem 1.3rem; border-radius: 20px; background: var(--roxo-noite); color: #FFFFFF; }
.tx-txt .tx-cta p { margin: 0; font-size: 1.15rem; font-weight: 700; }
.tx-txt .tx-cta a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 56px; padding: 0 1.2rem; border-radius: 14px; background: #FFFFFF; color: var(--roxo-noite); text-decoration: none; }
.tx-email { display: grid; gap: 0.7rem; margin: 0 0 1.3rem; padding: 1.1rem 1.2rem; border: 2px solid var(--roxo); border-radius: 20px; background: #FFFFFF; }
.tx-txt .tx-email-end { display: flex; gap: 0.7rem; align-items: center; margin: 0; font-size: 1.5rem; font-weight: 700; word-break: break-all; }
.tx-email-end .tx-ic { color: var(--roxo); }
.tx-email-bts { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.tx-email-bts a, .tx-email-bts button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 1.1rem; border: 2px solid var(--roxo); border-radius: 14px; font: inherit; font-size: 1.02rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.tx-email-bts a { background: var(--roxo); color: #FFFFFF; }
.tx-email-bts button { background: #FFFFFF; color: var(--roxo); }
.tx-404 .tx-faixa { padding-bottom: 2.4rem; }
.tx-404 .ini-busca { max-width: 760px; margin-top: 1.2rem; }
.tx-ir { margin: 0 0 0.55rem; font-weight: 700; }
.tx-atalhos { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.tx-atalhos a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1rem; border: 1.5px solid var(--borda-2); border-radius: 14px; color: var(--texto); font-weight: 700; text-decoration: none; }
.tx-atalhos a:hover { border-color: var(--roxo); color: var(--roxo); }
@media (max-width: 900px) {
  .tx-g { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .tx-ind { position: static; padding: 0; border: 1.5px solid var(--borda-2); border-radius: 14px; }
  .tx-ind-t { display: none; }
  .tx-ind details summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 1rem; font-weight: 700; cursor: pointer; list-style: none; }
  .tx-ind details summary::-webkit-details-marker { display: none; }
  .tx-ind details summary::after { content: "\25BE"; color: var(--roxo); }
  .tx-ind details[open] summary::after { content: "\25B4"; }
  .tx-ind ul { padding: 0 1rem 0.6rem; }
  .tx-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tx-faixa { padding: 0.4rem 0 1.4rem; }
  .tx-faixa h1 { font-size: 1.85rem; }
  .tx-intro { font-size: 1.02rem; }
  .tx { padding-top: 1.3rem; }
  .tx-txt { font-size: 1.02rem; }
  .tx-txt h2 { margin-top: 1.6rem; font-size: 1.3rem; }
  .tx-cards, .tx-passos { grid-template-columns: minmax(0, 1fr); }
  .tx-simples .tx-card { display: flex; gap: 0.8rem; align-items: center; }
  .tx-simples .tx-card .tx-ic { margin: 0; }
  .tx-passos { gap: 0.45rem; }
  .tx-passos li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 0.7rem; padding: 0.7rem 0.8rem; }
  .tx-passos li::before { grid-row: span 2; margin: 0; }
  .tx-numeros { gap: 0.45rem; }
  .tx-numeros div { padding: 0.7rem 0.55rem; }
  .tx-numeros strong { font-size: 1.45rem; }
  .tx-numeros span { display: block; font-size: 0.8rem; line-height: 1.3; }
  .tx-txt .tx-email-end { font-size: 1.15rem; }
  .tx-email-bts { flex-direction: column; }
}

/* ---------- página de busca (03/11/2026; docs/pagina-busca/RELATORIO-pagina-busca.md) ---------- */
.bu-pag { --roxo-noite: #2E1065; --lilas: #F1EAFB; }
.bu-faixa { background: var(--roxo-noite); color: #FFFFFF; padding: 1.2rem 0 2.2rem; }
.bu-h1 { margin: 0.3rem 0 0.9rem; font-size: 2.1rem; line-height: 1.1; }
.bu-faixa .ini-busca { max-width: 880px; }
.bu-corpo { padding: 1.9rem 0 2.8rem; }
.com-busca .bu-corpo { min-height: 100vh; }  /* os resultados chegam depois: o rodapé não sobe e desce */
.bu-quis { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--laranja-fundo); color: var(--laranja); }
.bu-quis[hidden] { display: none; }
.bu-quis p { margin: 0; font-size: 1.05rem; }
.bu-quis strong { color: var(--texto); }
.bu-quis .bu-quis-sub { margin-top: 0.15rem; font-size: 0.9rem; }
.bu-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.bu-cab[hidden] { display: none; }
.bu-cab h2 { margin: 0; font-size: 1.6rem; }
.bu-cab p { margin: 0; color: var(--texto-2); }
.bu-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.bu-item { padding: 1rem 1.1rem; border: 1.5px solid var(--borda-2); border-radius: 18px; background: #FFFFFF; }
.bu-item.bu-marca { border-style: dashed; border-color: var(--roxo-cartao); }
.bu-item.entra { animation: rm-entra 0.35s ease both; }
.bu-item-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem 1rem; }
.bu-item h3 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.bu-item h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); text-decoration: none; }
.bu-item h3 a:hover { color: var(--roxo); text-decoration: underline; }
.bu-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 6px; background: var(--lilas); color: var(--roxo-hover); font-size: 0.78rem; vertical-align: middle; }
.bu-sub { margin: 0.25rem 0 0; color: var(--texto-2); }
.bu-selo { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.55rem; border-radius: 8px; border: 1.5px solid; font-size: 0.85rem; font-weight: 700; }
.bu-selo.rx { color: #8A1C1C; background: #FDECEC; border-color: #F2B8B8; }
.bu-selo.isento { color: var(--verde); background: var(--verde-fundo); border-color: #9FD4B3; }
.bu-pergunta { margin: 0.9rem 0 0.5rem; font-weight: 700; }
.bu-pergunta span { font-weight: 400; color: var(--texto-2); }
.bu-doses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bu-dose { display: flex; flex-direction: column; justify-content: center; min-height: 60px; min-width: 8.5rem; padding: 0.45rem 0.85rem; border: 2px solid var(--borda-chip); border-radius: 14px; color: var(--texto); text-decoration: none; }
.bu-dose:hover { border-color: var(--roxo); color: var(--texto); }
.bu-dose.comum { border-color: var(--roxo); background: var(--roxo-fundo); }
.bu-dose small { font-size: 0.75rem; font-weight: 700; color: var(--roxo); }
.bu-dose strong { font-size: 1.12rem; }
.bu-dose span { font-size: 0.85rem; color: var(--texto-2); }
.bu-dose b { display: block; color: var(--verde); white-space: nowrap; }
.bu-dose-prod { display: block; max-width: 11rem; margin-top: 0.15rem; font-size: 0.8rem; font-style: normal; line-height: 1.25; color: var(--texto-2); }
.bu-mais-doses { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--texto-2); }
.bu-mais-doses a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.bu-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.8rem; }
.bu-nao-sei { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.bu-b { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 48px; padding: 0 1rem; border: 2px solid var(--roxo); border-radius: 14px; background: #FFFFFF; color: var(--roxo); font: inherit; font-weight: 700; cursor: pointer; }
.bu-b:hover { background: var(--roxo-fundo); }
.bu-b[hidden] { display: none; }
.bu-b.ok { border-color: var(--verde); color: var(--verde); background: var(--verde-fundo); }
.bu-nota { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--texto-2); max-width: 80ch; }
.bu-nota[hidden] { display: none; }
#bu-outros[hidden] { display: none; }
.bu-aviso { position: relative; margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: #F6F7F8; }
.bu-aviso[hidden] { display: none; }
.bu-lilas { background: var(--lilas); }
.bu-aviso-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 0.6rem; border-radius: 12px; background: #FFFFFF; color: var(--roxo); }
.bu-aviso h2 { margin: 0 0 0.5rem; font-size: 1.4rem; line-height: 1.25; }
.bu-aviso p { margin: 0 0 0.6rem; color: var(--texto-2); max-width: 70ch; }
.bu-aviso ul { margin: 0 0 0.6rem; padding-left: 1.3rem; color: var(--texto-2); }
.bu-aviso li { margin: 0.3rem 0; }
.bu-aviso .bu-tente { color: var(--texto); margin-top: 0.9rem; }
.bu-anotado { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 10px; background: var(--verde-fundo); color: var(--verde) !important; font-weight: 700; }
.bu-bts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.bu-mais h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.bu-mais[hidden] { display: none; }
.bu-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.bu-card { display: flex; flex-direction: column; gap: 0.2rem; height: 100%; min-height: 48px; padding: 0.9rem 1rem; border: 1.5px solid var(--borda-2); border-radius: 16px; background: #FFFFFF; color: var(--texto); text-decoration: none; }
.bu-card:hover { border-color: var(--roxo); color: var(--texto); }
.bu-card strong { font-size: 1.12rem; }
.bu-card-doses { flex: 1; font-size: 0.9rem; color: var(--texto-2); }
.bu-card-preco { margin-top: 0.4rem; font-weight: 700; color: var(--verde); }
.bu-card-prod { font-size: 0.82rem; line-height: 1.3; color: var(--texto-2); }
@media (prefers-reduced-motion: reduce) { .bu-item.entra { animation: none; } }
@media (max-width: 900px) { .bu-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .bu-faixa { padding: 0.4rem 0 1.4rem; }
  .bu-h1 { font-size: 1.75rem; margin-bottom: 0.7rem; }
  /* com busca: só o campo e o "Buscar" (os resultados sobem para a primeira tela) */
  :is(.bu-faixa.compacta, .com-busca .bu-faixa) { padding: 0.8rem 0 1rem; }
  :is(.bu-faixa.compacta, .com-busca .bu-faixa) .rm-voltar, :is(.bu-faixa.compacta, .com-busca .bu-faixa) .ini-rotulo, :is(.bu-faixa.compacta, .com-busca .bu-faixa) .ini-acoes { display: none; }
  :is(.bu-faixa.compacta, .com-busca .bu-faixa) .bu-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :is(.bu-faixa.compacta, .com-busca .bu-faixa) .ini-cb-linha { flex-direction: row; }
  :is(.bu-faixa.compacta, .com-busca .bu-faixa) .ini-buscar { min-height: 3.4rem; padding: 0 0.9rem; }
  :is(.bu-faixa.compacta, .com-busca .bu-faixa) .ini-buscar svg { display: none; }
  .bu-corpo { padding-top: 1.2rem; }
  .bu-cab h2 { font-size: 1.3rem; }
  .bu-item { padding: 0.9rem 0.85rem; }
  .bu-item-topo { flex-direction: column; }
  .bu-item h3 { font-size: 1.2rem; }
  .bu-doses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bu-dose { min-width: 0; }
  .bu-acoes { flex-direction: column; align-items: stretch; }
  .bu-nao-sei { justify-content: flex-start; }
  .bu-b { width: 100%; }
  .bu-bts .bu-b { width: auto; }
  .bu-aviso h2 { font-size: 1.25rem; }
  .bu-mais h2 { font-size: 1.3rem; }
}

/* ---------- Minha lista (03/11/2026; docs/minha-lista/RELATORIO-minha-lista.md) ---------- */
.ml-pag { --roxo-noite: #2E1065; --lilas: #F1EAFB; }
.ml-faixa { background: var(--roxo-noite); color: #FFFFFF; padding: 1.2rem 0 4rem; }
.ml-faixa h1 { margin: 0.3rem 0 0.4rem; font-size: 2.3rem; line-height: 1.1; }
.ml-sub { margin: 0 0 0.8rem; max-width: 60ch; font-size: 1.1rem; color: #E4DAF7; }
.ml-selos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ml-selos .rm-selo-claro { gap: 0.35rem; }
.ml-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "add res" "vazia res" "itens res" "enviar res" ". res";
  grid-template-rows: auto auto auto auto 1fr; gap: 1.2rem 2rem; align-items: start; margin-top: -2.6rem; padding-bottom: 2.6rem; }
.ml-g > * { min-width: 0; }
.ml-add { grid-area: add; }
.ml-vazia { grid-area: vazia; }
.ml-itens { grid-area: itens; }
.ml-res { grid-area: res; position: sticky; top: 1rem; }
.ml-enviar { grid-area: enviar; }
.ml-g [hidden] { display: none !important; }
.ml-cartao { background: #FFFFFF; border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: 0 14px 40px rgba(46, 16, 101, 0.16); }
.ml-rotulo { display: block; margin: 0 0 0.55rem; font-size: 1.15rem; font-weight: 700; }
.ml-linha { display: flex; gap: 0.55rem; }
.ml-campo { flex: 1; min-width: 0; position: relative; }
.ml-form .campo input { height: 3.6rem; padding: 0 0.9rem 0 2.7rem; font-size: 1.15rem; border: 2.5px solid var(--roxo); border-radius: 16px; box-shadow: none; }
.ml-form .campo input:focus { outline: none; box-shadow: 0 0 0 5px rgba(242, 169, 59, 0.55); }
.ml-form .campo svg { left: 0.85rem; }
.ml-form .sug { position: absolute; left: 0; right: 0; top: calc(100% + 0.45rem); z-index: 30; border-radius: 16px; }
.ml-form .sug-tipo { display: none !important; }
.ml-incluir { flex: none; display: flex; align-items: center; gap: 0.4rem; min-height: 3.6rem; padding: 0 1.2rem; border: 0; border-radius: 16px; background: var(--roxo); color: #FFFFFF; font: inherit; font-size: 1.12rem; font-weight: 700; cursor: pointer; }
.ml-incluir:hover { background: var(--roxo-hover); }
.ml-atalhos { margin-top: 0.6rem; }
.ml-atalhos .ini-acao { width: 100%; }
.ml-atalhos:not(.com-camera) .ini-acao[hidden] { display: none; }
.ml-itens-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.4rem 0 0.6rem; }
.ml-itens-cab h2 { margin: 0; font-size: 1.5rem; }
.ml-limpar { min-height: 44px; padding: 0 0.3rem; border: 0; background: none; color: var(--texto-2); font: inherit; text-decoration: underline; cursor: pointer; }
.ml-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ml-item { padding: 0.8rem 0.9rem; border: 1.5px solid var(--borda-2); border-radius: 16px; background: #FFFFFF; }
.ml-item.aberto { border-color: var(--roxo); box-shadow: inset 0 0 0 1px var(--roxo); }
.ml-item.invalido { border-color: #F2B8B8; background: #FFF8F8; }
.ml-item.invalido .ml-item-txt span { color: #8A1C1C; }
.ml-item-topo { display: flex; align-items: center; gap: 0.7rem; }
.ml-num { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lilas); color: var(--roxo); font-weight: 700; }
.ml-item-txt { flex: 1; min-width: 0; }
.ml-item-txt a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.12rem; font-weight: 700; color: var(--texto); text-decoration: none; }
.ml-item-txt a:hover { color: var(--roxo); text-decoration: underline; }
.ml-item-txt span { display: block; margin-top: -0.4rem; color: var(--texto-2); }
.ml-item-bts { flex: none; display: flex; gap: 0.4rem; }
.ml-b { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 48px; padding: 0 0.9rem; border: 1.5px solid var(--borda-2); border-radius: 12px; background: #FFFFFF; color: var(--texto); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.ml-b:hover { border-color: var(--roxo); color: var(--roxo); }
.ml-x { width: 48px; padding: 0; font-size: 1.1rem; }
.ml-editor { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--borda); }
.ml-ed-t { margin: 0.6rem 0 0.4rem; font-weight: 700; }
.ml-ed-t:first-child { margin-top: 0; }
.ml-ed-opc { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ml-op { min-width: 3.6rem; border-width: 2px; }
.ml-op[aria-checked=true] { background: var(--roxo); border-color: var(--roxo); color: #FFFFFF; }
.ml-passo { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.ml-passo .ml-b { width: 52px; min-height: 52px; padding: 0; font-size: 1.4rem; }
.ml-passo output { min-width: 7rem; text-align: center; font-size: 1.1rem; font-weight: 700; }
.ml-editor .ml-pq { margin: 0.6rem 0 0; }
.ml-pronto { margin-top: 0.8rem; width: 100%; }
.ml-vazia h2 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.ml-vazia p { color: var(--texto-2); }
.ml-b-roxo { display: inline-flex; align-items: center; min-height: 56px; margin: 0.4rem 0; padding: 0 1.3rem; border: 0; border-radius: 16px; background: var(--roxo); color: #FFFFFF; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.ml-b-roxo:hover { background: var(--roxo-hover); }
.ml-pq { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--texto-2); }

/* resultado */
.ml-res-rot { margin: 0; color: var(--texto-2); }
.ml-tag { display: inline-block; margin: 0.3rem 0 0.1rem; padding: 0.15rem 0.6rem; border-radius: 8px; background: var(--verde); color: #FFFFFF; font-size: 0.85rem; font-weight: 700; }
.ml-tag.falta { background: #FDECEC; color: #8A1C1C; }
.ml-res-loja { margin: 0.2rem 0 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.ml-res-total { margin: 0.1rem 0; font-size: 2.8rem; font-weight: 700; line-height: 1.05; color: var(--verde); font-variant-numeric: tabular-nums; }
.ml-res.carregando .ml-res-total { color: var(--texto-2); }
.ml-res-total.pulso { animation: rm-pulso 0.5s ease; }
.ml-res-tem { margin: 0; color: var(--texto-2); }
.ml-res-itens { list-style: none; margin: 0.8rem 0 0; padding: 0; border-top: 1px solid var(--borda); }
.ml-res-itens li { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid var(--borda); }
.ml-ri-txt { min-width: 0; }
.ml-ri-txt strong { display: block; }
.ml-ri-txt span { display: block; font-size: 0.88rem; color: var(--texto-2); }
.ml-ri-preco { flex: none; display: flex; align-items: center; gap: 0.5rem; }
.ml-ri-preco strong { font-variant-numeric: tabular-nums; }
.ml-abrir { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0 0.75rem; border-radius: 12px; background: var(--roxo); color: #FFFFFF; font-weight: 700; text-decoration: none; }
.ml-abrir:hover { background: var(--roxo-hover); color: #FFFFFF; }
.ml-falta span { color: #8A1C1C; }
#ml-res-ver { width: 100%; margin-top: 0.7rem; border-color: var(--roxo); color: var(--roxo); }
.ml-comb { margin-top: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--lilas); }
.ml-comb p { margin: 0; }
.ml-comb .ml-b { width: 100%; margin-top: 0.6rem; border-color: var(--roxo); color: var(--roxo); }
.ml-comb .ml-res-itens { border-top-color: var(--roxo-borda); }
.ml-barras-sec h3 { margin: 1rem 0 0.5rem; font-size: 1.05rem; }
.ml-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ml-barras li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.6rem; font-size: 0.95rem; }
.ml-bv { font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-bt { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: #F1F2F4; overflow: hidden; }
.ml-bt span { display: block; height: 100%; border-radius: 5px; background: #B9A5E3; }
.ml-barras li.melhor .ml-bn, .ml-barras li.melhor .ml-bv { color: var(--verde); font-weight: 700; }
.ml-barras li.melhor .ml-bt span { background: var(--verde); }
.ml-barras li.falta .ml-bt span { background: #F2B8B8; }
.ml-barras small { color: #8A1C1C; }
.ml-res .rm-r-busca { margin-top: 1rem; }
.ml-res .rm-lojas-st li.nao { background: #F6F7F8; }

/* enviar */
.ml-enviar h2 { margin: 0 0 0.3rem; font-size: 1.3rem; }
.ml-enviar > p { margin: 0 0 0.7rem; color: var(--texto-2); }
.ml-env-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ml-zap { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 58px; border-radius: 14px; background: #1F7A4D; color: #FFFFFF; font-size: 1.12rem; font-weight: 700; text-decoration: none; }
.ml-zap:hover { background: #17603C; color: #FFFFFF; }
#enviar-imprimir { grid-column: 1 / -1; }
.ml-privac { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--texto-2); }
.ml-privac svg { flex: none; margin-top: 0.15rem; }
.ml-desfazer { margin-left: 0.4rem; min-height: 44px; padding: 0 0.8rem; border: 1.5px solid #FFFFFF; border-radius: 10px; background: transparent; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .ml-res-total.pulso { animation: none; } }
@media (max-width: 900px) {
  .ml-g { grid-template-columns: minmax(0, 1fr); grid-template-areas: "add" "vazia" "itens" "res" "enviar"; grid-template-rows: none; }
  .ml-res { position: static; }
  .ml-pag { padding-bottom: 5rem; }
}
@media (max-width: 700px) {
  .ml-faixa { padding: 0.4rem 0 3.4rem; }
  .ml-faixa h1 { font-size: 1.85rem; }
  .ml-sub { font-size: 1rem; }
  .ml-cartao { padding: 0.9rem 0.8rem; border-radius: 18px; }
  .ml-linha { flex-direction: column; }
  .ml-incluir { justify-content: center; }
  .ml-item-topo { flex-wrap: wrap; }
  .ml-item-bts { width: 100%; padding-left: 2.7rem; }
  .ml-alterar { flex: 1; }
  .ml-res-loja { font-size: 1.4rem; }
  .ml-res-total { font-size: 2.4rem; }
  .ml-res-itens li { flex-wrap: wrap; }
  .ml-ri-preco { width: 100%; justify-content: space-between; }
  .ml-env-bts { grid-template-columns: 1fr; }
}
/* Imprimir: só a lista e o resultado */
@media print {
  .topo, .rodape, .aviso-real, .ml-faixa, .ml-add, .ml-enviar, .rm-barra, .ml-item-bts, .ml-editor, .ml-limpar,
  .rm-r-busca, #ml-res-ver, .ml-comb .ml-b, .ml-abrir, .ini-aviso, .pular { display: none !important; }
  .ml-g { display: block; margin: 0; }
  .ml-cartao, .ml-item { box-shadow: none; border: 1px solid #999; }
  .ml-res { margin-top: 1rem; position: static; }
}

/* Informações da CMED, perguntas frequentes e "Veja também" na página do medicamento (texto que o Google e as IAs
   leem no HTML, 04/11/2026). */
.rm-info { margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--borda); }
.rm-info h2 { margin: 1.4rem 0 0.6rem; font-size: 1.3rem; }
.rm-info h2:first-child { margin-top: 0; }
.rm-info-l { margin: 0; padding-left: 1.2rem; line-height: 1.55; }
.rm-info-l li { margin: 0 0 0.45rem; }
.rm-faq h3 { margin: 1.1rem 0 0.3rem; font-size: 1.08rem; }
.rm-faq p { margin: 0; line-height: 1.55; color: var(--texto-2); }
.rm-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rm-rel a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem; border: 1.5px solid var(--borda-2); border-radius: 999px; font-weight: 700; text-decoration: none; }
.rm-rel a:hover { border-color: var(--roxo); }

/* /medicamentos/: de A a Z */
.az-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.4rem; }
.az-nav a { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border: 1.5px solid var(--borda-2); border-radius: 12px; font-weight: 700; text-decoration: none; }
.az-sec h2 { margin: 1.6rem 0 0.4rem; scroll-margin-top: 1rem; }
.az-l { list-style: none; margin: 0; padding: 0; }
.az-l li { border-bottom: 1px solid var(--borda); }
.az-l a { display: block; padding: 0.7rem 0 0.15rem; font-weight: 700; }
.az-l span { display: block; padding: 0 0 0.6rem; font-size: 0.9rem; color: var(--texto-2); }

/* Blocos abaixo da primeira tela: o navegador só monta quando a pessoa chega perto (menos trabalho ao abrir). */
.rm-info, .az-sec, .rodape { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* =====================================================================================================================
   VISUAL CLARO, "PAINEL LIMPO" (05/11/2026: opção C, escolhida pelo dono entre 4 propostas; referências: Google Voos,
   trivago, Kayak). Fica por cima das regras antigas (faixa roxa escura) para não mexer nelas: a frente Saúde e beleza
   edita o mesmo arquivo. Tudo claro, o roxo só nos botões e no que está escolhido. Doses em "chips", resultados compactos com o preço à direita, as
   farmácias comparadas logo abaixo da busca. Na busca de preços: uma barra fina de progresso no topo da tela e cada
   farmácia "acende" com o preço quando responde.
   ===================================================================================================================== */
:root {
  --c-fundo: #FFFFFF;
  --c-cinza: #F6F7F9;
  --c-linha: #E3E6E8;
  --c-chip: #EEE8FB;
  --c-elev: 0 1px 2px rgba(60, 64, 67, 0.16), 0 2px 6px 2px rgba(60, 64, 67, 0.08);
  --c-elev-2: 0 1px 3px rgba(60, 64, 67, 0.18), 0 6px 16px 4px rgba(60, 64, 67, 0.1);
  --c-suave: cubic-bezier(0.2, 0, 0, 1);
}

/* barra fina de progresso no topo enquanto as farmácias respondem (como o Google e o Kayak) */
html[data-carregando] body::before {
  content: ""; position: fixed; z-index: 100; top: 0; left: 0; height: 4px; width: calc(var(--progresso, 0) * 100%);
  background: var(--roxo); transition: width 0.4s var(--c-suave), opacity 0.4s ease 0.3s;
}
html[data-carregando="0"] body::before { width: 100%; opacity: 0; }
html[data-carregando="1"] body::after {
  content: ""; position: fixed; z-index: 99; top: 0; left: 0; right: 0; height: 4px; background: #E7E0F7; overflow: hidden;
}

/* ---------- faixas: claras ---------- */
.ini-hero, .rm, .bu-faixa, .ml-faixa { background: var(--c-fundo); color: var(--texto); }
.rm, .bu-faixa, .ml-faixa { border-bottom: 1px solid var(--c-linha); }
.rm-voltar { color: var(--roxo); }
.rm-voltar:hover { color: var(--roxo-hover); }
.rm-sub, .ini-sub, .ml-sub { color: var(--texto-2); }
.rm-selo-claro { border-color: var(--c-linha); color: var(--texto-2); background: var(--c-cinza); }
.ini-status { background: var(--c-cinza); border-color: var(--c-linha); color: var(--texto-2); }

/* inicial */
.ini-hero { padding: 3rem 0 3.4rem; background: linear-gradient(180deg, #F7F4FD 0%, #FFFFFF 70%); }
.ini-hero h1 { font-size: 2.7rem; letter-spacing: -0.02em; color: var(--texto); text-wrap: balance; }
.ini-busca { border-radius: 24px; box-shadow: var(--c-elev-2); border: 1px solid var(--c-linha); }
.ini-busca .campo input { border-radius: 999px; border-width: 2px; border-color: #C9CFD4; }
.ini-buscar { border-radius: 999px; }
.ini-acoes a, .ini-acoes button { border-radius: 999px; }
.ini-lojas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; margin: 1.1rem 0 0; color: var(--texto-2); }
.ini-lojas-rot { font-size: 0.85rem; flex-basis: 100%; }
.ini-loja { font-weight: 700; font-size: 1.02rem; color: #4A535C; letter-spacing: -0.01em; }
.ini-quadro { box-shadow: var(--c-elev-2); border: 1px solid var(--c-linha); border-radius: 20px; }
.ini-b-trilho { height: 8px; border-radius: 4px; background: #EEF0F2; }
.ini-b-barra { border-radius: 4px; background: #C7B6EC; }
.ini-passos { background: var(--c-cinza); border-bottom: 0; }
.ini-passos li::before { background: #FFFFFF; color: var(--roxo); box-shadow: inset 0 0 0 2px #D9CDF3; }

/* ---------- página do medicamento ---------- */
.rm { padding-bottom: 2rem; }
.rm h1 { color: var(--texto); letter-spacing: -0.02em; }
.rm-passos { box-shadow: none; border: 1px solid var(--c-linha); border-radius: 20px; }
.rm-resumo { box-shadow: var(--c-elev-2); border: 1px solid var(--c-linha); border-radius: 20px; }
.rm-n { background: #FFFFFF; color: var(--roxo); box-shadow: inset 0 0 0 2px #D9CDF3; }
/* doses e quantidades em chips; o escolhido com ✓ */
.rm-b, .chip, .rm-filtros .chip {
  border-radius: 999px; border-width: 1.5px; border-color: #C9CFD4;
  transition: background-color 0.2s var(--c-suave), border-color 0.2s var(--c-suave), color 0.2s var(--c-suave);
}
.rm-b:hover, .chip:hover { background: var(--c-cinza); border-color: #9AA3AB; }
.rm-b[aria-checked=true], .chip[aria-checked=true], .rm-filtros .chip[aria-checked=true] {
  background: var(--c-chip); border-color: var(--roxo); color: var(--roxo-hover);
}
.rm-b[aria-checked=true]::before, .chip[aria-checked=true]::before { content: "\2713\00a0"; font-weight: 700; }
#escolha-qtd .rm-b[aria-checked=true]::before { content: none; }
.rm-b-mais { border-style: dashed; }
/* cartão do preço */
.rm-r-preco { letter-spacing: -0.02em; }
.rm-btn-loja { border-radius: 999px; min-height: 56px; box-shadow: 0 1px 3px rgba(91, 33, 182, 0.35); transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.rm-btn-loja:hover { box-shadow: 0 4px 12px rgba(91, 33, 182, 0.35); }
.rm-btn-lista { border-radius: 999px; border-width: 1.5px; border-color: #C9CFD4; color: var(--roxo); min-height: 52px; }
.rm-btn-lista:hover { background: var(--c-cinza); border-color: var(--roxo); }
/* "insight" da diferença, como "Os preços estão normais" */
.rm-r-dif { position: relative; padding-left: 3.1rem; border-radius: 14px; background: #F2F7F4; color: var(--verde); }
.rm-r-dif::before {
  content: ""; position: absolute; left: 0.8rem; top: 0.8rem; width: 28px; height: 28px; border-radius: 50%;
  background: var(--verde-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B6B3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E") center / 16px no-repeat;
  transform: scaleY(-1);
}
.rm-resumo.carregando .rm-r-preco:not([data-valor]) {
  width: 6ch; color: transparent; border-radius: 10px; user-select: none;
  background: linear-gradient(90deg, #EEF0F2 0%, #F8F9FA 45%, #EEF0F2 90%) 0 0 / 220% 100%; animation: c-brilho 1.2s linear infinite;
}
@keyframes c-brilho { to { background-position: -220% 0; } }

/* ---------- farmácias respondendo: cada uma "acende" com o preço ---------- */
.rm-r-busca { border-top: 1px solid var(--c-linha); }
#lojas-st { display: block; margin: 0.2rem 0 0; }
#lojas-st li.lj {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-height: 48px;
  padding: 0.2rem 0.6rem; border-radius: 12px; background: none; font-size: 1rem; color: var(--texto);
}
#lojas-st li.lj::before { content: none; }
#lojas-st li.lj + li.lj { border-top: 1px solid var(--c-linha); }
#lojas-st li.lj { border-radius: 0; }
#lojas-st .lj.menor { border-radius: 10px; }
.lj-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.lj-valor small { display: block; font-weight: 400; font-size: max(15px, 0.88rem); color: var(--texto-2); }
.lj-cap { position: relative; width: 22px; height: 22px; border-radius: 50%; }
#lojas-st .lj.buscando .lj-cap { border: 2.5px solid #E2E5E8; border-top-color: var(--roxo); animation: c-gira 0.8s linear infinite; }
@keyframes c-gira { to { transform: rotate(360deg); } }
#lojas-st .lj.ok .lj-cap, #lojas-st .lj.esgotado .lj-cap {
  background: var(--roxo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
#lojas-st .lj.esgotado .lj-cap { background-color: #9AA3AB; }
#lojas-st .lj.menor .lj-cap { background-color: var(--verde); }
#lojas-st .lj.nao .lj-cap, #lojas-st .lj.erro .lj-cap, #lojas-st .lj.fora .lj-cap { background: #EEF0F2; box-shadow: inset 0 0 0 2px #D5DADE; }
#lojas-st .lj.chegou { animation: c-acende 1.1s var(--c-suave); }
#lojas-st .lj.chegou .lj-cap { animation: c-surge 0.4s var(--c-suave); }
@keyframes c-acende { 0% { background: #EEE8FB; } 100% { background: transparent; } }
@keyframes c-surge { from { transform: scale(0.3); opacity: 0; } }
#lojas-st .lj.menor { background: #EFF8F2; }
#lojas-st .lj.menor .lj-nome, #lojas-st .lj.menor .lj-valor { color: var(--verde); }
#lojas-st .lj.buscando .lj-valor::after { content: "consultando"; font-weight: 400; color: #6B7480; font-size: 0.9rem; }
#lojas-st .lj.nao .lj-valor, #lojas-st .lj.erro .lj-valor, #lojas-st .lj.fora .lj-valor, #lojas-st .lj.esgotado .lj-valor { color: var(--texto-2); font-weight: 400; font-size: 0.92rem; }

/* ---------- lista de opções: compacta, preço à direita, o cartão todo leva à loja ---------- */
.rm-lista { background: var(--c-cinza); }
.rm-op { position: relative; border: 1px solid var(--c-linha); border-radius: 16px; background: #FFFFFF; padding: 0.9rem 1rem; transition: box-shadow 0.2s var(--c-suave), border-color 0.2s var(--c-suave); }
.rm-op:hover { box-shadow: var(--c-elev); border-color: #D5DADE; }
.rm-op.melhor { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.rm-op.entra { animation: c-entra 0.35s var(--c-suave) both; }
@keyframes c-entra { from { opacity: 0; transform: translateY(8px); } }
.rm-op-preco strong { font-size: 1.45rem; letter-spacing: -0.01em; }
.rm-op.melhor .rm-op-preco strong { color: var(--verde); }
.rm-btn-op { min-height: 44px; padding: 0 0.4rem 0 0.7rem; border-radius: 999px; background: none; color: var(--roxo); }
.rm-btn-op:hover { background: var(--c-chip); color: var(--roxo-hover); }
.rm-btn-op::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.rm-op.melhor .rm-btn-op { background: var(--roxo); color: #FFFFFF; padding: 0 1rem; }
.rm-op .dono-botao { position: relative; z-index: 1; }
.rm-op .tag { border-radius: 999px; }
.rm-filtros { background: none; padding: 0; }
.rm-filtro select { border-radius: 999px; padding: 0 0.9rem; border-color: #C9CFD4; }
.rm-ver-mais { border-radius: 999px; border-width: 1.5px; }
.rm-caixa { border-radius: 16px; border-width: 1px; }
.rm-lilas { background: #F7F4FD; border-color: #ECE5FA; }
.rm-op.esqueleto { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; min-height: 90px; }
.rm-op.esqueleto span { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #EEF0F2 0%, #F8F9FA 45%, #EEF0F2 90%) 0 0 / 220% 100%; animation: c-brilho 1.2s linear infinite; }
.rm-op.esqueleto span:nth-child(1) { width: 60%; height: 20px; }
.rm-op.esqueleto span:nth-child(2) { grid-row: 2; width: 38%; }
.rm-op.esqueleto span:nth-child(3) { grid-row: 1 / 3; grid-column: 2; width: 80px; height: 30px; align-self: center; }

/* barra de baixo */
.rm-barra { box-shadow: 0 -1px 0 var(--c-linha), 0 -6px 18px rgba(60, 64, 67, 0.1); border-top: 0; }
.rm-barra.buscando .rm-barra-txt strong { color: var(--texto); font-size: 1.05rem; }
.rm-barra.buscando::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; background: var(--roxo);
  width: calc(var(--lojas-feitas, 0) / var(--lojas-total, 1) * 100%); transition: width 0.4s var(--c-suave);
}
.rm-barra-loja, .rm-barra-lista { border-radius: 999px; }

/* busca e Minha lista */
.bu-corpo { background: var(--c-cinza); }
.bu-item { border: 1px solid var(--c-linha); border-radius: 18px; }
.bu-dose { border-radius: 14px; border-width: 1.5px; }
.bu-dose.comum { background: var(--c-chip); border-color: var(--roxo); }
.bu-b { border-radius: 999px; border-width: 1.5px; }
.ml-cartao, .ml-res { border-radius: 20px; box-shadow: var(--c-elev); }
.ml-bt { height: 8px; border-radius: 4px; background: #EEF0F2; }
.ml-bt span { border-radius: 4px; background: #C7B6EC; }
.ml-faixa h1, .bu-h1 { color: var(--texto); }
.ml-faixa { padding-bottom: 2.4rem; border-bottom: 0; }  /* a linha passava por trás do cartão "Adicionar" */

/* páginas de texto, Medicamentos de A a Z e "Página não encontrada" */
.tx-faixa { background: linear-gradient(180deg, #F7F4FD 0%, #FFFFFF 100%); color: var(--texto); border-bottom: 1px solid var(--c-linha); }
.tx-faixa h1 { color: var(--texto); letter-spacing: -0.02em; }
.tx-intro, .tx-data { color: var(--texto-2); }
.tx-card, .tx-passos li { border-width: 1px; border-color: var(--c-linha); }
.tx-passos li::before { background: #FFFFFF; color: var(--roxo); box-shadow: inset 0 0 0 2px #D9CDF3; }
.tx-cta { background: #F7F4FD; color: var(--texto); border: 1px solid #ECE5FA; }
.tx-txt .tx-cta a { background: var(--roxo); color: #FFFFFF; border-radius: 999px; }
.tx-txt .tx-cta a:hover { background: var(--roxo-hover); color: #FFFFFF; }
.tx-404 .ini-busca { box-shadow: var(--c-elev-2); }

@media (prefers-reduced-motion: reduce) {
  html[data-carregando] body::before { transition: none; }
  #lojas-st .lj.buscando .lj-cap, #lojas-st .lj.chegou, #lojas-st .lj.chegou .lj-cap, .rm-op.entra,
  .rm-resumo.carregando .rm-r-preco:not([data-valor]), .rm-op.esqueleto span { animation: none; }
}
@media (max-width: 700px) {
  .ini-hero { padding: 1.6rem 0 2rem; }
  .ini-hero h1 { font-size: 2rem; }
  .ini-lojas { gap: 0.25rem 0.9rem; }
  .ini-loja { font-size: 0.95rem; }
  .rm { padding-top: 0.6rem; }
  .rm-voltar { display: none; }
  .rm-passos, .rm-resumo { margin: 0; }
  .rm-op { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.3rem 0.8rem; padding: 0.85rem 0.9rem; }
  .rm-op-dir { flex-direction: column; align-items: flex-end; gap: 0.2rem; }
  .rm-op-preco { text-align: right; }
  .rm-op-preco strong { font-size: 1.3rem; }
  .rm-op-preco span { display: block; font-size: 0.8rem; }
  .rm-op-reg { white-space: nowrap; }
  .rm-btn-op { font-size: 0.95rem; }
}
/* correções que valem para qualquer visual (no site no ar a página do medicamento rolava para o lado no celular) */
.rm-lat { grid-template-columns: minmax(0, 1fr); }
.rm-doses-t td span { white-space: normal; }

/* celular: o nome do medicamento usa a largura toda; preço e "Ver na loja" numa linha embaixo */
@media (max-width: 700px) {
  .rm-op { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .rm-op-dir { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.45rem; padding-top: 0.55rem; border-top: 1px solid var(--borda); }
  .rm-op-preco { text-align: left; }
  .rm-op-preco strong { font-size: 1.45rem; }
}

/* Letra mínima de 15 px no que ajuda a decidir (06/11/2026; público com muitos idosos): preço por comprimido,
   "Mais comum", "a partir de", "Menor preço", "Sem estoque no site", o produto do "a partir de" e os títulos da
   tabela. O "Reg. MS" continua menor. max(): no computador (18 px) já passava; o "A+" continua aumentando. */
.tag, .rm-op .tag, .bu-tag, .sug-selo, .ini-selo, .ml-tag,
.rm-op-preco span, .bu-dose small, .bu-dose span, .bu-dose-prod, .bu-card-prod,
.ini-l-menor small, .ini-b-prod, .ini-lista-it span, .ini-q-rod, .ini-lojas-rot,
.rm-doses-t td span, .rm-b small, .tx-numeros span, .tabela-precos thead th {
  font-size: max(15px, 0.88rem);
}

/* Nomes enormes (vacinas com a composição inteira no nome): no máximo 2 linhas nas sugestões e nos cartões da /busca/
   (07/11/2026: "pneumo" abria uma caixa de sugestões de 8.000 px). Palavra comprida sem espaço quebra a linha. */
.sug-nome, .sug-sub, .bu-nome, .bu-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere;
}
.sug-vazio, .sug-correcao, .bu-cab h2, .bu-quis p, .bu-aviso h2, .bu-aviso p { overflow-wrap: anywhere; }

/* Receita simples (sem retenção e sem controle): linha cinza discreta, sem ícone nem fundo; o selo vermelho fica para
   a receita retida e a especial (decisão do dono em 09/11/2026). */
.rm-selo.discreto, .ini-selo.discreto { background: none; border: 0; color: var(--texto-2); font-weight: 400; padding-left: 0; padding-right: 0; }

/* Advertência do medicamento sem receita na internet (RDC 96/2008, art. 24, III; revisão de 09/11/2026): sempre à
   mostra junto do preço, num retângulo de fundo branco com filete, em letras pretas, negrito e caixa alta, ocupando
   pelo menos dois décimos do espaço do preço. A norma cita as letras Frutiger 55 Bold ou Humanist 777 Bold: valem se
   o aparelho tiver; senão, a do site em negrito. */
.adv-rdc {
  display: block; margin: 0.9rem 0 0; padding: 0.8rem 0.9rem; background: #FFFFFF; color: #000000;
  border: 2px solid #000000; box-shadow: 0 0 0 4px #FFFFFF; border-radius: 0;
  font-family: 'Frutiger LT Std', 'Frutiger', 'Humanist 777 BT', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: max(15px, 1rem); font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.01em;
}
.adv-rdc[hidden] { display: none; }
.rm-r-mip.adv-rdc { color: #000000; font-size: max(15px, 1.05rem); }
.ini-q-rod .adv-rdc { margin-top: 0.45rem; }
.ini-linha .ini-l-adv { margin: 0 0 0.9rem; }
.bu-card .bu-card-adv { margin-top: 0.6rem; font-size: max(15px, 0.85rem); }
.bu-item .bu-adv { margin: 0.7rem 0 0.2rem; }
.rm-r-reg { margin: 0.15rem 0 0; color: var(--texto-2); font-size: 0.85rem; }
.rm-r-reg[hidden] { display: none; }
/* Substância (DCB) com pelo menos metade do tamanho do nome comercial do título (RDC 96/2008, art. 22, II; na
   página de marca, a linha de baixo começa pela substância). No celular já passava (1,8rem x 0,98rem). */
.rm-sub { font-size: 1.2rem; }
@media (max-width: 700px) { .rm-sub { font-size: 0.98rem; } }

/* Teste da Parte A (10/11/2026) ------------------------------------------------------------------------------------ */
/* A barra fixa de baixo (página do medicamento e Minha lista) tapava a última frase do rodapé, o aviso de receita. */
.com-barra .rodape > .cont { padding-bottom: calc(3em + 88px); }
@media (max-width: 700px) { .com-barra .rodape > .cont { padding-bottom: calc(2em + 88px); } }
/* "Você leu: ..." (código de barras) no topo do cartão do preço. */
.rm-lida { margin: 0 0 0.8rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--lilas); color: var(--texto);
  font-size: max(15px, 0.95rem); line-height: 1.4; }
.rm-lida[hidden] { display: none; }
/* Barra de baixo: "+ Lista" escrito e "Ver na <farmácia>" (o nome pode ir em 2 linhas). */
.rm-barra-lista { width: auto; min-width: 52px; padding: 0 0.85rem; gap: 0.3rem; display: inline-flex; align-items: center;
  font-weight: 700; font-size: 0.98rem; }
.rm-barra-loja { max-width: 46%; white-space: normal; line-height: 1.15; text-align: center; }
@media (max-width: 420px) {
  .rm-barra-in { gap: 0.5rem; }
  .rm-barra-lista { padding: 0 0.6rem; }
  .rm-barra-loja { max-width: 42%; padding: 0 0.6rem; font-size: 0.92rem; }
}
/* "Outras doses": a dose aberta em uma linha, com "aberta" embaixo (no celular "50" e "mg" quebravam). */
/* (o número fica junto da unidade pelo espaço que não quebra, escrito no gerador; o nome pode quebrar) */
.rm-doses-t td span { white-space: normal; }
.rm-doses-t a[aria-current=true] { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.2; }
.rm-doses-t a[aria-current=true]::after { content: "aberta"; margin-left: 0; }
/* Sobre: os números não passam da borda do cartão com a letra grande. */
.tx-numeros span { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 460px) { .tx-numeros { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { html.letra-grande .tx-numeros { grid-template-columns: minmax(0, 1fr); } }
/* Abas da inicial: sem a barrinha de rolagem quando cabem. */
.ini-abas { scrollbar-width: none; padding-bottom: 2px; }
.ini-abas::-webkit-scrollbar { display: none; }
/* Minha lista: o "✕" do campo, como na inicial; "Ver na <farmácia>" no resultado. */
.ml-campo .campo { position: relative; }
.ml-campo .ini-limpar svg { position: static; transform: none; }
.ml-campo .campo input { padding-right: 3rem; }
.ml-abrir { white-space: nowrap; }
@media (max-width: 520px) {
  .ml-res-itens li { flex-wrap: wrap; }
  .ml-ri-preco { width: 100%; justify-content: space-between; }
}
/* Quadros que sobem para logo depois do cartão do preço no celular (o remedio.js move). */
.rm-lista-g > .rm-sobe { margin: 0; }
/* Minha lista no celular: as sugestões empurram o botão "Adicionar" para baixo, em vez de ficar por cima dele. */
@media (max-width: 700px) {
  .ml-form .sug { position: static; margin-top: 0.45rem; }
}
/* Celular: o filtro "Laboratório" encolhe (o nome mais comprido da lista, como "Glaxosmithkline", deixava a caixa
   mais larga que a tela e a página vazava para o lado) e a linha da farmácia quebra o tamanho da caixa. */
.rm-filtro { min-width: 0; max-width: 100%; }
.rm-filtro select { min-width: 0; text-overflow: ellipsis; }
@media (max-width: 700px) { .rm-filtro select { width: 100%; } }
.rm-lojas-st .lj-valor { min-width: 0; }
.rm-lojas-st .lj-valor small { white-space: normal; overflow-wrap: anywhere; }
/* Minha lista no computador (11/11/2026, print do dono): as sugestões tinham a largura do campo e o nome do
   medicamento ficava numa coluna de uma letra ("C o. Si m.") ao lado do selo e do "Adicionar". Como na inicial, a
   caixa ocupa a largura do campo + botão; o selo e o botão ficam empilhados à direita e o nome usa o resto. */
@media (min-width: 701px) {
  .ml-linha { position: relative; }
  .ml-campo { position: static; }
}
.ml-form .sug .sug-com-acao { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; row-gap: 0.35rem; padding: 0.5rem 0.7rem 0.5rem 0; }
.ml-form .sug .sug-com-acao > a { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
.ml-form .sug .sug-com-acao > .sug-selo { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; }
.ml-form .sug .sug-com-acao > .sug-mais { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; }
.ml-form .sug .sug-com-acao > a + .sug-mais { grid-row: 1 / span 2; align-self: center; }