/* ========================================
   HEADER SURG
   Cabeçalho, menu, dropdown e hero interno
======================================== */

/* ========================================
   TOPO
======================================== */

header.topo{
    background:white;
    border-top:5px solid var(--verde);
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}

header.topo .topo-container{
    max-width:1400px;
    margin:auto;
    padding:14px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ========================================
   LOGO
======================================== */

header.topo .logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

header.topo .logo img{
    height:82px;
}

header.topo .logo-texto{
    display:flex;
    flex-direction:column;
}

header.topo .logo-texto strong{
    display:block;
    color:var(--azul);
    font-size:2.35rem;
    letter-spacing:2px;
    line-height:1;
}

header.topo .logo-texto span{
    color:var(--verde);
    font-weight:700;
    font-size:.85rem;
    line-height:1.3;
}

/* ========================================
   MENU
======================================== */

header.topo .menu{
    display:flex;
    gap:18px;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:nowrap;
    white-space:nowrap;
}

header.topo .menu > a,
header.topo .menu .dropbtn{
    text-decoration:none;
    color:var(--texto);
    font-weight:700;
    font-size:15px;
    position:relative;
    padding:8px 0;
    transition:.3s;
}

header.topo .menu > a:hover,
header.topo .menu .dropbtn:hover{
    color:var(--azul);
}

header.topo .menu > a::after,
header.topo .menu .dropbtn::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    background:var(--verde);
    transition:.3s;
}

header.topo .menu > a:hover::after,
header.topo .menu .dropbtn:hover::after{
    width:100%;
}

/* ========================================
   MENU ATIVO
======================================== */

header.topo .menu a[aria-current="page"]{
    color:var(--verde);
}

header.topo .menu a[aria-current="page"]::after{
    width:100%;
}

/* ========================================
   DROPDOWN
======================================== */

header.topo .dropdown{
    position:relative;
}

header.topo .dropbtn{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:5px;
}

header.topo .dropbtn span{
    font-size:.75rem;
    transition:.3s;
}

header.topo .dropdown:hover .dropbtn span{
    transform:rotate(180deg);
}

header.topo .dropdown-content{
    display:block;
    position:absolute;
    top:120%;
    left:0;
    background:white;
    min-width:240px;
    box-shadow:0 8px 22px rgba(0,0,0,.14);
    border-radius:10px;
    padding:10px 0;
    z-index:1000;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.25s ease;
}

header.topo .dropdown-content::before{
    content:'';
    position:absolute;
    top:-12px;
    left:0;
    width:100%;
    height:12px;
}

header.topo .dropdown-content a{
    display:block;
    padding:12px 18px;
    color:var(--texto);
    text-decoration:none;
    font-size:14px;
    white-space:nowrap;
}

header.topo .dropdown-content a:hover{
    background:#f5f7fa;
    color:var(--azul);
}

header.topo .dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ========================================
   HERO INTERNO PADRÃO SURG
======================================== */

section.hero-interno{
    background:linear-gradient(135deg,var(--azul),#4A4BD4);
    color:#fff;

    min-height:220px;

    display:flex;
    align-items:center;

    padding:0 20px;
}

section.hero-interno .hero-container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 40px;
}

section.hero-interno .etiqueta{
    display:inline-block;
    background:var(--verde);
    color:#fff;
    padding:7px 14px;
    border-radius:30px;
    font-size:.92rem;
    font-weight:700;
    margin-bottom:16px;
}

section.hero-interno h1{
    font-size:3rem;
    font-weight:700;
    line-height:1.15;
    margin-bottom:12px;
}

section.hero-interno p{
    max-width:700px;
    font-size:1.15rem;
    line-height:1.7;
    margin:0;
}
/* ========================================
   RESPONSIVO
======================================== */

@media(max-width:1000px){

    header.topo .topo-container{
        flex-direction:column;
        gap:20px;
    }

    header.topo .menu{
        flex-wrap:wrap;
        justify-content:center;
    }

}

@media(max-width:600px){

    header.topo .topo-container{
        padding:14px 20px;
    }

    header.topo .logo img{
        height:70px;
    }

    header.topo .logo-texto strong{
        font-size:2rem;
    }

    
    section.hero-interno{
        min-height:200px;
    }
    
    section.hero-interno h1{
        font-size:2.2rem;
    }
    
    section.hero-interno .hero-container{
        padding:0 20px;
    }

}