/* ==========================================================================
   Locatto Compliance — Kit de Landing Page "Pro" (padrão Piloto 1)
   Estética dark/tech/premium. Carrega depois de site.css.
   Regra de contraste: fundo escuro = literal #150818/#200d26; texto claro.
   ========================================================================== */

/* ---- HERO ---- */
.pro-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 8%,#3a1546,#200d26 55%,#150818);color:#fff;padding:60px 0 92px}
.pro-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(183,154,107,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(183,154,107,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 75% 20%,#000,transparent 70%);mask-image:radial-gradient(circle at 75% 20%,#000,transparent 70%);opacity:.7}
.pro-bits{position:absolute;inset:0;overflow:hidden;pointer-events:none;font-family:'Courier New',monospace;color:rgba(183,154,107,.22);font-size:12px}
.pro-bits span{position:absolute;white-space:nowrap;animation:proSobe 14s linear infinite}
@keyframes proSobe{from{transform:translateY(110%)}to{transform:translateY(-260px)}}
.pro-hero .inner{position:relative;z-index:2}
.pro-hero .trilha{font-family:'Courier New',monospace;font-size:12.5px;color:rgba(255,255,255,.5)}
.pro-hero .trilha a{color:rgba(255,255,255,.72)}
.pro-tag{display:inline-flex;align-items:center;gap:9px;font-family:'Courier New',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--champanhe-claro);border:1px solid rgba(183,154,107,.4);padding:7px 14px;border-radius:999px;margin-top:18px}
.pro-tag i{width:7px;height:7px;border-radius:50%;background:#7ee0a0;box-shadow:0 0 10px #7ee0a0;animation:proPisca 1.6s infinite}
@keyframes proPisca{50%{opacity:.3}}
.pro-hero h1{color:#fff;font-size:clamp(34px,5.4vw,58px);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:22px 0 0;max-width:17ch}
.pro-hero h1 em{font-style:normal;color:var(--champanhe-claro)}
.pro-hero .promessa{font-size:18.5px;line-height:1.7;color:rgba(255,255,255,.8);max-width:56ch;margin-top:22px}
.pro-hero .botoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---- Seção escura reutilizável (stakes / por que) ---- */
.pro-dark{background:#200d26;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.pro-dark .titulo-secao,.pro-h-w{color:#fff!important}
.pro-dark .intro-secao{color:rgba(255,255,255,.72)}
.stakes-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;margin-top:44px}
@media(max-width:860px){.stakes-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
.stakes-lista .ri{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.stakes-lista .ri:first-child{border-top:none}
.stakes-lista .ic{width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:var(--champanhe)}
.stakes-lista .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.stakes-lista h3{color:#fff;font-size:18px;margin-bottom:4px}
.stakes-lista p{color:rgba(255,255,255,.68);font-size:14.5px}

/* ---- Componente: MEDIDOR (g-meter) ---- */
.g-meter{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);padding:34px}
.g-meter .lbl{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--champanhe)}
.g-meter .val{font-family:'Montserrat';font-weight:700;font-size:clamp(38px,6vw,58px);color:#fff;line-height:1;margin:10px 0}
.g-meter .val small{font-size:22px;color:var(--champanhe-claro)}
.g-meter .mbar{height:10px;background:rgba(255,255,255,.08);overflow:hidden;margin:18px 0 10px}
.g-meter .mbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b79a6b,#e0574f);transition:width 1.6s cubic-bezier(.3,.8,.3,1)}
.g-meter .fonte{font-family:'Courier New',monospace;font-size:11.5px;color:rgba(255,255,255,.45)}

/* ---- Componente: FLUXO (g-fluxo, SVG) ---- */
.g-fluxo-wrap{margin-top:50px;background:#fff;border:1px solid var(--linha);padding:40px 36px;position:relative;overflow:hidden}
.g-fluxo-wrap::before,.g-fluxo-wrap::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none}
.g-fluxo-wrap::before{top:-1px;left:-1px;border-top:2px solid var(--champanhe);border-left:2px solid var(--champanhe)}
.g-fluxo-wrap::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--champanhe);border-right:2px solid var(--champanhe)}
.g-fluxo{max-width:100%}
.g-fluxo svg{width:100%;height:auto;display:block}
.g-fluxo .node{fill:#fff;stroke:var(--roxo);stroke-width:1.5}
.g-fluxo .node.core{fill:var(--roxo)}
.g-fluxo .lbl{font-family:'Montserrat';font-size:13px;font-weight:600;fill:var(--roxo)}
.g-fluxo .lbl.w{fill:#fff}
.g-fluxo .conn{fill:none;stroke:var(--champanhe);stroke-width:2;stroke-dasharray:6 8;opacity:.5}
.g-fluxo .flow{fill:none;stroke:var(--champanhe);stroke-width:2.5;stroke-dasharray:10 300;stroke-dashoffset:0;stroke-linecap:round}
.g-fluxo.on .flow{animation:proCorre 2.4s linear infinite}
@keyframes proCorre{to{stroke-dashoffset:-310}}
.g-nota{font-family:'Courier New',monospace;font-size:12px;color:var(--texto-suave);margin-top:18px;text-align:center}

/* ---- Componente: CHECKLIST (g-checklist) ---- */
.g-checklist{background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);padding:12px 8px}
.g-checklist .ci{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--linha);font-size:15px;color:var(--texto);opacity:.45;transition:opacity .4s}
.g-checklist .ci:last-child{border-bottom:none}
.g-checklist .ci .cx{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--linha);position:relative;transition:.3s}
.g-checklist.on .ci{opacity:1}
.g-checklist.on .ci .cx{border-color:#2f8f57;background:#2f8f57}
.g-checklist .ci .cx::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s}
.g-checklist.on .ci .cx::after{transform:rotate(45deg) scale(1)}
.g-checklist.on .ci:nth-child(1){transition-delay:.1s}.g-checklist.on .ci:nth-child(1) .cx{transition-delay:.1s}
.g-checklist.on .ci:nth-child(2){transition-delay:.4s}.g-checklist.on .ci:nth-child(2) .cx{transition-delay:.4s}
.g-checklist.on .ci:nth-child(3){transition-delay:.7s}.g-checklist.on .ci:nth-child(3) .cx{transition-delay:.7s}
.g-checklist.on .ci:nth-child(4){transition-delay:1s}.g-checklist.on .ci:nth-child(4) .cx{transition-delay:1s}
.g-checklist.on .ci:nth-child(5){transition-delay:1.3s}.g-checklist.on .ci:nth-child(5) .cx{transition-delay:1.3s}
.g-checklist.on .ci:nth-child(6){transition-delay:1.6s}.g-checklist.on .ci:nth-child(6) .cx{transition-delay:1.6s}

/* ---- Componente: RADIAL (g-radial) ---- */
.g-radial{background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);padding:36px}
.g-radial .anel-wrap{display:flex;align-items:center;gap:28px;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--linha)}
.g-radial .anel{position:relative;width:118px;height:118px;flex:none}
.g-radial .anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-radial .anel .trilho{stroke:rgba(67,30,72,.1)}
.g-radial .anel .prog{stroke:var(--champanhe);stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.3,.8,.3,1)}
.g-radial .anel-c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Montserrat';font-weight:700;font-size:30px;color:var(--roxo)}
.g-radial .anel-c small{font-size:16px}
.g-radial .anel-lg h3{font-size:20px;margin-bottom:4px}
.g-radial .anel-lg p{font-size:13.5px;color:var(--texto-suave)}
.g-radial .rbar{margin-bottom:15px}
.g-radial .rbar .top{display:flex;justify-content:space-between;font-family:'Montserrat';font-size:13.5px;margin-bottom:6px}
.g-radial .rbar .top b{color:var(--roxo);font-weight:600}
.g-radial .rbar .trk{height:7px;background:rgba(67,30,72,.08);overflow:hidden}
.g-radial .rbar .fl{height:100%;width:0;background:linear-gradient(90deg,var(--roxo),var(--roxo-toque));transition:width 1.4s cubic-bezier(.3,.8,.3,1)}

/* ---- Componente: STEPPER (g-stepper) ---- */
.g-stepper{position:relative;margin-top:8px}
.g-stepper .sline{position:absolute;top:34px;left:9%;right:9%;height:2px;background:var(--linha)}
.g-stepper .sline i{position:absolute;inset:0;width:0;background:var(--champanhe);transition:width 2s ease}
.g-stepper.on .sline i{width:100%}
@media(max-width:820px){.g-stepper .sline{display:none}}
.g-stepper .ssteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;z-index:2}
@media(max-width:820px){.g-stepper .ssteps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.g-stepper.s3 .ssteps{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-stepper.s5 .ssteps{grid-template-columns:repeat(5,minmax(0,1fr))}
.sstep{text-align:center}
.sstep .sno{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:#fff;border:2px solid var(--linha);color:var(--texto-suave);display:flex;align-items:center;justify-content:center;transition:.4s}
.sstep .sno svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7}
.g-stepper.on .sstep:nth-child(1) .sno{border-color:var(--roxo);color:var(--roxo);transition-delay:.2s}
.g-stepper.on .sstep:nth-child(2) .sno{border-color:var(--roxo);color:var(--roxo);transition-delay:.7s}
.g-stepper.on .sstep:nth-child(3) .sno{border-color:var(--roxo);color:var(--roxo);transition-delay:1.2s}
.g-stepper.on .sstep:nth-child(4) .sno{border-color:var(--roxo);background:var(--roxo);color:#fff;transition-delay:1.7s}
.g-stepper.on .sstep:nth-child(5) .sno{border-color:var(--roxo);background:var(--roxo);color:#fff;transition-delay:2.1s}
.sstep h3{font-size:18px;margin-bottom:8px}
.sstep p{font-size:14px;color:var(--texto-suave);max-width:22ch;margin:0 auto}
@media(max-width:820px){.sstep{text-align:left}.sstep .sno{margin:0 0 14px}.sstep p{margin:0}}

/* ---- Mockup: DOCUMENTO/TABELA (m-doc) ---- */
.m-doc{background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.m-doc table{min-width:440px}
.m-doc .head{position:sticky;left:0}
.m-doc .head{display:flex;align-items:center;gap:8px;padding:14px 20px;background:#200d26;color:#fff}
.m-doc .head .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}
.m-doc .head b{font-family:'Courier New',monospace;font-size:12.5px;letter-spacing:.08em;margin-left:8px;color:rgba(255,255,255,.8)}
.m-doc table{width:100%;border-collapse:collapse;font-size:13.5px}
.m-doc th{font-family:'Montserrat';text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);padding:14px 18px;border-bottom:1px solid var(--linha)}
.m-doc td{padding:13px 18px;border-bottom:1px solid var(--linha);color:var(--texto)}
.m-doc tr:last-child td{border-bottom:none}
.rb{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:3px}
.rb.b{background:#e9f4ec;color:#2f7a45}.rb.m{background:#fbf1e2;color:#8a6d3b}.rb.a{background:#fdeae4;color:#b5502f}.rb.c{background:#f7dede;color:#a12b2b}
.m-nota{font-family:'Courier New',monospace;font-size:11.5px;color:var(--texto-suave);margin-top:14px}

/* ---- Mockup: CERTIFICADO (m-cert) ---- */
.m-cert{background:#fffdf8;border:1px solid rgba(183,154,107,.5);box-shadow:var(--sombra);padding:34px;position:relative;text-align:center}
.m-cert::after{content:"";position:absolute;inset:12px;border:1px solid rgba(183,154,107,.4);pointer-events:none}
.m-cert .marca{font-family:'Montserrat';font-weight:700;letter-spacing:.2em;color:var(--roxo);font-size:15px;position:relative;z-index:2}
.m-cert .marca span{display:block;font-size:8px;letter-spacing:.4em;color:var(--champanhe);margin-top:3px}
.m-cert h4{font-family:'Montserrat';font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);margin:22px 0 6px}
.m-cert .tit{font-size:19px;color:var(--roxo);font-weight:600;line-height:1.3;max-width:24ch;margin:0 auto}
.m-cert .selo{width:78px;height:78px;margin:20px auto 4px;border-radius:50%;border:2px solid var(--champanhe);display:flex;align-items:center;justify-content:center;color:var(--champanhe);font-family:'Montserrat';font-size:10px;font-weight:700;letter-spacing:.08em;text-align:center;line-height:1.2;transform:scale(1.6) rotate(-14deg);opacity:0}
.m-cert.on .selo{animation:proCarimba .7s cubic-bezier(.3,1.4,.5,1) .3s forwards}
@keyframes proCarimba{to{transform:scale(1) rotate(-14deg);opacity:1}}
.m-cert .linha{height:1px;background:rgba(183,154,107,.4);margin:20px auto 12px;max-width:180px}
.m-cert .nome{font-size:15px;color:var(--texto)}
.m-cert .rod{display:flex;justify-content:space-between;font-family:'Montserrat';font-size:10px;color:var(--texto-suave);margin-top:14px;position:relative;z-index:2}

/* ---- Mockup: SELO ISO (m-seal) ---- */
.m-seal{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);padding:44px}
.m-seal .ring{width:180px;height:180px;position:relative}
.m-seal .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.m-seal .ring .bg{stroke:rgba(67,30,72,.1)}
.m-seal .ring .fg{stroke:var(--champanhe);stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.8,.3,1)}
.m-seal .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.m-seal .c b{font-family:'Montserrat';font-weight:700;color:var(--roxo);font-size:26px;line-height:1}
.m-seal .c span{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.14em;color:var(--champanhe);text-transform:uppercase;margin-top:6px}
.m-seal .leg{font-family:'Montserrat';font-size:13px;color:var(--texto-suave);margin-top:22px;text-align:center}

/* ---- Entrega (lista + visual) ---- */
.pro-entrega{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:50px}
@media(max-width:860px){.pro-entrega{grid-template-columns:minmax(0,1fr);gap:36px}}
.pro-entrega.rev{direction:rtl}.pro-entrega.rev>*{direction:ltr}
.pro-lista li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--linha);font-size:15.5px;color:var(--texto)}
.pro-lista li:first-child{border-top:none}
.pro-lista .ck{width:24px;height:24px;flex:none;border-radius:50%;background:rgba(126,224,160,.14);color:#2f8f57;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.pro-lista b{color:var(--roxo)}

/* ---- Fases ---- */
.pro-fases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:50px;background:var(--linha);border:1px solid var(--linha)}
@media(max-width:820px){.pro-fases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pro-fases{grid-template-columns:minmax(0,1fr)}}
.pro-fase{background:var(--offwhite);padding:30px 26px}
.pro-fase .n{font-family:'Courier New',monospace;font-size:13px;font-weight:700;color:var(--champanhe)}
.pro-fase h3{font-size:19px;margin:12px 0 8px}
.pro-fase p{font-size:14px;color:var(--texto-suave)}

/* ---- CTA + credenciais (auto-contidos) ---- */
.cta-banda{background:linear-gradient(145deg,var(--roxo) 0%,var(--roxo-esc) 70%,var(--roxo-noite,#150818) 100%);color:#fff;text-align:center}
.cta-banda h2{color:#fff;font-size:clamp(28px,4vw,44px);max-width:22ch;margin:18px auto 0}
.cta-banda p{color:rgba(255,255,255,.75);max-width:56ch;margin:20px auto 0;font-size:16.5px}
.cta-banda .botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.sobre-cred{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cred{font-family:'Montserrat';font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--roxo);border:1px solid var(--linha);padding:8px 15px}
.pro-dark .cred{color:#fff;border-color:rgba(255,255,255,.2)}

/* ---- Ajustes mobile ---- */
@media (max-width:640px){
  .pro-hero{padding:44px 0 66px}
  .pro-tag{max-width:100%;line-height:1.6}
  .stakes-grid{gap:32px}
  .g-meter{padding:26px}
  .g-meter .val{font-size:40px}
  .g-fluxo{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .g-fluxo svg{min-width:600px}
  .g-fluxo-wrap{padding:26px 20px}
  .m-doc table{min-width:420px;font-size:12.5px}
  .m-doc th,.m-doc td{padding:11px 12px}
  .m-cert,.m-seal{padding:28px 22px}
  .g-radial{padding:26px}
  .g-radial .anel-wrap{gap:20px}
  .pro-fase{padding:24px 22px}
}

/* ---- Reduzir movimento ---- */
@media (prefers-reduced-motion: reduce){
  .pro-bits,.pro-tag i{animation:none!important}
  .g-fluxo .flow,.g-meter .mbar i,.g-checklist .ci,.g-stepper .sline i,.m-cert .selo,.g-radial .prog,.g-radial .fl,.m-seal .fg{transition:none!important;animation:none!important}
}