/* ControlPay • fluxo de assinatura — vidro fosco azul/ciano
   Compartilhado por: assinar, assinar1..4, assinar-renovar, assinatura-sucesso */

@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --night:#040f22;
  --plum:#132c4f;
  --sun:#00c3ff;
  --amber:#47cfff;
  --coral:#2f6bff;
  --mint:#46e8b4;
  --text:#f3fbff;
  --muted:rgba(226,244,255,.76);
  --faint:rgba(226,244,255,.54);
  --glass:rgba(255,255,255,.075);
  --glass-2:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.17);
  --line-hot:rgba(110,218,255,.65);
  --err:#ff9aa8;
  --ok:#86efac;
  --info:#8ae0ff;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --blur:blur(22px) saturate(1.45);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;
  position:relative;overflow-x:hidden;
}
/* luzes azul e ciano sobre o azul-marinho, fixas atrás do conteúdo */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vmax 46vmax at 92% -8%,rgba(47,107,255,.55),transparent 62%),
    radial-gradient(74vmax 56vmax at -10% 108%,rgba(0,190,255,.55),transparent 60%),
    radial-gradient(46vmax 34vmax at 52% 46%,rgba(30,120,255,.22),transparent 70%),
    linear-gradient(170deg,#061a38 0%,#041028 46%,#06142f 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000000 10%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000000 10%,transparent 72%);
}
button,input,summary{font:inherit}
button{touch-action:manipulation;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:14px}

/* ===== estrutura ===== */
.sub-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 0 calc(48px + env(safe-area-inset-bottom))}
.sub-top{display:flex;align-items:center;gap:12px;min-height:56px;margin-bottom:10px}
.sub-brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:#ffffff;text-decoration:none}
.sub-brand img{width:56px;height:56px;margin:-6px 0;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,195,255,.45))}
.sub-brand b{font-weight:600;color:var(--amber);margin-left:-2px}
.sub-help{
  font-size:13px;font-weight:700;color:var(--text);text-decoration:none;padding:10px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:background .2s,border-color .2s;
}
.sub-help:hover{border-color:var(--line-hot);background:rgba(255,255,255,.18)}

/* ===== passos ===== */
.flow-steps{list-style:none;margin:6px auto 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);max-width:640px;counter-reset:step}
.flow-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;font-weight:700;color:var(--faint)}
.flow-steps li::before{ /* linha entre os passos */
  content:"";position:absolute;top:19px;right:50%;width:100%;height:2px;border-radius:2px;background:rgba(255,255,255,.14);z-index:0;
}
.flow-steps li:first-child::before{display:none}
.flow-steps li.done::before,.flow-steps li.active::before{background:linear-gradient(90deg,var(--amber),var(--sun))}
.flow-steps .dot{
  position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:16px;color:var(--faint);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.flow-steps li.done{color:var(--muted)}
.flow-steps li.done .dot{color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff);border-color:rgba(170,233,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.flow-steps li.active{color:#ffffff}
.flow-steps li.active .dot{color:#ffffff;background:linear-gradient(180deg,rgba(70,208,255,.55),rgba(0,199,255,.35));border-color:var(--line-hot);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 5px rgba(40,202,255,.16),0 10px 30px rgba(0,195,255,.45)}

/* ===== painéis de vidro ===== */
.sub-card,.glass{
  position:relative;border-radius:30px;padding:clamp(22px,4vw,38px);
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.045) 55%,rgba(255,255,255,.07));
  border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.04),0 30px 80px rgba(3,14,29,.45);
}
.sub-shell>.sub-card{max-width:840px;margin-inline:auto}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .sub-card,.glass,.sub-choice,.renew-option,.sub-help,.flow-steps .dot{background:rgba(25,46,75,.92)}
}

.sub-card h1{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:clamp(30px,5.4vw,46px);line-height:1.04;letter-spacing:-.03em;color:#ffffff;text-wrap:balance}
.sub-card>p,.sub-lead{margin:0;color:var(--muted);font-size:16px;line-height:1.6;max-width:60ch}
.sub-card h2{font-family:var(--display)}

/* ===== botões de vidro ===== */
.sub-actions{display:grid;gap:12px;margin-top:24px}
.sub-btn{
  position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:58px;padding:14px 22px;border-radius:20px;border:1px solid rgba(255,255,255,.3);
  font-family:var(--body);font-weight:800;font-size:16px;letter-spacing:.005em;color:#ffffff;text-decoration:none;text-align:center;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.07));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -10px 20px rgba(255,255,255,.04),0 12px 30px rgba(3,14,29,.35);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s,filter .2s;
}
.sub-btn::after{ /* brilho especular do vidro */
  content:"";position:absolute;left:6%;right:6%;top:0;height:46%;z-index:-1;border-radius:0 0 60% 60%/0 0 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));opacity:.55;pointer-events:none;
}
.sub-btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.65),0 18px 40px rgba(3,14,29,.45)}
.sub-btn:active{transform:translateY(0) scale(.985)}
.sub-btn.primary,.sub-btn.green,.sub-btn.gold{
  color:#032130;border-color:rgba(180,235,255,.85);text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(130,221,255,.98),rgba(20,198,255,.93));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -12px 22px rgba(0,203,255,.30),0 16px 44px rgba(0,195,255,.5),0 0 0 1px rgba(40,202,255,.25);
}
.sub-btn.primary:hover,.sub-btn.green:hover,.sub-btn.gold:hover{filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -12px 22px rgba(0,203,255,.30),0 22px 56px rgba(0,195,255,.62),0 0 0 1px rgba(70,208,255,.4)}
.sub-btn.primary::after,.sub-btn.green::after,.sub-btn.gold::after{opacity:.8}
.sub-btn.secondary,.sub-btn.limited{color:#ffffff}
.sub-btn.ghost{min-height:50px;font-weight:700;font-size:14px;color:var(--muted);background:rgba(255,255,255,.04);border-color:var(--line);box-shadow:none}
.sub-btn.ghost::after{display:none}
.sub-btn.ghost:hover{color:#ffffff;background:rgba(255,255,255,.1);box-shadow:none}
.sub-btn.ghost[href]::before{content:"‹";font-size:20px;line-height:1;margin-top:-2px}
.sub-btn:disabled{opacity:.6;cursor:wait;transform:none}
.sub-btn.loading::before{content:"";flex:0 0 auto;width:16px;height:16px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:subSpin .7s linear infinite;background:none!important;-webkit-mask:none;mask:none}
@keyframes subSpin{to{transform:rotate(360deg)}}

/* botão do Google: vidro claro com o G colorido */
#googleButton{
  color:#142031;text-shadow:none;min-height:62px;font-size:17px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.82));border-color:#ffffff;
  box-shadow:inset 0 1.5px 0 #ffffff,inset 0 -10px 18px rgba(86,131,194,.10),0 16px 44px rgba(255,255,255,.18),0 0 0 6px rgba(255,255,255,.07);
}
#googleButton::after{opacity:.0}
#googleButton:hover{filter:none;box-shadow:inset 0 1.5px 0 #ffffff,0 22px 56px rgba(255,255,255,.28),0 0 0 8px rgba(255,255,255,.09)}
#googleButton:not(.loading)::before{
  content:"";width:22px;height:22px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17.5z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.7c-.5-1.5-.8-3-.8-4.7s.3-3.2.8-4.7l-7.9-6.1C.9 16.4 0 20.1 0 24s.9 7.6 2.6 10.8l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.8 2.3-8.4 2.3-6.3 0-11.6-4.1-13.5-9.8l-7.9 6.1C6.5 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== status ===== */
.sub-status{min-height:20px;margin-top:14px;color:var(--err);font-size:14px;font-weight:600;line-height:1.5;text-align:center}
.sub-status:empty{min-height:0;margin-top:0}
.sub-status.ok{color:var(--ok)}
.sub-status.info{color:var(--info)}

/* ===== confiança ===== */
.sub-trust{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.45;text-align:left}
.sub-trust-icon{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;font-size:16px;background:rgba(70,232,180,.14);border:1px solid rgba(70,232,180,.35)}
.sub-trust strong{color:#ffffff}
.sub-assure{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sub-assure li{padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--muted)}
.sub-assure strong{display:block;color:#ffffff;font-size:14px;margin-bottom:2px}

/* ===== conta logada ===== */
.sub-account{display:flex;align-items:center;gap:14px;margin:22px 0 0;padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.sub-avatar{width:50px;height:50px;border-radius:50%;flex:0 0 auto;overflow:hidden;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;color:#032130;background:linear-gradient(135deg,#8ae0ff,#1fcaff);box-shadow:0 8px 22px rgba(0,195,255,.4)}
.sub-account-text{min-width:0}
.sub-account-text small{display:block;color:var(--ok);font-size:12px;font-weight:700;margin-bottom:2px}
.sub-account-text strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#ffffff}
.sub-account button{margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;padding:9px 14px;border-radius:999px}
.sub-account button:hover{color:#ffffff;border-color:var(--line-hot)}

/* ===== campos ===== */
.sub-field{margin-top:22px}
.sub-field label{display:block;font-size:14px;font-weight:700;color:#ffffff;margin-bottom:9px}
.sub-field small{display:block;margin-top:9px;color:var(--faint);font-size:13px;line-height:1.5}
.sub-input{
  width:100%;height:58px;padding:0 18px;border-radius:18px;outline:none;font-size:16px;color:#ffffff;
  background:rgba(5,16,31,.38);border:1px solid var(--line);box-shadow:inset 0 2px 8px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s;
}
.sub-input::placeholder{color:rgba(235,250,255,.38)}
.sub-input:focus{border-color:var(--amber);box-shadow:inset 0 2px 8px rgba(0,0,0,.25),0 0 0 4px rgba(60,205,255,.22)}

/* ===== notas e destaques ===== */
.sub-note,.sub-pay-callout{display:flex;align-items:center;gap:14px;margin-top:22px;padding:15px 17px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.5}
.sub-note strong,.sub-pay-callout strong{color:#ffffff}
.sub-note .icon{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff)}
.sub-pay-callout strong{display:block;font-size:15px}
.sub-pay-callout span:not(.sub-payment-icon){display:block;font-size:13px;color:var(--muted);margin-top:2px}
.sub-inline-test{display:inline-flex;margin-left:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff)}
.sub-test-ribbon{display:inline-flex;margin:0 0 12px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff)}

/* ===== cartões de escolha (plano / pagamento) ===== */
.sub-plans,.sub-methods{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;align-items:stretch}
.sub-choice{
  position:relative;width:100%;text-align:left;cursor:pointer;display:flex;flex-direction:column;border-radius:26px;padding:24px;color:#ffffff;
  background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 16px 40px rgba(3,14,29,.3);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s,background .2s;
}
.sub-choice:hover{transform:translateY(-4px);border-color:var(--line-hot);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 26px 56px rgba(3,14,29,.45),0 0 0 1px rgba(60,205,255,.25)}
.sub-choice:active{transform:translateY(-1px) scale(.992)}
.sub-choice:disabled{opacity:.6;cursor:wait;transform:none}
.sub-choice.recommended{
  border-color:var(--line-hot);
  background:linear-gradient(165deg,rgba(70,208,255,.28),rgba(0,199,255,.09) 60%,rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 24px 64px rgba(0,195,255,.28),0 0 0 1px rgba(60,205,255,.3);
}
.sub-choice-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.sub-choice h2{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#ffffff}
.sub-choice p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.sub-plan-kicker{display:inline-flex;align-self:flex-start;width:fit-content;margin-bottom:10px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.1);border:1px solid var(--line)}
.sub-choice.recommended .sub-plan-kicker{color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff);border-color:transparent}
.sub-plan-top{display:flex;flex-direction:column;gap:2px}
.sub-price-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:16px}
.sub-old-price{font-size:14px;color:var(--faint);text-decoration:line-through;font-weight:700}
.sub-price{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,52px);line-height:1;letter-spacing:-.04em;color:#ffffff;white-space:nowrap;margin-top:16px}
.sub-price-wrap .sub-price{margin-top:0}
.sub-price small{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:0;color:var(--muted);margin-left:2px}
.sub-per{margin-top:6px;font-size:13px;color:var(--muted);font-weight:600}
.sub-badge{display:inline-flex;align-self:flex-start;margin-top:14px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.1);border:1px solid var(--line)}
.sub-badge.gold{color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff);border-color:transparent}
.sub-discount-ribbon{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 16px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(130,223,255,.45);color:#ffffff}
.sub-discount-ribbon strong{font-size:14px;color:var(--amber)}
.sub-discount-ribbon span{font-size:13px;color:var(--muted);font-weight:600}
.sub-checks{display:grid;gap:10px;margin:18px 0 22px;padding:0;color:var(--muted);font-size:14px;line-height:1.4}
.sub-checks span{display:flex;gap:10px;align-items:flex-start}
.sub-checks span::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(70,232,180,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.3 3.2 6.3-6.6' fill='none' stroke='%2346e8b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border:1px solid rgba(70,232,180,.4)}
.sub-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:18px;font-weight:800;font-size:16px;color:#ffffff;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5)}
.sub-choice.recommended .sub-cta{color:#032130;border-color:rgba(180,235,255,.85);background:linear-gradient(180deg,rgba(130,221,255,.98),rgba(20,198,255,.93));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),0 12px 32px rgba(0,195,255,.45)}

.sub-included{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sub-included span{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line)}

/* cupom */
.sub-coupon{margin-top:20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.sub-coupon summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:14px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:10px}
.sub-coupon summary::-webkit-details-marker{display:none}
.sub-coupon summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.sub-coupon[open] summary::after{transform:rotate(-135deg)}
.sub-coupon[open] summary{color:#ffffff}
.sub-coupon .sub-field{margin:0;padding:0 18px 18px}
.sub-coupon-row{display:flex;gap:10px;align-items:stretch}
.sub-coupon-row .sub-btn{width:auto;min-width:128px;min-height:58px;padding-inline:20px}
#couponCode{text-transform:uppercase}
#couponHint{display:block;margin-top:10px;font-size:13px}

/* ===== pagamento ===== */
.sub-method-title{display:flex;align-items:center;gap:14px}
.sub-payment-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;flex:0 0 auto;background:rgba(255,255,255,.12);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.sub-payment-icon img{width:38px;height:38px;object-fit:contain;display:block}
.sub-payment-icon.mp strong{font-family:var(--display);font-size:24px;color:var(--amber)}
.sub-pay-callout .sub-payment-icon{width:46px;height:46px;border-radius:14px}
.sub-pay-callout .sub-payment-icon img{width:32px;height:32px}
.sub-method-copy{min-width:0}
.sub-method-copy h2{margin:0 0 3px}
.sub-method-copy .provider{display:inline-flex;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.1);border:1px solid var(--line)}
.sub-methods .sub-choice-head{flex-direction:column;gap:12px}

/* resumo */
.sub-summary{display:grid;margin-top:24px;padding:6px 20px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.sub-summary-row{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.sub-summary-row:last-child{border-bottom:0}
.sub-summary-row span{color:var(--muted)}
.sub-summary-row strong{text-align:right;color:#ffffff;font-weight:700;overflow-wrap:anywhere}
.sub-summary-row:has(#planPrice) strong{font-family:var(--display);font-size:22px;color:var(--amber)}
.renew-summary{margin-top:16px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.55}
.renew-summary strong{color:#ffffff}
.renew-summary .arrow{color:var(--amber);margin:0 4px;font-weight:800}

/* Pix */
.sub-pix{margin-top:22px;padding:24px;border-radius:24px;text-align:center;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.sub-pix h2{margin:0 0 6px;font-size:22px;color:#ffffff}
.sub-pix p{margin:0;color:var(--muted);font-size:14px}
.sub-qr{width:min(250px,76vw);aspect-ratio:1;margin:18px auto 14px;background:#ffffff;border-radius:20px;padding:10px;display:block;object-fit:contain;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.sub-copy{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}
.sub-copy input{min-width:0;height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:rgba(5,16,31,.4);color:#ffffff;font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.sub-copy button{border:1px solid rgba(180,235,255,.85);border-radius:14px;padding:0 18px;font-weight:800;font-size:14px;cursor:pointer;color:#032130;background:linear-gradient(180deg,rgba(130,221,255,.98),rgba(20,198,255,.93))}
.sub-wait{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;color:var(--info);font-size:14px;font-weight:700}
.sub-wait::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:subSpin .8s linear infinite}

/* ===== renovação ===== */
.renew-hero{margin-top:22px;padding:18px;border-radius:22px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:linear-gradient(160deg,rgba(70,232,180,.16),rgba(255,255,255,.05));border:1px solid rgba(70,232,180,.4)}
.renew-hero-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-size:24px;font-weight:800;color:#06382a;background:linear-gradient(180deg,#8ff3d0,#46e8b4)}
.renew-hero strong{display:block;font-size:16px;color:#ffffff;margin-bottom:2px}
.renew-hero span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.renew-expiry{color:var(--mint)!important;font-weight:800;margin-top:4px}
.renew-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.renew-option{
  position:relative;text-align:left;cursor:pointer;overflow:hidden;border-radius:24px;padding:20px;color:#ffffff;
  background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 36px rgba(3,14,29,.3);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s;
}
.renew-option:hover{transform:translateY(-3px);border-color:var(--line-hot);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 24px 50px rgba(3,14,29,.45)}
.renew-option:disabled{opacity:.6;cursor:wait;transform:none}
.renew-option.recommended{border-color:var(--line-hot);background:linear-gradient(165deg,rgba(70,208,255,.28),rgba(0,199,255,.09) 60%,rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 56px rgba(0,195,255,.26)}
.renew-days{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em}
.renew-price{margin-top:4px;font-family:var(--display);font-size:24px;font-weight:800;color:var(--amber)}
.renew-price small{font-family:var(--body);font-size:12px;color:var(--muted)}
.renew-mini{display:inline-flex;margin-top:10px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.1);border:1px solid var(--line)}
.renew-new-date{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:13px;line-height:1.45}
.renew-new-date b{display:block;color:#ffffff;font-size:15px;margin-top:2px}
.renew-ribbon{position:absolute;right:14px;top:14px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff)}
.renew-help{margin-top:16px;text-align:center;color:var(--faint);font-size:13px;line-height:1.5}
.renew-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.renew-test{display:inline-flex;margin-left:6px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff);vertical-align:middle}

/* ===== página de entrada (/assinar) ===== */
.landing>*{min-width:0}
.landing{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy login" "visual login" "extra extra";column-gap:clamp(24px,5vw,64px);row-gap:28px;align-items:start;margin-top:clamp(8px,3vw,28px)}
.landing-copy{grid-area:copy}
.landing-login{grid-area:login;position:sticky;top:18px}
.landing-visual{grid-area:visual}
.landing-extra{grid-area:extra;display:grid;gap:clamp(40px,7vw,84px);margin-top:clamp(24px,5vw,56px)}
.landing h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(38px,6.6vw,72px);line-height:.98;letter-spacing:-.045em;color:#ffffff;text-wrap:balance}
.landing h1 em{font-style:normal;background:linear-gradient(100deg,#8ae0ff,#1fcaff 55%,#ff5d7a);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing-lead{margin:20px 0 0;max-width:52ch;font-size:clamp(16px,2.2vw,19px);color:var(--muted);line-height:1.6}
.landing-login .sub-card{padding:clamp(24px,3.4vw,34px)}
.landing-login h2{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,32px);line-height:1.08;letter-spacing:-.03em;color:#ffffff}
.landing-login .login-lead{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.login-mini{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:14px;font-weight:700;color:var(--muted)}
.login-mini img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,195,255,.4))}
.login-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.login-points li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.4}
.login-points li::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(70,232,180,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.3 3.2 6.3-6.6' fill='none' stroke='%2346e8b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border:1px solid rgba(70,232,180,.4)}
.landing-login .sub-actions{margin-top:22px}

/* cronômetro de aluguel (ilustração do app) */
.rent-demo{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch;max-width:560px}
.rent-card{padding:20px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid var(--line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 24px 60px rgba(3,14,29,.42)}
.rent-card.main{grid-row:span 2;display:flex;flex-direction:column;gap:14px}
.rent-top{display:flex;align-items:center;gap:12px}
.rent-top img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,195,255,.5))}
.rent-top b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.02em}
.rent-top span{font-size:13px;color:var(--muted)}
.rent-ring{position:relative;width:min(100%,190px);aspect-ratio:1;margin:2px auto}
.rent-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rent-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.rent-ring .track{stroke:rgba(255,255,255,.14)}
.rent-ring .bar{stroke:url(#ringGrad);stroke-dasharray:326.7;stroke-dashoffset:90;transition:stroke-dashoffset 1s linear}
.rent-time{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rent-time b{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rent-time span{margin-top:6px;font-size:13px;color:var(--muted)}
.rent-pill{align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#06382a;background:linear-gradient(180deg,#8ff3d0,#46e8b4)}
.rent-card.mini{display:flex;flex-direction:column;justify-content:center;gap:4px}
.rent-card.mini b{display:block;font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;color:#ffffff}
.rent-card.mini span{font-size:13px;color:var(--muted)}
.rent-card.mini.alt b{color:var(--amber)}

.landing-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.landing-points div{padding:16px 16px 17px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.landing-points strong{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.01em;color:#ffffff;margin-bottom:4px}
.landing-points span{font-size:14px;color:var(--muted);line-height:1.45}

.section-head h2{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:clamp(28px,4.6vw,44px);line-height:1.04;letter-spacing:-.035em;color:#ffffff;text-wrap:balance}
.section-head p{margin:0;max-width:56ch;color:var(--muted);font-size:17px;line-height:1.6}

/* como funciona — sequência real */
.how{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:how}
.how li{position:relative;padding:22px 20px 22px;border-radius:24px;background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid var(--line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.how li::before{counter-increment:how;content:counter(how);display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;font-family:var(--display);font-weight:800;font-size:18px;color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff);box-shadow:0 8px 22px rgba(0,195,255,.4)}
.how li:not(:last-child)::after{content:"";position:absolute;top:41px;left:calc(40px + 20px + 8px);right:-14px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(110,218,255,.6),rgba(110,218,255,.05))}
.how strong{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:#ffffff;margin-bottom:6px}
.how span{font-size:14px;color:var(--muted);line-height:1.5}

/* planos em resumo */
.price-peek{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;max-width:760px}
.price-peek .glass{padding:24px;border-radius:26px}
.price-peek .hot{border-color:var(--line-hot);background:linear-gradient(165deg,rgba(70,208,255,.26),rgba(0,199,255,.08) 60%,rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 60px rgba(0,195,255,.24)}
.price-peek h3{margin:0;font-family:var(--display);font-size:20px;letter-spacing:-.02em}
.price-peek .v{margin-top:10px;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em}
.price-peek .v small{font-family:var(--body);font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0}
.price-peek p{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.5}

/* perguntas */
.faq{display:grid;gap:10px;margin-top:24px;max-width:820px}
.faq details{border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;gap:14px;font-weight:700;font-size:16px;color:#ffffff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open]{background:rgba(255,255,255,.09);border-color:rgba(110,218,255,.4)}
.faq p{margin:0;padding:0 20px 20px;color:var(--muted);font-size:15px;line-height:1.6;max-width:64ch}

.final-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;justify-content:space-between;padding:clamp(24px,4vw,40px);border-radius:32px;background:linear-gradient(135deg,rgba(70,208,255,.3),rgba(47,107,255,.18) 60%,rgba(255,255,255,.06));border:1px solid var(--line-hot);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 30px 80px rgba(0,195,255,.22)}
.final-cta h2{margin:0;max-width:20ch;font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.05;letter-spacing:-.035em;color:#ffffff}
.final-cta .sub-btn{width:auto;min-width:min(100%,280px)}
.sub-footer{margin-top:34px;text-align:center;color:var(--faint);font-size:13px;line-height:1.6}
.sub-footer a{color:var(--muted)}

/* ===== sucesso ===== */
.success-mark{width:76px;height:76px;border-radius:26px;display:grid;place-items:center;margin:0 0 20px;font-family:var(--display);font-size:36px;font-weight:800;color:#06382a;background:linear-gradient(180deg,#8ff3d0,#46e8b4);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),0 16px 44px rgba(70,232,180,.4)}
.success-mark.wait{color:#032130;background:linear-gradient(180deg,#8ae0ff,#2eccff);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),0 16px 44px rgba(0,195,255,.4)}
.success-mark.error{color:#3a0610;background:linear-gradient(180deg,#ffb4c0,#ff6a82);box-shadow:0 16px 44px rgba(255,79,109,.4)}
.success-hero{margin-top:22px;padding:20px;border-radius:22px;background:linear-gradient(160deg,rgba(70,232,180,.16),rgba(255,255,255,.05));border:1px solid rgba(70,232,180,.4)}
.success-hero strong{display:block;color:#ffffff;font-family:var(--display);font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.success-hero p{margin:0;color:var(--muted);line-height:1.55;font-size:15px}
.platform-title{margin:26px 0 12px;color:#ffffff;font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.platform-card{padding:18px;border-radius:22px;display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.platform-icon{width:46px;height:46px;flex:0 0 46px;border-radius:15px;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.12);border:1px solid var(--line)}
.platform-card b{display:block;color:#ffffff;font-size:16px;margin:2px 0 4px}
.platform-card span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.success-cta{margin-top:20px}
.same-account{margin-top:12px;text-align:center;color:var(--faint);font-size:13px;line-height:1.5}
.secure-line{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--faint);font-size:13px;font-weight:600}

/* ===== responsivo ===== */
@media(max-width:960px){
  .landing{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "login" "visual" "extra"}
  .landing-login{position:static}
  .how{grid-template-columns:1fr 1fr}
  .how li:not(:last-child)::after{display:none}
}
@media(max-width:720px){
  .sub-plans,.sub-methods,.price-peek,.renew-grid,.platform-grid,.renew-actions,.landing-points,.sub-assure{grid-template-columns:1fr}
  .rent-demo{grid-template-columns:1fr}
  .rent-card.main{grid-row:auto}
  .sub-choice.recommended{order:-1}
  .sub-choice:hover,.renew-option:hover{transform:none}
}
@media(max-width:560px){
  .sub-shell{width:calc(100% - 24px);padding-top:calc(10px + env(safe-area-inset-top))}
  .sub-brand{font-size:19px}
  .sub-brand img{width:40px;height:40px}
  .sub-card{border-radius:26px}
  .flow-steps li{font-size:12px}
  .flow-steps .dot{width:36px;height:36px;font-size:15px}
  .flow-steps li::before{top:17px}
  .how{grid-template-columns:1fr}
  .sub-copy{grid-template-columns:1fr}
  .sub-copy button{height:48px}
  .sub-coupon-row{flex-direction:column}
  .sub-coupon-row .sub-btn{width:100%}
  .final-cta .sub-btn{width:100%}
  .sub-summary-row{flex-direction:column;gap:2px}
  .sub-summary-row strong{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}