/* ============================================================================
   DRA. LUANA CABRAL · Ellune Clinique · Biomédica esteta · Tijuca/RJ
   Método NEW ERA, 22/09/2026.
   Conceito: A FASE — o disco de lua que atravessa o site mostrando a fase de
   cada etapa, sobre um gabarito de projeto. Nasce de dois fatos reais: o nome
   da clínica é ELLUNE (lua nova) e as FASES DA LUA estão emolduradas na parede
   da sala de procedimento (foto lc-02).

   Paleta MEDIDA nos pixels do retrato do hero (lc-13) — estudo/paleta/:
     taupe #685342 (16,94%) · tinta #301F17 (13,04%) · tinta profunda #0F0503
     acento terracota #803028 (15,37%, croma 0,524) · pele #C89078
     creme derivado do taupe · parede da clínica #BAAA9A · P&B #A4A5A9
   Gradientes: 130° claros · 165° escuros (3 paradas do mesmo tom) · 115° ação.
   ========================================================================= */

/* ---------- 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 claros: derivadas do taupe medido (#685342), mesma matiz */
  --creme:#F5F3F2;
  --creme-2:#EAE6E4;
  --creme-3:#DFD7D0;
  --areia:#BAAA9A;          /* a parede da clinica, medida (lc-12) */

  /* os escuros: a tinta medida no fundo do retrato */
  --tinta:#301F17;
  --tinta-2:#5A4436;
  --tinta-prof:#0F0503;
  --taupe:#685342;
  --dark:#211510;

  /* o acento e' a blusa (medida #803028, croma 0,524) */
  --acento:#843229;
  --acento-2:#6B2821;
  --acento-suave:#F0DFDA;

  /* o filete de luz: a pele na luz medida (#E2AEA0), na altura do arco */
  --lua:#EADBD7;
  --lua-forte:#E2AEA0;

  /* 22/09: era #7A6659 e reprovava (3,81:1 no creme — mede_contraste_geral.py).
     #605146 mantem a matiz (24°) e passa 5,35:1 na PIOR parada clara do
     gradiente (#DFD7D0). Corrige de uma vez legenda de foto, cite, ficha e nota. */
  --texto-3:#605146;
  --line:rgba(48,31,23,.14);
  --line-forte:rgba(48,31,23,.30);

  /* GRADIENTES — regua da casa: 130 claro / 165 escuro / 115 acao */
  --grad-main:linear-gradient(130deg,#F5F3F2 0%,#F0EDEB 46%,#DFD7D0 100%);
  --grad-soft:linear-gradient(130deg,#DFD7D0 0%,#EEEAE7 48%,#F5F3F2 100%);
  --grad-dark:linear-gradient(165deg,#50372B 0%,#37241B 46%,#211510 100%);
  --grad-metal:linear-gradient(115deg,#8C7462 0%,#685342 52%,#4A3A2E 100%);
  --grad-accent:linear-gradient(115deg,#843229 0%,#6B2821 100%);
  --grad-line:linear-gradient(90deg,rgba(104,83,66,0) 0%,#685342 50%,rgba(104,83,66,0) 100%);
  --grad-folha:linear-gradient(115deg,#8C7462 0%,#685342 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(48,31,23,.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;height:auto}
/* `height:auto` e' OBRIGATORIO: sem ele o atributo height do HTML vence o
   aspect-ratio do CSS e a foto sai em tira vertical no celular. */
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;position:relative;z-index:1}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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;
}

/* ---------- O GABARITO (a grade de projeto) ---------- */
/* A clinica dela e' branca, de marcenaria clara, e ela era quase engenheira:
   o site inteiro assenta sobre uma grade fina, como a planta na mesa. */
.gab{position:relative}
.gab::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(104,83,66,.062) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,rgba(104,83,66,.044) 0 1px,transparent 1px 120px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.85) 14%,rgba(0,0,0,.85) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.85) 14%,rgba(0,0,0,.85) 86%,transparent 100%);
}
.hero.gab::before{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 1px,transparent 1px 120px);
}

/* ---------- 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:#FDF6F3;box-shadow:0 14px 30px -16px rgba(132,50,41,.72)}
.btn--zap:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(132,50,41,.85)}
.btn--linha{border:1px solid var(--line-forte);color:var(--tinta);background:rgba(255,255,255,.42)}
.btn--linha:hover{border-color:var(--taupe);background:rgba(255,255,255,.7)}
/* No HERO o painel e' ESCURO: o contorno com tinta escura sobre o branco 42%
   dava 3,97:1 no desktop e 3,76:1 no mobile (mede_contraste_geral.py, 22/09) —
   abaixo do piso 4,5:1. Aqui a tinta vira clara e o preenchimento quase some. */
.hero .btn--linha{color:#F6EFE8;border-color:rgba(246,239,232,.42);background:rgba(255,255,255,.10)}
.hero .btn--linha:hover{border-color:rgba(246,239,232,.72);background:rgba(255,255,255,.18)}
.btn--claro{background:var(--grad-metal);color:#F7F3F0;box-shadow:0 14px 30px -18px rgba(48,31,23,.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(48,31,23,.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:27px;height:27px;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 ---------- */
.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:#EFE7E0}
.bg-dark h2,.bg-dark h3{color:#F6F1EA}
.bg-dark p{color:#D2C4B9}
.bg-dark a{color:#E9DED4}
.hairline{height:1px;background:var(--grad-line);border:0;margin:0;position:relative;z-index:1}

.section-num{
  font-family:var(--serif);font-size:clamp(64px,9vw,132px);line-height:.8;color:rgba(104,83,66,.15);
  position:absolute;top:clamp(10px,2vw,26px);pointer-events:none;user-select:none;z-index:0;
}
.section-num--dir{right:clamp(10px,3vw,44px)}
.section-num--esq{left:clamp(10px,3vw,44px)}
.bg-dark .section-num{color:rgba(226,174,160,.18)}

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

/* Dados numericos em fonte serifada: a Cormorant Garamond usa numerais OLDSTYLE
   por padrao (o "1" fica na altura-x, com o desenho de um "i"). Medido no ar em
   22/09: o titulo "A sala 1103, na Tijuca" lia-se "A sala 1io3" — e o numero da
   sala e' dado pratico. `lining-nums` devolve a altura de maiuscula ao digito
   sem trocar o desenho da letra. Os .section-num ficam em oldstyle de proposito:
   sao decorativos e grandes, ali o oldstyle e' a assinatura editorial. */
.sec-titulo,.inter__lista li b{font-variant-numeric:lining-nums}

.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:#D2C4B9}
.section-head{position:relative;z-index:1}
.section-head--centro{text-align:center;display:grid;justify-items:center}
.section-head--centro .sec-titulo{max-width:24ch}

/* ---------- O DISCO DE FASE (o objeto da assinatura) ---------- */
/* Um so' objeto visto oito vezes: o mesmo disco, com a sombra da fase
   correspondente. Escuro = --tinta-prof (o fundo do retrato, medido);
   luz = --lua (a pele na luz, medida). */
.fase{display:block;width:100%;height:auto}
.fase__aro{fill:none;stroke:rgba(104,83,66,.42);stroke-width:1.4}
.bg-dark .fase__aro{stroke:rgba(226,174,160,.42)}

/* trilha lateral: a lua que cresce conforme a pagina desce (>=1360px) */
.fase-trilha{display:none}

/* ---------- 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}

@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 giraLento{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes brilhoLinha{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes surgeDisco{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes cresceFase{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- 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-dark)}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(6px)}
.glow--1{
  /* ANCORADO NO CANTO, FORA DA FAIXA DE TEXTO. Medido em diff_disco.py (22/09):
     na posicao antiga (left:-14vw;top:-16vh;760px) ele pintava atras do
     paragrafo do hero — 10.421 px da caixa do texto mudavam (7,13%), o que
     lava o fundo e derruba o contraste do corpo de texto. O blur e' leve, enta'
     o que se via era a propria mancha clara, nao um disco.
     Agora o alcance termina ANTES da linha do paragrafo (y=450 no 1440):
     caixa y=-234..386, e com o pico do pulsaGlow (scale 1,06) o fundo vai no
     maximo a y=405 — 45px de folga. A H1 (74px, display) pode receber a luz. */
  width:clamp(280px,44vw,620px);height:clamp(280px,44vw,620px);left:-16vw;top:-26vh;
  background:radial-gradient(circle,rgba(226,174,160,.22) 0%,rgba(226,174,160,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(132,50,41,.30) 0%,rgba(132,50,41,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;color:#F7F2ED}
.hero h1 em{color:var(--lua-forte);font-style:italic}
.hero__lead{font-size:clamp(17px,1.35vw,19.5px);color:#D9CCC1;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 rgba(226,174,160,.26);font-size:13.5px;color:#D2C4B9;
}
.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)}
.hero__kicker{color:var(--lua-forte)}

/* a moldura do retrato: o arco da fase (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:0 34px 70px -34px rgba(9,5,2,.9);background:var(--grad-dark);width:100%;
  border:1px solid rgba(226,174,160,.30);
}
/* arco na proporcao 2:3 da foto — nao corta o rosto (medido antes de cortar) */
.portrait-frame img{
  width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 22%;
}
.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(247,243,240,.92);border:1px solid rgba(48,31,23,.18);
  font-size:12.5px;letter-spacing:.04em;white-space:nowrap;color:var(--tinta);
}
.portrait-selo b{font-family:var(--serif);font-size:15px;font-weight:500}
/* os discos decoram AO REDOR da moldura, nunca por cima do retrato */
.portrait-fase{position:absolute;z-index:0;pointer-events:none}
.portrait-fase--a{left:-46px;top:6%;width:120px;animation:pulsaGlow 16s var(--ease-casa) infinite}
.portrait-fase--b{right:-38px;bottom:14%;width:104px;animation:pulsaGlow 20s 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(--taupe);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}
/* `margin:0` e' OBRIGATORIO no <figure>: o navegador da' 1em 40px por padrao */
.about__media{position:relative;margin:0}
.about__media img{border-radius:var(--raio-g);box-shadow:var(--sombra);aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
.ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.ficha li{background:rgba(255,255,255,.55);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);z-index:1}
.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,16,10,.44) 0%,rgba(28,16,10,0) 72%);filter:blur(3px);
}
.book-back{
  position:absolute;inset:0;border-radius:3px 8px 8px 3px;
  background:linear-gradient(100deg,#3A2519 0%,#21140C 100%);
  transform:translateZ(-9px);box-shadow:0 14px 30px -18px rgba(20,12,7,.8);
}
.page-block{
  position:absolute;top:5px;bottom:5px;right:-6px;width:11px;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,#D9CFC6 0%,#F5F1EC 40%,#C4B6AA 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(178,166,155,.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,12,7,.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,.30) 100%);
}
.cover-content{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 13px 14px;gap:6px;color:#F6F1EA;overflow:hidden;
  /* SCRIM DE LEITURA (22/09): o texto de cada volume e' claro sobre a imagem da
     capa. No desktop 3 das 6 davam 3,03:1 a 3,36:1, e no CELULAR o rotulo
     pequeno (9,5px) chegava a 2,51:1 — o pior caso do site. Este gradiente
     escurece a METADE DE BAIXO (onde fica todo o texto) e some no topo,
     preservando a trama da capa. */
  background:linear-gradient(to top,
             rgba(20,12,7,.90) 0%,rgba(20,12,7,.82) 44%,
             rgba(20,12,7,.68) 68%,rgba(20,12,7,.28) 88%,rgba(20,12,7,0) 100%);
}
/* O rotulo vinha em --lua-forte (#E2AEA0, rosado de acento): sobre a capa clara
   nao lia. Aqui ele fica quase creme — continua sendo o degrau mais claro da
   hierarquia, mas com contraste medido. */
.cover-kicker{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#F7E9E3}
.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(246,241,234,.80);line-height:1.35;overflow-wrap:break-word}
.cover-footer{
  align-self:flex-start;font-size:10.5px;letter-spacing:.14em;color:rgba(246,241,234,.72);
  border-top:1px solid rgba(246,241,234,.28);padding-top:7px;
}
.cover-badge{
  position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;
  background:rgba(245,243,242,.94);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,.72);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,.75);
}
.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(--taupe)}
.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}

/* ESTADO FECHADO: o painel NAO existe na tela. Sem esta regra ele aparecia
   ABERTO E VAZIO antes de qualquer clique ("Protocolo / Escolha um volume..."),
   visivel no print desktop_estante.jpg de 22/09 — o JS punha `inert` e
   `aria-hidden` mas nada escondia a caixa. */
.shelf[data-mode="closed"] .book-panel{display:none}
.shelf[data-mode="detail"] .book-card:not(.is-selected){display:none}
.shelf[data-mode="detail"] .shelf__hint{display:none}
.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 CICLO (as oito pranchas) ---------- */
/* Ocupa o lugar do "caderno" de outros sites. Cada prancha carrega o disco na
   fase daquele passo: quem rola, ve' a lua crescer. */
.ciclo{
  display:grid;gap:clamp(14px,1.8vw,20px);margin-top:clamp(28px,3.6vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.prancha{
  position:relative;background:rgba(255,255,255,.58);border:1px solid var(--line);
  border-radius:var(--raio);padding:clamp(20px,2.3vw,28px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
}
.prancha__medidor{display:grid;gap:8px;justify-items:center;flex:none}
.prancha__disco{width:52px;height:52px}
.prancha__n{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;color:var(--texto-3);
  white-space:nowrap;
}
.prancha h3{font-size:clamp(19px,1.9vw,24px);margin-bottom:8px}
.prancha p{color:var(--tinta-2);margin:0 0 10px;max-width:60ch}
.prancha__fase{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);
  display:inline-flex;align-items:center;gap:8px;
}
.prancha__fase::before{content:"";width:14px;height:1px;background:var(--acento)}
.prancha__obj{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--texto-3);
}
.prancha__obj b{font-family:var(--serif);font-size:15px;font-weight:500;color:var(--tinta);font-style:normal}

/* ---------- INTERVENCIONISTA / TECNOLOGIA ---------- */
.inter{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4vw,62px);align-items:center}
.inter__media{margin:0}
.inter__media img{border-radius:var(--raio-g);box-shadow:var(--sombra);aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
.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,.55);border:1px solid var(--line);
}
.inter__lista b{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--taupe)}
.inter__lista span{display:block;font-size:14.5px;color:var(--tinta-2)}

/* ---------- DEPOIMENTOS ---------- */
.testi{position:relative;margin-top:clamp(28px,3.6vw,44px);z-index:1}
.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(226,174,160,.28);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:#F7F2ED;
}
.testi-slide footer{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.testi-slide cite{font-style:normal;font-size:14px;color:var(--lua-forte)}
.testi-slide .estrelas{font-size:13px;letter-spacing:2px;color:#D8B98F}
.testi__selo{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#D2C4B9;
  border:1px solid rgba(226,174,160,.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(226,174,160,.45);background:rgba(255,255,255,.07);color:#F2EBE4;
  flex:none;   /* sem isso o flex encolhe a seta abaixo do alvo de toque */
}
.testi__btn:hover{background:rgba(226,174,160,.20)}
.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(242,235,228,.32);display:block;transition:background .3s}
.testi-dots button[aria-current="true"] i{background:var(--lua-forte)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:12px;margin-top:clamp(26px,3.4vw,40px);position:relative;z-index:1}
details.faq{
  background:rgba(255,255,255,.58);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(--taupe);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(--taupe);padding-top:4px}
.where__lista span{display:block}
/* 1 foto por linha no celular: em 2 colunas cada foto ficava com 168px e nao se
   via o ambiente. A partir de 560px volta a 2 colunas. */
.where__fotos{display:grid;grid-template-columns: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,.65)}
.mapa-box{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--raio);padding:20px;
  background:rgba(255,255,255,.55);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,.66);border:1px solid var(--line);border-radius:var(--raio-g);
  padding:clamp(22px,2.8vw,36px);box-shadow:var(--sombra);position:relative;z-index:1;
}
.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,.88);
  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(--taupe);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(--taupe)}
.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 ---------- */
/* O CTA usa --grad-main (CLARO) mas o texto estava com as cores do tema escuro
   (#F7F2ED no titulo, #D2C4B9 no sub, #C6B2A5 na nota): creme sobre creme, com o
   titulo praticamente invisivel no print desktop_agendar.jpg de 22/09. Agora o
   texto usa os tokens escuros da casa. Contraste medido sobre a parada mais clara
   do gradiente (#F0EDEB): titulo --tinta 13,4:1 · sub --tinta-2 7,9:1 ·
   nota --texto-3 4,7:1 · acento --acento 7,3:1 (WCAG AA corpo = 4,5:1). */
.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;color:var(--tinta)}
.cta-titulo em{color:var(--acento);font-style:italic}
.cta-acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.cta-nota{margin-top:26px;font-size:13px;color:var(--texto-3);max-width:60ch}
.cta-nota a{text-decoration:underline;text-underline-offset:3px;color:var(--tinta-2)}
.section--cta .sec-sub{color:var(--tinta-2)}
.section--cta .kicker{color:var(--acento)}
.cta-fase{width:84px;margin:0 auto 8px}

/* ---------- A PLACA (o objeto do rodape) ---------- */
.placa{
  margin:clamp(30px,4vh,46px) auto clamp(18px,2.6vh,28px);
  max-width:660px;text-align:center;padding:clamp(20px,2.6vw,30px) clamp(18px,3vw,34px);
  border-top:1px solid rgba(226,174,160,.42);border-bottom:1px solid rgba(226,174,160,.42);
}
.placa p{
  font-family:var(--serif);font-size:clamp(17px,2.1vw,24px);line-height:1.42;
  letter-spacing:.10em;text-transform:uppercase;color:#F4EDE6;margin:0;
}
.placa cite{
  display:block;font-style:normal;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#B9A79A;margin-top:14px;
}
.placa-eco{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.placa-eco q{font-style:italic;font-family:var(--serif);font-size:16.5px;color:#D2C4B9}

/* ---------- RODAPE ---------- */
.site-footer{position:relative;background:var(--grad-dark);color:#E2D8CF;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:#F6F1EA;margin-bottom:14px}
.rodape-grid p,.rodape-grid li{font-size:14.5px;color:#CBBDAF}
.rodape-grid ul{display:grid;gap:9px}
.rodape-grid a:hover{color:#F6F1EA}
/* `strong{color:var(--tinta)}` e' global e vencia aqui por heranca: "Dra. Luana
   Cabral" saia com tinta escura (#301F17) sobre o gradiente escuro do rodape,
   1,07:1 — invisivel no print desktop_agendar.jpg (22/09). */
.site-footer strong{color:#F6F1EA}
.rodape-marca{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rodape-marca svg{width:36px;height:36px}
.rodape-fases{margin-top:clamp(26px,3.4vh,40px);display:flex;justify-content:center;gap:clamp(6px,1.2vw,14px);flex-wrap:wrap}
.rodape-fases svg{width:clamp(20px,2.2vw,26px);height:auto;opacity:.78}
.footer-base{
  margin-top:26px;border-top:1px solid rgba(226,174,160,.26);padding:22px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;font-size:13px;color:#BBAE9F;
}
.footer-base a{text-decoration:underline;text-underline-offset:3px}
.credito{display:inline-flex;align-items:center;gap:7px}
.credito a{color:#DED3C6;text-decoration:underline}

/* ---------- COOKIE + FAB + TOPO ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:linear-gradient(165deg,#50372B 0%,#37241B 46%,#211510 100%);
  color:#EDE3D9;padding:16px 0;border-top:1px solid rgba(226,174,160,.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:#D2C4B9}
.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(237,227,217,.5);color:#EDE3D9;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:#FDF6F3;
  box-shadow:0 16px 34px -14px rgba(132,50,41,.7);
  transition:transform .35s var(--ease),bottom .35s var(--ease),opacity .25s 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 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. Entao o FAB so' entra depois que a pessoa
   decide sobre os cookies — a barra fecha em um toque. */
html.com-cookie .fab{display:none}
html.com-cookie .to-top{display:none}
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(245,243,242,.93);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}
/* `.flut-escondido` e' posto pelo effects.js quando um botao/CTA passa por baixo
   do flutuante. Vem DEPOIS de `.to-top.is-visivel` de proposito. */
.fab.flut-escondido,.to-top.flut-escondido{opacity:0;pointer-events:none}

/* ---------- BREAKPOINTS ---------- */
@media (min-width:560px){
  .shelf-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .testi__ctrl{margin-top:8px}
  .where__fotos{grid-template-columns:1fr 1fr}
}
@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(100%,380px);align-items:flex-start}
  .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}
  .to-top{left:16px}
  /* A seta "voltar ao topo" SAI no celular: o padrao da casa aprovado (Jessica)
     so' tem o FAB flutuando no mobile. */
  .to-top{display:none}
  /* SELO DE AVALIACOES x FAB. Medido em confere_3_pontos_ar.py (22/09): com o
     selo centralizado ele terminava em x=311 e o FAB comeca em x=312 — 1px de
     folga, ou seja, colados. A lei da casa manda nunca colidirem. Alinhado a'
     esquerda no celular, sobra folga larga em 360/375/390/414 e ele fica
     alinhado com o botao do CTA logo abaixo. */
  .portrait-selo{margin-left:0;margin-right:0}
}
@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)}
  .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))}
  .ciclo{grid-template-columns:repeat(2,minmax(0,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}
}

/* ---------- 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,.placa p,.placa cite{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}
  .gab::before{display:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}

/* ============================================================================
   A TRILHA DE FASES — a assinatura (ver js/effects.js)
   A lua que cresce conforme a leitura desce: ela vive na margem, FORA da coluna
   de texto, e so' aparece quando existe margem livre (>=1360px).

   DUAS CORRECOES MEDIDAS EM 22/09 (nao mexer sem medir de novo):
   1. `overflow:hidden` no svg, NAO `visible`. A luz da lua e' desenhada em
      cx = 40 + 2R = 108, com r = 34, num viewBox de largura 80: ou seja, ela
      vai ate' x=142, MUITO fora do viewBox. Com `visible` o navegador pintava
      essa parte fora da caixa de 56px — a escala era 0,7, entao ela chegava a
      ~117px da margem, e o texto das secoes comeca em x=100. FOI ASSIM que o
      disco cobriu a palavra "ENDEREÇO" em "onde atendo". Com `hidden` a luz e'
      recortada na propria caixa, o que da' a fase correta: em p=0,5 (lua cheia,
      cx=40) ela cobre o disco inteiro; em p=0 ou 1 ela sai e sobra a face
      escura (lua nova).
   2. `left` ancorado em --wrap, nao mais em numeros soltos (50vw - 590px - 44px
      supunha --wrap=1180 e uma trilha de 44px, mas ela tem 56px).
      left = 50vw - wrap/2 - 56px - 26px de folga.
      Conferido: 1360 -> coluna 90, trilha 8..64; 1440 -> coluna 100, trilha
      18..74; 1600 -> coluna 180, trilha 98..154. Folga de 26px nas tres.
   ========================================================================= */
@media (min-width:1360px){
  .fase-trilha{
    display:block;position:fixed;z-index:3;pointer-events:none;
    /* ANCORADA NA COLUNA, com numero medido (22/09):
       A formula antiga (50vw - 590px - 44px) supunha --wrap=1180 e uma trilha
       de 44px, mas ela tem 56px de largura: em 1440 a coluna comeca em x=100 e a
       trilha ia de 86 a 142, ou seja 42px DENTRO do texto (foi assim que ela
       cobriu a palavra "ENDEREÇO" na secao "onde atendo").
       Agora a trilha termina 26px ANTES da coluna em qualquer largura:
         left = 50vw - wrap/2 - 56px(largura) - 26px(folga)
       Conferido em 1360 (coluna 90, trilha 8..64), 1440 (coluna 100, trilha
       18..74) e 1600 (coluna 180, trilha 98..154): folga de 26px nas tres. */
    left:calc(50vw - (var(--wrap) / 2) - 82px);top:50%;
    transform:translateY(-50%);
    width:56px;opacity:.9;
    transition:opacity .5s var(--ease-casa);
  }
  .fase-trilha svg{display:block;width:56px;height:min(560px,72vh);overflow:hidden}
  .fase-trilha .aro{fill:none;stroke:rgba(104,83,66,.34);stroke-width:1.1}
  .fase-trilha .fase-i{transition:opacity .5s var(--ease-casa)}
  /* sobre a faixa escura (depoimentos) a trilha troca de tom para nao sumir */
  html.fase-escura .fase-trilha .aro{stroke:rgba(226,174,160,.40)}
}
@media (prefers-reduced-motion:reduce){
  .fase-trilha,.fase-trilha .fase-i{transition:none !important}
}