/**
 * CSS Override para forçar estilos do Tailwind no WordPress
 * Versão: 1.0.1
 */

/* ==========================================
   TAMANHOS DE FONTE (TAILWIND)
   ========================================== */

/* text-3xl = 1.875rem (30px) */
section h2.text-3xl,
h2.text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
}

/* lg:text-4xl = 2.25rem (36px) em telas >= 1024px */
@media (min-width: 1024px) {
    section h2.lg\:text-4xl,
    h2.lg\:text-4xl {
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
    }
}

/* text-lg = 1.125rem (18px) */
section p.text-lg,
p.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

/* Parágrafos com text-muted-foreground mas sem classe de tamanho = 1rem (16px) */
section p.text-muted-foreground:not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-sm"]),
p.text-muted-foreground {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

/* text-sm = 0.875rem (14px) */
.text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

/* text-xl = 1.25rem (20px) */
.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

/* text-2xl = 1.5rem (24px) */
.text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

/* ==========================================
   FONT WEIGHTS
   ========================================== */

/* font-light = 300 */
.font-light {
    font-weight: 300 !important;
}

/* font-normal ou sem classe = 400 */
.font-normal,
p:not([class*="font-"]) {
    font-weight: 400 !important;
}

/* font-medium = 500 */
.font-medium {
    font-weight: 500 !important;
}

/* font-semibold = 600 */
.font-semibold {
    font-weight: 600 !important;
}

/* font-bold = 700 */
.font-bold {
    font-weight: 700 !important;
}

/* ==========================================
   LINE HEIGHTS
   ========================================== */

/* leading-relaxed = 1.625 */
.leading-relaxed {
    line-height: 1.625 !important;
}

/* ==========================================
   CORES DE TEXTO
   ========================================== */

/* text-medical-rose */
.text-medical-rose {
    color: hsl(3, 23%, 63%) !important;
}

/* text-muted-foreground */
.text-muted-foreground {
    color: hsl(210, 19%, 50%) !important;
}

/* text-foreground */
.text-foreground {
    color: hsl(209, 21%, 28%) !important;
}

/* ==========================================
   FONTES
   ========================================== */

/* Força Inter em tudo */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, a, button,
.text-3xl, .text-lg, .text-base,
.text-muted-foreground {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ==========================================
   ESTILOS ESPECÍFICOS
   ========================================== */

/* Italic */
.italic {
    font-style: italic !important;
}

/* Bordas */
.border-l-4 {
    border-left-width: 4px !important;
}

.border-medical-rose {
    border-left-color: hsl(3, 23%, 63%) !important;
}

/* Padding */
.pl-4 {
    padding-left: 1rem !important;
}

/* ==========================================
   IMAGENS
   ========================================== */

/* Imagem da seção Sobre - h-96 = 24rem (384px) */
section#sobre img.h-96,
img.h-96 {
    height: 24rem !important;
    width: 100% !important;
}

/* object-cover */
section#sobre img.object-cover,
img.object-cover {
    object-fit: cover !important;
}

/* rounded-lg = border-radius 0.5rem */
section#sobre img.rounded-lg,
img.rounded-lg {
    border-radius: 0.5rem !important;
}

/* shadow-md */
section#sobre img.shadow-md,
img.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Remove estilos inline de opacity do WordPress nas imagens */
section img[style*="opacity"] {
    opacity: 1 !important;
}

/* ==========================================
   REMOVE ESTILOS INLINE DO WORDPRESS
   ========================================== */

/* Remove transforms e opacity inline - EXCETO elementos com hover */
[style*="opacity"]:not(.group):not(.group *):not([class*="hover"]),
[style*="transform"]:not(.group):not(.group *):not([class*="hover"]),
[style*="transition"]:not(.group):not(.group *):not([class*="hover"]) {
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================
   ESPAÇAMENTOS
   ========================================== */

.space-y-3 > * + * {
    margin-top: 0.75rem !important;
}

.space-y-6 > * + * {
    margin-top: 1.5rem !important;
}

/* gap-6 = 1.5rem (24px) */
.gap-6 {
    gap: 1.5rem !important;
}

/* ==========================================
   MARGINS
   ========================================== */

/* mb-2 = margin-bottom: 0.5rem (8px) */
.mb-2 {
    margin-bottom: 0.5rem !important;
}

/* mb-6 = margin-bottom: 1.5rem (24px) */
.mb-6 {
    margin-bottom: 1.5rem !important;
}

/* ==========================================
   PADDINGS
   ========================================== */

/* p-8 = padding: 2rem (32px) em todos os lados */
.p-8 {
    padding: 2rem !important;
}

/* ==========================================
   SEÇÃO FORMAÇÃO
   ========================================== */

/* Background muted com 50% opacidade */
section#sobre .bg-muted\/50,
.bg-muted\/50 {
    background-color: hsl(211 50% 94% / 0.5) !important;
}

/* rounded-lg já definido para imagens, mas garantindo para divs também */
.rounded-lg {
    border-radius: 0.5rem !important;
}

/* H3 "Formação" */
section#sobre h3.text-2xl,
h3.text-2xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important;
}

section#sobre h3.font-light,
h3.font-light {
    font-weight: 300 !important;
}

section#sobre h3.text-center,
h3.text-center {
    text-align: center !important;
}

/* H4 (Graduação, Especialização, Certificação) */
section#sobre h4.font-medium,
h4.font-medium {
    font-size: 1rem !important; /* 16px - tamanho base */
    font-weight: 500 !important;
    line-height: 1.5rem !important;
}

section#sobre h4.text-foreground,
h4.text-foreground {
    color: hsl(209, 21%, 28%) !important;
}

/* text-sm nos parágrafos */
section#sobre p.text-sm,
.text-sm {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important;
}

/* text-center */
.text-center {
    text-align: center !important;
}

/* Grid */
.grid {
    display: grid !important;
}

/* md:grid-cols-3 = 3 colunas em telas >= 768px */
@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ==========================================
   RESET DE MARGINS E PADDINGS
   ========================================== */

h1, h2, h3, h4, h5, h6, p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Exceto quando tem classes específicas de margin/padding */
.mb-2, .mb-6, .p-8, .pl-4 {
    /* Preserva os margins e paddings definidos acima */
}

/* ==========================================
   SEÇÃO ESPECIALIDADES
   ========================================== */

/* Margins */
.mb-12 {
    margin-bottom: 3rem !important; /* 48px */
}

.mb-16 {
    margin-bottom: 4rem !important; /* 64px */
}

/* Gaps */
.gap-4 {
    gap: 1rem !important; /* 16px */
}

.gap-8 {
    gap: 2rem !important; /* 32px */
}

/* Max widths */
.max-w-2xl {
    max-width: 42rem !important; /* 672px */
}

.max-w-6xl {
    max-width: 72rem !important; /* 1152px */
}

/* mx-auto */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Grid cols responsivos */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Cards de especialidades */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

.border-none {
    border: none !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* Garante overflow hidden nos cards de especialidades */
section#especialidades .group,
section#especialidades .rounded-lg,
#especialidades .overflow-hidden {
    overflow: hidden !important;
}

/* Container da imagem com overflow hidden */
section#especialidades .relative.h-56,
#especialidades .relative.overflow-hidden {
    overflow: hidden !important;
}

/* Imagens dos cards - h-56 = 14rem (224px) */
section#especialidades .h-56,
.h-56 {
    height: 14rem !important; /* 224px */
}

/* Padding dos textos dos cards */
.p-6 {
    padding: 1.5rem !important; /* 24px */
}

.p-0 {
    padding: 0 !important;
}

/* space-y-2 */
.space-y-2 > * + * {
    margin-top: 0.5rem !important; /* 8px */
}

/* text-medical-blue-dark */
.text-medical-blue-dark {
    color: hsl(209, 21%, 28%) !important;
}

/* Gradientes */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}

.from-medical-blue-dark\/80 {
    --tw-gradient-from: hsl(209 21% 28% / 0.8) !important;
    --tw-gradient-to: hsl(209 21% 28% / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-medical-blue-dark\/40 {
    --tw-gradient-to: hsl(209 21% 28% / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), hsl(209 21% 28% / 0.4), var(--tw-gradient-to) !important;
}

.to-transparent {
    --tw-gradient-to: transparent !important;
}

/* Efeito de hover nos cards de especialidades */
.group {
    position: relative !important;
}

/* ==========================================
   HOVER DOS CARDS DE ESPECIALIDADES
   Sobrescreve estilos inline com máxima especificidade
   ========================================== */

/* Estado normal - garante que transition inclua transform */
html body section#especialidades .group img[style],
html body section#especialidades .group.bg-white img[style],
html body #especialidades div.group img[style],
html body section#especialidades img.group-hover\:scale-110[style] {
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: scale(1) !important;
}

/* Hover para imagens - MÁXIMA ESPECIFICIDADE para sobrescrever inline styles */
html body section#especialidades .group:hover img[style],
html body section#especialidades .group.bg-white:hover img[style],
html body section#especialidades .group:hover .group-hover\:scale-110[style],
html body section#especialidades .group:hover img.w-full[style],
html body section#especialidades div.group:hover img[style],
html body #especialidades .group:hover img[style],
html body .group:hover .group-hover\:scale-110[style],
html body section#especialidades .group:hover img.object-cover[style] {
    transform: scale(1.1) !important;
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover para shadow dos cards - MÁXIMA ESPECIFICIDADE */
html body section#especialidades .group.bg-white:hover[style],
html body section#especialidades .hover\:shadow-xl:hover[style],
html body section#especialidades div.group:hover[style],
html body #especialidades .rounded-lg:hover[style],
html body #especialidades .group:hover[style],
html body section#especialidades div.group.overflow-hidden:hover[style] {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease !important;
}

/* Posicionamento absoluto */
.absolute {
    position: absolute !important;
}

.relative {
    position: relative !important;
}

.inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Botões da seção */
.pt-8 {
    padding-top: 2rem !important; /* 32px */
}

.px-10 {
    padding-left: 2.5rem !important; /* 40px */
    padding-right: 2.5rem !important;
}

.py-6 {
    padding-top: 1.5rem !important; /* 24px */
    padding-bottom: 1.5rem !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.bg-medical-rose {
    background-color: hsl(3, 23%, 63%) !important;
}

.bg-\[#25D366\] {
    background-color: #25D366 !important;
}

/* border-t com opacidade */
.border-t {
    border-top-width: 1px !important;
}

.border-border\/30 {
    border-color: hsl(211 30% 88% / 0.3) !important;
}

/* Flex */
.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.justify-center {
    justify-content: center !important;
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row !important;
    }
}

/* text-white */
.text-white {
    color: #fff !important;
}

/* Ícones nos botões */
.mr-3 {
    margin-right: 0.75rem !important;
}

.h-6 {
    height: 1.5rem !important;
}

.w-6 {
    width: 1.5rem !important;
}

/* ==========================================
   SEÇÃO CLÍNICA
   ========================================== */

/* Títulos e textos com font-size específico */
section#clinica h2.text-3xl,
section#clinica h2.lg\:text-4xl {
    font-size: 1.875rem !important; /* 30px */
    line-height: 2.25rem !important;
}

@media (min-width: 1024px) {
    section#clinica h2.lg\:text-4xl {
        font-size: 2.25rem !important; /* 36px */
        line-height: 2.5rem !important;
    }
}

section#clinica p.text-lg {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem !important;
}

section#clinica h3.text-xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.75rem !important;
}

/* Parágrafos sem classe de tamanho = 1rem (16px) */
section#clinica p:not([class*="text-"]),
section#clinica p.font-medium {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important;
}

/* Botão Ver no Mapa */
section#clinica button {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important;
}

section#clinica button span {
    font-size: 1rem !important; /* 16px */
}

/* Items da lista */
section#clinica li {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important;
}

/* Container */
.container {
    width: 100% !important;
}

.max-w-5xl {
    max-width: 64rem !important; /* 1024px */
}

/* Grid 2 colunas */
.gap-12 {
    gap: 3rem !important; /* 48px */
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.items-start {
    align-items: flex-start !important;
}

/* Imagem da clínica - h-80 = 20rem (320px) */
section#clinica img.h-80,
.h-80 {
    height: 20rem !important; /* 320px */
}

section#clinica img.w-full,
.w-full {
    width: 100% !important;
}

section#clinica img.object-cover {
    object-fit: cover !important;
}

section#clinica img.rounded-lg {
    border-radius: 0.5rem !important;
}

section#clinica img.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Margins e Paddings específicos */
.mb-4 {
    margin-bottom: 1rem !important; /* 16px */
}

.mt-4 {
    margin-top: 1rem !important; /* 16px */
}

.pt-6 {
    padding-top: 1.5rem !important; /* 24px */
}

/* Espaçamento horizontal */
.space-x-2 > * + * {
    margin-left: 0.5rem !important; /* 8px */
}

/* Cores da clínica */
.text-medical-rose-light {
    color: hsl(16, 38%, 94%) !important;
}

.border-border {
    border-color: hsl(211, 30%, 88%) !important;
}

/* Ícones pequenos */
.w-4 {
    width: 1rem !important; /* 16px */
}

.h-4 {
    height: 1rem !important; /* 16px */
}

/* Display e alinhamento */
.inline-flex {
    display: inline-flex !important;
}

.items-center {
    align-items: center !important;
}

/* Transições */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.duration-200 {
    transition-duration: 200ms !important;
}

.duration-300 {
    transition-duration: 300ms !important;
}

.duration-700 {
    transition-duration: 700ms !important;
}

.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.transition-transform {
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transições específicas para cards de especialidades */
section#especialidades img.transition-transform,
section#especialidades .group img,
#especialidades img {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
}

section#especialidades .transition-all,
section#especialidades .group {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: box-shadow !important;
}

/* Bordas */
.border-t {
    border-top-width: 1px !important;
}

/* Listas */
section#clinica ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

section#clinica li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover state do botão */
.hover\:text-medical-rose-light:hover {
    color: hsl(16, 38%, 94%) !important;
}

/* Remove transforms e opacity inline do WordPress na seção clínica - EXCETO hover elements */
section#clinica [style*="opacity"]:not(.group):not(.group *):not([class*="hover"]),
section#clinica [style*="transform"]:not(.group):not(.group *):not([class*="hover"]),
section#clinica [style*="transition"]:not(.group):not(.group *):not([class*="hover"]) {
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================
   FOOTER
   ========================================== */

/* Bordas e espaçamentos */
footer .border-t {
    border-top-width: 1px !important;
}

footer .border-medical-soft\/20 {
    border-color: hsl(var(--medical-soft) / 0.2) !important;
}

footer .mt-8 {
    margin-top: 2rem !important; /* 32px */
}

footer .pt-8 {
    padding-top: 2rem !important; /* 32px */
}

/* Flex */
footer .flex-col {
    flex-direction: column !important;
}

@media (min-width: 768px) {
    footer .md\:flex-row {
        flex-direction: row !important;
    }
}

footer .justify-between {
    justify-content: space-between !important;
}

/* Space-y */
footer .space-y-4 > * + * {
    margin-top: 1rem !important; /* 16px */
}

@media (min-width: 768px) {
    footer .md\:space-y-0 > * + * {
        margin-top: 0 !important;
    }
}

/* Cores do footer */
footer .text-medical-soft\/80,
.text-medical-soft\/80 {
    color: hsl(var(--medical-soft) / 0.8) !important;
}

footer .text-red-400,
.text-red-400 {
    color: rgb(248, 113, 113) !important; /* Tailwind red-400 */
}

/* Font sizes do footer */
footer .text-sm,
footer p.text-sm,
footer span {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important;
}

/* ==========================================
   MENU DE NAVEGAÇÃO
   ========================================== */

/* Nav principal */
nav.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

/* Background branco (scrolled) */
nav .bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Background gradiente (no topo) */
nav.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

nav.from-medical-blue\/90 {
    --tw-gradient-from: hsl(var(--medical-blue) / 0.9) !important;
    --tw-gradient-to: hsl(var(--medical-blue) / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

nav.to-medical-rose\/80 {
    --tw-gradient-to: hsl(var(--medical-rose) / 0.8) !important;
}

nav .backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
}

nav .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
}

nav .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

nav .border-b {
    border-bottom-width: 1px !important;
}

/* Heights do nav */
nav .h-16 {
    height: 4rem !important; /* 64px */
}

@media (min-width: 1024px) {
    nav .lg\:h-20 {
        height: 5rem !important; /* 80px */
    }
}

/* Logo */
nav .cursor-pointer {
    cursor: pointer !important;
}

nav .cursor-pointer.hidden {
    display: none !important;
}

nav .h-auto {
    height: auto !important;
}

/* Menu container */
nav div.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Menu desktop */
nav .hidden {
    display: none !important;
}

@media (min-width: 1024px) {
    nav .lg\:flex {
        display: flex !important;
    }
}

nav .space-x-8 > * + * {
    margin-left: 2rem !important; /* 32px */
}

/* Botões do menu */
nav button.relative {
    position: relative !important;
}

nav button.px-3 {
    padding-left: 0.75rem !important; /* 12px */
    padding-right: 0.75rem !important;
}

nav button.py-2 {
    padding-top: 0.5rem !important; /* 8px */
    padding-bottom: 0.5rem !important;
}

nav button.text-sm {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important;
}

nav button.font-medium {
    font-weight: 500 !important;
}

nav button.font-bold {
    font-weight: 700 !important;
}

nav button.text-foreground {
    color: hsl(209, 21%, 28%) !important;
}

nav button.text-medical-blue {
    color: hsl(var(--medical-blue)) !important;
}

/* Cores dos botões */
nav button.text-white {
    color: #fff !important;
}

/* Hover dos botões */
nav button.hover\:text-medical-blue:hover {
    color: hsl(var(--medical-blue)) !important;
}

nav button.hover\:text-medical-cream:hover {
    color: hsl(var(--medical-cream)) !important;
}

/* Linha âncora (underline) */
nav button span.absolute {
    position: absolute !important;
}

nav button span.bottom-0 {
    bottom: 0 !important;
}

nav button span.left-0 {
    left: 0 !important;
}

nav button span.right-0 {
    right: 0 !important;
}

nav button span.h-0\.5 {
    height: 0.125rem !important; /* 2px */
}

nav button span.bg-medical-blue {
    background-color: hsl(var(--medical-blue)) !important;
}

nav button span.rounded-full {
    border-radius: 9999px !important;
}

/* Animação de deslizar para a âncora */
nav button span.absolute.bottom-0 {
    transform-origin: left !important;
    animation: slideIn 0.3s ease-out forwards !important;
}

@keyframes slideIn {
    from {
        transform: scaleX(0) !important;
        opacity: 0 !important;
    }
    to {
        transform: scaleX(1) !important;
        opacity: 1 !important;
    }
}

/* Menu mobile (hamburger) */
@media (min-width: 1024px) {
    nav .lg\:hidden {
        display: none !important;
    }
}

nav .p-2 {
    padding: 0.5rem !important; /* 8px */
}

nav .w-6 {
    width: 1.5rem !important; /* 24px */
}

nav .h-6 {
    height: 1.5rem !important; /* 24px */
}

nav .justify-center {
    justify-content: center !important;
}

nav .space-y-1 > * + * {
    margin-top: 0.25rem !important; /* 4px */
}

nav span.w-full {
    width: 100% !important;
}

nav span.h-0\.5 {
    height: 0.125rem !important; /* 2px */
}

nav span.bg-foreground {
    background-color: hsl(209, 21%, 28%) !important;
}

nav span.bg-white {
    background-color: #fff !important;
}

nav .drop-shadow-sm {
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) !important;
}

nav .drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) !important;
}

/* ==========================================
   MENU MOBILE
   ========================================== */

/* Container do menu mobile */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Menu aberto */
#mobile-menu:not(.hidden) {
    max-height: 500px !important;
    opacity: 1 !important;
}

/* Botões do menu mobile */
#mobile-menu button {
    width: 100% !important;
    text-align: left !important;
}

#mobile-menu button:active {
    background-color: hsl(211, 50%, 90%) !important;
}

/* Animação do hambúrguer -> X */
#mobile-menu-button span {
    transform-origin: center !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* ==========================================
   WHATSAPP FLOATING BUTTON
   ========================================== */

/* Animação de pulso */
@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-float-btn {
    animation: whatsappPulse 2s infinite !important;
}

.whatsapp-float-btn:hover {
    animation: none !important;
}