:root {
  color-scheme: dark;
  --fondo: #161618;
  --panel: #232326;
  --panel-2: #2c2c30;
  --borde: #34343a;
  --texto: #f3f3f4;
  --suave: #9b9ba4;
  --verde: #00c878;
  --tinta: #06150e;
  --azul: #1a82ff;
  --morado: #9b5cff;
  --rosa: #ff3da6;
  --naranja: #ff7a00;
  --amarillo: #ffb400;
}
* { box-sizing: border-box; }
html { background: var(--fondo); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.pagina, main, .cabecera { max-width: 720px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
h1 { font-size: clamp(36px, 9vw, 60px); line-height: 1.05; letter-spacing: -0.03em; margin: 12px 0 8px; font-weight: 700; }
h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 650; }
p { margin: 0 0 10px; }
a { color: var(--verde); }
code {
  display: block;
  font: 15px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 14px 16px;
  overflow-wrap: anywhere;
  color: var(--texto);
}
.sub, .pista { color: var(--suave); }
.pista { font-size: 14px; }

/* colores de los bots */
.c-verde { color: var(--verde); }
.c-azul { color: var(--azul); }
.c-morado { color: var(--morado); }
.c-rosa { color: var(--rosa); }
.c-naranja { color: var(--naranja); }
.c-amarillo { color: var(--amarillo); }

/* portada */
.pagina { position: relative; }
.guest-beacon { position: absolute; top: 22px; left: 16px; width: 176px; padding: 13px 15px; border-left: 3px solid var(--verde); background: rgba(35,35,38,.94); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.guest-beacon-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--suave); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.guest-beacon-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 5px rgba(0,200,120,.13); }
.guest-beacon strong { display: block; margin-top: 10px; color: var(--texto); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.guest-beacon-label { display: block; margin-top: 4px; color: var(--suave); font-size: 12px; }
.guest-beacon-meter { display: block; height: 4px; margin-top: 13px; background: rgba(243,243,244,.12); }
.guest-beacon-meter b { display: block; width: 8%; height: 100%; background: var(--verde); transition: width .25s ease; }
.hero { text-align: center; padding: 56px 0 28px; }
.logo { width: clamp(140px, 42vw, 200px); height: auto; display: block; margin: 0 auto 8px; }
.lema { color: var(--suave); font-size: 19px; max-width: 28ch; margin: 0 auto 22px; }
.equipo { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mini { width: 44px; height: 44px; }
.pronto { max-width: 36ch; margin: 0 auto 22px; color: var(--suave); font-size: 16px; }
.etiqueta-pronto { display: inline-block; background: var(--panel-2); color: var(--verde); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-right: 6px; }
.mejor { background: var(--panel-2); border-radius: 18px; padding: 14px 16px; margin: 14px 0 0; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 28px;
  padding: 26px 22px;
  margin: 16px 0;
}
.pasos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; }
.pasos p { margin: 0; }
.num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--tinta);
  font-weight: 700;
  display: grid; place-items: center;
}
.pegar { background: var(--panel-2); border-radius: 20px; padding: 16px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.primario, .secundario, button {
  font: inherit;
  font-weight: 600;
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.primario, button { background: var(--verde); color: var(--tinta); }
.secundario { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); }
.primario:hover, button:hover { filter: brightness(1.08); }
.secundario:hover { background: var(--panel-2); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.tienda-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tienda-cab h2 { margin: 0; font-size: 32px; letter-spacing: -0.02em; }
.tienda-cab .mini { width: 44px; height: 44px; flex: none; }
.origen { color: var(--verde); font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.bandera { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.historia { border-left: 3px solid var(--verde); padding: 2px 0 2px 14px; font-size: 18px; line-height: 1.5; margin: 0 0 16px; }
/* Estilo «sirena»: avisos que solo un humano o solo un bot pueden cumplir. Luces laterales que se alternan y resplandor verde que palpita. */
.sirena {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,200,120,.18), rgba(0,200,120,.07)), #0e1a14;
  border: 1.5px solid #00c878;
  border-radius: 14px;
  color: #3df2a8;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,200,120,.85);
  box-shadow: 0 0 16px rgba(0,200,120,.55), inset 0 0 12px rgba(0,200,120,.22);
  animation: sirena-aviso 1s ease-in-out infinite;
}
.sirena::before, .sirena::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00c878;
  box-shadow: 0 0 10px 3px rgba(0,200,120,.9);
  animation: sirena-luz 1s ease-in-out infinite;
}
.sirena::after { animation-delay: -.5s; }
.sirena strong { color: #8dffd0; font-weight: 900; }
.alerta { display: flex; width: 100%; padding: 13px 16px; margin: 0 0 18px; font-size: 15px; letter-spacing: .08em; }
.alerta svg { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 0 6px rgba(0,200,120,.85)); }
.solo-humanos { padding: 6px 16px; font-size: 12px; letter-spacing: .22em; border-radius: 999px; }
.solo-humanos::before, .solo-humanos::after { width: 7px; height: 7px; box-shadow: 0 0 8px 2px rgba(0,200,120,.9); }
@keyframes sirena-aviso {
  0%, 100% { box-shadow: 0 0 6px rgba(0,200,120,.3), inset 0 0 6px rgba(0,200,120,.1); border-color: rgba(0,200,120,.55); text-shadow: 0 0 3px rgba(0,200,120,.4); }
  50% { box-shadow: 0 0 30px 6px rgba(0,200,120,.8), inset 0 0 20px rgba(0,200,120,.38); border-color: #00c878; text-shadow: 0 0 12px rgba(0,200,120,1), 0 0 26px rgba(0,200,120,.8); }
}
@keyframes sirena-luz { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .sirena, .sirena::before, .sirena::after { animation: none; } }
.entrada-humanos { display: grid; justify-items: center; gap: 6px; flex: 1 1 220px; }
.ancho-boton { width: 100%; letter-spacing: .03em; }
/* Botón de entrada para humanos: verde GrokBot con relieve, para que se note */
.entrada-humanos .secundario.ancho-boton {
  background: linear-gradient(180deg, #2af0a0 0%, #00c878 52%, #00b46a 100%);
  color: #04150c;
  border: 0;
  padding: 17px 22px;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 6px 0 #00804a, 0 14px 26px rgba(0,200,120,.38), inset 0 2px 0 rgba(255,255,255,.42);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.entrada-humanos .secundario.ancho-boton:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 8px 0 #00804a, 0 18px 32px rgba(0,200,120,.46), inset 0 2px 0 rgba(255,255,255,.5); }
.entrada-humanos .secundario.ancho-boton:active { transform: translateY(5px); box-shadow: 0 1px 0 #00804a, 0 4px 10px rgba(0,200,120,.3), inset 0 2px 0 rgba(255,255,255,.3); }
button.copiar.primario { background: var(--panel); color: var(--verde); border: 1px solid var(--borde); }
button.copiar.primario:hover { background: var(--panel-2); filter: none; }
#enlace-botshop { margin: 4px 0 2px; }
/* botón de la música de fondo (solo portada) */
.musica { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(35,35,38,.92); color: var(--texto); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.musica:hover { background: var(--panel-2); filter: none; }
.musica-barras { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.musica-barras i { display: block; width: 3px; height: 5px; border-radius: 2px; background: var(--suave); }
.musica.sonando .musica-barras i { background: var(--verde); }
@media (prefers-reduced-motion: no-preference) {
  .musica.sonando .musica-barras i { animation: ecualizador 0.9s ease-in-out infinite; }
  .musica.sonando .musica-barras i:nth-child(2) { animation-delay: -0.3s; animation-duration: 1.1s; }
  .musica.sonando .musica-barras i:nth-child(3) { animation-delay: -0.6s; animation-duration: 0.8s; }
  .musica.sonando .musica-barras i:nth-child(4) { animation-delay: -0.15s; animation-duration: 1.3s; }
  @keyframes ecualizador { 0%, 100% { height: 4px; } 50% { height: 16px; } }
}
@media (max-width: 480px) { .musica { right: 12px; bottom: 12px; padding: 9px 13px 9px 12px; } }
.nota-txt { margin: 12px 0 0; }
.texto-bot { max-height: 380px; overflow: auto; }
.texto-titulo { font-size: 16px; margin: 18px 0 2px; }
.texto-titulo .pista { font-weight: 400; }
/* fotos del mundo entre las cajas: pequeñas, con el borde verde de la web */
.captura { margin: 18px 0; border: 2px solid var(--verde); border-radius: 22px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 4px rgba(0,200,120,.1), 0 14px 30px rgba(0,0,0,.45); }
.captura img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.captura figcaption { padding: 8px 14px; font-size: 12.5px; color: var(--suave); border-top: 1px solid rgba(0,200,120,.35); text-align: center; }
.tecnico { margin-top: 4px; }
.tecnico summary { cursor: pointer; color: var(--verde); font-weight: 600; padding: 6px 0; }
.tecnico code { white-space: pre-wrap; margin: 10px 0; font-size: 13px; }
code.en-linea { display: inline; padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.lista { margin: 0 0 16px; padding-left: 20px; }
.lista li { margin-bottom: 8px; }
.tienda .sub { margin-bottom: 14px; }

.parcelas-linea { text-align: center; padding: 18px 0 4px; }
.puntos { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.punto { width: 14px; height: 14px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--borde); }
.punto.ocupada { background: var(--verde); border-color: var(--verde); }

.pie { text-align: center; color: var(--suave); font-size: 13px; padding: 24px 0 48px; }

/* oficina y admin (mismas piezas, mismo estilo) */
.cabecera { padding-top: 40px; }
.marca { color: var(--verde); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.aviso {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 12px 16px;
  color: var(--suave);
  font-size: 15px;
}
.campo {
  width: 100%;
  padding: 14px 16px;
  margin: 8px 0 12px;
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 16px;
}
label { color: var(--suave); font-size: 14px; }
section { margin: 20px 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.parcela { background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; padding: 18px; }
.parcela h3 { margin: 0 0 6px; font-size: 18px; }
.parcela p { margin: 4px 0; overflow-wrap: anywhere; }
.parcela.libre { border-style: dashed; }
/* entrada de la oficina */
.entrar { text-align: center; padding: 48px 0 24px; }
.entrar .logo { width: clamp(120px, 36vw, 170px); }
.formulario { text-align: left; max-width: 420px; margin: 20px auto; }
.formulario label { display: block; margin-bottom: 2px; }
.ancho { width: 100%; }
.centro { text-align: center; }

/* oficina: el botón del mundo es lo principal */
.superior { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 28px 0 0; }
.superior .marca { margin: 0; }
.suave { padding: 8px 16px; font-size: 14px; }
.portada-of {
  position: relative;
  text-align: center;
  margin: 16px 0 28px;
  padding: 40px 20px 28px;
  border-radius: 36px;
  border: 1px solid var(--borde);
  background: radial-gradient(120% 80% at 50% 0%, rgba(0,200,120,.22), rgba(0,200,120,0) 60%), var(--panel);
  overflow: hidden;
}
.logo-of { width: clamp(110px, 30vw, 150px); height: auto; display: block; margin: 0 auto 4px; filter: drop-shadow(0 12px 28px rgba(0,200,120,.35)); }
.portada-of h1 { margin: 10px 0 6px; font-size: clamp(34px, 9vw, 54px); }
.portada-of .lema { margin: 0 auto 24px; }
.cta {
  display: block;
  width: min(100%, 440px);
  margin: 0 auto 8px;
  padding: 22px 28px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--tinta);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 0 0 6px rgba(0,200,120,.18), 0 18px 50px rgba(0,200,120,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta::after { content: " →"; }
.cta:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 0 8px rgba(0,200,120,.22), 0 22px 60px rgba(0,200,120,.45); }
.cta:active { transform: scale(.99); }
.aviso-tarjeta { background: var(--panel-2); border-radius: 20px; padding: 14px 18px; color: var(--suave); margin: 0 auto 8px; max-width: 440px; }
.avatares { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 14px; margin-top: 44px; }
.avatar { position: relative; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; --e: var(--suave); }
.avatar .cara { width: 58px; height: 58px; }
.avatar::before { content: ""; position: absolute; top: 2px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--e); border: 2px solid var(--panel); z-index: 1; }
.avatar-nombre { font-size: 13px; font-weight: 600; color: var(--texto); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.dormido .cara { opacity: .5; }
.avatar-globo { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: #fff; color: #161618; font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.titulo-sec { font-size: 18px; color: var(--suave); font-weight: 600; margin: 8px 0 12px; }
.centro { text-align: center; }
[hidden] { display: none !important; }

/* tarjetas de los bots */
.bots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bot-tarjeta { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--borde); border-radius: 22px; padding: 16px; --e: var(--suave); }
.icono { flex: none; width: 52px; height: 52px; }
.bot-cuerpo { min-width: 0; }
.bot-cuerpo p { margin: 0 0 4px; overflow-wrap: anywhere; }
.bot-nombre { font-weight: 650; font-size: 18px; }
.codigo { margin-left: 8px; color: var(--suave); font-size: 13px; font-weight: 500; }
.bot-tarea { color: var(--texto); font-size: 15px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto); background: var(--panel-2); border-radius: 999px; padding: 4px 12px 4px 10px; margin: 2px 0 6px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--e); }
.e-buscar { --e: #ffb400; } .e-publicar { --e: #1a82ff; } .e-verificar { --e: #00c878; }
.e-informar { --e: #9b5cff; } .e-pensar { --e: #ff7a00; } .e-reunion { --e: #ff3da6; }
.e-error { --e: #ff4d4d; } .e-fiesta { --e: #ffe066; } .e-comprando { --e: #00d1b2; } .e-descanso { --e: #77777f; }

@media (prefers-reduced-motion: no-preference) {
  .avatar.activo .cara { animation: bota 1.8s ease-in-out infinite; }
  .logo-of { animation: flota 6s ease-in-out infinite; }
  @keyframes bota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .guest-beacon { position: static; width: 100%; margin-top: 16px; }
  .hero { padding-top: 32px; }
  .tarjeta { padding: 22px 18px; border-radius: 24px; }
  .acciones > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .logo { animation: flota 6s ease-in-out infinite; }
  @keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}

/* Botshop storefront: intentionally quieter than the agent workspace. */
.cabecera { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:24px; padding-bottom:12px; }
.cabecera .logo { display:flex; align-items:center; gap:8px; color:var(--texto); text-decoration:none; font-weight:750; font-size:15px; }
.cabecera .logo svg { width:28px; height:28px; }
.cabecera nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; font-size:13px; }
.cabecera nav a { color:var(--suave); text-decoration:none; }
.cabecera nav a:hover { color:var(--verde); }
.shop-hero { padding:76px 0 38px; }
.shop-hero .logo-bot { width:94px; height:94px; margin-bottom:12px; }
.shop-hero h1 { max-width:12ch; margin-left:auto; margin-right:auto; }
.shop-hero .lema { max-width:34ch; }
.shop-note { color:var(--suave); font-size:13px; margin:0 auto 24px; }
.shop-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.boton.grande.alt { background:transparent; color:var(--texto); border:1px solid var(--borde); }
.shop-overview { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:8px 0 20px; }
.shop-overview article { background:var(--panel); border:1px solid var(--borde); border-radius:20px; padding:18px; }
.shop-overview article > span { font-size:24px; }
.shop-overview h2 { font-size:17px; margin:10px 0 6px; }
.shop-overview p { color:var(--suave); font-size:14px; min-height:64px; }
.shop-overview a { font-size:14px; font-weight:650; text-decoration:none; }
.shop-footnote { text-align:center; color:var(--suave); font-size:13px; padding:12px 0 32px; }
.catalogue-hero { padding:40px 0 18px; }
.catalogue-hero h1 { margin-top:6px; }
.catalogue-hero > p:not(.marca) { color:var(--suave); }
.catalogue-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.catalogue-nav a { border:1px solid var(--borde); background:var(--panel); color:var(--texto); text-decoration:none; padding:7px 10px; border-radius:999px; font-size:13px; }
.catalogue-nav a:hover { border-color:var(--verde); color:var(--verde); }
.catalogue-section { scroll-margin-top:12px; margin:34px 0; }
.catalogue-section > h2 { font-size:21px; }
@media (max-width:620px) { .cabecera { align-items:flex-start; flex-direction:column; } .cabecera nav { justify-content:flex-start; } .shop-overview { grid-template-columns:1fr; } .shop-overview p { min-height:0; } }

/* Meet the Bots: las diez skins */
.meet .pista { margin-bottom: 16px; }
.skins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.skins li { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 20px; padding: 14px 6px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color .15s, transform .15s; }
.skins li:hover { border-color: var(--verde); transform: translateY(-2px); }
.skins img { width: 80px; height: 120px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 6px 8px #0008); }
.skins b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); margin-top: 4px; }
.skins small { font-size: 12px; line-height: 1.25; color: var(--suave); }
@media (max-width: 620px) { .skins { grid-template-columns: repeat(3, 1fr); } .skins img { width: 64px; height: 96px; } }
@media (max-width: 380px) { .skins { grid-template-columns: repeat(2, 1fr); } }

/* ancho-escritorio-portada */
@media (min-width: 960px) {
  .pagina, main, .cabecera { max-width: none; }
}