/* BEAST TCG · tienda. Base: el diseño de Stitch, llevado a la estética de TAG (taggrading.com/pages/submit): títulos en
   mayúsculas espaciadas (Montserrat, la letra del manual de BEAST), texto Figtree gris, líneas finas y paneles de cristal
   con la paleta de BEAST (marino casi negro y dorado #c59e4e / #ebc16d). Al final del archivo está la capa «TAG + cristal». */
:root {
  color-scheme: dark;
  --lowest: #06080d; --fondo: #0a0d14; --low: #12151d; --cont: #171b24; --high: #1f2430; --highest: #2a303c; --bright: #343a47;
  --on: #eef1f7; --var: #a9afbd; --sec: #9aa1af; --outline: #6b7280;
  --primary: #ebc16d; --pfixed: #ffdea3; --pcont: #c59e4e; --on-pcont: #3a2900; --on-primary: #402d00;
  --tert: #7bd0ff; --error: #ffb4ab; --esmeralda: #34d399;
  --grad-oro: linear-gradient(90deg, #ebc16d, #ffdea3 50%, #c59e4e);
  --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .35);
  --sombra-2xl: 0 25px 50px -12px rgba(0, 0, 0, .6);
  --display: "Montserrat", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --cuerpo: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--lowest); color: var(--on); font: 400 15px/24px var(--cuerpo); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
::selection { background: var(--pcont); color: var(--on-pcont); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 14px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.icono { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; flex: none; }
.contenedor { max-width: 1440px; margin-inline: auto; padding-inline: 16px; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 8px; z-index: 60; background: var(--cont); padding: 8px 12px; border-radius: 14px; }

/* Escala tipográfica de Stitch */
.label-caps { font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; }
.mono { font: 500 12px/16px var(--mono); letter-spacing: .08em; }
.oro { color: var(--primary); }
.sec { color: var(--sec); }
.var { color: var(--var); }
.cian { color: var(--tert); }

/* Encabezado fijo (como Stitch) */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(10, 14, 23, .75); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .45); padding-top: env(safe-area-inset-top, 0px); }
.nav .contenedor { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-izq { display: flex; align-items: center; gap: 16px; min-width: 0; }
.marca { display: flex; align-items: center; gap: 8px; flex: none; }
/* El logo también es la entrada oculta de los socios (dejarlo presionado): sin menú de enlace, sin seleccionar texto. */
.marca { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.marca img { -webkit-user-drag: none; }
.marca-iso { width: 28px; height: 32px; object-fit: contain; flex: none; transition: transform .3s; }
.marca:hover .marca-iso { transform: scale(1.05); }
.marca-txt { display: flex; flex-direction: column; }
.marca-txt b { font: 700 18px/1.15 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--on); white-space: nowrap; }
.marca-txt small { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--primary); white-space: nowrap; }
.insignia { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(38, 42, 52, .6); color: var(--sec); }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; }
.pulso { animation: pulso 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.ping { position: relative; }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes pulso { 50% { opacity: .5; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.menu { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 20px; background: rgba(24, 27, 37, .8); }
.menu a { padding: 8px 14px; border-radius: 14px; color: var(--var); transition: background-color .2s, color .2s; }
.menu a:hover { background: var(--high); color: var(--on); }
.menu a[aria-current="page"] { background: var(--pcont); color: var(--on-pcont); box-shadow: 0 0 16px rgba(197, 158, 78, .25); }
.nav-der { display: flex; align-items: center; gap: 12px; flex: none; }
.redondo { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--low); color: var(--primary);
  box-shadow: 0 0 12px rgba(197, 158, 78, .1); transition: background-color .2s; }
.redondo:hover { background: var(--high); }
.redondo svg { width: 19px; height: 19px; fill: currentColor; }
.nav-wa-txt { display: flex; flex-direction: column; }
.nav-wa-txt span:first-child { color: var(--on); }
.nav-wa-txt span:last-child { font: 500 10px/1 var(--mono); color: var(--tert); }
main { padding-top: 80px; }
.menu-btn { display: none; border: 0; cursor: pointer; color: var(--on); }
.menu-movil { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 8px; padding: 12px 16px 20px; background: #0a0e17;
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 20px 30px rgba(0, 0, 0, .5); }
.menu-movil a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--low); color: var(--on);
  font: 600 12px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; }
.menu-movil a .icono { color: var(--primary); }
.menu-movil a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--primary); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; white-space: nowrap; font: 600 11px/16px var(--cuerpo);
  letter-spacing: .1em; text-transform: uppercase; transition: box-shadow .2s, background-color .2s, transform .15s; }
.btn:active { transform: scale(.98); }
.btn .icono { font-size: 18px; }
.btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btn-oro { padding: 14px 32px; border-radius: 999px; background: var(--pcont); color: var(--on-pcont); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3); }
.btn-oro:hover { box-shadow: 0 0 24px rgba(197, 158, 78, .35); }
.btn-vidrio { padding: 14px 28px; border-radius: 999px; background: rgba(38, 42, 52, .6); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--on); }
.btn-vidrio:hover { background: var(--highest); }
.btn-vidrio .icono { color: var(--primary); }
.btn-tarjeta { width: 100%; padding: 8px; border-radius: 14px; background: var(--high); color: var(--on); }
.btn-tarjeta:hover { background: var(--highest); }
.btn-tarjeta.dorado { background: var(--pcont); color: var(--on-pcont); }
.btn-tarjeta.dorado:hover { box-shadow: 0 0 12px rgba(197, 158, 78, .3); }
.btn-tarjeta .icono { font-size: 14px; }

/* Héroe */
.luz { position: relative; overflow: hidden; }
.luz > section { position: relative; z-index: 1; }
.luz::before { content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 900px; height: 450px; max-width: 160%; border-radius: 50%;
  background: rgba(235, 193, 109, .1); filter: blur(140px); opacity: .7; pointer-events: none; }
.luz::after { content: ""; position: absolute; top: 33%; left: 25%; width: 500px; height: 300px; border-radius: 50%; background: rgba(123, 208, 255, .05); filter: blur(120px); pointer-events: none; }
.heroe { position: relative; padding-block: 56px 40px; }
.heroe-centro { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 896px; margin-inline: auto; }
.insignia-heroe { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(38, 42, 52, .7); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); margin-bottom: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); flex-wrap: wrap; justify-content: center; }
.insignia-heroe b { font: 600 12px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.insignia-heroe .sep { color: var(--sec); opacity: .4; }
.insignia-heroe span:last-child { font: 500 12px/16px var(--mono); letter-spacing: .08em; color: var(--var); text-transform: uppercase; }
.heroe h1 { font: 700 56px/64px var(--display); letter-spacing: -.03em; text-transform: uppercase; color: var(--on); }
.heroe h1 .grad { display: block; font-size: .62em; line-height: 1.3; letter-spacing: -.01em; margin-top: 10px; }
.heroe .ctas { margin-top: 28px; }
.grad { background: var(--grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe h1 .grad, .heroe-split h1 .grad { background: var(--grad-heroe); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; animation: brillo 7s linear infinite; }
.heroe-centro > p { margin-top: 24px; font-size: 18px; line-height: 28px; letter-spacing: -.01em; color: var(--sec); max-width: 672px; }
.ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }

/* Escenario de destacados */
.escenario { position: relative; margin-top: 56px; border-radius: 26px; padding: 48px; overflow: hidden; box-shadow: var(--sombra-2xl);
  background: linear-gradient(180deg, rgba(38, 42, 52, .4), rgba(24, 27, 37, .7), rgba(10, 14, 23, .9)); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.escenario::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(235, 193, 109, .1), transparent 60%); pointer-events: none; }
.escenario-ref { position: absolute; top: 16px; right: 24px; display: flex; align-items: center; gap: 8px; color: var(--var); }
.escenario-ref .icono { font-size: 16px; color: var(--primary); }
.escenario-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
.escenario.solo .escenario-grid { grid-template-columns: 1fr; justify-items: center; }
.pieza { position: relative; width: 100%; max-width: 448px; justify-self: center; }
.pieza.alta { max-width: 384px; }
.pieza .halo { position: absolute; inset: -8px; border-radius: 26px; background: linear-gradient(45deg, rgba(235, 193, 109, .2), transparent, rgba(123, 208, 255, .15)); filter: blur(24px); opacity: .6; transition: opacity .3s; }
.pieza:hover .halo { opacity: 1; }
.pieza-caja { position: relative; border-radius: 26px; padding: 16px; background: rgba(24, 27, 37, .9); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--sombra-2xl); }
.barra-grabada { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 12px; }
.barra-grabada .mono { color: var(--primary); letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }
.barra-grabada .mono .punto { width: 8px; height: 8px; }
.barra-grabada small { font: 500 10px/1 var(--mono); color: var(--sec); }
.ventana { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--lowest); display: grid; place-items: center; }
.pieza.alta .ventana { aspect-ratio: 3 / 4; }
.ventana img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .7s; }
.pieza:hover .ventana img { transform: scale(1.05); }
.ventana::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 14, 23, .8), transparent 45%); pointer-events: none; }
.chip-flotante { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(38, 42, 52, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 11px/16px var(--mono); color: var(--on); }
.chip-flotante.abajo { bottom: 12px; left: 12px; }
.chip-flotante .icono { font-size: 14px; color: var(--primary); }
.etiqueta-esquina { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 2px 8px; border-radius: 8px; background: rgba(10, 14, 23, .8); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); color: var(--primary); font: 500 10px/16px var(--mono); }
.barra-custodia { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px;
  border-radius: 14px; background: rgba(38, 42, 52, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 11px/16px var(--mono); }
.barra-custodia .cian { display: flex; align-items: center; gap: 6px; }
.barra-custodia .cian i { width: 8px; height: 8px; border-radius: 50%; background: var(--tert); }
.barra-custodia b { color: var(--primary); }
.etiqueta-grado { border-radius: 14px; padding: 10px; margin-bottom: 12px; background: rgba(38, 42, 52, .9); }
.etiqueta-grado .fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.etiqueta-grado .fuente { font: 700 10px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--error); }
.etiqueta-grado .nombre { font: 700 15px/1.25 var(--display); color: var(--on); margin-top: 2px; }
.etiqueta-grado .detalle { font: 500 11px/16px var(--mono); color: var(--sec); }
.etiqueta-grado .grado { text-align: right; padding-left: 8px; }
.etiqueta-grado .grado small { display: block; font: 500 9px/1 var(--mono); color: var(--sec); }
.etiqueta-grado .grado b { display: block; font: 700 24px/1 var(--display); color: var(--primary); margin-top: 4px; }
.pie-pieza { padding: 12px 8px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pie-pieza h3 { font: 600 18px/26px var(--display); color: var(--on); }
.pie-pieza p { font: 500 11px/16px var(--mono); letter-spacing: .04em; color: var(--sec); }
.precio-bloque { text-align: right; flex: none; }
.precio-bloque small { display: block; font: 600 10px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--var); }
.precio-bloque b { font: 600 20px/24px var(--mono); letter-spacing: -.02em; color: var(--primary); white-space: nowrap; }
.escenario .emblema { width: min(280px, 60%); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }

/* Banda de métricas */
/* Inicio: acceso a cada sección con su dato real */
.secciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.seccion-tile { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px; border-radius: 26px; background: rgba(24, 27, 37, .9);
  box-shadow: var(--sombra-xl); transition: background-color .2s, transform .2s; }
.seccion-tile:hover { background: var(--cont); transform: translateY(-2px); }
.tile-txt { flex: 1; min-width: 0; }
.tile-txt b { display: block; font: 600 18px/26px var(--display); color: var(--on); }
.tile-txt small { display: block; margin-top: 2px; font: 500 12px/16px var(--mono); letter-spacing: .04em; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seccion-tile .flecha { color: var(--primary); transition: transform .2s; }
.seccion-tile:hover .flecha { transform: translateX(3px); }
.secciones + .escenario { margin-top: 40px; }

.metricas { background: rgba(24, 27, 37, .6); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding-block: 32px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.metricas ul { list-style: none; margin: 0 auto; padding-block: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
.metricas b a { color: inherit; text-decoration: underline; text-decoration-color: rgba(235, 193, 109, .4); text-underline-offset: 4px; }
.metricas li { display: flex; align-items: center; gap: 16px; padding-inline: 24px; border-left: 1px solid rgba(49, 53, 63, .6); }
.metricas li:first-child, .metricas li[hidden]:first-child + li { border-left: 0; padding-left: 0; }
.cuadro-icono { width: 48px; height: 48px; border-radius: 26px; background: var(--high); display: grid; place-items: center; flex: none; color: var(--primary); }
.cuadro-icono.cian { color: var(--tert); }
.cuadro-icono .icono { font-size: 26px; }
.metricas b { display: block; font: 700 20px/24px var(--mono); letter-spacing: -.02em; color: var(--on); }
.metricas b.oro { color: var(--primary); }
.metricas small { display: block; margin-top: 2px; font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }

/* Secciones */
.seccion { padding-block: 80px; scroll-margin-top: 80px; }
.seccion-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.ceja { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 12px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.ceja .icono { font-size: 16px; }
.seccion-cabeza h2, .titulo-seccion { font: 600 40px/48px var(--display); letter-spacing: -.02em; color: var(--on); }
.seccion-cabeza > p { color: var(--sec); max-width: 448px; }

/* Filtros */
.filtros { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 16px; margin-bottom: 24px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.pildora { padding: 10px 20px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; background: rgba(38, 42, 52, .7); color: var(--sec);
  font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s, color .2s; }
.pildora:hover { background: var(--highest); color: var(--on); }
.pildora[aria-pressed="true"] { background: var(--pcont); color: var(--on-pcont); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .3); }
.buscar { position: relative; flex: 0 0 280px; margin-left: auto; }
.buscar .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sec); }
.buscar input { width: 100%; padding: 10px 14px 10px 40px; border: 0; border-radius: 14px; background: var(--low); color: var(--on); font: 400 13px/20px var(--cuerpo);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.buscar input::placeholder { color: var(--outline); }
.buscar input:focus { outline: 2px solid rgba(235, 193, 109, .5); }

/* Tarjetas del catálogo (catalog-card de Stitch) */
.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tarjeta { border-radius: 26px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; background: rgba(24, 27, 37, .9);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--sombra-xl); transition: transform .3s, box-shadow .3s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2xl), 0 0 0 1px rgba(235, 193, 109, .08); }
.tarjeta-sup { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; }
.serie { font: 600 10px/16px var(--mono); letter-spacing: .08em; color: var(--primary); padding: 2px 8px; border-radius: 8px; background: var(--high); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.serie.roja { color: var(--error); }
.serie.azul { color: var(--tert); }
.verificado { display: flex; align-items: center; gap: 4px; color: var(--tert); font: 500 10px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.verificado .icono { font-size: 15px; }
.verificado.ambar { color: var(--primary); }
.verificado.verde { color: var(--esmeralda); }
.tarjeta .ventana { aspect-ratio: 1; margin-bottom: 16px; }
.tarjeta .ventana::after { display: none; }
.tarjeta .ventana img { transition: transform .5s; }
.tarjeta:hover .ventana img { transform: scale(1.05); }
.tarjeta .ventana .sin-foto { width: 42%; height: auto; opacity: .2; padding: 0; }
.esquina-sup { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 8px; border-radius: 8px; background: rgba(10, 14, 23, .8); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); color: var(--primary); font: 700 10px/16px var(--mono); }
.tarjeta h3 { font: 600 17px/1.35 var(--display); color: var(--on); overflow-wrap: anywhere; }
.tarjeta .desc { font-size: 12px; line-height: 18px; color: var(--sec); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-pie { margin-top: 24px; padding-top: 12px; }
.precio-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.precio-fila small { font: 600 10px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--var); }
.precio-fila b { font: 700 20px/24px var(--mono); letter-spacing: -.02em; color: var(--primary); white-space: nowrap; }
.precio-fila b span { font-size: 12px; color: var(--sec); font-weight: 500; }
.dos-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vacio { grid-column: 1 / -1; text-align: center; color: var(--sec); padding: 40px 16px; border-radius: 26px; background: rgba(24, 27, 37, .6); }

/* Sección grande con panel (Stitch: «Vault protocol») */
.bloque { border-radius: 32px; padding: 56px; background: rgba(24, 27, 37, .7); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: var(--sombra-2xl);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.bloque-txt { display: flex; flex-direction: column; gap: 24px; }
.bloque-txt .ceja { margin: 0; }
.bloque h2 { font: 700 40px/48px var(--display); letter-spacing: -.02em; color: var(--on); }
.bloque p { font-size: 18px; line-height: 28px; color: var(--sec); }
.cajitas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 8px; }
.cajita { padding: 16px; border-radius: 20px; background: rgba(38, 42, 52, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cajita b { display: block; font: 700 20px/24px var(--mono); letter-spacing: -.02em; color: var(--on); }
.cajita b.oro { color: var(--primary); }
.cajita b.cian { color: var(--tert); }
.cajita small { display: block; margin-top: 4px; font: 600 10px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.panel-feed { width: 100%; max-width: 384px; justify-self: center; border-radius: 26px; padding: 24px; background: rgba(10, 14, 23, .9); box-shadow: var(--sombra-2xl); }
.panel-feed-cab { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; font: 500 11px/16px var(--mono); color: var(--primary); letter-spacing: .06em; text-transform: uppercase; }
.vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--esmeralda); }
.filas-feed { display: grid; gap: 12px; font: 500 11px/16px var(--mono); }
.fila-feed { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--low); }
.fila-feed span:first-child { color: var(--sec); }
.fila-feed span:last-child { color: var(--on); font-weight: 600; text-align: right; }
.fila-feed .oro { color: var(--primary) !important; }
.fila-feed .cian { color: var(--tert) !important; }
.panel-feed-pie { margin-top: 16px; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 10px/16px var(--mono); color: var(--sec); text-transform: uppercase; }
.panel-feed-pie a { color: var(--primary); }

/* Pie (como Stitch) */
.pie { position: relative; overflow: hidden; background: var(--lowest); color: var(--var); padding-block: 40px calc(24px + env(safe-area-inset-bottom, 0px)); }
.pie::before { content: ""; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ebc16d' stroke-width='3'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Cpath d='M4 50h31M65 50h31'/%3E%3Ccircle cx='50' cy='50' r='15'/%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .06; pointer-events: none; animation: girar 60s linear infinite; }
.pie .contenedor { position: relative; }
.pie-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.pie-marca-col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pie-marca { display: inline-flex; align-items: center; gap: 12px; }
.pie-marca img { width: 28px; height: 32px; object-fit: contain; }
.pie-marca b { display: block; font: 600 18px/22px var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--on); }
.pie-marca small { display: block; font: 500 12px/16px var(--mono); letter-spacing: .06em; color: var(--sec); }
.pie-redes { display: flex; gap: 8px; }
.pie-redes a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--low); color: var(--on); transition: background-color .2s, color .2s, transform .2s; }
.pie-redes a:hover { background: var(--pcont); color: var(--on-pcont); transform: translateY(-3px) rotate(-6deg); }
.pie-redes svg { width: 18px; height: 18px; fill: currentColor; }
.pie-tit { display: block; margin-bottom: 14px; font: 600 11px/16px var(--cuerpo); letter-spacing: .15em; text-transform: uppercase; color: var(--primary); }
.pie-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pie-lista li, .pie-lista a { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pie-lista b { display: block; font: 600 11px/16px var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--on); }
.pie-lista small { display: block; font: 500 12px/16px var(--mono); color: var(--sec); }
.pie-lista a:hover b, .pie-lista a:hover small { color: var(--primary); }
.pie-lista .icono { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--low); font-size: 17px; color: var(--primary); }
.wa-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(37, 211, 102, .14); color: #25d366; }
.wa-ic svg { width: 17px; height: 17px; fill: currentColor; }
.pie-abajo { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px;
  border-top: 1px solid rgba(49, 53, 63, .6); font: 500 11px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sec); }
.pie-abajo a:hover { color: var(--primary); }
@media (max-width: 900px) {
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pie-marca-col { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}
@media (max-width: 600px) { .pie-grid { grid-template-columns: 1fr; } }

/* Gradeo: héroe dividido, cotizador por pasos y resumen (Stitch «Proxy») */
.heroe-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding-block: 64px; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pildora-mono { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(38, 42, 52, .7); font: 600 12px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.pildora-mono.gris { color: var(--sec); font-weight: 500; }
.heroe-split h1 { font: 700 56px/64px var(--display); letter-spacing: -.03em; color: var(--on); }
.heroe-split h1 .oro { color: var(--primary); }
.heroe-split > div > p { margin-top: 24px; font-size: 18px; line-height: 28px; color: var(--sec); max-width: 640px; }
.heroe-split .ctas { justify-content: flex-start; }
.monitor { border-radius: 26px; padding: 24px; background: rgba(24, 27, 37, .9); box-shadow: var(--sombra-2xl); }
.monitor-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; }
.monitor-cab .label-caps { color: var(--sec); }
.monitor-cab .estado-vivo { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tert); }
.monitor-cab .estado-vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--tert); }
.monitor-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 16px; border-radius: 20px; background: var(--cont); }
.tile small { display: block; font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.tile b { display: block; margin-top: 8px; font: 700 20px/24px var(--mono); letter-spacing: -.02em; color: var(--primary); }
.tile b.blanco { color: var(--on); }
.tile span { display: block; margin-top: 8px; font: 500 11px/16px var(--mono); color: var(--tert); }
.monitor-pie { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; font: 500 12px/16px var(--mono); color: var(--sec); }
.monitor-pie .icono { font-size: 16px; color: var(--primary); }
.monitor-pie span { display: flex; align-items: center; gap: 6px; }
.config { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.paso-caja { border-radius: 26px; padding: 32px; background: var(--low); box-shadow: var(--sombra-xl); margin-bottom: 24px; }
.paso-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.paso-cab h3 { display: flex; align-items: center; gap: 12px; font: 500 18px/26px var(--display); color: var(--on); }
.num-oro { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pcont); color: var(--on-pcont); font: 600 12px/1 var(--mono); flex: none; }
.paso-cab .mono { color: var(--sec); text-transform: uppercase; }
.opciones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.opcion { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; background: var(--cont); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background-color .2s; }
.opcion:hover { background: var(--high); }
.opcion:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primary); background: rgba(235, 193, 109, .06); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion small.top { font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.opcion b { font: 500 18px/26px var(--display); color: var(--on); }
.opcion .grande { font: 700 20px/24px var(--mono); color: var(--primary); }
.opcion p { font-size: 13px; line-height: 20px; color: var(--sec); }
.opcion .pie-opcion { margin-top: 8px; font: 500 12px/16px var(--mono); color: var(--var); white-space: pre-line; }
.campos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo > span { font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.campo input, .campo select, .campo textarea { width: 100%; min-width: 0; border: 0; border-radius: 14px; background: var(--cont); color: var(--on); padding: 12px 14px; font: 400 15px/24px var(--cuerpo); }
.campo textarea { resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 20px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid rgba(235, 193, 109, .5); }
.contador { display: flex; align-items: center; gap: 8px; }
.contador button { width: 40px; height: 40px; border-radius: 14px; border: 0; background: var(--high); color: var(--on); font: 600 18px/1 var(--mono); cursor: pointer; }
.contador input { text-align: center; font: 700 20px/24px var(--mono) !important; color: var(--primary) !important; }
.resumen { position: sticky; top: 104px; border-radius: 26px; padding: 32px; background: var(--high); box-shadow: var(--sombra-2xl); }
.resumen-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.resumen-cab small { display: block; font: 600 11px/16px var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.resumen-cab h3 { font: 500 24px/32px var(--display); color: var(--on); margin-top: 4px; }
.resumen-cab .chip-tiempo { padding: 4px 8px; border-radius: 8px; background: rgba(235, 193, 109, .18); color: var(--primary); font: 500 11px/16px var(--mono); text-transform: uppercase; }
.resumen-filas { display: grid; gap: 14px; font: 500 13px/20px var(--mono); }
.resumen-filas div { display: flex; justify-content: space-between; gap: 12px; }
.resumen-filas span:first-child { color: var(--sec); }
.resumen-filas span:last-child { color: var(--on); text-align: right; }
.resumen-total { margin-top: 24px; padding: 16px; border-radius: 20px; background: var(--lowest); font: 500 11px/16px var(--mono); color: var(--sec); }
.resumen .btn-oro { width: 100%; margin-top: 20px; padding-block: 18px; font-size: 13px; border-radius: 20px; }
.mini-cajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.mini-caja { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 20px; background: var(--cont); text-align: center;
  font: 600 10px/14px var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--sec); }
.mini-caja .icono { color: var(--primary); }
.mini-caja .icono.cian { color: var(--tert); }
.aviso-form { color: var(--error); font-size: 13px; margin-top: 12px; }

/* Pasos simples y preguntas */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: paso; }
.pasos li { counter-increment: paso; border-radius: 26px; padding: 24px; background: var(--low); box-shadow: var(--sombra-xl); display: flex; flex-direction: column; gap: 10px; }
.pasos li::before { content: counter(paso, decimal-leading-zero); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pcont); color: var(--on-pcont); font: 600 12px/1 var(--mono); }
.pasos b { font: 500 18px/26px var(--display); color: var(--on); }
.pasos span { font-size: 13px; line-height: 20px; color: var(--sec); }
.preguntas { border-radius: 26px; background: var(--low); box-shadow: var(--sombra-xl); padding: 8px 24px; max-width: 896px; }
.preguntas details { padding: 18px 0; box-shadow: 0 1px 0 rgba(49, 53, 63, .6); }
.preguntas details:last-child { box-shadow: none; }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; font: 500 16px/24px var(--display); color: var(--on); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font: 500 20px/1 var(--mono); color: var(--primary); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas p { margin-top: 10px; color: var(--sec); font-size: 14px; }

/* Cartas: búsqueda y decks */
.buscador-grande { display: flex; gap: 12px; max-width: 760px; margin: 32px auto 0; padding: 16px; border-radius: 20px; background: var(--low); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .3); }
.buscador-grande .buscar { flex: 1; margin: 0; }
.buscador-grande .buscar input { padding-block: 12px; background: var(--lowest); font-size: 15px; }
.buscador-grande .btn-oro { padding: 12px 24px; border-radius: 14px; }
.estado-busqueda { text-align: center; margin: 24px 0; color: var(--sec); font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cartas-rejilla .ventana { aspect-ratio: 5 / 7; }
.opcion-claim { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--cont); margin-bottom: 8px; }
.opcion-claim b { font: 700 16px/20px var(--mono); color: var(--primary); }
.opcion-claim small { display: block; font: 500 10px/14px var(--mono); color: var(--sec); text-transform: uppercase; }
.opcion-claim .btn-tarjeta { width: auto; padding: 8px 14px; }
.decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.deck { border-radius: 26px; padding: 20px; background: rgba(24, 27, 37, .9); box-shadow: var(--sombra-xl); display: flex; flex-direction: column; gap: 14px; }
.deck-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.deck h3 { font: 600 20px/26px var(--display); color: var(--on); }
.deck .mono { color: var(--sec); }
.barra-cobertura { height: 6px; border-radius: 999px; background: var(--high); overflow: hidden; }
.barra-cobertura i { display: block; height: 100%; background: linear-gradient(90deg, var(--pcont), var(--primary)); border-radius: inherit; }
.deck-lista { display: none; max-height: 260px; overflow: auto; font: 500 12px/18px var(--mono); color: var(--sec); padding: 10px 12px; border-radius: 14px; background: var(--lowest); }
.deck.abierto .deck-lista { display: block; }
.deck-lista div { display: flex; justify-content: space-between; gap: 8px; }
.deck-lista .tengo { color: var(--esmeralda); }
.resultado-deck { margin-top: 16px; border-radius: 20px; padding: 16px; background: var(--lowest); font: 500 12px/18px var(--mono); color: var(--sec); }
.resultado-deck b { color: var(--primary); }

@media (max-width: 1100px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insignia { display: none; }
}
@media (max-width: 900px) {
  .menu { display: none; }
  .menu-btn { display: grid; }
  .escenario { padding: 24px; }
  .escenario-grid, .bloque, .heroe-split, .config { grid-template-columns: 1fr; }
  .bloque { padding: 32px; }
  .seccion-cabeza { flex-direction: column; align-items: flex-start; }
  .resumen { position: static; }
  .metricas ul { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; }
  .metricas li { border-left: 0; padding: 12px 0; border-top: 1px solid rgba(49, 53, 63, .6); }
  .metricas li:first-child, .metricas li[hidden]:first-child + li { border-top: 0; }
}
@media (max-width: 600px) {
  .nav .contenedor { height: 68px; }
  .secciones { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .seccion-tile { padding: 14px 16px; }
  main { padding-top: 68px; }
  .marca-txt b { font-size: 16px; }
  .heroe { padding-block: 32px 56px; }
  .heroe h1, .heroe-split h1 { font-size: 36px; line-height: 44px; letter-spacing: -.02em; }
  .heroe-centro > p, .heroe-split > div > p, .bloque p { font-size: 15px; line-height: 24px; }
  .seccion-cabeza h2, .titulo-seccion, .bloque h2 { font-size: 28px; line-height: 36px; letter-spacing: -.01em; }
  .seccion { padding-block: 56px; }
  .rejilla { gap: 12px; }
  .tarjeta { padding: 10px; }
  .tarjeta h3 { font-size: 15px; }
  .tarjeta .desc { display: none; }
  .tarjeta-sup .verificado { display: none; }
  .precio-fila { flex-direction: column; gap: 2px; align-items: flex-start; }
  .precio-fila b { font-size: 17px; }
  .dos-botones { grid-template-columns: 1fr; }
  .cajitas, .campos-grid, .monitor-tiles, .mini-cajas { grid-template-columns: 1fr; }
  .decks, .pasos { grid-template-columns: 1fr; }
  .buscar { flex-basis: 100%; }
  .buscador-grande { flex-direction: column; }
  .paso-caja, .resumen { padding: 20px; }
  .bloque { padding: 24px; }
  .escenario-ref { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (min-width: 901px) { .menu-movil { display: none !important; } }

/* ---------- Animaciones y detalles Pokémon ---------- */
@keyframes brillo { to { background-position: 200% center; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes tambaleo { 0%, 62%, 100% { transform: rotate(0); } 10% { transform: rotate(-16deg); } 24% { transform: rotate(13deg); } 38% { transform: rotate(-8deg); } 52% { transform: rotate(4deg); } }
@keyframes clic { 0% { filter: none; } 45% { filter: drop-shadow(0 0 12px rgba(235, 193, 109, .95)) brightness(1.35); } 100% { filter: drop-shadow(0 0 6px rgba(235, 193, 109, .55)); } }
@keyframes salto { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } 55% { transform: translateY(0); } 75% { transform: translateY(-2px); } }


/* Pokébola: carga, vacío y «¡Atrapado!» */
.pokebola { --t: 40px; position: relative; flex: none; width: var(--t); height: var(--t); border-radius: 50%; transform-origin: 50% 85%;
  background: linear-gradient(180deg, var(--pcont) 0 45%, var(--lowest) 45% 55%, var(--highest) 55% 100%);
  box-shadow: inset 0 0 0 3px var(--lowest), 0 8px 16px rgba(0, 0, 0, .4); animation: tambaleo 1.2s ease-in-out infinite; }
.pokebola::after { content: ""; position: absolute; inset: 0; margin: auto; width: 32%; height: 32%; border-radius: 50%; background: var(--on); box-shadow: 0 0 0 3px var(--lowest); }
.pokebola.quieta { animation: none; opacity: .5; }
.cargando, .vacio { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cargando { grid-column: 1 / -1; padding: 48px 16px; color: var(--sec); font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.atrapado { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 14px;
  padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(28, 31, 41, .97); box-shadow: var(--sombra-2xl); color: var(--on);
  transform: translate(-50%, 160%); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; pointer-events: none; }
.atrapado.si { transform: translate(-50%, 0); opacity: 1; }
.atrapado .pokebola { --t: 36px; animation: tambaleo 1.1s ease-in-out 2, clic .5s ease 2.2s forwards; }
.atrapado b { display: block; font: 700 14px/18px var(--display); letter-spacing: .02em; }
.atrapado small { display: block; font: 500 11px/16px var(--mono); color: var(--sec); }

/* Reflejo holográfico (como carta holo) e inclinación al pasar el mouse */
.holo { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 64, 160, .14) 40%, rgba(255, 220, 90, .18) 47%, rgba(90, 255, 210, .14) 54%, rgba(110, 140, 255, .16) 61%, transparent 72%);
  background-size: 250% 250%; background-position: var(--hx, 50%) var(--hy, 50%); }
.tarjeta:hover .holo, .pieza-caja:hover .holo { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tarjeta, .pieza-caja { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease, box-shadow .3s; }
  .tarjeta:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .tarjeta.inclinada, .pieza-caja.inclinada { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7); }
  .seccion-tile:hover .cuadro-icono { animation: salto .55s ease; }
}

/* Barra de cobertura de decks como barra de PS */
.barra-cobertura i.ps-alto { background: linear-gradient(90deg, #16a34a, #4ade80); }
.barra-cobertura i.ps-medio { background: linear-gradient(90deg, #ca8a04, #facc15); }
.barra-cobertura i.ps-bajo { background: linear-gradient(90deg, #b91c1c, #f87171); }
.ps { font: 700 10px/1 var(--mono); letter-spacing: .08em; color: var(--sec); margin-right: 6px; }

/* Aviso de privacidad */
.legal { max-width: 760px; margin-inline: auto; padding-block: 24px 80px; }
.legal h2 { margin: 36px 0 10px; font: 600 22px/30px var(--display); color: var(--on); }
.legal p, .legal li { color: var(--sec); font-size: 15px; line-height: 26px; }
.legal ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal .fecha { font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Encabezado de cada sección: ruta, título y una línea; sin recuadro de portada */
.cabeza-pagina { padding-block: 36px 4px; }
.migas { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sec); }
.migas a { transition: color .2s; }
.migas a:hover { color: var(--primary); }
.migas [aria-current] { color: var(--primary); }
.cabeza-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cabeza-pagina h1 { font: 600 40px/48px var(--display); letter-spacing: -.02em; color: var(--on); }
.cabeza-pagina > p { margin-top: 8px; max-width: 640px; color: var(--sec); }
.cuenta-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--low); font: 500 12px/16px var(--mono); color: var(--primary); }
.cabeza-pagina .buscador-grande { margin: 20px 0 0; }
@media (max-width: 600px) {
  .cabeza-pagina { padding-block: 24px 0; }
  .cabeza-pagina h1 { font-size: 30px; line-height: 38px; }
}

/* =====================================================================================================================
   Capa «TAG + cristal»: tipografía y detalles de TAG con la paleta de BEAST, paneles de cristal y modo día (Espeon) /
   noche (Umbreon). Los colores salen de los tokens: el modo día solo cambia los tokens de :root.
   ===================================================================================================================== */
:root {
  --cristal: linear-gradient(155deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018) 42%, rgba(255, 255, 255, .04));
  --cristal-oro: radial-gradient(85% 65% at 100% 0%, rgba(197, 158, 78, .16), transparent 60%);
  --cristal-borde: rgba(255, 255, 255, .09);
  --cristal-sombra: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .9);
  --hundido: rgba(3, 5, 9, .5);
  --sobre-foto: rgba(6, 8, 13, .8);
  --linea: rgba(255, 255, 255, .08);
  --texto: #8f96a4;
  --nav-fondo: rgba(6, 8, 13, .72);
  --oro-boton: linear-gradient(180deg, #e6c172, #c59e4e);
  --grad-heroe: linear-gradient(90deg, #c59e4e, #ebc16d, #ffdea3, #ebc16d, #c59e4e);
  --luz-1: rgba(197, 158, 78, .13);
  --luz-2: rgba(37, 56, 104, .24);
  --panel-solido: #0c0f16;
}
html[data-tema="dia"] {
  color-scheme: light;
  --lowest: #f4f1ea; --fondo: #f8f6f1; --low: #ffffff; --cont: #f0ece3; --high: #e7e1d4; --highest: #dcd4c3; --bright: #d0c6b2;
  --on: #101727; --var: #424a5a; --sec: #586072; --outline: #8b919c;
  --primary: #8a6421; --pfixed: #6f4f17; --tert: #1a6a9e; --error: #b42318; --esmeralda: #047857;
  --grad-oro: linear-gradient(90deg, #8a6421, #b8892f 50%, #6f4f17);
  --grad-heroe: linear-gradient(90deg, #7a5619, #b8892f, #d0a64c, #b8892f, #7a5619);
  --cristal: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .66) 45%, rgba(255, 255, 255, .8));
  --cristal-oro: radial-gradient(85% 65% at 100% 0%, rgba(197, 158, 78, .2), transparent 60%);
  --cristal-borde: rgba(16, 23, 39, .1);
  --cristal-sombra: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 48px -30px rgba(16, 23, 39, .35);
  --hundido: rgba(16, 23, 39, .045);
  --sobre-foto: rgba(255, 255, 255, .88);
  --linea: rgba(16, 23, 39, .1);
  --texto: #4f5768;
  --nav-fondo: rgba(248, 246, 241, .8);
  --sombra-xl: 0 18px 30px -18px rgba(16, 23, 39, .25);
  --sombra-2xl: 0 30px 50px -24px rgba(16, 23, 39, .3);
  --luz-1: rgba(197, 158, 78, .22);
  --luz-2: rgba(16, 23, 39, .07);
  --panel-solido: #fbfaf6;
}
body { background: var(--lowest); transition: background-color .35s, color .35s; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 88% -8%, var(--luz-1), transparent 62%), radial-gradient(800px 640px at -12% 40%, var(--luz-2), transparent 70%), var(--lowest); }

/* Tipografía como TAG: Montserrat en títulos y etiquetas en mayúsculas espaciadas; Figtree en textos */
.heroe h1 { font: 700 50px/58px var(--display); letter-spacing: .07em; }
.heroe h1 .grad { font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: .3em; margin-top: 18px; }
.heroe-split h1 { font: 700 46px/56px var(--display); letter-spacing: -.01em; }
.heroe-split > div > p, .heroe-centro > p, .bloque p, .seccion-cabeza > p, .cabeza-pagina > p, .legal p, .legal li { color: var(--texto); }
.seccion-cabeza h2, .titulo-seccion { font: 700 26px/34px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.bloque h2 { font: 700 32px/40px var(--display); letter-spacing: -.01em; }
.cabeza-pagina h1 { font: 700 34px/42px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.ceja { font: 600 11px/16px var(--cuerpo); letter-spacing: .26em; }
.label-caps, .pildora-mono, .monitor-cab .estado-vivo, .panel-feed-cab, .migas { letter-spacing: .2em; }
.marca-txt b { letter-spacing: .12em; }
.tarjeta h3 { font: 600 15px/1.45 var(--cuerpo); letter-spacing: .005em; }
.tile-txt b, .deck h3, .opcion b, .paso-cab h3, .pasos b, .resumen-cab h3, .preguntas summary, .legal h2 {
  font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: .08em; text-transform: uppercase; }
.precio-fila b, .precio-bloque b, .opcion-claim b, .tile b, .cajita b, .metricas b, .opcion .grande { font-family: var(--display); letter-spacing: .01em; }

/* Cristal */
.tarjeta, .seccion-tile, .bloque, .panel-feed, .paso-caja, .resumen, .monitor, .deck, .vacio, .buscador-grande, .escenario, .pieza-caja,
.preguntas, .pasos li, .cajita, .opcion, .menu-movil a, .atrapado {
  background: var(--cristal-oro), var(--cristal); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.tarjeta:hover, .seccion-tile:hover { border-color: rgba(197, 158, 78, .38); box-shadow: var(--cristal-sombra), 0 0 0 1px rgba(197, 158, 78, .18); }
.seccion-tile:hover { background: var(--cristal-oro), var(--cristal); }
.opcion:has(input:checked) { border-color: rgba(197, 158, 78, .6); background: radial-gradient(90% 80% at 100% 0%, rgba(197, 158, 78, .24), transparent 60%), var(--cristal);
  box-shadow: var(--cristal-sombra), 0 0 0 1px rgba(197, 158, 78, .3), 0 0 36px -12px rgba(197, 158, 78, .55); }
.fila-feed, .tile, .resumen-total, .mini-caja, .deck-lista, .resultado-deck, .opcion-claim, .contador button, .campo input, .campo select, .campo textarea, .buscar input {
  background: var(--hundido); border: 1px solid var(--linea); box-shadow: none; }
.chip-flotante, .barra-custodia, .esquina-sup, .etiqueta-esquina, .etiqueta-grado { background: var(--sobre-foto); border: 1px solid var(--linea); }
.ventana { background: radial-gradient(circle at 50% 35%, rgba(197, 158, 78, .07), transparent 70%), var(--hundido); }
html[data-tema="dia"] .ventana::after { background: linear-gradient(0deg, rgba(248, 246, 241, .75), transparent 45%); }
.cuadro-icono { border-radius: 50%; background: var(--cristal); border: 1px solid var(--cristal-borde); }
.metricas { background: var(--cristal); border-block: 1px solid var(--cristal-borde); box-shadow: none; }
.metricas li { border-left-color: var(--linea); }
.preguntas details { box-shadow: 0 1px 0 var(--linea); }

/* Menú: enlaces en mayúsculas con subrayado dorado en la sección actual */
.nav { background: var(--nav-fondo); box-shadow: 0 1px 0 var(--linea); }
.menu { background: none; padding: 0; gap: 28px; border-radius: 0; }
.menu a { padding: 8px 0; border-radius: 0; background: none; color: var(--var); font: 600 12px/16px var(--display); letter-spacing: .16em; border-bottom: 2px solid transparent; }
.menu a:hover { background: none; color: var(--on); }
.menu a[aria-current="page"] { background: none; color: var(--on); box-shadow: none; border-bottom-color: var(--pcont); }
.menu-movil { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.menu-movil a[aria-current="page"] { border-color: rgba(197, 158, 78, .6); box-shadow: var(--cristal-sombra); }
.redondo { background: var(--cristal); border: 1px solid var(--cristal-borde); box-shadow: none; }
.redondo:hover { background: var(--cristal-oro), var(--cristal); border-color: rgba(197, 158, 78, .4); }

/* Botones y etiquetas */
.btn { font: 700 11px/16px var(--cuerpo); letter-spacing: .18em; }
.btn-oro { border-radius: 12px; background: var(--oro-boton); color: #1b1305; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -14px rgba(197, 158, 78, .7); }
.btn-oro:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 28px -6px rgba(197, 158, 78, .65); }
.btn-vidrio { border-radius: 12px; background: var(--cristal); border: 1px solid var(--cristal-borde); color: var(--on); box-shadow: var(--cristal-sombra); }
.btn-vidrio:hover { background: var(--cristal-oro), var(--cristal); border-color: rgba(197, 158, 78, .45); }
.btn-tarjeta { border-radius: 10px; background: var(--hundido); border: 1px solid var(--linea); color: var(--on); }
.btn-tarjeta:hover { background: var(--cristal); border-color: rgba(197, 158, 78, .4); }
.btn-tarjeta.dorado { background: var(--oro-boton); color: #1b1305; border-color: transparent; }
.resumen .btn-oro, .buscador-grande .btn-oro { border-radius: 12px; }
.pildora { border-radius: 10px; background: var(--cristal); border: 1px solid var(--cristal-borde); color: var(--var); }
.pildora:hover { background: var(--cristal-oro), var(--cristal); color: var(--on); }
.pildora[aria-pressed="true"] { background: var(--oro-boton); color: #1b1305; border-color: transparent; }
.num-oro, .pasos li::before { background: var(--oro-boton); color: #1b1305; }
.serie { background: none; border: 1px solid rgba(197, 158, 78, .45); border-radius: 999px; padding: 1px 9px; letter-spacing: .14em; }
.serie.roja { border-color: rgba(229, 72, 77, .45); }
.serie.azul { border-color: rgba(123, 208, 255, .45); }
.pildora-mono { background: var(--cristal); border: 1px solid var(--cristal-borde); }
.resumen-cab .chip-tiempo, .cuenta-chip { background: none; border: 1px solid rgba(197, 158, 78, .45); }

/* Encabezado de Sellado, Singles y Decks: como el de Gradeo */
.heroe-seccion { padding-block: 40px 32px; }
.heroe-seccion .migas { margin-bottom: 18px; }
.heroe-seccion .buscador-grande { margin: 24px 0 0; max-width: none; }
.monitor .tile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pie */
.pie { background: var(--fondo); border-top: 1px solid var(--linea); }
.pie-redes a, .pie-lista .icono { background: var(--cristal); border: 1px solid var(--cristal-borde); }
.pie-abajo { border-top-color: var(--linea); }

/* Pokébola también en modo día */
html[data-tema="dia"] .pokebola { background: linear-gradient(180deg, var(--pcont) 0 45%, #101727 45% 55%, #ffffff 55% 100%);
  box-shadow: inset 0 0 0 3px #101727, 0 8px 16px rgba(16, 23, 39, .2); }
html[data-tema="dia"] .pokebola::after { background: #fff; box-shadow: 0 0 0 3px #101727; }

/* Botón de modo: Umbreon de noche, Espeon de día */
.tema-btn { cursor: pointer; overflow: hidden; color: inherit; }
.tema-btn img { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated;
  transition: transform .55s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
.tema-btn .espeon { opacity: 0; transform: rotate(-120deg) scale(.3); }
html[data-tema="dia"] .tema-btn .espeon { opacity: 1; transform: none; }
html[data-tema="dia"] .tema-btn .umbreon { opacity: 0; transform: rotate(120deg) scale(.3); }
/* Sol o luna en la esquina (como la bolsita de Delibird): Espeon = modo claro, Umbreon = modo oscuro */
.tema-btn { overflow: visible; }
.tema-btn img { clip-path: circle(50%); }
.tema-btn .tema-modo { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: #232a4d; color: #ffe39a; font-size: 13px; box-shadow: 0 0 0 2px var(--fondo); pointer-events: none; transition: background-color .3s, color .3s; }
html[data-tema="dia"] .tema-btn .tema-modo { background: #ffcf3f; color: #5b3a00; }

@media (max-width: 600px) {
  .heroe h1 { font-size: 32px; line-height: 40px; letter-spacing: .05em; }
  .heroe h1 .grad { font-size: 11px; letter-spacing: .22em; }
  .heroe-split h1 { font-size: 32px; line-height: 40px; }
  .seccion-cabeza h2, .titulo-seccion { font-size: 21px; line-height: 28px; }
  .bloque h2 { font-size: 26px; line-height: 34px; }
  .cabeza-pagina h1 { font-size: 26px; line-height: 34px; }
  .heroe-seccion { padding-block: 24px 16px; }
  .monitor { padding: 18px; }
  .monitor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .monitor .tile { padding: 12px; }
  .monitor .tile b { font-size: 17px; }
  .monitor-cab { margin-bottom: 14px; }
  .nav-der { gap: 8px; }
}

/* Inicio: un cuadro por sección, alternando lados */
.bloque-sec { padding-block: 0 40px; }
.metricas + .bloque-sec { padding-top: 56px; }
.bloque.al-reves .bloque-txt { order: 2; }
.bloque.al-reves { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bloque .buscador-grande { margin: 0; max-width: none; }
/* Nombres largos («30TH Celebration Ultra-Premium Collection (Day OR Night…)») se cortan con «…» dentro del cuadro */
.filas-feed { grid-template-columns: minmax(0, 1fr); }
.fila-feed span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-feed span:last-child { flex: none; }
@media (max-width: 900px) {
  .bloque.al-reves { grid-template-columns: 1fr; }
  .bloque.al-reves .bloque-txt { order: 0; }
  .bloque-sec { padding-bottom: 24px; }
}

/* ---------- Luces en movimiento (como TAG) ---------- */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes giro-borde { to { --giro: 360deg; } }
@keyframes destello { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes respira { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: .95; transform: translateX(-46%) scale(1.12); } }
@keyframes deriva { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(120px, -40px); } }
/* Una luz dorada que recorre el borde de los paneles con datos */
.monitor, .panel-feed, .resumen {
  border: 1px solid transparent;
  background: var(--cristal-oro) padding-box, var(--cristal) padding-box, linear-gradient(var(--panel-solido), var(--panel-solido)) padding-box,
    conic-gradient(from var(--giro), transparent 0 58%, rgba(235, 193, 109, .75) 70%, rgba(255, 222, 163, .95) 75%, rgba(235, 193, 109, .75) 80%, transparent 92%) border-box,
    linear-gradient(var(--cristal-borde), var(--cristal-borde)) border-box;
  animation: giro-borde 7s linear infinite; }
.bloque-sec:nth-of-type(2) .panel-feed { animation-delay: -1.7s; }
.bloque-sec:nth-of-type(3) .panel-feed { animation-delay: -3.4s; }
.bloque-sec:nth-of-type(4) .panel-feed { animation-delay: -5.1s; }
/* Destello que cruza los botones dorados de vez en cuando */
.btn-oro { position: relative; overflow: hidden; isolation: isolate; }
.btn-oro::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-130%) skewX(-18deg);
  animation: destello 6s ease-in-out infinite; }
.btn-oro > * { position: relative; }
/* La luz de arriba respira y la azul se mueve despacio */
.luz::before { animation: respira 9s ease-in-out infinite; }
.luz::after { animation: deriva 16s ease-in-out infinite; }
/* El subrayado de la sección actual brilla */
.menu a[aria-current="page"] { box-shadow: 0 6px 14px -8px rgba(235, 193, 109, .9); }
.aviso-preventa { display: flex; align-items: flex-start; gap: 10px; margin: -16px 0 24px; padding: 12px 16px; border-radius: 14px; max-width: 760px;
  background: var(--cristal); border: 1px solid rgba(197, 158, 78, .35); color: var(--texto); font-size: 14px; line-height: 21px; }
.aviso-preventa .icono { color: var(--primary); font-size: 20px; }

/* ---------- Fondo de la página (se elige en el panel › Tienda) ---------- */
/* luz: el brillo dorado y marino de siempre. tapiz: Pokémon en pixel art dorado. puntos: retícula fina. liso: sin nada. */
@keyframes tapiz-deriva { to { background-position: 640px 640px; } }
html[data-fondo="tapiz"] body::after, html[data-fondo="puntos"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-fondo="tapiz"] body::after { background: var(--tapiz-img, url("/marca/tapiz-pokemon.png")) 0 0 / 320px 320px repeat; image-rendering: pixelated; opacity: .1;
  animation: tapiz-deriva 120s linear infinite; }
html[data-tema="dia"][data-fondo="tapiz"] body::after { opacity: .16; }
/* Más tenue detrás del título de arriba para que se lea bien */
html[data-fondo="tapiz"] body::after { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 240px, #000 520px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 240px, #000 520px); }
html[data-fondo="puntos"] body::after { background: radial-gradient(rgba(197, 158, 78, .5) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%); opacity: .55; }
html[data-fondo="liso"] body::before { background: var(--lowest); }
html[data-fondo="liso"] .luz::before, html[data-fondo="liso"] .luz::after { display: none; }

/* Decks: iconos en pixel art (Limitless) y la lista con la foto de cada carta */
.deck-cab h3 { display: flex; align-items: center; gap: 8px; }
.deck-iconos, .con-iconos { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.con-iconos { gap: 6px; min-width: 0; }
.deck-iconos img, .con-iconos img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.con-iconos img { width: 28px; height: 28px; margin-right: -4px; }
.monitor .tile b .con-iconos img { width: 30px; height: 30px; }
.deck.abierto { grid-column: 1 / -1; }
.deck { scroll-margin-top: 100px; }
.deck-cartas { display: none; }
.deck.abierto .deck-cartas { display: block; }
.deck-grupo { margin-top: 16px; }
.deck-grupo h4 { margin: 0 0 10px; font: 700 11px/16px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--sec); }
.cartas-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.carta-mini { position: relative; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.carta-mini img, .carta-mini .falta-img { width: 100%; height: auto; aspect-ratio: 63 / 88; border-radius: 8px; background: var(--hundido); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .7); }
.carta-mini img { object-fit: cover; transition: transform .2s; }
.carta-mini:hover img { transform: translateY(-3px) scale(1.03); }
.carta-mini .falta-img { display: grid; place-items: center; padding: 8px; text-align: center; font-size: 12px; color: var(--sec); border: 1px solid var(--linea); }
.carta-mini .n { position: absolute; top: 6px; left: 6px; min-width: 28px; padding: 2px 7px; border-radius: 999px; background: rgba(6, 8, 13, .85); color: #fff;
  font: 700 12px/16px var(--display); text-align: center; }
.carta-mini .tengo { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(4, 120, 87, .92); color: #fff; font: 700 11px/16px var(--cuerpo); }
.carta-mini figcaption { font: 600 12px/16px var(--cuerpo); color: var(--on); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-mini figcaption small { display: block; font: 500 11px/14px var(--cuerpo); color: var(--sec); }
.resultado-deck .deck-grupo { margin-top: 12px; }
@media (max-width: 600px) { .cartas-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* Inicio con 8 secciones: 4 por fila en pantalla grande, 2 en tableta y una debajo de otra en celular */
.secciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1200px) { .secciones .seccion-tile { padding: 18px 16px; gap: 12px; } }
@media (max-width: 1199px) { .secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .secciones { grid-template-columns: 1fr; } }

/* Filtro por colección: el logo de cada expansión (TCGdex) y su nombre en inglés y en español, en una pastilla de cristal */
.colecciones { display: flex; align-items: center; gap: 8px; overflow-x: auto; margin: 0 0 20px; padding: 4px 2px 8px; scrollbar-width: none; }
.filtros + .colecciones { margin-top: -12px; }
.colecciones::-webkit-scrollbar { display: none; }
.colecciones[hidden] { display: none; }
.colecciones .label-caps { flex: none; margin-right: 4px; font-size: 11px; color: var(--sec); }
.col-chip { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border-radius: 12px; cursor: pointer;
  background: var(--cristal); border: 1px solid var(--cristal-borde); color: var(--var); font: 600 13px/1 var(--cuerpo);
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.col-chip img { display: block; height: 26px; width: auto; max-width: 84px; object-fit: contain; }
.col-nombres { display: grid; gap: 3px; text-align: left; }
.col-nombres b { font: 600 13px/1.15 var(--cuerpo); color: var(--on); white-space: nowrap; }
.col-nombres small { font: 500 11px/1.15 var(--cuerpo); color: var(--sec); white-space: nowrap; }
.col-chip .n { font: 600 11px/1 var(--mono); color: var(--sec); }
.col-chip:hover { background: var(--cristal-oro), var(--cristal); color: var(--on); transform: translateY(-1px); }
.col-chip[aria-pressed="true"] { border-color: rgba(197, 158, 78, .7); color: var(--on); box-shadow: inset 0 0 0 1px rgba(197, 158, 78, .45), 0 0 18px rgba(197, 158, 78, .18); }
.col-chip[aria-pressed="true"] .n { color: var(--primary); }

/* ---------- Diseño elegido en el panel (Tienda › Diseño de la página) ---------- */
/* Intensidad del fondo: suave, normal (la de siempre) o fuerte */
html[data-intensidad="suave"] .luz::before { background: rgba(235, 193, 109, .05); }
html[data-intensidad="fuerte"] .luz::before { background: rgba(235, 193, 109, .2); }
html[data-fondo="tapiz"][data-intensidad="suave"] body::after { opacity: .06; }
html[data-fondo="tapiz"][data-intensidad="fuerte"] body::after { opacity: .17; }
html[data-tema="dia"][data-fondo="tapiz"][data-intensidad="suave"] body::after { opacity: .09; }
html[data-tema="dia"][data-fondo="tapiz"][data-intensidad="fuerte"] body::after { opacity: .26; }
html[data-fondo="puntos"][data-intensidad="suave"] body::after { opacity: .3; }
html[data-fondo="puntos"][data-intensidad="fuerte"] body::after { opacity: .9; }
/* Sin luces en movimiento: borde fino y quieto, sin destello en los botones y el fondo quieto */
html[data-luces="0"] .monitor, html[data-luces="0"] .panel-feed, html[data-luces="0"] .resumen { animation: none;
  background: var(--cristal-oro) padding-box, var(--cristal) padding-box, linear-gradient(var(--panel-solido), var(--panel-solido)) padding-box,
    linear-gradient(var(--cristal-borde), var(--cristal-borde)) border-box; }
html[data-luces="0"] .btn-oro::after { display: none; }
html[data-luces="0"] .luz::before, html[data-luces="0"] .luz::after, html[data-luces="0"] body::after,
html[data-luces="0"] .heroe h1 .grad, html[data-luces="0"] .heroe-split h1 .grad { animation: none; }
/* Sin reflejo holo (la inclinación la apaga tienda.js) y sin el botón Espeon/Umbreon */
html[data-holo="0"] .holo { display: none; }
html[data-boton="0"] .tema-btn { display: none; }

/* ---------- Carrito ---------- */
.sin-scroll, .sin-scroll body { overflow: hidden; }
.carrito-btn { position: relative; }
.carrito-btn[hidden] { display: none; }
.carrito-btn #carrito-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--oro-boton); color: #1b1305; font: 800 11px/1 var(--display); box-shadow: 0 0 0 2px var(--fondo); }
.carrito-btn #carrito-n[hidden] { display: none; }
.carrito-btn.salta { animation: salto .55s ease; }
.carrito-fondo { position: fixed; inset: 0; z-index: 90; background: rgba(6, 8, 13, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.carrito-fondo.abierto { opacity: 1; }
.carrito { position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--panel-solido); border-left: 1px solid var(--cristal-borde); box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .6);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.carrito.abierto { transform: none; }
.carrito-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--linea); }
.carrito-cab h2 { font: 700 20px/28px var(--display); color: var(--on); }
.carrito-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 28px; }
.c-vacio { display: grid; justify-items: center; gap: 14px; padding: 48px 0; text-align: center; color: var(--sec); }
.c-items { display: grid; gap: 12px; }
.c-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 18px; background: var(--cristal); border: 1px solid var(--cristal-borde); }
.c-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: var(--hundido); }
.c-item.agotado { opacity: .6; }
.c-info { display: grid; gap: 4px; min-width: 0; }
.c-info b { font: 600 14px/18px var(--cuerpo); color: var(--on); }
.c-info small { font-size: 12px; line-height: 16px; color: var(--sec); }
.c-etiqueta { justify-self: start; padding: 2px 8px; border-radius: 999px; font: 600 11px/16px var(--cuerpo); color: var(--primary); border: 1px solid rgba(197, 158, 78, .45); }
.c-etiqueta.roja { color: #f87171; border-color: rgba(248, 113, 113, .45); }
.c-cant { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px; border-radius: 999px; background: var(--hundido); }
.c-cant button { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--cristal); color: var(--on); }
.c-cant button:disabled { opacity: .35; cursor: default; }
.c-cant > span { min-width: 24px; text-align: center; font: 700 14px/1 var(--display); color: var(--on); }
.c-precio { display: grid; justify-items: end; gap: 6px; }
.c-precio b { font: 700 15px/20px var(--display); color: var(--primary); white-space: nowrap; }
.c-quitar { border: 0; background: none; padding: 0; cursor: pointer; font: 500 12px/16px var(--cuerpo); color: var(--sec); text-decoration: underline; }
.c-pie { display: grid; gap: 10px; margin-top: 18px; }
.c-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--texto); }
.c-total b { font: 800 22px/28px var(--display); color: var(--on); }
.c-total b small { font-size: 12px; color: var(--sec); font-weight: 600; }
.c-total.sub b { font-size: 16px; color: var(--primary); }
.btn.ancho { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: default; }
.c-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 18px; color: var(--sec); }
.c-nota .icono { font-size: 16px; color: var(--primary); }
.c-form { display: grid; gap: 14px; }
.c-grupo { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.c-grupo legend { margin-bottom: 8px; font: 700 11px/16px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }
.c-opcion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; background: var(--cristal); border: 1px solid var(--cristal-borde);
  transition: border-color .2s, box-shadow .2s; }
.c-opcion input { width: 18px; height: 18px; accent-color: var(--pcont); flex: none; }
.c-opcion > .icono { color: var(--primary); }
.c-opcion b { display: block; font: 600 14px/18px var(--cuerpo); color: var(--on); }
.c-opcion small { display: block; font-size: 12px; line-height: 16px; color: var(--sec); }
.c-opcion:has(input:checked) { border-color: rgba(197, 158, 78, .7); box-shadow: inset 0 0 0 1px rgba(197, 158, 78, .4); }
.c-listo { display: grid; gap: 14px; }
.c-atrapado { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--cristal-oro), var(--cristal); border: 1px solid rgba(197, 158, 78, .45); }
.c-atrapado .pokebola { --t: 40px; flex: none; animation: tambaleo 1.1s ease-in-out 2, clic .5s ease 2.2s forwards; }
.c-atrapado b { display: block; font: 800 18px/24px var(--display); color: var(--on); }
.c-atrapado small { font: 700 13px/18px var(--display); letter-spacing: .08em; color: var(--primary); }
.c-listo > p { font-size: 14px; line-height: 21px; color: var(--texto); }
.c-resumen { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--hundido); font-size: 13px; color: var(--texto); }
.c-resumen li { display: flex; justify-content: space-between; gap: 12px; }
.c-resumen b { color: var(--on); white-space: nowrap; }
.c-entrega, .c-pagado { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--texto); }
.c-entrega .icono, .c-pagado .icono { font-size: 18px; color: var(--primary); }
.c-pagado .icono { color: var(--esmeralda, #34d399); }
.c-cuenta { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--cristal); border: 1px dashed rgba(197, 158, 78, .55); }
.c-cuenta > b { font: 700 15px/20px var(--display); color: var(--on); }
.c-cuenta div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sec); }
.c-cuenta div b { margin-left: auto; color: var(--on); font-weight: 700; }
.c-cuenta .mono { letter-spacing: .04em; }
.c-cuenta small { font-size: 12px; color: var(--sec); }
.c-copiar { width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--cristal-borde); background: var(--cristal); color: var(--primary); cursor: pointer; display: grid; place-items: center; }
.c-copiar .icono { font-size: 16px; }
@media (max-width: 600px) {
  .carrito { top: auto; width: 100%; max-height: 92vh; border-left: 0; border-top: 1px solid var(--cristal-borde); border-radius: 24px 24px 0 0;
    transform: translateY(100%); box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .6); }
  .carrito-cuerpo { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* ---------- Preventa: franja en Inicio que llama la atención ---------- */
.preventa-banda { position: relative; margin-top: 56px; margin-bottom: 8px; padding: 28px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(197, 158, 78, .22), transparent 55%), var(--cristal-oro), var(--cristal);
  border: 1px solid rgba(197, 158, 78, .5); box-shadow: var(--cristal-sombra), 0 0 40px -12px rgba(197, 158, 78, .45); }
.preventa-banda[hidden] { display: none; }
.preventa-banda::before { content: "PREVENTA"; position: absolute; top: 22px; right: -46px; width: 180px; transform: rotate(35deg); padding: 6px 0; text-align: center;
  background: var(--oro-boton); color: #1b1305; font: 800 11px/1 var(--display); letter-spacing: .24em; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.pv-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-right: 72px; }
.pv-cab h2 { font: 800 30px/36px var(--display); letter-spacing: -.01em; color: var(--on); }
.pv-cab p { max-width: 360px; color: var(--texto); font-size: 15px; line-height: 22px; }
.carril { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px 2px 6px; scrollbar-width: thin; }
.pv-tarjeta { flex: 0 0 250px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--panel-solido); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra); transition: transform .2s, border-color .2s; }
.pv-tarjeta:hover { transform: translateY(-4px); border-color: rgba(197, 158, 78, .6); }
.pv-foto { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 12px; background: var(--hundido); }
.pv-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-foto img.sin-foto { width: 64px; opacity: .35; }
.pv-cuenta { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: rgba(6, 8, 13, .82); color: #f5d38a; font: 700 12px/16px var(--display); letter-spacing: .02em; }
.pv-cuenta .icono { font-size: 15px; }
.pv-txt { display: grid; gap: 8px; padding: 14px 16px 16px; flex: 1; align-content: start; }
.pv-txt small { font: 700 11px/16px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.pv-txt h3 { font: 700 15px/20px var(--cuerpo); color: var(--on); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-precio { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.pv-precio b { font: 800 20px/24px var(--display); color: var(--primary); }
.pv-precio span { font-size: 12px; color: var(--texto); }
.pv-txt .btn { justify-content: center; }
.preventa-banda .aviso-preventa { margin: 16px 0 0; }
@media (max-width: 600px) {
  .preventa-banda { margin-top: 32px; padding: 20px; border-radius: 24px; }
  .pv-cab { padding-right: 56px; }
  .pv-cab h2 { font-size: 24px; line-height: 30px; }
  .pv-tarjeta { flex-basis: 76%; }
}
html[data-luces="0"] .preventa-banda { box-shadow: var(--cristal-sombra); }

/* ---------- Pokémon de los juegos: sprites originales en pixel art (Pokémon Black/White), animados ---------- */
.sprite { height: 40px; width: auto; flex: none; image-rendering: pixelated; pointer-events: none; }
.panel-feed-cab .sprite { height: 36px; margin: -12px -6px -10px 0; }
.monitor-cab .estado-vivo .sprite { height: 32px; margin: -10px 0 -8px; }
.sprite.grande { height: 76px; }
.vacio .sprite.grande, .c-vacio .sprite.grande { height: 84px; margin-bottom: 4px; }
.pv-lado { display: flex; align-items: flex-end; gap: 12px; }
.pv-lado .sprite.grande { height: 64px; margin-bottom: -6px; }

/* ---------- Decks: buscador, números del meta y torneos recientes ---------- */
.buscador-deck { display: flex; margin-bottom: 20px; }
.buscador-deck .buscar { flex: 1; max-width: 640px; margin: 0; }
#estado-deck { margin: -8px 0 16px; }
.deck-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.deck-datos div { padding: 10px 12px; border-radius: 14px; background: var(--hundido); }
.deck-datos b { display: block; font: 800 18px/22px var(--display); color: var(--primary); }
.deck-datos small { display: block; font-size: 11px; line-height: 15px; color: var(--sec); }
.tres-botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tres-botones .btn { padding-inline: 8px; }
.torneos-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.torneos-lista a { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px;
  background: var(--cristal); border: 1px solid var(--cristal-borde); color: inherit; transition: border-color .2s, transform .2s; }
.torneos-lista a:hover { border-color: rgba(197, 158, 78, .5); transform: translateY(-2px); }
.t-fecha { font: 700 12px/16px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.t-nombre b { display: block; font: 600 14px/19px var(--cuerpo); color: var(--on); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-nombre small { font-size: 12px; color: var(--sec); }
.t-ganador { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/18px var(--cuerpo); color: var(--texto); }
@media (max-width: 600px) {
  .tres-botones { grid-template-columns: 1fr 1fr; }
  .tres-botones .dorado { grid-column: 1 / -1; }
  .torneos-lista a { grid-template-columns: 1fr; gap: 6px; }
}
.btn-texto { border: 0; background: none; padding: 0; margin-left: 6px; cursor: pointer; font: inherit; font-weight: 700; color: var(--primary); text-decoration: underline; letter-spacing: inherit; text-transform: inherit; }
.btn-texto:disabled { opacity: .5; cursor: default; }

/* Encargos: cartas sin stock y lo que va sobre pedido */
.opcion-claim.sin-stock b { color: #fbbf24; }
.enc-que { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--cristal); border: 1px solid var(--cristal-borde); }
.enc-que img { width: 56px; height: 78px; object-fit: contain; border-radius: 8px; }
.enc-que div { display: grid; gap: 4px; min-width: 0; }
.enc-que b { font: 600 14px/18px var(--cuerpo); color: var(--on); overflow-wrap: anywhere; }
.enc-que small { font-size: 12px; color: #fbbf24; }
.c-ayuda { font-size: 12px; line-height: 16px; color: var(--sec); }
.encargo-listo { margin-top: 0; }

/* Menú con 8 secciones: en pantallas medianas pasa al botón de menú para que no se encime */
.menu { gap: 22px; }
@media (max-width: 1260px) { .menu { display: none; } .menu-btn { display: grid; } }
.aviso-linea { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; border-radius: 18px; background: var(--cristal); border: 1px solid var(--cristal-borde); color: var(--texto); font-size: 14px; line-height: 21px; }
.aviso-linea .icono { color: var(--primary); }
.pedir-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Inicio: 9 secciones (3 × 3; en 2 columnas la última va completa) ---------- */
.secciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) {
  .secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secciones .seccion-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .secciones { grid-template-columns: 1fr; } }

/* ---------- Arte: galería (cada foto con su tamaño), visor y pedido ---------- */
/* Columnas armadas en tienda.js (pintarArte), no con «columns» de CSS: en Safari del iPhone las fotos de la 2.ª columna no cargaban. */
.galeria { display: flex; align-items: flex-start; gap: 18px; }
.galeria-col { flex: 1 1 0; min-width: 0; }
.galeria > .vacio, .galeria > .cargando { flex: 1 1 auto; }
.pieza-arte { break-inside: avoid; margin: 0 0 18px; padding: 10px; border-radius: 22px; background: var(--cristal-oro), var(--cristal); border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-sombra); transition: transform .25s, border-color .25s; }
.pieza-arte:hover { transform: translateY(-3px); border-color: rgba(197, 158, 78, .4); }
.pieza-foto { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--hundido); cursor: zoom-in; }
.pieza-foto img { display: block; width: 100%; height: auto; transition: transform .5s; }
.pieza-arte:hover .pieza-foto img { transform: scale(1.03); }
.pieza-arte figcaption { display: grid; gap: 2px; padding: 10px 4px 2px; }
.pieza-arte small { font: 700 10px/14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.pieza-arte b { font: 600 15px/20px var(--cuerpo); color: var(--on); }
.pieza-arte figcaption span { font: 700 12px/16px var(--display); letter-spacing: .04em; }
.pieza-arte .vendida { color: var(--sec); }
.galeria .vacio, .galeria .cargando { break-inside: avoid; }
@media (max-width: 600px) {
  .galeria { gap: 10px; }
  .pieza-arte { padding: 6px; margin-bottom: 10px; border-radius: 16px; }
  .pieza-arte figcaption { padding: 8px 2px 2px; }
  .pieza-arte b { font-size: 13px; line-height: 17px; }
}
.visor-arte { padding: 0; border: 1px solid var(--cristal-borde); border-radius: 24px; background: var(--fondo); color: var(--on); width: auto; max-width: min(92vw, 760px);
  max-height: 92vh; overflow: hidden; box-shadow: var(--sombra-2xl); }
.visor-arte::backdrop { background: rgba(4, 6, 10, .82); backdrop-filter: blur(4px); }
.visor-arte[open] { display: flex; flex-direction: column; }
.visor-arte img { display: block; max-width: 100%; max-height: calc(92vh - 110px); width: auto; height: auto; margin: 0 auto; object-fit: contain; background: var(--lowest); }
.visor-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.visor-pie div { display: grid; gap: 2px; min-width: 0; }
.visor-pie small { font: 700 10px/14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.visor-pie b { font: 700 17px/22px var(--display); color: var(--on); }
.visor-pie div > span { font-size: 13px; color: var(--primary); }
.visor-cerrar { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* Abajo de la foto, el dorado lleno deslumbraba: aquí el botón va en dorado suave, con letra que se lee */
.visor-pie .btn-oro { background: rgba(235, 193, 109, .12); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(235, 193, 109, .45); }
.visor-pie .btn-oro:hover { background: rgba(235, 193, 109, .2); box-shadow: inset 0 0 0 1px rgba(235, 193, 109, .65); }
.visor-pie .btn-oro::after { display: none; }
html[data-tema="dia"] .visor-pie .btn-oro { background: rgba(138, 100, 33, .08); box-shadow: inset 0 0 0 1px rgba(138, 100, 33, .4); }
.arte-pedir, .pc-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.arte-pedir-txt, .pc-link-txt { display: grid; gap: 12px; align-content: start; }
.arte-pedir-txt h2, .pc-link-txt h2 { font: 700 26px/34px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--on); }
.arte-pedir-txt p, .pc-link-txt p { color: var(--texto); }
.arte-pedir-txt .btn { justify-self: start; }
.arte-pedir-txt .arte-wa-txt { font-size: 13px; color: var(--sec); }
.wa-ic { display: inline-flex; }
.wa-ic svg, .c-listo .btn svg { width: 18px; height: 18px; fill: currentColor; }
.pc-ida { justify-self: start; padding: 10px 14px; border-radius: 14px; background: var(--cristal); border: 1px solid rgba(197, 158, 78, .45); font-weight: 600; }
.pc-link-txt .pc-ida { color: var(--primary); }
@media (max-width: 900px) { .arte-pedir, .pc-link { grid-template-columns: 1fr; gap: 20px; } }
.arte-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px 0; }
.arte-mini a { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--hundido); }
.arte-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.arte-mini a:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .arte-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Modo admin: barrita «Editar página» y lápices ---------- */
.barra-admin { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  border-radius: 999px; background: rgba(10, 13, 20, .92); color: #f5f1e8; border: 1px solid rgba(197, 158, 78, .6); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
  font: 600 12px/16px var(--display); letter-spacing: .06em; backdrop-filter: blur(8px); }
.barra-admin .icono { font-size: 18px; color: #ebc16d; }
.barra-admin button { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: inherit; font: inherit; letter-spacing: inherit; }
.barra-admin button[aria-pressed="true"] { background: var(--oro-boton, #c59e4e); color: #1b1305; }
.barra-admin a { padding: 8px 10px; color: #ebc16d; text-decoration: underline; }
.editar-btn { position: absolute; top: 10px; left: 10px; z-index: 4; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(197, 158, 78, .8); background: rgba(10, 13, 20, .88); color: #ebc16d; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7); }
.editar-btn:hover { background: #c59e4e; color: #1b1305; }
.editar-btn .icono { font-size: 18px; }
.pieza-arte { position: relative; }
.pieza-arte .editar-btn { top: 16px; left: 16px; }
.pieza-arte.oculta { opacity: .55; }
.tile .editar-btn, .pie-tit .editar-btn { position: static; display: inline-grid; width: 28px; height: 28px; margin-left: 8px; vertical-align: middle; }
.desc .original { font-size: 11px; opacity: .75; }
@media (max-width: 600px) { .barra-admin { left: 10px; right: 10px; justify-content: space-between; } }

/* Pokémon Center: pegar un link con un botón flotante y una línea chiquita abajo */
.link-flotante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; border: 1px solid rgba(197, 158, 78, .7); background: rgba(10, 13, 20, .9); color: #ebc16d; cursor: pointer; backdrop-filter: blur(8px);
  font: 700 12px/16px var(--display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); }
.link-flotante:hover { background: #c59e4e; color: #1b1305; }
.link-flotante .icono { font-size: 18px; }
.link-chico { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 20px 0 0; font-size: 14px; color: var(--texto); }
.link-chico .icono { color: var(--primary); font-size: 18px; }
html[data-admin="1"] .link-flotante { bottom: calc(76px + env(safe-area-inset-bottom)); }
/* «¿Buscas referencias de nosotros?» (22 oct 2026): abajo a la izquierda, se cierra con la ✕ */
.refs-flota { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; border: 1px solid rgba(197, 158, 78, .7); background: rgba(10, 13, 20, .9); color: #ebc16d; backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); animation: refs-entra .5s cubic-bezier(.2, .8, .2, 1) 1.2s both; }
.refs-flota a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; border-radius: 999px; font: 700 13px/16px var(--display); letter-spacing: .02em; color: inherit; }
.refs-flota a:hover { color: #ffdea3; }
.refs-flota a .icono { font-size: 19px; }
.refs-txt { display: inline-block; max-width: 320px; overflow: hidden; white-space: nowrap; transition: max-width .35s ease, opacity .25s ease; }
.refs-flota.chico .refs-txt { max-width: 0; opacity: 0; }
.refs-flota.chico a { gap: 0; padding-right: 4px; }
.refs-flota.chico:hover .refs-txt, .refs-flota.chico:focus-within .refs-txt { max-width: 320px; opacity: 1; }
.refs-flota.chico:hover a, .refs-flota.chico:focus-within a { gap: 8px; padding-right: 6px; }
.refs-flota button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #9aa1af; cursor: pointer; }
.refs-flota button:hover { background: rgba(255, 255, 255, .08); color: #eef1f7; }
.refs-flota button .icono { font-size: 17px; }
html[data-tema="dia"] .refs-flota { background: rgba(255, 252, 245, .95); color: #8a6421; border-color: rgba(197, 158, 78, .8); box-shadow: 0 14px 30px -14px rgba(60, 40, 0, .35); }
html[data-tema="dia"] .refs-flota a:hover { color: #5c410f; }
html[data-tema="dia"] .refs-flota button { color: #6b7280; }
html[data-admin="1"] .refs-flota { bottom: calc(76px + env(safe-area-inset-bottom)); }
@keyframes refs-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) { .refs-flota { left: 10px; } .refs-flota a { font-size: 12px; padding: 7px 4px 7px 10px; } }
@media (prefers-reduced-motion: reduce) { .refs-flota { animation: none; } }
.monitor .editar-btn .icono, .pie-tit .editar-btn .icono { font: normal 16px/1 "Material Symbols Outlined"; letter-spacing: normal; text-transform: none; color: inherit; }

/* ---------- Filtros: ordenar, precio, disponibilidad, condición e idioma ---------- */
.filtros-tienda { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 18px; }
.filtros-tienda:empty { display: none; }
.filtro { display: grid; gap: 4px; min-width: 0; }
.filtro > span { font: 700 10px/14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.filtro select, .filtro input { min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--cristal-borde); background: var(--cristal); color: var(--on);
  font: 500 13px/18px var(--cuerpo); }
.filtro select:focus, .filtro input:focus { outline: 2px solid rgba(235, 193, 109, .5); }
.filtro-precio > div { display: flex; align-items: center; gap: 6px; }
.filtro-precio input { width: 84px; }
.filtro-precio b { color: var(--sec); font-weight: 400; }
.filtro-q input { width: 230px; }
.filtros-tienda .quitar { align-self: center; margin: 0 0 6px; }
.uso-tabs { margin-bottom: 14px; }
@media (max-width: 600px) {
  .filtros-tienda { display: grid; grid-template-columns: 1fr 1fr; }
  .filtro-q { grid-column: 1 / -1; }
  .filtro-q input { width: 100%; }
  .filtro-precio input { width: 100%; }
  .filtro-precio { grid-column: 1 / -1; }
}

/* ---------- Rendimiento: que la página no caliente la compu ni el celular ---------- */
/* Antes había animaciones que nunca paraban (el tapiz que se desliza, las luces que respiran, los bordes que giran, los
   destellos) y hasta 170 tarjetas con vidrio esmerilado (backdrop-filter), que la tarjeta de video vuelve a calcular cada
   vez que algo se mueve detrás. Ahora el esmerilado solo queda en la barra de arriba y detrás de las ventanas (carrito,
   encargos, editor); las tarjetas llevan una base casi sólida, así se ven igual y el tapiz no se asoma. Lo que se mueve lo
   hace una vez al cargar o al pasar el mouse, y luego la página se queda quieta. */
:root { --cristal-base: rgba(10, 13, 20, .72); }
html[data-tema="dia"] { --cristal-base: rgba(251, 250, 246, .6); }
body :not(.nav, .carrito-fondo) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.tarjeta, .seccion-tile, .seccion-tile:hover, .bloque, .paso-caja, .deck, .vacio, .buscador-grande, .escenario, .pieza-caja, .preguntas, .pasos li,
.cajita, .opcion, .opcion:has(input:checked), .btn-vidrio, .btn-vidrio:hover, .metricas { background-color: var(--cristal-base); }
/* El fondo y las luces, quietos; las luces son degradados (no desenfoque), que no cuestan nada */
html[data-fondo="tapiz"] body::after, .pie::before { animation: none; }
.luz::before, .luz::after { animation: none; filter: none; }
.luz::before { top: -440px; width: 1460px; height: 1010px; max-width: 300%; background: radial-gradient(closest-side, rgba(235, 193, 109, .09) 45%, transparent); }
html[data-intensidad="suave"] .luz::before { background: radial-gradient(closest-side, rgba(235, 193, 109, .045) 45%, transparent); }
html[data-intensidad="fuerte"] .luz::before { background: radial-gradient(closest-side, rgba(235, 193, 109, .18) 45%, transparent); }
.luz::after { top: calc(33% - 240px); left: calc(25% - 240px); width: 980px; height: 780px; background: radial-gradient(closest-side, rgba(123, 208, 255, .04) 40%, transparent); }
/* La luz del borde de los paneles da una vuelta al cargar; con el mouse encima sigue girando */
.monitor, .panel-feed, .resumen { animation: giro-borde 2.6s cubic-bezier(.3, 0, .2, 1) 1; }
/* El destello de los botones dorados pasa una vez; luego, cada que pasas el mouse */
@keyframes destello-ya { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.btn-oro::after { animation: destello 6s ease-in-out 1; }
.heroe h1 .grad, .heroe-split h1 .grad { animation-iteration-count: 1; }
.pulso, .ping::after { animation-iteration-count: 3; }
.pokebola { animation-iteration-count: 10; }
@media (hover: hover) and (pointer: fine) {
  :is(.monitor, .panel-feed, .resumen):hover { animation: giro-borde 7s linear infinite; }
  .btn-oro:hover::after { animation: destello-ya .8s ease-out; }
}
/* Las tarjetas se inclinan solo con el mouse encima (antes cada una era una capa 3D todo el tiempo) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tarjeta, .pieza-caja { transform: none; }
  .tarjeta.inclinada, .pieza-caja.inclinada { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .tarjeta:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}
.holo { visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.tarjeta:hover .holo, .pieza-caja:hover .holo { visibility: visible; transition: opacity .35s, visibility 0s; }

/* ---------- Inicio como tienda en línea: buscador, atajos y carruseles con lo que hay ---------- */
/* Arriba lo justo (título, buscador y una fila de atajos chiquitos) y enseguida los productos, como las tiendas grandes.
   En celular los atajos y los carruseles se deslizan de lado; en compu los carruseles traen flechas. */
.inicio-cab { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding-block: 44px 12px; text-align: center; }
.inicio-cab h1 { font: 700 44px/52px var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--on); }
.inicio-cab h1 .grad { display: block; margin-top: 10px; font: 600 13px/20px var(--cuerpo); letter-spacing: .26em; }
.busca-inicio { width: min(640px, 100%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: var(--cristal); background-color: var(--cristal-base); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra); transition: border-color .2s; }
.busca-inicio:focus-within { border-color: rgba(197, 158, 78, .65); }
.busca-inicio > .icono { color: var(--primary); }
.busca-inicio input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: none; color: var(--on); font: 500 16px/22px var(--cuerpo); }
.busca-inicio input::placeholder { color: var(--sec); }
.busca-inicio .btn { padding: 11px 22px; }
.atajos { width: 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; }
.atajos::-webkit-scrollbar { display: none; }
.atajos a:first-child { margin-left: auto; }
.atajos a:last-child { margin-right: auto; }
.atajos a { flex: none; width: 100px; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 10px 4px; border-radius: 18px; color: var(--var);
  transition: background-color .2s, color .2s; }
.atajos a:hover { background: var(--cristal); color: var(--on); }
.atajos .cuadro-icono { width: 54px; height: 54px; background-color: var(--cristal-base); transition: border-color .2s, transform .2s; }
.atajos a:hover .cuadro-icono { border-color: rgba(197, 158, 78, .5); transform: translateY(-2px); }
.atajos b { font: 600 12px/15px var(--cuerpo); letter-spacing: .02em; text-align: center; }

.riel { padding-block: 30px 6px; }
.riel[hidden] { display: none; }
.riel-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 20px; margin-bottom: 14px; }
.riel-cab h2 { grid-area: 1 / 1; font: 700 22px/28px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--on); }
.riel-cab p { grid-area: 2 / 1; font-size: 14px; line-height: 20px; color: var(--texto); }
.riel-der { grid-area: 1 / 2 / 3; display: flex; align-items: center; gap: 14px; }
.riel-ver { display: inline-flex; align-items: baseline; gap: 6px; color: var(--primary); font: 700 12px/16px var(--display); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; }
.riel-ver b { font: 600 12px/16px var(--cuerpo); letter-spacing: 0; color: var(--sec); }
.riel-ver:hover { text-decoration: underline; text-underline-offset: 4px; }
.riel-flechas { display: none; gap: 8px; }
@media (hover: hover) and (pointer: fine) { .riel-flechas { display: flex; } }
.riel-flechas .redondo { width: 36px; height: 36px; cursor: pointer; }
.riel-flechas .redondo:disabled { opacity: .35; cursor: default; }
.riel-lista { display: grid; grid-auto-flow: column; grid-auto-columns: 214px; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 18px; }
.riel-lista::-webkit-scrollbar { display: none; }

/* Tarjeta chiquita de los carruseles: foto, nombre, precio y un botón */
.mini { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden;
  background: var(--cristal-oro), var(--cristal); background-color: var(--cristal-base); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra);
  transition: transform .2s, border-color .2s; }
.mini:hover { transform: translateY(-3px); border-color: rgba(197, 158, 78, .45); }
.mini-foto { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: var(--hundido); }
.mini-foto img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.mini-foto img.sin-foto { position: static; width: 56px; height: auto; padding: 0; opacity: .35; }
.mini-foto .esquina-sup { max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-foto .esquina-sup.ambar { color: #1b1305; background: var(--oro-boton); }
.mini-txt { flex: 1; display: grid; align-content: start; gap: 6px; padding: 12px 12px 14px; }
.mini-txt small { font: 700 10px/14px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-txt h3 { min-height: 38px; font: 600 14px/19px var(--cuerpo); color: var(--on); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-txt .nota { font-size: 12px; line-height: 16px; color: var(--texto); }
.mini-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.mini-pie b { font: 700 17px/22px var(--display); color: var(--on); white-space: nowrap; }
.mini-pie.cotizar { display: grid; gap: 8px; }
.mini-pie.cotizar small { color: var(--primary); }
.mini-pie.cotizar .mini-btn { width: 100%; }
.mini-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px;
  cursor: pointer; background: var(--oro-boton); color: #1b1305; font: 700 11px/1 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; transition: box-shadow .2s; }
.mini-btn:hover { box-shadow: 0 0 18px rgba(197, 158, 78, .45); }
.mini-btn .icono { font-size: 19px; }
.mini-btn.solo-icono { width: 40px; padding: 0; }
.mini .editar-btn { top: 8px; left: 8px; }
.riel-lista.arte { grid-auto-columns: 190px; }
.arte-tile { scroll-snap-align: start; display: grid; gap: 8px; color: var(--on); }
.arte-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: var(--hundido); border: 1px solid var(--cristal-borde); transition: transform .3s; }
.arte-tile:hover img { transform: translateY(-3px); }
.arte-tile small { font: 700 10px/14px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); }
.arte-tile b { font: 600 14px/19px var(--cuerpo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riel .aviso-preventa { margin: 0; }

/* Gradeo y decks: dos tarjetas anchas */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 30px 56px; }
.servicio { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 24px; color: var(--on);
  background: var(--cristal-oro), var(--cristal); background-color: var(--cristal-base); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra);
  transition: border-color .2s, transform .2s; }
.servicio:hover { border-color: rgba(197, 158, 78, .45); transform: translateY(-2px); }
.servicio .cuadro-icono { width: 52px; height: 52px; }
.servicio-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.servicio-txt small { font: 700 10px/14px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.servicio-txt b { font: 700 17px/23px var(--display); }
.servicio-txt > span { font-size: 14px; line-height: 20px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.servicio .flecha { color: var(--primary); transition: transform .2s; }
.servicio:hover .flecha { transform: translateX(3px); }

@media (max-width: 900px) {
  .servicios { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .inicio-cab { gap: 16px; padding-block: 24px 4px; }
  .inicio-cab h1 { font-size: 28px; line-height: 34px; letter-spacing: .05em; }
  .inicio-cab h1 .grad { font-size: 11px; line-height: 16px; letter-spacing: .18em; margin-top: 8px; }
  .busca-inicio { padding-left: 14px; }
  .busca-inicio .btn { padding: 10px 16px; }
  .atajos { width: calc(100% + 32px); margin-inline: -16px; padding-inline: 10px; gap: 2px; scroll-snap-type: x proximity; }
  .atajos a { width: 78px; padding: 6px 2px; scroll-snap-align: start; }
  .atajos .cuadro-icono { width: 50px; height: 50px; }
  .atajos b { font-size: 11px; line-height: 14px; }
  .riel { padding-block: 22px 2px; }
  .riel-cab { margin-bottom: 12px; align-items: center; }
  .riel-cab h2 { font-size: 18px; line-height: 24px; letter-spacing: .04em; }
  .riel-cab p { grid-column: 1 / -1; }
  .riel-der { grid-row: 1; }
  .riel-cab p { font-size: 13px; line-height: 18px; }
  .riel-der { gap: 10px; }
  .riel-lista { grid-auto-columns: calc((100% - 12px) / 2.25); gap: 12px; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .riel-lista.arte { grid-auto-columns: calc((100% - 12px) / 2.25); }
  .mini { border-radius: 18px; }
  .mini-foto img { padding: 10px; }
  .mini-txt { padding: 10px 10px 12px; }
  .mini-txt h3 { font-size: 13px; line-height: 18px; min-height: 36px; }
  .mini-pie b { font-size: 15px; }
  .mini-btn { min-width: 36px; height: 36px; padding: 0 10px; }
  .mini-btn.solo-icono { width: 36px; }
  .servicios { padding-block: 22px 40px; gap: 12px; }
  .servicio { padding: 16px; gap: 12px; }
  .servicio .cuadro-icono { width: 44px; height: 44px; }
  .servicio-txt b { font-size: 15px; line-height: 20px; }
}
.riel-flechas[hidden] { display: none; }

/* Preventa: sus fechas en la tarjeta (sale, llega y hasta cuándo se liquida) */
.pv-fechas { list-style: none; margin: 12px 0 0; padding: 10px 12px; display: grid; gap: 6px; border-radius: 14px; background: var(--hundido);
  border: 1px solid var(--cristal-borde); font-size: 13px; line-height: 18px; color: var(--texto); }
.pv-fechas li { display: flex; align-items: center; gap: 8px; }
.pv-fechas li b { margin-left: auto; color: var(--on); font-weight: 700; white-space: nowrap; }
.pv-fechas .icono { font-size: 16px; color: var(--primary); }
.c-nota.letrero { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--on); font-weight: 600; }
/* Pocas preventas (1 o 2): tarjetas grandes y anchas en lugar de la rejilla o del carrusel, para que no se vea vacío. */
.pv-destacadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pv-destacadas.una { grid-template-columns: minmax(0, 1fr); }
.riel-lista.pv-destacadas { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
.tarjeta.pv-grande { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; gap: 20px; padding: 18px; }
.pv-destacadas.una .tarjeta.pv-grande { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding: 24px; }
.pv-destacadas.una .tarjeta.pv-grande .pv-foto { min-height: 320px; }
.tarjeta.pv-grande .pv-foto { aspect-ratio: auto; min-height: 260px; margin: 0; }   /* toma la altura del texto */
.pv-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv-sello { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font: 700 11px/16px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pv-sello .icono { font-size: 15px; }
.tarjeta.pv-grande h3 { font: 700 clamp(20px, 2.1vw, 28px)/1.2 var(--display); letter-spacing: .01em; color: var(--on); overflow-wrap: anywhere; }
.pv-pie { margin-top: auto; padding-top: 12px; }
@media (max-width: 760px) {
  .pv-destacadas, .riel-lista.pv-destacadas { grid-template-columns: minmax(0, 1fr); width: auto; margin-inline: 0; padding-inline: 0; }
  .tarjeta.pv-grande, .pv-destacadas.una .tarjeta.pv-grande { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .tarjeta.pv-grande .pv-foto, .pv-destacadas.una .tarjeta.pv-grande .pv-foto { aspect-ratio: 4 / 3; min-height: 0; }
}
.ver-mas { display: flex; justify-content: center; margin-top: 28px; }
.ver-mas:has(> [hidden]:only-child) { display: none; }

/* Pokémon animados: en cada carrusel del inicio, en Gradeo y Decks, y Delibird con su saco en el carrito */
.riel-cab h2 { display: flex; align-items: center; gap: 10px; }
.riel-cab h2 .sprite { height: 40px; margin: -8px 0; }
.servicio .cuadro-icono .sprite { height: 40px; }
.servicio .cuadro-icono .deck-top { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.carrito-btn .carrito-poke { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.carrito-btn:hover .carrito-poke { transform: translateY(-2px); }
.carrito-cab h2 { display: flex; align-items: center; gap: 8px; }
.carrito-cab h2 .sprite { height: 38px; margin: -8px 0; }
@media (max-width: 600px) { .riel-cab h2 .sprite { height: 32px; } }
@media (max-width: 600px) {
  .riel-flechas { display: none; }
  .riel-cab h2 { font-size: 17px; gap: 8px; }
  .riel-cab h2 .sprite { height: 30px; margin: -6px 0; }
}
/* Para que se entienda que Delibird es el carrito: una bolsita de compras en la esquina (y el número de piezas arriba) */
.carrito-btn { overflow: visible; }
.carrito-btn .carrito-bolsa { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--oro-boton); color: #1b1305; font-size: 13px; box-shadow: 0 0 0 2px var(--fondo); pointer-events: none; }
/* Resultados del buscador: en celular el título va completo y el link «todas las cartas» abajo */
@media (max-width: 600px) {
  .resultados .riel-cab h2 { grid-column: 1 / -1; }
  .resultados .riel-der { grid-row: 3; grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Modo edición: lo oculto, dejar presionado y la ficha ---------- */
.tarjeta.oculto, .mini.oculto { opacity: .62; border-style: dashed; }
.tarjeta.oculto:hover, .mini.oculto:hover { opacity: .95; }
.oculto-chip { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: rgba(10, 13, 20, .9); color: #ebc16d;
  border: 1px solid rgba(197, 158, 78, .6); font: 700 10px/14px var(--display); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
html[data-editando="1"] :is(.tarjeta, .mini, .pieza-arte) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.presionando { transform: scale(.97) !important; transition: transform .5s ease !important; }
.ficha-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ficha-cab img { flex: none; width: 84px; height: 84px; padding: 6px; border-radius: 14px; object-fit: contain; background: var(--hundido); }
.ficha-cab b { display: block; font: 700 16px/22px var(--display); color: var(--on); }
.ficha-cab small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--sec); }
.ficha-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; margin: 0; padding: 14px; border-radius: 16px; background: var(--hundido);
  border: 1px solid var(--cristal-borde); font-size: 14px; line-height: 19px; }
.ficha-datos dt { color: var(--sec); }
.ficha-datos dd { margin: 0; color: var(--on); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ficha-compras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ficha-compras li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--cristal-borde); }
.ficha-compras span { color: var(--sec); text-align: right; }
.ficha-botones { display: grid; gap: 10px; margin-top: 18px; justify-items: center; }
.ficha-botones .ancho { width: 100%; }

/* Pie: boletín (promos y novedades por correo) */
.pie-boletin { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 32px; align-items: center; margin-top: 32px; padding: 20px 22px;
  border-radius: 20px; background: var(--cont); border: 1px solid var(--linea); }
.pie-boletin .pie-tit { margin-bottom: 6px; }
.pie-boletin p { margin: 0; font-size: 13px; line-height: 20px; color: var(--sec); }
.pie-boletin-form { display: grid; gap: 10px; min-width: 0; }
.pie-boletin-campos { display: flex; gap: 8px; min-width: 0; }
.pie-boletin-campos input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 12px; background: var(--hundido, var(--lowest)); color: var(--on); padding: 11px 14px; font: 400 15px/22px var(--cuerpo); }
.pie-boletin-campos input:focus { outline: 2px solid rgba(235, 193, 109, .5); }
.pie-boletin-campos .btn { flex: none; padding-inline: 20px; }
.pie-acepto { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sec); cursor: pointer; }
.pie-acepto input { width: 16px; height: 16px; accent-color: var(--pcont); flex: none; }
.pie-acepto a { color: var(--primary); }
.pie-boletin-msg { font-size: 13px !important; color: var(--esmeralda, #34d399) !important; }
.pie-boletin-msg.mal { color: var(--error, #f87171) !important; }
@media (max-width: 760px) { .pie-boletin { grid-template-columns: 1fr; padding: 18px 16px; } }
/* Pedido: casilla del boletín */
.c-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sec); cursor: pointer; margin-top: -4px; }
.c-check input { width: 17px; height: 17px; accent-color: var(--pcont); flex: none; }

/* ---------- Mi cuenta ---------- */
/* Klefki (el de las llaves) junto al carrito, con un muñequito en la esquina para que se entienda que es tu cuenta, igual que
   Delibird con su bolsita. Con la cuenta abierta el muñequito se pone verde. */
.cuenta-btn { overflow: visible; }
.cuenta-btn .cuenta-poke { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; pointer-events: none; transition: transform .2s; }
.cuenta-btn:hover .cuenta-poke { transform: translateY(-2px); }
.cuenta-btn .cuenta-icono { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--oro-boton); color: #1b1305; font-size: 13px; box-shadow: 0 0 0 2px var(--fondo); pointer-events: none; }
.cuenta-btn.dentro .cuenta-icono { background: var(--esmeralda); color: #04281b; }
.cuenta-btn[aria-current="page"] { border-color: rgba(197, 158, 78, .6); }
.cuenta { max-width: 760px; margin-inline: auto; padding-block: 20px 80px; }
.cuenta-caja, .cuenta-sec { padding: 22px; border-radius: 20px; background: var(--cristal-oro), var(--cristal); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra); }
.cuenta-caja { display: grid; gap: 18px; max-width: 520px; }
.cuenta-perfil { display: grid; gap: 18px; }
.cuenta-cab { display: flex; align-items: center; gap: 14px; }
.cuenta-cab > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cuenta-cab h2 { font: 700 22px/28px var(--display); color: var(--on); outline: none; }
.cuenta-cab p { color: var(--sec); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.cuenta-cab .sprite.grande { height: 72px; }
.cuenta-sec { display: grid; gap: 14px; }
.cuenta-sec h3 { display: flex; align-items: center; gap: 8px; font: 700 13px/18px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--on); }
.cuenta-sec h3 .icono { color: var(--primary); }
.cuenta-sec .vacio { padding: 18px 16px; border-radius: 16px; }
.cuenta-sec .vacio a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.cuenta-lista { display: grid; gap: 10px; }
.cuenta-pedido { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--hundido); border: 1px solid var(--linea); min-width: 0; }
.cp-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-cab b { font: 700 14px/20px var(--display); letter-spacing: .04em; color: var(--on); }
.cp-estado { padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; background: var(--high); color: var(--var); white-space: nowrap; }
.cp-estado.pagado, .cp-estado.conseguido, .cp-estado.entregado { background: rgba(52, 211, 153, .14); color: var(--esmeralda); }
.cp-estado.pendiente, .cp-estado.por_liquidar, .cp-estado.nuevo, .cp-estado.contactado, .cp-estado.en_proceso { background: rgba(235, 193, 109, .14); color: var(--primary); }
.cp-estado.cancelado { background: rgba(255, 180, 171, .12); color: var(--error); }
.cp-estado.listo, .cp-estado.enviado { background: rgba(125, 180, 255, .14); color: #8ec5ff; }
html[data-tema="dia"] .cp-estado.listo, html[data-tema="dia"] .cp-estado.enviado { color: #1d5fae; }
/* Cómo va el pedido: 4 pasos con su línea (21 oct 2026) */
.cuenta-pedido { grid-template-columns: minmax(0, 1fr); }
.cuenta-pedido .cp-pasos { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.cuenta-pedido .cp-pasos li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 0 2px; }
.cuenta-pedido .cp-pasos li::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--linea); }
.cuenta-pedido .cp-pasos li:first-child::before { display: none; }
.cuenta-pedido .cp-pasos li.hecho::before, .cuenta-pedido .cp-pasos li.ahora::before { background: var(--primary); }
.cuenta-pedido .cp-pasos .punto { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--hundido); border: 2px solid var(--linea); z-index: 1; }
.cuenta-pedido .cp-pasos li.hecho .punto { background: var(--primary); border-color: var(--primary); }
.cuenta-pedido .cp-pasos li.ahora .punto { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.cuenta-pedido .cp-pasos small { font-size: 11px; line-height: 14px; overflow-wrap: normal; }
.cuenta-pedido .cp-pasos li.hecho small, .cuenta-pedido .cp-pasos li.ahora small { color: var(--on); font-weight: 600; }
.cp-guia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--high); }
.cp-guia > .icono { color: var(--primary); }
.cp-guia-txt { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; font-size: 13px; line-height: 19px; }
.cp-guia-txt > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.cp-guia-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-guia-botones .btn { padding: 8px 14px; font-size: 13px; }

.cuenta-pedido small { font-size: 12px; line-height: 18px; color: var(--sec); overflow-wrap: anywhere; }
.cuenta-pedido ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.cuenta-pedido li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 19px; color: var(--var); }
.cuenta-pedido li span { min-width: 0; overflow-wrap: anywhere; }
.cuenta-pedido li b { color: var(--on); font-weight: 600; white-space: nowrap; }
.cuenta-pedido p { font-size: 13px; line-height: 19px; color: var(--var); overflow-wrap: anywhere; }
.cp-total { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--linea); font-size: 14px; }
.cp-total b { color: var(--primary); }
.cuenta-pedido .cp-nota { color: var(--primary); }
.cuenta-num { font: 700 26px/32px var(--display) !important; letter-spacing: .35em; text-align: center; }
.cuenta-otra { display: flex; flex-wrap: wrap; gap: 8px; }
.cuenta-otra .btn { flex: 1 1 auto; padding: 12px 16px; }
.cuenta-borrar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 4px; }
.cuenta-borrar small { font-size: 12px; line-height: 18px; color: var(--sec); }
.cuenta-borrar .btn { padding: 10px 16px; }
.cuenta-borrar .btn.armado { border-color: var(--error); color: var(--error); }
.cuenta-ok { color: var(--esmeralda); font-size: 13px; }
.cuenta-ok .icono { color: var(--esmeralda); }
.cuenta-cab .btn { padding: 10px 16px; }
/* Mi resguardo: los días que le quedan, en grande */
.cr-dias { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 19px; color: var(--var); }
.cr-dias b { font: 700 30px/34px var(--display); color: var(--esmeralda); }
.cr-dias.ojo b { color: var(--primary); }
.cr-dias.rojo b, .cr-dias.rojo span { color: var(--error); }
.cuenta-resguardo > .btn { justify-self: start; }
/* Por liquidar (21 oct 2026): cómo pagar lo que falta, desde su cuenta */
.cl-pagar { display: grid; gap: 8px; margin-top: 6px; }
.cuenta-liquidar .cp-cab { flex-wrap: wrap; }
.cuenta-liquidar .cp-estado { white-space: normal; }
.cl-pagar .btn { white-space: normal; text-align: center; }
.cl-transfer { border-radius: 14px; border: 1px solid var(--linea); background: var(--cristal); }
.cl-transfer summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font: 600 14px/20px var(--display); color: var(--on); list-style: none; }
.cl-transfer summary::-webkit-details-marker { display: none; }
.cl-transfer summary .icono { color: var(--primary); }
.cl-transfer[open] summary { border-bottom: 1px dashed var(--linea); }
.cl-transfer .c-cuenta { border: 0; border-radius: 0 0 14px 14px; }
.cuenta-porliquidar > .letrero { margin: 0; }
.cr-ayuda { font-size: 12px; line-height: 18px; color: var(--sec); }
@media (max-width: 600px) {
  .cuenta-resguardo > .btn { justify-self: stretch; }
  .cuenta-caja, .cuenta-sec { padding: 18px 16px; }
  .cuenta-cab { flex-wrap: wrap; }
  .cuenta-cab .sprite.grande { height: 56px; }
}
/* Correo con error de dedo: «¿Quisiste decir…?» con su botón */
.c-sugerencia { display: block; font-size: 12px; line-height: 18px; color: var(--primary); }
.c-sugerencia button, .aviso-form .c-usar { margin-left: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(197, 158, 78, .5); background: transparent;
  color: var(--primary); font: 600 12px/18px var(--cuerpo); cursor: pointer; }
.pie-temas { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* Celulares chicos: con el carrito y Klefki arriba, Espeon/Umbreon se va al menú y los botones se achican un poco */
.menu-movil .menu-tema { display: none; }
.menu-tema-poke { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; flex: none; }
.menu-tema .tema-modo { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #232a4d; color: #ffe39a; font-size: 15px; }
html[data-tema="dia"] .menu-tema .tema-modo { background: #ffcf3f; color: #5b3a00; }
.menu-tema .menu-tema-poke.espeon, html[data-tema="dia"] .menu-tema .menu-tema-poke.umbreon { display: none; }
html[data-tema="dia"] .menu-tema .menu-tema-poke.espeon { display: block; }
/* Celulares (22 oct 2026, el dueño: «en algunos teléfonos no se ve el Umbreon y el Espeon»): arriba siempre van el carrito, Klefki,
   Espeon/Umbreon y el menú; el WhatsApp de arriba pasa al menú. */
.menu-movil .menu-wa { display: none; }
.menu-movil .menu-wa svg { width: 20px; height: 20px; fill: var(--primary); flex: none; }
@media (max-width: 420px) {
  .con-menu-wa .nav-der > [data-wa] { display: none; }
  .menu-movil .menu-wa { display: flex; }
}
@media (max-width: 340px) {
  .nav .contenedor { gap: 6px; }
  .nav-der { gap: 4px; }
  .nav-der .redondo, .nav-der .carrito-btn .carrito-poke, .nav-der .cuenta-btn .cuenta-poke { width: 32px; height: 32px; }
  .tema-btn img { width: 32px; height: 32px; }
  .marca-iso { width: 22px; height: 26px; }
  .marca-txt b { font-size: 14px; letter-spacing: .06em; }
  .marca-txt small { font-size: 9px; }
}
@media (max-width: 400px) {
  .nav .contenedor { gap: 10px; }
  .nav-der { gap: 6px; }
  .nav-der .redondo { width: 36px; height: 36px; }
  .nav-der .carrito-btn .carrito-poke, .nav-der .cuenta-btn .cuenta-poke { width: 36px; height: 36px; }
  .marca-txt small { font-size: 10px; letter-spacing: .06em; }
}

/* ---------- Página de cada producto (se abre al tocar la foto, el nombre o «Detalles») ---------- */
.ver-producto { color: inherit; }
.ver-producto:not(.foto):hover { color: var(--primary); }
/* El link de la foto llena su ventana: la foto se mide contra ella y no se recorta. */
.ver-producto.foto { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.pv-foto .ver-producto.foto { padding: 12px; }
.vista-producto { position: fixed; inset: 0; width: 100vw; height: 100vh; height: var(--alto-real, 100vh); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--on); overflow: hidden; }
.vista-producto::backdrop { background: rgba(6, 8, 13, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vp-marco { position: relative; margin: 4vh auto; margin: 4dvh auto; width: min(1040px, calc(100% - 48px)); max-height: 92vh; max-height: calc(var(--alto-real, 100vh) * .92);
  max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border-radius: 28px; background: var(--panel-solido); border: 1px solid var(--cristal-borde); box-shadow: var(--sombra-2xl); padding: 0 28px 28px; }
.vista-producto[open] .vp-marco { animation: vp-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes vp-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.vp-cab { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -28px; padding: 16px 28px 12px;
  background: linear-gradient(var(--panel-solido) 70%, transparent); }
.vp-ruta { font: 600 11px/16px var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); }
.vp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.vp-foto { position: sticky; top: 64px; }
.vp-foto .ventana { aspect-ratio: 1; border-radius: 24px; background: var(--hundido); border: 1px solid var(--cristal-borde); }
.vp-foto .ventana::after { display: none; }
.vp-foto .ventana img { position: absolute; inset: 0; padding: 28px; }
.vp-foto .ventana img.sin-foto { position: static; width: 96px; height: auto; padding: 0; opacity: .35; }
.vp-info { display: grid; gap: 14px; min-width: 0; }
.vp-sello { font: 600 11px/16px var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.vp-info h2 { font: 700 30px/1.15 var(--display); letter-spacing: -.02em; color: var(--on); overflow-wrap: anywhere; }
.vp-info > .verificado { font-size: 11px; }
.vp-precio { display: grid; gap: 2px; padding: 4px 0 2px; }
.vp-precio b { font: 800 34px/1.1 var(--display); letter-spacing: -.02em; color: var(--on); }
.vp-precio b span { font-size: 14px; font-weight: 600; color: var(--sec); }
.vp-precio small { font-size: 13px; color: var(--primary); }
.vp-compra { display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: var(--cristal); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra); }
.vp-cant-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.vp-etq { font: 600 11px/16px var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); }
.vp-cant-fila .c-cant { margin: 0; }
.vp-cant-fila small { font-size: 12px; color: var(--sec); }
.vp-total { margin-left: auto; font: 700 18px/1 var(--display); color: var(--primary); }
.vp-ya { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--esmeralda); }
.vp-ya .icono { font-size: 18px; }
.vp-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vp-botones .btn { width: 100%; min-width: 0; padding: 14px 12px; font-size: 12px; letter-spacing: .08em; white-space: normal; text-align: center; }
.vp-botones .btn:only-child { grid-column: 1 / -1; }
.vp-preguntar { justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sec); text-decoration: underline; text-underline-offset: 3px; }
.vp-preguntar:hover { color: var(--primary); }
.vp-preguntar .icono { font-size: 16px; color: var(--primary); }
.vp-bloque { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.vp-bloque h3 { font: 700 11px/16px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }
.vp-bloque p { font-size: 14px; line-height: 22px; color: var(--texto); }
.vp-incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vp-incluye li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px; line-height: 21px; color: var(--on); }
.vp-incluye b { justify-self: start; padding: 1px 8px; border-radius: 999px; font: 700 12px/18px var(--display); color: var(--primary); background: var(--hundido); border: 1px solid rgba(197, 158, 78, .35); }
.vp-incluye b.punto { width: 8px; height: 8px; padding: 0; margin: 0 0 0 18px; border: 0; background: var(--primary); align-self: center; }
.vp-mas { display: grid; gap: 14px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--linea); }
.vp-mas h3 { font: 700 18px/24px var(--display); color: var(--on); }
.vp-mas .riel-lista { grid-auto-columns: 190px; padding-bottom: 4px; }
@media (max-width: 760px) {
  .vp-marco { margin: 0; width: 100%; height: 100vh; height: var(--alto-real, 100vh); height: 100dvh; max-height: none; border-radius: 0; border: 0; padding: 0 16px 24px; }
  .vp-cab { margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .vp-grid { grid-template-columns: 1fr; gap: 18px; }
  .vp-foto { position: static; }
  .vp-foto .ventana { aspect-ratio: 4 / 3; }
  .vp-foto .ventana img { padding: 18px; }
  .vp-info h2 { font-size: 24px; }
  .vp-precio b { font-size: 28px; }
  /* La caja de comprar se queda abajo a la mano mientras no se pase de ella (como en Amazon). */
  .vp-compra { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; border-radius: 22px 22px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--panel-solido); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .55); }
  .vp-mas .riel-lista { grid-auto-columns: 158px; }
  .vp-botones { gap: 8px; }
  .vp-botones .btn { padding: 13px 8px; font-size: 11px; letter-spacing: .05em; }
  .vp-botones .btn .icono { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vista-producto[open] .vp-marco { animation: none; } }

/* Compartir (página del producto y pie) */
.vp-compartir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.vp-red { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 600 13px/18px var(--cuerpo);
  color: var(--on); background: var(--cristal); border: 1px solid var(--cristal-borde); }
.vp-red:hover { border-color: rgba(197, 158, 78, .5); }
.vp-red svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.vp-red .icono { font-size: 18px; color: var(--primary); }
.pie-compartir { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 12px/16px var(--cuerpo); color: var(--sec); }
.pie-compartir a, .pie-compartir button { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cristal-borde);
  background: var(--cristal); color: var(--on); cursor: pointer; padding: 0; }
.pie-compartir svg { width: 17px; height: 17px; fill: currentColor; }

/* Lo que aún no sale (Pokémon Center, japonés, chino): sin cotizar, con su aviso */
.aviso-salida { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; font-size: 12px; line-height: 17px; color: var(--sec); }
.aviso-salida .icono { font-size: 16px; color: var(--primary); }
.mini .nota.aun-no-sale { display: block; margin-top: 4px; font-size: 11px; line-height: 15px; color: var(--primary); }

/* Guía para compartir en historia de Instagram (el link va con el sticker «Enlace») */
.guia-ig { width: min(420px, calc(100% - 32px)); padding: 22px; border: 1px solid var(--cristal-borde); border-radius: 24px; background: var(--panel-solido);
  color: var(--on); box-shadow: var(--sombra-2xl); }
.guia-ig::backdrop { background: rgba(6, 8, 13, .6); }
.guia-ig h3 { display: flex; align-items: center; gap: 10px; font: 700 19px/1.3 var(--display); }
.guia-ig h3 svg { width: 24px; height: 24px; fill: var(--primary); flex: none; }
.guia-ig ol { margin: 14px 0 18px; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--texto); }
.guia-ig ol b { color: var(--on); }
.guia-ig-botones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.guia-ig-botones .btn { width: 100%; padding: 13px 10px; font-size: 12px; letter-spacing: .06em; }
.guia-ig-botones svg { width: 17px; height: 17px; fill: currentColor; }

/* Pagos: efectivo y retiro sin tarjeta primero */
.c-pref { margin-bottom: 4px; }
.c-pref b { color: var(--primary); }
.c-pasos { margin: 8px 0 6px; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 19px; color: var(--texto); }
.c-pasos b { color: var(--on); }

/* Singles en celular: el precio arriba y «Claim» abajo a todo lo ancho (lado a lado no cabían y el botón se salía de la tarjeta). */
.opcion-claim > div { min-width: 0; }
@media (max-width: 760px) {
  .opcion-claim { flex-direction: column; align-items: stretch; gap: 8px; }
  .opcion-claim .btn-tarjeta { width: 100%; padding: 9px 8px; letter-spacing: .08em; }
}

/* ---------- Promos y ambientación de temporada (21 oct 2026) ----------
   La promo (panel › Promos): el precio normal tachado y su sello en la foto (sin decir cuánto se ahorra). La ambientación (panel › Tienda ›
   Diseño): Halloween con la escena del panteón en Inicio (Umbreon y Espeon en pedestales de piedra, como las estatuas de la
   colección 2026 del Pokémon Center), tapiz de fantasmas en naranja calabaza y algunos Pokémon de los títulos disfrazados.
   Sin animaciones de CSS: solo se mueven los sprites (GIF), como en el resto de la página. */
:root { --calabaza: #e8833a; --calabaza-claro: #f6a65f; --noche-hw: #1b1030; }
.antes { font-size: .7em; font-weight: 500; color: var(--sec); text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: 2px; letter-spacing: 0; }
.sello-promo { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 3px 12px 3px 8px; border-radius: 999px;
  background: linear-gradient(180deg, #f5a04f, #d8672a); color: #2a1405; font: 800 11px/18px var(--display); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(232, 131, 58, .7); pointer-events: none; }
:is(.mini-foto, .ventana) .sello-promo img { position: static; inset: auto; width: 30px; height: 30px; padding: 0; margin: -8px -2px -8px -8px; object-fit: contain;
  image-rendering: pixelated; transform: none; transition: none; }
/* El sello va abajo de la foto: arriba a la izquierda ya va «Sale en…» o el estado. */
.sello-promo { top: auto; bottom: 10px; }
.mini-foto .sello-promo { bottom: 8px; right: 8px; padding: 2px 10px 2px 6px; font-size: 10px; }
/* En las tarjetas chicas el normal tachado va arriba del de promo, para que quepa el botón. */
.mini-pie b .antes { display: block; font-size: 12px; line-height: 14px; margin: 0; }

/* La barrita de la promo arriba de las páginas (no en Inicio: ahí está la escena). */
.barra-promo { display: block; background: linear-gradient(90deg, #26143c, #45224f 55%, #6a3122); color: #fbe9d6; border-bottom: 1px solid rgba(232, 131, 58, .3); }
.barra-promo > .contenedor { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; font-size: 14px; line-height: 20px; text-align: center; }
.barra-promo b { font: 700 13px/18px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--calabaza-claro); white-space: nowrap; }
.barra-promo .sprite { height: 40px; margin: -8px -4px -8px 0; }
.barra-promo .icono { color: var(--calabaza-claro); }
.bp-txt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px; }
.barra-promo:hover .bp-txt span { text-decoration: underline; text-underline-offset: 3px; }
html[data-tema="dia"] .barra-promo { background: linear-gradient(90deg, #efe2fb, #fbe3cf); color: #2a1b3a; border-bottom-color: rgba(154, 69, 16, .2); }
html[data-tema="dia"] .barra-promo b, html[data-tema="dia"] .barra-promo .icono { color: #9a4510; }
@media (max-width: 600px) { .barra-promo > .contenedor { font-size: 13px; line-height: 18px; gap: 8px; padding-block: 6px; } .bp-txt { flex-direction: column; align-items: flex-start; text-align: left; } }

/* Carrusel de promos (Inicio) */
.riel-promos .riel-cab h2 .sprite { height: 64px; margin: -20px -10px -18px -6px; }
img.sprite[src$="/711.png"] { height: 62px; margin: -14px -10px -12px -12px; }

/* Halloween dentro de la página, sin caja (21 oct 2026: «integrarlo más a la página, no como un cuadro ahí pegado»). La parte de
   arriba de cada página (.luz) es el panteón: luna, Zubat y Gastly en el cielo; abajo el suelo con lápidas, y Umbreon y Espeon en
   pedestales de piedra agrietada como guardianes a los lados (como las estatuas de la colección 2026 del Pokémon Center), Gengar
   asomándose detrás de una lápida, Pumpkaboo, Mimikyu y dulces. El pie trae su fila de lápidas. Los sprites van a tamaño exacto
   (1× o 2×) para que el pixel art no se deforme. */
html[data-temporada="halloween"] .luz { padding-bottom: 168px;
  background: linear-gradient(180deg, rgba(60, 30, 100, .5), rgba(34, 16, 60, .32) 55%, rgba(34, 16, 60, 0)); }
html[data-temporada="halloween"][data-tema="dia"] .luz { background: linear-gradient(180deg, rgba(126, 87, 194, .2), rgba(242, 166, 94, .16) 62%, rgba(242, 166, 94, 0)); }
.hw-capa { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hw-pk, .hw-dulce { position: absolute; width: auto; max-width: none; image-rendering: pixelated; pointer-events: none; }
.hw-luna { position: absolute; top: 30px; right: 6%; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8e1, #f3dc98 58%, #d8b864); box-shadow: 0 0 0 14px rgba(243, 220, 152, .06), 0 0 0 30px rgba(243, 220, 152, .03); }
.hw-luna::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: 48%; top: 52%; background: rgba(190, 158, 84, .35);
  box-shadow: -28px -18px 0 -5px rgba(190, 158, 84, .3), 10px -30px 0 -7px rgba(190, 158, 84, .25); }
.hw-zubat { height: 46px; }
.hw-capa .z1 { top: 46px; right: calc(6% + 128px); }
.hw-capa .z2 { top: 132px; right: calc(6% + 52px); transform: scaleX(-1); }
/* Gastly flota sobre el suelo, donde no tapa títulos en ninguna página. */
.hw-gastly { height: 75px; bottom: 112px; left: 27%; }
/* El suelo: lomas moradas que se funden con la página. */
.hw-suelo { position: absolute; left: -2%; right: -2%; bottom: 0; height: 84px; }
.hw-suelo::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 0 0 / 34px 34px 0 0; background: linear-gradient(180deg, #2b1839, #190d23 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
html[data-tema="dia"] .hw-suelo::before { background: linear-gradient(180deg, #5e4b7a, #47375f 70%); }
.hw-lapida { position: absolute; bottom: 44px; width: 46px; height: 62px; border-radius: 23px 23px 5px 5px;
  background: linear-gradient(90deg, #8a8197, #6b6379 70%, #5a5268); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), 0 5px 0 #23172d; }
.hw-lapida::before { content: ""; position: absolute; left: 50%; top: 30%; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 50%;
  border: 2px solid rgba(25, 14, 34, .45); background: linear-gradient(180deg, transparent 44%, rgba(25, 14, 34, .45) 44% 56%, transparent 56%); }
/* Lápidas chicas al fondo, más oscuras: dan profundidad al panteón. */
.hw-lapida.chica { width: 26px; height: 34px; bottom: 58px; border-radius: 13px 13px 3px 3px; z-index: 0; filter: brightness(.72) saturate(.8); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.hw-lapida.chica::before { width: 10px; height: 10px; border-width: 1.5px; }
.hw-suelo .s1 { left: 20%; } .hw-suelo .s2 { left: 36%; bottom: 62px; height: 30px; } .hw-suelo .s3 { left: 61%; bottom: 62px; } .hw-suelo .s4 { left: 76%; height: 30px; }
.hw-pedestal { position: absolute; bottom: 38px; z-index: 3; width: 100px; height: 42px; border-radius: 4px 4px 3px 3px;
  background: linear-gradient(90deg, #a79fb2, #8a8297 55%, #736b80); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), 0 6px 0 #23172d; }
.hw-pedestal::before { content: ""; position: absolute; left: -8px; right: -8px; top: -10px; height: 11px; border-radius: 4px; background: linear-gradient(90deg, #bdb5c6, #9d95aa); }
.hw-pedestal::after { content: ""; position: absolute; left: 34%; top: 2px; width: 14px; height: 74%; background: rgba(44, 32, 56, .55);
  clip-path: polygon(42% 0, 62% 0, 46% 34%, 74% 56%, 52% 100%, 36% 100%, 54% 60%, 26% 36%); }
.hw-pedestal .hw-pk { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.hw-umbreon { height: 102px; }   /* 2× */
.hw-espeon { height: 116px; }    /* 2× */
.hw-suelo .l1 { left: 4%; }
.hw-suelo .p1 { left: 9%; }
.hw-litwick { height: 44px; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); }
.hw-pumpkaboo { height: 96px; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; }
.hw-dulce { height: 30px; z-index: 2; }
.hw-suelo .d1 { bottom: 26px; left: calc(50% - 80px); transform: rotate(-20deg); }
.hw-suelo .d2 { bottom: 20px; left: calc(50% + 52px); transform: rotate(14deg); }
.hw-suelo .d3 { bottom: 24px; right: calc(15% + 70px); }
.hw-gengar { height: 63px; bottom: 92px; right: calc(15% + 2px); z-index: 1; }
.hw-suelo .l2 { right: 15%; z-index: 2; }
.hw-suelo .p2 { right: 7%; }
.hw-mimikyu { height: 48px; bottom: 30px; right: 2.5%; z-index: 4; }
/* En Inicio, la línea de la promo debajo del buscador. */
.hw-promo { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; padding: 8px 18px 8px 10px; border-radius: 999px;
  background: rgba(232, 131, 58, .14); border: 1px solid rgba(232, 131, 58, .35); color: var(--on); font-size: 14px; line-height: 20px; }
.hw-promo b { font: 700 13px/18px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--calabaza-claro); }
.hw-promo .icono { color: var(--calabaza-claro); font-size: 18px; }
.hw-promo-sprite { width: 40px; height: 40px; margin: -10px -6px -10px -4px; image-rendering: pixelated; }
.hw-promo:hover { background: rgba(232, 131, 58, .22); }
html[data-tema="dia"] .hw-promo b, html[data-tema="dia"] .hw-promo .icono { color: #9a4510; }
/* El pie: una fila de lápidas arriba, con Gengar, Gourgeist y Drifloon. */
html[data-temporada="halloween"] .pie { padding-top: 120px; }
.hw-pie { position: absolute; left: 0; right: 0; top: 0; height: 100px; pointer-events: none; }
.hw-pie::before { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 40px; border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  background: linear-gradient(180deg, #2b1839, #190d23); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
html[data-tema="dia"] .hw-pie::before { background: linear-gradient(180deg, #5e4b7a, #47375f); }
.hw-pie .hw-lapida { bottom: 18px; width: 36px; height: 48px; border-radius: 18px 18px 4px 4px; z-index: 1; }
.hw-pie .hw-lapida::before { width: 14px; height: 14px; }
.hw-pie .a { left: 6%; } .hw-pie .b { left: 31%; height: 40px; } .hw-pie .c { left: 63%; } .hw-pie .d { right: 6%; height: 42px; }
.hw-pie .hw-gengar { bottom: 40px; right: auto; left: calc(31% - 18px); z-index: 0; }
.hw-pie .hw-gourgeist { height: 96px; bottom: -4px; left: 46%; z-index: 1; }
.hw-pie .hw-drifloon { height: 69px; top: 2px; right: 18%; }
@media (max-width: 1100px) { .hw-suelo .s1, .hw-suelo .s4 { display: none; } }
@media (max-width: 760px) {
  html[data-temporada="halloween"] .luz { padding-bottom: 176px; }
  .hw-luna { top: 12px; right: -18px; width: 72px; height: 72px; opacity: .75; }
  .hw-capa .z1 { top: auto; bottom: 150px; right: auto; left: 36%; }
  .hw-capa .z2, .hw-gastly, .hw-mimikyu, .hw-suelo .d3 { display: none; }
  .hw-suelo .l1 { left: auto; right: calc(2% + 112px); }
  .hw-suelo .s2 { left: 30%; } .hw-suelo .s3 { left: 58%; }
  .hw-litwick { display: none; }
  .hw-suelo .p1 { left: 3%; }
  .hw-suelo .p2 { right: 3%; }
  .hw-gengar { bottom: 92px; right: calc(2% + 108px); }
  .hw-suelo .l2 { display: none; }
  .hw-pumpkaboo { left: 40%; }
  .hw-suelo .d1 { left: calc(40% - 60px); }
  .hw-suelo .d2 { left: calc(40% + 40px); }
  .hw-promo { font-size: 13px; padding-inline: 8px 14px; }
  .hw-pie .b, .hw-pie .hw-gengar { display: none; }
  .hw-pie .hw-drifloon { right: 8%; }
}
/* Toda la página en Halloween: la luz del fondo en calabaza y morado, y una línea naranja bajo el menú. */
html[data-temporada="halloween"] { --luz-1: rgba(232, 131, 58, .13); --luz-2: rgba(109, 63, 176, .26); }
html[data-temporada="halloween"] .nav { box-shadow: 0 1px 0 rgba(232, 131, 58, .35), 0 1px 12px rgba(0, 0, 0, .35); }

/* Aviso de spam: siempre que le mandamos algo por correo (el dueño, 21 oct 2026) */
.c-nota.aviso-spam { padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--on); }
.c-nota.aviso-spam b { color: var(--on); }

/* Singles con fotos reales (21 oct 2026): la foto del frente con sus esquinas de carta, el botón y la galería */
.ventana img.real { padding: 10px; border-radius: calc(4.8% + 10px) / calc(3.4% + 10px); }
.ver-reales { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px;
  border-radius: 999px; border: 1px solid rgba(197, 158, 78, .55); background: rgba(10, 14, 23, .82); color: #f3dca6; font: 600 12px/18px var(--cuerpo); cursor: pointer; }
.ver-reales .icono { font-size: 16px; }
html[data-tema="dia"] .ver-reales { background: rgba(255, 255, 255, .92); color: #6b4a12; }
.galeria-vista { display: grid; place-items: center; background: var(--lowest); min-height: 200px; }
.galeria-vista img, .galeria-vista video { display: block; max-width: 100%; max-height: calc(88vh - 190px); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
.galeria-vista img.real { border-radius: 3.4% / 2.4%; margin: 12px auto; max-height: calc(88vh - 214px); }
.galeria-minis { display: flex; gap: 8px; padding: 0 16px 16px; overflow-x: auto; }
.galeria-minis button { flex: none; display: grid; justify-items: center; gap: 4px; width: 64px; padding: 4px; border-radius: 10px; border: 1px solid var(--cristal-borde);
  background: var(--hundido); color: var(--sec); cursor: pointer; }
.galeria-minis button[aria-pressed="true"] { border-color: var(--primary); color: var(--on); }
.galeria-minis img { width: 54px; height: 75px; object-fit: cover; border-radius: 5px; }
.galeria-minis .icono { width: 54px; height: 75px; display: grid; place-items: center; font-size: 28px; color: var(--primary); }
.galeria-minis small { font-size: 10px; line-height: 12px; }

/* Celulares sin <dialog> (iOS antes de 15.4): tienda.js lo abre con el atributo «open» y aquí se pone encima de todo. */
dialog:not([open]) { display: none; }
dialog.dlg-viejo { position: fixed; z-index: 200; }

/* Pagar desde su cuenta lo que espera su pago (22 oct 2026) */
.cp-pagar { display: grid; gap: 10px; margin-top: 6px; padding: 12px; border-radius: 14px; background: var(--high); border: 1px solid rgba(197, 158, 78, .35); }
.cp-pagar .cl-pagar { margin: 0; }
.cp-pagar > .cp-total { border-top: 0; padding-top: 0; margin-top: 0; }

/* Referencias de clientes (22 oct 2026): tarjetas con su captura o foto, lo que dijeron y quién; al final, el post de Facebook */
.refs-lista { grid-auto-columns: 250px; }
.ref { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  border-radius: 20px; overflow: hidden; font: inherit; color: var(--on);
  background: var(--cristal-oro), var(--cristal); background-color: var(--cristal-base); border: 1px solid var(--cristal-borde); box-shadow: var(--cristal-sombra);
  transition: transform .2s, border-color .2s; }
.ref:hover { transform: translateY(-3px); border-color: rgba(197, 158, 78, .45); }
.ref-foto { display: block; flex: none; height: 230px; overflow: hidden; background: var(--hundido); }
.ref-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ref-cuerpo { display: grid; gap: 10px; padding: 14px 16px 16px; align-content: start; flex: 1; }
.ref-texto { font-size: 14px; line-height: 21px; color: var(--on); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ref.sin-foto .ref-texto { -webkit-line-clamp: 9; font-size: 15px; line-height: 23px; }
.ref.sin-foto::before { content: "“"; display: block; padding: 14px 16px 0; font: 800 56px/.6 var(--display); color: var(--primary); }
.ref-quien { display: grid; gap: 1px; margin-top: auto; }
.ref-quien b { font: 700 13px/18px var(--display); letter-spacing: .04em; color: var(--primary); }
.ref-quien small { font-size: 12px; line-height: 16px; color: var(--texto); }
/* El post de Facebook */
.ref-fb { cursor: pointer; }
.ref-fb-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; margin: 18px 16px 0; border-radius: 16px; background: #1877f2; }
.ref-fb-ic svg { width: 30px; height: 30px; fill: #fff; }
.ref-fb-tit { font: 700 16px/21px var(--display); color: var(--on); }
.ref-fb .ref-texto { color: var(--texto); -webkit-line-clamp: 6; }
.ref-fb-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--primary); font: 700 12px/16px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.ref-fb-btn .icono { font-size: 16px; }
.refs-lista.solo-fb { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
.ref-fb.sola { flex-direction: row; align-items: center; max-width: 720px; }
.ref-fb.sola .ref-fb-ic { margin: 18px 0 18px 18px; flex: none; }
/* La ventana con todas (abre «¿Buscas referencias de nosotros?») */
.refs-dlg { padding: 0; border: 1px solid var(--cristal-borde); border-radius: 24px; background: var(--fondo); color: var(--on); width: min(94vw, 1040px); max-height: 90vh; }
.refs-dlg::backdrop { background: rgba(4, 6, 10, .78); backdrop-filter: blur(4px); }
.refs-dlg[open] { display: flex; flex-direction: column; }
.refs-dlg-cab { padding: 22px 64px 6px 24px; }
.refs-dlg-cab h2 { font: 700 22px/28px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.refs-dlg-cab p { font-size: 14px; color: var(--texto); }
.refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; padding: 14px 24px 24px; overflow: auto; min-height: 0; }
.refs-grid .ref-foto { height: 260px; }
.refs-visor img { background: #fff; }
.refs-visor .visor-pie span { color: var(--on); font-size: 14px; }
@media (max-width: 560px) {
  .refs-lista { grid-auto-columns: 78vw; }
  .refs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px 16px; }
  .refs-grid .ref-foto { height: 190px; }
  .refs-grid .ref-cuerpo { padding: 10px 12px 12px; }
  .refs-grid .ref-texto { font-size: 13px; line-height: 19px; -webkit-line-clamp: 4; }
  .refs-dlg-cab { padding: 18px 60px 4px 16px; }
  .ref-fb.sola { flex-direction: column; align-items: stretch; }
  .ref-fb.sola .ref-fb-ic { margin: 18px 16px 0; }
}
.refs-sec:has(.refs-lista.solo-fb) .riel-flechas { display: none; }

/* De dónde viene cada referencia, y la página donde el cliente deja la suya (22 oct 2026) */
.ref-de { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/14px var(--display); letter-spacing: .04em; color: var(--texto); }
.ref-de .icono { font-size: 15px; color: var(--primary); }
.ref-de svg { width: 14px; height: 14px; fill: #1877f2; }
.ref-cliente { padding-block: 8px 80px; }
.ref-form { max-width: 560px; }
.ref-ver { display: block; max-width: 100%; max-height: 320px; border-radius: 14px; }
.ref-subir { justify-self: start; cursor: pointer; }
.ref-error { color: var(--error); font-size: 14px; }
.cp-ref { margin-top: 10px; justify-self: start; }