/* =====================================================
  STYLE.CSS — Site Dr. Leonel Generoso
  
  ÍNDICE:
  1. Variáveis de cor e fontes (CSS Custom Properties)
  2. Reset e configurações globais
  3. Header e navegação
  4. Hero (página inicial)
  5. Seções e cards
  6. Página Hero (páginas internas)
  7. Breadcrumb
  8. Sobre
  9. Tratamentos
  10. Clínicas
  11. Contato
  12. Footer
  13. Botão WhatsApp flutuante
  14. Animação fade-in
  15. Responsividade (mobile)
===================================================== */


/* =====================================================
  1. VARIÁVEIS CSS (Custom Properties)
  
  Defina aqui as cores e fontes principais.
  Para trocar a cor do site inteiro, basta mudar aqui.
  
  Uso: color: var(--azul-escuro);
===================================================== */

:root {
  /* ── TEMA ESCURO ────────────────────────────────────────
     Inspirado em design premium de saúde/performance.
     Para voltar ao tema claro, basta restaurar os valores
     comentados à direita de cada variável.
  ──────────────────────────────────────────────────────── */

  /* Cores principais */
  --titulo:         #d9d9d9;           /* títulos e textos de destaque */
  --subtitulo:      #d9d9d9;           /* subtítulos e textos médios */
  --destaque:       #d9d9d9;           /* botões e links */
  --destaque-hover: #b0b0b0;           /* hover de botões e links */
  --texto:          #d9d9d9;           /* texto geral do corpo */
  --texto-claro:    #a0a0a0;           /* texto secundário e legendas */
  --fundo:          #000000;           /* fundo geral — preto puro */
  --fundo-claro:    #0d0d0d;           /* fundo alternativo das seções */
  --card:           #d9d9d9;           /* fundo dos cards e caixas */
  --sombra:         rgba(0, 0, 0, 0.5);
  --borda:          #222222;           /* bordas sutis entre elementos */
  --azul:           #5ca3ff;           /* azul de destaque — ícones e acentos */

  /* Aliases para compatibilidade com classes existentes */
  --azul-escuro:  var(--titulo);
  --azul-medio:   var(--subtitulo);
  --verde:        var(--destaque);
  --verde-hover:  var(--destaque-hover);
  --branco:       var(--card);

  /* Fontes */
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-corpo:  'Open Sans', sans-serif;

  /* Espaçamentos padrão */
  --raio:        12px;
  --transicao:   0.3s ease;
}


/* =====================================================
  2. RESET E CONFIGURAÇÕES GLOBAIS
  
  Remove estilos padrão do navegador que variam
  entre Chrome, Firefox, Safari etc.
===================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* box-sizing: border-box → padding e border NÃO aumentam o tamanho do elemento */
}

html {
  scroll-behavior: smooth;
  /* scroll-behavior: smooth → rolagem suave ao clicar em links âncora (#secao) */
}

body {
  font-family: var(--fonte-corpo);
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.7;
  font-size: 16px;
}

/* Remove estilo padrão das listas */
ul, ol {
  list-style: none;
}

/* Imagens responsivas por padrão */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove sublinhado padrão dos links */
a {
  text-decoration: none;
  color: inherit;
}

/* Botões herdam a fonte do site */
button, input, textarea, select {
  font-family: var(--fonte-corpo);
}

/* Container central: limita a largura e centraliza o conteúdo */
.container {
  width: 90%;
  max-width: 1800px;
  margin: 0 auto;
}


/* =====================================================
  3. HEADER E NAVEGAÇÃO
===================================================== */

header {
  background: var(--branco);
  box-shadow: 0 2px 16px var(--sombra);
  position: sticky;   /* Fica fixo no topo ao rolar a página */
  top: 0;
  z-index: 1000;      /* Fica acima de todo o conteúdo */
}

/* Barra de navegação: logo à esquerda, menu à direita */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

/* Logo: nome do médico */
.logo {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  color: var(--azul-escuro);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

/* Subtítulo abaixo do nome no logo */
.logo span {
  font-family: var(--fonte-corpo);
  font-size: 11px;
  font-weight: 400;
  color: var(--verde);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Links do menu principal */
nav#menu a {
  color: var(--texto);
  font-weight: 500;
  font-size: 14.5px;
  margin-left: 28px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;  /* Borda invisível — aparece no hover */
  transition: color var(--transicao), border-color var(--transicao);
}

/* Hover e página ativa no menu */
nav#menu a:hover,
nav#menu a[aria-current="page"] {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

/* Botão hamburguer (menu mobile) — oculto no desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--azul-escuro);
  padding: 4px;
}


/* =====================================================
  4. HERO — Seção principal da página inicial
===================================================== */

.hero {
  padding: 90px 0 80px;
  background: linear-gradient(135deg, #eaf4fb 0%, #f0f8f4 100%);
  /* linear-gradient: fundo degradê suave entre azul e verde claro */
}

/* Layout em duas colunas: texto | imagem */
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 60px;
}

/* Coluna de texto — estilos herdados do .hero-grid */

/* Título principal: o mais importante para SEO */
.hero h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 4vw, 28px);
  /* clamp(mínimo, ideal, máximo) → tamanho fluido que se adapta à tela */
  line-height: 1.2;
  color: var(--azul-escuro);
  margin-bottom: 16px;
}

/* Parágrafo de apoio */
.hero-sub {
  font-size: 17px;
  color: var(--texto-claro);
  margin-bottom: 28px;
  max-width: 480px;
}

/* Área dos botões CTA */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* Selos de confiança abaixo dos botões */
.hero-badges {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-badges span {
  font-size: 13px;
  color: var(--texto-claro);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hero-badges i {
  color: var(--verde);
}

/* Coluna da imagem */
.hero-img img {
  border-radius: var(--raio);
  box-shadow: 0 20px 50px rgba(10, 61, 98, 0.15);
  width: 100%;
  object-fit: cover;
}


/* =====================================================
  5. BOTÕES
===================================================== */

/* Botão principal (verde cheio) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* centraliza ícone + texto dentro do botão */
  gap: 8px;
  background: var(--verde);
  color: var(--branco);
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  transition: background var(--transicao), transform var(--transicao);
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--verde-hover);
  transform: translateY(-2px);  /* Sobe 2px no hover */
}

/* Botão grande para CTA final */
.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

/* Botão secundário (contorno verde) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* centraliza ícone + texto dentro do botão */
  gap: 8px;
  border: 2px solid var(--verde);
  color: var(--verde);
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  transition: all var(--transicao);
}

.btn-outline:hover {
  background: var(--verde);
  color: var(--branco);
}


/* =====================================================
  SEÇÕES GENÉRICAS
===================================================== */

/* Espaçamento padrão de todas as seções */
.section {
  padding: 80px 0;
}

/* Fundo alternativo para alternar o visual entre seções */
.bg-light {
  background: var(--fundo-claro);
}

/* Cabeçalho da seção: título + subtítulo centralizados */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(26px, 3vw, 36px);
  color: var(--azul-escuro);
  margin-bottom: 10px;
}

.section-header p {
  font-size: 16px;
  color: var(--texto-claro);
  max-width: 500px;
  margin: 0 auto;
}


/* =====================================================
  CARDS GENÉRICOS
===================================================== */

/* Grupo de cards */
.cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

/* Card individual */
.card {
  background: var(--branco);
  padding: 36px 30px;
  border-radius: var(--raio);
  width: 300px;
  box-shadow: 0 8px 24px var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* Ícone no card */
.card-icon {
  width: 52px;
  height: 52px;
  background: #e8f5ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--verde);
  margin-bottom: 16px;
}

.card h3 {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  color: var(--azul-escuro);
  margin-bottom: 10px;
}

.card p {
  color: var(--texto-claro);
  font-size: 14.5px;
  flex: 1;
}

/* Link no final do card */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--verde);
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px;
  transition: gap var(--transicao);
}

.card-link:hover {
  gap: 8px;
}

/* Card de depoimento */
.card-testimonial blockquote p {
  font-size: 15px;
  color: var(--texto);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 0;
}

.card-testimonial figcaption {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--verde);
}


/* =====================================================
  SEÇÃO CTA FINAL
===================================================== */

.cta-section {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul-medio));
  text-align: center;
  color: var(--branco);
}

.cta-section h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 12px;
  color: var(--branco);
}

.cta-section p {
  font-size: 16px;
  margin-bottom: 28px;
  opacity: 0.88;
}


/* =====================================================
  6. PAGE HERO — Cabeçalho das páginas internas
===================================================== */

.page-hero {
  background: linear-gradient(135deg, var(--azul-escuro) 0%, var(--azul-medio) 100%);
  color: var(--branco);
  padding: 60px 0 50px;
}

.page-hero h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--branco);
  margin-bottom: 8px;
}

.page-hero p {
  font-size: 16px;
  opacity: 0.85;
}


/* =====================================================
  7. BREADCRUMB — Trilha de navegação
===================================================== */

.breadcrumb {
  display: flex;
  gap: 4px;
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--branco);
  transition: opacity var(--transicao);
}

.breadcrumb a:hover {
  opacity: 1;
}

.breadcrumb span {
  color: var(--branco);
}


/* =====================================================
  8. SOBRE
===================================================== */

/* Grid: foto à esquerda, texto à direita */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.about-img img {
  border-radius: var(--raio);
  box-shadow: 0 20px 50px rgba(10, 61, 98, 0.13);
  width: 100%;
}

.about-text h2 {
  font-family: var(--fonte-titulo);
  font-size: 32px;
  color: var(--azul-escuro);
  margin-bottom: 16px;
}

.about-text p {
  color: var(--texto-claro);
  margin-bottom: 14px;
  font-size: 15.5px;
}

/* Lista de formação */
.about-list {
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-list li {
  display: flex;
  align-items: center;      /* ícone centralizado com o texto de uma linha */
  gap: 10px;
  font-size: 14.5px;
  color: var(--texto);
}

.about-list i {
  color: var(--verde);
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

/* Grade de números/estatísticas */
.stats-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: 30px 40px;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: 0 6px 20px var(--sombra);
  min-width: 160px;
}

.stat-item strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 42px;
  color: var(--verde);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-item span {
  font-size: 14px;
  color: var(--texto-claro);
}


/* =====================================================
  9. TRATAMENTOS
===================================================== */

/* Seção de cada tratamento: texto de um lado, ícone do outro */
.treatment-section {
  border-bottom: 1px solid var(--borda);
}

.treatment-section:last-child {
  border-bottom: none;
}

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

/* Normal: texto col 1, foto col 2 */
/* treatment grid positioning — veja bloco final */

.treatment-text h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--azul-escuro);
  margin-bottom: 14px;
}

.treatment-text p {
  color: var(--texto-claro);
  margin-bottom: 20px;
  font-size: 15.5px;
  line-height: 1.7;
}

.treatment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.treatment-list li {
  display: flex;
  align-items: center;      /* ícone centralizado com o texto */
  gap: 10px;
  font-size: 14.5px;
}

.treatment-list i {
  color: var(--verde);
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

/* Caixa com ícone grande no lado direito */
.treatment-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f5ee, #d5eee0);
  border-radius: 50%;
  width: 220px;
  height: 220px;
  margin: auto;
  font-size: 72px;
  color: var(--verde);
  box-shadow: 0 10px 30px rgba(39, 174, 96, 0.15);
}


/* =====================================================
  10. CLÍNICAS
===================================================== */

.clinics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Card de clínica (maior que cards genéricos) */
.clinic-card {
  background: var(--branco);
  border-radius: var(--raio);
  overflow: hidden; /* garante que a foto respeite o border-radius do card */
  box-shadow: 0 8px 24px var(--sombra);
  display: flex;
  flex-direction: column;
}

/* Foto da clínica no topo do card */
.clinic-photo {
  width: 100%;
  height: 220px;           /* altura fixa para todas as fotos ficarem iguais */
  overflow: hidden;        /* corta o excesso se a foto for maior */
}

.clinic-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* preenche o espaço sem distorcer a imagem */
  object-position: center; /* centraliza o recorte */
  transition: transform 0.4s ease;
}

/* Zoom suave na foto ao passar o mouse no card */
.clinic-card:hover .clinic-photo img {
  transform: scale(1.04);
}

/* Conteúdo interno do card (abaixo da foto) */
.clinic-card > *:not(.clinic-photo) {
  padding-left: 28px;
  padding-right: 28px;
}

.clinic-card > .clinic-header {
  padding-top: 24px;
}

.clinic-header {
  display: flex;
  align-items: center;      /* ícone e título sempre centralizados */
  gap: 12px;
  margin-bottom: 8px;
}

/* Remove a margem inferior do card-icon quando ele está dentro do header
   (a margem é para quando o ícone fica acima de um texto, não ao lado) */
.clinic-header .card-icon {
  margin-bottom: 0;
}

.clinic-header h2,
.clinic-header h3 {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  color: var(--azul-escuro);
  margin: 0;
  line-height: 1.2;
}

/* Endereço do consultório */
.clinic-card address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  color: var(--texto-claro);
}

.clinic-card address i {
  color: var(--verde);
  margin-right: 4px;
}

/* Wrapper do mapa para manter proporção */
.map-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--borda);
}


/* =====================================================
  11. CONTATO
===================================================== */

/* Grid: formulário à esquerda, infos à direita */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-box h2,
.contact-info h2 {
  font-family: var(--fonte-titulo);
  font-size: 28px;
  color: var(--azul-escuro);
  margin-bottom: 6px;
}

.contact-box > p,
.contact-info > p {
  color: var(--texto-claro);
  margin-bottom: 24px;
  font-size: 14.5px;
}

/* Formulário */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Grupo: label + input */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label do campo */
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

/* Campos de entrada */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--borda);
  font-size: 14.5px;
  color: var(--texto);
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

/* Estado de foco (quando o usuário clica no campo) */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.12);
}

/* Cards de informação de contato */
.info-card {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--azul-escuro);
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card address {
  font-style: normal;
  font-size: 14px;
  color: var(--texto-claro);
  line-height: 1.6;
}


/* =====================================================
  12. FOOTER (RODAPÉ)
===================================================== */

footer {
  background: var(--azul-escuro);
  color: rgba(255, 255, 255, 0.8);
  padding: 60px 0 0;
  margin-top: 0;
}

/* Grid de três colunas no rodapé */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Logo no rodapé (versão branca) */
.logo-footer {
  color: var(--branco) !important;
}

.logo-footer span {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: center;      /* alinha ícone de pin/whatsapp com o texto */
  gap: 6px;
}

.footer-col strong {
  color: var(--branco);
  font-size: 14px;
  margin-bottom: 4px;
}

/* Links do menu no rodapé */
.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-col nav a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transicao);
}

.footer-col nav a:hover {
  color: var(--verde);
}

/* Linha inferior do rodapé com copyright */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transicao);
}

.footer-bottom a:hover {
  color: var(--verde);
}


/* =====================================================
  13. BOTÃO FLUTUANTE DO WHATSAPP
===================================================== */

.whatsapp {
  position: fixed;    /* Fixo na tela, não sai ao rolar */
  right: 24px;
  bottom: 24px;
  background: #25D366;  /* Verde oficial do WhatsApp */
  color: var(--branco);
  font-size: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: transform var(--transicao), box-shadow var(--transicao);
  z-index: 999;
}

.whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5);
}


/* =====================================================
  14. ANIMAÇÃO FADE-IN
  
  Elementos com classe .fade-in começam invisíveis
  e aparecem suavemente quando entram na tela.
  O JavaScript adiciona a classe .visible quando
  o elemento entra no campo de visão do usuário.
===================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
  15. RESPONSIVIDADE
  
  @media → aplica estilos apenas quando a condição é verdadeira
  max-width: 768px → aplica para telas com até 768px (celular/tablet)
===================================================== */

/* TABLET (até 900px) */
@media (max-width: 900px) {

  .hero-grid,
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-sub,
  .hero-badges {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-img img {
    max-width: 420px;
    margin: 0 auto;
  }

  .about-img img {
    max-width: 380px;
    margin: 0 auto;
  }

  .treatment-grid,
  .treatment-grid.reverse {
    grid-template-columns: 1fr;
  }

  .treatment-icon-box {
    display: none;  /* Oculta o ícone grande em tablets */
  }

  .clinics-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* CELULAR (até 768px) */
@media (max-width: 768px) {

  /* Mostra o botão hamburguer */
  .menu-toggle {
    display: block;
  }

  /* Esconde o menu por padrão no mobile */
  nav#menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 16px;
    background: var(--branco);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 20px 24px;
    border-radius: var(--raio);
    z-index: 999;
    min-width: 180px;
  }

  /* Classe adicionada pelo JS quando o menu está aberto */
  nav#menu.active {
    display: flex;
  }

  nav#menu a {
    margin-left: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda);
    border-radius: 0;
    font-size: 15px;
  }

  nav#menu a:last-child {
    border-bottom: none;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    gap: 20px;
  }

  .stat-item {
    padding: 24px 28px;
  }

  .hero {
    padding: 60px 0;
  }
}

/* =====================================================
  CARROSSEL DE IMAGENS
===================================================== */

/* Caixa externa: define o tamanho visível e esconde o que ultrapassar */
.carousel {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 61, 98, 0.15);
  aspect-ratio: 4 / 4.5;
  background: var(--fundo-claro);
}

/* Faixa com todos os slides lado a lado */
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

/* Cada slide */
.carousel-slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}

/* Imagem dentro do slide */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Botões seta */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--azul-escuro);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: background var(--transicao), transform var(--transicao);
  z-index: 10;
}
.carousel-btn:hover {
  background: var(--branco);
  transform: translateY(-50%) scale(1.08);
}
.carousel-btn--prev { left: 12px; }
.carousel-btn--next { right: 12px; }

/* Bolinhas */
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transicao), transform var(--transicao);
}
.carousel-dot.active {
  background: var(--branco);
  transform: scale(1.3);
}

/* =====================================================
  SEÇÃO DE VÍDEO COM TEXTO SOBREPOSTO
  
  Funciona com 3 camadas empilhadas (position: absolute):
  Camada 1 (fundo)  → <video class="video-bg">
  Camada 2 (meio)   → <div class="video-overlay">  ← escurece o vídeo
  Camada 3 (frente) → <div class="video-content">  ← texto visível
===================================================== */

/* Seção pai: define o espaço e ativa o empilhamento */
.video-section {
  position: relative;
  height: 520px;
  overflow: hidden;
  display: flex;
  /* Texto alinhado à direita — rosto fica livre à esquerda */
  align-items: center;
  justify-content: flex-end;
  padding-right: 5%;
  touch-action: pan-y;
}

/* CAMADA 1 — O vídeo de fundo */
.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Rosto posicionado à esquerda */
  object-position: left center;
  z-index: 0;
  pointer-events: none; /* evita que o vídeo capture toque/scroll no mobile */
}

/* CAMADA 2 — Overlay: escuro à direita (texto legível),
   transparente à esquerda (rosto visível) */
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.10) 0%,    /* esquerda quase transparente — rosto visível */
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.85) 100%   /* direita escura — texto legível */
  );
  z-index: 1;
  pointer-events: none; /* deixa o gesto de rolagem passar pela camada */
}

/* CAMADA 3 — Texto alinhado à direita */
.video-content {
  position: relative;
  z-index: 2;
  text-align: right;
  color: #ffffff;
  padding: 0 20px;
  max-width: 520px;
  touch-action: pan-y; /* prioriza o scroll vertical do usuário */
}

/* Rótulo pequeno acima do título */
.video-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

/* Título principal sobre o vídeo */
.video-content h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(15px, 2vw, 26px);
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 14px;
  /* text-shadow suave para legibilidade extra */
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Subtítulo */
.video-content p {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 28px;
  line-height: 1.6;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* ESTE É O SEGREDO DO BOTÃO TRANSPARENTE */
  background: transparent !important; 
  border: 2px solid #d9d9d9 !important; /* Cor da borda */
  color: #d9d9d9 !important;          /* Cor do texto */
  
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Efeito ao passar o mouse para não ficar invisível */
.btn:hover {
  background: #d9d9d9 !important; /* O fundo volta ao normal no hover */
  color: #000000 !important;      /* O texto fica preto para dar contraste */
  transform: translateY(-2px);
}

/* Botão especial para o vídeo (branco com borda) */
.btn-video {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  padding: 13px 28px;
  font-size: 15px;
  transition: background var(--transicao), border-color var(--transicao);
}

.btn-video:hover {
  background: var(--verde);
  border-color: var(--verde);
  transform: translateY(-2px);
}

/* Responsivo: reduz a altura no celular */
@media (max-width: 768px) {
  .video-section {
    height: 420px;
  }
}

/* =====================================================
  PÁGINA DE CLÍNICAS — VÍDEO POR CLÍNICA
===================================================== */

/* ── Atalhos de navegação (Sorocaba / Presidente Prudente) ── */
.clinic-nav {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  padding: 0;
  position: sticky;
  top: 65px;          /* fica logo abaixo do header fixo */
  z-index: 900;
}

.clinic-nav .container {
  display: flex;
  gap: 0;
}

/* Cada link de atalho */
.clinic-nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-claro);
  border-bottom: 3px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}

.clinic-nav-link:hover {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

/* ── Bloco do vídeo de cada clínica ── */
.clinic-video-hero {
  position: relative;
  height: 480px;        /* altura do bloco de vídeo — ajuste se quiser maior */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vídeo de fundo — camada 0 */
.clinic-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* preenche o espaço sem distorcer */
  object-position: center;
  z-index: 0;
}

/* Overlay escuro — camada 1 */
/* Ajuste o último número: 0 = transparente · 1 = preto total */
.clinic-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 30, 50, 0.60);
  z-index: 1;
}

/* Texto sobre o vídeo — camada 2 */
.clinic-video-info {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 0 20px;
  max-width: 680px;
}

.clinic-video-info h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(26px, 4vw, 44px);
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.clinic-video-info p {
  font-size: clamp(14px, 2vw, 17px);
  color: rgba(255,255,255,0.88);
  margin-bottom: 26px;
  line-height: 1.6;
}

/* ── Bloco de detalhes: endereço + mapa ── */
.clinic-details {
  background: var(--fundo-claro);
  padding: 60px 0;
}

/* Grid: info à esquerda, mapa à direita */
.clinic-details-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;    /* centraliza as duas colunas verticalmente */
}

/* Coluna de informações */
.clinic-info-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Espaçamento entre cada item (endereço, telefone, horários) */
.clinic-info-col address,
.clinic-details address {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.clinic-info-col h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--azul-escuro);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cada linha de info (ícone + texto) */
.clinic-info-item {
  display: flex;
  align-items: flex-start;  /* ícone alinha ao topo do bloco de texto */
  gap: 12px;
  font-size: 14.5px;
}

.clinic-info-item > i {
  font-size: 18px;
  color: var(--verde);
  margin-top: 3px;          /* empurra levemente para alinhar com a linha de texto */
  flex-shrink: 0;
  line-height: 1;
}

.clinic-info-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clinic-info-item strong {
  font-weight: 600;
  color: var(--azul-escuro);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.clinic-info-item span {
  color: var(--texto-claro);
  line-height: 1.5;
}

/* Coluna do mapa */
.clinic-map-col {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--borda);
  height: 360px;          /* altura fixa — igual nos dois lados */
  box-shadow: 0 6px 20px var(--sombra);
}

.clinic-map-col iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Divisor entre as clínicas ── */
.clinic-divider {
  height: 6px;
  background: linear-gradient(90deg, var(--verde), var(--azul-escuro));
  /* Linha colorida que separa visualmente as duas clínicas */
}

/* ── Responsivo ── */
@media (max-width: 900px) {
  .clinic-details-grid {
    grid-template-columns: 1fr;
  }

  .clinic-map-col {
    min-height: 260px;
  }

  .clinic-video-hero {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .clinic-video-hero {
    height: 320px;
  }

  .clinic-nav-link {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* =====================================================
  PÁGINA CLÍNICAS — VÍDEO POR UNIDADE

  Cada clínica tem dois blocos empilhados verticalmente:

  .clinic-block              → seção pai de cada clínica
  ├── .clinic-video-hero     → bloco do vídeo de fundo
  │   ├── .clinic-video-bg   → a tag <video>
  │   ├── .clinic-video-overlay → camada escura
  │   └── .clinic-video-content → texto sobre o vídeo
  └── .clinic-info-section   → endereço, horários e mapa
      └── .clinic-info-grid  → grid: infos | mapa
===================================================== */

/* ── Seção pai de cada clínica — espaço gerenciado pelos blocos internos ── */

/* Fundo levemente diferente para a segunda clínica */
.clinic-block--alt .clinic-info-section {
  background: var(--fundo-claro);
}

/* ── Bloco do vídeo ── */
.clinic-video-hero {
  position: relative;      /* necessário para os filhos absolute */
  height: 480px;           /* altura do bloco de vídeo — ajuste se quiser */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* O vídeo cobre o bloco inteiro sem distorcer */
.clinic-video-bg {
  position: absolute;
  inset: 0;                /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Camada escura sobre o vídeo */
.clinic-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 30, 50, 0.55);   /* azul-escuro semitransparente */
  z-index: 1;
}

/* Tom diferente para a segunda clínica (Presidente Prudente) */
.clinic-video-overlay--alt {
  background: rgba(10, 40, 30, 0.55);  /* verde-escuro semitransparente */
}

/* Texto sobre o vídeo */
.clinic-video-content {
  position: relative;
  z-index: 2;              /* fica acima do overlay */
  text-align: center;
  color: #ffffff;
  padding: 0 20px;
  max-width: 640px;
}

.clinic-video-content h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(30px, 4vw, 52px);
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

.clinic-video-content p {
  font-size: clamp(14px, 2vw, 17px);
  color: rgba(255,255,255,0.85);
  margin-bottom: 26px;
}

/* Botão de rolagem (seta para baixo) */
.btn-clinic-scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(255,255,255,0.7);
  color: #ffffff;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fonte-corpo);
  transition: background var(--transicao), border-color var(--transicao);
  text-decoration: none;
}

.btn-clinic-scroll:hover {
  background: var(--verde);
  border-color: var(--verde);
}

/* Ícone de seta com animação de quique */
.btn-clinic-scroll i {
  animation: quique 1.4s ease-in-out infinite;
}

@keyframes quique {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(4px); }
}

/* ── Bloco de informações + mapa ── */
.clinic-info-section {
  padding: 60px 0;
  background: var(--branco);
}

/* Grid: infos à esquerda, mapa à direita */
.clinic-info-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: start;
}

/* Coluna de dados da clínica */
.clinic-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.clinic-details h3 {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  color: var(--azul-escuro);
}

/* Cada linha de informação: ícone + texto */
.clinic-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
}

/* O ícone precisa alinhar com o label (strong), que tem font-size menor.
   margin-top empurra o ícone para baixo até ficar na mesma altura visual. */
.clinic-info-item > i {
  font-size: 18px;
  color: var(--verde);
  margin-top: 1px;
  flex-shrink: 0;
  line-height: 1;
  /* Cria um quadrado de 22px para o ícone, alinhando com o label de 12px */
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clinic-info-item div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.clinic-info-item strong {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-claro);
  /* Alinha a altura do label com o centro do ícone */
  line-height: 22px;
}

.clinic-info-item span {
  color: var(--texto);
  line-height: 1.5;
}

/* Mapa: altura generosa em desktop */
.clinic-info-section .map-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--borda);
  height: 340px;
}

.clinic-info-section .map-wrapper iframe {
  height: 100%;
}

/* ── Responsivo ── */
@media (max-width: 900px) {
  .clinic-info-grid {
    grid-template-columns: 1fr;
  }

  .clinic-info-section .map-wrapper {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .clinic-video-hero {
    height: 380px;
  }
}

/* =====================================================
  CLÍNICAS — classes corretas do HTML atual
  
  .clinic-info-grid  → grid com 2 colunas (endereço | mapa)
  .clinic-details    → coluna esquerda com endereço
  .map-wrapper       → coluna direita com o mapa
===================================================== */

/* Grid: endereço à esquerda, mapa à direita, centralizados */
.clinic-info-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;   /* centraliza verticalmente as duas colunas */
}

/* Coluna esquerda: endereço, horários e botão */
.clinic-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Coluna direita: mapa com altura fixa */
.map-wrapper {
  height: 360px;          /* altura fixa igual nos dois lados */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: 0 6px 20px var(--sombra);
}

.map-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* Seção de fundo que envolve o grid */
.clinic-info-section {
  background: var(--fundo-claro);
  padding: 60px 0;
}

/* Responsivo: empilha no celular */
@media (max-width: 900px) {
  .clinic-info-grid {
    grid-template-columns: 1fr;
  }

  .map-wrapper {
    height: 280px;
  }
}

/* =====================================================
  MODAL DE ESCOLHA DE CIDADE
  
  Camadas:
  .modal-overlay  → fundo escuro que cobre a página inteira
  .modal-box      → caixa branca centralizada
  
  Estado padrão: display:none (invisível)
  Quando aberto: classe .modal-active é adicionada pelo JS
===================================================== */

/* Fundo escuro semitransparente — cobre tudo */
.modal-overlay {
  display: none;               /* escondido por padrão */
  position: fixed;             /* cobre a tela toda, mesmo ao rolar */
  inset: 0;
  background: rgba(5, 30, 50, 0.65);
  z-index: 2000;               /* fica acima de tudo */
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);  /* desfoca o fundo levemente */
}

/* Quando o JS adiciona .modal-active, o modal aparece */
.modal-overlay.modal-active {
  display: flex;
  animation: modalFadeIn 0.25s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Caixa branca do modal */
.modal-box {
  background: var(--branco);
  border-radius: 16px;
  padding: 40px 32px 32px;
  max-width: 440px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}

/* Botão de fechar (X) no canto superior direito */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--fundo-claro);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--texto-claro);
  cursor: pointer;
  transition: background var(--transicao);
}

.modal-close:hover {
  background: var(--borda);
}

/* Ícone do WhatsApp no topo do modal */
.modal-icon {
  width: 60px;
  height: 60px;
  background: #e8f5ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--verde);
  margin: 0 auto 18px;
}

/* Título do modal */
.modal-box h3 {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  color: var(--azul-escuro);
  margin-bottom: 6px;
}

/* Subtítulo */
.modal-box p {
  font-size: 14px;
  color: var(--texto-claro);
  margin-bottom: 24px;
}

/* Container dos dois botões de cidade */
.modal-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cada botão de cidade */
.modal-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--borda);
  color: var(--texto);
  text-align: left;
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
  text-decoration: none;
}

.modal-btn:hover {
  border-color: var(--verde);
  background: #f0faf4;
  transform: translateY(-2px);
}

/* Ícone de pin dentro do botão */
.modal-btn-icon {
  width: 40px;
  height: 40px;
  background: #e8f5ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--verde);
  flex-shrink: 0;
}

/* Textos do botão */
.modal-btn div {
  flex: 1;
}

.modal-btn strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-escuro);
  margin-bottom: 2px;
}

.modal-btn span {
  font-size: 12px;
  color: var(--texto-claro);
}

/* Seta no final do botão */
.modal-btn > .ri-arrow-right-s-line {
  font-size: 20px;
  color: var(--texto-claro);
  flex-shrink: 0;
}

/* Responsivo */
@media (max-width: 480px) {
  .modal-box {
    padding: 32px 20px 24px;
  }
}

/* =====================================================
  VÍDEOS VERTICAIS LADO A LADO — página de clínicas

  .clinic-videos-duo  → grid de 2 colunas
  .clinic-video-card  → cada card vertical (proporção 9:16)
  
  O vídeo fica em formato retrato igual ao celular.
  Os dois cards ficam lado a lado em desktop e
  empilhados (um por linha) no celular.
===================================================== */

/* Grid que agrupa os dois vídeos */
.clinic-videos-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* duas colunas iguais */
  gap: 0;                            /* sem espaço entre os cards */
  width: 100%;
  max-height: 92vh;                  /* não ultrapassa a tela */
}

/* Cada card de vídeo vertical */
.clinic-video-card {
  position: relative;
  /* aspect-ratio 9/16 = proporção de vídeo vertical (celular) */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  display: flex;
  align-items: flex-end;             /* texto fica na parte de baixo */
  justify-content: center;
  cursor: pointer;
}

/* Vídeo preenche o card sem distorcer */
.clinic-video-card .clinic-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Gradiente no fundo do card — torna o texto legível */
/* Diferente do overlay sólido: preserva mais o vídeo no topo */
.clinic-video-card .clinic-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 30, 50, 0.15) 0%,     /* quase transparente no topo */
    rgba(5, 30, 50, 0.75) 100%    /* mais escuro em baixo (onde fica o texto) */
  );
  z-index: 1;
}

/* Overlay da segunda clínica (Presidente Prudente) */
.clinic-video-card .clinic-video-overlay--alt {
  background: linear-gradient(
    to bottom,
    rgba(10, 40, 30, 0.15) 0%,
    rgba(10, 40, 30, 0.75) 100%
  );
}

/* Texto sobre o vídeo — fica na parte inferior do card */
.clinic-video-card .clinic-video-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 0 24px 36px;
  width: 100%;
}

.clinic-video-card .clinic-video-content h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(22px, 3vw, 36px);
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.clinic-video-card .clinic-video-content p {
  font-size: clamp(13px, 1.5vw, 15px);
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}

/* Linha divisória vertical entre os dois cards */
.clinic-video-card:first-child {
  border-right: 2px solid rgba(255,255,255,0.2);
}

/* Efeito de zoom suave no hover */
.clinic-video-card:hover .clinic-video-bg {
  transform: scale(1.03);
  transition: transform 6s ease;
}

/* ── Responsivo ── */

/* Tablet: limita a altura para não ficar muito alto */
@media (max-width: 900px) {
  .clinic-videos-duo {
    max-height: none;
  }

  .clinic-video-card {
    aspect-ratio: 9 / 14;           /* um pouco menos alto em tablet */
  }
}

/* Celular: empilha os cards um por linha */
@media (max-width: 600px) {
  .clinic-videos-duo {
    grid-template-columns: 1fr;     /* uma coluna só */
  }

  .clinic-video-card {
    aspect-ratio: 9 / 13;
  }

  .clinic-video-card:first-child {
    border-right: none;
    border-bottom: 2px solid rgba(255,255,255,0.2);
  }
}

/* =====================================================
  LAYOUT DE DUAS COLUNAS — página de clínicas
  Cada coluna tem: vídeo vertical → infos → mapa → botão
===================================================== */

/* Grid principal: duas colunas iguais */
.clinics-duo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;         /* cada coluna cresce de forma independente */
}

/* Cada coluna (Sorocaba | Presidente Prudente) */
.clinic-col {
  display: flex;
  flex-direction: column;     /* vídeo em cima, infos embaixo */
}

/* Linha divisória vertical entre as colunas — usa outline para não deslocar */
.clinic-col:first-child {
  outline: none;
  box-shadow: 3px 0 0 0 var(--fundo-claro); /* não afeta o tamanho da coluna */
}

/* Bloco de informações abaixo do vídeo */
.clinic-info-col-block {
  padding: 40px 36px;
  background: var(--branco);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Ambas as colunas com o mesmo fundo */
.clinic-col:last-child .clinic-info-col-block {
  background: var(--branco);
}

/* Mapa dentro do bloco de infos */
.clinic-col-map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: 0 4px 14px var(--sombra);
}

/* Responsivo: empilha as colunas no celular */
@media (max-width: 768px) {
  .clinics-duo-layout {
    grid-template-columns: 1fr;
  }

  .clinic-col:first-child {
    border-right: none;
    border-bottom: 3px solid var(--fundo-claro);
  }
}

/* Ícone + título lado a lado nos cards de clínica da home */
.card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Remove margem inferior do ícone quando está no card-title-row */
.card-title-row .card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.card-title-row h3 {
  margin-bottom: 0;
}

/* Botões dentro dos cards de clínica — evita quebra de linha */
.card .btn {
  white-space: nowrap;   /* força o texto a ficar em uma linha só */
  font-size: 13.5px;     /* reduz levemente para caber no espaço */
  padding: 12px 16px;    /* ajusta o padding para não estourar */
  width: 100%;           /* ocupa a largura toda do card */
  justify-content: center;
}

/* =====================================================
  TEMA ESCURO — ajustes específicos
  
  As variáveis CSS cuidam da maioria das cores.
  Este bloco corrige elementos que precisam de
  tratamento especial no fundo escuro.
===================================================== */

/* ── Body ── */
body {
  background: var(--fundo);
  color: var(--texto);
}

/* ── Header ── */
header {
  background: #111111;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--borda);
}

/* Logo */
.logo {
  color: #ffffff;
}

.logo span {
  color: #aaaaaa !important;
}

/* Links do menu */
nav#menu a {
  color: #cccccc;
}

nav#menu a:hover,
nav#menu a[aria-current="page"] {
  color: #ffffff;
  border-bottom-color: transparent;  /* sem borda no item ativo */
  font-weight: 600;
}

/* Menu mobile aberto — sem borda visível no desktop */
nav#menu {
  background: transparent;
  border: none;
}

/* Botão hamburguer */
.menu-toggle {
  color: #ffffff;
}

/* ── Botões ── */
.btn {
  background: #ffffff;
  color: #0a0a0a;
}

.btn:hover {
  background: #e0e0e0;
}

.btn-outline {
  border-color: #ffffff;
  color: #ffffff;
}

.btn-outline:hover {
  background: #ffffff;
  color: #0a0a0a;
}

/* Botão de vídeo */
.btn-video {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.7);
  color: #ffffff;
}

.btn-video:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}

/* ── Cards ── */
.card {
  background: #1a1a1a;
  border: 1px solid var(--borda);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.card-icon {
  background: #2a2a2a;
  color: #ffffff;
}

.card-link {
  color: #ffffff;
}

/* ── Seções ── */
.bg-light {
  background: #141414;
}

.section-header h2 {
  color: #ffffff;
}

.section-header p {
  color: #aaaaaa;
}

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
}

.hero h1 {
  color: #ffffff;
}

.hero-sub {
  color: #aaaaaa;
}

.hero-badges span {
  color: #aaaaaa;
}

.hero-badges i {
  color: #ffffff;
}

/* ── Page hero (páginas internas) ── */
.page-hero {
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
  border-bottom: 1px solid var(--borda);
}

/* ── Breadcrumb ── */
.breadcrumb a,
.breadcrumb span {
  color: rgba(255,255,255,0.6);
}

/* ── Sobre ── */
.about-text h2 {
  color: #ffffff;
}

.about-text p {
  color: #aaaaaa;
}

.about-list li {
  color: #cccccc;
}

.about-list i {
  color: #ffffff;
}

/* Stats */
.stat-item {
  background: #1a1a1a;
  border: 1px solid var(--borda);
}

.stat-item strong {
  color: #ffffff;
}

.stat-item span {
  color: #aaaaaa;
}

/* ── Tratamentos ── */
.treatment-section {
  border-bottom: 1px solid var(--borda);
}

.treatment-text h2 {
  color: #ffffff;
}

.treatment-text p {
  color: #aaaaaa;
}

.treatment-list li {
  color: #cccccc;
}

.treatment-list i {
  color: #ffffff;
}

.treatment-icon-box {
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ── Formulário de contato ── */
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: #1a1a1a;
  border-color: var(--borda);
  color: #f0f0f0;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #666666;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

.form-group label {
  color: #cccccc;
}

.contact-box h2,
.contact-info h2 {
  color: #ffffff;
}

.contact-box > p,
.contact-info > p {
  color: #aaaaaa;
}

/* Info cards no contato */
.info-card {
  background: #1a1a1a;
  border: 1px solid var(--borda);
}

.info-card h3 {
  color: #ffffff;
}

.info-card address p {
  color: #aaaaaa;
}

/* ── Clínicas ── */
.clinic-info-col-block {
  background: #111111;
  border-top: 1px solid var(--borda);
}

.clinic-col:last-child .clinic-info-col-block {
  background: #111111;
}

.clinic-col:first-child {
  box-shadow: 3px 0 0 0 var(--borda);
}

.clinic-header h3 {
  color: #ffffff;
}

.clinic-info-item > i {
  color: #ffffff;
}

.clinic-info-item strong {
  color: #aaaaaa;
}

.clinic-info-item span {
  color: #cccccc;
}

.clinic-col-map {
  border-color: var(--borda);
}

/* ── CTA final ── */
.cta-section {
  background: linear-gradient(135deg, #111111, #1a1a1a);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

.cta-section h2,
.cta-section p {
  color: #ffffff;
}

/* ── Footer ── */
footer {
  background: #231f1e;   /* igual ao fundo da logo — integração perfeita */
  border-top: 1px solid rgba(255,255,255,0.06);
}

.logo-footer {
  color: #ffffff !important;
}

.logo-footer span {
  color: #666666 !important;
}

.footer-col p {
  color: #888888;
}

.footer-col strong {
  color: #ffffff;
}

.footer-col nav a {
  color: #888888;
}

.footer-col nav a:hover {
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #555555;
  background: #1a1716;   /* um tom mais escuro para separar do grid */
}

.footer-bottom a {
  color: #888888;
}

.footer-bottom a:hover {
  color: #ffffff;
}

/* Ícones sociais no tema escuro — sem fundo, só ícone */
.footer-social-link {
  background: none !important;
  border: none !important;
  color: #666666;
  font-size: 28px;
  width: auto;
  height: auto;
}

.footer-social-link:hover {
  background: none !important;
  border: none !important;
  color: #ffffff;
  transform: translateY(-3px);
}

/* ── Modal ── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85);
}

.modal-box {
  background: #1a1a1a;
  border: 1px solid var(--borda);
}

.modal-box h3 {
  color: #ffffff;
}

.modal-box p {
  color: #aaaaaa;
}

.modal-close {
  background: #2a2a2a;
  color: #aaaaaa;
}

.modal-close:hover {
  background: #333333;
}

.modal-icon {
  background: #2a2a2a;
  color: #ffffff;
}

.modal-btn {
  border-color: var(--borda);
  color: #cccccc;
  background: #111111;
}

.modal-btn:hover {
  border-color: #ffffff;
  background: #222222;
}

.modal-btn strong {
  color: #ffffff;
}

.modal-btn span {
  color: #888888;
}

.modal-btn-icon {
  background: #2a2a2a;
  color: #ffffff;
}

/* ── Depoimentos ── */
.card-testimonial blockquote p {
  color: #cccccc;
}

.card-testimonial figcaption {
  color: #888888;
}

/* ── Botão clínica scroll ── */
.btn-clinic-scroll {
  border-color: rgba(255,255,255,0.5);
  color: #ffffff;
}

.btn-clinic-scroll:hover {
  background: rgba(255,255,255,0.15);
  border-color: #ffffff;
}

/* ── Botão WhatsApp flutuante ── */
.whatsapp {
  background: #25D366;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* =====================================================
  LOGO IMAGEM NO RODAPÉ
===================================================== */

.footer-logo-img {
  width: 100%;
  height: 150px;            
  display: block;
  border-radius: 0;
  mix-blend-mode: normal;
  opacity: 1;
  object-fit: cover;
  object-position: left center;  /* foca no lado esquerdo da imagem */
  transition: opacity var(--transicao);
}

.footer-logo-img:hover {
  opacity: 0.9;
}

/* =====================================================
  LOGO IMAGEM NO HEADER
===================================================== */

.header-logo {
  display: flex;
  align-items: center;
}

.header-logo-img {
  height: 64px;             /* altura maior para ser legível */
  width: auto;
  display: block;
  border-radius: 0;         /* sem borda arredondada */
  background: transparent;  /* fundo transparente — a logo já tem fundo escuro */
  transition: opacity var(--transicao);
  /* mix-blend-mode: lighten faz o fundo da logo desaparecer no tema escuro */
  mix-blend-mode: lighten;
}

.header-logo-img:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .header-logo-img {
    height: 50px;
  }
}

/* =====================================================
  ATUALIZAÇÃO DE CORES E FONTES
  Fundo: #000000 | Texto: #d9d9d9 | Azul: #5ca3ff
  Títulos: Playfair Display | Corpo: Open Sans
===================================================== */

/* ── Fundo geral ── */
body {
  background: #000000;
  color: #d9d9d9;
  font-family: 'Open Sans', sans-serif;
}

/* ── Fontes ── */
h1, h2, h3, h4, h5, h6,
.hero h1,
.section-header h2,
.treatment-text h2,
.about-text h2,
.clinic-video-content h2,
.modal-box h3,
.page-hero h1,
.contact-box h2,
.contact-info h2,
.cta-section h2,
.clinic-header h3,
.stat-item strong {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Fundo das seções ── */
.bg-light {
  background: #0d0d0d;
}

.section {
  background: #000000;
}

/* ── Cards ── */
.card {
  background: #111111;
  border: 1px solid #222222;
}

/* ── Header ── */
header {
  background: #000000;
  border-bottom: 1px solid #1a1a1a;
}

/* ── Footer ── */
footer {
  background: #231f1e;
}

/* ── Textos gerais ── */
p, span, li, address, label {
  color: #d9d9d9;
}

.hero-sub,
.treatment-text p,
.about-text p,
.texto-claro,
.footer-col p {
  color: #a0a0a0;
}

/* ── Azul #5ca3ff nos ícones de destaque ── */
/* card-icon (tratamentos, clínicas home) */
.card-icon {
  background: rgba(92, 163, 255, 0.12);
  color: #5ca3ff;
}

/* Ícones de check nas listas de tratamentos */
.treatment-list i,
.about-list i {
  color: #5ca3ff;
}

/* Ícones dos itens de informação nas clínicas */
.clinic-info-item > i {
  color: #5ca3ff;
}

/* Ícone do modal */
.modal-icon {
  background: rgba(92, 163, 255, 0.12);
  color: #5ca3ff;
}

.modal-btn-icon {
  background: rgba(92, 163, 255, 0.12);
  color: #5ca3ff;
}

/* Ícones do hero (CRM, cidades, atendimento) */
.hero-badges i {
  color: #5ca3ff;
}

/* Ícones do rodapé (pin, whatsapp) */
.footer-col p i {
  color: #5ca3ff;
}

/* Redes sociais hover */
.footer-social-link:hover {
  color: #5ca3ff !important;
}

/* Card link (saiba mais) */
.card-link {
  color: #5ca3ff;
}

/* Ícone de info nas clínicas */
.clinic-info-col h3 i,
.clinic-header .card-icon {
  color: #5ca3ff;
}

/* ── Botões ── */
.btn {
  background: #d9d9d9;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.btn:hover {
  background: #b0b0b0;
  color: #000000;
}

.btn-outline {
  border-color: #d9d9d9;
  color: #d9d9d9;
}

.btn-outline:hover {
  background: #d9d9d9;
  color: #000000;
}

/* ── Links do menu ── */
nav#menu a {
  color: #d9d9d9;
  font-family: 'Open Sans', sans-serif;
}

nav#menu a:hover,
nav#menu a[aria-current="page"] {
  color: #5ca3ff;
  border-bottom-color: transparent;
  font-weight: 600;
}

/* ── Breadcrumb ── */
.breadcrumb a,
.breadcrumb span {
  color: rgba(217, 217, 217, 0.6);
}

/* ── Stat items ── */
.stat-item {
  background: #111111;
  border: 1px solid #222222;
}

.stat-item strong {
  color: #5ca3ff;  /* número em azul para destaque */
}

/* ── Formulário ── */
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: #111111;
  border-color: #222222;
  color: #d9d9d9;
  font-family: 'Open Sans', sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #5ca3ff;
  box-shadow: 0 0 0 3px rgba(92, 163, 255, 0.15);
}

/* ── Modal ── */
.modal-box {
  background: #111111;
  border: 1px solid #222222;
}

.modal-btn {
  background: #0d0d0d;
  border-color: #222222;
}

.modal-btn:hover {
  border-color: #5ca3ff;
  background: #0d0d0d;
}

/* ── Vídeo label ── */
.video-label {
  color: #5ca3ff;
  background: rgba(92, 163, 255, 0.12);
  border-color: rgba(92, 163, 255, 0.3);
}

/* ── Page hero ── */
.page-hero {
  background: #000000;
  border-bottom: 1px solid #1a1a1a;
}

/* ── Info cards contato ── */
.info-card {
  background: #111111;
  border: 1px solid #222222;
}

/* ── Clinic info block ── */
.clinic-info-col-block {
  background: #000000;
  border-top: 1px solid #1a1a1a;
}

.clinic-col:last-child .clinic-info-col-block {
  background: #000000;
}

/* =====================================================
  FUNDO PRETO PURO #000000 EM TUDO
  Sobrescreve todos os gradientes e fundos alternativos
===================================================== */

/* Fundo geral */
body,
.hero,
.section,
.bg-light,
.page-hero,
.cta-section,
.treatment-section,
.clinic-info-col-block,
.clinic-info-section,
.contact-box,
.contact-info,
section {
  background: #000000 !important;
}

/* Remove todos os gradientes */
.hero {
  background: #000000 !important;
}

.page-hero {
  background: #000000 !important;
}

.cta-section {
  background: #000000 !important;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}

/* Cards mantêm fundo levemente diferente para destaque */
.card,
.stat-item,
.info-card,
.modal-box,
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: #0d0d0d !important;
}

/* Footer fundo preto puro */
footer,
.footer-bottom {
  background: #000000 !important;
}

/* Logo do footer alinhada à esquerda */
.footer-col:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo-img {
  margin-left: 0 !important;
  object-position: left center !important;
}

/* Footer logo — tamanho grande, alinhada à esquerda */
.footer-logo-img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: 30% center !important;  /* foca no centro-esquerda onde está a logo */
  margin-left: 0 !important;
}

/* Logo recortada — sem object-fit, exibe natural */
.footer-logo-img {
  width: 100% !important;
  height: auto !important;
  max-width: 340px !important;
  object-fit: unset !important;
  object-position: unset !important;
}

.header-logo-img {
  height: 52px !important;
  width: auto !important;
  object-fit: unset !important;
}

/* =====================================================
  ANIMAÇÕES DE SCROLL — FADE RÁPIDO E DINÂMICO
  
  Classes aplicadas pelo JavaScript:
  .reveal          → elemento ainda invisível (estado inicial)
  .reveal.visible  → elemento visível (após entrar na tela)
  
  Variações para elementos diferentes:
  .reveal-delay-1  → atraso de 0.1s
  .reveal-delay-2  → atraso de 0.2s
  .reveal-delay-3  → atraso de 0.3s
  (cria efeito cascata quando vários itens aparecem juntos)
===================================================== */

/* Estado inicial — invisível e levemente abaixo */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Estado visível — aparece no lugar */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays para efeito cascata nos cards */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Header nunca some */
header { opacity: 1 !important; transform: none !important; }

/* =====================================================
  ANIMAÇÕES DOMINÓ — SLIDE ESQUERDA/DIREITA
===================================================== */

/* Elemento vindo da ESQUERDA */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Elemento vindo da DIREITA */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Estado visível — ambos chegam ao lugar */
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Delays do efeito dominó — cada item espera o anterior */
.domino-1  { transition-delay: 0.00s; }
.domino-2  { transition-delay: 0.12s; }
.domino-3  { transition-delay: 0.24s; }
.domino-4  { transition-delay: 0.36s; }
.domino-5  { transition-delay: 0.48s; }
.domino-6  { transition-delay: 0.60s; }

/* =====================================================
  CORREÇÕES MOBILE
===================================================== */

/* ── Menu mobile ── */
@media (max-width: 768px) {

  nav#menu {
    position: fixed !important;
    top: 70px !important;        /* fica abaixo do header */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #111111 !important;
    border-top: 1px solid #222 !important;
    border-bottom: 1px solid #222 !important;
    display: none;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 1999 !important;
    padding: 8px 0 !important;
  }

  nav#menu.active {
    display: flex !important;
  }

  nav#menu a {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #d9d9d9 !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid #1e1e1e !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
  }

  nav#menu a:last-child {
    border-bottom: none !important;
  }

  nav#menu a:hover,
  nav#menu a[aria-current="page"] {
    color: #5ca3ff !important;
    background: #161616 !important;
  }

  .menu-toggle {
    z-index: 2000 !important;
    position: relative !important;
    font-size: 24px !important;
  }

  /* ── Carrossel no mobile ── */
  .carousel {
    aspect-ratio: 3 / 2 !important;
    max-height: 280px !important;
  }

  .carousel-track {
    height: 100% !important;
  }

  .carousel-slide {
    height: 100% !important;
  }

  .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ── Hero no mobile ── */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

}

/* =====================================================
  CORREÇÃO CARROSSEL — iPhone e mobile
===================================================== */

@media (max-width: 768px) {

  /* Carrossel com altura proporcional às fotos */
  .carousel {
    aspect-ratio: unset !important;
    max-height: unset !important;
    height: 260px !important;
    border-radius: 10px !important;
  }

  .carousel-track {
    height: 260px !important;
  }

  .carousel-slide {
    height: 260px !important;
    min-width: 100% !important;
  }

  /* Se a foto for vertical — mostra ela inteira sem cortar */
  .carousel-slide img {
    width: 100% !important;
    height: 60px !important;
    object-fit: contain !important;   /* mostra a foto inteira, sem cortar */
    object-position: center !important;
    background: #000 !important;      /* fundo preto nas laterais se sobrar espaço */
  }

  /* Badges do hero em coluna no mobile */
  .hero-badges {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Botões do hero em coluna */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .hero-ctas .btn,
  .hero-ctas .btn-outline {
    width: 100% !important;
    justify-content: center !important;
  }

}



/* ── Seção de vídeo no mobile — versão consolidada ── */
@media (max-width: 768px) {

  .video-section {
    height: 560px !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-right: 0 !important;
    padding-bottom: 48px !important;
    flex-direction: column !important;
  }

  /* Puxa o vídeo para cima: mostra mais o topo (cabeça) */
  .video-bg {
    object-position: center 0% !important;
  }

  /* Gradiente começa mais tarde — texto mais abaixo */
  .video-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.00)  0%,
      rgba(0,0,0,0.00) 60%,
      rgba(0,0,0,0.80) 78%,
      rgba(0,0,0,0.95) 100%
    ) !important;
  }

  /* Texto empurrado para o fundo da seção */
  .video-content {
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    width: 100% !important;
    margin-top: 340px !important;  /* ← empurra o texto para baixo */
  }

  .video-content h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .video-content p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  .video-label {
    font-size: 10px !important;
    margin-bottom: 12px !important;
  }

  .btn-video {
    padding: 11px 22px !important;
    font-size: 14px !important;
  }
}

/* =====================================================
  CARROSSEL — foto única, sem bordas pretas
===================================================== */

/* Desktop */
.carousel {
  aspect-ratio: unset !important;
  height: 600px;
  border-radius: var(--raio);
  overflow: hidden;
  background: #000;
}

.carousel-track {
  height: 100% !important;
}

.carousel-slide {
  height: 100% !important;
  min-width: 100% !important;
}

.carousel-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* preenche sem bordas pretas */
  object-position: center top !important; /* foca no rosto */
}

/* Mobile */
@media (max-width: 768px) {
  .carousel {
    height: 420px !important;
    max-height: unset !important;
  }

  .carousel-track {
    height: 420px !important;
  }

  .carousel-slide {
    height: 420px !important;
  }

  .carousel-slide img {
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* =====================================================
  FOTO ÚNICA NO HERO (substituiu o carrossel)
===================================================== */

.hero-foto {
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  height: 480px;          /* altura fixa do container */
}

.hero-foto img {
  width: 70%;
  height: 100%;
  object-fit: cover;         /* preenche o container cortando o excesso */
  object-position: center top; /* foca no rosto */
  display: block;
}

@media (max-width: 768px) {
  .hero-foto {
    height: 360px !important;
  }
}

/* =====================================================
  FOTOS NOS TRATAMENTOS
===================================================== */

/* treatment-foto — veja bloco final */

  .treatment-grid .treatment-text,
  .treatment-grid.reverse .treatment-text {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}


/* =====================================================
  TRATAMENTOS — GRID E FOTO EM CÍRCULO
===================================================== */

/* Grid: texto ocupa mais espaço, círculo menor */
.treatment-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 0.7fr !important;
  gap: 60px !important;
  align-items: center !important;
}

/* Normal: texto col 1, foto col 2 */
.treatment-grid .treatment-text {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.treatment-grid .treatment-foto {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Reverse: foto col 1, texto col 2 */
.treatment-grid.reverse {
  grid-template-columns: 0.7fr 1.3fr !important;
}
.treatment-grid.reverse .treatment-foto {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.treatment-grid.reverse .treatment-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Círculo da foto — igual ao treatment-icon-box mas com imagem */
.treatment-foto {
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;   /* círculo perfeito */
  overflow: hidden !important;
  margin: 0 auto !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  background: #1a1a1a !important;
  flex-shrink: 0 !important;
}

.treatment-foto img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* preenche o círculo */
  object-position: 70% 35% !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.treatment-foto:hover img {
  transform: scale(1.06) !important;
}

/* Mobile: empilha */
@media (max-width: 900px) {
  
  .treatment-grid,
  .treatment-grid.reverse {
    grid-template-columns: 1fr !important;
  }
  .treatment-grid .treatment-foto,
  .treatment-grid.reverse .treatment-foto {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 auto 24px !important;
  }
  .treatment-grid .treatment-text,
  .treatment-grid.reverse .treatment-text {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* =====================================================
  FOTOS DOS DEPOIMENTOS — CÍRCULO
  Afeta apenas .author-photo nos cards de depoimento
===================================================== */

.author-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;    /* círculo perfeito */
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border: 2px solid #333 !important;
}

/* =====================================================
  CORREÇÕES — 09/04/2026
===================================================== */

/* 1. Texto branco em todas as elipses/labels */
.video-label,
.clinic-video-content .video-label,
.hero-badges span,
[class*="label"],
.video-label * {
  color: #ffffff !important;
}

/* 2. Cards — layout final consolidado */
.cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
}

.card {
  width: calc(33.333% - 24px) !important;
  max-width: 380px !important;
  flex: 0 0 calc(33.333% - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Texto do card truncado em 4 linhas */
.card > p {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* "Saiba mais" sempre no fundo do card */
.card-link {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* Tablet: 2 cards por linha */
@media (max-width: 900px) {
  .card {
    width: calc(50% - 24px) !important;
    flex: 0 0 calc(50% - 24px) !important;
  }
}

/* Mobile: 1 card por linha */
@media (max-width: 600px) {
  .card {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* 3. Botão nos tratamentos — sempre embaixo do texto */
.treatment-text {
  display: flex !important;
  flex-direction: column !important;
}

.treatment-text .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/*ver mais*/

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* número de linhas visíveis */
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.card-text.expandido {
  -webkit-line-clamp: unset;
}

.card-text::after {
  content: " Ver mais";
  color: #3b82f6;
  cursor: pointer;
  font-weight: 500;
}

/* =====================================================
  1. CARDS — VER MAIS / VER MENOS
===================================================== */

/* Texto truncado em 4 linhas por padrão */
.card-text-truncated {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: all 0.3s ease;
}

/* Quando expandido, mostra tudo */
.card-text-truncated.expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Botão Ver mais */
.card-ver-mais {
  background: none;
  border: none;
  color: #5ca3ff;
  font-size: 13px;
  font-family: var(--fonte-corpo);
  cursor: pointer;
  padding: 4px 0 8px;
  font-weight: 600;
  display: block;
}

.card-ver-mais:hover {
  opacity: 0.8;
}

/* =====================================================
  2. HERO-SUB — largura igual ao título
===================================================== */

.hero-sub {
  max-width: 100% !important;
  width: 100% !important;
}

/* =====================================================
  3. CARROSSEL DA PÁGINA SOBRE
===================================================== */

.about-carousel {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  aspect-ratio: 3 / 4;   /* proporção retrato */
}

.about-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.about-slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.about-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Botões de navegação */
.about-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.about-carousel-btn:hover {
  background: rgba(0,0,0,0.8);
}

.about-carousel-btn--prev { left: 10px; }
.about-carousel-btn--next { right: 10px; }

/* Bolinhas */
.about-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.about-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}

.about-carousel-dot.active {
  background: #fff;
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .about-carousel {
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
}

/* =====================================================
  15. RESPONSIVIDADE (MOBILE) - CORREÇÕES FINAIS
===================================================== */

@media (max-width: 900px) {
  
  /* 1. Ajuste Global de Grids para uma única coluna */
  .hero-grid, 
  .about-grid, 
  .treatment-grid, 
  .treatment-grid.reverse, 
  .clinic-info-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  /* 2. Correção da Foto do Dr. Leonel (Seção Sobre) */
  .about-grid .about-img {
    grid-row: 1 !important; /* Foto em cima do texto */
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
  }

  .about-img img {
    max-width: 280px !important; /* Tamanho controlado para não esticar */
    height: auto !important;    /* Proporção real da foto */
    object-fit: contain !important; /* MOSTRA A FOTO INTEIRA SEM CORTAR O ROSTO */
    border-radius: 20px !important;
    margin: 0 auto !important;
  }

  /* 3. Correção das Fotos Circulares (Tratamentos) */
  .treatment-foto {
    width: 260px !important;  /* Círculo menor para celular */
    height: 260px !important;
    border-radius: 50% !important;
    margin: 0 auto 24px !important;
    grid-row: 1 !important;
    overflow: hidden !important;
  }

  .treatment-foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important; /* Centraliza o foco da aplicação */
  }

  /* 4. Ajuste dos Depoimentos (Garante o Círculo) */
  .card-testimonial .author-photo {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  /* 5. Ajuste do Hero (Home) */
  .hero-foto {
    height: 320px !important;
    margin-top: 20px !important;
  }
}

/* =====================================================
AJUSTES FINAIS DE ENTREGA
===================================================== */

/* 1) Garante que imagens não estourem o container */
img,
video,
iframe {
  max-width: 100%;
  display: block;
}

/* 2) Melhora consistência dos botões */
.btn,
.btn-outline,
.btn-lg,
.btn-video,
.btn-clinic-scroll {
  min-height: 44px; /* toque confortável no mobile */
}

/* 3) Evita quebra feia em botões dos cards */
.card .btn,
.card .card-link {
  word-break: normal;
  overflow-wrap: break-word;
}

/* 4) Corrige textos longos dentro de cards e blocos */
.card,
.info-card,
.clinic-info-item,
.footer-col,
.about-text,
.treatment-text {
  overflow-wrap: break-word;
}

/* 5) Dá mais segurança ao menu mobile */
@media (max-width: 768px) {
  nav#menu {
    width: min(260px, calc(100vw - 32px));
  }

  .hero,
  .page-hero,
  .section {
    overflow-x: hidden;
  }

  .btn,
  .btn-outline,
  .btn-lg {
    width: 100%;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* SOBRE - corrigir corte das fotos no celular */
@media (max-width: 768px) {
  .about-carousel {
    max-width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    background: #000 !important;
  }

  .about-carousel-track {
    height: auto !important;
  }

  .about-slide {
    min-width: 100% !important;
    height: auto !important;
  }

  .about-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }
}

/* MOBILE: textos alinhados como no desktop,
   mantendo imagens e botões centralizados */
@media (max-width: 900px) {
  /* TEXTOS */
  .hero,
  .hero-text,
  .hero h1,
  .hero-sub,
  .about-text,
  .about-text h2,
  .about-text p,
  .treatment-text,
  .treatment-text h2,
  .treatment-text p,
  .treatment-list,
  .treatment-list li,
  .section-header,
  .section-header h2,
  .section-header p,
  .contact-box,
  .contact-box h2,
  .contact-box p,
  .contact-info,
  .contact-info h2,
  .contact-info p,
  .clinic-details,
  .clinic-details h3,
  .clinic-info-item,
  .clinic-info-item div,
  .page-hero,
  .page-hero h1,
  .page-hero p,
  .breadcrumb {
    text-align: left !important;
  }

  /* Mantém os blocos de texto alinhados à esquerda, mas visualmente centralizados */
  .section-header {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* LISTAS E ITENS DE TEXTO */
  .about-list,
  .treatment-list {
    align-items: flex-start !important;
  }

  .about-list li,
  .treatment-list li,
  .clinic-info-item {
    justify-content: flex-start !important;
  }

  /* IMAGENS CONTINUAM CENTRALIZADAS */
  .hero-foto,
  .about-grid .about-img,
  .about-carousel,
  .treatment-foto,
  .map-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* BOTÕES CONTINUAM CENTRALIZADOS */
  .hero-ctas {
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-ctas .btn,
  .hero-ctas .btn-outline,
  .cta-section .btn,
  .about-text .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* BOTÃO DOS TRATAMENTOS FICA ALINHADO COM O TEXTO */
  .treatment-text .btn {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* BADGES VISUAIS PODEM CONTINUAR CENTRALIZADOS */
  .hero-badges {
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .hero-foto {
    width: 100% !important;
    display: block !important;
    margin: 20px auto 0 !important;
  }

  .hero-foto img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =====================================================
  HERO EM VÍDEO — AJUSTES FINAIS CONSOLIDADOS
  Mantém o enquadramento aprovado e evita conflitos entre
  regras repetidas no desktop e no mobile.
===================================================== */

/* Remove o fundo extra apenas da seção interna do botão */
.secao-botao-limpa {
  background: transparent !important;
  background-color: transparent !important;
  padding: 40px 0 !important;
  border: none !important;
}

/* O container interno só organiza o CTA, sem criar bloco visual */
.secao-botao-limpa .container {
  background: transparent !important;
  display: flex;
  justify-content: center;
}

/* No mobile, o botão acompanha o alinhamento do texto */
@media (max-width: 900px) {
  .secao-botao-limpa .container {
    justify-content: center !important;
  }
}

/* Desktop: seção cheia e CTA levemente ajustado para o enquadramento final */
.video-section {
  height: 100vh;
}

@media (min-width: 1024px) {
  .video-content {
    padding-right: 0 !important;
    margin-right: 40px !important;
  }
  
  .video-content .btn,
  .video-content .btn-lg,
  .video-content .btn-video {
    margin-top: -8px !important;
    margin-right: -32px !important;
    transform: translateY(-4px) translateX(16px) !important;
  }
}

/* Mobile: consolida texto, vídeo e botão num único bloco previsível */
@media (max-width: 768px) {
  .hero h1,
  .video-content h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .video-section {
    height: 580px !important;
    min-height: 580px;
    position: relative !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    flex-direction: column !important;
    padding: 0 0 40px !important;
  }

  .video-bg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center 52% !important;
  }

  .video-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.12) 30%,
      rgba(0,0,0,0.78) 62%,
      rgba(0,0,0,0.95) 100%
    ) !important;
  }

  .video-content {
    width: calc(100% - 56px) !important;
    max-width: 560px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: left !important;
    transform: none !important;
  }

  .video-content p {
    margin-bottom: 18px !important;
  }

  .video-content .secao-botao-limpa {
    padding: 18px 0 0 !important;
  }

  .video-content .secao-botao-limpa .container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .video-content .btn,
  .video-content .btn-lg,
  .video-content .btn-video {
    display: inline-flex;
    width: min(100%, 320px) !important;
    margin: 0 !important;
    justify-content: center !important;
    transform: translateY(0) !important;
  }
}

.split-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  background: #000;
}

.split-content {
  max-width: 700px;   /* largura ideal pra leitura */
  margin: 0 auto;
  text-align: center; /* centraliza tudo */
  padding: 60px 20px;
  align-items: center;
}

.split-content span,
.split-content .badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 20px;
  border-radius: 999px;
}

.split-content {
  gap: 30px; /* antes devia estar menor */
}

.split-content h2 {
  margin-bottom: 10px;
}

.split-content p {
  margin-bottom: 10px;
}

.split-content .btn {
.split-section {
  position: relative;
  display: flex;              /* remove o grid */
  justify-content: center;
  align-items: center;
  min-height: 600px;

  background: url('../img/fundo-emagrecimento.jpeg') center/cover no-repeat;
 }
}

.split-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.split-content {
  position: relative;
  z-index: 2;

  max-width: 700px;
  text-align: center;
  padding: 60px 20px;
}

.hero-foto {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  touch-action: pan-y;
}

.hero-foto img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  pointer-events: none;
}

.hero-foto::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  z-index: 1 !important;
  pointer-events: none;
}

.hero-texto {
  position: relative !important;
  z-index: 2 !important;
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  color: #fff !important;
  padding: 24px !important;
}

.hero-texto h1 {
  font-size: clamp(26px, 4vw, 54px) !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}

.hero-texto p {
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.6 !important;
}

.hero-foto {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.hero-foto img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
}

.hero-foto::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  z-index: 1 !important;
}

.hero-texto {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #fff !important;
  min-height: 100vh !important;
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px !important;
  touch-action: pan-y;
}

.hero-texto h2 {
  font-family: var(--fonte-titulo) !important;
  font-size: clamp(26px, 4vw, 54px) !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
  color: #fff !important;
}

.hero-texto p {
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.hero-texto .video-label {
  margin-bottom: 18px !important;
}

.hero-texto .btn {
  background: transparent !important;
  border: 2px solid #d9d9d9 !important;
  color: #d9d9d9 !important;
}

.hero-texto .btn:hover {
  background: #d9d9d9 !important;
  color: #000 !important;
}

@media (max-width: 768px) {
  .hero-foto {
    min-height: 80vh !important;
  }

  .hero-texto {
    min-height: 80vh !important;
    padding: 20px !important;
  }

  .hero-texto h2 {
    font-size: 24px !important;
  }

  .hero-texto p {
    font-size: 14px !important;
  }
}

@media (max-width: 768px) {
  .hero-foto {
    width: 100vw !important;
    min-height: 100vh !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .hero-foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero-texto {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
  }
}

html, body {
  width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 768px) {
  main {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero-foto {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    min-height: 100vh !important;
  }

  .hero-foto img {
    width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero-texto {
    width: calc(100% - 48px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.hero-texto {
  justify-content: flex-start !important;
  padding-top: 18vh !important;
  padding-bottom: 10vh !important;
  gap: 14px !important;
}

.hero-texto h2 {
  margin-bottom: 10px !important;
}

.hero-texto p {
  margin-bottom: 18px !important;
}

.hero-texto .btn {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .hero-texto {
    padding-top: 21vh !important;
    padding-bottom: 6vh !important;
    gap: 12px !important;
  }

  .hero-texto p {
    margin-bottom: 14px !important;
  }

  .hero-texto .btn {
    margin-top: 4px !important;
  }
}

/* =====================================================
  MOBILE — DESATIVA ANIMAÇÕES DE SCROLL
  Animações com opacity:0 e transform bloqueiam o scroll
  no iOS e Android. No mobile, elementos aparecem direto.
===================================================== */

@media (max-width: 900px) {

  /* Desativa TODOS os sistemas de animação no mobile */
  .fade-in,
  .fade-in.visible,
  .reveal,
  .reveal.visible,
  .reveal-left,
  .reveal-left.visible,
  .reveal-right,
  .reveal-right.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Remove delays de animação */
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4,
  .domino-1,
  .domino-2,
  .domino-3,
  .domino-4,
  .domino-5,
  .domino-6 {
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }

  /* Garante que nenhum elemento fique invisible */
  * {
    -webkit-backface-visibility: visible !important;
  }
}