@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.header{
    font-family:'Inter',Arial,sans-serif;
    font-size:14px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#fff;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.header *{
    box-sizing:border-box;
}

.header .active-nav{
    color:#00ab98 !important;
    font-weight:700 !important;
    position:relative;
}

.header nav > .active-nav::after,
.header .dropdown > .active-nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-9px;
    height:2px;
    border-radius:999px;
    background:#00ab98;
}

/* O container do cabeçalho é definido aqui para manter o mesmo tamanho em todas as páginas. */
.header .nav{
    width:90%;
    max-width:1480px;
    height:100px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
}

.header .logo-area{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    text-decoration:none;
    color:inherit;
}

.header .logo-area img{
    width:70px;
    height:auto;
    display:block;
}

.header .logo-text{
    min-width:0;
}

.header .logo-text h2{
    font-size:18px;
    line-height:1.05;
    font-weight:700;
    margin:0;
    white-space:nowrap;
}

.header nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:clamp(11px,1.35vw,22px);
    min-width:0;
}

.header nav > a,
.header .dropdown > a{
    text-decoration:none;
    color:#16243a;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    transition:color .2s ease;
}

.header nav > a:hover,
.header .dropdown > a:hover{
    color:#00ab98;
}

.header .dropdown{
    position:relative;
}

/* Ponte invisível entre o link e o mega menu: mantém o :hover ativo ao descer o mouse. */
.header .dropdown::after{
    content:"";
    position:absolute;
    left:-12px;
    top:100%;
    width:calc(100% + 24px);
    height:16px;
}

.header .mega-menu{
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%) translateY(20px);
    width:950px;
    max-width:95vw;
    background:#f5f5f5;
    padding:30px;
    display:grid;
    grid-template-columns:.9fr 1fr 1fr;
    gap:20px;
    border-radius:0 0 20px 20px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.3s ease;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    z-index:999;
}

.header .dropdown:hover .mega-menu,
.header .dropdown:focus-within .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.header .mega-left h3{
    font-size:28px;
    margin-bottom:20px;
    color:#333;
}

.header .mega-left p{
    font-size:15px;
    line-height:1.7;
    color:#666;
    margin-bottom:35px;
}

.header .mega-btn{
    display:inline-block;
    padding:14px 16px;
    background:#67cbbf;
    color:#13233b;
    text-decoration:none;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
    font-size:12px;
}

.header .mega-btn:hover{
    background:#7bd8cd;
}

.header .mega-column{
    display:flex;
    flex-direction:column;
}

.header .mega-column h4{
    font-size:18px;
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:1px solid #b7ddd8;
    color:#333;
}

.header .mega-column a{
    text-decoration:none;
    color:#666;
    margin-bottom:14px;
    font-size:14px;
    line-height:1.45;
    transition:.2s;
}

.header .mega-column a:hover{
    color:#16c2b6;
}

/* Botão aparece somente quando o menu passa para o modo móvel. */
.header .menu-toggle{
    display:none;
    width:46px;
    height:46px;
    flex:0 0 46px;
    padding:0;
    border:1px solid #dfe7e6;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}

.header .menu-toggle span{
    width:22px;
    height:2px;
    border-radius:2px;
    background:#13233b;
    transition:transform .25s ease,opacity .2s ease;
}

.header.menu-open .menu-toggle span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.header.menu-open .menu-toggle span:nth-child(2){
    opacity:0;
}

.header.menu-open .menu-toggle span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

@media(max-width:1200px){
    .header .nav{
        height:86px;
        width:92%;
    }

    .header .logo-area img{
        width:60px;
    }

    .header .logo-text h2{
        font-size:16px;
    }

    .header .menu-toggle{
        display:flex;
        margin-left:auto;
    }

    .header nav{
        position:absolute;
        top:86px;
        left:0;
        width:100%;
        max-height:calc(100vh - 86px);
        overflow-y:auto;
        padding:14px 5% 24px;
        background:#fff;
        border-top:1px solid #edf1f0;
        box-shadow:0 16px 30px rgba(19,35,59,.10);
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-8px);
        transition:opacity .2s ease,transform .2s ease,visibility .2s;
    }

    .header.menu-open nav{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

    .header nav > a,
    .header .dropdown > a{
        display:block;
        width:100%;
        padding:14px 4px;
        border-bottom:1px solid #edf1f0;
        font-size:14px;
        white-space:normal;
    }

    .header nav > .active-nav::after,
    .header .dropdown > .active-nav::after{
        left:4px;
        right:auto;
        bottom:5px;
        width:42px;
    }

    .header .dropdown::after{
        display:none;
    }

    .header .dropdown{
        width:100%;
    }

    /* No celular, o item Tratamentos funciona como link para a página principal. */
    .header .mega-menu{
        display:none !important;
    }
}

@media(max-width:480px){
    .header .nav{
        height:78px;
    }

    .header nav{
        top:78px;
        max-height:calc(100vh - 78px);
    }

    .header .logo-area img{
        width:52px;
    }

    .header .logo-text h2{
        font-size:14px;
    }

    .header .menu-toggle{
        width:42px;
        height:42px;
        flex-basis:42px;
    }
}