:root {
  --red: #e92a31;
  --red-dark: #b80e18;
  --red-light: #ff5860;
  --ink: #0b0c10;
  --ink-2: #15171d;
  --text: #151821;
  --muted: #697080;
  --line: #e6e8ed;
  --soft: #f5f6f8;
  --white: #ffffff;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 18px 55px rgba(14, 18, 31, .10);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: #fff; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 104px 0; }
.section-soft { padding: 96px 0; background: var(--soft); }
.section-dark { color: var(--white); background: var(--ink); }
.skip-link { position: fixed; z-index: 9999; top: -100px; left: 20px; background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 20px; }

.site-header { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; color: #fff; background: rgba(7, 8, 11, .84); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); transition: .25s ease; }
.site-header.scrolled { box-shadow: 0 12px 36px rgba(0,0,0,.25); background: rgba(7, 8, 11, .96); }
.header-inner { height: 76px; display: flex; align-items: center; gap: 34px; }
.brand { width: 155px; flex: 0 0 auto; }
.brand img { width: 100%; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.desktop-nav a { position: relative; padding: 26px 0 23px; font-size: .93rem; color: rgba(255,255,255,.78); transition: .2s; }
.desktop-nav a:hover, .desktop-nav a.active { color: #fff; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 15px; height: 2px; background: var(--red); transition: .25s; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { right: 0; }
.header-cta { margin-left: 12px; }
.menu-toggle { display: none; margin-left: auto; border: 0; color: #fff; background: transparent; padding: 8px; font-size: 1.8rem; }
.mobile-menu { display: none; padding: 0 20px 22px; background: #08090c; }
.mobile-menu a:not(.button) { display: block; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.84); }
.mobile-menu .button { margin-top: 18px; }
.mobile-menu.open { display: block; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 1px solid var(--red); border-radius: 10px; background: linear-gradient(135deg, var(--red), #d91821); color: #fff; font-weight: 750; box-shadow: 0 10px 24px rgba(233, 42, 49, .25); transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(233, 42, 49, .34); }
.button svg { font-size: 1.2rem; }
.button-small { min-height: 42px; padding: 0 17px; font-size: .88rem; }
.button-outline { background: transparent; border-color: rgba(255,255,255,.38); box-shadow: none; }
.button-outline:hover { background: rgba(255,255,255,.07); }
.button-full { width: 100%; border: 0; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 800; }
.text-link svg { transition: .2s; }
.text-link:hover svg { transform: translateX(4px); }

.hero { position: relative; min-height: 760px; padding: 148px 0 92px; overflow: hidden; background: radial-gradient(circle at 82% 40%, rgba(233,42,49,.23), transparent 27%), linear-gradient(135deg, #090a0e 0%, #0d0f14 56%, #161016 100%); }
.hero::after { content: ""; position: absolute; inset: auto -8% -45% 45%; width: 800px; height: 800px; border: 1px solid rgba(233,42,49,.28); border-radius: 50%; box-shadow: 0 0 0 70px rgba(233,42,49,.025), 0 0 0 145px rgba(233,42,49,.018); transform: rotate(-14deg); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.hero-glow-one { width: 380px; height: 380px; right: -180px; top: 80px; background: rgba(233,42,49,.18); }
.hero-glow-two { width: 220px; height: 220px; left: -100px; bottom: 80px; background: rgba(233,42,49,.10); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 68px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.72); font-size: .83rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow span { width: 28px; height: 2px; background: var(--red); }
.hero h1 { margin: 20px 0 22px; max-width: 640px; font-size: clamp(2.75rem, 4.55vw, 4.35rem); line-height: .99; letter-spacing: -.055em; }
.hero h1 strong { display: block; color: var(--red); font-weight: 850; }
.hero-copy > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.72); font-size: 1.06rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-features { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px; color: rgba(255,255,255,.68); font-size: .84rem; }
.hero-features span { display: inline-flex; align-items: center; gap: 8px; }
.hero-features svg { color: var(--red-light); font-size: 1.2rem; }

.hero-visual { position: relative; min-height: 500px; }
.device-shell { position: absolute; width: 78%; right: 2%; top: 60px; transform: perspective(1200px) rotateY(-10deg) rotateX(3deg) rotateZ(1deg); border: 1px solid rgba(255,255,255,.26); border-radius: 18px; padding: 9px; background: linear-gradient(145deg, #33363e, #101116); box-shadow: 0 40px 80px rgba(0,0,0,.55); }
.device-shell::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: -24px; height: 22px; background: linear-gradient(#8b8d95, #30323a); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); border-radius: 0 0 15px 15px; }
.device-topbar { height: 28px; padding: 0 8px; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.55); }
.device-topbar span { width: 7px; height: 7px; border-radius: 50%; background: #454852; }
.device-topbar small { margin-left: auto; font-size: .55rem; }
.device-screen { position: relative; min-height: 330px; border-radius: 11px; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: 36px; background: radial-gradient(circle at 85% 18%, rgba(233,42,49,.40), transparent 28%), linear-gradient(130deg, #08090c, #171820); }
.screen-copy { position: relative; z-index: 2; }
.screen-copy span { color: var(--red-light); text-transform: uppercase; font-size: .62rem; letter-spacing: .12em; }
.screen-copy strong { display: block; max-width: 260px; margin: 12px 0 18px; font-size: 2rem; line-height: 1.02; }
.screen-copy button { color: #111; background: #fff; border: 0; border-radius: 6px; padding: 9px 14px; font-size: .7rem; font-weight: 800; }
.screen-art { position: relative; min-height: 230px; }
.art-ring { position: absolute; width: 175px; height: 175px; right: 3%; top: 20px; border: 28px solid rgba(233,42,49,.32); border-radius: 50%; box-shadow: 0 0 60px rgba(233,42,49,.35); }
.art-card { position: absolute; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03)); backdrop-filter: blur(8px); box-shadow: 0 18px 35px rgba(0,0,0,.34); }
.card-a { width: 118px; height: 150px; right: 35px; top: 30px; border-radius: 18px; transform: rotate(12deg); }
.card-b { width: 90px; height: 105px; right: 145px; top: 105px; border-radius: 14px; transform: rotate(-12deg); }
.card-c { width: 80px; height: 80px; right: 10px; top: 150px; border-radius: 50%; background: var(--red); }
.phone-shell { position: absolute; width: 138px; height: 276px; right: 4%; bottom: 18px; z-index: 4; padding: 11px 9px; border: 4px solid #3a3c44; border-radius: 27px; background: #0a0b0e; transform: rotate(7deg); box-shadow: 0 25px 50px rgba(0,0,0,.55); }
.phone-notch { width: 54px; height: 12px; border-radius: 0 0 9px 9px; background: #1d1f26; margin: -11px auto 10px; }
.phone-profile { display: flex; align-items: center; gap: 7px; color: #fff; font-size: .52rem; }
.phone-logo { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--red); font-weight: 900; }
.phone-stats { display: flex; justify-content: space-between; padding: 13px 2px; color: #fff; font-size: .56rem; }
.phone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.phone-grid i { aspect-ratio: 1; border-radius: 5px; background: linear-gradient(135deg, #343640, #16171c 58%, var(--red)); }
.metric { position: absolute; z-index: 5; width: 130px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.44); border-radius: 13px; color: #15171d; background: rgba(255,255,255,.95); box-shadow: 0 20px 35px rgba(0,0,0,.27); }
.metric span { display: block; color: #7a7f8d; font-size: .58rem; }
.metric strong { display: block; margin: 2px 0 8px; font-size: 1.04rem; }
.metric-one { left: 2%; top: 20px; }
.metric-two { left: 12%; bottom: 8px; }
.metric-three { right: 15%; top: 0; }
.bars { display: flex; align-items: end; gap: 4px; height: 28px; }
.bars i { flex: 1; background: var(--red); border-radius: 2px 2px 0 0; }
.bars i:nth-child(1){height:28%}.bars i:nth-child(2){height:45%}.bars i:nth-child(3){height:34%}.bars i:nth-child(4){height:72%}.bars i:nth-child(5){height:100%}
.donut { width: 35px; height: 35px; border: 8px solid #dfe2e8; border-right-color: var(--red); border-top-color: var(--red); border-radius: 50%; }
.metric-three svg { width: 100%; height: 30px; }
.metric-three polyline { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.section-heading { max-width: 840px; margin-bottom: 50px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--red); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.kicker::before, .kicker::after { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .65; }
.section-heading h2, .benefits-intro h2, .process-heading h2, .contact-copy h2 { margin: 10px 0 13px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; letter-spacing: -.04em; }
.section-heading p, .benefits-intro p, .contact-copy p { margin: 0; color: var(--muted); }

/* Serviços: cards modernos, editáveis e construídos em HTML5/CSS. */
.services { position: relative; overflow: hidden; background: linear-gradient(180deg, #f1f2f5 0%, #fafafb 48%, #ffffff 100%); }
.services::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 14% 18%, rgba(233,42,49,.10), transparent 22%), radial-gradient(circle at 88% 72%, rgba(21,23,29,.08), transparent 24%); pointer-events: none; }
.services-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.services-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.services-orb-one { width: 440px; height: 440px; left: -250px; top: 120px; border: 75px solid rgba(233,42,49,.035); box-shadow: 0 0 0 65px rgba(233,42,49,.018); }
.services-orb-two { width: 330px; height: 330px; right: -180px; bottom: -80px; background: radial-gradient(circle at 35% 35%, rgba(233,42,49,.11), rgba(233,42,49,0) 70%); }
.services-grid-pattern { position: absolute; width: 420px; height: 420px; right: 4%; top: 4%; opacity: .22; background-image: radial-gradient(rgba(24,27,35,.24) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(135deg, #000, transparent 76%); }
.services-container { position: relative; z-index: 2; }
.services-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.service-card { --service-accent: #e92a31; --service-accent-2: #ff6268; position: relative; min-height: 318px; display: flex; flex-direction: column; overflow: hidden; padding: 25px 23px 22px; border: 1px solid rgba(19,23,34,.09); border-radius: 21px; background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(249,249,251,.90)); box-shadow: 0 18px 48px rgba(16,19,29,.075), inset 0 1px 0 rgba(255,255,255,.9); isolation: isolate; transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease; }
.service-card:nth-child(2), .service-card:nth-child(7) { --service-accent: #f03b28; --service-accent-2: #ff8a46; }
.service-card:nth-child(3), .service-card:nth-child(8) { --service-accent: #bd1737; --service-accent-2: #ef3b67; }
.service-card:nth-child(4), .service-card:nth-child(9) { --service-accent: #2c303a; --service-accent-2: #6c7281; }
.service-card:nth-child(5), .service-card:nth-child(10) { --service-accent: #d71721; --service-accent-2: #ff4c56; }
.service-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--service-accent), var(--service-accent-2)); }
.service-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -105px; top: -115px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--service-accent) 18%, transparent), transparent 68%); z-index: -1; transition: transform .35s ease; }
.service-card:hover { transform: translateY(-9px); border-color: color-mix(in srgb, var(--service-accent) 38%, transparent); box-shadow: 0 28px 70px rgba(16,19,29,.14); }
.service-card:hover::after { transform: scale(1.25); }
.service-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.icon-box { position: relative; width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; border-radius: 19px; color: #fff; background: linear-gradient(145deg, var(--service-accent), var(--service-accent-2)); box-shadow: 0 14px 28px color-mix(in srgb, var(--service-accent) 27%, transparent); }
.icon-box::before { content: ""; position: absolute; width: 56px; height: 56px; left: -28px; top: -30px; border-radius: 50%; border: 12px solid rgba(255,255,255,.18); }
.icon-box svg { position: relative; z-index: 2; width: 29px; height: 29px; stroke-width: 1.7; }
.service-number { color: rgba(14,17,24,.09); font-size: 2.7rem; font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.service-card-body { margin-top: 24px; }
.service-label { display: block; margin-bottom: 7px; color: var(--service-accent); font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .105em; }
.service-card h3 { margin: 0 0 9px; color: #11141b; font-size: 1.07rem; line-height: 1.24; letter-spacing: -.02em; }
.service-card p { margin: 0; color: #687080; font-size: .85rem; line-height: 1.58; }
.service-link { margin-top: auto; padding-top: 21px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #171a22; font-size: .77rem; font-weight: 850; }
.service-link::before { content: ""; position: absolute; left: 23px; right: 23px; bottom: 61px; height: 1px; background: linear-gradient(90deg, rgba(18,22,32,.08), transparent); }
.service-arrow { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--service-accent); background: color-mix(in srgb, var(--service-accent) 10%, white); transition: transform .25s ease, color .25s ease, background .25s ease; }
.service-link:hover .service-arrow { transform: translateX(4px); color: #fff; background: var(--service-accent); }
.service-arrow svg { width: 15px; height: 15px; }

.benefits-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 64px; align-items: center; }
.benefits-intro .text-link { margin-top: 22px; }
.benefit-cards { display: grid; grid-template-columns: repeat(2, 1fr); }
.benefit-card { min-height: 190px; padding: 27px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.55); }
.benefit-card:nth-child(2n) { border-right: 1px solid var(--line); }
.benefit-card:nth-child(-n+2) { border-top: 1px solid var(--line); }
.benefit-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 1.35rem; }
.benefit-icon.red { background: var(--red); }
.benefit-icon.dark { background: var(--ink-2); }
.benefit-card h3 { margin: 17px 0 8px; font-size: 1rem; }
.benefit-card p { margin: 0; color: var(--muted); font-size: .84rem; }

/* Portfólio: mockups autorais em HTML5/CSS, sem imagens genéricas. */
.portfolio { position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #08090c 0%, #11131a 58%, #160d12 100%); }
.portfolio::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.portfolio-light { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.portfolio-light-one { width: 480px; height: 480px; left: -280px; top: 70px; background: rgba(233,42,49,.13); }
.portfolio-light-two { width: 360px; height: 360px; right: -180px; bottom: -90px; background: rgba(233,42,49,.16); }
.portfolio-container { position: relative; z-index: 2; }
.portfolio .section-heading h2 { color: #fff; }
.portfolio .section-heading p { color: rgba(255,255,255,.58); }
.portfolio .kicker { color: #ff4a52; }
.portfolio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.project-card { grid-column: span 4; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 22px; background: rgba(255,255,255,.055); box-shadow: 0 24px 70px rgba(0,0,0,.34); backdrop-filter: blur(10px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.project-card:nth-child(4), .project-card:nth-child(5) { grid-column: span 6; }
.project-card:hover { transform: translateY(-8px); border-color: rgba(255,74,82,.48); box-shadow: 0 34px 90px rgba(0,0,0,.48); }
.project-preview { position: relative; min-height: 285px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.project-card:nth-child(4) .project-preview, .project-card:nth-child(5) .project-preview { min-height: 315px; }
.project-card figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 20px 22px 22px; }
.project-card figcaption span { display: block; margin-bottom: 4px; color: #ff5c63; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.project-card figcaption h3 { margin: 0; color: #fff; font-size: 1.18rem; letter-spacing: -.02em; }
.project-card figcaption small { max-width: 145px; color: rgba(255,255,255,.48); font-size: .67rem; text-align: right; }

/* Identidade Bella Donna */
.brand-board { position: absolute; inset: 18px; padding: 24px; overflow: hidden; border-radius: 16px; color: #f3d08a; background: radial-gradient(circle at 80% 20%, rgba(212,170,84,.18), transparent 28%), linear-gradient(135deg, #090909, #221b10); box-shadow: inset 0 0 0 1px rgba(230,199,132,.14); }
.brand-board::after { content: ""; position: absolute; width: 210px; height: 210px; right: -98px; bottom: -112px; border: 28px solid rgba(222,190,118,.12); border-radius: 50%; }
.brand-board-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .17em; opacity: .62; }
.brand-signature { display: flex; align-items: center; gap: 15px; margin-top: 44px; }
.brand-signature > i { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(243,208,138,.62); border-radius: 50%; font-family: Georgia, serif; font-size: 1.8rem; font-style: italic; }
.brand-signature strong, .brand-signature span { display: block; }
.brand-signature strong { color: #fff; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 500; }
.brand-signature span { font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.brand-palette { display: flex; gap: 7px; margin-top: 35px; }
.brand-palette i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); }
.brand-palette i:nth-child(1) { background: #050505; }.brand-palette i:nth-child(2) { background: #c6a45f; }.brand-palette i:nth-child(3) { background: #f1dfba; }.brand-palette i:nth-child(4) { background: #fff; }
.brand-lines { position: absolute; right: 23px; top: 25px; width: 74px; display: grid; gap: 6px; }
.brand-lines i { height: 1px; background: rgba(243,208,138,.36); }.brand-lines i:nth-child(2){width:65%;}.brand-lines i:nth-child(3){width:42%;}

/* Campanha gastronômica */
.food-board { position: absolute; inset: 18px; overflow: hidden; border-radius: 16px; color: #fff; background: radial-gradient(circle at 78% 44%, rgba(253,212,67,.26), transparent 25%), linear-gradient(135deg, #07532b, #10a151); }
.food-board::before { content: ""; position: absolute; width: 250px; height: 250px; right: -95px; top: -110px; border: 30px solid rgba(255,255,255,.10); border-radius: 50%; }
.food-badge { position: absolute; left: 23px; top: 22px; padding: 7px 10px; border-radius: 999px; color: #0d6b3a; background: #f5d943; font-size: .56rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.food-copy { position: absolute; z-index: 3; left: 23px; bottom: 25px; max-width: 175px; }
.food-copy small, .food-copy strong, .food-copy span { display: block; }
.food-copy small { margin-bottom: 5px; font-size: .69rem; opacity: .72; }.food-copy strong { font-size: 1.45rem; line-height: 1.02; }.food-copy span { margin-top: 8px; font-size: .65rem; opacity: .75; }
.burger-art { position: absolute; right: 25px; top: 72px; width: 125px; height: 110px; filter: drop-shadow(0 18px 20px rgba(0,0,0,.26)); transform: rotate(-5deg); }
.burger-art i { position: absolute; left: 0; right: 0; margin: auto; display: block; }
.bun { width: 112px; height: 28px; background: linear-gradient(#f9b13d, #dc791c); }.bun-top { top: 2px; height: 37px; border-radius: 70px 70px 14px 14px; }.bun-top::after { content:"•• • •"; position:absolute; inset:2px 0 auto; color:#ffe4a8; font-size:15px; letter-spacing:8px; text-align:center; }.lettuce { top: 36px; width: 120px; height: 13px; border-radius: 50%; background: #7dcc3a; clip-path: polygon(0 35%, 10% 0, 20% 45%, 31% 0, 43% 46%, 55% 5%, 68% 48%, 80% 4%, 91% 44%, 100% 14%, 100% 100%, 0 100%); }.cheese { top: 47px; width: 108px; height: 15px; background:#ffd536; clip-path:polygon(0 0,100% 0,88% 100%,55% 48%,20% 100%); }.meat { top: 57px; width: 113px; height: 25px; border-radius: 45%; background:linear-gradient(#6c2613,#351008); }.bun-bottom { top: 80px; height: 25px; border-radius: 10px 10px 60px 60px; }
.food-price { position: absolute; right: 18px; bottom: 18px; z-index: 4; padding: 8px 10px; border-radius: 10px; color: #154f2f; background: #fff; transform: rotate(3deg); }.food-price small,.food-price strong{display:block;line-height:1}.food-price small{font-size:.48rem}.food-price strong{margin-top:3px;font-size:1.08rem}

/* Redes sociais */
.social-board { position: absolute; inset: 18px; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 28%), linear-gradient(135deg, #0a326b, #1378df); }
.social-board::after { content:""; position:absolute; width:200px; height:200px; right:-70px; bottom:-90px; border:28px solid rgba(255,255,255,.10); border-radius:50%; }
.social-message { position:absolute; left:22px; top:24px; width:50%; z-index:2; }.social-message span,.social-message strong,.social-message small{display:block}.social-message span{font-size:.57rem;text-transform:uppercase;letter-spacing:.13em;opacity:.7}.social-message strong{margin-top:13px;font-size:1.42rem;line-height:1.03}.social-message small{margin-top:10px;opacity:.68;font-size:.68rem}
.social-phone { position:absolute; right:22px; top:20px; width:110px; height:235px; padding:10px; border:5px solid #11141a; border-radius:22px; background:#f6f7fa; box-shadow:0 20px 35px rgba(0,0,0,.35); transform:rotate(6deg); display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.social-phone-top { grid-column:1/-1; height:24px; display:flex; align-items:center; gap:5px; color:#222; font-size:.45rem; }.social-phone-top i{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#e92a31;font-style:normal;font-weight:900}.social-post{border-radius:4px;background:linear-gradient(135deg,#171a21,#e92a31)}.post-two,.post-three{background:linear-gradient(135deg,#e92a31,#ff9f55)}.post-four{background:linear-gradient(135deg,#0b2c5e,#1b85e6)}
.social-metric { position:absolute; left:22px; bottom:22px; padding:10px 13px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(3,24,55,.35); backdrop-filter:blur(8px); }.social-metric strong,.social-metric span{display:block}.social-metric strong{font-size:1.22rem}.social-metric span{font-size:.55rem;opacity:.68;text-transform:uppercase;letter-spacing:.1em}

/* Construção */
.construction-board { position:absolute; inset:18px; overflow:hidden; border-radius:16px; background:linear-gradient(125deg,#1a1713,#c7630f); }
.construction-board::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.52),transparent 70%); }
.construction-copy { position:absolute; z-index:3; left:27px; top:48px; max-width:300px; }.construction-copy span,.construction-copy strong,.construction-copy small{display:block}.construction-copy span{color:#ffae49;font-size:.6rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900}.construction-copy strong{margin-top:11px;font-size:1.72rem;line-height:1.02;max-width:285px}.construction-copy small{margin-top:12px;opacity:.66;font-size:.72rem}
.construction-scene { position:absolute; right:26px; bottom:0; width:250px; height:265px; }.tower{position:absolute;bottom:0;width:56px;background:linear-gradient(90deg,#40210e,#f07d1e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}.tower::after{content:"";position:absolute;inset:12px 10px;background:repeating-linear-gradient(to bottom,rgba(255,222,163,.38) 0 4px,transparent 4px 15px)}.tower-one{right:0;height:165px}.tower-two{right:64px;height:118px}.tower-three{right:128px;height:78px}.crane-arm{position:absolute;right:55px;top:42px;width:180px;height:5px;background:#ffc054;transform-origin:right center;transform:rotate(-8deg)}.crane-line{position:absolute;right:214px;top:45px;width:2px;height:90px;background:#ffc054}.crane-hook{position:absolute;right:207px;top:129px;width:14px;height:14px;border:3px solid #ffc054;border-top:0;border-radius:0 0 10px 10px}
.construction-mark{position:absolute;right:20px;top:18px;color:rgba(255,255,255,.55);font-size:.58rem;font-weight:900;letter-spacing:.14em}

/* Website responsivo */
.web-board { position:absolute; inset:18px; overflow:hidden; border-radius:16px; background:radial-gradient(circle at 88% 12%,rgba(233,42,49,.22),transparent 25%),linear-gradient(135deg,#0c101a,#212b43); }
.web-browser { position:absolute; left:24px; right:105px; top:28px; bottom:24px; overflow:hidden; border:1px solid rgba(255,255,255,.20); border-radius:13px; background:#0b0d12; box-shadow:0 25px 50px rgba(0,0,0,.34); }
.web-browser-top{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#252a36}.web-browser-top i{width:6px;height:6px;border-radius:50%;background:#5a6070}.web-browser-top span{margin-left:auto;color:rgba(255,255,255,.4);font-size:.45rem}.web-layout{height:calc(100% - 28px);display:grid;grid-template-columns:62px 1fr}.web-layout aside{padding:16px 10px;background:#11151e;display:grid;align-content:start;gap:10px}.web-layout aside b{height:20px;border-radius:5px;background:#e92a31}.web-layout aside i{height:5px;border-radius:5px;background:#424959}.web-layout main{padding:25px 22px;background:radial-gradient(circle at 90% 15%,rgba(233,42,49,.18),transparent 30%),#f6f7f9;color:#131720}.web-tag{color:#e92a31;font-size:.48rem;font-weight:900;letter-spacing:.12em}.web-layout main strong{display:block;margin-top:9px;max-width:290px;font-size:1.18rem;line-height:1.04}.web-layout button{margin-top:13px;padding:7px 10px;border:0;border-radius:5px;color:#fff;background:#e92a31;font-size:.52rem}.web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.web-cards i{height:48px;border-radius:6px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.web-phone{position:absolute;right:25px;bottom:22px;width:94px;height:205px;padding:15px 10px;border:5px solid #101216;border-radius:22px;background:#f6f7f9;box-shadow:0 20px 35px rgba(0,0,0,.42);transform:rotate(5deg)}.web-phone span{display:block;width:48%;height:8px;border-radius:6px;background:#e92a31}.web-phone strong{display:block;width:82%;height:30px;margin-top:13px;border-radius:5px;background:#202735}.web-phone i{display:block;height:26px;margin-top:8px;border-radius:5px;background:#e5e7ec}

.process-layout { display: grid; grid-template-columns: .6fr 1.4fr; gap: 68px; align-items: center; }
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: steps; }
.process-steps li { position: relative; padding: 0 8px; }
.process-steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -8px; border-top: 1px dashed #c8ccd5; }
.process-steps li > span { position: relative; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-weight: 900; }
.process-steps li:nth-child(odd) > span { background: var(--red); }
.process-steps h3 { margin: 17px 0 7px; font-size: 1rem; }
.process-steps p { margin: 0; color: var(--muted); font-size: .82rem; }

.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 32px rgba(15,20,35,.06); }
.quote { position: absolute; right: 24px; top: 23px; color: rgba(233,42,49,.13); font-size: 3.4rem; }
.testimonial-card > p { position: relative; margin: 8px 0 24px; color: #373b45; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--red), #6f0b12); font-weight: 850; }
.testimonial-author strong, .testimonial-author span { display: block; }
.testimonial-author span { color: var(--muted); font-size: .76rem; }
.stars { position: absolute; right: 27px; bottom: 34px; color: #f5b30d; letter-spacing: 2px; font-size: .83rem; }

.contact { position: relative; overflow: hidden; padding: 110px 0; background: radial-gradient(circle at 0% 100%, rgba(233,42,49,.22), transparent 30%), linear-gradient(135deg, #090a0d, #14151b); }
.contact-shape { position: absolute; width: 650px; height: 650px; right: -350px; top: -250px; border-radius: 50%; border: 70px solid rgba(233,42,49,.08); box-shadow: 0 0 0 70px rgba(233,42,49,.035); }
.contact-grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 76px; align-items: center; }
.contact-copy p { color: rgba(255,255,255,.68); }
.contact-points { display: grid; gap: 11px; margin-top: 27px; }
.contact-points span { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.77); font-size: .9rem; }
.contact-points svg { color: var(--red-light); }
.contact-form { display: grid; gap: 16px; padding: 30px; border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius); background: rgba(255,255,255,.07); box-shadow: 0 30px 70px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.contact-form label { display: grid; gap: 7px; color: rgba(255,255,255,.78); font-size: .79rem; font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; outline: 0; color: #fff; background: rgba(5,6,8,.55); padding: 13px 14px; transition: .2s; }
.contact-form select option { color: #111; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(233,42,49,.15); }
.contact-form .invalid { border-color: #ff8388; }
.form-status { min-height: 22px; margin: -4px 0 0; font-size: .8rem; color: #b6f7c5; text-align: center; }

.site-footer { color: rgba(255,255,255,.69); background: #06070a; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .75fr .9fr 1fr; gap: 50px; padding: 66px 0 42px; }
.footer-brand img { width: 180px; margin-bottom: 18px; }
.footer-brand p { max-width: 310px; margin: 0 0 20px; font-size: .88rem; }
.footer-grid h3 { margin: 0 0 15px; color: #fff; font-size: .96rem; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 8px; font-size: .84rem; }
.footer-grid a:hover { color: #fff; }
.socials { display: flex; gap: 9px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 800; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.09); font-size: .74rem; }

.back-to-top { position: fixed; z-index: 900; right: 22px; bottom: 22px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--red); box-shadow: 0 12px 30px rgba(233,42,49,.35); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { transform: rotate(-90deg); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: min(100%, 760px); margin-inline: auto; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .project-card { grid-column: span 6; }
  .project-card:nth-child(5) { grid-column: 4 / span 6; }
  .benefits-grid, .process-layout, .contact-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 38px; }
  .process-steps li:nth-child(2)::after { display: none; }
  .footer-grid { grid-template-columns: 1.25fr repeat(3, 1fr); gap: 30px; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section, .section-soft { padding: 76px 0; }
  .header-inner { height: 68px; }
  .brand { width: 138px; }
  .hero { padding: 116px 0 64px; }
  .hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .hero-actions .button { width: 100%; }
  .hero-features { gap: 13px 20px; }
  .hero-visual { min-height: 440px; transform: scale(.93); transform-origin: top center; margin-bottom: -35px; }
  .device-shell { width: 91%; right: -3%; top: 78px; }
  .device-screen { min-height: 280px; padding: 24px; }
  .screen-copy strong { font-size: 1.5rem; }
  .metric { width: 112px; padding: 11px; }
  .metric-one { left: 0; }
  .metric-two { left: 2%; }
  .metric-three { right: 7%; }
  .phone-shell { right: 1%; transform: scale(.78) rotate(7deg); transform-origin: bottom right; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 305px; }
  .benefit-cards { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .project-card, .project-card:nth-child(4), .project-card:nth-child(5) { grid-column: auto; }
  .project-card:nth-child(n) { grid-column: auto; }
  .project-preview, .project-card:nth-child(4) .project-preview, .project-card:nth-child(5) .project-preview { min-height: 300px; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
  .process-steps li:not(:last-child)::after { left: 22px; top: 45px; bottom: -35px; right: auto; height: auto; border-top: 0; border-left: 1px dashed #c8ccd5; }
  .process-steps h3 { margin: 2px 0 5px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 520px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 24px 22px 21px; }
  .project-card figcaption { align-items: flex-start; flex-direction: column; }
  .project-card figcaption small { max-width: none; text-align: left; }
  .web-browser { right: 72px; }
  .web-phone { right: 15px; transform: scale(.82) rotate(5deg); transform-origin: bottom right; }
  .service-card { min-height: 285px; }
  .hero-visual { min-height: 370px; transform: scale(.83); width: 118%; margin-left: -9%; margin-bottom: -90px; }
  .device-screen { grid-template-columns: 1fr; }
  .screen-art { display: none; }
  .metric-three { right: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .stars { position: static; margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Ajustes específicos para a integração com WordPress/GeneratePress. */
body.vipcom-home {
  max-width: none;
}
body.vipcom-home #page,
body.vipcom-home .site.grid-container,
body.vipcom-home .site-content {
  max-width: none;
  margin: 0;
  padding: 0;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}


/* =========================================================
   V1.2 - Seções focadas em serviços
   ========================================================= */

.social-services { position: relative; overflow: hidden; background: linear-gradient(145deg, #f5f6f8 0%, #fff 55%, #f7ecee 100%); }
.social-services-glow { position: absolute; width: 520px; height: 520px; right: -300px; top: -260px; border-radius: 50%; background: rgba(233,42,49,.09); box-shadow: 0 0 0 80px rgba(233,42,49,.025); pointer-events: none; }
.social-services-layout { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 58px; align-items: center; }
.social-services-intro h2, .strategic-heading h2 { margin: 10px 0 18px; font-size: clamp(2.25rem, 4vw, 3.55rem); line-height: 1.03; letter-spacing: -.05em; }
.social-services-intro > p, .strategic-heading > p { margin: 0; color: var(--muted); font-size: 1rem; }
.social-channel-strip { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 23px; }
.social-channel-strip span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #e5e7ec; border-radius: 999px; background: rgba(255,255,255,.76); color: #383d48; font-size: .75rem; font-weight: 750; }
.social-channel-strip svg { color: var(--red); font-size: 1rem; }
.social-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.social-service-card { position: relative; min-height: 315px; display: flex; flex-direction: column; padding: 25px; overflow: hidden; border: 1px solid rgba(20,25,35,.09); border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 18px 50px rgba(20,25,35,.07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.social-service-card::after { content: ""; position: absolute; width: 135px; height: 135px; right: -75px; bottom: -75px; border-radius: 50%; background: rgba(233,42,49,.055); }
.social-service-card:hover { transform: translateY(-6px); border-color: rgba(233,42,49,.35); box-shadow: 0 25px 65px rgba(20,25,35,.12); }
.social-service-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 15px; color: #fff; box-shadow: 0 12px 25px rgba(0,0,0,.15); }
.social-service-icon svg { font-size: 1.45rem; }
.social-service-icon.instagram { background: linear-gradient(135deg,#8134af,#dd2a7b 55%,#feda77); }
.social-service-icon.art { background: linear-gradient(135deg,#e92a31,#ff6c73); }
.social-service-icon.whatsapp { background: linear-gradient(135deg,#19b85f,#32d978); }
.social-service-icon.facebook { background: linear-gradient(135deg,#1877f2,#0754aa); }
.social-service-card > div:nth-child(2) > span { color: var(--red); font-size: .63rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.social-service-card h3 { margin: 5px 0 8px; font-size: 1.12rem; letter-spacing: -.02em; }
.social-service-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.social-service-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; padding: 0; list-style: none; }
.social-service-card li { padding: 5px 8px; border-radius: 6px; background: #f1f2f5; color: #626978; font-size: .66rem; }
.social-service-card > a, .strategic-card > a, .content-service-card > a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--red); font-size: .78rem; font-weight: 850; }
.social-service-card > a svg, .strategic-card > a svg, .content-service-card > a svg { transition: transform .2s; }
.social-service-card > a:hover svg, .strategic-card > a:hover svg, .content-service-card > a:hover svg { transform: translateX(4px); }

.service-showcase-grid .service-project:nth-child(n) { grid-column: span 4; }
.service-showcase-grid .project-preview { min-height: 270px; }
.preview-video, .preview-logo, .preview-article, .preview-banner, .preview-layout, .preview-campaign { position: relative; padding: 18px; }
.preview-video { background: radial-gradient(circle at 80% 15%, rgba(233,42,49,.25), transparent 30%), linear-gradient(140deg,#161922,#090a0e); }
.video-editor-window { height: 100%; min-height: 232px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background:#101219; box-shadow:0 22px 45px rgba(0,0,0,.35); }
.video-editor-top { height: 29px; display:flex; align-items:center; gap:5px; padding:0 10px; background:#242731; color:#8e94a2; font-size:.5rem; }
.video-editor-top i { width:6px; height:6px; border-radius:50%; background:#5b606d; }.video-editor-top span{margin-left:auto}
.video-editor-body{display:grid;grid-template-columns:1fr 44px;gap:8px;padding:10px}.video-stage{min-height:132px;display:grid;place-content:center;text-align:center;border-radius:8px;background:radial-gradient(circle at 50% 45%,rgba(233,42,49,.5),transparent 35%),linear-gradient(135deg,#151722,#08090c);color:#fff}.video-stage strong{font-size:1.05rem;line-height:1.05}.play-symbol{width:36px;height:36px;display:grid;place-items:center;margin:0 auto 9px;border-radius:50%;background:#e92a31;font-size:.75rem}.video-tools{display:grid;gap:7px}.video-tools i{border-radius:5px;background:#292d38}.video-timeline{position:relative;height:54px;padding:9px;background:#181b23}.video-timeline span{position:absolute;left:38%;top:4px;bottom:4px;width:2px;background:#ff3f48}.video-timeline i{display:inline-block;width:22%;height:12px;margin:2px 3px;border-radius:3px;background:#e92a31}.video-timeline i:nth-child(3){width:31%;background:#4d5362}.video-timeline i:nth-child(4){width:17%;background:#8c2530}.video-timeline b{display:block;width:74%;height:9px;margin:4px 3px;border-radius:3px;background:#303542}
.preview-logo{background:linear-gradient(145deg,#f0e8da,#c9ad76)}.logo-studio-board{height:100%;min-height:232px;padding:23px;border-radius:14px;color:#201a10;background:rgba(255,255,255,.78);box-shadow:0 22px 45px rgba(60,39,8,.2)}.logo-studio-board small{font-size:.54rem;font-weight:900;letter-spacing:.18em}.logo-main-mark{display:flex;align-items:center;gap:13px;margin:35px 0 29px}.logo-main-mark i{width:62px;height:62px;display:grid;place-items:center;border:2px solid #c39339;border-radius:50%;font-family:Georgia,serif;font-size:2rem;font-weight:bold}.logo-main-mark strong{font-family:Georgia,serif;font-size:1.5rem}.logo-variations{display:flex;gap:10px}.logo-variations span{flex:1;height:34px;display:grid;place-items:center;border:1px solid rgba(32,26,16,.16);border-radius:6px;font-size:.65rem;font-weight:800}.logo-colors{display:flex;gap:8px;margin-top:18px}.logo-colors i{width:24px;height:24px;border-radius:50%;background:#17130e}.logo-colors i:nth-child(2){background:#c39339}.logo-colors i:nth-child(3){background:#efe3ca}.logo-colors i:nth-child(4){background:#fff;border:1px solid #ddd}
.preview-article{background:linear-gradient(145deg,#dfe9f8,#f7f9fd)}.article-editor{position:relative;height:100%;min-height:232px;padding:21px 24px;border-radius:14px;background:#fff;color:#202633;box-shadow:0 22px 45px rgba(20,45,90,.18)}.article-toolbar{display:flex;gap:7px;padding-bottom:13px;border-bottom:1px solid #edf0f5}.article-toolbar i{width:20px;height:8px;border-radius:3px;background:#d8dce5}.article-tag{display:inline-block;margin-top:18px;color:#e92a31;font-size:.54rem;font-weight:900;letter-spacing:.14em}.article-editor>strong{display:block;max-width:78%;margin:8px 0 16px;font-size:1.1rem;line-height:1.15}.article-editor>p{height:7px;margin:8px 0;border-radius:5px;background:#e7eaf0}.article-editor>p.short{width:62%}.seo-score{position:absolute;right:20px;bottom:18px;width:55px;height:55px;display:grid;place-content:center;text-align:center;border:7px solid #2dbf6e;border-left-color:#dceee4;border-radius:50%}.seo-score b{font-size:.78rem;line-height:1}.seo-score span{font-size:.43rem;color:#667080}
.preview-banner{background:linear-gradient(145deg,#3d0b11,#e92a31)}.banner-main{position:absolute;left:18px;top:22px;right:112px;bottom:22px;padding:24px;border-radius:13px;color:#fff;background:radial-gradient(circle at 90% 15%,rgba(255,255,255,.22),transparent 25%),linear-gradient(135deg,#11131a,#83101a);box-shadow:0 22px 40px rgba(0,0,0,.32)}.banner-main span{font-size:.54rem;font-weight:900;letter-spacing:.15em;color:#ff7278}.banner-main strong{display:block;max-width:220px;margin:24px 0 8px;font-size:1.45rem;line-height:1.03}.banner-main small{display:block;max-width:190px;color:rgba(255,255,255,.62)}.banner-main button{margin-top:20px;padding:7px 10px;border:0;border-radius:5px;color:#111;background:#fff;font-size:.5rem;font-weight:900}.banner-side{position:absolute;right:18px;width:82px;padding:12px;border-radius:10px;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.25)}.banner-side b,.banner-side span{display:block}.banner-side b{font-size:.7rem}.banner-side span{font-size:.45rem;opacity:.65}.side-one{top:22px;height:104px;background:linear-gradient(135deg,#ff5961,#6e0c14)}.side-two{bottom:22px;height:104px;background:linear-gradient(135deg,#11131a,#e92a31)}
.preview-layout{background:radial-gradient(circle at 85% 15%,rgba(233,42,49,.18),transparent 25%),linear-gradient(140deg,#1d2330,#0c0e13)}.layout-browser{position:absolute;left:18px;right:68px;top:26px;bottom:26px;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 20px 42px rgba(0,0,0,.38)}.layout-browser-top{height:26px;display:flex;align-items:center;gap:5px;padding:0 9px;background:#292d38;color:#8f95a3;font-size:.45rem}.layout-browser-top i{width:6px;height:6px;border-radius:50%;background:#59606f}.layout-browser-top span{margin-left:auto}.layout-browser-content{height:calc(100% - 26px);display:grid;grid-template-columns:38px 1fr}.layout-browser-content aside{padding:14px 8px;background:#161a23}.layout-browser-content aside b,.layout-browser-content aside i{display:block;height:6px;margin-bottom:8px;border-radius:4px;background:#3e4554}.layout-browser-content aside b{height:18px;background:#e92a31}.layout-browser-content main{padding:24px 19px;background:linear-gradient(145deg,#fff,#f5edf0)}.layout-browser-content main>span{display:block;width:42px;height:6px;border-radius:4px;background:#e92a31}.layout-browser-content main>strong{display:block;width:72%;height:22px;margin:12px 0 8px;border-radius:4px;background:#202633}.layout-browser-content main>p{width:85%;height:7px;border-radius:4px;background:#cfd4df}.layout-browser-content main>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:22px}.layout-browser-content main>div i{height:40px;border-radius:5px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08)}.layout-phone{position:absolute;right:17px;bottom:18px;width:75px;height:155px;padding:13px 8px;border:5px solid #0c0e13;border-radius:19px;background:#f7f8fa;box-shadow:0 18px 35px rgba(0,0,0,.45);transform:rotate(5deg)}.layout-phone span{display:block;width:45%;height:6px;border-radius:5px;background:#e92a31}.layout-phone b{display:block;height:24px;margin:12px 0 8px;border-radius:5px;background:#222936}.layout-phone i{display:block;height:19px;margin-top:6px;border-radius:4px;background:#e1e4ea}
.preview-campaign{background:linear-gradient(145deg,#092852,#1667bd)}.campaign-dashboard{height:100%;min-height:232px;padding:24px;border-radius:14px;color:#fff;background:radial-gradient(circle at 86% 16%,rgba(255,255,255,.16),transparent 23%),rgba(5,29,63,.62);box-shadow:0 22px 42px rgba(0,0,0,.28)}.campaign-label{font-size:.54rem;font-weight:900;letter-spacing:.15em;color:#8ac6ff}.campaign-dashboard>strong{display:block;margin:15px 0 18px;font-size:1.35rem;line-height:1.04}.campaign-chart{height:72px;display:flex;align-items:flex-end;gap:7px}.campaign-chart i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(#ff5b63,#e92a31)}.campaign-chart i:nth-child(1){height:25%}.campaign-chart i:nth-child(2){height:38%}.campaign-chart i:nth-child(3){height:31%}.campaign-chart i:nth-child(4){height:58%}.campaign-chart i:nth-child(5){height:74%}.campaign-chart i:nth-child(6){height:100%}.campaign-metrics{display:flex;gap:9px;margin-top:14px}.campaign-metrics span{flex:1;padding:8px;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:rgba(255,255,255,.07);font-size:.48rem}.campaign-metrics b{display:block;font-size:.77rem}

.strategic-services { position: relative; overflow: hidden; background: linear-gradient(180deg,#f4f5f7,#fff); }
.strategic-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 58px; align-items: center; }
.strategic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.strategic-card { position: relative; min-height: 275px; display: flex; flex-direction: column; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background:#fff; box-shadow:0 14px 38px rgba(20,25,35,.06); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.strategic-card:hover { transform:translateY(-6px);border-color:rgba(233,42,49,.35);box-shadow:0 24px 60px rgba(20,25,35,.11); }
.strategic-number { position:absolute;right:18px;top:14px;color:#eceef2;font-size:2.5rem;font-weight:900;line-height:1; }
.strategic-icon { width:46px;height:46px;display:grid;place-items:center;margin-bottom:20px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#e92a31,#b80e18);box-shadow:0 10px 22px rgba(233,42,49,.24); }
.strategic-icon svg{font-size:1.3rem}.strategic-card h3{position:relative;margin:0 0 8px;font-size:1.08rem}.strategic-card p{position:relative;margin:0;color:var(--muted);font-size:.84rem}.strategic-card>a{margin-top:auto;padding-top:18px}

.content-services { position:relative;background:#fff; }
.content-service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
.content-service-card { position:relative;min-height:410px;display:flex;flex-direction:column;padding:31px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(150deg,#fff,#f8f9fb);box-shadow:0 16px 48px rgba(20,25,35,.07);transition:transform .3s ease,box-shadow .3s ease; }
.content-service-card::before { content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,#e92a31,#ff7379); }
.content-service-card.featured { color:#fff;border-color:#171920;background:radial-gradient(circle at 90% 10%,rgba(233,42,49,.28),transparent 30%),linear-gradient(145deg,#0b0c10,#1a1d25);box-shadow:0 24px 65px rgba(10,12,18,.22); }
.content-service-card:hover{transform:translateY(-7px);box-shadow:0 27px 70px rgba(20,25,35,.13)}
.content-service-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.content-service-top>span{color:var(--red);font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.content-service-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:#fff;background:linear-gradient(135deg,#e92a31,#b80e18)}.content-service-icon svg{font-size:1.45rem}.content-service-card h3{margin:25px 0 10px;font-size:1.45rem;line-height:1.12;letter-spacing:-.03em}.content-service-card>p{margin:0;color:var(--muted);font-size:.88rem}.content-service-card ul{display:grid;gap:10px;margin:25px 0 27px;padding:0;list-style:none}.content-service-card li{position:relative;padding-left:23px;color:#4f5665;font-size:.82rem}.content-service-card li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}.content-service-card.featured>p,.content-service-card.featured li{color:rgba(255,255,255,.68)}.content-service-card.featured .content-service-top>span{color:#ff646b}.content-service-card>a{margin-top:auto}

@media (max-width:1080px){
  .social-services-layout,.strategic-layout{grid-template-columns:1fr}
  .service-showcase-grid .service-project:nth-child(n){grid-column:span 6}
  .content-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content-service-card:last-child{grid-column:1/-1;min-height:340px}
}
@media (max-width:760px){
  .social-service-grid,.strategic-grid,.content-service-grid{grid-template-columns:1fr}
  .service-showcase-grid .service-project:nth-child(n){grid-column:auto}
  .social-service-card,.strategic-card{min-height:auto}
  .content-service-card,.content-service-card:last-child{grid-column:auto;min-height:auto}
  .preview-video,.preview-logo,.preview-article,.preview-banner,.preview-layout,.preview-campaign{min-height:280px}
}
@media (max-width:520px){
  .social-services-intro h2,.strategic-heading h2{font-size:2.35rem}
  .social-service-card,.strategic-card,.content-service-card{padding:23px 21px}
  .banner-main{right:92px;padding:18px}.banner-main strong{font-size:1.12rem}.banner-side{width:65px}
}

/* Links internos das páginas individuais */
.service-card h3 a { color: inherit; }
.service-card h3 a:hover { color: var(--service-accent); }


/* =========================================================
   WhatsApp flutuante
   ========================================================= */
.vipcom-whatsapp-float {
  position: fixed;
  z-index: 1200;
  right: 22px;
  bottom: 22px;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2be477, #16b957);
  box-shadow: 0 15px 35px rgba(20, 185, 87, .42);
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vipcom-whatsapp-float::before,
.vipcom-whatsapp-float::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 2px solid rgba(37, 211, 102, .55);
  border-radius: inherit;
  animation: vipcom-whatsapp-pulse 2.1s ease-out infinite;
}
.vipcom-whatsapp-float::after { animation-delay: 1.05s; }
.vipcom-whatsapp-float:hover,
.vipcom-whatsapp-float:focus-visible {
  color: #fff;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 42px rgba(20, 185, 87, .55);
}
.vipcom-whatsapp-float:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.vipcom-whatsapp-float__icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
}
.vipcom-whatsapp-float__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: none;
}
.vipcom-whatsapp-float__label {
  position: absolute;
  right: 76px;
  top: 50%;
  min-width: max-content;
  padding: 9px 13px;
  border-radius: 9px;
  color: #fff;
  background: #11151b;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  font-size: .78rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .2s ease, transform .2s ease;
}
.vipcom-whatsapp-float__label::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  border: 6px solid transparent;
  border-left-color: #11151b;
  transform: translateY(-50%);
}
.vipcom-whatsapp-float:hover .vipcom-whatsapp-float__label,
.vipcom-whatsapp-float:focus-visible .vipcom-whatsapp-float__label {
  opacity: 1;
  transform: translate(0, -50%);
}
@keyframes vipcom-whatsapp-pulse {
  0% { opacity: .8; transform: scale(.92); }
  75%, 100% { opacity: 0; transform: scale(1.55); }
}

/* O botão de voltar ao topo fica acima do WhatsApp. */
.back-to-top { bottom: 100px; }

@media (max-width: 600px) {
  .vipcom-whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 58px;
    height: 58px;
  }
  .vipcom-whatsapp-float__icon { width: 33px; height: 33px; }
  .vipcom-whatsapp-float__label { display: none; }
  .back-to-top { right: 18px; bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .vipcom-whatsapp-float::before,
  .vipcom-whatsapp-float::after { animation: none; }
}

/* =========================================================
   v1.5 | Links dos serviços e correções mobile
   ========================================================= */
.service-content-link,
.service-content-link:link,
.service-content-link:visited,
.service-content-link:hover,
.service-content-link:focus,
.service-content-link:active {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.service-content-link h3,
.service-content-link p {
  color: inherit;
  text-decoration: none;
}
.service-content-link:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--service-accent);
  outline-offset: 5px;
}

@media (max-width: 520px) {
  html,
  body,
  body.vipcom-home,
  body.vipcom-home #page,
  body.vipcom-home .site,
  body.vipcom-home .site-content,
  body.vipcom-home .content-area,
  body.vipcom-home main {
    max-width: 100%;
    overflow-x: clip;
  }

  .container {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .hero {
    padding-bottom: 54px;
  }

  .hero-grid {
    gap: 34px;
  }

  .hero-visual {
    width: 100%;
    max-width: 100%;
    min-height: 385px;
    margin: 0;
    transform: none;
    overflow: visible;
  }

  .device-shell {
    width: 92%;
    right: 0;
    top: 68px;
  }

  .device-screen {
    min-height: 270px;
    padding: 22px 20px;
  }

  .phone-shell {
    right: 0;
    bottom: 20px;
    transform: scale(.70) rotate(7deg);
    transform-origin: bottom right;
  }

  .metric {
    width: 98px;
    padding: 9px 10px;
    border-radius: 11px;
  }

  .metric span {
    font-size: .53rem;
  }

  .metric strong {
    margin-bottom: 6px;
    font-size: .92rem;
  }

  .metric-one {
    left: 0;
    top: 8px;
  }

  .metric-two {
    left: 0;
    bottom: 4px;
  }

  .metric-three {
    right: 0;
    top: 8px;
  }

  .services {
    overflow: hidden;
  }

  .services-container {
    width: calc(100% - 32px);
  }

  .services-grid {
    width: 100%;
    gap: 18px;
  }

  .service-card {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 24px 20px 21px;
  }
}


/* =========================================================
   Planos de marketing na home - versão clean
   ========================================================= */
.home-plans {
  position: relative;
  overflow: hidden;
  padding: 106px 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(233,42,49,.09), transparent 26%),
    radial-gradient(circle at 94% 82%, rgba(233,42,49,.07), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #fff8f8 48%, #f4f6f9 100%);
}
.home-plans::after {
  position: absolute;
  right: -320px;
  bottom: -520px;
  width: 850px;
  height: 850px;
  border: 1px solid rgba(233,42,49,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(233,42,49,.018), 0 0 0 180px rgba(233,42,49,.012);
  content: "";
}
.home-plans-glow { position: absolute; border-radius: 50%; filter: blur(18px); pointer-events: none; }
.home-plans-glow-one { top: 80px; left: -190px; width: 370px; height: 370px; background: rgba(233,42,49,.08); }
.home-plans-glow-two { right: -130px; bottom: 70px; width: 300px; height: 300px; background: rgba(233,42,49,.07); }
.home-plans-container { position: relative; z-index: 2; }
.home-plans-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; margin-bottom: 48px; }
.home-plans-heading .kicker { color: var(--red); }
.home-plans-heading h2 { max-width: 690px; margin: 12px 0 0; color: #151923; font-size: clamp(2.5rem, 4.3vw, 4.1rem); line-height: 1.02; letter-spacing: -.05em; }
.home-plans-heading-copy p { margin: 0 0 18px; color: #626b7b; }
.home-plans-heading-copy .text-link { color: #171b24; }
.home-plans-heading-copy .text-link:hover { color: var(--red); }
.home-plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.home-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 22px;
  background: linear-gradient(155deg, #ffffff, #fbfbfc);
  box-shadow: 0 18px 48px rgba(24,31,45,.09);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.home-plan-card:hover { transform: translateY(-5px); border-color: rgba(233,42,49,.32); box-shadow: 0 24px 58px rgba(24,31,45,.13); }
.home-plan-card.is-featured { border-color: rgba(233,42,49,.68); box-shadow: 0 24px 62px rgba(233,42,49,.13); transform: translateY(-10px); }
.home-plan-card.is-featured:hover { transform: translateY(-14px); }
.home-plan-featured { position: absolute; top: 16px; right: -42px; width: 155px; padding: 6px 0; color: #fff; background: var(--red); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(35deg); }
.home-plan-card > header { min-height: 226px; padding: 27px 24px 21px; background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%); }
.home-plan-badge { display: inline-flex; padding: 6px 9px; border: 1px solid #e2e5ea; border-radius: 999px; color: #6e7582; background: #f7f8fa; font-size: .64rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.home-plan-card h3 { margin: 16px 0 10px; color: #171b24; font-size: 1.55rem; line-height: 1.05; letter-spacing: -.035em; }
.home-plan-card header p { margin: 0; color: #687181; font-size: .84rem; line-height: 1.55; }
.home-plan-price { padding: 20px 24px; border-top: 1px solid #eceef2; border-bottom: 1px solid #eceef2; background: #f7f8fa; }
.home-plan-price small, .home-plan-price span { display: block; color: #707987; font-size: .72rem; }
.home-plan-price strong { display: block; margin: 3px 0; color: #171b24; font-size: 2.35rem; line-height: 1; letter-spacing: -.05em; }
.home-plan-card > ul { display: grid; gap: 11px; flex: 1; margin: 0; padding: 23px 24px; list-style: none; }
.home-plan-card li { display: flex; align-items: flex-start; gap: 9px; color: #505969; font-size: .79rem; line-height: 1.45; }
.home-plan-card li svg { flex: 0 0 auto; margin-top: 2px; color: var(--red); font-size: 1rem; stroke-width: 2.4; }
.home-plan-actions { display: grid; gap: 12px; padding: 0 24px 22px; }
.home-plan-actions .button { min-height: 45px; padding-inline: 13px; font-size: .78rem; }
.home-plan-details { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #242a35; font-size: .78rem; font-weight: 800; }
.home-plan-details:hover { color: var(--red); }
.home-plan-details svg { transition: transform .2s ease; }
.home-plan-details:hover svg { transform: translateX(4px); }
.home-plan-card > footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 15px; border-top: 1px solid #eceef2; color: #737c8a; background: #fafbfc; font-size: .68rem; text-align: center; }
.home-plan-card > footer svg { color: var(--red); }

@media (max-width: 1080px) {
  .home-plans-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-plan-card.is-featured, .home-plan-card.is-featured:hover { transform: none; }
}

@media (max-width: 760px) {
  .home-plans { padding: 78px 0; }
  .home-plans-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 36px; }
  .home-plans-grid { grid-template-columns: 1fr; }
  .home-plan-card > header { min-height: auto; }
}