:root{
      --green:#16a34a;
      --green-soft:#e8f7ee;
      --blue:#0ea5e9;
      --blue-soft:#e6f6fd;
      --text:#0f172a;
      --muted:#64748b;
      --panel:#ffffff;
      --line:#e5e7eb;
      --shadow:0 14px 35px rgba(2,6,23,.10);
      --radius:18px;
    }

    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--text);
      background: #f6f8fb;
      margin:0;
    }
    .container{
      width:min(1120px, 100% - 2rem);
      margin:0 auto;
    }

    /* ===== HERO ===== */
    .nos-hero{
      position:relative;
      padding: 80px 0 60px;
      background:
        radial-gradient(900px 400px at 10% -20%, rgba(14,165,233,.12), transparent 60%),
        radial-gradient(900px 400px at 100% 0%, rgba(22,163,74,.12), transparent 60%),
        linear-gradient(180deg, #ffffff, #f6f8fb);
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
    .nos-hero h1{
      font-size: clamp(2rem, 3.3vw, 2.8rem);
      text-align:center;
      letter-spacing:.3px;
      margin:0 0 8px;
      font-weight:800;
    }
    .nos-hero p{
      text-align:center;
      color:var(--muted);
      font-size: clamp(1rem, 1.4vw, 1.1rem);
      max-width:720px;
      margin:0 auto;
    }

    /* decor */
    .orb{
      position:absolute; border-radius:999px; filter: blur(40px); opacity:.7;
    }
    .orb.a{ width:220px; height:220px; background:rgba(14,165,233,.25); top:-60px; left:-60px; }
    .orb.b{ width:260px; height:260px; background:rgba(22,163,74,.25); bottom:-80px; right:-80px; }

    /* ===== GRID VM ===== */
    .vm-grid{
      margin-top: 40px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 18px;
    }

    .vm-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px 22px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
      transform: translateY(8px);
      opacity:0;
      transition: .6s ease;
    }
    .vm-card.show{
      transform: translateY(0);
      opacity:1;
    }

    .vm-card .badge{
      display:flex; align-items:center; gap:10px;
      font-weight:700; font-size:1.15rem;
      margin-bottom:10px;
    }
    .vm-card .icon{
      width:44px; height:44px; display:grid; place-items:center;
      border-radius:12px; font-size:20px; font-weight:800; color:#fff;
      background: linear-gradient(135deg, var(--blue), #38bdf8);
      box-shadow:0 6px 18px rgba(14,165,233,.35);
    }
    .vm-card.mision .icon{
      background: linear-gradient(135deg, var(--green), #22c55e);
      box-shadow:0 6px 18px rgba(22,163,74,.35);
    }

    .vm-card p{
      color:#334155;
      font-size:1rem;
      line-height:1.7;
      margin:0;
    }


    /* brillo lateral */
    .vm-card::after{
      content:"";
      position:absolute; inset:-40% -40% auto auto;
      width:240px; height:240px;
      background: radial-gradient(circle, rgba(14,165,233,.12), transparent 60%);
      transform: translate(40px,-40px);
    }
    .vm-card.mision::after{
      background: radial-gradient(circle, rgba(22,163,74,.12), transparent 60%);
    }

    /* ===== VALORES ===== */
    .valores-wrap{
      margin:18px 0 70px;
      background:var(--panel);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      transform: translateY(8px);
      opacity:0;
      transition:.6s ease .15s;
    }
    .valores-wrap.show{ transform:translateY(0); opacity:1; }

    .valores-title{
      display:flex; align-items:center; gap:10px;
      font-size:1.2rem; font-weight:800; margin-bottom:12px;
    }
    .valores-title .icon{
      width:44px; height:44px; display:grid; place-items:center;
      border-radius:12px; background:#0f172a; color:#fff; font-size:18px;
      box-shadow:0 6px 18px rgba(2,6,23,.25);
    }

    .valores-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin-top:10px;
    }

    .valor-item{
      border:1px dashed var(--line);
      border-radius:14px;
      padding:14px 14px;
      display:flex; gap:12px; align-items:flex-start;
      background: linear-gradient(135deg, #fff, #f8fafc);
      transition:.2s ease;
    }
    .valor-item:hover{
      transform: translateY(-2px);
      border-color:#cbd5e1;
      box-shadow:0 8px 18px rgba(2,6,23,.06);
    }

    .valor-dot{
      min-width:36px; height:36px; border-radius:999px;
      display:grid; place-items:center; font-weight:900; color:#fff;
      background: #0ea5e9;
    }
    .valor-item:nth-child(2) .valor-dot{ background:#22c55e; }
    .valor-item:nth-child(3) .valor-dot{ background:#f59e0b; }
    .valor-item:nth-child(4) .valor-dot{ background:#a855f7; }

    .valor-item h4{
      margin:0 0 4px; font-size:1rem; font-weight:800;
    }
    .valor-item p{
      margin:0; color:#475569; font-size:.95rem; line-height:1.55;
    }

    /* ===== responsive ===== */
    @media (max-width: 900px){
      .vm-grid{ grid-template-columns: 1fr; }
      .valores-grid{ grid-template-columns: 1fr; }
      .nos-hero{ padding-top:70px; }
    }