/* Início, versão vitrine: abertura com demonstração viva, faixa corrida, antes e depois arrastável. */

/* Abertura */
.h-abertura{position:relative;overflow:hidden}
.h-abertura .miolo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px, 5vw, 72px);align-items:center;padding-block:clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px)}
.h-abertura .texto{display:flex;flex-direction:column;gap:28px;min-width:0}
.h-abertura h1{font-size:clamp(48px, 7.2vw, 96px);line-height:.98;letter-spacing:-0.035em}
.h-abertura h1 .linha{display:block}
.h-abertura h1 em{font-style:italic;font-weight:400;color:var(--laranja)}
.h-abertura .sub{font-size:clamp(18px, 1.6vw, 21px);color:var(--musgo-2);max-width:42ch}
.h-fundo{position:absolute;right:-6%;top:-8%;width:56%;max-width:760px;aspect-ratio:1;background:radial-gradient(closest-side, rgba(174,90,14,.10), transparent 70%);pointer-events:none}
@media (max-width: 920px){.h-abertura .miolo{grid-template-columns:1fr}.h-fundo{width:120%;right:-40%}}

/* Janela de navegador com o rascunho virando site */
.demo{display:flex;flex-direction:column;gap:14px;min-width:0}
.alternar{align-self:flex-start;display:inline-flex;padding:4px;border-radius:999px;background:var(--branco);border:1px solid var(--linha);gap:4px}
.alternar button{min-height:40px;padding:6px 16px;border-radius:999px;border:0;background:transparent;font:600 14px var(--texto);color:var(--musgo-suave);cursor:pointer}
.alternar button[aria-pressed="true"]{background:var(--musgo);color:var(--bege)}
.janela{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:22px;box-shadow:0 40px 80px -40px rgba(20,49,38,.45), 0 2px 0 rgba(20,49,38,.04);overflow:hidden}
.janela .barra{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--linha);background:var(--bege)}
.janela .barra i{width:10px;height:10px;border-radius:50%;background:var(--linha);display:block}
.janela .barra span{margin-left:10px;flex:1;max-width:260px;font-size:12px;color:var(--musgo-suave);background:var(--branco);border:1px solid var(--linha);border-radius:999px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palco{position:relative;aspect-ratio:16/11;max-width:100%}
.camada{position:absolute;inset:0;padding:clamp(14px, 2.2vw, 26px);display:flex;flex-direction:column;gap:clamp(10px, 1.6vw, 18px);transition:opacity .7s ease, transform .7s ease, filter .7s ease}
.janela[data-estado="rascunho"] .final{opacity:0;transform:translateY(8px);filter:blur(2px)}
.janela[data-estado="pronto"] .wire{opacity:0;transform:scale(.985)}

/* rascunho */
.wire{background:repeating-linear-gradient(0deg, transparent 0 23px, rgba(74,90,59,.06) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(74,90,59,.06) 23px 24px), var(--branco)}
.wire .b{border:1.5px dashed #9aa98b;border-radius:8px;background:rgba(207,216,191,.25)}
.wire .nav{display:flex;justify-content:space-between;gap:10px}
.wire .nav .b{height:clamp(14px, 2vw, 22px)}
.wire .heroW{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(10px, 1.6vw, 18px)}
.wire .heroW .col{display:flex;flex-direction:column;gap:clamp(6px, 1vw, 10px);justify-content:center}
.wire .img{position:relative}
.wire .img::before,.wire .img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right, transparent calc(50% - 1px), #9aa98b 50%, transparent calc(50% + 1px)), linear-gradient(to bottom right, transparent calc(50% - 1px), #9aa98b 50%, transparent calc(50% + 1px))}
.wire .img::after{display:none}
.wire .cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(8px, 1.2vw, 14px)}
.wire .cards .b{height:clamp(34px, 6vw, 70px)}
.nota{position:absolute;font:600 11px var(--texto);color:var(--laranja);background:var(--branco);border:1.5px solid var(--laranja);border-radius:999px;padding:2px 9px;white-space:nowrap}

/* site pronto (exemplo ilustrativo) */
.final{background:#fbf8f3}
.final .nav{display:flex;justify-content:space-between;align-items:center;font-size:clamp(9px, 1vw, 12px);color:#3d2f28}
.final .nav strong{font-family:var(--display);font-size:clamp(12px, 1.4vw, 16px);color:#3d2f28}
.final .nav .links{display:flex;gap:clamp(8px, 1.4vw, 16px)}
.final .heroF{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(10px, 1.6vw, 18px);align-items:center}
.final .heroF h4{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(15px, 2.3vw, 30px);line-height:1.05;color:#3d2f28;letter-spacing:-0.02em}
.final .heroF p{font-size:clamp(9px, 1vw, 12px);color:#6d5c52;margin-top:6px}
.final .cta{display:inline-block;margin-top:clamp(8px, 1.2vw, 14px);font-size:clamp(9px, 1vw, 12px);font-weight:600;background:#c46d4b;color:#fff;border-radius:999px;padding:clamp(5px, .7vw, 8px) clamp(10px, 1.4vw, 16px)}
.final .foto{height:100%;min-height:80px;border-radius:14px;background:radial-gradient(circle at 30% 30%, #f0c9b0 0 18%, transparent 19%), radial-gradient(circle at 70% 75%, #e5ad8d 0 26%, transparent 27%), linear-gradient(160deg, #e9d8c9, #d9b9a2)}
.final .cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(8px, 1.2vw, 14px)}
.final .cards div{background:#fff;border-radius:12px;padding:clamp(7px, 1vw, 12px);font-size:clamp(8px, .9vw, 11px);color:#6d5c52;display:flex;flex-direction:column;gap:4px;box-shadow:0 6px 14px -10px rgba(61,47,40,.4)}
.final .cards b{font-size:clamp(9px, 1vw, 12px);color:#3d2f28}
.legenda-demo{font-size:13px;color:var(--musgo-suave)}

/* Faixa corrida */
.corrida{background:var(--musgo);color:var(--bege);overflow:hidden;border-block:1px solid var(--musgo)}
.corrida .trilho{display:flex;width:max-content;animation:correr 38s linear infinite}
.corrida ul{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:22px 20px;font-family:var(--display);font-size:clamp(22px, 2.6vw, 34px);white-space:nowrap}
.corrida li{display:flex;align-items:center;gap:40px}
.corrida li::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--laranja-claro);display:block}
.corrida li:nth-child(odd){font-style:italic;font-weight:400}
@keyframes correr{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.corrida .trilho{animation:none}}

/* Antes e depois */
.comparar-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px, 5vw, 72px);align-items:center}
.comparar-texto{display:flex;flex-direction:column;gap:22px;min-width:0}
.comparar-texto h2{font-size:clamp(36px, 4.8vw, 58px)}
.comparar-texto p{color:var(--musgo-2)}
.diferencas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.diferencas li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:17px}
.diferencas li span{width:28px;height:28px;border-radius:8px;background:var(--musgo);color:var(--bege);display:grid;place-items:center;font-size:14px;font-weight:600}
.comparar{position:relative;--pos:40%;border-radius:22px;overflow:hidden;border:1px solid var(--linha);box-shadow:0 40px 80px -40px rgba(20,49,38,.45);aspect-ratio:4/3;max-width:100%;user-select:none;background:var(--branco)}
.lado-ab{position:absolute;inset:0;padding:clamp(14px, 2.4vw, 28px);display:flex;flex-direction:column;gap:clamp(8px, 1.4vw, 14px)}
.antes{background:#e8e8e8;font-family:'Times New Roman', serif;color:#222}
.antes .faixa-topo{background:#1d3fa8;color:#ffef3a;font:700 clamp(10px, 1.3vw, 15px) Arial, sans-serif;padding:6px 10px;text-align:center}
.antes h4{margin:0;font:700 clamp(16px, 2.4vw, 28px) 'Comic Sans MS', 'Comic Neue', cursive;color:#c00;text-align:center}
.antes p{font-size:clamp(9px, 1.05vw, 12px);line-height:1.35;text-align:justify}
.antes .linha-links{display:flex;flex-wrap:wrap;gap:6px;font:clamp(8px, .95vw, 11px) Arial, sans-serif}
.antes .linha-links a{color:#0000ee;text-decoration:underline}
.antes .mini{align-self:flex-end;font:clamp(8px, .9vw, 10px) Arial, sans-serif;background:#bbb;padding:3px 6px;border:1px outset #ddd}
.depois{background:#fbf8f3;clip-path:inset(0 0 0 var(--pos));justify-content:center}
.depois .nav{display:flex;justify-content:space-between;align-items:center;font-size:clamp(9px, 1vw, 12px);color:#6d5c52}
.depois .nav strong{font-family:var(--display);color:#3d2f28;font-size:clamp(12px, 1.4vw, 16px)}
.depois h4{margin:auto 0 0;font-family:var(--display);font-weight:600;font-size:clamp(20px, 3.4vw, 42px);line-height:1.02;letter-spacing:-0.02em;color:#3d2f28;max-width:13ch}
.depois p{font-size:clamp(10px, 1.15vw, 14px);color:#6d5c52;max-width:34ch}
.depois .cta{align-self:flex-start;margin-bottom:auto;font-size:clamp(10px, 1.15vw, 14px);font-weight:600;background:#c46d4b;color:#fff;border-radius:999px;padding:clamp(7px, 1vw, 11px) clamp(14px, 2vw, 22px)}
.selo{position:absolute;top:14px;font:600 12px var(--texto);letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;z-index:2;pointer-events:none}
.selo.a{left:14px;background:#fff;color:#222}
.selo.d{right:14px;background:var(--musgo);color:var(--bege)}
.puxador{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--branco);box-shadow:0 0 0 1px rgba(20,49,38,.2);z-index:2;pointer-events:none}
.puxador::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--laranja);color:var(--bege);display:grid;place-items:center;font:700 18px var(--texto);letter-spacing:2px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.comparar input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.comparar:has(input:focus-visible) .puxador::after{outline:3px solid var(--musgo);outline-offset:3px}
@media (max-width: 920px){.comparar-grade{grid-template-columns:1fr}}

/* Serviços em linhas */
.linhas{display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.linha-servico{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:clamp(16px, 3vw, 40px);align-items:center;padding:clamp(24px, 3vw, 36px) clamp(8px, 2vw, 24px);border-bottom:1px solid var(--linha);text-decoration:none;border-radius:0;transition:background-color .25s ease, color .25s ease}
.linha-servico h3{font-size:clamp(28px, 3.6vw, 46px);letter-spacing:-0.02em}
.linha-servico p{color:var(--musgo-2);font-size:17px}
.linha-servico .seta{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--musgo);display:grid;place-items:center;font-size:22px;transition:transform .25s ease, background-color .25s ease}
.linha-servico:hover{background:var(--musgo);color:var(--bege)}
.linha-servico:hover p{color:var(--sobre-musgo)}
.linha-servico:hover .seta{background:var(--laranja);border-color:var(--laranja);transform:rotate(-45deg)}
@media (max-width: 760px){.linha-servico{grid-template-columns:1fr auto}.linha-servico p{grid-column:1 / -1;grid-row:2}}

/* Vitrine do portfólio com dispositivos */
.vitrine{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:28px}
.dispositivo{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.aparelhos{position:relative;aspect-ratio:5/4;max-width:100%;border-radius:22px;background:var(--musgo);overflow:hidden;display:grid;place-items:center;transition:transform .3s ease}
.dispositivo:nth-child(2) .aparelhos{background:var(--laranja)}
.dispositivo:nth-child(3) .aparelhos{background:var(--musgo-suave)}
.dispositivo:hover .aparelhos{transform:translateY(-4px)}
.notebook{width:74%;aspect-ratio:16/10;background:var(--bege);border-radius:8px;border:6px solid #0e231b;border-bottom-width:10px;display:grid;place-items:center;font-size:13px;color:var(--musgo-suave);text-align:center;padding:8px}
.celular{position:absolute;right:9%;bottom:10%;width:20%;aspect-ratio:9/18;background:var(--bege);border:4px solid #0e231b;border-radius:14px}
.dispositivo .tipo{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--laranja)}
.dispositivo h3{font-size:24px}
.dispositivo p{font-size:16px;color:var(--musgo-suave)}
@media (max-width: 900px){.vitrine{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.vitrine{grid-template-columns:1fr}}

/* Processo em faixa escura, com linha */
.processo-h .passos{position:relative}

/* Marca grande no rodapé */
.marca-gigante{background:var(--musgo);overflow:hidden;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:clamp(40px, 6vw, 72px) 0}
.marca-gigante .miolo{display:flex;justify-content:center}
.marca-gigante img{width:min(520px, 70%);height:auto;opacity:.14}

.depois-grade{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(12px, 2vw, 22px);align-items:center}
.depois-txt{display:flex;flex-direction:column;gap:clamp(8px, 1.2vw, 12px);min-width:0}
.depois-txt h4{margin:0}
.depois-txt .cta{margin:0}
.depois .foto{height:100%;min-height:120px;border-radius:16px;background:radial-gradient(circle at 30% 30%, #f0c9b0 0 18%, transparent 19%), radial-gradient(circle at 70% 75%, #e5ad8d 0 26%, transparent 27%), linear-gradient(160deg, #e9d8c9, #d9b9a2)}

/* Banner com fotos em movimento */
.colagem{position:relative;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:1/1;max-width:100%;min-width:0}
.foto-c{margin:0;border-radius:24px;overflow:hidden;background:var(--bege-2);position:relative;box-shadow:0 30px 60px -36px rgba(20,49,38,.55)}
.foto-c img{width:100%;height:100%;object-fit:cover;animation:aproximar 16s ease-in-out infinite alternate;transform-origin:center}
.f1{grid-row:1 / 3}
.f2 img{animation-delay:-4s;animation-duration:13s}
.f3 img{animation-delay:-8s;animation-duration:18s}
.f4{display:none}
@keyframes aproximar{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%, -2%)}}
.colagem.troca .f2{animation:sumir 12s ease-in-out infinite}
.postit{position:absolute;z-index:2;font:600 clamp(13px, 1.3vw, 16px) var(--texto);color:var(--musgo);padding:clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);min-width:clamp(96px, 9vw, 124px);box-shadow:0 14px 24px -14px rgba(20,49,38,.6);animation:flutuar 6s ease-in-out infinite}
.postit::before{content:"";position:absolute;top:-9px;left:50%;width:44px;height:16px;margin-left:-22px;background:rgba(247,246,239,.75);transform:rotate(-3deg)}
.p1{background:#f3c9a4;left:-4%;bottom:14%;transform:rotate(-6deg);--r:-6deg}
.p2{background:#e6ecda;right:-3%;top:6%;--r:5deg;animation-delay:-2s}
.p3{background:#f7e08a;right:12%;bottom:-3%;--r:-3deg;animation-delay:-4s}
@keyframes flutuar{0%,100%{transform:translateY(0) rotate(var(--r, 0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r, 0deg) + 2deg))}}
@media (prefers-reduced-motion: reduce){.foto-c img,.postit{animation:none}}
@media (max-width: 920px){.colagem{aspect-ratio:4/3.4}.p1{left:2%}.p2{right:2%}}

/* Seção da demonstração */
.demo-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px, 5vw, 72px);align-items:center}
@media (max-width: 920px){.demo-grade{grid-template-columns:1fr}}

/* Telas reais dentro dos aparelhos */
.notebook{padding:0;overflow:hidden}
.notebook img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:var(--bege)}
.celular{overflow:hidden}
.celular img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:var(--bege)}

/* Banner com vídeo */
.hv{position:relative;overflow:hidden;background:var(--musgo);color:var(--bege);min-height:clamp(560px, 88vh, 860px);display:flex;align-items:center}
.hv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:hv-zoom 24s ease-in-out infinite alternate}
.hv-veu{position:absolute;inset:0;background:linear-gradient(100deg, rgba(20,49,38,.94) 0%, rgba(20,49,38,.82) 38%, rgba(20,49,38,.35) 72%, rgba(20,49,38,.55) 100%)}
.hv-miolo{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;padding-block:clamp(72px, 10vw, 120px)}
.hv-texto{display:flex;flex-direction:column;gap:26px;min-width:0}
.hv-rotulo{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--laranja-claro);opacity:0;animation:hv-sobe .7s .1s ease-out forwards}
.hv h1{font-family:var(--display);font-weight:600;font-size:clamp(46px, 7vw, 98px);line-height:.98;letter-spacing:-0.035em;margin:0;color:var(--bege)}
.hv h1 em{font-style:italic;font-weight:400;color:var(--laranja-claro)}
.hv-l{display:block;opacity:0;transform:translateY(28px);animation:hv-sobe .8s ease-out forwards}
.hv-l:nth-child(1){animation-delay:.25s}
.hv-l:nth-child(2){animation-delay:.45s}
.hv-l:nth-child(3){animation-delay:.65s}
.hv-sub{font-size:clamp(18px, 1.6vw, 21px);color:#dfe6d2;max-width:44ch;opacity:0;animation:hv-sobe .8s .9s ease-out forwards}
.hv .acoes{opacity:0;animation:hv-sobe .8s 1.1s ease-out forwards}
.hv-linha{border:2px solid var(--bege);color:var(--bege);background:transparent}
.hv-linha:hover{background:var(--bege);color:var(--musgo)}
.hv-local{font-size:15px;color:#b9c4ad;opacity:0;animation:hv-sobe .8s 1.3s ease-out forwards}
.hv-postits{position:relative;height:420px}
.hv-p{position:absolute;font:600 clamp(15px, 1.5vw, 19px) var(--texto);color:var(--musgo);padding:22px 24px;min-width:140px;box-shadow:0 18px 30px -16px rgba(0,0,0,.55);opacity:0;animation:hv-cola .7s cubic-bezier(.2,1.4,.4,1) forwards, hv-flutua 6s ease-in-out infinite}
.hv-p::before{content:"";position:absolute;top:-10px;left:50%;width:50px;height:18px;margin-left:-25px;background:rgba(247,246,239,.7);transform:rotate(-3deg)}
.hv-p1{background:#f3c9a4;left:4%;top:2%;--r:-6deg;animation-delay:1.4s, 2.1s}
.hv-p2{background:#e6ecda;right:2%;top:22%;--r:5deg;animation-delay:1.8s, 2.5s}
.hv-p3{background:#f7e08a;left:14%;top:50%;--r:-3deg;animation-delay:2.2s, 2.9s}
.hv-p4{background:#cfe3d6;right:10%;bottom:4%;--r:4deg;animation-delay:2.6s, 3.3s}
.hv-descer{position:absolute;left:50%;bottom:26px;z-index:1;width:30px;height:48px;margin-left:-15px;border:2px solid rgba(247,246,239,.7);border-radius:999px}
.hv-descer span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--bege);animation:hv-rola 1.8s ease-in-out infinite}
@keyframes hv-sobe{to{opacity:1;transform:translateY(0)}}
@keyframes hv-cola{from{opacity:0;transform:translateY(-30px) scale(1.15) rotate(var(--r))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--r))}}
@keyframes hv-flutua{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes hv-zoom{from{transform:scale(1.04)}to{transform:scale(1.14)}}
@keyframes hv-rola{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media (max-width: 900px){.hv-miolo{grid-template-columns:1fr}.hv-postits{display:none}.hv-veu{background:linear-gradient(180deg, rgba(20,49,38,.75), rgba(20,49,38,.92))}}
@media (prefers-reduced-motion: reduce){.hv-video{animation:none}.hv-l,.hv-rotulo,.hv-sub,.hv .acoes,.hv-local,.hv-p{animation:none;opacity:1;transform:none}.hv-descer span{animation:none}}

/* Tablet: portfólio em 3 colunas, sem item sobrando; processo sem card sozinho */
@media (max-width: 900px) and (min-width: 641px){.vitrine{grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}.dispositivo h3{font-size:20px}}
@media (max-width: 640px){.vitrine{grid-template-columns:1fr}}