/* ============================================================================
   DRA. LORENA OLIVEIRA · Biomédica esteta · Uberlândia/MG
   Refazimento pelo método NEW ERA, 22/09/2026.
   Conceito: o RAMO CONDUTOR — a oliveira pintada na parede da clínica dela.
   Paleta MEDIDA nos pixels das fotos dela (estudo/paleta/paleta_final.json):
     parede creme #F7F1E9 / #EFE3D5 · areia #E8CFB6 · tinta (cabelo) #2D221A
     oliva da porta #33331D · folhas #6A7040 / #939A5E · acento (o esmalte) #9A1117
   Gradientes: 130° claros · 165° escuros (3 paradas do mesmo tom) · 115° metal/acento
   ========================================================================= */

/* ---------- FONTES SELF-HOSTED (sem CDN de terceiro) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-400-normal.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/cormorant-500-normal.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/cormorant-600-normal.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-400-italic.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/dmsans-400-normal.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/dmsans-500-normal.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/dmsans-700-normal.woff2") format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;}

/* ---------- TOKENS ---------- */
:root{
  /* papeis (medidos na parede e no colete dela) */
  --papel:#F7F1E9;
  --papel-2:#EFE3D5;
  --areia:#E8CFB6;
  --tinta:#2D221A;
  --tinta-2:#59402F;

  /* a oliveira e a porta do consultorio dela */
  --oliva:#33331D;
  --oliva-2:#3F4022;
  --folha:#6A7040;
  --folha-clara:#939A5E;
  --dark:#33331D;

  /* o acento e' o esmalte dela (medido: #9A1117, distinto da pele) */
  --acento:#9A1117;
  --acento-2:#7A0D12;
  --acento-suave:#F2DFDD;

  --texto-3:#7C6A5A;
  --line:rgba(45,34,26,.14);
  --line-forte:rgba(45,34,26,.30);

  /* GRADIENTES — regua da casa: 130 claro / 165 escuro / 115 metal-acento */
  --grad-main:linear-gradient(130deg,#F7F1E9 0%,#F3EBE2 46%,#EFE3D5 100%);
  --grad-soft:linear-gradient(130deg,#EFE3D5 0%,#F5EFE7 48%,#F7F1E9 100%);
  --grad-dark:linear-gradient(165deg,#3F4022 0%,#33331D 46%,#262613 100%);
  --dark-fundo:#33331D;
  --grad-metal:linear-gradient(115deg,#939A5E 0%,#6A7040 52%,#4C5228 100%);
  --grad-accent:linear-gradient(115deg,#9A1117 0%,#7A0D12 100%);
  --grad-line:linear-gradient(90deg,rgba(147,154,94,0) 0%,#939A5E 50%,rgba(147,154,94,0) 100%);
  --grad-folha:linear-gradient(115deg,#939A5E 0%,#6A7040 100%);

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-casa:cubic-bezier(.2,.7,.2,1);
  --space:clamp(62px,8vh,104px);
  --raio:18px;
  --raio-g:26px;
  --wrap:1180px;
  --sombra:0 18px 48px -28px rgba(45,34,26,.34);
  --cookie-h:0px;
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.com-cookie{--cookie-h:132px}
body{
  margin:0;font-family:var(--sans);color:var(--tinta);font-size:17px;line-height:1.66;
  background:var(--grad-main);background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.005em}
p{margin:0 0 1.05em}
em{font-style:italic}
strong{font-weight:500;color:var(--tinta)}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* acessibilidade: foco visivel sempre */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--acento);outline-offset:3px;border-radius:6px;
}

/* ---------- BOTOES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:999px;
  font-size:15.5px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.btn--zap{background:var(--grad-accent);color:#FDF8F4;box-shadow:0 14px 30px -16px rgba(154,17,23,.72)}
.btn--zap:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(154,17,23,.85)}
.btn--linha{border:1px solid var(--line-forte);color:var(--tinta);background:rgba(255,255,255,.42)}
.btn--linha:hover{border-color:var(--folha);background:rgba(255,255,255,.7)}
.btn--claro{background:var(--grad-metal);color:#20210F;box-shadow:0 14px 30px -18px rgba(51,51,29,.7)}
.btn--claro:hover{transform:translateY(-2px)}
.btn--escuro{background:var(--grad-dark);color:#F2EDE0}
.btn--escuro:hover{transform:translateY(-2px)}

/* ---------- HEADER (no fluxo: rola e recolhe — nunca fixed) ---------- */
#topo{position:relative;z-index:60}
.site-header{
  position:relative;background:var(--grad-soft);border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 10px 30px -22px rgba(45,34,26,.5)}
.site-header.is-hidden{transform:translateY(-102%)}
.header-linha{display:flex;align-items:center;gap:18px;min-height:78px;padding:10px 0}
.marca{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.marca__selo{
  flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-dark);
}
.marca__selo svg{width:26px;height:26px;display:block}
.marca__texto{display:flex;flex-direction:column;line-height:1.16;min-width:0}
.marca__texto strong{font-family:var(--serif);font-size:20px;font-weight:500;white-space:nowrap}
.marca__texto span{font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.7vw,26px)}
.menu a{font-size:14.5px;white-space:nowrap;position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-metal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}
.menu .btn{margin-left:6px}
.hamburguer{
  margin-left:auto;flex:none;width:48px;height:48px;border-radius:14px;
  display:none;place-content:center;gap:5px;border:1px solid var(--line-forte);background:rgba(255,255,255,.5);
}
.hamburguer i{display:block;width:22px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.hamburguer[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{
  display:none;border-bottom:1px solid var(--line);background:var(--grad-soft);
  padding:8px 0 22px;
}
.drawer.is-aberto{display:block}
.drawer ul{display:grid;gap:2px}
.drawer a{display:block;padding:14px 4px;min-height:48px;font-size:16px;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:16px;width:100%}

/* ---------- SECTION generico ---------- */
.section{position:relative;padding:var(--space) 0}
.bg-paper{background:var(--grad-main)}
.bg-grad-soft{background:var(--grad-soft)}
.bg-grad-main{background:var(--grad-main)}
.bg-dark{background:var(--grad-dark);color:#EFEADD}
.bg-dark h2,.bg-dark h3{color:#F4F0E2}
.bg-dark p{color:#CFCAB4}
.bg-dark a{color:#E6E2CE}
.hairline{height:1px;background:var(--grad-line);border:0;margin:0}

.section-num{
  font-family:var(--serif);font-size:clamp(64px,9vw,132px);line-height:.8;color:rgba(106,112,64,.16);
  position:absolute;top:clamp(10px,2vw,26px);pointer-events:none;user-select:none;
}
.section-num--dir{right:clamp(10px,3vw,44px)}
.section-num--esq{left:clamp(10px,3vw,44px)}
.bg-dark .section-num{color:rgba(147,154,94,.22)}

.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--folha);margin-bottom:18px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--grad-metal)}
.bg-dark .kicker{color:var(--folha-clara)}

.sec-titulo{font-size:clamp(31px,4.3vw,54px);max-width:19ch}
.sec-sub{color:var(--tinta-2);max-width:56ch;margin-top:16px}
.bg-dark .sec-sub{color:#CFCAB4}
.section-head{position:relative}
.section-head--centro{text-align:center;display:grid;justify-items:center}
.section-head--centro .sec-titulo{max-width:24ch}

/* ---------- O RAMO CONDUTOR (fragmento-assinatura) ---------- */
/* o traco da oliveira atravessa a pagina; cada folha e' um ponto de conteudo */
.ramo-div{display:flex;justify-content:center;padding:6px 0 0;position:relative;z-index:1}
.ramo-div svg{width:min(560px,84vw);height:auto;overflow:visible}
.ramo-vivo path.traco,.ramo-vivo line.traco{
  stroke-dasharray:var(--len,520);stroke-dashoffset:var(--len,520);
  animation:ramoCresce 1.5s var(--ease-casa) forwards;
}
.ramo-vivo circle{opacity:0;animation:azeitonaSurgir .7s var(--ease-casa) forwards}
.ramo-vivo circle:nth-of-type(1){animation-delay:.7s}
.ramo-vivo circle:nth-of-type(2){animation-delay:1.0s}
.ramo-vivo circle:nth-of-type(3){animation-delay:1.25s}
.ramo-vivo .folha{opacity:0;animation:folhaAbrir .8s var(--ease-casa) forwards}
.ramo-vivo .folha:nth-of-type(1){animation-delay:.35s}
.ramo-vivo .folha:nth-of-type(2){animation-delay:.5s}
.ramo-vivo .folha:nth-of-type(3){animation-delay:.65s}
.ramo-vivo .folha:nth-of-type(4){animation-delay:.8s}
.ramo-vivo .folha:nth-of-type(5){animation-delay:.95s}

@keyframes ramoCresce{to{stroke-dashoffset:0}}
@keyframes folhaAbrir{from{opacity:0;transform:scale(.5) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes azeitonaSurgir{from{opacity:0;transform:translateY(-8px) scale(.6)}to{opacity:1;transform:none}}
@keyframes revelaSubir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pulsaGlow{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.72;transform:scale(1.06)}}
@keyframes folhaSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes brilhoLinha{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-on{animation:revelaSubir .9s var(--ease) forwards}
.d1{animation-delay:.10s}.d2{animation-delay:.20s}.d3{animation-delay:.30s}
.d4{animation-delay:.40s}.d5{animation-delay:.50s}.d6{animation-delay:.60s}

/* ---------- HERO ---------- */
.hero{position:relative;padding:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero__fundo{position:absolute;inset:0;background:var(--grad-main)}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(6px)}
.glow--1{
  width:clamp(320px,52vw,760px);height:clamp(320px,52vw,760px);left:-14vw;top:-16vh;
  background:radial-gradient(circle,rgba(147,154,94,.34) 0%,rgba(147,154,94,0) 68%);
  animation:pulsaGlow 14s var(--ease-casa) infinite;
}
.glow--2{
  width:clamp(280px,44vw,640px);height:clamp(280px,44vw,640px);right:-10vw;bottom:-14vh;
  background:radial-gradient(circle,rgba(154,17,23,.16) 0%,rgba(154,17,23,0) 70%);
  animation:pulsaGlow 18s var(--ease-casa) infinite reverse;
}
.hero__grade{
  position:relative;z-index:2;width:min(100% - 40px,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,68px);align-items:center;padding:clamp(30px,5vh,64px) 0;
}
.hero__txt{max-width:34rem}
.hero h1{font-size:clamp(38px,6.2vw,74px);margin-bottom:22px}
.hero h1 em{color:var(--acento);font-style:italic}
.hero__lead{font-size:clamp(17px,1.35vw,19.5px);color:var(--tinta-2);max-width:34rem}
.hero__acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__selos{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--tinta-2);
}
.hero__selos li{display:flex;align-items:center;gap:8px}
.hero__selos li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad-folha)}

/* a moldura do retrato: arco na proporcao da foto (nada sobreposto a ela) */
.hero-media{position:relative;justify-self:center;width:min(100%,430px);
  display:flex;flex-direction:column;align-items:center}
.portrait-frame{
  position:relative;z-index:2;border-radius:999px 999px var(--raio-g) var(--raio-g);overflow:hidden;
  box-shadow:var(--sombra);background:var(--grad-soft);width:100%;
}
.portrait-frame img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 24%;
}
/* O selo fica FORA da moldura, abaixo do arco (ordem do dono: nada sobreposto a
   foto dela). Antes ele tinha position:absolute/bottom:16px e caia SOBRE a foto. */
.portrait-selo{
  position:static;display:inline-flex;align-items:center;gap:8px;
  margin:14px auto 0;padding:9px 16px;border-radius:999px;width:fit-content;
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  font-size:12.5px;letter-spacing:.04em;white-space:nowrap;
}
.portrait-selo b{font-family:var(--serif);font-size:15px;font-weight:500}
/* os ramos decoram AO REDOR da moldura, nunca por cima do retrato (z-index 0 e
   a moldura em 2: a folha aparece saindo de tras do arco) */
.portrait-ramo{position:absolute;z-index:0;pointer-events:none}
.portrait-ramo--a{left:-42px;top:4%;width:134px;animation:folhaSway 9s var(--ease-casa) infinite}
.portrait-ramo--b{right:-34px;bottom:12%;width:120px;transform:scaleX(-1);animation:folhaSway 11s var(--ease-casa) infinite reverse}

/* ---------- A PROFISSIONAL ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(30px,4vw,64px);align-items:center}
.about__txt p{color:var(--tinta-2);max-width:54ch}
.about__citacao{
  border-left:2px solid var(--folha);padding:4px 0 4px 20px;margin:26px 0;
  font-family:var(--serif);font-size:clamp(20px,2.1vw,26px);line-height:1.32;color:var(--tinta);
}
.about__citacao cite{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin-top:12px}
.about__media{position:relative}
.about__media img{border-radius:var(--raio-g);box-shadow:var(--sombra);aspect-ratio:3/4;object-fit:cover;object-position:50% 22%}
.ficha{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px;
}
.ficha li{
  background:rgba(255,255,255,.52);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
}
.ficha b{display:block;font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.1}
.ficha span{font-size:12.5px;color:var(--texto-3);letter-spacing:.04em}

/* ---------- ESTANTE (padrao Felipe: o volume abre, os outros saem) ---------- */
.shelf{position:relative;margin-top:clamp(30px,4vw,48px)}
.shelf-stage{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,2rem);justify-items:center;align-items:end;
  perspective:1600px;
}
/* min-width:0 — item de grid nao encolhe abaixo do conteudo (causa de scroll-x) */
.book-card{
  position:relative;width:100%;max-width:192px;min-width:0;aspect-ratio:2/3;
  transform:rotate(var(--r,0deg)) translateY(var(--hover-y,0px));
  transition:transform .6s var(--ease-casa),opacity .4s var(--ease-casa);
}
.book-card:nth-child(odd){--r:-1.7deg}
.book-card:nth-child(even){--r:1.4deg}
.book-card:hover{--hover-y:-10px}
.book-card .book{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
.book-shadow{
  position:absolute;left:8%;right:8%;bottom:-9px;height:20px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(28,24,14,.42) 0%,rgba(28,24,14,0) 72%);filter:blur(3px);
}
.book-back{
  position:absolute;inset:0;border-radius:3px 8px 8px 3px;
  background:linear-gradient(100deg,#2A2A16 0%,#1D1D0E 100%);
  transform:translateZ(-9px);box-shadow:0 14px 30px -18px rgba(20,18,10,.8);
}
.page-block{
  position:absolute;top:5px;bottom:5px;right:-6px;width:11px;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,#D9D2BE 0%,#F2EDE0 40%,#C9C1AB 100%);
}
.page-fan{position:absolute;top:5px;bottom:5px;right:-6px;width:11px}
.page-fan i{
  position:absolute;top:6%;bottom:6%;right:0;width:100%;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(180,172,150,.5));
  transform-origin:right center;opacity:.75;
}
.front-cover{
  position:absolute;inset:0;border-radius:3px 9px 9px 3px;overflow:hidden;
  background-image:var(--cover-img);background-size:cover;background-position:center;
  transform-origin:1.5% center;transition:transform 1s var(--ease-casa);
  box-shadow:0 16px 34px -20px rgba(20,18,10,.85), inset 0 0 0 1px rgba(255,255,255,.08);
}
.book-card.is-selected .front-cover{transform:rotateY(-29deg)}
.cover-shine{
  position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 34%,rgba(0,0,0,.26) 100%);
}
.cover-content{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 13px 14px;gap:6px;color:#F3F0E0;overflow:hidden;
}
.cover-kicker{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--folha-clara)}
/* título longo (Bioestimuladores, Harmonização glútea) precisa QUEBRAR dentro
   do volume: sem isto ele transbordava e a última letra ficava fora da capa */
.cover-title{
  font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);line-height:1.1;font-weight:500;
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;
}
.cover-sub{font-size:11.5px;color:rgba(243,240,224,.78);line-height:1.35;overflow-wrap:break-word}
.cover-footer{
  align-self:flex-start;font-size:10.5px;letter-spacing:.14em;color:rgba(243,240,224,.7);
  border-top:1px solid rgba(243,240,224,.26);padding-top:7px;
}
.cover-badge{
  position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;
  background:rgba(247,241,233,.93);color:var(--tinta);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.book-card.is-selected .cover-badge{display:none}
.shelf__hint{text-align:center;color:var(--texto-3);font-size:13.5px;margin:22px 0 0}

.book-panel{
  position:relative;background:rgba(255,255,255,.66);border:1px solid var(--line);
  border-radius:var(--raio-g);padding:clamp(22px,2.6vw,34px);
  box-shadow:var(--sombra);margin-top:clamp(22px,3vw,34px);
}
.book-panel__x{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;border:1px solid var(--line-forte);background:rgba(255,255,255,.7);
}
.book-panel__x:hover{background:var(--acento-suave)}
.book-panel__x svg{width:18px;height:18px}
.book-panel__kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--folha)}
/* o X flutua no canto: o titulo (e o kicker) precisam de recuo para nao passar por baixo dele */
.book-panel__t{font-family:var(--serif);font-size:clamp(25px,2.6vw,34px);margin:8px 0 12px;max-width:22ch;padding-right:52px}
.book-panel__kicker{padding-right:52px}
.book-panel__d{color:var(--tinta-2);max-width:60ch}
.book-panel__lista{display:grid;gap:9px;margin:18px 0}
.book-panel__lista li{display:flex;gap:10px;font-size:15px;color:var(--tinta-2)}
.book-panel__lista li::before{
  content:"";flex:none;margin-top:8px;width:8px;height:11px;
  border-radius:60% 10% 60% 10%;background:var(--grad-folha);
}
.book-panel__nota{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--texto-3);
}
.book-panel .btn{white-space:normal;text-align:center;line-height:1.25}

.shelf[data-mode="detail"] .book-card:not(.is-selected){display:none}
.shelf[data-mode="detail"] .shelf__hint{display:none}
/* MODO DETALHE — o volume escolhido abre e os outros saem da tela.
   No celular: uma coluna so' (o volume em cima, o painel abaixo, largura toda).
   Sem isto o painel herdava a grade de 2 colunas e ficava com ~150px: o texto
   quebrava a cada duas palavras e ficava ilegivel. */
.shelf[data-mode="detail"] .shelf-stage{
  grid-template-columns:minmax(0,1fr);align-items:start;
  justify-items:stretch;perspective:none;
}
.shelf[data-mode="detail"] .book-card.is-selected{
  width:min(192px,52%);max-width:192px;justify-self:center;
}
.shelf[data-mode="detail"] .book-panel{width:100%;margin-top:0}

/* ---------- O CUIDADO (passos) ---------- */
.etapas{display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(28px,3.6vw,44px)}
.etapa{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;
  background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:var(--raio);
  padding:clamp(20px,2.4vw,30px);
}
.etapa__n{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  font-family:var(--serif);font-size:21px;background:var(--grad-metal);color:#20210F;
}
.etapa h3{font-size:clamp(20px,2vw,25px);margin-bottom:8px}
.etapa p{color:var(--tinta-2);margin:0;max-width:62ch}
.etapa__foto{grid-column:2;margin-top:14px}
.etapa__foto img{border-radius:14px;box-shadow:var(--sombra)}

/* ---------- INTERVENCIONISTA ---------- */
.inter{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4vw,62px);align-items:center}
.inter__media img{border-radius:var(--raio-g);box-shadow:var(--sombra)}
.inter__lista{display:grid;gap:14px;margin-top:22px}
.inter__lista li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.5);border:1px solid var(--line);
}
.inter__lista b{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--oliva)}
.inter__lista span{display:block;font-size:14.5px;color:var(--tinta-2)}

/* ---------- DEPOIMENTOS ---------- */
.testi{position:relative;margin-top:clamp(28px,3.6vw,44px)}
.testi-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 20px;scrollbar-width:thin;
}
.testi-slide{
  flex:0 0 100%;scroll-snap-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(147,154,94,.30);border-radius:var(--raio);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;
  min-width:0;
}
.testi-slide blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.34;color:#F4F0E2;
}
.testi-slide footer{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.testi-slide cite{font-style:normal;font-size:14px;color:var(--folha-clara)}
.testi-slide .estrelas{font-size:13px;letter-spacing:2px;color:#C8B36A}
.testi__selo{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#CFCAB4;
  border:1px solid rgba(147,154,94,.4);border-radius:999px;padding:8px 16px;margin-top:6px;
}
.testi__ctrl{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.testi__btn{
  width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  border:1px solid rgba(147,154,94,.45);background:rgba(255,255,255,.07);color:#F0ECDE;
  flex:none;   /* sem isso o flex encolhe a seta para 32px (abaixo do alvo de toque) */
}
.testi__btn:hover{background:rgba(147,154,94,.22)}
.testi-dots{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;min-width:0;justify-content:flex-end}
.testi-dots button{
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
}
.testi-dots button i{width:9px;height:9px;border-radius:50%;background:rgba(240,236,222,.32);display:block;transition:background .3s}
.testi-dots button[aria-current="true"] i{background:var(--folha-clara)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:12px;margin-top:clamp(26px,3.4vw,40px)}
details.faq{
  background:rgba(255,255,255,.52);border:1px solid var(--line);border-radius:16px;
  padding:0 clamp(18px,2.2vw,26px);
}
details.faq summary{
  list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,1.9vw,22px);min-height:44px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--folha);transition:transform .35s var(--ease-casa);
}
details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-body{padding:0 34px 22px 0;color:var(--tinta-2);font-size:15.5px}

/* ---------- ONDE ATENDO ---------- */
.where{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,58px);align-items:center}
.where__lista{display:grid;gap:14px;margin-top:22px}
.where__lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.where__lista b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--folha);padding-top:4px}
.where__lista span{display:block}
.where__fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.where__fotos figure{margin:0;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra)}
.where__fotos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.where__fotos figcaption{font-size:12px;color:var(--texto-3);padding:9px 12px;background:rgba(255,255,255,.6)}
.mapa-box{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--raio);padding:20px;
  background:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.mapa-box p{margin:0;font-size:14px;color:var(--tinta-2);max-width:44ch}

/* ---------- CONTATO / FORM ---------- */
.contact-form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:var(--raio-g);
  padding:clamp(22px,2.8vw,36px);box-shadow:var(--sombra);
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo--largo{grid-column:1/-1}
.campo label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.campo input,.campo textarea{
  font:inherit;font-size:16px;color:var(--tinta);background:rgba(255,255,255,.85);
  border:1px solid var(--line-forte);border-radius:12px;padding:14px 15px;min-height:52px;
}
.campo textarea{min-height:132px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--folha);outline-offset:2px}
.lgpd{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:14px;color:var(--tinta-2)}
.lgpd input{width:22px;height:22px;margin-top:2px;accent-color:var(--folha)}
.contact-form .btn{grid-column:1/-1;justify-self:start;white-space:normal;text-align:center}
.form-aviso{grid-column:1/-1;font-size:13.5px;color:var(--texto-3);margin:0}

/* ---------- CTA FINAL ---------- */
.section--cta{position:relative;overflow:hidden;text-align:center}
.section--cta .wrap{position:relative;z-index:2;display:grid;justify-items:center;gap:6px}
.cta-titulo{font-size:clamp(32px,4.6vw,58px);max-width:22ch}
.cta-acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.cta-nota{margin-top:26px;font-size:13px;color:#C6C1AC;max-width:60ch}
.cta-nota a{text-decoration:underline;text-underline-offset:3px}

/* ---------- RODAPE ---------- */
.site-footer{position:relative;background:var(--grad-dark);color:#DDD8C6;padding-top:clamp(48px,6vh,74px)}
.rodape-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.rodape-grid h3{font-family:var(--serif);font-size:19px;color:#F2EEDF;margin-bottom:14px}
.rodape-grid p,.rodape-grid li{font-size:14.5px;color:#C4BFA9}
.rodape-grid ul{display:grid;gap:9px}
.rodape-grid a:hover{color:#F2EEDF}
.rodape-marca{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rodape-marca svg{width:34px;height:34px}
.rodape-ramo{margin-top:clamp(30px,4vh,48px);display:flex;justify-content:center}
.rodape-ramo svg{width:min(300px,64vw);height:auto;overflow:visible}
.footer-base{
  margin-top:26px;border-top:1px solid rgba(147,154,94,.28);padding:22px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;font-size:13px;color:#B4AF98;
}
.footer-base a{text-decoration:underline;text-underline-offset:3px}
.credito{display:inline-flex;align-items:center;gap:7px}
.credito a{color:#D9D4BE;text-decoration:underline}

/* ---------- COOKIE + FAB + TOPO ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:linear-gradient(165deg,#3F4022 0%,#33331D 46%,#262613 100%);
  color:#E4E0CE;padding:16px 0;border-top:1px solid rgba(147,154,94,.34);
  display:none;
}
.cookie.is-visivel{display:block}
.cookie .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.cookie p{margin:0;font-size:13.5px;color:#C9C4AE}
.cookie__acoes{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{min-height:44px;padding:10px 18px;font-size:14px}
.cookie .btn--recusar{border:1px solid rgba(228,224,206,.5);color:#E4E0CE;background:transparent}
.fab{
  position:fixed;right:20px;bottom:calc(22px + var(--cookie-h));z-index:70;
  width:58px;height:58px;border-radius:999px;display:grid;place-items:center;
  background:var(--grad-accent);color:#FDF8F4;
  box-shadow:0 16px 34px -14px rgba(154,17,23,.7);
  transition:transform .35s var(--ease),bottom .35s var(--ease);
}
.fab:hover{transform:scale(1.06)}
.fab svg{width:28px;height:28px}
/* com um volume ABERTO na estante o FAB sai: ele cobriria o botao verde do painel */
html.com-painel .fab{display:none}
/* Com a barra de avisos aberta o FAB e' empurrado para cima e cai NO MEIO do
   paragrafo de abertura no celular (cobria "musculo" e "avaliacao" na leitura).
   Entao o FAB so' entra depois que a pessoa decide sobre os cookies — a barra
   fecha em um toque e o site tem outros botoes de WhatsApp no corpo. */
html.com-cookie .fab{display:none}
/* com o painel aberto o volume e o painel ocupam a largura toda no celular:
   a seta de voltar ao topo caia POR CIMA do texto do painel */
html.com-painel .to-top{display:none}
.to-top{
  position:fixed;left:20px;bottom:calc(22px + var(--cookie-h));z-index:70;
  width:48px;height:48px;border-radius:999px;display:grid;place-items:center;
  background:rgba(247,241,233,.92);border:1px solid var(--line-forte);color:var(--tinta);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),bottom .35s var(--ease);
}
.to-top.is-visivel{opacity:1;pointer-events:auto}
.to-top svg{width:18px;height:18px}

/* ---------- BREAKPOINTS ---------- */
@media (min-width:560px){
  .shelf-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .etapas{grid-template-columns:1fr 1fr}
  .etapa{grid-template-columns:auto minmax(0,1fr)}
  .testi__ctrl{margin-top:8px}
}
@media (max-width:900px){
  .menu{display:none}
  .hamburguer{display:grid}
  .header-linha{min-height:70px}
  .hero{min-height:auto;padding:26px 0 54px}
  .hero__grade{grid-template-columns:1fr;text-align:left;padding-top:10px}
  .hero-media{order:-1;width:min(88%,340px)}
  .hero__txt{max-width:none}
  .about,.inter,.where{grid-template-columns:1fr}
  .about__media{order:-1;max-width:460px}
  .inter__media{max-width:520px}
  .rodape-grid{grid-template-columns:1fr 1fr}
  .contact-form{grid-template-columns:1fr}
  .cookie .wrap{grid-template-columns:1fr}
  .cookie__acoes{justify-content:flex-start}
  .menu a,.drawer a,.rodape-grid a,.footer-base a{min-height:44px;display:inline-flex;align-items:center}
  .etapa__foto{grid-column:1/-1}
  .to-top{left:16px}
}
@media (min-width:901px){
  .drawer{display:none !important}
}
@media (min-width:768px){
  .testi-track{scroll-snap-type:x proximity}
  .testi-slide{flex:0 0 calc((100% - 44px)/3)}
  /* desktop: o volume aberto fica AO LADO do painel, os dois no alto
     (com align-items:end o volume descia para fora da dobra) */
  .shelf[data-mode="detail"] .shelf-stage{
    grid-template-columns:minmax(190px,260px) minmax(0,1fr);
    gap:clamp(26px,3.4vw,52px);align-items:start;justify-items:start;
  }
  .shelf[data-mode="detail"] .book-card.is-selected{width:100%;max-width:260px;justify-self:start}
  .shelf[data-mode="detail"] .book-panel{margin-top:0;min-height:min(52svh,470px)}
}
@media (min-width:1200px){
  .shelf-stage{grid-template-columns:repeat(6,minmax(0,1fr))}
  .etapas{grid-template-columns:1fr 1fr}
}
@media (min-width:1280px){
  .sec-titulo{font-size:clamp(34px,3.4vw,56px)}
  .cover-title{font-size:24px}
}
@media (min-width:1440px){
  :root{--wrap:1240px;--space:clamp(74px,8.5vh,116px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .ramo-vivo path.traco,.ramo-vivo line.traco{stroke-dashoffset:0}
  .ramo-vivo circle,.ramo-vivo .folha{opacity:1}
}

/* ---------- IMPRESSO ---------- */
@media print{
  .site-header,.cookie,.fab,.to-top,.testi__ctrl,.drawer{display:none !important}
  body{background:#fff;color:#000}
  .section{padding:18px 0;break-inside:avoid}
  .bg-dark,.site-footer{background:#fff !important;color:#000 !important}
  .bg-dark h2,.bg-dark p,.bg-dark blockquote{color:#000 !important}
  .testi-track{display:block}
  .testi-slide{flex:1 1 auto;border:1px solid #999;break-inside:avoid}
  details.faq{break-inside:avoid}
  details.faq .faq-body{display:block !important}
  .shelf-stage{display:flex !important;flex-wrap:wrap;gap:10px;perspective:none !important;transform:none !important}
  .book-card,.book-card:hover{transform:none !important;width:120px !important}
  .book{transform:none !important}
  .front-cover{transform:none !important}
  .book-shadow,.page-block,.page-fan,.cover-shine{display:none !important}
  .cover-content,.cover-kicker,.cover-title,.cover-sub,.cover-footer{color:#fff !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}

/* ============================================================================
   O RAMO CONDUTOR — a assinatura do site (ver js/effects.js)
   A oliveira pintada na parede do corredor dela; o sobrenome e' Oliveira.
   Ele vive na margem, FORA da coluna de texto, e so' aparece quando existe
   margem livre para ele (>=1360px). Abaixo disso o ramo nao entra: o que
   aparece e' o ramo inline do rodape e os arcos do retrato.
   ========================================================================= */
.ramo-trilha{display:none}

@media (min-width:1360px){
  .ramo-trilha{
    display:block;position:fixed;z-index:3;pointer-events:none;
    left:calc(50vw - 590px - 58px);top:50%;
    transform:translateY(-50%);
    width:48px;opacity:.72;
    transition:opacity .5s var(--ease-casa);
  }
  .ramo-trilha svg{display:block;width:48px;height:min(620px,78vh);overflow:visible}
  .ramo-tronco{
    transition:stroke-dashoffset .35s var(--ease-casa);
  }
  .ramo-folha{
    opacity:0;transform-origin:0 0;
    transition:opacity .7s var(--ease-casa),transform .7s var(--ease-casa);
    filter:drop-shadow(0 2px 3px rgba(45,34,26,.16));
  }
  .ramo-folha.is-on{filter:drop-shadow(0 3px 5px rgba(45,34,26,.22))}
  .ramo-azeitona{
    opacity:0;transition:opacity .8s var(--ease-casa);
    filter:drop-shadow(0 2px 3px rgba(45,34,26,.26));
  }
  /* sobre a faixa escura (depoimentos) o ramo troca de cor para nao sumir */
  html.ramo-escuro .ramo-trilha{opacity:.9}
  html.ramo-escuro .ramo-tronco{stroke:#939A5E}
  html.ramo-escuro .ramo-azeitona{fill:#F2DFDD}
}

@media (prefers-reduced-motion:reduce){
  .ramo-trilha,.ramo-folha,.ramo-azeitona{transition:none !important}
}