/**
 * Tema Visual: Cobre Nobre & Azul Profundo (Copper & Deep Navy)
 * Dr. Luiz Gustavo Prado - Instituto Prado
 */

:root {
  /* Tom de Cobre oficial da Logo */
  --color-action: #b87333;
  --color-action-dark: #8c4e18;
  --color-action-light: #f5dfcb;
  --color-copper: #b87333;
  --color-copper-light: #e0a370;
  --color-copper-dark: #8c4e18;

  /* Tons de Confiança (Azul Safira / Marinho Profundo) */
  --color-trust: #1e3a8a;
  --color-trust-dark: #0f2744;
  --color-trust-hover: #2563eb;

  /* Fundos e Textos */
  --color-dark: #0b132b;
  --color-dark-deep: #050811;
  --color-navbar: #171e38;
  --color-light: #f8fafc;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-background: #ffffff;
}

/* ========================================================
   1. Sobrescrita de Classes Semânticas de Ação (Cobre)
   ======================================================== */
.text-action {
  color: var(--color-action) !important;
}

.bg-action {
  background-color: var(--color-action) !important;
}

.bg-action\/5 {
  background-color: rgba(184, 115, 51, 0.05) !important;
}

.bg-action\/10 {
  background-color: rgba(184, 115, 51, 0.10) !important;
}

.bg-action\/15 {
  background-color: rgba(184, 115, 51, 0.15) !important;
}

.bg-action\/20 {
  background-color: rgba(184, 115, 51, 0.20) !important;
}

.bg-action\/40 {
  background-color: rgba(184, 115, 51, 0.40) !important;
}

.border-action {
  border-color: var(--color-action) !important;
}

.border-action\/20 {
  border-color: rgba(184, 115, 51, 0.20) !important;
}

.border-action\/40 {
  border-color: rgba(184, 115, 51, 0.40) !important;
}

.border-action\/60,
.group:hover .group-hover\:border-action\/60 {
  border-color: rgba(184, 115, 51, 0.60) !important;
}

.from-action {
  --tw-gradient-from: var(--color-action) !important;
  --tw-gradient-to: rgba(184, 115, 51, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-action\/10 {
  --tw-gradient-from: rgba(184, 115, 51, 0.10) !important;
  --tw-gradient-to: rgba(184, 115, 51, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-action\/50 {
  --tw-gradient-from: rgba(184, 115, 51, 0.50) !important;
  --tw-gradient-to: rgba(184, 115, 51, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ========================================================
   2. Sobrescrita de Classes Semânticas de Confiança (Azul)
   ======================================================== */
.text-trust {
  color: var(--color-trust-hover) !important;
}

.bg-trust {
  background-color: var(--color-trust) !important;
}

.bg-trust\/5 {
  background-color: rgba(30, 58, 138, 0.05) !important;
}

.bg-trust\/10 {
  background-color: rgba(30, 58, 138, 0.10) !important;
}

.bg-trust\/20,
.group:hover .group-hover\:bg-trust\/20 {
  background-color: rgba(30, 58, 138, 0.20) !important;
}

.border-trust\/20 {
  border-color: rgba(30, 58, 138, 0.20) !important;
}

.border-trust\/30 {
  border-color: rgba(30, 58, 138, 0.30) !important;
}

.to-trust {
  --tw-gradient-to: var(--color-trust) !important;
}

.to-trust\/10 {
  --tw-gradient-to: rgba(30, 58, 138, 0.10) !important;
}

.via-trust\/30 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(30, 58, 138, 0.30) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* ========================================================
   3. Sobrescrita de Classes Escuras (Dark / Deep Navy)
   ======================================================== */
.bg-dark {
  background-color: var(--color-dark) !important;
}

.bg-dark\/5 {
  background-color: rgba(11, 19, 43, 0.05) !important;
}

.bg-dark\/10 {
  background-color: rgba(11, 19, 43, 0.10) !important;
}

.bg-dark\/60 {
  background-color: rgba(11, 19, 43, 0.60) !important;
}

.border-dark {
  border-color: var(--color-dark) !important;
}

.text-dark {
  color: var(--color-dark) !important;
}

.text-dark\/80 {
  color: rgba(11, 19, 43, 0.80) !important;
}

/* ========================================================
   4. Sobrescrita de Classes Tailwind com Hexadecimal Embutido
   ======================================================== */
.bg-\[\#c87a54\] {
  background-color: var(--color-action) !important;
}

.bg-\[\#c87a54\]\/10 {
  background-color: rgba(184, 115, 51, 0.10) !important;
}

.bg-\[\#b87333\]\/10 {
  background-color: rgba(184, 115, 51, 0.12) !important;
}

.text-\[\#b87333\] {
  color: #b87333 !important;
}

.bg-\[\#0d7dbd\]\/10 {
  background-color: rgba(13, 125, 189, 0.12) !important;
}

.text-\[\#0d7dbd\] {
  color: #0d7dbd !important;
}

.bg-\[\#8b5cf6\]\/10 {
  background-color: rgba(139, 92, 246, 0.12) !important;
}

.text-\[\#6d28d9\] {
  color: #6d28d9 !important;
}

.bg-\[\#f59e0b\]\/10 {
  background-color: rgba(245, 158, 11, 0.12) !important;
}

.text-\[\#b45309\] {
  color: #b45309 !important;
}

.bg-\[\#f43f5e\]\/10 {
  background-color: rgba(244, 63, 94, 0.12) !important;
}

.text-\[\#be123c\] {
  color: #be123c !important;
}

.bg-\[\#c87a54\]\/15 {
  background-color: rgba(184, 115, 51, 0.15) !important;
}

.border-\[\#c87a54\] {
  border-color: var(--color-action) !important;
}

.border-\[\#c87a54\]\/30 {
  border-color: rgba(184, 115, 51, 0.30) !important;
}

.hover\:border-\[\#c87a54\]\/60:hover {
  border-color: rgba(184, 115, 51, 0.60) !important;
}

.group:hover .group-hover\:bg-\[\#c87a54\] {
  background-color: var(--color-action) !important;
}

.group:hover .group-hover\:text-\[\#c87a54\],
.group:hover .group-hover\:text-action {
  color: var(--color-action) !important;
}

.from-\[\#c87a54\] {
  --tw-gradient-from: var(--color-action) !important;
  --tw-gradient-to: rgba(184, 115, 51, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-\[\#c87a54\]\/5 {
  --tw-gradient-from: rgba(184, 115, 51, 0.05) !important;
  --tw-gradient-to: rgba(184, 115, 51, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-\[\#9e542c\] {
  --tw-gradient-to: var(--color-action-dark) !important;
}

.text-\[\#9e542c\] {
  color: var(--color-action-dark) !important;
}

.text-\[\#f2d5c4\] {
  color: var(--color-action-light) !important;
}

.bg-\[\#0d7dbd\]\/10 {
  background-color: rgba(30, 58, 138, 0.10) !important;
}

.from-\[\#0d7dbd\] {
  --tw-gradient-from: var(--color-trust) !important;
  --tw-gradient-to: rgba(30, 58, 138, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-\[\#0d7dbd\] {
  --tw-gradient-stops: var(--tw-gradient-from), var(--color-trust) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-\[\#08527d\] {
  --tw-gradient-to: var(--color-trust-dark) !important;
}

.text-\[\#0d7dbd\] {
  color: var(--color-trust-hover) !important;
}

.bg-\[\#0a0a1a\] {
  background-color: var(--color-dark-deep) !important;
}

.bg-\[\#171717\],
.bg-\[\#1a1a2e\] {
  background-color: var(--color-dark) !important;
}

/* ========================================================
   5. Botões e Elementos Chave em Cobre Nobre
   ======================================================== */
.btn-action {
  background: linear-gradient(135deg, #b87333 0%, #8c4e18 100%) !important;
  box-shadow: 0 4px 15px rgba(184, 115, 51, 0.35) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-action:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(184, 115, 51, 0.55) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f2744 100%) !important;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.35) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.55) !important;
}

.btn-secondary {
  border-color: var(--color-action) !important;
  color: var(--color-action) !important;
  background: transparent !important;
}

.btn-secondary:hover {
  background: var(--color-action) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* ========================================================
   6. Gradiente Exclusivo em Tons de Cobre (Sem Azul)
   ======================================================== */
.gradient-text {
  background: linear-gradient(135deg, #e0a370 0%, #b87333 45%, #8c4e18 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
}

.copper-gradient {
  background: linear-gradient(135deg, #f5dfcb 0%, #b87333 50%, #8c4e18 100%) !important;
}

.link-underline:after {
  background: var(--color-action) !important;
}

.glass-dark {
  background: rgba(11, 19, 43, 0.94) !important;
  border-color: rgba(184, 115, 51, 0.15) !important;
}

.shadow-\[0_0_30px_rgba\(24\,207\,198\,0\.4\)\] {
  box-shadow: 0 0 30px rgba(184, 115, 51, 0.35) !important;
}

.shadow-\[0_0_0_4px_rgba\(26\,206\,196\,0\.15\)\] {
  box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.20) !important;
}

.shadow-\[0_8px_30px_rgba\(26\,206\,196\,0\.08\)\] {
  box-shadow: 0 8px 30px rgba(184, 115, 51, 0.12) !important;
}

.shadow-\[0_4px_15px_rgba\(13\,125\,189\,0\.3\)\] {
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.35) !important;
}

.shadow-\[0_0_30px_rgba\(13\,125\,189\,0\.4\)\] {
  box-shadow: 0 0 30px rgba(30, 58, 138, 0.35) !important;
}

*:focus-visible {
  outline: 2px solid var(--color-action) !important;
  outline-offset: 2px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-action-dark) !important;
}

::selection {
  background: rgba(184, 115, 51, 0.25) !important;
  color: var(--color-dark) !important;
}

/* ========================================================
   7. Estilização do Menu Navbar (#171e38)
   ======================================================== */
nav.fixed .container-master > .glass,
nav#navbar .glass,
header nav .glass,
[data-cms-section="header"] .glass {
  background: #171e38 !important;
  background-color: #171e38 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Links e textos da Navbar sobre o fundo escuro #171e38 */
nav.fixed .text-text-main,
nav#navbar .text-text-main,
[data-cms-section="header"] .text-text-main,
nav.fixed a.text-xs,
nav#navbar a.text-xs,
[data-cms-section="header"] a.text-xs {
  color: rgba(255, 255, 255, 0.9) !important;
}

nav.fixed .text-text-main:hover,
nav#navbar .text-text-main:hover,
[data-cms-section="header"] .text-text-main:hover,
nav.fixed a.text-xs:hover,
nav#navbar a.text-xs:hover,
[data-cms-section="header"] a.text-xs:hover {
  color: var(--color-action) !important;
}

/* ==========================================================================
   DROPDOWN DA NAVBAR (HOME EM REACT E PÁGINAS PHP)
   ========================================================================== */

/* Container relativo de navegação */
nav.fixed .relative,
nav#navbar .relative,
[data-cms-section="header"] .relative,
nav.fixed .dropdown-container,
nav#navbar .dropdown-container {
  position: relative !important;
}

/* Painel suspenso do dropdown (React e PHP) */
nav.fixed .relative > div.absolute.top-full,
nav.fixed .dropdown-menu,
nav#navbar .dropdown-menu,
[data-cms-section="header"] .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 240px !important;
  padding-top: 12px !important;
  z-index: 100 !important;
}

/* Caixa com efeito de vidro do submenu (React e PHP) */
nav.fixed .glass-dark,
nav#navbar .glass-dark,
[data-cms-section="header"] .glass-dark,
nav.fixed .relative > div.absolute.top-full > div,
.dropdown-menu > div {
  padding: 6px !important;
  background: #171e38 !important;
  background-color: #171e38 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1rem !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Todos os links do submenu (React e PHP): alinhamento à esquerda, vertical e espaçamento milimétrico idêntico */
nav.fixed .glass-dark a,
nav#navbar .glass-dark a,
nav.fixed .dropdown-menu a,
nav#navbar .dropdown-menu a,
[data-cms-section="header"] .dropdown-menu a,
nav.fixed .relative > div.absolute.top-full a,
.dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease !important;
}

nav.fixed .glass-dark a:hover,
nav#navbar .glass-dark a:hover,
nav.fixed .dropdown-menu a:hover,
nav#navbar .dropdown-menu a:hover,
[data-cms-section="header"] .dropdown-menu a:hover,
nav.fixed .relative > div.absolute.top-full a:hover,
.dropdown-menu a:hover {
  color: var(--color-action) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  padding-left: 20px !important;
}

/* Dropdown da navbar nas páginas PHP - Animação de entrada e saída fluida */
nav.fixed .group .dropdown-menu,
nav#navbar .group .dropdown-menu,
[data-cms-section="header"] .group .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  left: 50% !important;
  transform: translateX(-50%) translateY(6px) !important;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s;
  display: block !important;
}

nav.fixed .group:hover .dropdown-menu,
nav.fixed .group.is-open .dropdown-menu,
nav#navbar .group:hover .dropdown-menu,
nav#navbar .group.is-open .dropdown-menu,
[data-cms-section="header"] .group:hover .dropdown-menu,
[data-cms-section="header"] .group.is-open .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
}

nav.fixed .group:hover [data-lucide="chevron-down"],
nav.fixed .group:hover svg.lucide-chevron-down,
nav.fixed .group.is-open [data-lucide="chevron-down"],
nav.fixed .group.is-open svg.lucide-chevron-down,
nav#navbar .group:hover [data-lucide="chevron-down"],
nav#navbar .group:hover svg.lucide-chevron-down,
nav#navbar .group.is-open [data-lucide="chevron-down"],
nav#navbar .group.is-open svg.lucide-chevron-down {
  transform: rotate(180deg) !important;
}

nav.fixed .group [data-lucide="chevron-down"],
nav.fixed .group svg.lucide-chevron-down,
nav#navbar .group [data-lucide="chevron-down"],
nav#navbar .group svg.lucide-chevron-down {
  transition: transform 0.3s ease;
}

/* Chevron e ícones na barra de navegação */
nav.fixed svg,
nav#navbar svg,
[data-cms-section="header"] svg {
  stroke: currentColor;
}

/* Centralização vertical perfeita e proporção elegante da Logo SVG no Navbar */
nav.fixed .container-master > .glass > a:first-child,
nav#navbar .container-master > .glass > a:first-child,
[data-cms-section="header"] .container-master > .glass > a:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  line-height: 0 !important;
}

nav.fixed .container-master > .glass > a:first-child img,
nav#navbar .container-master > .glass > a:first-child img,
[data-cms-section="header"] .container-master > .glass > a:first-child img,
nav.fixed img[alt*="Prado"],
nav.fixed img[src*="logo"] {
  height: 35px !important;
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto 0 !important;
  mix-blend-mode: normal !important;
  vertical-align: middle !important;
}

@media (min-width: 768px) {
  nav.fixed .container-master > .glass > a:first-child img,
  nav#navbar .container-master > .glass > a:first-child img,
  [data-cms-section="header"] .container-master > .glass > a:first-child img {
    height: 38px !important;
    max-height: 40px !important;
  }
}

/* Botão hambúrguer no mobile */
nav.fixed button[aria-label="Toggle menu"],
nav.fixed button[aria-label="Abrir Menu"],
nav#navbar #mobile-menu-btn {
  color: #ffffff !important;
}
nav.fixed button[aria-label="Toggle menu"] svg,
nav.fixed button[aria-label="Abrir Menu"] svg,
nav#navbar #mobile-menu-btn svg {
  stroke: #ffffff !important;
}

/* O ícone do menu é branco, mas o botão traz `hover:bg-gray-100` do Tailwind,
   que pinta o fundo de cinza quase branco. No celular não existe "tirar o
   mouse": o estado :hover fica retido depois do toque, e o X branco ficava sobre
   um círculo claro — praticamente invisível. Aqui o realce vira um véu claro
   translúcido, que aparece sobre o azul-escuro da barra sem apagar o ícone. */
nav#navbar button:hover,
nav#navbar button:focus,
nav#navbar button:active {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* ========================================================
   8. Substituição Completa de Degradês Mistos (Cobre Puro)
   ======================================================== */

/* Qualquer elemento combinando from-action com to-trust vira Cobre Metálico Puro */
.from-action.to-trust,
.from-trust.to-action,
[class*="from-action"][class*="to-trust"],
[class*="from-trust"][class*="to-action"] {
  background-image: linear-gradient(135deg, #e0a370 0%, #b87333 50%, #8c4e18 100%) !important;
}

/* Versões suaves de cards e fundos de ícones */
[class*="from-action/10"][class*="to-trust/10"],
.from-action\/10.to-trust\/10 {
  background-image: linear-gradient(135deg, rgba(224, 163, 112, 0.20) 0%, rgba(184, 115, 51, 0.12) 50%, rgba(140, 78, 24, 0.18) 100%) !important;
}

/* Linha vertical divisória do protocolo/timeline */
.from-action\/50.via-trust\/30.to-transparent,
[class*="from-action"][class*="via-trust"] {
  background-image: linear-gradient(to bottom, rgba(184, 115, 51, 0.6) 0%, rgba(184, 115, 51, 0.2) 50%, transparent 100%) !important;
}

/* Badges e Avatares com Degradê no Footer e Seções */
.w-8.h-8.rounded-full[class*="from-action"],
.w-10.h-10.rounded-full[class*="from-action"],
.w-16.h-16.rounded-full[class*="from-action"],
.w-20.h-20.rounded-full[class*="from-action"] {
  background-image: linear-gradient(135deg, #e0a370 0%, #b87333 50%, #8c4e18 100%) !important;
}

/* Garantir que todos os títulos e textos com classe gradient-text sejam 100% cobre */
.gradient-text,
span.gradient-text,
strong.gradient-text,
h1 .gradient-text,
h2 .gradient-text,
h3 .gradient-text,
p .gradient-text {
  background: linear-gradient(135deg, #e0a370 0%, #b87333 45%, #8c4e18 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
}

/* Descida das letras (g, p, y, ç) não pode ser cortada.
   Com background-clip:text o degradê só é pintado DENTRO da caixa do elemento,
   e como o texto em si fica transparente, tudo que passa da caixa some. Os
   títulos usam line-height 1 (vem do próprio text-5xl/text-6xl do Tailwind),
   que é mais apertado que a altura natural da Montserrat: a descida invade uns
   0.1em abaixo da caixa e o rabinho do "g" desaparecia — em "Nutrologia",
   "pacientes", "Blog de Nutrologia e Saúde".
   A folga entra como padding (aumenta a área pintada) e sai como margem
   negativa de mesmo valor, então a caixa cresce para o degradê mas o
   espaçamento da página continua idêntico. */
.gradient-text,
span.gradient-text,
strong.gradient-text,
h1 .gradient-text,
h2 .gradient-text,
h3 .gradient-text,
p .gradient-text {
  padding-top: 0.12em;
  padding-bottom: 0.16em;
  margin-top: -0.12em;
  margin-bottom: -0.16em;
}

/* ========================================================
   9. Seção NOSSOS SERVIÇOS & Cards em Cobre Nobre
   ======================================================== */
.from-\[\#0d3d4d\],
.from-\[\#3d2410\] {
  --tw-gradient-from: #3d2410 !important;
  --tw-gradient-to: rgba(61, 36, 16, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-\[\#0a2f3a\],
.via-\[\#2a180a\] {
  --tw-gradient-to: rgba(42, 24, 10, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #2a180a var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-\[\#061f26\],
.to-\[\#1a0e06\] {
  --tw-gradient-to: #1a0e06 !important;
}

/* Forçar qualquer texto ou elemento #18cfc6 remanescente para o tom de Cobre */
[style*="#18cfc6"],
[style*="rgb(24, 207, 198)"] {
  color: var(--color-action) !important;
}

/* ========================================================
   10. Botão Redondo do Instagram no Navbar
   ======================================================== */
.navbar-instagram-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 9999px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(220, 39, 67, 0.40) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  border: none !important;
}

.navbar-instagram-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 5px 18px rgba(220, 39, 67, 0.65) !important;
}

.navbar-instagram-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  display: block;
}

/* Botão largo do Instagram dentro do menu do celular. No desktop o Instagram é
   o círculo ao lado do CTA; no celular aquele bloco todo some, então o link
   ganha aqui o mesmo peso do "Agendar Consulta". */
.instagram-mobile-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(220, 39, 67, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.instagram-mobile-btn:hover,
.instagram-mobile-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 39, 67, 0.5);
}

.instagram-mobile-btn svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff !important;
  flex-shrink: 0;
}

/* Instagram e Agendar Consulta formam um par de ações: ficam mais juntos entre
   si (8px) do que o respiro de 32px que os separa da lista de links acima.
   O container usa `gap: 16px`, que não dá para afinar só neste par — daí a
   margem negativa puxando o botão seguinte, seja ele qual for. */
.instagram-mobile-btn + * {
  margin-top: -0.5rem;
}

/* Container de CTA no Navbar (Instagram + Botão Agendar Consulta) lado a lado.
   Só a partir de 1024px: no celular quem aparece é a logo e o botão de menu.
   O `display: flex !important` sem limite de largura empurrava o container de
   270px para dentro da barra no celular e espremia a logo até largura zero. */
@media (min-width: 1024px) {
  #navbar div:has(> .navbar-instagram-btn),
  #navbar div:has(> a[href*="wa.me"]):not(.gap-8),
  #navbar .ml-4 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* Abaixo de 1024px o container do CTA some.
   Atenção ao escape: em CSS a classe `lg:flex` do Tailwind se escreve
   `.lg\:flex`, com UMA barra invertida. Aqui estava `.lg\\:flex`, que vira
   "classe lg\ seguida do pseudo-seletor :flex" — inválido. E basta um seletor
   inválido na lista para o navegador descartar a REGRA INTEIRA, o que também
   anulava a terceira linha (essa sim correta) e deixava o botão no celular. */
@media (max-width: 1023px) {
  #navbar .hidden.lg\:block,
  #navbar .hidden.lg\:flex,
  #navbar div:has(> .navbar-instagram-btn):not(.mobile-visible) {
    display: none !important;
  }
}

/* ========================================================
   10b. Botão "Agendar Consulta" do Navbar com anel giratório
   As páginas em PHP (sobre, blog, serviços) não compartilham código com o
   componente React GradientButton da home — @property --r, @keyframes
   rotate-gradient e .rotatingGradient já existem em assets/css/style.css
   (usados pelo botão da home), então só falta a moldura própria do navbar
   pra reaproveitar a mesma animação.
   ======================================================== */
.navbar-cta-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* Mesma caixa do GradientButton do React na home (min-width 220 / altura 42
     / sem padding lateral), pro botão ter largura idêntica nas duas versões. */
  min-width: 220px;
  height: 42px;
  padding: 0;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  animation: rotate-gradient 3s linear infinite;
  background: linear-gradient(var(--r), var(--color-action), var(--color-trust));
  transition: transform 0.3s ease;
}

.navbar-cta-btn:hover {
  transform: scale(1.05);
}

.navbar-cta-btn::after {
  content: "";
  display: block;
  position: absolute;
  inset: 2px;
  background: var(--color-dark);
  border-radius: 45px;
  z-index: 1;
}

.navbar-cta-btn-label {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff !important;
}

/* ========================================================
   11. Redução de Espaçamento entre o Hero e o Card de Benefícios
   ======================================================== */
#home {
  min-height: auto !important;
  padding-bottom: 2rem !important;
}

#home > .container-master:last-of-type,
#home > .container-master:nth-of-type(2),
#home .container-master.mt-32,
#home .container-master:has([data-cms-section="benefits"]),
#home .container-master:has(.rounded-\[24px\]),
#home [data-cms-section="benefits"] {
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

@media (min-width: 768px) {
  #home {
    padding-bottom: 2.5rem !important;
  }

  #home > .container-master:last-of-type,
  #home > .container-master:nth-of-type(2),
  #home .container-master.mt-32,
  #home .container-master:has([data-cms-section="benefits"]),
  #home .container-master:has(.rounded-\[24px\]),
  #home [data-cms-section="benefits"] {
    margin-top: 2rem !important;
    margin-bottom: 2.5rem !important;
  }
}

@media (min-width: 1024px) {
  #home {
    padding-bottom: 3rem !important;
  }

  #home > .container-master:last-of-type,
  #home > .container-master:nth-of-type(2),
  #home .container-master.mt-32,
  #home .container-master:has([data-cms-section="benefits"]),
  #home .container-master:has(.rounded-\[24px\]),
  #home [data-cms-section="benefits"] {
    margin-top: 2.25rem !important;
    margin-bottom: 3rem !important;
  }
}

/* ========================================================
   12. Super Título MEMBROS & ASSOCIAÇÕES em Tons de Cinza
   ======================================================== */
[data-cms-section="credentials"] span.micro-text:not(.text-action),
#credentials span.micro-text:not(.text-action),
.micro-text.text-trust,
.micro-text:not(.text-action) {
  color: var(--color-text-muted) !important;
}

/* ========================================================
   13. Botão do WhatsApp na Seção FAQ / Perguntas Frequentes (Verde)
   ======================================================== */
#faq a[href*="wa.me"],
[data-cms-section="faq"] a[href*="wa.me"],
.btn-whatsapp-faq {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.40) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

#faq a[href*="wa.me"]:hover,
[data-cms-section="faq"] a[href*="wa.me"]:hover,
.btn-whatsapp-faq:hover {
  background: linear-gradient(135deg, #2ae771 0%, #15a090 100%) !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.60) !important;
  transform: translateY(-2px) scale(1.03) !important;
  color: #ffffff !important;
}

#faq a[href*="wa.me"] svg,
[data-cms-section="faq"] a[href*="wa.me"] svg,
.btn-whatsapp-faq svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* ========================================================
   14. Carrossel de Depoimentos: Altura e Z-Index dos Controles
   ======================================================== */
[data-cms-section="testimonials"] .relative.w-full.max-w-5xl,
#testimonials .relative.w-full.max-w-5xl {
  min-height: 540px;
  padding-bottom: 4.5rem !important;
}

[data-cms-section="testimonials"] .flex.gap-3.justify-center,
#testimonials .flex.gap-3.justify-center {
  z-index: 25 !important;
  position: absolute !important;
  bottom: 0.5rem !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  [data-cms-section="testimonials"] .relative.w-full.max-w-5xl,
  #testimonials .relative.w-full.max-w-5xl {
    min-height: 640px;
    padding-bottom: 5rem !important;
  }
}

/* ========================================================
   15. Espaçamento do Topo e Seções nas Páginas de Serviço
   ======================================================== */
[data-cms-section="service_page"],
main[data-cms-section="service_page"],
.service-page-main {
  padding-top: 150px !important;
  padding-bottom: 3.5rem !important;
}

@media (min-width: 768px) {
  [data-cms-section="service_page"],
  main[data-cms-section="service_page"],
  .service-page-main {
    padding-top: 175px !important;
    padding-bottom: 4rem !important;
  }
}

@media (min-width: 1024px) {
  [data-cms-section="service_page"],
  main[data-cms-section="service_page"],
  .service-page-main {
    padding-top: 195px !important;
    padding-bottom: 4.5rem !important;
  }
}

[data-cms-section="service_page"] .hero-service-section {
  margin-bottom: 5rem !important;
}

@media (min-width: 1024px) {
  [data-cms-section="service_page"] .hero-service-section {
    margin-bottom: 7rem !important;
  }
}

[data-cms-section="service_page"] .service-section-gap {
  margin-bottom: 5rem !important;
}

@media (min-width: 1024px) {
  [data-cms-section="service_page"] .service-section-gap {
    margin-bottom: 7rem !important;
  }
}

[data-cms-section="service_page"] .service-cta-section {
  margin-bottom: 0 !important;
}

.service-cta-banner {
  background: #0b132b !important;
  background-color: #0b132b !important;
  color: #ffffff !important;
  border-radius: 32px !important;
}

.service-benefit-card {
  background: #0b132b !important;
  background-color: #0b132b !important;
  border: 1px solid rgba(184, 115, 51, 0.25) !important;
  border-radius: 24px !important;
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

@media (min-width: 640px) {
  .service-benefit-card {
    padding: 28px 24px !important;
  }
}

@media (min-width: 1024px) {
  .service-benefit-card {
    padding: 32px 28px !important;
  }
}

.service-benefit-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(184, 115, 51, 0.6) !important;
  box-shadow: 0 16px 36px rgba(11, 19, 43, 0.4) !important;
}

/* Ícone de check perfeitamente alinhado na coluna do card */
.service-benefit-card .service-card-icon,
.service-benefit-card > div > div:first-child {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(184, 115, 51, 0.15) !important;
  border: 1px solid rgba(184, 115, 51, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
  flex-shrink: 0 !important;
}

.service-benefit-card h3 {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
}

.service-benefit-card p {
  color: #f5dfcb !important;
  opacity: 0.9 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: left !important;
}

.service-benefit-card i,
.service-benefit-card svg {
  color: #e0a370 !important;
  width: 22px !important;
  height: 22px !important;
}

/* Cards das etapas do acompanhamento (Seção 3) - Alinhamento e padding em mobile e desktop */
.service-step-card {
  padding: 24px 20px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .service-step-card {
    padding: 28px 24px !important;
  }
}

@media (min-width: 1024px) {
  .service-step-card {
    padding: 32px 28px !important;
  }
}

/* Logo do Rodapé - Tamanho proporcional e perfeitamente equilibrado */
#footer img,
footer img,
[data-cms-section="footer"] img,
footer a img,
#footer a img {
  height: 46px !important;
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
  display: block !important;
}






/* ========================================================
   16. Botão flutuante de agendamento (rodapé fixo, só no celular)
   ======================================================== */

/* Nasce escondido: quem acabou de chegar ainda está lendo. O JS solta a classe
   .cms-cta-visivel depois de 20s de visita (contados na sessão inteira, não a
   cada página) para o convite chegar quando já houve algum interesse. */
.cms-cta-flutuante {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
  pointer-events: none;
}

.cms-cta-flutuante.cms-cta-visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Com o menu aberto, o próprio menu já traz um "Agendar Consulta": o flutuante
   ficava por cima dele. Some enquanto o menu estiver aberto. */
.cms-cta-flutuante.cms-cta-recolhido {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
}

/* Mesmo verde do botão de WhatsApp do FAQ (seção 13), para o botão anunciar o
   canal que ele abre. O background-image precisa ser zerado à parte porque o
   .btn-action do Tailwind pinta um degradê cobre por baixo. */
.cms-cta-flutuante > a {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.cms-cta-flutuante > a:hover,
.cms-cta-flutuante > a:active {
  background: linear-gradient(135deg, #2ee071 0%, #149c8b 100%) !important;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.6) !important;
}

/* A altura do carrossel de depoimentos acompanha o depoimento à mostra (ver
   updateTestimonialsContainerHeight no cms-runtime.js). Como não há giro
   automático, ela só muda quando a pessoa troca de slide — a transição faz a
   mudança parecer parte do movimento, e não um solavanco na página. */
[data-cms-section="testimonials"] .relative.w-full.max-w-5xl,
#testimonials .relative.w-full.max-w-5xl {
  transition: min-height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ========================================================
   17. Folga da última linha de cards em "O plano para o seu corpo"
   ======================================================== */

/* Os cards desta seção têm a imagem transbordando por cima, e para isso usam
   `mt-20` (80px) junto com `h-full`: ficam com a altura da linha do grid mas
   começam 80px mais abaixo, sobrando 80px pendurados para fora da linha.
   Entre uma linha e outra o `gap-y-24` do grid absorve essa sobra — mas depois
   da ÚLTIMA linha não existe gap, e o card avançava sobre a seção seguinte
   (que ainda o cortava, por causa do `overflow: hidden` da seção).
   Esta margem devolve à última linha o mesmo respiro que as outras já têm. */
#services .grid {
  margin-bottom: 5rem;
}

/* ========================================================
   18. Altura proporcional e compacta dos cards em #services
   ======================================================== */
#services .card-premium {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 24px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

#services .card-premium .text-center {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

#services .card-premium h3 {
  margin-bottom: 0.65rem !important;
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
}

#services .card-premium p {
  margin-bottom: 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

#services .card-premium .flex-wrap {
  gap: 0.4rem !important;
  margin-top: 0.25rem !important;
}

#services .card-premium .flex-wrap > span {
  font-size: 0.72rem !important;
  padding: 0.25rem 0.65rem !important;
  line-height: 1.3 !important;
}

/* ========================================================
   19. Espaçamento Superior Generoso da Seção Antes e Depois
   ======================================================== */
#resultados-antes-depois,
[data-cms-section="before_after"],
.service-before-after-section {
  position: relative;
  padding-top: 5.5rem !important;
  padding-bottom: 2.5rem !important;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  #resultados-antes-depois,
  [data-cms-section="before_after"],
  .service-before-after-section {
    padding-top: 7.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}