/* CIÊNCIA LEITEIRA (18/10/2026) — mesmas cores, letras e moldura do index.html do site */
:root{
  --verde:#55704C; --verde-forte:#3B5136; --verde-claro:#85A260; --papel:#F6F7F3; --branco:#FFFFFF;
  --tinta:#1D241B; --tinta2:#5C665A; --linha:#DFE4DA; --raio:10px; --gut:20px; --larg:1080px;
  --aviso:#F8EED6; --aviso-tinta:#8A5A12;
}
*{box-sizing:border-box}
body{margin:0; background:var(--papel); color:var(--tinta); font:400 17px/1.65 "Source Sans 3", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Archivo, ui-sans-serif, system-ui, sans-serif; text-wrap:balance; margin:0}
a{color:inherit}
img{max-width:100%; display:block}
.env{width:100%; max-width:var(--larg); margin:0 auto; padding:0 var(--gut)}
.rotulo{font-family:Archivo; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); margin:0 0 10px}

header{position:sticky; top:0; z-index:50; background:rgba(246,247,243,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--linha)}
.topo{display:flex; align-items:center; gap:24px; height:68px}
.topo img{height:30px; width:auto}
nav{margin-left:auto; display:flex; align-items:center; gap:26px}
nav a{font-family:Archivo; font-weight:500; font-size:15px; text-decoration:none; color:var(--tinta2); padding:4px 0; border-bottom:2px solid transparent}
nav a:hover, nav a[aria-current]{color:var(--verde); border-bottom-color:var(--verde-claro)}
.menu-nav{display:flex; align-items:center; gap:26px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:Archivo; font-weight:600; font-size:15px; text-decoration:none; padding:11px 20px; border-radius:var(--raio); background:var(--verde); color:#fff; border:1px solid var(--verde); cursor:pointer; transition:background .15s, transform .15s}
.btn:hover{background:#46603E; transform:translateY(-1px)}
.btn.vazio{background:transparent; color:var(--verde)}
.btn.vazio:hover{background:rgba(85,112,76,.08); transform:none}
.btn.clara{background:#fff; color:var(--verde-forte); border-color:#fff}
.btn.clara:hover{background:#EDF0E8}
.btn.vazio-claro{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn.vazio-claro:hover{background:rgba(255,255,255,.08)}
nav .btn{color:var(--verde); border-bottom:1px solid var(--verde)}

.abertura{position:relative; overflow:hidden; border-bottom:1px solid var(--linha)}
.abertura::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--verde-claro) 1px, transparent 1px), linear-gradient(90deg, var(--verde-claro) 1px, transparent 1px); background-size:26px 26px; opacity:.22; -webkit-mask-image:radial-gradient(120% 90% at 82% 8%, #000 0%, transparent 62%); mask-image:radial-gradient(120% 90% at 82% 8%, #000 0%, transparent 62%)}
.abertura .env{position:relative; padding-top:60px; padding-bottom:56px}
.abertura .env > *{max-width:780px}
.abertura h1{font-size:clamp(30px,4.6vw,48px); line-height:1.1; font-weight:700; letter-spacing:-.015em}
.abertura p.linha{font-size:clamp(17px,2vw,20px); color:var(--tinta2); margin:18px 0 0; max-width:62ch}
section{padding:56px 0}
section h2{font-size:clamp(23px,3vw,30px); font-weight:700; letter-spacing:-.01em}
.intro{color:var(--tinta2); max-width:62ch; margin:14px 0 0}

/* lista */
.lista{padding-top:34px}
.busca{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.busca input{flex:1; min-width:220px; max-width:440px; font:inherit; font-size:16px; padding:10px 14px; border:1px solid #C6CEBE; border-radius:var(--raio); background:#fff; color:var(--tinta)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px}
.chip{font-family:Archivo; font-size:14px; font-weight:500; text-decoration:none; padding:6px 13px; border:1px solid #C6CEBE; border-radius:99px; background:#fff; color:var(--tinta)}
.chip b{font-weight:600; color:var(--tinta2); margin-left:3px}
.chip[aria-current]{background:var(--verde); border-color:var(--verde); color:#fff}
.chip[aria-current] b{color:#E3EBDB}
.nada{color:var(--tinta2); background:#fff; border:1px dashed #C6CEBE; border-radius:var(--raio); padding:28px; text-align:center}
.destaque{display:block; text-decoration:none; background:#fff; border:1px solid var(--linha); border-left:5px solid var(--verde-claro); border-radius:var(--raio); padding:28px 30px; margin-bottom:38px; transition:border-color .15s}
.destaque:hover{border-color:var(--verde)}
.destaque .selo{font-family:Archivo; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aviso-tinta)}
.destaque h2{font-size:clamp(23px,3vw,32px); line-height:1.18; margin:8px 0 10px}
.destaque p{margin:0; color:var(--tinta2); font-size:18px; max-width:66ch}
.destaque .ir{display:inline-block; margin-top:16px; font-family:Archivo; font-weight:600; color:var(--verde)}
.pe{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:14px; font-size:14px; color:var(--tinta2)}
.area, .area-ini{display:inline-block; font-family:Archivo; font-size:12px; font-weight:600; letter-spacing:.04em; padding:3px 10px; border-radius:99px; background:#E9EFE3; color:var(--verde-forte); width:max-content}
h2.sub{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta2); margin:0 0 16px}
.grade{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.cartao{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:22px 22px 20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; transition:border-color .15s, transform .15s}
.cartao:hover{border-color:var(--verde); transform:translateY(-1px)}
.cartao h3{font-size:19px; font-weight:600; line-height:1.28}
.cartao p{margin:0; font-size:15.5px; color:var(--tinta2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.cartao .pe{margin-top:auto; padding-top:6px}
.apl{display:inline-flex; gap:3px; align-items:center}
.apl i{width:8px; height:8px; border-radius:50%; background:#C6CEBE; display:inline-block}
.apl i.on{background:var(--verde)}
.vid{color:#B23A2A; font-weight:600}

/* artigo */
.artigo{max-width:800px; padding-top:34px; padding-bottom:56px}
.artigo .migalha{font-size:14px; color:var(--tinta2); margin:0 0 14px}
.migalha a{color:var(--verde); text-decoration:none} .migalha a:hover{text-decoration:underline}
.artigo h1{font-size:clamp(28px,4.4vw,42px); line-height:1.14; letter-spacing:-.015em; font-weight:700}
.artigo .linha-fina{font-size:clamp(18px,2.2vw,21px); color:var(--tinta2); margin:14px 0 18px; line-height:1.5}
.artigo .meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--tinta2); margin:0 0 26px; padding-bottom:18px; border-bottom:1px solid var(--linha)}
.aplx{display:inline-flex; gap:7px; align-items:center}
.artigo h2{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); margin:34px 0 10px}
.artigo p{margin:0 0 12px; font-size:17.5px; line-height:1.72; max-width:68ch}
.fatos{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:6px 0 14px}
.fatos div{background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:10px 14px; font-size:15px; line-height:1.45}
.fatos b{display:block; font-family:Archivo; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta2); font-weight:600; margin-bottom:3px}
.result{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.result li{display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; align-items:baseline; background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:13px 16px; font-size:16.5px; line-height:1.55}
.result li.sem{grid-template-columns:1fr}
.result .num{font-family:Archivo; font-weight:700; font-size:21px; color:var(--verde-forte); letter-spacing:-.01em}
.pontos{margin:4px 0 0; padding-left:22px} .pontos li{font-size:17.5px; line-height:1.6; margin:7px 0}
.pratica{background:#E9EFE3; border-radius:var(--raio); padding:18px 22px 14px}
.pratica ol{margin:0; padding-left:22px} .pratica li{font-size:17.5px; line-height:1.6; margin:7px 0}
.cuidado{background:var(--aviso); border-radius:var(--raio); padding:16px 20px; font-size:16.5px; line-height:1.6}
.nota{border-left:3px solid var(--verde-claro); padding:4px 0 4px 18px; font-size:17px; line-height:1.65}
.video{display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:12px 16px; text-decoration:none; max-width:560px}
.video:hover{border-color:var(--verde)}
.video .ic{flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#F8E3E0; color:#B23A2A; font-size:15px}
.video .tx{display:flex; flex-direction:column; line-height:1.35} .video .tx span{font-size:14px; color:var(--tinta2)}
.ref{margin-top:38px; padding-top:18px; border-top:1px solid var(--linha); font-size:15px; line-height:1.6; color:var(--tinta2)}
.ref b{color:var(--tinta)} .ref a{color:var(--verde); overflow-wrap:anywhere}
.aberto{font-family:Archivo; font-size:12px; font-weight:600; padding:2px 8px; border-radius:99px; background:#E9EFE3; color:var(--verde-forte)}
.artigo .ref .aviso{font-size:14px; margin:12px 0 0}
.artigo .partilha{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0 !important}
.partilha .btn{font-size:14px; padding:9px 16px}

/* chamada final e rodapé */
.cta{background:var(--verde-forte); color:#fff; padding:48px 0}
.cta .rotulo{color:#BCD3A4} .cta .intro{color:#CBD6C4}
.cta-cx{display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between}
.acoes{display:flex; flex-wrap:wrap; gap:12px}
footer{background:var(--verde-forte); color:#CBD6C4; padding:10px 0 38px; border-top:1px solid rgba(255,255,255,.12)}
footer img{height:30px; width:auto; margin:28px 0 18px}
footer a{color:#fff; text-decoration:none; font-family:Archivo; font-weight:500; font-size:15px}
footer a:hover{text-decoration:underline}
footer small{display:block; margin-top:22px; font-size:14px; color:#9FB097; max-width:72ch}

@media (max-width:720px){
  :root{--gut:16px}
  .menu-nav{display:none}
  .topo{height:62px}
  section{padding:44px 0}
  .abertura .env{padding-top:40px; padding-bottom:40px}
  .destaque{padding:22px 20px}
  .result li{grid-template-columns:1fr; gap:2px}
}
@media print{ header, .cta, footer, .partilha, .busca, .chips{display:none !important} body{background:#fff} }
@media (prefers-reduced-motion:reduce){*{transition:none !important}}