/* Lupa Criativa · estilo único das telas (regras em ../REGRAS.md) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600 700;font-display:swap;src:url(fontes/cormorantgaramond-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600 700;font-display:swap;src:url(fontes/cormorantgaramond-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;src:url(fontes/mulish-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;src:url(fontes/mulish-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  /* paleta tirada da arte da Lupa (amostrada em 04/11) */
  --ameixa:#671650; --ameixa-esc:#4C0D38; --ameixa-clara:#F5E6EF; --ameixa-linha:#E8CFDE;
  --dourado:#C77A3F; --dourado-esc:#8A4A1E; --dourado-claro:#FBE9D6; --cobre:#BF6839; --ouro:#EFA665;
  --oliva:#545746; --oliva-esc:#414539; --oliva-clara:#E9EAE0;
  --lilas:#D3AFC5; --salvia:#BBBBA1; --rosa:#F2757E;
  --creme:#FCF3EE; --creme-2:#F6E9E2; --branco:#FFFFFF;
  --texto:#2E2128; --cinza:#6E5E68; --linha:#EEDDE5; --perigo:#A3262E; --perigo-claro:#FBE7E8;
  --grad-ameixa:linear-gradient(135deg,#7E2168 0%,#671650 45%,#4C0D38 100%);
  --grad-ouro:linear-gradient(90deg,#BF6839,#EFA665 55%,#C77A3F);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-g:20px; --r-m:14px; --r-p:9px;
  --sombra:0 1px 2px rgba(76,13,56,.05),0 8px 24px rgba(76,13,56,.07);
  --t:170ms cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--creme);color:var(--texto);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--dourado);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== moldura da tela ===== */
.lupa{container-type:inline-size;background:var(--creme);border:1.5px solid var(--ameixa-linha);border-radius:var(--r-g);overflow:hidden;width:100%}
.lupa-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--grad-ameixa);color:#fff}
.lupa-marca{display:flex;align-items:center;gap:10px;white-space:nowrap;flex-shrink:0;font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;line-height:1}
.lupa-marca svg{width:22px;height:22px;flex-shrink:0}
.lupa-onde{min-width:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.9;text-align:right}
.lupa-corpo{padding:18px 16px 20px;display:flex;flex-direction:column;gap:14px}
@container (min-width:560px){.lupa-corpo{padding:22px 22px 24px;gap:16px}}

/* ===== tipografia ===== */
.titulo{font-family:var(--serif);font-weight:700;color:var(--ameixa);font-size:26px;line-height:1.1;margin:0}
.subtitulo{color:var(--cinza);margin:2px 0 0;font-size:14.5px}
.olho{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado-esc)}
.mini{font-size:13.5px;color:var(--cinza)}
.forte{font-weight:800;color:var(--ameixa-esc)}

/* ===== cartão ===== */
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-m);padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra)}
.cartao.destaque{border-color:var(--dourado);background:linear-gradient(180deg,#FFFDF8,#fff)}
.cartao.ok{border-color:#C9D3B6}
.cartao.escolhido{border-color:var(--ameixa);box-shadow:0 0 0 2px var(--ameixa-clara),var(--sombra)}
.cartao-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cartao h3{margin:0;font-size:15.5px;font-weight:800;color:var(--texto);line-height:1.35}
.cartao p{margin:0}
.grade{display:grid;gap:10px;grid-template-columns:1fr}
@container (min-width:560px){.grade.duas{grid-template-columns:1fr 1fr}.grade.tres{grid-template-columns:repeat(3,1fr)}}

/* ===== selos ===== */
.selo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.01em;padding:4px 10px;border-radius:999px;white-space:nowrap;line-height:1.2}
.selo svg{width:12px;height:12px}
.s-fmt{background:var(--ameixa-clara);color:var(--ameixa)}
.s-x{background:linear-gradient(135deg,#FBEBDA,#F7DCC0);color:var(--dourado-esc)}
.s-ok{background:var(--oliva-clara);color:var(--oliva-esc)}
.s-neutro{background:#F1ECEF;color:var(--cinza)}
.s-perigo{background:var(--perigo-claro);color:var(--perigo)}
.selos{display:flex;flex-wrap:wrap;gap:6px}

/* ===== botões ===== */
.botoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--ameixa);background:var(--branco);color:var(--ameixa);font-weight:800;font-size:14px;transition:background var(--t),color var(--t),transform var(--t),opacity var(--t)}
.bt:hover{background:var(--ameixa-clara)}
.bt:active{transform:translateY(1px)}
.bt.cheio{background:var(--grad-ameixa);border-color:var(--ameixa-esc);color:#fff;box-shadow:0 4px 14px rgba(103,22,80,.22)}
.bt.cheio:hover{background:var(--ameixa-esc);box-shadow:0 6px 18px rgba(103,22,80,.3)}
.bt.leve{border-color:transparent;background:transparent;padding-inline:10px}
.bt.leve:hover{background:var(--ameixa-clara)}
.bt.largo{width:100%}
.bt[disabled]{opacity:.45;cursor:not-allowed}
.bt svg{width:16px;height:16px}
@container (min-width:560px){.bt.largo{width:auto}}

/* ===== escolha (segmentado que quebra linha, nunca arrasta) ===== */
.escolha{display:flex;flex-wrap:wrap;gap:6px}
.escolha button{min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--linha);background:var(--branco);font-weight:700;font-size:13.5px;color:var(--texto);transition:all var(--t)}
.escolha button[aria-pressed="true"]{border-color:var(--ameixa);background:var(--grad-ameixa);color:#fff}

/* ===== campos ===== */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:700;font-size:13.5px}
.campo textarea,.campo input{width:100%;border:1.5px solid var(--linha);border-radius:var(--r-m);background:#fff;padding:10px 12px;font-size:15px;line-height:1.5;transition:border-color var(--t)}
.campo textarea{min-height:92px;resize:vertical}
.campo textarea:focus,.campo input:focus{border-color:var(--ameixa);outline:none}
.busca{position:relative}
.busca svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--cinza)}
.busca input{padding-left:38px;min-height:44px}

/* ===== aviso dentro da tela ===== */
.aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);font-size:14px;border:1px solid}
.aviso svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.aviso.ok{background:var(--oliva-clara);border-color:#C9D3B6;color:var(--oliva-esc)}
.aviso.info{background:var(--dourado-claro);border-color:#EBD3A6;color:var(--dourado-esc)}
.aviso.erro{background:var(--perigo-claro);border-color:#F0C3C6;color:var(--perigo)}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-20px);opacity:0;background:var(--ameixa-esc);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;transition:all var(--t);pointer-events:none;z-index:9}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ===== menu vertical ===== */
.menu{display:flex;flex-direction:column;gap:8px}
.menu-item{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-m);text-align:left;width:100%;transition:border-color var(--t),transform var(--t)}
.menu-item:hover{border-color:var(--ameixa);transform:translateX(2px)}
.menu-ico{width:36px;height:36px;border-radius:10px;background:var(--ameixa-clara);color:var(--ameixa);display:grid;place-items:center;flex-shrink:0}
.menu-ico svg{width:18px;height:18px}
.menu-txt{flex:1;min-width:0}
.menu-txt b{display:block;font-size:15px;color:var(--ameixa-esc)}
.menu-txt span{font-size:13px;color:var(--cinza)}
.menu-item .seta{width:18px;height:18px;color:var(--cinza)}
.conta{font-size:12px;font-weight:800;background:var(--dourado-claro);color:var(--dourado-esc);padding:3px 8px;border-radius:999px}

/* ===== números do início ===== */
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.numero{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-m);padding:10px 12px}
.numero b{display:block;font-family:var(--serif);font-size:30px;line-height:1;color:var(--ameixa-esc)}
.numero span{font-size:12.5px;color:var(--cinza);line-height:1.3;display:block;margin-top:4px}

/* ===== progresso ===== */
.barra{height:8px;border-radius:999px;background:var(--creme-2);overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--dourado),var(--ameixa));border-radius:999px;transition:width 300ms ease}

/* ===== ranking ===== */
.rank{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;text-align:left;width:100%;cursor:pointer;transition:border-color var(--t)}
.rank .pos{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1;color:var(--dourado)}
.rank-barra{height:6px;border-radius:999px;background:var(--creme-2);overflow:hidden;margin-top:2px}
.rank-barra i{display:block;height:100%;background:var(--dourado);border-radius:999px}
.rank.alto .rank-barra i{background:linear-gradient(90deg,var(--dourado),var(--ameixa))}

/* ===== raio-x ===== */
.passos-estrutura{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.passos-estrutura span{background:var(--creme-2);border-radius:var(--r-p);padding:4px 10px;font-size:13.5px;font-weight:700}
.passos-estrutura svg{width:14px;height:14px;color:var(--dourado)}
.porque{border-left:4px solid var(--dourado);background:#FFFCF5}

/* ===== conteúdo ===== */
.cena{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px}
.cena .n{width:30px;height:30px;border-radius:50%;background:var(--ameixa-clara);color:var(--ameixa);font-weight:800;display:grid;place-items:center;font-size:13px}
.cena dl{margin:0;display:grid;gap:4px}
.cena dt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.cena dd{margin:0 0 4px}
.versoes{display:flex;align-items:center;gap:6px}
.versoes span{font-size:13px;font-weight:700;color:var(--cinza);min-width:96px;text-align:center}
.bt-ico{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%}

/* ===== envio ===== */
.zona{border:2px dashed var(--ameixa-linha);border-radius:var(--r-g);background:#FFFDFB;padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color var(--t),background var(--t)}
.zona.sobre{border-color:var(--ameixa);background:var(--ameixa-clara)}
.zona svg.grande{width:34px;height:34px;color:var(--ameixa)}
.caminho{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;text-align:left;width:100%;cursor:pointer}
.caminho .menu-ico{width:44px;height:44px}
.etapas-envio{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left}
.etapa-envio{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cinza)}
.etapa-envio.feita{color:var(--oliva-esc)}
.etapa-envio.agora{color:var(--ameixa-esc);font-weight:700}
.etapa-envio svg{width:16px;height:16px}
.ajuda ol{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}

/* ===== agenda ===== */
.legenda{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--cinza)}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.mes{display:grid;grid-template-columns:1fr;gap:6px}
.mes-cab{display:none}
.dia{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-p);padding:8px 10px;display:flex;align-items:center;gap:10px;min-height:46px}
.dia.fora{display:none}
.dia.hoje{border-color:var(--dourado);box-shadow:inset 0 0 0 1px var(--dourado)}
.dia .d{font-size:12.5px;font-weight:800;color:var(--cinza);width:58px;flex-shrink:0}
.dia .itens{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.dia.sem-nada{display:none}
.ev{border:0;border-radius:6px;padding:4px 8px;font-size:12.5px;font-weight:700;text-align:left;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.post{background:var(--ameixa);color:#fff}
.ev.grav{background:var(--dourado-claro);color:var(--dourado-esc)}
.ev.vazio{background:transparent;border:1.5px dashed #C9B8C3;color:var(--cinza)}
@container (min-width:560px){
  .mes{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .mes-cab{display:block;font-size:11.5px;font-weight:800;color:var(--cinza);text-align:center;letter-spacing:.08em}
  .dia{flex-direction:column;align-items:stretch;min-height:84px;padding:6px;gap:4px}
  .dia.fora{display:flex;visibility:hidden}
  .dia.sem-nada{display:flex}
  .dia .d{width:auto;font-size:12px}
  .dia .d .sem{display:none}
  .dia .itens{flex-direction:column}
  .ev{font-size:11.5px;padding:3px 6px}
}
.detalhe{border-top:1px solid var(--linha);padding-top:12px}

/* ===== ganchos ===== */
.gancho-txt{font-size:15.5px;font-weight:800;color:var(--texto);line-height:1.4}

/* ===== utilidades ===== */
.linha-sep{height:1px;background:var(--linha);margin:2px 0}
.entra{animation:entra 200ms ease both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vazio-estado{text-align:center;padding:22px 10px;color:var(--cinza)}
.vazio-estado b{display:block;color:var(--ameixa-esc);font-size:15px;margin-bottom:4px}