:root{--doxa-couch:url('/img/site/textura-sofa.webp');--purple:#614468;--purple-dark:#3E2A45;--purple-nav:#614468;--purple-light:#8A7A90;--lavender:#F7F3F8;--lavender-mid:#EDE5EF;--gold:#B58B2D;--gold-light:#D8A94B;--green:#3F694C;--green-light:#4E7A5B;--white:#EDE5EF;--text-dark:#2A1F2D;--text-mid:#5E5363;--text-light:#8A7A90;--border:#DCD0DF;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:'Roboto',sans-serif;background:var(--white);color:var(--text-dark);overflow-x:hidden;}
.page{display:none;}.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatBlob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-20px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,15px)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes navIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);}
.reveal.left{transform:translateX(-36px);}.reveal.right{transform:translateX(36px);}
.reveal.visible{opacity:1;transform:none;}
.d1{transition-delay:.08s!important}.d2{transition-delay:.18s!important}.d3{transition-delay:.28s!important}.d4{transition-delay:.40s!important}.d5{transition-delay:.52s!important}.d6{transition-delay:.62s!important}
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--purple-nav);display:flex;align-items:center;justify-content:space-between;padding:.75rem 5%;transition:padding .3s,box-shadow .3s;animation:navIn .6s cubic-bezier(.22,1,.36,1) both;border-bottom:1.5px solid var(--gold);}
.nav-logo{height:70px;width:auto;display:block;}
nav.scrolled{padding:.45rem 5%;box-shadow:0 4px 24px rgba(74,50,114,.35);}
.nav-links{display:flex;gap:2rem;list-style:none;margin-left:auto;}
.nav-links a{font-size:.943rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92);text-decoration:none;position:relative;padding-bottom:2px;transition:color .2s;cursor:pointer;}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.nav-links a:hover,.nav-links a.active-link{color:var(--gold-light);}
.nav-links a:hover::after,.nav-links a.active-link::after{transform:scaleX(1);}
.hero-trust-group{display:flex;flex-direction:column;height:100vh;height:100svh;}
.hero{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:safe center;background:#000;}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;opacity:.75;}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,3,20,.6) 0%,rgba(40,20,70,.4) 60%,rgba(10,3,20,.55) 100%);z-index:1;}
.blob{display:none;}
.blob-1,.blob-2,.blob-3{display:none;}
.blob-1{width:500px;height:500px;background:var(--purple-light);top:-100px;right:-100px;animation:drift1 12s ease-in-out infinite;}
.blob-2{width:350px;height:350px;background:var(--gold);bottom:-80px;left:-80px;animation:drift2 9s ease-in-out infinite;}
.blob-3{width:200px;height:200px;background:var(--purple-light);top:40%;left:30%;animation:drift1 15s ease-in-out 3s infinite;}
/* O bloco de texto ocupa a metade esquerda do vídeo, onde o fundo é liso: a
personagem e o tablet estão à direita, e antes o parágrafo chegava a passar
por cima do rosto em telas largas. O topo respeita o menu fixo e a base
respeita a barra de vantagens; entre os dois, o `align-items:center` do
.hero distribui a sobra. */
/* O bloco sobe e cresce. O respiro do topo caiu de 13vh para 9,5vh: o texto
começa mais perto do menu, e o que sobra embaixo vira folga até a barra de
vantagens em vez de vazio no alto. A coluna foi de 56% para 52% da largura —
mais estreita, o que empurra a quebra do título para mais cedo e libera o
rosto da personagem à direita. */
.hero-content{position:relative;z-index:3;padding:clamp(5rem,9.5vh,7.5rem) 7% clamp(3rem,7vh,5rem);max-width:min(920px,52%);width:100%;}
.hero-br-wide{display:inline;}
/* Par do .hero-br-wide, para o outro extremo: quebras que valem SÓ no celular
(ligado no bloco @media(max-width:640px)). Existe porque o desktop e o
celular querem cortes em pontos diferentes da mesma frase, e no tablet
(641–1024px) os dois ficam desligados e o texto flui sozinho.
ATENÇÃO ao editar o HTML: todo destes dois tipos precisa de um ESPAÇO
antes dele. Quando a media query desliga o com display:none, é esse
espaço que separa as palavras — sem ele, "para você," e "agende" viram
"para você,agende" no aparelho onde a quebra está desligada. Foi exatamente
esse o bug corrigido em 31/07/2026 no subtítulo do hero. */
.hero-br-mob{display:none;}
/* QUEBRAS DO TÍTULO BRANCO — LIGADAS POR PADRÃO (31/07/2026).
O desenho aprovado é o mesmo no celular e no desktop: "A DOXA conecta /
você a psicólogos / qualificados / e confiáveis.". Antes eu dependia do
tamanho da fonte para o texto quebrar sozinho nesses pontos, e isso nunca
se sustentou: em monitor largo a linha cabia inteira e virava 3 linhas; ao
aumentar a fonte para forçar a quebra, o título estourava a altura do hero
e cortava os botões. Fonte não é o instrumento certo para controlar onde a
frase quebra — é.
Ficam DESLIGADAS só na faixa de tablet (641–1024px), onde a coluna tem
outra largura e o texto se organiza melhor fluindo sozinho. */
.hero-br-h1{display:inline;}
@media(min-width:641px) and (max-width:1024px){ .hero-br-h1{display:none;} }
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;animation:fadeLeft .8s cubic-bezier(.22,1,.36,1) .3s both;}
.hero-h1{font-family:'Roboto',sans-serif;font-size:clamp(2.2rem,5.4vw,4.55rem);font-weight:700;line-height:1.12;color:var(--white);margin-bottom:1.15rem;}
.hero-h1 .gold{color:var(--gold-light);font-style:italic;}
.hero-h1 .line1{display:block;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .45s both;margin-bottom:.5rem;}
.hero-h1 .line2{display:block;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .58s both;}
/* Sem teto de largura no desktop: as quebras agora são as do , e um
`max-width` estreito criaria uma quarta quebra por cima delas. O
`hero-br-wide` já some abaixo de 1024px, onde o texto volta a fluir. */
.hero-sub{font-size:clamp(1.02rem,1.35vw,1.28rem);color:rgba(255,255,255,.88);max-width:none;margin-bottom:1.4rem;line-height:1.65;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .72s both;}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .86s both;}
.hero-btns-wrap{display:contents;}
.hero-top-group{display:contents;}
.btn-green{background:var(--green);color:var(--white);padding:.85rem 2rem;border-radius:100px;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:background .2s,transform .15s,box-shadow .2s;cursor:pointer;border:none;font-family:'Roboto',sans-serif;}
.btn-green:hover{background:var(--green-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(58,138,79,.35);}
.btn-gold{background:var(--gold);color:var(--text-dark);padding:.85rem 2rem;border-radius:100px;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:background .2s,transform .15s;cursor:pointer;border:none;font-family:'Roboto',sans-serif;}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);}
.btn-purple{background:var(--purple-dark);color:var(--white);padding:.65rem 1.4rem;border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:background .2s,transform .15s;cursor:pointer;border:none;font-family:'Roboto',sans-serif;}
.btn-purple:hover{background:var(--purple);transform:scale(1.04);}
.btn-dark{background:var(--purple-dark);color:var(--white);padding:.85rem 2.5rem;border-radius:8px;font-size:.9rem;font-weight:700;border:none;cursor:pointer;font-family:'Roboto',sans-serif;transition:background .2s,transform .15s;align-self:flex-start;}
.btn-dark:hover{background:var(--purple);transform:translateY(-1px);}
.trust-strip{background:var(--purple-dark);overflow:hidden;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);flex-shrink:0;}
.trust-marquee-wrap{overflow:hidden;padding:1rem 0;}
@media(min-width:901px){.trust-marquee-wrap{padding:.8rem 0;}}
.trust-marquee{display:flex;width:max-content;animation:marquee 22s linear infinite;}
.trust-item{display:flex;align-items:center;gap:.65rem;padding:0 2.5rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);white-space:nowrap;border-right:1px solid rgba(255,255,255,.12);}
.trust-dot{color:var(--gold);font-size:1.4rem;padding:0 2rem;}
/* ===================== PRIMEIRA VEZ (redução de estigma) =====================
Fala com quem ainda está hesitando, não com quem já decidiu. Tom factual e
acolhedor; nada de promessa de resultado nem urgência (limites do CFP).
Vive num modal (mesmo padrão do quiz), aberto pelo gancho do hero. */
.pv-eyebrow{display:inline-block;color:var(--gold);font-family:'Roboto',sans-serif;font-size:.92rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;line-height:1.3;}
.pv-modal-h{font-family:'Roboto',sans-serif;font-size:1.35rem;color:var(--purple);font-weight:700;margin:.5rem 0 .4rem;line-height:1.3;text-wrap:balance;}
.pv-modal-sub{color:var(--text-mid);font-size:.88rem;line-height:1.65;margin:0 0 1.2rem;text-wrap:pretty;}
.pv-modal-cards{display:flex;flex-direction:column;gap:.8rem;margin:0 0 1.4rem;}
.pv-card{background:var(--lavender);border:1px solid var(--purple);border-radius:18px;padding:1.1rem 1.15rem;text-align:left;display:flex;flex-direction:column;gap:.45rem;}
.pv-card strong{color:var(--purple);font-family:'Roboto',sans-serif;font-size:.92rem;line-height:1.45;}
.pv-card p{font-size:.84rem;color:var(--text-mid);line-height:1.6;margin:0;text-wrap:pretty;}
.pv-cta-nota{font-size:.78rem;color:var(--text-light);}
/* Gancho de uma linha no hero, embaixo dos botões */
.hero-primeira-vez{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.88);font-family:'Roboto',sans-serif;font-size:.85rem;text-decoration:underline;text-underline-offset:4px;margin-top:1rem;min-height:44px;padding:.4rem .8rem;transition:color .2s;}
.hero-primeira-vez:hover{color:#fff;}
/* TABLET (iPad retrato, Android 10"): a coluna de 56% ficaria estreita demais
e o título quebraria em cinco linhas. Aqui o texto volta a usar a largura
toda, porque nesta proporção a personagem já sai quase inteira do quadro. */
@media(min-width:641px) and (max-width:1024px){
.hero-content{max-width:none;padding:clamp(6rem,12vh,8.5rem) 7% clamp(2rem,5vh,3.5rem);}
.hero-h1{font-size:clamp(2.42rem,5.98vw,3.57rem);line-height:1.14;}
.hero-sub{font-size:1.17rem;max-width:46ch;line-height:1.6;}
.hero-btns{gap:.8rem;}
.hero-br-wide{display:none;}
}
/* Só no desktop de verdade (pedido 31/07/2026).
PROPORÇÃO ENTRE AS DUAS LINHAS DO TÍTULO. A primeira versão encolhia só a
dourada (.85em) e deixava a branca em 1em — o efeito colateral era que a
dourada, que é a promessa da marca, virava a MENOR das duas, invertendo a
hierarquia em relação ao celular (onde a branca é que é menor, .78em).
Agora o ajuste é dos dois lados: a dourada volta ao seu tamanho de projeto
(1em) e quem cede é a branca (.9em). O bloco todo continua mais baixo do
que era — que é o ganho de espaço que se queria —, mas a ordem de leitura
passa a ser a mesma nos dois aparelhos: dourada maior, branca menor.
O parágrafo também fica mais colado nos botões, com o mesmo respiro que já
existe entre os botões e o gancho "Nunca fez terapia?". */
@media(min-width:1025px){
/* TAMANHO AMARRADO TAMBÉM À ALTURA DA JANELA (31/07/2026).
O que aconteceu: com as quebras manuais novas, o título passou a ocupar
até 7 linhas no desktop (3 da dourada + 4 da branca). Como o hero tem
altura FIXA (100svh) e `overflow:hidden`, o excedente não gerou rolagem —
ele CORTOU os botões de CTA, que sumiram da tela.
O `clamp` antigo só olhava a largura (5.4vw até 4.55rem), e largura não
diz nada sobre quantas linhas cabem. Agora o valor do meio é
`min(3.5vw, 6vh)`: em monitor largo mas baixo — notebook de 1366x768, que
é onde o problema apareceu — quem limita passa a ser a altura, e o texto
encolhe sozinho até caber. Em tela alta ele volta a crescer até o teto.
É isto que impede o corte de voltar se alguém acrescentar mais uma quebra
depois. Não trocar por um clamp só de largura. */
/* A ESCALA SUBIU DEPOIS QUE A ALTURA FICOU PREVISÍVEL.
Histórico, porque a razão importa: enquanto as quebras dependiam da
fonte, cada aumento mudava o número de linhas e a altura era impossível
de prever — por isso este valor nasceu conservador (6vh), o que deixou o
texto menor que a referência aprovada. Com as quebras fixas em , o
título tem SEMPRE 4 linhas brancas e 2 douradas, então a altura vira uma
conta fechada e a fonte pode crescer até o limite real.
De 7vh para 7.9vh (~13%). Medi a folga que sobrava entre o gancho
"Nunca fez terapia?" e a barra de vantagens em ~72px; este aumento
consome ~41px e deixa ~30px de reserva. É o teto prudente: acima disso a
reserva some e volta o risco de corte. */
.hero-h1{font-size:clamp(1.9rem, min(4.2vw, 7.9vh), 4.2rem);}
.hero-h1 .line2{font-size:.9em;}
.hero-sub{margin-bottom:1rem;}
}
/* JANELA DE DESKTOP BAIXA: SOLTA AS QUEBRAS.
Com as quatro linhas fixas, o título ocupa uma altura previsível — e é
justamente isso que permite calcular se ele cabe. A conta: o conteúdo do
hero precisa de ~6,3x o tamanho da fonte mais ~220px fixos, contra uma
altura útil de ~0,9 da janela menos 83px. Abaixo de ~660px de janela essa
conta não fecha, e o resultado seria o corte dos botões de novo.
Em vez de encolher mais a fonte (que ficaria pequena demais), aqui as
quebras são liberadas: o texto volta a fluir e ocupa menos linhas, que é
exatamente a folga necessária.
O limite subiu de 660px para 740px junto com o aumento da fonte: texto
maior come a folga mais cedo, então a faixa de janelas que precisa desta
liberação ficou maior. Se um dia a fonte subir de novo, este número sobe
junto — os dois andam sempre na mesma direção. */
@media(min-width:1025px) and (max-height:740px){
.hero-br-h1{display:none;}
}
/* Monitor grande: sobra espaço vertical de verdade, então o texto cresce em
vez de ficar uma ilha pequena no meio do vídeo. */
@media(min-width:1600px){
.hero-content{max-width:min(1020px,50%);padding-top:clamp(8rem,15vh,11rem);}
}
/* iOS: `100vh` no Safari inclui a barra de endereço que some ao rolar, e a
barra de vantagens ficava cortada na primeira tela. `100svh` já é usado no
grupo; aqui só garantimos que o conteúdo não force altura maior que ela. */
@supports (height:100svh){
.hero-trust-group{height:100svh;}
}
@media(max-width:760px){
.hero-primeira-vez{font-size:.82rem;margin-top:.6rem;}
.pv-card{padding:1rem .95rem;}
/* Mesmo respiro de área segura que o modal do quiz tem no celular */
#primeira-vez-modal-overlay{padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom)) !important;}
}
.find-section{background:var(--lavender);padding:6rem 7%;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.find-h2{font-family:'Roboto',sans-serif;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;line-height:1.2;color:var(--purple);margin-bottom:1rem;}
.find-text{font-size:1rem;color:var(--text-mid);line-height:1.8;margin-bottom:1rem;}
.price-tag{font-family:'Roboto',sans-serif;font-style:italic;font-size:1.4rem;font-weight:700;color:var(--purple);margin-bottom:1.5rem;display:block;}
.ornament-line{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;color:var(--purple);}
.ornament-line hr{flex:1;min-width:0;margin:0;border:none;border-top:1px solid var(--border);}
.ornament-sym{font-size:1.5rem;}
/* Variante dourada, usada pra abrir e fechar a seção de prova social.
As linhas usam gradiente que some nas pontas em vez de um traço reto de
ponta a ponta: o traço reto e uniforme ficava pesado e ao mesmo tempo
apagado no meio da faixa clara. A largura é limitada aqui (não por style
inline) pra ficar centralizado sem depender de margin auto no HTML. */
.ornament-gold{max-width:620px;margin:0 auto 2.6rem;gap:1.2rem;}
.ornament-gold hr{border-top:none;height:1px;background:linear-gradient(90deg,transparent,rgba(181,139,45,.55),transparent);}
.ornament-gold .ornament-sym{color:var(--gold);font-size:1.35rem;line-height:1;opacity:.95;}
/* Quando fecha a seção, o respiro vai em cima em vez de embaixo. */
.ornament-fim{margin:3rem auto 0;}
/* -15% na escala (pedido 02/08). A largura é 85% da coluna e a imagem fica
centrada nela: mexer só na largura basta porque o `aspect-ratio:4/3` faz a
altura acompanhar sozinha, sem deformar nem cortar nada de novo. */
.illus-wrap{width:85%;margin-left:auto;margin-right:auto;border-radius:24px;overflow:hidden;box-shadow:0 24px 64px rgba(74,50,114,.2);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;aspect-ratio:4/3;}
.illus-wrap:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 36px 80px rgba(74,50,114,.28);}
.illus-wrap img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.illus-wrap-tall{border-radius:20px 100px 20px 20px;overflow:hidden;box-shadow:0 20px 56px rgba(74,50,114,.18);transition:transform .4s cubic-bezier(.22,1,.36,1);aspect-ratio:3/4;}
.illus-wrap-tall:hover{transform:translateY(-6px);}
.illus-wrap-tall img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
@media(min-width:901px){.mission-section .illus-wrap-tall{width:80%;margin:0 auto;}}
.pros-section-home{background:var(--lavender-mid);padding:5rem 7%;}
.pros-carousel-wrap{position:relative;display:flex;align-items:center;gap:.75rem;}
.pros-grid-home{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:.25rem;padding:.5rem .25rem 1.2rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;min-width:0;}
.pros-grid-home::-webkit-scrollbar{display:none;}
.pros-grid-home .pro-card-home{flex:0 0 275px;scroll-snap-align:start;}
/* As setas laterais foram removidas: no celular o gesto de arrastar já é
natural, e no computador os cinco cartões cabem na largura (regra abaixo),
então elas não tinham mais função em tela nenhuma. */
@media(max-width:768px){
.pros-grid-home{gap:1rem;scroll-padding-left:5%;padding:.5rem 5% 1.2rem;margin:0 -5%;}
.pros-grid-home .pro-card-home{flex:0 0 80vw;}
}
/* Faixa de TABLET (769-1024px, cobre iPad em retrato e a maioria dos Android
de 10"). Antes desta regra existia um vão real entre max-width:768/900px
(onde o site vira "celular") e min-width:1200px (onde ganha reforços de
desktop grande): de 769 a 1199px nada era pensado especificamente, e o
carrossel de profissionais rodava com card de 275px, cabendo só ~2,5 por
vez visíveis de uma vez - apertado e com sensação de quebra num tablet em
pé. Cards um pouco menores cabem 3 inteiros sem cortar o quarto pela
metade. Ver preferências: considerar sempre a faixa de tablet daqui pra
frente, não só celular/desktop. */
@media(min-width:769px) and (max-width:1024px){
.pros-grid-home .pro-card-home{flex:0 0 230px;}
.pro-card-home{padding:2rem 1.4rem;}
}
.pro-card-home{background:var(--white);border-radius:20px;padding:2.4rem 1.8rem;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid rgba(107,79,160,.1);box-shadow:0 4px 20px rgba(74,50,114,.07);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;cursor:pointer;position:relative;overflow:hidden;}
.pro-card-home:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(74,50,114,.15);}
.pro-card-home::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);background-size:200%;opacity:0;pointer-events:none;transition:opacity .3s;}
.pro-card-home:hover::before{opacity:1;animation:shimmer .65s ease forwards;}
.pro-card-img-home{width:188px;height:188px;border-radius:50%;overflow:hidden;margin:0 auto 1.2rem;border:2px solid var(--gold);background:var(--foto-luz);}
.pro-card-img-home svg{width:100%;height:100%;}
.pro-info-home{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
/* NOME EM DUAS LINHAS, JUNTAS (pedido 02/08): sem line-height explícito o
navegador usava o padrão (~1.5), e um nome de 4 ou 5 partes quebrava com um
vão largo no meio, lendo como duas informações. `balance` reparte as
palavras entre as linhas em vez de deixar uma órfã embaixo.
NOME COMPRIDO QUEBRA SEMPRE (segunda leva, 02/08). Antes a quebra dependia
só da largura do cartão: "Olimpio Andre dos Santos Monteiro" estourava e
quebrava, "Isabella Cristina Ribeiro Souza" cabia raspando numa linha só, e
os cartões vizinhos ficavam com abordagem, CRP e botão em alturas
diferentes. O `max-width` de 17ch força a quebra bem antes da borda.
O 17ch não é chute: o nome mais longo do elenco é "Júlio César Thales
Santos de Pedro", cujo maior pedaço depois do balanceamento é
"Júlio César Thales" — que cabe em 17ch. Passar disso deixaria nomes em
uma linha; ficar abaixo jogaria os mais longos para TRÊS linhas.
O `min-height` de duas linhas fecha o serviço: mesmo um nome curto, que
continua numa linha só, ocupa a mesma altura, então tudo que vem depois
nasce na mesma altura em todos os cartões da fileira. */
.pro-name-home{font-family:'Roboto',sans-serif;font-size:1.2rem;font-weight:700;color:var(--purple-dark);margin-bottom:.16rem;line-height:1.18;min-height:2.36em;max-width:min(100%,17ch);text-wrap:balance;overflow-wrap:break-word;}
/* `max-width:22ch` forçava quebra mesmo quando havia espaço; com uma abordagem
por linha ele não é mais necessário e só atrapalhava.
Abordagem e CRP viraram um bloco só (pedido 02/08): o vão entre os dois caiu
para quase nada, e o conjunto ficou mais perto do NOME (.16rem acima) do que
do botão (1,15rem abaixo), que é a leitura pedida. */
.pro-spec-home{font-size:.82rem;color:var(--text-mid);font-weight:600;margin-bottom:.04rem;line-height:1.45;max-width:100%;}
/* CRP discreto sob a abordagem: menor e mais claro que ela, mas legivel.
Ele herda o 1rem de respiro que era da abordagem, para o card nao crescer. */
.pro-crp-home{font-size:.72rem;color:var(--text-light);font-weight:500;letter-spacing:.02em;margin-bottom:1.15rem;line-height:1.3;margin-top:0;}
.abordagem-linha{display:block;}
.abordagem-linha + .abordagem-linha{margin-top:2px;}
.mission-section{background:var(--lavender);padding:6rem 7%;display:grid;grid-template-columns:1fr 1.5fr;gap:5rem;align-items:center;}
.mission-h2{font-family:'Roboto',sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;line-height:1.2;color:var(--purple);margin-bottom:1.2rem;}
.mission-text-p{font-size:1rem;color:var(--text-mid);line-height:1.85;margin-bottom:.75rem;}
/* Frase sobre formação contínua dos profissionais some em mobile/tablet
(pedido 31/07/2026): sem problema ético em variar o texto por dispositivo
aqui, é só uma diferença de quanto detalhe cabe na tela — o essencial da
missão (acesso simples, seguro e humanizado) continua em todos. */
@media(max-width:1024px){
.mission-text-extra{display:none;}
}
.mission-link{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);text-decoration:none;border-bottom:1px solid var(--purple);}
.sec-label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-light);margin-bottom:.5rem;}
.faq-section{background:var(--white);padding:6rem 7%;display:grid;grid-template-columns:1fr 1.6fr;gap:5rem;align-items:start;}
.faq-label{font-family:'Roboto',sans-serif;font-size:2.2rem;font-weight:700;color:var(--purple-dark);line-height:1.1;}
.faq-label .normal{display:block;font-weight:400;color:var(--text-dark);}
.faq-sub{font-size:.95rem;color:var(--text-mid);margin:.75rem 0 1.5rem;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;cursor:pointer;gap:1rem;transition:color .2s;}
.faq-q:hover{color:var(--purple);}
.faq-q h3{font-size:1.12rem;font-weight:600;}
.faq-chevron{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--purple);transition:transform .3s,background .2s;font-size:.9rem;font-weight:700;}
.faq-chevron.open{transform:rotate(45deg);background:var(--purple);border-color:var(--purple);color:white;}
.faq-answer{font-size:1rem;color:var(--text-mid);line-height:1.8;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),padding .3s;}
.faq-answer.open{max-height:300px;padding-bottom:1.2rem;}
/* Bloco expansivel: as 4 duvidas que mais pesam na decisao ficam abertas na
pagina e o resto vem atras de uma seta. Lista longa de sanfonas fechadas
custa atencao e empurra o contato para baixo da dobra. */
.faq-mais{display:flex;align-items:center;gap:.5rem;margin-top:1.4rem;background:none;border:0;padding:.7rem 0;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;color:var(--purple);transition:opacity .2s;}
.faq-mais:hover{opacity:.72;}
.faq-mais-seta{display:inline-block;transition:transform .3s;font-size:.85rem;}
.faq-mais[aria-expanded="true"] .faq-mais-seta{transform:rotate(180deg);}
.faq-extras[hidden]{display:none;}
.contact-section{background:var(--white);padding:6rem 7%;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.contact-h2{font-family:'Roboto',sans-serif;font-size:2rem;font-weight:700;color:var(--purple-dark);margin-bottom:.5rem;}
.contact-sub{font-size:1rem;color:var(--text-mid);margin-bottom:1.5rem;}
.contact-label{font-size:1rem;font-weight:700;color:var(--text-dark);margin-bottom:1rem;}
.contact-form{display:flex;flex-direction:column;gap:1.1rem;}
.contact-form .btn-dark{border-radius:100px;padding:.9rem 2.8rem;margin-top:.4rem;}
.contact-form button[type="submit"]{align-self:center;}
.contact-form input,.contact-form textarea{width:100%;border:none;outline:none;background:#F1EDF8;border-radius:12px;padding:.9rem 1.2rem;font-family:'Roboto',sans-serif;font-size:1rem;color:var(--text-dark);transition:background .2s,box-shadow .2s;}
.contact-form input:focus,.contact-form textarea:focus{background:#E8E0F5;box-shadow:0 0 0 2px var(--purple-light);}
.contact-form textarea{min-height:120px;resize:vertical;}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-light);}
.contact-imgs{position:relative;}
/* -20% na escala (85% -> 68% da coluna). */
.contact-img-main{width:68%;border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgba(74,50,114,.18);margin-left:auto;aspect-ratio:4/3;transition:transform .4s;}
.contact-img-main:hover{transform:translateY(-5px);}
.contact-img-main img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
/* -10% na escala (60% -> 54%). A sobreposição com a imagem de cima se
mantém porque as duas encolheram e as margens negativas continuam iguais. */
/* Sobreposição maior sobre a imagem de cima (pedido 02/08): -3rem virou
-5.2rem, e a foto andou para a direita (9%) para o encaixe cair sobre o
canto da imagem principal, que é alinhada à direita, em vez de sobrar
pendurada no vazio da esquerda. */
.contact-img-secondary{width:54%;border-radius:16px;overflow:hidden;box-shadow:0 12px 32px rgba(74,50,114,.15);margin-top:-5.2rem;margin-left:9%;position:relative;z-index:2;aspect-ratio:4/3;transition:transform .4s;}
.contact-img-secondary:hover{transform:translateY(-4px) rotate(1deg);}
.contact-img-secondary img{width:100%;height:100%;object-fit:cover;display:block;}
footer{background:var(--white);border-top:1px solid var(--border);padding:3rem 7%;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;align-items:start;}
.footer-brand-name{font-family:'Roboto',sans-serif;font-size:1.3rem;font-weight:700;color:var(--purple-dark);margin-bottom:.5rem;}
.footer-brand-tag{font-size:.8rem;color:var(--text-light);margin-bottom:.75rem;}
footer h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light);margin-bottom:1rem;}
footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
footer ul a{font-size:.88rem;color:var(--text-mid);text-decoration:none;transition:color .2s;cursor:pointer;}
footer ul a:hover{color:var(--purple);}
.footer-bottom{background:var(--purple);border-top:1.5px solid var(--gold);padding:1rem 7%;display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.5);}
/* AGENDA */
#page-agenda{background:var(--lavender);}
.agenda-hero{position:relative;min-height:400px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:106px 1.2rem 2.2rem;border-bottom:1px solid var(--gold);}
/* O segundo valor é o eixo vertical. DIMINUIR faz a foto descer (corta menos
do topo), AUMENTAR faz subir. Estava em 12% e a cabeça dela ficava atrás do
menu fixo; 4% desce cerca de 45px numa tela de 1440px. O mínimo útil é 0%. */
.agenda-hero-bg{position:absolute;inset:0;background-image:var(--doxa-couch);background-size:cover;background-position:right top;background-repeat:no-repeat;background-color:var(--purple-dark);}
.agenda-hero-overlay{position:absolute;inset:0;background:rgba(97,68,104,.7);}
.agenda-hero-title{position:relative;z-index:2;font-family:'Roboto',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:white;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.55);}
.filters-section{background:var(--lavender);padding:2.5rem 7%;}
.filters-wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;max-width:880px;margin:0 auto;justify-content:center;align-items:center;}
.filter-input{border:1.5px solid var(--border);border-radius:12px;padding:.75rem 1.1rem;font-family:'Roboto',sans-serif;font-size:1rem;color:var(--text-dark);background:var(--white);outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none;width:100%;}
.filter-input:focus{border-color:var(--purple-light);box-shadow:0 0 0 2px rgba(139,107,190,.2);}
.filter-select-wrap{position:relative;}
.filter-select-wrap::after{content:'v';position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:.85rem;pointer-events:none;}
.agenda-pros-wrap{padding:1.5rem 7% 4rem;}
.agenda-pros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:1.5rem;}
.agenda-pro-card{background:var(--white);border-radius:20px;padding:2.2rem;display:flex;align-items:center;gap:1.8rem;border:1px solid rgba(107,79,160,.1);box-shadow:0 4px 16px rgba(74,50,114,.06);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;cursor:pointer;position:relative;overflow:hidden;}
.agenda-pro-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(74,50,114,.14);}
.agenda-pro-card::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);background-size:200%;opacity:0;pointer-events:none;transition:opacity .3s;}
.agenda-pro-card:hover::before{opacity:1;animation:shimmer .65s ease forwards;}
.agenda-pro-photo{width:176px;height:176px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--gold);background:var(--foto-luz);position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;}
/* LUZ DE ESTÚDIO DENTRO DO CÍRCULO.
As fotos dos profissionais têm fundo transparente, então o `background` do
próprio aparece ATRÁS da pessoa. Trocando o roxo chapado por um
gradiente, ganha-se o mesmo efeito do hero do perfil sem elemento extra
nenhum — e vale para qualquer miniatura que use esta variável.
A luz não é centrada: o foco fica a 78% da altura, na linha do tronco, e
levemente à esquerda (46%). Centrada no meio do círculo ela lê como auréola
atrás da cabeça; embaixo e de lado, lê como luz de estúdio.
Fotos sem transparência simplesmente ignoram isto, sem prejuízo. */
:root{
/* Raios 50% maiores: 66%->99% e 52%->78%. As paradas de cor foram junto,
senão o clarão viraria uma mancha chapada — espalhar a luz sem alongar o
degradê deixa a borda dura. O foco continua a 78% da altura e a 46% da
largura: embaixo e levemente de lado, como luz de estúdio. */
--foto-luz: radial-gradient(ellipse 99% 78% at 46% 78%,
rgba(255,255,255,.26) 0%,
rgba(243,230,248,.16) 30%,
rgba(186,150,199,.085) 56%,
rgba(130,96,140,.03) 78%,
rgba(97,68,104,0) 100%), var(--purple);
}
.agenda-pro-photo-img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;display:block;background:var(--foto-luz);}
.agenda-pro-photo svg{width:100%;height:100%;}
.agenda-pro-info{flex:1;position:relative;z-index:1;}
.agenda-pro-name{font-family:'Roboto',sans-serif;font-size:1.15rem;font-weight:700;color:var(--purple-dark);margin-bottom:.3rem;}
.agenda-pro-spec{font-size:.85rem;color:var(--text-mid);font-weight:600;line-height:1.4;margin-bottom:.6rem;}
.agenda-pro-audience{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:#614468;margin-bottom:.9rem;}
.agenda-pro-audience svg{flex-shrink:0;}
.pro-tags-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;}
.pro-tag-pill{background:var(--lavender);color:var(--purple-dark);font-size:.7rem;font-weight:600;padding:.25rem .65rem;border-radius:100px;white-space:nowrap;border:1px solid var(--border);}
.btn-acessar{background:var(--purple-dark);color:var(--white);padding:.6rem 1.6rem;border-radius:100px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-decoration:none;display:inline-block;transition:background .2s,transform .15s;cursor:pointer;border:none;font-family:'Roboto',sans-serif;}
.btn-acessar:hover{background:var(--purple);transform:scale(1.04);}
.agenda-info-section{background:var(--white);padding:4rem 7%;text-align:center;}
/* Alinhado à esquerda: o bloco continua centralizado na coluna (margin auto),
só o texto deixa de ser centralizado. Parágrafo longo centralizado obriga o
olho a procurar o início de cada linha. */
.agenda-info-text{font-size:1rem;color:var(--text-mid);line-height:1.85;max-width:700px;margin:0 auto 1.5rem;text-align:left;}
.agenda-info-highlight{font-size:1.05rem;font-weight:700;color:var(--text-dark);max-width:700px;margin:0 auto;line-height:1.6;}
.no-results{text-align:center;padding:3rem;color:var(--text-light);font-size:1rem;display:none;grid-column:1/-1;}
#cursor-glow{position:fixed;top:0;left:0;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(139,107,190,.06) 0%,transparent 70%);pointer-events:none;z-index:0;will-change:transform;transform:translate(-9999px,-9999px);}
/* PROFILE PAGE */
#page-profile{background:var(--lavender);}
.profile-hero{position:relative;padding:0 4% 0;background:var(--lavender);}
.profile-hero-inner{position:relative;border-radius:26px;border:1.5px solid var(--gold);background:var(--purple);padding:3.2rem 4% 0;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:end;min-height:480px;overflow:hidden;}
.profile-info-card{background:transparent;padding:0 0 3.4rem 0;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;animation:fadeLeft .8s cubic-bezier(.22,1,.36,1) both;}
.profile-eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1.3rem;}
.profile-eyebrow-badge{width:30px;height:30px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.profile-eyebrow span:last-child{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);}
.profile-name{font-family:'Roboto',sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:700;color:#fff;margin-bottom:1.1rem;line-height:1.12;}
.profile-name-divider{width:64px;height:2px;background:var(--gold);margin-bottom:1.3rem;}
/* Mesmo princípio do card: CRP, abordagem e público formam um bloco só. */
.profile-crp{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.2rem;line-height:1.3;}
.profile-abordagem{font-size:1.03rem;color:rgba(255,255,255,.8);line-height:1.35;margin-bottom:.15rem;}
.profile-audience{display:flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:700;color:var(--gold-light);margin-top:.3rem;line-height:1.35;}
.profile-audience svg{flex-shrink:0;}
.profile-tags-wrap{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;}
/* SELO "ATENDE EM LIBRAS".
Verde (--green) para se separar do dourado, que na Doxa marca credencial de
registro (CRP). O selo NÃO é certificação oficial de ninguém: é a informação
de que aquele profissional atende naquela língua, e por isso o texto diz
exatamente isso. Usar a marca do VLibras ou brasão de governo aqui daria a
entender endosso oficial, que não existe. */
.selo-libras{display:inline-flex;align-items:center;gap:.4rem;background:var(--green);color:#fff;border-radius:100px;padding:.3rem .72rem;font-family:'Roboto',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.01em;line-height:1.2;white-space:nowrap;box-shadow:0 2px 8px rgba(63,105,76,.28);}
.selo-libras svg{flex:0 0 auto;}
.selo-libras-lg{font-size:.86rem;padding:.42rem .95rem;}
/* No perfil a linha fica sobre o roxo do cartão, então o verde escuro dos
cards não serviria: aqui ela vira etiqueta clara, com o mesmo peso visual
que o selo antigo tinha. */
/* A caixa ocupava a largura toda e o texto quase sumia sobre o roxo: o fundo
era translúcido (14% de branco) e a cor do texto, um lilás claro.
Agora: fundo branco a 80% (deixa o roxo do perfil transparecer de leve),
texto num verde mais escuro (#2F5039) para manter contraste, filete dourado fino.
`#profile-selo-libras` é um ID, então precisa entrar no seletor — sem ele o
`display:block` do contêiner continuaria esticando a caixa de ponta a ponta.
`width:fit-content` fecha a caixa no tamanho do texto. */
#profile-selo-libras .libras-publico-perfil,
.libras-publico-perfil{display:inline-flex;align-items:center;gap:7px;
background:rgba(255,255,255,.80);border:1px solid var(--gold);border-radius:100px;
padding:.42rem 1rem;font-size:.88rem;color:#2F5039;font-weight:600;
width:fit-content;max-width:100%;margin-top:0;
box-shadow:0 2px 10px -4px rgba(62,42,69,.35);}
.libras-publico-perfil strong{color:#2F5039;font-weight:800;}
#profile-selo-libras{display:block;}
.selo-libras-card{margin:.35rem 0 .1rem;}
@media(max-width:520px){
.selo-libras{font-size:.7rem;padding:.26rem .6rem;}
.selo-libras-lg{font-size:.78rem;padding:.36rem .8rem;}
}
.profile-tag{display:inline-block;background:rgba(255,255,255,.12);color:#EFE6F2;padding:.42rem .95rem;border-radius:100px;font-size:.85rem;font-weight:500;border:1px solid rgba(255,255,255,.18);}
.profile-tag-more{cursor:pointer;user-select:none;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.35);font-weight:700;letter-spacing:.02em;transition:background .15s;}
.profile-tag-more:hover,.profile-tag-more:focus-visible{background:rgba(255,255,255,.34);outline:none;}
.profile-video-iframe{width:100%;height:100%;border:none;}
.video-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn 0.3s ease;}
.video-modal-content{position:relative;width:90vw;height:90vh;max-width:1200px;max-height:720px;background:#000;border-radius:12px;overflow:hidden;}
.video-modal-close{position:absolute;top:15px;right:15px;background:rgba(255,255,255,0.9);border:none;width:40px;height:40px;border-radius:50%;font-size:28px;cursor:pointer;color:#000;display:flex;align-items:center;justify-content:center;z-index:10000;transition:background 0.2s;}
.video-modal-close:hover{background:#EDE5EF;}
.video-modal-container{width:100%;height:100%;}
.video-modal-container iframe,.video-modal-container video{width:100%;height:100%;border:none;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.agenda-filter-section{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.5rem;padding:0 0 1rem;border-bottom:1px solid rgba(107,79,160,0.1);}
.agenda-filter-section{max-width:1100px;margin:1rem auto 0;padding:0 0 1rem;}
#tags-filter-section{max-width:880px;margin:1rem auto 0;justify-content:flex-start;}
#tags-filter-section .tag-search-wrap{margin:-.4rem 0 1.2rem;}
/* HALO DE LUZ ATRÁS DO PROFISSIONAL.
É um pseudo-elemento do CONTÊINER da foto, não uma imagem: nasce junto com
qualquer perfil, inclusive os que forem criados depois, sem precisar editar
arte nenhuma nem mexer no documento do profissional no Firestore.
Três decisões deliberadas:
- fica em `z-index:0` contra o `z-index:1` da foto, então a luz passa POR
TRÁS da pessoa, nunca por cima do rosto;
- o gradiente termina em alfa 0 na mesma cor roxa do cartão, e não em
branco transparente, porque um branco esmaecendo sobre roxo cria uma
borda cinzenta visível na transição;
- o centro fica a 55% da altura, na linha do tronco, não atrás da cabeça.
Halo centrado na cabeça lê como auréola; centrado no tronco lê como luz
de estúdio, que é o efeito da referência.
O recorte fica por conta do `overflow:hidden` do .profile-hero-inner, então
a luz nunca vaza para fora do cartão arredondado. */
.profile-photo-wrap{position:relative;align-self:end;height:480px;display:flex;align-items:end;justify-content:center;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .15s both;background:transparent;}
/* Luz de estúdio atrás do retrato — RESTAURADA em 05/08/2026: foi removida
por engano numa caçada a manchas brancas que, no fim, estavam na foto (e
não neste efeito). O clarão é proposital: não é auréola atrás da cabeça, é
luz de estúdio vindo de baixo. A primeira camada é o corpo da luz, na
linha do tronco; a segunda é um rasante largo e baixo, quase no chão. */
.profile-photo-wrap::before{
content:'';position:absolute;z-index:0;pointer-events:none;
left:50%;bottom:0;transform:translateX(-50%);
width:126%;height:120%;
background:
radial-gradient(ellipse 42% 44% at 50% 76%,
rgba(255,255,255,.235) 0%,
rgba(243,230,248,.175) 28%,
rgba(199,168,211,.10) 52%,
rgba(139,104,148,.038) 76%,
rgba(97,68,104,0) 100%),
radial-gradient(ellipse 47% 24% at 50% 99%,
rgba(255,255,255,.16) 0%,
rgba(228,208,236,.095) 32%,
rgba(152,116,162,.032) 66%,
rgba(97,68,104,0) 100%);
}
@media(prefers-reduced-transparency:reduce){
.profile-photo-wrap::before{opacity:.6;}
}
.profile-photo-wrap img{position:relative;z-index:1;max-height:100%;width:auto;object-fit:contain;object-position:bottom;}
.profile-photo-wrap img{height:100%;width:auto;object-fit:contain;object-position:bottom;display:block;mix-blend-mode:normal;transform:scale(1.05);transform-origin:center bottom;}
/* SEM max-width:100% de proposito (removido em 29/07): com ele, uma foto cuja
POSE e mais larga (braços mais abertos, como Julio e Olimpio, canvas de
~950px contra a faixa normal de 580-770px do resto do elenco) era
OBRIGADA a encolher inteira - altura E largura - para caber na coluna da
grade, ficando visivelmente menor/mais distante que as demais no mesmo
viewport. Sem o limite, a foto sempre renderiza na altura cheia (480px
desktop / 340px mobile) como todo mundo; se ela ultrapassar a largura da
coluna, o excesso e apenas coberto pelo proprio card de informacoes ao
lado (que tem fundo solido e vem depois no DOM), entao nunca aparece
esticado nem cortado - so deixa de mostrar uma fatia de fundo roxo vazio
que ninguem notaria de qualquer forma. */
/* Recuo lateral MAIOR (correção 01/08/2026: o pedido era aumentar o respiro
das bordas da tela, não diminuir). O espaço para o calendário crescer vem
de dentro do cartão — colunas alinhadas e textos menores — e não das
margens da página. */
.profile-body{display:grid;grid-template-columns:1fr 1fr;background:var(--lavender);gap:0;padding:0 5% 3rem;align-items:start;}
/* O bloco encolheu ~10% cortando SÓ espaço em branco — recheio do cartão,
margens entre seções e folgas do calendário. As fontes foram no sentido
contrário, todas para cima. Era essa a combinação pedida: menos área, mais
legibilidade. Encolher via `zoom` teria sido uma linha só, mas levaria o
texto junto, que é justamente o que não se quer. */
.profile-schedule{min-width:0;background:var(--lavender);border-radius:20px;padding:1.85rem 1.7rem;margin:1.2rem 1.5rem 0 0;align-self:start;border:1px solid var(--border);
/* O `zoom` é o único eixo que encolhe a CAIXA sem tocar na proporção interna.
Precisei dele porque cortar espaço em branco e aumentar fonte se anulam:
medi 14% de branco a menos contra 12% de texto a mais, e o bloco terminava
do mesmo tamanho.
31/07/2026: de .75 para .82, a pedido de aumentar o texto da agenda, o
calendário e a lista de horários "cuidando das proporções". Subir o zoom
é justamente o que faz isso de uma vez só — calendário, horários, caixa
de pacotes e botões crescem todos na mesma medida (~9%), sem que eu
precise mexer em duas dezenas de font-sizes e correr o risco de
desalinhar a harmonia que já existia entre eles.
CUIDADO ao subir mais: zoom maior significa MENOS largura interna em px
para o mesmo espaço na tela, então o texto passa a ocupar uma fatia maior
da linha e volta a quebrar. .82 foi escolhido por deixar folga; acima de
~.88 as linhas da caixa de pacotes começam a apertar. */
zoom:.86;}
.schedule-icon-circle{width:47px;height:47px;border-radius:50%;background:var(--purple-dark);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;}
/* O texto do profissional é o conteúdo principal desta página e estava um
ponto abaixo do corpo de texto do resto do site. Com o calendário ao lado
agora mais discreto, o peso entre as duas colunas se inverte a favor da
leitura, que é o que se quer aqui. */
/* 1,4rem a pedido (02/08). Só a página do perfil: o card do "Agende agora"
continua em .92rem. line-height desce junto (1.8 em letra grande abre vãos
de parágrafo enormes). */
.profile-bio{background:transparent;padding:2.5rem 1.5rem 0 2rem;font-family:'Roboto',sans-serif;font-style:normal;font-size:1.15rem;line-height:1.7;color:var(--text-dark);}
.profile-bio::before{content:'\201C';display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--lavender-mid);color:var(--purple);font-family:Georgia,serif;font-size:2.2rem;font-weight:700;margin-bottom:1.2rem;line-height:1;padding-top:.5rem;}
.profile-bio p{margin-bottom:1.1rem;}
.profile-bio p{margin-bottom:1.2rem;margin-left:3.6rem;margin-right:1rem;}
/* Convite final do perfil, opção C escolhida (02/08): filete dourado na
lateral esquerda, como citação, mais a estrela grande em marca d'água da
opção B — em ROXO e discreta, a pedido. A linha de fecho com a estrelinha
entra num elemento próprio logo abaixo (.profile-bio-fecho). Fonte
acompanha o corpo novo do perfil (1,4rem): menor que o texto ao redor,
o convite parecia nota de rodapé. */
/* O fundo era var(--lavender), EXATAMENTE a mesma cor do fundo do
`.profile-body` — por isso o bloco sumia. Agora é um véu roxo por cima do
que estiver atrás, então ele aparece aqui e continuaria aparecendo se o
fundo da página mudar. */
/* 1,15rem: o mesmo corpo do texto da bio (decisão 02/08) — o destaque fica
por conta do negrito, do fundo e do filete dourado, não do tamanho. */
.profile-bio-cta{display:flex;align-items:flex-start;gap:.9rem;background:rgba(97,68,104,.12);border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:1.5rem 1.7rem;margin-top:1.6rem !important;font-size:1.15rem;text-align:left;font-style:normal;font-weight:700;color:var(--purple-dark);line-height:1.5;position:relative;overflow:hidden;}
.profile-bio-cta::after{content:'\2726';position:absolute;right:-.35rem;bottom:-1.7rem;font-size:5.6rem;line-height:1;color:rgba(97,68,104,.14);pointer-events:none;}
.profile-bio-cta > *{position:relative;}
/* Dobra "Ler mais" da bio: só existe no empilhado. No desktop o texto sai
inteiro e o botão some — a regra base já nasce assim, e o media de <=900px
inverte. O botão é um link discreto no tom do site, alinhado com o recuo
dos parágrafos. */
.bio-ler-mais{display:none;}
.bio-extra{display:block;}
@media(max-width:900px){
.bio-extra{display:none;}
.bio-extra.aberta{display:block;}
.bio-ler-mais{display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;cursor:pointer;
font-family:'Roboto',sans-serif;font-size:.95rem;font-weight:600;color:var(--purple-dark);
padding:.2rem 0;margin:.15rem 0 .85rem 1rem;border-bottom:1.5px solid var(--gold);}
.bio-ler-mais-chev{font-size:.8rem;line-height:1;transition:transform .25s;}
.bio-ler-mais.aberto .bio-ler-mais-chev{transform:rotate(180deg);}
}
.profile-bio-fecho{display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 .2rem;color:var(--gold);font-size:.95rem;}
.profile-bio-fecho::before,.profile-bio-fecho::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(181,139,45,.55),transparent);}
.profile-bio-cta::before{content:'';flex-shrink:0;width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B58B2D' stroke-width='1.8'%3E%3Cpath d='M12 21s-8-4.7-8-11.2C4 6.6 6.6 4 9.6 4c1.6 0 3 .8 3.9 2 1-1.2 2.3-2 3.9-2 3 0 5.5 2.6 5.5 5.8 0 6.5-8 11.2-8 11.2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;}
.profile-bio p:last-child{margin-bottom:0;}
.schedule-title{font-family:'Roboto',sans-serif;font-size:2rem;font-weight:700;color:var(--purple-dark);margin-bottom:.08rem;line-height:1.2;}
.schedule-intro{font-size:1.13rem;color:var(--text-mid);line-height:1.45;margin-bottom:0;padding-bottom:0;border-bottom:none;}
.schedule-section-head{display:flex;align-items:baseline;gap:.6rem;padding-bottom:0;margin-bottom:0.45rem;}
.schedule-section-head .passo-limpar{margin-left:auto;}
.schedule-section-head h3{font-family:'Roboto',sans-serif;font-size:1.22rem;font-weight:400;color:var(--purple-dark);display:flex;align-items:center;}
/* TRILHA NUMERADA (V4): círculos roxo-escuro com número dourado guiando as
três decisões — dia, horário e sessões. São ::before para não tocar no DOM
que o JS reescreve. O passo 2 só aparece junto com a seção de horários,
que abre depois de escolher um dia — é o comportamento desejado. */
.schedule-section-head h3::before{content:'1';}
.schedule-day-label::before{content:'2';}
.plano-titulo::before{content:'3';}
.schedule-section-head h3::before,.schedule-day-label::before,.plano-titulo::before{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--purple-dark);color:var(--gold-light);font-size:.85rem;font-weight:700;margin-right:.6rem;flex:none;vertical-align:-6px;font-style:normal;}
.schedule-day-label{display:flex;align-items:center;}
/* Repetições do pacote no calendário: anel dourado + rótulo "2ª","3ª"… */
.calendar-day.cal-rep{box-shadow:inset 0 0 0 2px var(--gold);}
.calendar-day.cal-rep{position:relative;}
/* Dia marcado em sequência pelos chips do passo 3: verde sólido, número da
repetição em branco, sem o anel (a marcação substitui a sugestão). */
.calendar-day.cal-seq{background:var(--green);color:#fff;box-shadow:none;}
.calendar-day.cal-seq .cal-rep-n{color:#fff;opacity:.9;}
.calendar-day.cal-seq.available::after{background:rgba(255,255,255,.85);}
.cal-rep-n{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:.42em;line-height:1;color:#854F0B;font-weight:700;}
.plano-resumo-box{background:var(--lavender);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem;margin-top:0;}
.plano-resumo-t{display:block;font-size:.9rem;font-weight:700;color:var(--purple-dark);margin-bottom:.4rem;line-height:1.3;}
.plano-resumo-t strong{color:var(--green);}
.plano-resumo-linha{margin-bottom:.3rem;}
.plano-resumo-linha.l1{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.plano-resumo-linha.l1 .plano-resumo-rot{margin:0;}
.plano-resumo-rot{display:block;font-size:.84rem;font-weight:600;color:var(--text-mid);margin-bottom:.25rem;}
.plano-resumo-rot em{font-style:normal;font-weight:400;color:var(--text-light);}
.plano-resumo-chips{display:flex;gap:.28rem;flex-wrap:wrap;}
.plano-resumo-chip{display:inline-flex;align-items:center;gap:.25rem;border-radius:100px;padding:.2rem .62rem;font-size:.81rem;white-space:nowrap;}
/* Chip da 1ª: verde cheio, a única de verdade marcada agora. */
.plano-resumo-chip.primeira{background:var(--green);border:1px solid var(--green);color:#fff;font-weight:700;}
/* Chips de crédito: tracejado dourado; clicáveis para marcar em sequência. */
.plano-resumo-chip.credito{background:#fff;border:1px dashed var(--gold);color:var(--text-mid);cursor:pointer;transition:background .15s,color .15s;}
.plano-resumo-chip.credito:hover{background:#FBF4E4;}
.plano-resumo-chip.credito.marcado{background:var(--green);border:1px solid var(--green);color:#fff;font-weight:700;}
.plano-resumo-chip.credito.rest{background:#FBF4E4;border:1px solid var(--gold);color:var(--purple-dark);font-weight:600;}
.plano-resumo-chip.credito.rest.marcado{background:var(--green);border-color:var(--green);color:#fff;}
.plano-resumo-chip.credito.bloq{opacity:.5;cursor:not-allowed;}
.plano-resumo-nota{display:block;font-size:.77rem;color:var(--text-mid);margin-top:.3rem;line-height:1.45;}
.plano-resumo-nota b{color:var(--purple-dark);}
/* O container #time-slots herda display:flex da classe .time-slots, o que
punha os rótulos MANHÃ/TARDE-NOITE na mesma linha dos chips (bug visual
01/08). Como bloco, cada rótulo abre a própria linha e os chips fluem na
.time-slots-linha logo abaixo. */
#time-slots{display:block;}
.time-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
.time-col-chips{display:flex;flex-direction:column;gap:.35rem;align-items:stretch;}
.time-col-chips .time-slot{width:100%;text-align:center;}
.time-col-vazia .time-grupo-rot{opacity:.45;}
.time-grupo-rot{display:block;font-size:.72rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .3rem;}
.time-grupo-rot:first-child{margin-top:0;}
.time-slots-linha{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.15rem;}
/* Passo 3 bloqueado: em vez de esmaecer botão a botão, uma TELA translúcida
cobre a lista inteira com a instrução no meio (pedido 01/08/2026). As
opções continuam visíveis por baixo; o clique no véu explica o porquê. */
/* Botão "limpar" de cada passo: aparece assim que há algo escolhido naquele
passo e some quando não há (pedido 01/08/2026). Discreto de propósito, é
uma saída e não uma ação principal. */
.passo-limpar{background:none;border:1px solid var(--border);border-radius:100px;color:var(--text-mid);font-family:'Roboto',sans-serif;font-size:.72rem;font-weight:600;line-height:1.5;padding:.1rem .55rem;margin-left:.5rem;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s;}
.passo-limpar:hover{border-color:var(--purple);color:var(--purple-dark);}
.passo-limpar-ic{flex:none;padding:.05rem .4rem;font-size:.75rem;line-height:1.3;margin-left:.35rem;}
.plano-resumo-topo{display:flex;align-items:flex-start;gap:.2rem;}
.plano-resumo-topo .plano-resumo-t{flex:1;min-width:0;}
.schedule-section-head .passo-limpar{align-self:center;}
.passo2-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem;}
.passo2-head .schedule-day-label{margin-bottom:0;font-size:1.22rem;}
.plano-lista{position:relative;}
.plano-veu{position:absolute;inset:0;z-index:2;background:rgba(247,243,248,.62);display:flex;align-items:center;justify-content:center;border-radius:13px;cursor:not-allowed;}
.plano-veu span{background:#fff;border:1px solid var(--border);border-radius:100px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;color:var(--purple-dark);box-shadow:0 4px 14px rgba(62,42,69,.12);text-align:center;}
.plano-lista-bloq .plano-opcao-bloq{cursor:not-allowed;}
.doxa-toast-cal{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--purple-dark);color:#fff;font-size:.85rem;padding:.7rem 1.1rem;border-radius:100px;box-shadow:0 6px 24px rgba(62,42,69,.35);opacity:0;transition:transform .3s,opacity .3s;z-index:9000;max-width:90vw;text-align:center;pointer-events:none;}
.doxa-toast-cal.show{transform:translateX(-50%) translateY(0);opacity:1;}
.passo2-vazio{font-size:.95rem;color:var(--text-mid);background:var(--lavender);border:1px dashed var(--border);border-radius:12px;padding:.7rem .9rem;line-height:1.5;margin:0;}
/* O passo 2 fica AO LADO do calendário no desktop e ACIMA quando empilha
(<=1100px). O texto acompanha: só um dos dois trechos aparece por vez. */
.p2-dir-cima{display:none;}
@media(max-width:1100px){.p2-dir-lado{display:none;}.p2-dir-cima{display:inline;}}
.timezone{font-size:.74rem;color:var(--text-light);}
/* TIPOGRAFIA DO CALENDÁRIO — ler junto com o `zoom:.8` do .profile-schedule.
A coluna inteira é reduzida a 80%, e é por isso que os valores aqui pareciam
grandes demais no código: eles eram inflados para sobreviver ao zoom. Os
números abaixo já consideram essa conta — o tamanho ENTRE PARÊNTESES é o que
a pessoa realmente enxerga na tela.
título do mês 1,25rem (16px)
dias da semana 0,95rem (12px)
número do dia 1,15rem (15px)
Antes eram 18px, 14px e 20px: o número do dia chegava a competir com o
título da seção, e o bloco todo puxava mais atenção que o texto do perfil. */
.calendar{margin-bottom:1.2rem;}
.calendar-header{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-bottom:.45rem;}
.cal-orn{color:var(--gold);font-size:.98rem;line-height:1;user-select:none;}
/* Cartão dourado: a grade mora num cartão branco de borda dourada fina. */
.calendar-card{background:#fff;border:1px solid var(--gold);border-radius:14px;padding:.75rem .7rem .85rem;max-width:600px;margin-inline:auto;width:100%;}
.calendar-nav{background:transparent;border:none;font-size:1rem;color:var(--purple-dark);cursor:pointer;padding:.35rem .55rem;border-radius:50%;transition:background .15s;font-family:'Roboto',sans-serif;line-height:1;}
.calendar-nav:hover{background:rgba(107,79,160,.1);}
.calendar-title{font-family:'Roboto',sans-serif;font-size:.98rem;font-weight:600;color:var(--text-dark);min-width:118px;text-align:center;}
/* A grade ganhou um teto de largura e ficou centralizada. Sem isso, com os
dias virando círculos de 46px dentro de colunas de ~85px, sobrariam quase
40px de vazio entre um dia e o outro — o calendário ficaria esparramado em
vez de discreto. Com 430px de teto, a coluna cai para ~60px e a folga entre
círculos fica em torno de 12px. */
/* Teto de 400px em vez de 430: com o círculo em 44px, a coluna cai para
~57px e a folga entre dias fica em 13px. Foi por aqui que saiu boa parte do
branco mal aproveitado — a grade estava larga e os dias, pequenos dentro
dela. Agora é o contrário: número maior, grade mais justa. */
/* Duas folgas diferentes de propósito: a vertical é quase o triplo da
horizontal. Com o mesmo valor nos dois eixos, as semanas ficavam grudadas
e o mês inteiro lia como um bloco achatado — os círculos quase se tocando
de uma linha para a outra, enquanto sobrava ar entre as colunas. */
/* Vão vertical entre as linhas de dias: .95rem lia como 'recorte' esticado
no print de 31/07/2026 — cada linha parecia uma faixa solta. .6rem mantém a
respiração sem alongar a caixa. A largura teto caiu de 530 para 470px junto
com a célula (74->60px): 7 células + 6 vãos (~449px) cabem com folga. */
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;justify-items:center;max-width:560px;margin-inline:auto;width:100%;}
.calendar-weekdays{gap:.3rem;margin-bottom:.35rem;}
/* Dia que pertence ao mês seguinte dentro da mesma janela de 4 semanas.
Continua clicável e agendável: o tom mais claro só sinaliza a virada. */
.calendar-day.outro-mes,.multi-cal-day.outro-mes{opacity:.72;}
.calendar-weekdays span{text-align:center;font-size:1.16rem;font-weight:600;color:var(--text-mid);padding:.05rem 0;}
/* O DIA VIRA CÍRCULO DE VERDADE.
Antes: `aspect-ratio:1.3` (e 1.5 acima de 901px) com `border-radius:50%`.
Um retângulo 1,3:1 arredondado a 50% não é círculo, é elipse — era isso que
deixava o dia selecionado com cara de comprimido oval, e quanto mais larga a
coluna, mais achatado ficava.
Agora a célula do grid continua ocupando sua fração, mas o alvo clicável é
limitado a 46px e centralizado com `margin-inline:auto`. Com `aspect-ratio:1`
sobre uma largura limitada, o resultado é sempre círculo, em qualquer
largura de coluna. */
.calendar-day{width:min(100%,72px);aspect-ratio:1;margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:2.05rem;font-weight:600;line-height:1;color:var(--text-dark);cursor:default;position:relative;border-radius:50%;transition:background .15s,color .15s;user-select:none;padding:0;}
.calendar-day.empty{visibility:hidden;}
.calendar-day.past{color:#C5BBD9;}
.calendar-day.available{cursor:pointer;}
/* MARCADOR DE DISPONIBILIDADE: bolinha VERDE, e no fluxo do flex em vez de
posicionada de forma absoluta no rodapé da célula. A diferença importa: como
item do flex, ela entra logo abaixo do número, separada pelo `gap:3px`, e o
par número+bolinha fica centralizado junto. Absoluta, ela ficava colada na
borda de baixo do círculo, longe do número e quase invisível. */
/* Dia disponível: sublinhado verde sob o número (escolha 01/08, no lugar do
ponto). O 1.05em acompanha o corpo do número; o teto evita barra larga
demais em célula grande. */
.calendar-day.available::after{content:'';position:static;width:1.05em;max-width:34px;height:3px;background:var(--green);border-radius:2px;}
.calendar-day.available:hover{background:rgba(107,79,160,.12);}
.calendar-day.selected{background:var(--purple-dark);color:var(--white);}
/* Sobre o roxo escuro o verde some; o dourado da marca é o que mantém o
marcador visível no dia selecionado. */
.calendar-day.selected::after{background:var(--gold-light);}
.schedule-times{margin-bottom:1rem;}
.schedule-day-label{font-size:1.22rem;font-weight:400;color:var(--text-dark);margin-bottom:1rem;}
.time-slots{display:flex;flex-wrap:wrap;gap:.4rem;}
.time-slot{background:var(--purple-dark);color:var(--white);padding:.55rem 1.6rem;border-radius:100px;border:none;cursor:pointer;font-family:'Roboto',sans-serif;font-weight:600;font-size:1.05rem;transition:background .2s,transform .15s;}
.time-slot:hover{background:var(--purple);transform:translateY(-1px);}
.time-slot.selected{background:var(--gold);color:var(--text-dark);}
/* A coluna da esquerda tem largura fixa (a da grade); a da direita fica com o
resto. `minmax(0,1fr)` na direita é obrigatório: sem o mínimo zero, uma
linha longa de texto empurraria a coluna e quebraria o alinhamento da grade. */
/* A folga entre as duas colunas caiu de 1,9rem para 1,1rem e a divisória
vertical passou a marcar a separação sozinha — era ela que já fazia esse
trabalho, o vão largo estava só desperdiçando largura. Os ~13px liberados
foram inteiros para a coluna da grade, que subiu de 470 para 530px. */
/* As colunas viraram FRAÇÕES (antes 470px fixos): a grade cresce até 560px e
fica com ~60% da linha; o passo 2 fica com os ~40% restantes — era ali que
sobrava a área morta marcada em X no print de 01/08. Frações também evitam
estouro em desktop estreito, onde 470px fixos não caberiam. */
.schedule-cal-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0 1.1rem;align-items:start;}
/* Os dois cabeçalhos ocupam a mesma linha da grade e esticam à mesma altura,
então a régua dourada de baixo dos dois fica no MESMO y por construção,
mesmo que o texto de um deles quebre. */
.schedule-cal-row > .schedule-section-head,
.schedule-cal-row > .passo2-head{align-self:stretch;align-items:center;margin-bottom:var(--respiro-passo,1.15rem);padding-bottom:0;border-bottom:0;}
.schedule-cal-row .calendar{margin-bottom:0;}
/* Passo 2 mora na coluna à direita da grade (pedido 01/08/2026), onde antes
ficavam os detalhes do serviço. A divisória vertical separa as colunas, e
os botões de horário ficam um pouco mais compactos aqui porque a coluna é
mais estreita que o cartão inteiro — cabem 3-4 por fileira. */
.schedule-cal-row .schedule-times{margin-bottom:1rem;
border-left:1px solid rgba(107,79,160,.18);padding-left:1.5rem;}
/* ZERO, e é isto que põe o título do 2 na mesma linha do título do 1.
Os dois cabeçalhos são caixas esticadas à mesma altura que centram o
conteúdo; uma margem embaixo de um deles empurra o texto daquele para
CIMA metade da margem. Era esse .7rem que deixava o "Horários do dia"
uns 5px mais alto que o "Selecione uma data e horário". */
.schedule-cal-row .schedule-day-label{margin-bottom:0;}
.schedule-cal-row .time-slots{gap:.35rem;}
.schedule-cal-row .time-slot{padding:.5rem 1.05rem;font-size:1rem;}
/* Cartão estreito (tablet e celular): volta a empilhar, e a divisória
vertical sai — o passo 2 segue logo abaixo da grade, em largura cheia. */
@media(max-width:1100px){
.schedule-cal-row{grid-template-columns:1fr;grid-template-rows:none;gap:0;}
.schedule-cal-row > .schedule-section-head{order:1;}
.schedule-cal-row > .calendar{order:2;}
.schedule-cal-row > .passo2-head{order:3;margin-top:var(--respiro-passo,1.15rem);}
.schedule-cal-row > .schedule-times{order:4;}
.schedule-cal-row .schedule-times{border-left:0;padding-left:0;}
}
/* Detalhes do serviço viraram uma FAIXA compacta abaixo dos valores (pedido
01/08/2026): título, tipo e o link "Mostrar detalhes" dividem a mesma
linha, e o expansível abre por baixo na largura toda. Em tela estreita o
flex-wrap deixa o link cair para a linha de baixo em vez de espremer. */
/* Fechado, a faixa é uma linha só e não precisa do respiro cheio dos passos;
o espaço de leitura do conteúdo ABERTO continua vindo do padding do
.service-info.open, que não mudou. */
.service-details{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:.1rem;padding-top:.25rem;margin-bottom:.15rem;}
.service-details h3{font-family:'Roboto',sans-serif;font-size:1rem;font-weight:400;color:var(--purple-dark);margin-bottom:0;}
.service-type{font-size:.95rem;color:var(--text-dark);margin-bottom:0;}
.service-type::before{content:'·';margin-right:.6rem;color:var(--purple-light);}
.service-toggle{display:flex;align-items:center;gap:.4rem;margin-left:auto;cursor:pointer;font-size:.92rem;color:var(--purple-dark);padding:.15rem 0;}
.service-toggle .chev{transition:transform .25s;font-weight:700;}
.service-toggle.open .chev{transform:rotate(180deg);}
.service-info{flex-basis:100%;align-self:flex-start;max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1);font-size:.9rem;color:var(--text-mid);line-height:1.65;}
/* Agora o expansível guarda só a explicação dos créditos (Duração e Pagamento
saíram): é um parágrafo, então bloco normal — não o inline-flex que servia
às duas linhas curtas de antes, e que cortava o texto longo. O teto sobe
para caber o parágrafo inteiro em qualquer largura. */
.service-info.open{max-height:400px;padding-top:.55rem;padding-bottom:.35rem;}
.service-info-credito{display:block;margin:0;}
.service-info-credito strong{color:var(--purple-dark);}
/* Cantos de 100px faziam uma cápsula: numa coluna estreita a curva come as
pontas e o rótulo fica espremido no meio. 12px mantém a forma de botão. */
.btn-next{width:100%;background:var(--purple-dark);color:var(--white);padding:.8rem .85rem;border-radius:12px;border:none;font-size:1.02rem;font-weight:600;letter-spacing:.05em;cursor:pointer;font-family:'Roboto',sans-serif;transition:background .2s,transform .15s;}
.btn-next:hover{background:var(--purple);transform:translateY(-1px);}
.schedule-next-row{display:flex;gap:.8rem;flex-wrap:wrap;}
.schedule-next-row .btn-next{flex:1;width:auto;min-width:200px;}
.btn-next-secondary{background:var(--white) !important;color:var(--purple-dark) !important;border:1.5px solid var(--purple-dark) !important;}
.btn-next-secondary:hover{background:var(--lavender-mid) !important;}
@media(max-width:480px){.schedule-next-row{flex-direction:column;}.schedule-next-row .btn-next{min-width:0;}
/* Celular estreito: um embaixo do outro, largura cheia nos dois. */
.schedule-acoes-row .schedule-next-row{grid-template-columns:1fr;gap:.6rem;}}
.btn-next:disabled{background:#B8AAD0;cursor:not-allowed;transform:none;}
.profile-confirmation{display:none;background:var(--green);color:var(--white);padding:1rem 1.4rem;border-radius:12px;margin-top:1rem;font-size:.92rem;text-align:center;animation:fadeUp .4s ease both;}
.profile-back{display:inline-block;margin:0 7% .7rem;color:var(--purple-dark);font-size:.85rem;text-decoration:none;font-weight:600;letter-spacing:.05em;cursor:pointer;padding-top:.7rem;}
/* Trilha de navegação do perfil. Alvos de toque de 44px no celular sem
engordar a linha no desktop: o padding vertical do link é o que cresce. */
/* A trilha ocupa o respiro que o hero deixava para o menu fixo: o
`padding-top` daqui é o antigo `calc(80px + 2.2rem)` do hero repartido —
o menu continua coberto pelos mesmos 80px e o resto virou o vão em que a
trilha mora. Discreta de propósito: letra pequena, sem fundo, separadores
dourados que já são a linguagem do site. */
/* RECUOS DA TRILHA (rodada 60): ela vive no vão entre o menu fixo de 80px e
o cartão do profissional, e estava espremida contra os dois. Agora o vão é
dividido de forma parecida em cima e embaixo, e o recuo lateral segue o
mesmo 4% do `.profile-hero`, então o "Início" nasce na mesma vertical da
borda do cartão. Mexer no padding-top e no margin-bottom juntos é o que
mantém o cartão no mesmo lugar da página. */
.profile-bc{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .5rem;margin:0 0 .9rem;padding:calc(80px + 1.05rem) 4% 0;font-size:.82rem;font-weight:600;letter-spacing:.02em;}
.profile-bc-link{color:var(--purple-dark);text-decoration:none;cursor:pointer;padding:.25rem 0;border-bottom:1px solid transparent;transition:border-color .18s;}
.profile-bc-link:hover{border-bottom-color:var(--gold);}
.profile-bc-link:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:3px;}
.profile-bc-sep{color:var(--gold);font-size:1em;line-height:1;}
.profile-bc-atual{color:var(--text-mid);font-weight:500;min-width:0;overflow-wrap:anywhere;}
@media(max-width:640px){
.profile-bc{font-size:.8rem;gap:.1rem .35rem;}
.profile-bc-link{padding:.55rem 0;}
}
.profile-back:hover{color:var(--purple);}
/* BOOKING FORM PAGE */
#page-booking{background:var(--lavender);min-height:100vh;padding-top:80px;}
.booking-wrap{max-width:1200px;margin:0 auto;padding:3rem 5% 5rem;}
.booking-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-mid);font-size:.95rem;text-decoration:none;cursor:pointer;margin-bottom:2rem;transition:color .15s;}
.booking-back:hover{color:var(--purple-dark);}
.booking-title{font-family:'Roboto',sans-serif;font-weight:400;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--purple-dark);margin-bottom:3rem;}
.booking-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start;}
.booking-form-section h3{font-family:'Roboto',sans-serif;font-weight:400;font-size:1.3rem;color:var(--text-dark);margin-bottom:1.5rem;}
.bk-credito-aviso{background:#E8F5E9;border:1px solid var(--green);border-radius:12px;padding:1rem 1.2rem;font-size:.9rem;line-height:1.6;color:#1B4332;margin-bottom:1.4rem;}
.bk-credito-aviso strong{color:#14532d;}
@media(max-width:640px){
.bk-credito-aviso{padding:.9rem 1rem;font-size:.86rem;border-radius:10px;}
}
.booking-login-strip{background:#EFE9F5;padding:1.2rem 1.5rem;border-radius:8px;font-size:.95rem;color:var(--text-dark);margin-bottom:2.5rem;}
.booking-login-strip a{color:var(--purple-dark);font-weight:600;text-decoration:underline;cursor:pointer;}
.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.5rem;}
.booking-field{display:flex;flex-direction:column;}
.booking-field.full{grid-column:1 / -1;}
.booking-field label{font-size:.9rem;color:var(--text-dark);margin-bottom:.5rem;}
.booking-field label .req{color:var(--purple-dark);}
.booking-field input,.booking-field textarea{border:1px solid var(--purple-dark);background:transparent;padding:.9rem 1rem;font-family:'Roboto',sans-serif;font-size:1rem;color:var(--text-dark);border-radius:2px;outline:none;transition:border-color .15s,box-shadow .15s;}
.booking-field input:focus,.booking-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,164,80,.15);}
.booking-field textarea{resize:vertical;min-height:120px;}
.booking-field input.invalid,.booking-field textarea.invalid{border-color:#C0392B;}
.booking-field .error-msg{color:#C0392B;font-size:.8rem;margin-top:.3rem;display:none;}
.booking-field.invalid .error-msg{display:block;}
.phone-wrap{display:flex;align-items:center;gap:.6rem;border:1px solid var(--purple-dark);padding:0 1rem;border-radius:2px;transition:border-color .15s,box-shadow .15s;}
.phone-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,164,80,.15);}
.phone-wrap .globe{color:var(--text-mid);font-size:1rem;}
.phone-wrap input{border:none !important;padding:.85rem 0 !important;flex:1;box-shadow:none !important;}
.booking-summary{background:#F5F0FA;padding:2rem;border-radius:8px;position:sticky;top:100px;}
.booking-summary h3{font-family:'Roboto',sans-serif;font-weight:400;font-size:1.2rem;color:var(--text-dark);padding-bottom:1.2rem;border-bottom:1px solid rgba(107,79,160,.18);margin-bottom:1.5rem;}
.summary-pro{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;}
.summary-pro img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--foto-luz);}
.summary-pro-name{font-weight:600;color:var(--text-dark);font-size:.95rem;}
.summary-modality{font-size:1.05rem;color:var(--text-dark);font-weight:600;margin-bottom:.3rem;}
.summary-datetime{font-size:1rem;color:var(--text-mid);margin-bottom:1rem;}
.summary-online-tag{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid var(--purple-dark);color:var(--purple-dark);padding:.4rem 1rem;border-radius:100px;font-size:.85rem;margin-bottom:1.5rem;}
.summary-show-more{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-top:1px solid rgba(107,79,160,.18);border-bottom:1px solid rgba(107,79,160,.18);font-size:.95rem;color:var(--text-dark);cursor:pointer;margin-bottom:1.5rem;}
.summary-show-more .chev{font-weight:700;transition:transform .25s;}
.summary-show-more.open .chev{transform:rotate(180deg);}
.summary-more-info{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1);font-size:.88rem;color:var(--text-mid);line-height:1.7;}
.summary-more-info.open{max-height:200px;padding-bottom:1rem;}
.summary-payment-title{font-family:'Roboto',sans-serif;font-weight:400;font-size:1.1rem;color:var(--text-dark);margin-bottom:1rem;}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem;color:var(--text-dark);padding-bottom:1.5rem;border-bottom:1px solid rgba(107,79,160,.18);margin-bottom:1.5rem;}
.summary-total .value{font-weight:700;}
.summary-disclaimer{font-size:.78rem;color:var(--text-mid);line-height:1.6;margin-bottom:1.5rem;}
.btn-agendar{width:100%;background:#2F2F2F;color:var(--white);padding:1.1rem;border-radius:4px;border:none;font-size:1rem;font-weight:600;cursor:pointer;font-family:'Roboto',sans-serif;letter-spacing:.05em;transition:background .2s,transform .15s;}
.btn-agendar:hover{background:#1F1F1F;transform:translateY(-1px);}
.btn-agendar:disabled{background:#888;cursor:not-allowed;transform:none;}
/* CONFIRMATION PAGE */
#page-confirmation{background:var(--lavender);min-height:100vh;padding-top:80px;align-items:center;justify-content:center;}
.confirmation-card{background:var(--white);max-width:560px;width:90%;margin:4rem auto;padding:3.5rem 3rem;border-radius:20px;box-shadow:0 20px 60px rgba(61,37,96,.18);text-align:center;animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;}
.confirmation-check{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,var(--green) 0%,#7FA869 100%);margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:3rem;font-weight:bold;box-shadow:0 8px 24px rgba(141,168,108,.35);animation:popIn .55s cubic-bezier(.34,1.56,.64,1) .2s both;}
@keyframes popIn{from{opacity:0;transform:scale(.3);}to{opacity:1;transform:scale(1);}}
.confirmation-card h1{font-family:'Roboto',sans-serif;font-weight:400;font-size:2rem;color:var(--purple-dark);margin-bottom:.6rem;}
.confirmation-card .lead{font-size:1rem;color:var(--text-mid);margin-bottom:2.2rem;line-height:1.6;}
.confirmation-resume{background:var(--lavender);border-radius:12px;padding:1.5rem;text-align:left;margin-bottom:2rem;}
.confirmation-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid rgba(107,79,160,.15);font-size:.95rem;}
.confirmation-row:last-child{border-bottom:none;}
.confirmation-row .label{color:var(--text-mid);}
.confirmation-row .value{color:var(--text-dark);font-weight:600;text-align:right;}
.confirmation-row .value img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--foto-luz);vertical-align:middle;margin-right:.5rem;}
.confirmation-actions{display:flex;gap:.8rem;flex-wrap:wrap;}
.confirmation-actions button{flex:1;min-width:140px;padding:.95rem;border-radius:100px;border:none;font-size:.92rem;font-weight:600;letter-spacing:.05em;cursor:pointer;font-family:'Roboto',sans-serif;transition:transform .15s,background .2s;}
.btn-primary{background:var(--purple-dark);color:var(--white);border:none;border-radius:100px;padding:.85rem 1.8rem;font-family:'Roboto',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:background .2s,transform .15s;}
.btn-primary:hover{background:var(--purple);transform:translateY(-1px);}
.btn-secondary{background:transparent;color:var(--purple-dark);border:1.5px solid var(--purple-dark) !important;}
.btn-secondary:hover{background:var(--purple-dark);color:var(--white);transform:translateY(-1px);}
/* NAV AUTH (botão Entrar / usuário logado) */
.nav-auth{margin-left:3rem;display:flex;align-items:center;gap:.6rem;}
.nav-auth-btn{background:var(--gold);color:var(--purple-dark);padding:.55rem 1.32rem;border-radius:100px;border:none;font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:'Roboto',sans-serif;transition:background .2s,transform .15s;}
.nav-auth-btn:hover{background:var(--gold-light);transform:translateY(-1px);}
.nav-signup-link{font-family:'Roboto',sans-serif;color:var(--gold);font-size:.86rem;font-weight:700;letter-spacing:.05em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .2s;}
.nav-signup-link:hover{color:var(--gold-light);}
.nav-signup-mobile{display:none;font-family:'Roboto',sans-serif;color:var(--gold);font-size:.92rem;font-weight:700;letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;margin-left:auto;margin-right:1rem;transition:color .2s;}
.nav-signup-mobile:hover{color:var(--gold-light);}
.nav-user{position:relative;}
.nav-user-trigger{background:transparent;border:1.5px solid var(--gold);color:var(--gold-light);padding:.5rem 1rem;border-radius:100px;cursor:pointer;font-size:.82rem;font-weight:600;font-family:'Roboto',sans-serif;display:flex;align-items:center;gap:.5rem;transition:background .2s;}
.nav-user-trigger:hover{background:rgba(212,164,80,.12);}
.nav-user-avatar{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--purple-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;}
.nav-user-menu{position:absolute;top:calc(100% + .5rem);right:0;background:var(--white);border-radius:12px;box-shadow:0 12px 40px rgba(61,37,96,.25);min-width:220px;padding:.5rem 0;display:none;z-index:1000;animation:fadeUp .2s ease both;}
.nav-user-menu.open{display:block;}
.nav-user-menu .menu-header{padding:.75rem 1.2rem;border-bottom:1px solid rgba(107,79,160,.12);}
.nav-user-menu .menu-name{font-weight:700;color:var(--text-dark);font-size:.92rem;}
.nav-user-menu .menu-email{font-size:.78rem;color:var(--text-mid);word-break:break-all;}
.nav-user-menu .menu-item{display:block;padding:.7rem 1.2rem;color:var(--text-dark);font-size:.88rem;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;font-family:'Roboto',sans-serif;transition:background .15s;}
.nav-user-menu .menu-item:hover{background:var(--lavender);}
.nav-user-menu .menu-item.danger{color:#C0392B;border-top:1px solid rgba(107,79,160,.12);}
/* LOGIN PAGE */
#page-login{min-height:100vh;padding-top:128px;align-items:center;justify-content:center;position:relative;overflow:hidden;}.login-bg{position:fixed;inset:0;z-index:0;background:linear-gradient(rgba(97,68,104,.7),rgba(97,68,104,.7)),var(--doxa-couch);background-size:cover;background-position:center;pointer-events:none;}
#page-login.active{display:flex;}
#page-confirmation.active{display:flex;}
#page-login::before,#page-login::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;}
#page-login::before{background:var(--purple);top:-100px;left:-100px;animation:floatBlob 14s ease-in-out infinite;}
#page-login::after{background:var(--purple);bottom:-100px;right:-100px;animation:floatBlob 18s ease-in-out infinite reverse;}
.login-card{background:var(--white);max-width:460px;width:92%;padding:1.75rem 2rem;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;z-index:1;margin:2rem auto;animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both;}
.login-logo{text-align:center;margin-bottom:.9rem;}
.login-logo .doxa-text{font-family:'Roboto',sans-serif;font-size:1.4rem;color:var(--purple-dark);letter-spacing:.05em;}
.login-tabs{display:flex;border-bottom:1.5px solid rgba(107,79,160,.18);margin-bottom:1rem;}
.login-tab{flex:1;padding:.85rem 0;background:transparent;border:none;font-family:'Roboto',sans-serif;font-size:.92rem;font-weight:600;color:var(--text-mid);cursor:pointer;position:relative;letter-spacing:.05em;transition:color .2s;}
.login-tab.active{color:var(--purple-dark);}
.login-tab.active::after{content:'';position:absolute;bottom:-1.5px;left:0;right:0;height:2.5px;background:var(--purple-dark);border-radius:2px;}
.login-form{display:none;flex-direction:column;gap:.6rem;}
.login-form.active{display:flex;animation:fadeUp .3s ease both;}
.login-field{display:flex;flex-direction:column;}
.login-field label{font-size:.82rem;color:var(--text-mid);margin-bottom:.35rem;font-weight:600;}
.login-field input{border:1.5px solid #D5C9E6;background:#faf8fd;padding:.85rem 1rem;font-family:'Roboto',sans-serif;font-size:1rem;color:var(--text-dark);border-radius:10px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;box-sizing:border-box;-webkit-appearance:none;}
.login-field input:focus{border-color:var(--purple-dark);box-shadow:0 0 0 3px rgba(94,62,103,.12);background:var(--white);}
.login-field input.invalid{border-color:#C0392B;}
.login-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.login-row .login-field{min-width:0;}
.login-submit{background:var(--purple-dark);color:var(--white);border:none;border-radius:100px;padding:1rem;font-family:'Roboto',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s,transform .15s,opacity .2s;letter-spacing:.03em;width:100%;margin-top:.25rem;}
.login-submit:hover:not(:disabled){background:var(--purple);transform:translateY(-1px);}
.login-submit:disabled{opacity:.65;cursor:not-allowed;transform:none;}
.login-message{font-size:.86rem;font-weight:600;text-align:center;min-height:0;border-radius:10px;padding:.65rem .9rem;margin-bottom:.6rem;display:none;}
.login-message.error{background:#fdecea;color:#b71c1c;display:block;}
.login-message.success{background:#e8f5e9;color:#1b5e20;display:block;}
.login-hint{font-size:.82rem;color:var(--text-mid);text-align:center;margin:.1rem 0;}
.login-hint a{color:var(--purple-dark);font-weight:700;cursor:pointer;text-decoration:none;}
.login-hint a:hover{text-decoration:underline;}
.login-back-link{display:block;text-align:center;margin-top:1.2rem;font-size:.82rem;cursor:pointer;color:var(--text-mid);}
.login-back-link:hover{color:var(--purple-dark);}
.login-divider{text-align:center;font-size:.78rem;color:var(--text-light);margin:.25rem 0;}
@media(max-width:480px){
.login-card{padding:1.5rem 1.3rem;width:95%;border-radius:16px;}
.login-row{grid-template-columns:1fr;}
.login-field input{font-size:16px;}
}
/* ===== OTIMIZAÇÕES MOBILE GLOBAIS ===== */
@media(max-width:640px){
/* Navbar */
nav{padding:.55rem 4%;}
.nav-logo{height:50px;}
/* Hero — ocupa a tela inteira sozinho no mobile (trust-strip fica abaixo, fora do 1º scroll) */
.hero-trust-group{height:auto;display:block;}
/* O hero cede espaço para a barra de vantagens caber na primeira tela.
NÃO devolver min-height aqui: ele empurraria a barra para fora. */
.hero{flex:1;min-height:0;align-items:stretch;}
.hero-content{
padding:0 6%;
display:flex;flex-direction:column;justify-content:flex-start;
/* Sem min-height: o conteúdo preenche o hero por `align-items:stretch`.
Exigir uma tela inteira aqui empurrava a barra de vantagens. */
box-sizing:border-box;
padding-top:max(6rem, env(safe-area-inset-top, 0px) + 5rem);
padding-bottom:max(2.5rem, env(safe-area-inset-bottom, 0px) + 2rem);
}
/* Grupo do topo: tag + título + subtexto, todos juntos, no terço superior */
.hero-top-group{display:flex;flex-direction:column;}
/* MARGEM LATERAL MENOR: 4% em vez dos 6-7% herdados. São ~16px de cada lado
num celular de 390px — o texto passa a alcançar mais para a direita e cabe
mais palavra por linha, o que reduz o número de linhas e, com isso, o véu
escuro sobre o rosto. */
.hero-content{padding-left:4%;padding-right:4%;}
/* A tarja "PLATAFORMA DE SAÚDE MENTAL" precisa de ar embaixo do menu fixo:
colada nele, some visualmente dentro da barra roxa. */
/* Menor que o resto do texto de propósito (pedido 02/08): é um rótulo, e
no tamanho antigo disputava com o título. O ornamento (a estrela) é o
primeiro caractere do próprio texto, então encolhe junto. */
.hero-tag{font-size:.7rem;letter-spacing:.13em;margin-top:.6rem;margin-bottom:.95rem;}
/* Título +15% (pedido 31/07/2026). A entrelinha fechou de 1.14 para 1.1 para
a caixa não crescer na mesma proporção da fonte — o hero é uma tela FIXA
(100svh) dividida com a barra de vantagens logo abaixo, então cada linha
a mais de altura tem que sair de algum outro respiro do bloco. */
.hero-h1{font-size:clamp(2.1rem,9vw,2.85rem);margin-bottom:0;line-height:1.1;}
/* A quebra do celular passou a ser a MESMA do desktop (pedido 02/08): as
quebras próprias do mobile partiam a frase em "na agenda dele e cuide da
sua saúde mental de / onde estiver.", com o "de" pendurado. As três
linhas do desktop (para você, / na agenda dele / e cuide...) cabem na
largura do celular com a fonte atual, e leem melhor. */
.hero-br-wide{display:inline;}
.hero-br-mob{display:none;}
.line1{margin-bottom:.7rem;display:block;}
/* A LINHA BRANCA: DE QUATRO LINHAS PARA TRÊS, COM QUEBRA ESCOLHIDA.
Medi antes de decidir. Com 330px de largura útil num celular de 390px, a
frase de 59 caracteres só caberia em DUAS linhas com o corpo em 21px —
menor que o subtítulo cinza logo abaixo, o que inverteria a hierarquia da
tela. Três linhas é o mínimo que preserva a leitura.
A economia vem do corpo (.9em → .78em) e da entrelinha (1.18 → 1.08):
menos véu escuro sobre o rosto da personagem, sem contar o que o
subtítulo e os botões sobem junto.
Só UM ` `, em "e confiáveis." — o mínimo para a frase não terminar
com "e" pendurado sozinho. Testei prender mais grupos e o resultado piorou:
um par fixo que não cabe na linha força a quebra ANTES dele, e sobra uma
linha curta no meio. Fora essa amarra, quem reparte é o `text-wrap:balance`,
que se adapta à largura real em vez de apostar numa só. */
.line2{display:block;font-size:.78em;line-height:1.08;text-wrap:balance;}
/* Subtexto +15%, entrelinha um pouco mais fechada pelo mesmo motivo do
título acima. */
.hero-sub{font-size:1.07rem;max-width:100%;margin-bottom:0;line-height:1.55;padding:1.15rem 0 0;}
/* Os três chamados viram um grupo só: 0,55rem entre os botões e 1,1rem
acima. Antes eram 0,85 e 1,8 — o suficiente para os três parecerem itens
separados e para empurrar tudo contra a barra de vantagens. */
/* OS TRÊS CHAMADOS COMO UM BLOCO SÓ.
Entre eles: 0,5rem e 0,3rem — quase colados, então leem como um grupo.
Acima deles: 1,9rem — bem mais que a folga interna, o que separa o grupo
do parágrafo e faz a leitura ir "texto ... ação" em vez de cinco itens
soltos descendo a tela.
A regra é a mesma que usei nos cards: o que é do mesmo grupo fica junto, e
o espaço grande mora entre grupos. */
/* Respiros maiores entre os blocos (pedido 02/08): a tela fixa do hero
estava sobrando embaixo, então o espaço que sobrava desceu para DENTRO
do bloco — mais ar antes dos botões, entre eles e antes do link. */
.hero-btns{flex-direction:column;align-items:stretch;gap:.62rem;margin-top:2.5rem;margin-bottom:0;}
.hero-btns a,.hero-btns button{width:100%;text-align:center;justify-content:center;font-size:.92rem;padding:.95rem 1rem;}
/* O link de texto encosta nos botões: os três são a mesma oferta em graus
diferentes de compromisso. */
/* O "Nunca fez terapia?" foi o que mais ganhou ar (pedido explícito). */
.hero-primeira-vez{margin-top:.85rem;padding:.45rem .9rem;min-height:42px;font-size:.92rem;}
/* Folga do grupo até a barra de vantagens: maior que a folga interna dos
botões, pelo mesmo motivo — o grupo precisa respirar dos dois lados. */
.hero-content{padding-bottom:clamp(2.2rem,5.5vh,3.2rem);}
.hero-video-overlay{background:linear-gradient(160deg,rgba(10,3,20,.72) 0%,rgba(40,18,65,.55) 60%,rgba(10,3,20,.65) 100%);}
/* Luz atrás da psicóloga no vídeo do Hero (pedido 31/07/2026): no recorte
largo do desktop esse brilho aparece maior porque sobra mais quadro ao
redor dela; no recorte alto do celular (object-position:center top) ele
fica mais compacto. Aqui a gente amplia e intensifica só essa camada de
vídeo — não mexe no poster de outras miniaturas do site, só nesta. */
.hero-video-bg{transform:scale(1.14);filter:brightness(1.16) contrast(1.05) saturate(1.08);}
/* Trust strip */
.trust-strip{padding:0;}
/* Seção "Encontre seu profissional" */
.find-section{grid-template-columns:1fr;gap:2rem;padding:3.5rem 5%;}
/* Seção profissionais home (carrossel) */
.pros-section-home{padding:3rem 5%;}
.pro-card-home{padding:1.8rem 1.4rem;}
/* Seção missão */
.mission-section{grid-template-columns:1fr;gap:2rem;padding:3.5rem 5%;}
/* FAQ */
.faq-section{grid-template-columns:1fr;gap:2rem;padding:3.5rem 5%;}
/* Contato */
.contact-section{grid-template-columns:1fr;gap:2rem;padding:3.5rem 5%;}
/* Topo da agenda: mais enxuto para o primeiro card aparecer antes.
O padding de cima precisa ser maior que a altura da nav (~69px aqui),
senão volta a sobrar faixa sem fundo embaixo do menu. */
.agenda-hero{padding:100px 1.1rem 1.7rem;min-height:300px;}
/* No celular a caixa é quase quadrada e o enquadramento pede outro ponto
da foto. No computador a caixa é larga e o corte original já funciona,
por isso esta regra fica só aqui.
O primeiro valor é o eixo horizontal. DIMINUIR empurra a mulher para a
direita (corta menos do lado esquerdo da foto), AUMENTAR puxa para a
esquerda. Estava em "right" (100%), que é justamente onde ela fica mais
ao centro do recorte, embaixo dos botões. */
.agenda-hero-bg{background-position:70% top;}
/* Overlay em gradiente no celular: o texto e centralizado e precisa de
contraste, mas a direita e onde esta a mulher - deixar chapado a 70%
apagava ela. Escuro ate o meio, leve na direita. */
.agenda-hero-overlay{background:linear-gradient(100deg,rgba(97,68,104,.82) 0%,rgba(97,68,104,.74) 46%,rgba(97,68,104,.44) 100%);}
.agenda-hero-title{text-shadow:0 2px 16px rgba(0,0,0,.7);}
/* Filtros da agenda */
.filters-section{padding:1.5rem 6%;}
.filters-wrap{grid-template-columns:1fr;gap:.5rem;}
.agenda-filter-section{padding:0 0 .5rem;}
/* Cards de profissionais */
/* Círculo 15% menor (176px -> 150px) para sobrar espaço para as tags não
cortarem nas laterais do card. A foto em si mantém o tamanho original
(176px) "por baixo" do círculo (centralizada pelo flex do wrapper), então
ela não fica menor/mais distante - só é vista por uma janela circular
um pouco menor. flex-shrink:0 impede o flex de espremer a imagem. */
.agenda-pro-photo{width:150px;height:150px;}
.agenda-pro-photo-img{width:176px;height:176px;max-width:none;flex-shrink:0;object-position:center top;}
/* Rede de segurança: se alguma tag longa ainda passar da largura disponível,
ela quebra a linha em vez de ser cortada pela borda do card. */
.pro-tag-pill{white-space:normal;font-size:.68rem;padding:.22rem .55rem;max-width:100%;overflow-wrap:anywhere;}
/* Perfil do profissional (novo design) */
.profile-hero{padding:1.2rem 3% 0;}
.profile-hero-inner{grid-template-columns:1fr;padding:0;min-height:auto;gap:0;border-radius:20px;overflow:hidden;}
.profile-photo-wrap{height:340px;}
.profile-info-card{margin:0;padding:1.8rem 6% 4.5rem;z-index:2;position:relative;}
/* Sem override de photo-wrap aqui — configurado no segundo bloco 640px
mais abaixo (após o bloco 900px) para vencer a cascata. */
.profile-eyebrow{margin-bottom:1rem;}
/* Nome longo quebra em DUAS linhas equilibradas também aqui no perfil
(pedido 02/08): "Isabella Cristina / Ribeiro Souza". O 17ch é a mesma
medida provada nos cartões da home (r65): o maior pedaço do elenco depois
do balanceamento cabe nela, então nenhum nome vai para três linhas. Nome
curto continua numa linha só — o teto de largura não obriga a quebrar. */
.profile-name{font-size:clamp(1.6rem,6.5vw,2.2rem);margin-bottom:.9rem;max-width:min(100%,17ch);text-wrap:balance;}
.profile-name-divider{margin-bottom:1rem;}
.profile-crp{font-size:.92rem;}
.profile-abordagem{font-size:.88rem;}
.profile-audience{font-size:.78rem;margin-top:.25rem;}
.profile-tags-wrap{gap:.4rem;margin-top:1.1rem;}
.profile-tag{font-size:.72rem;padding:.32rem .75rem;}
.month-hours-panel{margin:0 0 1rem;}
/* Agenda + bio do profissional */
.profile-body{grid-template-columns:1fr;padding:0 4% 3rem;}
.profile-schedule{padding:1.8rem 1.4rem;margin:1.8rem 0 0;zoom:1;}
/* A faixa roxa do cabeçalho sangra até as bordas: margens = padding do card
NESTE breakpoint (1.8/1.4rem, diferente do desktop). */
.schedule-head-row{margin:-1.8rem -1.4rem .55rem;padding:.75rem 1.1rem;}
/* No celular o botão verde quebra para baixo do título e ocupa a largura
toda da faixa roxa (mesmo desenho de antes da mudança). */
/* Justificado à direita e do tamanho do texto (pedido 02/08): esticado na
largura toda, sobrava um vão enorme entre o horário e a setinha. */
.schedule-head-row .next-slot-cta{flex:0 1 auto;width:auto;max-width:100%;margin:.4rem 0 0 auto;}
.profile-schedule{--respiro-passo:.45rem;}
.schedule-day-label{font-size:1.05rem;}
.schedule-section-head h3::before,.schedule-day-label::before,.plano-titulo::before{width:23px;height:23px;font-size:.78rem;margin-right:.5rem;}
/* Textos da agenda menores e mais harmoniosos no mobile (pedido 31/07/2026):
sem o zoom:.8 do desktop, esses elementos usavam o tamanho "cru" do CSS e
ficavam grandes demais na tela pequena. A quebra depois de "?" separa a
pergunta da instrução, em vez de as duas correrem juntas numa frase só. */
.schedule-intro{font-size:.98rem;line-height:1.35;}
.schedule-intro-l2{display:block;margin-top:.08rem;}
.schedule-section-head h3{font-size:1.05rem;}
/* O fuso ao lado do título espremia os dois e o "horário" caía sozinho na
linha de baixo (pedido 02/08). O fuso vira uma linha própria, alinhada
com o texto do título (23px da bolinha + o vão). */
.schedule-section-head{flex-wrap:wrap;row-gap:.05rem;}
.schedule-section-head .timezone{flex-basis:100%;padding-left:calc(23px + .5rem);font-size:.7rem;}
.plano-titulo{font-size:1.05rem;}
.calendar-title{font-size:1.18rem;min-width:118px;}
/* A coluna de leitura estava estreita à toa: 2rem de recuo à esquerda
num celular de 390px comia 13% da linha (pedido 02/08). */
.profile-bio{padding:2rem 1.35rem 0;}
.profile-bio p{margin-left:1rem;margin-right:.35rem;}
.calendar-grid{gap:.28rem;}
/* `height:36px` fixo brigava com o aspect-ratio e voltava a achatar o dia no
celular. Aqui vale a mesma regra da versão larga, só com o teto menor. */
/* Reequilíbrio 31/07/2026: com os textos da coluna maiores, o dia de
1.1rem/40px tinha ficado o menor elemento da tela. 1.2rem/44px também
devolve a área de toque mínima recomendada (44px). */
.calendar-day{font-size:1.2rem;font-weight:600;width:min(100%,44px);height:auto;aspect-ratio:1;padding:0;}
.calendar-day.available::after{width:.95em;height:2.5px;}
.time-slots-grid{gap:.4rem;}
.time-slot{padding:.5rem 1.2rem;font-size:.95rem;}
/* Botões de valor sem cortes (pedido 02/08): "4 sessões" partia em duas
linhas porque o corpo era espremido pela coluna de preço. O nome não
quebra mais e o corpo tem piso maior; o detalhe encolhe um ponto para as
duas linhas dele caberem na altura do botão. */
.plano-corpo{min-width:96px;}
.plano-nome{white-space:nowrap;font-size:1rem;}
.plano-detalhe{font-size:.78rem;line-height:1.25;}
.plano-por{font-size:.7rem;}
/* Meus agendamentos (pedido 02/08): ar entre as duas caixas, embaixo do
botão "Ver profissionais" e acima do "Conhece alguém...". */
.appts-empty{padding:2.8rem 1.5rem 3rem;margin-bottom:1.35rem;}
.indicacao-box{padding-top:1.55rem;}
.appt-actions{grid-column:1 / -1;}
.appt-actions button,.appt-actions a{width:100%;text-align:center;justify-content:center;}
/* Booking */
.booking-wrap{padding:2rem 4% 3rem;}
.booking-fields{grid-template-columns:1fr;}
.booking-grid{grid-template-columns:1fr;}
.booking-summary{position:static;border-radius:14px;}
/* Painel admin */
.admin-card-head{flex-direction:column;}
/* Painel terapeuta */
/* Chat */
.chat-input-area{padding-bottom:calc(.85rem + env(safe-area-inset-bottom));}
/* Match modal */
/* Login */
.login-card{padding:1.4rem 1.2rem;}
.login-row{grid-template-columns:1fr;}
/* Trabalhe conosco */
/* Footer (pedido 02/08): tudo justificado à esquerda e mais compacto; a
ÚNICA parte centralizada é a assinatura da marca (nome + "Saúde mental
para todos."). Os títulos das divisões escurecem para o negrito que já
têm aparecer de verdade — no cinza-claro antigo o peso 700 não lia. */
footer{grid-template-columns:1fr;gap:1.35rem;text-align:left;padding:2.4rem 7% 2.6rem;}
footer ul{align-items:flex-start;gap:.4rem;}
footer h4{color:var(--text-mid);font-weight:700;margin-bottom:.5rem;}
.footer-brand-name,.footer-brand-tag{text-align:center;}
footer>div>p{text-align:left;}
/* Painel terapeuta - semana editor */
.week-add-row{flex-wrap:wrap;}
/* Confirmação */
.confirmation-card{padding:2rem 1.2rem;}
.confirmation-actions{flex-direction:column;}
.confirmation-actions button{width:100%;}
/* PIX */
.pix-code-box{font-size:.7rem;word-break:break-all;}
/* Página 404 */
.notfound-actions{flex-direction:column;}
.notfound-actions button{width:100%;}
/* Questionário match */
/* Avaliação */
/* Seção missão */
}
@media(max-width:390px){
.hero-h1{font-size:clamp(1.78rem,9.2vw,2.3rem);line-height:1.08;}
.hero-sub{font-size:.97rem;line-height:1.48;padding-top:.75rem;}
.hero-btns{gap:.45rem;margin-top:.9rem;}
.btn-green,.btn-gold{padding:.72rem 1.2rem;font-size:.82rem;}
.hero-primeira-vez{margin-top:.25rem;min-height:36px;}
.pros-section-home{padding:2.5rem 4%;}
.find-section{padding:2.8rem 4%;}
.mission-section{padding:2.8rem 4%;}
.faq-section{padding:2.8rem 4%;}
.contact-section{padding:2.8rem 4%;}
}
.login-submit{background:var(--purple-dark);color:var(--white);padding:.95rem;border-radius:100px;border:none;font-size:.92rem;font-weight:700;letter-spacing:.05em;cursor:pointer;font-family:'Roboto',sans-serif;margin-top:.5rem;transition:background .2s,transform .15s;text-transform:uppercase;}
.login-submit:hover:not(:disabled){background:var(--purple);transform:translateY(-1px);}
.login-submit:disabled{background:#B8AAD0;cursor:not-allowed;transform:none;}
.login-message{padding:.8rem 1rem;border-radius:8px;font-size:.85rem;line-height:1.5;display:none;margin-top:.5rem;}
.login-message.error{background:#FDEBE9;color:#C0392B;border:1px solid #F5C6CB;display:block;}
.login-message.success{background:#E8F5E2;color:#3D6E1F;border:1px solid #C3E6B5;display:block;}
.login-hint{text-align:center;font-size:.82rem;color:var(--text-mid);margin-top:1rem;}
.login-hint a{color:var(--purple-dark);font-weight:600;cursor:pointer;text-decoration:underline;}
.login-back-link{display:block;text-align:center;margin-top:1.5rem;color:rgba(255,255,255,.7);font-size:.82rem;text-decoration:none;cursor:pointer;}
.login-back-link:hover{color:var(--gold-light);}
/* MEUS AGENDAMENTOS */
#page-meus-agendamentos{background:var(--lavender);min-height:100vh;padding-top:80px;}
.appts-wrap{max-width:980px;margin:0 auto;padding:106px 5% 5rem;}
@media(max-width:640px){.appts-wrap{padding:78px 5% 3.5rem;}}
.appts-header{margin-bottom:2rem;}
.appts-title{font-family:'Roboto',sans-serif;font-weight:400;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--purple-dark);margin-bottom:.5rem;}
.appts-subtitle{font-size:1rem;color:var(--text-mid);}
/* ===================== CRÉDITOS DE SESSÃO ===================== */
.creditos-box{background:var(--lavender);border:1px solid var(--purple);border-radius:18px;padding:1.4rem 1.5rem;margin-bottom:1.6rem;display:none;}
/* Proxima sessao: a informacao que o paciente vem buscar. Fica acima de tudo,
com o botao da sala sempre visivel. A sala e derivada do id DA CONSULTA
(doxa-), entao cada atendimento tem endereco proprio e ninguem entra
na sessao de outra pessoa. O link some 1h depois do inicio, como na lista. */
.pend-pgto{display:none;background:#FFF6E6;border:1.5px solid #E0B25C;border-radius:16px;padding:1.1rem 1.2rem;margin-bottom:1.2rem;}
.pend-pgto.show{display:block;}
.pend-pgto-tit{font-family:'Roboto',sans-serif;font-weight:700;font-size:1.02rem;color:#8A5A00;margin:0 0 .25rem;}
.pend-pgto-sub{font-size:.86rem;color:var(--text-mid);margin:0 0 .9rem;line-height:1.45;}
.pend-pgto-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;background:#fff;border:1px solid #EFE0C4;border-radius:12px;padding:.7rem .85rem;}
.pend-pgto-item + .pend-pgto-item{margin-top:.6rem;}
.pend-pgto-info{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.pend-pgto-info strong{font-size:.95rem;color:var(--text-dark);}
.pend-pgto-info span{font-size:.82rem;color:var(--text-mid);}
.pend-pgto-resta{color:#8A5A00;font-weight:600;}
.pend-pgto-venc{color:#C0392B;font-weight:600;}
.pend-pgto-acoes{display:flex;gap:.5rem;flex-wrap:wrap;}
@media(max-width:640px){
.pend-pgto-item{flex-direction:column;align-items:stretch;}
.pend-pgto-acoes{width:100%;}
.pend-pgto-acoes button{flex:1;}
}
.prox-sessao{display:none;gap:2rem;align-items:center;background:var(--purple);color:var(--white);border-radius:20px;padding:2rem 2.2rem;margin-bottom:1.4rem;}
.prox-sessao.show{display:flex;}
.prox-foto{width:144px;height:144px;flex:0 0 144px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--foto-luz);border:2px solid var(--gold);}
.prox-corpo{flex:1;min-width:0;}
.prox-rotulo{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-light);margin:0 0 .55rem;}
.prox-quando{font-family:'Roboto',sans-serif;font-size:1.6rem;font-weight:700;line-height:1.25;margin:0 0 .45rem;}
.prox-com{font-size:1rem;opacity:.92;margin:0 0 .4rem;}
.prox-obs{font-size:.82rem;opacity:.72;margin:0;line-height:1.5;max-width:44ch;}
.prox-acoes{display:flex;flex-direction:column;gap:.65rem;flex:0 0 auto;min-width:200px;}
.prox-btn-sala{background:var(--gold);color:var(--purple-dark);border:none;border-radius:12px;padding:.85rem 1.4rem;font-family:'Roboto',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;transition:filter .15s;}
.prox-btn-sala:hover{filter:brightness(1.07);}
.prox-btn-sec{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.45);border-radius:12px;padding:.6rem 1.4rem;font-size:.85rem;font-weight:600;cursor:pointer;min-height:44px;}
/* ARMADILHA REGISTRADA: a regra `nav{position:fixed;top:0;...}` no topo deste
arquivo e de ELEMENTO, nao de classe. Qualquer