[hidden]{display:none!important}
.btn{line-height:1.25}
.btn .shiny-content{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;line-height:1.25}
.btn svg{display:block;width:20px;height:20px;flex:0 0 20px;align-self:center}
.cta-label{display:block;line-height:1.25}
.top{position:relative;gap:20px}
.site-nav{gap:18px;flex-wrap:wrap}
.site-nav a{padding-block:8px;min-height:44px;display:inline-flex;align-items:center}
.menu-toggle{display:none;background:var(--carbon);border:1px solid var(--line);border-radius:999px;color:var(--chalk);padding:10px 16px;font:500 .8rem var(--f-body);min-height:44px;cursor:pointer}
.testimonials{grid-template-columns:repeat(3,minmax(0,1fr))}
.testimonial{padding:24px}
.more-testimonials{margin-top:24px}
.more-testimonials>summary{width:fit-content;cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:999px;padding:12px 22px;color:var(--teal);font-size:.84rem;min-height:44px}
.more-testimonials>summary::-webkit-details-marker{display:none}
.more-testimonials>summary::after{content:" +";margin-left:8px}
.more-testimonials[open]>summary::after{content:" −"}
.more-testimonials .testimonials{margin-top:24px}
.more-testimonials[open] .more-label,.more-testimonials:not([open]) .less-label{display:none}
.project-preview{display:block;width:100%;padding:0;position:relative;border:0;border-radius:14px;background:transparent;cursor:zoom-in;text-align:inherit;color:var(--chalk)}
.project-preview .project-image{display:block}
.preview-label{position:absolute;right:10px;bottom:10px;background:rgba(10,10,10,.88);border:1px solid rgba(255,255,255,.2);padding:5px 10px;border-radius:999px;font:500 .65rem var(--f-body);pointer-events:none}
.project-preview:hover .preview-label{color:var(--teal)}
.project-dialog{width:min(1440px,96vw);max-width:96vw;max-height:94dvh;border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--carbon);color:var(--chalk);overflow:auto}
.project-dialog::backdrop{background:rgba(0,0,0,.88)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.dialog-header h2{font-size:1.2rem;font-weight:500;color:var(--teal)}
.dialog-close{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--ink);color:var(--chalk);font-size:1.4rem;cursor:pointer}
.dialog-image{width:100%;max-height:70dvh;object-fit:contain;border-radius:12px;background:var(--ink)}
.dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;font-size:.76rem;color:var(--ash)}
.dialog-footer a{color:var(--teal);padding-block:8px}
.dialog-controls{display:flex;gap:8px}.dialog-controls button{min-width:44px;min-height:44px;background:var(--ink);border:1px solid var(--line);border-radius:999px;color:var(--chalk);font-size:1rem;cursor:pointer}
body.dialog-open{overflow:hidden}
@media(max-width:1000px){.top .ig{display:none}.site-nav{margin-left:auto}.testimonials{grid-template-columns:repeat(2,minmax(0,1fr))}.testimonials>.testimonial:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:760px){
  .testimonials{grid-template-columns:1fr}.testimonials>.testimonial:last-child:nth-child(odd){grid-column:auto}
  .top{gap:14px;padding-block:20px}.menu-toggle{margin-left:auto}
  .ui-enhanced .menu-toggle{display:inline-flex}.site-nav{width:100%;margin:0;gap:8px 18px;justify-content:flex-start}
  .ui-enhanced .site-nav{display:none}.ui-enhanced .site-nav.is-open{display:flex;padding-top:12px;border-top:1px solid var(--line)}
  .site-nav a{font-size:.84rem}.hero h1{font-size:clamp(2rem,8vw,3.5rem)}
  .shiny-content{min-width:0;white-space:normal;text-align:center}.btn{max-width:100%}
  .project-dialog{padding:14px;border-radius:16px}.dialog-header h2{font-size:1rem}.dialog-footer{flex-wrap:wrap}.dialog-image{max-height:65dvh}
  .project-preview,.project-preview .project-image{border-radius:12px}
}

/* Marca no topo */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-v{width:auto;height:22px;flex:none}
.brand-word{font-weight:inherit}

/* Selo Kommo na foto (versão escura) */
.kommo-badge{position:absolute;z-index:2;right:16px;bottom:12%;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:14px;background:rgba(10,10,10,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.kommo-badge img{width:36px;height:36px;border-radius:50%;flex:none}
.kommo-badge strong{display:block;font-size:.95rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.kommo-badge small{display:block;font-size:.64rem;font-weight:500;color:var(--teal);letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
@media(max-width:760px){.kommo-badge{right:12px}}

/* Rodapé */
footer{align-items:center;row-gap:16px}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{height:18px;width:auto;flex:none}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot-links a{color:var(--chalk);padding-block:10px}
.foot-links a:hover{color:var(--teal)}
.foot-copy{width:100%;padding-top:18px;border-top:1px solid var(--line);font-size:.74rem;color:var(--ash)}

/* Botão fixo de WhatsApp no celular */
.wa-float{display:none}
@media(max-width:760px){
  .wa-float{position:fixed;z-index:50;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:var(--teal);color:var(--teal-ink);font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 14px 36px rgba(0,0,0,.55);transform:translateY(160%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s}
  .wa-float svg{width:20px;height:20px;flex:none}
  .wa-float.is-shown{transform:none;opacity:1;pointer-events:auto}
  body.has-wa-float footer{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* Text roll (recriação do motion-primitives TextRoll em CSS puro): cada letra gira no eixo X e é trocada pela cópia de baixo */
.roll{display:inline-block;white-space:nowrap}
.roll-l{position:relative;display:inline-block;perspective:10000px;transform-style:preserve-3d}
.roll-a,.roll-b{position:absolute;left:0;top:0;display:inline-block;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s cubic-bezier(.55,0,1,.45)}
.roll-a{transform-origin:50% 25%;transform:rotateX(0deg);transition-delay:calc(var(--i) * 45ms)}
.roll-b{transform-origin:50% 100%;transform:rotateX(90deg);transition-delay:calc(var(--i) * 45ms + 160ms)}
.roll-ghost{visibility:hidden}
.is-rolled .roll-a{transform:rotateX(90deg)}
.is-rolled .roll-b{transform:rotateX(0deg)}
.roll-reset .roll-a,.roll-reset .roll-b{transition:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.roll-a,.roll-b{transition:none!important}}

/* Como funciona: as etapas se ligam uma à outra, em sequência, quando a seção aparece (ativado pelo ui.js) */
.flow-step:nth-child(1){--i:0}.flow-step:nth-child(2){--i:1}.flow-step:nth-child(3){--i:2}.flow-step:nth-child(4){--i:3}
.flow-anim .flow-marker{opacity:.25;transform:scale(.55);transition:none}
.flow-anim .flow-step:not(:last-child)::after{transform:scaleX(0);transform-origin:left center}
.flow-anim.is-linked .flow-marker{opacity:1;transform:none;transition:opacity .4s ease calc(var(--i) * .6s),transform .4s ease calc(var(--i) * .6s),box-shadow .3s}
.flow-anim.is-linked .flow-step:not(:last-child)::after{transform:scaleX(1);transition:transform .45s ease calc(var(--i) * .6s)}
@media(max-width:640px){
  .flow-anim .flow-step:not(:last-child)::after,.flow-anim .flow-step:nth-child(2n):not(:last-child)::after{transform:scaleY(0);transform-origin:top center}
  .flow-anim.is-linked .flow-step:not(:last-child)::after,.flow-anim.is-linked .flow-step:nth-child(2n):not(:last-child)::after{transform:scaleY(1)}
}