/* ============================================================
   Hex Multistep Checkout — Dark UI · Pure Purple · Glow
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600&display=swap');

/* Polyfill para banderas Emoji en Windows */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

/* ── WRAP & CARD ─────────────────────────────────────────── */
.hexmc-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 18px;
  font-family: 'Barlow', sans-serif;
}

.hexmc-card {
  width: 100%;
  max-width: 980px;
  background: linear-gradient(155deg, #131020 0%, #0d0b18 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(120,55,210,.28);
  border-radius: 22px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.65),
    0 0 0 1px rgba(150,45,255,.08) inset;
  padding: 18px;
  color: #e0d8f0;
  position: relative;
  overflow: hidden;
}

/* Orbes de fondo — morado puro */
.hexmc-card::before {
  content: "";
  position: absolute;
  inset: -40% -30%;
  background:
    radial-gradient(ellipse 65% 45% at 15% 35%, rgba(110,25,210,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(70,15,170,.16), transparent 60%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}

/* ── HEADER ──────────────────────────────────────────────── */
.hexmc-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.hexmc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 28px rgba(150,45,255,.45);
}

.hexmc-subtitle {
  margin-top: 6px;
  color: rgba(210,198,235,.6);
}

.hexmc-lock {
  font-size: 12px;
  color: rgba(210,198,235,.6);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hexmc-lock::before { content: "🔒"; }

/* ── PROGRESS BAR ────────────────────────────────────────── */
.hexmc-progress {
  margin: 14px 0 6px;
  position: relative;
  z-index: 1;
}

.hexmc-progress-bar {
  height: 8px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(120,55,210,.18);
  border-radius: 999px;
  overflow: hidden;
}

.hexmc-progress-bar span {
  display: block;
  height: 100%;
  width: 16.6%;
  background: linear-gradient(90deg, #7020ff, #a050ff, #bf60ff);
  border-radius: 999px;
  transition: width .55s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 12px rgba(150,45,255,.8),
    0 0 24px rgba(150,45,255,.35);
  animation: tfsBarGlow 2.8s ease-in-out infinite alternate;
}

@keyframes tfsBarGlow {
  from { box-shadow: 0 0 8px rgba(150,45,255,.5); }
  to   { box-shadow: 0 0 22px rgba(150,45,255,.95), 0 0 40px rgba(150,45,255,.3); }
}

.hexmc-progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.hexmc-progress-steps span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(120,55,210,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(200,185,230,.6);
  transition: all .3s ease;
}

.hexmc-progress-steps span.active {
  background: linear-gradient(135deg, #7020ff, #9b30ff);
  border-color: rgba(150,45,255,.65);
  color: #fff;
  font-weight: 800;
  box-shadow:
    0 0 0 3px rgba(150,45,255,.28),
    0 0 14px rgba(150,45,255,.6);
}

/* ── FORM & STEPS ────────────────────────────────────────── */
.hexmc-form {
  position: relative;
  z-index: 1;
}

@keyframes hexmcFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0);   }
}

.hexmc-step {
  display: none;
  animation: hexmcFadeIn .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hexmc-step.active { display: block; }

.hexmc-step h3 {
  margin: 14px 0 12px;
  font-size: 18px;
  color: #fff;
}

/* ── INPUTS ──────────────────────────────────────────────── */
.hexmc-step input[type="text"],
.hexmc-step input[type="email"],
.hexmc-step input[type="tel"],
.hexmc-step select {
  width: 100%;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  font-size: 15px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.hexmc-step select,
.hexmc-step select option {
  font-family: "Twemoji Country Flags", system-ui, -apple-system, sans-serif;
}


.hexmc-step input::placeholder { color: rgba(200,185,230,.4); }

/* ── INPUT FOCUS GLOW ────────────────────────────────────── */
.hexmc-step input[type="text"]:focus,
.hexmc-step input[type="email"]:focus,
.hexmc-step input[type="tel"]:focus,
.hexmc-step select:focus {
  border-color: rgba(150,45,255,.85);
  box-shadow:
    0 0 0 3px rgba(150,45,255,.2),
    0 0 20px rgba(150,45,255,.12);
  background: rgba(100,25,195,.08);
  outline: none;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── SELECT ARROW ────────────────────────────────────────── */
.hexmc-step select {
  appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.hexmc-hint {
  margin: 10px 0 0;
  color: rgba(210,198,235,.60);
  font-size: 13px;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.hexmc-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.hexmc-btn {
  border: 1px solid rgba(120,55,210,.3);
  background: rgba(0,0,0,.20);
  color: rgba(210,198,235,.85);
  padding: 12px 16px;
  border-radius: 9px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hexmc-btn:hover {
  border-color: rgba(150,45,255,.55);
  color: #c080ff;
  box-shadow: 0 0 14px rgba(150,45,255,.16);
}

.hexmc-btn:active { transform: translateY(1px); }

/* ── BOTÓN PRIMARIO CON GLOW ─────────────────────────────── */
.hexmc-btn.primary {
  background: linear-gradient(135deg, #7020ff 0%, #9b30ff 55%, #b455ff 100%);
  border-color: rgba(150,45,255,.7);
  color: #fff;
  box-shadow:
    0 0 18px rgba(150,45,255,.45),
    0 4px 20px rgba(90,15,185,.28);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hexmc-btn.primary:hover {
  box-shadow:
    0 0 30px rgba(150,45,255,.75),
    0 6px 28px rgba(90,15,185,.5);
  transform: translateY(-2px);
}

.hexmc-btn.wide { width: 100%; justify-content: center; }

.hexmc-btn.primary:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── PROGRAM GRID ────────────────────────────────────────── */
.hexmc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

/* BASE CARD */
.hexmc-program {
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(120,55,210,.22);
  background: linear-gradient(155deg, #131020 0%, #0d0b18 100%);
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: all .32s ease;
  display: flex;
  flex-direction: column;
}

/* Orbe de esquina */
.hexmc-program::after {
  content: '';
  position: absolute;
  bottom: -50px; right: -50px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,35,210,.12), transparent 70%);
  pointer-events: none;
}

/* FEATURED CARD */
.hexmc-program.featured {
  border-color: rgba(150,45,255,.6);
  box-shadow:
    0 0 32px rgba(150,45,255,.22),
    0 0 65px rgba(90,15,185,.11);
  background: linear-gradient(155deg, #1a1030 0%, #120d24 100%);
}

/* Barra superior featured */
.hexmc-program.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6200f4, #9b30ff, #bf60ff);
  border-radius: 16px 16px 0 0;
  animation: tfsBarGlow 2.8s ease-in-out infinite alternate;
}

/* HOVER */
.hexmc-program:hover {
  border-color: rgba(150,45,255,.62);
  transform: translateY(-6px);
  box-shadow: 0 0 28px rgba(150,45,255,.18), 0 0 60px rgba(90,15,185,.09);
}

.hexmc-program.featured:hover {
  box-shadow:
    0 0 0 1px rgba(150,45,255,.8),
    0 0 50px rgba(150,45,255,.4),
    0 24px 60px rgba(0,0,0,.65);
}

/* SELECTED */
.hexmc-program.selected {
  border-color: rgba(155,48,255,1);
  box-shadow:
    0 0 0 3px rgba(155,48,255,.38),
    0 0 50px rgba(150,45,255,.5),
    0 20px 50px rgba(0,0,0,.55);
  background: linear-gradient(155deg, #1f1040 0%, #160e30 100%);
}

/* INNER WRAPPER */
.hexmc-program-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 0;
}

/* BADGE "MÁS POPULAR" */
.hexmc-program-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #7020ff, #a050ff);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-end;
  animation: tfsPulse 2.4s ease-in-out infinite alternate;
}

@keyframes tfsPulse {
  from { box-shadow: 0 0 8px rgba(150,45,255,.45); }
  to   { box-shadow: 0 0 20px rgba(150,45,255,.9), 0 0 34px rgba(150,45,255,.35); }
}

/* "PROGRAMA" etiqueta pequeña */
.hexmc-program-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #6a3daa;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* TITULO grande en uppercase */
.hexmc-program-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.5px;
  margin-bottom: 4px;
}
.hexmc-program.featured .hexmc-program-title { color: #c080ff; }

/* Subtítulo en caps pequeños */
.hexmc-program-tagline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(190,170,225,.62);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Descripción larga */
.hexmc-program-desc {
  font-size: 13px;
  color: rgba(195,180,220,.55);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
}

/* CHIPS */
.hexmc-program-footer {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hexmc-program-chip {
  background: rgba(100,40,200,.13);
  color: rgba(210,195,235,.7);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid rgba(130,55,220,.26);
}

/* CTA al pie */
.hexmc-program-cta {
  margin-top: auto;
  border-top: 1px solid rgba(120,55,210,.15);
  padding: 16px 0 22px;
}

/* Precio original tachado (descuento) */
.hexmc-program-original-price {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(210,195,235,.4);
  text-decoration: line-through;
  text-decoration-color: rgba(255,80,80,.6);
  letter-spacing: .3px;
  margin-bottom: 6px;
}

/* PRICE BADGE */
.hexmc-program-price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  background: rgba(100,40,200,.13);
  border: 1.5px solid rgba(130,55,220,.32);
  border-radius: 9px;
  padding: 12px 20px;
  width: 100%;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hexmc-program:hover .hexmc-program-price-badge {
  background: rgba(100,40,200,.2);
  border-color: rgba(150,45,255,.62);
  box-shadow: 0 0 18px rgba(150,45,255,.22);
}

/* Featured — badge sólido morado */
.hexmc-program.featured .hexmc-program-price-badge {
  background: linear-gradient(135deg, #7020ff 0%, #9b30ff 55%, #b455ff 100%);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(150,45,255,.4), 0 4px 20px rgba(90,15,185,.26);
}

.hexmc-program.featured:hover .hexmc-program-price-badge {
  box-shadow: 0 0 30px rgba(150,45,255,.75), 0 4px 30px rgba(90,15,185,.48);
  transform: translateY(-1px);
}

/* Selected — morado intenso */
.hexmc-program.selected .hexmc-program-price-badge {
  background: linear-gradient(135deg, #7020ff 0%, #a050ff 55%, #c070ff 100%);
  border-color: transparent;
  box-shadow: 0 0 28px rgba(150,45,255,.7), 0 0 50px rgba(100,20,200,.35);
  color: #fff;
}

/* Mantener clases legacy que puedan usarse en otro lugar */
.hexmc-program-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.hexmc-program-price {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}

.hexmc-program-subtitle {
  margin-top: 10px;
  color: rgba(232,236,255,.78);
  font-size: 13px;
  line-height: 1.5;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (min-width: 600px) {
  .hexmc-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 920px) {
  .hexmc-card { padding: 28px; }
  .hexmc-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  /* Card del medio sobresale un poco */
  .hexmc-program.featured {
    transform: translateY(-6px) scale(1.015);
  }
  .hexmc-program.featured:hover {
    transform: translateY(-10px) scale(1.015);
  }
}


/* ── SUMMARY CARD CONTAINER ──────────────────────────────── */
.hexmc-summary-card {
  border-radius: 20px;
  border: 1px solid rgba(120,55,210,.32);
  background: rgba(13,10,26,.88);
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 0 1px rgba(150,45,255,.1),
    0 20px 50px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── SUMMARY INNER ───────────────────────────────────────── */
.hexmc-summary {
  margin-top: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
  backdrop-filter: none;
}

/* ── SUMMARY HEADER ──────────────────────────────────────── */
.hexmc-summary-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(120,55,210,.14);
  background: linear-gradient(135deg, rgba(110,25,210,.12), rgba(0,0,0,0));
}

.hexmc-summary-icon {
  width: 18px;
  height: 18px;
  color: #9b30ff;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(150,45,255,.7));
}

.hexmc-summary-header span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(210,198,235,.75);
}

/* ── GRUPOS ──────────────────────────────────────────────── */
.hexmc-summary-group {
  padding: 4px 0;
}

/* Etiqueta de sección */
.hexmc-summary-section-label {
  font-family: 'Barlow Condensed', sans-serif;
  padding: 10px 20px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #6a3daa;
}

/* Divisor entre secciones */
.hexmc-summary-divider {
  height: 1px;
  margin: 4px 20px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(110,25,210,.38) 30%,
    rgba(150,45,255,.25) 70%,
    transparent 100%
  );
}

/* ── FILAS ───────────────────────────────────────────────── */
.hexmc-summary .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  transition: background .2s ease;
}

.hexmc-summary .row:hover {
  background: rgba(100,25,195,.06);
}

.hexmc-summary .row span {
  color: rgba(210,198,235,.48);
  font-size: 12.5px;
  letter-spacing: .1px;
  white-space: nowrap;
}

.hexmc-summary .row strong {
  color: rgba(210,198,235,.88);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  max-width: 65%;
}

/* ── FILA TOTAL ──────────────────────────────────────────── */
.hexmc-summary .row.total {
  margin-top: 4px;
  padding: 18px 20px;
  background: linear-gradient(135deg,
    rgba(110,25,210,.12) 0%,
    rgba(150,45,255,.08) 100%
  );
  border-top: 1px solid rgba(120,45,210,.24);
  align-items: flex-end;
}

.hexmc-total-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hexmc-total-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: rgba(210,198,235,.75) !important;
  white-space: nowrap;
}

.hexmc-total-note {
  font-size: 10px !important;
  color: rgba(190,170,220,.35) !important;
  letter-spacing: .3px;
  font-weight: 500 !important;
  white-space: nowrap;
}

.hexmc-summary .row.total strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #9b30ff 0%, #b455ff 55%, #c880ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(150,45,255,.55));
  max-width: 100%;
}


/* ── FIELD ───────────────────────────────────────────────── */
.hexmc-field { margin-top: 14px; }
.hexmc-field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(232,236,255,.75);
  font-size: 13px;
}

/* ── PAY BOX ─────────────────────────────────────────────── */
.hexmc-paybox {
  position: relative;
  min-height: 240px;
  max-width: 100%;
  overflow: hidden;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  padding: 14px;
}

.hexmc-payhead {
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}

.hexmc-stripe-element {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 18px 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  transition: border .25s ease, box-shadow .25s ease, background .25s ease;
  color-scheme: dark;
}

.hexmc-stripe-element.StripeElement--focus {
  background: rgba(255,255,255,.09);
  border-color: rgba(120,110,255,.9);
  box-shadow: 0 0 0 3px rgba(120,110,255,.35);
}

.hexmc-stripe-element.StripeElement--invalid {
  border-color: #FF5A5A;
  box-shadow: 0 0 0 3px rgba(255,90,90,.35);
}

.hexmc-stripe-element iframe { color-scheme: dark; max-width: 100% !important; }

.hexmc-error  { margin-top: 10px; color: #ffb4b4; font-size: 13px; min-height: 18px; }
.hexmc-fineprint { margin-top: 10px; color: rgba(232,236,255,.60); font-size: 12px; }
.hexmc-success { margin-top: 10px; color: #b7ffd2; font-size: 13px; }

/* ── TÉRMINOS Y CONDICIONES ──────────────────────────────── */
.hexmc-terms-wrap {
  margin: 14px 0 4px;
}

.hexmc-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,55,210,.2);
  background: rgba(0,0,0,.15);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.hexmc-terms-label:hover {
  border-color: rgba(150,45,255,.45);
  background: rgba(100,25,195,.07);
}

/* Ocultar el checkbox nativo */
.hexmc-terms-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Caja custom del checkbox */
.hexmc-terms-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(120,55,210,.5);
  background: rgba(0,0,0,.22);
  position: relative;
  margin-top: 1px;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tick */
.hexmc-terms-box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 8px; height: 12px;
  border: 2.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(42deg) scale(0);
  opacity: 0;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .15s ease;
}

/* Cuando el checkbox está checked */
.hexmc-terms-label input[type="checkbox"]:checked ~ .hexmc-terms-box {
  background: linear-gradient(135deg, #7020ff, #a050ff);
  border-color: rgba(150,45,255,.9);
  box-shadow: 0 0 14px rgba(150,45,255,.5);
}

.hexmc-terms-label input[type="checkbox"]:checked ~ .hexmc-terms-box::after {
  transform: rotate(42deg) scale(1);
  opacity: 1;
}

/* Texto */
.hexmc-terms-text {
  font-size: 13px;
  color: rgba(210,198,235,.75);
  line-height: 1.5;
}

/* Enlace */
.hexmc-terms-text a {
  color: #a060ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(150,45,255,.45);
  transition: color .2s ease, text-shadow .2s ease;
}

.hexmc-terms-text a:hover {
  color: #c080ff;
  text-shadow: 0 0 10px rgba(150,45,255,.55);
}

/* Mensaje de error */
.hexmc-terms-error {
  margin-top: 7px;
  color: #ffb4b4;
  font-size: 12.5px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hexmc-terms-error::before {
  content: '⚠';
  font-size: 13px;
}

/* Highlight cuando no se ha aceptado */
.hexmc-terms-label.hexmc-terms-highlight {
  border-color: rgba(255, 80, 80, .65);
  background: rgba(255, 0, 0, .05);
  box-shadow: 0 0 0 3px rgba(255, 80, 80, .2);
}

/* Animación shake */
@keyframes hexmcTermsShake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(6px); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(4px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(2px); }
}

.hexmc-terms-label.hexmc-terms-shake {
  animation: hexmcTermsShake .55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}


/* ── STRIPE SPLIT FIELDS ─────────────────────────────────── */
.hexmc-stripe-grid  { display: grid; gap: 12px; margin-top: 10px; }
.hexmc-stripe-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 520px) {
  .hexmc-stripe-split { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (min-width: 760px) {
  .hexmc-card { padding: 22px; }
  .hexmc-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 980px) {
  .hexmc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── CHECKOUT GRID (STEP 6) ──────────────────────────────── */
.hexmc-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

@media (min-width: 900px) {
  .hexmc-checkout-grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}



.hexmc-field input[type="email"] {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}

/* ── PAYMENT CARD ────────────────────────────────────────── */
.hexmc-payment-card {
  border-radius: 20px;
  border: 1px solid rgba(120,55,210,.55);
  background: linear-gradient(155deg, rgba(110,25,210,.12), rgba(0,0,0,.28));
  padding: 18px;
  box-shadow:
    0 0 40px rgba(150,45,255,.16),
    0 20px 50px rgba(0,0,0,.5);
  max-width: 100%;
}

/* ── BOTÓN PAGAR ─────────────────────────────────────────── */
.hexmc-payment-card .hexmc-btn.primary {
  font-size: clamp(14px, 2vw, 16px);
  padding: 16px;
  border-radius: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7020ff 0%, #9b30ff 55%, #b455ff 100%);
  box-shadow:
    0 0 18px rgba(150,45,255,.45),
    0 4px 20px rgba(90,15,185,.28);
  border-color: rgba(150,45,255,.6);
}

.hexmc-payment-card .hexmc-btn.primary:hover {
  box-shadow:
    0 0 30px rgba(150,45,255,.75),
    0 4px 30px rgba(90,15,185,.5);
  transform: translateY(-2px);
}

.hexmc-payment-note {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(232,236,255,.78);
  text-align: center;
}

/* ── PAY LOADER ──────────────────────────────────────────── */
.hexmc-pay-loader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(15,23,42,.55);
}

.hexmc-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(150,45,255,.2);
  border-top-color: #9b30ff;
  animation: hexmcSpin 1s linear infinite;
}

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

.hexmc-loader-text { font-size: 14px; opacity: .9; }

.hexmc-payment-element { margin-top: 12px; max-width: 100%; overflow: hidden; }
.hexmc-payment-element iframe { max-width: 100% !important; }

.hexmc-pay-error {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(248,113,113,.35);
  background: rgba(248,113,113,.10);
  color: #fecaca;
  font-size: 14px;
}

.hexmc-actions-pay { margin-top: 14px; }

/* ── COUPON ──────────────────────────────────────────────── */
.hexmc-coupon { margin-top: 14px; }
.hexmc-coupon label {
  display: block;
  margin-bottom: 6px;
  color: rgba(232,236,255,.75);
  font-size: 13px;
}

.hexmc-coupon-row { display: flex; gap: 10px; align-items: center; }
.hexmc-coupon-row input {
  flex: 1;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hexmc-coupon-row input:focus {
  border-color: rgba(107,92,255,.75);
  box-shadow: 0 0 0 3px rgba(107,92,255,.2);
  outline: none;
}

.hexmc-coupon-msg { margin-top: 8px; font-size: 12px; color: rgba(34,197,94,.85); }
.hexmc-coupon-msg.error { color: #fecaca; }

/* ── POST PAYMENT SUCCESS ────────────────────────────────── */
.hexmc-success {
  margin-top: 18px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,217,255,.18), rgba(0,0,0,.25));
  border: 1px solid rgba(0,217,255,.45);
  text-align: center;
  animation: hexmcSuccessIn .45s ease forwards;
}

.hexmc-success .icon  { font-size: 34px; margin-bottom: 10px; }
.hexmc-success .title { font-size: 20px; font-weight: 900; color: #fff; }
.hexmc-success .text  { margin-top: 6px; font-size: 14px; color: rgba(232,236,255,.85); line-height: 1.6; }

@keyframes hexmcSuccessIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

.hexmc-paid { pointer-events: none; opacity: .6; filter: saturate(.8); }

/* ── PAY RESULT ──────────────────────────────────────────── */
.hexmc-pay-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
}
.hexmc-pay-result .title { font-weight: 900; font-size: 18px; color: #fff; }
.hexmc-pay-result .desc  { color: rgba(232,236,255,.78); font-size: 14px; line-height: 1.5; }
.hexmc-pay-result.ok  { border: 1px solid rgba(34,197,94,.35);  border-radius: 16px; padding: 16px; background: rgba(34,197,94,.08); }
.hexmc-pay-result.bad { border: 1px solid rgba(248,113,113,.35); border-radius: 16px; padding: 16px; background: rgba(248,113,113,.08); }

/* ── DOWNLOAD & COMMUNITY BUTTONS ────────────────────────── */
.hexmc-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6b5cff, #8a6bff);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(107,92,255,.4);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hexmc-download-btn:hover {
  box-shadow: 0 0 0 4px rgba(107,92,255,.25), 0 0 20px rgba(107,92,255,.5);
  transform: translateY(-1px);
}

.hexmc-community-btn {
  background: #0ea5e9;
  box-shadow: 0 10px 28px rgba(14,165,233,.28);
}
.hexmc-community-btn:hover {
  box-shadow: 0 0 0 4px rgba(14,165,233,.2), 0 0 18px rgba(14,165,233,.4);
}

/* ── WOOCOMMERCE EMBED ───────────────────────────────────── */
.hexmc-wc-checkout .woocommerce { background: transparent; }
.hexmc-wc-loading { padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.hexmc-wc-error   { padding: 14px; border: 1px solid rgba(255,80,80,.35); background: rgba(255,0,0,.08); border-radius: 14px; }

.hexmc-wc-checkout .woocommerce-form-coupon-toggle,
.hexmc-wc-checkout .woocommerce-form-coupon,
.hexmc-wc-checkout #ship-to-different-address,
.hexmc-wc-checkout .woocommerce-shipping-fields,
.hexmc-wc-checkout .woocommerce-additional-fields,
.hexmc-wc-checkout .woocommerce-checkout-review-order-table,
.hexmc-wc-checkout .woocommerce-privacy-policy-text { display: none !important; }

.hexmc-wc-checkout .woocommerce-checkout-payment {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
}

.hexmc-wc-checkout input.input-text,
.hexmc-wc-checkout input[type="email"],
.hexmc-wc-checkout input[type="text"] {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: 0 14px;
  outline: none;
}
.hexmc-wc-checkout input:focus {
  border-color: rgba(210,179,123,.85);
  box-shadow: 0 0 0 3px rgba(210,179,123,.18);
}

.hexmc-wc-checkout #place_order,
.hexmc-wc-checkout button#place_order {
  width: 100% !important;
  height: 52px;
  border-radius: 14px;
  border: 0;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(210,179,123,1), rgba(210,179,123,.75));
  color: #111;
  cursor: pointer;
}
.hexmc-wc-checkout #place_order:disabled { opacity: .55; cursor: not-allowed; }

.hexmc-wc-checkout .hexmc-hidden-field { display: none !important; }

.hexmc-wc-checkout .wc-stripe-elements-field,
.hexmc-wc-checkout .StripeElement {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 14px !important;
}

/* ── CELEBRATION CONFETTI ────────────────────────────────── */
.hexmc-celebration {
  position: relative;
  width: 100%;
  height: 36px;
  overflow: hidden;
}

.hexmc-celebration span {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  opacity: .9;
  animation: hexmcConfetti 1.4s ease-out infinite;
}

.hexmc-celebration span:nth-child(1) { left: 10%; background: #6b5cff; animation-delay: 0s;   }
.hexmc-celebration span:nth-child(2) { left: 25%; background: #00d9ff; animation-delay: .1s;  }
.hexmc-celebration span:nth-child(3) { left: 40%; background: #22c55e; animation-delay: .2s;  }
.hexmc-celebration span:nth-child(4) { left: 55%; background: #f59e0b; animation-delay: .15s; }
.hexmc-celebration span:nth-child(5) { left: 70%; background: #fb7185; animation-delay: .05s; }
.hexmc-celebration span:nth-child(6) { left: 85%; background: #a855f7; animation-delay: .18s; }

@keyframes hexmcConfetti {
  0%   { transform: translateY(-4px) rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(34px) rotate(120deg); opacity: 0; }
}