/* Lunarys · plantilla de Tebex (dirección C, «Escaparate»). Generado por _herramientas/construir.py: no editar a mano.
   Tres fondos: noche (de serie), grafito y claro. Cada uno redefine las mismas variables. */

:root,
:root[data-tema="noche"] {
  --fondo: #0f121a;
  --fondo2: #0b0e15;
  --cab: rgba(15, 18, 26, .84);
  --sup: #161a24;
  --sup2: #1c2130;
  --gris: rgba(255, 255, 255, .06);
  --gris2: rgba(255, 255, 255, .08);
  --tinta: #eef1f7;
  --tinta2: #c2c8d6;
  --suave: #8d95a8;
  --linea: rgba(255, 255, 255, .08);
  --linea2: rgba(255, 255, 255, .16);
  --acc: #3d6bff;
  --acc-txt: #ffffff;
  --cnt: #3d6bff;
  --inv: #eef1f7;
  --inv-txt: #0f121a;
  --plato1: #2a3247;
  --plato2: #181d2a;
  --plato3: #10131b;
  --sombra: rgba(0, 0, 0, .5);
  --luz1: rgba(61, 107, 255, .32);
  --luz2: rgba(155, 107, 255, .2);
  --ok-fondo: rgba(52, 211, 153, .12);
  --ok: #6ee7b7;
  --aviso-fondo: rgba(251, 191, 36, .08);
  --aviso-linea: rgba(251, 191, 36, .28);
  --aviso: #fbbf24;
  --aviso-txt: #e6d3a3;
  --pie: #0a0c12;
  --codigo: #0a0c12;
  --grano: .05;
  --foto-portada: .6;
  --foto-filtro: none;
  color-scheme: dark;
}

:root[data-tema="grafito"] {
  --fondo: #141517;
  --fondo2: #101113;
  --cab: rgba(20, 21, 23, .86);
  --sup: #1b1c1f;
  --sup2: #222327;
  --gris: rgba(255, 255, 255, .06);
  --gris2: rgba(255, 255, 255, .08);
  --tinta: #f2f2f3;
  --tinta2: #c9c9cd;
  --suave: #909196;
  --linea: rgba(255, 255, 255, .08);
  --linea2: rgba(255, 255, 255, .16);
  --acc: #f2f2f3;
  --acc-txt: #111214;
  --cnt: #111214;
  --inv: #f2f2f3;
  --inv-txt: #111214;
  --plato1: #303136;
  --plato2: #1d1e21;
  --plato3: #141517;
  --sombra: rgba(0, 0, 0, .5);
  --luz1: rgba(255, 255, 255, .07);
  --luz2: rgba(255, 255, 255, .04);
  --ok-fondo: rgba(52, 211, 153, .12);
  --ok: #6ee7b7;
  --aviso-fondo: rgba(251, 191, 36, .08);
  --aviso-linea: rgba(251, 191, 36, .28);
  --aviso: #fbbf24;
  --aviso-txt: #e6d3a3;
  --pie: #0e0f10;
  --codigo: #0e0f10;
  --grano: .05;
  --foto-portada: .5;
  --foto-filtro: grayscale(1);
  color-scheme: dark;
}

:root[data-tema="claro"] {
  --fondo: #eeede8;
  --fondo2: #e6e4de;
  --cab: rgba(238, 237, 232, .95);
  --sup: #ffffff;
  --sup2: #ffffff;
  --gris: #f2f1ec;
  --gris2: #e3e1db;
  --tinta: #121212;
  --tinta2: #3a3936;
  --suave: #64625d;
  --linea: #dddbd4;
  --linea2: #c6c4bc;
  --acc: #2b50ff;
  --acc-txt: #ffffff;
  --cnt: #2b50ff;
  --inv: #121212;
  --inv-txt: #ffffff;
  --plato1: #fbfaf7;
  --plato2: #e7e5df;
  --plato3: #d4d2ca;
  --sombra: rgba(0, 0, 0, .28);
  --luz1: rgba(43, 80, 255, .12);
  --luz2: rgba(155, 107, 255, .08);
  --ok-fondo: #ecf8f1;
  --ok: #14532d;
  --aviso-fondo: #fff8eb;
  --aviso-linea: #f1d9a8;
  --aviso: #b45309;
  --aviso-txt: #5c4a1e;
  --pie: #121212;
  --codigo: #121212;
  --grano: .035;
  --foto-portada: .2;
  --foto-filtro: none;
  color-scheme: light;
}

:root { --ease: cubic-bezier(.2, .8, .2, 1); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-stretch: 100%;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}
a { color: var(--tinta); }
a:hover { color: var(--tinta); }
img { max-width: 100%; }
button, input { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
::selection { background: var(--acc); color: var(--acc-txt); }

.xp { font-stretch: 125%; font-weight: 800; letter-spacing: -.4px; }
.cn { font-stretch: 75%; font-weight: 600; text-transform: uppercase; letter-spacing: .9px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.sm { width: 14px; height: 14px; }
.plato { background: radial-gradient(120% 100% at 50% 22%, var(--plato1) 0%, var(--plato2) 58%, var(--plato3) 100%); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font: 600 14.5px/1 'Archivo', sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn.sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn.ink { background: var(--inv); color: var(--inv-txt); }
.btn.ink:hover { filter: brightness(1.08); color: var(--inv-txt); }
.btn.out { background: transparent; color: var(--tinta); border-color: var(--linea2); }
.btn.out:hover { background: var(--inv); color: var(--inv-txt); border-color: var(--inv); }
.btn.acc { background: var(--acc); color: var(--acc-txt); box-shadow: 0 8px 24px -10px var(--acc); }
.btn.acc:hover { filter: brightness(1.12); color: var(--acc-txt); box-shadow: 0 12px 30px -10px var(--acc); }
.btn.ok { background: var(--sup); color: var(--tinta); border-color: var(--linea2); }
.btn.ok:hover { border-color: var(--tinta); }
.btn.off, .btn:disabled { background: var(--gris2); color: var(--suave); border-color: transparent; cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
.btn.ancho { width: 100%; }
.btn .i-arrow { transition: transform .25s var(--ease); }
.btn:hover .i-arrow { transform: translateX(3px); }
.lk {
  align-self: flex-start; background: none; border: 0; padding: 0;
  font: 600 14px 'Archivo', sans-serif; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--gris); border: 1px solid var(--linea); font-size: 11.5px; font-weight: 600; color: var(--tinta2); white-space: nowrap;
}
.tag.acc { background: var(--acc); border-color: var(--acc); color: var(--acc-txt); }

/* ---------- Cabecera ---------- */
.cab {
  position: sticky; top: 0; z-index: 50; background: var(--cab); border-bottom: 1px solid var(--linea);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow .3s var(--ease);
}
.cab.scroll { box-shadow: 0 10px 30px -18px var(--sombra); }
.cab-in { display: flex; align-items: center; gap: 22px; height: 68px; }
.marca { display: flex; align-items: baseline; gap: 8px; text-decoration: none; flex: none; }
.marca .xp { font-size: 21px; letter-spacing: .2px; }
.marca .cn { font-size: 12px; color: var(--suave); }
.nav { display: flex; gap: 2px; }
.nl { position: relative; padding: 10px 11px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--tinta2); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap; }
.nl:hover { background: var(--gris); color: var(--tinta); }
.cab-acc { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cnt); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.cnt.salta { animation: salta .5s var(--ease); }
@keyframes salta { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

.buscar {
  position: relative; display: flex; align-items: center; gap: 8px; width: 250px; height: 44px;
  padding: 0 12px 0 14px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linea); color: var(--suave);
  transition: border-color .2s var(--ease), width .3s var(--ease);
}
.buscar:focus-within { border-color: var(--acc); width: 300px; }
.buscar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--tinta); font-size: 14.5px; }
.buscar input::placeholder { color: var(--suave); }
.buscar input::-webkit-search-cancel-button { cursor: pointer; }
.sug {
  position: absolute; left: 0; right: 0; top: 52px; padding: 6px; border-radius: 16px;
  background: var(--sup); border: 1px solid var(--linea2); box-shadow: 0 24px 60px -12px var(--sombra); z-index: 60;
  animation: sube .2s var(--ease) both;
}
.sug[hidden] { display: none; }
.sug a { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 10px; text-decoration: none; color: var(--tinta); }
.sug a:hover, .sug a.sel { background: var(--gris2); }
.sug img { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; }
.sug .n { font-size: 14px; font-weight: 600; }
.sug .c { font-size: 12px; color: var(--suave); }
.sug p { margin: 0; padding: 10px; font-size: 13.5px; color: var(--suave); }

/* ---------- Selector de fondo (provisional, para elegir) ---------- */
.temas {
  position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 4px;
  padding: 5px 5px 5px 12px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linea2);
  box-shadow: 0 16px 40px -14px var(--sombra); font-size: 12.5px; color: var(--suave);
}
.temas span { margin-right: 4px; }
.temas button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--tinta2); cursor: pointer; }
.temas button.on { background: var(--inv); color: var(--inv-txt); }
.temas i { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .5); }

/* ---------- Secciones ---------- */
.sec { padding-top: 88px; }
.sec-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; }
.h2 { margin: 0; font-size: 32px; line-height: 1.08; }
.sub { margin: 8px 0 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--suave); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--acc); }
.vacio { padding: 36px; border: 1px dashed var(--linea2); border-radius: 16px; text-align: center; font-size: 14.5px; color: var(--suave); }

/* ---------- Comunes de la portada ---------- */
.h1 { margin: 0; font-size: 52px; line-height: 1.02; }
.h1 .tono { color: var(--acc); }
.lead { margin: 0; max-width: 480px; font-size: 16.5px; line-height: 1.6; color: var(--tinta2); }
.fila-btn { display: flex; flex-wrap: wrap; gap: 10px; }
.sellos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--tinta2); }
.sellos li { display: inline-flex; align-items: center; gap: 7px; }
.sellos .i { color: var(--acc); }
@keyframes deriva { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, 10%) scale(1.15); } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.tapa { position: relative; overflow: hidden; padding: 12px 12px 14px; border-radius: 16px 16px 6px 6px; background: #0b0c0f; box-shadow: 0 40px 70px -26px var(--sombra), 0 0 0 1px rgba(255, 255, 255, .06); }
.tapa img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; transition: opacity .2s var(--ease), transform .4s var(--ease); }
.tapa img.cambia { opacity: 0; transform: scale(.985); }
.tapa.brillo::after { animation: brillo 1.1s var(--ease); }
@keyframes brillo { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.base { position: relative; height: 16px; margin: 0 -7%; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #d9d8d4, #9f9d97); box-shadow: 0 22px 34px -6px var(--sombra); }
.muesca { position: absolute; left: 50%; top: 0; width: 14%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #8b8984; }
.tapa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
  transform: translateX(-130%);
}
.precio { font-weight: 700; white-space: nowrap; }
/* ---------- Ventajas ---------- */
.ventajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ventaja {
  position: relative; display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.ventaja:hover { border-color: var(--linea2); transform: translateY(-3px); background: var(--sup2); }
.ventaja .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--gris2); color: var(--acc); transition: transform .3s var(--ease); }
.ventaja:hover .ic { transform: rotate(-6deg) scale(1.06); }
.ventaja h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; }
.ventaja p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta2); }
.ventaja .fondo-ic { position: absolute; right: -10px; bottom: -14px; width: 92px; height: 92px; color: var(--tinta); opacity: .04; stroke-width: 1.2; }

/* ---------- Pruébalo (demos de verdad en un iframe) ---------- */
.demo { display: flex; flex-direction: column; gap: 12px; }
.demo-pantalla { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid var(--linea); isolation: isolate; }
.demo-pantalla::before { content: ''; position: absolute; z-index: -1; width: 60%; height: 70%; left: 20%; top: 10%; border-radius: 50%; background: radial-gradient(closest-side, var(--luz1), transparent); animation: deriva 18s ease-in-out infinite alternate; }
.demo-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s var(--ease), transform .8s var(--ease); }
.demo-pantalla:hover .demo-poster { transform: scale(1.012); }
.demo-pantalla::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 60% at 50% 55%, transparent 40%, rgba(0, 0, 0, .35)); transition: opacity .4s var(--ease); }
/* color-scheme light = el mismo que el de la demo; si no coinciden, el navegador pinta la demo sobre blanco */
.demo-pantalla iframe { position: absolute; left: 0; top: 0; z-index: 3; border: 0; transform-origin: 0 0; background: transparent; color-scheme: light; opacity: 0; transition: opacity .6s var(--ease); }
.demo-pantalla iframe.listo { opacity: 1; }
.demo-pantalla.activa .demo-poster, .demo-pantalla.activa::after { opacity: 0; pointer-events: none; }
.demo-carga { position: absolute; left: 50%; top: 50%; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 999px; border: 3px solid var(--linea2); border-top-color: var(--acc); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.demo-pantalla:fullscreen { border-radius: 0; border: 0; background: var(--fondo); }
.demo-pantalla:fullscreen iframe { width: 100%; height: 100%; }
.demo-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.demo-pistas { display: flex; flex-wrap: wrap; gap: 8px; }
.pista { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linea); font-size: 13px; color: var(--tinta2); }
.pista .i { color: var(--acc); }
.pista code { padding: 1px 6px; border-radius: 6px; background: var(--gris2); font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tinta); }
.demo-nota { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }

/* ---------- Catálogo ---------- */
.segs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.seg {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--sup); color: var(--tinta2); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.seg:hover { border-color: var(--linea2); color: var(--tinta); }
.seg .n { font-size: 12px; color: var(--suave); }
.seg.on { background: var(--inv); border-color: var(--inv); color: var(--inv-txt); }
.seg.on .n { color: var(--inv-txt); opacity: .7; }
.vista { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--gris2); }
.vt { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; background: transparent; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--suave); cursor: pointer; }
.vt.on { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 10px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; }

.fila {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.fila:hover { border-color: var(--linea2); background: var(--sup2); box-shadow: 0 16px 34px -18px var(--sombra); transform: translateY(-2px); }
.mini { width: 136px; height: 80px; border-radius: 10px; flex: none; display: grid; place-items: center; overflow: hidden; }
.mini img { display: block; width: 84%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 16px -4px var(--sombra); transition: transform .4s var(--ease); }
.fila:hover .mini img { transform: scale(1.06); }
.fila .info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.fila .tit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fila .der { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.nombre { margin: 0; font-size: 15.5px; font-weight: 700; }
.nombre span { font-weight: 500; color: var(--tinta2); }
.nombre a, a.pn { color: var(--tinta); text-decoration: none; }
.nombre a:hover, a.pn:hover { text-decoration: underline; text-underline-offset: 3px; }
.d2 { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tarjeta {
  display: flex; flex-direction: column; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.tarjeta:hover { border-color: var(--linea2); box-shadow: 0 22px 44px -22px var(--sombra); transform: translateY(-4px); }
.tarjeta .pl { aspect-ratio: 16 / 10; display: grid; place-items: center; text-decoration: none; }
.tarjeta .pl img { display: block; width: 84%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 30px -10px var(--sombra); transition: transform .5s var(--ease); }
.tarjeta:hover .pl img { transform: translateY(-5px) scale(1.03); }
.tarjeta .cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.tarjeta .arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tarjeta .abajo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.entra { animation: sube .5s var(--ease) both; animation-delay: calc(var(--d, 0) * 40ms); }

/* ---------- En escena ---------- */
.escenas { display: flex; flex-direction: column; gap: 76px; }
.banda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.banda.rev-orden .medio { order: 2; }
.medio { position: relative; padding-bottom: 36px; }
.foto { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10; box-shadow: 0 30px 60px -30px var(--sombra); }
.foto img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; transform: translateY(var(--py, 0px)); will-change: transform; }
.foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35)); }
.ui { position: absolute; z-index: 1; border-radius: 10px; overflow: hidden; background: #0b0c0f; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); transition: transform .5s var(--ease); }
.ui img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.banda:hover .ui { transform: translateY(-6px); }
.banda:hover .ui:nth-of-type(2) { transform: translateY(-10px); }
.banda:hover .ui:nth-of-type(3) { transform: translateY(-14px); }
.big-n { position: absolute; left: 18px; top: 14px; z-index: 1; font-size: 15px; letter-spacing: 1px; color: #fff; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.texto-banda { display: flex; flex-direction: column; gap: 16px; }
.texto-banda h3 { margin: 0; font-size: 34px; line-height: 1.05; }
.texto-banda p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--tinta2); }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--tinta); }
.ticks .i { margin-top: 2px; color: var(--acc); }

/* ---------- Funcionan juntos ---------- */
.juntos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.union { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); transition: border-color .25s var(--ease), background .25s var(--ease); }
.union:hover { border-color: var(--linea2); background: var(--sup2); }
.enlace { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; align-items: center; gap: 10px; }
.nodo { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 92px; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; color: var(--tinta); }
.nodo .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gris2); color: var(--acc); flex: none; transition: transform .3s var(--ease); }
.union:hover .nodo .ic { transform: translateY(-3px); }
.enlace .cable { margin-bottom: 26px; }
a.nodo:hover { text-decoration: underline; text-underline-offset: 3px; }
.cable { position: relative; height: 2px; border-radius: 2px; background: var(--linea2); }
.cable::after { content: ''; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); animation: viaja 2.6s var(--ease) infinite; animation-delay: calc(var(--d, 0) * 300ms); }
@keyframes viaja { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.union p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta2); }

/* ---------- Arma tu portátil ---------- */
.arma { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px; padding: 28px; border-radius: 24px; background: var(--sup); border: 1px solid var(--linea); }
.arma-izq { display: flex; flex-direction: column; gap: 16px; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.app-t {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; border: 1px solid var(--linea);
  background: var(--fondo2); cursor: pointer; text-align: left; color: var(--tinta);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.app-t:hover { border-color: var(--linea2); transform: translateY(-2px); }
.app-t:active { transform: scale(.98); }
.app-t.on { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--fondo2)); }
.app-t .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--gris2); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.app-t.on .ic { background: var(--acc); color: var(--acc-txt); transform: rotate(-4deg); }
.app-t .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-t .tx b { font-size: 14.5px; font-weight: 600; }
.app-t .tx small { font-size: 12.5px; color: var(--suave); }
.ck { margin-left: auto; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--linea2); display: grid; place-items: center; flex: none; color: transparent; transition: background .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease); }
.ck .i { width: 14px; height: 14px; stroke-width: 2.4; }
.app-t.on .ck { background: var(--acc); border-color: var(--acc); color: var(--acc-txt); transform: scale(1.08); }
.resumen { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: var(--fondo2); border: 1px solid var(--linea); }
.resumen h3 { margin: 0; font-size: 18px; }
.sel-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); animation: sube .35s var(--ease) both; }
.sel-fila .tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sel-fila b { font-size: 14px; font-weight: 600; }
.sel-fila small { font-size: 12.5px; color: var(--suave); }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--linea2); }
.total span:first-child { font-size: 14.5px; color: var(--tinta2); }
.total .xp { font-size: 20px; }
.nota { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--suave); }

/* Interruptor */
.tg { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; }
.tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tr { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--gris2); border: 1px solid var(--linea2); flex: none; transition: background .2s var(--ease); }
.tr::after { content: ''; position: absolute; left: 3px; top: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); }
.tg input:checked + .tr { background: var(--acc); border-color: var(--acc); }
.tg input:checked + .tr::after { transform: translateX(16px); }
.tg input:focus-visible + .tr { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- Cómo comprar ---------- */
.comprar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pasos li { position: relative; display: flex; gap: 14px; padding: 20px 22px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); }
.num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; flex: none; font-size: 15px; color: var(--acc-txt); background: var(--acc); }
.pasos h3, .paso h3 { margin: 4px 0 4px; font-size: 16px; font-weight: 700; }
.pasos p, .paso p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta2); }
.portal { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 26px; border-radius: 18px; border: 1px solid var(--linea); }
.portal .cn { font-size: 12px; color: var(--suave); }
.camino { display: flex; flex-direction: column; gap: 10px; }
.paso-portal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--fondo2); border: 1px solid var(--linea); font-size: 15px; font-weight: 600; color: var(--tinta2); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.paso-portal .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gris2); flex: none; transition: background .35s var(--ease), color .35s var(--ease); }
.paso-portal.on { color: var(--tinta); border-color: var(--acc); transform: translateX(6px); }
.paso-portal.on .ic { background: var(--acc); color: var(--acc-txt); }
.paso-portal.fin.on { background: var(--acc); color: var(--acc-txt); }
.paso-portal.fin.on .ic { background: rgba(255, 255, 255, .2); color: var(--acc-txt); }
.portal .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }

/* ---------- Ayuda y llamada final ---------- */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.faq div { padding: 20px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); transition: border-color .25s var(--ease); }
.faq div:hover { border-color: var(--linea2); }
.faq h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.faq p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tinta2); }
.cta { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 340px; margin-top: 14px; border-radius: 24px; border: 1px solid var(--linea); }
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); transition: transform 6s linear; }
.cta.vis img { transform: scale(1); }
.cta::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 10, 16, .92) 0%, rgba(8, 10, 16, .72) 45%, rgba(8, 10, 16, .15) 100%); }
.cta-tx { position: relative; z-index: 2; max-width: 560px; padding: 44px; color: #f2f3f7; }
.cta-tx h2 { margin: 0; font-size: 34px; line-height: 1.05; }
.cta-tx p { margin: 14px 0 22px; font-size: 16.5px; line-height: 1.6; color: #d6dae4; }
.cta .btn.out { color: #fff; border-color: rgba(255, 255, 255, .45); }
.cta .btn.out:hover { background: #fff; color: #0f121a; border-color: #fff; }
.btn.dc { background: #5865f2; color: #fff; }
.btn.dc:hover { filter: brightness(1.1); color: #fff; }

/* ---------- Ficha de un script ---------- */
.ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 18px 0; font-size: 13.5px; color: var(--suave); }
.ruta a { color: var(--suave); }
.ruta a:hover { color: var(--tinta); }
.ruta b { font-weight: 600; color: var(--tinta); }
.ficha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.flecha { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--linea); background: var(--sup); box-shadow: 0 8px 20px -6px var(--sombra); cursor: pointer; color: var(--tinta); opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.flecha:focus-visible { opacity: 1; }
.flecha:hover { transform: scale(1.08); }
.flecha.izq { left: 14px; }
.flecha.der { right: 14px; }
.compra { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 22px; background: var(--sup); border: 1px solid var(--linea); }
.compra h1 { margin: 0; font-size: 40px; line-height: 1.05; }
.compra h1 span { font-weight: 500; color: var(--tinta2); }
.compra .lead { max-width: none; font-size: 16px; }
.compra .gran { font-size: 30px; line-height: 1; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.dep { display: flex; flex-direction: column; gap: 8px; }
.dep > span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea);
  background: var(--fondo2); font-size: 14px; font-weight: 500; color: var(--tinta); text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.opt:hover { border-color: var(--linea2); }
.opt.on { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.opt small { display: block; font-size: 12.5px; color: var(--suave); font-weight: 400; }
.rd { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--linea2); flex: none; display: grid; place-items: center; }
.opt.on .rd { border-color: var(--acc); }
.opt.on .rd::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--acc); }
.okn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ok-fondo); color: var(--ok); font-size: 14px; font-weight: 500; text-decoration: none; animation: sube .35s var(--ease) both; }
.okn:hover { color: var(--ok); filter: brightness(1.1); }
.meta { margin: 0; display: flex; flex-direction: column; }
.meta div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.meta dt { color: var(--suave); flex: none; }
.meta dd { margin: 0; font-weight: 600; text-align: right; }
.incluye { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.incluye div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); font-size: 14px; line-height: 1.4; color: var(--tinta2); }
.incluye b { display: block; color: var(--tinta); font-size: 14.5px; }
.incluye .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--gris2); color: var(--acc); }
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 13px; background: var(--gris2); }
.tb { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; font-weight: 600; color: var(--suave); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.tb:hover { color: var(--tinta); }
.tb.on { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.panel { margin-top: 18px; }
.panel > * { animation: sube .4s var(--ease) both; }
.funciones { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.fc { display: flex; flex-direction: column; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.fc:hover { border-color: var(--linea2); transform: translateY(-3px); }
.fc .pl { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.fc .pl .foto-f { display: block; max-width: 86%; max-height: 80%; border-radius: 6px; box-shadow: 0 16px 30px -8px var(--sombra); transition: transform .5s var(--ease); }
.fc:hover .pl .foto-f { transform: translateY(-4px) scale(1.02); }
.fc .tx { padding: 16px 18px 18px; }
.fc h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; }
.fc p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta2); }
.mas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); overflow: hidden; }
.funciones + .mas { margin-top: 14px; }
.mas-i { display: flex; gap: 14px; padding: 18px; border-top: 1px solid var(--linea); }
.mas-i:nth-child(-n+2) { border-top: 0; }
.mas-i:nth-child(even) { border-left: 1px solid var(--linea); }
.mas-i .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--gris2); color: var(--acc); }
.mas-i h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; }
.mas-i p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta2); }
.fc-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.fc-duo .mas { grid-template-columns: minmax(0, 1fr); }
.fc-duo .mas-i:nth-child(2) { border-top: 1px solid var(--linea); }
.fc-duo .mas-i:nth-child(even) { border-left: 0; }
.bancos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 18px; }
.bk { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 60px; }
.bk img { width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 10px 20px -6px var(--sombra); transition: transform .3s var(--ease); }
.bk:hover img { transform: translateY(-4px) rotate(-4deg); }
.bk figcaption { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--tinta2); }
.equipo { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 26px; justify-content: center; padding: 18px; }
.bk.eq { width: 74px; }
.bk.eq img { border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.abanico { display: flex; align-items: center; justify-content: center; }
.abanico img { width: 28%; margin-left: -10%; transition: transform .4s var(--ease); }
.abanico img:first-child { margin-left: 0; }
.abanico img:nth-child(odd) { margin-top: 8%; }
.abanico img:nth-child(even) { margin-top: -4%; }
.fc:hover .abanico img:nth-child(1) { transform: translate(-8px, 4px) rotate(-4deg); }
.fc:hover .abanico img:nth-child(2) { transform: translate(-4px, -4px); }
.fc:hover .abanico img:nth-child(4) { transform: translate(4px, -4px); }
.fc:hover .abanico img:nth-child(5) { transform: translate(8px, 4px) rotate(4deg); }
.req-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.reqs { border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); }
.rq { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--linea); }
.rq:first-child { border-top: 0; }
.rq .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--gris2); display: grid; place-items: center; flex: none; }
.rq h3 { margin: 2px 0 3px; font-size: 15px; font-weight: 700; }
.rq p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--suave); }
.bd { margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--inv); color: var(--inv-txt); }
.bd.op { background: var(--gris2); color: var(--tinta2); }
.caja { display: flex; gap: 12px; padding: 18px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); font-size: 14px; line-height: 1.55; color: var(--tinta2); }
.caja p { margin: 0; }
.caja .i { color: var(--aviso); }
.pasos-f { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.paso { display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); }
.paso > div { min-width: 0; flex: 1; }
.codigo { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--codigo); color: #e6e9f0; border: 1px solid var(--linea); font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; }
.versiones { display: flex; flex-direction: column; gap: 10px; }
.version { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 20px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); }
.version .v { display: flex; align-items: center; gap: 8px; width: 150px; }
.version .v .xp { font-size: 17px; }
.version ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 400px; }
.version li { display: flex; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--tinta2); }
.version li .i { margin-top: 4px; color: var(--acc); }
.conecta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; }

/* ---------- Carrito ---------- */
.cab-carrito { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 28px; margin-bottom: 22px; }
.cab-carrito h1 { margin: 0; font-size: 34px; line-height: 1.1; }
.etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--suave); }
.sp.on { color: var(--tinta); }
.sn { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--gris2); color: var(--tinta2); }
.sp.on .sn { background: var(--acc); color: var(--acc-txt); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 22%, transparent); }
.sep { width: 28px; height: 1.5px; background: var(--linea2); }
.cg { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.cg-izq { display: flex; flex-direction: column; gap: 12px; }
.cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; flex: none; background: var(--inv); color: var(--inv-txt); }
.cuenta .tx { flex: 1 1 300px; min-width: 0; }
.cuenta small { display: block; font-size: 13px; color: var(--suave); }
.cuenta b { display: block; font-size: 15.5px; }
.cuenta p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--suave); }
.aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 16px; background: var(--aviso-fondo); border: 1px solid var(--aviso-linea); animation: sube .35s var(--ease) both; }
.aviso .tx { flex: 1 1 260px; min-width: 0; }
.aviso b { display: block; font-size: 15px; }
.aviso span { font-size: 13.5px; color: var(--aviso-txt); }
.aviso > .i { color: var(--aviso); }
.aviso-suave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); font-size: 14px; color: var(--tinta2); }
.aviso-suave span { flex: 1; }
.quitar { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--suave); cursor: pointer; }
.quitar:hover { background: var(--gris2); color: var(--tinta); }
.volver { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.volver .i { transition: transform .25s var(--ease); }
.volver:hover .i { transform: translateX(-3px); }
.suma { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 22px; background: var(--sup); border: 1px solid var(--linea); }
.suma h2 { margin: 0; font-size: 18px; }
.sl { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--tinta2); }
.bloque { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.bloque label { font-size: 14px; font-weight: 600; }
.campo { display: flex; gap: 8px; }
.campo input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--linea); background: var(--fondo2); font-size: 14.5px; color: var(--tinta); outline: 0; }
.campo input:focus { border-color: var(--acc); }
.campo input::placeholder { color: var(--suave); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--ok-fondo); color: var(--ok); font-size: 13.5px; font-weight: 600; animation: sube .3s var(--ease) both; }
.chip button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--ok); cursor: pointer; }
.chip button:hover { background: rgba(127, 127, 127, .15); }
.af { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--tinta2); }
.af .i { margin-top: 1px; color: var(--suave); }
.vacio-c { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 20px; border-radius: 18px; border: 1px dashed var(--linea2); text-align: center; }

/* ---------- Pie ---------- */
.pie { margin-top: 96px; background: var(--pie); color: #f2f2f0; border-top: 1px solid var(--linea); }
.pie-in { display: flex; flex-direction: column; gap: 22px; padding-top: 44px; padding-bottom: 36px; }
.pie-arriba { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.pie-marca { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.pie-marca .xp { font-size: 21px; }
.pie-marca p, .pie-legal { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(242, 242, 240, .66); }
.pie-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.pie-cols nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pie-cols .cn { font-size: 12px; color: rgba(242, 242, 240, .5); }
.fl { color: rgba(242, 242, 240, .66); text-decoration: none; transition: color .2s var(--ease); }
.fl:hover { color: #fff; }
.pie-legal { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: rgba(242, 242, 240, .5); }

/* ---------- Avisos flotantes, diálogos y animaciones ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  width: max-content; max-width: calc(100% - 32px); padding: 12px 12px 12px 18px; border-radius: 16px;
  background: var(--inv); color: var(--inv-txt); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .5); font-size: 14.5px;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.toast.ver { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast .acciones { display: flex; gap: 8px; }
.toast .btn { height: 38px; padding: 0 14px; font-size: 13.5px; }
.toast .btn.out { color: var(--inv-txt); border-color: color-mix(in srgb, var(--inv-txt) 40%, transparent); }
.toast .btn.out:hover { background: var(--inv-txt); color: var(--inv); }
dialog.dlg { width: min(460px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--linea2); border-radius: 20px; background: var(--sup); color: var(--tinta); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
dialog.dlg[open] { animation: sube .3s var(--ease) both; }
dialog.dlg::backdrop { background: rgba(5, 7, 12, .6); }
dialog.dlg h2 { margin: 0 0 8px; font-size: 20px; }
dialog.dlg p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--tinta2); }
.volador { position: fixed; z-index: 100; pointer-events: none; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.volador.punto { border-radius: 999px; background: var(--acc); }

@keyframes sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rv { animation: sube .7s var(--ease) both; }
.d1 { animation-delay: .08s; }
.d2a { animation-delay: .16s; }
.d3 { animation-delay: .24s; }
.rev { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.rev.vis { opacity: 1; transform: none; }

/* ---------- Textura de grano: el fondo deja de verse plano ---------- */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: var(--grano, .05);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Iconos de las apps y color de cada script ---------- */
.logo { width: 28px; height: 28px; border-radius: 23%; flex: none; object-fit: cover; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); }
.logo.p { width: 24px; height: 24px; }
.logo.g { width: 54px; height: 54px; border-radius: 24%; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 70%, #000); }
.logo.glifo { display: inline-grid; place-items: center; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 52%, #05070c)); color: #fff; }
.logo.glifo .i { width: 58%; height: 58%; stroke-width: 2; }
.nombre-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tarjeta .pl { position: relative; isolation: isolate; }
.tarjeta .pl::before { content: ''; position: absolute; inset: 8% 12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--acc)) 46%, transparent), transparent); opacity: .65; transition: opacity .45s var(--ease), transform .7s var(--ease); }
.tarjeta:hover .pl::before { opacity: 1; transform: scale(1.18); }
.tarjeta:hover { border-color: color-mix(in srgb, var(--c, var(--acc)) 50%, var(--linea2)); }
.tarjeta .pl img { transition: transform .5s var(--ease), opacity .25s var(--ease); }
.tarjeta .pl img.cambia { opacity: 0; }
.tarjeta .puntos { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 5px; opacity: 0; transition: opacity .3s var(--ease); }
.tarjeta:hover .puntos { opacity: 1; }
.tarjeta .puntos i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: background .3s var(--ease), width .3s var(--ease); }
.tarjeta .puntos i.on { width: 16px; background: var(--c, #fff); }

/* ---------- Portada: la ciudad de fondo y los tres dispositivos con su pantalla real ---------- */
.portada { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: max(600px, calc(100vh - 112px)); padding-top: 48px; }
.portada-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.portada-fondo img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; opacity: var(--foto-portada); filter: var(--foto-filtro); transform: translateY(var(--py, 0px)); animation: acerca 28s ease-in-out infinite alternate; }
@keyframes acerca { from { scale: 1.02; } to { scale: 1.1; } }
.portada-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 62%, transparent) 0%, color-mix(in srgb, var(--fondo) 30%, transparent) 42%, color-mix(in srgb, var(--fondo) 80%, transparent) 78%, var(--fondo) 100%); }
.portada::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 90px; background: linear-gradient(180deg, transparent, var(--fondo)); pointer-events: none; }
.portada-txt { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.portada-h1 { margin: 0; font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -1.4px; }
.portada-h1 .tono { color: var(--acc); }
.portada-txt .lead { max-width: 640px; font-size: 17px; }
.portada-txt .fila-btn { justify-content: center; margin-top: 4px; }

.dispositivos { --alto: clamp(240px, calc(100vh - 560px), 470px); position: relative; flex: none; height: var(--alto); width: min(calc(var(--alto) * 2.75), calc(100% - 32px)); margin: auto auto 0; padding-top: 0; }
.disp { position: absolute; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .9s var(--ease); }
.d-portatil { left: 21%; top: 34px; width: 58%; z-index: 2; perspective: 1700px; animation: llega-abajo 1s var(--ease) .1s both; }
.d-portatil .tapa { transform-origin: 50% 100%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.d-portatil .tapa.abre { animation: abre-tapa 1.5s var(--ease) .45s backwards; }
@keyframes abre-tapa { from { transform: rotateX(-84deg); } to { transform: rotateX(0deg); } }
@keyframes llega-abajo { from { opacity: 0; translate: 0 60px; } }
.d-tablet { top: 16%; width: 38%; z-index: 1; perspective: 1400px; }
.d-izq { left: 0; animation: llega-izq 1.1s var(--ease) .6s both; }
.d-der { right: 0; animation: llega-der 1.1s var(--ease) .75s both; }
@keyframes llega-izq { from { opacity: 0; translate: -80px 24px; } }
@keyframes llega-der { from { opacity: 0; translate: 80px 24px; } }
.d-gira { transition: transform .6s var(--ease); }
.d-izq .d-gira { transform: rotateY(26deg) rotateZ(-2deg); transform-origin: 100% 50%; }
.d-der .d-gira { transform: rotateY(-26deg) rotateZ(2deg); transform-origin: 0 50%; }
.marco { padding: 11px; border-radius: 26px; background: #0b0c0f; box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.marco img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; border-radius: 16px; }
.dispositivos .flotante { z-index: 3; }
.flotante { position: absolute; z-index: 0; width: var(--t, 52px); height: var(--t, 52px); border-radius: 24%; object-fit: cover; box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .7); transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--r, 0deg)); transition: transform .8s var(--ease); animation: flota-ic var(--dur, 7s) ease-in-out infinite, aparece .8s var(--ease) 1.2s backwards; animation-delay: var(--del, 0s), 1.2s; pointer-events: none; }
.flotante.tarjeta-b { width: var(--t, 130px); height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
@keyframes flota-ic { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes aparece { from { opacity: 0; } }

/* Dock con los 14 scripts, encima del borde de la portada */
.dock-sec { position: relative; z-index: 6; display: flex; justify-content: center; margin-top: -52px; padding: 0 16px; }
.dock-s { display: flex; align-items: flex-end; gap: 7px; height: 78px; padding: 10px 12px; border-radius: 24px; background: color-mix(in srgb, var(--sup) 80%, transparent); border: 1px solid var(--linea2); box-shadow: 0 24px 60px -20px var(--sombra); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); max-width: 100%; }
.dk { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.dk-ic { display: block; width: calc(54px * var(--s, 1)); height: calc(54px * var(--s, 1)); transition: width .16s var(--ease), height .16s var(--ease); }
.logo.dk { display: block; width: 100%; height: 100%; border-radius: 24%; }
.logo.glifo.dk { display: grid; }
.dk-ic.dk-todos { display: grid; place-items: center; border-radius: 24%; background: var(--gris2); border: 1px solid var(--linea2); color: var(--tinta); }
.dk-todos .i { width: 46%; height: 46%; }
.dk-n { position: absolute; left: 50%; bottom: calc(100% + 12px); padding: 6px 10px; border-radius: 9px; background: var(--inv); color: var(--inv-txt); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s var(--ease), transform .15s var(--ease); pointer-events: none; }
.dk:hover .dk-n, .dk:focus-visible .dk-n { opacity: 1; transform: translate(-50%, 0); }
.dk::after { content: ''; position: absolute; bottom: -7px; width: 4px; height: 4px; border-radius: 999px; background: var(--c, var(--tinta)); opacity: 0; transition: opacity .2s var(--ease); }
.dk:hover::after { opacity: 1; }
.dk-sep { width: 1px; align-self: stretch; margin: 6px 3px; background: var(--linea2); }

/* Destacados: mosaico de tarjetas grandes */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 258px; gap: 12px; }
.bt { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 22px; background: var(--sup); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.bt:hover { color: var(--tinta); transform: translateY(-4px); border-color: color-mix(in srgb, var(--c, var(--acc)) 55%, var(--linea2)); box-shadow: 0 30px 60px -30px var(--sombra); }
.bt.b-grande { grid-column: span 2; grid-row: span 2; }
.bt.b-ancho { grid-column: span 2; }
.bt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 66%; background: linear-gradient(180deg, transparent, var(--sup) 58%); pointer-events: none; }
.bt-pantalla { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea2); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7); transition: transform .6s var(--ease); }
.bt-pantalla img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
.bt:hover .bt-pantalla { transform: translateY(-8px); }
.bt-tx { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bt-cab { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta2); }
.bt-tx b { font-size: 21px; line-height: 1.1; }
.bt-tx small { max-width: 460px; font-size: 14px; line-height: 1.5; color: var(--tinta2); }
.bt-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--c, var(--acc)); }
.bt-ir .i { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.bt:hover .bt-ir .i { transform: translateX(3px); }
.b-ancho .bt-pantalla { left: auto; right: -40px; top: 22px; width: 60%; }
.b-ancho::after { top: 0; height: auto; background: linear-gradient(90deg, var(--sup) 36%, transparent 70%); }
.b-ancho .bt-tx { max-width: 44%; margin-bottom: auto; margin-top: auto; }
.bt-foto { color: #fff; }
.bt-foto:hover { color: #fff; }
.bt-fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.2s var(--ease); }
.bt-foto:hover .bt-fondo { transform: scale(1.05); }
.bt-foto::after { height: 100%; background: linear-gradient(180deg, rgba(8, 10, 16, .1) 0%, rgba(8, 10, 16, .55) 55%, rgba(8, 10, 16, .92) 100%); }
.bt-foto .bt-pantalla { left: auto; right: -46px; top: 34px; width: 66%; transform: perspective(1400px) rotateY(-16deg) rotateZ(1.5deg); }
.bt-foto:hover .bt-pantalla { transform: perspective(1400px) rotateY(-10deg) rotateZ(.5deg) translateY(-8px); }
.bt-foto .bt-cab, .bt-foto .bt-tx small { color: rgba(255, 255, 255, .82); }
.bt-foto .bt-tx b { font-size: 30px; }
.bt-tarjetas { position: absolute; left: 0; right: 0; top: 22px; height: 150px; z-index: 0; }
.bt-tarjetas img { position: absolute; left: 50%; top: 0; width: 54%; margin-left: -27%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); transition: transform .5s var(--ease); }
.bt-tarjetas img:nth-child(1) { transform: rotate(-12deg) translate(-20px, 8px); }
.bt-tarjetas img:nth-child(2) { transform: rotate(-2deg) translateY(-2px); }
.bt-tarjetas img:nth-child(3) { transform: rotate(9deg) translate(22px, 10px); }
.bt:hover .bt-tarjetas img:nth-child(1) { transform: rotate(-18deg) translate(-40px, 4px); }
.bt:hover .bt-tarjetas img:nth-child(3) { transform: rotate(15deg) translate(42px, 6px); }
.bt-todos { --c: var(--acc); }
.bt-todos .bt-tx { max-width: 44%; margin: auto 0; }
.bt-todos::after { display: none; }
.bt-rejilla { position: absolute; right: 22px; top: 50%; z-index: 0; display: grid; grid-template-columns: repeat(5, 46px); gap: 10px; transform: translateY(-50%) rotate(-6deg); transition: transform .6s var(--ease); }
.bt-todos:hover .bt-rejilla { transform: translateY(-50%) rotate(-2deg) scale(1.04); }
.logo.bt-l { width: 46px; height: 46px; border-radius: 24%; }

/* ---------- Página de scripts ---------- */
.nl.on { background: var(--gris); color: var(--tinta); }
.scr-cab { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 34px; }
.scr-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scr-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: calc(var(--foto-portada) * .75); filter: var(--foto-filtro); }
.scr-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fondo) 18%, color-mix(in srgb, var(--fondo) 55%, transparent) 60%, color-mix(in srgb, var(--fondo) 30%, transparent)), linear-gradient(180deg, transparent 55%, var(--fondo)); }
.scr-cab .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.scr-h1 { margin: 0; font-size: clamp(38px, 5vw, 66px); line-height: 1; letter-spacing: -1px; }
.scr-iconos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.scr-ic { animation: sube .5s var(--ease) both; animation-delay: calc(.35s + var(--d, 0) * 40ms); }
.scr-ic .logo { width: 42px; height: 42px; border-radius: 24%; }
.scr-barra { position: sticky; top: 68px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; padding: 12px 0; background: var(--fondo); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.scr-barra .segs { margin: 0; }
.scr-barra .sub { margin: 0; }
.rejilla.xl { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.tarjeta.xl .cuerpo { gap: 10px; padding: 16px 18px 18px; }
.tarjeta.xl .nombre { font-size: 17px; }
.tarjeta.xl .logo { width: 32px; height: 32px; }
.tarjeta.xl .d2 { font-size: 14px; }
.tarjeta.xl .abajo .fila-btn { gap: 8px; }
.claves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.claves li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--tinta2); }
.claves .i { width: 15px; height: 15px; margin-top: 1px; color: var(--c, var(--acc)); stroke-width: 2.2; }
.n-fotos { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600; }
.n-fotos .i { width: 14px; height: 14px; }
.scr-arma { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px 22px; border-radius: 20px; background: var(--sup); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.scr-arma:hover { color: var(--tinta); border-color: var(--linea2); transform: translateY(-2px); }
.scr-arma .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--gris2); color: var(--acc); }
.scr-arma .tx { flex: 1 1 280px; display: flex; flex-direction: column; gap: 3px; }
.scr-arma b { font-size: 16px; }
.scr-arma small { font-size: 14px; color: var(--suave); }

/* ---------- Ficha: una captura en grande y las miniaturas debajo ---------- */
.foto-g { position: relative; isolation: isolate; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-radius: 20px; border: 1px solid var(--linea); background: #0b0d13; }
.foto-g::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--c, var(--acc)) 16%, transparent), transparent); }
.foto-g img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transition: opacity .18s var(--ease), transform .35s var(--ease); }
.foto-g img.cambia { opacity: 0; transform: scale(.985); }
.foto-g .flecha { opacity: 0; }
.foto-g:hover .flecha, .foto-g .flecha:focus-visible { opacity: 1; }
.foto-g .pie-foto { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; max-width: calc(100% - 150px); height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(8, 10, 16, .78); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.foto-g .contador { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(8, 10, 16, .78); color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.ampliar { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(8, 10, 16, .7); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.ampliar .i { width: 17px; height: 17px; }
.foto-g:hover .ampliar, .ampliar:focus-visible { opacity: 1; }
.ampliar:hover { transform: scale(1.08); }
.tiras { display: flex; gap: 8px; margin-top: 10px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--linea2) transparent; }
.tira { flex: 0 0 auto; width: 118px; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-radius: 10px; border: 2px solid transparent; background: var(--sup); cursor: pointer; opacity: .55; scroll-snap-align: start; transition: opacity .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.tira img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.tira:hover { opacity: .9; transform: translateY(-2px); }
.tira.on { opacity: 1; border-color: var(--acc); }
.ficha > * { min-width: 0; }
.bajo-fotos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.bajo-fotos .lk { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.bajo-fotos .lk:hover { text-decoration: underline; }
.pruebalo .demo-pantalla { aspect-ratio: 16 / 9; }
.pruebalo .demo-poster { object-fit: cover; object-position: 50% 0; filter: brightness(.6); }

/* ---------- Visor de capturas ---------- */
dialog.visor { width: min(1240px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 14px; border: 1px solid var(--linea2); border-radius: 22px; background: var(--sup); color: var(--tinta); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
dialog.visor[open] { animation: sube .3s var(--ease) both; }
dialog.visor::backdrop { background: rgba(5, 7, 12, .85); }
.visor .marco-v { position: relative; border-radius: 14px; overflow: hidden; background: #05070c; }
.visor .marco-v img { display: block; width: 100%; max-height: calc(100vh - 190px); object-fit: contain; transition: opacity .2s var(--ease); }
.visor .marco-v img.cambia { opacity: 0; }
.visor .flecha { opacity: 1; }
.visor .barra-v { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 4px 4px; }
.visor .barra-v .tx { flex: 1 1 260px; min-width: 0; }
.visor .barra-v b { display: block; font-size: 16px; }
.visor .barra-v small { font-size: 13.5px; color: var(--suave); }
.visor .logo.g { width: 42px; height: 42px; }
.visor .cuenta-v { font-size: 13px; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }

/* ---------- Ficha: icono junto al nombre ---------- */
.nombre-g { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.nombre-g h1 { min-width: 0; overflow-wrap: anywhere; }
.pruebalo .vista { flex-wrap: wrap; max-width: 100%; }
/* Grafito sigue en monocromo: sin el color de cada script en brillos y bordes. */
:root[data-tema="grafito"] .tarjeta .pl::before { background: radial-gradient(closest-side, var(--luz1), transparent); }
:root[data-tema="grafito"] .tarjeta:hover, :root[data-tema="grafito"] .bt:hover { border-color: var(--linea2); }
:root[data-tema="grafito"] .tarjeta .puntos i.on { background: #fff; }
:root[data-tema="grafito"] .bt-ir, :root[data-tema="grafito"] .claves .i { color: var(--tinta); }

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .arma, .ficha, .req-grid, .cg, .banda, .comprar { grid-template-columns: minmax(0, 1fr); }
  .banda.rev-orden .medio { order: 0; }
  .ventajas, .juntos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compra, .suma { position: static; }
  .ocultar-m { display: none !important; }
  .funciones { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .fc-duo { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dock-s { overflow-x: auto; justify-content: flex-start; }
  .dk-n { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .buscar { display: none; }
  .h1 { font-size: 38px; }
  .h2 { font-size: 26px; }
  .mini { width: 104px; height: 64px; }
  .portada { min-height: 0; padding-top: 36px; }
  .portada-txt .lead { font-size: 15.5px; }
  .dispositivos { --alto: 220px; width: calc(100% - 16px); margin-top: 34px; }
  .d-portatil { left: 12%; width: 76%; top: 26px; }
  .d-tablet { width: 46%; top: 8%; }
  .dock-sec { margin-top: -30px; }
  .dock-s { height: 64px; gap: 6px; padding: 8px 10px; }
  .dk-ic { width: 42px; height: 42px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .bt.b-grande { grid-row: span 2; }
  .bt.b-grande, .bt.b-ancho { grid-column: auto; }
  .b-ancho .bt-tx, .bt-todos .bt-tx { max-width: 56%; }
  .bt-rejilla { grid-template-columns: repeat(3, 40px); gap: 8px; right: 12px; }
  .logo.bt-l { width: 40px; height: 40px; }
  .scr-cab { padding: 40px 0 24px; }
  .scr-barra { position: static; }
  .compra h1 { font-size: 26px; }
  .compra .logo.g { width: 44px; height: 44px; }
  .pruebalo .vt { padding: 0 10px; font-size: 13px; }
  .arma { padding: 18px; }
  .ventajas, .juntos, .incluye { grid-template-columns: minmax(0, 1fr); }
  .mas { grid-template-columns: minmax(0, 1fr); }
  .mas-i:nth-child(2) { border-top: 1px solid var(--linea); }
  .mas-i:nth-child(even) { border-left: 0; }
  .texto-banda h3, .cta-tx h2 { font-size: 26px; }
  .cta-tx { padding: 28px; }
  .temas span { display: none; }
  .flotante { display: none; }
  .tira { width: 92px; }
  .foto-g .pie-foto { display: none; }
  .foto-g .flecha, .ampliar { opacity: 1; }
  .visor .flecha { width: 36px; height: 36px; margin-top: -18px; }
  .visor .flecha.izq { left: 6px; }
  .visor .flecha.der { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; }
}


/* =====================================================================================
   Tienda en Tebex: lo que añade la plantilla al diseño del boceto
   (cabecera con sesión, paquetes del servidor, módulos, login, opciones y documentación)
   ===================================================================================== */

/* Pie legal de Tebex (obligatorio): con los colores del pie */
:root {
  --tebex-legal-footer-background-color: #07090e;
  --tebex-legal-footer-text-color: #9aa0ad;
  --tebex-legal-footer-border-color: rgba(255, 255, 255, .08);
  --tebex-legal-footer-logo-color: #9aa0ad;
  --tebex-legal-footer-max-width: 1216px;
}

/* ---------- Idioma: cada texto fijo va en español y en inglés; se ve el elegido ---------- */
html[data-idioma="en"] [data-l="es"], html:not([data-idioma="en"]) [data-l="en"] { display: none !important; }
.idioma { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 11px; background: var(--gris2); }
.idioma button { height: 34px; min-width: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font: 700 12.5px 'Archivo', sans-serif; letter-spacing: .4px; color: var(--suave); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.idioma button:hover { color: var(--tinta); }
html:not([data-idioma="en"]) .idioma [data-idi="es"], html[data-idioma="en"] .idioma [data-idi="en"] { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.nav .idioma.solo-m { align-self: flex-start; margin: 6px 8px; }

img.roto { opacity: 0; }
.pronto { color: var(--suave); font-weight: 600; }
.precio del, .gran del, .pk-precio del { color: var(--suave); font-weight: 500; font-size: .78em; margin-right: 4px; }

/* ---------- Banda de ofertas ---------- */
.banda-oferta { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 16px; background: var(--acc); color: var(--acc-txt); font-size: 13.5px; font-weight: 600; text-align: center; }

/* ---------- Cabecera ---------- */
.marca-logo { display: block; height: 38px; width: auto; max-width: 170px; object-fit: contain; }
.nl.on { background: var(--gris); color: var(--tinta); }
.nl-grupo { position: relative; }
.nl-grupo > .nl { display: inline-flex; align-items: center; gap: 4px; }
.nl-sub { position: absolute; left: 0; top: calc(100% + 6px); min-width: 200px; display: none; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea2); box-shadow: 0 24px 50px -16px var(--sombra); z-index: 60; }
.nl-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nl-grupo:hover .nl-sub, .nl-grupo:focus-within .nl-sub { display: flex; animation: sube .2s var(--ease) both; }
.nl-sub a { padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--tinta2); text-decoration: none; }
.nl-sub a:hover, .nl-sub a.on { background: var(--gris2); color: var(--tinta); }
.nl-sub a.sub2 { padding-left: 24px; font-size: 13.5px; }
.solo-m, .menu-m { display: none !important; }
.usuario { max-width: 210px; }
.usuario .u-n { overflow: hidden; text-overflow: ellipsis; }
.usuario .u-s { display: none; }
.usuario:hover .u-n { display: none; }
.usuario:hover .u-s { display: inline; }

/* ---------- Portada: atajo del servidor y su sección ---------- */
.srv-tira { padding-top: 34px; }
.srv-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 18px; border-radius: 20px; background: var(--sup); border: 1px solid var(--linea); }
.srv-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--gris2); color: var(--acc); }
.srv-tx { flex: 1 1 300px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srv-tx b { font-size: 16px; }
.srv-tx small { font-size: 14px; color: var(--suave); line-height: 1.5; }
.srv-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.srv-texto { padding: 26px 28px; border-radius: 22px; background: var(--sup); border: 1px solid var(--linea); }
a.ventaja { color: inherit; text-decoration: none; }
a.ventaja:hover { border-color: var(--linea2); }

/* ---------- Texto con formato que viene de Tebex (descripciones, páginas, módulos) ---------- */
.texto-rico { font-size: 15.5px; line-height: 1.7; color: var(--tinta2); overflow-wrap: anywhere; }
.texto-rico > :first-child { margin-top: 0; }
.texto-rico > :last-child { margin-bottom: 0; }
.texto-rico p { margin: 0 0 14px; }
.texto-rico h1, .texto-rico h2, .texto-rico h3, .texto-rico h4 { margin: 24px 0 10px; color: var(--tinta); line-height: 1.2; font-stretch: 112%; }
.texto-rico h2 { font-size: 22px; }
.texto-rico h3 { font-size: 18px; }
.texto-rico h4 { font-size: 16px; }
.texto-rico strong, .texto-rico b { color: var(--tinta); }
.texto-rico ul, .texto-rico ol { margin: 0 0 14px; padding-left: 22px; }
.texto-rico li { margin: 4px 0; }
.texto-rico a { color: var(--acc); text-underline-offset: 3px; }
.texto-rico hr { border: 0; border-top: 1px solid var(--linea); margin: 22px 0; }
.texto-rico img { height: auto; border-radius: 10px; }
.texto-rico table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14.5px; }
.texto-rico th, .texto-rico td { padding: 8px 10px; border: 1px solid var(--linea); text-align: left; }
.texto-rico code { padding: 1px 6px; border-radius: 6px; background: var(--gris2); font: 13.5px ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--tinta); }

/* ---------- Módulos de la barra lateral (pagos recientes, cliente top, textos...) ---------- */
.modulos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.modulos:empty { display: none; }
.modulos-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; align-items: start; }
.mod { padding: 18px; border-radius: 20px; background: var(--sup); border: 1px solid var(--linea); }
.mod-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 13px; font-stretch: 75%; font-weight: 600; text-transform: uppercase; letter-spacing: .9px; color: var(--suave); }
.mod-cuerpo { font-size: 14.5px; }
.mod-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mod-lista li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea); }
.mod-lista li:first-child { border-top: 0; padding-top: 0; }
.mod-av { width: 36px; height: 36px; border-radius: 10px; flex: none; object-fit: cover; display: grid; place-items: center; background: var(--gris2); color: var(--suave); }
.mod-av.g { width: 48px; height: 48px; border-radius: 12px; }
.mod-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mod-tx b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-tx small, .mod-tx time { font-size: 12.5px; color: var(--suave); }
.mod-top-c { display: flex; align-items: center; gap: 12px; }
.mod-vacio { margin: 8px 0 0; font-size: 13.5px; color: var(--suave); }
.mod-form { display: flex; flex-direction: column; gap: 10px; }
.mod-aviso { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.mod-aviso.bien { background: var(--ok-fondo); color: var(--ok); }
.mod-aviso.mal { background: var(--aviso-fondo); color: var(--aviso); }
.mod-barra { height: 8px; border-radius: 999px; background: var(--gris2); overflow: hidden; margin-top: 10px; }
.mod-barra i { display: block; height: 100%; border-radius: 999px; background: var(--acc); }
.mod-img { width: 100%; border-radius: 12px; margin-bottom: 10px; }
.mod-punto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--suave); }
.mod-punto::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #ef4444; }
.mod-punto.on::before { background: #34d399; }
.mod-ip { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 700; color: var(--tinta); cursor: pointer; }
.mod-destacado .tarjeta { border: 0; background: transparent; }

/* ---------- Categorías del servidor ---------- */
.cat-cab { padding-bottom: 8px; }
.cat-h1 { margin: 6px 0 14px; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.02; letter-spacing: -1px; }
.cat-desc { max-width: 820px; margin-bottom: 18px; }
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 10px; }
.cat-grid > .modulos { position: sticky; top: 88px; }
.aviso-cat { margin: 0 0 18px; padding: 16px 20px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); }
.rejilla.pks { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.tarjeta.pk .pl { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tarjeta.pk .pl img { width: 78%; height: 78%; aspect-ratio: auto; object-fit: contain; box-shadow: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); border-radius: 0; }
.tarjeta.pk .nombre { font-size: 16px; }
.pk-sin { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--gris2); color: var(--suave); }
.pk-sin .i { width: 28px; height: 28px; }
.pk-oferta { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--acc); color: var(--acc-txt); font-size: 12.5px; font-weight: 700; }
.tarjeta .pl { position: relative; }
.acciones-pk { display: flex; flex-direction: column; gap: 10px; margin-top: auto; transition: opacity .2s var(--ease); }
.acciones-pk.cargando, .cesta-item.cargando, .opc-form.cargando { opacity: .55; pointer-events: none; }
.pk-precio { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pk-precio strong { font-size: 22px; line-height: 1; }
.pk-precio .periodo { font-size: 12.5px; color: var(--suave); }
.pk-precio .libre { font-size: 14px; font-weight: 600; color: var(--tinta2); }
.pk-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pk-botones > .btn[data-anadir-pk] { flex: 1 1 auto; }
.pk-botones .btn[aria-disabled="true"] { background: var(--gris2); color: var(--suave); box-shadow: none; pointer-events: none; }
.en-cesta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; }
.en-cesta[hidden], .pk-botones [hidden] { display: none !important; }
.cantidad { display: inline-flex; align-items: center; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid var(--linea2); background: var(--fondo2); }
.cant-b { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--tinta); cursor: pointer; }
.cant-b:hover { background: var(--gris2); }
.cant-n { min-width: 34px; text-align: center; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
input.cant-n { width: 44px; height: 36px; border: 0; background: transparent; color: var(--tinta); -moz-appearance: textfield; }
input.cant-n::-webkit-outer-spin-button, input.cant-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.regalar { width: 44px; padding: 0; }
.pk-motivo { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--aviso); }
.cuenta-atras { background: var(--aviso-fondo); border-color: var(--aviso-linea); color: var(--aviso); font-variant-numeric: tabular-nums; }

/* ---------- Ficha de un paquete normal ---------- */
.pk-galeria { display: flex; flex-direction: column; }
.pk-foto { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; border: 1px solid var(--linea); overflow: hidden; display: grid; place-items: center; }
.pk-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); border: 0; }
img.pk-slide { cursor: zoom-in; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45)); }
iframe.pk-slide { padding: 0; }
.pk-slide.on { opacity: 1; pointer-events: auto; }
.pk-vacia { color: var(--suave); }
.pk-vacia .i { width: 46px; height: 46px; }
.pk-titulo { font-size: 36px !important; }
.pk-desc { margin-top: 28px; padding: 26px 28px; border-radius: 22px; background: var(--sup); border: 1px solid var(--linea); }
.ficha-carga { display: flex; flex-direction: column; gap: 16px; max-width: 520px; padding: 40px 0; }
.ficha-carga h1 { margin: 0; font-size: 40px; }
.lk-doc { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--acc); }
.lk-doc:hover { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.tb-doc { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; line-height: 40px; }
.tb-doc:hover { color: var(--tinta); }
.incluye a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); font-size: 14px; line-height: 1.4; color: var(--tinta2); text-decoration: none; transition: border-color .2s var(--ease); }
.incluye a:hover { border-color: var(--linea2); color: var(--tinta2); }
.incluye a b { display: block; color: var(--tinta); font-size: 14.5px; }
.app-t.pronto { opacity: .5; cursor: not-allowed; }

/* ---------- Carrito ---------- */
.cesta-item { position: relative; }
a.quitar { text-decoration: none; }
.cesta-item .mini .pk-sin { width: 44px; height: 44px; border-radius: 12px; }
.cesta-item .der { gap: 10px; }
.opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--suave); }
.opciones strong { color: var(--tinta2); }
.lineas { display: flex; flex-direction: column; gap: 8px; }
.cg { margin: 0; }

/* ---------- Iniciar sesión ---------- */
.login { display: grid; place-items: center; padding: 70px 32px 20px; }
.login-caja { width: min(520px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 34px; border-radius: 24px; background: var(--sup); border: 1px solid var(--linea); box-shadow: 0 30px 70px -30px var(--sombra); }
.login-caja h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.login-caja p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta2); }
.login-caja .nota { font-size: 13px; color: var(--suave); }
.login-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--acc); color: var(--acc-txt); }
.login-ic .i { width: 26px; height: 26px; }

/* ---------- Formulario de opciones de un paquete ---------- */
.opciones-p, main.opciones { display: grid; place-items: center; padding: 60px 32px 20px; }
.opc-caja { width: min(560px, 100%); display: flex; flex-direction: column; gap: 18px; }
main.opciones .opc-caja { padding: 30px; border-radius: 24px; background: var(--sup); border: 1px solid var(--linea); }
.opc-caja h2 { margin: 0; font-size: 22px; line-height: 1.2; padding-right: 40px; }
.opc-form { display: flex; flex-direction: column; gap: 16px; }
.opc-campo { display: flex; flex-direction: column; gap: 8px; }
.opc-campo label, .opc-campo p { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.opc-campo select, .opc-campo input[type="text"], .opc-campo input[type="number"] { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linea2); background: var(--fondo2); color: var(--tinta); font: 500 14.5px 'Archivo', sans-serif; outline: 0; }
.opc-campo select:focus, .opc-campo input:focus { border-color: var(--acc); }
.opc-moneda { display: grid; place-items: center; padding: 0 6px; font-weight: 700; color: var(--suave); }
dialog.dlg-opc { width: min(580px, calc(100% - 32px)); padding: 28px; }
.dlg-x { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: var(--gris2); color: var(--tinta); cursor: pointer; }
dialog.dlg .campo { margin-top: 4px; }
dialog.dlg .fila-btn { margin-top: 4px; }
dialog.dlg p a { color: var(--acc); }

/* ---------- Pie ---------- */
.pie-btn { color: #f2f2f0; border-color: rgba(255, 255, 255, .18); height: 40px; }
.pie-btn:hover { background: #f2f2f0; color: #0b0d12; border-color: #f2f2f0; }
.pagos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pagos li { height: 34px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.pagos img { display: block; height: 20px; width: auto; }

/* ---------- Documentación ---------- */
.docs { display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px; gap: 34px; max-width: 1440px; margin: 0 auto; padding: 0 32px; align-items: start; }
.docs-menu-b { display: none !important; }
.docs-lado { position: sticky; top: 68px; max-height: calc(100vh - 68px); overflow-y: auto; padding: 22px 6px 30px 0; scrollbar-width: thin; scrollbar-color: var(--linea2) transparent; }
.docs-lado-cab { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.docs-idioma { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--gris2); }
.docs-idioma button { height: 34px; border: 0; border-radius: 9px; background: transparent; font: 600 13.5px 'Archivo', sans-serif; color: var(--suave); cursor: pointer; }
.docs-idioma button.on { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.docs-filtro { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea); color: var(--suave); }
.docs-filtro:focus-within { border-color: var(--acc); }
.docs-filtro input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--tinta); font-size: 14px; }
.docs-grupo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.docs-grupo .cn { font-size: 12px; color: var(--suave); padding: 0 10px 6px; }
.docs-l { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 14px; color: var(--tinta2); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.docs-l:hover { background: var(--gris); color: var(--tinta); }
.docs-l.on { background: var(--gris2); color: var(--tinta); font-weight: 600; }
.docs-l .logo { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.docs-ic { width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--suave); }
.docs-ic .i { width: 17px; height: 17px; }
.docs-cuerpo { min-width: 0; padding: 22px 0 10px; }
.docs-cargando { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--suave); }
.docs-cargando .demo-carga { position: static; width: 22px; height: 22px; margin: 0; }
.docs-ruta { padding-top: 0; }
.docs-h1 { margin: 4px 0 8px; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -.8px; }
.docs-desc { margin: 0 0 22px; max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--suave); }
.docs-producto { display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; padding: 16px; border-radius: 20px; background: var(--sup); border: 1px solid var(--linea); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); }
.docs-prod-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.docs-prod-cab > div:nth-child(2) { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.docs-prod-cab b { font-size: 19px; }
.docs-prod-cab small { font-size: 13.5px; color: var(--suave); }
.docs-prod-cab .logo.g { width: 46px; height: 46px; }
.docs-fotos { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: thin; }
.docs-fotos button { flex: 0 0 auto; width: 150px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--fondo2); cursor: zoom-in; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.docs-fotos button:hover { transform: translateY(-2px); border-color: var(--c, var(--acc)); }
.docs-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }

.docs-html { font-size: 16px; line-height: 1.72; color: var(--tinta2); }
.docs-html > :first-child { margin-top: 0; }
.docs-html h2 { margin: 42px 0 12px; font-size: 25px; line-height: 1.2; color: var(--tinta); font-stretch: 112%; font-weight: 800; scroll-margin-top: 88px; }
.docs-html h3 { margin: 28px 0 8px; font-size: 19px; color: var(--tinta); scroll-margin-top: 88px; }
.docs-html h4 { margin: 0 0 6px; font-size: 16.5px; color: var(--tinta); }
.docs-html p { margin: 0 0 14px; }
.docs-html ul, .docs-html ol { margin: 0 0 16px; padding-left: 22px; }
.docs-html li { margin: 5px 0; }
.docs-html li::marker { color: var(--suave); }
.docs-html strong { color: var(--tinta); }
.docs-html a { color: var(--acc); text-underline-offset: 3px; }
.docs-html code { padding: 1px 6px; border-radius: 6px; background: var(--gris2); font: 13.5px ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--tinta); overflow-wrap: anywhere; }
.docs-html pre { position: relative; margin: 0 0 16px; padding: 16px 18px; border-radius: 14px; background: var(--codigo); border: 1px solid var(--linea); overflow-x: auto; font: 13.5px/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace; color: #dfe4ee; }
.docs-html pre code { padding: 0; background: none; color: inherit; font: inherit; }
.docs-html .code { margin: 0 0 16px; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); }
.docs-html .code .ct { padding: 8px 16px; background: color-mix(in srgb, var(--codigo) 70%, var(--sup)); font: 12.5px ui-monospace, Consolas, monospace; color: #9aa3b5; border-bottom: 1px solid var(--linea); }
.docs-html .code pre { margin: 0; border: 0; border-radius: 0; }
.docs-copiar { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; background: rgba(255, 255, 255, .06); color: #c7cedb; font: 600 12px 'Archivo', sans-serif; cursor: pointer; opacity: 0; transition: opacity .2s var(--ease); }
.docs-html pre:hover .docs-copiar, .docs-copiar:focus-visible { opacity: 1; }
.docs-copiar .i { width: 14px; height: 14px; }
.docs-html img { display: block; max-width: 100%; height: auto; margin: 18px auto; border-radius: 14px; border: 1px solid var(--linea); background: var(--fondo2); cursor: zoom-in; }
.docs-html table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; display: block; overflow-x: auto; }
.docs-html th, .docs-html td { padding: 9px 12px; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.docs-html th { background: var(--sup); color: var(--tinta); font-weight: 700; }
.docs-html .stepper { margin: 18px 0 22px; }
.docs-html .step { position: relative; display: flex; gap: 18px; padding-bottom: 20px; }
.docs-html .step:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 38px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--linea2); }
.docs-html .sn { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--acc); color: var(--acc-txt); font-weight: 800; font-size: 14.5px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 18%, transparent); }
.docs-html .sb { flex: 1; min-width: 0; padding-top: 5px; }
.docs-html .sb > :last-child { margin-bottom: 0; }
.docs-html .hint { display: flex; gap: 12px; margin: 18px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linea2); background: var(--sup); }
.docs-html .hint::before { content: ''; width: 4px; border-radius: 4px; flex: none; background: var(--acc); }
.docs-html .hint > div { flex: 1; min-width: 0; }
.docs-html .hint p:last-child { margin-bottom: 0; }
.docs-html .hint.success::before { background: #34d399; }
.docs-html .hint.warning::before { background: #fbbf24; }
.docs-html .hint.danger::before { background: #f87171; }
.docs-html details { margin: 8px 0; border-radius: 14px; border: 1px solid var(--linea); background: var(--sup); }
.docs-html details[open] { border-color: var(--linea2); }
.docs-html summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; font-weight: 600; color: var(--tinta); list-style: none; }
.docs-html summary::-webkit-details-marker { display: none; }
.docs-html summary::before { content: '+'; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--gris2); color: var(--suave); font-weight: 700; }
.docs-html details[open] summary::before { content: '−'; }
.docs-html .db { padding: 0 16px 14px 48px; }
.docs-html .db > :last-child { margin-bottom: 0; }
.docs-html img.logo { display: inline-block; margin: 0; border: 0; border-radius: 23%; background: none; cursor: inherit; }
.docs-html a.docs-t { color: var(--tinta); text-decoration: none; }
.docs-html .docs-t-img img { border: 0; background: none; }
.docs-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 18px 0 24px; }
.docs-t { display: flex; flex-direction: column; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); overflow: hidden; color: var(--tinta); text-decoration: none; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.docs-t:hover { color: var(--tinta); border-color: color-mix(in srgb, var(--c) 55%, var(--linea2)); transform: translateY(-3px); }
.docs-t-img { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.docs-t-img img { width: 86%; margin: 0; border: 0; border-radius: 6px; box-shadow: 0 14px 24px -10px var(--sombra); cursor: pointer; }
.docs-t-tx { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.docs-t-tx small { font-size: 13px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-t .logo { width: 24px; height: 24px; }
.docs-pasar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linea); }
.docs-pasar a { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: border-color .2s var(--ease); }
.docs-pasar a:hover { color: var(--tinta); border-color: var(--acc); }
.docs-pasar a.sig { text-align: right; grid-column: 2; }
.docs-pasar small { font-size: 12.5px; color: var(--suave); }
.docs-toc { position: sticky; top: 68px; display: flex; flex-direction: column; gap: 2px; padding: 26px 0; max-height: calc(100vh - 68px); overflow-y: auto; }
.docs-toc .cn { font-size: 12px; color: var(--suave); margin-bottom: 6px; }
.docs-toc a { padding: 5px 0 5px 12px; border-left: 2px solid var(--linea); font-size: 13.5px; color: var(--suave); text-decoration: none; }
.docs-toc a:hover { color: var(--tinta); border-left-color: var(--acc); }
.docs-res { display: flex; flex-direction: column; gap: 8px; }
.docs-res a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.docs-res a:hover { color: var(--tinta); border-color: var(--linea2); }
.docs-res small { font-size: 13.5px; line-height: 1.5; color: var(--suave); }
body[data-pagina="pagina"] .pie { margin-top: 64px; }

/* ---------- Portada: muro de capturas en movimiento ---------- */
.muro { display: flex; flex-direction: column; gap: 14px; margin-top: -8px; padding: 14px 0 30px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.muro-fila { display: flex; gap: 14px; width: max-content; animation: muro var(--dur, 80s) linear infinite; }
.muro-fila.inv { animation-direction: reverse; }
.muro:hover .muro-fila { animation-play-state: paused; }
@keyframes muro { to { transform: translateX(calc(-50% - 7px)); } }
.mt { position: relative; flex: none; width: 340px; aspect-ratio: 16 / 9; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: var(--sup); cursor: zoom-in; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.mt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: transform .6s var(--ease); }
.mt:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, var(--linea2)); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c) 60%, #000); }
.mt:hover img { transform: scale(1.05); }
.mt-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 4px; border-radius: 999px; background: rgba(8, 10, 16, .82); color: #fff; font-size: 12.5px; font-weight: 600; }
.mt-tag .logo { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; }

/* ---------- Portada: escaparate por categorías ---------- */
.vitrina { display: flex; flex-direction: column; gap: 16px; }
.vt-cats { margin: 0; }
.vt-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: stretch; }
.vt-lista { display: flex; flex-direction: column; gap: 6px; max-height: 540px; overflow-y: auto; padding: 2px 6px 2px 2px; scrollbar-width: thin; scrollbar-color: var(--linea2) transparent; }
.vt-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea); background: var(--sup); color: var(--tinta); text-decoration: none; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.vt-item:hover, .vt-item.on { color: var(--tinta); border-color: color-mix(in srgb, var(--c) 55%, var(--linea2)); background: var(--sup2); }
.vt-item.on { transform: translateX(4px); box-shadow: inset 3px 0 0 var(--c); }
.vt-item .logo { width: 38px; height: 38px; }
.vt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vt-tx b { font-size: 15px; }
.vt-tx small { font-size: 13px; line-height: 1.4; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-item .precio { font-size: 13.5px; }
.vt-pantalla { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; border-radius: 22px; border: 1px solid var(--linea); overflow: hidden; }
.vt-pantalla::before { content: ''; position: absolute; inset: -25% -10% auto; height: 75%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--acc)) 40%, transparent), transparent); }
.vt-marco { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #07090e; box-shadow: 0 30px 60px -24px var(--sombra), 0 0 0 1px rgba(255, 255, 255, .06); }
.vt-img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transition: opacity .2s var(--ease), transform .4s var(--ease); }
.vt-img.cambia { opacity: 0; transform: scale(.985); }
.vt-cap { position: absolute; left: 12px; bottom: 14px; max-width: calc(100% - 24px); height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: rgba(8, 10, 16, .82); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.vt-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.vt-barra i { display: block; width: 0; height: 100%; background: var(--c, var(--acc)); }
.vt-barra i.corre { animation: vt-barra 3.2s linear forwards; }
@keyframes vt-barra { to { width: 100%; } }
.vt-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.vt-nombre { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.vt-nombre .precio { font-size: 15px; color: var(--tinta2); }

/* ---------- Portada: mapa de cómo se conectan los scripts ---------- */
.red { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: stretch; }
.red-mapa { position: relative; height: 640px; border-radius: 24px; border: 1px solid var(--linea); background: radial-gradient(45% 50% at 50% 50%, color-mix(in srgb, var(--acc) 14%, transparent), transparent), var(--sup); overflow: hidden; }
.red-lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.red-lineas .orbita { fill: none; stroke: var(--linea2); stroke-width: 1; stroke-dasharray: 2 7; opacity: .7; }
.red-lineas path { fill: none; stroke: var(--linea2); stroke-width: 1.2; opacity: .55; transition: opacity .3s var(--ease), stroke .3s var(--ease); }
.red-mapa.hay-sel .red-lineas path { opacity: .07; }
.red-lineas path.on { opacity: 1 !important; stroke: var(--acc); stroke-width: 2.4; stroke-dasharray: 7 7; animation: flujo 1.1s linear infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 60%, transparent)); }
@keyframes flujo { to { stroke-dashoffset: -28; } }
.red-n { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -32px); padding: 0; border: 0; background: none; color: var(--tinta2); cursor: pointer; }
.red-n.centro { transform: translate(-50%, -48px); }
.red-f { display: block; animation: flota 6s ease-in-out infinite; animation-delay: calc(var(--f, 0) * -.8s); }
.red-n .logo { display: block; width: 50px; height: 50px; border-radius: 26%; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.red-n.centro .logo { width: 84px; height: 84px; }
.red-n .logo.glifo { display: grid; }
.red-n:hover .logo { transform: scale(1.08); }
.red-n.sel .logo { transform: scale(1.16); box-shadow: 0 0 0 3px var(--sup), 0 0 0 5px var(--c), 0 18px 36px -10px color-mix(in srgb, var(--c) 70%, #000); }
.red-n.vec .logo { box-shadow: 0 0 0 3px var(--sup), 0 0 0 5px color-mix(in srgb, var(--acc) 75%, transparent), 0 12px 26px -10px rgba(0, 0, 0, .7); }
.red-et { padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); transition: background .2s var(--ease), color .2s var(--ease); }
.red-n.sel .red-et { background: var(--inv); color: var(--inv-txt); text-shadow: none; }
.red-n.vec .red-et { color: var(--tinta); }
.red-panel { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 24px; border: 1px solid var(--linea); background: var(--sup); max-height: 640px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linea2) transparent; }
.red-cab { display: flex; align-items: center; gap: 12px; }
.red-cab b { display: block; font-size: 20px; }
.red-cab small { font-size: 13px; color: var(--suave); }
.red-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta2); }
.red-n-tit { font-size: 12px; color: var(--suave); }
.red-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.red-lista li { padding: 12px; border-radius: 14px; background: var(--fondo2); border: 1px solid var(--linea); }
.red-lista a, .red-gen { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--tinta); text-decoration: none; }
.red-lista a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.red-lista .logo { width: 30px; height: 30px; border-radius: 24%; }
.red-gen .i { width: 30px; height: 30px; padding: 6px; border-radius: 24%; background: var(--gris2); }
.red-lista p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--suave); }
.red-panel .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Fotos del juego de fondo en las secciones de la portada ---------- */
.con-foto { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 72px; }
.con-foto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--foto) center / cover no-repeat; opacity: calc(var(--foto-portada) * .55); filter: var(--foto-filtro); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%); animation: foto-lenta 28s ease-in-out infinite alternate; }
@keyframes foto-lenta { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.con-foto .ventaja, .con-foto .pasos li, .con-foto .portal { background: color-mix(in srgb, var(--sup) 88%, transparent); }
#servidor { margin-top: 80px; }
@media (max-width: 700px) { #servidor { margin-top: 48px; } }
.con-foto .red-mapa { background: radial-gradient(45% 50% at 50% 50%, color-mix(in srgb, var(--acc) 16%, transparent), transparent), color-mix(in srgb, var(--sup) 78%, transparent); }

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 1280px) {
  .docs { grid-template-columns: 260px minmax(0, 1fr); }
  .docs-toc { display: none; }
  .red { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1100px) {
  .vt-grid, .red { grid-template-columns: minmax(0, 1fr); }
  .vt-lista, .red-panel { max-height: none; }
}
@media (max-width: 760px) {
  .mt { width: 260px; }
  .vt-pantalla { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .muro { overflow-x: auto; }
}
@media (max-width: 1100px) {
  .menu-m { display: inline-flex !important; width: 44px; padding: 0; }
  .solo-m { display: block !important; }
  .nav .idioma.solo-m { display: inline-flex !important; }
  body.menu-abierto .nav { display: flex; position: absolute; left: 16px; right: 16px; top: calc(100% + 6px); flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea2); box-shadow: 0 30px 60px -20px var(--sombra); z-index: 70; animation: sube .25s var(--ease) both; }
  body.menu-abierto .nav .nl { padding: 12px 14px; }
  .cab-in { position: relative; }
  .nl-grupo .nl-sub { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 0 12px; background: transparent; }
  .srv-grid, .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-grid > .modulos { position: static; }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-menu-b { display: inline-flex !important; margin-top: 16px; justify-self: start; }
  .docs-lado { display: none; position: static; max-height: none; padding: 14px 0 6px; }
  body.docs-menu .docs-lado { display: block; }
}
@media (max-width: 760px) {
  .ocultar-xs { display: none; }
  .srv-texto, .pk-desc { padding: 20px; }
  .login { padding: 34px 16px 10px; }
  .login-caja, main.opciones .opc-caja { padding: 24px; }
  .docs { padding: 0 16px; }
  .docs-pasar { grid-template-columns: minmax(0, 1fr); }
  .docs-pasar a.sig { grid-column: auto; }
  .docs-html .db { padding-left: 16px; }
  .pk-titulo { font-size: 28px !important; }
  .cesta-item { flex-wrap: wrap; }
  .cesta-item .der { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ---------- Atención al cliente: botón fijo en la esquina y su recuadro con el Discord ---------- */
.soporte { position: fixed; right: 20px; bottom: 20px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.soporte > * { pointer-events: auto; }
.soporte-btn { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: #5865f2; color: #fff; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(88, 101, 242, .75), inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .25s var(--ease), filter .25s var(--ease); }
.soporte-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.soporte-btn .i { position: absolute; width: 26px; height: 26px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.soporte-btn .ic-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.soporte.abierto .soporte-btn .ic-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.soporte.abierto .soporte-btn .ic-x { opacity: 1; transform: none; }
.soporte-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: soporte-aviso 2.4s ease-out 1.5s 2; pointer-events: none; }
@keyframes soporte-aviso { from { box-shadow: 0 0 0 0 rgba(88, 101, 242, .55); } to { box-shadow: 0 0 0 18px rgba(88, 101, 242, 0); } }
.soporte-caja { position: relative; width: 340px; padding: 18px; border-radius: 20px; border: 1px solid var(--linea2); background: var(--sup); color: var(--tinta); box-shadow: 0 28px 60px -18px var(--sombra); transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; }
.soporte.abierto .soporte-caja { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s; }
.soporte-cab { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.soporte-av { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: #5865f2; color: #fff; }
.soporte-av .i { width: 22px; height: 22px; }
.soporte-cab b { display: block; font-size: 16px; line-height: 1.25; }
.soporte-cab small { font-size: 12.5px; color: var(--suave); }
.soporte-msg { margin: 14px 0 16px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: var(--fondo2); font-size: 14px; line-height: 1.5; color: var(--tinta2); }
.soporte-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--suave); cursor: pointer; }
.soporte-x:hover { background: var(--fondo2); color: var(--tinta); }
@media (max-width: 600px) {
  .soporte { right: 14px; bottom: 14px; }
  .soporte-btn { width: 52px; height: 52px; }
  .soporte-caja { width: calc(100vw - 28px); }
  body:has(.toast.ver) .soporte:not(.abierto) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .soporte-btn::after { animation: none; }
  .soporte-caja, .soporte-btn .i { transition: none; }
}

/* ---------- Portada: botones como los de una tienda de apps (icono en su cuadro y dos líneas) ---------- */
.portada-btns { gap: 12px; margin-top: 12px; }
.portada-btns .btn { height: 66px; padding: 0 24px 0 10px; gap: 12px; border-radius: 18px; text-align: left; }
.portada-btns .btn .i { width: 20px; height: 20px; }
.portada-btns .btn.acc { padding-right: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 40px -12px var(--acc); }
.portada-btns .btn.out, .portada-btns .btn.dc { background: color-mix(in srgb, var(--fondo2) 70%, transparent); border-color: color-mix(in srgb, var(--tinta) 16%, transparent); color: var(--tinta); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.portada-btns .btn.out:hover, .portada-btns .btn.dc:hover { background: color-mix(in srgb, var(--fondo2) 70%, var(--tinta) 10%); border-color: color-mix(in srgb, var(--tinta) 40%, transparent); color: var(--tinta); filter: none; }
.pb-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--acc-txt) 18%, transparent); }
.portada-btns .pb-ic .i { width: 22px; height: 22px; }
.portada-btns .btn.out .pb-ic { background: var(--gris2); }
.portada-btns .btn.dc .pb-ic { background: #5865f2; color: #fff; }
.pb-tx { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.pb-tx small { font-size: 11px; font-weight: 600; font-stretch: 75%; letter-spacing: .9px; text-transform: uppercase; opacity: .75; }
.pb-tx b { font-size: 17px; font-weight: 700; }
.portada-btns .btn.acc .i-arrow { margin-left: 6px; }
@media (max-width: 700px) {
  .portada-btns { width: 100%; gap: 10px; }
  .portada-btns .btn { flex: 1 1 calc(50% - 5px); min-width: 0; height: 60px; padding: 0 12px 0 8px; gap: 10px; border-radius: 16px; }
  .portada-btns .btn.acc { flex-basis: 100%; }
  .portada-btns .btn.acc .i-arrow { margin-left: auto; }
  .pb-ic { width: 42px; height: 42px; border-radius: 12px; }
  .pb-tx small { font-size: 10px; }
  .pb-tx b { font-size: 15.5px; }
}
/* Móviles estrechos: «Documentación» no cabe con el icono grande */
@media (max-width: 380px) {
  .portada-btns .btn { padding: 0 8px 0 6px; gap: 8px; }
  .pb-ic { width: 34px; height: 34px; border-radius: 10px; }
  .portada-btns .pb-ic .i { width: 18px; height: 18px; }
  .pb-tx b { font-size: 14.5px; }
}
@media (max-width: 340px) { .portada-btns .btn:not(.acc) .pb-ic { display: none; } }
/* En pantallas altas el texto baja hacia el centro del espacio libre en vez de dejar un hueco bajo los botones */
@media (min-width: 701px) {
  .portada-txt { margin-top: auto; }
  /* Hueco fijo bajo los botones para los iconos que flotan sobre los dispositivos (y estos encogen lo mismo para seguir cabiendo) */
  .portada-txt { margin-bottom: 40px; }
  .dispositivos { --alto: clamp(240px, calc(100vh - 600px), 470px); }
}

/* ---------- Portada: entrada escalonada (cabecera, título línea a línea, texto, botones, dispositivos, iconos y dock) ---------- */
@keyframes intro-sube { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
@keyframes intro-baja { from { opacity: 0; translate: 0 -14px; } }
@keyframes intro-fondo { from { opacity: 0; } }
@keyframes intro-pop { from { opacity: 0; scale: .4; } }
body[data-pagina="inicio"] .cab { animation: intro-baja .7s var(--ease) backwards; }
.portada-fondo { animation: intro-fondo 1.6s ease backwards; }
.portada-txt .kicker.rv { animation: intro-sube .8s var(--ease) .15s backwards; }
.portada-h1.rv { animation: intro-sube 1s var(--ease) .3s backwards; }
.portada-h1 .tono { display: inline-block; animation: intro-sube 1s var(--ease) .55s backwards; }
.portada-txt .lead.rv { animation: intro-sube .9s var(--ease) .75s backwards; }
.portada-btns.rv { animation: none; }
.portada-btns > .btn { animation: intro-sube .8s var(--ease) backwards; }
.portada-btns > .btn:nth-child(1) { animation-delay: .9s; }
.portada-btns > .btn:nth-child(2) { animation-delay: 1s; }
.portada-btns > .btn:nth-child(3) { animation-delay: 1.1s; }
.d-portatil { animation: llega-abajo 1.1s var(--ease) 1s both; }
.d-portatil .tapa.abre { animation: abre-tapa 1.5s var(--ease) 1.45s backwards; }
.d-izq { animation: llega-izq 1.1s var(--ease) 1.25s both; }
.d-der { animation: llega-der 1.1s var(--ease) 1.4s both; }
.dispositivos .flotante { animation: flota-ic var(--dur, 7s) ease-in-out infinite, intro-pop .6s var(--ease) backwards; animation-delay: var(--del, 0s), var(--ent, 1.7s); }
.dock-sec .dock-s.rv { animation: intro-sube .9s var(--ease) 1.5s backwards; }
.dock-s .dk { animation: intro-pop .5s var(--ease) var(--ent, 1.7s) backwards; }
body[data-pagina="inicio"] .soporte-btn { animation: intro-pop .5s var(--ease) 2.3s backwards; }
body[data-pagina="inicio"] .soporte-btn::after { animation-delay: 2.9s; }

/* ---------- Portada: «Roleplay.» como un letrero de neón que se enciende parpadeando y de vez en cuando titila ---------- */
.portada-h1 .tono {
  --neon: color-mix(in srgb, var(--acc) 80%, #fff);
  --neon-on: #f5f8ff;
  --neon-off: #5a6380;
  --neon-medio: #8b93ad;
  --encendido: 0 0 2px #fff, 0 0 9px var(--neon), 0 0 20px var(--neon), 0 0 44px var(--acc), 0 0 90px var(--acc);
  --apagado: 0 0 1px rgba(255, 255, 255, .1);
  font-weight: 300; letter-spacing: .01em; color: var(--neon-on); text-shadow: var(--encendido);
  animation: intro-sube 1s var(--ease) .55s backwards, neon-enciende 1.6s steps(1, end) 1.2s backwards, neon-titila 9s steps(1, end) 6s infinite;
}
/* Con el fondo claro el tubo es del color del acento y brilla menos */
:root[data-tema="claro"] .portada-h1 .tono {
  --neon-on: color-mix(in srgb, var(--acc) 82%, #000);
  --neon-off: color-mix(in srgb, var(--acc) 22%, var(--fondo));
  --neon-medio: color-mix(in srgb, var(--acc) 45%, var(--fondo));
  --encendido: 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent), 0 0 12px color-mix(in srgb, var(--acc) 45%, transparent), 0 0 32px color-mix(in srgb, var(--acc) 30%, transparent);
  --apagado: 0 0 0 transparent;
  font-weight: 400;
}
@keyframes neon-enciende {
  0% { color: var(--neon-off); text-shadow: var(--apagado); }
  12% { color: var(--neon-on); text-shadow: var(--encendido); }
  18% { color: var(--neon-off); text-shadow: var(--apagado); }
  34% { color: var(--neon-on); text-shadow: var(--encendido); }
  40% { color: var(--neon-medio); text-shadow: var(--apagado); }
  47%, 100% { color: var(--neon-on); text-shadow: var(--encendido); }
}
@keyframes neon-titila {
  0%, 90% { color: var(--neon-on); text-shadow: var(--encendido); }
  91% { color: var(--neon-medio); text-shadow: var(--apagado); }
  92% { color: var(--neon-on); text-shadow: var(--encendido); }
  94% { color: var(--neon-medio); text-shadow: var(--apagado); }
  95%, 100% { color: var(--neon-on); text-shadow: var(--encendido); }
}

/* ---------- Dock: con muchos scripts los iconos encogen para caber en la pantalla en vez de ensanchar la página ----------
   --n (iconos) lo pone lunarys.js. Se cuenta un icono de más para el hueco que piden al crecer con el ratón.
   Si ni con 30 px caben, lunarys.js le pone .desliza y el dock se desliza como en tablet. */
@supports (width: 1cqi) {
  @media (min-width: 1101px) {
    .dock-sec { container-type: inline-size; }
    .dock-s { --b: clamp(30px, calc((100cqi - 33px - 7px * var(--n, 15)) / (var(--n, 15) + 1)), 54px); height: calc(var(--b) + 24px); }
    .dk-ic { width: calc(var(--b) * var(--s, 1)); height: calc(var(--b) * var(--s, 1)); }
  }
}
.dock-s.desliza { overflow-x: auto; justify-content: flex-start; }

/* Página de un paquete que puede ser un script: oculta hasta que lunarys.js decide si pinta su ficha (sale sola si no llega) */
main[data-vista="paquete"][data-quiza-script] { visibility: hidden; animation: aparece-tarde 0s linear 3s forwards; }
@keyframes aparece-tarde { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { main[data-vista="paquete"][data-quiza-script] { visibility: visible; } }

/* ---------- Ficha: pantalla completa, demo y documentación como botones bajo las capturas ---------- */
.bajo-fotos { gap: 8px; margin-top: 4px; }
.bajo-fotos .lk { flex: 1 1 auto; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--linea2); border-radius: 12px; background: var(--sup); color: var(--tinta); text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.bajo-fotos .lk .i { width: 17px; height: 17px; }
.bajo-fotos .lk:hover { text-decoration: none; background: var(--inv); border-color: var(--inv); color: var(--inv-txt); }
.bajo-fotos .lk:active { transform: scale(.97); }
/* La demo destaca con el color del script (en grafito, sin color) */
.bajo-fotos .lk-demo { background: color-mix(in srgb, var(--c) 14%, var(--sup)); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.bajo-fotos .lk-demo .i { color: var(--c); }
.bajo-fotos .lk-demo:hover { background: color-mix(in srgb, var(--c) 26%, var(--sup)); border-color: var(--c); color: var(--tinta); }
:root[data-tema="grafito"] .bajo-fotos { --c: var(--tinta); }
/* El botón de atención al cliente sube mientras el dock le pasa por debajo (--sube lo pone lunarys.js);
   al pasar de un lado a otro del dock se esconde un momento (.salta) para no cruzarle por encima */
.soporte { translate: 0 calc(-1 * var(--sube, 0px)); transition: opacity .2s var(--ease); }
.soporte.salta { opacity: 0; transition: none; }