/* =========================================================================
   DIRETRIZ DE UX/UI - CLÍNICA JAMILE CARDOSO
   Estilo: Elementor Canvas (Landing Page Longa e Imersiva)
   Paleta: Rosé / Champagne / Marrom Quente (Extraído do Instagram)
========================================================================= */

:root {
    --bg-light: #F6EFED;      /* Off-white levemente rosado */
    --brand-beige: #EADBD4;   /* O bege/rosado real do Instagram */
    --brand-dark: #4A3B32;    /* Marrom escuro quente (Textos principais) */
    --text-main: #5C4F45;     /* Marrom médio (Textos secundários) */
    --text-muted: #8E7C71;
    --accent-gold: #C09A6E;   /* Dourado da Logo */
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    overflow-x: hidden;
    width: 100vw;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* =========================================================================
   1. HERO SECTION (LAYOUT REFERÊNCIA POP-OUT E GHOST)
========================================================================= */
.hero-split {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 0 5%;
    
    /* Fundo da Clínica Desfocado */
    background-image: url('assets/hero_bg_1781492795499.png');
    background-size: cover;
    background-position: center;
}

/* Overlay Rosé Fiel à Marca da Clínica */
.hero-split::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(246, 239, 237, 0.95) 0%, rgba(234, 219, 212, 0.88) 100%);
    z-index: 1;
}

.hero-content-left {
    position: relative;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;  
    justify-content: center;
    transform: translateY(-5vh); /* Puxa todo o bloco pra cima */
    z-index: 2;
}

.hero-logo {
    width: 100%; 
    max-width: 280px; /* Diminuído como pedido */
    margin-top: -3rem; /* Esconde o espaço transparente inútil do PNG no topo */
    margin-bottom: -1.5rem; /* Esconde o espaço transparente inútil da base */
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hero-content-right {
    position: relative;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    height: 100%;
    z-index: 2;
}

/* O "Fantasma" da médica ao fundo à direita */
.hero-ghost {
    position: absolute;
    right: -25%;
    top: 50%;
    transform: translateY(-50%);
    height: 120%;
    opacity: 0.15; 
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* O Círculo Colorido atrás da médica */
.hero-circle-bg {
    position: absolute;
    bottom: 10vh; /* Subiu um pouco para enquadrar os ombros/rosto */
    left: 50%;
    transform: translateX(-50%);
    width: 480px; /* Reduzido de 700 para 480px, bem mais contido */
    height: 480px;
    border-radius: 50%;
    border: 6px solid var(--brand-dark); /* Grosso e na cor Marrom Quente para altíssimo contráste real com a marca */
    z-index: 1;
}

/* A Médica saltando do círculo (Efeito Pop-Out) e com as bordas apagadas */
.hero-dra-img {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 90vh;
    object-fit: contain; 
    object-position: bottom center;
    mix-blend-mode: multiply; 
    filter: contrást(1.05); 
    z-index: 2;
    /* Mágica para esfumar os cortes retos do cotovelo esquerdo e da caixa embaixo */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%), linear-gradient(to top, transparent 0%, black 15%, black 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%), linear-gradient(to top, transparent 0%, black 15%, black 100%);
    mask-composite: intersect;
}

/* Ajustes de Texto Centralizados e Formais - IDÊNTICO AO INSTAGRAM */
.hero-content-left .main-title { 
    color: var(--brand-dark); 
    font-size: clamp(2.5rem, 3.8vw, 3.8rem); /* Reduzido levemente para garantir que cabe */
    line-height: 1.05; 
    margin-bottom: 0.5rem; /* Ainda mais colado */
    text-transform: none; 
    font-family: var(--font-heading); 
    font-weight: 400; 
    letter-spacing: -0.5px; 
}

.hero-content-left .subtitle { 
    color: var(--text-main); 
    font-size: 1.1rem; 
    max-width: 85%; 
    margin-bottom: 1.5rem; 
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Botão Estilo Referência (Bordas arredondadas simples e ícone) com Cores Reais da Marca */
.pulse-button {
    display: inline-block;
    text-decoration: none;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 1.2rem 3.5rem;
    border-radius: 8px; 
    transition: all 0.3s ease;
    animation: gentle-heartbeat 2s infinite; /* NOVA ANIMAÇÃO SIMPLES */
}

.dark-btn {
    background-color: var(--brand-dark); 
    color: var(--bg-light);
    box-shadow: 0 5px 15px rgba(74, 59, 50, 0.3);
}

.dark-btn:hover { 
    background-color: #312720; 
}

@keyframes gentle-heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.05); }
    20% { transform: scale(1); }
    100% { transform: scale(1); }
}

@media (max-width: 991px) {
    .hero-split { flex-direction: column; padding-top: 50px; height: auto; min-height: 100vh; text-align: center; }
    .hero-content-left { width: 100%; align-items: center; margin-bottom: 1.5rem; }
    .hero-content-right { width: 100%; height: 500px; align-items: flex-end; }
    .hero-circle-bg { width: 350px; height: 350px; }
    .hero-dra-img { height: 110%; }
    .hero-ghost { display: none; }
}







/* =========================================================================
   2. MANIFESTO SECTION (A CONSULTA)
========================================================================= */
.manifesto-section {
    padding: 120px 5%;
    background: linear-gradient(to bottom, #ffffff 0%, var(--bg-light) 100%);
    position: relative;
    overflow: hidden;
}

.manifesto-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.manifesto-image-wrapper {
    width: 45%;
    position: relative;
}

.manifesto-img {
    width: 100%;
    mix-blend-mode: multiply; /* Remove fundo branco fundindo com a tela */
    object-fit: contain;
}

.manifesto-content {
    width: 55%;
}

.section-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-gold);
    margin-bottom: 1.5rem;
}

.manifesto-title {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    color: var(--brand-dark);
    line-height: 1.25;
    margin-bottom: 2rem;
    font-family: var(--font-heading);
    font-weight: 400;
}

.manifesto-text p {
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.8;
}

.manifesto-signature {
    margin-top: 3rem;
    border-top: 1px solid var(--brand-beige);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
}

.manifesto-signature strong {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--brand-dark);
    font-weight: 400;
    margin-bottom: 0.2rem;
}

.manifesto-signature span {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-family: var(--font-body);
}

@media (max-width: 991px) {
    .manifesto-container { flex-direction: column; gap: 40px; }
    .manifesto-image-wrapper, .manifesto-content { width: 100%; }
    .manifesto-section { padding: 80px 5%; }
}

/* =========================================================================
   3. TRATAMENTOS E PROCEDIMENTOS
========================================================================= */
.treatments-section {
    padding: 100px 5%;
    background-color: var(--bg-light);
    text-align: center;
}

.treatments-header {
    margin-bottom: 60px;
}

.treatments-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--brand-dark);
    margin-bottom: 1rem;
    font-weight: 500;
}

.treatments-header p {
    font-size: 1.1rem;
    color: var(--text-main);
    max-width: 600px;
    margin: 0 auto;
}

.treatments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.treatment-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(74, 59, 50, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    border: 1px solid rgba(234, 219, 212, 0.5);
}

.treatment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(74, 59, 50, 0.1);
}

.card-image {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
}

.peeling-bg { background-image: url('assets/peeling.png'); }
.tirzepatida-bg { background-image: url('assets/tirzepatida.png'); }
.injetaveis-bg { background-image: url('assets/injetaveis.png'); }
.pele-bg { background-image: url('assets/pele.png'); }

.card-content {
    padding: 30px;
}

.card-content h3 {
    font-size: 1.4rem;
    color: var(--brand-dark);
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.card-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.treatments-cta {
    margin-top: 60px;
}

/* =========================================================================
   4. FOOTER
========================================================================= */
.site-footer {
    background-color: var(--brand-dark);
    color: var(--bg-light);
    padding: 80px 5% 30px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(246, 239, 237, 0.1);
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
}

.footer-logo-area p {
    font-family: var(--font-heading);
    letter-spacing: 2px;
    font-size: 0.9rem;
    color: #dcd3ce;
}

.footer-contact h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    color: var(--accent-gold);
}

.footer-contact p {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #dcd3ce;
}

.footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    color: #a4968e;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
}
/* =========================================================================
   A DOR (O PROBLEMA OCULTO)
========================================================================= */
.pain-section {
    padding: 100px 5%;
    background-color: var(--brand-dark);
    color: var(--bg-light);
    text-align: center;
}

.pain-container {
    max-width: 800px;
    margin: 0 auto;
}

.pain-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--accent-gold);
    margin-bottom: 25px;
    font-family: var(--font-heading);
}

.pain-text {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #e8e0dc;
}

.pain-highlight {
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
    border-top: 1px solid rgba(192, 154, 110, 0.3);
    padding-top: 30px;
}

/* =========================================================================
   METODOLOGIA INTEGRATIVA
========================================================================= */
.methodology-section {
    padding: 120px 5%;
    background-color: #ffffff;
}

.methodology-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.methodology-content {
    width: 55%;
}

.methodology-content h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--brand-dark);
    margin-bottom: 20px;
}

.methodology-content p {
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.methodology-list {
    list-style: none;
}

.methodology-list li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 30px;
}

.methodology-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    box-shadow: 0 0 8px rgba(192, 154, 110, 0.5);
}

.methodology-list strong {
    color: var(--brand-dark);
}

.methodology-image {
    width: 45%;
    height: 500px;
    background-image: url('assets/hero_bg_1781492795499.png');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(74, 59, 50, 0.1);
}

/* =========================================================================
   AUTORIDADE (SOBRE A DRA)
========================================================================= */
.authority-section {
    padding: 100px 5%;
    background-color: var(--bg-light);
}

.authority-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.authority-image-wrapper {
    width: 40%;
}

.authority-img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(74,59,50,0.1);
}

.authority-content {
    width: 60%;
}

.authority-content h2 {
    font-size: 2.8rem;
    color: var(--brand-dark);
    margin-bottom: 5px;
}

.crm {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.authority-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.authority-badges {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.badge-item {
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-dark);
    border: 1px solid rgba(192, 154, 110, 0.3);
}

/* =========================================================================
   PROVA SOCIAL (DEPOIMENTOS)
========================================================================= */
.testimonials-section {
    padding: 100px 5%;
    background-color: #ffffff;
    text-align: center;
}

.testimonials-header { margin-bottom: 60px; }
.testimonials-header h2 { font-size: 2.5rem; color: var(--brand-dark); margin-bottom: 10px; }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--bg-light);
    padding: 40px 30px;
    border-radius: 12px;
    text-align: left;
    position: relative;
}

.stars {
    color: var(--accent-gold);
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.testimonial-card p {
    font-size: 1rem;
    font-style: italic;
    margin-bottom: 20px;
    color: var(--text-main);
}

.testimonial-card strong {
    font-family: var(--font-heading);
    color: var(--brand-dark);
}

/* =========================================================================
   FAQ (DÚVIDAS FREQUENTES)
========================================================================= */
.faq-section {
    padding: 100px 5%;
    background-color: var(--brand-beige);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-container h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--brand-dark);
    margin-bottom: 50px;
}

.faq-item {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(74,59,50,0.05);
}

.faq-question {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
    transition: background 0.3s ease;
}

.faq-question h3 {
    font-size: 1.1rem;
    color: var(--brand-dark);
    font-weight: 500;
    margin: 0;
}

.faq-question .icon {
    font-size: 1.5rem;
    color: var(--accent-gold);
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: #ffffff;
}

.faq-answer p {
    padding: 0 30px 25px;
    color: var(--text-main);
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

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

@media (max-width: 991px) {
    .methodology-container, .authority-container { flex-direction: column; }
    .methodology-content, .methodology-image, .authority-image-wrapper, .authority-content { width: 100%; }
}

/* =========================================================================
   CUSTOM SCROLLBAR
========================================================================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
    background: rgba(192, 154, 110, 0.5);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold);
}

/* =========================================================================
   NAVBAR (GLASSMORPHISM)
========================================================================= */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(253, 248, 246, 0.85); /* brand-beige translúcido */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(192, 154, 110, 0.15);
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand-dark);
    letter-spacing: 1px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent-gold);
}

.nav-btn {
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid var(--accent-gold);
    color: var(--brand-dark);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.nav-btn:hover {
    background: var(--accent-gold);
    color: #ffffff;
}

/* =========================================================================
   WHATSAPP FLUTUANTE
========================================================================= */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1) translateY(-5px);
    background-color: #1ebe57;
}

/* =========================================================================
   ENHANCED BACKGROUNDS
========================================================================= */
.pain-section {
    position: relative;
    overflow: hidden;
}

/* Adicionando uma textura luxuosa escura ao fundo do problema */
.pain-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/texture.png');
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
}



/* =========================================================================
   UX/UI PRO MAX: GRAND REDESIGN OVERRIDES
========================================================================= */

/* 1. Typography & Italics */
em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-gold);
}

h2 {
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.pain-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
}

/* 2. The Pill Navbar */
.site-nav {
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95% !important;
    max-width: 900px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.1) !important;
}

.nav-container {
    padding: 12px 30px !important;
}

.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 50%;
    background-color: var(--accent-gold);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-links a:hover::after {
    width: 100%;
}

/* 3. Bento Grid Treatments */
.treatments-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: minmax(250px, auto);
    gap: 20px !important;
}

.treatment-card {
    border-radius: 24px !important;
    border: none !important;
    box-shadow: 0 15px 35px rgba(74, 59, 50, 0.08) !important;
}

.treatment-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 60px rgba(74, 59, 50, 0.15) !important;
}

/* Hover effect on images */
.treatment-card .card-image {
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.treatment-card:hover .card-image {
    transform: scale(1.08) !important;
}

/* Bento Sizing */
.bento-large {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-large .card-image {
    height: 350px !important;
}

.bento-tall {
    grid-column: span 1;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.bento-tall .card-image {
    flex-grow: 1;
    height: 100% !important;
    min-height: 200px;
}

.bento-wide {
    grid-column: span 3;
    display: flex;
    align-items: center;
}

.bento-wide .card-image {
    width: 40% !important;
    height: 100% !important;
}

.bento-wide .card-content {
    width: 60%;
}

@media (max-width: 991px) {
    .treatments-grid {
        grid-template-columns: 1fr !important;
    }
    .bento-large, .bento-tall, .bento-wide {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    .bento-wide {
        flex-direction: column;
    }
    .bento-wide .card-image, .bento-wide .card-content {
        width: 100% !important;
    }
    .bento-large .card-image { height: 250px !important; }
    
    .site-nav {
        top: 10px !important;
        border-radius: 20px !important;
    }
    .nav-links { display: none !important; } /* Hide links on mobile for now */
}

/* =========================================================================
   UX/UI PRO MAX: POP-OUT EFFECT & SECTION STYLING
========================================================================= */

/* Estilizando o fundo da seção (agora escura com textura) */
.manifesto-section {
    position: relative;
    padding: 120px 5%;
    background-color: var(--brand-dark) !important;
    color: var(--bg-light) !important;
}

.manifesto-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/texture.png');
    background-size: cover;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.manifesto-container {
    position: relative;
    z-index: 1;
}

.manifesto-title {
    color: var(--accent-gold) !important;
}

.manifesto-text p {
    color: #e8e0dc !important;
}

.manifesto-signature strong {
    color: var(--bg-light) !important;
}

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

/* O Quadrado de Fundo e o Efeito Pop-Out */
.manifesto-image-wrapper {
    position: relative;
    width: 75% !important;
    max-width: 320px !important;
    aspect-ratio: 4/5 !important;
    background-color: #fdf8f5 !important; /* Fundo claro para o multiply funcionar perfeitamente */
    border: 2px solid var(--accent-gold) !important;
    border-radius: 0 !important; /* Retângulo elegante */
    margin: 80px auto 40px !important;
}

.manifesto-img {
    position: absolute !important;
    bottom: -2px !important; /* Ancorado no fundo para esconder o corte */
    right: -2px !important; /* Ancorado na direita para esconder o corte */
    width: 135% !important; /* 35% maior que o quadrado, saltando para a esquerda e para cima */
    height: auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    z-index: 2;
    filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.1));
}

/* Moldura Deslocada Atrás do Quadrado para mais Luxo */
.manifesto-image-wrapper::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(192, 154, 110, 0.4);
    z-index: -1;
}

/* =========================================================================
   EMERGENCY FIX: REVERT MANIFESTO SECTION & SIMPLE SQUARE FRAME
========================================================================= */

/* 1. Reverter Cores do Fundo e Textos */
.manifesto-section {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, #ffffff 0%, var(--bg-light) 100%) !important;
    color: var(--text-main) !important;
    padding: 100px 5% !important;
}

.manifesto-section::before {
    display: none !important; /* Remover textura escura */
}

.manifesto-title {
    color: var(--brand-dark) !important;
}

.manifesto-text p {
    color: var(--text-main) !important;
}

.manifesto-signature strong {
    color: var(--brand-dark) !important;
}

.manifesto-signature span {
    color: var(--text-muted) !important;
}

/* 2. Quadrado Simples e Elegante em Volta da Imagem (Sem Pop-out quebrado) */
.manifesto-image-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border: 1px solid var(--accent-gold) !important;
    background: linear-gradient(135deg, #fdf8f5 0%, #e8d8ce 100%) !important; /* Degradê elegante de estúdio */
    padding: 10px !important;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.08) !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
}

/* Remover os pseudo-elementos antigos */
.manifesto-image-wrapper::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(192, 154, 110, 0.3) !important;
    z-index: -1;
    background: transparent !important;
}

.manifesto-img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    mix-blend-mode: multiply !important; /* Fundo branco some e revela o degradê de estúdio! */
    transform: none !important;
    filter: none !important;
}

/* =========================================================================
   NEW BENTO GRID IMAGES & LAYOUT REFINEMENTS
========================================================================= */
.peeling-new-bg {
    background-image: url('assets/peeling-new.png');
    background-size: cover;
    background-position: center;
}

.injetavel-new-bg {
    background-image: url('assets/injetavel-new.png');
    background-size: cover;
    background-position: center;
}

.blefaro-new-bg {
    background-image: url('assets/blefaro-new.png');
    background-size: cover;
    background-position: center;
}

.pele-new-bg {
    background-image: url('assets/pele-new.png');
    background-size: cover;
    background-position: center;
}

.cabelo-new-bg {
    background-image: url('assets/cabelo-new.png');
    background-size: cover;
    background-position: center;
}

.corpo-new-bg {
    background-image: url('assets/corpo-new.png');
    background-size: cover;
    background-position: center;
}

/* Adjustments for a 6-item Bento Grid */
.bento-square {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-square .card-image {
    height: 250px !important;
}

/* =========================================================================
   LOCATION SECTION
========================================================================= */
.location-section {
    position: relative;
    padding: 100px 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    background-color: var(--brand-dark);
}

.location-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/texture.png'); 
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}

/* Overlay gradient */
.location-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(74, 59, 50, 0.9) 0%, rgba(74, 59, 50, 0.4) 100%);
    z-index: 1;
}

.location-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    background: rgba(253, 248, 246, 0.95);
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid var(--accent-gold);
}

.location-content h2 {
    color: var(--brand-dark);
    margin-bottom: 20px;
    font-family: var(--font-heading);
}

.location-content p {
    color: var(--text-main);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.location-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 30px;
    background: var(--brand-dark);
    color: var(--bg-light);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s;
}

.location-btn:hover {
    background: var(--accent-gold);
    transform: translateY(-2px);
}

/* =========================================================================
   UX/UI PRO MAX: LOCATION SECTION CINEMATIC UPDATE
========================================================================= */
.location-section {
    position: relative;
    padding: 100px 10% !important; /* Mais espaçamento lateral para deslocar o card */
    display: flex;
    justify-content: flex-start !important; /* Desloca o card para a esquerda */
    align-items: center;
    min-height: 600px;
    background-color: var(--bg-light) !important; /* Fundo bege claro/branco para a película e máscara funcionarem */
    overflow: visible !important; /* Impede que o zoom vaze da seção */
}

/* Container que controla a opacidade (fade) da imagem à esquerda */
.location-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    /* A máscara faz a imagem ficar transparente na esquerda, revelando o fundo branco, e sólida na direita */
    mask-image: linear-gradient(to right, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
}

.location-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/Clínica-local.jpg') !important; 
    background-size: cover;
    background-position: center;
    opacity: 1 !important; /* Não precisaúde opacidade geral pois a película e o mask já atuam */
    z-index: 0;
    /* Efeito de vídeo: aproximação contínua e super suave */
    animation: slowZoom 25s infinite alternate linear;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* Película branca super leve por cima da imagem */
.location-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.25) !important; /* Película clarinha */
    z-index: 1;
}

.location-content {
    position: relative;
    z-index: 2;
    max-width: 480px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 50px !important;
    text-align: left !important; /* Alinhamento à esquerda fica mais premium aqui */
    box-shadow: 0 30px 60px rgba(0,0,0,0.08) !important;
    border: none !important;
}

@media (max-width: 991px) {
    .location-section {
        justify-content: center !important;
        padding: 80px 5% !important;
    }
    .location-bg-wrapper {
        mask-image: linear-gradient(to top, transparent 0%, black 50%);
        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);
    }
    .location-content {
        text-align: center !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: LOCATION SECTION SPLIT LAYOUT
========================================================================= */
/* Sobrescrever a estrutura antiga da Location Section */
.location-section.split-layout {
    position: relative !important;
    padding: 0 !important; /* Retirando o padding geral para a imagem colar na borda */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    min-height: auto !important;
    background-color: var(--bg-light) !important; /* O espaço da esquerda ganha o efeito bege elegante (bege nude da marca) */
    overflow: visible !important;
}

/* Remover películas antigas */
.location-section.split-layout::after {
    display: none !important;
}

/* O quadrado de texto na Esquerda */
.location-content {
    flex: 1 !important;
    max-width: 50% !important;
    padding: 100px 5% 100px 10% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: left !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-content h2 {
    color: var(--brand-dark) !important;
}

.location-content p {
    color: var(--text-main) !important;
}

/* A Imagem no Tamanho Original na Direita */
.location-image-wrapper {
    flex: 1 !important;
    max-width: 50% !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: transparent !important;
}

.location-photo {
    width: 100% !important;
    height: auto !important;
    max-height: 800px;
    display: block !important;
    object-fit: cover !important; /* Garante que preencha a sua metade perfeitamente sem distorcer */
    /* Sem zoom de vídeo. Apenas um toque leve ao passar o mouse */
    transition: transform 0.6s ease-in-out !important;
}

.location-photo:hover {
    transform: scale(1.03) !important;
}

/* Responsivo para mobile */
@media (max-width: 991px) {
    .location-section.split-layout {
        flex-direction: column-reverse !important;
        padding: 40px 15px 80px 15px !important;
        background-color: #fdfbf9 !important;
        background-image: 
            radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.20) 0%, transparent 50%),
            radial-gradient(circle at 20% 100%, rgba(168, 140, 119, 0.20) 0%, transparent 50%),
            url('assets/texture.png') !important;
        background-blend-mode: overlay !important;
        background-size: cover !important;
    }
    .location-content, .location-image-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
    .location-content {
        padding: 50px 5% !important;
        text-align: center !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: LOCATION SECTION FULL FADE (V2)
========================================================================= */
.location-section.full-fade-layout {
    position: relative !important;
    padding: 100px 10% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Quadrado na esquerda */
    align-items: center !important;
    min-height: 700px !important;
    background-color: var(--bg-light) !important; /* Cor que aparece na área do fade */
    overflow: visible !important;
}

.location-section.full-fade-layout::after {
    display: none !important; /* Sem película! */
}

/* Container do fundo da localização */
.location-section.full-fade-layout .location-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    display: block !important;
    mask-image: linear-gradient(to right, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
}

.location-section.full-fade-layout .location-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/Clínica-local-2.jpg') !important; /* Nova imagem */
    background-size: cover !important; /* Preencher! */
    background-position: center right;
    animation: none !important; /* Sem animação de vídeo */
    transition: none !important;
    opacity: 1 !important;
}

/* O quadrado de texto */
.location-section.full-fade-layout .location-content {
    position: relative;
    z-index: 2;
    flex: none !important;
    max-width: 450px !important;
    padding: 50px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1) !important;
    border: 1px solid var(--accent-gold) !important;
    text-align: left !important;
}


/* =========================================================================
   UX/UI PRO MAX: DUAL LUXURY CTA
========================================================================= */
.luxury-cta-section {
    padding: 100px 5%;
    background-color: var(--brand-beige);
    position: relative;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.cta-card {
    position: relative;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    border: 1px solid var(--accent-gold);
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.15);
    /* Não minimalista: Efeito de glow suave na borda */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(192, 154, 110, 0.3);
    border-color: #d4af37;
}

/* Fundos das CTAs - Para o usuário trocar depois */
.cta-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.8s ease;
}

.cta-bg-1 {
    background-image: url('assets/texture.png'); /* Placeholder */
}

.cta-bg-2 {
    background-image: url('assets/texture.png'); /* Placeholder */
}

.cta-card:hover .cta-bg {
    transform: scale(1.1); /* Animação viva */
}

/* Degrade escuro na base para ler o texto */
.cta-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.cta-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.cta-content h3 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cta-content p {
    color: #f0f0f0;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.cta-btn {
    display: inline-block;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-btn.primary {
    background: linear-gradient(45deg, #d4af37, #c09a6e);
    color: #fff;
    border: none;
}

.cta-btn.primary:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    filter: brightness(1.1);
}

.cta-btn.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #d4af37;
}

.cta-btn.secondary:hover {
    background: #d4af37;
    color: #fff;
}

@media (max-width: 991px) {
    .cta-grid { grid-template-columns: 1fr; }
    .location-section.full-fade-layout {
        flex-direction: column !important;
        justify-content: center !important;
    }
    .location-section.full-fade-layout .location-bg-wrapper {
        mask-image: linear-gradient(to top, transparent 0%, black 50%);
        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);
    }
}

/* =========================================================================
   UX/UI PRO MAX: EDITORIAL CTA (REFERÊNCIAS)
========================================================================= */
.editorial-cta-section {
    background: linear-gradient(135deg, #fdfbf9 0%, #f4eae4 100%); /* Fundo nude/bege esfumaçado */
    position: relative;
    overflow: hidden;
    padding-top: 80px; /* Espaço para o topo */
}

.editorial-cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}

.editorial-cta-text {
    flex: 1;
    max-width: 550px;
    padding-bottom: 60px;
}

.editorial-cta-text h2 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--brand-dark);
    margin-bottom: 15px;
    font-weight: 300;
}

.editorial-cta-text p {
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 30px;
    line-height: 1.6;
}

.cta-quote {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--brand-dark);
    border-left: 2px solid var(--accent-gold);
    padding-left: 20px;
    margin-bottom: 40px;
    opacity: 0.8;
}

.cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-subtitle {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-gold);
    margin-bottom: 15px;
    font-weight: 600;
}

.editorial-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 35px;
    background: linear-gradient(45deg, #1b8587, #249ea0); /* Cor de teal Premium inspirada nas prints */
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(27, 133, 135, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
}

.editorial-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(27, 133, 135, 0.4);
    filter: brightness(1.1);
}

.editorial-cta-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* Para a foto colar na base */
    position: relative;
    /* Fade suave na base se a foto não estiver perfeitamente recortada */
    mask-image: linear-gradient(to top, transparent 0%, black 10%);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 10%);
}

.cta-doctor-cutout {
    max-width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    object-position: bottom;
    display: block;
}

/* Faixa sólida na base (Referência Screenshot 3) */
.cta-solid-bar {
    background-color: #1b8587; /* Cor teal das referências */
    color: #ffffff;
    text-align: center;
    padding: 20px 5%;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 5;
}

@media (max-width: 991px) {
    .editorial-cta-container {
        flex-direction: column;
        text-align: center;
    }
    .editorial-cta-text {
        max-width: 100%;
        padding-top: 40px;
    }
    .cta-quote {
        border-left: none;
        border-top: 2px solid var(--accent-gold);
        padding-left: 0;
        padding-top: 20px;
    }
    .cta-action {
        align-items: center;
    }
    .editorial-cta-image {
        justify-content: center;
        margin-top: -30px;
    }
}

/* =========================================================================
   UX/UI PRO MAX: LOCATION SECTION FULL FADE (V2)
========================================================================= */
.location-section.full-fade-layout {
    position: relative !important;
    padding: 100px 10% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Quadrado na esquerda */
    align-items: center !important;
    min-height: 700px !important;
    background-color: var(--brand-beige) !important; /* Cor que aparece na área do fade */
    overflow: visible !important;
}

.location-section.full-fade-layout::after {
    display: none !important; /* Sem película! */
}

/* Container do fundo da localização */
.location-section.full-fade-layout .location-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    display: block !important;
    mask-image: linear-gradient(to right, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
}

.location-section.full-fade-layout .location-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/Clínica-local-2.jpg') !important; /* Nova imagem */
    background-size: contain !important; /* Ajuste para não ficar gigante */
    background-repeat: no-repeat !important;
    background-position: center right !important; /* Jogar para a direita */
    animation: none !important; /* Sem animação de vídeo */
    transition: none !important;
    opacity: 1 !important;
}

/* O quadrado de texto */
.location-section.full-fade-layout .location-content {
    position: relative;
    z-index: 2;
    flex: none !important;
    max-width: 450px !important;
    padding: 50px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1) !important;
    border: 1px solid var(--accent-gold) !important;
    text-align: left !important;
}


/* =========================================================================
   UX/UI PRO MAX: LOCATION SECTION CONTROLLED SIZE
========================================================================= */
.location-section.split-layout {
    position: relative !important;
    padding: 80px 5% !important; 
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: auto !important;
    background-color: var(--brand-beige) !important;
    overflow: visible !important;
}

.location-content {
    flex: 1 !important;
    max-width: 450px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    z-index: 2;
}

.location-image-wrapper {
    flex: 1 !important;
    max-width: 55% !important;
    display: flex;
    justify-content: flex-end; /* Joga totalmente para a direita */
    align-items: center;
    /* Aqui está a mágica: Opacidade (fade) apenas na parte esquerda da imagem menor */
    mask-image: linear-gradient(to right, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
}

.location-photo {
    width: 100% !important; 
    max-width: 800px !important; /* Limite rigoroso para nunca ficar gigantesca */
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    transition: transform 0.6s ease;
}

.location-photo:hover {
    transform: scale(1.02);
}

@media (max-width: 991px) {
    .location-section.split-layout {
        flex-direction: column-reverse !important;
        padding: 40px 15px 80px 15px !important;
        background-color: #fdfbf9 !important;
        background-image: 
            radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.20) 0%, transparent 50%),
            radial-gradient(circle at 20% 100%, rgba(168, 140, 119, 0.20) 0%, transparent 50%),
            url('assets/texture.png') !important;
        background-blend-mode: overlay !important;
        background-size: cover !important;
    }
    .location-image-wrapper {
        max-width: 100% !important;
        justify-content: center;
        mask-image: linear-gradient(to top, transparent 0%, black 30%);
        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
        margin-bottom: 30px;
    }
    .location-content {
        max-width: 100% !important;
        text-align: center !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: LOCATION SECTION RIGHT-HALF BACKGROUND
========================================================================= */
.location-section.split-layout {
    position: relative !important;
    padding: 100px 5% !important; 
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Conteúdo na esquerda */
    align-items: center !important;
    min-height: 600px !important;
    background-color: var(--brand-beige) !important;
    overflow: visible !important;
}

.location-content {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 50% !important; /* Ocupa a metade esquerda */
    max-width: 500px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
}

.location-image-wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 65% !important; /* Ocupa 65% da direita para ser uma imagem imponente */
    height: 100% !important; /* Altura total da seção, nada de imagem "pequena" */
    display: block !important;
    max-width: none !important;
    z-index: 1 !important;
    /* Opacidade/fade apenas na transição esquerda para sumir no bege */
    mask-image: linear-gradient(to right, transparent 0%, black 35%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
}

.location-photo {
    width: 100% !important; 
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important; /* Preenche os 65% perfeitamente */
    border-radius: 0 !important;
    transition: none !important;
}

.location-photo:hover {
    transform: none !important;
}

@media (max-width: 991px) {
    .location-image-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 300px !important;
        mask-image: linear-gradient(to top, transparent 0%, black 30%);
        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
    }
    .location-content {
        flex: 1 !important;
        max-width: 100% !important;
        text-align: center !important;
        padding-top: 40px !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: LOCATION CONTENT BOX STYLING
========================================================================= */
.location-section.split-layout .location-content {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 50% !important;
    max-width: 480px !important;
    
    /* Estilo Premium: Glassmorphism / Vidro Fosco de Luxo */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    padding: 50px 45px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
    text-align: left !important;
}

@media (max-width: 991px) {
    .location-section.split-layout .location-content {
        flex: 1 !important;
        max-width: 90% !important;
        margin: -80px auto 0 !important; /* Faz a caixa sobrepor a imagem no mobile */
        text-align: center !important;
        background: rgba(255, 255, 255, 0.85) !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: EDITORIAL CTA GRAND UPGRADE (NO BLUE)
========================================================================= */
.editorial-cta-section {
    background-image: url('assets/texture.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important; /* Parallax luxuoso */
    position: relative !important;
    overflow: visible !important;
    padding-top: 120px !important; 
}

/* Overlay bege sobre a textura para não atrapalhar a leitura */
.editorial-cta-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: rgba(253, 248, 246, 0.90) !important; /* Bege escurecido da paleta */
    z-index: 0 !important;
}

.editorial-cta-container {
    position: relative !important;
    z-index: 1 !important;
}

/* Título Gigante e Elegante */
.grand-title {
    font-family: var(--font-heading) !important;
    font-size: 5rem !important; /* Muito maior, estilo Vogue */
    color: var(--brand-dark) !important;
    margin-bottom: 25px !important;
    font-weight: 300 !important;
    letter-spacing: -2px !important;
    line-height: 1.05 !important;
    position: relative !important;
}

.grand-title::after {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 3px !important;
    background: var(--accent-gold) !important;
    margin-top: 30px !important;
}

.cta-lead {
    font-size: 1.4rem !important;
    color: var(--brand-dark) !important;
    margin-bottom: 25px !important;
    line-height: 1.6 !important;
    max-width: 90% !important;
    font-weight: 400 !important;
}

/* Remover o Azul e usar Dourado/Marrom */
.editorial-btn {
    background: var(--brand-dark) !important; /* Marrom profundo */
    color: var(--accent-gold) !important; /* Letrás douradas */
    border: 1px solid var(--accent-gold) !important;
    padding: 18px 45px !important;
    font-size: 1.1rem !important;
    letter-spacing: 2px !important;
    box-shadow: 0 15px 30px rgba(74, 59, 50, 0.15) !important;
    text-transform: uppercase !important;
}

.editorial-btn:hover {
    background: var(--accent-gold) !important;
    color: var(--bg-light) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(192, 154, 110, 0.3) !important;
}

.cta-subtitle {
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
}

/* Faixa sólida sem azul */
.cta-solid-bar {
    background-color: var(--brand-dark) !important; /* Marrom profundo */
    color: var(--accent-gold) !important; /* Texto dourado */
    font-size: 1.4rem !important;
    padding: 30px 5% !important;
    border-top: 3px solid var(--accent-gold) !important;
    font-family: var(--font-heading) !important;
    font-style: italic !important;
}

@media (max-width: 991px) {
    .grand-title {
        font-size: 3.5rem !important;
    }
    .grand-title::after {
        margin: 25px auto !important; /* Centraliza o traço no mobile */
    }
}

/* =========================================================================
   UX/UI PRO MAX: EDITORIAL CTA HARMONIOUS REDESIGN
========================================================================= */
.editorial-cta-section {
    /* Fundo sofisticado iluminando a médica e o texto */
    background-color: #fcfaf8 !important;
    background-image: 
        radial-gradient(circle at 25% 60%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 30%, rgba(192, 154, 110, 0.12) 0%, transparent 50%) !important;
    position: relative !important;
    overflow: visible !important;
    padding: 80px 0 0 0 !important; /* Sem padding na base para a imagem colar no chão */
}

.editorial-cta-section::before {
    display: none !important; /* Removendo películas escuras antigas */
}

.editorial-cta-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important; /* Imagem na esquerda, texto na direita */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 5% !important;
}

.editorial-cta-image.left-aligned {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important; /* Cola na base */
    position: relative !important;
    z-index: 2 !important;
}

.cta-doctor-cutout {
    max-width: 100% !important;
    width: 480px !important; /* Tamanho controlado, proporcional e elegante */
    height: auto !important;
    object-fit: contain !important;
    object-position: bottom !important;
    display: block !important;
    filter: drop-shadow(0 20px 30px rgba(74, 59, 50, 0.15)) !important; /* Sombra premium */
    margin-bottom: 40px !important; position: relative !important; /* Esconde o corte inferior */
}

.editorial-cta-text.right-aligned {
    flex: 1 !important;
    max-width: 500px !important;
    padding-bottom: 60px !important;
    text-align: left !important;
    z-index: 2 !important;
    padding-left: 40px !important;
}

.cta-kicker {
    display: inline-block !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--accent-gold) !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

/* Título Harmonioso, tamanho elegante (não gigante) */
.harmonious-title {
    font-family: var(--font-heading) !important;
    font-size: 3.2rem !important; /* Reduzido e balanceado */
    color: var(--brand-dark) !important;
    margin-bottom: 40px !important; position: relative !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
}

.cta-lead {
    font-size: 1.15rem !important;
    color: var(--text-main) !important;
    margin-bottom: 30px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.cta-quote {
    font-family: var(--font-heading) !important;
    font-size: 1.3rem !important;
    font-style: italic !important;
    color: var(--brand-dark) !important;
    border-left: none !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
    padding: 20px 0 !important;
    margin-bottom: 35px !important;
    text-align: center !important;
    position: relative !important;
    opacity: 0.9 !important;
}

.cta-action {
    display: flex !important;
    justify-content: flex-start !important;
}

.editorial-btn {
    display: inline-flex !important;
    justify-content: center !important;
    width: 100% !important; 
    max-width: 320px !important; /* Fica largo e imponente sem ser gritante */
    padding: 16px 0 !important;
    background: transparent !important; /* Outline clássico */
    color: var(--brand-dark) !important;
    border: 1px solid var(--brand-dark) !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    border-radius: 4px !important; 
    transition: all 0.4s ease !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

.editorial-btn:hover {
    background: var(--brand-dark) !important;
    color: var(--bg-light) !important;
    border-color: var(--brand-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(74, 59, 50, 0.15) !important;
}

@media (max-width: 991px) {
    .editorial-cta-container {
        flex-direction: column-reverse !important; /* Foto embaixo do texto no mobile */
        padding-top: 40px !important;
    }
    .editorial-cta-text.right-aligned {
        padding-left: 0 !important;
        text-align: center !important;
    }
    .cta-action {
        justify-content: center !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: THE PAIN (EDITORIAL VOGUE)
========================================================================= */
.pain-section-vogue {
    background-color: var(--brand-dark);
    color: var(--bg-light);
    padding: 120px 5%;
    position: relative;
}

.pain-vogue-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 80px;
}

.pain-vogue-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vogue-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.1;
    color: var(--bg-light);
    margin-bottom: 30px;
}

.vogue-title em {
    font-style: italic;
    color: var(--accent-gold);
}

.vogue-divider {
    width: 100px;
    height: 2px;
    background: var(--accent-gold);
}

.pain-vogue-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vogue-dropcap {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #e0d5c1; /* Bege clarinho para ler no escuro */
    margin-bottom: 30px;
}

.vogue-dropcap::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 5rem;
    line-height: 0.8;
    padding-top: 4px;
    padding-right: 15px;
    color: var(--accent-gold);
}

.vogue-highlight {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    font-style: italic;
    color: #ffffff;
    border-left: 2px solid var(--accent-gold);
    padding-left: 25px;
    margin-top: 20px;
}

.glow-text {
    color: var(--accent-gold);
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    font-weight: 600;
}

/* =========================================================================
   UX/UI PRO MAX: METHODOLOGY (GLASSMORPHISM)
========================================================================= */
.methodology-pro-section {
    background-color: var(--bg-light);
    padding: 120px 5%;
    position: relative;
    background-image: radial-gradient(circle at top center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
}

.methodology-pro-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.methodology-pro-header h2 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--brand-dark);
    margin-bottom: 20px;
}

.methodology-pro-header p {
    font-size: 1.2rem;
    color: var(--text-main);
}

.methodology-pro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.meth-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(74, 59, 50, 0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.meth-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(192, 154, 110, 0.15);
    border-color: var(--accent-gold);
}

.meth-icon {
    font-size: 3rem;
    margin-bottom: 25px;
}

.meth-card h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--brand-dark);
    margin-bottom: 15px;
}

.meth-card p {
    color: var(--text-main);
    line-height: 1.6;
}

/* =========================================================================
   UX/UI PRO MAX: FOOTER PREMIUM
========================================================================= */
.footer-premium {
    background-color: #3b2c24; /* Marrom ultra profundo */
    color: #f4eae4; /* Bege clarinho */
    padding: 80px 5% 0 5%;
    position: relative;
    border-top: 1px solid var(--accent-gold);
}

.footer-premium-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.brand-col .footer-logo {
    width: 200px;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(212, 175, 55, 0.3)); /* Deixa logo branca com glow dourado */
    margin-bottom: 20px;
    transition: filter 0.3s ease;
}

.brand-col .footer-logo:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(212, 175, 55, 0.8));
}

.footer-slogan {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 25px;
    max-width: 300px;
}

.footer-social .social-icon {
    color: var(--accent-gold);
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.footer-social .social-icon:hover {
    transform: scale(1.1);
    color: #fff;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--accent-gold);
    margin-bottom: 25px;
}

.links-col ul {
    list-style: none;
    padding: 0;
}

.links-col ul li {
    margin-bottom: 15px;
}

.links-col ul li a {
    color: #f4eae4;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease, padding-left 0.3s ease;
}

.links-col ul li a:hover {
    opacity: 1;
    color: var(--accent-gold);
    padding-left: 5px; /* Microinteração chique */
}

.contact-col p {
    margin-bottom: 15px;
    opacity: 0.8;
    line-height: 1.6;
}

.footer-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 25px;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.footer-btn:hover {
    background: var(--accent-gold);
    color: #3b2c24;
}

.footer-bottom-premium {
    text-align: center;
    padding: 25px 0;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* =========================================================================
   UX/UI PRO MAX: MOBILE OVERHAUL (O MODO DE CELULAR PICA)
========================================================================= */
@media (max-width: 991px) {
    /* Ajustando o Vogue Editorial no Celular */
    .pain-vogue-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    .vogue-title {
        font-size: 2.8rem;
    }
    .vogue-divider {
        margin: 0 auto;
    }
    .vogue-dropcap {
        text-align: left;
    }
    
    /* Ajustando o Methodology Grid */
    .methodology-pro-grid {
        grid-template-columns: 1fr;
    }
    .methodology-pro-header h2 {
        font-size: 2.5rem;
    }
    
    /* Ajustando o Footer */
    .footer-premium-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .brand-col .footer-logo {
        margin: 0 auto 20px auto;
    }
    .footer-slogan {
        margin: 0 auto 25px auto;
    }
    
    /* Ajustando respiros (negative space) para dar sensação de App Nativo */
    section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    
    .treatments-grid {
        gap: 20px; /* Mais colado no celular */
    }
    
    h1.main-title {
        font-size: 3rem !important; /* Controle na hero */
    }
    
    /* Impedindo scroll horizontal fantasma */
    body {
        overflow-x: hidden;
    }
}

/* =========================================================================
   UX/UI PRO MAX: CENTERED CTA
========================================================================= */
.editorial-cta-section.centered-cta {
    padding: 100px 5% !important;
    background: #fdf8f5 !important;
    text-align: center !important;
}

.editorial-cta-section.centered-cta .editorial-cta-container {
    display: block !important;
    max-width: 800px !important;
}

.editorial-cta-section.centered-cta .editorial-cta-text {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
}

.editorial-cta-section.centered-cta .cta-action {
    justify-content: center !important;
}

/* =========================================================================
   UX/UI PRO MAX: METHODOLOGY BARS
========================================================================= */
.methodology-bars-section {
    background-color: #fcfaf8;
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
}

.meth-bars-header {
    text-align: center;
    margin-bottom: 60px;
}

.meth-bars-header h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--brand-dark);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.meth-bars-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.meth-circle-wrapper {
    flex: 0 0 400px;
    position: relative;
    z-index: 2;
}

.meth-circle {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.15);
    background-color: #fdfbf9;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Para alinhar imagem da médica na base */
}

.meth-circle img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom;
    margin-bottom: -10px;
}

.meth-bars-list {
    flex: 1;
    margin-left: -100px; /* Sobrepõe levemente o círculo, como na referência */
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.meth-bar {
    padding: 20px 40px 20px 140px; /* Padding enorme na esquerda por causa da sobreposição do círculo */
    border-radius: 0 30px 30px 0;
    font-weight: 500;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.meth-bar:hover {
    transform: translateX(10px);
    filter: brightness(1.05);
}

.meth-bar p {
    margin: 0;
}

/* Intercalando cores como na referência */
.meth-bar:nth-child(odd) {
    background: rgba(168, 140, 119, 0.8); /* Marrom/Taupe opaco */
    color: #ffffff;
}
.meth-bar:nth-child(odd) p {
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.meth-bar:nth-child(even) {
    background: rgba(168, 140, 119, 0.2); /* Marrom/Taupe clarinho transparente */
    color: var(--brand-dark);
}
.meth-bar:nth-child(even) p {
    font-weight: 600;
}

@media (max-width: 991px) {
    .meth-bars-container {
        flex-direction: column;
    }
    .meth-circle-wrapper {
        flex: 0 0 auto;
        margin-bottom: 30px;
        z-index: 2;
    }
    .meth-circle {
        width: 300px;
        height: 300px;
    }
    .meth-bars-list {
        margin-left: 0;
        margin-top: -80px; /* Sobrepõe o círculo por baixo no mobile */
        width: 100%;
    }
    .meth-bar {
        border-radius: 30px;
        padding: 40px 20px 20px 20px; /* Ajuste do padding */
        text-align: center;
    }
}

/* =========================================================================
   UX/UI PRO MAX: FIX METHODOLOGY CIRCLE POP-OUT
========================================================================= */
.meth-circle-wrapper {
    flex: 0 0 400px !important;
    position: relative !important;
    z-index: 2 !important;
    height: 480px !important; /* Altura maior que o círculo para vazar a cabeça */
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.meth-circle {
    width: 400px !important;
    height: 400px !important;
    border-radius: 50% !important;
    border: 8px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.15) !important;
    background-color: #fcfaf8 !important; /* Fundo suave */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1 !important; /* Círculo por baixo */
    display: block !important;
}

/* Remover a tag img de dentro do meth-circle (que existia antes) para não duplicar */
.meth-circle img {
    display: none !important; 
}

.meth-out-img {
    position: absolute !important;
    bottom: -2px !important; /* Grudada na base do círculo */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important; /* Para caber dentro das laterais do círculo */
    height: auto !important;
    max-height: 490px !important; /* Altura total, vazando a cabeça pra fora dos 400px do círculo */
    z-index: 2 !important; /* Foto fica por cima da borda do círculo! */
    object-fit: contain !important;
    object-position: bottom !important;
    filter: drop-shadow(0 15px 25px rgba(74, 59, 50, 0.15)) !important;
}

@media (max-width: 991px) {
    .meth-circle-wrapper {
        height: 380px !important;
        margin-bottom: 30px !important;
        flex: 0 0 300px !important;
    }
    .meth-circle {
        width: 300px !important;
        height: 300px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .meth-out-img {
        max-height: 380px !important;
        width: 100% !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: ESTILIZANDO O FUNDO DO DIFERENCIAL (WATERCOLOR FEEL)
========================================================================= */
.methodology-bars-section {
    background-color: #f4eae4 !important; /* Bege base mais quente e aquarelado */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(168, 140, 119, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(253, 248, 246, 0.4) 0%, transparent 100%) !important;
    padding: 120px 5% !important;
}

/* Ajuste fino na cor das barras para combinar com o novo fundo aquarelado */
.meth-bar:nth-child(even) {
    background: rgba(253, 248, 246, 0.6) !important; /* Fica mais claro e leitoso */
    color: var(--brand-dark) !important;
    border: 1px solid rgba(168, 140, 119, 0.1) !important;
}

.meth-bar:nth-child(odd) {
    background: rgba(140, 115, 96, 0.85) !important; /* Marrom mais terroso / pigmentado */
}

/* =========================================================================
   UX/UI PRO MAX: FIX METHODOLOGY CIRCLE (IMAGE INSIDE & BIGGER)
========================================================================= */
.meth-circle-wrapper {
    height: auto !important; 
    align-items: center !important;
}

.meth-circle {
    position: relative !important; 
    overflow: hidden !important; /* AGORA SIM, BLOQUEIA 100% DE VAZAMENTO DA IMAGEM */
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

/* Volta a exibir imagens dentro do círculo */
.meth-circle img {
    display: block !important;
}

.meth-inside-img {
    width: 160% !important; /* Aumenta a foto consideravelmente */
    height: auto !important;
    position: absolute !important;
    bottom: -30px !important; /* Desce um pouco para o rosto não bater no teto */
    left: 50% !important;
    transform: translateX(-50%) !important;
    object-fit: cover !important;
    filter: drop-shadow(0 0 0 transparent) !important; /* Remove sombras extrás internas */
}

/* Esconde a tag antiga caso ainda exista no cache */
.meth-out-img {
    display: none !important;
}

/* =========================================================================
   UX/UI PRO MAX: FIX METHODOLOGY CIRCLE (HEAD ALIGNMENT)
========================================================================= */
.meth-inside-img {
    width: 135% !important; /* Zoom ideal, nem gigante nem pequeno */
    bottom: auto !important; /* Remove a âncora inferior que tava cortando a cabeça */
    top: 5% !important; /* Trava a cabeça dela perto do topo do círculo */
    left: 50% !important;
    transform: translateX(-50%) !important;
    object-position: top !important; /* Garante alinhamento pelo rosto */
}

/* =========================================================================
   UX/UI PRO MAX: REFINEMENTS
========================================================================= */

/* Aumentar imagem no diferencial */
.meth-inside-img {
    width: 145% !important;
}

/* Estilizar título O Diferencial */
.styled-diff-title {
    font-family: var(--font-heading) !important;
    font-size: 3.5rem !important;
    color: var(--brand-dark) !important;
    margin-bottom: 15px !important;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
}

.diff-line {
    width: 80px;
    height: 3px;
    background: var(--accent-gold);
    margin: 0 auto;
}

/* Reverter CTA para Imagem Esquerda + Texto Centralizado na Direita */
.editorial-cta-section.split-cta {
    padding: 80px 0 0 0 !important;
    background-color: #fcfaf8 !important;
    background-image: 
        radial-gradient(circle at 25% 60%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 30%, rgba(192, 154, 110, 0.12) 0%, transparent 50%) !important;
    text-align: left !important;
}

.editorial-cta-section.split-cta .editorial-cta-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 5% !important;
}

.editorial-cta-section.split-cta .editorial-cta-image {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
}

.editorial-cta-section.split-cta .center-text {
    flex: 1 !important;
    text-align: center !important;
    padding-left: 20px !important;
}

.editorial-cta-section.split-cta .action-center {
    justify-content: center !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    .editorial-cta-section.split-cta .editorial-cta-container {
        position: relative !important;
        display: flex !important;
        flex-direction: row-reverse !important; 
        align-items: flex-end !important;
        padding: 60px 5% 0px 5% !important; /* Removemos o padding artificial porque o botão já cria espaço próprio */
        overflow: visible !important;
    }
    .editorial-cta-section.split-cta .center-text {
        flex: 0 0 55% !important;
        align-self: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 10px 30px 0 !important;
        position: relative !important;
        z-index: 10 !important; /* Texto fica abaixo da imagem em camadas */
        background-color: transparent !important; /* Remove qualquer fundo fantasma que estivesse cortando a médica */
        transform: none !important;
        animation: none !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: FIX CENTRALIZAÇÃO CTA & BENTO GRID
========================================================================= */

/* Novo tamanho Full para o Bento Grid (Ocupa a linha toda) */
.bento-full {
    grid-column: span 3;
    grid-row: span 1;
}

/* No mobile ele volta a ser 1 coluna */
@media (max-width: 991px) {
    .bento-full { 
        grid-column: span 1; 
    }
}

/* Forçando o alinhamento absoluto no centro de tudo do CTA */
.editorial-cta-section.split-cta .center-text {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.editorial-cta-section.split-cta .cta-lead {
    margin: 0 auto 30px auto !important; /* Caixa centralizada */
    text-align: center !important; /* Texto centralizado */
    max-width: 100% !important; /* Remove limitação esquerda */
}

.editorial-cta-section.split-cta .cta-kicker {
    margin: 0 auto 15px auto !important;
    display: block !important;
    text-align: center !important;
}

.editorial-cta-section.split-cta .action-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.editorial-cta-section.split-cta .editorial-btn {
    margin: 0 auto !important; /* Trava no centro */
}

/* =========================================================================
   UX/UI PRO MAX: ARCH MANIFESTO (A CONSULTA COM VIDA E SOBREPOSIÇÃO)
========================================================================= */
.arch-manifesto-section {
    padding: 120px 5%;
    background-color: #fcfaf8;
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(168, 140, 119, 0.08) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}

.arch-manifesto-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 0; /* Margem negativa fará a sobreposição */
}

/* O Arco (Foto) */
.arch-image-wrapper {
    flex: 0 0 42%;
    position: relative;
    z-index: 1;
}

.arch-frame {
    width: 100%;
    aspect-ratio: 3/4.2;
    border-radius: 250px 250px 30px 30px; /* O famoso Arch Design */
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(74, 59, 50, 0.15);
    border: 6px solid #ffffff;
    position: relative;
}

.arch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%; /* Puxa mais pro rosto */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.arch-image-wrapper:hover .arch-img {
    transform: scale(1.04);
}

/* O Cartão Flutuante (Glassmorphism) */
.arch-content-wrapper {
    flex: 0 0 65%;
    margin-left: -7%; /* A MAGIA: O texto invade a foto */
    z-index: 2;
}

.glass-manifesto {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 80px 90px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.04);
}

.glass-manifesto .manifesto-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: var(--brand-dark);
    line-height: 1.15;
    margin-bottom: 30px;
    font-weight: 300;
}

.glass-manifesto .manifesto-text p {
    font-size: 1.15rem;
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 20px;
}

.glass-manifesto .manifesto-signature {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    padding-top: 25px;
}

.glass-manifesto .manifesto-signature strong {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--brand-dark);
}

.glass-manifesto .manifesto-signature span {
    font-size: 0.9rem;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Esconder os cards estáticos antigos caso o cache não limpe */
.manifesto-section { display: none !important; }

/* Mobile Responsivo */
@media (max-width: 991px) {
    .arch-manifesto-container {
        flex-direction: column;
    }
    .arch-image-wrapper {
        flex: 0 0 100%;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
    .arch-frame {
        border-radius: 200px 200px 20px 20px;
    }
    .arch-content-wrapper {
        flex: 0 0 100%;
        margin-left: 0;
        margin-top: -80px; /* Sobrepõe de baixo pra cima no mobile! */
        padding: 0 10px;
    }
    .glass-manifesto {
        padding: 40px 30px;
    }
    .glass-manifesto .manifesto-title {
        font-size: 2.2rem;
    }
}

/* =========================================================================
   UX/UI PRO MAX: POLIMENTO FINAL (GRAND FINALE)
========================================================================= */

/* 3. Rolagem Suave e Barra de Rolagem Personalizada */
html {
    scroll-behavior: smooth !important;
}

/* Estilizando a barra de rolagem do navegador (Webkit) */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #fdfbf9; 
}
::-webkit-scrollbar-thumb {
    background: var(--brand-dark); 
    border-radius: 10px;
    border: 3px solid #fdfbf9;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold); 
}

/* 4. Cor de Seleção de Texto Luxuosa */
::selection {
    background: rgba(212, 175, 55, 0.4); /* Dourado suave */
    color: var(--brand-dark);
}
::-moz-selection {
    background: rgba(212, 175, 55, 0.4);
    color: var(--brand-dark);
}

/* Ajuste Fino: Afastar a caixa de vidro do rosto da Dra. na seção Consulta */
.arch-content-wrapper {
    margin-left: -2% !important; /* Invade bem menos a foto agora */
}

.glass-manifesto {
    padding: 70px 70px !important; /* Ajuste para equilibrar o conteúdo com a nova margem */
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE REESTRUTURADO (FOTO CENTRAL E CIRCULAR)
========================================================================= */

/* Por padrão, esconde a logo mobile no desktop */
.mobile-only-logo { 
    display: none !important; 
}

@media (max-width: 991px) {
    /* Esconde elementos exclusivos de desktop */
    .desktop-only-logo, .desktop-only { 
        display: none !important; 
    }
    
    /* O Container principal do Hero: Inverte a ordem para a foto subir */
    .hero-split {
        flex-direction: column-reverse !important;
        padding-top: 50px !important;
        justify-content: flex-start !important;
    }
    
    /* O Bloco Superior (Foto + Logo) */
    .hero-content-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 40px !important; position: relative !important;
        width: 100% !important;
    }
    
    /* Mostra e centraliza a logo acima da foto */
    .mobile-only-logo {
        display: block !important;
        width: 220px !important;
        margin: 0 auto 30px auto !important;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }
    
    /* Transforma o Arco do desktop em um Círculo perfeito no mobile */
    .mobile-circle-frame {
        width: 320px !important;
        height: 320px !important;
        border-radius: 50% !important;
        aspect-ratio: 1/1 !important;
        border: 4px solid var(--accent-gold) !important; /* Borda elegante como na sua ref */
        box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }
    
    .mobile-circle-frame img {
        object-position: center top !important; /* Puxa pro rosto */
    }
    
    /* O Bloco Inferior (Texto e Botão) */
    .hero-content-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .hero-content-left .main-title {
        font-size: 2.2rem !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    
    .hero-content-left .subtitle {
        text-align: center !important;
        margin: 0 auto 30px auto !important;
        font-size: 1rem !important;
        max-width: 90% !important;
    }
    
    .hero-content-left .pulse-button {
        margin: 0 auto !important;
        width: 90% !important; /* Botão largo no mobile como na ref */
        display: flex !important;
        justify-content: center !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: REVERTENDO HERO MOBILE (LOGO EM CIMA, IMAGEM EMBAIXO)
========================================================================= */
@media (max-width: 991px) {
    /* Força a coluna normal: Texto em cima, Imagem embaixo */
    .hero-split {
        flex-direction: column !important;
        padding-top: 30px !important;
    }
    
    /* Esconde a logo duplicada que criamos pro círculo */
    .mobile-only-logo { 
        display: none !important; 
    }
    
    /* Mostra a logo original no topo dos textos */
    .desktop-only-logo {
        display: block !important;
        margin: 0 auto 20px auto !important;
        width: 200px !important;
    }
    
    .hero-content-left {
        order: 1 !important; /* Garante que fica em cima */
        text-align: center !important;
        margin-bottom: 25px !important;
    }
    
    .hero-content-right {
        order: 2 !important; /* Garante que a foto fica no fim da seção */
        margin-bottom: 0 !important;
    }
    
    /* Remove o círculo que ficou feio e volta pro formato de arco elegante */
    .mobile-circle-frame {
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
        border-radius: 200px 200px 0 0 !important; /* Arco superior */
        aspect-ratio: auto !important;
        border: none !important; /* Tira a borda dourada pesada */
        box-shadow: none !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: FIX HERO MOBILE (IMAGEM SUMIDA E LOGO NO TOPO)
========================================================================= */
@media (max-width: 991px) {
    /* Joga a logo pro topo absoluto */
    .hero-section {
        padding-top: 10px !important;
    }
    
    .hero-split {
        padding-top: 0 !important;
    }
    
    .desktop-only-logo {
        margin-top: 0 !important;
    }
    
    /* A imagem sumiu porque o contêiner dela ficou sem altura no CSS anterior. */
    .mobile-circle-frame {
        aspect-ratio: 3/4 !important; /* Força o bloco a ter altura de retrato */
        min-height: 380px !important; /* Altura mínima de segurança */
        display: block !important;
    }
    
    .hero-dra-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: FIX HERO MOBILE (ENCAIXANDO NA TELA INTEIRA 100VH)
========================================================================= */
@media (max-width: 991px) {
    /* Força a seção a ter exatamente o tamanho da tela do celular e não cortar nada */
    .hero-section {
        height: 100svh !important;
        min-height: 100svh !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 20px !important;
    }
    
    .hero-split {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Distribui texto em cima, imagem embaixo */
        padding-top: 0 !important;
        height: 100% !important;
    }

    /* Reduzindo os textos e margens para sobrar espaço para a foto */
    .hero-content-left {
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .desktop-only-logo {
        max-width: 150px !important; /* Logo um pouco menor */
        margin-bottom: 10px !important;
    }

    .hero-content-left .main-title {
        font-size: 1.8rem !important; /* Título menor para caber */
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }

    .hero-content-left .subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        max-width: 95% !important;
    }
    
    .hero-content-left .pulse-button {
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
    }

    /* A Imagem no fundo da tela */
    .hero-content-right {
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: flex-end !important; /* Gruda no fundo */
        flex: 1 !important; /* Ocupa todo o espaço restante */
    }

    .mobile-circle-frame {
        width: 100% !important;
        height: 100% !important; /* Expande para ocupar o resto do flex */
        max-height: 40vh !important; /* Mas nunca passaúde 40% da tela */
        min-height: 250px !important; /* Altura mínima pra ela não sumir */
        border-radius: 200px 200px 0 0 !important;
        margin: 0 auto !important;
    }
    
    .hero-dra-img {
        object-position: center top !important; /* Foca no rosto */
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE FINAL (IMAGEM NO MEIO)
========================================================================= */
@media (max-width: 991px) {
    /* Inverte a ordem das caixas! A caixa da foto vai pra cima. */
    .hero-content-right {
        order: 1 !important; 
        flex: 0 0 auto !important; /* Para de esticar até o fundo */
        margin-bottom: 40px !important; position: relative !important;
        align-items: center !important; 
    }
    
    .hero-content-left {
        order: 2 !important; 
        justify-content: center !important;
    }

    /* O truque mestre: Liga a logo especial que eu criei DENTRO da caixa da foto! */
    .mobile-only-logo { 
        display: block !important; 
        margin-bottom: 40px !important; position: relative !important;
        max-width: 180px !important;
    }
    
    /* Esconde a logo que estava presa junto com os textos na caixa de baixo */
    .desktop-only-logo {
        display: none !important;
    }
    
    /* Ajusta a foto (agora no meio) para não espremer os textos */
    .mobile-circle-frame {
        height: auto !important;
        min-height: 280px !important; 
        max-height: 35vh !important;
        margin-top: 0 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE (AJUSTE FINAL DE PROPORÇÃO E BOTÃO VISÍVEL)
========================================================================= */
@media (max-width: 991px) {
    /* Encolhendo a foto dela para o botão conseguir subir na tela */
    .mobile-circle-frame {
        max-width: 260px !important; /* Era muito larga, agora mais compacta */
        min-height: 200px !important; 
        max-height: 30vh !important; /* Limita a 30% da altura da tela */
        margin-bottom: 5px !important;
    }
    
    /* Afinando a logo e os respiros lá de cima */
    .mobile-only-logo {
        max-width: 150px !important;
        margin-bottom: 10px !important;
    }
    
    /* Afinando os textos para sobrar espaço embaixo */
    .hero-content-left .main-title {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }
    
    .hero-content-left .subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
    }
    
    /* Trazendo o botão para cima e garantindo que ele não corte */
    .hero-content-left .pulse-button {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        margin-bottom: 40px !important; position: relative !important; /* Dá um respiro pro limite da tela */
    }
}

/* =========================================================================
   UX/UI PRO MAX: RESET TOTAL DO HERO MOBILE (CÍRCULO PERFEITO E COMPACTO)
========================================================================= */
@media (max-width: 991px) {
    /* 1. Container Principal limpo */
    .hero-section {
        height: 100svh !important;
        min-height: 100svh !important;
        padding-top: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: visible !important; /* Trava vazamentos */
    }

    .hero-split {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 100% !important;
        padding: 0 !important;
    }

    /* 2. BLOCO DA FOTO E LOGO (Vem primeiro) */
    .hero-content-right {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 25px !important;
        flex: 0 0 auto !important;
    }

    /* Logo limpa lá no topo */
    .mobile-only-logo {
        display: block !important;
        position: relative !important;
        max-width: 140px !important;
        margin: 0 auto 20px auto !important; /* Espaço entre logo e foto */
        z-index: 10 !important;
    }

    .desktop-only-logo {
        display: none !important;
    }

    /* O Círculo Perfeito e Reduzido */
    .mobile-circle-frame {
        width: 220px !important; /* MUITO MENOR! */
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        border-radius: 50% !important; /* Círculo perfeito */
        overflow: visible !important; /* NADA VAZA DESSE CÍRCULO */
        position: relative !important;
        margin: 0 auto !important;
        border: 4px solid var(--accent-gold) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        display: block !important;
        aspect-ratio: 1/1 !important;
    }

    .hero-dra-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important; /* Foco no rosto */
    }

    /* 3. BLOCO DOS TEXTOS E BOTÃO (Vem depois) */
    .hero-content-left {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
    }

    .hero-content-left .main-title {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }

    .hero-content-left .subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 25px !important; /* Espaço para o botão */
    }

    .hero-content-left .pulse-button {
        margin: 0 auto !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE (SEM CÍRCULO, APENAS ARCO ELEGANTE NO MEIO)
========================================================================= */
@media (max-width: 991px) {
    /* A foto no meio, mas em formato de retrato/arco elegante (zero círculo) */
    .mobile-circle-frame {
        width: 100% !important;
        max-width: 240px !important;
        height: auto !important;
        aspect-ratio: 3/4 !important; /* Formato de retrato normal */
        border-radius: 200px 200px 20px 20px !important; /* Arco elegante no topo */
        overflow: visible !important; 
        position: relative !important;
        margin: 0 auto !important;
        border: none !important; /* Sem nenhuma borda dourada */
        box-shadow: 0 15px 40px rgba(74, 59, 50, 0.1) !important; /* Sombra suave */
    }

    .hero-dra-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important; /* Foco no rosto */
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE (FOTO PURA E AGRUPAMENTO NO TOPO)
========================================================================= */
@media (max-width: 991px) {
    /* Faz o conteúdo subir em vez de ficar espalhado na tela toda */
    .hero-split {
        justify-content: flex-start !important; 
        padding-top: 10px !important;
    }

    /* Remove absolutamente qualquer traço de moldura, arco ou sombra */
    .mobile-circle-frame {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important; 
        overflow: visible !important; 
        border: none !important; 
        box-shadow: none !important; 
        background: transparent !important;
        margin-bottom: 0 !important;
    }

    /* Foto solta e natural */
    .hero-dra-img {
        position: relative !important;
        height: auto !important;
        object-fit: contain !important; 
    }

    /* Puxando os textos e botão para cima, bem pertinho da foto */
    .hero-content-left {
        margin-top: -15px !important; /* Puxa pra cima */
    }

    .hero-content-left .main-title {
        font-size: 1.8rem !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE (SUBIR IMAGEM E TÍTULO)
========================================================================= */
@media (max-width: 991px) {
    /* Puxa o bloco da imagem mais para cima, em direção à logo */
    .hero-content-right {
        margin-top: -10px !important;
        margin-bottom: 0px !important; /* Zera qualquer empurrão pra baixo */
    }

    /* Puxa o bloco de textos (Título, Subtítulo, Botão) de forma bem mais agressiva para cima */
    .hero-content-left {
        margin-top: -35px !important; /* Puxa muito mais para cima, encostando na foto */
    }

    /* Garante que o título não empurre o texto de baixo para longe */
    .hero-content-left .main-title {
        margin-bottom: 5px !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MOBILE (CORREÇÃO DE ALINHAMENTO VERTICAL - TOPO)
========================================================================= */
@media (max-width: 991px) {
    /* O problema era o justify-content: center que estava travando o conteúdo no meio da tela inteira! */
    .hero-section {
        justify-content: flex-start !important; /* Puxa o bloco TODO pro topo absoluto do celular */
        padding-top: 25px !important; /* Pequeno respiro da barra de status do celular */
    }

    .hero-split {
        justify-content: flex-start !important; /* Garante que os itens de dentro também colem em cima */
    }

    /* Removemos margens negativas malucas, pois agora o bloco todo já vai subir naturalmente */
    .hero-content-right {
        margin-top: 0 !important; 
    }
    
    .hero-content-left {
        margin-top: -15px !important; /* Apenas um ajuste fino pra colar o texto na foto */
    }
}

/* =========================================================================
   UX/UI PRO MAX: MODO AGRESSIVO (PUXANDO TUDO PRO TOPO NA MARRA)
========================================================================= */
@media (max-width: 991px) {
    /* Zera qualquer respiro invisível que a seção principal pudesse ter */
    .hero-section.hero-split {
        padding-top: 0 !important;
        margin-top: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* Puxa o bloco da Logo + Foto violentamente para cima (ignora até o cabeçalho se precisar) */
    .hero-content-right {
        margin-top: -80px !important; 
        padding-top: 0 !important;
    }

    /* Puxa os textos para cima para colar na foto e não sobrar buraco */
    .hero-content-left {
        margin-top: -40px !important; 
        padding-top: 0 !important;
    }
    
    /* Garante que a logo em si não tem margens secretas no topo */
    .mobile-only-logo {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: AJUSTE FINO (DESCENDO A LOGO)
========================================================================= */
@media (max-width: 991px) {
    /* Diminuindo a força do "puxão" pra não esmagar a logo no teto */
    .hero-content-right {
        margin-top: -20px !important; /* Estava -80px, recuei bastante */
    }

    /* Dando um respiro específico em cima da logo para ela descer com elegância */
    .mobile-only-logo {
        margin-top: 35px !important; /* Empurra a logo para baixo */
        margin-bottom: 15px !important; /* Mantém a distância pra foto */
    }
}

/* =========================================================================
   UX/UI PRO MAX: FIX DEFINITIVO (SÓ A LOGO DESCE, O RESTO FICA PRESO)
========================================================================= */
@media (max-width: 991px) {
    /* Retorna a trava agressiva que puxa a seção inteira (Foto e Textos) lá pro teto! */
    .hero-content-right {
        margin-top: -80px !important; 
    }

    /* Agora, aplicamos a margem SOMENTE na Logo para ela descer sozinha */
    .mobile-only-logo {
        margin-top: 90px !important; /* A logo desce */
        margin-bottom: 5px !important; /* Quase nenhum espaço embaixo para a foto não ser empurrada! */
    }
    
    /* Puxa os textos ainda mais forte pra cima para compensar qualquer descida */
    .hero-content-left {
        margin-top: -50px !important; 
    }
}

/* =========================================================================
   UX/UI PRO MAX: DESCENDO A LOGO SEM EMPURRAR NADA (MÁGICA DO TRANSFORM)
========================================================================= */
@media (max-width: 991px) {
    /* O Transform move a imagem visualmente na tela, mas não muda a "caixa física" dela no código. 
       Isso garante que é fisicamente impossível ela empurrar a foto e os textos para baixo! */
    .mobile-only-logo {
        transform: translateY(40px) !important; /* Move a logo visualmente 40px para baixo */
        position: relative !important;
        z-index: 10 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: TEXTO VISÍVEL NO HERO MOBILE (GLOW EFFECT)
========================================================================= */
@media (max-width: 991px) {
    /* Cria um "Halo" (brilho suave na cor do fundo do site) em volta do texto para descolar da roupa da médica, sem precisar colocar um quadrado feio atrás */
    .hero-content-left .main-title,
    .hero-content-left .subtitle {
        text-shadow: 
            0 0 15px rgba(253, 248, 245, 0.9),
            0 0 30px rgba(253, 248, 245, 1),
            0 0 45px rgba(255, 255, 255, 1),
            0 2px 5px rgba(255, 255, 255, 0.8) !important;
        font-weight: 500 !important; /* Deixa o título uma "fração" mais grosso para não sumir nas dobras da roupa */
    }
}

/* =========================================================================
   UX/UI PRO MAX: REVISÃO GERAL DAS SEÇÕES (DESKTOP E MOBILE)
========================================================================= */

/* 1. A CONSULTA (MOBILE) */
@media (max-width: 991px) {
    .arch-manifesto-container {
        display: flex !important;
        flex-direction: column-reverse !important; /* Inverte: Texto sobe, Imagem desce */
    }
    
    .arch-content-wrapper {
        margin-left: 0 !important;
        margin-bottom: -50px !important; /* O texto sobrepõe a foto levemente de cima para baixo */
        margin-top: 0 !important;
        z-index: 2 !important;
    }
    
    .arch-image-wrapper {
        margin-top: 0 !important;
        z-index: 1 !important;
    }
    
    .glass-manifesto {
        padding: 25px 20px !important; 
    }
    
    .glass-manifesto .manifesto-title {
        font-size: 1.8rem !important; /* Texto menor e requintado */
        margin-bottom: 40px !important; position: relative !important;
    }
    
    .glass-manifesto .manifesto-text p {
        font-size: 1rem !important;
    }
}

/* 2. PROTOCOLOS (MOBILE) */
@media (max-width: 991px) {
    .treatments-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Catálogo Limpo: 1 Coluna */
        gap: 20px !important;
    }
    
    .treatment-card {
        grid-column: span 1 !important; /* Cancela spans anteriores */
        grid-row: span 1 !important;
        min-height: 280px !important;
    }
}

/* 3. A MÉDICA (DESKTOP) */
@media (min-width: 992px) {
    .authority-container {
        display: flex !important;
        flex-direction: row !important; /* Garante formato PC clássico */
    }
    
    /* Como a imagem já é o 1º item no HTML, order 1 trava ela na ESQUERDA */
    .authority-image-wrapper {
        order: 1 !important; 
        margin-right: 60px !important; /* Distância pro texto */
        margin-left: 0 !important;
    }
    
    /* O texto fica na DIREITA */
    .authority-content {
        order: 2 !important; 
    }
}

/* =========================================================================
   UX/UI PRO MAX: FUNDO DA SEÇÃO 5 E AJUSTES DA SEÇÃO 6 (O DIFERENCIAL)
========================================================================= */

/* Melhorando de verdade o fundo da seção da médica (5) e do diferencial (6) */
.authority-section {
    background-color: #fdfbf9 !important; /* Base bege clarinho luxuoso */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(168, 140, 119, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(253, 248, 246, 0.3) 0%, transparent 100%) !important;
}

/* Seção 6 (Metodologia) igual ao PC no Mobile (Lado a Lado) */
@media (max-width: 991px) {
    .meth-bars-container {
        flex-direction: row !important; /* Força o lado a lado do PC */
        align-items: center !important;
        gap: 0 !important;
    }
    
    .meth-circle-wrapper {
        flex: 0 0 35% !important; /* Círculo reduzido para caber na esquerda do celular */
        margin-bottom: 0 !important;
        height: auto !important;
    }
    
    .meth-circle {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1; /* Mantém perfeitamente redondo */
        border-width: 4px !important; /* Borda mais fina e delicada no mobile */
    }
    
    .meth-bars-list {
        flex: 1 !important;
        margin-left: -15% !important; /* Cria a sobreposição da barra com o círculo, igual no PC */
        margin-top: 0 !important;
        width: auto !important;
    }
    
    .meth-bar {
        border-radius: 0 20px 20px 0 !important; /* Formato de "bandeira" do PC */
        padding: 12px 10px 12px 35px !important; /* Padding compensa a sobreposição do círculo na esquerda */
        text-align: left !important; /* Texto alinhado na esquerda igual ao PC */
        font-size: 0.70rem !important; /* Fonte reduzida para o texto caber bem no formato lado a lado */
        line-height: 1.3 !important;
    }
}

/* 4. A CLÍNICA (MOBILE) */
@media (max-width: 991px) {
    /* No HTML, o texto vinha antes da imagem. Invertemos para a foto ir pro TOPO. */
    .location-section {
        display: flex !important;
        flex-direction: column-reverse !important; 
    }
    
    .location-image-wrapper {
        margin-bottom: 40px !important; /* Puxa a imagem pra perto do card debaixo */
        z-index: 1 !important;
    }
    
    .location-content {
        margin-top: 0 !important;
        background: #fff; /* Fundo sólido para cobrir a imagem no overlap */
        border-radius: 20px;
        padding: 25px 20px !important;
        position: relative;
        z-index: 2;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
    }
}

/* =========================================================================
   UX/UI PRO MAX: SEGUNDA SEÇÃO (IMAGEM NO FUNDO & TEXTOS MENORES)
========================================================================= */
@media (max-width: 991px) {
    /* Container vira base para a imagem de fundo absoluta */
    .arch-manifesto-container {
        position: relative !important;
        min-height: 550px !important; /* Dá altura pra seção */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 40px 0 !important;
    }

    /* A caixa da imagem agora toma toda a tela por trás */
    .arch-image-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        margin: 0 !important;
    }

    /* Tiramos a moldura, ela vira um papel de parede */
    .arch-frame {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important; 
        border: none !important;
        box-shadow: none !important;
        aspect-ratio: auto !important;
        background: transparent !important;
    }

    /* A foto dela cobrindo o fundo, com opacidade para não brigar com a leitura */
    .arch-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important; /* Foco no rosto */
        opacity: 0.5 !important; /* Suaviza a foto para virar fundo de verdade */
    }

    /* O cartão de texto flutua por cima com destaque */
    .arch-content-wrapper {
        position: relative !important;
        z-index: 1 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .glass-manifesto {
        margin: 0 15px !important; /* Descola das laterais da tela */
        padding: 30px 20px !important; /* Reduz a gordura interna */
    }

    /* Diminuindo BASTANTE o tamanho dos textos a seu pedido */
    .glass-manifesto .manifesto-title {
        font-size: 1.5rem !important; /* Muito mais enxuto */
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }

    .glass-manifesto .manifesto-text p {
        font-size: 0.9rem !important; /* Texto descritivo menor */
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    .glass-manifesto .manifesto-signature {
        margin-top: 20px !important;
        padding-top: 15px !important;
    }

    .glass-manifesto .manifesto-signature strong {
        font-size: 1.1rem !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: BORDAS ESFUMAÇADAS E GRID DE 2 COLUNAS (MOBILE)
========================================================================= */
@media (max-width: 991px) {
    /* 1. OPACIDADE NAS BORDAS: Usando uma máscara de gradiente para esfumar a foto! */
    .arch-img {
        -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 95%) !important;
        mask-image: radial-gradient(ellipse at center, black 35%, transparent 95%) !important;
    }

    /* 2. PROTOCOLOS: 2 Cards por linha */
    .treatments-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Força 2 colunas */
        gap: 10px !important; /* Diminui o espaço entre eles pra caber bem na tela */
    }

    .treatment-card {
        grid-column: span 1 !important; /* Todos os cards ocupam 1 bloco */
        min-height: 220px !important; /* Altura proporcional */
        padding: 15px !important; /* Menos preenchimento interno */
    }
    
    /* Diminuindo os textos dos cards para não ficarem espremidos agora que estão dividindo a tela */
    .treatment-card .card-content h3 {
        font-size: 1.05rem !important;
        margin-bottom: 5px !important;
    }
    
    .treatment-card .card-content p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: RECONSTRUÇÃO SEÇÃO 5 E REVERSÃO DA SEÇÃO 3
========================================================================= */

/* REVERSÃO DA SEÇÃO 3 (VOLTANDO PRA 1 COLUNA) */
@media (max-width: 991px) {
    .treatments-grid {
        grid-template-columns: 1fr !important; /* 1 card por linha novamente */
    }
}

/* ESTILOS GERAIS DA SEÇÃO 5 (A MÉDICA) */
.authority-section {
    padding-top: 50px !important;
}

.auth-top-banner {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--brand-dark);
    margin-bottom: 30px;
    text-transform: uppercase;
}

.auth-mobile-logo {
    display: block;
    max-width: 50px; /* Logo pequena em cima do nome */
    margin: 0 auto 10px auto;
}

.auth-text-block {
    text-align: center;
}

.auth-text-block h2 {
    font-size: 1.4rem;
    color: var(--brand-dark);
    margin-bottom: 2px;
}

.auth-text-block .crm {
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--brand-gold);
    margin-bottom: 12px;
}

.auth-desc {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.authority-card-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin: 15px 0;
    border: 1px solid rgba(197, 168, 128, 0.3);
}

.auth-checkmarks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-checkmarks li {
    font-size: 0.9rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: var(--brand-dark);
    font-weight: 500;
}

.auth-checkmarks li:last-child {
    margin-bottom: 0;
}

.check-icon {
    margin-right: 10px;
    font-size: 1.1rem;
}

.auth-button {
    width: 100%;
    justify-content: center;
    padding: 15px 20px !important;
    margin-top: 5px !important;
}

/* ============================================== */
/* MOBILE GRID (O DESAFIO LADO-A-LADO NO CELULAR) */
/* ============================================== */
@media (max-width: 991px) {
    .authority-container {
        display: grid !important;
        grid-template-columns: 42% 58% !important; /* Exatamente a divisão pedida: Imagem na Esquerda, Texto Direita */
        gap: 10px !important;
        align-items: center !important;
        padding: 0 5px !important;
    }
    
    .authority-image-wrapper {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
    }
    
    .authority-img {
        width: 100%;
        height: auto;
        border-radius: 15px; /* Bordas arredondadas pra foto não ficar chapada */
    }
    
    .authority-content {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
    }
    
    /* O cartão e o botão ocupam 100% da tela abaixo da dupla dinâmica */
    .authority-card-wrapper {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
    }
    
    .auth-button {
        grid-column: 1 / 3 !important;
        grid-row: 3 / 4 !important;
    }
}

/* ============================================== */
/* DESKTOP GRID (MANTENDO A ORDEM CLÁSSICA)       */
/* ============================================== */
@media (min-width: 992px) {
    .authority-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 50px !important;
        align-items: center !important;
    }
    
    .auth-top-banner {
        font-size: 1.3rem;
        margin-bottom: 50px;
    }
    
    .authority-image-wrapper {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 4 !important; /* A foto se espalha pela altura inteira da coluna esquerda */
    }
    
    .authority-content {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
    }
    
    .auth-text-block {
        text-align: left; /* No PC, alinhamos à esquerda por leitura natural */
    }
    
    .auth-mobile-logo {
        margin: 0 0 15px 0; 
    }
    
    .authority-card-wrapper {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        margin-top: 0;
    }
    
    .auth-button {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 4 !important;
        width: auto !important; /* Não estica 100% no PC */
        justify-self: start !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: REPLICANDO LAYOUT SOBREPOSTO (REFERÊNCIA MOBILE)
========================================================================= */
@media (max-width: 991px) {
    .authority-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Alinha no topo para o texto descer lado a lado */
        padding: 0 10px 0 0 !important; /* Remove o padding da esquerda para encostar a foto na borda */
        position: relative;
    }
    
    .authority-image-wrapper {
        display: block !important; /* Restaura a imagem */
        width: 65% !important; /* Aumenta ainda mais a largura reservada para a imagem */
        margin-left: -15% !important; /* Joga bem mais pra esquerda */
        margin-bottom: 0 !important;
        z-index: 1;
    }
    
    .authority-img {
        object-fit: cover;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        width: 125% !important; /* Aumenta muito o tamanho da imagem */
        max-width: none !important;
        height: auto !important;
        display: block;
        /* EFEITO DE LUZ/FADE: O MASK FAZ A IMAGEM SUMIR NO FUNDO SEJA QUAL FOR A COR DELE */
        -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    }
    
    .authority-content {
        width: 50% !important; /* Texto na direita ocupando os 50% da tela restantes */
        margin-left: 0 !important; /* Sem sobreposição horizontal */
        margin-top: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 0 0 5px !important; /* Espaço mínimo entre imagem e texto */
        box-shadow: none !important;
        border: none !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }
    
    .section-kicker {
        text-align: center !important;
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 0.75rem !important;
    }
    
    .authority-content h2 {
        font-size: 1.4rem !important;
        margin-bottom: 2px !important;
        text-align: center !important;
    }
    
    .authority-content .crm {
        font-size: 0.75rem !important;
        margin-bottom: 15px !important;
        opacity: 0.8;
        text-align: center !important;
    }
    
    .authority-content p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    /* Experiência clínica etc: fica naturalmente em baixo do texto, dentro da coluna da direita */
    .authority-badges {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* Empilha os botões para caberem bem na coluna da direita */
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-top: 10px !important;
    }
    
    .badge-item {
        /* Herda os estilos do PC (fundo branco, borda arredondada) */
        font-size: 0.75rem !important;
        padding: 8px 15px !important;
    }
}

/* Restabelece o Flex clássico no PC */
@media (min-width: 992px) {
    .authority-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .authority-image-wrapper {
        order: 1 !important;
        margin-right: 50px !important;
    }
    .authority-content {
        order: 2 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: REPLICAÇÃO EXATA DO LAYOUT DO PRINT (SEÇÕES 5 E 6)
========================================================================= */

/* Fundo da seção 5 mantido suave e elegante, sem pesar */
.authority-section {
    background-color: #fdfbf9 !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(253, 248, 246, 0.3) 0%, transparent 100%) !important;
}

/* Fundo da seção 6 igual ao do print (Limpo, bege bem clarinho, sem manchas) */
.methodology-bars-section {
    background-color: #fdfbf9 !important;
    background-image: 
        radial-gradient(circle at -10% -10%, rgba(212, 175, 55, 0.20) 0%, transparent 50%),
        radial-gradient(circle at 110% 110%, rgba(168, 140, 119, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 100%) !important;
    padding: 40px 5% 50px 5% !important;
}

@media (max-width: 991px) {
    /* Diminui o tamanho do título igual ao do print e centraliza */
    .meth-bars-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    /* Container que abraça imagem e barras */
    .meth-bars-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        padding-left: 0 !important; /* Para a imagem encostar na borda esquerda */
    }
    
    /* Imagem cortando/encostando na borda esquerda, ocupando quase metade */
    .meth-circle-wrapper {
        flex: 0 0 70% !important;
        margin-bottom: 0 !important;
        margin-left: -15% !important; /* Faz a foto "sangrar" pra fora do lado esquerdo como no print */
        height: auto !important;
        z-index: 2; /* Fica por cima das barras */
    }
    
    .meth-circle {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        border: 2px solid rgba(197, 168, 128, 0.3) !important; /* Borda bem fina e delicada */
        box-shadow: 2px 5px 15px rgba(0,0,0,0.08) !important;
    }
    
    /* As barras entrando por trás da imagem */
    .meth-bars-list {
        flex: 1 !important;
        margin-left: -40% !important; /* Barras afundando bastante por baixo da foto */
        margin-top: 0 !important;
        width: auto !important;
        z-index: 1; /* Fica por trás */
    }
    
    /* Design exato das barras do print: Arredondadas em tudo e texto alinhado à direita */
    .meth-bar {
        border-radius: 12px !important; /* Arredondamento em todos os cantos */
        padding: 12px 15px 12px 48% !important; /* Padding compensa a imagem por cima */
        text-align: right !important; /* Alinhamento do texto igual ao print */
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        margin-bottom: 3px !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.04) !important; /* Sombra sutil */
    }
}





/* =========================================================================
   UX/UI PRO MAX: AJUSTES REFINADOS SEÇÃO 6 (METODOLOGIA) E SEÇÃO 7 (ONDE ESTAMOS) NO MOBILE
========================================================================= */
@media (max-width: 991px) {
    /* Seção 6: O primeiro e o último item (Investigação e Beleza) ganham linha maior */
    .meth-bar:first-child, 
    .meth-bar:last-child {
        padding-left: 28% !important; /* Menos recuo pois o círculo é mais estreito nos polos */
    }
    
    /* Seção 7: Onde estamos - Imagem em cima, Card reduzido e bonito embaixo */
    .location-section.split-layout {
        flex-direction: column-reverse !important;
        padding: 40px 15px 80px 15px !important;
        background-color: #fdfbf9 !important;
        background-image: 
            radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.20) 0%, transparent 50%),
            radial-gradient(circle at 20% 100%, rgba(168, 140, 119, 0.20) 0%, transparent 50%),
            url('assets/texture.png') !important;
        background-blend-mode: overlay !important;
        background-size: cover !important;
    }
    
    .location-image-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        margin-bottom: 40px !important; position: relative !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
    .location-photo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
        border-radius: 20px !important;
    }
    
    .location-image-wrapper img, .location-photo {
        border-radius: 20px !important;
        width: 100% !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }
    .location-image-wrapper::after {
        content: '';
        position: absolute !important;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background: linear-gradient(to top, #fdfbf9 0%, transparent 100%) !important;
        z-index: 2;
        border-radius: 0 0 20px 20px;
        pointer-events: none;
    }
    
    .location-content {
        flex: 0 0 auto !important;
        width: 88% !important; max-width: 400px !important; padding: 25px 25px !important; /* Diminui o tamanho para ficar um card contido */
        margin: 0 auto !important; /* Centraliza o card abaixo da imagem */
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 25px !important;
        padding: 25px 20px !important;
        position: relative;
        z-index: 2 !important; /* Garante que fique por cima da imagem */
        box-shadow: 0 20px 50px rgba(74, 59, 50, 0.12) !important; /* Sombra luxuosaúde card */
        border: 1px solid rgba(255,255,255,0.8) !important;
        text-align: center !important;
    }
}




@media (max-width: 991px) {
    .location-content h2 { margin-bottom: 8px !important; font-size: 1.5rem !important; }
    .location-content p { margin-bottom: 8px !important; font-size: 0.85rem !important; line-height: 1.3 !important; }
    .location-content .section-kicker { margin-bottom: 5px !important; }
    .location-content .location-btn { margin-top: 5px !important; padding: 12px 20px !important; }
}




/* =========================================================================
   UX/UI PRO MAX: REESTRUTURAÇÃO CTA 2 COLUNAS (APENAS MOBILE)
========================================================================= */

/* Fundo bonito apenas na seção principal */
.editorial-cta-section.split-cta {
    background-color: #fcfaf8 !important;
    background-image: 
        none !important;
}

/* Oculta apenas os detalhes escuros antigos, mantendo limpo */
.editorial-cta-section.split-cta::before {
    display: none !important;
}




/* -------------------------------------------------------------------------
   MOBILE: LAYOUT 2 COLUNAS (TEXTO + IMAGEM)
------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .editorial-cta-section.split-cta {
        padding: 60px 0 0 0 !important; 
        /* Fundo de luxo: Efeito "Spotlight" (holofote) suave nas costas da médica, escurecendo bem levemente para as bordas num tom champanhe */
        background: radial-gradient(circle at 70% 60%, #ffffff 0%, #fcf7f0 50%, #f2e3cf 100%) !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 99 !important;
    }

    .editorial-cta-section.split-cta .editorial-cta-container {
        position: relative !important;
        display: flex !important;
        flex-direction: row-reverse !important; 
        align-items: flex-end !important;
        padding: 60px 5% 0px 5% !important; /* Removemos o padding artificial porque o botão já cria espaço próprio */
        overflow: visible !important;
    }
    
    .editorial-cta-section.split-cta .cta-kicker {
        position: absolute !important;
        top: 20px !important;
        right: 5% !important; /* Joga firmemente para a direita */
        left: auto !important; /* Anula a centralização anterior */
        transform: none !important; /* Remove a trava do centro */
        width: auto !important; 
        text-align: right !important; /* Alinha o texto para a direita */
        margin: 0 !important;
        z-index: 60 !important;
        letter-spacing: 3px !important;
        font-size: 11px !important;
        color: #cfa878 !important;
        font-weight: 600 !important;
    }

    /* Remove o transform/animação da coluna de texto no mobile para não prender a posição absoluta do kicker */
    .editorial-cta-section.split-cta .center-text {
        flex: 0 0 55% !important;
        align-self: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 10px 30px 0 !important;
        position: relative !important;
        z-index: 10 !important; /* Texto fica abaixo da imagem em camadas */
        background-color: transparent !important; /* Remove qualquer fundo fantasma que estivesse cortando a médica */
        transform: none !important;
        animation: none !important;
    }

    .editorial-cta-section.split-cta .center-text {
        flex: 0 0 55% !important;
        align-self: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 10px 30px 0 !important;
        position: relative !important;
        z-index: 10 !important; /* Texto fica abaixo da imagem em camadas */
        background-color: transparent !important; /* Remove qualquer fundo fantasma que estivesse cortando a médica */
        transform: none !important;
        animation: none !important;
    }
    
    .editorial-cta-section.split-cta .harmonious-title {
        font-size: 1.6rem !important;
        text-align: center !important;
        margin-top: 0 !important; /* Margem normal agora que a coluna subiu */
        margin-bottom: 15px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }
    
    .editorial-cta-section.split-cta .cta-lead {
        font-size: 0.75rem !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }

    .editorial-cta-section.split-cta .cta-quote {
        font-size: 0.85rem !important;
        text-align: center !important;
        font-style: italic !important;
        padding: 12px 0 !important;
        margin: 15px 0 0 0 !important;
        border-top: 1px solid #c49a6c !important; /* Linha sutil em cima */
        border-bottom: 1px solid #c49a6c !important; /* Linha sutil embaixo */
        border-left: none !important;
        width: 90% !important;
    }

    .editorial-cta-section.split-cta .editorial-cta-image {
        flex: 0 0 45% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 30 !important; /* FORÇA a imagem inteira a renderizar POR CIMA da coluna de texto! */
    }
    
    .cta-doctor-cutout {
        width: 150% !important; 
        margin-left: -30% !important; 
        margin-right: 0 !important; /* ZERO ABSOLUTO! Trava a imagem dentro da tela e impede que o navegador corte o braço direito */
        margin-bottom: 0 !important;
        height: auto !important;
        max-width: none !important;
        object-fit: unset !important;
        transform: none !important;
        display: block !important;
        z-index: 40 !important;
        mix-blend-mode: multiply !important;
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%) !important;
    }

    .editorial-cta-section.split-cta .action-center {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 20px 0 0px 0 !important;
        position: relative !important;
        z-index: 50 !important;
    }
    
    /* Estilo premium exclusivo pro botão dessa seção */
    .editorial-cta-section.split-cta .action-center .btn {
        background-color: #cfa878 !important; /* Dourado da clínica */
        color: #ffffff !important;
        padding: 16px 45px !important;
        font-family: 'Cinzel', serif !important; /* Fonte chique se houver, ou secundária */
        font-size: 13px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        border-radius: 50px !important; /* Arredondado elegante */
        border: none !important;
        box-shadow: 0 10px 25px rgba(207, 168, 120, 0.3) !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }
}































/* =========================================================================
   UIPROMAX: THE ULTIMATE PREMIUM ARCH CARD OVERRIDE
   This block definitively overwrites all previous mobile rules for this section.
========================================================================= */
@media (max-width: 991px) {
    /* 1. Fundo Escuro para contraste */
    .editorial-cta-section.split-cta {
        padding: 50px 20px 60px 20px !important;
        background: var(--primary-dark, #2b3927) !important;
        background-image: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    /* 2. O Card Branco Premium */
    .editorial-cta-section.split-cta .editorial-cta-container {
        background-color: #ffffff !important;
        border-radius: 35px !important;
        width: 100% !important;
        max-width: 450px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important; /* Empilha foto em cima, texto embaixo */
        box-shadow: 0 30px 60px rgba(0,0,0,0.3) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* 3. O Arco Superior Elegante (ESCONDE CORTES HORRÍVEIS AUTOMATICAMENTE!) */
    .editorial-cta-section.split-cta .editorial-cta-image {
        margin: 20px 20px 0 20px !important;
        background: linear-gradient(135deg, #fdfbf8 0%, #f4eee6 100%) !important;
        border-radius: 200px 200px 20px 20px !important; /* Formato de arco/nicho */
        height: 380px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        overflow: hidden !important; /* A MÁGICA: O arco recorta a imagem impecavelmente */
        position: relative !important;
        z-index: 10 !important;
        flex: none !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* 4. A Imagem da Médica Perfeita no Arco */
    .cta-doctor-cutout {
        width: 140% !important; /* Enorme para dar impacto */
        margin: 0 !important;
        margin-bottom: -15px !important; /* Assenta a médica na base do arco */
        height: auto !important;
        max-width: none !important;
        display: block !important;
        mix-blend-mode: multiply !important;
        mask-image: none !important; 
        -webkit-mask-image: none !important;
        transform: none !important;
        object-fit: contain !important;
    }

    /* 5. Área de Texto e Conteúdo (Base do Card) */
    .editorial-cta-section.split-cta .center-text {
        padding: 35px 25px 40px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background-color: transparent !important;
        flex: none !important;
        width: 100% !important;
        z-index: 20 !important;
        box-sizing: border-box !important;
    }

    .editorial-cta-section.split-cta .cta-kicker {
        position: static !important;
        color: var(--accent-gold, #cfa878) !important;
        font-size: 11px !important;
        letter-spacing: 3px !important;
        margin: 0 0 15px 0 !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        transform: none !important;
        font-weight: 600 !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
    }

    .editorial-cta-section.split-cta .harmonious-title {
        font-family: var(--font-secondary), serif !important;
        font-size: 32px !important;
        color: var(--text-dark, #1a1a1a) !important;
        margin: 0 0 15px 0 !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    .editorial-cta-section.split-cta .cta-lead {
        font-size: 14px !important;
        color: #555 !important;
        margin: 0 0 25px 0 !important;
        line-height: 1.6 !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    .editorial-cta-section.split-cta .cta-quote {
        background-color: rgba(207, 168, 120, 0.05) !important;
        border-left: 3px solid var(--accent-gold, #cfa878) !important;
        padding: 15px 20px !important;
        border-radius: 0 15px 15px 0 !important;
        font-style: italic !important;
        color: var(--primary-dark, #2b3927) !important;
        font-size: 14px !important;
        text-align: left !important;
        margin: 0 0 30px 0 !important;
        box-shadow: none !important;
        border-top: none !important;
        border-bottom: none !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 6. Botão Dourado Premium Redesenhado */
    .editorial-cta-section.split-cta .action-center {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .editorial-cta-section.split-cta .action-center .btn {
        background-color: var(--accent-gold, #cfa878) !important;
        color: #ffffff !important;
        padding: 18px 0 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        border-radius: 50px !important;
        border: none !important;
        box-shadow: 0 10px 25px rgba(207, 168, 120, 0.4) !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

/* =========================================================================
   MOBILE CTA OVERRIDE: NO IMAGE, PURE ELEGANT TEXT (USER REQUEST)
========================================================================= */
@media (max-width: 991px) {
    /* Esconde completamente a coluna da imagem */
    .editorial-cta-section.split-cta .editorial-cta-image {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* O container vira um espaçador simples */
    .editorial-cta-section.split-cta .editorial-cta-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 40px 20px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* A coluna de texto pega 100% da tela */
    .editorial-cta-section.split-cta .center-text {
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Ajustes da tipografia para ficar igual ao PC, mas fluido pro celular */
    .editorial-cta-section.split-cta .cta-kicker {
        position: static !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        color: var(--accent-gold, #cfa878) !important;
        letter-spacing: 3px !important;
        margin: 0 0 15px 0 !important;
    }

    .editorial-cta-section.split-cta .harmonious-title {
        font-size: 36px !important;
        margin: 0 0 20px 0 !important;
        line-height: 1.1 !important;
    }

    .editorial-cta-section.split-cta .cta-lead {
        font-size: 16px !important;
        margin: 0 0 30px 0 !important;
    }

    .editorial-cta-section.split-cta .cta-quote {
        margin: 0 0 40px 0 !important;
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
        border-left: none !important;
        border-top: 2px solid rgba(207, 168, 120, 0.3) !important;
        border-bottom: 2px solid rgba(207, 168, 120, 0.3) !important;
        background: transparent !important;
        padding: 20px 10px !important;
        border-radius: 0 !important;
    }

    /* O Botão bem alinhado */
    .editorial-cta-section.split-cta .action-center {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .editorial-cta-section.split-cta .action-center .btn {
        width: 100% !important;
        max-width: 300px !important;
        padding: 18px 0 !important;
        font-size: 14px !important;
        margin: 0 auto !important;
    }
}

/* =========================================================================
   MOBILE CTA FIX: RESTORE LIGHT BACKGROUND
========================================================================= */
@media (max-width: 991px) {
    /* O bloco anterior de UIPromax tinha deixado o fundo verde escuro. 
       Aqui nós forçamos o fundo perolado de volta para que os textos escuros voltem a aparecer! */
    .editorial-cta-section.split-cta {
        background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fcf7f0 50%, #f2e3cf 100%) !important;
        padding: 60px 20px !important;
    }
    
    /* Garantir que o texto da citação apareça bonito e legível */
    .editorial-cta-section.split-cta .cta-quote {
        color: var(--primary-dark, #2b3927) !important; /* Texto escuro */
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* O título legível */
    .editorial-cta-section.split-cta .harmonious-title {
        color: var(--text-dark, #1a1a1a) !important;
    }

    /* O texto auxiliar legível */
    .editorial-cta-section.split-cta .cta-lead {
        color: #555555 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: FIX FOOTER MOBILE + EFEITO "PÁGINA SUBINDO POR CIMA"
========================================================================= */

/* 1. Efeito de Transição Premium (Sticky Hero Parallax)
   Faz a seção Hero ficar fixada no fundo enquanto a próxima seção "sobe por cima" dela.
   Isso cria a exata transição de luxo que o usuário pediu, sem risco de bugar o layout. */
body {
    /* Necessário para o sticky funcionar corretamente no contexto da página toda */
    overflow-x: hidden;
}

.hero {
    position: sticky !important;
    top: 0 !important;
    z-index: 0 !important;
}

/* Garante que todas as seções abaixo da Hero tenham z-index maior e fundo sólido 
   para "esmagar" e passar por cima da Hero */
section {
    position: relative;
    z-index: 10;
}

/* 2. Correções do Footer no Mobile */
@media (max-width: 991px) {
    .footer-premium {
        padding: 50px 20px 20px 20px !important;
        text-align: center !important;
    }
    
    .footer-premium-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }

    /* Centraliza os ícones sociais (esse era o maior bug visual) */
    .footer-social {
        justify-content: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Centraliza os links e contatos */
    .links-col ul, .contact-col ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .links-col ul li a, .contact-col ul li {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Centraliza os textos de copyright */
    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
        align-items: center !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: PARALLAX FIXED HERO E FOOTER MOBILE DEFINITIVO
========================================================================= */
@media (max-width: 991px) {
/* Removido Parallax Hero - Causava sumiço do Hero devido ao z-index */

    /* 2. O Footer Consertado com Flexbox Real */
    .footer-premium {
        padding: 60px 20px 30px 20px !important;
        text-align: center !important;
    }
    
    .footer-premium-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
    }

    /* Ícones sociais alinhados via Flexbox */
    .footer-social {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Listas centralizadas */
    .links-col ul, .contact-col ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 15px !important;
    }

    .links-col ul li a, .contact-col ul li {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}


/* =========================================================================
   UX/UI PRO MAX: EDITORIAL TYPOGRAPHY UPDATE (REFERÊNCIA DE LUXO)
========================================================================= */

:root {
    --font-heading: 'Cormorant Garamond', serif !important; /* Fonte super elegante e fina */
}

/* Ajuste base para a nova fonte elegante */
h1, h2, h3, h4, h5, h6, .vogue-title, .harmonious-title, .main-title, .manifesto-title {
    font-weight: 400 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
}

/* Estilo Editorial: Mistura de Itálico */
.italic-serif {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* Efeito de Caixa de Destaque nas Palavras */
.box-highlight {
    display: inline-block;
    border: 1px solid var(--accent-gold); 
    padding: 0px 8px;
    margin: 0 4px;
    font-style: normal !important;
    line-height: 1.1;
    font-family: 'Cormorant Garamond', serif !important;
    /* Fundo super leve para dar volume */
    background-color: rgba(192, 154, 110, 0.05);
}

/* Estilo Kicker de Revista (Bloco de cor sólida, ex: "Protocolo") */
.section-kicker {
    display: inline-block !important;
    background-color: var(--brand-dark) !important; /* Fundo sólido elegante */
    color: var(--bg-light) !important;
    padding: 4px 15px !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-size: 1.3rem !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.1) !important;
}

/* =========================================================================
   UX/UI PRO MAX: AJUSTES FINOS DA TIPOGRAFIA (FEEDBACK)
========================================================================= */

/* Aumentando o peso da fonte principal para ficar um pouco mais encorpada/grossa */
h1, h2, h3, h4, h5, h6, .vogue-title, .harmonious-title, .main-title, .manifesto-title, .italic-serif {
    font-weight: 500 !important; 
}

/* Juntando o espaço das linhas especificamente no título principal da Hero */
.main-title {
    line-height: 0.9 !important; 
}

/* =========================================================================
   UX/UI PRO MAX: BOTÕES SUPER LUXUOSOS E ESTILIZADOS
========================================================================= */

/* Unificando e Estilizando todos os botões principais do site */
.pulse-button, .btn-primary, .location-btn, .footer-btn {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #a4784a 100%) !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    padding: 18px 40px !important;
    border-radius: 50px !important; /* Formato Pílula Elegante */
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(192, 154, 110, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Hover com mola (elástico) */
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    animation: none !important; /* Desliga o pulsar amador antigo */
}

/* Efeito de brilho (Shine Effect) que passa por cima do botão ao passar o mouse */
.pulse-button::after, .btn-primary::after, .location-btn::after, .footer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: -1;
    transition: all 0.7s ease;
}

.pulse-button:hover, .btn-primary:hover, .location-btn:hover, .footer-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(192, 154, 110, 0.6) !important;
    background: linear-gradient(135deg, #a4784a 0%, var(--accent-gold) 100%) !important;
    color: #ffffff !important;
}

.pulse-button:hover::after, .btn-primary:hover::after, .location-btn:hover::after, .footer-btn:hover::after {
    left: 200%; /* Faz o brilho passar deslizando */
}

/* Consertando espaçamento do botão no celular */
@media (max-width: 991px) {
    .editorial-cta-section.split-cta .action-center .btn {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: HERO MAIS PREENCHIDA NO DESKTOP (TAMANHO GIGANTE)
========================================================================= */

@media (min-width: 992px) {
    /* Aumentando drasticamente o título principal para preencher a tela igual a referência */
    .hero-content-left .main-title {
        font-size: clamp(3.5rem, 6.5vw, 7rem) !important; /* GIGANTE */
        line-height: 0.9 !important;
        margin-bottom: 2rem !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* Aumentando e esticando o subtítulo para dar volume na leitura */
    .hero-content-left .subtitle {
        font-size: 1.35rem !important;
        max-width: 90% !important; /* Deixa o texto correr mais na horizontal */
        margin-bottom: 2.5rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* Alinhando todo o bloco da esquerda para a esquerda, para ocupar melhor o espaço */
    .hero-content-left {
        align-items: flex-start !important; 
        text-align: left !important;
        padding-left: 2% !important; /* Dá um leve respiro da borda da tela */
    }

    /* O botão também deve ficar alinhado à esquerda no PC agora */
    .pulse-button {
        margin: 0 !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: PESO DE FONTE AINDA MAIOR (REFERÊNCIA BOLD)
========================================================================= */

/* Forçando o peso 700 (Bold) da Cormorant Garamond para engrossar bem as letras */
h1, h2, h3, h4, h5, h6, .vogue-title, .harmonious-title, .main-title, .manifesto-title, .italic-serif {
    font-weight: 700 !important; 
}

/* =========================================================================
   UX/UI PRO MAX: O PIVOT DEFINITIVO (CORES, LUZES, FONTES, TRANSIÇÕES)
========================================================================= */

:root {
    /* A Nova Paleta "Sublime" (Pêssego, Coral, Nude Iluminado) */
    --bg-light: #Fcf7f6 !important; /* Nude muito iluminado, pele limpa */
    --brand-beige: #f5ece9 !important; /* Pêssego/rosado suave */
    --brand-dark: #7a5c53 !important; /* Marrom/vinho muito chique (leitura suave) */
    --text-main: #6b524a !important; 
    --accent-gold: #eb665a !important; /* O Coral vibrante da referência! */
    
    /* A Fonte da Vogue */
    --font-heading: 'Bodoni Moda', serif !important;
}

/* Forçando a Bodoni e o Itálico Editorial em tudo */
h1, h2, h3, h4, h5, h6, .vogue-title, .harmonious-title, .main-title, .manifesto-title {
    font-family: 'Bodoni Moda', serif !important;
    font-weight: 500 !important;
}

.italic-serif {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* LUZES DE FUNDO (AMBIENT ORBS) */
.ambient-lights {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -2 !important; /* No fundo de absolutamente tudo */
    overflow: hidden !important;
    pointer-events: none !important;
    background-color: var(--bg-light) !important;
}

.ambient-lights .orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(90px) !important;
    opacity: 0.65 !important;
    animation: floatOrb 25s infinite alternate ease-in-out !important;
}

.ambient-lights .orb-1 {
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle, rgba(235,102,90,0.12) 0%, rgba(252,247,246,0) 70%) !important; /* Coral Glow */
    top: -10% !important;
    left: -10% !important;
}

.ambient-lights .orb-2 {
    width: 900px !important;
    height: 900px !important;
    background: radial-gradient(circle, rgba(245,236,233,0.9) 0%, rgba(252,247,246,0) 70%) !important; /* Peach Glow */
    bottom: -20% !important;
    right: -10% !important;
    animation-duration: 30s !important;
    animation-delay: -5s !important;
}

.ambient-lights .orb-3 {
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(122,92,83,0.06) 0%, rgba(252,247,246,0) 70%) !important; /* Sombra de Contraste */
    top: 40% !important;
    left: 60% !important;
    animation-duration: 22s !important;
    animation-delay: -2s !important;
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.1); }
    100% { transform: translate(-40px, 90px) scale(0.9); }
}

/* TRANSPARÊNCIA NAS SEÇÕES PARA AS LUZES APARECEREM */
.manifesto-section, .treatments-section, .authority-section, .methodology-section, .methodology-bars-section, .location-section, .testimonials-section, .faq-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* TRANSIÇÃO FLUIDA ENTRE A HERO E A SEÇÃO 2 (Adeus linha reta) */
.hero-split::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 180px !important;
    background: linear-gradient(to top, var(--bg-light) 0%, transparent 100%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* O fundo transparente da Hero para misturar a foto com o fundo novo */
.hero-split::before {
    background: linear-gradient(135deg, rgba(252, 247, 246, 0.95) 0%, rgba(245, 236, 233, 0.85) 100%) !important;
}

/* Atualizando a caixa de destaque com a cor Coral (ex: [Suavize]) */
.box-highlight {
    border-color: var(--accent-gold) !important;
    background-color: rgba(235, 102, 90, 0.05) !important;
}

/* Arrumando o botão premium com a nova paleta */
.pulse-button, .btn-primary, .location-btn, .footer-btn {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #d8574c 100%) !important;
    box-shadow: 0 10px 25px rgba(235, 102, 90, 0.35) !important;
}

.pulse-button:hover, .btn-primary:hover, .location-btn:hover, .footer-btn:hover {
    background: linear-gradient(135deg, #d8574c 0%, var(--accent-gold) 100%) !important;
    box-shadow: 0 15px 35px rgba(235, 102, 90, 0.5) !important;
}
/* Empurrando o bloco de texto do PC um pouco mais para a direita conforme pedido */
@media (min-width: 992px) {
    .hero-content-left {
        padding-left: 6% !important; /* Mais para a direita */
    }
}

/* =========================================================================
   UX/UI PRO MAX: TRANSIÇÃO NATURAL E EFEITO ESFUMADO NA IMAGEM
========================================================================= */

/* 1. Removendo a quebra seca de cor na Seção Anterior (A Dor Vogue) */
.pain-section-vogue {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--brand-dark) !important; 
}

/* Convertendo os textos da seção anterior para marrom elegante, para ler no fundo claro */
.pain-section-vogue .vogue-title,
.pain-section-vogue p,
.pain-section-vogue .vogue-dropcap,
.pain-section-vogue .vogue-highlight {
    color: var(--brand-dark) !important;
}

.pain-section-vogue .vogue-highlight {
    border-top: 1px solid rgba(122, 92, 83, 0.3) !important;
}

/* 2. Destruindo a caixa quadrada da médica e criando o efeito de fusão nas bordas */
.authority-img {
    box-shadow: none !important; /* Remove sombra de cartão */
    border-radius: 0 !important; /* Remove cantos redondos duros */
    background: transparent !important;
    
    /* A máscara gradual que faz a imagem sumir nas bordas superior e inferior */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%) !important;
    
    transform: scale(1.1) !important; /* Cresce um pouquinho para o fade ficar mais grandioso */
}

/* =========================================================================
   UX/UI PRO MAX: REFINAMENTO DE FONTE E DA SEÇÃO 2 (A CONSULTA)
========================================================================= */

/* 1. Melhoria fina na Fonte (Mais elegância e legibilidade editorial) */
body, p, .subtitle, .manifesto-text p {
    font-weight: 400 !important; /* Textos muito finos (300) perdem legibilidade, 400 é o ideal */
    font-size: 1.05rem !important;
    line-height: 1.85 !important; /* Mais respiro entre as linhas */
    color: var(--text-main) !important;
    letter-spacing: 0.2px !important;
}

/* Suavizando um milímetro o peso dos títulos para não ficarem grosseiros, mantendo a força do Bodoni */
h1, h2, h3, h4, h5, h6, .vogue-title, .harmonious-title, .main-title, .manifesto-title, .italic-serif {
    font-weight: 500 !important; 
    letter-spacing: -0.2px !important;
}

/* 2. Transformando a Seção 2 (Manifesto) para a nova estética Sublime */
.arch-manifesto-section {
    padding: 180px 5% 120px !important; /* Dando muito mais respiro/espaço de luxo */
}

/* Removendo a borda grossa e branca da imagem, deixando só o recorte em arco limpo */
.arch-frame {
    border: none !important;
    box-shadow: 0 40px 80px rgba(122, 92, 83, 0.15) !important; /* Sombra muito mais suave e quente */
    background: transparent !important;
}

/* O cartão de vidro: Agora será incrivelmente translúcido e chique, para as orbs brilharem por trás */
.glass-manifesto {
    background: rgba(253, 246, 245, 0.25) !important; /* Quase transparente */
    backdrop-filter: blur(25px) !important; /* Desfoque intenso estilo Apple/Vogue */
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important; /* Borda super fina iluminada */
    box-shadow: 0 25px 50px rgba(122, 92, 83, 0.05) !important;
    padding: 60px 50px !important; /* Mais espaço interno */
    border-radius: 20px !important;
}

/* Aumentando o impacto e a beleza do título principal do Manifesto */
.manifesto-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
    margin-bottom: 2rem !important;
    line-height: 1.2 !important;
}

/* =========================================================================
   UX/UI PRO MAX: AJUSTES FINAIS DA HERO (LOGO E BOTÃO)
========================================================================= */

/* 1. Diminuindo a Logo para ganhar espaço e ficar mais minimalista */
.hero-logo {
    max-width: 210px !important; /* Estava 280px */
    margin-bottom: 1rem !important;
}

/* 2. Aproximando os textos para puxar o botão mais para cima no PC */
@media (min-width: 992px) {
    .hero-content-left .main-title {
        margin-bottom: 1rem !important; 
    }
    .hero-content-left .subtitle {
        margin-bottom: 1.5rem !important; 
    }
}

/* 3. Colocando TODOS os botões acima da névoa de transição para não perderem a cor forte */
.pulse-button, .btn-primary, .location-btn, .footer-btn {
    z-index: 10 !important; /* A névoa/fade tem z-index 3, o botão fura ela agora */
    position: relative !important;
}

/* =========================================================================
   UX/UI PRO MAX: REFINAMENTO DA HERO (FOCO NO TÍTULO)
========================================================================= */

/* 1. Subindo o bloco de texto para o título e o botão ficarem mais altos na tela */
@media (min-width: 992px) {
    .hero-content-left {
        margin-top: -10vh !important; /* Estava em 0, agora vai subir bem mais */
    }
}

/* 2. Deixando o subtítulo o mais simples e limpo possível para não causar confusão visual */
.hero-content-left .subtitle {
    font-family: var(--font-body) !important; /* Força a Montserrat limpa */
    font-size: 1.15rem !important;
    font-weight: 300 !important; /* Fina para sumir na leitura */
    color: #8c7b74 !important; /* Um tom mais apagado para dar foco total ao título principal */
    letter-spacing: 0px !important;
    max-width: 80% !important; 
    line-height: 1.5 !important;
}

/* 3. Garantindo que a "Caixinha" do título (o Kicker Protocolo) fique perfeita no modelo da referência */
.hero-content-left .section-kicker {
    background-color: var(--accent-gold) !important; /* Coral vibrante */
    color: #ffffff !important;
    font-size: 1rem !important;
    padding: 6px 15px !important;
    border-radius: 4px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important; /* Em caixa alta, igual na referência */
    font-style: normal !important;
    font-family: var(--font-body) !important;
    box-shadow: 0 5px 15px rgba(235, 102, 90, 0.3) !important;
}

/* =========================================================================
   UX/UI PRO MAX: CORREÇÃO DOS RECORTES DAS IMAGENS (FADE NAS BORDAS)
========================================================================= */

/* 1. Imagem da Seção "A Médica": Esfumando a base e o canto esquerdo do braço */
.authority-img {
    /* Máscara combinada: Esfuma a esquerda (braço/mesa) E a base (corte inferior) */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 100%), linear-gradient(to top, transparent 0%, black 15%, black 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 100%), linear-gradient(to top, transparent 0%, black 15%, black 100%) !important;
    mask-composite: intersect !important;
}

/* 2. Imagem da Seção Final (CTA "Não espere mais"): Esfumando a base dura */
.cta-doctor-cutout {
    /* Máscara linear simples: Esfuma apenas a base para sumir no fundo */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 100%) !important;
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 100%) !important;
    
    /* Garantindo que não tenha bordas brancas ou sombras de blocos antigos */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* =========================================================================
   UX/UI PRO MAX: FUNDO NO TÍTULO E SUBTÍTULO ESTICADO
========================================================================= */

/* 1. Criando o Fundo no Título Principal (Efeito de Bloco/Highlight) */
.hero-content-left .main-title {
    background: linear-gradient(135deg, rgba(252,247,246,0.8) 0%, rgba(245,236,233,0.4) 100%) !important;
    padding: 20px 40px 20px 30px !important;
    border-radius: 12px !important;
    display: inline-block !important; /* Faz o fundo abraçar o tamanho exato do texto */
    box-shadow: 0 15px 35px rgba(122, 92, 83, 0.08) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-left: 4px solid var(--accent-gold) !important; /* Um detalhe coral luxuoso na borda esquerda */
    margin-left: -30px !important; /* Compensa o padding para não sair do alinhamento */
}

/* 2. Engrossando e esticando o Subtítulo para a direita */
.hero-content-left .subtitle {
    font-weight: 500 !important; /* Letras mais grossas e fortes */
    color: var(--brand-dark) !important; /* Cor mais forte para voltar a leitura perfeita */
    max-width: 95% !important; /* A linha agora corre quase até o final da tela da direita */
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
}

/* =========================================================================
   UX/UI PRO MAX: O BLOCO DO TÍTULO IDÊNTICO À REFERÊNCIA
========================================================================= */

/* Destruindo a caixa translúcida que eu tinha feito antes */
.hero-content-left .main-title {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-left: 0 !important;
    line-height: 1 !important; /* Tira o espaço entre a linha de cima e de baixo */
    display: block !important;
}

/* Bloco 1 (Pequeno): "Protocolo" */
.title-kicker-bg {
    background-color: #9e6f66 !important; /* Cor exata da imagem (Marrom rosado) */
    color: #ffffff !important;
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    padding: 8px 25px !important;
    display: inline-block !important;
    font-style: italic !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important; /* Gruda perfeitamente no bloco de baixo */
}

/* Bloco 2 (Gigante): "Dermatologia Integrativa" */
.title-main-bg {
    background-color: #9e6f66 !important; /* Mesma cor, criando aquele formato em L */
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 5rem) !important;
    padding: 10px 25px !important;
    display: inline-block !important;
    font-style: italic !important;
    font-weight: 500 !important;
    margin-top: -5px !important; /* Tira qualquer micro-fenda entre os blocos */
}

/* Descendo a Logo como você pediu */
.hero-logo {
    margin-top: 50px !important; /* Empurra a logo mais para baixo */
}

/* Subtítulo mais distante para a página respirar */
.hero-content-left .subtitle {
    margin-top: 2rem !important; 
}

/* =========================================================================
   UX/UI PRO MAX: REFINAMENTOS DE TAMANHO (HERO IMAGEM E TEXTO)
========================================================================= */

/* 1. Forçando o "Dermatologia Integrativa" a ficar em uma única linha (sem quebra) */
.title-main-bg {
    white-space: nowrap !important; /* Proíbe o texto de pular para a linha de baixo */
    font-size: clamp(1.8rem, 3.5vw, 4.2rem) !important; /* Ajustando levemente o tamanho para caber tudo numa linha só na tela */
}

/* 2. Aumentando levemente a imagem da Dra. na Hero */
.hero-content-right {
    transform: scale(1.15) !important; /* Cresce a foto em 15% */
    transform-origin: bottom center !important; /* Garante que ela cresça pra cima, sem flutuar ou descolar do rodapé */
}

/* Reduzindo o tamanho da fonte do bloco pequeno ("Protocolo") para equilibrar com a nova linha */
.title-kicker-bg {
    font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
}

/* =========================================================================
   UX/UI PRO MAX: REFINAMENTO MILIMÉTRICO (LOGO E BOTÃO)
========================================================================= */

/* 1. Colando a Logo mais perto do Título "Protocolo" */
.hero-logo {
    margin-bottom: 0.5rem !important; /* Estava 1rem ou mais, agora fica bem rente ao bloco */
}

/* 2. Diminuindo os espaços em branco para sugar o botão mais para cima */
.title-main-bg {
    margin-bottom: 0 !important; /* Tira espaço sob o "Dermatologia Integrativa" */
}

.hero-content-left .subtitle {
    margin-top: 1rem !important; /* Puxa o subtítulo para mais perto do título */
    margin-bottom: 1.5rem !important; /* Puxa o botão para mais perto do subtítulo */
}

/* 3. Um empurrãozinho extra no botão para cima */
.hero-content-left .pulse-button {
    margin-top: -0.5rem !important; 
}

/* =========================================================================
   UX/UI PRO MAX: BLOCOS DO TÍTULO 100% GRUDADOS (FLEXBOX ZERO GAP)
========================================================================= */

/* Ocultando a quebra de linha do HTML que estava gerando um buraco no meio! */
.hero-content-left .main-title br {
    display: none !important;
}

/* Forçando o título a ser um Flexbox para os blocos se encostarem no nível do pixel */
.hero-content-left .main-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Impede que os fundos vazem para o lado */
    gap: 0 !important; /* ZERA DE VEZ o buraco entre os dois */
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustando as caixas para virarem tijolos perfeitos sem vãos */
.title-kicker-bg {
    margin: 0 !important;
    padding: 12px 25px 8px 25px !important;
    line-height: 1 !important;
}

.title-main-bg {
    margin: 0 !important;
    padding: 8px 25px 12px 25px !important;
    line-height: 1 !important;
}

/* =========================================================================
   UX/UI PRO MAX: SUBINDO TODO O BLOCO DA HERO
========================================================================= */

/* Puxando todo o conteúdo (Logo, Título, Texto e Botão) mais para cima no PC */
@media (min-width: 992px) {
    .hero-content-left {
        margin-top: -16vh !important; /* Estava -10vh, agora sobe mais */
    }
}

/* =========================================================================
   UX/UI PRO MAX: LUZ DIVINA NOS PROTOCOLOS
========================================================================= */

.treatments-section {
    position: relative !important;
    z-index: 1 !important; 
}

/* Criando uma Luz/Fundo espetacular apenas para esta seção */
.treatments-section::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important; 
    height: 120% !important; 
    
    /* O "Foco de Luz": Um brilho Coral/Pêssego radiante no centro da seção */
    background: radial-gradient(ellipse at center, rgba(235, 102, 90, 0.06) 0%, rgba(245, 236, 233, 0.1) 40%, transparent 70%) !important;
    
    filter: blur(40px) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Colocando uma aura de brilho nas palavras "Nossos Protocolos" */
.treatments-header h2 {
    font-size: clamp(2.5rem, 4vw, 4rem) !important;
    text-shadow: 0 10px 30px rgba(235, 102, 90, 0.2) !important; 
}

/* Transformando os cartões de tratamento em vidro para a luz do fundo atravessar */
.treatment-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================================
   UX/UI PRO MAX: REDUZINDO O TAMANHO DA CAIXA DO TÍTULO NA HERO
========================================================================= */

/* "Secando" o bloco de cima (Protocolo), tirando a gordura ao redor da letra */
.title-kicker-bg {
    padding: 6px 15px 2px 15px !important; 
}

/* "Secando" o bloco de baixo (Dermatologia Integrativa) para abraçar o texto bem justo */
.title-main-bg {
    padding: 2px 15px 8px 15px !important; 
}


/* =========================================================================
   UX/UI PRO MAX: O CONTRASTE ABSURDO (TIPOGRAFIA)
========================================================================= */

/* Engrossando a fonte Bodoni (Títulos) para ela ficar muito nítida e editorial */
h1, h2, h3, h4, h5, h6, .vogue-title, .harmonious-title, .main-title, .manifesto-title {
    font-weight: 700 !important; 
}

.italic-serif {
    font-weight: 600 !important;
}

/* Textos comuns (Subtítulos, parágrafos) mais escuros e fortes contra o fundo claro */
body, p, .subtitle, .manifesto-text p, .card-content p, .faq-answer p {
    color: #5c453d !important; 
    font-weight: 500 !important;
}

/* Secando um pouco a caixa do título no mobile para ficar delicada */
@media (max-width: 991px) {
    .title-kicker-bg {
        padding: 4px 15px 1px 15px !important;
    }
    .title-main-bg {
        padding: 1px 15px 6px 15px !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - PASSO 1 (DESCER A LOGO NO MOBILE)
========================================================================= */

@media (max-width: 991px) {
    /* Pegando qualquer logo que apareça na Hero no celular e empurrando para baixo */
    .hero-logo {
        margin-top: 50px !important; 
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - DESCER MAIS A LOGO
========================================================================= */

@media (max-width: 991px) {
    /* Empurrando a logo MUITO mais para baixo para garantir */
    .hero-logo {
        margin-top: 100px !important; 
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - DESCER BEM MAIS E DIMINUIR A LOGO
========================================================================= */

@media (max-width: 991px) {
    .hero-logo {
        margin-top: 180px !important; /* Descendo bem mais */
        width: 120px !important; /* Diminuindo um pouquinho o tamanho */
        height: auto !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - MEDIDAS EXATAS DA LOGO
========================================================================= */

@media (max-width: 991px) {
    .hero-logo {
        margin-top: 200px !important; 
        width: 140px !important; 
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - DESCER TÍTULO E CORTAR O BURACO
========================================================================= */

@media (max-width: 991px) {
    /* Passo 2: Descendo o Título Principal */
    .hero-content-left .main-title {
        margin-top: 60px !important; 
    }

    /* Passo 3: Removendo o "Buraco" Giganetoso (180px) entre as seções */
    .arch-manifesto-section {
        padding-top: 50px !important; /* Corta drasticamente o espaço vazio em cima da Seção 2 */
    }

    /* Ajuste da altura da Seção 1 */
    .hero-section {
        padding-bottom: 20px !important; /* Tira gordura debaixo da Seção 1 também */
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - DESCER TUDO E AUMENTAR SEÇÃO
========================================================================= */

@media (max-width: 991px) {
    /* Empurrando o bloco do título "bem mais" para baixo (o que empurra o sub e o botão também) */
    .hero-content-left .main-title {
        margin-top: 180px !important; 
    }

    /* Aumentando a altura da primeira seção para abraçar o botão sem cortar */
    .hero-section {
        padding-bottom: 150px !important; /* Um "chão" gigante para o botão */
        overflow: visible !important; /* Impede completamente de cortar o que chega no final */
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - DESCORTANDO TUDO
========================================================================= */

@media (max-width: 991px) {
    /* A tesoura que cortou foi o "overflow". Matando ele em todos os níveis. */
    .hero-section, .hero-split, .hero-content-left {
        overflow: visible !important; 
        height: auto !important;
        max-height: none !important;
    }

    /* Jogando a Seção inteira da Hero para a frente, para NENHUMA outra seção cobrir ela */
    .hero-section {
        z-index: 50 !important;
        position: relative !important;
    }

    /* Jogando a Seção 2 (O Manifesto) para trás, assim ela não "engole" o seu botão */
    .arch-manifesto-section {
        z-index: 1 !important;
        position: relative !important;
        margin-top: 0 !important;
    }

    /* Dando um espaço extra direto na caixa onde fica o botão */
    .hero-content-left {
        padding-bottom: 80px !important; 
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - DIMINUIR TEXTOS NA HERO
========================================================================= */

@media (max-width: 991px) {
    /* Diminuindo a caixa menor "Protocolo" */
    .title-kicker-bg {
        font-size: 1.1rem !important;
        padding: 3px 12px 1px 12px !important; /* Diminuindo as "paredes" junto com a letra */
    }

    /* Diminuindo a caixa gigante "Dermatologia Integrativa" */
    .title-main-bg {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        padding: 1px 12px 5px 12px !important;
    }

    /* Diminuindo o subtítulo */
    .hero-content-left .subtitle {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 25px !important; /* Aproximando ele um pouco mais do botão e título pra não ficar voando */
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - REDUZIR ESPAÇO ABAIXO DO BOTÃO
========================================================================= */

@media (max-width: 991px) {
    /* Reduzindo consideravelmente o fundo falso da Hero para a Seção 2 subir mais */
    .hero-section {
        padding-bottom: 60px !important; /* Caiu de 150px para 60px */
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - SEÇÃO 2 (CONTRASTE E FADE)
========================================================================= */

@media (max-width: 991px) {
    /* 1. Deixando a imagem dela muito mais transparente no fundo (Fade elegante) */
    .arch-manifesto-section .arch-img, .arch-manifesto-section .arch-image-wrapper {
        opacity: 0.25 !important; 
    }

    /* 2. Criando um fundo lindo e chique para os textos (Vinho/Marrom Escuro) */
    .glass-manifesto {
        background: linear-gradient(135deg, #7a5c53 0%, #5c453d 100%) !important;
        border-radius: 20px !important;
        padding: 45px 25px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    }

    /* 3. Invertendo as cores para criar um "Contraste Absurdo" (Texto Branco) */
    .glass-manifesto .manifesto-title,
    .glass-manifesto .manifesto-text p,
    .glass-manifesto .manifesto-signature strong {
        color: #ffffff !important;
    }

    .glass-manifesto .manifesto-signature span {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .glass-manifesto .box-highlight {
        background-color: rgba(255,255,255,0.15) !important;
        border-color: rgba(255,255,255,0.3) !important;
    }

    /* 4. Aumentando "a linha" (Tamanho da letra e espaçamento para leitura luxuosa) */
    .glass-manifesto .manifesto-text p {
        line-height: 1.85 !important; 
        font-size: 1.15rem !important; 
        margin-bottom: 25px !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: COMANDOS ISOLADOS - REVERTENDO SEÇÃO 2 E LUZ DA SEÇÃO 3
========================================================================= */

@media (max-width: 991px) {
    /* --- CORRIGINDO A SEÇÃO 2 --- */
    
    /* Devolvendo a imagem que parecia ter sumido (Opacidade de 85% para ficar leve, não invisível) */
    .arch-manifesto-section .arch-img, .arch-manifesto-section .arch-image-wrapper {
        opacity: 0.85 !important; 
    }

    /* Tirando a caixa escura e gigante, voltando ao "Vidro" claro e enxuto */
    .glass-manifesto {
        background: rgba(255, 255, 255, 0.85) !important;
        padding: 25px 20px !important; /* Menos padding para não ficar gigante */
        border-radius: 15px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
        border: none !important;
    }

    /* Voltando com a cor do texto nítida contra o fundo claro */
    .glass-manifesto .manifesto-title,
    .glass-manifesto .manifesto-text p,
    .glass-manifesto .manifesto-signature strong {
        color: #5c453d !important;
    }

    .glass-manifesto .manifesto-signature span {
        color: #8c7b74 !important;
    }

    /* Diminuindo a altura da linha para a caixa não ficar "super alta" */
    .glass-manifesto .manifesto-text p {
        line-height: 1.6 !important; 
        font-size: 1rem !important; 
        margin-bottom: 15px !important;
    }
}

/* =========================================================================
   TRANSIÇÃO SUAVE E EFEITO DE LUZ (SEÇÃO 3) IGUAL AO SEU PRINT
========================================================================= */

/* Transição do fundo da Seção 2 para a cor rosé/pêssego da Seção 3 */
.arch-manifesto-section {
    background: linear-gradient(to bottom, #fcfaf8 0%, #f7ebe6 100%) !important;
}

/* Fundo base da Seção 3 (Rosé/Pêssego sofisticado) */
.treatments-section {
    background-color: #f7ebe6 !important; 
    position: relative !important;
    z-index: 1 !important;
}

/* O FOCO DE LUZ (Efeito Glowing esfumaçado atrás do texto) */
.treatments-section::before {
    content: '' !important;
    position: absolute !important;
    top: 15% !important; /* Centralizado atrás dos primeiros textos */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80vw !important;
    height: 40vw !important;
    min-width: 400px !important;
    min-height: 400px !important;
    /* Degradê radial que começa muito branco no centro e dissolve no pêssego */
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.3) 40%, transparent 70%) !important;
    z-index: -1 !important; /* Força a ficar no fundo, como uma aura */
    pointer-events: none !important;
}

/* Garantindo que o texto da Seção 3 fique legível contra a luz */
.treatments-header {
    position: relative !important;
    z-index: 5 !important;
}


/* =========================================================================
   UX/UI PRO MAX: RESTAURAÇÃO DE FUNDOS, TIPOGRAFIA E TRANSIÇÕES
========================================================================= */

/* 1. DEVOLVENDO OS FUNDOS DAS SEÇÕES (O Diferencial e Onde Fica) */
/* Eu tinha deixado eles transparentes por engano em um comando global antigo */

.methodology-bars-section {
    background-color: #fdfbf9 !important;
    background-image: 
        radial-gradient(circle at -10% -10%, rgba(212, 175, 55, 0.20) 0%, transparent 50%),
        radial-gradient(circle at 110% 110%, rgba(168, 140, 119, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 100%) !important;
}

.location-section, .location-section.split-layout {
    background-color: #f5ece9 !important; /* brand-beige */
}

@media (max-width: 991px) {
    .location-section.split-layout {
        background-color: #fdfbf9 !important;
        background-image: 
            radial-gradient(circle at 80% 0%, rgba(212, 175, 55, 0.20) 0%, transparent 50%),
            radial-gradient(circle at 20% 100%, rgba(168, 140, 119, 0.20) 0%, transparent 50%) !important;
    }
    
    /* 2. DEVOLVENDO A FINURA AO TÍTULO O DIFERENCIAL */
    /* Ele tinha ficado muito grosso por causa do meu comando global de negrito */
    .meth-bars-header h2 {
        font-weight: 300 !important; 
        letter-spacing: 2px !important;
        color: #5c453d !important;
    }
}

/* 3. MELHORANDO AS TRANSIÇÕES GLOBAIS E EFEITOS */
/* Adicionando sombras esfumaçadas e linhas de luz sutis entre as seções */

.treatments-section {
    box-shadow: 0 -20px 50px rgba(122, 92, 83, 0.05) !important;
}

.pain-section-vogue {
    background: linear-gradient(to bottom, #fdfbf9 0%, #f4eae4 100%) !important;
}

.authority-section {
    box-shadow: 0 -30px 60px rgba(0,0,0,0.04) !important;
    border-top: 1px solid rgba(255,255,255,0.6) !important;
}

.methodology-bars-section {
    box-shadow: 0 -20px 50px rgba(122, 92, 83, 0.05) !important;
}

/* =========================================================================
   UX/UI PRO MAX: SALVANDO AS FITAS E APERFEIÇOANDO TRANSIÇÕES
========================================================================= */

@media (max-width: 991px) {
    /* 1. SALVANDO AS FITAS DO DIFERENCIAL (Voltando pro tamanho MÍNIMO) */
    /* Elas ficaram gigantes porque o código global de "textos" engoliu elas. */
    .meth-bar p, .meth-bar {
        font-size: 0.65rem !important; /* Tamanho fininho da foto */
        line-height: 1.25 !important;
        margin: 0 !important;
    }
    
    .meth-bar {
        padding: 12px 15px 12px 48% !important; /* Apertando a fita de volta pro formato delicado */
        margin-bottom: 8px !important;
    }
}

/* 2. EFEITOS DE TRANSIÇÃO AINDA MAIS BONITOS ENTRE AS SEÇÕES */
/* Criando um "efeito de luz e nuvem" sutil na divisa de todas as seções */

.treatments-section::before, 
.pain-section-vogue::before, 
.authority-section::before, 
.methodology-bars-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Deixando a divisória da seção 2 para a 3 perfeitamente derretida */
.arch-manifesto-section {
    position: relative !important;
}
.arch-manifesto-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: -50px !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, transparent 70%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* =========================================================================
   UX/UI PRO MAX: SALVANDO A SEÇÃO "ONDE FICA"
========================================================================= */

@media (max-width: 991px) {
    /* 1. Título "A Clínica": Devolvendo o traço fino e elegante (tinha ficado muito grosso) */
    .location-content h2 {
        font-weight: 300 !important;
        font-size: 2rem !important;
        margin-bottom: 15px !important;
        letter-spacing: 1px !important;
    }

    /* 2. Textos do Endereço: Encolhendo para o tamanho delicado original */
    /* O código global tinha deixado as letras enormes com muito espaçamento */
    .location-content p {
        font-size: 0.9rem !important; 
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    /* 3. Desinchando a caixa de vidro em si (menos padding pra ficar elegante) */
    .location-section.split-layout .location-content {
        padding: 35px 20px !important;
        margin: -60px auto 0 !important; /* Puxa a caixa pra sobrepor levemente a foto */
    }
}

/* 4. Adicionando o efeito de Nuvem de Luz também no topo dessa seção */
.location-section {
    position: relative !important;
    box-shadow: 0 -20px 50px rgba(122, 92, 83, 0.05) !important;
}

.location-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* =========================================================================
   UX/UI PRO MAX: REVOLUÇÃO NO RODAPÉ (FOOTER PREMIUM)
========================================================================= */

.footer-premium {
    background-color: #3b2a25 !important; /* Marrom ultra escuro chique, não o verde esquisito */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
    padding-top: 60px !important;
}

/* Protegendo os textos do Rodapé das cores globais (Forçando branco elegante) */
.footer-premium h4,
.footer-premium p,
.footer-premium a,
.footer-bottom-premium p {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 300 !important;
    text-decoration: none !important;
}

.footer-premium h4 {
    color: #e6d3cc !important; /* Título mais claro, puxado pro pêssego pálido */
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
}

.footer-premium a:hover {
    color: #ffffff !important;
}

/* O Botão do Footer - Removendo o brilho exagerado barato */
.footer-btn {
    background-color: #d16b5a !important; /* Coral elegante */
    color: #ffffff !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    padding: 15px 35px !important;
    box-shadow: none !important; /* Sem "auras" vermelhas espalhadas */
    display: inline-block !important;
    margin-top: 25px !important;
    border: none !important;
}

.footer-btn:hover {
    background-color: #b85b4b !important;
}

/* Estrutura Mobile do Rodapé - Alinhamento Perfeito */
@media (max-width: 991px) {
    .footer-premium-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 20px 40px 20px !important;
        gap: 50px !important;
    }

    .footer-col {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Limpando os "pontos" da lista de links */
    .footer-premium ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-premium li {
        margin-bottom: 15px !important;
    }

    /* Ajuste fino dos contatos */
    .contact-col p {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.6 !important;
    }
    
    .contact-col p svg {
        margin-bottom: 5px !important;
        margin-right: 0 !important;
    }

    /* O copyright no fundo */
    .footer-bottom-premium {
        text-align: center !important;
        padding: 25px !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
        background-color: #31231f !important; /* Um tom levemente mais escuro para fechar o site */
    }
    .footer-bottom-premium p {
        font-size: 0.75rem !important;
    }
}

/* =========================================================================
   UX/UI PRO MAX: ONDAS ORGÂNICAS E TÍTULO MAIOR
========================================================================= */

@media (max-width: 991px) {
    /* 1. Aumentando brutalmente o título de "O Diferencial" como pedido */
    .meth-bars-header h2 {
        font-size: 2.8rem !important; /* Estava 1.6/2.0, agora está gigante e imponente */
        font-weight: 300 !important;
        margin-bottom: 35px !important;
    }
    
    /* Afastando um pouco o título das fitas pra não sufocar */
    .meth-bars-container {
        margin-top: 20px !important;
    }
}

/* 2. ONDAS DE TRANSIÇÃO (SVG WAVES IGUAL AO SEU PRINT) */
/* Isso vai criar aquela curvinha orgânica entre as seções que você mostrou */

/* Onda no topo dos Tratamentos (cor: #f7ebe6) */
.treatments-section {
    position: relative !important;
    margin-top: 50px !important; /* Espaço pra onda subir */
}
.treatments-section::after {
    content: '' !important;
    position: absolute !important;
    top: -49px !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23f7ebe6' fill-opacity='1' d='M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Onda no topo de O Diferencial (cor: #fdfbf9) */
.methodology-bars-section {
    position: relative !important;
    margin-top: 50px !important;
}
.methodology-bars-section::after {
    content: '' !important;
    position: absolute !important;
    top: -49px !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23fdfbf9' fill-opacity='1' d='M0,192L48,176C96,160,192,128,288,133.3C384,139,480,181,576,197.3C672,213,768,203,864,181.3C960,160,1056,128,1152,122.7C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Onda no topo da Localização */
    .location-section {
        position: relative !important;
        margin-top: 50px !important;
    }
    .location-section::after {
        content: '' !important;
        position: absolute !important;
        top: -49px !important;
        left: 0 !important;
        width: 100% !important;
        height: 50px !important;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23fdfbf9' fill-opacity='1' d='M0,96L60,117.3C120,139,240,181,360,170.7C480,160,600,96,720,85.3C840,75,960,117,1080,144C1200,171,1320,181,1380,186.7L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

/* =========================================================================
   UX/UI PRO MAX: LIMPANDO O CORTE DA ONDA
========================================================================= */

/* O corte reto era causado pelo "efeito de luz" em degradê que eu coloquei antes.
   Como a luz era reta e a onda é curva, elas batiam de frente e cortavam. */

    /* Desligando o brilho reto que causava o "corte" no topo das seções */
    .treatments-section::before, 
    .methodology-bars-section::before,
    .location-section::before,
    .pain-section-vogue::before,
    .authority-section::before {
        display: none !important;
        background: transparent !important;
    }

    /* Desligando a elipse reta da seção do manifesto */
    .arch-manifesto-section::after {
        display: none !important;
    }

    /* Colocando a curva da onda acima de qualquer outra camada do site para ser absoluta */
    .treatments-section::after,
    .methodology-bars-section::after,
    .location-section::after {
        z-index: 50 !important; 
    }