/* ─────────────────────────────────────────────
   Guaropolis — hoja común de las tres páginas.

   Sin framework y sin compilar, igual que PrintoVerse: se abre y se lee.
   La paleta sale del logo, que es azul y azul marino. La versión anterior de
   esta web era morada porque se muestreó un logo antiguo con otro color.
   ───────────────────────────────────────────── */
:root{
  --fondo:#07051C;
  --fondo-2:#0C0C3E;
  --superficie:#1C1932;
  --superficie-alta:#252363;
  --azul-hondo:#312FAA;
  --azul:#4652EF;
  --azul-claro:#7188F4;
  --hielo:#A2B8F3;
  --texto:#F8F8FB;
  --texto-2:#BDC4E1;
  --borde:#535782;
  --oro:#E2C658;
  --verde:#3FBF7F;
  --rojo:#E5484D;
  --r:14px;
  --sombra:0 18px 50px rgba(0,0,0,.45);
  --ancho:1240px;
  --barra-alto:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* El navegador pone `hidden` como display:none, pero es una regla suya y CUALQUIER
   regla nuestra que toque `display` le gana. Paso de verdad: `article ul{display:flex}`
   dejaba a la vista una lista marcada como hidden, y el desplegable de los rangos
   mostraba los beneficios siempre. Con esto, hidden significa hidden en toda la web. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-alto) + 16px)}
body{
  background:var(--fondo);color:var(--texto);min-height:100vh;
  font:400 16px/1.6 Outfit,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.pixel{image-rendering:pixelated}   /* Minecraft es pixel art: suavizarlo lo estropea */
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-weight:800}
.apagado{color:var(--texto-2)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-claro);margin-bottom:12px}

/* ── Fondo con las capturas del servidor ──
   Van de fondo y no en una sección propia: se ven, dan ambiente, y no ocupan
   sitio ni obligan a ponerles un título. */
.telon{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--fondo)}
.telon div{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;filter:saturate(.7) brightness(.34);
  transition:opacity 2.6s ease-in-out, transform 14s linear;
  transform:scale(1.06);
}
/* La que se va NO se desvanece: se queda quieta debajo mientras la nueva aparece
   encima. Haciendo el fundido a la vez en las dos, en mitad del cambio las dos
   estaban a medias y se veía el fondo oscuro de golpe, que es lo que quedaba feo. */
.telon div.abajo{opacity:1;z-index:0}
.telon div.on{opacity:1;z-index:1;transform:scale(1)}
.telon::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 85% at 50% 0,rgba(49,47,170,.34),transparent 62%),
             linear-gradient(180deg,rgba(7,5,28,.62),rgba(7,5,28,.92) 70%,var(--fondo));
}
/* En las páginas de LEER el fondo estorba: las fotos tienen zonas claras y el texto
   se mezclaba. Se apaga bastante sin llegar a quitarlo, para que siga dando ambiente. */
body.leyendo .telon div{filter:saturate(.45) brightness(.16)}
body.leyendo .telon::after{
  background:radial-gradient(120% 85% at 50% 0,rgba(49,47,170,.22),transparent 62%),
             linear-gradient(180deg,rgba(7,5,28,.88),rgba(7,5,28,.96) 55%,var(--fondo));
}

/* ── Botones ── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:15px;white-space:nowrap;
  background:linear-gradient(135deg,var(--azul),var(--azul-hondo));color:#fff;
  transition:transform .16s,box-shadow .16s;
}
.boton:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(70,82,239,.42)}
.boton.fantasma{background:rgba(28,25,50,.7);border:1px solid var(--borde);color:var(--texto)}
.boton.fantasma:hover{border-color:var(--azul-claro);background:rgba(70,82,239,.14);box-shadow:none}
.boton.oro{background:linear-gradient(135deg,var(--oro),#c9a832);color:#2a2205}
.boton.chico{padding:9px 16px;font-size:14px;border-radius:10px}
.boton:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Barra superior ── */
.barra{
  position:sticky;top:0;z-index:60;height:var(--barra-alto);
  background:rgba(7,5,28,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(83,87,130,.24);
}
.barra .contenedor{display:flex;align-items:center;gap:24px;height:100%}
.marca{display:flex;align-items:center;gap:11px;font-weight:900;font-size:19px;letter-spacing:-.02em}
.marca img{width:36px;height:36px;object-fit:contain}
.menu{display:flex;gap:24px;margin-left:auto;font-size:15px;font-weight:500}
.menu a{color:var(--texto-2);transition:color .15s;padding:6px 0}
.menu a:hover,.menu a.activo{color:var(--texto)}
.menu a.activo{box-shadow:inset 0 -2px 0 var(--azul)}
.barra-acciones{display:flex;align-items:center;align-self:center;gap:10px}
/* Enlaces que SACAN de la tienda. Van aparte del menú y con la flecha de "esto te
   lleva a otro sitio": dentro de la tienda, el menú es para moverse por la tienda. */
.salidas{display:flex;align-items:center;gap:4px;margin-left:auto}
.salidas a{
  display:inline-flex;align-items:center;gap:6px;color:var(--texto-2);
  font-size:14px;font-weight:600;padding:7px 11px;border-radius:9px;transition:.15s;
}
.salidas a:hover{color:var(--texto);background:rgba(70,82,239,.14)}
.salidas a::after{content:"↗";font-size:12px;opacity:.65}
.separador{width:1px;height:24px;background:rgba(83,87,130,.45);margin:0 4px}
.menu.dentro{margin-left:0}
.hamburguesa{display:none;background:none;border:0;color:var(--texto);
  font-size:25px;cursor:pointer;padding:4px 8px}

/* El carrito vive arriba a la derecha SIEMPRE: la tienda es lo principal de esta
   web, así que no puede depender de que aparezca una burbuja al añadir algo.
   Solo el icono y cuántos llevas: la palabra "Carrito" no aporta nada y el
   importe lo hacía crecer y encogerse cada vez que se tocaba. */
.boton-carrito{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* Las tres a la vez y no solo `height`: dentro de un flex, un hijo se estira a la
     altura de la fila si no se le dice lo contrario, y el cuadro se salía del header. */
  height:42px;min-height:42px;max-height:42px;align-self:center;
  padding:0 16px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--azul-hondo),#241f7a);
  border:1px solid rgba(113,136,244,.5);color:#fff;
  border-radius:11px;font:inherit;font-weight:800;font-size:15px;
  cursor:pointer;transition:.16s;line-height:1;
}
.boton-carrito svg{flex:0 0 auto;display:block}
.boton-carrito:hover{background:linear-gradient(135deg,var(--azul),var(--azul-hondo));
  border-color:var(--azul-claro)}
.boton-carrito .n{
  min-width:22px;height:22px;padding:0 6px;border-radius:99px;
  background:rgba(255,255,255,.18);color:#fff;font-size:12.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.boton-carrito.sin-nada{background:rgba(37,35,99,.55);border-color:rgba(83,87,130,.55)}
.boton-carrito.sin-nada .n{background:rgba(255,255,255,.1);color:var(--texto-2)}

/* ── Carrito ── */
.panel-fondo{position:fixed;inset:0;background:rgba(3,2,12,.74);backdrop-filter:blur(4px);
  z-index:80;opacity:0;pointer-events:none;transition:opacity .22s}
.panel-fondo.on{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:90;
  background:var(--fondo-2);border-left:1px solid var(--borde);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;
}
.panel.on{transform:none}
.panel-cabeza{display:flex;align-items:center;justify-content:space-between;
  padding:22px;border-bottom:1px solid rgba(83,87,130,.3)}
.panel-cabeza h3{font-size:20px}
.cerrar{background:none;border:0;color:var(--texto-2);font-size:26px;cursor:pointer;line-height:1;padding:0 4px}
.cerrar:hover{color:var(--texto)}
.panel-cuerpo{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px}
.panel-pie{padding:22px;border-top:1px solid rgba(83,87,130,.3);display:flex;flex-direction:column;gap:13px}
.linea-carrito{display:flex;gap:13px;align-items:center;background:var(--superficie);
  border:1px solid rgba(83,87,130,.28);border-radius:11px;padding:12px}
.linea-carrito img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.linea-carrito .info{flex:1;min-width:0}
.linea-carrito .nom{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linea-carrito .pre{font-size:13px;color:var(--texto-2)}
.cantidad{display:flex;align-items:center;gap:8px}
.cantidad button{width:26px;height:26px;border-radius:7px;border:1px solid var(--borde);
  background:none;color:var(--texto);cursor:pointer;font:inherit;font-size:15px;line-height:1}
.cantidad button:hover{border-color:var(--azul-claro)}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.total b{font-size:27px;font-weight:900;letter-spacing:-.03em}
.vacio{text-align:center;color:var(--texto-2);padding:40px 0;font-size:15px}

/* ── Avisos ── */
.chivato{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);
  background:var(--superficie-alta);border:1px solid var(--borde);color:var(--texto);
  padding:13px 22px;border-radius:11px;font-size:14.5px;font-weight:600;
  z-index:120;transition:transform .28s;box-shadow:var(--sombra)}
.chivato.on{transform:translate(-50%,0)}

/* ── Pie ── */
footer{background:rgba(5,4,15,.7);border-top:1px solid rgba(83,87,130,.24);
  padding:40px 0 28px;margin-top:auto}
.pie-bajo{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--texto-2);font-size:13.5px;align-items:center}
.pie-enlaces{display:flex;gap:22px}
.pie-enlaces a:hover{color:var(--texto)}

@media(max-width:900px){
  .menu{display:none;position:absolute;top:var(--barra-alto);left:0;right:0;
    background:var(--fondo-2);flex-direction:column;gap:0;padding:10px 22px 18px;
    border-bottom:1px solid var(--borde)}
  .menu.abierto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid rgba(83,87,130,.18)}
  .hamburguesa{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .telon div{transition:none}
}

/* Un comando enlazado a su ficha de la wiki. Se ve que es un comando y que se puede
   hacer clic, sin gritar tanto como un <code> con recuadro en mitad de una frase. */
.cmd-enlace{
  color:var(--azul-claro);border-bottom:1px dotted rgba(113,136,244,.55);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;
  white-space:nowrap;
}
.cmd-enlace:hover{color:var(--texto);border-bottom-style:solid}