/* ===========================================================
   PAI DO GAREL 4001 — páginas de proposta aprofundada
   Usado por /propostas/cannabis/, /propostas/gorjeta/ e /propostas/autismo/
   Mesmo sistema do site: Playfair Display + Inter, verde/creme.
   =========================================================== */
:root{
  --verde-noite: #0B3D1F;
  --verde-mata:  #1E7A34;
  --verde-neon:  #37C956;
  --amarelo:     #F2C230;
  --creme:       #F4F6F1;
  --tinta:       #10160f;
  --card:        #FBFCFA;
  --linha:       rgba(11, 61, 31, 0.14);
  --linha-clara: rgba(244, 246, 241, 0.16);
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', system-ui, sans-serif;
  background: var(--creme);
  color: var(--tinta);
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }

/* ===== NAVBAR ===== */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding: clamp(0.7rem, 2vh, 1.15rem) var(--pad-x);
  background: rgba(244, 246, 241, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(11, 61, 31, 0.08);
}
.nav__logo img{ height: clamp(1.55rem, 4vw, 2.2rem); width:auto; }
.nav__cta{
  display:inline-flex; align-items:center; gap: 0.55em;
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; color: var(--creme);
  background: var(--verde-noite);
  border-radius: 999px; padding: 0.75em 1.3em;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav__cta:hover{ background: var(--verde-mata); transform: translateY(-1px); }
.nav__cta span{
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--verde-neon);
  animation: pulso 2.4s infinite;
}
@keyframes pulso{
  0%{ box-shadow: 0 0 0 0 rgba(55,201,86,0.55); }
  70%{ box-shadow: 0 0 0 0.5rem rgba(55,201,86,0); }
  100%{ box-shadow: 0 0 0 0 rgba(55,201,86,0); }
}

.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 var(--pad-x); }
.estreito{ max-width: 820px; }

/* ===== TRILHA (voltar) ===== */
.trilha{ padding-top: clamp(5.5rem, 13vh, 7.5rem); }
.trilha a{
  display:inline-flex; align-items:center; gap: 0.5em;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(244, 246, 241, 0.66); text-decoration: none;
  transition: color 0.2s ease;
}
.trilha a:hover{ color: var(--verde-neon); }

/* ===== HERO ===== */
.topo{
  background: var(--verde-noite);
  color: var(--creme);
  padding-bottom: clamp(3rem, 8vh, 4.5rem);
}
.kicker{
  display:flex; align-items:center; gap: 0.7rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--verde-neon);
  margin: 1.6rem 0 1.1rem;
}
.kicker i{ display:block; width: clamp(1.8rem, 4vw, 3rem); height: 2px; background: var(--verde-neon); }
.topo h1{
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6.4vw, 4.1rem);
  line-height: 1.03; letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: 1.3rem;
  max-width: 20ch;
}
.topo .lede{
  font-family:'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: rgba(244, 246, 241, 0.8);
  max-width: 54ch;
}
.principio{
  margin-top: clamp(2rem, 5vh, 3rem);
  border-left: 3px solid var(--amarelo);
  padding: 0.2rem 0 0.2rem 1.2rem;
  max-width: 46ch;
}
.principio b{
  display:block;
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.25; color: var(--creme); margin-bottom: 0.3rem;
}
.principio span{ font-size: 0.92rem; color: rgba(244, 246, 241, 0.7); }

/* ===== ÍNDICE EM CHIPS ===== */
.indice{ display:flex; flex-wrap: wrap; gap: 0.5rem; padding: clamp(2.2rem, 6vh, 3.2rem) var(--pad-x) 0; max-width: 1120px; margin: 0 auto; }
.indice a{
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
  color: var(--creme);
  background: rgba(244, 246, 241, 0.07);
  border: 1px solid var(--linha-clara);
  border-radius: 999px; padding: 0.6em 1.15em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.indice a:hover{ background: var(--verde-neon); color: var(--verde-noite); transform: translateY(-2px); }
.indice a b{ color: var(--verde-neon); font-weight: 700; margin-right: 0.35em; }
.indice a:hover b{ color: var(--verde-noite); }

/* ===== SEÇÃO GENÉRICA ===== */
.sec{ padding: clamp(3.2rem, 9vh, 5rem) 0; border-top: 1px solid var(--linha); scroll-margin-top: 4.2rem; }
.sec.escura{ background: var(--verde-noite); color: var(--creme); border-top: 0; }
.sec__kicker{
  display:flex; align-items:center; gap: 0.7rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--verde-mata); margin-bottom: 1.1rem;
}
.sec__kicker i{ display:block; width: clamp(1.8rem, 4vw, 3rem); height: 2px; background: var(--verde-neon); }
.sec.escura .sec__kicker{ color: var(--verde-neon); }
.sec h2{
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  line-height: 1.1; letter-spacing: -0.008em;
  color: var(--verde-noite); text-wrap: balance;
  margin-bottom: 1rem;
}
.sec.escura h2{ color: var(--creme); }
.sec p.intro{ font-size: 1rem; color: rgba(16, 22, 15, 0.74); max-width: 62ch; margin-bottom: 2rem; }
.sec.escura p.intro{ color: rgba(244, 246, 241, 0.76); }

/* ===== FRENTE (bloco numerado) ===== */
.frente{ padding: clamp(3.2rem, 9vh, 5rem) 0; border-top: 1px solid var(--linha); scroll-margin-top: 4.2rem; }
.frente__grid{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.frente__num{
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1; color: rgba(30, 122, 52, 0.75); margin-bottom: 0.6rem;
}
.frente h2{
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--verde-noite); text-wrap: balance; margin-bottom: 1rem;
}
.frente__frase{
  font-family:'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  line-height: 1.42; color: rgba(16, 22, 15, 0.72);
  border-left: 3px solid var(--verde-neon); padding-left: 1.1rem;
}
ul.promessas{ list-style: none; }
ul.promessas li{
  position: relative; padding: 1.05rem 0 1.05rem 2.1rem;
  border-bottom: 1px solid var(--linha); max-width: 64ch;
}
ul.promessas li:first-child{ border-top: 1px solid var(--linha); }
ul.promessas li::before{
  content: ""; position: absolute; left: 0; top: 1.65rem;
  width: 1.1rem; height: 2px; background: var(--verde-neon);
}
ul.promessas strong{
  display: block;
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: 1.06rem;
  color: var(--verde-noite); margin-bottom: 0.15rem;
}
ul.promessas span{ color: rgba(16, 22, 15, 0.72); font-size: 0.97rem; }

.frente.escura{ background: var(--verde-noite); color: var(--creme); border-top: 0; }
.frente.escura .frente__num{ color: rgba(55, 201, 86, 0.62); }
.frente.escura h2{ color: var(--creme); }
.frente.escura .frente__frase{ color: rgba(244, 246, 241, 0.82); border-left-color: var(--amarelo); }
.frente.escura ul.promessas li,
.frente.escura ul.promessas li:first-child{ border-color: var(--linha-clara); }
.frente.escura ul.promessas strong{ color: var(--creme); }
.frente.escura ul.promessas span{ color: rgba(244, 246, 241, 0.72); }

/* ===== CARDS (vantagens / países) ===== */
.cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 0.9rem; }
.card{
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 16px; padding: 1.5rem 1.55rem;
}
.card h3{
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: 1.1rem;
  color: var(--verde-noite); margin-bottom: 0.4rem; line-height: 1.25;
}
.card p{ font-size: 0.93rem; color: rgba(16, 22, 15, 0.74); }
.card .selo{
  display:inline-block; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--verde-mata); margin-bottom: 0.7rem;
}
.sec.escura .card{ background: rgba(244, 246, 241, 0.05); border-color: var(--linha-clara); }
.sec.escura .card h3{ color: var(--creme); }
.sec.escura .card p{ color: rgba(244, 246, 241, 0.74); }
.sec.escura .card .selo{ color: var(--verde-neon); }

/* ===== ONDE O BRASIL ESTÁ (linha do tempo) ===== */
ul.marcos{ list-style:none; max-width: 68ch; }
ul.marcos li{
  position: relative; padding: 0 0 1.5rem 1.9rem;
  border-left: 1px solid var(--linha); margin-left: 0.35rem;
}
ul.marcos li:last-child{ padding-bottom: 0; border-left-color: transparent; }
ul.marcos li::before{
  content: ""; position: absolute; left: -0.32rem; top: 0.55rem;
  width: 0.62rem; height: 0.62rem; border-radius: 50%;
  background: var(--verde-neon); box-shadow: 0 0 0 4px var(--creme);
}
ul.marcos b{
  display:block;
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: 1.02rem;
  color: var(--verde-noite); margin-bottom: 0.1rem;
}
ul.marcos span{ font-size: 0.95rem; color: rgba(16, 22, 15, 0.74); }

/* a mesma linha do tempo dentro de secao escura */
.sec.escura ul.marcos li{ border-left-color: var(--linha-clara); }
.sec.escura ul.marcos li:last-child{ border-left-color: transparent; }
.sec.escura ul.marcos li::before{ box-shadow: 0 0 0 4px var(--verde-noite); }
.sec.escura ul.marcos b{ color: var(--creme); }
.sec.escura ul.marcos span{ color: rgba(244, 246, 241, 0.76); }

/* ===== FONTES ===== */
.fontes{
  margin-top: 2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linha);
  font-size: 0.78rem; line-height: 1.6;
  color: rgba(16, 22, 15, 0.66); max-width: 72ch;
}
.sec.escura .fontes{ border-top-color: var(--linha-clara); color: rgba(244, 246, 241, 0.62); }
.fontes b{ font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; display:block; margin-bottom: 0.4rem; }

/* ===== COMPROMISSOS ===== */
ul.compromissos{ list-style:none; display:grid; gap: 0.8rem; max-width: 68ch; }
ul.compromissos li{
  position: relative; padding-left: 1.9rem;
  font-size: 0.97rem; color: rgba(16, 22, 15, 0.76);
}
ul.compromissos li::before{
  content: ""; position: absolute; left: 0; top: 0.68rem;
  width: 0.95rem; height: 2px; background: var(--verde-mata);
}
ul.compromissos strong{ color: var(--verde-noite); font-weight: 600; }

/* os mesmos compromissos dentro de secao escura */
.sec.escura ul.compromissos li{ color: rgba(244, 246, 241, 0.78); }
.sec.escura ul.compromissos li::before{ background: var(--amarelo); }
.sec.escura ul.compromissos strong{ color: var(--creme); }

/* ===== CTA FINAL ===== */
.final{ background: var(--verde-neon); color: var(--verde-noite); padding: clamp(3.2rem, 9vh, 5rem) 0; text-align: center; }
.final h2{
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.04; letter-spacing: -0.02em;
  margin-bottom: 1rem; text-wrap: balance;
}
.final p{ max-width: 46ch; margin: 0 auto 1.8rem; font-size: 1rem; color: var(--verde-noite); }
.final__btn{
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem); font-weight: 600;
  text-decoration: none; color: var(--creme); background: var(--verde-noite);
  border-radius: 999px; padding: 1em 2em; transition: transform 0.2s ease;
}
.final__btn:hover{ transform: translateY(-2px); }
.final__num{
  display: block;
  font-family:'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: clamp(2.6rem, 9vw, 4.2rem);
  letter-spacing: 0.02em; margin-top: 2rem;
  color: var(--verde-noite); line-height: 1;
}
.final__num small{
  display: block; font-family:'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; margin-top: 0.5rem; color: var(--verde-noite);
}

/* ===== RODAPÉ ===== */
.rodape{
  background: var(--verde-noite); color: rgba(244, 246, 241, 0.62);
  padding: clamp(2.5rem, 7vh, 3.5rem) 0 clamp(2.5rem, 6vh, 3rem);
  font-size: 0.82rem;
}
.rodape__chip{ display: inline-block; background: var(--creme); border-radius: 12px; padding: 0.65rem 0.95rem; margin-bottom: 1.3rem; }
.rodape__chip img{ height: 1.9rem; width: auto; }
.rodape__links{ display:flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-bottom: 1.4rem; }
.rodape__links a{
  color: var(--creme); text-decoration: none; font-weight: 600; font-size: 0.86rem;
  border-bottom: 1px solid rgba(244, 246, 241, 0.28); padding-bottom: 0.15rem;
}
.rodape__links a:hover{ border-color: var(--verde-neon); color: var(--verde-neon); }
.rodape p{ margin-bottom: 0.5rem; max-width: 70ch; }

/* ===== ENTRADA SUAVE ===== */
@media (prefers-reduced-motion: no-preference){
  .topo .kicker, .topo h1, .topo .lede, .principio, .indice{
    opacity: 0; transform: translateY(16px);
    animation: sobe 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .topo h1{ animation-delay: 0.06s; }
  .topo .lede{ animation-delay: 0.12s; }
  .principio{ animation-delay: 0.18s; }
  .indice{ animation-delay: 0.24s; }
  @keyframes sobe{ to{ opacity: 1; transform: none; } }
}

/* ===== MOBILE (sempre por último) ===== */
@media (max-width: 860px){
  .frente__grid{ grid-template-columns: 1fr; gap: 1.6rem; }
  .frente__frase{ font-size: 1.03rem; }
}
@media (max-width: 560px){
  .nav__cta{ padding: 0.7em 1em; }
  ul.promessas li{ padding-left: 1.8rem; }
  .topo h1{ max-width: none; }
}