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

/* ================= FONTES ================= */
@font-face{
    font-family:"Svarajka";
    src:url("assets/fonts/Svarajka Personal Use Only.woff2") format("woff2");
}

/* ================= BASE ================= */
html{
    scroll-behavior:smooth;
}

body{
    background:#f5f1e8;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
    color:#1a1a1a;
}

/* ================= SEÇÕES ================= */
section{
    padding:80px 20px;
}

/* ================= ANIMAÇÕES (SCROLL) ================= */
.animar{
    opacity:0;
    transform:translateX(-190px);
    transition: all 1.2s ease;
}

.animar.direita{
    transform:translateX(90px);
}

.animar.mostrar{
    opacity:1;
    transform:translateX(0);
}

/* ================= HERO ================= */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.hero-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1200px;
    margin:auto;
    gap:60px;
}

/* ESQUERDA */
.hero-left{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.logo{
    width:200px;
    transform: translateY(-100px);
}

/* TEXTO */
.office-name{
    max-width:500px;
}

.titulo{
    font-family:"Svarajka";
    font-size:100px;
    white-space: nowrap;
}

.slogan{
    font-family:"Svarajka";
    font-size:40px;
    color:#7e766e;
    text-align:right;
    transform: translateX(40px);
}

.advocacia{
    font-family:'Cinzel', serif;
    font-size:40px;
    letter-spacing:5px;
    margin: 20px 0;
    margin-bottom: 50px;
    text-align:center;
}

.latin{
    font-family:"Svarajka";
    font-style:italic;
    font-size:44px;
}

.translated-latin{
    font-family:"Svarajka";
    font-size:40px;
    color:#7e766e;
    text-align:right;
    margin-bottom:30px;
    white-space: nowrap;
    transform: translateX(40px);
}

/* BOTÃO */

.botao{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 26px;
background:#c5a46d;
color:white;
text-decoration:none;
font-size:20px;
border-radius:4px;
transition:0.3s;
}

.botao:hover{
background:#a8844f;
}


/* WHATSAPP */

.whatsapp{
width:22px;
height:22px;
display:flex;
animation:piscando 1.2s infinite;
}

.whatsapp svg{
fill:white;
}

@keyframes piscando{
0%{opacity:1}
50%{opacity:0.2}
100%{opacity:1}
}

/* DIREITA */
.lawyer-photo{
    width:500px;
    padding-left: 90px;
}

/* ================= FAIXA ================= */
.faixa-texto{
    background:#1f1f2e;
    text-align:center;
}

.faixa-container{
    max-width:900px;
    margin:auto;
}

.faixa-container h2{
    color:#fff;
    font-size:28px;
}

.faixa-container p{
    color:#d6d6d6;
    font-size:20px;
}

/* ================= SOBRE ================= */
.sobre{
    background: linear-gradient(135deg, #0f0f0f, #1a1a2e);
}

.sobre-container{
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:1200px;
    margin:auto;
    gap:10px;
    flex-wrap:wrap;
}

.sobre-img img{
    width:500px;
}

.sobre-texto{
    max-width:600px;
    color:#eaeaea;
    padding:60px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.sobre-texto h2{
    font-family: 'cinzel', serif;
    font-size: 40px;
    color:#e8d8b0;
    margin-bottom: 30px;
}

.sobre-texto h3{
    font-size: 30px;
    margin-bottom: 5px;
}

.sobre-texto h4{
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    margin-bottom: 30px;
}

.sobre-texto p{
    font-size: 20px;
    margin-bottom:30px;
}

.sobre-texto ul{
    list-style:none;
}

.sobre-texto li{
    font-size: 20px;
    margin-bottom:10px;
}

/* ================= ÁREAS ================= */
.areas{
    background:#1a1a2e;
    text-align:center;
}

.areas h2{
    font-family: 'cinzel', serif;
    font-size: 40px;
    color:#e8d8b0;
    margin-bottom:40px;
}

.areas-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    max-width:1000px;
    margin:auto;
}

.area-box{
    font-family: 'cinzel', serif;
    font-size: 36px;
    padding: 20px;
    background:#252547;
    color:#fff;
    border-radius:50px;
    transition:0.3s;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.area-box:hover{
    transform:translateY(-5px);
}

/* ================= CONTATO ================= */
.contato{
    background: linear-gradient(135deg, #0f0f0f, #1a1a2e);
    color:#eaeaea;
}

.contato-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1200px;
    margin:auto;
    gap:40px;
    flex-wrap:wrap;
}

.info{
    max-width:700px;
    color:#eaeaea;
    padding:100px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.info h2{
    font-family: 'cinzel', serif;
    color:#e8d8b0;
    font-size: 40px;
    padding-bottom: 20px;
    max-width:400px;
    white-space: nowrap;
}

.info p{
    font-size: 20px;
    margin-bottom:10px;
}

.local-info img{
    width:550px;
    max-width:100%;
    border-radius:10px;
    cursor:pointer;
}

.local-info img:hover{
    transform:scale(1.05);
    transition:0.3s;
}

/* MODAL (TELA TODA) */
#modal{
    display:none;

    position:fixed;
    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,0.9);

    
    justify-content:center;
    align-items:center;

    z-index:9999;
}

/* IMAGEM CENTRAL */
#imgModal{
    max-width:90%;
    max-height:90%;
    border-radius:10px;

    object-fit:contain;
}





/* ================= GALERIA ================= */
.galeria{
    text-align:center;
}

.galeria h2{
    font-family: 'cinzel', serif;
    font-size: 40px;
    color:#0f0f0f;
    margin-bottom:40px;
}

.galeria-container{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.galeria-container img{
    width:450px;
    border-radius: 20px;
    transition:0.3s;
}

.galeria-container img:hover{
    transform:scale(1.10);
}

#modalspace{
    display:none;

    position:fixed;
    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,0.9);

    
    justify-content:center;
    align-items:center;

    z-index:9999;
}

/* IMAGEM CENTRAL */
#imgModalspace{
    max-width:90%;
    max-height:90%;
    border-radius:10px;

    object-fit:contain;
}

/* ============================== */
/* BOTÃO WHATSAPP ANIMADO */
/* ============================== */

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25d366;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 rgba(37,211,102, 0.7);
    animation: pulse 2s infinite;
    transition: 0.3s ease;
    z-index: 999;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Efeito pulsar */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(37,211,102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37,211,102, 0);
    }
}

/* Pequena vibração simulando "tocando" */
.whatsapp-float svg {
    animation: ring 2s infinite;
}

@keyframes ring {
    0% { transform: rotate(0); }
    5% { transform: rotate(-15deg); }
    10% { transform: rotate(10deg); }
    15% { transform: rotate(-10deg); }
    20% { transform: rotate(6deg); }
    25% { transform: rotate(-4deg); }
    30% { transform: rotate(0); }
    100% { transform: rotate(0); }
}



/* ================= FOOTER ================= */
footer{
    text-align:center;
    padding:20px;
    background: linear-gradient(135deg, #0f0f0f, #1a1a2e);
    color:#ccc;
}

/* ================= RESPONSIVO ================= */
@media (max-width:768px){

    .hero-container{
        flex-direction:column;
        text-align:center;
    }

    .hero-left{
        flex-direction:column;
        align-items:center;
    }

    .titulo{
        font-size:90px;
    }

    .areas-container{
        grid-template-columns:1fr;
    }

    .contato-container{
        flex-direction:column;
        text-align:center;
    }
}

/* ================= RESPONSIVO ================= */
@media (max-width:1024px){

    .hero-container{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

    .hero-left{
        flex-direction:column;
        align-items:center;
    }

    .logo{
        width:150px;
        transform:none;
    }

    .titulo{
        font-size:70px;
        white-space:normal;
    }

    .slogan{
        font-size:30px;
        transform:none;
        text-align:center;
    }

    .translated-latin{
        transform:none;
        text-align:center;
        white-space:normal;
    }

    .lawyer-photo{
        width:100%;
        max-width:400px;
        padding-left:0;
    }

    .sobre-texto{
        padding:30px;
    }

    .info{
        padding:40px;
    }

    .local-info img{
        width:100%;
    }

    .galeria-container img{
        width:100%;
        max-width:350px;
    }

    .areas-container{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){

    .hero-container{
        flex-direction:column;
        text-align:center;
    }

    .hero-left{
        flex-direction:column;
        align-items:center;
    }

    .titulo{
        font-size:50px;
    }

    .slogan{
        font-size:24px;
    }

    .advocacia{
        font-size:28px;
    }

    .latin{
        font-size:28px;
    }

    .translated-latin{
        font-size:24px;
    }

    .areas-container{
        grid-template-columns:1fr;
    }

    .contato-container{
        flex-direction:column;
        text-align:center;
    }

    .info h2{
        white-space:normal;
    }
}

@media (max-width:480px){

    .titulo{
        font-size:38px;
    }

    .slogan{
        font-size:20px;
    }

    .advocacia{
        font-size:22px;
        letter-spacing:2px;
    }

    .botao{
        font-size:16px;
        padding:12px 20px;
    }

    .area-box{
        font-size:24px;
        border-radius:20px;
    }

    .sobre-texto h2{
        font-size:28px;
    }

    .sobre-texto h3{
        font-size:22px;
    }

    .sobre-texto p,
    .sobre-texto li{
        font-size:16px;
    }

    .info{
        padding:20px;
    }

    .info p{
        font-size:16px;
    }
}

/* ================= CORREÇÃO OVERFLOW MOBILE ================= */
@media (max-width:768px){

    /* GARANTE QUE NADA ESTOURE A TELA */
    html, body{
        overflow-x:hidden;
    }

    /* FOTO DO ADVOGADO */
    .lawyer-photo{
        width:100%;
        max-width:100%;
        padding-left:0;
    }

    /* LOGO */
    .logo{
        max-width:100%;
        transform:none;
    }

    /* TEXTOS QUE ESTÃO SAINDO */
    .slogan,
    .translated-latin{
        transform:none;
        text-align:center;
        white-space:normal;
    }

    /* IMAGENS EM GERAL */
    img{
        max-width:100%;
        height:auto;
    }

    /* BOTÃO WHATSAPP (não deixar colar na borda) */
    .whatsapp-float{
        right:15px;
        bottom:15px;
    }
}