/* ========================================================== THEME 2026 — identidade creme & dourado (Avantik) Creme #FBF7EE + grafite #232427 + dourado #E3B341 Bricolage Grotesque (títulos) + Instrument Sans (texto) Carregado APENAS pelas páginas com , sempre DEPOIS do style.css. Nenhuma regra aqui afeta páginas sem a classe — hoje só a home usa este tema. ========================================================== */ /* ---------- 0. Fontes auto-hospedadas ---------- */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-400-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-400-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- 1. Tokens ---------- */ body.theme-2026 { --font-heading: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Instrument Sans', system-ui, sans-serif; /* Paleta */ --av-cream: #FBF7EE; --av-white: #FFFFFF; --av-ink: #232323; --av-ink-2: #5c564a; --av-ink-3: #6b6558; --av-ink-4: #8a8272; --av-gold: #E3B341; --av-gold-hi: #ecc35c; /* Dourado de TEXTO. #A08432 dava 3.36:1 sobre o creme — reprova no AA para texto pequeno (4.5:1). Este da 4.71 no creme e 5.04 no branco. */ --av-gold-deep: #856C24; /* Dourado dos numeros decorativos grandes (>=24px bold): o AA cobra so 3:1, entao aqui cabe um tom mais luminoso — 3.36 no creme, 3.60 no branco. */ --av-gold-num: #A08432; --av-gold-soft: #e6cf94; --av-dark: #232427; --av-dark-2: #1d1e21; --av-dark-3: #1b1c1e; --av-dark-card: #2b2c2f; --av-dark-card-2: #26272a; --av-on-dark: #f5f2ea; --av-on-dark-2: #a9a49a; --av-on-dark-3: #9b968b; --av-line: #eadfc6; --av-line-2: #eee4cd; /* Tokens compartilhados do style.css, remapeados */ --color-bg: var(--av-cream); --color-text: var(--av-ink); --color-text-secondary: var(--av-ink-3); --color-text-muted: var(--av-ink-4); --color-primary: var(--av-gold-deep); --color-primary-light: var(--av-gold); --color-accent: var(--av-gold); --color-accent-hover: var(--av-gold-hi); --color-accent-light: rgba(227, 179, 65, 0.14); --color-surface: var(--av-white); --color-border: var(--av-line-2); --color-muted-bg: rgba(227, 179, 65, 0.08); --color-dark: var(--av-dark); --color-dark-surface: var(--av-dark-card); --color-dark-border: rgba(255, 255, 255, 0.08); --radius-xs: 99px; --radius-sm: 99px; --radius-md: 16px; --radius-lg: 20px; --container-max: 1240px; --section-py: clamp(3.5rem, 7vw, 5rem); /* Dourado usado como TEXTO (rotulos, kickers). Sobre creme/branco precisa ser o tom profundo; as bandas escuras redefinem para o dourado claro. */ --av-eyebrow: var(--av-gold-deep); background: var(--av-cream); color: var(--av-ink); font-family: var(--font-body); } body.theme-2026 h1, body.theme-2026 h2, body.theme-2026 h3, body.theme-2026 h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; } body.theme-2026 ::selection { background: rgba(227, 179, 65, 0.4); color: var(--av-ink); } body.theme-2026 :focus-visible { outline: 2px solid var(--av-gold); outline-offset: 3px; border-radius: 4px; } /* ---------- 2. Botões ---------- */ .theme-2026 .btn { font-family: var(--font-body); font-weight: 700; border-radius: 99px; letter-spacing: 0; } .theme-2026 .btn--accent { background: var(--av-gold); color: var(--av-ink); border: 1.5px solid var(--av-gold); box-shadow: 0 10px 30px rgba(227, 179, 65, 0.22); } .theme-2026 .btn--accent:hover { background: var(--av-gold-hi); border-color: var(--av-gold-hi); color: var(--av-ink); box-shadow: 0 14px 36px rgba(227, 179, 65, 0.32); } .theme-2026 .btn--outline { background: transparent; color: var(--av-ink); border: 1.5px solid var(--av-line); } .theme-2026 .btn--outline:hover { border-color: var(--av-gold); background: rgba(227, 179, 65, 0.08); } .theme-2026 .btn--outline-dark { background: transparent; color: var(--av-on-dark); border: 1.5px solid rgba(255, 255, 255, 0.25); } .theme-2026 .btn--outline-dark:hover { border-color: var(--av-gold); background: rgba(227, 179, 65, 0.1); color: var(--av-on-dark); } .theme-2026 .btn--lg { font-size: 1.03125rem; padding: 1.0625rem 1.9375rem; } .theme-2026 .btn--sm { font-size: 0.875rem; padding: 0.625rem 1.25rem; } /* ---------- 3. Header ---------- */ /* Com o corpo do site em creme, o header transparente (texto e logo brancos) sumiria em qualquer pagina de topo claro — artigos do blog, 404, programas da Academy. Por isso o padrao agora e solido, e ele so volta a ser transparente quando existe uma banda escura logo abaixo dele. */ .theme-2026 .header { background: rgba(29, 30, 33, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.theme-2026:has(.hm-hero, .page-hero, .auth-page, .academy-hero, .sep-hero, .sep-programa-hero, .profile-hero, .palestra-hero) .header:not(.header--scrolled):not(.header--solid) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } .theme-2026 .header--scrolled, .theme-2026 .header--solid { background: rgba(29, 30, 33, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); } .theme-2026 .header__nav { height: 76px; } .theme-2026 .header__logo-img, .theme-2026 .header--scrolled .header__logo-img { filter: brightness(0) invert(1); } .theme-2026 .header__link, .theme-2026 .header--scrolled .header__link { font-size: 0.875rem; font-weight: 500; color: #b6b2a8; } .theme-2026 .header__link:hover, .theme-2026 .header--scrolled .header__link:hover { color: var(--av-on-dark); } .theme-2026 .header__link::after { background: var(--av-gold); } .theme-2026 .header .btn--outline, .theme-2026 .header--scrolled .btn--outline { color: var(--av-on-dark); border-color: rgba(255, 255, 255, 0.22); background: transparent; } .theme-2026 .header .btn--outline:hover, .theme-2026 .header--scrolled .btn--outline:hover { border-color: var(--av-gold); background: rgba(227, 179, 65, 0.1); color: var(--av-on-dark); } .theme-2026 .header .btn--accent, .theme-2026 .header--scrolled .btn--accent { background: var(--av-gold); color: var(--av-ink); border: 1.5px solid var(--av-gold); box-shadow: none; } .theme-2026 .header .btn--accent:hover, .theme-2026 .header--scrolled .btn--accent:hover { background: var(--av-gold-hi); border-color: var(--av-gold-hi); color: var(--av-ink); } .theme-2026 .header .btn:not(.btn--accent):not(.btn--outline), .theme-2026 .header--scrolled .btn:not(.btn--accent):not(.btn--outline) { color: var(--av-on-dark); border: 1.5px solid rgba(255, 255, 255, 0.22); } .theme-2026 .header__burger span { background: var(--av-on-dark); } /* Menu mobile */ .theme-2026 .header__mobile { background: var(--av-dark-2); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .theme-2026 .header__mobile-link { color: var(--av-on-dark); border-bottom-color: rgba(255, 255, 255, 0.08); } .theme-2026 .header__mobile-link:hover { color: var(--av-gold); } /* Dropdown do usuário logado sobre o header escuro */ .theme-2026 .user-menu__panel { background: var(--av-dark-card); border-color: rgba(255, 255, 255, 0.1); } .theme-2026 .user-menu__name, .theme-2026 .user-menu__header strong, .theme-2026 .user-menu__item { color: var(--av-on-dark); } .theme-2026 .user-menu__header span { color: var(--av-on-dark-3); } /* ---------- 4. Blocos de seção ---------- */ .theme-2026 .hm-band { background: var(--av-cream); } .theme-2026 .hm-band--dark { background: var(--av-dark); color: var(--av-on-dark); } .theme-2026 .hm-band--white { background: var(--av-white); border-top: 1px solid var(--av-line-2); border-bottom: 1px solid var(--av-line-2); } .theme-2026 .hm-eyebrow { display: block; font-size: 0.8125rem; letter-spacing: 0.18em; font-weight: 700; color: var(--av-gold-deep); text-transform: uppercase; } .theme-2026 .hm-band--dark .hm-eyebrow { color: var(--av-gold-soft); } .theme-2026 .hm-title { font-size: clamp(1.75rem, 4.4vw, 2.125rem); line-height: 1.15; color: var(--av-ink); margin: 0.625rem 0 0; } .theme-2026 .hm-band--dark .hm-title { color: var(--av-on-dark); } .theme-2026 .hm-lead { color: var(--av-ink-3); font-size: 0.96875rem; line-height: 1.6; margin: 0.5rem 0 0; } .theme-2026 .hm-link { font-size: 0.9375rem; font-weight: 700; color: var(--av-ink); border-bottom: 2px solid var(--av-gold); white-space: nowrap; padding-bottom: 2px; transition: color 0.25s; } .theme-2026 .hm-link:hover { color: var(--av-gold-deep); } /* ---------- 5. Hero ---------- */ .theme-2026 .hm-hero { position: relative; background: linear-gradient(180deg, var(--av-dark), var(--av-dark-2)); overflow: hidden; } .theme-2026 .hm-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 700px 460px at 82% 8%, rgba(227, 179, 65, 0.12), transparent 65%); pointer-events: none; } .theme-2026 .hm-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; padding-top: calc(76px + clamp(2rem, 5vw, 3.75rem)); padding-bottom: clamp(2.75rem, 6vw, 3.25rem); } .theme-2026 .hm-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(227, 179, 65, 0.35); border-radius: 99px; padding: 0.4375rem 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--av-gold-soft); } .theme-2026 .hm-hero__badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--av-gold); } .theme-2026 .hm-hero__title { font-size: clamp(2.75rem, 6.4vw, 4.125rem); line-height: 1.02; color: #f7f4ec; margin: 1.375rem 0 0; } .theme-2026 .hm-hero__title em { font-style: normal; color: var(--av-gold); } .theme-2026 .hero__tabs { display: flex; gap: 0.625rem; margin: 1.125rem 0 0; border-bottom: none; } .theme-2026 .hero__tab { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: #c9c4b8; background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 99px; padding: 0.4375rem 1.125rem; white-space: nowrap; transition: background 0.25s, color 0.25s, border-color 0.25s; } .theme-2026 .hero__tab::after { content: none; } .theme-2026 .hero__tab:hover { border-color: rgba(227, 179, 65, 0.6); color: var(--av-on-dark); } .theme-2026 .hero__tab--active { background: var(--av-gold); border-color: var(--av-gold); color: var(--av-ink); font-weight: 700; } .theme-2026 .hero__subtitle { font-size: 1.15625rem; line-height: 1.55; color: var(--av-on-dark-2); max-width: 470px; margin: 1.25rem 0 0; } .theme-2026 .hm-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; margin-top: 1.75rem; } .theme-2026 .hm-hero__stats { display: flex; gap: 2rem; margin-top: 2.25rem; font-size: 0.875rem; color: #8f8b81; } .theme-2026 .hm-hero__stat b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.625rem; color: var(--av-gold); line-height: 1.1; } /* Coluna visual do hero */ .theme-2026 .hm-hero__visual { display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; padding: 1rem 0; } .theme-2026 .hm-mock { width: 270px; max-width: 100%; background: var(--av-dark-card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); animation: hmFloat 8s ease-in-out infinite; } .theme-2026 .hm-mock__media { position: relative; height: 210px; background: linear-gradient(150deg, #34353a, #232427); } .theme-2026 .hm-mock__media svg { width: 100%; height: 100%; display: block; } .theme-2026 .hm-mock__flags { position: absolute; top: 12px; left: 12px; display: flex; gap: 0.375rem; } .theme-2026 .hm-mock__flags span { background: rgba(24, 24, 26, 0.85); color: var(--av-gold-soft); font-size: 0.71875rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 99px; } .theme-2026 .hm-mock__body { padding: 1rem 1.125rem; } .theme-2026 .hm-mock__name { color: var(--av-on-dark); font-size: 1.03125rem; font-weight: 700; } .theme-2026 .hm-mock__role { color: var(--av-on-dark-3); font-size: 0.8125rem; margin-top: 2px; } .theme-2026 .hm-mock__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; } .theme-2026 .hm-mock__tags span { border: 1px solid rgba(227, 179, 65, 0.35); color: #d9d4c8; font-size: 0.71875rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 99px; } .theme-2026 .hm-mock__foot { margin-top: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.75rem; display: flex; justify-content: space-between; align-items: center; } .theme-2026 .hm-mock__rating { color: var(--av-gold); font-size: 0.875rem; } .theme-2026 .hm-mock__rating b { color: var(--av-on-dark); } .theme-2026 .hm-mock__price { color: #d9d4c8; font-size: 0.875rem; font-weight: 700; } .theme-2026 .hm-mock-note { align-self: flex-start; max-width: 250px; background: var(--av-dark-card-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 0.875rem 1.125rem; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); animation: hmFloat2 7s ease-in-out 0.5s infinite; } .theme-2026 .hm-mock-note__title { font-size: 0.75rem; color: #8f8b81; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: 0.08em; } .theme-2026 .hm-mock-note__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .theme-2026 .hm-mock-note__tags a { background: rgba(227, 179, 65, 0.14); color: var(--av-gold-soft); font-size: 0.78125rem; font-weight: 700; padding: 0.375rem 0.75rem; border-radius: 99px; transition: background 0.25s, color 0.25s; } .theme-2026 .hm-mock-note__tags a:hover { background: rgba(227, 179, 65, 0.28); color: #fff; } @keyframes hmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes hmFloat2 { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(4px); } } /* ---------- 6. Como funciona ---------- */ .theme-2026 .hm-how { padding-top: clamp(3rem, 6vw, 4rem); padding-bottom: clamp(2.75rem, 6vw, 3.5rem); } .theme-2026 .hm-how__header { text-align: center; } .theme-2026 .hm-how__header .hm-title { font-size: clamp(1.875rem, 5vw, 2.375rem); } .theme-2026 .how__tabs { display: inline-flex; justify-content: center; background: var(--av-white); border: 1.5px solid var(--av-line); border-radius: 99px; padding: 5px; margin: 1.25rem 0 0; } .theme-2026 .how__tabs::after { content: none; } .theme-2026 .hm-how__switch { text-align: center; margin-bottom: 1.75rem; } .theme-2026 .how__tab { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--av-ink-3); padding: 0.5625rem 1.375rem; border-radius: 99px; white-space: nowrap; transition: background 0.25s, color 0.25s; } .theme-2026 .how__tab::after { content: none; } .theme-2026 .how__tab:hover { color: var(--av-ink); } .theme-2026 .how__tab--active, .theme-2026 .how__tab--active:hover { background: var(--av-ink); color: var(--av-gold); font-weight: 700; } .theme-2026 .hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .theme-2026 .hm-step { background: var(--av-white); border: 1px solid var(--av-line-2); border-radius: 20px; padding: 1.75rem; } .theme-2026 .hm-step__n { font-family: var(--font-heading); font-size: 2.125rem; font-weight: 800; color: var(--av-gold-num); line-height: 1; } .theme-2026 .hm-step__title { font-size: 1.1875rem; font-weight: 700; color: var(--av-ink); margin: 0.75rem 0 0.5rem; } .theme-2026 .hm-step__text { color: var(--av-ink-3); font-size: 0.90625rem; line-height: 1.6; margin: 0; } /* ---------- 7. Categorias ---------- */ .theme-2026 .hm-cats { padding-top: 0; padding-bottom: clamp(2.75rem, 6vw, 3.5rem); } .theme-2026 .hm-cats__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; } .theme-2026 .hm-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.375rem; } .theme-2026 .hm-chip { background: var(--av-white); border: 1.5px solid var(--av-line); border-radius: 14px; padding: 0.75rem 1.125rem; display: inline-flex; align-items: baseline; gap: 0.5rem; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .theme-2026 .hm-chip:hover { border-color: var(--av-gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(160, 132, 50, 0.1); } .theme-2026 .hm-chip b { font-size: 0.90625rem; font-weight: 700; color: var(--av-ink); } .theme-2026 .hm-chip span { font-size: 0.71875rem; color: var(--av-gold-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .theme-2026 .hm-chip--featured { background: var(--av-ink); border-color: var(--av-ink); } .theme-2026 .hm-chip--featured b { color: var(--av-on-dark); } .theme-2026 .hm-chip--featured span { color: var(--av-gold); } /* ---------- 8. Palestrantes em destaque ---------- */ .theme-2026 .speakers { background: var(--av-cream); padding-top: 0; padding-bottom: clamp(2.75rem, 6vw, 3.5rem); } .theme-2026 .speakers__header { text-align: left; margin-bottom: 1.375rem; } .theme-2026 .speakers__label { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.18em; font-weight: 700; color: var(--av-gold-deep); text-transform: uppercase; margin-bottom: 0; } .theme-2026 .speakers__title { font-size: clamp(1.75rem, 4.4vw, 2.125rem); color: var(--av-ink); margin: 0.625rem 0 0; } .theme-2026 .speakers__subtitle { margin: 0.5rem 0 0; max-width: 620px; font-size: 0.96875rem; color: var(--av-ink-3); } .theme-2026 .speakers__fade--left { background: linear-gradient(to right, var(--av-cream) 0%, transparent 100%); } .theme-2026 .speakers__fade--right { background: linear-gradient(to left, var(--av-cream) 0%, transparent 100%); } .theme-2026 .speakers__arrow { background: var(--av-white); border: 1.5px solid var(--av-line); color: var(--av-ink); box-shadow: 0 6px 18px rgba(160, 132, 50, 0.12); } .theme-2026 .speakers__arrow:hover { background: var(--av-white); border-color: var(--av-gold); color: var(--av-gold-deep); } .theme-2026 .speakers__card { background: var(--av-white); border: 1px solid var(--av-line-2); border-radius: 20px; } .theme-2026 .speakers__card:hover { border-color: var(--av-gold); box-shadow: 0 18px 40px rgba(160, 132, 50, 0.14); } .theme-2026 .speakers__name { font-size: 1.03125rem; color: var(--av-ink); } .theme-2026 .speakers__tags span { background: transparent; border: 1px solid rgba(227, 179, 65, 0.45); color: var(--av-ink-3); font-size: 0.71875rem; } .theme-2026 .speakers__bottom { border-top-color: var(--av-line-2); } .theme-2026 .speakers__rating { color: var(--av-gold-num); } .theme-2026 .speakers__price { color: var(--av-ink); font-weight: 700; } /* ---------- 9. Diferenciais ---------- */ .theme-2026 .hm-why { padding-top: clamp(3rem, 6vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 3.5rem); } .theme-2026 .hm-why .hm-title { max-width: 640px; margin-bottom: 1.625rem; } .theme-2026 .hm-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; } .theme-2026 .hm-why__card { background: var(--av-dark-card); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 1.5rem; transition: border-color 0.25s, transform 0.25s; } .theme-2026 .hm-why__card:hover { border-color: rgba(227, 179, 65, 0.5); transform: translateY(-4px); } .theme-2026 .hm-why__n { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--av-gold); line-height: 1; } .theme-2026 .hm-why__title { color: var(--av-on-dark); font-size: 1.03125rem; font-weight: 700; margin: 0.75rem 0 0.5rem; } .theme-2026 .hm-why__text { color: var(--av-on-dark-3); font-size: 0.84375rem; line-height: 1.55; margin: 0; } /* ---------- 10. Sobre ---------- */ .theme-2026 .hm-about { padding-top: clamp(3rem, 6vw, 3.75rem); padding-bottom: clamp(3rem, 6vw, 3.75rem); } .theme-2026 .hm-about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; } .theme-2026 .hm-about__title { font-size: clamp(1.75rem, 4.4vw, 2.125rem); line-height: 1.15; margin: 0.625rem 0 1rem; } .theme-2026 .hm-about__text { color: var(--av-ink-2); font-size: 0.96875rem; line-height: 1.65; margin: 0 0 0.875rem; } .theme-2026 .hm-about__text:last-child { margin-bottom: 0; } .theme-2026 .hm-about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .theme-2026 .hm-about__stat { background: var(--av-white); border: 1px solid var(--av-line-2); border-radius: 18px; padding: 1.375rem; } .theme-2026 .hm-about__num { display: block; font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; color: var(--av-ink); line-height: 1; } .theme-2026 .hm-about__stat span { display: block; color: var(--av-ink-4); font-size: 0.84375rem; margin-top: 0.25rem; } /* ---------- 11. Depoimentos ---------- */ .theme-2026 .hm-videos { padding-top: 0; padding-bottom: clamp(3rem, 6vw, 3.5rem); } .theme-2026 .hm-videos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; margin-top: 1.375rem; } .theme-2026 .hm-video { position: relative; display: block; width: 100%; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--av-line-2); height: 210px; background: #efe8d6; cursor: pointer; } .theme-2026 .hm-video img, .theme-2026 .hm-video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } .theme-2026 .hm-video__play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: rgba(24, 24, 26, 0.8); display: flex; align-items: center; justify-content: center; color: var(--av-gold); transition: transform 0.25s, background 0.25s; } .theme-2026 .hm-video:hover .hm-video__play { transform: scale(1.1); background: rgba(24, 24, 26, 0.95); } /* ---------- 12. Clientes ---------- */ .theme-2026 .clients { background: var(--av-white); border-top: 1px solid var(--av-line-2); border-bottom: 1px solid var(--av-line-2); padding: clamp(1.375rem, 2.4vw, 2.25rem) 0; overflow: hidden; } .theme-2026 .clients__title { font-family: var(--font-body); text-align: center; font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 700; color: var(--av-gold-deep); margin-bottom: 1rem; } .theme-2026 .clients__viewport { overflow: hidden; } .theme-2026 .clients__track { display: flex; align-items: center; gap: clamp(2rem, 3.4vw, 3.75rem); width: max-content; animation: scrollClients 45s linear infinite; } .theme-2026 .clients__logo { flex: 0 0 auto; height: auto; padding: 0; border: none; background: none; border-radius: 0; } .theme-2026 .clients__logo:hover { transform: none; box-shadow: none; } /* O comp do Design usava 34px fixos, o que fica minusculo num monitor largo. Aqui a altura acompanha a largura da tela: 30px no celular, ~45px a 1440px. */ .theme-2026 .clients__logo img { height: clamp(30px, 3.1vw, 48px); max-height: none; width: auto; filter: grayscale(1); opacity: 0.7; transition: filter 0.35s, opacity 0.35s; } .theme-2026 .clients__logo:hover img { filter: grayscale(0); opacity: 1; } /* ---------- 13. CTA final ---------- */ .theme-2026 .hm-cta { text-align: center; padding-top: clamp(3.25rem, 7vw, 4rem); padding-bottom: clamp(3.25rem, 7vw, 4rem); } .theme-2026 .hm-cta__title { font-size: clamp(2rem, 5.4vw, 2.5rem); color: var(--av-on-dark); margin: 0; text-wrap: balance; } .theme-2026 .hm-cta__title span { color: var(--av-gold); } .theme-2026 .hm-cta__text { color: var(--av-on-dark-2); font-size: 1.0625rem; line-height: 1.55; margin: 1rem auto 0; max-width: 560px; } .theme-2026 .hm-cta__actions { margin-top: 1.75rem; } .theme-2026 .hm-cta__alt { display: inline-block; margin-top: 1.125rem; font-size: 0.90625rem; color: var(--av-on-dark-2); border-bottom: 1px solid rgba(227, 179, 65, 0.5); padding-bottom: 2px; transition: color 0.25s; } .theme-2026 .hm-cta__alt:hover { color: var(--av-gold); } /* ---------- 14. Footer ---------- */ .theme-2026 .footer { background: var(--av-dark-3); background-image: none; padding: clamp(2.75rem, 6vw, 3.5rem) 0 1.5rem; } .theme-2026 .footer::before { background: linear-gradient(90deg, transparent, rgba(227, 179, 65, 0.45), transparent); } .theme-2026 .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; } .theme-2026 .footer__desc { color: #8f8b81; font-size: 0.84375rem; max-width: 240px; } .theme-2026 .footer__col-title { font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--av-on-dark); margin-bottom: 0.75rem; } .theme-2026 .footer__links { gap: 0.625rem; } .theme-2026 .footer__links a, .theme-2026 .footer__contact-item { font-size: 0.84375rem; color: var(--av-on-dark-2); } .theme-2026 .footer__links a::after { background: var(--av-gold); } .theme-2026 .footer__links a:hover, .theme-2026 .footer__contact-item:hover { color: var(--av-on-dark); } .theme-2026 .footer__socials a:hover { background: rgba(227, 179, 65, 0.14); border-color: rgba(227, 179, 65, 0.5); color: var(--av-gold); } .theme-2026 .footer p { color: #6b675e; font-size: 0.78125rem; } .theme-2026 .footer__made { color: #6b675e; font-size: 0.78125rem; } /* ---------- 14b. Paginas internas ---------- O style.css e os