/* Fonte local (Inter variável, subset latin) - evita render-blocking do Google Fonts */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #011640;
    --secondary: #0a2f6e;
    --accent: #1e5aa8;
    --gold: #d4af37;
    --text: #2c3e50;
    /* #6c757d dava 4,44:1 sobre --bg-light e reprovava no WCAG AA.
       Este tom dá 5,21:1 sobre --bg-light e 5,47:1 sobre branco. */
    --text-light: #626a72;
    --bg-light: #f8f9fa;
    --white: #ffffff;
}

html {
    scroll-behavior: smooth;
    /* Sem isto, o modo escuro automatico do Chrome escurece o fundo da pagina
       e mantem a cor dos textos, deixando titulo escuro sobre fundo escuro. */
    color-scheme: light;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--white);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.container-narrow {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
header {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 45px;
    width: auto;
}

.whatsapp-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #1ea952;
    color: #041243;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.whatsapp-btn:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

/* Faixa WhatsApp - escondida no desktop */
.whatsapp-bar {
    display: none;
}

header nav ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

header nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 300;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s;
}

header nav a:hover {
    color: var(--primary);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
}

/* Hero */
.hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero .container {
    padding: 0 1.5rem;
}

.hero-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--gold);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Segunda linha do H1: mantém o visual do antigo subtítulo sem quebrar a hierarquia */
.hero-title-sub {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.hero-crm {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image-container {
    position: relative;
}

.hero-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.hero-badge-rating {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: var(--white);
    padding: 0.7rem 1rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    text-align: center;
}

.rating-stars {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.rating-text {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: var(--gold);
    color: var(--primary);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--white);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--white);
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--primary);
}

/* Sections */
.section {
    padding: 5rem 0;
}

.section-alt {
    background: var(--bg-light);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #5a5a5a;
    margin-bottom: 3rem;
}



.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Credentials Section */
.credentials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

.credentials-section {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(1, 22, 64, 0.08);
    border-top: 4px solid var(--primary);
    transition: all 0.3s;
}

.credentials-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(1, 22, 64, 0.12);
}

.credentials-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--bg-light);
}

.credentials-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
}

.credentials-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.credentials-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.credential-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.credential-year {
    background: var(--gold);
    color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.credential-info strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.credential-info p {
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

.credential-item-simple {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.check-icon {
    width: 28px;
    height: 28px;
    background: var(--gold);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.credential-item-simple p {
    color: var(--text);
    line-height: 1.7;
    margin: 0;
    padding-top: 0.2rem;
}

/* Cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

.card {
    background: var(--white);
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(1, 22, 64, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(1, 22, 64, 0.15);
}

.card-icon {
    width: 100%;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.card-icon svg {
    width: 40px;
    height: 40px;
    color: var(--white);
}

.card-content {
    padding: 2rem 2.5rem 2.5rem;
}

.card h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.card p {
    line-height: 1.8;
    color: var(--text);
    font-size: 1.05rem;
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.testimonial {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-left: 4px solid var(--gold);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
}

.testimonial h3 {
    color: var(--primary);
    margin-bottom: 0.2rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.testimonial h4 {
    color: var(--primary);
    margin-bottom: 0.2rem;
    font-size: 1.05rem;
}

.testimonial-date {
    font-size: 0.85rem;
    color: var(--text-light);
    display: block;
    margin-top: 0.2rem;
}

.stars {
    color: var(--gold);
    font-size: 1rem;
}

.testimonial p {
    font-style: italic;
    line-height: 1.7;
}

.google-rating {
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--white);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.testimonials-cta {
    text-align: center;
    margin: 3rem 0;
}

.google-rating h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.rating-large {
    font-size: 3rem;
    color: var(--gold);
    margin: 1rem 0;
}

.rating-note {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 1rem;
}

/* FAQ */
.faq-list {
    max-width: 100%;
}

.faq-item {
    background: var(--white);
    margin-bottom: 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem 2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--primary);
    transition: background 0.3s;
}

.faq-question:hover {
    background: rgba(1, 22, 64, 0.02);
}

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

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    padding: 0 2rem;
}

.faq-answer.active {
    max-height: 500px;
    padding: 0 2rem 1.5rem;
}

.faq-answer p {
    line-height: 1.8;
}

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.contact-card {
    background: var(--white);
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(1, 22, 64, 0.08);
    overflow: hidden;
    transition: all 0.4s ease;
    border: 2px solid transparent;
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(1, 22, 64, 0.15);
    border-color: var(--gold);
}

.contact-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

.contact-header h3 {
    color: var(--white);
    font-size: 1.8rem;
    margin: 0;
    font-weight: 700;
}

.contact-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.info-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.info-item strong {
    color: var(--primary);
    font-size: 1.05rem;
    display: block;
}

.info-item span {
    color: var(--text);
    line-height: 1.6;
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: #1ea952;
    color: #041243;
    padding: 1.2rem 2rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    margin: 0 2rem 2rem;
    border-radius: 12px;
}

.contact-btn svg {
    width: 24px;
    height: 24px;
}

.contact-btn:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* Footer */
footer {
    background: var(--primary);
    color: var(--white);
    padding: 4rem 2rem 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    color: var(--white);
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
    transition: all 0.3s;
}

.footer-section a:hover {
    color: var(--gold);
    text-decoration-color: var(--gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.95);
    font-weight: 400;
}

.footer-bottom p {
    margin: 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 400 !important;
}

.footer-credits {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.footer-credits span {
    opacity: 0.95;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.95);
}

.footer-dev {
    margin-top: 0.8rem;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.85;
    color: rgba(255,255,255,0.85);
}

.footer-dev a {
    color: rgba(255,255,255,0.95);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
    transition: all 0.3s;
    font-weight: 400;
}

.footer-dev a:hover {
    color: var(--gold);
    text-decoration-color: var(--gold);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--gold);
    transform: translateY(-3px);
}



/* Steps Section */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
}

.step-item {
    background: var(--white);
    padding: 2.5rem 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(1, 22, 64, 0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(1, 22, 64, 0.12);
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--gold);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step-item h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.step-item p {
    color: var(--text);
    line-height: 1.7;
    font-size: 0.95rem;
}

.step-arrow {
    font-size: 2rem;
    color: var(--gold);
    font-weight: 700;
}

/* Insurance Section */
.insurance-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.insurance-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(1, 22, 64, 0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.insurance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(1, 22, 64, 0.12);
}

.insurance-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--white);
}

.insurance-icon svg {
    width: 35px;
    height: 35px;
}

.insurance-card h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.insurance-card p {
    color: var(--text);
    line-height: 1.8;
}

.insurance-note {
    background: var(--light-bg);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    margin-top: 2.5rem;
    border-left: 4px solid var(--gold);
}

.insurance-note p {
    color: var(--text);
    line-height: 1.7;
    margin: 0;
}

.insurance-note strong {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    header nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 1.5rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        gap: 1rem;
    }
    
    header nav ul.active {
        display: flex;
    }
    
    .hero {
        padding: 3rem 0 2rem !important;
    }
    
    .hero .container {
        padding: 0 1rem !important;
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-right {
        order: -1;
    }
    
    .hero-image-container {
        margin: 0;
    }
    
    .hero-image-container img {
        border-radius: 15px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle,
    .hero-title-sub {
        font-size: 1.5rem;
    }
    
    .hero-badge-rating {
        bottom: 10px;
        left: 10px;
        padding: 0.5rem 0.8rem;
    }
    
    .rating-stars {
        font-size: 0.9rem;
    }
    
    .rating-text {
        font-size: 0.75rem;
    }
    
    .credentials-grid {
        grid-template-columns: 1fr;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .cards-grid[style*="repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-btn {
        font-size: 0.95rem;
        padding: 1rem 1.5rem;
    }
    
    .footer-credits {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .footer-credits span:nth-child(2) {
        display: none;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
        font-weight: 400 !important;
        line-height: 1.5;
    }
    
    .footer-credits {
        font-size: 0.8rem;
    }
    
    .footer-credits span {
        font-weight: 400 !important;
        opacity: 0.95;
    }
    
    .footer-dev {
        font-size: 0.7rem;
        opacity: 0.85;
        margin-top: 0.5rem;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .step-arrow {
        display: none;
    }
    

    
    .insurance-info {
        grid-template-columns: 1fr;
    }
}

/* Header preso ao topo apenas no mobile.
   Era position: fixed sem nenhum padding-top compensatório no body, então
   os primeiros 66px de toda página ficavam escondidos por baixo dele.
   Sticky resolve sem número mágico: continua no fluxo e ainda gruda. */
@media (max-width: 768px) {
    header {
        position: sticky !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    .header-container {
        padding: 0.8rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.8rem;
    }
    
    /* Logo à esquerda */
    .logo {
        order: 1;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    
    .logo img {
        height: 28px;
    }
    
    /* Botão WhatsApp ao lado da logo */
    .whatsapp-btn {
        display: flex !important;
        order: 2;
        padding: 0.5rem 1rem;
        font-size: 0.7rem;
        gap: 0.4rem;
        flex-shrink: 0;
    }
    
    .whatsapp-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Nav escondido por padrão */
    nav {
        order: 4;
    }
    
    /* Menu hambúrguer à direita */
    .menu-toggle {
        order: 3;
        margin-left: auto;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Esconde a faixa WhatsApp no mobile */
    .whatsapp-bar {
        display: none !important;
    }
    
    /* Hero começa logo após o header */
    .hero {
        margin-top: 55px;
    }
}

/* About Doctor Section */
.about-doctor-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}

.about-doctor-image {
    position: relative;
}

.image-background {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 20px;
    opacity: 0.1;
    z-index: 0;
}

.about-doctor-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(1, 22, 64, 0.15);
    position: relative;
    z-index: 1;
}

.about-doctor-content {
    background: linear-gradient(135deg, rgba(1, 22, 64, 0.03), rgba(30, 90, 168, 0.03));
    padding: 3rem;
    border-radius: 20px;
    border-left: 4px solid var(--gold);
}

.about-doctor-content p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.about-doctor-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .about-doctor-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-doctor-content {
        padding: 2rem;
    }
    
    .about-doctor-content p {
        font-size: 1rem;
    }
}

/* Filosofia Grid - Responsivo */
.filosofia-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 992px) {
    .filosofia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .filosofia-grid {
        grid-template-columns: 1fr;
    }
}

/* Hero Centered */
.hero-centered {
    position: relative;
    overflow: hidden;
}

.hero-content-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Hero Animation - Rede de Pontos Conectados */
.hero-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    background-image: 
        /* Linhas horizontais */
        linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.08) 15%, transparent 30%),
        linear-gradient(90deg, transparent 40%, rgba(212, 175, 55, 0.08) 55%, transparent 70%),
        /* Linhas diagonais */
        linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.06) 20%, transparent 40%),
        linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.06) 50%, transparent 70%),
        /* Pontos */
        radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.15) 0%, transparent 3%),
        radial-gradient(circle at 35% 15%, rgba(212, 175, 55, 0.2) 0%, transparent 2%),
        radial-gradient(circle at 55% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 3%),
        radial-gradient(circle at 75% 20%, rgba(212, 175, 55, 0.2) 0%, transparent 2%),
        radial-gradient(circle at 85% 35%, rgba(212, 175, 55, 0.15) 0%, transparent 3%),
        radial-gradient(circle at 20% 60%, rgba(212, 175, 55, 0.2) 0%, transparent 2%),
        radial-gradient(circle at 40% 70%, rgba(212, 175, 55, 0.15) 0%, transparent 3%),
        radial-gradient(circle at 60% 65%, rgba(212, 175, 55, 0.2) 0%, transparent 2%),
        radial-gradient(circle at 80% 75%, rgba(212, 175, 55, 0.15) 0%, transparent 3%),
        radial-gradient(circle at 25% 85%, rgba(212, 175, 55, 0.2) 0%, transparent 2%);
    background-size: 
        200% 2px, 200% 2px,
        200% 200%, 200% 200%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: 
        0% 30%, 0% 70%,
        0% 0%, 0% 0%,
        0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
        0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    animation: networkMove 20s infinite linear;
}

.hero-animation::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        /* Triângulos conectados */
        linear-gradient(to right, transparent 14%, rgba(212, 175, 55, 0.05) 15%, transparent 16%),
        linear-gradient(to right, transparent 34%, rgba(212, 175, 55, 0.05) 35%, transparent 36%),
        linear-gradient(to right, transparent 54%, rgba(212, 175, 55, 0.05) 55%, transparent 56%),
        linear-gradient(to right, transparent 74%, rgba(212, 175, 55, 0.05) 75%, transparent 76%),
        /* Linhas verticais conectando */
        linear-gradient(to bottom, transparent 24%, rgba(212, 175, 55, 0.05) 25%, transparent 26%),
        linear-gradient(to bottom, transparent 59%, rgba(212, 175, 55, 0.05) 60%, transparent 61%);
    background-size: 100% 100%;
    animation: networkPulse 8s infinite ease-in-out;
}

.hero-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        /* Pontos maiores pulsantes */
        radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.25) 0%, transparent 4%),
        radial-gradient(circle at 55% 30%, rgba(212, 175, 55, 0.25) 0%, transparent 4%),
        radial-gradient(circle at 85% 35%, rgba(212, 175, 55, 0.25) 0%, transparent 4%),
        radial-gradient(circle at 40% 70%, rgba(212, 175, 55, 0.25) 0%, transparent 4%),
        radial-gradient(circle at 80% 75%, rgba(212, 175, 55, 0.25) 0%, transparent 4%);
    animation: dotPulse 4s infinite ease-in-out;
}

@keyframes networkMove {
    0% {
        background-position: 
            0% 30%, 0% 70%,
            0% 0%, 0% 0%,
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 
            100% 30%, 100% 70%,
            100% 100%, 100% 100%,
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes networkPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

@media (max-width: 768px) {
    .hero-content-centered {
        padding: 0 1rem;
    }
    
    .hero-content-centered .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero-content-centered .hero-description {
        font-size: 1rem;
    }
}

/* 3D Particles Background Animation - Otimizado */
.hero-dna {
    position: relative;
    overflow: hidden;
}

.dna-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    perspective: 1000px;
    will-change: transform;
    pointer-events: none;
}

.dna-animation::before,
.dna-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Camada 1 - Partículas próximas (maiores) */
.dna-animation::before {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 12px),
        radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.5) 0%, transparent 10px),
        radial-gradient(circle at 55% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 14px),
        radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.5) 0%, transparent 10px),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 12px),
        radial-gradient(circle at 25% 50%, rgba(255, 255, 255, 0.5) 0%, transparent 10px),
        radial-gradient(circle at 45% 55%, rgba(255, 255, 255, 0.7) 0%, transparent 14px),
        radial-gradient(circle at 65% 48%, rgba(255, 255, 255, 0.6) 0%, transparent 12px),
        radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 10px),
        radial-gradient(circle at 20% 75%, rgba(255, 255, 255, 0.6) 0%, transparent 12px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.5) 0%, transparent 10px),
        radial-gradient(circle at 60% 85%, rgba(255, 255, 255, 0.7) 0%, transparent 14px),
        radial-gradient(circle at 85% 78%, rgba(255, 255, 255, 0.6) 0%, transparent 12px);
    background-size: 100% 100%;
    animation: particles3D-near 25s infinite ease-in-out;
    transform-style: preserve-3d;
}

/* Camada 2 - Partículas distantes (menores) */
.dna-animation::after {
    background-image:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 28% 8%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 48% 12%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 68% 15%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 18% 35%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 38% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 58% 38%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 12% 65%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 32% 68%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 52% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 72% 65%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 90% 68%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.3) 0%, transparent 6px),
        radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.25) 0%, transparent 5px),
        radial-gradient(circle at 82% 88%, rgba(255, 255, 255, 0.3) 0%, transparent 6px);
    background-size: 100% 100%;
    animation: particles3D-far 35s infinite ease-in-out;
    transform-style: preserve-3d;
}

@keyframes particles3D-near {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    25% {
        transform: translate3d(20px, -30px, 100px);
        opacity: 0.8;
    }
    50% {
        transform: translate3d(-15px, -50px, 50px);
        opacity: 0.9;
    }
    75% {
        transform: translate3d(25px, -20px, 80px);
        opacity: 0.7;
    }
}

@keyframes particles3D-far {
    0%, 100% {
        transform: translate3d(0, 0, -50px);
        opacity: 0.6;
    }
    33% {
        transform: translate3d(-30px, 40px, -100px);
        opacity: 0.4;
    }
    66% {
        transform: translate3d(20px, 60px, -80px);
        opacity: 0.5;
    }
}

/* Desabilitar animação em dispositivos com preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .dna-animation,
    .dna-animation::before,
    .dna-animation::after {
        animation: none !important;
    }
}

/* Pausar animação quando não está visível */
@media (max-width: 768px) {
    .dna-animation {
        animation-play-state: paused;
    }
}

.hero-dna .container {
    position: relative;
    z-index: 2;
}

/* ============================================
   Acessibilidade
   ============================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--primary);
    color: var(--white);
    padding: 0.8rem 1.2rem;
    z-index: 2000;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
}

a:focus-visible,
button:focus-visible,
.faq-question:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   Links relacionados (linkagem interna)
   ============================================ */
.related-links {
    margin-top: 2.5rem;
    padding: 1.8rem 2rem;
    background: var(--bg-light);
    border-left: 4px solid var(--gold);
    border-radius: 0 12px 12px 0;
}

.section-alt .related-links {
    background: var(--white);
}

.related-links h2,
.related-links h3 {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 0.9rem;
    text-align: left;
}

.related-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
}

.related-links li {
    position: relative;
    padding-left: 1.1rem;
}

.related-links li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

.related-links a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.related-links a:hover {
    border-bottom-color: var(--accent);
}

.inline-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.inline-link:hover {
    color: var(--primary);
}

/* ============================================
   Aviso de cookies (LGPD)

   Nota de rodapé, não faixa. Era uma barra de largura total em
   position: fixed que no mobile virava coluna e ocupava metade da
   tela sobre o hero. Agora é um cartão estreito ancorado no canto,
   que informa sem interromper a leitura.
   ============================================ */
.cookie-banner {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 3000;
    width: min(21rem, calc(100vw - 2.5rem));
    background: var(--white);
    color: var(--text);
    border: 1px solid rgba(1, 22, 64, 0.1);
    border-radius: 4px;
    padding: 1.1rem 1.2rem 1.2rem;
    box-shadow: 0 8px 28px rgba(1, 22, 64, 0.14);
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* O mesmo traço dourado que abre o olho do hero, como assinatura. */
.cookie-text strong {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.cookie-text strong::before {
    content: "";
    display: inline-block;
    width: 1.1rem;
    height: 1px;
    margin-right: 0.5rem;
    vertical-align: 0.25em;
    background: var(--gold);
}

.cookie-text {
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: left;
}

/* Dourado sobre branco dá 1,9:1 e reprova no WCAG. O link usa o
   azul da marca, que dá 15,8:1, e o dourado fica só no traço. */
.cookie-text a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.95rem;
}

.cookie-btn {
    flex: 1;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.cookie-btn-accept {
    background: var(--primary);
    color: var(--white);
}

.cookie-btn-accept:hover {
    background: var(--secondary);
}

.cookie-btn-reject {
    background: transparent;
    color: var(--primary);
    border-color: rgba(1, 22, 64, 0.22);
}

.cookie-btn-reject:hover {
    background: rgba(1, 22, 64, 0.05);
}

.cookie-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    /* Continua cartão, agora encostado nas duas margens. O alvo de
       toque sobe para 48px, mas o texto curto segura a altura total
       em torno de 10rem, contra as antigas ~30rem. */
    .cookie-banner {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }

    .cookie-btn {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition: opacity 0.2s ease;
        transform: none;
    }
}

/* ============================================
   Animação on-scroll
   ============================================ */
/* Só esconde se o JS estiver ativo (a classe .js é setada no <head>).
   Sem JS o conteúdo aparece normalmente, nunca fica invisível. */
.js .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   Páginas legais (política, termos)
   ============================================ */
.legal-content {
    padding: 3rem 0 4rem;
}

.legal-content h2 {
    font-size: 1.5rem;
    color: var(--primary);
    margin: 2.2rem 0 0.9rem;
    text-align: left;
}

.legal-content h3 {
    font-size: 1.15rem;
    color: var(--secondary);
    margin: 1.5rem 0 0.6rem;
}

.legal-content p,
.legal-content li {
    text-align: left;
    margin-bottom: 0.9rem;
    line-height: 1.8;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.4rem;
    margin-bottom: 1.2rem;
}

.legal-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-updated {
    font-size: 0.9rem;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 2rem;
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.legal-content th,
.legal-content td {
    border: 1px solid #e1e5ea;
    padding: 0.7rem 0.9rem;
    text-align: left;
}

.legal-content th {
    background: var(--bg-light);
    color: var(--primary);
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumb {
    background: var(--bg-light);
    padding: 0.9rem 0;
    font-size: 0.88rem;
}

.breadcrumb ol {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.breadcrumb li::after {
    content: "›";
    margin-left: 0.5rem;
    color: var(--text-light);
}

.breadcrumb li:last-child::after {
    content: "";
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
    color: var(--text-light);
}

/* ============================================
   Página 404
   ============================================ */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.error-code {
    font-size: clamp(5rem, 18vw, 10rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.error-page h1 {
    font-size: 1.9rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.error-page > div > p {
    color: var(--text-light);
    max-width: 560px;
    margin: 0 auto 2rem;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Área mínima de toque no mobile */
@media (max-width: 768px) {
    nav a,
    footer a,
    .btn-primary,
    .btn-secondary,
    .contact-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================================
   PÁGINAS DE CONDIÇÃO — layout editorial
   Serifada de display nos títulos, hero dividido, corpo em duas
   colunas com barra lateral fixa. Nada centralizado.
   ============================================================ */

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/newsreader-latin.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201D, U+2026;
}

.artigo {
    --coluna: 68ch;
    --lateral: 20rem;
}

/* ---------- Hero dividido ---------- */
.artigo-hero {
    background:
        radial-gradient(120% 90% at 82% 15%, rgba(212, 175, 55, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, #011640 0%, #0a2f6e 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 4rem;
}

/* granulado sutil: textura sem custo de rede */
.artigo-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.artigo-hero > .container {
    position: relative;
    z-index: 2;
}

.artigo-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.5rem;
    align-items: center;
}

.artigo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.artigo-eyebrow::before {
    content: '';
    width: 2.2rem;
    height: 1px;
    background: var(--gold);
}

.artigo-hero h1 {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-size: clamp(2.3rem, 4.4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--white);
    margin-bottom: 1.1rem;
}

.artigo-hero h1 em {
    font-style: italic;
    color: var(--gold);
}

.artigo-hero-sub {
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.artigo-hero-acoes {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.95rem 1.5rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.btn-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* imagem com moldura dourada deslocada */
.artigo-hero-fig {
    position: relative;
    margin: 0;
}

.artigo-hero-fig::before {
    content: '';
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 4px;
}

.artigo-hero-fig img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

/* Retrato vertical no hero. Sem limite de altura ele empurrava o H1 para
   fora da dobra no celular: 586px de foto antes da primeira palavra. */
/* Retrato vertical no hero. Mesma solução da home: a foto sai do fluxo
   para não impor sua altura à linha do grid, e a coluna acompanha a
   altura do texto ao lado, sem vazio acima do eyebrow. */
.artigo-hero-grid:has(img.retrato) {
    align-items: stretch;
}

.artigo-hero-fig:has(img.retrato) {
    align-self: stretch;
    min-height: 20rem;
}

/* Aninhada no :has() de propósito. Solta, um navegador sem suporte a
   :has() aplicaria o position:absolute sem a altura da figura e a foto
   sumiria. Aninhada, ele ignora as duas e a imagem cai no fluxo normal. */
.artigo-hero-fig:has(img.retrato) img.retrato {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 50% 14%;
}

/* Empilhado: texto em cima, imagem embaixo. A quebra é 860px, a mesma em
   que .artigo-hero-grid vira coluna única, senão o retrato era esticado
   para a largura toda com recorte de 704x416. */
@media (max-width: 860px) {
    .artigo-hero-fig:has(img.retrato) {
        order: 0;
        align-self: auto;
        min-height: 0;
        max-width: 26rem;
        margin-left: auto;
        margin-right: auto;
    }

    .artigo-hero-fig:has(img.retrato) img.retrato {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 600 / 901;
        object-position: 50% 50%;
    }
}

/* ---------- Corpo em duas colunas ---------- */
.artigo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lateral);
    gap: 4rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 2rem 4.5rem;
}

.artigo-conteudo {
    max-width: var(--coluna);
    counter-reset: secao;
}

/* seções numeradas: numeral dourado na margem */
.artigo-conteudo h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 500;
    line-height: 1.22;
    color: var(--primary);
    letter-spacing: -0.01em;
    margin: 3.2rem 0 1.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e6e9ee;
    position: relative;
    text-align: left;
}

.artigo-conteudo h2::before {
    counter-increment: secao;
    content: counter(secao, decimal-leading-zero);
    position: absolute;
    top: 1.55rem;
    left: -3.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
}

.artigo-conteudo h3 {
    font-size: 1.06rem;
    font-weight: 650;
    color: var(--secondary);
    margin: 1.9rem 0 0.6rem;
    letter-spacing: -0.005em;
}

.artigo-conteudo p,
.artigo-conteudo li {
    font-size: 1.02rem;
    line-height: 1.82;
    color: #384656;
    margin-bottom: 1.05rem;
    text-align: left;
}

.artigo-conteudo ul,
.artigo-conteudo ol {
    padding-left: 1.15rem;
    margin-bottom: 1.5rem;
}

.artigo-conteudo li {
    margin-bottom: 0.55rem;
    padding-left: 0.25rem;
}

.artigo-conteudo li::marker {
    color: var(--gold);
}

.artigo-conteudo strong {
    color: var(--primary);
    font-weight: 650;
}

.artigo-conteudo a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(30, 90, 168, 0.4);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.artigo-conteudo a:hover {
    color: var(--primary);
    text-decoration-color: currentColor;
}

/* primeiro parágrafo com peso editorial */
.artigo-lead {
    font-size: 1.16rem;
    line-height: 1.7;
    color: var(--primary);
    font-weight: 450;
    margin-bottom: 2rem;
}

/* ---------- Assinatura de revisão médica ---------- */
.revisao {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid #e6e9ee;
    margin-bottom: 2.2rem;
}

.revisao img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--gold);
}

.revisao-texto {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-light);
}

.revisao-texto strong {
    display: block;
    font-size: 0.94rem;
    color: var(--primary);
    font-weight: 650;
}

/* ---------- Destaque ---------- */
.destaque {
    margin: 2.2rem 0;
    padding: 1.6rem 1.7rem;
    background: #fbfcfd;
    border: 1px solid #e6e9ee;
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
}

.destaque h3 {
    margin-top: 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--primary);
}

.destaque p:last-child,
.destaque ul:last-child {
    margin-bottom: 0;
}

/* ---------- Barra lateral ---------- */
.artigo-lateral {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.card-medico {
    background: var(--primary);
    color: var(--white);
    border-radius: 6px;
    overflow: hidden;
}

.card-medico img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 15%;
}

.card-medico-corpo {
    padding: 1.2rem 1.3rem 1.4rem;
}

.card-medico h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.18rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 0.15rem;
    text-align: left;
}

.card-medico .cargo {
    font-size: 0.82rem;
    color: var(--gold);
    margin-bottom: 0.7rem;
}

.card-medico .crm {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.card-medico .btn-zap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #1ea952;
    color: #04231a;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 650;
    font-size: 0.86rem;
    transition: filter 0.25s ease;
}

.card-medico .btn-zap:hover {
    filter: brightness(1.1);
}

/* índice da página */
.indice {
    border: 1px solid #e6e9ee;
    border-radius: 6px;
    padding: 1.2rem 1.3rem;
}

.indice h2 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 0 0.85rem;
    text-align: left;
}

.indice ol {
    list-style: none;
    counter-reset: idx;
    padding: 0;
    margin: 0;
}

.indice li {
    counter-increment: idx;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.indice a {
    display: flex;
    gap: 0.6rem;
    font-size: 0.87rem;
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.indice a::before {
    content: counter(idx, decimal-leading-zero);
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 600;
    padding-top: 0.18rem;
    flex-shrink: 0;
}

.indice a:hover {
    color: var(--accent);
}

/* ---------- FAQ ---------- */
.artigo-faq {
    margin-top: 3.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e6e9ee;
}

.artigo-faq > h2 {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.artigo-faq > h2::before {
    content: none;
}

.artigo-faq .faq-item {
    border: 0;
    border-bottom: 1px solid #e6e9ee;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.artigo-faq .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.15rem 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary);
    line-height: 1.45;
    background: transparent;
}

.artigo-faq .faq-icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.3rem;
    text-align: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 400;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.artigo-faq .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: var(--gold);
    color: var(--primary);
}

.artigo-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.artigo-faq .faq-answer.active {
    max-height: 34rem;
}

.artigo-faq .faq-answer p {
    padding: 0 0 1.2rem;
    margin: 0;
    color: #4a5666;
    font-size: 0.97rem;
    line-height: 1.78;
}

/* ---------- Leia também ---------- */
.artigo-relacionados {
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e6e9ee;
}

.artigo-relacionados h2 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    border-top: 0;
    padding-top: 0;
    margin: 0 0 1rem;
    text-align: left;
}

.artigo-relacionados h2::before {
    content: none;
}

.artigo-relacionados ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.artigo-relacionados li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eef1f4;
}

.artigo-relacionados a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    font-size: 0.96rem;
    color: var(--primary);
    text-decoration: none;
}

.artigo-relacionados a::after {
    content: '\2192';
    color: var(--gold);
    transition: transform 0.25s ease;
}

.artigo-relacionados a:hover {
    color: var(--accent);
}

.artigo-relacionados a:hover::after {
    transform: translateX(4px);
}

/* ---------- Chamada final, dividida ---------- */
.artigo-cta {
    margin-top: 3rem;
    background:
        radial-gradient(100% 120% at 90% 10%, rgba(212, 175, 55, 0.14) 0%, transparent 60%),
        linear-gradient(135deg, #011640 0%, #0a2f6e 100%);
    border-radius: 6px;
    padding: 2.2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.8rem;
    align-items: center;
}

.artigo-cta h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 0.5rem;
    border: 0;
    padding: 0;
    text-align: left;
}

.artigo-cta h2::before {
    content: none;
}

.artigo-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

.artigo-cta .btn-primary {
    white-space: nowrap;
}

/* ---------- Aviso ---------- */
.aviso {
    margin-top: 2.2rem;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-light);
    padding-left: 1rem;
    border-left: 2px solid #e6e9ee;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
    .artigo-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .artigo-lateral {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }

    .card-medico {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
    }

    .card-medico img {
        height: 100%;
        aspect-ratio: auto;
    }
}

@media (max-width: 860px) {
    .artigo-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    /* Texto em cima, imagem embaixo, como na home. Com order:-1 a imagem
       ia primeiro e, a 820px, os 504px dela empurravam o H1 e o CTA para
       fora da dobra. Vale para as 11 páginas com este hero. */
    .artigo-hero-fig {
        order: 0;
        max-width: 30rem;
        margin-left: auto;
        margin-right: auto;
    }

    .artigo-hero-fig::before {
        inset: 0.8rem -0.8rem -0.8rem 0.8rem;
    }

    .artigo-conteudo h2::before {
        position: static;
        display: block;
        margin-bottom: 0.35rem;
    }

    .artigo-cta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .artigo-layout {
        padding: 2.5rem 1.25rem 3.5rem;
    }

    .artigo-lateral {
        grid-template-columns: 1fr;
    }

    .card-medico {
        grid-template-columns: 6.5rem 1fr;
    }
}

/* ============================================================
   CORREÇÕES DE LAYOUT
   ============================================================ */

/* O menu horizontal não cabe entre ~768px e 1000px: logo + 5 itens +
   botão do WhatsApp estouram a largura e o site inteiro ganhava barra
   de rolagem horizontal nessas medidas (tablet em retrato, celular
   grande em paisagem). Antecipa o menu sanduíche para 940px. */
@media (max-width: 1000px) {
    .menu-toggle {
        display: block;
    }

    header nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 1.5rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        gap: 1rem;
        z-index: 1001;
    }

    header nav ul.active {
        display: flex;
    }
}

/* Numeral das seções: fica numa calha própria dentro da coluna, em vez
   de transbordar para a esquerda. Antes era cortado pela borda da
   janela entre 1024px e 1264px. */
.artigo-conteudo {
    padding-left: 3.6rem;
    max-width: calc(var(--coluna) + 3.6rem);
}

.artigo-conteudo h2::before {
    left: -3.6rem;
}

@media (max-width: 860px) {
    .artigo-conteudo {
        padding-left: 0;
        max-width: var(--coluna);
    }
}

/* Em telas muito estreitas (320px) logo + botão + sanduíche não cabiam
   lado a lado. O rótulo do WhatsApp sai e fica só o ícone, que mantém o
   aria-label para leitores de tela. */
@media (max-width: 400px) {
    .header-container {
        padding: 0.7rem 0.75rem !important;
        gap: 0.5rem;
    }

    .logo img {
        height: 24px;
    }

    .whatsapp-btn {
        padding: 0.55rem 0.7rem !important;
    }

    .whatsapp-btn span {
        display: none;
    }
}

/* Itens de grid têm min-width:auto e não encolhem abaixo do próprio
   conteúdo mínimo — era o que fazia os cards de qualificação estourarem
   a tela em 320px. */
.credentials-grid,
.credentials-section,
.credential-item,
.credential-info,
.cards-grid,
.card,
.contact-grid,
.contact-card {
    min-width: 0;
}

body {
    overflow-wrap: break-word;
}

@media (max-width: 480px) {
    .credentials-section {
        padding: 1.6rem 1.2rem;
    }

    .container,
    .container-narrow {
        padding: 0 1.1rem;
    }
}

/* Tabela das páginas legais: rola sozinha em vez de empurrar a página */
.tabela-rolavel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.tabela-rolavel table {
    margin-bottom: 0;
    min-width: 34rem;
}

/* A regra genérica `nav ul` do cabeçalho alcança qualquer <ul> dentro de
   qualquer <nav>. Sem declarar display aqui, a lista de "Leia também"
   virava linha horizontal no desktop e desaparecia por completo abaixo
   de 1000px, onde o menu vira sanduíche e `nav ul` recebe display:none. */
.artigo-relacionados ul {
    display: block;
    gap: 0;
}

/* Chamada final em telas estreitas: o botão não encolhia abaixo do
   próprio texto e empurrava a página. */
@media (max-width: 480px) {
    .artigo-cta {
        padding: 1.5rem 1.2rem;
    }

    .artigo-cta .btn-primary {
        white-space: normal;
        padding: 0.9rem 1.2rem;
        text-align: center;
    }
}

/* Navs de conteúdo não herdam a tipografia do menu */
.breadcrumb a,
.breadcrumb span,
.indice a,
.artigo-relacionados a {
    text-transform: none;
    letter-spacing: normal;
    font-weight: inherit;
}

/* O botão da chamada final fica dentro do artigo e herdava a cor de
   link (--accent) sobre o dourado: contraste 3,23:1, abaixo do mínimo.
   Também herdava o sublinhado dos links de texto. */
.artigo-conteudo .btn-primary {
    color: var(--primary);
    text-decoration: none;
}

/* ============================================================
   PÁGINAS DE SERVIÇO — a oferta vem antes da explicação
   ============================================================ */

/* Faixa de credenciais logo abaixo do hero */
.credenciais {
    background: var(--bg-light);
    border-bottom: 1px solid #e6e9ee;
}

.credenciais-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.4rem 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.credencial {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text);
}

.credencial svg {
    flex-shrink: 0;
    color: var(--gold);
    margin-top: 0.15rem;
}

.credencial strong {
    display: block;
    color: var(--primary);
    font-weight: 650;
}

/* Passos do atendimento */
.processo {
    counter-reset: passo;
    display: grid;
    gap: 0;
    margin: 1.8rem 0 2.4rem;
}

.processo-item {
    counter-increment: passo;
    position: relative;
    padding: 1.15rem 0 1.15rem 3.4rem;
    border-bottom: 1px solid #eef1f4;
}

.processo-item:last-child {
    border-bottom: 0;
}

.processo-item::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
}

.processo-item h3 {
    margin: 0 0 0.25rem !important;
    font-size: 1rem;
    color: var(--primary);
}

.processo-item p {
    margin: 0 !important;
    font-size: 0.96rem;
    color: #4a5666;
}

/* Bloco de atendimento e convênios */
.atendimento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.6rem 0 1.2rem;
}

.atendimento-card {
    border: 1px solid #e6e9ee;
    border-radius: 6px;
    padding: 1.3rem 1.4rem;
}

.atendimento-card h3 {
    margin: 0 0 0.4rem !important;
    font-size: 1rem;
    color: var(--primary);
}

.atendimento-card p {
    margin: 0 !important;
    font-size: 0.94rem;
    color: #4a5666;
    line-height: 1.7;
}

/* Avaliações: aponta para a plataforma independente, sem reproduzir texto */
.avaliacoes {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.4rem;
    background: var(--bg-light);
    border-radius: 6px;
    margin: 1.8rem 0;
}

.avaliacoes-nota {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.avaliacoes-estrelas {
    color: var(--gold);
    font-size: 1.05rem;
    letter-spacing: 2px;
}

.avaliacoes-valor {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.2rem;
}

.avaliacoes p {
    flex: 1 1 16rem;
    margin: 0 !important;
    font-size: 0.9rem;
    color: #4a5666;
}

/* Onde ele opera */
.unidades-servico {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.6rem 0 0.5rem;
}

.unidade-item {
    border-left: 3px solid var(--gold);
    padding: 0.3rem 0 0.3rem 1rem;
}

.unidade-item strong {
    display: block;
    color: var(--primary);
    font-size: 0.97rem;
}

.unidade-item span {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.55;
    display: block;
}

@media (max-width: 1080px) {
    .credenciais-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
    }
}

@media (max-width: 620px) {
    .credenciais-grid {
        grid-template-columns: 1fr;
        padding: 1.2rem 1.25rem;
    }

    .atendimento,
    .unidades-servico {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PÁGINA PILAR — índice clínico
   A função dela é encaminhar para as nove condições. O índice
   numerado é o centro da página, não um apêndice.
   ============================================================ */

/* ---------- Abertura editorial em duas colunas ---------- */
.pilar-abertura {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 1rem;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    align-items: start;
}

.pilar-abertura h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--primary);
    text-align: left;
    margin: 0;
}

.pilar-abertura h2 em {
    font-style: italic;
    color: var(--accent);
}

.pilar-abertura p {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #384656;
    text-align: left;
    margin-bottom: 1rem;
}

.pilar-abertura p:last-child {
    margin-bottom: 0;
}

.pilar-abertura a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(30, 90, 168, 0.4);
}

.pilar-abertura a:hover {
    color: var(--primary);
}

/* ---------- Rótulo de seção ---------- */
.pilar-rotulo {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.pilar-rotulo span,
.pilar-rotulo h2 {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
}

/* O nowrap veio dos rótulos de uma ou duas palavras. Os H2 com keyword são
   longos e estouravam a tela no celular, então precisam quebrar. */
.pilar-rotulo h2 {
    white-space: normal;
    min-width: 0;
}

/* Com o rótulo ocupando a linha inteira, o filete ao lado colapsava para
   zero. No celular ele passa para a linha de baixo. */
@media (max-width: 720px) {
    .pilar-rotulo {
        flex-wrap: wrap;
        gap: 0.55rem 1rem;
    }

    .pilar-rotulo::after {
        flex: 0 0 100%;
    }
}

.pilar-rotulo h2::before,
.pilar-rotulo h2::after {
    content: none;
}

.pilar-rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e4ea;
}

/* ---------- Índice das condições ---------- */
.condicoes {
    background:
        linear-gradient(180deg, #fbfcfd 0%, var(--white) 100%);
    padding: 3.5rem 0 4.5rem;
    border-top: 1px solid #eef1f4;
    border-bottom: 1px solid #eef1f4;
}

.condicoes-faixa {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem;
}

.condicoes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e6e9ee;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    overflow: hidden;
}

.condicao {
    counter-increment: cond;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.9rem 1.7rem 1.7rem;
    background: var(--white);
    text-decoration: none;
    transition: background 0.28s ease, transform 0.28s ease;
    isolation: isolate;
}

.condicao::before {
    content: counter(cond, decimal-leading-zero);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
}

/* faixa dourada que cresce da esquerda no hover */
.condicao::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.condicao:hover,
.condicao:focus-visible {
    background: #fbfcfd;
}

.condicao:hover::after,
.condicao:focus-visible::after {
    transform: scaleY(1);
}

.condicao h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.28rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--primary);
    margin: 0;
    transition: color 0.25s ease;
}

.condicao:hover h3 {
    color: var(--accent);
}

.condicao p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #5a6673;
    margin: 0;
    flex: 1;
}

.condicao .seta {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.condicao .seta::after {
    content: '\2192';
    transition: transform 0.25s ease;
}

.condicao:hover .seta::after {
    transform: translateX(4px);
}

/* No celular o telefone é ação principal, mas o link tinha 18px de altura
   de toque. Vira bloco com alvo confortável, sem o <br> que o separava. */
@media (max-width: 720px) {
    .unidade-cartao dd a[href^="tel"] {
        display: block;
        line-height: 2.8;
        text-decoration: none;
        border-bottom: 1px dotted rgba(30, 90, 168, 0.32);
    }

    .unidade-cartao dd a[href^="tel"]:last-child {
        border-bottom: 0;
    }

    .unidade-cartao dd br {
        display: none;
    }
}

/* No celular a lista de nove condições ocupava mais de 2000px em blocos
   idênticos. Vira linha compacta: numeral na calha, título e resumo à
   direita, e o "Ver a página" reduzido à seta na linha do título. */
@media (max-width: 720px) {
    .condicao {
        display: grid;
        grid-template-columns: 1.9rem minmax(0, 1fr) 1.1rem;
        column-gap: 0.8rem;
        row-gap: 0.28rem;
        padding: 1.15rem 1.05rem 1.2rem;
    }

    .condicao::before {
        grid-column: 1;
        grid-row: 1;
        line-height: 1.6;
    }

    .condicao h3 {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.06rem;
    }

    .condicao p {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.85rem;
        line-height: 1.55;
        margin: 0;
    }

    .condicao .seta {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
        justify-content: flex-end;
        font-size: 0;
        gap: 0;
        color: var(--gold);
    }

    .condicao .seta::after {
        font-size: 1.05rem;
        line-height: 1.25;
    }
}

/* ---------- Etapas do atendimento ---------- */
.etapas {
    max-width: 1200px;
    margin: 2.2rem auto 0;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    position: relative;
}

.etapas::before {
    content: '';
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 1.05rem;
    height: 1px;
    background: repeating-linear-gradient(90deg, #d9dee5 0 6px, transparent 6px 12px);
}

.etapa {
    position: relative;
}

.etapa-num {
    position: relative;
    z-index: 1;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gold);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 650;
    margin-bottom: 1rem;
}

.etapa h3 {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--primary);
    margin: 0 0 0.35rem;
    text-align: left;
}

.etapa p {
    font-size: 0.94rem;
    line-height: 1.7;
    color: #5a6673;
    margin: 0;
    text-align: left;
}

/* ---------- Unidades ---------- */
.unidades-pilar {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

/* Bloco de texto com largura de leitura, alinhado à esquerda do rótulo
   da seção. Evita corrigir alinhamento com style inline em cada página. */
.pilar-texto {
    max-width: 1200px;
    margin: 1.7rem auto 0;
    padding: 0 2rem;
}

.pilar-texto>* {
    max-width: 74ch;
}

.pilar-texto p {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #3d4a5a;
    margin: 0 0 1.15rem;
}

.pilar-texto p:last-child {
    margin-bottom: 0;
}

.pilar-texto ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
}

.pilar-texto li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.75rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #3d4a5a;
}

.pilar-texto li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
}

.pilar-texto .processo {
    margin: 0;
}

@media (max-width: 620px) {
    .pilar-texto {
        padding: 0 1.25rem;
    }
}

/* Variante de três cartões. Precisa de regra própria em cada breakpoint
   porque .unidades-pilar.unidades-tres tem especificidade maior que a
   regra de coluna única do media query de 860px. */
.unidades-tres {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
    .unidades-tres {
        grid-template-columns: 1fr;
        max-width: 640px;
    }

    /* Alvos de toque do header. O hamburger tinha 26x38 e o botão do
       WhatsApp 38x34, ambos abaixo dos 44px recomendados. */
    header .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        line-height: 1;
    }

    header .whatsapp-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    header .logo a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Link autônomo do perfil na Doctoralia, também abaixo de 44px. */
    .hm-nota a {
        min-height: 44px;
        align-items: center;
    }
}

.unidade-cartao {
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    padding: 1.7rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.unidade-cartao h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary);
    margin: 0;
    text-align: left;
}

.unidade-cartao dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1.1rem;
    font-size: 0.93rem;
    line-height: 1.6;
}

.unidade-cartao dt {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 700;
    padding-top: 0.2rem;
}

.unidade-cartao dd {
    margin: 0;
    color: #384656;
}

.unidade-cartao dd a {
    color: #384656;
    text-decoration: none;
}

.unidade-cartao dd a:hover {
    color: var(--accent);
}

.unidade-cartao .btn-zap {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #1ea952;
    color: #04231a;
    padding: 0.8rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 650;
    font-size: 0.9rem;
    transition: filter 0.25s ease;
}

.unidade-cartao .btn-zap:hover {
    filter: brightness(1.1);
}

/* ---------- Fecho ---------- */
.pilar-fecho {
    max-width: 1200px;
    margin: 3.5rem auto 0;
    padding: 0 2rem 4rem;
}

.pilar-fecho-caixa {
    background:
        radial-gradient(100% 130% at 88% 12%, rgba(212, 175, 55, 0.15) 0%, transparent 62%),
        linear-gradient(135deg, #011640 0%, #0a2f6e 100%);
    border-radius: 8px;
    padding: 2.6rem 2.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

.pilar-fecho-caixa h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 0.55rem;
    text-align: left;
}

.pilar-fecho-caixa p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0;
    text-align: left;
    max-width: 54ch;
}

.pilar-fecho-caixa .btn-primary {
    white-space: nowrap;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
    .condicoes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pilar-abertura {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-top: 3rem;
    }
}

@media (max-width: 860px) {
    .etapas {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .etapas::before {
        display: none;
    }

    .unidades-pilar {
        grid-template-columns: 1fr;
    }

    .pilar-fecho-caixa {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .condicoes-grid {
        grid-template-columns: 1fr;
    }

    .condicoes-faixa {
        padding: 0 1.25rem;
    }

    .pilar-abertura,
    .pilar-rotulo,
    .etapas,
    .unidades-pilar,
    .pilar-fecho {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .pilar-fecho-caixa {
        padding: 1.8rem 1.4rem;
    }

    .pilar-fecho-caixa .btn-primary {
        white-space: normal;
        text-align: center;
    }
}

/* ============================================================
   HOME NOVA — composição editorial com sobreposição
   ============================================================ */

.hm {
    --borda: #e6e9ee;
}

/* ---------- Abertura ---------- */
.hm-hero {
    position: relative;
    background:
        radial-gradient(130% 100% at 78% 8%, rgba(212, 175, 55, 0.18) 0%, transparent 58%),
        linear-gradient(150deg, #011640 0%, #06255a 55%, #0a2f6e 100%);
    color: var(--white);
    overflow: hidden;
    padding: 4.5rem 0 7rem;
}

.hm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.hm-hero-grid {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 3.5rem;
    align-items: center;
}

.hm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.6rem;
}

.hm-kicker::before {
    content: '';
    width: 2.4rem;
    height: 1px;
    background: var(--gold);
}

.hm-hero h1 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 1.4rem;
}

.hm-hero h1 em {
    font-style: italic;
    color: var(--gold);
    display: block;
}

.hm-lead {
    font-size: 1.06rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.84);
    max-width: 48ch;
    margin: 0 0 2.2rem;
}

.hm-acoes {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    align-items: center;
}

/* retrato com moldura deslocada */
/* A coluna do retrato acompanha a altura da coluna de texto. Com
   align-items:center e um retrato 2:3, sobrava um vazio de 150px acima do
   kicker, porque a imagem era muito mais alta que o texto ao lado. */
.hm-retrato {
    position: relative;
    margin: 0;
    align-self: stretch;
    min-height: 30rem;
}

/* Posicionada em absoluto de propósito: como item de grid, a altura
   intrínseca da foto (746px) definia a altura da linha e o align-self:
   stretch não tinha efeito. Fora do fluxo, quem manda é a coluna de texto. */
.hm-retrato img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 16%;
    border-radius: 4px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.hm-retrato::before {
    content: '';
    position: absolute;
    inset: 1.4rem -1.4rem -1.4rem 1.4rem;
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 4px;
}

/* ---------- Faixa de autoridade, sobreposta ao hero ---------- */
.hm-selos {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: -4.5rem auto 0;
    padding: 0 2rem;
}

.hm-selos-caixa {
    background: var(--white);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(1, 22, 64, 0.13);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.hm-selo {
    padding: 1.6rem 1.5rem;
    border-right: 1px solid var(--borda);
}

.hm-selo:last-child {
    border-right: 0;
}

.hm-selo b {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.hm-selo span {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5a6673;
    display: block;
}

/* ---------- Seção genérica da home ---------- */
.hm-sec {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.5rem 2rem 0;
}

.hm-rotulo {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.hm-rotulo span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.hm-rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borda);
}

.hm-titulo {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.7rem, 3.1vw, 2.4rem);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--primary);
    text-align: left;
    margin: 0 0 0.8rem;
    max-width: 22ch;
}

.hm-titulo em {
    font-style: italic;
    color: var(--accent);
}

.hm-sub {
    font-size: 1.02rem;
    line-height: 1.8;
    color: #5a6673;
    max-width: 62ch;
    margin: 0 0 2rem;
    text-align: left;
}

/* ---------- Mosaico de condições ---------- */
.hm-mosaico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--borda);
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
}

.hm-cond {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.6rem 1.45rem;
    background: var(--white);
    text-decoration: none;
    transition: background 0.28s ease;
}

.hm-cond::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.hm-cond:hover,
.hm-cond:focus-visible {
    background: #fbfcfd;
}

.hm-cond:hover::after,
.hm-cond:focus-visible::after {
    transform: scaleY(1);
}

.hm-cond strong {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.16rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.25;
    transition: color 0.25s ease;
}

.hm-cond:hover strong {
    color: var(--accent);
}

.hm-cond span {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #5a6673;
}

/* card destacado, ocupa duas colunas */
.hm-cond.hm-realce {
    grid-column: span 2;
    grid-row: span 2;
    background: var(--primary);
    color: var(--white);
    justify-content: flex-end;
    padding: 2rem 1.8rem;
    background-image:
        radial-gradient(110% 130% at 88% 12%, rgba(212, 175, 55, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, #011640 0%, #0a2f6e 100%);
}

.hm-cond.hm-realce strong {
    font-size: 1.55rem;
    color: var(--white);
}

.hm-cond.hm-realce:hover strong {
    color: var(--gold);
}

.hm-cond.hm-realce span {
    color: rgba(255, 255, 255, 0.78);
    max-width: 40ch;
}

.hm-cond.hm-realce:hover {
    background-color: var(--primary);
}

/* ---------- Declaração em fundo escuro ---------- */
.hm-declaracao {
    margin-top: 4.5rem;
    background:
        radial-gradient(90% 120% at 12% 15%, rgba(212, 175, 55, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, #011640 0%, #0a2f6e 100%);
    color: var(--white);
    padding: 4.5rem 0;
}

.hm-declaracao-caixa {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}

.hm-declaracao blockquote {
    margin: 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    color: var(--white);
    letter-spacing: -0.01em;
}

.hm-declaracao blockquote::before {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    background: var(--gold);
    margin-bottom: 1.4rem;
}

.hm-declaracao p {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem;
    text-align: left;
}

.hm-declaracao p:last-child {
    margin-bottom: 0;
}

.hm-declaracao a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Etapas ---------- */
.hm-etapas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    margin-top: 0.5rem;
}

.hm-etapas::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1.05rem;
    height: 1px;
    background: repeating-linear-gradient(90deg, #d9dee5 0 6px, transparent 6px 12px);
}

.hm-etapa-num {
    position: relative;
    z-index: 1;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gold);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 650;
    margin-bottom: 0.9rem;
}

.hm-etapa h3 {
    font-size: 1rem;
    font-weight: 650;
    color: var(--primary);
    margin: 0 0 0.3rem;
    text-align: left;
}

.hm-etapa p {
    font-size: 0.93rem;
    line-height: 1.68;
    color: #5a6673;
    margin: 0;
    text-align: left;
}

/* ---------- Prova social + unidades ---------- */
.hm-duo {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    align-items: start;
}

.hm-nota {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1.8rem 1.7rem;
    background: #fbfcfd;
}

.hm-nota-estrelas {
    color: var(--gold);
    font-size: 1.3rem;
    letter-spacing: 3px;
    line-height: 1;
}

.hm-nota b {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1;
    margin: 0.6rem 0 0.2rem;
}

.hm-nota p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #5a6673;
    margin: 0.6rem 0 1.1rem;
    text-align: left;
}

.hm-nota a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    gap: 0.4rem;
}

.hm-nota a::after {
    content: '\2192';
    transition: transform 0.25s ease;
}

.hm-nota a:hover::after {
    transform: translateX(4px);
}

.hm-unidades {
    display: grid;
    gap: 1rem;
}

.hm-unidade {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1.5rem 1.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: center;
}

.hm-unidade h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary);
    margin: 0 0 0.3rem;
    text-align: left;
}

.hm-unidade p {
    font-size: 0.91rem;
    line-height: 1.6;
    color: #5a6673;
    margin: 0;
    text-align: left;
}

.hm-unidade .btn-zap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #1ea952;
    color: #04231a;
    padding: 0.72rem 1.1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 650;
    font-size: 0.86rem;
    white-space: nowrap;
    transition: filter 0.25s ease;
}

.hm-unidade .btn-zap:hover {
    filter: brightness(1.1);
}

/* ---------- FAQ ---------- */
.hm-faq {
    max-width: 860px;
}

.hm-faq .faq-item {
    border: 0;
    border-bottom: 1px solid var(--borda);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.hm-faq .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.15rem 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary);
    line-height: 1.45;
    background: transparent;
}

.hm-faq .faq-icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.3rem;
    text-align: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 400;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.hm-faq .faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: var(--gold);
    color: var(--primary);
}

.hm-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.hm-faq .faq-answer.active {
    max-height: 30rem;
}

.hm-faq .faq-answer p {
    padding: 0 0 1.2rem;
    margin: 0;
    color: #4a5666;
    font-size: 0.96rem;
    line-height: 1.78;
    text-align: left;
}

/* ---------- Fecho ---------- */
.hm-fecho {
    max-width: 1200px;
    margin: 4.5rem auto 0;
    padding: 0 2rem 5rem;
}

.hm-fecho-caixa {
    background:
        radial-gradient(100% 130% at 90% 10%, rgba(212, 175, 55, 0.16) 0%, transparent 60%),
        linear-gradient(135deg, #011640 0%, #0a2f6e 100%);
    border-radius: 10px;
    padding: 3rem 2.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

.hm-fecho-caixa h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 500;
    color: var(--white);
    margin: 0 0 0.6rem;
    text-align: left;
}

.hm-fecho-caixa p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    text-align: left;
    max-width: 52ch;
}

/* ---------- Entrada escalonada ---------- */
.js .hm-anima {
    opacity: 0;
    transform: translateY(16px);
    animation: hmSobe 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .hm-anima:nth-child(1) { animation-delay: 0.05s; }
.js .hm-anima:nth-child(2) { animation-delay: 0.15s; }
.js .hm-anima:nth-child(3) { animation-delay: 0.25s; }

@keyframes hmSobe {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .js .hm-anima {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- Por que um especialista ---------- */
.hm-motivos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.hm-motivo {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1.6rem 1.5rem;
    background: #fbfcfd;
}

.hm-motivo h3 {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--primary);
    margin: 0 0 0.5rem;
    text-align: left;
}

.hm-motivo p {
    font-size: 0.93rem;
    line-height: 1.68;
    color: #5a6673;
    margin: 0;
    text-align: left;
}

/* ---------- Depoimentos ---------- */
.hm-depos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2.5rem;
}

.hm-depo {
    border-left: 3px solid var(--gold);
    padding: 0.4rem 0 0.4rem 1.3rem;
    margin: 0;
}

.hm-depo p {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--primary);
    margin: 0 0 0.6rem;
    text-align: left;
}

.hm-depo-autor {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    color: #5a6673;
}

@media (max-width: 1080px) {
    .hm-motivos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .hm-motivos,
    .hm-depos { grid-template-columns: 1fr; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
    .hm-declaracao-caixa,
    .hm-duo {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hm-hero { padding-bottom: 6rem; }
    .hm-hero-grid { gap: 2.5rem; }
    .hm-retrato { min-height: 26rem; }
    .hm-retrato::before { inset: 1rem -1rem -1rem 1rem; }
    .hm-selos-caixa { grid-template-columns: repeat(2, 1fr); }
    .hm-selo:nth-child(2) { border-right: 0; }
    .hm-selo:nth-child(1),
    .hm-selo:nth-child(2) { border-bottom: 1px solid var(--borda); }
    .hm-mosaico { grid-template-columns: repeat(2, 1fr); }
    .hm-cond.hm-realce { grid-column: span 2; }
    .hm-etapas { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
    .hm-etapas::before { display: none; }
}

/* Empilhado: texto em cima, imagem embaixo. Com a imagem primeiro, o
   retrato de 526px empurrava H1, texto e CTA para fora da dobra, e no
   tablet a foto ficava encostada à esquerda com meia tela vazia ao lado. */
@media (max-width: 720px) {
    .hm-hero {
        padding: 2.6rem 0 5.5rem;
    }

    .hm-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .hm-retrato {
        order: 0;
        min-height: 0;
        max-width: 26rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hm-retrato img {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 600 / 901;
        object-position: 50% 50%;
    }
}

@media (max-width: 720px) {
    .hm-unidade { grid-template-columns: 1fr; }
    .hm-fecho-caixa { grid-template-columns: 1fr; padding: 2.2rem 1.5rem; }
    .hm-sec, .hm-selos, .hm-fecho { padding-left: 1.25rem; padding-right: 1.25rem; }
    .hm-hero-grid, .hm-declaracao-caixa { padding-left: 1.25rem; padding-right: 1.25rem; }
    .hm-fecho-caixa .btn-primary { white-space: normal; text-align: center; }

    .hm-kicker { margin-bottom: 1.1rem; font-size: 0.7rem; letter-spacing: 0.13em; }
    .hm-kicker::before { width: 1.6rem; }
    .hm-hero h1 { font-size: clamp(2.05rem, 8.8vw, 2.8rem); line-height: 1.08; margin-bottom: 1.1rem; }
    .hm-lead { font-size: 1rem; line-height: 1.72; margin-bottom: 1.7rem; }
    .hm-acoes { gap: 0.7rem; }

    /* ---- Selos em duas colunas. Em coluna única eram quatro cartões
       soltos ocupando quase meia tela. */
    .hm-selos { margin-top: -3.6rem; }
    .hm-selos-caixa { grid-template-columns: repeat(2, 1fr); }

    .hm-selo {
        padding: 1.15rem 1.05rem;
        border-right: 1px solid var(--borda);
        border-bottom: 1px solid var(--borda);
    }

    .hm-selo:nth-child(2n) { border-right: 0; }
    .hm-selo:nth-child(n+3) { border-bottom: 0; }
    .hm-selo b { font-size: 1.24rem; margin-bottom: 0.2rem; }
    .hm-selo span { font-size: 0.78rem; line-height: 1.45; }

    /* ---- Mosaico em duas colunas. Em uma coluna as nove condições viravam
       uma lista de linhas idênticas, sem nenhuma hierarquia. */
    .hm-mosaico { grid-template-columns: repeat(2, 1fr); }

    .hm-cond {
        padding: 1.15rem 1rem 1.3rem;
        gap: 0.3rem;
    }

    .hm-cond strong { font-size: 1.02rem; line-height: 1.22; }
    .hm-cond span { font-size: 0.79rem; line-height: 1.5; }

    .hm-cond.hm-realce {
        grid-column: span 2;
        grid-row: auto;
        min-height: auto;
        padding: 1.7rem 1.4rem;
    }

    .hm-cond.hm-realce strong { font-size: 1.4rem; }
    .hm-cond.hm-realce span { font-size: 0.9rem; }

    /* ---- Etapas viram linha do tempo vertical, com o número ao lado do
       título em vez de ocupar uma linha só para ele. */
    .hm-etapas { grid-template-columns: 1fr; gap: 0; }

    .hm-etapa {
        position: relative;
        display: grid;
        grid-template-columns: 2.1rem 1fr;
        column-gap: 1rem;
        padding-bottom: 1.6rem;
    }

    .hm-etapa::before {
        content: '';
        position: absolute;
        left: 1.05rem;
        top: 2.45rem;
        bottom: 0.2rem;
        width: 1px;
        background: repeating-linear-gradient(180deg, #d9dee5 0 5px, transparent 5px 10px);
    }

    .hm-etapa:last-child { padding-bottom: 0; }
    .hm-etapa:last-child::before { display: none; }
    .hm-etapa-num { grid-row: span 2; margin-bottom: 0; }
    .hm-etapa h3 { align-self: center; margin: 0.3rem 0 0.35rem; }
    .hm-etapa p { grid-column: 2; }
}

@media (max-width: 400px) {
    .hm-cond { padding: 1rem 0.85rem 1.1rem; }
    .hm-cond strong { font-size: 0.96rem; }
    .hm-cond span { font-size: 0.76rem; }
    .hm-selo b { font-size: 1.14rem; }
}