/* Reset e base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Menu Desktop - Media Query */
@media (min-width: 768px) {
    /* Mostrar menu desktop e esconder hambúrguer */
    #menuToggle {
        display: none !important;
    }
    
    nav[aria-label="Menu principal"] {
        display: flex !important;
    }
}

/* Menu Mobile - Esconder menu desktop */
@media (max-width: 767px) {
    nav[aria-label="Menu principal"] {
        display: none !important;
    }
    
    #menuToggle {
        display: block !important;
    }
}

:root {
    /* HSL Colors - Paleta Profissional (Azul escuro/Cinza) */
    --background: 222 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    /* Primary: Azul escuro profissional (#2c3e50 = 210 24% 26%) */
    --primary: 210 24% 26%;
    --primary-foreground: 210 40% 98%;
    /* Secondary: Cinza azulado (#4a5568 = 215 16% 35%) */
    --secondary: 215 16% 35%;
    --secondary-foreground: 210 40% 98%;
    --muted: 215 16% 35%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 215 16% 35%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    /* Border: Cinza claro (#e2e8f0 = 210 20% 92%) */
    --border: 210 20% 92%;
    --input: 215 16% 35%;
    --ring: 210 24% 26%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    
    /* Custom therapy colors - Tons mais discretos */
    /* Accent: Azul médio profissional (#4a90e2 = 210 72% 58%) */
    --healing: 210 72% 58%;
    --healing-light: 210 72% 65%;
    --warmth: 25 95% 53%;
    --calm: 200 60% 65%;
    --trust: 215 16% 35%;
    
    /* Light theme colors for journey */
    --light-background: 0 0% 100%;
    --light-foreground: 215 16% 25%;
    --light-card: 0 0% 100%;
    --light-card-foreground: 215 16% 25%;
    --light-muted: 210 20% 98%;
    --light-muted-foreground: 215 16% 45%;
    
    /* Shadows - Mais sutis e profissionais */
    --shadow-gentle: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-embrace: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    
    /* Animations - Mais lentas e discretas */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    /* Tipografia profissional: serif para títulos, sans-serif para corpo */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: hsl(var(--light-background));
    color: hsl(var(--light-foreground));
    line-height: 1.8;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Tipografia serif para títulos principais */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.space-y-4 > * + * { margin-top: 1.5rem; }
.space-y-6 > * + * { margin-top: 2rem; }
.space-y-8 > * + * { margin-top: 2.5rem; }
.space-y-12 > * + * { margin-top: 4rem; }
.space-y-16 > * + * { margin-top: 5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2rem; }
.mb-8 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 4rem; }
.mb-16 { margin-bottom: 5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2rem; }
.mt-8 { margin-top: 2.5rem; }
.mt-12 { margin-top: 4rem; }
.mt-16 { margin-top: 5rem; }
.py-20 { padding-top: 6rem; padding-bottom: 6rem; }
.py-16 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 7rem; padding-bottom: 7rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.p-6 { padding: 2rem; }
.p-8 { padding: 2.5rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.gap-3 { gap: 1.25rem; }
.gap-4 { gap: 1.5rem; }
.gap-6 { gap: 2rem; }
.gap-8 { gap: 2.5rem; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-12 { height: 3rem; }
.h-32 { height: 8rem; }
.h-48 { height: 12rem; }
.h-80 { height: 20rem; }
.w-12 { width: 3rem; }
.w-32 { width: 8rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-0 { border-width: 0; }
.border-l-4 { border-left-width: 4px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.transition-all { transition: var(--transition-smooth); }
.duration-300 { transition-duration: 300ms; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.tracking-tight { letter-spacing: -0.025em; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-xs { font-size: 0.8125rem; line-height: 1rem; }
.text-sm { font-size: 0.9375rem; line-height: 1.25rem; }
.secondary-heading {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
}
.text-lg { font-size: 1.1875rem; line-height: 1.75rem; }
.text-xl { font-size: 1.3125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5625rem; line-height: 2rem; }
.text-3xl { font-size: 1.9375rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.3125rem; line-height: 2.5rem; }
.text-5xl { font-size: 3.0625rem; line-height: 1; }
.text-6xl { font-size: 3.8125rem; line-height: 1; }

/* Color classes - Melhor contraste */
.text-foreground { color: hsl(var(--light-foreground)); }
.text-muted-foreground { color: hsl(215 20.2% 50%); }
.text-primary { color: hsl(var(--primary)); }
.text-healing { color: hsl(var(--healing)); }
.text-warmth { color: hsl(var(--warmth)); }
.text-trust { color: hsl(var(--trust)); }
.text-dark { color: hsl(222 84% 4.9%); }
.text-medium { color: hsl(215 20.2% 40%); }
.bg-background { background-color: hsl(var(--light-background)); }
.bg-card { background-color: hsl(var(--light-card)); }
.bg-muted { background-color: hsl(var(--light-muted)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-healing { background-color: hsl(var(--healing)); }
.bg-warmth { background-color: hsl(var(--warmth)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-healing { border-color: hsl(var(--healing)); }
.border-warmth { border-color: hsl(var(--warmth)); }

/* Journey-based sections - Melhor transição */
.section-dark {
    background: hsl(var(--light-background));
    position: relative;
}

.section-mid {
    background: hsl(210 20% 98%);
    position: relative;
}

.section-light {
    background: hsl(0 0% 100%);
    position: relative;
}

.section-final {
    background: hsl(0 0% 100%);
    position: relative;
}

/* Background utilities */
.bg-muted\/30 { background-color: hsl(var(--light-muted) / 0.6); }
.bg-muted\/50 { background-color: hsl(var(--light-muted) / 0.8); }
.bg-card\/80 { background-color: hsl(var(--light-card) / 0.95); }
.bg-primary\/5 { background-color: hsl(var(--primary) / 0.08); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.12); }
.bg-primary\/20 { background-color: hsl(var(--primary) / 0.2); }
.bg-healing\/5 { background-color: hsl(var(--healing) / 0.08); }
.bg-healing\/10 { background-color: hsl(var(--healing) / 0.12); }
.bg-warmth\/10 { background-color: hsl(var(--warmth) / 0.12); }
.bg-calm\/10 { background-color: hsl(var(--calm) / 0.12); }

/* Gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-primary\/5 { --tw-gradient-from: hsl(var(--primary) / 0.08); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-healing\/5 { --tw-gradient-to: hsl(var(--healing) / 0.08); }
.from-healing\/5 { --tw-gradient-from: hsl(var(--healing) / 0.08); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-transparent { --tw-gradient-to: transparent; }
.from-primary { --tw-gradient-from: hsl(var(--primary)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-healing { --tw-gradient-to: hsl(var(--healing)); }
.from-primary\/10 { --tw-gradient-from: hsl(var(--primary) / 0.12); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-healing\/10 { --tw-gradient-to: hsl(var(--healing) / 0.12); }
.from-healing\/10 { --tw-gradient-from: hsl(var(--healing) / 0.12); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-warmth\/10 { --tw-gradient-from: hsl(var(--warmth) / 0.12); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-calm\/10 { --tw-gradient-from: hsl(var(--calm) / 0.12); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-calm\/10 { --tw-gradient-to: hsl(var(--calm) / 0.12); }
.to-primary\/10 { --tw-gradient-to: hsl(var(--primary) / 0.12); }
.to-calm\/5 { --tw-gradient-to: hsl(var(--calm) / 0.08); }

/* Background clip text */
.bg-clip-text { background-clip: text; -webkit-background-clip: text; }
.text-transparent { color: transparent; }

/* Shadow utilities */
.shadow-gentle { box-shadow: var(--shadow-gentle); }
.shadow-embrace { box-shadow: var(--shadow-embrace); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-hover { box-shadow: var(--shadow-hover); }

/* Card styles - Minimalista e profissional */
.card {
    background-color: hsl(var(--light-card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    box-shadow: var(--shadow-gentle);
    transition: var(--transition-smooth);
    overflow: hidden;
    position: relative;
}

/* Remover gradiente colorido do topo */
.card::before {
    display: none;
}

.card:hover {
    box-shadow: var(--shadow-card);
    border-color: hsl(210 24% 40%);
    /* Sem transform - apenas mudança de cor */
}

.card:hover::before {
    display: none;
}

/* Image styles */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

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

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

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

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

/* Container adjustments */
.overflow-hidden {
    overflow: hidden;
}

.rounded-full {
    border-radius: 50%;
}

.rounded-xl {
    border-radius: 0.75rem;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: var(--transition-smooth);
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.0625rem;
}

.btn-healing {
    background-color: hsl(210 72% 58%);
    color: white;
    font-weight: 600;
    border: 1px solid hsl(210 72% 58%);
}

.btn-healing:hover {
    background-color: hsl(210 72% 52%);
    border-color: hsl(210 72% 52%);
    /* Sem transform */
}

.btn-warm {
    background-color: hsl(210 24% 26%);
    color: white;
    font-weight: 600;
    border: 1px solid hsl(210 24% 26%);
}

.btn-warm:hover {
    background-color: hsl(210 24% 32%);
    border-color: hsl(210 24% 32%);
    /* Sem transform */
}

.btn-creme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    transition: var(--transition-smooth);
    padding: 14px 28px;
    cursor: pointer;
    border: 1px solid hsl(var(--border));
    text-decoration: none;
    background-color: #FFFFFF;
    color: hsl(210 24% 26%);
    box-shadow: var(--shadow-gentle);
}

.btn-creme:hover {
    background-color: hsl(210 20% 98%);
    border-color: hsl(210 24% 40%);
    box-shadow: var(--shadow-card);
    /* Sem transform */
}

/* Mobile First - Responsive */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

/* Mobile optimizations - Melhorado */
@media (max-width: 767px) {
    .text-2xl { font-size: 1.5625rem; line-height: 2rem; }
    .text-xl { font-size: 1.1875rem; line-height: 1.75rem; }
    
    /* Reduzir fontes do header no mobile - 2px menores */
    .header-title-text {
        font-size: 10px !important;
    }
    
    /* Breadcrumb - reduzir tamanho */
    .breadcrumb-list,
    .breadcrumb-list li,
    .breadcrumb-list li a {
        font-size: 9px !important;
    }
    
    /* Reduzir H1 do header em 2px no mobile */
    h1.header-h1-size {
        font-size: 1.4375rem !important;
    }
    .space-y-6 > * + * { margin-top: 1rem; }
    .space-y-8 > * + * { margin-top: 1.5rem; }
    .mb-16 { margin-bottom: 2rem; }
    .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    
    /* Aumentar margens laterais de textos específicos no mobile */
    .mobile-text-padding {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-24 { padding-top: 4rem; padding-bottom: 4rem; }
    .max-w-4xl { max-width: 100%; padding: 0 1rem; }
    .grid-cols-2 { grid-template-columns: 1fr; }
    .grid-cols-3 { grid-template-columns: 1fr; }
    
    /* Melhor espaçamento em cards no mobile */
    .card {
        border-radius: 0.75rem;
    }
    
    .card .p-6 {
        padding: 1.25rem;
    }
    
    /* Reduzir fonte da assinatura do card de perfil no mobile */
    .profile-card-text p.text-sm {
        font-size: 0.8125rem !important;
    }
    
    /* Aumentar todas as fontes em 1px no mobile a partir da seção hero (linha 1369) */
    /* Aplicar apenas para conteúdo dentro e após a seção hero, excluindo o H1 do topo */
    section#hero .space-y-6 p,
    section#hero .space-y-6 *:not(h1),
    section#hero .card p,
    section#hero .card *:not(h1),
    section#hero ~ section p,
    section#hero ~ section h2,
    section#hero ~ section h3,
    section#hero ~ section h4,
    section#hero ~ section h5,
    section#hero ~ section h6,
    section#hero ~ section *:not(h1) {
        font-size: calc(1em + 1px) !important;
    }
    
    /* Aumentar fontes de classes de tamanho específicas (valores absolutos + 1px) */
    section#hero .text-xl,
    section#hero ~ section .text-xl {
        font-size: 1.25rem !important; /* 1.1875rem (19px) + 1px = 20px */
    }
    
    section#hero .text-lg,
    section#hero ~ section .text-lg {
        font-size: 1.25rem !important; /* 1.1875rem (19px) + 1px = 20px */
    }
    
    section#hero .text-base,
    section#hero ~ section .text-base {
        font-size: 1.125rem !important; /* 1.0625rem (17px) + 1px = 18px */
    }
    
    section#hero .text-sm,
    section#hero ~ section .text-sm {
        font-size: 1rem !important; /* 0.9375rem (15px) + 1px = 16px */
    }
    
    section#hero .text-xs,
    section#hero ~ section .text-xs {
        font-size: 0.875rem !important; /* 0.8125rem (13px) + 1px = 14px */
    }
    
    /* Manter o H1 do header sem alteração (vem antes da linha 1369) */
    section#hero > .max-w-4xl > h1.header-h1-size {
        font-size: inherit !important;
    }
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:text-3xl { font-size: 1.9375rem; line-height: 2.25rem; }
    .md\:text-4xl { font-size: 2.3125rem; line-height: 2.5rem; }
    
    /* Restaurar tamanhos originais no desktop (sem redução) */
    .header-title-text {
        font-size: 12px !important;
    }
    
    .breadcrumb-list,
    .breadcrumb-list li,
    .breadcrumb-list li a {
        font-size: 11px !important;
    }
    
    /* Reduzir H1 do header em 2px no tablet */
    h1.header-h1-size {
        font-size: 1.8125rem !important;
    }
    .md\:text-5xl { font-size: 3.0625rem; line-height: 1; }
    .md\:flex-row { flex-direction: row; }
    .md\:order-1 { order: 1; }
    .md\:order-2 { order: 2; }
    .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .md\:pb-20 { padding-bottom: 5rem; }
    
    /* Remover padding lateral no desktop */
    .mobile-text-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:text-6xl { font-size: 3.8125rem; line-height: 1; }
    
    /* Reduzir H1 do header em 2px no desktop */
    h1.header-h1-size {
        font-size: 2.1875rem !important;
    }
}

/* Special utilities */
.min-h-screen { min-height: 100vh; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.flex-col { flex-direction: column; }
.sm\:flex-row { flex-direction: row; }

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

/* FAQ Accordion Styles - Melhorado */
.faq-item {
    transition: var(--transition-smooth);
    border-radius: 0.75rem;
}

.faq-question {
    transition: var(--transition-smooth);
    user-select: none;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.faq-question:hover {
    opacity: 0.85;
    transform: translateX(4px);
}

.faq-icon {
    font-size: 1.5625rem;
    font-weight: bold;
    transition: transform 0.3s ease;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-left: auto;
}

.faq-answer {
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-answer.show {
    display: block !important;
    animation: slideDown 0.3s ease;
}

.faq-answer.hidden {
    display: none;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
    }
    to {
        opacity: 1;
        max-height: 200px;
        padding-top: 1rem;
    }
}

/* Process Diagram Styles - Melhorado */
.process-diagram {
    padding: 1.5rem 0;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.process-step {
    flex: 1;
    min-width: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition-smooth);
}

.process-step:hover {
    transform: translateY(-4px);
}

.step-number {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8125rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: var(--transition-smooth);
}

.step-number:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.step-1 {
    background: linear-gradient(135deg, #a855f7, #9333ea);
}

.step-2 {
    background: linear-gradient(135deg, #10b981, #059669);
}

.step-3 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.step-title {
    font-size: 1.1625rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.step-description {
    font-size: 0.9625rem;
    color: #6b7280;
    line-height: 1.5;
    max-width: 250px;
}

@media (max-width: 768px) {
    .process-steps {
        flex-direction: column;
        gap: 2rem;
    }
    
    .process-step {
        min-width: auto;
    }
    
    .step-description {
        max-width: 100%;
    }
}

/* Contact Button Styles - Profissional e discreto */
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: hsl(210 24% 26%);
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid hsl(210 24% 26%);
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-gentle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: visible;
}

.contact-btn::before {
    display: none;
}

.contact-btn:hover {
    background: hsl(210 24% 32%);
    border-color: hsl(210 24% 32%);
    color: #ffffff;
    box-shadow: var(--shadow-card);
    /* Sem transform - apenas mudança de cor */
}

.contact-btn:hover::before {
    display: none;
}

.contact-btn:hover .contact-icon {
    opacity: 0.95;
}

.contact-btn:active {
    box-shadow: var(--shadow-gentle);
}

.contact-icon {
    transition: opacity 0.3s ease;
    color: #25d366;
    filter: none;
    width: 18px;
    height: 18px;
}

.contact-btn:hover .contact-icon {
    color: #25d366;
    opacity: 0.9;
}

.contact-btn span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-shadow: none;
}

/* Textos justificados - melhorar legibilidade */
p[style*="text-align: justify"],
.text-justify {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    word-spacing: 0.05em;
    text-align-last: left;
}

/* Reduzir margens laterais de textos fora de containers */
.max-w-3xl.mx-auto[style*="padding"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

div[style*="padding-left: 0.75rem"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Reduzir margens laterais do texto na seção Sobre */
#sobre .grid > div[style*="padding-left: 0.5rem"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Em desktop, aumentar um pouco as margens */
@media (min-width: 768px) {
    .max-w-3xl.mx-auto[style*="padding"],
    div[style*="padding-left: 0.75rem"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Seção Sobre - manter margens menores mesmo no desktop */
    #sobre .grid > div[style*="padding-left: 0.5rem"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Botão específico da seção Sobre - estilos gerais */
.contact-btn-sobre {
    max-width: 500px;
    margin: 0 auto;
}

@media (min-width: 769px) {
    .contact-btn-sobre {
        max-width: 500px;
        padding: 20px 40px;
    }
    
    .contact-btn-sobre span {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .contact-btn {
        padding: 18px 32px;
        font-size: 18px;
        gap: 10px;
        border-radius: 10px;
    }
    
    .contact-btn span {
        font-size: 17px;
    }
    
    /* Botão específico da seção Sobre - melhorado para mobile */
    .contact-btn-sobre {
        width: 100%;
        max-width: 100%;
        padding: 16px 24px !important;
        font-size: 16px !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }
    
    .contact-btn-sobre span {
        font-size: 15px !important;
        white-space: normal;
        line-height: 1.4;
        text-align: center;
    }
    
    .contact-btn-sobre .contact-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    /* Melhorar legibilidade em mobile */
    .card {
        margin-bottom: 1rem;
    }
    
    h1, h2, h3 {
        letter-spacing: -0.02em;
    }
}

/* Ajustes adicionais para telas muito pequenas */
@media (max-width: 480px) {
    .contact-btn-sobre {
        padding: 14px 20px !important;
        font-size: 15px !important;
        gap: 8px;
    }
    
    .contact-btn-sobre span {
        font-size: 14px !important;
    }
    
    .contact-btn-sobre .contact-icon {
        width: 18px;
        height: 18px;
    }
}

/* Button Animations */
.btn-creme {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-creme::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.btn-creme:hover::before {
    left: 100%;
}

.btn-creme:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-creme:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.btn-healing {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-healing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.btn-healing:hover::before {
    width: 300px;
    height: 300px;
}

.btn-healing:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.btn-healing:active {
    transform: translateY(-1px) scale(1.02);
    transition: transform 0.1s ease;
}

.btn-warm {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-warm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-warm:hover::before {
    transform: translateX(100%);
}

.btn-warm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}

.btn-warm:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

/* General button hover effects */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

/* Garantir que palavras coloridas em títulos tenham o mesmo tamanho */
h1 span.text-primary,
h2 span.text-primary,
h3 span.text-primary,
h4 span.text-primary,
h5 span.text-primary,
h6 span.text-primary {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Reduzir espaçamento entre linhas das frases fora das caixas */
p:not(.card p):not(.faq-answer p) {
    line-height: 1.4 !important;
}

/* Reduzir espaçamento de textos específicos fora das caixas */
.text-muted-foreground:not(.card .text-muted-foreground),
.text-medium:not(.card .text-medium) {
    line-height: 1.4 !important;
}

/* MOBILE: Reduzir todas as fontes em 2px, exceto títulos */
@media (max-width: 767px) {
    /* Reduzir fontes de parágrafos e textos */
    p, span, div, li, td, th, label, input, textarea, select, button {
        font-size: calc(1.0625rem - 2px) !important;
    }
    
    /* Reduzir fontes específicas do site */
    .text-sm {
        font-size: calc(0.9375rem - 2px) !important;
    }
    
    .text-base {
        font-size: calc(1.0625rem - 2px) !important;
    }
    
    .text-lg {
        font-size: calc(1.1875rem - 2px) !important;
    }
    
    .text-xl {
        font-size: calc(1.3125rem - 2px) !important;
    }
    
    /* Manter títulos inalterados */
    h1, h2, h3, h4, h5, h6 {
        font-size: inherit !important;
    }
    
    /* Manter classes de título específicas */
    .text-2xl, .text-3xl, .text-4xl, .text-5xl {
        font-size: inherit !important;
    }
    
    /* Ajustar fontes específicas do site */
    .text-medium {
        font-size: calc(1.0625rem - 2px) !important;
    }
    
    .text-muted-foreground {
        font-size: calc(1.0625rem - 2px) !important;
    }
    
    /* Ajustar fontes dos botões */
    .contact-btn span {
        font-size: calc(1.0625rem - 2px) !important;
    }
}

/* Estilos do Sistema de Administração */
.admin-btn {
    background: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.5;
    transition: all 0.2s ease;
    color: hsl(var(--light-foreground));
}

.admin-btn:hover {
    opacity: 1;
    background: hsl(var(--light-muted));
}

.admin-btn-save {
    background: hsl(var(--primary));
    color: white;
    border: none;
    font-size: 15px;
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.admin-btn-save:hover {
    background: hsl(275 83% 48%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.admin-btn-save:active {
    transform: translateY(0);
}

.admin-btn-config {
    background: hsl(var(--healing));
    color: white;
    border: none;
    font-size: 15px;
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.admin-btn-config:hover {
    background: hsl(142 76% 32%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.admin-btn-config:active {
    transform: translateY(0);
}

.hidden {
    display: none !important;
}

/* Modal de Autenticação */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.admin-modal-content {
    background: hsl(var(--light-card));
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.admin-modal-content h3 {
    margin-bottom: 1.5rem;
    color: hsl(var(--light-foreground));
    font-size: 1.3125rem;
}

.admin-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid hsl(217 32.6% 70%);
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
    background: hsl(var(--light-background));
    color: hsl(var(--light-foreground));
}

.admin-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
}

.admin-modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.admin-btn-modal {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    background: hsl(var(--primary));
    color: white;
    transition: all 0.2s ease;
}

.admin-btn-modal:hover {
    background: hsl(275 83% 48%);
    transform: translateY(-1px);
}

.admin-btn-modal-cancel {
    padding: 0.75rem 1.5rem;
    border: 2px solid hsl(217 32.6% 70%);
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: hsl(var(--light-foreground));
    transition: all 0.2s ease;
}

.admin-btn-modal-cancel:hover {
    border-color: hsl(217 32.6% 50%);
    background: hsl(var(--light-muted));
}

.admin-error {
    color: #ef4444;
    margin-top: 1rem;
    font-size: 0.9375rem;
}

/* Modo de Edição de Imagens */
.img-editable {
    position: relative;
    outline: 2px dashed hsl(var(--primary) / 0.5);
    outline-offset: -2px;
}

.img-editable::after {
    content: '✏️ Arraste para ajustar';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(var(--primary) / 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.img-editable:hover::after {
    opacity: 1;
}

.img-editable:active {
    outline-color: hsl(var(--primary));
    outline-width: 3px;
}

/* Container Editável */
.container-editable {
    position: relative;
    transition: all 0.2s ease;
}

.container-editable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed hsl(var(--primary) / 0.5);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.container-editable:hover::before {
    opacity: 1;
}

.container-editable:hover {
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
}

/* Indicador de mover container */
.container-move-indicator {
    position: absolute;
    top: -25px;
    left: 0;
    background: hsl(var(--primary));
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.container-editable:hover .container-move-indicator {
    opacity: 1;
}

/* Overlay e Painel de Configuração */
.config-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(4px);
}

.config-panel {
    background: hsl(var(--light-card));
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.config-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid hsl(217 32.6% 85%);
    background: hsl(var(--light-muted));
}

.config-panel-header h3 {
    margin: 0;
    font-size: 1.3125rem;
    color: hsl(var(--light-foreground));
}

.config-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5625rem;
    cursor: pointer;
    color: hsl(var(--light-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    line-height: 1;
}

.config-close-btn:hover {
    background: hsl(var(--light-background));
    transform: scale(1.1);
}

.config-panel-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.config-container-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-item {
    background: hsl(var(--light-background));
    border: 1px solid hsl(217 32.6% 85%);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.config-item:hover {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.config-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.config-item-header strong {
    color: hsl(var(--light-foreground));
    font-size: 0.9625rem;
}

.config-item-preview {
    font-size: 0.8125rem;
    color: hsl(var(--light-muted-foreground));
    background: hsl(var(--light-muted));
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.config-item-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.config-item-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-item-controls label span {
    font-size: 0.9375rem;
    color: hsl(var(--light-muted-foreground));
    font-weight: 500;
}

.config-input {
    padding: 0.5rem;
    border: 2px solid hsl(217 32.6% 70%);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    background: hsl(var(--light-background));
    color: hsl(var(--light-foreground));
    transition: border-color 0.2s ease;
}

.config-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
}

.config-panel-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid hsl(217 32.6% 85%);
    background: hsl(var(--light-muted));
}

.config-apply-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    background: hsl(var(--healing));
    color: white;
    transition: all 0.2s ease;
}

.config-apply-btn:hover {
    background: hsl(142 76% 32%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.config-reset-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid hsl(217 32.6% 70%);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: hsl(var(--light-foreground));
    transition: all 0.2s ease;
}

.config-reset-btn:hover {
    border-color: hsl(217 32.6% 50%);
    background: hsl(var(--light-background));
}

@media (max-width: 768px) {
    .config-panel {
        width: 95%;
        max-height: 90vh;
    }
    
    .config-item-controls {
        gap: 0.5rem;
    }
}

/* Animações de entrada suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animações mais discretas em seções */
section {
    animation: fadeIn 0.8s ease-out;
}

/* Header profissional - sem gradientes */
/* Estilos para header com fundo sólido e minimalista */
header,
div[style*="background: linear-gradient(180deg, hsl(210 40% 99%)"],
div[style*="background: linear-gradient(180deg, hsl(210 40% 99%)"] {
    background: hsl(0 0% 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/* Barra de gradiente - substituir por linha sólida sutil */
div[style*="background: linear-gradient(90deg, hsl(275 83% 53%)"],
div[style*="background: linear-gradient(90deg, hsl(275 83% 53%)"] {
    background: hsl(210 24% 26%) !important;
    height: 2px !important;
}

/* Imagens com transições discretas */
img {
    transition: opacity 0.4s ease;
}

.card img:hover {
    opacity: 0.95;
    /* Sem transform/scale */
}

/* Melhorar espaçamento entre seções */
section + section {
    margin-top: 0;
}

/* Melhorar legibilidade de textos longos */
p {
    max-width: 65ch;
}

.text-medium {
    line-height: 1.7;
}

/* Melhorar títulos */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
    font-weight: 700;
    line-height: 1.2;
}

/* Adicionar efeito de scroll suave */
html {
    scroll-behavior: smooth;
}

/* Melhorar acessibilidade - focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
    border-radius: 4px;
}

/* Forçar altura do container-new-image em todos os dispositivos */
[data-container-id="container-new-image"] {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

@media (max-width: 768px) {
    [data-container-id="container-new-image"] {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Card de perfil - foto e texto lado a lado no desktop, vertical no mobile */
    .profile-card-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }
    
    .profile-card-text {
        width: 100% !important;
        flex: none !important;
    }
    
    /* Reduzir fonte da assinatura do card de perfil no mobile */
    .profile-card-text p.text-sm {
        font-size: 0.8125rem !important;
    }
}