:root {
  --txt: #000;
  --bg-body: #dc2626;
  --bg-page: #ffffff;
  --primary: #ef4444;
  --btn-bg: #fde047;
  --radius: 0px;
}

html,
body{
  height:100%;
  scroll-behavior:smooth;
  margin:0;
  background:var(--bg-body);
  color:var(--txt);
  font-family:'Arial Black', Impact, sans-serif;
}

body{
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
select,
textarea{
  font:inherit;
}

.page{
  max-width:800px;
  margin:0 auto;
  background:var(--bg-page);
  min-height:100vh;
  position:relative;
  border-left:6px solid #000;
  border-right:6px solid #000;
  overflow:hidden;
  padding-bottom:100px;
  box-shadow:0 0 50px rgba(0,0,0,.5);
}

/* =========================
   TICKER & TOPBAR
========================= */
.promoTicker{
  position:sticky;
  top:0;
  z-index:1200;
  height:45px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#000;
  color:#ffff00;
  border-bottom:4px solid #ffff00;
}

.promoMarquee{
  flex:1 1 auto;
  overflow:hidden;
  white-space:nowrap;
}

.promoTrack{
  display:inline-flex;
  gap:30px;
  padding-left:100%;
  animation:promoMove 20s linear infinite;
}

.promoItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:1px;
}

@keyframes promoMove{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

.topbar{
  position:sticky;
  top:45px;
  z-index:1100;
  background:#fff;
  border-bottom:4px dashed #000;
  padding:15px;
  text-align:center;
}

.brandTitle{
  font-weight:900;
  color:#000;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:-1px;
}

/* =========================
   IMÁGENES
========================= */
.shot{
  background:#fff;
  line-height:0;
}

.img-wrapper{
  position:relative;
  width:100%;
  padding:10px;
  background:repeating-linear-gradient(45deg, #ffff00, #ffff00 10px, #000 10px, #000 20px);
}

.landing-img{
  display:block;
  width:100%;
  height:auto;
  border:4px solid #000;
  background:#fff;
}

.lazy-img{
  opacity:0;
  transition:opacity .28s ease;
}

.lazy-img.loaded{
  opacity:1;
}

/* =========================
   FOOTER
========================= */
.footer-legal{
  border-top:6px solid #000;
  padding:0;
  background:#fff;
}

.about-block{
  padding:30px 20px;
  text-align:center;
  border-bottom:4px dashed #000;
}

.about-title{
  font-weight:900;
  font-size:20px;
  color:#000;
  margin-bottom:10px;
  text-transform:uppercase;
}

.about-text{
  color:#000;
  font-size:14px;
  font-family:Arial, sans-serif;
  font-weight:bold;
  line-height:1.6;
  margin:0;
}

.dist-block{
  background:#ffff00;
  padding:35px 20px;
  text-align:center;
  border-bottom:4px dashed #000;
}

.dist-block h2{
  color:#000 !important;
}

.dist-block p{
  color:#000 !important;
  font-family:Arial, sans-serif;
  font-weight:bold;
}

.legal-pad{
  padding:25px 15px;
  text-align:center;
  background:#000;
}

.legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 15px;
  justify-content:center;
}

.legal-links a{
  color:#ffff00;
  font-weight:900;
  text-decoration:none;
  font-size:12px;
  font-family:Arial, sans-serif;
}

.mini{
  margin-top:15px;
  font-size:11px;
  color:#fff;
  font-family:Arial, sans-serif;
}

/* =========================
   STICKY CTA
========================= */
.sticky{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  width:95%;
  max-width:760px;
  z-index:3000;
}

.btn-cta-neon{
  width:100%;
  border:4px solid #000;
  padding:20px;
  font-weight:900;
  text-transform:uppercase;
  font-size:24px;
  color:#dc2626;
  background:var(--btn-bg);
  box-shadow:6px 6px 0px #000;
  transition:transform .1s, box-shadow .1s;
}

.btn-cta-neon:active{
  transform:translate(6px, 6px);
  box-shadow:0 0 0 #000;
}

/* =========================
   MODAL LAYOUT
========================= */
.modal{
  z-index:5000 !important;
  font-family:Arial, sans-serif;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

.modal-backdrop{
  z-index:4990 !important;
  background:rgba(0,0,0,.85);
}

.modal-dialog{
  margin:18px auto !important;
}

.modal-checkout .modal-content{
  border-radius:0;
  border:6px solid #000;
  background:#fff;
  box-shadow:10px 10px 0px rgba(0,0,0,.5);
  max-height:calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.modal-checkout .modal-header{
  border-bottom:4px dashed #000;
  text-align:center;
  padding:20px;
  background:#ffff00;
  flex:0 0 auto;
}

.modal-checkout .modal-body{
  flex:1 1 auto;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  padding:20px;
}

.close{
  position:absolute;
  right:20px;
  top:20px;
  font-size:30px;
  color:#000;
  opacity:1;
  font-weight:900;
  text-shadow:none;
}

.modal-title,
.order-title,
.modal-ofertas-title{
  color:#000 !important;
  font-family:'Arial Black', sans-serif;
  text-transform:uppercase;
}

/* =========================
   FORMULARIO Y OFERTAS
========================= */
.offer-card{
  border:3px solid #000;
  padding:10px;
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:15px;
  cursor:pointer;
  background:#f3f4f6;
}

.offer-card.active{
  border-color:#dc2626;
  background:#fef2f2;
  transform:scale(1.02);
  box-shadow:4px 4px 0px #000;
}

.offer-thumb{
  width:70px;
  height:70px;
  border:2px solid #000;
  object-fit:cover;
  flex:0 0 auto;
}

.offer-main{
  flex:1;
  min-width:0;
}

.offer-line1{
  font-weight:900;
  color:#000;
  font-size:15px;
  text-transform:uppercase;
  line-height:1.2;
}

.offer-badge-custom{
  display:inline-block;
  margin-top:5px;
  padding:4px 8px;
  font-size:12px;
  font-weight:900;
  background:#000;
  color:#fff;
  text-transform:uppercase;
}

.offer-card.active .offer-badge-custom{
  background:#dc2626;
}

.offer-right{
  text-align:right;
  flex:0 0 auto;
}

.offer-old{
  color:#64748b;
  text-decoration:line-through;
  font-size:14px;
  font-weight:bold;
}

.offer-new{
  font-weight:900;
  font-size:24px;
  color:#000;
}

.offer-card.active .offer-new{
  color:#dc2626;
}

.totals-box{
  background:#000;
  padding:15px;
  margin:20px 0;
  border:4px solid #dc2626;
  color:#fff;
}

.totals-row{
  display:flex;
  justify-content:space-between;
  font-weight:bold;
  padding:5px 0;
}

.totals-row.muted{
  color:#cbd5e1;
}

.totals-row.total{
  border-top:2px dashed #334155;
  margin-top:10px;
  padding-top:10px;
  font-size:24px;
  color:#ffff00;
  font-weight:900;
  text-transform:uppercase;
}

.btn-checkout-blue{
  background:#2563eb;
  color:#fff;
  width:100%;
  border:4px solid #000;
  padding:18px;
  font-weight:900;
  font-size:20px;
  text-transform:uppercase;
  box-shadow:4px 4px 0px #000;
}

.ig{
  display:flex;
  align-items:center;
  background:#fff;
  border:3px solid #000;
  margin-bottom:15px;
}

.ig-icon{
  color:#fff;
  background:#000;
  padding:0 15px;
  height:50px;
  display:flex;
  align-items:center;
  font-size:18px;
  flex:0 0 auto;
}

.ig input,
.ig select{
  border:none;
  background:transparent;
  width:100%;
  padding:12px;
  font-weight:bold;
  color:#000;
  outline:none;
  font-size:16px;
  min-width:0;
}

.field-label{
  font-weight:900;
  color:#000;
  display:block;
  margin-bottom:5px;
  font-size:14px;
  text-transform:uppercase;
}

.pay-box{
  background:#ffff00;
  border:4px solid #000;
  padding:15px;
  text-align:center;
  margin-bottom:20px;
}

.pay-box h4{
  color:#000 !important;
  font-family:'Arial Black', sans-serif;
  text-transform:uppercase;
}

.pay-box p{
  color:#000 !important;
  font-weight:bold;
}

.pay-chip{
  background:#000;
  color:#ffff00;
  font-weight:900;
  text-transform:uppercase;
  display:inline-block;
  padding:4px 8px;
  margin-top:6px;
}

.ajaxMsg{
  display:none;
  margin-bottom:15px;
  border-radius:0;
  font-weight:900;
}

.req{
  color:#dc2626;
  font-size:18px;
}

/* =========================
   FOMO
========================= */
.fomo-toast{
  position:fixed;
  bottom:125px;
  left:-350px;
  background:#fff;
  border:4px solid #000;
  box-shadow:6px 6px 0px rgba(0,0,0,1);
  padding:10px;
  display:flex;
  gap:12px;
  z-index:2000;
  width:300px;
  max-width:calc(100vw - 24px);
  transition:left .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family:Arial, sans-serif;
}

.fomo-toast.show{
  left:15px;
}

.fomo-icon{
  background:#ffff00;
  border:2px solid #000;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex:0 0 auto;
}

.fomo-text{
  font-size:13px;
  color:#000;
  line-height:1.4;
  font-weight:bold;
}

.fomo-time{
  color:#dc2626;
  font-weight:900;
  text-transform:uppercase;
  font-size:11px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:767px){
  .modal-dialog{
    width:calc(100% - 16px) !important;
    margin:8px auto !important;
  }

  .modal-checkout .modal-content{
    max-height:calc(100vh - 16px);
  }

  .close{
    right:14px;
    top:12px;
  }

  .btn-cta-neon{
    font-size:20px;
    padding:18px 14px;
  }

  .brandTitle{
    font-size:18px;
  }

  .promoItem{
    font-size:13px;
  }

  .fomo-toast{
    bottom:120px;
    width:280px;
  }
}

@media (max-width:480px){
  .page{
    border-left:4px solid #000;
    border-right:4px solid #000;
    padding-bottom:96px;
  }

  .topbar{
    padding:12px 10px;
  }

  .brandTitle{
    font-size:16px;
    line-height:1.15;
  }

  .img-wrapper{
    padding:6px;
  }

  .landing-img{
    border-width:3px;
  }

  .offer-card{
    gap:10px;
    padding:8px;
  }

  .offer-thumb{
    width:58px;
    height:58px;
  }

  .offer-line1{
    font-size:13px;
  }

  .offer-new{
    font-size:20px;
  }

  .btn-checkout-blue{
    font-size:17px;
    padding:16px 12px;
  }

  .btn-cta-neon{
    font-size:18px;
  }

  .fomo-toast{
    bottom:118px;
    left:-320px;
    width:260px;
  }

  .fomo-toast.show{
    left:10px;
  }
}