/* ============================================================
   BLOG · Dra. Carla Prado — Design System
   Fonte: Cormorant Garamond (display) + Hanken Grotesk (body)
   Paleta: dourado/bege (marca) + emerald (neuromodulação)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Dancing+Script:wght@600&display=swap');

:root{
  /* Paleta */
  --primary:     #a8853f;
  --primary-soft:#c2a25e;
  --accent:      #2aaf94;
  --accent-soft: #7fd9c4;
  --bg:          #f3f0ea;
  --bg-2:        #ece7dd;
  --card:        #fff;
  --ink:         #2c2723;
  --ink-soft:    #5d5346;
  --muted:       rgba(44,39,35,0.55);
  --line:        rgba(80,64,46,0.14);
  --dark:        #0a2e2a;
  --dark-2:      #061f1c;

  /* Sombras */
  --shadow-sm: 0 4px 12px -4px rgba(44,30,12,0.18);
  --shadow-md: 0 20px 44px -22px rgba(44,30,12,0.4);
  --shadow-lg: 0 36px 70px -36px rgba(44,30,12,0.5);

  /* Radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* Tipografia */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-script:  'Dancing Script', cursive;

  /* Easing */
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
::selection{ background:var(--primary); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ============================================================
   NAV FIXA
   ============================================================ */
.blog-nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; padding:0 clamp(20px,4vw,52px);
  background:rgba(243,240,234,0.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.blog-nav__brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.blog-nav__brand img{ height:44px; width:auto; }
.blog-nav__links{ display:flex; align-items:center; gap:clamp(16px,2vw,32px); }
.blog-nav__link{
  font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none;
  position:relative; padding:6px 2px; transition:color .35s;
}
.blog-nav__link:hover, .blog-nav__link.active{ color:var(--primary); }
.blog-nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--primary); transition:right .4s var(--ease); }
.blog-nav__link:hover::after, .blog-nav__link.active::after{ right:0; }
.blog-nav__wa{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:14px; font-weight:600; color:#fff; padding:10px 18px; border-radius:999px;
  background:linear-gradient(135deg,#2bb673,#1d9e63);
  box-shadow:0 8px 20px -8px rgba(29,158,99,0.7);
  transition:transform .35s var(--ease), filter .35s;
}
.blog-nav__wa:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.blog-nav__wa svg{ width:17px; height:17px; fill:currentColor; }
.blog-nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.blog-nav__burger span{ width:24px; height:2px; background:var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.blog-foot{
  border-top:1px solid var(--line); padding:clamp(36px,5vw,56px) clamp(20px,4vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.blog-foot__brand{ display:flex; align-items:center; gap:12px; }
.blog-foot__brand img{ height:38px; }
.blog-foot small{ font-size:13px; color:var(--muted); }
.blog-foot a{ color:var(--primary); text-decoration:none; font-weight:600; font-size:14px; }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:140;
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#2bb673,#1d9e63); text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(29,158,99,0.8);
  animation:waPulse 2.8s ease-in-out infinite;
  transition:transform .4s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:32px; height:32px; fill:#fff; }
@keyframes waPulse{
  0%,100%{ box-shadow:0 14px 34px -10px rgba(29,158,99,0.8), 0 0 0 0 rgba(43,182,115,0.5); }
  60%{ box-shadow:0 14px 34px -10px rgba(29,158,99,0.8), 0 0 0 16px rgba(43,182,115,0); }
}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   HERO (INDEX)
   ============================================================ */
.blog-hero{
  padding:clamp(130px,16vh,175px) clamp(20px,5vw,52px) clamp(36px,4vw,56px);
  text-align:center; max-width:920px; margin:0 auto;
}
.blog-hero__kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--primary);
  margin-bottom:22px;
}
.blog-hero__kicker::before{ content:""; width:30px; height:1px; background:currentColor; opacity:.6; }
.blog-hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(40px,5.6vw,78px);
  line-height:1.02; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance;
}
.blog-hero h1 em{ font-style:italic; color:var(--primary); }
.blog-hero p{
  font-size:clamp(17px,1.4vw,20px); font-weight:300; line-height:1.6;
  color:var(--ink-soft); max-width:56ch; margin:18px auto 0;
}

/* ============================================================
   POST CARD (shared between index + related)
   ============================================================ */
.post-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,32px);
  max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,52px);
}
.post-card{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.post-card__cover{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--dark);
}
.post-card__cover img{
  width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);
}
.post-card:hover .post-card__cover img{ transform:scale(1.05); }
.post-card__cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(44,30,12,0.35) 100%);
}
.post-card__cat{
  position:absolute; left:16px; top:16px; z-index:2;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; padding:7px 14px; border-radius:999px;
  background:rgba(168,133,63,0.92); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.4);
}
.post-card__body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.post-card__meta{
  font-size:12.5px; color:var(--muted); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.post-card__meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.post-card h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px,1.6vw,26px); line-height:1.12; color:var(--ink);
  margin:0 0 12px; letter-spacing:-0.005em;
}
.post-card p{
  font-size:15px; font-weight:300; line-height:1.6; color:var(--ink-soft); margin:0 0 20px;
}
.post-card__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--primary); transition:gap .3s;
}
.post-card:hover .post-card__more{ gap:13px; }

/* gradient covers for posts without photo */
.post-card__cover--g1{ background:radial-gradient(120% 120% at 30% 20%, #157a60, #0a2e2a 80%); display:grid; place-items:center; }
.post-card__cover--g2{ background:radial-gradient(120% 120% at 70% 25%, #2aaf94, #0d3a33 82%); display:grid; place-items:center; }
.post-card__cover--g3{ background:radial-gradient(120% 120% at 40% 80%, #1f6f8f, #0a2e2a 80%); display:grid; place-items:center; }
.post-card__cover--grad svg{
  width:62px; height:62px; stroke:rgba(255,255,255,0.92); fill:none; stroke-width:1.3;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.art-header{
  max-width:860px; margin:0 auto;
  padding:clamp(120px,14vh,160px) clamp(20px,5vw,52px) clamp(24px,3vw,36px);
}
.art-back{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--primary); text-decoration:none; margin-bottom:24px; transition:gap .3s;
}
.art-back:hover{ gap:13px; }
.art-header__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--muted); margin-bottom:18px;
}
.art-header__cat{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); background:rgba(168,133,63,0.12); padding:6px 14px; border-radius:999px;
}
.art-header h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(36px,5vw,64px); line-height:1.04; letter-spacing:-0.01em;
  color:var(--ink); text-wrap:balance; margin-bottom:18px;
}
.art-header .lede{
  font-size:clamp(18px,1.5vw,22px); font-weight:300; line-height:1.6;
  color:var(--ink-soft); max-width:62ch;
}

.art-cover{
  max-width:1100px; margin:0 auto; padding:0 clamp(20px,5vw,52px);
  border-radius:var(--r-xl); overflow:hidden; aspect-ratio:21/9;
}
.art-cover img{ width:100%; height:100%; object-fit:cover; }

.art-body{
  max-width:760px; margin:0 auto;
  padding:clamp(36px,4vw,56px) clamp(20px,5vw,52px) clamp(48px,6vw,80px);
}
.art-body h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3vw,38px);
  line-height:1.08; color:var(--ink); margin:clamp(36px,4vw,52px) 0 18px;
}
.art-body h3{
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.2vw,28px);
  color:var(--ink); margin:clamp(28px,3vw,40px) 0 14px;
}
.art-body p{
  font-size:17px; font-weight:300; line-height:1.85; color:rgba(44,39,35,0.84); margin-bottom:18px;
}
.art-body p strong{ font-weight:600; color:var(--primary); }
.art-body a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }

/* Lists */
.art-body ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px; }
.art-body ul li{
  display:flex; gap:14px; font-size:17px; font-weight:300; line-height:1.7; color:rgba(44,39,35,0.84);
}
.art-body ul li::before{
  content:""; flex:none; width:18px; height:2px; margin-top:14px;
  background:var(--primary); border-radius:1px;
}
.art-body ol{ margin:0 0 22px; padding-left:0; counter-reset:ol; list-style:none; display:flex; flex-direction:column; gap:12px; }
.art-body ol li{
  display:flex; gap:14px; font-size:17px; font-weight:300; line-height:1.7; color:rgba(44,39,35,0.84);
  counter-increment:ol;
}
.art-body ol li::before{
  content:counter(ol)"."; flex:none; font-family:var(--font-display); font-weight:700;
  font-size:20px; color:var(--primary); min-width:26px;
}

/* Blockquote */
.art-body blockquote{
  border-left:3px solid var(--primary); background:rgba(168,133,63,0.06);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:24px 28px; margin:28px 0;
  font-size:18px; font-weight:400; line-height:1.7; color:var(--ink-soft); font-style:italic;
}

/* Callout */
.callout{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 30px; margin:28px 0;
  background:var(--bg-2);
}
.callout__title{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--primary); margin-bottom:12px;
}
.callout p{ margin-bottom:0; }

/* CTA Banner */
.art-cta{
  max-width:860px; margin:0 auto clamp(48px,6vw,72px);
  padding:clamp(36px,4vw,52px) clamp(28px,4vw,48px);
  background:radial-gradient(120% 100% at 80% 0%, rgba(42,175,148,0.3), var(--dark) 60%);
  border-radius:var(--r-xl); text-align:center; color:#e9f3f0;
}
.art-cta h3{
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.2vw,42px);
  color:#fff; margin-bottom:14px; line-height:1.06;
}
.art-cta p{ font-size:17px; font-weight:300; line-height:1.6; color:rgba(233,243,240,0.82); margin-bottom:28px; }
.art-cta .btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--font-body); font-weight:600; font-size:16px; color:#fff;
  padding:16px 32px; border-radius:999px;
  background:linear-gradient(135deg,#2bb673,#1d9e63);
  box-shadow:0 14px 34px -12px rgba(29,158,99,0.7);
  transition:transform .35s var(--ease), filter .35s;
}
.art-cta .btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.art-cta .btn svg{ width:18px; height:18px; fill:currentColor; }

/* Related posts */
.related{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,52px) clamp(60px,7vw,90px); }
.related__head{
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,3.5vw,44px);
  font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--primary);
}
.related__head::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width:1000px){
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .post-grid{ grid-template-columns:1fr; }
  .blog-nav__links{ display:none; }
  .blog-nav__burger{ display:flex; }
  .art-cover{ aspect-ratio:16/10; }
}