/* Studio Vibe sobre o FLST: só o que o template não cobre */
.mxd-hero-03__title h2 { position: relative; display: flex; flex-flow: column; gap: 0; justify-content: center; align-items: center; font: normal 600 8rem/0.94 var(--_font-accent); text-transform: uppercase; color: var(--t-base-br); margin: 0; }
@media only screen and (min-width: 768px) { .mxd-hero-03__title h2 { font-size: 14rem; } }
@media only screen and (min-width: 1200px) { .mxd-hero-03__title h2 { flex-flow: row; gap: 2.4rem; } }
@media only screen and (min-width: 1400px) { .mxd-hero-03__title h2 { font-size: 19rem; } }
@media only screen and (min-width: 1600px) { .mxd-hero-03__title h2 { font-size: 24rem; } }
/* "Studio Vibe" é maior que o "Flst" do modelo: uma linha só no topo */
.mxd-nav-exp__logo a span { white-space: nowrap; }
/* "StudioVibe" tem uma letra a mais que "FlyStudio": mesma largura total do modelo */
.fw-mark__content { font-size: 22.2cqw; }
@media only screen and (min-width: 992px) { .fw-mark__content { font-size: 22.2cqw; } }

/* ===== Fontes da LP anterior (localhost:8911): Inter Tight nos títulos, Inter no resto, sem caixa alta ===== */
:root {
  --_font-accent: 'Inter Tight', 'Inter', sans-serif;
  --_font-tags: 'Inter', sans-serif;
  --sv-escuro: #111111; --sv-escuro-2: #1c1c1f; --sv-claro: #f5f5f6; --sv-lima: #D8FF63;
}
body *, body *::before, body *::after { text-transform: none !important; }
h1, h2, h3, .headline-stretched, .fw-mark__content span, .card__title p, .marquee__text, .large-title, .nav-exp-card__title h3,
.mxd-services-card__title h3, .main-menu__link, .footer-nav__title p, .footer-subscribe__title p, .mxd-nav-exp__logo a {
  letter-spacing: -0.045em !important; font-weight: 500;
}
h1, h2, h3 { line-height: 1.02; }
h1.headline-stretched { font-size: 10.4cqw; line-height: 0.96; }
.mxd-hero-03__title h2 { line-height: 1; }
@media only screen and (min-width: 1400px) { .mxd-hero-03__title h2 { font-size: 16rem; } }
@media only screen and (min-width: 1600px) { .mxd-hero-03__title h2 { font-size: 19rem; } }
.fw-mark__content, .fw-mark__content.personal { font-size: 22.6cqw; }
@media only screen and (min-width: 992px) { .fw-mark__content { font-size: 22.6cqw; } }
.mxd-tag, .btn, .mxd-hero-01__caption p, .marquee__text { letter-spacing: -0.01em; }

/* ===== Seções da LP anterior, nas cores do FLST ===== */
.sv-sec { padding: 120px 0; }
@media (max-width: 767px) { .sv-sec { padding: 72px 0; } }
.sv-cabeca { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.sv-cabeca--centro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.sv-titulo h2 { font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; color: var(--t-base-br); }
.sv-frase { color: var(--t-base-mt); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; max-width: 42ch; }
.sv-cabeca--centro .sv-frase { max-width: 56ch; }

/* Antes e agora */
.sv-antes__texto { max-width: 28ch; margin: 0 auto; text-align: center; font: 500 clamp(22px, 2.7vw, 40px)/1.25 var(--_font-accent); letter-spacing: -0.035em; color: var(--t-base-br); text-wrap: balance; }
.sv-chip { display: inline-block; padding: 0 0.3em; border-radius: 0.28em; background: var(--base-tint); border: 1px solid var(--st-base); line-height: 1.2; }
.sv-chip--escuro { background: var(--t-base-br); color: var(--base); border-color: var(--t-base-br); }
.sv-chip--lima { background: var(--sv-lima); color: #151414; border-color: var(--sv-lima); }
.sv-nw { white-space: nowrap; }

/* O Studio por dentro: abas à esquerda, tela inteira à direita, tudo numa tela só */
.sv-dentro__grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
.sv-dentro__lado .sv-frase { margin-top: 16px; }
.sv-abas { display: grid; gap: 8px; margin-top: 32px; }
.sv-abas button { display: grid; gap: 4px; width: 100%; padding: 16px 18px; text-align: left; border-radius: 12px; border: 0; background: var(--base-tint); color: var(--t-base-br); cursor: pointer; transition: background-color .22s, color .22s; }
.sv-aba__nome { font: 500 16px/1.15 var(--_font-accent); letter-spacing: -0.03em; }
.sv-aba__texto { font: 400 15px/1.45 var(--_font-default); color: var(--t-base-mt); }
.sv-abas button:hover { background: var(--base-shade); }
.sv-abas button[aria-selected="true"] { background: var(--t-base-br); color: var(--base); }
.sv-abas button[aria-selected="true"] .sv-aba__texto { color: var(--base); opacity: .8; }
.sv-abas button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-moldura { position: relative; border-radius: 16px; background: var(--sv-escuro); padding: clamp(10px, 1.4vw, 20px); }
.sv-moldura--clara { background: var(--base-shade); }
.sv-tela img, .sv-moldura > img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 8px; }
.sv-tela__legenda { display: none; margin-top: 14px; color: var(--sv-claro); font-size: 15px; line-height: 1.45; }
.sv-tela:not([hidden]) img { animation: sv-entra .45s ease both; }
@keyframes sv-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1199px) {
  .sv-dentro__grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sv-abas { display: flex; overflow-x: auto; scrollbar-width: none; margin-top: 24px; }
  .sv-abas button { flex: 0 0 auto; width: auto; padding: 12px 16px; }
  .sv-aba__texto { display: none; }
  .sv-tela__legenda { display: block; }
}

/* Site e loja no mesmo painel */
.sv-loja { overflow: hidden; }
.sv-loja__faixa { display: flex; gap: 20px; width: max-content; padding: 0 max(2rem, calc((100vw - 1440px) / 2 + 2rem)); }
.sv-servico { display: flex; flex-direction: column; gap: 16px; width: min(420px, 82vw); min-height: 540px; padding: 28px; border-radius: 20px; background: var(--base-tint); border: 1px solid var(--st-base); color: var(--t-base-br); }
.sv-servico p { color: var(--t-base-md); font-size: 16px; line-height: 1.55; }
.sv-servico--escuro { background: var(--sv-escuro); border-color: var(--sv-escuro); color: var(--sv-claro); }
.sv-servico--escuro h3, .sv-servico--escuro p { color: var(--sv-claro); }
.sv-servico__img { margin-top: auto; height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--st-base); background: var(--base); }
.sv-servico__img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.sv-servico__img--cel img { object-position: center top; }
@media (max-width: 1199px) { .sv-loja__trilho { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .sv-servico { scroll-snap-align: center; } }

/* Harness: perguntas à esquerda, a tela muda com a pergunta aberta */
.sv-harness__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.sv-harness__frase { margin-top: 16px; margin-bottom: 32px; }
.sv-harness__tela { position: sticky; top: 120px; }
.sv-sanfona { display: grid; gap: 8px; }
.sv-sanfona details { border-radius: 12px; background: var(--base-tint); }
.sv-sanfona details[open] { background: var(--t-base-br); }
.sv-sanfona details[open] summary, .sv-sanfona details[open] p { color: var(--base); }
.sv-sanfona summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 0 20px; cursor: pointer; font: 500 clamp(15px, 1.3vw, 18.4px)/1.15 var(--_font-accent); letter-spacing: -0.03em; color: var(--t-base-br); }
.sv-sanfona summary::-webkit-details-marker { display: none; }
.sv-sanfona summary::after { content: "+"; font: 400 22px/1 var(--_font-default); opacity: .6; transition: transform .22s; }
.sv-sanfona details[open] summary::after { transform: rotate(45deg); }
.sv-sanfona summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.sv-sanfona details p { padding: 0 20px 20px; max-width: 52ch; font-size: 16px; line-height: 1.55; opacity: .85; }
@media (max-width: 1199px) { .sv-harness__tela { position: static; } }

@media (max-width: 1199px) {
  .sv-cabeca, .sv-harness__grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sv-dentro__moldura { border-radius: 24px; }
  .sv-servico { min-height: 480px; }
}

/* A Inter Tight com espaçamento apertado passa da caixa da palavra: a máscara da animação
   cortava o fim do "o", do "A" e a perna do "j" e do "g". Folga em volta, sem mudar o layout. */
.word-mask, .char-mask { padding: 0.12em 0.1em 0.22em !important; margin: -0.12em -0.1em -0.22em !important; }
.line-mask { padding: 0.12em 0.1em 0.22em !important; margin: -0.12em -0.1em -0.22em !important; }


/* ===== Nenhuma imagem esticada: a altura acompanha a largura, e o que precisa preencher recorta ===== */
:where(img[width][height]) { height: auto; }
:where(img, video) { object-fit: cover; }

/* ===== Arredondamento: no máximo 20% do lado menor, nada de pílula ou forma oval ===== */
:root { --_radius-round-s: 0.6rem; --_radius-round-m: 1rem; --_radius-xl: 1.6rem; --_radius-l: 1.4rem; }
.card__image, .mxd-hero-media__wrapper, .mxd-hero-media__scaling-media, [data-flip-element], .nav-exp-card__media-wrap,
.mxd-services-card__image, .mxd-about-pinned__item, .mxd-promo__image-s, .mxd-promo__image-m, .mxd-promo__image-l,
.mxd-blog-preview__media, .mxd-blog-preview__photo, .nav-exp-card__inertia, .mxd-promo-split__inertia { border-radius: 16px !important; }
.mxd-services-card__image img, .mxd-about-pinned__item img, .mxd-blog-preview__media img { border-radius: inherit; }

/* Vídeo dos sites nos cartões roxos, com o mesmo zoom do modelo */
.card__image video { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(2); will-change: transform; }

/* Letra cursiva do modelo trocada por Inter */
:root { --_font-decor: 'Inter', sans-serif; }
.decor-default, .mxd-blog-preview__name, .mxd-promo-split__caption p { font-family: var(--_font-default) !important; font-style: normal !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1.45 !important; letter-spacing: -0.01em !important; color: var(--t-base-md) !important; }

/* Ícone nos cartões de recursos em grade */
.sv-recursos .sv-icone { width: 64px; margin-bottom: 20px; }
.sv-recursos .sv-icone img { width: 100%; height: auto; }

/* ===== Logo oficial do Studio ===== */
.sv-asterisco { fill: #6843EA; }
[data-color-scheme=dark] .sv-asterisco { fill: #B5ED53; }
.mxd-nav-exp__logo .sv-logo { width: auto; height: 20px; max-height: none; }
@media (max-width: 767px) { .mxd-nav-exp__logo .sv-logo { height: 12px; } }
.sv-logo-rodape { width: 80%; margin: 0 auto; padding: 4cqw 0 2cqw; }
.sv-logo-rodape .sv-logo { display: block; width: 100%; height: auto; fill: var(--t-base-br); }
.fw-mark__content, .fw-mark__content.personal { font-size: inherit; overflow: visible; }


/* ===== Logo no carrossel em círculo, no lugar de "Studio ✱ Vibe" ===== */
.sv-radial-logo { display: flex; justify-content: center; width: 100%; margin: 0; }
.sv-radial-logo .sv-logo { display: block; width: min(688px, 62vw); height: auto; fill: var(--t-base-br); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===== Marcador dos subtítulos: o ícone do Studio ===== */
.mxd-point-subtitle .sv-ponto { width: 12px; height: 12px; fill: #6843EA; }
[data-color-scheme=dark] .mxd-point-subtitle .sv-ponto { fill: #B5ED53; }

/* ===== Ícones Hugeicons: traço que se desenha ao aparecer e se mexe no hover ===== */
.hi { display: block; width: 1.25em; height: 1.25em; overflow: visible; }
.sv-hi { display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.btn-square .hi, .btn-round .hi { width: 22px; height: 22px; }
.mxd-header-controls__btn .hi { width: 18px; height: 18px; }
.main-menu__icon .hi { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.main-menu__item.active .main-menu__icon .hi, .main-menu__toggle.active .main-menu__icon .hi { transform: rotate(45deg); }
.mxd-color-switcher .hi { width: 20px; height: 20px; }
.btn-line i .hi { width: 18px; height: 18px; }
.hi [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hi.sv-desenha [pathLength] { animation: hi-traco 1s cubic-bezier(.65,0,.35,1) both; }
.hi.sv-desenha [pathLength]:nth-child(2) { animation-delay: .12s; }
.hi.sv-desenha [pathLength]:nth-child(3) { animation-delay: .24s; }
.hi.sv-desenha [pathLength]:nth-child(n+4) { animation-delay: .36s; }
@keyframes hi-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
a:hover .hi--seta, button:hover .hi--seta { animation: hi-diagonal .6s ease; }
@keyframes hi-diagonal { 0% { transform: none; } 45% { transform: translate(5px, -5px); opacity: 0; } 46% { transform: translate(-5px, 5px); opacity: 0; } 100% { transform: none; opacity: 1; } }
a:hover .hi--baixo { animation: hi-desce .7s ease infinite; }
@keyframes hi-desce { 50% { transform: translateY(4px); } }
a:hover .hi--cima { animation: hi-sobe .7s ease infinite; }
@keyframes hi-sobe { 50% { transform: translateY(-4px); } }
a:hover .hi--globo, .sv-icone:hover .hi--globo { animation: hi-gira 1.2s ease; }
@keyframes hi-gira { to { transform: rotate(360deg); } }
a:hover .hi--entrar { animation: hi-entra .6s ease; }
@keyframes hi-entra { 40% { transform: translateX(4px); } }
a:hover .hi--plug, .mxd-services-card:hover .hi--plug, a:hover .hi--loja, a:hover .hi--carrinho { animation: hi-balanca .7s ease; }
@keyframes hi-balanca { 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }
button:hover .hi--lua, button:hover .hi--sol { animation: hi-gira 1s cubic-bezier(.34,1.56,.64,1); }
.mxd-services-card:hover .hi--ver { animation: hi-pisca .8s ease; }
@keyframes hi-pisca { 40% { transform: scaleY(.15); } }
.mxd-services-card:hover .hi--raio { animation: hi-pula .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes hi-pula { 40% { transform: translateY(-6px) scale(1.12); } }
.mxd-services-card:hover .hi--grafico, .mxd-services-card:hover .hi--idioma, .mxd-services-card:hover .hi--busca { animation: hi-pula .6s cubic-bezier(.34,1.56,.64,1); }
.btn:hover .hi--foguete { animation: hi-decola .9s ease; }
@keyframes hi-decola { 45% { transform: translate(6px, -6px); opacity: 0; } 46% { transform: translate(-6px, 6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* ícones grandes vivem sozinhos, devagar */
.sv-icone .hi, .sv-passo-ic .hi { animation: hi-respira 3.6s ease-in-out infinite; }
@keyframes hi-respira { 50% { transform: translateY(-3px) rotate(-4deg); } }

/* Ícone dos cartões de recursos: plano, sem sombra */
.sv-recursos .sv-icone { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 12px; background: rgb(255 255 255 / .16); color: currentColor; }
.mxd-services-card.tint .sv-icone { background: var(--accent); color: #fff; }
.mxd-services-card.lime-var .sv-icone { background: #151414; color: var(--sv-lima); }
.mxd-services-card.purple .sv-icone { background: #fff; color: var(--accent); }
.sv-recursos .sv-icone .hi { width: 32px; height: 32px; }
/* Ícone dentro de botão e nos passos */
.sv-btn-ic { display: grid !important; place-items: center; background: #151414; color: var(--sv-lima); }
.sv-btn-ic .hi { width: 20px; height: 20px; }
.sv-passo-ic { display: grid; place-items: center; background: var(--sv-lima); color: #151414; }
.sv-passo-ic .hi { width: 26px; height: 26px; }

/* ===== Chamada final: parede de TVs com sites rolando ===== */
.sv-tv { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; min-height: max(720px, 100svh); border-radius: 16px; background: #0c0c0e; }
.sv-tv__parede { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 0; }
.sv-tv__linha { overflow: hidden; display: flex; }
.sv-tv__trilho { display: flex; gap: 14px; width: max-content; height: 100%; animation: sv-tv-esq 90s linear infinite; }
.sv-tv__linha--dir .sv-tv__trilho { animation-name: sv-tv-dir; animation-duration: 110s; }
.sv-tv__linha:nth-child(3) .sv-tv__trilho { animation-duration: 75s; }
@keyframes sv-tv-esq { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@keyframes sv-tv-dir { from { transform: translateX(calc(-50% - 7px)); } to { transform: translateX(0); } }
.sv-tv__quadro { flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #1c1c1f; }
.sv-tv__quadro img, .sv-tv__quadro video { width: 100%; height: 100% !important; object-fit: cover; object-position: top center; display: block; }
.sv-tv__veu { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 60% at 50% 50%, rgb(12 12 14 / .92), rgb(12 12 14 / .62)); }
.sv-tv__conteudo { position: relative; z-index: 2; display: grid; justify-items: center; gap: 28px; padding: 120px 24px; text-align: center; }
.sv-tv__conteudo .mxd-promo__title h2 { color: #fff; }
@media (prefers-reduced-motion: reduce) { .sv-tv__trilho { animation: none; } .hi [pathLength] { animation: none !important; } .sv-icone .hi, .sv-passo-ic .hi { animation: none; } }
@media (max-width: 767px) { .sv-tv { min-height: 640px; border-radius: 0; } .sv-tv__parede { gap: 8px; padding: 8px 0; } .sv-tv__trilho { gap: 8px; } }

/* ===== IAs que conectam: ícones de app em duas faixas (como a página MCP do Framer) ===== */
.sv-apps { overflow: hidden; border-radius: 16px; background: #0b0b0c; color: #fff; padding: 110px 0 90px; }
.sv-apps__cabeca { display: grid; justify-items: center; gap: 20px; max-width: 640px; margin: 0 auto 64px; padding: 0 24px; text-align: center; }
.sv-apps .sv-titulo h2 { color: #fff; }
.sv-apps .sv-frase { color: #a1a1a6; }
.sv-apps__faixas { display: grid; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.sv-apps__linha { overflow: hidden; }
.sv-apps__trilho { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; list-style: none; animation: sv-tv-esq 60s linear infinite; }
.sv-apps__linha--dir .sv-apps__trilho { animation-name: sv-tv-dir; animation-duration: 70s; }
.sv-app { flex: 0 0 auto; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 24px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.sv-app svg { width: 52%; height: 52%; }
.sv-app:hover { transform: translateY(-6px) rotate(-3deg); }
.sv-apps__nota { margin: 48px auto 0; padding: 0 24px; max-width: 60ch; text-align: center; color: #a3a3ab; font-size: 14px; }
@media (max-width: 767px) { .sv-apps { border-radius: 0; padding: 80px 0 64px; } .sv-app { width: 84px; height: 84px; border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) { .sv-apps__trilho { animation: none; } }

/* ===== Perguntas frequentes ===== */
.sv-faq__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
@media (max-width: 1199px) { .sv-faq__grade { grid-template-columns: minmax(0, 1fr); } }

/* ===== Padrão final (12/11) ===== */
/* Cantos: dois valores só. 6px no que se clica e em imagem dentro de bloco; 16px nos blocos. */
:root { --sv-raio-p: 6px; --sv-raio-g: 16px; --sv-gap: 160px; }
@media (max-width: 1199px) { :root { --sv-gap: 120px; } }
@media (max-width: 767px) { :root { --sv-gap: 88px; } }
:is(.mxd-nav-exp, .mxd-nav-exp__stroke, .mxd-nav-exp__bg, .nav-exp-menu, .mxd-color-switcher, .mxd-header-controls__btn,
  .mxd-tag, .mxd-tag-link, .btn, .btn-pic, .sv-chip, .sv-abas button, .sv-sanfona details, .sv-sanfona summary,
  input, textarea, select, .nav-exp-card__inertia, .nav-exp-card__media-wrap, .mxd-hero-03 p span, .sv-antes p span, .mxd-services-card__icon, .sv-icone, .mxd-blog-preview__photo, .sv-moldura > img, .sv-tela img,
  .sv-servico__img, .sv-tela) { border-radius: var(--sv-raio-p) !important; }
.btn-pic img { border-radius: inherit !important; }
.btn-wrap, .btn-text, .btn-caption, .sv-hi, .main-menu__link { border-radius: 0 !important; }
.mark-icon { border-radius: 2px !important; }
/* etiqueta com 30px de altura: 6px fica em 20% */
.mxd-tag, .mxd-tag-link { min-height: 30px; display: inline-flex; align-items: center; }
:is(.nav-exp-card__inner, .mxd-hero-media__small, .mxd-hero-media__wrapper,
  .mxd-hero-media__scaling-media, .scaling-media__video, [data-flip-element], .mxd-about-pinned__item, .mxd-about-pinned__item img,
  .marquee-radial__item, .card__image, .sv-moldura, .sv-servico, .mxd-services-card__inner, .mxd-services-card__image,
  .mxd-blog-preview__inner, .mxd-blog-preview__media, .sv-apps, .sv-app, .sv-tv, .sv-tv__quadro, .footer-subscribe__card,
  .mxd-promo__image-s, .mxd-promo__image-m, .mxd-promo__image-l, .mxd-promo-split__inertia, .sv-dentro__moldura) { border-radius: var(--sv-raio-g) !important; }
.marquee-radial__item img, .marquee-radial__item video, .mxd-services-card__image img, .mxd-blog-preview__media img, .nav-exp-card__media-wrap img { border-radius: inherit !important; }
@media (max-width: 767px) { .sv-apps, .sv-tv { border-radius: 0 !important; } }

/* Espaço entre seções: o mesmo em toda a página */
.sv-antes { padding-top: 0 !important; }
:where(.sv-sec, #sobre, #recursos, #agencias, .sv-apps-sec, #passos, #perguntas) { padding-top: 0 !important; padding-bottom: var(--sv-gap) !important; }

/* Títulos 20% menores: faixa de texto */
.marquee__text { font-size: 20svh !important; }

/* Ícones das IAs: espaço para o movimento do hover não cortar */
.sv-apps__linha { padding: 14px 0; }
.sv-apps__faixas { gap: 4px; }
.btn.btn-line, .btn.main-menu__link, .nav-exp-menu__hamburger-bar { border-radius: 0 !important; }
@media (max-width: 767px) { .sv-chip.sv-chip, .sv-nw.sv-nw { border-radius: 5px !important; } }
h1, h2, h3 { text-wrap: balance; }

/* Subtítulo do carrossel em círculo numa linha só (no computador) */
@media (min-width: 992px) { .sv-uma-linha { white-space: nowrap; max-width: none !important; } }

/* Sites no ar termina num bloco roxo: a seção seguinte começa depois do mesmo espaço */
#loja { padding-top: var(--sv-gap) !important; }

/* Hover em todos os botões */
.btn, .mxd-header-controls__btn, .mxd-color-switcher, .sv-abas button, .sv-sanfona summary {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .25s ease, color .25s ease, filter .25s ease, box-shadow .25s ease !important;
}
.btn:not(.main-menu__link):not(.btn-line):hover, .mxd-header-controls__btn:hover, .mxd-color-switcher:hover { transform: translateY(-2px); filter: brightness(.93); }
.btn-purple:hover, .btn-accent:hover { filter: brightness(1.12) !important; }
.btn:not(.main-menu__link):active, .mxd-header-controls__btn:active, .mxd-color-switcher:active { transform: translateY(0) scale(.97); transition-duration: .08s !important; }
.btn-line:hover { opacity: .7; }
.btn .sv-btn-ic .hi, .btn .sv-hi .hi { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn:hover .sv-btn-ic .hi { transform: translate(2px, -2px) rotate(-12deg); }
.btn-square:hover .sv-hi .hi, .mxd-color-switcher:hover .hi { transform: scale(1.12); }
.mxd-color-switcher:hover .hi { transform: rotate(-20deg) scale(1.08); }
.sv-abas button:not([aria-selected="true"]):hover { background: var(--base-shade, #e6e5e5); }
.sv-sanfona summary:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active, .mxd-header-controls__btn:hover, .mxd-color-switcher:hover { transform: none !important; } }
:is(.btn, .mxd-header-controls__btn, .mxd-color-switcher, .sv-abas button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Abas que trocam com a rolagem: a aba ativa mostra quanto falta para a próxima */
.sv-dentro--rola .sv-abas button { position: relative; overflow: hidden; }
.sv-dentro--rola .sv-abas button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sv-lima, #d8ff63); transform-origin: left; transform: scaleX(var(--sv-prog, 0)); }
.sv-tela:not([hidden]) img { animation: sv-tela-entra .45s cubic-bezier(.2,.8,.2,1); }
@keyframes sv-tela-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sv-tela:not([hidden]) img { animation: none; } }

/* ===== Hero novo ===== */
.sv-hero { padding: 150px 0 var(--sv-gap); }
.sv-hero__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; min-height: calc(100svh - 230px); }
.sv-hero__texto { display: grid; gap: 28px; justify-items: start; }
.sv-hero__para { display: inline-flex; align-items: center; gap: 10px; color: var(--t-base-md); font-size: 16px; }
.sv-hero__para .sv-ponto { width: 14px; height: 14px; fill: var(--accent); }
.sv-hero__titulo { font-family: var(--_font-accent); font-size: clamp(44px, 5.4vw, 84px) !important; font-weight: 600; line-height: .98; letter-spacing: -0.05em; color: var(--t-base-br); text-transform: none; overflow-wrap: break-word; min-width: 0; max-width: 11ch; }
.sv-hero__frase { text-wrap: pretty; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--t-base-md); max-width: 34ch; }
.sv-hero__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-hero__ias { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--t-base-mt, #8a8a8f); font-size: 14px; }
.sv-hero__ias ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-hero__ia { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sv-hero__ia:hover { transform: translateY(-3px) rotate(-4deg); }
.sv-hero__ia svg { width: 58%; height: 58%; }

/* Entrada só com CSS: o texto aparece mesmo sem JavaScript */
@keyframes sv-sobe { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.sv-hero__texto > * { animation: sv-sobe .8s cubic-bezier(.2,.8,.2,1) both; }
.sv-hero__texto > :nth-child(2) { animation-delay: .08s; } .sv-hero__texto > :nth-child(3) { animation-delay: .16s; }
.sv-hero__texto > :nth-child(4) { animation-delay: .24s; } .sv-hero__texto > :nth-child(5) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .sv-hero *, .sv-hero__texto > * { animation: none !important; } }

@media (max-width: 991px) {
  .sv-hero { padding-top: 120px; }
  .sv-hero__grade { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 48px; }
  .sv-hero__titulo { max-width: 12ch; }
}
@media (max-width: 767px) {
}

p, .sv-frase { text-wrap: pretty; }

/* ===== Velocidade e segurança ===== */
.sv-des__sub { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sv-des__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.sv-notas { display: grid; gap: 28px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--sv-raio-g); background: #0f0f10; color: #fff; }
.sv-notas__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sv-notas__topo p { font-size: 18px; color: #fff; }
.sv-notas__onde { margin-bottom: 14px; color: #a1a1a6; font-size: 15px; }
.sv-notas__grupo ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sv-nota { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.sv-nota svg { width: min(84px, 100%); height: auto; transform: rotate(-90deg); }
.sv-nota circle { fill: none; stroke-width: 5; }
.sv-nota__trilho { stroke: #2a2a2d; }
.sv-nota__arco { stroke: var(--sv-lima); stroke-linecap: round; stroke-dasharray: var(--n) 100; }
.sv-nota strong { position: absolute; top: 0; width: min(84px, 100%); aspect-ratio: 1; display: grid; place-items: center; font-family: var(--_font-accent); font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.03em; }
.sv-nota span { color: #c7c7cc; font-size: 13px; line-height: 1.3; }
.sv-notas__fonte { color: #7c7c82; font-size: 13px; line-height: 1.5; }
.sv-des__itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sv-des__item { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--sv-raio-g); background: var(--base-tint); border: 1px solid var(--st-base); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.sv-des__item:hover { transform: translateY(-4px); border-color: var(--accent); }
.sv-des__item h3 { font-size: clamp(19px, 1.5vw, 22px) !important; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; text-transform: none; }
.sv-des__item p { color: var(--t-base-md); font-size: 15px; line-height: 1.5; }
.sv-des__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-raio-p); background: var(--accent); color: #fff; }
.sv-des__ic .hi { width: 24px; height: 24px; }
.sv-des__item:hover .sv-des__ic .hi { animation: sv-pula .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes sv-pula { 50% { transform: translateY(-3px) scale(1.12); } }
/* o arco enche quando a seção aparece (onde o navegador sabe fazer isso); sem suporte, mostra a nota pronta */
@supports (animation-timeline: view()) {
  @keyframes sv-arco { from { stroke-dasharray: 0 100; } }
  .sv-nota__arco { animation: sv-arco linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}
@media (prefers-reduced-motion: reduce) { .sv-nota__arco { animation: none !important; } .sv-des__item:hover { transform: none; } }
@media (max-width: 991px) { .sv-des__grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .sv-des__itens { grid-template-columns: minmax(0, 1fr); } .sv-nota span { font-size: 12px; } }
.sv-notas { align-content: space-between; }
@media (max-width: 575px) {
  .sv-notas__grupo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .sv-nota svg, .sv-nota strong { width: 76px; }
}
@media (max-width: 575px) { .sv-hero__ias > span:last-child { display: none; } }


/* ===== Hero: o filme em três atos (pedido, Studio montando, site no ar) ===== */
.sv-hero__grade { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
.sv-filme { display: grid; gap: 14px; min-width: 0; }
.sv-filme__palco { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--sv-raio-g); background: #0b0b0c; isolation: isolate; }
.sv-filme__tela { position: absolute; inset: 0; opacity: 0; }
.sv-filme__tela.is-ativa { opacity: 1; }
.sv-filme__tela video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b0b0c; }
.sv-filme__ato { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; opacity: 0; visibility: hidden; }
.sv-filme__chat, .sv-filme__painel { width: min(520px, 88%); display: grid; gap: 14px; padding: 22px 24px; border-radius: var(--sv-raio-g); background: #18181b; color: #f4f4f5; border: 1px solid #2a2a2e; }
.sv-filme__quem { display: flex; align-items: center; gap: 10px; color: #a1a1aa; font-size: 14px; }
.sv-filme__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--sv-raio-p); flex: 0 0 auto; }
.sv-filme__av svg { width: 60%; height: 60%; }
.sv-filme__av--studio { background: var(--sv-lima); }
.sv-filme__av--studio .sv-ponto { fill: #151414; }
.sv-filme__prompt { min-height: 3em; margin: 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; letter-spacing: -0.01em; color: #fafafa; }
.sv-filme__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--sv-lima); animation: sv-caret 1s steps(1) infinite; }
@keyframes sv-caret { 50% { opacity: 0; } }
.sv-filme__estado { margin-left: auto; color: var(--sv-lima); font-size: 13px; }
.sv-filme__passos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv-filme__passos li { display: flex; align-items: center; gap: 10px; color: #d4d4d8; font-size: 15px; }
.sv-filme__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #2a2a2e; color: #151414; transition: background-color .3s cubic-bezier(.4,0,.6,1); }
.sv-filme__ok .hi { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity .24s, transform .4s cubic-bezier(.2,.8,.2,1); }
.sv-filme__passos li.is-feito .sv-filme__ok { background: var(--sv-lima); }
.sv-filme__passos li.is-feito .sv-filme__ok .hi { opacity: 1; transform: none; }
.sv-filme__barra { height: 4px; border-radius: 2px; background: #2a2a2e; overflow: hidden; }
.sv-filme__barra span { display: block; height: 100%; width: 100%; background: var(--sv-lima); transform-origin: left; transform: scaleX(0); }
.sv-filme__selo { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: var(--sv-raio-g); background: rgb(12 12 13 / .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 14px; }
.sv-filme__selo span { padding: 3px 9px; border-radius: var(--sv-raio-p); background: var(--sv-lima); color: #151414; font-weight: 600; font-size: 13px; }
.sv-filme__selo strong { font-weight: 500; }
.sv-filme__controles { display: flex; align-items: center; gap: 8px; }
.sv-filme__sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; flex: 1; }
.sv-filme__site { display: grid; gap: 8px; padding: 10px 2px 0; border: 0; background: none; text-align: left; color: var(--t-base-mt, #8a8a8f); font-size: 14px; cursor: pointer; transition: color .2s; }
.sv-filme__site[aria-selected="true"], .sv-filme__site:hover { color: var(--t-base-br); }
.sv-filme__prog { display: block; height: 3px; border-radius: 2px; background: var(--st-base, #ddd); overflow: hidden; }
.sv-filme__prog i { display: block; height: 100%; background: var(--t-base-br); transform-origin: left; transform: scaleX(0); }
.sv-filme__pausa { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--sv-raio-p); background: var(--base-tint); color: var(--t-base-br); cursor: pointer; transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .25s; }
.sv-filme__pausa:hover { transform: translateY(-2px); filter: brightness(.93); }
.sv-filme__pausa .hi { width: 18px; height: 18px; }
.sv-filme__site:focus-visible, .sv-filme__pausa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* sem JS: o site e o selo aparecem; as abas viram só rótulo */
.sv-filme:not(.is-pronto) .sv-filme__controles .sv-filme__pausa { display: none; }
@media (max-width: 991px) { .sv-hero__grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) {
  .sv-filme__chat, .sv-filme__painel { padding: 14px 16px; gap: 10px; width: 92%; }
  .sv-filme__prompt { font-size: 15px; }
  .sv-filme__passos li { font-size: 13px; }
  .sv-filme__passos li:nth-child(n+4) { display: none; }
  .sv-filme__selo { left: 10px; bottom: 10px; font-size: 12px; }
  .sv-filme__site { font-size: 13px; }
}

/* Acessibilidade: texto de apoio com contraste de 4,5:1 ou mais (o cinza do modelo dava 3,9) */
:root, :root[data-color-scheme="light"] { --t-base-mt--light: #646161; --t-tint-mt--light: #646161; }


/* ===== Hero em tela cheia: o filme é o hero ===== */
.sv-hero--cheio { padding: 12px 12px var(--sv-gap); }
.sv-filme--cheio { display: block; }
.sv-filme--cheio .sv-filme__palco { aspect-ratio: auto; height: calc(100svh - 24px); min-height: 620px; max-height: 1100px; }
.sv-filme--cheio .sv-filme__tela video { object-fit: cover; object-position: top center; }
.sv-filme__veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgb(8 8 9 / .7) 0%, rgb(8 8 9 / 0) 26%); }
.sv-filme--cheio .sv-filme__ato { z-index: 2; }
.sv-filme--cheio .sv-filme__chat, .sv-filme--cheio .sv-filme__painel { width: min(600px, 88%); padding: 26px 28px; gap: 16px; }
.sv-filme--cheio .sv-filme__prompt { font-size: clamp(18px, 1.7vw, 26px); }
.sv-filme--cheio .sv-filme__passos li { font-size: 17px; }
.sv-filme--cheio .sv-filme__selo { z-index: 3; left: 28px; bottom: 96px; padding: 10px 14px 10px 10px; font-size: 15px; }
.sv-filme--cheio .sv-filme__controles { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 24px; }
.sv-filme--cheio .sv-filme__site { color: rgb(255 255 255 / .72); }
.sv-filme--cheio .sv-filme__site[aria-selected="true"], .sv-filme--cheio .sv-filme__site:hover { color: #fff; }
.sv-filme--cheio .sv-filme__prog { background: rgb(255 255 255 / .22); }
.sv-filme--cheio .sv-filme__prog i { background: #fff; }
.sv-filme--cheio .sv-filme__pausa { background: rgb(255 255 255 / .14); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Versão com o texto por cima: texto à esquerda, os atos à direita, véu escuro atrás do texto */
.sv-filme--texto .sv-filme__veu { background: linear-gradient(90deg, rgb(8 8 9 / .9) 0%, rgb(8 8 9 / .72) 34%, rgb(8 8 9 / .1) 64%, rgb(8 8 9 / 0) 100%), linear-gradient(0deg, rgb(8 8 9 / .7) 0%, rgb(8 8 9 / 0) 26%); }
.sv-filme--texto .sv-filme__ato { justify-items: end; padding: 6% 5% 6% 50%; }
.sv-filme--texto .sv-filme__chat, .sv-filme--texto .sv-filme__painel { width: min(520px, 100%); }
.sv-hero__sobre { position: absolute; z-index: 3; left: clamp(24px, 4vw, 64px); top: 50%; transform: translateY(-54%); display: grid; gap: 26px; justify-items: start; width: min(600px, 44%); color: #fff; }
.sv-hero--cheio .sv-hero__para { color: rgb(255 255 255 / .82); }
.sv-hero--cheio .sv-hero__para .sv-ponto { fill: var(--sv-lima); }
.sv-hero--cheio .sv-hero__titulo { color: #fff; max-width: 11ch; font-size: clamp(44px, 5.6vw, 92px) !important; }
.sv-hero--cheio .sv-hero__frase { color: rgb(255 255 255 / .86); }
.sv-hero--cheio .sv-hero__ias { color: rgb(255 255 255 / .72); }
.sv-hero--cheio .sv-hero__sobre > * { animation: sv-sobe .9s cubic-bezier(.2,.8,.2,1) both; }
.sv-hero--cheio .sv-hero__sobre > :nth-child(2) { animation-delay: .08s; } .sv-hero--cheio .sv-hero__sobre > :nth-child(3) { animation-delay: .16s; }
.sv-hero--cheio .sv-hero__sobre > :nth-child(4) { animation-delay: .24s; } .sv-hero--cheio .sv-hero__sobre > :nth-child(5) { animation-delay: .32s; }
.sv-filme--texto .sv-filme__selo { left: auto; right: 28px; }

@media (max-width: 991px) {
  .sv-filme--texto .sv-filme__veu { background: linear-gradient(180deg, rgb(8 8 9 / .9) 0%, rgb(8 8 9 / .7) 46%, rgb(8 8 9 / .2) 72%, rgb(8 8 9 / .75) 100%); }
  .sv-hero__sobre { top: 104px; transform: none; width: auto; right: 24px; gap: 18px; }
  .sv-filme--texto .sv-filme__ato { place-items: end center; padding: 0 5% 150px; }
}
@media (max-width: 767px) {
  .sv-hero--cheio { padding: 8px 8px var(--sv-gap); }
  .sv-filme--cheio .sv-filme__palco { height: calc(100svh - 16px); min-height: 640px; }
  .sv-filme--cheio .sv-filme__controles { left: 16px; right: 16px; bottom: 16px; }
  .sv-filme--cheio .sv-filme__selo { left: 16px; bottom: 78px; }
  .sv-filme--texto .sv-filme__selo { left: 16px; right: auto; }
  .sv-hero__sobre { left: 20px; right: 20px; top: 96px; }
  .sv-hero__sobre .sv-hero__ias { display: none; }
  .sv-filme--cheio .sv-filme__chat, .sv-filme--cheio .sv-filme__painel { padding: 16px 18px; }
  .sv-filme--cheio .sv-filme__prompt { font-size: 16px; }
  .sv-filme--cheio .sv-filme__passos li { font-size: 14px; }
}
/* Celular: a tela é estreita demais para o site em tela cheia. O site aparece inteiro, em 16:10, dentro do banner */
@media (max-width: 767px) {
  .sv-filme--cheio .sv-filme__tela { inset: auto 12px 132px 12px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; }
  .sv-filme--cheio .sv-filme__tela video { object-fit: cover; object-position: top center; }
  .sv-filme--cheio:not(.sv-filme--texto) .sv-filme__tela { top: 50%; bottom: auto; transform: translateY(-50%); }
  .sv-filme--cheio .sv-filme__selo { bottom: 82px; }
  .sv-filme--texto .sv-filme__veu { background: linear-gradient(180deg, rgb(8 8 9 / .0) 0%, rgb(8 8 9 / 0) 100%); }
  .sv-filme--texto .sv-filme__ato { padding: 0 12px 132px; place-items: end center; }
  .sv-filme--texto .sv-filme__chat, .sv-filme--texto .sv-filme__painel { width: 100%; }
}
@media (min-width: 992px) {
  .sv-filme--texto .sv-filme__veu { background: linear-gradient(90deg, rgb(8 8 9 / .94) 0%, rgb(8 8 9 / .86) 36%, rgb(8 8 9 / .25) 62%, rgb(8 8 9 / 0) 100%), linear-gradient(0deg, rgb(8 8 9 / .7) 0%, rgb(8 8 9 / 0) 26%); }
}
@media (max-width: 767px) {
  .sv-filme--cheio:not(.sv-filme--texto) .sv-filme__selo { bottom: auto; top: calc(50% + (100vw - 40px) * 0.3125 + 14px); }
}


/* ===== Abas dos sites menores (as três versões) ===== */
.sv-filme--cheio .sv-filme__controles { left: auto; right: 28px; gap: 10px; }
.sv-filme--cheio .sv-filme__sites { display: flex; flex: 0 0 auto; gap: 10px; }
.sv-filme--cheio .sv-filme__site { width: 76px; gap: 6px; padding-top: 6px; font-size: 12px; }
.sv-filme--cheio .sv-filme__prog { height: 2px; }
.sv-filme--cheio .sv-filme__pausa { width: 32px; height: 32px; }
.sv-filme--cheio .sv-filme__pausa .hi { width: 15px; height: 15px; }
.sv-filme--cheio .sv-filme__selo { bottom: 24px; }
.sv-filme--texto .sv-filme__selo { left: 28px; right: auto; }

/* ===== Versão com rodapé: título curto, ação e "pular" ===== */
.sv-filme__rodape { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 28px 28px 28px; color: #fff; }
.sv-filme--rodape .sv-filme__veu { background: linear-gradient(0deg, rgb(8 8 9 / .92) 0%, rgb(8 8 9 / .7) 18%, rgb(8 8 9 / 0) 42%); }
.sv-filme__rodape-texto { display: grid; gap: 8px; max-width: 640px; }
.sv-filme__rodape-titulo { margin: 0; font-family: var(--_font-accent); font-size: clamp(28px, 3vw, 44px) !important; font-weight: 600; line-height: 1; letter-spacing: -0.045em; color: #fff; text-transform: none; }
.sv-filme__rodape-texto p { color: rgb(255 255 255 / .82); font-size: 17px; line-height: 1.45; }
.sv-filme__rodape-acoes { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.sv-filme__pular { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; text-decoration: none; opacity: .86; transition: opacity .2s; }
.sv-filme__pular:hover { opacity: 1; }
.sv-filme__pular .hi { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.sv-filme__pular:hover .hi { transform: translateY(3px); }
.sv-filme__pular:focus-visible { outline: 2px solid var(--sv-lima); outline-offset: 4px; border-radius: 4px; }
.sv-filme--rodape .sv-filme__selo { bottom: 150px; }
.sv-filme--rodape .sv-filme__controles { bottom: 150px; }
.sv-filme--rodape .sv-filme__ato { padding-bottom: 150px; }
@media (max-width: 767px) {
  .sv-filme--cheio .sv-filme__controles { right: 16px; left: auto; }
  .sv-filme--cheio .sv-filme__site { width: 62px; }
  .sv-filme__rodape { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 16px; }
  .sv-filme__rodape-texto p { font-size: 15px; }
  .sv-filme__rodape-acoes { justify-content: space-between; }
  .sv-filme--rodape .sv-filme__controles { bottom: auto; top: 76px; }
  .sv-filme--rodape .sv-filme__tela { top: 130px; bottom: auto; transform: none; }
  .sv-filme--rodape .sv-filme__selo { top: calc(130px + (100vw - 40px) * 0.625 + 14px); bottom: auto; }
  .sv-filme--rodape .sv-filme__ato { place-items: start center; padding: 130px 12px 0; }
}

/* ===== Header: transparente com itens brancos sobre o hero, branco depois. Logo à esquerda, ações à direita ===== */
.mxd-nav-exp__logo { position: static; width: auto; order: 0; margin-right: auto; padding-left: 10px !important; }
.mxd-nav-exp__logo svg { width: 150px; }
.mxd-nav-exp__menu { order: 1; margin-right: 6px; }
.mxd-nav-exp__controls { order: 2; }
.mxd-nav-exp__bg, .mxd-nav-exp__stroke, .nav-exp-menu__label, .nav-exp-menu__hamburger-bar, .mxd-nav-exp__logo svg, .mxd-color-switcher { transition: background-color .35s cubic-bezier(.4,0,.6,1), opacity .35s, color .35s, fill .35s; }
.sv-nav--sobre[data-menu-state="closed"] .mxd-nav-exp__bg { background-color: transparent; }
.sv-nav--sobre[data-menu-state="closed"] .mxd-nav-exp__stroke { opacity: 0; }
.sv-nav--sobre[data-menu-state="closed"] .nav-exp-menu__label { color: #fff; }
.sv-nav--sobre[data-menu-state="closed"] .nav-exp-menu__hamburger-bar { background-color: #fff; }
.sv-nav--sobre[data-menu-state="closed"] .mxd-nav-exp__logo .sv-logo { fill: #fff; }
.sv-nav--sobre[data-menu-state="closed"] .mxd-nav-exp__logo .sv-asterisco { fill: var(--sv-lima); }
.sv-nav--sobre[data-menu-state="closed"] .mxd-color-switcher { background-color: rgb(255 255 255 / .14); color: #fff; }
.sv-filme--cheio .sv-filme__nome { white-space: nowrap; }
@media (max-width: 767px) { .sv-filme--cheio .sv-filme__site { width: auto; min-width: 54px; } }
/* véu no topo (o header transparente lê bem sobre qualquer site) e no rodapé mais forte */
.sv-filme--cheio:not(.sv-filme--texto):not(.sv-filme--rodape) .sv-filme__veu { background: linear-gradient(180deg, rgb(8 8 9 / .65) 0%, rgb(8 8 9 / 0) 18%), linear-gradient(0deg, rgb(8 8 9 / .7) 0%, rgb(8 8 9 / 0) 26%); }
.sv-filme--rodape .sv-filme__veu { background: linear-gradient(180deg, rgb(8 8 9 / .65) 0%, rgb(8 8 9 / 0) 18%), linear-gradient(0deg, rgb(8 8 9 / .96) 0%, rgb(8 8 9 / .86) 22%, rgb(8 8 9 / 0) 50%); }
@media (min-width: 992px) {
  .sv-filme--texto .sv-filme__veu { background: linear-gradient(180deg, rgb(8 8 9 / .65) 0%, rgb(8 8 9 / 0) 18%), linear-gradient(90deg, rgb(8 8 9 / .94) 0%, rgb(8 8 9 / .86) 36%, rgb(8 8 9 / .25) 62%, rgb(8 8 9 / 0) 100%), linear-gradient(0deg, rgb(8 8 9 / .7) 0%, rgb(8 8 9 / 0) 26%); }
}

/* ===== Revamp sóbrio (12/11): o tom do cartão do Claude no hero vale para a página inteira.
   Fundo grafite, superfícies um tom acima com borda fina, texto branco e cinza.
   Roxo e lima saem dos blocos grandes; o lima fica só nos detalhes (cursor, conferido, progresso). */
:root, [data-color-scheme=dark] {
  --base--dark: #0c0c0d; --base-rgb--dark: 12, 12, 13; --base-tint--dark: #161618; --base-tint-rgb--dark: 22, 22, 24; --base-shade--dark: #111112;
  --accent--dark: #f4f4f5; --accent-shade--dark: #d9d9dc; --t-accent-br--dark: #0c0c0d; --t-accent-md--dark: #3f3f46;
  --additional--dark: #1b1b1e; --t-additional-br--dark: #f4f4f5; --t-additional-md--dark: #a1a1aa;
  --lime-var--dark: #202023; --t-lime-var-br--dark: #f4f4f5; --t-lime-var-md--dark: #a1a1aa;
  --t-base-br--dark: #f4f4f5; --t-base-md--dark: #c8c8cd; --t-base-mt--dark: #8c8c94; --t-base-mt-extra--dark: #34343a;
  --t-tint-br--dark: #f4f4f5; --t-tint-md--dark: #a1a1aa; --t-tint-mt--dark: #8c8c94;
  --st-base--dark: #26262a; --st-base-rgb--dark: 38, 38, 42; --st-tint--dark: #2e2e33;
  --btn-base--dark: #1b1b1e; --btn-tint--dark: #26262a;
  --btn-lime-var--dark: #f4f4f5; --btn-lime-var-t-br--dark: #0c0c0d;
  --base--light: #fafafa; --base-tint--light: #f1f1f2; --accent--light: #111112; --accent-shade--light: #2a2a2e; --t-accent-br--light: #fafafa; --t-accent-md--light: #c8c8cd;
  --additional--light: #ececee; --t-additional-br--light: #111112; --t-additional-md--light: #55555c;
  --lime-var--light: #e6e6e9; --t-lime-var-br--light: #111112; --t-lime-var-md--light: #55555c;
  --btn-lime-var--light: #111112; --btn-lime-var-t-br--light: #fafafa;
  --pt-purple: var(--additional); --pt-t-purple-br: var(--t-additional-br); --pt-t-purple-md: var(--t-additional-md); --pt-st-purple: var(--st-base);
  --pt-btn-purple: var(--btn-tint); --pt-btn-purple-t-br: var(--t-base-br); --pt-btn-purple-t-md: var(--t-base-mt);
  --pt-lime: var(--accent); --pt-lime-shade: var(--accent-shade); --pt-t-lime-br: var(--t-accent-br); --pt-t-lime-md: var(--t-accent-md);
  --pt-btn-lime: var(--accent); --pt-btn-lime-t-br: var(--t-accent-br);
  --pt-lavender: var(--base-tint); --pt-t-lavender-br: var(--t-base-br); --pt-t-lavender-md: var(--t-base-mt); --pt-t-lavender-mt: var(--t-base-mt);
}
/* superfícies: um tom acima do fundo, borda de 1px, como o cartão do Claude */
:is(.mxd-services-card, .sv-des__item, .sv-notas, .sv-sanfona details, .mxd-blog-preview__item, .sv-servico, .sv-dentro__moldura, .sv-moldura) { box-shadow: inset 0 0 0 1px var(--st-base); }
/* botões principais: claro sobre o escuro, sem neon */
.btn-lime, .btn-accent, .mxd-header-controls__btn { background-color: var(--accent) !important; color: var(--t-accent-br) !important; }
.btn-lime .btn-text, .btn-accent .btn-text, .mxd-header-controls__btn .btn-text, .mxd-header-controls__btn .sv-hi { color: var(--t-accent-br) !important; }
/* ícones e marcadores: superfície neutra, traço claro, lima só no detalhe */
.sv-passo-ic, .sv-btn-ic, .mxd-services-card .sv-icone, .mxd-services-card.lime-var .sv-icone { background: var(--btn-tint) !important; color: var(--t-base-br) !important; }
.sv-chip--lima { background: transparent; color: var(--t-base-br); border-color: var(--st-tint); }
.sv-des__ic { background: var(--btn-tint); color: var(--t-base-br); }
.mxd-tag { background-color: transparent !important; box-shadow: inset 0 0 0 1px var(--st-tint); color: var(--t-base-md) !important; }
/* menu transparente sobre o hero: o hover clareia o fundo, então o texto escurece junto */
.no-touch .sv-nav--sobre[data-menu-state="closed"] .nav-exp-menu:hover { background-color: rgb(255 255 255 / .14); }
.no-touch .sv-nav--sobre[data-menu-state="closed"] .nav-exp-menu:hover .nav-exp-menu__label { color: #fff; }
/* botão do tema dentro do menu, do mesmo tamanho dos atalhos */
.sv-tema-menu { width: auto; height: auto; aspect-ratio: 1; min-width: 44px; min-height: 44px; background-color: var(--btn-tint) !important; color: var(--t-base-br) !important; border-radius: var(--sv-raio-p) !important; }

/* nada vaza para os lados no celular de 320px (as abas do Studio por dentro passavam 40px) */
html, body { overflow-x: clip !important; }
body { min-width: 0 !important; } /* o modelo travava o corpo em 360px */

/* Menu: três sites em carrossel no cartão da esquerda */
.sv-carrossel { aspect-ratio: 16 / 10; background: var(--base-tint); border-radius: var(--sv-raio-g) !important; border-color: var(--st-base) !important; }
.sv-carrossel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s cubic-bezier(.4,0,.6,1), transform 1.2s cubic-bezier(.2,.8,.2,1); }
.sv-carrossel__slide:not(.is-ativo) { visibility: hidden; transition: opacity .7s cubic-bezier(.4,0,.6,1), transform 1.2s cubic-bezier(.2,.8,.2,1), visibility 0s .7s; }
.sv-carrossel__slide.is-ativo { opacity: 1; transform: none; }
.sv-carrossel__slide img, .sv-carrossel__slide video { width: 100%; height: 100% !important; object-fit: cover; object-position: top; border-radius: 0 !important; }
.sv-carrossel__slide figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: var(--sv-raio-p); background: rgb(12 12 13 / .8); color: #f4f4f5; font-size: 13px; line-height: 1.3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sv-carrossel__pontos { position: absolute; right: 12px; bottom: 14px; display: flex; gap: 5px; }
.sv-carrossel__pontos span { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .4); transition: background-color .3s, transform .3s; }
.sv-carrossel__pontos span.is-ativo { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .sv-carrossel__slide { transition: none; transform: none; } }

/* Chamada final: a parede de vídeos é escura nos dois temas, então tags e botão têm cores fixas */
.sv-tv .mxd-tag { background-color: rgb(12 12 13 / .64) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); color: #d4d4d8 !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sv-tv .btn { background-color: #f4f4f5 !important; color: #0c0c0d !important; }
.sv-tv .btn .btn-text, .sv-tv .btn .btn-caption { color: #0c0c0d !important; }
.sv-tv .btn .btn-pic { background: #0c0c0d !important; color: #f4f4f5 !important; }

/* Menu: o fio fica no miolo arredondado (no quadro de fora sobravam cantinhos) */
.mxd-nav-exp__card { box-shadow: none !important; }
.mxd-nav-exp__card .nav-exp-card__inner { box-shadow: inset 0 0 0 1px var(--st-base); }
/* Menu: altura de linha que não corta o "g" e o "ç", e um fio só entre os itens */
.main-menu__link { line-height: 1.2 !important; }
.main-menu__item + .main-menu__item > .main-menu__divider.divider-top { display: none; }

/* Carrossel em círculo: cartões em 16:10, a mesma proporção das telas, para nenhum print sair cortado */
.marquee-radial__item { aspect-ratio: 16 / 10 !important; }

/* Cartões de Recursos e da agência: visual do template de antes do tema escuro (pedido do dono em 12/11), com os prints atuais */
:is(#recursos .mxd-services-card, #agencias .mxd-services-card, #loja > *) {
  --base--light: #F3F3F3;
  --base-rgb--light: 243, 243, 243;
  --base-tint--light: #FFFFFF;
  --base-tint-rgb--light: 255, 255, 255;
  --base-shade--light: #E8E8E8;
  --accent--light: #8355F7;
  --accent-shade--light: #4112B6;
  --additional--light: #D8FF63;
  --lime-var--light: #D8FF63;
  --t-base-br--light: #191818;
  --t-base-md--light: #444444;
  --t-base-mt--light: #7C7979;
  --t-base-mt-extra--light: #D3D3D3;
  --t-tint-br--light: #1D1D1F;
  --t-tint-md--light: #4C4B4B;
  --t-tint-mt--light: #7C7979;
  --t-tint-mt-extra--light: #979797;
  --t-shade-br--light: #090808;
  --t-shade-md--light: #403E3E;
  --t-accent-br--light: #FFFFFF;
  --t-accent-md--light: #E4DDF5;
  --t-additional-br--light: #151414;
  --t-additional-md--light: #616651;
  --t-lime-var-br--light: #151414;
  --t-lime-var-md--light: #616651;
  --st-base--light: #D9D5D4;
  --st-base-rgb--light: 217, 213, 212;
  --st-tint--light: #DDDDDD;
  --btn-base--light: #E3E2E2;
  --btn-base-t-br--light: #222121;
  --btn-base-t-md--light: #484646;
  --btn-tint--light: #EEEEEE;
  --btn-tint-t-br--light: #090808;
  --btn-tint-t-md--light: #484646;
  --btn-lime-var--light: #c4e269;
  --btn-lime-var-t-br--light: #191818;
  --base--dark: #1D1C1C;
  --base-rgb--dark: 29, 28, 28;
  --base-tint--dark: #2A2828;
  --base-tint-rgb--dark: 42, 40, 40;
  --base-shade--dark: #171616;
  --accent--dark: #BCF14B;
  --accent-shade--dark: #9BDB11;
  --additional--dark: #8355F7;
  --lime-var--dark: #BCF14B;
  --t-base-br--dark: #F4F4F4;
  --t-base-md--dark: #C4C1C1;
  --t-base-mt--dark: #848080;
  --t-base-mt-extra--dark: #3B3939;
  --t-tint-br--dark: #FFFFFF;
  --t-tint-md--dark: #979696;
  --t-tint-mt--dark: #605E5E;
  --t-tint-mt-extra--dark: #504F4F;
  --t-shade-br--dark: #E8E7E7;
  --t-shade-md--dark: #A7A5A5;
  --t-accent-br--dark: #191818;
  --t-accent-md--dark: #404A29;
  --t-additional-br--dark: #FFFFFF;
  --t-additional-md--dark: #E4DDF5;
  --t-lime-var-br--dark: #191818;
  --t-lime-var-md--dark: #404A29;
  --st-base--dark: #3D3B3B;
  --st-base-rgb--dark: 61, 59, 59;
  --st-tint--dark: #434141;
  --btn-base--dark: #2A2828;
  --btn-base-t-br--dark: #F5F3F3;
  --btn-base-t-md--dark: #A2A1A1;
  --btn-tint--dark: #3A3737;
  --btn-tint-t-br--dark: #FFFFFF;
  --btn-tint-t-md--dark: #999797;
  --btn-lime-var--dark: #AFE049;
  --btn-lime-var-t-br--dark: #1D1D1F;
  --pt-purple: #7543F2;
  --pt-t-purple-br: #FFFFFF;
  --pt-t-purple-md: #E4DDF5;
  --pt-st-purple: #8b5dfe;
  --pt-btn-purple: #6036C8;
  --pt-btn-purple-t-br: #F5F3F3;
  --pt-btn-purple-t-md: #BAA8E7;
  --pt-lime: #BCF14B;
  --pt-lime-shade: #9BDB11;
  --pt-t-lime-br: #191818;
  --pt-t-lime-md: #404A29;
  --pt-btn-lime: #AFE049;
  --pt-btn-lime-t-br: #1D1D1F;
  --pt-lavender: #D4C2FF;
  --pt-t-lavender-br: #151414;
  --pt-t-lavender-md: #504B51;
  --pt-t-lavender-mt: #816BB5;
  --pt-red: #D0311E;
  --pt-green: #98F160;
  --pt-yellow: #E1A819;
  --pt-t-light-br: #FFFFFF;
  --pt-btn-light: #F3F3F3;
  --pt-btn-light-t-br: #222121;
  --nl-white: #ffffff;
  --nl-black: #000000;
}
[data-color-scheme=light] :is(#recursos .mxd-services-card, #agencias .mxd-services-card, #loja > *) {
  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light);
  --base-tint-rgb: var(--base-tint-rgb--light);
  --base-shade: var(--base-shade--light);
  --accent: var(--accent--light);
  --accent-shade: var(--accent-shade--light);
  --additional: var(--additional--light);
  --lime-var: var(--lime-var--light);
  --t-base-br: var(--t-base-br--light);
  --t-base-md: var(--t-base-md--light);
  --t-base-mt: var(--t-base-mt--light);
  --t-base-mt-extra: var(--t-base-mt-extra--light);
  --t-tint-br: var(--t-tint-br--light);
  --t-tint-md: var(--t-tint-md--light);
  --t-tint-mt: var(--t-tint-mt--light);
  --t-tint-mt-extra: var(--t-tint-mt-extra--light);
  --t-shade-br: var(--t-shade-br--light);
  --t-shade-md: var(--t-shade-md--light);
  --t-accent-br: var(--t-accent-br--light);
  --t-accent-md: var(--t-accent-md--light);
  --t-additional-br: var(--t-additional-br--light);
  --t-additional-md: var(--t-additional-md--light);
  --t-lime-var-br: var(--t-lime-var-br--light);
  --t-lime-var-md: var(--t-lime-var-md--light);
  --st-base: var(--st-base--light);
  --st-base-rgb: var(--st-base-rgb--light);
  --st-tint: var(--st-tint--light);
  --btn-base: var(--btn-base--light);
  --btn-base-t-br: var(--btn-base-t-br--light);
  --btn-base-t-md: var(--btn-base-t-md--light);
  --btn-tint: var(--btn-tint--light);
  --btn-tint-t-br: var(--btn-tint-t-br--light);
  --btn-tint-t-md: var(--btn-tint-t-md--light);
  --btn-lime-var: var(--btn-lime-var--light);
  --btn-lime: var(--btn-lime-var-t-br--light);
}
[data-color-scheme=dark] :is(#recursos .mxd-services-card, #agencias .mxd-services-card, #loja > *) {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-tint-rgb: var(--base-tint-rgb--dark);
  --base-shade: var(--base-shade--dark);
  --accent: var(--accent--dark);
  --accent-shade: var(--accent-shade--dark);
  --additional: var(--additional--dark);
  --lime-var: var(--lime-var--dark);
  --t-base-br: var(--t-base-br--dark);
  --t-base-md: var(--t-base-md--dark);
  --t-base-mt: var(--t-base-mt--dark);
  --t-base-mt-extra: var(--t-base-mt-extra--dark);
  --t-tint-br: var(--t-tint-br--dark);
  --t-tint-md: var(--t-tint-md--dark);
  --t-tint-mt: var(--t-tint-mt--dark);
  --t-tint-mt-extra: var(--t-tint-mt-extra--dark);
  --t-shade-br: var(--t-shade-br--dark);
  --t-shade-md: var(--t-shade-md--dark);
  --t-accent-br: var(--t-accent-br--dark);
  --t-accent-md: var(--t-accent-md--dark);
  --t-additional-br: var(--t-additional-br--dark);
  --t-additional-md: var(--t-additional-md--dark);
  --t-lime-var-br: var(--t-lime-var-br--dark);
  --t-lime-var-md: var(--t-lime-var-md--dark);
  --st-base: var(--st-base--dark);
  --st-base-rgb: var(--st-base-rgb--dark);
  --st-tint: var(--st-tint--dark);
  --btn-base: var(--btn-base--dark);
  --btn-base-t-br: var(--btn-base-t-br--dark);
  --btn-base-t-md: var(--btn-base-t-md--dark);
  --btn-tint: var(--btn-tint--dark);
  --btn-tint-t-br: var(--btn-tint-t-br--dark);
  --btn-tint-t-md: var(--btn-tint-t-md--dark);
  --btn-lime-var: var(--btn-lime-var--dark);
  --btn-lime-var-t-br: var(--btn-lime-var-t-br--dark);
}
:is(#recursos, #agencias) .mxd-services-card { box-shadow: none !important; }
/* ícones com cor fixa: no capítulo escuro o --accent vira lima e o ícone sumia (1,3:1). Agora 3 casos, todos acima de 7:1. */
:is(#recursos, #agencias) .mxd-services-card.tint .sv-icone { background: #BCF14B !important; color: #1D1D1F !important; }
:is(#recursos, #agencias) .mxd-services-card.lime-var .sv-icone { background: #151414 !important; color: #BCF14B !important; }
:is(#recursos, #agencias) .mxd-services-card.purple .sv-icone { background: #fff !important; color: #6036C8 !important; }
:is(#recursos, #agencias) .sv-icone svg :is(path, circle, rect, line, polyline) { stroke: currentColor; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag { box-shadow: none !important; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag-purple-dark { background-color: var(--pt-btn-purple) !important; color: var(--pt-btn-purple-t-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag-purple { background-color: var(--pt-purple) !important; color: var(--pt-t-purple-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag-tint { background-color: var(--btn-tint) !important; color: var(--btn-tint-t-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag-base { background-color: var(--btn-base) !important; color: var(--btn-base-t-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag-lime-var { background-color: var(--lime-var) !important; color: var(--t-lime-var-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .mxd-tag-lime-var-dark { background-color: var(--btn-lime-var) !important; color: var(--btn-lime-var-t-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .btn-lime { background-color: var(--pt-btn-lime) !important; color: var(--pt-btn-lime-t-br) !important; }
:is(#recursos, #agencias) .mxd-services-card .btn-lime .btn-text { color: var(--pt-btn-lime-t-br) !important; }

#loja .sv-servico { box-shadow: none !important; }
#loja { background-color: var(--base); }
#loja .sv-servico__img { border-color: transparent; }

/* CTAs com cor (13/11): lima e roxo da marca, iguais nos dois temas.
   Lima: botão principal. Roxo: o primeiro de cada dupla e o do topo. Os quadrados de ícone ficam neutros. */
:root { --sv-cta-lima: #BCF14B; --sv-cta-lima-t: #1D1D1F; --sv-cta-roxo: #6036C8; --sv-cta-roxo-t: #F5F3F3; }
.btn.btn-lime, .btn.btn-base, .sv-tv .btn { background-color: var(--sv-cta-lima) !important; color: var(--sv-cta-lima-t) !important; }
.btn.btn-lime :is(.btn-text, .btn-caption, .sv-hi), .btn.btn-base :is(.btn-text, .btn-caption, .sv-hi), .sv-tv .btn :is(.btn-text, .btn-caption, .sv-hi) { color: var(--sv-cta-lima-t) !important; }
.btn.btn-accent, .btn.btn-purple, .btn.btn-square-accent, .mxd-header-controls__btn { background-color: var(--sv-cta-roxo) !important; color: var(--sv-cta-roxo-t) !important; }
:is(.btn.btn-accent, .btn.btn-purple, .btn.btn-square-accent, .mxd-header-controls__btn) :is(.btn-text, .btn-caption, .sv-hi) { color: var(--sv-cta-roxo-t) !important; }
:is(.btn.btn-lime, .btn.btn-base, .sv-tv .btn) .btn-pic { background: var(--sv-cta-lima-t) !important; color: var(--sv-cta-lima) !important; }
:is(.btn.btn-accent, .btn.btn-purple) .btn-pic { background: var(--sv-cta-roxo-t) !important; color: var(--sv-cta-roxo) !important; }

/* Ritmo de fundos (13/11, relatório "Fundos para separar seções"):
   base em quase tudo; um capítulo escuro de ponta a ponta (Site e loja, Recursos, Desempenho), igual nos dois temas,
   com brilho roxo e lima que some antes da borda, então as três seções emendam sem costura;
   palco das IAs em roxo escuro, chamada final preta, rodapé roxo. */
/* 13/11: as três seções ficam dentro de .sv-capitulo, que pinta um fundo só, sem emenda.
   Os brilhos têm tamanho em px e ficam espalhados pela altura do bloco, rolando junto com a página. */
.sv-capitulo {
  margin-bottom: var(--sv-gap);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(900px 700px at 6% 360px, rgb(131 85 247 / .8), rgb(131 85 247 / 0) 70%),
    radial-gradient(820px 720px at 96% 1100px, rgb(64 36 168 / .9), rgb(64 36 168 / 0) 70%),
    radial-gradient(760px 640px at 82% 38%, rgb(188 241 75 / .22), rgb(188 241 75 / 0) 70%),
    radial-gradient(940px 760px at 10% 58%, rgb(96 54 200 / .75), rgb(96 54 200 / 0) 70%),
    radial-gradient(860px 700px at 92% 80%, rgb(131 85 247 / .6), rgb(131 85 247 / 0) 70%),
    radial-gradient(760px 600px at 20% 97%, rgb(188 241 75 / .2), rgb(188 241 75 / 0) 70%),
    linear-gradient(180deg, #2a1663 0%, #1d1048 50%, #160c38 100%);
}
.sv-capitulo :is(#loja, #recursos, #desempenho) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#desempenho { padding-bottom: var(--sv-gap) !important; }
/* cartões do capítulo: superfície de vidro escuro sobre a cor, para o texto ter contraste */
#desempenho :is(.sv-des__item, .sv-notas), #loja .sv-servico { background-color: rgb(14 10 28 / .72) !important; border-color: rgb(255 255 255 / .1) !important; box-shadow: none !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#desempenho p, #recursos .mxd-section-title p, #loja .sv-loja p { color: #d6d1ea; }
.sv-apps { background: #1a1230; }
/* cartões de sites: só o print, sem véu escuro, com canto e sombra */
#sites .card__cover { display: none !important; }
#sites .card__image { box-shadow: 0 24px 60px -20px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 0 0 / .06); }
/* prints: só a tela, com canto e sombra; sem zoom, sem moldura */
.mxd-about-pinned__item, #passos .mxd-blog-preview__media, .mxd-services-card__image, .sv-servico__img { box-shadow: 0 18px 44px -18px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .06); }
.mxd-about-pinned__item img { transform: none !important; }
#passos .mxd-blog-preview__media { min-height: 0 !important; height: auto !important; align-self: center; background: transparent !important; }
#passos .mxd-blog-preview__media img { height: auto !important; aspect-ratio: 16 / 10; transform: none !important; }

/* Site e loja: o primeiro cartão igual aos outros; luz que segue o mouse pela fileira e inclinação leve */
#loja .sv-servico--escuro { color: inherit; }
#loja .sv-servico--escuro h3 { color: #f5f3f3; }
#loja .sv-servico h3 { color: #f5f3f3; }
/* Luz que segue o mouse (js/cartoes.js): vale para todo grupo de cartões, da loja, de Recursos e de Agências */
.sv-luz__cartao { position: relative; isolation: isolate; }
/* o que inclina e apaga é a peça de fora (no Recursos o GSAP escreve transform e opacidade no cartão de dentro) */
.sv-luz__mov { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, border-color .3s ease; }
.sv-luz__cartao::before { content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgb(188 241 75 / .95), rgb(131 85 247 / .6) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; }
.sv-luz__cartao::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgb(255 255 255 / .35), transparent 65%); opacity: 0; transition: opacity .3s ease; }
.sv-luz.is-luz .sv-luz__cartao::before, .sv-luz.is-luz .sv-luz__cartao::after { opacity: 1; }
.sv-luz.is-luz .sv-luz__mov:not(.is-sob) { opacity: .62; }
.sv-luz__mov.is-sob { transition-duration: .15s, .4s, .3s; }
.sv-luz__cartao img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.sv-luz__cartao.is-sob :is(.sv-servico__img, .mxd-services-card__image) img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .sv-luz__mov, .sv-luz__cartao.is-sob img { transform: none !important; transition: opacity .2s; } }
/* grade de cartões: o mesmo respiro na vertical e na horizontal */
@media (min-width: 1200px) { .mxd-services-cards > .container-fluid > .row { row-gap: 30px; } }

/* Topo: Menu, Entrar e Começar grátis seguem um padrão só: mesma altura, canto, fonte e respiro.
   Menu e Entrar são botões fantasma (fundo só no hover), Começar grátis é o botão cheio. */
.mxd-nav-exp__controls { display: flex; align-items: stretch; gap: 4px; }
.nav-exp-menu, .sv-entrar, .mxd-header-controls__btn { height: 48px !important; min-height: 48px; padding: 0 16px !important; border-radius: var(--sv-raio-p) !important; }
.nav-exp-menu__label, .sv-entrar, .mxd-header-controls__btn .btn-text { font: 500 15px/1 var(--_font-accent) !important; letter-spacing: 0 !important; text-transform: none !important; }
.sv-entrar { display: inline-flex; align-items: center; justify-content: center; background-color: transparent; color: var(--t-tint-br); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.no-touch .sv-entrar:hover { background-color: var(--btn-tint); }
.sv-entrar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-nav--sobre[data-menu-state="closed"] .sv-entrar { color: #fff; }
.no-touch .sv-nav--sobre[data-menu-state="closed"] .sv-entrar:hover { background-color: rgb(255 255 255 / .14); }
@media (max-width: 575px) { .nav-exp-menu, .sv-entrar, .mxd-header-controls__btn { padding: 0 12px !important; } .nav-exp-menu__label, .sv-entrar { font-size: 14px !important; } }
/* Celular estreito: o hambúrguer fica sem a palavra "Menu" (continua lida pelo leitor de tela) e o topo cabe na tela. */
@media (max-width: 399px) { .mxd-nav-exp__logo .sv-logo { height: 10px; } .nav-exp-menu__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nav-exp-menu, .sv-entrar, .mxd-header-controls__btn { padding: 0 10px !important; } }

/* Cadastro em janela */
html.sv-cad-aberto { overflow: hidden; }
.sv-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-cad { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 20px; background: #fbfaff; color: #17141f; box-shadow: 0 40px 120px -20px rgb(20 8 60 / .55); overflow: auto; overscroll-behavior: contain; }
.sv-cad::backdrop { background: rgb(14 8 32 / .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sv-cad[open] { animation: sv-cad-entra .35s cubic-bezier(.2,.8,.2,1); }
@keyframes sv-cad-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sv-cad[open] { animation: none; } }
.sv-cad__caixa { position: relative; padding: 32px; }
.sv-cad__fechar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #4a4558; cursor: pointer; }
.sv-cad__fechar:hover { background: #eeeaf8; }
.sv-cad__passo { margin: 0 0 6px; font-size: 13px; color: #6036C8; font-weight: 600; }
.sv-cad__titulo { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: #17141f; }
.sv-cad__frase { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #4a4558; }
.sv-cad__barra { height: 4px; margin: 18px 0 22px; border-radius: 4px; background: #ebe6f7; overflow: hidden; }
.sv-cad__barra span { display: block; height: 100%; background: linear-gradient(90deg, #6036C8, #8355F7); transform: scaleX(.5); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.sv-cad__etapa { margin: 0; padding: 0; border: 0; display: grid; gap: 14px; min-width: 0; }
.sv-cad__dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 480px) { .sv-cad__dupla { grid-template-columns: minmax(0, 1fr); } .sv-cad__caixa { padding: 26px 20px; } .sv-cad__titulo { font-size: 24px; } }
.sv-cad__campo { display: grid; gap: 6px; min-width: 0; }
.sv-cad__campo label { font-size: 14px; font-weight: 500; color: #2a2535; }
.sv-cad__campo label span { font-weight: 400; color: #7a7489; }
.sv-cad__campo input, .sv-cad__campo select { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #d9d3e8; border-radius: 10px; background: #fff; color: #17141f; font: inherit; font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.sv-cad__campo input:focus, .sv-cad__campo select:focus { outline: none; border-color: #6036C8; box-shadow: 0 0 0 3px rgb(96 54 200 / .18); }
.sv-cad__campo [aria-invalid="true"] { border-color: #c4314b; box-shadow: 0 0 0 3px rgb(196 49 75 / .14); }
.sv-cad__ajuda { margin: 0; font-size: 13px; color: #6e687d; }
.sv-cad__aceite { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: #2a2535; cursor: pointer; }
.sv-cad__aceite input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: #6036C8; }
.sv-cad__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-cad__erro { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #fdecef; color: #8f1d33; font-size: 14px; line-height: 1.45; }
.sv-cad__acoes { display: flex; gap: 10px; margin-top: 22px; }
.sv-cad__seguir, .sv-cad__voltar { min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.sv-cad__seguir { flex: 1; background: #6036C8; color: #fff; }
.sv-cad__seguir:hover { filter: brightness(1.1); }
.sv-cad__seguir:active { transform: scale(.98); }
.sv-cad__seguir[aria-busy="true"] { opacity: .75; cursor: progress; }
.sv-cad__voltar { background: #efebf8; color: #2a2535; }
.sv-cad__voltar:hover { background: #e5dff4; }
.sv-cad :is(button, a, input, select):focus-visible { outline: 2px solid #6036C8; outline-offset: 2px; }
.sv-cad__ja { margin: 16px 0 0; text-align: center; font-size: 14px; color: #6e687d; }
.sv-cad__ja a { color: #6036C8; font-weight: 500; }
.sv-cad__pronto { display: grid; justify-items: start; gap: 12px; }
.sv-cad__pronto[hidden] { display: none; }
.sv-cad__pronto .sv-cad__seguir { width: 100%; margin-top: 10px; }
.sv-cad__selo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #BCF14B; color: #17141f; }
.sv-cad__titulo:focus { outline: none; }
.sv-cad__etapa[hidden], .sv-cad__form[hidden] { display: none !important; }
.sv-cad .sv-cad__campo :is(input, select), .sv-cad .sv-cad__campo :is(input, select):is(:focus, :hover, :active) { background: #fff !important; color: #17141f !important; -webkit-text-fill-color: #17141f; }
.sv-cad .sv-cad__campo input::placeholder { color: #9a94a8; -webkit-text-fill-color: #9a94a8; opacity: 1; }
.sv-cad .sv-cad__campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.sv-cad__tipo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sv-cad__tipo label { position: relative; cursor: pointer; }
.sv-cad__tipo input { position: absolute; opacity: 0; pointer-events: none; }
.sv-cad__tipo span { display: grid; gap: 4px; height: 100%; padding: 14px; border: 1px solid #d9d3e8; border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.4; color: #6e687d; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.sv-cad__tipo strong { font-size: 15px; font-weight: 600; color: #17141f; }
.sv-cad__tipo label:hover span { border-color: #b9addc; }
.sv-cad__tipo input:checked + span { border-color: #6036C8; background: #f6f3ff; box-shadow: 0 0 0 3px rgb(96 54 200 / .16); }
.sv-cad__tipo input:focus-visible + span { outline: 2px solid #6036C8; outline-offset: 2px; }
[data-so-agencia][hidden] { display: none !important; }
@media (max-width: 400px) { .sv-cad__tipo { grid-template-columns: minmax(0, 1fr); } }
.sv-cad__campo label [data-rotulo-site] { font-weight: 500; color: #2a2535; }
.sv-cad__dupla:has([data-so-agencia][hidden]) { grid-template-columns: minmax(0, 1fr); }

/* Hero com cinco sites (13/11): no celular as abas dividem a largura e o nome longo termina em reticências. */
.sv-filme__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .sv-filme--cheio .sv-filme__controles { left: 16px; right: 16px; }
  .sv-filme--cheio .sv-filme__sites { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .sv-filme--cheio .sv-filme__site { flex: 1 1 0; width: auto; min-width: 0; min-height: 40px; align-content: end; }
}
.sv-filme__curto { display: none; }
@media (max-width: 767px) {
  .sv-filme--cheio .sv-filme__longo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sv-filme--cheio .sv-filme__curto { display: inline; }
}

/* "Voltar ao topo" no rodapé (13/11): link com a mesma fonte do rodapé, ícone à direita, alvo de 40px */
.sv-voltar-topo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: inherit; font: 500 15px/1 var(--_font-accent); text-decoration: none; }
.sv-voltar-topo .hi { width: 18px; height: 18px; transition: transform .25s ease; }
.no-touch .sv-voltar-topo:hover .hi { transform: translateY(-3px); }
.sv-voltar-topo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* 13/11: o nome escondido de cada IA (só leitor de tela) fica preso ao próprio cartão; sem isso ele escapava do corte da faixa e alargava a página */
.sv-app, .sv-hero__ia { position: relative; }
/* 13/11: a última palavra animada (word-mask) passava 4 a 8px da caixa do título por causa do espaçamento negativo */
:is(h1, h2, h3, h4):has(.word-mask) { padding-right: .12em; }
/* 13/11: no celular pequeno o quadro da parede de sites passava da tela (324px em 320px) */
.sv-tv__quadro { max-width: 86vw; }
.sv-loja__trilho:focus-visible { outline: 2px solid #BCF14B; outline-offset: 4px; border-radius: 16px; }

/* Publicação no Studio: o traço dos ícones usa o comprimento real (--l) no lugar de pathLength, e o arco das notas a circunferência real (r=28). */
.hi [style*="--l"] { stroke-dasharray: var(--l); stroke-dashoffset: 0; }
.hi.sv-desenha [style*="--l"] { animation: hi-traco-l 1s cubic-bezier(.65,0,.35,1) both; }
.hi.sv-desenha [style*="--l"]:nth-child(2) { animation-delay: .12s; }
.hi.sv-desenha [style*="--l"]:nth-child(3) { animation-delay: .24s; }
.hi.sv-desenha [style*="--l"]:nth-child(n+4) { animation-delay: .36s; }
@keyframes hi-traco-l { from { stroke-dashoffset: var(--l); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hi [style*="--l"] { animation: none !important; } }
.sv-nota__arco { stroke-dasharray: calc(var(--n) * 1.759292) 175.9292; }
@keyframes sv-arco { from { stroke-dasharray: 0 175.9292; } }