/* =====================
       Variables de estilo
       ===================== */
    :root{
      --navy: #10223b;
      --navy-700: #173459;
      --violet: #6a4bc7;
      --violet-300: #b7a5ff;
      --soft-red: #d55b6a;
      --soft-red-200: #f5b7c0;
      --bg: #0b1628;
      --text: #e9ecf1;
      --muted: #b7c1d4;
      --card: #16253f;
      --card-2: #1a2c4d;
      --glow: 0 10px 30px rgba(106,75,199,.35);
      --radius: 16px;
    }

    /* Tipografía elegante */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    html, body { height: 100%; }
    body{
      font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
      color: var(--text);
      background: linear-gradient(180deg, #0b1628, #0e1b2f 40%, #111e36);
      line-height: 1.6;
    }

    a{ color: var(--violet-300); text-decoration: none; }
    a:hover{ text-decoration: underline; }

    /* =====================
       Layout base
       ===================== */
    .container{ width: min(1200px, 92%); margin: 0 auto; }
    .section{ padding: 72px 0; }
    .grid{ display: grid; gap: 24px; }

    /* =====================
       Header & Navegación
       ===================== */
    header{
      position: fixed; top: 0; z-index: 50;
      backdrop-filter: saturate(1.2) blur(6px);
      background: rgba(11,22,40,0.75);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      width: 100%;
      height: 15vh;
    }
    .nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.4px; }
    .brand .logo{
      width:42px; height:42px; border-radius:12px;
      background: conic-gradient(from 140deg, var(--violet), var(--soft-red), var(--navy-700));
      box-shadow: var(--glow);
    }
    .menu{ display:flex; gap: 22px; align-items:center; }
    .menu a{ font-weight:500; color: var(--muted); }
    .menu a:hover{ color: var(--text); }

    .clock{ font-size:.9rem; color: var(--violet-300); display:flex; align-items:center; gap:8px; }

    /* Hamburguesa */
    .hamb{ display:none; background:none; border:none; color:var(--text); }
    .hamb svg{ width:28px; height:28px; }

    @media (max-width: 920px){
      .menu{ display:none; position:absolute; left:0; right:0; top:64px; padding:16px; background: rgba(16,34,59,.98); border-bottom:1px solid rgba(255,255,255,.06); }
      .menu.open{ display:flex; flex-direction:column; gap:14px; }
      .hamb{ display:inline-flex; }
    }

    /* =====================
       Hero
       ===================== */
    .hero{
      position: relative;
      border-radius: calc(var(--radius) * 1.4);
      overflow:hidden;
      background: radial-gradient(1200px 600px at 20% 0%, rgba(106,75,199,.25), transparent 60%),
                  radial-gradient(1000px 600px at 80% 100%, rgba(213,91,106,.18), transparent 60%),
                  linear-gradient(135deg, #0e1c33, #1a2c4d);
      min-height: 62vh;
      display:grid; place-items:center; text-align:center;
      box-shadow: var(--glow);
    }
    .hero-inner{ padding: 72px 24px; }
    .hero h1{ font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 12px; }
    .hero p{ font-size: clamp(1rem, 2.3vw, 1.25rem); color: var(--muted); max-width: 900px; margin: 0 auto 22px; }
    .cta{ display:inline-flex; align-items:center; gap:12px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1);
          background: linear-gradient(135deg, rgba(106,75,199,.35), rgba(213,91,106,.25)); color: #fff; font-weight:600; box-shadow: var(--glow); }
    .cta:hover{ filter: brightness(1.1); text-decoration:none; }

    /* =====================
       Tarjetas con imagen y degradado
       ===================== */
    .cards{ grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 900px){ .cards{ grid-template-columns: 1fr; } }

    .card{
      position:relative; border-radius: var(--radius); overflow:hidden; background: var(--card);
      min-height: 240px; display:flex; flex-direction:column; justify-content:flex-end;
      box-shadow: 0 4px 22px rgba(0,0,0,.25);
      isolation: isolate;
    }
    .card::before{
      content:""; position:absolute; inset:0; z-index:0;
      background-size: cover; background-position:center;
      filter: saturate(1.1) contrast(1.05) brightness(.9);
      transform: scale(1.01);
    }
    .card::after{
      content:""; position:absolute; inset:0; z-index:1;
      background: linear-gradient(180deg, rgba(16,34,59,0) 10%, rgba(16,34,59,.55) 55%, rgba(16,34,59,.92) 100%),
                  radial-gradient(800px 300px at 80% -10%, rgba(106,75,199,.35), transparent 60%);
    }
    .card > .content{ position:relative; z-index:2; padding: 18px; }
    .card h3{ margin:0 0 6px; font-size: 1.2rem; }
    .card p{ margin:0; color: var(--muted); }

    /* fondos variados por tarjeta */
    .bg-mision::before{ background-image: url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=1400&auto=format&fit=crop'); }
    .bg-vision::before{ background-image: url('https://images.unsplash.com/photo-1529336953121-ad5a0d43d0b5?q=80&w=1400&auto=format&fit=crop'); }
    .bg-objetivo::before{ background-image: url('https://images.unsplash.com/photo-1535016120720-40c646be5580?q=80&w=1400&auto=format&fit=crop'); }

    .bg-gobernanza::before{ background-image: url('https://images.unsplash.com/photo-1529101091764-c3526daf38fe?q=80&w=1400&auto=format&fit=crop'); }
    .bg-normativa::before{ background-image: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1400&auto=format&fit=crop'); }
    .bg-alimento::before{ background-image: url('https://images.unsplash.com/photo-1511690656952-34342bb7c2f2?q=80&w=1400&auto=format&fit=crop'); }
    .bg-proceso::before{ background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1400&auto=format&fit=crop'); }
    .bg-laboratorio::before{ background-image: url('https://images.unsplash.com/photo-1581594693700-1890e6f62f98?q=80&w=1400&auto=format&fit=crop'); }
    .bg-peste::before{ background-image: url('https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?q=80&w=1400&auto=format&fit=crop'); }

    /* =====================
       Contacto
       ===================== */
    form{ display:grid; gap:12px; }
    input, textarea, button{
      border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
      padding: 12px 14px; background: rgba(255,255,255,.04); color: var(--text);
      width: 100%;
    }
    textarea{ min-height: 130px; resize: vertical; }
    button[type="submit"]{ cursor:pointer; font-weight:600; background: linear-gradient(135deg, var(--violet), var(--soft-red)); box-shadow: var(--glow); }
    button[type="submit"]:hover{ filter: brightness(1.06); }

    /* =====================
       Dashboard
       ===================== */
    .stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom: 16px; }
    .stat{
      background: linear-gradient(180deg, var(--card), var(--card-2));
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 14px; padding: 14px;
    }
    .stat .label{ color: var(--muted); font-size:.9rem; }
    .stat .value{ font-size: 1.4rem; font-weight:700; }
    @media (max-width: 900px){ .stats{ grid-template-columns: 1fr 1fr; } }

    canvas{ background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 16px; }

    /* =====================
       Footer
       ===================== */
    footer{
      margin-top: 56px; padding: 24px 0; color: var(--muted);
      border-top: 1px solid rgba(255,255,255,.06);
    }
    .footer-grid{ display:grid; grid-template-columns: 1fr auto; gap: 12px; align-items:center; }
    .footer-menu{ display:flex; gap:16px; flex-wrap: wrap; }

    /* Utilidades */
    .title{ display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
    .kicker{ color: var(--violet-300); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }