/* =========================================================
   MONEY MAKERS — v5 "Estantes por categoría"
   Compacto, legible y fácil de recorrer. Marca: negro + lima, bordes rectos.
   ========================================================= */
:root {
  --black: #0B0B0B;
  --white: #FFFFFF;
  --lime: #C6FF00;
  --gray: #6B6B6B;

  --bg: var(--black);
  --surface: #131313;
  --surface-2: #1B1B1B;
  --line: #262626;
  --line-2: #3A3A3A;
  --text: #F2F2F2;
  --text-2: #BDBDBD;
  --muted: #8C8C8C;

  /* Tipografía: --ds/--dp escalan títulos/precios (los tamaños base son para una letra condensada; para cambiar de letra, ajusta estas variables) */
  --display: "Rubik", system-ui, sans-serif;
  --body: "Rubik", system-ui, sans-serif;
  --ds: .7; --dp: .78; --dw: 800; --dlh: 1.02; --dls: -.01em;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.65, 0, .25, 1);
  --hdr: 86px;
  --maxw: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
html { overflow-x: clip; }
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--black); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .wrap { padding: 0 32px; } }

.ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; line-height: var(--dlh); letter-spacing: var(--dls); font-synthesis: none; }
.label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.slashes { color: var(--lime); font-family: var(--display); font-weight: var(--dw); }

.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } *, *::before, *::after { transition-duration: 0s !important; animation: none !important; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 1.5px solid; font-weight: 700; font-size: 14px; line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.btn .ico { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover .ico { transform: translateX(3px); }
.btn--lime { background: var(--lime); color: var(--black); border-color: var(--lime); }
.btn--lime:hover { background: var(--white); border-color: var(--white); }
.btn--line { border-color: var(--line-2); color: var(--text); }
.btn--line:hover { border-color: var(--white); }
.btn--dark { background: var(--black); color: var(--lime); border-color: var(--black); }
.btn--dark:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-2); transition: border-color .15s; }
.icon-btn:hover { border-color: var(--white); }

/* ---------- Anuncio + header ---------- */
.announce { display: flex; justify-content: center; gap: 12px; padding: 8px 16px; background: var(--lime); color: var(--black); font-size: 13px; text-align: center; }
.announce a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.hd { position: sticky; top: 0; z-index: 60; background: rgba(11, 11, 11, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hd__in { height: var(--hdr); display: flex; align-items: center; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mm { background: var(--lime); color: var(--black); font-family: var(--display); font-weight: var(--dw); font-size: calc(20px * var(--ds)); letter-spacing: -.05em; padding: 3px 7px 1px; }
.logo__name { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(15px * var(--ds)); line-height: .85; }
.logo img { display: block; height: 72px; width: auto; transition: transform .2s; }
.logo:hover img { transform: rotate(-2deg) scale(1.04); }
.logo--ft img { height: 92px; }
@media (max-width: 860px) { :root { --hdr: 68px; } .hd .logo img { height: 54px; } }
.hd__nav { display: flex; gap: 2px; }
.hd__nav a { padding: 8px 12px; font-weight: 600; font-size: 14px; color: var(--text-2); transition: color .15s, background .15s; }
.hd__nav a:hover { color: var(--white); background: var(--surface-2); }
.hd__nav a.active { color: var(--black); background: var(--lime); }
.hd__search {
  flex: 1; min-width: 0; max-width: 300px; margin-left: auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 2px;
  border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 14px; text-align: left; transition: color .15s, border-color .15s;
}
.hd__search .ico { width: 17px; height: 17px; }
.hd__search:hover, .hd__search:focus-visible { color: var(--white); border-color: var(--white); outline: none; }
.hd__act { display: flex; align-items: center; gap: 8px; }
.hd__link { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-weight: 600; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.hd__link:hover { color: var(--white); }
.hd__cart { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--white); color: var(--black); font-weight: 700; font-size: 14px; transition: background .15s; }
.hd__cart:hover { background: var(--lime); }
.hd__cart b { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--black); color: var(--white); font-size: 12px; }
.hd__cart.has b { background: var(--lime); color: var(--black); outline: 1.5px solid var(--black); }
.hd__cart.bump b { animation: bump .4s var(--ease); }
@keyframes bump { 50% { transform: scale(1.35); } }
.hd__menu { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-2); }

.mmenu { display: none; border-top: 1px solid var(--line); background: var(--black); }
.mmenu.open { display: block; }
.mmenu a { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 16px; }
.mmenu a .ico { color: var(--lime); }

@media (max-width: 1000px) { .hd__nav { display: none; } .hd__menu { display: grid; } }
@media (max-width: 760px) {
  .hd__in { gap: 10px; }
  .hd__search { max-width: none; flex: 1; }
  .hd__search span, .hd__link span { display: none; }
  .hd__search { flex: 0 0 40px; width: 40px; justify-content: center; border: 0; margin-left: auto; }
  .hd__link { padding: 0 8px; }
}
@media (max-width: 420px) { .hide-xs { display: none; } .logo__name { display: none; } .hd .logo img { height: 44px; } }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 56px 0 44px; }
.hero .label { margin-bottom: 18px; }
.hero h1 { font-size: calc(clamp(40px, 4.6vw, 64px) * var(--ds)); line-height: 1.04; margin-bottom: 24px; }
.hero h1 .hl { display: inline-block; margin-top: 8px; padding: .06em .16em .02em; background: var(--lime); color: var(--black); line-height: 1; }
.hero p { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 520px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Producto destacado (derecha del hero) */
.spot { position: relative; background: var(--surface); border: 1px solid var(--line-2); }
.spot__tag { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 9px; background: var(--black); color: var(--lime); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.spot__tag .ico { width: 13px; height: 13px; fill: var(--lime); }
.spot .cover { aspect-ratio: 16/9; }
.spot__media:hover .cover__art { transform: translate(50%, -50%) scale(1.06); }
.spot__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.spot h2 { font-size: calc(36px * var(--ds)); margin-top: 4px; }
.spot h2 a:hover { color: var(--lime); }
.spot p { color: var(--text-2); font-size: 15px; }
.spot__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.spot__foot .price { font-size: calc(34px * var(--dp)); }
.spot__btns { display: flex; gap: 8px; }
.spot__btns .btn { padding: 9px 12px; font-size: 13px; }

/* Categorías (debajo del hero): estilos en la capa v6 al final */

.qcats { border: 1px solid var(--line); }
.qcats .label { padding: 12px 16px 0; }
.qcat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line); transition: background .15s; }
.qcats .label + .qcat { border-top: 0; }
.qcat:hover { background: var(--surface-2); }
.qcat__ic { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; }
.qcat__ic .ico { width: 20px; height: 20px; }
.ic--plugin { background: var(--surface-2); color: var(--lime); border: 1px solid var(--line-2); }
.ic--curso { background: var(--lime); color: var(--black); }
.ic--app { background: var(--white); color: var(--black); }
.qcat__txt { flex: 1; min-width: 0; }
.qcat__txt b { display: block; font-family: var(--display); font-weight: var(--dw); font-size: calc(22px * var(--ds)); text-transform: uppercase; line-height: 1; }
.qcat__txt span { font-size: 13px; color: var(--muted); }
.qcat > .ico { color: var(--muted); transition: transform .2s, color .2s; }
.qcat:hover > .ico { color: var(--lime); transform: translateX(3px); }

.trust { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.trust > div { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.trust > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.trust .ico { width: 22px; height: 22px; color: var(--lime); }
.trust b { display: block; font-size: 14px; }
.trust span { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .trust > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Estantes ---------- */
.shelf { padding-top: 44px; padding-bottom: 8px; }
.shelf__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.shelf__title { display: flex; align-items: center; gap: 12px; }
.shelf__title h2 { font-size: calc(32px * var(--ds)); }
.shelf__title p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.more:hover { color: var(--lime); border-color: var(--lime); }
.more .ico { width: 15px; height: 15px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card:hover .cover__art { transform: translate(50%, -50%) scale(1.06); }
.card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; }
.card__name { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(22px * var(--ds)); line-height: 1; margin-top: 4px; }
.card__name a::after { content: ""; position: absolute; inset: 0; }
.card__tag { font-size: 13.5px; color: var(--text-2); }
.card__foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; }
.chip .ico { width: 12px; height: 12px; }
.chip--plugin { border: 1px solid var(--lime); color: var(--lime); }
.chip--curso { background: var(--lime); color: var(--black); }
.chip--app { background: var(--white); color: var(--black); }
.price { font-family: var(--display); font-weight: var(--dw); font-size: calc(24px * var(--dp)); line-height: 1; white-space: nowrap; }
.price s { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--muted); margin-right: 6px; }
.price small { font-size: .6em; color: var(--text-2); }
.add-btn {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;
  background: var(--lime); color: var(--black); border: 1.5px solid var(--lime); font-weight: 700; font-size: 13px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.add-btn .ico { width: 15px; height: 15px; stroke-width: 2.5; }
.add-btn:hover { background: var(--white); border-color: var(--white); }
.add-btn.added { background: transparent; color: var(--lime); }
.add-btn.added:hover { background: var(--lime); color: var(--black); }

/* Portadas */
.cover { position: relative; overflow: hidden; aspect-ratio: 16/10; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px; container-type: inline-size; }
.cover--plugin { background: #000; color: var(--white); border-bottom: 1px solid var(--line); }
.cover--curso { background: var(--lime); color: var(--black); }
.cover--app { background: var(--white); color: var(--black); }
.cover::before, .cover::after { content: ""; position: absolute; top: -40%; height: 180%; width: 6cqw; transform: rotate(24deg); }
.cover::before { right: 20cqw; } .cover::after { right: 9cqw; }
.cover--plugin::before, .cover--plugin::after { background: var(--lime); }
.cover--curso::before, .cover--curso::after, .cover--app::before, .cover--app::after { background: var(--black); }
.cover__top { display: flex; justify-content: flex-end; position: relative; z-index: 2; }
.cover__badge { background: var(--black); color: var(--lime); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; }
.cover--plugin .cover__badge { background: var(--lime); color: var(--black); }
.cover__name { position: relative; z-index: 2; font-size: 11cqw; max-width: 66%; }
.cover__art { position: absolute; right: 34cqw; top: 52%; transform: translate(50%, -50%); z-index: 1; transition: transform .4s var(--ease); }
.art-wave { display: flex; align-items: center; gap: .9cqw; height: 22cqw; width: 34cqw; }
.art-wave i { flex: 1; background: var(--white); }
.art-wave i.cut { background: var(--lime); opacity: .4; }
.art-play { width: 22cqw; height: 22cqw; border-radius: 50%; background: var(--black); display: grid; place-items: center; }
.art-play::after { content: ""; border-left: 6.5cqw solid var(--lime); border-top: 4cqw solid transparent; border-bottom: 4cqw solid transparent; margin-left: 2cqw; }
.art-phone { width: 17cqw; height: 30cqw; border: .9cqw solid var(--black); padding: 5cqw 1.6cqw 1.6cqw; display: flex; align-items: flex-end; gap: .8cqw; background: var(--white); }
.art-phone i { flex: 1; background: var(--black); }
.art-phone i:last-child { background: var(--lime); outline: 1px solid var(--black); }

/* ---------- Pase All Access ---------- */
.pass { padding-top: 52px; padding-bottom: 12px; }
.ticket { display: grid; grid-template-columns: 1fr 280px; background: var(--lime); color: var(--black); }
.ticket__main { padding: 28px 32px; border-right: 2px dashed var(--black); position: relative; }
.ticket__main::before, .ticket__main::after { content: ""; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.ticket__main::before { top: -13px; } .ticket__main::after { bottom: -13px; }
.ticket__main .label { color: #3A4A00; display: flex; align-items: center; gap: 6px; }
.ticket h2 { font-size: calc(44px * var(--ds)); margin: 4px 0 8px; }
.ticket__main p { max-width: 520px; font-size: 15px; }
.ticket__perks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.ticket__perks li { display: flex; align-items: center; gap: 6px; }
.ticket__perks .ico { width: 16px; height: 16px; }
.ticket__stub { padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ticket__stub s { font-size: 13px; }
.ticket__price { font-family: var(--display); font-weight: var(--dw); font-size: calc(60px * var(--dp)); line-height: var(--dlh); }
.ticket__price small { font-size: .35em; }
@media (max-width: 760px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket__main { border-right: 0; border-bottom: 2px dashed var(--black); padding: 24px 20px; }
  .ticket__main::before, .ticket__main::after { top: auto; bottom: -13px; }
  .ticket__main::before { left: -13px; right: auto; } .ticket__main::after { right: -13px; }
}

/* ---------- Creador + recibo ---------- */
.who { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.who h2 { font-size: calc(clamp(34px, 4vw, 52px) * var(--ds)); margin-bottom: 14px; }
.who h2 .out { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.who p { color: var(--text-2); font-size: 16px; max-width: 540px; }
.who p + p { margin-top: 10px; }
.photo-slot { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.receipt-wrap { display: grid; place-items: center; padding: 18px 12px 28px; }
.receipt, .paper { font-family: var(--mono); font-size: 12px; text-transform: uppercase; background: var(--white); color: var(--black); }
.receipt { position: relative; width: min(300px, 100%); padding: 22px 18px 24px; transform: rotate(2deg); box-shadow: 8px 8px 0 var(--lime); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, var(--white) 0) 0 0 / 12px 12px, linear-gradient(45deg, transparent 8px, var(--white) 0) 0 0 / 12px 12px; background-repeat: repeat-x; }
.receipt h4, .paper h4 { font-family: var(--display); font-weight: var(--dw); font-size: calc(30px * var(--ds)); line-height: var(--dlh); text-align: center; }
.receipt .rlogo img, .paper .rlogo img { display: block; width: 150px; height: auto; margin: 0 auto; }
.receipt .c, .paper .c { text-align: center; font-size: 10.5px; margin: 6px 0 10px; }
.receipt hr, .paper hr { border: 0; border-top: 1.5px dashed var(--black); margin: 10px 0; }
.rline { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.rline .dots { flex: 1; border-bottom: 1.5px dotted var(--black); transform: translateY(-3px); }
.rline.total { font-weight: 700; font-size: 14px; }
.barcode { height: 38px; margin-top: 12px; background: repeating-linear-gradient(90deg, var(--black) 0 2px, transparent 2px 4px, var(--black) 4px 7px, transparent 7px 9px, var(--black) 9px 10px, transparent 10px 13px, var(--black) 13px 16px, transparent 16px 17px); }
@media (max-width: 860px) { .who { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 40px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-top: 48px; padding-bottom: 64px; border-top: 1px solid var(--line); }
.faq h2 { font-size: calc(38px * var(--ds)); margin-bottom: 10px; }
.faq__intro p { color: var(--text-2); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--lime); }
.faq summary .ico { transition: transform .2s; color: var(--muted); }
.faq details[open] summary .ico { transform: rotate(45deg); color: var(--lime); }
.faq details p { padding: 0 0 18px; color: var(--text-2); max-width: 680px; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Footer ---------- */
.ft { border-top: 1px solid var(--line); }
.ft__cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding: 26px 28px; background: var(--lime); color: var(--black); }
.ft__cta h3 { font-size: calc(34px * var(--ds)); }
.ft__cta p { font-size: 15px; margin-top: 4px; }
.ft__grid { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 28px; padding: 44px 0 32px; }
.ft__contact a, .ft__contact span { display: flex !important; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: 14px; padding: 4px 0; overflow-wrap: anywhere; }
.ft__contact .ico { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; color: var(--muted); }
/* Libro de Reclamaciones: visible en todas las páginas */
.ft__lr { display: inline-flex !important; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px !important; border: 1px solid var(--line-2); color: var(--white) !important; font-size: 12px !important; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.ft__lr .ico { width: 22px; height: 22px; color: var(--lime); flex-shrink: 0; }
.ft__lr:hover { border-color: var(--lime); }
.ft__brand p { color: var(--muted); margin: 12px 0 14px; font-size: 14px; }
.ft h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lime); margin-bottom: 12px; }
.ft__grid a:not(.logo) { display: block; color: var(--text-2); font-size: 14px; padding: 4px 0; }
.ft__grid a:not(.logo):hover { color: var(--white); }
.ft__form { display: flex; max-width: 360px; border: 1px solid var(--line-2); }
.ft__form:focus-within { border-color: var(--lime); }
.ft__form input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 12px; font-size: 14px; }
.ft__form input:focus { outline: none; }
.ft__form button { background: var(--white); color: var(--black); padding: 0 14px; font-weight: 700; font-size: 13px; }
.ft__form button:hover { background: var(--lime); }
.ft__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.ft__cur { display: inline-flex; align-items: center; gap: 10px; }
.ft__cur select { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); padding: 6px 10px; font-size: 13px; }
.ft__cur select:hover, .ft__cur select:focus { border-color: var(--white); outline: none; }
@media (max-width: 1100px) { .ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 860px) { .ft__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Páginas internas ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); padding-top: 22px; }
.crumbs a:hover { color: var(--lime); }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 14px 0 22px; border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: calc(clamp(34px, 4vw, 48px) * var(--ds)); }
.pagehead p { color: var(--text-2); margin-top: 6px; }

.store { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 26px 0 64px; }
.side { position: sticky; top: calc(var(--hdr) + 20px); align-self: start; }
.side nav { display: grid; border: 1px solid var(--line); }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--text-2); transition: background .15s, color .15s; }
.side nav a:last-child { border-bottom: 0; }
.side nav a:hover { background: var(--surface-2); color: var(--white); }
.side nav a.active { background: var(--lime); color: var(--black); }
.side nav a span { margin-left: auto; font-size: 12px; opacity: .7; }
.side .label { margin-top: 22px; }
.side select { width: 100%; background: var(--surface); border: 1px solid var(--line-2); padding: 10px; font-size: 14px; cursor: pointer; }
.store__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.empty-msg { padding: 48px 0; color: var(--muted); font-size: 16px; }
@media (max-width: 860px) {
  .store { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .side { position: static; min-width: 0; }
  .side nav { grid-auto-flow: column; overflow-x: auto; }
  .side nav a { border-bottom: 0; border-right: 1px solid var(--line); white-space: nowrap; }
  .side nav a span { margin-left: 4px; }
  .side .label, .side select { display: none; }
  .store__top select { display: block; }
}

/* ---------- Producto ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; padding: 20px 0 48px; align-items: start; }
.pdp__media { position: sticky; top: calc(var(--hdr) + 20px); }
.pdp__media .cover { aspect-ratio: 4/3; border: 1px solid var(--line); padding: 16px; }
.pdp__media .cover__name { font-size: 10cqw; }
.pdp h1 { font-size: calc(clamp(36px, 4.2vw, 54px) * var(--ds)); margin: 10px 0 12px; }
.pdp .lead { font-size: 16.5px; color: var(--text-2); }
.buybox { margin-top: 22px; padding: 18px; border: 1px solid var(--line-2); background: var(--surface); }
.buybox__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.buybox__price .price { font-size: calc(40px * var(--dp)); }
.save { background: var(--lime); color: var(--black); font-size: 12px; font-weight: 700; padding: 3px 7px; }
.buy-btn { width: 100%; justify-content: space-between; padding: 15px 18px; font-size: 15px; }
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.assure div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.assure .ico { width: 16px; height: 16px; color: var(--lime); }
.blk { margin-top: 32px; }
.blk h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.feat { list-style: none; }
.feat li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feat .ico { width: 16px; height: 16px; color: var(--lime); stroke-width: 2.5; }
.mods { list-style: none; }
.mods li { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.mods .n { font-family: var(--mono); font-size: 12px; color: var(--lime); }
.mods .l { color: var(--muted); font-size: 13px; }
.log div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.log b { font-family: var(--mono); font-size: 12px; color: var(--lime); font-weight: 500; }
.spec div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); }
.spec dd { font-weight: 600; text-align: right; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(11,11,11,.96); border-top: 1px solid var(--line-2); transform: translateY(100%); transition: transform .3s var(--ease); }
.buybar.show { transform: none; }
.buybar .btn { flex: 1; }
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; gap: 20px; }
  .pdp__media { position: static; }
  .buybar { display: flex; }
  .assure { grid-template-columns: 1fr; }
}

/* ---------- Biblioteca ---------- */
.lib { display: grid; gap: 10px; padding-top: 14px; }
.libitem { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); }
.libitem .qcat__ic { width: 52px; height: 52px; }
.libitem h3 { font-family: var(--display); font-weight: var(--dw); font-size: calc(22px * var(--ds)); text-transform: uppercase; line-height: 1; }
.libitem small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.libitem small .ico { width: 14px; height: 14px; }
.prog { height: 6px; background: var(--line); margin-top: 8px; max-width: 260px; }
.prog span { display: block; height: 100%; background: var(--lime); }
.notice { margin: 28px 0 56px; padding: 12px 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
@media (max-width: 600px) { .libitem { grid-template-columns: 44px 1fr; } .libitem .qcat__ic { width: 44px; height: 44px; } .libitem .btn { grid-column: 1 / -1; } }

/* ---------- Carrito (recibo) ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(420px, 100%); background: var(--black); border-left: 1px solid var(--line-2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--ease); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font-size: 17px; font-weight: 700; }
.paper { flex: 1; overflow-y: auto; margin: 18px 20px 24px; padding: 20px 18px 24px;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 12px 100% repeat-x;
          mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 12px 100% repeat-x; }
.paper .item { padding: 6px 0; }
.paper .item button { display: inline-flex; align-items: center; gap: 4px; font-family: var(--body); font-size: 12px; font-weight: 600; text-transform: none; color: #B00020; margin-top: 2px; }
.paper .item button .ico { width: 13px; height: 13px; }
.paper .empty { text-align: center; padding: 22px 0; font-family: var(--body); text-transform: none; font-size: 14px; }
.paper .empty b { display: block; font-family: var(--display); font-weight: var(--dw); font-size: calc(34px * var(--ds)); text-transform: uppercase; }
.upsell { margin-top: 12px; padding: 8px; border: 1.5px dashed var(--black); font-size: 10.5px; }
.drawer__foot { padding: 0 20px 20px; }
.drawer__foot .tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-weight: 600; }
.drawer__foot .tot .price { font-size: calc(32px * var(--dp)); }
.drawer__foot .btn { width: 100%; justify-content: space-between; padding: 15px 18px; font-size: 15px; }
.drawer__foot .note { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12px; margin-top: 10px; }
.drawer__foot .note .ico { width: 14px; height: 14px; }

/* ---------- Buscador ---------- */
.srch { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.srch.open { opacity: 1; visibility: visible; }
.srch__box { width: min(560px, 100%); background: var(--black); border: 1px solid var(--line-2); max-height: 70vh; display: flex; flex-direction: column; }
.srch__bar { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.srch__bar .ico { width: 18px; height: 18px; flex-shrink: 0; }
.srch__bar input { flex: 1; min-width: 0; background: none; border: 0; padding: 16px 0; font-size: 16px; color: var(--white); }
.srch__bar input::placeholder { color: var(--muted); }
.srch__bar input:focus { outline: none; }
.srch__bar input::-webkit-search-cancel-button { display: none; }
.srch__esc { font-size: 12px; color: var(--muted); }
.srch__esc:hover { color: var(--white); }
.srch__res { overflow-y: auto; padding: 6px 0; overscroll-behavior: contain; }
.sr { display: flex; align-items: baseline; gap: 16px; padding: 11px 14px; font-size: 15px; color: var(--text-2); }
.sr b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr__k { width: 56px; font-size: 13px; color: var(--muted); }
.sr__p { min-width: 52px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.sr.focus { background: var(--surface-2); color: var(--white); }
.sr-empty { padding: 18px 14px; font-size: 14px; color: var(--muted); }
.sr-empty button { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.sr-empty button:hover { color: var(--white); }
@media (max-width: 640px) {
  .srch { padding: 0; }
  .srch__box { width: 100%; height: 100%; max-height: none; border: 0; }
}

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 120; display: flex; align-items: center; gap: 8px; background: var(--lime); color: var(--black); padding: 11px 16px; font-weight: 700; font-size: 14px; max-width: calc(100% - 32px); transform: translate(-50%, calc(100% + 40px)); transition: transform .3s var(--ease); }
.toast .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.toast.show { transform: translate(-50%, 0); }
body.has-buybar .toast { bottom: 80px; }

/* =========================================================
   Flujo de compra: checkout, confirmación, cuenta y soporte
   ========================================================= */

/* Formularios */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input { width: 100%; background: var(--black); border: 1px solid var(--line-2); padding: 12px 14px; font-size: 15px; transition: border-color .15s; }
.field input::placeholder { color: #5a5a5a; }
.field input:focus { outline: none; border-color: var(--lime); }
.err-msg { color: #FF6B6B; font-size: 12.5px; }
.err-msg:empty { display: none; }
.field.err input, .coupon.err .coupon__row { border-color: #FF6B6B; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint, .demo-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hint .ico, .demo-note .ico { width: 15px; height: 15px; flex-shrink: 0; }
.demo-note { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line-2); }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; gap: 0; } }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; padding: 24px 0 72px; }
.fieldset { border: 1px solid var(--line); background: var(--surface); padding: 22px; margin-bottom: 16px; }
.fieldset h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.step { width: 26px; height: 26px; display: grid; place-items: center; background: var(--lime); color: var(--black); font-size: 13px; font-weight: 800; }
.paym { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.paym__opt { position: relative; }
.paym__opt input { position: absolute; opacity: 0; pointer-events: none; }
.paym__box { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border: 1.5px solid var(--line-2); cursor: pointer; transition: border-color .15s, background .15s; }
.paym__box .ico { width: 22px; height: 22px; color: var(--muted); margin-bottom: 6px; }
.paym__box b { font-size: 15px; }
.paym__box small { font-size: 12.5px; color: var(--muted); }
.paym__opt:hover .paym__box { border-color: var(--white); }
.paym__opt input:checked + .paym__box { border-color: var(--lime); background: #161D00; }
.paym__opt input:checked + .paym__box .ico { color: var(--lime); }
.paym__opt input:focus-visible + .paym__box { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (max-width: 600px) {
  .paym { grid-template-columns: 1fr; }
  .paym__box { flex-direction: row; align-items: center; gap: 10px; }
  .paym__box .ico { margin: 0; }
  .paym__box small { margin-left: auto; }
}

.summary { position: sticky; top: calc(var(--hdr) + 20px); border: 1px solid var(--line-2); background: var(--surface); padding: 22px; }
.summary h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.sum__items { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.sum__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.sum__item .qcat__ic { width: 38px; height: 38px; }
.sum__item .t { flex: 1; min-width: 0; }
.sum__item .t b { display: block; font-size: 14px; }
.sum__item .t small { font-size: 12px; color: var(--muted); }
.sum__item .price { font-size: calc(20px * var(--dp)); }
.coupon { margin: 14px 0 6px; }
.coupon__row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); padding-left: 12px; color: var(--muted); }
.coupon__row:focus-within { border-color: var(--lime); }
.coupon__row input { flex: 1; min-width: 0; background: none; border: 0; padding: 10px 0; font-size: 14px; text-transform: uppercase; color: var(--white); }
.coupon__row input::placeholder { text-transform: none; color: #5a5a5a; }
.coupon__row input:focus { outline: none; }
.coupon__row button { align-self: stretch; padding: 0 14px; background: var(--surface-2); border-left: 1px solid var(--line-2); font-weight: 700; font-size: 13px; color: var(--white); }
.coupon__row button:hover { background: var(--white); color: var(--black); }
.sum__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--text-2); }
.sum__row.disc { color: var(--lime); }
.sum__row.disc span:first-child { display: flex; align-items: center; gap: 6px; }
.sum__row.disc .ico { width: 14px; height: 14px; }
.sum__row.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; color: var(--white); font-weight: 700; font-size: 16px; }
.sum__row.total .price { font-size: calc(34px * var(--dp)); }
.field-check { margin: 12px 0 14px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lime); flex-shrink: 0; }
.check a { text-decoration: underline; text-underline-offset: 2px; }
.field-check.err .check { color: #FF6B6B; }
.pay-btn { width: 100%; justify-content: space-between; padding: 16px 18px; font-size: 15px; }
.pay-btn.loading { opacity: .7; pointer-events: none; }
.summary .note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.summary .note .ico { width: 14px; height: 14px; color: var(--lime); }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } .summary { position: static; } }

/* Confirmación */
.thanks { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 80px; }
.thanks__ok { width: 56px; height: 56px; display: grid; place-items: center; background: var(--lime); color: var(--black); margin-bottom: 18px; }
.thanks__ok .ico { width: 28px; height: 28px; stroke-width: 3; }
.thanks h1 { font-size: calc(clamp(36px, 4vw, 52px) * var(--ds)); margin-bottom: 12px; }
.thanks p { color: var(--text-2); font-size: 16px; max-width: 520px; }
.thanks p b { color: var(--white); }
.thanks .ctas { margin-top: 24px; }
@media (max-width: 860px) { .thanks { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; padding-bottom: 56px; } }

/* Acceso */
.auth { max-width: 440px; margin: 32px auto 80px; border: 1px solid var(--line-2); background: var(--surface); padding: 28px; }
.auth h2 { font-size: calc(34px * var(--ds)); margin-bottom: 8px; }
.auth > p { color: var(--text-2); font-size: 14.5px; margin-bottom: 20px; }
.auth .btn { width: 100%; justify-content: space-between; padding: 14px 18px; margin-top: 4px; }

/* Cuenta */
.subhead { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; margin-top: 28px; }
.subhead span { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.lic { font-family: var(--mono); font-size: 12px; color: var(--lime); background: var(--black); border: 1px solid var(--line); padding: 2px 6px; }
.copy { font-size: 12px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.copy:hover { color: var(--lime); }
.libitem small { flex-wrap: wrap; }
.empty-box { margin-top: 14px; padding: 28px; border: 1px dashed var(--line-2); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--text-2); }
.orders { margin-top: 12px; border: 1px solid var(--line); }
.order { display: grid; grid-template-columns: 110px 100px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background .15s; }
.order:last-child { border-bottom: 0; }
.order:hover { background: var(--surface-2); }
.order .mono { color: var(--lime); }
.order__items { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order .price { font-size: calc(20px * var(--dp)); }
.order .more { border: 0; }
@media (max-width: 760px) {
  .order { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .order__items { grid-column: 1 / -1; white-space: normal; }
  .order .more { display: none; }
}

/* Ya comprado */
.add-btn.owned { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.add-btn.owned:hover { border-color: var(--white); color: var(--white); }

/* Botón flotante de soporte */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--lime); color: var(--black); font-weight: 700; font-size: 14px;
  border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--white); transition: transform .15s, box-shadow .15s;
}
.fab .ico { width: 20px; height: 20px; }
.fab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--white); }
body.has-buybar .fab { bottom: 84px; }
body.lock .fab { display: none; }
@media (max-width: 600px) { .fab span { display: none; } .fab { padding: 12px; } }

/* ---------- Pedido por WhatsApp ---------- */
.field select { width: 100%; background: var(--black); border: 1px solid var(--line-2); padding: 12px 14px; font-size: 15px; cursor: pointer; }
.field select:focus { outline: none; border-color: var(--lime); }
.field.err select { border-color: #FF6B6B; }
.paym { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .paym { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .paym { grid-template-columns: 1fr; } }
.how { margin-top: 16px; padding: 14px 16px; background: var(--black); border: 1px solid var(--line); }
.how b { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.how b .ico { color: var(--lime); }
.how ol { padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; color: var(--text-2); }
.warn { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid #FF6B6B; color: #FF9B9B; font-size: 13px; }
.warn .ico { width: 15px; height: 15px; flex-shrink: 0; }
.warn code { font-family: var(--mono); font-size: 12px; color: var(--white); }
.pay-btn .ico:first-child { width: 18px; height: 18px; }
.pay-btn { gap: 10px; }
.pay-btn .ico:last-child { margin-left: auto; }
.thanks .sub-p { margin-top: 10px; font-size: 14.5px; }
.badge-pend { display: inline-block; padding: 2px 7px; background: #3A2E00; color: #FFD25A; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.pend { display: grid; gap: 10px; margin-top: 14px; }
.pend__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid #FFD25A; }
.pend__item h3 { font-size: 16px; font-weight: 700; margin: 6px 0 2px; }
.pend__item small { color: var(--muted); font-size: 13px; }
.toast.toast--err { background: #FF6B6B; }

/* ---------- Páginas legales ---------- */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding: 26px 0 72px; }
.prose { max-width: 760px; }
.prose > .warn { margin: 0 0 22px; }
.prose h2 { font-size: 18px; font-weight: 700; color: var(--white); margin: 30px 0 8px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.prose p + p { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 6px; }
.prose b { color: var(--white); }
.prose a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
mark.todo { background: #3A2E00; color: #FFD25A; padding: 0 5px; font-weight: 600; }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legal .side { position: static; min-width: 0; }
}

/* ---------- Barra de anuncio con cuenta regresiva ---------- */
.announce[hidden] { display: none; }
.announce { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.announce__time { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; background: var(--black); color: var(--lime); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.announce__time .ico { width: 13px; height: 13px; }

/* ---------- Packs ---------- */
.ic--pack { background: var(--black); color: var(--lime); border: 1px solid var(--lime); }
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.bcard { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--surface); border: 1px solid var(--line-2); border-top: 3px solid var(--lime); }
.bcard__head { display: flex; justify-content: space-between; align-items: center; }
.bcard__head .label { display: flex; align-items: center; gap: 6px; margin: 0; }
.bcard__head .label .ico { width: 14px; height: 14px; color: var(--lime); }
.bcard h3 { font-size: calc(34px * var(--ds)); }
.bcard > p { color: var(--text-2); font-size: 14.5px; }
.bitems { list-style: none; border-top: 1px solid var(--line); margin-top: 4px; }
.bitems li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bitems .qcat__ic { width: 30px; height: 30px; }
.bitems .qcat__ic .ico { width: 15px; height: 15px; }
.bitems a, .bitems li > span:nth-child(2) { flex: 1; font-weight: 600; }
.bitems a:hover { color: var(--lime); }
.bitems li > span:last-child { color: var(--muted); }
.bitems li.is-current { color: var(--lime); }
.bcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.bcard__foot .price { font-size: calc(32px * var(--dp)); }
.bcard__save { color: var(--lime); font-weight: 600; font-size: 13px; }

.packbox { margin-top: 16px; padding: 16px; border: 1px dashed var(--lime); background: #10150A; }
.packbox__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.packbox__head .ico { color: var(--lime); }
.packbox__head b { flex: 1; font-size: 15px; }
.packbox .bitems { border-top: 0; }
.packbox .bcard__foot .price { font-size: calc(26px * var(--dp)); }

.upsell--pack { display: block; }
.upsell--pack button { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 4px 8px; background: var(--black); color: var(--lime); font-family: var(--body); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.upsell--pack button .ico { width: 12px; height: 12px; }

/* ---------- Acciones del producto ---------- */
.pdp__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pdp__actions .btn { flex: 1; min-width: 180px; }

/* ---------- Galería ---------- */
.media__main { border: 1px solid var(--line); background: #000; }
.media__main .cover { border: 0; }
.media__img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.media__video { position: relative; aspect-ratio: 16/9; }
.media__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.media__thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4/3; padding: 4px; overflow: hidden; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--text-2); font-size: 11.5px; font-weight: 600; transition: border-color .15s; }
.media__thumb img { width: 100%; height: 100%; object-fit: cover; }
.media__thumb:hover { border-color: var(--white); }
.media__thumb.active { border-color: var(--lime); color: var(--lime); }

/* ---------- Opiniones ---------- */
.revs { display: grid; gap: 10px; margin-top: 12px; }
.rev { padding: 14px; background: var(--surface); border: 1px solid var(--line); }
.rev p { margin: 6px 0; color: var(--text-2); }
.rev small { color: var(--muted); font-weight: 600; }
.stars { display: flex; gap: 2px; }
.star .ico { width: 15px; height: 15px; color: var(--line-2); }
.star.on .ico { color: var(--lime); fill: var(--lime); }

/* ---------- Pago directo con link de Culqi ---------- */
.btn--card { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--card:hover { background: var(--lime); border-color: var(--lime); }
.buybox .btn--card { width: 100%; justify-content: space-between; margin-top: 8px; padding: 13px 18px; font-size: 14px; }
.buybox .btn--card .ico:last-child { margin-left: auto; }
.paylink-hint { margin-top: 8px; font-size: 12.5px; }
.paylink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.paylink .ico { width: 15px; height: 15px; }
.paylink:hover { color: var(--lime); }
.direct { margin: 14px 0 4px; padding: 14px; border: 1px solid var(--lime); background: #10150A; }
.direct b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.direct b .ico { color: var(--lime); }
.direct p { margin: 6px 0 12px; font-size: 13px; color: var(--text-2); }
.direct .btn { width: 100%; justify-content: space-between; }
.direct .or { display: block; margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* =========================================================
   Área de cliente: entrar, cuenta, reproductor y admin
   ========================================================= */

/* Entrar con código */
.auth__ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--lime); color: var(--black); margin-bottom: 16px; }
.auth__ic .ico { width: 22px; height: 22px; }
.auth form .btn { width: 100%; justify-content: space-between; padding: 14px 18px; margin-top: 4px; }
.otp-input { font-family: var(--mono) !important; font-size: 26px !important; letter-spacing: .5em; text-align: center; }
.otp-demo { font-family: var(--mono); color: var(--lime); font-size: 15px; letter-spacing: .15em; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__google { width: 100%; }
.auth__note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.auth__links { display: flex; justify-content: space-between; margin-top: 16px; }
.auth__links button { font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.auth__links button:hover { color: var(--lime); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Entrar: tarjeta a la izquierda, instrucciones a la derecha */
.join { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 400px); gap: 64px; justify-content: center; align-items: center; margin: 56px auto 104px; }
.join__side h2 { font-size: calc(46px * var(--ds)); margin-bottom: 12px; }
.join__side > p { color: var(--text-2); font-size: 15px; margin-bottom: 22px; }
.join__side form .btn, .join__side .auth__google { width: 100%; justify-content: space-between; padding: 14px 18px; margin-top: 4px; }
.join__side .auth__google { justify-content: center; }
.join__side .field em.opt { font-style: normal; color: var(--muted); font-weight: 500; }
.join__side .field-check, .join__side > .check { margin: 6px 0 10px; }
.join__side > .check { display: flex; }
.phone { display: flex; align-items: stretch; border: 1px solid var(--line-2); background: var(--surface); }
.phone:focus-within { border-color: var(--lime); }
.phone__cc { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid var(--line-2); font-family: var(--mono); font-size: 14px; color: var(--text-2); min-width: 58px; }
.phone input { flex: 1; min-width: 0; border: 0 !important; background: transparent; padding: 12px; }
.phone input:focus { outline: none; }
.field.err .phone { border-color: #FF6B6B; }
.join__side > .join__msg { min-height: 20px; margin-top: 14px; font-size: 13.5px; color: #FF6B6B; }

/* Tarjeta de socio (medidas en cqw: 1cqw = 1% del ancho de la tarjeta) */
.club { position: relative; container-type: inline-size; perspective: 1400px; padding: 6% 0 10%; }
.club__card {
  --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 20%; --flip: 0deg;
  position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));
  transition: transform .18s ease-out;
}
.club__face {
  position: absolute; inset: 0; border-radius: 4.2cqw; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(.1px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    radial-gradient(130% 90% at 0% 0%, #2b2c2f 0%, #121214 50%, #060607 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6);
}
.club__back { transform: rotateY(180deg) translateZ(.1px); }

/* brillo del puntero y foil holográfico */
/* reflejo de metal pulido: una banda blanca suave que se desplaza con el puntero, más un halo donde apunta */
.club__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.075), rgba(255,255,255,0) 40%); }
.club__foil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.035) 42%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.035) 58%, transparent 68%) no-repeat;
  background-size: 260% 100%; background-position: calc(100% - var(--mx)) 0; }
.club__sweep { position: absolute; inset: -20%; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 56%, transparent 62%); transform: translateX(-60%); }

/* frente */
.club__logo { position: absolute; left: 6.5%; top: 8.6%; width: 34%; height: auto; filter: drop-shadow(0 .24cqw .45cqw rgba(0,0,0,.35)); opacity: .96; }
.club__tier { position: absolute; right: 6.5%; top: 10.5%; display: flex; align-items: center; gap: 1.4cqw; font-family: var(--mono); font-size: 2.6cqw; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: #b9bdc2; }
.club__tier b { color: var(--lime); letter-spacing: -.1em; font-size: 3.2cqw; }
.club__chip { position: absolute; left: 7.5%; top: 37%; width: 12.5%; aspect-ratio: 1.3; border-radius: 1.6cqw;
  background:
    linear-gradient(90deg, transparent 32%, rgba(80,58,10,.55) 32% 34%, transparent 34% 66%, rgba(80,58,10,.55) 66% 68%, transparent 68%),
    linear-gradient(0deg, transparent 30%, rgba(80,58,10,.55) 30% 32%, transparent 32% 68%, rgba(80,58,10,.55) 68% 70%, transparent 70%),
    linear-gradient(135deg, #f7e7ad, #d6b257 40%, #a8822c 70%, #e9cf82);
  box-shadow: inset 0 0 0 1px rgba(90,64,12,.6), 0 .3cqw .6cqw rgba(0,0,0,.5); }
.club__nfc { position: absolute; left: 22.5%; top: 39.5%; width: 5.5%; fill: none; stroke: #8f9398; stroke-width: 1.6; stroke-linecap: round; }
.club__num, .club__name, .club__mail, .club__since, .club__state, .club__geo {
  position: absolute; font-family: var(--mono); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, #ffffff 0%, #cfd2d6 45%, #8d9196 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .25cqw 0 rgba(0,0,0,.85)) drop-shadow(0 -.12cqw 0 rgba(255,255,255,.12));
}
.club__num { left: 7.5%; top: 59%; font-size: 5.1cqw; letter-spacing: .1em; }
.club__since { right: 6.5%; top: 59.5%; font-size: 1.9cqw; line-height: 1.25; text-align: right; letter-spacing: .14em; }
.club__since b { font-size: 2.6cqw; }
.club__name { left: 7.5%; bottom: 15%; max-width: 62%; overflow: hidden; text-overflow: ellipsis; font-size: 4.2cqw; letter-spacing: .1em; }
.club__mail { left: 7.5%; bottom: 8.5%; max-width: 62%; overflow: hidden; text-overflow: ellipsis; font-size: 2.4cqw; letter-spacing: .04em; text-transform: none; }
.club__geo { right: 6.5%; bottom: 16%; font-size: 2.2cqw; letter-spacing: .16em; }
.club__state { right: 6.5%; bottom: 9%; display: flex; align-items: center; gap: 1.4cqw; font-size: 2.3cqw; letter-spacing: .2em; filter: none; background: none; color: #8d9196; }
.club__state i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #3a3c40; box-shadow: inset 0 0 0 .3cqw #1a1b1d; transition: background .3s, box-shadow .3s; }

/* reverso */
.club__stripe { position: absolute; left: 0; right: 0; top: 11%; height: 17%; background: linear-gradient(180deg, #000 0%, #17181a 40%, #0a0a0b 70%, #000 100%); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
@keyframes blink { 50% { opacity: 0; } }
/* reverso: datos grabados en plateado, logo lima y una línea legal */
.club__bk-label { position: absolute; left: 7.5%; top: 41%; font-family: var(--mono); font-size: 2.1cqw; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #7d8187; }
.club__bk-name, .club__bk-meta {
  position: absolute; left: 7.5%; font-family: var(--mono); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, #ffffff 0%, #cfd2d6 45%, #8d9196 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .25cqw 0 rgba(0,0,0,.85)) drop-shadow(0 -.12cqw 0 rgba(255,255,255,.12));
}
.club__bk-name { top: 48%; font-size: 4.4cqw; letter-spacing: .1em; max-width: 86%; overflow: hidden; text-overflow: ellipsis; }
.club__bk-meta { top: 61%; display: flex; align-items: center; gap: 2cqw; font-size: 2.3cqw; letter-spacing: .14em; }
.club__bk-meta i { width: 1cqw; height: 1cqw; background: var(--lime); flex-shrink: 0; }
.club__bk-logo { position: absolute; right: 6.4%; bottom: 8.5%; width: 28%; height: auto; opacity: .18; filter: none; }
.club__fine { position: absolute; left: 7.5%; right: 34%; bottom: 11%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 1.9cqw; letter-spacing: .12em; text-transform: uppercase; color: #5f6368; }

/* sombra en el piso */
.club__shadow { position: absolute; left: 8%; right: 8%; bottom: -1%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.72), rgba(0,0,0,.28) 45%, transparent 75%); filter: blur(10px); transform: translateX(calc(var(--ry, 0deg) / 1deg * -.35%)); }

/* toque: flota sola */
@media (hover: none) { .reveal.is-landed:not(.is-leaving) .club__card { animation: club-float 6s ease-in-out infinite; } }
@keyframes club-float { 0%, 100% { transform: rotateX(4deg) rotateY(-8deg); } 50% { transform: rotateX(-3deg) rotateY(8deg) translateY(-1.5%); } }


/* estados */
.club.is-on .club__state { color: var(--lime); }
.club.is-on .club__state i { background: radial-gradient(circle at 35% 30%, #f4ffd1, #C6FF00 45%, #5c7a00); box-shadow: 0 0 2.6cqw #C6FF00; }
.club.is-shine .club__sweep { animation: club-sweep 1.1s ease-in-out forwards; }
@keyframes club-sweep { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(60%); } }

.club__card[data-reveal-go], .club__card[data-card-flip] { cursor: pointer; }
/* volteo de la tarjeta en el perfil */
.club--profile .club__card { transition: transform .8s cubic-bezier(.6, 0, .25, 1); }
.club__card.is-flipped { --flip: 180deg; }
/* miniatura en la barra lateral de la cuenta */
.club--mini { padding: 0; perspective: none; }
.club--mini .club__shadow, .club--mini .club__sweep { display: none; }
.acc__card { display: block; padding: 14px; border-bottom: 1px solid var(--line); transition: background .15s; }
.acc__card:hover { background: var(--surface-2); }
.acc__card:hover .club__card { transform: translateY(-2px); }

/* regalo de bienvenida: cupón para copiar */
.gift { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px dashed rgba(198,255,0,.55); background: rgba(198,255,0,.05); text-align: left; }
.gift__ic { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: var(--lime); color: var(--black); }
.gift__t { flex: 1; min-width: 0; }
.gift__t b { display: block; font-size: 15px; }
.gift__t small { color: var(--text-2); font-size: 13px; }
.gift__code { display: grid; justify-items: center; gap: 2px; padding: 8px 12px; border: 1px solid var(--lime); font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--lime); transition: background .15s, color .15s; }
.gift__code span { font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gift__code:hover { background: var(--lime); color: var(--black); }
.gift__code:hover span { color: var(--black); }
.reveal__gift { margin: 4px auto 18px; max-width: 440px; opacity: 0; transform: translateY(12px); transition: opacity .5s .25s, transform .5s .25s var(--ease); }
.reveal.is-landed .reveal__gift { opacity: 1; transform: none; }
.empty-box .gift { max-width: 460px; margin: 4px auto 16px; }

/* tarjeta en el perfil */
.mycard { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 28px; padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.mycard__stage .club { padding: 2% 0 8%; }
.mycard__side p { color: var(--text-2); font-size: 14px; margin: 6px 0 16px; }
.mycard__act { display: flex; flex-wrap: wrap; gap: 10px; }

/* compartir en historias */
.reveal__share { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; padding: 10px 16px; border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; color: var(--white); opacity: 0; transition: opacity .5s .3s, border-color .15s, background .15s; }
.reveal__share .ico { width: 16px; height: 16px; color: var(--lime); }
.reveal__share:hover { border-color: var(--lime); }
.reveal.is-landed .reveal__share { opacity: 1; }
.reveal { display: flex; flex-direction: column; align-items: center; }
.reveal__stage { width: 100%; }
.story { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; background: rgba(8,8,8,.95); animation: story-in .2s ease-out; }
@keyframes story-in { from { opacity: 0; } }
.story__box { position: relative; display: grid; grid-template-columns: auto minmax(0, 320px); gap: 32px; align-items: center; max-height: calc(100vh - 40px); }
.story__x { position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--black); color: var(--white); z-index: 2; }
.story__x:hover { border-color: var(--white); }
.story__prev { position: relative; height: min(76vh, 680px); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line-2); }
.story__prev img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .2s; }
.story__load { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity .2s; }
.story.is-busy .story__prev img { opacity: .35; }
.story.is-busy .story__load { opacity: 1; }
.story__side h3 { font-size: calc(40px * var(--ds)); margin: 4px 0 10px; }
.story__side > p { color: var(--text-2); font-size: 14px; margin-bottom: 14px; }
.story__side .btn { width: 100%; justify-content: center; margin-top: 10px; }
.seg.seg--sm { margin-bottom: 8px; grid-template-columns: repeat(3, 1fr); }
.seg.seg--two { grid-template-columns: 1fr 1fr; }
.seg--sm button { padding: 9px 10px; }
.story__tip { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.story__tip b { color: var(--text-2); }
@media (max-width: 700px) {
  .story { align-items: start; overflow-y: auto; background: #0b0b0b; }
  .story__box { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
  .story__prev { height: 58vh; }
  .story__side { width: 100%; max-width: 360px; }
  .story__side h3 { font-size: calc(30px * var(--ds)); }
}

/* corrector de email */
.email-fix { display: block; margin-top: 6px; font-size: 13px; color: var(--text-2); text-align: left; }
.email-fix b { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.email-fix:hover b { color: var(--white); }

/* aviso del regalo en el checkout */
.coupon__gift { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border: 1px dashed rgba(198,255,0,.55); background: rgba(198,255,0,.05); font-size: 13px; text-align: left; color: var(--text-2); }
.coupon__gift .ico { color: var(--lime); width: 16px; height: 16px; flex-shrink: 0; }
.coupon__gift span { flex: 1; }
.coupon__gift-code { font-family: var(--mono); font-size: 12px; color: var(--lime); white-space: nowrap; }
.coupon__gift:hover { border-color: var(--lime); }
.club__card:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: 4.2cqw; }

/* columna izquierda del registro: silueta de la tarjeta que vas a recibir */
.join__aside { display: grid; gap: 26px; }
.ghostcard {
  position: relative; aspect-ratio: 1.586; border-radius: 18px; border: 1.5px dashed var(--line-2); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px;
  background: linear-gradient(110deg, #101012 30%, #19191c 45%, #101012 60%) 0 0 / 260% 100%; animation: ghost-shimmer 2.6s linear infinite;
}
@keyframes ghost-shimmer { to { background-position: -160% 0; } }
.ghostcard img { position: absolute; left: 7%; top: 10%; width: 26%; height: auto; opacity: .14; filter: grayscale(1); }
.ghostcard__lock { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--lime); margin-bottom: 4px; }
.ghostcard b { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(26px * var(--ds)); line-height: 1; }
.ghostcard small { color: var(--muted); font-size: 13px; }
.join__perks { list-style: none; display: grid; gap: 10px; color: var(--text-2); font-size: 14px; }
.join__perks li { display: flex; align-items: center; gap: 10px; }
.join__perks .ico { color: var(--lime); width: 16px; height: 16px; }

/* pestañas Crear cuenta / Ya tengo cuenta */
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); margin-bottom: 24px; }
.seg button { padding: 11px 10px; font-weight: 700; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
.seg button:hover { color: var(--white); }
.seg button.on { background: var(--white); color: var(--black); }

/* código de 6 dígitos */
.otp6 { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0 4px; cursor: text; }
.otp6 input { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; caret-color: transparent; }
.otp6__cell { height: 64px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line-2); font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--white); transition: border-color .15s, color .15s; }
.otp6__cell.on { border-color: var(--text-2); animation: otp-pop .16s ease-out; }
@keyframes otp-pop { from { transform: scale(1.12); } }
.otp6:focus-within .otp6__cell.next { border-color: var(--lime); }
.otp6:focus-within .otp6__cell.next::after { content: ""; width: 2px; height: 26px; background: var(--lime); animation: blink 1s steps(1) infinite; }
.otp6.is-wrong { animation: otp-shake .4s; }
.otp6.is-wrong .otp6__cell { border-color: #FF6B6B; color: #FF6B6B; }
@keyframes otp-shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.otp6.is-ok .otp6__cell { border-color: var(--lime); color: var(--lime); }

/* tarjeta creada: aparece girando 360°, aterriza, confeti y barrido de luz */
.reveal { max-width: 560px; margin: 0 auto; padding: 44px 0 96px; text-align: center; }
.reveal__kicker, .reveal__title, .reveal__cta { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s var(--ease); }
.reveal__title { font-size: calc(clamp(36px, 6vw, 60px) * var(--ds)); margin-top: 6px; transition-delay: .08s; }
.reveal__cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); transition-delay: .35s; }
.reveal__cta .ico { width: 16px; height: 16px; }
.reveal.is-landed .reveal__kicker, .reveal.is-landed .reveal__title, .reveal.is-landed .reveal__cta { opacity: 1; transform: none; }
.reveal.is-landed:not(.is-leaving) .reveal__cta { animation: cta-pulse 1.8s .9s ease-in-out infinite; }
@keyframes cta-pulse { 50% { opacity: .45; } }
.reveal__stage { margin: 18px auto 0; text-align: left; }
.reveal.is-spinning .club__card { animation: club-spin 1.6s cubic-bezier(.2, .75, .25, 1) both; }
/* sin opacity en la tarjeta: aplanaría el 3D y el canto taparía la cara (el fundido va en el contenedor) */
.reveal.is-spinning .reveal__stage { animation: club-fade .25s ease-out both; }
@keyframes club-fade { from { opacity: 0; } }
@keyframes club-spin {
  0% { transform: translateY(14%) scale(.3) rotateY(-40deg); }
  78% { transform: translateY(-2%) scale(1.05) rotateY(360deg); }
  100% { transform: translateY(0) scale(1) rotateY(360deg); }
}
.reveal.is-leaving .club__card { animation: club-out .8s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes club-out { to { transform: rotateY(360deg) scale(1.3); } }
.reveal.is-leaving .reveal__cta, .reveal.is-leaving .reveal__kicker { opacity: 0; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 450; pointer-events: none; }

/* entrar: la luz lima sale de la tarjeta y llena la pantalla */
.club-fx { position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 45%, rgba(198,255,0,.16), rgba(198,255,0,0) 70%), #0b0b0b;
  clip-path: circle(var(--r0) at var(--cx) var(--cy)); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), opacity .5s; }
.club-fx.go { clip-path: circle(150vmax at var(--cx) var(--cy)); }
.club-fx.out { opacity: 0; }
.club-fx__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 0; transform: scale(.7); transition: opacity .5s .2s, transform .9s .1s cubic-bezier(.2, .8, .2, 1); }
.club-fx.go .club-fx__in { opacity: 1; transform: none; }
.club-fx__in img { width: min(420px, 70vw); height: auto; filter: drop-shadow(0 0 30px rgba(198,255,0,.45)); }
.club-fx__in b { font-size: calc(clamp(32px, 6vw, 64px) * var(--ds)); color: var(--white); text-align: center; padding: 0 20px; }
.club-fx__in small { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: -8px; }

@media (max-width: 860px) {
  .mycard { grid-template-columns: minmax(0, 1fr); }
  .acc__card { max-width: 320px; }
  .gift { flex-wrap: wrap; }
  .join { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 16px auto 64px; max-width: 460px; }
  .join__aside .ghostcard { max-width: 340px; width: 100%; margin: 0 auto; }
  .join__perks { display: none; }
  .otp6__cell { height: 54px; font-size: 24px; }
  .reveal { padding-top: 24px; }
  .join__side h2 { font-size: calc(38px * var(--ds)); }
}

/* Estructura de la cuenta */
.acc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding: 22px 0 72px; align-items: start; }
.acc__side { position: sticky; top: calc(var(--hdr) + 20px); border: 1px solid var(--line); background: var(--surface); }
.acc__user { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.acc__user b { display: block; font-size: 14px; }
.acc__user small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.avatar { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: var(--lime); color: var(--black); font-weight: 800; font-size: 14px; }
.acc__side nav { display: grid; }
.acc__side nav a, .acc__side nav button { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--text-2); text-align: left; transition: background .15s, color .15s; }
.acc__side nav a:hover, .acc__side nav button:hover { background: var(--surface-2); color: var(--white); }
.acc__side nav a.active { background: var(--lime); color: var(--black); }
.acc__side nav .badge-pend { margin-left: auto; }
.acc__side nav button { border-bottom: 0; width: 100%; }
.acc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.acc__head h1 { font-size: calc(clamp(32px, 3.6vw, 44px) * var(--ds)); margin-top: 6px; }
.acc__head p { color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) {
  .acc { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .acc__side { position: static; }
  .acc__side nav { grid-auto-flow: column; overflow-x: auto; }
  .acc__side nav a, .acc__side nav button { border-bottom: 0; border-right: 1px solid var(--line); white-space: nowrap; }
}

.pend-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #FFD25A; background: #1E1A08; color: #FFE7A0; font-size: 14px; }
.pend-banner span { flex: 1; }
.pend-banner .ico { color: #FFD25A; }

/* Biblioteca */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.lcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.lcard:hover { border-color: var(--line-2); }
.lcard__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.lcard__body h3 { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(22px * var(--ds)); line-height: 1; }
.lcard__body small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.lcard__body small .ico { width: 14px; height: 14px; }
.lcard .prog { max-width: none; margin-top: 2px; }
.lcard__act { margin-top: auto; padding-top: 10px; }
.lcard__act .btn { width: 100%; justify-content: space-between; }

/* Reproductor de cursos */
.player { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding: 18px 0 72px; align-items: start; }
.player__video { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--line); }
.player__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; container-type: inline-size; background: repeating-linear-gradient(-45deg, #0d0d0d 0 14px, #000 14px 28px); }
.video-ph .art-play { width: 72px; height: 72px; background: var(--lime); }
.video-ph .art-play::after { border-left: 22px solid var(--black); border-top-width: 13px; border-bottom-width: 13px; margin-left: 6px; }
.video-ph b { font-size: 16px; }
.video-ph small { max-width: 380px; color: var(--muted); font-size: 13px; }
.player__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
.player__bar .label { margin-bottom: 4px; }
.player__bar h1 { font-size: 24px; font-weight: 700; }
.player__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.flip { display: inline-flex; transform: scaleX(-1); }
.player__info { padding-top: 18px; }
.player__info h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; }
.player__info p { color: var(--text-2); }
.player__info .btn { margin-top: 16px; }
.player__side { position: sticky; top: calc(var(--hdr) + 20px); border: 1px solid var(--line); background: var(--surface); max-height: calc(100vh - var(--hdr) - 40px); display: flex; flex-direction: column; }
.pside__head { padding: 16px; border-bottom: 1px solid var(--line); }
.pside__head b { display: block; font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(22px * var(--ds)); line-height: 1; }
.pside__head small { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }
.pside__head .prog { max-width: none; }
.pside__list { overflow-y: auto; }
.pmod__title { padding: 12px 16px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lime); background: var(--black); border-bottom: 1px solid var(--line); }
.plesson { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; color: var(--text-2); transition: background .15s; }
.plesson:hover { background: var(--surface-2); color: var(--white); }
.plesson.current { background: #161D00; color: var(--white); box-shadow: inset 3px 0 0 var(--lime); }
.plesson__check { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border: 1.5px solid var(--line-2); }
.plesson.done .plesson__check { background: var(--lime); border-color: var(--lime); color: var(--black); }
.plesson__check .ico { width: 13px; height: 13px; stroke-width: 3; }
.plesson__t { flex: 1; }
.plesson small { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
@media (max-width: 960px) {
  .player { grid-template-columns: minmax(0, 1fr); }
  .player__side { position: static; max-height: none; }
}

/* Fichas de plugin / app */
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.panel { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.panel h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.panel h3 .ico { color: var(--lime); }
.panel p { color: var(--text-2); font-size: 14px; }
.panel .log { width: 100%; }
.panel .hint { font-size: 12.5px; }
.lic-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lic--big { font-size: 15px; padding: 6px 10px; }
.devices { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.devices .ico { color: var(--muted); }
.status { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status--ok { background: #1A2600; color: var(--lime); }

/* Pedidos */
.olist { display: grid; gap: 10px; }
.orow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px; background: var(--surface); border: 1px solid var(--line); }
.orow__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.orow__top .mono { color: var(--lime); }
.orow__main b { display: block; font-size: 15px; }
.orow__main small { color: var(--muted); font-size: 13px; }
.orow .price { font-size: calc(26px * var(--dp)); }
.orow__act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .orow { grid-template-columns: 1fr; } .orow__act { justify-content: flex-start; } }

/* Perfil */
.profile { max-width: 520px; align-items: stretch; }
.profile .field input:disabled { opacity: .6; cursor: not-allowed; }
.profile .btn { align-self: flex-start; margin-top: 6px; }

/* Panel de administrador */
.admin { padding-bottom: 72px; }
.admin .acc__head { margin-top: 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.kpis > div { padding: 16px; background: var(--surface); border: 1px solid var(--line); }
.kpis span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpis span .ico { width: 15px; height: 15px; color: var(--lime); }
.kpis b { display: block; font-family: var(--display); font-weight: var(--dw); font-size: calc(38px * var(--dp)); line-height: 1; margin: 8px 0 2px; }
.kpis small { color: var(--muted); font-size: 12.5px; }
.admin__tabs { margin-bottom: 14px; }
.atable { border: 1px solid var(--line); }
.atable__row { display: grid; grid-template-columns: 130px 1.2fr 1.4fr 90px 120px 200px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.atable__row:last-child { border-bottom: 0; }
.atable__row > span { min-width: 0; }
.atable__row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.atable__row .mono { color: var(--lime); }
.atable__row .price { font-size: calc(22px * var(--dp)); }
.atable__head { background: var(--surface); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.atable__act { display: flex; justify-content: flex-end; }
.atable__act .btn { padding: 9px 12px; font-size: 13px; }
@media (max-width: 1000px) {
  .kpis { grid-template-columns: 1fr; }
  .atable__head { display: none; }
  .atable__row { grid-template-columns: 1fr 1fr; }
  .atable__act { grid-column: 1 / -1; justify-content: flex-start; }
}
.admin__tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); }
.admin__tabs button { display: flex; align-items: center; gap: 6px; padding: 9px 16px; font-weight: 600; font-size: 14px; color: var(--text-2); border-right: 1px solid var(--line-2); transition: background .15s, color .15s; }
.admin__tabs button:last-child { border-right: 0; }
.admin__tabs button:hover { background: var(--surface-2); color: var(--white); }
.admin__tabs button.active { background: var(--lime); color: var(--black); }
.admin__tabs .n { min-width: 20px; padding: 0 5px; background: rgba(255,255,255,.08); font-size: 12px; text-align: center; }
.admin__tabs button.active .n { background: rgba(0,0,0,.15); }

/* =========================================================
   Pro: guía, para quién es, barra fija, certificado, admin
   ========================================================= */

/* Guía "¿Qué quieres lograr?" */
.guide { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 44px; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide h2 { font-size: calc(clamp(32px, 3.6vw, 44px) * var(--ds)); margin-bottom: 18px; }
.goals { display: grid; gap: 8px; }
.goal { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; background: var(--surface); border: 1px solid var(--line-2); transition: border-color .15s, background .15s; }
.goal:hover { border-color: var(--white); }
.goal.active { border-color: var(--lime); background: #10150A; }
.goal__n { width: 46px; flex-shrink: 0; font-family: var(--display); font-weight: var(--dw); font-size: calc(36px * var(--ds)); line-height: var(--dlh); letter-spacing: -.03em; color: #4a4a4a; transition: color .15s; }
.goal:hover .goal__n { color: var(--text-2); }
.goal.active .goal__n { color: var(--lime); }
.goal__t { flex: 1; }
.goal__t b { display: block; font-size: 15px; }
.goal__t small { color: var(--muted); font-size: 13px; }
.goal > .ico { color: var(--muted); }
.goal.active > .ico { color: var(--lime); }
.guide__right .label { margin-bottom: 10px; }
.guide__right .card, .guide__right .bcard { max-width: 460px; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } }

/* Producto: para quién es + FAQ propio */
.feat--who .ico { color: var(--lime); stroke-width: 2; }
.pfaq details { border-bottom: 1px solid var(--line); }
.pfaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; font-weight: 600; }
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary:hover { color: var(--lime); }
.pfaq summary .ico { color: var(--muted); transition: transform .2s; }
.pfaq details[open] summary .ico { transform: rotate(45deg); color: var(--lime); }
.pfaq details p { padding: 0 0 14px; color: var(--text-2); }

/* Barra de compra fija (también en computadora) */
.buybar { display: block; padding: 0; }
.buybar__in { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.buybar__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.buybar__name .qcat__ic { width: 38px; height: 38px; }
.buybar__name b { display: block; font-size: 15px; }
.buybar__name small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .price { font-size: calc(28px * var(--dp)); }
.buybar .btn { flex: none; }
@media (max-width: 860px) {
  .buybar__name { display: none; }
  .buybar .btn { flex: 1; justify-content: space-between; }
}

/* Opiniones en la portada */
.revs--home { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.rev small a { color: var(--lime); }

/* Recibo descargable */
.receipt-wrap { flex-direction: column; gap: 18px; }
.receipt-print { padding: 9px 14px; font-size: 13px; }

/* Certificado */
.cert-banner { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; background: var(--lime); color: var(--black); font-weight: 700; font-size: 14px; }
.cert-banner span { flex: 1; font-weight: 500; }
.cert-banner b { font-weight: 800; }
.cert-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.cert {
  position: relative; max-width: 900px; margin: 0 auto 72px; padding: 56px 56px 44px; text-align: center;
  background: var(--white); color: var(--black); border: 10px solid var(--black); outline: 2px solid var(--lime); outline-offset: -18px;
}
.cert__top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cert__top .logo__mm { font-size: 26px; }
.cert__logo { height: 84px; width: auto; }
.cert__brand { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(22px * var(--ds)); }
.cert__label { display: inline-block; margin: 28px 0 18px; padding: 5px 12px; background: var(--black); color: var(--lime); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.cert__intro { color: #555; font-size: 15px; }
.cert__name { margin: 8px 0 14px; font-family: var(--display); font-weight: var(--dw); font-size: calc(clamp(36px, 5vw, 58px) * var(--ds)); line-height: 1; }
.cert__course { margin: 8px 0 6px; font-size: calc(clamp(30px, 4vw, 46px) * var(--ds)); }
.cert__meta { color: #666; font-size: 14px; }
.cert__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--black); }
.cert__foot b { display: block; font-size: 15px; }
.cert__foot small { color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.cert__sign b { font-family: var(--display); font-weight: var(--dw); font-size: calc(22px * var(--ds)); text-transform: uppercase; }
@media (max-width: 600px) { .cert { padding: 36px 20px 28px; } .cert__foot { grid-template-columns: 1fr; } }

/* Admin: herramientas, buscador y filas ocultas */
.admin__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.admin__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.admin__bar .admin__tabs { margin: 0; }
.admin__search { display: flex; align-items: center; gap: 8px; min-width: 280px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.admin__search:focus-within { border-color: var(--lime); }
.admin__search input { flex: 1; min-width: 0; padding: 10px 0; background: none; border: 0; font-size: 14px; color: var(--white); }
.admin__search input:focus { outline: none; }
.atable__row[hidden] { display: none; }
@media (max-width: 600px) { .admin__search { min-width: 0; width: 100%; } }

/* Impresión: solo el recibo o el certificado */
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .printable, .printable * { visibility: visible !important; }
  .printable { position: absolute; left: 0; top: 0; right: 0; margin: 0 auto !important; transform: none !important; box-shadow: none !important; }
  .receipt.printable { width: 320px; }
  .cert.printable { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* El aviso flotante queda totalmente oculto cuando no se muestra (también con la barra de compra visible) */
.toast { visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
.toast.show { visibility: visible; transition: transform .3s var(--ease), visibility 0s; }

/* Marca /// de los títulos de sección (reemplaza los iconos en cuadro) */
.shelf__title { align-items: flex-start; gap: 14px; }
.shelf__mark { flex-shrink: 0; font-family: var(--display); font-weight: var(--dw); font-size: calc(32px * var(--ds)); line-height: var(--dlh); letter-spacing: -.12em; color: var(--lime); }

/* Estilo A: bloque lima sólido con icono negro (guía, títulos de sección, categorías) */
.goal__ic, .sec-ic { flex-shrink: 0; display: grid; place-items: center; background: var(--lime); color: var(--black); }
.goal__ic { width: 44px; height: 44px; }
.goal__ic .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.sec-ic { width: 46px; height: 46px; margin-top: 2px; }
.sec-ic .ico { width: 24px; height: 24px; stroke-width: 2.2; }
.shelf__title { align-items: center; }

/* ---------- Foto real del producto ---------- */
.cover--photo { position: relative; overflow: hidden; }
.cover--photo::before, .cover--photo::after { display: none; }
.cover--photo > img { transition: transform .4s var(--ease); }
.card:hover .cover--photo > img, .spot__media:hover .cover--photo > img { transform: scale(1.04); }
.cover--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover--photo .cover__top, .cover--photo .cover__name { position: relative; z-index: 1; }

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 8px 0 24px; }
.contact__item { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 22px; background: var(--surface); }
.contact__item .ico { grid-row: span 2; width: 26px; height: 26px; color: var(--lime); }
.contact__item span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.contact__item b { font-size: 17px; overflow-wrap: anywhere; }
a.contact__item[href]:hover b { color: var(--lime); }
.contact__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-bottom: 72px; color: var(--text-2); font-size: 14px; }
.contact__legal .ft__lr { margin-top: 0; }
.contact__nets { display: flex; gap: 16px; }
.contact__nets a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Libro de Reclamaciones ---------- */
.lr-head { display: flex; align-items: center; gap: 18px; margin: 18px 0 26px; }
.lr-head h1 { font-size: calc(clamp(38px, 6vw, 60px) * var(--ds)); line-height: var(--dlh); }
.lr-head p { color: var(--text-2); max-width: 640px; margin-top: 8px; font-size: 15px; }
.lr-badge { display: grid; place-items: center; width: 74px; height: 74px; flex-shrink: 0; background: var(--lime); color: var(--black); }
.lr-badge .ico { width: 40px; height: 40px; }
.lr { max-width: 860px; padding-bottom: 72px; }
.lr-meta { display: grid; grid-template-columns: auto auto 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 16px; }
.lr-meta > div { display: grid; gap: 4px; padding: 14px 18px; background: var(--black); }
.lr-meta span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lr-meta b { font-size: 16px; }
.lr-meta small { color: var(--text-2); font-size: 13px; }
.field textarea { width: 100%; background: var(--black); border: 1px solid var(--line-2); padding: 12px 14px; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 110px; transition: border-color .15s; }
.field textarea::placeholder { color: #5a5a5a; }
.field textarea:focus { outline: none; border-color: var(--lime); }
.field.err textarea { border-color: #FF6B6B; }
.lr-minor { margin: 2px 0 12px; }
.lr-seg { margin-bottom: 16px; max-width: 320px; }
.lr-hint { margin: 0; align-self: center; color: var(--muted); font-size: 13px; }
.lr-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.lr-type { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line-2); cursor: pointer; transition: border-color .15s; }
.lr-type input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lime); flex-shrink: 0; }
.lr-type span { display: grid; gap: 4px; }
.lr-type b { font-size: 15px; }
.lr-type small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.lr-type:has(input:checked) { border-color: var(--lime); }
.lr-end .field-check { margin-bottom: 14px; }
.lr-legend { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px 12px 30px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 700px) {
  .lr-head { align-items: flex-start; }
  .lr-badge { width: 54px; height: 54px; } .lr-badge .ico { width: 30px; height: 30px; }
  .lr-meta { grid-template-columns: 1fr 1fr; } .lr-meta__seller { grid-column: 1 / -1; }
  .lr-types { grid-template-columns: 1fr; }
}

/* constancia (hoja en papel) */
.lr-done { max-width: 860px; padding: 8px 0 72px; }
.lr-ok { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px; background: var(--lime); color: var(--black); }
.lr-ok .ico { width: 24px; height: 24px; flex-shrink: 0; }
.lr-ok div { display: grid; gap: 2px; }
.lr-ok b { font-size: 16px; }
.lr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.lr-sheet { background: #f5f4ec; color: #111; padding: clamp(18px, 4vw, 40px); font-size: 14px; }
.lr-sheet header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid #111; }
.lr-sheet header img { width: 130px; height: auto; }
.lr-sheet header div { text-align: right; }
.lr-sheet h2 { font-family: var(--display); font-size: calc(28px * var(--ds)); font-weight: var(--dw); text-transform: uppercase; }
.lr-sheet header p { font-size: 13px; color: #444; }
.lr-sheet section { padding: 16px 0; border-bottom: 1px solid #cfcdc2; }
.lr-sheet h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.lr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.lr-grid .full { grid-column: 1 / -1; }
.lr-grid span { display: block; font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: .05em; }
.lr-grid b { font-weight: 600; overflow-wrap: anywhere; }
.lr-grid p { white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.lr-sheet footer { padding-top: 14px; display: grid; gap: 6px; font-size: 12px; color: #555; line-height: 1.5; }
.lr-sheet mark.todo { background: #ffe58a; color: #111; }
@media (max-width: 600px) { .lr-grid { grid-template-columns: 1fr; } .lr-sheet header { flex-direction: column; align-items: flex-start; } .lr-sheet header div { text-align: left; } }
@media print {
  body * { visibility: hidden !important; }
  .lr-sheet, .lr-sheet * { visibility: visible !important; }
  .lr-sheet { position: absolute; left: 0; top: 0; width: 100%; padding: 0; background: #fff; }
  body { background: #fff !important; }
}

/* comprobante en el checkout */
.receipt-doc { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.receipt-doc__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.receipt-doc__head .ico { color: var(--lime); }
.receipt-doc .field { margin-bottom: 6px; }
.receipt-doc em.opt { font-style: normal; color: var(--muted); font-weight: 500; }

@media (max-width: 600px) { .hero__br { display: none; } }

/* ---------- Productos con planes ---------- */
.price .from { display: block; margin-bottom: 3px; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plans { display: grid; gap: 8px; margin-bottom: 14px; }
.plan { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--black); cursor: pointer; transition: border-color .15s, background .15s; }
.plan:hover { border-color: #555; }
.plan:has(input:checked) { border-color: var(--lime); background: #12160a; }
.plan input { width: 18px; height: 18px; accent-color: var(--lime); margin: 0; }
.plan__t { display: grid; gap: 3px; min-width: 0; }
.plan__t b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.plan__t small { font-size: 12.5px; color: var(--muted); }
.plan__tag { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; background: var(--lime); color: var(--black); }
.plan__p { font-size: calc(26px * var(--dp)); text-align: right; }
.plan__p small { font-family: var(--body); font-size: 12px; font-weight: 500; color: var(--muted); }
.feat--free .ico { color: var(--muted); }
.dl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 600px) { .plan { padding: 12px; gap: 10px; } }

/* ---------- Invitación al club (pantalla lima) ---------- */
body.jp-open { overflow: hidden; }
.joinpop { position: fixed; inset: 0; z-index: 90; overflow: auto; background: var(--lime); color: var(--black); opacity: 0; transition: opacity .25s; }
.joinpop.show { opacity: 1; }
.jp { position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.jp__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: min(1180px, 100%); margin: 0 auto; padding: 18px 24px 0; }
.jp__logo { width: 120px; height: auto; display: block; }
.jp__x { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid var(--black); }
.jp__x:hover { background: var(--black); color: var(--lime); }
.jp__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; width: min(1180px, 100%); margin: 0 auto; padding: 24px 24px 36px; }
.jp__txt { display: grid; gap: 14px; justify-items: start; max-width: 470px; }
.jp__eye { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.jp h2 { font-size: calc(132px * var(--ds)); line-height: .92; letter-spacing: -.02em; }
.jp__perks { list-style: none; display: grid; gap: 8px; margin: 2px 0 4px; padding: 0; }
.jp__perks li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.jp__perks .ico { width: 18px; height: 18px; flex-shrink: 0; }
.jp__name { display: grid; gap: 6px; width: 100%; }
.jp__name span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jp__name input { width: 100%; padding: 14px 16px; font-size: 17px; font-weight: 600; color: var(--black); background: rgba(255,255,255,.55); border: 2px solid var(--black); }
.jp__name input::placeholder { color: rgba(0,0,0,.45); }
.jp__name input:focus { outline: none; background: #fff; }
.jp__cta { width: 100%; justify-content: space-between; padding: 16px 18px; font-size: 16px; background: var(--black); color: var(--lime); border-color: var(--black); }
.jp__cta:hover { background: #1f1f1f; }
.jp__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; width: 100%; font-size: 13.5px; }
.jp__alt button { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.jp__alt span { color: rgba(0,0,0,.65); }
.jp__alt a { color: var(--black); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* la tarjeta con tu nombre */
.jp__stage { position: relative; display: grid; place-items: center; min-height: 420px; perspective: 1200px; }
.jp__card { position: relative; width: 100%; max-width: 520px; transform: rotate(-8deg); filter: drop-shadow(0 34px 44px rgba(0,0,0,.4)); }
.jp__card .club { width: 100%; }
.joinpop.show .jp__card { animation: jpDrop .8s var(--ease) both .1s; }
@keyframes jpDrop { from { opacity: 0; transform: translateY(-70px) rotate(6deg); } to { opacity: 1; transform: rotate(-8deg); } }
@media (max-width: 860px) {
  .jp__in { grid-template-columns: 1fr; gap: 6px; padding: 8px 18px 24px; }
  .jp__stage { order: -1; min-height: 0; padding: 18px 0 26px; overflow: hidden; margin: 0 -18px -14px; }
  .jp__card { width: min(320px, 82%); }
    .jp h2 { font-size: calc(84px * var(--ds)); }
  .jp__perks li { font-size: 15px; }
  .jp__logo { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .joinpop * { animation: none !important; } }
/* aviso en la pantalla de cuenta cuando se viene a comprar */
.auth-next { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--lime); background: #12160a; font-size: 14px; color: var(--text); }
.auth-next .ico { color: var(--lime); flex-shrink: 0; margin-top: 1px; }

/* ---------- Registro y acceso: pantalla completa en negro ---------- */
body.jf-open, body.jp-open { overflow: hidden; }
body.jf-open .fab, body.jp-open .fab { display: none; }
.jflow { position: fixed; inset: 0; z-index: 80; overflow: auto; background: var(--bg); color: var(--text); }
.jflow__top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; pointer-events: none; }
.jflow__top > * { pointer-events: auto; }
.jflow__logo { width: 136px; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(198,255,0,.14)); }
.jflow__x { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--text-2); background: var(--bg); }
.jflow__x:hover { color: var(--white); border-color: var(--white); }
.jflow__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100%; }
/* izquierda: la tarjeta en un escenario oscuro con brillo lima */
.jflow__show { position: relative; display: grid; align-content: center; justify-items: center; gap: 26px; padding: 96px 48px 56px; background: radial-gradient(55% 45% at 50% 46%, rgba(198,255,0,.13), transparent 70%), #070707; border-right: 1px solid var(--line); overflow: hidden; }
.jflow__show::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 64px); }
.jflow__card { position: relative; z-index: 1; width: 100%; max-width: 480px; perspective: 1200px; transform: rotate(-4deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.jflow__card .club { width: 100%; }
.jflow__note { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.jflow__note .ico { width: 15px; height: 15px; color: var(--lime); }
/* derecha: un solo dato por paso */
.jflow__panel { display: grid; place-items: center; padding: 96px 40px 56px; }
.jflow__box { width: 100%; max-width: 400px; }
.jflow__box form { display: grid; gap: 14px; }
.jflow__eye { margin-top: -4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.jflow__h { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; letter-spacing: var(--dls); font-size: calc(48px * var(--ds)); line-height: 1.02; }
.jflow__lead { color: var(--text-2); font-size: 15.5px; line-height: 1.5; margin-top: -4px; }
.jflow__lead b { color: var(--white); }
.jflow .field { margin-bottom: 0; }
.jflow__cta { width: 100%; justify-content: space-between; padding: 15px 18px; font-size: 15px; margin-top: 4px; }
.jflow__fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.jflow__fine a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.jflow__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.jflow__alt a, .jflow__alt button { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jflow__alt a:hover, .jflow__alt button:hover { color: var(--lime); }
.jflow__country summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13.5px; color: var(--muted); }
.jflow__country summary::-webkit-details-marker { display: none; }
.jflow__country summary b { color: var(--text); font-weight: 600; }
.jflow__country summary span { margin-left: auto; color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jflow__country[open] summary span { display: none; }
.jflow__country .field { margin-top: 10px; }
.jflow .auth-next { margin-bottom: 18px; }
/* tarjeta creada */
.jflow--reveal { display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 40%, rgba(198,255,0,.12), transparent 70%), var(--bg); }
.jflow--reveal .reveal { padding: 90px 20px 50px; }
@media (max-width: 860px) {
  .jflow__grid { grid-template-columns: 1fr; min-height: 0; }
  .jflow__top { position: relative; padding: 16px 18px; background: #070707; }
  .jflow__logo { width: 92px; }
  .jflow__show { padding: 8px 18px 22px; gap: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .jflow__card { max-width: 300px; }
  .jflow__panel { padding: 26px 18px 40px; place-items: start center; }
  .jflow__h { font-size: calc(40px * var(--ds)); }
  .jflow--reveal .reveal { padding-top: 10px; }
}
body.jp-open .toast:not(.toast--err) { background: var(--black); color: var(--lime); }

/* ---------- Acabados de la tarjeta: lima y plata (la negra es la base) ---------- */
.club--oro .club__face { background: repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), radial-gradient(130% 90% at 0% 0%, #e4ff6e 0%, #c6ff00 50%, #9fd000 100%); box-shadow: inset 0 0 0 .5cqw #0b0b0b, inset 0 0 0 .8cqw rgba(255,255,255,.35); }
.club--plata .club__face { background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), radial-gradient(130% 90% at 0% 0%, #f4f5f7 0%, #c8cbd0 50%, #8f939a 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.7); }
:is(.club--oro, .club--plata) :is(.club__num, .club__name, .club__mail, .club__since, .club__geo, .club__bk-name, .club__bk-meta) {
  background: linear-gradient(180deg, #2b2b2b 0%, #0b0b0b 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .2cqw 0 rgba(255,255,255,.45));
}
:is(.club--oro, .club--plata) .club__tier, :is(.club--oro, .club--plata) .club__bk-label, :is(.club--oro, .club--plata) .club__fine { color: rgba(0,0,0,.7); }
:is(.club--oro, .club--plata) .club__tier b, :is(.club--oro, .club--plata) .club__bk-meta i { color: var(--black); background-color: var(--black); }
.club--oro .club__tier b, .club--plata .club__tier b { background: none; }
:is(.club--oro, .club--plata) .club__nfc { stroke: rgba(0,0,0,.6); }
:is(.club--oro, .club--plata) .club__logo, :is(.club--oro, .club--plata) .club__bk-logo { filter: none; }
.club.is-on:is(.club--oro, .club--plata) .club__state { color: var(--black); }
.club.is-on:is(.club--oro, .club--plata) .club__state i { background: var(--black); box-shadow: 0 0 0 .3cqw rgba(0,0,0,.15); }
:is(.club--oro, .club--plata) .club__glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.25), rgba(255,255,255,0) 40%); }

/* ---------- Registro: progreso y elección de tarjeta ---------- */
.jf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.jf-steps i { height: 4px; background: var(--line-2); }
.jf-steps i.on { background: var(--lime); }
.jf-look { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; }
.jf-swatches { display: flex; gap: 12px; }
.jf-sw { display: grid; justify-items: center; gap: 5px; cursor: pointer; }
.jf-sw input, .jf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.jf-sw i { width: 46px; height: 30px; border-radius: 5px; background: var(--sw); border: 1px solid rgba(255,255,255,.18); transition: transform .15s, box-shadow .15s; }
.jf-sw small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.jf-sw:hover i { transform: translateY(-2px); }
.jf-sw input:checked + i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lime); }
.jf-sw input:checked ~ small { color: var(--white); }
.jf-sw input:focus-visible + i { outline: 2px solid var(--white); outline-offset: 5px; }
.jf-seg { display: flex; border: 1px solid var(--line-2); }
.jf-seg label { cursor: pointer; }
.jf-seg b { display: block; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.jf-seg input:checked + b { background: var(--white); color: var(--black); }
.jf-seg input:focus-visible + b { outline: 2px solid var(--lime); outline-offset: 2px; }
html:has(body.jf-open), html:has(body.jp-open) { overflow: hidden; }

/* ---------- Tarjeta metálica: cepillado, reflejo que sigue al puntero, bisel, grosor y foil ---------- */
.club { --m-brush: rgba(255,255,255,.045); --m-brush2: rgba(0,0,0,.35); --m-spec: rgba(255,255,255,.2); --m-rim1: rgba(255,255,255,.42); --m-rim2: rgba(0,0,0,.65); --m-edge: #050506; }
.club--oro { --m-brush: rgba(0,0,0,.05); --m-brush2: rgba(255,255,255,.28); --m-spec: rgba(255,255,255,.6); --m-rim1: rgba(255,255,255,.85); --m-rim2: rgba(0,0,0,.5); --m-edge: #5f7d00; }
.club--plata { --m-brush: rgba(0,0,0,.06); --m-brush2: rgba(255,255,255,.55); --m-spec: rgba(255,255,255,.85); --m-rim1: rgba(255,255,255,.95); --m-rim2: rgba(0,0,0,.4); --m-edge: #6b7078; }
/* textura cepillada + reflejo especular (se mueve con --mx/--my) */
.club__face::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(118deg, transparent calc(var(--mx) - 34%), var(--m-spec) calc(var(--mx) - 6%), transparent calc(var(--mx) + 22%)),
    linear-gradient(118deg, transparent calc(var(--mx) + 18%), rgba(255,255,255,.07) calc(var(--mx) + 32%), transparent calc(var(--mx) + 46%)),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%, rgba(0,0,0,.22)),
    repeating-linear-gradient(0deg, var(--m-brush) 0 1px, transparent 1px 2px, var(--m-brush2) 2px 2.5px, transparent 2.5px 4px);
  background-blend-mode: normal, normal, normal, normal;
  opacity: .95; }
.club--plata .club__face::before, .club--oro .club__face::before { mix-blend-mode: soft-light; opacity: 1; }
/* bisel: borde metálico con luz arriba-izquierda y sombra abajo-derecha */
.club__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: .55cqw;
  background: linear-gradient(145deg, var(--m-rim1) 0%, rgba(255,255,255,.06) 28%, var(--m-rim2) 68%, rgba(255,255,255,.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* grosor: una lámina detrás que asoma como canto al inclinar la tarjeta */
.club__card::before { content: ""; position: absolute; inset: 0; border-radius: 4.2cqw; background: var(--m-edge); transform: translateZ(-.9cqw); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08); }
.club__card::after { content: ""; position: absolute; inset: 0; border-radius: 4.2cqw; background: var(--m-edge); transform: translateZ(-.45cqw); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* logo con relieve y brillo de foil */
.club__logo { filter: drop-shadow(0 .28cqw 0 rgba(0,0,0,.55)) drop-shadow(0 -.1cqw 0 rgba(255,255,255,.25)); }
:is(.club--oro, .club--plata) .club__logo { filter: drop-shadow(0 .2cqw 0 rgba(255,255,255,.45)) drop-shadow(0 -.08cqw 0 rgba(0,0,0,.3)); }
.club__logofx { position: absolute; left: 6.5%; top: 9%; width: 27%; aspect-ratio: 720 / 337; pointer-events: none;
  -webkit-mask: url("assets/mm-oficial-2026-lima.webp") center / 100% 100% no-repeat; mask: url("assets/mm-oficial-2026-lima.webp") center / 100% 100% no-repeat;
  background: linear-gradient(118deg, transparent calc(var(--mx) - 20%), rgba(255,255,255,.85) var(--mx), transparent calc(var(--mx) + 20%)), linear-gradient(180deg, rgba(255,255,255,.25), transparent 60%);
  mix-blend-mode: overlay; }
/* chip dorado con volumen */
.club__chip { background:
    radial-gradient(110% 80% at 22% 12%, rgba(255,255,255,.7), transparent 42%),
    linear-gradient(90deg, transparent 32%, rgba(80,58,10,.55) 32% 34%, transparent 34% 66%, rgba(80,58,10,.55) 66% 68%, transparent 68%),
    linear-gradient(0deg, transparent 30%, rgba(80,58,10,.55) 30% 32%, transparent 32% 68%, rgba(80,58,10,.55) 68% 70%, transparent 70%),
    linear-gradient(135deg, #fbefc2, #dcb85a 35%, #9c7424 62%, #f0d68a 85%, #b48a32);
  box-shadow: inset 0 0 0 1px rgba(90,64,12,.7), inset 0 .25cqw .3cqw rgba(255,255,255,.45), inset 0 -.3cqw .4cqw rgba(60,40,5,.45), 0 .35cqw .5cqw rgba(0,0,0,.55); }
/* datos grabados con más profundidad */
.club__num, .club__name, .club__mail, .club__since, .club__geo, .club__bk-name, .club__bk-meta { filter: drop-shadow(0 .28cqw .05cqw rgba(0,0,0,.9)) drop-shadow(0 -.12cqw 0 rgba(255,255,255,.18)); }
:is(.club--oro, .club--plata) :is(.club__num, .club__name, .club__mail, .club__since, .club__geo, .club__bk-name, .club__bk-meta) { filter: drop-shadow(0 .22cqw 0 rgba(255,255,255,.55)) drop-shadow(0 -.1cqw 0 rgba(0,0,0,.25)); }
@media (prefers-reduced-motion: reduce) { .club__face::before, .club__logofx { background-position: 0 0; } }

/* ---------- Membresía activa: tarjeta tornasolada ---------- */
.club__iris { display: none; }
.club--pass .club__iris { display: block; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(62deg, rgba(255,255,255,0) 0 .9cqw, rgba(255,255,255,.07) .9cqw 1.1cqw),
    linear-gradient(125deg, #ff5fd2 0%, #ffd25f 15%, #6dffb3 30%, #5fd2ff 45%, #a77bff 60%, #ff5fd2 75%, #ffd25f 90%, #6dffb3 100%);
  background-size: 100% 100%, 280% 280%;
  background-position: 0 0, var(--mx) var(--my);
  mix-blend-mode: screen; opacity: .46; }
.club--pass:is(.club--oro, .club--plata) .club__iris { mix-blend-mode: soft-light; opacity: .95; }
.club--pass .club__tier { color: transparent; background: linear-gradient(90deg, #ff7ad9, #ffe17a, #7affc4, #7ad7ff, #c49bff); -webkit-background-clip: text; background-clip: text; }
.club--pass .club__tier b { color: #ff9be4; }
.club--pass:is(.club--oro, .club--plata) .club__tier { background: linear-gradient(90deg, #b0006e, #a06a00, #007a4e, #005f9e, #5a1fb0); -webkit-background-clip: text; background-clip: text; }
@media (hover: none) { .club--pass .club__iris { animation: club-iris 8s ease-in-out infinite alternate; } }
@keyframes club-iris { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .club--pass .club__iris { animation: none; } }
.ticket__iris { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; background: linear-gradient(90deg, #b0006e, #a06a00, #007a4e, #005f9e, #5a1fb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pass-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #ff5fd2, #ffd25f, #6dffb3, #5fd2ff, #a77bff) border-box; font-size: 14px; color: var(--text-2); }
.pass-banner b { color: var(--white); }
.pass-banner .ico { color: #ffd25f; flex-shrink: 0; }

/* ---------- Tarjeta más real: oro, vetas del metal, grabado láser y chip ---------- */
/* oro cepillado */
.club--oro .club__face { background: radial-gradient(130% 90% at 0% 0%, #f8e7a8 0%, #d4ac45 48%, #8a651c 100%); box-shadow: inset 0 0 0 1px rgba(60,40,0,.25), inset 0 1px 0 rgba(255,250,220,.7); }
.club--oro { --m-brush: rgba(60,40,0,.06); --m-brush2: rgba(255,245,210,.45); --m-spec: rgba(255,250,225,.8); --m-rim1: rgba(255,248,220,.95); --m-rim2: rgba(70,45,0,.45); --m-edge: #6e5016; }
.club--plata .club__face { background: radial-gradient(130% 90% at 0% 0%, #f7f8fa 0%, #c6c9ce 48%, #858991 100%); }
/* vetas irregulares de metal cepillado (ruido estirado en horizontal) + reflejo del entorno */
.club__face::before { background:
    linear-gradient(118deg, transparent calc(var(--mx) - 34%), var(--m-spec) calc(var(--mx) - 6%), transparent calc(var(--mx) + 22%)),
    linear-gradient(118deg, transparent calc(var(--mx) + 18%), rgba(255,255,255,.07) calc(var(--mx) + 32%), transparent calc(var(--mx) + 46%)),
    linear-gradient(172deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,.16) 58%, rgba(255,255,255,.06) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mix-blend-mode: normal; opacity: 1; }
.club--negra .club__face::before { mix-blend-mode: screen; opacity: .3; }
:is(.club--plata, .club--oro) .club__face::before { mix-blend-mode: overlay; opacity: .9; }
/* grabado láser: sin relieve plateado, tinta del propio metal con filo de luz y sombra */
.club { --ink: #c9ccd1; --ink-lo: rgba(0,0,0,.9); --ink-hi: rgba(255,255,255,.08); }
.club--plata { --ink: #34373c; --ink-lo: rgba(255,255,255,.65); --ink-hi: rgba(0,0,0,.25); }
.club--oro { --ink: #4a3508; --ink-lo: rgba(255,246,210,.6); --ink-hi: rgba(60,40,0,.3); }
.club .club__num, .club .club__name, .club .club__mail, .club .club__since, .club .club__geo, .club .club__bk-name, .club .club__bk-meta {
  color: var(--ink); background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-weight: 500;
  text-shadow: 0 .16cqw 0 var(--ink-lo), 0 -.1cqw 0 var(--ink-hi); }
.club .club__num { font-size: 4.9cqw; letter-spacing: .12em; }
.club .club__since b { font-weight: 600; }
/* chip SVG */
.club svg.club__chip { background: none; box-shadow: none; border-radius: 0; height: auto; aspect-ratio: auto; filter: drop-shadow(0 .25cqw .35cqw rgba(0,0,0,.45)); }
/* logo impreso (sin brillo exagerado) */
.club__logo { filter: drop-shadow(0 .15cqw .1cqw rgba(0,0,0,.5)); }
:is(.club--plata, .club--oro) .club__logo { filter: drop-shadow(0 .12cqw 0 rgba(255,255,255,.5)); opacity: .92; }
.club__logofx { opacity: .55; }

/* grosor bien armado: frente y reverso por fuera, el canto entre los dos (antes el canto tapaba el reverso al girar) */
.club__front { transform: translateZ(.45cqw); }
.club__back { transform: rotateY(180deg) translateZ(.45cqw); }
.club__card::before { transform: translateZ(.15cqw); -webkit-backface-visibility: visible; backface-visibility: visible; box-shadow: none; }
.club__card::after { transform: translateZ(-.15cqw); -webkit-backface-visibility: visible; backface-visibility: visible; }

/* ---------- Programas (insignias tipo Adobe) ---------- */
.sw { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 4px; font: 700 11px/1 var(--body); letter-spacing: -.01em; flex-shrink: 0; }
.sw--ps { background: #001e36; color: #31a8ff; box-shadow: inset 0 0 0 1px #31a8ff55; }
.sw--ae { background: #1f0040; color: #d291ff; box-shadow: inset 0 0 0 1px #d291ff55; }
.sw--pr { background: #00005b; color: #9999ff; box-shadow: inset 0 0 0 1px #9999ff55; }
.sw--win { background: #06192b; color: #2a9df4; box-shadow: inset 0 0 0 1px #2a9df455; }
.sw--mac { background: #1b1b1d; color: #e8e8ea; box-shadow: inset 0 0 0 1px #ffffff33; }
.sw--ios { background: #1b1b1d; color: #ffffff; box-shadow: inset 0 0 0 1px #ffffff33; }
.sw--and { background: #0b2416; color: #3ddc84; box-shadow: inset 0 0 0 1px #3ddc8455; }
.sw .ico { width: 14px; height: 14px; }
.progcard .sw .ico { width: 20px; height: 20px; }
.progcard.is-soon { opacity: .6; }
.progcard.is-soon:hover { opacity: 1; }
.card__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.progs { padding-top: 8px; padding-bottom: 34px; }
.progs__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.progcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .15s, transform .15s; }
.progcard .sw { width: 38px; height: 36px; font-size: 16px; border-radius: 6px; }
.progcard span:not(.sw) { display: grid; gap: 2px; flex: 1; }
.progcard b { font-size: 15px; }
.progcard small { font-size: 12.5px; color: var(--muted); }
.progcard > .ico { color: var(--muted); transition: transform .15s, color .15s; }
.progcard:hover { border-color: var(--white); }
.progcard:hover > .ico { color: var(--lime); transform: translateX(3px); }
/* barra lateral: el ícono va pegado al nombre, el número a la derecha */
.side nav a .sw { margin-left: 0; font-size: 10px; opacity: 1; width: 22px; height: 20px; }
.side nav a .sw .ico { width: 13px; height: 13px; }
.side nav a.active .sw { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
/* tarjetas: los programas como una línea discreta */
.card__sys { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card__sys span + span::before { content: "·"; margin-right: 10px; color: var(--line-2); }

/* ---------- Gratis para socios ---------- */
.freebies { padding-top: 10px; padding-bottom: 56px; }
.freebies__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.freebies__head .label { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); }
.freebies__head h2 { font-size: calc(48px * var(--ds)); margin: 6px 0 4px; }
.freebies__head p { color: var(--text-2); }
.freebies__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.freebie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px dashed var(--lime); background: linear-gradient(135deg, rgba(198,255,0,.06), transparent 60%), var(--surface); }
.freebie__media .cover { height: 100%; aspect-ratio: auto; min-height: 180px; }
.freebie__body { display: grid; align-content: center; gap: 8px; padding: 18px; }
.freebie__tag { justify-self: start; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--lime); color: var(--black); }
.freebie h3 { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(26px * var(--ds)); line-height: 1.05; }
.freebie p { font-size: 13.5px; color: var(--text-2); }
.freebie .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 560px) { .freebie { grid-template-columns: 1fr; } .freebie__media .cover { min-height: 0; aspect-ratio: 16 / 10; } }

/* ---------- Reseña después de descargar ---------- */
.rvw { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.75); opacity: 0; transition: opacity .2s; }
.rvw.show { opacity: 1; }
.rvw__box { position: relative; display: grid; gap: 12px; width: min(440px, 100%); padding: 26px; background: var(--bg); border: 1px solid var(--line-2); box-shadow: 8px 8px 0 var(--lime); }
.rvw__box h2 { font-size: calc(40px * var(--ds)); }
.rvw__box p { color: var(--text-2); font-size: 14.5px; }
.rvw__box .label { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); }
.rvw__x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; color: var(--muted); }
.rvw__stars { display: flex; gap: 6px; }
.rvw__stars label { cursor: pointer; }
.rvw__stars input { position: absolute; opacity: 0; pointer-events: none; }
.rvw__stars .ico { width: 34px; height: 34px; color: var(--line-2); fill: currentColor; transition: color .12s, transform .12s; }
.rvw__stars label.on .ico { color: var(--lime); }
.rvw__stars label:hover .ico { transform: scale(1.12); }
.rvw__stars input:focus-visible + span .ico { outline: 2px solid var(--white); outline-offset: 2px; }
.rvw textarea { width: 100%; background: var(--black); border: 1px solid var(--line-2); padding: 12px 14px; font-size: 15px; resize: vertical; }
.rvw textarea:focus { outline: none; border-color: var(--lime); }
.rvw .btn { justify-content: space-between; }
.rvw__later { font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ================= Tienda (rediseño) ================= */
.shop { padding-bottom: 72px; }
.shophead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 6px 0 22px; }
.shophead h1 { font-size: calc(76px * var(--ds)); line-height: 1; }
.shophead p { color: var(--text-2); margin-top: 6px; }
.shop-search { display: flex; align-items: center; gap: 10px; width: min(340px, 100%); padding: 0 14px; border: 1px solid var(--line-2); background: var(--surface); }
.shop-search:focus-within { border-color: var(--lime); }
.shop-search .ico { color: var(--muted); }
.shop-search input { flex: 1; min-width: 0; padding: 13px 0; background: transparent; border: 0; font-size: 15px; }
.shop-search input:focus { outline: none; }
.shopbar { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs a { position: relative; display: flex; align-items: center; gap: 8px; padding: 16px 18px; font-weight: 700; font-size: 15px; color: var(--muted); white-space: nowrap; transition: color .15s; }
.shop-tabs a sup { font-size: 11px; font-weight: 600; color: var(--muted); }
.shop-tabs a:hover { color: var(--white); }
.shop-tabs a.on { color: var(--white); }
.shop-tabs a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--lime); }
.shop-tabs a.on .ico { color: var(--lime); }
.shop-sort { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.shop-sort select { background: transparent; border: 0; color: var(--white); font-size: 14px; font-weight: 600; padding: 8px 4px; cursor: pointer; }
.shop-sort select option { background: var(--surface); }
.shop-progs { display: flex; gap: 8px; padding: 16px 0 6px; overflow-x: auto; scrollbar-width: none; }
.shop-progs::-webkit-scrollbar { display: none; }
.shop-progs a { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 12px 7px 8px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: border-color .15s, color .15s, background .15s; }
.shop-progs a:first-child { padding-left: 12px; }
.shop-progs a:hover { border-color: var(--white); color: var(--white); }
.shop-progs a.on { border-color: var(--lime); color: var(--white); background: rgba(198,255,0,.08); }
.shop-progs a.is-empty:not(.on) { opacity: .45; }
.shop-progs .sw { width: 22px; height: 20px; font-size: 10px; }
.shop-progs .sw .ico { width: 13px; height: 13px; }
.shop .store__top { margin: 14px 0 14px; }
.shop-empty { display: grid; justify-items: start; gap: 8px; padding: 36px; border: 1px dashed var(--line-2); }
.shop-empty b { font-family: var(--display); font-weight: var(--dw); text-transform: uppercase; font-size: calc(30px * var(--ds)); }
.shop-empty p { color: var(--text-2); margin-bottom: 8px; }
@media (max-width: 860px) {
  .shophead h1 { font-size: calc(54px * var(--ds)); }
  .shop-search { width: 100%; }
  .shopbar { flex-direction: column; gap: 0; }
  .shop-tabs a { padding: 14px 14px; }
  .shop-sort { padding: 8px 0; border-top: 1px solid var(--line); }
}

/* ================= Tarjeta de producto (rediseño) ================= */
.card { border-color: var(--line); background: var(--surface); }
.card:hover { border-color: var(--lime); transform: translateY(-3px); }
.card__body { gap: 6px; padding: 16px 16px 18px; }
.card .chip { padding: 0; border: 0; background: none; color: var(--lime); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.card .chip .ico { color: var(--lime); }
.card__name { font-size: calc(26px * var(--ds)); margin-top: 2px; }
.card__tag { font-size: 14px; line-height: 1.45; }
.card__sys { margin-top: 4px; }
.card__foot { padding-top: 14px; margin-top: auto; border-top: 1px solid var(--line); }
.card .card__foot { margin-top: 14px; }
.card .price { font-size: calc(28px * var(--dp)); }

/* ================= Portada: programas como fila de íconos ================= */
.progs__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.progcard { flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 18px 8px 16px; text-align: center; }
.progcard .sw { width: 52px; height: 48px; font-size: 20px; border-radius: 10px; }
.progcard .sw .ico { width: 26px; height: 26px; }
.progcard span:not(.sw) { flex: none; justify-items: center; }
.progcard b { font-size: 13.5px; line-height: 1.2; }
.progcard small { font-size: 11.5px; }
.progcard > .ico { display: none; }
.progcard:hover { border-color: var(--lime); transform: translateY(-2px); }
@media (max-width: 1000px) {
  .progs__row { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter, 18px) * -1); padding-right: 18px; }
  .progs__row::-webkit-scrollbar { display: none; }
  .progcard { flex: 0 0 128px; }
}

/* =========================================================
   v6 · ACABADO PREMIUM
   Profundidad (luz lima de fondo), superficies de vidrio, esquinas suaves,
   un solo estilo de tarjeta y títulos en mayúsculas/minúsculas.
   ========================================================= */
:root {
  --r: 18px; --r-sm: 12px;
  --glass: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  --gline: rgba(255,255,255,.09);
  --gline-2: rgba(255,255,255,.17);
  --glow: 0 28px 60px -28px rgba(198,255,0,.45);
  --dls: -.025em;
}
body {
  background:
    radial-gradient(1100px 700px at 105% -5%, rgba(198,255,0,.10), transparent 60%),
    radial-gradient(900px 700px at -15% 55%, rgba(198,255,0,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.d, .card__name, .qcat__txt b, .freebie h3 { text-transform: none; }

/* Botones */
.btn { border-radius: var(--r-sm); padding: 14px 22px; font-size: 14.5px; }
.btn--lime { box-shadow: 0 12px 32px -12px rgba(198,255,0,.7); }
.btn--lime:hover { box-shadow: 0 14px 36px -10px rgba(255,255,255,.35); }
.btn--line { background: rgba(255,255,255,.03); border: 1px solid var(--gline-2); }
.btn--line:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.4); }
.add-btn { border-radius: 10px; }
.icon-btn, .hd__menu { border-radius: 10px; border-color: var(--gline-2); }

/* Header */
.hd { background: rgba(11,11,11,.72); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--gline); }
.hd__cart { border-radius: 10px; }
.hd__cart b { border-radius: 6px; }
.hd__nav a { border-radius: 8px; }

/* Etiqueta tipo píldora con punto encendido */
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border: 1px solid var(--gline-2); border-radius: 999px; background: rgba(255,255,255,.035); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,0,.18), 0 0 12px var(--lime); animation: pill-pulse 2.2s ease-in-out infinite; }
@keyframes pill-pulse { 50% { box-shadow: 0 0 0 6px rgba(198,255,0,.06), 0 0 18px var(--lime); } }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 420px at 78% 32%, rgba(198,255,0,.14), transparent 70%); pointer-events: none; }
.hero__fx { position: absolute; z-index: -1; top: -10%; right: -6%; width: 62%; height: 95%; pointer-events: none; filter: blur(46px); }
.hero__fx i { position: absolute; top: 0; height: 100%; width: 13%; transform: skewX(-24deg); background: linear-gradient(180deg, transparent, var(--lime) 45%, transparent 95%); }
.hero__fx i:nth-child(1) { right: 58%; opacity: .12; }
.hero__fx i:nth-child(2) { right: 38%; opacity: .2; }
.hero__fx i:nth-child(3) { right: 18%; opacity: .3; }
.hero__in { padding: 72px 0 8px; gap: 64px; }
.hero .pill { margin-bottom: 22px; }
.hero h1 { font-size: calc(clamp(52px, 6.3vw, 92px) * var(--ds)); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 22px; }
.hero h1 .hl, .sec-head .hl { display: inline; margin: 0; padding: 0; background: none; color: var(--lime); text-shadow: 0 0 42px rgba(198,255,0,.35); }
.hero p { font-size: 17.5px; max-width: 500px; }
.ctas { margin-top: 30px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.stats > div { min-width: 112px; padding: 13px 18px 12px; border: 1px solid var(--gline); border-radius: 14px; background: var(--glass); }
.stats b { display: block; font-family: var(--display); font-weight: var(--dw); font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.stats span { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* Destacado del hero */
.spot { border: 1px solid var(--gline-2); border-radius: var(--r); background: var(--glass), rgba(14,14,14,.7); backdrop-filter: blur(10px); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), var(--glow); }
.spot__tag { border-radius: 999px; padding: 6px 11px; background: rgba(11,11,11,.8); backdrop-filter: blur(6px); border: 1px solid var(--gline-2); }
.spot__body { padding: 20px 22px 22px; }

/* Encabezado de sección centrado */
.sec-head { text-align: center; margin: 88px auto 30px; max-width: 760px; }
.sec-head .pill { margin-bottom: 16px; }
.sec-head h2 { font-size: calc(clamp(42px, 4.8vw, 66px) * var(--ds)); letter-spacing: -.03em; }

/* Categorías: una sola tarjeta para las tres */
.cposts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 20px; }
.cpost {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 22px;
  border: 1px solid var(--gline); border-radius: var(--r); background: var(--glass);
  transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.cpost:hover { transform: translateY(-4px); border-color: rgba(198,255,0,.4); box-shadow: var(--glow); }
.cpost__ic { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 15px; background: var(--lime); color: var(--black); box-shadow: 0 10px 28px -8px rgba(198,255,0,.6); }
.cpost__ic .ico { width: 26px; height: 26px; stroke-width: 2.1; }
.cpost__name { font-size: calc(46px * var(--ds)); letter-spacing: -.03em; }
.cpost__desc { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.cpost__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cpost__arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gline-2); color: var(--text); transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.cpost__arrow .ico { width: 17px; height: 17px; }
.cpost:hover .cpost__arrow { background: var(--lime); border-color: var(--lime); color: var(--black); transform: translateX(3px); }
@media (max-width: 860px) { .cposts { grid-template-columns: 1fr; } .cpost { padding: 22px; } }

/* Confianza */
.trust { margin-top: 16px; border: 1px solid var(--gline); border-radius: var(--r); background: var(--glass); overflow: hidden; }
.trust > div, .trust > div + div { padding: 18px 20px; }
.trust > div + div { border-left-color: var(--gline); }
@media (max-width: 900px) {
  .trust > div:nth-child(3) { padding-left: 20px; }
  .trust > div:nth-child(n+3) { border-top-color: var(--gline); }
}

/* Estantes y tarjetas de producto */
.shelf { padding-top: 64px; }
.shelf__title h2 { font-size: calc(40px * var(--ds)); letter-spacing: -.03em; }
.goal__ic, .sec-ic { border-radius: 13px; box-shadow: 0 10px 26px -10px rgba(198,255,0,.6); }
.more { padding: 8px 14px; border: 1px solid var(--gline-2); border-radius: 999px; }
.more:hover { border-color: var(--lime); }
.card { border: 1px solid var(--gline); border-radius: var(--r); background: var(--glass); overflow: hidden; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.card:hover { border-color: rgba(198,255,0,.4); transform: translateY(-4px); box-shadow: var(--glow); }
.card__body { padding: 16px 16px 18px; }
.card__name { font-size: calc(26px * var(--ds)); letter-spacing: -.02em; }
.chip, .chip--plugin, .chip--curso, .chip--app { border-radius: 999px; padding: 4px 9px; border: 1px solid rgba(198,255,0,.3); background: rgba(198,255,0,.08); color: var(--lime); }

/* Portadas de relleno: las tres con el mismo fondo oscuro y luz lima */
.cover:not(.cover--photo) { background: radial-gradient(circle at 66% 50%, rgba(198,255,0,.2), transparent 58%), linear-gradient(160deg, #161616, #080808); color: var(--white); border-bottom: 1px solid var(--gline); }
.cover:not(.cover--photo)::before, .cover:not(.cover--photo)::after { background: var(--lime); opacity: .14; }
.cover__badge, .cover--plugin .cover__badge { border-radius: 999px; padding: 4px 9px; background: var(--lime); color: var(--black); }
.art-wave i { background: rgba(255,255,255,.88); }
.art-play { background: var(--lime); box-shadow: 0 0 46px rgba(198,255,0,.55); }
.art-play::after { border-left-color: var(--black); }
.art-phone { background: #121212; border-color: rgba(255,255,255,.85); border-radius: 2.4cqw; }
.art-phone i { background: rgba(255,255,255,.85); }
.art-phone i:last-child { background: var(--lime); outline: 0; box-shadow: 0 0 18px rgba(198,255,0,.6); }

/* Programas, gratis, guía, packs */
.progcard { border: 1px solid var(--gline); border-radius: 16px; background: var(--glass); transition: border-color .15s, transform .2s var(--ease), box-shadow .2s; }
.progcard:hover { border-color: rgba(198,255,0,.4); transform: translateY(-3px); box-shadow: var(--glow); }
.freebie { border: 1px solid rgba(198,255,0,.35); border-radius: var(--r); overflow: hidden; background: radial-gradient(500px 260px at 100% 0%, rgba(198,255,0,.1), transparent 70%), var(--glass); }
.freebie__tag { border-radius: 999px; padding: 4px 10px; }
.guide { border-color: var(--gline); }
.goal { border: 1px solid var(--gline); border-radius: 14px; background: var(--glass); }
.goal.active { border-color: rgba(198,255,0,.55); background: rgba(198,255,0,.06); box-shadow: var(--glow); }
.bcard { border: 1px solid var(--gline); border-top: 1px solid rgba(198,255,0,.5); border-radius: var(--r); background: radial-gradient(500px 200px at 50% 0%, rgba(198,255,0,.08), transparent 70%), var(--glass); }

/* Pase, opiniones, preguntas */
.ticket { border-radius: var(--r); box-shadow: 0 30px 80px -30px rgba(198,255,0,.5); }
.rev { padding: 18px; border: 1px solid var(--gline); border-radius: 14px; background: var(--glass); }
.photo-slot { border-radius: 12px; }
.faq { border-top-color: var(--gline); }
.faq__list { display: grid; gap: 10px; border-top: 0; }
.faq details { padding: 0 20px; border: 1px solid var(--gline); border-radius: 14px; background: var(--glass); transition: border-color .2s; }
.faq details[open] { border-color: rgba(198,255,0,.35); }
.ft { border-top-color: var(--gline); }

/* Formularios */
.field input, .field select { border-radius: 10px; border-color: var(--gline-2); background: rgba(255,255,255,.03); }
.field input:focus, .field select:focus { box-shadow: 0 0 0 4px rgba(198,255,0,.12); }

@media (max-width: 900px) {
  .hero__in { padding: 44px 0 4px; gap: 40px; }
  .sec-head { margin-top: 64px; }
}
@media (max-width: 520px) {
  .stats > div { flex: 1; min-width: 0; padding: 12px; }
  .stats b { font-size: 22px; }
}

/* v6 · detalles */
.fab { border: 0; border-radius: 999px; padding: 13px 20px; box-shadow: 0 14px 34px -10px rgba(198,255,0,.65), 0 0 0 1px rgba(0,0,0,.4); }
.fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(198,255,0,.8), 0 0 0 1px rgba(0,0,0,.4); }
@media (max-width: 600px) { .fab { padding: 13px; } }
.save { border-radius: 999px; }
.bitems { border-top-color: var(--gline); }
.bitems li { border-bottom-color: var(--gline); }
.bitems .qcat__ic, .qcat__ic { border-radius: 9px; }
.toast { border-radius: 12px; box-shadow: 0 14px 34px -10px rgba(198,255,0,.6); }
.progs { padding-top: 28px; }
.progs .label { margin-bottom: 4px; }
.freebies { padding-bottom: 24px; }
.ft__cta { border-radius: var(--r); padding: 30px 32px; box-shadow: 0 30px 80px -34px rgba(198,255,0,.55); }
.ft__form { border-radius: 12px; overflow: hidden; }
.ft__cur select { border-radius: 8px; }

/* v6 · producto, tienda y checkout con el mismo acabado */
.media__main { border: 1px solid var(--gline); border-radius: var(--r); overflow: hidden; }
.media__thumb { border-radius: 10px; border-color: var(--gline-2); }
.buybox, .summary { border: 1px solid var(--gline); border-radius: var(--r); background: var(--glass); }
.plan { border: 1px solid var(--gline-2); border-radius: 14px; background: rgba(255,255,255,.02); }
.plan:has(input:checked) { border-color: rgba(198,255,0,.7); background: rgba(198,255,0,.06); box-shadow: var(--glow); }
.plan__tag { border-radius: 999px; padding: 2px 8px; }
.paym__box { border-radius: 14px; border: 1px solid var(--gline-2); background: rgba(255,255,255,.02); }
.paym__opt input:checked + .paym__box { border-color: rgba(198,255,0,.7); background: rgba(198,255,0,.06); }
.side nav { border: 1px solid var(--gline); border-radius: 14px; overflow: hidden; background: var(--glass); }
.side nav a { border-bottom-color: var(--gline); }
.side select { border-radius: 10px; border-color: var(--gline-2); }
.shop-progs a { border-radius: 999px; border-color: var(--gline-2); }
.drawer { border-left-color: var(--gline-2); }

/* =========================================================
   v7 · TIPOGRAFÍA CON DEGRADADO + VIDRIO REAL
   Plus Jakarta Sans (títulos) + Inter (texto). Palabras clave con degradado lima
   que brilla, títulos blancos con caída suave, vidrio con desenfoque y luz que sigue al mouse.
   ========================================================= */
:root {
  --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --ds: .74; --dw: 800; --dlh: 1.04; --dls: -.04em;
  --r: 24px;
  --glass: linear-gradient(160deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 42%, rgba(198,255,0,.05) 100%);
  --gline: rgba(255,255,255,.12);
  --gline-2: rgba(255,255,255,.2);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.22);
  --glass-drop: 0 40px 100px -40px rgba(0,0,0,.9);
  --grad-lime: linear-gradient(100deg, #F4FFB0 0%, #C6FF00 30%, #86E000 55%, #C6FF00 75%, #EFFF9A 100%);
  --grad-white: linear-gradient(180deg, #FFFFFF 35%, #B9B9B9 100%);
}
body { font-size: 15.5px; letter-spacing: -.005em; }

/* Fondo: cinta lima difuminada (lo que el vidrio deja ver) */
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .3; filter: blur(38px); }
.bgfx svg { width: 100%; height: 100%; }
.bgfx path { fill: none; stroke: url(#bgfxG); stroke-width: 120; stroke-linecap: round; }
.bgfx path + path { stroke-width: 70; opacity: .55; }
@media (max-width: 760px) { .bgfx { opacity: .22; filter: blur(28px); } }

/* Títulos: blanco con caída + palabra clave con degradado que brilla */
.hero h1, .sec-head h2, .shelf__title h2, .freebies__head h2, .guide h2, .who h2, .faq h2, .cpost__name, .stats b {
  background: var(--grad-white); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero h1 { font-size: calc(clamp(54px, 6.6vw, 96px) * var(--ds)); line-height: 1.02; letter-spacing: -.045em; filter: drop-shadow(0 6px 40px rgba(198,255,0,.12)); }
.sec-head h2 { letter-spacing: -.04em; }
.hl, .hero h1 .hl, .sec-head .hl {
  display: inline; margin: 0; padding: 0; text-shadow: none;
  background: var(--grad-lime); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: hl-shine 7s linear infinite;
}
@keyframes hl-shine { to { background-position: -220% 0; } }
.who h2 .hl { -webkit-text-stroke: 0; }
/* sobre fondo lima el degradado no se ve: ahí va en negro */
.ticket .hl { background: none; color: var(--black); -webkit-text-fill-color: var(--black); animation: none; }

.label, .pill, .stats span, .cpost__foot, .chip, .cover__badge, .spot__tag, .freebie__tag, .plan__tag { font-family: var(--display); }
.card__name, .freebie h3, .bcard h3, .qcat__txt b { font-family: var(--display); letter-spacing: -.03em; }
.price, .ticket__price, .plan__p { font-family: var(--display); letter-spacing: -.03em; }
.btn, .add-btn, .hd__cart, .fab { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.hero p, .sec-head + p, .cpost__desc, .card__tag, .who p { color: rgba(255,255,255,.72); }

/* Vidrio real */
.cpost, .card, .progcard, .goal, .bcard, .rev, .faq details, .stats > div, .trust, .freebie, .spot, .buybox, .summary, .side nav, .plan, .paym__box {
  --mx: -999px; --my: -999px;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(198,255,0,.12), transparent 45%), var(--glass);
  border: 1px solid var(--gline);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--glass-hi), var(--glass-drop);
}
.cpost, .card, .bcard, .freebie, .spot, .trust, .buybox, .summary { border-radius: var(--r); }
.cpost:hover, .card:hover, .progcard:hover, .bcard:hover { border-color: rgba(198,255,0,.45); box-shadow: var(--glass-hi), var(--glass-drop), 0 0 0 1px rgba(198,255,0,.08), var(--glow); }
.goal.active, .plan:has(input:checked) { border-color: rgba(198,255,0,.6); box-shadow: var(--glass-hi), var(--glow); }
.freebie { border-color: rgba(198,255,0,.35); }
.spot { border-color: var(--gline-2); box-shadow: var(--glass-hi), 0 50px 120px -40px rgba(0,0,0,.95), var(--glow); }

/* Ícono de categoría: cuadro lima con brillo interno */
.cpost__ic, .sec-ic, .goal__ic { background: linear-gradient(145deg, #E6FF7A, #C6FF00 45%, #96E600); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px -10px rgba(198,255,0,.7); }

/* Botón lima con degradado y brillo que cruza al pasar el mouse */
.btn--lime, .add-btn:not(.added):not(.owned) { position: relative; overflow: hidden; background: linear-gradient(145deg, #E2FF6E, #C6FF00 50%, #A6F000); border-color: transparent; }
.btn--lime::after, .add-btn:not(.added):not(.owned)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none; }
.btn--lime:hover::after, .add-btn:not(.added):not(.owned):hover::after { transform: translateX(120%); }
.btn--lime:hover, .add-btn:not(.added):not(.owned):hover { background: linear-gradient(145deg, #EEFF9A, #D4FF33 50%, #B4F51A); }
.btn--line { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-hi); }

/* Footer: llamada final en vidrio */
.ft__cta { background: radial-gradient(600px 220px at 85% 50%, rgba(198,255,0,.16), transparent 70%), var(--glass); color: var(--text); border: 1px solid var(--gline-2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--glass-hi), var(--glow); }
.ft__cta h3 { font-size: calc(40px * var(--ds)); letter-spacing: -.04em; }
.ft__cta p { color: var(--text-2); }

@media (prefers-reduced-motion: reduce) { .hl { animation: none; } }
.hero h1, .sec-head h2, .shelf__title h2, .freebies__head h2, .guide h2, .who h2, .faq h2, .ft__cta h3 { letter-spacing: -.035em; word-spacing: .05em; }
.hero h1 { filter: none; }
.cm { margin-left: -.14em; } /* la coma de Plus Jakarta trae mucho aire a la izquierda */

/* =========================================================
   v8 · CUENTA Y VENTANAS EN VIDRIO
   Perfil, biblioteca, pedidos, curso, admin, carrito y buscador con el mismo acabado.
   ========================================================= */
.mycard, .panel, .acc__side, .lcard, .orow, .kpis > div, .atable, .player__side, .empty-box, .seg, .notice {
  --mx: -999px; --my: -999px;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(198,255,0,.12), transparent 45%), var(--glass);
  border: 1px solid var(--gline);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--glass-hi), var(--glass-drop);
}
.mycard, .acc__side, .lcard, .atable, .player__side { border-radius: var(--r); overflow: hidden; }
.mycard { padding: 28px; }
.panel, .orow, .kpis > div, .empty-box, .notice { border-radius: 18px; }
.empty-box, .notice { border-style: solid; }
.lcard:hover, .orow:hover { border-color: rgba(198,255,0,.45); box-shadow: var(--glass-hi), var(--glass-drop), var(--glow); }

/* Menú lateral de la cuenta */
.acc__card, .acc__user, .pside__head { border-bottom-color: var(--gline); }
.acc__card:hover { background: rgba(255,255,255,.04); }
.acc__side nav { gap: 4px; padding: 8px; }
.acc__side nav a, .acc__side nav button { border-bottom: 0; border-radius: 12px; }
.acc__side nav a:hover, .acc__side nav button:hover { background: rgba(255,255,255,.06); }
.acc__side nav a.active { background: linear-gradient(145deg, #E2FF6E, #C6FF00 50%, #A6F000); color: var(--black); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -10px rgba(198,255,0,.7); }
.acc__head h1 { background: var(--grad-white); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: -.04em; }

/* Selectores, avisos y regalos */
.seg { border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border-radius: 10px; }
.seg button.on { background: linear-gradient(145deg, #E2FF6E, #C6FF00 50%, #A6F000); color: var(--black); }
.gift { border-radius: 16px; border-style: solid; border-color: rgba(198,255,0,.4); background: radial-gradient(400px 160px at 0% 0%, rgba(198,255,0,.12), transparent 70%), var(--glass); }
.pend-banner, .pass-banner, .cert-banner { border-radius: 14px; }
.lic { border-radius: 6px; background: rgba(0,0,0,.4); border-color: var(--gline); }
.atable__head { background: rgba(255,255,255,.04); }
.atable__row { border-bottom-color: var(--gline); }

/* Carrito y buscador */
.drawer { background: linear-gradient(160deg, rgba(30,30,30,.92), rgba(10,10,10,.96)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-left: 1px solid var(--gline-2); box-shadow: -40px 0 100px -30px rgba(0,0,0,.9); }
.drawer__head { border-bottom-color: var(--gline); }
.srch { background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.srch__box { border-radius: 20px; overflow: hidden; border: 1px solid var(--gline-2); background: linear-gradient(160deg, rgba(34,34,34,.9), rgba(12,12,12,.94)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--glass-hi), 0 50px 120px -30px rgba(0,0,0,.95); }
.srch__bar { border-bottom-color: var(--gline); }
.gift__code, .gift__ic { border-radius: 10px; }

/* Antetítulo de marca: barras /// en lima, sin cápsula ni punto */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); }
.eyebrow b { color: var(--lime); font-weight: 800; letter-spacing: -.02em; font-size: 15px; }
.hero .eyebrow { margin-bottom: 20px; }
.sec-head .eyebrow { margin-bottom: 14px; }

/* =========================================================
   v9 · PORTADAS DE MARCA, CINTA, YAPE, TEMARIO, CELULAR
   ========================================================= */

/* ---- Portadas generadas (productos sin foto) ---- */
.cover--gen { padding: 4.2cqw 4.6cqw; }
.cover--gen .cover__top { justify-content: space-between; align-items: flex-start; }
.cover__sw { display: flex; gap: 1.4cqw; }
.cover__sw .sw { width: 8.4cqw; height: 7.8cqw; min-width: 24px; min-height: 22px; font-size: max(10px, 3.2cqw); border-radius: 1.8cqw; }
.cover__sw .sw .ico { width: 55%; height: 55%; }
.cover--gen .cover__art { right: 5cqw; left: auto; top: 50%; transform: translateY(-50%); width: 50cqw; }
.card:hover .cover--gen .cover__art, .spot__media:hover .cover--gen .cover__art { transform: translateY(-52%) scale(1.03); }
.cover__title { position: relative; z-index: 2; max-width: 46cqw; font-family: var(--display); font-weight: 800; font-size: 7.4cqw; line-height: .98; letter-spacing: -.045em; background: var(--grad-white); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cover__title small { display: block; margin-bottom: 1.4cqw; font-size: max(9px, 2.4cqw); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); -webkit-text-fill-color: var(--lime); }

.mk { position: relative; width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 2.6cqw; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4cqw 8cqw -3cqw rgba(0,0,0,.8); padding: 2.6cqw; }
/* plugin: línea de tiempo */
.mk--tl { display: grid; gap: 1.6cqw; }
.mk__ruler { height: 2cqw; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3.4cqw); opacity: .6; }
.mk__track { display: flex; gap: 1cqw; height: 5.4cqw; }
.mk__track i { border-radius: 1cqw; background: rgba(255,255,255,.22); }
.mk__track i.on { background: linear-gradient(180deg, #E2FF6E, #A6F000); box-shadow: 0 0 3cqw rgba(198,255,0,.45); }
.mk__track--au i { background: repeating-linear-gradient(90deg, rgba(198,255,0,.55) 0 2px, transparent 2px 4px); height: 100%; opacity: .7; }
.mk__track--au i.on { background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 2px, transparent 2px 4px); box-shadow: none; }
.mk__head { position: absolute; top: 1.4cqw; bottom: 1.4cqw; left: 58%; width: 2px; background: var(--white); box-shadow: 0 0 2cqw rgba(255,255,255,.8); }
.mk__head::before { content: ""; position: absolute; top: -1px; left: 50%; width: 2.6cqw; height: 2.6cqw; transform: translateX(-50%) rotate(45deg); background: var(--white); }
/* curso: reproductor */
.mk--pl { display: grid; gap: 2cqw; }
.mk__screen { aspect-ratio: 16 / 8.5; border-radius: 1.6cqw; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(198,255,0,.25), transparent 60%), #0b0b0b; }
.mk__play { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #E2FF6E, #A6F000); box-shadow: 0 0 5cqw rgba(198,255,0,.6); }
.mk__play::after { content: ""; margin-left: .8cqw; border-left: 3cqw solid var(--black); border-top: 1.9cqw solid transparent; border-bottom: 1.9cqw solid transparent; }
.mk__bar { height: 1.2cqw; border-radius: 9px; background: rgba(255,255,255,.16); overflow: hidden; }
.mk__bar i { display: block; height: 100%; background: var(--lime); }
.mk__meta { font-family: var(--display); font-size: max(9px, 2.5cqw); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
/* app: ventana */
.mk--win { padding: 0; overflow: hidden; }
.mk__dots { display: flex; gap: 1cqw; padding: 1.8cqw 2.2cqw; border-bottom: 1px solid rgba(255,255,255,.1); }
.mk__dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(255,255,255,.3); }
.mk__dots i:first-child { background: var(--lime); }
.mk__body { display: grid; grid-template-columns: 26% 1fr; gap: 2cqw; padding: 2.4cqw; height: 22cqw; }
.mk__side { display: grid; align-content: start; gap: 1.6cqw; }
.mk__side i { height: 2.2cqw; border-radius: 1cqw; background: rgba(255,255,255,.16); }
.mk__side i:first-child { background: rgba(198,255,0,.5); }
.mk__chart { display: flex; align-items: flex-end; gap: 1.6cqw; }
.mk__chart i { flex: 1; border-radius: 1cqw 1cqw 0 0; background: rgba(255,255,255,.3); }
.mk__chart i:last-child { background: linear-gradient(180deg, #E2FF6E, #A6F000); box-shadow: 0 0 3cqw rgba(198,255,0,.5); }
/* video demo al pasar el mouse */
.cover__demo { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cover__demo.on { opacity: 1; }

/* ---- Datos del hero: sin cajas, separados por la barra de marca ---- */
.stats { gap: 0; margin-top: 36px; }
.stats > div { min-width: 0; padding: 0 26px; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; position: relative; }
.stats > div:first-child { padding-left: 0; }
.stats > div + div::before { content: "/"; position: absolute; left: -6px; top: -2px; font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--lime); opacity: .8; }
.stats b { font-size: 32px; }
@media (max-width: 520px) { .stats > div { flex: none; padding: 0 16px; } .stats b { font-size: 24px; } }

/* ---- Cinta tipo bolsa ---- */
.tk { margin-top: 56px; overflow: hidden; border-top: 1px solid var(--gline); border-bottom: 1px solid var(--gline); background: linear-gradient(90deg, rgba(198,255,0,.06), rgba(255,255,255,.02) 50%, rgba(198,255,0,.06)); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk__run { display: flex; width: max-content; animation: tk-run 38s linear infinite; }
.tk:hover .tk__run { animation-play-state: paused; }
.tk__i { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; border-right: 1px solid var(--gline); }
.tk__i b { font-family: var(--display); font-weight: 800; letter-spacing: .06em; color: var(--white); }
.tk__i i { font-style: normal; font-size: 11px; color: var(--lime); text-shadow: 0 0 10px rgba(198,255,0,.7); }
@keyframes tk-run { to { transform: translateX(-50%); } }

/* ---- Quién está detrás: foto real ---- */
.who__photo { display: block; width: min(320px, 100%); aspect-ratio: 4 / 5; object-fit: cover; margin-top: 24px; border-radius: var(--r); border: 1px solid var(--gline-2); box-shadow: var(--glass-hi), var(--glow); }

/* ---- Yape en la página de gracias ---- */
.yape { margin-top: 22px; padding: 20px; border: 1px solid rgba(198,255,0,.4); border-radius: 20px; background: radial-gradient(400px 160px at 0% 0%, rgba(198,255,0,.12), transparent 70%), var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--glass-hi), var(--glow); }
.yape__head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 17px; }
.yape__head .ico { color: var(--lime); }
.yape__in { display: flex; gap: 18px; align-items: center; margin: 14px 0; }
.yape__qr { width: 140px; height: 140px; border-radius: 14px; background: var(--white); padding: 8px; flex-shrink: 0; }
.yape ol { display: grid; gap: 8px; padding-left: 18px; color: var(--text-2); font-size: 14.5px; }
.yape ol b { color: var(--white); }
.yape .mono { font-family: var(--mono); color: var(--lime); }
@media (max-width: 520px) { .yape__in { flex-direction: column; align-items: flex-start; } }

/* ---- Temario del curso ---- */
.mods { display: grid; gap: 8px; margin-top: 12px; counter-reset: none; }
.mods li { grid-template-columns: 44px 1fr auto; padding: 14px 16px; border: 1px solid var(--gline); border-radius: 14px; background: var(--glass); }
.mods .n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(198,255,0,.1); border: 1px solid rgba(198,255,0,.3); font-weight: 700; }
.mods li > span:nth-child(2) { font-weight: 600; }
.blk h3 { border-bottom: 0; padding-bottom: 0; }

/* ---- Celular: menos desenfoque para que no se trabe ---- */
@media (max-width: 760px), (hover: none) {
  .cpost, .card, .progcard, .goal, .bcard, .rev, .faq details, .trust, .freebie, .spot, .buybox, .summary, .side nav, .plan, .paym__box,
  .mycard, .panel, .acc__side, .lcard, .orow, .kpis > div, .atable, .player__side, .empty-box, .seg, .notice, .btn--line, .ft__cta, .yape {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .bgfx { filter: blur(24px); }
  .hl { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .tk__run { animation: none; } }

/* portadas: título y vista más grandes */
.cover--gen { background: radial-gradient(circle at 74% 58%, rgba(198,255,0,.28), transparent 55%), linear-gradient(160deg, #1a1a1a, #070707) !important; }
.cover--gen .cover__art { width: 56cqw; top: 58%; right: 4cqw; }
.card:hover .cover--gen .cover__art, .spot__media:hover .cover--gen .cover__art { transform: translateY(-52%) scale(1.04); }
.cover__title { font-size: 9.6cqw; max-width: 40cqw; }
.cover--gen .cover__badge { position: relative; z-index: 4; }

/* checkout en vidrio */
.fieldset { border: 1px solid var(--gline); border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--glass-hi), var(--glass-drop); }
.fieldset h2 { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; }
.how { border: 1px solid var(--gline); border-radius: 14px; background: rgba(0,0,0,.25); }
.warn, .direct { border-radius: 12px; }
.paym { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.receipt-doc { border-top-color: var(--gline-2); }
.summary .note { text-align: left; align-items: flex-start; }
.summary .note .ico { margin-top: 2px; }
@media (max-width: 760px), (hover: none) { .fieldset { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 520px) { .stats { flex-wrap: nowrap; } .stats > div { padding: 0 14px; } .stats > div + div::before { left: -5px; font-size: 24px; } .stats b { font-size: 22px; } .stats span { font-size: 9.5px; letter-spacing: .08em; } }

/* Ajustes ligeros de composición: la cinta de fondo se rasteriza en una capa. */
.bgfx { transform: translate3d(0, 0, 0); }
@media (max-width: 760px) { .bgfx { filter: blur(18px); } }

/* === Sección PROMPTS, integrada al diseño original === */
.ic--prompt { background: rgba(198,255,0,.15); color: var(--lime); border: 1px solid rgba(198,255,0,.4); }
.chip--prompt { background: rgba(198,255,0,.08); color: var(--lime); }
.cover--prompt { background: radial-gradient(circle at 70% 36%, rgba(198,255,0,.22), transparent 60%), linear-gradient(145deg,#171b12,#060806); }
.mk--prompt { display:grid; gap:1.5cqw; padding: 5cqw; border:1px solid rgba(198,255,0,.35); border-radius:8px; background:rgba(0,0,0,.55); box-shadow:0 20px 30px rgba(0,0,0,.25); transform: rotate(-6deg); }
.mk-prompt__tag { font-size:3.2cqw; font-family:var(--mono); color:var(--lime); letter-spacing:.08em; }
.mk-prompt__line { display:flex; gap:2cqw; align-items:center; }
.mk-prompt__line i { width:7cqw; height:1.5cqw; background:var(--lime); border-radius:3px; }
.mk-prompt__line b { width:17cqw; height:1.5cqw; background:#555e48; border-radius:3px; }
.mk-prompt__line:nth-of-type(3) b { width:11cqw; }
.mk-prompt__cursor { font:bold 5cqw var(--mono); color:var(--lime); }
.prompt-feature { display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; min-height:320px; align-items:center; padding:clamp(24px,4vw,46px); border:1px solid rgba(198,255,0,.24); border-radius:var(--r); background:radial-gradient(circle at 90% 40%,rgba(198,255,0,.17),transparent 45%),linear-gradient(120deg,rgba(18,23,17,.9),rgba(9,13,9,.8)); box-shadow:var(--glass-hi),var(--glass-drop); overflow:hidden; }
.prompt-feature__copy { position:relative; z-index:1; }
.prompt-feature__eyebrow { font:700 11px var(--mono); letter-spacing:.11em; color:var(--lime); }
.prompt-feature__copy h3 { margin:14px 0; font-size:clamp(27px,3.7vw,48px); line-height:1.13; }
.prompt-feature__copy p { max-width:580px; color:var(--text-2); line-height:1.75; margin-bottom:16px; }
.prompt-feature__tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.prompt-feature__tags span { border:1px solid rgba(198,255,0,.2); color:#d9efb5; background:rgba(198,255,0,.06); border-radius:999px; padding:6px 12px; font:600 11px var(--mono); }
.prompt-feature__visual { display:grid;place-items:center;min-width:0; perspective:900px; }
.prompt-feature__window { width:min(100%,420px); border:1px solid rgba(198,255,0,.4);border-radius:18px;background:linear-gradient(135deg,rgba(24,33,18,.96),rgba(5,8,5,.98));box-shadow:0 40px 60px rgba(0,0,0,.45),0 0 75px rgba(198,255,0,.08),inset 0 1px rgba(255,255,255,.1);padding:25px;transform:rotate(-4deg) rotateY(-8deg); }
.prompt-feature__top { display:flex; justify-content:space-between; padding-bottom:14px; margin-bottom:17px; border-bottom:1px solid rgba(198,255,0,.18); font:700 11px var(--mono); letter-spacing:.1em; color:var(--lime); }
.prompt-feature__code { display:flex; gap:18px; align-items:center; margin:16px 0; font:700 clamp(15px,1.8vw,21px) var(--mono); color:#e9f3d5; }
.prompt-feature__code span { color:#738069; font-size:12px; }
.prompt-feature__code b { color:var(--lime); opacity:.8; animation:promptBlink 1.4s steps(2,end) infinite; }
.prompt-feature__bottom { display:flex;justify-content:space-between; margin-top:25px; padding-top:14px; border-top:1px solid rgba(198,255,0,.2); font:700 11px var(--mono);letter-spacing:.14em; color:var(--lime); }
@keyframes promptBlink { 50% {opacity:0} }
.shop-progs[hidden]{display:none!important}
@media(max-width:820px){ .prompt-feature { grid-template-columns:1fr; } .prompt-feature__visual { padding:8px 0 2px; } .prompt-feature__window { transform:rotate(-2deg); } }
@media(prefers-reduced-motion: reduce){.prompt-feature__code b{animation:none}}


/* ---- Ajuste extra: logos oficiales + tarjeta más realista ---- */
.club__card { filter: drop-shadow(0 16px 28px rgba(0,0,0,.42)); }
.club__face { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.48), 0 1.2cqw 2.8cqw rgba(0,0,0,.28); }
.club__face::after { padding: .42cqw; }
.club__foil { opacity: .8; }
.club__glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.12), rgba(255,255,255,0) 34%); }
.club--oro .club__face { background: radial-gradient(140% 100% at 8% 8%, #fff6cf 0%, #efcf72 18%, #d0a349 48%, #8e671d 100%); }
.club--plata .club__face { background: radial-gradient(145% 102% at 8% 8%, #ffffff 0%, #dadde3 24%, #b7bcc4 48%, #7b8089 100%); }
.club--negra .club__face { background: radial-gradient(145% 102% at 8% 8%, #404449 0%, #18191d 44%, #040405 100%); }
.club__chip { transform: translateZ(.1px); }
.club__num { letter-spacing: .14em; }
.club__mail { opacity: .82; }
.club__state i { box-shadow: inset 0 0 0 .3cqw rgba(26,27,29,.9), 0 0 .55cqw rgba(198,255,0,.12); }
.story__sheet { background: #0b0b0b; }
@media (max-width: 760px){ .jflow__logo{ width:112px; } .club__logo{ width:36%; } .club__bk-logo{ width:30%; } }

/* Logo oficial 2026: tamaño equilibrado y símbolo específico en móviles. */
.hd .logo picture, .footer .logo picture {display:block; flex-shrink:0; line-height:0}
.hd .logo picture img {height:72px; width:auto; max-width:220px; object-fit:contain}
.footer .logo picture img {height:92px; width:auto; object-fit:contain}
@media (max-width:860px) {.hd .logo picture img {height:54px}}
@media (max-width:640px) {.hd .logo picture img {height:49px; width:52px; object-fit:contain}}
/* Tarjeta de socio: reflectividad sutil, impresión/gravado coherente y acabado físico. */
.club {filter: drop-shadow(0 22px 28px rgba(0,0,0,.38))}
.club__face {box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 5px rgba(0,0,0,.33),0 0 0 1px rgba(0,0,0,.35)}
.club--oro .club__face {background:linear-gradient(125deg,rgba(255,255,255,.11),transparent 32%,rgba(0,0,0,.08) 70%,rgba(255,255,255,.04)), radial-gradient(130% 110% at 5% 5%,#fff1ba 0%,#ddbb66 28%,#bf902f 60%,#7c581d 100%)}
.club--plata .club__face {background:linear-gradient(140deg,rgba(255,255,255,.25),transparent 40%,rgba(0,0,0,.12)), radial-gradient(130% 115% at 5% 5%,#fafbfc 0%,#d5d9df 30%,#9da4ac 70%,#61666f 100%)}
.club--negra .club__face {background:linear-gradient(125deg,rgba(255,255,255,.1),transparent 35%,rgba(0,0,0,.22)),radial-gradient(130% 110% at 4% 8%,#474a50 0%,#181a1d 50%,#030405 100%)}
.club__logo {width:33%;top:9%;left:7%;opacity:.96;filter:drop-shadow(0 .16cqw .14cqw rgba(0,0,0,.2))}
.club__bk-logo {width:28%;opacity:.26;filter:none}
.club__logofx {opacity:.23}
.club__glare {background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.115),transparent 42%)}
.club__num {letter-spacing:.125em}
.club__mail {opacity:.85}
/* Arco interactivo con profundidad: sin canvas pesado ni dependencias externas. */
.fan {position:relative;min-width:0;isolation:isolate;min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.fan::before {content:"";position:absolute;inset:6% 0 2%;z-index:-2;background:radial-gradient(ellipse at center,rgba(198,255,0,.13),transparent 58%);pointer-events:none}
.fan__scene {width:100%;height:370px;position:relative;perspective:1200px;perspective-origin:50% 46%;isolation:isolate}
.fan__card {--glow:#c6ff00;position:absolute;display:flex;flex-direction:column;left:50%;top:17px;width:clamp(164px,44%,244px);height:300px;border:1px solid rgba(215,255,158,.32);border-radius:20px;overflow:hidden;color:#fff;will-change:transform,opacity;transform-origin:50% 90%;transition:transform 780ms cubic-bezier(.2,.84,.16,1),opacity 660ms,filter 660ms,border-color 350ms; background:linear-gradient(160deg,#1c2517,#090d0a 50%,#161c12);box-shadow:0 30px 70px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.07);text-decoration:none}
.fan__card[data-active="true"] {border-color:var(--lime);box-shadow:0 38px 80px rgba(0,0,0,.62),0 0 45px rgba(198,255,0,.18),inset 0 1px rgba(255,255,255,.13)}
.fan__card::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(114deg,transparent 32%,rgba(255,255,255,.13) 44%,transparent 57%);opacity:.6}
.fan__art {display:grid;place-items:center;flex:1;min-height:0;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 25%,rgba(198,255,0,.16),transparent 48%),#0c100c}
.fan__art img{height:100%;width:100%;object-fit:cover}
.fan__art.fan__art--noimg::before {content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(198,255,0,.25);border-radius:28px;transform:rotate(-25deg);box-shadow:0 0 35px rgba(198,255,0,.12)}
.fan__glyph {z-index:1;display:block;font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.06em;text-transform:uppercase;text-align:center;line-height:1.1;padding:18px;text-shadow:0 5px 18px rgba(0,0,0,.6)}
.fan__art .fan__type {position:absolute;left:15px;top:12px;z-index:2;font-size:10px;letter-spacing:.16em;color:var(--lime);font-weight:800}
.fan__body{flex:none;padding:16px 17px 18px;background:linear-gradient(180deg,rgba(23,35,16,.9),rgba(12,19,9,.97));border-top:1px solid rgba(198,255,0,.13);display:grid;gap:5px}
.fan__body strong{font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fan__body small{font-size:12px;color:#bfcab5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fan__controls{display:flex;align-items:center;justify-content:center;gap:19px;margin-top:6px;position:relative;z-index:9}
.fan__arrow{width:39px;height:39px;border:1px solid rgba(198,255,0,.3);border-radius:50%;display:grid;place-items:center;background:rgba(12,18,11,.78);font-size:23px;color:var(--lime);transition:background .25s,border-color .25s}
.fan__arrow:hover{background:var(--lime);color:#101510}
.fan__dots{display:flex;align-items:center;gap:7px}
.fan__dot{width:6px;height:6px;border-radius:50%;background:#607046;transition:width .2s,background .2s}
.fan__dot.is-active{width:22px;border-radius:9px;background:var(--lime)}
.fan__caption{text-align:center;color:#b6c3a7;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:14px}
@media (max-width:1080px){.fan__scene{height:340px}.fan__card{height:275px;width:clamp(150px,48%,230px)}}
@media (max-width:760px){.fan{min-height:390px;margin:6px -10px 0}.fan__scene{height:310px}.fan__card{top:12px;height:260px;width:clamp(156px,49%,210px)}.fan__controls{margin-top:0}.fan__caption{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.fan__card{transition:none}}

/* Corrección verificada: las láminas 3D opacas tapaban el contenido en Chromium. */
.club__card::before,.club__card::after{display:none!important}
.club__front,.club__back{outline:1px solid rgba(255,255,255,.10);outline-offset:-1px}
.club__card{filter:drop-shadow(0 5px 2px rgba(0,0,0,.20))}