/* ==============================
   tutorials.css — 3Dcomunity
   Tema neon (verde/naranja)
   Full-width + responsive
   (Coloca las fuentes en /fonts)
============================== */

/* 0) Reset + Vars */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
:root{
  --bg-0:#0a0a0a; --bg-1:#0f0f0f; --bg-2:#151515; --panel:#1b1b1b;
  --text:#f2f2f2; --muted:#a9a9a9; --stroke:#101010; --shadow:rgba(0,0,0,.55);

  --neon-green:#39FF14; --neon-orange:#FF7A18;
  --grad-gn-or:linear-gradient(90deg,var(--neon-green),var(--neon-orange));

  --font-ui:'Oxanium','Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-title:'ThreeDIsometric',var(--font-ui);
  --font-display:'Gunplay',var(--font-ui);
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --header-h:clamp(88px,16vh,150px);
  --radius:16px;
  --pad:clamp(14px,2vw,24px);
}

/* 1) Fuentes locales (rutas absolutas para funcionar en /sub) */
@font-face{
  font-family:'ThreeDIsometric';
  src:url('/fonts/3DIsometric-Regular.ttf') format('truetype'),
      url('/fonts/3DIsometric-Regular.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gunplay';
  src:url('/fonts/Gunplay-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Oxanium';
  src:url('/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight:200 800; font-style:normal; font-display:swap;
}

/* 2) Base documento */
body{
  font-family:var(--font-ui); color:var(--text);
  background:
    radial-gradient(1200px 700px at 8% -10%,#141414 0%,#0c0c0c 55%,#070707 100%),
    var(--bg-0);
  min-height:100svh;
  display:grid; grid-template-rows:var(--header-h) 1fr;
}
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }

/* 3) Header + Navegación */
.site-header{
  background:linear-gradient(180deg,#0e0e0e 0%,#0a0a0a 100%);
  border-bottom:1px solid #121212;
  box-shadow:0 6px 24px var(--shadow);
  display:grid;
  grid-template-columns:min-content 1fr auto;
  align-items:center;
  gap:clamp(8px,1.6vw,18px);
  padding:clamp(10px,2vw,18px) clamp(14px,2.4vw,26px);
}
.site-logo{ display:inline-flex; align-items:center; }
.site-logo img{
  width:150px; height:150px; object-fit:contain; border-radius:10px;
  box-shadow:0 0 0 1px #161616, 0 8px 18px rgba(0,0,0,.35);
}
.site-title{
  justify-self:center; text-align:center;
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:.06em; color:var(--neon-orange);
  text-shadow:0 0 6px rgba(255,122,24,.25),0 12px 28px rgba(0,0,0,.45);
  white-space:nowrap;
}
.nav-menu{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; }

/* 4) Botones (global) */
.btn{
  --h:clamp(44px,5.2vh,56px); --px:clamp(14px,2.2vw,24px);
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 var(--px);
  border-radius:14px; border:1px solid #1a1a1a;
  font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
  text-decoration:none; user-select:none; cursor:pointer;
  background-image:var(--grad-gn-or); background-size:220% 100%; background-position:0% 50%;
  color:#0b0b0b;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  transition:background-position .35s ease, transform .12s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:hover{
  background-position:100% 50%; transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.65), 0 0 18px rgba(57,255,20,.28), 0 0 28px rgba(255,122,24,.22);
  filter:saturate(1.06); border-color:#262626;
}
.btn:active{ transform:translateY(0); box-shadow:inset 0 4px 10px rgba(0,0,0,.45); }
.btn:focus-visible{ outline:2px solid rgba(57,255,20,.9); outline-offset:3px; }

.btn-green{ background:none; background-color:var(--neon-green); }
.btn-orange{ background:none; background-color:var(--neon-orange); }
.btn-outline{
  background:transparent; color:var(--text); border-color:#2d2d2d;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.btn-outline:hover{
  background:#151515; border-color:var(--neon-green);
  box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 14px rgba(57,255,20,.22);
}

/* Botones del header (usa .btn-like para <button>) */
.nav-menu button{
  height:clamp(42px,5vh,52px); padding:0 clamp(12px,2vw,20px);
  border-radius:12px; border:1px solid #1a1a1a;
  font-family:var(--font-display); font-weight:800; font-size:clamp(1rem,1.6vw,1.15rem);
  background-image:var(--grad-gn-or); background-size:220% 100%; background-position:0% 50%;
  color:#0b0b0b; box-shadow:0 6px 18px rgba(0,0,0,.5);
  cursor:pointer; transition:background-position .35s, transform .12s, box-shadow .25s, filter .2s, border-color .2s;
}
.nav-menu button:hover{
  background-position:100% 50%; transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 18px rgba(57,255,20,.28),0 0 28px rgba(255,122,24,.22);
  border-color:#262626; filter:saturate(1.06);
}
.nav-menu button.active{
  background:none; background-color:var(--neon-green); color:#0b0b0b;
  border-color:#2b2b2b; box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 10px rgba(57,255,20,.35);
}

/* 5) Página tutorials */
.tut-page{ padding:0; overflow-y:auto; min-height:0; }
.doc-card{
  width:100%;
  background:
    radial-gradient(1400px 700px at 0% 0%, rgba(57,255,20,.06), transparent 60%),
    linear-gradient(180deg,#121212 0%,#0e0e0e 100%);
  border-top:1px solid #171717; border-bottom:1px solid #171717;
  box-shadow:0 10px 28px var(--shadow) inset;
  padding:clamp(18px,3.2vw,42px);
  display:grid; gap:clamp(16px,2.2vw,28px);
}

/* 6) Hero */
.hero-head{
  display:grid; gap:clamp(10px,1.4vw,16px);
  padding:clamp(8px,1.2vw,12px) 0;
  border-bottom:1px solid #202020;
}
.hero-title{
  font-family:var(--font-title);
  font-size:clamp(2.2rem,5.8vw,4rem);
  line-height:1.05; letter-spacing:.02em;
  color:var(--neon-orange);
  text-shadow:0 0 8px rgba(255,122,24,.18);
}
.hero-title span{ color:var(--neon-green); text-shadow:0 0 10px rgba(57,255,20,.22); }
.hero-subtitle{ font-size:clamp(1.04rem,1.8vw,1.24rem); color:var(--text); max-width:1100px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem .85rem; margin-top:.25rem; }

/* 7) Índice */
.index-row{
  display:flex; flex-wrap:wrap; gap:.6rem .7rem;
  padding:.35rem 0; border-top:1px solid #202020; border-bottom:1px solid #202020;
}

/* 8) Bloques / tarjetas */
.block{ display:grid; gap:.9rem; }
.block-title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  letter-spacing:.01em;
}
.grid-2{ display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:repeat(2,minmax(0,1fr)); }
.card{
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:0 10px 26px var(--shadow); padding:var(--pad);
  display:grid; gap:.7rem;
}
.card h4{ font-weight:800; font-size:clamp(1.05rem,1.9vw,1.25rem); letter-spacing:.01em; }

/* 9) Listas */
.check-list, .dash-list{ list-style:none; display:grid; gap:.5rem; }
.check-list li{ position:relative; padding-left:1.6rem; }
.check-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--neon-green); font-weight:900;
}
.dash-list li{ position:relative; padding-left:1.2rem; color:#d6d6d6; }
.dash-list li::before{ content:"—"; position:absolute; left:0; top:0; color:#7c7c7c; }

/* 10) Código y ASCII */
pre.code{
  background:#0f0f0f; color:#ddd; border:1px solid #232323;
  border-radius:12px; padding:12px 14px; overflow:auto; font-family:var(--mono);
  box-shadow:inset 0 0 0 1px #111, 0 12px 24px rgba(0,0,0,.35);
}
pre.code code{ font-family:inherit; font-size:.95rem; }
pre.ascii{
  background:#0e0e0e; border:1px dashed #2b2b2b; border-radius:12px;
  padding:14px 16px; overflow:auto; font-family:var(--mono);
  text-shadow:0 0 8px rgba(0,0,0,.3);
}
pre.ascii.gn{ color:var(--neon-green); }
pre.ascii.or{ color:var(--neon-orange); }

/* 11) FAQ */
.faq{
  background:#141414; border:1px solid #2a2a2a; border-radius:12px; padding:.85rem 1rem;
}
.faq + .faq{ margin-top:.6rem; }
.faq summary{ cursor:pointer; list-style:none; font-weight:700; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; font-weight:900; color:var(--neon-green); }
.faq[open] summary::after{ content:"—"; }

/* 12) Tipografía general en el documento */
.doc-card p, .doc-card ul, .doc-card ol{ line-height:1.7; color:var(--text); }

/* 13) Utilidades */
.muted{ color:var(--muted); }
.center{ text-align:center; }
.mt{ margin-top:.8rem; }

/* 14) Responsive */
@media (max-width:1200px){
  .grid-2{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .site-header{ grid-template-columns:min-content 1fr; grid-auto-rows:auto; }
  .site-title{ font-size:clamp(2rem,6.5vw,3rem); }
  .nav-menu{ justify-content:center; }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .btn{ --h:44px; }
  .btn-row{ gap:.6rem; }
}
@media (max-width:480px){
  .hero-title{ font-size:clamp(1.8rem,10vw,2.3rem); }
  .hero-subtitle{ font-size:1rem; }
}