/* ==========================================================
Dr. Rafael Spera — Medicina Fetal | LP RD360
----------------------------------------------------------
IDENTIDADE VISUAL OFICIAL AO PE DA LETRA
Paleta: TURQUESA #00A398 + BRANCO + CINZA #3F3F3F
Tipografia: Neulis Sans (titulos) + Lisu Bosa (corpo)
Conceito: "Estetica do Acolhimento" — formas curvas,
espacos amplos, tons suaves, irradiacao do som
========================================================== */
/* ----- Fontes ----- */
/* Outfit carregada via no HTML para evitar render-blocking @import */
@font-face {
font-family: 'Neulis Sans';
src: url('/assets/fonts/NeulisSans-ExtraLight.otf') format('opentype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neulis Sans';
src: url('/assets/fonts/NeulisSans-Light.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neulis Sans';
src: url('/assets/fonts/NeulisSans-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neulis Sans';
src: url('/assets/fonts/NeulisSans-Medium.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neulis Sans';
src: url('/assets/fonts/NeulisSans-SemiBold.otf') format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neulis Sans';
src: url('/assets/fonts/NeulisSans-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ----- Mobile-safe boilerplate ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100vw; }
img, video, iframe, svg { max-width: 100%; height: auto; display: block; }
input, textarea, select, button { font: inherit; }
input, textarea, select { font-size: 16px; }
body.modal-open { overflow: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ============================================================
TOKENS — Paleta oficial Rafael Spera AO PE DA LETRA
============================================================ */
:root {
/* Principais — turquesa dominante + branco */
--primary: #00A398; /* TURQUESA oficial — Pantone 3272 C */
--primary-deep: #007D74; /* turquesa profundo (hover) */
--primary-soft: #B3DDDE; /* CERULEAN — variacao clara (Pantone 317 C) */
--primary-mist: #E8F5F4; /* turquesa ultra-claro (BGs sutis) */
--primary-foam: #F5FBFA; /* turquesa lavado (BGs ultra-sutis) */
/* Texto — cinza oficial #3F3F3F (NUNCA #000) */
--ink: #3F3F3F; /* texto principal */
--ink-soft: #5A5A5A; /* texto secundario */
--ink-mute: #8A8A8A; /* captions, meta */
--ink-faint: #B5B5B5; /* labels muito sutis */
/* Fundos */
--paper: #FFFFFF; /* branco puro principal */
--paper-soft: #FAFAF8; /* off-white sutil */
--paper-cream: #F5FBFA; /* era cream warm; agora turquesa-foam (limpeza visual) */
--paper-cream-deep: #E8F5F4; /* era algodao saturado; agora primary-mist sutil */
/* Acento emocional pontual */
--coralina: #F7CED7; /* gestante/bebe */
--coralina-deep: #E8A4B1;
/* Linhas e separadores */
--line: rgba(0,163,152,0.18);
--line-soft: rgba(63,63,63,0.08);
--line-cream: rgba(0,163,152,0.18); /* alias turquesa pra compat */
/* WhatsApp */
--wa: #25D366;
--wa-deep: #128C7E;
/* Tipografia — Neulis Sans (titulos oficial) + Outfit (corpo, mesma familia arredondada) */
--font-display: 'Neulis Sans', 'Outfit', system-ui, -apple-system, sans-serif;
--font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Container e espaco */
--container: 1280px;
--container-narrow: 920px;
--gutter: clamp(20px, 4.5vw, 56px);
--section-y: clamp(96px, 11vw, 160px);
/* Radius generoso (formas curvas — conceito do manual) */
--r-sm: 10px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 44px;
--r-pill: 999px;
/* Easing */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
/* Sombras suaves (Estetica do Acolhimento — nada agressivo) */
--shadow-xs: 0 2px 8px -4px rgba(63,63,63,0.10);
--shadow-sm: 0 6px 20px -10px rgba(63,63,63,0.12);
--shadow-md: 0 18px 44px -20px rgba(63,63,63,0.18);
--shadow-lg: 0 32px 80px -32px rgba(0,163,152,0.22);
--shadow-glow: 0 0 0 1px rgba(0,163,152,0.10), 0 0 60px -20px rgba(0,163,152,0.25);
}
/* ============================================================
BASE
============================================================ */
body {
margin: 0;
font-family: var(--font);
font-weight: 400;
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 4px;
border-radius: 6px;
}
::selection { background: var(--primary); color: #FFFFFF; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--primary);
color: #FFFFFF;
padding: 12px 20px;
z-index: 200;
font-size: 14px;
border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 16px; top: 16px; }
/* ----- Container ----- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
position: relative;
}
.container-narrow { max-width: var(--container-narrow); }
/* ============================================================
TIPOGRAFIA
============================================================ */
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
}
/* Eyebrow — pequeno label turquesa antes do titulo */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 28px;
}
.eyebrow::before {
content: '';
width: 32px;
height: 1.5px;
background: currentColor;
opacity: 0.9;
border-radius: 2px;
}
/* eyebrow-light agora e igual ao eyebrow (todas secoes sao claras) */
.eyebrow-light { color: var(--primary); }
/* H-display — h2 grande de secoes */
.h-display {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(30px, 4vw, 52px);
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--ink);
max-width: 22ch;
}
.h-display .lift {
font-weight: 500;
color: var(--primary);
position: relative;
display: inline-block;
}
.h-display .lift::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: 0.04em;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary-soft), var(--primary), var(--primary-soft), transparent);
opacity: 0.55;
border-radius: 2px;
}
/* Lead — paragrafo introdutorio */
.lead {
font-family: var(--font);
font-size: clamp(17.5px, 1.75vw, 20.5px);
line-height: 1.6;
font-weight: 400;
color: var(--ink-soft);
max-width: 58ch;
margin-top: 24px;
letter-spacing: -0.005em;
}
/* ============================================================
SECTIONS — todas claras (paleta oficial)
============================================================ */
.section { padding: var(--section-y) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(56px, 7vw, 88px); }
.section-head--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.section-head--center .h-display { margin-left: auto; margin-right: auto; }
.section-head--center .lead { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
/* Separador decorativo: linha + ponto turquesa + linha (irradiacao do som — referencia ao logo) */
.section-head-mark {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: clamp(28px, 4vw, 40px) auto 0;
}
.section-head-mark .line {
width: clamp(40px, 6vw, 80px);
height: 1.5px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0.7;
border-radius: 2px;
}
.section-head-mark .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 12px rgba(0,163,152,0.4), 0 0 24px rgba(0,163,152,0.18);
flex-shrink: 0;
}
/* ============================================================
BOTOES — paleta oficial AO PE DA LETRA
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.005em;
text-decoration: none;
border: 1.5px solid transparent;
border-radius: var(--r-pill);
cursor: pointer;
transition: transform 320ms var(--ease), background-color 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
white-space: nowrap;
}
.btn-icon { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
/* btn-primary: turquesa solido (CTA principal) */
.btn-primary {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
box-shadow: 0 12px 28px -12px rgba(0,163,152,0.45);
}
.btn-primary:hover {
background: var(--primary-deep);
border-color: var(--primary-deep);
transform: translateY(-2px);
box-shadow: 0 18px 36px -14px rgba(0,163,152,0.55);
}
/* btn-primary-light: branco com texto turquesa (alternativa em fundos turquesa) */
.btn-primary-light {
background: #FFFFFF;
color: var(--primary-deep);
border-color: #FFFFFF;
box-shadow: 0 12px 28px -14px rgba(63,63,63,0.18);
}
.btn-primary-light:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 18px 36px -14px rgba(0,163,152,0.45);
}
/* btn-ghost: outline turquesa sobre fundo claro */
.btn-ghost {
background: transparent;
color: var(--primary-deep);
border-color: var(--primary);
}
.btn-ghost:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
transform: translateY(-2px);
}
/* btn-ghost-light: outline turquesa sobre fundos cream/mist (mesmo visual que ghost agora) */
.btn-ghost-light {
background: transparent;
color: var(--primary-deep);
border-color: var(--primary);
}
.btn-ghost-light:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
transform: translateY(-2px);
}
/* btn-ghost-sm: ghost menor usado no header */
.btn-ghost-sm {
background: transparent;
color: inherit;
border-color: currentColor;
padding: 11px 22px;
font-size: 13.5px;
}
.btn-ghost-sm:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
}
.btn-lg { padding: 18px 36px; font-size: 16px; }
.cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: clamp(40px, 5vw, 60px);
}
.cta-row--center { justify-content: center; }
/* ============================================================
HEADER — pill flutuante glass com tom turquesa-mist sutil
(uniforme: pilula sutil sobre branco + glass real sobre foto)
============================================================ */
.site-header {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 1280px;
z-index: 100;
border-radius: var(--r-pill);
/* Tom turquesa-mist da paleta a 35% — cria pilula sutil sobre branco
mas mantem transparencia real sobre a foto */
background: rgba(232,245,244,0.45);
backdrop-filter: blur(28px) saturate(170%);
-webkit-backdrop-filter: blur(28px) saturate(170%);
border: 1px solid rgba(0,163,152,0.18);
box-shadow:
0 12px 32px -14px rgba(0,163,152,0.16),
0 4px 12px -4px rgba(63,63,63,0.08),
inset 0 1px 0 rgba(255,255,255,0.60);
transition: background-color 320ms var(--ease), border-color 320ms var(--ease), top 320ms var(--ease), box-shadow 320ms var(--ease);
}
.site-header.scrolled {
top: 10px;
background: rgba(255,255,255,0.82);
border-color: rgba(0,163,152,0.24);
box-shadow:
0 16px 44px -14px rgba(0,163,152,0.20),
0 8px 18px -6px rgba(63,63,63,0.10);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 8px 14px 8px 24px;
color: var(--ink);
min-height: 96px;
}
.brand {
display: inline-flex;
align-items: center;
line-height: 1;
}
.brand-logo {
width: auto;
height: 82px;
display: block;
filter: drop-shadow(0 1px 2px rgba(63,63,63,0.20));
}
.site-header.scrolled .brand-logo {
filter: none;
}
.nav-desktop {
display: flex;
gap: clamp(22px, 2.6vw, 36px);
align-items: center;
}
.nav-desktop a {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--ink);
opacity: 0.95;
transition: opacity 220ms var(--ease), color 220ms var(--ease);
padding: 6px 0;
text-shadow: 0 1px 2px rgba(255,255,255,0.60);
}
.site-header.scrolled .nav-desktop a {
text-shadow: none;
font-weight: 500;
opacity: 0.85;
}
.nav-desktop a:hover { opacity: 1; color: var(--primary-deep); }
/* CTA do header — turquesa solido */
.cta-header {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
padding: 11px 22px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
box-shadow: 0 6px 16px -6px rgba(0,163,152,0.45);
}
.cta-header:hover {
background: var(--primary-deep);
border-color: var(--primary-deep);
transform: translateY(-1px);
box-shadow: 0 12px 24px -8px rgba(0,163,152,0.55);
}
.nav-toggle {
display: none;
background: rgba(0,163,152,0.08);
border: 1.5px solid rgba(0,163,152,0.25);
cursor: pointer;
width: 44px;
height: 44px;
padding: 12px 11px;
border-radius: 50%;
flex-direction: column;
justify-content: space-between;
transition: background 280ms var(--ease), border-color 280ms var(--ease);
flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(0,163,152,0.18); border-color: var(--primary); }
.nav-toggle span {
display: block;
width: 100%;
height: 1.5px;
background: var(--primary);
transition: all 280ms var(--ease);
border-radius: 1px;
}
.nav-toggle.open { background: var(--primary); border-color: var(--primary); }
.nav-toggle.open span { background: #FFFFFF; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.nav-mobile {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 0; right: 0;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
flex-direction: column;
padding: 24px 28px 28px;
border-radius: var(--r-lg);
border: 1px solid rgba(0,163,152,0.15);
box-shadow: 0 24px 48px -16px rgba(63,63,63,0.18);
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
color: var(--ink);
padding: 16px 4px;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
border-bottom: 1px solid var(--line-soft);
transition: color 240ms var(--ease), padding-left 240ms var(--ease);
}
.nav-mobile a:hover { color: var(--primary-deep); padding-left: 12px; }
.nav-mobile a:last-of-type { border-bottom: 0; }
.nav-mobile .btn,
.nav-mobile a.btn-primary-light {
margin-top: 20px;
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
align-self: stretch;
text-align: center;
justify-content: center;
border-bottom: 1.5px solid var(--primary);
font-weight: 600;
padding: 14px 24px;
letter-spacing: 0.02em;
}
.nav-mobile .btn:hover,
.nav-mobile a.btn-primary-light:hover {
background: var(--primary-deep);
border-color: var(--primary-deep);
}
/* ============================================================
HERO — full-bleed com foto 100% viewport + texto sobre overlay branco
============================================================ */
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
background: var(--paper);
overflow: hidden;
isolation: isolate;
padding: 130px 0 80px;
}
/* Foto wide do doutor — ocupa metade direita do hero (full-bleed sangrando ate a borda) */
.hero-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 38%;
z-index: 0;
overflow: hidden;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
/* Imagem ja foi pre-cropada (removido dark vazio a esquerda) — centra naturalmente */
object-position: center center;
}
/* Transicao suave na borda esquerda da foto pra nao ter linha dura — funde branco-foto */
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,1) 40%,
rgba(255,255,255,0.92) 44%,
rgba(255,255,255,0.40) 49%,
rgba(255,255,255,0) 54%);
pointer-events: none;
}
/* Faixa sutil turquesa-mist na borda inferior pra "amarrar" o hero ao branco da pagina */
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 140px;
z-index: 1;
background: linear-gradient(180deg, transparent, rgba(232,245,244,0.45) 60%, rgba(255,255,255,0.95));
pointer-events: none;
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
gap: clamp(24px, 4vw, 56px);
align-items: center;
width: 100%;
}
.hero-content {
color: var(--ink);
max-width: 600px;
padding-right: clamp(12px, 2vw, 32px);
}
.hero-content .eyebrow { color: var(--primary-deep); margin-bottom: 18px; }
.hero-title {
font-family: var(--font-display);
font-size: clamp(32px, 4.8vw, 60px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--ink);
margin-bottom: 24px;
max-width: 17ch;
}
.hero-title .lift {
color: var(--primary);
font-weight: 600;
position: relative;
display: inline-block;
}
.hero-title .lift::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: 0.06em;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-soft), var(--primary), var(--primary-soft), transparent);
opacity: 0.65;
border-radius: 3px;
}
.hero-lead {
font-family: var(--font);
font-size: clamp(17.5px, 1.65vw, 20.5px);
line-height: 1.55;
color: var(--ink-soft);
max-width: 48ch;
margin: 0 0 16px;
font-weight: 400;
letter-spacing: -0.005em;
}
.hero-lead + .hero-lead { margin-top: 8px; }
/* Quebras de linha explicitas só em desktop — em tablet/mobile texto flui livre */
.hero-br-desktop { display: none; }
@media (min-width: 1025px) {
.hero-br-desktop { display: inline; }
}
.hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.hero-rating {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
padding: 14px 22px;
background: rgba(255,255,255,0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line);
border-radius: var(--r-pill);
width: fit-content;
box-shadow: var(--shadow-xs);
}
.hero-stars {
display: flex;
gap: 2px;
color: #F5B400;
}
.hero-stars svg { width: 16px; height: 16px; }
.hero-rating-text {
font-family: var(--font);
font-size: 14px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
/* Coluna direita do grid fica vazia em desktop (foto a direita esta no bg full-bleed) */
.hero-grid > .hero-bg { display: none; }
/* Overlay legacy (mantido pra nao quebrar HTML antigo) */
.hero-overlay { display: none; }
/* ============================================================
NOSSOS CUIDADOS — bg turquesa sonar + cards brancos
============================================================ */
.section-paraquem {
background-color: var(--primary);
background-image: url('/assets/sonar-turquesa.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #FFFFFF;
position: relative;
overflow: hidden;
}
.section-paraquem::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,125,116,0.18) 0%,
rgba(0,163,152,0.08) 50%,
rgba(0,125,116,0.18) 100%);
pointer-events: none;
}
.section-paraquem > .container { position: relative; z-index: 1; }
.paraquem-head {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(56px, 7vw, 80px);
}
.paraquem-head .eyebrow {
color: #FFFFFF;
justify-content: center;
display: inline-flex;
opacity: 0.92;
}
.paraquem-head .eyebrow::before {
background: #FFFFFF;
}
.paraquem-head .h-display {
margin: 0 auto;
max-width: 24ch;
color: #FFFFFF;
}
.paraquem-head .h-display .lift {
color: #FFFFFF;
}
.paraquem-head .h-display .lift::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), rgba(255,255,255,0.9), rgba(255,255,255,0.6), transparent);
opacity: 0.85;
}
.motivos-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: clamp(56px, 7vw, 80px);
align-items: stretch;
}
.motivo-card {
background: #FFFFFF;
border: 1px solid rgba(255,255,255,0.40);
border-radius: var(--r-lg);
padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 32px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(16px, 1.8vw, 20px);
transition: transform 360ms var(--ease), border-color 360ms var(--ease), box-shadow 360ms var(--ease);
min-height: 340px;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
0 24px 48px -20px rgba(0,72,68,0.40),
0 8px 16px -8px rgba(0,72,68,0.20);
}
/* Hexagono dinamico de pontos — assinatura exclusiva da secao 2 */
.motivo-hex-bg {
position: absolute;
bottom: -30px;
right: -36px;
width: 200px;
height: 220px;
color: var(--primary);
opacity: 0.08;
z-index: -1;
transition: opacity 480ms var(--ease), transform 600ms var(--ease);
transform-origin: 70% 70%;
pointer-events: none;
}
.motivo-card:hover {
transform: translateY(-8px);
border-color: rgba(255,255,255,0.85);
box-shadow:
0 36px 72px -24px rgba(0,72,68,0.55),
0 14px 28px -10px rgba(0,72,68,0.32);
}
.motivo-card:hover .motivo-hex-bg {
opacity: 0.20;
transform: scale(1.08) rotate(8deg);
}
/* Header centralizado: icone proprio + divisor + numero editorial */
.motivo-header {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 6px 18px 16px;
border-bottom: 1px solid var(--line-soft);
width: 100%;
max-width: 200px;
}
.motivo-icon-wrap {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--primary-mist);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--primary);
transition: background-color 320ms var(--ease), transform 320ms var(--ease), color 320ms var(--ease);
position: relative;
}
.motivo-icon-wrap::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--primary);
opacity: 0.20;
transition: opacity 320ms var(--ease), inset 320ms var(--ease);
}
.motivo-card:hover .motivo-icon-wrap {
background: var(--primary);
color: #FFFFFF;
}
.motivo-card:hover .motivo-icon-wrap::before {
opacity: 0.36;
inset: -7px;
}
.motivo-icon {
width: 26px;
height: 26px;
}
.motivo-num {
font-family: var(--font-display);
font-size: clamp(26px, 2.8vw, 32px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.04em;
color: var(--primary);
font-feature-settings: 'tnum';
position: relative;
padding-left: 14px;
}
.motivo-num::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 56%;
background: var(--line);
}
.motivo-title {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 26px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
margin-top: 4px;
}
/* Linha curva da marca — vetor #12 do sistema grafico */
.motivo-curve {
width: 80px;
height: 16px;
color: var(--primary);
transition: color 360ms var(--ease), width 360ms var(--ease);
flex: 0 0 auto;
display: block;
}
.motivo-card:hover .motivo-curve {
color: var(--primary-deep);
width: 104px;
}
/* Ilha interna — modal dentro de modal */
.motivo-body {
margin-top: auto;
width: 100%;
background: var(--primary-foam);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: clamp(18px, 1.8vw, 22px) clamp(16px, 1.6vw, 20px);
position: relative;
transition: background-color 320ms var(--ease), border-color 320ms var(--ease);
}
.motivo-body::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 2px;
background: var(--primary);
border-radius: 0 0 2px 2px;
}
.motivo-card:hover .motivo-body {
background: #FFFFFF;
border-color: var(--primary);
}
.motivo-text {
font-family: var(--font);
font-size: clamp(15.5px, 1.5vw, 16.5px);
font-weight: 400;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
letter-spacing: -0.005em;
text-align: center;
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* ============================================================
PERCURSO / SOBRE — bg turquesa sofisticado (gradientes + circulos concentricos)
============================================================ */
.section-percurso {
background-color: var(--primary);
/* Camadas de gradientes radiais — bokeh turquesa premium */
background-image:
radial-gradient(ellipse 70% 60% at 12% 18%, rgba(255,255,255,0.14), transparent 60%),
radial-gradient(ellipse 60% 80% at 88% 82%, rgba(179,221,222,0.18), transparent 55%),
radial-gradient(circle at 75% 30%, rgba(0,107,98,0.55), transparent 50%),
radial-gradient(circle at 25% 75%, rgba(0,107,98,0.40), transparent 55%);
color: #FFFFFF;
position: relative;
overflow: hidden;
}
/* Circulos concentricos sutis (referencia direta ao logo do doutor — ondas irradiando) */
.section-percurso::before {
content: '';
position: absolute;
top: -8%;
left: -8%;
width: 540px;
height: 540px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
.section-percurso::after {
content: '';
position: absolute;
bottom: -10%;
right: -8%;
width: 480px;
height: 480px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
.section-percurso > .container { position: relative; z-index: 1; }
.percurso-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 80px);
align-items: center;
margin-bottom: clamp(72px, 8vw, 96px);
}
.section-percurso .h-display { color: #FFFFFF; }
.section-percurso .h-display .lift { color: #FFFFFF; }
.section-percurso .h-display .lift::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), rgba(255,255,255,0.95), rgba(255,255,255,0.65), transparent);
opacity: 0.9;
}
.section-percurso .lead { color: rgba(255,255,255,0.88); }
.percurso-text .eyebrow {
color: rgba(255,255,255,0.92);
opacity: 0.95;
}
.percurso-text .eyebrow::before {
background: rgba(255,255,255,0.85);
}
.cred-list {
list-style: none;
padding: 0;
margin: clamp(32px, 4vw, 48px) 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cred-list li {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 18px;
align-items: center;
padding: 14px 14px;
margin: 0 -14px;
border-radius: 12px;
position: relative;
transition: background-color 320ms var(--ease), transform 320ms var(--ease);
cursor: default;
}
.cred-list li::after {
content: '';
position: absolute;
bottom: 0;
left: 14px;
right: 14px;
height: 1px;
background: rgba(255,255,255,0.18);
transition: background-color 360ms var(--ease), transform 360ms var(--ease);
transform-origin: left center;
}
.cred-list li:last-child::after { display: none; }
.cred-list li:hover {
background: rgba(255,255,255,0.06);
}
.cred-list li:hover::after {
background: var(--primary-soft);
transform: scaleX(1.02);
}
.cred-num {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
font-feature-settings: 'tnum';
letter-spacing: -0.02em;
display: inline-block;
transition: color 320ms var(--ease), transform 320ms var(--ease);
transform-origin: center;
}
.cred-list li:hover .cred-num {
color: #FFFFFF;
transform: scale(1.10);
}
.cred-text {
font-family: var(--font);
font-size: clamp(16.5px, 1.6vw, 18px);
line-height: 1.55;
color: rgba(255,255,255,0.92);
letter-spacing: -0.005em;
transition: color 320ms var(--ease);
}
.cred-list li:hover .cred-text {
color: #FFFFFF;
}
/* Selo de verificação — credencial validada */
.cred-check {
width: 22px;
height: 22px;
flex: 0 0 auto;
color: rgba(179, 221, 222, 0.55);
transition: color 320ms var(--ease), transform 360ms var(--ease), opacity 320ms var(--ease);
}
.cred-list li:hover .cred-check {
color: var(--paper-cream);
transform: scale(1.12) rotate(-3deg);
}
/* Mobile: oculta o check pra preservar espaço */
@media (max-width: 640px) {
.cred-list li { grid-template-columns: 32px 1fr; }
.cred-check { display: none; }
}
/* CARD UNIFICADO doutor (foto + separator + cred-note) — estilo referencia */
.percurso-photo {
position: relative;
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: clamp(28px, 3vw, 36px);
padding: clamp(14px, 1.4vw, 18px);
box-shadow:
0 44px 88px -28px rgba(0,72,68,0.55),
0 18px 36px -12px rgba(0,72,68,0.30),
inset 0 1px 0 rgba(255,255,255,0.85);
gap: 0;
}
.photo-frame {
position: relative;
width: 100%;
border-radius: clamp(20px, 2.4vw, 26px);
overflow: hidden;
aspect-ratio: 3/4;
box-shadow: none;
}
.photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.cred-note {
font-family: var(--font);
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-soft);
letter-spacing: -0.005em;
padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 20px) clamp(8px, 1vw, 12px);
background: transparent;
border-radius: 0;
border-left: none;
position: relative;
margin-top: 6px;
}
/* Separador horizontal turquesa antes do cred-note — irradiacao */
.cred-note::before {
content: '';
display: block;
width: 44px;
height: 2px;
background: var(--primary);
border-radius: 2px;
margin-bottom: 16px;
opacity: 0.7;
}
.cred-note strong { color: var(--ink); font-weight: 600; }
/* CTA da secao Sobre — branco com texto turquesa (contrasta com bg turquesa) */
.section-percurso .btn-primary {
background: #FFFFFF;
color: var(--primary-deep);
border-color: #FFFFFF;
box-shadow: 0 12px 28px -10px rgba(0,72,68,0.40);
}
.section-percurso .btn-primary:hover {
background: var(--paper-cream);
color: var(--primary-deep);
border-color: var(--paper-cream);
box-shadow: 0 18px 36px -12px rgba(0,72,68,0.50);
}
/* Quote da missao — ilha cream warm contrastando com o turquesa de fundo */
.cred-quote {
max-width: 900px;
margin: clamp(64px, 7vw, 88px) auto 0;
padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 64px);
background: linear-gradient(135deg, #FFFFFF, var(--paper-cream));
border-radius: var(--r-xl);
border: 1px solid rgba(255,255,255,0.55);
position: relative;
overflow: hidden;
text-align: center;
box-shadow:
0 44px 88px -28px rgba(0,72,68,0.45),
0 16px 32px -12px rgba(0,72,68,0.25),
inset 0 1px 0 rgba(255,255,255,0.85);
}
.cred-quote::before {
content: '"';
position: absolute;
top: -20px;
left: 32px;
font-family: Georgia, serif;
font-size: 160px;
font-weight: 700;
color: var(--primary);
opacity: 0.14;
line-height: 1;
pointer-events: none;
}
.cred-quote-main p {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 23px);
font-weight: 400;
line-height: 1.45;
letter-spacing: -0.015em;
color: var(--ink);
max-width: 720px;
margin: 0 auto;
text-wrap: pretty;
}
/* Lift base — destaque turquesa com sublinhacao curva (assinatura da marca, reusavel) */
.lift {
position: relative;
display: inline;
color: var(--primary);
font-weight: 600;
}
.lift::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: 0.02em;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary-soft), var(--primary), var(--primary-soft), transparent);
opacity: 0.55;
border-radius: 2px;
pointer-events: none;
}
/* Em contexto de texto corrido (lead/quote/body): inline-block + sublinhacao mais sutil */
.hero-lead .lift,
p.lead .lift,
.cred-quote-main .lift {
display: inline-block;
line-height: 1.2;
}
/* Variante sobre fundo turquesa: branco puro pra contraste limpo */
.section-percurso .lift,
.section-paraquem .lift {
color: #FFFFFF;
}
.section-percurso .lift::after,
.section-paraquem .lift::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), rgba(255,255,255,0.95), rgba(255,255,255,0.65), transparent);
opacity: 0.85;
}
/* Wrap inteligente em paragrafos longos — evita orfas em qualquer largura */
.hero-lead,
p.lead,
.cred-quote-main p,
.h-display {
text-wrap: pretty;
}
/* Legado: .accent continua disponivel pra compatibilidade, mas .lift e o novo padrao */
.cred-quote-main .accent { color: var(--primary); font-weight: 600; }
/* ============================================================
DEPOIMENTOS — carrossel em fundo cream
============================================================ */
.section-depoimentos {
background: var(--paper-cream);
color: var(--ink);
position: relative;
overflow: hidden;
}
.section-depoimentos::before {
content: '';
position: absolute;
bottom: -10%;
left: -10%;
width: 50%;
height: 60%;
background: radial-gradient(circle at center, rgba(247,206,215,0.25), transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Aura sonar oficial — forma orgânica curva (referência ao símbolo do logo) */
.section-depoimentos::after {
content: '';
position: absolute;
top: -8%;
right: -12%;
width: 62%;
height: 90%;
background: url('/assets/sonar-aura-1.webp') center right / contain no-repeat;
mix-blend-mode: multiply;
opacity: 0.85;
pointer-events: none;
z-index: 0;
}
.section-depoimentos > .container { position: relative; z-index: 1; }
.section-depoimentos .h-display { color: var(--ink); }
.section-depoimentos .lead { color: var(--ink-soft); }
/* ============================================================
LOCALIZAÇÃO — bg branco + aura sonar + padrão hex + mapa Google
============================================================ */
.section-localizacao {
background: var(--paper);
color: var(--ink);
position: relative;
overflow: hidden;
}
/* Aura sonar oficial (canto inferior esquerdo) — referência ao símbolo do logo */
.section-localizacao::before {
content: '';
position: absolute;
bottom: -8%;
left: -10%;
width: 56%;
height: 90%;
background: url('/assets/sonar-aura-1.webp') center left / contain no-repeat;
mix-blend-mode: multiply;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
/* Padrão de pontos hexagonal turquesa (canto superior direito) — assinatura da marca */
.section-localizacao::after {
content: '';
position: absolute;
top: 6%;
right: -4%;
width: 220px;
height: 240px;
background-image: radial-gradient(circle at center, var(--primary) 1.8px, transparent 2.4px);
background-size: 22px 22px;
opacity: 0.16;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.section-localizacao > .container { position: relative; z-index: 1; }
.section-localizacao > .section-divider { position: relative; z-index: 2; }
.section-localizacao .h-display { color: var(--ink); margin: 0 auto; max-width: 24ch; }
.section-localizacao .lead { color: var(--ink-soft); max-width: 64ch; }
.local-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(32px, 4vw, 56px);
align-items: stretch;
max-width: 1140px;
margin: 0 auto;
}
/* Mapa Google embed — emoldurado com sombra premium */
.local-map {
border-radius: clamp(24px, 3vw, 32px);
overflow: hidden;
border: 1px solid rgba(0,163,152,0.22);
background: var(--primary-mist);
min-height: 380px;
max-height: 460px;
box-shadow:
0 32px 64px -28px rgba(0,42,56,0.32),
0 16px 36px -16px rgba(0,163,152,0.18),
0 0 0 6px rgba(255,255,255,0.85),
0 0 0 7px rgba(0,163,152,0.12);
position: relative;
}
.local-map iframe { display: block; min-height: 380px; height: 100%; filter: saturate(0.85) contrast(0.98); }
.local-map::after {
content: '';
position: absolute;
top: -16px;
right: -16px;
width: 80px;
height: 80px;
background-image: radial-gradient(circle at center, var(--primary) 1.4px, transparent 1.8px);
background-size: 14px 14px;
opacity: 0.55;
pointer-events: none;
-webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
mask-image: radial-gradient(circle, black 40%, transparent 70%);
}
/* Coluna de informações */
.local-info {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 28px);
padding: clamp(8px, 1vw, 16px) 0;
}
.local-info-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 20px;
border-radius: var(--r-md);
background: linear-gradient(180deg, #FFFFFF, var(--primary-foam));
border: 1px solid var(--line);
box-shadow: 0 10px 24px -16px rgba(0,42,56,0.16);
transition: transform 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.local-info-item:hover {
transform: translateY(-2px);
border-color: rgba(0,163,152,0.32);
box-shadow: 0 16px 32px -16px rgba(0,42,56,0.22);
}
.local-info-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
flex: 0 0 auto;
position: relative;
box-shadow: 0 8px 20px -8px rgba(0,163,152,0.45);
}
.local-info-icon::before {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid var(--primary);
opacity: 0.22;
}
.local-info-icon svg { width: 20px; height: 20px; }
.local-info-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.local-info-label {
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--primary-deep);
}
.local-info-value {
font-family: var(--font);
font-size: clamp(15.5px, 1.6vw, 17px);
line-height: 1.5;
color: var(--ink);
margin: 0;
letter-spacing: -0.005em;
}
.local-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: clamp(12px, 2vw, 20px);
}
.local-cta-row .btn { flex: 1 1 auto; min-width: 0; }
/* Responsivo */
@media (max-width: 900px) {
.local-grid { grid-template-columns: 1fr; }
.local-map { min-height: 320px; }
.local-map iframe { min-height: 320px; }
}
@media (max-width: 640px) {
.local-cta-row .btn { flex: 1 1 100%; }
}
.depo-carousel-wrap {
position: relative;
margin: 0 -8px;
}
.depo-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 40px) / 3);
gap: 20px;
padding: 12px 8px 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
@media (max-width: 1024px) {
.depo-carousel { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
.depo-carousel { grid-auto-columns: 88%; }
}
.depo-carousel::-webkit-scrollbar { display: none; }
.depo-card {
background: #FFFFFF;
border-radius: var(--r-lg);
padding: clamp(28px, 3vw, 36px);
border: 1px solid var(--line);
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 320px;
max-height: 460px;
overflow: hidden;
box-shadow: var(--shadow-xs);
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.depo-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.depo-stars {
display: flex;
gap: 2px;
color: #F5B400;
}
.depo-stars svg { width: 18px; height: 18px; }
.depo-text {
font-family: var(--font);
font-size: 16.5px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
flex: 1;
letter-spacing: -0.005em;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: var(--primary-soft) transparent;
mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
}
.depo-text::-webkit-scrollbar { width: 5px; }
.depo-text::-webkit-scrollbar-track { background: transparent; }
.depo-text::-webkit-scrollbar-thumb { background: var(--primary-soft); border-radius: 3px; }
.depo-text::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.depo-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
}
.depo-name {
font-family: var(--font-display);
font-size: 16.5px;
font-weight: 600;
color: var(--ink);
}
.depo-date {
font-family: var(--font);
font-size: 14px;
color: var(--ink-mute);
}
/* Setas e dots dos carrosseis */
.depo-carousel-arrow,
.pub-carousel-arrow,
.notas-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 48px;
height: 48px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid var(--line);
color: var(--primary-deep);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
transition: transform 280ms var(--ease), background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
}
.depo-carousel-arrow svg,
.pub-carousel-arrow svg,
.notas-carousel-arrow svg { width: 22px; height: 22px; }
.depo-carousel-arrow:hover,
.pub-carousel-arrow:hover,
.notas-carousel-arrow:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
transform: translateY(-50%) scale(1.05);
}
.depo-carousel-arrow:disabled,
.pub-carousel-arrow:disabled,
.notas-carousel-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.depo-carousel-prev,
.pub-carousel-prev,
.notas-carousel-prev { left: -8px; }
.depo-carousel-next,
.pub-carousel-next,
.notas-carousel-next { right: -8px; }
/* Variante: setas inline com dots (centralizado embaixo) */
.has-inline-controls .depo-carousel-arrow,
.has-inline-controls .pub-carousel-arrow,
.has-inline-controls .notas-carousel-arrow {
position: static;
transform: none;
width: 40px;
height: 40px;
}
.has-inline-controls .depo-carousel-arrow:hover,
.has-inline-controls .pub-carousel-arrow:hover,
.has-inline-controls .notas-carousel-arrow:hover {
transform: scale(1.08);
}
.depo-carousel-controls,
.pub-carousel-controls,
.notas-carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 28px;
}
.depo-carousel-controls .depo-carousel-dots,
.pub-carousel-controls .pub-carousel-dots,
.notas-carousel-controls .notas-carousel-dots {
margin-top: 0;
}
.depo-carousel-dots,
.pub-carousel-dots,
.notas-carousel-dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 24px;
}
.depo-carousel-dots button,
.pub-carousel-dots button,
.notas-carousel-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ink-faint);
border: 0;
cursor: pointer;
padding: 0;
transition: background 280ms var(--ease), transform 280ms var(--ease);
}
.depo-carousel-dots button[aria-current="true"],
.pub-carousel-dots button[aria-current="true"],
.notas-carousel-dots button[aria-current="true"] {
background: var(--primary);
transform: scale(1.4);
}
.depo-foot {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 40px;
}
/* ============================================================
EXAMES — bg branco + sonar-branco sutil + timeline de 5 etapas
============================================================ */
.section-exames {
background-color: var(--paper);
color: var(--ink);
position: relative;
overflow: hidden;
}
/* Degradê vetorial 1 — pontos crescendo de cima pra baixo (CSS puro, 2 layers + mask) */
.section-exames::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at center, var(--primary) 0.9px, transparent 1.4px);
background-size: 22px 22px;
opacity: 0.38;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 55%, transparent 100%);
mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 55%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.section-exames::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at center, var(--primary) 2.6px, transparent 3.1px);
background-size: 42px 42px;
background-position: 21px 21px;
opacity: 0.30;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.55) 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
z-index: 0;
}
.section-exames > .container { position: relative; z-index: 1; }
.section-exames > .section-divider { position: relative; z-index: 2; }
.section-exames .section-head { max-width: 1080px; }
.section-exames .h-display {
color: var(--ink);
margin: 0 auto;
max-width: 30ch;
}
.section-exames .lead {
color: var(--ink-soft);
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 78ch;
}
/* Timeline de 5 etapas — layout vertical com linha turquesa conectando */
.exames-timeline {
list-style: none;
padding: 0;
margin: 0 auto clamp(72px, 9vw, 112px);
max-width: 900px;
position: relative;
display: flex;
flex-direction: column;
gap: clamp(24px, 3vw, 36px);
}
/* Linha turquesa vertical conectando os marcadores */
.exames-timeline::before {
content: '';
position: absolute;
top: 32px;
bottom: 32px;
left: clamp(28px, 3vw, 36px);
width: 2px;
background: linear-gradient(180deg, transparent, var(--primary-soft) 8%, var(--primary-soft) 92%, transparent);
opacity: 0.6;
pointer-events: none;
}
.exame-step {
display: grid;
grid-template-columns: clamp(60px, 6.5vw, 72px) 1fr;
gap: clamp(20px, 2.5vw, 32px);
align-items: start;
position: relative;
}
/* Marcador circular turquesa com numero */
.exame-step-marker {
width: clamp(60px, 6.5vw, 72px);
height: clamp(60px, 6.5vw, 72px);
border-radius: 50%;
background: #FFFFFF;
border: 2px solid var(--primary);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
box-shadow:
0 12px 28px -10px rgba(0,163,152,0.30),
0 0 0 6px rgba(255,255,255,0.85);
transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), background 360ms var(--ease);
}
/* Ondas concentricas crescentes — assinatura da secao 3 (1 onda no step 01, 5 no step 05) */
.exame-step-waves {
position: absolute;
top: 50%;
left: 50%;
width: 220%;
height: 220%;
transform: translate(-50%, -50%);
pointer-events: none;
color: var(--primary);
z-index: 1;
}
.exame-step-waves .wave {
opacity: 0;
transition: opacity 480ms var(--ease), stroke-width 480ms var(--ease);
}
.exame-step[data-waves="1"] .wave-1 { opacity: 0.42; }
.exame-step[data-waves="2"] .wave-1 { opacity: 0.46; }
.exame-step[data-waves="2"] .wave-2 { opacity: 0.28; }
.exame-step[data-waves="3"] .wave-1 { opacity: 0.50; }
.exame-step[data-waves="3"] .wave-2 { opacity: 0.34; }
.exame-step[data-waves="3"] .wave-3 { opacity: 0.22; }
.exame-step[data-waves="4"] .wave-1 { opacity: 0.54; }
.exame-step[data-waves="4"] .wave-2 { opacity: 0.40; }
.exame-step[data-waves="4"] .wave-3 { opacity: 0.28; }
.exame-step[data-waves="4"] .wave-4 { opacity: 0.18; }
.exame-step[data-waves="5"] .wave-1 { opacity: 0.58; }
.exame-step[data-waves="5"] .wave-2 { opacity: 0.44; }
.exame-step[data-waves="5"] .wave-3 { opacity: 0.32; }
.exame-step[data-waves="5"] .wave-4 { opacity: 0.22; }
.exame-step[data-waves="5"] .wave-5 { opacity: 0.14; }
/* No hover: anel mais externo "respira" (stroke mais grosso) */
.exame-step:hover .exame-step-waves .wave { stroke-width: 1; }
.exame-step:hover .exame-step-waves { animation: wave-breathe 2.4s ease-in-out infinite; }
@keyframes wave-breathe {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
.exame-step:hover .exame-step-waves { animation: none; }
}
.exame-step-num {
font-family: var(--font-display);
font-size: clamp(18px, 1.9vw, 22px);
font-weight: 600;
color: var(--primary);
letter-spacing: -0.02em;
font-feature-settings: 'tnum';
transition: color 360ms var(--ease);
}
.exame-step:hover .exame-step-marker {
background: var(--primary);
transform: scale(1.05);
box-shadow:
0 18px 36px -10px rgba(0,163,152,0.45),
0 0 0 6px rgba(255,255,255,0.85);
}
.exame-step:hover .exame-step-num {
color: #FFFFFF;
}
.exame-step-body {
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 36px) clamp(28px, 3.4vw, 40px);
box-shadow: var(--shadow-xs);
transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), border-color 360ms var(--ease);
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.exame-step:hover .exame-step-body {
transform: translateY(-2px);
border-color: rgba(0,163,152,0.30);
box-shadow: var(--shadow-md);
}
.exame-step-week {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--primary-deep);
background: var(--primary-mist);
padding: 6px 14px;
border-radius: var(--r-pill);
width: fit-content;
margin-bottom: 4px;
}
.exame-step-title {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 22px);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.exame-step-desc {
font-family: var(--font);
font-size: clamp(16px, 1.6vw, 17.5px);
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
letter-spacing: -0.005em;
}
/* Amniocentese destaque: split com foto + texto */
.exame-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(40px, 5vw, 72px);
align-items: center;
background: linear-gradient(135deg, var(--primary-mist), var(--paper-cream));
border-radius: var(--r-xl);
border: 1px solid var(--line);
padding: clamp(32px, 4vw, 56px);
margin-bottom: clamp(64px, 8vw, 96px);
position: relative;
overflow: hidden;
}
.exame-hero::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 40%;
height: 70%;
background: radial-gradient(circle at center, rgba(0,163,152,0.18), transparent 60%);
pointer-events: none;
}
.exame-hero-img {
position: relative;
z-index: 1;
}
.exame-hero-img-wrap {
width: 100%;
aspect-ratio: 3/2;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow:
0 32px 64px -24px rgba(0,163,152,0.25),
0 0 0 1px rgba(0,163,152,0.10);
}
.exame-hero-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.exame-hero-text { position: relative; z-index: 1; }
.exame-hero-tag {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--primary-deep);
background: rgba(0,163,152,0.10);
padding: 6px 14px;
border-radius: var(--r-pill);
margin-bottom: 18px;
}
.exame-hero-title {
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 18px;
}
.exame-hero-desc {
font-family: var(--font);
font-size: clamp(16px, 1.65vw, 18px);
line-height: 1.7;
color: var(--ink-soft);
margin: 0 0 24px;
}
.exame-hero-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.exame-hero-list li {
font-family: var(--font);
font-size: 15.5px;
line-height: 1.5;
color: var(--ink);
padding-left: 28px;
position: relative;
}
.exame-hero-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 16px;
height: 2px;
background: var(--primary);
border-radius: 2px;
}
.exame-hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--primary-deep);
padding: 14px 28px;
background: #FFFFFF;
border: 1.5px solid var(--primary);
border-radius: var(--r-pill);
transition: background 320ms var(--ease), color 320ms var(--ease), transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.exame-hero-cta svg { width: 18px; height: 18px; }
.exame-hero-cta:hover {
background: var(--primary);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 18px 32px -14px rgba(0,163,152,0.4);
}
/* Divider editorial */
.pub-divider {
display: flex;
align-items: center;
gap: 18px;
margin: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 56px);
}
.pub-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.pub-divider-label {
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--primary-deep);
white-space: nowrap;
}
/* Carrossel 5 etapas */
.pub-carousel-wrap {
position: relative;
margin: 0 -8px;
}
.pub-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 320px);
gap: 20px;
padding: 12px 8px 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.pub-carousel::-webkit-scrollbar { display: none; }
.exame-card {
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(28px, 3vw, 36px);
display: flex;
flex-direction: column;
gap: 18px;
scroll-snap-align: start;
box-shadow: var(--shadow-xs);
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
min-height: 240px;
position: relative;
}
.exame-card:hover {
transform: translateY(-4px);
border-color: rgba(0,163,152,0.35);
box-shadow: var(--shadow-md);
}
.exame-card-week {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
padding: 6px 14px;
background: var(--primary-mist);
border-radius: var(--r-pill);
width: fit-content;
}
.exame-card-title {
font-family: var(--font-display);
font-size: clamp(17px, 1.8vw, 20px);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
}
.exame-card-desc {
font-family: var(--font);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
}
/* ============================================================
PAUSE VISUAL
============================================================ */
.section-pause {
background: var(--paper);
padding: clamp(48px, 6vw, 80px) 0;
text-align: center;
}
.pause-mark {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
max-width: 200px;
margin: 0 auto;
}
.pause-line {
flex: 1;
height: 1.5px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0.65;
border-radius: 2px;
}
.pause-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 16px rgba(0,163,152,0.45), 0 0 32px rgba(0,163,152,0.18);
flex-shrink: 0;
}
/* ============================================================
FAQ — perguntas frequentes com accordion + aura sonar
============================================================ */
.section-faq {
background: var(--paper);
color: var(--ink);
position: relative;
overflow: hidden;
}
.section-faq::before {
content: '';
position: absolute;
top: -6%;
right: -8%;
width: 52%;
height: 80%;
background: url('/assets/sonar-aura-2.webp') center right / contain no-repeat;
mix-blend-mode: multiply;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.section-faq::after {
content: '';
position: absolute;
bottom: 8%;
left: -3%;
width: 220px;
height: 240px;
background-image: radial-gradient(circle at center, var(--primary) 1.8px, transparent 2.4px);
background-size: 22px 22px;
opacity: 0.14;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.section-faq > .container { position: relative; z-index: 1; }
.section-faq > .section-divider { position: relative; z-index: 2; }
.section-faq .h-display { color: var(--ink); margin: 0 auto; max-width: 28ch; }
.section-faq .lead { color: var(--ink-soft); max-width: 64ch; }
.faq-list {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color 320ms var(--ease), box-shadow 320ms var(--ease), background-color 320ms var(--ease);
}
.faq-item:hover {
border-color: rgba(0,163,152,0.32);
box-shadow: 0 12px 28px -18px rgba(0,42,56,0.18);
}
.faq-item[open] {
border-color: var(--primary);
background: linear-gradient(180deg, #FFFFFF, var(--primary-foam));
box-shadow: 0 18px 36px -20px rgba(0,72,68,0.22);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.5vw, 28px);
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: clamp(16.5px, 1.9vw, 19px);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--ink);
transition: color 240ms var(--ease);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--primary-deep); }
.faq-item[open] .faq-question { color: var(--primary-deep); }
.faq-question-text {
flex: 1;
min-width: 0;
}
.faq-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary-mist);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary);
flex: 0 0 auto;
transition: background-color 320ms var(--ease), color 320ms var(--ease), transform 360ms var(--ease);
}
.faq-icon svg { width: 18px; height: 18px; transition: transform 360ms var(--ease); }
.faq-item[open] .faq-icon {
background: var(--primary);
color: #FFFFFF;
}
.faq-item[open] .faq-icon svg { transform: rotate(180deg); }
.faq-answer {
padding: 0 clamp(20px, 2.5vw, 28px) clamp(22px, 2.5vw, 28px);
font-family: var(--font);
font-size: clamp(15.5px, 1.6vw, 17px);
line-height: 1.65;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.faq-answer p {
margin: 0;
text-wrap: pretty;
}
.faq-answer p + p {
margin-top: 12px;
}
.faq-foot {
margin-top: clamp(48px, 6vw, 64px);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.faq-foot p {
font-family: var(--font);
font-size: 16px;
color: var(--ink-soft);
margin: 0;
}
/* Mobile */
@media (max-width: 640px) {
.faq-icon { width: 32px; height: 32px; }
.faq-icon svg { width: 16px; height: 16px; }
}
/* ============================================================
NOTAS RECENTES (Blog) — em fundo cream warm
============================================================ */
.section-notas {
background: var(--paper-cream);
color: var(--ink);
position: relative;
overflow: hidden;
}
.section-notas::before {
content: '';
position: absolute;
top: 8%;
right: -3%;
width: 240px;
height: 260px;
background-image: radial-gradient(circle at center, var(--primary) 1.8px, transparent 2.4px);
background-size: 22px 22px;
opacity: 0.14;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
/* Aura sonar oficial — forma circular envolvente (variação posicional vs Depoimentos) */
.section-notas::after {
content: '';
position: absolute;
bottom: -10%;
left: -14%;
width: 56%;
height: 95%;
background: url('/assets/sonar-aura-2.webp') center left / contain no-repeat;
mix-blend-mode: multiply;
opacity: 0.80;
pointer-events: none;
z-index: 0;
}
.section-notas > .container { position: relative; z-index: 1; }
.section-notas .h-display { color: var(--ink); }
.section-notas .lead { color: var(--ink-soft); }
.notas-carousel-wrap {
position: relative;
margin: 0 -8px;
}
.notas-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 48px) / 3);
gap: 24px;
padding: 12px 8px 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
@media (max-width: 1024px) {
.notas-carousel { grid-auto-columns: calc((100% - 24px) / 2); }
}
.notas-carousel::-webkit-scrollbar { display: none; }
.nota-card {
scroll-snap-align: start;
border-radius: var(--r-lg);
overflow: hidden;
background: #FFFFFF;
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.nota-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
.nota-link { display: flex; flex-direction: column; height: 100%; }
.nota-img {
width: 100%;
aspect-ratio: 3/2;
overflow: hidden;
background: var(--paper-cream-deep);
}
.nota-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease);
}
.nota-card:hover .nota-img img { transform: scale(1.05); }
.nota-body {
padding: clamp(24px, 2.8vw, 32px);
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.nota-tag {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary-deep);
}
.nota-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.9vw, 21px);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.nota-lede {
font-family: var(--font);
font-size: 16.5px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
flex: 1;
letter-spacing: -0.005em;
}
.nota-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--primary-deep);
}
.nota-arrow svg {
width: 16px;
height: 16px;
transition: transform 320ms var(--ease);
}
.nota-card:hover .nota-arrow svg { transform: translateX(4px); }
.notas-foot {
display: flex;
justify-content: center;
margin-top: 40px;
}
/* ============================================================
FOOTER — TURQUESA solido como bloco final de identidade
============================================================ */
.site-footer {
background: var(--primary);
color: #FFFFFF;
padding: 0 0 0;
position: relative;
overflow: hidden;
}
/* Aura sonar oficial no canto direito (sutil) */
.site-footer::before {
content: '';
position: absolute;
top: -8%;
right: -12%;
width: 52%;
height: 90%;
background: url('/assets/sonar-aura-1.webp') center right / contain no-repeat;
filter: invert(1) brightness(1.4);
mix-blend-mode: screen;
opacity: 0.22;
pointer-events: none;
z-index: 0;
}
/* Padrão hex de pontos no canto esquerdo (assinatura da marca) */
.site-footer::after {
content: '';
position: absolute;
bottom: 12%;
left: -3%;
width: 240px;
height: 260px;
background-image: radial-gradient(circle at center, #FFFFFF 1.8px, transparent 2.4px);
background-size: 22px 22px;
opacity: 0.10;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
/* ============================================================
FOOTER TOPO: logo centralizada + tagline + redes sociais
============================================================ */
.footer-top {
padding: clamp(56px, 7vw, 88px) 0 clamp(36px, 4vw, 48px);
position: relative;
z-index: 1;
}
.footer-top-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(20px, 2.4vw, 28px);
max-width: 720px;
margin: 0 auto;
}
.footer-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(24px, 3.4vw, 44px);
width: 100%;
max-width: 720px;
}
.footer-logo-line {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), rgba(255,255,255,0.45), transparent);
min-width: 40px;
max-width: 180px;
}
.footer-logo {
height: clamp(160px, 16vw, 220px);
width: auto;
max-width: 320px;
object-fit: contain;
filter: brightness(0) invert(1);
display: block;
flex: 0 0 auto;
}
.footer-tagline {
font-family: var(--font);
font-size: clamp(14.5px, 1.5vw, 16px);
line-height: 1.55;
color: rgba(255,255,255,0.85);
letter-spacing: -0.005em;
margin: 0;
text-wrap: balance;
max-width: 56ch;
}
.footer-social {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.footer-social-link {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
transition: background 280ms var(--ease), border-color 280ms var(--ease), transform 280ms var(--ease);
}
.footer-social-link svg {
width: 19px;
height: 19px;
}
.footer-social-link:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.45);
transform: translateY(-2px);
}
/* Divisor sutil entre topo e colunas */
.footer-divider {
display: block;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
margin: 0;
width: 100%;
}
/* ============================================================
FOOTER 3 COLUNAS: Navegação · Contato · Regiões
============================================================ */
.footer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(36px, 4.5vw, 64px);
align-items: start;
padding: clamp(48px, 5vw, 64px) 0 clamp(48px, 6vw, 64px);
position: relative;
z-index: 1;
}
.footer-col h4 {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0 0 22px;
opacity: 0.90;
}
/* Lista de links (Navegação + Regiões) */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-links li {
font-family: var(--font);
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.88);
letter-spacing: -0.005em;
line-height: 1.4;
}
.footer-links a {
display: inline-flex;
align-items: center;
font-family: var(--font);
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.88);
letter-spacing: -0.005em;
position: relative;
padding-left: 14px;
transition: color 240ms var(--ease), padding-left 240ms var(--ease);
}
.footer-links a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 1px;
background: rgba(255,255,255,0.55);
transition: width 240ms var(--ease), background-color 240ms var(--ease);
}
.footer-links a:hover {
color: #FFFFFF;
padding-left: 20px;
}
.footer-links a:hover::before {
width: 12px;
background: var(--paper-cream);
}
.footer-links--regions li {
padding-left: 14px;
position: relative;
}
.footer-links--regions li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 1px;
background: rgba(255,255,255,0.55);
}
/* Coluna Contato: itens com ícone + texto */
.footer-info {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-info-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: var(--font);
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.88);
letter-spacing: -0.005em;
line-height: 1.45;
}
.footer-info-icon {
width: 22px;
height: 22px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
opacity: 0.85;
margin-top: 1px;
}
.footer-info-icon svg {
width: 18px;
height: 18px;
}
.footer-info-text {
flex: 1 1 auto;
word-break: break-word;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.18);
padding: 22px 0;
position: relative;
z-index: 1;
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.footer-bottom small {
font-family: var(--font);
font-size: 13px;
color: rgba(255,255,255,0.75);
}
.rd360-credit {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
transition: color 280ms var(--ease), opacity 280ms var(--ease);
}
.rd360-credit:hover { color: #FFFFFF; }
.rd360-credit:hover .rd360-logo { opacity: 1; transform: scale(1.04); }
.rd360-label {
font-weight: 600;
opacity: 0.85;
}
.rd360-logo {
width: 92px;
height: auto;
color: #FFFFFF;
opacity: 0.82;
transition: opacity 280ms var(--ease), transform 280ms var(--ease);
display: block;
}
/* ============================================================
WHATSAPP FLOAT
============================================================ */
.whatsapp-float {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 90;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--wa);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 16px 36px -12px rgba(37,211,102,0.45),
0 4px 12px -4px rgba(37,211,102,0.25);
opacity: 0;
transform: translateY(20px) scale(0.92);
transition: opacity 480ms var(--ease), transform 480ms var(--ease), background 280ms var(--ease);
pointer-events: none;
}
.whatsapp-float.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }
.whatsapp-float:hover {
background: var(--wa-deep);
transform: translateY(-2px) scale(1.05);
}
/* Pulsacao sutil pra chamar atencao */
.whatsapp-float::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--wa);
z-index: -1;
animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.whatsapp-float::after { animation: none; }
}
/* ============================================================
REVEAL on scroll
============================================================ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
RESPONSIVO — Mobile-first refinements
============================================================ */
/* Tablets — 1024px */
@media (max-width: 1024px) {
.nav-desktop { display: none; }
.cta-header { display: none; }
.nav-toggle { display: flex; }
/* Hero em tablet/mobile: foto full-width como ambiente, texto em cima com overlay branco */
.hero {
min-height: auto;
padding: 130px 0 56px;
align-items: flex-start;
}
/* Foto vira full-bleed no mobile (override do left:38% desktop) */
.hero-bg {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hero-bg img {
object-position: 35% center;
}
/* Overlay branco suave: cobre top quase opaco, vai sumindo pra deixar foto aparecer embaixo */
.hero::before {
background:
linear-gradient(180deg,
rgba(255,255,255,0.97) 0%,
rgba(255,255,255,0.96) 55%,
rgba(255,255,255,0.78) 72%,
rgba(255,255,255,0.30) 88%,
rgba(255,255,255,0) 100%);
}
.hero::after {
display: none;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 0;
}
.hero-content {
max-width: 100%;
padding-right: 0;
}
.hero-title {
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
}
.hero-lead {
max-width: 100%;
}
/* Em mobile, "Ver Exames" precisa ser legivel sobre a foto — fundo branco solid */
.hero .btn-ghost {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero .btn-ghost:hover {
background: var(--primary);
color: #FFFFFF;
}
.percurso-grid {
grid-template-columns: 1fr;
gap: clamp(40px, 5vw, 56px);
}
.percurso-photo { max-width: 480px; margin: 0 auto; }
.photo-frame { aspect-ratio: 4/3; }
.exame-hero {
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 40px);
}
.motivos-grid {
grid-template-columns: 1fr;
gap: 18px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(48px, 6vw, 64px);
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 4vw, 48px);
}
.footer-logo { height: 160px; max-width: 260px; }
.footer-logo-wrap { max-width: 560px; }
}
/* Mobile pequeno — 640px */
@media (max-width: 640px) {
:root {
--section-y: clamp(72px, 10vw, 96px);
--gutter: 20px;
}
.site-header {
width: calc(100% - 20px);
top: 10px;
background: rgba(232,245,244,0.50);
backdrop-filter: blur(28px) saturate(170%);
-webkit-backdrop-filter: blur(28px) saturate(170%);
border-color: rgba(0,163,152,0.22);
box-shadow:
0 12px 28px -10px rgba(0,0,0,0.12),
0 4px 10px -4px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.60);
}
.header-inner {
padding: 8px 10px 8px 18px;
min-height: 72px;
}
.brand-logo {
height: 64px;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.08));
}
.nav-toggle {
background: rgba(0,163,152,0.14);
border-color: rgba(0,163,152,0.35);
}
.hero {
padding: 200px 0 48px;
min-height: 100vh;
min-height: 100dvh;
}
/* Foto mobile com crop dedicado (centralizado no doutor) — full-bleed como ambiente */
.hero-bg {
top: 0;
bottom: 0;
height: auto;
border: none;
}
.hero-bg img {
object-position: center 20%;
}
/* Overlay: topo transparente (rosto visivel), faixa branca no meio (texto legivel), fade embaixo */
.hero::before {
background:
linear-gradient(180deg,
rgba(255,255,255,0.10) 0%,
rgba(255,255,255,0.25) 18%,
rgba(255,255,255,0.88) 32%,
rgba(255,255,255,0.95) 45%,
rgba(255,255,255,0.94) 70%,
rgba(255,255,255,0.55) 88%,
rgba(255,255,255,0.15) 100%);
}
.hero-content,
.hero-title,
.hero-lead {
color: var(--ink);
}
.hero-content .eyebrow {
color: var(--primary-deep);
}
.hero-content .eyebrow::before {
background: var(--primary);
}
.hero-title .lift {
color: var(--primary);
}
.hero-lead .lift {
color: var(--primary);
}
.hero .btn-ghost {
background: rgba(255,255,255,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-color: rgba(0,163,152,0.30);
color: var(--primary-deep);
}
.hero .btn-ghost:hover {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
}
.hero-rating {
background: rgba(255,255,255,0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-color: rgba(0,163,152,0.18);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.hero-rating-text {
color: var(--ink);
}
.hero-title {
font-size: clamp(25px, 7vw, 30px);
line-height: 1.12;
margin-bottom: 28px;
}
/* Segunda frase ("Merece um especialista.") vira bloco — sempre em linha propria */
.hero-title .lift {
display: block;
margin-top: 8px;
white-space: nowrap;
}
.hero-lead {
font-size: 19px;
line-height: 1.55;
margin-bottom: 14px;
}
.hero-content .eyebrow { margin-bottom: 20px; }
.hero-ctas {
width: 100%;
flex-direction: column;
margin-top: 56px;
gap: 12px;
}
.hero-ctas .btn { width: 100%; }
.hero-rating {
width: 100%;
padding: 13px 18px;
margin-top: 44px;
}
.hero-rating-text { font-size: 13.5px; }
.h-display { font-size: clamp(26px, 7.5vw, 36px); }
.btn,
.btn-lg {
padding: 14px 24px;
font-size: 14.5px;
width: 100%;
justify-content: center;
}
.cta-row .btn { width: 100%; }
.depo-carousel,
.pub-carousel,
.notas-carousel { padding-left: 4px; padding-right: 4px; }
.depo-carousel { grid-auto-columns: 88%; }
.pub-carousel { grid-auto-columns: minmax(240px, 78vw); }
.notas-carousel { grid-auto-columns: 88%; }
.depo-carousel-arrow,
.pub-carousel-arrow,
.notas-carousel-arrow {
position: static;
transform: none;
}
.depo-carousel-arrow:hover,
.pub-carousel-arrow:hover,
.notas-carousel-arrow:hover {
transform: scale(1.05);
}
.depo-carousel-wrap,
.pub-carousel-wrap,
.notas-carousel-wrap {
display: flex;
flex-direction: column;
}
.depo-carousel-wrap > .depo-carousel,
.pub-carousel-wrap > .pub-carousel,
.notas-carousel-wrap > .notas-carousel { order: 0; }
.depo-carousel-wrap > .depo-carousel-arrow,
.pub-carousel-wrap > .pub-carousel-arrow,
.notas-carousel-wrap > .notas-carousel-arrow {
order: 2;
margin-top: 12px;
align-self: center;
}
.depo-carousel-wrap > .depo-carousel-dots,
.pub-carousel-wrap > .pub-carousel-dots,
.notas-carousel-wrap > .notas-carousel-dots {
order: 1;
margin-top: 12px;
}
.depo-carousel-wrap > .depo-carousel-prev,
.pub-carousel-wrap > .pub-carousel-prev,
.notas-carousel-wrap > .notas-carousel-prev {
display: none;
}
.exame-hero { padding: clamp(20px, 4vw, 28px); border-radius: var(--r-lg); }
.exame-hero-img-wrap { aspect-ratio: 4/3; border-radius: var(--r-md); }
.cred-quote { padding: 32px 24px; border-radius: var(--r-lg); }
.cred-quote-main p { font-size: 19px; }
.cred-quote::before { font-size: 100px; top: -10px; left: 16px; }
.cred-note { font-size: 13px; padding: 14px 18px; }
.photo-frame { aspect-ratio: 3/4; }
.photo-frame img { object-position: center 15%; }
.whatsapp-float {
right: 16px;
bottom: 16px;
width: 56px;
height: 56px;
}
.whatsapp-float svg { width: 26px; height: 26px; }
.footer-top { padding: 56px 0 28px; }
.footer-top-inner { gap: 18px; }
.footer-logo-wrap { gap: 10px; max-width: 360px; }
.footer-logo-line { min-width: 14px; max-width: 60px; }
.footer-logo { height: 130px; max-width: 200px; }
.footer-tagline { font-size: 14px; }
.footer-social-link { width: 40px; height: 40px; }
.footer-social-link svg { width: 17px; height: 17px; }
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 36px 0 48px;
}
.footer-col h4 { margin-bottom: 16px; font-size: 12.5px; }
.footer-info-item { font-size: 14.5px; }
.footer-links li,
.footer-links a { font-size: 14.5px; }
.rd360-logo { width: 78px; }
.footer-bottom-inner {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 8px;
}
}
/* Mobile muito pequeno — 380px */
@media (max-width: 380px) {
.brand-logo { height: 58px; }
.hero-title { font-size: 26px; }
}
/* ============================================================
SEPARADOR MINIMALISTA — pontos crescentes do centro
Assina cada transicao entre secoes com a linguagem da marca
============================================================ */
.section-divider {
display: flex;
justify-content: center;
align-items: center;
padding-top: clamp(28px, 3vw, 44px);
margin-top: calc(var(--section-y) * -0.55);
margin-bottom: clamp(32px, 3.6vw, 52px);
position: relative;
z-index: 3;
pointer-events: none;
}
.section-divider::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, calc(-50% + 8px));
background: radial-gradient(circle at center, currentColor 0%, transparent 60%);
opacity: 0.10;
pointer-events: none;
z-index: -1;
}
.section-divider svg {
width: clamp(112px, 10vw, 148px);
height: auto;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
transition: opacity 360ms var(--ease), transform 720ms var(--ease);
position: relative;
z-index: 1;
}
.reveal.in-view ~ .section-divider svg,
.section.in-view .section-divider svg { transform: translateY(0); opacity: 1; }
/* Variante: sobre fundo turquesa (Cuidados, Percurso) — pontos brancos */
.section-divider--on-primary svg {
color: #FFFFFF;
opacity: 0.55;
}
/* Variante: sobre fundo branco (Exames) — pontos turquesa */
.section-divider--on-paper svg {
color: var(--primary);
opacity: 0.55;
}
/* Variante: sobre fundo cream (Depoimentos, Notas) — pontos turquesa profundo */
.section-divider--on-cream svg {
color: var(--primary-deep);
opacity: 0.48;
}
/* Mobile: separador um pouco menor */
@media (max-width: 640px) {
.section-divider {
margin-top: calc(var(--section-y) * -0.45);
margin-bottom: clamp(20px, 3vw, 28px);
}
.section-divider svg { width: 80px; }
}
/* ============================================================
PRINT
============================================================ */
@media print {
.site-header,
.whatsapp-float,
.nav-toggle,
.nav-mobile,
.cta-header,
.hero-ctas,
.cta-row,
.depo-carousel-arrow,
.pub-carousel-arrow,
.notas-carousel-arrow,
.depo-carousel-dots,
.pub-carousel-dots,
.notas-carousel-dots { display: none !important; }
body { background: #FFFFFF; color: #000; }
.reveal { opacity: 1 !important; transform: none !important; }
}