/* ============================================================
* CECÍLIA MASSAGENS — estilo.css
* CP Centro de Terapias e Bem-Estar
* ============================================================
*
* ESTRUTURA DO FICHEIRO
* ─────────────────────────────────────────────────────────────
* 01. VARIÁVEIS (Design Tokens)
* 02. RESET & BASE
* 03. ACESSIBILIDADE (Skip Link, Focus)
* 04. TIPOGRAFIA
* 05. BARRA TOPO
* 06. NAVBAR
* 07. HERO — Página Inicial (Slideshow)
* 08. HERO — Páginas Internas
* 09. BREADCRUMB
* 10. BOTÕES (Sistema unificado)
* 11. ETIQUETA DE SECÇÃO
* 12. FAIXA STATS
* 13. SECÇÃO SOBRE
* 14. CARDS SERVIÇOS — Home (overlay)
* 15. CARDS SERVIÇOS — servicos.html (expandido)
* 16. SEPARADOR DE CATEGORIA
* 17. FILTROS DE CATEGORIA
* 18. FAIXA CTA + FAIXA COMBINAR
* 19. FORMULÁRIO DE RESERVA
* 20. VÍDEOS
* 21. BLOG
* 22. FAIXA PILARES
* 23. PREÇOS
* 24. NOSSO ESPAÇO
* 25. SOBRE MIM
* 26. CONTACTOS
* 27. RODAPÉ
* 28. BOTÃO WHATSAPP FLUTUANTE
* 29. COOKIE BANNER RGPD
* 30. ANIMAÇÕES FADE-IN
* 31. BOOTSTRAP OVERRIDES
* 32. RESPONSIVO
* ─────────────────────────────────────────────────────────────
* DEPENDÊNCIAS no de CADA PÁGINA (antes deste CSS):
*
*
*
*
*
* Raiz:
* pages/:
* ============================================================ */
/* ============================================================
* 01. VARIÁVEIS — DESIGN TOKENS
* Mude aqui para alterar toda a identidade visual do site.
* ============================================================ */
:root {
/* Paleta — Pele e Aconchego (Minimalista e Elegante) */
--argila: #C29B83; /* Terracota Suave — blocos de texto/menus em destaque */
--argila-escura: #A68570;
--creme: #FAF9F6; /* Branco Marfim — fundo geral, leve e limpo */
--creme-branco: #E8DCCB; /* Nude/Bege — fundo de secções específicas */
--verde: #5C4033; /* Castanho Chocolate — CTA (paleta monocromática, sem verde) */
--verde-escuro: #50382C;
--detalhe: #5C4033; /* Castanho Chocolate — forte contraste em títulos */
--texto: #5C4033;
--texto-claro: #C29B83;
/* Tipografia */
--fonte-titulo: 'Cormorant Garamond', Georgia, serif;
--fonte-corpo: 'Jost', sans-serif;
/* Sombras */
--sombra: 0 12px 40px rgba(92,64,51,0.10);
--sombra2: 0 24px 64px rgba(92,64,51,0.16);
/* Forma */
--raio: 14px;
--raio-btn: 50px;
--transicao: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
--transicao-r: 0.25s ease;
/* Alias — algumas páginas (blog, contactos, reservas, sobre-mim) foram
escritas usando estes nomes; mantidos aqui para que a cor pretendida
seja sempre aplicada, sem precisar de alterar cada ocorrência inline */
--cor-principal: var(--argila);
--cor-secundaria: var(--verde);
--cor-castanho: var(--detalhe);
--cor-texto: var(--texto);
--cor-texto-suave: var(--texto-claro);
--cor-saude: #A68570;
--cor-terapias: var(--argila);
--cor-dicas: var(--detalhe);
}
/* ============================================================
* 02. RESET & BASE
* ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--fonte-corpo);
font-weight: 300;
color: var(--texto);
background-color: var(--creme);
overflow-x: hidden;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
/* ============================================================
* 03. ACESSIBILIDADE — Skip Link e Focus visível (WCAG 2.1)
* ============================================================ */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--detalhe);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0 0 8px 8px;
font-family: var(--fonte-corpo);
font-size: 0.88rem;
z-index: 9999;
transition: top 0.2s;
}
.skip-link:focus { top: 0; color: #fff; }
:focus-visible {
outline: 3px solid var(--argila);
outline-offset: 3px;
border-radius: 3px;
}
/* ============================================================
* 04. TIPOGRAFIA — Hierarquia e componentes de texto
* ============================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fonte-titulo);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--detalhe);
line-height: 1.15;
}
.sec-titulo {
font-size: clamp(1.9rem, 3.2vw, 2.9rem);
font-weight: 300;
font-style: italic;
margin-bottom: 20px;
}
.sec-sub {
font-size: 0.97rem;
color: var(--texto-claro);
line-height: 1.8;
}
.sec-header {
text-align: center;
margin-bottom: 64px;
}
.sec-header .sec-sub {
max-width: 520px;
margin: 0 auto;
}
/* ============================================================
* 05. BARRA TOPO — Ticker animado (scroll direita → esquerda)
* O JS em main.js (initBarraTopo) duplica o conteúdo
* para criar o loop contínuo sem quebra de texto.
* ============================================================ */
.barra-topo {
background: var(--detalhe);
border-bottom: 1px solid rgba(255,255,255,0.08);
overflow: hidden; /* esconde o texto fora do contentor */
white-space: nowrap; /* impede quebra de linha */
height: 28px;
display: flex;
align-items: center;
}
/* Faixa deslizante — largura definida em JS após duplicar conteúdo */
.barra-topo-track {
display: inline-flex;
align-items: center;
gap: 0;
animation: tickerSlide 28s linear infinite;
will-change: transform;
}
/* Pausa ao passar o rato */
.barra-topo:hover .barra-topo-track {
animation-play-state: paused;
}
/* Animação de deslize — desloca metade (conteúdo duplicado) */
@keyframes tickerSlide {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Cada item dentro do ticker */
.barra-topo-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 40px; /* espaço entre itens */
font-family: var(--fonte-corpo);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
/* Separador decorativo entre itens */
.barra-topo-item::after {
content: '·';
margin-left: 40px;
opacity: 0.35;
}
.barra-topo-item:last-child::after { content: ''; }
.barra-topo-item strong { color: var(--argila); font-weight: 500; }
.barra-topo-item a {
color: rgba(255,255,255,0.65);
transition: color var(--transicao-r);
}
.barra-topo-item a:hover { color: #fff; }
.barra-topo-item i { font-size: 0.78rem; }
/* ============================================================
* 06. NAVBAR — Glassmorphism + sticky + efeito ao scroll
* Classe .scrolled adicionada por JS (main.js)
* ============================================================ */
.navbar {
background: rgba(239,235,233,0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 10px 0;
border-bottom: 1px solid transparent;
transition: all 0.35s ease;
position: sticky;
top: 0;
z-index: 900;
}
.navbar.scrolled {
background: rgba(239,235,233,0.98);
border-bottom-color: rgba(141,110,99,0.15);
box-shadow: 0 4px 24px rgba(78,52,46,0.10);
padding: 8px 0;
}
.navbar-brand img {
height: 46px;
width: auto;
}
/* Links de navegação com sublinhado animado */
.nav-link {
font-family: var(--fonte-corpo);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--texto) !important;
padding: 6px 14px !important;
position: relative;
transition: color 0.3s;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0; left: 14px; right: 14px;
height: 1px;
background: var(--argila);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.nav-link:hover { color: var(--argila) !important; }
.nav-link:hover::after,
.nav-link.ativo::after,
.nav-link.active::after { transform: scaleX(1); }
/* Botão CTA na navbar */
.btn-nav-cta {
background: var(--detalhe) !important;
color: #fff !important;
border-radius: var(--raio-btn) !important;
padding: 9px 22px !important;
font-size: 0.75rem !important;
letter-spacing: 0.1em;
transition: background var(--transicao), transform 0.2s;
}
.btn-nav-cta::after { display: none; }
.btn-nav-cta:hover { background: var(--argila) !important; transform: translateY(-1px); }
.navbar-toggler { border: 1px solid rgba(141,110,99,0.3); }
.navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(122,155,140,0.2); }
/* ============================================================
* 07. HERO — Página Inicial (Fullscreen Slideshow CSS)
* Imagens de fundo definidas inline no HTML via style=""
* ============================================================ */
.hero {
position: relative;
height: 90vh;
min-height: 580px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
animation: kfSlide 18s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
/* Imagens do slideshow — homepage (index.html) — 4 slides, ciclo de 24s */
.hero .hero-slide { animation-duration: 24s; }
.hero .hero-slide:nth-child(4) { animation-delay: 18s; }
.hero .hero-slide:nth-child(1) { background-image: url('../imagens/aromaterapia-hero.jpg'); background-position: center 15%; }
.hero .hero-slide:nth-child(2) { background-image: url('../imagens/hero-relaxamento-largo.jpg'); background-position: center 35%; }
.hero .hero-slide:nth-child(3) { background-image: url('../imagens/massagem_indiana_cabeca2.jpg'); }
.hero .hero-slide:nth-child(4) { background-image: url('../imagens/sala_de_espera.jpg'); background-position: center 30%; }
/* Monograma CP — logótipo real (SVG), 2 metades sobrepostas, cada uma cai com o seu atraso */
.hero-monograma {
position: absolute;
top: 20px;
left: 5%;
z-index: 2;
width: clamp(110px, 12vw, 190px);
aspect-ratio: 21000 / 14800;
pointer-events: none;
user-select: none;
}
.hero-mono-metade {
position: absolute;
inset: 0;
overflow: visible;
opacity: 0;
transform: translateY(-260%);
animation: quedaSuave 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25));
}
.hero-mono-metade img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: contain;
}
.hero-mono-esquerda { clip-path: inset(0 51% 0 0); animation-delay: 0.5s; }
.hero-mono-direita { clip-path: inset(0 0 0 48%); animation-delay: 1.3s; }
@keyframes quedaSuave {
0% { opacity: 0; transform: translateY(-260%); }
55% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px) {
.hero-monograma { top: 12px; left: 4%; width: clamp(70px, 16vw, 110px); }
.hero-pretitulo { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
.hero-mono-metade { animation: none; opacity: 1; transform: translateY(0); }
}
@keyframes kfSlide {
0% { opacity: 0; }
5% { opacity: 1; }
28% { opacity: 1; }
33% { opacity: 0; }
100% { opacity: 0; }
}
/* Gradiente warm sobre as imagens */
.hero::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(78,52,46,0.20) 0%,
rgba(0,0,0,0.05) 35%,
rgba(78,52,46,0.72) 100%);
z-index: 1;
}
.hero-conteudo { position: relative; z-index: 2; padding-bottom: 80px; width: 100%; }
.hero-pretitulo {
display: inline-block;
position: relative;
top: 34px;
font-family: var(--fonte-corpo);
font-size: 0.70rem; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--argila);
text-shadow: 0 2px 6px rgba(0,0,0,0.45);
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(2.8rem, 5.5vw, 5rem);
font-weight: 300; font-style: italic;
color: #fff; margin-bottom: 22px;
}
.hero h1 .hero-subtitulo-elegante {
display: block;
margin-top: 4px;
color: #E9C9A8;
text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.45);
}
.hero-desc {
color: rgba(255,255,255,0.78);
font-size: 0.98rem; font-weight: 300;
line-height: 1.8; max-width: 460px; margin-bottom: 38px;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* ============================================================
* 08. HERO — Páginas Internas (mini hero com imagem fixa)
* Imagem: style="background-image:url(...)" no HTML
* ============================================================ */
.hero-interior {
position: relative;
height: clamp(340px, 45vw, 640px);
display: flex;
align-items: flex-end;
overflow: hidden;
background-size: cover;
background-position: center;
}
/* Slideshow dentro do hero interior (servicos.html) */
.hero-interior .hero-bg { position: absolute; inset: 0; z-index: 0; }
/* Imagens do slideshow — página de Serviços (servicos.html) */
.hero-interior .hero-slide:nth-child(1) { background-image: url('../imagens/aromaterapia-oleos-aplicacao.jpg'); }
.hero-interior .hero-slide:nth-child(2) { background-image: url('../imagens/sala_de_espera.jpg'); }
.hero-interior .hero-slide:nth-child(3) { background-image: url('../imagens/Ayurvedra.jpg'); background-position: center 35%; }
/* Imagem de fundo fixa — página de Preços (precos.html), sem slideshow */
.hero-interior.hero-precos { background-image: url('../imagens/reflexologia1.jpg'); background-position: center 25%; }
.hero-interior::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(78,52,46,0.22) 0%,
rgba(78,52,46,0.70) 100%);
z-index: 1;
}
.hero-interior-conteudo,
.hero-interior .hero-conteudo {
position: relative; z-index: 2;
padding-bottom: 60px; width: 100%;
}
.hero-interior h1 {
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 300; font-style: italic;
color: #fff; margin-bottom: 10px;
}
.hero-interior-sub {
font-family: var(--fonte-corpo);
font-size: 0.82rem;
color: rgba(255,255,255,0.68);
letter-spacing: 0.12em; text-transform: uppercase;
margin-top: 8px;
}
/* ============================================================
* 09. BREADCRUMB — Navegação contextual (páginas internas)
* ============================================================ */
.breadcrumb-custom {
display: flex; align-items: center; gap: 8px;
font-family: var(--fonte-corpo);
font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(255,255,255,0.48);
margin-bottom: 16px;
}
.breadcrumb-custom a { color: rgba(255,255,255,0.48); transition: color 0.3s; }
.breadcrumb-custom a:hover { color: var(--argila); }
.breadcrumb-custom i { font-size: 0.55rem; opacity: 0.6; }
/* ============================================================
* 10. BOTÕES — Sistema unificado (todas as variantes)
* ============================================================ */
/* Principal escuro — ação primária */
.btn-p {
display: inline-block;
background: var(--detalhe); color: #fff;
border-radius: var(--raio-btn);
padding: 14px 34px;
font-family: var(--fonte-corpo); font-size: 0.78rem;
font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
border: none; cursor: pointer;
transition: background var(--transicao), transform 0.2s;
}
.btn-p:hover { background: var(--argila); color: #fff; transform: translateY(-2px); }
/* Verde spa — ação secundária */
.btn-verde {
display: inline-block;
background: var(--verde); color: #fff;
border-radius: var(--raio-btn); padding: 14px 34px;
font-family: var(--fonte-corpo); font-size: 0.78rem;
font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
border: none; cursor: pointer;
transition: background var(--transicao), transform 0.2s;
}
.btn-verde:hover { background: var(--verde-escuro); color: #fff; transform: translateY(-2px); }
/* Fantasma claro — sobre fundos escuros */
.btn-ghost {
display: inline-block;
background: transparent; color: #fff;
border: 1.5px solid rgba(255,255,255,0.55);
border-radius: var(--raio-btn); padding: 13px 34px;
font-family: var(--fonte-corpo); font-size: 0.78rem;
font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
cursor: pointer; transition: all 0.3s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
/* Fantasma escuro — sobre fundos claros */
.btn-ghost-escuro {
display: inline-block;
background: transparent; color: var(--detalhe);
border: 1.5px solid rgba(78,52,46,0.35);
border-radius: var(--raio-btn); padding: 13px 34px;
font-family: var(--fonte-corpo); font-size: 0.78rem;
font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
cursor: pointer; transition: all 0.3s;
}
.btn-ghost-escuro:hover { background: var(--detalhe); border-color: var(--detalhe); color: #fff; }
/* Branco — sobre fundo CTA verde */
.btn-branco {
display: inline-block;
background: #fff; color: var(--detalhe);
border-radius: var(--raio-btn); padding: 15px 38px;
font-family: var(--fonte-corpo); font-size: 0.78rem;
font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
border: none; cursor: pointer; transition: all 0.3s;
}
.btn-branco:hover { background: var(--detalhe); color: #fff; transform: translateY(-2px); }
/* Formulário — largura total */
.btn-form {
width: 100%; background: var(--detalhe); color: #fff;
border: none; border-radius: var(--raio-btn); padding: 16px;
font-family: var(--fonte-corpo); font-size: 0.78rem;
font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
cursor: pointer; transition: background 0.3s, transform 0.2s;
}
.btn-form:hover { background: var(--argila); transform: translateY(-2px); }
/* Reservar pequeno — rodapé dos cards de serviço */
.btn-reservar-sv {
display: inline-block;
background: var(--detalhe); color: #fff;
border-radius: var(--raio-btn); padding: 10px 22px;
font-family: var(--fonte-corpo); font-size: 0.70rem;
font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
border: none; cursor: pointer; white-space: nowrap;
transition: background var(--transicao), transform 0.2s;
}
.btn-reservar-sv:hover { background: var(--argila); color: #fff; transform: translateY(-2px); }
/* ============================================================
* 11. ETIQUETA DE SECÇÃO — Label acima dos H2
* ============================================================ */
.etiqueta {
display: inline-block;
font-family: var(--fonte-corpo);
font-size: 0.68rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--argila); margin-bottom: 14px;
}
.etiqueta::before { content: '—'; margin-right: 10px; opacity: 0.45; }
/* ============================================================
* 12. FAIXA STATS — Indicadores de confiança (index.html)
* ============================================================ */
.faixa-stats { background: var(--detalhe); padding: 50px 0; }
.stat-item { text-align: center; padding: 0 20px; }
.stat-num {
display: block; font-family: var(--fonte-titulo);
font-size: 2.8rem; font-weight: 300;
color: var(--argila); line-height: 1; margin-bottom: 8px;
}
.stat-label {
display: block; font-size: 0.68rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.sep-v { width: 1px; height: 52px; background: rgba(255,255,255,0.12); align-self: center; }
/* ============================================================
* 13. SECÇÃO SOBRE — Split layout 50/50 (index.html)
* ============================================================ */
.sec-sobre { padding: 110px 0; background: var(--creme); }
.sobre-img-wrap { position: relative; }
.sobre-img { width: 100%; height: 580px; object-fit: cover; border-radius: var(--raio); box-shadow: var(--sombra2); }
/* Badge flutuante com anos de experiência */
.sobre-badge {
position: absolute; bottom: -28px; right: -28px;
background: var(--argila); color: #fff;
border-radius: var(--raio); padding: 28px 34px;
box-shadow: var(--sombra); text-align: center; min-width: 156px;
}
.sobre-badge .b-num {
display: block; font-family: var(--fonte-titulo);
font-size: 3rem; font-weight: 300; line-height: 1;
}
.sobre-badge .b-txt {
display: block; font-size: 0.68rem; font-weight: 500;
letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.85; margin-top: 6px;
}
.sobre-corpo { padding-left: 3.5rem; }
/* Lista de diferenciais */
.lista-check { list-style: none; padding: 0; margin: 28px 0 40px; }
.lista-check li {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 14px; font-size: 0.95rem; color: var(--texto);
}
.check-icon {
width: 22px; height: 22px; background: var(--verde);
border-radius: 50%; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.check-icon i { font-size: 0.58rem; color: #fff; }
/* ============================================================
* 14. CARDS DE SERVIÇOS — Página inicial (overlay fullimage)
* ============================================================ */
.sec-servicos-home { padding: 110px 0; background: var(--creme-branco); }
.card-s {
position: relative; border-radius: var(--raio);
overflow: hidden; height: 380px; box-shadow: var(--sombra); display: block;
}
.card-s-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.card-s-overlay {
position: absolute; inset: 0;
background: rgba(78,52,46,0.52);
display: flex; flex-direction: column;
align-items: center; justify-content: flex-end;
padding: 32px 28px; transition: background var(--transicao);
}
.card-s:hover .card-s-overlay { background: rgba(78,52,46,0.12); }
.card-s:hover .card-s-img { transform: scale(1.07); }
.card-s-corpo { text-align: center; width: 100%; }
.card-s-dur {
display: inline-block; background: var(--argila); color: #fff;
font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
padding: 4px 14px; border-radius: 50px; margin-bottom: 10px;
}
.card-s h3 {
font-family: var(--fonte-titulo); font-size: 1.55rem;
font-weight: 400; color: #fff; margin-bottom: 8px;
}
.card-s p {
color: rgba(255,255,255,0.80); font-size: 0.87rem;
line-height: 1.65; margin-bottom: 16px;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height var(--transicao), opacity var(--transicao);
}
.card-s:hover p { max-height: 120px; opacity: 1; }
.card-s-link {
display: inline-block; background: #fff; color: var(--detalhe);
font-size: 0.70rem; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; border-radius: 50px; padding: 9px 24px;
opacity: 0; transform: translateY(8px);
transition: opacity 0.3s, transform 0.3s, background 0.3s;
}
.card-s:hover .card-s-link { opacity: 1; transform: translateY(0); }
.card-s-link:hover { background: var(--argila); color: #fff; }
/* ============================================================
* 15. CARDS DE SERVIÇOS — servicos.html (com tags e preço)
* ============================================================ */
.sec-servicos { padding: 80px 0 100px; background: var(--creme); }
.card-sv {
background: var(--creme-branco); border-radius: var(--raio);
overflow: hidden; box-shadow: var(--sombra);
height: 100%; display: flex; flex-direction: column;
border: 1px solid rgba(141,110,99,0.07);
transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-sv:hover { transform: translateY(-6px); box-shadow: var(--sombra2); }
.card-sv-img-wrap { height: 230px; overflow: hidden; position: relative; }
.card-sv-img {
width: 100%; height: 100%; object-fit: cover;
filter: sepia(0.05); transition: transform 0.55s ease;
}
.card-sv:hover .card-sv-img { transform: scale(1.06); }
/* Badge de categoria sobre a imagem */
.card-sv-cat {
position: absolute; top: 14px; left: 14px;
background: rgba(78,52,46,0.75); backdrop-filter: blur(4px);
color: rgba(255,255,255,0.92);
font-family: var(--fonte-corpo); font-size: 0.60rem;
font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
padding: 4px 12px; border-radius: 50px;
}
.card-sv-cat.c-terapeutica { background: rgba(122,155,140,0.80); }
.card-sv-cat.c-holistica { background: rgba(141,110,99,0.80); }
.card-sv-cat.c-relaxamento { background: rgba(78,52,46,0.80); }
.card-sv-cat.c-estetica { background: rgba(194,155,131,0.88); }
/* Card sem fotografia — usado para serviços ainda sem imagem própria */
.card-sv-img-wrap.sem-foto {
height: 100%; min-height: 210px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--argila), var(--detalhe));
}
.card-sv-img-wrap.sem-foto i {
font-size: 3rem;
color: rgba(255,255,255,0.85);
}
.card-preco-img-wrap.sem-foto {
height: 100%; min-height: 200px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--argila), var(--detalhe));
}
.card-preco-img-wrap.sem-foto i {
font-size: 2.8rem;
color: rgba(255,255,255,0.85);
}
.card-sv-corpo { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-sv-titulo { font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 400; color: var(--detalhe); margin-bottom: 10px; line-height: 1.22; }
.card-sv-desc { font-size: 0.88rem; color: var(--texto-claro); line-height: 1.78; margin-bottom: 16px; }
/* Tags de benefícios */
.tags-beneficio { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tag-b {
font-family: var(--fonte-corpo); font-size: 0.62rem;
font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
padding: 4px 11px; border-radius: 50px;
background: rgba(141,110,99,0.09); color: var(--argila);
border: 1px solid rgba(141,110,99,0.16);
}
/* Rodapé do card: preço + botão reservar */
.card-sv-rodape {
margin-top: auto; padding-top: 16px;
border-top: 1px solid rgba(141,110,99,0.10);
display: flex; align-items: center;
justify-content: space-between; gap: 12px;
}
.preco-indicativo { display: flex; flex-direction: column; }
.preco-label {
font-family: var(--fonte-corpo); font-size: 0.60rem;
font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--texto-claro); opacity: 0.70; line-height: 1; margin-bottom: 3px;
}
.preco-valor { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 300; color: var(--detalhe); line-height: 1; }
.preco-valor .euro { font-family: var(--fonte-corpo); font-size: 0.78rem; font-weight: 500; vertical-align: super; opacity: 0.65; }
.preco-link { font-size: 0.60rem; color: var(--argila); text-decoration: underline; text-underline-offset: 2px; display: block; margin-top: 2px; transition: color 0.3s; }
.preco-link:hover { color: var(--detalhe); }
/* Card destaque horizontal (ex: Miofascial) */
.card-sv-destaque {
background: var(--creme-branco); border-radius: var(--raio);
overflow: hidden; box-shadow: var(--sombra);
border: 1px solid rgba(141,110,99,0.07);
border-left: 3px solid var(--argila);
transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-sv-destaque:hover { transform: translateY(-4px); box-shadow: var(--sombra2); }
.card-sv-destaque-img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; filter: sepia(0.05); }
.card-sv-destaque-corpo { padding: 32px 36px; }
.card-sv-destaque-corpo .card-sv-titulo { font-size: 1.7rem; }
.card-sv-destaque-corpo .card-sv-desc { font-size: 0.92rem; }
.card-sv-destaque-rodape {
padding: 24px 36px;
border-top: 1px solid rgba(141,110,99,0.10);
display: flex; align-items: center;
justify-content: space-between; gap: 16px; flex-wrap: wrap;
background: rgba(141,110,99,0.03);
}
.destaque-preco-info { display: flex; align-items: center; }
/* ============================================================
* 16. SEPARADOR DE CATEGORIA (servicos.html)
* ============================================================ */
.sep-cat { display: flex; align-items: center; gap: 18px; margin: 60px 0 36px; }
.sep-cat::before,
.sep-cat::after { content: ''; flex: 1; height: 1px; background: rgba(141,110,99,0.16); }
.sep-cat-label {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--fonte-corpo); font-size: 0.70rem;
font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--argila); white-space: nowrap;
}
/* ============================================================
* 17. FILTROS DE CATEGORIA — Barra sticky (servicos.html)
* Lógica de filtragem em main.js — initFiltrosServicos()
* ============================================================ */
.barra-filtros {
background: var(--creme-branco);
border-bottom: 1px solid rgba(141,110,99,0.12);
padding: 14px 0;
position: sticky; top: 70px; z-index: 800;
}
.filtros-wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.filtros-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-btn {
font-family: var(--fonte-corpo); font-size: 0.72rem;
font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
color: var(--texto-claro); background: transparent;
border: 1px solid rgba(141,110,99,0.24);
border-radius: 50px; padding: 7px 18px;
cursor: pointer; transition: all 0.3s;
}
.filtro-btn:hover,
.filtro-btn.ativo { background: var(--argila); border-color: var(--argila); color: #fff; }
.grupo-servico { transition: opacity 0.3s; }
.grupo-servico.oculto { display: none; }
/* ============================================================
* 18. FAIXA CTA + FAIXA COMBINAR
* ============================================================ */
/* CTA verde com botão branco */
.faixa-cta { background: var(--verde); padding: 90px 0; text-align: center; }
.faixa-cta .cta-t {
font-family: var(--fonte-titulo); font-size: clamp(2rem,4vw,3.4rem);
font-weight: 300; font-style: italic; color: #fff; margin-bottom: 14px;
}
.faixa-cta .cta-d { color: rgba(255,255,255,0.78); font-size: 0.97rem; line-height: 1.8; max-width: 460px; margin: 0 auto 38px; }
/* Faixa "pode combinar" (servicos.html) */
.faixa-combinar { background: var(--detalhe); padding: 64px 0; }
.combinar-titulo { font-family: var(--fonte-titulo); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 300; font-style: italic; color: #fff; margin-bottom: 10px; }
.combinar-sub { font-size: 0.92rem; color: rgba(255,255,255,0.62); line-height: 1.8; max-width: 420px; }
/* Pills de combinação de técnicas */
.combo-pill {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
border-radius: 50px; padding: 8px 18px;
font-family: var(--fonte-corpo); font-size: 0.72rem;
font-weight: 500; letter-spacing: 0.08em;
color: rgba(255,255,255,0.80); margin: 4px;
transition: background 0.3s;
}
.combo-pill i { color: var(--argila); font-size: 0.78rem; }
.combo-pill:hover { background: rgba(255,255,255,0.14); color: #fff; }
/* ============================================================
* 19. FORMULÁRIO DE RESERVA
* ============================================================ */
.sec-reserva { padding: 110px 0; background: var(--creme); }
.reserva-img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; border-radius: var(--raio); box-shadow: var(--sombra2); }
.form-box { background: var(--creme-branco); border-radius: var(--raio); padding: 52px 44px; box-shadow: var(--sombra); }
.form-label {
font-family: var(--fonte-corpo); font-size: 0.70rem;
font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--argila); margin-bottom: 7px; display: block;
}
.form-control,
.form-select {
border: 1.5px solid rgba(141,110,99,0.25); border-radius: 8px;
padding: 12px 16px; font-family: var(--fonte-corpo);
font-size: 0.90rem; font-weight: 300;
background: var(--creme); color: var(--texto); width: 100%;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus,
.form-select:focus {
border-color: var(--verde);
box-shadow: 0 0 0 3px rgba(122,155,140,0.15);
background: #fff; outline: none;
}
.form-control::placeholder { color: rgba(141,110,99,0.45); }
.aviso-form { display: flex; align-items: center; gap: 9px; font-size: 0.76rem; color: var(--texto-claro); margin-top: 16px; }
.aviso-form i { color: var(--verde); }
/* ============================================================
* 20. VÍDEOS — Secção de demonstração (index.html)
* ============================================================ */
.sec-videos { padding: 110px 0; background: var(--detalhe); }
.sec-videos .etiqueta { color: var(--argila); }
.sec-videos .sec-titulo { color: #fff; }
.sec-videos .sec-sub { color: rgba(255,255,255,0.55); }
.sec-videos .sec-header { margin-bottom: 56px; }
.video-wrap { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra2); transition: transform 0.35s; }
.video-wrap:hover { transform: scale(1.025); }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center; background: #000; }
.video-legenda { text-align: center; margin-top: 10px; font-family: var(--fonte-titulo); font-style: italic; font-size: 0.95rem; color: rgba(245,239,231,0.55); }
/* ============================================================
* 21. BLOG — Cards de artigos
* ============================================================ */
.sec-blog { padding: 110px 0; background: var(--creme-branco); }
.card-blog {
background: var(--creme); border-radius: var(--raio);
overflow: hidden; box-shadow: var(--sombra);
height: 100%; display: flex; flex-direction: column; border: none;
transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-blog:hover { transform: translateY(-8px); box-shadow: var(--sombra2); }
.blog-img-wrap { overflow: hidden; height: 220px; }
.blog-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao); }
.card-blog:hover .blog-img { transform: scale(1.05); }
.blog-corpo { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
/* Tags de categoria */
.tag-cat { display: inline-block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 50px; padding: 4px 12px; margin-bottom: 14px; align-self: flex-start; }
.tag-bem-estar { background: rgba(122,155,140,0.15); color: var(--verde-escuro); }
.tag-saude { background: rgba(141,110,99,0.12); color: var(--argila-escura); }
.tag-terapias { background: rgba(78,52,46,0.10); color: var(--detalhe); }
.tag-dicas { background: rgba(122,155,140,0.10); color: var(--verde); }
.blog-corpo h3 { font-family: var(--fonte-titulo); font-size: 1.20rem; font-weight: 400; color: var(--detalhe); margin-bottom: 10px; line-height: 1.4; }
.blog-meta { font-size: 0.76rem; color: var(--texto-claro); margin-bottom: 14px; }
.link-blog { margin-top: auto; font-size: 0.70rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s, color 0.3s; }
.link-blog:hover { color: var(--argila); gap: 14px; }
/* ============================================================
* 22. FAIXA PILARES — 3 diferenciais do serviço
* ============================================================ */
.faixa-pilares { background: var(--argila); padding: 72px 0; }
.pilar { text-align: center; padding: 0 20px; }
.pilar i { font-size: 1.6rem; color: rgba(255,255,255,0.90); display: block; margin-bottom: 16px; }
.pilar strong { display: block; font-family: var(--fonte-corpo); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; color: #fff; margin-bottom: 6px; }
.pilar span { font-size: 0.80rem; color: rgba(255,255,255,0.70); }
/* ============================================================
* 23. PREÇOS — Cards com tabela de valores (precos.html)
* ============================================================ */
.sec-precos { padding: 100px 0; background: var(--creme-branco); }
.card-preco {
background: var(--creme); border-radius: var(--raio);
padding: 40px 32px; box-shadow: var(--sombra);
height: 100%; border: 1px solid rgba(141,110,99,0.10);
position: relative;
transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-preco:hover { transform: translateY(-6px); box-shadow: var(--sombra2); }
/* Destaque — "mais procurado" */
.card-preco.destaque { background: var(--detalhe); border-color: transparent; color: #fff; }
.card-preco.destaque h3,
.card-preco.destaque .preco-num,
.card-preco.destaque .etiqueta { color: var(--argila); }
.card-preco.destaque .preco-desc,
.card-preco.destaque .lista-preco li { color: rgba(255,255,255,0.75); }
.badge-popular {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--verde); color: #fff;
font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
padding: 5px 16px; border-radius: 50px; white-space: nowrap;
}
.preco-num { font-family: var(--fonte-titulo); font-size: 3rem; font-weight: 300; color: var(--detalhe); line-height: 1; margin: 12px 0 6px; }
.preco-num sup { font-size: 1.3rem; vertical-align: super; margin-right: 2px; }
.preco-num .preco-dur { font-size: 0.80rem; font-weight: 300; font-style: italic; opacity: 0.65; }
.preco-desc { font-size: 0.87rem; color: var(--texto-claro); margin-bottom: 20px; line-height: 1.7; }
.lista-preco { list-style: none; padding: 0; margin: 0 0 28px; }
.lista-preco li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; padding: 8px 0; border-bottom: 1px solid rgba(141,110,99,0.10); }
.lista-preco li i { color: var(--verde); flex-shrink: 0; }
/* Faixa de aviso de confirmação */
.faixa-aviso { background: var(--verde); color: #fff; text-align: center; padding: 16px 20px; font-family: var(--fonte-corpo); font-size: 0.84rem; font-weight: 500; letter-spacing: 0.06em; }
/* Cabeçalho de secção centrado (reutiliza o padrão de .sec-header) */
.sec-precos-header { text-align: center; margin-bottom: 56px; }
.sec-precos-header .sec-sub { max-width: 560px; margin: 0 auto; }
/* Separador de categoria entre grupos de serviços */
.separador-cat { display: flex; align-items: center; margin: 56px 0 28px; }
.separador-cat:first-of-type { margin-top: 0; }
.separador-cat-label {
display: flex; align-items: center; gap: 10px;
font-family: var(--fonte-corpo); font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--argila);
white-space: nowrap;
}
.separador-cat-label i { font-size: 0.9rem; }
.separador-cat::after {
content: ''; flex: 1; height: 1px; background: rgba(141,110,99,0.20); margin-left: 18px;
}
/* Estrutura interna real do card-preco (img + corpo) */
.card-preco { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-preco-img-wrap { position: relative; height: 200px; overflow: hidden; }
.card-preco-img { width: 100%; height: 100%; object-fit: cover; }
.card-preco-cat {
position: absolute; bottom: 14px; left: 14px;
background: rgba(78,52,46,0.75); color: #fff;
font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 14px; border-radius: 50px;
}
.card-preco-cat.cat-terapeutica { background: rgba(78,52,46,0.80); }
.card-preco-cat.cat-holistica { background: rgba(141,110,99,0.85); }
.card-preco-cat.cat-relaxamento { background: rgba(122,155,140,0.85); }
.card-preco-corpo { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.card-preco-nome { font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 500; color: var(--detalhe); margin-bottom: 10px; }
.card-preco.destaque .card-preco-nome { color: #fff; }
.card-preco-desc { font-size: 0.87rem; color: var(--texto-claro); line-height: 1.7; margin-bottom: 20px; }
.card-preco.destaque .card-preco-desc { color: rgba(255,255,255,0.70); }
/* Opções de duração/preço dentro do card */
.opcoes-preco { list-style: none; padding: 0; margin: 0 0 20px; }
.opcoes-preco li {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid rgba(141,110,99,0.12);
}
.card-preco.destaque .opcoes-preco li { border-bottom-color: rgba(255,255,255,0.12); }
.preco-duracao { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; color: var(--texto); }
.card-preco.destaque .preco-duracao { color: rgba(255,255,255,0.80); }
.card-preco.destaque .preco-valor { color: #fff; }
.card-preco.destaque .preco-valor .euro { opacity: 0.85; }
.preco-duracao i { color: var(--argila); }
.preco-euro { font-size: 0.75rem; font-weight: 500; vertical-align: super; opacity: 0.65; margin-right: 1px; }
/* Lista de benefícios do card */
.card-preco-beneficios { list-style: none; padding: 0; margin: 0 0 24px; }
.card-preco-beneficios li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.84rem; color: var(--texto); padding: 5px 0; }
.card-preco.destaque .card-preco-beneficios li { color: rgba(255,255,255,0.75); }
.card-preco-beneficios li i { color: var(--verde); margin-top: 3px; flex-shrink: 0; font-size: 0.78rem; }
.btn-reservar-card {
display: block; text-align: center; margin-top: auto;
background: var(--detalhe); color: #fff; border-radius: 50px;
padding: 13px 20px; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
transition: background 0.3s, transform 0.2s;
}
.btn-reservar-card:hover { background: var(--argila); color: #fff; transform: translateY(-2px); }
.card-preco.destaque .btn-reservar-card { background: var(--argila); }
.card-preco.destaque .btn-reservar-card:hover { background: var(--verde); }
/* ── Secção da tabela resumo ── */
.sec-tabela { padding: 90px 0; background: var(--creme-branco); }
/* ── Tabela resumo de preços ── */
.tabela-precos { width: 100%; border-collapse: collapse; font-size: 0.90rem; }
.tabela-precos thead th {
text-align: left; padding: 14px 18px; background: var(--detalhe); color: #fff;
font-size: 0.72rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
}
.tabela-precos thead th:first-child { border-radius: var(--raio) 0 0 0; }
.tabela-precos thead th:last-child { border-radius: 0 var(--raio) 0 0; }
.tabela-precos tbody td { padding: 16px 18px; border-bottom: 1px solid rgba(141,110,99,0.12); color: var(--texto); vertical-align: middle; }
.tabela-precos tbody tr:hover { background: rgba(141,110,99,0.05); }
.tabela-precos tbody tr:last-child td { border-bottom: none; }
.badge-cat-tabela {
display: inline-block; margin-left: 10px; font-size: 0.60rem; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 50px;
vertical-align: middle;
}
.badge-cat-tabela.t { background: rgba(141,110,99,0.15); color: var(--argila-escura); }
.badge-cat-tabela.r { background: rgba(122,155,140,0.15); color: var(--verde-escuro); }
.badge-cat-tabela.h { background: rgba(78,52,46,0.10); color: var(--detalhe); }
.badge-cat-tabela.e { background: rgba(194,155,131,0.20); color: var(--argila-escura); }
.dur-tabela { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--texto-claro); }
.dur-tabela i { color: var(--argila); }
/* ── Pacotes de sessões ── */
.sec-pacotes { padding: 100px 0; background: var(--creme); }
.card-pacote {
background: var(--creme-branco); border-radius: var(--raio);
box-shadow: var(--sombra); overflow: hidden;
border: 1px solid rgba(141,110,99,0.10);
transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-pacote:hover { transform: translateY(-4px); box-shadow: var(--sombra2); }
.pacote-header {
background: var(--verde); color: #fff; padding: 32px 36px;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.pacote-header.header-argila { background: var(--argila); }
.pacote-header.header-verde { background: var(--detalhe); }
.pacote-titulo { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 400; color: #fff; margin: 0; }
.pacote-preco-wrap { text-align: right; }
.pacote-antes { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.65); text-decoration: line-through; margin-bottom: 2px; }
.pacote-preco { font-family: var(--fonte-titulo); font-size: 2.6rem; font-weight: 300; color: #fff; line-height: 1; }
.pacote-euro { font-size: 1.1rem; font-weight: 400; vertical-align: super; opacity: 0.75; margin-right: 2px; }
.pacote-economia { display: block; font-size: 0.76rem; font-weight: 500; color: #fff; background: rgba(255,255,255,0.18); padding: 3px 10px; border-radius: 50px; margin-top: 6px; }
.pacote-corpo { padding: 32px 36px; display: flex; flex-wrap: wrap; gap: 32px; }
.pacote-desc { flex: 1; min-width: 260px; }
.pacote-desc p { font-size: 0.92rem; color: var(--texto-claro); line-height: 1.75; margin-bottom: 16px; }
.pacote-sessoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sessao-tag {
display: inline-flex; align-items: center; background: rgba(141,110,99,0.12); color: var(--argila-escura);
font-size: 0.74rem; font-weight: 500; padding: 5px 12px; border-radius: 50px; white-space: nowrap;
}
.pacote-lista { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 260px; }
.pacote-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--texto); padding: 7px 0; }
.pacote-lista li i { color: var(--verde); margin-top: 3px; flex-shrink: 0; }
.pacote-rodape { padding: 0 36px 32px; }
.btn-reservar-pacote {
display: inline-block; background: var(--verde); color: #fff; border-radius: 50px;
padding: 14px 32px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
transition: background 0.3s, transform 0.2s;
}
.btn-reservar-pacote:hover { background: var(--verde-escuro); color: #fff; transform: translateY(-2px); }
.btn-reservar-pacote.argila { background: var(--argila); }
.btn-reservar-pacote.argila:hover { background: var(--argila-escura); }
.btn-reservar-pacote.verde { background: var(--detalhe); }
.btn-reservar-pacote.verde:hover { background: var(--argila); }
/* ── Secção de perguntas frequentes ── */
.sec-faq { padding: 100px 0 110px; background: var(--creme); }
.sec-faq .accordion-button { font-family: var(--fonte-corpo); font-size: 0.94rem; font-weight: 500; color: var(--detalhe); }
.sec-faq .accordion-button:not(.collapsed) { background: rgba(141,110,99,0.08); color: var(--argila-escura); box-shadow: none; }
.sec-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(122,155,140,0.15); }
.sec-faq .accordion-body { font-size: 0.90rem; color: var(--texto); line-height: 1.75; }
.sec-faq .accordion-item { border-color: rgba(141,110,99,0.15); margin-bottom: 10px; border-radius: var(--raio) !important; overflow: hidden; }
@media (max-width: 767px) {
.pacote-header { padding: 24px; flex-direction: column; align-items: flex-start; }
.pacote-preco-wrap { text-align: left; }
.pacote-corpo { padding: 24px; }
.pacote-rodape { padding: 0 24px 24px; }
.tabela-precos { font-size: 0.82rem; }
.tabela-precos thead th, .tabela-precos tbody td { padding: 10px 12px; }
}
/* ============================================================
* 24. NOSSO ESPAÇO — Seletor Feira/Esmoriz + Carrossel
* Lógica do toggle em main.js — initSeletorEspaco()
* ============================================================ */
.sec-espaco { padding: 90px 0; background: var(--creme); }
/* Toggle Feira / Esmoriz */
.seletor-espacos { display: flex; gap: 0; background: rgba(141,110,99,0.10); border: 1px solid rgba(141,110,99,0.20); border-radius: 6px; padding: 4px; max-width: 420px; margin: 0 auto 3rem; }
.seletor-btn { flex: 1; padding: 0.65rem 1rem; background: transparent; border: none; font-family: var(--fonte-corpo); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--argila); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s ease; }
.seletor-btn.ativo { background: var(--argila); color: #fff; }
.seletor-btn:not(.ativo):hover { background: rgba(141,110,99,0.08); color: var(--argila-escura); }
.painel-espaco { display: none; }
.painel-espaco.ativo { display: block; }
/* Hero do espaço */
.hero-espaco { padding: 5rem 0; }
.hero-espaco .ornamento { font-family: var(--fonte-titulo); font-size: 0.75rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--argila); margin-bottom: 1rem; display: block; }
.hero-espaco h2 { font-family: var(--fonte-titulo); font-size: clamp(2rem,4vw,3rem); font-weight: 300; font-style: italic; line-height: 1.2; margin-bottom: 1rem; color: var(--detalhe); }
.hero-espaco h2 span { color: var(--argila); }
.hero-espaco p.lead { font-size: 0.97rem; color: var(--texto-claro); line-height: 1.85; max-width: 480px; }
.hero-espaco .morada-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--verde-escuro); border: 1px solid rgba(122,155,140,0.30); border-radius: 50px; padding: 0.35rem 1rem; margin-bottom: 1.5rem; }
.hero-espaco img { width: 100%; height: 400px; object-fit: cover; border-radius: 2px; position: relative; z-index: 1; }
.hero-img-frame { position: absolute; top: 1rem; right: -0.6rem; bottom: -0.6rem; left: 1rem; border: 1px solid var(--argila); border-radius: 2px; pointer-events: none; z-index: 0; opacity: 0.30; }
/* Carrossel */
.carousel-espaco .carousel-item img { width: 100%; height: 480px; object-fit: cover; }
.carousel-espaco .carousel-caption { background: rgba(78,52,46,0.70); backdrop-filter: blur(5px); padding: 2rem; bottom: 2rem; text-align: left; left: 5%; right: auto; max-width: 400px; border-radius: 4px; }
.carousel-espaco .carousel-caption .cap-orn { color: var(--creme); font-size: 0.68rem; letter-spacing: 0.20em; text-transform: uppercase; opacity: 0.70; display: block; margin-bottom: 8px; }
/* Cards de características do espaço */
.secao-caracteristicas { padding: 5rem 0; background: var(--creme-branco); }
.card-caracter { background: var(--creme); border-radius: var(--raio); padding: 28px 24px; box-shadow: var(--sombra); height: 100%; border-top: 3px solid var(--verde); transition: transform var(--transicao); }
.card-caracter:hover { transform: translateY(-4px); }
.card-caracter h3 { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 500; color: var(--detalhe); margin: 14px 0 8px; }
.card-caracter p { font-size: 0.86rem; color: var(--texto-claro); line-height: 1.7; margin: 0; }
.ic-wrap {
width: 48px; height: 48px; border-radius: 50%;
background: rgba(122,155,140,0.15); color: var(--verde-escuro);
display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.secao-breadcrumb { padding: 18px 0; background: var(--creme-branco); border-bottom: 1px solid rgba(141,110,99,0.10); }
.secao-breadcrumb .breadcrumb-item a { color: var(--texto-claro); }
.secao-breadcrumb .breadcrumb-item.active { color: var(--argila); }
.titulo-pagina { color: var(--detalhe); }
.linha-ouro-centro { background: var(--argila); opacity: 0.55; }
.hero-img-wrap { border-radius: 2px; }
.btn-reservar-espaco {
display: inline-block; background: var(--detalhe); color: #fff; border-radius: 50px;
padding: 13px 32px; font-family: var(--fonte-corpo); font-size: 0.76rem; font-weight: 500;
letter-spacing: 0.10em; text-transform: uppercase; transition: background 0.3s, transform 0.2s;
}
.btn-reservar-espaco:hover { background: var(--argila); color: #fff; transform: translateY(-2px); }
/* ============================================================
* 25. SOBRE MIM — Foto, Credenciais, Testemunhos
* ============================================================ */
/* Foto de perfil */
.foto-perfil { border-radius: var(--raio); box-shadow: var(--sombra2); max-height: 540px; object-fit: cover; width: 100%; }
/* Card de certificação */
.card-credencial { background: var(--creme-branco); border-radius: var(--raio); padding: 28px 24px; box-shadow: var(--sombra); border: 1px solid rgba(141,110,99,0.10); height: 100%; display: flex; align-items: flex-start; gap: 16px; transition: transform var(--transicao), box-shadow var(--transicao); }
.card-credencial:hover { transform: translateY(-4px); box-shadow: var(--sombra2); }
.card-credencial > i { font-size: 1.4rem; color: var(--verde); flex-shrink: 0; margin-top: 2px; }
.card-credencial h3 { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 400; color: var(--detalhe); margin-bottom: 4px; }
.card-credencial p { font-size: 0.82rem; color: var(--texto-claro); margin: 0; }
/* Card de testemunho */
.card-testemunho { background: var(--creme-branco); border-radius: var(--raio); padding: 32px 28px; box-shadow: var(--sombra); border: 1px solid rgba(141,110,99,0.10); height: 100%; display: flex; flex-direction: column; }
.card-testemunho .estrelas { color: #f4a828; margin-bottom: 16px; }
.card-testemunho .texto-testemunho { font-family: var(--fonte-titulo); font-size: 1.05rem; font-style: italic; color: var(--texto); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(141,110,99,0.12); color: var(--argila); font-weight: 600; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-corpo); font-size: 0.78rem; flex-shrink: 0; }
.testemunho-nome { font-size: 0.88rem; font-weight: 500; color: var(--detalhe); margin-bottom: 2px; }
.testemunho-local { font-size: 0.76rem; color: var(--texto-claro); }
/* ============================================================
* 26. CONTACTOS — Cartões de contacto clicáveis
* ============================================================ */
.card-contacto { display: flex; align-items: center; gap: 18px; background: var(--creme-branco); border-radius: var(--raio); padding: 22px 24px; box-shadow: var(--sombra); border: 1px solid rgba(141,110,99,0.10); transition: transform 0.3s, box-shadow 0.3s; text-decoration: none; color: inherit; }
.card-contacto:hover { transform: translateY(-3px); box-shadow: var(--sombra2); color: inherit; }
.card-contacto-icone { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem; color: #fff; }
.card-contacto-label { font-family: var(--fonte-corpo); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-claro); margin-bottom: 4px; display: block; }
.card-contacto-valor { font-family: var(--fonte-titulo); font-size: 1.2rem; color: var(--detalhe); }
/* ============================================================
* 27. RODAPÉ — 4 colunas + copyright + links legais RGPD
* ============================================================ */
footer { background: var(--detalhe); padding: 80px 0 44px; border-top: 1px solid rgba(255,255,255,0.06); font-family: var(--fonte-corpo); }
.footer-logo { height: 56px; width: auto; margin-bottom: 22px; filter: brightness(0) invert(1); opacity: 0.88; }
.footer-desc { font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.85; max-width: 290px; margin-bottom: 28px; }
.social-wrap { display: flex; gap: 10px; }
.social-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.60); font-size: 0.85rem; transition: all 0.3s; }
.social-btn:hover { background: var(--argila); border-color: var(--argila); color: #fff; transform: translateY(-2px); }
.footer-col-title { font-family: var(--fonte-corpo); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--argila); margin-bottom: 20px; }
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { font-size: 0.88rem; color: rgba(255,255,255,0.55); transition: color 0.3s; }
.footer-nav a:hover { color: #fff; }
.footer-info { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.footer-info i { color: var(--argila); margin-top: 3px; flex-shrink: 0; }
.footer-info a { color: rgba(255,255,255,0.55); transition: color 0.3s; }
.footer-info a:hover { color: #fff; }
footer hr { border-color: rgba(255,255,255,0.08); margin: 50px 0 26px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 0.74rem; color: rgba(255,255,255,0.35); }
.footer-legais { display: flex; gap: 20px; }
.footer-legais a { font-size: 0.74rem; color: rgba(255,255,255,0.35); transition: color 0.3s; }
.footer-legais a:hover { color: var(--argila); }
/* ============================================================
* 28. BOTÃO WHATSAPP FLUTUANTE
* ============================================================ */
.btn-wa { position: fixed; bottom: 28px; left: 28px; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.45rem; box-shadow: 0 8px 24px rgba(37,211,102,0.38); z-index: 950; transition: transform 0.3s, box-shadow 0.3s, bottom 0.35s ease; }
.btn-wa:hover { transform: scale(1.12); box-shadow: 0 12px 32px rgba(37,211,102,0.50); color: #fff; }
/* Enquanto o banner de cookies (z-index 9999) está visível, o botão de WhatsApp
sobe para não ficar tapado e sem poder ser clicado */
body.cookie-banner-visivel .btn-wa { bottom: 130px; }
@media (max-width: 767px) {
body.cookie-banner-visivel .btn-wa { bottom: 190px; }
}
/* Botão voltar ao topo — lado oposto ao WhatsApp */
.btn-topo {
position: fixed; bottom: 28px; right: 28px;
width: 44px; height: 44px; border: none; border-radius: 50%;
background: var(--detalhe); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; box-shadow: 0 8px 24px rgba(78,52,46,0.30);
cursor: pointer; z-index: 949;
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, bottom 0.35s ease, background 0.3s;
}
.btn-topo.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-topo:hover { background: var(--argila); }
body.cookie-banner-visivel .btn-topo { bottom: 130px; }
@media (max-width: 767px) {
.btn-topo { width: 40px; height: 40px; font-size: 1.05rem; }
body.cookie-banner-visivel .btn-topo { bottom: 190px; }
}
/* ============================================================
* 29. COOKIE BANNER RGPD
* Lógica de consentimento em main.js — initCookieBanner()
* ============================================================ */
#cookie-banner {
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--detalhe); border-top: 2px solid var(--argila);
padding: 22px 32px; z-index: 9999;
display: none; /* JS define display:flex se sem consentimento */
align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
box-shadow: 0 -8px 32px rgba(0,0,0,0.20);
transition: transform 0.4s ease;
}
#cookie-banner.oculto { transform: translateY(110%); }
.cookie-texto { font-size: 0.85rem; color: rgba(255,255,255,0.75); line-height: 1.7; flex: 1; min-width: 280px; }
.cookie-texto strong { color: #fff; }
.cookie-texto a { color: var(--argila); text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s; }
.cookie-texto a:hover { color: #fff; }
.cookie-acoes { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.btn-cookie-aceitar { background: var(--argila); color: #fff; border: none; border-radius: 50px; padding: 11px 28px; font-family: var(--fonte-corpo); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.3s; }
.btn-cookie-aceitar:hover { background: var(--verde); }
.btn-cookie-rejeitar { background: transparent; color: rgba(255,255,255,0.50); border: 1px solid rgba(255,255,255,0.20); border-radius: 50px; padding: 10px 22px; font-family: var(--fonte-corpo); font-size: 0.75rem; cursor: pointer; white-space: nowrap; transition: all 0.3s; }
.btn-cookie-rejeitar:hover { border-color: rgba(255,255,255,0.50); color: rgba(255,255,255,0.80); }
/* ============================================================
* 30. ANIMAÇÕES FADE-IN — Ativadas por IntersectionObserver
* Ver main.js — initFadeIn()
* ============================================================ */
.fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.fade-in.visivel { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }
.delay-6 { transition-delay: 0.60s; }
/* Respeita preferência do utilizador por menos movimento */
@media (prefers-reduced-motion: reduce) {
.fade-in, .fade-in.visivel { opacity: 1; transform: none; transition: none; }
.hero-slide { animation: none; opacity: 1; }
.hero-slide:not(:first-child) { display: none; }
}
/* ============================================================
* 31. BOOTSTRAP OVERRIDES
* Sobrepõe o azul #0d6efd do Bootstrap em TODOS os
* componentes: botões, links, paginação, badges.
* ============================================================ */
/* Botão primário — substitui azul Bootstrap por marrom */
.btn-primary {
background-color: var(--detalhe);
border-color: var(--detalhe);
color: var(--creme-branco);
border-radius: var(--raio-btn);
font-family: var(--fonte-corpo);
font-weight: 500;
letter-spacing: 0.08em;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
background-color: var(--argila) !important;
border-color: var(--argila) !important;
color: #fff !important;
}
/* Botão outline-primary — substitui azul Bootstrap */
.btn-outline-primary {
color: var(--detalhe);
border-color: var(--detalhe);
border-radius: var(--raio-btn);
font-family: var(--fonte-corpo);
font-weight: 500;
letter-spacing: 0.08em;
font-size: 0.78rem;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
background-color: var(--detalhe) !important;
border-color: var(--detalhe) !important;
color: #fff !important;
}
/* btn-sm dentro do blog */
.btn-sm {
padding: 8px 20px;
font-size: 0.72rem;
}
/* Links de paginação — remove azul */
.pagination .page-link {
color: var(--detalhe);
border-color: rgba(78,52,46,0.20);
font-family: var(--fonte-corpo);
font-size: 0.82rem;
}
.pagination .page-link:hover {
color: var(--argila);
background-color: var(--creme);
border-color: var(--argila);
}
.pagination .page-item.active .page-link {
background-color: var(--detalhe) !important;
border-color: var(--detalhe) !important;
color: #fff !important;
}
/* Focus ring — substitui azul Bootstrap */
.btn:focus-visible,
.btn:focus {
box-shadow: 0 0 0 3px rgba(141,110,99,0.30) !important;
outline: none;
}
/* Badge Bootstrap */
.badge.bg-primary { background-color: var(--argila) !important; }
.badge.bg-secondary { background-color: var(--detalhe) !important; }
/* bg-light e bg-white */
.bg-light { background-color: var(--creme) !important; }
/* ============================================================
* 32. RESPONSIVO — Breakpoints principais
* ============================================================ */
/* Tablet — ≤ 991px */
@media (max-width: 991.98px) {
.sobre-corpo { padding-left: 0; padding-top: 64px; }
.sobre-badge { right: 0; bottom: -18px; }
.barra-filtros { top: 60px; }
.card-sv-destaque-corpo { padding: 24px 26px; }
.card-sv-destaque-rodape { padding: 20px 26px; }
}
/* Mobile — ≤ 767px */
@media (max-width: 767.98px) {
.navbar-brand img { height: 40px; }
.nav-link::after { display: none; }
.hero { height: 88vh; }
.hero-conteudo { padding-bottom: 52px; }
.hero h1 { font-size: 2.5rem; }
.hero-interior { height: 300px; }
.sec-sobre, .sec-servicos, .sec-servicos-home,
.sec-reserva, .sec-videos, .sec-blog,
.sec-espaco, .sec-precos { padding: 68px 0; }
.faixa-cta, .faixa-combinar, .faixa-pilares { padding: 60px 0; }
.sobre-img { height: 360px; }
.card-s { height: 300px; }
.form-box { padding: 32px 22px; }
.sep-v { display: none; }
.barra-filtros { display: none; }
.card-sv-destaque-corpo .card-sv-titulo { font-size: 1.45rem; }
.footer-bottom { flex-direction: column; text-align: center; }
.footer-legais { justify-content: center; }
#cookie-banner { padding: 18px 20px; }
}
/* ============================================================
* 33. BLOG — Estilos específicos da página blog.html
* Hero, etiquetas de categoria, cards, sidebar,
* badges científicos, botão "Ler artigo" e newsletter.
* ============================================================ */
/* ── Hero do Blog ── */
.hero-blog {
background: var(--detalhe);
padding: 70px 0 50px;
text-align: center;
}
.hero-blog h1 {
font-family: var(--fonte-titulo);
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 300;
font-style: italic;
color: #fff;
margin-bottom: 12px;
}
.hero-blog .descricao {
font-size: 0.95rem;
color: rgba(255,255,255,0.65);
line-height: 1.8;
max-width: 560px;
margin: 0 auto 24px;
}
/* Barra de pesquisa no hero */
.hero-blog .form-control {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
color: #fff;
border-radius: var(--raio-btn) 0 0 var(--raio-btn);
padding: 12px 20px;
}
.hero-blog .form-control::placeholder { color: rgba(255,255,255,0.45); }
.hero-blog .form-control:focus {
background: rgba(255,255,255,0.18);
border-color: var(--argila);
box-shadow: none;
color: #fff;
}
.hero-blog .btn-p {
border-radius: 0 var(--raio-btn) var(--raio-btn) 0;
padding: 12px 20px;
}
/* ── Separador com contador de artigos ── */
.separador-contador {
display: flex;
align-items: center;
gap: 14px;
margin: 32px 0 28px;
}
.separador-contador hr {
flex: 1;
border-color: rgba(141,110,99,0.18);
margin: 0;
}
.separador-contador span {
font-family: var(--fonte-corpo);
font-size: 0.70rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--texto-claro);
white-space: nowrap;
}
/* ── Etiquetas de categoria (sobre os cards) ── */
.etiqueta-categoria {
display: inline-block;
font-family: var(--fonte-corpo);
font-size: 0.60rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 50px;
color: #fff;
}
.etiqueta-bem-estar { background: var(--verde); }
.etiqueta-saude { background: #3D6B4F; }
.etiqueta-terapias { background: var(--argila); }
.etiqueta-dicas { background: var(--detalhe); }
.etiqueta-destaque { background: #f4a828; color: #fff; }
/* ── Card artigo em destaque (horizontal) ── */
.artigo-destaque {
border: none;
border-left: 4px solid var(--argila);
box-shadow: var(--sombra);
border-radius: var(--raio);
overflow: hidden;
}
.artigo-destaque .img-destaque {
height: 100%;
min-height: 220px;
object-fit: cover;
}
.artigo-destaque h2 {
font-family: var(--fonte-titulo);
font-size: 1.3rem;
font-weight: 400;
color: var(--detalhe);
line-height: 1.3;
}
.artigo-destaque .text-muted { color: var(--texto-claro) !important; }
/* ── Cards de artigos normais ── */
.artigo-card .card {
border: none;
border-radius: var(--raio);
box-shadow: var(--sombra);
transition: transform var(--transicao), box-shadow var(--transicao);
overflow: hidden;
}
.artigo-card .card:hover {
transform: translateY(-5px);
box-shadow: var(--sombra2);
}
.artigo-card .card-title {
font-family: var(--fonte-titulo);
font-size: 1.05rem;
font-weight: 400;
color: var(--detalhe);
line-height: 1.35;
}
.artigo-card .card-text { color: var(--texto-claro); font-size: 0.88rem; }
.artigo-card .text-muted { color: var(--texto-claro) !important; font-size: 0.76rem; }
/* ── Botão "Ler artigo" (substitui btn-outline-primary) ── */
.btn-ler-artigo {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
color: var(--detalhe);
border: 1.5px solid rgba(78,52,46,0.30);
border-radius: var(--raio-btn);
padding: 9px 22px;
font-family: var(--fonte-corpo);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.btn-ler-artigo:hover {
background: var(--detalhe);
border-color: var(--detalhe);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
/* ── Badges científicos (substituem text-primary) ── */
.badge-ciencia {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(141,110,99,0.08);
color: var(--argila);
border: 1px solid rgba(141,110,99,0.22);
border-radius: 50px;
padding: 3px 10px;
font-family: var(--fonte-corpo);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.08em;
text-decoration: none;
transition: background 0.25s, color 0.25s;
white-space: nowrap;
}
.badge-ciencia:hover {
background: var(--argila);
color: #fff;
text-decoration: none;
}
/* ── Widgets da Sidebar ── */
.widget-titulo {
font-family: var(--fonte-corpo);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--argila);
padding: 16px 20px;
border-bottom: 1px solid rgba(141,110,99,0.12);
}
/* Foto da autora na sidebar */
.foto-autora-sidebar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--argila);
display: block;
margin: 0 auto;
}
/* Item "mais lido" na sidebar */
.item-mais-lido {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(141,110,99,0.08);
text-decoration: none;
color: var(--texto);
transition: background 0.25s;
}
.item-mais-lido:hover {
background: rgba(141,110,99,0.05);
color: var(--detalhe);
text-decoration: none;
}
.item-mais-lido img {
width: 52px;
height: 52px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.item-mais-lido:last-child { border-bottom: none; }
/* Linhas de categoria na sidebar */
.linha-categoria {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(141,110,99,0.08);
font-size: 0.88rem;
color: var(--texto);
text-decoration: none;
transition: color 0.25s;
}
.linha-categoria:hover { color: var(--argila); text-decoration: none; }
.linha-categoria:last-child { border-bottom: none; }
/* Widget Newsletter */
.widget-newsletter {
background: var(--detalhe);
border-radius: var(--raio);
padding: 28px 24px;
color: #fff;
}
.widget-newsletter .form-control {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
color: #fff;
border-radius: 8px;
padding: 10px 14px;
font-family: var(--fonte-corpo);
}
.widget-newsletter .form-control::placeholder { color: rgba(255,255,255,0.45); }
.widget-newsletter .form-control:focus {
background: rgba(255,255,255,0.18);
border-color: var(--argila);
box-shadow: none;
color: #fff;
outline: none;
}
.btn-subscrever {
width: 100%;
background: var(--argila);
color: #fff;
border: none;
border-radius: 8px;
padding: 11px;
font-family: var(--fonte-corpo);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s;
}
.btn-subscrever:hover { background: var(--verde); }
/* Widget CTA Reserva */
.widget-reserva {
background: var(--creme-branco);
border-radius: var(--raio);
padding: 28px 24px;
text-align: center;
box-shadow: var(--sombra);
border: 1px solid rgba(141,110,99,0.10);
}
/* Mensagem "sem resultados" */
#sem-resultados {
color: var(--texto-claro);
}
#sem-resultados i { color: var(--argila); }
/* ============================================================
* 22. ARTIGO DE BLOG — PÁGINA INDIVIDUAL
* ============================================================ */
/* Breadcrumb */
.artigo-breadcrumb {
padding: 22px 0;
font-size: 0.8rem;
color: var(--texto-claro);
}
.artigo-breadcrumb a { color: var(--texto-claro); transition: color 0.3s; }
.artigo-breadcrumb a:hover { color: var(--argila); }
.artigo-breadcrumb .separador { margin: 0 6px; opacity: 0.5; }
.artigo-breadcrumb .atual { color: var(--detalhe); }
/* Cabeçalho do artigo */
.artigo-header { padding: 10px 0 40px; max-width: 780px; margin: 0 auto; }
.artigo-header .etiqueta-categoria { margin-bottom: 16px; }
.artigo-header h1 {
font-family: var(--fonte-titulo);
font-size: clamp(2rem, 4vw, 2.9rem);
font-weight: 400;
font-style: italic;
color: var(--detalhe);
line-height: 1.2;
margin-bottom: 18px;
}
.artigo-header .artigo-resumo {
font-size: 1.05rem;
color: var(--texto-claro);
line-height: 1.75;
margin-bottom: 22px;
}
.artigo-meta-linha {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
font-size: 0.82rem;
color: var(--texto-claro);
padding-top: 18px;
border-top: 1px solid rgba(141,110,99,0.15);
}
.artigo-meta-linha .autor-mini {
display: flex; align-items: center; gap: 10px;
}
.artigo-meta-linha .autor-mini img {
width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
/* Imagem de destaque */
.artigo-img-destaque {
width: 100%;
max-height: 460px;
object-fit: cover;
border-radius: var(--raio);
box-shadow: var(--sombra2);
margin-bottom: 48px;
}
/* Gráficos/infográficos — mostrar a imagem inteira, nunca cortada,
já que texto e números nas margens ficam ilegíveis com "cover" */
.artigo-img-destaque.grafico {
object-fit: contain;
background: var(--creme-branco);
padding: 20px;
max-height: 560px;
}
/* Corpo do texto */
.artigo-corpo { max-width: 720px; margin: 0 auto; }
.artigo-corpo h2 {
font-family: var(--fonte-titulo);
font-size: 1.7rem;
font-weight: 400;
color: var(--detalhe);
margin: 44px 0 18px;
}
.artigo-corpo h3 {
font-family: var(--fonte-titulo);
font-size: 1.3rem;
font-weight: 500;
color: var(--detalhe);
margin: 32px 0 14px;
}
.artigo-corpo p {
font-size: 1rem;
line-height: 1.85;
color: var(--texto);
margin-bottom: 20px;
}
.artigo-corpo ul, .artigo-corpo ol {
margin: 0 0 24px;
padding-left: 22px;
}
.artigo-corpo li {
font-size: 1rem;
line-height: 1.8;
color: var(--texto);
margin-bottom: 10px;
}
.artigo-corpo strong { color: var(--detalhe); font-weight: 500; }
/* Citação em destaque */
.artigo-citacao {
border-left: 3px solid var(--argila);
background: var(--creme-branco);
border-radius: 0 var(--raio) var(--raio) 0;
padding: 24px 30px;
margin: 32px 0;
font-family: var(--fonte-titulo);
font-size: 1.25rem;
font-style: italic;
color: var(--detalhe);
line-height: 1.6;
}
/* Caixa de aviso / contexto científico honesto */
.artigo-nota-cientifica {
background: rgba(122,155,140,0.10);
border: 1px solid rgba(122,155,140,0.25);
border-radius: var(--raio);
padding: 22px 26px;
margin: 32px 0;
}
.artigo-nota-cientifica .nota-titulo {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--verde-escuro);
margin-bottom: 10px;
}
.artigo-nota-cientifica p {
font-size: 0.92rem;
color: var(--texto);
margin-bottom: 0;
line-height: 1.75;
}
/* Fontes / referências */
.artigo-fontes {
margin-top: 44px;
padding-top: 28px;
border-top: 1px solid rgba(141,110,99,0.15);
}
.artigo-fontes .fontes-titulo {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--argila);
margin-bottom: 14px;
}
.artigo-fontes ul { list-style: none; padding: 0; margin: 0; }
.artigo-fontes li { margin-bottom: 8px; font-size: 0.86rem; }
.artigo-fontes a {
color: var(--texto-claro);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.3s;
}
.artigo-fontes a:hover { color: var(--argila); }
/* CTA de reserva dentro do artigo */
.artigo-cta {
background: var(--detalhe);
border-radius: var(--raio);
padding: 40px 36px;
text-align: center;
margin: 48px 0;
}
.artigo-cta h3 {
font-family: var(--fonte-titulo);
color: #fff;
font-size: 1.5rem;
font-weight: 400;
font-style: italic;
margin-bottom: 10px;
}
.artigo-cta p {
color: rgba(255,255,255,0.65);
font-size: 0.92rem;
margin-bottom: 22px;
}
/* Autor — bio final */
.artigo-autor-card {
display: flex;
gap: 18px;
align-items: center;
background: var(--creme-branco);
border-radius: var(--raio);
padding: 24px;
margin: 44px 0;
box-shadow: var(--sombra);
}
.artigo-autor-card img {
width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.artigo-autor-card h4 {
font-family: var(--fonte-titulo);
font-size: 1.1rem;
color: var(--detalhe);
margin-bottom: 4px;
}
.artigo-autor-card p {
font-size: 0.85rem;
color: var(--texto-claro);
margin: 0;
line-height: 1.6;
}
/* Artigos relacionados */
.artigo-relacionados { max-width: 960px; margin: 0 auto; padding: 40px 0 20px; }
.artigo-relacionados h3 {
font-family: var(--fonte-titulo);
font-size: 1.5rem;
color: var(--detalhe);
text-align: center;
margin-bottom: 32px;
}
@media (max-width: 767px) {
.artigo-header { padding: 0 4px 32px; }
.artigo-corpo { padding: 0 4px; }
.artigo-cta { padding: 32px 22px; }
.artigo-autor-card { flex-direction: column; text-align: center; }
}
/* ============================================================
* 30. RETOQUES TIPOGRÁFICOS — index.html
* ============================================================ */
.hero-subtitulo-elegante,
.sec-titulo-elegante,
.cta-elegante {
font-style: normal;
color: var(--argila);
}
/* ============================================================
* 31. FILTROS DE CATEGORIA — blog.html
* Cor de destaque por categoria quando o botão está ativo
* ============================================================ */
.filtro-btn-todos.ativo { background: var(--argila); border-color: var(--argila); }
.filtro-btn-bem-estar.ativo { background: var(--verde); border-color: var(--verde); }
.filtro-btn-saude.ativo { background: #3D6B4F; border-color: #3D6B4F; }
.filtro-btn-terapias.ativo { background: var(--argila); border-color: var(--argila); }
.filtro-btn-dicas.ativo { background: var(--detalhe); border-color: var(--detalhe); }
/* ============================================================
* 32. PADRÃO PARTILHADO — sobre-mim.html, contactos.html, reservas.html
* ============================================================ */
.titulo-secao {
font-family: var(--fonte-titulo); font-weight: 400; font-style: italic;
font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--detalhe); margin-bottom: 10px;
}
.subtitulo-secao { font-size: 0.95rem; color: var(--texto-claro); margin-bottom: 32px; }
.caixa-formulario {
background: var(--creme-branco); border-radius: var(--raio);
padding: 32px 30px; box-shadow: var(--sombra); border: 1px solid rgba(141,110,99,0.10);
}
.etiqueta-duracao {
display: inline-block; background: rgba(141,110,99,0.12); color: var(--argila-escura);
font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 16px; border-radius: 50px;
}
.bloco-credencial { display: flex; align-items: flex-start; gap: 14px; }
.bloco-credencial i { font-size: 1.4rem; color: var(--verde); margin-top: 2px; flex-shrink: 0; transition: transform 0.35s ease, color 0.35s ease; }
/* Animação nos cards de credenciais/certificações (Sobre Mim) */
.card:has(.bloco-credencial) {
transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
cursor: default;
}
.card:has(.bloco-credencial):hover {
transform: translateY(-6px);
box-shadow: var(--sombra2);
border-color: rgba(122,155,140,0.35);
}
.card:has(.bloco-credencial):hover .bloco-credencial i {
transform: scale(1.15) rotate(-6deg);
color: var(--verde-escuro);
}
/* Animação nos cards de testemunhos de clientes (Sobre Mim) */
.card:has(.bi-star-fill) {
transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
cursor: default;
}
.card:has(.bi-star-fill):hover {
transform: translateY(-6px);
box-shadow: var(--sombra2);
border-color: rgba(212,175,55,0.35);
}
.card:has(.bi-star-fill) .bi-star-fill {
transition: transform 0.3s ease;
display: inline-block;
}
.card:has(.bi-star-fill):hover .bi-star-fill {
transform: scale(1.2);
}
.card:has(.bi-star-fill):hover .bi-star-fill:nth-of-type(1) { transition-delay: 0s; }
.card:has(.bi-star-fill):hover .bi-star-fill:nth-of-type(2) { transition-delay: 0.05s; }
.card:has(.bi-star-fill):hover .bi-star-fill:nth-of-type(3) { transition-delay: 0.10s; }
.card:has(.bi-star-fill):hover .bi-star-fill:nth-of-type(4) { transition-delay: 0.15s; }
.card:has(.bi-star-fill):hover .bi-star-fill:nth-of-type(5) { transition-delay: 0.20s; }
/* ============================================================
* 33. SELETOR DE IDIOMA — PT / ES / EN (todas as páginas)
* ============================================================ */
.seletor-idioma-toggle {
display: flex !important; align-items: center;
border: 1px solid rgba(141,110,99,0.30) !important;
border-radius: 50px; padding: 6px 14px !important;
}
.seletor-idioma-toggle::after { margin-left: 6px; }
.seletor-idioma-atual { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; }
.seletor-idioma-menu {
min-width: 180px; padding: 8px; border: none; border-radius: var(--raio);
box-shadow: var(--sombra2); margin-top: 10px !important;
}
.seletor-idioma-btn {
display: flex; align-items: center; gap: 10px;
font-family: var(--fonte-corpo); font-size: 0.85rem; color: var(--texto);
padding: 10px 14px; border-radius: 8px; background: transparent; border: none; width: 100%; text-align: left;
transition: background 0.2s;
}
.seletor-idioma-btn .bandeira { font-size: 1.1rem; }
.seletor-idioma-btn:hover { background: rgba(141,110,99,0.08); }
.seletor-idioma-btn.ativo { background: rgba(141,110,99,0.12); font-weight: 500; color: var(--argila-escura); }
/* Versão dentro de navbar com fundo escuro (nenhuma neste site, mas por segurança) */
.navbar.scrolled .seletor-idioma-toggle { border-color: rgba(141,110,99,0.35) !important; }
@media (max-width: 991px) {
.seletor-idioma-toggle { display: inline-flex !important; margin-top: 10px; }
.seletor-idioma-menu { position: static !important; transform: none !important; box-shadow: none; border: 1px solid rgba(141,110,99,0.15); }
}
/* ============================================================
* 35. GALERIA — nosso-espaco.html
* ============================================================ */
.secao-galeria { padding: 100px 0; background: var(--creme); }
.galeria-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
grid-auto-flow: dense;
gap: 14px;
}
/* Alguns itens maiores, para um efeito tipo mosaico */
.galeria-grid .galeria-item:nth-child(1),
.galeria-grid .galeria-item:nth-child(6) {
grid-column: span 2;
grid-row: span 2;
}
.galeria-item {
position: relative;
border: none;
padding: 0;
margin: 0;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background: none;
}
.galeria-item img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transicao), filter var(--transicao);
}
.galeria-item::after {
content: '\f52d'; /* bootstrap icon: arrows fullscreen (fallback visual) */
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(78,52,46,0.0);
color: #fff;
font-size: 1.4rem;
opacity: 0;
transition: background 0.3s, opacity 0.3s;
}
.galeria-item:hover::after { background: rgba(74,59,50,0.35); opacity: 1; }
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item:focus-visible { outline: 3px solid var(--argila); outline-offset: 2px; }
#modalGaleria .modal-content {
background: transparent;
border: none;
}
#modalGaleria .btn-close {
position: absolute;
top: -42px; right: 0;
filter: invert(1) brightness(2);
opacity: 0.9;
z-index: 2;
}
#modalGaleria img {
border-radius: 12px;
box-shadow: var(--sombra2);
max-height: 78vh;
width: 100%;
object-fit: contain;
background: #000;
}
.galeria-modal-legenda {
text-align: center;
color: #fff;
font-size: 0.88rem;
margin-top: 14px;
opacity: 0.85;
}
@media (max-width: 767px) {
.galeria-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; }
.secao-galeria { padding: 72px 0; }
}
/* ============================================================
* 36. FORMULÁRIOS — mensagem de confirmação/erro no envio
* ============================================================ */
.form-mensagem-envio {
margin-top: 16px;
padding: 0;
font-size: 0.88rem;
border-radius: 10px;
transition: padding 0.2s ease;
}
.form-mensagem-envio:empty { margin-top: 0; }
.form-mensagem-envio.sucesso {
padding: 14px 18px;
background: rgba(122,155,140,0.15);
color: #3d5a4c;
border: 1px solid rgba(122,155,140,0.35);
}
.form-mensagem-envio.erro {
padding: 14px 18px;
background: rgba(178,42,42,0.08);
color: #b52a2a;
border: 1px solid rgba(178,42,42,0.25);
}
/* ══════════════════════════════════════════════════════
CLASSES UTILITÁRIAS — extraídas do CSS inline (style="")
Geradas automaticamente na auditoria técnica.
══════════════════════════════════════════════════════ */
.u01 {
color:rgba(245,239,231,0.80);
}
.u02 {
height:170px;
object-fit:cover;
}
.u03 {
font-size:0.62rem;
}
.u04 {
font-style:normal;
}
.u05 {
font-size:0.68rem;
padding:11px 24px;
}
.u06 {
font-size: 0.6rem;
}
.u07 {
font-size:0.6rem;
}
.u08 {
height:200px;
object-fit:cover;
}
.u09 {
color: var(--cor-principal);
}
.u10 {
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
}
.u11 {
color: var(--cor-texto);
}
.u12 {
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:0.95rem;
color:rgba(245,239,231,0.55);
}
.u13 {
font-size:11px;
}
.u14 {
font-size:11px;
color:var(--cor-texto-suave);
}
.u15 {
max-width:560px;
margin:0 auto;
}
.u16 {
text-align: left;
}
.u17 {
color: var(--cor-castanho);
}
.u18 {
color: #f4a828;
}
.u19 {
font-style: italic;
color: var(--cor-texto);
}
.u20 {
width:42px;
height:42px;
background-color:rgba(90,70,51,0.12);
color:var(--cor-principal);
flex-shrink:0;
}
.u21 {
font-size: 0.78rem;
}
.u22 {
width:40px;
height:40px;
background-color:rgba(90,70,51,0.12);
color:var(--cor-principal);
}
.u23 {
max-width:820px;
padding-bottom:80px;
}
.u24 {
font-family:var(--fonte-titulo);
font-size:2.3rem;
font-weight:400;
font-style:italic;
color:var(--detalhe);
margin-bottom:8px;
}
.u25 {
color:var(--texto-claro);
font-size:0.88rem;
margin-bottom:36px;
}
.u26 {
margin-top:40px;
}
.u27 {
max-width:540px;
margin:0 auto;
}
.u28 {
opacity:.45;
font-weight:300;
text-transform:none;
letter-spacing:0;
}
.u29 {
font-family: var(--fonte-titulo);
}
.u30 {
position:relative;
}
.u31 {
color: #b52a2a;
}
.u32 {
color:var(--argila);
}
.u33 {
background:rgba(122,155,140,0.15);
color:var(--verde-escuro);
}
.u34 {
max-width:520px;
margin:0 auto;
}
.u35 {
top: 68px;
z-index: 99;
}
.u36 {
font-size: 0.7rem;
font-weight: bold uppercase;
}
.u37 {
color: var(--cor-secundaria);
}
.u38 {
opacity:0.45;
cursor:not-allowed;
}
.u39 {
font-size:0.74rem;
color:var(--texto-claro);
letter-spacing:0.08em;
}
.u40 {
font-size:12px;
color:var(--cor-principal);
}
.u41 {
font-size:12px;
color:var(--cor-saude);
}
.u42 {
font-size:12px;
color:var(--cor-terapias);
}
.u43 {
font-size:12px;
color:var(--cor-dicas);
}
.u44 {
opacity: 0.85;
}
.u45 {
font-family: var(--fonte-titulo);
color: var(--cor-castanho);
}
.u46 {
color: var(--cor-texto-suave);
}
.u47 {
padding: 4rem 0 0;
}
.u48 {
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:1rem;
color:var(--verde);
letter-spacing:0.2em;
text-transform:uppercase;
}
.u49 {
display:block;
width:60px;
height:1px;
margin: 1rem auto;
}
.u50 {
font-family:'Cormorant Garamond', serif;
font-weight:300;
font-size: 3rem;
}
.u51 {
max-width: 200px;
}
.u52 {
border: 0;
}
.u53 {
font-size: 2rem;
}
.u54 {
font-family:var(--corpo);
font-size:0.70rem;
font-weight:500;
letter-spacing:0.10em;
color:var(--argila);
display:inline-flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
.u55 {
font-size:0.82rem;
color:var(--argila);
text-decoration:underline;
text-underline-offset:3px;
margin-top:6px;
display:inline-block;
}
.u56 {
position:static;
display:inline-block;
margin-bottom:16px;
}
.u57 {
font-family:var(--corpo);
font-size:0.68rem;
font-weight:500;
letter-spacing:0.18em;
text-transform:uppercase;
color:rgba(255,255,255,0.40);
margin-bottom:16px;
}
.u58 {
font-size:0.82rem;
color:rgba(255,255,255,0.38);
margin-top:20px;
}
.u59 {
color:var(--argila);
text-decoration:underline;
text-underline-offset:2px;
}
.u60 {
display:inline-block;
background:transparent;
color:#fff;
border:1.5px solid rgba(255,255,255,0.50);
border-radius:50px;
padding:15px 34px;
font-family:var(--corpo);
font-size:0.78rem;
font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
transition:all 0.3s;
}
.u61 {
font-size:0.80rem;
color:var(--texto-claro);
}
.u62 {
font-size:0.92rem;
color:var(--texto-claro);
}
.u63 {
color:var(--detalhe);
}
.u64 {
margin-top:10px;
display:inline-block;
}
.u65 {
background:transparent;
color:#fff;
border:1.5px solid rgba(255,255,255,0.55);
border-radius:50px;
padding:15px 38px;
font-size:0.78rem;
letter-spacing:0.12em;
text-transform:uppercase;
font-weight:500;
font-family:var(--corpo);
cursor:pointer;
}
.u66 {
border-left: 3px solid var(--cor-principal);
}
.u67 {
color: #25d366;
}
/* ============================================================
* 37. GRELHA COMPACTA DE VÍDEOS — homepage (secção "Em ação")
* ============================================================ */
.video-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.video-item {
position: relative;
border: none; padding: 0; margin: 0;
border-radius: 10px; overflow: hidden;
cursor: pointer; background: #000;
aspect-ratio: 16 / 9;
}
.video-item img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--transicao), opacity var(--transicao);
opacity: 0.85;
}
.video-item:hover img { transform: scale(1.06); opacity: 1; }
.video-play {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 46px; height: 46px; border-radius: 50%;
background: rgba(255,255,255,0.92);
display: flex; align-items: center; justify-content: center;
color: var(--detalhe); font-size: 1.1rem;
transition: transform 0.3s, background 0.3s;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.video-item:hover .video-play { transform: translate(-50%, -50%) scale(1.12); background: #fff; }
.video-legenda {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 18px 12px 10px;
background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
color: #fff; font-size: 0.72rem; font-weight: 500;
text-align: center; line-height: 1.3;
}
.video-item:focus-visible { outline: 3px solid var(--argila); outline-offset: 2px; }
#modalVideo .modal-content { background: #000; border: none; }
#modalVideo .btn-close {
position: absolute; top: -42px; right: 0;
filter: invert(1) brightness(2); opacity: 0.9; z-index: 2;
}
#modalVideo video { width: 100%; height: 100%; background: #000; }
@media (max-width: 991px) {
.video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.video-legenda { font-size: 0.64rem; padding: 14px 8px 8px; }
}
/* ============================================================
* 38. PARTILHA SOCIAL — artigos de blog
* ============================================================ */
.artigo-partilha {
display: flex; align-items: center; gap: 12px;
margin: 32px 0; padding: 20px 0;
border-top: 1px solid rgba(141,110,99,0.12);
border-bottom: 1px solid rgba(141,110,99,0.12);
}
.partilha-label {
font-family: var(--fonte-corpo); font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.04em; color: var(--texto-claro); margin-right: 4px;
}
.btn-partilha {
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 1rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-partilha:hover { transform: translateY(-3px); color: #fff; }
.btn-partilha-wa { background: #25d366; }
.btn-partilha-wa:hover { box-shadow: 0 6px 16px rgba(37,211,102,0.4); }
.btn-partilha-fb { background: #1877f2; }
.btn-partilha-fb:hover { box-shadow: 0 6px 16px rgba(24,119,242,0.4); }
/* ============================================================
* 39. NEWSLETTER — artigos de blog
* ============================================================ */
.newsletter-blog {
background: var(--detalhe);
border-radius: var(--raio);
padding: 40px 36px;
margin: 56px 0;
text-align: center;
}
.newsletter-blog h3 {
font-family: var(--fonte-titulo); font-style: italic; font-weight: 400;
font-size: 1.6rem; color: #fff; margin-bottom: 8px;
}
.newsletter-blog p {
color: rgba(255,255,255,0.72); font-size: 0.9rem; margin-bottom: 24px;
max-width: 420px; margin-left: auto; margin-right: auto;
}
.newsletter-input-wrap {
display: flex; gap: 10px; max-width: 420px; margin: 0 auto;
flex-wrap: wrap; justify-content: center;
}
.newsletter-input-wrap input[type="email"] {
flex: 1 1 220px; min-width: 0;
padding: 13px 18px; border-radius: 50px; border: none;
font-family: var(--fonte-corpo); font-size: 0.88rem;
}
.newsletter-input-wrap button {
padding: 13px 26px; border-radius: 50px; border: none;
background: var(--argila); color: #fff;
font-family: var(--fonte-corpo); font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
cursor: pointer; transition: background 0.3s;
white-space: nowrap;
}
.newsletter-input-wrap button:hover { background: var(--argila-escura); }
.newsletter-blog .form-mensagem-envio { color: #fff; }
.newsletter-blog .form-mensagem-envio.sucesso { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.newsletter-blog .form-mensagem-envio.erro { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
/* ============================================================
* 40. SENSAÇÃO "APP" — micro-interações premium
* ============================================================ */
/* Resposta tátil: todos os botões/links de ação "afundam" ligeiramente ao clicar */
.btn-reservar-sv:active, .btn-reservar-card:active, .btn-reservar-espaco:active,
.btn-p:active, .btn-wa:active, .btn-topo:active, .filtro-btn:active,
.galeria-item:active, .video-item:active, .btn-partilha:active,
button[type="submit"]:active {
transform: scale(0.94);
}
.btn-reservar-sv, .btn-reservar-card, .btn-reservar-espaco, .btn-p {
transition: transform 0.15s cubic-bezier(0.25,0.46,0.45,0.94), background var(--transicao), box-shadow var(--transicao);
}
/* Scrollbar personalizada, discreta e alinhada com a paleta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--creme); }
::-webkit-scrollbar-thumb { background: rgba(141,110,99,0.35); border-radius: 10px; border: 2px solid var(--creme); }
::-webkit-scrollbar-thumb:hover { background: rgba(141,110,99,0.55); }
html { scrollbar-color: rgba(141,110,99,0.35) var(--creme); scrollbar-width: thin; }
/* Transição suave dos grupos de serviço ao filtrar — em vez de aparecer/desaparecer
de repente, esbate e desliza ligeiramente */
.grupo-servico {
transition: opacity 0.35s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
opacity: 1; transform: translateY(0);
}
.grupo-servico.oculto {
opacity: 0; transform: translateY(10px);
position: absolute; pointer-events: none; visibility: hidden;
}
/* Indicador de carregamento nos formulários — substitui só o texto por um "spinner" */
.btn-a-enviar { position: relative; color: transparent !important; pointer-events: none; }
.btn-a-enviar::after {
content: '';
position: absolute; top: 50%; left: 50%;
width: 16px; height: 16px; margin: -8px 0 0 -8px;
border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
border-radius: 50%;
animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Estados de foco mais nítidos e elegantes, para navegação por teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--argila);
outline-offset: 3px;
border-radius: 3px;
}