/* =====================================================================
Acessibilidade — utilitários globais (WCAG 2.4.1, 1.3.1)
================================================================== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
background: #003a40;
color: #fff;
padding: 12px 20px;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus {
left: 8px;
top: 8px;
outline: 2px solid #cbc9bb;
outline-offset: 2px;
}
/* =====================================================================
Inputs — evita auto-zoom no iOS (font-size deve ser >= 16px)
Override do webflow.css (.w-input { font-size: 14px })
================================================================== */
.w-input,
.w-select,
.search-input,
textarea.w-input {
font-size: 16px;
}
/* Touch target mínimo 44x44 (WCAG 2.5.5) — search-button era 45x45 */
.search-button,
.search-button-b {
width: 48px;
height: 48px;
}
/* V17 — :focus-visible global amplo (cobre summary/details/role=button/role=tab além dos nativos) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details > summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[contenteditable]:focus-visible {
outline: 2px solid #0050bd;
outline-offset: 2px;
border-radius: 4px;
}
/* Setas do slider — fora do tab order é OK mas precisam aria-label visualmente */
.w-slider-arrow-left,
.w-slider-arrow-right {
cursor: pointer;
}
/* Reduce-motion para usuários com prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* Botão WhatsApp flutuante — reposiciona em mobile para não sobrepor CTAs do banner Anvisa */
@media (max-width: 480px) {
.div-block-11 {
bottom: 80px !important;
}
}
/* =====================================================================
Botão WhatsApp flutuante global (vesta-wa-float)
Wrapper que injeta o balão "Fale com a Vesta" à esquerda do botão
================================================================== */
.vesta-wa-float__btn {
/* botão herda todo o estilo de .div-block-11 (fixed bottom-right, verde, etc.)
aqui só refinamos a transition pra incluir transform suave no hover */
transition: background-color 180ms ease,
box-shadow 180ms ease,
transform 220ms ease !important;
}
.vesta-wa-float:hover .vesta-wa-float__btn,
.vesta-wa-float:focus-within .vesta-wa-float__btn {
transform: translateY(-2px);
}
.vesta-wa-float__tooltip {
position: fixed;
right: 82px;
bottom: 32px;
z-index: 999;
background: #003a40;
color: #fff;
font-family: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.01em;
padding: 10px 14px;
border-radius: 8px;
white-space: nowrap;
box-shadow: 0 6px 20px rgba(0, 40, 44, 0.18);
pointer-events: none;
opacity: 0;
transform: translateX(8px);
transition: opacity 220ms ease, transform 220ms ease;
}
.vesta-wa-float__tooltip::after {
content: "";
position: absolute;
top: 50%;
right: -4px;
width: 10px;
height: 10px;
background: #003a40;
transform: translateY(-50%) rotate(45deg);
border-radius: 2px;
}
.vesta-wa-float:hover .vesta-wa-float__tooltip,
.vesta-wa-float:focus-within .vesta-wa-float__tooltip {
opacity: 1;
transform: translateX(0);
}
/* No mobile o botão sobe para bottom:80px (regra acima). Acompanhar o balão. */
@media (max-width: 480px) {
.vesta-wa-float__tooltip {
bottom: 92px;
}
}
/* Em telas estreitas o balão fica feio ao lado do botão pequeno — esconder */
@media (max-width: 640px) {
.vesta-wa-float__tooltip {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.vesta-wa-float__btn,
.vesta-wa-float__tooltip {
transition: none !important;
}
}
/* =====================================================================
Padronização de contraste — Consultoria + Auditoria + MDSAP (sessão 22)
Cliente apontou:
- MDSAP "módulos 1–5 + Auditor Líder": descrição em verde escuro sobre
fundo escuro = ilegível → branco
- Consultoria seção 2 (cards Fase 1-5): white cards on white bg, sem
contraste → adicionar bg creme padrão Vesta (igual sessão 11/home)
- Auditoria seção 2 (cards modalidades de auditoria): mesma issue
(compartilha .section-38 com consultoria)
================================================================== */
.grid-42 .paragraph-6-copy {
color: #ffffff !important;
}
.section-38 {
background-color: rgba(203, 201, 187, 0.10) !important;
}
/* =====================================================================
Padrão de botão principal — site todo (sessão 21)
Os banners da home (.vesta-banner__cta) já têm o padrão refinado
(padding 14x32, hover darker olive + lift). As outras páginas usam
.btn-01, .btn-01-2, .btn-01-copy que herdam padding 20px chunky e
hover de outline reversal — visualmente OFF do padrão da home.
Padroniza todos pra mesma aparência da home.
================================================================== */
.btn-01,
.btn-01-2,
.btn-01-copy {
background-color: #89764e !important;
border: 1px solid #89764e !important;
color: #ffffff !important;
border-radius: 50px !important;
padding: 14px 32px !important;
font-family: 'Metrisch', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: 0 !important;
transition: background-color 180ms ease, border-color 180ms ease,
transform 180ms ease, box-shadow 180ms ease !important;
}
.btn-01:hover,
.btn-01-2:hover,
.btn-01-copy:hover {
background-color: #76663f !important;
border: 1px solid #76663f !important;
color: #ffffff !important;
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(0, 40, 44, 0.22) !important;
}
.btn-01:focus-visible,
.btn-01-2:focus-visible,
.btn-01-copy:focus-visible {
outline: 2px solid #0050bd;
outline-offset: 2px;
}
/* =====================================================================
Padronização visual — heros + banners do site todo (sessão 19)
Todos os heros/banners do site usam overlay #003a4099 (60% verde-escuro).
Isso é fraco demais — imagens de fundo competem com o título.
Padroniza pra overlay 82–88% (verde-escuro institucional, mood Vesta §1).
Aplicado a:
- .section-41-copyhkk-2 (conheça-a-vesta + parceiros hero)
- .secao-capa.medical-devices (Medical Devices hero)
- .secao-capa-2.medical-devices (Medical Devices variante)
- .section-58 (Consultoria hero)
- .section-41-copy-2 (Auditoria hero)
- .grid-28-copyeg-2 (banner Exemplar Global em conheça-a-vesta)
================================================================== */
.section-41-copyhkk-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
url('../images/img-home-b.webp') !important;
}
.secao-capa.medical-devices,
.secao-capa-2.medical-devices {
background-image: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
url('../images/capa-medical-devices.webp') !important;
}
.section-58 {
background-image: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
url('../images/img-consultoria-1.webp') !important;
}
.section-41-copy-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
url('../images/auditoria-5.webp') !important;
}
/* Banner interno (caixa de seção): overlay 78% — um pouco menor que heros full-bleed */
.grid-28-copyeg-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
url('../images/img-tc-c.webp') !important;
}
/* =====================================================================
Conheça a Vesta — fixes estruturais (sessão 20)
Validado via Chrome MCP injection em 2026-05-22 antes de gravar no CSS.
1. Seção dos cards 360°: bg creme sutil pra contrastar com cards brancos
(igual padrão da home: rgba(203,201,187,0.10))
2. Split image+text (Portfólio 360° + DNA Vesta):
- gap 50px entre imagem e texto (era 0)
- align-items: stretch (era normal)
- .div-block-97: max-width 100% (era 70%, deixava texto contido)
- Imagem position: absolute + object-fit: cover preenche altura do texto
================================================================== */
body.page-id-40 .section-42 {
background-color: rgba(203, 201, 187, 0.10) !important;
}
body.page-id-40 .section-43 .grid-21 {
gap: 0 50px !important;
align-items: stretch !important;
}
body.page-id-40 .section-43 .grid-21 > * {
align-self: stretch !important;
height: 100%;
position: relative;
}
body.page-id-40 .section-43 .div-block-160 {
height: 100% !important;
width: 100% !important;
position: relative !important;
overflow: hidden !important;
border-radius: 10px !important;
min-height: 480px;
}
body.page-id-40 .section-43 .image-42 {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
body.page-id-40 .section-43 .div-block-97 {
max-width: 100% !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 0 !important;
}
/* Filter na imagem cartoon do Portfólio 360° — atenua mas mantém visível.
Agora coexiste com o position: absolute (filter no img absolute funciona). */
body.page-id-40 .section-43 .grid-21:first-of-type .image-42 {
filter: grayscale(0.85) contrast(0.92) brightness(0.95) sepia(0.2) opacity(0.88);
transition: filter 220ms ease, opacity 220ms ease;
}
body.page-id-40 .section-43 .grid-21:first-of-type .image-42:hover {
filter: grayscale(0.6) contrast(0.97) brightness(1) sepia(0.1) opacity(1);
}
/* =====================================================================
Menu / Navbar — refinamento minimalista (desktop + mobile)
================================================================== */
/* --- Topbar escura: logo + busca + botão login --- */
.menu .div-block-16 {
padding: 4px 0 !important;
min-height: 48px;
}
.menu .div-block-18 {
min-height: 48px;
align-items: center;
}
/* Logo */
.menu .image-56,
.menu .div-block-19 img {
max-height: 28px !important;
width: auto;
height: auto;
}
.menu .div-block-19 {
display: inline-flex;
align-items: center;
}
/* Busca */
.menu .div-block-20 {
position: relative;
align-self: center;
}
.menu .search-c,
.menu .search-c.w-form {
margin: 0;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.06);
border-radius: 200px;
overflow: hidden;
transition: background 0.18s ease;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.menu .search-c:hover,
.menu .search-c:focus-within {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.2);
}
.menu .search-input {
height: 36px !important;
padding: 6px 14px !important;
font-size: 14px !important;
color: #fff !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
box-shadow: none !important;
min-width: 240px;
outline: none;
}
.menu .search-input::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.menu .search-button,
.menu .search-button-b {
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 0 200px 200px 0 !important;
background-color: transparent !important;
background-position: center !important;
background-size: 16px 16px !important;
background-repeat: no-repeat !important;
border: 0 !important;
transition: background-color 0.18s ease;
}
.menu .search-button:hover,
.menu .search-button-b:hover,
.menu .search-button:focus-visible,
.menu .search-button-b:focus-visible {
background-color: rgba(255, 255, 255, 0.10) !important;
}
/* Login button minimalista */
.menu .button-2.w-button,
.menu .div-block-21 .button-2 {
height: 36px;
min-height: 36px;
padding: 0 16px 0 36px !important;
font-size: 13px;
border-radius: 200px;
display: inline-flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.08);
background-position: 14px center;
background-size: 14px 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
letter-spacing: 0.02em;
transition: background 0.18s ease, border-color 0.18s ease;
text-decoration: none;
}
.menu .button-2.w-button:hover {
background-color: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
}
/* --- Navbar branca: navegação principal --- */
.navbar-no-shadow-container.w-nav {
height: auto !important;
min-height: 48px !important;
padding: 0 !important;
margin: 0 auto !important;
}
.navbar-no-shadow-container .navbar-wrapper {
min-height: 48px;
display: flex;
align-items: center;
}
.navbar-menu.w-nav-menu {
display: flex;
align-items: center;
}
.navbar-menu-left {
display: flex;
align-items: center;
gap: 4px;
}
.navbar-link.w-nav-link {
padding: 12px 14px !important;
font-size: 14px !important;
color: #003a40 !important;
line-height: 1.2;
transition: color 0.18s ease, background 0.18s ease;
border-radius: 4px;
margin: 0 !important;
}
.navbar-link.w-nav-link:hover,
.navbar-link.w-nav-link.w--current {
background: rgba(0, 58, 64, 0.05);
color: #003a40 !important;
}
.navbar-link.w-nav-link[aria-current="page"] {
font-weight: 600;
}
/* Dropdown Treinamentos — toggle */
.menu-dropdown.w-dropdown {
padding: 0 !important;
margin: 0 4px !important;
align-self: center;
}
.dropdown-toggle-2.w-dropdown-toggle {
padding: 12px 32px 12px 14px !important;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px !important;
color: #003a40 !important;
border-radius: 4px;
transition: background 0.18s ease;
cursor: pointer;
}
.dropdown-toggle-2.w-dropdown-toggle:hover {
background: rgba(0, 58, 64, 0.05);
}
.dropdown-title {
font-size: 14px;
line-height: 1.2;
}
.w-icon-dropdown-toggle {
font-size: 10px;
margin-left: 2px;
color: #003a40;
}
/* Dropdown list — grid em 2 colunas com cards limpos */
.dropdown-list-2b.w-dropdown-list {
background: #fff !important;
box-shadow: 0 12px 32px rgba(0, 58, 64, 0.14) !important;
border-radius: 10px !important;
padding: 10px !important;
min-width: 640px !important;
max-width: 720px;
margin-top: 4px;
}
.div-block-156-b {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.dropdown-link-2.w-inline-block {
display: block !important;
padding: 10px 12px !important;
border-radius: 6px;
text-decoration: none;
transition: background 0.15s ease;
}
.dropdown-link-2.w-inline-block:hover {
background: #f4f6f6;
}
.dropdown-links {
font-size: 14px;
font-weight: 600;
color: #003a40;
line-height: 1.25;
margin-bottom: 2px;
}
.paragraph-small {
font-size: 12px;
color: #5a6d70;
line-height: 1.35;
margin: 0;
}
/* --- Mobile (até 991px) --- */
@media (max-width: 991px) {
.menu .div-block-16 {
padding: 8px 16px !important;
}
.menu .div-block-18 {
flex-wrap: wrap;
gap: 8px;
}
.menu .div-block-20 {
flex: 1 1 auto;
order: 3;
width: 100%;
}
.menu .search-input {
min-width: 0;
width: 100%;
font-size: 16px !important; /* V19 — anti-zoom iOS (override do 14px da linha 147) */
}
.menu .button-2.w-button {
font-size: 12px;
padding: 0 12px 0 32px !important;
background-position: 10px center;
}
.menu-button.w-nav-button {
display: flex !important;
align-items: center;
justify-content: center;
color: #003a40;
background: transparent;
padding: 10px 14px;
font-size: 14px;
cursor: pointer;
}
.menu-button.w-nav-button .text-block-62 {
color: #003a40;
}
.navbar-menu.w-nav-menu {
flex-direction: column;
align-items: stretch;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 58, 64, 0.12);
padding: 8px 0;
display: none;
}
.w-nav[data-nav-menu-open] .navbar-menu.w-nav-menu,
.navbar-menu.w-nav-menu.w--open {
display: flex !important;
}
.navbar-menu-left {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.navbar-link.w-nav-link,
.dropdown-toggle-2.w-dropdown-toggle {
width: 100%;
padding: 12px 20px !important;
border-radius: 0;
border-bottom: 1px solid #eef0f0;
justify-content: space-between;
}
.menu-dropdown.w-dropdown {
width: 100%;
margin: 0 !important;
}
.dropdown-list-2b.w-dropdown-list {
position: static !important;
min-width: 0 !important;
max-width: none;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
background: #f9fafa !important;
display: none !important;
}
.dropdown-list-2b.w-dropdown-list.vesta-mobile-open {
display: block !important;
padding: 4px 0 8px !important;
}
.dropdown-toggle-2.w-dropdown-toggle.vesta-mobile-active {
background: rgba(0, 58, 64, 0.05);
}
.dropdown-toggle-2.w-dropdown-toggle::after {
content: '▾';
margin-left: auto;
color: #003a40;
transition: transform 0.18s ease;
}
.dropdown-toggle-2.w-dropdown-toggle.vesta-mobile-active::after {
transform: rotate(180deg);
}
.dropdown-toggle-2.w-dropdown-toggle .w-icon-dropdown-toggle {
display: none;
}
.div-block-156-b {
grid-template-columns: 1fr;
gap: 0;
}
.dropdown-link-2.w-inline-block {
border-radius: 0;
padding: 10px 28px !important;
border-bottom: 1px solid #eef0f0;
}
.paragraph-small {
display: none;
}
}
/* Cor do input de busca em sidebars (não-menu) — mantém preto pra contraste */
.search-input {
outline: none;
}
/* =====================================================================
Mobile menu panel — painel próprio independente do Webflow
================================================================== */
#vesta-mobile-menu {
position: fixed;
inset: 0;
z-index: 99999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, visibility 0s linear 0.22s;
font-family: 'Metrisch', sans-serif !important;
}
#vesta-mobile-menu * {
font-family: 'Metrisch', sans-serif !important;
}
#vesta-mobile-menu.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition: opacity 0.22s ease, visibility 0s linear 0s;
}
#vesta-mobile-menu .vmm-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 28, 32, 0.55);
}
#vesta-mobile-menu .vmm-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(86vw, 360px);
background: #fff;
padding: 64px 20px 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: -8px 0 28px rgba(0, 40, 44, 0.18); /* V15 — base #00282c (era preto puro) */
transform: translateX(100%);
transition: transform 0.26s ease;
-webkit-overflow-scrolling: touch;
}
#vesta-mobile-menu.is-open .vmm-content {
transform: translateX(0);
}
#vesta-mobile-menu .vmm-close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
color: #003a40 !important;
cursor: pointer;
padding: 0;
border-radius: 50%;
}
#vesta-mobile-menu .vmm-close:hover {
background: rgba(0, 58, 64, 0.06);
}
/* Search dentro do painel */
#vesta-mobile-menu .vmm-search {
width: 100%;
margin-bottom: 8px;
}
#vesta-mobile-menu .vmm-search form,
#vesta-mobile-menu .vmm-search .search-c {
display: block !important;
width: 100% !important;
position: relative !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
#vesta-mobile-menu .vmm-search input[type="search"],
#vesta-mobile-menu .vmm-search .search-input {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
border: 1px solid #d0d6d6 !important;
background: #f7f8f8 !important;
color: #003a40 !important;
padding: 10px 44px 10px 14px !important;
font-size: 16px !important;
border-radius: 8px !important;
height: 42px !important;
box-shadow: none !important;
outline: none !important;
margin: 0 !important;
}
#vesta-mobile-menu .vmm-search input[type="submit"],
#vesta-mobile-menu .vmm-search button[type="submit"],
#vesta-mobile-menu .vmm-search .search-button {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 34px !important;
height: 34px !important;
background-color: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px 18px !important;
border: 0 !important;
cursor: pointer !important;
padding: 0 !important;
font-size: 0 !important;
color: transparent !important;
box-shadow: none !important;
}
/* Nav dentro do painel */
#vesta-mobile-menu .vmm-nav {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#vesta-mobile-menu .vmm-nav .navbar-link,
#vesta-mobile-menu .vmm-nav .dropdown-toggle-2 {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 14px 8px !important;
border-bottom: 1px solid #eef0f0 !important;
color: #003a40 !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
border-radius: 0 !important;
text-decoration: none !important;
background: transparent !important;
text-transform: none !important;
align-items: center !important;
justify-content: space-between !important;
margin: 0 !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-title {
font-size: 16px !important;
font-weight: 500 !important;
color: #003a40 !important;
line-height: 1.2 !important;
padding: 0 !important;
margin: 0 !important;
}
#vesta-mobile-menu .vmm-nav .menu-dropdown {
width: 100%;
margin: 0;
padding: 0;
display: block !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-toggle-2::after {
content: '▾' !important;
margin-left: auto !important;
color: #003a40 !important;
font-size: 14px !important;
transition: transform 0.18s ease;
}
#vesta-mobile-menu .vmm-nav .dropdown-toggle-2.vesta-mobile-active::after {
transform: rotate(180deg);
}
#vesta-mobile-menu .vmm-nav .w-icon-dropdown-toggle {
display: none !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-list-2b {
position: static !important;
display: none !important;
background: #f5f7f7 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
max-width: none !important;
border-radius: 0 !important;
border: 0 !important;
width: 100% !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-list-2b.vesta-mobile-open {
display: block !important;
padding: 0 !important;
}
#vesta-mobile-menu .vmm-nav .div-block-156-b {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-link-2 {
display: block !important;
padding: 12px 24px !important;
border-bottom: 1px solid #e6ebeb !important;
background: transparent !important;
color: #003a40 !important;
text-decoration: none !important;
transition: background 0.15s ease !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-link-2:hover {
background: rgba(0, 58, 64, 0.04) !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-link-2:last-child {
border-bottom: 0 !important;
}
#vesta-mobile-menu .vmm-nav .dropdown-links {
font-size: 14px !important;
font-weight: 600 !important;
color: #003a40 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
#vesta-mobile-menu .vmm-nav .paragraph-small {
display: none !important;
}
/* Login button no rodapé */
#vesta-mobile-menu .vmm-login.button-2 {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 14px !important;
padding: 12px 24px 12px 44px !important;
margin-top: 16px !important;
background-position: 18px center !important;
}
/* Body lock quando menu está aberto */
body.vesta-menu-open {
overflow: hidden !important;
}
/* Esconde o painel no desktop */
@media (min-width: 992px) {
#vesta-mobile-menu {
display: none !important;
}
}
/* =====================================================================
Language switcher (Google Translate) — bandeiras à ESQUERDA do botão login
================================================================== */
.menu .div-block-21 {
display: inline-flex !important;
align-items: center;
gap: 8px;
}
.vesta-langs {
display: inline-flex;
align-items: center;
gap: 2px;
}
.vesta-lang {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
width: 28px;
height: 28px;
padding: 0;
font-size: 16px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
filter: grayscale(0.4);
opacity: 0.7;
}
.vesta-lang:hover {
background: rgba(255, 255, 255, 0.10);
filter: grayscale(0);
opacity: 1;
}
.vesta-lang.is-active {
filter: grayscale(0);
opacity: 1;
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.08);
/* V37 — scale removido (microinteração desnecessária) */
}
#google_translate_element,
#google_translate_element * {
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* HARD HIDE de tudo que o Google Translate injeta visualmente */
.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
iframe.skiptranslate,
iframe.goog-te-menu-frame,
iframe.goog-te-banner-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
display: none !important;
visibility: hidden !important;
height: 0 !important;
border: 0 !important;
pointer-events: none !important;
}
html, body {
top: 0 !important;
position: static !important;
}
/* Restaura background/box-shadow em texto traduzido */
font[style*="background-color"] {
background-color: transparent !important;
box-shadow: none !important;
}
/* =====================================================================
Mobile menu redesenhado (logo esquerda + hamburger direita)
================================================================== */
@media (max-width: 991px) {
.menu .div-block-16 {
padding: 8px 16px !important;
min-height: 56px;
}
/* TOPBAR: logo esquerda, langs entre, hamburger direita.
Search e login da topbar ficam ESCONDIDOS no mobile (movidos pra dentro do menu via JS). */
.menu .div-block-18 {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.menu .div-block-19 {
flex: 0 0 auto;
order: 1;
}
.menu .vesta-langs {
order: 2;
margin-right: 0;
flex: 0 0 auto;
}
/* Topbar original: esconde search e login (clones aparecem dentro do menu) */
.menu .div-block-18 > .div-block-20:not(.vesta-mobile-search),
.menu .div-block-18 > .div-block-21:not(.vesta-mobile-login) {
display: none !important;
}
/* Hamburger button — movido para a topbar via JS, posicionado à direita */
.menu-button.w-nav-button.vesta-mobile-hamburger {
order: 3;
flex: 0 0 auto;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
width: 40px;
height: 40px;
padding: 0;
border-radius: 6px;
position: relative;
margin: 0;
}
.menu-button.w-nav-button.vesta-mobile-hamburger:hover {
background: rgba(255, 255, 255, 0.08);
}
.menu-button.w-nav-button.vesta-mobile-hamburger .text-block-62 {
display: none;
}
/* Ícone de hambúrguer (3 linhas) renderizado via pseudo-elementos */
.menu-button.w-nav-button.vesta-mobile-hamburger::before {
content: '';
width: 20px;
height: 14px;
background:
linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
color: #fff;
}
.w-nav[data-nav-menu-open] .menu-button.w-nav-button.vesta-mobile-hamburger::before {
background:
linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat;
transform: rotate(45deg);
}
/* Navbar branca vira só um wrapper invisível pra o w-nav funcionar */
.navbar-no-shadow-container.w-nav {
background: transparent;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
.navbar-no-shadow-container .container-regular,
.navbar-no-shadow-container .navbar-wrapper {
margin: 0;
padding: 0;
min-height: 0;
display: block;
}
/* Esconde o hamburger ORIGINAL se ainda estiver na navbar-wrapper */
.navbar-wrapper > .menu-button.w-nav-button:not(.vesta-mobile-hamburger) {
display: none;
}
/* Menu aberto (Webflow seta data-nav-menu-open OU classe w--open) */
.navbar-menu.w-nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 12px 32px rgba(0, 58, 64, 0.16);
padding: 8px 0;
z-index: 1000;
max-height: calc(100vh - 70px);
overflow-y: auto;
}
/* Clones de search/login no menu mobile */
.vesta-mobile-search {
padding: 12px 20px;
background: #f7f8f8;
border-bottom: 1px solid #eef0f0;
width: 100% !important;
display: block !important;
}
.vesta-mobile-search form.search-c {
background: #fff;
border: 1px solid rgba(0, 58, 64, 0.18);
}
.vesta-mobile-search .search-input {
color: #003a40 !important;
min-width: 0;
width: 100%;
}
.vesta-mobile-search .search-input::placeholder {
color: rgba(0, 58, 64, 0.5);
}
.vesta-mobile-search .search-button,
.vesta-mobile-search .search-button-b {
filter: invert(1);
}
.vesta-mobile-login {
padding: 16px 20px;
border-top: 1px solid #eef0f0;
margin-top: 4px;
display: block !important;
}
.vesta-mobile-login .button-2.w-button {
width: 100%;
justify-content: center;
height: 44px;
background-color: #003a40;
border-color: #003a40;
color: #fff;
padding: 0 16px 0 36px !important;
}
}
/* Live search — garante que toda form[role="search"] seja positioned
pra o dropdown ancorar embaixo do input em qualquer contexto (menu, sidebar, etc.) */
form[role="search"],
form.search-c.w-form,
form.search.w-form {
position: relative;
}
/* Padronização visual das buscas SECUNDÁRIAS (sidebar de blog, single article, single curso)
Targeting genérico — em seguida, regras .menu específicas têm specificity maior e ganham. */
form.search-c.w-form,
form.search.w-form {
display: flex;
align-items: center;
gap: 0;
height: 44px;
margin: 0 0 16px 0;
padding: 0;
background: #fff;
border: 1.5px solid #89764e;
border-radius: 999px;
box-sizing: border-box;
overflow: visible !important; /* dropdown do live search precisa aparecer fora do form */
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
form.search-c.w-form:focus-within,
form.search.w-form:focus-within {
border-color: #003a40;
box-shadow: 0 0 0 3px rgba(0, 58, 64, 0.08);
}
form.search-c.w-form > .search-input.w-input,
form.search.w-form > .search-input.w-input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 0 0 18px;
margin: 0;
background: transparent;
border: 0;
outline: none;
color: #003a40;
font-size: 14px;
font-family: 'Metrisch', sans-serif;
box-shadow: none;
}
form.search-c.w-form > .search-input.w-input::placeholder,
form.search.w-form > .search-input.w-input::placeholder {
color: #8a9999;
}
form.search-c.w-form > .search-button.w-button,
form.search-c.w-form > .search-button-b.w-button,
form.search.w-form > .search-button.w-button,
form.search.w-form > .search-button-b.w-button {
flex-shrink: 0;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
border: 0;
border-left: 1px solid #e6ebeb;
border-radius: 0;
cursor: pointer;
font-size: 0;
color: transparent;
box-shadow: none;
opacity: 0.85;
transition: opacity 0.18s ease, background-color 0.18s ease;
}
form.search-c.w-form > .search-button.w-button:hover,
form.search-c.w-form > .search-button-b.w-button:hover,
form.search.w-form > .search-button.w-button:hover,
form.search.w-form > .search-button-b.w-button:hover {
background-color: rgba(0, 58, 64, 0.04);
opacity: 1;
}
/* Reaplicar override do menu DEPOIS (specificity ganha). Menu não usa as regras acima. */
.menu .search-c.w-form,
.menu form.search-c.w-form {
height: auto;
margin: 0;
border-radius: 200px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
overflow: visible !important; /* dropdown do live search */
}
.menu .search-c.w-form > .search-input.w-input {
height: auto;
padding: 8px 16px;
color: #fff;
font-size: 14px;
}
@media (max-width: 991px) {
.menu .search-c.w-form > .search-input.w-input {
font-size: 16px; /* V19 — anti-zoom iOS */
}
}
.menu .search-c.w-form > .search-input.w-input::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.menu .search-c.w-form > .search-button.w-button {
width: 36px;
height: 36px;
border-left: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 16px 16px;
}
/* Live search dropdown */
.vesta-livesearch-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 40, 44, 0.18);
z-index: 1000; /* V54 — token --z-popover (era 9999) */
max-height: 480px;
overflow-y: auto;
display: none;
font-family: Metrisch, system-ui, sans-serif;
}
.vesta-livesearch-results.is-open {
display: block;
}
.vesta-livesearch-section {
padding: 8px 0;
}
.vesta-livesearch-section + .vesta-livesearch-section {
border-top: 1px solid #ececec;
}
.vesta-livesearch-section__title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7d80;
padding: 6px 16px 4px;
font-weight: 600;
}
.vesta-livesearch-item {
display: block;
padding: 10px 16px;
color: #003a40;
text-decoration: none;
font-size: 14px;
line-height: 1.35;
border-bottom: 1px solid #f3f3f3;
}
.vesta-livesearch-item:last-child {
border-bottom: 0;
}
.vesta-livesearch-item:hover,
.vesta-livesearch-item:focus {
background: #f5f5f3;
outline: none;
}
.vesta-livesearch-item__title {
display: block;
font-weight: 500;
}
.vesta-livesearch-item__excerpt {
display: block;
margin-top: 2px;
font-size: 12px;
color: #5a6d70;
}
.vesta-livesearch-empty,
.vesta-livesearch-loading {
padding: 16px;
color: #6b7d80;
font-size: 14px;
text-align: center;
}
/* Wrapper precisa ser relativo pra dropdown ancorar */
.div-block-20 {
position: relative;
}
/* =====================================================================
Banners do hero — HTML idêntico ao Figma. Coordenadas exatas
extraídas via Figma MCP — base 1920x718.
================================================================== */
.vesta-banner {
position: relative;
width: 100%;
display: block;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.w-slide .vesta-banner { width: 100%; }
.vesta-banner__inner {
position: relative;
width: 100%;
margin: 0 auto;
aspect-ratio: 1920 / 718;
}
.vesta-banner img {
display: block;
max-width: none;
}
/* ===================================================================
Banner MDSAP — fundo dark teal, photo direita, MDSAP-flag-letters
=================================================================== */
.vesta-banner--mdsap .vesta-banner__inner {
background-color: #003a40;
}
/* Background com textura sutil (mapa-mundi) — node 28:38/28:42 */
.vesta-banner--mdsap .vesta-banner__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
z-index: 1;
}
/* Foto das pessoas — node 28:262 — left:58.13%, top:16px (2.23%), aspect 1:1 */
.vesta-banner--mdsap .vesta-banner__photo {
position: absolute;
top: 2.23%;
left: 58.13%;
right: 3.28%;
aspect-ratio: 1 / 1;
pointer-events: none;
z-index: 3;
}
.vesta-banner--mdsap .vesta-banner__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Emblema circular MDSAP (Arte 2) — node 28:44
inset[21.45% 86.56% 55.15% 4.69%] → 168x168 */
.vesta-banner--mdsap .vesta-banner__badge {
position: absolute;
top: 21.45%;
left: 4.69%;
width: 8.75%;
aspect-ratio: 1 / 1;
z-index: 3;
}
/* "Treinamento" — sessão 13: badge removido, deslocado -10.14% (left 14.83 → 4.69) */
.vesta-banner--mdsap .vesta-banner__title-1 {
position: absolute;
top: 18.52%;
left: 4.69%;
margin: 0;
font-family: Metrisch, sans-serif;
font-weight: 500;
font-size: 4.69vw; /* 90/1920*100 */
line-height: 1.1;
color: #cbc9bb;
white-space: nowrap;
z-index: 3;
}
/* MDSAP-flag-letters — sessão 13: deslocado -10.14% (left 44.31 → 34.17) acompanha o "Treinamento" */
.vesta-banner--mdsap .vesta-banner__flagletters {
position: absolute;
top: 21.45%;
left: 34.17%;
width: 17.83%;
height: 9.07%;
z-index: 3;
}
/* "na Vesta Academy" — sessão 13: deslocado -10.14% (left 14.83 → 4.69) */
.vesta-banner--mdsap .vesta-banner__title-2 {
position: absolute;
top: 32.45%;
left: 4.69%;
margin: 0;
font-family: Metrisch, sans-serif;
font-weight: 500;
font-size: 4.69vw;
line-height: 1.1;
color: #cbc9bb;
white-space: nowrap;
z-index: 3;
}
/* Subtitle — node 28:165 — inset[52.09% 45.68% 40.11% 4.69%]
40px Metrisch Medium white */
.vesta-banner--mdsap .vesta-banner__subtitle {
position: absolute;
top: 52.09%;
left: 4.69%;
width: 49.63%;
margin: 0;
font-family: Metrisch, sans-serif;
font-weight: 500;
font-size: 2.08vw; /* 40/1920*100 */
line-height: 1.4;
color: #ffffff;
z-index: 3;
}
/* Saiba mais — Rectangle 28:263 + text 28:264
Rectangle: 90px left, 523px top, 207x52 → top 72.84%, left 4.69%, w 10.78%, h 7.24%
bg:#7e7050 rounded 20px, font 20px Metrisch Bold uppercase white */
/* Botão padrão do site (pill rounded-200, padding 15-20px). */
.vesta-banner--mdsap .vesta-banner__cta {
position: absolute;
top: 72%;
left: 4.69%;
background-color: #89764e; /* V34 — oliva oficial (era #7e7050 fora da paleta) */
color: #ffffff;
border-radius: 200px;
font-family: Metrisch, sans-serif;
font-weight: 700;
font-size: 1.15vw;
padding: 0.85vw 2.6vw;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 180ms ease; /* V10/V36 — sem scale + duration padrão */
z-index: 4;
}
.vesta-banner--mdsap .vesta-banner__cta:hover {
background-color: #76663f; /* V34 — escurece o oliva (era #968762 fora da paleta) */
}
/* Faixa de bandeiras (Frame 1) — node 28:235 — inset[97.35% 0 0 0] */
.vesta-banner--mdsap .vesta-banner__flagbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2.65%;
z-index: 5;
}
.vesta-banner--mdsap .vesta-banner__flagbar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===================================================================
Banner MDR — fundo cream, MDR title em Zenovak, photos direita
=================================================================== */
.vesta-banner--mdr .vesta-banner__inner {
background-color: #cbc9bb;
}
/* image 3 (textura watermark) — node 28:372 — pos:-22,-245, 1974x1316 */
.vesta-banner--mdr .vesta-banner__bg {
position: absolute;
top: -34.12%; /* -245/718*100 */
left: -1.15%; /* -22/1920*100 */
width: 102.81%; /* 1974/1920*100 */
height: 183.29%;/* 1316/718*100 */
object-fit: cover;
pointer-events: none;
z-index: 1;
}
/* Overlay translúcido cream (Rectangle 28:373) bg:#cbc9bb 93% */
.vesta-banner--mdr .vesta-banner__overlay {
position: absolute;
inset: 0;
background-color: rgba(203, 201, 187, 0.93);
pointer-events: none;
z-index: 2;
}
/* Pessoas (back) — node 28:378 — pos:1313,-34, 624x937 */
.vesta-banner--mdr .vesta-banner__photo-back {
position: absolute;
top: -4.74%; /* -34/718*100 */
left: 68.39%; /* 1313/1920*100 */
width: 32.5%; /* 624/1920*100 */
height: 130.50%; /* 937/718*100 */
object-fit: contain;
object-position: top;
pointer-events: none;
z-index: 3;
}
/* Pessoas (front) — node 28:379 — left:50.47%, top:67px (9.33%), aspect 1024/1024 */
.vesta-banner--mdr .vesta-banner__photo {
position: absolute;
top: 9.33%;
left: 50.47%;
right: 15.78%;
aspect-ratio: 1024 / 1024;
pointer-events: none;
z-index: 4;
}
.vesta-banner--mdr .vesta-banner__photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center top;
}
/* Pill "Turma Confirmada!" — node 28:381+382
bg:#003a40, 106,85, 450x70, rounded 20px
text 40px Metrisch Bold #cbc9bb centered */
.vesta-banner--mdr .vesta-banner__pill {
position: absolute;
top: 11.84%; /* 85/718*100 */
left: 5.52%; /* 106/1920*100 */
width: 23.44%; /* 450/1920*100 */
height: 9.75%; /* 70/718*100 */
background-color: #003a40;
border-radius: 1.04vw;
color: #cbc9bb;
font-family: Metrisch, sans-serif;
font-weight: 700;
font-size: 2.08vw; /* 40/1920*100 */
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
}
/* Container do conteúdo — agrupa título, subtítulo e CTA em coluna,
centralizado verticalmente no banner e alinhado à esquerda. */
.vesta-banner--mdr .vesta-banner__content {
position: absolute;
top: 50%;
left: 5.52%;
transform: translateY(-50%);
width: 48%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.8vw;
z-index: 5;
}
/* Título "Domine o / MDR:745/2017 / na Vesta Academy!" — bloco em coluna */
.vesta-banner--mdr .vesta-banner__title {
margin: 0;
font-family: 'Metrisch', system-ui, sans-serif; /* Zenovak removido por decisão do cliente — unificar em Metrisch */
font-weight: 400;
font-size: 3.65vw; /* 70/1920*100 */
line-height: 1.15;
color: #003a40;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1em;
}
.vesta-banner--mdr .vesta-banner__title-line {
display: block;
}
/* Imagem "MDR:745/2017" como linha própria do título */
.vesta-banner--mdr .vesta-banner__mdr-text {
display: block;
height: 0.85em;
width: auto;
}
/* Subtítulo */
.vesta-banner--mdr .vesta-banner__subtitle {
margin: 0;
font-family: Metrisch, sans-serif;
font-weight: 400;
font-size: 1.82vw; /* 35/1920*100 */
line-height: 1.4;
color: #000000;
}
/* Calendário ícone — node 28:383 — 106,532, 93.72x95.39 */
.vesta-banner--mdr .vesta-banner__calendar {
position: absolute;
top: 74.10%;
left: 5.52%;
width: 4.88%;
height: 13.29%;
z-index: 5;
}
/* Datas — nodes 28:395 + 28:396 — 225,535/583, 35px Metrisch Medium #003a40 */
.vesta-banner--mdr .vesta-banner__dates {
position: absolute;
top: 74.51%;
left: 11.72%; /* 225/1920*100 */
font-family: Metrisch, sans-serif;
font-weight: 500;
font-size: 1.82vw;
line-height: 1.37; /* (583-535)/35 ≈ 1.37 */
color: #003a40;
z-index: 5;
}
.vesta-banner--mdr .vesta-banner__dates span { display: block; }
/* Ribbon Vector — node 28:397 — inset[74.09% 49.38% 17.55% 29.53%] */
.vesta-banner--mdr .vesta-banner__ribbon {
position: absolute;
top: 74.09%;
left: 29.53%;
width: 21.10%; /* 100 - 49.38 - 29.53 */
height: 8.36%; /* 100 - 74.09 - 17.55 */
z-index: 5;
}
/* Texto "Não perca essa oportunidade!" — node 28:400
pos:588,543, 25px Metrisch Bold #003a40 (não branco) */
.vesta-banner--mdr .vesta-banner__ribbon-text {
position: absolute;
top: 75.63%; /* 543/718*100 */
left: 30.62%; /* 588/1920*100 */
margin: 0;
font-family: Metrisch, sans-serif;
font-weight: 700;
font-size: 1.30vw; /* 25/1920*100 */
line-height: 1.4;
color: #003a40;
white-space: nowrap;
z-index: 6;
}
/* Inscreva-se — pill no padrão do site, dentro do flex container */
.vesta-banner--mdr .vesta-banner__cta {
background-color: #003a40;
border-radius: 200px;
color: #ffffff;
font-family: Metrisch, sans-serif;
font-weight: 700;
font-size: 1.15vw;
padding: 0.85vw 2.6vw;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
text-transform: uppercase;
transition: background-color 180ms ease; /* V10/V36 */
z-index: 6;
}
.vesta-banner--mdr .vesta-banner__cta:hover {
background-color: #00282c; /* V11 — escurece o verde (era azul #1f5dab) */
}
/* Decoração inferior (Frame 2 + image 27018 1) — node 28:374 */
.vesta-banner--mdr .vesta-banner__bottom-deco {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2.65%; /* 100 - 97.35 */
overflow: hidden;
z-index: 5;
}
.vesta-banner--mdr .vesta-banner__bottom-deco img {
position: absolute;
bottom: 0;
left: -0.47%;
width: 100.94%;
height: auto;
object-fit: cover;
object-position: bottom;
}
/* ===================================================================
Banner 3 — Treinamento MDSAP módulo Anvisa (Figma node 177:7)
1920x718, fundo dark teal #003a40 com tarja bege à direita,
pill bege esquerda + título cream + data + botão khaki.
=================================================================== */
.vesta-banner--anvisa .vesta-banner__inner {
background-color: #003a40;
}
/* Imagem de fundo (escritório/cidade desfocado) com filtro verde por cima */
.vesta-banner--anvisa .vesta-banner__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.45;
z-index: 0;
pointer-events: none;
}
.vesta-banner--anvisa .vesta-banner__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right,
rgba(0,58,64,0.85) 0%,
rgba(0,58,64,0.7) 60%,
rgba(0,58,64,0.4) 100%);
z-index: 1;
pointer-events: none;
}
/* Foto da mulher — node 177:13, x:1204, y:0, w:632.66, h:949 */
.vesta-banner--anvisa .vesta-banner__photo {
position: absolute;
top: 0;
left: 62.71%; /* 1204/1920 */
width: 32.95%; /* 632.66/1920 */
height: 132.18%; /* 949/718 */
z-index: 2;
pointer-events: none;
}
.vesta-banner--anvisa .vesta-banner__photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
/* Wrapper do conteúdo — coluna alinhada à esquerda, centralizada vertical.
Largura limitada pra não invadir o espaço da foto. */
.vesta-banner--anvisa .vesta-banner__content {
position: absolute;
top: 50%;
left: 4.69%; /* mesmo offset do MDSAP */
transform: translateY(-50%);
width: 55%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.8vw;
z-index: 5;
}
/* Linha título — badge MDSAP + texto */
.vesta-banner--anvisa .vesta-banner__title-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.5vw;
}
/* Badge MDSAP circular à esquerda do título */
.vesta-banner--anvisa .vesta-banner__badge {
width: 6vw;
aspect-ratio: 1 / 1;
flex-shrink: 0;
display: block;
}
/* Título — mesma família, peso e cor do MDSAP (Metrisch Medium #cbc9bb) */
.vesta-banner--anvisa .vesta-banner__title {
margin: 0;
font-family: Metrisch, sans-serif;
font-weight: 500;
font-size: 4vw; /* ligeiramente menor pra caber ao lado do badge */
line-height: 1.1;
color: #cbc9bb;
white-space: nowrap;
}
.vesta-banner--anvisa .vesta-banner__title-line {
display: block;
}
/* Faixa de bandeiras inferior — mesma do MDSAP */
.vesta-banner--anvisa .vesta-banner__flagbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2.65%;
z-index: 5;
}
.vesta-banner--anvisa .vesta-banner__flagbar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Bloco data — calendário + datas em linha */
.vesta-banner--anvisa .vesta-banner__info {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.4vw;
}
.vesta-banner--anvisa .vesta-banner__calendar {
width: 4.5vw; /* ~86px / 1920 */
height: 4.5vw;
aspect-ratio: 1 / 1;
flex-shrink: 0;
}
.vesta-banner--anvisa .vesta-banner__dates {
display: flex;
flex-direction: column;
font-family: Metrisch, sans-serif;
font-size: 2.08vw; /* 40/1920 */
line-height: 1.4;
}
.vesta-banner--anvisa .vesta-banner__date {
color: #ffffff;
font-weight: 400;
}
.vesta-banner--anvisa .vesta-banner__time {
color: #d6d2c4;
font-weight: 700;
}
/* Botão "Matricule-se" — bg gold (paleta), texto verde-escuro da marca */
.vesta-banner--anvisa .vesta-banner__cta {
background-color: #aba180;
border-radius: 200px;
color: #003a40; /* V41 — era #00393f (próximo mas inconsistente) */
font-family: Metrisch, sans-serif;
font-weight: 700;
font-size: 1.56vw;
padding: 0.85vw 2.6vw;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
text-transform: uppercase;
transition: background-color 180ms ease; /* V10 */
}
.vesta-banner--anvisa .vesta-banner__cta:hover {
background-color: #89764e; /* V42 — escurece para oliva (era #c0b594 clareando, anti-padrão) */
}
/* ===================================================================
Mobile (< 768px) — altura FIXA idêntica nos dois banners,
layout vertical limpo: bloco de texto + foto abaixo.
=================================================================== */
@media (max-width: 767.98px) {
/* Container — mesma altura nos três banners */
.vesta-banner--mdsap .vesta-banner__inner,
.vesta-banner--mdr .vesta-banner__inner,
.vesta-banner--anvisa .vesta-banner__inner {
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 8vw 6vw;
overflow: hidden;
box-sizing: border-box;
}
/* Reset absolute positioning + transforms de TODOS descendentes */
.vesta-banner--mdsap .vesta-banner__inner *,
.vesta-banner--mdr .vesta-banner__inner *,
.vesta-banner--anvisa .vesta-banner__inner * {
position: static !important;
top: auto;
left: auto;
right: auto;
bottom: auto;
transform: none !important;
}
.vesta-banner--mdsap .vesta-banner__inner > *,
.vesta-banner--mdr .vesta-banner__inner > *,
.vesta-banner--anvisa .vesta-banner__inner > * {
width: auto;
height: auto;
margin: 0;
}
/* Reset wrappers flex-column criados no desktop para fluxo natural mobile */
.vesta-banner--mdr .vesta-banner__content,
.vesta-banner--anvisa .vesta-banner__content,
.vesta-banner--mdr .vesta-banner__title,
.vesta-banner--anvisa .vesta-banner__title {
display: block !important;
width: 100% !important;
gap: 0 !important;
align-items: stretch !important;
}
.vesta-banner--mdsap .vesta-banner__photo,
.vesta-banner--mdsap .vesta-banner__flagbar,
.vesta-banner--mdr .vesta-banner__photo,
.vesta-banner--mdr .vesta-banner__photo-back,
.vesta-banner--mdr .vesta-banner__bottom-deco,
.vesta-banner--anvisa .vesta-banner__photo,
.vesta-banner--anvisa .vesta-banner__flagbar {
display: none !important;
}
/* Background com opacidade reduzida no MDSAP mobile */
.vesta-banner--mdsap .vesta-banner__bg {
display: block !important;
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
z-index: 0;
}
/* MDR bg + overlay */
.vesta-banner--mdr .vesta-banner__bg {
display: block !important;
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.vesta-banner--mdr .vesta-banner__overlay {
display: block !important;
position: absolute !important;
inset: 0;
background: rgba(203, 201, 187, 0.9);
z-index: 1;
}
/* Anvisa bg + overlay mantêm posicionamento absoluto */
.vesta-banner--anvisa .vesta-banner__bg {
display: block !important;
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
z-index: 0;
}
.vesta-banner--anvisa .vesta-banner__overlay {
display: block !important;
position: absolute !important;
inset: 0;
background: rgba(0, 58, 64, 0.7);
z-index: 1;
}
/* Conteúdo precisa ficar acima do bg/overlay */
.vesta-banner--anvisa .vesta-banner__content,
.vesta-banner--mdr .vesta-banner__content {
position: relative !important;
z-index: 5;
}
/* ----- MDSAP mobile ----- */
.vesta-banner--mdsap .vesta-banner__badge {
display: block;
width: 22vw;
aspect-ratio: 1 / 1;
margin: 0 auto 6vw;
}
.vesta-banner--mdsap .vesta-banner__title-1,
.vesta-banner--mdsap .vesta-banner__title-2 {
font-size: 9vw;
line-height: 1.15;
white-space: normal;
color: #cbc9bb;
text-align: center;
}
.vesta-banner--mdsap .vesta-banner__flagletters {
display: block;
width: 60vw;
height: auto;
margin: 3vw auto;
}
.vesta-banner--mdsap .vesta-banner__title-2 {
margin-bottom: 6vw;
}
.vesta-banner--mdsap .vesta-banner__subtitle {
font-size: 4vw;
line-height: 1.4;
color: #fff;
margin-bottom: 8vw;
max-width: 100%;
}
.vesta-banner--mdsap .vesta-banner__cta {
display: inline-flex;
font-size: 3.6vw;
padding: 3.5vw 8vw;
border-radius: 200px;
background-color: #7e7050;
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ----- MDR mobile ----- */
.vesta-banner--mdr .vesta-banner__pill {
display: inline-flex;
font-size: 4vw;
padding: 2.5vw 6vw;
border-radius: 200px;
background-color: #003a40;
color: #cbc9bb;
font-weight: 700;
margin-bottom: 6vw;
}
.vesta-banner--mdr .vesta-banner__title {
font-family: 'Metrisch', system-ui, sans-serif; /* Zenovak removido por decisão do cliente — unificar em Metrisch */
font-size: 8vw;
line-height: 1.15;
color: #003a40;
text-align: center;
}
.vesta-banner--mdr .vesta-banner__title-line {
display: block;
}
.vesta-banner--mdr .vesta-banner__mdr-text {
display: block;
width: 75%;
height: auto;
margin: 3vw auto;
}
.vesta-banner--mdr .vesta-banner__subtitle {
font-size: 4vw;
line-height: 1.4;
color: #003a40;
margin: 4vw 0 6vw;
max-width: 100%;
}
/* Wrapper em flex row pra calendário ficar à ESQUERDA das datas */
.vesta-banner--mdr .vesta-banner__info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4vw;
margin-bottom: 6vw;
}
.vesta-banner--mdr .vesta-banner__calendar {
width: 12vw;
height: auto;
aspect-ratio: 94 / 96;
flex-shrink: 0;
}
.vesta-banner--mdr .vesta-banner__dates {
font-size: 4vw;
font-weight: 700;
line-height: 1.3;
color: #003a40;
text-align: left;
}
.vesta-banner--mdr .vesta-banner__cta {
display: inline-flex;
font-size: 3.6vw;
padding: 3.5vw 8vw;
border-radius: 200px;
background-color: #003a40;
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ----- Anvisa mobile ----- */
/* Reset title-row pra fluxo block, badge vai centralizado em cima */
.vesta-banner--anvisa .vesta-banner__title-row {
display: block !important;
width: 100% !important;
}
.vesta-banner--anvisa .vesta-banner__badge {
display: block !important;
width: 22vw;
aspect-ratio: 1 / 1;
margin: 0 auto 6vw !important;
}
.vesta-banner--anvisa .vesta-banner__title {
font-family: Metrisch, sans-serif;
font-weight: 500;
font-size: 8vw;
line-height: 1.15;
color: #cbc9bb;
text-align: center;
white-space: normal !important;
}
.vesta-banner--anvisa .vesta-banner__title-line {
display: block;
}
.vesta-banner--anvisa .vesta-banner__info {
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4vw;
margin: 6vw 0 !important;
}
.vesta-banner--anvisa .vesta-banner__calendar {
width: 12vw;
height: auto;
flex-shrink: 0;
}
.vesta-banner--anvisa .vesta-banner__dates {
display: flex !important;
flex-direction: column;
font-size: 4vw;
line-height: 1.3;
text-align: left;
}
.vesta-banner--anvisa .vesta-banner__date { color: #ffffff; font-weight: 400; }
.vesta-banner--anvisa .vesta-banner__time { color: #d6d2c4; font-weight: 700; }
.vesta-banner--anvisa .vesta-banner__cta {
display: inline-flex;
font-size: 3.6vw;
padding: 3.5vw 8vw;
border-radius: 200px;
background-color: #aba180;
color: #003a40;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.04em;
}
}
/* Remover Zenovak de botões — única alteração de fonte (cliente pediu) */
.button, .button-2, .button-3, .button-4,
.btn, .btn-01, .btn-blog, .btn-escuro, .btn-claro,
.btn-01-copy, .btn-escuro-copy, .button-copy,
a.button, a.btn, a.btn-01,
.w-button {
font-family: 'Metrisch', system-ui, sans-serif !important;
}
/* ============================================================
* SESSÃO 14 (2026-05-21) — Banner 3 Consultoria PBQP-H
* ============================================================ */
.vesta-banner--pbqp { display: block; text-decoration: none; }
.vesta-banner--pbqp .vesta-banner__inner {
position: relative;
width: 100%;
aspect-ratio: 1920 / 718; /* sessão 14.1: bater com MDSAP/MDR (era 1920/494, ficou mais baixo) */
background-color: #003a40;
background-image: linear-gradient(135deg, #003a40 0%, #00282c 100%);
overflow: hidden;
}
.vesta-banner--pbqp .vesta-banner__photo {
position: absolute;
top: 0;
right: 0;
width: 42%;
height: 100%;
z-index: 2;
}
.vesta-banner--pbqp .vesta-banner__photo picture,
.vesta-banner--pbqp .vesta-banner__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%; /* sessão 14.2: centralizado vertical */
}
.vesta-banner--pbqp .vesta-banner__photo::before {
/* gradiente forte pra integrar a foto ao fundo escuro */
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 58, 64, 1) 0%, rgba(0, 58, 64, 0) 30%);
z-index: 2;
pointer-events: none;
}
.vesta-banner--pbqp .vesta-banner__content {
position: absolute;
top: 50%;
left: 4.69%;
transform: translateY(-50%);
width: 52%;
z-index: 3;
}
.vesta-banner--pbqp .vesta-banner__eyebrow {
display: inline-block;
margin-bottom: 1.2vw;
font-family: 'Metrisch', system-ui, sans-serif;
font-size: 0.83vw;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #aba180;
}
.vesta-banner--pbqp .vesta-banner__title {
margin: 0 0 1.4vw 0;
font-family: 'Metrisch', system-ui, sans-serif;
font-weight: 500;
font-size: 3.65vw;
line-height: 1.1;
color: #ffffff;
}
.vesta-banner--pbqp .vesta-banner__title-line { display: block; }
.vesta-banner--pbqp .vesta-banner__title-line:first-child { color: #cbc9bb; }
.vesta-banner--pbqp .vesta-banner__subtitle {
margin: 0 0 1.8vw 0;
font-family: 'Metrisch', system-ui, sans-serif;
font-size: 1.05vw;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
max-width: 36em;
}
.vesta-banner--pbqp .vesta-banner__cta {
/* sessão 14.2: força mesma aparência dos CTAs padronizados (sessão 13).
Sem isso herda só do display básico — não bate visualmente com MDSAP/MDR. */
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #89764e !important;
border: 1px solid #89764e !important;
color: #ffffff !important;
border-radius: 50px !important;
padding: 14px 32px !important;
font-family: 'Metrisch', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 180ms ease, border-color 180ms ease,
transform 180ms ease, box-shadow 180ms ease !important;
}
.vesta-banner--pbqp:hover .vesta-banner__cta {
background-color: #76663f !important;
border-color: #76663f !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
/* Faixa dourada inferior (sessão 14.3 — substitui flagbar com bandeiras) */
.vesta-banner--pbqp .vesta-banner__goldbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2.65%;
z-index: 5;
background-color: #89764e;
}
/* ============================================================
* SESSÃO 15.1 (2026-05-21) — Banner LGPD — versão curta + neutra
* Texto enxuto, cor creme (não verde forte), bom mobile.
* ============================================================ */
.vesta-cc-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 720px;
margin: 0 auto;
background-color: #ffffff;
color: #003a40;
padding: 16px 20px;
border-radius: 12px;
border: 1px solid #e9e9e9;
box-shadow: 0 12px 32px rgba(0, 40, 44, 0.16);
z-index: 9999;
transform: translateY(calc(100% + 24px));
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vesta-cc-banner[hidden] { display: none; }
.vesta-cc-banner--visible { transform: translateY(0); }
.vesta-cc-banner__container {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.vesta-cc-banner__text {
flex: 1 1 280px;
margin: 0;
font: 400 13px/1.5 'Metrisch', system-ui, sans-serif;
color: #003a40;
}
.vesta-cc-banner__text a { color: #89764e; text-decoration: underline; }
.vesta-cc-banner__text a:hover { color: #76663f; }
.vesta-cc-banner__actions {
display: flex;
gap: 8px;
flex-shrink: 0;
flex-wrap: wrap;
}
.vesta-cc-btn {
font: 500 13px/1.2 'Metrisch', system-ui, sans-serif;
padding: 9px 18px;
border-radius: 50px;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.vesta-cc-btn--primary { background-color: #003a40; color: #ffffff; border-color: #003a40; }
.vesta-cc-btn--primary:hover { background-color: #00282c; border-color: #00282c; transform: translateY(-1px); }
.vesta-cc-btn--outline { background-color: transparent; color: #003a40; border-color: #d4d4d4; }
.vesta-cc-btn--outline:hover { background-color: rgba(0, 58, 64, 0.05); border-color: #003a40; }
.vesta-cc-btn--ghost { background-color: transparent; color: #6b7d80; border-color: transparent; padding: 9px 12px; }
.vesta-cc-btn--ghost:hover { color: #003a40; text-decoration: underline; }
/* Modal */
.vesta-cc-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.vesta-cc-modal[hidden] { display: none; }
.vesta-cc-modal__backdrop { position: absolute; inset: 0; background-color: rgba(0, 40, 44, 0.7); }
.vesta-cc-modal__panel {
position: relative;
background-color: #ffffff;
border-radius: 16px;
padding: 32px;
max-width: 540px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 24px 64px rgba(0, 40, 44, 0.32);
}
.vesta-cc-modal__close {
position: absolute; top: 12px; right: 12px;
background: transparent; border: 0; cursor: pointer;
color: #003a40; font-size: 28px; line-height: 1;
width: 36px; height: 36px;
border-radius: 50%;
transition: background-color 180ms ease;
}
.vesta-cc-modal__close:hover { background-color: rgba(0, 58, 64, 0.06); }
.vesta-cc-modal__title {
margin: 0 0 8px;
font: 600 20px/1.3 'Metrisch', system-ui, sans-serif;
color: #003a40;
}
.vesta-cc-modal__intro {
margin: 0 0 16px;
font: 400 14px/1.5 'Metrisch', system-ui, sans-serif;
color: #6b6b6b;
}
.vesta-cc-cat {
display: block;
padding: 16px 0;
border-top: 1px solid #e9e9e9;
cursor: pointer;
}
.vesta-cc-cat:first-of-type { border-top: 0; cursor: default; }
.vesta-cc-cat__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
gap: 12px;
}
.vesta-cc-cat__title {
font: 600 15px/1.3 'Metrisch', system-ui, sans-serif;
color: #003a40;
margin: 0;
}
.vesta-cc-cat__desc {
font: 400 13px/1.5 'Metrisch', system-ui, sans-serif;
color: #6b6b6b;
margin: 0;
}
.vesta-cc-cat__locked {
font: 500 12px/1.3 'Metrisch', system-ui, sans-serif;
color: #89764e;
}
.vesta-cc-cat__toggle {
width: 20px; height: 20px;
accent-color: #003a40;
cursor: pointer;
flex-shrink: 0;
}
.vesta-cc-modal__actions {
display: flex;
gap: 10px;
margin-top: 24px;
justify-content: flex-end;
flex-wrap: wrap;
}
.vesta-cc-modal__actions .vesta-cc-btn--outline { color: #003a40; border-color: #003a40; }
.vesta-cc-modal__actions .vesta-cc-btn--outline:hover { background-color: rgba(0, 58, 64, 0.05); }
/* Mobile do banner LGPD */
@media (max-width: 640px) {
.vesta-cc-banner { bottom: 12px; left: 12px; right: 12px; padding: 14px 16px; border-radius: 10px; }
.vesta-cc-banner__container { gap: 12px; }
.vesta-cc-banner__text { flex: 1 1 100%; font-size: 12px; }
.vesta-cc-banner__actions { width: 100%; gap: 6px; }
.vesta-cc-banner__actions .vesta-cc-btn { flex: 1; padding: 10px 8px; font-size: 12px; }
.vesta-cc-banner__actions .vesta-cc-btn--ghost { flex: 0 0 100%; order: 3; padding: 6px; }
.vesta-cc-modal__panel { padding: 24px 20px; max-height: 90vh; }
}
/* +30px no left do conteúdo dos banners (sessão 14.5) — pra não colar nas setas */
@media (min-width: 768px) {
.vesta-banner--mdsap .vesta-banner__title-1,
.vesta-banner--mdsap .vesta-banner__title-2,
.vesta-banner--mdsap .vesta-banner__subtitle,
.vesta-banner--mdsap .vesta-banner__cta {
left: calc(4.69% + 30px) !important;
}
.vesta-banner--mdsap .vesta-banner__flagletters {
left: calc(34.17% + 30px) !important;
}
.vesta-banner--mdr .vesta-banner__content {
left: calc(5.52% + 30px) !important;
}
.vesta-banner--pbqp .vesta-banner__content {
left: calc(4.69% + 30px) !important;
}
}
/* Setas do slider da home — círculos translúcidos próximos às bordas (sessão 14.4)
Container (.w-slider-arrow-*) mantém height 100% do Webflow original — só ajustamos
posição lateral (mais perto das bordas). O círculo é o ÍCONE interno (.w-icon-slider-*)
que o Webflow já centraliza verticalmente. */
.home-slide .w-slider-arrow-left,
.home-slide .w-slider-arrow-right {
width: 64px;
background-color: transparent;
}
.home-slide .w-slider-arrow-left { left: 10px; }
.home-slide .w-slider-arrow-right { right: 10px; }
.home-slide .w-icon-slider-left,
.home-slide .w-icon-slider-right {
width: 44px;
height: 44px;
background-color: rgba(0, 40, 44, 0.45);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-radius: 50%;
color: #ffffff;
font-size: 16px;
line-height: 44px;
text-align: center;
opacity: 0.85;
transition: background-color 180ms ease, opacity 180ms ease;
}
.home-slide .w-slider-arrow-left:hover .w-icon-slider-left,
.home-slide .w-slider-arrow-right:hover .w-icon-slider-right {
background-color: rgba(0, 40, 44, 0.7);
opacity: 1;
}
/* Mobile (alinhado com mdsap/mdr/anvisa: aspect 3/4, flex column, centered) */
@media (max-width: 767.98px) {
.vesta-banner--pbqp .vesta-banner__inner {
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 8vw 6vw;
overflow: hidden;
box-sizing: border-box;
background-image: linear-gradient(180deg, #003a40 0%, #00282c 100%);
}
/* Reset absolute positioning de TODOS descendentes */
.vesta-banner--pbqp .vesta-banner__inner * {
position: static !important;
top: auto; left: auto; right: auto; bottom: auto;
transform: none !important;
}
/* Esconder foto e goldbar em mobile (foco no texto) */
.vesta-banner--pbqp .vesta-banner__photo,
.vesta-banner--pbqp .vesta-banner__goldbar {
display: none !important;
}
/* Conteúdo em fluxo natural */
.vesta-banner--pbqp .vesta-banner__content {
width: 100% !important;
display: block !important;
text-align: center;
}
.vesta-banner--pbqp .vesta-banner__eyebrow {
display: inline-block;
margin: 0 0 16px;
font-size: 11px;
letter-spacing: 0.18em;
}
.vesta-banner--pbqp .vesta-banner__title {
margin: 0 0 18px !important;
font-size: 8.5vw !important;
line-height: 1.15;
}
.vesta-banner--pbqp .vesta-banner__title-line { display: block; }
.vesta-banner--pbqp .vesta-banner__subtitle {
margin: 0 auto 24px !important;
font-size: 14px !important;
max-width: 90% !important;
line-height: 1.5;
}
.vesta-banner--pbqp .vesta-banner__cta {
display: inline-flex !important;
margin: 0 auto;
}
}
/* ============================================================
* SESSÃO 10–11 (2026-05-21) — Home: ajustes pedidos pelo cliente
* Tudo escopado em body.home / wrapper específico pra não vazar.
* ============================================================ */
/* --- Seção 2 (4 blocos ícone+texto): fundo bege 10% + títulos --- */
/* Sessão 11: opacidade reduzida (cliente pediu — 100% estava chapado demais) */
.section-21 {
background-color: rgba(203, 201, 187, 0.1); /* #cbc9bb @ 10% */
}
.section-21 .section-21__card {
background-color: #ffffff;
}
.section-21__title {
color: #003a40;
font-family: 'Metrisch', system-ui, sans-serif;
font-size: 18px;
font-weight: 500; /* sessão 12: cliente pediu fonte mais leve (era 700) */
line-height: 1.3;
margin: 16px 0 8px;
text-align: center;
}
/* --- Seção 20 "Por que contratar...": padding-top 60px --- */
/* Sessão 11: estava colado na seção 2 (era padding-top: 0) */
.section-20 {
padding-top: 60px;
}
/* --- Seção 30 "Categorias e Serviços": fundo bege 10% --- */
/* Sessão 11: contraste com os cards brancos da frente */
.section-30 {
background-color: rgba(203, 201, 187, 0.1);
}
/* --- Treinamentos recentes (4 cards): gap 20px --- */
/* Sessão 11: column-gap era 10px (cards muito próximos) */
body.home .collection-list-7 {
grid-column-gap: 20px;
}
/* --- Seção 24 (formatos EAD/Live/Trainee/Presencial): gap 50px entre foto e texto --- */
/* Sessão 11: cliente disse "estão colados" — column-gap era 0 */
/* ESCOPADO por .section-24 pra não afetar .grid-21 em page-auditoria/consultoria/conheca-a-vesta */
.section-24 .grid-21,
.section-24 .svcdffgrvf {
grid-column-gap: 50px;
}
/* --- Botões App Store / Google Play (sessão 13) --- */
/* SVGs brancos sem fundo → wrapper monta botão pill verde-escuro com ícone centralizado */
.vesta-store-btns {
display: flex;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.vesta-store-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #003a40;
border: 1px solid #003a40;
border-radius: 50px;
padding: 12px 28px;
min-height: 48px;
text-decoration: none;
transition: background-color 180ms ease, border-color 180ms ease,
transform 180ms ease, box-shadow 180ms ease;
}
.vesta-store-btn:hover,
.vesta-store-btn:focus-visible {
background-color: #00282c;
border-color: #00282c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 40, 44, 0.18);
}
.vesta-store-btn__icon {
display: block;
height: 24px;
width: auto;
max-width: 130px;
}
/* --- Refinamento dos banners (sessão 13) --- */
/* Padronização da fonte em todo conteúdo do banner */
.vesta-banner,
.vesta-banner * {
font-family: 'Metrisch', system-ui, sans-serif !important;
}
/* CTA dos banners padronizado com o restante da home (oliva sólido pill).
Specificidade alta pra vencer .vesta-banner--mdsap .vesta-banner__cta etc. */
.vesta-banner--mdsap .vesta-banner__cta,
.vesta-banner--mdr .vesta-banner__cta,
.vesta-banner .vesta-banner__cta {
background-color: #89764e !important;
border: 1px solid #89764e !important;
color: #ffffff !important;
border-radius: 50px !important;
padding: 14px 32px !important;
font-family: 'Metrisch', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: 0 !important;
transition: background-color 180ms ease, border-color 180ms ease,
transform 180ms ease, box-shadow 180ms ease !important;
}
.vesta-banner:hover .vesta-banner__cta {
background-color: #76663f !important;
border-color: #76663f !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
/* --- Scroll reveal (sessão 13.1) — animação mais visível --- */
.vesta-reveal {
opacity: 0;
transform: translateY(40px) scale(0.97);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.vesta-reveal--visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Stagger entre cards dentro de um grid (atraso progressivo) */
.section-21 .div-block-95.vesta-reveal { transition-delay: 0ms; }
.section-21 .div-block-95.vesta-reveal:nth-child(2) { transition-delay: 90ms; }
.section-21 .div-block-95.vesta-reveal:nth-child(3) { transition-delay: 180ms; }
.section-21 .div-block-95.vesta-reveal:nth-child(4) { transition-delay: 270ms; }
.section-30 .div-block-95.vesta-reveal:nth-child(2) { transition-delay: 60ms; }
.section-30 .div-block-95.vesta-reveal:nth-child(3) { transition-delay: 120ms; }
.section-30 .div-block-95.vesta-reveal:nth-child(4) { transition-delay: 180ms; }
.collection-list-7 .collection-item.vesta-reveal:nth-child(2) { transition-delay: 80ms; }
.collection-list-7 .collection-item.vesta-reveal:nth-child(3) { transition-delay: 160ms; }
.collection-list-7 .collection-item.vesta-reveal:nth-child(4) { transition-delay: 240ms; }
/* Hero entrance (sessão 13.1): banner + menu/header fade-in ao carregar */
@keyframes vesta-hero-fade-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.home-slide { animation: vesta-hero-fade-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.menu { animation: vesta-hero-fade-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
.vesta-reveal { opacity: 1; transform: none; transition: none; }
.home-slide, .menu { animation: none; }
}
/* --- Padronização VISUAL dos botões CTA da Home (ESCOPADO em body.home) --- */
/* Sessão 11: cliente cobrou padronização REAL — não só hover.
Botões CTA da Home tinham font-size variável (14 vs 16) e padding inconsistente.
Categoria & Serviços (.div-block-159) NÃO é afetado — mantido como está. */
body.home .btn-01,
body.home .btn-01-2,
body.home .btn-01-copy,
body.home .button-3 {
background-color: #89764e;
border: 1px solid #89764e;
color: #ffffff;
border-radius: 50px;
padding: 14px 32px;
font-family: 'Metrisch', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-transform: none;
letter-spacing: 0;
transition: background-color 180ms ease, color 180ms ease,
border-color 180ms ease, transform 180ms ease,
box-shadow 180ms ease;
}
body.home a.btn-01:hover,
body.home a.btn-01-2:hover,
body.home a.btn-01-copy:hover,
body.home a.button-3:hover,
body.home .btn-01:hover,
body.home .btn-01-2:hover,
body.home .btn-01-copy:hover,
body.home .button-3:hover {
background-color: #76663f !important;
border-color: #76663f !important;
color: #ffffff !important;
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(0, 40, 44, 0.22) !important;
}
/* --- "Ver curso": setinha animada + box do curso com hover --- */
.vesta-ver-curso {
display: inline-flex;
align-items: center;
gap: 6px;
}
.vesta-ver-curso__arrow {
transition: transform 180ms ease;
}
.collection-item {
transition: transform 180ms ease, box-shadow 180ms ease;
}
.collection-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 40, 44, 0.08);
}
.collection-item:hover .vesta-ver-curso__arrow {
transform: translateX(4px);
}
/* --- Seção 24 (formatos EAD/Live/Trainee/Presencial): texto + imagens --- */
/* Texto a 100% da largura (era max-width 70% comprimindo) */
.section-24 .div-block-97 {
max-width: 100%;
}
/* Sessão 12: imagem ocupa mesma altura do bloco de texto ao lado (desktop).
Antes a imagem tinha altura natural; agora estica pra altura do grid cell.
Solução: img position:absolute dentro de wrapper position:relative.
IMPORTANTE: EAD tem 2 níveis de wrapping (outer div sem classe → .div-block-160 → img),
enquanto outras seções têm só 1 (.div-block-157/.bloco-div-157 → img). Por isso
precisamos forçar `height: 100%` em TODOS os filhos diretos do grid pra propagar
o stretch pela cadeia inteira até o wrapper que tem `position: relative`. */
@media (min-width: 992px) {
.section-24 .grid-21,
.section-24 .svcdffgrvf {
align-items: stretch;
}
.section-24 .grid-21 > *,
.section-24 .svcdffgrvf > * {
height: 100%;
}
.section-24 .div-block-160,
.section-24 .div-block-157,
.section-24 .bloco-div-157 {
position: relative;
overflow: hidden;
border-radius: 10px;
height: 100%;
}
.section-24 .image-42 {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 0;
}
}
/* Padronizar bordas arredondadas + hover em TODAS as imagens da seção
(a primeira já tinha border-radius via .div-block-160; aplica nas outras
via wrappers .bloco-div-157 / .div-block-157 sem mexer em .image-42 base) */
.section-24 .bloco-div-157,
.section-24 .div-block-157 {
border-radius: 10px;
overflow: hidden;
}
.section-24 .image-42 {
display: block;
border-radius: 10px;
transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}
.section-24 .image-42:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 40, 44, 0.08);
}
/* ============================================================
* SESSÃO 24.1 (2026-05-25) — FIX URGENTE: dropdown "Treinamentos"
* estava aparecendo ATRÁS do banner hero. Causa: `.menu` wrapper
* é position:static + z-index:auto → o z-index:900 do `.menu-dropdown`
* ficava preso DENTRO do navbar (z=5), abaixo do `.vesta-banner__content`
* (z=3 mas em stacking context separado do slider). Fix: elevar o
* `.menu` raiz pra criar stacking context global acima do slider.
* ============================================================ */
.menu {
position: relative;
z-index: 1000;
}
/* Garantia extra — dropdown sempre na frente do slider */
.dropdown-list-2b {
z-index: 1001 !important;
}
/* ============================================================
* SESSÃO 24 (2026-05-25) — /treinamentos/medical/ (page-id-60)
* ----------------------------------------------------------
* 1) Tag "Treinamentos" do hero → eyebrow minimalista
* 2) Grid cards → gap +5px
* 3) "Carga horária" label+valor → -2px
* 4) Paginação numerada (bloco .vesta-pag) — apenas medical
* ============================================================ */
/* 1) Tag "Treinamentos" (eyebrow do hero) — escopado pra medical */
body.page-id-60 .secao-capa-2.medical-devices .text-block-65 {
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 0;
color: #cbc9bb;
}
/* 2) Grid dos cards de cursos — gap 16px → 21px */
body:is(.page-id-60, .page-id-27, .page-id-28, .page-id-36) .collection-list-9 {
grid-row-gap: 21px !important;
grid-column-gap: 21px !important;
}
/* 3) "Carga horária" (label + valor) — 16px → 14px */
body:is(.page-id-60, .page-id-27, .page-id-28, .page-id-36) .text-block-64,
body:is(.page-id-60, .page-id-27, .page-id-28, .page-id-36) .text-block-64-copy {
font-size: 14px;
}
/* 4) Paginação numerada minimalista (escopo: medical only) */
.vesta-pag {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 40px 0 8px;
flex-wrap: wrap;
font-family: 'Metrisch', system-ui, sans-serif;
}
.vesta-pag__numbers {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.vesta-pag__numbers li {
margin: 0;
padding: 0;
}
.vesta-pag__num,
.vesta-pag__nav {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
font-size: 13px;
font-weight: 500;
line-height: 1;
color: #003a40;
background-color: #ffffff;
border: 1px solid rgba(0, 58, 64, 0.12);
border-radius: 8px;
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.vesta-pag__nav {
gap: 6px;
padding: 0 14px;
}
.vesta-pag__icon {
flex-shrink: 0;
}
.vesta-pag__num:hover,
.vesta-pag__nav:hover {
background-color: rgba(137, 118, 78, 0.08);
border-color: rgba(137, 118, 78, 0.4);
color: #76663f;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 40, 44, 0.06);
}
.vesta-pag__num:focus-visible,
.vesta-pag__nav:focus-visible {
outline: 2px solid #0050bd;
outline-offset: 2px;
}
.vesta-pag__num--current {
background-color: #003a40;
border-color: #003a40;
color: #ffffff;
cursor: default;
}
.vesta-pag__num--current:hover {
background-color: #003a40;
border-color: #003a40;
color: #ffffff;
transform: none;
box-shadow: none;
}
.vesta-pag__nav[aria-disabled="true"] {
opacity: 0.35;
pointer-events: none;
cursor: not-allowed;
}
.vesta-pag__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
color: #6b6b6b;
font-size: 14px;
user-select: none;
}
@media (max-width: 480px) {
.vesta-pag {
gap: 6px;
}
.vesta-pag__nav span {
display: none;
}
.vesta-pag__nav {
padding: 0 10px;
min-width: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.vesta-pag__num,
.vesta-pag__nav {
transition: none;
}
}
/* ============================================================
* SESSÃO 24.3 (2026-05-26) — Estrutura "Em breve" full (placeholder grande)
* 9 páginas /treinamentos/ sem cursos publicados:
* 29 saude-e-seguranca 30 gestao-de-risco
* 31 continuidade-de-negocios 32 eficiencia-energetica
* 33 gestao-de-laboratorios 34 gestao-de-t-i
* 35 gestao-ambiental 39 sistema-de-gestao-integrado-sgi
* 353 ivd-diagnostico-in-vitro
*
* Cliente: estrutura idêntica à medical (hero secao-capa-2 + section-48 grid-37
* com busca lateral). No lugar do grid de cursos: empty-state placeholder
* "Em breve" com borda dashed.
* ============================================================ */
/* Hero das 9 "Em breve" — usa a MESMA imagem das 4 com cursos (cliente pediu na
sessão 24.4 pra padronizar com as outras páginas de treinamentos). */
/* (Sem override de background-image — herda do CSS Webflow .secao-capa-2.medical-devices) */
/* Eyebrow "TREINAMENTOS" no hero — mesma regra da medical pros 9 IDs. */
body:is(.page-id-29, .page-id-30, .page-id-31, .page-id-32, .page-id-33, .page-id-34, .page-id-35, .page-id-39, .page-id-353) .secao-capa-2.medical-devices .text-block-65 {
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 0;
color: #cbc9bb;
}
/* Placeholder empty-state "Em breve" — só nas 9 sem cursos */
body:is(.page-id-29, .page-id-30, .page-id-31, .page-id-32, .page-id-33, .page-id-34, .page-id-35, .page-id-39, .page-id-353) .vesta-em-breve {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 32px;
min-height: 480px;
border: 2px dashed rgba(0, 58, 64, 0.18);
border-radius: 16px;
background-color: rgba(203, 201, 187, 0.08);
margin-top: 30px; /* sessão 24.4: respiro entre descrição e placeholder */
}
body:is(.page-id-29, .page-id-30, .page-id-31, .page-id-32, .page-id-33, .page-id-34, .page-id-35, .page-id-39, .page-id-353) .vesta-em-breve__icon {
margin-bottom: 16px;
opacity: 0.45;
color: #89764e;
}
body:is(.page-id-29, .page-id-30, .page-id-31, .page-id-32, .page-id-33, .page-id-34, .page-id-35, .page-id-39, .page-id-353) .vesta-em-breve__title {
font-size: 22px;
font-weight: 500;
color: #003a40;
letter-spacing: 0.02em;
margin-bottom: 8px;
font-family: 'Metrisch', system-ui, sans-serif;
}
body:is(.page-id-29, .page-id-30, .page-id-31, .page-id-32, .page-id-33, .page-id-34, .page-id-35, .page-id-39, .page-id-353) .vesta-em-breve__sub {
font-size: 14px;
color: rgba(0, 58, 64, 0.6);
max-width: 340px;
line-height: 1.55;
font-family: 'Metrisch', system-ui, sans-serif;
}
@media (max-width: 640px) {
body:is(.page-id-29, .page-id-30, .page-id-31, .page-id-32, .page-id-33, .page-id-34, .page-id-35, .page-id-39, .page-id-353) .vesta-em-breve {
padding: 48px 20px;
min-height: 320px;
}
}
/* ============================================================
* SESSÃO 24.5 (2026-05-26) — /treinamento-mdsap/ (page-id-538)
* FAQ grid: gap 25px → 10px + altura igual entre blocos da linha
* ============================================================ */
body.page-id-538 .section-56 .div-block-253 {
grid-row-gap: 10px !important;
grid-column-gap: 10px !important;
align-items: stretch !important;
}
body.page-id-538 .section-56 .div-block-253 .faq-item-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
/* SESSÃO 24.6 revertida na sessão 24.7 (cliente: deixar parceiros como tava antes). */
/* ============================================================
* SESSÃO 24.8 (2026-05-26) — Blog (page-id-23) + ajustes globais
*
* 1) Filtro preto unificado em todas as heros — já aplicado nas linhas 259-285
* (verde 0,58,64 → preto 0,0,0 0.66)
* 2) Tabs categorias blog: gap inferior 10px + padding interno menor
* 3) Grid de posts: 3 cols → 2 cols
* 4) Hover ícones redes sociais (Instagram, LinkedIn, Facebook)
* ============================================================ */
/* 2) Tabs categorias blog */
body.page-id-23 .tabs-menu {
display: flex;
flex-wrap: wrap;
gap: 10px 8px;
margin-bottom: 24px;
}
body.page-id-23 .tab-link-tab-3 {
padding: 8px 14px !important;
font-size: 13px !important;
font-weight: 500;
letter-spacing: 0.02em;
border-radius: 50px !important;
transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
body.page-id-23 .tab-link-tab-3:hover {
transform: translateY(-1px);
}
/* 3) Grid posts: 3 → 2 cols com mais respiro */
body.page-id-23 .collection-list-2 {
grid-template-columns: repeat(2, 1fr) !important;
grid-column-gap: 30px !important;
grid-row-gap: 30px !important;
}
@media (max-width: 640px) {
body.page-id-23 .collection-list-2 {
grid-template-columns: 1fr !important;
}
}
/* 4) Hover ícones redes sociais (sidebar blog + sidebars das páginas de cursos) */
.insta-menu,
.linke-menu,
.face-menu {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 200ms ease, filter 200ms ease, opacity 200ms ease;
}
.insta-menu:hover,
.linke-menu:hover,
.face-menu:hover {
transform: translateY(-2px) scale(1.08);
filter: brightness(1.1);
}
.insta-menu:focus-visible,
.linke-menu:focus-visible,
.face-menu:focus-visible {
outline: 2px solid #0050bd;
outline-offset: 4px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.insta-menu,
.linke-menu,
.face-menu {
transition: none;
}
}
/* ============================================================
* SESSÃO 24.9 (2026-05-26) — /contatos/ (page-id-25)
* Refino: hover visível em todos os links + spacing
* ============================================================ */
body.page-id-25 .link-footer-whats,
body.page-id-25 .link-footer-email,
body.page-id-25 .link-footer-fone,
body.page-id-25 .link-footer-insta,
body.page-id-25 .link-footer-link,
body.page-id-25 .link-footer-face,
body.page-id-25 .link-footer {
transition: color 200ms ease, transform 200ms ease, opacity 200ms ease;
display: inline-block;
}
body.page-id-25 .link-footer-whats:hover,
body.page-id-25 .link-footer-email:hover,
body.page-id-25 .link-footer-fone:hover {
color: #89764e;
transform: translateX(3px);
}
body.page-id-25 .link-footer-insta:hover,
body.page-id-25 .link-footer-link:hover,
body.page-id-25 .link-footer-face:hover {
transform: translateY(-2px) scale(1.08);
filter: brightness(1.1);
}
body.page-id-25 .link-footer:hover {
color: #89764e;
transform: translateX(2px);
}
body.page-id-25 .link-footer:focus-visible,
body.page-id-25 .link-footer-whats:focus-visible,
body.page-id-25 .link-footer-email:focus-visible,
body.page-id-25 .link-footer-fone:focus-visible {
outline: 2px solid #0050bd;
outline-offset: 2px;
border-radius: 2px;
}
/* Espacamento mais respirável entre items da contatos */
body.page-id-25 .section-10 .list-item,
body.page-id-25 .section-10 .list-item-2,
body.page-id-25 .section-10 .list-item-copy {
margin-bottom: 6px;
}
@media (prefers-reduced-motion: reduce) {
body.page-id-25 .link-footer-whats,
body.page-id-25 .link-footer-email,
body.page-id-25 .link-footer-fone,
body.page-id-25 .link-footer-insta,
body.page-id-25 .link-footer-link,
body.page-id-25 .link-footer-face,
body.page-id-25 .link-footer {
transition: none;
}
}
/* ============================================================
* SESSÃO 24.11 (2026-05-26) — Blog + Single-Cursos refinos
*
* Blog (page-id-23):
* - gap tabs categorias: 10px 8px → 10px (linha+coluna iguais)
* - hover container post: bg-image escala 115% (zoom sutil)
* - tag "Tags" do sidebar — apagado (PHP)
* - tab "Antissuborno e Compliance" — apagado (PHP)
* - "Artigos recentes" → "Todos os artigos" (PHP)
*
* Single-cursos:
* - Filtro hero verde → preto (já aplicado no Webflow CSS sessão 24.11 sed)
* - Botões Presencial/Online/InCompany/WhatsApp: hover + padding padronizado
* ============================================================ */
/* ---------- BLOG ---------- */
body.page-id-23 .tabs-menu {
gap: 10px !important; /* sobrescreve gap 10px 8px da sessão 24.8 */
}
/* Hover no container do post — transform: scale suave (sem salto) */
body.page-id-23 .collection-list-2 .w-dyn-item {
overflow: hidden;
border-radius: 10px;
}
body.page-id-23 .collection-list-2 .w-dyn-item .div-block-227 {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
body.page-id-23 .collection-list-2 .w-dyn-item:hover .div-block-227 {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
body.page-id-23 .collection-list-2 .w-dyn-item .div-block-227 {
transition: none;
}
}
/* ---------- SINGLE-CURSOS ---------- */
/* Botões Presencial/Online/InCompany/btn-blog — padronizar padding e hover.
EXCLUI .link-block-12 (WhatsApp ícone circular 50×50) e .link-footer-whats
pra não destruir aparência. */
body.single-cursos a.button-3,
body.single-cursos a.btn-blog {
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 500;
border-radius: 50px !important;
transition: background-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
letter-spacing: 0.01em;
}
body.single-cursos a.button-3:hover,
body.single-cursos a.btn-blog:hover {
background-color: #76663f !important;
border-color: #76663f !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 40, 44, 0.18);
}
body.single-cursos a.button-3:focus-visible {
outline: 2px solid #0050bd;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
body.single-cursos a.button-3,
body.single-cursos a.btn-blog {
transition: none;
}
}
/* ============================================================
* SESSÃO 24.12 (2026-05-26) — Postagem interna do blog (single.php)
*
* 1) Hero (section-49 + div-block-242): filtro preto em vez de verde gradient
* 2) Título h1.heading-53-copy: 50px → 38px (menor)
* 3) Conteúdo .rich-text-block: line-height +2px, espaço em volta dos H2
* 4) Posts relacionados (blog-posts-max-4): grid 4 → 3 cols + hover img zoom
* 5) Botões "Voltar pro blog" / "Início do site" — padronização visual
* 6) Sidebar: tags + veja também removidos (PHP)
* ============================================================ */
/* 1) Hero com filtro preto (substitui o gradient verde) */
body.single .section-49 {
background-color: #003a40;
background-size: cover;
background-position: center;
position: relative;
}
body.single .section-49 .div-block-242 {
background-image: linear-gradient(rgba(0,0,0,0.66), rgba(0,0,0,0.66)) !important;
}
/* 2) Título menor */
body.single .heading-53-copy {
font-size: 38px !important;
line-height: 1.2;
font-weight: 600;
}
@media (max-width: 640px) {
body.single .heading-53-copy {
font-size: 28px !important;
}
}
/* 3) Conteúdo: line-height +2px + respiro nos H2 */
body.single .rich-text-block p,
body.single .rich-text-block li {
line-height: 26px;
}
body.single .rich-text-block h2 {
margin-top: 36px;
margin-bottom: 16px;
}
body.single .rich-text-block h3 {
margin-top: 28px;
margin-bottom: 12px;
}
/* 4) Posts relacionados — grid 3 cols + hover SCALE no container */
body.single .div-block-240 .collection-list,
body.single .div-block-240 .collection-list-2b2 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-column-gap: 20px !important;
grid-row-gap: 20px !important;
}
@media (max-width: 768px) {
body.single .div-block-240 .collection-list,
body.single .div-block-240 .collection-list-2b2 {
grid-template-columns: 1fr !important;
}
}
body.single .div-block-240 .w-dyn-item {
overflow: hidden;
border-radius: 10px;
}
body.single .div-block-240 .div-block-227 {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
body.single .div-block-240 .w-dyn-item:hover .div-block-227 {
transform: scale(1.06);
}
/* 5) Botões "Voltar pro blog" / "Início do site" — padronizar (force same min-height) */
body.single .div-block-236-copy .div-block-237 > a,
body.single .div-block-236-copy a.button-5,
body.single .div-block-236-copy a.btn-01 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 28px !important;
min-height: 44px !important;
font-size: 14px !important;
font-weight: 500 !important;
font-family: 'Metrisch', system-ui, sans-serif !important;
line-height: 1 !important;
letter-spacing: 0.02em !important;
border-radius: 50px !important;
background-color: #89764e !important;
color: #ffffff !important;
border: 1px solid #89764e !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
body.single .div-block-236-copy .div-block-237 > a:hover,
body.single .div-block-236-copy a.button-5:hover,
body.single .div-block-236-copy a.btn-01:hover {
background-color: #76663f !important;
border-color: #76663f !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 40, 44, 0.18);
}
body.single .div-block-237 {
margin: 0 6px !important;
padding: 0 !important;
}
body.single .div-block-236-copy {
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
align-items: center !important;
gap: 12px;
margin-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
body.single .div-block-236-copy a,
body.single .div-block-240 .div-block-227 {
transition: none;
}
}
/* ============================================================
* SESSÃO 24.13 (2026-05-26) — MDSAP embedded (header/footer do tema)
* Isolamento mínimo pra evitar conflitos do CSS do export Webflow
* com o resto do tema.
* ============================================================ */
.vesta-mdsap-content {
width: 100%;
}
.vesta-mdsap-content > .body,
body.mdsap-wrap .vesta-mdsap-content {
margin: 0;
}
/* ============================================================
* SESSÃO 24.17 (2026-05-26) — /contatos/ refino REAL
* Section-10 reescrita com cards clicáveis (WhatsApp, email, fone)
* + ícones SVG + bloco de redes sociais.
* ============================================================ */
body.page-id-25 .vesta-contatos {
padding: 80px 0 100px;
}
body.page-id-25 .vesta-contatos .container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* Sessão 24.31 (2026-05-27) — Página /contatos/ ajustes finos:
1. Fundo da página inteira verde escuro 5% opacidade
2. Container branco (.grid-6) preservado do Webflow original
3. Hover suave em cada linha de contato
4. heading-13 reduzido em 8px (40 → 32) */
body.page-id-25 {
background-color: rgba(0, 58, 64, 0.05);
}
body.page-id-25 .heading-13 {
font-size: 32px !important;
line-height: 1.18 !important;
}
/* Hover minimalista APENAS nos ícones (Insta, LinkedIn, WhatsApp, Email, Fone).
Títulos (Comercial/Suporte/SP e heading-13) NÃO recebem hover. */
body.page-id-25 .list-item-3 {
background-color: transparent;
padding: 0;
margin-left: 0;
margin-right: 0;
border-radius: 0;
transform: none;
cursor: default;
transition: none;
}
body.page-id-25 .list-item-3:hover {
background-color: transparent;
transform: none;
}
body.page-id-25 .icone-insta,
body.page-id-25 .icone--linke,
body.page-id-25 .icone-whatsapp,
body.page-id-25 .icone-email,
body.page-id-25 .icone-fone {
transition: opacity 200ms ease;
cursor: pointer;
}
body.page-id-25 .icone-insta:hover,
body.page-id-25 .icone--linke:hover,
body.page-id-25 .icone-whatsapp:hover,
body.page-id-25 .icone-email:hover,
body.page-id-25 .icone-fone:hover {
opacity: 0.7;
}
body.page-id-25 .text-block-55,
body.page-id-25 .heading-13 {
cursor: default;
}
/* Pares "casados" — grudados:
ESQ: Insta + LinkedIn (mesmo , controla margin da div .icone-insta)
DIR: WhatsApp + Email/Fone (li adjacentes na ) */
body.page-id-25 .icone-insta {
margin-bottom: 4px;
}
body.page-id-25 .list .list-item-3:nth-child(2) {
margin-bottom: 0;
}
body.page-id-25 .list .list-item-3:nth-child(2) .icone-whatsapp {
margin-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
body.page-id-25 .icone-insta,
body.page-id-25 .icone--linke,
body.page-id-25 .icone-whatsapp,
body.page-id-25 .icone-email,
body.page-id-25 .icone-fone {
transition: none;
}
}