/* =========================================================
   Dra. Gabriela Bellini — Ginecologia e Obstetrícia
   Folha de estilo única do site
   Paleta oficial do Manual da Marca:
   #701E16 (vinho)  #806B65 (taupe)  #FEF4F1 (creme)
   ========================================================= */

/* --- Fontes hospedadas no próprio site (carregam mais rápido e não dependem do Google) --- */
@font-face{
  font-family:"Italiana"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/italiana-latin-400-normal.woff2") format("woff2"),
      url("fonts/italiana-latin-400-normal.woff") format("woff");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2"),
      url("fonts/montserrat-latin-400-normal.woff") format("woff");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/montserrat-latin-500-normal.woff2") format("woff2"),
      url("fonts/montserrat-latin-500-normal.woff") format("woff");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2"),
      url("fonts/montserrat-latin-600-normal.woff") format("woff");
}

:root{
  --brown:#701E16;
  --brown-dk:#571610;
  --brown-lt:#8E3227;
  --taupe:#806B65;
  --taupe-dk:#6B564F;
  --cream:#FEF4F1;
  --cream-2:#F8EAE4;
  --cream-3:#F2DED7;
  --ink:#2E1C18;
  --line:rgba(112,30,22,.14);
  --shadow:0 1px 2px rgba(46,28,24,.04), 0 8px 30px rgba(46,28,24,.06);
  --shadow-lg:0 2px 4px rgba(46,28,24,.05), 0 18px 50px rgba(46,28,24,.10);
  --radius:14px;
  --maxw:1180px;
  --ph:#F6DFB8;
  --font-display:"Italiana", "Times New Roman", serif;
  --font-body:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:120px}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%; height:auto; display:block}

a{color:var(--brown); text-decoration:none}
a:hover{color:var(--brown-lt)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.narrow{max-width:760px; margin-inline:auto}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{margin:0 0 .5em; font-weight:400; line-height:1.15; color:var(--brown)}

h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing:.02em;
}
h2{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4vw, 3rem);
  letter-spacing:.02em;
}
h3{
  font-family:var(--font-body);
  font-size:1.06rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.4;
  color:var(--brown);
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--taupe-dk);
  margin:0 0 14px;
  display:block;
}
.lead{font-size:1.1rem; color:var(--taupe-dk); line-height:1.8}
.muted{color:var(--taupe-dk)}

/* filete decorativo do brand book */
.rule{width:56px; height:5px; background:var(--brown); border:0; margin:0 0 26px; border-radius:2px}
.rule.center{margin-inline:auto}

/* ---------- Placeholders a preencher ---------- */
.ph{
  background:var(--ph);
  box-shadow:0 0 0 2px var(--ph);
  border-radius:3px;
  font-style:normal;
  color:#5A3B0A;
  font-weight:500;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px;
  border-radius:100px;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  border:1.5px solid var(--brown);
  background:var(--brown);
  color:var(--cream);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  text-align:center;
}
.btn:hover{background:var(--brown-dk); border-color:var(--brown-dk); color:var(--cream); transform:translateY(-2px); box-shadow:0 10px 24px rgba(112,30,22,.24)}
.btn--ghost{background:transparent; color:var(--brown)}
.btn--ghost:hover{background:var(--brown); color:var(--cream)}
.btn--light{background:var(--cream); color:var(--brown); border-color:var(--cream)}
.btn--light:hover{background:#fff; border-color:#fff; color:var(--brown)}
.btn--sm{padding:11px 22px; font-size:.7rem}
.btn svg{width:17px; height:17px; flex:none}

.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- Cabeçalho ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(254,244,241,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(46,28,24,.05)}
.site-header .wrap{display:flex; align-items:center; gap:24px; min-height:104px}

.brand{display:flex; align-items:center; flex:none; margin-right:auto}
.brand img{height:74px; width:auto}

.nav{display:flex; align-items:center; gap:30px}
.nav a{
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--taupe-dk); padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--brown); transition:right .25s ease;
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--brown)}
.nav a:hover::after, .nav a[aria-current="page"]::after{right:0}

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:10px; background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:none;
}
.nav-toggle span{display:block; width:19px; height:1.5px; background:var(--brown); position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--brown);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%);
  padding:clamp(64px,9vw,120px) 0 clamp(64px,9vw,110px);
}
.hero::after{
  content:""; position:absolute; right:-20%; top:-30%;
  width:min(680px,64vw); aspect-ratio:1; opacity:.10;
  background:url("logo-mark.svg") center/contain no-repeat;
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,72px); align-items:center}
.hero h1{margin-bottom:.3em}
.hero .lead{max-width:52ch; margin-bottom:34px}
.hero-portrait{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:var(--cream-3); box-shadow:var(--shadow-lg);
  display:grid; place-items:center; text-align:center; padding:28px;
}
.hero-portrait img{width:100%; height:100%; object-fit:cover}
.photo-hint{
  font-size:.78rem; letter-spacing:.06em; color:var(--taupe-dk); line-height:1.6; max-width:26ch;
}
.photo-hint strong{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--brown); letter-spacing:.04em; margin-bottom:8px; font-weight:400}

/* ---------- Seções ---------- */
section{padding:clamp(60px,8vw,104px) 0}
.sec-alt{background:var(--cream-2)}
.sec-dark{background:var(--brown); color:var(--cream-2)}
.sec-dark h2,.sec-dark h3{color:var(--cream)}
.sec-dark .eyebrow{color:rgba(254,244,241,.66)}
.sec-dark .rule{background:rgba(254,244,241,.55)}
.sec-dark .lead,.sec-dark .muted{color:rgba(254,244,241,.82)}
.sec-dark a{color:var(--cream)}
/* botões dentro da faixa escura precisam vencer a regra acima */
.sec-dark a.btn--light,.sec-dark a.btn--light:hover{color:var(--brown)}
.sec-dark a.btn--ghost{color:var(--cream); border-color:rgba(254,244,241,.6)}
.sec-dark a.btn--ghost:hover{background:var(--cream); color:var(--brown)}

.sec-head{max-width:660px; margin-bottom:52px}
.sec-head.center{margin-inline:auto; text-align:center}

/* ---------- Grades e cards ---------- */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 30px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sec-alt .card{background:#fff}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(112,30,22,.28)}
.card p{font-size:.95rem; color:var(--taupe-dk); margin-bottom:0}
.card .ico{
  width:44px; height:44px; margin-bottom:20px; color:var(--brown);
}
.card .ico svg{width:100%; height:100%; stroke:currentColor; stroke-width:1.2; fill:none}

/* card de artigo */
.post{
  display:flex; flex-direction:column;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .22s ease, box-shadow .22s ease;
}
.sec-alt .post{background:#fff}
.post:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.post-cover{
  aspect-ratio:16/10; background:var(--cream-3);
  display:grid; place-items:center; border-bottom:1px solid var(--line);
}
.post-cover img{width:100%; height:100%; object-fit:cover}
.post-cover svg{width:56px; height:56px; color:var(--brown); opacity:.4; stroke:currentColor; stroke-width:1; fill:none}
.post-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.post-tag{
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--taupe-dk); margin-bottom:12px;
}
.post h3{margin-bottom:10px; font-size:1.1rem}
.post p{font-size:.93rem; color:var(--taupe-dk); margin-bottom:20px}
.post .more{
  margin-top:auto; font-size:.74rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
}
.post .more::after{content:"→"; transition:transform .2s ease}
.post:hover .more::after{transform:translateX(4px)}

/* lista de formação */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{
  position:relative; padding:0 0 30px 34px; border-left:1.5px solid var(--line);
}
.timeline li:last-child{padding-bottom:0; border-left-color:transparent}
.timeline li::before{
  content:""; position:absolute; left:-6.5px; top:8px; width:11px; height:11px;
  border-radius:50%; background:var(--brown); box-shadow:0 0 0 4px var(--cream);
}
.sec-alt .timeline li::before{box-shadow:0 0 0 4px var(--cream-2)}
.timeline strong{display:block; color:var(--brown); font-weight:600; font-size:1rem; margin-bottom:2px}
.timeline span{font-size:.92rem; color:var(--taupe-dk)}

/* passos do agendamento */
.steps{counter-reset:step; display:grid; gap:24px; grid-template-columns:repeat(3,1fr)}
.step{padding-top:14px; border-top:2px solid rgba(254,244,241,.3)}
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-display); font-size:1.9rem; display:block; margin-bottom:10px;
  color:rgba(254,244,241,.75);
}
.step h3{font-size:1.02rem; margin-bottom:8px}
.step p{font-size:.93rem; color:rgba(254,244,241,.82); margin:0}

/* bloco de contato */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start}
.info-list{list-style:none; margin:0 0 32px; padding:0}
.info-list li{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
.info-list li:first-child{padding-top:0}
.info-list svg{width:20px; height:20px; flex:none; margin-top:4px; color:var(--brown); stroke:currentColor; stroke-width:1.4; fill:none}
.info-list .k{font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-dk); display:block; margin-bottom:3px}
.info-list .v{font-size:1rem; color:var(--ink)}
.map{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  min-height:380px; background:var(--cream-3); display:grid; place-items:center; text-align:center; padding:30px;
}
.map iframe{width:100%; height:100%; min-height:380px; border:0; display:block}
.map--sm{min-height:0}
.map--sm iframe{min-height:250px; height:250px}

/* ---------- Artigo ---------- */
.article-head{background:var(--cream-2); padding:clamp(48px,7vw,84px) 0 clamp(36px,5vw,56px)}
.article-body{padding:clamp(44px,6vw,72px) 0 clamp(60px,8vw,100px)}
.article-body h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-top:2em}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:1.05rem; margin-top:1.9em; margin-bottom:.5em}
.article-body ul,.article-body ol{padding-left:1.3em; margin:0 0 1.3em}
.article-body li{margin-bottom:.55em}
.article-meta{font-size:.8rem; letter-spacing:.06em; color:var(--taupe-dk)}
.callout{
  background:var(--cream-2); border-left:3px solid var(--brown);
  padding:24px 28px; border-radius:0 var(--radius) var(--radius) 0; margin:2em 0;
}
.callout p{font-size:.96rem; margin:0}
.callout strong{color:var(--brown)}

/* aviso médico */
.disclaimer{
  border:1px dashed rgba(112,30,22,.3); border-radius:var(--radius);
  padding:22px 26px; background:transparent; margin-top:2.5em;
}
.disclaimer p{font-size:.86rem; color:var(--taupe-dk); margin:0}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--brown); color:rgba(254,244,241,.8); padding:70px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; padding-bottom:52px}
.site-footer img{height:124px; width:auto; margin-bottom:24px}
.site-footer h4{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream); margin:0 0 18px;
}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:11px; font-size:.92rem}
.site-footer a{color:rgba(254,244,241,.8)}
.site-footer a:hover{color:#fff}
.site-footer p{font-size:.92rem; margin-bottom:11px}
.footer-bottom{
  border-top:1px solid rgba(254,244,241,.16); padding:24px 0 30px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.78rem; color:rgba(254,244,241,.6);
}

/* ---------- Botão flutuante WhatsApp ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; align-items:center; gap:11px;
  background:#25D366; color:#fff; padding:13px 20px 13px 16px;
  border-radius:100px; box-shadow:0 8px 26px rgba(0,0,0,.2);
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa:hover{transform:translateY(-2px); color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.26)}
.wa svg{width:22px; height:22px; fill:currentColor; flex:none}

/* ---------- Animação de entrada ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-portrait{max-width:400px; order:-1}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* menu do celular: entra antes, para o cabeçalho não estourar em telas médias */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:8px 24px 20px; display:none;
    box-shadow:0 18px 40px rgba(46,28,24,.1);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:.8rem}
  .nav a:last-of-type{border-bottom:0}
  .nav .btn{margin-top:14px}
  .nav a::after{display:none}
  .site-header .wrap{min-height:88px}
  .brand img{height:60px}
  .site-footer img{height:100px}
}

@media (max-width:760px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:34px}
  .wa span{display:none}
  .wa{padding:15px; right:16px; bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* =========================================================
   COMPONENTES DE ARTIGO
   Usados pelos guias (contraceptivos, HPV, menopausa, SOMP).
   ========================================================= */

.article-body .wrap.wide{max-width:1080px}

/* --- Cabeçalho de seção numerada --- */
.a-sec{display:flex; gap:18px; align-items:flex-start; margin:3em 0 1.4em}
.a-sec:first-child{margin-top:0}
.a-sec .n{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--brown); color:var(--cream);
  font-family:var(--font-display); font-size:1.15rem;
  display:grid; place-items:center; margin-top:4px;
}
.a-sec h2{margin:0 0 .25em; font-size:clamp(1.5rem,2.8vw,2.05rem)}
.a-sec .sub{font-size:.97rem; color:var(--taupe-dk); line-height:1.7; margin:0}

/* --- Cards de conceito --- */
.a-cards{display:grid; gap:20px; grid-template-columns:repeat(3,1fr); margin:1.6em 0 2.4em}
.a-card{
  background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column;
}
.a-card .cn{font-weight:600; color:var(--brown); font-size:1.02rem; line-height:1.35}
.a-card .ct{
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--taupe-dk); margin-top:6px;
}
.a-card .top{padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.a-card p{font-size:.92rem; color:var(--taupe-dk); margin:0 0 1em}
.a-card ul{margin:0; padding-left:1.15em}
.a-card li{font-size:.9rem; color:var(--taupe-dk); margin-bottom:.4em}
.lbl{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brown); margin:0 0 8px;
}
.a-card .lbl + p, .a-card .lbl + ul{margin-top:0}
.a-card p + .lbl, .a-card ul + .lbl{margin-top:1.2em}

/* --- Bloco com cabeçalho (grupos de métodos) --- */
.a-block{margin:2.2em 0}
.a-block .bh{
  background:var(--brown); color:var(--cream);
  border-radius:var(--radius) var(--radius) 0 0; padding:18px 24px;
}
.a-block .bn{font-family:var(--font-display); font-size:1.3rem; letter-spacing:.02em}
.a-block .bd{font-size:.85rem; color:rgba(254,244,241,.8); margin-top:3px}

/* --- Tabela comparativa --- */
.a-table{border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); overflow:hidden}
.a-rhead, .a-row{display:grid; gap:16px; padding:14px 24px; align-items:start}
.a-rhead{
  background:var(--cream-2); border-bottom:1px solid var(--line);
  font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--taupe-dk);
}
.a-row{border-bottom:1px solid var(--line); font-size:.9rem}
.a-row:last-child{border-bottom:0}
.a-row .rlab{font-weight:600; color:var(--brown); line-height:1.4}
.a-row .rc{color:var(--taupe-dk); line-height:1.55}
.a-row .rc i{font-style:normal; display:block; font-size:.84rem; color:var(--taupe); margin-top:3px}
.a-row .rc b{color:var(--ink); font-weight:600}

/* --- Passos numerados --- */
.a-steps{display:grid; gap:16px; margin:1.6em 0 2.4em}
.a-step{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px;
}
.a-step .snum{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--brown); color:var(--cream);
  font-family:var(--font-display); font-size:1rem; display:grid; place-items:center;
}
.a-step .st{font-weight:600; color:var(--brown); margin-bottom:5px}
.a-step .sx{font-size:.93rem; color:var(--taupe-dk); line-height:1.65}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips span{
  background:var(--cream); border:1px solid var(--line); border-radius:100px;
  padding:5px 13px; font-size:.78rem; color:var(--taupe-dk);
}
.chips b{color:var(--brown); font-weight:600}

/* --- Pontos de atenção --- */
.a-points{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin:2.2em 0;
}
.a-points .ph{
  background:var(--cream-2); padding:15px 24px; border-bottom:1px solid var(--line);
  font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brown);
}
.a-points .pitem{padding:18px 24px; border-bottom:1px solid var(--line); font-size:.93rem; color:var(--taupe-dk); line-height:1.65}
.a-points .pitem:last-child{border-bottom:0}
.a-points .pitem b{display:block; color:var(--brown); font-weight:600; margin-bottom:5px; font-size:.97rem}

/* --- Fontes consultadas --- */
.a-sources{margin-top:2.5em; border-top:1px solid var(--line); padding-top:22px}
.a-sources summary{
  cursor:pointer; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--taupe-dk); list-style:none;
}
.a-sources summary::-webkit-details-marker{display:none}
.a-sources summary::before{content:"+ "; color:var(--brown)}
.a-sources[open] summary::before{content:"– "}
.a-sources .txt{font-size:.84rem; color:var(--taupe-dk); line-height:1.7; margin-top:14px}

@media (max-width:900px){
  .a-cards{grid-template-columns:1fr}
  .a-rhead{display:none}
  .a-row{grid-template-columns:1fr !important; gap:0; padding:18px 20px}
  .a-row .rlab{font-size:1rem; margin-bottom:10px}
  .a-row .rc{padding:8px 0; border-top:1px solid var(--line)}
  .a-row .rc::before{
    content:attr(data-h); display:block; font-size:.62rem; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:var(--brown); margin-bottom:4px;
  }
  .a-sec{gap:14px}
  .a-sec .n{width:32px; height:32px; font-size:1rem}
}

/* --- Destaque com cabeçalho (callout dos guias) --- */
.a-callout{
  background:var(--cream-2); border:1px solid var(--line);
  border-left:3px solid var(--brown); border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 28px; margin:2em 0;
}
.a-callout .ch{
  font-weight:600; color:var(--brown); font-size:1.02rem;
  line-height:1.4; margin-bottom:10px;
}
.a-callout p{font-size:.94rem; color:var(--taupe-dk); line-height:1.7; margin:0 0 .9em}
.a-callout p:last-child{margin-bottom:0}
.a-callout b{color:var(--ink); font-weight:600}

/* --- Perguntas frequentes --- */
.a-faq{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin:2.2em 0;
}
.a-faq > div{padding:22px 26px; border-bottom:1px solid var(--line)}
.a-faq > div:last-child{border-bottom:0}
.a-faq h3{margin:0 0 8px; font-size:1rem}
.a-faq p{font-size:.93rem; color:var(--taupe-dk); line-height:1.7; margin:0}

/* --- Etapas de um exame --- */
.a-exam{display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin:1.8em 0 2.4em}
.a-exam .ex{
  background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px;
}
.a-exam .exh{
  display:flex; align-items:center; gap:11px;
  font-weight:600; color:var(--brown); margin-bottom:11px; line-height:1.35;
}
.a-exam .exn{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--brown); color:var(--cream);
  font-family:var(--font-display); font-size:.95rem;
  display:grid; place-items:center;
}
.a-exam p{font-size:.92rem; color:var(--taupe-dk); line-height:1.65; margin:0}

@media (max-width:900px){
  .a-exam{grid-template-columns:1fr}
}

/* --- Ilustrações de linha dentro das etapas de exame --- */
.exic{
  display:block; width:100%; max-width:260px; height:104px;
  margin:16px auto 14px; stroke:var(--taupe); color:var(--taupe);
}
.exic .ac{stroke:var(--brown)}
.exic .fillac{fill:var(--cream-3); stroke:var(--brown)}

/* --- Colunas dentro de um destaque --- */
.crow{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:14px}
.crow > div{
  font-size:.9rem; line-height:1.6; color:var(--taupe-dk);
  padding-left:14px; border-left:2px solid rgba(112,30,22,.25);
}
.cb2{
  display:block; font-weight:600; color:var(--brown);
  font-size:.93rem; margin-bottom:5px; line-height:1.35;
}

@media (max-width:900px){
  .crow{grid-template-columns:1fr}
}

/* --- Citação em destaque --- */
.a-quote{
  background:var(--brown); color:var(--cream);
  border-radius:var(--radius); padding:24px 28px; margin:0 0 2em;
  display:flex; align-items:center; gap:18px;
}
.a-quote svg{width:34px; height:34px; stroke:var(--cream); fill:none; stroke-width:1.2; flex:none; opacity:.85}
.a-quote p{
  font-family:var(--font-display); font-size:clamp(1.25rem,2.4vw,1.6rem);
  letter-spacing:.02em; line-height:1.35; margin:0; color:var(--cream);
}
.a-quote p b{font-weight:400; color:inherit}

/* --- Esquemas ilustrados --- */
.a-diag{display:grid; gap:18px; margin:1.6em 0 2.4em; grid-template-columns:repeat(2,1fr)}
.a-diag .dcard{border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.a-diag svg{
  display:block; width:100%; height:170px; margin:18px 0 16px;
  stroke:var(--taupe); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.a-diag svg .ac{stroke:var(--brown)}
.a-diag svg .fillac{fill:var(--cream-3); stroke:var(--brown)}
.a-diag svg .leadline{stroke:var(--line); stroke-width:.9}
.a-diag svg text{font-family:var(--font-body); font-size:8px; fill:var(--taupe-dk); stroke:none}
.a-diag .dh{
  font-family:var(--font-display); font-size:1.35rem; letter-spacing:.05em;
  color:var(--brown); line-height:1.15;
}
.a-diag .dh span{
  display:block; font-family:var(--font-body); font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--taupe-dk); margin-top:8px;
}
.a-diag p{font-size:.9rem; color:var(--taupe-dk); line-height:1.6; margin:0}

/* --- Faça / Evite --- */
.a-fe{display:grid; gap:18px; grid-template-columns:repeat(2,1fr); margin:1.6em 0 2em}
.a-fe .fecol{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.a-fe .feh{
  display:flex; align-items:center; gap:11px; padding:14px 22px;
  font-family:var(--font-display); font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase;
}
.a-fe .feh svg{width:20px; height:20px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none}
.a-fe .fe-do .feh{background:var(--cream-2); color:var(--taupe-dk)}
.a-fe .fe-do .feh svg{stroke:var(--brown)}
.a-fe .fe-no .feh{background:var(--brown); color:var(--cream)}
.a-fe .fe-no .feh svg{stroke:var(--cream)}
.a-fe ul{list-style:none; margin:0; padding:18px 24px 22px}
.a-fe li{font-size:.92rem; line-height:1.6; padding-left:24px; position:relative; margin-bottom:10px; color:var(--taupe-dk)}
.a-fe li:last-child{margin-bottom:0}
.a-fe li b{color:var(--brown); font-weight:600}
.a-fe .fe-do li::before{
  content:''; position:absolute; left:2px; top:5px; width:9px; height:5px;
  border-left:2px solid var(--brown); border-bottom:2px solid var(--brown); transform:rotate(-45deg);
}
.a-fe .fe-no li::before{
  content:''; position:absolute; left:2px; top:11px; width:11px; height:0; border-top:2px solid var(--brown-lt);
}

/* --- Duas colunas de blocos --- */
.a-duo{display:grid; gap:18px; grid-template-columns:1fr 1fr; align-items:start; margin:1.6em 0 2.2em}
.a-duo .a-block{margin:0}

/* ícone no cabeçalho do bloco */
.a-block .bh{display:flex; align-items:center; gap:12px}
.a-block .bh svg{width:21px; height:21px; flex:none; stroke:var(--cream); fill:none}
.a-block .bh > div{min-width:0}

/* --- Painéis ilustrados --- */
.a-panels{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin:1.6em 0 2.2em}
.a-panel{border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px 24px}
.a-panel .panelh{
  font-family:var(--font-display); font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brown); display:flex; align-items:center; gap:11px; line-height:1.15;
}
.a-panel .panelh span{
  width:26px; height:26px; border-radius:50%; background:var(--brown); color:var(--cream);
  flex:none; display:grid; place-items:center; font-size:.85rem; font-family:var(--font-display);
}
.a-panel svg{
  display:block; width:100%; height:130px; margin:16px 0 14px;
  stroke:var(--taupe); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.a-panel svg .ac{stroke:var(--brown)}
.a-panel svg .fillac{fill:var(--cream-3); stroke:var(--brown)}
.a-panel .panelx{font-size:.92rem; line-height:1.65; color:var(--taupe-dk)}
.a-panel .panelx b{color:var(--brown); font-weight:600}

@media (max-width:900px){
  .a-diag, .a-fe, .a-duo, .a-panels{grid-template-columns:1fr}
}
.a-diag .dx{font-size:.9rem; line-height:1.6; color:var(--taupe-dk); margin:0}
.a-diag .dx b{color:var(--brown); font-weight:600}

/* --- Conteúdo livre dentro de um bloco --- */
.a-block .bbody{
  border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--radius) var(--radius); padding:22px 24px;
}
.a-block .bbody > p:last-child{margin-bottom:0}

/* --- Barras de proporção --- */
.bars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:4px 0 2px}
.bcap{
  font-family:var(--font-display); font-size:1.9rem; color:var(--brown);
  text-align:center; margin-bottom:9px; line-height:1; letter-spacing:.02em;
}
.bar{position:relative; height:120px; background:var(--cream-2); border-radius:6px; overflow:hidden}
.bar i{position:absolute; left:0; right:0; bottom:0; background:var(--brown); display:block}
.blab{font-size:.82rem; color:var(--taupe-dk); text-align:center; margin-top:11px; line-height:1.5}
.blab b{display:block; color:var(--brown); font-weight:600; font-size:.88rem; margin-bottom:3px}

/* --- Calendário do ciclo --- */
.cleg{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.8rem; color:var(--taupe-dk); margin-bottom:6px}
.cleg span{display:flex; align-items:center; gap:7px}
.cleg i{width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid var(--line); flex:none}
.cycle{display:grid; grid-template-columns:repeat(28,1fr); gap:3px; margin:10px 0 14px}
.cycle div{
  aspect-ratio:1/1.5; border-radius:3px; background:var(--cream-2); border:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:center;
  font-size:10px; color:var(--taupe-dk); padding-bottom:3px;
  min-width:0; overflow:hidden;
}
.cycle .mens{background:#F6E7E3; border-color:#E8CFC8; color:#8E3226}
.cycle .fert{background:#F0DBD5; border-color:var(--brown); color:var(--brown); font-weight:600}
.cycle .fert2{background:#DDB0A4; border-color:var(--brown); color:var(--brown); font-weight:600}
.cycle .ov{background:var(--brown); border-color:var(--brown); color:#fff; font-weight:600}

@media (max-width:760px){
  .bar{height:90px}
  .blab{font-size:.76rem}
  .cycle{grid-template-columns:repeat(7,1fr); gap:4px}
  .cycle div{aspect-ratio:1/.85; font-size:11px}
}

/* --- Linha de exemplos dentro de um bloco --- */
.exrow{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0}
.exrow > div{
  background:var(--cream-2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font-size:.88rem; line-height:1.55; color:var(--taupe-dk);
}
.exrow b{display:block; color:var(--brown); font-weight:600; margin-bottom:4px}

@media (max-width:760px){ .exrow{grid-template-columns:1fr} }

/* --- Produtos sugeridos --- */
.prods{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:22px 24px 6px}
.prod{
  border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  background:var(--cream-2);
}
.ptag{
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--taupe-dk); font-weight:600; margin-bottom:8px;
}
.pname{font-size:1rem; font-weight:600; color:var(--brown); line-height:1.35; margin-bottom:8px}
.ptxt{font-size:.9rem; line-height:1.6; color:var(--taupe-dk)}
.ptxt b{color:var(--ink); font-weight:600}

@media (max-width:760px){ .prods{grid-template-columns:1fr} }