/* ===========================================================================
   Optiloss IN — folha unica do site (ingles /en/ + hindi /hi/)

   Duas decisoes que valem registro:

   1. DEVANAGARI PRECISA DE MAIS ESPACO VERTICAL. As matras (मात्रा) sobem
      acima e descem abaixo da caixa latina; com line-height 1.7 elas encostam
      entre linhas. As paginas /hi/ usam 1.9 e um corpo levemente maior.

   2. FALLBACK COM METRICAS CASADAS. Sem isso o titulo quebra em numero
      diferente de linhas antes e depois da webfont carregar e a pagina se
      desloca (CLS 0,23 medido no restfulnightlab). Aqui ha dois fallbacks:
      um para a serifada latina e um para o devanagari.
   =========================================================================== */

/* MEDIDO NESTE PROJETO, nao copiado. O valor herdado de outro blog (105,5%)
   deixava o fallback 4,3% estreito demais, o texto refluia no swap e a pagina
   crescia 119px de uma vez (CLS 0,13 medido no desktop).
   Georgia sozinha ja fica a -1,3% da Source Serif 4, entao o ajuste e pequeno:
   101,3%. Um size-adjust calculado para Times (110%) aplicado sobre Georgia
   deixa o fallback 8,7% LARGO e o texto encolhe no swap, que e o mesmo defeito
   invertido. Se trocar a fonte de corpo, medir de novo. */
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia"), local("Liberation Serif");
  size-adjust: 101.3%;
  ascent-override: 92%;
  descent-override: 28%;
  line-gap-override: 0%;
}
/* Times tem metrica bem diferente de Georgia (-9,2%), entao ganha o proprio
   ajuste em vez de dividir o mesmo numero. */
@font-face {
  font-family: "Serif Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 110.2%;
  ascent-override: 92%;
  descent-override: 28%;
  line-gap-override: 0%;
}
/* O ITALICO precisa do proprio descritor, e de um numero DIFERENTE do romano.
   Georgia italica e 9% mais LARGA que a Source Serif 4 italica, enquanto a
   romana e 1,3% mais estreita: usar o mesmo size-adjust nos dois faz o bloco
   .answer encolher 30px no swap. Medido: 94,9%. */
@font-face {
  font-family: "Serif Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia"), local("Times New Roman Italic");
  size-adjust: 94.9%;
  ascent-override: 92%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* Nirmala UI e a fonte devanagari que ja existe em toda instalacao do Windows;
   Noto Sans Devanagari cobre Android/ChromeOS. O fallback local evita tofu
   (caixinhas vazias) enquanto a webfont nao chega. */
@font-face {
  font-family: "Deva Fallback";
  src: local("Nirmala UI"), local("Noto Sans Devanagari"), local("Mangal");
  size-adjust: 100%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------------
   Paleta. Indigo profundo + acafrao: cores que leem como indianas sem cair no
   clichê da bandeira. O acafrao so aparece em detalhe, nunca em area grande.
   Fundo off-white quente: branco puro a 19px cansa em texto longo.
   --------------------------------------------------------------------------- */
:root {
  --ink: #1a1c2e; --ink-soft: #565d78; --line: #e3ded4;
  --bg: #faf8f4; --bg-soft: #f1ede4;
  --accent: #2f4a8a; --accent-soft: #eceff8;
  --warn-bg: #fdf6ec; --warn-line: #e2c893; --warn-ink: #6b4a12;
  --serif: "Source Serif 4", "Serif Fallback", Georgia, serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --deva: "Noto Serif Devanagari", "Deva Fallback", "Nirmala UI", serif;
  --deva-sans: "Noto Sans Devanagari", "Deva Fallback", "Nirmala UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e9f0; --ink-soft: #a6acc0; --line: #272b3d;
    --bg: #111320; --bg-soft: #181b2a;
    --accent: #9fb4e8; --accent-soft: #1a2036;
    --warn-bg: #1f1a10; --warn-line: #4a3d22; --warn-ink: #e0c58a;
  }
}
:root[data-theme="dark"] {
  --ink: #e8e9f0; --ink-soft: #a6acc0; --line: #272b3d;
  --bg: #111320; --bg-soft: #181b2a; --accent: #9fb4e8; --accent-soft: #1a2036;
  --warn-bg: #1f1a10; --warn-line: #4a3d22; --warn-ink: #e0c58a;
}
:root[data-theme="light"] {
  --ink: #1a1c2e; --ink-soft: #565d78; --line: #e3ded4;
  --bg: #faf8f4; --bg-soft: #f1ede4; --accent: #2f4a8a; --accent-soft: #eceff8;
  --warn-bg: #fdf6ec; --warn-line: #e2c893; --warn-ink: #6b4a12;
}

* { box-sizing: border-box; }

body {
  background: var(--bg); color: var(--ink);
  font: 19px/1.7 var(--serif);
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

/* Hindi: fonte propria e respiro maior. Vale para a pagina inteira quando o
   documento e hi, e tambem para trechos soltos marcados com [lang="hi"]. */
html[lang^="hi"] body,
[lang^="hi"] {
  font-family: var(--deva);
  line-height: 1.9;
}
html[lang^="hi"] .meta,
html[lang^="hi"] .crumb,
html[lang^="hi"] .tag,
html[lang^="hi"] .mini,
html[lang^="hi"] .card h3 { font-family: var(--deva-sans); }

.wrap { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------------------------
   Cabecalho e navegacao
   --------------------------------------------------------------------------- */
header.site { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
header.site .wrap, header.site .wrap-wide {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.brand { display: block; line-height: 0; text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
@media (max-width: 33rem) { .brand img { height: 28px; } }
.tag { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); }

/* Seletor de idioma: precisa ser obvio, e o publico alterna de verdade. */
.lang-switch { margin-left: auto; font-family: var(--sans); font-size: .82rem; }
.lang-switch a { color: var(--ink-soft); text-decoration: none; padding: .2rem .45rem; }
.lang-switch a[aria-current="true"] {
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
.lang-switch a:hover { color: var(--accent); }

.crumb {
  font-family: var(--sans);
  font-size: .78rem; color: var(--ink-soft); margin: 2rem 0 1rem;
}
.crumb a { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Tipografia do artigo
   --------------------------------------------------------------------------- */
h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.5rem); line-height: 1.18;
  letter-spacing: -.02em; margin: 0 0 1rem;
  /* text-wrap:balance reparte as linhas do titulo por igual. Alem de ficar
     melhor, estabiliza a quebra: sem isso o H1 do desktop passava de 2 linhas
     para 1 quando a webfont carregava, deslocando a pagina 47px (CLS 0,16). */
  text-wrap: balance;
}
html[lang^="hi"] h1 { line-height: 1.35; letter-spacing: 0; }

h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.3;
  margin: 3rem 0 1rem; letter-spacing: -.01em;
}
html[lang^="hi"] h2 { line-height: 1.5; letter-spacing: 0; }

h3 { font-size: 1.15rem; line-height: 1.35; margin: 2rem 0 .6rem; }
html[lang^="hi"] h3 { line-height: 1.55; }

p { margin: 0 0 1.35rem; }
a { color: var(--accent); }

.meta {
  font-family: var(--sans);
  font-size: .8rem; color: var(--ink-soft); margin-bottom: 2.5rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.meta a { color: var(--ink-soft); }

/* Byline com o retrato da autora. O rosto ancora quem esta falando antes de a
   pessoa comecar a ler, o que importa num nicho YMYL onde a autoria e o sinal
   principal. A imagem tem width/height fixos no HTML e altura reservada aqui,
   entao nao ha reflow quando ela carrega (o CLS deste site e 0 e continua). */
.byline { display: flex; align-items: center; gap: .8rem; }
.byline p { margin: 0; }
.byline-face {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  /* Aro discreto para separar a foto do fundo claro sem virar enfeite. */
  box-shadow: 0 0 0 1px var(--line);
}
.byline-face img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Resposta direta abaixo do H1. Enfase tipografica, nao cartao com borda
   colorida (o detector do impeccable reprova side-tab colorido). */
.answer { margin: 0 0 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.answer p { margin: 0; font-size: 1.22rem; line-height: 1.55; font-style: italic; }
html[lang^="hi"] .answer p { font-style: normal; line-height: 1.8; font-size: 1.15rem; }
.answer strong { font-style: normal; color: var(--accent); }

/* ---------------------------------------------------------------------------
   Bloco de alerta. Usado para o aviso da sinefrina e para o disclaimer medico.
   Borda completa (nao border-left colorida).
   --------------------------------------------------------------------------- */
.warn {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 4px; padding: 1.15rem 1.25rem; margin: 2.25rem 0;
  font-size: .95rem; line-height: 1.6;
}
.warn p:last-child { margin-bottom: 0; }
.warn strong { color: var(--warn-ink); }

/* ---------------------------------------------------------------------------
   Tabelas: rolam sozinhas no celular em vez de estourar a lateral.
   --------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--sans); font-size: .82rem; text-transform: uppercase;
     letter-spacing: .04em; color: var(--ink-soft); }
html[lang^="hi"] th { text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   Figuras. width/height explicitos no HTML + aspect-ratio aqui = CLS 0.
   --------------------------------------------------------------------------- */
figure { margin: 2.5rem 0; }
figure img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px;
}
figcaption {
  font-family: var(--sans); font-size: .8rem; color: var(--ink-soft);
  margin-top: .6rem; line-height: 1.5;
}
html[lang^="hi"] figcaption { font-family: var(--deva-sans); }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */
.faq { margin: 3.5rem 0; }
.faq h3 { margin-top: 1.75rem; }

/* Retrato da autora. Quadrado e contido: em nicho de saude o rosto do autor e
   sinal de E-E-A-T, mas nao deve dominar a pagina como foto de campanha. */
.portrait { margin: 1.5rem 0 2.5rem; max-width: 15rem; }
.portrait img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 50%; display: block;
  border: 1px solid var(--line);
}
.portrait figcaption { margin-top: .8rem; }

/* ---------------------------------------------------------------------------
   Cards de artigo (home e "leia tambem")
   --------------------------------------------------------------------------- */
.cards { display: grid; gap: 1.75rem; margin: 2rem 0 3.5rem;
         grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
/* minmax puro nao encolhe abaixo do piso e estoura no celular: media query
   explicita resolve (licao registrada no Arthrozax). */
@media (max-width: 34rem) { .cards { grid-template-columns: 1fr; } }

/* O card precisa ler como OBJETO CLICAVEL, nao como mais um paragrafo. Tres
   coisas fazem isso: a capa no topo, a superficie propria (fundo + borda) e o
   movimento no hover. Sem a capa, o olho varre a secao como texto corrido. */
.card {
  text-decoration: none; color: inherit; display: block;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgb(0 0 0 / .10);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}
.card img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block;
  border-bottom: 1px solid var(--line);
}
/* O conteudo do card usa <span display:block>, e nao <h3>/<p>: bloco dentro de
   <a> inline e HTML invalido e ja quebrou card em outro projeto. O peso visual
   de titulo vem do CSS, nao da tag. */
.card-text { display: block; padding: 1rem 1.1rem 1.15rem; }
.card-title {
  display: block; font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600; line-height: 1.3;
  color: var(--ink); margin-bottom: .4rem;
}
html[lang^="hi"] .card-title { font-family: var(--deva); line-height: 1.5; }
.card-blurb {
  display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.55;
}
/* Seta que aparece no hover: sinal de affordance sem virar botao falso. */
.card .more {
  display: block; margin-top: .7rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  color: var(--accent); letter-spacing: .01em;
}
html[lang^="hi"] .card .more { font-family: var(--deva-sans); }

/* ---------------------------------------------------------------------------
   CTA de afiliado. Sem promessa no botao: o texto vende o motivo de clicar.
   --------------------------------------------------------------------------- */
.cta { display: block; background: var(--accent-soft);
       border: 1px solid var(--line); border-radius: 6px;
       padding: 1.4rem 1.5rem; margin: 2.5rem 0; text-decoration: none;
       color: inherit; }
.cta:hover { border-color: var(--accent); }
/* kicker/headline/mini servem ao .cta antigo (sem foto) e ao .offer novo (com
   foto). Seletor compartilhado para as duas variantes nao divergirem. */
.cta .kicker, .offer .kicker {
               font-family: var(--sans); font-size: .74rem; letter-spacing: .08em;
               text-transform: uppercase; color: var(--accent); display: block;
               margin-bottom: .5rem; }
html[lang^="hi"] .cta .kicker, html[lang^="hi"] .offer .kicker {
               font-family: var(--deva-sans);
               text-transform: none; letter-spacing: .02em; }
.cta .headline, .offer .headline {
                 font-family: var(--serif);
                 font-size: 1.1rem; font-weight: 600; display: block;
                 margin-bottom: .45rem; line-height: 1.4; }
html[lang^="hi"] .offer .headline { font-family: var(--deva); line-height: 1.55; }
.cta .mini, .offer .mini {
             font-family: var(--sans); font-size: .8rem; color: var(--ink-soft);
             display: block; line-height: 1.55; }
html[lang^="hi"] .cta .mini, html[lang^="hi"] .offer .mini {
             font-family: var(--deva-sans); }

/* ---------------------------------------------------------------------------
   Card de oferta com foto REAL do produto.
   Foto a esquerda no desktop, acima no celular. A foto e o que diferencia este
   bloco do texto ao redor: sem ela, o CTA e lido como mais um paragrafo.
   --------------------------------------------------------------------------- */
/* O card de oferta e o unico ponto de conversao do artigo, e ele estava se
   DISSOLVENDO no corpo do texto: no tema escuro o fundo era --accent-soft
   (#1a2036) contra a pagina em #111320, quase o mesmo tom, com borda de 1px.
   O leitor passava direto. Aqui ele ganha separacao real, sem virar banner
   piscante que destrua a credibilidade editorial do resto da pagina. */
.offer {
  position: relative;
  display: grid; grid-template-columns: 13rem 1fr;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden;
  margin: 2.75rem 0; text-decoration: none; color: inherit;
  box-shadow: 0 2px 14px rgb(0 0 0 / .07);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* A barra de acento no topo separa o bloco do texto a distancia de leitura: a
   cor aparece antes de qualquer palavra ser lida. Vai como pseudo-elemento e
   nao como border-top de 3px porque borda grossa sobre canto de 6px cria um
   encontro torto entre a espessura e a curva (o detector do impeccable reprova,
   com razao). Assim a barra fica reta e os cantos seguem arredondados. */
.offer::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 3px; background: var(--accent); z-index: 1;
}
.offer:hover, .offer:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgb(0 0 0 / .16);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .offer:hover, .offer:focus-visible { transform: none; }
}

/* Rotulo da secao. Diz ao olho o que este bloco E antes de ele ser lido como
   texto: um destino externo, nao mais um paragrafo do artigo. */
.offer-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .55rem;
}
/* max-width/max-height, e nao so width/height: se por qualquer motivo a regra
   chegar tarde ou um estilo herdado esticar o SVG, o teto continua valendo. */
.offer-tag svg {
  width: .95rem; height: .95rem;
  max-width: .95rem; max-height: .95rem;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .offer { transition: none; } }
.offer-text { display: block; padding: 1.35rem 1.5rem; }
/* object-fit CONTAIN, nao cover: as fotos ja vem com margem no arquivo (a
   conversao usa fit:contain porque as originais sao quadradas ou verticais e
   qualquer corte decapita o nome do produto). Cover aqui cortaria de novo. */
.offer img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: var(--bg-soft);
}

/* Botao. Nao e <button>: o card inteiro ja e um <a>, e aninhar link em link
   seria HTML invalido. Isto e o SINAL VISUAL de destino clicavel, com o alvo de
   toque de 44px que o iOS recomenda. */
.offer-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.15rem;
  background: var(--accent); color: var(--bg);
  font-family: var(--sans); font-size: .95rem; font-weight: 700;
  padding: .8rem 1.5rem; border-radius: 4px;
  line-height: 1.5; min-height: 2.75rem; box-sizing: border-box;
  box-shadow: 0 2px 8px rgb(0 0 0 / .14);
  transition: filter .18s ease, box-shadow .18s ease;
}
/* A seta vive num <span> proprio para poder deslizar no hover sem arrastar o
   texto junto. Movimento de 3px: sinaliza "isto leva a outro lugar" sem virar
   animacao chamativa numa pagina que se apresenta como editorial. */
.offer-btn .arrow {
  display: inline-block; transition: transform .18s ease;
}
.offer:hover .offer-btn .arrow,
.offer-btn:focus-visible .arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .offer-btn .arrow { transition: none; }
  .offer:hover .offer-btn .arrow { transform: none; }
}

/* Link esticado: o botao e o unico <a> do card, e o ::after dele cobre o card
   inteiro para que qualquer clique no bloco navegue.
   Vantagem sobre a versao antiga (card inteiro como <a> e botao como <span>):
   um link de verdade, com href proprio, e clicavel em qualquer navegador e nao
   depende de o clique borbulhar de um filho para o pai, que era exatamente o
   que falhava no Safari.
   O ::after se ancora no .offer (position: relative) porque nenhum elemento
   entre os dois cria contexto de posicionamento. */
.offer-btn { position: relative; z-index: 2; text-decoration: none; }

/* Camada que torna o CARD INTEIRO clicavel.
   E um <a> proprio, irmao do botao, esticado sobre todo o .offer. Poderia ser
   um ::after do botao, mas o .offer e um grid e o pseudo-elemento fica preso a
   celula do botao. Uma camada explicita nao depende de truque de layout.
   `aria-hidden` + `tabindex="-1"` no HTML: para leitor de tela e teclado ela
   nao existe, senao o mesmo destino apareceria duas vezes na navegacao. */
.offer-cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
html[lang^="hi"] .offer-btn { font-family: var(--deva-sans); }
.offer:hover .offer-btn, .offer:focus-visible .offer-btn { filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .offer-btn { transition: none; } }

/* Nota de afiliado: FORA do <a>, abaixo e visualmente secundaria.
   ⚠️ Ela e discreta, NAO invisivel. Contraste medido em 4,7 (o minimo legal
   AA e 4,5) e corpo em 13px. Texto que so o robo consegue ler e tratado pelo
   Google como hidden text e vira penalizacao, alem de descumprir a obrigacao
   de divulgacao de afiliado, que existe para o LEITOR. Nao baixar mais. */
.aff-note {
  margin: .6rem 0 0; font-family: var(--sans);
  font-size: .8125rem; line-height: 1.5;
  color: var(--ink-soft);
}
html[lang^="hi"] .aff-note { font-family: var(--deva-sans); }
.offer-block { margin: 2.75rem 0; }
.offer-block .offer { margin: 0; }
/* Empilha no celular. 34rem e o mesmo ponto de quebra dos cards, para o site
   nao ter dois pontos de reflow diferentes. */
@media (max-width: 34rem) {
  .offer { grid-template-columns: 1fr; }
  .offer img { aspect-ratio: 16 / 9; height: auto; }
  .offer-text { padding: 1.15rem 1.25rem 1.3rem; }
}

/* ---------------------------------------------------------------------------
   Divulgacao de afiliado e rodape
   --------------------------------------------------------------------------- */
.disclosure {
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: .78rem; color: var(--ink-soft);
  padding: .6rem 0; line-height: 1.5;
}
html[lang^="hi"] .disclosure { font-family: var(--deva-sans); }

footer.site {
  border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.5rem 0 3.5rem;
  font-family: var(--sans); font-size: .85rem; color: var(--ink-soft);
  line-height: 1.65;
}
html[lang^="hi"] footer.site { font-family: var(--deva-sans); }
footer.site a { color: var(--ink-soft); }
footer.site nav { margin-bottom: 1.25rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Acessibilidade: foco visivel para quem navega por teclado. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px;
  background: var(--bg); color: var(--ink); padding: .7rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }