/* ============================================================
   Joana Abrantes — Psicanalista
   Static recreation of the Claude Design prototype.
   Palette:
     bg        #ede7dd      band      #f4efe7
     ink       #211d17 / #2a251d
     terracotta#b06a4a  (hover #8f4f37)
     olive     #6c7242  (hover #59602f)
     muted     #5d564a #7a7263 #9a8f7d #3a342b
   ============================================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; }
::selection{ background:#b06a4a; color:#f4efe7; }

.page{
  position:relative;
  background:#ede7dd;
  color:#211d17;
  font-family:'Spectral', Georgia, serif;
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------- Decorative background layers ---------- */
.jb-bands{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.jb-thread{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}
#jb-main{ opacity:.82; }
#jb-glow{ opacity:.55; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1080px; margin:0 auto; }
.wrap--pad-band{ padding:110px 52px; }
.wrap--pad-analise{ padding:120px 52px 100px; }
.wrap--pad-conversar{ padding:130px 52px 120px; }
.wrap--faq{ max-width:880px; padding:110px 52px; }

.section{
  position:relative; z-index:1;
  scroll-margin-top:80px;
}
.section--band{
  position:relative; z-index:1;
  scroll-margin-top:80px;
}

.rule{ height:1px; }
.rule--dark{ width:44px; background:#211d17; margin:34px 0 0; opacity:.55; }
.rule--accent{ width:40px; background:#b06a4a; margin:24px 0 28px; }
.rule--faq{ margin:24px 0 40px; }
.hairline{ height:1px; background:rgba(33,29,23,.1); }

/* ---------- Shared type ---------- */
.h2{
  margin:0; font-weight:400;
  font-size:clamp(32px,4vw,44px);
  letter-spacing:-.5px; color:#2a251d;
}
.p{ margin:0; }
.p--lead{ margin:0 0 18px; font-size:18px; line-height:1.8; color:#3a342b; }
.p--lead-19{ margin:0 0 16px; font-size:19px; line-height:1.8; color:#3a342b; }
.p--muted{ margin:0; font-size:18px; line-height:1.8; color:#5d564a; }

.eyebrow{
  text-transform:uppercase;
}
.eyebrow--accent{
  margin:0 0 8px; font-size:13.5px; letter-spacing:1.5px; color:#b06a4a;
}
.eyebrow--soft{
  margin:0 0 26px; font-size:13.5px; letter-spacing:1.5px; color:#9a8f7d;
}

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-block; text-decoration:none;
  border-radius:30px; letter-spacing:.3px;
}
.btn--olive{
  background:#6c7242; color:#f4efe7;
  padding:15px 34px; font-size:16.5px;
  box-shadow:0 1px 0 rgba(0,0,0,0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease, box-shadow .35s ease;
}
.btn--olive:hover{
  background:#59602f; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(89,96,47,.28);
}
.btn--lg{ padding:16px 38px; }
.btn--lg:hover{ box-shadow:0 12px 28px rgba(89,96,47,.3); }

.link-arrow{
  text-decoration:none;
  transition:color .3s ease;
}
.link-arrow [data-arrow]{
  display:inline-block;
  transition:transform .3s ease;
}
.link-arrow:hover [data-arrow]{ transform:translateX(6px); }
.link-arrow--accent{ color:#b06a4a; font-size:15.5px; }
.link-arrow--accent:hover{ color:#8f4f37; }
.link-arrow--dark{ color:#3a342b; font-size:16.5px; }
.link-arrow--dark:hover{ color:#b06a4a; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%;
  z-index:20;
  display:flex; justify-content:flex-end; align-items:center;
  gap:34px; padding:26px 52px;
  font-size:15.5px; letter-spacing:.2px;
  transition:background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.nav__link{
  color:#2a251d; text-decoration:none;
  transition:color .3s ease;
}
.nav__link:hover{ color:#b06a4a; }
.nav.is-scrolled{
  background:rgba(237,231,221,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(33,29,23,.06);
}

/* ---------- Hero ---------- */
.hero{
  max-width:1080px; margin:0 auto;
  padding:300px 52px 130px;
  scroll-margin-top:90px;
}
.hero__title{
  margin:0; font-weight:400;
  font-size:clamp(46px,7vw,86px);
  line-height:1.0; letter-spacing:-1px; color:#2a251d;
}
.hero__subtitle{
  margin:22px 0 0; font-size:clamp(20px,2.4vw,27px);
  font-weight:400; color:#b06a4a;
}
.hero__grid{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:60px; align-items:start; margin-top:46px;
}
.hero__lede{
  margin:6px 0 0; font-size:18px; line-height:1.78;
  color:#5d564a; max-width:340px; justify-self:end;
}

/* ---------- Eu: Joana ---------- */
.eu__grid{
  display:grid; grid-template-columns:0.82fr 1.18fr;
  gap:60px; align-items:start;
}
.eu__photo{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  object-position:center 12%; display:block;
  border-radius:3px; box-shadow:0 18px 44px rgba(33,29,23,.18);
}
.eu__name{
  margin:18px 0 0; font-size:13.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:#b06a4a;
}
.eu__role{ margin:4px 0 0; font-size:15px; color:#7a7263; }

.trajetoria{
  margin-top:40px; padding-top:36px;
  border-top:1px solid rgba(33,29,23,.1);
}
.trajetoria__list{
  display:flex; flex-direction:column; gap:22px;
}
.trajetoria__row{
  display:grid; grid-template-columns:64px 1fr;
  gap:18px; align-items:baseline;
}
.trajetoria__label{ font-size:15px; color:#b06a4a; }
.trajetoria__text{ font-size:17px; line-height:1.6; color:#3a342b; }
.trajetoria__cta{ display:inline-block; margin-top:34px; font-size:16px; }

/* ---------- Sobre a análise ---------- */
.analise__intro{ max-width:560px; }
.analise__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2px 60px; margin-top:60px; max-width:840px;
}
.info{ padding:28px 0; border-top:1px solid rgba(33,29,23,.12); }
.info__text{ margin:0; font-size:17px; line-height:1.65; color:#3a342b; }

/* ---------- Temas ---------- */
.temas__grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:64px; align-items:start;
}
.tags{
  display:flex; flex-wrap:wrap; gap:12px; padding-top:8px;
}
.tag{
  border:1px solid rgba(33,29,23,.22); border-radius:30px;
  padding:11px 20px; font-size:16px; color:#3a342b;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.tag:hover{ background:#211d17; border-color:#211d17; color:#f4efe7; }

/* ---------- Emaranhados ---------- */
.emaranhados__intro{ max-width:540px; }
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:36px; margin-top:56px;
}
.card{
  border-top:1px solid rgba(33,29,23,.16); padding-top:26px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.card:hover{ transform:translateY(-6px); }
.card__kicker{
  margin:0 0 14px; font-size:13px; letter-spacing:1.4px;
  text-transform:uppercase; color:#9a8f7d;
}
.card__title{
  margin:0 0 12px; font-weight:500; font-size:23px;
  line-height:1.3; color:#2a251d;
}
.card__body{
  margin:0 0 20px; font-size:16px; line-height:1.7; color:#5d564a;
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid rgba(33,29,23,.14); }
.faq--last{ border-bottom:1px solid rgba(33,29,23,.14); }
.faq__btn{
  width:100%; display:flex; justify-content:space-between;
  align-items:center; gap:24px;
  background:transparent; border:none; cursor:pointer;
  text-align:left; padding:26px 4px;
  font-family:inherit; color:#2a251d;
}
.faq__q{ font-size:20px; font-weight:400; line-height:1.4; }
.faq__icon{
  flex:none; font-size:22px; color:#b06a4a;
  transition:transform .35s ease;
}
.faq.is-open .faq__icon{ transform:rotate(45deg); }
.faq__ans{
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1);
}
.faq__p{
  margin:0; padding:0 4px 28px;
  font-size:17px; line-height:1.75; color:#5d564a; max-width:680px;
}

/* ---------- Vamos conversar ---------- */
.conversar{ max-width:620px; }
.conversar__title{
  margin:0; font-weight:400;
  font-size:clamp(34px,4.6vw,52px);
  letter-spacing:-.6px; line-height:1.08; color:#2a251d;
}
.conversar__lead{
  margin:24px 0 0; font-size:21px; line-height:1.7; color:#b06a4a;
}
.conversar__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:28px; margin-top:40px;
}
.conversar__meta{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  margin-top:34px; font-size:15.5px; color:#7a7263;
}
.conversar__dot{ opacity:.4; }

/* ---------- Footer ---------- */
.footer{
  position:relative; z-index:1;
  border-top:1px solid rgba(33,29,23,.12);
}
.footer__inner{
  max-width:1080px; margin:0 auto;
  padding:30px 52px;
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:14px;
  font-size:14.5px; color:#7a7263;
}
.footer__right{ display:flex; align-items:center; gap:18px; }
.footer__social{
  color:#7a7263; text-decoration:none; transition:color .3s ease;
  display:inline-flex;
}
.footer__social:hover{ color:#b06a4a; }

/* ============================================================
   Responsive — the prototype is desktop-only; these breakpoints
   keep the layout usable on tablet/phone without altering the
   desktop design.
   ============================================================ */
@media (max-width:860px){
  .nav{
    justify-content:center; flex-wrap:wrap;
    gap:16px 22px; padding:18px 24px; font-size:14px;
  }
  .wrap--pad-band{ padding:80px 28px; }
  .wrap--pad-analise{ padding:90px 28px 70px; }
  .wrap--pad-conversar{ padding:90px 28px 80px; }
  .wrap--faq{ padding:80px 28px; }

  .hero{ padding:220px 28px 90px; }

  .hero__grid{ grid-template-columns:1fr; gap:30px; }
  .hero__lede{ justify-self:start; max-width:none; }

  .eu__grid{ grid-template-columns:1fr; gap:40px; }
  .eu__photo{ max-width:360px; }

  .temas__grid{ grid-template-columns:1fr; gap:32px; }

  .analise__grid{ grid-template-columns:1fr; gap:0 0; max-width:none; }

  .cards{ grid-template-columns:1fr; gap:0; }
  .card{ margin-top:0; padding:26px 0; }
}

@media (max-width:480px){
  .nav{ gap:12px 16px; font-size:13px; }
  .hero{ padding:180px 22px 80px; }
  .wrap--pad-band,
  .wrap--pad-analise,
  .wrap--pad-conversar,
  .wrap--faq{ padding-left:22px; padding-right:22px; }
  .footer__inner{ padding:30px 22px; }
}

/* Respect reduced-motion preferences for the decorative animations */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  #jb-main, #jb-glow{ transition:none !important; }
}