/* ============================================================ douglasvilar.com.br — DESIGN 2026 · folha única de produção /brand2026/design.css ------------------------------------------------------------ Origem: DS "Douglas Vilar" (colors_and_type.css + site.css) + overrides do protótipo "Site 2026" (paleta azul OAB, flat). Consumida SOMENTE pelas páginas do redesign 2026 (home e subpáginas re-estilizadas). NÃO linkar em apps embarcados (/certidoes/, golpe-*, /ianobar/ etc.). ------------------------------------------------------------ Contrato JS <-> CSS (atributos no ): data-dvtheme="dark" tema escuro (localStorage "dv-theme-2026") data-dvuni="direito|ia" universo (localStorage "dv-uni") data-banner="on|off" topbar (localStorage "dv-banner-2026") data-menu="closed|open" menu mobile data-aba="caso|servicos" abas da seção dores data-dor="" painel de dor ativo data-tema="|''" esclarecimento de tema (#areas) Estados por classe: .nav.scrolled · .reveal.in · .tl-row.now ============================================================ */ /* Fontes carregadas por no de cada página (perf — sem @import): Newsreader (títulos) + JetBrains Mono (dados) + Anek Latin (corpo) */ /* ============================================================ BLOCO 1 — TOKENS ============================================================ */ :root { /* --- DS core (colors_and_type.css) --- */ --dv-teal: #01696F; --dv-teal-deep: #014A4F; --dv-teal-ink: #012E31; --dv-black: #0A0A0A; --dv-ink: #14181A; --dv-white: #FFFFFF; --dv-gold: #D4AF37; --dv-gold-deep: #A88826; --dv-gold-soft: #F5EBC7; --dv-n-00: #FFFFFF; --dv-n-05: #F7F7F5; --dv-n-10: #EDEDE9; --dv-n-20: #D9D9D2; --dv-n-95: #14181A; --dv-success: #1F7A4C; --dv-warning: #B8791A; --dv-danger: #B03A2E; --dv-info: var(--dv-teal); --dv-bg: var(--dv-n-05); --dv-bg-elev: var(--dv-n-00); --dv-fg: var(--dv-n-95); --dv-border: var(--dv-n-20); --dv-rule-gold: var(--dv-gold); --dv-sans: 'Anek Latin', system-ui, -apple-system, 'Segoe UI', sans-serif; --dv-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --dv-shadow-3: 0 12px 32px rgba(1, 46, 49, 0.14); --dv-ease-standard: cubic-bezier(.2, .0, .0, 1); --dv-ease-out: cubic-bezier(.0, .0, .2, 1); --dv-ease-in: cubic-bezier(.4, .0, 1, 1); --dv-dur-1: 120ms; --dv-dur-2: 200ms; --dv-dur-3: 320ms; --dv-dur-4: 560ms; /* --- camada do site (site.css) --- */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --mono2: 'JetBrains Mono', ui-monospace, monospace; --maxw: 1180px; --gutter: clamp(20px, 5vw, 64px); /* --- PALETA 2026 — preto, branco e azul OAB (institucional) --- Nota: --teal/--gold são nomes herdados do DS; aqui teal = azul OAB e gold = azul claro de acento. O universo IA e o tema escuro redefinem estes tokens mais abaixo. */ --paper: #F4F5F7; --paper-2: #FFFFFF; --ink: #0A0A0A; --line: #DBDFE6; --line-soft: #E8EBF0; --teal: #17408B; --teal-deep: #0E2C63; --teal-ink: #0B1B33; --teal-ink-2: #060F1E; --gold: #86B0F2; --gold-deep: #17408B; --accent-rgb: 134, 176, 242; --dv-teal-soft: #E9EFFA; --dv-n-60: #565C66; --dv-n-40: #8B929C; --dv-n-80: #141A22; --ink-strong: #0B1B33; --surface-invert: #0B1B33; --on-accent: #FFFFFF; --nav-bg: rgba(244, 245, 247, .86); color-scheme: light; } /* universo IA — roxo */ [data-dvuni="ia"] { --teal: #6D3BD1; --teal-deep: #52299F; --teal-ink: #191033; --teal-ink-2: #0F0822; --gold: #B79BF5; --gold-deep: #6D3BD1; --accent-rgb: 183, 155, 245; --dv-teal-soft: #F0EAFD; } /* ============================================================ BLOCO 2 — BASE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--dv-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--gold-deep); color: #fff; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* acessibilidade */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--teal); color: #fff; padding: 12px 18px; font-weight: 600; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ BLOCO 3 — LAYOUT HELPERS ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1340px; } .measure { max-width: 62ch; } section { position: relative; } .band { padding-block: clamp(72px, 11vw, 148px); } .band-tight { padding-block: clamp(56px, 8vw, 104px); } /* ---------- cabeçalho editorial de seção ---------- */ .sec-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; margin-bottom: clamp(40px, 6vw, 72px); } .sec-num { font-family: var(--mono2); font-size: 13px; letter-spacing: 0.12em; color: var(--gold-deep); white-space: nowrap; padding-top: 14px; border-top: 1px solid var(--gold); } .eyebrow { font-family: var(--mono2); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); display: inline-block; } .sec-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.018em; color: var(--teal-ink); margin: 0; text-wrap: balance; } .sec-title em { font-style: italic; color: var(--teal); } .sec-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.62; color: var(--dv-n-60); margin: 22px 0 0; max-width: 60ch; } /* ============================================================ BLOCO 4 — COMPONENTES (site.css) ============================================================ */ /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 60; background: var(--nav-bg); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid var(--line-soft); transition: box-shadow .3s, background .3s; } .nav.scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -22px rgba(11, 27, 51, .5); } /* Tema escuro: cor literal (sem var) — nav nunca pode ficar cinza/translúcida sobre conteúdo escuro */ [data-dvtheme="dark"] .nav { background: rgba(11, 13, 17, .94); } [data-dvtheme="dark"] .nav.scrolled { box-shadow: 0 1px 0 #242B35, 0 12px 30px -22px rgba(0, 0, 0, .7); } .nav-inner { display: flex; align-items: center; gap: 22px; height: 72px; flex-wrap: nowrap; } .brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; } .brand-txt { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .01em; color: var(--ink-strong); } .brand-sub { font-family: var(--mono2); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-top: 4px; white-space: nowrap; } .nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; } .nav-links a { font-size: 14.5px; color: var(--dv-n-60); position: relative; padding: 4px 0; transition: color .18s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--gold-deep); transition: width .22s var(--dv-ease-out); } .nav-links a:hover { color: var(--ink-strong); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; } .nav-links + .nav-cta { margin-left: 0; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--dv-sans); font-weight: 600; font-size: 14.5px; letter-spacing: .005em; padding: 12px 20px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: transform .08s, background .2s, box-shadow .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--teal); color: #fff; } .btn-primary:hover { background: var(--teal-deep); box-shadow: 0 10px 24px -12px rgba(14, 44, 99, .7); } .btn-ghost { background: transparent; color: var(--ink-strong); border-color: var(--line); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); } .btn-gold { background: var(--gold-deep); color: var(--on-accent); } .btn-gold:hover { background: var(--teal-ink); color: #fff; } .btn-lg { padding: 15px 26px; font-size: 15.5px; } .btn-dark { background: #fff; color: var(--teal-ink); } .btn-dark:hover { background: #fff; color: var(--teal-ink); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); } .btn-outline-light:hover { border-color: var(--gold); color: var(--gold); } /* ---------- hero ---------- */ .hero { background: var(--teal-ink); color: #EAF1F7; position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(92svh, 1020px); } .hero > .wrap { width: 100%; } /* zoom automático (Ken Burns) — imagens grandes sempre em movimento lento */ @keyframes dvKen { from { transform: scale(1); } to { transform: scale(1.16); } } .dvx-ken { animation: dvKen 24s ease-in-out infinite alternate; will-change: transform; } .course-img img { animation: dvKen 28s ease-in-out infinite alternate; transform-origin: 50% 35%; } .hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .08) 0 1px, transparent 1px 84px); pointer-events: none; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); } .hero-glow { position: absolute; width: 720px; height: 720px; right: -260px; top: -200px; background: radial-gradient(circle, rgba(var(--accent-rgb), .28), transparent 62%); pointer-events: none; } .hero-eyebrow { font-family: var(--mono2); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px; margin-bottom: 30px; } .hero-eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.6vw, 88px); line-height: 0.98; letter-spacing: -0.025em; margin: 0; color: #fff; text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--gold); } .hero-lead { font-size: clamp(16px, 1.55vw, 18.5px); line-height: 1.66; color: rgba(234, 241, 247, .82); margin: 30px 0 0; max-width: 52ch; } .hero-lead strong { color: #fff; font-weight: 600; } .hero-oab { display: flex; align-items: center; gap: 18px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(var(--accent-rgb), .28); font-size: 13.5px; color: rgba(234, 241, 247, .6); flex-wrap: wrap; } .hero-oab b { color: var(--gold); font-weight: 600; } /* ---------- stats ---------- */ .stats { background: var(--paper-2); border-block: 1px solid var(--line); } .stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); } .stat { padding: clamp(34px, 4vw, 52px) clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); } .stat:first-child { border-left: none; } .stat .n { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 62px); line-height: 1; color: var(--teal); letter-spacing: -0.02em; } .stat .n sup { font-size: .42em; color: var(--gold-deep); vertical-align: super; font-style: italic; } .stat .lbl { font-size: 13.5px; line-height: 1.45; color: var(--dv-n-60); margin-top: 14px; } .stat .lbl b { color: var(--ink-strong); font-weight: 600; display: block; font-size: 14px; margin-bottom: 2px; } /* ---------- missão ---------- */ .miss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 52px); } .miss-card { display: flex; flex-direction: column; } .miss-kicker { font-family: var(--mono2); font-size: 12px; letter-spacing: .12em; color: var(--gold-deep); padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .miss-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); color: var(--ink-strong); margin: 0 0 16px; letter-spacing: -0.01em; } .miss-card p { font-size: 16px; line-height: 1.62; color: var(--dv-n-60); margin: 0; } .miss-quote { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--teal); margin-top: auto; padding-top: 26px; } .miss-quote::before { content: "\201C"; color: var(--gold-deep); font-size: 30px; line-height: 0; vertical-align: -8px; margin-right: 4px; } /* ---------- áreas ---------- */ .areas-list { border-top: 1px solid var(--line); } .area { display: grid; grid-template-columns: 64px 1fr 1.1fr; gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(30px, 3.6vw, 46px) 0; border-bottom: 1px solid var(--line); transition: background .25s; position: relative; } .area::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--teal); transition: width .4s var(--dv-ease-out); } .area:hover::after { width: 100%; } .area-rn { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--gold-deep); line-height: 1; padding-top: 4px; } .area-ico { width: 38px; height: 38px; margin-bottom: 16px; opacity: .92; } .area-main h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.5vw, 30px); color: var(--ink-strong); margin: 0; letter-spacing: -0.012em; } .area-desc { font-size: 16px; line-height: 1.6; color: var(--dv-n-60); margin: 0 0 18px; } .area-tags { display: flex; flex-wrap: wrap; gap: 8px; } .area-tags span { font-family: var(--mono2); font-size: 11.5px; letter-spacing: .02em; color: var(--teal-deep); background: var(--dv-teal-soft); border: 1px solid rgba(23, 64, 139, .16); padding: 5px 11px; border-radius: 3px; } /* ---------- timeline ---------- */ .tl { position: relative; max-width: 860px; margin-inline: auto; } .tl::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--gold-deep), var(--line)); } .tl-row { display: grid; grid-template-columns: 96px 1fr; gap: 48px; padding-block: clamp(20px, 2.6vw, 32px); position: relative; } .tl-year { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); color: var(--teal); text-align: right; line-height: 1.1; } .tl-row::before { content: ""; position: absolute; left: 113px; top: calc(clamp(20px, 2.6vw, 32px) + 8px); width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold-deep); z-index: 1; } .tl-row.now::before { background: var(--gold-deep); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .3); } .tl-body h4 { font-family: var(--dv-sans); font-weight: 600; font-size: 19px; color: var(--ink-strong); margin: 2px 0 7px; } .tl-body p { font-size: 15.5px; line-height: 1.58; color: var(--dv-n-60); margin: 0; } .tl-body p b { color: var(--teal-deep); font-weight: 600; } /* ---------- lab (ferramentas IA) ---------- */ .lab { background: var(--teal-ink-2); color: #DCE4F0; position: relative; overflow: hidden; } .lab::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(var(--accent-rgb), .14) 1px, transparent 0); background-size: 30px 30px; opacity: .5; mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000, transparent); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000, transparent); } .lab .eyebrow { color: var(--gold); } .lab .sec-title { color: #fff; } .lab .sec-title em { color: var(--gold); } .lab .sec-lead { color: rgba(220, 228, 240, .72); } .lab .sec-num { color: var(--gold); } .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 1; } .tool { padding: clamp(26px, 2.6vw, 34px); display: flex; flex-direction: column; min-height: 230px; transition: background .25s, border-color .25s; position: relative; } .tool-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .tool-num { font-family: var(--mono2); font-size: 12px; letter-spacing: .12em; color: var(--gold); } .tool-tag { font-family: var(--mono2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(220, 228, 240, .5); border: 1px solid rgba(220, 228, 240, .18); padding: 4px 8px; border-radius: 3px; } .tool h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; color: #fff; margin: 0 0 12px; } .tool p { font-size: 14.5px; line-height: 1.56; color: rgba(220, 228, 240, .7); margin: 0 0 22px; } .tool-link { margin-top: auto; font-family: var(--mono2); font-size: 13px; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; transition: gap .2s; } .tool:hover .tool-link { gap: 14px; } .lab-foot { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; margin-top: 40px; position: relative; z-index: 1; } .lab-stack { font-family: var(--mono2); font-size: 12.5px; letter-spacing: .03em; color: rgba(220, 228, 240, .55); line-height: 1.7; } .lab-stack b { color: var(--gold); font-weight: 500; } /* ---------- cards ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); } .card { display: flex; flex-direction: column; overflow: hidden; transition: transform .28s var(--dv-ease-out), box-shadow .28s, border-color .28s; } .card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--teal-ink); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--dv-ease-out); } .card:hover .card-thumb img { transform: scale(1.045); } .card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 27, 51, .55)); pointer-events: none; } .card-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; } .card-thumb.playing::after { display: none; } button.card-thumb { display: block; width: 100%; padding: 0; border: none; cursor: pointer; text-align: left; } .card-play { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--mono2); font-size: 12px; letter-spacing: .04em; } .card-play .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-deep); color: var(--on-accent); display: grid; place-items: center; } .card-dur { position: absolute; right: 12px; top: 12px; z-index: 2; font-family: var(--mono2); font-size: 11px; color: #fff; background: rgba(11, 27, 51, .7); padding: 4px 8px; border-radius: 3px; } .card-body { padding: 22px 0 26px; display: flex; flex-direction: column; flex: 1; } .card-kicker { font-family: var(--mono2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; } .card-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.18; color: var(--ink-strong); margin: 0 0 10px; letter-spacing: -0.01em; } .card-body p { font-size: 14.5px; line-height: 1.55; color: var(--dv-n-60); margin: 0 0 18px; } .card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; } .chip-meta { font-family: var(--mono2); font-size: 11px; color: var(--teal-deep); border: 1px solid var(--line); padding: 4px 9px; border-radius: 3px; } /* ---------- cursos (2-up) ---------- */ .courses { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 30px); } .course { display: grid; grid-template-columns: 1fr; overflow: hidden; transition: box-shadow .28s, border-color .28s; } .course-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono2); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); } .course-img { aspect-ratio: 16/8; background: var(--teal-ink); overflow: hidden; } .course-img img { width: 100%; height: 100%; object-fit: cover; } .course-body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 27px); color: var(--ink-strong); margin: 16px 0 12px; letter-spacing: -0.01em; } .course-body p { font-size: 15px; line-height: 1.58; color: var(--dv-n-60); margin: 0 0 22px; } /* ---------- split (mentoria) ---------- */ .split { background: var(--teal-ink); color: #fff; position: relative; overflow: hidden; } .split-head { text-align: center; max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); } .split-head .eyebrow { justify-content: center; color: var(--gold); } .split-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: #fff; text-wrap: balance; } .split-head h2 em { font-style: italic; color: var(--gold); } .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.2vw, 26px); } .split-card { display: flex; flex-direction: column; gap: 16px; transition: background .3s, transform .3s, border-color .3s; } .split-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); margin: 0; color: #fff; } .split-card p { font-size: 15px; line-height: 1.55; color: rgba(234, 241, 247, .72); margin: 0; flex: 1; } .split-card .go { font-family: var(--mono2); font-size: 13px; color: var(--gold); display: inline-flex; align-items: center; gap: 9px; transition: gap .2s; } .split-card:hover .go { gap: 15px; } /* ---------- sedes ---------- */ .sedes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 30px); } .sede { overflow: hidden; } .sede-map { aspect-ratio: 16/8; background: var(--dv-teal-soft); border: none; width: 100%; filter: grayscale(.25) saturate(.85); display: block; } .sede-kicker { font-family: var(--mono2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; } .sede-body h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; color: var(--ink-strong); margin: 0 0 6px; } .sede-addr { font-size: 15px; color: var(--dv-n-60); margin: 0 0 18px; } .sede-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .sede-feats span { font-size: 12.5px; color: var(--teal-deep); display: inline-flex; align-items: center; gap: 6px; background: var(--dv-teal-soft); padding: 5px 11px; border-radius: 3px; } .sede-actions { display: flex; flex-wrap: wrap; gap: 10px; } .remote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .remote .rt { font-family: var(--mono2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); } .remote h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink-strong); margin: 6px 0 0; } /* ---------- footer ---------- */ .foot { background: var(--teal-ink-2); color: rgba(220, 228, 240, .7); padding-block: clamp(56px, 7vw, 84px) 36px; } .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 44px; border-bottom: 1px solid rgba(var(--accent-rgb), .2); } .foot-brand .brand-name { color: #fff; font-size: 22px; } .foot-brand p { font-size: 14.5px; line-height: 1.6; max-width: 38ch; margin: 18px 0; } .foot-soc { display: flex; gap: 12px; } .foot-soc a { width: 40px; height: 40px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 4px; display: grid; place-items: center; color: rgba(220, 228, 240, .8); transition: background .2s, color .2s, border-color .2s, transform .2s; } /* cores oficiais das marcas (Instagram, WhatsApp, YouTube) */ .foot-soc a[href*="instagram.com"] { color: #E4405F; border-color: rgba(228, 64, 95, .45); } .foot-soc a[href*="wa.me"] { color: #25D366; border-color: rgba(37, 211, 102, .45); } .foot-soc a[href*="youtube.com"] { color: #FF0000; border-color: rgba(255, 0, 0, .4); } .foot-soc a[href*="g.page"] { color: #F4B400; border-color: rgba(244, 180, 0, .45); } .foot-soc a[href*="g.page"]:hover { background: #F4B400; color: #1A1A1A; border-color: #F4B400; } /* Toast "avalie no Google" — aparece depois de 10s na página (brand2026/avalie-toast.js) */ .dvx-avalie-toast{position:fixed;left:20px;bottom:20px;z-index:270;max-width:290px;background:var(--paper-2);border:1px solid var(--line);border-left:4px solid #F4B400;border-radius:8px;padding:14px 14px 14px 16px;box-shadow:0 12px 32px -12px rgba(0,0,0,.4);display:flex;align-items:flex-start;gap:10px;transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .35s} .dvx-avalie-toast.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;animation:dvAvalieWiggle .6s ease .45s} .dvx-avalie-toast__ico{font-size:21px;flex-shrink:0;line-height:1.2} .dvx-avalie-toast__body{flex:1;min-width:0} .dvx-avalie-toast__body p{margin:0 0 8px;font-size:13.5px;line-height:1.42;color:var(--ink-strong)} .dvx-avalie-toast__body a{font-family:var(--mono2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#B8860B;font-weight:700;text-decoration:none} [data-dvtheme="dark"] .dvx-avalie-toast__body a{color:#F4B400} .dvx-avalie-toast__body a:hover{text-decoration:underline} .dvx-avalie-toast__x{background:transparent;border:none;color:var(--dv-n-40);cursor:pointer;font-size:15px;line-height:1;padding:2px;flex-shrink:0} .dvx-avalie-toast__x:hover{color:var(--ink-strong)} @keyframes dvAvalieWiggle{0%,100%{transform:translateY(0) scale(1) rotate(0)}20%{transform:translateY(0) scale(1) rotate(-2deg)}40%{transform:translateY(0) scale(1) rotate(2deg)}60%{transform:translateY(0) scale(1) rotate(-1.4deg)}80%{transform:translateY(0) scale(1) rotate(1deg)}} @media(max-width:520px){.dvx-avalie-toast{left:12px;right:12px;max-width:none}} @media(prefers-reduced-motion:reduce){.dvx-avalie-toast.show{animation:none}} /* Captura de lead "Fique por dentro" — home, antes do rodapé (brand2026/lead-capture.js) */ .lead-capture{padding:clamp(48px,7vw,80px) 0;border-top:1px solid var(--line)} .lead-capture__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start} .lead-capture__text h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.2;letter-spacing:-.01em;color:var(--ink-strong);margin:0 0 14px;text-wrap:balance} .lead-capture__text p{font-size:15px;line-height:1.6;color:var(--dv-n-60);max-width:44ch;margin:0} .lead-capture__form{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:clamp(22px,3vw,28px)} .lead-capture__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lead-capture__row{margin:0 0 12px} .lead-capture__row--3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .lead-capture__form input{width:100%;font:inherit;font-size:14.5px;color:var(--ink-strong);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px;transition:border-color .18s} .lead-capture__form input:focus{outline:none;border-color:var(--gold-deep)} .lead-capture__hint{font-size:12.5px;color:var(--dv-n-60);margin:0 0 16px} .lead-capture__hint--err{color:#B03A2E;font-weight:600} .lead-capture__btn{width:100%;font-family:var(--mono2);font-size:13.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--gold-deep);border:none;border-radius:8px;padding:13px 18px;cursor:pointer;transition:opacity .18s} .lead-capture__btn:hover{opacity:.88} .lead-capture__btn:disabled{opacity:.6;cursor:default} .lead-capture__lgpd{font-size:11.5px;line-height:1.55;color:var(--dv-n-60);margin:14px 0 0} .lead-capture__lgpd a{color:var(--gold-deep);text-decoration:underline} .lead-capture__ok{font-size:15px;font-weight:600;color:var(--dv-success);text-align:center;margin:0;padding:14px 0} @media(max-width:760px){.lead-capture__inner{grid-template-columns:1fr}.lead-capture__row--3{grid-template-columns:1fr}} .foot-soc a:hover { transform: translateY(-2px); } .foot-soc a[href*="instagram.com"]:hover { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); color: #fff; border-color: transparent; } .foot-soc a[href*="wa.me"]:hover { background: #25D366; color: #fff; border-color: #25D366; } .foot-soc a[href*="youtube.com"]:hover { background: #FF0000; color: #fff; border-color: #FF0000; } .foot-col h5 { font-family: var(--mono2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; font-weight: 500; } .foot-col a { display: block; font-size: 14.5px; color: rgba(220, 228, 240, .72); padding: 6px 0; transition: color .18s; } .foot-col a:hover { color: var(--gold); } .foot-note { font-size: 12.5px; line-height: 1.6; color: rgba(220, 228, 240, .5); margin-top: 14px; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 28px; } .foot-sign { font-family: var(--mono2); font-size: 12px; letter-spacing: .04em; color: rgba(220, 228, 240, .5); line-height: 1.6; } .foot-sign b { color: var(--gold); font-weight: 500; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--dv-ease-out), transform .7s var(--dv-ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } html.no-js .reveal { opacity: 1; transform: none; } /* ============================================================ BLOCO 5 — OVERRIDES DO PROTÓTIPO "SITE 2026" (flat 2026) ============================================================ */ .stat .lbl b, .card-body h3, .area-main h3, .sede-body h3, .tl-body h4, .sec-title, .brand-name { color: var(--ink-strong); } /* estética flat: hairline no topo, sem sombra/raio */ .card, .course, .sede { background: transparent; border: none; border-top: 1px solid var(--line); border-radius: 0; } .card:hover, .course:hover, .sede:hover { transform: none; box-shadow: none; border-top-color: var(--gold-deep); } .card-thumb, .course-img { border-radius: 0; } .course-body, .sede-body { padding: 28px 0 0; } .dvx-entry { transition: transform .3s cubic-bezier(.2, 0, 0, 1), border-color .3s, box-shadow .3s; } .dvx-entry:hover { transform: none; box-shadow: none; border-top-color: var(--gold-deep); } .remote { border: none; border-top: 2px solid var(--gold-deep); border-radius: 0; background: transparent; padding: 30px 0 0; } .split-card { border: none; border-top: 1px solid rgba(var(--accent-rgb), .4); border-radius: 0; padding: 30px 0 0; background: transparent; } .split-card:hover { background: transparent; transform: none; border-top-color: var(--gold); } .tools-grid { background: transparent; border: none; border-radius: 0; gap: 0; } .tool { background: transparent; border-top: 1px solid rgba(var(--accent-rgb), .28); padding: 30px 26px 30px 0; } .tool:hover { background: transparent; border-top-color: var(--gold); } /* chips de tema (#areas) */ .dvx-chip { font-family: var(--mono2); font-size: 11.5px; letter-spacing: .02em; color: var(--teal-deep); background: var(--dv-teal-soft); border: 1px solid rgba(23, 64, 139, .18); padding: 7px 12px; border-radius: 3px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .dvx-chip:hover { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); } .dvx-tema { display: none; margin-top: 18px; padding: 20px 0 4px; background: transparent; border-top: 1px solid var(--gold-deep); font-size: 15px; line-height: 1.62; color: var(--dv-n-60); } .dvx-tema b { color: var(--ink-strong); font-weight: 600; } /* FASE 2026-08-19: explicação curta → clique → explicação técnica longa. Usa max-height/opacity (NÃO display:none) de propósito: o texto fica sempre no HTML, então leitores de página e o import de URL do NotebookLM enxergam o conteúdo técnico completo mesmo fechado — só o humano vê fechado até clicar. */ .xp { cursor: pointer; } .xp:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; } .xp-hint { display: inline-block; margin-left: 6px; font-family: var(--mono2); font-size: .68rem; letter-spacing: .04em; opacity: .75; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .xp-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .32s ease, opacity .25s ease, margin-top .32s ease; font-size: .92em; line-height: 1.6; } .xp.is-open .xp-detail { max-height: 1000px; opacity: .95; margin-top: 8px; } .xp.is-open .xp-hint::before { content: "▾ "; } .xp:not(.is-open) .xp-hint::before { content: "▸ "; } [data-tema="loc"] #t-loc, [data-tema="distrato"] #t-distrato, [data-tema="incorp"] #t-incorp, [data-tema="dd"] #t-dd, [data-tema="obra"] #t-obra, [data-tema="regulariza"] #t-regulariza, [data-tema="condominio"] #t-condominio, [data-tema="escritura"] #t-escritura, [data-tema="contratos"] #t-contratos, [data-tema="startups"] #t-startups, [data-tema="holdings"] #t-holdings, [data-tema="reforma"] #t-reforma, [data-tema="pejot"] #t-pejot, [data-tema="vinculo"] #t-vinculo, [data-tema="terc"] #t-terc, [data-tema="verbas"] #t-verbas, [data-tema="inv"] #t-inv, [data-tema="div"] #t-div, [data-tema="test"] #t-test, [data-tema="holdfam"] #t-holdfam, [data-tema="pix"] #t-pix, [data-tema="gerente"] #t-gerente, [data-tema="falsoadv"] #t-falsoadv, [data-tema="sumula"] #t-sumula { display: block; } [data-tema="loc"] .dvx-chip[data-tema="loc"], [data-tema="distrato"] .dvx-chip[data-tema="distrato"], [data-tema="incorp"] .dvx-chip[data-tema="incorp"], [data-tema="dd"] .dvx-chip[data-tema="dd"], [data-tema="obra"] .dvx-chip[data-tema="obra"], [data-tema="regulariza"] .dvx-chip[data-tema="regulariza"], [data-tema="condominio"] .dvx-chip[data-tema="condominio"], [data-tema="escritura"] .dvx-chip[data-tema="escritura"], [data-tema="contratos"] .dvx-chip[data-tema="contratos"], [data-tema="startups"] .dvx-chip[data-tema="startups"], [data-tema="holdings"] .dvx-chip[data-tema="holdings"], [data-tema="reforma"] .dvx-chip[data-tema="reforma"], [data-tema="pejot"] .dvx-chip[data-tema="pejot"], [data-tema="vinculo"] .dvx-chip[data-tema="vinculo"], [data-tema="terc"] .dvx-chip[data-tema="terc"], [data-tema="verbas"] .dvx-chip[data-tema="verbas"], [data-tema="inv"] .dvx-chip[data-tema="inv"], [data-tema="div"] .dvx-chip[data-tema="div"], [data-tema="test"] .dvx-chip[data-tema="test"], [data-tema="holdfam"] .dvx-chip[data-tema="holdfam"], [data-tema="pix"] .dvx-chip[data-tema="pix"], [data-tema="gerente"] .dvx-chip[data-tema="gerente"], [data-tema="falsoadv"] .dvx-chip[data-tema="falsoadv"], [data-tema="sumula"] .dvx-chip[data-tema="sumula"] { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); } /* ---- dores (abas, botões, painéis) ---- */ .dvx-dorbtn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: transparent; border: none; border-left: 2px solid transparent; padding: 15px 16px; font-family: var(--dv-sans); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.35; color: var(--dv-n-60); cursor: pointer; transition: color .2s, border-color .2s, padding-left .2s; } .dvx-dorbtn:hover { color: var(--ink-strong); padding-left: 22px; } .dvx-dorseta { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; color: var(--gold-deep); flex-shrink: 0; } .dvx-dor { display: none; } [data-dor="distrato"] #d-distrato, [data-dor="despejo"] #d-despejo, [data-dor="trabalhista"] #d-trabalhista, [data-dor="comissao"] #d-comissao, [data-dor="golpe"] #d-golpe, [data-dor="cobranca"] #d-cobranca, [data-dor="compra"] #d-compra, [data-dor="inventario"] #d-inventario, [data-dor="imobiliaria"] #d-imobiliaria, [data-dor="construtoras"] #d-construtoras, [data-dor="trabpj"] #d-trabpj, [data-dor="bancos"] #d-bancos, [data-dor="moveis"] #d-moveis, [data-dor="carros"] #d-carros, [data-dor="startup"] #d-startup { display: grid; } [data-dor="distrato"] .dvx-dorbtn[data-dor="distrato"], [data-dor="despejo"] .dvx-dorbtn[data-dor="despejo"], [data-dor="trabalhista"] .dvx-dorbtn[data-dor="trabalhista"], [data-dor="comissao"] .dvx-dorbtn[data-dor="comissao"], [data-dor="golpe"] .dvx-dorbtn[data-dor="golpe"], [data-dor="cobranca"] .dvx-dorbtn[data-dor="cobranca"], [data-dor="compra"] .dvx-dorbtn[data-dor="compra"], [data-dor="inventario"] .dvx-dorbtn[data-dor="inventario"], [data-dor="imobiliaria"] .dvx-dorbtn[data-dor="imobiliaria"], [data-dor="construtoras"] .dvx-dorbtn[data-dor="construtoras"], [data-dor="trabpj"] .dvx-dorbtn[data-dor="trabpj"], [data-dor="bancos"] .dvx-dorbtn[data-dor="bancos"], [data-dor="moveis"] .dvx-dorbtn[data-dor="moveis"], [data-dor="carros"] .dvx-dorbtn[data-dor="carros"], [data-dor="startup"] .dvx-dorbtn[data-dor="startup"] { color: var(--ink-strong); border-left-color: var(--gold-deep); } [data-dor="distrato"] .dvx-dorbtn[data-dor="distrato"] .dvx-dorseta, [data-dor="despejo"] .dvx-dorbtn[data-dor="despejo"] .dvx-dorseta, [data-dor="trabalhista"] .dvx-dorbtn[data-dor="trabalhista"] .dvx-dorseta, [data-dor="comissao"] .dvx-dorbtn[data-dor="comissao"] .dvx-dorseta, [data-dor="golpe"] .dvx-dorbtn[data-dor="golpe"] .dvx-dorseta, [data-dor="cobranca"] .dvx-dorbtn[data-dor="cobranca"] .dvx-dorseta, [data-dor="compra"] .dvx-dorbtn[data-dor="compra"] .dvx-dorseta, [data-dor="inventario"] .dvx-dorbtn[data-dor="inventario"] .dvx-dorseta, [data-dor="imobiliaria"] .dvx-dorbtn[data-dor="imobiliaria"] .dvx-dorseta, [data-dor="construtoras"] .dvx-dorbtn[data-dor="construtoras"] .dvx-dorseta, [data-dor="trabpj"] .dvx-dorbtn[data-dor="trabpj"] .dvx-dorseta, [data-dor="bancos"] .dvx-dorbtn[data-dor="bancos"] .dvx-dorseta, [data-dor="moveis"] .dvx-dorbtn[data-dor="moveis"] .dvx-dorseta, [data-dor="carros"] .dvx-dorbtn[data-dor="carros"] .dvx-dorseta, [data-dor="startup"] .dvx-dorbtn[data-dor="startup"] .dvx-dorseta { opacity: 1; transform: none; } .dvx-dorlabel { font-family: var(--mono2); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dv-n-40); padding: 22px 16px 10px; } .dvx-aba { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0 0 12px; margin-right: 30px; font-family: var(--dv-sans); font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; color: var(--dv-n-40); cursor: pointer; transition: color .2s, border-color .2s; } .dvx-aba:hover { color: var(--ink-strong); } [data-aba="caso"] .dvx-aba[data-aba="caso"], [data-aba="servicos"] .dvx-aba[data-aba="servicos"] { color: var(--ink-strong); border-bottom-color: var(--gold-deep); } .dvx-grupo-servicos { display: none; } [data-aba="servicos"] .dvx-grupo-caso { display: none; } [data-aba="servicos"] .dvx-grupo-servicos { display: block; } [data-aba="servicos"] .dvx-dor:not(.dvx-dor-serv) { display: none !important; } [data-aba="caso"] .dvx-dor-serv { display: none !important; } /* calculadora + lupa */ .dvx-calc-key { min-width: 64px; height: 44px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--dv-n-60); font-family: var(--mono2); font-size: 14px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .dvx-calc-key:hover { background: var(--gold-deep); color: var(--on-accent); border-color: var(--gold-deep); } .dvx-calc-key[aria-pressed="true"] { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--on-accent); } .dvx-calc-in { width: 100%; height: 52px; padding: 0; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--mono2); font-size: 22px; text-align: right; } .dvx-zap { box-shadow: 0 18px 40px -26px rgba(11, 27, 51, .5); } .dvx-lupa { --mx: 50%; --my: 46%; } .dvx-lupa-nitida { -webkit-mask-image: radial-gradient(circle 118px at var(--mx) var(--my), #000 62%, transparent 78%); mask-image: radial-gradient(circle 118px at var(--mx) var(--my), #000 62%, transparent 78%); } .dvx-lupa-anel { position: absolute; left: var(--mx); top: var(--my); width: 236px; height: 236px; margin: -118px 0 0 -118px; border-radius: 50%; border: 1px solid var(--gold-deep); pointer-events: none; transition: opacity .3s; } .dvx-lupa:hover .dvx-lupa-anel { opacity: .85; } /* PodStart — paleta própria do podcast */ .dvx-pod { --paper: #F2F1ED; --paper-2: #FFFFFF; --line: #DEDCD5; --ink-strong: #2A3140; --teal: #C2372C; --teal-deep: #9E2A21; --gold-deep: #C2372C; --gold: #E8756A; --dv-n-60: #5A6070; --accent-rgb: 194, 55, 44; background: #F2F1ED; } /* universos */ .dvx-only-ia { display: none; } [data-dvuni="ia"] .dvx-only-ia { display: block; } [data-dvuni="ia"] .dvx-navgroup.dvx-only-ia { display: flex; } [data-dvuni="ia"] .dvx-only-direito { display: none; } /* seletor de universo (pill) */ .dvx-uniwrap { position: relative; display: flex; flex-shrink: 0; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; } .dvx-unipill { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--ink-strong); border-radius: 999px; transition: transform .42s cubic-bezier(.2, 0, 0, 1), background .42s; z-index: 0; overflow: hidden; } [data-dvuni="ia"] .dvx-unipill { transform: translateX(100%); background: #6D3BD1; } .dvx-unibtn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; width: 104px; flex-shrink: 0; height: 42px; padding: 0; border: none; background: transparent; cursor: pointer; font-family: var(--mono2); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dv-n-40); transition: color .3s; white-space: nowrap; } .dvx-unidot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; transition: opacity .3s, transform .3s; } .dvx-unibtn[data-k="direito"] { color: var(--paper); } .dvx-unibtn[data-k="direito"] .dvx-unidot { opacity: 1; transform: scale(1.3); } [data-dvuni="ia"] .dvx-unibtn[data-k="direito"] { color: var(--dv-n-40); } [data-dvuni="ia"] .dvx-unibtn[data-k="direito"] .dvx-unidot { opacity: .45; transform: none; } [data-dvuni="ia"] .dvx-unibtn[data-k="ia"] { color: #fff; } [data-dvuni="ia"] .dvx-unibtn[data-k="ia"] .dvx-unidot { opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(183, 155, 245, .28); } .dvx-sun { display: none; } [data-dvtheme="dark"] .dvx-sun { display: block; } [data-dvtheme="dark"] .dvx-moon { display: none; } /* ---- movimento ---- */ @keyframes dvMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes dvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(2); } } @keyframes dvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes dvShine { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } } @keyframes dvOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } } .dvx-marquee { display: flex; width: max-content; animation: dvMarquee 42s linear infinite; } .dvx-marquee:hover { animation-play-state: paused; } .dvx-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: dvPulse 1.9s ease-in-out infinite; } .dvx-float { animation: dvFloat 7s ease-in-out infinite; } .dvx-float-2 { animation: dvFloat 9s ease-in-out infinite .9s; } .dvx-orbit { animation: dvOrbit 26s linear infinite; } .dvx-shine { position: relative; overflow: hidden; } .dvx-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); animation: dvShine 6s ease-in-out infinite; pointer-events: none; } .dvx-uni { flex: 1 1 0; min-width: 0; border: none; border-top: 1px solid rgba(var(--accent-rgb), .4); border-radius: 0; background: transparent; padding: 30px 0 0; transition: flex-grow .55s cubic-bezier(.2, 0, 0, 1), background .35s, border-color .35s; } .dvx-uni:hover { flex-grow: 1.4; background: transparent; border-top-color: var(--gold); } .dvx-uni .dvx-go { transition: gap .25s; } .dvx-uni:hover .dvx-go { gap: 16px; } .dvx-iconchip { width: 56px; height: 56px; border-radius: 10px; background: #fff; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2, 0, 0, 1); } .dvx-uni:hover .dvx-iconchip { transform: translateY(-4px); } /* ---- form / a11y — trava de autozoom iOS ---- */ input, select, textarea, button { font-size: 16px; font-family: var(--dv-sans); } input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; } a { color: var(--teal); } a:hover { color: var(--teal-deep); } /* ---- banner de campanha ---- */ .dvx-bar { display: flex; align-items: center; gap: 16px; background: #0F0822; color: #EDE7FB; padding: 11px clamp(16px, 4vw, 28px); } [data-banner="off"] .dvx-bar { display: none; } .dvx-bar a { color: #B79BF5; } .dvx-barclose { margin-left: auto; background: transparent; border: none; color: rgba(237, 231, 251, .5); font-size: 18px; line-height: 1; cursor: pointer; padding: 6px 2px; min-width: 44px; min-height: 44px; } .dvx-barclose:hover { color: #fff; } /* ---- menu mobile ---- */ .dvx-menu { display: none; } [data-menu="open"] .dvx-menu { display: block; position: fixed; inset: 0; z-index: 250; background: var(--paper); overflow-y: auto; padding: clamp(20px, 5vw, 32px); } .dvx-menu-links a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 24px; color: var(--ink-strong); } .dvx-menu-links a:hover { color: var(--gold-deep); } .dvx-menu-label { font-family: var(--mono2); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dv-n-40); margin: 26px 0 6px; } .dvx-menu-sub a { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; color: var(--dv-n-60); } .dvx-menu-sub a:hover { color: var(--gold-deep); } .dvx-menu .btn { justify-content: center; min-height: 52px; } /* ---- dropdown "Especialidades" (nav desktop) ---- */ .dvx-drop { position: relative; } .dvx-dropbtn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; font-family: var(--dv-sans); font-size: 14.5px; color: var(--dv-n-60); padding: 4px 0; cursor: pointer; transition: color .18s; } .dvx-dropbtn:hover, .dvx-drop.open .dvx-dropbtn { color: var(--ink-strong); } .dvx-dropbtn .car { transition: transform .2s; font-size: 10px; } .dvx-drop.open .dvx-dropbtn .car { transform: rotate(180deg); } .dvx-droppanel { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 560px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--dv-shadow-3); padding: 20px 22px; z-index: 80; } .dvx-drop.open .dvx-droppanel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; } .dvx-droppanel a { display: block; padding: 9px 6px; font-size: 14px; color: var(--dv-n-60); border-bottom: 1px solid var(--line-soft); transition: color .15s, background .15s; } .dvx-droppanel a:hover { color: var(--ink-strong); background: var(--dv-teal-soft); } .dvx-droppanel a b { display: block; color: var(--ink-strong); font-weight: 600; } .dvx-droppanel a small { display: block; font-size: 12px; color: var(--dv-n-40); margin-top: 1px; } /* ---- FABs flutuantes (WhatsApp + Instagram) ---- */ .dvx-fabs { position: fixed; right: 22px; bottom: 22px; z-index: 290; display: flex; flex-direction: column; gap: 12px; } .dvx-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5); } .dvx-fab-wa { background: #25D366; } .dvx-fab-wa .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: dvPulse 2.4s ease-out infinite; } .dvx-fab-ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); color: #fff; width: 48px; height: 48px; align-self: center; } .dvx-fab:hover { color: #fff; } /* ---- barra de progresso de scroll ---- */ .dvx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400; background: transparent; pointer-events: none; } .dvx-progress > div { height: 100%; background: var(--gold-deep); transform: scaleX(0); transform-origin: 0 50%; } /* ---- detalhes/accordion (palestras relacionadas) ---- */ .dvx-details { border-top: 1px solid var(--line); margin-top: 14px; } .dvx-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; font-family: var(--mono2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); } .dvx-details summary::-webkit-details-marker { display: none; } .dvx-details summary::after { content: "+"; margin-left: auto; font-size: 15px; } .dvx-details[open] summary::after { content: "–"; } .dvx-details a { display: block; padding: 8px 0; font-size: 14px; color: var(--dv-n-60); border-top: 1px solid var(--line-soft); } .dvx-details a:hover { color: var(--teal); } /* ============================================================ BLOCO 6 — TEMA ESCURO ([data-dvtheme="dark"] no ) ============================================================ */ [data-dvtheme="dark"] { --surface-invert: #12161C; --on-accent: #0B0D11; --nav-bg: rgba(11, 13, 17, .88); --teal: #9EC0F5; --teal-deep: #C2D8FA; --gold-deep: #9EC0F5; --gold: #C2D8FA; --ink-strong: #EAF0F8; --paper: #0B0D11; --paper-2: #12161C; --ink: #E9EDF3; --line: #242B35; --line-soft: #1B2029; --dv-n-60: #A2ACBA; --dv-n-40: #6E7887; --dv-n-80: #E9EDF3; --dv-teal-soft: #152139; color-scheme: dark; } [data-dvuni="ia"][data-dvtheme="dark"], [data-dvtheme="dark"][data-dvuni="ia"] { --teal: #C4AEFA; --teal-deep: #DCD0FD; --gold-deep: #C4AEFA; --gold: #DCD0FD; } [data-dvtheme="dark"] .sec-title, [data-dvtheme="dark"] .card-body h3, [data-dvtheme="dark"] .area-main h3, [data-dvtheme="dark"] .sede-body h3, [data-dvtheme="dark"] .tl-body h4, [data-dvtheme="dark"] .brand-name, [data-dvtheme="dark"] .miss-card h3, [data-dvtheme="dark"] .remote h3, [data-dvtheme="dark"] .dvx-ink { color: #EAF0F8; } [data-dvtheme="dark"] .btn-ghost { color: #EAF0F8; } [data-dvtheme="dark"] .btn-primary, [data-dvtheme="dark"] .btn-gold { color: #0B0D11; } [data-dvtheme="dark"] .btn-primary:hover, [data-dvtheme="dark"] .btn-gold:hover { background: #DCE9FB; color: #0B0D11; } [data-dvtheme="dark"] .area-tags span { background: #152139; } [data-dvtheme="dark"] .chip-meta, [data-dvtheme="dark"] .area-tags span { color: #9EC0F5; } [data-dvtheme="dark"] .stat .n { color: #9EC0F5; } [data-dvtheme="dark"] .remote { background: rgba(var(--accent-rgb), .08); } [data-dvtheme="dark"] input { background: #12161C; color: #EAF0F8; } [data-dvtheme="dark"] .dvx-iconchip { background: #1B2230; } [data-dvtheme="dark"] .dvx-iconchip img { filter: invert(1) brightness(1.6); } [data-dvtheme="dark"] .area-ico { filter: invert(1) brightness(1.6); } [data-dvtheme="dark"] .dvx-logo { filter: invert(1) brightness(1.4); } [data-dvtheme="dark"] .dvx-chip { background: #152139; color: #9EC0F5; border-color: #24344F; } [data-dvtheme="dark"] .dvx-chip:hover, [data-dvtheme="dark"] .dvx-chip[data-tema]:hover { color: #0B0D11; } [data-dvtheme="dark"] .dvx-zap { box-shadow: none; } [data-dvtheme="dark"] .dvx-pod { --paper: #171A20; --paper-2: #1D2129; --line: #2E333D; --ink-strong: #F2F1ED; --teal: #E8756A; --teal-deep: #F2A199; --gold-deep: #E8756A; --gold: #E8756A; --dv-n-60: #A6ACB8; background: #171A20; } [data-dvtheme="dark"] .sede-map { filter: grayscale(.4) invert(.9) hue-rotate(180deg); } /* ============================================================ BLOCO 7 — RESPONSIVO ============================================================ */ @media (max-width: 1280px) { .dvx-search { display: none !important; } } @media (max-width: 1120px) { .dvx-oab { display: none; } } @media (max-width: 1180px) { .nav-links { display: none !important; } .dvx-burger { display: inline-grid !important; } } .dvx-burger { display: none; } @media (max-width: 1080px) { .tools-grid, .cards, .miss-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); } .stat:nth-child(4) { border-left: none; } .foot-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { .dvx-4col { grid-template-columns: repeat(2, 1fr) !important; } .split-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 980px) { .dvx-unibtn { width: 74px; font-size: 11px; letter-spacing: .1em; } } @media (max-width: 900px) { .dvx-2col, .dvx-3col, .dvx-4col { grid-template-columns: 1fr !important; } .dvx-unis { flex-direction: column !important; } .split-grid, .cards, .courses, .sedes, .tools-grid, .miss-grid { grid-template-columns: 1fr !important; } .dvx-dorgrid { grid-template-columns: 1fr !important; gap: 32px !important; } .remote { flex-direction: column; align-items: flex-start; } .remote img { width: 100% !important; max-width: 340px; } .band { padding-block: clamp(52px, 9vw, 80px); } } @media (max-width: 860px) { .courses, .split-grid, .sedes, .area { grid-template-columns: 1fr; } .area { gap: 8px 18px; grid-template-columns: 44px 1fr; } .area-third { grid-column: 1 / -1; } } @media (max-width: 820px) { .dvx-hide-sm { display: none !important; } .dvx-bartail { display: none; } } @media (max-width: 680px) { .wrap { --gutter: 20px; } .dvx-retrato { display: none; } .hero h1 { font-size: clamp(34px, 10vw, 52px); } .sec-title { font-size: clamp(28px, 8vw, 40px); } .dvx-dorbtn { font-size: 16px; padding: 14px 12px; min-height: 56px; } .dvx-aba { font-size: 16px; margin-right: 22px; } .area { grid-template-columns: 1fr !important; } .area-rn { display: none; } .stat { padding: 26px 0; } .foot-bottom { flex-direction: column; align-items: flex-start; } .btn { min-height: 48px; } .dvx-lupa { overflow-x: auto; } .dvx-lupa > div { min-width: 520px; } } @media (max-width: 640px) { .dvx-unibtn { width: 58px; gap: 6px; } } @media (max-width: 600px) { body { font-size: 16px; } .tools-grid, .cards, .miss-grid, .stats-grid { grid-template-columns: 1fr; } .stat { border-left: none; border-top: 1px solid var(--line); } .stat:first-child { border-top: none; } .foot-top { grid-template-columns: 1fr; } .sec-head { grid-template-columns: 1fr; gap: 14px; } .sec-num { border-top: none; padding-top: 0; } .tl::before { left: 6px; } .tl-row { grid-template-columns: 1fr; gap: 4px; padding-left: 30px; } .tl-year { text-align: left; } .tl-row::before { left: 1px; top: 8px; } .dvx-fabs { right: 14px; bottom: 14px; } } @media (max-width: 560px) { .brand-txt { display: none; } } @media (max-width: 420px) { .nav-inner .dvx-uniwrap { display: none; } .nav-cta .btn-primary { padding: 12px 14px; font-size: 13.5px; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .dvx-marquee, .dvx-mticker-track .dvx-marquee, .dvx-live, .dvx-float, .dvx-float-2, .dvx-orbit, .dvx-fab-wa .ring, .dvx-ken, .course-img img { animation: none !important; } .dvx-shine::after { display: none; } .card:hover .card-thumb img { transform: none; } .dvx-uni, .dvx-unipill { transition: none; } } .foot-built{font-family:var(--mono2,ui-monospace,monospace);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(234,241,247,.55);line-height:1.55;margin-top:10px} .foot-built a{color:#E8C36A;text-decoration:none} .foot-built a:hover{text-decoration:underline} /* ---- faixa TV de matérias (portais) — não é o marquee institucional ESA/CRECI ---- */ .dvx-mticker{display:flex;align-items:center;gap:12px;background:var(--ink-strong,#0B0D11);color:#F5F5F7;border-bottom:1px solid rgba(255,255,255,.12);min-height:42px;padding:0 14px;position:relative;z-index:40} [data-dvtheme="dark"] .dvx-mticker{background:#08080A} .dvx-mticker-label{font-family:var(--mono2,ui-monospace,monospace);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#E8C36A);flex-shrink:0;font-weight:600} .dvx-mticker-track{flex:1;overflow:hidden;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)} .dvx-mticker-track .dvx-marquee{align-items:center;gap:0} .dvx-mticker-seq{display:flex;align-items:center;flex-shrink:0} .dvx-mticker-item{display:inline-flex;align-items:baseline;gap:8px;padding:0 28px 0 0;white-space:nowrap;text-decoration:none;color:#F5F5F7;font-size:14.5px;line-height:1.2} .dvx-mticker-item:hover{color:var(--gold,#E8C36A)} .dvx-mticker-src{font-family:var(--mono2,ui-monospace,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#E8C36A);font-weight:600} .dvx-mticker-ttl{font-family:var(--dv-sans,system-ui,sans-serif)} .dvx-mticker-date{font-family:var(--mono2,ui-monospace,monospace);font-size:11px;color:rgba(245,245,247,.4);flex-shrink:0} .dvx-mticker-dot{color:rgba(245,245,247,.35);padding-right:22px} .dvx-mticker-all{flex-shrink:0;font-family:var(--mono2,ui-monospace,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold,#E8C36A);text-decoration:none;font-weight:600;padding:6px 10px;border:1px solid rgba(232,195,106,.35);border-radius:3px;white-space:nowrap} .dvx-mticker-all:hover{background:rgba(232,195,106,.12)} .dvx-mticker[hidden]{display:none !important} @media (max-width:640px){ .dvx-mticker{padding:0 10px;gap:8px;min-height:38px} .dvx-mticker-item{font-size:13px} } /* ---------- menu Especialidades em 3 colunas (todos os mini-sites) ---------- */ .dvx-drop.open .dvx-droppanel.dvx-mega { display: flex; gap: 0 26px; align-items: flex-start; min-width: min(94vw, 900px); max-width: min(94vw, 900px); } .dvx-mega .dvx-megacol { flex: 1 1 0; min-width: 0; } .dvx-mega .dvx-megahead { font-family: var(--mono2); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dv-n-40); padding: 0 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .dvx-mega a { padding: 8px 6px; } .dvx-mega a small { font-size: 11.5px; } .dvx-navnews { display: inline-flex; align-items: center; } @media (max-width: 1080px) { .dvx-drop.open .dvx-droppanel.dvx-mega { flex-wrap: wrap; } .dvx-mega .dvx-megacol { flex: 1 1 240px; } }