html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* ======================================================
DESIGN TOKENS — identidade visual global
Altere estes valores para atualizar a paleta do site inteiro.
====================================================== */
:root {
--cor-primaria: #143A63;
--cor-primaria-clara: #1E4D8C;
--cor-primaria-escura: #0E2C4A;
--cor-destaque: #C9A227;
--cor-destaque-clara: #F7EFD8;
--cor-destaque-hover: #DDB43A;
--cor-texto: #51606D;
--cor-texto-suave: #737F8C;
--cor-fundo: #F8FAFC;
--cor-superficie: #FFFFFF;
--cor-borda: #DDE3EA;
--fundo-hero: linear-gradient(135deg, #EEF3F8 0%, #FFFFFF 54%, #F1F5F9 100%);
--sombra-suave: 0 12px 34px rgba(20, 58, 99, .045);
--sombra-card: 0 15px 38px rgba(20, 58, 99, .06);
--sombra-card-hover: 0 20px 42px rgba(20, 58, 99, .10);
--fonte-texto: 'Poppins', sans-serif;
--fonte-titulo: 'Cormorant Garamond', serif;
}
/*=========================================
= HERO - INICIO
=========================================*/
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
padding: 120px 0 80px;
background-image:
linear-gradient(90deg,
rgba(7, 20, 38, .94),
rgba(16, 45, 80, .80));
background-size: cover;
background-position: center;
}
/* camada de profundidade */
.hero::before {
content: "";
position: absolute;
width: 550px;
height: 550px;
border-radius: 50%;
background: rgba(201, 162, 39, .12);
right: -180px;
top: -150px;
filter: blur(60px);
}
.hero::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background: rgba(255, 255, 255, .04);
left: -150px;
bottom: -100px;
}
/* overlay */
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(5, 15, 30, .80),
rgba(5, 15, 30, .45));
}
/*
Marca d'água da página inicial. A imagem já está recortada e sem fundo;
a transparência baixa mantém a identidade visual sem competir com o texto.
*/
.hero-watermark {
position: absolute;
z-index: 1;
top: 50%;
right: clamp(-170px, -7vw, -55px);
width: min(62vw, 920px);
aspect-ratio: 1400 / 915;
transform: translateY(-50%);
background: url("../img/monograma-marca-dagua.png") center / contain no-repeat;
opacity: .075;
pointer-events: none;
}
/* conteúdo */
.hero-content {
position: relative;
z-index: 2;
}
/*========================================
BADGE
========================================*/
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 50px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
backdrop-filter: blur(10px);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 500;
margin-bottom: 30px;
}
.hero-badge i {
color: var(--cor-destaque);
}
/*========================================
TITULO
========================================*/
.hero h1 {
font-family: 'Cormorant Garamond', serif;
font-size: 78px;
line-height: 1.05;
font-weight: 700;
letter-spacing: -1px;
color: #fff;
max-width: 720px;
margin: 0 0 25px;
}
.hero h1 span {
color: var(--cor-destaque);
}
/*========================================
TEXTO
========================================*/
.hero p {
font-family: 'Poppins', sans-serif;
font-size: 19px;
font-weight: 300;
line-height: 35px;
max-width: 650px;
color: rgba(255, 255, 255, .95);
margin-bottom: 40px;
}
/*========================================
BOTÕES
========================================*/
.hero-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.btn-hero {
height: 58px;
padding: 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
transition: .3s;
text-decoration: none;
}
.btn-primary {
background: var(--cor-destaque);
color: var(--cor-primaria-escura);
}
.btn-primary:hover {
background: var(--cor-destaque-hover);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}
.btn-secondary {
border: 2px solid rgba(255, 255, 255, .7);
color: #fff;
}
.btn-secondary:hover {
background: white;
color: var(--cor-primaria-escura);
}
/*========================================
BENEFÍCIOS
========================================*/
.hero-benefits {
display: flex;
flex-wrap: wrap;
gap: 28px;
margin-bottom: 20px;
}
.hero-benefits div {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.hero-benefits i {
color: var(--cor-destaque);
font-size: 18px;
}
/*========================================
CARD
========================================*/
.hero-card {
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 25px;
padding: 35px;
box-shadow:
0 25px 60px rgba(0, 0, 0, .35);
}
.hero-card hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, .15);
margin: 25px 0;
}
.hero-card-item {
display: flex;
gap: 18px;
}
.hero-card-item i {
font-size: 28px;
color: var(--cor-destaque);
}
.hero-card h5 {
font-family: 'Cormorant Garamond', serif;
color: white;
font-size: 25px;
margin: 0;
}
.hero-card p {
font-size: 14px;
line-height: 24px;
margin: 5px 0 0;
}
/*========================================
ANIMAÇÕES
========================================*/
.hero-badge,
.hero h1,
.hero p,
.hero-buttons,
.hero-benefits {
animation: entradaLeft .9s ease;
}
.hero-card {
animation: entradaRight 1s ease;
}
@keyframes entradaLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes entradaRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/*========================================
TABLET
========================================*/
@media(max-width:992px) {
.hero {
text-align: center;
padding: 130px 0 90px;
}
.hero h1 {
font-size: 58px;
}
.hero p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.hero-benefits {
justify-content: center;
}
.hero-card {
display: none;
}
.hero-watermark {
right: -20vw;
width: 112vw;
opacity: .045;
}
}
/* ======================================================
RESPONSIVO MOBILE — HERO
====================================================== */
@media(max-width:600px) {
/* ==============================
HERO MOBILE
============================== */
.hero {
min-height: auto;
padding: 55px 20px 70px;
}
.hero-watermark {
right: -36vw;
width: 132vw;
opacity: .035;
}
}
.hero h1 {
font-size: 42px;
line-height: 1.15;
margin-top: 25px;
margin-bottom: 25px;
}
.hero p {
font-size: 16px;
line-height: 30px;
padding: 0 5px;
}
/* ==============================
BOTÕES
============================== */
.hero-buttons {
flex-direction: column;
gap: 18px;
align-items: center;
}
.btn-hero {
width: 90%;
margin: auto;
}
/* ==============================
BENEFÍCIOS
============================== */
.hero-benefits {
flex-direction: column;
align-items: center;
gap: 18px;
margin-top: 35px;
}
.hero-benefits div {
text-align: center;
}
/*=========================================
= HERO - FIM
=========================================*/
/*==================================================
SOBRE A DRA. - INICIO
==================================================*/
.sobre-home {
padding: 90px 0;
background: #fff;
}
.sobre-home .row {
display: flex;
align-items: center;
margin-bottom: 0;
}
/*==================================
TEXTO
==================================*/
.sobre-conteudo {
padding-right: 50px;
}
.sobre-subtitulo {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-radius: 40px;
background: #F5F8FC;
color: var(--cor-primaria-clara);
font-size: 14px;
font-weight: 600;
margin-bottom: 22px;
}
.sobre-subtitulo i {
color: var(--cor-destaque);
}
.sobre-conteudo h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 52px;
color: var(--cor-primaria-escura);
line-height: 1.15;
margin: 0 0 25px;
}
.sobre-conteudo p {
font-size: 17px;
line-height: 32px;
color: #5F6B7A;
margin-bottom: 18px;
}
/*==================================
DIFERENCIAIS
==================================*/
.sobre-diferenciais {
margin: 35px 0;
}
.sobre-item {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 28px;
}
.sobre-item i {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 50%;
background: var(--cor-primaria-escura);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.sobre-item h5 {
font-size: 20px;
color: var(--cor-primaria-escura);
margin: 0 0 6px;
}
.sobre-item p {
margin: 0;
line-height: 28px;
}
/*==================================
BOTÃO
==================================*/
.btn-sobre {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px 34px;
border-radius: 50px;
background: var(--cor-destaque);
color: var(--cor-primaria-escura);
font-weight: 600;
text-decoration: none;
transition: .35s;
}
.btn-sobre:hover {
background: var(--cor-destaque-hover);
transform: translateY(-4px);
}
/*==================================
FOTO
==================================*/
.sobre-imagem {
position: relative;
}
.sobre-home .sobre-imagem img {
width: 100%;
/*
* Enquadramento da foto da Dra. Damaris na Home (desktop).
* A altura fixa aproxima a base da foto da base do conteúdo textual.
* object-fit recorta apenas o excedente sem deformar a imagem e
* object-position controla o foco:
* diminua a porcentagem para subir a foto ou aumente para baixá-la.
*/
height: 720px;
max-height: 720px;
object-fit: cover;
object-position: center 20%;
border-radius: 26px;
display: block;
/* Sombra leve em duas camadas para destacar a foto sem deixá-la pesada. */
box-shadow:
0 18px 42px rgba(14, 44, 74, .14),
0 4px 12px rgba(14, 44, 74, .08);
transition: transform .35s ease, box-shadow .35s ease;
}
/* Efeito discreto de profundidade apenas em dispositivos com mouse. */
@media (hover: hover) and (pointer: fine) {
.sobre-home .sobre-imagem:hover img {
transform: translateY(-4px);
box-shadow:
0 24px 52px rgba(14, 44, 74, .17),
0 6px 16px rgba(14, 44, 74, .10);
}
}
/*
* No celular, a moldura 6 / 7 reproduz o recorte mais baixo do desktop.
* Isso evita exibir uma área vertical maior apenas por causa da tela estreita.
*/
@media(max-width:992px) {
.sobre-home .sobre-imagem img {
height: auto;
max-height: none;
aspect-ratio: 6 / 7;
}
}
.sobre-selo {
position: absolute;
left: 24px;
right: auto;
bottom: 24px;
min-width: 245px;
/* Identificação em estilo glass: moderna, leve e legível sobre a fotografia. */
background: rgba(8, 37, 68, .78);
border: 1px solid rgba(255, 255, 255, .18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #fff;
padding: 15px 18px 15px 28px;
border-radius: 14px;
text-align: left;
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
/* Traço dourado usado como assinatura visual do selo. */
.sobre-selo::before {
position: absolute;
top: 13px;
bottom: 13px;
left: 13px;
width: 3px;
border-radius: 999px;
background: var(--cor-destaque);
content: '';
}
.sobre-selo strong {
display: block;
font-size: 15px;
line-height: 1.35;
color: var(--cor-destaque);
}
.sobre-selo span {
display: block;
margin-top: 2px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* FOTO MOBILE */
.sobre-imagem-mobile {
display: none;
}
/*==================================================
RESPONSIVO
==================================================*/
@media(max-width:992px) {
.sobre-home {
padding: 70px 0;
}
.sobre-conteudo {
padding-right: 0;
}
/* Esconde foto desktop */
.hide-on-med-and-down {
display: none !important;
}
/* Mostra foto dentro do conteúdo */
.sobre-imagem-mobile {
display: block;
margin: 30px auto;
}
.sobre-imagem {
max-width: 380px;
margin: auto;
}
.sobre-conteudo {
text-align: center;
}
.sobre-subtitulo {
margin: 0 auto 20px;
}
.sobre-conteudo h2 {
font-size: 40px;
}
.sobre-conteudo p {
font-size: 16px;
line-height: 30px;
}
.sobre-diferenciais {
text-align: left;
margin-top: 35px;
}
.btn-sobre {
width: 100%;
}
}
@media(max-width:600px) {
.sobre-home {
padding: 55px 0;
}
.sobre-conteudo {
padding: 0 18px;
}
.sobre-conteudo h2 {
font-size: 33px;
line-height: 1.2;
}
.sobre-conteudo p {
font-size: 15px;
line-height: 28px;
}
.sobre-imagem {
max-width: 320px;
}
.sobre-selo {
left: 16px;
right: 16px;
bottom: 16px;
min-width: 0;
padding: 13px 16px 13px 26px;
}
.sobre-selo strong {
font-size: 14px;
}
.sobre-item {
gap: 15px;
margin-bottom: 22px;
}
.sobre-item i {
width: 46px;
height: 46px;
min-width: 46px;
font-size: 16px;
}
.sobre-item h5 {
font-size: 17px;
}
.sobre-item p {
font-size: 14px;
line-height: 24px;
}
.btn-sobre {
height: 55px;
font-size: 15px;
}
}
/* ======================================================
SOBRE A DRA. - FIM
====================================================== */
/*======================================================
DIFERENCIAIS - INICIO
======================================================*/
.diferenciais-home {
padding: 110px 0;
background:
linear-gradient(135deg,
var(--cor-primaria),
var(--cor-primaria-clara));
position: relative;
overflow: hidden;
}
/* detalhes de fundo */
.diferenciais-home::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
border-radius: 50%;
background: rgba(201, 162, 39, .10);
top: -180px;
right: -120px;
filter: blur(20px);
}
.diferenciais-home::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
bottom: -150px;
left: -100px;
filter: blur(20px);
}
/*==========================
HEADER
===========================*/
.diferenciais-header {
position: relative;
z-index: 2;
max-width: 750px;
margin: 0 auto 70px;
}
.diferenciais-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
border-radius: 40px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .20);
color: #FFF;
font-family: 'Poppins', sans-serif;
font-weight: 600;
backdrop-filter: blur(10px);
}
.diferenciais-badge i {
color: var(--cor-destaque);
}
.diferenciais-header h2 {
font-family: 'Cormorant Garamond', serif;
color: #FFF;
font-size: 58px;
line-height: 1.1;
margin: 25px 0;
}
.diferenciais-header h2 span {
color: var(--cor-destaque);
}
.diferenciais-header p {
color: rgba(255, 255, 255, .85);
font-family: 'Poppins', sans-serif;
font-size: 18px;
line-height: 32px;
}
/*==========================
CARDS
===========================*/
.diferencial-card {
height: 100%;
padding: 40px 30px;
border-radius: 25px;
background:
rgba(255, 255, 255, .08);
border:
1px solid rgba(255, 255, 255, .15);
backdrop-filter: blur(12px);
text-align: center;
transition: .35s;
position: relative;
}
.diferencial-card:hover {
transform: translateY(-10px);
background:
rgba(255, 255, 255, .13);
box-shadow:
0 25px 60px rgba(0, 0, 0, .25);
}
/* ÍCONE */
.diferencial-icon {
width: 90px;
height: 90px;
margin: 0 auto 25px;
border-radius: 25px;
background:
linear-gradient(145deg,
var(--cor-destaque),
var(--cor-destaque-hover));
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 15px 35px rgba(0, 0, 0, .25);
}
.diferencial-icon i {
font-size: 38px;
color: var(--cor-primaria);
}
/* TEXTO */
.diferencial-card h4 {
font-family: 'Cormorant Garamond', serif;
color: #FFF;
font-size: 32px;
line-height: 1.2;
margin-bottom: 18px;
}
.diferencial-card p {
color: rgba(255, 255, 255, .85);
font-family: 'Poppins', sans-serif;
font-size: 15px;
line-height: 28px;
}
/*==========================
BOTÃO
===========================*/
.diferencial-btn {
margin-top: 60px;
position: relative;
z-index: 2;
}
.btn-diferencial {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 17px 38px;
border-radius: 50px;
background: var(--cor-destaque);
color: var(--cor-primaria);
font-weight: 700;
transition: .3s;
}
.btn-diferencial:hover {
background: #FFF;
transform: translateY(-4px);
color: var(--cor-primaria);
}
/*======================================================
RESPONSIVO
======================================================*/
@media(max-width:992px) {
.diferencial-card {
margin-bottom: 25px;
}
.diferenciais-header h2 {
font-size: 45px;
}
}
@media(max-width:600px) {
.diferenciais-home {
padding: 80px 0;
}
.diferenciais-header {
margin-bottom: 45px;
padding: 0 20px;
}
.diferenciais-header h2 {
font-size: 36px;
}
.diferenciais-header p {
font-size: 16px;
line-height: 28px;
}
.diferenciais-badge {
font-size: 14px;
padding: 10px 18px;
}
.diferencial-card {
padding: 30px 22px;
margin-bottom: 22px;
}
.diferencial-icon {
width: 80px;
height: 80px;
margin-bottom: 18px;
}
.diferencial-icon i {
font-size: 32px;
}
.diferencial-card h4 {
font-size: 28px;
margin-bottom: 12px;
}
.diferencial-card p {
font-size: 15px;
line-height: 26px;
}
.btn-diferencial {
width: 90%;
justify-content: center;
}
/*======================================================
AJUSTE FINO - ALINHAMENTO DIFERENCIAIS
======================================================*/
.diferencial-card {
height: 390px;
padding: 40px 25px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Ícone */
.diferencial-icon {
flex-shrink: 0;
margin-bottom: 25px;
}
/* Títulos todos no mesmo espaço */
.diferencial-card h4 {
height: 70px;
margin: 0 0 15px;
display: flex;
align-items: center;
justify-content: center;
}
/* Texto */
.diferencial-card p {
margin: 0;
height: 90px;
display: flex;
align-items: flex-start;
justify-content: center;
}
@media(max-width:600px) {
.diferencial-card {
height: auto;
min-height: 360px;
}
.diferencial-card h4 {
height: auto;
}
.diferencial-card p {
height: auto;
}
}
}
/*======================================================
DIFERENCIAIS - FIM
======================================================*/
/*======================================================
DEPOIMENTOS - INICIO
======================================================*/
/*
MANUTENÇÃO DA SEÇÃO DE AVALIAÇÕES
- O HTML de cada avaliação está em: includes/depoimentos.php.
- A navegação do carrossel e o botão "Ler avaliação completa" estão em:
js/depoimentos-carousel.js.
- Os estilos abaixo definem exclusivamente o visual da seção na Home.
Organização visual adotada:
1. Computador: três cards por vez, com autores alinhados na mesma base.
2. Tablet: dois cards por vez.
3. Celular: um card por vez, com largura quase total e altura de prévia fixa.
Ao alterar medidas, mantenha os mesmos pontos de quebra do JavaScript
(600px e 992px), pois ele usa esses valores para calcular quantos cards
devem aparecer em cada tamanho de tela.
*/
/*======================================================
CARROSSEL DE DEPOIMENTOS
A área visível esconde somente os cards que ainda não estão na tela.
O JavaScript desloca a faixa interna conforme o botão escolhido, sem
duplicar avaliações nem depender de um serviço externo.
======================================================*/
.depoimentos-carousel {
position: relative;
z-index: 2;
/*
O carrossel precisa ocultar os cards que ficam fora da tela. Este espaço
interno extra impede que a sombra do primeiro ou do último card seja
cortada de forma reta quando o mouse passa sobre ele. As margens negativas
compensam o respiro para preservar o alinhamento original dos cards.
*/
overflow: hidden;
margin: -35px -40px -10px;
padding: 40px 45px 28px;
}
.depoimentos-carousel .depoimentos-grid {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
/*
O espaço de 26px separa visualmente os cards e também é lido pelo
JavaScript ao calcular a distância exata de cada avanço no carrossel.
*/
gap: 26px;
margin: 0;
transition: transform .45s ease;
will-change: transform;
}
.depoimentos-carousel .depoimentos-grid > .col {
display: flex;
/*
Dois espaços de 26px equivalem a 52px. O restante é dividido em três
para que os três cards preencham a faixa sem quebra de linha.
*/
flex: 0 0 calc((100% - 52px) / 3);
width: calc((100% - 52px) / 3) !important;
max-width: calc((100% - 52px) / 3);
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
/* Os botões permitem avançar ou voltar sem movimento automático inesperado. */
.depoimentos-controles {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 30px;
}
.depoimentos-seta {
width: 43px;
height: 43px;
border: 1px solid rgba(201, 161, 45, .55);
border-radius: 50%;
background: #FFFFFF;
color: var(--cor-primaria);
cursor: pointer;
/*
O Materialize aplica fundo verde a todo