:root{
    --bg: #0b0b10;
    --phone-bg: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --muted-2:#9ca3af;
    --border:#e5e7eb;
    --shadow: 0 18px 60px rgba(0,0,0,.35);

    /* ====== BRAND (VERMELHO) ====== */
    --purple: #b91c1c;      /* principal */
    --purple-2: #ef4444;    /* vivo */
    --purple-soft: #fee2e2; /* soft */

    /* gradiente principal (substitui o roxo) */
    --brand-grad: linear-gradient(135deg, #fb7185 0%, #ef4444 45%, #b91c1c 100%);

    --nav-h: 78px;

    /* iOS safe area + “lift” do menu acima do Safari */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --nav-lift: 34px; /* ajuste fino: 26 / 34 / 44 */
}

*{ box-sizing:border-box; }
html, body{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body{
    margin:0;
    min-height:100vh;
    display:grid;
    place-items:center;
    background:
    radial-gradient(1200px 600px at 20% 0%, rgba(244,63,94,.26), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(185,28,28,.18), transparent 60%),
    var(--bg);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    padding: 18px;
}

/* =========================
    SHELL (PC/tablet: moldura)
    ========================= */
.phone{
    width: 450px;
    max-width: 92vw;
    height: 820px;
    max-height: 92vh;
    background: var(--phone-bg);
    border-radius: 34px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}

/* APP: por padrão preso dentro da moldura */
.app{
    position:absolute;
    inset:0;
    overflow:hidden; /* scroll somente nas telas */
    background:#fff;
}

/* =========================
    TELAS (scroll só aqui)
    ========================= */
.screen{
    position:absolute;
    inset:0;
    display:none;

    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;

    /* espaço para não ficar atrás do menu */
    padding-bottom: calc(var(--nav-h) + 16px);
}
.screen.active{ display:block; }

/* =========================
    BOTTOM NAV (PC/tablet)
    ========================= */
.bottom-nav{
    position:absolute;
    left:0; right:0; bottom:0;
    height: var(--nav-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 10px 10px 14px;
    z-index: 10;
}

.nav-item{
    border:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    color: var(--muted);
    font-size: 12px;
    cursor:pointer;
    transition: transform .12s ease, color .12s ease;
    border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
}
.nav-item:active{ transform: scale(.98); }
.nav-item svg{ width:22px; height:22px; }

.nav-item.active{
    color: var(--purple);
    font-weight: 700;
}
.nav-item.active .icon-wrap{
    background: var(--purple-soft);
    border-color: rgba(220,38,38,.16);
}
.icon-wrap{
    width: 40px; height: 32px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}

/* =========================
    CARTEIRA
    ========================= */
.wallet-hero{
    min-height: 360px;
    padding: 18px 18px 18px;
    color:#fff;
    position: relative;
    background:
    radial-gradient(520px 260px at 20% 10%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(540px 280px at 90% 25%, rgba(255,255,255,.14), transparent 15%),
    linear-gradient(135deg, #e11d48 0%, #b91c1c 45%, #7f1d1d 100%);
}

.bage-fms{
    background-color:#FCF3F3;color:#AA2E26;border:1px solid #EAB2AF;
}

.wallet-top{
    position: relative;
    z-index: 2;
    padding-top: 6px;
}
.wallet-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-top: 0px;
}
.wallet-title h1{
    font-size: 34px;
    margin: 0;
    letter-spacing: .2px;
}
.eye-btn{
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
}

.subrow{
    margin-top: 18px;
    display:flex;
    align-items:center;
    gap: 10px;
    color: rgba(255,255,255,.92);
    font-weight: 700;
    font-size: 17px;
}
.info-dot{
    width: 20px; height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.34);
    display:grid;
    place-items:center;
    font-size: 12px;
    background: rgba(255,255,255,.12);
}

.big-value{
    font-size: 38px;
    line-height: 1;
    margin: 20px 0 10px;
    font-weight: 900;
    letter-spacing: .4px;
}
.wallet-line{
    color: rgba(255,255,255,.92);
    font-size: 16px;
    margin-top: 8px;
}
.wallet-linex{
    color: rgba(255,255,255,.92);
    font-size: 13px;
    margin-top: 8px;
}

.cta-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
    margin-bottom: 18px;
}
.btngui{
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.14);
    color:#fff;
    font-weight: 900;
    letter-spacing:.2px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    font-size: 12px;
}
.btn.primary{
    background: #6a040f;
    border-color: rgba(255,255,255,.08);
}
.btn:active{ transform: scale(.99); }

.wallet-footnote{
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255,255,255,.9);
}

.content{
    padding: 18px;
}
.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-top: 10px;
}
.section-title h2{
    margin:0;
    font-size: 34px;
    letter-spacing:-.2px;
}
.filter-pill{
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(220,38,38,.35);
    color: var(--purple);
    background: rgba(220,38,38,.06);
    font-weight: 900;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    font-size: 12px;
}

.empty-state{
    margin-top: 18px;
    padding: 28px 14px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    color: var(--muted);
}
.doc-illu{
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f3f4f6, #fff 55%);
    display:grid;
    place-items:center;
    border: 1px solid var(--border);
    position: relative;
    margin-bottom: 14px;
}
.doc-card{
    width: 120px;
    height: 150px;
    background: #e5e7eb;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.doc-card::after{
    content:"";
    position:absolute;
    right:0; top:0;
    width: 0; height: 0;
    border-left: 28px solid transparent;
    border-top: 28px solid #94a3b8;
    border-top-right-radius: 10px;
}
.magnifier{
    position:absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 12px solid #6b7280;
    right: 46px;
    bottom: 46px;
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.magnifier::after{
    content:"";
    position:absolute;
    width: 70px; height: 14px;
    background:#6b7280;
    right: -46px;
    bottom: -18px;
    transform: rotate(45deg);
    border-radius: 999px;
}
.magnifier::before{
    content:"";
    position:absolute;
    inset: 12px;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,.6);
}

.empty-state h3{
    margin: 12px 0 6px;
    color: #111827;
    font-size: 30px;
    letter-spacing:.1px;
}
.empty-state p{
    margin:0;
    font-size: 15px;
    color: var(--muted);
    max-width: 320px;
}

/* =========================
    PLACEHOLDERS
    ========================= */
.placeholder{ padding: 18px; }
.card{
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    background:#fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.card h2{ margin:0 0 8px; font-size: 24px; }
.card p{ margin:0; color: var(--muted); line-height:1.4; }
.grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
}

/* =========================
    MOBILE: ocupa 100% tela
    menu fixo e “levantado”
    ========================= */
@media (max-width: 680px){
    :root{ --nav-lift: 0px; }

    body{
    padding: 0;
    display:block;
    min-height: 100vh;
    background:#fff;
    }

    /* remove moldura */
    .phone{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    }

    /* mantém app fixo e scroll só nas telas */
    .app{
    position: fixed;
    inset: 0;
    overflow:hidden;
    }

    /* espaço extra para o menu */
    .screen{
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--nav-lift));
    }

    /* menu FIXO */
    .bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--safe-bottom) + var(--nav-lift));
    height: var(--nav-h);
    z-index: 9999;
    }
}

/* alturas baixas */
@media (max-height: 740px){
    .phone{ height: 740px; }
}

.info-dot{
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* balão */
.info-dot::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;

  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(17,24,39,.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .15s ease;
  z-index: 9999;
}

/* setinha */
.info-dot::before{
  content:"";
  position:absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17,24,39,.95);

  opacity: 0;
  visibility: hidden;
  transition: .15s ease;
  z-index: 9999;
}

/* abre no hover (PC) */
.info-dot:hover::after,
.info-dot:hover::before{
  opacity: 1;
  visibility: visible;
}

/* abre no clique/toque (mobile) */
.info-dot.open::after,
.info-dot.open::before{
  opacity: 1;
  visibility: visible;
}


.wallet-actions{ position: relative; }

.filter-btn{
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  font-weight: 800;
  font-size: 13px;
}

.filter-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 180px;
  background: rgba(17,24,39,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  display: none;
  z-index: 9999;
}

.filter-menu.open{ display:block; }

.filter-option{
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
  font-size:13px;
}

.filter-option:hover{ background: rgba(255,255,255,.08); }
.filter-option.active{ background: rgba(255,255,255,.12); }


.resume-box{
  background:#fff;
  border-radius:16px;
  margin-top:16px;
  padding:6px 0;
}

.resume-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  font-size:16px;
  color:#2f3b2f;
  border-bottom:1px dashed #d9ded9;
}

.resume-row:last-child{
  border-bottom:0;
}

.resume-row span{
  font-weight:500;
}

.resume-row strong{
  font-weight:600;
}

.resume-highlight{
  background:#f8faf8;
}

.resume-separator{
  padding:16px 18px;
  font-size:14px;
  color:#000;
  background:#f5f3f4;
  font-weight:600;
  margin-top: 10px !important;
}

.resume-accordion{
  width:100%;
}

/* Cabeçalho do accordion (parece a linha do resumo) */
.acc-head{
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:16px 18px;
  font-size:14px;
  color:#2f3b2f;
  border-bottom:1px dashed #d9ded9;

  cursor:pointer;
  text-align:left;
}

.acc-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.acc-title{
  font-weight:500;
}

.acc-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.acc-right strong{
  font-weight:600;
  font-size:14px;
}

.acc-chevron{
  display:inline-block;
  transition: transform .18s ease;
  color:#6b7280;
  font-size:14px;
}

/* Corpo do accordion */
.acc-body{
  display:none;
  padding:10px 18px 14px;
  background:#f8faf8;
  border-bottom:1px dashed #d9ded9;
}

.acc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 0;
  font-size:13px;
  color:#374151;
}

.acc-row + .acc-row{
  border-top:1px solid rgba(0,0,0,.06);
}

.acc-row strong{
  font-weight:700;
}

/* Estado aberto */
.acc-head[aria-expanded="true"] .acc-chevron{
  transform: rotate(180deg);
}

.bottom-nav{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .bottom-nav{ background: rgba(255,255,255,.98); }
}

.screen{
  height: 100%;
  overscroll-behavior: contain;
  touch-action: pan-y;
}



.transactions-list{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tx-card{
  background:#fff;
  border-radius:16px;
  border:1px solid var(--border);
  overflow:hidden;
}

.tx-head{
  width:100%;
  border:0;
  background:transparent;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}

.tx-left{
  display:flex;
  flex-direction:column;
}

.tx-title{
  font-size:14px;
  font-weight:600;
  color:#111827;
  padding-bottom: 3px;
}

.tx-left small{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.tx-right{
  display:flex;
  align-items:center;
  gap:10px;
  color: #000;
}

.tx-right strong{
  font-size:15px;
}

.tx-chevron{
  font-size:14px;
  transition: transform .25s ease;
}

.tx-head[aria-expanded="true"] .tx-chevron{
  transform: rotate(180deg);
}

.tx-body{
  padding:10px 16px 16px;
  border-top:1px dashed var(--border);
}

.tx-row{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  font-size:14px;
}

.tx-row.highlight{
  font-weight:700;
  color:green;
}


/* TELEMEDICINA */
.telemed-hero{
  background:#2689b9;
  color:#fff;
  padding:18px;
}

.telemed-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.telemed-title h1{
  margin:0;
  font-size:28px;
}

.back-btn{
  border:0;
  background:transparent;
  color:#fff;
  font-size:22px;
}

.telemed-sub{
  margin-top:12px;
  font-size:13px;
  line-height:1.4;
  opacity:.95;
}

.telemed-illustration{
  margin-top:20px;
  height:180px;
  border-radius:16px;
  background:rgba(255,255,255,.15);
}

/* Cards */
.telemed-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
}

.telemed-card{
  background:#F9FCFE;
  border-radius:18px;
  padding:16px;
  border:1px solid var(--border);
}

.icon-circle{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ede9fe;
  display:grid;
  place-items:center;
  font-size:20px;
  margin-bottom:10px;
}

.telemed-card h3{
  margin:0 0 6px;
  font-size:16px;
}

.telemed-card p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* FAQ */
.faq-list{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
}

.faq-head{
  width:100%;
  background:#fff;
  border:0;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}

.faq-body{
  display:none;
  padding:14px 16px;
  font-size:14px;
  color:var(--muted);
  border-top:1px dashed var(--border);
}

.faq-head[aria-expanded="true"] span{
  transform:rotate(180deg);
}

/* CTA FIXO */
.telemed-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:#fff;
  padding:12px 16px;
  border-top:1px solid var(--border);
}

  .telemed-illustration{
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}

.telemed-img{
  width: 100%;
  height: auto;
  display: block;
}


.telemed-cards{
  display: flex;
  gap: 14px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.telemed-cards::-webkit-scrollbar{
  height: 6px;
}
.telemed-cards::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 999px;
}

.telemed-card{
  flex: 0 0 78%;          /* largura do card no mobile (ajuste: 70% / 85%) */
  max-width: 320px;       /* evita ficar gigante em telas maiores */
  scroll-snap-align: start;
}


.btn-full-blue{
  width: 100%;
  height: 42px;
  background:#1a759f;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 0px;
}
/* efeito ao tocar */
.btn-full-blue:active{
  transform: scale(.99);
}

.btn-full-yellow{
  width: 100%;
  height: 42px;
  background:#a47e1b;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 0px;
}
/* efeito ao tocar */
.btn-full-yellow:active{
  transform: scale(.99);
}

.btn-full-red{
  width: 100%;
  height: 42px;
  background:#a41b1b;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 0px;
}
/* efeito ao tocar */
.btn-full-red:active{
  transform: scale(.99);
}


.price-box{ font-family: inherit; }
.price-original{ font-size: 13.5px; opacity: .75; margin-bottom: -5px; }
.price-original .old{ text-decoration: line-through; }

.price-paid{ font-size: 14px; font-weight: 600; }
.price-paid .new{ font-size: 17px; font-weight: 800; }



.pill-wrap{
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.pill-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 220px;
  border-radius: 18px;
  overflow: hidden;

  background: rgba(17,24,39,.96);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .15s ease;
  z-index: 9999;
}

.pill-menu.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pill-option{
  width: 100%;
  text-align: left;
  padding: 12px 16px;

  background: transparent;
  border: 0;
  color: rgba(255,255,255,.92);

  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pill-option + .pill-option{
  border-top: 1px solid rgba(255,255,255,.06);
}

.pill-option:hover{
  background: rgba(255,255,255,.06);
}

.pill-option.active{
  background: rgba(255,255,255,.08);
}

.card_master{
    padding-left:18px;
    padding-right:18px;
    padding-top:10px;
    margin-top:10px;
    border-radius:15px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

/* =========================
   SORTEIOS
========================= */

.raffles-hero{
  min-height: 260px;
  padding: 22px 18px 18px;
  color:#fff;
  position: relative;
  overflow:hidden;

  background:
    radial-gradient(520px 260px at 18% 12%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(520px 260px at 82% 20%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(135deg, #b27b00 0%, #a56f00 45%, #8f5f00 100%);
}

.raffles-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.raffles-title h1{
  margin: 0;
  font-size: 34px;
  letter-spacing: .2px;
  font-weight: 900;
}

.dots-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.92);
  color: #111827;
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* troféu desenhado em CSS (sem imagem) */
.raffles-trophy{
  position:absolute;
  right: 18px;
  top: 16px;
  width: 210px;
  height: 210px;
  opacity: .95;
  pointer-events:none;

  background:
    radial-gradient(200px 160px at 55% 55%, rgba(255,255,255,.20), transparent 65%),
    radial-gradient(260px 200px at 60% 60%, rgba(255,255,255,.10), transparent 60%);
}

.raffles-trophy::before{
  content:"";
  position:absolute;
  inset: 16px 10px 30px 40px;
  border-radius: 38px;
  border: 3px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.raffles-trophy::after{
  content:"";
  position:absolute;
  left: 64px;
  top: 130px;
  width: 120px;
  height: 70px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}

/* alças do troféu */
.raffles-hero::before{
  content:"";
  position:absolute;
  right: 190px;
  top: 68px;
  width: 62px;
  height: 90px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.28);
  background: transparent;
  transform: rotate(-8deg);
  opacity:.85;
}
.raffles-hero::after{
  content:"";
  position:absolute;
  right: 18px;
  top: 68px;
  width: 62px;
  height: 90px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.28);
  background: transparent;
  transform: rotate(8deg);
  opacity:.85;
}

/* TABS */
.raffles-tabs{
  display:flex;
  gap: 18px;
  padding: 12px 18px 0;
  background:#fff;
  border-bottom: 1px solid #e5e7eb;
}

.tab-btn{
  border: 0;
  background: transparent;
  padding: 12px 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  cursor:pointer;
  position: relative;
}

.tab-btn.active{
  color: #716c04; /* roxo do print (se quiser vermelho eu mudo) */
  font-weight: 700;
}

.tab-btn.active::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #716c04;
}

/* CONTENT */
.raffles-content{
  padding-top: 18px;
}

/* EMPTY STATE (igual do print) */
.raffles-empty{
  padding: 40px 18px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.raffles-empty-illu{
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f3f4f6, #fff 55%);
  display:grid;
  place-items:center;
  border: 1px solid #e5e7eb;
  position: relative;
  margin-bottom: 18px;
}

.illu-doc{
  width: 130px;
  height: 160px;
  background: #d1d5db;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.illu-doc::after{
  content:"";
  position:absolute;
  right:0; top:0;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-top: 30px solid #475569;
  border-top-right-radius: 12px;
}

.illu-glass{
  position:absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 12px solid #4b5563;
  right: 44px;
  bottom: 46px;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.illu-glass::after{
  content:"";
  position:absolute;
  width: 70px; height: 14px;
  background:#4b5563;
  right: -46px;
  bottom: -18px;
  transform: rotate(45deg);
  border-radius: 999px;
}

.illu-glass::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.6);
}

.raffles-empty h2{
  margin: 8px 0 8px;
  font-size: 34px;
  font-weight: 900;
  color: #111827;
}

.raffles-empty p{
  margin: 0;
  font-size: 15px;
  color: #6b7280;
  max-width: 320px;
  line-height: 1.4;
}


/* ========= MODAL COM SLIDE SUAVE (ABRE SOBE / FECHA DESCE) ========= */
.amr-modal{
  position: fixed;
  inset: 0;
  z-index: 20000;

  /* invisível porém "existindo" pra animar */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .22s ease, visibility .22s ease;
}

.amr-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* fundo escuro com fade */
.amr-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);

  opacity: 0;
  transition: opacity .22s ease;
}
.amr-modal.is-open .amr-modal__backdrop{ opacity: 1; }

/* "sheet" sobe de baixo pra cima */
.amr-modal__sheet{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  max-width: 520px;
  margin: 0 auto;

  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 22px 18px 18px;

  box-shadow: 0 -22px 60px rgba(0,0,0,.25);

  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

.amr-modal.is-open .amr-modal__sheet{
  transform: translateY(0);
}

/* quando fechando, desce suave */
.amr-modal.is-closing .amr-modal__sheet{
  transform: translateY(110%);
}
.amr-modal.is-closing .amr-modal__backdrop{
  opacity: 0;
}

/* conteúdo */
.amr-modal__title{
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  margin: 4px 0 18px;
  color: #111827;
}

.amr-modal__list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.amr-modal__item{
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 14px 14px;
}

.amr-modal__icon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(124,58,237,.12);
  color: #d92828;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
}

.amr-modal__itemTitle{
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 4px;
}

.amr-modal__itemDesc{
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.35;
}

.amr-modal__ok{
  width: 100%;
  height: 52px;
  margin-top: 18px;

  border: 0;
  border-radius: 12px;

  background: #cc0d0d;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .3px;

  cursor: pointer;
}
.amr-modal__ok:active{ transform: scale(.99); }

/* safe-area iPhone */
@supports (padding: env(safe-area-inset-bottom)){
  .amr-modal__sheet{
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

.tab-pane{ display:none; }
.tab-pane.is-active{ display:block; }


/* =========================
   TELA "USE PONTOS" (isolado)
   ========================= */

.points-screen{
  background: #fff;
}

/* evita conflito com .content do seu tema */
.points-wrap{
  padding: 16px 18px;
}

/* HERO topo */
.points-hero{
  position: relative;
  padding: 18px 18px 24px;
  color: #fff;
  overflow: hidden;

  /* usa seu brand grad (vermelho) */
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(540px 280px at 90% 25%, rgba(255,255,255,.14), transparent 15%),
    linear-gradient(135deg, #e11d48 0%, #b91c1c 45%, #7f1d1d 100%);
}

/* círculos/linhas no fundo */
.points-orbit{
  position:absolute;
  inset:-70px -70px auto auto;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(-12deg);
  pointer-events:none;
  opacity: 1;
}
.points-orbit::before,
.points-orbit::after{
  content:"";
  position:absolute;
  inset:40px;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,.12);
}
.points-orbit::after{
  inset:95px;
  border-color: rgba(255,255,255,.10);
}

.points-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.points-back{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  cursor:pointer;
}

.points-title{
  flex:1;
  margin:0;
  padding-left: 0px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff;
}

/* pill de pontos */
.points-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 900;
  white-space:nowrap;
  font-size: 13px;
}
.points-dot{
  width: 22px; height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.92);
  position:relative;
}
.points-dot::after{
  content:"";
  position:absolute;
  width: 10px; height: 10px;
  border-radius:50%;
  background: rgba(255,255,255,.96);
  right: -6px; top: 50%;
  transform: translateY(-50%);
}

.points-hero-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items:start;
  position: relative;
  z-index: 2;
}

.points-lead{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  max-width: 270px;
}

/* ícones bolhas à direita */
.points-icons{
  position:relative;
  height: 120px;
}
.points-bubble{
  position:absolute;
  width: 54px; height: 54px;
  border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
.points-bubble.big{
  width: 72px; height: 72px;
  right: 0; bottom: 0;
  background: rgba(255,255,255,.12);
}
.points-bubble.mid{ right: 18px; top: 8px; }
.points-bubble.small{
  left: 10px; bottom: 8px;
  width: 48px; height: 48px;
  opacity: .95;
}
.points-bubble svg{ opacity:.95 }

/* cards da página (não usa sua .card) */
.points-card{
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  margin: 14px 0;
}

.points-banner{
  color:#fff;
  padding: 18px;
  position:relative;
  min-height: 150px;
  overflow:hidden;
}
.points-banner.gift{
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 55%, #ef4444 120%);
}
.points-banner.trip{
  min-height: 170px;
  background: linear-gradient(135deg, #0b2a4a 0%, #0b3b7a 55%, #0f5bb8 130%);
}

.points-h{
  font-size: 20px;
  font-weight: 950;
  margin: 0 0 8px;
  letter-spacing: .2px;
  color: #fff;
}

.points-sub{
  margin:0;
  font-size: 15px;
  color: rgba(255,255,255,.88);
  max-width: 240px;
  line-height: 1.35;
}

/* arte gift */
.points-gift-art{
  position:absolute;
  right: -10px;
  top: 14px;
  width: 190px;
  height: 120px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.20);
  transform: rotate(-10deg);
}

/* viagens */
.points-mini{
  font-weight: 900;
  opacity: .92;
  margin:0 0 6px;
  font-size: 13px;
}
.points-trip-title{
  margin:0;
  font-weight: 950;
  font-size: 40px;
  line-height: 1.0;
  color: #facc15;
}
.points-trip-sub{
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,.88);
  max-width: 240px;
  line-height: 1.35;
}

.points-btn{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #facc15;
  color: #0b2a4a;
  font-weight: 950;
  border: none;
  cursor:pointer;
}

.points-plane{
  position:absolute;
  right: -20px;
  bottom: -10px;
  width: 230px;
  height: 140px;
  border-radius: 26px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  transform: rotate(-6deg);
}

.points-desc{
  margin: 10px 2px 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* mobile: deixa full sem limitar em 450px */
@media (max-width: 680px){
  .points-title{ font-size: 28px; }
  .points-trip-title{ font-size: 38px; }
}

  #faq .accordion-button:not(.collapsed){
    color: #ba181b !important;
  }

/* imagem preenchendo 100% o points-gift-art */
.points-gift-art{
  overflow: hidden; /* garante o corte */
}
.points-gift-art img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* preenche sem distorcer */
  object-position: center;/* centraliza */
}