/* ==========================================================================
   GUIA DO BEBÊ v2 — design system premium
   Editorial de revista: Fraunces (display serif) + Figtree (texto).
   Paleta: navy profundo + creme papel + azul-poeira + rosa-antigo + dourado.
   Mobile-first · zero estilos inline.
   Fontes hospedadas localmente em assets/fonts/ (sem depender do Google
   Fonts) — corta o round-trip a um domínio de terceiro por completo.
   Arquivos variáveis: cobrem toda a faixa de peso usada em cada estilo.
   ========================================================================== */

@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:400 700;
  font-display:optional;
  src:url("../fonts/figtree-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 600;
  font-display:optional;
  src:url("../fonts/fraunces-normal-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400;
  font-display:optional;
  src:url("../fonts/fraunces-italic-variable.woff2") format("woff2");
}

:root{
  /* cores */
  --ink:#1c2534;           /* navy quase-preto */
  --ink-2:#41506a;         /* navy médio para texto corrido */
  --muted:#6b7480;         /* contraste 4.5:1+ sobre branco (WCAG AA) */
  --paper:#faf7f2;         /* creme papel */
  --card:#ffffff;
  --line:#e9e2d8;          /* linha quente */
  --line-2:#f0ebe3;

  --blue:#6f93c4;          /* azul-poeira */
  --blue-d:#3d5f92;
  --blue-ink:#2b4368;
  --blue-soft:#eef3fa;

  --rose:#d89aae;          /* rosa-antigo */
  --rose-d:#b76d88;
  --rose-soft:#faf0f3;

  --gold:#8a6329;          /* dourado editorial — escurecido p/ contraste AA (3,1:1→5,4:1 sobre --paper) */
  --gold-soft:#f7efe2;

  --green:#3e7359;         /* escurecido p/ 4,5:1+ sobre fundo .pros (era 3,8:1) */
  --red:#a84360;           /* escurecido p/ 4,5:1+ sobre fundo .cons (era 3,8:1) */

  /* forma */
  --r-lg:24px; --r-md:16px; --r-sm:10px;
  --shadow-sm:0 1px 2px rgba(28,37,52,.05), 0 6px 20px rgba(28,37,52,.05);
  --shadow-md:0 2px 4px rgba(28,37,52,.06), 0 18px 44px rgba(28,37,52,.09);
  --wrap:1140px;

  /* tipografia */
  --serif:"Fraunces", Georgia, serif;
  --sans:"Figtree", -apple-system, Segoe UI, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* A navbar é sticky (81px no desktop, 71px no mobile): sem esta folga o alvo
   de qualquer âncora para embaixo dela. */
:root{--nav-h:81px;}
[id]{scroll-margin-top:calc(var(--nav-h) + 18px);}
@media(max-width:680px){ :root{--nav-h:71px;} }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); line-height:1.18; margin:0 0 .45em; font-weight:600; letter-spacing:-.01em;}
h1{font-size:clamp(2.1rem, 4.5vw, 3.1rem);}
h2{font-size:clamp(1.5rem, 3vw, 2rem);}
h3{font-size:1.28rem;}
p{margin:0 0 1.15em;}
a{color:var(--blue-d); text-decoration:none;}
a:hover{color:var(--blue-ink);}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.muted{color:var(--muted);}

/* micro-label editorial */
.eyelabel{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);}
.eyelabel::before{content:""; width:26px; height:1px; background:var(--gold);}

/* ---------- NAVBAR ---------- */
.page-nav{position:sticky; top:0; z-index:60; background:rgba(250,247,242,.88);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--wrap); margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:22px;}
.logo-link{display:flex; align-items:center; gap:12px; text-decoration:none;}
/* Logo da marca. Na navbar entra a versão sem tagline (ilegível em 46px);
   no rodapé, a completa em versão clara, porque o fundo é navy. */
.logo-img{display:block; height:46px; width:auto; max-width:100%;}
.logo-img--ftr{height:62px;}
@media(max-width:680px){
  .logo-img{height:38px;}
  .logo-img--ftr{height:62px;}
}
.nav-links{display:flex; gap:4px; margin-left:auto; align-items:center;}
.nav-links > a{color:var(--ink-2); font-weight:600; font-size:.94rem; padding:10px 14px; border-radius:12px; transition:.16s;}
.nav-links > a:hover{background:#fff; color:var(--blue-ink); box-shadow:var(--shadow-sm);}
.nav-links > a.is-cta{background:var(--ink); color:var(--paper); padding:11px 20px;}
.nav-links > a.is-cta:hover{background:var(--blue-ink); color:#fff; box-shadow:var(--shadow-md);}
.nav-burger{display:none; margin-left:auto; background:none; border:0; font-size:26px; color:var(--ink); cursor:pointer; line-height:1;}

/* ---------- BUSCA ---------- */
.search-wrap{position:relative;}
.search-trigger{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; font-size:.86rem; color:var(--ink-2); width:170px; cursor:text;
  transition:width .25s ease, border-color .2s ease;}
.search-trigger:focus-within{border-color:var(--gold); width:230px;}
.search-trigger svg{flex-shrink:0; color:var(--muted);}
.search-input{flex:1; background:transparent; border:0; outline:0; color:var(--ink); font-size:.86rem;
  font-family:var(--sans); min-width:0;}
.search-input::placeholder{color:var(--muted);}
.search-dropdown{display:none; position:absolute; top:calc(100% + 10px); left:0; width:340px;
  max-width:min(340px, calc(100vw - 32px)); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-md); overflow:hidden; z-index:120;}
.search-dropdown.is-open{display:block;}
.search-results{max-height:360px; overflow-y:auto;}
.search-item{display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none;
  color:var(--ink-2); border-bottom:1px solid var(--line); transition:background .12s;}
.search-item:hover, .search-item:focus{background:var(--blue-soft); color:var(--blue-ink); outline:none;}
.search-item:last-child{border-bottom:0;}
.search-item-tag{font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-soft); padding:3px 7px; border-radius:6px; white-space:nowrap; flex-shrink:0;}
.search-item-title{font-size:.86rem; font-weight:600; line-height:1.3; color:var(--ink);}
.search-empty{padding:26px 14px; text-align:center; font-size:.82rem; color:var(--muted);}
.search-group-label{padding:8px 14px 4px; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
.search-hl{background:var(--gold-soft); color:var(--gold); border-radius:2px;}

/* dropdown */
.nav-dd{position:relative;}
.nav-dd__btn{background:none; border:0; font-family:var(--sans); font-weight:600; font-size:.94rem;
  color:var(--ink-2); padding:10px 14px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.16s;}
.nav-dd__btn:hover{background:#fff; color:var(--blue-ink); box-shadow:var(--shadow-sm);}
.nav-dd__btn .caret{font-size:.65rem; transition:transform .18s; color:var(--gold);}
/* 14 guias em coluna única viravam uma lista alta demais: duas colunas. */
.nav-dd__menu{position:absolute; top:calc(100% + 10px); left:0; min-width:480px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:10px; display:none; z-index:70;
  grid-template-columns:1fr 1fr; gap:0 6px;}
.nav-dd__menu a{display:block; padding:10px 14px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:.92rem; transition:.14s;}
.nav-dd__menu a:hover{background:var(--blue-soft); color:var(--blue-ink);}
/* Ponte invisível sobre o vão de 10px: sem ela o mouse perde o hover
   ao descer do botão para o menu e o dropdown fecha na cara do usuário. */
.nav-dd__menu::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px;}
.nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu,
.nav-dd.open .nav-dd__menu{display:grid;}
.nav-dd:hover .caret, .nav-dd:focus-within .caret, .nav-dd.open .caret{transform:rotate(180deg);}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans);
  font-weight:600; font-size:.98rem; padding:15px 26px; border-radius:14px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:.18s; line-height:1;}
.btn-ink{background:var(--ink); color:var(--paper);}
.btn-ink:hover{background:var(--blue-ink); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent; color:var(--ink); border-color:#cfc6b8;}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:#fff;}
.btn-gold:hover{filter:brightness(1.06); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md);}

/* ---------- HERO EDITORIAL (home) ---------- */
.hero{padding:84px 0 70px; position:relative; overflow:hidden;}
.hero::after{content:""; position:absolute; right:-180px; top:-120px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-soft) 0%, transparent 68%); z-index:0;}
.hero::before{content:""; position:absolute; left:-160px; bottom:-220px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--rose-soft) 0%, transparent 68%); z-index:0;}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr;
  gap:56px; align-items:center;}
.hero h1{margin:22px 0 18px;}
.hero h1 em{font-style:italic; font-weight:500; color:var(--rose-d);}
.hero .lead{font-size:1.16rem; line-height:1.7; color:var(--ink-2); margin:0 0 34px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
/* Sinais de confiança em uma linha discreta, separados por ponto médio. */
.hero-trust{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:6px 0; font-size:.84rem; color:var(--muted); line-height:1.5;}
/* separador no fim do item, para não sobrar órfão ao quebrar a linha */
.hero-trust li:not(:last-child)::after{content:"·"; margin:0 9px; color:var(--gold);
  font-weight:700;}
.hero-trust a{color:inherit; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--line);}
.hero-trust a:hover{color:var(--ink-2); text-decoration-color:var(--gold);}
.hero-media{position:relative;}
.hero-media img{width:100%; aspect-ratio:10/11; object-fit:cover; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-md);}
.hero-media::after{content:""; position:absolute; inset:auto -14px -14px auto; width:120px; height:120px;
  border-radius:var(--r-lg); border:1px solid var(--gold); opacity:.5; z-index:-1;}

/* ---------- SEÇÕES ---------- */
.section{padding:76px 0;}
.section--paper{background:var(--paper);}
.section--white{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:660px; margin:0 auto 44px; text-align:center;}
.section-head .eyelabel{justify-content:center;}
.section-head .eyelabel::after{content:""; width:26px; height:1px; background:var(--gold);}
.section-head h2{margin-top:14px;}
.section-head p{color:var(--muted); font-size:1.04rem;}
.section-cta{text-align:center; margin-top:44px;}

/* ---------- CARDS DE GUIA (pilares) ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:.22s cubic-bezier(.2,.7,.3,1); text-decoration:none;}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#ddd2c2;}
.pcard__img{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:46px;
  background:linear-gradient(140deg, var(--blue-soft), #fff 70%); border-bottom:1px solid var(--line-2);
  overflow:hidden; position:relative;}
.pcard:nth-child(3n+2) .pcard__img{background:linear-gradient(140deg, var(--rose-soft), #fff 70%);}
.pcard:nth-child(3n) .pcard__img{background:linear-gradient(140deg, var(--gold-soft), #fff 70%);}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .35s cubic-bezier(.2,.7,.3,1);}
.pcard:hover .pcard__img img{transform:scale(1.04);}
.pcard__body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
.pcard__tag{font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);}
.pcard h3{margin:10px 0 8px;}
.pcard p{color:var(--ink-2); font-size:.96rem; margin-bottom:18px;}
.pcard__more{margin-top:auto; font-weight:700; font-size:.9rem; color:var(--ink); display:inline-flex; align-items:center; gap:8px;}
.pcard__more::after{content:"→"; color:var(--gold); transition:transform .18s;}
.pcard:hover .pcard__more::after{transform:translateX(4px);}

/* ---------- GUIAS RÁPIDOS ---------- */
.qguides{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.qguide{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--shadow-sm); transition:.18s; text-decoration:none;}
.qguide:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#ddd2c2;}
.qguide .em{font-size:26px; width:52px; height:52px; flex:0 0 auto; border-radius:14px; background:var(--paper);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;}
.qguide b{display:block; font-family:var(--serif); font-weight:600; font-size:1.04rem; color:var(--ink);}
.qguide span span{font-size:.88rem; color:var(--muted);}

/* ---------- BANNER FERRAMENTAS ---------- */
.tools-banner{background:var(--ink); border-radius:var(--r-lg); padding:52px; display:grid;
  grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; box-shadow:var(--shadow-md); position:relative; overflow:hidden;}
.tools-banner::after{content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,147,196,.35), transparent 70%);}
.tools-banner h2{color:var(--paper);}
.tools-banner h2 em{font-style:italic; color:var(--rose); font-weight:500;}
.tools-banner p{color:#b9c2d2; margin-bottom:24px;}
.tools-banner .tlist{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; z-index:1;}
.tools-banner .tlist a{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:13px 16px; color:#e8ecf3; font-weight:600; font-size:.9rem; transition:.15s; text-decoration:none;
  display:flex; align-items:center; gap:9px;}
.tools-banner .tlist a:hover{background:rgba(255,255,255,.14); color:#fff; transform:translateY(-2px);}

/* ---------- FOOTER ---------- */
.ftr{background:var(--ink); color:#aeb8c8; margin-top:90px;}
.ftr .wrap{padding:64px 24px 40px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:38px;}
.ftr h3{font-family:var(--sans); color:#e8edf4; font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:16px;}
/* width:fit-content mantém um link por linha e faz o sublinhado parar no texto. */
.ftr a{color:#aeb8c8; font-size:.94rem; display:block; width:fit-content;
  padding:5px 0; position:relative; transition:color .25s ease;}
.ftr a::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);}
.ftr a:hover{color:#e8edf4;}
.ftr a:hover::after{transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){
  .ftr a::after{transition:none;}
}
.ftr__about{font-size:.94rem; line-height:1.8;}
.ftr__logo{display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  margin-bottom:18px;}
/* A tagline vem em texto, não na imagem: a 74px de altura ela ficava ilegível. */
.ftr__tagline{margin:0; font-size:.63rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); line-height:1.6; white-space:nowrap;}
.ftr__tagline span{color:var(--rose); margin:0 4px; letter-spacing:0;}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.1);}
.ftr__bottom .wrap{display:block; padding:22px 24px; text-align:center; font-size:.82rem; color:#7f8a9c;}
.ftr__disclosure{max-width:780px; margin:0 auto 8px;}
.ftr__disclaimer{display:block; font-style:italic; font-size:.75rem; color:#6b7686; margin-top:4px;}

/* ---------- RESPONSIVO ---------- */
@media(max-width:960px){
  .pillars{grid-template-columns:repeat(2,1fr);}
  .tools-banner{grid-template-columns:1fr; padding:38px 30px;}
  .ftr .wrap{grid-template-columns:1fr 1fr;}
  .hero .wrap{grid-template-columns:1fr; gap:40px; max-width:760px; text-align:center;}
  .hero .lead{margin-left:auto; margin-right:auto; max-width:620px;}
  .hero-cta{justify-content:center;}
  .hero-trust{justify-content:center;}
  /* empilhado e centrado: os separadores ficariam soltos no fim de cada linha */
  .hero-trust li:not(:last-child)::after{display:none;}
  .hero-trust{flex-direction:column; gap:7px; align-items:center;}
  .hero-media{max-width:440px; margin:0 auto;}
  .hero-media img{aspect-ratio:4/3;}
}
@media(max-width:680px){
  .hero-media::after{display:none;}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; padding:14px 16px 20px; border-bottom:1px solid var(--line); gap:4px;
    box-shadow:var(--shadow-md); max-height:calc(100vh - var(--nav-h)); overflow-y:auto;}
  .nav-links.open{display:flex;}
  .nav-links > a{padding:14px 12px; border-radius:12px;}
  .nav-links > a:active{background:var(--blue-soft);}
  .nav-burger{display:block;}
  /* CTA final vira um botão cheio, separado do resto por uma linha —
     sem isso ele se perdia no meio dos outros links de texto. */
  .nav-links > a.is-cta{margin-top:8px; padding-top:14px; border-top:1px solid var(--line); border-radius:12px;
    text-align:center;}
  .nav-dd{width:100%;}
  .nav-dd__btn{width:100%; justify-content:space-between; padding:14px 12px; font-size:.78rem;
    text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border-radius:12px;}
  .nav-dd__btn:hover{background:none; box-shadow:none;}
  .nav-dd__btn:active{background:var(--blue-soft);}
  /* Fechado por padrão — abre só ao tocar (mesmo JS do desktop), senão os
     13 links de categoria formam uma parede de texto assim que o menu abre. */
  .nav-dd__menu{position:static; display:none; border:0; box-shadow:none; padding:2px 0 6px 12px;
    min-width:0; grid-template-columns:1fr;}
  .nav-dd.open .nav-dd__menu{display:block;}
  .nav-dd__menu a{padding:11px 14px; font-size:.9rem;}
  .search-wrap{order:-1; width:100%; margin-bottom:8px;}
  .search-trigger{width:100%;}
  .search-trigger:focus-within{width:100%;}
  .search-dropdown{position:static; box-shadow:none; border:1px solid var(--line); margin-top:8px; width:100%; max-width:none;}
  .hero{padding:56px 0 48px;}
  .pillars{grid-template-columns:1fr;}
  .qguides{grid-template-columns:1fr;}
  .tools-banner .tlist{grid-template-columns:1fr;}
  .ftr .wrap{grid-template-columns:1fr;}
  .section{padding:54px 0;}
}

/* ---------- AVISO DE COOKIES ---------- */
.cookie-bar{position:fixed; right:20px; bottom:20px; z-index:200; width:270px;
  background:var(--ink); color:var(--paper); border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  transform:translateY(calc(100% + 20px)); transition:transform .3s ease;}
.cookie-bar.show{transform:translateY(0);}
.cookie-bar__inner{padding:20px; display:flex; flex-direction:column; gap:14px;}
.cookie-bar p{margin:0; font-size:.84rem; line-height:1.5; color:#d7dce4;}
.cookie-bar p a{color:var(--paper); text-decoration:underline;}
.cookie-bar .btn{width:100%; padding:11px 18px; border-radius:10px;}
@media(max-width:640px){
  .cookie-bar{display:none;}
}