:root {
    /* === PALETA OFICIAL DRA. LUCIANA CÂMARA === */
    --bg-main: #ecf2ff;        /* Azul lavanda claro */
    --bg-alt: #f4ede7;         /* Bege/creme quente */
    --bg-white: #ffffff;
    --primary: #566885;        /* Azul ardósia — cor principal */
    --secondary: #4a5a72;      /* Azul médio — textos secundários (escurecido para contraste) */
    --muted: #3d5870;          /* Azul muted — labels, rodapé (escurecido para contraste) */
    --accent: #93bbcf;         /* Azul claro — accent */
    --accent-light: #80a2b8;   /* Azul médio claro */
    --cta-bg: #566885;         /* Igual primary */
    --cta-text: #ffffff;
    --dark-footer: #3a4d65;    /* Primary escurecido */
    --border: #dce8f4;         /* Azul muito claro */
    --wave: #c5d8ea;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Source Sans 3', 'Krub', sans-serif;
    color: var(--primary);
    background-color: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* === TIPOGRAFIA OFICIAL ===
   Títulos:    Aleo (serifa bold/italic — autoridade clínica)
   Subtítulos: Krub (sem serifa geométrico — clean/tech)
   Corpo:      Source Sans 3 (leitura longa — clareza)
*/

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Aleo', serif;
    color: var(--primary);
    text-wrap: balance;
}

/* Labels, nav, botões, section-label → Krub */
.section-label, .btn-cta, .nav-links a, .local-card-tag,
.local-info-tag, .medo-solucao, .dif-stat,
.breadcrumb, .proc-cell-link, .tl-year {
    font-family: 'Krub', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

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

.section-padding {
    padding: 80px 0;
}

@media (max-width: 1024px) { .section-padding { padding: 60px 0; } }
@media (max-width: 768px) { .section-padding { padding: 40px 0; } }

/* Utility Classes */
.bg-white { background-color: var(--bg-white); }
.bg-main { background-color: var(--bg-main); }
.bg-alt { background-color: var(--bg-alt); }
.bg-cta { background-color: var(--cta-bg); }

.section-label {
    font-family: 'Krub', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 12px;
}

.deco-line {
    width: 50px;
    height: 2px;
    background-color: var(--accent);
    margin: 24px 0 32px 0;
}

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-up { transform: translateY(30px); }
.reveal-left { transform: translateX(-20px); }
.reveal-right { transform: translateX(20px); }
.reveal.visible { opacity: 1; transform: translate(0, 0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Custom Cursor Removido */
body, a, button { cursor: auto; }

/* 1. NAVBAR */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 80px; z-index: 1000;
    display: flex; align-items: center;
    background-color: rgba(255, 255, 255, 0);
    transition: all 0.4s ease;
}
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(46,77,94,0.08);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-brand { display: flex; align-items: center; gap: 12px; z-index: 1001; }
.nav-brand svg { width: 32px; height: 32px; color: var(--secondary); }
.brand-text { display: flex; flex-direction: column; }
.brand-title { font-family: 'Aleo', serif; font-weight: 600; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); line-height: 1.1; }
.brand-subtitle { font-family: 'Krub', sans-serif; font-weight: 300; font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }

.nav-links { display: flex; gap: 20px; }
.nav-links a {
    font-size: 12px; font-weight: 400; color: var(--secondary);
    text-transform: uppercase; letter-spacing: 0.06em;
    position: relative; padding-bottom: 4px; white-space: nowrap;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0%; height: 1px; background-color: var(--accent);
    transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--primary); }

.btn-cta {
    background: transparent; color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 10px 22px; border-radius: 4px;
    font-weight: 500; font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.06em; transition: all 0.25s ease;
}
.btn-cta:hover { background: var(--primary); color: white; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(86,104,133,0.2); }

.menu-toggle {
    display: none; background: none; border: none;
    width: 24px; height: 24px; position: relative; z-index: 1001;
}
.menu-toggle span {
    display: block; width: 100%; height: 2px;
    background-color: var(--primary); position: absolute; transition: 0.3s;
}
.menu-toggle span:nth-child(1) { top: 4px; }
.menu-toggle span:nth-child(2) { top: 11px; }
.menu-toggle span:nth-child(3) { top: 18px; }
.menu-toggle.active span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

@media (max-width: 992px) {
    .nav-links { display: none; }
    .nav-right { display: none; }
    .menu-toggle { display: block; }
    .navbar { background-color: rgba(255, 255, 255, 0.97); }
    .nav-links.active {
        display: flex; flex-direction: column;
        position: absolute; top: 80px; left: 0; width: 100%;
        background-color: var(--bg-white); padding: 24px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05); align-items: center; gap: 20px;
    }
}

/* 2. FOOTER */
.footer { background-color: var(--dark-footer); color: rgba(255,255,255,0.45); font-size: 12px; }
.footer-main { display: none; }
.footer-logo { height: 26px; filter: brightness(0) invert(1); display: block; }
.footer-crm, .footer-esp, .footer-col, .footer-col-title, .footer-addr { display: none; }
.footer-col a { display: none; }
.footer-bottom {
    padding: 14px 0;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
    font-size: 11px; color: rgba(255,255,255,0.35);
}
.footer-bottom a { color: rgba(255,255,255,0.35); transition: color 0.2s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.8); }
.footer-legal { display: flex; gap: 16px; align-items: center; }
.footer-nexora { color: var(--accent) !important; }
.footer-compact {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; gap: 24px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-compact-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-compact-links a { font-size: 11px; color: rgba(255,255,255,0.45); transition: color 0.2s; white-space: nowrap; }
.footer-compact-links a:hover { color: white; }
.footer-compact-info { font-size: 11px; color: rgba(255,255,255,0.3); }
@media (max-width: 768px) {
    .footer-compact { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-bottom { flex-direction: column; text-align: center; align-items: center; }
}

/* 3. WHATSAPP FLOAT */
@keyframes wa-breathe {
    0%, 100% { transform: scale(1);    box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
    50%       { transform: scale(1.07); box-shadow: 0 6px 28px rgba(37,211,102,0.6); }
}

.float-wa {
    position: fixed; bottom: 28px; right: 28px; z-index: 9999;
    width: 56px; height: 56px; background-color: #25D366;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    animation: wa-breathe 2s ease-in-out infinite;
}
.float-wa::after,
.float-wa::before { content: none; }

.float-wa svg { width: 24px; height: 24px; fill: white; }
.float-wa:hover { animation: none; transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.6); }

/* 4. COOKIE BANNER */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background-color: var(--cta-bg); color: white;
    padding: 24px; z-index: 9998;
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
    transform: translateY(100%); transition: transform 0.5s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-text { font-weight: 300; font-size: 13px; flex: 1; }
.cookie-text a { color: var(--accent-light); text-decoration: underline; }
.cookie-actions { display: flex; gap: 16px; }
.btn-cookie-accept { background: white; color: var(--cta-bg); border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; }
.btn-cookie-ess { background: transparent; color: white; border: 1px solid white; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; }

/* WAVES */
.wave-container { width: 100%; overflow: hidden; line-height: 0; }
.wave-container svg { display: block; width: calc(100% + 1.3px); height: 80px; }

/* IMAGE PLACEHOLDER */
.img-placeholder {
    background-color: rgba(127, 179, 200, 0.15); /* var(--accent) 15% */
    display: flex; align-items: center; justify-content: center; position: relative;
}
.img-placeholder::after {
    content: 'LC'; font-family: 'Playfair Display', serif; font-size: 72px; color: var(--secondary); opacity: 0.4;
}
.img-placeholder::before {
    content: '<!-- Substituir por foto real da Dra. Luciana -->';
    position: absolute; font-size: 12px; color: var(--secondary); opacity: 0.3; bottom: 20px;
}

/* BREADCRUMB */
.breadcrumb { font-size: 13px; color: var(--accent); margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.1em; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }

/* INNER HERO */
.inner-hero {
    padding: 160px 0 80px;
    background-color: var(--bg-main);
    text-align: center;
}
.inner-hero h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 16px; }
.inner-hero p { font-size: 16px; color: var(--secondary); font-weight: 400; }

/* BOTÕES OUTLINE — Sistema de dois modos */

/* Fundo escuro: borda branca → hover preenche branco + texto primário */
.btn-outline-light {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: white;
    border: 1.5px solid rgba(255,255,255,0.45);
    padding: 14px 36px; border-radius: 6px;
    font-family: 'Krub', sans-serif; font-weight: 600; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.25s ease;
}
.btn-outline-light:hover {
    background: white; color: var(--primary);
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* Fundo claro: borda primária → hover preenche primário + texto branco */
.btn-outline-dark {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 14px 28px; border-radius: 6px;
    font-family: 'Krub', sans-serif; font-weight: 500; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 0.25s ease;
}
.btn-outline-dark:hover {
    background: var(--primary); color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(86,104,133,0.22);
}

/* Focus Visible */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Mobile utility helpers ─── */
@media (max-width: 768px) {
    .mob-stack {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .mob-hide  { display: none !important; }
    .mob-full  { width: 100% !important; min-width: 0 !important; }
    .mob-col   { flex-direction: column !important; }
    .mob-order-first { order: -1 !important; }
}
@media (max-width: 992px) {
    .tab-stack {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
}

/* ─── Viewport-safe images & videos ─── */
img, video { max-width: 100%; }

/* ─── Cookie banner mobile ─── */
@media (max-width: 600px) {
    .cookie-banner { flex-direction: column; align-items: flex-start; padding: 16px; }
    .cookie-actions { width: 100%; justify-content: stretch; }
    .btn-cookie-accept, .btn-cookie-ess { flex: 1; text-align: center; }
}

/* ─── Evita palavras órfãs em parágrafos curtos e CTAs ─── */
@media (max-width: 768px) {
    p, .section-label, .btn-cta, .btn-outline-dark, .btn-outline-light {
        text-wrap: balance;
    }
}

/* ─── Overflow horizontal: contém elementos absolutos e animações ─── */
section, .hero, .hero-container {
    max-width: 100%;
}
.hero {
    overflow-x: hidden;
}
/* No mobile, rev-right/left não devem vazar lateralmente */
@media (max-width: 768px) {
    .reveal-right { transform: translateY(20px); }
    .reveal-left  { transform: translateY(20px); }
    .hero-visual  { overflow: hidden; }
    .bg-circle    { display: none; }
}

/* ══════════════════════════════════════════════════════════
   REFINAMENTOS MOBILE GLOBAIS — aplicados a todas as páginas
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Inner hero (páginas internas) ── */
    .inner-hero { padding: 120px 0 56px; }
    .inner-hero h1 { font-size: clamp(26px, 8vw, 40px); line-height: 1.2; }
    .inner-hero p  { font-size: 15px; }

    /* ── CTA section (todas as páginas) ── */
    .cta-section { padding: 60px 0 !important; }
    .cta-section h2 { font-size: 28px !important; line-height: 1.2 !important; }

    /* ── Fontes pequenas: sobre.html ── */
    .tl-desc  { font-size: 15px !important; line-height: 1.75 !important; }
    .tl-title { font-size: 18px !important; }
    .cred-title { font-size: 15px !important; }
    .cred-desc  { font-size: 14px !important; line-height: 1.7  !important; }

    /* ── Fontes pequenas: especialidades.html ── */
    .esp-bullets li { font-size: 15px !important; line-height: 1.75 !important; }
    .pilar-card p   { font-size: 15px !important; line-height: 1.75 !important; }
    .pilar-card h3  { font-size: 18px !important; }

    /* ── Fontes pequenas: procedimentos.html ── */
    .proc-bullets li              { font-size: 15px !important; line-height: 1.75 !important; }
    .indicacao-list .ind-text span { font-size: 14px !important; }
    .indicacao-list .ind-text strong { font-size: 15px !important; }

    /* ── Fontes pequenas: cutaneos / ginecologicos / colorretais ── */
    .symptom-item span { font-size: 15px !important; line-height: 1.6  !important; }
    .risk-card p       { font-size: 14px !important; line-height: 1.7  !important; }
    .risk-card h4      { font-size: 15px !important; }
    .rastreamento-card p { font-size: 15px !important; line-height: 1.75 !important; }

    /* ── Info cards: reduzir padding em mobile ── */
    .info-card { padding: 24px !important; }

    /* ── Eventos: empilhar story grid ── */
    .evento-story   { grid-template-columns: 1fr !important; gap: 40px !important; }
    .evento-hero-overlay { padding: 32px 24px !important; }
    .evento-fotos   { position: static !important; }
    .evento-info-strip { flex-direction: column !important; }
    .evento-info-item { border-right: none !important; border-bottom: 1px solid var(--border); }
    .evento-info-item:last-child { border-bottom: none !important; }
}
