/* UI-kit-scoped styles, layered on top of colors_and_type.css */
* { box-sizing: border-box; }
body { margin: 0; background: var(--vws-white); color: var(--vws-ink-1); font-family: var(--vws-font-sans); }
/* -------------------------------------------------------------
Header — main site (white) uses logo-v2; ACF (dark) uses white
------------------------------------------------------------- */
.v-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--vws-line); }
.v-header .inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; }
.v-header .brand { height: 32px; flex: 0 0 auto; }
.v-header .brand img { height: 100%; display: block; }
.v-header nav { display: flex; gap: 22px; flex: 1; justify-content: center; white-space: nowrap; }
.v-header nav a { font-size: 15px; font-weight: 500; color: var(--vws-ink-1); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.v-header nav a:hover { color: var(--vws-red); }
.v-header nav a.active { border-bottom-color: var(--vws-red); color: var(--vws-red); }
.v-header .header-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.v-header .header-sub { font-size: 13px; color: var(--vws-ink-3); text-decoration: none; white-space: nowrap; }
.v-header .header-sub:hover { color: var(--vws-red); }
.v-header .header-sub.on-dark { color: #B8B8B8; }
.v-header .header-sub.on-dark:hover { color: var(--vws-white); }
.v-header .cta { background: var(--vws-red); color: var(--vws-white); font-weight: 600; padding: 10px 16px; border: 0; border-radius: 4px; font-family: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; line-height: 1; }
.v-header .cta:hover { background: var(--vws-red-hover); }
.v-header.acf { background: rgba(0,0,0,0.92); border-bottom: 1px solid #1a1a1a; }
.v-header.acf nav a { color: #E5E5E5; }
.v-header.acf nav a:hover, .v-header.acf nav a.active { color: var(--vws-red); border-bottom-color: var(--vws-red); }
/* Hero — main site */
.v-hero { background: var(--vws-white); padding: 72px 0 56px; border-bottom: 1px solid var(--vws-line); }
.v-hero .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.v-hero .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vws-red); }
.v-hero h1 { margin: 14px 0 16px; font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.v-hero h1 .accent { color: var(--vws-red); }
.v-hero .hero-lead > p { margin: 0 0 32px; font-size: 17px; line-height: 1.55; color: var(--vws-ink-2); max-width: 540px; }
.v-hero .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 32px; }
.v-hero .hero-cta-row.center { justify-content: center; }
.v-hero .hero-tick { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.v-hero .hero-tick li { font-size: 14px; color: var(--vws-ink-2); display: flex; align-items: center; gap: 10px; }
.v-hero .hero-tick li::before { content: ""; width: 14px; height: 14px; border-radius: 9999px; background: var(--vws-red); mask: url("data:image/svg+xml;utf8,") no-repeat center / 70%; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 70%; background-color: var(--vws-red); }
.v-hero .hero-tick.on-dark li { color: #E5E5E5; }
.v-hero .hero-visual { display: flex; flex-direction: column; gap: 12px; }
.photo-frame { background: #F2F2F2; border: 1px dashed #D5D5D5; border-radius: 4px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: #8A8A8A; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.photo-frame.big { aspect-ratio: 4 / 5; }
.photo-frame.dark { background: #111; border-color: #333; color: #4A4A4A; }
/* Buttons */
.btn { border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 4px; transition: all 200ms cubic-bezier(.2,.6,.2,1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; line-height: 1; }
.btn-primary { background: var(--vws-red); color: var(--vws-white); }
.btn-primary:hover { background: var(--vws-red-hover); }
.btn-ghost { background: transparent; color: var(--vws-ink-1); border: 1px solid var(--vws-ink-1); }
.btn-ghost:hover { background: #F5F5F5; }
.btn-ghost.on-dark { color: var(--vws-white); border-color: var(--vws-white); }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,0.1); }
.btn-wa { background: var(--vws-whatsapp); color: var(--vws-white); }
.btn-wa:hover { background: var(--vws-whatsapp-hover); }
.btn-wa svg { width: 18px; height: 18px; }
/* Trust strip */
.v-trust { background: var(--vws-surface-1); border-top: 1px solid var(--vws-line); border-bottom: 1px solid var(--vws-line); padding: 20px 0; }
.v-trust.acf { background: #0a0a0a; border-color: #1a1a1a; }
.v-trust.acf .item .lbl { color: #E5E5E5; }
.v-trust .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; gap: 28px; flex-wrap: wrap; justify-content: space-around; align-items: center; }
.v-trust .item { display: flex; align-items: center; gap: 10px; }
.v-trust .item .num { font-family: var(--vws-font-display); font-size: 44px; line-height: 1; color: var(--vws-red); }
.v-trust .item .lbl { font-size: 13px; font-weight: 500; color: var(--vws-ink-1); line-height: 1.3; max-width: 140px; }
/* Sections */
.v-section { padding: 80px 0; }
.v-section.alt { background: var(--vws-surface-1); }
.v-section.inverse { background: var(--vws-black); color: var(--vws-white); }
.v-section .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.v-section .head { margin-bottom: 32px; }
.v-section .head .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vws-red); display: block; margin-bottom: 6px; }
.v-section h2 { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; max-width: 640px; }
.v-section.inverse h2 { color: var(--vws-white); }
.v-section .head p { margin: 10px 0 0; color: var(--vws-ink-2); font-size: 17px; line-height: 1.55; max-width: 640px; }
.v-section.inverse .head p { color: #B8B8B8; }
/* Service grid */
.v-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-service { background: var(--vws-white); border: 1px solid var(--vws-line); border-radius: 4px; padding: 24px; transition: border 200ms, transform 200ms cubic-bezier(.2,.6,.2,1); }
.v-service:hover { border-color: var(--vws-black); transform: translateY(-1px); }
.v-service .ico { width: 36px; height: 36px; border-radius: 4px; background: var(--vws-surface-2); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--vws-red); }
.v-service .ico svg { width: 20px; height: 20px; stroke-width: 1.75; }
.v-service h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.v-service p { margin: 0; font-size: 14px; color: var(--vws-ink-2); line-height: 1.55; }
.v-service .price { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--vws-red); }
/* Steps (Como funciona / Treinamento) */
.v-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v-steps .step { background: var(--vws-white); border: 1px solid var(--vws-line); border-radius: 4px; padding: 20px; }
.v-section.alt .v-steps .step { background: var(--vws-white); }
.v-steps .step-n { font-family: var(--vws-font-display); font-size: 36px; line-height: 1; color: var(--vws-red); margin-bottom: 10px; }
.v-steps h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.v-steps p { margin: 0; font-size: 14px; color: var(--vws-ink-2); line-height: 1.55; }
/* Testimonials */
.v-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-testimonials .testimonial { background: var(--vws-white); border: 1px solid var(--vws-line); border-radius: 4px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.v-testimonials .testimonial p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--vws-ink-1); }
.v-testimonials .testimonial .author { display: flex; flex-direction: column; font-size: 13px; color: var(--vws-ink-3); }
.v-testimonials .testimonial .author b { color: var(--vws-ink-1); font-weight: 600; }
/* ACF promo strip on main site */
.v-acf-promo { background: var(--vws-black); color: var(--vws-white); padding: 80px 0; }
.v-acf-promo .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.v-acf-promo .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vws-red); display: block; margin-bottom: 10px; }
.v-acf-promo h2 { margin: 0 0 16px; font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--vws-white); }
.v-acf-promo p { margin: 0 0 28px; color: #B8B8B8; font-size: 16px; line-height: 1.55; max-width: 520px; }
.v-acf-promo .photo-frame { background: #111; border-color: #333; color: #4A4A4A; aspect-ratio: 4 / 3; }
/* ACF hero */
.acf-hero { background: var(--vws-black); color: var(--vws-white); padding: 80px 0 64px; }
.acf-hero .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.acf-hero .eyebrow { color: var(--vws-red); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 14px; }
.acf-hero h1 { margin: 0 0 18px; font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--vws-white); }
.acf-hero h1 .accent { color: var(--vws-red); }
.acf-hero > .inner > .acf-hero-lead > p { margin: 0 0 32px; font-size: 17px; line-height: 1.55; color: #B8B8B8; max-width: 540px; }
.acf-hero .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 32px; }
.acf-hero .hero-tick { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.acf-hero .hero-tick li { font-size: 14px; color: #E5E5E5; display: flex; align-items: center; gap: 10px; }
.acf-hero .hero-tick li::before { content: ""; width: 14px; height: 14px; background: var(--vws-red); mask: url("data:image/svg+xml;utf8,") no-repeat center / 70%; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 70%; }
.acf-hero .acf-hero-visual .photo-frame { background: #111; border-color: #333; color: #4A4A4A; }
/* ACF product specs */
.acf-product { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.acf-spec-title { margin: 0 0 14px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vws-ink-3); }
.acf-specs { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.acf-specs .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--vws-line); }
.acf-specs .row:last-child { border-bottom: 0; }
.acf-specs dt { margin: 0; font-size: 14px; color: var(--vws-ink-3); }
.acf-specs dd { margin: 0; font-size: 14px; color: var(--vws-ink-1); font-weight: 600; }
/* ACF compare */
.v-acf { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.v-acf .pkg { background: var(--vws-white); border: 1px solid var(--vws-line); border-top: 3px solid var(--vws-red); border-radius: 4px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.v-acf .pkg.featured { background: var(--vws-black); color: var(--vws-white); border-color: var(--vws-red); }
.v-acf .pkg.featured p, .v-acf .pkg.featured .feat li { color: #B8B8B8; }
.v-acf .pkg .tag { display: inline-flex; align-self: flex-start; padding: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--vws-red); color: var(--vws-white); border-radius: 2px; }
.v-acf .pkg h3 { margin: 0; font-size: 24px; font-weight: 700; }
.v-acf .pkg .price { font-family: var(--vws-font-display); font-size: 56px; line-height: 1; color: var(--vws-red); margin: 8px 0 0; }
.v-acf .pkg .price small { font-family: var(--vws-font-sans); font-size: 13px; color: var(--vws-ink-3); font-weight: 500; display: block; margin-top: 4px; letter-spacing: 0; }
.v-acf .pkg.featured .price small { color: #8A8A8A; }
.v-acf .pkg .feat { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.v-acf .pkg .feat li { font-size: 14px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; color: var(--vws-ink-1); }
.v-acf .pkg .feat li::before { content: ""; flex: 0 0 16px; height: 16px; margin-top: 3px; background: var(--vws-red); mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
/* FAQ — accordion animado (transições + ícone rotativo + hover) */
.v-faq { display: flex; flex-direction: column; gap: 8px; }
.v-faq .faq {
background: var(--vws-white);
border: 1px solid var(--vws-line);
border-radius: 6px;
padding: 0;
transition: border-color 240ms cubic-bezier(.2,.6,.2,1), box-shadow 240ms ease, background 240ms ease;
overflow: hidden;
}
.v-faq .faq:hover {
border-color: rgba(242,0,52,0.4);
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.v-faq .faq[open] {
border-color: rgba(242,0,52,0.55);
box-shadow: 0 6px 22px rgba(242,0,52,0.07);
}
.v-faq .faq summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: color 200ms ease, background 200ms ease;
user-select: none;
}
.v-faq .faq summary:hover { color: var(--vws-red); background: rgba(242,0,52,0.03); }
.v-faq .faq summary::-webkit-details-marker { display: none; }
.v-faq .faq summary::after {
content: "+";
font-size: 26px;
font-weight: 300;
color: var(--vws-red);
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
line-height: 1;
flex: 0 0 auto;
transition: transform 320ms cubic-bezier(.2,.6,.2,1);
}
.v-faq .faq[open] summary::after { transform: rotate(45deg); }
.v-faq .faq p,
.v-faq .faq .fx-details-content > p {
margin: 0;
padding: 0 24px 20px;
font-size: 15px;
color: var(--vws-ink-2);
line-height: 1.65;
}
/* ACF closing */
.acf-closing { background: var(--vws-red); color: var(--vws-white); padding: 72px 0; text-align: center; }
.acf-closing .inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.acf-closing h2 { margin: 0 0 10px; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--vws-white); }
.acf-closing p { margin: 0 0 28px; color: rgba(255,255,255,0.9); font-size: 17px; }
.acf-closing .hero-cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Client logos */
.v-clients { display: flex; gap: 40px; justify-content: space-around; align-items: center; padding: 28px 0; flex-wrap: wrap; }
.v-clients .logo { font-weight: 700; color: #8A8A8A; opacity: 0.7; letter-spacing: -0.02em; font-size: 22px; }
.v-clients .logo.italic { font-style: italic; }
/* OS lookup */
/* ============================================================
CONSULTA O.S. PAGE
============================================================ */
.v-consulta {
background: var(--vws-black);
color: var(--vws-white);
padding: 96px 0 120px;
position: relative;
overflow: hidden;
}
.v-consulta::before {
content: "";
position: absolute;
top: -200px; right: -200px;
width: 560px; height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(37,211,102,0.10) 0%, transparent 70%);
pointer-events: none;
}
.v-consulta::after {
content: "";
position: absolute;
bottom: -240px; left: -180px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(242,0,52,0.08) 0%, transparent 70%);
pointer-events: none;
}
.v-consulta .inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.v-consulta__head { max-width: 720px; margin-bottom: 56px; }
.v-consulta__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--vws-red);
margin-bottom: 14px;
}
.v-consulta__title {
font-size: clamp(34px, 5vw, 52px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 18px;
color: var(--vws-white);
}
.v-consulta__title .wa { color: #25D366; }
.v-consulta__lede {
font-size: 18px;
line-height: 1.55;
color: #C5C5C5;
margin: 0;
}
.v-consulta__grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 32px;
align-items: stretch;
}
.v-consulta__form {
background: #0F0F0F;
border: 1px solid #2A2A2A;
border-radius: 8px;
padding: 36px 32px;
display: flex;
flex-direction: column;
}
.v-consulta__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A8A8A;
margin-bottom: 12px;
}
.v-consulta__input-row {
display: flex;
gap: 10px;
margin-bottom: 14px;
}
.v-consulta__input-row input {
flex: 1;
min-width: 0;
font-family: inherit;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.005em;
padding: 18px 20px;
border: 1px solid #333;
background: #050505;
color: var(--vws-white);
border-radius: 6px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.v-consulta__input-row input::placeholder { color: #5A5A5A; font-weight: 500; }
.v-consulta__input-row input:focus { outline: none; border-color: #25D366; background: #0A0A0A; }
.v-consulta__input-row .btn {
padding: 0 24px;
font-size: 15px;
white-space: nowrap;
}
.v-consulta__hint {
font-size: 13px;
line-height: 1.5;
color: #7A7A7A;
margin: 0 0 24px;
}
.v-consulta__alt {
margin-top: auto;
padding-top: 22px;
border-top: 1px solid #232323;
display: flex;
flex-direction: column;
gap: 4px;
}
.v-consulta__alt span {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A8A8A;
}
.v-consulta__alt a {
font-size: 15px;
font-weight: 600;
color: #25D366;
text-decoration: none;
transition: color 0.2s ease;
}
.v-consulta__alt a:hover { color: #2EE874; }
.v-consulta__how {
background: #0F0F0F;
border: 1px solid #2A2A2A;
border-radius: 8px;
padding: 36px 32px;
display: flex;
flex-direction: column;
}
.v-consulta__how-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--vws-red);
margin-bottom: 22px;
}
.v-consulta__steps {
list-style: none;
margin: 0 0 26px;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.v-consulta__steps li {
display: flex;
gap: 16px;
align-items: flex-start;
}
.v-consulta__steps .step-num {
flex: 0 0 32px;
height: 32px;
border-radius: 50%;
background: rgba(242,0,52,0.12);
color: var(--vws-red);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
}
.v-consulta__steps .step-body { flex: 1; }
.v-consulta__steps .step-body b {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--vws-white);
margin-bottom: 2px;
letter-spacing: -0.005em;
}
.v-consulta__steps .step-body p {
font-size: 14px;
line-height: 1.5;
color: #9A9A9A;
margin: 0;
}
.v-consulta__hours {
margin-top: auto;
padding: 16px 18px;
background: #050505;
border: 1px solid #232323;
border-radius: 6px;
display: flex;
align-items: center;
gap: 14px;
}
.v-consulta__hours svg {
flex: 0 0 22px;
width: 22px;
height: 22px;
color: var(--vws-red);
}
.v-consulta__hours div { display: flex; flex-direction: column; gap: 2px; }
.v-consulta__hours b {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A8A8A;
}
.v-consulta__hours span {
font-size: 14px;
color: var(--vws-white);
font-weight: 500;
}
@media (max-width: 860px) {
.v-consulta { padding: 64px 0 80px; }
.v-consulta__head { margin-bottom: 36px; }
.v-consulta__grid { grid-template-columns: 1fr; gap: 18px; }
.v-consulta__form, .v-consulta__how { padding: 28px 24px; }
.v-consulta__input-row { flex-direction: column; }
.v-consulta__input-row .btn { width: 100%; padding: 14px 20px; justify-content: center; }
}
/* ============================================================
BREADCRUMBS — barra fina sob o header em páginas internas
============================================================ */
.v-breadcrumb {
background: var(--vws-surface-1);
border-bottom: 1px solid var(--vws-line);
padding: 14px 0;
}
.v-breadcrumb .inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
flex-wrap: wrap;
}
.v-breadcrumb a {
color: var(--vws-ink-3);
text-decoration: none;
transition: color 200ms ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.v-breadcrumb a:hover { color: var(--vws-red); }
.v-breadcrumb .sep {
color: var(--vws-ink-4);
font-size: 11px;
user-select: none;
}
.v-breadcrumb .current {
color: var(--vws-ink-1);
font-weight: 600;
}
.v-breadcrumb svg { width: 14px; height: 14px; }
/* ============================================================
CTA BANNER — bloco escuro com glow vermelho antes do footer
============================================================ */
.v-cta-banner {
background: linear-gradient(135deg, #0A0A0A 0%, #1a0008 100%);
color: var(--vws-white);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.v-cta-banner::before {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(242,0,52,0.18) 0%, transparent 70%);
pointer-events: none;
}
.v-cta-banner .inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
position: relative;
z-index: 1;
}
.v-cta-banner .copy { display: flex; flex-direction: column; gap: 16px; }
.v-cta-banner .eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--vws-red);
}
.v-cta-banner h2 {
font-size: 38px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
color: var(--vws-white);
max-width: 18ch;
}
.v-cta-banner h2 em { font-style: normal; color: var(--vws-red); }
.v-cta-banner p {
font-size: 16px;
color: #C8C8C8;
line-height: 1.6;
margin: 0;
max-width: 520px;
}
.v-cta-banner .actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
}
@media (max-width: 860px) {
.v-cta-banner { padding: 56px 0; }
.v-cta-banner .inner { grid-template-columns: 1fr; gap: 32px; }
.v-cta-banner h2 { font-size: 28px; }
}
/* ============================================================
FORMULÁRIO de orçamento → WhatsApp
============================================================ */
.v-form-orcamento {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.v-form-orcamento .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.v-form-orcamento input,
.v-form-orcamento textarea {
font-family: inherit;
font-size: 15px;
padding: 14px 16px;
border: 1px solid var(--vws-line);
background: var(--vws-white);
border-radius: 4px;
color: var(--vws-ink-1);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.v-form-orcamento input::placeholder,
.v-form-orcamento textarea::placeholder { color: var(--vws-ink-4); }
.v-form-orcamento input:focus,
.v-form-orcamento textarea:focus {
outline: none;
border-color: var(--vws-red);
box-shadow: 0 0 0 4px rgba(242,0,52,0.1);
}
.v-form-orcamento textarea { resize: vertical; min-height: 100px; font-family: inherit; }
.v-form-orcamento button {
margin-top: 8px;
align-self: flex-start;
padding: 14px 28px;
font-size: 16px;
}
@media (max-width: 540px) {
.v-form-orcamento .row { grid-template-columns: 1fr; }
.v-form-orcamento button { align-self: stretch; }
}
/* ============================================================
MAPA EMBED
============================================================ */
.v-map {
width: 100%;
height: 440px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--vws-line);
background: var(--vws-surface-1);
margin-top: 24px;
}
.v-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
filter: grayscale(0.3) contrast(1.05);
transition: filter 500ms ease;
}
.v-map:hover iframe { filter: none; }
/* ============================================================
FOOTER — versão rica com cards de contato, status, social grid
============================================================ */
.v-footer {
background: #0A0A0A;
color: var(--vws-white);
padding: 80px 0 32px;
position: relative;
overflow: hidden;
}
.v-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(242,0,52,0.45) 50%, transparent 100%);
}
.v-footer .inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
gap: 56px;
}
.v-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px;
align-items: start;
}
.v-footer-col { display: flex; flex-direction: column; gap: 16px; }
.v-footer-col--brand { gap: 22px; }
.v-footer-brand { display: inline-block; transition: transform 250ms cubic-bezier(.2,.6,.2,1); }
.v-footer-brand img { height: 28px; display: block; }
.v-footer-brand:hover { transform: scale(1.04); }
.v-footer-tagline {
font-size: 14px;
line-height: 1.7;
color: #B8B8B8;
margin: 0;
max-width: 420px;
}
.v-footer-status {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(80, 200, 120, 0.1);
border: 1px solid rgba(80, 200, 120, 0.3);
border-radius: 100px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #50C878;
width: fit-content;
}
.v-footer-status .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #50C878;
box-shadow: 0 0 0 4px rgba(80, 200, 120, 0.18);
animation: vws-pulse-green 1.6s ease-in-out infinite;
}
@keyframes vws-pulse-green {
50% { box-shadow: 0 0 0 9px rgba(80, 200, 120, 0); }
}
.v-footer-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}
.v-footer-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
text-decoration: none;
transition: border-color 220ms ease, transform 240ms cubic-bezier(.2,.6,.2,1), background 220ms ease;
min-width: 0;
}
.v-footer-card:hover {
border-color: rgba(242, 0, 52, 0.45);
background: rgba(242, 0, 52, 0.06);
transform: translateY(-2px);
}
.v-footer-card .ico {
width: 38px;
height: 38px;
border-radius: 8px;
background: rgba(242, 0, 52, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--vws-red);
flex: 0 0 auto;
transition: background 220ms ease, color 220ms ease, transform 280ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-card:hover .ico {
background: var(--vws-red);
color: #fff;
transform: rotate(-6deg) scale(1.05);
}
.v-footer-card .ico svg { width: 16px; height: 16px; }
.v-footer-card .meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.v-footer-card .lbl {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8A8A8A;
}
.v-footer-card .val {
font-size: 13px;
color: #E5E5E5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v-footer-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8A8A8A;
margin: 0 0 6px;
}
.v-footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.v-footer-links li { padding: 0; }
.v-footer-links a {
position: relative;
display: inline-block;
font-size: 14px;
color: #C8C8C8;
padding: 6px 0;
text-decoration: none;
transition: color 220ms ease, padding-left 320ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-links a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 2px;
background: var(--vws-red);
transform: translateY(-50%);
transition: width 320ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-links a:hover {
color: var(--vws-red);
padding-left: 18px;
}
.v-footer-links a:hover::before { width: 12px; }
.v-footer-social {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.v-footer-social a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #C8C8C8;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 240ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-social a:hover {
background: var(--vws-red);
border-color: var(--vws-red);
color: #fff;
transform: translateY(-3px);
}
.v-footer-social svg {
width: 22px;
height: 22px;
color: var(--vws-red);
transition: color 220ms ease, transform 280ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-social a:hover svg {
color: #fff;
transform: scale(1.08);
}
.v-footer-legal {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 12px;
color: #8A8A8A;
}
.v-footer-legal .copy { line-height: 1.6; }
.v-footer-top {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 100px;
color: #C8C8C8;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 240ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-top:hover {
background: var(--vws-red);
border-color: var(--vws-red);
color: #fff;
transform: translateY(-2px);
}
.v-footer-top svg {
width: 14px;
height: 14px;
transition: transform 320ms cubic-bezier(.2,.6,.2,1);
}
.v-footer-top:hover svg { transform: translateY(-3px); }
@media (max-width: 980px) {
.v-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.v-footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
.v-footer { padding: 64px 0 32px; }
.v-footer .inner { padding: 0 24px; gap: 40px; }
.v-footer-grid { grid-template-columns: 1fr; gap: 32px; }
.v-footer-cards { grid-template-columns: 1fr; }
.v-footer-legal { flex-direction: column; align-items: flex-start; }
}
/* WhatsApp FAB */
.v-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 9999px; background: var(--vws-whatsapp); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0,0,0,0.18); cursor: pointer; z-index: 30; transition: transform 200ms cubic-bezier(.2,.6,.2,1), background 200ms; }
.v-fab:hover { background: var(--vws-whatsapp-hover); transform: scale(1.05); }
.v-fab svg { width: 28px; height: 28px; }
@media (max-width: 860px) {
.v-hero .inner, .acf-hero .inner, .v-services, .v-acf, .v-footer .inner, .v-acf-promo .inner, .acf-product, .v-steps, .v-testimonials, .v-contact-grid { grid-template-columns: 1fr !important; }
.v-header nav, .v-header .header-sub { display: none; }
.v-hero h1, .acf-hero h1 { font-size: 34px; }
.v-section h2, .acf-closing h2 { font-size: 28px; }
}
/* ============================================================
POLISH — button hover, icon hover, brand, FAB, nav underline
============================================================ */
/* Button hover (substitui o "magnetic" anterior) */
.btn { position: relative; }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(1); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(242, 0, 52, 0.32); }
.btn-wa:hover { box-shadow: 0 12px 26px rgba(53, 172, 29, 0.32); }
.btn-ghost:hover { background: rgba(0,0,0,0.04); border-color: var(--vws-black); }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,0.08); border-color: var(--vws-white); }
/* Arrow span shifts right on hover */
.btn span[aria-hidden] { display: inline-block; transition: transform 200ms cubic-bezier(.2,.6,.2,1); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
/* SVG icon micro-motion in WA button */
.btn svg { transition: transform 250ms cubic-bezier(.2,.6,.2,1); }
.btn-wa:hover svg { transform: scale(1.12) rotate(-8deg); }
/* Header CTA (red pill) */
.v-header .cta { transition: transform 200ms cubic-bezier(.2,.6,.2,1), background 200ms ease, box-shadow 200ms ease; }
.v-header .cta:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 18px rgba(242, 0, 52, 0.3); }
/* Service card icon hover — rotate, scale, fill */
.v-service .ico,
.v-service .ico svg {
transition: transform 350ms cubic-bezier(.2,.6,.2,1), background 220ms ease, color 220ms ease;
}
.v-service:hover .ico {
background: var(--vws-red);
color: var(--vws-white);
transform: rotate(-6deg) scale(1.08);
}
/* Steps (Como funciona) — number translates */
.v-steps .step-n { transition: transform 300ms cubic-bezier(.2,.6,.2,1); display: inline-block; }
.v-steps .step:hover .step-n { transform: translateX(-4px) scale(1.06); }
/* Testimonial subtle border tint on hover */
.v-testimonials .testimonial { transition: border-color 200ms ease, transform 200ms cubic-bezier(.2,.6,.2,1); }
.v-testimonials .testimonial:hover { border-color: var(--vws-red); transform: translateY(-2px); }
/* Brand logo subtle scale */
.v-header .brand,
.v-footer .brand,
.v-acf-promo .brand,
header.db-header .brand {
transition: transform 250ms cubic-bezier(.2,.6,.2,1);
}
.v-header .brand:hover,
.v-footer .brand:hover,
header.db-header .brand:hover {
transform: scale(1.04);
}
/* FAB svg rotates on hover */
.v-fab svg { transition: transform 400ms cubic-bezier(.2,.6,.2,1); }
.v-fab:hover svg { transform: scale(1.15) rotate(-12deg); }
/* Nav link underline draw (substitui border-bottom estático) */
.v-header nav a {
position: relative;
border-bottom: 0 !important;
padding-bottom: 4px;
}
.v-header nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: var(--vws-red);
transition: width 280ms cubic-bezier(.2,.6,.2,1);
}
.v-header nav a:hover::after,
.v-header nav a.active::after {
width: 100%;
}
/* ============================================================
MOBILE MENU — hamburger + drawer fullscreen
============================================================ */
.menu-toggle {
display: none;
height: 40px;
padding: 0 14px;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
align-items: center;
gap: 10px;
z-index: 60;
flex-shrink: 0;
border-radius: 6px;
font-family: inherit;
color: var(--vws-ink-1);
transition: background 200ms ease, color 200ms ease;
}
.v-header.acf .menu-toggle { color: var(--vws-white); }
.menu-toggle:hover { background: rgba(0,0,0,0.04); }
.v-header.acf .menu-toggle:hover { background: rgba(255,255,255,0.06); }
.menu-toggle-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
}
.menu-toggle-lines {
display: inline-block;
position: relative;
width: 22px;
height: 16px;
flex-shrink: 0;
}
.menu-toggle-lines i {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 2px;
position: absolute;
left: 0;
transition: transform 320ms cubic-bezier(.2,.6,.2,1), top 320ms cubic-bezier(.2,.6,.2,1), opacity 200ms ease;
}
.menu-toggle-lines i:nth-child(1) { top: 0; }
.menu-toggle-lines i:nth-child(2) { top: 7px; }
.menu-toggle-lines i:nth-child(3) { top: 14px; }
/* Hamburger → X */
.menu-toggle.is-open .menu-toggle-lines i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-toggle.is-open .menu-toggle-lines i:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle-lines i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
@media (max-width: 860px) {
.menu-toggle { display: inline-flex; margin-left: auto; }
/* Lock body scroll when menu open */
body.menu-open { overflow: hidden; }
/* Show nav as fullscreen drawer */
body.menu-open .v-header nav {
display: flex;
position: fixed;
inset: 64px 0 0 0;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: 32px 24px 24px;
z-index: 50;
overflow-y: auto;
animation: vws-drawer-fade-in 280ms cubic-bezier(.2,.6,.2,1);
}
body.menu-open .v-header.acf nav { background: rgba(0,0,0,0.97); }
body.menu-open .v-header nav a {
font-size: 22px;
font-weight: 600;
padding: 18px 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
color: var(--vws-ink-1);
opacity: 0;
transform: translateY(12px);
animation: vws-drawer-link 380ms cubic-bezier(.2,.6,.2,1) forwards;
}
body.menu-open .v-header.acf nav a {
color: var(--vws-white);
border-bottom-color: rgba(255,255,255,0.08);
}
body.menu-open .v-header nav a:nth-child(1) { animation-delay: 60ms; }
body.menu-open .v-header nav a:nth-child(2) { animation-delay: 120ms; }
body.menu-open .v-header nav a:nth-child(3) { animation-delay: 180ms; }
body.menu-open .v-header nav a:nth-child(4) { animation-delay: 240ms; }
body.menu-open .v-header nav a:nth-child(5) { animation-delay: 300ms; }
body.menu-open .v-header nav a:nth-child(6) { animation-delay: 360ms; }
/* Drawer disables underline draw effect */
body.menu-open .v-header nav a::after { display: none; }
body.menu-open .v-header nav a.active { color: var(--vws-red); }
body.menu-open .v-header.acf nav a.active { color: var(--vws-red); }
/* Hide secondary header items inside drawer */
body.menu-open .v-header .header-actions,
body.menu-open .v-header .header-sub { display: none; }
}
@keyframes vws-drawer-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes vws-drawer-link {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
MEGA MENU — header rico das páginas do site principal
Aplicado em