/* ═══ DESIGN SYSTEM ═══ */ :root { /* Paleta Petróleo + Marfim — fundo claro, seções de destaque em petróleo escuro */ --cor-fundo-principal: #F2EDE4; --cor-fundo-secundario: #E8E2D6; --cor-fundo-terciario: #DDD6C8; --cor-fundo-card: #FFFFFF; --cor-borda: rgba(26,52,64,0.10); --cor-borda-hover: rgba(26,52,64,0.22); --cor-texto-principal: #1A3440; --cor-texto-secundario: rgba(26,52,64,0.60); --cor-texto-terciario: rgba(26,52,64,0.38); --cor-dourado: #C9A94E; --cor-dourado-claro: #E8D5A3; --cor-dourado-escuro: #A68A3A; --cor-dourado-bg: rgba(201,169,78,0.10); --cor-dourado-bg-hover: rgba(201,169,78,0.18); --cor-petroleo: #1A3440; --cor-petroleo-medio: #203E4E; --cor-azul-profundo: #0D2028; --font-titulo: 'Cormorant Garamond', Georgia, serif; --font-corpo: 'Raleway', 'Helvetica Neue', Arial, sans-serif; --transicao-rapida: 0.2s cubic-bezier(0.4,0,0.2,1); --transicao-media: 0.35s cubic-bezier(0.4,0,0.2,1); --transicao-lenta: 0.5s cubic-bezier(0.4,0,0.2,1); --largura-maxima: 1200px; --header-altura: 88px; } /* Modo escuro opcional — activa com data-theme="dark" no */ [data-ione="escuro"] { --cor-fundo-principal: #1E2B3C; --cor-fundo-secundario: #253648; --cor-fundo-terciario: #2C4058; --cor-fundo-card: rgba(255,255,255,0.04); --cor-borda: rgba(201,169,78,0.10); --cor-borda-hover: rgba(201,169,78,0.22); --cor-texto-principal: #EAE2D2; --cor-texto-secundario: rgba(234,226,210,0.62); --cor-texto-terciario: rgba(234,226,210,0.38); --cor-dourado: #C9A94E; --cor-dourado-claro: #E8D5A3; --cor-dourado-escuro: #A68A3A; --cor-dourado-bg: rgba(201,169,78,0.08); --cor-dourado-bg-hover: rgba(201,169,78,0.15); --cor-petroleo: #1A3440; --cor-petroleo-medio: #203E4E; --cor-azul-profundo: #0D2028; } /* Contexto escuro — seções de destaque (hero, stats, CTA, footer) */ .secao-petroleo { --cor-fundo-principal: #1A3440; --cor-fundo-secundario: #203E4E; --cor-fundo-card: rgba(255,255,255,0.05); --cor-borda: rgba(201,169,78,0.14); --cor-borda-hover: rgba(201,169,78,0.28); --cor-texto-principal: #F2EDE4; --cor-texto-secundario: rgba(242,237,228,0.62); --cor-texto-terciario: rgba(242,237,228,0.38); background: var(--cor-fundo-principal); color: var(--cor-texto-principal); } /* ═══ RESET ═══ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font-corpo);background:var(--cor-fundo-principal);color:var(--cor-texto-principal);line-height:1.6;overflow-x:hidden;transition:background-color var(--transicao-lenta),color var(--transicao-lenta);-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit;transition:color var(--transicao-rapida)} ul,ol{list-style:none} button{cursor:pointer;border:none;background:none;font-family:inherit} /* ═══ HEADER (aprovado) ═══ */ .header__filete{height:2px;background:linear-gradient(90deg,transparent 0%,var(--cor-dourado-escuro) 20%,var(--cor-dourado) 50%,var(--cor-dourado-escuro) 80%,transparent 100%);opacity:0.5} .header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all var(--transicao-media);--cor-texto-principal:#F2EDE4;--cor-texto-secundario:rgba(242,237,228,0.65);--cor-texto-terciario:rgba(242,237,228,0.38);--cor-borda:rgba(201,169,78,0.14);--cor-borda-hover:rgba(201,169,78,0.28)} .header__barra{height:var(--header-altura);display:flex;align-items:center;justify-content:space-between;padding:0 48px;max-width:var(--largura-maxima);margin:0 auto} .header--scrolled{background:rgba(26,52,64,0.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(201,169,78,0.15)} [data-ione="escuro"] .header--scrolled{background:rgba(30,43,60,0.92)} .header__logo{display:flex;align-items:center;gap:16px;z-index:1001} .header__logo-texto{font-family:var(--font-titulo);font-size:28px;font-weight:600;color:var(--cor-dourado);letter-spacing:0.5px;line-height:1.1;transition:color var(--transicao-rapida)} .header__logo-subtexto{font-family:var(--font-corpo);font-size:10px;font-weight:400;letter-spacing:4px;text-transform:uppercase;color:var(--cor-texto-terciario);margin-top:3px} .header__logo:hover .header__logo-texto{color:var(--cor-dourado-claro)} .header__logo-separador{width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--cor-borda-hover),transparent);margin-left:4px} .header__nav{display:flex;align-items:center;gap:24px} .header__nav-link{font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--cor-texto-secundario);padding:8px 0;position:relative;transition:color var(--transicao-rapida)} .header__nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--cor-dourado),var(--cor-dourado-claro));transition:width var(--transicao-media)} .header__nav-link:hover{color:var(--cor-dourado)} .header__nav-link:hover::after{width:100%} .header__nav-link--ativo{color:var(--cor-dourado)} .header__nav-link--ativo::after{width:100%} .header__cta{font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--cor-fundo-principal);background:linear-gradient(135deg,var(--cor-dourado),var(--cor-dourado-escuro));padding:10px 24px;border-radius:2px;margin-left:8px;transition:all var(--transicao-media);position:relative;overflow:hidden} .header__cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:left 0.5s ease} .header__cta:hover::before{left:100%} .header__cta:hover{box-shadow:0 4px 20px rgba(201,169,78,0.25);transform:translateY(-1px)} [data-ione="escuro"] .header__cta{color:#EAE2D2} .header__theme-toggle{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cor-texto-secundario);border:1px solid var(--cor-borda);transition:all var(--transicao-rapida);margin-left:16px;font-size:16px;flex-shrink:0} .header__theme-toggle:hover{color:var(--cor-dourado);border-color:var(--cor-borda-hover);background:var(--cor-dourado-bg)} .header__theme-toggle .icone-sol{display:none} .header__theme-toggle .icone-lua{display:block} [data-ione="escuro"] .header__theme-toggle .icone-sol{display:block} [data-ione="escuro"] .header__theme-toggle .icone-lua{display:none} .header__hamburguer{display:none;flex-direction:column;justify-content:center;align-items:center;width:38px;height:38px;z-index:1001;gap:6px} .header__hamburguer-linha{width:22px;height:1.5px;background:var(--cor-texto-principal);transition:all var(--transicao-media);transform-origin:center} .header__hamburguer--aberto .header__hamburguer-linha:nth-child(1){transform:rotate(45deg) translate(5px,5px);background:var(--cor-dourado)} .header__hamburguer--aberto .header__hamburguer-linha:nth-child(2){opacity:0;transform:scaleX(0)} .header__hamburguer--aberto .header__hamburguer-linha:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);background:var(--cor-dourado)} /* Menu Mobile */ .menu-mobile{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:var(--cor-fundo-principal);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all var(--transicao-lenta)} .menu-mobile--aberto{opacity:1;visibility:visible} .menu-mobile::before{content:'';position:absolute;left:48px;top:20%;bottom:20%;width:1px;background:linear-gradient(180deg,transparent,rgba(201,169,78,0.2),transparent)} .menu-mobile__nav{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-left:72px} .menu-mobile__link{font-family:var(--font-titulo);font-size:32px;font-weight:400;color:var(--cor-texto-secundario);transition:all var(--transicao-media);position:relative;transform:translateX(-20px);opacity:0} .menu-mobile--aberto .menu-mobile__link{transform:translateX(0);opacity:1} .menu-mobile--aberto .menu-mobile__link:nth-child(1){transition-delay:0.1s} .menu-mobile--aberto .menu-mobile__link:nth-child(2){transition-delay:0.15s} .menu-mobile--aberto .menu-mobile__link:nth-child(3){transition-delay:0.2s} .menu-mobile--aberto .menu-mobile__link:nth-child(4){transition-delay:0.25s} .menu-mobile--aberto .menu-mobile__link:nth-child(5){transition-delay:0.3s} .menu-mobile--aberto .menu-mobile__link:nth-child(6){transition-delay:0.35s} .menu-mobile--aberto .menu-mobile__link:nth-child(7){transition-delay:0.4s} .menu-mobile__link:hover{color:var(--cor-dourado)} .menu-mobile__info{position:absolute;bottom:40px;left:72px;right:48px} .menu-mobile__info-texto{font-size:11px;color:var(--cor-texto-terciario);letter-spacing:1px;line-height:1.8} .menu-mobile__info-texto a{color:var(--cor-dourado)} /* ═══════════════════════════════════════ SEÇÃO 1 — HERO BANNER ═══════════════════════════════════════ */ .hero{ min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:var(--header-altura) 0 0; background:var(--cor-petroleo); color:#F2EDE4; --cor-texto-principal:#F2EDE4; --cor-texto-secundario:rgba(242,237,228,0.62); --cor-texto-terciario:rgba(242,237,228,0.38); --cor-borda:rgba(201,169,78,0.14); --cor-borda-hover:rgba(201,169,78,0.28); --cor-fundo-card:rgba(255,255,255,0.05); } /* Gradientes e efeitos de fundo */ .hero::before{ content:'';position:absolute;top:0;left:0;right:0;bottom:0; background: radial-gradient(ellipse at 75% 25%, rgba(201,169,78,0.04) 0%, transparent 50%), radial-gradient(ellipse at 20% 75%, rgba(20,32,56,0.4) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(201,169,78,0.015) 0%, transparent 70%); pointer-events:none; } /* Linha decorativa vertical esquerda */ .hero__linha-lateral{ position:absolute;left:48px;top:25%;bottom:25%; width:1px; background:linear-gradient(180deg,transparent,rgba(201,169,78,0.2),transparent); } /* Conteúdo do Hero */ .hero__conteudo{ max-width:var(--largura-maxima); margin:0 auto; padding:0 48px 0 80px; position:relative;z-index:1; width:100%; } .hero__badge{ display:inline-block; font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase; color:var(--cor-dourado); background:var(--cor-dourado-bg); border:1px solid rgba(201,169,78,0.12); padding:8px 20px;border-radius:2px; margin-bottom:28px; opacity:0;animation:heroFadeUp 0.8s ease 0.3s forwards; } .hero__linha-dourada{ width:40px;height:1px; background:linear-gradient(90deg,var(--cor-dourado),var(--cor-dourado-claro)); margin-bottom:24px; opacity:0;animation:heroFadeUp 0.8s ease 0.4s forwards; } .hero__titulo{ font-family:var(--font-titulo); font-size:clamp(40px,5.5vw,72px); font-weight:400; line-height:1.1; color:var(--cor-texto-principal); margin-bottom:24px; max-width:700px; opacity:0;animation:heroFadeUp 0.8s ease 0.5s forwards; } .hero__titulo em{ font-style:italic; color:var(--cor-dourado); } .hero__subtitulo{ font-size:15px;font-weight:300; color:var(--cor-texto-secundario); line-height:1.8;letter-spacing:0.3px; max-width:520px; margin-bottom:40px; opacity:0;animation:heroFadeUp 0.8s ease 0.6s forwards; } .hero__botoes{ display:flex;gap:16px;flex-wrap:wrap; opacity:0;animation:heroFadeUp 0.8s ease 0.7s forwards; } .hero__btn-primario{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase; color:#1A3440; background:linear-gradient(135deg,var(--cor-dourado),var(--cor-dourado-escuro)); padding:16px 36px;border-radius:2px; transition:all var(--transicao-media); position:relative;overflow:hidden; } .hero__btn-primario::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:left 0.5s ease} .hero__btn-primario:hover::before{left:100%} .hero__btn-primario:hover{box-shadow:0 6px 24px rgba(201,169,78,0.3);transform:translateY(-2px)} .hero__btn-secundario{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase; color:var(--cor-dourado); border:1px solid rgba(201,169,78,0.3); padding:16px 36px;border-radius:2px; transition:all var(--transicao-media); } .hero__btn-secundario:hover{border-color:var(--cor-dourado);background:var(--cor-dourado-bg)} /* Indicador de scroll */ .hero__scroll{ position:absolute;bottom:40px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:8px; color:var(--cor-texto-terciario);font-size:9px;letter-spacing:3px;text-transform:uppercase; animation:pulsar 2.5s ease-in-out infinite; } .hero__scroll-linha{width:1px;height:40px;background:linear-gradient(180deg,var(--cor-dourado),transparent)} /* Elemento decorativo: círculos sutis */ .hero__circulo{ position:absolute;border:1px solid rgba(201,169,78,0.04);border-radius:50%; pointer-events:none; } .hero__circulo--1{width:500px;height:500px;top:-100px;right:-100px} .hero__circulo--2{width:300px;height:300px;bottom:-50px;right:100px} .hero__circulo--3{width:200px;height:200px;top:30%;right:20%} @keyframes heroFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes pulsar{0%,100%{opacity:0.3}50%{opacity:0.7}} /* ═══════════════════════════════════════ SEÇÃO 2 — APRESENTAÇÃO DO ESCRITÓRIO ═══════════════════════════════════════ */ .apresentacao{ padding:120px 48px; position:relative; background:var(--cor-fundo-secundario); transition:background-color var(--transicao-lenta); } /* Filete separador */ .secao__filete{ height:1px; background:linear-gradient(90deg,transparent,var(--cor-borda-hover),var(--cor-dourado),var(--cor-borda-hover),transparent); opacity:0.3; } .apresentacao__inner{ max-width:var(--largura-maxima);margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:80px; align-items:center; } .apresentacao__rotulo{ font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase; color:var(--cor-dourado);margin-bottom:20px; } .apresentacao__titulo{ font-family:var(--font-titulo);font-size:clamp(30px,3.5vw,44px);font-weight:400; color:var(--cor-texto-principal);line-height:1.2;margin-bottom:24px; } .apresentacao__titulo em{font-style:italic;color:var(--cor-dourado)} .apresentacao__texto{ font-size:15px;font-weight:300;color:var(--cor-texto-secundario); line-height:1.9;letter-spacing:0.3px;margin-bottom:16px; } .apresentacao__linha{ width:40px;height:1px; background:linear-gradient(90deg,var(--cor-dourado),var(--cor-dourado-claro)); margin:32px 0; } .apresentacao__assinatura{ font-family:var(--font-titulo);font-size:18px;font-weight:400; font-style:italic;color:var(--cor-dourado);letter-spacing:0.5px; } /* Lado direito: card com valores */ .apresentacao__valores{ display:flex;flex-direction:column;gap:20px; } .apresentacao__valor-card{ padding:28px 32px; background:var(--cor-fundo-card); border:1px solid var(--cor-borda);border-radius:4px; transition:all var(--transicao-media); position:relative;overflow:hidden; } .apresentacao__valor-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--cor-dourado),transparent); opacity:0;transition:opacity var(--transicao-media); } .apresentacao__valor-card:hover{ border-color:var(--cor-borda-hover); background:var(--cor-dourado-bg); transform:translateX(4px); } .apresentacao__valor-card:hover::before{opacity:1} .apresentacao__valor-titulo{ font-family:var(--font-titulo);font-size:22px;font-weight:500; color:var(--cor-dourado);margin-bottom:8px; } .apresentacao__valor-desc{ font-size:13px;font-weight:300;color:var(--cor-texto-secundario); line-height:1.7;letter-spacing:0.3px; } /* ═══════════════════════════════════════ SEÇÃO 3 — ÁREAS DE ATUAÇÃO ═══════════════════════════════════════ */ .areas{ padding:120px 48px; position:relative; background:var(--cor-fundo-principal); transition:background-color var(--transicao-lenta); } .areas::before{ content:'';position:absolute;top:0;left:0;right:0;height:300px; background:radial-gradient(ellipse at 50% 0%,rgba(201,169,78,0.02) 0%,transparent 70%); pointer-events:none; } .areas__inner{max-width:var(--largura-maxima);margin:0 auto;position:relative;z-index:1} .areas__cabecalho{text-align:center;margin-bottom:72px} .areas__rotulo{ font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase; color:var(--cor-dourado);margin-bottom:16px; } .areas__titulo{ font-family:var(--font-titulo);font-size:clamp(30px,3.5vw,44px);font-weight:400; color:var(--cor-texto-principal);line-height:1.2;margin-bottom:12px; } .areas__subtitulo{ font-size:14px;font-weight:300;color:var(--cor-texto-secundario); letter-spacing:0.5px; } /* Grid de áreas */ .areas__grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; } .areas__card{ padding:36px 28px; background:var(--cor-fundo-card); border:1px solid var(--cor-borda);border-radius:4px; transition:all var(--transicao-media); position:relative;overflow:hidden; text-align:left; } .areas__card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--cor-dourado),var(--cor-dourado-claro)); transform:scaleX(0);transform-origin:left; transition:transform var(--transicao-media); } .areas__card:hover{ border-color:var(--cor-borda-hover); background:var(--cor-dourado-bg); transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,0.15); } .areas__card:hover::before{transform:scaleX(1)} /* Card carro-chefe (destaque) */ .areas__card--destaque{ grid-column:span 2; background:linear-gradient(135deg,var(--cor-azul-profundo),rgba(20,32,56,0.6)); border-color:rgba(201,169,78,0.15); padding:44px 36px; } .areas__card--destaque:hover{ background:linear-gradient(135deg,var(--cor-azul-profundo),rgba(20,32,56,0.8)); } [data-theme="light"] .areas__card--destaque{ background:linear-gradient(135deg,rgba(15,23,38,0.06),rgba(139,111,46,0.06)); } .areas__card-icone{ width:44px;height:44px; display:flex;align-items:center;justify-content:center; border-radius:4px;margin-bottom:20px; background:var(--cor-dourado-bg); border:1px solid rgba(201,169,78,0.1); color:var(--cor-dourado); } .areas__card-titulo{ font-family:var(--font-titulo);font-size:20px;font-weight:500; color:var(--cor-texto-principal);margin-bottom:10px;line-height:1.3; } .areas__card--destaque .areas__card-titulo{font-size:24px} .areas__card-desc{ font-size:13px;font-weight:300;color:var(--cor-texto-secundario); line-height:1.7;letter-spacing:0.2px; } .areas__card-badge{ display:inline-block;font-size:8px;font-weight:600;letter-spacing:2px; text-transform:uppercase;color:var(--cor-dourado); background:var(--cor-dourado-bg);border:1px solid rgba(201,169,78,0.15); padding:4px 12px;border-radius:2px;margin-bottom:16px; } .areas__card-seta{ display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase; color:var(--cor-dourado);margin-top:16px; transition:gap var(--transicao-media); } .areas__card:hover .areas__card-seta{gap:10px} /* ═══════════════════════════════════════ SEÇÃO 4 — NÚMEROS DO ESCRITÓRIO ═══════════════════════════════════════ */ .numeros{ padding:100px 48px; background:linear-gradient(180deg,var(--cor-fundo-secundario),var(--cor-fundo-principal)); position:relative; transition:background var(--transicao-lenta); } .numeros__inner{max-width:var(--largura-maxima);margin:0 auto} .numeros__grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:40px; text-align:center; } .numeros__item{ padding:40px 20px;position:relative; } /* Separador vertical entre itens */ .numeros__item:not(:last-child)::after{ content:'';position:absolute;right:0;top:20%;bottom:20%; width:1px; background:linear-gradient(180deg,transparent,var(--cor-borda-hover),transparent); } .numeros__valor{ font-family:var(--font-titulo);font-size:clamp(40px,4vw,60px);font-weight:300; color:var(--cor-dourado);line-height:1;margin-bottom:12px; } .numeros__valor span{ font-size:0.5em;color:var(--cor-dourado-claro);vertical-align:super; } .numeros__rotulo{ font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase; color:var(--cor-texto-secundario);line-height:1.5; } /* ═══════════════════════════════════════ SEÇÃO 5 — DESTAQUES (preview) ═══════════════════════════════════════ */ .destaques{ padding:120px 48px; background:var(--cor-fundo-principal); position:relative; transition:background-color var(--transicao-lenta); } .destaques__inner{max-width:var(--largura-maxima);margin:0 auto} .destaques__cabecalho{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:56px;flex-wrap:wrap;gap:24px; } .destaques__rotulo{ font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase; color:var(--cor-dourado);margin-bottom:12px; } .destaques__titulo{ font-family:var(--font-titulo);font-size:clamp(28px,3vw,40px);font-weight:400; color:var(--cor-texto-principal);line-height:1.2; } .destaques__ver-todos{ font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase; color:var(--cor-dourado); border:1px solid rgba(201,169,78,0.3); padding:12px 28px;border-radius:2px; transition:all var(--transicao-media); white-space:nowrap; } .destaques__ver-todos:hover{border-color:var(--cor-dourado);background:var(--cor-dourado-bg)} .destaques__grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } .destaques__card{ padding:36px 28px; background:var(--cor-fundo-card); border:1px solid var(--cor-borda);border-radius:4px; transition:all var(--transicao-media); display:flex;flex-direction:column; text-decoration:none;color:inherit;cursor:pointer; } .destaques__card:hover{ border-color:var(--cor-borda-hover); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.1); } .destaques__card-tipo{ font-size:9px;font-weight:500;letter-spacing:3px;text-transform:uppercase; color:var(--cor-dourado);margin-bottom:16px; padding-bottom:12px;border-bottom:1px solid var(--cor-borda); } .destaques__card-titulo{ font-family:var(--font-titulo);font-size:20px;font-weight:500; color:var(--cor-texto-principal);line-height:1.35;margin-bottom:12px; flex:1; } .destaques__card-resumo{ font-size:13px;font-weight:300;color:var(--cor-texto-secundario); line-height:1.7;letter-spacing:0.2px;margin-bottom:20px; } .destaques__card-link{ font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase; color:var(--cor-dourado); display:inline-flex;align-items:center;gap:6px; transition:gap var(--transicao-media); } .destaques__card:hover .destaques__card-link{gap:10px} /* ═══════════════════════════════════════ SEÇÃO 6 — CTA FINAL ═══════════════════════════════════════ */ .cta-final{ padding:100px 48px; background:linear-gradient(160deg,var(--cor-azul-profundo),#0D1726); text-align:center; position:relative;overflow:hidden; } [data-theme="light"] .cta-final{ background:linear-gradient(160deg,rgba(15,23,38,0.06),rgba(139,111,46,0.04)); } .cta-final::before{ content:'';position:absolute;top:0;left:0;right:0;bottom:0; background:radial-gradient(ellipse at 50% 50%,rgba(201,169,78,0.04) 0%,transparent 60%); } .cta-final__inner{max-width:650px;margin:0 auto;position:relative;z-index:1} .cta-final__linha{ width:40px;height:1px;margin:0 auto 28px; background:linear-gradient(90deg,var(--cor-dourado),var(--cor-dourado-claro)); } .cta-final__titulo{ font-family:var(--font-titulo);font-size:clamp(28px,3.5vw,42px);font-weight:400; color:var(--cor-texto-principal);line-height:1.25;margin-bottom:16px; } .cta-final__titulo em{font-style:italic;color:var(--cor-dourado)} .cta-final__texto{ font-size:14px;font-weight:300;color:var(--cor-texto-secundario); line-height:1.8;letter-spacing:0.3px;margin-bottom:40px;max-width:480px;margin-left:auto;margin-right:auto; } .cta-final__botoes{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .cta-final__btn-wpp{ display:inline-flex;align-items:center;gap:10px; font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase; color:#fff;background:#25D366; padding:16px 36px;border-radius:2px; transition:all var(--transicao-media); } .cta-final__btn-wpp:hover{background:#1da851;box-shadow:0 6px 24px rgba(37,211,102,0.3);transform:translateY(-2px)} .cta-final__btn-contato{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase; color:var(--cor-dourado);border:1px solid rgba(201,169,78,0.3); padding:16px 36px;border-radius:2px; transition:all var(--transicao-media); } .cta-final__btn-contato:hover{border-color:var(--cor-dourado);background:var(--cor-dourado-bg)} /* ═══ FOOTER (aprovado) ═══ */ .footer__filete{height:1px;background:linear-gradient(90deg,transparent 0%,var(--cor-borda-hover) 20%,var(--cor-dourado) 50%,var(--cor-borda-hover) 80%,transparent 100%);opacity:0.4} .footer{background:var(--cor-fundo-secundario);padding:96px 48px 0;position:relative;transition:background-color var(--transicao-lenta)} .footer::before{content:'';position:absolute;top:0;left:0;right:0;height:200px;background:radial-gradient(ellipse at 50% 0%,rgba(201,169,78,0.03) 0%,transparent 70%);pointer-events:none} .footer__conteudo{max-width:var(--largura-maxima);margin:0 auto;position:relative;z-index:1} .footer__topo{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:64px;padding-bottom:48px;border-bottom:1px solid var(--cor-borda);flex-wrap:wrap;gap:32px} .footer__identidade{max-width:380px} .footer__logo-texto{font-family:var(--font-titulo);font-size:34px;font-weight:600;color:var(--cor-dourado);margin-bottom:10px;line-height:1.2} .footer__slogan{font-family:var(--font-titulo);font-size:16px;font-weight:400;font-style:italic;color:var(--cor-texto-secundario);margin-bottom:24px;line-height:1.5} .footer__descricao{font-size:13px;font-weight:300;color:var(--cor-texto-terciario);line-height:1.8;letter-spacing:0.3px} .footer__redes{display:flex;gap:16px;margin-top:24px} .footer__rede-link{width:40px;height:40px;border-radius:50%;border:1px solid var(--cor-borda);display:flex;align-items:center;justify-content:center;color:var(--cor-texto-secundario);transition:all var(--transicao-rapida)} .footer__rede-link:hover{border-color:var(--cor-dourado);color:var(--cor-dourado);background:var(--cor-dourado-bg);transform:translateY(-2px)} .footer__colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-bottom:64px} .footer__coluna-titulo{font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--cor-dourado);margin-bottom:24px;position:relative;padding-bottom:16px} .footer__coluna-titulo::after{content:'';position:absolute;bottom:0;left:0;width:24px;height:1px;background:var(--cor-dourado);opacity:0.5} .footer__coluna-lista{display:flex;flex-direction:column;gap:8px} .footer__coluna-link{font-size:13px;font-weight:300;color:var(--cor-texto-secundario);letter-spacing:0.3px;padding:4px 0;transition:all var(--transicao-rapida);position:relative;display:inline-block;width:fit-content} .footer__coluna-link::after{content:'';position:absolute;bottom:2px;left:0;width:0;height:1px;background:var(--cor-dourado);transition:width var(--transicao-media)} .footer__coluna-link:hover{color:var(--cor-dourado-claro)} .footer__coluna-link:hover::after{width:100%} .footer__contato-item{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px} .footer__contato-icone{width:18px;height:18px;flex-shrink:0;color:var(--cor-dourado);opacity:0.7;margin-top:2px} .footer__contato-texto{font-size:13px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.6;letter-spacing:0.3px} .footer__contato-texto a{color:var(--cor-texto-secundario);transition:color var(--transicao-rapida)} .footer__contato-texto a:hover{color:var(--cor-dourado-claro)} .footer__barra-inferior{border-top:1px solid var(--cor-borda);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} .footer__copyright{font-size:11px;font-weight:300;color:var(--cor-texto-terciario);letter-spacing:0.5px} .footer__copyright strong{color:var(--cor-texto-secundario);font-weight:500} .footer__links-legais{display:flex;gap:24px} .footer__link-legal{font-size:11px;font-weight:300;color:var(--cor-texto-terciario);letter-spacing:0.5px;transition:color var(--transicao-rapida)} .footer__link-legal:hover{color:var(--cor-dourado)} /* ═══ WHATSAPP + VOLTAR TOPO ═══ */ .whatsapp-flutuante{position:fixed;bottom:28px;right:28px;z-index:900;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.35);transition:all var(--transicao-media);color:#fff} .whatsapp-flutuante:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 6px 28px rgba(37,211,102,0.45)} .whatsapp-flutuante::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:#25D366;animation:whatsapp-pulso 2.5s ease-in-out infinite;z-index:-1} @keyframes whatsapp-pulso{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.25);opacity:0}} .voltar-topo{position:fixed;bottom:28px;right:96px;z-index:900;width:42px;height:42px;border-radius:50%;background:var(--cor-fundo-terciario);border:1px solid var(--cor-borda);display:flex;align-items:center;justify-content:center;color:var(--cor-texto-secundario);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transicao-media)} .voltar-topo--visivel{opacity:1;visibility:visible;transform:translateY(0)} .voltar-topo:hover{border-color:var(--cor-dourado);color:var(--cor-dourado);background:var(--cor-dourado-bg)} /* ═══ RESPONSIVIDADE ═══ */ @media(max-width:1024px){ .header__nav-link{font-size:10px;letter-spacing:1.5px} .header__nav{gap:16px} .header__cta{display:none} .areas__grid{grid-template-columns:repeat(2,1fr)} .areas__card--destaque{grid-column:span 2} .destaques__grid{grid-template-columns:repeat(2,1fr)} .destaques__grid .destaques__card:last-child{display:none} } @media(max-width:768px){ :root{--header-altura:70px} .header__barra{padding:0 24px} .header__nav,.header__cta{display:none} .header__hamburguer{display:flex} .header__logo-texto{font-size:24px} .header__logo-subtexto{font-size:9px;letter-spacing:3px} .header__logo-separador{height:28px} .hero__conteudo{padding:0 24px} .hero__linha-lateral{left:24px} .hero__titulo{font-size:clamp(32px,8vw,48px)} .apresentacao{padding:80px 24px} .apresentacao__inner{grid-template-columns:1fr;gap:48px} .areas{padding:80px 24px} .areas__grid{grid-template-columns:1fr} .areas__card--destaque{grid-column:span 1} .numeros{padding:64px 24px} .numeros__grid{grid-template-columns:repeat(2,1fr);gap:24px} .numeros__item:nth-child(2)::after{display:none} .destaques{padding:80px 24px} .destaques__grid{grid-template-columns:1fr} .destaques__grid .destaques__card:last-child{display:flex} .cta-final{padding:80px 24px} .footer{padding:64px 24px 0} .footer__topo{flex-direction:column} .footer__colunas{grid-template-columns:1fr;gap:32px} .footer__barra-inferior{flex-direction:column;text-align:center;gap:8px} .footer__links-legais{justify-content:center} .whatsapp-flutuante{bottom:20px;right:20px;width:50px;height:50px} .voltar-topo{bottom:20px;right:80px;width:38px;height:38px} .menu-mobile::before{left:28px} .menu-mobile__nav{padding-left:52px} .menu-mobile__link{font-size:26px} .menu-mobile__info{left:52px;right:28px;bottom:30px} } @media(max-width:420px){ .header__logo-texto{font-size:21px} .header__logo-subtexto,.header__logo-separador{display:none} .menu-mobile__link{font-size:22px} .numeros__grid{grid-template-columns:1fr} .numeros__item::after{display:none !important} .hero__circulo{display:none} } /* ========================================================= SOTAQUES POR FRENTE (Governanca x Cidadao) Componentes novos usam var(--acento). Trocar data-frente no wrapper alterna dourado (publico) <-> azul (cidadao). ========================================================= */ :root{ --acento:var(--cor-dourado); --acento-claro:var(--cor-dourado-claro); --acento-escuro:var(--cor-dourado-escuro); --acento-bg:var(--cor-dourado-bg); --acento-bg-hover:var(--cor-dourado-bg-hover); --acento-contraste:#1A3440; } [data-frente="cidadao"]{ --acento:#4FA3E3; --acento-claro:#8CC6F0; --acento-escuro:#2E78B5; --acento-bg:rgba(79,163,227,0.08); --acento-bg-hover:rgba(79,163,227,0.14); --acento-contraste:#06121f; } [data-frente="publico"]{ --acento:var(--cor-dourado); --acento-claro:var(--cor-dourado-claro); --acento-escuro:var(--cor-dourado-escuro); --acento-bg:var(--cor-dourado-bg); --acento-bg-hover:var(--cor-dourado-bg-hover); --acento-contraste:#1A3440; } /* ===== PAGE HERO (paginas internas) ===== */ .page-hero{padding:calc(var(--header-altura) + 80px) 48px 80px;text-align:center;position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 30%,var(--acento-bg) 0%,transparent 60%);pointer-events:none} .page-hero__rotulo{font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--acento);margin-bottom:20px;position:relative;z-index:1} .page-hero__titulo{font-family:var(--font-titulo);font-size:clamp(36px,5vw,56px);font-weight:400;color:var(--cor-texto-principal);line-height:1.15;margin-bottom:16px;position:relative;z-index:1} .page-hero__titulo em{font-style:italic;color:var(--acento)} .page-hero__linha{width:40px;height:1px;background:linear-gradient(90deg,var(--acento),var(--acento-claro));margin:24px auto;position:relative;z-index:1} .page-hero__subtitulo{font-size:14px;font-weight:300;color:var(--cor-texto-secundario);max-width:620px;margin:0 auto;line-height:1.8;position:relative;z-index:1} .page-hero{animation:fadeIn 0.8s ease 0.2s both} @keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* ===== SECAO generica + cabecalho de bloco ===== */ .secao{padding:96px 48px;background:var(--cor-fundo-principal);position:relative;transition:background-color var(--transicao-lenta)} .secao--alt{background:var(--cor-fundo-secundario)} .secao__inner{max-width:var(--largura-maxima);margin:0 auto;position:relative;z-index:1} .bloco-cabecalho{text-align:center;margin-bottom:48px} .bloco-cabecalho__rotulo{font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--acento);margin-bottom:14px} .bloco-cabecalho__titulo{font-family:var(--font-titulo);font-size:clamp(28px,3.2vw,40px);font-weight:400;color:var(--cor-texto-principal);line-height:1.2;margin-bottom:12px} .bloco-cabecalho__titulo em{font-style:italic;color:var(--acento)} .bloco-cabecalho__subtitulo{font-size:14px;font-weight:300;color:var(--cor-texto-secundario);max-width:600px;margin:0 auto;line-height:1.7} /* ===== FILTROS ===== */ .filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px} .filtro-btn{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--cor-texto-secundario);border:1px solid var(--cor-borda);background:transparent;padding:9px 20px;border-radius:2px;transition:all var(--transicao-media)} .filtro-btn:hover{border-color:var(--cor-borda-hover);color:var(--acento)} .filtro-btn--ativo{color:var(--acento-contraste);background:linear-gradient(135deg,var(--acento),var(--acento-escuro));border-color:transparent} /* ===== CARDS DE CASOS ===== */ .casos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .caso-card{padding:32px 28px;background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:4px;transition:all var(--transicao-media);display:flex;flex-direction:column;position:relative;overflow:hidden} .caso-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--acento),var(--acento-claro));transform:scaleX(0);transform-origin:left;transition:transform var(--transicao-media)} .caso-card:hover{border-color:var(--cor-borda-hover);background:var(--acento-bg);transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.15)} .caso-card:hover::before{transform:scaleX(1)} .caso-card__tipo{font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--acento);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--cor-borda)} .caso-card__titulo{font-family:var(--font-titulo);font-size:20px;font-weight:500;color:var(--cor-texto-principal);line-height:1.35;margin-bottom:14px} .caso-card__resumo{font-size:13.5px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.75;letter-spacing:0.2px;flex:1} .caso-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .caso-card__tag{font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--cor-texto-terciario);background:var(--cor-dourado-bg);border:1px solid var(--cor-borda);padding:4px 10px;border-radius:2px} /* ===== CARDS DE MIDIA (imprensa) ===== */ .midia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .midia-card{padding:28px 26px;background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:4px;transition:all var(--transicao-media);display:flex;flex-direction:column;color:inherit} .midia-card:hover{border-color:var(--cor-borda-hover);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.12)} .midia-card__veiculo{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:6px} .midia-card__data{font-size:11px;font-weight:300;color:var(--cor-texto-terciario);margin-bottom:14px} .midia-card__titulo{font-family:var(--font-titulo);font-size:18px;font-weight:500;color:var(--cor-texto-principal);line-height:1.4;margin-bottom:12px;flex:1} .midia-card__link{font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:var(--acento);display:inline-flex;align-items:center;gap:6px;transition:gap var(--transicao-media)} .midia-card:hover .midia-card__link{gap:10px} /* ===== VIDEOS (YouTube lite) ===== */ .videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .video-card{background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:4px;overflow:hidden;transition:all var(--transicao-media)} .video-card:hover{border-color:var(--cor-borda-hover);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.12)} .video-lite{position:relative;aspect-ratio:16/9;cursor:pointer;background-color:var(--cor-fundo-terciario);background-size:cover;background-position:center;display:block;width:100%;border:none;padding:0} .video-lite::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,52,64,0.05),rgba(26,52,64,0.45))} .video-lite__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:var(--acento);display:flex;align-items:center;justify-content:center;color:var(--acento-contraste);transition:all var(--transicao-media);z-index:1} .video-lite:hover .video-lite__play{transform:translate(-50%,-50%) scale(1.1)} .video-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:none;z-index:2} .video-card__titulo{font-family:var(--font-titulo);font-size:16px;font-weight:500;color:var(--cor-texto-principal);line-height:1.4;padding:18px 20px} /* ===== SECAO DE PESSOAS / PROTAGONISMO (home) ===== */ .lideres-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:880px;margin:0 auto} .lider-card{display:flex;gap:22px;align-items:center;padding:24px;background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:6px;transition:all var(--transicao-media)} .lider-card:hover{border-color:var(--cor-borda-hover);background:var(--cor-dourado-bg);transform:translateY(-3px)} .lider-card__foto{width:110px;height:130px;object-fit:cover;border-radius:4px;flex-shrink:0;filter:grayscale(12%);border:1px solid var(--cor-borda-hover)} .lider-card__nome{font-family:var(--font-titulo);font-size:22px;font-weight:500;color:var(--cor-dourado);line-height:1.2;margin-bottom:4px} .lider-card__cargo{font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--cor-texto-terciario);margin-bottom:12px} .lider-card__bio{font-size:13px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.65} /* ===== ANIMACAO REVEAL (scroll) ===== */ [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease} [data-reveal].revelado{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.page-hero{animation:none}} /* ===== RESPONSIVO (componentes novos) ===== */ @media(max-width:1024px){.midia-grid,.videos-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:768px){ .secao{padding:64px 24px} .page-hero{padding:calc(var(--header-altura) + 50px) 24px 56px} .casos-grid,.midia-grid,.videos-grid,.lideres-grid{grid-template-columns:1fr} .lider-card{flex-direction:column;text-align:center} } /* ===== QUIZ DE TRIAGEM ===== */ .quiz{max-width:640px;margin:0 auto;padding:36px;background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:8px} .quiz__progresso{height:3px;background:var(--cor-borda);border-radius:2px;margin-bottom:32px;overflow:hidden} .quiz__barra{height:100%;background:linear-gradient(90deg,var(--acento),var(--acento-claro));border-radius:2px;transition:width 0.5s ease} .quiz__etapa{display:none} .quiz__etapa--ativa{display:block;animation:fadeIn 0.35s ease} .quiz__pergunta{font-family:var(--font-titulo);font-size:22px;font-weight:500;color:var(--cor-texto-principal);margin-bottom:20px;line-height:1.3} .quiz__opcoes{display:flex;flex-direction:column;gap:10px} .quiz__opcao{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 20px;background:var(--cor-fundo-principal);border:1px solid var(--cor-borda);border-radius:4px;text-align:left;cursor:pointer;font-family:var(--font-corpo);transition:all var(--transicao-media)} .quiz__opcao strong{font-size:14px;font-weight:600;color:var(--cor-texto-principal);display:block} .quiz__opcao span{font-size:12px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.5} .quiz__opcao:hover,.quiz__opcao:focus-visible{border-color:var(--acento);background:var(--acento-bg);transform:translateX(4px);outline:none} .quiz__resultado{text-align:center;padding:16px 0} .quiz__resultado-icone{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--acento),var(--acento-escuro));color:var(--acento-contraste);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;margin:0 auto 20px} .quiz__resultado-texto{font-size:14px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.75;margin-bottom:24px;max-width:420px;margin-left:auto;margin-right:auto} .quiz__reiniciar{display:block;margin:16px auto 0;font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:var(--cor-texto-terciario);background:none;border:none;cursor:pointer;padding:8px;font-family:var(--font-corpo);transition:color var(--transicao-rapida)} .quiz__reiniciar:hover{color:var(--acento)} @media(max-width:640px){.quiz{padding:20px 16px}.quiz__pergunta{font-size:18px}} /* ===== CALCULADORAS JURIDICAS ===== */ .calc-container{max-width:680px;margin:0 auto} .calc-form{display:flex;flex-direction:column;gap:18px;padding:32px;background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:8px;margin-bottom:24px} .calc-campo{display:flex;flex-direction:column;gap:6px} .calc-campo--checkbox{flex-direction:row;align-items:center;gap:12px} .calc-label{font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--cor-texto-secundario)} .calc-label-check{font-size:13px;font-weight:300;color:var(--cor-texto-secundario);cursor:pointer} .calc-input{font-family:var(--font-corpo);font-size:14px;font-weight:300;color:var(--cor-texto-principal);background:var(--cor-fundo-principal);border:1px solid var(--cor-borda);border-radius:4px;padding:10px 14px;transition:border-color var(--transicao-rapida);width:100%} .calc-input:focus{outline:none;border-color:var(--acento)} .calc-textarea{resize:vertical;min-height:72px} .calc-checkbox{width:18px;height:18px;accent-color:var(--acento);flex-shrink:0} .calc-resultado-container{min-height:4px} .calc-resultado--ok,.calc-resultado--pendente,.calc-resultado--alerta,.calc-resultado--risco{padding:24px;border-radius:6px;margin-bottom:16px} .calc-resultado--ok{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25)} .calc-resultado--pendente{background:var(--cor-fundo-card);border:1px solid var(--cor-borda)} .calc-resultado--alerta{background:rgba(234,179,8,0.08);border:1px solid rgba(234,179,8,0.3)} .calc-resultado--risco{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3)} .calc-resultado__titulo{font-family:var(--font-titulo);font-size:20px;font-weight:500;color:var(--cor-texto-principal);line-height:1.35;margin-bottom:10px} .calc-resultado__detalhe{font-size:13px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.7;margin-bottom:8px} .calc-resultado__obs{font-size:12px;font-weight:300;color:var(--cor-texto-terciario);line-height:1.6;font-style:italic} .calc-resultado__icone{width:52px;height:52px;border-radius:50%;background:rgba(34,197,94,0.15);color:#22c55e;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin-bottom:16px} .calc-aviso{font-size:13px;color:var(--cor-texto-secundario);padding:12px 16px;background:var(--cor-dourado-bg);border:1px solid var(--cor-borda);border-radius:4px} .calc-disclaimer{font-size:11px;font-weight:300;color:var(--cor-texto-terciario);line-height:1.7;padding:12px 16px;border-left:2px solid var(--cor-borda-hover);margin:16px 0;font-style:italic} .calc-cta{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:#25D366;padding:14px 28px;border-radius:2px;transition:all var(--transicao-media);margin-top:8px} .calc-cta:hover{background:#1da851;box-shadow:0 4px 16px rgba(37,211,102,0.3);transform:translateY(-1px)} .calc-barra-risco{height:8px;background:var(--cor-borda);border-radius:4px;overflow:hidden;margin-bottom:16px} .calc-barra-risco__fill{height:100%;border-radius:4px;transition:width 0.8s ease} .calc-barra-risco__fill--verde{background:#22c55e} .calc-barra-risco__fill--amarelo{background:#eab308} .calc-barra-risco__fill--vermelho{background:#ef4444} .calc-barra-risco__fill--suspenso{background:#dc2626} @media(max-width:640px){.calc-form{padding:16px}} /* ===== CASO-CARD: link externo para fonte publicada ===== */ .caso-card__link-externo{display:inline-block;margin-top:16px;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--acento);transition:opacity var(--transicao-rapida)} .caso-card__link-externo:hover{opacity:0.7} /* ===== PRESIDENTE (equipe.html) ===== */ .presidente{padding:80px 48px;background:var(--cor-fundo-principal)} .presidente__inner{max-width:var(--largura-maxima);margin:0 auto;display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:start} .presidente__foto-wrap{position:relative} .presidente__foto{width:100%;height:auto;display:block;border-radius:2px;filter:grayscale(15%);transition:filter var(--transicao-media)} .presidente__foto:hover{filter:grayscale(0)} .presidente__foto-borda{position:absolute;inset:-8px;border:1px solid var(--acento);border-radius:2px;pointer-events:none;opacity:0.5} .presidente__badge{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:16px} .presidente__nome{font-family:var(--font-titulo);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:500;color:var(--cor-texto-principal);margin-bottom:6px;line-height:1.1} .presidente__cargo{font-size:14px;font-weight:300;color:var(--cor-texto-secundario);margin-bottom:8px} .presidente__oab-num{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--acento)} .presidente__linha{width:48px;height:1px;background:var(--acento);margin:24px 0} .presidente__bio{font-size:15px;font-weight:300;line-height:1.8;color:var(--cor-texto-secundario);margin-bottom:32px} .presidente__destaques{display:flex;flex-direction:column;gap:10px} .presidente__destaque-item{display:flex;align-items:flex-start;gap:12px} .presidente__destaque-icone{color:var(--acento);flex-shrink:0;margin-top:2px} .presidente__destaque-texto{font-size:13px;font-weight:400;color:var(--cor-texto-secundario);line-height:1.55} /* ===== COORDENADORES (equipe.html) ===== */ .coordenadores{padding:80px 48px;background:var(--cor-fundo-secundario)} .coordenadores__inner{max-width:var(--largura-maxima);margin:0 auto} .coordenadores__cabecalho{margin-bottom:48px} .coordenadores__rotulo{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:12px} .coordenadores__titulo{font-family:var(--font-titulo);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:400;color:var(--cor-texto-principal)} .coordenadores__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .dept-coluna{display:flex;flex-direction:column} .dept-header{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acento);padding:10px 0;border-bottom:1px solid var(--cor-borda);margin-bottom:16px} /* ===== COORD-CARD (equipe.html) ===== */ .coord-card{background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:4px;overflow:hidden;transition:box-shadow var(--transicao-media)} .coord-card:hover{box-shadow:0 8px 32px rgba(26,52,64,0.10)} .coord-card__foto{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;display:block;filter:grayscale(15%)} .coord-card__conteudo{padding:24px} .coord-card__setor{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--acento);margin-bottom:12px} .coord-card__setor-dot{width:6px;height:6px;border-radius:50%;background:var(--acento);flex-shrink:0} .coord-card__nome{font-family:var(--font-titulo);font-size:1.25rem;font-weight:600;color:var(--cor-texto-principal);margin-bottom:4px;line-height:1.2} .coord-card__cargo{font-size:12px;font-weight:400;color:var(--cor-texto-secundario);margin-bottom:2px} .coord-card__oab{font-size:11px;font-weight:600;letter-spacing:1px;color:var(--acento)} .coord-card__linha{width:32px;height:1px;background:var(--acento);margin:16px 0} .coord-card__bio{font-size:13px;font-weight:300;line-height:1.7;color:var(--cor-texto-secundario);margin-bottom:16px} .coord-card__tags{display:flex;flex-wrap:wrap;gap:6px} .coord-card__tag{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border:1px solid var(--cor-borda-hover);border-radius:2px;color:var(--cor-texto-secundario)} /* ===== NARRATIVA (o-escritorio.html) ===== */ .narrativa{padding:80px 48px;background:var(--cor-fundo-principal)} .narrativa__inner{max-width:780px;margin:0 auto} .narrativa__paragrafo{font-size:16px;font-weight:300;line-height:1.85;color:var(--cor-texto-secundario);margin-bottom:28px} .narrativa__destaque{font-family:var(--font-titulo);font-size:clamp(1.2rem,2vw,1.6rem);font-style:italic;color:var(--cor-texto-principal);border-left:3px solid var(--acento);padding:20px 28px;margin:36px 0;line-height:1.5} /* ===== MVV (o-escritorio.html) ===== */ .mvv{padding:80px 48px;background:var(--cor-fundo-secundario)} .mvv__inner{max-width:var(--largura-maxima);margin:0 auto} .mvv__cabecalho{text-align:center;margin-bottom:48px} .mvv__rotulo{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:12px} .mvv__titulo{font-family:var(--font-titulo);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:400;color:var(--cor-texto-principal)} .mvv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .mvv__card{background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:4px;padding:36px 28px;transition:box-shadow var(--transicao-media)} .mvv__card:hover{box-shadow:0 8px 24px rgba(26,52,64,0.08);border-color:var(--cor-borda-hover)} .mvv__card-icone{width:52px;height:52px;border-radius:50%;background:var(--acento-bg);border:1px solid var(--cor-borda-hover);display:flex;align-items:center;justify-content:center;color:var(--acento);margin-bottom:20px} .mvv__card-titulo{font-family:var(--font-titulo);font-size:1.3rem;font-weight:600;color:var(--cor-texto-principal);margin-bottom:14px} .mvv__card-texto{font-size:14px;font-weight:300;line-height:1.75;color:var(--cor-texto-secundario)} /* ===== GALERIA (o-escritorio.html) ===== */ .galeria{padding:80px 48px;background:var(--cor-fundo-principal)} .galeria__inner{max-width:var(--largura-maxima);margin:0 auto} .galeria__cabecalho{text-align:center;margin-bottom:40px} .galeria__rotulo{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:12px} .galeria__titulo{font-family:var(--font-titulo);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:400;color:var(--cor-texto-principal)} .galeria__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .galeria__item{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--cor-fundo-secundario)} /* ===== CONTATO (contato.html) ===== */ .contato{padding:80px 48px;background:var(--cor-fundo-principal)} .contato__inner{max-width:var(--largura-maxima);margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start} .contato__form-titulo{font-family:var(--font-titulo);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;color:var(--cor-texto-principal);margin-bottom:8px} .contato__form-sub{font-size:14px;font-weight:300;color:var(--cor-texto-secundario);margin-bottom:32px;line-height:1.6} .campo{margin-bottom:20px} .campo__label{display:block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cor-texto-secundario);margin-bottom:6px} .campo__input,.campo__select,.campo__textarea{width:100%;padding:12px 16px;font-family:var(--font-corpo);font-size:14px;font-weight:300;color:var(--cor-texto-principal);background:var(--cor-fundo-card);border:1.5px solid var(--cor-borda);border-radius:3px;transition:border-color var(--transicao-rapida);-webkit-appearance:none} .campo__input:focus,.campo__select:focus,.campo__textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-bg)} .campo__textarea{min-height:120px;resize:vertical} .campo__checkbox{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px} .campo__checkbox-texto{font-size:12px;font-weight:300;color:var(--cor-texto-terciario);line-height:1.6} .campo__checkbox-texto a{color:var(--acento);text-decoration:underline} .campo__checkbox input[type="checkbox"]{width:16px;height:16px;accent-color:var(--acento);flex-shrink:0;margin-top:2px} .btn-enviar{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 32px;font-family:var(--font-corpo);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cor-fundo-principal);background:var(--cor-petroleo);border:none;border-radius:2px;cursor:pointer;transition:all var(--transicao-media)} .btn-enviar:hover{background:var(--acento);transform:translateY(-1px)} .btn-enviar:disabled{opacity:0.6;cursor:not-allowed;transform:none} .contato__info-titulo{font-family:var(--font-titulo);font-size:1.4rem;font-weight:400;color:var(--cor-texto-principal);margin-bottom:28px} .contato__info-item{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--cor-borda)} .contato__info-icone{width:40px;height:40px;border-radius:50%;background:var(--acento-bg);border:1px solid var(--cor-borda-hover);display:flex;align-items:center;justify-content:center;color:var(--acento);flex-shrink:0} .contato__info-rotulo{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cor-texto-terciario);margin-bottom:4px} .contato__info-valor{font-size:14px;font-weight:400;color:var(--cor-texto-principal);line-height:1.6} .contato__info-valor a{color:var(--acento)} .contato__wpp{display:flex;align-items:center;gap:16px;padding:20px;background:var(--cor-petroleo);border-radius:4px;margin-top:28px;text-decoration:none;transition:opacity var(--transicao-rapida)} .contato__wpp:hover{opacity:0.9} .contato__wpp-icone{color:#25D366;flex-shrink:0} .contato__wpp-texto{flex:1} .contato__wpp-titulo{font-size:14px;font-weight:600;color:#F2EDE4;margin-bottom:2px} .contato__wpp-sub{font-size:12px;font-weight:300;color:rgba(242,237,228,0.60)} .contato__wpp-btn{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#25D366;white-space:nowrap} /* ===== MAPA (contato.html) ===== */ .mapa{height:380px;overflow:hidden} .mapa__frame{width:100%;height:100%} .mapa__frame iframe{width:100%;height:100%;border:none;display:block} /* ===== AREAS-NAV (areas-de-atuacao.html) ===== */ .areas-nav{position:sticky;top:var(--header-altura);z-index:100;background:var(--cor-fundo-card);border-bottom:1px solid var(--cor-borda);box-shadow:0 2px 12px rgba(26,52,64,0.06)} .areas-nav__inner{max-width:var(--largura-maxima);margin:0 auto;padding:0 48px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .areas-nav__inner::-webkit-scrollbar{display:none} .areas-nav__link{display:inline-flex;align-items:center;gap:6px;padding:14px 16px;font-size:12px;font-weight:500;color:var(--cor-texto-secundario);white-space:nowrap;text-decoration:none;border-bottom:2px solid transparent;transition:all var(--transicao-rapida)} .areas-nav__link svg{width:14px;height:14px;flex-shrink:0} .areas-nav__link:hover,.areas-nav__link--destaque{color:var(--cor-texto-principal);border-bottom-color:var(--acento)} .areas-nav__link--destaque{font-weight:600} /* ===== AREA-SECAO (areas-de-atuacao.html) ===== */ .area-secao{padding:80px 48px;background:var(--cor-fundo-principal)} .area-secao:nth-of-type(even){background:var(--cor-fundo-secundario)} .area-secao--destaque{background:var(--cor-petroleo)!important;--cor-texto-principal:#F2EDE4;--cor-texto-secundario:rgba(242,237,228,0.65);--cor-texto-terciario:rgba(242,237,228,0.40);--cor-borda:rgba(242,237,228,0.12);--cor-borda-hover:rgba(201,169,78,0.35)} .area-secao__inner{max-width:var(--largura-maxima);margin:0 auto;display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:start} .area-secao__numero{font-family:var(--font-titulo);font-size:5rem;font-weight:700;color:var(--acento-bg);line-height:1;margin-bottom:-20px;opacity:0.6} .area-secao__badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border:1px solid var(--acento);color:var(--acento);border-radius:2px;margin-bottom:12px} .area-secao__rotulo{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--acento);margin-bottom:14px} .area-secao__rotulo-icone{display:flex;align-items:center} .area-secao__titulo{font-family:var(--font-titulo);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;color:var(--cor-texto-principal);margin-bottom:16px;line-height:1.25} .area-secao__linha{width:48px;height:1px;background:var(--acento);margin-bottom:24px} .area-secao__texto{font-size:15px;font-weight:300;line-height:1.8;color:var(--cor-texto-secundario);margin-bottom:20px} .area-secao__cta{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--acento);text-decoration:none;margin-top:8px;transition:opacity var(--transicao-rapida)} .area-secao__cta:hover{opacity:0.7} .area-secao__servicos{background:var(--cor-fundo-card);border:1px solid var(--cor-borda);border-radius:4px;padding:28px} .area-secao--destaque .area-secao__servicos{background:rgba(255,255,255,0.05)} .area-secao__servicos-titulo{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--cor-borda)} .area-secao__servico-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--cor-borda)} .area-secao__servico-item:last-child{border-bottom:none} .area-secao__servico-icone{color:var(--acento);flex-shrink:0;margin-top:2px} .area-secao__servico-texto{font-size:13px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.5} /* ===== FAQ (areas-de-atuacao.html) ===== */ .faq{padding:80px 48px;background:var(--cor-fundo-secundario)} .faq__inner{max-width:780px;margin:0 auto} .faq__rotulo{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acento);margin-bottom:12px} .faq__titulo{font-family:var(--font-titulo);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:400;color:var(--cor-texto-principal);margin-bottom:40px} .faq__item{border-top:1px solid var(--cor-borda)} .faq__item:last-child{border-bottom:1px solid var(--cor-borda)} .faq__pergunta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 0;background:none;border:none;text-align:left;cursor:pointer;font-family:var(--font-corpo);font-size:15px;font-weight:500;color:var(--cor-texto-principal);transition:color var(--transicao-rapida)} .faq__pergunta:hover,.faq__item--aberto .faq__pergunta{color:var(--acento)} .faq__icone{font-size:22px;font-weight:200;line-height:1;flex-shrink:0;color:var(--acento);transition:transform var(--transicao-media)} .faq__item--aberto .faq__icone{transform:rotate(45deg)} .faq__resposta{overflow:hidden;max-height:0;opacity:0;transition:max-height 0.4s ease,opacity 0.3s ease} .faq__resposta-texto{font-size:14px;font-weight:300;color:var(--cor-texto-secundario);line-height:1.75;padding:0 0 20px} .faq__resposta-texto a{color:var(--acento);text-decoration:underline} /* ===== RESPONSIVO — páginas internas ===== */ @media(max-width:1024px){ .presidente__inner{grid-template-columns:300px 1fr;gap:48px} .coordenadores__grid{grid-template-columns:repeat(2,1fr)} .mvv__grid{grid-template-columns:repeat(2,1fr)} .area-secao__inner{grid-template-columns:1fr;gap:36px} .contato__inner{grid-template-columns:1fr;gap:48px} } @media(max-width:768px){ .presidente{padding:56px 24px} .presidente__inner{grid-template-columns:1fr;gap:36px} .presidente__foto-wrap{max-width:320px;margin:0 auto} .coordenadores{padding:56px 24px} .coordenadores__grid{grid-template-columns:1fr} .narrativa{padding:56px 24px} .mvv{padding:56px 24px} .mvv__grid{grid-template-columns:1fr} .galeria{padding:56px 24px} .galeria__grid{grid-template-columns:repeat(2,1fr)} .contato{padding:56px 24px} .areas-nav__inner{padding:0 16px} .area-secao{padding:56px 24px} .area-secao__inner{grid-template-columns:1fr} .faq{padding:56px 24px} .mapa{height:280px} }