/* ================================================================
   SinergIA — Biblioteca de Recursos
   Sistema visual heredado de la landing (Command Center Edition)
   ================================================================ */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}
html,body{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{font-family:'Inter',system-ui,sans-serif;background:#030712;color:#CBD5E1;min-height:100vh;position:relative}
a:focus-visible,button:focus-visible{outline:2px solid #00D4FF;outline-offset:4px;border-radius:4px}
section[id]{scroll-margin-top:80px}

/* ----------------------------------------------------------------
   BACKGROUND SYSTEM — mesh + corner glows
---------------------------------------------------------------- */
.bg-mesh{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 40%, black 20%, transparent 80%);
  mask-image:radial-gradient(ellipse 85% 85% at 50% 40%, black 20%, transparent 80%);
}
.bg-glow-tl{position:fixed;top:-20vh;left:-18vw;width:70vw;height:70vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,153,255,.14) 0%,transparent 65%)}
.bg-glow-br{position:fixed;bottom:-25vh;right:-18vw;width:65vw;height:65vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,212,255,.10) 0%,transparent 65%)}
.noise-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>")}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 100% 80% at center,transparent 35%,rgba(3,7,18,.7) 100%)}

body>*:not(.bg-mesh):not(.bg-glow-tl):not(.bg-glow-br):not(.noise-overlay):not(.vignette){position:relative;z-index:1}

/* ----------------------------------------------------------------
   CARD SYSTEM
---------------------------------------------------------------- */
.card{
  position:relative;
  background:rgba(8,15,28,.75);
  border:1px solid rgba(0,212,255,.1);
  overflow:hidden;
  transition:border-color 400ms ease, box-shadow 400ms ease, transform 350ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,212,255,.7) 50%,transparent 100%);
  opacity:.5;transition:opacity 350ms ease;
}
.card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(500px circle at var(--cx,50%) var(--cy,50%),rgba(0,212,255,.09),transparent 42%);
  opacity:0;transition:opacity 350ms ease;pointer-events:none;
}
.card:hover{
  border-color:rgba(0,212,255,.32);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.6),0 0 0 1px rgba(0,212,255,.12) inset;
  transform:translateY(-4px);
}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.btn-cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:linear-gradient(135deg,#00D4FF 0%,#0099FF 100%);
  color:#020b14;font-weight:700;font-family:'Space Grotesk',sans-serif;
  box-shadow:0 8px 32px -8px rgba(0,212,255,.55),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform 260ms ease,box-shadow 260ms ease;overflow:hidden;isolation:isolate;
}
.btn-cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.3) 50%,transparent 75%);
  transform:translateX(-120%);transition:transform 750ms cubic-bezier(.22,.61,.36,1);pointer-events:none;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 48px -8px rgba(0,212,255,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-cta:hover::after{transform:translateX(120%)}

.btn-outline{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border:1px solid rgba(0,212,255,.3);background:rgba(0,212,255,.04);color:#CBD5E1;
  font-weight:500;transition:all 260ms ease;overflow:hidden;
}
.btn-outline:hover{border-color:rgba(0,212,255,.55);background:rgba(0,212,255,.08);color:#fff;transform:translateY(-2px)}

/* ----------------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------------- */
.g-text{background:linear-gradient(135deg,#fff 0%,#B8F0FF 55%,#00D4FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g-cyan{background:linear-gradient(135deg,#00D4FF 0%,#0099FF 60%,#1A8FA3 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.sec-label{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  color:rgba(0,212,255,.65);letter-spacing:.22em;text-transform:uppercase;
}
.sec-label::before,.sec-label::after{content:'';width:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.55))}
.sec-label::after{background:linear-gradient(90deg,rgba(0,212,255,.55),transparent)}

/* ----------------------------------------------------------------
   NAVBAR (versión reducida)
---------------------------------------------------------------- */
.nav-inner{
  background:rgba(3,7,18,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(0,212,255,.1);
}

/* ----------------------------------------------------------------
   CHIPS DE FILTRO (biblioteca)
---------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .95rem;border-radius:999px;cursor:pointer;
  font-size:.78rem;font-weight:500;white-space:nowrap;
  border:1px solid rgba(0,212,255,.18);background:rgba(0,212,255,.04);color:rgba(203,213,225,.85);
  transition:all 220ms ease;user-select:none;
}
.chip:hover{border-color:rgba(0,212,255,.45);color:#fff;background:rgba(0,212,255,.08)}
.chip.active{
  background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(0,153,255,.12));
  border-color:rgba(0,212,255,.55);color:#7FE3FF;
  box-shadow:0 0 18px rgba(0,212,255,.15);
}

/* Buscador */
.search-input{
  width:100%;background:rgba(8,15,28,.8);border:1px solid rgba(0,212,255,.15);
  color:#E6FAFF;border-radius:14px;padding:.8rem 1rem .8rem 2.8rem;font-size:.9rem;
  transition:border-color 250ms ease, box-shadow 250ms ease;
}
.search-input::placeholder{color:rgba(203,213,225,.4)}
.search-input:focus{outline:none;border-color:rgba(0,212,255,.5);box-shadow:0 0 0 3px rgba(0,212,255,.1)}

/* ----------------------------------------------------------------
   TARJETAS DE RECURSO (biblioteca)
---------------------------------------------------------------- */
.rec-card{display:flex;flex-direction:column;border-radius:18px;text-decoration:none;height:100%}
.rec-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#060E1A;flex-shrink:0}
.rec-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms ease}
.rec-card:hover .rec-cover img{transform:scale(1.04)}
.rec-cover-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(0,153,255,.18),transparent 55%),
    radial-gradient(ellipse at 85% 100%,rgba(0,212,255,.14),transparent 55%),
    linear-gradient(160deg,#0A1628 0%,#060E1A 100%);
}
.rec-cover-placeholder svg{width:38px;height:38px;color:rgba(0,212,255,.55)}
.rec-cover-placeholder span{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,212,255,.45)}

.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:999px;
}
.badge-cat{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);color:#7FE3FF}
.badge-nivel{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);color:#6EE7B7}
.badge-tool{background:rgba(0,153,255,.07);border:1px solid rgba(0,153,255,.2);color:rgba(184,240,255,.8);text-transform:none;letter-spacing:.03em;font-size:.66rem}

/* ----------------------------------------------------------------
   PÁGINA DE RECURSO — contenido (prose)
---------------------------------------------------------------- */
.prose{font-size:.95rem;line-height:1.75;color:rgba(203,213,225,.88)}
.prose h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;
  font-size:1.45rem;margin:2.6rem 0 1rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(0,212,255,.14);
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Space Grotesk',sans-serif;font-weight:600;color:#3DD4FF;font-size:1.12rem;margin:2rem 0 .75rem}
.prose h4{font-weight:600;color:#fff;font-size:1rem;margin:1.5rem 0 .6rem}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.4rem}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:.4rem;margin-bottom:.45rem}
.prose ul li::before{content:'';position:absolute;left:-1rem;top:.68em;width:5px;height:5px;border-radius:50%;background:rgba(0,212,255,.6);box-shadow:0 0 6px rgba(0,212,255,.4)}
.prose ol{list-style:decimal}
.prose ol li{margin-bottom:.45rem;padding-left:.4rem}
.prose ol li::marker{color:#3DD4FF;font-weight:600}
.prose strong{color:#fff;font-weight:600}
.prose a{color:#3DD4FF;text-decoration:none;border-bottom:1px solid rgba(0,212,255,.3);transition:border-color 200ms ease}
.prose a:hover{border-bottom-color:rgba(0,212,255,.8)}
.prose blockquote{
  margin:1.2rem 0;padding:.85rem 1.2rem;border-left:3px solid rgba(0,212,255,.5);
  background:rgba(0,212,255,.04);border-radius:0 12px 12px 0;color:rgba(203,213,225,.75);
}
.prose blockquote p{margin:0 0 .4rem}
.prose blockquote p:last-child{margin:0}
.prose hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.3),transparent);margin:2.2rem 0}
.prose code{
  font-family:'JetBrains Mono',monospace;font-size:.83em;
  background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.12);
  border-radius:6px;padding:.12em .4em;color:#B8F0FF;
}

/* Bloques de código copiables */
.codeblock{position:relative;margin:1.3rem 0}
.codeblock pre{
  background:rgba(4,9,18,.92);border:1px solid rgba(0,212,255,.14);border-radius:14px;
  padding:1.15rem 1.25rem;overflow-x:auto;max-height:520px;overflow-y:auto;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;line-height:1.6;color:#CBE9F5;
  white-space:pre-wrap;word-break:break-word;
}
.codeblock pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}
.copy-btn{
  position:absolute;top:.65rem;right:.65rem;z-index:2;
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:8px;cursor:pointer;
  background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);color:#7FE3FF;
  transition:all 200ms ease;
}
.copy-btn:hover{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.55);color:#fff}
.copy-btn.copied{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.45);color:#6EE7B7}

/* Scrollbar de los pre */
.codeblock pre::-webkit-scrollbar{height:8px;width:8px}
.codeblock pre::-webkit-scrollbar-track{background:transparent}
.codeblock pre::-webkit-scrollbar-thumb{background:rgba(0,212,255,.2);border-radius:4px}
.codeblock pre::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,.35)}

/* ----------------------------------------------------------------
   PANELES LATERALES / SECCIONES DE RECURSO
---------------------------------------------------------------- */
.side-panel{background:rgba(8,15,28,.75);border:1px solid rgba(0,212,255,.12);border-radius:18px}
.side-panel .panel-head{
  display:flex;align-items:center;gap:.6rem;padding:.9rem 1.15rem;
  border-bottom:1px solid rgba(0,212,255,.08);background:rgba(0,212,255,.03);
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,212,255,.7);
}
.dl-item{
  display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:12px;
  border:1px solid rgba(0,212,255,.14);background:rgba(0,212,255,.04);
  color:#E6FAFF;font-size:.85rem;font-weight:500;text-decoration:none;
  transition:all 220ms ease;
}
.dl-item:hover{border-color:rgba(0,212,255,.45);background:rgba(0,212,255,.09);transform:translateY(-1px)}
.dl-item svg{flex-shrink:0;color:#3DD4FF}

/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
.footer-border{border-top:1px solid rgba(0,212,255,.08)}

/* ----------------------------------------------------------------
   REVEAL + FOUC guard
---------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms ease-out,transform 700ms ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}
body:not(.anim-ready) .hero-el{opacity:0;transform:translateY(20px)}

[hidden]{display:none!important}

/* ----------------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}