/* ============================================================ Site Institucional ArtWeb -- frontend.css Identidade visual portada do briefing da Grafica Ipanema. Tokens escopados em .aw-inst-pagina (cores + tipografia + spacing). Cliente pode sobrescrever via CSS extra no tema do WordPress. ============================================================ */ /* v2.4.2 — Estrategia simplificada: o JS (frontend.js) sempre move .aw-inst-pagina direto pro , escapando do widget Elementor. Sem isso o break-out via CSS bagunçava em ultrawide (left:50% + margin-left:-50vw deslocava o conteudo pra direita). Agora o CSS e simples: width:100%. Apos o JS mover, ja fica edge-to-edge naturalmente. */ .aw-inst-pagina { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; } .aw-inst-pagina * { box-sizing: border-box; } html:has(.aw-inst-pagina), body:has(.aw-inst-pagina) { overflow-x: hidden; } /* v2.4.2 — JS sempre move .aw-inst-pagina pro body. Estas regras de :has() ficaram aqui só como rede de segurança se o JS falhar. */ .elementor-widget-shortcode:has(.aw-inst-pagina), .elementor-widget-shortcode:has(.aw-inst-pagina) > .elementor-widget-container { overflow: visible !important; max-width: none !important; } /* ======================================================================== DESIGN TOKENS — GRÁFICA IPANEMA v1.0 (escopados em .aw-inst-pagina para não vazarem para o tema/WP-admin) ======================================================================== */ .aw-inst-pagina { /* Azul marinho — primary */ --primary-deep: #071021; --primary-950: #050B1A; --primary-900: #0A1628; --primary-800: #0F1E38; --primary-700: #162A4A; --primary-600: #1E3A5F; --primary-500: #2B4A73; --primary-400: #4A6B95; --primary-300: #7A94B5; --primary-200: #B8C6D8; --primary-100: #E0E6EF; /* Dourado — accent (herdado da embalagem Body Splash) */ --gold-700: #6B5221; --gold-600: #8A6B28; --gold-500: #B8933F; --gold-400: #C9A961; --gold-300: #D9BC7E; --gold-200: #E8D4A4; --gold-100: #F5E9CF; /* Neutros papel + tinta */ --cream-50: #FAF8F3; --cream-100: #F4F0E6; --cream-200: #E8E0CC; --cream-300: #D4C9A8; --ink-900: #0B0D12; --ink-800: #1A1D26; --ink-700: #2A2F3C; --ink-600: #3A404E; --ink-500: #5A6070; --ink-400: #8A8F9E; --ink-300: #B0B5C0; /* Layout offsets — usados pelas regras gi-* (chrome v2.4.0) */ --header-h: 72px; --topbar-h: 32px; /* Tipografia */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Escala tipográfica fluida */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: clamp(1.75rem, 3vw, 2.5rem); --fs-3xl: clamp(2.25rem, 4vw, 3.25rem); --fs-4xl: clamp(2.5rem, 5vw, 4rem); --fs-5xl: clamp(3rem, 6vw, 5.25rem); /* Espaçamento */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Raios */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px; /* Container */ --container: 1280px; --container-narrow: 1080px; /* Transições */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ======================================================================== SCOPED WRAPPER — isola o plugin dentro de page builders / temas hostis Garante que cor, tipografia e fundo vivam dentro de .aw-inst-pagina mesmo quando o tema (TwentyTwentyFive, Elementor canvas) sobrepõe body. ======================================================================== */ .aw-inst-pagina, .aw-inst-pagina * { box-sizing: border-box; } .aw-inst-pagina { display: block; position: relative; width: 100%; margin: 0; padding: 0; font-family: var(--font-body, 'Manrope', sans-serif); font-size: var(--fs-base, 16px); font-weight: 400; line-height: 1.6; letter-spacing: normal; color: var(--ink-800, #1A1D26); background: var(--cream-50, #FAF8F3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .aw-inst-pagina h1, .aw-inst-pagina h2, .aw-inst-pagina h3, .aw-inst-pagina h4, .aw-inst-pagina h5, .aw-inst-pagina h6 { font-weight: inherit; letter-spacing: normal; line-height: 1.125; color: inherit; margin: 0; } .aw-inst-pagina p { margin: 0; } .aw-inst-pagina ul, .aw-inst-pagina ol { margin: 0; padding: 0; list-style: none; } .aw-inst-pagina a { color: inherit; text-decoration: none; } .aw-inst-pagina a:hover { text-decoration: none; } .aw-inst-pagina img, .aw-inst-pagina svg { display: block; max-width: 100%; } .aw-inst-pagina button { cursor: pointer; font-family: inherit; border: 0; background: none; } /* Dentro de page-builders (Elementor canvas), position:fixed do header conflita com containers que têm transform/overflow. Trocamos pra sticky no escopo. */ .aw-inst-pagina .site-header { position: sticky; } /* v2.4.4: padding do main zerado. Antes, padding-top:104px no main criava uma faixa cream visivel entre o header (que tem fundo escuro) e o hero (que tambem tem fundo escuro). Agora a primeira section (hero/page-hero) absorve esse offset internamente — fica continuo. */ .aw-inst-pagina .aw-inst-main { padding-top: 0; } .aw-inst-pagina .aw-inst-main > .aw-inst-section:first-child > .hero, .aw-inst-pagina .aw-inst-main > .aw-inst-section:first-child > .page-hero, .aw-inst-pagina .aw-inst-main > .aw-inst-section:first-child > .gi-hero, .aw-inst-pagina .aw-inst-main > .aw-inst-section:first-child > section { padding-top: calc(var(--topbar-h) + var(--header-h) + var(--space-12)) !important; } /* ======================================================================== RESET + BASE Regras *, html, body, img, svg, button, a removidas — vazavam para o tema WP e quebravam layout fora do plugin. As versões escopadas em .aw-inst-pagina img/svg/button/a já vivem acima (linhas ~137-140). :root foi movido para .aw-inst-pagina. ======================================================================== */ .aw-inst-pagina .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); } .aw-inst-pagina .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); } @media (min-width: 768px) { .aw-inst-pagina .container, .aw-inst-pagina .container-narrow { padding: 0 var(--space-8); } } /* ======================================================================== NAVEGAÇÃO (header global) ======================================================================== */ .aw-inst-pagina .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201, 169, 97, 0.12); transition: all 0.3s var(--ease); } .aw-inst-pagina .site-header.scrolled { background: rgba(5, 11, 26, 0.96); } .aw-inst-pagina .nav-inner { max-width: var(--container); margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } @media (min-width: 768px) { .aw-inst-pagina .nav-inner { padding: var(--space-5) var(--space-8); } } .aw-inst-pagina .nav-logo { display: flex; align-items: center; gap: var(--space-3); color: var(--cream-50); } .aw-inst-pagina .nav-logo-mark { width: 36px; height: 36px; border: 1.5px solid var(--gold-400); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px; border-radius: 2px; flex-shrink: 0; } .aw-inst-pagina .nav-logo-mark span { background: var(--gold-400); border-radius: 50%; } .aw-inst-pagina .nav-logo-mark span:nth-child(2) { background: transparent; } .aw-inst-pagina .nav-logo-text { display: flex; flex-direction: column; line-height: 1; } .aw-inst-pagina .nav-logo-text small { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--gold-300); letter-spacing: 0.04em; } .aw-inst-pagina .nav-logo-text strong { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--cream-50); letter-spacing: 0.02em; margin-top: 2px; } .aw-inst-pagina .nav-menu { display: none; gap: var(--space-8); list-style: none; } @media (min-width: 900px) { .aw-inst-pagina .nav-menu { display: flex; } } .aw-inst-pagina .nav-menu a { font-size: var(--fs-sm); font-weight: 500; color: var(--primary-200); transition: color 0.2s var(--ease); position: relative; padding: var(--space-1) 0; } .aw-inst-pagina .nav-menu a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--gold-400); transition: width 0.3s var(--ease); } .aw-inst-pagina .nav-menu a:hover, .aw-inst-pagina .nav-menu a.active { color: var(--gold-300); } .aw-inst-pagina .nav-menu a:hover::after, .aw-inst-pagina .nav-menu a.active::after { width: 100%; } .aw-inst-pagina .nav-cta { display: none; padding: 10px 22px; background: var(--gold-400); color: var(--primary-950); border: none; border-radius: var(--radius-full); font-weight: 600; font-size: var(--fs-sm); transition: all 0.3s var(--ease); } @media (min-width: 700px) { .aw-inst-pagina .nav-cta { display: inline-flex; align-items: center; gap: var(--space-2); } } .aw-inst-pagina .nav-cta:hover { background: var(--gold-300); transform: translateY(-1px); } .aw-inst-pagina .nav-mobile-toggle { display: flex; flex-direction: column; gap: 4px; background: transparent; border: none; padding: 8px; } @media (min-width: 900px) { .aw-inst-pagina .nav-mobile-toggle { display: none; } } .aw-inst-pagina .nav-mobile-toggle span { width: 22px; height: 1.5px; background: var(--cream-50); transition: all 0.3s var(--ease); } .aw-inst-pagina .nav-mobile-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .aw-inst-pagina .nav-mobile-toggle.open span:nth-child(2) { opacity: 0; } .aw-inst-pagina .nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Drawer mobile — display:none por padrão. Estratégia anterior usava transform:translateX(100%) pra esconder, mas o Elementor/tema podia sobrescrever o transform (containers com transform:none ou will-change:transform) deixando o drawer visível no desktop. */ .aw-inst-pagina .nav-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; /* Hex literal em vez de var(--primary-950) — em alguns contextos fixed/animados o custom property nao resolve confiavelmente e o drawer aparece transparente. */ background-color: #050B1A; padding: var(--space-8) var(--space-6); flex-direction: column; gap: var(--space-6); /* z-index acima do header (100) pra garantir que o drawer cobre o header e nao fica visualmente "atras" dele. */ z-index: 999; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.6); border-left: 1px solid rgba(201, 169, 97, 0.25); animation: awInstDrawerIn 0.35s var(--ease-out); } .aw-inst-pagina .nav-mobile-menu.open { display: flex; } @media (min-width: 900px) { /* Em desktop nunca aparece, mesmo se .open vazou (defesa contra JS bug). */ .aw-inst-pagina .nav-mobile-menu, .aw-inst-pagina .nav-mobile-menu.open { display: none; } } @keyframes awInstDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .aw-inst-pagina .nav-mobile-menu a { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--cream-50); padding: var(--space-3) 0; border-bottom: 1px solid rgba(201, 169, 97, 0.15); } .aw-inst-pagina .nav-mobile-menu a.active { color: var(--gold-400); } .aw-inst-pagina .nav-mobile-menu .nav-cta { display: inline-flex; width: fit-content; margin-top: var(--space-4); } /* ======================================================================== PÁGINAS SPA — sistema de rotas por hash ATENÇÃO: WordPress aplica a classe .page no em qualquer page do site (body.page page-id-N page-template-default). Sem o escopo .aw-inst-pagina, esta regra escondia o site inteiro no frontend (bug crítico v2.1.x-v2.2.1). ======================================================================== */ .aw-inst-pagina .page { display: none; } .aw-inst-pagina .page.active { display: block; animation: fadeIn 0.4s var(--ease-out); } @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .aw-inst-pagina main { padding-top: 68px; } /* ======================================================================== COMPONENTES GLOBAIS ======================================================================== */ /* Pill / eyebrow */ .aw-inst-pagina .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold-500); margin-bottom: var(--space-5); } .aw-inst-pagina .eyebrow-dark { color: var(--gold-300); } .aw-inst-pagina .eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .aw-inst-pagina .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; border-radius: var(--radius-full); background: rgba(201, 169, 97, 0.1); border: 1px solid rgba(201, 169, 97, 0.3); color: var(--gold-300); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .aw-inst-pagina .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 8px var(--gold-400); } .aw-inst-pagina .pill-light { background: rgba(10, 22, 40, 0.06); border-color: rgba(10, 22, 40, 0.12); color: var(--primary-700); } .aw-inst-pagina .pill-light .pill-dot { background: var(--gold-500); box-shadow: 0 0 6px rgba(201, 169, 97, 0.5); } /* Botões */ .aw-inst-pagina .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; line-height: 1; padding: 16px 28px; border-radius: var(--radius-full); border: none; cursor: pointer; transition: all 0.3s var(--ease); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .aw-inst-pagina .btn .arrow { transition: transform 0.3s var(--ease); display: inline-block; } .aw-inst-pagina .btn:hover .arrow { transform: translateX(4px); } .aw-inst-pagina .btn-primary { background: var(--gold-400); color: var(--primary-950); box-shadow: 0 4px 20px rgba(201, 169, 97, 0.3); } .aw-inst-pagina .btn-primary:hover { background: var(--gold-300); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201, 169, 97, 0.45); } .aw-inst-pagina .btn-secondary { background: transparent; color: var(--primary-900); border: 1.5px solid var(--primary-900); } .aw-inst-pagina .btn-secondary:hover { background: var(--primary-900); color: var(--cream-50); } .aw-inst-pagina .btn-ghost-light { background: transparent; color: var(--cream-50); border: 1.5px solid rgba(245, 238, 221, 0.3); } .aw-inst-pagina .btn-ghost-light:hover { background: rgba(245, 238, 221, 0.05); border-color: var(--gold-400); color: var(--gold-300); } /* Títulos de seção */ .aw-inst-pagina .section-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--primary-900); margin-bottom: var(--space-4); } .aw-inst-pagina .section-title em { font-style: italic; color: var(--gold-600); font-weight: 400; } .aw-inst-pagina .section-title-dark { color: var(--cream-50); } .aw-inst-pagina .section-title-dark em { color: var(--gold-400); } /* Quebra de título: força wrap quando o texto (ou um longo, ou uma palavra sem espaços) não cabe na largura — em vez de estourar horizontal. */ .aw-inst-pagina .section-title, .aw-inst-pagina .hero-headline, .aw-inst-pagina .page-hero-title, .aw-inst-pagina .video-section-title, .aw-inst-pagina .cta-final-title, .aw-inst-pagina .prazo-title, .aw-inst-pagina .produtos-hero-title, .aw-inst-pagina .pilar-card-title, .aw-inst-pagina .prazo-block-title, .aw-inst-pagina .processo-step-title, .aw-inst-pagina .publico-card-title, .aw-inst-pagina .valor-bloco h3, .aw-inst-pagina .emb-product-content h3, .aw-inst-pagina .contato-form-title, .aw-inst-pagina .contato-info-title { overflow-wrap: break-word; } .aw-inst-pagina .section-subtitle { font-size: var(--fs-md); color: var(--ink-500); line-height: 1.7; max-width: 640px; margin-bottom: var(--space-12); } .aw-inst-pagina .section-subtitle-dark { color: var(--primary-200); } /* Seções base */ .aw-inst-pagina section.hero-section { padding: 0; } .aw-inst-pagina section.bg-dark, .aw-inst-pagina section.bg-darker { color: var(--cream-50); position: relative; overflow: hidden; } .aw-inst-pagina section.bg-dark { background: var(--primary-900); } .aw-inst-pagina section.bg-darker { background: var(--primary-950); } .aw-inst-pagina section.bg-light { background: var(--cream-50); padding: var(--space-20) 0; } .aw-inst-pagina section.bg-cream { background: var(--cream-100); padding: var(--space-20) 0; } .aw-inst-pagina section.bg-dark, .aw-inst-pagina section.bg-darker { padding: var(--space-20) 0; } @media (min-width: 768px) { .aw-inst-pagina section.bg-light, .aw-inst-pagina section.bg-cream, .aw-inst-pagina section.bg-dark, .aw-inst-pagina section.bg-darker { padding: var(--space-24) 0; } } /* Halftone pattern — usado em seções escuras */ .aw-inst-pagina .bg-dark::before, .aw-inst-pagina .bg-darker::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(201, 169, 97, 0.1) 1px, transparent 1.5px), radial-gradient(circle at 30% 70%, rgba(201, 169, 97, 0.07) 1px, transparent 1.5px), radial-gradient(circle at 70% 30%, rgba(201, 169, 97, 0.09) 1px, transparent 1.5px), radial-gradient(circle at 85% 80%, rgba(201, 169, 97, 0.06) 1px, transparent 1.5px); background-size: 180px 180px, 220px 220px, 260px 260px, 200px 200px; pointer-events: none; opacity: 0.8; z-index: 0; } .aw-inst-pagina .bg-dark > *, .bg-darker > * { position: relative; z-index: 1; } /* Fio ornamental separador (signature) */ .aw-inst-pagina .ornament-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-10); color: var(--gold-500); } .aw-inst-pagina .ornament-divider::before, .aw-inst-pagina .ornament-divider::after { content: ''; flex: 0 1 120px; height: 1px; background: currentColor; opacity: 0.4; } .aw-inst-pagina .ornament-divider-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ======================================================================== HERO (bg-darker) ======================================================================== */ .aw-inst-pagina .hero { background: var(--primary-950); min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: var(--space-24) 0 var(--space-20); } /* v2.4.5: hero com video de fundo. Quando .hero ganha .hero--video, esconde os pseudo-elementos decorativos pra nao competir com o video, e centraliza o conteudo (sem cartucho ao lado). */ .aw-inst-pagina .hero--video::before, .aw-inst-pagina .hero--video::after { display: none; } .aw-inst-pagina .hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .aw-inst-pagina .hero__bg-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 11, 26, 0.55) 0%, rgba(5, 11, 26, 0.78) 100%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(201, 169, 97, 0.12), transparent 70%); pointer-events: none; } .aw-inst-pagina .hero--video .container { position: relative; z-index: 2; } .aw-inst-pagina .hero-grid--centered { grid-template-columns: 1fr !important; text-align: center; max-width: 880px; margin: 0 auto; } .aw-inst-pagina .hero-grid--centered .hero-content { max-width: none; } .aw-inst-pagina .hero-grid--centered .hero-pill, .aw-inst-pagina .hero-grid--centered .hero-ctas, .aw-inst-pagina .hero-grid--centered .hero-trust { justify-content: center; } .aw-inst-pagina .hero-grid--centered .hero-subhead { margin-left: auto; margin-right: auto; } .aw-inst-pagina .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201, 169, 97, 0.18), transparent 70%), radial-gradient(ellipse 40% 60% at 15% 30%, rgba(201, 169, 97, 0.08), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 50%, rgba(43, 74, 115, 0.4), transparent 70%); pointer-events: none; } .aw-inst-pagina .hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(201, 169, 97, 0.14) 1px, transparent 1.5px), radial-gradient(circle at 30% 70%, rgba(201, 169, 97, 0.1) 1px, transparent 1.5px), radial-gradient(circle at 70% 30%, rgba(201, 169, 97, 0.12) 1px, transparent 1.5px), radial-gradient(circle at 85% 80%, rgba(201, 169, 97, 0.08) 1px, transparent 1.5px); background-size: 160px 160px, 200px 200px, 240px 240px, 180px 180px; pointer-events: none; opacity: 0.9; } .aw-inst-pagina .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; position: relative; z-index: 2; } @media (min-width: 1000px) { .aw-inst-pagina .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-16); } } .aw-inst-pagina .hero-content { max-width: 640px; } .aw-inst-pagina .hero-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 18px; border-radius: var(--radius-full); background: rgba(201, 169, 97, 0.08); border: 1px solid rgba(201, 169, 97, 0.25); color: var(--gold-300); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; max-width: 100%; margin-bottom: var(--space-6); opacity: 0; animation: slideUp 0.7s var(--ease-out) 0.1s forwards; } .aw-inst-pagina .hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 10px var(--gold-400); animation: pulseGlow 2.5s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 8px var(--gold-400); } 50% { box-shadow: 0 0 16px var(--gold-400), 0 0 24px rgba(201, 169, 97, 0.3); } } .aw-inst-pagina .hero-headline { font-family: var(--font-display); font-size: calc(var(--fs-5xl) * 0.7); font-weight: 400; line-height: 1.05; color: #F5EEDD; letter-spacing: -0.03em; margin-bottom: var(--space-6); opacity: 0; animation: slideUp 0.8s var(--ease-out) 0.2s forwards; } .aw-inst-pagina .hero-headline em { font-style: italic; color: var(--gold-400); font-weight: 400; } .aw-inst-pagina .hero-subhead { font-size: var(--fs-md); color: var(--cream-100); line-height: 1.7; margin-bottom: var(--space-8); max-width: 560px; opacity: 0; animation: slideUp 0.8s var(--ease-out) 0.3s forwards; } .aw-inst-pagina .hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); opacity: 0; animation: slideUp 0.8s var(--ease-out) 0.4s forwards; } .aw-inst-pagina .hero-trust { display: flex; gap: var(--space-3) var(--space-6); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--cream-200); opacity: 0; animation: slideUp 0.8s var(--ease-out) 0.5s forwards; } @media (max-width: 600px) { .aw-inst-pagina .hero-trust { gap: var(--space-2) var(--space-4); } } .aw-inst-pagina .hero-trust-item { display: flex; align-items: center; gap: var(--space-2); } .aw-inst-pagina .hero-trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-400); opacity: 0.7; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ======================================================================== SEÇÃO 2 — PILARES (bg-light, claro) ======================================================================== */ .aw-inst-pagina .pilares { background: var(--cream-50); padding: var(--space-20) 0; position: relative; } @media (min-width: 768px) { .aw-inst-pagina .pilares { padding: var(--space-24) 0; } } .aw-inst-pagina .pilares-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-16); } .aw-inst-pagina .pilares-header .section-subtitle { margin: var(--space-4) auto 0; } /* Flex (não grid) — altura do card acompanha o conteúdo, com tudo centralizado na vertical. Mesma lógica das seções "público". */ .aw-inst-pagina .pilares-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); } .aw-inst-pagina .pilar-card { flex: 1 1 260px; max-width: 360px; background: white; padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--cream-200); transition: all 0.4s var(--ease); position: relative; overflow: hidden; } .aw-inst-pagina .pilar-card::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--gold-500); transition: width 0.4s var(--ease); } .aw-inst-pagina .pilar-card:hover::before { width: 100%; } .aw-inst-pagina .pilar-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 22, 40, 0.08); border-color: var(--gold-300); } .aw-inst-pagina .pilar-card-icon { width: 48px; height: 48px; background: var(--gold-100); color: var(--gold-600); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); } .aw-inst-pagina .pilar-card-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400; color: var(--primary-900); line-height: 1.2; margin-bottom: var(--space-3); } .aw-inst-pagina .pilar-card-desc { font-size: var(--fs-base); color: var(--ink-500); line-height: 1.65; } /* ======================================================================== SEÇÃO 3 — PRODUTOS (bg-dark) ======================================================================== */ .aw-inst-pagina .produtos { background: var(--primary-900); } .aw-inst-pagina .produtos-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-16); } .aw-inst-pagina .produtos-hero-card { background: linear-gradient(135deg, var(--primary-800), var(--primary-950)); border: 1px solid rgba(201, 169, 97, 0.2); border-radius: var(--radius-xl); padding: var(--space-10); /* margin-top: a imagem do produto transborda o topo do card, então o card precisa "descer" pra não cobrir o texto da seção acima. Mobile usa menos (espaço de tela escasso); o desktop sobe pra --space-24 no media query. */ margin-top: var(--space-12); margin-bottom: var(--space-8); display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; position: relative; /* visible: deixa a imagem do produto transbordar as laterais do card. A section .bg-dark tem overflow:hidden e segura o scroll horizontal. */ overflow: visible; transition: all 0.4s var(--ease); } .aw-inst-pagina .produtos-hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400), transparent); } .aw-inst-pagina .produtos-hero-card:hover { border-color: rgba(201, 169, 97, 0.4); transform: translateY(-4px); } @media (min-width: 768px) { .aw-inst-pagina .produtos-hero-card { grid-template-columns: 1fr 1fr; padding: var(--space-12); margin-top: var(--space-24); } /* Respiro entre o texto e a imagem — o texto quebra a linha mais cedo. */ .aw-inst-pagina .produtos-hero-content { padding-right: var(--space-16); } } .aw-inst-pagina .produtos-hero-content .eyebrow { margin-bottom: var(--space-4); } .aw-inst-pagina .produtos-hero-title { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--cream-50); line-height: 1.15; margin-bottom: var(--space-4); } .aw-inst-pagina .produtos-hero-title em { color: var(--gold-400); font-style: italic; } .aw-inst-pagina .produtos-hero-desc { color: var(--primary-200); line-height: 1.7; margin-bottom: var(--space-6); font-size: var(--fs-base); } .aw-inst-pagina .produtos-hero-cta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--gold-300); font-weight: 600; font-size: var(--fs-sm); padding: var(--space-2) 0; border-bottom: 1px solid var(--gold-500); transition: all 0.3s var(--ease); align-self: flex-start; } .aw-inst-pagina .produtos-hero-cta:hover { color: var(--gold-200); border-color: var(--gold-300); gap: var(--space-3); } .aw-inst-pagina .produtos-hero-visual { position: relative; min-height: 150px; min-width: 0; } @media (min-width: 768px) { .aw-inst-pagina .produtos-hero-visual { min-height: 240px; } } /* A imagem do produto "transborda" o card: posicionada em absolute, mais larga que o container (sobra nas laterais), ancorada pela base na borda inferior do card e com z-index acima da seção — assim o topo do produto sobressai pra fora do card e parece maior em altura que o container. */ .aw-inst-pagina .produtos-hero-image { position: absolute; left: 50%; bottom: calc(-1 * var(--space-12) - 10px); transform: translateX(-50%); width: 135%; max-width: 135%; height: auto; display: block; z-index: 5; } @media (min-width: 768px) { .aw-inst-pagina .produtos-hero-image { bottom: calc(-1 * var(--space-16) - 10px); } } /* Grid de produtos menores */ .aw-inst-pagina .produtos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } .aw-inst-pagina .produto-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(201, 169, 97, 0.15); border-radius: var(--radius-lg); padding: var(--space-6); transition: all 0.3s var(--ease); cursor: default; } .aw-inst-pagina .produto-card:hover { background: rgba(201, 169, 97, 0.06); border-color: rgba(201, 169, 97, 0.4); transform: translateY(-3px); } .aw-inst-pagina .produto-card-icon { margin-bottom: var(--space-4); } .aw-inst-pagina .produto-card-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; color: var(--cream-50); line-height: 1.2; margin-bottom: var(--space-2); } .aw-inst-pagina .produto-card-desc { font-size: var(--fs-sm); color: var(--primary-300); line-height: 1.6; } /* ======================================================================== SEÇÃO 4 — PRAZO (bg-light, seção dedicada) ======================================================================== */ .aw-inst-pagina .prazo { background: var(--cream-50); padding: var(--space-20) 0; position: relative; } @media (min-width: 768px) { .aw-inst-pagina .prazo { padding: var(--space-24) 0; } } .aw-inst-pagina .prazo-frame { position: relative; padding: var(--space-16) var(--space-8); background: linear-gradient(135deg, var(--cream-100), var(--cream-50)); border-radius: var(--radius-xl); overflow: hidden; } .aw-inst-pagina .prazo-frame::before { content: ''; position: absolute; inset: 24px; border: 1px solid var(--cream-300); pointer-events: none; border-radius: var(--radius-md); } .aw-inst-pagina .prazo-frame::after { content: ''; position: absolute; inset: 32px; border: 1px solid rgba(201, 169, 97, 0.3); pointer-events: none; border-radius: var(--radius-md); } .aw-inst-pagina .prazo-content { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; } .aw-inst-pagina .prazo-header { text-align: center; margin-bottom: var(--space-12); } .aw-inst-pagina .prazo-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 400; color: var(--primary-900); line-height: 1.1; margin-bottom: var(--space-4); letter-spacing: -0.02em; } .aw-inst-pagina .prazo-title em { color: var(--gold-600); font-style: italic; } .aw-inst-pagina .prazo-subtitle { font-size: var(--fs-md); color: var(--ink-500); max-width: 560px; margin: 0 auto; line-height: 1.7; } .aw-inst-pagina .prazo-blocks { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: var(--space-12) 0; } @media (min-width: 800px) { .aw-inst-pagina .prazo-blocks { grid-template-columns: repeat(3, 1fr); } } .aw-inst-pagina .prazo-block { text-align: center; padding: var(--space-6); position: relative; } .aw-inst-pagina .prazo-block:not(:last-child)::after { content: ''; display: none; position: absolute; top: 30%; right: -12px; width: 1px; height: 40%; background: var(--cream-300); } @media (min-width: 800px) { .aw-inst-pagina .prazo-block:not(:last-child)::after { display: block; } } .aw-inst-pagina .prazo-block-icon { width: 56px; height: 56px; background: var(--gold-100); color: var(--gold-600); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); } .aw-inst-pagina .prazo-block-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400; color: var(--primary-900); margin-bottom: var(--space-3); line-height: 1.2; } .aw-inst-pagina .prazo-block-desc { font-size: var(--fs-base); color: var(--ink-500); line-height: 1.65; max-width: 280px; margin: 0 auto; } .aw-inst-pagina .prazo-closing { text-align: center; padding-top: var(--space-8); border-top: 1px solid var(--cream-300); } .aw-inst-pagina .prazo-closing p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--primary-800); line-height: 1.4; max-width: 520px; margin: 0 auto; } .aw-inst-pagina .prazo-closing p em { color: var(--gold-600); } /* ======================================================================== SEÇÃO 5 — PARA QUEM (bg-cream) ======================================================================== */ .aw-inst-pagina .publico { background: var(--cream-100); padding: var(--space-20) 0; } @media (min-width: 768px) { .aw-inst-pagina .publico { padding: var(--space-24) 0; } } .aw-inst-pagina .publico-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-16); } /* Flex (não grid) pra a altura do card acompanhar o conteúdo — quem tem mais texto fica naturalmente um pouco maior — com tudo centralizado na vertical. Tira a rigidez da grade de altura forçada igual. */ .aw-inst-pagina .publico-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); } .aw-inst-pagina .publico-card { flex: 1 1 190px; max-width: 300px; background: var(--cream-50); padding: var(--space-6); border-radius: var(--radius-lg); text-align: center; transition: all 0.3s var(--ease); border: 1px solid transparent; } .aw-inst-pagina .publico-card:hover { border-color: var(--gold-300); background: white; transform: translateY(-4px); box-shadow: 0 10px 30px rgba(10, 22, 40, 0.06); } .aw-inst-pagina .publico-card-icon { width: 48px; height: 48px; background: var(--gold-100); color: var(--gold-600); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); } .aw-inst-pagina .publico-card-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--primary-900); margin-bottom: var(--space-2); line-height: 1.2; font-weight: 400; } .aw-inst-pagina .publico-card-desc { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.55; } /* Card central em destaque (home · seção "público") — layout 2 + 1 + 2: fica um pouco maior e mais largo que os 4 ao redor, virando a peça central. Tipografia e ícone seguem iguais aos demais. */ .aw-inst-pagina .publico-card--feature { flex-basis: 250px; max-width: 340px; padding: var(--space-8); background: white; border-color: var(--gold-300); } /* ======================================================================== SEÇÃO 6 — PORTFÓLIO (bg-darker) ======================================================================== */ .aw-inst-pagina .portfolio { background: var(--primary-950); } .aw-inst-pagina .portfolio-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-16); } .aw-inst-pagina .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-10); } .aw-inst-pagina .portfolio-item { background: linear-gradient(135deg, var(--primary-800), var(--primary-900)); border: 1px solid rgba(201, 169, 97, 0.15); border-radius: var(--radius-md); aspect-ratio: 3/4; position: relative; overflow: hidden; transition: all 0.4s var(--ease); display: flex; align-items: center; justify-content: center; cursor: pointer; } .aw-inst-pagina .portfolio-item:hover { border-color: rgba(201, 169, 97, 0.5); transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .aw-inst-pagina .portfolio-item-label { position: absolute; bottom: 16px; left: 16px; right: 16px; font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: var(--gold-300); opacity: 0; transform: translateY(10px); transition: all 0.3s var(--ease); z-index: 2; } .aw-inst-pagina .portfolio-item:hover .portfolio-item-label { opacity: 1; transform: translateY(0); } .aw-inst-pagina .portfolio-cta { text-align: center; margin-top: var(--space-8); } /* ======================================================================== SEÇÃO 7 — COMO FUNCIONA (bg-light) ======================================================================== */ .aw-inst-pagina .processo { background: var(--cream-50); padding: var(--space-20) 0; } @media (min-width: 768px) { .aw-inst-pagina .processo { padding: var(--space-24) 0; } } .aw-inst-pagina .processo-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-16); } .aw-inst-pagina .processo-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: 920px; margin: 0 auto; } @media (min-width: 800px) { .aw-inst-pagina .processo-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .aw-inst-pagina .processo-step { text-align: center; position: relative; } .aw-inst-pagina .processo-step-head { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-3); } .aw-inst-pagina .processo-step-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-100); color: var(--gold-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .aw-inst-pagina .processo-step-num { font-family: var(--font-display); font-style: italic; font-size: 80px; line-height: 1; color: var(--gold-400); margin-bottom: var(--space-4); display: block; } .aw-inst-pagina .processo-step-title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--primary-900); margin-bottom: var(--space-3); line-height: 1.2; font-weight: 400; } .aw-inst-pagina .processo-step-desc { color: var(--ink-500); line-height: 1.65; max-width: 300px; margin: 0 auto; } /* ======================================================================== SEÇÃO 8 — FAQ (bg-light) ======================================================================== */ .aw-inst-pagina .faq { background: var(--cream-100); padding: var(--space-20) 0; } @media (min-width: 768px) { .aw-inst-pagina .faq { padding: var(--space-24) 0; } } .aw-inst-pagina .faq-inner { max-width: 800px; margin: 0 auto; } .aw-inst-pagina .faq-header { text-align: center; margin-bottom: var(--space-12); } .aw-inst-pagina .faq-list { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .aw-inst-pagina .faq-item { background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); overflow: hidden; /* min-width:0: sem isso o flex item não encolhe abaixo do conteúdo e a pergunta longa empurra a largura em vez de quebrar linha. */ min-width: 0; transition: all 0.3s var(--ease); } .aw-inst-pagina .faq-item.open { border-color: var(--gold-300); background: white; box-shadow: 0 10px 30px rgba(10, 22, 40, 0.06); } .aw-inst-pagina .faq-question { padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font-display); font-size: var(--fs-md); color: var(--primary-900); font-weight: 400; line-height: 1.3; /* normal: o