/* pages.css — Empezar (/guia) y Comandos (/comandos): páginas tipo app, sin párrafos. */

.tools-hero{padding-bottom:6px;}
.tools-hero p{margin-top:12px;font-size:17px;}
.tools-wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px 40px;}
.tools-foot{margin:22px 0 0;text-align:center;color:var(--muted-2);font-size:14px;}
.tools-foot a{color:var(--red-bright);font-weight:600;}
.tools-foot code{font-family:var(--font-mono);color:var(--red-bright);font-weight:700;}
.px{image-rendering:pixelated;}
.done{border-color:rgba(47,217,107,.5)!important;color:#5fd96b!important;}

/* ===== comandos ===== */
.cmd-search{position:relative;display:flex;align-items:center;gap:12px;margin:24px 0 12px;padding:6px 8px 6px 18px;border-radius:16px;
  border:1px solid var(--line);background:rgba(8,5,6,.7);box-shadow:0 30px 60px -40px #000;transition:border-color .2s;}
.cmd-search:focus-within{border-color:var(--red);}
.cmd-search svg{width:22px;height:22px;color:var(--silver-dim);flex-shrink:0;}
.cmd-search input{flex:1;font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--ink);background:none;border:none;outline:none;padding:12px 0;min-width:0;}
.cmd-search input::placeholder{color:var(--muted-2);font-weight:500;}
.cmd-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.cmd-search b{font-family:var(--font-mono);font-size:13px;color:var(--red-bright);background:rgba(225,29,34,.12);border:1px solid var(--line);border-radius:10px;padding:8px 12px;}
.cmd-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:999px;padding:7px 12px 7px 9px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;}
.cat img{width:18px;height:18px;image-rendering:pixelated;}
.cat b{font-family:var(--font-mono);font-size:11px;color:var(--silver-dim);}
.cat:hover{color:var(--ink);border-color:var(--red);}
.cat.on{color:#fff;background:var(--red);border-color:var(--red);}
.cat.on b{color:rgba(255,255,255,.75);}
.cmd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
.cmd-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px 13px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,rgba(24,14,16,.62),rgba(13,8,9,.62));border:1px solid var(--line-soft);transition:border-color .2s,transform .2s;position:relative;}
.cmd-card:hover{border-color:var(--red);transform:translateY(-2px);}
.cmd-card.done{border-color:rgba(47,217,107,.6)!important;}
.cmd-card.done::after{content:"Copiado";position:absolute;top:10px;right:12px;font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5fd96b;}
.cmd-card[hidden]{display:none;}
.cc-top{display:flex;align-items:center;gap:10px;}
.cc-top code{font-family:var(--font-mono);font-weight:700;font-size:15.5px;color:var(--red-bright);overflow-wrap:anywhere;flex:1;}
.cc-top img{width:20px;height:20px;image-rendering:pixelated;opacity:.85;flex-shrink:0;}
.cmd-card p{margin:0;color:var(--silver);font-size:14px;line-height:1.45;}
.cc-alias{display:flex;flex-wrap:wrap;gap:4px;}
.cc-alias span{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:6px;padding:2px 6px;}
.cmd-empty{margin:30px 0;text-align:center;color:var(--muted);font-size:15px;}
.cmd-empty code{font-family:var(--font-mono);color:var(--red-bright);font-weight:700;}
@media(max-width:520px){.cmd-grid{grid-template-columns:1fr;}.cmd-search input{font-size:16px;}}

/* ===== empezar ===== */
.g-sec{margin:34px 0 0;scroll-margin-top:84px;}
.g-sec h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(20px,2.6vw,26px);}
.g-sec h2 img{width:26px;height:26px;image-rendering:pixelated;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));}
.g-sec h2 small{margin-left:auto;font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;text-align:right;}
.g-con h4 small{font-size:13px;}
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.g-grid.c2{grid-template-columns:repeat(2,1fr);}
.g-grid.c3{grid-template-columns:repeat(3,1fr);}
.g-card{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(24,14,16,.62),rgba(13,8,9,.62));position:relative;transition:border-color .2s,transform .2s;}
.g-card:hover{border-color:var(--line);transform:translateY(-2px);}
.g-card .n{position:absolute;top:12px;right:14px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--red-bright);}
.g-card img{width:50px;height:50px;padding:10px;box-sizing:border-box;border-radius:12px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.07);
  image-rendering:pixelated;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));object-fit:contain;}
.g-card h4{margin:4px 0 0;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--ink);line-height:1.25;}
.g-card span{color:var(--silver);font-size:14.5px;line-height:1.5;}
.g-card span b{color:var(--ink);font-weight:600;}
.g-card .cmdchip{margin-top:auto;}
.cmdchip{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;max-width:100%;font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--red-bright);
  background:rgba(225,29,34,.1);border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap;}
.cmdchip:hover{background:rgba(225,29,34,.2);border-color:var(--red);}
.cmdchip::after{content:"";width:14px;height:14px;flex-shrink:0;opacity:.55;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;}
.cmdchip.done{background:rgba(47,217,107,.12);border-color:rgba(47,217,107,.5);color:#5fd96b;}
.cmdchip.done::after{opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;}
.g-connect{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.g-con{padding:18px 18px 16px;border-radius:16px;border:1px solid var(--line-soft);background:rgba(8,5,6,.5);display:flex;flex-direction:column;gap:12px;}
.g-con.java{border-color:rgba(95,208,107,.35);background:linear-gradient(180deg,rgba(95,208,107,.08),rgba(8,5,6,.5));}
.g-con.bedrock{border-color:rgba(127,196,255,.35);background:linear-gradient(180deg,rgba(127,196,255,.08),rgba(8,5,6,.5));}
.g-con h4{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;}
.g-con.java h4{color:#7fe08a;}
.g-con.bedrock h4{color:#8fd0ff;}
.g-con h4 small{margin-left:auto;font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);}
.ipbox{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;background:rgba(8,5,6,.75);border:1px solid var(--line-soft);}
.ipbox b{flex:1;font-family:var(--font-mono);font-size:clamp(17px,2.4vw,22px);font-weight:700;color:var(--ink);overflow-wrap:anywhere;}
.ipbox b i{font-style:normal;color:var(--muted);font-size:.8em;}
.ipbox button{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);border:none;border-radius:9px;padding:9px 13px;cursor:pointer;}
.ipbox button.done{background:#2fa54a;}
.g-steps{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;}
.g-steps li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--silver);}
.g-steps li b{width:26px;height:26px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid var(--line-soft);}
.g-steps li kbd{font-family:var(--font-display);font-size:13.5px;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line-soft);border-radius:7px;padding:4px 9px;}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.rule{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,80,80,.3);background:linear-gradient(180deg,rgba(255,60,60,.08),rgba(13,8,9,.6));color:var(--silver);font-size:14.5px;line-height:1.45;}
.rule img{width:44px;height:44px;padding:9px;box-sizing:border-box;flex-shrink:0;border-radius:11px;background:rgba(0,0,0,.4);border:1px solid rgba(255,80,80,.25);image-rendering:pixelated;}
.rule b{color:var(--ink);font-weight:600;}
.faq-static.tight details summary{padding:13px 18px;font-size:15.5px;}
.faq-static.tight .faq-a{padding:0 18px 14px;font-size:14.5px;}
.g-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:34px 0 0;}
@media(max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr);}.g-grid.c3{grid-template-columns:repeat(2,1fr);}.rules{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g-connect{grid-template-columns:1fr;}.g-grid,.g-grid.c2,.g-grid.c3,.rules{grid-template-columns:1fr;}}