/* Rio Front · light mode
   Paleta: laranja #FF4E00 · preto #000 · creme #F5EEE8
   Fontes: Satoshi (texto e títulos) + Instrument Serif itálica (destaques em <em>) */

:root {
  --bg: #F5EEE8;
  --bg-2: #EFE6DE;
  --card: #FFFFFF;
  --ink: #0B0B0B;
  --ink-2: #2A2725;
  --muted: #6E6762;
  --line: rgba(11, 11, 11, .09);
  --orange: #FF4E00;
  --orange-2: #FF6A26;
  --orange-soft: #FFE6D9;
  --black: #000;

  --sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(40, 20, 0, .06);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.04), 0 24px 64px rgba(40, 20, 0, .10);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(88px, 11vw, 152px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--orange); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--sec) 0; position: relative; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
/* Sem viúvas: títulos com linhas equilibradas, textos sem palavra sozinha na última linha */
p, li, blockquote { text-wrap: pretty; }
.nw { white-space: nowrap; }
em, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.display { font-size: clamp(44px, 7.4vw, 104px); }
.h2 { font-size: clamp(36px, 5vw, 68px); }
.h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; line-height: 1.15; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 560px; }
.muted { color: var(--muted); }
.sec-head { text-align: center; max-width: 820px; margin: 0 auto clamp(48px, 6vw, 80px); }
.sec-head .lead { margin: 20px auto 0; }
.sec-head--left { text-align: left; margin-left: 0; }
.sec-head--left .lead { margin-left: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 99px;
  background: var(--card); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 24px;
}
/* Símbolo da Rio Front no lugar da bolinha */
.eyebrow i { width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 848 848'%3E%3Cpath fill='%23FF4E00' fill-rule='evenodd' d='M848 424C848 477.313 838.16 528.328 820.198 575.328C765.989 536.879 707.093 518.805 646.154 517.956C623.127 517.635 600.193 519.774 577.486 523.979C563.349 432.459 542.033 364.071 515.066 314.156C483.742 256.178 442.79 219.476 393.836 204.052C345.981 188.975 298.439 196.781 258.165 211.361C212.655 227.836 170.157 259.193 132.395 295.284C94.2359 331.756 58.4527 375.447 26.6555 419.919C17.9305 432.121 9.45093 444.46 1.25092 456.818C0.421924 445.988 0 435.043 0 424C0 189.831 189.831 0 424 0C658.169 0 848 189.831 848 424ZM185.65 774.714C119.203 729.468 66.2823 665.833 34.2099 591.128C54.8895 554.667 79.4878 515.203 106.697 477.148C136.184 435.908 168.003 397.363 200.382 366.416C233.159 335.088 264.138 313.845 291.659 303.882C320.271 293.524 344.329 291.62 364.268 297.901C383.111 303.838 406.151 319.567 428.497 360.928C450.487 401.63 469.65 463.202 482.371 553.324C455.553 564.751 429.37 578.456 404.076 593.704C324.9 641.434 250.096 706.91 185.65 774.714ZM644.783 616.343C688.396 616.951 731.867 630.269 773.902 663.539C729.913 727.672 668.748 779.102 597.041 811.197C596.626 740.933 593.891 678.086 589.054 621.987C608.081 618.027 626.694 616.091 644.783 616.343ZM493.068 656.814C480.423 663.186 467.684 670.252 454.876 677.972C392.26 715.72 331.511 766.987 277.04 821.84C322.826 838.759 372.334 848 424 848C449.476 848 474.427 845.753 498.666 841.447C498.897 771.925 496.893 710.676 493.068 656.814Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Botões ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: 99px; border: 0;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s, color .3s;
}
.btn svg { width: 18px; height: 18px; transition: transform .3s; }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(255, 78, 0, .28), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary:hover { background: var(--orange-2); transform: translateY(-2px); }
.btn--ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #222; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-2px); }
.btn--sm { --h: 44px; padding: 0 20px; font-size: 15px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 16px 0 auto; z-index: 50;
  pointer-events: none;
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header > .wrap > * { pointer-events: auto; }
.header::before {
  content: ''; position: absolute; inset: -16px 0 -12px; z-index: -1;
  background: rgba(245, 238, 232, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .35s;
}
.is-scrolled .header::before { opacity: 1; }
.is-scrolled .nav { box-shadow: none; background: rgba(255,255,255,.6); }
.logo { display: block; width: 128px; position: relative; }
.logo img { width: 100%; height: auto; transition: opacity .3s; }
.logo .logo--light { position: absolute; inset: 0; opacity: 0; }
.nav {
  display: flex; gap: 2px; padding: 4px; border-radius: 99px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow); transition: background .3s;
}
.nav a { padding: 7px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background .25s, color .25s; }
.header .btn--sm { --h: 40px; padding: 0 18px; font-size: 14px; }
.header .burger { width: 42px; height: 42px; }
/* Header sobre o hero escuro (antes de rolar) */
.hero-dark:not(.is-scrolled) .logo .logo--light { opacity: 1; }
.hero-dark:not(.is-scrolled) .logo .logo--dark { opacity: 0; }
.hero-dark:not(.is-scrolled) .nav { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hero-dark:not(.is-scrolled) .nav a { color: rgba(255,255,255,.8); }
.hero-dark:not(.is-scrolled) .nav a:hover { background: rgba(255,255,255,.1); }
.hero-dark:not(.is-scrolled) .nav a.is-active { background: #fff; color: var(--ink); }
.nav a:hover { background: rgba(0,0,0,.05); }
.nav a.is-active { background: var(--ink); color: #fff; }
.header__cta { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--shadow); place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s, background .3s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 45; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 96px var(--gutter) 40px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.mobile-menu a { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; }
.mobile-menu .btn { margin-top: 24px; align-self: flex-start; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 112px 0 0; text-align: center; overflow: hidden; isolation: isolate; background: #000; color: #fff; }
.hero__shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hero .lead { color: rgba(255,255,255,.72); max-width: 480px; }
.hero h1 em { color: #FF7A3A; }
.hero .proof { background: none; box-shadow: none; padding: 0; margin: 0 auto 24px; display: flex; width: max-content; }
.hero .proof strong { color: rgba(255,255,255,.85); font-weight: 500; font-size: 14px; }
.hero .avatars img { border-color: #000; width: 34px; height: 34px; }
.hero .btn--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.14); }
.hero .reel__item { box-shadow: none; }
.hero::after, .page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.22); pointer-events: none; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 78, 0, .10), transparent 70%),
    radial-gradient(1px 1px at 1px 1px, rgba(0,0,0,.10) 1px, transparent 0) 0 0 / 22px 22px;
  mask-image: linear-gradient(#000 40%, transparent 92%);
  -webkit-mask-image: linear-gradient(#000 40%, transparent 92%);
}
.hero .hero__bg { background: radial-gradient(1px 1px at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0 / 22px 22px; }
.hero h1 { max-width: 860px; margin: 0 auto; font-size: clamp(40px, 5.4vw, 76px); }
.hero .lead { margin: 18px auto 0; }
.hero .btn-row { margin-top: 28px; }
.proof {
  display: inline-flex; align-items: center; gap: 14px; margin: 40px auto 0;
  padding: 10px 20px 10px 10px; border-radius: 99px; background: var(--card); box-shadow: var(--shadow);
  text-align: left;
}
.avatars { display: flex; }
.avatars img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; margin-left: -12px; }
.avatars img:first-child { margin-left: 0; }
.stars { display: flex; gap: 2px; color: var(--orange); }
.stars svg { width: 15px; height: 15px; }
.proof strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.hero .btn-row { margin-top: 32px; }

/* Faixa de trabalhos no hero */
/* Notebooks e telas grandes: o texto do hero se centraliza no espaço da primeira dobra e a faixa de trabalhos
   aparece cortada na metade da altura dos cards, na base da tela */
@media (min-width: 1024px) and (min-height: 620px) {
  .hero { --reel-h: calc(clamp(280px, 28vw, 420px) * .75); --reel-gap: clamp(40px, 5vw, 56px); }
  .hero > .wrap { min-height: calc(100svh - 112px - var(--reel-gap) - var(--reel-h) / 2); display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
}
.reel { margin-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(48px, 6vw, 72px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reel.is-dragging { cursor: grabbing; }
.reel__row { display: flex; gap: 16px; width: max-content; will-change: transform; }
.reel img { -webkit-user-drag: none; pointer-events: none; }
.reel__item { display: block; width: clamp(280px, 28vw, 420px); aspect-ratio: 4/3; border: 0; padding: 0; margin: 0; border-radius: var(--r); overflow: hidden; flex: none; background: var(--bg-2); box-shadow: var(--shadow); position: relative; }
.reel__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.reel__item:hover img { transform: scale(1.06); }
.reel__item span { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: .35s; }
.reel__item:hover span { opacity: 1; transform: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Logos de clientes ---------- */
.clients { padding: clamp(56px, 7vw, 88px) 0; text-align: center; }
.clients p { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: clamp(40px, 5vw, 72px); width: max-content; animation: marquee 40s linear infinite; align-items: center; }
/* Logos: espaço em padding (não gap) para as duas cópias medirem exatamente 50% e o loop não pular; duração definida no main.js pela largura */
.clients .marquee__track { gap: 0; animation-duration: 240s; animation-direction: reverse; will-change: transform; backface-visibility: hidden; }
.client-logo { display: flex; align-items: center; height: 64px; flex: none; padding-right: clamp(40px, 5vw, 72px); }
.client-logo img { display: block; height: 40px; width: auto; opacity: .85; transition: filter .3s, opacity .3s; }
.client-logo:hover img { filter: brightness(.45); opacity: 1; }

/* ---------- Sobre (home) ---------- */
.about { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.about__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.about__photo img { width: 100%; height: 110%; object-fit: cover; object-position: 30% 50%; }
.about__tag { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 99px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; }
.about__tag img { width: 28px; height: 28px; }
.about h2 { margin-bottom: 24px; }
.about p { color: var(--muted); margin: 0 0 16px; max-width: 520px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.stat { padding: 22px 20px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.stat b { display: block; font-size: clamp(36px, 4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.stat b sup { font-size: .5em; color: var(--orange); vertical-align: top; position: relative; top: .25em; margin-right: 2px; }
.stat > span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.35; }

/* ---------- Grade de trabalhos ---------- */
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.work { display: block; cursor: pointer; text-align: left; background: none; border: 0; padding: 0; }
.work__img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-2); position: relative; box-shadow: var(--shadow); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.work:hover .work__img img { transform: scale(1.05); }
/* Legenda dentro da imagem, sobre um degradê escuro embaixo (mais forte no hover) */
.work__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35) 72%, rgba(0,0,0,.78)); opacity: .9; transition: opacity .4s; pointer-events: none; }
.work:hover .work__img::after { opacity: 1; }
.work__arrow { position: absolute; right: 16px; top: 16px; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: .4s cubic-bezier(.2,.8,.2,1); }
.work__arrow svg { width: 20px; height: 20px; }
.work:hover .work__arrow { transform: none; opacity: 1; }
.work__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 24px 28px; color: #fff; }
.work__meta h3 { font-size: 22px; letter-spacing: -0.02em; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.work__meta > span { font-size: 14px; color: rgba(255,255,255,.75); text-align: right; }
.works-more { text-align: center; margin-top: 56px; }

/* Filtros */
.filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 48px; }
.filter { height: 44px; padding: 0 20px; border-radius: 99px; border: 0; background: var(--card); box-shadow: var(--shadow); font-size: 15px; font-weight: 500; transition: .25s; }
.filter small { margin-left: 6px; color: var(--muted); font-size: 13px; }
.filter:hover { transform: translateY(-1px); }
.filter.is-active { background: var(--ink); color: #fff; }
.filter.is-active small { color: rgba(255,255,255,.6); }
.work.is-hidden { display: none; }

/* ---------- Serviços (cards empilhados) ---------- */
.services { display: grid; gap: 24px; }
/* Seções escuras */
.sec--dark { background: #0B0B0B; color: #fff; isolation: isolate; overflow: clip; }
.sec__shader { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.sec--dark .lead, .sec--dark .muted { color: rgba(255,255,255,.62); }
.sec--dark .eyebrow { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sec--dark h2 em { color: #FF7A3A; }
.sec--dark .service, .sec--dark .benefit { background: #161616; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sec--dark .service p, .sec--dark .benefit p { color: rgba(255,255,255,.62); }
.sec--dark .tag { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.sec--dark .benefit__icon { background: rgba(255, 78, 0, .16); }
.sec--dark .benefit--dark { background: var(--orange); }
.sec--dark .benefit--dark p { color: rgba(255,255,255,.85); }
.sec--dark .benefit--dark .benefit__icon { background: rgba(255,255,255,.2); }
.sec--dark .plan--hot { background: #1A1A1A; box-shadow: inset 0 0 0 1px rgba(255, 78, 0, .55); }
.sec--dark .plans-note { color: rgba(255,255,255,.55); }
.sec--dark + .sec[style*="padding-top:0"] { padding-top: var(--sec) !important; }
/* Banner escuro das páginas internas: o conteúdo seguinte não pode encostar nele */
.page-hero + .sec[style*="padding-top:0"] { padding-top: clamp(56px, 7vw, 96px) !important; }

.service {
  position: sticky; top: 96px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(16px, 2vw, 24px); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-lg);
}
.service__img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; }
.service__img img { width: 100%; height: 100%; object-fit: cover; }
.service__body { padding: 16px clamp(8px, 2vw, 24px) 16px 0; }
.service__num { font-size: 14px; color: var(--orange); font-weight: 500; margin-bottom: 16px; display: block; }
.service h3 { margin-bottom: 16px; }
.service p { color: var(--muted); margin: 0 0 24px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; background: var(--bg); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.tag::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }
.service__price { display: flex; align-items: baseline; gap: 8px; margin: -8px 0 24px; }
.service__price b { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; }

/* ---------- Depoimentos ---------- */
.testi-top { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: stretch; }
.video-card--art { display: block; background: #FFE9C9; }
.video-card--art img { object-position: center top; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.video-card--art:hover img { transform: scale(1.03); }
.video-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 9/14; background: #222; box-shadow: var(--shadow-lg); cursor: pointer; }
.video-card img, .video-card video { width: 100%; height: 100%; object-fit: cover; }
.video-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.65)); pointer-events: none; }
.video-card__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: transform .35s; }
.video-card:hover .video-card__play { transform: scale(1.08); }
.video-card__play svg { width: 26px; height: 26px; margin-left: 4px; color: #fff; }
.video-card__who { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; }
.video-card__who b { display: block; font-size: 18px; font-weight: 500; }
.video-card__who span { font-size: 14px; opacity: .75; }
.testi-feature { border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.testi-feature blockquote { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 500; }
.testi-feature blockquote em { color: var(--orange); }
.person { display: flex; align-items: center; gap: 14px; }
.person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
/* Avaliações reais do Google sem foto: inicial do nome num círculo laranja */
.person__ini { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 500; }
.person b { display: block; font-weight: 500; line-height: 1.3; }
.person span { font-size: 14px; color: var(--muted); }
.testi-feature__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.testi-feature__nums { display: flex; gap: 32px; }
.testi-feature__nums b { display: block; font-size: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.testi-feature__nums span { font-size: 13px; color: var(--muted); }
/* padding em cima e embaixo para a sombra dos cards não ser cortada pelo overflow */
.testi-carousel { margin-top: 0; padding: 24px 0 56px; margin-bottom: -40px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testi-carousel .marquee__track { gap: 24px; animation-duration: 70s; align-items: stretch; }
.testi-carousel:hover .marquee__track { animation-play-state: paused; }
.testi { width: 380px; flex: none; padding: 28px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.testi p { margin: 0; font-size: 17px; color: var(--ink-2); line-height: 1.55; }
.placeholder-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 24px; }

/* ---------- Benefícios ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit { padding: 32px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.benefit__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; margin-bottom: 40px; }
.benefit__icon svg { width: 24px; height: 24px; }
.benefit h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.2; }
.benefit p { margin: 0; color: var(--muted); font-size: 16px; }
.benefit--dark { background: var(--ink); color: #fff; }
.benefit--dark p { color: rgba(255,255,255,.65); }
.benefit--dark .benefit__icon { background: var(--orange); color: #fff; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid .sec-head { position: sticky; top: 120px; margin-bottom: 0; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 28px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); position: relative; transition: transform .35s, background .35s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; translate: -50% -50%; border-radius: 2px; }
.faq summary i::after { rotate: 90deg; transition: rotate .35s; }
.faq details[open] summary i { background: var(--orange); color: #fff; }
.faq details[open] summary i::after { rotate: 0deg; }
.faq .faq__a { padding: 0 28px 26px; color: var(--muted); margin-top: -6px; }
.faq .faq__a p { margin: 0; }

/* ---------- CTA com shader ---------- */
.cta { padding: 0 0 var(--sec); }
.cta__box { position: relative; overflow: hidden; border-radius: clamp(24px, 3vw, 40px); background: #FF5A0A; color: #fff; min-height: 520px; display: grid; place-items: center; text-align: center; padding: clamp(56px, 8vw, 112px) var(--gutter); isolation: isolate; }
.cta__box canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* Foto do Pão de Açúcar no lugar do shader, com filtro escuro por cima para a leitura */
.cta__box { background: #120a06 url(../imagens/pao-de-acucar.jpg) center 62% / cover no-repeat; }
.cta__box canvas { display: none; }
.cta__box::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,6,4,.55), rgba(10,6,4,.62) 55%, rgba(10,6,4,.78)); }
.cta__box h2 { text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.cta__box h2 { font-size: clamp(40px, 6vw, 84px); max-width: 860px; margin: 0 auto; text-shadow: 0 2px 30px rgba(140, 40, 0, .25); }
.cta__box h2 em { color: #fff; }
.cta__box p { color: rgba(255,255,255,.92); margin: 20px auto 36px; max-width: 520px; font-size: 18px; }
.cta__box .btn-row { margin: 0; }
.btn--link { background: transparent; color: #fff; padding: 0 16px; }
.btn--link:hover { transform: translateX(2px); }

/* ---------- Contato / Rodapé ---------- */
.footer { background: var(--ink); color: #fff; border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0; padding: clamp(72px, 9vw, 120px) 0 32px; overflow: hidden; position: relative; }
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); }
.contact h2 { margin-bottom: 20px; }
.contact h2 em { color: var(--orange); }
.contact .lead { color: rgba(255,255,255,.6); }
.contact__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.contact__list a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: background .3s; }
.contact__list a:hover { background: rgba(255,255,255,.1); }
.contact__list i { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.contact__list i svg { width: 20px; height: 20px; }
.contact__list small { display: block; font-size: 13px; color: rgba(255,255,255,.5); }
.contact__list b { font-weight: 500; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-lg); background: #fff; color: var(--ink); }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg);
  transition: border-color .25s, background .25s, box-shadow .25s; appearance: none; -webkit-appearance: none;
}
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6762' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.form textarea { min-height: 128px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255, 78, 0, .12); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: block; }
.chips input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font-weight: 500; cursor: pointer; transition: .2s; }
.chips input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255, 78, 0, .25); }
.form .btn { width: 100%; margin-top: 8px; }
.form__note { font-size: 13px; color: var(--muted); text-align: center; margin: 4px 0 0; font-weight: 400; }
.form__ok { display: none; grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--r-sm); background: var(--orange-soft); font-size: 15px; }
.form.is-sent .form__ok { display: block; }

.footer__bottom { margin-top: clamp(72px, 9vw, 120px); padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.5); }
.footer__bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__bottom a:hover { color: #fff; }
.footer { padding-bottom: 0; }
.footer__mark { margin-top: clamp(48px, 6vw, 88px); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; will-change: transform, opacity; }
.footer__word { display: block; width: min(72%, 900px); height: auto; margin-bottom: -2.2%; }
.footer__sign { display: flex; align-items: center; gap: 14px; padding-bottom: 6%; color: rgba(255,255,255,.7); }
.footer__sign svg { width: 44px; height: 44px; flex: none; }
.footer__sign p { margin: 0; font-size: 18px; line-height: 1.2; white-space: nowrap; }
.footer__sign em { font-family: var(--serif); font-style: italic; font-size: 1.2em; color: #fff; }
@media (max-width: 700px) {
  .footer__mark { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .footer__word { width: 100%; }
  .footer__sign { padding-bottom: 0; }
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px 0 18px; border-radius: 99px;
  background: #25D366; color: #fff; font-weight: 500; font-size: 15px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .35); transition: transform .3s;
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 26px; height: 26px; }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* ---------- Página de trabalho ---------- */
.pj-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; background: #000; }
.pj-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pj-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(0,0,0,.35), transparent 22%, transparent 45%, rgba(0,0,0,.72)); }
.pj-cover__info { padding-top: 140px; padding-bottom: clamp(32px, 5vw, 56px); }
.pj-back { display: inline-block; margin-bottom: 24px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.8); transition: color .25s; }
.pj-back:hover { color: #fff; }
.pj-cover h1 { max-width: 1000px; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.pj-meta { display: flex; flex-wrap: wrap; gap: 16px 56px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.25); }
.pj-meta small { display: block; font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.pj-meta b { font-weight: 500; }
.pj-meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pj-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.pj-img img { width: 100%; height: auto; }
.pj-img video { display: block; width: 100%; height: auto; }
.pj-blocks .pj-img--video { cursor: pointer; box-shadow: var(--shadow-lg); position: relative; }
.pj-img--video:fullscreen { display: grid; place-items: center; background: #000; border-radius: 0; }
.pj-img--video:fullscreen video { max-height: 100vh; width: auto; max-width: 100%; }
/* Player dos vídeos da galeria */
/* Discreto: some até passar o mouse; em telas de toque fica sempre visível, bem sutil */
.vp { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 99px; background: rgba(0, 0, 0, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; opacity: 0; transition: opacity .3s; }
.pj-img--video:hover .vp, .pj-img--video.is-paused .vp, .vp:focus-within { opacity: 1; }
@media (hover: none) { .vp { opacity: .75; } }
.vp button { flex: none; width: 24px; height: 24px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .85; transition: opacity .2s; }
.vp button:hover { opacity: 1; }
.vp svg { width: 11px; height: 11px; }
.vp__bar { width: 96px; height: 14px; display: flex; align-items: center; cursor: pointer; touch-action: none; background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) center / 100% 2px no-repeat; }
.vp__bar i { display: block; height: 2px; width: 0; border-radius: 2px; background: #fff; }
.vp__time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .75; }
.pj-img--cover { aspect-ratio: 16/9; box-shadow: var(--shadow-lg); }
.pj-intro { padding: clamp(72px, 9vw, 128px) var(--gutter); }
.pj-intro p { margin: 0 auto; max-width: 980px; text-align: center; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.22; letter-spacing: -0.03em; font-weight: 500; }
.pj-blocks { display: grid; gap: clamp(16px, 2vw, 24px); }
/* Página inteira de um site: pedaços emendados num bloco só, sem espaço entre eles */
.pj-page { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.pj-page .pj-img { border-radius: 0; background: none; opacity: 1 !important; transform: none !important; }
.pj-page .pj-img img { display: block; }
.pj-blocks .pj-page .pj-img:hover img { transform: none; }
.pj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); align-items: center; }
.pj-pair--stack { grid-template-columns: 1fr; }
.pj-blocks .pj-img { cursor: zoom-in; }
.pj-blocks .pj-img img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pj-blocks .pj-img:hover img { transform: scale(1.02); }

/* Lightbox das imagens do trabalho (tamanho original, limitado à tela) */
.lbx { position: fixed; inset: 0; z-index: 90; background: rgba(8, 8, 8, .94); display: none; align-items: center; justify-content: center; padding: 64px 80px; }
.lbx.is-open { display: flex; }
.lbx img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lbx button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; font-size: 22px; transition: background .25s; }
.lbx button:hover { background: var(--orange); }
.lbx__close { top: 20px; right: 20px; }
.lbx__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lbx__next { right: 20px; top: 50%; translate: 0 -50%; }
.lbx__count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; color: rgba(255,255,255,.6); font-size: 14px; }
@media (max-width: 600px) { .lbx { padding: 64px 12px; } .lbx__prev, .lbx__next { top: auto; bottom: 12px; translate: none; } }
.pj-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin: clamp(32px, 5vw, 64px) 0; }
.pj-split--rev .pj-img { order: 2; }
.pj-split--stack { grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); }
.pj-split--stack .pj-img { order: 0; }
.pj-split--stack .pj-split__text { max-width: 720px; }
.pj-split__text h2 { margin-bottom: 16px; }
.pj-split__text p, .pj-text p { color: var(--muted); margin: 0; font-size: 18px; }
.pj-text { max-width: 720px; margin: clamp(48px, 7vw, 96px) auto; text-align: center; }
.pj-text h2 { margin-bottom: 16px; }
.pj-end { padding: clamp(72px, 9vw, 120px) var(--gutter) var(--sec); display: grid; gap: 48px; justify-items: center; }
.pj-next { position: relative; display: grid; place-items: center; width: 100%; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; color: #fff; text-align: center; isolation: isolate; }
.pj-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.pj-next::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.45); }
.pj-next:hover img { transform: scale(1.05); }
.pj-next small { display: block; font-size: 15px; opacity: .8; margin-bottom: 8px; }
.pj-next span { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(32px, 5vw, 64px); font-weight: 500; letter-spacing: -0.03em; }
.pj-next svg { width: .7em; height: .7em; }

/* ---------- Páginas internas ---------- */
.page-hero { padding: 176px 0 clamp(80px, 9vw, 128px); text-align: center; position: relative; overflow: hidden; isolation: isolate; background: #000; color: #fff; }
.page-hero .lead { margin: 24px auto 0; color: rgba(255,255,255,.72); }
.page-hero h1 em { color: #FF7A3A; }
.page-hero .eyebrow { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.page-hero .btn--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.page-hero .hero__bg { background: radial-gradient(1px 1px at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0 / 22px 22px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.rich p { color: var(--muted); margin: 0 0 18px; }
.rich p strong { color: var(--ink); font-weight: 500; }
.wide-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/8; box-shadow: var(--shadow-lg); }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Folga para o parallax (-6% a 4%) não mostrar o fundo nas bordas */
.wide-photo[data-parallax] img { position: relative; top: -7%; height: 114%; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare__col { padding: 32px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.compare__col h3 { font-size: 22px; margin-bottom: 20px; letter-spacing: -0.02em; }
.compare__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compare__col li { display: flex; gap: 12px; color: var(--muted); }
.compare__col li::before { content: '–'; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 14px; line-height: 22px; text-align: center; color: var(--muted); }
.compare__col--us { background: var(--ink); color: #fff; }
.compare__col--us li { color: rgba(255,255,255,.8); }
.compare__col--us li::before { content: '✓'; background: var(--orange); color: #fff; }

/* Planos */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { padding: 32px; border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 24px; position: relative; }
.plan__name { font-size: 20px; font-weight: 500; }
.plan__desc { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price small { font-size: 14px; color: var(--muted); }
.plan__price b { font-size: clamp(40px, 4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan li { display: flex; gap: 12px; font-size: 15px; color: var(--ink-2); }
.plan li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4E00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan .btn { width: 100%; }
.plan--hot { background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); }
.plan--hot .plan__desc, .plan--hot .plan__price small { color: rgba(255,255,255,.6); }
.plan--hot li { color: rgba(255,255,255,.85); }
.plan--hot li::before { background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.plan__badge { position: absolute; top: 24px; right: 24px; padding: 6px 12px; border-radius: 99px; background: var(--orange); color: #fff; font-size: 13px; font-weight: 500; }
.plans-note { text-align: center; color: var(--muted); font-size: 15px; margin-top: 24px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step { padding: 28px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.step::before { counter-increment: step; content: '0' counter(step); display: block; font-family: var(--serif); font-style: italic; font-size: 44px; color: var(--orange); line-height: 1; margin-bottom: 40px; }
.step h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.2; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.list-card { padding: 32px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.list-card h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 20px; }
.list-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); }
.list-card li { padding-left: 18px; position: relative; }
.list-card li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.list-card--muted li::before { background: #C9C0B8; }

/* ---------- Animações de entrada ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); }
.js .split-words .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.3em); }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__cta .btn { display: none; }
  .service { grid-template-columns: 1fr; position: relative; top: auto; }
  .service__body { padding: 8px; }
  .testi-top { grid-template-columns: 1fr 1fr; }
  .benefits, .plans { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .about, .split, .contact, .faq-grid, .compare, .list-grid { grid-template-columns: 1fr; }
  .faq-grid .sec-head { position: static; }
  .works { grid-template-columns: 1fr; }
  .pj-split, .pj-pair { grid-template-columns: 1fr; }
  .pj-split--rev .pj-img { order: 0; }
  .pj-hero { padding-top: 128px; }
  .testi-top { grid-template-columns: 1fr; }
  .video-card { aspect-ratio: 4/5; }
  .about__photo { aspect-ratio: 4/4.4; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding-top: 128px; }
  .page-hero { padding-top: 136px; }
  .logo { width: 124px; }
  .benefits, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { display: flex; align-items: baseline; gap: 16px; }
  .stat > span { margin: 0; }
  .form { grid-template-columns: 1fr; }
  .proof { flex-direction: column; border-radius: var(--r); padding: 14px 20px; text-align: center; }
  .btn-row .btn { flex: 1 1 100%; }
  .testi { width: 300px; }
  .wa-float { padding: 0; width: 60px; justify-content: center; }
  .wa-float span { display: none; }
  .cta__box { min-height: 480px; }
  .faq summary { padding: 20px; font-size: 17px; }
  .faq .faq__a { padding: 0 20px 22px; }
  .work__meta { flex-direction: column; gap: 4px; padding: 18px 20px; }
  .work__meta > span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .split-words .w { opacity: 1; transform: none; filter: none; }
}