/* ============================================================
   OP-AMP / ELECTRÓNICA 3 — hoja de estilos única
   Orden:
   01 Tokens · 02 Reset · 03 Fondo · 04 Nav · 05 Hero
   06 Bloques comunes · 07 Diagrama · 08 Etapas
   09 Galería y video · 10 Tabla · 11 Footer · 12 Lightbox
   13 Animaciones · 14 Responsive
   ============================================================ */

/* ---------- 01 TOKENS ------------------------------------- */
:root{
  --bg:          #050810;
  --bg-soft:     #080d1a;
  --panel:       rgba(255,255,255,.028);
  --panel-2:     rgba(255,255,255,.05);
  --line:        rgba(120,180,255,.13);
  --line-strong: rgba(120,180,255,.28);

  --txt:   #dde7f7;
  --muted: #7b8aa5;
  --dim:   #55637d;

  --acc:   #22d3ee;   /* cian  — señal */
  --acc-2: #a855f7;   /* violeta — energía */
  --acc-3: #4ade80;   /* verde — ok */

  --grad: linear-gradient(100deg, var(--acc) 0%, #7dd3fc 35%, var(--acc-2) 100%);

  --f-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head:  "Space Grotesk", var(--f-sans);
  --f-mono:  "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r:   16px;   /* radio base */
  --r-s: 10px;
  --wrap: 1180px;
  --nav-h: 66px;
}

/* ---------- 02 RESET -------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--f-head); line-height:1.12; margin:0; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
code{ font-family:var(--f-mono); font-size:.86em; color:var(--acc); background:rgba(34,211,238,.08);
      padding:.15em .45em; border-radius:6px; }
sub{ font-size:.7em; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.muted{ color:var(--muted); }
.gap-top{ margin-top:22px; }

/* ---------- 03 FONDO -------------------------------------- */
.bg-layer{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bg-grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(to right, rgba(120,180,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,180,255,.055) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
}
.bg-glow{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.5; }
.bg-glow--a{ width:620px; height:620px; top:-220px; left:-120px;
             background:radial-gradient(circle, rgba(34,211,238,.35), transparent 65%); }
.bg-glow--b{ width:680px; height:680px; top:180px; right:-220px;
             background:radial-gradient(circle, rgba(168,85,247,.28), transparent 65%); }

/* ---------- 04 NAV ---------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 24px;
  border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.is-stuck{
  background:rgba(5,8,16,.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono);
             font-size:14px; letter-spacing:.12em; }
.nav__mark{
  width:12px; height:12px; border-radius:3px; background:var(--grad);
  box-shadow:0 0 14px rgba(34,211,238,.7);
  animation:pulse 2.6s ease-in-out infinite;
}
.nav__brand-dim{ color:var(--dim); }
.nav__links{ display:flex; gap:4px; }
.nav__links a{
  font-size:13.5px; color:var(--muted); padding:8px 12px; border-radius:8px;
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--txt); background:var(--panel-2); }
.nav__links a.is-active{ color:var(--acc); }
.nav__toggle{ display:none; background:none; border:0; padding:10px; cursor:pointer; }
.nav__toggle span{ display:block; width:22px; height:2px; background:var(--txt); border-radius:2px; }
.nav__toggle span + span{ margin-top:6px; }

/* ---------- 05 HERO --------------------------------------- */
.hero{ position:relative; padding: calc(var(--nav-h) + 90px) 0 0; }
.hero__inner{ max-width:900px; }
.eyebrow{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--acc); margin-bottom:18px;
}
.hero__title{ font-size:clamp(38px, 8.6vw, 104px); font-weight:700; margin-bottom:26px;
              overflow-wrap:break-word; }
.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero__lead{ font-size:clamp(16px,2.1vw,19px); color:var(--muted); max-width:62ch; }
.hero__lead b{ color:var(--txt); font-weight:500; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 44px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:99px;
  border:1px solid var(--line-strong); color:var(--txt);
  font-size:14.5px; font-weight:500;
  transition:transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); background:var(--panel-2); border-color:var(--acc); }
.btn--primary{
  background:var(--grad); color:#04121a; border-color:transparent; font-weight:600;
  box-shadow:0 8px 30px -10px rgba(34,211,238,.6);
}
.btn--primary:hover{ box-shadow:0 14px 40px -10px rgba(34,211,238,.8); }

.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r-s);
  padding:10px 16px; min-width:132px;
}
.chips span{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
             text-transform:uppercase; color:var(--dim); }
.chips b{ font-family:var(--f-head); font-size:20px; }

/* ticker */
.hero__ticker{
  margin-top:70px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:12px 0; background:rgba(255,255,255,.012);
}
.ticker__track{
  display:flex; gap:26px; width:max-content;
  animation:slide 38s linear infinite;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; color:var(--dim);
  white-space:nowrap;
}
.ticker__track i{ color:var(--acc); font-style:normal; }

/* ---------- 06 BLOQUES COMUNES ---------------------------- */
.section{ padding:110px 0; position:relative; }
.sec-head{ max-width:720px; margin-bottom:44px; }
.sec-head h2{ font-size:clamp(30px,4.6vw,46px); margin-bottom:16px; }
.sec-lead{ color:var(--muted); font-size:16.5px; }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(6px);
}
.card.pad{ padding:28px; }
.card.pad h3{ font-size:20px; margin-bottom:12px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

.mini{ padding:26px; position:relative; overflow:hidden; transition:border-color .3s, transform .3s; }
.mini:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.mini::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:var(--grad); opacity:.35;
}
.mini__idx{ font-family:var(--f-mono); font-size:12px; color:var(--acc); letter-spacing:.2em; margin-bottom:8px; }
.mini h3{ font-size:20px; margin-bottom:10px; }
.mini p{ color:var(--muted); font-size:15px; margin:0; }

/* ---------- 07 DIAGRAMA ----------------------------------- */
.diagram{ padding:20px 10px 8px; }
.diagram__scroll{ overflow-x:auto; }
.diagram svg{ min-width:760px; width:100%; height:auto; }
.diagram__hint{
  text-align:center; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.12em; color:var(--dim); margin:6px 0 10px; text-transform:uppercase;
}
.dg-wire{ stroke:var(--line-strong); stroke-width:2; }
.dg-node circle{ fill:var(--bg); stroke:var(--acc); stroke-width:2; }
.dg-io{ fill:var(--muted); font-family:var(--f-mono); font-size:13px; text-anchor:middle; }
.dg-block rect{
  fill:rgba(255,255,255,.035); stroke:var(--line-strong); stroke-width:1.5;
  transition:stroke .25s, fill .25s;
}
.dg-block{ cursor:pointer; }
.dg-block:hover rect, .dg-block:focus-visible rect{ stroke:var(--acc); fill:rgba(34,211,238,.07); }
.dg-idx{ fill:var(--acc); font-family:var(--f-mono); font-size:13px; text-anchor:middle; letter-spacing:.2em; }
.dg-title{ fill:var(--txt); font-family:var(--f-head); font-size:21px; font-weight:600; text-anchor:middle; letter-spacing:.04em; }
.dg-sub{ fill:var(--muted); font-family:var(--f-sans); font-size:12.5px; text-anchor:middle; }
.dg-cap path, .dg-cap line{ stroke:var(--acc-2); stroke-width:2; fill:none; }
.dg-cap-lbl{ fill:var(--acc-2); font-family:var(--f-mono); font-size:13px; text-anchor:middle; }
.dg-pulse{ fill:var(--acc); }

/* ---------- 08 ETAPAS ------------------------------------- */
.stage__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
}
.stage--flip .stage__text{ order:2; }
.stage--flip .stage__fig{ order:1; }
.stage h2{ font-size:clamp(28px,4.2vw,42px); margin-bottom:16px; }

.speclist{ list-style:none; margin:26px 0; padding:0; border-top:1px solid var(--line); }
.speclist li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 2px; border-bottom:1px solid var(--line);
}
.speclist span{ color:var(--muted); font-size:14.5px; }
.speclist b{ font-family:var(--f-mono); font-size:14.5px; color:var(--txt); }

.notes{
  border-left:2px solid var(--acc); background:rgba(34,211,238,.045);
  padding:14px 18px; border-radius:0 var(--r-s) var(--r-s) 0;
}
.notes__tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc); margin-bottom:6px;
}
.notes p:last-child{ margin:0; color:var(--muted); font-size:15px; }

.stage__fig{ margin:0; }
.frame{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--bg-soft); aspect-ratio:4/3; position:relative;
  transition:border-color .3s, transform .3s;
}
.frame:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.stage__fig figcaption, .shot figcaption, .vid figcaption{
  margin-top:12px; font-size:13.5px; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
}
.stage__fig figcaption span, .shot figcaption span, .vid figcaption span{
  font-family:var(--f-mono); font-size:11.5px; color:var(--dim);
}

/* ---------- 09 GALERÍA Y VIDEO ---------------------------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.shot{ margin:0; }
.shot img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft);
  cursor:zoom-in; transition:border-color .3s, transform .3s, box-shadow .3s;
}
.shot img:hover{
  border-color:var(--acc); transform:translateY(-4px);
  box-shadow:0 20px 50px -24px rgba(34,211,238,.55);
}
.shot figcaption b, .vid figcaption b{ color:var(--txt); font-weight:500; }

.vid{ margin:0; }
.vid video{
  width:100%; aspect-ratio:16/9; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--r);
}

/* Marcador de archivo faltante (lo aplica main.js) */
.is-missing{
  position:relative; display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg, rgba(120,180,255,.045) 0 12px, transparent 12px 24px),
    var(--bg-soft);
  border:1px dashed var(--line-strong) !important;
}
.is-missing::after{
  content:attr(data-missing);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--dim); text-align:center; padding:0 16px; text-transform:uppercase;
}
/* placeholder generado por JS cuando falta el archivo */
.ph{ width:100%; aspect-ratio:4/3; border-radius:var(--r); }
.ph--16x9{ aspect-ratio:16/9; }

/* ---------- 10 TABLA -------------------------------------- */
.table-wrap{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; min-width:560px; }
.tbl th{
  text-align:left; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc); font-weight:500;
  padding:16px 20px; border-bottom:1px solid var(--line-strong);
}
.tbl td{ padding:14px 20px; border-bottom:1px solid var(--line); font-size:15px; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .2s; }
.tbl tbody tr:hover{ background:var(--panel-2); }
.tbl td:nth-child(2), .tbl td:nth-child(3){ font-family:var(--f-mono); color:var(--txt); }
.tbl td:last-child{ color:var(--dim); font-family:var(--f-mono); font-size:13px; }

/* valores pendientes resaltados suavemente */
[data-edit]{ color:var(--dim) !important; }

/* ---------- 11 FOOTER ------------------------------------- */
.footer{ border-top:1px solid var(--line); padding:44px 0; margin-top:40px; }
.footer__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.footer p{ margin:0; font-size:14px; }

/* ---------- 12 LIGHTBOX ----------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(3,5,10,.92); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:5vh 5vw;
  animation:fade .25s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:90vh; border-radius:var(--r); border:1px solid var(--line-strong); }
.lightbox__close{
  position:absolute; top:20px; right:26px;
  background:none; border:0; color:var(--txt); font-size:38px; line-height:1; cursor:pointer;
}

/* ---------- 13 ANIMACIONES -------------------------------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveal.is-in{ opacity:1; transform:none; }

@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 14 RESPONSIVE --------------------------------- */
@media (max-width: 980px){
  .grid-3{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .stage__inner{ grid-template-columns:1fr; gap:34px; }
  .stage--flip .stage__text{ order:0; }
  .stage--flip .stage__fig{ order:0; }
}
@media (max-width: 760px){
  .section{ padding:76px 0; }
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:0; padding:10px 16px 18px;
    background:rgba(5,8,16,.96); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:12px 8px; font-size:15px; }
  .grid-2, .gallery{ grid-template-columns:1fr; }
  .hero{ padding-top: calc(var(--nav-h) + 56px); }
  .hero__ticker{ margin-top:46px; }
  .chips li{ flex:1 1 44%; min-width:0; }
  .wrap{ padding-inline:18px; }
}