/* ===== Preciosa — popups de captura (entrada + saída) =====
   Mobile-first: base = folha inferior (bottom sheet), fácil de alcançar com
   o polegar; a partir de 641px passa a caixa centrada.
   Tokens da marca alinhados com o site (CLAUDE.md §4). */
.plpop{
  --pl-onix:#111111;--pl-marfim:#FAFAF8;--pl-branco:#FFFFFF;--pl-rosa:#E8639A;
  --pl-rosa-soft:#F7E4EC;--pl-muted:#6B6B6B;--pl-border:#E4E4E2;
  --pl-surface-alt:#F2F2F0;--pl-success:#3E8E6E;--pl-error:#C0392B;
  --pl-ff-disp:'Fraunces',Georgia,serif;
  --pl-ff-ui:'Inter','Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--pl-ff-ui);color:var(--pl-onix);
}
.plpop *{box-sizing:border-box}
/* CRÍTICO (ver CLAUDE.md §6.2): display:flex sobrepõe-se ao atributo HTML
   "hidden". Sem esta regra no PRÓPRIO elemento (não só nos descendentes), o
   .plpop continua a ocupar o ecrã inteiro com position:fixed enquanto está
   "escondido" — invisível, mas a intercetar todos os cliques da página. */
.plpop[hidden]{display:none!important}
.plpop [hidden]{display:none!important}

.plpop-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.plpop.is-open .plpop-backdrop{opacity:1}

.plpop-box{position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;background:var(--pl-marfim);
  border-radius:22px 22px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.28);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.plpop.is-open .plpop-box{transform:translateY(0)}

.plpop-x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1px solid var(--pl-border);color:var(--pl-muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .16s ease,border-color .16s ease}
.plpop-x:hover{color:var(--pl-onix);border-color:var(--pl-onix)}

.plpop-media{border-radius:22px 22px 0 0;overflow:hidden;background:var(--pl-surface-alt);max-height:180px}
.plpop-media img{width:100%;height:100%;object-fit:cover;display:block}

.plpop-body{padding:26px 22px 24px;position:relative}
/* Fundo moderno da marca: glow rosa subtil + textura de pontos muito ténue. */
.plpop-body::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(232,99,154,.12), transparent 60%),
    repeating-radial-gradient(circle at 0 0, rgba(17,17,17,.03) 0, rgba(17,17,17,.03) 1px, transparent 1px, transparent 26px);
}
.plpop-view{position:relative}

.plpop-badge{display:inline-flex;align-items:center;gap:6px;background:var(--pl-rosa);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.02em;padding:7px 16px;border-radius:999px;
  box-shadow:0 6px 18px rgba(232,99,154,.35);margin-bottom:14px}
.plpop-badge::before{content:"\25C6";font-size:9px;opacity:.85}

.plpop-title{font-family:var(--pl-ff-disp);font-size:clamp(22px,5.5vw,28px);font-weight:500;
  line-height:1.15;letter-spacing:-.01em;margin:0;color:var(--pl-onix)}
.plpop-sub{font-size:14.5px;line-height:1.6;color:var(--pl-muted);margin:12px 0 0}

.plpop-form{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.plpop-field{display:flex;flex-direction:column}
.plpop-field label{font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:6px}
.plpop-field input{width:100%;font-family:var(--pl-ff-ui);font-size:16px;color:var(--pl-onix);
  background:var(--pl-branco);border:1px solid var(--pl-border);border-radius:10px;padding:13px 14px;
  min-height:48px;transition:border-color .16s ease,box-shadow .16s ease;-webkit-appearance:none;appearance:none}
.plpop-field input::placeholder{color:#b8b8b6}
.plpop-field input:focus{outline:none;border-color:var(--pl-rosa);box-shadow:0 0 0 3px var(--pl-rosa-soft)}
.plpop-field input.plpop-invalid{border-color:var(--pl-error);box-shadow:0 0 0 3px rgba(192,57,43,.1)}

.plpop-consent{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--pl-muted);cursor:pointer;margin-top:2px}
.plpop-consent input{margin-top:1px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--pl-rosa)}
/* O bridge (preciosa-engine.js) marca o próprio input com "<prefixo>invalid",
   derivado da 1ª classe do form (.plpop-form -> .plpop-invalid). */
.plpop-consent input.plpop-invalid{outline:2px solid var(--pl-error);outline-offset:2px}
.plpop-consent input.plpop-invalid + span{color:var(--pl-error)}
.plpop-consent a{color:var(--pl-onix);text-decoration:underline;text-underline-offset:2px}
.plpop-consent a:hover{color:var(--pl-rosa)}

.plpop-submit{width:100%;font-family:var(--pl-ff-ui);font-size:13.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--pl-onix);border:none;border-radius:11px;
  padding:16px;min-height:52px;cursor:pointer;transition:background .18s ease;margin-top:4px}
.plpop-submit:hover{background:var(--pl-rosa)}
.plpop-submit:disabled{opacity:.6;cursor:default}

.plpop-note{font-size:13px;margin:2px 0 0;padding:10px 12px;border-radius:9px;text-align:center;background:var(--pl-rosa-soft)}
.plpop-fine{font-size:11px;line-height:1.5;color:var(--pl-muted);text-align:center;margin:6px 0 0}

/* Ecrã de sucesso */
.plpop-success{text-align:center;padding:8px 0}
.plpop-check{display:inline-block;margin-bottom:10px}
.plpop-check circle{stroke:var(--pl-success);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:plpop-c .5s cubic-bezier(.65,0,.45,1) forwards}
.plpop-check path{stroke:var(--pl-success);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:plpop-t .3s cubic-bezier(.65,0,.45,1) .45s forwards}
@keyframes plpop-c{to{stroke-dashoffset:0}}
@keyframes plpop-t{to{stroke-dashoffset:0}}

.plpop a:focus-visible,.plpop button:focus-visible,.plpop input:focus-visible{outline:2px solid var(--pl-rosa);outline-offset:2px}

/* ===== Tablet / desktop: caixa centrada ===== */
@media (min-width:641px){
  .plpop{align-items:center;padding:24px}
  .plpop-box{border-radius:20px;transform:translateY(18px) scale(.97);opacity:0;
    transition:transform .3s cubic-bezier(.34,1.4,.64,1),opacity .25s ease;box-shadow:0 24px 70px rgba(0,0,0,.3)}
  .plpop.is-open .plpop-box{transform:translateY(0) scale(1);opacity:1}
  .plpop-media{border-radius:20px 20px 0 0;max-height:200px}
  .plpop-body{padding:30px 30px 28px}
}

@media (prefers-reduced-motion:reduce){
  .plpop *,.plpop-box,.plpop-backdrop{transition:none!important;animation:none!important}
  .plpop-check circle,.plpop-check path{stroke-dashoffset:0!important}
  .plpop-box{transform:none!important;opacity:1!important}
}