/* ==========================================================================
   Link Ambiental Blog — design tokens
   Valores inferidos a partir do protótipo (Claude Design). Se você tiver os
   hex exatos usados lá, troque aqui — é o único lugar que precisa mudar.
   ========================================================================== */
:root{
	--color-ink: #0D2A2A;
	--color-ink-90: rgba(13,42,42,.9);
	--color-ink-66: rgba(13,42,42,.66);
	--color-ink-45: rgba(13,42,42,.45);
	--color-forest: #2F7A5C;
	--color-mint: #6FBE8B;
	--color-mint-pale: #B9E8C4;
	--color-sage: #7C9C8C;
	--color-bg: #F3F6F2;
	/* Tons extraídos direto do CSS do site institucional (blog.linkambiental.com),
	   usados só nas manchas da aurora — mais claros que --color-forest, então
	   o fundo não fica pesado. */
	--color-leaf-solid: #8FD089;
	--color-leaf-deep: #69C367;
	--color-leaf-pale: #DDF1DC;
	--color-white: #FFFFFF;
	--color-white-60: rgba(255,255,255,.6);
	--color-white-90: rgba(255,255,255,.9);

	--font-display: 'Neuton', Georgia, 'Iowan Old Style', serif;
	--font-body: 'Oxygen', 'Helvetica Neue', Arial, sans-serif;

	--radius-sm: 10px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-card: 0 24px 48px -28px rgba(13,42,42,.22);
	--shadow-btn-primary: 0 12px 28px -10px rgba(13,42,42,.4);
	--max-width: 1280px;
}

/* ==========================================================================
   Reset básico
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
	margin:0;
	overflow-x: hidden;
	min-height:100vh;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size:16px;
	line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color: var(--color-forest); text-decoration:none; }
a:hover{ color: var(--color-ink); }
ul{ margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); margin:0; }
.container{ max-width: var(--max-width); margin:0 auto; padding:0 48px; }
@media (max-width:780px){ .container{ padding:0 20px; } }

em{ font-style:italic; font-weight:400; color: var(--color-mint); }

/* ==========================================================================
   Aurora — fundo animado, fixo, atrás de todo o conteúdo (mesmo efeito do
   site institucional). São só 3 manchas de cor desfocadas que flutuam
   devagar; não é um gif/vídeo, então não pesa no carregamento da página.
   ========================================================================== */
.aurora{
	position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.aurora span{
	position:absolute; width:52vmax; height:52vmax; border-radius:50%;
	filter: blur(140px); opacity:.12; will-change:transform;
}
.aurora span:nth-child(1){
	background: var(--color-leaf-solid); top:-22%; left:-12%;
	animation: aurora-float-1 26s ease-in-out infinite;
}
.aurora span:nth-child(2){
	background: var(--color-leaf-deep); top:6%; right:-18%;
	animation: aurora-float-2 32s ease-in-out infinite;
}
.aurora span:nth-child(3){
	background: var(--color-leaf-pale); bottom:-28%; left:22%;
	animation: aurora-float-3 38s ease-in-out infinite;
}
@keyframes aurora-float-1{
	0%,100%{ transform: translate(0,0) scale(1); }
	50%{ transform: translate(8%,10%) scale(1.15); }
}
@keyframes aurora-float-2{
	0%,100%{ transform: translate(0,0) scale(1); }
	50%{ transform: translate(-10%,8%) scale(1.1); }
}
@keyframes aurora-float-3{
	0%,100%{ transform: translate(0,0) scale(1); }
	50%{ transform: translate(6%,-9%) scale(1.2); }
}
@media (prefers-reduced-motion: reduce){
	.aurora span{ animation:none; }
}

/* ==========================================================================
   Header flutuante (sticky, translúcido, ganha fundo mais sólido no scroll)
   ========================================================================== */
.site-header{
	position:fixed; top:18px; left:20px; right:20px; max-width: 1180px;
	margin:0 auto; z-index:60; border-radius: var(--radius-pill);
	border:1px solid rgba(255,255,255,.55);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(172,217,177,.32) 100%);
	box-shadow: 0 10px 26px -16px rgba(13,42,42,.16);
	transition: background .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled{
	background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(172,217,177,.6) 100%);
	box-shadow: 0 22px 46px -20px rgba(13,42,42,.34);
}
.site-header .header-inner{
	display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
	gap:20px; padding:8px 10px 8px 26px; position:relative;
}
.site-logo{ display:flex; align-items:center; gap:10px; color:var(--color-ink); justify-self:start; }
.site-logo img, .site-logo svg{ display:block; height:auto; width:auto; max-height:30px; max-width:180px; object-fit:contain; }
.site-logo span{ font-family:var(--font-body); font-weight:700; font-size:16px; letter-spacing:-.2px; white-space:nowrap; }

.site-nav{ display:flex; align-items:center; gap:2px; justify-self:center; flex-wrap:wrap; }
.btn-nav{
	font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--color-ink);
	opacity:.75; padding:10px 18px; border-radius:var(--radius-pill); transition:opacity .2s, background .2s, color .2s;
}
.btn-nav:hover{ opacity:1; color:var(--color-ink); }
.btn-nav.is-active{ background:var(--color-ink); color:#fff; opacity:1; }

.header-cta{ justify-self:end; }

/* Botão hambúrguer (só aparece em telas estreitas, ver breakpoint abaixo) */
.nav-toggle{
	display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
	width:44px; height:44px; border:0; border-radius:999px; background:transparent;
	cursor:pointer; justify-self:end; padding:0; flex-shrink:0; transition:background .2s ease;
}
.nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--color-ink); }
.site-header.is-nav-open .nav-toggle{ background:var(--color-mint); }
.nav-mobile-cta{ display:none; }

/* Botões */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-family:var(--font-body); font-weight:700; font-size:15px;
	padding:14px 26px; border-radius:var(--radius-pill); text-decoration:none; border:0; cursor:pointer;
}
.btn-primary{ background:var(--color-ink); color:#fff; box-shadow:var(--shadow-btn-primary); }
.btn-primary:hover{ color:#fff; opacity:.92; }
.btn-accent{ background:var(--color-mint-pale); color:var(--color-ink); }
.btn-accent:hover{ color:var(--color-ink); opacity:.92; }
.btn-block{ width:100%; }

/* ==========================================================================
   Eyebrow / Badge / Tag
   ========================================================================== */
.eyebrow{
	font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--color-sage); display:inline-flex; align-items:center;
}
.eyebrow-dark{ color:var(--color-mint-pale); font-size:11px; letter-spacing:.16em; }

.badge{
	display:inline-flex; align-items:center; font-family:var(--font-body); font-weight:700; font-size:12.5px;
	color:var(--color-forest); background: rgba(111,190,139,.14); padding:7px 14px; border-radius:var(--radius-pill);
}
.tag{
	display:inline-flex; align-items:center; font-family:var(--font-body); font-weight:600; font-size:13.5px;
	color:var(--color-ink); background: var(--color-white-60); border:1px solid rgba(13,42,42,.12);
	padding:8px 16px; border-radius:var(--radius-pill);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
	background:var(--color-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
	padding:28px; transition:transform .2s ease;
}
.card:hover{ transform: translateY(-4px); }
.card .icon-box{
	width:44px; height:44px; border-radius:12px; background: rgba(111,190,139,.18);
	display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--color-forest);
}
.card .icon-box svg{ width:22px; height:22px; }
.card h3{ font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--color-ink); margin:14px 0 8px; }
.card p{ font-family:var(--font-body); font-size:14.5px; line-height:1.6; color:var(--color-ink-66); margin:0; }

.dark-card{
	border-radius:var(--radius-lg);
	background: linear-gradient(160deg, var(--color-ink) 0%, #123a33 100%);
	display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px;
	padding:72px 48px;
}
.dark-card h2{ font-weight:700; font-size:42px; line-height:1.25; color:#fff; margin:0; max-width:620px; }
.dark-card h2 em{ color:var(--color-mint-pale); }
.dark-card p{ font-family:var(--font-body); font-size:16px; line-height:1.6; color:rgba(255,255,255,.72); max-width:560px; margin:0; }
.dark-card .quote{ font-family:var(--font-display); font-style:italic; font-size:28px; line-height:1.55; color:#fff; margin:0; max-width:700px; }
.cta-final{ padding:0 48px 96px; }
.cta-final.cta-final--extra-top{ padding-top:100px; }

/* Artigo/categoria card (usado em grids) */
.post-card{
	background:var(--color-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
	overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease;
}
.post-card:hover{ transform: translateY(-4px); }
.post-card .thumb{ width:100%; height:190px; object-fit:cover; background: var(--color-bg); }
.post-card .body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post-card h3{ font-size:19px; line-height:1.3; color:var(--color-ink); }
.post-card p{ font-family:var(--font-body); font-size:14.5px; line-height:1.55; color:var(--color-ink-66); margin:0; }
.post-card .meta-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; gap:10px; }
.post-card .meta-row span{ font-family:var(--font-body); font-size:12.5px; color:var(--color-ink-45); }
.post-card .meta-row a{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--color-forest); flex-shrink:0; }

.home-articles{ padding-bottom:80px; }
.contact-page-end{ padding-bottom:96px; }

/* Efeito de "aparecimento" ao rolar a página — igual ao do site institucional
   (fade + leve deslocamento para cima). Aplique a classe .reveal a qualquer
   elemento; o JS (main.js) adiciona .in-view quando ele entra na tela.
   data-delay="1..4" escalona o efeito em grades de cards. */
.reveal{
	opacity:0;
	transform:translateY(18px);
	transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal[data-delay="1"]{ transition-delay:80ms; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
	.reveal{ opacity:1; transform:none; transition:none; }
}

/* Paginação (1 · 2 · 3 ...) — usada na home e nas páginas de categoria,
   markup padrão do WordPress (the_posts_pagination). */
.pagination, .navigation.pagination{
	display:flex; justify-content:center; margin-top:40px;
}
.pagination .nav-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.pagination .page-numbers{
	font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--color-ink);
	min-width:40px; height:40px; padding:0 12px; border-radius:var(--radius-pill);
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--color-white); box-shadow:var(--shadow-card); transition:background .2s ease, color .2s ease;
}
.pagination .page-numbers:hover{ background:var(--color-mint-pale); }
.pagination .page-numbers.current{ background:var(--color-ink); color:#fff; }
.pagination .page-numbers.dots{ box-shadow:none; background:transparent; }
.pagination .page-numbers.next, .pagination .page-numbers.prev{ padding:0 18px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.grid-cat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:72px 28px; }
.grid-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:780px){ .grid-3{ grid-template-columns:1fr; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; overflow:hidden; padding:160px 48px 64px; text-align:center; }
.hero-inner{ position:relative; max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; }
.hero h1{ font-weight:700; font-size:44px; line-height:1.2; color:var(--color-ink); }
.hero p.lead{ font-family:var(--font-body); font-size:17px; line-height:1.6; color:var(--color-ink-66); margin:0; max-width:560px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; }

/* ==========================================================================
   Featured post (home)
   ========================================================================== */
.featured-post{
	display:flex; flex-wrap:wrap; background:var(--color-white); border-radius:var(--radius-lg);
	box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:56px; transition:transform .2s ease;
}
.featured-post:hover{ transform: translateY(-4px); }
.featured-post .thumb{ flex:1 1 480px; min-width:0; min-height:340px; object-fit:cover; background:var(--color-bg); }
.featured-post .body{ flex:1 1 380px; min-width:0; padding:44px; display:flex; flex-direction:column; gap:16px; justify-content:center; }
.featured-post .body .meta-row{ flex-wrap:wrap; }
.featured-post h2{ font-weight:700; font-size:30px; line-height:1.25; color:var(--color-ink); }
.featured-post p{ font-family:var(--font-body); font-size:15.5px; line-height:1.6; color:var(--color-ink-66); margin:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer-wrap{ padding:0 48px 48px; }
.site-footer{
	max-width: var(--max-width); margin:0 auto; border-radius:var(--radius-lg);
	background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(172,217,177,.42) 100%);
	backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
	border:1px solid rgba(255,255,255,.55); box-shadow: var(--shadow-card); padding:64px 48px 0;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid > :first-child{ grid-column:1/-1; } }
@media (max-width:540px){ .footer-grid{ grid-template-columns:1fr; } .site-footer{ padding:40px 24px 0; border-radius:var(--radius-lg); } }

.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col .footer-title{ font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-ink-45); }
.footer-col a{ font-family:var(--font-body); font-size:14px; color:var(--color-ink-66); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ display:block; height:auto; width:auto; max-height:48px; max-width:220px; object-fit:contain; }
.footer-brand span{ font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--color-ink); }
.footer-desc{ font-family:var(--font-body); font-size:14px; color:var(--color-ink-66); line-height:1.6; margin:0; max-width:260px; }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{
	width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:rgba(13,42,42,.06); color:var(--color-forest); transition:background .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover{ background:var(--color-mint); color:var(--color-ink); transform:translateY(-2px); }
.footer-social svg{ width:17px; height:17px; }
.footer-addr-title{ font-family:var(--font-body); font-size:12px; font-weight:700; color:var(--color-ink); margin-top:6px; }
.footer-addr{ font-family:var(--font-body); font-size:13.5px; color:var(--color-ink-66); line-height:1.5; }

.footer-bottom{
	border-top:1px solid rgba(13,42,42,.1); padding:24px 0 32px; display:flex; flex-wrap:wrap;
	justify-content:space-between; align-items:center; gap:16px;
}
.footer-bottom .copy{ font-family:var(--font-body); font-size:12.5px; color:var(--color-ink-45); }
.footer-legal{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-legal a{ font-family:var(--font-body); font-size:12.5px; color:var(--color-ink-45); }

/* Botão flutuante do WhatsApp */
.whatsapp-float{
	position:fixed; bottom:24px; right:24px; z-index:60; display:inline-flex; align-items:center; gap:10px;
	padding:14px 22px 14px 16px; background:var(--color-ink); color:#fff; border-radius:var(--radius-pill);
	box-shadow:var(--shadow-btn-primary); font-family:var(--font-body); font-weight:700; font-size:14px;
	transition: opacity .25s ease, transform .25s ease;
}
.whatsapp-float:hover{ color:#fff; opacity:.92; }
/* Some suavemente por cima de cards escuros (Próximo passo) — eles já têm
   o próprio botão de contato, então o flutuante ali só atrapalharia. */
.whatsapp-float.is-hidden{ opacity:0; transform:scale(.85); pointer-events:none; }

/* ==========================================================================
   Artigo individual
   ========================================================================== */
.article-head{ max-width:860px; margin:0 auto; padding:152px 48px 0; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--color-ink-45); margin-bottom:36px; }
.article-meta{ display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.article-meta h1{ font-weight:700; font-size:48px; line-height:1.15; color:var(--color-ink); }
.article-meta .deck{ font-family:var(--font-body); font-size:18px; line-height:1.6; color:var(--color-ink-66); margin:0; max-width:640px; }
.article-byline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.article-byline img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.author-avatar-fallback{
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--color-forest); color:#fff;
	font-family:var(--font-body); font-weight:700; letter-spacing:.02em;
	flex-shrink:0;
}
.article-byline span{ font-family:var(--font-body); font-size:14px; color:var(--color-ink-45); }
.article-byline .name{ font-weight:700; color:var(--color-ink); }
.article-cover{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.article-cover img{ width:100%; height:420px; object-fit:cover; }
.article-caption{ font-family:var(--font-body); font-style:italic; font-size:13.5px; color:var(--color-ink-45); margin:12px 0 64px; text-align:center; }

.article-body{ max-width:700px; margin:0 auto; padding:0 48px 32px; }
.article-body p{ font-family:var(--font-body); font-size:17px; line-height:1.85; color:var(--color-ink-66); margin:0 0 24px; }
.article-body h2{ font-weight:700; font-size:28px; line-height:1.3; color:var(--color-ink); margin:40px 0 16px; }
.article-body h3{ font-weight:700; font-size:21px; line-height:1.35; color:var(--color-ink); margin:32px 0 12px; }
.article-body strong{ color:var(--color-ink); font-weight:700; }
.article-body figure.wp-block-table{ overflow-x:auto; margin:8px 0 32px; }
.article-body table{ width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:15px; }
.article-body th, .article-body td{ text-align:left; padding:12px 16px; border-bottom:1px solid rgba(13,42,42,.1); }
.article-body th{ font-weight:700; color:var(--color-ink); background:rgba(111,190,139,.14); white-space:nowrap; }
.article-body td{ color:var(--color-ink-66); }
.article-body ul{ list-style:none; margin:0 0 24px; display:flex; flex-direction:column; gap:12px; }
.article-body ul li{ display:flex; gap:12px; align-items:flex-start; font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--color-ink-66); }
.article-body ul li::before{ content:'–'; color:var(--color-mint); font-weight:700; flex-shrink:0; }
.article-body blockquote{ border-left:3px solid var(--color-mint); padding:4px 0 4px 24px; margin:24px 0; font-family:var(--font-display); font-style:italic; font-size:22px; line-height:1.5; color:var(--color-ink); }
.article-body a{ color:var(--color-mint); text-decoration:underline; }
.article-body img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-card); margin:8px 0; }
.article-body figcaption{ font-family:var(--font-body); font-style:italic; font-size:13px; color:var(--color-ink-45); text-align:center; margin-top:8px; }

.lab-mid-cta{
	border-radius:var(--radius-lg); background: linear-gradient(160deg, var(--color-ink) 0%, #123a33 100%);
	padding:36px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin:32px 0;
}
.lab-mid-cta h3{ font-weight:700; font-size:22px; line-height:1.3; color:#fff; margin:0; max-width:380px; }

.author-bio{ max-width:700px; margin:0 auto; padding:0 48px 80px; }
.author-bio .card{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.author-bio img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-bio .name{ font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--color-ink); }
.author-bio .role{ font-family:var(--font-body); font-size:13.5px; color:var(--color-ink-45); }
.author-bio .social{ display:flex; gap:10px; margin-left:auto; }
.author-bio .social a{ width:36px; height:36px; border-radius:50%; background:var(--color-bg); display:flex; align-items:center; justify-content:center; color:var(--color-ink); }

.related-posts{ max-width:var(--max-width); margin:0 auto; padding:0 48px 80px; }
.related-posts .eyebrow{ margin-bottom:24px; }

/* ==========================================================================
   Página de categoria / hub
   ========================================================================== */
.breadcrumb{ font-family:var(--font-body); font-size:13px; color:var(--color-ink-45); margin-bottom:20px; }
.breadcrumb a{ color:var(--color-ink-45); }
.category-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:56px; max-width:720px; }
.category-head h1{ font-weight:700; font-size:40px; line-height:1.2; color:var(--color-ink); }
.category-head p{ font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--color-ink-66); margin:0; }

/* ==========================================================================
   Sobre
   ========================================================================== */
.section-center{ max-width:680px; margin:0 auto; padding:56px 48px; text-align:center; }
.section-center .eyebrow, .section-center h2, .section-center p{ margin-left:auto; margin-right:auto; }
.section-center h2{ font-weight:700; font-size:32px; line-height:1.3; color:var(--color-ink); margin:14px 0; max-width:560px; margin-left:auto; margin-right:auto; }
.section-center > p{ font-family:var(--font-body); font-size:15px; color:var(--color-ink-45); max-width:480px; }

.mission-card{
	max-width:900px; margin:0 auto; border-radius:var(--radius-lg);
	background: linear-gradient(135deg, rgba(172,217,177,.32) 0%, rgba(255,255,255,.65) 100%);
	padding:64px 56px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px;
}
.mission-card p{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:26px; line-height:1.55; color:var(--color-ink); margin:0; max-width:620px; }

/* ==========================================================================
   Contato
   ========================================================================== */
.contact-hero{ max-width:780px; margin:0 auto; padding:152px 48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.contact-hero h1{ font-weight:700; font-size:44px; line-height:1.2; color:var(--color-ink); }
.contact-layout{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; margin-top:48px; }
.contact-form-card{
	flex:1.6 1 420px; box-sizing:border-box; border-radius:var(--radius-lg);
	background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(172,217,177,.24) 100%);
	box-shadow:var(--shadow-card); padding:44px;
}
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 24px; margin-bottom:24px; }
@media (max-width:640px){ .field-grid{ grid-template-columns:1fr; } }
.field label{ display:block; font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink-45); margin-bottom:8px; }
.field input, .field select, .field textarea{
	width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:14.5px; color:var(--color-ink);
	background:var(--color-white); border:1px solid rgba(13,42,42,.16); border-radius:var(--radius-sm); padding:14px 16px;
}
.field select{ appearance:none; background-color:var(--color-white); }
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--color-mint); }
.contact-sidebar{ flex:1 1 320px; display:flex; flex-direction:column; gap:24px; }
.contact-sidebar .card h3{ margin:0 0 18px; }
.contact-direct a{ display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:14.5px; color:var(--color-forest); margin-bottom:14px; }
.contact-expect ul{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.contact-expect li{ display:flex; gap:10px; align-items:flex-start; font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--color-ink-66); }
.contact-expect li::before{ content:'✓'; color:var(--color-mint); font-weight:700; flex-shrink:0; }
.contact-expect .response-time{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--color-ink-45); margin:0; padding-top:14px; border-top:1px solid rgba(13,42,42,.08); }

/* ==========================================================================
   Responsivo — menu do header vira hambúrguer antes da pílula ficar apertada
   ========================================================================== */
@media (max-width:900px){
	.site-header .header-inner{ grid-template-columns:1fr auto; }
	.site-logo{ grid-column:1; }
	.nav-toggle{ display:flex; grid-column:2; }
	.header-cta{ display:none; }

	/* Acima de 900px o .site-nav é a fileira de links dentro da pílula (regra
	   base, no topo do arquivo). Abaixo disso ele vira o painel flutuante que
	   abre abaixo da pílula — sem fazer a pílula em si crescer. */
	.site-nav{
		display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
		width:auto; margin:0; justify-self:stretch;
		flex-direction:column; align-items:stretch; gap:4px; padding:12px; border-radius:24px;
		border:1px solid rgba(255,255,255,.7);
		background: linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(219,235,222,.99) 100%);
		backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
		box-shadow: 0 24px 48px -20px rgba(13,42,42,.38);
	}
	.site-header.is-nav-open .site-nav{ display:flex; }
	.btn-nav{
		width:100%; min-height:48px; display:flex; align-items:center; justify-content:center;
		text-align:center; border-radius:14px; font-size:16px;
	}
	.btn-nav.is-active{ background:transparent; color:var(--color-forest); opacity:1; }
	.nav-mobile-cta{ display:flex; padding-top:10px; margin-top:6px; }
	.nav-mobile-cta .btn{ width:100%; min-height:50px; }
}

/* ==========================================================================
   Responsivo — telas de até 480px (baseado nas versões mobile do protótipo)
   ========================================================================== */
@media (max-width:480px){
	.site-header{ left:12px; right:12px; top:12px; }
	.site-header .header-inner{ padding:8px 8px 8px 16px; }
	.site-logo img, .site-logo svg{ max-height:26px; max-width:140px; }
	.site-logo span{ font-size:15px; }

	/* Hero (home, categorias, sobre) */
	.hero{ padding:120px 20px 40px; }
	.hero h1{ font-size:32px; line-height:1.18; }
	.hero p.lead{ font-size:15px; line-height:1.65; }

	/* Cards e grades — 1 coluna forçada (em vez do minmax(300px,1fr), que
	   estoura a largura em telas bem estreitas, tipo iPhone SE de 320px). */
	.home-articles{ padding-bottom:48px; }
	.contact-page-end{ padding-bottom:48px; }
	.grid{ grid-template-columns:1fr; gap:24px; }
	.grid-cat{ grid-template-columns:1fr; gap:24px; }
	.grid-4{ grid-template-columns:1fr; gap:20px; }
	.grid-3{ grid-template-columns:1fr; gap:20px; }

	/* Artigo em destaque (home) */
	.featured-post .thumb{ min-height:200px; }
	.featured-post .body{ padding:24px; }
	.featured-post h2{ font-size:24px; line-height:1.25; }
	.featured-post p{ font-size:14.5px; line-height:1.65; }

	/* Card final "Próximo passo" */
	.cta-final{ padding:0 16px 48px; }
	.cta-final.cta-final--extra-top{ padding-top:40px; }
	.dark-card{ padding:48px 24px; gap:16px; }
	.dark-card h2{ font-size:29px; line-height:1.25; }
	.dark-card p{ font-size:15px; line-height:1.6; }
	.dark-card .quote{ font-size:22px; line-height:1.55; }

	/* Artigo individual */
	.article-head{ padding:106px 20px 0; }
	.back-link{ font-size:13.5px; margin-bottom:24px; }
	.article-meta h1{ font-size:31px; line-height:1.18; }
	.article-meta .deck{ font-size:16px; }
	.article-cover img{ height:220px; }
	.article-body{ padding:0 20px 28px; }
	.article-body p{ font-size:16px; }
	.article-body h2{ font-size:24px; margin:32px 0 12px; }
	.author-bio{ padding:0 20px 48px; }
	.author-bio .card{ flex-direction:column; text-align:center; gap:12px; padding:24px; }
	.author-bio .social{ margin-left:0; }
	.related-posts{ padding:0 16px 48px; }
	.lab-mid-cta{ flex-direction:column; align-items:stretch; text-align:center; padding:28px 24px; gap:16px; }
	.lab-mid-cta h3{ max-width:none; }

	/* Categorias */
	.category-head h1{ font-size:32px; line-height:1.18; }

	/* Sobre */
	.section-center{ padding:8px 16px 40px; }
	.section-center h2{ font-size:26px; line-height:1.28; }
	.section-center > p{ font-size:14.5px; }
	.mission-card{ padding:40px 24px; gap:20px; }
	.mission-card p{ font-size:21px; line-height:1.55; }

	/* Contato */
	.contact-hero{ padding:122px 20px 28px; }
	.contact-hero h1{ font-size:33px; line-height:1.18; }
	.contact-layout{ margin-top:12px; gap:24px; }
	.contact-form-card{ padding:28px 22px; }

	/* Rodapé */
	.site-footer-wrap{ padding:0 16px 20px; }
	.footer-grid{ gap:34px; padding-bottom:32px; }
	.footer-bottom{ flex-direction:column; align-items:flex-start; padding:20px 0 28px; gap:14px; }
	.footer-legal{ gap:20px; }

	/* Botão do WhatsApp — só o ícone no mobile, pra ocupar menos espaço e
	   cobrir menos conteúdo da página enquanto rola. */
	.whatsapp-float{
		bottom:16px; right:16px; z-index:55; width:52px; height:52px;
		padding:0; justify-content:center; gap:0;
	}
	.whatsapp-float-label{
		position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
	}
}