/* DistribuiPro 39.16 · Telas reais (28 telas, claro/escuro) e rodapé das páginas "Original melhorada" e "Vendia bem" (vitrine-v2.js) */

/* ---------- Telas reais: uma linha (‹ telas › Claro/Escuro) + foto ---------- */
/* A largura acompanha a altura da janela: a linha, a foto e a legenda cabem juntas na tela (notebook 1366/1536 também) */
.dpt4-linha,.dpt3 .screen-viewer{max-width:min(1000px,max(640px,calc((100vh - 250px) * 1.6)));margin-left:auto;margin-right:auto}
.dpt4-linha{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dpt4-seta{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#dce5f0);background:#fff;color:var(--ink,#0f1f35);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(15,31,53,.08);transition:border-color .15s,color .15s,transform .15s}
.dpt4-seta:hover{border-color:#9fc2e6;color:var(--blue,#2563eb);transform:scale(1.06)}
.dpt4-seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dpt4-telas{flex:1;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;scroll-behavior:smooth}
.dpt4-telas::-webkit-scrollbar{display:none}
.dpt4-telas.dpt4-dir{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%)}
.dpt4-telas.dpt4-esq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 100%)}
.dpt4-telas.dpt4-esq.dpt4-dir{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.dpt4-telas button{flex:none;border:1px solid var(--line,#dce5f0);background:#fff;color:var(--ink-2,#233a58);font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.dpt4-telas button:hover{border-color:#9fc2e6;color:var(--blue,#2563eb)}
.dpt4-telas button.on{background:var(--blue,#2563eb);border-color:var(--blue,#2563eb);color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.22)}
.dpt4-tema{flex:none;display:inline-flex;margin-left:6px;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--line,#dce5f0)}
.dpt4-tema button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink-2,#233a58);font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.dpt4-tema svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dpt4-tema button.on{background:var(--navy,#08192f);color:#fff}
.dpt4-seta:focus-visible,.dpt4-telas button:focus-visible,.dpt4-tema button:focus-visible{outline:2px solid var(--blue,#2563eb);outline-offset:2px}
/* Foto */
.dpt3 .screen-viewer{padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.dpt3 .screen-window{position:relative;border-radius:16px;border:1px solid var(--line,#dce5f0);background:#fff;box-shadow:0 22px 60px rgba(18,46,82,.14);overflow:hidden}
.dpt3 .browser-bar{height:34px}
.dpt3 .browser-url{min-width:0;flex:0 1 240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpt3-cont{margin-left:auto;flex:none;white-space:nowrap;padding-left:10px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted,#63758d)}
.dpt3-foto{position:relative;overflow:hidden}
#screenImage{display:block;transition:opacity .25s ease,transform .12s ease-out;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#eef3f9}
.dpt3-dica{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;font-size:12px;font-weight:700;color:#fff;background:rgba(15,23,42,.72);padding:5px 12px;border-radius:999px;pointer-events:none;white-space:nowrap;transition:opacity .2s}
.dpt2-zoom.on .dpt3-dica{opacity:0}
.dpt3 .screen-caption{display:block;padding:12px 4px 0}
.dpt3 .screen-caption h3{font-size:18px;margin:0 0 2px}
.dpt3 .screen-caption p{font-size:14px;margin:0}
/* Lupa (39.18: mais suave — 1,6× no computador; no celular a tela ampliada tem 1,6× a largura do aparelho) */
@media(hover:hover) and (pointer:fine){ .dpt2-zoom #screenImage{cursor:zoom-in} .dpt2-zoom.on #screenImage{transform:scale(1.6)} }
@media not all and (hover:hover){ .dpt2-zoom #screenImage{cursor:zoom-in} }
.dpt2-lb{position:fixed;inset:0;z-index:2147483000;background:rgba(2,6,23,.92);display:flex;flex-direction:column}
.dpt2-lb-in{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex}
.dpt2-lb-in img{display:block;width:min(1440px,160vw);max-width:none;height:auto;margin:auto 0;flex:none}
.dpt2-lb-x{position:absolute;top:12px;right:12px;z-index:1;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#0f172a;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
html.dpt2-lb-open,html.dpt2-lb-open body{overflow:hidden}
/* Tema escuro das telas: a moldura acompanha */
.dpt3-escuro .screen-window{background:#0b0f19;border-color:#1f2937;box-shadow:0 22px 60px rgba(2,6,23,.40)}
.dpt3-escuro .browser-bar{background:#111827;border-bottom-color:#1f2937}
.dpt3-escuro .browser-url{background:#0b0f19;color:#9ca3af;border-color:#1f2937}
.dpt3-escuro .dpt3-cont{color:#9ca3af}
.dpt3-escuro #screenImage{background:#0b0f19}
/* 39.16 · Tela larga: texto à esquerda, telas à direita. A largura das telas acompanha a altura da janela
   (linha + foto cabem juntas abaixo do cabeçalho fixo); o texto fica com o resto, entre 320 e 460px. */
@media(min-width:1100px){
  .dpt5{--dpt-w:min(1000px,max(600px,calc((100vh - 200px) * 1.6)));display:flex;align-items:center;justify-content:center;gap:clamp(32px,3.6vw,64px)}
  .dpt5-texto{flex:0 1 460px;min-width:320px}
  .dpt5-telas{flex:0 1 var(--dpt-w);min-width:0}
  .dpt5 .dpt4-linha,.dpt5 .screen-viewer{max-width:none;width:100%;margin-left:0;margin-right:0}
  .dpt5-texto .section-head{text-align:left;max-width:none;margin:0 0 22px;padding:0}
  .dpt5-texto .section-head h2{font-size:clamp(30px,2.5vw,42px);line-height:1.08;margin-left:0;margin-right:0;max-width:none}
  .dpt5-texto .section-head p{margin-left:0;margin-right:0;max-width:none;font-size:16px}
  .dpt5-texto .screen-caption{display:block;margin:0 0 20px;padding:14px 16px;border-radius:14px;border:1px solid var(--line,#dce5f0);border-left:4px solid var(--blue,#2563eb);background:#f6f9fe;min-height:92px}
  .dpt5-texto .screen-caption h3{font-size:18px;margin:0 0 4px}
  .dpt5-texto .screen-caption p{font-size:14.5px;line-height:1.5;margin:0;color:var(--muted,#63758d)}
  .dpt5-texto .demo-banner{flex-direction:column;align-items:stretch;gap:14px;margin:0;padding:18px 18px 16px;text-align:left}
  .dpt5-texto .demo-banner .btn{width:100%;justify-content:center;text-align:center;white-space:normal}
}
/* Celular: o Claro/Escuro fica em cima, centralizado; a linha ‹ telas › embaixo */
@media(max-width:760px){
  .dpt4-linha,.dpt3 .screen-viewer{max-width:none}
  .dpt4-linha{flex-wrap:wrap;gap:6px}
  .dpt4-linha{justify-content:center}
  .dpt4-tema{order:-2;margin:0 0 4px}
  .dpt4-linha::before{content:"";order:-1;flex-basis:100%;height:0}
  .dpt4-seta{width:34px;height:34px}
  .dpt4-telas button{font-size:13px;padding:7px 12px}
  .dpt3-dica{font-size:11px;bottom:8px}
}

/* 39.18 · Cabeçalho no celular: logo, "Minha Conta", "Comprar" e o menu cabem na largura (antes o menu passava ~14px
   da tela e a página "sobrava" para a direita). O link vazio .brand (o logo é a <img> ao lado) sai no celular. */
/* 39.20 · A logo nova (D azul) é mais comprida (4,4:1) que a de 06/10 (3,1:1): o construtor fixa 166x53 pelo id e ela esticava.
   Altura fixa e largura pela proporção (no celular, o contrário). */
.site-header .nav-wrap>img{width:auto!important;height:46px!important;max-width:none;object-fit:contain}
@media(max-width:560px){
  .site-header .nav-wrap{gap:8px;min-width:0}
  .site-header .nav-wrap>img{flex:0 1 auto;min-width:0;width:140px!important;max-width:140px;height:auto!important}
  .site-header .nav-wrap>a.brand:empty{display:none}
  .site-header .nav-actions{flex:none;gap:6px;margin-left:auto}
  .site-header .nav-actions .btn.compact{padding:0 10px;white-space:nowrap}
  .site-header .menu-btn{flex:none}
}
@media(max-width:374px){
  .site-header .nav-wrap>img{width:118px!important;max-width:118px}
  .site-header .nav-actions .btn.compact{padding:0 8px;font-size:11.5px}
}
/* Rede de segurança: nada mais empurra a página para o lado no celular */
@media(max-width:760px){ html,body{overflow-x:clip} }

/* ---------- 39.19 · Depoimentos no celular: cartões menores numa faixa que se arrasta com o dedo (não uma lista comprida) ---------- */
.dpd-pontos{display:none}
@media(max-width:760px){
  .testimonials-section .testimonials-grid{display:flex!important;grid-template-columns:none!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -12px;padding:4px 12px 6px;scroll-padding:0 12px}
  .testimonials-section .testimonials-grid::-webkit-scrollbar{display:none}
  .testimonials-section .testimonial{flex:0 0 84%;scroll-snap-align:start;min-height:0!important;padding:16px 16px 14px;border-radius:16px}
  .testimonials-section .testimonial .stars{font-size:13px;margin-bottom:8px}
  .testimonials-section .testimonial>p{font-size:13.5px;line-height:1.55;margin-bottom:12px}
  .testimonials-section .testimonial .person{padding-top:12px}
  .testimonials-section .testimonial .person img,.testimonials-section .testimonial .person .dp-tm-ini{width:38px;height:38px;font-size:14px}
  .dpd-pontos{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:12px}
  .dpd-pontos button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#c9d6e5;cursor:pointer;transition:width .2s,background .2s}
  .dpd-pontos button.on{width:20px;background:var(--blue,#2563eb)}
  .dpd-dica{display:block;text-align:center;margin-top:8px;font-size:12px;font-weight:600;color:var(--muted,#63758d)}
}
@media(min-width:761px){.dpd-dica{display:none}}

/* ---------- 39.18 · Card do preço: plano à esquerda, telas do sistema à direita (vitrine-v2.js › preco) ---------- */
#comprar .dpp-card{max-width:1180px;margin-left:auto;margin-right:auto}
.dpp-visual{display:none;position:relative;aspect-ratio:16/11;margin:6px 0 26px}
@media(min-width:1000px){
  #comprar .dpp-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:48px;align-items:start;
    grid-template-areas:"top top" "h3 vis" "price vis" "list vis" "btn btn" "trust trust"}
  .dpp-card>.plan-top{grid-area:top}
  .dpp-card>h3{grid-area:h3}
  .dpp-card>.plan-price{grid-area:price}
  .dpp-card>ul{grid-area:list}
  .dpp-card>a.full{grid-area:btn}
  .dpp-card>.payment-trust{grid-area:trust}
  .dpp-visual{display:block;grid-area:vis;align-self:center}
}
.dpp-tela{position:absolute;margin:0;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #d9e5f0;box-shadow:0 18px 44px rgba(18,46,82,.16)}
.dpp-a{left:0;top:0;width:84%}
.dpp-b{right:0;bottom:0;width:60%;box-shadow:0 26px 60px rgba(18,46,82,.28)}
.dpp-bar{height:18px;display:flex;align-items:center;gap:5px;padding:0 9px;background:#f1f5fa;border-bottom:1px solid #e3eaf2}
.dpp-bar i{width:7px;height:7px;border-radius:50%;background:#f87171}
.dpp-bar i:nth-child(2){background:#fbbf24}
.dpp-bar i:nth-child(3){background:#34d399}
.dpp-tela img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left}

/* ---------- Rodapé ---------- */
footer.dpf2{background:radial-gradient(1200px 400px at 85% -10%,rgba(22,196,127,.14),transparent 60%),linear-gradient(180deg,var(--navy-2,#0d2747),var(--navy,#08192f));color:#c3cfdf;padding:64px 0 0;margin-top:0;border-top:0}
.dpf2 .dpf2-wrap{max-width:var(--container,1480px);margin:0 auto;padding:0 24px}
.dpf2 .dpf2-top{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(170px,1fr));gap:40px;padding-bottom:44px}
.dpf2 .dpf2-brand img{display:block;width:210px;height:auto;max-width:100%}
.dpf2 .dpf2-brand p{margin:18px 0 0;max-width:380px;font-size:15px;line-height:1.6;color:#c3cfdf}
.dpf2 .dpf2-selos{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dpf2 .dpf2-selos li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(22,196,127,.12);border:1px solid rgba(22,196,127,.28);color:#bff3da;font-size:12.5px;font-weight:700}
.dpf2 .dpf2-selos svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dpf2 .dpf2-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.dpf2 .dpf2-col strong{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.dpf2 .dpf2-col a,.dpf2 .dpf2-col span,.dpf2 .dpf2-sac{display:inline-flex;align-items:center;gap:9px;color:#c3cfdf;text-decoration:none;font-size:15px;line-height:1.4;overflow-wrap:anywhere;transition:color .2s}
.dpf2 .dpf2-col a{border:0!important;box-shadow:none!important;background:none!important;padding:0!important;outline:0}
.dpf2 .dpf2-col a:hover{color:#fff}
.dpf2 a:focus-visible,.dpf2 button:focus-visible{outline:2px solid var(--green,#16c47f)!important;outline-offset:3px}
.dpf2 .dpf2-col svg,.dpf2 .dpf2-pay svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--green,#16c47f);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dpf2 .dpf2-sac{align-self:flex-start;margin-top:4px;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.dpf2 .dpf2-sac:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.dpf2 .dpf2-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:20px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#93a4bb}
.dpf2 .dpf2-pay{display:inline-flex;align-items:center;gap:8px}
.dpf2 .dpf2-legal:empty{display:none}
.dpf2 .dpf2-legal{padding:0 0 24px}
.dpf2 .dpf2-legal .dp-empresa{background:transparent!important;color:#93a4bb!important;border-top:0!important;padding:0!important;text-align:left!important;font-size:12.5px}
.dpf2 .dpf2-legal .dp-empresa-in{max-width:none!important;margin:0!important}
.dpf2 .dpf2-legal .dp-empresa p{justify-content:flex-start!important;opacity:1!important}
.dpf2 .dpf2-legal .dp-empresa p:not(:first-child){display:none!important}
.dpf2 .dpf2-legal .dp-empresa p:first-child::before{content:"Quem vende:";font-weight:700;color:#c3cfdf;margin-right:2px}
.dpf2 .dpf2-legal .dp-empresa b{color:#c3cfdf}
.dpf2 .dp-footer-support{display:none!important}
@media(max-width:1020px){.dpf2 .dpf2-top{grid-template-columns:1fr 1fr;gap:32px}.dpf2 .dpf2-brand{grid-column:1/-1}}
@media(max-width:560px){
  footer.dpf2{padding-top:44px}
  .dpf2 .dpf2-wrap{padding:0 16px}
  .dpf2 .dpf2-top{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .dpf2 .dpf2-bottom{flex-direction:column;align-items:flex-start;padding-bottom:96px}
}