com
display:block + text-align-last:justify; a última linha de cada
fica naturalmente à esquerda (sem justify). */
.about-text {
position: absolute;
left: 10.052083%;
top: 33.611111%;
width: 30.572917%;
color: #C66B3D;
font-family: var(--font-primary);
font-size: 1.5625cqw;
line-height: 1.28;
letter-spacing: 0.04em;
font-weight: 400;
z-index: 2;
}
.about-text p {
margin: 0 0 calc(34 / 1920 * 100cqw) 0;
}
.about-text p:last-child {
margin-bottom: 0;
}
/* Justify por CSS (mesmo padrão da psychotherapy-description): cada
linha é um bloco esticado até as duas bordas com espaçamento UNIFORME
— substitui o justify manual por (espaços desiguais, calibração
no olho). A última linha de cada parágrafo fica natural. */
/* Justify natural: o texto FLUI livre (sem quebras manuais) e o
navegador quebra e justifica sozinho — bordas retas, espaçamento
uniforme, última linha natural. Funciona em qualquer largura
(desktop e mobile) sem calibração. */
.about-text p {
text-align: justify;
}
/* FOTO DA PSICÓLOGA
left: 887/1920 = 46.197917%
top: 272/1080 = 25.185185%
width: 490/1920 = 25.520833% (= 1920 − 887 − 543, casa com bordas)
height: 670/1080 = 62.037037%
border-radius: 14/1920 → 0.729167cqw */
.about-photo {
position: absolute;
left: 46.197917%;
top: 25.185185%;
width: 25.520833%;
height: 62.037037%;
object-fit: cover;
border-radius: calc(14 / 1920 * 100cqw);
display: block;
z-index: 2;
}
/* SÍMBOLO DECORATIVO
symbolM.png é um quadrado isolado (~800×800). Dimensionado
pela altura da seção para ficar tão grande quanto possível,
posicionado à direita com parte cortada pela borda.
z-index: 3 → fica POR CIMA da foto (z-index: 2). */
.about-symbol {
position: absolute;
right: -33%;
top: -7%;
height: 115%;
width: auto;
display: block;
z-index: 3;
pointer-events: none;
}
/* ============================================================
PSYCHOTHERAPY SECTION (Seção 3)
Prancheta proporcional 16:9 baseada em 1920x1080.
Fundo escuro, moldura à esquerda com bg1, texto à direita,
tags à direita-baixo. Mesma lógica da hero e about.
============================================================ */
.psychotherapy-section {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #0A0A0A;
overflow: hidden;
container-type: inline-size;
}
.psychotherapy-canvas {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Backgrounds da section3: 4 imagens empilhadas, só a .is-active
fica com opacity 1. JS faz o crossfade trocando a classe. */
.psychotherapy-section-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 600ms ease;
}
.psychotherapy-section-bg.is-active {
opacity: 1;
}
/* Bloco de texto da section3: wrapper que ocupa todo o canvas.
Sempre visível em todos os slides (título e descrição persistem
por cima do crossfade dos backgrounds). */
.psychotherapy-text-block {
position: absolute;
inset: 0;
opacity: 1;
z-index: 2;
pointer-events: none;
}
.psychotherapy-text-block.is-visible {
opacity: 1;
}
/* Bloco de informações sobre as pílulas/tags fixadas no bg1.webp.
Sempre visível em todos os slides — fica fixo por cima do
crossfade dos backgrounds. */
.psychotherapy-info {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
opacity: 1;
}
.psychotherapy-info.visible {
opacity: 1;
}
.psychotherapy-info-item {
position: absolute;
display: block;
color: #FFFFFF;
font-family: var(--font-primary);
font-weight: 400;
font-size: 1.529167cqw;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
}
/* Coordenadas individuais baseadas no mockup 1920x1080.
Todos compartilham left para criar coluna vertical alinhada;
tops espaçados em ~6.1% (que é a altura proporcional da pílula). */
/* Todas as 4 pílulas alinhadas pela esquerda no MESMO left
do .psychotherapy-title e .psychotherapy-description
(= 1079/1920 = 56.197917%), conforme escopo do PSD. */
.psychotherapy-info .info-1 {
left: 56.197917%;
top: 65.740741%;
}
/* "Sessões semanais, com duração de 50 minutos"
régua: left 1082, top 776 (canvas 1920×1080) */
.psychotherapy-info .info-2 {
left: 56.354167%;
top: 71.851852%;
}
/* "Modalidade online e presencial"
régua: left 1082, top 842 (canvas 1920×1080) */
.psychotherapy-info .info-3 {
left: 56.354167%;
top: 77.962963%;
}
/* "São Bernardo do Campo (SP)"
régua: left 1082, top 908 (canvas 1920×1080) */
.psychotherapy-info .info-4 {
left: 56.354167%;
top: 84.074074%;
}
/* ============================================================
SYMPTOMS SECTION (Seção 4)
Prancheta proporcional 16:9 baseada em 1920×1080.
Fundo azul-claro, symbolI à esquerda parcialmente off-canvas,
slider de 6 slides com label fixo "Talvez você esteja:" +
texto rotativo terracota à direita, setas e 6 dots.
Réguas do mockup:
- Bloco de texto: left 1040 / right 256 → width 624 (32.5%)
- Topo do bloco rotativo: 427 px → 39.537037%
- Topo dos dots: 427 + 435 = 862 px → 79.814815%
============================================================ */
.symptoms-section {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #AFCDE1;
overflow: hidden;
container-type: inline-size;
}
.symptoms-canvas {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* SYMBOL I (sol terracota)
À esquerda, parcialmente off-canvas. Dimensionado pela LARGURA.
O PNG (5190×5195) tem padding transparente em torno do sol — então
width do ![]()
precisa ser maior que a régua do mockup pra que o
SOL VISÍVEL atinja os 1120 px da régua.
Régua do mockup: 1120 px = distância da borda direita do sol até
a borda direita do canvas → borda direita visível ≈ 41.67%.
Compensando o padding (~10% do PNG):
- width: 66.67% (= 1280 px no canvas; sol visível ≈ 1152 px)
- left: -20.83% (= -400 px; centro do sol em x ≈ 240 px)
- top: -9.26% (centralizado verticalmente; sol quadrado de
~1280 px excede a altura 1080 do canvas em ~200 px) */
.symptoms-symbol {
position: absolute;
left: -20.833333%;
top: -9.259259%;
width: 66.666667%;
height: auto;
display: block;
z-index: 1;
pointer-events: none;
}
/* "Talvez você esteja:" - título/label (Skia CC Regular)
left: 1040/1920 = 54.166667% (alinhado ao bloco rotativo)
top: ~300/1080 ≈ 27.777778% (estimado — sem régua no mockup)
font-size: 40/1920 = 2.083333cqw (Photoshop 40pt @ 72dpi) */
.symptoms-label {
position: absolute;
/* Réguas do escopo: left 1041/1920, top 295/1080 */
left: 54.21875%;
top: 27.314815%;
margin: 0;
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 2.083333cqw;
line-height: 1.2;
letter-spacing: 0.02em;
font-weight: 400;
z-index: 2;
}
/* Texto rotativo terracota (slider de 6 slides)
left: 1040/1920 = 54.166667%
top: 427/1080 = 39.537037%
font-size: 50/1920 = 2.604167cqw (Photoshop 50pt @ 72dpi)
letter-spacing: 0 (sem tracking extra — bate com o PSD)
Sem width fixo: cada slide ocupa a largura natural do seu texto,
reproduzindo o comportamento auto-expansivo do text box no PSD.
white-space: nowrap impede quebra automática — as quebras vêm
apenas dos
definidos no array symptomsSlides (js/main.js). */
.symptoms-text {
position: absolute;
left: 54.166667%;
top: 39.537037%;
margin: 0;
color: #C66B3D;
font-family: var(--font-primary);
font-size: 2.604167cqw;
line-height: 1.1;
letter-spacing: 0;
font-weight: 400;
white-space: nowrap;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 400ms ease;
}
.symptoms-text.is-active {
opacity: 1;
pointer-events: auto;
}
/* Slide 2 (desktop) — réguas do escopo: top 458/1080 (3 linhas, senta
mais baixo que a base do slide 1). left herda 1040/1920 da base. */
.symptoms-text[data-sym-slide="2"] {
top: 42.407407%;
}
/* Slides 3, 4 e 6 (desktop) — réguas do escopo: top 459/1080. left herda da base. */
.symptoms-text[data-sym-slide="3"],
.symptoms-text[data-sym-slide="4"],
.symptoms-text[data-sym-slide="6"] {
top: 42.5%;
}
/* Setas ‹ › brancas — clicáveis para prev/next.
Réguas do mockup:
- top: 506/1080 = 46.851852% (top do retângulo da seta)
- bottom: 498/1080 → derivado (não usado direto no CSS)
- width: (1920 − 1790 − 91)/1920 = 39/1920 = 2.03125cqw
- height: (1080 − 506 − 498)/1920 = 76/1920 = 3.958333cqw
Setas posicionadas pela borda (left/right) e pelo top — sem
translateY, porque 506 mede o topo do elemento, não o centro.
- ‹ prev: left 50% (sem régua — antes do bloco rotativo)
- › next: right 91/1920 = 4.739583% (régua) */
.symptoms-arrow {
position: absolute;
top: 46.851852%;
width: 2.03125cqw;
height: 3.958333cqw;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: #FFFFFF;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
transition: opacity 250ms ease;
}
.symptoms-arrow:hover,
.symptoms-arrow:focus-visible {
opacity: 1;
}
.symptoms-arrow:focus {
outline: none;
}
.symptoms-arrow img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
pointer-events: none;
}
/* Réguas do escopo s4: prev left 925/1920; next folga direita 91px. */
.symptoms-arrow--prev { left: 48.177083%; }
.symptoms-arrow--next { right: 4.739583%; }
/* 6 dots indicadores
Réguas do mockup:
- left: 1049/1920 = 54.635417%
- top: 862/1080 = 79.814815%
- largura total do bloco: 1920 − 1049 − 643 = 228 px
- altura dos dots: 1080 − 862 − 201 = 17 px
- dot width/height: 17/1920 = 0.885417cqw
- gap: (228 − 6×17) / 5 = 25.2 px = 1.3125cqw */
.symptoms-dots {
position: absolute;
left: 54.635417%;
top: 79.814815%;
display: flex;
gap: 1.3125cqw;
z-index: 3;
}
.symptoms-dot {
width: 0.885417cqw;
height: 0.885417cqw;
border-radius: 50%;
border: 1px solid #FFFFFF;
background: transparent;
padding: 0;
cursor: pointer;
transition: background-color 250ms ease;
}
.symptoms-dot.active {
background: #FFFFFF;
border-color: #FFFFFF;
cursor: default;
}
.symptoms-dot:not(.active):hover,
.symptoms-dot:not(.active):focus-visible {
background: rgba(255, 255, 255, 0.35);
}
/* Indicador (dots) do slider da section3 - 4 bolinhas na área
inferior da imagem/janela esquerda. Cliques mudam o slide e
reiniciam o timer (ver main.js). */
.psychotherapy-dots {
position: absolute;
left: 26.354167%; /* era 24.8% (476px) — movido 30px à direita (506/1920) */
top: 79.2%;
display: flex;
align-items: center;
gap: calc(16 / 1920 * 100cqw);
z-index: 4;
}
.psychotherapy-dot {
width: calc(18 / 1920 * 100cqw);
height: calc(18 / 1920 * 100cqw);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.85);
background: transparent;
padding: 0;
cursor: pointer;
transition: background-color 250ms ease, opacity 250ms ease;
}
.psychotherapy-dot.active {
background: #FFFFFF;
border-color: #FFFFFF;
}
.psychotherapy-dot:not(.active) {
opacity: 0.85;
}
.psychotherapy-dot:not(.active):hover {
opacity: 1;
}
/* TÍTULO (Slide 1)
left: 1079/1920 = 56.197917%
top: 238/1080 = 22.037037%
width: 537/1920 = 27.96875%
font-size: 2.6cqw → ≈50px em 1920 (ligeiramente menor que o PSD,
para casar a razão visual com a descrição reduzida). */
.psychotherapy-title {
position: absolute;
left: 56.197917%;
top: 21.2%;
width: 27.96875%;
margin: 0;
color: #C66B3D;
font-family: var(--font-primary);
font-size: 2.6cqw;
line-height: 1.18;
letter-spacing: 0.06em;
font-weight: 400;
z-index: 2;
white-space: nowrap;
}
/* DESCRIÇÃO (Slide 1)
left: 1079/1920 = 56.197917% (alinhada ao mesmo left do título)
top: 423/1080 = 39.166667%
width: 599/1920 = 31.197917%
font-size: 1.30cqw
Cada .desc-line dentro é uma linha-bloco justificada via ::after
(trick para forçar justify mesmo em linha única com nowrap). */
.psychotherapy-description {
position: absolute;
left: 56.197917%;
top: 38.33%;
width: 31.197917%;
margin: 0;
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 1.30cqw;
line-height: 1.32;
letter-spacing: 0.040em;
word-spacing: 0.05em;
font-weight: 400;
z-index: 2;
}
.psychotherapy-description span,
.psychotherapy-description .desc-line {
display: block;
width: 100%;
white-space: nowrap;
text-align: justify;
text-align-last: justify;
}
.psychotherapy-description span::after,
.psychotherapy-description .desc-line::after {
content: "";
display: inline-block;
width: 100%;
}
/* ============================================================
BENEFITS SECTION (Seção 5)
Prancheta proporcional 16:9 baseada em 1920×1080.
Fundo terracota, symbolS à direita parcialmente off-canvas,
slider de 6 slides com label fixo "A terapia pode ajudar
você a:" + texto rotativo BRANCO à esquerda, setas + 6 dots.
Header acima dessa seção fica em modo branco (header-psychotherapy)
com logo terracota — controlado em main.js.
Réguas do mockup:
- Bloco de texto (label + rotativo): left 191 → 9.947917%
- Topo do bloco rotativo: 429 → 39.722222%
- Seta direita: left 1019 → 53.072917%
- Topo dos dots: 429 + 432 = 861 → 79.722222%
============================================================ */
.benefits-section {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #C66B3D;
overflow: hidden;
container-type: inline-size;
}
.benefits-canvas {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* SYMBOL S (anel decorativo branco)
À direita, parcialmente off-canvas. Sem régua explícita —
posições estimadas visualmente conforme o mockup. */
.benefits-symbol {
position: absolute;
/* Réguas PSD (painel Transform, canvas 1920×1080):
X=1119 / Y=-68 / L=1219 / A=1229 */
left: 58.28125%;
top: -6.296296%;
width: 63.489583%;
height: auto;
display: block;
z-index: 1;
pointer-events: none;
}
/* "A terapia pode ajudar você a:" — título (Skia CC Regular)
left: 191/1920 = 9.947917% (alinhado ao bloco rotativo)
top: ~300/1080 ≈ 27.777778% (estimado — sem régua no mockup)
font-size: 40/1920 = 2.083333cqw (Photoshop 40pt @ 72dpi) */
.benefits-label {
position: absolute;
/* Réguas do escopo: left 191/1920, top 293/1080 */
left: 9.947917%;
top: 27.12963%;
margin: 0;
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 2.083333cqw;
line-height: 1.2;
letter-spacing: 0.02em;
font-weight: 400;
z-index: 2;
}
/* Texto rotativo branco (slider de 6 slides)
left: 191/1920 = 9.947917%
top: 429/1080 = 39.722222%
font-size: 50/1920 = 2.604167cqw (Photoshop 50pt @ 72dpi)
letter-spacing: 0
line-height: 1.1 (lições da Section 4 — bate com o PSD)
Sem width fixo: cada slide ocupa a largura natural do seu texto,
reproduzindo o comportamento auto-expansivo do text box no PSD.
white-space: nowrap impede quebra automática — as quebras vêm
apenas dos
definidos no array benefitsSlides (js/main.js). */
.benefits-text {
position: absolute;
left: 9.947917%;
/* Réguas do escopo (slide 1): box 191/489→599 (110px = 2 linhas).
A BASE 599 é compartilhada por todos os slides (folga 481 do slide 1
e guia 224px até os dots confirmam) → ancora pelo bottom:
(1080−599)/1080 = 44.537037%. 2 linhas nascem em 489, 4 em 379. */
bottom: 44.537037%;
margin: 0;
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 2.604167cqw;
line-height: 1.1;
letter-spacing: 0;
font-weight: 400;
white-space: nowrap;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 400ms ease;
}
.benefits-text.is-active {
opacity: 1;
pointer-events: auto;
}
/* Slide 3 (desktop) — réguas do escopo: box 191/427→646 (219px = 4 linhas).
A base 646 ≠ 599 do slide 1: os slides de 4 linhas NÃO compartilham a
base dos de 2 — posição própria por slide (top + anula o bottom-anchor).
min-width 769: o seletor com [data-ben-slide] é mais específico que o
.benefits-text do mobile — sem o media, vazaria pro mobile. */
@media (min-width: 769px) {
.benefits-text[data-ben-slide="2"],
.benefits-text[data-ben-slide="3"],
.benefits-text[data-ben-slide="5"],
.benefits-text[data-ben-slide="6"],
.benefits-text[data-ben-slide="7"] {
top: 39.537037%;
bottom: auto;
}
/* Slide 4 — réguas do escopo: box 191/482→590 (108px = 2 linhas).
7px acima da base do slide 1 (489→599): caixa própria por slide. */
.benefits-text[data-ben-slide="4"] {
top: 44.62963%;
bottom: auto;
}
}
/* Setas ‹ › via PNG (SETAE5.png e SETAD5.png) — consistência
com Section 4 que também usa PNG. Dimensões espelham a régua
aplicada na Section 4 (39 × 76 px no canvas 1920×1080):
- width: 39/1920 = 2.03125cqw
- height: 76/1920 = 3.958333cqw
- top: 506/1080 = 46.851852%
‹ prev: left ~4% (sem régua específica na Section 5)
› next: left 1019/1920 = 53.072917% (régua) */
.benefits-arrow {
position: absolute;
top: 46.574074%; /* 503/1080 — escopo s5 (folga topo 503 / base 499) */
width: 2.083333cqw; /* 40/1920 — escopo s5 (956 + 40 + 924 = 1920) */
height: 3.958333cqw;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: #FFFFFF;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
transition: opacity 250ms ease;
}
.benefits-arrow:hover,
.benefits-arrow:focus-visible {
opacity: 1;
}
.benefits-arrow:focus {
outline: none;
}
.benefits-arrow img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
pointer-events: none;
}
.benefits-arrow--prev { left: 4.739583%; } /* 91/1920 — escopo s5 */
.benefits-arrow--next { left: 49.791667%; } /* 956/1920 — escopo s5 */
/* 6 dots indicadores
left: 9.947917% (mesma coluna do bloco)
top: (429+432)/1080 = 79.722222% (régua 432 = distância vertical
do topo do bloco rotativo até
a linha dos dots) */
/* 6 dots indicadores
Réguas do mockup:
- left: 200/1920 = 10.416667%
- top: 823/1080 = 76.203704%
- largura total do bloco: 1920 − 200 − 1491 = 229 px
- altura dos dots: 1080 − 823 − 239 = 18 px
- dot width/height: 18/1920 = 0.9375cqw
- gap: (229 − 6×18) / 5 = 24.2 px = 1.260417cqw */
.benefits-dots {
position: absolute;
left: 10.416667%;
top: 76.203704%;
display: flex;
gap: 1.260417cqw;
z-index: 3;
}
.benefits-dot {
width: 0.9375cqw;
height: 0.9375cqw;
border-radius: 50%;
border: 1px solid #FFFFFF;
background: transparent;
padding: 0;
cursor: pointer;
transition: background-color 250ms ease;
}
.benefits-dot.active {
background: #FFFFFF;
border-color: #FFFFFF;
cursor: default;
}
.benefits-dot:not(.active):hover,
.benefits-dot:not(.active):focus-visible {
background: rgba(255, 255, 255, 0.35);
}
/* ============================================================
ADDRESS SECTION (Seção 6)
Prancheta proporcional 16:9 baseada em 1920×1080.
Background = iframe do Google Maps embed centrado no endereço
do consultório. Card branco à esquerda com título "Endereço"
e endereço completo em terracota.
Header acima dessa seção fica em modo branco (header-psychotherapy)
com logo terracota — controlado em main.js.
Posições do card e textos: estimadas visualmente do mockup
(sem réguas explícitas). Podem ser calibradas depois.
============================================================ */
.address-section {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #FFFFFF;
overflow: hidden;
container-type: inline-size;
}
.address-canvas {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Iframe do Google Maps — cobre todo o canvas como background.
referrerpolicy / loading="lazy" / title definidos no HTML. */
.address-map {
position: absolute;
/* iframe alargado (centro do iframe = meio da faixa visível à direita
do card, 75.99% da largura). Com o embed centrado no PIN (troca de
src via JS no desktop), o pin cai SEMPRE nessa faixa, proporcional
em qualquer largura de janela. Overflow cortado pela section. */
left: 0;
top: 0;
width: 151.979167%;
height: 100%;
border: 0;
display: block;
z-index: 0;
pointer-events: none; /* TRAVA o mapa — sem arrastar/zoom acidental. */
}
/* Card branco sólido — à esquerda, sobre o mapa.
Réguas do mockup:
- left: 95/1920 = 4.947917%
- top: 229/1080 = 21.203704%
- width: (1920 − 95 − 922) /1920 = 903/1920 = 47.03125%
- height: (1080 − 229 − 149)/1080 = 702/1080 = 65%
- border-radius: ~20 px → 1.041667cqw (cantos arredondados do escopo) */
.address-card {
position: absolute;
left: 4.947917%;
top: 21.203704%;
width: 47.03125%;
height: 65%;
background: #FFFFFF;
border-radius: 1.041667cqw;
z-index: 2;
}
/* Link pro Google Maps: envolve SÓ título + endereço. display: contents
faz o não gerar caixa — os textos ficam exatamente onde estão e
a área de clique é só eles. Hover: leve scale pra indicar botão. */
.address-link {
display: contents;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.address-link .address-title,
.address-link .address-text {
transition: transform 200ms ease;
transform-origin: left center;
}
.address-link:hover .address-title,
.address-link:hover .address-text,
.address-link:focus-visible .address-title,
.address-link:focus-visible .address-text {
transform: scale(1.05);
}
/* Nome da clínica em linha própria (mesma fonte/tamanho). Sem margens
extras: as distâncias do texto até as bordas do card seguem as réguas. */
.address-clinic {
display: block;
}
/* Título "Endereço" — terracota, grande
Réguas do card:
- left: card_left + 86 = 55 + 86 = 141 → 141/1920 = 7.34375%
- top: card_top + 396 = 229 + 396 = 625 → 625/1080 = 57.87037%
- font-size: 68.69/1920 = 3.578646cqw (Photoshop 68.69pt @ 72dpi) */
.address-title {
position: absolute;
/* left pela régua (96/903). Top SUBIU 1 linha junto com o texto
(que é ancorado pela base): preserva o gap título→texto original
do escopo (~31px): texto top 443 − 31 − 69 (corpo) = 343/702. */
left: 10.631229%;
top: 48.860399%;
margin: 0;
color: #C66B3D;
font-family: var(--font-primary);
font-size: 3.578646cqw;
line-height: 1;
letter-spacing: 0.02em;
font-weight: 400;
z-index: 3;
}
/* Endereço completo — terracota, fonte menor.
Réguas do card:
- left: card_left + 102 = 55 + 102 = 157 → 157/1920 = 8.177083%
- top: card_top + 484 = 229 + 484 = 713 → 713/1080 = 66.018519%
- altura: 702 − 484 − 134 = 84 px (3 linhas em ~28 px cada)
- font-size: 31.48/1920 = 1.639583cqw (Photoshop 31.48pt @ 72dpi)
- line-height: 1.0 (compacto, bate com a régua de altura) */
.address-text {
position: absolute;
/* Ancorado pela BASE: a distância até a borda inferior do card é a
estipulada pelo escopo original (3 linhas: top 484 + 123 = 607 →
folga 95/702). Com mais linhas, o bloco cresce PRA CIMA. */
left: 11.295681%;
bottom: 13.532764%;
margin: 0;
color: #C66B3D;
font-family: var(--font-primary);
font-size: 1.639583cqw;
line-height: 1.3;
letter-spacing: 0.01em;
font-weight: 400;
z-index: 3;
}
/* ============================================================
FOOTER (site-footer)
Faixa terracota com altura proporcional ao mockup.
Nav vertical de 4 links à esquerda + telefone grande à direita.
Header acima do footer cai automaticamente em modo "hero"
(transparente), já que fundo é terracota igual à hero.
Calibrado visualmente conforme o PSD:
- Altura: aspect-ratio 1920/300 (footer compacto, proporcional)
- Nav left: 194/1920 = 10.104167% (régua do mockup)
- Nav top: 50% + translateY -50% (centralizado vertical)
- Phone right: 193/1920 = 10.052083% (régua do mockup)
- Phone top: 50% + translateY -50% (centralizado vertical)
============================================================ */
.site-footer {
position: relative;
width: 100%;
aspect-ratio: 1920 / 400;
background: #C66B3D;
overflow: hidden;
container-type: inline-size;
}
/* Linha decorativa branca atravessando o topo do footer.
Réguas do mockup:
- left: 194/1920 = 10.104167%
- right: 193/1920 = 10.052083%
- top: 67/400 = 16.75%
- altura: 1 px (linha fina) */
.site-footer::before {
content: "";
position: absolute;
left: 10.104167%;
right: 10.052083%;
top: 16.75%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
pointer-events: none;
z-index: 1;
}
.footer-canvas {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Nav vertical à esquerda — 4 links empilhados.
left 194/1920 = 10.104167%.
top 60% + translateY -50% para ficar abaixo do centro
vertical do footer (calibragem visual do escopo). */
.footer-nav {
position: absolute;
left: 10.104167%;
top: 53%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.25cqw;
z-index: 2;
}
.footer-link {
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 1.622917cqw;
letter-spacing: 0.02em;
text-decoration: none;
font-weight: 400;
line-height: 1.4;
transition: opacity 250ms ease;
}
.footer-link:hover,
.footer-link:focus-visible {
opacity: 0.7;
}
/* Telefone à direita — texto grande branco, clicável (tel:).
right 193/1920 = 10.052083%.
Alinhado pelo BOTTOM com a última linha "Contato" do nav
(nav agora centralizado em 55%, bottom em ~y=314.5 no footer 400).
font-size: 55.43/1920 = 2.886979cqw (Photoshop 55.43pt @ 72dpi) */
.footer-phone {
position: absolute;
right: 10.052083%;
top: 59.875%;
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 2.886979cqw;
letter-spacing: 0.02em;
text-decoration: none;
font-weight: 400;
line-height: 1;
z-index: 2;
transition: opacity 250ms ease;
}
.footer-phone:hover,
.footer-phone:focus-visible {
opacity: 0.85;
}
/* ============================================================
============================================================
MOBILE (≤768px)
Sistema de coordenadas — baseado no mockup mobile 1080×1920.
A LARGURA é a referência absoluta: 1080px do mockup = 100cqw.
Seções usam height: 100svh (tela cheia — pedido do cliente).
Como a altura é VARIÁVEL (depende do aparelho), NÃO se usa % da
altura em nada: isso esticaria os elementos em telas altas.
Conversão padrão — TUDO sobre a largura (1080), inclusive o eixo
vertical:
- Posição horizontal → px / 1080 × 100% (ou cqw)
- Posição vertical → px / 1080 × 100cqw ← cqw, NÃO % da altura
- Tamanho → px / 1080 × 100cqw
Assim a simetria do mockup fica travada em qualquer tela. A
altura 100svh só define o fundo; em telas mais altas que 9:16
sobra um respiro da própria cor da seção abaixo do último
elemento (melhor que distorcer ou mostrar a próxima seção).
EXCEÇÃO: header, menu e FAB são position:fixed (fora do container
query das seções), então usam vw — não cqw.
============================================================
============================================================ */
@media (max-width: 768px) {
/* Quebras por layout: no mobile ativa as quebras só-mobile e
esconde as quebras só-desktop (regra de isolamento). */
.br-m { display: inline; }
.br-d { display: none; }
.dline { display: inline; } /* mobile: linhas voltam a fluir, sem justify */
/* ----- ESCALA TIPOGRÁFICA MOBILE -----
Toda fonte do mobile = (pt PSD / 1080 × 100cqw) × var(--mobile-font-scale).
A conversão PSD→cqw permanece literal e visível. O multiplicador apenas
compensa a diferença entre device pixels (PSD 1080) e CSS pixels (phone
real ~390), garantindo legibilidade sem quebrar a SIMETRIA: todos os
ratios entre elementos ficam preservados porque o fator é uniforme.
Ajustar em UM lugar reflete em toda tipografia mobile. */
:root {
--mobile-font-scale: 1.2;
}
/* ----- SEÇÕES: tela cheia (100svh) -----
Fallback 100vh pra browsers sem svh. container-type: inline-size
já vem do desktop, habilitando cqw nos filhos (1cqw = 1% da
largura da seção = referencial 1080 do mockup). */
/* ===== LAYOUT MOBILE (decisão 10/Jun) =====
HERO: 100svh (tela cheia na abertura — aprovado pelo cliente).
DEMAIS seções: aspect-ratio 9/16 PSD-literal (réguas valem nos
dois eixos; a próxima seção aparece embaixo em telas altas —
trade-off aceito). Shifts s4/s5 zerados (eram compensação do svh).
Backup pré-teste: style.css.bak-20260610. */
.hero-stage {
aspect-ratio: auto;
height: 100vh;
height: 100svh;
}
.about-section,
.psychotherapy-section,
.symptoms-section,
.benefits-section {
aspect-ratio: 9 / 16;
height: auto;
}
/* Section 6 (Address) — fica em aspect-ratio 9:16 (não svh) porque
contém mapa Google iframe + endereço como bloco coeso, similar à
psychotherapy. Trade-off aceito: o footer aparece logo abaixo ao
scrollar. */
.address-section {
aspect-ratio: 9 / 16;
height: auto;
}
/* Mobile mantém o mapa original (full canvas + src original do HTML):
o alargamento do iframe é só-desktop (regra de isolamento). */
.address-map {
inset: 0;
width: 100%;
height: 100%;
}
/* ============================================================
ADDRESS SECTION (Seção 6) — mobile
Mapa cobre full canvas (já tá no desktop com inset:0).
Card branco grande na metade inferior com endereço.
Estimativas visuais do print de referência — calibrar com
réguas PSD depois.
============================================================ */
/* Card branco — réguas painel Transformar PS (Rectangle 1 copy):
X=107 / Y=1026 / L=867 / A=701.99 (canvas 1080×1920).
- left: 107/1080 = 9.907407%
- top: 1026/1920 = 53.4375%
- width: 867/1080 = 80.277778%
- height: 701.99/1920 = 36.562%
border-radius mantido em estimativa (sem régua) — ajustar com
valor PSD literal se necessário. */
.address-card {
left: 9.907407%;
right: auto;
top: 53.4375%;
bottom: auto;
width: 80.277778%;
height: 36.562%;
border-radius: 3cqw;
}
/* Título "Endereço" — réguas PSD (distâncias até borda canvas):
left=185, right=588, top=1405, bottom=450 (canvas 1080×1920).
Card está em left=107, top=1026 (canvas) — convertendo p/ card-relativo:
- left: (185-107)/867 = 8.997%
- top: (1405-1026)/702 = 53.99%
- font: 68.7pt → 68.7/1080 = 6.361111cqw (sem mobile-font-scale,
seção 9/16 = PSD-literal direto). */
.address-title {
left: 8.997%;
top: 49.003%; /* subiu 1 linha junto com o texto (base-anchored):
preserva o gap título→texto original (~35px) */
font-size: 6.361111cqw;
}
/* Endereço — réguas PSD: left=192, top=1509, right=234, bottom=307.
Card-relativo:
- left: (192-107)/867 = 9.804%
- top: (1509-1026)/702 = 68.81%
- font: 31.48pt → 31.48/1080 = 2.914815cqw
- line-height: 1.1 (PSD: 104px de altura / 3 linhas / 31.48pt). */
.address-text {
left: 9.804%;
top: auto;
bottom: 16.381766%; /* folga inferior original (3 linhas: 483+104=587 → 115/702) */
font-size: 2.914815cqw;
line-height: 1.1;
}
/* ----- HEADER mobile -----
Réguas do mockup (base 1080×1920):
- Top do logo: 83/1080 → 7.69vw
- Margem esquerda do logo: 106/1080 → 9.81%
- Largura do logo: 1080 − 106 − 463 = 511 → 47.31vw
(CONTROLE PELO WIDTH, não pela height — height fica auto
pra preservar proporção do PNG horizontal com 3 sóis +
nome + CRP).
- Margem direita do hambúrguer: 107/1080 → 9.91% (estimativa)
- Tamanho do hambúrguer: ~72×56px → 6.7vw × 5.2vw (estimativa). */
/* Esconde o botão WhatsApp do header (vira FAB inferior). */
.whatsapp-button {
display: none;
}
/* Altura do header mobile:
top do logo (7.69vw) + altura do logo (~4.8vw, derivada da
proporção do PNG 2560×260 com width 47.31vw) + respiro
inferior simétrico ≈ 20vw total.
CRÍTICO: o JS usa header.offsetHeight pra detectar a seção
cruzando por baixo. Sem altura real, headerHeight = 0 e a
troca de tema (hero ↔ about ↔ psy) não dispara.
z-index 1001 sobe o header acima do .mobile-menu (1000) pra
que o hambúrguer fique clicável por cima do menu aberto
(sem isso, o menu cobre o ☰ e impossibilita fechar). */
.site-header {
--header-top: 7.69vw;
height: 16vw;
padding: 0;
z-index: 1001;
}
/* A imagem hero@5x foi exportada em #E06B37 (mais viva que o
#C66B3D do CSS). O header na hero acompanha essa cor pra não
destoar do background. */
.site-header.header-hero {
background: #E06B37;
}
.header-logo {
left: 9.81%;
/* centralizado na ALTURA do header (16vw); eixo X preservado */
top: 50%;
transform: translateY(-50%);
width: 47.31vw;
height: auto;
}
/* ----- HAMBURGER toggle -----
appearance:none + outline:none removem o "quadrado" branco
que aparece em volta do botão após o clique (focus default
do browser). */
.menu-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
right: 9.91%;
/* centralizado na ALTURA do header (16vw); eixo X preservado */
top: 50%;
transform: translateY(-50%);
width: 6.7vw;
height: 5.2vw;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 1001;
appearance: none;
-webkit-appearance: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus {
outline: none;
}
.menu-toggle-line {
display: block;
width: 100%;
height: 0.9vw;
background: #FFFFFF;
border-radius: 0.5vw;
transition: transform 250ms ease,
opacity 250ms ease,
background-color 250ms ease;
transform-origin: center;
}
/* Hamburger muda de cor por seção (segue regra do logo).
- hero / benefits / footer (terracota) → linhas brancas
- about-blue → linhas brancas
- psychotherapy/symptoms/address (header branco) → linhas terracota */
.site-header.header-psychotherapy .menu-toggle-line {
background: #C66B3D;
}
/* Estado aberto: 3 linhas viram X (translateY = ~50% da height) */
.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
transform: translateY(2.15vw) rotate(45deg);
}
.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
transform: translateY(-2.15vw) rotate(-45deg);
}
/* ----- MENU DROPDOWN (desce do topo) -----
A cor de fundo do menu acompanha o tema do header conforme a
seção visível (mesma regra do .site-header). Como header e
menu são irmãos no DOM, usa-se o seletor ~ pra propagar:
- header-hero (terracota) → menu terracota
- header-about-blue (azul) → menu azul
- header-psychotherapy (branco) → menu branco, links terracota */
.mobile-menu {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #C66B3D;
padding: 24vw 9.81% 8vw;
transform: translateY(-100%);
transition: transform 350ms ease, background-color 250ms ease;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.mobile-menu.is-open {
transform: translateY(0);
}
.mobile-menu-link {
color: #FFFFFF;
font-family: var(--font-primary);
font-size: 6vw;
text-decoration: none;
padding: 3.5vw 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
transition: opacity 200ms ease, color 250ms ease, border-color 250ms ease;
}
.mobile-menu-link:last-child {
border-bottom: 0;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
opacity: 0.7;
}
/* Cor do menu acompanha o tema do header (regra do JS:
header-hero / header-about-blue / header-psychotherapy). */
.site-header.header-hero ~ .mobile-menu {
background: #C66B3D;
}
.site-header.header-about-blue ~ .mobile-menu {
background: #AFCDE1;
}
.site-header.header-psychotherapy ~ .mobile-menu {
background: #FFFFFF;
}
/* Quando o menu fica branco (seções psy/sym/ben/address),
links e divisores precisam ser terracota pra ter contraste. */
.site-header.header-psychotherapy ~ .mobile-menu .mobile-menu-link {
color: #C66B3D;
border-bottom-color: rgba(198, 107, 61, 0.25);
}
/* ----- WHATSAPP FAB (canto inferior direito) -----
Ícone wppicon.png (já vem com fundo verde circular). Sem sombra. */
.whatsapp-fab {
display: block;
position: fixed;
bottom: 5vw;
right: 5vw;
width: 14vw;
height: 14vw;
z-index: 999;
transition: transform 200ms ease;
}
.whatsapp-fab img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.whatsapp-fab:active {
transform: scale(0.95);
}
/* ----- HERO CONTENT (vertical) -----
Posições iniciais estimadas a partir do mockup vertical 9:16.
Vão ser calibradas conforme o usuário enviar o mockup limpo
com as réguas relativas à BOXH. */
/* HERO: TELA INTEIRA (svh, herda da regra agrupada). A box e os
elementos ocupam as MESMAS porcentagens do asset, mas agora
sobre a ALTURA TOTAL da tela (svh) — esticam pra preencher a
seção maior. Posição vertical em % da altura; fontes em cqw.
Box: 80.33% × 79.56%, margens 9.83% lados / 10.22% topo-base. */
.hero-stage {
background: #E06B37;
}
.hero-canvas {
background: #E06B37;
}
.hero-canvas::after {
content: "";
position: absolute;
left: 9.83%;
top: 10.22%; /* % da altura da tela (svh) */
width: 80.33%;
height: 79.56%; /* % da altura da tela (svh) */
border: 1px solid #FFFFFF;
border-radius: 0.98cqw;
box-sizing: border-box;
pointer-events: none;
z-index: 1;
}
/* BOXH (img) removida no mobile — a moldura agora é a ::after. */
.hero-box {
display: none;
}
/* Texto e dots acima da moldura. */
.slide,
.decorative-bottom {
z-index: 2;
}
/* TÍTULO — réguas PSD (canvas 1080×1920):
left=218, right=270, top=631, bottom=964
- left: 218/1080 = 20.185%
- top: 631/1920 = 32.865%
- width: 592/1080 = 54.815% (= 1080-218-270)
- font: 75pt → 75/1080 = 6.944cqw
white-space: nowrap garante que as 4 linhas vêm exclusivamente
dos
do HTML, sem auto-wrap (linha "ajuda a reorganizar"
pode ultrapassar levemente a width PSD, mas overflow:hidden
da seção recorta se precisar). */
.hero-title {
left: 20.185%;
top: 32.865%; /* 631/1920 — % DE ALTURA (reproduz a posição
vertical do PSD: 32.865% da altura). cqw
estava errado: em svh subia o conteúdo. */
width: 54.815%;
font-size: 6.944cqw;
line-height: 1.3; /* leading "Auto" do Skia (~1.3, como na about).
4 linhas × 75 × 1.3 = 390px → título 631→1021,
subtítulo em 1062 = gap ~41px (não cola, e bate
com o respiro do PSD). 1.4 colava (gap 11px). */
white-space: nowrap;
}
/* SUBTÍTULO — réguas PSD (canvas 1080×1920):
left=219, right=326, top=1062, bottom=630 (height=228, 4 linhas)
- left: 219/1080 = 20.278%
- top: 1062/1920 = 55.313%
- width: 535/1080 = 49.537% (= 1080-219-326)
- font: 50pt → 50/1080 = 4.630cqw
- line-height: 228/(4×50) = 1.14 (PSD literal) */
.hero-subtitle {
left: 20.185%; /* alinhado ao título (PSD 219 ≈ 20.278%, 1px) */
top: 55.313%; /* 1062/1920 — % DE ALTURA (reproduz a posição
vertical do PSD: 55.313% da altura). */
width: 49.537%; /* 535/1080 (PSD) — subtítulo mais estreito que título */
font-size: 4.630cqw;
line-height: 1.3; /* leading "Auto" do Skia (~1.3), igual ao título.
Dá o respiro entre linhas que o PSD tem (1.18
deixava as linhas grudadas). */
white-space: nowrap;
}
/* Título slide 2 — réguas PSD próprias (2 linhas, texto curto/estreito):
top 691/1920 = 35.99% / left 219 ≈ 20.185% / width 453/1080 = 41.944% */
.hero-title--s2 {
top: 35.99%;
left: 20.185%;
width: 40.833333%; /* 441/1080 — régua (219 + 441 + 420 = 1080) */
}
/* Título slide 3 — réguas PSD próprias (2 linhas):
top 685/1920 = 35.677% / left 215 ≈ 20.185% / width 425/1080 = 39.352% */
.hero-title--s3 {
top: 35.677%;
left: 19.907407%; /* 215/1080 — régua própria do slide 3 (≠ 218 dos demais) */
width: 39.352%;
}
/* Subtítulo slide 2 — réguas PSD próprias (texto de 5 linhas, mais largo):
top 943/1920 = 49.115% / left 219 ≈ 20.185% / width 685/1080 = 63.426% */
.hero-subtitle--s2 {
top: 49.115%;
left: 20.185%;
width: 63.426%;
height: auto;
text-align: left; /* mobile não herda o justify do desktop */
}
/* Subtítulo slide 3 — réguas PSD próprias (5 linhas):
top 936/1920 = 48.75% / left 219 ≈ 20.185% / width 685/1080 = 63.426% */
.hero-subtitle--s3 {
top: 48.75%;
left: 20.185%;
width: 63.426%;
height: auto;
text-align: left; /* mobile não herda o justify do desktop */
}
/* DOTS embaixo da hero — réguas do mockup limpo (base 1080×1920):
- margem esquerda 446px, margem direita 452px → centralizado
- largura do bloco: 1080-446-452 = 182px → 16.85cqw
- altura do bloco: 77px → 7.13cqw
- top do bloco: 1788/1920 = 93.125% (régua do usuário)
- cada dot: 5.5cqw (~50px no mockup), space-between distribui */
/* Bloco dos slide-nav dots — réguas PSD (canvas 1080×1920):
left=446, right=452, top=1786, bottom=77
- left: 446/1080 = 41.296%
- top: 1786/1920 = 93.021%
- width: 182/1080 = 16.852cqw
- height: 57/1080 = 5.278cqw (cqw pra preservar aspect dos botões) */
.decorative-bottom {
left: 41.296%;
transform: none;
top: 93.021%;
bottom: auto;
width: 16.852cqw;
height: 5.278cqw;
}
/* Botões com gap moderado.
Container 16.852cqw - 3 botões × 5cqw = 1.852cqw sobra
→ 2 gaps de 0.926cqw cada (~10px no canvas). */
.decorative-bottom .slide-nav {
width: 5cqw;
height: 5cqw;
}
/* ============================================================
ABOUT SECTION (mobile)
- Background BRANCO (igual desktop — confirmado pelo usuário,
o azul que apareceu no mockup era contexto do PS).
- Texto terracota empilhado em cima (quebras a calibrar com
novo mockup limpo).
- Foto embaixo, centralizada.
- symbolM mantido (posição mobile a definir com mockup).
- Aspect-ratio: 9/16 (provisório).
- Fonte do texto: 32.55pt → 3.014vw.
============================================================ */
/* aspect-ratio 9/16 já vem da regra agrupada das seções acima. */
.about-section {
background: #FFFFFF;
/* Bloco texto+foto+symbolM sobe EM CONJUNTO (distâncias internas
preservadas). 7.8cqw ≈ 30px num phone ~390px. Ajustar AQUI. */
--about-shift: 10.4cqw; /* ~40px num phone ~390px */
}
/* symbolM — réguas do mockup mobile (base 1080×1920):
- left: 618/1080 = 57.22%
- top: 743/1080 = 68.80cqw
- ALTURA: do top até o FINAL da seção (base) → o símbolo
"pega até o fim" como no escopo. Como a seção é 100svh, a
altura vira calc(100% − top), onde 100% = altura do canvas
(= 100svh). width: auto mantém o PNG quadrado (4165×4199),
então a largura acompanha e o símbolo sangra pela direita.
- z-index: mantém o do desktop (3, na frente da foto). */
/* symbolM — réguas painel Transformar PS: X=618 / Y=743 / L=1300 / A=1312
(canvas 1080×1920). Conversão PSD-literal (proporcional à LARGURA,
como os outros símbolos — NÃO mais height:calc que esticava).
- left: 618/1080 = 57.222%
- top: 743/1080 = 68.796cqw
- width: 1300/1080 = 120.370cqw (sangra pela direita, como o escopo)
- height: auto (PNG quase quadrado preserva aspecto). */
.about-symbol {
display: block;
left: 57.222%;
top: calc(78cqw - var(--about-shift)); /* 78 (ajuste svh sobre régua
68.796) − offset do bloco. O símbolo "toca"
a última linha do texto — desce/sobe junto. */
right: auto;
width: 120.370cqw;
height: auto;
}
/* TEXTO — réguas do mockup mobile (base 1080×1920):
- left: 222/1080 = 20.56%
- width: (1080-222-219)/1080 = 639 → 59.17%
- top: 329/1080 = 30.46cqw
- fonte: 32.55pt → 32.55/1080 = 3.014cqw (aprovado pelo usuário) */
.about-text {
left: 20.56%;
top: calc(30.46cqw - var(--about-shift)); /* régua 329 − offset do bloco */
width: 59.17%;
font-size: 3.014cqw;
line-height: 1.35; /* = leading "Auto" do PSD pra Skia (Auto NÃO é
120% fixo; depende das métricas da fonte —
Skia tem ascend/descend generosos → ~1.35).
1.1/1.2 ficaram apertados (texto grudado). */
letter-spacing: 0.02em;
}
.about-text p {
margin: 0 0 4cqw 0; /* respiro entre parágrafos (voltei de 2cqw) */
}
/* FOTO da psicóloga — réguas do mockup mobile (base 1080×1920):
- left: 221/1080 = 20.46%
- top: 963/1920 = 50.16%
- width: (1080-221-126)/1080 = 67.87vw
- ASPECT-RATIO = proporção NATURAL da imagem (2450×3350 →
0.731, retrato). Antes eu usei 733/773 (≈quadrado), que com
object-fit:cover cortava topo/base da psicóloga e achatava.
Usando a proporção da própria imagem, ela não corta nem
distorce. width cqw mantém escala consistente entre telas. */
/* FOTO — ALINHADA À ESQUERDA com o texto (não centralizada).
Réguas PSD: left=221, top=963, right=226 (canvas 1080×1920).
- left: 20.56% (= mesmo left do texto, pra alinhar borda esquerda)
- top: 963/1080 = 89.17cqw
- width: (1080-221-226)/1080 = 633 → 58.61cqw (≈ largura do texto)
- aspect-ratio NATURAL 2450/3350 (retrato) — a foto mostra a
psicóloga inteira como no escopo; o symbolM (z-index maior)
cobre a parte direita, daí parecer terminar antes. */
.about-photo {
left: 20.56%;
top: calc(94cqw - var(--about-shift)); /* 94 (ajuste svh sobre régua
89.17) − offset do bloco */
bottom: auto;
transform: none;
width: 58.61cqw;
height: auto;
aspect-ratio: 2450 / 3350;
border-radius: 2cqw;
}
/* ============================================================
PSYCHOTHERAPY SECTION (Seção 3) — mobile
Background vertical slide1-4.png (via ) com moldura +
pílulas desenhadas. Textos/dots reposicionados por cima.
OPÇÃO A: fundo ocupa 100% da largura, altura proporcional —
assim os textos (cqw) caem exatos nas pílulas do fundo.
TODAS as posições aqui são ESTIMATIVAS do mockup — calibrar.
============================================================ */
/* s3 NÃO usa 100svh: usa aspect-ratio 9:16 pra o background bater
EXATO com o PSD (sem sobra, sem corte, sem esticar). O cliente
quer idêntico ao PSD, então abrimos mão de "tela cheia" só nesta
seção. Trade-off: em telas mais altas que 9:16, a s3 não preenche
100% da altura — ao rolar pode aparecer um pedaço da seção
vizinha. Em troca, o fundo fica pixel-perfect com o escopo. */
.psychotherapy-section {
aspect-ratio: 9 / 16;
height: auto;
}
/* Background: herda o desktop (inset 0, width/height 100%, cover).
Como a seção é 9:16 e a imagem também, cover mostra o slide
EXATO — proporções iguais, nada cortado nem esticado. */
/* DOTS — dentro da moldura, centralizados (estimativa). */
/* Dots — régua PSD: bloco left 474/right 475 (centrado, 1px ruído),
top 914, bloco 131 = 4×17 + 3×21. */
.psychotherapy-dots {
left: 50%;
transform: translateX(-50%);
top: 84.63cqw; /* 914/1080 */
gap: 1.944cqw; /* 21/1080 */
}
.psychotherapy-dot {
width: 1.574cqw; /* 17/1080 */
height: 1.574cqw;
}
/* TÍTULO — réguas PSD (distâncias até bordas, canvas 1080×1920):
left=152, right=391, top=1115, bottom=689.
- left: 152/1080 = 14.074%
- top: 1115/1080 = 103.24cqw
- width: 537/1080 = 49.722cqw
- font: 56.21pt → 56.21/1080 = 5.2046cqw
- line-height: 116/(2×56.21) = 1.032 (PSD literal) */
.psychotherapy-title {
left: 14.074%;
top: 103.24cqw;
width: 49.722cqw;
font-size: 5.2046cqw;
line-height: 1.032;
letter-spacing: 0.02em;
white-space: normal;
}
/* DESCRIÇÃO — quebras justificadas via (mantido da estrutura
do desktop) + tipografia PSD-literal:
- left: 14.074% (alinhado ao título — simetria)
- top: 119cqw
- width: 74% (mantém as 6 linhas com justify dos cabendo)
- font: 30.06pt → 30.06/1080 = 2.7833cqw (PSD literal)
- line-height: 1.35 */
.psychotherapy-description {
left: 14.074%;
top: 119cqw;
width: 74%;
font-size: 2.7833cqw;
line-height: 1.35;
}
.psychotherapy-description span,
.psychotherapy-description .desc-line {
white-space: normal;
text-align: left;
text-align-last: left;
}
.psychotherapy-description span::after,
.psychotherapy-description .desc-line::after {
display: none;
}
/* TEXTOS DAS PÍLULAS (info-1 a 4) — medidos por escaneamento do
slide. Pílulas: borda esquerda em 110px (10.19%), altura ~50px.
Texto: left 13% (110px borda + ~30px padding), centralizado na
vertical via translateY(-50%) no centro de cada pílula.
Centros (cqw): 1600/1665/1732/1798 px / 1080. */
/* Fonte das pílulas: 29.35pt → 29.35/1080 = 2.7176cqw (PSD literal).
letter-spacing mantido em 0 (herda do desktop) — a segunda pílula
"Sessões semanais..." é a mais longa e qualquer tracking extra faz
o texto encostar na borda direita da pill. Desalinhamento residual
com o título (que tem letter-spacing 0.02em) é sub-pixel. */
.psychotherapy-info-item {
font-size: 2.7176cqw;
transform: translateY(-50%);
}
/* Pílulas alinhadas com left do título/descrição (14.074%) — coluna
vertical unificada. As pílulas visuais vêm desenhadas no bg
(assets/vertical/s3/1-4.png) — se o bg desenhar a borda da pílula
ligeiramente fora desse left, refinar individualmente. */
.psychotherapy-info .info-1 { left: 14.074%; top: 148.15cqw; }
.psychotherapy-info .info-2 { left: 14.074%; top: 154.17cqw; }
.psychotherapy-info .info-3 { left: 14.074%; top: 160.37cqw; }
.psychotherapy-info .info-4 { left: 14.074%; top: 166.48cqw; }
/* ============================================================
SYMPTOMS SECTION (Seção 4) — mobile
Fundo azul #AFCDE1 (cor sólida → svh + % altura, como a hero).
============================================================ */
/* symbolI (sol) — medidas exatas do PSD (camada "I", doc 1080×1920):
X=-135, Y=986, L=1081, A=1082 (quadrado).
- left: -135/1080 = -12.5% (sai pela esquerda / colado)
- width: 1081/1080 = 100.09cqw → height auto (mantém quadrado)
- margem direita: 134px (12.41%) ✓ confere.
ANCORADO À BASE: no PSD o sol vai até bottom 2068 (sai 148px da
base 1920 → -7.71%). Ancorando por bottom, ele SEMPRE pega na
borda de baixo em qualquer tela (com top fixo, em telas mais
altas que 9:16 ele não chegaria lá). width cqw mantém redondo. */
.symptoms-symbol {
left: -12.5%; /* PSD literal (X=-135) — NÃO mexer (posição horizontal) */
top: auto;
bottom: -13.611cqw; /* régua: topo do sol em 986 → sangra 147px abaixo
do canvas 9:16 (986 + 1081 − 1920 = 147/1080).
Base-anchor mantido (lição #4: telas svh altas). */
right: auto;
width: 100.09cqw; /* PSD literal (L=1081) — right edge 946 = folga 134 ✓ */
height: auto;
}
/* "Talvez você esteja:" — label branco (Skia Regular)
Réguas PS (canvas 1080×1920):
X(esq)=218 / Y(topo)=317 / right=524 / bottom=1569
- left: 218/1080 = 20.185185%
- top: 317/1920 = 16.510417%
- width: auto
- font: 40pt → 40/1080 = 3.703704cqw (PSD literal) × boost 1.2 = ~17px
no phone real (PSD-literal puro daria 14px, abaixo do legível). */
/* Bloco de conteúdo da s4 (label + texto + setas + dots) deslocado
pra cima EM CONJUNTO — distâncias internas preservadas (réguas PSD
intactas nos calc abaixo; só o offset move). 2.6cqw ≈ 10px num
phone de ~390px. Ajustar AQUI move o bloco inteiro. */
/* ===== TESTE 9/16 (s4) =====
Seção em proporção PSD-literal (como s3/s6) em vez de svh.
Com 9/16, as réguas valem nos DOIS eixos → o shift que compensava
o esticamento do svh zera. Pra REVERTER: aspect-ratio/height fora,
--sym-shift de volta pra 5.2cqw (backup: style.css.bak-20260610). */
.symptoms-section {
aspect-ratio: 9 / 16;
height: auto;
--sym-shift: 0cqw;
}
.symptoms-label {
left: 20.185185%;
top: calc(28.981cqw - var(--sym-shift)); /* 313/1080 (régua PSD) − offset do bloco */
width: auto;
font-size: calc(3.703704cqw * var(--mobile-font-scale));
letter-spacing: 0;
}
/* Texto rotativo terracota — slider de 6 slides (Skia Regular 50pt)
Cada slide tem box PRÓPRIO (textframe shrinkwrap do PSD), então
top e right variam por slide via [data-sym-slide]. left e font
são compartilhados (todos têm left=218 no PSD).
Boost 1.2x removido nesta seção: com PSD-literal width, font
boostada quebra extra. PSD-literal aqui = texto menor mas quebras
coincidem com o escopo.
- left: 218/1080 = 20.185185% (compartilhado)
- font: 50pt → 50/1080 = 4.629630cqw (PSD literal, sem boost) */
.symptoms-text {
left: 20.185185%;
width: auto;
font-size: 4.629630cqw;
white-space: nowrap;
}
/* Per-slide box — réguas PSD por slide.
Y / right ainda faltam pros slides 3-6 (placeholder = slide 1). */
.symptoms-text[data-sym-slide="1"] {
top: calc(41.204cqw - var(--sym-shift)); /* 445/1080 − offset */
right: 26.389%; /* 285/1080 */
}
.symptoms-text[data-sym-slide="2"] {
top: calc(44.074cqw - var(--sym-shift)); /* 476/1080 − offset */
right: 15.556%; /* 168/1080 */
}
/* Slide 3 — estimado baseado no visual do escopo
("Vivendo conflitos nas relações," é similar ao slide 2) */
.symptoms-text[data-sym-slide="3"] {
top: calc(44.074cqw - var(--sym-shift)); /* = slide 2 − offset */
right: 15.556%; /* = slide 2 */
}
/* Slide 4 — estimado: visual similar aos slides 2 e 3 */
.symptoms-text[data-sym-slide="4"] {
top: calc(44.074cqw - var(--sym-shift));
right: 15.556%;
}
/* Slide 5 — 4 linhas (igual slide 1), placeholder do slide 1 confirmado OK */
.symptoms-text[data-sym-slide="5"] {
top: calc(41.204cqw - var(--sym-shift));
right: 26.389%;
}
/* Slide 6 — 3 linhas (igual slides 2/3/4), aplica réguas do slide 2 */
.symptoms-text[data-sym-slide="6"] {
top: calc(44.074cqw - var(--sym-shift));
right: 15.556%;
}
/* Setas ‹ › — réguas painel Transformar PS:
Esquerda (SETAE.png): X=54 / Y=516 / L=44 / A=84
Direita (SETAD.png): X=983 / Y=517 / L=43 / A=83
Diferença 1px entre lados é ruído PSD. Valores aplicados (esquerda):
- width: 44/1080 = 4.074074cqw
- height: 84/1080 = 7.777778cqw (cqw pra preservar aspect)
- top: 516/1920 = 26.875%
- left/right: 54/1080 = 5% (simétrico) */
.symptoms-arrow {
top: calc(47.778cqw - var(--sym-shift)); /* 516/1080 (PSD) − offset do bloco */
width: 4.074074cqw;
height: 7.777778cqw;
opacity: 0.7;
}
.symptoms-arrow--prev { left: 5%; right: auto; }
.symptoms-arrow--next { right: 5%; left: auto; }
/* Dots — réguas PSD painel Transformar (canvas 1080×1920):
X=226 / Y=880 / L=229 / A=18 (bloco completo com 6 dots + 5 gaps)
- left: 226/1080 = 20.926%
- top: 880/1920 = 45.833%
- dot diameter: 18/1080 = 1.667cqw
- gap: (229 − 6×18) / 5 = 24.2 → 24.2/1080 = 2.241cqw */
.symptoms-dots {
left: 20.926%;
top: calc(81.481cqw - var(--sym-shift)); /* 880/1080 (PSD) − offset do bloco */
gap: 2.241cqw;
}
.symptoms-dot {
width: 1.667cqw;
height: 1.667cqw;
}
/* ============================================================
BENEFITS SECTION (Seção 5) — mobile
Mesma estrutura visual da symptoms (label + texto + setas + dots),
mas com fundo terracota e símbolo S (anel) centralizado embaixo.
Sem réguas PSD ainda — estimativas visuais do print de referência.
============================================================ */
/* SymbolS (anel decorativo) — quadrado (5196×5240).
Réguas painel Transformar PS: X=189 / Y=960 / L=1067 / A=1074.
No PSD o símbolo começa em Y=960 = 50% (metade exata) e ocupa
toda a metade inferior, extrapolando a base.
ANCORADO POR TOP 50% (não por bottom): assim o topo do anel fica
na metade exata como o PSD — em qualquer altura de tela. width
inflado (110cqw vs 98.8cqw PSD) garante que ele desce até a base
e a extrapola; overflow:hidden recorta o excesso.
- left: 189/1080 = 17.5%
- top: 960/1920 = 50% (metade exata, svh-based)
- width: 110cqw (inflado pra preencher da metade até a base)
- height: auto (asset quadrado preserva aspecto) */
/* SymbolS (anel decorativo) — quadrado (5196×5240).
Réguas PS: X=189 / Y=960 / L=1067 / A=1074 (canvas 1080×1920).
Base estabelecida e aprovada:
- left: 189/1080 = 17.5% (PSD literal)
- bottom: -5.9375% (ancorado à base, cola embaixo)
- width: 110cqw (inflado pra dominar a metade inferior) */
.benefits-symbol {
left: 14.9%; /* era 17.5% — movido ~10px (2.6% da largura, phone ~390px) à esquerda */
right: auto;
top: auto;
bottom: -5.9375%;
width: 110cqw;
height: auto;
}
/* "A terapia pode ajudar você a:" — label branco
Réguas PSD da sessão 5 (canvas 1080×1920):
left=220, right=337, top=313, bottom=1568 / fonte=40pt
- left: 220/1080 = 20.370%
- top: 313/1920 = 16.302%
- font: 40/1080 = 3.703704cqw × boost (consistência com symptoms) */
/* Bloco de conteúdo da s5 (label + texto + setas + dots) deslocado
pra cima EM CONJUNTO — mesmo offset da s4 (--sym-shift 5.2cqw ≈ 20px
num phone ~390px). Réguas PSD preservadas nos calc; ajustar AQUI
move o bloco inteiro. */
.benefits-section {
--ben-shift: 7.8cqw; /* ~30px num phone ~390px, sobre as réguas 9/16 */
}
.benefits-label {
left: 20.370%;
top: calc(28.981cqw - var(--ben-shift)); /* 313/1080 (régua PSD) − offset */
width: auto;
font-size: 3.703704cqw; /* 40pt PSD literal (boost ×1.2 removido — deixava
o label do tamanho do texto, sem hierarquia) */
letter-spacing: 0;
}
/* Texto rotativo branco — slider de 6 slides.
Alinhado ao tratamento da symptoms (aprovado):
- font: 50pt → 4.629630cqw PSD-literal (SEM boost; boost fazia o
texto ficar maior que o escopo)
- white-space: nowrap (quebras vêm SÓ dos
do HTML, sem
auto-wrap criando quebras estranhas) */
.benefits-text {
left: 20.185%; /* 218/1080 — régua (label fica em 220; 2px do próprio escopo) */
top: calc(46.944cqw - var(--ben-shift)); /* 507/1080 (régua slide 1, 2 linhas) − offset */
bottom: auto; /* anula o bottom-anchor do desktop (senão estica o box) */
width: auto;
right: 5%;
font-size: 4.629630cqw;
line-height: 1.08; /* régua slide 1: box 108px ÷ 2 linhas = 54/50
(site usava 1.1 herdado — linhas 1px mais afastadas) */
white-space: nowrap;
}
/* Slides de 4 LINHAS — caixa própria, 62px acima dos de 2 linhas
(mesma relação do desktop: 427 vs 489). 507 − 62 = 445/1080. */
.benefits-text[data-ben-slide="2"],
.benefits-text[data-ben-slide="3"],
.benefits-text[data-ben-slide="5"],
.benefits-text[data-ben-slide="6"],
.benefits-text[data-ben-slide="7"] {
top: calc(41.204cqw - var(--ben-shift));
}
/* Setas ‹ › — réguas painel Transformar PS:
Esquerda (SETAE5.png): X=54 / Y=516 / L=44 / A=84 (rotação 0°)
Direita (SETAD5.png): X=983 / Y=517 / L=43 / A=83 (rotação 180° no PSD,
mas asset web já é nativo). Diferença 1px entre lados é ruído PSD.
Valores aplicados (médios/esquerda):
- width: 44/1080 = 4.074074cqw
- height: 84/1080 = 7.777778cqw (cqw pra preservar aspect)
- top: 516/1920 = 26.875% (svh-based)
- left (prev): 54/1080 = 5%
- right (next): (1080−983−43)/1080 = 5% — simétrico */
.benefits-arrow {
top: calc(47.778cqw - var(--ben-shift)); /* 516/1080 (PSD) − offset do bloco */
width: 4.074074cqw;
height: 7.777778cqw;
opacity: 0.7;
}
/* Desktop usa left:53.072917% no --next; mobile zera e ancora à direita */
.benefits-arrow--prev { left: 5%; right: auto; }
.benefits-arrow--next { left: auto; right: 5%; }
/* Dots brancos — top em cqw (proporcional à largura = fiel PSD).
81.481cqw ~ 880/1080 — APROXIMADO (régua Y dos dots da sessão 5
pendente; usei a proporção da symptoms gêmea). */
.benefits-dots {
left: 20.926%; /* 226/1080 — régua da 1ª bolinha (= dots da s4, simétrico) */
top: calc(81.481cqw - var(--ben-shift)); /* 880/1080 (régua) − offset do bloco */
gap: 2.241cqw; /* 24.2/1080 — espelha os dots da s4 (o gap de 67px
derivado do Transform foi reprovado: bloco largo demais) */
}
.benefits-dot {
width: 1.62cqw; /* 17.5/1080 — Transform PSD (L=17,5 / A=17,5) */
height: 1.62cqw;
}
}