/* ============================================================
   QUANTUM+ CORE — qcore.css
   Subir via FTP a la carpeta /assets/ del tema
   Luego agregar en el layout base (ej: base.html o layout.html):
   <link rel="stylesheet" href="{{ 'qcore.css' | asset_url }}">
   ============================================================ */

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

/* ── Keyframes ── */
@keyframes qcore-pulse  { 0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.1);opacity:0;} }
@keyframes qcore-sweep  { 0%{left:-100%;opacity:0;}45%{opacity:.38;}100%{left:200%;opacity:0;} }
@keyframes qcore-fadein { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
@keyframes qcore-glow   { 0%,100%{opacity:.5;}50%{opacity:1;} }
@keyframes qcore-shimmer{
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Reset ── */
.qcore, .qcore * { box-sizing:border-box; margin:0; padding:0; }
.qcore {
  font-family: 'Montserrat', sans-serif;
  background: #0a0a0c;
  color: #f5f5f5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  display: block;
  position: relative;
}

/* Scroll reveal */
.qcore .qc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
}
.qcore .qc-reveal.qc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Shine — técnica robusta con pseudo-element, no depende de background-clip ── */
.qcore .qcore-shine {
  display: inline-block;
  color: #ff007f;
  text-shadow: 0 0 30px rgba(255,0,127,.6), 0 0 60px rgba(255,0,127,.3);
  position: relative;
}
.qcore .qcore-shine::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0)  38%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0)  62%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: qcore-shimmer 3s linear infinite;
  pointer-events: none;
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.qcore .qcore-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 100px;
  overflow: hidden;
  background: #0a0a0c;
}
.qcore .qcore-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.022) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.qcore .qcore-orb {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(255,0,127,.15) 0%, transparent 68%);
  filter: blur(44px);
  pointer-events: none;
  animation: qcore-glow 4s ease-in-out infinite;
}
.qcore .qcore-grid-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 220px;
  background-image:
    linear-gradient(to right, rgba(255,0,127,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,0,127,.5) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(420px) rotateX(60deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 80%);
  mask-image: linear-gradient(to top, black 0%, transparent 80%);
  pointer-events: none;
}
.qcore .qcore-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255,0,127,.1);
  border: 1px solid rgba(255,0,127,.45);
  color: #ff007f;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 28px;
  position: relative; z-index: 2;
  animation: qcore-fadein .5s .15s both;
}
.qcore .qcore-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff007f;
  flex-shrink: 0;
  position: relative;
  display: inline-block;
}
.qcore .qcore-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: #ff007f;
  animation: qcore-pulse 2s ease-out infinite;
}
.qcore .qcore-h1 {
  font-size: clamp(2.8rem, 9vw, 7rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.04em;
  color: #f5f5f5;
  margin-bottom: 22px;
  position: relative; z-index: 2;
  animation: qcore-fadein .6s .28s both;
  text-align: center;
  width: 100%;
}
.qcore .qcore-sub {
  max-width: 500px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  color: #d3d3d3;
  margin-bottom: 30px;
  position: relative; z-index: 2;
  animation: qcore-fadein .6s .4s both;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.qcore .qcore-strong { color: #f5f5f5; font-weight: 700; }
.qcore .qcore-price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
  margin-bottom: 34px;
  position: relative; z-index: 2;
  animation: qcore-fadein .6s .5s both;
}
.qcore .qcore-price-cur { font-family:'JetBrains Mono',monospace; font-size:.9rem; color:#d3d3d3; }
.qcore .qcore-price-num {
  font-size: clamp(3.2rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #ff007f;
  line-height: 1;
  text-shadow: 0 0 40px rgba(255,0,127,.5);
}
.qcore .qcore-price-per { font-size:.95rem; font-weight:600; color:#d3d3d3; }
.qcore .qcore-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  position: relative; z-index: 2;
  animation: qcore-fadein .6s .6s both;
}
.qcore .qcore-btn-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  background: #ff007f;
  color: #0a0a0c !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 0 40px rgba(255,0,127,.5);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  border: none;
}
.qcore .qcore-btn-p::after {
  content: '';
  position: absolute; top:0; left:-100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: qcore-sweep 5s ease-in-out infinite;
}
.qcore .qcore-btn-p:hover { transform: translateY(-3px); box-shadow: 0 0 60px rgba(255,0,127,.7); }
.qcore .qcore-btn-s {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #f5f5f5 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .2s, border-color .2s;
}
.qcore .qcore-btn-s:hover { transform: translateY(-2px); border-color: rgba(255,0,127,.5) !important; }
.qcore .qcore-fine {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
  position: relative; z-index: 2;
  animation: qcore-fadein .5s .72s both;
}

/* ══════════════════════════════
   STATS
══════════════════════════════ */
.qcore .qcore-stats {
  background: #0a0a0c;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 44px 24px;
  position: relative;
}
.qcore .qcore-stats::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,0,127,.03); pointer-events: none;
}
.qcore .qcore-stats-grid {
  max-width: 700px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  position: relative; z-index: 1;
}
.qcore .qcore-stat { text-align:center; padding:8px; }
.qcore .qcore-stat-val {
  font-size: clamp(2rem,6vw,3rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #ff007f;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 24px rgba(255,0,127,.5);
}
.qcore .qcore-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing:.22em; text-transform:uppercase;
  color: #d3d3d3; line-height:1.5;
}

/* ══════════════════════════════
   BENEFITS
══════════════════════════════ */
.qcore .qcore-benefits {
  padding: 80px 24px 100px;
  background: #0a0a0c;
  position: relative; overflow: hidden;
}
.qcore .qcore-benefits-glow {
  position: absolute; top:0; left:50%; transform:translateX(-50%);
  width: 440px; height: 400px;
  background: radial-gradient(circle, rgba(255,0,127,.07) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.qcore .qcore-sec-head {
  text-align: center; margin-bottom: 54px; position: relative; z-index:1;
}
.qcore .qcore-sec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing:.3em; text-transform:uppercase;
  color: #ff007f; margin-bottom: 12px;
}
.qcore .qcore-sec-title {
  font-size: clamp(2rem,6vw,4.5rem);
  font-weight: 900; letter-spacing:-.04em; line-height:.9;
  color: #f5f5f5; margin-bottom: 14px;
}
.qcore .qcore-sec-sub {
  font-size:.95rem; color:#d3d3d3; font-weight:500;
  max-width:420px; line-height:1.6; margin:0 auto;
}
.qcore .qcore-cards {
  max-width: 980px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 20px;
  position: relative; z-index:1;
}
.qcore .qcore-card {
  background: rgba(28,28,28,.75);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px; padding: 32px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.qcore .qcore-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,0,127,.45);
  box-shadow: 0 16px 48px -12px rgba(255,0,127,.25);
}
.qcore .qcore-card-num {
  font-size: 2.6rem; font-weight:900;
  color: rgba(255,0,127,.18); line-height:1; margin-bottom:4px;
}
.qcore .qcore-card-tag {
  display: inline-flex; padding: 2px 8px; border-radius:4px;
  font-size:8px; font-weight:800; letter-spacing:.25em; text-transform:uppercase;
  color:#ff007f; background:rgba(255,0,127,.12);
  border:1px solid rgba(255,0,127,.3);
  margin-bottom:20px; align-self:flex-start;
}
.qcore .qcore-card-icon {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  background:rgba(255,0,127,.1); border:1px solid rgba(255,0,127,.3);
  margin-bottom:16px;
}
.qcore .qcore-card-icon svg { display:block; }
.qcore .qcore-card-title {
  font-size:1.15rem; font-weight:800; color:#f5f5f5;
  margin-bottom:10px; line-height:1.2;
}
.qcore .qcore-card-desc {
  font-size:.875rem; color:rgba(212,212,212,.72); line-height:1.65; flex:1;
}
.qcore .qcore-card-line {
  margin-top:22px; height:1px;
  background: linear-gradient(to right, rgba(255,0,127,.5), transparent);
}
.qcore .qcore-card-corner {
  position:absolute; bottom:0; right:0; width:72px; height:72px;
  background:radial-gradient(circle at 100% 100%, rgba(255,0,127,.12), transparent 70%);
  border-radius:0 0 20px 0; pointer-events:none;
}

/* ══════════════════════════════
   PLAN CARD
══════════════════════════════ */
.qcore .qcore-plan-sec {
  padding: 80px 24px 100px;
  background: #0a0a0c;
  position: relative; overflow: hidden;
}
.qcore .qcore-plan-grid-bg {
  position: absolute; bottom:0; left:0; right:0; height:250px;
  background-image:
    linear-gradient(to right, rgba(255,0,127,.38) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,0,127,.38) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(420px) rotateX(60deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 75%);
  mask-image: linear-gradient(to top, black 0%, transparent 75%);
  opacity:.4; pointer-events:none;
}
.qcore .qcore-plan-wrap { max-width:500px; margin:0 auto; position:relative; z-index:1; }
.qcore .qcore-plan-card {
  background: linear-gradient(180deg, rgba(40,8,24,.97), rgba(12,5,10,.98));
  border: 1px solid #ff007f;
  border-radius: 28px;
  padding: 44px 36px 32px;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px #ff007f, 0 25px 80px -20px rgba(255,0,127,.5), inset 0 0 60px rgba(255,0,127,.05);
  animation: qcore-fadein .7s .1s both;
}
.qcore .qcore-plan-badge {
  position: absolute; top:-14px; left:50%; transform:translateX(-50%);
  padding:5px 20px; border-radius:999px;
  background:#ff007f; color:#0a0a0c !important;
  font-family:'Montserrat',sans-serif;
  font-size:10px; font-weight:800;
  letter-spacing:.3em; text-transform:uppercase;
  white-space:nowrap; box-shadow:0 0 24px #ff007f;
}
.qcore .qcore-plan-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;
}
.qcore .qcore-plan-name-lbl {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.25em; text-transform:uppercase;
  color:#d3d3d3; margin-bottom:4px;
}
.qcore .qcore-plan-name { font-size:2rem; font-weight:900; letter-spacing:-.03em; color:#f5f5f5; }
.qcore .qcore-plan-icon {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  background:rgba(255,0,127,.18); border:1px solid rgba(255,0,127,.5);
}
.qcore .qcore-plan-icon svg { display:block; }
.qcore .qcore-plan-price { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.qcore .qcore-plan-cur  { font-size:.85rem; font-weight:600; color:#d3d3d3; }
.qcore .qcore-plan-num  {
  font-size:clamp(2.8rem,8vw,4.5rem); font-weight:900;
  letter-spacing:-.04em; color:#ff007f; line-height:1;
  text-shadow:0 0 30px rgba(255,0,127,.5);
}
.qcore .qcore-plan-per  { font-size:.85rem; font-weight:500; color:#d3d3d3; }
.qcore .qcore-plan-fine {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:20px;
}
.qcore .qcore-neon-hr {
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,0,127,.6), transparent);
  margin:20px 0;
}
.qcore .qcore-feats { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.qcore .qcore-feat {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-radius:12px;
  background:rgba(255,0,127,.07); border:1px solid rgba(255,0,127,.18);
}
.qcore .qcore-feat-chk {
  width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  background:rgba(255,0,127,.22); border:1px solid rgba(255,0,127,.6);
}
.qcore .qcore-feat-chk svg { display:block; }
.qcore .qcore-feat-txt { font-size:.9rem; font-weight:600; color:#f5f5f5; }
.qcore .qcore-cta {
  display:flex; width:100%;
  align-items:center; justify-content:center; gap:8px;
  padding:18px 24px; border-radius:999px;
  background:#ff007f; color:#0a0a0c !important;
  font-family:'Montserrat',sans-serif;
  font-weight:800; font-size:.82rem;
  letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none !important;
  box-shadow:0 0 36px rgba(255,0,127,.55);
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  border:none;
}
.qcore .qcore-cta::after {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: qcore-sweep 5s ease-in-out infinite;
}
.qcore .qcore-cta:hover { transform:translateY(-3px); box-shadow:0 0 60px rgba(255,0,127,.7); }
.qcore .qcore-pay-methods {
  text-align:center; margin-top:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.22); line-height:1.8;
}
.qcore .qcore-plan-corner-glow {
  position:absolute; bottom:-18px; right:-18px;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(255,0,127,.18) 0%, transparent 70%);
  filter:blur(20px); pointer-events:none;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 640px) {
  .qcore .qcore-hero { padding:72px 20px 90px; min-height:100svh; }
  .qcore .qcore-h1   { font-size:clamp(2.6rem,13vw,4rem); }
  .qcore .qcore-btns { flex-direction:column; align-items:center; }
  .qcore .qcore-btn-p, .qcore .qcore-btn-s { width:100%; max-width:320px; justify-content:center; min-height:54px; }
  .qcore .qcore-cards{ grid-template-columns:1fr; }
  .qcore .qcore-plan-card { padding:36px 20px 28px; }
  .qcore .qcore-stats-grid { gap:6px; }
  .qcore .qcore-stat-lbl { font-size:7px; letter-spacing:.12em; }
}

/* ══════════════════════════════
   MARGEN SUPERIOR E INFERIOR
══════════════════════════════ */
.qcore {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ══════════════════════════════
   OVERRIDE DEL TEMA — forzar colores y centrado

/* Fondo negro en todas las secciones */
.qcore .qcore-hero,
.qcore .qcore-stats,
.qcore .qcore-benefits,
.qcore .qcore-plan-sec { background: #0a0a0c !important; }

/* Textos principales */
.qcore h1.qcore-h1,
.qcore h2.qcore-sec-title,
.qcore .qcore-plan-name { color: #f5f5f5 !important; }

/* Subtítulos y descripciones — el tema los pone oscuros */
.qcore p.qcore-sub,
.qcore p.qcore-sec-sub,
.qcore .qcore-card-desc,
.qcore p { color: #d3d3d3 !important; background: transparent !important; }

/* Labels mono */
.qcore .qcore-sec-label,
.qcore .qcore-plan-name-lbl,
.qcore .qcore-card-tag,
.qcore .qcore-stat-lbl,
.qcore .qcore-fine,
.qcore .qcore-plan-fine,
.qcore .qcore-pay-methods { color: inherit; background: inherit; }

/* Títulos de cards */
.qcore h3.qcore-card-title { color: #f5f5f5 !important; background: transparent !important; }

/* Feat items — texto blanco */
.qcore .qcore-feat-txt { color: #f5f5f5 !important; }

/* SVG iconos — el tema a veces pisa fill/stroke */
.qcore .qcore-card-icon svg,
.qcore .qcore-plan-icon svg,
.qcore .qcore-feat-chk svg {
  stroke: #ff007f !important;
  fill: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

/* Botones — colores intactos */
.qcore .qcore-btn-p,
.qcore .qcore-btn-p:hover,
.qcore .qcore-btn-p:visited { color: #0a0a0c !important; background: #ff007f !important; }

.qcore .qcore-btn-s,
.qcore .qcore-btn-s:hover,
.qcore .qcore-btn-s:visited { color: #f5f5f5 !important; }

.qcore .qcore-cta,
.qcore .qcore-cta:hover,
.qcore .qcore-cta:visited { color: #0a0a0c !important; background: #ff007f !important; }

.qcore .qcore-plan-badge { color: #0a0a0c !important; background: #ff007f !important; }

/* Precio magenta */
.qcore .qcore-price-num,
.qcore .qcore-plan-num,
.qcore .qcore-stat-val { color: #ff007f !important; }

.qcore .qcore-price-cur,
.qcore .qcore-price-per,
.qcore .qcore-plan-cur,
.qcore .qcore-plan-per { color: #d3d3d3 !important; }

/* Evitar que el tema agregue padding a h1/h2/h3 dentro de .qcore */
.qcore h1, .qcore h2, .qcore h3 {
  padding: 0 !important;
  background: transparent !important;
}
/* Para p, solo sacar padding y background — NO el margin (rompe el auto-centrado) */
.qcore p { padding: 0 !important; background: transparent !important; }

/* Limpiar estilos de links del tema */
.qcore a { text-decoration: none !important; }
.qcore a:hover { text-decoration: none !important; }

/* ══════════════════════════════
   CENTRADO
══════════════════════════════ */
.qcore .qcore-hero { text-align: center !important; }
.qcore p.qcore-sub,
.qcore p.qcore-sec-sub,
.qcore p.qcore-fine {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* ══════════════════════════════
   FIX SCROLL HORIZONTAL
   overflow:hidden en .qcore contiene todo.
   Las secciones no deben exceder el ancho.
══════════════════════════════ */
.qcore .qcore-hero,
.qcore .qcore-stats,
.qcore .qcore-benefits,
.qcore .qcore-plan-sec {
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}