:root{
    --pageW: 1180px;
    --sideGap: 64px;
    --menuH: 64px;
    --gap: 24px;
  }

  #particles-js{position:absolute;inset:0;height:100%;z-index:1;}
  .stage{ z-index:2; }

  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
  html,body{overflow-x:hidden}

  body{
    background:url('images/fondo.png') no-repeat center center/cover;
    position:relative;color:#1a1a1a;
  }
  .overlay-bg{position:absolute;inset:0;background:rgba(85,40,150,.10);z-index:0}

  .stage{
    position:absolute;inset:0;display:grid;z-index:1;
    grid-template-rows:auto 1fr auto;
    width:min(var(--pageW), calc(100% - var(--sideGap)));
    margin:auto;row-gap:18px;
  }

  .header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 20px}
  .ribbon{
    background:#2f3b8f;color:#fff;font-weight:800;font-size:22px;
    padding:12px 24px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.18)
  }
  .intro{
    font-size:14px;line-height:1.38;text-align:center;color:#20304f;
    background:rgba(255,255,255,.62);padding:10px 12px;border-radius:10px;
    border:1px dashed rgba(32,48,79,.22);backdrop-filter:blur(3px);max-width:980px
  }

  .content{
    width:min(1080px,96%);
    justify-self:center;
    display:grid;
    grid-template-columns: 1fr 420px;
    gap: var(--gap);
    align-items:flex-start;
    padding-bottom:24px;
    overflow:auto;
  }

  .article{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.9);
    border-radius:14px;
    padding:14px 16px;
    box-shadow:0 8px 24px rgba(0,0,0,.08) inset;
    animation:fadeSlideLeft .8s ease-out forwards;
  }
  .article h1{
    font-size:30px;line-height:1.15;color:#2a2a7a;margin:4px 0 6px;font-weight:800;
  }
  .article .subtitle{ color:#86dfd5;font-weight:800; }
  .article p{
    margin:6px 0 8px;line-height:1.45;color:#20304f;font-size:16px;
    text-align:justify;
  }
  .kicker{ font-style:italic;color:#6d7da8;margin-bottom:6px; }

  .media{position:sticky; top:10px; align-self:start;display:flex; flex-direction:column; gap:10px;animation:fadeSlideRight .8s ease-out forwards;}
  .card{background:#fff;border:1px solid rgba(32,48,79,.08);border-radius:16px;padding:10px;box-shadow:0 12px 28px rgba(0,0,0,.12);}
  .card img{width:100%;height:auto;border-radius:10px;display:block;cursor:zoom-in;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));}
  .img-caption{font-size:12px;color:#5a678d;text-align:center}

  .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;place-items:center;z-index:2000}
  .lightbox img{max-width:min(94vw,1400px);max-height:90vh;border-radius:12px}
  .lightbox[aria-hidden="false"]{display:grid}

  .overlay{z-index: 999;position: absolute;left: 0; right: 0; bottom: 0;width: 100%;padding: 16px;display: flex; justify-content: center; gap: 12px;flex-wrap: nowrap; overflow-x: auto;backdrop-filter: blur(6px);background-color: rgba(255, 255, 255, 0.1);border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid white;-webkit-overflow-scrolling: touch; scrollbar-width: none;}
  .overlay::-webkit-scrollbar{display:none}
  .overlay a{flex:0 0 auto; padding:12px 18px; font-size:17px; white-space:nowrap;background:#2346a4; color:#fff; text-decoration:none; border:1px solid #fff; border-radius:20px;}
  .overlay a.is-active{outline:2px solid #fff;box-shadow:0 0 0 3px rgba(35,70,164,.35) inset;font-weight:700}

  .nav{position:fixed;right:18px;bottom:calc(var(--menuH) + 12px);display:flex;gap:10px;z-index:1000;}
  .btn{width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.6);border:0;cursor:pointer;display:grid;place-items:center;transition:transform .08s}
  .btn:active{transform:scale(.95)} .btn svg{width:26px;height:26px;fill:#fff}

  @keyframes fadeSlideLeft {0% {opacity:0; transform:translateX(-30px);}100% {opacity:1; transform:translateX(0);}}
  @keyframes fadeSlideRight {0% {opacity:0; transform:translateX(30px);}100% {opacity:1; transform:translateX(0);}}

  @media (max-width: 1024px){.content{ grid-template-columns: 1fr; } .media{ position:relative; top:auto; order:-1 }}
  @media (orientation:portrait){.overlay-bg,.stage,.overlay,.nav{display:none!important}body{background:#3a0060;color:#fff}body::before{content:"Gira tu dispositivo para ver el catálogo en horizontal.";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-size:20px;}body::after{content:"↻";position:absolute;left:50%;top:calc(50% + 70px);transform:translateX(-50%);font-size:54px;animation:rot 2s linear infinite;}@keyframes rot{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}}