/*==================================================
                GUIA JURÍDICO
                STYLE.CSS
                Versão 2.0
==================================================*/

/*==================================================
                    RESET
==================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    font-family:'Poppins',sans-serif;
    background:#F5F7FA;
    color:#2F3542;
    line-height:1.6;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
    border:none;
    outline:none;
}

button{
    cursor:pointer;
    background:none;
}

/*==================================================
                    ROOT
==================================================*/

:root{

    --primary:#00194E;
    --primary-light:#003A8C;

    --gold:#D4AF37;

    --white:#FFFFFF;

    --gray-50:#F8FAFC;
    --gray-100:#F5F7FA;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-500:#6B7280;
    --gray-700:#374151;
    --gray-900:#111827;

    --shadow-sm:
        0 5px 15px rgba(0,0,0,.05);

    --shadow:
        0 15px 35px rgba(0,0,0,.08);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.15);

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:22px;

    --transition:.35s;

    --container:1200px;

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/*==================================================
                SELECTION
==================================================*/

::selection{

    background:var(--gold);

    color:#fff;

}

/*==================================================
                CONTAINER
==================================================*/

.container{

    width:min(90%,var(--container));

    margin:auto;

}

/*==================================================
                SECTION
==================================================*/

section{

    padding:90px 0;

}

/*==================================================
                TITLES
==================================================*/

.section-title{

    font-family:'Cinzel',serif;

    font-size:2.6rem;

    color:var(--primary);

    text-align:center;

    margin-bottom:18px;

}

.section-subtitle{

    max-width:700px;

    margin:auto;

    text-align:center;

    color:var(--gray-500);

    margin-bottom:70px;

}

/*==================================================
                BUTTONS
==================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:var(--primary);

    color:white;

    padding:15px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    background:var(--gold);

    transform:translateY(-4px);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:999px;

    transition:var(--transition);

    font-weight:600;

}

.btn-secondary:hover{

    background:var(--primary);

    color:white;

}

.btn-outline{

    padding:14px 30px;

    border-radius:999px;

    border:2px solid white;

    color:white;

    transition:.35s;

}

.btn-outline:hover{

    background:white;

    color:var(--primary);

}

/*==================================================
                    HEADER
==================================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:.4s;

    background:transparent;

}

.header.scrolled{

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:90px;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    transition:.3s;

}

.logo img{

    width:60px;

    transition:.3s;

}

.logo:hover img{

    transform:rotate(-8deg) scale(1.05);

}

.logo span{

    font-family:'Cinzel',serif;

    font-size:1.55rem;

    font-weight:700;

    color:var(--primary);

    letter-spacing:.5px;

}

/*==================================================
                    NAVBAR
==================================================*/

.navbar{

    display:flex;

    align-items:center;

    gap:32px;

}

.navbar a{

    position:relative;

    font-weight:500;

    color:var(--gray-700);

    transition:.3s;

}

.navbar a:hover{

    color:var(--primary);

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:3px;

    background:var(--gold);

    border-radius:20px;

    transition:.35s;

}

.navbar a:hover::after{

    width:100%;

}

/*==================================================
                HEADER BUTTONS
==================================================*/

.header-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}

.btn-login{

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.btn-login:hover{

    color:var(--gold);

}

/*==================================================
                THEME BUTTON
==================================================*/

.theme-button{

    width:46px;

    height:46px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.theme-button i{

    font-size:1.15rem;

    color:var(--primary);

}

.theme-button:hover{

    background:var(--primary);

    transform:translateY(-3px);

}

.theme-button:hover i{

    color:white;

}

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

.menu-mobile{

    display:none;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.menu-mobile i{

    font-size:1.6rem;

}

.menu-mobile:hover{

    background:var(--gold);

}

/*==================================================
                HEADER ANIMATION
==================================================*/

.header{

    animation:headerDown .8s ease;

}

@keyframes headerDown{

    from{

        transform:translateY(-100%);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

/*==================================================
                    HERO
==================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,25,78,.55),
            rgba(0,25,78,.65)
        ),
        url("../assets/hero/hero-home.jpg")
        center center/cover
        no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.04),
        transparent,
        rgba(212,175,55,.08)
    );

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,25,78,.35);

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:760px;

    text-align:center;

    color:white;

}

.hero-subtitle{

    display:inline-block;

    padding:8px 18px;

    border:1px solid rgba(255,255,255,.20);

    border-radius:999px;

    background:rgba(255,255,255,.08);

    margin-bottom:25px;

    letter-spacing:1px;

    font-size:.95rem;

    backdrop-filter:blur(12px);

}

.hero h1{

    font-family:"Cinzel",serif;

    font-size:4rem;

    line-height:1.15;

    margin-bottom:25px;

    text-shadow:0 10px 25px rgba(0,0,0,.25);

}

.hero p{

    font-size:1.15rem;

    color:rgba(255,255,255,.90);

    max-width:650px;

    margin:0 auto 45px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

/*==================================================
            HERO BUTTONS
==================================================*/

.hero .btn-primary{

    min-width:220px;

}

.hero .btn-secondary{

    min-width:220px;

    border-color:white;

    color:white;

}

.hero .btn-secondary:hover{

    background:white;

    color:var(--primary);

}

/*==================================================
            SCROLL INDICATOR
==================================================*/

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    animation:scrollDown 2s infinite;

    color:white;

    z-index:10;

}

.scroll-indicator i{

    font-size:2rem;

}

@keyframes scrollDown{

    0%{

        transform:
        translateX(-50%)
        translateY(0);

        opacity:1;

    }

    50%{

        transform:
        translateX(-50%)
        translateY(12px);

        opacity:.4;

    }

    100%{

        transform:
        translateX(-50%)
        translateY(0);

        opacity:1;

    }

}

/*==================================================
            HERO DECORATION
==================================================*/

.hero::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    right:-220px;

    top:-180px;

    background:rgba(212,175,55,.08);

    filter:blur(60px);

}

/*==================================================
            HERO ANIMATION
==================================================*/

.hero-content>*{

    animation:fadeHero 1s ease both;

}

.hero-content h1{

    animation-delay:.2s;

}

.hero-content p{

    animation-delay:.4s;

}

.hero-buttons{

    animation-delay:.6s;

}

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
                SEARCH SECTION
==================================================*/

.search-section{

    margin-top:-70px;

    position:relative;

    z-index:50;

}

.search-box{

    background:var(--white);

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow-lg);

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    align-items:end;

}

.search-field{

    display:flex;

    flex-direction:column;

}

.search-field label{

    font-size:.95rem;

    font-weight:600;

    color:var(--primary);

    margin-bottom:10px;

}

.search-field input,
.search-field select{

    height:55px;

    padding:0 18px;

    border:1px solid var(--gray-200);

    border-radius:14px;

    background:var(--white);

    transition:.3s;

    font-size:.95rem;

}

.search-field input:focus,
.search-field select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,25,78,.08);

}

.search-button{

    height:55px;

    background:var(--primary);

    color:#fff;

    border-radius:14px;

    font-weight:600;

    transition:.35s;

}

.search-button:hover{

    background:var(--gold);

    transform:translateY(-3px);

}

/*==================================================
                AREAS
==================================================*/

.areas{

    background:var(--gray-50);

}

.areas-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.area-card{

    background:var(--white);

    border-radius:22px;

    padding:35px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

    position:relative;

    overflow:hidden;

}

.area-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:var(--gold);

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.area-card:hover::before{

    transform:scaleY(1);

}

.area-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.area-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:rgba(0,25,78,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    transition:.35s;

}

.area-card:hover .area-icon{

    background:var(--primary);

}

.area-icon i{

    font-size:2rem;

    color:var(--primary);

    transition:.35s;

}

.area-card:hover .area-icon i{

    color:white;

}

.area-card h3{

    font-family:'Cinzel',serif;

    color:var(--primary);

    margin-bottom:18px;

    font-size:1.4rem;

}

.area-card p{

    color:var(--gray-500);

    margin-bottom:22px;

}

.area-card ul{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:28px;

}

.area-card ul li{

    color:var(--gray-700);

    display:flex;

    align-items:center;

    gap:10px;

}

.area-card ul li i{

    color:var(--gold);

}

.area-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.area-link i{

    transition:.35s;

}

.area-link:hover{

    color:var(--gold);

}

.area-link:hover i{

    transform:translateX(6px);

}

/*==================================================
                LAWYERS
==================================================*/

.lawyers{

    background:var(--white);

}

.lawyers-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));

    gap:35px;

}

.lawyer-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.4s;

}

.lawyer-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.lawyer-image{

    position:relative;

    overflow:hidden;

    height:330px;

}

.lawyer-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.lawyer-card:hover img{

    transform:scale(1.08);

}

.lawyer-rating{

    position:absolute;

    top:20px;

    right:20px;

    background:rgba(255,255,255,.95);

    padding:8px 14px;

    border-radius:999px;

    display:flex;

    gap:4px;

    box-shadow:var(--shadow-sm);

}

.lawyer-rating i{

    color:var(--gold);

    font-size:.9rem;

}

.lawyer-body{

    padding:28px;

}

.lawyer-body h3{

    font-family:"Cinzel",serif;

    color:var(--primary);

    margin-bottom:12px;

}

.lawyer-speciality{

    color:var(--gold);

    font-weight:600;

    margin-bottom:18px;

}

.lawyer-info{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:25px;

}

.lawyer-info div{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--gray-500);

}

.lawyer-info i{

    color:var(--primary);

}

.lawyer-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.lawyer-footer a{

    font-weight:600;

    color:var(--primary);

    transition:.3s;

}

.lawyer-footer a:hover{

    color:var(--gold);

}

/*==================================================
                STATS
==================================================*/

.stats{

    background:

    linear-gradient(

        rgba(0,25,78,.95),

        rgba(0,25,78,.95)

    ),

    url("../assets/ui/pattern.png")

    center/cover;

    color:white;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:35px;

}

.stat-card{

    text-align:center;

    padding:40px 20px;

    border-radius:22px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.12);

}

.stat-card i{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:18px;

}

.stat-number{

    font-size:3rem;

    font-weight:700;

    margin-bottom:10px;

}

.stat-text{

    opacity:.85;

    letter-spacing:.5px;

}

/*==================================================
                TESTIMONIALS
==================================================*/

.testimonials{

    background:var(--gray-50);

}

.testimonials-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

}

.testimonial-card{

    background:var(--white);

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.testimonial-stars{

    display:flex;

    gap:6px;

    margin-bottom:20px;

}

.testimonial-stars i{

    color:var(--gold);

}

.testimonial-text{

    color:var(--gray-500);

    margin-bottom:30px;

    line-height:1.8;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h4{

    color:var(--primary);

    margin-bottom:5px;

}

.testimonial-user span{

    color:var(--gray-500);

    font-size:.9rem;

}

/*==================================================
                    BLOG
==================================================*/

.blog{

    background:var(--white);

}

.blog-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:35px;

}

.blog-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.blog-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.blog-image{

    height:230px;

    overflow:hidden;

}

.blog-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

.blog-body{

    padding:30px;

}

.blog-date{

    color:var(--gold);

    font-weight:600;

    margin-bottom:12px;

}

.blog-body h3{

    color:var(--primary);

    font-family:"Cinzel",serif;

    margin-bottom:18px;

}

.blog-body p{

    color:var(--gray-500);

    margin-bottom:25px;

}

.blog-body a{

    color:var(--primary);

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:8px;

    transition:.35s;

}

.blog-body a:hover{

    color:var(--gold);

}

.blog-body a i{

    transition:.35s;

}

.blog-body a:hover i{

    transform:translateX(5px);

}

/*==================================================
                    CTA
==================================================*/

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

}

.cta-box{

    text-align:center;

    max-width:850px;

    margin:auto;

}

.cta-box h2{

    font-family:"Cinzel",serif;

    font-size:2.8rem;

    margin-bottom:25px;

}

.cta-box p{

    opacity:.9;

    margin-bottom:40px;

    font-size:1.1rem;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/*==================================================
                    FOOTER
==================================================*/

.footer{

    background:#07142E;

    color:white;

    padding-top:80px;

}

.footer-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:45px;

}

.footer-logo{

    width:85px;

    margin-bottom:18px;

}

.footer-column h3{

    margin-bottom:22px;

    color:var(--gold);

    font-family:"Cinzel",serif;

}

.footer-column p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-column li{

    color:rgba(255,255,255,.75);

}

.footer-column a{

    transition:.3s;

}

.footer-column a:hover{

    color:var(--gold);

    padding-left:6px;

}

.footer-column i{

    margin-right:10px;

    color:var(--gold);

}

.footer-school{

    width:90px;

    margin-bottom:20px;

}

.footer-bottom{

    margin-top:70px;

    border-top:1px solid rgba(255,255,255,.12);

    padding:25px 0;

    text-align:center;

    color:rgba(255,255,255,.70);

}

/*==================================================
                UTILITIES
==================================================*/

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:60px;

}

.mb-1{

    margin-bottom:20px;

}

.mb-2{

    margin-bottom:40px;

}

.mb-3{

    margin-bottom:60px;

}

.hidden{

    display:none;

}

/*==================================================
                ACCESSIBILITY
==================================================*/

:focus-visible{

    outline:3px solid var(--gold);

    outline-offset:4px;

}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{

    border-radius:10px;

}

/*==================================================
                SMOOTH ANIMATIONS
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.scale{

    transition:.35s;

}

.scale:hover{

    transform:scale(1.03);

}

.rotate:hover{

    transform:rotate(-2deg);

}

/*==================================================
                HOVER EFFECTS
==================================================*/

.hover-shadow{

    transition:.35s;

}

.hover-shadow:hover{

    box-shadow:var(--shadow-lg);

}

.hover-up{

    transition:.35s;

}

.hover-up:hover{

    transform:translateY(-8px);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1100px){

    .navbar{

        gap:20px;

    }

    .hero h1{

        font-size:3.2rem;

    }

}

@media(max-width:900px){

    .navbar{

        display:none;

    }

    .menu-mobile{

        display:flex;

    }

    .hero{

        text-align:center;

        padding:140px 0 80px;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero .btn-primary,
    .hero .btn-secondary{

        width:100%;

        max-width:320px;

    }

    .search-box{

        grid-template-columns:1fr;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    .section-title{

        font-size:2rem;

    }

    .lawyers-grid,
    .areas-grid,
    .blog-grid,
    .testimonials-grid{

        grid-template-columns:1fr;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo,
    .footer-school{

        margin:0 auto 20px;

    }

}

@media(max-width:500px){

    html{

        font-size:15px;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .header .container{

        height:80px;

    }

    .logo span{

        font-size:1.2rem;

    }

    .logo img{

        width:48px;

    }

    .header-buttons{

        gap:8px;

    }

    .theme-button,
    .menu-mobile{

        width:42px;

        height:42px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

}

/*==================================================
                HOW
==================================================*/

.how{

    background:white;

}

.how-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.how-card{

    background:white;

    border-radius:22px;

    padding:40px;

    text-align:center;

    position:relative;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.how-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.how-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:2rem;

    font-weight:700;

    color:rgba(0,25,78,.08);

}

.how-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(0,25,78,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.how-card:hover .how-icon{

    background:var(--primary);

}

.how-icon i{

    font-size:2.5rem;

    color:var(--primary);

    transition:.35s;

}

.how-card:hover .how-icon i{

    color:white;

}

.how-card h3{

    font-family:"Cinzel",serif;

    color:var(--primary);

    margin-bottom:20px;

}

.how-card p{

    color:var(--gray-500);

    line-height:1.8;

}

/*==================================================
            LAWYER IMPROVEMENTS
==================================================*/

.lawyer-footer{

    margin-top:25px;

}

.lawyer-footer a:last-child{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gray-100);

    transition:.35s;

}

.lawyer-footer a:last-child:hover{

    background:var(--gold);

    color:white;

}

.lawyer-footer i{

    font-size:1.1rem;

}

.lawyer-card{

    position:relative;

}

.lawyer-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:5px;

    background:var(--gold);

    transform:scaleX(0);

    transition:.35s;

}

.lawyer-card:hover::after{

    transform:scaleX(1);

}

/*==================================================
                PAGE BANNER
==================================================*/

.page-banner{

    background:linear-gradient(
        rgba(0,25,78,.9),
        rgba(0,25,78,.9)
    );

    color:white;

    text-align:center;

    padding:140px 0 90px;

}

.page-banner h1{

    font-family:"Cinzel",serif;

    font-size:3rem;

    margin-bottom:20px;

}

.page-banner p{

    opacity:.9;

    max-width:650px;

    margin:auto;

}

/*==================================================
                    ABOUT
==================================================*/

.about{

    padding:100px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-image img{

    width:100%;

    border-radius:22px;

    box-shadow:var(--shadow-lg);

}

.about-content h2{

    color:var(--primary);

    font-family:"Cinzel",serif;

    margin-bottom:25px;

}

.about-content p{

    color:var(--gray-500);

    margin-bottom:20px;

    line-height:1.9;

}

/*==================================================
                MISSION
==================================================*/

.mission{

    background:var(--gray-50);

    padding:100px 0;

}

.mission-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.mission-card{

    background:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.mission-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.mission-card i{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:20px;

}

.mission-card h3{

    font-family:"Cinzel",serif;

    color:var(--primary);

    margin-bottom:20px;

}

.mission-card p{

    color:var(--gray-500);

    line-height:1.8;

}

/*==================================================
            LAWYERS PAGE
==================================================*/

.lawyers-page{

    padding:100px 0;

}

.filter-box{

    display:flex;

    gap:20px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.filter-box input,
.filter-box select{

    flex:1;

    min-width:250px;

    padding:16px 20px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:1rem;

}

.filter-box input:focus,
.filter-box select:focus{

    outline:none;

    border-color:var(--gold);

}

/*==================================================
                OFFICES
==================================================*/

.offices{

    padding:100px 0;

}

.offices-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.office-card{

    background:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.office-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.office-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(0,25,78,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

}

.office-icon i{

    font-size:2.5rem;

    color:var(--primary);

}

.office-card h3{

    margin-bottom:20px;

    font-family:"Cinzel",serif;

    color:var(--primary);

}

.office-card p{

    margin-bottom:12px;

    color:var(--gray-500);

}

.office-card .btn-primary{

    margin-top:25px;

}

/*==================================================
                    CONTACT
==================================================*/

.contact{

    padding:100px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:50px;

    align-items:start;

}

.contact-info{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

}

.contact-info h2{

    color:var(--primary);

    font-family:"Cinzel",serif;

    margin-bottom:20px;

}

.contact-info p{

    color:var(--gray-500);

    margin-bottom:30px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.contact-item i{

    font-size:1.3rem;

    color:var(--gold);

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:16px 20px;

    border:1px solid var(--gray-200);

    border-radius:14px;

    font-size:1rem;

    resize:none;

}

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--gold);

}

.contact-form button{

    align-self:flex-start;

}

/*==================================================
                BLOG PAGE
==================================================*/

.blog-page{

    padding:100px 0;

}

.blog-search{

    display:flex;

    gap:20px;

    margin-bottom:50px;

}

.blog-search input{

    flex:1;

    padding:16px 20px;

    border-radius:14px;

    border:1px solid #ddd;

    font-size:1rem;

}

.blog-search input:focus{

    outline:none;

    border-color:var(--gold);

}

.blog-category{

    display:inline-block;

    background:rgba(0,25,78,.08);

    color:var(--primary);

    padding:8px 16px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

}

/*==================================================
                    FAQ
==================================================*/

.faq{

    padding:100px 0;

}

.faq-list{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:white;

    border-radius:18px;

    margin-bottom:20px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

}

.faq-question{

    width:100%;

    border:none;

    background:white;

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:600;

}

.faq-question i{

    color:var(--gold);

}

.faq-answer{

    display:none;

    padding:0 30px 25px;

    color:var(--gray-500);

    line-height:1.8;

}

.faq-item.active .faq-answer{

    display:block;

}

/*==================================================
                    AUTH
==================================================*/

.auth{

    padding:100px 0;

}

.auth-box{

    max-width:500px;

    margin:auto;

    background:white;

    padding:45px;

    border-radius:20px;

    box-shadow:var(--shadow-lg);

}

.auth-box h2{

    text-align:center;

    margin-bottom:30px;

    color:var(--primary);

    font-family:"Cinzel",serif;

}

.auth-box form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.auth-box input{

    padding:16px 20px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:1rem;

}

.auth-box input:focus{

    outline:none;

    border-color:var(--gold);

}

.auth-box button{

    width:100%;

}

.auth-link{

    margin-top:25px;

    text-align:center;

}

.auth-link a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

/* ===========================
MENU DO USUÁRIO
=========================== */

.user-menu{

    position:relative;

}

.user-button{

    display:flex;

    align-items:center;

    gap:10px;

    border:none;

    background:none;

    cursor:pointer;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.user-button i:first-child{

    font-size:30px;

    color:#D4AF37;

}

.user-dropdown{

    position:absolute;

    top:55px;

    right:0;

    width:220px;

    background:white;

    border-radius:14px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    display:none;

    overflow:hidden;

    z-index:9999;

}

.user-dropdown.active{

    display:block;

}

.user-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    text-decoration:none;

    color:#333;

    transition:.25s;

}

.user-dropdown a:hover{

    background:#F5F5F5;

    color:#00194E;

}

.user-dropdown hr{

    margin:0;

    border:none;

    border-top:1px solid #EEE;

}

/* ==============================
   AVATAR DO USUÁRIO - HEADER
============================== */


.user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

    object-position:center;

    display:block;

    border:2px solid #D4AF37;

}

.user-button{

    display:flex;

    align-items:center;

    gap:10px;

}



.user-button i.bi-person-circle{

    font-size:42px;

}

/* ==============================
   PERFIL DO USUÁRIO
============================== */


.profile-page{

    padding:70px 0;

}



.profile-box{

    max-width:500px;

    margin:auto;

    background:#fff;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.profile-avatar img{

    width:160px;

    height:160px;

    border-radius:50%;

    object-fit:cover;

    object-position:center;

    border:4px solid #D4AF37;

}



.profile-avatar i{

    font-size:160px;

    color:#00194E;

}



.profile-box h2{

    color:#00194E;

    margin-top:25px;

}



.profile-email{

    color:#666;

}



.profile-form{

    margin-top:30px;

    text-align:left;

}



.profile-form label{

    display:block;

    color:#00194E;

    font-weight:600;

    margin-bottom:8px;

}



.profile-form input{

    width:100%;

    padding:14px;

    border-radius:10px;

    border:1px solid #ddd;

    margin-bottom:20px;

    box-sizing:border-box;

}

/* ==============================
   ALERTAS DE AUTENTICAÇÃO
============================== */


.alert-error{

    background:#fee2e2;

    color:#991b1b;

    padding:15px 20px;

    border-radius:10px;

    margin-bottom:20px;

    font-weight:600;

    border-left:5px solid #dc2626;

}



.alert-success{

    background:#d1fae5;

    color:#065f46;

    padding:15px 20px;

    border-radius:10px;

    margin-bottom:20px;

    font-weight:600;

    border-left:5px solid #10b981;

}

/* ==============================
   DARK MODE
============================== */


body.dark-mode{

    background:#111827;

    color:#eee;

}



body.dark-mode .header{

    background:#111827;

}



body.dark-mode .area-card,
body.dark-mode .lawyer-card,
body.dark-mode .blog-card,
body.dark-mode .testimonial-card,
body.dark-mode .cta-box,
body.dark-mode .auth-box{

    background:#1f2937;

    color:#fff;

}



body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3{

    color:#fff;

}



body.dark-mode p{

    color:#d1d5db;

}



body.dark-mode .footer{

    background:#020617;

}



body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{

    background:#111827;

    color:#fff;

    border-color:#374151;

}

/* =================================
   MODO ESCURO
================================= */


body.dark-mode{

    background:#111827;

    color:#f9fafb;

}



/* HEADER */

body.dark-mode .header{

    background:#020617;

}



body.dark-mode .header a{

    color:#fff;

}





/* TEXTOS */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4{

    color:#fff;

}



body.dark-mode p{

    color:#d1d5db;

}





/* CARDS */

body.dark-mode .area-card,
body.dark-mode .lawyer-card,
body.dark-mode .blog-card,
body.dark-mode .testimonial-card,
body.dark-mode .how-card,
body.dark-mode .cta-box,
body.dark-mode .auth-box{


    background:#1e293b;

    color:#fff;

}





/* BOTÕES */

body.dark-mode .btn-secondary{


    border-color:#D4AF37;

    color:#fff;


}





/* INPUTS */


body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{


    background:#020617;

    color:#fff;

    border-color:#334155;


}





/* FOOTER */


body.dark-mode .footer{


    background:#020617;


}





/* DROPDOWN USUÁRIO */


body.dark-mode .user-dropdown{


    background:#1e293b;


}


body.dark-mode .user-dropdown a{


    color:#fff;


}

/* ==============================
   PERFIL DO USUÁRIO
============================== */


.profile-card{

    background:#fff;

    border-radius:25px;

    padding:40px;

    max-width:800px;

    margin:auto;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}



.profile-header{

    display:flex;

    align-items:center;

    gap:30px;

}



.profile-avatar img,
.profile-avatar i{

    width:130px;

    height:130px;

    border-radius:50%;

    object-fit:cover;

}



.profile-avatar i{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#00194E;

    color:#D4AF37;

    font-size:90px;

}



.profile-info h2{

    color:#00194E;

    margin-bottom:10px;

}



.profile-info p{

    color:#666;

}



.profile-type{

    display:inline-flex;

    gap:8px;

    align-items:center;

    background:#00194E;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    margin-top:10px;

}



.profile-title{

    color:#00194E;

    margin:25px 0;

}



.profile-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}





@media(max-width:700px){


.profile-header{

    flex-direction:column;

    text-align:center;

}


.profile-card{

    padding:25px;

}

} /* fim do @media (max-width:700px) */

/*==================================================
              BLOG - ARTIGO COMPLETO
==================================================*/

.blog-article{
    max-width:950px;
    margin:0 auto;
    background:var(--white);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
}


/* IMAGEM PRINCIPAL */

.blog-article-image{
    width:100%;
    max-height:500px;
    overflow:hidden;
}

.blog-article-image img{
    width:100%;
    height:100%;
    max-height:500px;
    object-fit:cover;
}


/* CONTEÚDO */

.blog-article-content{
    padding:50px 60px;
}


/* DATA */

.blog-article-content .blog-date{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--gold);
    font-weight:600;
    margin-right:15px;
}

.blog-article-content .blog-date i{
    font-size:1rem;
}


/* CATEGORIA */

.blog-article-content .blog-category{
    margin-bottom:20px;
}


/* TÍTULO */

.blog-article-content h1{
    color:var(--primary);
    font-family:"Cinzel",serif;
    font-size:2.5rem;
    line-height:1.3;
    margin:25px 0;
}


/* RESUMO */

.blog-resumo{
    color:var(--gray-500);
    font-size:1.15rem;
    line-height:1.8;
    padding-bottom:25px;
    margin-bottom:30px;
    border-bottom:1px solid var(--gray-200);
}


/* TEXTO DO ARTIGO */

.blog-text{
    color:var(--gray-700);
    font-size:1.05rem;
    line-height:2;
    white-space:normal;
}


/* ESPAÇAMENTO DOS PARÁGRAFOS */

.blog-text br{
    line-height:2;
}


/* BOTÃO VOLTAR */

.blog-voltar{
    margin-top:45px;
    padding-top:30px;
    border-top:1px solid var(--gray-200);
}


/* DARK MODE */

body.dark-mode .blog-article{
    background:#1e293b;
}

body.dark-mode .blog-article-content h1{
    color:#fff;
}

body.dark-mode .blog-text{
    color:#d1d5db;
}

body.dark-mode .blog-resumo{
    color:#d1d5db;
    border-color:#334155;
}

body.dark-mode .blog-voltar{
    border-color:#334155;
}


/* RESPONSIVO */

@media(max-width:768px){

    .blog-article-content{
        padding:35px 25px;
    }

    .blog-article-content h1{
        font-size:2rem;
    }

    .blog-text{
        font-size:1rem;
        line-height:1.8;
    }

    .blog-article-image{
        max-height:350px;
    }

}


@media(max-width:480px){

    .blog-article-content{
        padding:25px 20px;
    }

    .blog-article-content h1{
        font-size:1.6rem;
    }

    .blog-resumo{
        font-size:1rem;
    }

    .blog-article-image{
        max-height:280px;
    }

}

body.dark-mode .user-button{
    color:#fff;
}

body.dark-mode .user-button:hover{
    color:#D4AF37;
}



/* ==================================================
   HEADER - AJUSTES DE LAYOUT E CONTRASTE
   ================================================== */
.header,
.header.scrolled {
    background: #fff;
    box-shadow: 0 3px 15px rgba(0,0,0,.08);
}
.header .container {
    width: 96%;
    max-width: 1600px;
    min-height: 76px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header .logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 0;
}
.header .logo img { width: 48px; height: auto; }
.header .logo span {
    font-family: 'Cinzel', serif;
    color: #00194E;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.2;
    white-space: nowrap;
}
.header .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(10px, 1.3vw, 24px);
}
.header .navbar a {
    color: #374151;
    font-size: 14px;
    white-space: nowrap;
}
.header .header-buttons {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
}
.header .user-menu { flex: 0 0 auto; }
.header .user-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00194E;
    white-space: nowrap;
}
.header .user-button > span {
    display: inline-block;
    color: #00194E;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header .user-button .bi-chevron-down { color: #00194E; }
.header .user-button:hover > span,
.header .user-button:hover .bi-chevron-down { color: #D4AF37; }
body.dark-mode .header,
body.dark-mode .header.scrolled { background: #020617; }
body.dark-mode .header .logo span,
body.dark-mode .header .navbar a,
body.dark-mode .header .user-button,
body.dark-mode .header .user-button > span,
body.dark-mode .header .user-button .bi-chevron-down { color: #fff; }
body.dark-mode .header .user-button:hover > span { color: #D4AF37; }
@media (max-width: 1250px) {
    .header .navbar { display: none; }
    .header .menu-mobile { display: flex; }
}
@media (max-width: 600px) {
    .header .container { min-height: 70px; gap: 8px; }
    .header .logo img { width: 40px; }
    .header .logo span { font-size: 16px; }
    .header .header-buttons { gap: 8px; }
    .header .user-button > span { display: none; }
    .header .user-button .bi-chevron-down { display: none; }
}

/*==================================================
                END OF FILE
==================================================*/