:root{
      /* Colores inspirados en el escudo del CIMNM */
      --cimnm-burgundy: #7A0E19;  /* granate */
      --cimnm-burgundy-600: #5f0b14;
      --cimnm-blue: #0B4F9A;      /* azul emblema */
      --cimnm-blue-600:#083d77;
      --cimnm-cream: #f7f5f4;     /* fondo suave */
      --ring: rgba(255,255,255,.35);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --cimnm-cream:#0f1115;
        --ring: rgba(255,255,255,.18);
      }
    }
    html,body{ height:100%; }
    body{
      background:
        radial-gradient(1200px 1200px at 15% 10%, rgba(122,14,25,.12), transparent 60%),
        radial-gradient(900px 900px at 85% 90%,  rgba(11,79,154,.12), transparent 60%),
        linear-gradient(180deg, var(--cimnm-cream), var(--cimnm-cream));
      display:flex; align-items:center; justify-content:center;
      font-feature-settings: "ss01","cv01";
    }
    .portal{
      width:min(920px, 92vw);
      background: rgba(255,255,255,.6);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 22px;
      box-shadow:
        0 10px 30px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.6);
      padding: clamp(1.25rem, 3vw, 2rem);
    }
    @media (prefers-color-scheme: dark){
      .portal{
        background: rgba(17,19,24,.6);
        border-color: rgba(255,255,255,.08);
        box-shadow:
          0 10px 30px rgba(0,0,0,.45),
          inset 0 1px 0 rgba(255,255,255,.04);
      }
    }
    .brand{
      display:flex; align-items:center; gap:1rem; justify-content:center;
    }
    .brand img{
      width:72px; height:72px; object-fit:contain;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
    }
    .brand h1{
      font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      margin:0; line-height:1.1;
      letter-spacing:.3px;
    }
    .brand span{
      display:block; font-size:.95rem; opacity:.8; margin-top:.15rem;
    }
    .grid{
      display:grid; gap:1rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:1.25rem;
    }
    @media (max-width: 720px){
      .grid{ grid-template-columns: 1fr; }
    }
    .card-link{
      position:relative; overflow:hidden;
      border-radius: 18px;
      padding: 1rem;
      background: white;
      border: 1px solid rgba(0,0,0,.06);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      text-decoration:none;
      display:flex; align-items:center; gap:.9rem;
      min-height: 88px;
    }
    .card-link:focus-visible{ outline: 3px solid var(--ring); outline-offset: 3px; }
    .card-link .icon{
      width:52px; height:52px; border-radius:14px;
      display:grid; place-items:center; font-size:1.6rem; color:white;
      box-shadow: inset 0 -10px 22px rgba(0,0,0,.08);
      flex-shrink:0;
    }
    .card-link h3{
      font-size:1.05rem; margin:0; color:#1e293b; /* slate-800 */
    }
    .card-link p{
      margin: .15rem 0 0; font-size:.92rem; color:#64748b; /* slate-500 */
    }
    .card-link:hover{
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(0,0,0,.08);
      border-color: rgba(0,0,0,.12);
    }
    /* Colores por módulo */
    .bg-burgundy{ background: linear-gradient(135deg, var(--cimnm-burgundy), var(--cimnm-burgundy-600)); }
    .bg-blue{     background: linear-gradient(135deg, var(--cimnm-blue), var(--cimnm-blue-600)); }
    .bg-neutral{  background: linear-gradient(135deg, #6b7280, #4b5563); }

    /* Footer minimal */
    .foot{
      text-align:center; opacity:.65; font-size:.85rem; margin-top:1rem;
    }

    /* micro-animación de entrada */
    .fade-up{ animation: fadeUp .5s ease both; }
    .fade-up:nth-child(2){ animation-delay:.05s; }
    .fade-up:nth-child(3){ animation-delay:.1s; }
    @keyframes fadeUp{
      from{ opacity:0; transform: translateY(8px); }
      to  { opacity:1; transform: translateY(0); }
    }