/* ==========================================================================
   CuriosaMente — Design System
   Um arquivo de curiosidades: do céu-meia-noite do desconhecido
   à clareza de papel da descoberta.
   ========================================================================== */

/* ---- Fontes ---- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- Tokens ---- */
:root{
  /* Paleta principal */
  --midnight:      #0E1630;
  --midnight-2:     #1B2547;
  --midnight-3:     #2A3766;
  --paper:          #F6F7F4;
  --paper-alt:      #ECEEE8;
  --paper-line:     #DEDCD0;
  --ink:            #16213E;
  --ink-soft:       #4A5164;
  --ink-faint:      #848B9C;
  --white:          #FFFFFF;

  --teal:           #2BB6A3;
  --teal-dark:      #1E8F80;
  --teal-soft:      #D9F1EC;
  --gold:           #D4A93E;
  --gold-soft:      #F5E7C4;

  /* Categorias — variações da mesma família "escuro > brilho" */
  --cat-espaco-1:   #0E1630;
  --cat-espaco-2:   #4A3B7C;
  --cat-ciencia-1:  #0B3B3F;
  --cat-ciencia-2:  #2BB6A3;
  --cat-natureza-1: #163625;
  --cat-natureza-2: #5C9270;
  --cat-historia-1: #4A2E12;
  --cat-historia-2: #D4A93E;

  /* Tipografia */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Espaçamento */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  /* Forma */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* Sombra */
  --shadow-sm: 0 1px 3px rgba(14,22,48,.08);
  --shadow-md: 0 10px 30px rgba(14,22,48,.10);
  --shadow-lg: 0 24px 60px rgba(14,22,48,.16);

  --ease: cubic-bezier(.2,.7,.2,1);
  --container-w: 1200px;
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; }
h1,h2,h3,h4,p,figure{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color: inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; padding:0; }
input, textarea{ font: inherit; color: inherit; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--teal); color: var(--white); }

:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout ---- */
.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px){ .container{ padding: 0 2.5rem; } }

section{ position: relative; }

/* ---- Tipografia ---- */
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; }
h2{ font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3{ font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4{ font-size: 1.1rem; }
p{ color: var(--ink-soft); }
.lede{ font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before{
  content: '';
  width: 14px; height: 1px;
  background: var(--teal-dark);
  display: inline-block;
}
.eyebrow.on-dark{ color: var(--teal); }
.eyebrow.on-dark::before{ background: var(--teal); }

/* dot-rule: o motivo "constelação" usado como divisor */
.dot-rule{
  display:flex; align-items:center; gap:.4rem; margin: 1.1rem 0;
}
.dot-rule span{ width:4px; height:4px; border-radius:50%; background: var(--paper-line); }
.dot-rule span:nth-child(1){ background: var(--teal); width:6px; height:6px; }
.dot-rule::after{
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, var(--paper-line), transparent);
}

/* ---- Botões ---- */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family: var(--font-body); font-weight:600; font-size: .95rem;
  padding: .9rem 1.7rem; border-radius: var(--radius-full);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--teal); color: var(--midnight); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost{ border: 1px solid rgba(246,247,244,.35); color: var(--paper); }
.btn-ghost:hover{ border-color: var(--paper); background: rgba(246,247,244,.08); transform: translateY(-2px); }
.btn-outline{ border: 1px solid var(--paper-line); color: var(--ink); }
.btn-outline:hover{ border-color: var(--teal); color: var(--teal-dark); }
.btn-block{ width: 100%; }
.btn-sm{ padding: .6rem 1.2rem; font-size: .85rem; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background: var(--midnight);
  position: sticky; top:0; z-index: 100;
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,.25); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}
.logo{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.logo-mark{ width: 34px; height:34px; color: var(--teal); flex-shrink:0; }
.logo-mark svg{ width:100%; height:100%; }
.logo-text{ font-family: var(--font-display); font-size: 1.28rem; font-weight:600; color: var(--paper); letter-spacing: -0.01em; }
.logo-accent{ color: var(--teal); }

.main-nav ul{ display:flex; gap: 2.1rem; }
.main-nav a{
  font-size: .95rem; color: rgba(246,247,244,.78); font-weight:500;
  position:relative; padding: .4rem 0; transition: color .2s var(--ease);
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--teal); transition: width .25s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color: var(--paper); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap: .6rem; }
.icon-btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color: var(--paper); transition: background .2s var(--ease);
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background: rgba(246,247,244,.1); }

.menu-toggle{ display:none; width:40px; height:40px; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:50%; }
.menu-toggle span{ width:20px; height:1.5px; background: var(--paper); transition: all .25s var(--ease); }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.search-panel{
  max-height:0; overflow:hidden; background: var(--midnight-2);
  transition: max-height .3s var(--ease);
}
.search-panel.is-open{ max-height:90px; }
.search-panel-inner{ display:flex; align-items:center; gap:.8rem; padding: 1.1rem 1.5rem; }
.search-icon{ width:19px; height:19px; color: var(--teal); flex-shrink:0; }
.search-panel input{
  flex:1; background:transparent; border:none; color: var(--paper); font-size:1rem; outline:none;
}
.search-panel input::placeholder{ color: rgba(246,247,244,.4); }
#searchClose{ font-size:1.6rem; line-height:1; color: rgba(246,247,244,.5); padding:0 .3rem; }
#searchClose:hover{ color: var(--paper); }

/* Mobile nav drawer */
@media (max-width: 860px){
  .main-nav{
    position: fixed; inset: 78px 0 0 0; background: var(--midnight);
    transform: translateX(100%); transition: transform .3s var(--ease);
    overflow-y:auto; padding: 2rem 0;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap:0; padding: 0 1.5rem; }
  .main-nav a{ display:block; padding: 1.1rem 0; border-bottom: 1px solid rgba(246,247,244,.08); font-size: 1.1rem; }
  .menu-toggle{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: linear-gradient(165deg, var(--midnight) 0%, var(--midnight-2) 60%, var(--midnight-3) 100%);
  position: relative; overflow:hidden;
  padding: var(--sp-6) 0 var(--sp-7);
}
.constellation{ position:absolute; inset:0; pointer-events:none; opacity:.55; }
.constellation circle{ fill: var(--teal); }
.constellation line{ stroke: rgba(43,182,163,.25); stroke-width:1; }
.constellation .dim{ fill: rgba(246,247,244,.3); }

.hero-inner{ position:relative; max-width: 760px; }
.hero h1{ color: var(--paper); margin: 1.1rem 0 1.3rem; }
.hero h1 em{ font-style: italic; color: var(--teal); }
.hero .lede{ color: rgba(246,247,244,.72); max-width: 560px; margin-bottom: 2.2rem; }
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; margin-bottom: 3rem; }

.hero-stats{ display:flex; gap: var(--sp-5); flex-wrap:wrap; }
.hero-stat{ font-family: var(--font-mono); }
.hero-stat .num{ display:block; font-size:1.5rem; color: var(--gold); font-weight:600; }
.hero-stat .label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(246,247,244,.5); }

/* ==========================================================================
   ANÚNCIOS — espaços reservados para a rede de anúncios
   ========================================================================== */
.ad-slot-wrap{ padding: var(--sp-4) 0; }
.ad-container{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  background: var(--paper-alt);
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius-md);
  margin: 0 auto;
  color: var(--ink-faint);
  width: 100%;
}
.ad-label{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.ad-sub{ font-size:.68rem; color: var(--ink-faint); opacity:.8; }
.ad-leaderboard{ max-width:728px; min-height:90px; }
.ad-rectangle{ max-width:300px; min-height:250px; }
.ad-skyscraper{ max-width:300px; min-height:340px; }
.ad-infeed{ max-width: 100%; min-height:120px; grid-column: 1 / -1; }
@media (max-width:600px){
  .ad-leaderboard{ min-height:50px; max-width:320px; }
}

/* ==========================================================================
   SEÇÕES / DESTAQUE / GRID DE ARTIGOS
   ========================================================================== */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom: 2.2rem; flex-wrap:wrap; }
.section-head h2{ margin-top:.5rem; }

.featured-grid{
  display:grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem;
}
.card{
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display:flex; flex-direction:column;
  height: 100%;
}
.card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }

.card-cover{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.card-cover svg{ width: 30%; height:30%; color: rgba(246,247,244,.92); position:relative; z-index:2; }
.card-cover::before{ content:''; position:absolute; inset:0; opacity:.14;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.cover-espaco{ background: linear-gradient(135deg, var(--cat-espaco-1), var(--cat-espaco-2)); }
.cover-ciencia{ background: linear-gradient(135deg, var(--cat-ciencia-1), var(--cat-ciencia-2)); }
.cover-natureza{ background: linear-gradient(135deg, var(--cat-natureza-1), var(--cat-natureza-2)); }
.cover-historia{ background: linear-gradient(135deg, var(--cat-historia-1), var(--cat-historia-2)); }

.card-tag{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  background: rgba(14,22,48,.55); backdrop-filter: blur(4px);
  color: var(--paper); padding: .35rem .7rem; border-radius: var(--radius-full);
  border: 1px solid rgba(246,247,244,.25);
}

.card-body{ padding: 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card-body h3 a{ transition: color .2s; }
.card-body h3 a:hover{ color: var(--teal-dark); }
.card-excerpt{ font-size:.94rem; flex:1; }
.card-meta{ display:flex; align-items:center; gap: .9rem; font-family: var(--font-mono); font-size:.72rem; color: var(--ink-faint); }
.card-meta svg{ width:13px; height:13px; margin-right:.3rem; vertical-align:-2px; }

.featured-card .card-body{ padding: 2rem; }
.featured-card h3{ font-size: clamp(1.4rem,2.6vw,1.9rem); }
.featured-card .card-cover{ aspect-ratio: 16/9; }

.side-cards{ display:flex; flex-direction:column; gap:1.6rem; }
.side-cards .card{ flex-direction:row; }
.side-cards .card-cover{ width: 40%; aspect-ratio: unset; flex-shrink:0; }
.side-cards .card-body{ padding: 1.2rem; }
.side-cards .card-excerpt{ display:none; }

.articles-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}

/* filtro por categoria */
.filter-bar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom: 2.2rem; }
.pill{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.03em;
  padding: .55rem 1.1rem; border-radius: var(--radius-full);
  border: 1px solid var(--paper-line); color: var(--ink-soft);
  transition: all .2s var(--ease);
}
.pill:hover{ border-color: var(--teal); color: var(--teal-dark); }
.pill.is-active{ background: var(--midnight); border-color: var(--midnight); color: var(--paper); }
.no-results{ display:none; text-align:center; padding: var(--sp-5) 0; color: var(--ink-faint); font-family: var(--font-mono); font-size:.9rem; }
.no-results.show{ display:block; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{
  background: linear-gradient(120deg, var(--midnight), var(--midnight-3));
  border-radius: var(--radius-lg);
  padding: var(--sp-5); margin: var(--sp-2) 0;
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items:center;
  position:relative; overflow:hidden;
}
.newsletter h2{ color: var(--paper); }
.newsletter p{ color: rgba(246,247,244,.68); margin-top: .8rem; }
.newsletter-form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.newsletter-form input[type=email]{
  flex:1; min-width:200px; background: rgba(246,247,244,.08); border: 1px solid rgba(246,247,244,.22);
  border-radius: var(--radius-full); padding: .9rem 1.3rem; color: var(--paper); outline:none;
  transition: border-color .2s;
}
.newsletter-form input[type=email]::placeholder{ color: rgba(246,247,244,.45); }
.newsletter-form input[type=email]:focus{ border-color: var(--teal); }
.form-msg{ font-family: var(--font-mono); font-size:.82rem; margin-top:.8rem; color: var(--teal); display:none; }
.form-msg.show{ display:block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--midnight); color: rgba(246,247,244,.6); margin-top: var(--sp-6); }
.footer-ad-slot{ padding: var(--sp-4) 0 0; }
.footer-ad-slot .ad-container{ background: rgba(246,247,244,.04); border-color: rgba(246,247,244,.15); color: rgba(246,247,244,.35); }
.footer-grid{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem;
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: 1px solid rgba(246,247,244,.1);
  margin-top: var(--sp-4);
}
.footer-brand p{ color: rgba(246,247,244,.55); font-size:.92rem; margin: 1rem 0 1.3rem; max-width: 320px; }
.footer-brand .logo-text{ color: var(--paper); }
.social-links{ display:flex; gap:.6rem; flex-wrap:wrap; }
.social-pill{
  font-size:.78rem; padding: .45rem 1rem; border-radius: var(--radius-full);
  border: 1px solid rgba(246,247,244,.18); transition: all .2s;
}
.social-pill:hover{ border-color: var(--teal); color: var(--teal); }
.footer-col h4{ color: var(--paper); font-family: var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; margin-bottom: 1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.92rem; transition: color .2s; }
.footer-col a:hover{ color: var(--teal); }
.footer-bottom{ padding: 1.6rem 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; }

/* ==========================================================================
   PÁGINA DE ARTIGO
   ========================================================================== */
.breadcrumb{ padding: 1.3rem 0; font-family: var(--font-mono); font-size:.78rem; color: var(--ink-faint); }
.breadcrumb a:hover{ color: var(--teal-dark); }
.breadcrumb span{ margin: 0 .5rem; }

.article-header{ padding: var(--sp-2) 0 var(--sp-4); max-width: 800px; }
.article-header h1{ margin: 1rem 0 1.3rem; }
.article-meta{ display:flex; align-items:center; gap: 1.4rem; flex-wrap:wrap; font-family: var(--font-mono); font-size:.8rem; color: var(--ink-faint); }
.article-meta svg{ width:14px; height:14px; margin-right:.35rem; vertical-align:-3px; }

.article-cover{ border-radius: var(--radius-lg); overflow:hidden; margin-bottom: var(--sp-4); }
.article-cover .card-cover{ aspect-ratio: 21/9; }
.article-cover svg{ width:80px; height:80px; }

.article-layout{ display:grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items:start; }
.article-body{ max-width: 720px; }
.article-body h2{ margin-top: 2.6rem; margin-bottom: 1rem; }
.article-body h3{ margin-top: 2rem; margin-bottom: .8rem; }
.article-body p{ margin-bottom: 1.3rem; font-size: 1.05rem; }
.article-body ul, .article-body ol{ margin: 0 0 1.5rem; padding-left: 1.3rem; color: var(--ink-soft); }
.article-body li{ margin-bottom: .6rem; font-size: 1.05rem; }
.article-body li::marker{ color: var(--teal); }
.article-body strong{ color: var(--ink); }
.article-body blockquote{
  border-left: 3px solid var(--teal); margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink);
}
.fact-box{
  background: var(--paper-alt); border-radius: var(--radius-md); padding: 1.5rem 1.7rem; margin: 2rem 0;
  border-left: 3px solid var(--gold);
}
.fact-box .eyebrow{ margin-bottom:.6rem; }

.in-content-ad{ margin: 2.4rem 0; }

.share-row{ display:flex; align-items:center; gap:.8rem; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top:1px solid var(--paper-line); }
.share-row span{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-faint); }

/* sidebar */
.sidebar{ display:flex; flex-direction:column; gap: 1.8rem; position:sticky; top: 100px; }
.widget{ background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-md); padding: 1.5rem; }
.widget h4{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; font-weight:500; }
.widget-search{ display:flex; align-items:center; gap:.6rem; border:1px solid var(--paper-line); border-radius: var(--radius-full); padding: .6rem 1rem; }
.widget-search input{ border:none; outline:none; background:transparent; flex:1; font-size:.9rem; }
.widget-search svg{ width:16px; height:16px; color: var(--ink-faint); flex-shrink:0; }
.widget-list{ display:flex; flex-direction:column; gap: 1rem; }
.widget-list a{ display:flex; gap:.4rem; font-size:.92rem; align-items: baseline; }
.widget-list .n{ font-family: var(--font-mono); color: var(--teal); font-size:.78rem; flex-shrink:0; }
.widget-list a:hover{ color: var(--teal-dark); }
.widget-cats{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* related */
.related{ padding: var(--sp-6) 0; }
.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }

/* ==========================================================================
   PÁGINAS INTERNAS (Sobre, Contato, Legal, 404)
   ========================================================================== */
.page-hero{ background: var(--midnight); padding: var(--sp-6) 0 var(--sp-5); position:relative; overflow:hidden; }
.page-hero-inner{ position:relative; max-width: 700px; }
.page-hero h1{ color: var(--paper); margin-top: 1rem; }
.page-hero .lede{ color: rgba(246,247,244,.7); margin-top: 1rem; }

.prose{ max-width: 760px; padding: var(--sp-5) 0; }
.prose h2{ margin-top: 2.6rem; margin-bottom: 1rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom: 1.2rem; }
.prose ul{ padding-left: 1.3rem; margin-bottom: 1.2rem; color: var(--ink-soft); }
.prose li{ margin-bottom:.5rem; }
.prose li::marker{ color: var(--teal); }
.prose .updated{ font-family: var(--font-mono); font-size:.8rem; color: var(--ink-faint); margin-bottom: 2rem; display:block; }

.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin: var(--sp-4) 0; }
.value-card{ background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-md); padding: 1.6rem; }
.value-card .n{ font-family: var(--font-mono); color: var(--teal); font-size: .85rem; }
.value-card h3{ font-size: 1.15rem; margin: .6rem 0 .5rem; }
.value-card p{ font-size: .92rem; margin:0; }

/* Contato */
.contact-layout{ display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-5); padding: var(--sp-5) 0; align-items:start; }
.form-group{ margin-bottom: 1.3rem; }
.form-group label{ display:block; font-family: var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: .5rem; }
.form-group input, .form-group textarea{
  width:100%; border:1px solid var(--paper-line); border-radius: var(--radius-sm); padding: .85rem 1rem;
  font-size:.98rem; background: var(--white); transition: border-color .2s; outline:none; resize: vertical;
}
.form-group input:focus, .form-group textarea:focus{ border-color: var(--teal); }
.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.info-card{ background: var(--paper-alt); border-radius: var(--radius-md); padding: 1.5rem; }
.info-card h4{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.5rem; font-weight:500; }
.info-card p, .info-card a{ font-size:.98rem; }
.info-card a:hover{ color: var(--teal-dark); }
.alert{ padding: 1rem 1.3rem; border-radius: var(--radius-sm); font-size:.92rem; margin-bottom: 1.3rem; display:none; }
.alert.show{ display:block; }
.alert-success{ background: var(--teal-soft); color: #0F5C51; }
.alert-error{ background: #FBE5E1; color: #96311F; }

/* 404 */
.error-page{ text-align:center; padding: var(--sp-7) 0; max-width: 560px; margin:0 auto; }
.error-code{ font-family: var(--font-mono); font-size: 5rem; color: var(--teal-soft); -webkit-text-stroke: 1.5px var(--teal); color:transparent; line-height:1; }
.error-page h1{ margin: 1.5rem 0 1rem; }

/* scroll reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* back to top */
.back-to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; width:46px; height:46px; border-radius:50%;
  background: var(--midnight); color: var(--teal); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .25s var(--ease); z-index: 90;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top svg{ width:18px; height:18px; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 980px){
  .featured-grid{ grid-template-columns: 1fr; }
  .side-cards{ flex-direction: row; }
  .side-cards .card{ flex-direction:column; flex:1; }
  .side-cards .card-cover{ width:100%; aspect-ratio: 16/10; }
  .side-cards .card-excerpt{ display:block; }
  .articles-grid{ grid-template-columns: repeat(2,1fr); }
  .article-layout{ grid-template-columns: 1fr; }
  .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .sidebar .widget{ flex:1; min-width:260px; }
  .related-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .articles-grid{ grid-template-columns: 1fr; }
  .side-cards{ flex-direction:column; }
  .related-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .newsletter{ grid-template-columns: 1fr; padding: var(--sp-4); text-align:left; }
  .hero{ padding: var(--sp-5) 0 var(--sp-6); }
  .hero-stats{ gap: var(--sp-4); }
  .header-inner{ height:68px; }
}