/* =========================================================
   CHECKOUT PRO 2026
   Vista interna SPA con Culqi
========================================================= */

.checkout-pro-app{
  --cp-bg:#070707;
  --cp-panel:#111111;
  --cp-panel-soft:#171717;
  --cp-panel-gold:#201b0d;

  --cp-text:#ffffff;
  --cp-muted:rgba(255,255,255,.68);
  --cp-muted-soft:rgba(255,255,255,.47);

  --cp-line:rgba(255,255,255,.10);
  --cp-line-strong:rgba(255,255,255,.16);

  --cp-gold:#d4af37;
  --cp-gold-dark:#a98522;
  --cp-gold-light:#ffe066;
  --cp-gold-soft:#f5d67b;

  --cp-success:#4ade80;
  --cp-error:#ff7373;
  --cp-info:#60a5fa;

  --cp-radius:22px;

  position:relative;
  display:block;

  width:100%;
  min-height:auto;

  padding:
    18px
    20px
    72px;

  color:var(--cp-text);

  font-family:
    "Inter",
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      900px 420px at 50% -80px,
      rgba(212,175,55,.12),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0b0b0b,
      #060606
    );

  overflow:visible;
}

.checkout-pro-app *,
.checkout-pro-app *::before,
.checkout-pro-app *::after{
  box-sizing:border-box;
}

.checkout-pro-app button,
.checkout-pro-app input,
.checkout-pro-app select,
.checkout-pro-app textarea{
  font:inherit;
}

.checkout-pro-app button{
  -webkit-tap-highlight-color:
    transparent;
}

.checkout-pro-app a{
  color:inherit;
}

/* =========================================================
   BARRA SUPERIOR
========================================================= */

.checkout-pro-topbar{
  width:min(1180px, 100%);
  min-height:58px;

  margin:
    0
    auto
    16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:
    9px
    12px;

  border:
    1px solid
    var(--cp-line);

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    ),
    #0d0d0d;

  box-shadow:
    0 16px 38px
    rgba(0,0,0,.24);
}

.checkout-pro-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:40px;
  padding:
    0
    14px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:12px;

  background:
    rgba(255,255,255,.04);

  color:
    rgba(255,255,255,.84);

  font-size:.84rem;
  font-weight:900;

  cursor:pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.checkout-pro-back:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(255,224,102,.34);

  background:
    rgba(212,175,55,.08);

  color:
    var(--cp-gold-light);
}

.checkout-pro-back:focus-visible{
  outline:
    3px solid
    rgba(255,224,102,.23);

  outline-offset:3px;
}

.checkout-pro-back span{
  font-size:1.05rem;
}

.checkout-pro-security{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;

  color:
    rgba(255,255,255,.72);

  text-align:right;
}

.checkout-pro-security-icon{
  width:38px;
  height:38px;
  min-width:38px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(212,175,55,.25);

  border-radius:12px;

  background:
    rgba(212,175,55,.08);

  font-size:1rem;
}

.checkout-pro-security strong{
  display:block;

  color:
    rgba(255,255,255,.92);

  font-size:.79rem;
  font-weight:900;
}

.checkout-pro-security span:not(
  .checkout-pro-security-icon
){
  display:block;
  margin-top:2px;

  color:
    rgba(255,255,255,.47);

  font-size:.70rem;
}

/* =========================================================
   PLAN INVÁLIDO
========================================================= */

.checkout-pro-invalid{
  width:min(1180px, 100%);

  margin:
    0
    auto
    16px;

  padding:
    16px
    18px;

  border:
    1px solid
    rgba(255,115,115,.34);

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,115,115,.10),
      rgba(255,115,115,.035)
    ),
    #180c0d;

  color:#ffdada;

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.24);
}

.checkout-pro-invalid[hidden]{
  display:none !important;
}

.checkout-pro-invalid strong{
  display:block;

  font-size:.92rem;
  font-weight:900;
}

.checkout-pro-invalid span{
  display:block;
  margin-top:5px;

  color:
    rgba(255,218,218,.76);

  font-size:.81rem;
  line-height:1.5;
}

.checkout-pro-invalid-button{
  min-height:40px;
  margin-top:12px;
  padding:
    0
    14px;

  border:
    1px solid
    rgba(255,115,115,.34);

  border-radius:11px;

  background:
    rgba(255,255,255,.04);

  color:#fff;

  font-size:.79rem;
  font-weight:900;

  cursor:pointer;
}

/* =========================================================
   DISTRIBUCIÓN PRINCIPAL
========================================================= */

.checkout-pro-layout{
  width:min(1180px, 100%);
  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, .75fr);

  gap:18px;
  align-items:start;
}

/* =========================================================
   PANEL DEL FORMULARIO
========================================================= */

.checkout-pro-form-panel{
  min-width:0;

  border:
    1px solid
    var(--cp-line);

  border-radius:
    var(--cp-radius);

  background:
    radial-gradient(
      600px 220px at 50% 0%,
      rgba(212,175,55,.07),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.012)
    ),
    var(--cp-panel);

  box-shadow:
    0 22px 54px
    rgba(0,0,0,.30);

  overflow:hidden;
}

.checkout-pro-form-wrap{
  padding:
    27px
    28px
    28px;
}

.checkout-pro-heading{
  margin-bottom:22px;
}

.checkout-pro-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:29px;
  padding:
    0
    11px;

  border:
    1px solid
    rgba(212,175,55,.28);

  border-radius:999px;

  background:
    rgba(212,175,55,.07);

  color:
    var(--cp-gold-light);

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.checkout-pro-heading h1{
  margin:
    12px
    0
    0;

  color:#fff;

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:
    clamp(
      1.65rem,
      3vw,
      2.35rem
    );

  font-weight:900;
  line-height:1.08;
  letter-spacing:-.04em;
}

.checkout-pro-heading p{
  margin:
    11px
    0
    0;

  max-width:720px;

  color:
    var(--cp-muted);

  font-size:.90rem;
  line-height:1.57;
}

/* =========================================================
   FORMULARIO
========================================================= */

.checkout-pro-form{
  display:grid;
  gap:17px;
}

.checkout-pro-fieldset{
  min-width:0;
  margin:0;

  padding:
    18px
    17px;

  border:
    1px solid
    var(--cp-line);

  border-radius:18px;

  background:
    rgba(255,255,255,.022);
}

.checkout-pro-fieldset legend{
  padding:
    0
    8px;

  color:
    rgba(255,255,255,.92);

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:.88rem;
  font-weight:900;
}

.checkout-pro-fieldset-description{
  margin:
    0
    0
    14px;

  color:
    var(--cp-muted-soft);

  font-size:.78rem;
  line-height:1.45;
}

.checkout-pro-field{
  display:grid;
  gap:7px;

  min-width:0;
}

.checkout-pro-field + .checkout-pro-field{
  margin-top:14px;
}

.checkout-pro-field label{
  color:
    rgba(255,255,255,.87);

  font-size:.78rem;
  font-weight:900;
}

.checkout-pro-field input,
.checkout-pro-field select{
  width:100%;
  min-width:0;
  min-height:47px;

  padding:
    0
    13px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:13px;

  outline:none;

  background:
    rgba(0,0,0,.28);

  color:#fff;

  font-size:.86rem;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.checkout-pro-field input::placeholder{
  color:
    rgba(255,255,255,.31);
}

.checkout-pro-field select{
  appearance:auto;
  cursor:pointer;
}

.checkout-pro-field select option{
  background:#111;
  color:#fff;
}

.checkout-pro-field input:hover,
.checkout-pro-field select:hover{
  border-color:
    rgba(255,255,255,.20);
}

.checkout-pro-field input:focus,
.checkout-pro-field select:focus{
  border-color:
    rgba(255,224,102,.52);

  background:
    rgba(212,175,55,.035);

  box-shadow:
    0 0 0 3px
    rgba(212,175,55,.08);
}

.checkout-pro-field input:invalid:not(
  :placeholder-shown
){
  border-color:
    rgba(255,115,115,.33);
}

.checkout-pro-field-help{
  color:
    rgba(255,255,255,.38);

  font-size:.69rem;
  line-height:1.38;
}

.checkout-pro-two-columns{
  display:grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:13px;
  align-items:start;

  margin-top:14px;
}

.checkout-pro-two-columns
.checkout-pro-field{
  margin-top:0;
}

/* =========================================================
   CONTRASEÑA
========================================================= */

.checkout-pro-password-wrap{
  position:relative;
}

.checkout-pro-password-wrap input{
  padding-right:78px;
}

.checkout-pro-toggle-password{
  position:absolute;
  top:50%;
  right:7px;

  transform:
    translateY(-50%);

  min-height:34px;
  padding:
    0
    10px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:9px;

  background:
    rgba(255,255,255,.04);

  color:
    rgba(255,255,255,.69);

  font-size:.69rem;
  font-weight:900;

  cursor:pointer;
}

.checkout-pro-toggle-password:hover{
  border-color:
    rgba(255,224,102,.28);

  color:
    var(--cp-gold-light);
}

/* =========================================================
   COMPROBANTE
========================================================= */

.checkout-pro-receipt-toggle{
  display:grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:10px;
}

.checkout-pro-receipt-option{
  position:relative;
  min-width:0;
}

.checkout-pro-receipt-option input{
  position:absolute;

  width:1px;
  height:1px;

  opacity:0;
  pointer-events:none;
}

.checkout-pro-receipt-option > span{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;

  min-height:58px;
  padding:
    10px
    13px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:13px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.72);

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.checkout-pro-receipt-option
input:checked + span{
  border-color:
    rgba(255,224,102,.44);

  background:
    rgba(212,175,55,.10);

  color:
    var(--cp-gold-light);

  box-shadow:
    inset 0 0 0 1px
    rgba(212,175,55,.04);
}

.checkout-pro-receipt-option
input:focus-visible + span{
  outline:
    3px solid
    rgba(255,224,102,.20);

  outline-offset:2px;
}

.checkout-pro-receipt-option
span:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(255,224,102,.25);
}

.checkout-pro-receipt-option strong{
  font-size:.80rem;
  font-weight:900;
}

.checkout-pro-receipt-option small{
  color:
    rgba(255,255,255,.43);

  font-size:.66rem;
  line-height:1.3;
}

.checkout-pro-receipt-fields{
  margin-top:13px;
  padding-top:13px;

  border-top:
    1px solid
    var(--cp-line);
}

.checkout-pro-receipt-fields[hidden]{
  display:none !important;
}

.checkout-pro-receipt-note{
  margin:
    9px
    0
    0;

  color:
    rgba(255,255,255,.38);

  font-size:.69rem;
  line-height:1.4;
}

/* =========================================================
   TÉRMINOS
========================================================= */

.checkout-pro-terms{
  display:flex;
  align-items:flex-start;
  gap:10px;

  padding:
    13px
    14px;

  border:
    1px solid
    var(--cp-line);

  border-radius:14px;

  background:
    rgba(255,255,255,.02);

  color:
    rgba(255,255,255,.62);

  font-size:.76rem;
  line-height:1.48;
}

.checkout-pro-terms input{
  width:17px;
  height:17px;
  min-width:17px;

  margin-top:2px;

  accent-color:
    var(--cp-gold);
}

.checkout-pro-terms a{
  color:
    var(--cp-gold-light);

  font-weight:900;
  text-decoration:none;
}

.checkout-pro-terms a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.checkout-pro-submit{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:52px;
  padding:
    0
    17px;

  border:0;
  border-radius:14px;

  background:
    linear-gradient(
      90deg,
      #caa631,
      #ffe066,
      #d4af37
    );

  color:#090909;

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:.91rem;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 15px 32px
    rgba(212,175,55,.18);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.checkout-pro-submit:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 18px 38px
    rgba(212,175,55,.24);

  filter:
    brightness(1.04);
}

.checkout-pro-submit:focus-visible{
  outline:
    3px solid
    rgba(255,224,102,.28);

  outline-offset:3px;
}

.checkout-pro-submit:disabled{
  opacity:.56;
  cursor:not-allowed;

  transform:none;
  filter:none;
}

.checkout-pro-submit.is-loading{
  background:
    linear-gradient(
      90deg,
      #a98522,
      #d4af37,
      #a98522
    );
}

.checkout-pro-submit-loading::before{
  content:"";

  display:inline-block;

  width:16px;
  height:16px;

  margin-right:8px;

  border:
    2px solid
    rgba(0,0,0,.25);

  border-top-color:#090909;
  border-radius:50%;

  vertical-align:-3px;

  animation:
    checkoutProButtonSpin
    .75s linear infinite;
}

@keyframes checkoutProButtonSpin{
  to{
    transform:
      rotate(360deg);
  }
}

/* =========================================================
   MEDIOS DE PAGO
========================================================= */

.checkout-pro-payments-image{
  display:flex;
  justify-content:center;

  min-height:34px;
}

.checkout-pro-payments-image img{
  display:block;

  width:auto;
  max-width:min(100%, 380px);
  max-height:42px;

  object-fit:contain;

  opacity:.88;
}

/* =========================================================
   MENSAJES DEL FORMULARIO
========================================================= */

.checkout-pro-message{
  display:none;

  padding:
    11px
    13px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:12px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.78);

  font-size:.76rem;
  font-weight:800;
  line-height:1.45;
}

.checkout-pro-message.is-visible{
  display:block;
}

.checkout-pro-message.is-error{
  border-color:
    rgba(255,115,115,.32);

  background:
    rgba(255,115,115,.075);

  color:#ffdada;
}

.checkout-pro-message.is-success{
  border-color:
    rgba(74,222,128,.28);

  background:
    rgba(74,222,128,.07);

  color:#caf7d8;
}

.checkout-pro-message.is-info{
  border-color:
    rgba(212,175,55,.30);

  background:
    rgba(212,175,55,.07);

  color:#fff1a6;
}

/* =========================================================
   SOPORTE
========================================================= */

.checkout-pro-support{
  margin-top:18px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;

  color:
    rgba(255,255,255,.48);

  font-size:.76rem;
  line-height:1.45;
  text-align:center;
}

.checkout-pro-support a{
  color:
    var(--cp-gold-light);

  font-weight:900;
  text-decoration:none;
}

.checkout-pro-support a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =========================================================
   RESUMEN DEL PLAN
========================================================= */

.checkout-pro-summary-panel{
  min-width:0;
}

.checkout-pro-summary{
  position:sticky;
  top:12px;

  padding:
    23px
    21px;

  border:
    1px solid
    rgba(212,175,55,.25);

  border-radius:
    var(--cp-radius);

  background:
    radial-gradient(
      520px 220px at 50% 0%,
      rgba(212,175,55,.13),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    #10100e;

  box-shadow:
    0 24px 58px
    rgba(0,0,0,.34);
}

.checkout-pro-summary-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.checkout-pro-summary-kicker{
  display:block;
  margin-bottom:8px;

  color:
    var(--cp-gold-light);

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.checkout-pro-plan-name{
  margin:0;

  color:#fff;

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:1.5rem;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.035em;
}

.checkout-pro-plan-description{
  margin:
    9px
    0
    0;

  color:
    var(--cp-muted);

  font-size:.80rem;
  line-height:1.5;
}

.checkout-pro-culqi-brand{
  flex:0 0 auto;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;

  max-width:100px;
}

.checkout-pro-culqi-brand span{
  color:
    rgba(255,255,255,.38);

  font-size:.62rem;
  font-weight:800;
}

.checkout-pro-culqi-brand img{
  display:block;

  width:auto;
  max-width:88px;
  max-height:34px;

  object-fit:contain;
}

/* =========================================================
   MÉTODOS DE PAGO DEL RESUMEN
========================================================= */

.checkout-pro-payment-methods{
  width:100%;
  min-height:68px;

  margin-top:18px;
  padding:
    12px
    13px;

  display:flex;
  align-items:center;
  gap:11px;

  border:
    1px solid
    rgba(212,175,55,.28);

  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,.10),
      rgba(212,175,55,.035)
    );

  color:#fff;
  text-align:left;

  cursor:pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.checkout-pro-payment-methods:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(255,224,102,.48);

  box-shadow:
    0 14px 28px
    rgba(0,0,0,.22);
}

.checkout-pro-payment-methods-icon{
  width:39px;
  height:39px;
  min-width:39px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,224,102,.28);

  border-radius:12px;

  background:
    rgba(212,175,55,.10);

  font-size:1rem;
}

.checkout-pro-payment-methods-copy{
  display:block;
  min-width:0;
}

.checkout-pro-payment-methods-copy strong{
  display:block;

  color:
    rgba(255,255,255,.94);

  font-size:.78rem;
  font-weight:900;
}

.checkout-pro-payment-methods-copy small{
  display:block;
  margin-top:3px;

  color:
    rgba(255,255,255,.54);

  font-size:.67rem;
  line-height:1.4;
}

/* =========================================================
   TOTAL
========================================================= */

.checkout-pro-total{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;

  margin-top:19px;
  padding-bottom:17px;

  border-bottom:
    1px solid
    var(--cp-line);
}

.checkout-pro-total span{
  color:
    rgba(255,255,255,.61);

  font-size:.82rem;
  font-weight:800;
}

.checkout-pro-total strong{
  color:
    var(--cp-gold-light);

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:2.3rem;
  font-weight:900;
  line-height:.95;
  letter-spacing:-.055em;
}

/* =========================================================
   DETALLES
========================================================= */

.checkout-pro-details{
  display:grid;
  gap:10px;

  padding:
    16px
    0;

  border-bottom:
    1px solid
    var(--cp-line);
}

.checkout-pro-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  color:
    rgba(255,255,255,.56);

  font-size:.76rem;
}

.checkout-pro-detail-row[hidden]{
  display:none !important;
}

.checkout-pro-detail-row strong{
  color:
    rgba(255,255,255,.86);

  font-weight:900;
}

.checkout-pro-saving{
  color:
    var(--cp-success) !important;
}

/* =========================================================
   AVISO DE ACTIVACIÓN
========================================================= */

.checkout-pro-activation-notice{
  display:flex;
  align-items:flex-start;
  gap:10px;

  margin-top:16px;
  padding:
    12px
    13px;

  border:
    1px solid
    rgba(74,222,128,.20);

  border-radius:14px;

  background:
    rgba(74,222,128,.045);
}

.checkout-pro-activation-notice > span{
  width:24px;
  height:24px;
  min-width:24px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(74,222,128,.10);

  color:
    var(--cp-success);

  font-size:.73rem;
  font-weight:900;
}

.checkout-pro-activation-notice strong{
  display:block;

  color:
    rgba(255,255,255,.90);

  font-size:.75rem;
  font-weight:900;
}

.checkout-pro-activation-notice p{
  margin:
    3px
    0
    0;

  color:
    rgba(255,255,255,.48);

  font-size:.67rem;
  line-height:1.42;
}

/* =========================================================
   BENEFICIOS DEL RESUMEN
========================================================= */

.checkout-pro-benefits{
  margin-top:18px;
}

.checkout-pro-benefits h3{
  margin:0;

  color:
    rgba(255,255,255,.91);

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:.87rem;
  font-weight:900;
}

.checkout-pro-benefits ul{
  display:grid;
  gap:8px;

  margin:
    13px
    0
    0;

  padding:0;

  list-style:none;
}

.checkout-pro-benefits li{
  position:relative;

  padding-left:21px;

  color:
    rgba(255,255,255,.67);

  font-size:.73rem;
  line-height:1.43;
}

.checkout-pro-benefits li::before{
  content:"✓";

  position:absolute;
  top:0;
  left:0;

  color:
    var(--cp-gold-light);

  font-weight:900;
}

.checkout-pro-benefit-placeholder{
  opacity:.58;
}

/* =========================================================
   BOTONES DEL RESUMEN
========================================================= */

.checkout-pro-change-plan{
  width:100%;
  min-height:43px;

  margin-top:19px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:12px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.82);

  font-size:.76rem;
  font-weight:900;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.checkout-pro-change-plan:hover{
  border-color:
    rgba(255,224,102,.32);

  background:
    rgba(212,175,55,.08);

  color:
    var(--cp-gold-light);
}

.checkout-pro-summary-support{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:42px;

  margin-top:9px;
  padding:
    0
    12px;

  border:
    1px solid
    rgba(74,222,128,.25);

  border-radius:12px;

  background:
    rgba(74,222,128,.045);

  color:#7aefa5;

  font-size:.74rem;
  font-weight:900;
  text-decoration:none;
}

.checkout-pro-summary-support:hover{
  border-color:
    rgba(74,222,128,.42);

  background:
    rgba(74,222,128,.08);
}

.checkout-pro-security-note{
  margin:
    13px
    0
    0;

  color:
    rgba(255,255,255,.34);

  font-size:.64rem;
  line-height:1.45;
  text-align:center;
}

/* =========================================================
   OVERLAY DE PROCESAMIENTO
========================================================= */

.checkout-pro-processing-overlay{
  position:fixed;
  inset:0;
  z-index:10050;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    rgba(0,0,0,.78);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

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

.checkout-pro-processing-overlay[hidden]{
  display:none !important;
}

.checkout-pro-processing-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.checkout-pro-processing-card{
  width:min(470px, 100%);

  padding:
    27px
    25px
    24px;

  border:
    1px solid
    rgba(212,175,55,.34);

  border-radius:22px;

  background:
    radial-gradient(
      520px 210px at 50% 0%,
      rgba(212,175,55,.14),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #161616,
      #0b0b0b
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.58);

  text-align:center;
}

.checkout-pro-processing-icon{
  position:relative;

  width:64px;
  height:64px;

  margin:
    0
    auto
    13px;

  display:grid;
  place-items:center;
}

.checkout-pro-processing-spinner{
  position:absolute;
  inset:0;

  border:
    4px solid
    rgba(255,255,255,.13);

  border-top-color:
    var(--cp-gold-light);

  border-radius:50%;

  animation:
    checkoutProProcessingSpin
    .85s linear infinite;
}

.checkout-pro-processing-icon > span{
  color:
    var(--cp-gold-light);

  font-size:1.05rem;
  font-weight:900;
}

@keyframes checkoutProProcessingSpin{
  to{
    transform:
      rotate(360deg);
  }
}

.checkout-pro-processing-kicker{
  margin:0;

  color:
    var(--cp-gold-light);

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.checkout-pro-processing-card h2{
  margin:
    9px
    0
    0;

  color:#fff;

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:1.42rem;
  font-weight:900;
  line-height:1.18;
}

.checkout-pro-processing-card > p:not(
  .checkout-pro-processing-kicker
){
  margin:
    9px
    auto
    0;

  max-width:380px;

  color:
    var(--cp-muted);

  font-size:.80rem;
  line-height:1.52;
}

.checkout-pro-progress{
  width:100%;
  height:8px;

  margin-top:19px;

  border-radius:999px;

  background:
    rgba(255,255,255,.08);

  overflow:hidden;
}

.checkout-pro-progress-bar{
  width:0;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #a98522,
      #ffe066,
      #d4af37
    );

  box-shadow:
    0 0 15px
    rgba(255,224,102,.18);

  transition:
    width .45s ease;
}

.checkout-pro-processing-steps{
  display:grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:7px;
  margin-top:16px;
}

.checkout-pro-processing-step{
  min-height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    0
    7px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.38);

  font-size:.65rem;
  font-weight:900;
}

.checkout-pro-processing-step.is-active{
  border-color:
    rgba(255,224,102,.35);

  background:
    rgba(212,175,55,.09);

  color:
    var(--cp-gold-light);
}

.checkout-pro-processing-step.is-done{
  border-color:
    rgba(74,222,128,.24);

  background:
    rgba(74,222,128,.06);

  color:
    var(--cp-success);
}

/* =========================================================
   ESCRITORIO MEDIANO
========================================================= */

@media (max-width:1100px){

  .checkout-pro-app{
    padding:
      16px
      16px
      70px;
  }

  .checkout-pro-layout{
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(300px, .85fr);

    gap:15px;
  }

  .checkout-pro-form-wrap{
    padding:
      23px
      21px
      24px;
  }

  .checkout-pro-summary{
    padding:
      21px
      18px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .checkout-pro-layout{
    grid-template-columns:1fr;
  }

  .checkout-pro-summary-panel{
    order:-1;
  }

  .checkout-pro-summary{
    position:relative;
    top:auto;
  }

  .checkout-pro-benefits ul{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap:16px;
  }
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width:680px){

  .checkout-pro-app{
    padding:
      9px
      9px
      96px;
  }

  .checkout-pro-topbar{
    min-height:auto;
    margin-bottom:10px;

    padding:
      9px
      10px;

    border-radius:15px;
  }

  .checkout-pro-back{
    min-height:38px;
    padding:
      0
      11px;

    font-size:.76rem;
  }

  .checkout-pro-security{
    max-width:170px;
  }

  .checkout-pro-security-icon{
    display:none;
  }

  .checkout-pro-security strong{
    font-size:.71rem;
  }

  .checkout-pro-security
  span:not(
    .checkout-pro-security-icon
  ){
    font-size:.61rem;
  }

  .checkout-pro-form-panel,
  .checkout-pro-summary{
    border-radius:18px;
  }

  .checkout-pro-form-wrap{
    padding:
      20px
      15px
      19px;
  }

  .checkout-pro-heading{
    margin-bottom:17px;
  }

  .checkout-pro-heading h1{
    font-size:
      clamp(
        1.48rem,
        8vw,
        2rem
      );
  }

  .checkout-pro-heading p{
    font-size:.82rem;
  }

  .checkout-pro-fieldset{
    padding:
      16px
      13px;

    border-radius:15px;
  }

  .checkout-pro-two-columns{
    grid-template-columns:1fr;
  }

  .checkout-pro-receipt-toggle{
    grid-template-columns:1fr;
  }

  .checkout-pro-field input,
  .checkout-pro-field select{
    min-height:46px;
  }

  .checkout-pro-terms{
    font-size:.71rem;
  }

  .checkout-pro-summary{
    padding:
      19px
      15px;
  }

  .checkout-pro-summary-header{
    flex-direction:column;
  }

  .checkout-pro-culqi-brand{
    align-items:flex-start;
  }

  .checkout-pro-total strong{
    font-size:2rem;
  }

  .checkout-pro-benefits ul{
    grid-template-columns:1fr;
  }

  .checkout-pro-processing-card{
    padding:
      24px
      17px
      20px;

    border-radius:18px;
  }

  .checkout-pro-processing-card h2{
    font-size:1.26rem;
  }

  .checkout-pro-processing-steps{
    gap:5px;
  }

  .checkout-pro-processing-step{
    padding:
      0
      4px;

    font-size:.59rem;
  }
}

/* =========================================================
   PANTALLAS PEQUEÑAS
========================================================= */

@media (max-width:390px){

  .checkout-pro-topbar{
    align-items:flex-start;
  }

  .checkout-pro-security{
    max-width:130px;
  }

  .checkout-pro-payment-methods{
    align-items:flex-start;
  }

  .checkout-pro-total{
    align-items:center;
  }

  .checkout-pro-total strong{
    font-size:1.82rem;
  }

  .checkout-pro-processing-steps{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
){

  .checkout-pro-app *,
  .checkout-pro-app *::before,
  .checkout-pro-app *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}