/*
Theme Name: Dr. Gabriel Campuzano, Homeopatia Clássica
Theme URI: http://teste-alojamento.local/
Author: Pedro Almeida
Author URI: https://pealmeida.com
Description: Custom theme for Dr. Gabriel Campuzano Piña, classical homeopath in Lisbon. Built as a prototype for client proposal. Based on rehumanizar.pt visual archetype.
Version: 1.15.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gabriel-campuzano
Tags: homeopathy, medical, lisbon, classical, wellness
*/

/* =========================================================
   VARIÁVEIS CSS
   ========================================================= */
:root {
  --cor-principal:    #1A1A2E;   /* deep navy-charcoal, authority without coldness */
  --cor-acento:       #D4781A;   /* warm amber-saffron, holistic warmth */
  --cor-acento-cl:    #E8A04A;   /* lighter amber */
  --cor-creme:        #FAF8F4;   /* warm near-white */
  --cor-areia:        #F0ECE4;   /* warm stone */
  --cor-areia-escura: #DED8CC;
  --cor-escuro:       #0F0F1A;
  --cor-texto:        #2A2A3A;
  --cor-texto-cl:     #6B6878;
  --cor-branco:       #FEFEFE;
  --cor-destaque:     #F5F0E8;

  --fonte-display:   'Cormorant Garamond', Georgia, serif;
  --fonte-nav:       'Raleway', sans-serif;
  --fonte-corpo:     'Lato', sans-serif;

  --sombra-suave:    0 4px 30px rgba(15,15,26,0.08);
  --sombra-media:    0 8px 40px rgba(15,15,26,0.14);
  --sombra-forte:    0 16px 60px rgba(15,15,26,0.22);

  --transicao:       all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transicao-rapida: all 0.2s ease;

  --raio:            2px;
  --raio-grande:     6px;

  --max-width:       1380px;
  --padding-secao:   110px 0;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; font-size: 16px; }

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background-color: var(--cor-creme);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: var(--transicao-rapida); }

ul, ol { list-style: none; }

button, input, textarea, select { font-family: var(--fonte-corpo); }

/* =========================================================
   TIPOGRAFIA
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--cor-escuro);
}

h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }

p {
  font-size: 1.05rem;
  color: var(--cor-texto-cl);
  margin-bottom: 1.2em;
  line-height: 1.8;
}

p:last-child { margin-bottom: 0; }

blockquote {
  font-family: var(--fonte-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--cor-principal);
  border-left: 3px solid var(--cor-acento);
  padding: 1rem 0 1rem 2rem;
  margin: 2rem 0;
  line-height: 1.6;
}

/* =========================================================
   UTILITÁRIOS
   ========================================================= */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }

.texto-centro { text-align: center; }
.cor-acento { color: var(--cor-acento); }

.etiqueta {
  display: inline-block;
  font-family: var(--fonte-nav);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: 1rem;
}

.separador {
  width: 50px;
  height: 2px;
  background: var(--cor-acento);
  margin: 1.4rem auto;
  opacity: 0.7;
}

.separador.esquerda { margin-left: 0; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--fonte-nav);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 42px;
  border: none;
  cursor: pointer;
  transition: var(--transicao);
}

.btn-primario { background: var(--cor-principal); color: var(--cor-branco); }
.btn-primario:hover {
  background: var(--cor-acento);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,120,26,0.35);
}

.btn-acento { background: var(--cor-acento); color: var(--cor-branco); }
.btn-acento:hover { background: var(--cor-principal); transform: translateY(-2px); }

.btn-contorno { background: transparent; color: var(--cor-branco); border: 1.5px solid rgba(255,255,255,0.65); }
.btn-contorno:hover { background: var(--cor-branco); color: var(--cor-principal); }

.btn-whatsapp {
  background: var(--cor-acento);
  color: var(--cor-branco);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-whatsapp:hover {
  background: var(--cor-principal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,120,26,0.35);
}

/* =========================================================
   HEADER
   ========================================================= */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 26px 0;
  transition: all 0.5s ease;
}

#site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: all 0.5s ease;
}

#site-header.scrolled { padding: 14px 0; box-shadow: var(--sombra-media); }
#site-header.scrolled::before { background: rgba(15,15,26,0.97); backdrop-filter: blur(12px); }

/* Variantes de Início com hero claro (E e C), não escuro: header precisa do fundo
   escuro sempre, não só depois do scroll, ou o texto branco fica invisível. */
body.home #site-header::before,
body.page-template-page-inicio-b #site-header::before,
body.page-template-page-inicio-c #site-header::before,
body.page-template-page-ripple-b #site-header::before,
body.page-template-page-ripple-c #site-header::before,
body.page-template-page-hero-aurora #site-header::before,
body.page-template-page-hero-halo #site-header::before { background: rgba(15,15,26,0.97); backdrop-filter: blur(12px); }

.header-inner { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }

.site-logo { display: flex; flex-direction: row; align-items: center; gap: 14px; text-decoration: none; line-height: 1; }

.logo-marca { width: 22px; height: 44px; color: var(--cor-acento); flex-shrink: 0; }
.logo-texto { display: flex; flex-direction: column; align-items: flex-start; }

.logo-nome { font-family: var(--fonte-display); font-size: 1.4rem; font-weight: 600; color: var(--cor-branco); letter-spacing: 0.02em; }
.logo-subtitulo { font-family: var(--fonte-nav); font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cor-acento); margin-top: 3px; }

.nav-principal { display: flex; align-items: center; gap: 0; }

.nav-principal a {
  font-family: var(--fonte-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254,254,254,0.8);
  padding: 8px 16px;
  position: relative;
  transition: var(--transicao);
}

.nav-principal a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; right: 50%;
  height: 1px;
  background: var(--cor-acento);
  transition: all 0.3s ease;
}

.nav-principal a:hover, .nav-principal a.active { color: var(--cor-branco); }
.nav-principal a:hover::after, .nav-principal a.active::after { left: 16px; right: 16px; }

.nav-marcar { margin-left: 14px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 1001; background: none; border: none; -webkit-appearance: none; appearance: none; border-radius: 0; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--cor-branco); transition: var(--transicao); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1A1A2E;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .hero-video { display: none; }
  .hero { background: url('/wp-content/uploads/gabriel/gabriel-desk.jpg') center 30% / cover, #1A1A2E; }
}

/* ---- Variante E: vídeo pequeno, ambiente claro ---- */
.hero-e {
  height: auto;
  min-height: 0;
  background: var(--cor-creme);
  padding: 160px 0 90px;
  overflow: visible;
}

.hero-e-wrap {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: nowrap;
}

.hero-e-texto { flex: 1 1 0; min-width: 0; }

.hero.hero-e .hero-etiqueta,
.hero.hero-e h1 { color: var(--cor-escuro); }

.hero-e .hero-etiqueta::before { background: var(--cor-acento); opacity: 1; }

.hero.hero-e h1 {
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  text-shadow: none;
}

.hero.hero-e .hero-descricao { color: var(--cor-texto-cl); }

.hero.hero-e .btn-contorno { color: var(--cor-escuro); border-color: rgba(15,15,26,0.3); }
.hero.hero-e .btn-contorno:hover { background: var(--cor-escuro); color: var(--cor-branco); }

.hero-e-video {
  flex: 0 0 380px;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--sombra-forte);
}

.hero-e-video .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abaixo de 1100px não cabem lado a lado com conforto: empilha de propósito
   em vez de deixar o flex espremer os dois numa só linha. Texto primeiro
   (ordem do DOM), imagem depois, mais pequena. Não deve dominar o ecrã
   antes de o visitante ler uma palavra do headline. */
@media (max-width: 1100px) {
  .hero-e { padding: 130px 0 64px; }
  .hero-e-wrap { flex-direction: column; flex-wrap: nowrap; gap: 32px; }
  .hero-e-texto { flex: none; width: 100%; }
  .hero-e-video { flex: none; max-width: 420px; width: 100%; margin: 0 auto; }
}

@media (max-width: 768px) {
  .hero-e .hero-video { display: block; }
  .hero-e { background: var(--cor-creme); }
}

@media (max-width: 600px) {
  .hero-e-video { max-width: 240px; }
}

/* =========================================================
   HERO C: banner claro, imagem no canto com ripple (experimental)
   ========================================================= */
.hero-c {
  height: auto;
  min-height: 560px;
  background: var(--cor-creme);
  display: flex;
  align-items: center;
  padding: 150px 0 80px;
  overflow: hidden;
  position: relative;
}

.hero-c > .container { width: 100%; }

.hero-c-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.hero-c-texto { flex: 1 1 0; min-width: 0; max-width: 620px; }

.hero.hero-c .hero-etiqueta,
.hero.hero-c h1 { color: var(--cor-escuro); }

.hero-c .hero-etiqueta::before { background: var(--cor-acento); opacity: 1; }

.hero.hero-c h1 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); text-shadow: none; }

.hero.hero-c .hero-descricao { color: var(--cor-texto-cl); }

.hero.hero-c .btn-contorno { color: var(--cor-escuro); border-color: rgba(15,15,26,0.3); }
.hero.hero-c .btn-contorno:hover { background: var(--cor-escuro); color: var(--cor-branco); }

.hero-c-imagem-container {
  position: relative;
  flex: 0 0 420px;
  width: 420px; height: 420px;
  display: flex; align-items: center; justify-content: center;
}

.hero-c-imagem {
  position: relative;
  z-index: 2;
  width: 220px; height: 220px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--sombra-forte);
  border: 6px solid var(--cor-branco);
}

/* Ondas de energia a sair da imagem: 4 anéis, cada vez maiores e mais
   ténues, para dar sensação de vibração/energia a irradiar, não só um
   contorno decorativo. */
.hero-c-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 2px solid var(--cor-acento);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: heroCRipple 4.4s ease-out infinite;
}
.hero-c-ripple--2 { animation-delay: 1.1s; }
.hero-c-ripple--3 { animation-delay: 2.2s; }
.hero-c-ripple--4 { animation-delay: 3.3s; }

@keyframes heroCRipple {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; border-width: 2px; }
  60% { opacity: 0.22; }
  100% { transform: translate(-50%, -50%) scale(2.85); opacity: 0; border-width: 0.5px; }
}

@media (max-width: 1100px) {
  .hero-c-wrap { flex-direction: column; text-align: center; gap: 40px; }
  .hero-c-texto { max-width: 100%; }
  .hero-c-texto .hero-botoes { justify-content: center; }
  .hero-c-imagem-container { width: 340px; height: 340px; }
}

@media (max-width: 600px) {
  .hero-c { padding: 130px 0 60px; }
  .hero-c-imagem-container { width: 260px; height: 260px; }
  .hero-c-imagem { width: 160px; height: 160px; }
  .hero-c-ripple { width: 160px; height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-c-ripple { animation: none; opacity: 0.3; }
}

/* =========================================================
   HERO RIPPLE B: campo vital, fundo de ondas em canvas
   Variante da Início C. Em vez de anéis a sair da imagem, a energia
   está no ambiente: faixas de cor a derivar devagar atrás de tudo,
   desenhadas com ruído de Perlin (assets/js/main.js). As cores são os
   três reinos da matéria médica: mineral (ardósia), vegetal (sálvia),
   animal (âmbar).
   ========================================================= */
.hero-rb { background: var(--cor-creme); }

.hero-rb-canvas {
  display: block;
  position: absolute;
  top: -8%; left: -4%;
  width: 108%; height: 116%;
  filter: blur(20px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

/* Véu: mantém o texto legível sobre o canvas sem apagar as ondas do
   lado da imagem, onde elas devem respirar. */
.hero-rb-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(94deg, rgba(250,248,244,0.94) 2%, rgba(250,248,244,0.78) 26%, rgba(250,248,244,0.24) 48%, rgba(250,248,244,0) 66%),
    linear-gradient(to bottom, var(--cor-creme) 0%, rgba(250,248,244,0.10) 22%, rgba(250,248,244,0.10) 78%, var(--cor-creme) 100%);
}

.hero-rb .hero-c-wrap { position: relative; z-index: 2; }

.hero-rb .hero-c-imagem {
  width: 260px; height: 260px;
  border-color: rgba(254,254,254,0.92);
  box-shadow: 0 24px 70px rgba(15,15,26,0.20);
}

/* Halo quente único a assentar a imagem no campo, sem competir com ele. */
.hero-rb-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,248,244,0.80) 32%, rgba(250,248,244,0.34) 54%, rgba(250,248,244,0) 74%);
  z-index: 1;
}

@media (max-width: 1100px) {
  .hero-rb .hero-c-imagem { width: 230px; height: 230px; }
  .hero-rb-aura { width: 340px; height: 340px; }
  .hero-rb-veu {
    background: linear-gradient(to bottom, var(--cor-creme) 0%, rgba(250,248,244,0.55) 30%, rgba(250,248,244,0.55) 70%, var(--cor-creme) 100%);
  }
}

@media (max-width: 600px) {
  .hero-rb .hero-c-imagem { width: 180px; height: 180px; }
  .hero-rb-aura { width: 260px; height: 260px; }
  .hero-rb-canvas { filter: blur(14px); }
}

/* =========================================================
   HERO RIPPLE C: as diluições, 5 anéis concêntricos a respirar
   Variante da Início C. Os anéis não são emitidos, ficam: é um campo
   permanente que pulsa. A concentração cai do centro para fora (borda
   âmbar → borda quase invisível), como a escala de diluição.
   ========================================================= */
.hero-rc { background: var(--cor-creme); }

.hero-rc-lavagem {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(52% 82% at 76% 44%, rgba(212,120,26,0.20), rgba(212,120,26,0) 62%),
    radial-gradient(44% 68% at 12% 82%, rgba(122,134,152,0.17), rgba(122,134,152,0) 64%),
    radial-gradient(30% 46% at 62% 88%, rgba(167,180,156,0.16), rgba(167,180,156,0) 68%);
}

.hero-rc .hero-c-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero-rc-texto { max-width: 100%; }

.hero.hero-rc h1 { font-size: clamp(2.1rem, 3.1vw, 3.1rem); margin-bottom: 1.1rem; }
.hero.hero-rc h1 em { color: var(--cor-acento); }
.hero.hero-rc .hero-descricao { font-size: 1.05rem; margin-bottom: 1.6rem; max-width: 540px; }

/* Credenciais, em duas colunas, logo abaixo dos botões. */
.hero-rc-provas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin-top: 1.8rem;
  max-width: 500px;
  animation: heroEntrada 1.2s ease-out 1.3s both;
}
.hero-rc-provas li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--cor-texto-cl);
}
.hero-rc-provas li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--cor-acento);
  font-size: 0.9rem;
}

/* A colagem: o retrato real manda, o medalhão da trituração entra
   pequeno no canto e é dele que saem as diluições. */
.hero-rc-colagem {
  position: relative;
  width: 400px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-rc-retrato {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  position: relative;
  z-index: 2;
}

/* A homepage usa o retrato sem efeitos e com a altura dos banners internos. */
.hero.hero-efeito-sem-efeito {
  height: 640px;
  min-height: 640px;
  padding: 140px 0 70px;
}

.hero-efeito-sem-efeito .hero-rc-texto {
  animation: heroEntrada 0.9s ease-out both;
  grid-column: 2;
  grid-row: 1;
}

.hero-efeito-sem-efeito .hero-c-wrap {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
}

.hero-efeito-sem-efeito .hero-rc-colagem {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 640px;
  margin: 0;
  justify-self: start;
  transform: none;
}
.hero-efeito-sem-efeito .hero-rc-retrato {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.hero-efeito-sem-efeito .hero-etiqueta,
.hero.hero-efeito-sem-efeito h1,
.hero-efeito-sem-efeito .hero-descricao,
.hero-efeito-sem-efeito .hero-botoes {
  animation: none;
  opacity: 1;
  transform: none;
}
.hero.hero-efeito-sem-efeito h1 { margin-bottom: 1.5rem; }
.hero.hero-efeito-sem-efeito .hero-descricao { margin-bottom: 2rem; }
.hero-efeito-sem-efeito .hero-rc-provas {
  margin-top: 2.2rem;
  animation: none;
}
.hero-rc-campo {
  --anel-esc: 1;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  flex: none;
  z-index: 1;
}

.hero-rc .hero-c-imagem {
  position: relative;
  z-index: 3;
  width: 140px; height: 140px;
  border-width: 5px;
  border-color: rgba(254,254,254,0.96);
  box-shadow: 0 14px 40px rgba(15,15,26,0.20);
}

.hero-rc-anel {
  --anel-d: calc(var(--anel-base) * var(--anel-esc));
  position: absolute;
  top: 50%; left: 50%;
  width: var(--anel-d); height: var(--anel-d);
  margin: calc(var(--anel-d) / -2) 0 0 calc(var(--anel-d) / -2);
  border-radius: 50%;
  border: 1px solid var(--anel-borda);
  /* O preenchimento vive só no bordo: cinco cascas de vidro concêntricas,
     em vez de cinco discos cheios que empastariam o centro. */
  background: radial-gradient(circle,
    rgba(250,248,244,0) 60%,
    rgba(255,255,255,0.78) 84%,
    var(--anel-topo) 100%);
  box-shadow: 0 10px 34px rgba(212,120,26,0.09);
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  opacity: var(--anel-op);
  animation: heroRCRespirar 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, opacity;
  z-index: 1;
}

.hero-rc-anel--1 {
  --anel-base: 440px; --anel-borda: rgba(212,120,26,0.95); --anel-topo: rgba(212,120,26,0.46); --anel-op: 1;
  animation-delay: 0s;
}
.hero-rc-anel--2 {
  --anel-base: 505px; --anel-borda: rgba(212,120,26,0.80); --anel-topo: rgba(232,160,74,0.38); --anel-op: 0.96;
  animation-delay: -0.9s;
}
.hero-rc-anel--3 {
  --anel-base: 570px; --anel-borda: rgba(212,120,26,0.64); --anel-topo: rgba(232,160,74,0.28); --anel-op: 0.9;
  animation-delay: -1.8s;
}
.hero-rc-anel--4 {
  --anel-base: 635px; --anel-borda: rgba(212,120,26,0.46); --anel-topo: rgba(232,160,74,0.20); --anel-op: 0.82;
  animation-delay: -2.7s;
}
.hero-rc-anel--5 {
  --anel-base: 700px; --anel-borda: rgba(212,120,26,0.30); --anel-topo: rgba(232,160,74,0.13); --anel-op: 0.7;
  animation-delay: -3.6s;
}

/* Cada casca clareia enquanto abre e apaga ao fechar. Com os atrasos
   desfasados, o brilho viaja do centro para fora: a energia lê-se sem
   nada disparar. */
@keyframes heroRCRespirar {
  0%, 100% { transform: scale(0.94); opacity: calc(var(--anel-op) * 0.45); }
  50%      { transform: scale(1.06); opacity: var(--anel-op); }
}

@media (max-width: 1100px) {
  .hero-rc .hero-c-wrap { grid-template-columns: 1fr; gap: 44px; }
  .hero-rc-texto { max-width: 100%; }
  .hero-rc-provas { justify-items: start; width: fit-content; margin-left: auto; margin-right: auto; }
  .hero-rc-colagem { width: 300px; margin: 0 auto; }
  .hero-rc-campo { --anel-esc: 0.5; width: 300px; height: 300px; }
  .hero-rc .hero-c-imagem { width: 116px; height: 116px; }
  .hero.hero-efeito-sem-efeito {
    height: auto;
    min-height: 0;
    padding: 140px 0 80px;
  }
  .hero-efeito-sem-efeito .hero-c-wrap { gap: 48px; }
  .hero-efeito-sem-efeito .hero-rc-texto {
    grid-column: 1;
    grid-row: 2;
  }
  .hero-efeito-sem-efeito .hero-rc-colagem {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    justify-self: center;
    transform: none;
  }
}

@media (max-width: 600px) {
  /* Em ecrã estreito o medalhão sai do canto e passa para o topo do
     retrato: encostado à esquerda ficaria meio fora do ecrã. */
  .hero-rc-colagem { width: min(260px, 74vw); margin: 0 auto; }
  .hero-rc-campo { --anel-esc: 0.42; width: 260px; height: 260px; }
  .hero-rc .hero-c-imagem { width: 92px; height: 92px; border-width: 4px; }
  .hero-rc-provas { grid-template-columns: 1fr; gap: 8px; }
  .hero.hero-efeito-sem-efeito { padding: 128px 0 68px; }
  .hero-efeito-sem-efeito .hero-rc-colagem {
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rc-anel { animation: none; transform: scale(1); opacity: var(--anel-op); }
}

/* =========================================================
   HERO AURORA: ondas de luz (shader WebGL, assets/js/main.js)
   Porte do componente aurora-waves (21st.dev / ogl) para WebGL puro,
   com a paleta dele: âmbar e ardósia sobre creme, em vez do azul-magenta
   sobre preto do original. A luz fica numa faixa atrás do retrato, o
   texto assenta sobre creme quase limpo.
   ========================================================= */
.hero-efeito-aurora { overflow: hidden; }

.hero-aurora-canvas {
  display: block;
  position: absolute;
  top: -6%; left: 0;
  width: 100%; height: 112%;
  z-index: 0;
  pointer-events: none;
  filter: blur(14px) saturate(1.05);
  opacity: 0.95;
}

.hero-aurora-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(94deg, rgba(250,248,244,0.95) 2%, rgba(250,248,244,0.80) 22%, rgba(250,248,244,0.34) 44%, rgba(250,248,244,0) 64%),
    linear-gradient(to bottom, var(--cor-creme) 0%, rgba(250,248,244,0) 20%, rgba(250,248,244,0) 80%, var(--cor-creme) 100%);
}

/* =========================================================
   HERO HALO: aura de luz a respirar atrás do retrato
   A opção contida: nada de anéis nem de faixas, só luz a sair de trás da
   fotografia, três camadas com ritmos diferentes.
   ========================================================= */
.hero-halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  z-index: 1;
  pointer-events: none;
}

.hero-halo-camada {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: heroHaloRespirar var(--halo-dur) ease-in-out infinite;
  will-change: transform, opacity;
}

.hero-halo-camada--3 {
  --halo-dur: 13.5s;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(154,164,180,0.20) 0%, rgba(167,180,156,0.10) 42%, rgba(167,180,156,0) 68%);
  animation-delay: -5.2s;
}

.hero-halo-canvas {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  /* a aurora fica contida num disco: lê-se como aura do retrato, não
     como fundo da página */
  -webkit-mask-image: radial-gradient(circle, #000 26%, rgba(0,0,0,0.55) 52%, transparent 72%);
  mask-image: radial-gradient(circle, #000 26%, rgba(0,0,0,0.55) 52%, transparent 72%);
  filter: blur(16px) saturate(1.05);
  opacity: 0.9;
}

@keyframes heroHaloRespirar {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

@media (max-width: 1100px) {
  .hero-halo { width: 560px; height: 560px; }
  .hero-halo-camada--1 { width: 340px; height: 340px; }
  .hero-halo-camada--2 { width: 460px; height: 460px; }
  .hero-halo-camada--3 { width: 560px; height: 560px; }
}

@media (max-width: 1100px) {
  /* Em coluna única o texto assenta em cima da aurora: o véu passa a ser
     horizontal, senão a luz compete com a leitura. */
  .hero-aurora-veu {
    background: linear-gradient(to bottom, var(--cor-creme) 0%, rgba(250,248,244,0.78) 22%, rgba(250,248,244,0.5) 58%, rgba(250,248,244,0.1) 84%, var(--cor-creme) 100%);
  }
}

@media (max-width: 600px) {
  .hero-halo { width: 400px; height: 400px; }
  .hero-halo-camada--1 { width: 250px; height: 250px; }
  .hero-halo-camada--2 { width: 330px; height: 330px; }
  .hero-halo-camada--3 { width: 400px; height: 400px; }
  .hero-aurora-canvas { filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-halo-camada { animation: none; opacity: 0.8; }
}

/* =========================================================
   HERO ONDULAÇÃO: a onda dentro da própria fotografia
   Em vez de anéis à volta da moldura, a imagem é desenhada num shader
   que a deforma em círculos concêntricos a partir de um ponto, como uma
   gota a cair. O <img> por baixo é o que fica se não houver WebGL.
   ========================================================= */
.hero-onda-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  z-index: 3;
}

.hero-efeito-ondulacao .hero-rc-colagem { position: relative; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(15,15,26,0.94) 0%, rgba(26,26,46,0.82) 50%, rgba(15,15,26,0.93) 100%);
}

.hero-conteudo {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 0 40px;
  animation: heroEntrada 1.2s ease-out 0.3s both;
}

@keyframes heroEntrada { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.hero-etiqueta {
  font-family: var(--fonte-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cor-acento);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.5rem;
  animation: heroEntrada 1.2s ease-out 0.5s both;
}

.hero-etiqueta::before { content: ''; width: 36px; height: 1px; background: var(--cor-acento); }

.hero h1 { color: var(--cor-branco); margin-bottom: 1.4rem; text-shadow: 0 2px 24px rgba(0,0,0,0.35); animation: heroEntrada 1.2s ease-out 0.7s both; }

.hero-descricao { font-size: 1.15rem; color: rgba(254,254,254,0.78); max-width: 580px; margin-bottom: 2.6rem; line-height: 1.85; animation: heroEntrada 1.2s ease-out 0.9s both; }

.hero-botoes { display: flex; gap: 14px; flex-wrap: wrap; animation: heroEntrada 1.2s ease-out 1.1s both; }

.hero-scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(254,254,254,0.5);
  font-family: var(--fonte-nav);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: heroEntrada 1s ease-out 1.5s both;
}

.hero-scroll-linha { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(254,254,254,0.55), transparent); animation: scrollPulse 2s ease-in-out infinite; }

@keyframes scrollPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* =========================================================
   FILOSOFIA
   ========================================================= */
.filosofia { padding: var(--padding-secao); background: var(--cor-areia); }

.filosofia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.filosofia-texto h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  margin-bottom: 1.2rem;
}
.filosofia-texto p { font-size: 1.08rem; line-height: 1.85; margin-bottom: 1.4rem; }

.filosofia-imagem-container {
  position: relative;
  width: 100%;
  max-width: 540px;
  justify-self: end;
}

.filosofia-img-principal { width: 100%; height: 470px; object-fit: cover; object-position: center 58%; box-shadow: var(--sombra-forte); }

.filosofia-badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--cor-acento);
  color: var(--cor-branco);
  padding: 22px 26px;
  box-shadow: var(--sombra-media);
  text-align: center;
}

.filosofia-badge-numero { font-family: var(--fonte-display); font-size: 2.6rem; font-weight: 600; line-height: 1; display: block; }
.filosofia-badge-texto { font-family: var(--fonte-nav); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-top: 4px; opacity: 0.9; }

/* =========================================================
   PILARES
   ========================================================= */
.pilares { padding: 80px 0; background: var(--cor-principal); overflow: hidden; }

.pilares-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.pilar-item {
  padding: 60px 48px;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: var(--transicao);
  position: relative;
}

.pilar-item:last-child { border-right: none; }

.pilar-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.pilar-item:hover::after { transform: scaleX(1); }

.pilar-numero { font-family: var(--fonte-display); font-size: 4rem; color: rgba(232,160,74,0.28); line-height: 1; margin-bottom: 1rem; display: block; }
.pilar-item h3 { color: var(--cor-branco); font-size: 1.6rem; margin-bottom: 0.8rem; }
.pilar-item p { color: rgba(254,254,254,0.5); font-size: 0.98rem; line-height: 1.75; }
.pilar-icone { width: 44px; height: 44px; margin-bottom: 1.6rem; color: var(--cor-acento); }

/* =========================================================
   ABORDAGEM
   ========================================================= */
.abordagem { padding: var(--padding-secao); background: var(--cor-areia); }

.abordagem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.abordagem-img { width: 100%; height: 560px; object-fit: cover; }

.abordagem-texto h2 { margin-bottom: 1.2rem; }
.abordagem-texto p { line-height: 1.85; margin-bottom: 1.2rem; }

.abordagem-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 2.5rem 0;
  padding: 28px 0;
  border-top: 1px solid var(--cor-areia-escura);
  border-bottom: 1px solid var(--cor-areia-escura);
}

.stat-item { text-align: center; }
.stat-numero { font-family: var(--fonte-display); font-size: 2.4rem; color: var(--cor-principal); line-height: 1; margin-bottom: 0.3rem; }
.stat-label { font-family: var(--fonte-nav); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cor-texto-cl); }

/* =========================================================
   SERVIÇOS
   ========================================================= */
.servicos { padding: var(--padding-secao); background: var(--cor-creme); }

.servicos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }

.servico-card {
  background: var(--cor-branco);
  padding: 44px 34px;
  border: 1px solid var(--cor-areia-escura);
  transition: var(--transicao);
  position: relative;
  overflow: hidden;
}

.servico-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.servico-card:hover { box-shadow: var(--sombra-media); transform: translateY(-5px); border-color: transparent; }
.servico-card:hover::before { transform: scaleX(1); }

.servico-icone { width: 50px; height: 50px; color: var(--cor-acento); margin-bottom: 1.5rem; }
.servico-card h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.servico-card p { font-size: 0.95rem; line-height: 1.75; margin-bottom: 1.6rem; }

.servico-detalhe {
  font-family: var(--fonte-nav);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-acento);
  display: flex;
  align-items: center;
  gap: 8px;
}
.servico-detalhe::after { content: ''; flex: 1; height: 1px; background: var(--cor-areia-escura); }

/* Botão "Ler mais" no card de hábito */
.habito-ler-mais {
  padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--fonte-nav);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cor-acento);
  display: inline-flex; align-items: center; gap: 7px;
  transition: var(--transicao-rapida);
}
.habito-ler-mais svg { transition: transform 0.25s ease; }
.habito-ler-mais:hover { color: var(--cor-acento-cl); }
.habito-ler-mais:hover svg { transform: translateX(4px); }

/* =========================================================
   PERCURSO (bio completa)
   ========================================================= */
.percurso {
  padding: var(--padding-secao);
  background: var(--cor-creme);
  position: relative;
  overflow: hidden;
}

.percurso::before {
  content: 'HOMEOPATIA';
  position: absolute;
  font-family: var(--fonte-display);
  font-size: 12rem;
  color: rgba(0,0,0,0.03);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.04em;
}

/* Em ecrãs estreitos a marca de água não tem espaço negativo à volta para
   ficar subtil como no desktop. Mesmo mais pequena continua a competir com
   o texto real do percurso. É puramente decorativa, sem função, por isso
   é mais seguro escondê-la de vez do que continuar a ajustar a escala. */
@media (max-width: 768px) {
  .percurso::before { content: none; }
}

.percurso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.percurso-img { width: 100%; height: 460px; object-fit: cover; object-position: center 42%; box-shadow: var(--sombra-forte); }

.percurso-texto h2 { margin-bottom: 1.2rem; }
.percurso-texto p { line-height: 1.85; margin-bottom: 1.2rem; }

.percurso-assinatura { font-family: var(--fonte-display); font-size: 1.9rem; font-style: italic; color: var(--cor-principal); margin-top: 2rem; border-top: 1px solid var(--cor-areia-escura); padding-top: 1.4rem; }

/* =========================================================
   TESTEMUNHOS
   ========================================================= */
.testemunhos {
  padding: var(--padding-secao);
  background: var(--cor-principal);
  position: relative;
  overflow: hidden;
}

.testemunhos::before {
  content: '"';
  position: absolute;
  font-family: var(--fonte-display);
  font-size: 22rem;
  color: rgba(212,120,26,0.06);
  top: -60px; left: -20px;
  line-height: 1;
  pointer-events: none;
}

.testemunhos .etiqueta { color: var(--cor-acento); }
.testemunhos h2 { color: var(--cor-branco); margin-bottom: 60px; }

/* Carrossel de testemunhos (3 visíveis por slide) */
.testemunhos-carousel { position: relative; margin-top: 10px; }
.testemunhos-viewport { overflow: hidden; }
.testemunhos-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.testemunhos-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
/* slide incompleto (último com 1 card): centra os cards em vez de os esticar */
.testemunhos-slide:last-child:not(:only-child) { justify-content: center; }
.testemunhos-slide .testemunho-card { height: 100%; }

/* Setas */
.testemunhos-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: var(--cor-branco); cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicao-rapida);
}
.testemunhos-seta:hover { background: var(--cor-acento); border-color: var(--cor-acento); }
.testemunhos-seta--prev { left: -24px; }
.testemunhos-seta--next { right: -24px; }

/* Dots */
.testemunhos-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.testemunhos-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.22); border: none;
  transition: var(--transicao-rapida);
}
.testemunhos-dot:hover { background: rgba(255,255,255,0.45); }
.testemunhos-dot.is-active { background: var(--cor-acento); transform: scale(1.3); }

.testemunho-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 38px 32px;
  transition: var(--transicao);
  display: flex;
  flex-direction: column;
}

.testemunho-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(212,120,26,0.3); }

.testemunho-estrelas { display: flex; gap: 4px; margin-bottom: 1.4rem; color: var(--cor-acento); }

.testemunho-texto { font-family: var(--fonte-display); font-size: 1.15rem; font-style: italic; color: rgba(254,254,254,0.82); line-height: 1.75; margin-bottom: 1rem; }

/* Botão "Ler tudo" no card */
.testemunho-ler-tudo {
  align-self: flex-start;
  margin-bottom: 1.6rem;
  padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--fonte-nav);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cor-acento);
  display: inline-flex; align-items: center; gap: 7px;
  transition: var(--transicao-rapida);
}
.testemunho-ler-tudo svg { transition: transform 0.25s ease; }
.testemunho-ler-tudo:hover { color: var(--cor-acento-cl); }
.testemunho-ler-tudo:hover svg { transform: translateX(4px); }

.testemunho-autor { display: flex; align-items: center; gap: 14px; margin-top: auto; }

.testemunho-iniciais {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cor-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  color: var(--cor-branco);
  flex-shrink: 0;
}

.testemunho-nome { font-family: var(--fonte-nav); font-size: 0.82rem; font-weight: 600; color: var(--cor-branco); letter-spacing: 0.06em; }
.testemunho-detalhe { font-size: 0.76rem; color: rgba(254,254,254,0.38); margin-top: 2px; }

/* =========================================================
   CTA
   ========================================================= */
.cta-consulta {
  padding: var(--padding-secao);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 500px;
}

.cta-fundo { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; }

.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15,15,26,0.92) 0%, rgba(26,26,46,0.7) 100%);
}

.cta-conteudo { position: relative; z-index: 2; max-width: 660px; }
.cta-conteudo h2 { color: var(--cor-branco); margin-bottom: 1rem; }
.cta-conteudo p { color: rgba(254,254,254,0.72); font-size: 1.1rem; margin-bottom: 2rem; }
.cta-botoes { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   MINI CONTACTO
   ========================================================= */
.mini-contacto { padding: 54px 0; background: var(--cor-destaque); border-top: 1px solid var(--cor-areia-escura); }

.mini-contacto-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 720px; margin: 0 auto; }

.contacto-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 22px;
  border-right: 1px solid var(--cor-areia-escura);
  transition: var(--transicao);
}

.contacto-item:last-child { border-right: none; }
.contacto-item:hover { background: rgba(255,255,255,0.5); }

.contacto-icone { width: 38px; height: 38px; color: var(--cor-acento); margin-bottom: 0.8rem; }
.contacto-label { font-family: var(--fonte-nav); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cor-texto-cl); margin-bottom: 0.3rem; }
.contacto-valor { font-family: var(--fonte-display); font-size: 1.05rem; color: var(--cor-escuro); }

/* =========================================================
   FOOTER
   ========================================================= */
#site-footer { background: var(--cor-escuro); color: rgba(254,254,254,0.5); padding: 80px 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(130px, 0.4fr) minmax(560px, 1.7fr);
  gap: 56px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-logo .logo-nome { font-size: 1.7rem; }
.footer-logo .logo-marca { width: 26px; height: 52px; }
.footer-logo .logo-subtitulo { font-size: 0.68rem; }
.footer-logo p { color: rgba(254,254,254,0.42); font-size: 1rem; line-height: 1.7; margin-top: 1rem; }

.footer-titulo { font-family: var(--fonte-nav); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cor-acento); margin-bottom: 1.4rem; }

.footer-links li { margin-bottom: 0.7rem; }
.footer-links a { color: rgba(254,254,254,0.42); font-size: 1rem; transition: var(--transicao-rapida); }
.footer-links a:hover { color: var(--cor-acento); padding-left: 6px; }

.footer-cta { margin-top: 1.6rem; font-size: 0.86rem; }

.footer-clinicas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.footer-clinica + .footer-clinica { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 1.5rem; }
.footer-clinica-nome { color: rgba(254,254,254,0.85); font-family: var(--fonte-display); font-size: 1.16rem; margin-bottom: 0.15rem; }
.footer-clinica-sub { color: var(--cor-acento); font-family: var(--fonte-nav); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.55rem; }
.footer-clinica-morada { color: rgba(254,254,254,0.42); font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.5rem; }
.footer-clinica-tel { color: rgba(254,254,254,0.42); font-size: 0.95rem; line-height: 1.9; }
.footer-clinica-tel a { color: rgba(254,254,254,0.62); white-space: nowrap; transition: var(--transicao-rapida); }
.footer-clinica-tel a:hover { color: var(--cor-acento); }

.footer-contactos li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0.9rem; font-size: 1rem; color: rgba(254,254,254,0.42); line-height: 1.5; }
.footer-contactos svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--cor-acento); margin-top: 2px; }

/* CTA no rodapé (substitui o antigo bloco Contacto) */
.footer-cta-texto { font-size: 1rem; color: rgba(254,254,254,0.42); line-height: 1.6; margin-bottom: 1.4rem; }
.footer-cta-btn { display: inline-block; }

.footer-social { display: flex; gap: 10px; margin-top: 1.4rem; }

.social-link { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(254,254,254,0.42); transition: var(--transicao); }
.social-link:hover { background: var(--cor-acento); border-color: var(--cor-acento); color: var(--cor-branco); }
.social-link svg { width: 15px; height: 15px; }

.footer-fundo { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-copyright { font-size: 0.88rem; color: rgba(254,254,254,0.26); }
.footer-creditos { font-size: 0.88rem; color: rgba(254,254,254,0.26); }
.footer-creditos a { color: var(--cor-acento); opacity: 0.7; }
.footer-creditos a:hover { opacity: 1; }

/* Só o título abre e fecha o FAQ. A resposta mantém cursor de leitura e o
   link final continua a ser um alvo separado e visualmente reconhecível. */
.faq-linha { border-bottom: 1px solid var(--cor-areia-escura); padding: 22px 0; }
.faq-item { cursor: default; }
.faq-pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--cor-escuro);
  font-family: var(--fonte-display);
  font-size: 1.2rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta:hover { color: var(--cor-acento); }
.faq-seta {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-acento);
  transition: transform var(--transicao-rapida);
}
.faq-item[open] .faq-seta { transform: rotate(180deg); }
.faq-resposta { margin-top: 12px; padding-left: 0; color: var(--cor-texto-cl); font-size: 1rem; line-height: 1.8; cursor: text; }
.faq-resposta a { color: var(--cor-acento); border-bottom: 1px solid currentColor; cursor: pointer; }

/* =========================================================
   PÁGINAS INTERNAS BANNER
   ========================================================= */
.page-banner { position: relative; height: 460px; display: flex; align-items: flex-end; overflow: hidden; }

.page-banner-fundo { position: absolute; inset: 0; background-size: cover; background-position: center; }

.page-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,15,26,0.5) 0%, rgba(15,15,26,0.82) 100%);
}

/* Item flex sem width encolhe até ao conteúdo e o `margin: 0 auto` do .container
   centra-o, o que fazia o título do banner flutuar a meio (evidente num título
   curto como "Artigos"). Com width 100% o .container comporta-se como no resto
   da página e o texto assenta na mesma grelha do conteúdo abaixo. */
.page-banner-conteudo { position: relative; z-index: 2; width: 100%; padding: 0 40px 60px; }
.page-banner-conteudo .etiqueta { color: var(--cor-acento); }
.page-banner-conteudo h1 { color: var(--cor-branco); text-shadow: 0 2px 20px rgba(0,0,0,0.4); }

/* =========================================================
   SOBRE NOS
   ========================================================= */
.sobre-intro { padding: var(--padding-secao); background: var(--cor-creme); }

.sobre-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.sobre-imagem-stack { position: relative; height: 620px; }

.sobre-img-principal { position: absolute; top: 0; left: 0; width: 78%; height: 82%; object-fit: cover; object-position: center top; box-shadow: var(--sombra-forte); }
.sobre-img-secundaria { position: absolute; bottom: 0; right: 0; width: 55%; height: 52%; object-fit: cover; border: 8px solid var(--cor-creme); box-shadow: var(--sombra-media); }

.sobre-decor { position: absolute; top: -16px; right: -16px; width: 100px; height: 100px; border: 2px solid var(--cor-acento); opacity: 0.25; }

/* Homeopatia: só a imagem grande, sem a secundária (pedido do Gabriel).
   O Dr. Gabriel (#sobre) voltou a ter a secundária em 05/08, agora com foto real
   do escritório, por isso a principal volta aos 78%/82% e deixa o canto livre. */
#homeopatia .sobre-img-principal { width: 100%; height: 100%; }

.sobre-texto h2 { margin-bottom: 1.2rem; }
.sobre-texto p { line-height: 1.85; margin-bottom: 1.2rem; }

.sobre-assinatura { font-family: var(--fonte-display); font-size: 1.8rem; font-style: italic; color: var(--cor-principal); margin-top: 2rem; border-top: 1px solid var(--cor-areia-escura); padding-top: 1.4rem; }

.historia { padding: var(--padding-secao); background: var(--cor-areia); }

.timeline { position: relative; max-width: 820px; margin: 60px auto 0; }

.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--cor-acento), transparent); transform: translateX(-50%); }

.timeline-item { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; margin-bottom: 50px; }

.timeline-item:nth-child(odd) .timeline-conteudo { grid-column: 1; text-align: right; padding-right: 40px; }
.timeline-item:nth-child(odd) .timeline-vazio { grid-column: 3; }
.timeline-item:nth-child(even) .timeline-vazio { grid-column: 1; }
.timeline-item:nth-child(even) .timeline-conteudo { grid-column: 3; text-align: left; padding-left: 40px; }

.timeline-ponto { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.timeline-circulo { width: 12px; height: 12px; background: var(--cor-acento); border-radius: 50%; border: 3px solid var(--cor-areia); box-shadow: 0 0 0 1px var(--cor-acento); margin-top: 8px; }

.timeline-ano { font-family: var(--fonte-display); font-size: 1.3rem; color: var(--cor-principal); font-weight: 600; }

.timeline-conteudo h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.timeline-conteudo p { font-size: 0.95rem; line-height: 1.7; }

/* Etiqueta de fase (ex: "Formação Inicial"), mais pequena e com menos
   espaço à volta do que o .etiqueta normal, que é pensado para títulos
   de secção grandes, não para marcos individuais da timeline. */
.timeline-fase { font-size: 0.6rem; margin-bottom: 0.4rem; display: block; }

/* Foto opcional dentro de um marco da timeline */
.timeline-img { display: block; width: 100%; max-width: 360px; height: 160px; object-fit: cover; object-position: center; margin-top: 1.1rem; border-radius: var(--raio-grande); box-shadow: var(--sombra-suave); }
/* Marcos ímpares estão alinhados à direita: encosta a foto à direita */
.timeline-item:nth-child(odd) .timeline-img { margin-left: auto; }

.valores { padding: var(--padding-secao); background: var(--cor-creme); }

.valores-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 50px; }

.valor-item { text-align: center; padding: 44px 26px; border: 1px solid var(--cor-areia-escura); transition: var(--transicao); }
.valor-item:hover { border-color: var(--cor-acento); box-shadow: var(--sombra-suave); }
.valor-icone { width: 48px; height: 48px; color: var(--cor-acento); margin: 0 auto 1.4rem; }
.valor-item h3 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.valor-item p { font-size: 0.92rem; line-height: 1.7; }

/* =========================================================
   CONTACTOS
   ========================================================= */
.contactos-info { padding: var(--padding-secao); background: var(--cor-creme); }

/* Sem formulário: só a coluna "Tem uma questão", centrada e mais estreita. */
.contactos-grid { display: grid; grid-template-columns: 1fr; justify-items: center; }
.contactos-dados { max-width: 620px; }

.contactos-dados h2 { margin-bottom: 0.8rem; }
.contactos-dados > p { margin-bottom: 2.5rem; }

.contacto-bloco { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--cor-areia-escura); }
.contacto-bloco:first-of-type { border-top: 1px solid var(--cor-areia-escura); }

.contacto-bloco-icone { width: 44px; height: 44px; background: var(--cor-areia); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cor-acento); }
.contacto-bloco-icone svg { width: 20px; height: 20px; }

.contacto-bloco-info h4 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.contacto-bloco-info p { font-size: 0.93rem; margin: 0; line-height: 1.6; }
.contacto-bloco-info a:hover { color: var(--cor-acento); }

/* =========================================================
   SCROLL ANIMATIONS
   ========================================================= */
/* Motion calmo e lento (feedback Jaya 7.2): entradas suaves, curva ease-out longa */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-esquerda { opacity: 0; transform: translateX(-32px); transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal-esquerda.visible { opacity: 1; transform: translateX(0); }

.reveal-direita { opacity: 0; transform: translateX(32px); transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal-direita.visible { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }

/* Subtítulo da secção de testemunhos (muitos milhares de pacientes) */
.testemunhos-intro { max-width: 640px; margin: 1.4rem auto 0; color: var(--cor-texto-suave, #6b6b6b); font-size: 1.05rem; line-height: 1.7; }

#nav-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1200px) {
  :root { --padding-secao: 88px 0; }
  .footer-grid { grid-template-columns: 1.2fr 0.8fr; gap: 40px; }
  .footer-grid > div:nth-child(3) { grid-column: 1 / -1; }
  .servicos-grid { grid-template-columns: repeat(2, 1fr); }
  .valores-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .container { padding: 0 24px; }
  .filosofia-grid, .abordagem-grid, .percurso-grid, .sobre-intro-grid, .contactos-grid { grid-template-columns: 1fr; gap: 48px; }
  .filosofia-imagem-container { justify-self: center; }
  .pilares-grid { grid-template-columns: 1fr; }
  .pilar-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .testemunhos-slide { grid-template-columns: 1fr; }
  .testemunhos-seta--prev { left: 4px; }
  .testemunhos-seta--next { right: 4px; }
  .mini-contacto-grid { grid-template-columns: repeat(2, 1fr); }
  .sobre-imagem-stack { height: 420px; }
  .sobre-img-secundaria { display: none; }
  .sobre-img-principal { width: 100%; height: 100%; }
  .timeline::before { left: 28px; }
  .timeline-item { grid-template-columns: 56px 1fr; }
  .timeline-item:nth-child(odd) .timeline-conteudo, .timeline-item:nth-child(even) .timeline-conteudo { grid-column: 2; text-align: left; padding-left: 20px; padding-right: 0; }
  .timeline-item:nth-child(odd) .timeline-vazio, .timeline-item:nth-child(even) .timeline-vazio { display: none; }
  .timeline-item:nth-child(odd) .timeline-img { margin-left: 0; }
  .timeline-img { max-width: 100%; height: 150px; }
  .timeline-ponto { grid-column: 1; align-items: flex-start; padding-left: 22px; }
}

@media (max-width: 768px) {
  :root { --padding-secao: 68px 0; }
  .nav-toggle { display: flex; }
  /* Alvo de toque: o botão de texto "Ler mais" só tinha 14px de altura
     clicável. Aumenta a área sem mudar o espaçamento visual à volta
     (padding compensado com margin-top negativa; sem margin-bottom prévia
     a preservar, ao contrário do "Ler tudo" dos testemunhos). */
  .habito-ler-mais {
    padding: 12px 0;
    margin-top: -12px;
  }
  .nav-principal {
    position: fixed;
    top: 0; right: -100%;
    width: 80%; max-width: 340px;
    height: 100vh;
    background: var(--cor-escuro);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 36px;
    gap: 8px;
    transition: right 0.4s ease;
    box-shadow: -8px 0 40px rgba(0,0,0,0.4);
  }
  .nav-principal.aberto { right: 0; }
  .nav-principal a { font-size: 1rem; padding: 12px 0; color: rgba(254,254,254,0.75); }
  .nav-marcar { margin-left: 0; margin-top: 18px; }
  .hero-conteudo { padding: 0 24px; }
  .servicos-grid { grid-template-columns: 1fr; }
  .valores-grid { grid-template-columns: 1fr; }
  .mini-contacto-grid { grid-template-columns: 1fr; }
  .contacto-item { border-right: none; border-bottom: 1px solid var(--cor-areia-escura); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid > div:nth-child(3) { grid-column: auto; }
  .footer-clinicas { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-clinica + .footer-clinica { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-left: 0; padding-top: 1.5rem; }
  .contacto-form-wrapper { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .abordagem-stats { grid-template-columns: 1fr; gap: 14px; }
  .cta-fundo { background-attachment: scroll; }
  .page-banner { height: 340px; }
  .page-banner-conteudo h1 { font-size: 2rem; }
  /* O banner da Marcar Consulta é uma foto larga do escritório: ao estreitar para
     mobile, o centro cai no braço dele e corta-lhe a cara. Puxar para a esquerda/topo. */
  .page-template-page-contactos .page-banner-fundo { background-position: 30% 22%; }
  .hero.hero-e h1 { font-size: clamp(2.35rem, 10vw, 3.25rem); }
  .filosofia-texto h2 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .mapas-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-fundo { flex-direction: column; text-align: center; }
  .filosofia-badge { left: 0; bottom: -20px; }
}

@media (max-width: 480px) {
  .filosofia-img-principal { height: 360px; }
  .hero-botoes { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}

/* =========================================================
   MARCAÇÃO, 3 pipelines (Online / Lisboa / Cascais)
   ========================================================= */
/* Menos espaço vazio antes do heading do que as outras secções (pedido:
   "padding em demasia"). */
.marcacao { padding: var(--padding-secao); padding-top: 56px; background: var(--cor-areia); }

/* Mapa compacto dentro do card, por cima da morada (substitui os widgets
   de mapa separados que existiam no fundo da página). */
.marcacao-mapa { position: relative; height: 140px; margin: -44px -34px 1.4rem; overflow: hidden; }
.marcacao-mapa iframe { width: 100%; height: 100%; border: none; filter: sepia(15%) saturate(80%); display: block; }

.marcacao-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 10px;
}

.marcacao-card {
  background: var(--cor-branco);
  padding: 44px 34px;
  border: 1px solid var(--cor-areia-escura);
  transition: var(--transicao);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.marcacao-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.marcacao-card:hover { box-shadow: var(--sombra-media); transform: translateY(-5px); border-color: transparent; }
.marcacao-card:hover::before { transform: scaleX(1); }

.marcacao-icone { width: 46px; height: 46px; color: var(--cor-acento); margin-bottom: 1.3rem; }
.marcacao-card h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }

.marcacao-detalhe {
  font-family: var(--fonte-nav);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: 1.4rem;
}

.marcacao-linhas { flex: 1; margin-bottom: 1.8rem; }
.marcacao-linhas p { font-size: 0.95rem; line-height: 1.7; color: var(--cor-texto-cl); margin-bottom: 0.9rem; }
.marcacao-linhas p:last-child { margin-bottom: 0; }
.marcacao-linhas a { color: var(--cor-texto); border-bottom: 1px solid var(--cor-areia-escura); transition: var(--transicao-rapida); }
.marcacao-linhas a:hover { color: var(--cor-acento); border-color: var(--cor-acento); }

.marcacao-cta { width: 100%; text-align: center; margin-top: auto; }

@media (max-width: 900px) {
  .marcacao-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MODAL "LER TUDO" (testemunho completo)
   ========================================================= */
.testemunho-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.testemunho-modal[hidden] { display: none; }

.testemunho-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,20,0.78);
  backdrop-filter: blur(3px);
  animation: testemunhoFade 0.25s ease;
}

.testemunho-modal-caixa {
  position: relative; z-index: 1;
  width: 100%; max-width: 660px;
  max-height: 85vh; overflow-y: auto;
  background: var(--cor-principal);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 56px 48px 44px;
  animation: testemunhoSobe 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testemunho-modal-fechar {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: var(--cor-branco); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicao-rapida);
}
.testemunho-modal-fechar:hover { background: var(--cor-acento); border-color: var(--cor-acento); }

.testemunho-modal-estrelas { display: flex; gap: 4px; margin-bottom: 1.6rem; color: var(--cor-acento); }
.testemunho-modal-texto {
  font-family: var(--fonte-display);
  font-size: 1.3rem; font-style: italic; line-height: 1.85;
  color: rgba(254,254,254,0.9);
  margin-bottom: 2rem;
}

@keyframes testemunhoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes testemunhoSobe { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .testemunho-modal-caixa { padding: 48px 26px 32px; }
  .testemunho-modal-texto { font-size: 1.12rem; }
}

/* =========================================================
   MODAL "LER MAIS" (hábito pro saúde integral)
   ========================================================= */
.habito-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.habito-modal[hidden] { display: none; }

.habito-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(15,15,26,0.6);
  backdrop-filter: blur(3px);
  animation: testemunhoFade 0.25s ease;
}

.habito-modal-caixa {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px;
  max-height: 85vh; overflow-y: auto;
  background: var(--cor-branco);
  border: 1px solid var(--cor-areia-escura);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-forte);
  padding: 56px 48px 44px;
  animation: testemunhoSobe 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.habito-modal-fechar {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cor-areia); border: 1px solid var(--cor-areia-escura);
  color: var(--cor-texto); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicao-rapida);
}
.habito-modal-fechar:hover { background: var(--cor-acento); border-color: var(--cor-acento); color: var(--cor-branco); }

.habito-modal-icone { width: 40px; height: 40px; color: var(--cor-acento); margin-bottom: 1rem; }
.habito-modal-titulo { font-size: 1.6rem; margin-bottom: 1rem; padding-right: 40px; }

.habito-modal-intro {
  font-size: 1.08rem; line-height: 1.7;
  color: var(--cor-texto);
  margin-bottom: 1.4rem;
}

.habito-modal-bullets {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.habito-modal-bullets:empty { display: none; margin: 0; }
.habito-modal-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--cor-texto-cl);
}
.habito-modal-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cor-acento);
}

.habito-modal-texto {
  font-size: 0.96rem; line-height: 1.85;
  color: var(--cor-texto-cl);
  padding-top: 1.4rem;
  border-top: 1px solid var(--cor-areia-escura);
}

.habito-modal-blog-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.8rem;
  padding: 14px 18px;
  background: var(--cor-areia);
  border: 1px dashed var(--cor-areia-escura);
  border-radius: var(--raio);
  font-family: var(--fonte-nav);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--cor-texto-cl);
}
.habito-modal-blog-placeholder svg { flex-shrink: 0; color: var(--cor-acento); }

@media (max-width: 600px) {
  .habito-modal-caixa { padding: 48px 26px 32px; }
  .habito-modal-titulo { font-size: 1.35rem; }
}

/* =========================================================
   BLOG / ARTIGOS
   ========================================================= */

/* --- arquivo: introdução --- */
.artigos-intro { padding: 70px 0 0; background: var(--cor-creme); }
.artigos-intro-texto { max-width: 900px; }
.artigos-lead { font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 300; line-height: 1.6; color: var(--cor-texto); }

/* --- arquivo: grelha de cards --- */
.artigos-lista { padding: 46px 0 var(--padding-secao); background: var(--cor-creme); }
.artigos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.artigo-card {
  background: var(--cor-branco);
  border: 1px solid var(--cor-areia-escura);
  transition: var(--transicao);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.artigo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 2;
}

.artigo-card:hover { box-shadow: var(--sombra-media); transform: translateY(-5px); border-color: transparent; }
.artigo-card:hover::before { transform: scaleX(1); }

.artigo-card-media { display: block; overflow: hidden; background: var(--cor-areia); aspect-ratio: 3 / 2; }
.artigo-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.artigo-card:hover .artigo-card-media img { transform: scale(1.04); }

.artigo-card-corpo { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.artigo-card-serie { color: var(--cor-acento); margin-bottom: 0.7rem; }
.artigo-card h3 { font-size: 1.42rem; line-height: 1.28; margin-bottom: 0.7rem; }
.artigo-card h3 a { color: var(--cor-escuro); transition: var(--transicao-rapida); }
.artigo-card:hover h3 a { color: var(--cor-acento); }
.artigo-card-corpo > p { font-size: 0.94rem; line-height: 1.72; color: var(--cor-texto-cl); margin-bottom: 1.3rem; }

.artigo-card-meta {
  margin-top: auto;
  font-family: var(--fonte-nav);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-cl);
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-areia-escura);
}

.artigo-card-meta > * { white-space: nowrap; }

.artigos-vazio { text-align: center; color: var(--cor-texto-cl); padding: 60px 0; }

/* --- arquivo: paginação --- */
.artigos-paginacao { margin-top: 56px; }
.artigos-paginacao .nav-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.artigos-paginacao .page-numbers {
  font-family: var(--fonte-nav);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 11px 17px;
  border: 1px solid var(--cor-areia-escura);
  background: var(--cor-branco);
  color: var(--cor-texto);
  transition: var(--transicao-rapida);
}
.artigos-paginacao .page-numbers:hover,
.artigos-paginacao .page-numbers.current { background: var(--cor-acento); border-color: var(--cor-acento); color: var(--cor-branco); }
.artigos-paginacao .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- artigo: cabeçalho --- */
.artigo-hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: var(--cor-principal); }
.artigo-hero-fundo { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* O corpo do artigo é uma coluna de leitura de 820px centrada (.artigo-corpo
   .container), por isso o cabeçalho tem de assentar nessa mesma coluna, não na
   margem larga das outras páginas: senão o título e o texto não alinham. */
.artigo-hero-conteudo { position: relative; z-index: 2; width: 100%; max-width: 820px; padding: 130px 40px 60px; }
.artigo-hero-conteudo h1 { color: var(--cor-branco); font-size: 3rem; line-height: 1.15; text-shadow: 0 2px 20px rgba(0,0,0,0.4); margin-bottom: 1.1rem; }
.artigo-hero-serie { display: inline-block; color: var(--cor-acento-cl); margin-bottom: 1rem; transition: var(--transicao-rapida); }
.artigo-hero-serie:hover { color: var(--cor-branco); }
.artigo-hero-meta {
  font-family: var(--fonte-nav);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(254,254,254,0.68);
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

/* --- artigo: corpo --- */
.artigo-corpo { padding: 78px 0 var(--padding-secao); background: var(--cor-creme); }
.artigo-corpo .container { max-width: 820px; }

.artigo-lead {
  font-family: var(--fonte-display);
  font-size: 1.42rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.62;
  color: var(--cor-texto);
  padding-bottom: 2rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--cor-areia-escura);
}

.artigo-texto { font-size: 1.08rem; line-height: 1.9; color: var(--cor-texto); }
.artigo-texto p { margin-bottom: 1.5rem; }
.artigo-texto h2 {
  font-family: var(--fonte-display);
  font-size: 1.95rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--cor-escuro);
  margin: 3.2rem 0 1.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cor-areia-escura);
}
.artigo-texto h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.artigo-texto a { color: var(--cor-acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.artigo-texto a:hover { color: var(--cor-principal); }
.artigo-texto strong { font-weight: 700; color: var(--cor-escuro); }

.artigo-texto p.destaque {
  font-family: var(--fonte-display);
  font-size: 1.32rem;
  line-height: 1.55;
  color: var(--cor-escuro);
  padding: 1.1rem 0 1.1rem 1.6rem;
  border-left: 3px solid var(--cor-acento);
  margin: 2rem 0;
}
.artigo-texto p.destaque strong { font-weight: 500; }

.artigo-texto ul { margin: 0 0 1.6rem 0; padding: 0; list-style: none; }
.artigo-texto ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.7rem; }
.artigo-texto ul li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 7px; height: 1px; background: var(--cor-acento); }

.artigo-texto blockquote {
  margin: 2.4rem 0;
  padding: 1.6rem 1.9rem;
  background: var(--cor-destaque);
  border-left: 3px solid var(--cor-acento);
}
.artigo-texto blockquote p { font-family: var(--fonte-display); font-size: 1.24rem; font-style: italic; line-height: 1.6; margin: 0; color: var(--cor-escuro); }

.artigo-figura { margin: 2.8rem 0; }
.artigo-figura img { width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block; border: 1px solid var(--cor-areia-escura); }
.artigo-figura img[src$='.svg'] { max-height: none; object-fit: contain; background: var(--cor-creme); }
.artigo-figura figcaption {
  font-family: var(--fonte-nav);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cor-texto-cl);
  margin-top: 0.7rem;
}

.artigo-rodape { margin-top: 3.4rem; padding-top: 1.8rem; border-top: 1px solid var(--cor-areia-escura); }
.artigo-voltar {
  font-family: var(--fonte-nav);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-acento);
  transition: var(--transicao-rapida);
}
.artigo-voltar::before { content: '\2190'; margin-right: 8px; }
.artigo-voltar:hover { color: var(--cor-principal); }

/* --- artigo: relacionados --- */
.artigos-relacionados { padding: var(--padding-secao); background: var(--cor-areia); }
.artigos-relacionados h2 { font-size: 2.1rem; margin-bottom: 0.4rem; }
.artigos-grid-relacionados { margin-top: 44px; }

/* --- responsivo --- */
@media (max-width: 1024px) {
  .artigos-grid { grid-template-columns: repeat(2, 1fr); }
  .artigo-hero-conteudo h1 { font-size: 2.4rem; }
}

@media (max-width: 640px) {
  .artigos-grid { grid-template-columns: 1fr; }
  .artigo-hero { min-height: 380px; }
  .artigo-hero-conteudo { padding: 110px 0 44px; }
  .artigo-hero-conteudo h1 { font-size: 1.95rem; }
  .artigos-lead { font-size: 1.25rem; }
  .artigo-lead { font-size: 1.2rem; }
  .artigo-texto { font-size: 1.02rem; }
  .artigo-texto h2 { font-size: 1.6rem; margin-top: 2.4rem; }
  .artigo-texto p.destaque { font-size: 1.15rem; }
}

/* Título original do ensaio, mostrado por baixo do H1 modernizado */
.artigo-hero-subtitulo {
  font-family: var(--fonte-display);
  font-size: 1.24rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(254,254,254,0.78);
  margin: -0.5rem 0 1.1rem;
}

/* Linha de fecho com o convite à consulta (texto nosso, não do ensaio) */
.artigo-texto .artigo-fecho,
p.artigo-fecho {
  font-family: var(--fonte-display);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--cor-texto);
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--cor-areia-escura);
}

@media (max-width: 640px) {
  .artigo-hero-subtitulo { font-size: 1.05rem; }
}