:root{--r:#df1025;--rd:#b70d1f;--ink:#191919;--muted:#706b65;--paper:#f4efe8;--line:#ded6cb}
*{box-sizing:border-box}body{margin:0;font-family:"DM Sans",Arial,sans-serif;background:var(--paper);color:var(--ink)}
.card-page{max-width:1180px;margin:auto;padding:28px 20px 60px}.card-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}.card-top h1{margin:0;font-size:clamp(1.7rem,4vw,2.7rem)}.card-top p{margin:5px 0 0;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{appearance:none;border:0;border-radius:999px;padding:11px 17px;background:var(--r);color:#fff;text-decoration:none;font-weight:800;cursor:pointer}.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.dark{background:#191919}
.wallet{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.card-side{aspect-ratio:1.585/1;min-height:355px;border-radius:26px;overflow:hidden;position:relative;box-shadow:0 18px 46px rgba(0,0,0,.17)}
.front{background:linear-gradient(145deg,#fff 0 72%,#f4e8e8 72%);padding:24px}.front:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:var(--r);right:-72px;top:-75px;opacity:.95}.brand{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}.brand img{width:125px;height:64px;object-fit:contain;object-position:left center}.badge{font-size:.7rem;font-weight:900;letter-spacing:.08em;color:var(--r);text-transform:uppercase;border:1px solid #ecc4c9;border-radius:999px;padding:7px 10px;background:#fff}
.person{display:grid;grid-template-columns:122px 1fr;gap:20px;margin-top:21px;position:relative;z-index:2}.photo{width:122px;height:155px;border-radius:16px;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.14);background:#eee}.person h2{font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1.02;margin:4px 0 16px}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 15px}.datum span{display:block;color:#817a73;font-size:.66rem;text-transform:uppercase;font-weight:800;letter-spacing:.07em}.datum strong{font-size:.9rem}.validation{position:absolute;bottom:20px;right:22px;display:flex;align-items:center;gap:11px;z-index:3}.qr{background:#fff;padding:6px;border-radius:10px;width:82px;height:82px}.qr img,.qr canvas{width:100%!important;height:100%!important}.code{max-width:155px}.code span{display:block;font-size:.55rem;color:#817a73;font-weight:800;letter-spacing:.07em}.code strong{display:block;font-size:.72rem;color:var(--r);word-break:break-all}.code small{font-size:.56rem;font-weight:900}
.back{background:#1d1d1d;color:#fff;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.back .logo-white{width:160px;max-height:82px;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:13px}.back h3{font-size:1rem;letter-spacing:.09em;margin:7px 0 15px}.back .qr{width:126px;height:126px}.back .code strong{color:#fff;font-size:.82rem}.back p{font-size:.76rem;color:#c9c9c9;max-width:360px;line-height:1.45}.back .site{color:#fff;font-weight:800;margin-top:8px}
.notice{margin:16px 0;padding:13px 16px;border-radius:12px;background:#fff4dc;border:1px solid #efd79c;color:#74520e;font-weight:700}
.public-wrap{max-width:680px;margin:0 auto;padding:32px 18px 55px}.public-head{text-align:center;margin-bottom:23px}.public-head img{width:150px;height:80px;object-fit:contain}.public-head h1{margin:8px 0 4px}.public-head p{color:var(--muted)}.validation-result{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 12px 35px rgba(0,0,0,.08)}.valid-ok{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}.valid-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e6f7ec;color:#17723d;font-size:1.5rem;font-weight:900}.valid-data{display:grid;grid-template-columns:125px 1fr;gap:18px}.valid-data .photo{width:125px;height:155px}.valid-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.valid-list div{padding:11px;border:1px solid var(--line);border-radius:12px}.valid-list b{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;margin-bottom:3px}.invalid{background:#fff1f2;border:1px solid #efc1c7;color:#971527;border-radius:18px;padding:22px;text-align:center}.validate-form{display:flex;gap:8px;margin:18px 0}.validate-form input{flex:1;min-width:0;height:48px;border:1px solid var(--line);border-radius:12px;padding:0 13px;font:inherit}
@media(max-width:850px){.wallet{grid-template-columns:1fr}.card-side{min-height:0}.card-top{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.card-page{padding:18px 10px 40px}.card-side{border-radius:18px}.front{padding:16px}.brand img{width:104px;height:50px}.badge{font-size:.55rem}.person{grid-template-columns:92px 1fr;gap:12px;margin-top:13px}.photo{width:92px;height:118px}.person h2{font-size:1.18rem;margin-bottom:10px}.datum strong{font-size:.72rem}.validation{bottom:12px;right:13px;gap:7px}.qr{width:65px;height:65px}.code{max-width:118px}.code strong{font-size:.58rem}.back{padding:20px}.valid-data{grid-template-columns:1fr}.valid-data .photo{margin:auto}.valid-list{grid-template-columns:1fr}.validate-form{flex-direction:column}}


/* ===== Correção de sobreposição do QR Code =====
   O QR/código ocupa uma área fixa no canto inferior direito.
   Os dados pessoais nunca entram nessa área, independentemente
   do tamanho do nome do beneficiário. */
.front .person > div{
  min-width:0;
}
.front .data-grid{
  width:calc(100% - 190px);
  min-width:205px;
  grid-template-columns:1fr 1fr;
}
.front .validation{
  width:184px;
  justify-content:flex-end;
}
.front .validation .code{
  max-width:92px;
}
.front .validation .code strong{
  font-size:.66rem;
  line-height:1.1;
}
@media(max-width:520px){
  .front .data-grid{
    width:calc(100% - 145px);
    min-width:145px;
    grid-template-columns:1fr;
    gap:5px;
  }
  .front .validation{
    width:142px;
  }
  .front .validation .code{
    max-width:70px;
  }
}