:root{
  color-scheme:dark;
  --bg:#050912;
  --panel:rgba(8,16,29,.82);
  --panel-strong:rgba(8,15,27,.94);
  --cyan:#35d8ff;
  --cyan-soft:#91ecff;
  --blue:#3b7cff;
  --violet:#925cff;
  --magenta:#df63ff;
  --text:#f6fbff;
  --muted:#a9bac9;
  --border:rgba(86,203,255,.26);
  --glow:rgba(59,179,255,.20);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);background:
  radial-gradient(circle at 80% 15%,rgba(88,50,205,.14),transparent 32%),
  radial-gradient(circle at 12% 20%,rgba(0,185,255,.10),transparent 28%),
  linear-gradient(180deg,#050913 0%,#070d17 45%,#05080f 100%);overflow-x:hidden}
a{color:inherit}.page-shell{width:min(1420px,calc(100% - 28px));margin:0 auto;padding:18px 0 42px}

/* Marco general tipo HUD */
.page-shell::before,.page-shell::after{content:"";position:fixed;z-index:0;pointer-events:none;opacity:.34}
.page-shell::before{inset:0;background:
  linear-gradient(90deg,transparent 0 24px,rgba(47,203,255,.09) 24px 25px,transparent 25px calc(100% - 25px),rgba(47,203,255,.09) calc(100% - 25px) calc(100% - 24px),transparent calc(100% - 24px)),
  linear-gradient(180deg,transparent 0 20px,rgba(143,92,255,.08) 20px 21px,transparent 21px)}
.page-shell::after{width:260px;height:260px;right:-90px;top:20px;border:1px solid rgba(84,204,255,.12);transform:rotate(45deg)}

.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:11px 14px;margin-bottom:16px;border:1px solid rgba(82,199,255,.16);border-radius:18px;background:rgba(4,10,18,.55);backdrop-filter:blur(14px);box-shadow:0 14px 45px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.02)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}.brand-mark{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid rgba(95,226,255,.38);box-shadow:0 0 20px rgba(60,191,255,.16)}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;inset:9px;border:1px solid var(--cyan);border-radius:50%;transform:rotate(55deg)}.brand-mark::after{transform:rotate(-55deg);border-color:var(--violet)}
.brand-core{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:white;transform:translate(-50%,-50%);box-shadow:0 0 12px var(--cyan),0 0 24px var(--violet)}
.brand-text strong{display:block;font-size:14px;letter-spacing:.02em}.brand-text strong .brand-version{display:inline;font-size:inherit;color:var(--cyan);letter-spacing:.02em;text-transform:none}.brand-text>span{font-size:10px;color:#80dfff;letter-spacing:.12em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:6px}.nav a{font-size:12px;color:#d2deea;text-decoration:none;padding:8px 11px;border-radius:999px}.nav a:hover,.nav a.active{color:#fff;background:rgba(63,187,255,.08);box-shadow:inset 0 0 0 1px rgba(70,204,255,.18)}
.author{font-size:11px;color:#b7ecff;border:1px solid rgba(89,199,255,.22);border-radius:999px;padding:7px 10px;background:rgba(36,123,172,.08)}

.hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(480px,1.15fr);min-height:570px;border:1px solid rgba(70,203,255,.30);border-radius:24px;overflow:hidden;background:
  linear-gradient(90deg,rgba(5,12,23,.98) 0%,rgba(5,12,23,.86) 37%,rgba(6,11,22,.40) 65%,rgba(7,10,18,.74) 100%),
  radial-gradient(circle at 72% 52%,rgba(88,57,208,.18),transparent 31%),
  linear-gradient(180deg,#08111f,#060b14);
box-shadow:0 26px 70px rgba(0,0,0,.40),0 0 36px rgba(43,170,255,.09),inset 0 0 0 1px rgba(255,255,255,.025)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.46;background:
  repeating-linear-gradient(90deg,transparent 0 72px,rgba(75,184,255,.035) 72px 73px),
  repeating-linear-gradient(0deg,transparent 0 72px,rgba(119,75,255,.028) 72px 73px),
  linear-gradient(120deg,transparent 0 54%,rgba(68,188,255,.04) 54% 54.5%,transparent 54.5%)}
.hero::after{content:"";position:absolute;right:-6%;top:0;width:62%;height:100%;pointer-events:none;background:
  radial-gradient(ellipse at 50% 81%,rgba(37,140,255,.20),transparent 30%),
  linear-gradient(105deg,transparent 0 48%,rgba(117,58,255,.06) 48% 49%,transparent 49% 59%,rgba(38,213,255,.04) 59% 60%,transparent 60%);mix-blend-mode:screen}
.hero-copy{position:relative;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:54px 30px 52px 44px}
.eyebrow{align-self:flex-start;margin:0 0 5px;padding:7px 11px;border-radius:999px;border:1px solid rgba(46,210,255,.35);color:#63e9ff;background:rgba(13,119,167,.08);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 18px rgba(45,205,255,.08)}
.visitor-inline{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:6px 10px;border-radius:999px;border:1px solid rgba(46,210,255,.28);color:#4fc1d8;background:rgba(13,119,167,.065);font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 16px rgba(45,205,255,.055)}
.visitor-inline-label,.visitor-inline-count{font:inherit;color:inherit;letter-spacing:inherit;text-shadow:none}
.visitor-inline-count{font-variant-numeric:tabular-nums}
.hero h1{font-size:clamp(44px,5vw,72px);line-height:.97;margin:0;letter-spacing:-.04em;text-shadow:0 0 28px rgba(111,191,255,.14)}
.hero .subtitle{font-size:clamp(17px,1.5vw,23px);margin:18px 0 14px;color:#d8f4ff}.hero .description{font-size:14px;line-height:1.65;color:#aebfce;max-width:575px;margin:0 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:800;background:linear-gradient(100deg,#25cfff 0%,#347dff 48%,#8f55ff 100%);box-shadow:0 0 24px rgba(70,145,255,.32),inset 0 1px 0 rgba(255,255,255,.28)}.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.badge{padding:7px 10px;border:1px solid rgba(94,190,255,.18);border-radius:999px;color:#91aabd;background:rgba(4,12,21,.68);font-size:10px;letter-spacing:.05em}.badge b{color:#6bdfff}

.atom-stage{position:relative;z-index:4;min-height:570px;isolation:isolate}
.atom-stage::before{content:"";position:absolute;left:50%;bottom:54px;width:72%;height:100px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(58,149,255,.28) 0%,rgba(105,61,255,.12) 34%,transparent 68%);filter:blur(4px)}
.atom-stage::after{content:"";position:absolute;left:50%;bottom:74px;width:57%;height:72px;transform:translateX(-50%);border:2px solid rgba(50,199,255,.36);border-radius:50%;box-shadow:0 0 22px rgba(53,190,255,.22),inset 0 0 28px rgba(133,65,255,.12)}
#atomCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;pointer-events:none}
.atom-fallback{position:absolute;z-index:2;left:50%;top:49%;width:250px;height:250px;transform:translate(-50%,-50%);opacity:.8}.atom-fallback .nucleus{position:absolute;left:50%;top:50%;width:74px;height:74px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 7%,#d79aff 8% 20%,#655cff 38%,rgba(56,201,255,.2) 70%);box-shadow:0 0 35px #6e67ff,0 0 80px rgba(63,209,255,.38)}.atom-fallback .orbit{position:absolute;left:50%;top:50%;width:230px;height:88px;border:2px solid rgba(85,224,255,.62);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r))}.atom-fallback .o1{--r:0deg}.atom-fallback .o2{--r:60deg;border-color:rgba(179,91,255,.62)}.atom-fallback .o3{--r:-60deg;border-color:rgba(73,116,255,.58)}
.atom-status{position:absolute;z-index:6;right:18px;bottom:18px;padding:8px 10px;border:1px solid rgba(148,100,255,.28);border-radius:10px;background:rgba(7,12,24,.70);font-size:10px;color:#b8c9db;backdrop-filter:blur(8px)}.atom-status strong{color:#b48bff;letter-spacing:.06em}

.section{position:relative;z-index:3;margin-top:20px;padding:24px 18px 20px;border:1px solid rgba(87,191,255,.15);border-radius:20px;background:rgba(7,13,22,.72);box-shadow:0 16px 48px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.02)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.section-head h2{font-size:18px;margin:0}.section-head p{margin:0;color:#8095a8;font-size:11px}.section-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(63,213,255,.34),rgba(139,76,255,.12),transparent)}
 .cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,230px));
  justify-content:center;
  gap:24px;
}
.card{
  position:relative;
  min-width:0;
  text-decoration:none;
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.card-poster{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  width:100%;
  padding:11px 10px 14px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(8,18,32,.72),rgba(5,10,18,.90));
  border:1px solid rgba(78,214,255,.18);
}
.poster-image{
  width:100%;
  aspect-ratio:551/714;
  overflow:hidden;
  border-radius:15px;
  background:#050a12;
  box-shadow:0 0 18px rgba(64,190,255,.10),0 0 0 1px rgba(113,222,255,.13);
}
.poster-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(.94);
  filter:saturate(.72) brightness(.91) contrast(1.04);
  transition:transform .32s cubic-bezier(.2,.75,.2,1),filter .32s ease;
}
.poster-caption{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
  padding:0 3px;
}
.poster-caption strong{font-size:13px;line-height:1.25;color:#f4fbff;font-weight:800}
.poster-caption span{font-size:9.5px;line-height:1.42;color:#91a5b7;font-weight:400}
.cards-posters .card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:19px;
  border:1px solid rgba(86,225,255,.11);
  pointer-events:none;
  opacity:.58;
  box-shadow:inset 0 0 18px rgba(173,81,255,.03);
  transition:border-color .28s ease,box-shadow .28s ease,opacity .28s ease;
}
@media (hover:hover) and (pointer:fine){
  .card-poster:hover{
    transform:translateY(-3px);
    border-color:rgba(78,214,255,.36);
    box-shadow:0 12px 28px rgba(0,0,0,.30),0 0 20px rgba(61,195,255,.09);
  }
  .card-poster:hover .poster-image img{
    transform:scale(1);
    filter:saturate(1.08) brightness(1.03) contrast(1.06);
  }
  .cards-posters .card:hover::after{
    opacity:.92;
    border-color:rgba(83,225,255,.29);
    box-shadow:0 0 18px rgba(55,195,255,.10),inset 0 0 18px rgba(173,81,255,.045);
  }
}


/* Proyectos anexos: visualmente relacionados con el laboratorio, pero separados de los experimentos. */
.annex-section{margin-top:20px}
.annex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:22px}
.annex-card{position:relative;display:grid;grid-template-columns:1fr;gap:14px;padding:15px 15px 14px;border-radius:18px;border:1px solid rgba(153,91,255,.24);background:linear-gradient(110deg,rgba(10,18,33,.96),rgba(8,12,24,.92));text-decoration:none;overflow:hidden;box-shadow:0 15px 36px rgba(0,0,0,.27),inset 0 0 0 1px rgba(255,255,255,.02);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.annex-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 50%,rgba(45,205,255,.12),transparent 35%),radial-gradient(circle at 80% 20%,rgba(147,83,255,.10),transparent 35%);pointer-events:none}
.annex-card:hover{transform:translateY(-3px);border-color:rgba(128,205,255,.44);box-shadow:0 18px 38px rgba(0,0,0,.32),0 0 24px rgba(112,79,255,.10)}
.annex-visual{position:relative;z-index:1;aspect-ratio:551/714;border-radius:14px;overflow:hidden;border:1px solid rgba(84,211,255,.22);background:#050a12;box-shadow:inset 0 0 28px rgba(57,178,255,.05),0 0 18px rgba(67,187,255,.08)}
.annex-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(3,8,18,.18) 100%),radial-gradient(circle at 76% 18%,rgba(171,79,255,.10),transparent 34%)}
.annex-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84) brightness(.95) contrast(1.04);transform:none;transition:filter .32s ease,transform .32s cubic-bezier(.2,.75,.2,1)}
@media (hover:hover) and (pointer:fine){.annex-card:hover .annex-visual img{filter:saturate(1.06) brightness(1.01) contrast(1.06);transform:scale(1.015)}}
.annex-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px}.annex-tag{align-self:flex-start;padding:5px 8px;border-radius:999px;border:1px solid rgba(166,101,255,.28);color:#b99aff;background:rgba(100,62,184,.08);font-size:8px;letter-spacing:.14em}.annex-copy strong{font-size:17px;color:#f5fbff}.annex-copy>span:not(.annex-tag){font-size:10px;line-height:1.55;color:#9cb0c2}.annex-copy small{font-size:8.5px;color:#71879a;letter-spacing:.05em}.annex-arrow{position:relative;z-index:1;justify-self:end;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(104,212,255,.25);color:#70e9ff;background:rgba(34,116,165,.08)}

.footer{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;padding:20px 8px 2px;color:#7790a4;font-size:10px;text-align:center}.footer a{color:#8fdfff;text-decoration:none}.footer a:hover{text-decoration:underline}

@media(max-width:1050px){
  .hero{grid-template-columns:1fr 1fr}
  .hero-copy{padding-left:30px}
  .cards{grid-template-columns:repeat(2,minmax(0,230px));gap:22px}
  .annex-grid{grid-template-columns:repeat(2,minmax(0,300px))}
}
@media(max-width:760px){
  .page-shell{width:calc(100% - 16px);padding-top:8px}
  .topbar{padding:8px 10px}
  .brand-text>span,.author,.nav a:not(.active){display:none}
  .nav{margin-left:auto}
  .nav a.active{font-size:10px;padding:7px 9px}
  .hero{display:block;min-height:auto}
  .hero-copy{padding:28px 20px 10px}
  .hero h1{font-size:42px}
  .hero .description{font-size:12px}
  .visitor-inline,.visitor-inline-count{font-size:8px}
  .atom-stage{min-height:430px}
  .section{padding:18px 10px 14px}
  .section-head{display:block}
  .section-head p{margin-top:5px}
  .section-line{display:none}
  .cards{grid-template-columns:minmax(0,280px);justify-content:center;gap:18px}
  .card-poster{width:100%}
  .poster-image img{transform:none;filter:saturate(1.02) brightness(1) contrast(1.04)}
  .poster-caption{text-align:center}
  .poster-caption strong{font-size:13px}
  .poster-caption span{font-size:10px}
  .annex-grid{grid-template-columns:minmax(0,340px)}
  .annex-card{gap:12px;text-align:left;padding:12px}
  .annex-visual{aspect-ratio:551/714}
  .annex-copy{align-items:flex-start}
  .annex-arrow{position:relative;right:auto;bottom:auto;justify-self:end}
  .footer{display:block;text-align:center;line-height:1.6}
}
@media(max-width:420px){.hero h1{font-size:35px}.atom-stage{min-height:360px}.atom-status{right:10px;bottom:10px}.cta{width:100%;justify-content:center}.badges{gap:6px}.badge{font-size:9px}.card-media{height:170px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.cta{transition:none}}

/* V42: seis experimentos; conservar tarjetas compactas y mantener visible la versión del producto. */
@media (min-width:1051px) and (max-width:1249px){.cards-posters{grid-template-columns:repeat(3,minmax(0,220px));gap:18px}}
@media (min-width:1250px){.cards-posters{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.card-poster{max-width:210px;justify-self:center;width:100%}}