:root{
  --orange:#f28912;
  --orange-deep:#ef6b1b;
  --yellow:#ffd24d;
  --blue-dark:#052e58;
  --white:#ffffff;
  --brandW:44px;

  /* Pay card / dark */
  --card-bg:#ffffff;
  --card-text:#0e2b4d;
  --card-border:rgba(0,0,0,.12);
  --muted:#6b6b6b;
}

[data-theme="dark"]{
  --card-bg:#0e1522;
  --card-text:#d8e2ff;
  --card-border:rgba(255,255,255,.14);
  --muted:#93a1b7;
  --blue-dark:#d8e2ff;
  --orange:#b65d0b;
  --orange-deep:#a74f0c;
  --yellow:#f1c93c;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:"Poppins","Inter","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--blue-dark);
  background:var(--orange);
}

/* Fondo con viñeta suave */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 40% at 40% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(60% 60% at 85% 80%, rgba(0,0,0,.10), transparent 60%);
}

/* Contenedor */
.container{width:min(1280px, 94%); margin-inline:auto; padding:20px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.06);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.topbar .container{padding-block:10px}
.navbar{
  display:grid;
  grid-template-columns: var(--brandW) 1fr var(--brandW);
  align-items:center;
}
.brand{
  justify-self:start; width:var(--brandW);
  display:inline-flex; align-items:center; justify-content:flex-start;
  font-weight:900; color:var(--blue-dark); text-decoration:none; font-size:22px;
}
.nav{justify-self:center; list-style:none; display:flex; gap:28px; margin:0; padding:0}
.nav a{color:var(--blue-dark); text-decoration:none; font-weight:600; opacity:.95}
.nav a:hover{opacity:1}
.nav-spacer{justify-self:end; width:var(--brandW); height:1px}

/* Título */
.hero-title{
  position: relative; display:block; width:100%; text-align:center;
  font-size: clamp(40px, 6.6vw, 88px); font-weight: 900; color: var(--blue-dark);
  letter-spacing: -0.5px; margin: 12px 0 28px; text-wrap: balance;
}
.hero-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px;
  width:min(100%, 980px); height:10px;
  background: linear-gradient(90deg, var(--orange-deep), var(--yellow));
  border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Promo banner */
.promo-banner{
  position:relative; display:flex; align-items:center; gap:.75rem;
  margin: 12px auto 18px; padding:.9rem 1.1rem; border-radius:14px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.08) inset, 0 2px 10px rgba(0,0,0,.06);
  width: clamp(300px, 64%, 760px); backdrop-filter: blur(2px); animation: fadeInUp .7s ease both;
}
.promo-banner::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:8px; height:70%; border-radius:6px;
  background: linear-gradient(180deg, var(--orange-deep), var(--yellow));
  box-shadow:0 0 12px rgba(255,210,80,.6);
}
.promo-pill{
  font-weight:700; font-size:.85rem; letter-spacing:.4px; text-transform:uppercase;
  color:#0f2a4a; background:#ffd166; padding:.35rem .55rem; border-radius:999px; box-shadow: 0 2px 0 rgba(0,0,0,.08);
  margin-left:22px;
}
.promo-text{margin:0; font-size: clamp(1rem, 2.2vw, 1.22rem); line-height:1.35; color:#10314f; font-weight:600}
.promo-highlight{position:relative; font-weight:800; color:#063a6b; text-shadow: 0 0 6px rgba(255, 214, 102, .45)}
.promo-highlight::after{
  content:""; position:absolute; left:-2%; top:50%; width:104%; height:48%; transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(255,214,102,.40) 0%, rgba(255,214,102,0) 70%); filter: blur(6px);
  pointer-events:none; animation: glow 2.4s ease-in-out infinite;
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}
@keyframes glow{0%,100%{opacity:.35} 50%{opacity:.8}}
@media (prefers-reduced-motion: reduce){ .promo-banner{animation:none} .promo-highlight::after{animation:none} }

/* Dos columnas */
.stage{
  display:grid; grid-template-columns: 600px 560px; justify-content:center; align-items:start;
  gap:36px; margin-top:6px;
}
.left-col{padding-top:200px}

/* Tarjeta del formulario */
.promo-card{
  background:linear-gradient(180deg,#ffe37a,#ffd86b);
  border-radius:18px; padding:18px; display:grid; grid-template-columns: 230px 1fr; align-items:center; gap:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.35); max-width:620px;
}
.promo-left.steps{display:flex; flex-direction:column; gap:10px; color:#073057}
.step{display:flex; gap:10px; align-items:flex-start}
.step .num{flex:0 0 26px; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:#ffd166; color:#09325d; font-weight:900; box-shadow:0 1px 0 rgba(0,0,0,.12)}
.step .txt{flex:1; font-weight:600; line-height:1.25}
.step .txt strong{font-weight:900}

/* Formulario */
.promo-form{display:grid; grid-template-columns:1fr; gap:12px; max-width:520px}
.promo-form select, .promo-form input{
  padding:14px; border-radius:14px; border:2px solid transparent; background:#fff; color:#1b2b3d;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:border-color .15s ease, box-shadow .15s ease;
}
.promo-form select{
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%231b2b3d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 12px center; padding-right:40px;
}
.promo-form .valid{border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18), inset 0 0 0 1px rgba(0,0,0,.06)}
.promo-form .invalid{border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18), inset 0 0 0 1px rgba(0,0,0,.06)}

/* Botón base */
.btn{
  position:relative; background:linear-gradient(180deg,#ef6b1b,#f28912); color:#fff; border:0; padding:12px 22px;
  border-radius:40px; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.btn:disabled{opacity:.65; cursor:not-allowed}
.btn::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-10px; height:18px; border-radius:999px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.28), transparent 70%); filter: blur(2px); pointer-events:none;
}

/* Tarjeta con imagen a la derecha */
.right-col{display:flex; justify-content:flex-end}
.image-card{
  background:linear-gradient(180deg,#ffe37a,#ffd86b);
  border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:22px; width:100%; max-width:560px; min-height:460px;
  box-shadow:0 16px 40px rgba(0,0,0,.16); display:flex; align-items:center; justify-content:center;
}
.image-card img{max-width:100%; height:auto; display:block}

/* ============ PAY CARD ============ */
.center{display:flex; justify-content:center; align-items:center; min-height:80vh}
.pay-card{
  width:min(760px, 96%); background:var(--card-bg); border-radius:18px; box-shadow:0 28px 60px rgba(0,0,0,.18); overflow:hidden;
  color:var(--card-text); border:1px solid var(--card-border);
}
.pay-card__tabs{
  display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--card-border); background:var(--card-bg);
}
.pay-card__tabs .tab{background:transparent; border:0; font-weight:700; color:var(--card-text); cursor:pointer; padding:8px 6px; border-radius:8px; opacity:.85}
.pay-card__tabs .tab.is-active{background:rgba(127,127,127,.10); opacity:1}
.pay-card__tabs .spacer{flex:1}
.theme-switch{display:flex; align-items:center; gap:6px; font-weight:700; color:var(--card-text)}

.pay-card__body{padding:18px 22px 22px}
.pay-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.pay-head h2{margin:0; font-size:18px; font-weight:800}
.brands{margin-left:auto; display:flex; gap:8px}
.logo{width:44px; height:28px; border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.08)}
.logo.visa text{letter-spacing:1px}

/* Mini resumen */
.mini-summary{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--card-border);
  border-radius:12px; background:rgba(127,127,127,.06); margin-bottom:10px;
}
.mini-summary .op{display:flex; align-items:center; gap:10px}
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:28px; padding:0 10px;
  border-radius:999px; font-weight:900; background:#ffd166; color:#0f2a4a}
.mini-summary .amount{display:flex; align-items:center; gap:8px}
.mini-summary .amount strong{font-size:18px}

/* Inputs (payment) */
.pay-card label{display:block; margin:10px 0 6px; font-weight:700}
.pay-card input{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--card-border); background:#fff; color:#0e2b4d; font-weight:600;
}
[data-theme="dark"] .pay-card input{background:#0f1b2f; color:#d8e2ff; border-color:var(--card-border)}
.pay-card input.valid{border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18)}
/* ↓ rojo solo si fue tocado y quedó inválido */
.pay-card input.touched.invalid{border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.err{min-height:18px; font-size:12px; color:#e53935; visibility:hidden}
.err.show{visibility:visible}

.grid{display:grid; grid-template-columns:1fr 220px; gap:12px}
.grid.one{grid-template-columns:1fr 220px}

/* Botón pagar con animaciones */
.btn.pay-btn{
  width:100%; margin-top:14px; background:linear-gradient(180deg,#1677ff,#155eea);
  font-size:20px; padding:14px 22px; border-radius:12px; box-shadow:0 10px 20px rgba(0,64,255,.25);
}
.btn.pay-btn.loading{
  background: linear-gradient(90deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.25) 80%) , linear-gradient(180deg,#1677ff,#155eea);
  background-size: 200% 100%, 100% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer{0%{background-position:-200% 0, 0 0}100%{background-position:200% 0, 0 0}}
.btn.pay-btn.reject{background:linear-gradient(180deg,#e53935,#c62828); animation: shake .45s ease}
@keyframes shake{
  10%, 90% { transform: translateX(-1px) }
  20%, 80% { transform: translateX(2px) }
  30%, 50%, 70% { transform: translateX(-4px) }
  40%, 60% { transform: translateX(4px) }
}

/* Helpers */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.muted{color:var(--muted); margin:8px 0}
.small{color:rgba(0,0,0,.6); font-size:13px; margin-top:8px}
.sr-only{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.captcha{display:flex; gap:8px; align-items:center; margin:10px 0}
.captcha input{width:100px; padding:8px; border-radius:8px; border:1px solid var(--card-border)}

/* =====================  RESPONSIVE  ===================== */
/* Home (index) */
@media (max-width: 900px){
  .container{width:min(680px, 92%)}
  .stage{grid-template-columns:1fr; gap:20px}
  .left-col{padding-top:40px}
  .promo-card{grid-template-columns:1fr; max-width:100%}
  .image-card{max-width:100%; min-height:360px}
  .promo-banner{width:100%}
}

@media (max-width: 560px){
  .container{width:92%}
  .hero-title{font-size: clamp(34px, 9vw, 44px); margin-top:8px}
  .hero-title::after{height:8px}
  .promo-banner{padding:.7rem .9rem}
  .promo-pill{margin-left:10px; font-size:.78rem}
  .promo-text{font-size:1rem}
  .left-col{padding-top:18px}
  .promo-card{padding:14px}
  .promo-form select,.promo-form input{padding:12px}
}

/* Pasarela (payment) */
@media (max-width: 720px){
  .center{min-height:unset}
  .pay-card{width:96%; border-radius:14px}
  .pay-card__tabs{gap:8px; padding:12px}
  .theme-switch span{font-size:.95rem}
  .pay-card__body{padding:14px}
  .mini-summary{flex-direction:column; align-items:stretch; gap:8px}
  .grid{grid-template-columns:1fr}
  .grid.one{grid-template-columns:1fr}
}
@media (max-width: 380px){
  .pay-card{width:98%}
  .btn.pay-btn{font-size:18px; padding:12px}
}

/* Footer */
.site-footer { margin-top: 80px; padding: 30px 0 20px; background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.08) 100%); text-align: center; font-size: 14px; color: rgba(5,46,88,0.8); backdrop-filter: blur(4px); border-top: 1px solid rgba(0,0,0,0.05) }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-bottom: 10px }
.footer-nav a { color: var(--blue-dark); text-decoration: none; font-weight: 600; opacity: .85; transition: opacity .2s ease }
.footer-nav a:hover { opacity: 1; text-decoration: underline }
.site-footer small { display: block; font-size: 12px; color: rgba(5,46,88,0.65) }
.legal-note { margin: 8px auto 6px; max-width: 980px; font-size: 12px; color: rgba(5,46,88,0.70); line-height: 1.5 }
.legal-note a { color: var(--blue-dark); text-decoration: none; font-weight: 600; opacity: .9 }
.legal-note a:hover { text-decoration: underline; opacity: 1 }

/* Resaltado de marca (UI visual) */
.brand-visa .logo.visa{outline:2px solid #1a1f71}
.brand-mc .logo.mc{outline:2px solid #f79e1b}
.brand-amex .brands::after{content:'AMEX'; margin-left:6px; font-weight:900}