/* VengaStore · sistema visual del frontend de demostración
   Orden: tokens, base, layout, componentes, páginas, responsive y movimiento */

/* ================= Tokens ================= */
:root {
  /* Color: superficies */
  --c-bg: #fffaf7;
  --c-bg-raised: #f7f0ea;
  --c-surface: #fffefa;
  --c-surface-2: #f1ecf7;
  --c-surface-3: #e0d9eb;
  --c-line: rgba(29, 25, 58, .12);
  --c-line-strong: rgba(29, 25, 58, .26);
  --c-glass: rgba(255, 250, 247, .88);
  --c-scrim-art: rgba(29, 25, 58, .78);

  /* Color: texto */
  --c-text: #211c3a;
  --c-text-2: #4d4761;
  --c-muted: #716b80;

  /* Color: acentos semánticos */
  --c-action: #382873;          /* acción principal / activo */
  --c-action-hover: #261650;
  --c-on-action: #ffffff;
  --c-action-text: #382873;
  --c-season: #6650c6;          /* temporada */
  --c-club: #4054b7;            /* Club / ofertas */
  --c-on-club: #ffffff;
  --c-reward: #2ebb79;          /* Rewards / éxito */
  --c-on-reward: #06281b;
  --c-orbit: #2f79df;

  /* Acentos suaves (fondos y bordes) */
  --action-soft: rgba(56, 40, 115, .11);
  --action-line: rgba(56, 40, 115, .40);
  --season-soft: rgba(102, 80, 198, .11);
  --season-line: rgba(102, 80, 198, .34);
  --club-soft: rgba(64, 84, 183, .12);
  --club-line: rgba(64, 84, 183, .38);
  --reward-soft: rgba(46, 187, 121, .11);
  --reward-line: rgba(46, 187, 121, .38);

  /* Acento de página (se redefine por ruta) */
  --accent: var(--c-action);
  --accent-soft: var(--action-soft);
  --accent-line: var(--action-line);
  --accent-glow: rgba(56, 40, 115, .20);

  /* Espaciado */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;

  /* Radios */
  --r-sm: 7px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Tipografía */
  --font: Inter, 'Avenir Next', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat Display', Inter, 'Arial Black', sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.6rem, 3vw, 2.25rem);
  --fs-3xl: clamp(2rem, 4.4vw, 3rem);
  --fs-hero: clamp(3.2rem, 7.5vw, 7.2rem);
  --lh-tight: 1.12;
  --lh-body: 1.6;
  --fw-medium: 550;
  --fw-semi: 650;
  --fw-bold: 800;

  /* Elevación */
  --e-1: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 34px rgba(41, 31, 92, .08);
  --e-2: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px rgba(41, 31, 92, .13);
  --e-glow: 0 34px 90px rgba(56, 40, 115, .22);

  /* Interacción */
  --tap: 44px;
  --header-h: 68px;
  --dur: .18s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus: 3px solid var(--c-action);

  /* Cielo estacional */
  --sky-top: #fffaf7;
  --sky-mid: #f7f0ea;
  --sky-low: #e6dff2;

  color-scheme: only light;
}

/* Acento por ruta */
body[data-page="club"] { --accent: var(--c-club); --accent-soft: var(--club-soft); --accent-line: var(--club-line); --accent-glow: rgba(64, 84, 183, .22); }
body[data-page="rewards"] { --accent: var(--c-reward); --accent-soft: var(--reward-soft); --accent-line: var(--reward-line); --accent-glow: rgba(182, 242, 58, .16); }
body[data-page="pavos"] { --accent-glow: rgba(143, 107, 255, .26); }

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-md)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; letter-spacing: -.02em; font-weight: var(--fw-bold); }
p, ul, ol, dl, dd, figure { margin: 0; }
button, select, input { font: inherit; color: inherit; }
button, select, summary, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(56, 225, 255, .22); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.ico { flex: none; }

.skip { position: absolute; left: var(--s-3); top: -80px; z-index: 100; background: var(--c-action); color: var(--c-on-action); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: var(--fw-semi); }
.skip:focus { top: var(--s-3); }

/* ================= Layout ================= */
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); }
.section { padding: var(--s-8) 0; }
.section.alt { background: var(--c-bg-raised); border-block: 1px solid var(--c-line); }
.section-head { margin-bottom: var(--s-6); max-width: 62ch; }
.section-head.row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.section h2 { font-size: var(--fs-2xl); }
.section-lead { margin-top: var(--s-3); color: var(--c-muted); max-width: 56ch; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); align-items: center; }
.split.top { align-items: start; }
.fine { color: var(--c-muted); font-size: var(--fs-sm); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.kicker { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: var(--s-3); }
.kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

/* ================= Barra demo y cabecera ================= */
.demo-bar { background: var(--c-bg-raised); border-bottom: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-xs); text-align: center; padding: 6px var(--gutter); }

.site-header { position: sticky; top: 0; z-index: 40; background: var(--c-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-line); }
.header-row { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; min-height: var(--tap); flex: none; }
.brand img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: contain; background: #000; border: 1px solid var(--c-line); }
.brand-name { font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: -.01em; }
.brand-name b { color: var(--c-action); font-weight: var(--fw-bold); }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--c-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.nav-link:hover { color: var(--c-text); background: var(--c-surface); }
.nav-link[aria-current="page"] { color: var(--c-text); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 6px; height: 2px; border-radius: 2px; background: var(--c-action); }

.market { margin-left: auto; display: flex; align-items: center; }
.market-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.header-tools { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.cart-btn { position: relative; width: var(--tap); height: var(--tap); display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; }
.cart-btn:hover { border-color: var(--c-action); }
.cart-btn[aria-current="page"] { border-color: var(--c-action); background: var(--action-soft); }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-action); color: var(--c-on-action); font-size: var(--fs-xs); font-weight: var(--fw-bold); display: grid; place-items: center; }
.cart-count[data-zero="true"] { background: var(--c-surface-3); color: var(--c-muted); }
.nav-toggle { display: none; }

/* ================= Controles ================= */
.select, .input { min-height: var(--tap); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 0 var(--s-3); }
.select { cursor: pointer; }
.select:hover, .input:hover { border-color: var(--c-line-strong); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-md); border: 1px solid transparent; font-weight: var(--fw-semi); text-decoration: none; cursor: pointer; transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .ico { transition: transform var(--dur) var(--ease); }
.btn:hover .ico { transform: translateX(2px); }
.btn-lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-lg); }
.btn-sm { padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn-primary { background: var(--c-action); color: var(--c-on-action); }
.btn-primary:hover { background: var(--c-action-hover); }
.btn-ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }
.btn-ghost:hover { border-color: var(--c-action); color: var(--c-action); }
.btn-danger { background: transparent; border-color: var(--season-line); color: #ffd1f4; }
.btn-danger:hover { background: var(--season-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.block { width: 100%; }
.link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-3); background: none; border: 0; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--c-text); }

/* Badges */
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); background: var(--c-scrim-art); border: 1px solid rgba(255, 255, 255, .18); color: var(--c-text); }
.badge.gold { color: var(--c-club); border-color: var(--club-line); }
.badge.offer { background: var(--c-club); border-color: var(--c-club); color: var(--c-on-club); }
.badge.new { color: var(--c-action); border-color: var(--action-line); }
.badge.season { color: #ffd1f4; background: var(--season-soft); border-color: var(--season-line); }
.badge.soft { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); }

/* Tarjetas */
.card { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--e-1); }

/* Medidores: animan solo transform */
.meter { height: 10px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.meter.lg { height: 14px; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--c-action); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform .6s var(--ease); }
.meter.gold > span { background: var(--c-club); }
.meter.lime > span { background: var(--c-reward); }

/* Lista con checks dibujados en CSS */
.checks { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.checks li { position: relative; padding-left: 34px; color: var(--c-text-2); min-height: 24px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.checks li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 6px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Notas */
.note { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg-raised); color: var(--c-text-2); }
.note .ico { color: var(--c-action); margin-top: 2px; }
.note a { color: var(--c-action); }

/* Estado vacío */
.empty, .empty-state { display: grid; justify-items: center; gap: var(--s-4); text-align: center; padding: var(--s-7) var(--s-4); color: var(--c-muted); }
.empty-state { grid-column: 1 / -1; border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); }
.empty-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); color: var(--c-action); }
.empty strong { color: var(--c-text); }

/* ================= Portada: hero estacional ================= */
.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--c-line); display: grid; align-items: center; min-height: min(720px, calc(100svh - var(--header-h) - 28px)); }
.hero[data-season="fortnitemares"] { --sky-top: #0b0820; --sky-mid: #231257; --sky-low: #3b1b7a; }
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(10, 10, 31, .86) 0%, rgba(10, 10, 31, .4) 52%, rgba(10, 10, 31, 0) 100%),
  linear-gradient(0deg, var(--c-bg) 0%, rgba(10, 10, 31, 0) 28%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: var(--s-7); padding: var(--s-8) 0 var(--s-9); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3) 6px var(--s-2); border-radius: var(--r-pill); background: var(--season-soft); border: 1px solid var(--season-line); color: #ffd1f4; font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: var(--s-5); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-season); }
.hero h1 { font-size: var(--fs-hero); max-width: 14ch; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--c-action); }
.lead { margin-top: var(--s-5); max-width: 50ch; color: var(--c-text-2); font-size: var(--fs-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-points { list-style: none; padding: 0; margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--c-muted); font-size: var(--fs-sm); }
.hero-points li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-points .ico { color: var(--c-action); }

/* Terminal VS: el logo real como hito del paisaje */
.hero-sign { position: relative; display: grid; justify-items: center; }
.terminal { position: relative; width: min(380px, 100%); padding: 10px; border-radius: var(--r-xl); background: linear-gradient(180deg, var(--c-surface), #0b0a22); border: 1px solid var(--action-line); box-shadow: 0 0 0 6px rgba(56, 225, 255, .05), var(--e-glow); animation: float 7s ease-in-out infinite; }
.terminal-bar { display: flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2) 10px; font-size: var(--fs-xs); color: var(--c-muted); }
.terminal-bar .led { width: 8px; height: 8px; border-radius: 50%; background: var(--c-season); }
.terminal-screen { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.terminal-screen img { width: 100%; height: 100%; object-fit: contain; }
.holo-scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(56, 225, 255, .06) 0 1px, transparent 1px 4px); overflow: hidden; }
.holo-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(56, 225, 255, .16), transparent); transform: translateY(-110%); animation: scan 5.5s linear infinite; }
.terminal-foot { display: flex; justify-content: space-between; padding: 10px var(--s-2) 2px; font-size: var(--fs-xs); color: var(--c-muted); }
/* Skin del día: figura recortada, sin recuadro, etiquetas ni animación. Sale del aro: por arriba sobresale y por abajo la corta el borde del círculo (--D = diámetro del aro). */
.hero-sign.is-skin { --D: min(520px, 48vw); display: block; height: var(--D); margin-top: calc(var(--D) * .8); }
@media (max-width: 900px) { .hero-sign.is-skin { --D: min(390px, 74vw); } }
@media (max-width: 640px) { .hero-sign.is-skin { --D: min(310px, 78vw); } }
.hero-sign.is-skin::before { width: var(--D); top: 0; left: 50%; margin-left: calc(var(--D) / -2); animation: none; }
.hero-sign.is-skin::after, .hero-sign.is-skin .terminal-bar, .hero-sign.is-skin .terminal-foot, .hero-sign.is-skin .holo-scan, .hero-sign.is-skin .terminal-beam { display: none; }
.hero-sign .holo-base { display: none; }   /* sin la mancha azul bajo el aro (pedido de Arnold) */
.hero-sign.is-skin { --skin-w: 2.2; --skin-drop: .55; }
/* Escritorio: el bloque visible (cabeza que sobresale + aro con sus anillos) queda centrado en vertical con el texto; con .8 D quedaba ~.18 D más bajo. */
@media (min-width: 901px) { .hero-sign.is-skin { margin-top: calc(var(--D) * .44); } }   /* figura de 2,2 diámetros; baja 0,55 D para que el borde inferior del aro corte a la altura de las rodillas */
.hero-sign.is-skin .terminal { position: absolute; left: 50%; bottom: calc(var(--D) * var(--skin-drop) * -1); width: calc(var(--D) * var(--skin-w)); margin: 0 0 0 calc(var(--D) * var(--skin-w) / -2); padding: 0; background: none; border: 0; box-shadow: none; animation: none; }
/* Hasta que app.js sabe qué mostrar (skin o logo) la figura está oculta; si JavaScript no responde, aparece a los 6 s. */
.hero-sign .terminal, .hero-sign .holo-base { transition: opacity .45s ease; }
.hero-sign:not(.is-ready) .terminal, .hero-sign:not(.is-ready) .holo-base { opacity: 0; animation: vs-hero-fallback 0s 6s forwards; }
@keyframes vs-hero-fallback { to { opacity: 1; } }
.hero-sign.is-skin .terminal-screen { background: none; border: 0; box-shadow: none; aspect-ratio: 1 / 1; overflow: visible; }
.hero-sign.is-skin .terminal-screen img { object-fit: contain; filter: drop-shadow(0 10px 18px rgba(38, 29, 84, .28)); --cy: calc(100% - var(--D) * var(--skin-drop) - var(--D) / 2); -webkit-mask: linear-gradient(#000, #000) top / 100% var(--cy) no-repeat, radial-gradient(circle at 50% var(--cy), #000 calc(var(--D) / 2 - 1px), transparent calc(var(--D) / 2)); mask: linear-gradient(#000, #000) top / 100% var(--cy) no-repeat, radial-gradient(circle at 50% var(--cy), #000 calc(var(--D) / 2 - 1px), transparent calc(var(--D) / 2)); }
.terminal-beam { width: 2px; height: 46px; background: linear-gradient(180deg, var(--action-line), transparent); }
.holo-base { width: 60%; height: 16px; margin-top: -4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(56, 225, 255, .5), rgba(56, 225, 255, 0)); }

.bolt { opacity: 0; animation: flash 9s infinite; }
.bolt-b { animation-delay: 4.5s; }
.fog-a { animation: drift 24s ease-in-out infinite alternate; }
.fog-b { animation: drift 30s ease-in-out infinite alternate-reverse; }
.clouds { animation: drift 60s ease-in-out infinite alternate; }
.stars { animation: twinkle 6s ease-in-out infinite alternate; }

/* Cómo funciona */
.howto { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.howto li { display: flex; gap: var(--s-4); align-items: flex-start; }
.howto-n { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--action-soft); border: 1px solid var(--action-line); color: var(--c-action); font-weight: var(--fw-bold); }
.howto h3 { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.howto p { color: var(--c-muted); font-size: var(--fs-sm); }

/* Áreas */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.area { --tone: var(--c-action); --tone-soft: var(--action-soft); position: relative; overflow: hidden; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); text-decoration: none; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--e-1); transition: transform var(--dur) var(--ease); }
.area[data-tone="club"] { --tone: var(--c-club); --tone-soft: var(--club-soft); }
.area[data-tone="reward"] { --tone: var(--c-reward); --tone-soft: var(--reward-soft); }
.area::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--tone); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.area:hover { transform: translateY(-3px); }
.area:hover::after, .area:focus-visible::after { opacity: .6; }
.area-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--tone-soft); color: var(--tone); margin-bottom: var(--s-2); }
.area-k { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.area-d { color: var(--c-muted); font-size: var(--fs-sm); }
.area-go { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); color: var(--tone); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.area-go .ico { transition: transform var(--dur) var(--ease); }
.area:hover .area-go .ico { transform: translateX(3px); }
.area-feature { grid-column: span 2; grid-row: span 2; align-content: end; min-height: 320px; padding: var(--s-6); background:
  radial-gradient(80% 90% at 85% 10%, rgba(143, 107, 255, .35), transparent 60%),
  radial-gradient(60% 70% at 10% 100%, rgba(56, 225, 255, .14), transparent 60%),
  var(--c-surface); }
.area-feature .area-k { font-size: var(--fs-2xl); }
.area-feature .area-d { font-size: var(--fs-md); max-width: 40ch; }
.area-art { position: absolute; right: -20px; top: -10px; color: rgba(255, 255, 255, .06); pointer-events: none; }

/* Compromisos */
.trust-wrap { padding: var(--s-7) 0; }
.trust { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.trust li { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust .ico { color: var(--c-action); margin-top: 2px; }
.trust strong { display: block; }
.trust span { color: var(--c-muted); font-size: var(--fs-sm); }

/* ================= Cabecera de página ================= */
.page-head { position: relative; overflow: hidden; isolation: isolate; padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--c-line); background: linear-gradient(180deg, #0d0a26 0%, var(--c-bg) 100%); }
.page-head::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -60%; width: 70%; height: 220%; background: radial-gradient(closest-side, var(--accent-glow), transparent); pointer-events: none; }
.page-head-grid { display: grid; gap: var(--s-6); align-items: end; }
.page-head-grid.has-aside { grid-template-columns: minmax(0, 1fr) auto; }
.page-head h1 { font-size: var(--fs-3xl); max-width: 22ch; }
.page-lead { margin-top: var(--s-3); color: var(--c-text-2); max-width: 58ch; }
.page-head.compact { padding: var(--s-5) 0 var(--s-5); }
.page-head.compact h1 { font-size: var(--fs-2xl); }
.page-head.compact .page-lead { color: var(--c-text-2); }
.page-head.premium { background: linear-gradient(180deg, #17110a 0%, #0f0b1d 55%, var(--c-bg) 100%); }
.page-head.premium::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-club), transparent); }
.page-head.calm { background: var(--c-bg-raised); }
.page-head.calm::before { display: none; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); padding-right: var(--s-1); color: var(--c-text-2); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--c-text); }
.crumb-sep { color: var(--c-line-strong); }
.crumbs [aria-current] { color: var(--c-text); }

.emblem { width: 132px; height: 132px; border-radius: 30px; display: grid; place-items: center; align-content: center; gap: var(--s-2); color: var(--accent); background: radial-gradient(circle at 50% 35%, var(--accent-soft), transparent 70%), var(--c-surface); border: 1px solid var(--accent-line); box-shadow: var(--e-2); }
.emblem span { font-size: var(--fs-xs); color: var(--c-muted); font-weight: var(--fw-semi); }

/* ================= Tienda Fortnite (content-first) ================= */
.shop-bar { position: sticky; top: var(--header-h); z-index: 20; background: var(--c-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); padding: var(--s-3) 0; }
.shop-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.search { position: relative; flex: 1 1 240px; max-width: 340px; }
.search .ico { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.search .input { width: 100%; padding-left: 40px; }
.chips { display: flex; gap: var(--s-2); flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-pill); background: transparent; border: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; }
.chip:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.chip[aria-pressed="true"] { background: var(--c-action); border-color: var(--c-action); color: var(--c-on-action); font-weight: var(--fw-semi); }
.section.shop { padding-top: var(--s-5); }
.shop-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-4); }
.result-note, .cart-hint { color: var(--c-muted); font-size: var(--fs-sm); min-height: 1.5em; }
.cart-hint a { color: var(--c-action); font-weight: var(--fw-semi); }

/* Grilla y tarjeta de producto */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.product { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur) var(--ease); }
.product::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--c-line-strong); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.product:hover { transform: translateY(-3px); }
.product:hover::after, .product:focus-within::after { opacity: 1; }
.p-art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: radial-gradient(110% 90% at 30% 0%, rgba(255, 255, 255, .14), transparent 55%), var(--art, var(--c-surface-2)); }
.p-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(0deg, rgba(10, 10, 31, .45), transparent); }
.p-art svg { position: relative; z-index: 1; width: 56px; height: 56px; color: rgba(255, 255, 255, .92); }
.p-art .badges { position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3); right: var(--s-3); display: flex; flex-wrap: wrap; gap: 6px; }
.p-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); flex: 1; }
.p-cat { font-size: var(--fs-xs); color: var(--c-muted); font-weight: var(--fw-semi); }
.p-name { font-size: var(--fs-lg); letter-spacing: -.01em; }
.p-desc { color: var(--c-muted); font-size: var(--fs-sm); flex: 1; }
.p-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.price { display: grid; line-height: 1.2; }
.price strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.price s { color: var(--c-muted); font-size: var(--fs-xs); }
.grid-club .product { border-color: var(--club-line); }

/* ================= paVos: comparativa ================= */
.compare-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: start; }
.compare-intro .btn { margin-top: var(--s-5); }
.compare { padding: var(--s-5); }
.compare-head { display: flex; justify-content: space-between; padding: 0 var(--s-2) var(--s-3); color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-3); }
.value-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.value-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid transparent; }
.value-list li.best { background: var(--club-soft); border-color: var(--club-line); }
.v-rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.best .v-rank { background: var(--c-club); color: var(--c-on-club); }
.v-name { font-weight: var(--fw-semi); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.v-price { color: var(--c-action); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.best .v-price { color: var(--c-club); }
.value-list .bar { grid-column: 2 / -1; height: 6px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.value-list .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-action); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform .6s var(--ease); }
.best .bar > span { background: var(--c-club); }

/* ================= Club: premium dorado ================= */
.club-card { padding: var(--s-6); display: grid; gap: var(--s-5); border-color: var(--club-line); background: linear-gradient(160deg, rgba(64, 84, 183, .08), transparent 45%), var(--c-surface); box-shadow: var(--e-2); }
.club-card::before { content: ""; position: absolute; left: var(--s-5); right: var(--s-5); top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--c-club), transparent); }
.club-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.steps li { display: grid; justify-items: center; gap: var(--s-2); text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.steps b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: var(--fs-sm); }
.steps .done, .steps .now { color: var(--c-text); }
.steps .done b { background: var(--c-club); border-color: var(--c-club); color: var(--c-on-club); }
.steps .now b { border-color: var(--c-club); color: var(--c-club); }

/* ================= Bots: estado de canales ================= */
.board { display: grid; grid-template-columns: repeat(3, auto); gap: var(--s-2); }
.board div { min-width: 104px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); }
.board dt { font-size: var(--fs-xs); color: var(--c-muted); }
.board dd { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.channels { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.channel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-5); }
.ch-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--action-soft); color: var(--c-action); }
.ch-body h2 { font-size: var(--fs-lg); }
.ch-body p { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--s-1); }
.ch-progress { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.ch-progress small { color: var(--c-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); background: var(--c-surface-2); border: 1px solid var(--c-line); color: var(--c-text-2); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-muted); }
.status.soon { border-color: var(--action-line); }
.status.soon::before { background: var(--c-action); }

/* ================= Rewards: progreso verde ================= */
.rewards-card { padding: var(--s-6); display: grid; gap: var(--s-4); border-color: var(--reward-line); background: radial-gradient(90% 70% at 0% 0%, var(--reward-soft), transparent 60%), var(--c-surface); box-shadow: var(--e-2); }
.rw-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); }
.rw-top small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.rw-top strong { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.rw-top .rw-points { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--c-reward); font-variant-numeric: tabular-nums; }
.level-track { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.level-track li { display: grid; gap: 2px; padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-bg-raised); text-align: center; }
.level-track b { font-size: var(--fs-md); }
.level-track span { font-size: var(--fs-xs); color: var(--c-muted); }
.level-track .reached { border-color: var(--reward-line); background: var(--reward-soft); }
.level-track .current b { color: var(--c-reward); }

/* ================= Ayuda: lectura tranquila ================= */
.reading { padding-top: var(--s-7); }
.faq { display: grid; gap: var(--s-2); }
.faq details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.faq details[open] { border-color: var(--c-line-strong); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: var(--s-3) 56px var(--s-3) var(--s-5); cursor: pointer; font-weight: var(--fw-semi); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: var(--s-5); top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--c-action); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { padding: 0 var(--s-5) var(--s-5); color: var(--c-text-2); line-height: 1.7; max-width: 62ch; }

/* ================= Carrito: revisión y decisión ================= */
.flow { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.flow li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.flow li + li::before { content: ""; width: 24px; height: 1px; background: var(--c-line-strong); }
.flow b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: var(--fs-xs); }
.flow .done { color: var(--c-text); }
.flow .done b { background: var(--c-reward); border-color: var(--c-reward); color: var(--c-on-reward); }
.flow [aria-current="step"] { color: var(--c-text); }
.flow [aria-current="step"] b { border-color: var(--c-action); color: var(--c-action); background: var(--action-soft); }

.cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); align-items: start; }
.cart-box { padding: var(--s-1) var(--s-5); min-height: 200px; }
.cart-list { list-style: none; padding: 0; }
.cart-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.cart-item:last-child { border-bottom: 0; }
.ci-art { grid-row: span 2; align-self: start; width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--art, var(--c-surface-2)); color: rgba(255, 255, 255, .92); }
.ci-art svg { width: 26px; height: 26px; }
.ci-name { font-weight: var(--fw-semi); }
.ci-price { color: var(--c-muted); font-size: var(--fs-sm); }
.ci-sum { font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; }
.qty { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); }
.qty-btn { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); cursor: pointer; }
.qty-btn:hover { border-color: var(--c-action); }
.qty output { min-width: 36px; text-align: center; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.qty .rm { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid transparent; background: none; color: var(--c-muted); font-size: var(--fs-sm); cursor: pointer; }
.qty .rm:hover { color: var(--c-text); border-color: var(--c-line); }
.cart-summary { padding: var(--s-5); display: grid; gap: var(--s-3); text-align: center; position: sticky; top: calc(var(--header-h) + var(--s-5)); box-shadow: var(--e-2); }
.cart-summary h2 { font-size: var(--fs-lg); text-align: left; }
.cart-summary > .fine { text-align: left; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-3) 0; border-block: 1px solid var(--c-line); }
.total strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.points-line { text-align: left; font-size: var(--fs-sm); color: var(--c-reward); min-height: 1.5em; }
.clear-confirm { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2); }
.clear-confirm p { font-size: var(--fs-sm); }
.clear-confirm .row { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.sim-ok { text-align: left; padding: var(--s-3); border-radius: var(--r-md); background: var(--reward-soft); border: 1px solid var(--reward-line); color: #dff7a8; font-size: var(--fs-sm); }

/* ================= Pie ================= */
.site-footer { padding: var(--s-7) 0 var(--s-6); border-top: 1px solid var(--c-line); background: var(--c-bg-raised); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.foot-brand { display: grid; gap: var(--s-3); align-content: start; max-width: 40ch; }
.foot-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); margin-bottom: var(--s-2); }
.foot-col ul { list-style: none; padding: 0; display: grid; }
.foot-col a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-muted); text-decoration: none; font-size: var(--fs-sm); }
.foot-col a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }

/* ================= Tienda completa (011) ================= */
:root {
  /* Rareza: solo fondos de arte de artículo, no acentos de interfaz */
  --rar-comun: #3d4a66;
  --rar-raro: #1f5aa8;
  --rar-epico: #5b2ea6;
  --rar-legendario: #4161b6;
}
.badge.rarity { background: var(--c-scrim-art); border-color: rgba(255, 255, 255, .28); }

/* Tienda diaria */
.shop-info { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); color: var(--c-text-2); font-size: var(--fs-sm); }
.shop-info > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.shop-info .ico { color: var(--c-action); }
.shop-group + .shop-group { margin-top: var(--s-7); }
.shop-group-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.shop-group-title span { min-width: 28px; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-xs); }
.area-price { color: var(--c-text); font-weight: var(--fw-semi); font-size: var(--fs-sm); }

/* Hub de recargas */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.service { --tone: var(--c-action); --tone-soft: var(--action-soft); display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); }
.service[data-tone="club"] { --tone: var(--c-club); --tone-soft: var(--club-soft); border-color: var(--club-line); }
.service h2 { font-size: var(--fs-xl); }
.service p { color: var(--c-muted); font-size: var(--fs-sm); }
.service .svc-price { color: var(--c-text); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.service .btn { justify-self: start; margin-top: var(--s-2); }
.howto.stacked { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-5); }

/* Producto configurable */
.section.product-page { padding-top: var(--s-6); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
.config { display: grid; gap: var(--s-5); }
.config-intro { margin-bottom: calc(-1 * var(--s-2)); }
.field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-2); }
.field legend, .field-label { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semi); font-size: var(--fs-lg); padding: 0; margin-bottom: var(--s-2); }
.step-n { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.field .input, .field .select { width: 100%; max-width: 420px; }
.field-hint { color: var(--c-muted); font-size: var(--fs-sm); max-width: 60ch; }
.field-error { color: #ffc2ee; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.input[aria-invalid="true"] { border-color: var(--season-line); }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); }
.opt-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt > span { display: block; border: 1px solid var(--c-line); background: var(--c-surface); border-radius: var(--r-md); }
.opt:hover > span { border-color: var(--c-line-strong); }
.opt input:checked + span { border-color: var(--c-action); background: var(--action-soft); box-shadow: inset 0 0 0 1px var(--c-action); }
.opt input:focus-visible + span { outline: var(--focus); outline-offset: 3px; }
.opt-sm > span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.opt-card > .opt-body { display: grid; gap: var(--s-1); padding: var(--s-4); min-height: 112px; }
.opt-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.opt-top b { font-size: var(--fs-lg); }
.opt-price { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.opt-price s { font-size: var(--fs-xs); color: var(--c-muted); font-weight: var(--fw-medium); }
.opt-note { color: var(--c-muted); font-size: var(--fs-xs); }

.config-summary { padding: var(--s-5); display: grid; gap: var(--s-3); position: sticky; top: calc(var(--header-h) + var(--s-5)); box-shadow: var(--e-2); }
.config-summary h2 { font-size: var(--fs-lg); }
.summary-dl { display: grid; gap: var(--s-2); }
.summary-dl div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.summary-dl dt { color: var(--c-muted); }
.summary-dl dd { text-align: right; font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.cfg-status { font-size: var(--fs-sm); color: var(--c-reward); min-height: 1.5em; }
.cfg-status a { color: var(--c-action); font-weight: var(--fw-semi); }

/* Club: planes */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: var(--s-4); }
.plan { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); }
.plan h3 { font-size: var(--fs-xl); }
.plan-price { font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.plan .btn { justify-self: start; }
.plan .badge { justify-self: start; }
.plan.featured { border-color: var(--club-line); background: linear-gradient(160deg, rgba(64, 84, 183, .08), transparent 50%), var(--c-surface); box-shadow: var(--e-2); }

/* FriendBot: regalos */
.gift-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.gift-step { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); }
.gift-step.wide { grid-column: 1 / -1; }
.gift-step h2 { font-size: var(--fs-xl); }
.gift-step > p { color: var(--c-text-2); }
.bot-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.bot-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg-raised); font-size: var(--fs-sm); }
.gift-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.gift-preview { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg-raised); max-width: 420px; }
.gp-art { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--art); color: rgba(255, 255, 255, .92); }
.gp-art svg { width: 26px; height: 26px; }
.gp-body { display: grid; }
.gp-body span { color: var(--c-muted); font-size: var(--fs-xs); }
.gp-price { font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); cursor: pointer; color: var(--c-text-2); }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--c-action); }
.gift-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

/* Carrito: líneas configurables */
.ci-main { min-width: 0; }
.ci-config { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-1) var(--s-4); margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--c-bg-raised); border: 1px solid var(--c-line); }
.ci-config div { display: grid; }
.ci-config dt { font-size: var(--fs-xs); color: var(--c-muted); }
.ci-config dd { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.qty-fixed { color: var(--c-muted); font-size: var(--fs-sm); }
.qty .ci-link { margin-left: auto; font-size: var(--fs-sm); }
.qty .ci-link + .rm { margin-left: 0; }
.cta-row.center { justify-content: center; margin-top: 0; }

/* ================= Responsive ================= */
@media (min-width: 768px) { :root { --gutter: 24px; } }

/* Menú colapsado: marca · carrito · menú; idioma y moneda viven dentro del menú. Se colapsa antes de que los botones se solapen
   (desde 1100 px la barra completa entra compactada; ver «Cabecera compacta» al final de la cabecera). */
@media (max-width: 1099px) {
  .header-row { flex-wrap: wrap; }
  .header-tools { margin-left: auto; }
  .nav-toggle { display: inline-grid; place-content: center; gap: 4px; width: var(--tap); height: var(--tap); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); cursor: pointer; }
  .nav-toggle span { width: 18px; height: 2px; border-radius: 1px; background: var(--c-text); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) 0 var(--s-4); border-top: 1px solid var(--c-line); }
  .nav.open { display: flex; }
  .nav-link { min-height: 48px; font-size: var(--fs-md); padding: 0 var(--s-4); }
  .nav-link[aria-current="page"] { background: var(--c-surface); }
  .nav-link[aria-current="page"]::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .market { margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4) 0; border-top: 1px solid var(--c-line); }
  .market-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: var(--fs-sm); color: var(--c-muted); }
  .market .select { width: 100%; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-7) 0 var(--s-8); }
  .hero-sign { order: -1; justify-items: start; }
  .terminal { width: min(240px, 64vw); }
  .terminal-beam, .holo-base { display: none; }
  .hero::after { background: linear-gradient(0deg, var(--c-bg) 0%, rgba(10, 10, 31, .6) 45%, rgba(10, 10, 31, .38) 100%); }
  .split, .compare-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .howto, .trust { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-feature { grid-row: auto; min-height: 240px; }
  .page-head-grid.has-aside { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .emblem { display: none; }
  .cart-page { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .section { padding: var(--s-7) 0; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand-name { font-size: var(--fs-md); }
  .hero h1 { max-width: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .area-feature { grid-column: auto; }
  .search { flex-basis: 100%; max-width: none; }
  .sort { flex: none; }
  .shop-bar { position: static; }
  .section-head.row { align-items: start; }
  .channel { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); }
  .channel .status { grid-column: 2; justify-self: start; }
  .ch-progress { grid-column: 1 / -1; }
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board div { min-width: 0; padding: var(--s-2) var(--s-3); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
  .level-track { grid-template-columns: minmax(0, 1fr); }
  .level-track li { grid-template-columns: auto 1fr; text-align: left; gap: var(--s-3); }
  .rw-top { flex-wrap: wrap; }
  .cart-box { padding: var(--s-1) var(--s-4); }
  .flow li + li::before { width: 12px; }
  .club-card, .rewards-card { padding: var(--s-5); }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* Cuenta, verificación, pedidos y carrito con API (012) */
.account-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semi); border: 1px solid var(--c-line); background: var(--c-surface); white-space: nowrap; }
.account-link:hover { border-color: var(--c-action); color: var(--c-action); }
.gate { display: grid; justify-items: center; gap: var(--s-4); text-align: center; padding: var(--s-7) var(--s-5); margin-bottom: var(--s-5); }
.gate p { color: var(--c-text-2); }
.account { display: grid; gap: var(--s-5); }
.account-card { display: grid; gap: var(--s-4); padding: var(--s-6); }
.account-card .field-label { display: block; margin-bottom: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.account-card .input { width: 100%; }
.account-card .block { margin-top: var(--s-2); }
.shop-status { min-height: 1.4em; margin: 0 0 var(--s-4); }
.cart-msg { color: #ffc2ee; font-size: var(--fs-sm); min-height: 1.4em; margin-top: var(--s-3); }
.cart-item.is-unavailable { opacity: .75; }
.cart-item.is-unavailable .ci-sum { color: var(--c-muted); }
.rewards-inline { padding: var(--s-5); display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.rewards-inline .rw-top strong { font-size: var(--fs-lg); }
.rewards-inline .rw-points { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; color: var(--c-reward); }
.orders-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-top: var(--s-3); }
.order-row { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg-raised); font-size: var(--fs-sm); margin-top: var(--s-2); }
.order-row .status { justify-self: start; }
.summary-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-xs)/1.5 ui-monospace, Consolas, monospace; color: var(--c-text-2); background: var(--c-surface-2); border-radius: var(--r-sm); padding: var(--s-3); margin: 0; }
.bot-list li.bot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: center; }
.bot-list li.bot-row > small { grid-column: 1 / -1; color: var(--c-muted); font-size: var(--fs-xs); }
.bot-row .bot-name { font-weight: var(--fw-semi); }
.bot-row.state-elegible .status { border-color: var(--reward-line); color: var(--c-reward); }
.bot-row.state-error .status { border-color: var(--season-line); color: #ffc2ee; }
.bot-row.state-esperando_48h .status { border-color: var(--club-line); color: var(--c-club); }
.plans .btn { margin-top: var(--s-2); }
#verify-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Precios, promociones, método de pago y cotización (013) */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.price-regular { color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.price-final { color: var(--c-text); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.price > .badge.offer { align-self: center; }
.method-block { display: grid; gap: var(--s-2); }
.method-block .fine { margin: 0; }
.opt-method .opt-body { min-height: 0; }
.quote-box { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--action-line); border-radius: var(--r-md); background: var(--action-soft); }
.quote-box[hidden] { display: none; }
.quote-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-action); }
.quote-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.quote-lines li { display: flex; justify-content: space-between; gap: var(--s-3); }
.quote-box .fine { margin: 0; }

/* Responsive de la tienda completa (011) */
@media (max-width: 900px) {
  .services { grid-template-columns: minmax(0, 1fr); }
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .config-summary { position: static; }
  .gift-steps, .gift-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-card > .opt-body { min-height: 0; padding: var(--s-3); }
  .service, .plan, .gift-step { padding: var(--s-5); }
  .cart-item { grid-template-columns: 44px minmax(0, 1fr); }
  .ci-art { width: 44px; height: 44px; grid-row: auto; }
  .ci-sum { grid-column: 2; text-align: left; }
  .qty { flex-wrap: wrap; }
  .qty .ci-link { margin-left: 0; }
}

/* ================= Movimiento (solo opacity/transform) ================= */
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes scan { to { transform: translateY(380%); } }
@keyframes flash { 0%, 94%, 100% { opacity: 0; } 95% { opacity: .8; } 96% { opacity: .1; } 97% { opacity: .65; } }
@keyframes drift { to { transform: translateX(40px); } }
@keyframes twinkle { to { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bolt { opacity: 0; }
}

/* Verificación de correo y recuperación (015) */
.resend-box { display: grid; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.resend-box[hidden] { display: none; }

/* Imágenes públicas del catálogo en vivo (019): espacio 16:10 reservado, sin saltos de layout */
.p-art .p-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; }
.p-art.has-img > svg { display: none; }
.p-art .badges { z-index: 2; }

/* Bundles en la tienda en vivo (020): distinguibles sin cambiar el layout de tarjeta */
.product.is-bundle { border-color: var(--club-line); }

/* Tienda diaria en mosaico (020): tarjetas grandes con la figura sobresaliendo del panel, como la tienda oficial.
   Texto superpuesto abajo sobre degradado. Tamaños desde tileSize: sm, md (span 2), lg (span 3), xl (fila completa). */
.shop-group + .shop-group { margin-top: var(--s-9); }
.shop-group-title { padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); margin-bottom: 104px; }
.shop-mosaic { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 64px var(--s-5); padding-top: 0; }
.shop-mosaic .product { position: relative; display: block; aspect-ratio: 3 / 4; overflow: visible; border: 0; background: none; box-shadow: none; transition: transform var(--dur) var(--ease); }
.shop-mosaic .product:hover { transform: translateY(-4px); z-index: 3; }
.shop-mosaic .product::after { display: none; }
.shop-mosaic .p-art { position: absolute; inset: 0; aspect-ratio: auto; overflow: visible; background: none; display: block; }
.shop-mosaic .p-art::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%), var(--art, var(--c-surface-2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.shop-mosaic .p-art::after { display: none; }
.shop-mosaic .p-art > svg { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); }
/* La figura es más ancha que la tarjeta y asoma por arriba; las zonas transparentes no tapan nada. */
.shop-mosaic .p-art .p-img { position: absolute; z-index: 1; left: -25%; width: 150%; height: auto; max-width: none; top: auto; bottom: 10%; aspect-ratio: 1 / 1; object-fit: contain; transform-origin: center bottom; transition: transform var(--dur) var(--ease); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); pointer-events: none; }
.shop-mosaic .product:hover .p-img { transform: scale(1.05); }
.shop-mosaic .p-art .badges { z-index: 3; top: var(--s-3); }
.shop-mosaic .p-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-3) var(--s-3); border-radius: 0 0 var(--r-lg) var(--r-lg); background: linear-gradient(0deg, rgba(8, 6, 24, .92) 0%, rgba(8, 6, 24, .75) 55%, transparent 100%); }
.shop-mosaic .p-cat { color: rgba(255, 255, 255, .72); }
.shop-mosaic .p-name { font-size: var(--fs-md, 1rem); line-height: 1.2; overflow-wrap: anywhere; color: #fff; }
.shop-mosaic .p-desc { font-size: var(--fs-xs); color: rgba(255, 255, 255, .78); flex: none; }
.shop-mosaic .p-foot { border-top: 0; margin-top: var(--s-1); padding-top: 0; justify-content: flex-start; align-items: center; }
.shop-mosaic .p-foot .price { display: none; }
.shop-mosaic .p-foot .price:has(strong) { display: grid; }
.product.is-hero .p-art::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.shop-mosaic .size-md { aspect-ratio: 3 / 2.4; }
.shop-mosaic .size-md .p-img, .shop-mosaic .is-hero .p-img { left: auto; right: 4%; width: auto; height: 150%; bottom: -10%; clip-path: inset(-100% -100% 6.7% -100%); }
.shop-mosaic .is-hero { aspect-ratio: 4 / 3.2; }
.shop-mosaic .is-hero .p-body, .shop-mosaic .size-md .p-body { padding-right: 45%; }
.shop-mosaic .is-hero .p-name { font-size: var(--fs-xl); }
.shop-mosaic .size-md, .shop-mosaic .is-hero { grid-column: 1 / -1; }
@media (max-width: 639px) {
  .shop-mosaic { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 48px var(--s-3); }
  .shop-mosaic .is-hero .p-body, .shop-mosaic .size-md .p-body { padding-right: var(--s-3); }
  .shop-mosaic .is-hero .p-img, .shop-mosaic .size-md .p-img { right: 50%; transform: translateX(50%); left: auto; width: auto; height: 98%; bottom: 36%; clip-path: none; }
  .shop-mosaic .is-hero:hover .p-img, .shop-mosaic .size-md:hover .p-img { transform: translateX(50%) scale(1.04); }
}
@media (min-width: 640px) {
  .shop-mosaic .size-md { grid-column: span 2; }
  .shop-mosaic .is-hero { grid-column: span 2; aspect-ratio: 3 / 2.4; }
}
@media (min-width: 900px) {
  .shop-mosaic .size-xl { grid-column: 1 / -1; aspect-ratio: 24 / 10; }
  .shop-mosaic .size-xl .p-img { left: 50%; right: auto; transform: translateX(-50%); height: 128%; bottom: -8%; clip-path: inset(-100% -100% 6.25% -100%); }
  .shop-mosaic .size-xl:hover .p-img { transform: translateX(-50%) scale(1.03); }
  .shop-mosaic .size-xl .p-body { padding-right: 0; }
  .shop-mosaic .size-xl .p-name { font-size: 1.75rem; }
}
@media (min-width: 1100px) {
  .shop-mosaic .size-lg { grid-column: span 3; aspect-ratio: 3 / 1.9; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-mosaic .product:hover, .shop-mosaic .product:hover .p-img { transform: none; }
}

/* Cabecera compacta de la tienda y estado de precio como dato, no como botón (020) */
.shop-head { padding: var(--s-5) 0 var(--s-3); }
.shop-head h1 { font-size: var(--fs-2xl, 1.75rem); letter-spacing: -.02em; }
.shop-sub { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--s-1); }
.shop .shop-meta, .shop .shop-status { margin-bottom: var(--s-2); }
.price-pending { font-size: var(--fs-xs); color: var(--c-muted); font-weight: var(--fw-semi); padding: 4px var(--s-2); border: 1px dashed var(--c-line-strong); border-radius: var(--r-pill); white-space: nowrap; }
.shop-mosaic .p-foot { justify-content: flex-start; align-items: center; }
.shop-mosaic .p-foot .price { display: none; }
.shop-mosaic .p-foot .price:has(strong) { display: grid; }
.section.shop { padding-top: var(--s-4); }
/* Las figuras anchas no deben crear scroll horizontal: se recorta solo el eje X, el Y queda libre para que asomen por arriba. */
.shop-group { overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0; }
@media (max-width: 639px) { .shop-group-title { margin-bottom: 80px; } }

/* Arte de portada proporcional (020): la figura se calcula a partir del tamaño de la tarjeta, no a mano por oferta.
   Anchas: el render cuadrado ocupa el ancho de la tarjeta, la cabeza asoma por arriba y se corta abajo a la altura de la tarjeta.
   La fracción visible es (1 + asomo) / relación; el recorte inferior es 100% menos esa fracción. Válido para cualquier tienda. */
.shop-mosaic .product.is-hero .p-art .p-img,
.shop-mosaic .product.size-md .p-art .p-img { left: 0; right: auto; width: 100%; height: auto; top: -12%; bottom: auto; transform: none; clip-path: inset(-100% 0 10.4% 0); }
.shop-mosaic .product.is-hero:hover .p-art .p-img, .shop-mosaic .product.size-md:hover .p-art .p-img { transform: scale(1.03); }
@media (min-width: 640px) { .shop-mosaic .product.size-md .p-art .p-img, .shop-mosaic .product.is-hero .p-art .p-img { clip-path: inset(-100% 0 10.4% 0); } }
@media (min-width: 900px) {
  .shop-mosaic .product.size-xl { aspect-ratio: 3.05 / 1; }
  .shop-mosaic .product.size-xl .p-art .p-img { left: 6.2%; width: 89%; top: -25%; clip-path: inset(-100% 0 54% 0); }
  .shop-mosaic .product.size-xl:hover .p-art .p-img { transform: scale(1.02); }
}
@media (min-width: 1100px) {
  .shop-mosaic .product.size-lg .p-art .p-img { clip-path: inset(-100% 0 29% 0); }
}
/* Tarjetas 1x1: recorte lateral como la tienda oficial; objetos (mochila, pico, planeador...) más grandes porque su arte trae mucho margen. */
.shop-mosaic .product.size-sm .p-art { clip-path: inset(-40% 0 0 0); }
.shop-mosaic .product.size-sm:not(.type-atuendo):not(.type-gesto):not(.type-musica) .p-art .p-img { width: 100%; left: 0; bottom: 22%; }
.shop-mosaic .product.type-musica .p-art .p-img { left: 0; width: 100%; height: 100%; bottom: 0; object-fit: cover; aspect-ratio: auto; border-radius: var(--r-lg); filter: none; }

/* Uniformidad (020): todas las tarjetas 1x1 miden lo mismo y lo que asoma por arriba tiene tope (10% de la altura). */
.shop-mosaic .product.size-sm .p-art { clip-path: inset(-10% 0 0 0); }
.shop-mosaic .product.size-sm .p-art .p-img { left: -14%; width: 128%; bottom: 12%; }
/* Lote o vehículo en 1x1: composición completa dentro de la tarjeta, no a tamaño de cabecera. */
.shop-mosaic .product.size-sm.is-bundle .p-art .p-img { left: 12%; width: 76%; bottom: 26%; }
.shop-mosaic .product.size-sm.type-musica .p-art .p-img { left: 0; width: 100%; bottom: 0; }
/* 2x1: misma altura que una tarjeta 1x1 de su fila (ancho ~2.1 veces), para que no queden filas desparejas. */
@media (min-width: 640px) {
  .shop-mosaic .product.size-md { aspect-ratio: 1.575 / 1; }
  .shop-mosaic .product.size-md .p-art .p-img { clip-path: inset(-100% 0 29% 0); }
}

/* Planeadores y vehículos son anchos: no deben recortarse por los lados. */
.shop-mosaic .product.size-sm.type-planeador .p-art .p-img, .shop-mosaic .product.size-sm.type-vehiculo:not(.is-bundle) .p-art .p-img { left: 0; width: 100%; bottom: 20%; }
#shop-results { overflow-x: clip; overflow-y: visible; }
#home-featured { overflow-x: clip; overflow-y: visible; }   /* portada: mismo recorte lateral que la Tienda diaria */
.shop-mosaic .product[hidden] { display: none; }
.shop-more-wrap { display: flex; justify-content: center; margin-top: var(--s-5); }
.shop-more { min-width: 140px; min-height: 44px; font-weight: var(--fw-semi); }

/* Cabecera del sitio (020): más grande y sin fijar; desaparece al desplazar, como la oficial. La barra de filtros tampoco se fija. */
.site-header { position: relative; }
.shop-bar { position: static; }
@media (min-width: 901px) {
  :root { --header-h: 88px; }
  .brand img { width: 52px; height: 52px; }
  .brand-name { font-size: 1.5rem; }
  .nav-link { font-size: var(--fs-md); padding: 0 var(--s-4); }
  .header-row { gap: var(--s-5); }
}

/* Navegación lateral de secciones (020): puntos fijos y ventana emergente con la lista, como la tienda oficial. */
.shop-rail { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.shop-rail[hidden] { display: none; }
.rail-toggle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--c-line-strong); background: var(--c-surface-2); color: var(--c-text); cursor: pointer; }
.rail-toggle:hover, .rail-toggle[aria-expanded="true"] { background: var(--c-text); color: var(--c-bg); }
.rail-dots { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) 0; border-radius: var(--r-pill); background: rgba(8, 6, 24, .82); border: 1px solid var(--c-line); max-height: 60vh; overflow: hidden; }
.rail-dot { position: relative; width: 28px; height: 22px; background: none; border: 0; cursor: pointer; }
.rail-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .38); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.rail-dot.is-current::before, .rail-dot:hover::before { background: #fff; transform: scale(1.35); }
.rail-menu { position: absolute; left: 56px; top: 0; width: min(320px, calc(100vw - 88px)); max-height: min(70vh, 520px); overflow-y: auto; padding: var(--s-2); display: grid; gap: 2px; border-radius: var(--r-lg); background: rgba(10, 8, 28, .97); border: 1px solid var(--c-line-strong); box-shadow: var(--e-2, 0 16px 40px rgba(0, 0, 0, .5)); }
.rail-menu[hidden] { display: none; }
.rail-item { text-align: left; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-md); border: 2px solid transparent; background: none; color: var(--c-text); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-sm); cursor: pointer; }
.rail-item:hover, .rail-item:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); outline: none; }
.rail-item.is-current { background: rgba(255, 255, 255, .85); color: #0a0a1f; }
/* Pantallas que no dejan margen lateral (menos de 1300px): solo el botón, abajo a la izquierda, sin los puntos. */
@media (max-width: 1299px) {
  .shop-rail { top: auto; bottom: 16px; left: 12px; transform: none; }
  .rail-dots { display: none; }
  .rail-menu { top: auto; bottom: 56px; left: 0; }
}
.shop-group { scroll-margin-top: var(--s-4); }

/* Vehículos anchos: el render trae su propio fondo; cubre toda la tarjeta para que el sombreado llegue arriba. */
.shop-mosaic .product.type-vehiculo:not(.size-sm) .p-art .p-img { top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 62%; clip-path: none; border-radius: var(--r-lg); filter: none; }

/* ===== Cuadrícula de la tienda como la oficial (020) =====
   tileSize es el número de columnas que ocupa una tarjeta: 1x1, 2x1 (2 columnas), 3x1 (3) y 4x1 (fila completa).
   4 columnas fijas desde 900px (3 desde 640px, 2 en móvil). Todas las tarjetas de una fila miden lo mismo: la altura de fila
   se calcula con el ancho del contenedor (container query), sin dense, así que se respeta el orden y lo que sobra queda al final. */
#shop-results { container-type: inline-size; }
.shop-mosaic.shop-mosaic { --cols: 2; --gap: 12px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 1.36); grid-auto-flow: row; }
@media (min-width: 640px) { .shop-mosaic.shop-mosaic { --cols: 3; } }
@media (min-width: 900px) { .shop-mosaic.shop-mosaic { --cols: 4; } }
.shop-mosaic.shop-mosaic .product { aspect-ratio: auto; height: 100%; grid-column: span 1; --R: 0.75; --a: 1; }
/* Anchos de tarjeta según columnas disponibles */
.shop-mosaic.shop-mosaic .product.size-md { grid-column: span 2; --R: 1.55; --a: 1; }
.shop-mosaic.shop-mosaic .product.size-lg { grid-column: span 2; --R: 1.55; --a: 1; }
.shop-mosaic.shop-mosaic .product.size-xl { grid-column: 1 / -1; --R: 1.55; --a: 1; }
@media (min-width: 640px) {
  .shop-mosaic.shop-mosaic .product.size-lg { grid-column: span 3; --R: 2.35; --a: .92; }
  .shop-mosaic.shop-mosaic .product.size-xl { --R: 2.35; --a: .92; }
}
@media (min-width: 900px) { .shop-mosaic.shop-mosaic .product.size-xl { --R: 3.15; --a: .89; } }
/* Arte de las tarjetas anchas: cuadrado de ancho a*ancho de tarjeta, cabeza asomando ~7%, recortado a la altura de la tarjeta. */
.shop-mosaic.shop-mosaic .product:not(.size-sm) .p-art .p-img {
  left: calc((1 - var(--a)) / 2 * 100%); right: auto; bottom: auto; width: calc(var(--a) * 100%); height: auto; aspect-ratio: 1 / 1;
  top: calc(-100% * (0.07 + 0.066 * var(--a) * var(--R)));
  clip-path: inset(-100% 0 calc(100% - 100% * (1.07 + 0.066 * var(--a) * var(--R)) / (var(--a) * var(--R))) 0);
  transform: none; object-fit: contain; object-position: center;
}
.shop-mosaic.shop-mosaic .product:not(.size-sm):hover .p-art .p-img { transform: scale(1.02); }
/* Vehículos anchos siguen cubriendo toda la tarjeta */
.shop-mosaic.shop-mosaic .product.type-vehiculo:not(.size-sm) .p-art .p-img { top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 62%; clip-path: none; }
/* Texto de las anchas sin reservar un lado */
.shop-mosaic.shop-mosaic .product:not(.size-sm) .p-body { padding-right: var(--s-3); }
.shop-mosaic.shop-mosaic .product.size-xl .p-name { font-size: 1.75rem; }

/* Tienda en pantallas grandes (020): contenido más ancho, como la oficial (~80% de la ventana, tope 1400px), y tarjetas más altas. */
@media (min-width: 1300px) {
  body[data-page="fortnite"] .wrap { width: min(1400px, calc(100% - 280px)); }
}

/* Botón Comprar paVos y packs de paVos en tarjetas de color (020) */
.shop-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.opt-grid.pack-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); padding-top: var(--s-6); }
.pack { position: relative; display: block; cursor: pointer; border-radius: var(--r-lg); color: #fff; min-height: 340px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pack input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pack:hover { transform: translateY(-3px); }
.pack:has(input:checked) { box-shadow: inset 0 0 0 3px #fff, 0 10px 28px rgba(0, 0, 0, .4); }
.pack:has(input:focus-visible) { outline: 2px solid var(--c-action); outline-offset: 3px; }
.pack-0 { background: linear-gradient(180deg, #2dbb45, #0f7a26); }
.pack-1 { background: linear-gradient(180deg, #2ea3ff, #0d58d6); }
.pack-2 { background: linear-gradient(180deg, #a13bd6, #5a1c93); }
.pack-3 { background: linear-gradient(180deg, #6154d4, #2b246f); }
.pack-body { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--s-3); height: 100%; min-height: 340px; padding: var(--s-8) var(--s-3) var(--s-4); text-align: center; }
.pack-amount { font-size: var(--fs-xl); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; }
.pack-amount small { display: block; font-size: var(--fs-sm); opacity: .9; }
.pack-art { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0; color: rgba(255, 255, 255, .92); }
.pack-art svg { width: 56px; height: 56px; margin: -8px -6px; }
.pack-price { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.pack-price s { display: block; font-size: var(--fs-xs); opacity: .8; }
.pack-ribbon { position: absolute; z-index: 2; top: -22px; left: 50%; transform: translateX(-50%); min-width: 92px; padding: 6px var(--s-3) 10px; border-radius: var(--r-md) var(--r-md) 14px 14px; background: #eaf4ff; color: #0a2a66; text-align: center; line-height: 1.1; }
.pack-ribbon b { display: block; font-size: var(--fs-lg); }
.pack-ribbon small { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .pack:hover { transform: none; } }

/* Idioma y moneda (020): dos botones con bandera y menú desplegable */
.locale { display: flex; align-items: center; gap: var(--s-2); }
.lc { position: relative; }
.lc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-text); font-weight: var(--fw-semi); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.lc-btn:hover, .lc-btn[aria-expanded="true"] { border-color: var(--c-line-strong); }
.lc-flag { flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.lc-chev { flex: none; opacity: .7; }
.lc-menu { position: absolute; z-index: 60; right: 0; top: calc(100% + 8px); min-width: 250px; padding: var(--s-2); display: grid; gap: 2px; border-radius: var(--r-lg); background: rgba(10, 8, 28, .98); border: 1px solid var(--c-line-strong); box-shadow: var(--e-2, 0 16px 40px rgba(0, 0, 0, .5)); }
.lc-menu[hidden] { display: none; }
.lc-title { padding: 8px 12px 6px; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.lc-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--c-text); font-weight: var(--fw-semi); text-align: left; cursor: pointer; }
.lc-opt:hover, .lc-opt:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.lc-opt[aria-selected="true"] { background: rgba(255, 255, 255, .14); }
.lc-name small { margin-left: 6px; font-weight: var(--fw-medium); color: var(--c-muted); }
@media (max-width: 1099px) { .locale { flex-wrap: wrap; margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4) 0; border-top: 1px solid var(--c-line); } .lc-menu { left: 0; right: auto; } }
@media (max-width: 1099px) {
  .lc-menu { min-width: min(250px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
  .lc:last-child .lc-menu { left: auto; right: 0; }
  .lc:first-child .lc-menu { left: 0; right: auto; }
}

/* Cabecera en pantallas anchas (020): hasta 1400px de ancho; la regla de la tienda no debe estrecharla (por eso la especificidad). */
@media (min-width: 1100px) {
  body[data-page] .site-header .wrap { width: min(1400px, calc(100% - 48px)); }
}
@media (min-width: 1100px) { .header-tools .locale { margin-right: var(--s-3); } .header-tools { gap: var(--s-2); } }

/* Etiqueta «Comprar» al pasar el cursor (020): cuña verde abajo a la derecha, solo visual (aún no hay precio de venta ni compra). */
/* Etiqueta de compra: insignia redonda con carrito y ondas (opción 27) + fondo que se ilumina (opción 25) */
.shop-mosaic .buy-tag { position: absolute; z-index: 4; right: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #8a3cff, #382873); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 18px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.shop-mosaic .buy-tag::before,
.shop-mosaic .buy-tag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #b98cff; opacity: 0; }
.shop-mosaic .buy-tag b { display: grid; place-items: center; }
.shop-mosaic .buy-tag b span { display: none; }
.shop-mosaic .buy-tag svg { width: 20px; height: 20px; stroke-width: 2.1; flex: none; }
.shop-mosaic .p-art::before { transition: filter .3s ease; }
@keyframes vs-buy-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
@media (hover: hover) {
  .shop-mosaic .product:hover .buy-tag { opacity: 1; transform: scale(1); }
  .shop-mosaic .product:hover .buy-tag::before { animation: vs-buy-ripple 1.6s infinite; }
  .shop-mosaic .product:hover .buy-tag::after { animation: vs-buy-ripple 1.6s .8s infinite; }
  .shop-mosaic .product:hover .p-art::before { filter: brightness(1.25) saturate(1.15); }
}
@media (prefers-reduced-motion: reduce) { .shop-mosaic .buy-tag { transition: none; } .shop-mosaic .buy-tag::before, .shop-mosaic .buy-tag::after { animation: none !important; } }

/* Títulos de sección (020): mayúsculas, grueso e inclinado (Montserrat Black Italic, alojada en el sitio). Sin contador. */
@font-face { font-family: "Montserrat Display"; font-style: italic; font-weight: 900; font-display: swap; src: url("assets/fonts/montserrat-900-italic-latin.woff2") format("woff2"); }
.shop-group-title { font-family: "Montserrat Display", "Arial Black", Impact, sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: 1; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.9rem); padding: 0; border: 0; margin-bottom: 56px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.shop-group + .shop-group { margin-top: var(--s-8); }
@media (max-width: 639px) { .shop-group-title { margin-bottom: 44px; } }

/* Hover (020): al crecer, la figura de una tarjeta 1x1 sube por encima de todo y su cabeza no se recorta. */
.shop-mosaic .product.size-sm .p-art { transition: clip-path var(--dur) var(--ease); }
.shop-mosaic .product:hover { z-index: 20; }
/* Sin restringir a dispositivos con cursor: en celular y tableta el toque deja la tarjeta en estado hover y la figura crece igual. */
.shop-mosaic .product.size-sm:hover .p-art { clip-path: inset(-45% 0 0 0); }

/* Tarjetas anchas (020): el recorte inferior lo hace la tarjeta (a su borde exacto, a cualquier ancho) y por arriba la figura queda libre. */
.shop-mosaic.shop-mosaic .product:not(.size-sm):not(.type-vehiculo) .p-art { clip-path: inset(-60% 0 0 0); }
.shop-mosaic.shop-mosaic .product:not(.size-sm):not(.type-vehiculo) .p-art .p-img { clip-path: none; }

/* Orden de capas (020): fondo de color < degradado inferior < figura < texto. La figura nunca queda apagada por el degradado. */
.shop-mosaic .p-art::before { z-index: 0; }
.shop-mosaic .p-art::after { display: block; content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 0 0 var(--r-lg) var(--r-lg); background: linear-gradient(0deg, rgba(8, 6, 24, .95) 0%, rgba(8, 6, 24, .7) 55%, transparent 100%); pointer-events: none; }
.shop-mosaic .p-art .p-img { z-index: 1; }
.shop-mosaic .p-body { background: none; z-index: 3; }
.shop-mosaic .p-cat, .shop-mosaic .p-name, .shop-mosaic .p-desc { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 12px rgba(0, 0, 0, .5); }
.shop-mosaic .product.type-vehiculo:not(.size-sm) .p-art::after { display: none; }

/* Revierte el orden de capas del attempt 033 (020): el degradado inferior va ENCIMA de la figura, como antes. */
.shop-mosaic .p-art::after { display: none; }
.shop-mosaic .p-body { z-index: 2; background: linear-gradient(0deg, rgba(8, 6, 24, .92) 0%, rgba(8, 6, 24, .75) 55%, transparent 100%); }
.shop-mosaic .p-cat, .shop-mosaic .p-name, .shop-mosaic .p-desc { text-shadow: none; }

/* Capas entre tarjetas (020): cada tarjeta es una capa propia; las siguientes quedan por encima de las anteriores,
   así la cabeza que sobresale hacia la fila de arriba nunca queda tapada por el degradado de la tarjeta de arriba. */
.shop-mosaic .product { isolation: isolate; }
/* Vehículos anchos: el coche más centrado y algo más abajo en la tarjeta (020). */
.shop-mosaic.shop-mosaic .product.type-vehiculo:not(.size-sm) .p-art .p-img { object-position: center 51%; }

/* ================================================================
   VengaStore 2026 · identidad Indigo Orbit
   Capa visual compartida: conserva la estructura y contratos del sitio.
   ================================================================ */

/* Atmósfera y escala editorial */
body {
  background-color: var(--c-bg);
  background-image:
    radial-gradient(circle at 8% 7%, rgba(56, 40, 115, .13), transparent 26rem),
    radial-gradient(circle at 94% 16%, rgba(47, 121, 223, .10), transparent 28rem),
    radial-gradient(circle, rgba(31, 36, 46, .075) 1.15px, transparent 1.25px);
  background-size: auto, auto, 17px 17px;
  background-attachment: fixed;
}

main { position: relative; }
.wrap { width: min(1220px, 100% - 2 * var(--gutter)); }
.section { padding: clamp(72px, 8vw, 110px) 0; }
.section.alt {
  background:
    linear-gradient(rgba(247, 240, 234, .93), rgba(247, 240, 234, .93)),
    radial-gradient(circle, rgba(31, 36, 46, .09) 1.1px, transparent 1.2px);
  background-size: auto, 17px 17px;
  border: 0;
}
.section-head { margin-bottom: clamp(30px, 4vw, 52px); }
.hero h1,
.page-head h1,
.section-head h2,
.shop-head h1,
.shop-group-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.section h2 { font-size: clamp(2rem, 4.2vw, 3.65rem); max-width: 16ch; }
.section-lead { font-size: 1.04rem; }
.kicker {
  margin-bottom: 14px;
  color: var(--c-action-text);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.kicker::before { width: 30px; height: 3px; }

/* Cabecera flotante */
.demo-bar {
  position: relative;
  z-index: 45;
  border: 0;
  background: #1f242e;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .035em;
}
.site-header {
  position: sticky;
  top: 10px;
  z-index: 40;
  padding-inline: var(--gutter);
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
body[data-page] .site-header .wrap { width: min(1400px, 100%); }
.header-row {
  min-height: 66px;
  padding: 7px 9px 7px 12px;
  border: 1px solid rgba(31, 36, 46, .10);
  border-radius: 14px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 18px 55px rgba(38, 29, 84, .10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  pointer-events: auto;
}
.brand { gap: 10px; }
.brand img {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--action-line), 0 8px 18px rgba(38, 29, 84, .14);
}
.brand-name { color: var(--c-text); font-size: 1.08rem; letter-spacing: -.03em; }
.brand-name b { color: var(--c-action); }
.nav { justify-content: center; gap: 4px; }
.nav-link {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 7px;
  color: #5f626b;
  font-weight: 650;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.nav-link:hover { color: var(--c-text); background: var(--action-soft); transform: translateY(-1px); }
.nav-link[aria-current=page] { color: var(--c-on-action); background: var(--c-action); }
.nav-link[aria-current=page]::after { display: none; }
.account-link,
.cart-btn,
.nav-toggle,
.lc-btn {
  border-color: rgba(31, 36, 46, .12);
  background: #fff;
  box-shadow: 0 5px 16px rgba(38, 29, 84, .06);
}
.account-link { border-radius: 7px; }
.account-link:hover,
.cart-btn:hover,
.lc-btn:hover,
.lc-btn[aria-expanded=true] { border-color: var(--c-action); color: var(--c-action-text); }
.cart-count[data-zero=true] { background: #d9dadd; color: #555962; }
.lc-menu {
  border-color: rgba(31, 36, 46, .12);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 60px rgba(38, 29, 84, .16);
}
.lc-opt:hover,
.lc-opt:focus-visible { background: var(--action-soft); color: var(--c-action-text); }
.lc-opt[aria-selected=true] { background: var(--action-soft); color: var(--c-action-text); }

/* Botones y controles */
.select,
.input {
  border-color: rgba(31, 36, 46, .14);
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 1px 2px rgba(31, 36, 46, .03);
}
.select:hover,
.input:hover { border-color: rgba(31, 36, 46, .32); }
.select:focus,
.input:focus { border-color: var(--c-action); box-shadow: 0 0 0 4px var(--action-soft); }
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(38, 29, 84, .07);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), background-color .24s ease, border-color .24s ease;
}
.btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .28) 45%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .55s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(32, 24, 70, .14); }
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(-1px); }
.btn-primary { background: var(--c-action); box-shadow: 0 12px 28px rgba(56, 40, 115, .28); }
.btn-primary:hover { background: var(--c-action-hover); box-shadow: 0 18px 36px rgba(56, 40, 115, .34); }
.btn-ghost { border-color: rgba(31, 36, 46, .18); background: rgba(255, 255, 255, .78); color: var(--c-text); }
.btn-ghost:hover { border-color: var(--c-action); background: #fff; color: var(--c-action); }
.btn-danger { border-color: var(--action-line); color: var(--c-action-hover); }
.btn-danger:hover { background: var(--action-soft); }

/* Hero editorial inspirado en el ritmo visual de la referencia */
.hero {
  min-height: max(720px, calc(100svh - 94px));
  margin-top: -66px;
  padding-top: 66px;
  border: 0;
  background:
    radial-gradient(circle at 79% 30%, rgba(56, 40, 115, .24), transparent 19rem),
    radial-gradient(circle at 88% 64%, rgba(47, 121, 223, .16), transparent 22rem),
    linear-gradient(135deg, #fffdfb 0%, #f7f0ea 55%, #fffaf7 100%);
}
.hero[data-season=fortnitemares] {
  --sky-top: #fffdfb;
  --sky-mid: #f4f0ea;
  --sky-low: #e6dff2;
}
.hero-scene {
  z-index: 0;
  opacity: .10;
  filter: grayscale(.3) saturate(.65);
  mix-blend-mode: multiply;
  display: none;   /* paisaje nocturno antiguo: sobre el fondo claro solo dejaba manchas grises */
}
.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(circle, rgba(31, 36, 46, .13) 1.2px, transparent 1.3px);
  background-size: 17px 17px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 48%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 48%, #000 100%);
  pointer-events: none;
}
.hero::after {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 250, 247, .97) 0%, rgba(255, 250, 247, .86) 47%, rgba(255, 250, 247, .18) 76%, transparent 100%),
    linear-gradient(0deg, rgba(255, 250, 247, .98), transparent 27%);
}
.hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
  gap: clamp(36px, 5vw, 78px);
  padding: clamp(120px, 13vh, 170px) 0 clamp(88px, 10vh, 130px);
}
.hero-copy { position: relative; }
.eyebrow {
  border-color: rgba(56, 40, 115, .22);
  border-radius: 6px;
  background: rgba(255, 255, 255, .78);
  color: var(--c-action-text);
  box-shadow: 0 10px 30px rgba(38, 29, 84, .07);
}
.eyebrow .dot { background: var(--c-action); box-shadow: 0 0 0 5px var(--action-soft); }
.hero h1 {
  max-width: 10.5ch;
  color: var(--c-text);
  font-size: var(--fs-hero);
  line-height: .91;
  letter-spacing: -.065em;
}
.hero h1 em { color: var(--c-action); }
.lead { max-width: 47ch; color: var(--c-text-2); font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.72; }
.hero-actions { gap: 14px; }
.hero-points { color: #656a73; }
.hero-points li {
  padding: 7px 10px;
  border: 1px solid rgba(31, 36, 46, .08);
  border-radius: 6px;
  background: rgba(255, 255, 255, .58);
}
.hero-points .ico { color: var(--c-reward); }
.hero-sign::before {
  content: '';
  position: absolute;
  width: min(520px, 48vw);
  aspect-ratio: 1;
  border: 1px solid rgba(56, 40, 115, .24);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(56, 40, 115, .05), 0 0 0 84px rgba(47, 121, 223, .04);
  animation: vs-orbit 12s linear infinite;
}
.hero-sign::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 7%;
  width: 110px;
  aspect-ratio: 1;
  border-radius: 48% 52% 61% 39%;
  background: #6252d2;
  transform: rotate(18deg);
  animation: vs-blob 7s ease-in-out infinite;
}
.terminal {
  width: min(410px, 100%);
  padding: 12px;
  border: 1px solid rgba(31, 36, 46, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 34px 90px rgba(41, 31, 92, .22);
  animation: vs-terminal 7s ease-in-out infinite;
}
.terminal-bar,
.terminal-foot { color: #6c7079; }
.terminal-bar .led { background: var(--c-reward); box-shadow: 0 0 0 4px var(--reward-soft); }
.terminal-screen {
  border: 1px solid rgba(31, 36, 46, .08);
  border-radius: 14px;
  background: #f6eee9;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .22);
}
.holo-scan {
  opacity: .26;
  background: repeating-linear-gradient(0deg, rgba(47, 121, 223, .10) 0 1px, transparent 1px 5px);
}
.holo-scan::after { background: linear-gradient(180deg, transparent, rgba(47, 121, 223, .24), transparent); }
.terminal-beam { background: linear-gradient(180deg, var(--action-line), transparent); }
.holo-base { background: radial-gradient(closest-side, rgba(47, 121, 223, .45), transparent); }

/* Tarjetas con profundidad y jerarquía */
.card,
.area,
.howto li,
.service,
.plan,
.gift-step,
.account-card,
.gate,
.cart-box,
.cart-summary,
.config-summary,
.rewards-inline {
  border: 1px solid rgba(31, 36, 46, .09);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--e-1);
}
.card { border-radius: 16px; }
.note {
  border-color: rgba(56, 40, 115, .18);
  background: rgba(247, 240, 234, .82);
}
.badge { color: #fff; }
.badge.soft { color: var(--c-muted); background: var(--c-surface-2); }
.badge.gold { color: #4054b7; background: var(--club-soft); }
.badge.season { color: #5e3de2; background: var(--season-soft); }
.badge.new { color: var(--c-action-text); background: var(--action-soft); }
.empty-state {
  border-color: rgba(31, 36, 46, .18);
  background: rgba(255, 255, 255, .55);
}

/* Servicios de portada */
.areas { gap: clamp(16px, 2.2vw, 28px); }
.area {
  min-height: 245px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 18px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.area::before {
  content: 'V';
  position: absolute;
  right: -8px;
  top: -48px;
  color: rgba(31, 36, 46, .035);
  font-family: var(--font-display);
  font-size: 13rem;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
}
.area:hover { transform: translateY(-9px) rotate(-.35deg); box-shadow: 0 30px 68px rgba(38, 29, 84, .15); }
.area-ico {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}
.area-k {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  font-style: italic;
  text-transform: uppercase;
}
.area-d,
.area-go,
.area-price { position: relative; }
.area-feature {
  min-height: 390px;
  border: 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .22), transparent 18rem),
    linear-gradient(145deg, #4b3a9c 0%, #30246f 58%, #191937 100%);
  box-shadow: 0 28px 72px rgba(41, 31, 92, .30);
}
.area-feature::before { color: rgba(255, 255, 255, .10); }
.area-feature::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.area-feature .area-ico { color: #ffffff; background: rgba(255, 255, 255, .18); }
.area-feature .area-d,
.area-feature .area-go,
.area-feature .area-price { color: rgba(255, 255, 255, .80); }
.area-feature .area-k { font-size: clamp(2rem, 4vw, 3.6rem); max-width: 8ch; line-height: .95; }

/* Pasos y franja de confianza */
.howto { gap: clamp(16px, 2.2vw, 28px); }
.howto li {
  position: relative;
  min-height: 190px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.howto li:hover { transform: translateY(-6px); box-shadow: var(--e-2); }
.howto-n {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--c-action);
  color: var(--c-on-action);
  box-shadow: 0 10px 24px rgba(56, 40, 115, .26);
}
.howto h3 { margin-top: 7px; }
.trust-wrap.alt {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(56, 40, 115, .22), transparent 21rem),
    radial-gradient(circle, rgba(255, 255, 255, .055) 1px, transparent 1.2px),
    #17172d;
  background-size: auto, 17px 17px, auto;
  color: #fff;
}
.trust { gap: clamp(22px, 4vw, 56px); }
.trust li {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.trust .ico { color: #79a9ff; }
.trust span { color: rgba(255, 255, 255, .62); }

/* Cabeceras interiores */
.page-head {
  margin-top: -66px;
  padding: 142px 0 68px;
  border: 0;
  background:
    radial-gradient(circle at 82% 32%, rgba(56, 40, 115, .20), transparent 22rem),
    radial-gradient(circle, rgba(31, 36, 46, .085) 1.1px, transparent 1.2px),
    linear-gradient(130deg, #fffdfb, #f7f0ea);
  background-size: auto, 17px 17px, auto;
}
.page-head::before {
  right: -8%;
  top: -95%;
  width: 62%;
  height: 280%;
  background: radial-gradient(closest-side, rgba(47, 121, 223, .14), transparent);
}
.page-head h1 {
  max-width: 18ch;
  color: var(--c-text);
  font-size: clamp(2.8rem, 6vw, 5.7rem);
  line-height: .94;
}
.page-lead { font-size: 1.05rem; line-height: 1.75; }
.page-head.compact { padding: 115px 0 42px; }
.page-head.compact h1 { font-size: clamp(2.1rem, 4.5vw, 3.8rem); }
.page-head.premium {
  background:
    radial-gradient(circle at 82% 30%, rgba(91, 69, 189, .28), transparent 23rem),
    radial-gradient(circle, rgba(31, 36, 46, .08) 1.1px, transparent 1.2px),
    linear-gradient(130deg, #fffdfb, #f1ecf7);
  background-size: auto, 17px 17px, auto;
}
.page-head.calm {
  background:
    radial-gradient(circle, rgba(31, 36, 46, .08) 1.1px, transparent 1.2px),
    #f7f0ea;
  background-size: 17px 17px, auto;
}
.emblem {
  border-color: rgba(31, 36, 46, .09);
  border-radius: 24px;
  background: rgba(255, 255, 255, .76);
  transform: rotate(3deg);
}
.crumbs a:hover { color: var(--c-action); }

/* Tienda y catálogo */
.shop-head { padding-top: clamp(54px, 7vw, 90px); }
.shop-head h1 { font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: .95; }
.shop-bar {
  position: sticky;
  top: 88px;
  z-index: 25;
  margin-inline: var(--gutter);
  border: 1px solid rgba(31, 36, 46, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 38px rgba(38, 29, 84, .08);
}
.shop-group-title {
  color: var(--c-text);
  text-shadow: none;
}
.shop-group-title span {
  background: var(--action-soft);
  color: var(--c-action-hover);
}
.shop-mosaic .product {
  filter: drop-shadow(0 18px 24px rgba(39, 29, 88, .12));
  transition: transform .34s var(--ease), filter .34s var(--ease);
}
.shop-mosaic .product:hover {
  transform: translateY(-9px) rotate(-.2deg);
  filter: drop-shadow(0 28px 34px rgba(39, 29, 88, .20));
}
.shop-mosaic .p-art::before {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
}
.shop-mosaic .p-body { border-radius: 0 0 16px 16px; }
.shop-mosaic .p-art .p-img { filter: drop-shadow(0 16px 18px rgba(23, 18, 36, .38)); }
.shop-more { border-radius: 7px; }
.rail-dot,
.rail-toggle {
  border-color: rgba(31, 36, 46, .15);
  background: rgba(255, 255, 255, .92);
  color: var(--c-text);
  box-shadow: 0 7px 22px rgba(38, 29, 84, .10);
}
.rail-dot.is-current { border-color: var(--c-action); background: var(--c-action); }
.rail-menu {
  border-color: rgba(31, 36, 46, .12);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--e-2);
}

/* Configuradores, cuenta y carrito */
.service,
.plan,
.gift-step,
.account-card,
.gate,
.cart-box,
.cart-summary,
.config-summary,
.rewards-inline { border-radius: 16px; }
.service,
.plan,
.gift-step,
.account-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.service:hover,
.plan:hover,
.gift-step:hover { transform: translateY(-5px); box-shadow: var(--e-2); }
.opt > span {
  border-color: rgba(31, 36, 46, .12);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 22px rgba(40, 30, 90, .06);
  transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}
.opt:hover > span { transform: translateY(-2px); border-color: var(--action-line); box-shadow: 0 14px 30px rgba(40, 30, 90, .10); }
.opt input:checked + span { background: #f6f2ff; box-shadow: inset 0 0 0 1px var(--c-action), 0 14px 30px rgba(56, 40, 115, .11); }
.pack {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 20px 42px rgba(38, 30, 44, .16);
}
.pack::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .65s var(--ease);
  pointer-events: none;
}
.pack:hover::after { transform: translateX(130%); }
.pack:hover { transform: translateY(-8px); }
.pack:has(input:checked) { box-shadow: inset 0 0 0 3px #fff, 0 25px 48px rgba(31, 36, 46, .22); }
.field-error,
.cart-msg { color: #b42338; }
.qty-btn { background: #fff; }
.qty-btn:hover { background: var(--action-soft); }
.quote-box { background: #f7f0ea; }

/* Pie oscuro, como cierre visual de la experiencia */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 8vw, 110px);
  border: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 40, 115, .22), transparent 25rem),
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.2px),
    #18182f;
  background-size: auto, 17px 17px, auto;
  color: #fff;
}
.site-footer .brand-name,
.site-footer .foot-title { color: #fff; }
.site-footer .fine,
.site-footer .foot-col a { color: rgba(255, 255, 255, .60); }
.site-footer .foot-col a:hover { color: #79a9ff; }
.site-footer .foot-legal { border-color: rgba(255, 255, 255, .09); }
.site-footer .brand img { box-shadow: 0 0 0 2px rgba(121, 169, 255, .48), 0 10px 24px rgba(0, 0, 0, .18); }

/* Entrada al scroll: se activa solo cuando JavaScript confirma soporte */
.vs-motion [data-vs-reveal] {
  transition:
    opacity .72s var(--ease) var(--vs-delay, 0ms),
    transform .72s var(--ease) var(--vs-delay, 0ms);
}
.vs-motion [data-vs-reveal]:not(.is-inview) {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}
.vs-motion [data-vs-reveal=from-left]:not(.is-inview) { transform: translateX(-34px); }
.vs-motion [data-vs-reveal=from-right]:not(.is-inview) { transform: translateX(34px); }
.site-header .header-row { transition: box-shadow .3s ease, background-color .3s ease, transform .3s var(--ease); }
.site-header.is-scrolled .header-row {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 60px rgba(38, 29, 84, .16);
  transform: translateY(-2px);
}

@keyframes vs-terminal {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-14px) rotate(-.7deg); }
}
@keyframes vs-orbit {
  to { transform: rotate(360deg); }
}
@keyframes vs-blob {
  0%, 100% { transform: translateY(0) rotate(18deg) scale(1); border-radius: 48% 52% 61% 39%; }
  50% { transform: translateY(-15px) rotate(28deg) scale(1.08); border-radius: 60% 40% 43% 57%; }
}

/* Ajustes intermedios */
@media (max-width: 1099px) {
  .site-header { top: 8px; }
  .header-row { align-content: center; }
  .nav {
    margin-top: 7px;
    padding: 10px;
    border: 1px solid rgba(31, 36, 46, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 50px rgba(38, 29, 84, .12);
  }
  .nav-link { border-radius: 7px; }
  .nav-link[aria-current=page] { background: var(--c-action); color: var(--c-on-action); }
  .locale { border-color: rgba(31, 36, 46, .10); }
}
@media (max-width: 1280px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); }
  .hero h1 { font-size: clamp(3.5rem, 7vw, 5.8rem); }
}

@media (max-width: 900px) {
  .section { padding: 76px 0; }
  .site-header { padding-inline: 12px; }
  .hero {
    min-height: 0;
    background:
      radial-gradient(circle at 72% 20%, rgba(56, 40, 115, .22), transparent 16rem),
      linear-gradient(145deg, #fffdfb, #f7f0ea);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 118px 0 84px;
  }
  .hero-sign { order: -1; justify-items: center; }
  .hero-sign::before { width: min(390px, 74vw); }
  .hero-sign::after { right: 18%; width: 76px; }
  .terminal { width: min(250px, 66vw); }
  .hero h1 { max-width: 11ch; font-size: clamp(3.5rem, 12vw, 5.6rem); }
  .hero::after {
    background: linear-gradient(0deg, rgba(255, 250, 247, .98) 0%, rgba(255, 250, 247, .78) 52%, rgba(255, 250, 247, .30) 100%);
  }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-feature { grid-row: auto; min-height: 330px; }
  .howto li { min-height: 0; }
  .page-head { padding-top: 132px; }
  .shop-bar { top: 86px; }
  .shop-mosaic .product:hover { transform: translateY(-5px); }
  .foot-grid { gap: 34px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { background-attachment: scroll; }
  .section { padding: 60px 0; }
  .section h2 { font-size: clamp(1.9rem, 9.5vw, 2.8rem); }
  .section-head { margin-bottom: 28px; }
  .demo-bar { padding-block: 5px; font-size: .69rem; }
  .site-header { top: 6px; padding-inline: 8px; }
  .header-row {
    min-height: 60px;
    gap: 7px;
    padding: 6px 7px 6px 9px;
    border-radius: 11px;
  }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: .96rem; }
  .account-link { padding-inline: 10px; font-size: .78rem; }
  .cart-btn,
  .nav-toggle { width: 42px; height: 42px; }
  .nav { flex-basis: 100%; margin-top: 6px; padding: 8px; }
  .nav-link { min-height: 46px; }
  .lc-menu { max-width: calc(100vw - 36px); }
  .btn-lg { min-height: 50px; padding-inline: 22px; font-size: 1rem; }
  .hero {
    margin-top: -60px;
    padding-top: 60px;
  }
  .hero-grid { gap: 32px; padding: 106px 0 70px; }
  .hero-sign { justify-items: start; padding-left: 12px; }
  .hero-sign::before { width: min(310px, 78vw); }
  .hero-sign::after { right: 12%; width: 62px; }
  .terminal { width: min(205px, 58vw); padding: 8px; border-radius: 15px; }
  .terminal-bar,
  .terminal-foot { padding-inline: 5px; font-size: .62rem; }
  .terminal-screen { border-radius: 10px; }
  .hero h1 { max-width: 11ch; font-size: clamp(2.65rem, 12.2vw, 3.25rem); line-height: .92; }
  .lead { font-size: 1rem; line-height: 1.65; }
  .hero-actions .btn { flex-basis: 100%; }
  .hero-points { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-points li { width: fit-content; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .area { min-height: 215px; padding: 25px; }
  .area-feature { grid-column: auto; min-height: 300px; }
  .area-feature .area-k { font-size: 2.45rem; }
  .howto { grid-template-columns: minmax(0, 1fr); }
  .howto li { padding: 22px; }
  .trust li { padding: 20px; }
  .page-head {
    margin-top: -60px;
    padding: 116px 0 54px;
  }
  .page-head h1 { font-size: clamp(2.55rem, 13vw, 4.1rem); }
  .page-head.compact { padding: 108px 0 38px; }
  .shop-head { padding-top: 46px; }
  .shop-head h1 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .shop-bar { position: static; margin-inline: 10px; }
  .shop-group-title { font-size: clamp(1.65rem, 8vw, 2.5rem); }
  .shop-mosaic .product { filter: drop-shadow(0 12px 18px rgba(39, 29, 88, .13)); }
  .service,
  .plan,
  .gift-step,
  .account-card { padding: 24px; }
  .site-footer { padding-top: 68px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-brand { grid-column: auto; }
}

@media (max-width: 380px) {
  .header-row { gap: 5px; }
  .account-link { padding-inline: 8px; }
  .hero h1 { font-size: 2.55rem; }
}

@media (max-width: 520px) {
  .brand-name { display: none; }
  .demo-bar { font-size: .64rem; line-height: 1.35; }
  .header-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .header-tools {
    grid-column: 3;
    grid-row: 1;
    gap: 5px;
    margin-left: 0;
  }
  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .cart-btn,
  .nav-toggle { display: inline-grid; width: 40px; height: 40px; }
  .account-link { min-height: 40px; }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10.2vw, 2.75rem);
  }
  .hero h1 em { display: block; max-width: 9ch; }
}

@media (hover: none) {
  .area:hover,
  .howto li:hover,
  .service:hover,
  .plan:hover,
  .gift-step:hover,
  .pack:hover,
  .shop-mosaic .product:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-motion [data-vs-reveal]:not(.is-inview) { opacity: 1; transform: none; }
  .hero-sign::before,
  .hero-sign::after,
  .terminal { animation: none !important; transform: none; }
  .btn::before,
  .pack::after { display: none; }
}

/* Fondo único (pedido de Arnold): en todo el sitio se ve el fondo claro con puntos del <body>, como en Tienda diaria.
   Portada, cabeceras de página y secciones alternas dejan de pintar su propio degradado beige encima. */
.hero,
.page-head,
.page-head.premium,
.page-head.calm,
.page-head.compact,
.section.alt:not(.trust-wrap) { background: none; }
.hero::before,
.hero::after,
.page-head::before { display: none; }

/* Ondas de fondo (diseño de Arnold en Canva, img/ondasfondo2.png, 4000x2250): dos recortes con transparencia, cada uno
   anclado a su esquina de la ventana para que nunca se corten. Color suave (45 % del contraste original), sin pérdida,
   en 1x y 2x para que se vean nítidas. Fijas en todas las páginas; en la portada se desvanecen al bajar (--waves-o, app.js). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/ondas-sup-der.webp"), url("assets/ondas-inf-izq.webp");
  background-repeat: no-repeat;
  background-position: right top, left bottom;
  background-size: 50.45vw auto, 40.5vw auto;   /* abajo-izquierda un 15 % mayor que en el diseño */
}
body[data-page="home"]::before { opacity: var(--waves-o, 1); }
@media (max-aspect-ratio: 1/1) and (max-width: 640px) {
  /* Solo en celulares en vertical (a escala de la ventana quedarían diminutas) se agrandan. Una ventana de escritorio estrecha
     pero alta (media pantalla) mantiene el tamaño de escritorio, como pidió Arnold. */
  body::before { background-size: 100vw auto, 80vw auto; }
}

/* ================= Regalos: pasos, verificación de amistad y cuentas oficiales ================= */
.fb .wrap { display: grid; gap: var(--s-6); }
.fb h2 { font-size: var(--fs-xl); max-width: none; }
.fb-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--action-soft); border: 1px solid var(--action-line); color: var(--c-action); }
.fb-head { display: flex; gap: var(--s-4); align-items: flex-start; }
.fb-head p { margin: 4px 0 0; color: var(--c-text-2); }

.fb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: fb-step; }
.fb-step { counter-increment: fb-step; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); }
.fb-step h3 { font-size: var(--fs-lg); margin-top: var(--s-2); }
.fb-step h3::before { content: counter(fb-step) ". "; color: var(--c-action); }
.fb-step p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }

.fb-check, .fb-official { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-xl); }
/* Campo de verificación: píldora con icono dentro y botón de acento, más personalizado que los campos base. */
.fb-check-form { display: flex; gap: var(--s-3); align-items: stretch; }
.fb-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.fb-field-ico { position: absolute; left: 18px; color: var(--c-muted); pointer-events: none; transition: color var(--dur) var(--ease); }
.fb-input { width: 100%; min-width: 0; height: 56px; padding: 0 20px 0 48px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: #fff; color: var(--c-text); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: .01em; box-shadow: inset 0 2px 5px rgba(41, 31, 92, .06); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fb-input::placeholder { color: var(--c-muted); font-weight: var(--fw-medium); letter-spacing: 0; }
.fb-input:hover { border-color: var(--c-line-strong); }
.fb-field:focus-within .fb-field-ico { color: var(--c-action); }
.fb-input:focus { outline: none; border-color: var(--c-action); box-shadow: 0 0 0 4px var(--action-soft), inset 0 2px 5px rgba(41, 31, 92, .05); }
.fb-input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.fb-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 56px; padding: 0 28px; border: 0; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--c-action), #5a3fb0); color: #fff; font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 24px rgba(56, 40, 115, .28); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); }
.fb-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(56, 40, 115, .36); filter: brightness(1.06); }
.fb-btn:active { transform: translateY(0); }
.fb-btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
.fb-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.fb-btn svg { flex: none; }
.fb-captcha { display: flex; justify-content: flex-start; }
.fb-captcha:empty { display: none; }
.fb-msg { margin: 0; min-height: 1.4em; font-size: var(--fs-sm); color: #1c7a4d; }
.fb-msg:empty { min-height: 0; }
.fb-msg.is-err { color: #b42318; }

.fb-result { display: grid; gap: var(--s-4); }
.fb-state { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); border: 1px solid; }
.fb-state > svg { flex: none; margin-top: 1px; }
.fb-state p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.fb-state .fb-state-title { margin-bottom: 2px; color: var(--c-text); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.fb-state.is-ok { background: var(--reward-soft); border-color: var(--reward-line); }
.fb-state.is-ok > svg { color: #1c8a57; }
.fb-state.is-wait { background: rgba(217, 119, 6, .09); border-color: rgba(217, 119, 6, .36); }
.fb-state.is-wait > svg { color: #b45309; }
.fb-state.is-no, .fb-state.is-err { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .30); }
.fb-state.is-no > svg, .fb-state.is-err > svg { color: #b42318; }
.fb-state.is-info { background: var(--club-soft); border-color: var(--club-line); }
.fb-state.is-info > svg { color: var(--c-club); }
.fb-send { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fb-send .btn { flex: 1; min-width: 220px; border-radius: var(--r-pill); }
.fb-request.is-sent:disabled { opacity: 1; background: var(--reward-soft); color: #1c6b46; box-shadow: none; cursor: default; }
.fb-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: 54px; padding: 10px var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .86); }
.fb-row > svg { flex: none; width: 20px; height: 20px; }
.fb-row.is-gift > svg { color: #1c8a57; }
.fb-row.is-recent > svg { color: #b45309; }
.fb-row.is-none > svg { color: #b42318; }
.fb-row.is-sent > svg { color: var(--c-action); }
.fb-row-name { font-weight: var(--fw-bold); letter-spacing: .01em; }
.fb-row-state { margin-left: auto; color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: right; }
.fb-row .btn-sm { min-height: 36px; border-radius: var(--r-pill); border-color: var(--action-line); color: var(--c-action); font-weight: var(--fw-bold); }
.fb-row .btn-sm:hover { background: var(--c-action); border-color: var(--c-action); color: #fff; }

.fb-bots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.fb-bot { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: rgba(255, 255, 255, .86); }
.fb-bot-head { display: flex; align-items: center; gap: var(--s-3); }
.fb-avatar { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--action-soft); color: var(--c-action); }
.fb-bot-name { font-weight: var(--fw-bold); letter-spacing: .02em; }
.fb-copy { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 42px; padding: 0 var(--s-4); border: 1.5px solid var(--action-line); border-radius: var(--r-pill); background: var(--action-soft); color: var(--c-action); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fb-copy:hover { background: var(--c-action); border-color: var(--c-action); color: #fff; transform: translateY(-1px); }
.fb-copy:focus-visible { outline: var(--focus); outline-offset: 2px; }
.fb-copy.is-copied { background: var(--reward-soft); border-color: var(--reward-line); color: #1c6b46; }
.fb-full { display: flex; align-items: center; gap: var(--s-2); margin: 0; min-height: 40px; padding: 0 var(--s-3); border: 1px solid rgba(220, 38, 38, .28); border-radius: var(--r-md); background: rgba(220, 38, 38, .06); color: #b42318; font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.fb-full svg { flex: none; }
.fb-bots-empty { color: var(--c-muted); font-size: var(--fs-sm); }
.fb-warning { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--club-line); border-radius: var(--r-lg); background: var(--club-soft); color: var(--c-text-2); font-size: var(--fs-sm); }
.fb-warning svg { flex: none; color: var(--c-club); }
.fb-warning strong { color: var(--c-club); }

/* Envios: dos rutas equivalentes para crear la amistad. */
.fb-flow { display: grid; gap: var(--s-4); }
.fb-prep { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-5); }
.fb-prep h2 { font-size: var(--fs-xl); }
.fb-prep p:not(.fb-eyebrow) { margin-top: var(--s-1); color: var(--c-text-2); }
.fb-eyebrow { margin: 0 0 var(--s-1); color: var(--c-action); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.fb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.fb-option { position: relative; display: flex; min-height: 292px; flex-direction: column; align-items: flex-start; overflow: hidden; padding: var(--s-6); }
.fb-option-manual { border-color: var(--action-line); background: linear-gradient(145deg, #fffefa 0%, #f0ecff 100%); }
.fb-option-copy { background: linear-gradient(145deg, #fffefa 0%, #f7f0ea 100%); }
.fb-option-number { display: inline-flex; min-height: 28px; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--action-soft); color: var(--c-action); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; }
.fb-option h3 { position: relative; z-index: 1; max-width: 20ch; margin-top: var(--s-5); font-size: var(--fs-xl); }
.fb-option p { position: relative; z-index: 1; max-width: 48ch; margin-top: var(--s-3); color: var(--c-text-2); }
.fb-option-action { position: relative; z-index: 1; min-height: 42px; margin-top: auto; border-radius: var(--r-pill); }
.fb-option-mark { position: absolute; right: -16px; bottom: -58px; color: rgba(56, 40, 115, .07); font-size: 220px; font-weight: var(--fw-bold); line-height: 1; }
.fb-wait { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border: 1px solid var(--reward-line); border-radius: var(--r-lg); background: var(--reward-soft); }
.fb-wait-number { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #fff; color: #1c6b46; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.fb-wait h3 { font-size: var(--fs-md); }
.fb-wait p { margin-top: 2px; color: var(--c-text-2); font-size: var(--fs-sm); }
.fb-check, .fb-official { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.fb-label { display: block; margin-bottom: calc(-1 * var(--s-2)); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.fb-check-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.fb-check-form .fb-label { grid-column: 1 / -1; }
.fb-official .fb-head { margin-bottom: var(--s-1); }
.fb-bot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.fb-bot-head { min-width: 0; }
.fb-copy { width: auto; min-width: 98px; }

/* Envios: jerarquia, ritmo y selector de ruta. */
body[data-page="friendbot"] .page-head { position: relative; overflow: hidden; }
body[data-page="friendbot"] .page-head::before,
body[data-page="friendbot"] .page-head::after { position: absolute; content: ""; pointer-events: none; border-radius: 50%; filter: blur(2px); }
body[data-page="friendbot"] .page-head::before { top: -180px; right: -120px; width: 390px; height: 390px; background: radial-gradient(circle, rgba(102, 80, 198, .18), transparent 68%); }
body[data-page="friendbot"] .page-head::after { right: 11%; bottom: -120px; width: 250px; height: 250px; border: 1px solid rgba(56, 40, 115, .11); box-shadow: 0 0 0 32px rgba(56, 40, 115, .03), 0 0 0 64px rgba(56, 40, 115, .02); }
body[data-page="friendbot"] .page-head-grid { position: relative; z-index: 1; }
.fb { position: relative; padding-block: var(--s-8) var(--s-9); }
.fb .wrap { gap: var(--s-7); }
.fb-hero-rail { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.fb-hero-rail span { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); background: rgba(255, 255, 255, .65); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); box-shadow: 0 6px 16px rgba(41, 31, 92, .05); }
.fb-hero-rail b { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: var(--c-action); color: #fff; font-size: .65rem; }
.fb-flow { gap: var(--s-5); }
.fb-flow-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: end; padding: 0 var(--s-2); }
.fb-flow-heading h2 { margin-top: var(--s-1); font-size: var(--fs-2xl); }
.fb-flow-heading p:not(.fb-eyebrow) { max-width: 66ch; margin-top: var(--s-3); color: var(--c-text-2); }
.fb-flow-orbit { position: relative; display: block; width: 96px; height: 54px; opacity: .82; }
.fb-flow-orbit::before { position: absolute; inset: 4px 0; border: 1px solid var(--action-line); border-radius: 50%; content: ""; transform: rotate(-16deg); }
.fb-flow-orbit i { position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-action); box-shadow: 0 0 0 5px var(--action-soft); }
.fb-flow-orbit i:nth-child(1) { top: 3px; left: 17px; }
.fb-flow-orbit i:nth-child(2) { top: 30px; right: 9px; background: var(--c-season); }
.fb-flow-orbit i:nth-child(3) { bottom: 0; left: 42px; background: var(--c-reward); }
.fb-prep { position: relative; overflow: hidden; min-height: 112px; padding: var(--s-5) var(--s-6); border-color: var(--action-line); background: linear-gradient(110deg, rgba(255,255,255,.95), rgba(240,236,255,.76)); box-shadow: var(--e-1); }
.fb-prep::after { position: absolute; top: -52px; right: -26px; width: 150px; height: 150px; border: 1px solid rgba(56, 40, 115, .12); border-radius: 50%; box-shadow: 0 0 0 25px rgba(56, 40, 115, .035); content: ""; }
.fb-prep > * { position: relative; z-index: 1; }
.fb-options { gap: var(--s-5); }
.fb-option { min-height: 330px; padding: var(--s-6); border-width: 1.5px; box-shadow: var(--e-1); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fb-option:hover { transform: translateY(-5px); border-color: var(--action-line); box-shadow: var(--e-2); }
.fb-option.is-active { border-color: var(--c-action); box-shadow: 0 0 0 4px var(--action-soft), var(--e-2); }
.fb-option.is-active .fb-option-number { background: var(--c-action); color: #fff; }
.fb-option-copy.is-active { border-color: var(--c-club); box-shadow: 0 0 0 4px var(--club-soft), var(--e-2); }
.fb-option-copy.is-active .fb-option-number { background: var(--c-club); color: #fff; }
.fb-option p { max-width: 52ch; }
.fb-route-availability { position: relative; z-index: 1; margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid rgba(180, 83, 9, .25); border-radius: var(--r-md); background: rgba(217, 119, 6, .08); color: #8b4308 !important; font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.fb-option.is-unavailable { border-color: rgba(180, 83, 9, .42); }
.fb-option-action { min-height: 46px; padding-inline: var(--s-5); }
.fb-wait { padding: var(--s-5) var(--s-6); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px rgba(46, 187, 121, .07); }
.fb-check, .fb-official { position: relative; overflow: hidden; gap: var(--s-5); padding: clamp(28px, 4vw, 48px); box-shadow: var(--e-2); }
.fb-check { border-color: var(--action-line); background: linear-gradient(145deg, #fffefa 0%, #f6f4ff 100%); }
.fb-official { background: linear-gradient(145deg, #fffefa 0%, #fbf7f2 100%); }
.fb-check::before, .fb-official::before { position: absolute; width: 250px; height: 250px; border-radius: 50%; content: ""; pointer-events: none; }
.fb-check::before { top: -176px; right: -112px; background: radial-gradient(circle, rgba(102, 80, 198, .16), transparent 68%); }
.fb-official::before { bottom: -176px; left: -112px; background: radial-gradient(circle, rgba(64, 84, 183, .13), transparent 68%); }
.fb-check > *, .fb-official > * { position: relative; z-index: 1; }
.fb-manual-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.fb-manual-progress li { display: flex; min-width: 0; align-items: center; gap: var(--s-2); padding: 10px var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: rgba(255,255,255,.7); color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.fb-manual-progress span:first-child { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 50%; background: var(--c-surface-3); color: var(--c-text-2); font-size: .7rem; font-weight: var(--fw-bold); }
.fb-check[data-fb-manual-stage="name"] [data-fb-stage="name"],
.fb-check[data-fb-manual-stage="checking"] [data-fb-stage="checking"],
.fb-check[data-fb-manual-stage="ready"] [data-fb-stage="ready"],
.fb-check[data-fb-manual-stage="sending"] [data-fb-stage="ready"],
.fb-check[data-fb-manual-stage="done"] [data-fb-stage="ready"] { border-color: var(--action-line); background: var(--action-soft); color: var(--c-action); }
.fb-check[data-fb-manual-stage="name"] [data-fb-stage="name"] span:first-child,
.fb-check[data-fb-manual-stage="checking"] [data-fb-stage="checking"] span:first-child,
.fb-check[data-fb-manual-stage="ready"] [data-fb-stage="ready"] span:first-child,
.fb-check[data-fb-manual-stage="sending"] [data-fb-stage="ready"] span:first-child,
.fb-check[data-fb-manual-stage="done"] [data-fb-stage="ready"] span:first-child { background: var(--c-action); color: #fff; }
.fb-check[data-fb-manual-stage="done"] [data-fb-stage="ready"] { border-color: var(--reward-line); background: var(--reward-soft); color: #1c6b46; }
.fb-check[data-fb-manual-stage="done"] [data-fb-stage="ready"] span:first-child { background: var(--c-reward); }
.fb-check-form { gap: var(--s-4); }
.fb-label { margin-bottom: 0; }
.fb-input { height: 60px; background: rgba(255,255,255,.94); }
.fb-btn { height: 60px; min-width: 148px; }
.fb-result { animation: fb-result-in .32s var(--ease); }
@keyframes fb-result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fb-copy-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: rgba(255,255,255,.64); }
.fb-copy-journey span { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.fb-copy-journey b { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 50%; background: var(--club-soft); color: var(--c-club); font-size: .7rem; }
.fb-bots { gap: var(--s-4); }
.fb-bot { min-height: 76px; padding: var(--s-4); border-radius: var(--r-lg); box-shadow: 0 5px 16px rgba(41,31,92,.035); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fb-bot:hover { transform: translateY(-2px); border-color: var(--action-line); box-shadow: var(--e-1); }
.fb-bot-name { overflow-wrap: anywhere; }
.fb-copy { min-height: 46px; }
.fb-copy-message { min-height: 1.4em; margin: calc(-1 * var(--s-2)) 0 0; color: #1c6b46; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.fb-copy-message:empty { display: none; }
.fb-bots-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 72px; padding: var(--s-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); background: rgba(255,255,255,.55); }
.fb-bots-empty button { min-height: 38px; padding: 0 var(--s-3); border: 1px solid var(--action-line); border-radius: var(--r-pill); background: #fff; color: var(--c-action); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.fb-bots-empty button:hover { background: var(--action-soft); }
.fb-bots[aria-busy="true"] .fb-bots-empty::before { width: 16px; height: 16px; flex: none; border: 2px solid var(--action-line); border-top-color: var(--c-action); border-radius: 50%; content: ""; animation: fb-spin .8s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fb-option, .fb-bot, .fb-result { transition: none; animation: none; }
  .fb-bots[aria-busy="true"] .fb-bots-empty::before { animation: none; }
}


@media (max-width: 900px) {
  .fb-steps { grid-template-columns: minmax(0, 1fr); }
  .fb-options { grid-template-columns: minmax(0, 1fr); }
  .fb-flow-heading { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fb-flow-orbit { display: none; }
  .fb-option { min-height: 0; }
}
@media (max-width: 640px) {
  .fb { padding-block: var(--s-7) var(--s-8); }
  .fb .wrap { gap: var(--s-6); }
  .fb-hero-rail { margin-top: var(--s-4); }
  .fb-hero-rail span { min-height: 32px; }
  .fb-prep, .fb-check, .fb-official { padding: var(--s-5); }
  .fb-check-form { flex-direction: column; }
  .fb-check-form { grid-template-columns: minmax(0, 1fr); }
  .fb-prep { align-items: flex-start; }
  .fb-option { min-height: 0; padding: var(--s-5); }
  .fb-option-action { width: 100%; }
  .fb-manual-progress { grid-template-columns: minmax(0, 1fr); }
  .fb-copy-journey { grid-template-columns: minmax(0, 1fr); }
  .fb-copy-journey span { min-height: 26px; }
  .fb-btn { width: 100%; }
  .fb-bot { grid-template-columns: minmax(0, 1fr); }
  .fb-copy { width: 100%; }
  .fb-send .btn { min-width: 0; width: 100%; }
  .fb-bots, .fb-rows { grid-template-columns: minmax(0, 1fr); }
  .fb-bots-empty { align-items: flex-start; flex-direction: column; }
}

/* ================= Envios: selector operativo =================
   Una sola decisión y un único espacio de trabajo. La interfaz evita
   tutoriales repetidos, ornamentos y tarjetas apiladas. */
body[data-page="friendbot"] .fb-page-head::before,
body[data-page="friendbot"] .fb-page-head::after { display: none !important; }
body[data-page="friendbot"] .fb-page-head { padding-bottom: clamp(24px, 3vw, 36px); }
body[data-page="friendbot"] .fb-page-head .page-lead { max-width: 52ch; }

body[data-page="friendbot"] .fb { padding: clamp(26px, 3vw, 40px) 0 clamp(64px, 8vw, 104px); }
body[data-page="friendbot"] .fb-layout {
  width: min(960px, calc(100% - var(--gutter) - var(--gutter)));
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
body[data-page="friendbot"] .fb-intro { display: grid; gap: 5px; }
body[data-page="friendbot"] .fb-intro h2 { max-width: 24ch; font-size: clamp(1.7rem, 3vw, 2.45rem); }
body[data-page="friendbot"] .fb-eyebrow { margin: 0; color: var(--c-action); font-size: .73rem; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; }

body[data-page="friendbot"] .fb-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}
body[data-page="friendbot"] .fb-method {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 142px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: rgba(255,255,255,.56);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
body[data-page="friendbot"] .fb-method:hover { border-color: var(--c-line-strong); background: rgba(255,255,255,.84); }
body[data-page="friendbot"] .fb-method:active { transform: scale(.992); }
body[data-page="friendbot"] .fb-method:focus-visible { outline: var(--focus); outline-offset: 3px; }
body[data-page="friendbot"] .fb-method.is-active,
body[data-page="friendbot"] .fb-method[aria-pressed="true"] {
  border-color: var(--c-action);
  background: #fff;
  box-shadow: 0 14px 30px rgba(41,31,92,.10), inset 3px 0 0 var(--c-action);
}
body[data-page="friendbot"] .fb-method.is-unavailable { border-color: rgba(180,83,9,.5); }
body[data-page="friendbot"] .fb-method-index { color: var(--c-muted); font-size: .72rem; font-weight: var(--fw-bold); letter-spacing: .08em; line-height: 1.6; }
body[data-page="friendbot"] .fb-method-copy { display: grid; align-content: start; gap: 6px; min-width: 0; }
body[data-page="friendbot"] .fb-method-title { color: var(--c-text); font-size: clamp(1rem, 1.5vw, 1.14rem); font-weight: var(--fw-bold); line-height: 1.2; }
body[data-page="friendbot"] .fb-method-note { color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.5; }
body[data-page="friendbot"] .fb-method-check {
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: transparent;
  transition: color 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease);
}
body[data-page="friendbot"] .fb-method[aria-pressed="true"] .fb-method-check { border-color: var(--c-action); background: var(--c-action); color: #fff; }
body[data-page="friendbot"] .fb-route-availability {
  margin-top: 5px;
  color: #9a4c0c;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.45;
}

body[data-page="friendbot"] .fb-stage {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 42px rgba(41,31,92,.08);
}
body[data-page="friendbot"] .fb-workspace { padding: clamp(24px, 4vw, 44px); }
body[data-page="friendbot"] .fb-workspace.is-active { animation: fb-workspace-in 200ms var(--ease); }
@keyframes fb-workspace-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
body[data-page="friendbot"] .fb-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
body[data-page="friendbot"] .fb-workspace-head h2 { margin-top: 5px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
body[data-page="friendbot"] .fb-workspace-head > div > p:last-child { margin-top: 7px; color: var(--c-text-2); }
body[data-page="friendbot"] .fb-panel-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}
body[data-page="friendbot"] .fb-panel-status > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="checking"] .fb-panel-status,
body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="sending"] .fb-panel-status { color: var(--c-action); }
body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="checking"] .fb-panel-status > span:first-child,
body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="sending"] .fb-panel-status > span:first-child { animation: fb-status-pulse 900ms ease-in-out infinite; }
body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="ready"] .fb-panel-status,
body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="done"] .fb-panel-status { color: #16764a; }
@keyframes fb-status-pulse { 50% { transform: scale(1.65); opacity: .35; } }

body[data-page="friendbot"] .fb-check-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 24px;
}
body[data-page="friendbot"] .fb-check-form .fb-label { grid-column: 1 / -1; margin: 0; color: var(--c-text); font-size: var(--fs-sm); }
body[data-page="friendbot"] .fb-field { min-width: 0; }
body[data-page="friendbot"] .fb-input { height: 54px; border-radius: 10px; box-shadow: none; background: #fff; font-size: 1rem; }
body[data-page="friendbot"] .fb-btn { height: 54px; min-width: 132px; border-radius: 10px; background: var(--c-action); box-shadow: none; }
body[data-page="friendbot"] .fb-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(56,40,115,.2); filter: none; }
body[data-page="friendbot"] .fb-captcha { margin-top: 14px; }
body[data-page="friendbot"] .fb-msg { margin-top: 12px; }
body[data-page="friendbot"] .fb-result { gap: 12px; margin-top: 16px; animation: none; }
body[data-page="friendbot"] .fb-state { padding: 15px 16px; border-radius: 12px; }
body[data-page="friendbot"] .fb-send .btn { min-height: 48px; border-radius: 10px; }
body[data-page="friendbot"] .fb-help { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-line); color: var(--c-text-2); font-size: var(--fs-sm); }
body[data-page="friendbot"] .fb-help summary { width: max-content; max-width: 100%; color: var(--c-text-2); font-weight: var(--fw-semi); cursor: pointer; }
body[data-page="friendbot"] .fb-help[open] summary { color: var(--c-action); }
body[data-page="friendbot"] .fb-help p { max-width: 60ch; margin-top: 10px; line-height: 1.6; }

body[data-page="friendbot"] .fb-bots { display: block; margin-top: 16px; }
body[data-page="friendbot"] .fb-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: var(--s-3);
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 160ms var(--ease);
}
body[data-page="friendbot"] .fb-bot:first-child { border-top: 1px solid var(--c-line); }
body[data-page="friendbot"] .fb-bot:hover { transform: none; border-color: var(--c-line); box-shadow: none; background: rgba(56,40,115,.025); }
body[data-page="friendbot"] .fb-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--action-soft); }
body[data-page="friendbot"] .fb-bot-name { font-size: 1rem; }
body[data-page="friendbot"] .fb-copy { width: auto; min-width: 92px; min-height: 40px; padding-inline: 15px; border-radius: 9px; background: #fff; }
body[data-page="friendbot"] .fb-copy:hover { transform: none; background: var(--c-action); }
body[data-page="friendbot"] .fb-copy-message { display: flex; align-items: center; gap: 8px; min-height: 0; margin: 14px 0 0; color: #16764a; }
body[data-page="friendbot"] .fb-copy-message:not(:empty)::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
body[data-page="friendbot"] .fb-bots-empty { min-height: 68px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: transparent; }
body[data-page="friendbot"] .fb-bots-empty button { min-height: 38px; border-radius: 8px; }
body[data-page="friendbot"] .fb-warning { margin-top: 22px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: transparent; color: var(--c-text-2); }
body[data-page="friendbot"] .fb-warning svg { color: var(--c-action); }

body[data-page="friendbot"] .fb-wait {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  padding: 18px 2px 0;
  border: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
body[data-page="friendbot"] .fb-wait strong { color: var(--c-text); }

@media (max-width: 680px) {
  body[data-page="friendbot"] .fb-layout { width: min(960px, calc(100% - var(--gutter) - var(--gutter))); gap: 20px; }
  body[data-page="friendbot"] .fb-options { grid-template-columns: minmax(0, 1fr); }
  body[data-page="friendbot"] .fb-method { min-height: 118px; padding: 20px; }
  body[data-page="friendbot"] .fb-workspace { padding: 22px 18px; }
  body[data-page="friendbot"] .fb-workspace-head { display: grid; gap: 12px; padding-bottom: 20px; }
  body[data-page="friendbot"] .fb-panel-status { margin: 0; }
  body[data-page="friendbot"] .fb-check-form { grid-template-columns: minmax(0, 1fr); }
  body[data-page="friendbot"] .fb-btn { width: 100%; }
  body[data-page="friendbot"] .fb-bot { align-items: center; }
  body[data-page="friendbot"] .fb-wait { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="friendbot"] .fb-method,
  body[data-page="friendbot"] .fb-workspace.is-active,
  body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="checking"] .fb-panel-status > span:first-child,
  body[data-page="friendbot"] .fb-workspace[data-fb-manual-stage="sending"] .fb-panel-status > span:first-child { animation: none; transition: none; }
}

/* Portada: titular en cuatro líneas del mismo tamaño; SKINS en el morado del logo y el resto en tinta oscura */
.hero h1.hero-title-lines { max-width: none; color: var(--c-text); }
.hero-title-lines > span,
.hero-title-lines > em { display: block; max-width: none; white-space: nowrap; }
.hero h1.hero-title-lines > em { color: var(--c-action); font-style: inherit; margin-block: .28em; }

/* Portada: cinco ventajas repartidas en filas con el mismo espaciado */
.hero-points { gap: 10px 12px; max-width: 640px; }
.hero-points li { white-space: nowrap; }
@media (max-width: 640px) {
  .hero-points { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-points li { width: auto; padding: 6px 9px; }
}

/* Portada: palabra rotativa del titular, efecto «empuje continuo» (opción 2 del catálogo). Ambas palabras comparten celda:
   la anterior sale 3 em a la izquierda desvaneciéndose mientras la nueva entra desde la derecha (1 s, sincronizado con initHeroRotator). */
@font-face { font-family: "Days One"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/days-one-400-latin.woff2") format("woff2"); }
/* Days One en mayúsculas, recta y engrosada con un trazo del mismo color. El contorno claro (sombras del color del fondo alrededor)
   separa la palabra del texto negro si llegan a cruzarse; la palabra se pinta por encima de las líneas negras. */
.hero h1.hero-title-lines > em.hero-rotator {
  position: relative; z-index: 2;
  color: #69149c; font-family: "Days One", "Montserrat Display", sans-serif; font-size: .9em; font-style: normal; font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase; -webkit-text-stroke: .045em currentColor;
  text-shadow: .07em 0 0 #fffaf7, -.07em 0 0 #fffaf7, 0 .07em 0 #fffaf7, 0 -.07em 0 #fffaf7,
    .05em .05em 0 #fffaf7, -.05em .05em 0 #fffaf7, .05em -.05em 0 #fffaf7, -.05em -.05em 0 #fffaf7;
}
.hero-slot { display: inline-grid; }
.hero-slot > .hero-word { grid-area: 1 / 1; display: inline-block; will-change: transform, opacity; }
.hero-word.is-out { animation: hero-word-out 1s cubic-bezier(.7, 0, .3, 1) forwards; }
.hero-word.is-in { animation: hero-word-in 1s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes hero-word-out { to { opacity: 0; transform: translateX(-3em); } }
@keyframes hero-word-in { from { opacity: 0; transform: translateX(2.2em); } }
@media (prefers-reduced-motion: reduce) {
  .hero-word.is-out,
  .hero-word.is-in { animation: none; }
}

/* Portada: aro de la skin = anillo de neón violeta (relleno transparente) + tres partículas en órbita + ondas expansivas.
   Combinación pedida por Arnold (catálogo 1: opciones 5 y 10; catálogo 2: opción 13). .hero-fx ocupa el mismo cuadro que el aro
   y va detrás de la figura. */
.hero-sign.is-skin::before {
  border: 3px solid #8a3cff; background: none;
  box-shadow: 0 0 14px rgba(138, 60, 255, .8), 0 0 36px rgba(138, 60, 255, .3), inset 0 0 14px rgba(138, 60, 255, .45);
}
.hero-fx { display: none; }
.hero-sign.is-skin .hero-fx { display: block; position: absolute; top: 0; left: 50%; width: var(--D); height: var(--D); margin-left: calc(var(--D) / -2); pointer-events: none; }
.hero-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #8a3cff; opacity: 0; animation: hero-ripple 2.6s ease-out infinite; }
.hero-wave.w2 { border-color: #2f79df; animation-delay: 1.3s; }
@keyframes hero-ripple { from { transform: scale(1); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }
.hero-orb { position: absolute; inset: calc(var(--D) * -.06); border-radius: 50%; animation: hero-orbit 6s linear infinite; }
.hero-orb i { position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #69149c; box-shadow: 0 0 12px #8a3cff; }
.hero-orb.o2 { animation-duration: 9s; animation-direction: reverse; }
.hero-orb.o2 i { width: 10px; height: 10px; left: calc(50% - 5px); top: -5px; background: #2f79df; box-shadow: 0 0 12px #2f79df; }
.hero-orb.o3 { animation-duration: 12s; }
.hero-orb.o3 i { width: 9px; height: 9px; left: calc(50% - 4.5px); top: auto; bottom: -4.5px; background: #e0479e; box-shadow: 0 0 12px #e0479e; }
@keyframes hero-orbit { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .hero-wave { display: none; }
  .hero-orb { animation: none; }
}

/* Portada en celular y tableta (una columna): titular y texto primero, luego la skin, y debajo los botones y las ventajas.
   .hero-copy se disuelve (display: contents) para poder ordenar sus piezas alrededor de .hero-sign. */
@media (max-width: 900px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > h1 { order: 1; }
  .hero-copy > .lead { order: 2; }
  .hero-sign { order: 3; }
  .hero-sign.is-skin { margin-top: calc(var(--D) * .7); }   /* deja sitio a la cabeza que sobresale, sin hueco grande tras el texto */
  .hero-actions { order: 4; margin-top: 40px; position: relative; z-index: 3; }
  .hero-points { order: 5; }
}
/* La figura de la skin baja por debajo del aro (sus piernas se recortan con una máscara, pero la caja sigue ahí) y en celular
   quedaba encima de los botones: tapaba el toque. La figura es solo decoración, así que no recibe toques. */
.hero-sign.is-skin, .hero-sign.is-skin .terminal, .hero-sign.is-skin .hero-fx { pointer-events: none; }

/* Cinta superior con el menú colapsado: el selector de idioma va junto a la cuenta (app.js, placeLocale). */
.header-tools > .lc-lang .lc-menu { left: auto; right: 0; }
@media (max-width: 640px) {
  /* El menú se ancla al borde derecho de la cinta (no al botón) para no salirse de la pantalla. */
  .header-row { position: relative; }
  .header-tools > .lc-lang { position: static; }
  .header-tools > .lc-lang .lc-menu { right: 6px; top: calc(100% + 6px); }
}
@media (max-width: 640px) {
  /* Celular: nombre de la marca visible y selector de idioma compacto (solo bandera). */
  .brand-name { display: inline; font-size: .92rem; }
  .brand { gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .header-tools > .lc-lang .lc-btn { min-height: 40px; gap: 5px; padding: 0 8px; }
  .header-tools > .lc-lang .lc-btn > span { display: none; }
  .header-tools > .lc-lang .lc-flag { width: 22px; height: 15px; }
  .header-tools { gap: 5px; }
  .account-link { padding-inline: 9px; }
  .cart-btn, .nav-toggle { width: 38px; height: 38px; }
  /* Portada: menos aire entre la cinta y el titular, y entre el texto y la cabeza de la skin. */
  .hero-grid { padding-top: 24px; }
  .hero-sign.is-skin { margin-top: calc(var(--D) * .58); }
}
@media (max-width: 359px) { .brand-name { display: none; } }
@media (min-width: 641px) and (max-width: 900px) {
  .hero-grid { padding-top: 26px; }
  .hero-sign.is-skin { margin-top: calc(var(--D) * .58); }
}

/* Portada, «Destacados de la rotación»: una sola fila. El lote del día ocupa todo el ancho. Aire arriba para que las figuras
   que sobresalen de las tarjetas no toquen el texto de la sección. */
#home-featured { margin-top: clamp(56px, 7vw, 96px); }
#home-featured.has-bundle .product { grid-column: 1 / -1; }

/* Portada, «Destacados de la rotación»: cifras del día (centradas, números en Days One) y accesos a las secciones. */
.today-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.ts { position: relative; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 6px; padding: 22px 12px 20px; text-align: center; border-radius: 16px;
  background: linear-gradient(145deg, #382873 0%, #69149c 100%); color: #fff; box-shadow: 0 14px 30px rgba(56, 40, 115, .25), inset 0 1px 0 rgba(255, 255, 255, .15); }
.ts::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .2), transparent 60%); }
.ts b { position: relative; font-family: "Days One", "Montserrat Display", sans-serif; font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ts > span { position: relative; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 224, 255, .85); }
.ts-live { background: #12082a; border: 2px solid #8a3cff; box-shadow: 0 0 18px rgba(138, 60, 255, .45), inset 0 0 14px rgba(138, 60, 255, .3); }
.ts-live b { color: #e2c8ff; text-shadow: 0 0 12px rgba(181, 107, 255, .75); }
.today-secs { display: flex; gap: 8px; margin-top: 18px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: thin; }
.sec-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid rgba(31, 36, 46, .1);
  color: var(--c-text); font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(38, 29, 84, .05); transition: border-color .2s, color .2s, transform .2s; }
.sec-chip i { font-style: normal; font-size: .72rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: rgba(105, 20, 156, .1); color: #69149c; }
.sec-chip:hover { border-color: #69149c; color: #69149c; transform: translateY(-1px); }
.sec-chip.is-on { background: #382873; border-color: #382873; color: #fff; }
.sec-chip.is-on i { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 640px) {
  .today-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .ts { padding: 16px 8px 14px; border-radius: 14px; }
  .ts b { font-size: 1.65rem; }
  .ts > span { font-size: .62rem; letter-spacing: .1em; }
}

/* Etiqueta del lote: boleto con degradado violeta-rosa, muesca a la derecha y un brillo que la cruza cada pocos segundos. */
.bundle-tag { position: absolute; z-index: 5; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 20px 6px 6px; overflow: hidden;
  border-radius: 10px; background: linear-gradient(120deg, #8a3cff, #c04bd6 55%, #e0479e); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(138, 60, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-mask: radial-gradient(circle 6px at 100% 50%, transparent 97%, #000); mask: radial-gradient(circle 6px at 100% 50%, transparent 97%, #000); }
.bundle-tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: bt-shine 4.5s ease-in-out infinite; }
@keyframes bt-shine { 55%, 100% { transform: translateX(120%); } }
.bt-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, .95); color: #69149c; }
.bt-txt b { font-family: "Days One", sans-serif; font-weight: 400; font-size: .98rem; margin: 0 2px; }
@media (max-width: 640px) { .bundle-tag { top: 12px; left: 12px; font-size: .72rem; gap: 8px; padding: 5px 16px 5px 5px; } .bt-ico { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .bundle-tag::after { animation: none; display: none; } }

/* Cómo funciona: editorial + chat de WhatsApp */
.how-sec .section-head { max-width: none; }
.section h2.how-title { max-width: none; }
.how-title em { display: block; font-style: inherit; color: #69149c; }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.how-ed { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-text); }
.how-ed li { display: grid; grid-template-columns: clamp(76px, 9vw, 130px) minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(33, 28, 58, .10); }
.how-n { font: 400 clamp(2.4rem, 4.4vw, 3.4rem)/1 "Days One", sans-serif; color: #69149c; }
.how-ed .is-wa .how-n { color: #128c4a; }
.how-ed h3 { margin: 4px 0 6px; font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.05; }
.how-ed p { margin: 0; color: var(--c-muted); font-size: .95rem; max-width: 52ch; }
.how-note { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(105, 20, 156, .08); color: #69149c; font-size: .78rem; font-weight: 700; }
.wa-chat { margin: 0; border-radius: 18px; overflow: hidden; background: #efe7de radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px) 0 0 / 12px 12px; box-shadow: 0 24px 54px rgba(38, 29, 84, .16); }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #075e54; color: #fff; font-weight: 700; }
.wa-top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.wa-top small { display: block; font-weight: 400; font-size: .74rem; opacity: .8; }
.wa-body { display: grid; gap: 8px; padding: 16px 14px 18px; }
.wa-cap { justify-self: center; margin: 4px 0 0; padding: 3px 10px; border-radius: 7px; background: rgba(255, 255, 255, .8); color: #54656f; font-size: .72rem; font-weight: 600; text-align: center; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.wa-bub { max-width: 86%; padding: 9px 12px; border-radius: 10px; background: #fff; color: #1f2b26; font-size: .86rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.wa-bub.me { justify-self: end; background: #d9fdd3; }
.wa-bub b { display: block; margin-bottom: 2px; }
.wa-tot { display: block; margin-top: 4px; font-weight: 700; }
.wa-att { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .05); font-weight: 700; }
.wa-ok { color: #0e7a40; font-weight: 800; }
.how-trust { list-style: none; margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.how-trust li { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 3px solid var(--c-action); }
.how-trust .ico { flex: none; color: var(--c-reward); margin-top: 1px; }
.how-trust strong { display: block; }
.how-trust span { color: var(--c-muted); font-size: .9rem; }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .wa-chat { width: 100%; max-width: 400px; justify-self: center; }
  .how-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .how-ed li { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; } }

/* Páginas legales y columna Legal del pie */
.foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.legal-toc { position: sticky; top: 110px; font-size: .9rem; }
.legal-toc .foot-title { margin: 0 0 10px; font-weight: 800; color: var(--c-text); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.legal-toc a { color: var(--c-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--c-action); text-decoration: underline; text-underline-offset: 3px; }
.legal-also { display: grid; gap: 6px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(33, 28, 58, .10); }
.legal-also a { color: var(--c-action); font-weight: 700; }
.legal { color: var(--c-text); line-height: 1.7; }
.legal .legal-date { color: var(--c-muted); font-size: .9rem; margin: 0 0 18px; }
.legal h2 { margin: 36px 0 10px; font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.15; scroll-margin-top: 110px; }
.section .legal h2 { max-width: none; }
.legal p, .legal li { color: #3f3a52; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.legal a { color: var(--c-action); font-weight: 600; }
.legal mark.pend { background: #fff1a8; color: #5a4a00; padding: 0 4px; border-radius: 4px; }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; padding: 16px 18px; border: 1px solid rgba(33, 28, 58, .10); border-radius: 14px; background: #fff; }
}
@media (max-width: 640px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas frecuentes por grupos */
.section h2.faq-group { max-width: none; margin: 34px 0 12px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.section h2.faq-group:first-child { margin-top: 0; }
.faq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid rgba(33, 28, 58, .10); box-shadow: 0 14px 32px rgba(38, 29, 84, .07); }
.faq-cta strong { display: block; font-size: 1.05rem; }
.faq-cta span { color: var(--c-muted); }

/* Barra superior oscura: estilo 13 (fondo del pie, menú Days One) + activa con aro neón (19) */
.site-header .header-row,
.site-header.is-scrolled .header-row {
  border: 1px solid rgba(185, 140, 255, .18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 40, 115, .55), transparent 22rem),
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.2px),
    #18182f;
  background-size: auto, 17px 17px, auto;
  box-shadow: 0 18px 44px rgba(24, 24, 47, .30);
}
.site-header.is-scrolled .header-row { box-shadow: 0 20px 54px rgba(24, 24, 47, .40); }
.site-header .brand-name { color: #fff; }
.site-header .brand-name b { color: #c9b8ff; }
.site-header .brand img { border-color: rgba(255, 255, 255, .75); box-shadow: 0 0 0 2px rgba(185, 140, 255, .45), 0 8px 18px rgba(0, 0, 0, .25); }
.site-header .nav { gap: 10px; }
.site-header .nav-link {
  min-height: 42px;
  padding-inline: 16px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, .82);
  font-family: "Days One", sans-serif;
  font-weight: 400;
  font-size: .88rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.site-header .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.site-header .nav-link[aria-current=page] {
  color: #fff;
  background: rgba(138, 60, 255, .10);
  border-color: #b98cff;
  box-shadow: 0 0 16px rgba(185, 140, 255, .60), inset 0 0 12px rgba(138, 60, 255, .35);
}
.site-header .lc-btn,
.site-header .cart-btn,
.site-header .nav-toggle {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .10);
  box-shadow: none;
}
.site-header .lc-btn:hover,
.site-header .lc-btn[aria-expanded=true],
.site-header .cart-btn:hover,
.site-header .nav-toggle:hover { color: #fff; border-color: #b98cff; background: rgba(255, 255, 255, .14); }
.site-header .cart-btn[aria-current=page] { border-color: #b98cff; background: rgba(138, 60, 255, .18); box-shadow: 0 0 14px rgba(185, 140, 255, .5); }
.site-header .nav-toggle span { background: #fff; }
.site-header .account-link { color: #382873; background: #fff; border-color: #fff; font-weight: 800; }
.site-header .account-link:hover { color: #382873; border-color: #b98cff; box-shadow: 0 0 14px rgba(185, 140, 255, .5); }
.site-header .cart-count { background: #c2187a; color: #fff; }
.site-header .cart-count[data-zero=true] { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 1099px) {
  .site-header .nav { border-color: rgba(185, 140, 255, .18); background: #18182f; box-shadow: 0 20px 50px rgba(24, 24, 47, .35); }
  .site-header .locale { border-color: rgba(255, 255, 255, .12); }
}
.site-header .account-link {
  font-family: "Days One", sans-serif;
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-inline: 18px;
}
@media (min-width: 1100px) {
  .site-header .header-row { min-height: 78px; padding: 10px 14px 10px 16px; gap: 24px; }
  .site-header .brand img { width: 48px; height: 48px; }
  .site-header .brand-name { font-size: 1.18rem; }
  .site-header .nav { justify-content: center; gap: clamp(10px, 1.4vw, 22px); }
  .site-header .nav-link { min-height: 48px; padding-inline: 20px; font-size: .92rem; }
  .site-header .header-tools { gap: 10px; }
  .site-header .header-tools .locale { margin-right: 4px; }
  .site-header .lc-btn, .site-header .account-link, .site-header .cart-btn { min-height: 46px; height: 46px; }
  .site-header .cart-btn { width: 48px; }
  .site-header .account-link { margin-right: 6px; }
}
/* Cabecera compacta (1100-1280 px, p. ej. una ventana de 1230 px): los cuatro botones siguen a la vista, con menos aire. */
@media (min-width: 1100px) and (max-width: 1280px) {
  .site-header .header-row { gap: 14px; padding: 10px 12px 10px 14px; }
  .site-header .brand img { width: 44px; height: 44px; }
  .site-header .brand-name { font-size: 1.05rem; }
  .site-header .nav { gap: 4px; }
  .site-header .nav-link { padding-inline: 12px; font-size: .82rem; }
  .site-header .header-tools { gap: 8px; }
  .site-header .header-tools .locale { margin-right: 0; }
  .site-header .lc-btn { padding-inline: 10px; }
  .site-header .account-link { padding-inline: 14px; margin-right: 0; }
}
@media (max-width: 900px) { .site-header .account-link { font-size: .72rem; padding-inline: 10px; } }
@media (max-width: 420px) { .site-header .account-link { font-size: .66rem; padding-inline: 8px; letter-spacing: 0; } }
@media (max-width: 374px) { .site-header .brand-name { display: none; } }

/* Prueba (Arnold): brillo que cruza la tarjeta al pasar el cursor (opción 7). Retirar este bloque si no convence. */
.shop-mosaic .p-art::after { content: ""; display: block; position: absolute; inset: 0; width: auto; height: auto; z-index: 3; border-radius: var(--r-lg); pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0; opacity: 0; }
@media (hover: hover) { .shop-mosaic .product:hover .p-art::after { opacity: 1; background-position: -60% 0; transition: background-position .9s ease; } }
@media (prefers-reduced-motion: reduce) { .shop-mosaic .p-art::after { display: none; } }
/* Música: la portada ocupa toda la tarjeta y crece con ella, así que el brillo crece igual */
.shop-mosaic .product.type-musica .p-art::after { transform-origin: center bottom; transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .shop-mosaic .product.type-musica:hover .p-art::after { transform: var(--music-grow, scale(1.05)); transition: background-position .9s ease, transform var(--dur) var(--ease); } }
.shop-mosaic .product.type-musica:not(.size-sm) { --music-grow: scale(1.02); }
.shop-mosaic .product.type-musica .p-art::after { background-image: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .38) 50%, transparent 66%); }

/* Botón de carrito funcional en las tarjetas (precio en soles/dólares) */
.shop-mosaic .buy-tag { border: 0; padding: 0; font: inherit; cursor: pointer; pointer-events: auto; }
.shop-mosaic .buy-tag:focus-visible { opacity: 1; transform: scale(1); outline: 2px solid #b98cff; outline-offset: 3px; }
.shop-mosaic .buy-tag b svg + svg { display: none; }
.shop-mosaic .buy-tag.is-added { background: linear-gradient(135deg, #3ad48a, #1e9a5f); opacity: 1; transform: scale(1); }
.shop-mosaic .buy-tag.is-added b svg:first-child { display: none; }
.shop-mosaic .buy-tag.is-added b svg + svg { display: block; }
.shop-mosaic .buy-tag[disabled] { cursor: progress; }
.shop-mosaic .buy-tag.is-error { opacity: 1; transform: scale(1); }
.shop-mosaic .product .buy-tag.is-error::after, .shop-mosaic .product:hover .buy-tag.is-error::after { content: attr(data-msg); inset: auto; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: 200px; padding: 6px 10px; border: 0; border-radius: 8px; background: #18182f; color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.3; text-align: left; opacity: 1; animation: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.shop-mosaic .p-foot .btn { display: none; }
@media (hover: none) { .shop-mosaic .buy-tag { opacity: 1; transform: scale(1); } }
.shop-mosaic .p-foot .price strong { color: #fff; font-size: 1.12rem; }

/* Precio en tarjetas: pegatina inclinada con bandera (opción 19) sin fondo morado + borde de aro neón (opción 3) */
.shop-mosaic .p-foot .price:has(strong) { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 4px 11px 4px 7px; border: 1.5px solid #b98cff; border-radius: 8px; background: rgba(24, 24, 47, .25); box-shadow: 0 0 14px rgba(185, 140, 255, .55), inset 0 0 10px rgba(138, 60, 255, .3); transform: rotate(-4deg); transform-origin: left center; }
.shop-mosaic .p-foot .price .lc-flag { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.shop-mosaic .p-foot .price strong { color: #fff; font-family: "Days One", sans-serif; font-weight: 400; font-size: .95rem; line-height: 1.2; }
.shop-mosaic .p-foot .price .price-regular { color: rgba(255, 255, 255, .6); font-size: .75rem; }

/* Paquetes de paVos con arte propio: tarjeta con la imagen, aro neón al elegirla y precio en pegatina con bandera */
.pack.has-img { min-height: 0; aspect-ratio: 432 / 600; overflow: visible; background: #18182f; border-radius: 16px; box-shadow: 0 14px 30px rgba(38, 29, 84, .22), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pack.has-img .pack-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transition: transform .35s var(--ease), filter .35s var(--ease); }
.pack.has-img .pack-body { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; height: auto; padding: 46px 12px 14px; justify-content: flex-end; border-radius: 0 0 16px 16px; background: linear-gradient(0deg, rgba(8, 6, 24, .88), rgba(8, 6, 24, .5) 60%, transparent); }
.pack.has-img .pack-price { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border: 1.5px solid #b98cff; border-radius: 8px; background: rgba(24, 24, 47, .45); box-shadow: 0 0 14px rgba(185, 140, 255, .55), inset 0 0 10px rgba(138, 60, 255, .3); transform: rotate(-4deg); }
.pack.has-img .pack-price .lc-flag { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.pack.has-img .pack-price strong { font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.05rem; color: #fff; }
.pack.has-img:hover .pack-img { transform: scale(1.03); filter: brightness(1.1); }
.pack.has-img:has(input:checked) { box-shadow: 0 0 0 2px #b98cff, 0 0 26px rgba(185, 140, 255, .7), 0 18px 36px rgba(38, 29, 84, .3); }
.pack.has-img:has(input:checked)::before { content: ""; position: absolute; z-index: 3; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #8a3cff, #382873) center / 14px no-repeat; box-shadow: 0 0 0 2px #fff; }
.pack.has-img:has(input:checked)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"), linear-gradient(135deg, #8a3cff, #382873); background-size: 14px, auto; background-position: center; background-repeat: no-repeat; }
.pack.has-img .pack-ribbon { z-index: 4; background: linear-gradient(135deg, #ff4fa3, #c2187a); }
.pack.has-img .pack-ribbon { color: #fff; box-shadow: 0 6px 14px rgba(194, 24, 122, .4); }
.opt-grid.pack-grid:has(.pack.has-img) { row-gap: 40px; }
.pack.has-img .pack-ribbon { display: none; }
.opt-grid.pack-grid:has(.pack.has-img) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 8px; }
.pack.has-img .pack-price strong { font-size: 1.25rem; }
@media (max-width: 640px) { .pack.has-img .pack-price strong { font-size: .92rem; } .pack.has-img .pack-price { padding: 4px 9px 4px 6px; } .opt-grid.pack-grid:has(.pack.has-img) { gap: 14px; } }
/* Página de paVos: título y «Elige tu paquete» juntos; viñeta tipo rombo neón */
.pavos-head { padding-bottom: 0 !important; }
.section.pavos-page { padding-top: 14px; }
.pack-legend { display: flex; align-items: center; gap: 12px; font-family: "Days One", sans-serif; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
.pack-dot { width: 14px; height: 14px; flex: none; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, #b98cff, #69149c); box-shadow: 0 0 12px rgba(185, 140, 255, .8); }
.pack.has-img { overflow: hidden; } .pack.has-img::after { border-radius: 16px; }
/* Resumen «Tu recarga» (opción 15): título en cursiva grande y total con bandera y subrayado neón */
.pavos-page .config-summary h2 { font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1; }
.pavos-page .config-summary h2 em { font-style: inherit; color: #69149c; }
.pavos-page #cfg-total { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; background: linear-gradient(90deg, #b98cff, #ff4fa3) left bottom / 100% 3px no-repeat; }
.pavos-page #cfg-total strong { font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.2rem; color: #382873; line-height: 1; }
.pavos-page #cfg-total .lc-flag { width: auto; height: 1.2rem; aspect-ratio: 27 / 18; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.pavos-page #cfg-total { padding-bottom: 9px; }
.pavos-page .config-summary .summary-dl dt,
.pavos-page .config-summary .summary-dl dd,
.pavos-page .config-summary .total > span { font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.2rem; color: #382873; }
.pavos-page .config-summary .summary-dl dt, .pavos-page .config-summary .total > span { color: #716b80; }
.pavos-page .config-summary .summary-dl dt, .pavos-page .config-summary .total > span { color: #211c3a; }
.pavos-page #cfg-add { margin-top: 26px; } .pavos-page #cfg-status:empty { display: none; }
.pavos-page .config-summary h2 { margin-bottom: 26px; }

/* Club de Fortnite: paquete del mes (automático) y beneficios */
.crew-head { padding-bottom: 0 !important; }
.crew-title em { font-style: inherit; color: #69149c; }
.section.crew-pack-sec { padding-top: 24px; }
.crew-banner { position: relative; display: flex; align-items: flex-end; min-height: clamp(260px, 32vw, 420px); padding: clamp(22px, 4vw, 44px); border-radius: 22px; overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 0, rgba(56, 40, 115, .6), transparent 24rem), #18182f center / cover no-repeat; box-shadow: 0 0 0 1.5px #b98cff, 0 0 30px rgba(185, 140, 255, .4), 0 26px 60px rgba(24, 24, 47, .3); }
.crew-banner-tx { max-width: 520px; }
.crew-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: "Days One", sans-serif; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #e3d4ff; }
.section .crew-banner h2 { margin: 0 0 8px; color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .95; max-width: none; }
.crew-banner p#crew-pack-desc { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; }
.crew-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-top: 64px; }
.crew-item { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%), var(--ri, #47205c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 36px rgba(38, 29, 84, .18); transition: transform .3s var(--ease); }
.crew-item.rar-epic { --ri: #5a2a8a; } .crew-item.rar-rare { --ri: #1f4f9a; } .crew-item.rar-legendary { --ri: #9a5a1f; } .crew-item.rar-uncommon { --ri: #2f7a2f; }
.crew-item img { position: absolute; left: -12%; width: 124%; bottom: 14%; aspect-ratio: 1; object-fit: contain; clip-path: inset(-100% 9.7% 0 9.7%); transition: transform .35s var(--ease); }
.crew-item:hover { transform: translateY(-6px); } .crew-item:hover img { transform: scale(1.05); }
.crew-item-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; border-radius: 0 0 16px 16px; background: linear-gradient(0deg, rgba(8, 6, 24, .92), rgba(8, 6, 24, .6) 60%, transparent); color: #fff; }
.crew-item-tx span { display: block; font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .72); }
.crew-item-tx b { font-size: 1.05rem; }
.crew-benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.crew-ben { overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid rgba(33, 28, 58, .08); box-shadow: 0 14px 32px rgba(38, 29, 84, .08); transition: transform .3s var(--ease), box-shadow .3s; }
.crew-ben:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px #b98cff, 0 0 20px rgba(185, 140, 255, .35); }
.crew-ben-img { aspect-ratio: 260 / 160; background: #18182f center / cover no-repeat; }
.crew-ben-tx { padding: 16px 18px 18px; }
.crew-ben-tx h3 { margin: 0 0 6px; font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.05rem; text-transform: uppercase; color: #211c3a; }
.crew-ben-tx p { margin: 0; color: var(--c-muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 640px) { .crew-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; } }
/* Club: tarjeta grande con la skin saliendo por arriba y accesorios dentro */
.crew-banner { overflow: visible; margin-top: 90px; min-height: clamp(340px, 36vw, 460px); align-items: center; background: radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--c2, #69149c) 55%, transparent), transparent 22rem), radial-gradient(circle at 10% 0, rgba(56, 40, 115, .7), transparent 26rem), linear-gradient(135deg, #18182f, color-mix(in srgb, var(--c1, #382873) 70%, #18182f)); }
.crew-banner-tx { position: relative; z-index: 2; max-width: min(560px, 55%); }
.crew-skin { position: absolute; z-index: 1; right: 2%; bottom: 0; height: 128%; width: auto; max-width: 48%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); pointer-events: none; }
.crew-acc { margin-top: 22px; }
.crew-skin-name { margin: 0 0 12px; } .crew-skin-name span { display: block; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .7); } .crew-skin-name b { font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.3rem; }
.crew-acc-list { display: flex; flex-wrap: wrap; gap: 12px; }
.crew-acc-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(185, 140, 255, .45); box-shadow: inset 0 0 12px rgba(138, 60, 255, .25); }
.crew-acc-item img { width: 58px; height: 58px; object-fit: contain; border-radius: 10px; background: radial-gradient(circle, rgba(185, 140, 255, .35), transparent 70%); }
.crew-acc-item span { display: block; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .7); } .crew-acc-item b { font-size: .95rem; }
.section.crew-ben-sec { padding-top: 40px; }
@media (max-width: 760px) {
  .crew-banner { flex-direction: column; align-items: stretch; padding-top: 380px; margin-top: 70px; }
  .crew-banner-tx { max-width: none; }
  .crew-skin { left: 50%; right: auto; top: 0; bottom: auto; height: 380px; max-width: none; transform: translateX(-50%); }
}
.crew-acc-item img { width: 70px; height: 70px; transform: scale(1.9); }
.crew-acc-item { overflow: hidden; padding: 6px 16px 6px 6px; }
.crew-acc-item > div { position: relative; z-index: 1; }
@media (min-width: 761px) { .crew-skin { height: 150%; right: 0; max-width: 52%; } }
/* Club: skin más a la derecha y accesorios grandes en columna entre el texto y la skin */
@media (min-width: 761px) {
  .crew-banner-tx { position: static; max-width: 42%; }
  .crew-skin { right: -1%; }
  .crew-acc-list { position: absolute; z-index: 2; top: 22px; bottom: 22px; left: 46%; width: clamp(170px, 17vw, 230px); flex-direction: column; flex-wrap: nowrap; gap: 16px; }
  .crew-acc-item { flex: 1; flex-direction: column; justify-content: center; gap: 4px; padding: 10px; text-align: center; overflow: hidden; }
  .crew-acc-item img { width: 100%; height: auto; flex: 1; min-height: 0; max-height: 120px; transform: scale(1.5); background: none; }
}
@media (min-width: 761px) { .crew-skin { right: -7%; } .crew-acc-list { left: 44%; } }
/* Club: planes de 3 columnas y accesorios grandes */
.plans.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 760px) { .plans.plans-3 { grid-template-columns: minmax(0, 1fr); } }
.section.crew-plans-sec { padding-top: 56px; }
@media (min-width: 761px) {
  .crew-banner-tx { max-width: 38%; }
  .crew-acc-list { left: 40%; width: clamp(250px, 26vw, 360px); top: 18px; bottom: 18px; gap: 14px; }
  .crew-acc-item { padding: 8px; }
  .crew-acc-item img { max-height: none; transform: scale(1.35); }
  .crew-acc-item div { z-index: 2; background: linear-gradient(0deg, rgba(8, 6, 24, .75), transparent); width: 100%; padding-top: 14px; }
  .crew-skin { right: -9%; max-width: 46%; }
}
@media (min-width: 761px) {
  .crew-acc-item { position: relative; padding: 0; }
  .crew-acc-item img { position: absolute; left: 50%; top: 46%; width: 150%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
  .crew-acc-item div { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; }
}

/* Club: composicion final de la tarjeta principal.
   La tarjeta queda casi unida a la introduccion y la skin permanece dentro del borde derecho. */
.section.crew-pack-sec { padding-top: 8px; }
.crew-banner { margin-top: 12px; }
@media (min-width: 761px) {
  .crew-skin { right: -4%; max-width: 43%; }
}

/* Club: accesorios limpios dentro de la tarjeta grande.
   Sin marcos individuales: cada objeto ocupa su propia fila y el texto queda debajo. */
@media (min-width: 761px) {
  .crew-acc-list {
    z-index: 3;
    left: 42%;
    top: 12px;
    bottom: 12px;
    width: 34%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .crew-acc-item {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: visible;
    isolation: isolate;
    padding: 0 8px 6px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
  }
  .crew-acc-item:nth-child(1) { grid-column: 2; grid-row: 1; }
  .crew-acc-item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .crew-acc-item img {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: 190%;
    height: 100%;
    max-width: none;
    min-height: 0;
    place-self: center;
    object-fit: contain;
    transform: translate(5%, -15%) scale(3.25);
    transform-origin: center;
    filter: drop-shadow(0 14px 14px rgba(5, 3, 18, .45));
  }
  .crew-acc-item:nth-child(2) img { transform: translate(-2%, -35%) scale(4.4); }
  .crew-acc-item div {
    position: relative;
    z-index: 2;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin: 0;
    padding: 2px 4px 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    transform: none;
  }
  .crew-acc-item div span {
    margin-bottom: 1px;
    color: #caa7ff;
    font-size: .62rem;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .crew-acc-item div b {
    display: block;
    color: #fff;
    font-family: 'Days One', sans-serif;
    font-size: clamp(.72rem, .82vw, .9rem);
    font-weight: 400;
    line-height: 1.15;
  }
  .crew-acc-item:nth-child(1) div { transform: translateY(76px); }
}

/* Club: texto de la tarjeta principal (opción 4 de Arnold).
   Mes gigante en contorno con halo detrás de «Paquete del mes», etiqueta rosa, nombre de la skin y precio desde 1 mes. */
.crew-top { position: relative; isolation: isolate; padding: 56px 0 18px; }
.crew-top .crew-kick { position: relative; z-index: 1; margin: 0; }
.crew-month { position: absolute; z-index: -1; left: -4px; bottom: 0; margin: 0; line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; color: #fff;
  font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 88px; filter: url(#crew-month-outline); }
.crew-tag { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 6px; background: #c2187a; color: #fff; font-family: "Days One", sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 16px rgba(255, 79, 163, .55); }
.crew-tag[hidden] { display: none; }
.section .crew-banner .crew-banner-tx h2 { margin: 0 0 14px; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .9; }
.crew-banner p#crew-pack-desc { font-size: 1rem; line-height: 1.55; }
.crew-banner p#crew-pack-extra { margin: 2px 0 0; color: rgba(255, 255, 255, .85); font-size: 1rem; line-height: 1.55; }
.crew-buy { display: flex; align-items: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.crew-from > span { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #caa7ff; font-weight: 700; }
.crew-from > b { display: flex; align-items: center; gap: 8px; font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.5rem; }
.crew-from-price { display: inline-flex; align-items: center; gap: 8px; }
.crew-from-price strong { font-weight: 400; }
.crew-from small { font-family: Inter, system-ui, sans-serif; font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* Club: skin un 150 % más grande, cortada a la altura de la rodilla por el borde inferior de la tarjeta
   y saliendo por arriba; mochila y pico más a la izquierda (Arnold, 2026-10-20). Solo escritorio y tablet.
   El alto sale del alto de la tarjeta: lo visible (66 % de la imagen) = tarjeta + 40 px, así la cabeza
   siempre sobresale. En 1220 px de tarjeta equivale a 1,5 veces el tamaño anterior. */
@media (min-width: 761px) {
  /* La tarjeta es contenedor para medir su ancho (cqw) y recortar la skin en su borde derecho. */
  .crew-banner { container-type: inline-size; }
  .crew-skin {
    --crew-pbw: calc(100cqw + 2 * clamp(22px, 4vw, 44px));   /* ancho de la tarjeta con su relleno */
    --crew-r: calc(var(--crew-pbw) * .165);        /* personaje centrado entre la mochila (≈67 %) y el borde derecho */
    right: var(--crew-r);
    height: calc((100% + 40px) * 1.2 / .66);       /* +20 % (Arnold): crece hacia arriba, el corte de la rodilla no se mueve */
    width: auto;
    max-width: none;
    transform: translate(calc(50% + var(--crew-skin-dx, 0%)), 34%);   /* centra al personaje (dx lo mide app.js) y baja la imagen un 34 % de su alto… */
    /* …que se recorta justo en el borde inferior; por la derecha, en el borde de la tarjeta (en pantallas anchas no corta nada). */
    clip-path: inset(-100% max(-100%, calc(50% + var(--crew-skin-dx, 0%) - var(--crew-r))) 34% -100%);
  }
  .crew-acc-list { left: 36%; }
}

/* Club: planes (opción 10 de Arnold). Casi pegados a la tarjeta del Club.
   Borde en degradado neón a rosa, poco relleno arriba y abajo, botón a la derecha. */
.section.crew-pack-sec { padding-bottom: 0; }
.section.crew-plans-sec { padding-top: 26px; }
.crew-plans-sec .section-head { margin-bottom: 26px; }
.crew-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 44px); }   /* todo el ancho de la tarjeta del Club (Arnold) */
.crew-plan { display: grid; gap: 8px; align-content: start; padding: 18px 26px; border-radius: 20px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #b98cff, #ff4fa3) border-box; box-shadow: 0 14px 32px rgba(138, 60, 255, .12); transition: transform .3s var(--ease), box-shadow .3s; }
.crew-plan:hover { transform: translateY(-5px); box-shadow: 0 0 26px rgba(185, 140, 255, .4); }
.crew-plan.hl { background: linear-gradient(160deg, #fff7fb, #f5efff) padding-box, linear-gradient(135deg, #8a3cff, #ff4fa3) border-box; box-shadow: 0 0 26px rgba(255, 79, 163, .25); }
.crew-plan h3 { justify-self: start; margin: 0; padding-right: .1em; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: 2rem; line-height: 1.05; background: linear-gradient(90deg, #382873, #8a3cff, #ff4fa3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crew-plan-price { display: flex; align-items: center; gap: 10px; margin: 0; font-family: "Days One", sans-serif; font-size: 2rem; line-height: 1; color: #211c3a; }
.crew-plan-price strong { font-weight: 400; }
.crew-plan-price .lc-flag { width: 24px; height: auto; flex: none; }
.crew-plan-pm { margin: 0; min-height: 1.5em; font-size: .85rem; color: var(--c-muted); }
.crew-plan-btn { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid #382873; color: #382873; font-weight: 800; text-decoration: none; transition: background .25s, color .25s; }
.crew-plan-btn:hover { background: #382873; color: #fff; }
.crew-plan-btn:focus-visible { outline: 2px solid #8a3cff; outline-offset: 3px; }
@media (max-width: 760px) { .crew-plans { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Club: beneficios más pegados a los planes, textos breves (máximo 2 líneas) y tarjetas más juntas (Arnold). */
.section.crew-plans-sec { padding-bottom: 0; }
.section.crew-ben-sec { padding-top: 26px; }
.crew-ben-sec .section-head { margin-bottom: 26px; }
.crew-benefits { gap: 16px; }
.crew-ben-tx { padding: 14px 18px 16px; }
.crew-ben-tx h3 { margin-bottom: 4px; }
.crew-ben-tx p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Compra del Club: avisos del flujo de Xbox y restricción (sin diseño todavía, solo funcional). */
.crew-flow-msg { margin: 0 0 16px; }
.crew-flow-msg p { margin: 0 0 6px; }
#crew-msg-restricted { display: flex; gap: 10px; align-items: center; color: #b42318; font-weight: 700; }
#crew-msg-restricted p { margin: 0; }
#crew-msg-unknown a { overflow-wrap: anywhere; }
#crew-support { margin-bottom: 16px; }

/* Compra del Club: diseño elegido por Arnold (opción 16 con las letras de la 19).
   Planes en tarjetas oscuras con el número de meses en contorno neón; números de paso grandes en contorno morado;
   preguntas en Days One; respuesta elegida en morado lleno; soporte en verde de WhatsApp. */
.crew-buy .field legend { gap: 12px; font-family: "Days One", sans-serif; font-weight: 400; font-size: .98rem; letter-spacing: .02em; text-transform: uppercase; color: #211c3a; }
.crew-buy .step-n { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; font-size: 2.6rem; line-height: 1; color: #fff; filter: url(#crew-ol-ink); }
.crew-buy .opt-grid.crew-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.crew-buy .crew-po > .cp-body { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 6px; align-content: start; min-height: 128px; padding: 16px 18px; border: 1.5px solid transparent; border-radius: 14px; color: #fff; background: linear-gradient(140deg, #18182f, #2c2350); box-shadow: 0 12px 26px rgba(24, 24, 47, .18); }
.crew-buy .crew-po input:checked + .cp-body { border-color: #b98cff; background: linear-gradient(140deg, #18182f, #2c2350); box-shadow: 0 0 0 1.5px #b98cff, 0 0 22px rgba(185, 140, 255, .55); }
.crew-buy .crew-po:hover > .cp-body { border-color: rgba(185, 140, 255, .6); }
.crew-buy .cp-gh { position: absolute; z-index: -1; right: 8px; bottom: -26px; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; font-size: 7rem; line-height: 1; color: #fff; filter: url(#crew-ol-glow); pointer-events: none; }
.crew-buy .cp-name { font-family: "Days One", sans-serif; font-size: 1rem; }
.crew-buy .cp-price { display: flex; align-items: center; gap: 8px; font-family: "Days One", sans-serif; font-size: 1.4rem; line-height: 1; }
.crew-buy .cp-price strong { font-weight: 400; }
.crew-buy .cp-price .lc-flag { width: 22px; height: auto; flex: none; }
.crew-buy .cp-note { font-size: .78rem; color: rgba(255, 255, 255, .7); }
.crew-buy .opt-sm > span { justify-content: center; min-width: 68px; padding: 0 18px; border: 1.5px solid rgba(33, 28, 58, .12); border-radius: 12px; background: #fff; font-weight: 700; }
.crew-buy .opt-sm input:checked + span { border-color: #382873; background: #382873; color: #fff; box-shadow: none; }
.crew-buy .crew-flow-msg { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; line-height: 1.55; }
.crew-buy .crew-flow-msg .ico { flex: none; }
.crew-buy #crew-msg-unknown .ico { color: #8a3cff; }
.crew-buy #crew-msg-unknown a { color: inherit; overflow-wrap: anywhere; }
.crew-buy .crew-support { justify-self: start; width: fit-content; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-bottom: 16px; padding: 0 24px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px rgba(37, 211, 102, .28); transition: background .2s; }
.crew-buy .crew-support:hover { background: #1fb457; color: #fff; }
.crew-buy .crew-support:focus-visible { outline: 2px solid #382873; outline-offset: 3px; }
.crew-buy .config-summary { padding: 26px; border-radius: 18px; background: #fff; border: 1px solid rgba(33, 28, 58, .08); box-shadow: 0 14px 32px rgba(38, 29, 84, .08); }
.crew-buy .config-summary h2 { margin: 0 0 4px; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: 1.9rem; line-height: 1; }
.crew-buy .config-summary h2 em { font-style: inherit; color: #8a3cff; }
.crew-buy .config-summary .summary-dl div { font-size: .9rem; }
.crew-buy .config-summary .summary-dl dd { font-weight: 700; }
.crew-buy .config-summary .total { align-items: center; }
.crew-buy .config-summary .total > span { font-family: "Days One", sans-serif; }
.crew-buy #cfg-total { display: flex; align-items: center; gap: 8px; font-family: "Days One", sans-serif; font-weight: 400; font-size: 1.55rem; }
.crew-buy #cfg-total strong { font-weight: 400; }
.crew-buy #cfg-total .lc-flag { width: 22px; height: auto; flex: none; }
.crew-buy #cfg-add { min-height: 50px; border-radius: 12px; background: #382873; }
.crew-buy #cfg-add:hover:not(:disabled) { background: #69149c; }
.crew-buy #cfg-add:disabled { opacity: .4; }
@media (max-width: 760px) { .crew-buy .opt-grid.crew-plan-grid { grid-template-columns: minmax(0, 1fr); } }

/* Envíos: diseño elegido por Arnold (opción 5 del catálogo), con «Opción A» y «Opción B» en lugar de 01 y 02
   para que no parezcan pasos. «Opción A/B» en Montserrat cursiva con contorno morado sin relleno; títulos en Days One. */
body[data-page="friendbot"] .fb-method { grid-template-columns: minmax(0, 1fr) auto; align-content: start; row-gap: 10px; }
body[data-page="friendbot"] .fb-method-index { grid-column: 1; grid-row: 1; justify-self: start; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; font-size: 2.1rem; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; color: #fff; filter: url(#fb-ol-ink); padding-right: .1em; }
body[data-page="friendbot"] .fb-method-copy { grid-column: 1; grid-row: 2; }
body[data-page="friendbot"] .fb-method-check { grid-column: 2; grid-row: 1; align-self: center; }
body[data-page="friendbot"] .fb-method-title { font-family: "Days One", sans-serif; font-weight: 400; font-size: .98rem; letter-spacing: .01em; text-transform: uppercase; }
body[data-page="friendbot"] .fb-method.is-active,
body[data-page="friendbot"] .fb-method[aria-pressed="true"] { border-color: #b98cff; background: #fff; box-shadow: 0 0 0 1px #b98cff, 0 0 18px rgba(185, 140, 255, .45); }
body[data-page="friendbot"] .fb-method[aria-pressed="true"] .fb-method-check { border-color: #8a3cff; background: #8a3cff; }
body[data-page="friendbot"] .fb-workspace-head h2 { font-family: "Days One", sans-serif; font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.3rem); letter-spacing: .01em; text-transform: uppercase; }


/* Envíos: título «Prepara tu cuenta» del mismo tamaño que «Club de Fortnite» y «Recarga de paVos» (.page-head.compact h1). */
body[data-page="friendbot"] .fb-page-head h1 { font-size: clamp(2.1rem, 4.5vw, 3.8rem); }

/* Envíos: aviso de 48 h como la opción 20 del catálogo. «48 H» grande en contorno morado, centrado y separado
   por encima del texto (no lo toca); «48 h de amistad» en rosa. */
body[data-page="friendbot"] .fb-wait {
  --fb-48: clamp(3.8rem, 9vw, 5.4rem);
  position: relative;
  isolation: isolate;
  display: block;
  padding: calc(var(--fb-48) * .86 + 14px) 0 0;
  border-top: 0;
  text-align: center;
  font-size: 1rem;
}
body[data-page="friendbot"] .fb-wait strong { color: #ff4fa3; }
body[data-page="friendbot"] .fb-wait-ghost { position: absolute; z-index: -1; left: 50%; top: 0; transform: translateX(-50%); font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; font-size: var(--fb-48); line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: #fff; filter: url(#fb-ol-ink); pointer-events: none; user-select: none; }


/* Carrito sin cuenta (2026-10-20): nombre de Fortnite, aviso de amistad, métodos de pago y confirmación por WhatsApp. */
.cart-summary { text-align: left; }
.cart-summary h2 { font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: 1.9rem; line-height: 1; }
.cart-summary h2 em { font-style: inherit; color: #8a3cff; }
#cart-total { display: flex; align-items: center; gap: 8px; font-family: "Days One", sans-serif; font-weight: 400; }
#cart-total .lc-flag { width: 22px; height: auto; flex: none; }
.cart-field { display: grid; gap: 6px; }
.cart-field .field-hint { margin: 0; font-size: .8rem; color: var(--c-muted); }
.buyer-friend { padding: 12px 14px; border: 1px solid; border-radius: 12px; font-size: .88rem; line-height: 1.5; }
.buyer-friend.is-ok { background: #e9f8f0; border-color: #9be0bd; color: #1c6b46; }
.buyer-friend.is-wait { background: #fff7e6; border-color: #f3d39b; color: #8a5a00; }
.buyer-friend.is-warn { background: #fff1f5; border-color: #ffc2d6; color: #a3134f; }
.buyer-friend.is-info { background: #f5f2fb; border-color: rgba(56, 40, 115, .15); color: #4d4761; }
.buyer-friend a { color: inherit; font-weight: 800; }
.pay-details { font-size: .88rem; line-height: 1.5; color: #4d4761; }
.pay-details p { margin: 0; }
.pay-details .pay-title { font-weight: 800; color: #211c3a; }
.pay-details .pay-data { margin-top: 4px; white-space: pre-line; font-family: "Days One", sans-serif; color: #211c3a; }
.wa-confirm { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 20px; border: 0; border-radius: 999px; background: #25d366; color: #fff; font: 800 .98rem Inter, system-ui, sans-serif; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 10px 22px rgba(37, 211, 102, .28); transition: background .2s; }
.wa-confirm:hover { background: #1fb457; color: #fff; }
.wa-confirm:focus-visible { outline: 2px solid #382873; outline-offset: 3px; }
.wa-confirm:disabled { opacity: .6; cursor: progress; }
.wa-confirm svg { flex: none; }
.cart-loading { margin: 0; padding: 22px 0; color: var(--c-muted); }
.ci-art img { width: 100%; height: 100%; object-fit: contain; }
.order-done { display: grid; gap: 12px; padding: 28px; }
.order-done .kicker { margin: 0; }
.order-done h2 { margin: 0; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; }
.order-done p { margin: 0; color: #4d4761; line-height: 1.55; }
.order-done .od-total b { font-family: "Days One", sans-serif; font-weight: 400; color: #211c3a; }
.order-done .wa-confirm { justify-self: start; width: auto; padding: 0 26px; }
.order-done .link-btn { justify-self: start; }
.fb-friend { margin: 6px 0 0; font-weight: 600; line-height: 1.5; }
.fb-friend.is-ok { color: #1c6b46; }
.fb-friend.is-wait { color: #8a5a00; }
.order-done h2 span { white-space: nowrap; }
/* Envíos: «Ir a la tienda diaria» e «Ir al carrito» uno debajo del otro en celular. */
@media (max-width: 680px) { body[data-page="friendbot"] .fb-send .btn { flex: 1 1 100%; } }

/* Envíos: detalle de amistad por cuenta oficial (Arnold, 2026-10-20). Cada cuenta en su tarjeta: amigos con 48 h o más,
   amigos recientes (faltan X h) o sin amistad; debajo, la frase de cierre. */
body[data-page="friendbot"] .fb-state > div { flex: 1; min-width: 0; }
body[data-page="friendbot"] .fb-state .fb-friend-lead { margin: 8px 0 10px; color: #1c6b46; font-size: .92rem; font-weight: 700; }
.fb-friends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.fb-friends li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(28, 107, 70, .2); border-radius: 12px; background: #fff; }
.fb-friends .ff-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.fb-friends .ff-ico svg { stroke-width: 2.6; }
.fb-friends .ff-txt { display: grid; gap: 2px; min-width: 0; }
.fb-friends b { font-family: "Days One", sans-serif; font-weight: 400; font-size: .9rem; line-height: 1.2; color: #211c3a; }
.fb-friends small { font-size: .74rem; font-weight: 700; line-height: 1.3; }
.fb-friends .is-ready .ff-ico { background: #2ebb79; color: #fff; }
.fb-friends .is-ready small { color: #1c7a4c; }
.fb-friends .is-wait { border-color: rgba(217, 119, 6, .35); }
.fb-friends .is-wait .ff-ico { background: #f59e0b; color: #fff; }
.fb-friends .is-wait small { color: #9a5b00; }
.fb-friends .is-none { border-color: rgba(33, 28, 58, .1); background: rgba(255, 255, 255, .55); }
.fb-friends .is-none .ff-ico { background: #e7e3ee; color: #8a849a; }
.fb-friends .is-none b { color: #8a849a; }
.fb-friends .is-none small { color: #9a94aa; }
body[data-page="friendbot"] .fb-state .fb-friend-end { margin: 12px 0 0; font-size: .95rem; font-weight: 800; }
body[data-page="friendbot"] .fb-state .fb-friend-end.is-ok { color: #1c6b46; }
body[data-page="friendbot"] .fb-state .fb-friend-end.is-wait { color: #9a5b00; }
@media (max-width: 680px) { .fb-friends { grid-template-columns: minmax(0, 1fr); } }

/* Envíos: pedir solicitud de las cuentas oficiales que faltan (Arnold, 2026-10-20). Las tarjetas «Sin amistad» se
   eligen tocándolas (todas marcadas al inicio) y un solo botón avisa a Telegram y Discord con las cuentas elegidas. */
.fb-friends li.is-pick { padding: 0; border: 0; background: none; }
.fb-friends .ff-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 12px; border: 1.5px dashed rgba(33, 28, 58, .18); border-radius: 12px; background: rgba(255, 255, 255, .55); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.fb-friends .ff-pick:focus-visible { outline: 2px solid #382873; outline-offset: 2px; }
.fb-friends .ff-pick .ff-ico { background: #e7e3ee; color: #8a849a; }
.fb-friends .ff-pick b { color: #8a849a; }
.fb-friends .ff-pick small { color: #9a94aa; }
.fb-friends .ff-pick[aria-pressed="true"] { border-style: solid; border-color: #b98cff; background: #fff; box-shadow: 0 0 0 1px #b98cff, 0 0 14px rgba(185, 140, 255, .35); }
.fb-friends .ff-pick[aria-pressed="true"] .ff-ico { background: #8a3cff; color: #fff; }
.fb-friends .ff-pick[aria-pressed="true"] b { color: #211c3a; }
.fb-friends .ff-pick[aria-pressed="true"] small { color: #69149c; }
.fb-friends .ff-pick:disabled { cursor: default; }
.fb-friends .ff-pick.is-sent { border-style: solid; border-color: rgba(28, 107, 70, .3); background: #fff; box-shadow: none; }
.fb-friends .ff-pick.is-sent .ff-ico { background: #2ebb79; color: #fff; }
.fb-friends .ff-pick.is-sent b { color: #211c3a; }
.fb-friends .ff-pick.is-sent small { color: #1c7a4c; }
.fb-missing { margin-top: 10px; }
.fb-missing-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1.5px solid #382873; border-radius: 999px; background: #fff; color: #382873; font: 800 .9rem Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.fb-missing-btn:hover:not(:disabled) { background: #382873; color: #fff; }
.fb-missing-btn:focus-visible { outline: 2px solid #8a3cff; outline-offset: 3px; }
.fb-missing-btn:disabled { opacity: .5; cursor: not-allowed; }
body[data-page="friendbot"] .fb-state .fb-missing-done { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #1c6b46; font-weight: 700; }
body[data-page="friendbot"] .fb-state .fb-missing-done svg { flex: none; }
body[data-page="friendbot"] .fb-state .fb-missing-note { margin: 10px 0 0; color: #4d4761; }
body[data-page="friendbot"] .fb-state .fb-pick-hint { margin: 8px 0 12px; color: #4d4761; font-size: .92rem; font-weight: 600; }
.fb-missing-btn svg { flex: none; }
@media (max-width: 680px) { .fb-missing-btn { width: 100%; justify-content: center; padding: 10px 16px; border-radius: 14px; line-height: 1.3; } }
@media (max-width: 680px) { .fb-missing-btn svg { display: none; } .fb-missing-btn { font-size: .88rem; } }

/* Portada: Servicios. Tres tarjetas verticales de imagen completa (opción 1 del catálogo) con precio y botón en neón
   y brillo neón en el borde al pasar el cursor (opción 2). Imágenes y textos los completa app.js (renderServiceCards). */
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.svc-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px;
  min-height: clamp(520px, 49.4vw, 650px); padding: clamp(24px, 2.6vw, 32px);
  border-radius: 18px; color: #ffffff; text-decoration: none; background: #1d1430;
  box-shadow: 0 18px 44px rgba(38, 29, 84, .10);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vs-motion .svc-card.is-inview { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.svc-card:hover,
.svc-card:focus-visible { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 1px #b98cff, 0 0 42px rgba(185, 140, 255, .35); outline: none; }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(14, 9, 34, .96) 0%, rgba(14, 9, 34, .55) 38%, transparent 66%); }
.svc-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; transition: transform .6s var(--ease); }
.svc-card:hover .svc-bg { transform: scale(1.04); }
.svc-bg img { position: absolute; max-width: none; }
.svc-bg img[hidden] { display: none; }
/* Club: banner del mes (transparente) sobre los colores del paquete, centrado en su personaje y con la cabeza
   a 18 px del borde superior (--cx y --ty los mide app.js). */
.svc-club .svc-bg { background: linear-gradient(165deg, color-mix(in srgb, var(--c1, #564d66) 85%, #ffffff) 0%, #2a1d44 55%, var(--c2, #a62936) 130%); }
#svc-club-img { top: calc(18px - var(--ty, .14) * 104%); left: 50%; height: 104%; width: auto; transform: translateX(calc(var(--cx, .7) * -100%)); }
#svc-club-img.is-skin { top: 4%; height: 74%; transform: translateX(-50%); }
.svc-pav .svc-bg img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Tienda diaria: una skin de hoy sobre el color que trae de la tienda. */
.svc-shop .svc-bg { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tone, #c0262d) 85%, #ffffff) 0%, color-mix(in srgb, var(--tone, #c0262d) 60%, #0e0a1f) 55%, #0e0a1f 100%); }
#svc-shop-img { top: 0; left: 50%; height: 76%; width: auto; aspect-ratio: 1; transform: translateX(-50%); }
/* Títulos con la letra de la opción 8 del catálogo (Bowlby One, alojada en la web) y una sombra ligera arriba a la izquierda. */
@font-face { font-family: "Bowlby One"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/bowlby-one-400-latin.woff2") format("woff2"); }
.svc-k { font-family: "Bowlby One", var(--font-display); font-style: normal; font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 2.65vw, 2.3rem); line-height: 1.02; letter-spacing: 0; text-shadow: -2px -2px 0 #000; }
.svc-d { max-width: 34ch; color: rgba(255, 255, 255, .82); font-size: .92rem; line-height: 1.55; }
.svc-price { font-family: "Days One", sans-serif; font-weight: 400; font-size: .95rem; color: #b98cff; }
.svc-price:empty { display: none; }
.svc-go {
  position: relative; isolation: isolate; overflow: hidden; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid #b98cff; color: #ffffff; font-weight: 800; font-size: .92rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Al señalar la tarjeta, el botón se rellena con un degradado neón y lo cruza un destello una sola vez. */
.svc-go::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(135deg, #8a3cff 0%, #69149c 100%); opacity: 0; transition: opacity .3s var(--ease); }
.svc-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; z-index: -1; width: 50%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.svc-go .ico { transition: transform .25s var(--ease); }
.svc-card:hover .svc-go,
.svc-card:focus-visible .svc-go { border-color: #d9c2ff; box-shadow: 0 0 18px rgba(185, 140, 255, .65), 0 6px 18px rgba(105, 20, 156, .45); }
.svc-card:hover .svc-go::before,
.svc-card:focus-visible .svc-go::before { opacity: 1; }
.svc-card:hover .svc-go::after,
.svc-card:focus-visible .svc-go::after { animation: svc-go-shine 1.1s ease-in-out .15s 1 both; }
.svc-card:hover .svc-go .ico,
.svc-card:focus-visible .svc-go .ico { transform: translateX(4px); }
@keyframes svc-go-shine { from { left: -70%; opacity: 1; } to { left: 130%; opacity: 1; } }
@media (max-width: 900px) {
  .svc-cards { grid-template-columns: minmax(0, 1fr); }
  .svc-card { min-height: 390px; }
  .svc-k { font-size: 2rem; }
}
/* Celular: tarjetas tan altas como en PC (3:5, misma proporción) para que no queden cuadradas. */
@media (max-width: 640px) {
  .svc-card { min-height: 0; aspect-ratio: 3 / 5; }
}
/* Tarjetas anchas y bajas (tablet): el personaje a la derecha, fuera del texto. */
@media (min-width: 641px) and (max-width: 900px) {
  #svc-club-img, #svc-club-img.is-skin, #svc-shop-img { left: 72%; }
  .svc-pav .svc-bg img { object-position: center 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card:hover, .svc-card:focus-visible { transform: none; }
  .svc-card:hover .svc-bg { transform: none; }
  .svc-card:hover .svc-go::after, .svc-card:focus-visible .svc-go::after { animation: none; }
}

/* Ajustes de la auditoría: áreas de toque de 44 px sin cambiar lo visible; foco visible en filtros y menú de idioma; etiquetas de la portada de 12 px. */
.nav-toggle { position: relative; }
.cart-btn::after, .nav-toggle::after { content: ""; position: absolute; inset: -4px; }
.rail-item:focus-visible, .lc-opt:focus-visible { outline: 2px solid #b98cff; outline-offset: 2px; }
.ts > span { font-size: .75rem; }
@media (max-width: 640px) { .ts > span { font-size: .75rem; } }
/* Auditoría: etiqueta de categoría legible sobre las imágenes de la tienda. */
.shop-mosaic .p-cat { display: inline-block; align-self: flex-start; width: max-content; max-width: 100%; padding: 2px 7px; border-radius: 6px; background: rgba(14, 9, 34, .62); color: #fff; text-shadow: none; }

/* Celular y tableta (puntero táctil): carrito de 38 px y precio más compacto en la tienda diaria, para que no se pisen. */
@media (pointer: coarse) {
  .shop-mosaic .buy-tag { width: 38px; height: 38px; right: 8px; bottom: 8px; }
  .shop-mosaic .buy-tag svg { width: 17px; height: 17px; }
  .shop-mosaic .p-foot .price:has(strong) { gap: 5px; padding: 3px 8px 3px 6px; border-radius: 7px; }
  .shop-mosaic .p-foot .price .lc-flag { width: 16px; height: 11px; }
  .shop-mosaic .p-foot .price strong { font-size: .85rem; }
}
/* Ondas: la versión normal (1009 y 704 px de ancho) basta para celular, tableta y pantallas con escala de Windows; la de doble resolución solo en pantallas grandes de alta densidad. */
@media (min-width: 1100px) and (min-resolution: 2dppx), (min-width: 1100px) and (-webkit-min-device-pixel-ratio: 2) {
  body::before { background-image: url("assets/ondas-sup-der@2x.webp"), url("assets/ondas-inf-izq@2x.webp"); }
}

/* Carrito: medios de pago (Arnold, 2026-10-21). Opciones en dos columnas (una en pantallas muy angostas); la elegida lleva borde morado
   y una marca en la esquina. En Perú, Yape y Plin van primero en su propio grupo; el resto de medios son los mismos en todos los países. */
.pay-options { display: grid; gap: 14px; }
.pay-group { display: grid; gap: 8px; }
.pay-cap { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6c6683; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.pay-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-card { display: flex; align-items: center; gap: 9px; box-sizing: border-box; height: 100%; min-height: 54px; padding: 8px 10px 8px 8px; border: 1.5px solid rgba(33, 28, 58, .12); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
@media (hover: hover) { .pay-opt:hover .pay-card { border-color: rgba(56, 40, 115, .38); } }
.pay-opt input:checked + .pay-card { border-color: #382873; background: #f6f2ff; box-shadow: inset 0 0 0 1px #382873; }
.pay-opt input:focus-visible + .pay-card { outline: 2px solid #382873; outline-offset: 3px; }
.pay-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #efe9ff; color: #382873; }
.pay-txt { display: grid; gap: 1px; min-width: 0; }
.pay-name { font-weight: 700; font-size: .9rem; line-height: 1.15; color: #211c3a; }
.pay-sub { font-size: .74rem; line-height: 1.15; color: #6c6683; }
.pay-mark { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: #382873; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.pay-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pay-opt input:checked + .pay-card .pay-mark { opacity: 1; transform: none; }
.pay-details { padding: 12px 14px; border: 1px solid rgba(56, 40, 115, .15); border-radius: 12px; background: #f5f2fb; }
.pay-details[hidden] { display: none; }
/* Con los medios de pago el resumen es más alto: en ventanas bajas deja de fijarse arriba para que el botón de confirmar siempre se alcance. */
@media (min-width: 901px) and (max-height: 800px) { .cart-summary { position: static; } }
/* Libro de reclamaciones (2026-10-22): aviso en la portada y formulario virtual. */
.libro-aviso { border-top: 1px solid var(--c-line); background: var(--c-surface); }
.libro-aviso-row { padding: var(--s-4) 0; }
.libro-aviso-link { display: flex; align-items: center; gap: var(--s-3); color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); }
.libro-aviso-link:hover { color: var(--c-action); }
.libro-aviso-link .ico { flex: none; color: var(--c-action); }
.libro-card { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); padding: clamp(18px, 3vw, 28px); }
.libro-card h2 { font-size: var(--fs-lg); margin: 0; max-width: none; }
.libro-card > p { margin: 0; color: var(--c-muted); }
.libro-tipos { display: grid; gap: var(--s-2); margin: 0; }
.libro-tipos dt { font-weight: var(--fw-semi); }
.libro-tipos dd { margin: 0 0 var(--s-2); color: var(--c-muted); }
.libro-form { gap: var(--s-4); }
.libro-form .field-group { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.libro-form .field-group legend { padding: 0; }
.libro-form .libro-opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.libro-form .input, .libro-form .select { width: 100%; }
.libro-form .textarea { width: 100%; min-height: 120px; padding: var(--s-3); line-height: 1.5; resize: vertical; font: inherit; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.libro-form .textarea:hover { border-color: var(--c-line-strong); }
.libro-form .textarea:focus { border-color: var(--c-action); box-shadow: 0 0 0 4px var(--action-soft); outline: none; }
.libro-form .input[aria-invalid="true"], .libro-form .textarea[aria-invalid="true"] { border-color: var(--c-action); box-shadow: 0 0 0 3px var(--action-soft); }
.libro-check { display: flex; gap: var(--s-2); align-items: flex-start; }
#complaint-result { margin: 0; min-height: 1.5em; font-weight: var(--fw-semi); color: var(--c-text); line-height: 1.5; }
#complaint-result:not(:empty) { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--action-soft); }
#complaint-result:focus { outline: var(--focus); outline-offset: 3px; }
/* Icono oficial del libro de reclamaciones (2026-10-22): en el aviso de la portada y arriba de la página del libro. */
.libro-aviso-link img { flex: none; height: 80px; width: auto; }
.libro-hero-img { display: block; height: auto; width: auto; max-height: 150px; margin: 0 0 var(--s-4); }
/* Libro de reclamaciones en celular: el título cabe sin cortar «RECLAMACIONES» (2026-10-22). */
@media (max-width: 480px) { body[data-page="libro"] h1 { font-size: 2.2rem; line-height: 1.05; } }
/* Carrito: texto de introducción casi pegado a los productos (Arnold, 2026-10-22). */
body[data-page="carrito"] .page-head.compact { padding-bottom: 0; border-bottom: 0; }
body[data-page="carrito"] .cart-sec { padding-top: 14px; }
/* Carrito estilo 17, cómic (Arnold, 2026-10-22): bordes gruesos, sombra sólida, campo de nombre amarillo y fichas de amistad. */
body[data-page="carrito"] .cart-box, body[data-page="carrito"] .cart-summary, body[data-page="carrito"] .order-done { border: 3px solid #211c3a; border-radius: 14px; box-shadow: 6px 6px 0 #211c3a; }
body[data-page="carrito"] .pay-card { border: 2px solid #211c3a; }
body[data-page="carrito"] .pay-opt input:checked + .pay-card { background: #ffe66b; border-color: #211c3a; box-shadow: 3px 3px 0 #211c3a; }
body[data-page="carrito"] .pay-details { border: 2px solid #211c3a; background: #fff; }
body[data-page="carrito"] .wa-confirm { border: 3px solid #211c3a; box-shadow: 4px 4px 0 #211c3a; }
body[data-page="carrito"] #buyer-name { background: #ffe66b; border: 2px solid #211c3a; border-radius: 10px; box-shadow: 3px 3px 0 #211c3a; font-family: "Days One", sans-serif; font-size: 1.1rem; }
body[data-page="carrito"] #buyer-name::placeholder { font-family: Inter, system-ui, sans-serif; font-size: .95rem; color: #6c6683; }
body[data-page="carrito"] .buyer-friend { border: 2px solid #211c3a; border-radius: 10px; }
.buyer-friend.is-ok { display: grid; gap: 8px; background: #fff; border-color: #211c3a; color: #211c3a; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-chip { padding: 4px 9px; border: 2px solid #211c3a; border-radius: 999px; background: #c9f2d9; font-weight: 800; font-size: .75rem; box-shadow: 2px 2px 0 #211c3a; }
.bf-note { font-size: .8rem; color: #4d4761; }
/* Carrito estilo 17, ajustes (Arnold, 2026-10-22): lila de la marca en lugar de amarillo y verde; botón de WhatsApp con texto e icono negros y el icono grande. */
body[data-page="carrito"] #buyer-name { background: #d4bcff; }
body[data-page="carrito"] .pay-opt input:checked + .pay-card { background: #d4bcff; }
.bf-chip { background: #e9ddff; color: #382873; }
body[data-page="carrito"] .wa-confirm, body[data-page="carrito"] .wa-confirm:hover { color: #000; }
.wa-confirm svg { width: 40px; height: 40px; }
/* Fichas de amistad estilo contador de rotación (Arnold, 2026-10-22): fondo oscuro, borde neón y letras lila con brillo. */
.bf-chip { background: linear-gradient(180deg, #1a1040, #0d0a26); border: 1.5px solid #8a3cff; color: #e2c8ff; text-shadow: 0 0 8px rgba(181, 107, 255, .75); box-shadow: 0 0 10px rgba(138, 60, 255, .45), inset 0 0 8px rgba(138, 60, 255, .3); letter-spacing: .04em; font-size: .72rem; }
/* Marcas de amistad (Arnold, 2026-10-22): check verde si ya es amigo por más de 48 h, equis roja si todavía no. */
.bf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bf-row .bf-chips { flex: 1; }
.bf-mark { flex: none; font-size: 1.7rem; line-height: 1; }
.buyer-friend.is-wait, .buyer-friend.is-warn { position: relative; padding-right: 52px; }
.bf-x { position: absolute; right: 12px; top: 10px; }
/* Carrito estilo 18, cómic pop con los azules del logo (Arnold, 2026-10-22): tinta marino #0b1030, ártico #9fe0ff, cian #4cc3f0,
   índigo #3a3d9f y morado #8a3cff; letra Bowlby One en títulos, precios y botón. Sustituye los colores del estilo 17. */
body[data-page="carrito"] .cart-box, body[data-page="carrito"] .cart-summary, body[data-page="carrito"] .order-done { border: 3px solid #0b1030; border-radius: 14px; box-shadow: 6px 6px 0 #0b1030; }
body[data-page="carrito"] .cart-summary { grid-template-columns: minmax(0, 1fr); background-color: #fff; background-image: radial-gradient(rgba(159, 224, 255, .56) 1.3px, transparent 1.7px); background-size: 11px 11px; }
/* Sin mensaje, el aviso de la orden no ocupa espacio: «Vaciar carrito» queda cerca del texto de WhatsApp (Arnold, 2026-11-12). */
body[data-page="carrito"] #order-msg:empty { display: none; }
/* Productos: precio en etiqueta inclinada y entrega en caja con borde. */
body[data-page="carrito"] .ci-art { border: 2px solid #0b1030; }
body[data-page="carrito"] .ci-name { font-weight: 800; color: #0b1030; }
body[data-page="carrito"] .ci-sum { justify-self: end; align-self: start; padding: 3px 12px; background: #9fe0ff; color: #3a3d9f; border: 2px solid #0b1030; border-radius: 8px; transform: rotate(4deg); box-shadow: 2px 2px 0 #0b1030; font-family: "Bowlby One", var(--font-display); font-weight: 400; font-size: 1.05rem; white-space: nowrap; }
body[data-page="carrito"] .cart-item.is-unavailable .ci-sum { background: #fff; color: var(--c-muted); }
body[data-page="carrito"] .ci-config { border: 2px solid #0b1030; border-radius: 8px; background: #fff; }
body[data-page="carrito"] .ci-config dt { text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; }
@media (max-width: 640px) { body[data-page="carrito"] .ci-sum { justify-self: start; } }
/* Título en globo de diálogo y total en cartel inclinado. */
body[data-page="carrito"] .cart-summary h2 { justify-self: start; position: relative; margin-bottom: 8px; padding: 8px 18px; background: #fff; color: #3a3d9f; border: 3px solid #0b1030; border-radius: 22px; font-family: "Bowlby One", var(--font-display); font-style: normal; font-weight: 400; font-size: 1.55rem; letter-spacing: 0; line-height: 1; text-transform: uppercase; }
body[data-page="carrito"] .cart-summary h2 em { color: #8a3cff; }
body[data-page="carrito"] .cart-summary h2::after { content: ""; position: absolute; left: 26px; bottom: -11px; width: 16px; height: 16px; background: #fff; border-right: 3px solid #0b1030; border-bottom: 3px solid #0b1030; transform: rotate(45deg); }
body[data-page="carrito"] .cart-summary .total { align-items: center; padding: 9px 13px; background: #9fe0ff; color: #3a3d9f; border: 2px solid #0b1030; border-radius: 10px; transform: rotate(-1.2deg); box-shadow: 3px 3px 0 #0b1030; }
body[data-page="carrito"] .cart-summary .total strong { display: inline-flex; align-items: center; gap: 8px; font-family: "Bowlby One", var(--font-display); font-weight: 400; font-size: 1.4rem; color: #3a3d9f; }
/* Nombre de Fortnite en placa de jugador. */
.name-plate { position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 22px 12px 8px 14px; background: #3a3d9f; border: 3px solid #0b1030; border-radius: 10px; box-shadow: 3px 3px 0 #0b1030; }
.name-plate:focus-within { outline: 3px solid #4cc3f0; outline-offset: 2px; }
.name-plate:has([aria-invalid="true"]) { border-color: #ff4d6d; box-shadow: 3px 3px 0 #ff4d6d; }
.name-plate .field-label { position: absolute; top: 7px; left: 14px; margin: 0; font-size: .6rem; font-weight: 800; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #9fe0ff; }
body[data-page="carrito"] #buyer-name, body[data-page="carrito"] #buyer-name:focus, body[data-page="carrito"] #buyer-name:hover { flex: 1 1 0; width: 0; min-width: 0; height: auto; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; color: #fff; font-family: "Bowlby One", var(--font-display); font-size: 1.45rem; }
body[data-page="carrito"] #buyer-name::placeholder { font-family: Inter, system-ui, sans-serif; font-size: .95rem; color: rgba(255, 255, 255, .6); }
.np-badge { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -10px; border-radius: 50%; background: #9fe0ff; color: #3a3d9f; border: 2px solid #0b1030; }
/* Aviso de amistad: cuentas en cuadritos con el logo, estrella cómic con check (o equis roja si aún no hay 48 h). */
body[data-page="carrito"] .buyer-friend { border: 2px solid #0b1030; border-radius: 12px; background: #fff; color: #0b1030; }
body[data-page="carrito"] .buyer-friend.is-info { background: #e3f5ff; }
body[data-page="carrito"] .buyer-friend.is-wait, body[data-page="carrito"] .buyer-friend.is-warn { background: #fff; color: #0b1030; padding-right: 60px; }
.buyer-friend.is-ok { display: grid; gap: 9px; }
.bf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-size: .9rem; line-height: 1.3; }
.bf-mark svg { display: block; width: 40px; height: 40px; }
.bf-x { right: 10px; top: 10px; }
.bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.bf-tile { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 5px; border: 2px solid #0b1030; border-radius: 8px; background: #fff; font-weight: 800; font-size: .72rem; letter-spacing: -.01em; }
.bf-tile img { flex: none; width: 17px; height: 17px; }
.bf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-tile svg { flex: none; width: 14px; height: 14px; margin-left: auto; }
.bf-note { font-size: .78rem; color: #4d4761; }
/* Medios de pago: botones que se hunden al elegirlos; datos de pago en caja punteada. */
body[data-page="carrito"] .pay-cap { color: #0b1030; }
body[data-page="carrito"] .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
@media (max-width: 340px) { body[data-page="carrito"] .pay-grid { grid-template-columns: minmax(0, 1fr); } }
body[data-page="carrito"] .pay-card { border: 2px solid #0b1030; border-bottom-width: 7px; border-radius: 12px; background: #fff; box-shadow: none; transition: transform .12s, border-width .12s, background .12s; }
body[data-page="carrito"] .pay-ico { background: #fff; color: #8a3cff; }
.pay-ico.is-logo { overflow: hidden; background: none; padding: 0; }
.pay-ico.is-logo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
body[data-page="carrito"] .pay-ico.is-logo { background: none; border: 1.5px solid #0b1030; }
body[data-page="carrito"] .pay-name { color: #0b1030; font-weight: 800; }
@media (hover: hover) { body[data-page="carrito"] .pay-opt:hover .pay-card { border-color: #0b1030; background: #e3f5ff; } }
body[data-page="carrito"] .pay-opt input:checked + .pay-card { border-color: #0b1030; border-bottom-width: 2px; transform: translateY(5px); background: #4cc3f0; box-shadow: none; }
body[data-page="carrito"] .pay-opt input:checked + .pay-card .pay-sub { color: #0b1030; }
body[data-page="carrito"] .pay-mark { display: none; }
body[data-page="carrito"] .pay-details { border: 2.5px dashed #0b1030; border-radius: 10px; background: #fff; }
body[data-page="carrito"] .pay-details .pay-data { font-family: "Bowlby One", var(--font-display); color: #0b1030; overflow-wrap: anywhere; }
/* Botón de WhatsApp, opción 2 «flecha» del catálogo 2 (Arnold, 2026-10-22): verde, letra negra Chakra Petch, icono negro a la izquierda y círculo negro con flecha verde a la derecha. Vale también para «Abrir WhatsApp». */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/chakra-petch-700-latin.woff2") format("woff2"); }
body[data-page="carrito"] .wa-confirm { min-height: 58px; padding: 8px 16px; border: 3px solid #0b1030; border-radius: 8px; box-shadow: 4px 4px 0 #0b1030; transform: none; justify-content: flex-start; text-align: left; font-family: "Chakra Petch", Inter, system-ui, sans-serif; font-weight: 700; font-size: .86rem; line-height: 1.2; text-transform: none; color: #000; }
body[data-page="carrito"] .wa-confirm > span { flex: 1; min-width: 0; }
body[data-page="carrito"] .wa-confirm > svg { flex: none; width: 34px; height: 34px; }
body[data-page="carrito"] .wa-confirm::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325d366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
/* Enlaces de abajo en una sola fila. */
.sum-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
body[data-page="carrito"] .sum-links .link-btn { color: #4d4761; }
/* Nombre con letra Righteous (más delgada, caben los 16 caracteres) y cursor que parpadea al final; cuentas de amistad sin logo y con letra Days One más grande (Arnold, 2026-10-22). */
@font-face { font-family: "Righteous"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/righteous-400-latin.woff2") format("woff2"); }
body[data-page="carrito"] #buyer-name, body[data-page="carrito"] #buyer-name:focus, body[data-page="carrito"] #buyer-name:hover { font-family: "Righteous", Inter, system-ui, sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .01em; caret-color: #9fe0ff; }
body[data-page="carrito"] #buyer-name.caret-fake { caret-color: transparent; }
.np-caret { position: absolute; width: 3px; border-radius: 2px; background: #9fe0ff; pointer-events: none; animation: np-blink 1s steps(1) infinite; }
.np-caret[hidden] { display: none; }
@keyframes np-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .np-caret { animation: none; } }
.bf-tile { gap: 6px; padding: 6px 8px; font-family: "Days One", var(--font-display); font-weight: 400; font-size: .8rem; letter-spacing: 0; }
.bf-tile svg { width: 16px; height: 16px; }
@media (max-width: 380px) { .bf-tile { padding: 6px 5px; gap: 4px; font-size: .68rem; } .bf-tile svg { width: 14px; height: 14px; } }
/* Detalle de compra estilo maqueta 1 «Hielo cómic» (Arnold, 2026-10-22): imagen grande con el alto del nombre más la caja de detalle,
   precio en etiqueta inclinada sobre la esquina (Russo One) y detalle en caja hielo. El precio unitario solo aparece con más de una unidad. */
@font-face { font-family: "Russo One"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/russo-one-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/outfit-800-latin.woff2") format("woff2"); }
body[data-page="carrito"] .cart-box { overflow: visible; }
body[data-page="carrito"] .cart-item { position: relative; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; column-gap: 16px; row-gap: 6px; padding: 24px 0 14px; }
body[data-page="carrito"] .ci-art { grid-column: 1; grid-row: 1; align-self: stretch; width: 96px; height: auto; min-height: 80px; border: 2px solid #0b1030; border-radius: 12px; background: #e3f5ff; color: #3a3d9f; }
body[data-page="carrito"] .ci-art img { padding: 4px; }
body[data-page="carrito"] .ci-art svg { width: 34px; height: 34px; }
body[data-page="carrito"] .ci-main { grid-column: 2; grid-row: 1; display: grid; gap: 6px; align-content: start; }
body[data-page="carrito"] .ci-name { font-family: "Outfit", Inter, system-ui, sans-serif; font-weight: 800; font-size: 1.02rem; line-height: 1.25; color: #141c44; }
body[data-page="carrito"] .ci-config { margin-top: 0; background: #e3f5ff; border: 2px solid #0b1030; border-radius: 8px; }
body[data-page="carrito"] .ci-config dt { text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; color: #5e6788; }
body[data-page="carrito"] .ci-config dd { color: #141c44; }
.ci-gift { display: inline-block; vertical-align: -3px; margin-right: 5px; color: #8a3cff; }
body[data-page="carrito"] .ci-sum { position: absolute; top: -15px; right: 14px; z-index: 1; padding: 3px 12px; background: #9fe0ff; color: #141c44; border: 2px solid #0b1030; border-radius: 8px; transform: rotate(4deg); box-shadow: 2px 2px 0 #0b1030; font-family: "Russo One", "Bowlby One", sans-serif; font-weight: 400; font-size: 1.1rem; text-align: center; }
body[data-page="carrito"] .qty { grid-column: 2; grid-row: 2; margin-top: 0; }
@media (max-width: 640px) {
  body[data-page="carrito"] .cart-item { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; }
  body[data-page="carrito"] .ci-art { width: 76px; min-height: 70px; }
  body[data-page="carrito"] .ci-sum { justify-self: auto; right: 8px; font-size: 1rem; }
  body[data-page="carrito"] .qty { grid-column: 1 / -1; }
}
/* Precio dentro del recuadro del artículo y entrega en una sola línea (Arnold, 2026-10-22). */
body[data-page="carrito"] .ci-box { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #e3f5ff; border: 2px solid #0b1030; border-radius: 8px; }
body[data-page="carrito"] .ci-box .ci-config { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
body[data-page="carrito"] .ci-box .ci-config dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="carrito"] .ci-box .ci-sum { position: static; flex: none; margin-left: auto; transform: rotate(3deg); }
@media (max-width: 640px) {
  body[data-page="carrito"] .ci-box { flex-wrap: wrap; row-gap: 8px; }
  body[data-page="carrito"] .ci-box .ci-config { flex-basis: 100%; }
}
/* Recuadro del artículo: colores de la opción 1, texto y caja de la opción 2, precio de la opción 8 en lila (Arnold, 2026-10-22,
   maqueta propuestas/catalogo-carrito-articulo.html). Letras Sora y Bangers alojadas en la web. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("assets/fonts/sora-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/bangers-400-latin.woff2") format("woff2"); }
body[data-page="carrito"] .ci-art { background: #eceeff; color: #3a3d9f; }
body[data-page="carrito"] .ci-name { font-family: "Sora", Inter, system-ui, sans-serif; font-weight: 800; font-size: 1.02rem; color: #141c44; }
body[data-page="carrito"] .ci-box { min-height: 52px; padding: 7px 8px 7px 12px; background: #eceeff; border: 2px solid #3a3d9f; border-radius: 9px; box-shadow: 3px 3px 0 #3a3d9f; }
body[data-page="carrito"] .ci-box .ci-config dt { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: .12em; color: #5e6788; }
body[data-page="carrito"] .ci-box .ci-config dd { font-family: "Sora", Inter, system-ui, sans-serif; font-weight: 600; font-size: .92rem; color: #141c44; }
body[data-page="carrito"] .ci-gift { width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px; color: #3a3d9f; }
body[data-page="carrito"] .ci-box .ci-sum { transform: skewX(-12deg); padding: 3px 13px; background: #d4bcff; color: #141c44; border: 2px solid #0b1030; border-radius: 4px; box-shadow: 3px 3px 0 #0b1030; font-family: "Bangers", "Russo One", sans-serif; font-size: 1.35rem; letter-spacing: .03em; line-height: 1.15; }
body[data-page="carrito"] .ci-box .ci-sum > span { display: inline-block; transform: skewX(12deg); }
body[data-page="carrito"] .cart-item.is-unavailable .ci-box .ci-sum { background: #fff; color: var(--c-muted); }
body[data-page="carrito"] .qty .rm { font-size: .78rem; }
@media (max-width: 640px) { body[data-page="carrito"] .ci-box { padding-left: 10px; } body[data-page="carrito"] .ci-box .ci-config dd { font-size: .8rem; } body[data-page="carrito"] .ci-gift { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; } }
/* Portada: la skin sale del aro entera (cabeza, brazos y manos); las piernas terminan en el borde inferior del aro (Arnold, 2026-10-23 y 2026-10-24). Bajo el centro la figura se corta por el arco del aro, también las piernas de los lados. Fuera del ancho del aro se ve hasta --skin-free del radio, para que las manos caídas no se corten. */
/* Bajo el aro: las piernas se ocultan con una curva y lo que sobresale a los lados (manos, capas) llega hasta la base del aro. */
.hero-sign.is-skin .terminal-screen img { -webkit-mask: linear-gradient(#000, #000) top / 100% var(--cy) no-repeat, radial-gradient(circle at 50% var(--cy), #000 calc(var(--D) / 2 - 4px), transparent calc(var(--D) / 2 - 3px)), radial-gradient(circle at 50% calc(var(--cy) + var(--D) * 2.465), transparent calc(var(--D) * 2.12), #000 calc(var(--D) * 2.12 + 1px)); mask: linear-gradient(#000, #000) top / 100% var(--cy) no-repeat, radial-gradient(circle at 50% var(--cy), #000 calc(var(--D) / 2 - 4px), transparent calc(var(--D) / 2 - 3px)), radial-gradient(circle at 50% calc(var(--cy) + var(--D) * 2.465), transparent calc(var(--D) * 2.12), #000 calc(var(--D) * 2.12 + 1px)); }
.hero-sign.is-skin .terminal-screen { -webkit-mask: linear-gradient(#000 calc(100% - var(--D) * var(--skin-drop) - 2px), transparent calc(100% - var(--D) * var(--skin-drop) + 2px)); mask: linear-gradient(#000 calc(100% - var(--D) * var(--skin-drop) - 2px), transparent calc(100% - var(--D) * var(--skin-drop) + 2px)); }

/* Envíos (Arnold, 2026-10-29): buscador grande al centro (maqueta 5 de propuestas/catalogo-envios-verificar.html).
   «Verificar» comprueba el nombre y pide la solicitud (maqueta 2). El resultado lleva «Opción A» arriba y la Opción B
   queda plegada debajo (maqueta 1), con las cuentas para copiar. Letras y colores de siempre. */
body[data-page="friendbot"] .fbv-search { display: grid; justify-items: center; gap: 14px; text-align: center; }
body[data-page="friendbot"] .fbv-title { margin: 0; max-width: none; font-family: "Days One", sans-serif; font-style: normal; font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.3rem); letter-spacing: .01em; line-height: 1.2; text-transform: uppercase; color: #211c3a; }
.fbv-form { width: min(640px, 100%); margin: 0; }
.fbv-pill { position: relative; display: block; }
.fbv-pill-ico { position: absolute; left: 22px; top: 25px; color: #716b80; pointer-events: none; }
.fbv-input { display: block; width: 100%; min-width: 0; height: 72px; padding: 0 190px 0 56px; border-radius: 999px; border: 2px solid #b98cff; background: #fff; color: #211c3a; font: 600 1.2rem Inter, system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 0 0 4px rgba(185, 140, 255, .18), 0 14px 30px rgba(56, 40, 115, .12); transition: border-color .18s, box-shadow .18s; }
.fbv-input::placeholder { color: #716b80; font-weight: 500; letter-spacing: 0; }
.fbv-input:focus { outline: none; border-color: #8a3cff; box-shadow: 0 0 0 5px rgba(138, 60, 255, .2), 0 14px 30px rgba(56, 40, 115, .12); }
.fbv-input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.fbv-btn { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 150px; padding: 0 28px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #382873, #5a3fb0); color: #fff; font: 700 1rem Inter, system-ui, sans-serif; letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 24px rgba(56, 40, 115, .28); transition: transform .18s, filter .18s; }
.fbv-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.fbv-btn:focus-visible { outline: 2px solid #8a3cff; outline-offset: 3px; }
.fbv-btn:disabled { opacity: .75; cursor: progress; transform: none; }
.fbv-btn svg { flex: none; }
.fbv-hint { margin: 0; color: #716b80; font-size: .875rem; }
body[data-page="friendbot"] .fbv-search .fb-msg { margin: 0; }

/* Resultado: «Opción A», nombre encontrado, pedido recibido y una tarjeta por cuenta. */
.fbv-res { display: grid; gap: 14px; padding: 22px 24px; border-radius: 16px; background: rgba(46, 187, 121, .08); border: 1px solid rgba(46, 187, 121, .38); }
.fbv-ol { justify-self: start; margin: 0; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; font-size: 2.1rem; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; color: #fff; filter: url(#fb-ol-ink); padding-right: .1em; }
.fbv-ol-sm { flex: none; font-size: 1.45rem; }
.fbv-found { display: flex; gap: 10px; align-items: center; margin: 0; font-weight: 700; color: #211c3a; }
.fbv-found svg { flex: none; color: #1c8a57; }
.fbv-found b { font-family: "Days One", sans-serif; font-weight: 400; }
.fbv-ok { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid rgba(46, 187, 121, .45); }
.fbv-ok > svg { flex: none; margin-top: 1px; color: #1c8a57; stroke-width: 2.4; }
.fbv-ok b { display: block; color: #211c3a; }
.fbv-ok p { margin: 2px 0 0; color: #4d4761; font-size: .9rem; }
.fbv-fail { display: grid; justify-items: start; gap: 10px; padding: 14px 18px; border-radius: 12px; background: rgba(220, 38, 38, .05); border: 1px solid rgba(220, 38, 38, .3); }
.fbv-fail p { margin: 0; color: #b42318; font-size: .9rem; font-weight: 700; }
.fbv-retry { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1.5px solid #382873; border-radius: 999px; background: #fff; color: #382873; font: 800 .9rem Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.fbv-retry:hover:not(:disabled) { background: #382873; color: #fff; }
.fbv-retry:disabled { opacity: .6; cursor: progress; }
.fbv-lead { margin: 0; color: #1c6b46; font-size: .92rem; font-weight: 700; }
.fbv-note { margin: 0; color: #4d4761; font-size: .92rem; font-weight: 600; }
.fbv-end { margin: 0; font-size: .95rem; font-weight: 800; }
.fbv-end.is-ok { color: #1c6b46; }
.fbv-end.is-wait { color: #9a5b00; }
.fbv-res .fb-friends .is-sent { border-color: rgba(56, 40, 115, .18); }
.fbv-res .fb-friends .is-sent .ff-ico { background: #382873; color: #fff; }
.fbv-res .fb-friends .is-sent small { color: #382873; }
.fbv-res .fb-send { margin: 0; }
@media (min-width: 681px) { .fbv-res .fb-friends { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Opción B plegada: «Prefiero enviar yo la solicitud (No recuerdo mi nombre de Epic ahora mismo)». */
.fbv-alt-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 24px; border: 1px solid rgba(29, 25, 58, .12); border-radius: 16px; background: rgba(255, 255, 255, .56); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, background-color .18s; }
.fbv-alt-row:hover { border-color: rgba(29, 25, 58, .26); background: rgba(255, 255, 255, .84); }
.fbv-alt-row:focus-visible { outline: 2px solid #8a3cff; outline-offset: 3px; }
.fbv-alt-title { min-width: 0; font-family: "Days One", sans-serif; font-weight: 400; font-size: .98rem; letter-spacing: .01em; line-height: 1.3; text-transform: uppercase; color: #211c3a; }
.fbv-alt-title small { margin-left: 6px; font-size: .68rem; letter-spacing: .02em; color: #716b80; }
.fbv-chev { flex: none; margin-left: auto; color: #716b80; transition: transform .2s; }
.fbv-alt-row[aria-expanded="true"] .fbv-chev { transform: rotate(180deg); }
.fbv-alt-body { display: grid; gap: 12px; padding-top: 16px; }
.fbv-alt-body[hidden] { display: none; }
.fbv-alt-lead { margin: 0; color: #716b80; font-size: .875rem; }
body[data-page="friendbot"] .fbv-alt .fb-bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
body[data-page="friendbot"] .fbv-alt .fb-bot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; padding: 12px 14px; border: 1px solid rgba(29, 25, 58, .12); border-radius: 14px; background: #fff; box-shadow: none; }
body[data-page="friendbot"] .fbv-alt .fb-bot:first-child { border-top: 1px solid rgba(29, 25, 58, .12); }
body[data-page="friendbot"] .fbv-alt .fb-bot:hover { transform: none; border-color: rgba(29, 25, 58, .26); background: #fff; box-shadow: none; }
body[data-page="friendbot"] .fbv-alt .fb-bot-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
body[data-page="friendbot"] .fbv-alt .fb-avatar { width: 36px; height: 36px; border-radius: 50%; background: #f1ecfb; color: #382873; }
body[data-page="friendbot"] .fbv-alt .fb-avatar svg { width: 18px; height: 18px; }
body[data-page="friendbot"] .fbv-alt .fb-bot-name { font-family: "Days One", sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: 0; }
body[data-page="friendbot"] .fbv-alt .fb-copy { display: inline-flex; flex: none; align-items: center; gap: 6px; width: auto; min-width: 0; height: 36px; min-height: 36px; padding: 0 14px; border: 1.5px solid rgba(56, 40, 115, .4); border-radius: 999px; background: #fff; color: #382873; font: 700 .82rem Inter, system-ui, sans-serif; }
body[data-page="friendbot"] .fbv-alt .fb-copy:hover { background: #382873; border-color: #382873; color: #fff; }
body[data-page="friendbot"] .fbv-alt .fb-copy.is-copied { background: #382873; border-color: #382873; color: #fff; }
body[data-page="friendbot"] .fbv-alt .fb-copy-message { margin: 0; }

@media (max-width: 680px) {
  .fbv-input { height: 62px; padding-right: 20px; font-size: 1.05rem; }
  .fbv-pill-ico { top: 20px; }
  .fbv-btn { position: static; width: 100%; height: 54px; margin-top: 12px; }
  .fbv-res { padding: 18px 16px; }
  .fbv-ol { font-size: 1.7rem; }
  .fbv-alt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 16px 18px; }
  .fbv-alt-row .fbv-ol-sm { grid-column: 1; grid-row: 1; justify-self: start; }
  .fbv-alt-row .fbv-chev { grid-column: 2; grid-row: 1; }
  .fbv-alt-title { grid-column: 1 / -1; grid-row: 2; }
  .fbv-alt-title small { display: block; margin: 4px 0 0; }
  body[data-page="friendbot"] .fbv-alt .fb-bots { grid-template-columns: minmax(0, 1fr); }
}

/* WhatsApp flotante: chat personal y grupo. */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: grid; justify-items: end; gap: 10px; }
.wa-btn { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #25d366; color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(20, 28, 68, .28); transition: transform .18s; }
.wa-btn:hover { transform: translateY(-2px); }
.wa-btn:focus-visible, .wa-menu a:focus-visible { outline: 2px solid #8a3cff; outline-offset: 3px; }
.wa-menu { display: grid; gap: 8px; width: 240px; box-sizing: border-box; padding: 12px; border-radius: 16px; background: #141c44; box-shadow: 0 0 0 3px #8a3cff, 0 0 22px rgba(138, 60, 255, .5); }
.wa-menu[hidden] { display: none; }
.wa-menu b { color: #fff; font-family: "Montserrat Display", sans-serif; font-style: italic; font-weight: 900; font-size: 1rem; text-transform: uppercase; }
.wa-menu b i { color: #b98cff; }
.wa-menu a { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 .92rem Inter, system-ui, sans-serif; text-decoration: none; white-space: nowrap; transition: background-color .18s; }
.wa-menu a:hover { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 640px) { .wa-float { right: 14px; bottom: 14px; } .wa-btn { width: 52px; height: 52px; } }


/* Cuenta (Arnold, 2026-11-01): fondo lila (maqueta 17), campos con línea (12), botón cómic (9) y aro neón cortado (13). */
body:has(.account-card) { background-color: #f6f1ff; }
body:has(.account-card) #main { position: relative; overflow: hidden; }
.acc-art { position: absolute; left: calc(50% + 70px); top: 180px; width: 340px; height: 340px; pointer-events: none; }
.acc-art i, .acc-art b { position: absolute; box-sizing: border-box; border-radius: 50%; }
.acc-art i { inset: 0; border: 3px solid #8a3cff; background: radial-gradient(circle at 50% 42%, #e4d6ff, #c6aefc 70%, #a98cf0); box-shadow: 0 0 22px rgba(138, 60, 255, .6); }
.acc-art i + i { inset: -22px; border: 2px solid #36b6ff; background: none; box-shadow: none; opacity: .7; animation: acc-spin 7s linear infinite; }
.acc-art b { left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -5px; background: #36b6ff; box-shadow: 0 0 10px #36b6ff; }
.acc-art > b { top: -7px; background: #ff3cac; box-shadow: 0 0 10px #ff3cac; }
.acc-art img { position: absolute; left: -77px; top: -66px; width: 494px; max-width: none; height: 494px; filter: drop-shadow(0 14px 20px rgba(20, 28, 68, .3)); -webkit-mask: linear-gradient(#000, #000) top / 100% 236px no-repeat, radial-gradient(circle at 247px 236px, #000 166px, transparent 167px); mask: linear-gradient(#000, #000) top / 100% 236px no-repeat, radial-gradient(circle at 247px 236px, #000 166px, transparent 167px); }
@keyframes acc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .acc-art i + i { animation: none; } }
@media (max-width: 1000px) { .acc-art { display: none; } }
body:has(.account-card) .page-head.compact { padding-bottom: 14px; border-bottom: 0; background: none; }
body:has(.account-card) .page-head.compact .page-lead { margin-bottom: 0; }
body:has(.account-card) #main > .section { position: relative; padding-top: 0; }
body:has(.account-card) .account.narrow { width: min(1220px, 100% - 2 * var(--gutter)); }
.card.account-card { box-sizing: border-box; max-width: 480px; padding: 0; border: 0; box-shadow: none; background: none; }
.card.account-card:hover { box-shadow: none; transform: none; }
.account-card .input { width: 100%; max-width: none; height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid #b98cff; border-radius: 0; background: none; box-shadow: none; }
.card.account-card .input:focus, .card.account-card .input:focus-visible { border-radius: 0; border-color: transparent; border-bottom-color: #8a3cff; box-shadow: none !important; outline: 0 !important; }
.card.account-card .input { height: 50px; color: #382873; font-family: "Days One", sans-serif; font-size: 1.3rem; letter-spacing: .02em; }
.account-card .btn-primary { min-height: 50px; margin-top: 10px; background: #d4bcff; color: #141c44; border: 2px solid #0b1030; border-radius: 4px; box-shadow: 4px 4px 0 #0b1030; font-family: "Bangers", "Russo One", sans-serif; font-size: 1.35rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.account-card .btn-primary:hover { background: #c6a8ff; color: #141c44; transform: translate(1px, 1px); box-shadow: 3px 3px 0 #0b1030; }
.acc-links { display: flex; justify-content: space-between; gap: 12px; }

/* Idioma English: la página queda oculta hasta que app.js la traduce (respaldo de 3 s en la cabecera de cada página). */
html.vs-en-wait body { visibility: hidden; }

/* Registro con invitación: franja que dice quién invitó. */
.ref-note { display: inline-block; max-width: 640px; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #b98cff; background: linear-gradient(135deg, #f3ebff, #ffffff); color: #2a1a52; font-size: 1.02rem; line-height: 1.45; }
.ref-note b { font-family: 'Montserrat Display', 'Montserrat', sans-serif; font-style: italic; font-weight: 900; color: #6a1ba0; }
.ref-note a { color: #3a2a7a; font-weight: 700; }

.ref-skip { margin-left: 6px; font-size: .86rem; font-weight: 600; color: #6b5c8a; text-decoration: underline; white-space: nowrap; }
.ref-link { background: none; border: 0; padding: 4px 0; color: #3a2a7a; font-weight: 700; text-decoration: underline; cursor: pointer; font: inherit; }
.ref-cart { margin-top: 8px; }
.ref-cart-form { display: flex; gap: 8px; margin-top: 8px; }
.ref-cart-form .input { flex: 1; min-width: 0; }