Renan Blum Advocacia | Direito de Família
    
    
    
    
    
    

    /* ============================================
       RESET GLOBAL
    ============================================ */
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --verde:       #0D2E22;
        --verde-med:   #1A4535;
        --verde-claro: #2A5C47;
        --dourado:     #C9A84C;
        --dourado-lt:  #E2C97E;
        --dourado-dk:  #A8893A;
        --branco:      #FFFFFF;
        --off-white:   #F5F0E8;
        --cinza:       #F0EDE8;
        --txt:         #1A1A1A;
        --txt-med:     #555555;
        --serif:       'Cormorant Garamond', serif;
        --sans:        'Inter', sans-serif;
        --radius:      6px;
        --transition:  all 0.3s ease;
        --shadow:      0 4px 24px rgba(0,0,0,0.08);
        --shadow-h:    0 12px 40px rgba(0,0,0,0.14);
    }

    html { scroll-behavior: smooth; }

    body {
        font-family: var(--sans);
        color: var(--txt);
        background: var(--branco);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

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

    /* ============================================
       UTILITÁRIOS
    ============================================ */
    .container {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 32px;
    }

    .tag {
        display: inline-block;
        font-family: var(--sans);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--dourado);
        margin-bottom: 14px;
    }

    .titulo {
        font-family: var(--serif);
        font-size: clamp(30px, 4vw, 50px);
        font-weight: 600;
        line-height: 1.15;
        color: var(--verde);
    }

    .titulo.claro { color: var(--branco); }

    .linha-ouro {
        width: 56px;
        height: 2px;
        background: var(--dourado);
        margin: 18px 0 28px;
    }

    .linha-ouro.centro { margin-left: auto; margin-right: auto; }

    .texto-corpo {
        font-size: 15px;
        font-weight: 300;
        line-height: 1.85;
        color: var(--txt-med);
    }

    .texto-corpo.claro { color: rgba(255,255,255,0.65); }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 30px;
        border-radius: var(--radius);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.3px;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        border: none;
        white-space: nowrap;
    }

    .btn-ouro {
        background: var(--dourado);
        color: var(--verde);
    }
    .btn-ouro:hover {
        background: var(--dourado-lt);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(201,168,76,0.35);
    }

    .btn-borda-branco {
        background: transparent;
        color: var(--branco);
        border: 1.5px solid rgba(255,255,255,0.55);
    }
    .btn-borda-branco:hover {
        background: rgba(255,255,255,0.09);
        border-color: var(--branco);
        transform: translateY(-2px);
    }

    .btn-borda-ouro {
        background: transparent;
        color: var(--dourado);
        border: 1.5px solid var(--dourado);
    }
    .btn-borda-ouro:hover {
        background: var(--dourado);
        color: var(--verde);
        transform: translateY(-2px);
    }

    /* ============================================
       ANIMAÇÕES SCROLL
    ============================================ */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .reveal.show { opacity: 1; transform: translateY(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; }
    .delay-5 { transition-delay: 0.5s; }
    .delay-6 { transition-delay: 0.6s; }

    /* ============================================
       HEADER
    ============================================ */
    #header {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1000;
        transition: var(--transition);
    }

    #header.scrolled {
        background: rgba(13,46,34,0.96);
        backdrop-filter: blur(18px);
        box-shadow: 0 2px 24px rgba(0,0,0,0.25);
    }

    .header-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0;
    }

    .logo a {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        line-height: 1;
    }
    .logo .nome {
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 700;
        color: var(--branco);
        letter-spacing: 1.5px;
    }
    .logo .sub {
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 3.5px;
        text-transform: uppercase;
        color: var(--dourado);
        margin-top: 3px;
    }

    nav { display: flex; align-items: center; gap: 36px; }

    nav a {
        font-size: 13px;
        color: rgba(255,255,255,0.78);
        text-decoration: none;
        letter-spacing: 0.3px;
        position: relative;
        transition: var(--transition);
    }
    nav a::after {
        content: '';
        position: absolute;
        bottom: -4px; left: 0;
        width: 0; height: 1px;
        background: var(--dourado);
        transition: var(--transition);
    }
    nav a:hover { color: var(--branco); }
    nav a:hover::after { width: 100%; }

    .nav-btn {
        background: var(--dourado) !important;
        color: var(--verde) !important;
        padding: 9px 22px;
        border-radius: var(--radius);
        font-weight: 600 !important;
    }
    .nav-btn::after { display: none !important; }
    .nav-btn:hover {
        background: var(--dourado-lt) !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(201,168,76,0.3);
    }

    /* Hamburguer */
    .hbg {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
        background: none;
        border: none;
    }
    .hbg span {
        display: block;
        width: 24px; height: 1.5px;
        background: var(--branco);
        transition: var(--transition);
    }

    /* Menu mobile */
    .mob-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.72);
        z-index: 998;
    }
    .mob-menu {
        position: fixed;
        top: 0; right: -100%;
        width: min(80vw, 300px);
        height: 100vh;
        background: var(--verde);
        z-index: 999;
        padding: 90px 36px 40px;
        display: flex;
        flex-direction: column;
        gap: 28px;
        transition: right 0.4s ease;
    }
    .mob-menu.aberto { right: 0; }
    .mob-menu a {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--branco);
        text-decoration: none;
        border-bottom: 1px solid rgba(201,168,76,0.2);
        padding-bottom: 14px;
        transition: var(--transition);
    }
    .mob-menu a:hover { color: var(--dourado); }

    /* ============================================
       HERO
    ============================================ */
    #hero {
        min-height: 100vh;
        background: var(--verde);
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .hero-bg {
        position: absolute; inset: 0;
        background:
            radial-gradient(ellipse at 75% 50%, rgba(201,168,76,0.07) 0%, transparent 55%),
            linear-gradient(135deg, #0D2E22 0%, #1A4535 55%, #0D2E22 100%);
    }

    .hero-pontilhado {
        position: absolute; inset: 0;
        opacity: 0.025;
        background-image: radial-gradient(circle, var(--dourado) 1px, transparent 1px);
        background-size: 32px 32px;
    }

    .hero-circulo {
        position: absolute;
        right: -60px; top: 50%;
        transform: translateY(-50%);
        width: 560px; height: 560px;
        border-radius: 50%;
        border: 1px solid rgba(201,168,76,0.09);
        pointer-events: none;
    }
    .hero-circulo::before {
        content: '';
        position: absolute;
        inset: 44px;
        border-radius: 50%;
        border: 1px solid rgba(201,168,76,0.06);
    }

    .hero-conteudo {
        position: relative;
        z-index: 2;
        max-width: 660px;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(201,168,76,0.1);
        border: 1px solid rgba(201,168,76,0.28);
        padding: 8px 18px;
        border-radius: 100px;
        margin-bottom: 30px;
    }
    .hero-badge span {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--dourado);
    }
    .hero-badge::before {
        content: '';
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--dourado);
        flex-shrink: 0;
    }

    .hero-titulo {
        font-family: var(--serif);
        font-size: clamp(38px, 6vw, 68px);
        font-weight: 600;
        color: var(--branco);
        line-height: 1.1;
        margin-bottom: 22px;
    }
    .hero-titulo em { color: var(--dourado); font-style: italic; }

    .hero-sub {
        font-size: 16px;
        font-weight: 300;
        color: rgba(255,255,255,0.68);
        line-height: 1.85;
        margin-bottom: 44px;
        max-width: 500px;
    }

    .hero-acoes { display: flex; gap: 14px; flex-wrap: wrap; }

    .hero-scroll {
        position: absolute;
        bottom: 36px; left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: rgba(255,255,255,0.35);
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
        animation: bounce 2.2s infinite;
    }
    .hero-scroll i { color: var(--dourado); font-size: 13px; }

    @keyframes bounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50%       { transform: translateX(-50%) translateY(7px); }
    }

    /* ============================================
       FAIXA DOURADA
    ============================================ */
    #faixa {
        background: linear-gradient(90deg, var(--dourado-dk), var(--dourado), var(--dourado-lt), var(--dourado));
        padding: 22px 0;
    }

    .faixa-itens {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 48px;
        flex-wrap: wrap;
    }

    .faixa-item { display: flex; align-items: center; gap: 10px; }
    .faixa-item .num {
        font-family: var(--serif);
        font-size: 30px;
        font-weight: 700;
        color: var(--verde);
        line-height: 1;
    }
    .faixa-item .lab {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--verde);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        line-height: 1.4;
    }

    .faixa-sep {
        width: 1px; height: 38px;
        background: rgba(13,46,34,0.18);
    }

    /* ============================================
       SOBRE
    ============================================ */
    #sobre {
        padding: 110px 0;
        background: var(--branco);
    }

    .sobre-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
    }

    .sobre-visual { position: relative; }

    .sobre-foto {
        width: 100%;
        aspect-ratio: 4/5;
        background: linear-gradient(145deg, var(--verde), var(--verde-med));
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .sobre-foto i {
        font-size: 72px;
        color: rgba(201,168,76,0.25);
    }

    .sobre-selo {
        position: absolute;
        bottom: -24px; right: -24px;
        background: var(--dourado);
        padding: 20px 24px;
        border-radius: var(--radius);
        box-shadow: 0 16px 40px rgba(201,168,76,0.28);
        text-align: center;
    }
    .sobre-selo .big { font-family: var(--serif); font-size: 44px; font-weight: 700; color: var(--verde); line-height: 1; }
    .sobre-selo .desc { font-size: 10.5px; font-weight: 600; color: var(--verde); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

    .sobre-texto p { font-size: 15px; font-weight: 300; color: var(--txt-med); line-height: 1.9; margin-bottom: 18px; }

    .valores {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 36px;
    }

    .valor {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .valor-ico {
        width: 38px; height: 38px;
        min-width: 38px;
        border-radius: var(--radius);
        background: rgba(201,168,76,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .valor-ico i { font-size: 15px; color: var(--dourado); }
    .valor h4 { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--verde); margin-bottom: 2px; }
    .valor p { font-size: 12.5px; color: var(--txt-med); line-height: 1.6; }

    /* ============================================
       SERVIÇOS — GRID CORRIGIDO
    ============================================ */
    #servicos {
        padding: 110px 0;
        background: var(--off-white);
    }

    .secao-header {
        text-align: center;
        max-width: 580px;
        margin: 0 auto 64px;
    }
    .secao-header p { font-size: 15px; color: var(--txt-med); line-height: 1.8; }

    /*
       CORREÇÃO PRINCIPAL:
       - Usamos auto-fill com minmax para que os cards se ajustem automaticamente
       - min-content impede sobreposição
       - align-items: stretch garante altura igual em todos os cards
    */
    .servicos-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: stretch;
    }

    .card-servico {
        background: var(--branco);
        border-radius: var(--radius);
        padding: 32px 28px 28px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: var(--transition);
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        /* altura mínima para consistência visual */
        min-height: 280px;
        /* impede qualquer overflow que cause sobreposição */
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* barra dourada animada no topo */
    .card-servico::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--dourado);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .card-servico:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-h);
    }
    .card-servico:hover::before { transform: scaleX(1); }

    /* número decorativo — z-index abaixo do conteúdo */
    .card-num {
        position: absolute;
        top: 16px; right: 20px;
        font-family: var(--serif);
        font-size: 56px;
        font-weight: 700;
        color: rgba(13,46,34,0.04);
        line-height: 1;
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }

    /* todo conteúdo do card acima do número decorativo */
    .card-ico,
    .card-servico h3,
    .card-servico p,
    .card-link {
        position: relative;
        z-index: 1;
    }

    .card-ico {
        width: 52px; height: 52px;
        border-radius: var(--radius);
        background: rgba(13,46,34,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        transition: var(--transition);
        flex-shrink: 0;
    }
    .card-ico i { font-size: 20px; color: var(--verde); transition: var(--transition); }
    .card-servico:hover .card-ico { background: var(--verde); }
    .card-servico:hover .card-ico i { color: var(--dourado); }

    .card-servico h3 {
        font-family: var(--serif);
        font-size: 19px;
        font-weight: 600;
        color: var(--verde);
        margin-bottom: 10px;
        line-height: 1.25;
    }

    .card-servico p {
        font-size: 13.5px;
        color: var(--txt-med);
        line-height: 1.8;
        /* ocupa o espaço disponível empurrando o link para baixo */
        flex: 1;
        margin-bottom: 20px;
    }

    .card-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--dourado);
        text-decoration: none;
        transition: var(--transition);
        margin-top: auto;
        align-self: flex-start;
    }
    .card-link:hover { gap: 10px; }

    /* ============================================
       COMO FUNCIONA
    ============================================ */
    #processo {
        padding: 110px 0;
        background: var(--verde);
        position: relative;
        overflow: hidden;
    }
    #processo::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.05) 0%, transparent 58%);
    }

    .processo-header {
        text-align: center;
        max-width: 540px;
        margin: 0 auto 64px;
    }
    .processo-header p { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.8; }

    .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        position: relative;
    }

    /* linha entre os steps */
    .steps::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 12.5%; right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35), transparent);
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 12px;
    }

    .step-num {
        width: 78px; height: 78px;
        border-radius: 50%;
        background: rgba(201,168,76,0.09);
        border: 1px solid rgba(201,168,76,0.28);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--serif);
        font-size: 26px;
        font-weight: 700;
        color: var(--dourado);
        margin-bottom: 22px;
        position: relative;
        z-index: 1;
        transition: var(--transition);
    }
    .step:hover .step-num { background: var(--dourado); color: var(--verde); }

    .step h4 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--branco); margin-bottom: 10px; }
    .step p { font-size: 13px; color: rgba(255,255,255,0.52); line-height: 1.8; }

    /* ============================================
       DEPOIMENTOS
    ============================================ */
    #depoimentos {
        padding: 110px 0;
        background: var(--branco);
    }

    .dep-header {
        text-align: center;
        max-width: 520px;
        margin: 0 auto 60px;
    }

    .dep-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: stretch;
    }

    .dep-card {
        background: var(--off-white);
        border-radius: var(--radius);
        padding: 32px 28px;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: var(--transition);
    }
    .dep-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
    .dep-card::before {
        content: '"';
        position: absolute;
        top: 14px; left: 22px;
        font-family: var(--serif);
        font-size: 76px;
        color: var(--dourado);
        opacity: 0.22;
        line-height: 1;
    }

    .stars { display: flex; gap: 3px; margin-bottom: 16px; }
    .stars i { color: var(--dourado); font-size: 13px; }

    .dep-card blockquote {
        font-family: var(--serif);
        font-size: 15px;
        font-style: italic;
        color: var(--txt-med);
        line-height: 1.9;
        flex: 1;
        margin-bottom: 22px;
    }

    .dep-autor { display: flex; align-items: center; gap: 12px; margin-top: auto; }
    .dep-avatar {
        width: 42px; height: 42px;
        border-radius: 50%;
        background: var(--verde);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--serif);
        font-size: 16px;
        font-weight: 600;
        color: var(--dourado);
        flex-shrink: 0;
    }
    .dep-info .nome { font-size: 13.5px; font-weight: 600; color: var(--verde); }
    .dep-info .caso { font-size: 12px; color: var(--txt-med); }

    /* ============================================
       MEDIAÇÃO & DIREITO SISTÊMICO
    ============================================ */
    #mediacao {
        padding: 110px 0;
        background: var(--verde);
        position: relative;
        overflow: hidden;
    }
    #mediacao::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 25% 60%, rgba(201,168,76,0.06) 0%, transparent 55%);
    }

    .mediacao-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .mediacao-txt p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.9; margin-bottom: 16px; }

    .sistemico-box {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(201,168,76,0.18);
        border-radius: 8px;
        padding: 40px 36px;
    }
    .sistemico-box p { color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.9; margin-bottom: 14px; }
    .sistemico-box p:last-child { margin-bottom: 0; }

    /* ============================================
       FAQ
    ============================================ */
    #faq {
        padding: 110px 0;
        background: var(--off-white);
    }

    .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1.6fr;
        gap: 80px;
        align-items: start;
    }

    .faq-lado p { font-size: 15px; color: var(--txt-med); line-height: 1.85; margin-bottom: 30px; }

    .faq-lista { display: flex; flex-direction: column; }

    .faq-item { border-bottom: 1px solid rgba(13,46,34,0.1); }

    .faq-btn {
        width: 100%;
        background: none;
        border: none;
        padding: 22px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        cursor: pointer;
        text-align: left;
        font-family: var(--serif);
        font-size: 17px;
        font-weight: 600;
        color: var(--verde);
        transition: var(--transition);
        line-height: 1.3;
    }
    .faq-btn:hover { color: var(--dourado); }

    .faq-ico {
        width: 30px; height: 30px;
        min-width: 30px;
        border-radius: 50%;
        border: 1px solid rgba(201,168,76,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dourado);
        font-size: 13px;
        transition: var(--transition);
    }
    .faq-btn.ativo .faq-ico {
        background: var(--dourado);
        color: var(--verde);
        transform: rotate(45deg);
    }

    .faq-resp {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    .faq-resp.aberta { max-height: 280px; }
    .faq-resp p { font-size: 14px; color: var(--txt-med); line-height: 1.9; padding-bottom: 22px; }

    /* ============================================
       CONTATO
    ============================================ */
    #contato {
        padding: 110px 0;
        background: var(--verde);
        position: relative;
        overflow: hidden;
    }
    #contato::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 15% 55%, rgba(201,168,76,0.06) 0%, transparent 55%);
    }

    .contato-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .contato-txt p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.9; margin-bottom: 44px; }

    .contato-lista { display: flex; flex-direction: column; gap: 22px; }

    .c-item { display: flex; align-items: center; gap: 16px; }
    .c-ico {
        width: 46px; height: 46px;
        min-width: 46px;
        border-radius: var(--radius);
        background: rgba(201,168,76,0.09);
        border: 1px solid rgba(201,168,76,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .c-ico i { color: var(--dourado); font-size: 17px; }
    .c-label { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.38); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1px; }
    .c-valor { font-size: 14.5px; color: var(--branco); }

    .form-box {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(201,168,76,0.15);
        border-radius: 8px;
        padding: 44px 38px;
    }
    .form-box h3 { font-family: var(--serif); font-size: 26px; color: var(--branco); margin-bottom: 6px; }
    .form-box .form-sub { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 30px; }

    .fg { margin-bottom: 18px; }
    .fg label {
        display: block;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.45);
        margin-bottom: 7px;
    }
    .fg input,
    .fg select,
    .fg textarea {
        width: 100%;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: var(--radius);
        padding: 13px 16px;
        font-family: var(--sans);
        font-size: 13.5px;
        color: var(--branco);
        transition: var(--transition);
        outline: none;
        -webkit-appearance: none;
    }
    .fg input::placeholder,
    .fg textarea::placeholder { color: rgba(255,255,255,0.28); }
    .fg select option { background: var(--verde); color: var(--branco); }
    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
        border-color: rgba(201,168,76,0.45);
        background: rgba(255,255,255,0.08);
    }
    .fg textarea { height: 96px; resize: none; }

    .fg-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    /* ============================================
       CTA FINAL
    ============================================ */
    #cta-final {
        padding: 96px 0;
        background: var(--off-white);
        text-align: center;
    }
    .cta-inner { max-width: 580px; margin: 0 auto; }
    .cta-inner p { font-size: 15px; color: var(--txt-med); line-height: 1.85; margin-bottom: 38px; }
    .cta-acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ============================================
       FOOTER
    ============================================ */
    footer {
        background: #06100D;
        padding: 60px 0 28px;
    }

    .footer-top {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 56px;
        padding-bottom: 44px;
        border-bottom: 1px solid rgba(255,255,255,0.055);
        margin-bottom: 28px;
    }

    .footer-brand p { font-size: 13.5px; color: rgba(255,255,255,0.38); line-height: 1.85; margin: 18px 0 22px; }

    .socials { display: flex; gap: 10px; }
    .social-a {
        width: 36px; height: 36px;
        border-radius: var(--radius);
        border: 1px solid rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.45);
        font-size: 13px;
        text-decoration: none;
        transition: var(--transition);
    }
    .social-a:hover { border-color: var(--dourado); color: var(--dourado); }

    .footer-col h4 { font-family: var(--serif); font-size: 16px; color: var(--branco); margin-bottom: 18px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.38); text-decoration: none; transition: var(--transition); }
    .footer-col ul li a:hover { color: var(--dourado); }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .footer-bottom p { font-size: 11.5px; color: rgba(255,255,255,0.22); }

    /* ============================================
       WHATSAPP FLUTUANTE
    ============================================ */
    .wa-float {
        position: fixed;
        bottom: 28px; right: 28px;
        z-index: 900;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .wa-tip {
        background: var(--branco);
        padding: 9px 14px;
        border-radius: 100px;
        font-size: 12.5px;
        color: var(--txt);
        box-shadow: 0 4px 18px rgba(0,0,0,0.14);
        white-space: nowrap;
        opacity: 0;
        transform: translateX(10px);
        transition: var(--transition);
        pointer-events: none;
    }
    .wa-float:hover .wa-tip { opacity: 1; transform: translateX(0); }

    .wa-btn {
        width: 56px; height: 56px;
        border-radius: 50%;
        background: #25D366;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 6px 24px rgba(37,211,102,0.38);
        transition: var(--transition);
        animation: pulso 2.8s infinite;
    }
    .wa-btn:hover { transform: scale(1.1); }
    .wa-btn i { color: var(--branco); font-size: 24px; }

    @keyframes pulso {
        0%   { box-shadow: 0 6px 24px rgba(37,211,102,0.38), 0 0 0 0 rgba(37,211,102,0.28); }
        70%  { box-shadow: 0 6px 24px rgba(37,211,102,0.38), 0 0 0 14px rgba(37,211,102,0); }
        100% { box-shadow: 0 6px 24px rgba(37,211,102,0.38), 0 0 0 0 rgba(37,211,102,0); }
    }

    /* ============================================
       MODAIS
    ============================================ */
    .modal-bg {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.78);
        backdrop-filter: blur(7px);
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .modal-bg.aberto { display: flex; }

    .modal {
        background: var(--branco);
        border-radius: 8px;
        max-width: 660px;
        width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        position: relative;
    }

    .modal-head {
        background: var(--verde);
        padding: 36px 44px 28px;
        position: relative;
    }
    .modal-head .m-tag { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dourado); margin-bottom: 10px; }
    .modal-head h2 { font-family: var(--serif); font-size: 30px; color: var(--branco); }
    .modal-fechar {
        position: absolute;
        top: 16px; right: 16px;
        width: 34px; height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.18);
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--branco);
        font-size: 15px;
        transition: var(--transition);
    }
    .modal-fechar:hover { background: rgba(255,255,255,0.1); }

    .modal-corpo { padding: 36px 44px; }

    .m-sec { margin-bottom: 28px; }
    .m-sec h3 {
        font-family: var(--serif);
        font-size: 18px;
        color: var(--verde);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .m-sec h3 i { color: var(--dourado); font-size: 15px; }
    .m-sec p { font-size: 13.5px; color: var(--txt-med); line-height: 1.9; margin-bottom: 10px; }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 10px;
    }
    .tags span {
        background: rgba(13,46,34,0.06);
        border: 1px solid rgba(13,46,34,0.1);
        padding: 5px 13px;
        border-radius: 100px;
        font-size: 12px;
        color: var(--verde);
        font-weight: 500;
    }

    .modal-rodape {
        background: var(--off-white);
        border-top: 1px solid rgba(0,0,0,0.07);
        padding: 22px 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
    .modal-rodape p { font-size: 13.5px; color: var(--txt-med); }

    /* ============================================
       RESPONSIVO
    ============================================ */
    @media (max-width: 1024px) {
        .servicos-grid { grid-template-columns: repeat(2, 1fr); }
        .sobre-grid { grid-template-columns: 1fr; gap: 56px; }
        .sobre-visual { max-width: 380px; margin: 0 auto; }
        .steps { grid-template-columns: repeat(2, 1fr); gap: 36px; }
        .steps::before { display: none; }
        .dep-grid { grid-template-columns: repeat(2, 1fr); }
        .footer-top { grid-template-columns: 1fr 1fr; }
        .mediacao-grid { gap: 48px; }
    }

    @media (max-width: 768px) {
        nav { display: none; }
        .hbg { display: flex; }

        .faixa-itens { gap: 24px; }
        .faixa-sep { display: none; }

        .servicos-grid { grid-template-columns: 1fr; }
        .dep-grid { grid-template-columns: 1fr; }
        .faq-grid { grid-template-columns: 1fr; gap: 36px; }
        .contato-grid { grid-template-columns: 1fr; gap: 44px; }
        .mediacao-grid { grid-template-columns: 1fr; gap: 40px; }
        .footer-top { grid-template-columns: 1fr; gap: 36px; }

        .fg-row { grid-template-columns: 1fr; }

        .modal-head { padding: 28px 24px 22px; }
        .modal-corpo { padding: 28px 24px; }
        .modal-rodape { padding: 18px 24px; }

        .sobre-selo { right: 0; bottom: -18px; }

        .steps { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 520px) {
        .hero-acoes { flex-direction: column; }
        .cta-acoes { flex-direction: column; align-items: center; }
        .btn { width: 100%; }
        .servicos-grid { grid-template-columns: 1fr; }
    }

    





    
        
            
                
                    RENAN BLUM
                    Advocacia
                
            

            
                Sobre
                Serviços
                Como funciona
                FAQ
                Agendar consulta
            

            
                
            
        
    





    Sobre
    Serviços
    Como funciona
    FAQ
    Contato




    
    
    

    
        
            
                Especialista em Direito de Família
            

            
                Clareza jurídica
                nos momentos que
                mais importam
            

            
                Do divórcio ao inventário, ofereço orientação jurídica humanizada, transparente e focada em resolver a sua situação com eficiência e sem complicações desnecessárias.
            

            
                
                    
                    Agendar consulta
                
                
                    Conhecer os serviços
                    
                
            
        
    

    
        Saiba mais
        
    




    
        
            
                +200
                Casosresolvidos
            
            
            
                +8
                Anos deexperiência
            
            
            
                6
                Áreas deatuação
            
            
            
                98%
                Clientessatisfeitos
            
        
    




    
        

            
                
                    
                
                
                    OAB
                    Inscrito e ativo
                
            

            
                Sobre o escritório
                Advocacia com propósito e atenção a cada detalhe
                

                O Renan Blum Advocacia nasceu com uma missão clara: oferecer orientação jurídica de qualidade no direito de família, tratando cada caso com a seriedade e o cuidado que o momento exige.
                Acredito que as pessoas merecem entender o que está acontecendo no seu processo — em linguagem clara, sem jargões. Meu compromisso é com a sua tranquilidade e com o melhor resultado possível.

                
                    
                        
                        
                            Humanizado
                            Cada situação tratada com empatia e respeito
                        
                    
                    
                        
                        
                            Transparente
                            Clareza total sobre honorários e prazos
                        
                    
                    
                        
                        
                            Resolutivo
                            Foco em soluções práticas e eficientes
                        
                    
                    
                        
                        
                            Confidencial
                            Sigilo absoluto em todas as situações
                        
                    
                
            

        
    




    
        
            Áreas de atuação
            Soluções para cada momento da vida familiar
            
            Do planejamento preventivo à resolução de conflitos, atuo em todas as frentes do direito de família com dedicação integral ao seu caso.
        

        

            
                01
                
                Fim do Relacionamento
                Divórcio consensual ou litigioso, dissolução de união estável e partilha de bens com clareza e proteção dos seus direitos.
                Saiba mais 
            

            
                02
                
                Filhos e Convivência
                Guarda, regulamentação de visitas, alienação parental e tudo que envolve o bem-estar e a convivência com seus filhos.
                Saiba mais 
            

            
                03
                
                Alimentos e Pensão
                Fixação, revisão e execução de pensão alimentícia. Garantindo que os direitos de quem depende sejam sempre cumpridos.
                Saiba mais 
            

            
                04
                
                Planejamento Preventivo
                Pacto antenupcial, regime de bens, testamento e planejamento sucessório. Proteja o que construiu antes que o problema aconteça.
                Saiba mais 
            

            
                05
                
                Herança e Inventário
                Inventário extrajudicial e judicial, partilha e planejamento sucessório. Resolvendo questões de herança com agilidade e sensibilidade.
                Saiba mais 
            

            
                06
                
                Mediação e Direito Sistêmico
                Resolução de conflitos pela mediação e uma abordagem que considera as dinâmicas emocionais e relacionais da família.
                Saiba mais 
            

        
    




    
        
            Como funciona
            Do primeiro contato à resolução
            
            Um processo claro, transparente e sem surpresas. Você sabe o que esperar em cada etapa.
        

        
            
                01
                Consulta inicial
                Conversamos sobre sua situação em detalhes, sem julgamentos. Você entende seus direitos e as opções disponíveis.
            
            
                02
                Análise do caso
                Avalio todos os aspectos jurídicos e elaboro a melhor estratégia para o seu objetivo específico.
            
            
                03
                Acompanhamento
                Cuido de toda a parte burocrática e te mantenho informado sobre cada movimentação do processo.
            
            
                04
                Resolução
                Chegamos ao melhor resultado possível, com segurança jurídica e no menor tempo viável.