/* Devint - metodologia page styles (shared rules are in ../common.css) */

.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.mstat{background:var(--card);border:none;border-radius:16px;padding:24px;box-shadow:0 6px 22px -12px rgba(1,28,76,.18)}
.mstat .big{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--acc)}
.mstat .big small{font-size:13px;font-weight:700;color:var(--muted)}
.mstat p{font-size:12.5px;color:#5A5D66;line-height:1.55;margin-top:8px}
.mrules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:26px}
.mrule{display:flex;flex-direction:column;gap:10px;background:var(--card);border:none;border-radius:16px;padding:18px;font-size:13px;line-height:1.6;color:#5A5D66;box-shadow:0 6px 22px -12px rgba(1,28,76,.18)}
.mrule svg{flex-shrink:0;margin-top:2px}
.mrule b{display:block;font-size:13.5px;color:var(--navy);margin-bottom:7px}
.mdimgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:44px;align-items:start}
.nb{white-space:nowrap}
.mdim{transition:box-shadow .25s,border-color .25s}
.mdim:hover{box-shadow:0 18px 44px -18px rgba(1,28,76,.16)}
.mdimhd{display:flex;align-items:flex-start;gap:14px;padding:22px;cursor:pointer;width:100%;text-align:left}
.mdimhd:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:16px}
.mdim .ic{width:40px;height:40px;border-radius:11px;flex-shrink:0}
.mdim .ic svg{width:21px;height:21px}
.mdimtt{flex:1;min-width:0}
.mdim h3{font-size:16px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:7px;line-height:1.3}
.mdim .sig{display:block;font-size:12.5px;font-weight:700;color:var(--body);margin-top:5px;min-height:41px}
.mdim .chev{width:16px;height:16px;flex-shrink:0;color:var(--muted);margin-top:11px;transition:transform .25s}
.mdim.open .chev{transform:rotate(180deg)}
.mdimbd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1)}
.mdim.open .mdimbd{grid-template-rows:1fr}
.mdimbdin{overflow:hidden}
.mdim p{font-size:13px;color:#5A5D66;line-height:1.62;padding:0 22px}
.mdim .peso{display:inline-block;font-size:11px;font-weight:800;color:#0B8A7C;background:rgba(47,220,201,.12);padding:4px 10px;border-radius:999px;margin:14px 22px 22px}
.tip{position:relative;display:inline-flex;align-items:center;cursor:help;color:var(--muted);flex-shrink:0}
.tip>svg{width:14px;height:14px}
.tipbox{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);width:250px;background:var(--navy);color:#DCE5F5;font-size:11.5px;font-weight:500;line-height:1.55;padding:10px 12px;border-radius:9px;box-shadow:0 12px 30px rgba(1,28,76,.28);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:30;pointer-events:none}
.tipbox::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--navy)}
.tip.on .tipbox{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (hover:hover){.tip:hover .tipbox,.tip:focus-visible .tipbox{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}}
.mzones{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:26px 0 8px}
.mzone{border-radius:14px;padding:20px 22px;font-size:13px;line-height:1.6}
.mzone b{display:block;font-size:13.5px;margin-bottom:4px}
.mzone.abaixo{background:#FDECEC;color:#7A2C17}
.mzone.dentro{background:#EAF2FD;color:#123B7A}
.mzone.acima{background:#DCF3EC;color:#0B5E49}
.mtable{width:100%;border-collapse:collapse;overflow:hidden;margin-top:26px}
.mtable th{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 18px;background:#F5F6F8;border-bottom:1px solid var(--bdr)}
.mtable td{padding:14px 18px;font-size:13.5px;color:var(--body);border-bottom:1px solid #EEF0F3;vertical-align:middle}
.mtable tr:last-child td{border-bottom:none}
.mtable .dimname{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--navy);white-space:nowrap}
.mtable .dimname svg{width:16px;height:16px;flex-shrink:0}
.mtable .faixa{font-weight:800;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.mtablewrap{overflow-x:auto}
.mnote{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:16px;max-width:80ch}
.mrule.ai b{color:var(--navy)}
.mpesos{display:grid;grid-template-columns:1fr;gap:16px 40px;margin-top:10px}
.mpesos .sl{margin-top:0}
.mlvlwrap{position:relative;margin-top:78px}
.mlvls{display:grid;grid-template-columns:none;align-items:start;padding-top:8px}
.mlvl{grid-area:1/1;width:70%;justify-self:start;position:relative;border-radius:18px;padding:70px 22px 26px;text-align:center;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s ease;will-change:transform}
.mlvl[data-pos="0"]{transform:none;opacity:1;z-index:3;pointer-events:auto}
.mlvl[data-pos="1"]{transform:translateX(34%) scale(.69);opacity:.55;z-index:2;cursor:pointer}
.mlvl[data-pos="2"]{transform:translateX(52%) scale(.55);opacity:.3;z-index:1;cursor:pointer}
.mlvl:not([data-pos="0"]) canvas{pointer-events:none}
@media (prefers-reduced-motion:reduce){.mlvl{transition:none}}
.mlvl.junior{background:linear-gradient(180deg,#E9C6A7 0%,#EDDCCC 100%)}
.mlvl.pleno{background:linear-gradient(180deg,#C7CED8 0%,#E4EBF5 100%)}
.mlvl.senior{background:linear-gradient(180deg,#E7CF95 0%,#F8EAD3 100%)}
.mlvl .hexbg{position:absolute;inset:0;border-radius:18px;overflow:hidden;pointer-events:none}
.mlvl .hexbg::before,.mlvl .hexbg::after{content:"";position:absolute;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.24);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mlvl .hexbg::before{width:260px;height:300px;top:-128px}
.mlvl .hexbg::after{width:176px;height:203px;top:-102px}
.mlvl .badge{position:absolute;top:-62px;left:50%;transform:translateX(-50%);width:132px;height:auto}
.mlvl h4{font-size:19px;font-weight:800;color:var(--navy);margin-bottom:6px;position:relative}
.mlvl .foco{font-size:12.5px;color:#4A4D55;line-height:1.55;position:relative;max-width:30ch;margin:0 auto}
.mlvl canvas{display:block;margin:14px auto 0;max-width:100%;height:auto;position:relative}
.mlvlctl{gap:16px;margin-top:20px;width:70%}
.mlvlnav{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--bdr2);color:var(--navy);cursor:pointer;box-shadow:0 6px 18px -6px rgba(1,28,76,.25);flex-shrink:0}
.mlvlnav svg{width:18px;height:18px}
.mlvlnav[disabled]{opacity:.35;cursor:default}
.mlvldots{display:flex;justify-content:center;gap:7px}
.mlvldots i{width:7px;height:7px;border-radius:50%;background:var(--bdr2);transition:background .2s,width .2s}
.mlvldots i.on{background:var(--acc);width:20px;border-radius:4px}
@media (max-width:1180px){.mrules{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){.mstats{grid-template-columns:1fr 1fr}.mdimgrid{grid-template-columns:1fr}.mzones{grid-template-columns:1fr}.mrules{grid-template-columns:1fr}.mrule{flex-direction:row;gap:13px;padding:20px 22px}.mpesos{grid-template-columns:1fr;gap:14px}}
@media (max-width:1080px){
  .mlvlwrap{margin-top:62px}
  .mlvl{width:78%}
  .mlvlctl{width:78%}
  .mlvl[data-pos="1"]{transform:translateX(26%) scale(.69)}
  .mlvl[data-pos="2"]{transform:translateX(42%) scale(.55)}
}
@media (max-width:600px){
  .mlvl{width:86%;padding:64px 12px 22px}
  .mlvlctl{width:86%}
  .mlvl[data-pos="1"]{transform:translateX(24%) scale(.69)}
  .mlvl[data-pos="2"]{transform:translateX(36%) scale(.55)}
  .mrule{padding:18px}
  .mzone{padding:18px}
}
.mhex{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;margin-top:44px}
.mhexchart{display:flex;flex-direction:column;align-items:center}
.mhexchart canvas{max-width:100%;height:auto}
.mhexinfo>p{font-size:14.5px;line-height:1.75;color:#3E4046;margin-top:10px}
.mhexleg{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mhexleg span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px}
.mhexleg svg{width:20px;height:20px;flex-shrink:0}
.mhexnote{font-size:12px;color:#8A8C93;margin-top:16px;text-align:center}
@media (max-width:920px){.mhex{grid-template-columns:1fr;gap:26px}}
.methero h1{max-width:75%}
.methero p.sub{max-width:75%}
.methero{padding-bottom:0;background:
  radial-gradient(circle 240px at calc(100% - 30px) 150px, rgba(170,255,255,.42), transparent 72%),
  radial-gradient(circle 300px at calc(100% + 40px) 900px, rgba(232,163,220,.24), transparent 72%),
  transparent}
.methero::before{display:none}
.heromock{position:relative;z-index:1}
.pageorbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pageorbs span{position:absolute;width:1372px;height:1372px;border-radius:50%;filter:blur(50px);
  background:radial-gradient(closest-side circle,
    rgba(111,160,236,.22) 0%,
    rgba(88,132,232,.15) 38%,
    rgba(40,82,224,.075) 62%,
    rgba(18,57,219,.028) 80%,
    rgba(18,57,219,.008) 92%,
    transparent 100%)}
.pageorbs .tr{right:-540px;top:-540px}
.pageorbs .bl{left:-540px;bottom:-540px}
@media (max-width:760px){
  .pageorbs span{width:760px;height:760px;filter:blur(34px)}
  .pageorbs .tr{right:-300px;top:-300px}
  .pageorbs .bl{left:-300px;bottom:-300px}
}
.heromock{--mh:396px;--mgap:28px;margin-top:114px;width:100%;display:flex;flex-direction:column;gap:var(--mgap)}
#devscore{padding-top:120px}
.mrow{overflow:hidden}
.mtrack{display:flex;width:max-content;will-change:transform}
.mtrack img{height:var(--mh);width:auto;max-width:none;margin-right:var(--mgap);display:block}
.mrow1 .mtrack{animation:mscrollR 120s linear infinite}
.mrow2 .mtrack{animation:mscrollL 125s linear infinite}
@keyframes mscrollL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.3333%,0,0)}}
@keyframes mscrollR{from{transform:translate3d(-33.3333%,0,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none}}
@media (max-width:1180px){.methero h1,.methero p.sub{max-width:none}}
@media (max-width:760px){
  .methero{background:radial-gradient(circle 200px at calc(100% - 10px) 90px, rgba(170,255,255,.4), transparent 72%),transparent}
  .heromock{--mh:150px;--mgap:12px;margin-top:84px}
  .mrow1 .mtrack{animation-duration:52s}.mrow2 .mtrack{animation-duration:54s}
  #devscore{padding-top:56px}
}
.msec-center{text-align:center}
.msec-center h2.st,.msec-center p.sl{margin-left:auto;margin-right:auto}
.mcrit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.mcrit .mdimgrid{grid-template-columns:1fr 1fr;margin-top:0}
.mpesosec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:-100px}
.mpesostxt p.sl+p.sl{margin-top:14px}
@media (max-width:960px){
  .mcrit{grid-template-columns:1fr;gap:32px}
  .mcrit .mdimgrid{grid-template-columns:1fr}
  .mpesosec{grid-template-columns:1fr;gap:32px;margin-top:24px}
  .mpesosec .mpesostxt{order:-1}
}
.msec-split{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;align-items:start}
.msec-split p.sl{margin-top:0}
.msec-split h2.st{margin-top:2px}
@media (max-width:860px){.msec-split{grid-template-columns:1fr}}