:root{
  --green:#008A34;
  --dark-green:#006B2D;
  --deep:#0F172A;
  --text:#111827;
  --muted:#4B5563;
  --soft:#F7FAF8;
  --border:#E4E8EA;
  --shadow:0 8px 24px rgba(16,24,40,.06);
  --red:#E11D2E;
  --blue:#0B64C0;
  --purple:#7419B8;
}
*{box-sizing:border-box}
html,body{margin:0;background:#F1F5F4;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body{min-height:100vh}
.app-shell{width:100%;max-width:430px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.official-banner-img{width:100%;display:block;height:auto;border-radius:0 0 16px 16px}
.operator-strip{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #E9ECEF;background:#fff}
.operator-strip-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;color:#17181C;font-size:12px;font-weight:500;line-height:1.25;letter-spacing:-.1px;white-space:nowrap}
.operator-strip-icon{width:17px;height:17px;object-fit:contain;flex:0 0 auto}
.operator-strip-logos{display:flex;align-items:center;gap:17px;flex:0 0 auto;margin-left:12px}
.strip-logo{display:block;object-fit:contain;max-width:none;flex-shrink:0}
.strip-logo.vivo{height:18px;width:auto}.strip-logo.claro{height:20px;width:auto}.strip-logo.tim{height:18px;width:auto}
/* V7: Hero uses one complete official ad image. Do not split text/logo/trust strip here. */
.hero-ad-section{
  width:100%;
  background:#fff;
  margin:0;
  padding:0;
  overflow:hidden;
  border-bottom:1px solid #EEF0F2;
}
.hero-ad-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
/* Safety: hide old split hero/trust components if cached markup exists. */
.hero,.trust-row,.hero-trust,.benefit-strip{display:none!important}
.form-area{padding:12px 12px 0}
.card{border:1px solid #EEF0F2;border-radius:15px;background:#fff;box-shadow:var(--shadow)}
.section-card{padding:14px 13px;margin-bottom:12px}
.section-title{font-size:13px;font-weight:500;line-height:1.25;letter-spacing:-.25px;color:#111827;margin:0 0 14px}
.carrier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.carrier-card{appearance:none;border:1.2px solid #DFE5E9;background:#fff;border-radius:10px;height:75px;padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.16s ease}
.carrier-card.is-active{border-color:#008A34;box-shadow:0 0 0 1px rgba(0,138,52,.06);background:#FBFFFC}
.carrier-card[data-carrier="Claro"].is-active,.carrier-card[data-carrier="TIM"].is-active{border-color:#008A34}
.carrier-card:focus-visible,.amount-card:focus-visible,.pix-method:focus-visible,.floating-pay-button:focus-visible{outline:2px solid rgba(0,138,52,.3);outline-offset:2px}
.carrier-logo{object-fit:contain;display:block;margin-bottom:6px;max-width:82%}
.carrier-logo.vivo{height:24px}.carrier-logo.claro{height:25px}.carrier-logo.tim{height:24px}
.carrier-card span,.carrier-card em{font-style:normal;font-size:11px;line-height:1.25;color:#111827}.carrier-card span{font-weight:500}.carrier-card em{font-weight:500}
.phone-box{height:45px;border:1px solid #CBD5E1;border-radius:8px;display:flex;align-items:center;padding:0 12px;background:#fff}
.phone-prefix{display:flex;align-items:center;gap:7px;flex:0 0 auto;min-width:58px}
.flag-img{width:24px;height:16px;display:block;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.dial{font-size:14px;font-weight:500;color:#111827;white-space:nowrap;line-height:1}
.phone-divider{width:1px;height:22px;background:#D7DEE6;margin:0 12px 0 10px;flex:0 0 auto}
.phone-box input{border:0;outline:0;min-width:0;flex:1;font-size:14px;font-weight:400;line-height:1.2;color:#111827;font-family:inherit;padding:0;background:transparent}
.phone-box input::placeholder{color:#596171}.helper{margin:8px 0 0;font-size:10.5px;font-weight:400;line-height:1.35;color:#6B7280}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px}
.amount-card{appearance:none;border:1.1px solid #DFE5E9;background:#fff;border-radius:9px;height:76px;padding:14px 4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:.16s ease}
.amount-card.is-active{border-color:#008A34;box-shadow:0 0 0 1px rgba(0,138,52,.06);background:#FBFFFC}
.tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);height:17px;padding:3px 8px;border-radius:5px;color:#fff;font-size:10px;font-weight:700;line-height:1;white-space:nowrap}
.tag.purple{background:#7B2CD0}.tag.green{background:#007E38}.tag.blue{background:#0966C7}.tag.orange{background:#F97316}.tag.teal{background:#007A65}
.amount-card strong{font-size:20px;font-weight:500;line-height:1.05;letter-spacing:-.4px;color:#111827;margin-bottom:7px}
.amount-card .discount{font-size:11px;font-weight:700;line-height:1;color:#EF233C;background:#FFECEF;border-radius:999px;padding:4px 9px}
.summary-card{margin-top:14px;border:0;border-radius:0;background:#fff;box-shadow:none;padding:12px 0 13px}
.summary-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:400;line-height:1.25;color:#111827}
.summary-line + .summary-line{margin-top:10px}
.summary-line span{color:#111827}
.summary-line strong{font-size:15px;font-weight:600;line-height:1.15;color:#111827;white-space:nowrap}
.summary-line.discount-line span,.summary-line.discount-line strong{color:#008A34}
.summary-line.pay-line{border-top:1px dashed #D7DEE6;margin-top:13px;padding-top:13px}
.summary-line.pay-line span{font-size:14px;font-weight:600;color:#111827}
.summary-line.pay-line strong{font-size:22px;font-weight:700;letter-spacing:-.45px;color:#008A34}
.payment-card{padding-bottom:16px}.pix-method{appearance:none;width:100%;height:56px;border:1.2px solid #008A34;border-radius:10px;background:#fff;display:flex;align-items:center;gap:11px;padding:0 12px;cursor:pointer;text-align:left}
.pix-symbol{width:31px;height:31px;object-fit:contain;flex-shrink:0}.pix-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
.pix-copy strong{font-size:18px;font-weight:700;line-height:1.1;color:#111827}.pix-copy small{font-size:11.5px;font-weight:400;line-height:1.25;color:#4B5563;margin-top:3px}
.pix-badge{font-style:normal;margin-left:auto;align-self:center;flex:0 0 auto;font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.2px;color:#007A2F;background:#DDF8E7;border-radius:999px;padding:5px 8px;white-space:nowrap}
.terms{margin:10px 1px 10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;font-weight:400;line-height:1.35;color:#111827}.terms input{accent-color:#008A34;margin-top:2px}.terms a{font-weight:500;text-decoration:underline;color:#006B2D}
.security-note{border:1px solid #F2C56B;background:#FFF9EC;border-radius:9px;min-height:51px;display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:12px}.security-note img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.security-note p{margin:0;font-size:10.5px;font-weight:400;line-height:1.25;color:#374151}.security-note strong{font-size:11.5px;font-weight:700;color:#111827}
.pay-button{appearance:none;width:100%;height:52px;border:0;border-radius:10px;background:linear-gradient(180deg,#00943B,#007B31);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:800;line-height:1;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 18px rgba(0,128,52,.16)}.pay-button img{width:18px;height:18px;filter:brightness(0) invert(1);object-fit:contain}
.footer{padding:2px 12px 18px;background:#fff}.footer-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 8px}.footer-trust div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;text-align:center;min-height:43px}
.footer-trust img{width:16px;height:16px;object-fit:contain}.footer-trust span{font-size:9.5px;font-weight:400;line-height:1.15;color:#111827}.footer nav{border-top:1px solid #EEF0F2;padding-top:8px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 12px}
.footer nav a{font-size:10.5px;font-weight:400;line-height:1.2;color:#111827;text-decoration:none}.footer nav a.support{font-weight:600}.campaign-bottom{margin-top:8px;text-align:center;font-size:10px;font-weight:400;color:#374151;line-height:1.25}.campaign-bottom span{margin-left:8px}
@media (max-width:390px){
  .operator-strip{padding:0 14px}
  .operator-strip-logos{gap:12px}
  .form-area{padding:12px 10px 0}
  .amount-card strong{font-size:19px}
}


/* V12: sticky payment bar inspired by mobile wallet checkout. */
.form-area{padding-bottom:16px}
.floating-pay-wrap{
  position:sticky;
  bottom:12px;
  z-index:20;
  width:100%;
  margin:2px 0 14px;
}
.floating-pay-bar{
  width:100%;
  min-height:64px;
  border-radius:18px;
  background:#071008;
  box-shadow:0 14px 28px rgba(0,0,0,.22);
  display:grid;
  grid-template-columns:126px 1fr;
  align-items:center;
  overflow:hidden;
}
.floating-pay-total{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 14px;
  border-right:1px solid rgba(255,255,255,.22);
}
.floating-pay-total span{
  font-size:12px;
  font-weight:600;
  line-height:1.15;
  color:#fff;
  margin-bottom:5px;
}
.floating-pay-total strong{
  font-size:24px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.5px;
  color:#00D64F;
  white-space:nowrap;
}
.floating-pay-button{
  appearance:none;
  border:0;
  height:48px;
  margin:8px 10px;
  border-radius:12px;
  background:linear-gradient(180deg,#08D640,#00B92F);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:inherit;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
.floating-pay-button span{
  font-size:16px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
}
.floating-pay-button strong{
  font-size:26px;
  font-weight:700;
  line-height:1;
}
@media (max-width:390px){
  .floating-pay-bar{grid-template-columns:112px 1fr;min-height:60px;border-radius:16px}
  .floating-pay-total{padding:0 12px}
  .floating-pay-total strong{font-size:22px}
  .floating-pay-button span{font-size:15px}
  .floating-pay-button{margin:8px;height:46px}
}

/* V13: official campaign explanation and rules sections below Pagamento. */
.campaign-about-card,
.campaign-rules-card{
  margin:0 0 12px;
  padding:15px 13px;
  border-radius:15px;
  border:1px solid #EEF0F2;
  background:#fff;
  box-shadow:var(--shadow);
}
.campaign-card-header,
.campaign-rules-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.campaign-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.campaign-card-title h2{
  margin:0;
  font-size:13px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.25px;
  color:#111827;
}
.campaign-title-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  flex:0 0 auto;
}
.campaign-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:5px 10px;
  border-radius:999px;
  background:#EAF8EF;
  color:#007A2F;
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.campaign-info-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.campaign-info-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:center;
}
.campaign-info-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  background:#EAF8EF;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.campaign-info-icon img{
  width:24px;
  height:24px;
  object-fit:contain;
}
.campaign-info-item p{
  margin:1px 0 0;
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.1px;
  color:#1F2937;
}
.campaign-rules-header{margin-bottom:15px}
.campaign-rules-toggle{
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.campaign-chevron{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:0 0 auto;
}
.campaign-rule-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.campaign-rule-list li{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:center;
}
.campaign-rule-list img{
  width:18px;
  height:18px;
  object-fit:contain;
  margin-top:0;
}
.campaign-rule-list span{
  font-size:13.5px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:-.1px;
  color:#1F2937;
}
.secure-environment-box{
  margin-top:18px;
  border:1px solid #008A34;
  border-radius:12px;
  background:#F7FFF9;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:13px;
  align-items:center;
  padding:15px 14px;
}
.secure-environment-box img{
  width:34px;
  height:34px;
  object-fit:contain;
}
.secure-environment-box strong{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  color:#111827;
  margin-bottom:4px;
}
.secure-environment-box p{
  margin:0;
  font-size:12.5px;
  font-weight:400;
  line-height:1.45;
  color:#1F2937;
}
@media (max-width:390px){
  .campaign-info-item p{font-size:13.5px;line-height:1.5}
  .campaign-rule-list span{font-size:13px}
  .secure-environment-box{padding:13px 12px;grid-template-columns:34px 1fr}
}

/* V14: campaign section title alignment and rules collapse interaction. */
.campaign-rules-card.is-collapsed .campaign-rules-content{
  display:none;
}
.campaign-rules-card.is-collapsed .campaign-rules-header{
  margin-bottom:0;
}

/* V15: mobile-friendly institutional footer text, replacing only the old footer legal/nav copy. */
.footer nav:not(.footer-links){display:none}
.campaign-bottom{display:none}
.footer-legal{
  border-top:1px solid #EEF0F2;
  padding:9px 2px 0;
  text-align:center;
  color:#374151;
}
.footer-mission{
  margin:0 0 8px;
  font-size:10.5px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.05px;
  color:#4B5563;
  font-style:italic;
}
.footer-official-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.footer-service{
  margin:0;
  font-size:10.5px;
  font-weight:400;
  line-height:1.25;
  color:#4B5563;
}
.footer-service span{white-space:nowrap}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 0;
  margin:0;
  padding:0;
  line-height:1.25;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  font-size:10.5px;
  font-weight:400;
  line-height:1.25;
  color:#1D74B7;
  text-decoration:none;
  white-space:nowrap;
}
.footer-links a + a::before{
  content:"|";
  color:#94A3B8;
  margin:0 7px;
  font-weight:400;
}
.footer-copyright{
  margin:0;
  font-size:10.5px;
  font-weight:400;
  line-height:1.25;
  color:#4B5563;
}
.footer-copyright a{
  color:#1D74B7;
  text-decoration:none;
  white-space:nowrap;
}
@media (max-width:390px){
  .footer{padding-left:10px;padding-right:10px}
  .footer-mission{font-size:10px;line-height:1.35;margin-bottom:7px}
  .footer-service,.footer-links a,.footer-copyright{font-size:10px;line-height:1.25}
  .footer-links a + a::before{margin:0 6px}
}


/* V16: footer link color alignment, default collapsed rules, footer icon replacement support. */
.footer-legal a,
.footer-legal-links a{
  color:#2E8BD7;
  text-decoration:none;
}
.footer-legal a:hover,
.footer-legal-links a:hover{
  text-decoration:underline;
}
.campaign-rules-card.is-collapsed{
  padding-bottom:15px;
}
.campaign-rules-content[hidden]{
  display:none !important;
}
.footer-trust img{
  width:16px;
  height:16px;
  object-fit:contain;
}


/* V17: footer legal links and footer trust icon final fix. */
.footer-legal a,
.footer-legal-links a,
.footer-legal .footer-legal-link,
.footer-legal-links .footer-legal-link,
.footer-legal a:visited,
.footer-legal-links a:visited {
  color: #2E8BD7 !important;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal-links a:hover {
  color: #2E8BD7 !important;
  text-decoration: underline;
}

.footer-trust img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
}

.footer-trust div {
  gap: 5px;
  min-height: 58px;
}


/* V18: Pagamento security note changed to “Ambiente seguro” style. */
.security-note.security-note-ambiente {
  margin-top: 12px;
  border: 1px solid #0A8F3C;
  background: #F7FFF9;
  border-radius: 12px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: center;
}

.security-note.security-note-ambiente img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.security-note.security-note-ambiente p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: #111827;
}

.security-note.security-note-ambiente strong {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}


/* Backend V1: dynamic amount sold-out state. */
.amount-card.is-sold-out,
.amount-card:disabled{
  opacity:.48;
  cursor:not-allowed;
  filter:grayscale(.15);
}
.amount-card.is-sold-out strong{
  color:#6B7280;
}
.amount-card.is-sold-out .discount{
  color:#6B7280;
  background:#F3F4F6;
}


/* Home Pix loading overlay - final design */
.pix-loading-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.pix-loading-overlay.is-visible{
  display:flex;
}
.pix-loading-card{
  width:min(100%, 326px);
  border-radius:22px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.30);
  padding:30px 20px 18px;
  text-align:center;
  color:#111827;
  animation:pixLoadingCardIn .22s ease-out both;
}
.pix-loading-visual{
  position:relative;
  width:116px;
  height:116px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pix-loading-ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    conic-gradient(from 0deg, #08A83E 0 42deg, transparent 42deg 150deg, rgba(8,168,62,.30) 150deg 250deg, transparent 250deg 360deg);
  animation:pixRingSpin 1.05s linear infinite;
}
.pix-loading-ring:after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;
  background:#EAF8EF;
  box-shadow:inset 0 0 0 1px rgba(0,138,52,.04);
}
.pix-loading-orb{
  position:relative;
  z-index:1;
  width:74px;
  height:74px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#05A943,#008A34);
  box-shadow:0 14px 34px rgba(0,138,52,.22);
}
.pix-loading-orb img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:none;
}
.pix-loading-card h2{
  margin:0 0 14px;
  font-size:22px;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.45px;
  color:#111827;
}
.pix-loading-text{
  margin:0 auto 12px;
  max-width:270px;
  font-size:14.5px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.08px;
  color:#202632;
}
.pix-loading-subtext{
  margin:0 auto 18px;
  font-size:13.5px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.2px;
  color:#667085;
}
.pix-loading-status{
  min-height:50px;
  border-radius:14px;
  background:linear-gradient(90deg,#EAF8EF 0%,#F3FBF6 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#008A34;
  margin:0 0 18px;
}
.pix-loading-status strong{
  font-size:14.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
}
.pix-loading-dots{
  width:24px;
  height:24px;
  border-radius:999px;
  border:3px solid rgba(0,138,52,.16);
  border-top-color:#08A83E;
  animation:pixDotsSpin .75s linear infinite;
}
.pix-loading-safe{
  border-top:1px solid #E6EAF0;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#667085;
}
.pix-loading-safe span{
  font-size:14px;
  line-height:1;
}
.pix-loading-safe p{
  margin:0;
  font-size:12.5px;
  font-weight:400;
  line-height:1.35;
  color:#667085;
}
body.pix-loading-active{
  overflow:hidden;
}
@keyframes pixRingSpin{
  to{transform:rotate(360deg);}
}
@keyframes pixDotsSpin{
  to{transform:rotate(360deg);}
}
@keyframes pixLoadingCardIn{
  from{opacity:0;transform:translateY(10px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width:360px){
  .pix-loading-card{
    width:min(100%, 310px);
    padding:26px 18px 17px;
    border-radius:20px;
  }
  .pix-loading-visual{
    width:104px;
    height:104px;
    margin-bottom:16px;
  }
  .pix-loading-orb{
    width:68px;
    height:68px;
  }
  .pix-loading-card h2{
    font-size:20px;
  }
  .pix-loading-text{
    font-size:13.5px;
  }
}


/* Home Pix loading overlay V4: typography + icon refinement based on final design稿 */
.pix-loading-card{
  width:min(calc(100% - 28px), 332px);
  min-height:auto;
  border-radius:22px;
  padding:28px 20px 17px;
}
.pix-loading-visual{
  width:108px;
  height:108px;
  margin:0 auto 18px;
}
.pix-loading-orb{
  width:70px;
  height:70px;
}
.pix-loading-orb img{
  width:37px;
  height:37px;
  object-fit:contain;
}
.pix-loading-card h2{
  margin:0 0 18px;
  font-size:19px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.45px;
}
.pix-loading-text{
  margin:0 auto 14px;
  max-width:275px;
  font-size:13.5px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.08px;
}
.pix-loading-subtext{
  margin:0 auto 18px;
  max-width:285px;
  font-size:12.5px;
  font-weight:400;
  line-height:1;
  letter-spacing:.2px;
}
.pix-loading-status{
  min-height:50px;
  margin:0 0 18px;
  border-radius:14px;
  gap:11px;
}
.pix-loading-status strong{
  font-size:14.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.2px;
}
.pix-loading-dots{
  width:22px;
  height:22px;
  border-width:3px;
}
.pix-loading-safe{
  padding-top:14px;
  gap:8px;
}
.pix-loading-safe img{
  width:13px;
  height:13px;
  object-fit:contain;
  flex:0 0 auto;
  opacity:.72;
}
.pix-loading-safe span{
  display:none;
}
.pix-loading-safe p{
  margin:0;
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:normal;
}
@media (max-width:360px){
  .pix-loading-card{
    width:min(calc(100% - 24px), 316px);
    padding:25px 18px 16px;
    border-radius:20px;
  }
  .pix-loading-visual{
    width:98px;
    height:98px;
    margin-bottom:16px;
  }
  .pix-loading-orb{
    width:64px;
    height:64px;
  }
  .pix-loading-orb img{
    width:34px;
    height:34px;
  }
  .pix-loading-card h2{
    font-size:19px;
    line-height:1;
  }
  .pix-loading-text{
    font-size:13.5px;
    line-height:1;
  }
  .pix-loading-subtext{
    font-size:12.5px;
    line-height:1;
  }
}


/* Home Pix loading overlay V4.1: smaller top icon + one-line safe note */
.pix-loading-card{
  width:min(calc(100vw - 32px), 360px) !important;
  max-width:360px !important;
  box-sizing:border-box !important;
}
.pix-loading-visual{
  width:54px !important;
  height:54px !important;
  margin:0 auto 18px !important;
}
.pix-loading-ring{
  inset:0 !important;
}
.pix-loading-ring:after{
  inset:3px !important;
}
.pix-loading-orb{
  width:35px !important;
  height:35px !important;
  min-width:35px !important;
  min-height:35px !important;
  max-width:35px !important;
  max-height:35px !important;
  flex:0 0 35px !important;
}
.pix-loading-orb img,
.pix-loading-orb .pix-loading-main-icon{
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  min-height:19px !important;
  max-width:19px !important;
  max-height:19px !important;
  display:block !important;
  object-fit:contain !important;
}
.pix-loading-safe{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding-top:14px !important;
  min-height:28px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.pix-loading-safe img,
.pix-loading-safe .pix-loading-lock-icon{
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  min-height:12px !important;
  max-width:12px !important;
  max-height:12px !important;
  flex:0 0 12px !important;
  display:block !important;
  object-fit:contain !important;
  opacity:.72 !important;
}
.pix-loading-safe p{
  margin:0 !important;
  padding:0 !important;
  font-size:10.5px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:normal !important;
  color:#667085 !important;
  white-space:nowrap !important;
  max-width:none !important;
  text-align:center !important;
}
@media (max-width:360px){
  .pix-loading-card{
    width:min(calc(100vw - 24px), 336px) !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .pix-loading-safe{
    gap:5px !important;
  }
  .pix-loading-safe img,
  .pix-loading-safe .pix-loading-lock-icon{
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
    min-height:11px !important;
    max-width:11px !important;
    max-height:11px !important;
    flex-basis:11px !important;
  }
  .pix-loading-safe p{
    font-size:9.5px !important;
    white-space:nowrap !important;
    line-height:1 !important;
  }
}


/* V4.4 mobile input zoom fix */
input,
textarea,
select,
.phone-input,
.phone-input input,
.phone-field input,
.mobile-input,
#phoneInput,
input[name="phone"]{
  font-size:16px !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
html{
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
  touch-action:manipulation;
}
body{
  touch-action:manipulation;
}


/* Phone-first homepage V1: phone input style aligned with familiar Brazilian recharge app layout.
   Visual-only override. Does not change form field names, IDs, order submission, analytics, Pix flow, or carrier/amount logic. */
.phone-box{
  min-height:52px !important;
  height:52px !important;
  border:1px solid #DDE3EA !important;
  border-radius:9px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 12px !important;
  background:#fff !important;
  box-shadow:none !important;
}
.phone-prefix{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  min-width:64px !important;
}
.flag-img{
  width:26px !important;
  height:18px !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:2px !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.05) !important;
}
.dial{
  font-size:16px !important;
  font-weight:500 !important;
  color:#111827 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.phone-divider{
  width:1px !important;
  height:27px !important;
  background:#DDE3EA !important;
  margin:0 13px 0 12px !important;
  flex:0 0 auto !important;
}
.phone-box input{
  border:0 !important;
  outline:0 !important;
  min-width:0 !important;
  flex:1 !important;
  height:100% !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:#111827 !important;
  font-family:inherit !important;
  padding:0 !important;
  background:transparent !important;
}
.phone-box input::placeholder{
  color:#596171 !important;
  opacity:1 !important;
}


/* Operator theme + plan carousel V1
   Visual-only upgrade: dynamic carrier color, compact recharge-app intro, horizontal package cards.
   It does not change form field names, API parameters, payment flow, analytics, or Pix callback logic. */
body.carrier-vivo{
  --carrier-color:#660099;
  --carrier-color-dark:#4E0078;
  --carrier-soft:#F5ECFF;
  --carrier-ring:rgba(102,0,153,.14);
}
body.carrier-claro{
  --carrier-color:#E30613;
  --carrier-color-dark:#B9000B;
  --carrier-soft:#FFF0F1;
  --carrier-ring:rgba(227,6,19,.14);
}
body.carrier-tim{
  --carrier-color:#004B93;
  --carrier-color-dark:#003A72;
  --carrier-soft:#EEF6FF;
  --carrier-ring:rgba(0,75,147,.14);
}
body:not(.carrier-vivo):not(.carrier-claro):not(.carrier-tim){
  --carrier-color:#008A34;
  --carrier-color-dark:#006B2D;
  --carrier-soft:#F0FBF5;
  --carrier-ring:rgba(0,138,52,.14);
}

.home-intro{
  margin:0;
  padding:16px 16px 14px;
  background:linear-gradient(180deg,var(--carrier-soft),#fff 86%);
  border-bottom:1px solid #EEF0F2;
}
.intro-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  color:var(--carrier-color);
  font-size:11px;
  font-weight:700;
  line-height:1;
  margin-bottom:10px;
}
.home-intro h1{
  margin:0;
  font-size:19px;
  line-height:1.16;
  letter-spacing:-.48px;
  font-weight:750;
  color:#111827;
}
.home-intro p{
  margin:8px 0 0;
  font-size:12.2px;
  line-height:1.42;
  font-weight:400;
  color:#4B5563;
}
.intro-trust{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:12px;
}
.intro-trust span{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid #E6EAF0;
  color:#111827;
  font-size:10.5px;
  font-weight:700;
  line-height:1;
}
.section-subtitle{
  margin:-8px 0 12px;
  font-size:11.2px;
  line-height:1.35;
  color:#6B7280;
  font-weight:400;
}
.carrier-card.is-active,
.carrier-card[data-carrier="Claro"].is-active,
.carrier-card[data-carrier="TIM"].is-active{
  border-color:var(--carrier-color) !important;
  box-shadow:0 0 0 1px var(--carrier-ring) !important;
  background:var(--carrier-soft) !important;
}
.carrier-card:focus-visible,
.amount-card:focus-visible,
.pix-method:focus-visible,
.floating-pay-button:focus-visible,
.pay-button:focus-visible{
  outline:2px solid var(--carrier-ring) !important;
  outline-offset:2px !important;
}
.amount-grid.amount-carousel{
  display:flex !important;
  grid-template-columns:none !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 2px 10px !important;
  margin:0 -2px !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.amount-grid.amount-carousel::-webkit-scrollbar{
  display:none;
}
.amount-grid.amount-carousel{
  scrollbar-width:none;
}
.amount-carousel .amount-card{
  min-width:148px !important;
  width:148px !important;
  height:126px !important;
  flex:0 0 148px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding:15px 12px 11px !important;
  border-radius:14px !important;
  scroll-snap-align:start;
}
.amount-carousel .amount-card.is-active{
  border-color:var(--carrier-color) !important;
  box-shadow:0 0 0 1px var(--carrier-ring), 0 8px 18px rgba(17,24,39,.05) !important;
  background:linear-gradient(180deg,var(--carrier-soft),#fff 74%) !important;
}
.amount-carousel .amount-card strong{
  font-size:24px !important;
  font-weight:750 !important;
  line-height:1 !important;
  letter-spacing:-.55px !important;
  color:#111827 !important;
  margin:0 0 8px !important;
}
.amount-carousel .amount-card .plan-validity{
  display:block;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  color:#111827;
  margin-bottom:5px;
}
.amount-carousel .amount-card .plan-benefit{
  display:block;
  font-size:10.5px;
  line-height:1.25;
  font-weight:500;
  color:#4B5563;
  margin-bottom:auto;
  min-height:26px;
}
.amount-carousel .amount-card .discount{
  display:inline-flex !important;
  margin-top:8px !important;
  color:var(--carrier-color) !important;
  background:var(--carrier-soft) !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  padding:5px 8px !important;
  border-radius:999px !important;
}
.amount-carousel .tag{
  top:-8px !important;
  left:12px !important;
  transform:none !important;
  background:var(--carrier-color) !important;
}
.summary-line.discount-line span,
.summary-line.discount-line strong,
.summary-line.pay-line strong{
  color:var(--carrier-color) !important;
}
.pix-method{
  border-color:var(--carrier-color) !important;
}
.pix-badge{
  color:var(--carrier-color) !important;
  background:var(--carrier-soft) !important;
}
.terms input{
  accent-color:var(--carrier-color) !important;
}
.terms a{
  color:var(--carrier-color-dark) !important;
}
.pay-button{
  background:linear-gradient(180deg,var(--carrier-color),var(--carrier-color-dark)) !important;
  box-shadow:0 10px 18px var(--carrier-ring) !important;
}
@media(max-width:360px){
  .amount-carousel .amount-card{
    min-width:140px !important;
    width:140px !important;
    flex-basis:140px !important;
  }
  .home-intro h1{
    font-size:18px;
  }
}