/* PILAR ONLINE | Aviso de desenvolvimento com órbita de benefícios
 * Instalar em: /_css/aviso_desenvolvimento.css
 * Identidade: vermelho #C1272D, laranja #F47016, branco, Poppins.
 */
.po-dev-dialog,.po-dev-dialog *{box-sizing:border-box}
.po-dev-dialog{
    position:fixed;inset:0;margin:auto;padding:0;border:1px solid rgba(255,255,255,.65);
    border-radius:26px;width:min(750px,calc(100vw - 30px));max-width:750px;
    max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;
    background:#fff;color:#253041;
    box-shadow:0 30px 100px rgba(15,23,42,.32);
    font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    scrollbar-width:thin;scrollbar-color:#e4e7ec transparent;
}
.po-dev-dialog:not([open]){display:none!important}
.po-dev-dialog::backdrop{background:rgba(22,30,41,.63);backdrop-filter:blur(5px)}
.po-dev-card{
    position:relative;overflow:hidden;
    padding:24px 32px 27px;
    background:radial-gradient(circle at -4% 15%,rgba(244,112,22,.10),transparent 18%),
      radial-gradient(circle at 103% 84%,rgba(193,39,45,.075),transparent 25%),#fff;
}
.po-dev-card:before{
    position:absolute;inset:0 0 auto;content:"";height:4px;
    background:linear-gradient(90deg,#C1272D,#F47016 74%);
}
.po-dev-card:after{
    position:absolute;top:66px;left:-35px;width:95px;height:95px;
    border-radius:27px;transform:rotate(45deg);content:"";
    background:linear-gradient(135deg,rgba(244,112,22,.10),rgba(193,39,45,.035));
    pointer-events:none;
}
.po-dev-top{display:flex;align-items:center;flex-direction:column;gap:3px;margin:0 auto;text-align:center}
.po-dev-logo{display:block;max-width:min(275px,68%);width:255px;height:65px;object-fit:contain;object-position:center}
.po-dev-subtitle{display:block;color:#718095;letter-spacing:.19em;font-size:9px;font-weight:600}
.po-dev-close{
    position:absolute;z-index:10;top:14px;right:14px;width:36px;height:36px;
    display:grid;place-items:center;padding:7px;border:1px solid #e7e9ed;border-radius:50%;
    color:#738091;background:rgba(255,255,255,.93);cursor:pointer;
    transition:background .18s ease,transform .18s ease;
}
.po-dev-close:hover{background:#f7f8fa;transform:rotate(90deg)}
.po-dev-close svg{width:20px;height:20px}
.po-dev-features{position:relative;margin:5px auto 0;max-width:660px}
.po-dev-orbit{width:100%;height:425px;position:relative}
.po-dev-orbit-track{
    position:absolute;top:51%;left:50%;width:470px;height:305px;
    transform:translate(-50%,-50%);border:1px dashed rgba(244,112,22,.45);
    border-radius:50%;pointer-events:none;
}
.po-dev-orbit-track:after,.po-dev-orbit-track:before{
    content:"";position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;
    background:#F47016;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #fff3e9;
}
.po-dev-orbit-track:after{left:100%;background:#C1272D;box-shadow:0 0 0 4px #fff0f0}
.po-dev-orbit-track-inner{width:310px;height:310px;border:1px solid rgba(193,39,45,.14)}
.po-dev-orbit-track-inner:before,.po-dev-orbit-track-inner:after{display:none}
.po-dev-orbit-core{
    position:absolute;z-index:1;left:50%;top:51%;transform:translate(-50%,-50%);
    width:206px;height:206px;border:1px solid rgba(244,112,22,.16);border-radius:50%;
    background:radial-gradient(circle at center,white 57%,#fff4ed 100%);
    box-shadow:0 0 0 16px rgba(244,112,22,.045),0 18px 50px rgba(193,39,45,.07);
    display:grid;place-items:center;
}
.po-dev-core-halo{
    height:78%;width:78%;border-radius:50%;display:grid;place-items:center;
    background:#fff;box-shadow:0 6px 26px rgba(85,24,32,.065);
}
.po-dev-core-halo img{display:block;width:81%;height:81%;object-fit:contain;object-position:center}
.po-dev-feature{
    position:absolute;z-index:2;transform:translate(-50%,0);display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;gap:6px;text-align:center;width:126px;
    color:#253041;line-height:1.25;pointer-events:none;
}
.po-dev-feature-bubble{
    display:grid;place-items:center;width:57px;height:57px;flex:0 0 auto;
    border:1px solid #f1e2db;border-radius:50%;background:#fff;
    box-shadow:0 6px 16px rgba(25,31,43,.065),0 0 0 5px rgba(255,245,239,.85);
    color:var(--po-bubble-color,#C1272D);
}
.po-dev-feature-bubble svg{height:28px;width:28px;display:block}
.po-dev-feature-label{font-size:10px;font-weight:600;max-width:110px;min-height:24px;text-wrap:balance}
/* Os 10 satélites percorrem a órbita em sentido horário. */
.po-dev-feature--estoque{left:50%;top:1%;--po-bubble-color:#ED831B}
.po-dev-feature--logistica{left:78%;top:7%;--po-bubble-color:#D93C36}
.po-dev-feature--pagamentos{left:90%;top:30%;--po-bubble-color:#3274D9}
.po-dev-feature--marketplace{left:91%;top:57%;--po-bubble-color:#D33B39}
.po-dev-feature--entregas{left:77%;top:81%;--po-bubble-color:#EA8A24}
.po-dev-feature--catalogo{left:50%;top:83%;--po-bubble-color:#8055C9}
.po-dev-feature--visibilidade{left:23%;top:81%;--po-bubble-color:#E87D20}
.po-dev-feature--vendas{left:9%;top:57%;--po-bubble-color:#CE3D3B}
.po-dev-feature--gestao{left:10%;top:30%;--po-bubble-color:#E8901D}
.po-dev-feature--organizacao{left:22%;top:7%;--po-bubble-color:#199E62}
.po-dev-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;margin:9px auto 0;max-width:670px}
.po-dev-stage{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:999px;background:#fdecec;color:#B72B2F;
    font-size:10px;font-weight:700;letter-spacing:.045em;padding:8px 14px;
}
.po-dev-stage svg{height:17px;width:17px;display:block}
.po-dev-dialog h2{margin:14px 0 8px;font-size:clamp(22px,3.4vw,30px);line-height:1.24;letter-spacing:-.032em;color:#232b37;font-weight:700}
.po-dev-dialog h2 span{background:linear-gradient(95deg,#C1272D,#F47016);background-clip:text;-webkit-background-clip:text;color:transparent}
.po-dev-description{margin:0 auto;max-width:605px;color:#596577;line-height:1.65;font-size:12.5px}
.po-dev-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:14px;
    width:min(340px,100%);min-height:49px;margin-top:19px;padding:10px 24px;
    border:0;border-radius:999px;background:linear-gradient(100deg,#C1272D,#D62C30);color:#fff;
    font:600 13px Poppins,system-ui,sans-serif;box-shadow:0 8px 19px rgba(193,39,45,.17);
    cursor:pointer;transition:box-shadow .18s ease,transform .18s ease;
}
.po-dev-primary:hover{box-shadow:0 11px 23px rgba(193,39,45,.27);transform:translateY(-1px)}
.po-dev-primary span{font-size:19px;line-height:1}
.po-dev-primary:focus-visible,.po-dev-close:focus-visible{outline:3px solid #F47016;outline-offset:3px}
.po-dev-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;font-size:10px;color:#8893A2;line-height:1.5}
.po-dev-note svg{height:15px;width:15px;flex:0 0 auto}
@media(max-width:720px){
    .po-dev-dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 18px);border-radius:20px}
    .po-dev-card{padding:20px 22px 23px}
    .po-dev-orbit{height:415px}
    .po-dev-orbit-track{width:min(70vw,400px);height:280px}
    .po-dev-orbit-track-inner{width:250px;height:250px}
    .po-dev-orbit-core{width:170px;height:170px}
    .po-dev-feature{width:106px}
    .po-dev-feature-bubble{width:50px;height:50px}
    .po-dev-feature-bubble svg{width:24px;height:24px}
    .po-dev-feature-label{font-size:9px}
    .po-dev-feature--logistica,.po-dev-feature--entregas{left:79%}
    .po-dev-feature--organizacao,.po-dev-feature--visibilidade{left:21%}
}
@media(max-width:520px){
    .po-dev-card{padding:17px 15px 22px}
    .po-dev-logo{height:52px;width:215px;max-width:69%}
    .po-dev-subtitle{font-size:7.5px;letter-spacing:.14em}
    .po-dev-features{margin-top:11px}
    /* Em celulares compactos, grid circularizado mantém todos os benefícios legíveis. */
    .po-dev-orbit{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;justify-items:center;gap:11px 9px;padding:0 2px}
    .po-dev-orbit-track{display:none}
    .po-dev-orbit-core{position:relative;top:auto;left:auto;transform:none;grid-column:1/-1;grid-row:1;width:122px;height:122px;margin:7px auto 10px;box-shadow:0 0 0 12px rgba(244,112,22,.045),0 8px 28px rgba(193,39,45,.07)}
    .po-dev-feature{position:relative;top:auto!important;left:auto!important;transform:none;width:100%;gap:5px;min-height:75px;display:flex;flex-direction:row;text-align:left;justify-content:center;pointer-events:auto}
    .po-dev-feature-bubble{width:43px;height:43px;box-shadow:0 4px 12px rgba(25,31,43,.06);margin:0;flex:0 0 auto}
    .po-dev-feature-bubble svg{width:21px;height:21px}
    .po-dev-feature-label{font-size:10px;max-width:88px;min-height:0}
    .po-dev-copy{margin-top:12px}
    .po-dev-dialog h2{font-size:23px;line-height:1.25}
    .po-dev-description{font-size:12px;line-height:1.55}
    .po-dev-primary{width:100%;font-size:13px}
}
@media(max-width:345px){
    .po-dev-card{padding-left:12px;padding-right:12px}
    .po-dev-feature{gap:4px}
    .po-dev-feature-label{font-size:9.5px;max-width:75px}
    .po-dev-feature-bubble{width:39px;height:39px}
    .po-dev-note{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.po-dev-close,.po-dev-primary{transition:none}}
